From f3db2d5b2efd9191d26e0f65bf6f31c473f26d02 Mon Sep 17 00:00:00 2001
From: jn517618 <jn517618@163.com>
Date: Wed, 10 Jan 2024 11:31:09 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/energySources/component/dmodal.vue  | 80 +++++++++++++++----
 src/views/energySources/component/dosage.vue  | 11 ++-
 src/views/energySources/component/emodal.vue  | 64 ++++++++++++---
 .../component/equipmentStatus.vue             | 15 +++-
 4 files changed, 137 insertions(+), 33 deletions(-)

diff --git a/src/views/energySources/component/dmodal.vue b/src/views/energySources/component/dmodal.vue
index 28f15a9..abd1aee 100644
--- a/src/views/energySources/component/dmodal.vue
+++ b/src/views/energySources/component/dmodal.vue
@@ -5,7 +5,7 @@
         <div class="tit-r">
           <span style="color: #fff;">选择设备：</span>
           <el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择"
-            @change="changeMonth">
+            @change="change">
             <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
             </el-option>
           </el-select>
@@ -18,15 +18,15 @@
           :row-class-name="tableRowClassName">
           <el-table-column prop="name" label="设备名称" show-overflow-tooltip>
           </el-table-column>
-          <el-table-column prop="address" label="用电量">
+          <el-table-column prop="singleElectricity" label="用电量">
             <template slot-scope="scope">
-              <span>{{ scope.row.loadRate }}%</span>
+              <span>{{ scope.row.singleElectricity }}</span>
             </template>
           </el-table-column>
           <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
           </el-table-column>
         </el-table>
-        <el-pagination background layout="prev, pager, next" small :total="tableData.length" style="text-align: right;">
+        <el-pagination background layout="prev, pager, next" small :total="total" style="text-align: right;" @current-change="currentChange">
         </el-pagination>
       </div>
 
@@ -37,13 +37,16 @@
 <script>
 import tit from "./tit.vue";
 import { mapGetters } from "vuex";
-import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources"
+import { getPeriodElectricity, getInstrumentRunDetail } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
       tableData: [],
       options: [],
-      value: ''
+      value: '',
+      total: 0,
+      current: 1,
+      size: 10
     };
   },
   components: {
@@ -53,6 +56,17 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    selectDay: {
+      type: String
+    }
+  },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.getData()
+        this.getTableData()
+      }
     }
   },
   computed: {
@@ -60,33 +74,55 @@ export default {
   },
   created() {
     this.getTableData()
-    this.getData()
+    // this.getData()
   },
   methods: {
     getTableData() {
-      getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
+      getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
         this.options = res.data.data
+        // this.value = this.options[0].name
       })
     },
     getData() {
-      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => {
-        this.tableData = res.data.data
+      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay, name: this.value }).then(res => {
+        console.log(res)
+        this.tableData = res.data.records
+        this.total = res.data.total
       })
     },
