From 11be4fa888dcbb55bbf43b6caf1f4a4abd16a208 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 09 六月 2022 10:05:36 +0800
Subject: [PATCH] 大屏对接2.0项目
---
src/components/charts/chinaMap.vue | 1219 +++++++++++++++++++++++++++++----------------------------
1 files changed, 624 insertions(+), 595 deletions(-)
diff --git a/src/components/charts/chinaMap.vue b/src/components/charts/chinaMap.vue
index a84cd41..4fcc398 100644
--- a/src/components/charts/chinaMap.vue
+++ b/src/components/charts/chinaMap.vue
@@ -1,50 +1,52 @@
<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' }">
- <h4 class="infoPanel-Title">
- {{ mapInfoTitle }}
- <div class="closeBtn" @click.self="isShowInfoPanel=false"></div>
- </h4>
- <div class="infoPanel-center">
- <info-panel :infos="panelInfo"></info-panel>
- </div>
- </div>
- </div>
+ <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' }"
+ >
+ <h4 class="infoPanel-Title">
+ {{ mapInfoTitle }}
+ <div class="closeBtn" @click.self="isShowInfoPanel = false"></div>
+ </h4>
+ <div class="infoPanel-center">
+ <info-panel :infos="panelInfo"></info-panel>
+ </div>
+ </div>
+ </div>
</template>
<script>
-import * as echarts from 'echarts';
+import * as echarts from "echarts";
import {
- searchMap,
- searchMapHomeState,
- getAllMapOutlineAction,
- searchByDevId,
- searchHomeNum,
+ searchMap,
+ searchMapHomeState,
+ getAllMapOutlineAction,
+ searchByDevId,
+ 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鏁版嵁
@@ -53,591 +55,618 @@
let chart, chartLng, chartLat;
export default {
- components: { InfoPanel, newChinaMap },
- name: "chinaMap",
- chart: "",
- chartData: "",
- data() {
- return {
- newPlatform: 0,
- parentsStyle: {},
- isAllScreen: false,
- timers: null,
- mapName: 'zhongguo',
- mapInfoX: null,
- mapInfoY: null,
- mapInfoTitle: "",
- isShowInfoPanel: false,
- panelInfo: {
- num: 369,
- StationId: "42070471",
- StationName: "璐靛窞鐪�-璐甸槼甯�-瑙傚北婀栧尯-瑙傚北婀栧尯鎶ょ悊瀛﹂櫌-璁惧1",
- StationName3: "瑙傚北婀栧尯鎶ょ悊瀛﹂櫌",
- Address: "婀栧寳鐪佹姹夊競姝︽槍鍖�",
- longitude: 114.37285909,
- latitude: 30.56442241,
- information: "",
- FBSDeviceId: 910000111,
- nums: {
- code: 0,
- sum: 0,
- newsum: 0
- }
- },
- }
- },
- methods: {
- findParents(node, select) {
- var parent = node.parentNode;
- if (parent === null || parent.className.indexOf(select) != -1) {
- return parent;
- } else {
- return this.findParents(parent, select);
- }
- },
- dblclick(e) {
- 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.left = 0;
- parents.style.right = 0;
- parents.style.bottom = 0;
- parents.style.top = 0;
- parents.style.zIndex = 99999;
- } else {
- parents.style.transform = this.parentsStyle.transform;
- 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';
- }
- this.$options.chart.resize();
- },
- setOption(opt) {
- this.$options.chart.setOption(opt);
- },
- setData(sendData) {
- if (sendData) {
- this.$options.chartData = sendData;
- this.organizeData(sendData)
- } else {
- // 鍒濆鍖栭〉闈�
- this.$nextTick(() => {
- if (sessionStorage.getItem('newPlatform') != 1) {
- this.getAllMapOutlineAction();
- }
- })
- }
- },
- organizeData(data) {
- let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
- echarts.registerMap('map', geoJson);
- // 鏁翠綋閰嶇疆椤�
- let option = {
- tooltip: {
- trigger: 'item',
- formatter: function (params) {
- if (params.componentSubType == "map") {
- return ''
- } else if (params.componentSubType == "scatter") {
- return params.name;
- }
- }
- },
- visualMap: {
- show: false,
- min: 0,
- max: 500,
- left: 'left',
- top: 'bottom',
- text: ['楂�', '浣�'], // 鏂囨湰锛岄粯璁や负鏁板�兼枃鏈�
- calculable: true,
- seriesIndex: [1],
- inRange: {}
- },
- geo: {
- map: "map",
- layoutCenter: ["55%", "50%"],
- layoutSize: "100%",
- label: {
- normal: {
- show: true,
- textStyle: {
- color: '#fff'
- }
- },
- emphasis: {
- textStyle: {
- color: '#fff'
- }
- }
- },
- roam: true, //鏄惁鍏佽缂╂斁
- mapLocation: {
- width: "110%",
- height: "97%"
- },
- itemStyle: {
- normal: {
- borderColor: 'rgba(147, 235, 248, 1)',
- borderWidth: 1,
- areaColor: {
- type: 'radial',
- x: 0.5,
- y: 0.5,
- r: 0.8,
- colorStops: [{
- offset: 0,
- color: 'rgba(147, 235, 248, 0)' // 0% 澶勭殑棰滆壊
- }, {
- offset: 1,
- color: 'rgba(147, 235, 248, .2)' // 100% 澶勭殑棰滆壊
- }],
- globalCoord: false // 缂虹渷涓� false
- },
- shadowColor: 'rgba(128, 217, 248, 1)',
- shadowOffsetX: -2,
- shadowOffsetY: 2,
- shadowBlur: 10
- },
- emphasis: {
- areaColor: '#1ecee5',
- borderWidth: 0,
- label: {
- show: false
- }
- }
- }
- },
- series: this.getSeries(data)
- };
- // 璁剧疆閰嶇疆椤�
- this.setOption(option);
- },
- resize() {
- setTimeout(() => {
- this.$options.chart.resize();
- if (JSON.stringify(this.$options.chartData) != '{}') {
- this.setData(this.$options.chartData);
- }
- }, 300)
- },
- getSeries(opt) {
- // 鏈厤缃畇eries
- if (!opt || !opt.series) {
- return [];
- }
- // 璁剧疆閰嶇疆椤�
- let series = opt.series
- // 杩斿洖
- return series;
- },
- getAllMapOutlineAction() {
- //鏌ヨ婵�娲昏疆寤撳浘
- getAllMapOutlineAction().then((res) => {
- let rs = JSON.parse(res.data.result);
- if (rs.code == 1) {
- let data = rs.data;
- data.map((item) => {
- if (item.status == 1) {
- this.mapName = item.name;
- }
- });
- }
- this.$nextTick(() => {
- this.initPage();
- });
- })
- .catch((err) => {
- console.log(err);
- });
- },
- changeChartPanelStatus(homeData) {
- //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.$nextTick(() => {
- this.panelInfo = homeData
- // this.$refs.infoPanel.setInfo(homeData); //浼犲�煎瓙缁勪欢
- });
- },
- convertMain(Lng, lat) {
- //鏍规嵁缁忕含搴﹁绠楀畾浣�
- // let getModel = chart.getModel().getSeries()[1];
- let seriesModel = chart.getModel().getSeriesByIndex(0);
- let coordSys = seriesModel.coordinateSystem;
- let point = coordSys.dataToPoint([Lng, lat]);
- return point;
- },
- startSearchMapHomeState() {
- this.timers = setInterval(() => {
- this.searchChartHomeState()
- }, 60 * 1000)
- },
- initPage() {
- // 鍒濆鍖栧湴鍥�
- this.initCityChart();
- chart = echarts.init(document.getElementById('cityChart'));
+ components: { InfoPanel, newChinaMap },
+ name: "chinaMap",
+ chart: "",
+ chartData: "",
+ data() {
+ return {
+ newPlatform: 0,
+ parentsStyle: {},
+ isAllScreen: false,
+ timers: null,
+ mapName: "zhongguo",
+ mapInfoX: null,
+ mapInfoY: null,
+ mapInfoTitle: "",
+ isShowInfoPanel: false,
+ panelInfo: {
+ num: 369,
+ stationId: "42070471",
+ stationName: "璐靛窞鐪�-璐甸槼甯�-瑙傚北婀栧尯-瑙傚北婀栧尯鎶ょ悊瀛﹂櫌-璁惧1",
+ stationName3: "瑙傚北婀栧尯鎶ょ悊瀛﹂櫌",
+ Address: "婀栧寳鐪佹姹夊競姝︽槍鍖�",
+ longitude: 114.37285909,
+ latitude: 30.56442241,
+ information: "",
+ fbsdeviceId: 910000111,
+ nums: {
+ code: 0,
+ sum: 0,
+ newsum: 0,
+ },
+ },
+ };
+ },
+ methods: {
+ findParents(node, select) {
+ var parent = node.parentNode;
+ if (parent === null || parent.className.indexOf(select) != -1) {
+ return parent;
+ } else {
+ return this.findParents(parent, select);
+ }
+ },
+ dblclick(e) {
+ 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.left = 0;
+ parents.style.right = 0;
+ parents.style.bottom = 0;
+ parents.style.top = 0;
+ parents.style.zIndex = 99999;
+ } else {
+ parents.style.transform = this.parentsStyle.transform;
+ 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";
+ }
+ this.$options.chart.resize();
+ },
+ setOption(opt) {
+ this.$options.chart.setOption(opt);
+ },
+ setData(sendData) {
+ if (sendData) {
+ this.$options.chartData = sendData;
+ this.organizeData(sendData);
+ } else {
+ // 鍒濆鍖栭〉闈�
+ this.$nextTick(() => {
+ if (sessionStorage.getItem("newPlatform") != 1) {
+ this.getAllMapOutlineAction();
+ }
+ });
+ }
+ },
+ organizeData(data) {
+ let geoJson = require(`../../../public/mapJson/${this.mapName}.json`);
+ echarts.registerMap("map", geoJson);
+ // 鏁翠綋閰嶇疆椤�
+ let option = {
+ tooltip: {
+ trigger: "item",
+ formatter: function(params) {
+ if (params.componentSubType == "map") {
+ return "";
+ } else if (params.componentSubType == "scatter") {
+ return params.name;
+ }
+ },
+ },
+ visualMap: {
+ show: false,
+ min: 0,
+ max: 500,
+ left: "left",
+ top: "bottom",
+ text: ["楂�", "浣�"], // 鏂囨湰锛岄粯璁や负鏁板�兼枃鏈�
+ calculable: true,
+ seriesIndex: [1],
+ inRange: {},
+ },
+ geo: {
+ map: "map",
+ layoutCenter: ["55%", "50%"],
+ layoutSize: "100%",
+ label: {
+ normal: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ emphasis: {
+ textStyle: {
+ color: "#fff",
+ },
+ },
+ },
+ roam: true, //鏄惁鍏佽缂╂斁
+ mapLocation: {
+ width: "110%",
+ height: "97%",
+ },
+ itemStyle: {
+ normal: {
+ borderColor: "rgba(147, 235, 248, 1)",
+ borderWidth: 1,
+ areaColor: {
+ type: "radial",
+ x: 0.5,
+ y: 0.5,
+ r: 0.8,
+ colorStops: [
+ {
+ offset: 0,
+ color: "rgba(147, 235, 248, 0)", // 0% 澶勭殑棰滆壊
+ },
+ {
+ offset: 1,
+ color: "rgba(147, 235, 248, .2)", // 100% 澶勭殑棰滆壊
+ },
+ ],
+ globalCoord: false, // 缂虹渷涓� false
+ },
+ shadowColor: "rgba(128, 217, 248, 1)",
+ shadowOffsetX: -2,
+ shadowOffsetY: 2,
+ shadowBlur: 10,
+ },
+ emphasis: {
+ areaColor: "#1ecee5",
+ borderWidth: 0,
+ label: {
+ show: false,
+ },
+ },
+ },
+ },
+ series: this.getSeries(data),
+ };
+ // 璁剧疆閰嶇疆椤�
+ this.setOption(option);
+ },
+ resize() {
+ setTimeout(() => {
+ this.$options.chart.resize();
+ if (JSON.stringify(this.$options.chartData) != "{}") {
+ this.setData(this.$options.chartData);
+ }
+ }, 300);
+ },
+ getSeries(opt) {
+ // 鏈厤缃畇eries
+ if (!opt || !opt.series) {
+ return [];
+ }
+ // 璁剧疆閰嶇疆椤�
+ let series = opt.series;
+ // 杩斿洖
+ return series;
+ },
+ getAllMapOutlineAction() {
+ //鏌ヨ婵�娲昏疆寤撳浘
+ getAllMapOutlineAction()
+ .then((res) => {
+ let rs = res.data;
+ if (rs.code == 1) {
+ let data = rs.data;
+ data.map((item) => {
+ if (item.status == 1) {
+ this.mapName = item.name;
+ }
+ });
+ }
+ if (!this.mapName) {
+ this.mapStyle = "鐧惧害鍦板浘";
+ }
+ this.mapNameCopy = this.mapName;
+ this.$nextTick(() => {
+ this.initPage();
+ });
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ },
+ changeChartPanelStatus(homeData) {
+ //panel闈㈡澘鐘舵�佹敼鍙�
+ this.isShowInfoPanel = true;
+ let poit = this.convertMain(homeData.longitude, homeData.latitude);
+ this.mapInfoX = poit[0];
+ this.mapInfoY = poit[1];
+ this.mapInfoTitle = homeData.stationName;
+ this.$nextTick(() => {
+ console.log("panelInfo", homeData);
+ this.panelInfo = homeData;
+ // this.$refs.infoPanel.setInfo(homeData); //浼犲�煎瓙缁勪欢
+ });
+ },
+ convertMain(Lng, lat) {
+ //鏍规嵁缁忕含搴﹁绠楀畾浣�
+ // let getModel = chart.getModel().getSeries()[1];
+ let seriesModel = chart.getModel().getSeriesByIndex(0);
+ let coordSys = seriesModel.coordinateSystem;
+ let point = coordSys.dataToPoint([Lng, lat]);
+ return point;
+ },
+ startSearchMapHomeState() {
+ this.timers = setInterval(() => {
+ this.searchChartHomeState();
+ }, 60 * 1000);
+ },
+ initPage() {
+ // 鍒濆鍖栧湴鍥�
+ this.initCityChart();
+ chart = echarts.init(document.getElementById("cityChart"));
- chart.on("georoam", (params) => {
- clearInterval(this.timers)
- if (!this.isShowInfoPanel) {
- return;
- }
- this.isShowInfoPanel = false;
- this.timers = setTimeout(() => {
- this.isShowInfoPanel = true;
- let poit = this.convertMain(chartLng, chartLat);
- this.mapInfoX = poit[0] - 120;
- this.mapInfoY = poit[1] - 190;
+ chart.on("georoam", (params) => {
+ clearInterval(this.timers);
+ if (!this.isShowInfoPanel) {
+ return;
+ }
+ this.isShowInfoPanel = false;
+ this.timers = setTimeout(() => {
+ this.isShowInfoPanel = true;
+ let poit = this.convertMain(chartLng, chartLat);
+ this.mapInfoX = poit[0];
+ this.mapInfoY = poit[1];
- var option = chart.getOption(); //鑾峰緱option瀵硅薄
- if (params.zoom != null && params.zoom != undefined) {
- //鎹曟崏鍒扮缉鏀炬椂
- option.series[0].zoom = option.geo[0].zoom; //涓嬪眰geo鐨勭缉鏀剧瓑绾ц窡鐫�涓婂眰鐨刧eo涓�璧锋敼鍙�
- option.series[0].center = option.geo[0].center; //涓嬪眰鐨刧eo鐨勪腑蹇冧綅缃殢鐫�涓婂眰geo涓�璧锋敼鍙�
- } else {
- //鎹曟崏鍒版嫋鏇虫椂
- option.series[0].center = option.geo[0].center; //涓嬪眰鐨刧eo鐨勪腑蹇冧綅缃潃涓婂眰geo涓�璧锋敼鍙�
- }
- chart.setOption(option); //璁剧疆option
+ var option = chart.getOption(); //鑾峰緱option瀵硅薄
+ if (params.zoom != null && params.zoom != undefined) {
+ //鎹曟崏鍒扮缉鏀炬椂
+ option.series[0].zoom = option.geo[0].zoom; //涓嬪眰geo鐨勭缉鏀剧瓑绾ц窡鐫�涓婂眰鐨刧eo涓�璧锋敼鍙�
+ option.series[0].center = option.geo[0].center; //涓嬪眰鐨刧eo鐨勪腑蹇冧綅缃殢鐫�涓婂眰geo涓�璧锋敼鍙�
+ } else {
+ //鎹曟崏鍒版嫋鏇虫椂
+ option.series[0].center = option.geo[0].center; //涓嬪眰鐨刧eo鐨勪腑蹇冧綅缃潃涓婂眰geo涓�璧锋敼鍙�
+ }
+ chart.setOption(option); //璁剧疆option
- // this.startSearchMapHomeState();
- }, 300);
- });
- chart.off("click"); //闃叉chart鐐瑰嚮瑙﹀彂澶氭
- chart.on("click", (params) => {
- //鐐瑰嚮璺宠浆瀹炴椂鏁版嵁
- if (params.seriesType == "scatter") {
- chartLng = params.data.longitude;
- chartLat = params.data.latitude;
- this.showChartPanel(
- params.data.StationId,
- params.data.FBSDeviceId,
- params.data
- );
- }
- });
- },
- // 鏌ヨ鍛婅钀藉悗鐨勪俊鎭�
- showChartPanel(sId, dev_id, homeData) {
- // 妫�娴嬫槸鍚﹀瓨鍦�3D鏈烘埧
- searchByDevId({
- deviceId: dev_id,
- })
- .then((res) => {
- let rs = JSON.parse(res.data.result);
- if (rs.data.length != 0) {
- this.areas = rs.data;
- //this.hdwDialog = true;
- this.showThreeHomeDialog(this.areas);
- } else {
- searchHomeNum({
- // 鏌ヨ鍛婅钀藉悗鐨勪俊鎭�
- StationId: sId,
- FBSDeviceId: dev_id,
- })
- .then((res) => {
- let rs = JSON.parse(res.data.result);
- homeData.nums = rs;
- this.changeChartPanelStatus(homeData);
- })
- .catch((error) => {
- console.log(error);
- });
- }
- })
- .catch((error) => {
- console.log(error);
- });
- },
- initCityChart() {
- searchMap().then((res) => {
- let rs = JSON.parse(res.data.result);
- let list = this.mergeMapInfos(rs);
- if (list != undefined && list.length > 0) {
- list.map((item) => {
- item.name = item.StationName;
- item.value = [];
- item.value.push(item.longitude);
- item.value.push(item.latitude);
- tempData.push(item)
- })
- this.searchChartHomeState()
- this.startSearchMapHomeState();
- } else {
- this.initChart([], []);
- }
- }).catch((err) => {
- console.log(err)
- })
- },
- searchChartHomeState() {
- searchMapHomeState().then((res) => {
- let rsState = JSON.parse(res.data.result);
- let arr = [];
- abnormalArr = [];
- if (rsState.code === 1) {
- let data = rsState.data;
- data.map((item) => {
- let infos = tempData.filter((jtem) => {
- return jtem.StationId == item.StationId
- })
+ // this.startSearchMapHomeState();
+ }, 300);
+ });
+ chart.off("click"); //闃叉chart鐐瑰嚮瑙﹀彂澶氭
+ chart.on("click", (params) => {
+ //鐐瑰嚮璺宠浆瀹炴椂鏁版嵁
+ if (params.seriesType == "scatter") {
+ chartLng = params.data.longitude;
+ chartLat = params.data.latitude;
+ this.showChartPanel(
+ params.data.stationId,
+ params.data.fbsdeviceId,
+ params.data
+ );
+ }
+ });
+ },
+ // 鏌ヨ鍛婅钀藉悗鐨勪俊鎭�
+ showChartPanel(sId, dev_id, homeData) {
+ // 妫�娴嬫槸鍚﹀瓨鍦�3D鏈烘埧
+ searchByDevId({
+ deviceId: dev_id,
+ })
+ .then((res) => {
+ let rs = res.data;
+ if (rs.data.length != 0) {
+ this.areas = rs.data;
+ //this.hdwDialog = true;
+ this.showThreeHomeDialog(this.areas);
+ } else {
+ searchHomeNum({
+ // 鏌ヨ鍛婅钀藉悗鐨勪俊鎭�
+ stationId: sId,
+ })
+ .then((res) => {
+ let rs = res.data;
+ homeData.nums = rs;
+ this.changeChartPanelStatus(homeData);
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ },
+ initCityChart() {
+ 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.value = [];
+ item.value.push(item.longitude);
+ item.value.push(item.latitude);
+ tempData.push(item);
+ });
+ this.searchChartHomeState();
+ this.startSearchMapHomeState();
+ } else {
+ this.initChart([], []);
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ },
+ searchChartHomeState() {
+ 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;
+ });
- if (infos.length > 0) {
- let info = JSON.parse(JSON.stringify(infos[0]));
- switch (item.num) {
- case 1: // 钀藉悗
- info.img = HomeDischargeImage;
- info.color = '#ff6a6a';
- abnormalArr.push(info);
- break;
- case 2: // 鍛婅
- info.img = HomeWarnImage;
- info.color = '#d4ac6e';
- abnormalArr.push(info);
- break;
- case 3:
- info.img = HomeChargeImage;
- info.color = '#4ba1fa';
- abnormalArr.push(info);
- break;
- default:
- info.img = HomeNormalImage;
- break;
- }
- arr.push(info)
- }
- })
- let arrId = [];
- for (let item of arr) {
- if (arrId.indexOf(item['StationId']) == -1) {
- arrId.push(item['StationId']);
- chartData.push(item);
- }
- }
- this.initChart(chartData, abnormalArr);
-
- }
- }).catch((err) => {
- console.log(err)
- })
- },
- initChart(chartData, abnormalArr) { //鍒濆鍖朿hart鍥�
- let option = {};
- if (abnormalArr.length > 0) {
- option = {
- series: [{ //鍥剧墖
- name: '鍥剧墖',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbol: function (value, params) {
- return 'image://' + params.data.img
- },
- symbolSize: [26, 26],
- label: {
- normal: {
- show: false,
- }
- },
- data: chartData,
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- zlevel: 2
- }, { //娉㈢汗鐐�
- type: 'effectScatter',
- coordinateSystem: 'geo',
- showEffectOn: 'render',
- zlevel: 1,
- rippleEffect: {
- period: 4,
- scale: 4,
- brushType: 'fill'
- },
- hoverAnimation: false,
- label: {
- normal: {
- show: false
- },
- },
- itemStyle: {
- normal: {
- color: function (value) {
- return value.data.color
- },
- shadowBlur: 8,
- shadowColor: function (value) {
- return value.data.color
- },
- }
- },
- symbolSize: [15, 15],
- data: abnormalArr
- }]
- };
- } else {
- option = {
- series: [{ //鍥剧墖
- name: '鍥剧墖',
- type: 'scatter',
- coordinateSystem: 'geo',
- symbol: function (value, params) {
- return 'image://' + params.data.img
- },
- symbolSize: [26, 26],
- label: {
- normal: {
- show: false,
- }
- },
- data: chartData,
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- hoverAnimation: true,
- zlevel: 2
- }]
- };
- }
- this.setData(option);
- window.addEventListener('resize', this.resize);
- },
- mergeMapInfos(list) {
- var mergeData = [];
- // 閬嶅巻list
- for (var i = 0; i < list.length; i++) {
- var _list = list[i];
- var isIn = this.checkMapInfoIsIn(_list, mergeData);
- if (isIn == -1) {
- mergeData.push(_list);
- }
- }
- // 杩斿洖鍚堝苟鍊�
- return mergeData;
- },
- checkMapInfoIsIn(mapInfo, mergeData) {
- var rs = -1;
- // 閬嶅巻mergeData
- for (var i = 0; i < mergeData.length; i++) {
- var _mergeData = mergeData[i];
- // 缁忕含搴︾浉鍚�
- if (mapInfo.latitude == _mergeData.latitude && mapInfo.longitude == _mergeData.longitude) {
- rs = i;
- }
- }
- return rs;
- },
- showThreeHomeDialog(areas) {
- window.parent.parent.postMessage(
- {
- cmd: "showDialog",
- params: {
- dialog: "hdwDialog",
- pageInfo: areas,
- },
- },
- "*"
- );
- },
- outClear() {
- window.removeEventListener('resize', this.resize);
- clearInterval(this.timers)
- this.timers = null
- }
- },
- mounted() {
- // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
- this.$options.chart = echarts.init(this.$refs.chart);
- // 鐩戝惉chartMap鐨勯潰鏉�
- window.addEventListener("resize", () => {
- if (!this.isShowInfoPanel || !this.mapName) {
- return;
- }
- this.isShowInfoPanel = false;
- setTimeout(() => {
- this.isShowInfoPanel = true;
- let poit = this.convertMain(chartLng, chartLat);
- this.mapInfoX = poit[0] - 120;
- this.mapInfoY = poit[1] - 190;
- }, 300);
- });
- this.newPlatform = sessionStorage.getItem('newPlatform')
- },
- destroyed() {
- window.removeEventListener('resize', this.resize);
- clearInterval(this.timers)
- },
-}
+ if (infos.length > 0) {
+ let info = JSON.parse(JSON.stringify(infos[0]));
+ switch (item.num) {
+ case 1: // 钀藉悗
+ info.img = HomeDischargeImage;
+ info.color = "#ff6a6a";
+ abnormalArr.push(info);
+ break;
+ case 2: // 鍛婅
+ info.img = HomeWarnImage;
+ info.color = "#d4ac6e";
+ abnormalArr.push(info);
+ break;
+ case 3:
+ info.img = HomeChargeImage;
+ info.color = "#4ba1fa";
+ abnormalArr.push(info);
+ break;
+ default:
+ info.img = HomeNormalImage;
+ break;
+ }
+ arr.push(info);
+ }
+ });
+ let arrId = [];
+ for (let item of arr) {
+ if (arrId.indexOf(item["stationId"]) == -1) {
+ arrId.push(item["stationId"]);
+ chartData.push(item);
+ }
+ }
+ this.initChart(chartData, abnormalArr);
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ },
+ initChart(chartData, abnormalArr) {
+ //鍒濆鍖朿hart鍥�
+ let option = {};
+ if (abnormalArr.length > 0) {
+ option = {
+ series: [
+ {
+ //鍥剧墖
+ name: "鍥剧墖",
+ type: "scatter",
+ coordinateSystem: "geo",
+ symbol: function(value, params) {
+ return "image://" + params.data.img;
+ },
+ symbolSize: [26, 26],
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ data: chartData,
+ showEffectOn: "render",
+ rippleEffect: {
+ brushType: "stroke",
+ },
+ hoverAnimation: true,
+ zlevel: 2,
+ },
+ {
+ //娉㈢汗鐐�
+ type: "effectScatter",
+ coordinateSystem: "geo",
+ showEffectOn: "render",
+ zlevel: 1,
+ rippleEffect: {
+ period: 4,
+ scale: 4,
+ brushType: "fill",
+ },
+ hoverAnimation: false,
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: function(value) {
+ return value.data.color;
+ },
+ shadowBlur: 8,
+ shadowColor: function(value) {
+ return value.data.color;
+ },
+ },
+ },
+ symbolSize: [15, 15],
+ data: abnormalArr,
+ },
+ ],
+ };
+ } else {
+ option = {
+ series: [
+ {
+ //鍥剧墖
+ name: "鍥剧墖",
+ type: "scatter",
+ coordinateSystem: "geo",
+ symbol: function(value, params) {
+ return "image://" + params.data.img;
+ },
+ symbolSize: [26, 26],
+ label: {
+ normal: {
+ show: false,
+ },
+ },
+ data: chartData,
+ showEffectOn: "render",
+ rippleEffect: {
+ brushType: "stroke",
+ },
+ hoverAnimation: true,
+ zlevel: 2,
+ },
+ ],
+ };
+ }
+ this.setData(option);
+ window.addEventListener("resize", this.resize);
+ },
+ mergeMapInfos(list) {
+ var mergeData = [];
+ // 閬嶅巻list
+ for (var i = 0; i < list.length; i++) {
+ var _list = list[i];
+ var isIn = this.checkMapInfoIsIn(_list, mergeData);
+ if (isIn == -1) {
+ mergeData.push(_list);
+ }
+ }
+ // 杩斿洖鍚堝苟鍊�
+ return mergeData;
+ },
+ checkMapInfoIsIn(mapInfo, mergeData) {
+ var rs = -1;
+ // 閬嶅巻mergeData
+ for (var i = 0; i < mergeData.length; i++) {
+ var _mergeData = mergeData[i];
+ // 缁忕含搴︾浉鍚�
+ if (
+ mapInfo.latitude == _mergeData.latitude &&
+ mapInfo.longitude == _mergeData.longitude
+ ) {
+ rs = i;
+ }
+ }
+ return rs;
+ },
+ showThreeHomeDialog(areas) {
+ window.parent.parent.postMessage(
+ {
+ cmd: "showDialog",
+ params: {
+ dialog: "hdwDialog",
+ pageInfo: areas,
+ },
+ },
+ "*"
+ );
+ },
+ outClear() {
+ window.removeEventListener("resize", this.resize);
+ clearInterval(this.timers);
+ this.timers = null;
+ },
+ },
+ mounted() {
+ // 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
+ this.$options.chart = echarts.init(this.$refs.chart);
+ // 鐩戝惉chartMap鐨勯潰鏉�
+ window.addEventListener("resize", () => {
+ if (!this.isShowInfoPanel || !this.mapName) {
+ return;
+ }
+ this.isShowInfoPanel = false;
+ setTimeout(() => {
+ this.isShowInfoPanel = true;
+ let poit = this.convertMain(chartLng, chartLat);
+ this.mapInfoX = poit[0];
+ this.mapInfoY = poit[1];
+ }, 300);
+ });
+ this.newPlatform = sessionStorage.getItem("newPlatform");
+ },
+ destroyed() {
+ window.removeEventListener("resize", this.resize);
+ clearInterval(this.timers);
+ },
+};
</script>
<style scoped>
.infoPanel {
- position: absolute;
- background-color: #ffffff;
- color: rgb(0, 0, 0);
- border: 1px solid #999;
- z-index: 99;
+ position: absolute;
+ background-color: #ffffff;
+ color: rgb(0, 0, 0);
+ border: 1px solid #999;
+ transform: translateY(-100%);
+ margin-top: -26px;
+ margin-left: -120px;
+ z-index: 2;
}
.infoPanel .infoPanel-Title {
- border-bottom: 1px solid #ccc;
- height: 31px;
- line-height: 30px;
- background-color: #f9f9f9;
- overflow: hidden;
- height: 30px;
- padding: 0 5px;
- font-size: 12px;
- position: relative;
+ border-bottom: 1px solid #ccc;
+ height: 31px;
+ line-height: 30px;
+ background-color: #f9f9f9;
+ overflow: hidden;
+ height: 30px;
+ padding: 0 5px;
+ font-size: 12px;
+ position: relative;
}
.infoPanel .infoPanel-Title .closeBtn {
- background: url("../../assets/images/iw_close1d3.gif") 0 0 no-repeat;
- background-size: 100% 100%;
- position: absolute;
- top: 9px;
- right: 12px;
- width: 10px;
- height: 10px;
- user-select: none;
- overflow: hidden;
- cursor: pointer;
- line-height: 9999px;
- z-index: 10000;
+ background: url("../../assets/images/iw_close1d3.gif") 0 0 no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ top: 9px;
+ right: 12px;
+ width: 10px;
+ height: 10px;
+ user-select: none;
+ overflow: hidden;
+ cursor: pointer;
+ line-height: 9999px;
+ z-index: 10000;
}
.infoPanel .infoPanel-center {
- padding: 3px 5px;
- overflow-x: auto;
- overflow-y: hidden;
+ padding: 3px 5px;
+ overflow-x: auto;
+ overflow-y: hidden;
}
.infoPanel::after {
- content: "";
- display: block;
- z-index: 5;
- position: absolute;
- bottom: -31px;
- width: 58px;
- height: 31px;
- left: 125px;
- background: url("../../assets/images/iw_tail.png") 0 0 no-repeat;
- background-size: 100% 100%;
+ content: "";
+ display: block;
+ z-index: 5;
+ position: absolute;
+ bottom: -31px;
+ width: 58px;
+ height: 31px;
+ left: 125px;
+ background: url("../../assets/images/iw_tail.png") 0 0 no-repeat;
+ background-size: 100% 100%;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1