demo lid

pages/demo/lid/components/echart3.vue

+ <template>
+  <div id="myChart3" class="echarts_box8"></div>
+</template>
+    <script>
+export default {
+  name: "echart3",
+  data() {
+    return {};
+  },
+  methods: {
+    loadEchart() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = this.$echarts.init(document.getElementById("myChart3"));
+      var option = {
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        legend: {
+          orient: "horizontal",
+          left: "center",
+          top: "bottom",
+          data: ["异位报警", "可燃气超标", "有毒气体超标"],
+        },
+         color: ["#25cb7c", "#2ea0fb", "#00c9cb"],
+        series: [
+          {
+            name: "辖区内报警井盖状态",
+            type: "pie",
+            radius: ["20%", "30%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: true,
+              position: "top",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "30",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: true,
+            },
+            data: [
+              { value: 23, name: "异位报警" },
+              { value: 37, name: "可燃气超标" },
+              { value: 40, name: "有毒气体超标" },
+            ],
+          },
+        ],
+      };
+      // 绘制图表
+      myChart.setOption(option);
+    },
+  },
+  mounted() {
+    this.loadEchart();
+  },
+};
+</script>
+<style scoped>
+.echarts_box8 {
+  width: 300px;
+  height: 350px;
+  margin: 0 auto;
+  padding:0;
+}
+</style>
\ No newline at end of file

pages/demo/lid/components/sideEast.vue

