pcs顶部方块样式调整

src/api/ems/dzjk.js

@@ -75,3 +75,20 @@ export function getAmmeterDataList(siteId) {
     method: 'get'
   })
 }
+
+// 故障告警
+export function getAlarmDetailList({siteId, deviceType, alarmLevel, alarmStartTime, alarmEndTime,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteAlarm/getAlarmDetailList?siteId=${siteId}&deviceType=${deviceType}&alarmLevel=${alarmLevel}&alarmStartTime=${alarmStartTime}&alarmEndTime=${alarmEndTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 概率统计
+//获取概率统计 电量指标接口
+export function getElectricData({siteId,startDate,endDate}) {
+  return request({
+    url: `/ems/statsReport/getElectricData?siteId=${siteId}&startDate=${startDate}&endDate=${endDate}`,
+    method: 'get'
+  })
+}

src/api/ems/site.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+// 站点列表
+export function getSiteInfoList({siteName,startTime, endTime,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteConfig/getSiteInfoList?siteName=${siteName}&startTime=${startTime}&endTime=${endTime}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 设备列表
+export function getDeviceInfoList({siteId,pageSize,pageNum}) {
+  return request({
+    url: `/ems/siteConfig/getDeviceInfoList?siteId=${siteId}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+
+// 设备详情
+export function getDeviceDetailInfo(deviceId) {
+  return request({
+    url: `/ems/siteConfig/getDeviceDetailInfo?deviceId=${deviceId}`,
+    method: 'get'
+  })
+}

src/components/Ems/SingleSquareBox/index.vue

@@ -24,7 +24,7 @@
       font-weight: 500;
     }
     ::v-deep .el-card__body{
-      padding: 12px 16px;
+      padding: 12px 10px;
     }
   }
 </style>

src/components/Ems/ZdBaseInfo/index.vue

@@ -65,11 +65,13 @@ export default {
 </script>
 <style scoped lang="scss">
 .card{
-  width: 150px;
+  min-width: 150px;
   height: 96px;
   margin-right: 27px;
   border-bottom: 4px solid transparent;
   text-align: center;
+  box-sizing: border-box;
+  padding:0 10px;
   .info{
     color: #666666;
     line-height: 14px;

src/filters/ems.js

@@ -4,3 +4,16 @@ export const formatNumber = (val) => {
    return val
  }else {return '-'}
 }
+
+
+export const formatDate = (val,toSeconds = false) => {
+  if(!val) return ''
+  const date = new Date(val)
+  const month = date.getMonth() + 1,day = date.getDate()
+  if(!toSeconds){
+    return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day}`
+  }else{
+    const hours = date.getHours(),minuets=date.getMinutes(),seconds = date.getSeconds();
+    return `${date.getFullYear()}-${month<10?'0'+month : month}-${day<10 ? '0'+day : day} ${hours<10 ? '0'+hours : hours}:${minuets<10 ? '0'+minuets : minuets}:${seconds<10 ? '0'+seconds : seconds}`
+  }
+}

src/router/ems.js

@@ -41,7 +41,7 @@ export const dzjk=[
             path: '/dzjk/home',
             component: () => import('@/views/ems/dzjk/home/index.vue'),
             name: 'DzjkHome',
-            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
+            meta: { title: '站点首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
           },
           {
             path: '/dzjk/sbjk',

src/store/modules/ems.js

@@ -8,6 +8,9 @@ const ems = {
     warnOptions:{0:'正常', 1:'中断', 2:'不在线',3:'异常'},//告警状态
     communicationStatusOptions:{'0':'正常','1':'通讯中断','2':'异常'},//通讯状态
     workModeOptions:{'0':'正常','1':'停止'},//工作模式
+    alarmLevelOptions:{'A':'提示','B':'一般','C':'严重','D':'紧急'},//告警等级
+    alarmStatusOptions:{'0':'待处理','1':'已处理','2':'处理中'},//告警状态
+    deviceTypeOptions:{'TCP':'TCP','RTU':'RTU'},//设备类型
   },
   mutations: {
     SET_ZD_LIST(state, list) {

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

@@ -1,16 +1,16 @@
 
 <template>
-  <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+  <el-card  v-loading="loading" gshadow="always" class="common-card-container common-card-container-no-title-bg">
     <!--    搜索栏-->
     <el-form :inline="true" class="select-container">
       <el-form-item label="设备类型">
-        <el-select v-model="search.sblx" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.name" :value="item.id" v-for="(item,index) in sblxOptions" :key="index+'sblxOptions'"></el-option>
+        <el-select v-model="search.deviceType" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.deviceTypeOptions" :key="key+'deviceTypeOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="告警等级">
-        <el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.name" :value="item.id" v-for="(item,index) in gjdjOptions" :key="index+'gjdjOptions'"></el-option>
+        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="时间选择">
@@ -48,7 +48,7 @@
           max-height="500"
           style="width: 100%;margin-top:25px;">
           <el-table-column
-            prop="name"
+            prop="deviceName"
             width="200"
             label="设备名称">
           </el-table-column>
@@ -56,43 +56,66 @@
             label="告警等级"
           >
             <template slot-scope="scope">
-              <span>{{scope.row.gjdj}}</span>
+              <span>{{$store.state.ems.alarmLevelOptions[scope.row.alarmLevel]}}</span>
             </template>
           </el-table-column>
           <el-table-column
+            prop="alarmContent"
+            show-overflow-tooltip
             label="告警内容">
+          </el-table-column>
+          <el-table-column
+            prop="alarmStartTime"
+            label="告警发生时间">
             <template slot-scope="scope">
-              <span>{{scope.row.gjnr}}</span>
+              <span>{{formatDate(scope.row.alarmStartTime,true)}}</span>
             </template>
           </el-table-column>
           <el-table-column
-            prop="startTime"
-            label="告警发生时间">
-          </el-table-column>
-          <el-table-column
-            prop="finishTime"
+            prop="alarmEndTime"
             label="告警结束时间">
+            <template slot-scope="scope">
+              <span>{{formatDate(scope.row.alarmEndTime,true)}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             label="状态">
             <template slot-scope="scope">
-              <span :class="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
+              <span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
             </template>
           </el-table-column>
         </el-table>
+      <el-pagination
+        v-show="tableData.length>0"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+      >
+      </el-pagination>
     </div>
   </el-card>
 </template>
 
 
 <script>
+import {getAlarmDetailList} from'@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import { formatDate } from '@/filters/ems'
 export default {
   name:'DzjkGzgj',
+  mixins:[getQuerySiteId],
   data() {
     return {
+      loading:false,
       btnList:[
         {name:'今日告警',id:'today'},
-        {name:'历史告警',id:'yesterday'},
+        {name:'历史告警',id:'history'},
       ],
       pickerOptions:{
         disabledDate(time) {
@@ -100,56 +123,115 @@ export default {
         },
       },
       defaultDateRange:[],//默认展示的时间
-      dateRange:[],
+      dateRange:[],//alarmStartTime,alarmEndTime
       activeBtn:'today',
-      loading:false,
-      search:{sblx:'',gjdj:''},
-      sblxOptions:[
-        {name:'类型一',id:1},
-        {name:'类型二',id:2},
-        {name:'类型三',id:3},
-      ],
-      gjdjOptions:[
-        {name:'等级一',id:1},
-        {name:'等级二',id:2},
-      ],
-      tableData:[
-        {name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
-        {name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
-        {name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
-        {name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
-      ]
+      search:{deviceType:'',alarmLevel:''},
+      // 表格、分页
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
     }
   },
   methods:{
+    formatDate,
+    // 判断是否是同一天
+    isSameDay(day1, day2) {
+      const date1 = new Date(day1),date2 = new Date(day2)
+      return date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate();
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
     // 搜索
     onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
+      // 选中了时间范围
+      if(alarmStartTime && alarmStartTime){
+        // 如果选择的时间范围是今天
+        if(this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
+          this.activeBtn = 'today'
+        }else {
+          this.activeBtn = 'history'
+        }
+      }else{
+        //没有选择时间范围 还是按照选中的今日告警、历史告警查询
+      }
       this.getData()
     },
     // 重置
     onReset(){
-      this.search.sblx=''
-      this.search.gjdj=''
+      this.search={deviceType:'',alarmLevel:''}
       this.dateRange=[]
+      this.pageNum =1//每次搜索从1开始搜索
       this.getData()
     },
-    // 获取数据
-    getData(){
-      this.loading=false
-    },
+    // 切换今日、历史告警
     changeDataType(id){
       if(id !== this.activeBtn){
         console.log('点击了不同的菜单，更新数据')
         this.activeBtn=id;
+        const [alarmStartTime,alarmEndTime]=(this.dateRange || [])
+        // 切换到今日告警，如果已经选择了时间范围清空
+        if(alarmStartTime && alarmEndTime){
+          // 如果切换到了今日告警，时间范围不相等或者相等但是不是今天 清空时间选择范围
+          if(id === 'today' && !this.isSameDay(alarmStartTime,alarmEndTime) || (this.isSameDay(alarmStartTime,alarmEndTime) && !this.isSameDay(alarmStartTime,new Date()))){
+            this.dateRange = []
+          }else if(id === 'history' && this.isSameDay(alarmStartTime,alarmEndTime) && this.isSameDay(alarmStartTime,new Date())){
+            // 切换成历史告警，但是选择时间范围是当天，清空时间范围
+            this.dateRange = []
+          }
+        }
+        this.getData()
       }
     },
-
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {deviceType,alarmLevel} = this.search
+      const {siteId,pageNum,pageSize,activeBtn} =this
+      const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
+      let start='',end = '',now =new Date()
+      if(activeBtn === 'today'){
+        start = end = now
+      }else{
+        if(alarmStartTime && alarmEndTime){
+          start = alarmStartTime
+          end = alarmEndTime
+        }else{
+          start=''
+          end = ''
+            // now
+          // end.setDate(end.getDate() - 1);
+        }
+      }
+      getAlarmDetailList({deviceType,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(start),alarmEndTime:formatDate(end)}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    init(){
+      this.onReset()
+    },
   },
   mounted(){
-    this.getData()
     const now = new Date();
     const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     this.defaultDateRange = [lastMonth, now];
   }
 }
 </script>
+

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

@@ -20,9 +20,9 @@
           <!--        进度-->
           <div class="process-container">
             <div class="process-line-bg">
-              <div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
+              <div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
             </div>
-            <div class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
+            <div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
           </div>
         </div>
         <el-table
@@ -58,27 +58,27 @@
             prop="maxVoltage"
             label="单体最高电压">
             <template slot-scope="scope">
-              <span>{{scope.row.maxVoltage}} V</span>
+              <span>{{scope.row.maxCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="minVoltage"
             label="单体最低电压">
             <template slot-scope="scope">
-              <span>{{scope.row.minVoltage}} V</span>
+              <span>{{scope.row.minCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
             label="单体最高温度">
             <template slot-scope="scope">
-              <span>{{scope.row.maxTemperature}} &#8451;</span>
+              <span>{{scope.row.maxCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="minTemperature"
             label="单体最低温度">
             <template slot-scope="scope">
-              <span>{{scope.row.minTemperature}} &#8451;</span>
+              <span>{{scope.row.minCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
 
@@ -100,15 +100,15 @@ export default {
       loading:false,
       baseInfoList:[],
       infoData:[
-        {label:'电池堆总电压',attr:'totalVoltage',unit:'V'},
-        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
-        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
-        {label:'电池堆总电流',attr:'totalCurrent',unit:'A'},
-        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
-        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
-        {label:'SOH',attr:'soh',unit:'%'},
-        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
-        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
+        {label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
+        {label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
+        {label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
+        {label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
+        {label:'SOH',attr:'stackSoh',unit:'%'},
+        {label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
+        {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
       ]
     }
   },

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

@@ -117,6 +117,7 @@ export default {
     },
     // 搜索
     onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
       this.getTableData()
     },
     // 重置
@@ -125,6 +126,7 @@ export default {
     onReset(){
       this.search={stackId:'',clusterId:''}
       this.clusterOptions=[]
+      this.pageNum = 1
       this.getTableData()
     },
     changeStackId(val){

src/views/ems/dzjk/tjbb/gltj/Dlzb.vue

@@ -3,7 +3,7 @@
     <div slot="header">
       <span class="card-title">电量指标</span>
     </div>
-    <div class="card-main">
+    <div class="card-main" v-loading="loading">
       <!--    搜索栏-->
       <div class="select-container">
         <el-form :inline="true">
@@ -19,7 +19,7 @@
             </el-date-picker>
           </el-form-item>
           <el-form-item>
-            <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+            <el-button type="primary" @click="getData" native-type="button">搜索</el-button>
           </el-form-item>
           <el-form-item>
             <el-button @click="onReset" native-type="button">重置</el-button>
@@ -27,9 +27,9 @@
         </el-form>
       </div>
       <div class="total-data">
-        <div>总充电量:<span class="point">1390988kWh</span></div>
-        <div>总放电量:<span class="point">988kWh</span></div>
-        <div>综合效率:<span class="point">99%</span></div>
+        <div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
+        <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
+        <div>综合效率:<span class="point">{{efficiency | formatNumber}}%</span></div>
       </div>
       <div id="dlzbChart" style="height: 310px"></div>
     </div>
@@ -39,8 +39,11 @@
 <script>
 import * as echarts from 'echarts'
 import resize from "@/mixins/ems/resize";
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getElectricData} from '@/api/ems/dzjk'
+import {formatDate} from '@/filters/ems'
 export default {
-  mixins: [resize],
+  mixins: [resize,getQuerySiteId],
   data() {
     return {
       pickerOptions:{
@@ -51,74 +54,94 @@ export default {
       defaultDateRange:[],//默认展示的时间
       dateRange:[],
       loading:false,
-      chart: null
-
+      chart: null,
+      totalChargedCap:'',
+      totalDisChargedCap:'',
+      efficiency:''
     }
   },
   methods: {
-    // 搜索
-    onSearch(){
-      this.getData()
-    },
     // 重置
     onReset(){
       this.dateRange=[]
       this.getData()
     },
-    getData(){
-      this.loading=true;
-      this.chart.showLoading()
-      //接口调用完成之后 设置图表、结束loading
-      this.setOption()
-      this.loading=false;
-      this.chart.hideLoading()
-    },
     setOption(data){
-      // const source = [['日期','充电量','放电量']]
-      // data.forEach(item=>{
-      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
-      // })
+      const source = [['日期','充电量','放电量','效率']]
+      data.forEach(item=>{
+        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap,item.dailyEfficiency])
+      })
       this.chart.setOption({
-        color:['#FFBD00','#3C81FF'],
+        color:['#FFBD00','#3C81FF','#05AEA3'],
         // legend: {
         //   left: 'right',
         //   bottom: '10',
         // },
         tooltip: {},
         xAxis: { type: 'category' },
-        yAxis: { type: 'value' },
-        grid:{top:30},
+        yAxis: [{
+          type: 'value',
+          name:'充电量/放电量kWh',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          name:'效率%',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
+        grid:{top:40},
         dataset:{
-          // source
-          source:[//格式
-            ['product','充电量','放电量'],
-            ['6/10',101,220],
-            ['6/11',210,390],
-            ['6/12',220,360],
-            ['6/13',520,340],
-            ['6/14',270,430],
-          ]
+          source
         },
         series: [
           {
+            yAxisIndex:0,
             type: 'bar',//柱状图
           },
           {
+            yAxisIndex:0,
             type: 'bar',//柱状图
           },
+          {
+            yAxisIndex:1,
+            type: 'line',//柱状图
+          },
         ]
       })
     },
-    initChart() {
+    getData(){
+      this.loading=true;
+      //接口调用完成之后 设置图表、结束loading
+      const [start='',end='']=this.dateRange || [];
+      const startDate=formatDate(start),endDate = formatDate(end)
+      getElectricData({siteId:this.siteId,startDate,endDate}).then(response => {
+        const {totalChargedCap='',totalDisChargedCap='',efficiency='',sevenDayDisChargeStats=[]}=response?.data || {}
+        this.setOption(sevenDayDisChargeStats || [])
+        this.totalChargedCap=totalChargedCap
+        this.totalDisChargedCap=totalDisChargedCap
+        this.efficiency=efficiency
+      }).finally(() => {
+        this.loading=false;
+      })
+    },
+    init(){
       this.chart = echarts.init(document.querySelector('#dlzbChart'));
+      this.onReset()
     }
   },
   mounted(){
     const now = new Date();
     const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     this.defaultDateRange = [lastMonth, now];
-    this.initChart()
-    this.getData()
   },
   beforeDestroy() {
     if (!this.chart) {

src/views/ems/site/sblb/index.vue

@@ -0,0 +1,197 @@
+
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-form :inline="true" class="select-container">
+        <el-form-item label="站点选择">
+          <el-select v-model="siteId" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+          </el-select>
+        </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+        <el-button @click="onReset" native-type="button">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="600px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="siteId"
+        label="站点ID">
+      </el-table-column>
+      <el-table-column
+        prop="siteName"
+        label="站点名称">
+      </el-table-column>
+      <el-table-column
+        prop="deviceId"
+        label="设备ID"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="deviceName"
+        label="设备名称">
+      </el-table-column>
+      <el-table-column
+        prop="deviceType"
+        label="设备类型">
+      </el-table-column>
+      <el-table-column
+        prop="communicationStatus"
+        label="通信状态">
+        <template slot-scope="scope">
+          <span>{{$store.state.ems.communicationStatusOptions[scope.row.communicationStatus]}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="140">
+        <template slot-scope="scope">
+          <el-button
+            @click="toDetail(scope.row.deviceId)"
+            type="primary"
+            size="small">
+            查看详情
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="tableData.length>0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false" :before-close="handleClosed">
+      <div class="descriptions-main" style="padding: 0" >
+        <el-descriptions direction="vertical" :column="2" :colon="false" border>
+          <el-descriptions-item v-for="item in detailData" labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" :label="item.label">{{item.value}}</el-descriptions-item>
+        </el-descriptions>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {getDeviceInfoList,getDeviceDetailInfo} from'@/api/ems/site'
+import {getAllSites} from '@/api/ems/zddt'
+import {formatNumber} from "@/filters/ems";
+export default {
+  name: "Sblb",
+  data() {
+    return {
+      loading:false,
+      searchLoading:false,
+      siteId:'',
+      siteList:[],
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+      dialogTableVisible:false,
+      detailData:[
+        {label:'设备ID',value:'',attr:'deviceId'},
+        {label:'设备名称',value:'',attr:'deviceName'},
+        {label:'设备类型',value:'',attr:'deviceType'},
+        {label:'通信状态',value:'',attr:'communicationStatus'},
+        {label:'TCP设备的IP地址',value:'',attr:'ipAddress'},
+        {label:'TCP端口号',value:'',attr:'ipPort'},
+        {label:'串口路径',value:'',attr:'serialPort'},
+        {label:'波特率',value:'',attr:'baudRate'},
+        {label:'数据位',value:'',attr:'dataBits'},
+        {label:'停止位',value:'',attr:'stopBits'},
+        {label:'校验位',value:'',attr:'parity'},
+        {label:'设备描述',value:'',attr:'description'},
+        {label:'设备类别',value:'',attr:'deviceCategory'},
+        {label:'上级设备ID',value:'',attr:'parentId'},
+        {label:'设备唯一标识符',value:'',attr:'deviceId'},
+      ],
+      detailformatAttr:{
+        'deviceType':'deviceTypeOptions',
+        'communicationStatus':'communicationStatusOptions',
+      }
+    }
+  },
+  methods:{
+    handleClosed(done){
+      this.detailData.forEach((item)=>{item.value = ''})
+      done()
+    },
+    toDetail(deviceId){
+      this.loading = true
+      getDeviceDetailInfo(deviceId).then(response => {
+        const data = response?.data || {};
+        this.detailData.forEach(item=>{
+          if(this.detailformatAttr[item.attr]){
+            item.value=formatNumber(this.$store.state.ems[this.detailformatAttr[item.attr]][data[item.attr]]);
+          }else{
+            item.value=formatNumber(data[item.attr]);
+          }
+
+        })
+        this.dialogTableVisible = true
+      }).finally(() => {this.loading = false})
+
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.siteId=''
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {siteId,pageNum,pageSize} =this
+      getDeviceInfoList({siteId,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+    //获取站点列表
+    getZdList(){
+      this.searchLoading=true
+      getAllSites().then(response => {
+        this.siteList = response?.data || []
+      }).finally(() => {this.searchLoading=false})
+    }
+  },
+  mounted() {
+    this.onReset()
+    this.getZdList()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/ems/site/zdlb/index.vue

@@ -0,0 +1,147 @@
+
+<template>
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="站点名称">
+        <el-input
+          v-model="siteName"
+          placeholder="请输入"
+          clearable
+          style="width: 240px"
+        />
+      </el-form-item>
+      <el-form-item label="运营时间">
+        <el-date-picker
+          v-model="dateRange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          :picker-options="pickerOptions"
+          :default-value="defaultDateRange"
+        ></el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
+        <el-button @click="onReset" native-type="button">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      class="common-table"
+      :data="tableData"
+      stripe
+      max-height="500px"
+      style="width: 100%;margin-top: 25px">
+      <el-table-column
+        prop="siteId"
+        label="站点ID">
+      </el-table-column>
+      <el-table-column
+        prop="siteName"
+        label="站点名称">
+      </el-table-column>
+      <el-table-column
+        prop="siteAddress"
+        label="站点地址"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="runningTime"
+        label="运营时间">
+      </el-table-column>
+      <el-table-column
+        prop="installPower"
+        label="装机功率">
+      </el-table-column>
+      <el-table-column
+        prop="installCapacity"
+        label="装机容量">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="tableData.length>0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top:15px;text-align: center"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import {getSiteInfoList} from '@/api/ems/site'
+import { formatDate } from '@/filters/ems'
+export default {
+  name: "Zdlb",
+  data() {
+    return {
+      loading:false,
+      siteName:"",
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],//startTime,endTime
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
+    }
+  },
+  methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getData()
+      })
+    },
+    // 搜索
+    onSearch(){
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.siteName=''
+      this.dateRange=[]
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=true
+      const {siteName,pageNum,pageSize} =this
+      const [startTime='',endTime='']=(this.dateRange || [])
+      getSiteInfoList({siteName,pageSize,pageNum,startTime:formatDate(startTime),endTime:formatDate(endTime)}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(() => {this.loading=false})
+    },
+  },
+  mounted() {
+    this.onReset()
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>