pcs、bms接口联调

src/views/ems/dzjk/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-loading="loading">
     <el-row :gutter="32" style="background:#fff;">
       <el-col :xs="24" :sm="24" :lg="10">
         <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
@@ -57,24 +57,19 @@
 <script>
 import {getDzjkHomeView} from '@/api/ems/dzjk'
 import NllzChart from "./NllzChart.vue";
+import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
 export default {
   name:'DzjkSbjkHome',
-  components: {NllzChart},
-  watch: {
-    '$route.query':{
-      handler (newQuery,oldQuery) {
-          // 参数变化处理
-          console.log('单站监控=>首页=>页面地址发生变化',newQuery,oldQuery)
-          this.$nextTick(() => {
-            const {siteId} =newQuery
-              siteId && this.getData(newQuery.siteId)
-          })
-      },
-      immediate: true,
+  computed: {
+    loader() {
+      return loader
     }
   },
+  components: {NllzChart},
+  mixins: [getQuerySiteId],
   data() {
     return {
+      loading:false,
       sjglData:[{
         title:'今日充电量（MWh）',
         value:'',
@@ -97,15 +92,16 @@ export default {
     }
   },
   methods:{
-    getData(siteId){
-      getDzjkHomeView(siteId).then(response => {
-        const data = response.data || {}
+    init(){
+      this.loading = true
+      getDzjkHomeView(this.siteId).then(response => {
+        const data = response?.data || {}
         this.sjglData.forEach(item=>{
           item.value = (data[item.attr] || data[item.attr] === 0) ? data[item.attr] : '-'
         })
         this.tableData = data?.siteMonitorHomeAlarmVo || []
         this.$refs.nllzChart.setOption(data)
-      })
+      }).finally(() => {this.loading = false})
     }
   },
 }