+ <template>
+  <div class="demoDiv">
+    <Card style="width:100%; box-shadow: 0 0 10px #000;">
+      <p slot="title" class="tl">任务执行状态统计</p>
+      <div style="height:300px;">
+        <Echart3 class="echartPo" />
+      </div>
+    </Card>
+    <div class="mt30 treeDiv">
+      <Tree :data="data1"></Tree>
+    </div>
+  </div>
+</template>
+    <script>
+import Echart3 from "./echart3";
+export default {
+  name: "sideEast",
+  components: {
+    Echart3,
+  },
+  data() {
+    return {
+      data1: [
+        {
+          title: "XX局",
+          expand: true,
+          children: [
+            {
+              title: "西安客整所",
+              expand: true,
+              children: [
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+                {
+                  title: "XA12345678990001",
+                  expand: false,
+                  children: [{ title: "XA12345678990001-01" }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {},
+  mounted() {},
+};
+</script>
+<style scoped>
+.treeDiv {
+  width: 320px;
+  background: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 10px #000;
+  text-align: left;
+  padding: 20px;
+  height: 310px;
+  overflow: auto;
+}
+.demoDiv .ivu-card-head {
+  background: #dedde4;
+}
+.echartPo {
+  position: absolute;
+  top: -20px;
+  left: 15px;
+  z-index: 4;
+}
+</style>
\ No newline at end of file

pages/demo/lid/components/sideWest.vue

+ <template>
+  <div>
+    <div class="gradient" >
+    <p>井盖总数</p>
+    <p><span class="f20 fwBold">1234</span>个</p>
+    </div>
+    <div class="mt30 gradient1" >
+    <p>正常数量</p>
+    <p><span class="f20 fwBold">1204</span>个</p>
+    </div>
+    <div class="mt30 gradient2" >
+    <p>报警数量</p>
+    <p><span class="f20 fwBold">30</span>个</p>
+    </div>
+    <div class="mt30 demoDiv">
+     <Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
+            <p slot="title" class="tl">实时行车异常列车</p>
+          <div  class="divInfo">
+            <p>地址：山西省西安市未央区</p>
+            <p>设备名称：凤城五路11号井盖</p>
+            <p>报警时间：2020-06-06  08:08:08</p>
+            <p class="red">报警数值：甲烷浓度-55%</p>
+          </div>
+          <divider></divider>
+          <div  class="mt20 divInfo">
+            <p>地址：山西省西安市未央区</p>
+            <p>设备名称：凤城五路11号井盖</p>
+            <p>报警时间：2020-06-06  08:08:08</p>
+            <p class="red">报警数值：甲烷浓度-55%</p>
+          </div>
+          </Card>
+    </div>
+  </div>
+</template>
+    <script>
+export default {
+  name: "sideWest",
+  data() {
+    return {};
+  },
+  methods: {},
+  mounted() {},
+};
+</script>
+<style scoped>
+.gradient {
+  background: url(/imgshow/bg1.png) right top no-repeat,
+    -moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, #43aaf9),
+    color-stop(100%, #917dfb)
+  );
+  background: -webkit-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
+  background: -o-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
+  background: -ms-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
+  background: url(/imgshow/bg1.png) right top no-repeat,
+    linear-gradient(to right, #43aaf9 0%, #917dfb 100%);
+  border-radius: 5px;
+  box-shadow: 0 0 10px #000;
+  color: white;
+  height: 100px;
+  width: 300px;
+  text-align: left;
+  padding:20px ;
+}
+.gradient1 {
+  background: url(/imgshow/bg3.png) right top no-repeat,
+    -moz-linear-gradient(left, #05E99C 0%, #7CF538 100%);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, #05E99C),
+    color-stop(100%, #7CF538)
+  );
+  background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%);
+  background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%);
+  background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%);
+  background: url(/imgshow/bg3.png) right top no-repeat,
+    linear-gradient(to right, #05E99C 0%, #7CF538 100%);
+  border-radius: 5px;
+  box-shadow: 0 0 10px #000;
+  color: white;
+  height: 100px;
+  width: 300px;
+  text-align: left;
+  padding:20px ;
+}
+.gradient2 {
+  background: url(/imgshow/bg5.png) right top no-repeat,
+    -moz-linear-gradient(left, #F95577 0%, #FCA534 100%);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    color-stop(0%, #F95577),
+    color-stop(100%, #FCA534)
+  );
+  background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%);
+  background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%);
+  background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%);
+  background: url(/imgshow/bg5.png) right top no-repeat,
+    linear-gradient(to right, #F95577 0%, #FCA534 100%);
+  border-radius: 5px;
+  box-shadow: 0 0 10px #000;
+  color: white;
+  height: 100px;
+  width: 300px;
+  text-align: left;
+  padding:20px ;
+}
+.divInfo {
+  background: #fff;
+  padding: 0 20px;
+}
+.divInfo p {
+  text-align: left;
+  line-height: 26px;
+}
+.demoDiv .ivu-card-head {
+    background: #dedde4;
+}
+</style>
\ No newline at end of file

pages/demo/lid/index.vue

 <template>
   <div class="bm-lid">
+  <!--
     <div class="ad">
       <div class="count">
         <label>配属数量（列）</label>
@@ -30,13 +31,19 @@
         <div class="info fg">为京泸京广服务的动车所</div>
       </div>
       <div class="item">
-        <div class="block dot"  v-width="60"></div>
+        <div class="block dot" v-width="60"></div>
         <div class="info fg">目前不为京泸京广服务的动车所</div>
       </div>
       <div class="item">
-        <div class="block line"  v-width="60"></div>
+        <div class="block line" v-width="60"></div>
         <div class="info fg">规划中或在建动车所</div>
       </div>
+    </div>-->
+    <div class="sideWest">
+      <SideWest></SideWest>
+    </div>
+     <div class="sideEast">
+      <SideEast></SideEast>
     </div>
     <baidu-map
       class="map"
@@ -103,7 +110,9 @@ import BmNavigation from "vue-baidu-map/components/controls/Navigation";
 import BmMarkerClusterer from "vue-baidu-map/components/extra/MarkerClusterer";
 import BmMarker from "vue-baidu-map/components/overlays/Marker";
 import BmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
-import citys from '../city';
+import citys from "../city";
+import SideEast from "./components/sideEast";
+import SideWest from "./components/sideWest";
 export default {
   components: {
     BaiduMap,
@@ -111,7 +120,9 @@ export default {
     BmNavigation,
     BmMarkerClusterer,
     BmMarker,
-    BmInfoWindow
+    BmInfoWindow,
+    SideEast,
+    SideWest,
   },
   data() {
     return {
@@ -125,8 +136,8 @@ export default {
           { car: "CRH381A", count: 9 },
           { car: "CRH382A", count: 13 },
           { car: "CRH384A", count: 19 },
-          { car: "CRH388A", count: 24 }
-        ]
+          { car: "CRH388A", count: 24 },
+        ],
       },
       zoom: 1,
       eye: false,
@@ -138,75 +149,75 @@ export default {
             featureType: "land",
             elementType: "geometry",
             stylers: {
-              color: "#033361ff"
-            }
+              color: "#033361ff",
+            },
           },
           {
             featureType: "tertiaryway",
             elementType: "geometry",
             stylers: {
-              visibility: "off"
-            }
+              visibility: "off",
+            },
           },
           {
             featureType: "arterial",
             elementType: "geometry",
             stylers: {
-              visibility: "off"
-            }
+              visibility: "off",
+            },
           },
           {
             featureType: "cityhighway",
             elementType: "geometry",
             stylers: {
-              visibility: "off"
-            }
+              visibility: "off",
+            },
           },
           {
             featureType: "water",
             elementType: "geometry",
             stylers: {
-              color: "#4a90e2ff"
-            }
+              color: "#4a90e2ff",
+            },
           },
           {
             featureType: "districtlabel",
             elementType: "labels",
             stylers: {
-              visibility: "on"
-            }
+              visibility: "on",
+            },
           },
           {
             featureType: "districtlabel",
             elementType: "labels.icon",
             stylers: {
-              visibility: "on"
-            }
+              visibility: "on",
+            },
           },
           {
             featureType: "districtlabel",
             elementType: "labels.text.stroke",
             stylers: {
               weight: 0,
-              color: "#ffffff00"
-            }
+              color: "#ffffff00",
+            },
           },
           {
             featureType: "districtlabel",
             elementType: "labels.text.fill",
             stylers: {
               color: "#4a90e2ff",
-              weight: 10
-            }
+              weight: 10,
+            },
           },
           {
             featureType: "road",
             elementType: "geometry",
             stylers: {
-              visibility: "off"
-            }
-          }
-        ]
+              visibility: "off",
+            },
+          },
+        ],
       },
       map: null,
       markers: [],
