<!-- * @Author: your name * @Date: 2022-01-11 13:44:17 * @LastEditTime: 2023-07-12 17:13:16 * @LastEditors: 纪泽龙 jizelong@qq.com * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /test/hello-world/src/views/Home.vue --> <template> <div class="home bigwindow" @click='windowClick'> <div class="goSystem" @click="$router.push('/index')">进入管理系统</div> <div id="map"></div> <!-- <Center :show="show" :centerData="centerData" /> --> <UserCenter :title="centerTitle" :show="userCenterShow" ref="userCenter" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20" /> <OtherCenter :title="centerTitle" :show="otherCenterShow" ref="otherCenter" :detcetorList="detcetorList" :userId="centerUserId" :total="centerTotal" :pageSize="20" /> <PipeColor /> <PipeSelect @transmit="getPipeSelectMessage" @closeMediumPressureLine="clearBigWindowsSelectPipe"/> <!-- 底部按钮 --> <!-- <div class="home-div"> <img src="../../assets/firstimage/bottombk.svg" alt="" style="backdrop-filter: blur(4px);" /> <div class="listingsSty fangy"> <div @click="allCompany" :class="selarr.length == 2 ? 'active' : ''" class="firsty" > 全部 </div> <div class="firsty" :class="selarr.indexOf(item.val) >= 0 ? 'active' : ''" v-for="(item, index) in typeList" :key="item.val" @click="sel(index, item)" > {{ item.name }} </div> </div> </div> --> <Bottom v-if="enterpriseId==-2" @listChange="listChange" ref='Bottom'/> <!-- 设备按钮 --> <div class="typelist-div"> <div class="list" v-for="(item, index) in arr" :key="index" :class="selarr1.indexOf(item.val) >= 0 ? 'active' : ''" @click="sel1(index, item)" > <img :src="item.imgurl" style="margin-top: 2px; float: left; margin-right: 3px" /> {{ item.name }} </div> </div> <!-- 弹框 --> <div id="" style="position: fixed; top: 0; right: 0; width: 100px; height: 100px" > <!-- <markerInfoWindow></markerInfoWindow> --> </div> <!-- 头部 --> <div class="banner-test"> <!-- <dv-decoration-5 style="width:100%;height:100%;" /> --> <img v-if="this.enterpriseId==-2" src="../../assets/bigWindowOld/images/zibk.png" alt="" /> <img v-else src="../../assets/bigWindowOld/images/20230805152711.png" alt="" /> </div> <!-- 左边 --> <div class="leftbar"> <leftBar ref="mychild2"></leftBar> </div> <!-- 右边 --> <div class="rightbar"> <rightBar ref="mychild"></rightBar> </div> <!-- <img src="../../assets/images/leftbk.svg" alt=""> --> <!-- 左上角天气 --> <div class="weather" style=" position: fixed; top: 0; margin-top: 25px; margin-left: 15px; left: 0; z-index: 999; height: 50px; " > <!-- <iframe src="../../static/weather.html" frameborder="0"></iframe> --> <!-- <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=tz&skin=pitaya&color=fff" frameborder="0" width="450" height="30" allowtransparency="true" ></iframe> --> <!-- <iframe scrolling="no" src="https://yiketianqi.com/api.php?style=ty&skin=pitaya" frameborder="0" width="300" height="75" allowtransparency="true"></iframe> --> </div> <!-- 右上角时间 --> <div class="right-time" style=" position: fixed; top: 0; margin-top: 25px; margin-right: 15px; right: 0; z-index: 999; width: 200px; height: 50px; color: #fff; " > <div style="height: 20px; width: 100%; float: right; font-size: 14px"> {{ nowDate }} {{ nowtime }} {{ nowweek }} </div> </div> </div> </template> <script> // @ is an alias to /src import { EditorMap } from "@/utils/mapClassForBigOld/map"; import { mapGetters, mapActions } from "vuex"; import { listDetectorInfo } from "@/api/detector/detectorInfo"; import { detectorUserList,massMarksDetectorUserList,labelsLayerMarksDetectorUserList } from "@/api/detector/detectorUser"; import { pipeData, tiaoyaxiang, famen, changzhan, jiankong, user, alarmtime, } from "@/utils/mapClass/config.js"; import { getPipe, getTyx, getFm, getCz, getVideo, getUser, getEnterprise, userAlarm, getTcqDevice, getYhq, deviceUser } from "@/api/bigWindowOld/getDevice"; import Line from "@/components/bigWindowOld/Line.vue"; import VideoView from "@/components/bigWindowOld/VideoView.vue"; import Device from "@/components/bigWindowOld/Device.vue"; import Cz from "@/components/bigWindowOld/Cz.vue"; import User from "@/components/bigWindowOld/User.vue"; import UserCenter from "@/components/bigWindowOld/UserCenter.vue"; import OtherCenter from "@/components/bigWindowOld/OtherCenter.vue"; import Company from "@/components/bigWindowOld/Company.vue"; import PipeColor from "@/components/bigWindowOld/PipeColor.vue"; import yhqUser from "@/components/bigWindowOld/yhqUser.vue"; import { getUserProfile } from "@/api/system/user"; // import markerInfoWindow from './components/markerInfoWindow.vue' import leftBar from "@/components/bigWindowOld/leftBar.vue"; import rightBar from "@/components/bigWindowOld/rightBar.vue"; import Bottom from "./components/Bottom.vue"; import { mapState } from 'vuex' import MediumPressureLineVue from '../../components/bigWindowOld/MediumPressureLine.vue'; import PipeSelect from '../../components/bigWindowOld/PipeSelect.vue'; export default { name: "Home", components: { leftBar, rightBar, // Center, UserCenter, OtherCenter, PipeColor, PipeSelect, Bottom, }, data() { return { map: null, show: false, // centerData: null, selarr: [1, 2, 3], weather: "", lower: "", higher: "", nowDate: "", nowweek: "", nowtime: "", // 当前日期 typeList: [ { val: 1, name: "中燃翔科", }, { val: 2, name: "中诚然气", }, { val: 3, name: "中燃韵科", }, ], // 2:"调压箱", // 3:"阀门", // 4:"厂站", // 5:"监控", // 6:"用户", arr: [ { val: 2, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/tiaoyaxiang.png"), name: "调压箱", }, { val: 3, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/famen.png"), name: "阀门井", }, { val: 4, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/changzhan.png"), name: "场 站", }, { val: 6, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/user.png"), name: "居民用户", }, { val: 61, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/syUser.svg"), name: "商业用户", }, { val: 5, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/jiankong.png"), name: "监 控", }, { val: 18, ischeck: false, imgurl: require("@/assets/bigWindowOld/firstimage/yhq.svg"), name: "餐饮单位液化气用户", }, ], selarr1: [], // 用户的center数据 detcetorList: [], centerUserId: null, centerTotal: null, userCenterShow: false, centerTitle: "", queryParams2: { enterpriseType: 1, }, // 其他设备的center数据 // 除了这个值,用来显示隐藏,其他值与user共用 otherCenterShow: false, // 报警轮询timer alarmTimer: null, }; }, computed: { ...mapGetters(["company", "systemSetting","enterpriseId"]), companyLength() { return this.typeList.length; }, }, watch: { selarr(newValue) { if (newValue.length == this.companyLength) { // this.$refs.mychild.choice(0); // this.$refs.mychild2.choice(0); } }, }, async mounted() { // console.log(99999999999999) // getPipe().then(res=>{ // console.log("成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功成功",res) // }).catch(res=>{ // console.log(123) // }) // return; const path = eval(this.systemSetting.map_center); this.map = new EditorMap( "map", { center: path, // mapStyle: "amap://styles/4651b4007b4adfcf5015dd154459ab46", mapStyle: "amap://styles/f71d3a3d73e14f5b2bf5508bf1411758", zoom: 12, }, this ); getUserProfile().then(response => { var user = response.data; if(user.deptId ==13){ this.map.setCenter(["117.908541","39.688353"]) } }); console.log("--"); // 这是测试,用本地数据 if (this.systemSetting.prod_test === "test") { this.addPipeLine(pipeData, Line); this.addDevice(tiaoyaxiang, Device); this.addDevice(famen, Device); this.addDevice(changzhan, Cz); this.addDevice(user, User); this.addDevice(jiankong, VideoView); } else { // 调用状态管理器方法获取公司信息每次都要调取,因为每次进来都是更新的 this.GetCompany(); // 过滤出来id 6跟12 的不要 this.typeList = this.company .filter((item) => item.conpanyId != 6 && item.conpanyId != 12) .map((item) => ({ val: item.conpanyId, name: item.companyName, })); this.selarr = this.company .filter((item) => item.conpanyId != 6 && item.conpanyId != 12) .map((item) => item.conpanyId); // this.selarr1 = this.arr.map((item) => item.val); this.arr.forEach((item) => (item.ischeck = true)); // getPipe() getTyx() getFm() getCz() getVideo() getUser() await this.goMap(getEnterprise, this.addDevice, Company, true); // this.goMap(getPipe, this.addPipeLine, Line, true); //管道 this.goMediumPressureLineMap(getPipe, this.addMediumPipeLine, Line,MediumPressureLineVue, true); //调压箱 this.labelsLayerMarksTysGoMap(getTyx, Device, false); //阀门井 this.labelsLayerMarksFmjGoMap(getFm, Device, false); //场站 this.labelsLayerMarksCzGoMap(getCz,Cz, false); //监控 this.labelsLayerMarksVideoGoMap(getVideo,VideoView, false); //this.goMap(getYhq, this.addDevice2, yhqUser, false); //液化气用户上图 if (this.enterpriseId==-2){ this.labelsLayerMarksDeviceUserGoMap(deviceUser, yhqUser, false); //用户上图 } // 用户要等一下 因为有报警数据 this.labelsLayerMarksDetectorUserGoMap(labelsLayerMarksDetectorUserList,User, false).then((res) => { // 先查一下,然后开启定时器 this.userAlarm(); this.alarmTimer = setInterval(() => { this.userAlarm(); // console.log("查询报警"); }, alarmtime); }); } this.currentTime(); this.$refs.mychild.choice(this.selarr); this.$refs.mychild2.choice(this.selarr); // alert(this.enterpriseId); // console.log(this.enterpriseId) }, methods: { ...mapActions({ GetCompany: "bigWindowCompany/GetCompany", }), windowClick(){ this.$refs.Bottom.selectUpClear(); }, // 点击了 大屏端 管道搜索的清除键 clearBigWindowsSelectPipe(){ this.map.infowindowClose(); }, getPipeSelectMessage(data,id) { let arrArea = data.split(','); this.map.setCenter([arrArea[0],arrArea[1]]) this.map.filterSelectPipe(id,MediumPressureLineVue,arrArea[0],arrArea[1]); }, // 管道上图 addPipeLine(data, component) { for (let comp in data) { data[comp].forEach((pipe) => { this.map.addPipeLine(pipe, component); }); } }, // 管道上图 addMediumPipeLine(data, component,mediumComponent) { for (let comp in data) { data[comp].forEach((pipe) => { this.map.addMediumPipeLine(pipe, component,mediumComponent); }); } }, // 设备上图 addDevice(data, component, show) { for (let comp in data) { data[comp].forEach((pipe) => { this.map.addDevice(pipe, component, show); }); } }, addDevice2(data, component, show) { // console.log("data33333333333333333",data); for (let comp in data) { data[comp].forEach((pipe) => { pipe.iconType = 18; this.map.addDevice(pipe, component, show); }); } }, addDevice3(data, component, show) { for (let comp in data) { data[comp].forEach((pipe) => { if (pipe.userType == 1) { pipe.iconType = 6; } else if (pipe.userType == 2) { pipe.iconType = 61; } this.map.addDevice(pipe, component, show); }); } }, goMediumPressureLineMap(httpFunc, addFunc, component,mediumComponent, show){ return httpFunc().then((res) => { // 给用户加icontype if (res.data && !res.data[0].iconType) { res.data.forEach((item) => { item.iconType = 6; }); } // 根据数据格式不同,赋值不同,如果是个数组,就用res,如果不是就用res.data let config = {}; if (Array.isArray(res)) { config = { data: res }; // 给视频设备的conpanyType变成null,因为视频不受企业控制 if (res[0].iconType == 5) { res.forEach((item) => { item.companyType = null; }); } } else { config = { data: res.data || res.rows }; } addFunc(config, component, mediumComponent,show); return config.iconType; }); }, labelsLayerMarksDeviceUserGoMap(httpFunc,component,show){ return httpFunc().then((res) => { const mapData = res.data; this.map.labelsLayerMarksDeviceUserGoMap(mapData, component, show); }) } , labelsLayerMarksVideoGoMap(httpFunc,component,show){ return httpFunc().then((res) => { const mapData = res.data; this.map.labelsLayerMarksVideoGoMap(mapData, component, show); }) } , labelsLayerMarksCzGoMap(httpFunc,component,show){ return httpFunc().then((res) => { const mapData = res.data; this.map.labelsLayerMarksCzGoMap(mapData, component, show); }) } , labelsLayerMarksFmjGoMap(httpFunc,component,show){ return httpFunc().then((res) => { const mapData = res.data; this.map.labelsLayerMarksFmjGoMap(mapData, component, show); }) } , labelsLayerMarksTysGoMap(httpFunc,component,show){ return httpFunc().then((res) => { const mapData = res.data; this.map.labelsLayerMarksTysGoMap(mapData, component, show); }) } , labelsLayerMarksDetectorUserGoMap(httpFunc, component, show) { return httpFunc().then((res) => { const mapData = res.data; this.map.labelsLayerMarksDetectorUserList(mapData, component, show); }); }, goMap(httpFunc, addFunc, component, show) { return httpFunc().then((res) => { // 根据数据格式不同,赋值不同,如果是个数组,就用res,如果不是就用res.data let config = {}; if (Array.isArray(res)) { config = { data: res }; // 给视频设备的conpanyType变成null,因为视频不受企业控制 if (res[0].iconType == 5) { res.forEach((item) => { item.companyType = null; }); } } else { config = { data: res.data || res.rows }; } addFunc(config, component, show); return config.iconType; }); }, userAlarm() { userAlarm().then((res) => { console.log("报警", res.data); if (res.data.length > 0) { // 报警 res.data.forEach((item) => { this.map.deviceAlarm(item); }); // 看看谁告消警 } this.map.relieveAlarm(res.data); }); }, myCenterShow(boolean) { this.show = boolean; }, // centerDataFunc(centerData) { // this.centerData = centerData; // console.log(centerData); // this.show = true; // }, // 更改下方列表 listChange(arr) { console.log(arr) // return; this.selarr=[...arr] this.map.allfilter(this.selarr, this.selarr1); this.map.infowindowClose(); this.show = false; this.$refs.mychild2.choice(this.selarr); this.$refs.mychild.choice(this.selarr); }, // 睇下列表更改 allCompany() { if (this.selarr.length == 2) { this.selarr = []; } else { this.selarr = this.company .filter((item) => item.conpanyId != 6 && item.conpanyId != 12) .map((item) => item.conpanyId); } // this.map.companyFilter(this.selarr); this.map.allfilter(this.selarr, this.selarr1); this.map.infowindowClose(); this.show = false; this.$refs.mychild2.choice(this.selarr); this.$refs.mychild.choice(this.selarr); }, sel(index, item) { this.map.infowindowClose(); this.show = false; const ind = this.selarr.indexOf(item.val); if (ind >= 0) { this.selarr.splice(ind, 1); if (item.val == 3) { // this.$refs.mychild.choice(1); // this.$refs.mychild2.choice(1); } else { // this.$refs.mychild.choice(item.val + 1); // this.$refs.mychild2.choice(item.val + 1); } } else { this.selarr.push(item.val); // this.$refs.mychild.choice(item.val); // this.$refs.mychild2.choice(item.val); } // this.map.companyFilter(this.selarr); this.map.allfilter(this.selarr, this.selarr1); this.$refs.mychild2.choice(this.selarr); this.$refs.mychild.choice(this.selarr); }, sel1(index, item) { const ind = this.selarr1.indexOf(item.val); if (ind >= 0) { this.selarr1.splice(ind, 1); } else { this.selarr1.push(item.val); } this.map.allfilter(this.selarr, this.selarr1); }, //用户的设备center getDetectorInfoList(httpFunc, queryParams, title) { console.log(queryParams); return httpFunc(queryParams).then((res) => { if (res.code == 200) { this.detcetorList = res.rows; this.centerUserId = queryParams.userId; // 总数据 this.centerTotal = res.total; // this.$refs.userCenter.fade = "fade"; this.otherCenterShow = false; this.userCenterShow = true; this.centerTitle = title; // 传递回去 return res.code; } }); }, // 调压箱,阀门,场站睇下的设备 getTcqDevice(queryParams, title) { console.log(queryParams); return getTcqDevice(queryParams).then((res) => { this.detcetorList = res; this.centerUserId = queryParams.devId; // 总数据 this.centerTotal = res.length; // this.$refs.userCenter.fade = "fade"; this.userCenterShow = false; this.otherCenterShow = true; this.centerTitle = title; // 传递回去 return res.code; }); }, currentTime() { setInterval(() => { this.formatDate(); }, 1000); }, formatDate() { let date = new Date(); let year = date.getFullYear(); // 年 let month = date.getMonth() + 1; // 月 let day = date.getDate(); // 日 let week = date.getDay(); // 星期 let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ]; let hour = date.getHours(); // 时 hour = hour < 10 ? "0" + hour : hour; // 如果只有一位,则前面补零 let minute = date.getMinutes(); // 分 minute = minute < 10 ? "0" + minute : minute; // 如果只有一位,则前面补零 let second = date.getSeconds(); // 秒 second = second < 10 ? "0" + second : second; // 如果只有一位,则前面补零 this.nowtime = `${hour}:${minute}:${second}`; this.nowweek = `${weekArr[week]}`; this.nowDate = `${year}年${month}月${day}`; }, }, // 销毁定时器 beforeDestroy() { if (this.formatDate) { clearInterval(this.formatDate); // 在Vue实例销毁前,清除时间定时器 } // 报警 if (this.alarmTimer) { clearInterval(this.alarmTimer); } }, }; </script> <style lang="scss" scoped> .home { position: relative; height: 100vh; } .goSystem { position: fixed; z-index: 9999; top: 50px; right: 20px; font-size: 14px; color: #3cc4ff; cursor: pointer; padding: 3px 10px; border: 1px solid rgb(57, 68, 124); background: #12268e33; /* &:hover { color: #00ffff; } */ } #map { position: absolute; top: 0px; bottom: 0; width: 100%; } .banner-test { width: 100%; height: 85px; position: relative; top: -10px; z-index: 998; text-align: center; background: url("../../assets/bigWindowOld/firstimage/topbk.svg"); background-size: 100% 100%; background-repeat: no-repeat; backdrop-filter: blur(4px); } .banner-test img { width: 450px; margin-top: 25px; } .leftbar { width: 565px; height: 93%; position: fixed; top: 70px; z-index: 999; background: url("../../assets/bigWindowOld/firstimage/le.png"); background-size: 105% 100%; background-repeat: no-repeat; margin-left: -20px; pointer-events: none; } .rightbar { width: 585px; height: 93%; position: fixed; top: 70px; z-index: 999; right: 0; background: url("../../assets/bigWindowOld/firstimage/ri.png"); background-size: 100% 100%; background-repeat: no-repeat; margin-right: -20px; pointer-events: none; } .home-div { width: 40%; height: 70px; position: fixed; bottom: 0; margin-left: 30%; // z-index: 1000; img { width: 100%; height: 100%; position: absolute; z-index: -1; bottom: -10px; } } .listingsSty { /* height: 25px; */ // position: fixed; margin-left: 25%; width: 50%; display: flex; justify-content: space-between; padding-top: 25px; // font-family: 'arialbd'; } .firsty { // width: 15%; min-width: 80px; height: 35px; text-align: center; line-height: 35px; color: #fff; font-size: 16px; // float: left; // margin-left: 8%; cursor: pointer; // font-family: 'arialbd'; -webkit-transition: all 1.5s ease; transition: all 1.5s ease; } .active { color: #00ffff; /* background: url(../../assets/mapinages/background.png); */ background-repeat: no-repeat; background-size: 100% 100%; text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff; } .weather-icon { float: left; width: 30px !important; height: 30px !important; margin-top: 10px !important; margin-left: 10px !important; padding-right: 5px; } .tttt { background-image: -webkit-linear-gradient( bottom, rgb(134, 185, 233), #ffffff ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .typelist-div { width: 755px; height: 50px; z-index: 9999; position: fixed; top: 0; margin-top: 90px; margin-left: calc((100% - 755px) / 2); } .list { z-index: 9999; float: left; margin-left: 15px; color: #fff; line-height: auto; text-align: center; /* background: linear-gradient(86deg, #112238 0%, #086187 62%, #112238 100%); box-shadow: inset 0px 1px 2px 1px #125c9b; */ font-size: 12px; padding: 1px 10px; cursor: pointer; line-height: 26px; border: 1px solid rgb(57, 68, 124); background: #12268e33; border-radius: 3px; } .list.active { /* background: linear-gradient(86deg, #112238 0%, #32a3d3 62%, #112238 100%); box-shadow: inset 0px 1px 2px 1px #125c9b; */ font-size: 12px; color: #00ffff; border: 1px solid #0f6ca1; box-shadow: inset 0px 0px 10px 1px #0f6ca1; background-size: 100% 100%; background-repeat: no-repeat; } .list img { width: 20px; } </style>