{"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 `
\r\n
\r\n 机组名称: ${crew.fanName}\r\n
\r\n
\r\n ${this.crewWorkMode.name}\r\n
\r\n
\r\n ${this.crewInfoArr.map((item) => {\r\n return `\r\n
\r\n ${item.label}:\r\n \r\n ${item.value ? item.value : ''} \r\n \r\n ${item.unit ? item.unit : ''}\r\n
`\r\n })\r\n .join('')}\r\n
\r\n
\r\n 详情\r\n \r\n
\r\n
`)\r\n // .openOn(this.map)\r\n this.popups.push(popup)\r\n\r\n let markerKey = 'markers_' + crew.fanCode\r\n markerKey = L.marker(crew.position, {\r\n icon: Icon,\r\n title: crew.fanName,\r\n //title: crew.fanCode,\r\n })\r\n .addTo(this.map)\r\n .bindPopup(popup)\r\n .on('popupopen', (e) => {\r\n this.handleShowCrewInfo(e)\r\n })\r\n this.markers.push(markerKey)\r\n })\r\n\r\n let length = this.crewPoints.length - 1\r\n let polygon = L.rectangle(\r\n [this.crewPoints[0].position, this.crewPoints[length].position],\r\n { color: 'rgba(0,0,0,0)', weight: 0 }\r\n ).addTo(this.map)\r\n //定位合适位置\r\n this.map.flyToBounds(polygon.getBounds())\r\n\r\n //this.crewState = {}\r\n // this.markerList = []\r\n\r\n // let markerContent1 = `
\r\n // \r\n //
`\r\n // let markerContent2 = `
\r\n // \r\n //
`\r\n\r\n // this.crewPoints.forEach(crew => {\r\n // // var infoWindowContent = `机组编号:${crew[2]};经度:${crew[0]};纬度:${crew[1]}`\r\n // let marker = new AMap.Marker({\r\n // // icon: require('../../assets/img/crew.gif'),\r\n // position: crew.position,\r\n // // 将 html 传给 content\r\n // content: crew.state ? markerContent1 : markerContent2,\r\n // map: this.map,\r\n // title: crew.fanCode\r\n // })\r\n // this.crewState[crew.fanCode] = crew.state\r\n // marker.crew = crew\r\n // marker.on('click', this.handleShowCrewInfo)\r\n // marker.emit('click', {target: marker})\r\n\r\n // this.crewPoints.marker = marker\r\n\r\n // this.markerList.push(marker)\r\n // })\r\n // function handleShowCrewInfo(e) {\r\n // console.log(e.target)\r\n // }\r\n // // this.map.remove(this.markerList)\r\n // this.map.add(this.markerList)\r\n // this.map.setFitView()\r\n },\r\n //实时更新弹出层\r\n realTimeUpdate() {\r\n let popup = `\r\n
\r\n
\r\n 机组编码: ${this.fanState[this.crewNumber].fanName}\r\n
\r\n
${this.crewWorkMode.name}
\r\n
\r\n ${this.crewInfoArr\r\n .map((item) => {\r\n return `\r\n
\r\n ${item.label}:\r\n \r\n ${item.value ? item.value : ''} \r\n \r\n ${item.unit ? item.unit : ''}\r\n
`\r\n })\r\n .join('')}\r\n
\r\n
\r\n 详情\r\n \r\n
\r\n
\r\n `\r\n this.popups.forEach((item) => {\r\n let fanName = item._source.options.title\r\n if (this.fanState[this.crewNumber].fanName === fanName) {\r\n item.setContent(popup).update()\r\n }\r\n })\r\n //重新渲染之后需要重新绑定事件\r\n this.getDomDetile()\r\n },\r\n //获取详情按钮并绑定事件\r\n getDomDetile() {\r\n this.$nextTick(() => {\r\n let btnDetile = document.getElementById('detile')\r\n if (btnDetile) {\r\n btnDetile.onclick = () => {\r\n this.handleDetail(this.crewNumber)\r\n }\r\n }\r\n })\r\n },\r\n handleShowCrewInfo(e) {\r\n let fanName = e.target.options.title\r\n let i = this.crewPoints.findIndex(item => {\r\n return item.fanName == fanName\r\n })\r\n this.crewNumber = this.crewPoints[i].fanCode\r\n //详情跳转\r\n this.getDomDetile()\r\n // this.crewNumber = e.target.crew.fanCode\r\n // if (!this.crewInfoShow) {\r\n // this.crewInfoShow = true\r\n // }\r\n // let dom = document.querySelector('#crewCard')\r\n // console.log(dom, 'dom')\r\n // if (dom) {\r\n // let top = e.containerPoint.y + 'px'\r\n // let left = e.containerPoint.x + 'px'\r\n // dom.style.setProperty('top', top, 'important')\r\n // dom.style.setProperty('left', left, 'important')\r\n // }\r\n },\r\n setFitView() {\r\n this.map.setFitView()\r\n },\r\n handleDetail(crewNumber) {\r\n // this.$bus.$emit('changeTab', {\r\n // from: 'MapModel',\r\n // to: 'CrewOverview',\r\n // id: crewNumber\r\n // })\r\n this.$router.push({\r\n path: `/frontPlat/CrewOverview/${crewNumber}`,\r\n })\r\n },\r\n initWorkMode() {\r\n let params = {\r\n querys: [\r\n {\r\n group: 'main',\r\n operation: 'EQUAL',\r\n parentGroup: '',\r\n property: 'type',\r\n relation: 'AND',\r\n value: 'workMode',\r\n },\r\n ],\r\n }\r\n this.$http\r\n .post('${cssc}/biz/scada/scadaFault/v1/query', params)\r\n .then(\r\n (resp) => {\r\n if (resp.data) {\r\n this.workModeSrc = resp.data.rows\r\n }\r\n },\r\n (error) => {\r\n reject(error)\r\n }\r\n )\r\n },\r\n bindWorkMode(wordModeVal) {\r\n let name = \"\"\r\n if (wordModeVal) {\r\n this.workModeSrc.forEach(mode => {\r\n if (mode.code == wordModeVal) {\r\n name = mode.name\r\n }\r\n })\r\n }\r\n return name\r\n },\r\n },\r\n}\r\n",null]}