From c04569e75ef0c526f7f08169cc5724c83005d250 Mon Sep 17 00:00:00 2001
From: whyczyk <525500596@qq.com>
Date: 星期四, 30 九月 2021 20:11:39 +0800
Subject: [PATCH] 地图组件及图表模块跳转方法添加
---
src/components/charts/chinaMap.vue | 252 ++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 220 insertions(+), 32 deletions(-)
diff --git a/src/components/charts/chinaMap.vue b/src/components/charts/chinaMap.vue
index c0916bb..3eb8275 100644
--- a/src/components/charts/chinaMap.vue
+++ b/src/components/charts/chinaMap.vue
@@ -3,6 +3,15 @@
<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>
@@ -12,6 +21,8 @@
searchMap,
searchMapHomeState,
getAllMapOutlineAction,
+ searchByDevId,
+ searchHomeNum,
} from "../../assets/js/api";
import HomeNormal from '@/assets/images/home.png'
@@ -31,21 +42,43 @@
homeWarnImage.src = HomeWarnImage;
// 鏀剧數鍥炬爣
import HomeDischargeImage from '@/assets/images/home-discharge.png';
+import InfoPanel from '../indexPanel/InfoPanel.vue';
let homeDischargeImage = new Image();
homeDischargeImage.src = HomeDischargeImage;
-let addHomeData = [];
let chartData = []; //chart鏁版嵁
let abnormalArr = []; //寮傚父鏁扮粍
let tempData = []; //绔欑偣鏁扮粍
-let chart, chartLng, chartLat;
+let chart, chartLng, chartLat, timers;
export default {
+ components: { InfoPanel },
name: "chinaMap",
chart: "",
chartData: "",
data() {
return {
- mapName: 'zhongguo'
+ timer: 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: {
@@ -162,7 +195,7 @@
let rs = JSON.parse(res.data.result);
if (rs.code == 1) {
let data = rs.data;
- data.map((item, index) => {
+ data.map((item) => {
if (item.status == 1) {
this.mapName = item.name;
}
@@ -176,47 +209,123 @@
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.timer = setInterval(() => {
+ this.searchChartHomeState()
+ }, 4000)
+
+ },
initPage() {
// 鍒濆鍖栧湴鍥�
this.initCityChart();
chart = echarts.init(document.getElementById('cityChart'));
- chart.off('click'); //闃叉chart鐐瑰嚮瑙﹀彂澶氭
- chart.on("click", params => { //鐐瑰嚮璺宠浆瀹炴椂鏁版嵁
+
+ chart.on("georoam", (params) => {
+ clearInterval(this.timer)
+ if (!this.isShowInfoPanel) {
+ return;
+ }
+ this.isShowInfoPanel = false;
+ clearTimeout(timers);
+ timers = setTimeout(() => {
+ this.isShowInfoPanel = true;
+ let poit = this.convertMain(chartLng, chartLat);
+ this.mapInfoX = poit[0] - 120;
+ this.mapInfoY = poit[1] - 190;
+
+ 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") {
- this.$router.push({
- path: '/functionList'
- })
+ 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, index) => {
+ list.map((item) => {
item.name = item.StationName;
item.value = [];
item.value.push(item.longitude);
item.value.push(item.latitude);
tempData.push(item)
})
- this.searchChartHomeState();
-
- let mapDotList = list.map(data => {
- return {
- lng: data.longitude,
- lat: data.latitude,
- title: data.StationName,
- data: data,
- name: data.StationName,
- geometry: {
- type: 'Point',
- coordinates: [data.longitude, data.latitude]
- }
- }
- });
- addHomeData = mapDotList;
+ this.startSearchMapHomeState();
} else {
this.initChart([], []);
}
@@ -231,7 +340,7 @@
abnormalArr = [];
if (rsState.code === 1) {
let data = rsState.data;
- data.map((item, i) => {
+ data.map((item) => {
let infos = tempData.filter((jtem) => {
return jtem.StationId == item.StationId
})
@@ -284,6 +393,7 @@
type: 'scatter',
coordinateSystem: 'geo',
symbol: function (value, params) {
+ let asd = value
return 'image://' + params.data.img
},
symbolSize: [26, 26],
@@ -317,11 +427,11 @@
},
itemStyle: {
normal: {
- color: function (value, params) {
+ color: function (value) {
return value.data.color
},
shadowBlur: 8,
- shadowColor: function (value, params) {
+ shadowColor: function (value) {
return value.data.color
},
}
@@ -337,6 +447,7 @@
type: 'scatter',
coordinateSystem: 'geo',
symbol: function (value, params) {
+ let asd = value
return 'image://' + params.data.img
},
symbolSize: [26, 26],
@@ -383,20 +494,97 @@
}
return rs;
},
+ showThreeHomeDialog(areas) {
+ window.parent.parent.postMessage(
+ {
+ cmd: "showDialog",
+ params: {
+ dialog: "hdwDialog",
+ pageInfo: areas,
+ },
+ },
+ "*"
+ );
+ },
},
mounted() {
// 鍒濆鍖栭〉闈�
this.getAllMapOutlineAction();
// 鍩轰簬鍑嗗濂界殑dom锛屽垵濮嬪寲echarts瀹炰緥
this.$options.chart = echarts.init(this.$refs.chart);
-
-
+ // 鐩戝惉chartMap鐨勯潰鏉�
+ window.addEventListener("resize", () => {
+ if (!this.isShowInfoPanel || !this.mapName) {
+ return;
+ }
+ this.isShowInfoPanel = false;
+ timers = setTimeout(() => {
+ this.isShowInfoPanel = true;
+ let poit = this.convertMain(chartLng, chartLat);
+ this.mapInfoX = poit[0] - 120;
+ this.mapInfoY = poit[1] - 190;
+ }, 300);
+ });
},
destroyed() {
window.removeEventListener('resize', this.resize);
- }
+ clearInterval(this.timer)
+ },
}
</script>
<style scoped>
+.infoPanel {
+ position: absolute;
+ background-color: #ffffff;
+ color: rgb(0, 0, 0);
+ border: 1px solid #999;
+ z-index: 99;
+}
+
+.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;
+}
+
+.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;
+}
+
+.infoPanel .infoPanel-center {
+ 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%;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.1