From 69f2d2c862a46f5681eac59979bbc35746ac94da Mon Sep 17 00:00:00 2001
From: lucky <srf428110@163.com>
Date: Tue, 15 Dec 2020 19:23:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=B1=E8=A5=BF=E5=9C=B0=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Map/Map.js     |  52 +++++++++++++
 src/components/Map/Map.vue    | 137 ++++++++++++++++++++++++++++++++++
 src/main.js                   |   1 +
 src/plugins/ant-design-vue.js |   2 +
 src/views/Index/Index.vue     |   9 ++-
 5 files changed, 198 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Map/Map.js
 create mode 100644 src/components/Map/Map.vue

diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
new file mode 100644
index 0000000..7ad96f3
--- /dev/null
+++ b/src/components/Map/Map.js
@@ -0,0 +1,52 @@
+var option = {
+  series: [
+    {
+      type: 'map3D',
+      name: '山西',
+      selectedMode: 'single', //地图高亮单选
+      boxDepth: 90, //地图倾斜度
+      regionHeight: 8, //地图高度
+      map: '山西',
+      viewControl: {
+        distance: 150, //地图视角 控制初始大小
+        rotateSensitivity: 0, //禁止旋转
+        zoomSensitivity: 0, //禁止缩放
+      },
+      label: {
+        show: true, //是否显示市
+        textStyle: {
+          color: '#0a1640', //文字颜色
+          fontSize: 12, //文字大小
+          backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
+        },
+      },
+      itemStyle: {
+        color: '#81d0f1', //地图颜色
+        borderWidth: 0.5, //分界线wdith
+        borderColor: '#459bca', //分界线颜色
+      },
+      emphasis: {
+        label: {
+          show: true, //是否显示高亮
+          textStyle: {
+            color: '#fff', //高亮文字颜色
+          },
+        },
+        itemStyle: {
+          color: '#0489d6', //地图高亮颜色
+        },
+      },
+      //高亮市区  echarts  bug 不生效
+      regions: [
+        {
+          name: '运城市',
+          itemStyle: {
+            areaColor: '#f00',
+          },
+        },
+      ],
+    },
+  ],
+};
+
+export default option;
diff --git a/src/components/Map/Map.vue b/src/components/Map/Map.vue
new file mode 100644
index 0000000..6759b73
--- /dev/null
+++ b/src/components/Map/Map.vue
@@ -0,0 +1,137 @@
+<template>
+  <div :style="{ width: 'width', height: 'height' }" class="chart-box">
+    <div id="myEchart" ref="myEchart" style="width: 100%;height:100%;"></div>
+  </div>
+</template>
+
+<script>
+import option from './Map.js';
+
+export default {
+  name: 'Map',
+  data() {
+    return {
+      width: '',
+      height: '',
+    };
+  },
+  mounted() {
+    console.log('地图');
+    this.drawLine();
+    let wh = window.innerWidth;
+    let hg = window.innerHeight;
+    this.width = wh + 'px';
+    this.height = hg + 'px';
+    console.log(this.height);
+    window.onresize = () => {
+      return (() => {
+        wh = window.innerWidth;
+        hg = window.innerHeight;
+        this.width = wh + 'px';
+        this.height = hg + 'px';
+      })();
+    };
+  },
+  beforeDestroy() {
+    if (!this.myChart) {
+      return;
+    }
+    this.myChart.dispose();
+    this.myChart = null;
+  },
+  methods: {
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      let myChart = this.$echarts.init(document.getElementById('myEchart'));
+      // 绘制图表
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="stylus" scoped>
+/* 懒加载图标动画 */
+.demo-spin-icon-load {
+  animation: ani-demo-spin 1s linear infinite;
+}
+
+@keyframes ani-demo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 弹窗样式 */
+.layer {
+  position: absolute;
+  left: 400px;
+  top: 300px;
+  z-index: 100;
+  width: 360px;
+  height: 280px;
+  background: rgba(10, 22, 64, 0.9);
+  border-radius: 5px;
+  border: 1px solid #122253;
+  transform: translate(-100%, -100%);
+
+  .content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    text-align: center;
+
+    p {
+      font-size: 20px;
+      color: #fff;
+      line-height: 50px;
+    }
+
+    .col-item {
+      height: 41px;
+      margin-top: 20px;
+      border-right: 1px solid #172353;
+
+      .num {
+        color: #ebf8ff;
+        font-size: 18px;
+      }
+
+      .text {
+        color: #507ebc;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .content::after {
+    content: '';
+    width: 120px;
+    height: 2px;
+    background: #FFCCFF;
+    position: absolute;
+    right: -120px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .content::before {
+    content: '';
+    width: 2px;
+    height: 80px;
+    background: #FFB800;
+    position: absolute;
+    right: -134px;
+    top: 136px;
+    transform: rotateZ(-20deg);
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 6143374..321c40d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,6 +9,7 @@ import './plugins/ant-design-vue.js';
 import 'common/portrait.styl';
 import echarts from 'echarts';
 import 'echarts-gl';
+import 'echarts/map/js/province/shanxi.js'; //对应的省份
 // Vue.use(echarts);
 Vue.prototype.$echarts = echarts;
 // import './assets/icon/iconfont.css';
diff --git a/src/plugins/ant-design-vue.js b/src/plugins/ant-design-vue.js
index 2a1d73b..39119e5 100644
--- a/src/plugins/ant-design-vue.js
+++ b/src/plugins/ant-design-vue.js
@@ -28,6 +28,7 @@ import {
   BackTop,
   Progress,
   carousel,
+  Spin,
 } from 'ant-design-vue';
 import { ConfigProvider } from 'ant-design-vue';
 Vue.component(ConfigProvider.name, ConfigProvider);
@@ -57,6 +58,7 @@ Vue.use(Checkbox);
 Vue.use(BackTop);
 Vue.use(Progress);
 Vue.use(carousel);
+Vue.use(Spin);
 
 Vue.prototype.$message = message;
 Vue.prototype.$notification = notification;
diff --git a/src/views/Index/Index.vue b/src/views/Index/Index.vue
index 33c2628..e489e77 100644
--- a/src/views/Index/Index.vue
+++ b/src/views/Index/Index.vue
@@ -51,7 +51,9 @@
         </div>
         <div class="flex-2 ma-2">
           <!-- <iframe src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"></iframe> -->
-          <div class="bg s-pic"></div>
+          <shanxi-map />
+          <!-- <div class="bg s-pic"> -->
+          <!-- </div> -->
         </div>
         <div class="flex-1 ma-2">
           <div class="d-flex flex-column flex-1">
@@ -118,6 +120,7 @@
 </template>
 
 <script>
+import socketMixin from '@/mixins/socket';
 import Statistics from 'components/Statistics/Statistics.vue';
 import Duration from 'components/Duration/Duration.vue';
 import Sensor from 'components/Sensor/Sensor.vue';
@@ -125,11 +128,11 @@ import LoadCells from 'components/LoadCells/LoadCells.vue';
 import RFID from 'components/RFID/RFID.vue';
 import FastEd from 'components/FastEd/FastEd.vue';
 import Panel from 'components/Panel/Panel.vue';
-import socketMixin from '@/mixins/socket';
+import ShanxiMap from 'components/Map/Map.vue';
 
 export default {
   name: 'Index',
-  components: { Statistics, Duration, Sensor, LoadCells, RFID, FastEd, Panel },
+  components: { Statistics, Duration, Sensor, LoadCells, RFID, FastEd, Panel, ShanxiMap },
   mixins: [socketMixin],
   data() {
     return {