概率统计-电量指标接口联调，站点信息6个方块样式调整

src/api/ems/dzjk.js

@@ -53,4 +53,42 @@ export function getClusterNameList(stackDeviceId) {
     method: 'get'
   })
 }
+//单体电池表格数据
+export function getClusterDataInfoList({siteId, stackDeviceId, clusterDeviceId, pageSize, pageNum}) {
+  return request({
+    url: `/ems/siteMonitor/getClusterDataInfoList?clusterDeviceId=${clusterDeviceId}&siteId=${siteId}&stackDeviceId=${stackDeviceId}&pageSize=${pageSize}&pageNum=${pageNum}`,
+    method: 'get'
+  })
+}
+//获取液冷列表数据
+export function getCoolingDataList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getCoolingDataList?siteId=${siteId}`,
+    method: 'get'
+  })
+}
 
+//获取电表数据
+export function getAmmeterDataList(siteId) {
+  return request({
+    url: `/ems/siteMonitor/getAmmeterDataList?siteId=${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/components/Ems/ZdBaseInfo/index.vue

@@ -4,7 +4,7 @@
   <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}}</div>
+      <div class="num">{{item.num | formatNumber}}</div>
     </el-card>
   </el-row>
 </template>
@@ -23,13 +23,13 @@ export default {
         title:'装机功率（MW）',
         num:'',
         color:'#3C81FF',
-        attr:'installedPower'
+        attr:'installPower'
 
       },{
         title:'装机容量（MW）',
         num:'',
         color:'#5AC7C0',
-        attr:'installedCap'
+        attr:'installCapacity'
 
       },{
         title:'总充电量（MWh）',
@@ -49,7 +49,7 @@ export default {
   methods: {
     setData(res = {}){
       this.data.forEach((item)=>{
-        item.num =(res[item.attr] || res[item.attr] === 0) ? res[item.attr] : '—'
+        item.num =res[item.attr]
       })
     }
   },
@@ -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/components/Ems/ZdSelect/index.vue

@@ -4,7 +4,7 @@
     <el-form :inline="true">
       <el-form-item label="站点选择">
         <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.siteName" :value="item.id" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
+          <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>
@@ -28,7 +28,7 @@ import {mapGetters} from "vuex"
         required:false
       },
       defaultSiteId:{//默认展示的站点ID
-        type:String|Number,
+        type:String,
         default:'',
         required:false
       }
@@ -50,10 +50,10 @@ import {mapGetters} from "vuex"
       },
       setDefaultSite(){
         const defaultSite = this.defaultSiteId
-        if(defaultSite && this.siteList.find(item=>item.id === defaultSite)){
+        if(defaultSite && this.siteList.find(item=>item.siteId === defaultSite)){
           this.id = defaultSite
         }else if(!defaultSite && this.siteList.length>0){
-          this.id = this.siteList[0].id
+          this.id = this.siteList[0].siteId
         }
         this.$emit('submitSite',this.id)
       },

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/store/modules/ems.js

@@ -1,6 +1,16 @@
 const ems = {
   state: {
-    zdList:[]
+    zdList:[],
+    workStatusOptions:{'0':'正常','1':'异常','2':'停止'},//工作状态
+    deviceStatusOptions:{'0':'在线','1':'离线','2':'维修中'},//设备状态
+    gridStatusOptions:{'0':'并网','1':'未并网'},//并网状态
+    controlModeOptions:{'0':'远程','1':'本地'},//控制模式
+    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-select v-model="search.deviceType" clearable 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-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-select v-model="search.alarmLevel" clearable 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-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"
+            prop="alarmEndTime"
-            label="告警发生时间">
-          </el-table-column>
-          <el-table-column
-            prop="finishTime"
             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,113 @@ export default {
         },
       },
       defaultDateRange:[],//默认展示的时间
-      dateRange:[],
+      dateRange:[],//alarmStartTime,alarmEndTime
       activeBtn:'today',
-      loading:false,
+      search:{deviceType:'',alarmLevel:''},
-      search:{sblx:'',gjdj:''},
+      // 表格、分页
-      sblxOptions:[
+      tableData:[],
-        {name:'类型一',id:1},
+      pageSize:10,//分页栏当前每个数据总数
-        {name:'类型二',id:2},
+      pageNum:1,//分页栏当前页数
-        {name:'类型三',id:3},
+      totalSize:0,//table表格数据总数
-      ],
-      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}
-      ]
     }
   },
   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(){
+      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={deviceType:'',alarmLevel:''}
-      this.search.gjdj=''
       this.dateRange=[]
       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/home/NllzChart.vue

@@ -15,6 +15,7 @@
 <script>
 import * as echarts from 'echarts'
 import resize from '@/mixins/ems/resize'
+import {formatNumber} from "@/filters/ems";
 
 export default {
   mixins: [resize],
@@ -45,12 +46,11 @@ export default {
       siteMonitorDataVo.forEach(item=>{
         source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
       })
-      const filterValue=(num)=>{return num || num === 0 ? num : '-'}
       this.chart.setOption({
         title: [
           // 右上角
           {
-            text: `电网 实时功率：${filterValue(gridNrtPower)} kW`,
+            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
             top: 10,
             right: 10,
             textStyle:{
@@ -60,7 +60,7 @@ export default {
           },
           // 右下角
           {
-            text: `负载 实时功率：${filterValue(loadNrtPower)} kW`,
+            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
             bottom: 10,
             right: 10,
             textStyle:{
@@ -80,7 +80,7 @@ export default {
           },
           // 左下角第二行
           {
-            text: `实时功率：${filterValue(energyStorageNrtPower)} kW`,
+            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
             bottom: 26,
             left: 10,
             textStyle:{
@@ -90,7 +90,7 @@ export default {
           },
           // 左下角第三行
           {
-            text: `可用电量：${filterValue(energyStorageAvailElec)} kWh`,
+            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
             bottom: 10,
             left: 10,
             textStyle:{

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

@@ -10,7 +10,7 @@
             <el-row :gutter="20">
               <el-col :span="12" v-for="(item,index) in sjglData" :key="index+'sjglData'" class="sjgl-data">
                   <div class="sjgl-title">{{item.title}}</div>
-                  <div class="sjgl-value">{{item.value}}</div>
+                  <div class="sjgl-value">{{item.value | formatNumber}}</div>
               </el-col>
             </el-row>
           </div>
@@ -37,7 +37,7 @@
                 label="状态"
                 >
                   <template slot-scope="scope">
-                    <span class="warning-status circle">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
+                    <span :class="{'circle warning-status' : scope.row.status !== 0}">{{ $store.state.ems.warnOptions[scope.row.status]}}</span>
                   </template>
               </el-table-column>
               <el-table-column
@@ -97,7 +97,7 @@ export default {
       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] : '-'
+          item.value =data[item.attr]
         })
         this.tableData = data?.siteMonitorHomeAlarmVo || []
         this.$refs.nllzChart.setOption(data)

src/views/ems/dzjk/sbjk/RealTimeBaseInfo.vue

@@ -3,7 +3,7 @@
   <!--  6个方块-->
   <el-row :gutter="10">
     <el-col :xs="12" :sm="8" :lg="4"  class="single-square-box-container" v-for="(item,index) in singleZdSqaure" :key="index+'singleSquareBox'">
-      <single-square-box :data="{...item,value:Object.values(data).length ? data[item.attr] || '-' : '-'}" ></single-square-box>
+      <single-square-box :data="{...item,value:formatNumber(data[item.attr])}" ></single-square-box>
     </el-col>
   </el-row>
 </template>
@@ -11,7 +11,7 @@
 
 <script>
 import SingleSquareBox from "@/components/Ems/SingleSquareBox/index.vue";
-
+import {formatNumber} from '@/filters/ems'
 export default {
   components:{SingleSquareBox},
   props:{
@@ -21,6 +21,7 @@ export default {
       default:()=>{return {}}
     },
   },
+  methods:{formatNumber},
   data() {
     return {
       // 单个电站 四个方块数据

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

@@ -8,9 +8,9 @@
         </div>
           <div class="descriptions-main">
             <el-descriptions direction="vertical" :column="3" :colon="false">
-              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="1" label="工作状态" >{{baseInfo.workStatus}}</el-descriptions-item>
+              <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1"  label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
-              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{baseInfo.pcsCommunicationStatus}}</el-descriptions-item>
+              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
-              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{baseInfo.emsCommunicationStatus}}</el-descriptions-item>
+              <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
             </el-descriptions>
           </div>
           <div class="descriptions-main descriptions-main-bg-color">

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

@@ -8,9 +8,9 @@
         </div>
         <div class="descriptions-main">
           <el-descriptions direction="vertical" :column="3" :colon="false">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="1" label="工作状态" >{{baseInfo.workStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{baseInfo.pcsCommunicationStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{baseInfo.emsCommunicationStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
           </el-descriptions>
         </div>
         <div class="descriptions-main descriptions-main-bg-color">

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

@@ -1,82 +1,82 @@
 
 <template>
-      <div>
+      <div v-loading="loading">
-        <el-card shadow="always" class="common-card-container zb-common-card-container">
+        <el-card shadow="always" class="common-card-container" :class="zbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
           <div slot="header">
               <span class="large-title">1#总表</span>
               <div class="status">
-                <div>通信中断</div>
+                <div>{{$store.state.ems.communicationStatusOptions[zbInfo.emsCommunicationStatus]}}</div>
-                <div>数据更新时间：2024-10-11 12:00:00</div>
+                <div>数据更新时间：{{zbInfo.dataUpdateTime}}</div>
               </div>
           </div>
           <el-table
             class="common-table"
-            :data="zbTableData"
+            :data="zbInfo.ammeterDataDetailInfos"
               stripe
               style="width: 100%;">
               <el-table-column
-                prop="name"
+                prop="category"
                 label="类别">
               </el-table-column>
               <el-table-column
-                prop="zong"
+                prop="totalKwh"
                 label="总/kWh"
               >
               </el-table-column>
               <el-table-column
-                prop="jian"
+                prop="sharpKwh"
                 label="尖/kWh">
               </el-table-column>
               <el-table-column
-                prop="feng"
+                prop="peakKwh"
                 label="峰/kWh">
               </el-table-column>
               <el-table-column
-                prop="ping"
+                prop="flatKwh"
                 label="平/kWh">
               </el-table-column>
               <el-table-column
-                prop="gu"
+                prop="valleyKwh"
                 label="谷/kWh">
               </el-table-column>
             </el-table>
         </el-card>
-        <el-card shadow="always" class="common-card-container cnb-common-card-container">
+        <el-card shadow="always" class="common-card-container" :class="cnbInfo.emsCommunicationStatus === '1' ? 'zb-common-card-container' : 'cnb-common-card-container'">
           <div slot="header">
             <span class="large-title">2#储能表</span>
             <div class="status">
-              <div>通信正常</div>
+              <div>{{$store.state.ems.communicationStatusOptions[cnbInfo.emsCommunicationStatus]}}</div>
-              <div>数据更新时间：2024-10-11 12:00:00</div>
+              <div>数据更新时间：{{cnbInfo.dataUpdateTime}}</div>
             </div>
           </div>
           <el-table
             class="common-table"
-            :data="cnbTableData"
+            :data="cnbInfo.ammeterDataDetailInfos"
             stripe
             style="width: 100%;">
             <el-table-column
-              prop="name"
+              prop="category"
               label="类别">
             </el-table-column>
             <el-table-column
-              prop="zong"
+              prop="totalKwh"
               label="总/kWh"
             >
             </el-table-column>
             <el-table-column
-              prop="jian"
+              prop="sharpKwh"
               label="尖/kWh">
             </el-table-column>
             <el-table-column
-              prop="feng"
+              prop="peakKwh"
               label="峰/kWh">
             </el-table-column>
             <el-table-column
-              prop="ping"
+              prop="flatKwh"
               label="平/kWh">
             </el-table-column>
             <el-table-column
-              prop="gu"
+              prop="valleyKwh"
               label="谷/kWh">
             </el-table-column>
           </el-table>
@@ -86,26 +86,26 @@
 
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getAmmeterDataList} from '@/api/ems/dzjk'
 export default {
   name:'DzjkSbjkDb',
+  mixins:[getQuerySiteId],
   data() {
     return {
-      zbTableData:[
+      loading:false,
-        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      zbInfo:{},
-        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      cnbInfo:{},
-        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-      ],
-      cnbTableData:[
-        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
-      ]
     }
   },
   methods:{
-
+    init(){
+      this.loading = true
+      getAmmeterDataList(this.siteId).then(response => {
+        this.zbInfo =JSON.parse(JSON.stringify(response?.data[0] || {}));
+        this.cnbInfo =JSON.parse(JSON.stringify(response?.data[1] || {}));
+      }).finally(() => {this.loading = false})
+    }
   },
   mounted(){
 

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

@@ -23,21 +23,66 @@
           <el-button @click="onReset" native-type="button">重置</el-button>
         </el-form-item>
       </el-form>
-      <div style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
         <!--    图表-->
-        <el-row style="background:#fff;margin:30px 0;">
+<!--      <div style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">-->
-          <el-col :xs="24" :sm="24" :lg="24">
+<!--        <el-row style="background:#fff;margin:30px 0;">-->
-            <bar-chart ref="barChart"/>
+<!--          <el-col :xs="24" :sm="24" :lg="24">-->
-          </el-col>
+<!--            <bar-chart ref="barChart"/>-->
-        </el-row>
+<!--          </el-col>-->
-      </div>
+<!--        </el-row>-->
+<!--      </div>-->
+        <el-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          style="width: 100%;margin-top: 25px">
+          <el-table-column
+            prop="deviceId"
+            label="单体编号">
+          </el-table-column>
+          <el-table-column
+            prop="clusterDeviceId"
+            label="簇号">
+          </el-table-column>
+          <el-table-column
+            prop="voltage"
+            label="电压（V）"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="temperature"
+            label="温度（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="soc"
+            label="SOC（%）">
+          </el-table-column>
+          <el-table-column
+            prop="soh"
+            label="SOH（%）">
+          </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-card>
 </template>
 
 
 <script>
 import BarChart from './BarChart'
-import {getStackNameList,getClusterNameList} from '@/api/ems/dzjk'
+import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 export default {
   name:'DzjkSbjkDtdc',
@@ -49,13 +94,30 @@ export default {
       clusterloading:false,
       search:{stackId:'',clusterId:''},
       stackOptions:[],//{id:'',deviceName:''}
-      clusterOptions:[]//{id:'',deviceName:''}
+      clusterOptions:[],//{id:'',deviceName:''}
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
     }
   },
   methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
     // 搜索
     onSearch(){
-      this.init(false)
+      this.getTableData()
     },
     // 重置
     // 清空搜索栏选中数据
@@ -63,7 +125,7 @@ export default {
     onReset(){
       this.search={stackId:'',clusterId:''}
       this.clusterOptions=[]
-      this.init(false)
+      this.getTableData()
     },
     changeStackId(val){
       if(val){
@@ -72,6 +134,18 @@ export default {
         this.getClusterList()
       }
     },
+    //表格数据
+    getTableData(){
+      this.loading=true;
+      const {stackId:stackDeviceId,clusterId:clusterDeviceId} =this.search
+      const {siteId,pageNum,pageSize}=this
+      getClusterDataInfoList({stackDeviceId,clusterDeviceId,siteId,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(()=>{
+        this.loading=false;
+      })
+    },
     getStackList(){
       getStackNameList(this.siteId).then(response => {
         this.stackOptions = JSON.parse(JSON.stringify(response?.data || []))
@@ -83,16 +157,11 @@ export default {
         this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []))
       }).finally(() => {this.clusterloading =false})
     },
-    init(mounted = true){
+    init(){
-      this.loading=true;
+      // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
-      // todo 获取单体电池数据
+      this.search={stackId:'',clusterId:''}//保证切换站点时，清空选择项
-      this.loading=false;
+      this.getStackList()
-      this.$refs.barChart.setOption()
+      this.getTableData()
-      // 只有页面初次加载的时候调用电池堆列表，其他情况不需要
-      if(mounted){
-        this.getStackList()
-      }
-
     }
   },
   mounted(){

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

@@ -5,24 +5,25 @@
     <real-time-base-info :data="runningHeadData"/>
 <!--    内容-->
     <el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
-      <el-header class="pcs-header">
+<!--      背景颜色根据工作状态来展示-->
+      <el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
         <div class="pcs-title">{{pcsItem.deviceName}}</div>
         <div class="pcs-status">
-          <div>{{pcsItem.communicationStatus}}</div>
+          <div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
           <div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
         </div>
-        <div class="pcs-btns">
+<!--        <div class="pcs-btns">-->
-          <el-button type="warning" size="small" @click="problemSaved">故障复位</el-button>
+<!--          <el-button type="warning" size="small" @click="problemSaved">故障复位</el-button>-->
-          <el-button size="small" @click="machineClosed">关机</el-button>
+<!--          <el-button size="small" @click="machineClosed">关机</el-button>-->
-        </div>
+<!--        </div>-->
       </el-header>
       <el-main style="padding: 0">
         <div class="descriptions-main">
           <el-descriptions direction="vertical" :column="4" :colon="false">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction danger"  :span="1" label="工作状态">{{pcsItem.workStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="并网状态">{{pcsItem.gridStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction save"  :span="1" label="设备状态">{{pcsItem.deviceStatus}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="控制模式">{{pcsItem.controlMode}}</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
           </el-descriptions>
         </div>
         <div class="descriptions-main descriptions-main-bg-color">
@@ -75,7 +76,7 @@ export default {
         {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
         {label:'交流频率',attr:'acFrequency',unit:'Hz'}
       ],
-      pcsBranchList:[]//pcs的支路列表
+      pcsBranchList:[],//pcs的支路列表
     }
   },
   methods:{
@@ -170,7 +171,7 @@ export default {
   border-radius: 6px 6px 0 0;
   //红色标题
   .pcs-header{
-    background: #FC6B69;
+    background: #05AEA3;
     display: flex;
     position: relative;
     justify-content: flex-start;
@@ -197,5 +198,11 @@ export default {
       transform: translateY(-50%);
     }
   }
+  .pcs-header.warn{
+    background-color:#FC6B69 ;
+  }
+  .pcs-header.close{
+    background-color:#666666 ;
+  }
 }
 </style>

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

@@ -1,78 +1,52 @@
 
 <template>
-    <div>
+    <div v-loading="loading">
-      <div class="yl-item-container">
+<!--      todo 判断条件是否需要更新-->
+      <div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
         <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">{{item.systemName}}</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+          <div>当前温度：<span class="header-values">{{item.currentTemperature}}&#8451;</span></div>
         </div>
         <div class="content">
           <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+            <el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8">{{tempDataItem.title}}：{{item[tempDataItem.attr]}}&#8451;</el-col>
           </el-row>
         </div>
       </div>
-
+      <el-empty v-show="list.length<=0" :image-size="200"></el-empty>
-      <div class="yl-item-container yl-warn-item-container">
+    </div>
-        <div class="header">
-          <div class="header-title">2#液冷</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
-        </div>
-        <div class="content">
-          <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
-          </el-row>
-        </div>
-      </div>
-      <div class="yl-item-container">
-        <div class="header">
-          <div class="header-title">3#液冷</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
-        </div>
-        <div class="content">
-          <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
-          </el-row>
-        </div>
-      </div>
-
-      <div class="yl-item-container yl-warn-item-container">
-        <div class="header">
-          <div class="header-title">4#液冷</div>
-          <div>工作模式：<span class="header-values">运行</span></div>
-          <div>当前温度：<span class="header-values">12&#8451;</span></div>
-        </div>
-        <div class="content">
-          <el-row>
-            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
-          </el-row>
-        </div>
-      </div>
-  </div>
 </template>
 
 
 <script>
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {getCoolingDataList} from '@/api/ems/dzjk'
 export default {
   name:'DzjkSbjkYl',
+  mixins:[getQuerySiteId],
   data() {
     return {
+      loading:false,
+      list:[],
       tempData:[
-        {title:'制热开启点',value:12,attr:''},
+        {title:'制热开启点',attr:'heatingStartPoint'},
-        {title:'制冷开启点',value:23,attr:''},
+        {title:'制冷开启点',attr:'coolingStartPoint'},
-        {title:'高温告警点',value:30,attr:''},
+        {title:'高温告警点',attr:'highTempAlarmPoint'},
-        {title:'制热停止点',value:24,attr:''},
+        {title:'制热停止点',attr:'heatingStopPoint'},
-        {title:'制冷停止点',value:21,attr:''},
+        {title:'制冷停止点',attr:'coolingStopPoint'},
-        {title:'低温告警点',value:10,attr:''},
+        {title:'低温告警点',attr:'lowTempAlarmPoint'},
 
       ]
     }
   },
   methods:{
-
+    init(){
+      this.loading = true
+      getCoolingDataList(this.siteId).then(response => {
+        this.list =  JSON.parse(JSON.stringify(response?.data || []));
+      }).finally(() => {this.loading = false})
+    }
   },
   mounted(){
 

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">{{totalChargedCap | formatNumber}}kWh</span></div>
-        <div>总放电量:<span class="point">988kWh</span></div>
+        <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
-        <div>综合效率:<span class="point">99%</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,92 @@ 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 = [['日期','充电量','放电量']]
+      const source = [['日期','充电量','放电量','效率']]
-      // data.forEach(item=>{
+      data.forEach(item=>{
-      //   source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
+        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' },
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
         grid:{top:30},
         dataset:{
-          // source
+          source
-          source:[//格式
-            ['product','充电量','放电量'],
-            ['6/10',101,220],
-            ['6/11',210,390],
-            ['6/12',220,360],
-            ['6/13',520,340],
-            ['6/14',270,430],
-          ]
         },
         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/ticket/AddTicket.vue

@@ -0,0 +1,110 @@
+<template>
+    <el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" :title="mode === 'add'?'新增模板':`编辑todo 工单名称` " :close-on-click-modal="false" :show-close="false">
+      <el-form ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-form-item label="工单号" prop="gdh">
+          <el-input :disabled="mode !=='add'" v-model="formData.gdh" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="工单标题" prop="title" required>
+          <el-input v-model="formData.title" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="问题描述" prop="question" required>
+          <el-input v-model="formData.question" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="处理状态" prop="handleStatus">
+          <el-select v-model="formData.handleStatus" placeholder="请选择">
+            <el-option :label="value" :value="key" v-for="(value,key) in handleStatusOptions" :key="key+'handleStatusOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="提交人" prop="submitName" required>
+          <el-input v-model="formData.submitName" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="处理人" prop="handleName" required>
+          <el-input v-model="formData.handleName" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+        <el-form-item label="提交时间" prop="submitTime" required>
+          <el-input v-model="formData.submitTime" placeholder="请输入" clearable :style="{width: '100%'}">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer">
+        <el-button @click="closeDialog">取消</el-button>
+        <el-button type="primary" @click="saveDialog">确定</el-button>
+      </div>
+    </el-dialog>
+</template>
+<script>
+export default {
+  props:{
+    mode:{
+      type:String,
+      default:"add"
+    },
+//todo 修改数据时，从接口获取工单详情还是从列表中返回？
+  },
+  data() {
+    return {
+      dialogTableVisible:false,
+      handleStatusOptions:{'0':'处理完成','1':'处理中','2':'未处理'},
+      formData: {
+        gdh: '',//工单号
+        title: '',//工单标题
+        question: '',
+        handleStatus:'',
+        submitName:'',
+        handleName: '',
+        submitTime: '',
+      },
+      rules: {
+        gdh: [{
+          required: true,
+          message: '请输入',
+          trigger: 'blur'
+        }],
+      },
+    }
+  },
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {
+    saveDialog() {
+      this.$refs.addTempForm.validate(valid => {
+        if (!valid) return
+        this.closeDialog()
+      })
+    },
+    closeDialog(){
+      // 清空所有数据
+      this.$refs.addTempForm.resetFields()
+      this.formData={
+        gdh: '',//工单号
+        title: '',//工单标题
+        question: '',
+        handleStatus:'',
+        submitName:'',
+        handleName: '',
+        submitTime: '',
+      }
+      this.dialogTableVisible=false
+    }
+  }
+}
+
+</script>
+<style scoped>
+.ems-dialog{
+  .el-dialog{
+    max-width: 700px;
+  }
+  .add-time-form{
+    .el-input{
+      width: 220px;
+    }
+  }
+}
+</style>

src/views/ems/ticket/index.vue

@@ -1,333 +1,158 @@
 <template>
-  <div class="app-container">
+  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-button type="primary" @click="addTicket" native-type="button">新增</el-button>
-      <el-form-item label="工单号" prop="ticketNo">
+    <el-table
-        <el-input
+      class="common-table"
-          v-model="queryParams.ticketNo"
+      :data="tableData"
-          placeholder="请输入工单号"
+      stripe
-          clearable
+      max-height="500px"
-          @keyup.enter.native="handleQuery"
+      style="width: 100%;margin-top: 25px">
-        />
+      <el-table-column
-      </el-form-item>
+        prop="gdh"
-      <el-form-item label="工单标题" prop="title">
+        label="工单号">
-        <el-input
-          v-model="queryParams.title"
-          placeholder="请输入工单标题"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="完成时间" prop="completeTime">
-        <el-date-picker clearable
-          v-model="queryParams.completeTime"
-          type="date"
-          value-format="yyyy-MM-dd"
-          placeholder="请选择完成时间">
-        </el-date-picker>
-      </el-form-item>
-      <el-form-item label="处理人ID" prop="workUserId">
-        <el-input
-          v-model="queryParams.workUserId"
-          placeholder="请输入处理人ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
-
-    <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:ticket:add']"
-        >新增</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:ticket:edit']"
-        >修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:ticket:remove']"
-        >删除</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['system:ticket:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
-    </el-row>
-
-    <el-table v-loading="loading" :data="ticketList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="${comment}" align="center" prop="id" />
-      <el-table-column label="工单号" align="center" prop="ticketNo" />
-      <el-table-column label="提交用户ID" align="center" prop="userId" />
-      <el-table-column label="工单标题" align="center" prop="title" />
-      <el-table-column label="问题描述" align="center" prop="content" />
-      <el-table-column label="图片URL数组" align="center" prop="images" />
-      <el-table-column label="1待处理 2处理中 3已完成" align="center" prop="status" />
-      <el-table-column label="完成时间" align="center" prop="completeTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.completeTime, '{y}-{m}-{d}') }}</span>
-        </template>
       </el-table-column>
-      <el-table-column label="处理人ID" align="center" prop="workUserId" />
+      <el-table-column
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        prop="title"
+        label="工单标题"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="question"
+        min-width="300"
+        show-overflow-tooltip
+        label="问题描述">
+      </el-table-column>
+      <el-table-column
+        prop="handleStatus"
+        label="处理状态">
+      </el-table-column>
+      <el-table-column
+        prop="submitName"
+        label="提交人">
+      </el-table-column>
+      <el-table-column
+        prop="handleName"
+        label="处理人">
+      </el-table-column>
+      <el-table-column
+        prop="submitTime"
+        label="提交时间">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        label="操作"
+        width="150">
         <template slot-scope="scope">
           <el-button
-            size="mini"
+            @click="editTicket(scope.row.gdh)"
-            type="text"
+            type="warning"
-            icon="el-icon-edit"
+            size="mini">
-            @click="handleUpdate(scope.row)"
+            编辑
-            v-hasPermi="['system:ticket:edit']"
+          </el-button>
-          >修改</el-button>
           <el-button
-            size="mini"
+            @click="deleteTicket(scope.row)"
-            type="text"
+            type="danger"
-            icon="el-icon-delete"
+            size="small">
-            @click="handleDelete(scope.row)"
+            废弃
-            v-hasPermi="['system:ticket:remove']"
+          </el-button>
-          >删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-
+    <add-ticket ref="addTicket" :mode="mode"/>
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改工单主对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="工单号" prop="ticketNo">
-          <el-input v-model="form.ticketNo" placeholder="请输入工单号" />
-        </el-form-item>
-        <el-form-item label="工单标题" prop="title">
-          <el-input v-model="form.title" placeholder="请输入工单标题" />
-        </el-form-item>
-        <el-form-item label="问题描述">
-          <editor v-model="form.content" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="完成时间" prop="completeTime">
-          <el-date-picker clearable
-            v-model="form.completeTime"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择完成时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="处理人ID" prop="workUserId">
-          <el-input v-model="form.workUserId" placeholder="请输入处理人ID" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listTicket, getTicket, delTicket, addTicket, updateTicket } from "@/api/ems/ticket"
+// import {getSingleSiteBaseInfo} from '@/api/ems/zddt'
-
+import AddTicket from './AddTicket.vue'
 export default {
   name: "Ticket",
+  components: {AddTicket},
   data() {
     return {
-      // 遮罩层
+      mode:'',//新增、修改工单
-      loading: true,
+      editTicketId:'',
-      // 选中数组
+      loading:false,
-      ids: [],
+      tableData:[
-      // 非单个禁用
+        {gdh:'0001',title:'工单一',question:'问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述',handleStatus:'处理完成',submitName:'张三',handleName:'李四',submitTime:'2025/06/20'}
-      single: true,
+      ]
-      // 非多个禁用
-      multiple: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 总条数
-      total: 0,
-      // 工单主表格数据
-      ticketList: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 查询参数
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-        ticketNo: null,
-        userId: null,
-        title: null,
-        content: null,
-        images: null,
-        status: null,
-        completeTime: null,
-        workUserId: null
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        ticketNo: [
-          { required: true, message: "工单号不能为空", trigger: "blur" }
-        ],
-        userId: [
-          { required: true, message: "提交用户ID不能为空", trigger: "blur" }
-        ],
-        title: [
-          { required: true, message: "工单标题不能为空", trigger: "blur" }
-        ],
-        content: [
-          { required: true, message: "问题描述不能为空", trigger: "blur" }
-        ],
-        status: [
-          { required: true, message: "1待处理 2处理中 3已完成不能为空", trigger: "change" }
-        ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
-        ],
-      }
     }
   },
-  created() {
+  methods:{
-    this.getList()
+    addTicket(){
-  },
+      this.mode = 'add';
-  methods: {
+      this.$refs.addTicket.dialogTableVisible = true;
-    /** 查询工单主列表 */
-    getList() {
-      this.loading = true
-      listTicket(this.queryParams).then(response => {
-        this.ticketList = response.rows
-        this.total = response.total
-        this.loading = false
-      })
     },
-    // 取消按钮
+    editTicket(id){
-    cancel() {
+      this.mode = 'add';
-      this.open = false
+      this.editTicketId = id
-      this.reset()
+      this.$refs.addTicket.dialogTableVisible = true;
     },
-    // 表单重置
+    deleteTicket(row){
-    reset() {
+      console.log('表格行数据',row)
-      this.form = {
+      this.$confirm(`确认要废弃工单${row.title}吗?`, {
-        id: null,
+        confirmButtonText: '确定',
-        ticketNo: null,
+        cancelButtonText: '取消',
-        userId: null,
+        showClose:false,
-        title: null,
+        closeOnClickModal:false,
-        content: null,
+        type: 'warning',
-        images: null,
+        beforeClose: (action, instance, done) => {
-        status: null,
+          if (action === 'confirm') {
-        createTime: null,
+            instance.confirmButtonLoading = true;
-        completeTime: null,
+            setTimeout(() => {
-        createBy: null,
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
-        updateBy: null,
+              done();
-        updateTime: null,
+              // setTimeout(() => {
-        workUserId: null
+              instance.confirmButtonLoading = false;
-      }
+              // }, 300);
-      this.resetForm("form")
+            }, 3000);
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1
-      this.getList()
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm")
-      this.handleQuery()
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset()
-      this.open = true
-      this.title = "添加工单主"
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset()
-      const id = row.id || this.ids
-      getTicket(id).then(response => {
-        this.form = response.data
-        this.open = true
-        this.title = "修改工单主"
-      })
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateTicket(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功")
-              this.open = false
-              this.getList()
-            })
           } else {
-            addTicket(this.form).then(response => {
+            done();
-              this.$modal.msgSuccess("新增成功")
-              this.open = false
-              this.getList()
-            })
           }
         }
-      })
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      const ids = row.id || this.ids
-      this.$modal.confirm('是否确认删除工单主编号为"' + ids + '"的数据项？').then(function() {
-        return delTicket(ids)
       }).then(() => {
-        this.getList()
+        //只有在废弃成功的情况下会走到这里
-        this.$modal.msgSuccess("删除成功")
+        this.$message({
-      }).catch(() => {})
+          type: 'success',
-    },
+          message: '废弃成功!'
-    /** 导出按钮操作 */
+        });
-    handleExport() {
+        //调用接口 更新表格数据
-      this.download('ticket/export', {
+      }).catch(() => {
-        ...this.queryParams
+        //取消关机
-      }, `ticket_${new Date().getTime()}.xlsx`)
+      });
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.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;
+    }
+    .single-square-box-container{
+      height: 78px;
+      box-sizing: border-box;
+      margin-bottom: 10px;
+    }
+    .single-zd-info-container{
+      font-size: 12px;
+      margin-top: 10px;
+      color:#666666;
     }
   }
 }
-</script>
+</style>

src/views/ems/zddt/index.vue

@@ -86,11 +86,11 @@ export default {
       },{
         title:'装机功率',
         value:'',
-        attr:'installedPower'
+        attr:'installPower'
       },{
         title:'装机容量',
         value:'',
-        attr:'installedCap',
+        attr:'installCapacity',
       }]
     }
   },