{"remainingRequest":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\cssc-fvue\\src\\views\\WindFarmOverview\\MapModel.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\cssc-fvue\\src\\views\\WindFarmOverview\\MapModel.vue","mtime":1681441192488},{"path":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\cssc-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\r\n// leaflet实现离线地图\r\nimport 'leaflet/dist/leaflet.css'\r\n// 引入Leaflet对象 挂载到Vue上,便于全局使用,也可以单独页面中单独引用\r\nimport L from 'leaflet'\r\nexport default {\r\n name: 'map-model',\r\n data() {\r\n return {\r\n map: null,\r\n markers: [], //标点集合\r\n fanState: {}, //监听风机状态变化状态\r\n popups: [],\r\n overView: {\r\n setsNo: {\r\n icon: 'icon-fengdianchang',\r\n colorType: 'primary',\r\n label: '装机台数',\r\n value: null,\r\n },\r\n capacity: {\r\n icon: 'icon-rongliangguanli',\r\n colorType: 'primary',\r\n label: '装机容量(MW)',\r\n value: null,\r\n },\r\n emsFactoryWinspdAvg: {\r\n icon: 'icon-fengsu1',\r\n colorType: 'primary',\r\n label: '全场平均风速(m/s)',\r\n value: null,\r\n },\r\n factoryPowAct: {\r\n icon: 'icon-yougonggongshuai',\r\n colorType: 'primary',\r\n label: '全场总有功功率(MW)',\r\n value: null,\r\n },\r\n factoryDayEnergy: {\r\n icon: 'icon-rifadianliang',\r\n colorType: 'primary',\r\n label: '全场当日发电量(MWh)',\r\n value: null,\r\n },\r\n normal: {\r\n icon: 'icon-fengdianta',\r\n colorType: 'success',\r\n label: '正常发电台数',\r\n value: null,\r\n },\r\n emsFaultCount: {\r\n icon: 'icon-fengdianta',\r\n colorType: 'danger',\r\n label: '故障台数',\r\n value: null,\r\n },\r\n emsComerrCount: {\r\n icon: 'icon-fengdianta',\r\n colorType: 'info',\r\n label: '通讯中断台数',\r\n value: null,\r\n },\r\n },\r\n crewInfoShow: false,\r\n crewNumber: '',\r\n crewInfo: {\r\n // workModeSrc: {\r\n // label: '工作状态',\r\n // value: null,\r\n // unit: null,\r\n // },\r\n winSpd: {\r\n label: '瞬时风速',\r\n value: null,\r\n unit: 'm/s',\r\n },\r\n var_363: {\r\n label: '风向',\r\n value: null,\r\n unit: '°',\r\n },\r\n powAct: {\r\n label: '有功功率',\r\n value: null,\r\n unit: 'kW',\r\n },\r\n genSpeed: {\r\n label: '发电机转速',\r\n value: null,\r\n unit: 'rpm',\r\n },\r\n dayEnergy: {\r\n label: '今日发电量',\r\n value: null,\r\n unit: 'kWh',\r\n },\r\n evnTemp: {\r\n label: '环境温度',\r\n value: null,\r\n unit: '℃',\r\n },\r\n },\r\n crewInfoArr: [\r\n // {\r\n // label: '工作状态',\r\n // value: null,\r\n // unit: null,\r\n // },\r\n {\r\n label: '瞬时风速',\r\n value: null,\r\n unit: 'm/s',\r\n },\r\n {\r\n label: '风向',\r\n value: null,\r\n unit: '°',\r\n },\r\n {\r\n label: '有功功率',\r\n value: null,\r\n unit: 'kW',\r\n },\r\n {\r\n label: '发电机转速',\r\n value: null,\r\n unit: 'rpm',\r\n },\r\n {\r\n label: '今日发电量',\r\n value: null,\r\n unit: 'kWh',\r\n },\r\n {\r\n label: '环境温度',\r\n value: null,\r\n unit: '℃',\r\n },\r\n ],\r\n crewPoints: [],\r\n markerList: [],\r\n crewState: {},\r\n icon: require('../../assets/img/loading.gif'),\r\n accecptData: false,\r\n layerUrl: window.context.layer, // 地图瓦片根路径\r\n workModeSrc: [], //机组工作状态\r\n crewWorkMode: { // 当前选中风机工作状态\r\n value: '',\r\n name: ''\r\n }\r\n }\r\n },\r\n created() {\r\n //测试用的\r\n // setTimeout(() => {\r\n // this.diffState()\r\n // }, 5000)\r\n },\r\n mounted() {\r\n this.initWorkMode()\r\n this.initWindFactory()\r\n this.accecptData = true\r\n this.initCrewPoints()\r\n this.$bus.$on('SCADAMsg', (data) => {\r\n if (this.accecptData) {\r\n this.changeData(data)\r\n }\r\n })\r\n },\r\n beforeDestroy() {\r\n // 切换页面 不再接收数据\r\n this.accecptData = false\r\n },\r\n methods: {\r\n initWindFactory() {\r\n this.$http.post('${cssc}/biz/base/windFactory/v1/getOne').then(\r\n (resp) => {\r\n if (resp.data) {\r\n // console.log(resp.data, 'dd')\r\n this.overView.capacity.value = resp.data.capacity\r\n this.overView.setsNo.value = resp.data.setsNo\r\n }\r\n },\r\n (error) => {\r\n reject(error)\r\n }\r\n )\r\n },\r\n changeData(data) {\r\n // console.log(data, 'data')\r\n // ------------头部总览\r\n // 正常发电台数\r\n let normal = 0\r\n for (let crew in data.fan) {\r\n if (\r\n data.fan[crew].workModeSrc &&\r\n data.fan[crew].workModeSrc.val === 32\r\n ) {\r\n normal++\r\n }\r\n\r\n // 风机状态监听\r\n // 空字符是加初始数据\r\n // if (!this.fanState) {\r\n // this.fanState[crew] !== data.fan[crew].workModeSrc.val\r\n // }\r\n\r\n\r\n // console.log(crew, this.fanState[crew], \"crew, this.fanState[crew]\")\r\n //diff数据是否变化\r\n if (\r\n data.fan[crew].workModeSrc &&\r\n this.fanState[crew].crewStatus !=\r\n data.fan[crew].workModeSrc.val\r\n ) {\r\n // console.log(\r\n // this.fanState[crew].crewStatus,\r\n // data.fan[crew].workModeSrc.val\r\n // )\r\n\r\n // 变化了 存入changeFaultData\r\n this.fanState[crew].crewStatus =\r\n data.fan[crew].workModeSrc.val\r\n //参数:风机编号, 风机状态\r\n this.diffState(crew, this.fanState[crew])\r\n }\r\n }\r\n\r\n // console.log(normal)\r\n // console.log(this.overView, 'overView')\r\n this.overView.normal.value = normal\r\n // 平均风速\r\n this.overView.emsFactoryWinspdAvg.value = data.wind\r\n .emsFactoryWinspdAvg\r\n ? data.wind.emsFactoryWinspdAvg.val\r\n : null\r\n // 全场总有功功率\r\n this.overView.factoryPowAct.value = data.wind.factoryPowAct\r\n ? data.wind.factoryPowAct.val\r\n : null\r\n // 全场当日发电量\r\n this.overView.factoryDayEnergy.value = data.wind.factoryDayEnergy\r\n ? data.wind.factoryDayEnergy.val\r\n : null\r\n // 故障台数\r\n this.overView.emsFaultCount.value = data.wind.emsFaultCount\r\n ? data.wind.emsFaultCount.val\r\n : null\r\n // 故障台数\r\n this.overView.emsComerrCount.value = data.wind.emsComerrCount\r\n ? data.wind.emsComerrCount.val\r\n : null\r\n\r\n //-------------机组信息\r\n\r\n // console.log(this.crewInfo, 'this.crewInfo')\r\n // console.log(this.crewNumber, 'cred')\r\n if (this.crewNumber && data.fan[this.crewNumber]) {\r\n this.crewWorkMode.name = this.bindWorkMode(data.fan[this.crewNumber].workModeSrc.val)\r\n this.crewWorkMode.value = data.fan[this.crewNumber].workModeSrc.val\r\n //瞬时风速\r\n // this.crewInfo.winSpd.value = data.fan[this.crewNumber].winSpd.val\r\n this.crewInfoArr[0].value = data.fan[this.crewNumber].winSpd.val\r\n // 瞬时风向\r\n // this.crewInfo.var_363.value = data.fan[this.crewNumber].var_363.val\r\n this.crewInfoArr[1].value =\r\n data.fan[this.crewNumber].var_363.val\r\n // 有功功率\r\n // this.crewInfo.powAct.value = data.fan[this.crewNumber].powAct.val\r\n this.crewInfoArr[2].value = data.fan[this.crewNumber].powAct.val\r\n // 发电机转速\r\n // this.crewInfo.genSpeed.value = data.fan[this.crewNumber].genSpeed.val\r\n this.crewInfoArr[3].value =\r\n data.fan[this.crewNumber].genSpeed.val\r\n // 今日发电量\r\n // this.crewInfo.dayEnergy.value = data.fan[this.crewNumber].dayEnergy.val\r\n this.crewInfoArr[4].value =\r\n data.fan[this.crewNumber].dayEnergy.val\r\n // 环境温度\r\n // this.crewInfo.evnTemp.value = data.fan[this.crewNumber].evnTemp.val\r\n this.crewInfoArr[5].value =\r\n data.fan[this.crewNumber].evnTemp.val\r\n\r\n //实时更新状态\r\n this.realTimeUpdate()\r\n }\r\n\r\n // diff状态 改变图片\r\n // this.formatPointData()\r\n },\r\n diffState(code, fanState) {\r\n //fancode风机编码, state风机状态\r\n let fanCode = code //变化的风机编号\r\n let fanName = fanState.fanName //变化的风机名称\r\n let state = fanState.crewStatus //变化风机的状态\r\n let option\r\n if (this.map.getZoom() < 9) {\r\n option = {\r\n iconUrl: this.bindImg(state),\r\n iconSize: [25, 30],\r\n iconAnchor: [12.5, 30],\r\n }\r\n if (fanState.isFlagShip) {\r\n option.shadowUrl = require('@/assets/img/flagShadow.png')\r\n option.shadowSize = [15, 5]\r\n option.shadowAnchor = [7.5, 3]\r\n }\r\n\r\n } else {\r\n option = {\r\n iconUrl: this.bindImg(state),\r\n iconSize: [50, 60],\r\n iconAnchor: [25, 60],\r\n }\r\n if (fanState.isFlagShip) {\r\n option.shadowUrl = require('@/assets/img/flagShadow.png')\r\n option.shadowSize = [30, 10]\r\n option.shadowAnchor = [15, 6]\r\n }\r\n }\r\n let icon = new L.Icon(option)\r\n\r\n //实时更新状态\r\n this.markers.forEach((item) => {\r\n if (item.options.title === fanName) {\r\n item.setIcon(icon).update()\r\n }\r\n })\r\n },\r\n initCrewPoints() {\r\n let query = {\r\n sorter: [{ direction: 'ASC', property: 'fanCode' }],\r\n }\r\n this.$http.post('${cssc}/biz/base/fanInfo/v1/list', query).then(\r\n (resp) => {\r\n this.crewPoints = []\r\n let response = resp.data\r\n response.forEach((el) => {\r\n let arr = {\r\n fanCode: el.fanCode,\r\n fanName: el.fanName,\r\n position: [\r\n parseFloat(el.longitude),\r\n parseFloat(el.latitude),\r\n ],\r\n state: 0,\r\n isFlagShip: el.isFlagship,\r\n }\r\n this.crewPoints.push(arr)\r\n this.fanState[el.fanCode] = {\r\n crewStatus: 0,\r\n fanName: el.fanName,\r\n isFlagShip: el.isFlagship,\r\n }\r\n })\r\n // console.log(this.fanState, 'this.fanState')\r\n this.initMap()\r\n },\r\n (error) => {\r\n reject(error)\r\n }\r\n )\r\n },\r\n initMap() {\r\n // let base = window.context.front\r\n // this.map = new AMap.Map('container', {\r\n // center: [106.972, 28.7757],\r\n // layers: [\r\n // // 卫星\r\n // new AMap.TileLayer.Satellite(),\r\n // // 路网\r\n // new AMap.TileLayer.RoadNet({opacity: 0.5}),\r\n // ],\r\n // zoom: 10,\r\n // })\r\n // this.initPointData()\r\n // this.map.setFitView()\r\n this.map = L.map('container', {\r\n zoominfoControl: true,\r\n zoomControl: false,\r\n zoomsliderControl: false,\r\n zoom: 5,\r\n center: [\r\n this.crewPoints[0].position[1],\r\n this.crewPoints[0].position[0],\r\n ],\r\n attributionControl: true,\r\n })\r\n // http://119.3.200.177:8090\r\n L.tileLayer(`${this.layerUrl}/{z}/{x}/{y}.png`, {\r\n maxZoom: 14,\r\n minZoom: 4,\r\n attribution: '',\r\n }).addTo(this.map)\r\n\r\n this.initPointData()\r\n\r\n this.map.on(\"zoomend\", () => {\r\n if (this.map.getZoom() < 9) {\r\n this.markers.forEach((item) => {\r\n let options = item.options.icon.options\r\n options.iconSize = [25, 30]\r\n options.iconAnchor = [12.5, 30]\r\n options.shadowSize = [15, 5]\r\n options.shadowAnchor = [7.5, 3]\r\n let icon = new L.Icon(options)\r\n item.setIcon(icon).update()\r\n })\r\n } else {\r\n this.markers.forEach((item) => {\r\n let options = item.options.icon.options\r\n options.iconSize = [50, 60]\r\n options.iconAnchor = [25, 60]\r\n options.shadowSize = [30, 10]\r\n options.shadowAnchor = [15, 6]\r\n let icon = new L.Icon(options)\r\n item.setIcon(icon).update()\r\n })\r\n }\r\n })\r\n\r\n\r\n },\r\n bindImg(state) {\r\n if (state) {\r\n if (state == 8) {\r\n return require('@/assets/img/crew-white.png')\r\n } else if (state == 1) {\r\n return require('@/assets/img/crew-white.png')\r\n } else if (state == 2) {\r\n return require('@/assets/img/crew-red.png')\r\n } else if (state == 4) {\r\n return require('@/assets/img/crew-blue2.png')\r\n } else if (state == 16) {\r\n return require('@/assets/img/crew-blue.gif')\r\n } else if (state == 32) {\r\n return require('@/assets/img/crew-green.gif')\r\n } else if (state == 64) {\r\n return require('@/assets/img/crew-orange.png')\r\n }\r\n } else {\r\n return require('@/assets/img/crew-gray.png')\r\n }\r\n },\r\n initPointData() {\r\n //设置ICON相关配置\r\n let base = 'http://cqhuan.top:8081/fvue'\r\n this.crewPoints.forEach((crew) => {\r\n crew.position = [crew.position[1], crew.position[0]]\r\n let option = {\r\n iconUrl: this.bindImg(crew.state),\r\n iconSize: [25, 30],\r\n iconAnchor: [12.5, 30],\r\n }\r\n if (crew.isFlagShip) {\r\n option.shadowUrl = require('@/assets/img/flagShadow.png')\r\n option.shadowSize = [15, 5]\r\n option.shadowAnchor = [7.5, 3]\r\n }\r\n\r\n let Icon = new L.Icon(option)\r\n // console.log(crew.position)\r\n let popup = L.popup()\r\n .setLatLng(crew.position)\r\n .setContent(\r\n // 机组编码: ${crew.fanCode}\r\n `