重构

src/views/ems/zddt/index.vue

@@ -1,33 +1,55 @@
 <template>
   <div class="ems-dashboard-editor-container" v-loading="loading">
     <zd-info></zd-info>
-    <div class="ems-content-container ">
+    <div class="ems-content-container">
       <div class="map-container">
-        <map-chart ref="mapChart"/>
-      </div>
-      <div class="zd-msg-container">
-        <div class="zd-msg-top">
-          <zd-select ref="zdSelect" @submitSite="submitSite"></zd-select>
-          <el-card class="common-card-container">
-            <div slot="header">
-              <span class="card-title">基本信息</span>
-              <el-button style="float: right; padding: 3px 0" type="text" size="small" @click="toDzjk">查看详情</el-button>
+        <div class="site-cards-wrapper" v-if="allSites.length > 0">
+          <button
+            class="site-cards-arrow site-cards-arrow--left"
+            type="button"
+            :disabled="!canScrollLeft"
+            @click="scrollSiteCards('left')"
+          >
+            <i class="el-icon-arrow-left"></i>
+          </button>
+          <div ref="siteCards" class="site-cards" @scroll="updateScrollButtons">
+            <div
+              v-for="item in allSites"
+              :key="item.siteId"
+              class="site-card"
+              :class="{ active: isSameSite(item.siteId, singleSiteId) }"
+              @click="submitSite(item.siteId)"
+            >
+              <div class="site-card-name">{{ item.siteName || '-' }}</div>
+              <div class="site-card-info-row">
+                <span class="site-card-label">电站位置</span>
+                <span class="site-card-value site-card-value--address">{{ formatSiteCardField(item.siteAddress) }}</span>
+              </div>
+              <div class="site-card-info-row">
+                <span class="site-card-label">投运时间</span>
+                <span class="site-card-value">{{ formatSiteCardDate(item.runningTime) }}</span>
+              </div>
+              <div class="site-card-info-row">
+                <span class="site-card-label">装机功率(MW)</span>
+                <span class="site-card-value">{{ formatSiteCardField(item.installPower) }}</span>
+              </div>
+              <div class="site-card-info-row">
+                <span class="site-card-label">装机容量(MW)</span>
+                <span class="site-card-value">{{ formatSiteCardField(item.installCapacity) }}</span>
+              </div>
             </div>
-            <div class="single-zd-name">{{singleSiteName}}</div>
-<!--      四个方块-->
-            <el-row :gutter="14">
-              <el-col :span="12"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
-                <single-square-box :data="item"></single-square-box>
-              </el-col>
-            </el-row>
- <!--     基本信息     -->
-            <el-descriptions class="single-zd-info-container" :column="1" >
-              <el-descriptions-item  v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{item.value | formatNumber }}</el-descriptions-item>
-            </el-descriptions>
-<!--      echarts柱状图-->
-          <bar-chart ref="barChart"></bar-chart>
-          </el-card>
-
+          </div>
+          <button
+            class="site-cards-arrow site-cards-arrow--right"
+            type="button"
+            :disabled="!canScrollRight"
+            @click="scrollSiteCards('right')"
+          >
+            <i class="el-icon-arrow-right"></i>
+          </button>
+        </div>
+        <div class="map-view">
+          <map-chart ref="mapChart"/>
         </div>
       </div>
     </div>
@@ -36,94 +58,101 @@
 
 <script>
 import ZdInfo from '@/components/Ems/ZdBaseInfo/index.vue'
-import ZdSelect from '@/components/Ems/ZdSelect/index.vue'
-import SingleSquareBox from '@/components/Ems/SingleSquareBox/index.vue'
-import BarChart from './BarChart.vue'
 import MapChart from './MapChart.vue'