-    onClose(){
+    getData() {
+      getInstrumentRunDetail({
+        manufacturerBrand: this.userInfo.dept_name,
+        today:  this.selectDay,
+        name: this.value,
+        current: this.current,
+        size: this.size
+      }).then(res => {
+        this.tableData = res.data.data.records
+        this.total = res.data.data.total
+      })
+    },
+    currentChange(v) {
+      this.current = v
+      this.getData()
+    },
+    change() {
+      this.getData()
+    },
+    onClose() {
       this.$emit('onvisible', false)
     },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
         if (row.loadRate > 0) {
-          return 'trEven colorFB5E2D';
+          return 'trEven';
         } else {
           return 'trEven';
         }
 
       } else {
         if (row.loadRate > 0) {
-          return 'trOdd colorFB5E2D';
+          return 'trOdd';
         } else {
           return 'trOdd';
         }
@@ -98,7 +134,7 @@ export default {
 <style>
 .my-info-dialog .el-dialog {
   background: transparent !important;
-  box-shadow: 0 !important;
+  box-shadow: none !important;
   border: 0 !important;
 }
 
@@ -143,7 +179,7 @@ export default {
 }
 
 .equipmentLoadmodal /deep/.colorFB5E2D td {
-  color: #FB5E2D !important;
+  // color: #FB5E2D !important;
 }
 
 
@@ -159,6 +195,20 @@ export default {
   line-height: 0.24rem !important;
 }
 
+.equipmentLoadmodal /deep/ .btn-prev {
+  background: transparent !important;
+  color: #fff !important;
+}
+
+.equipmentLoadmodal /deep/ .btn-next {
+  background: transparent !important;
+  color: #fff !important;
+}
+
+.equipmentLoadmodal /deep/ .el-pagination .is-background .el-pager li {
+  background: transparent !important;
+}
+
 .emodal {
 
   width: 8.38rem;
diff --git a/src/views/energySources/component/dosage.vue b/src/views/energySources/component/dosage.vue
index ab4b581..f048c44 100644
--- a/src/views/energySources/component/dosage.vue
+++ b/src/views/energySources/component/dosage.vue
@@ -2,7 +2,7 @@
   <div class="box dosage">
     <tit :title="'用量分析'">
       <div class="tit-r">
-        <span style="color: #0096FF;">监测明细</span>
+        <span style="color: #0096FF;" @click="visible=true">监测明细</span>
         &nbsp;&nbsp;&nbsp;
         <span style="color: #fff;">选择月份：</span>
         <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
@@ -80,22 +80,27 @@
       </div> -->
       <!-- <div id="mainDosage"></div> -->
     </div>
+    
+    <dmodal :visible.sync="visible" @onvisible="v => visible = v" :selectDay="selectDay"/>
   </div>
 </template>
 
 <script>
 import tit from "./tit.vue";
+import dmodal from "./dmodal.vue";
 import { mapGetters } from "vuex";
 import { getPeriodElectricity } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
       selectDay: '',
-      tableData: []
+      tableData: [],
+      visible: false
     };
   },
   components: {
-    tit
+    tit,
+    dmodal
   },
   created() {
     this.selectDay = this.$moment().format('YYYY-MM-DD')
diff --git a/src/views/energySources/component/emodal.vue b/src/views/energySources/component/emodal.vue
index 15f7111..b67e818 100644
--- a/src/views/energySources/component/emodal.vue
+++ b/src/views/energySources/component/emodal.vue
@@ -5,7 +5,7 @@
         <div class="tit-r">
           <span style="color: #fff;">选择设备：</span>
           <el-select size="mini" style="width: 1.2rem;margin-right: 0.26rem;" v-model="value" placeholder="请选择"
-            @change="changeMonth">
+            @change="change">
             <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
             </el-option>
           </el-select>
@@ -26,7 +26,8 @@
           <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
           </el-table-column>
         </el-table>
-        <el-pagination background layout="prev, pager, next" small :total="tableData.length" style="text-align: right;">
+        <el-pagination background layout="prev, pager, next" small :total="total" style="text-align: right;"
+          @current-change="currentChange">
         </el-pagination>
       </div>
 
@@ -37,13 +38,16 @@
 <script>
 import tit from "./tit.vue";
 import { mapGetters } from "vuex";
-import { getInstrumentActLoad, getInstrumentRumDetail } from "@/api/energySources/energySources"
+import { getInstrumentActLoad, getInstrumentRunDetail } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
       tableData: [],
       options: [],
-      value: ''
+      value: '',
+      total: 0,
+      current: 1,
+      size: 10
     };
   },
   components: {
@@ -55,38 +59,60 @@ export default {
       default: false
     }
   },
