地图撒点对接，其他部分优化

src/api/home/home.js

@@ -18,6 +18,16 @@ export default {
             params: params
         })
     },
+
+    // 总实时负荷
+    epLoad_api(params) {
+        return request({
+            url: `rtAnalogData/epLoad`,
+            method: 'GET',
+            params: params
+        })
+    },
+
     // 站点总数
     siteCount_api(params) {
         return request({
@@ -27,6 +37,8 @@ export default {
         })
     },
 
+
+
     // 设备数量echarts饼图
     deviceTypeCount_api(params) {
         return request({
@@ -63,6 +75,15 @@ export default {
         })
     },
 
+    // 站点详情
+    siteOne_api(params) {
+        return request({
+            url: `site/one`,
+            method: 'GET',
+            params: params
+        })
+    },
+
     // 日月年用电量
     htAnalogData_api(params) {
         return request({
@@ -81,4 +102,16 @@ export default {
             params: params
         })
     },
+
+    // 今日昨日用电量趋势
+    eptrendIcoMonth_api(params) {
+        return request({
+            url: `htAnalogData/eptrendIcoMonth`,
+            method: 'GET',
+            params: params
+        })
+    },
+
+
+
 }

src/assets/css/index.css

@@ -551,7 +551,7 @@ p {
     position: absolute;
     top: .62rem;
     right: 10px;
-    z-index: 11111111;
+    z-index: 11;
     text-align: right;
 }
 
@@ -681,7 +681,7 @@ p {
     /* height: 5rem; */
     background-image: url(../images/modal-bg.png);
     background-size: 100% 100%;
-    font-size: .2rem
+    font-size: .18rem
 }
 
 .siteIcon {
@@ -735,6 +735,7 @@ p {
 
 .siteModelBox .infoLine {
     margin: 0.15rem 0;
+    min-height: .18rem
 }
 
 .siteModelBox .infoLine span {
@@ -742,11 +743,12 @@ p {
     color: #0df4fe;
     display: inline-block;
     text-align: right;
-    width: 1.4rem;
+    width: 80px;
+    min-width: 80px;
 }
 
 .siteModelBox .infoLine p {
-    padding-left: 1.4rem;
+    padding-left: 80px;
 }
 
 

src/views/home/components/barChart.vue

@@ -156,8 +156,8 @@ export default {
                 ]),
               },
             },
-            data: [40, 40, 30, 30, 30, 40, 40, 40, 30,40,50,60],
-            // data:this.feptrendIco[1].list
+            // data: [40, 40, 30, 30, 30, 40, 40, 40, 30,40,50,60],
+            data:this.feptrendIco[1].list
           },
           {
             name: "当日",
@@ -177,8 +177,8 @@ export default {
                 ]),
               },
             },
-            data: [40, 50, 50, 50, 50, 40, 40, 50, 50,20,40,30],
-            // data:this.feptrendIco[0].list
+            // data: [40, 50, 50, 50, 50, 40, 40, 50, 50,20,40,30],
+            data:this.feptrendIco[0].list
           },
         ],
       };

src/views/home/components/mapStaticTop.vue