-import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
+import { getAllSites } from '@/api/ems/zddt'
 export default {
-  components:{ZdSelect,ZdInfo,SingleSquareBox,BarChart,MapChart},
+  components: { ZdInfo, MapChart },
   data() {
     return {
-      loading:false,
-      singleSiteId:'',
-      singleSiteName:'',
-      singleSiteLocation:[],
-      // 单个电站 四个方块数据
-      singleZdSqaure:[
-        {
-          title:'今日充电（kWh）',
-          value:'',
-          bgColor:'#FFE5E5',
-          attr:'dayChargedCap'
-        },{
-          title:'累计充电（kWh）',
-          value:'',
-          bgColor:'#FFE5E5',
-          attr:'totalChargedCap'
-        },{
-          title:'今日放电（kWh）',
-          value:'',
-          bgColor:'#EEEBFF',
-          attr:'dayDisChargedCap'
-        },{
-          title:'累计放电（kWh）',
-          value:'',
-          bgColor:'#EEEBFF',
-          attr:'totalDisChargedCap'
-        }
-      ],
-
-    //   单个电站 基本信息
-      singleZdInfo:[{
-        title:'电站位置',
-        value:'',
-        attr:'siteAddress'
-      },{
-        title:'投运时间',
-        value:'',
-        attr:'runningTime'
-      },{
-        title:'装机功率(MW)',
-        value:'',
-        attr:'installPower'
-      },{
-        title:'装机容量(MW)',
-        value:'',
-        attr:'installCapacity',
-      }]
+      loading: false,
+      singleSiteId: '',
+      singleSiteName: '',
+      singleSiteLocation: [],
+      allSites: [],
+      canScrollLeft: false,
+      canScrollRight: false
     }
   },
+  mounted() {
+    this.loadSites()
+    window.addEventListener('resize', this.updateScrollButtons)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.updateScrollButtons)
+  },
   methods:{
+    isSameSite(siteId, selectedId) {
+      return String(siteId) === String(selectedId)
+    },
+    formatSiteCardField(value) {
+      if (value === null || value === undefined || value === '') {
+        return '-'
+      }
+      return value
+    },
+    formatSiteCardDate(value) {
+      if (!value) {
+        return '-'
+      }
+      const text = String(value)
+      if (text.includes('T')) {
+        return text.slice(0, 10)
+      }
+      return text.length > 10 ? text.slice(0, 10) : text
+    },
+    loadSites() {
+      this.loading = true
+      getAllSites().then(response => {
+        this.allSites = response?.data || []
+        if (this.allSites.length > 0) {
+          this.submitSite(this.allSites[0].siteId)
+        } else {
+          this.updateMapMarkers()
+        }
+        this.$nextTick(() => {
+          this.updateScrollButtons()
+        })
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    updateScrollButtons() {
+      const container = this.$refs.siteCards
+      if (!container) {
+        this.canScrollLeft = false
+        this.canScrollRight = false
+        return
+      }
+      const maxScrollLeft = container.scrollWidth - container.clientWidth
+      this.canScrollLeft = container.scrollLeft > 0
+      this.canScrollRight = maxScrollLeft > 0 && container.scrollLeft < maxScrollLeft - 1
+    },
+    scrollSiteCards(direction) {
+      const container = this.$refs.siteCards
+      if (!container) {
+        return
+      }
+      const amount = Math.max(container.clientWidth * 0.8, 240)
+      const delta = direction === 'left' ? -amount : amount
+      container.scrollBy({ left: delta, behavior: 'smooth' })
+    },
+    updateMapMarkers(){
+      this.$refs.mapChart && this.$refs.mapChart.setOption({
+        selected: {name:this.singleSiteName,value:this.singleSiteLocation},
+        sites:this.allSites
+      })
+    },
     // 站点选中
     submitSite(id){
-      if(this.singleSiteId === id){return console.log(`点击搜索按钮 搜索相同的站点id= ${id}不再调用获取基本信息接口`)}
-      this.loading=true
-      console.log('点击搜索按钮 选中的站点id',id)
       this.singleSiteId = id
-      this.$refs.zdSelect.searchLoading = true
-      getSingleSiteBaseInfo(id).then(response => {
-        console.log('单个站点详情数据',response)
-        const res = response?.data || {}
-        this.singleSiteName = res?.siteName || ''//站点名称
-        this.singleSiteLocation = res?.siteLocation || []//站点坐标
-        this.singleZdSqaure.forEach(item=>{
-          item.value =res[item.attr]
-        })
-        this.singleZdInfo.forEach(item=>{
-          item.value = res[item.attr]
-        })
-        this.$refs.barChart.setOption(res?.sevenDayDisChargeStats || [])
-        this.$refs.mapChart.setOption([{name:this.singleSiteName,value:this.singleSiteLocation}])
-      }).finally(() => {this.$refs.zdSelect.searchLoading = false;this.loading=false})
-    },
-    //跳转单站监控页面
-    toDzjk(){
-      this.$router.push({
-        path:'/dzjk',
-        query:{
-          siteId:this.singleSiteId,
-        }
+      const currentSite = this.allSites.find(item => this.isSameSite(item.siteId, id)) || {}
+      this.singleSiteName = currentSite.siteName || ''
+      this.singleSiteLocation = currentSite.siteLocation || []
+      if (!this.singleSiteLocation.length) {
+        this.singleSiteLocation = [currentSite.longitude, currentSite.latitude].filter(item => item !== undefined && item !== null)
+      }
+      this.$nextTick(() => {
+        this.updateMapMarkers()
       })
     }
   },
@@ -134,29 +163,119 @@ export default {
 .ems-content-container{
   display: flex;
   padding:24px;
-  padding-right: 0;
   .map-container{
     flex:auto;
-  }
-  .zd-msg-container{
-    width: 500px;
-    padding: 24px;
-    .single-zd-name{
-      font-weight: 500;
-      line-height: 23px;
-      color: #FFBD00;
-      font-size: 16px;
-      margin-bottom: 24px;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    .site-cards-wrapper{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      .site-cards-arrow{
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 50%;
+        background: #ffffff;
+        box-shadow: 0 0 0 1px #dcdfe6 inset;
+        color: #606266;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        transition: all .2s ease;
+        &:hover:not(:disabled){
+          color: #2b74ff;
+          box-shadow: 0 0 0 1px #2b74ff inset;
+        }
+        &:disabled{
+          cursor: not-allowed;
+          color: #c0c4cc;
+          box-shadow: 0 0 0 1px #ebeef5 inset;
+        }
+      }
     }
-    .single-square-box-container{
-      height: 78px;
-      box-sizing: border-box;
-      margin-bottom: 10px;
+    .site-cards{
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      padding-bottom: 2px;
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar{
+        display: none;
+      }
+      .site-card{
+        flex: 0 0 360px;
+        height: 166px;
+        border-radius: 8px;
+        background: #ffffff;
+        border: 1px solid #e4e7ed;
+        padding: 10px;
+        box-sizing: border-box;
+        cursor: pointer;
+        transition: all .2s ease;
+        .site-card-name{
+          font-size: 14px;
+          font-weight: 600;
+          color: #303133;
+          line-height: 22px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .site-card-info-row{
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+          margin-top: 6px;
+          font-size: 12px;
+          line-height: 18px;
+        }
+        .site-card-label{
+          flex: 0 0 84px;
+          font-size: 12px;
+          color: #909399;
+          white-space: nowrap;
+        }
+        .site-card-value{
+          flex: 1;
+          color: #606266;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        .site-card-value--address{
+          white-space: normal;
+          word-break: break-all;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          text-overflow: unset;
+          min-height: 36px;
+        }
+        &:hover{
+          border-color: #c0d3ff;
+        }
+        &.active{
+          border-color: #2b74ff;
+          box-shadow: 0 0 0 1px rgba(43,116,255,.15) inset;
+          background: #f5f9ff;
+          .site-card-name{
+            color: #2b74ff;
+          }
+          .site-card-value{
+            color: #5f8ee3;
+          }
+        }
+      }
     }
-    .single-zd-info-container{
-      font-size: 12px;
-      margin-top: 10px;
-      color:#666666;
+    .map-view{
+      height: 70vh;
+      min-height: 520px;
     }
   }
 }