对接撒点等时间插件用，，后台调试中

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/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,5 +1,5 @@
 <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";
@@ -25,7 +25,7 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.lineChart);
       var option;
 
       // var arr = new Array();

src/views/home/components/pieChart.vue

@@ -1,5 +1,5 @@
 <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";
@@ -29,7 +29,7 @@ export default {
     //次数分布折线图
     initChart() {
       // console.log(this.fdeviceTypeCount)
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.pieChart);
       var option;
 
       var pie = [
@@ -128,7 +128,7 @@ export default {
         color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
       };
 
-      chart.setOption(option);
+      chart.setOption(option,true);
       window.addEventListener("resize", () => {
         chart.resize();
       });

src/views/home/components/triangleChart.vue

@@ -1,5 +1,5 @@
 <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";
@@ -12,13 +12,13 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
-      console.log(1111111111);
-      console.log(this.frtAnalogData);
-      console.log(1111111111);
+      // console.log(1111111111);
+      // console.log(this.frtAnalogData);
+      // console.log(1111111111);
       this.initChart();
-      console.log("this.arr");
-      console.log(this.arr);
-      console.log("this.arr");
+      // console.log("this.arr");
+      // console.log(this.arr);
+      // console.log("this.arr");
     });
   },
 
@@ -29,15 +29,23 @@ export default {
   methods: {
     //次数分布折线图
     initChart() {
-      var chart = echarts.init(this.$refs.distion);
+      var chart = echarts.init(this.$refs.triangleChart);
       var option;
 
-      var arr = [
-        this.frtAnalogData.heavyLoad,
-        this.frtAnalogData.easyLoad,
-        this.frtAnalogData.norMalLoad,
-      ];
-      console.log(arr)
+      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,
@@ -91,23 +99,7 @@ export default {
               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,
-              },
-            ],
+            data: arr
           },
         ],
       };

src/views/home/index.vue

@@ -4,14 +4,18 @@
       <!-- topBox start -->
       <div class="topBox">
         <div class="column statisSec">
-          <statis-top :falarmCount="alarmCount" :fpersonalCount="personalCount" :fsiteCount="siteCount"></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%"
+            style="height: 100%; z-index: 999; width: 100%"
           >
             <map-static-top :fsiteCount="siteCount"></map-static-top>
             <div id="pickerBox">
@@ -30,11 +34,17 @@
                 <option value="4">月</option>
               </select>
             </div>
-            <pie-chart :fdeviceTypeCount="deviceTypeCount" v-if="this.deviceTypeCount.normalCount"></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 :frtAnalogData="rtAnalogData"  v-if="this.rtAnalogData.heavyLoad"></triangle-chart>
+            <triangle-chart
+              :frtAnalogData="rtAnalogData"
+              v-if="this.rtAnalogData.heavyLoad"
+            ></triangle-chart>
             <!-- <div class="chart"></div> -->
             <div class="panel-footer"></div>
           </div>
@@ -59,12 +69,22 @@
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
             <div class="filterSec">
-              <select name="" id="">
+              <!-- <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 :ftrendIcoCount="trendIcoCount" v-if="this.trendIcoCount[0]"></line-chart>
+            <line-chart
+              :ftrendIcoCount="trendIcoCount"
+              v-if="this.trendIcoCount[0]"
+            ></line-chart>
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -91,6 +111,7 @@ import api from "../../api/home/home.js";
 export default {
   name: "index",
   components: {
+   
     statisTop,
     statisBottom,
     pieChart,
@@ -101,81 +122,86 @@ export default {
   },
   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:{}
-
+      alarmCount: {},
+      personalCount: {},
+      siteCount: {},
+      deviceTypeCount: {},
+      trendIcoCount: [],
+      rtAnalogData: {},
     };
   },
   created() {},
   mounted() {
-    this.initMap();
+    
     this.alarmCount_api();
     this.personalCount_api();
     this.siteCount_api();
-    this.deviceTypeCount_api()
+    this.deviceTypeCount_api();
     this.trendIcoCount_api();
     this.rtAnalogData_api();
-    // this.siteList_api();
+    this.siteList_api();
   },
   methods: {
-
     //告警总数数据对接
     alarmCount_api() {
       api.alarmCount_api().then((requset) => {
-        this.alarmCount=requset.data;
+        this.alarmCount = requset.data;
       });
     },
-     //运维人员
+    //运维人员
     personalCount_api() {
       api.personalCount_api().then((requset) => {
-        this.personalCount=requset.data;
+        this.personalCount = requset.data;
       });
     },
-     //站点总数
+    //站点总数
     siteCount_api() {
       api.siteCount_api().then((requset) => {
-        this.siteCount=requset.data;
+        this.siteCount = requset.data;
       });
     },
 
-     //设备数量echarts饼图
+    //设备数量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)
-      });
+      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折线图
+    //故障抢修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)
-      });
+      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锥形图
+    //重载运行echarts锥形图
     rtAnalogData_api() {
       api.rtAnalogData_api().then((requset) => {
-        this.rtAnalogData=requset.data;
-        console.log(this.rtAnalogData)
+        this.rtAnalogData = requset.data;
+        // console.log(this.rtAnalogData)
       });
     },
-     //地图撒点
+    //地图撒点
     siteList_api() {
       api.siteList_api().then((requset) => {
-        this.siteList=requset.data;
-        console.log(this.siteList)
+        this.siteList = requset.data;
+        this.initMap();
       });
     },
 
-
-
-
-
     Overview() {
       // this.$router.push({ path: "/Overview" }); //, query: { title: title }
     },
@@ -189,63 +215,72 @@ export default {
       });
       this.initMapUi();
 
+      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;
 
-      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"
-      );
-    },
+      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) {
       // 创建标点和点击事件
-      // let icon = "";
       let markers = lnglats.map((val, ind) => {
         let marker = new AMap.Marker({
-          position: new AMap.LngLat(val.gisX, val.gisY),
+          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([val.latitude, val.longitude], null, val);
+          await this.addMarkerInfo(
+            [val.longitude, val.latitude],
+            val.content,
+            val
+          );
         });
         return marker;
       });
@@ -253,64 +288,21 @@ export default {
       this.map.setFitView(); // 根据所有点自适应
     },
 
-
     // 添加标点
     addMarkerInfo(position, content, value = "") {
       // this.map.getIsOpen();
-      // console.log('value');
+      console.log("value");
       console.log(value);
       this.map.clearInfoWindow();
       var infoWindow = new AMap.InfoWindow({
         isCustom: true, //使用自定义窗体
         closeWhenClickMap: true,
-        content:
-          content ||
-          `
-               <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>
-                 
-                </div>`,
+        content: content,
         offset: new AMap.Pixel(16, -30),
       });
       infoWindow.open(this.map, position);
     },
+
     poiPickerReady(poiPicker) {
       // console.log(poiPicker);
       var marker = new AMap.Marker();
@@ -340,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());
       });
@@ -355,7 +347,6 @@ export default {
         let poiPickers = new PoiPicker({
           input: "pickerInput",
         });
-
         this.poiPickerReady(poiPickers);
       });
     },
@@ -395,67 +386,9 @@ export default {
 #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>