页面优化-接口对接202107211026

src/api/Overview/index.js

@@ -28,5 +28,41 @@ export default {
             // data: data
         })
     },
+    //获取用电量概览 -> 月度年度今日用电量
+    dayMonthYearEp(params) {
+        return request({
+            url: `htAnalogData/dayMonthYearEp`,
+            method: 'GET',
+            params: params
+            // data: data
+        })
+    },
+    //获取用电量概览 -> 实施负载
+    epLoad(params) {
+        return request({
+            url: `rtAnalogData/epLoad`,
+            method: 'GET',
+            params: params
+            // data: data
+        })
+    },
+    //获取用电量概览 -> 分时电量图表
+    timeShare(params) {
+        return request({
+            url: `htAnalogData/timeShare`,
+            method: 'GET',
+            params: params
+            // data: data
+        })
+    },
+    //获取实时负荷曲线 -> 今日/昨日用电趋势
+    eptrendIco(params) {
+        return request({
+            url: `htAnalogData/eptrendIco`,
+            method: 'GET',
+            params: params
+            // data: data
+        })
+    },
     
 }

src/views/index.vue

@@ -78,7 +78,7 @@
 </template>
 
 <script>
-import api from "../api/index";
+import api from "@/api/index";
 export default {
   name: "App",
   data() {

src/views/site/Event_alarm.vue

@@ -177,7 +177,7 @@
 </template>
 <script>
 import Eventalarm from "../site_ehcarts/Event_alarm.vue";
-import api from "../../api/site/Event_alarm";
+import api from "@/api/site/Event_alarm";
 import { ElMessage } from "element-plus";
 export default {
   data() {
@@ -299,6 +299,8 @@ export default {
 
       api
         .count({
+          startTime: time[0],
+          endTime: time[1],
           siteId: _this.$store.state.siteId,
         })
         .then((requset) => {
@@ -317,7 +319,7 @@ export default {
           siteId: _this.$store.state.siteId,
           startTime: time[0],
           endTime: time[1],
-          status: _this.value,
+          status: _this.value == 0 ? null : _this.value,
           current: _this.currentPage,
           size: _this.pageSize,
         })

src/views/site/Overview.vue

@@ -7,16 +7,21 @@
           <div class="panel powerView">
             <h2>用电量概览</h2>
             <div class="powerBox">
-              <power-top></power-top>
+              <power-top :dayMonthData="dayMonthData"></power-top>
               <div class="powerViewBottom">
                 <div class="filterSec">
-                  <select name="" id="">
-                    <option value="11">日</option>
-                    <option value="22">月</option>
+                  <select
+                    name=""
+                    id=""
+                    ref="select_timeShare"
+                    @change="select_timeShare"
+                  >
+                    <option :value="1">日</option>
+                    <option :value="2">月</option>
                   </select>
                 </div>
                 <div class="eleShareTit">分时电量</div>
-                <ele-share-chart></ele-share-chart>
+                <ele-share-chart :select_value="select_value"></ele-share-chart>
               </div>
             </div>
             <div class="panel-footer"></div>
@@ -24,7 +29,7 @@
         </div>
         <div class="column mapBox">
           <div class="mapSec" style="height: 100%; z-index: 9; width: 100%">
-            <model-static-top></model-static-top>
+            <model-static-top :dayMonthData="dayMonthData"></model-static-top>
             <i class="siteIcon" @click="modalShow"></i>
 
             <modal-box
@@ -119,6 +124,8 @@ import pieChart from "./components/Overview/pieChart";
 import pieChart2 from "./components/Overview/pieChart2";
 import modalBox from "./components/Overview/modalBox";
 import EleShareChart from "./components/Overview/eleShareChart.vue";
+import api from "@/api/Overview/index";
+import { ElMessage } from "element-plus";
 
 export default {
   name: "index",
@@ -140,11 +147,39 @@ export default {
     return {
       show: false,
       msg: 0,
+      dayMonthData: null,
+      epLoad: null,
+      select_value: 1,
     };
   },
   created() {},
-  mounted() {},
+  mounted() {
+    this.dayMonthYearEp();
+  },
   methods: {
+    select_timeShare() {
+      this.select_value = parseInt(this.$refs.select_timeShare.value);
+    },
+    /**
+     * @用电量概览 -> 月度年度今日用电量
+     */
+    dayMonthYearEp() {
+      var _this = this;
+      api
+        .dayMonthYearEp({
+          siteId: _this.$store.state.siteId,
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.dayMonthData = requset.data;
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+    },
     modalShow() {
       this.show = !this.show;
     },
@@ -154,7 +189,7 @@ export default {
   },
   watch: {
     "$store.state.siteId"() {
-      this.show = false
+      this.show = false;
     },
   },
 };

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

@@ -1,37 +1,91 @@
 <template>
-    <div ref="distion" style="width: 100%; height: calc(100% - 0.7rem)"></div>
+  <div ref="eleShareChart" :style="{ height: height, width: width }"></div>
 </template>
 <script>
 import * as echarts from "echarts";
-
+import api from "../../../../api/Overview/index";
+import { ElMessage } from "element-plus";
 export default {
-  props: {},
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "calc(100% - 0.7rem)",
+    },
+    select_value: Object,
+  },
   data() {
     return {};
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart();
-    });
-  },
+  mounted() {},
 
   beforeUnmount() {
     window.removeEventListener("resize", this.chart);
   },
-
+  watch: {
+    /**
+     * @监听vuex存储值变化 用于调用api
+     */
+    "$store.state.siteId": {
+      immediate: true, // 首次加载的时候执行函数
+      deep: true, // 深入观察,监听数组值，对象属性值的变化
+      handler: function () {
+        this.timeShare();
+      },
+    },
+    select_value() {
+      this.timeShare();
+    },
+  },
   methods: {
+    timeShare() {
+      var date_;
+      this.select_value == 1 ? (date_ = 0) : (date_ = 1);
+      api
+        .timeShare({
+          siteId: this.$store.state.siteId,
+          type: date_,
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.initChart(requset.data);
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+    },
     //次数分布折线图
-    initChart() {
-      var chart = echarts.init(this.$refs.distion);
+    initChart(data) {
+      var chart = echarts.init(this.$refs.eleShareChart);
       var option;
+      var data_all = [
+        {
+          value: data.flat,
+          name: "平",
+        },
+        {
+          value: data.peak,
+          name: "峰",
+        },
+        {
+          value: data.need,
+          name: "尖",
+        },
+
+        {
+          value: data.grain,
+          name: "谷",
+        },
+      ];
 
       option = {
-        color: [
-          "#4BF7F9",
-          "#35B9FD",
-          "#FE7038",
-          "#F7F94B",
-        ],
+        color: ["#4BF7F9", "#35B9FD", "#FE7038", "#F7F94B"],
         grid: {
           left: -100,
           top: 50,
@@ -43,7 +97,7 @@ export default {
           trigger: "item",
           formatter: "{b} : {c} ({d}%)",
         },
-      
+
         polar: {},
         angleAxis: {
           interval: 0,
@@ -52,7 +106,6 @@ export default {
           z: 10,
           axisLine: {
             show: false,
-           
           },
         },
         radiusAxis: {
@@ -121,7 +174,7 @@ export default {
                 formatter: "{b} : {c} kWh",
                 textStyle: {
                   fontSize: 12,
-                  color:'#fff'
+                  color: "#fff",
                 },
                 position: "outside",
               },
@@ -129,30 +182,12 @@ export default {
                 show: true,
               },
             },
-          
-            data: [
-              {
-                value: 2125.992,
-                name: "平",
-              },
-              {
-                value: 918.662,
-                name: "峰",
-              },
-              {
-                value: 200.56,
-                name: "尖",
-              },
-            
-              {
-                value: 704.033,
-                name: "谷",
-              },
-            ],
+
+            data: data_all,
           },
         ],
       };
-      chart.setOption(option);
+      chart.setOption(option, true);
       window.addEventListener("resize", () => {
         chart.resize();
       });

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

@@ -4,21 +4,67 @@
       <li>
         <div>
           <p>今日用电量</p>
-          <p><span class="num static">115.328</span>kWh</p>
-          <p>昨日同期 198.4 <span class="text-red">79.78% ↑</span></p>
+          <p>
+            <span class="num static">{{ data.dayCount }}</span
+            >kWh
+          </p>
+          <p>
+            昨日同期 {{ data.lastDayCount }}
+            <span class="text-red">{{ data.dayRadio }}% ↑</span>
+          </p>
         </div>
       </li>
       <li>
         <div>
           <p>实时负载</p>
           <p>
-            <span class="num text-yellow" style="margin-bottom: 0">36</span>
+            <span class="num text-yellow" style="margin-bottom: 0">{{
+              exception
+            }}</span>
           </p>
         </div>
       </li>
     </ul>
   </div>
 </template>
+<script>
+import api from "@/api/Overview/index";
+import { ElMessage } from "element-plus";
+export default {
+  name: "modelStaticTop",
+  props: {
+    dayMonthData: Object,
+  },
+  components: {},
+  data() {
+    return {
+      data: [],
+      exception: "",
+    };
+  },
+  mounted() {},
+  methods: {},
+  watch: {
+    dayMonthData() {
+      this.data = this.dayMonthData;
+      api
+        .epLoad({
+          siteId: this.$store.state.siteId,
+        })
+        .then((requset) => {
+          if (requset.status === "SUCCESS") {
+            this.exception = requset.data;
+          } else {
+            ElMessage.success({
+              message: requset.msg,
+              type: "success",
+            });
+          }
+        });
+    },
+  },
+};
+</script>
 <style lang="scss">
 .modelStaticTop {
   position: absolute;
@@ -33,7 +79,7 @@
       align-items: center;
       justify-content: center;
       background: #081f2f;
-      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253,.6);
+      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
       p {
         font-size: 0.2rem;
       }

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

@@ -3,16 +3,32 @@
     <ul>
       <li>
         <div>
-          <p>今日用电量</p>
-          <p><span class="num static">115.328</span>kWh</p>
-          <p>昨日同期 198.4 <span class="text-red">79.78% ↑</span></p>
+          <p>月度用电量</p>
+          <p>
+            <span class="num static">{{ data.monthCount }}</span
+            >kWh
+          </p>
+          <p>
+            上月同期 {{ data.lastMonthCount }}
+            <span class="text-red" style="margin-left: 5px">
+              {{ data.monthRadio + "%" }} ↑</span
+            >
+          </p>
         </div>
       </li>
-     <li>
+      <li>
         <div>
-          <p>今日用电量</p>
-          <p><span class="num static">115.328</span>kWh</p>
-          <p>昨日同期 198.4 <span class="text-red">79.78% ↑</span></p>
+          <p>年度用电量</p>
+          <p>
+            <span class="num static">{{ data.yearCount }}</span
+            >kWh
+          </p>
+          <p>
+            去年同期 {{ data.lastYearCount == null ? 0 : data.lastYearCount }}
+            <span class="text-red" style="margin-left: 5px"
+              >{{ data.yearRadio }}% ↑</span
+            >
+          </p>
         </div>
       </li>
     </ul>
@@ -21,51 +37,61 @@
 <script>
 export default {
   name: "statisTop",
+  props: {
+    dayMonthData: Object,
+  },
   components: {},
-  methods: {
-  
+  data() {
+    return {
+      data: [],
+    };
+  },
+  mounted() {},
+  methods: {},
+  watch: {
+    dayMonthData() {
+      this.data = this.dayMonthData;
+    },
   },
 };
 </script>
 
 <style lang="scss">
- .poerrViewTop {
-    height: 30%;
-    // border: 1px solid red;
+.poerrViewTop {
+  height: 30%;
+  // border: 1px solid red;
+}
+.poerrViewTop ul {
+  display: flex;
+  text-align: center;
+  height: 100%;
+  li:first-child {
+    margin-right: 0.07rem;
+    box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253, 0.6);
+  }
+  li:last-child {
+    margin-left: 0.07rem;
+    box-shadow: inset 0 0 0.1rem 0.0125rem rgba(251, 183, 86, 0.6);
   }
- .poerrViewTop ul {
-    display: flex;
-    text-align: center;
-    height:100%;
-    li:first-child{
-      margin-right:.07rem;
-      box-shadow: inset 0 0 0.1rem 0.0125rem rgba(0, 244, 253,.6);
-    }
-    li:last-child{
-      margin-left:.07rem;
-       box-shadow: inset 0 0 0.1rem 0.0125rem rgba(251,183,86,.6);
-    }
 
-    li {
-      height:100%;
-      flex: 1;
+  li {
+    height: 100%;
+    flex: 1;
 
-      // padding: 0.125rem 0.25rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: #081f2f;
-      // border: 1px solid rgba(0,244,253,.5);
-      p {
-        font-size: 0.2rem;
-      }
-      .num {
-        margin: 0.0625rem;
-        display: inline-block;
-        font-size: 0.3rem;
-      }
+    // padding: 0.125rem 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #081f2f;
+    // border: 1px solid rgba(0,244,253,.5);
+    p {
+      font-size: 0.2rem;
+    }
+    .num {
+      margin: 0.0625rem;
+      display: inline-block;
+      font-size: 0.3rem;
     }
   }
-
-
+}
 </style>

test/index.html

@@ -12,8 +12,7 @@
         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>
@@ -21,7 +20,6 @@
     </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>

test/static/config.js

@@ -3,6 +3,13 @@ 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.fileUrl = "http://124.71.174.104/file/" //xlsx文件访问路径
+
+
+// 当前站点 siteId 信息存储
+// var PLATFROM_SITEID = {};
+// PLATFROM_SITEID.id = 0;
+
 
 //alarming WEBSOCKET
 // let userInfo = window.localStorage.getItem("key");