重构

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

@@ -2,24 +2,24 @@
 <template>
 <div class="ssyx-ems-dashboard-editor-container">
 <!--  6个方块-->
-  <real-time-base-info :data="runningHeadData"/>
+  <real-time-base-info :display-data="runningDisplayData" :loading="runningHeadLoading"/>
   <!-- 时间选择 -->
   <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">
-      <cnglqx-chart ref='cnglqx'/>
+      <cnglqx-chart ref='cnglqx' :display-data="runningDisplayData"/>
     </el-col>
     <el-col :xs="24" :sm="12" :lg="12">
-      <pocpjwd-chart ref='pocpjwd'/>
+      <pocpjwd-chart ref='pocpjwd' :display-data="runningDisplayData"/>
     </el-col>
   </el-row>
   <el-row :gutter="32" style="margin:30px 0;">
     <el-col :xs="24" :sm="12" :lg="12">
-      <dcpjsoc-chart ref="dcpjsoc"/>
+      <dcpjsoc-chart ref="dcpjsoc" :display-data="runningDisplayData"/>
     </el-col>
     <el-col :xs="24" :sm="12" :lg="12">
-      <dcpjwd-chart ref="dcpjwd"/>
+      <dcpjwd-chart ref="dcpjwd" :display-data="runningDisplayData"/>
     </el-col>
   </el-row>
 </div>
@@ -36,7 +36,7 @@ import PocpjwdChart from './PocpjwdChart.vue'
 import DcpjwdChart from './DcpjwdChart.vue'
 import DcpjsocChart from './DcpjsocChart.vue'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import {getRunningHeadInfo} from '@/api/ems/dzjk'
+import {getProjectDisplayData} from '@/api/ems/dzjk'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 
 export default {
@@ -45,16 +45,20 @@ export default {
   mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
-      runningHeadData:{},//运行信息
+      runningDisplayData: [], //单站监控项目配置展示数据
       timeRange:[],
-      isInit:true
+      isInit:true,
+      runningHeadLoading: false,
     }
   },
   methods:{
     //6个方块数据
     getRunningHeadData(){
-      getRunningHeadInfo(this.siteId).then(response => {
-        this.runningHeadData = response?.data || {}
+      this.runningHeadLoading = true
+      return getProjectDisplayData(this.siteId).then((displayResponse) => {
+        this.runningDisplayData = displayResponse?.data || []
+      }).finally(() => {
+        this.runningHeadLoading = false
       })
     },
     // 更新时间范围 重置图表
@@ -71,8 +75,9 @@ export default {
       this.updateInterval(this.updateData)
     },
     updateData(){
-      this.getRunningHeadData()
-      this.updateChart()
+      this.getRunningHeadData().finally(() => {
+        this.updateChart()
+      })
     },
     init(){
       this.$refs.dateRangeSelect.init(true)