地图

src/common/index.styl

@@ -21,6 +21,7 @@
     height: 100.64px;
     left: 1.5%;
     top: 0;
+    z-index: 9;
 }
 
 .wrap .bg-top .animation{

src/components/Map/Map.js

@@ -4,47 +4,53 @@ var option = {
       type: 'map3D',
       name: '山西',
       selectedMode: 'single', //地图高亮单选
-      boxDepth: 90, //地图倾斜度
-      regionHeight: 8, //地图高度
+      boxDepth: 230, //地图倾斜度
+      regionHeight: 6, //地图高度
       map: '山西',
       viewControl: {
-        distance: 150, //地图视角 控制初始大小
-        rotateSensitivity: 0, //禁止旋转
-        zoomSensitivity: 0, //禁止缩放
+        distance: 1000, //地图视角 控制初始大小
+        rotateSensitivity: 1, //禁止旋转
+        zoomSensitivity: 1, //禁止缩放
       },
       label: {
         show: true, //是否显示市
         textStyle: {
-          color: '#0a1640', //文字颜色
+          color: '#c8ced5', //文字颜色
           fontSize: 12, //文字大小
           backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
         },
       },
       itemStyle: {
-        color: '#81d0f1', //地图颜色
-        borderWidth: 0.5, //分界线wdith
+        color: 'rgb(18,57,90)', //地图颜色
+        borderWidth: 1, //分界线wdith
         borderColor: '#459bca', //分界线颜色
       },
       emphasis: {
         label: {
           show: true, //是否显示高亮
-          textStyle: {
-            color: '#fff', //高亮文字颜色
-          },
-        },
-        itemStyle: {
-          color: '#0489d6', //地图高亮颜色
+          textStyle: { color: '#fff' }, //高亮文字颜色
         },
+        itemStyle: { color: '#A7820D' }, //地图高亮颜色
       },
-      //高亮市区  echarts  bug 不生效
-      regions: [
+      data: [
         {
           name: '运城市',
-          itemStyle: {
-            areaColor: '#f00',
-          },
+          value: 0,
+          label: { textStyle: { color: '#fff' } }, //高亮文字颜色
+          itemStyle: { color: '#A7820D' }, //地图高亮颜色
         },
       ],
+      //高亮市区  echarts  bug 不生效
+      // regions: [
+      //   {
+      //     name: '运城',
+      //     itemStyle: {
+      //       borderWidth: 3,
+      //       areaColor: 'red',
+      //       color: 'red',
+      //     },
+      //   },
+      // ],
     },
   ],
 };

src/components/Map/Map.vue

@@ -22,7 +22,6 @@ export default {
     let hg = window.innerHeight;
     this.width = wh + 'px';
     this.height = hg + 'px';
-    console.log(this.height);
     window.onresize = () => {
       return (() => {
         wh = window.innerWidth;

src/components/RFID/RFID.styl

@@ -3,10 +3,8 @@
 }
 
 .list {
-width: 4.4rem;
+    width: 4.4rem;
     height: 4.4rem;
-    line-height: 4.4rem;
-  text-align: center;
     font-size: 12px;
     color: #C8CED5;
     background: url('~assets/rfid-bg.png') no-repeat center;
@@ -14,13 +12,26 @@ width: 4.4rem;
     position: absolute;
 }
 
+.list span{
+    display: inline-block;
+    position: relative;
+    top: 25%;
+    width: 100%;
+    height: 50%;
+    text-align: center;
+}
+
 .active {
-  width: 5rem;
-  height: 5rem;
-  line-height: 5rem;
+  width: 5.4rem;
+  height: 5.4rem;
   font-size: 12px;
   background: url('~assets/rfid-bg-active.png') no-repeat center;
   background-size: contain;
+  text-align: center;
+}
+
+.list.active span{
+    width: 80%;
 }
 
 .list1 {

src/components/RFID/RFID.vue

@@ -18,22 +18,14 @@ export default {
   data() {
     return {
       lists: [
-        { id: 1, active: false, name: '专科护士' },
-        { id: 2, active: false, name: '专科医生' },
-        { id: 3, active: false, name: '采血推车' },
-        { id: 4, active: false, name: '心电图推车' },
-        { id: 5, active: false, name: '介入室' },
-        { id: 6, active: false, name: 'CT室' },
-        { id: 7, active: false, name: '急救室' },
-        { id: 8, active: false, name: '急诊医生' },
-        { id: 9, active: false, name: '专科护士' },
-        { id: 10, active: false, name: '专科医生' },
-        { id: 11, active: false, name: '采血推车' },
-        { id: 12, active: false, name: '心电图推车' },
-        { id: 13, active: false, name: '介入室' },
-        { id: 14, active: false, name: 'CT室' },
-        { id: 15, active: false, name: '急救室' },
-        { id: 16, active: false, name: '急诊医生' },
+        { code: 1, active: false, name: '急救医生到场' },
+        { code: 1, active: false, name: '急救护士到场' },
+        { code: 3, active: false, name: '护士采血' },
+        { code: 3, active: false, name: '采血车到场' },
+        { code: 4, active: false, name: 'CT室' },
+        { code: 8, active: false, name: '介入室' },
+        { code: 8, active: false, name: '抢救室' },
+        { code: 8, active: false, name: '抢救室' },
       ],
       num: 0, //当前正在展示的div
     };
@@ -55,7 +47,7 @@ export default {
           // 翻页
           for (let a = 0; a < this.newArr.length; a++) {
             const arr = this.newArr[a];
-            const item = arr.find(item => item.id === element.id);
+            const item = arr.find(item => item.name === element.name);
             if (item) {
               this.num = a;
             }

src/views/Index/Index.vue

@@ -49,9 +49,12 @@
             </div>
           </div>
         </div>
-        <div class="flex-2 ma-2">
-          <!-- <iframe src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"></iframe> -->
-          <shanxi-map />
+        <div class="flex-2 ma-2" style="position:relative">
+          <iframe
+            class="fill-width fill-height"
+            src="https://www.thingjs.com/pp/6dab0a018283ef357a85684c"
+          ></iframe>
+          <shanxi-map class="sxmap" />
           <!-- <div class="bg s-pic"> -->
           <!-- </div> -->
         </div>
@@ -171,6 +174,19 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+iframe {
+  border: none !important;
+}
+
+.sxmap {
+  position: absolute;
+  top: -4rem;
+  right: -2rem;
+  z-index: 9;
+  width: 19rem;
+  height: 25rem;
+}
+
 .time {
   position: absolute;
   top: 2.5rem;