+  watch: {
+    visible(v) {
+      if (v) {
+        this.getData()
+      }
+    }
+  },
   computed: {
     ...mapGetters(["userInfo", "permission"]),
   },
   created() {
     this.getTableData()
-    this.getData()
   },
   methods: {
     getTableData() {
       getInstrumentActLoad({ manufacturerBrand: this.userInfo.dept_name }).then(res => {
         this.options = res.data.data
+        // this.value = this.options[0].name
+
       })
     },
     getData() {
-      getInstrumentRunDetail({ manufacturerBrand: this.userInfo.dept_name, today: this.$moment().format('yyyy-MM-DD'), name: this.value }).then(res => {
-        this.tableData = res.data.data
+      getInstrumentRunDetail({
+        manufacturerBrand: this.userInfo.dept_name,
+        today: this.$moment().format('yyyy-MM-DD'),
+        name: this.value,
+        current: this.current,
+        size: this.size
+      }).then(res => {
+        this.tableData = res.data.data.records
+        this.total = res.data.data.total
       })
     },
-    onClose(){
+    currentChange(v) {
+      this.current = v
+      this.getData()
+    },
+    change(){
+      this.getData()
+    },
+    onClose() {
       this.$emit('onvisible', false)
     },
     tableRowClassName({ row, rowIndex }) {
       if (rowIndex % 2 === 0) {
         if (row.loadRate > 0) {
-          return 'trEven colorFB5E2D';
+          return 'trEven';
         } else {
           return 'trEven';
         }
 
       } else {
         if (row.loadRate > 0) {
-          return 'trOdd colorFB5E2D';
+          return 'trOdd';
         } else {
           return 'trOdd';
         }
@@ -98,7 +124,7 @@ export default {
 <style>
 .my-info-dialog .el-dialog {
   background: transparent !important;
-  box-shadow: 0 !important;
+  box-shadow: none !important;
   border: 0 !important;
 }
 
@@ -143,7 +169,7 @@ export default {
 }
 
 .equipmentLoadmodal /deep/.colorFB5E2D td {
-  color: #FB5E2D !important;
+  // color: #FB5E2D !important;
 }
 
 
@@ -159,6 +185,20 @@ export default {
   line-height: 0.24rem !important;
 }
 
+.equipmentLoadmodal /deep/ .btn-prev {
+  background: transparent !important;
+  color: #fff !important;
+}
+
+.equipmentLoadmodal /deep/ .btn-next {
+  background: transparent !important;
+  color: #fff !important;
+}
+
+.equipmentLoadmodal /deep/ .el-pagination.is-background .el-page li {
+  background: transparent !important;
+}
+
 .emodal {
 
   width: 8.38rem;
diff --git a/src/views/energySources/component/equipmentStatus.vue b/src/views/energySources/component/equipmentStatus.vue
index 3dc4b8a..f75a7b0 100644
--- a/src/views/energySources/component/equipmentStatus.vue
+++ b/src/views/energySources/component/equipmentStatus.vue
@@ -15,6 +15,7 @@ import { getInstrumentRunStatus } from "@/api/energySources/energySources"
 export default {
   data() {
     return {
+      funt: null
     };
   },
   components: {
@@ -22,10 +23,18 @@ export default {
   },
   created() {
     this.$nextTick(() => {
+      
       this.getData()
+      this.funt = setInterval(() => {
+        this.getData()
+      }, 3600000)
+      this.funt()
     })
 
   },
+  beforeDestroyed() { 
+    clearInterval(this.funt)
+  },
   computed: {
     ...mapGetters(["userInfo", "permission"]),
   },
@@ -40,8 +49,8 @@ export default {
         // this.monthNum = data.currentMonth.toString().split('')
         // this.yesterdayNum = data.yesterday.toString().split('')
         // this.todayNum = data.today.toString().split('')
-        
-      this.echartsInit(res.data.data)
+
+        this.echartsInit(res.data.data)
       })
     },
     getLongestSubArray(obj) {
@@ -58,7 +67,7 @@ export default {
       return longest;
     },
     echartsInit(arr) {
-   
+
       let day8 = this.$moment().startOf('day').add(8, 'hours').valueOf();
       let day20 = this.$moment().startOf('day').add(20, 'hours').valueOf();