重构

src/components/Ems/ZdBaseInfo/index.vue

@@ -4,7 +4,10 @@
   <el-row type="flex" >
     <el-card shadow="hover" class="card common-card-container-body-no-padding" v-for="(item,index) in data" :key="index+'zdInfo'" :style="{borderBottomColor:item.color}">
       <div class="info">{{ item.title }}</div>
-      <div class="num">{{item.num | formatNumber}}</div>
+      <div class="num">
+        <i v-if="item.loading" class="el-icon-loading"></i>
+        <span v-else>{{item.num | formatNumber}}</span>
+      </div>
     </el-card>
   </el-row>
 </template>
@@ -18,30 +21,35 @@ export default {
         title:'站点总数（座）',
         num:'',
         color:'#FFBD00',
-        attr:'siteNum'
+        attr:'siteNum',
+        loading: true
       },{
         title:'装机功率（MW）',
         num:'',
         color:'#3C81FF',
-        attr:'installPower'
+        attr:'installPower',
+        loading: true
 
       },{
         title:'装机容量（MW）',
         num:'',
         color:'#5AC7C0',
-        attr:'installCapacity'
+        attr:'installCapacity',
+        loading: true
 
       },{
         title:'总充电量（KWh）',
         num:'',
         color:'#A696FF',
-        attr:'totalChargedCap'
+        attr:'totalChargedCap',
+        loading: true
 
       },{
         title:'总放电量（KWh）',
         num:'',
         color:'#A696FF',
-        attr:'totalDischargedCap'
+        attr:'totalDischargedCap',
+        loading: true
 
       }]
     }
@@ -50,6 +58,7 @@ export default {
     setData(res = {}){
       this.data.forEach((item)=>{
         item.num =res[item.attr]
+        item.loading = false
       })
     }
   },

src/components/Ems/ZdSelect/index.vue

@@ -2,8 +2,16 @@
 <template>
   <div class="zd-select-container">
     <el-form :inline="true">
-      <el-form-item label="站点选择">
-        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSubmit">
+      <el-form-item :label="showLabel ? '站点选择' : ''" :class="{'no-label': !showLabel}">
+        <el-select
+          v-model="id"
+          :size="size"
+          :placeholder="placeholder"
+          :loading="loading"
+          loading-text="正在加载数据"
+          :style="{width: selectWidth}"
+          @change="onSubmit"
+        >
           <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
         </el-select>
       </el-form-item>
@@ -15,7 +23,21 @@
 </template>
 
 <style scoped lang="scss">
-
+.zd-select-container {
+  .el-form {
+    display: inline-flex;
+    align-items: center;
+  }
+  .el-form-item {
+    margin-bottom: 0;
+  }
+  .no-label ::v-deep .el-form-item__label {
+    display: none;
+  }
+  .no-label ::v-deep .el-form-item__content {
+    margin-left: 0 !important;
+  }
+}
 </style>
 <script>
 import {getAllSites} from '@/api/ems/zddt'
@@ -31,6 +53,26 @@ import {mapGetters} from "vuex"
         type:String,
         default:'',
         required:false
+      },
+      showLabel: {
+        type: Boolean,
+        default: true,
+        required: false
+      },
+      size: {
+        type: String,
+        default: 'medium',
+        required: false
+      },
+      placeholder: {
+        type: String,
+        default: '请选择换电站名称',
+        required: false
+      },
+      selectWidth: {
+        type: String,
+        default: '220px',
+        required: false
       }
     },
     data() {
@@ -44,6 +86,16 @@ import {mapGetters} from "vuex"
     computed:{
       ...mapGetters(["zdList"]),
     },
+    watch: {
+      defaultSiteId(newVal) {
+        if (!newVal || !this.siteList || this.siteList.length === 0) {
+          return
+        }
+        if (this.siteList.find(item => item.siteId === newVal) && this.id !== newVal) {
+          this.id = newVal
+        }
+      }
+    },
     methods:{
       onSubmit(){
         this.$emit('submitSite',this.id)
@@ -60,7 +112,6 @@ import {mapGetters} from "vuex"
       getList(){
        return getAllSites().then(response => {
           this.siteList = response.data || []
-          console.log("获取站点列表返回数据",response,this.siteList)
           this.setDefaultSite()
         }).finally(() => {this.loading=false;this.searchLoading=false})
       }
@@ -71,15 +122,13 @@ import {mapGetters} from "vuex"
       this.$nextTick(()=>{
         if(this.getListByStore){
           if(this.zdList.length === 0){
-            this.getList().then(()=>{
-              this.$store.commit('SET_ZD_LIST', this.siteList)
-              console.log("从store中获取站点列表数据,但是store中的zdList=[]，所以从接口获取数据",this.zdList,this.siteList)
+              this.getList().then(()=>{
+                this.$store.commit('SET_ZD_LIST', this.siteList)
             })
           }else{
             this.siteList = this.zdList
             this.loading=false
             this.searchLoading=false
-            console.log("从store中获取站点列表数据",this.zdList,this.siteList)
             this.setDefaultSite()
           }
         }else{