'代码推送'

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;
@@ -618,6 +618,7 @@ p {
     border: 1px solid #0df4fe;
     padding: .05rem .12rem;
     cursor: pointer;
+    font-size: .15rem
 }
 
 
@@ -691,10 +692,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/barChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="distion" style="width: 100%; height: 100%"></div>
+  <div ref="barChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
@@ -23,7 +23,7 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.barChart);
       var option;
 
       option = {
@@ -178,6 +178,7 @@ export default {
       window.addEventListener("resize", () => {
         chart.resize();
       });
+      this.chart = chart;
     },
   },
 };

src/views/home/components/lineChart.vue

@@ -1,13 +1,15 @@
 <template>
-  <div ref="distion" style="width: 100%; height: 100%"></div>
+  <div ref="lineChart" style="width: 100%; height: 100%"></div>
 </template>
 <script>
 import * as echarts from "echarts";
 
 export default {
-  props: {},
+  props: ['ftrendIcoCount'],
   data() {
-    return {};
+    return {
+
+    };
   },
 
   mounted() {
@@ -23,13 +25,14 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.lineChart);
       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>
+  <div ref="pieChart" 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() {
-      var chart = echarts.init(this.$refs.distion);
+      // console.log(this.fdeviceTypeCount)
+      var chart = echarts.init(this.$refs.pieChart);
       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,14 +121,14 @@ export default {
             },
             name: "访问来源",
             radius: ["45%", "67%"],
-            type: "pie", 
+            type: "pie",
             data: pie,
           },
         ],
         color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
       };
 
-      chart.setOption(option);
+      chart.setOption(option,true);
       window.addEventListener("resize", () => {
         chart.resize();
       });

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>
+  <div ref="triangleChart" 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");
     });
   },
 
@@ -25,58 +29,79 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.triangleChart);
       var option;
 
+      var arr=[
+    {name:'重载运行',reaVal:this.frtAnalogData.heavyLoad},
+    {name:'轻载运行',reaVal:this.frtAnalogData.easyLoad},
+    {name:'正常运行',reaVal:this.frtAnalogData.norMalLoad},
+  ]
+
+arr.sort((a,b)=>a.reaVal-b.reaVal);
+console.log('arr');
+console.log(arr);
+
+arr[0].value=10;
+arr[1].value=20;
+arr[2].value=30
+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: arr
+          },
+        ],
       };
 
       chart.setOption(option);

src/views/home/index.vue

@@ -4,12 +4,20 @@
       <!-- 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: 999; 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 +34,29 @@
                 <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 +68,28 @@
         </div>
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
-             <div class="filterSec">
-              <select name="" id="">
+            <div class="filterSec">
+              <!-- <select name="" id="">
                 <option value="11">日</option>
                 <option value="22">月</option>
-              </select>
+              </select> -->
+              <el-date-picker
+      v-model="value1"
+      type="datetimerange"
+      range-separator="~"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
+    </el-date-picker>
             </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 +102,106 @@ 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 {
+       value1:[new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
       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;
+        this.initMap();
+      });
+    },
+
     Overview() {
       // this.$router.push({ path: "/Overview" }); //, query: { title: title }
     },
@@ -111,110 +214,97 @@ export default {
         // features: [] //清空背景道路等
       });
       this.initMapUi();
-      this.addMarker(
-        [
-          {
-            address: "东川路2988号富康东川木业有限公司3车间西南角",
-            detachmentName: "闵行区消防救援支队",
-            dutyPerson: null,
-            getWaterType: "市政",
-            gisBaiDuX: "121.394165",
-            gisBaiDuY: "31.011814",
-            gisX: "121.382935",
-            gisY: "31.00811",
-            jurisdictionalAgency: "闵行站",
-            phone: "64881840",
-            status: "1",
-            type: "消火栓",
-            waterAdministrative: "单位",
-            waterGage: "3.0000",
-            waterUnit: "闵行水厂",
-          },
-          {
-            address: "瓶安路1600弄鑫都城宝铭苑34号楼东侧",
-            detachmentName: "闵行区消防救援支队",
-            dutyPerson: null,
-            getWaterType: "市政",
-            gisBaiDuX: "121.40705",
-            gisBaiDuY: "31.060436",
-            gisX: "121.39589",
-            gisY: "31.056536",
-            jurisdictionalAgency: "光华站",
-            phone: "021-64881840",
-            status: "1",
-            type: "消火栓",
-            waterAdministrative: "居民",
-            waterGage: "0.3000",
-            waterUnit: "闵行自来水公司",
-          },
-        ],
-        "water"
-      );
+
+      var con = `<div class="siteModelBox" >
+                  <h2>
+                    {siteName}
+                  </h2>
+                  <div >
+                   <div class="siteDetailInfo" >
+                    <div class="infoLine">
+                      <span>站点状态：</span>
+                      <p>----</p >
+                    </div>
+                    <div class="infoLine">
+                      <span>设备总数：</span>
+                      <p>----</p >
+                    </div>
+                    <div class="infoLine">
+                      <span>告警数：</span>
+                      <p>---</p >
+                    </div>
+                    <div class="infoLine">
+                      <span>监控类型：</span>
+                      <p>电力、视频</p >
+                    </div>
+                    <div class="infoLine">
+                      <span>电话：</span>
+                      <p>{phone}</p >
+                    </div>
+                    <div class="infoLine">
+                      <span>地址：</span>
+                      <p>{siteAddress}</p >
+                    </div>
+                  </div>
+                  </div>
+                 
+                </div>`;
+      var dataList =this.siteList;
+
+      dataList.forEach(function (item) {
+        let conNew = con;
+        // console.log(item.siteAddress);
+        conNew = conNew.replace(/{siteAddress}/g, item.siteAddress);
+        conNew = conNew.replace(/{phone}/g, item.phone);
+        conNew = conNew.replace(/{siteName}/g, item.siteName);
+        item.content = conNew;
+      });
+
+      this.addMarker(dataList, "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,
+          position: new AMap.LngLat(val.longitude, val.latitude),
           zIndex: 9,
           extData: {
             id: ind + 1,
           },
         });
         marker.on("click", async () => {
-          console.log([val.gisX, val.gisY], null, val);
-          await this.addMarkerInfo([val.gisX, val.gisY], null, val);
-          // console.log(222);
+          
+          // console.log([val.latitude, val.longitude], null, val);
+          await this.addMarkerInfo(
+            [val.longitude, val.latitude],
+            val.content,
+            val
+          );
         });
         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({
         isCustom: true, //使用自定义窗体
         closeWhenClickMap: true,
-        content:
-          content ||
-          `
-                <div class="tableTooltip mapTab" >
-                  <div class="tableTitle">
-                    <div>${"测试站点1"}</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>`,
+        content: content,
         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({
@@ -242,7 +332,7 @@ export default {
         infoWindow.setContent(
           "POI信息: <pre>" + JSON.stringify(info, null, 2) + "</pre>"
         );
-        infoWindow.open(this.map, marker.getPosition());
+        // infoWindow.open(this.map, marker.getPosition());
 
         this.map.setCenter(marker.getPosition());
       });
@@ -252,15 +342,11 @@ 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 +358,37 @@ 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 */
-  }
-}
+
+
+
 
 
 </style>

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

@@ -89,38 +89,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>