设备监控-点位清单

src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue

@@ -35,12 +35,13 @@ export default {
     this.chart = null;
   },
   methods: {
-    init(siteId) {
+    init(siteId, timeRange) {
       this.chart.showLoading();
       const x = [];
       const data1 = [],
         data2 = [];
-      storagePower(siteId)
+      const [startTime='', endTime=''] = timeRange;
+      storagePower(siteId,startTime,endTime)
         .then((response) => {
           this.setOption(response?.data?.pcsPowerList || []);
         })

src/views/ems/dzjk/sbjk/ssyx/DcpjsocChart.vue

@@ -34,9 +34,10 @@ export default {
     this.chart = null;
   },
   methods: {
-    init(siteId) {
+    init(siteId,timeRange) {
       this.chart.showLoading();
-      batteryAveSoc(siteId)
+      const [startTime='', endTime=''] = timeRange;
+      batteryAveSoc(siteId,startTime,endTime)
         .then((response) => {
           this.setOption(response?.data?.batteryAveSOCList || []);
         })

src/views/ems/dzjk/sbjk/ssyx/DcpjwdChart.vue

@@ -35,12 +35,13 @@ export default {
     this.chart = null;
   },
   methods: {
-    init(siteId) {
+    init(siteId,timeRange) {
       this.chart.showLoading();
       const x = [];
       const data1 = [],
         data2 = [];
-      batteryAveTemp(siteId)
+      const [startTime='', endTime=''] = timeRange;
+      batteryAveTemp(siteId,startTime,endTime)
         .then((response) => {
           this.setOption(response?.data?.batteryAveTempList || []);
         })

src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue

@@ -35,11 +35,12 @@ export default {
     this.chart = null;
   },
   methods: {
-    init(siteId) {
+    init(siteId,timeRange) {
       this.chart.showLoading();
       const x = [];
       const data = [];
-      pcsMaxTemp(siteId)
+      const [startTime='', endTime=''] = timeRange;
+      pcsMaxTemp(siteId,startTime,endTime)
         .then((response) => {
           this.setOption(response?.data?.pcsMaxTempList || []);
         })

src/views/ems/dzjk/sbjk/ssyx/index.vue

@@ -3,6 +3,8 @@
 <div class="ssyx-ems-dashboard-editor-container">
 <!--  6个方块-->
   <real-time-base-info :data="runningHeadData"/>
+  <!-- 时间选择 -->
+  <date-range-select ref="dateRangeSelect" @updateDate="updateDate" style="margin-top:20px;"/>
 <!--  echart图表-->
   <el-row :gutter="32" style="background:#fff;margin:30px 0;">
     <el-col :xs="24" :sm="12" :lg="12">
@@ -27,6 +29,7 @@
 
 </style>
 <script>
+import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
 import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
 import CnglqxChart from './CnglqxChart.vue'
 import PocpjwdChart from './PocpjwdChart.vue'
@@ -38,11 +41,13 @@ import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
   name:'DzjkSbjkSsyx',
-  components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
+  components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart,DateRangeSelect},
   mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       runningHeadData:{},//运行信息
+      timeRange:[],
+      isInit:true
     }
   },
   methods:{
@@ -52,17 +57,27 @@ export default {
         this.runningHeadData = response?.data || {}
       })
     },
+    // 更新时间范围 重置图表
+    updateDate(data){
+      this.timeRange=data
+      !this.isInit && this.updateChart()
+      this.isInit = false
+    },
+    updateChart(){
+      this.$refs.cnglqx.init(this.siteId,this.timeRange||[])
+      this.$refs.pocpjwd.init(this.siteId,this.timeRange||[])
+      this.$refs.dcpjsoc.init(this.siteId,this.timeRange||[])
+      this.$refs.dcpjwd.init(this.siteId,this.timeRange||[])
+      this.updateInterval(this.updateData)
+    },
     updateData(){
       this.getRunningHeadData()
-      this.$refs.cnglqx.init(this.siteId)
-      this.$refs.pocpjwd.init(this.siteId)
-      this.$refs.dcpjsoc.init(this.siteId)
-      this.$refs.dcpjwd.init(this.siteId)
+      this.updateChart()
     },
     init(){
+      this.$refs.dateRangeSelect.init(true)
       this.$nextTick(()=>{
         this.updateData()
-        this.updateInterval(this.updateData)
       })
     }
   }