@@ -223,10 +234,10 @@ export default {
             { car: "CRH381A", count: 9 },
             { car: "CRH382A", count: 13 },
             { car: "CRH384A", count: 19 },
-            { car: "CRH388A", count: 24 }
-          ]
-        }
-      }
+            { car: "CRH388A", count: 24 },
+          ],
+        },
+      },
     };
   },
   methods: {
@@ -242,7 +253,7 @@ export default {
       this.eye = !this.eye;
       let ps = [];
       if (this.eye) {
-        ps=citys;
+        ps = citys;
       }
       this.markers = ps;
     },
@@ -260,8 +271,8 @@ export default {
       // console.log('data',data)
       this.infoWindow.show = true;
       this.infoWindow.info = data;
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -345,12 +356,13 @@ export default {
     right: 100px;
     color: white;
     padding: 10px 10px 0 10px;
-    >p{
-        font-size: 14px;
-        font-weight: bold;
-        line-height: 40px;
+    > p {
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 40px;
     }
-    .item { 
+    
+    .item {
       .block {
         height: 40px;
         width: 60px;
@@ -358,11 +370,11 @@ export default {
         float: left;
         margin-right: 10px;
       }
-      .dot{
-          border: 1px dotted #ddd;
+      .dot {
+        border: 1px dotted #ddd;
       }
-      .line{
-          border: 1px dashed #ddd;
+      .line {
+        border: 1px dashed #ddd;
       }
       .info {
         padding-left: 20px;
@@ -371,6 +383,23 @@ export default {
       height: 60px;
     }
   }
+  .sideWest {
+      position: absolute;
+      width: 300px;
+      top: 40px;
+      left:30px;
+      text-align: center;
+      z-index: 4;
+    }
+    .sideEast
+    {
+       position: absolute;
+      width: 328px;
+      top: 40px;
+      right:30px;
+      text-align: center;
+      z-index: 4;
+    }
   .map {
     width: 100%;
     height: 100%;