设备监控点击数据查看表格

src/assets/styles/common.scss

@@ -50,6 +50,27 @@
       background-color: transparent;
     }
 }
+/* card标题里的时间选择器 */
+.time-range-card {
+  &.common-card-container .el-card__header {
+    padding-top: 0;
+    padding-bottom: 0;
+    .time-range-header {
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .card-title {
+        line-height: 40px;
+      }
+    }
+  }
+}
+
+
+
+
+
 //描述样式 PCS、BMS总览、BMS电池簇页面公共样式
 .descriptions-main{
   padding:24px;

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

@@ -199,20 +199,4 @@ export default {
     }
   }
 }
-/* card标题里的时间选择器 */
-.time-range-card {
-  &.common-card-container .el-card__header {
-    padding-top: 0;
-    padding-bottom: 0;
-    .time-range-header {
-      height: 40px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      .card-title {
-        line-height: 40px;
-      }
-    }
-  }
-}
 </style>

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

@@ -0,0 +1,221 @@
+<!--电位展示图表-->
+<template>
+  <el-dialog
+      :visible.sync="show"
+      :title="pointName"
+      :close-on-click-modal="false"
+      show-close
+      destroy-on-close
+      lock-scroll
+      append-to-body
+      width="1000px"
+      class="ems-dialog"
+      :before-close="handleColsed"
+  >
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
+      <div slot="header" class="time-range-header">
+        <el-radio-group class="card-title" v-model="dataUnit">
+          <el-radio :label="1">分钟</el-radio>
+          <el-radio :label="2">小时</el-radio>
+          <el-radio :label="3">天</el-radio>
+        </el-radio-group>
+        <date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
+      </div>
+      <div style="height: 350px" id="searchChart"></div>
+    </el-card>
+  </el-dialog>
+</template>
+<script>
+import * as echarts from "echarts";
+import resize from "@/mixins/ems/resize";
+import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
+import {getPointValueList} from "@/api/ems/search";
+import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
+export default {
+  components: {DateRangeSelect, DateTimeSelect},
+  mixins: [resize],
+  props: {
+    siteId:{
+      type: String,
+      required: true,
+    }
+  },
+  computed: {
+    isDtdc(){
+      return this.categoryName === '单体电池'
+    },
+  },
+  watch:{
+    show(val) {
+      if(!val){
+        this.pointName=''
+        this.categoryName=''
+        this.deviceId=''
+        this.dataUnit=1
+        if (!this.chart) {
+          return
+        }
+        this.hideLoading()
+        this.chart.dispose()
+        this.chart = null
+      }
+    },
+    dataUnit:{
+      handler(newVal,oldVal){
+        console.log('wacth到了dataUnit的变化',newVal,oldVal)
+        this.$nextTick(()=>{
+          this.$refs.dateTimeSelect.init()
+          this.getDate()
+        })
+      },
+    }
+  },
+  data(){
+    return{
+      show:false,
+      chart:null,
+      dataUnit:1,
+      dataRange:[],
+      child:[],//单体电池需要数据 暂不删除
+      pointName:'',
+      categoryName:'',
+      deviceId:''
+    }
+  },
+  methods:{
+    showChart({pointName,categoryName,deviceId}){
+      //初始化数据
+      this.pointName=pointName
+      this.categoryName=categoryName
+      this.deviceId=deviceId
+      this.show = true
+      this.$nextTick(()=>{
+        this.$refs.dateTimeSelect.init()
+        this.initChart()
+        this.getDate()
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#searchChart'))
+    },
+    showLoading(){
+      this.chart && this.chart.showLoading()
+    },
+    hideLoading(){
+      this.chart && this.chart.hideLoading()
+    },
+    getDate(){
+        this.showLoading()
+        const{dataUnit,dataRange:[start='',end=''],child}=this
+        let siteDeviceMap={}
+        child.forEach(([first,second,third])=>{
+          if(siteDeviceMap[first]){
+            siteDeviceMap[first].push(third)
+          }else{
+            siteDeviceMap[first]=[]
+            siteDeviceMap[first].push(third)
+          }
+        })
+        let startDate,endDate
+        if(start && dataUnit===3){
+          // startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
+          startDate = start + ' 00:00:00'
+        }else{
+          startDate=start
+        }
+        if(end && dataUnit===3){
+          // endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
+          endDate = end + ' 00:00:00'
+        }else{
+          endDate=end
+        }
+
+        getPointValueList({siteIds:[this.siteId],dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
+          this.setOption(response?.data || [])
+        }).finally(()=>{
+          this.hideLoading()
+        })
+    },
+    setOption(data) {
+      if(!this.chart) return
+      this.chart.clear()
+      console.log('返回的数据',data)
+      let dataset=[]
+      if(data.length>0){
+        data.forEach((item,index)=>{
+          item.deviceList.forEach(inner=>{
+            dataset.push({
+              name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
+              type:'line',
+              xdata:[],
+              data:[]
+            })
+            const length = dataset.length
+            inner.pointValueList.forEach(value=>{
+              dataset[length-1].xdata.push(value.valueDate)
+              dataset[length-1].data.push(value.pointValue)
+            })
+          })
+        })
+      }else{
+        this.$message.warning('暂无数据')
+      }
+      console.log('图表数据',dataset)
+      this.chart.setOption({
+        legend: {
+          // left: 'center',
+          // top: '10',
+        },
+        grid: {
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
+        yAxis: {
+          type: 'value',
+        },
+        dataZoom: [
+          {
+            type: 'inside',
+            start: 0,
+            end: 100
+          },
+          {
+            start: 0,
+            end: 100
+          }
+        ],
+        series: dataset
+      })
+    },
+    updateDate(val){
+      this.dataRange =val || []
+      this.getDate()
+    },
+    handleColsed(done) {
+      if (!this.chart) {
+        return done();
+      }
+      this.chart.dispose();
+      this.chart = null;
+      done();
+    },
+  }
+}
+</script>
+<style scoped lang="scss">
+::v-deep {
+ .card-title .el-radio{
+    line-height: 40px;
+  }
+}
+
+</style>

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

@@ -15,14 +15,18 @@
           </div>
           <div class="descriptions-main descriptions-main-bg-color">
             <el-descriptions direction="vertical" :column="3" :colon="false">
-              <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+              <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
+                <span class="pointer" @click="showChart(item.pointName || '','电池簇',baseInfo.deviceId)">
+                {{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
+              </span>
+              </el-descriptions-item>
             </el-descriptions>
             <!--        进度-->
             <div class="process-container">
               <div class="process-line-bg">
                 <div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
               </div>
-              <div class="process">当前SOC :  {{baseInfo.currentSoc}}%</div>
+              <div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC :  {{baseInfo.currentSoc}}%</div>
             </div>
           </div>
         <el-table
@@ -41,10 +45,16 @@
             prop="avgData"
             label="单体平均值"
           >
+            <template slot-scope="scope">
+              <span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="minData"
             label="单体最小值">
+            <template slot-scope="scope">
+              <span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.minData}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="minDataID"
@@ -53,6 +63,9 @@
           <el-table-column
             prop="maxData"
             label="单体最大值">
+            <template slot-scope="scope">
+              <span class="pointe " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
+            </template>
           </el-table-column>
           <el-table-column
             prop="maxDataID"
@@ -62,18 +75,20 @@
       </el-card>
     </div>
     <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import {getBMSBatteryCluster} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name:'DzjkSbjkBmsdcc',
   mixins:[getQuerySiteId,intervalUpdate],
-  components:{},
+  components:{pointChart},
   data() {
     return {
       loading:false,
@@ -82,21 +97,36 @@ export default {
         '温度':'&#8451;',
         'SOC':'%'
       },
+      tablePointNameMap:{
+        '电压单体最小值':'最低单体电压',
+        '电压单体平均值':'电压平均值',
+        '电压单体最大值':'最高单体电压',
+        '温度单体最小值':'最低单体温度',
+        '温度单体平均值':'温度平均值',
+        '温度单体最大值':'最高单体温度',
+        'SOC单体最小值':'最低单体SOC',
+        'SOC单体平均值':'',
+        'SOC单体最大值':'最高单体SOC',
+      },
       baseInfoList:[],
       infoData:[
-        {label:'簇电压',attr:'clusterVoltage',unit:'V'},
+        {label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
-        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
+        {label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
-        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
-        {label:'簇电流',attr:'clusterCurrent',unit:'A'},
+        {label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
-        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
+        {label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
-        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
-        {label:'SOH',attr:'soh',unit:'%'},
+        {label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
-        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
+        {label:'平均温度',attr:'averageTemperature',unit:'&#8451;',pointName:'平均温度'},
-        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
+        {label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
       ],
     }
   },
   methods:{
+    showChart(pointName,categoryName,deviceId){
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
     updateData(){
       this.loading = true
       getBMSBatteryCluster(this.siteId).then(response => {

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

@@ -15,14 +15,18 @@
         </div>
         <div class="descriptions-main descriptions-main-bg-color">
           <el-descriptions direction="vertical" :column="3" :colon="false">
-            <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+            <el-descriptions-item  labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
+              <span  class="pointer" @click="showChart(item.pointName || '','电池堆',baseInfo.deviceId)">
+                {{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
+              </span>
+            </el-descriptions-item>
           </el-descriptions>
           <!--        进度-->
           <div class="process-container">
             <div class="process-line-bg">
               <div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
             </div>
-            <div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
+            <div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
           </div>
         </div>
         <el-table
@@ -39,26 +43,26 @@
             label="簇电压"
           >
             <template slot-scope="scope">
-              <span>{{scope.row.clusterVoltage}} V</span>
+              <span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
             label="簇电流">
             <template slot-scope="scope">
-              <span>{{scope.row.clusterCurrent}} A</span>
+              <span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
             </template>
           </el-table-column>
           <el-table-column
             label="簇SOC">
             <template slot-scope="scope">
-              <span>{{scope.row.currentSoc}} %</span>
+              <span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
             </template>
           </el-table-column>
           <el-table-column
             prop="maxVoltage"
             label="单体最高电压">
             <template slot-scope="scope">
-              <span>{{scope.row.maxCellVoltage}} V</span>
+              <span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -69,7 +73,7 @@
             prop="minVoltage"
             label="单体最低电压">
             <template slot-scope="scope">
-              <span>{{scope.row.minCellVoltage}} V</span>
+              <span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -79,7 +83,7 @@
           <el-table-column
             label="单体最高温度">
             <template slot-scope="scope">
-              <span>{{scope.row.maxCellTemp}} &#8451;</span>
+              <span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -90,7 +94,7 @@
             prop="minTemperature"
             label="单体最低温度">
             <template slot-scope="scope">
-              <span>{{scope.row.minCellTemp}} &#8451;</span>
+              <span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
             </template>
           </el-table-column>
           <el-table-column
@@ -102,6 +106,7 @@
       </el-card>
     </div>
     <el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
@@ -109,27 +114,34 @@
 import {getBMSOverView} from '@/api/ems/dzjk'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
+import pointChart from "./../PointChart.vue";
 export default {
   name:'DzjkSbjkBmszl',
+  components: {pointChart,},
   mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
       loading:false,
       baseInfoList:[],
       infoData:[
-        {label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
+        {label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
-        {label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
+        {label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
-        {label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
+        {label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
-        {label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
+        {label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
-        {label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
+        {label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
-        {label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
+        {label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
-        {label:'SOH',attr:'stackSoh',unit:'%'},
+        {label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
-        {label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
+        {label:'平均温度',attr:'operatingTemp',unit:'&#8451;',pointName:'平均温度'},
-        {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
+        {label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
       ]
     }
   },
   methods:{
+    //todo 后续需要新增设备id
+    showChart(pointName,categoryName,deviceId){
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
     updateData(){
       this.loading = true
       getBMSOverView(this.siteId).then(response => {

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

@@ -24,6 +24,7 @@
       <el-table
         class="common-table"
         :data="zbInfo.loadDataDetailInfo"
+        @cell-click="handlerCell"
         stripe
         style="width: 100%"
       >
@@ -60,6 +61,7 @@
       <el-table
         class="common-table"
         :data="cnbInfo.meteDataDetailInfo"
+        @cell-click="handlerCellCN"
         stripe
         style="width: 100%"
       >
@@ -69,16 +71,19 @@
         </el-table-column>
       </el-table>
     </el-card>
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import { getAmmeterDataList } from "@/api/ems/dzjk";
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name: "DzjkSbjkDb",
   mixins: [getQuerySiteId,intervalUpdate],
+  components:{pointChart},
   data() {
     return {
       loading: false,
@@ -87,6 +92,24 @@ export default {
     };
   },
   methods: {
+    handlerCell(row,column){
+      if(column.label !== '类别'){
+        const arr = row.category.split('')
+        arr.splice(6,0,column.label[0])
+        this.showChart(arr.join(''),'电表')
+      }
+    },
+    handlerCellCN(row,column){
+      if(column.label !== '类别'){
+        const arr = row.category.split('')
+        arr.splice(2,arr.length-2,column.label)
+        this.showChart(arr.join(''),'电表')
+      }
+    },
+    showChart(pointName,categoryName,deviceId){
+      console.log('点击查询图表',pointName,categoryName,deviceId)
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
+    },
     updateData(){
       this.loading = true;
       getAmmeterDataList(this.siteId)
@@ -120,6 +143,13 @@ export default {
       color: #ffffff;
       position: relative;
     }
+    .el-table__row td{
+      &:not(:first-child){
+        .cell{
+          cursor: pointer;
+        }
+      }
+    }
   }
 }
 .zb-common-card-container{

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

@@ -29,32 +29,44 @@
         </div>
         <div class="descriptions-main descriptions-main-bg-color">
           <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
-            <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
+            <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
+              <span  class="pointer" @click="showChart(item.pointName || '','PCS设备',pcsItem.deviceId)">
+                {{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
+              </span>
+            </el-descriptions-item>
           </el-descriptions>
         </div>
         <div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
           <el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
             <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep"  :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流功率">
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
+              <span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
-            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
+            </el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电压">
+              <span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
+            </el-descriptions-item>
+            <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"  :span="1" label="直流电流">
+              <span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
+            </el-descriptions-item>
           </el-descriptions>
         </div>
       </el-main>
     </el-container>
     <el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
-
+<!--    电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
+    <point-chart ref="pointChart" :site-id="siteId"/>
   </div>
 </template>
 
 <script>
+import pointChart from "./../PointChart.vue";
 import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
 import intervalUpdate from "@/mixins/ems/intervalUpdate";
 export default {
   name:'DzjkSbjkPcs',
-  components:{RealTimeBaseInfo},
+  components:{RealTimeBaseInfo,pointChart},
   mixins:[getQuerySiteId,intervalUpdate],
   data() {
     return {
@@ -62,81 +74,30 @@ export default {
       runningHeadData:{},//运行信息
       pcsList:[],
       infoData:[
-        {label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
+        {label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
-        {label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
+        {label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
-        {label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
+        {label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
-        {label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
+        {label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
-        {label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
+        {label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
-        {label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
+        {label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
-        {label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
+        {label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
-        {label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
+        {label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
-        {label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
+        {label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
-        {label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
+        {label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;',pointName:''},
-        {label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
+        {label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
-        {label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
+        {label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
-        {label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
+        {label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
-        {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
+        {label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;',pointName:''},
-        {label:'交流频率',attr:'acFrequency',unit:'Hz'}
+        {label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
       ],
       pcsBranchList:[],//pcs的支路列表
     }
   },
   methods:{
-    problemSaved(){
+    //todo 后续需要新增设备id
-      this.$confirm('确认故障已复位?', {
+    showChart(pointName,categoryName,deviceId){
-        confirmButtonText: '确定',
+      console.log('点击查询图表',pointName,categoryName,deviceId)
-        cancelButtonText: '取消',
+      pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
-        showClose:false,
-        closeOnClickModal:false,
-        type: 'warning',
-        beforeClose: (action, instance, done) => {
-          if (action === 'confirm') {
-            instance.confirmButtonLoading = true;
-            setTimeout(() => {
-              done();
-              instance.confirmButtonLoading = false;
-            }, 3000);
-          } else {
-            done();
-          }
-        }
-      }).then(() => {
-        //只有在故障复位成功的情况下会走到这里
-        this.$message({
-          type: 'success',
-          message: '故障复位成功!'
-        });
-      }).catch(() => {
-        //取消复位
-      });
-    },
-    machineClosed(){
-      this.$confirm('确认要关机吗?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        showClose:false,
-        closeOnClickModal:false,
-        type: 'warning',
-        beforeClose: (action, instance, done) => {
-          if (action === 'confirm') {
-            instance.confirmButtonLoading = true;
-            setTimeout(() => {
-              done();
-              instance.confirmButtonLoading = false;
-            }, 3000);
-          } else {
-            done();
-          }
-        }
-      }).then(() => {
-        //只有在关机成功的情况下会走到这里
-        this.$message({
-          type: 'success',
-          message: '关机成功!'
-        });
-      }).catch(() => {
-        //取消关机
-      });
     },
     //6个方块数据
     getRunningHeadData(){

src/views/ems/search/DateTimeSelect.vue

@@ -43,22 +43,6 @@ export default {
 
     }
   },
-  watch:{
-    dataUnit:{
-      handler(newVal,oldVal){
-        console.log('wacth到了dataUnit的变化',newVal,oldVal)
-        this.init()
-        // if(!oldVal && newVal){
-        //   this.init()
-        // }else{
-        //   this.init()
-        //   //为了触发调用图表接口
-        //   this.$emit('updateDate',this.dateRange || [])
-        // }
-      },
-      immediate: true,
-    }
-  },
   data() {
     return {
       loading:false,
@@ -73,7 +57,7 @@ export default {
   },
   methods: {
     init(){
-      const {dataUnit} = this
+        const {dataUnit} = this
         const timeDis= dataUnit === 3? 30 * 24 * 60 * 60 * 1000 :dataUnit === 2 ? 24 * 60 * 60 * 1000 : 60 * 60 * 1000
         const now = new Date(),formatNow = formatDate(now.getTime(),dataUnit !== 3 );
         const timeAgo = formatDate(new Date(now.getTime() - timeDis),dataUnit !== 3)

src/views/ems/search/index.vue

@@ -6,11 +6,6 @@
           prop="siteIds"
           :rules="[{ required: true, message: '请选择站点' }]"
       >
-<!--        <el-checkbox-group v-model="form.siteIds">-->
-<!--          <el-checkbox v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId" >-->
-<!--            {{ item.siteName }}-->
-<!--          </el-checkbox>-->
-<!--        </el-checkbox-group>-->
         <el-radio-group v-model="form.siteIds" >
           <el-radio  v-for="(item,index) in siteList" :key="index+'zdListSearch'" :label="item.siteId">
             {{ item.siteName }}
@@ -43,13 +38,13 @@
               @select="handleSelect"
           ></el-autocomplete>
         </el-form-item>
-        <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">
+<!--        <el-form-item label="横坐标" prop="dataUnit" :rules="[{ required: true, message: '请选择横坐标' }]">-->
-          <el-radio-group v-model="form.dataUnit">
+<!--          <el-radio-group v-model="form.dataUnit">-->
-            <el-radio :label="1">分钟</el-radio>
+<!--            <el-radio :label="1">分钟</el-radio>-->
-            <el-radio :label="2">小时</el-radio>
+<!--            <el-radio :label="2">小时</el-radio>-->
-            <el-radio :label="3">天</el-radio>
+<!--            <el-radio :label="3">天</el-radio>-->
-          </el-radio-group>
+<!--          </el-radio-group>-->
-        </el-form-item>
+<!--        </el-form-item>-->
       </div>
       <el-form-item>
         <el-button type="primary" @click="submitForm">生成图表</el-button>
@@ -57,8 +52,14 @@
     </el-form>
     <el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
       <div slot="header" class="time-range-header">
-        <span class="card-title"></span>
+        <span class="card-title">
-        <date-time-select :data-unit="this.form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
+          <el-radio-group v-model="form.dataUnit">
+            <el-radio :label="1">分钟</el-radio>
+            <el-radio :label="2">小时</el-radio>
+            <el-radio :label="3">天</el-radio>
+          </el-radio-group>
+        </span>
+        <date-time-select ref="dateTimeSelect" :data-unit="form.dataUnit" @initDate="((e)=>form.dataRange=e||[])" @updateDate="updateDate"/>
       </div>
       <div style="height: 350px" id="searchChart"></div>
     </el-card>
@@ -92,7 +93,16 @@ export default {
         !newVal && (this.form.child = [])
       }
     },
-
+    'form.dataUnit':{
+      handler(newVal,oldVal){
+        console.log('wacth到了dataUnit的变化',newVal,oldVal)
+        this.$nextTick(()=>{
+          this.$refs.dateTimeSelect.init()
+          this.getDate()
+        })
+        // this.submitForm()
+      },
+    }
   },
   data() {
     return {
@@ -318,6 +328,7 @@ export default {
     this.loading= true
     this.$nextTick(()=>{
       this.initChart()
+      this.$refs.dateTimeSelect.init()
       Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(()=>this.loading=false)
     })
   }