数据对接首页看板

public/static/config.js

@@ -1,8 +1,8 @@
 // api 请求路径
 var PLATFROM_CONFIG = {};
-// PLATFROM_CONFIG.baseUrl = "http://172.16.120.155:8010/" //杨强本地
-// PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
-PLATFROM_CONFIG.baseUrl = "http://124.71.174.104:80/api" //线上
+PLATFROM_CONFIG.baseUrl = "http://172.16.120.155:8010/" //杨强本地
+    // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/"  //超博本地
+    // PLATFROM_CONFIG.baseUrl = "http://124.71.174.104:80/api" //线上
 
 
 // 当前站点 siteId 信息存储

src/api/home/home.js

@@ -0,0 +1,65 @@
+import request from '@/utils/request'
+
+
+export default {
+    // 站点总数数据请求
+    alarmCount_api(params) {
+        return request({
+            url: `alarmPower/count`,
+            method: 'GET',
+            params: params
+        })
+    },
+    // 运维人员
+    personalCount_api(params) {
+        return request({
+            url: `personnel/count`,
+            method: 'GET',
+            params: params
+        })
+    },
+    // 站点总数
+    siteCount_api(params) {
+        return request({
+            url: `site/count`,
+            method: 'GET',
+            params: params
+        })
+    },
+
+    // 设备数量echarts饼图
+    deviceTypeCount_api(params) {
+        return request({
+            url: `device/count`,
+            method: 'GET',
+            params: params
+        })
+    },
+
+    // 故障数量echarts折线图
+    trendIco_api(params) {
+        return request({
+            url: `alarmPower/trendIco`,
+            method: 'GET',
+            params: params
+        })
+    },
+
+    // 重载运行echarts锥形图
+    rtAnalogData_api(params) {
+        return request({
+            url: `rtAnalogData/count`,
+            method: 'GET',
+            params: params
+        })
+    },
+
+    // 地图撒点
+    siteList_api(params) {
+        return request({
+            url: `site/list`,
+            method: 'GET',
+            params: params
+        })
+    },
+}

src/assets/css/index.css

