运营平台-停车热力图

src/pages/index/components/parking_heatmap.vue

@@ -0,0 +1,297 @@
+<template>
+  <div style="color: #d5d3d3" class="middle-map">
+    <div style="height: 450px; width: 50%">
+      <div class="bottom" id="map1"></div>
+    </div>
+    <div style="height: 450px; width: 50%">
+      <div class="bottom" id="map2"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import * as geoJson from '../../../util/411100.json'
+import linechart from "@/components/lineChart";
+import api from '@/api/audit'
+
+export default {
+  components: {
+    linechart,
+  },
+  data() {
+    return {
+      value: '',
+      dqIndex: -1,
+      timer: null,
+      option: {
+        visualMap: {
+          show: true,
+          type: "continuous",
+          left: "0%",
+          bottom: "0%",
+          calculable: true,
+          textStyle: {
+            color: "white",
+          },
+          text: ["(%)"],
+          min: 0,
+          max: 100,
+          inRange: {
+            color: ["#4FC9FB","#36ADFC","#1788D1","#0E6BAE","#1871A2","#0D4D7D"],
+          },
+        },
+        geo: {
+          map: "luohe",
+          // aspectScale: 1,
+          roam: false,
+          itemStyle: {
+            normal: {
+              borderColor: "#2ab8ff",
+              borderWidth: 2.5,
+              areaColor: "#12235c",
+            },
+            emphasis: {
+              areaColor: "#2AB8FF",
+              shadowColor: "rgba(42,184,255, 0.7)",
+              shadowOffsetY: 5,
+              shadowOffsetX: 5,
+              shadowBlur: 5,
+            },
+          },
+        },
+        tooltip: {
+          confine: true,
+          formatter: this.mapTooltip,
+          position: "inside",
+          backgroundColor: "transparent",
+        },
+        series: [
+          {
+            type: "map",
+            // roam: true,
+            label: {
+              normal: {
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+              emphasis: {
+                show: false,
+                textStyle: {
+                  color: "#fff",
+                },
+              },
+            },
+            itemStyle: {
+              normal: {
+                borderColor: "#76bef5",
+                borderWidth: 1.5,
+                areaColor: "#4282de",
+              },
+              emphasis: {
+                areaColor: "#002aff",
+                borderWidth: 0,
+                color: "green",
+              },
+            },
+            roam: false,
+            map: "luohe", //使用
+            data: [],
+          },
+        ],
+      },
+    };
+  },
+
+  mounted() {
+    this.zxt()
+    api.dtnyzs().then(res => {
+      let arr = []
+      let dataSoure = res.data
+      for (const key in dataSoure) {
+        if (key !== 411100) {
+          arr.push({
+            name: dataSoure[key].quyuName,
+            value: Number(dataSoure[key].zb),
+          });
+        }
+      }
+      let mapMax = Math.max(...arr.map(item => item.value))
+      let mapMin = Math.min(...arr.map(item => item.value))
+      let chart = echarts.init(document.getElementById("map1"));
+      echarts.registerMap("luohe", geoJson);
+      this.option.series[0].data = arr;
+      this.option.visualMap.min = mapMin;
+      this.option.visualMap.max = mapMax;
+      chart.setOption(this.option);
+      this.dqIndex = -1;
+      this.setIntervalMap(chart);
+      //鼠标移入静止播放
+      chart.on("mouseover", (e) => {
+        clearInterval(this.timer);
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+        });
+      });
+      chart.on("mouseout", (e) => {
+        clearInterval(this.timer);
+        //鼠标移出后先把上次的高亮取消
+        chart.dispatchAction({
+          type: "downplay",
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+        });
+        this.setIntervalMap(chart);
+      });
+    })
+    api.dtnyzs().then(res => {
+      let arr = []
+      let dataSoure = res.data
+      for (const key in dataSoure) {
+        if (key !== 411100) {
+          arr.push({
+            name: dataSoure[key].quyuName,
+            value: Number(dataSoure[key].zb),
+          });
+        }
+      }
+      let mapMax = Math.max(...arr.map(item => item.value))
+      let mapMin = Math.min(...arr.map(item => item.value))
+      let chart = echarts.init(document.getElementById("map2"));
+      echarts.registerMap("luohe", geoJson);
+      this.option.series[0].data = arr;
+      this.option.visualMap.min = mapMin;
+      this.option.visualMap.max = mapMax;
+      chart.setOption(this.option);
+      this.dqIndex = -1;
+      this.setIntervalMap(chart);
+      //鼠标移入静止播放
+      chart.on("mouseover", (e) => {
+        clearInterval(this.timer);
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+        });
+      });
+      chart.on("mouseout", (e) => {
+        clearInterval(this.timer);
+        //鼠标移出后先把上次的高亮取消
+        chart.dispatchAction({
+          type: "downplay",
+          seriesIndex: 0,
+          dataIndex: e.dataIndex,
+        });
+        this.setIntervalMap(chart);
+      });
+    })
+  },
+  methods: {
+    zxt() {
+      api.zxt().then(res => {
+        this.linedata = res.data || []
+      })
+    },
+    lineTooltipFormat(params) {
+      const data = params[0].data;
+      return `<div class="line-tooltip">
+        <div style="color: ${params[0].color}">${params[0].seriesName}: ${
+        params[0].data.lastAmount || "--"
+      }</div>
+      </div>`;
+    },
+    setIntervalMap(chart) {
+      this.timer = setInterval(() => {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0,
+          dataIndex: this.dqIndex + 1,
+        });
+        this.dqIndex++;
+        if (this.dqIndex > 4) {
+          this.dqIndex = -1;
+        }
+      }, 3000);
+    },
+    mapTooltip(data) {
+      return `<div class="map-tooltip">
+        <div class="map-tooltip-name">${data.name}:<span class="map-tooltip-value">${data.value}%</span></div>
+      </div>`;
+    },
+  },
+};
+</script>
+<style  lang="scss" scoped>
+.form-wrapper {
+  margin-bottom: 20px;
+}
+/deep/ .el-input__inner {
+  background: #2d3744;
+  border: none;
+  border-radius: 0;
+}
+/deep/ .el-select {
+  height: 40px;
+  .el-input__inner {
+    height: 40px;
+  }
+  .el-input__prefix, .el-input__suffix {
+    height: 40px;
+  }
+
+  /* 下面设置右侧按钮居中 */
+  .el-input__suffix {
+    top: 0px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    align-content: flex-start;
+  }
+  /* 输入框加上上下边是 32px + 2px =34px */
+  .el-input__icon {
+    line-height: 0px;
+  }
+}
+/deep/ .form-wrapper .el-button {
+  background: linear-gradient(90deg,#0158d9,#3c97e4);
+  width: 100px;
+  height: 40px;
+}
+.body-wrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: #0c0c0c;
+}
+</style>
+<style lang="less" scoped>
+.middle-map {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  .bottom {
+    height: 90%;
+    width: 100%;
+  }
+  /deep/.map-tooltip {
+    font-size: 18px;
+    padding: 10px 20px;
+    background: url("../../../../static/img/u231.png");
+    background-size: 100% 100%;
+    .map-tooltip-name {
+      color: #00e4ff;
+    }
+    .map-tooltip-value {
+      color: white;
+      margin-left: 20px;
+    }
+  }
+}
+
+</style>

src/pages/index/layouts/indexLayout.vue

@@ -88,6 +88,8 @@ export default {
         {name: '经营情况', url: '/business_conditions'},
         {name: '事件监测', url: '/event_monitoring'},
         {name: '资源接入', url: '/resource_access'},
+        // 以下为运营管理平台
+        {name: '停车场热力图', url: '/parking_heatmap'},
       ]
     }
   },

src/router/index.js

@@ -282,6 +282,12 @@ export default new Router({
           path: "/resource_access",
           component: () => import("../pages/index/components/resource_access.vue")
         },
+        // 以下为运营管理平台
+        {
+          name: "parking_heatmap",
+          path: "/parking_heatmap",
+          component: () => import("../pages/index/components/parking_heatmap.vue")
+        },
       ]
     }
   ]