大屏对接2.0项目

whyczyk

2022-06-09 11be4fa888dcbb55bbf43b6caf1f4a4abd16a208

 src/components/charts/chinaMap.vue

@@ -1,10 +1,12 @@
<template>
   <new-china-map v-if="newPlatform==1"></new-china-map>
   <div class="echarts-wrapper" @dblclick="dblclick" v-else>
      <div class="echarts-content" ref="chart" id="cityChart">

      </div>
      <div class="infoPanel" v-show="isShowInfoPanel" :style="{ left: mapInfoX + 'px', top: mapInfoY + 'px' }">
    <div class="echarts-content" ref="chart" id="cityChart"></div>
    <div
      class="infoPanel"
      v-show="isShowInfoPanel"
      :style="{ left: mapInfoX + 'px', top: mapInfoY + 'px' }"
    >
         <h4 class="infoPanel-Title">
            {{ mapInfoTitle }}
            <div class="closeBtn" @click.self="isShowInfoPanel=false"></div>
@@ -17,7 +19,7 @@
</template>

<script>
import * as echarts from 'echarts';
import * as echarts from "echarts";
import {
   searchMap,
   searchMapHomeState,
@@ -26,25 +28,25 @@
   searchHomeNum,
} from "../../assets/js/api";

import HomeNormal from '@/assets/images/home.png'
import HomeNormal from "@/assets/images/home.png";
let mapHomeImage = new Image();
mapHomeImage.src = HomeNormal;
// 正常的图标
import HomeNormalImage from '@/assets/images/home-normal.png';
import HomeNormalImage from "@/assets/images/home-normal.png";
let homeNormalImage = new Image();
homeNormalImage.src = HomeNormalImage;
// 充电的图标
import HomeChargeImage from '@/assets/images/home-charge.png';
import HomeChargeImage from "@/assets/images/home-charge.png";
let homeChargeImage = new Image();
homeChargeImage.src = HomeChargeImage;
// 告警图标
import HomeWarnImage from '@/assets/images/home-warn.png';
import HomeWarnImage from "@/assets/images/home-warn.png";
let homeWarnImage = new Image();
homeWarnImage.src = HomeWarnImage;
// 放电图标
import HomeDischargeImage from '@/assets/images/home-discharge.png';
import InfoPanel from '../indexPanel/InfoPanel.vue';
import newChinaMap from './newChinaMap.vue';
import HomeDischargeImage from "@/assets/images/home-discharge.png";
import InfoPanel from "../indexPanel/newInfoPanel.vue";
import newChinaMap from "./newChinaMap.vue";
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
let chartData = []; //chart数据
@@ -63,28 +65,28 @@
         parentsStyle: {},
         isAllScreen: false,
         timers: null,
         mapName: 'zhongguo',
      mapName: "zhongguo",
         mapInfoX: null,
         mapInfoY: null,
         mapInfoTitle: "",
         isShowInfoPanel: false,
         panelInfo: {
            num: 369,
            StationId: "42070471",
            StationName: "贵州省-贵阳市-观山湖区-观山湖区护理学院-设备1",
            StationName3: "观山湖区护理学院",
        stationId: "42070471",
        stationName: "贵州省-贵阳市-观山湖区-观山湖区护理学院-设备1",
        stationName3: "观山湖区护理学院",
            Address: "湖北省武汉市武昌区",
            longitude: 114.37285909,
            latitude: 30.56442241,
            information: "",
            FBSDeviceId: 910000111,
        fbsdeviceId: 910000111,
            nums: {
               code: 0,
               sum: 0,
               newsum: 0
            }
          newsum: 0,
         },
      }
      },
    };
   },
   methods: {
      findParents(node, select) {
@@ -96,14 +98,14 @@
         }
      },
      dblclick(e) {
         this.isAllScreen = !this.isAllScreen
         let parents = this.findParents(e.currentTarget, 'vdr')
      this.isAllScreen = !this.isAllScreen;
      let parents = this.findParents(e.currentTarget, "vdr");
         if (this.isAllScreen) {
            this.parentsStyle = JSON.parse(JSON.stringify(parents.style));
            parents.style.transform = 'none';
            parents.style.width = '100%';
            parents.style.height = '100%';
            parents.style.position = 'fixed';
        parents.style.transform = "none";
        parents.style.width = "100%";
        parents.style.height = "100%";
        parents.style.position = "fixed";
            parents.style.left = 0;
            parents.style.right = 0;
            parents.style.bottom = 0;
@@ -114,11 +116,11 @@
            parents.style.width = this.parentsStyle.width;
            parents.style.height = this.parentsStyle.height;
            parents.style.position = this.parentsStyle.position;
            parents.style.left = 'initial';
            parents.style.right = 'initial';
            parents.style.bottom = 'initial';
            parents.style.top = 'initial';
            parents.style.zIndex = 'auto';
        parents.style.left = "initial";
        parents.style.right = "initial";
        parents.style.bottom = "initial";
        parents.style.top = "initial";
        parents.style.zIndex = "auto";
         }
         this.$options.chart.resize();
      },