@@ -66,12 +66,12 @@ header {
     background-position: 20% 0;
     background-size: cover;
     min-width: 1024px;
-    max-width: 1920px;
+    /* max-width: 1920px; */
 }
 
 .mainbox {
     min-width: 1024px;
-    max-width: 1920px;
+    /* max-width: 1920px; */
     padding: 0.125rem 0.125rem 0;
     height: calc(100vh - 1.125rem);
     color: #fff;
@@ -599,6 +599,7 @@ p {
     border: 1px solid #0df4fe;
     padding: .05rem .12rem;
     cursor: pointer;
+    font-size: .15rem
 }
 
 
@@ -672,10 +673,55 @@ p {
     box-shadow: inset 0 0 0.1rem 0.0125rem rgb(0 244 253 / 60%);
 }
 
+.amap-info .siteModelBox {
+    height: 3.5rem
+}
+
 .siteIcon:hover {
     opacity: .7
 }
 
+.siteModelBox {
+    padding: 0 0.1875rem;
+    position: relative;
+    z-index: 999;
+}
+
+.siteModelBox h2 {
+    font-size: 0.2rem;
+    color: #0df4fe;
+    line-height: 0.6rem;
+    position: static;
+    text-align: left;
+}
+
+.siteModelBox h2 .close {
+    position: absolute;
+    right: 0.125rem;
+    top: 0.125rem;
+    cursor: pointer;
+}
+
+.siteModelBox h2 .close:hover {
+    opacity: 0.7;
+}
+
+.siteModelBox .infoLine {
+    margin: 0.15rem 0;
+}
+
+.siteModelBox .infoLine span {
+    float: left;
+    color: #0df4fe;
+    display: inline-block;
+    text-align: right;
+    width: 1.4rem;
+}
+
+.siteModelBox .infoLine p {
+    padding-left: 1.4rem;
+}
+
 
 /* 站点信息弹框 end */
 

src/views/home/components/lineChart.vue

@@ -5,9 +5,11 @@
 import * as echarts from "echarts";
 
 export default {
-  props: {},
+  props: ['ftrendIcoCount'],
   data() {
-    return {};
+    return {
+
+    };
   },
 
   mounted() {
@@ -26,10 +28,11 @@ export default {
       var chart = echarts.init(this.$refs.distion);
       var option;
 
-      var arr = new Array();
-      for (var i = 0; i < 32; i++) {
-        arr.push(i);
-      }
+      // var arr = new Array();
+      // for (var i = 0; i < 32; i++) {
+      //   arr.push(i);
+      // }
+      var arr=this.ftrendIcoCount[0].listDate;
 
       option = {
         color: ["#00F4FD", "#FD8F00"],
@@ -90,28 +93,29 @@ export default {
         },
         series: [
           {
-            name: "故障数量",
+            // name: "故障数量",
+            name:this.ftrendIcoCount[0].name,
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[0],
-            data: [
-              24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
-              230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
-              24, 40, 101, 134, 90, 230,
-            ],
+            data: this.ftrendIcoCount[0].list,
+            // data: [
+            //   24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120, 230, 210,
+            //   230, 120, 230, 210, 120, 120, 230, 210, 230, 120, 230, 210, 120,
+            //   24, 40, 101, 134, 90, 230,
+            // ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',
           },
           {
-            name: "故障抢修数量",
+            name:this.ftrendIcoCount[1].name,
             type: "line",
             smooth: false, // 曲线是否平滑显示
-            // data: yearData[0].data[1],
-            data: [
-              30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
-              240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
-              130, 30, 50, 110, 144, 110, 240, 228, 240,
-            ],
+           data: this.ftrendIcoCount[1].list,
+            // data: [
+            //   30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130, 110,
+            //   240, 228, 240, 130, 240, 220, 130, 240, 228, 240, 130, 240, 220,
+            //   130, 30, 50, 110, 144, 110, 240, 228, 240,
+            // ],
             symbolSize: 6, //拐点圆的大小
             // symbol: 'circle',
           },

src/views/home/components/mapStaticTop.vue

@@ -3,31 +3,41 @@
     <ul>
       <li>
         <div>
-          <p><span class="num static">36</span></p>
+          <p><span class="num static">{{fsiteCount.normalCount}}</span></p>
           <p>站点总数</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num offLine">36</span></p>
+          <p><span class="num offLine">{{fsiteCount.offLineCount}}</span></p>
           <p>离线站点</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num error">36</span></p>
+          <p><span class="num error">{{fsiteCount.faultCount}}</span></p>
           <p>故障站点</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num alarm">36</span></p>
+          <p><span class="num alarm">{{fsiteCount.deviceCount}}</span></p>
           <p>告警站点</p>
         </div>
       </li>
     </ul>
   </div>
 </template>
+<script>
+export default {
+  props: ["fsiteCount"],
+  name: "",
+  components: {},
+  methods: {
+ 
+  },
+};
+</script>
 <style lang="scss">
 .mapStaticTop {
   position: absolute;

src/views/home/components/pieChart.vue

@@ -1,42 +1,22 @@
 <template>
-
   <div ref="distion" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
 
 export default {
-  props: {
-    // className: {
-    //   type: String,
-    //   default: "chart",
-    // },
-    // width: {
-    //   type: String,
-    //   default: "100%",
-    // },
-    // height: {
-    //   type: String,
-    //   default: "400px",
-    // },
-    // perData: {
-    //   type: Array,
-    //   default: () => [
-    //     {
-    //       color: "#01ACFF",
-    //       name: "摄像头",
-    //       value: [39],
-    //       // nAmount: 566557.14,
-    //     },
-    //   ],
-    // },
-  },
+  props: ["fdeviceTypeCount"],
   data() {
-    return {};
+    return {
+      deviceTypeCount: this.fdeviceTypeCount,
+    };
   },
 
   mounted() {
     this.$nextTick(() => {
+      // console.log("子组件中");
+      // console.log(this.deviceTypeCount);
+      // console.log(this.deviceTypeCount.normalCount);
       this.initChart();
     });
   },
@@ -48,30 +28,27 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
+      // console.log(this.fdeviceTypeCount)
       var chart = echarts.init(this.$refs.distion);
       var option;
 
       var pie = [
         {
-          value: 50,
+          value: this.deviceTypeCount.normalCount,
           name: "正常",
         },
         {
-          value: 150,
+          value:this.deviceTypeCount.faultCount,
           name: "故障",
         },
         {
-          value: 100,
+          value:this.deviceTypeCount.offLineCount,
           name: "离线",
         },
         {
-          value: 100,
+          value: this.deviceTypeCount.deviceCount,
           name: "预警",
         },
-        {
-          value: 100,
-          name: "其他",
-        },
       ];
       var totalNum = 0;
       pie.forEach(function (value) {
@@ -79,8 +56,7 @@ export default {
       });
 
       option = {
-        grid: {
-        },
+        grid: {},
 
         title: [
           {
@@ -93,15 +69,14 @@ export default {
                   fontSize: 30,
                   fontWeight: "normal",
                   color: "#FFFFFF",
-                  fontFamily:"impact",
-                   padding: [0, 0,3,0]
-
+                  fontFamily: "impact",
+                  padding: [0, 0, 3, 0],
                 },
                 val: {
                   fontSize: 14,
                   fontWeight: "normal",
                   color: "#FFFFFF",
-                  padding: [3,0,0, 0]
+                  padding: [3, 0, 0, 0],
                 },
               },
             },
@@ -135,8 +110,8 @@ export default {
             label: {
               normal: {
                 show: true,
-                 textStyle:{
-                  color:'#fff'
+                textStyle: {
+                  color: "#fff",
                 },
                 formatter: " {b}：{c} ",
               },
@@ -146,7 +121,7 @@ export default {
             },
             name: "访问来源",
             radius: ["45%", "67%"],
-            type: "pie", 
+            type: "pie",
             data: pie,
           },
         ],

src/views/home/components/statisTop.vue

@@ -3,13 +3,13 @@
     <ul>
       <li>
         <div>
-          <p><span class="num text-orange">135</span> 条</p>
+          <p><span class="num text-orange">{{falarmCount.count}}</span> 条</p>
           <p>告警总数</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num text-orange">50</span> 条</p>
+          <p><span class="num text-orange">{{falarmCount.unCount}}</span> 条</p>
           <p>未处理告警数</p>
         </div>
       </li>
@@ -18,13 +18,13 @@
     <ul>
       <li>
         <div>
-          <p><span class="num text-blue">100</span> 个</p>
+          <p><span class="num text-blue">{{fsiteCount.normalCount}}</span> 个</p>
           <p>总站点数</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num text-blue">1000</span> kW</p>
+          <p><span class="num text-blue">-</span> kW</p>
           <p>总实时负荷</p>
         </div>
       </li>
@@ -33,13 +33,13 @@
     <ul>
       <li>
         <div>
-          <p><span class="num text-yellow">36</span> 名</p>
+          <p><span class="num text-yellow">{{fpersonalCount.maintain}}</span> 名</p>
           <p>运维人员</p>
         </div>
       </li>
       <li>
         <div>
-          <p><span class="num text-yellow">8</span> 名</p>
+          <p><span class="num text-yellow">{{fpersonalCount.power}}</span> 名</p>
           <p>电力人员</p>
         </div>
       </li>
@@ -52,12 +52,11 @@
 </template>
 <script>
 export default {
-  name: "statisTop",
+  props: ["falarmCount","fpersonalCount","fsiteCount"],
+  name: "",
   components: {},
   methods: {
-    // Site_details(){
-    //   this.$router.push({ path: '/Site_details'});//, query: { title: title }
-    // }
+ 
   },
 };
 </script>

src/views/home/components/triangleChart.vue

@@ -1,20 +1,24 @@
 <template>
-
   <div ref="distion" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
 
 export default {
-  props: {
-  },
+  props: ["frtAnalogData"],
   data() {
     return {};
   },
 
   mounted() {
     this.$nextTick(() => {
+      console.log(1111111111);
+      console.log(this.frtAnalogData);
+      console.log(1111111111);
       this.initChart();
+      console.log("this.arr");
+      console.log(this.arr);
+      console.log("this.arr");
     });
   },
 
@@ -28,55 +32,84 @@ export default {
       var chart = echarts.init(this.$refs.distion);
       var option;
 
+      var arr = [
+        this.frtAnalogData.heavyLoad,
+        this.frtAnalogData.easyLoad,
+        this.frtAnalogData.norMalLoad,
+      ];
+      console.log(arr)
 
       option = {
         calculable: true,
-                color: ['#FF5656','#FFAF38','#00F4FD'],
-                series: [
-                    {
-                        name: '漏斗图',
-                        type: 'funnel',
-                        left: '10%',
-                        right: '30%',
-                        width: '50%',
-                        top: '0%',
-                        bottom: '0%',
-                        minSize: '0%',
-                        maxSize: '70%',
-                        sort: 'ascending',
-                        gap: 10,
-                        label: {
-                            show: true,
-                            formatter: " {b|{b}}    {a|{c}}",
-                            rich: {
-                                a: {
-                                    color: '#fff',
-                                    fontSize: 16
-                                },
-                                b: {
-                                    color: 'rgba(101,166,196,1)',
-                                    fontSize: 12
-                                }
-                            }
-                        },
-                        labelLine: {
-                            length: 60,
-                            lineStyle: {
-                                width: 1,
-                                type: 'solid'
-                            }
-                        },
-                        itemStyle: {  //去掉默认白色边框线
-                            borderWidth: 0,
-                            borderColor: '#fff'
-                        },
-                        data: [
-                            {value: 10, name: '重载运行'},
-                            {value: 20, name: '轻载运行'},
-                            {value: 30, name: '正常运行'},
-                        ]
-                    }
-                ]
+        color: ["#FF5656", "#FFAF38", "#00F4FD"],
+        series: [
+          {
+            name: "漏斗图",
+            type: "funnel",
+            left: "10%",
+            right: "30%",
+            width: "50%",
+            top: "0%",
+            bottom: "0%",
+            minSize: "0%",
+            maxSize: "70%",
+            sort: "ascending",
+            gap: 10,
+            label: {
+              show: true,
+              // formatter: " {b|{b}}    {a|{c}} ",
+              formatter: function (params) {
+                console.log("params");
+                console.log(params);
+
+                let a = params.data.name + "   ";
+                let b = params.data.reaVal;
+                return "{a|" + a + "}" + "{b|" + b + "}";
+              },
+              rich: {
+                a: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+                b: {
+                  color: "rgba(101,166,196,1)",
+                  fontSize: 20,
+                  marginLeft: "10",
+                  fontFamily: "impact",
+                },
+              },
+            },
+            labelLine: {
+              length: 60,
+              lineStyle: {
+                width: 1,
+                type: "solid",
+              },
+            },
+            itemStyle: {
+              //去掉默认白色边框线
+              borderWidth: 0,
+              borderColor: "#fff",
+            },
+            data: [
+              {
+                value: 10,
+                name: "重载运行",
+                reaVal: this.frtAnalogData.heavyLoad,
+              },
+              {
+                value: 20,
+                name: "轻载运行",
+                reaVal: this.frtAnalogData.easyLoad,
+              },
+              {
+                value: 30,
+                name: "正常运行",
+                reaVal: this.frtAnalogData.norMalLoad,
+              },
+            ],
+          },
+        ],
       };
 
       chart.setOption(option);

src/views/home/index.vue

@@ -4,12 +4,16 @@
       <!-- topBox start -->
       <div class="topBox">
         <div class="column statisSec">
-          <statis-top></statis-top>
+          <statis-top :falarmCount="alarmCount" :fpersonalCount="personalCount" :fsiteCount="siteCount"></statis-top>
           <statis-bottom></statis-bottom>
         </div>
         <div class="column mapBox">
-          <div class="map panel" id="mapF" style="height:100%;z-index:999999999999;width:100%">
-            <map-static-top></map-static-top>
+          <div
+            class="map panel"
+            id="mapF"
+            style="height: 100%; z-index: 999999999999; width: 100%"
+          >
+            <map-static-top :fsiteCount="siteCount"></map-static-top>
             <div id="pickerBox">
               <input id="pickerInput" placeholder="输入关键字选取地点" />
               <i class="el-icon-search"></i>
@@ -26,24 +30,23 @@
                 <option value="4">月</option>
               </select>
             </div>
-            <pie-chart></pie-chart>
+            <pie-chart :fdeviceTypeCount="deviceTypeCount" v-if="this.deviceTypeCount.normalCount"></pie-chart>
             <div class="panel-footer"></div>
           </div>
           <div class="panel line1 operStatus">
-            <triangle-chart></triangle-chart>
+            <triangle-chart :frtAnalogData="rtAnalogData"  v-if="this.rtAnalogData.heavyLoad"></triangle-chart>
             <!-- <div class="chart"></div> -->
             <div class="panel-footer"></div>
           </div>
         </div>
       </div>
-       <!-- topBox end -->
-
+      <!-- topBox end -->
 
       <!-- bottomBox start -->
       <div class="bottomBox">
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
-             <div class="filterSec">
+            <div class="filterSec">
               <select name="" id="">
                 <option value="1">当日用量趋势</option>
                 <option value="2">当月用量趋势</option>
@@ -55,19 +58,18 @@
         </div>
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
-             <div class="filterSec">
+            <div class="filterSec">
               <select name="" id="">
                 <option value="11">日</option>
                 <option value="22">月</option>
               </select>
             </div>
-            <line-chart></line-chart>
+            <line-chart :ftrendIcoCount="trendIcoCount" v-if="this.trendIcoCount[0]"></line-chart>
             <div class="panel-footer"></div>
           </div>
         </div>
       </div>
       <!-- bottomBox end -->
-
     </section>
   </div>
 </template>
@@ -80,25 +82,100 @@ import lineChart from "./components/lineChart";
 import mapStaticTop from "./components/mapStaticTop";
 import triangleChart from "./components/triangleChart";
 
-
 // 地图
 import AMap from "AMap";
 import AMapUI from "AMapUI";
 
+import api from "../../api/home/home.js";
 
 export default {
   name: "index",
-  components: { statisTop, statisBottom, pieChart, barChart, lineChart ,mapStaticTop,triangleChart},
+  components: {
+    statisTop,
+    statisBottom,
+    pieChart,
+    barChart,
+    lineChart,
+    mapStaticTop,
+    triangleChart,
+  },
   data() {
     return {
       map: null,
+      alarmCount:{},
+      personalCount:{},
+      siteCount:{},
+      deviceTypeCount:{},
+      trendIcoCount:[],
+      rtAnalogData:{}
+
     };
   },
   created() {},
   mounted() {
     this.initMap();
+    this.alarmCount_api();
+    this.personalCount_api();
+    this.siteCount_api();
+    this.deviceTypeCount_api()
+    this.trendIcoCount_api();
+    this.rtAnalogData_api();
+    // this.siteList_api();
   },
   methods: {
+
+    //告警总数数据对接
+    alarmCount_api() {
+      api.alarmCount_api().then((requset) => {
+        this.alarmCount=requset.data;
+      });
+    },
+     //运维人员
+    personalCount_api() {
+      api.personalCount_api().then((requset) => {
+        this.personalCount=requset.data;
+      });
+    },
+     //站点总数
+    siteCount_api() {
+      api.siteCount_api().then((requset) => {
+        this.siteCount=requset.data;
+      });
+    },
+
+     //设备数量echarts饼图
+    deviceTypeCount_api() {
+      api.deviceTypeCount_api({startTime:'2021-6-12 00:00:00',endTime:'2021-7-16 00:00:00',}).then((requset) => {
+        this.deviceTypeCount=requset.data;
+        // console.log(this.deviceTypeCount)
+      });
+    },
+     //故障抢修echarts折线图
+    trendIcoCount_api() {
+      api.trendIco_api({startTime:'2021-6-12 00:00:00',endTime:'2021-7-16 00:00:00'}).then((requset) => {
+        this.trendIcoCount=requset.data;
+        // console.log(this.trendIcoCount)
+      });
+    },
+     //重载运行echarts锥形图
+    rtAnalogData_api() {
+      api.rtAnalogData_api().then((requset) => {
+        this.rtAnalogData=requset.data;
+        console.log(this.rtAnalogData)
+      });
+    },
+     //地图撒点
+    siteList_api() {
+      api.siteList_api().then((requset) => {
+        this.siteList=requset.data;
+        console.log(this.siteList)
+      });
+    },
+
+
+
+
+
     Overview() {
       // this.$router.push({ path: "/Overview" }); //, query: { title: title }
     },
@@ -111,6 +188,8 @@ export default {
         // features: [] //清空背景道路等
       });
       this.initMapUi();
+
+
       this.addMarker(
         [
           {
@@ -151,42 +230,34 @@ export default {
         "water"
       );
     },
-    addMarker(lnglats, type = "") {
+
+
+    addMarker(lnglats) {
       // 创建标点和点击事件
       // let icon = "";
       let markers = lnglats.map((val, ind) => {
-        if (type === "water") {
-          // icon =
-          //   val.waterAdministrative === "单位"
-          //     ? "http://120.55.70.156/image/unitWater.png"
-          //     : val.waterAdministrative === "市政"
-          //     ? "http://120.55.70.156/image/szWater.png"
-          //     : val.waterAdministrative === "社区" ||
-          //       val.waterAdministrative === "居民"
-          //     ? "http://120.55.70.156/image/sqWater.png"
-          //     : "";
-        }
         let marker = new AMap.Marker({
           position: new AMap.LngLat(val.gisX, val.gisY),
-          // icon: icon,
           zIndex: 9,
           extData: {
             id: ind + 1,
           },
         });
         marker.on("click", async () => {
-          console.log([val.gisX, val.gisY], null, val);
+          // console.log([val.gisX, val.gisY], null, val);
           await this.addMarkerInfo([val.gisX, val.gisY], null, val);
-          // console.log(222);
         });
         return marker;
       });
       this.map.add(new AMap.OverlayGroup(markers));
       this.map.setFitView(); // 根据所有点自适应
     },
+
+
     // 添加标点
     addMarkerInfo(position, content, value = "") {
       // this.map.getIsOpen();
+      // console.log('value');
       console.log(value);
       this.map.clearInfoWindow();
       var infoWindow = new AMap.InfoWindow({
@@ -195,26 +266,53 @@ export default {
         content:
           content ||
           `
-                <div class="tableTooltip mapTab" >
-                  <div class="tableTitle">
-                    <div>${"测试站点1"}</div>
+               <div class="siteModelBox" >
+                  <h2>
+                    站点信息
+                  </h2>
+                  <div v-for="item in addMarker" :key="item.id>
+                  
+                   <div class="siteDetailInfo" >
+                    <div class="infoLine">
+                      <span>站点名称：</span>
+                      <p>培训测试</p>
+                    </div>
+                    <div class="infoLine">
+                      <span>站点地址：</span>
+                      <p>上海市青浦区徐乐路208号</p>
+                    </div>
+                    <div class="infoLine">
+                      <span>投运时间：</span>
+                      <p>2021-06-30</p>
+                    </div>
+                    <div class="infoLine">
+                      <span>监控类型：</span>
+                      <p>电力、视频</p>
+                    </div>
+                    <div class="infoLine">
+                      <span>联系人：</span>
+                      <p>张三</p>
+                    </div>
+                    <div class="infoLine">
+                      <span>联系电话：</span>
+                      <p>13999999999</p>
+                    </div>
+                  </div>
+                  
+                  
+                  
+                  
+                  
+                  
                   </div>
-                  <el-row class="tableContent">
-                    <div><a>站点状态：</a>${"正常"}</div>
-                    <div><a>设备总数：</a>${"5"}</div>
-                    <div><a>告警数：</a>${"3"}</div>
-                    <div><a>监控类型：</a>${"电力，视频"}</div>
-                    <div><a> 电话：</a>${"18888888888"}</div>
-                    <div><a> 地址：</a>${"XX路135弄"}</div>
-                    <bottom onclick="${this.Overview()}">11111</bottom>
-                  </el-row>
+                 
                 </div>`,
         offset: new AMap.Pixel(16, -30),
       });
       infoWindow.open(this.map, position);
     },
     poiPickerReady(poiPicker) {
-      console.log(poiPicker);
+      // console.log(poiPicker);
       var marker = new AMap.Marker();
 
       var infoWindow = new AMap.InfoWindow({
@@ -252,15 +350,12 @@ export default {
       });
     },
     initMapUi() {
-      console.log(22);
       AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
-        console.log(PoiPicker);
+        // console.log(PoiPicker);
         let poiPickers = new PoiPicker({
-          //city:'北京',
           input: "pickerInput",
         });
 
-        //初始化poiPicker
         this.poiPickerReady(poiPickers);
       });
     },
@@ -272,98 +367,95 @@ export default {
 #pickerBox {
   position: absolute;
   z-index: 9999;
-  top:.15rem;
-  right:.15rem;
-   width: 3rem;
-  height:.425rem;
-  font-size:.15rem
- 
+  top: 0.15rem;
+  right: 0.15rem;
+  width: 3rem;
+  height: 0.425rem;
+  font-size: 0.15rem;
 }
- .el-icon-search{
+.el-icon-search {
   position: absolute;
-    right: .1375rem;
-    top: .1rem;
-    font-size: .2125rem;color: #00f4fd
+  right: 0.1375rem;
+  top: 0.1rem;
+  font-size: 0.2125rem;
+  color: #00f4fd;
 }
 
 #pickerInput {
   width: 3rem;
-  line-height:.425rem;
-  padding:0 .125rem;
-  outline:none;
+  line-height: 0.425rem;
+  padding: 0 0.125rem;
+  outline: none;
   border: 1px solid #00f4fd;
-border-radius: 18px;
-background:rgba(0,0,0,0);
-color:#fff;
-
+  border-radius: 18px;
+  background: rgba(0, 0, 0, 0);
+  color: #fff;
 }
 
 #poiInfo {
   background: #fff;
 }
 /* 地图弹窗 */
-.mapTab {
-  background: transparent;
-  border-radius: 3%;
-  box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
-  background: rgba(0, 44, 110, 0.5);
-  // box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
-  // background: rgba(0, 44, 110, 0.8);
-  font-size: 0.2rem;
-  padding: 0.1875rem;
-  width: 5rem;
-  font-size: 0.1875rem;
-  font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
-  width: 3.5rem;
-  scrollbar-width: none;
-  /* firefox */
-  -ms-overflow-style: none;
-  /* IE 10+ */
-  overflow-x: hidden;
-  overflow-y: auto;
-  .tableTitle {
-    // background: url('~@a/img/comprehensive/title.png');
-    background-size: 100% 100%;
-    & > div {
-      line-height: 0.4rem;
-      background-image: linear-gradient(#caf6ff, #56d1ed);
-      -webkit-background-clip: text;
-      color: transparent;
-      -webkit-text-fill-color: transparent;
-      font-weight: 900;
-    }
-  }
-  .tableContent {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: 0.125rem;
-    div {
-      width: 100%;
-      padding-right: 0.25rem;
-      line-height: 0.275rem;
-      box-sizing: border-box;
-      // margin: 0.0625rem 0;
-      a {
-        width: 0.875rem;
-        font-size: 0.175rem;
-        text-align: right;
-        display: inline-block;
-        color: #00f4fd;
-        cursor: pointer;
-      }
-    }
-    .max {
-      width: 100%;
-    }
-    .divTitle {
-      color: #04f2f4;
-    }
-  }
-  &::-webkit-scrollbar {
-    display: none;
-    /* Chrome Safari */
-  }
-}
-
-
+// .mapTab {
+//   background: transparent;
+//   border-radius: 3%;
+//   box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+//   background: rgba(0, 44, 110, 0.5);
+//   // box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+//   // background: rgba(0, 44, 110, 0.8);
+//   font-size: 0.2rem;
+//   padding: 0.1875rem;
+//   width: 5rem;
+//   font-size: 0.1875rem;
+//   font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+//   width: 3.5rem;
+//   scrollbar-width: none;
+//   /* firefox */
+//   -ms-overflow-style: none;
+//   /* IE 10+ */
+//   overflow-x: hidden;
+//   overflow-y: auto;
+//   .tableTitle {
+//     // background: url('~@a/img/comprehensive/title.png');
+//     background-size: 100% 100%;
+//     & > div {
+//       line-height: 0.4rem;
+//       background-image: linear-gradient(#caf6ff, #56d1ed);
+//       -webkit-background-clip: text;
+//       color: transparent;
+//       -webkit-text-fill-color: transparent;
+//       font-weight: 900;
+//     }
+//   }
+//   .tableContent {
+//     display: flex;
+//     flex-wrap: wrap;
+//     margin-top: 0.125rem;
+//     div {
+//       width: 100%;
+//       padding-right: 0.25rem;
+//       line-height: 0.275rem;
+//       box-sizing: border-box;
+//       // margin: 0.0625rem 0;
+//       a {
+//         width: 0.875rem;
+//         font-size: 0.175rem;
+//         text-align: right;
+//         display: inline-block;
+//         color: #00f4fd;
+//         cursor: pointer;
+//       }
+//     }
+//     .max {
+//       width: 100%;
+//     }
+//     .divTitle {
+//       color: #04f2f4;
+//     }
+//   }
+//   &::-webkit-scrollbar {
+//     display: none;
+//     /* Chrome Safari */
+//   }
+// }
 </style>

src/views/site/components/Overview/modalBox.vue

@@ -63,38 +63,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.siteModelBox {
-  padding: 0 0.1875rem;
-  position: relative;
-  z-index:999;
 
-  h2 {
-    font-size: 0.2rem;
-    color: #0df4fe;
-    line-height: 0.6rem;
-    .close {
-      position: absolute;
-      right: 0.125rem;
-      top: 0.125rem;
-      cursor: pointer;
-    }
-    .close:hover {
-      opacity: 0.7;
-    }
-  }
-  .infoLine {
-    margin: 0.15rem 0;
-    //   line-height:1.5;
-    span {
-      float: left;
-      color: #0df4fe;
-      display: inline-block;
-      text-align: right;
-      width: 1.4rem;
-    }
-    p {
-      padding-left: 1.4rem;
-    }
-  }
-}
 </style>

test/index.html

@@ -12,7 +12,8 @@
         vue-webtopo-svgeditor
     </title>
 
-<link href="js/app.js" rel="preload" as="script"></head>
+    <link href="js/app.js" rel="preload" as="script">
+</head>
 
 <body>
     <noscript>
@@ -20,6 +21,7 @@
     </noscript>
     <div id="app"></div>
     <script src="./static/config.js"></script>
-<script type="text/javascript" src="js/app.js"></script></body>
+    <script type="text/javascript" src="js/app.js"></script>
+</body>
 
 </html>