@@ -43,7 +43,7 @@ export default {
   position: absolute;
   top: 2px;
   left: 2px;
-  z-index: 1;
+  z-index: 9;
   ul {
     display: flex;
     text-align: center;

src/views/home/components/pieChart.vue

@@ -43,19 +43,19 @@ export default {
 
       var pie = [
         {
-          value: this.fdeviceTypeCount.normalCount,
+          value: this.fdeviceTypeCount.normalCount?this.fdeviceTypeCount.normalCount:0,
           name: "正常",
         },
         {
-          value: this.fdeviceTypeCount.faultCount,
+          value: this.fdeviceTypeCount.faultCount?this.fdeviceTypeCount.faultCount:0,
           name: "故障",
         },
         {
-          value: this.fdeviceTypeCount.offLineCount,
+          value: this.fdeviceTypeCount.offLineCount?this.fdeviceTypeCount.offLineCount:0,
           name: "离线",
         },
         {
-          value: this.fdeviceTypeCount.deviceCount,
+          value: this.fdeviceTypeCount.deviceCount?this.fdeviceTypeCount.deviceCount:0,
           name: "预警",
         },
       ];

src/views/home/components/statisBottom.vue

@@ -3,14 +3,14 @@
     <ul>
       <li style="">
         <div>
-          <p><span class="num text-blue">{{fhtAnalogData.dayCount}}</span></p>
+          <p><span class="num text-blue">{{fhtAnalogData.dayCount?fhtAnalogData.dayCount.toFixed(2):0}}</span></p>
           <p class="mb-10">(kW)</p>
         </div>
         <p  class="timeEle">日用电量</p>
       </li>
       <li>
         <div>
-          <p><span class="num text-yellow">{{fhtAnalogData.monthCount}}</span></p>
+          <p><span class="num text-yellow">{{fhtAnalogData.monthCount?fhtAnalogData.monthCount.toFixed(2):0}}</span></p>
           <p class="mb-10">(kW)</p>
           
         </div>
@@ -18,7 +18,7 @@
       </li>
       <li>
         <div>
-          <p><span class="num text-orange">{{fhtAnalogData.yearCount}}</span></p>
+          <p><span class="num text-orange">{{fhtAnalogData.yearCount?fhtAnalogData.yearCount.toFixed(2):0}}</span></p>
            <p class="mb-10">(kW)</p>
         </div>
         <p class="timeEle">年用电量</p>

src/views/home/components/statisTop.vue

@@ -24,7 +24,7 @@
       </li>
       <li>
         <div>
-          <p><span class="num text-blue">-</span> kW</p>
+          <p><span class="num text-blue">{{fepLoad}}</span> kW</p>
           <p>总实时负荷</p>
         </div>
       </li>
@@ -52,7 +52,7 @@
 </template>
 <script>
 export default {
-  props: ["falarmCount","fpersonalCount","fsiteCount"],
+  props: ["falarmCount","fpersonalCount","fsiteCount","fepLoad"],
   name: "",
   components: {},
   methods: {

src/views/home/index.vue

@@ -8,23 +8,31 @@
             :falarmCount="alarmCount"
             :fpersonalCount="personalCount"
             :fsiteCount="siteCount"
+            :fepLoad="epLoad"
           ></statis-top>
-          <statis-bottom :fhtAnalogData="htAnalogData" ></statis-bottom>
+          <statis-bottom :fhtAnalogData="htAnalogData"></statis-bottom>
         </div>
-        <div class="column mapBox">
+        <div class="column mapBox" style="position: relative">
+          <map-static-top :fsiteCount="siteCount"></map-static-top>
+          <div id="pickerBox">
+            <input
+              id="pickerInput"
+              placeholder="输入关键字选取站点"
+              v-model="name"
+              @keyup.enter="siteList_api({ name: this.name })"
+            />
+            <i
+              class="el-icon-search"
+              @click="siteList_api({ name: this.name })"
+            ></i>
+            <div id="poiInfo"></div>
+          </div>
+          <div class="panel-footer"></div>
           <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>
-              <div id="poiInfo"></div>
-            </div>
-            <div class="panel-footer"></div>
-          </div>
+            style="height: 100%; z-index: 1; width: 100%"
+          ></div>
         </div>
         <div class="column">
           <div class="panel deviceSum">
@@ -35,7 +43,7 @@
                 range-separator="~"
                 start-placeholder="开始日期"
                 end-placeholder="结束日期"
-                 @change="deviceTypeCount_api()"
+                @change="deviceTypeCount_api()"
               >
               </el-date-picker>
             </div>
@@ -61,12 +69,16 @@
         <div class="column">
           <div class="panel currentUsage" style="height: 100%">
             <div class="filterSec">
-              <select name="" id="" v-model="dayType" >
+              <select name="" id="" v-model="dayType">
                 <option value="0">当日用量趋势</option>
                 <option value="1">当月用量趋势</option>
               </select>
+              <!-- <img src="../../assets/images/markIcon.png" alt=""> -->
             </div>
-            <bar-chart :feptrendIco="eptrendIco"   v-if=" this.eptrendIco[0]"></bar-chart>
+            <bar-chart
+              :feptrendIco="eptrendIco"
+              v-if="this.eptrendIco[0]"
+            ></bar-chart>
             <div class="panel-footer"></div>
           </div>
         </div>
@@ -104,9 +116,12 @@ import lineChart from "./components/lineChart";
 import mapStaticTop from "./components/mapStaticTop";
 import triangleChart from "./components/triangleChart";
 
+ import markIconPath from '../../assets/images/markIcon.png';
+
+
 // 地图
 import AMap from "AMap";
-import AMapUI from "AMapUI";
+// import AMapUI from "AMapUI";
 
 import api from "../../api/home/home.js";
 
@@ -128,7 +143,7 @@ export default {
         new Date("2021-7-12 00:00:00"),
       ],
       dDefaultTime: [
-         new Date("2021-6-12 00:00:00"),
+        new Date("2021-6-12 00:00:00"),
         new Date("2021-6-13 00:00:00"),
       ],
       map: null,
@@ -139,25 +154,43 @@ export default {
       trendIcoCount: [],
       rtAnalogData: {},
 
-      htAnalogData:{},
-      dayType:0,
-      eptrendIco:{}
+      htAnalogData: {},
+      dayType: 0,
+      eptrendIco: {},
+      eptrendIcoMonth: {},
+      epLoad: "",
+      siteOne: {},
+
+      name: "",
     };
   },
+  watch: {
+    dayType(val) {
+      if (val == 0) {
+        this.eptrendIco_api();
+      } else {
+        this.eptrendIcoMonth_api();
+      }
+    },
+  },
   created() {},
   mounted() {
     this.alarmCount_api();
     this.personalCount_api();
+    this.epLoad_api();
     this.siteCount_api();
     this.deviceTypeCount_api();
     this.trendIcoCount_api();
     this.rtAnalogData_api();
     this.siteList_api();
     this.htAnalogData_api();
-    this.eptrendIco_api()
-
+    this.eptrendIco_api();
   },
   methods: {
+    // searchSite(){
+    //     this.siteList_api({"name":this.name});
+    // },
+
     //告警总数数据对接
     alarmCount_api() {
       api.alarmCount_api().then((requset) => {
@@ -170,6 +203,12 @@ export default {
         this.personalCount = requset.data;
       });
     },
+    //总实时负荷
+    epLoad_api() {
+      api.epLoad_api().then((requset) => {
+        this.epLoad = requset.data;
+      });
+    },
     //站点总数
     siteCount_api() {
       api.siteCount_api().then((requset) => {
@@ -179,13 +218,13 @@ export default {
 
     //设备数量echarts饼图
     deviceTypeCount_api() {
-       var _this = this;
+      var _this = this;
       _this.$store.commit("TimeAll_function", this.dDefaultTime);
       var time = _this.$store.state.Time_Data;
 
       api
         .deviceTypeCount_api({
-          startTime:time[0],
+          startTime: time[0],
           endTime: time[1],
         })
         .then((requset) => {
@@ -204,7 +243,7 @@ export default {
           endTime: time[1],
         })
         .then((requset) => {
-          this.$store.state.trendIcoCount = requset.data
+          this.$store.state.trendIcoCount = requset.data;
           this.trendIcoCount = requset.data;
         });
     },
@@ -212,17 +251,17 @@ export default {
     rtAnalogData_api() {
       api.rtAnalogData_api().then((requset) => {
         this.rtAnalogData = requset.data;
-        // console.log(this.rtAnalogData)
       });
     },
     //地图撒点
-    siteList_api() {
-      api.siteList_api().then((requset) => {
+    siteList_api(query = {}) {
+      api.siteList_api(query).then((requset) => {
         this.siteList = requset.data;
         this.initMap();
       });
     },
 
+    //地图撒点
 
     // 日月年用电量
     htAnalogData_api() {
@@ -235,14 +274,19 @@ export default {
     eptrendIco_api() {
       api.eptrendIco_api().then((requset) => {
         this.eptrendIco = requset.data;
-        console.log( 'this.eptrendIco')
-         console.log( this.eptrendIco[0].name)
+        // console.log("this.eptrendIco");
+        // console.log(this.eptrendIco[0].name);
       });
     },
 
-
-
-
+    // 今日昨日用电量趋势
+    eptrendIcoMonth_api() {
+      api.eptrendIcoMonth_api().then((requset) => {
+        this.eptrendIcoMonth = requset.data;
+        console.log("this.eptrendIcoMonth");
+        console.log(this.eptrendIcoMonth);
+      });
+    },
 
     Overview() {
       // this.$router.push({ path: "/Overview" }); //, query: { title: title }
@@ -255,9 +299,9 @@ export default {
         zooms: [3, 16],
         // features: [] //清空背景道路等
       });
-      this.initMapUi();
+      // this.initMapUi();
 
-      var con = `<div class="siteModelBox" style="transform:scale(.85);height:3.6rem" >
+      var con = `<div class="siteModelBox" >
                   <h2>
                     {siteName}
                   </h2>
@@ -265,19 +309,19 @@ export default {
                    <div class="siteDetailInfo" >
                     <div class="infoLine">
                       <span>站点状态：</span>
-                      <p>在线</p >
+                      <p>{status}</p>
                     </div>
                     <div class="infoLine">
                       <span>设备总数：</span>
-                      <p>2</p >
+                      <p>{deviceCount}</p >
                     </div>
                     <div class="infoLine">
                       <span>告警数：</span>
-                      <p>0</p >
+                      <p>{alarmPowerCount}</p >
                     </div>
                     <div class="infoLine">
                       <span>监控类型：</span>
-                      <p>电力、视频</p >
+                      <p>{deviceType}</p >
                     </div>
                     <div class="infoLine">
                       <span>电话：</span>
@@ -289,7 +333,6 @@ export default {
                     </div>
                   </div>
                   </div>
-                 
                 </div>`;
       var dataList = this.siteList;
 
@@ -306,23 +349,56 @@ export default {
     },
 
     addMarker(lnglats) {
+      
       // 创建标点和点击事件
       let markers = lnglats.map((val, ind) => {
         let marker = new AMap.Marker({
           position: new AMap.LngLat(val.longitude, val.latitude),
+          icon:markIconPath,
+          //   icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png',
           zIndex: 9,
           extData: {
             id: ind + 1,
           },
         });
-        marker.on("click", async () => {
+        marker.on("mouseover", async () => {
           // console.log([val.latitude, val.longitude], null, val);
+        await api.siteOne_api({ siteId: val.id }).then((requset) => {
+            this.siteOne = requset.data;
+          });
+
+          if (this.siteOne) {
+            val.content = val.content.replace(
+              /{alarmPowerCount}/g,
+              this.siteOne.alarmPowerCount ? this.siteOne.alarmPowerCount : "0"
+            );
+            val.content = val.content.replace(
+              /{status}/g,
+              this.siteOne.status ? this.siteOne.status : "-"
+            );
+            val.content = val.content.replace(
+              /{deviceCount}/g,
+              this.siteOne.deviceCount ? this.siteOne.deviceCount : "0"
+            );
+            val.content = val.content.replace(
+              /{deviceType}/g,
+              this.siteOne.deviceType ? this.siteOne.deviceType : "-"
+            );
+          }
+
           await this.addMarkerInfo(
             [val.longitude, val.latitude],
             val.content,
             val
           );
         });
+
+        marker.on("mouseout", async () => {
+          this.map.clearInfoWindow();
+        });
+        marker.on("click", async () => {
+          this.$router.push({ path: "/Overview", query: { id: val.id } });
+        });
         return marker;
       });
       this.map.add(new AMap.OverlayGroup(markers));
@@ -331,8 +407,7 @@ export default {
 
     // 添加标点
     addMarkerInfo(position, content, value = "") {
-      // this.map.getIsOpen();
-      console.log("value");
+      // console.log("value");
       console.log(value);
       this.map.clearInfoWindow();
       var infoWindow = new AMap.InfoWindow({
@@ -382,22 +457,21 @@ export default {
         // poiPicker.suggest("美食");
       });
     },
-    initMapUi() {
-      AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
-        // console.log(PoiPicker);
-        let poiPickers = new PoiPicker({
-          input: "pickerInput",
-        });
-        this.poiPickerReady(poiPickers);
-      });
-    },
+    // initMapUi() {
+    //   AMapUI.load(["ui/misc/PoiPicker"], (PoiPicker) => {
+    //     // console.log(PoiPicker);
+    //     let poiPickers = new PoiPicker({
+    //       input: "pickerInput",
+    //     });
+    //     this.poiPickerReady(poiPickers);
+    //   });
+    // },
   },
 };
 </script>
 
 <style lang="scss">
 #pickerBox {
-  opacity:0;
   position: absolute;
   z-index: 9;
   top: 0.15rem;
@@ -412,6 +486,7 @@ export default {
   top: 0.1rem;
   font-size: 0.2125rem;
   color: #00f4fd;
+  cursor: pointer;
 }
 
 #pickerInput {
@@ -447,7 +522,7 @@ export default {
   line-height: 0.25rem;
   color: #fff;
 }
- .el-time-panel{
-  left:-0.3rem!important
+.el-time-panel {
+  left: -0.3rem !important;
 }
 </style>