@@ -128,41 +130,41 @@
      setData(sendData) {
         if (sendData) {
            this.$options.chartData = sendData;
            this.organizeData(sendData)
        this.organizeData(sendData);
         } else {
            // 初始化页面
            this.$nextTick(() => {
               if (sessionStorage.getItem('newPlatform') != 1) {
          if (sessionStorage.getItem("newPlatform") != 1) {
                  this.getAllMapOutlineAction();
               }
            })
        });
         }
      },
      organizeData(data) {
         let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
         echarts.registerMap('map', geoJson);
      echarts.registerMap("map", geoJson);
         // 整体配置项
         let option = {
            tooltip: {
               trigger: 'item',
          trigger: "item",
               formatter: function (params) {
                  if (params.componentSubType == "map") {
                     return ''
              return "";
                  } else if (params.componentSubType == "scatter") {
                     return params.name;
                  }
               }
          },
            },
            visualMap: {
               show: false,
               min: 0,
               max: 500,
               left: 'left',
               top: 'bottom',
               text: ['高', '低'], // 文本，默认为数值文本
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
               calculable: true,
               seriesIndex: [1],
               inRange: {}
          inRange: {},
            },
            geo: {
               map: "map",
@@ -172,53 +174,56 @@
                  normal: {
                     show: true,
                     textStyle: {
                        color: '#fff'
                     }
                color: "#fff",
              },
                  },
                  emphasis: {
                     textStyle: {
                        color: '#fff'
                     }
                  }
                color: "#fff",
              },
            },
               },
               roam: true, //是否允许缩放
               mapLocation: {
                  width: "110%",
                  height: "97%"
            height: "97%",
               },
               itemStyle: {
                  normal: {
                     borderColor: 'rgba(147, 235, 248, 1)',
              borderColor: "rgba(147, 235, 248, 1)",
                     borderWidth: 1,
                     areaColor: {
                        type: 'radial',
                type: "radial",
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                colorStops: [
                  {
                           offset: 0,
                           color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        }, {
                           offset: 1,
                           color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                     },
                     shadowColor: 'rgba(128, 217, 248, 1)',
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
                     shadowOffsetX: -2,
                     shadowOffsetY: 2,
                     shadowBlur: 10
              shadowBlur: 10,
                  },
                  emphasis: {
                     areaColor: '#1ecee5',
              areaColor: "#1ecee5",
                     borderWidth: 0,
                     label: {
                        show: false
                     }
                  }
               }
                show: false,
            },
            series: this.getSeries(data)
            },
          },
        },
        series: this.getSeries(data),
         };
         // 设置配置项
         this.setOption(option);
@@ -226,10 +231,10 @@
      resize() {
         setTimeout(() => {
            this.$options.chart.resize();
            if (JSON.stringify(this.$options.chartData) != '{}') {
        if (JSON.stringify(this.$options.chartData) != "{}") {
               this.setData(this.$options.chartData);
            }
         }, 300)
      }, 300);
      },
      getSeries(opt) {
         // 未配置series
@@ -237,14 +242,15 @@
            return [];
         }
         // 设置配置项
         let series = opt.series
      let series = opt.series;
         // 返回
         return series;
      },
      getAllMapOutlineAction() {
         //查询激活轮廓图
         getAllMapOutlineAction().then((res) => {
            let rs = JSON.parse(res.data.result);
      getAllMapOutlineAction()
        .then((res) => {
          let rs = res.data;
            if (rs.code == 1) {
               let data = rs.data;
               data.map((item) => {
@@ -253,6 +259,10 @@
                  }
               });
            }
          if (!this.mapName) {
            this.mapStyle = "百度地图";
          }
          this.mapNameCopy = this.mapName;
            this.$nextTick(() => {
               this.initPage();
            });
@@ -265,11 +275,12 @@
         //panel面板状态改变
         this.isShowInfoPanel = true;
         let poit = this.convertMain(homeData.longitude, homeData.latitude);
         this.mapInfoX = poit[0] - 120;
         this.mapInfoY = poit[1] - 190;
         this.mapInfoTitle = homeData.StationName;
      this.mapInfoX = poit[0];
      this.mapInfoY = poit[1];
      this.mapInfoTitle = homeData.stationName;
         this.$nextTick(() => {
            this.panelInfo = homeData
        console.log("panelInfo", homeData);
        this.panelInfo = homeData;
            // this.$refs.infoPanel.setInfo(homeData); //传值子组件
         });
      },
@@ -283,16 +294,16 @@
      },
      startSearchMapHomeState() {
         this.timers = setInterval(() => {
            this.searchChartHomeState()
         }, 60 * 1000)
        this.searchChartHomeState();
      }, 60 * 1000);
      },
      initPage() {
         // 初始化地图
         this.initCityChart();
         chart = echarts.init(document.getElementById('cityChart'));
      chart = echarts.init(document.getElementById("cityChart"));

         chart.on("georoam", (params) => {
            clearInterval(this.timers)
        clearInterval(this.timers);
            if (!this.isShowInfoPanel) {
               return;
            }
@@ -300,8 +311,8 @@
            this.timers = setTimeout(() => {
               this.isShowInfoPanel = true;
               let poit = this.convertMain(chartLng, chartLat);
               this.mapInfoX = poit[0] - 120;
               this.mapInfoY = poit[1] - 190;
          this.mapInfoX = poit[0];
          this.mapInfoY = poit[1];

               var option = chart.getOption(); //获得option对象
               if (params.zoom != null && params.zoom != undefined) {
@@ -324,8 +335,8 @@
               chartLng = params.data.longitude;
               chartLat = params.data.latitude;
               this.showChartPanel(
                  params.data.StationId,
                  params.data.FBSDeviceId,
            params.data.stationId,
            params.data.fbsdeviceId,
                  params.data
               );
            }
@@ -338,7 +349,7 @@
            deviceId: dev_id,
         })
            .then((res) => {
               let rs = JSON.parse(res.data.result);
          let rs = res.data;
               if (rs.data.length != 0) {
                  this.areas = rs.data;
                  //this.hdwDialog = true;
@@ -346,11 +357,10 @@
               } else {
                  searchHomeNum({
                     // 查询告警落后的信息
                     StationId: sId,
                     FBSDeviceId: dev_id,
              stationId: sId,
                  })
                     .then((res) => {
                        let rs = JSON.parse(res.data.result);
                let rs = res.data;
                        homeData.nums = rs;
                        this.changeChartPanelStatus(homeData);
                     })
@@ -364,159 +374,172 @@
            });
      },
      initCityChart() {
         searchMap().then((res) => {
            let rs = JSON.parse(res.data.result);
      searchMap()
        .then((res) => {
          let rs = res.data.data;
            let list = this.mergeMapInfos(rs);
          console.log("list", list);
            if (list != undefined && list.length > 0) {
               list.map((item) => {
                  item.name = item.StationName;
              item.name = item.stationName;
                  item.value = [];
                  item.value.push(item.longitude);
                  item.value.push(item.latitude);
                  tempData.push(item)
               })
               this.searchChartHomeState()
              tempData.push(item);
            });
            this.searchChartHomeState();
               this.startSearchMapHomeState();
            } else {
               this.initChart([], []);
            }
         }).catch((err) => {
            console.log(err)
         })
        .catch((err) => {
          console.log(err);
        });
      },
      searchChartHomeState() {
         searchMapHomeState().then((res) => {
            let rsState = JSON.parse(res.data.result);
      searchMapHomeState()
        .then((res) => {
          let rsState = res.data;
            let arr = [];
            abnormalArr = [];
            if (rsState.code === 1) {
               let data = rsState.data;
               data.map((item) => {
                  let infos = tempData.filter((jtem) => {
                     return jtem.StationId == item.StationId
                  })
                return jtem.stationId == item.stationId;
              });

                  if (infos.length > 0) {
                     let info = JSON.parse(JSON.stringify(infos[0]));
                     switch (item.num) {
                        case 1: // 落后
                           info.img = HomeDischargeImage;
                           info.color = '#ff6a6a';
                    info.color = "#ff6a6a";
                           abnormalArr.push(info);
                           break;
                        case 2: // 告警
                           info.img = HomeWarnImage;
                           info.color = '#d4ac6e';
                    info.color = "#d4ac6e";
                           abnormalArr.push(info);
                           break;
                        case 3:
                           info.img = HomeChargeImage;
                           info.color = '#4ba1fa';
                    info.color = "#4ba1fa";
                           abnormalArr.push(info);
                           break;
                        default:
                           info.img = HomeNormalImage;
                           break;
                     }
                     arr.push(info)
                arr.push(info);
                  }
               })
            });
               let arrId = [];
               for (let item of arr) {
                  if (arrId.indexOf(item['StationId']) == -1) {
                     arrId.push(item['StationId']);
              if (arrId.indexOf(item["stationId"]) == -1) {
                arrId.push(item["stationId"]);
                     chartData.push(item);
                  }
               }
               this.initChart(chartData, abnormalArr);

            }
         }).catch((err) => {
            console.log(err)
         })
        .catch((err) => {
          console.log(err);
        });
      },
      initChart(chartData, abnormalArr) { //初始化chart图
    initChart(chartData, abnormalArr) {
      //初始化chart图
         let option = {};
         if (abnormalArr.length > 0) {
            option = {
               series: [{ //图片
                  name: '图片',
                  type: 'scatter',
                  coordinateSystem: 'geo',
          series: [
            {
              //图片
              name: "图片",
              type: "scatter",
              coordinateSystem: "geo",
                  symbol: function (value, params) {
                     return 'image://' + params.data.img
                return "image://" + params.data.img;
                  },
                  symbolSize: [26, 26],
                  label: {
                     normal: {
                        show: false,
                     }
                },
                  },
                  data: chartData,
                  showEffectOn: 'render',
              showEffectOn: "render",
                  rippleEffect: {
                     brushType: 'stroke'
                brushType: "stroke",
                  },
                  hoverAnimation: true,
                  zlevel: 2
               }, { //波纹点
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  showEffectOn: 'render',
              zlevel: 2,
            },
            {
              //波纹点
              type: "effectScatter",
              coordinateSystem: "geo",
              showEffectOn: "render",
                  zlevel: 1,
                  rippleEffect: {
                     period: 4,
                     scale: 4,
                     brushType: 'fill'
                brushType: "fill",
                  },
                  hoverAnimation: false,
                  label: {
                     normal: {
                        show: false
                  show: false,
                     },
                  },
                  itemStyle: {
                     normal: {
                        color: function (value) {
                           return value.data.color
                    return value.data.color;
                        },
                        shadowBlur: 8,
                        shadowColor: function (value) {
                           return value.data.color
                    return value.data.color;
                        },
                     }
                },
                  },
                  symbolSize: [15, 15],
                  data: abnormalArr
               }]
              data: abnormalArr,
            },
          ],
            };
         } else {
            option = {
               series: [{ //图片
                  name: '图片',
                  type: 'scatter',
                  coordinateSystem: 'geo',
          series: [
            {
              //图片
              name: "图片",
              type: "scatter",
              coordinateSystem: "geo",
                  symbol: function (value, params) {
                     return 'image://' + params.data.img
                return "image://" + params.data.img;
                  },
                  symbolSize: [26, 26],
                  label: {
                     normal: {
                        show: false,
                     }
                },
                  },
                  data: chartData,
                  showEffectOn: 'render',
              showEffectOn: "render",
                  rippleEffect: {
                     brushType: 'stroke'
                brushType: "stroke",
                  },
                  hoverAnimation: true,
                  zlevel: 2
               }]
              zlevel: 2,
            },
          ],
            };
         }
         this.setData(option);
         window.addEventListener('resize', this.resize);
      window.addEventListener("resize", this.resize);
      },
      mergeMapInfos(list) {
         var mergeData = [];
@@ -537,7 +560,10 @@
         for (var i = 0; i < mergeData.length; i++) {
            var _mergeData = mergeData[i];
            // 经纬度相同
            if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
        if (
          mapInfo.latitude == _mergeData.latitude &&
          mapInfo.longitude == _mergeData.longitude
        ) {
               rs = i;
            }
         }
@@ -556,10 +582,10 @@
         );
      },
      outClear() {
         window.removeEventListener('resize', this.resize);
         clearInterval(this.timers)
         this.timers = null
      }
      window.removeEventListener("resize", this.resize);
      clearInterval(this.timers);
      this.timers = null;
    },
   },
   mounted() {
      // 基于准备好的dom，初始化echarts实例
@@ -573,17 +599,17 @@
         setTimeout(() => {
            this.isShowInfoPanel = true;
            let poit = this.convertMain(chartLng, chartLat);
            this.mapInfoX = poit[0] - 120;
            this.mapInfoY = poit[1] - 190;
        this.mapInfoX = poit[0];
        this.mapInfoY = poit[1];
         }, 300);
      });
      this.newPlatform = sessionStorage.getItem('newPlatform')
    this.newPlatform = sessionStorage.getItem("newPlatform");
   },
   destroyed() {
      window.removeEventListener('resize', this.resize);
      clearInterval(this.timers)
    window.removeEventListener("resize", this.resize);
    clearInterval(this.timers);
   },
}
};
</script>

<style scoped>
@@ -592,7 +618,10 @@
   background-color: #ffffff;
   color: rgb(0, 0, 0);
   border: 1px solid #999;
   z-index: 99;
  transform: translateY(-100%);
  margin-top: -26px;
  margin-left: -120px;
  z-index: 2;
}

.infoPanel .infoPanel-Title {