首页、单体电池

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

@@ -0,0 +1,71 @@
+<template>
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
+        <div slot="header">
+        <span class="card-title">策略信息</span>
+        </div>
+        <!-- <el-empty :image-size="100" ></el-empty> -->
+        <div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
+            <el-descriptions class="home-normal-info" :column="2" >
+              <el-descriptions-item size="mini"  label="模板名称">模板1</el-descriptions-item>
+              <el-descriptions-item size="mini"  label="SOC限制">开/关</el-descriptions-item>
+              <el-descriptions-item size="mini"  label="SOC下限">0%</el-descriptions-item>
+              <el-descriptions-item size="mini"  label="SOC上限">100%</el-descriptions-item>
+            </el-descriptions>
+             <el-table
+                :data="info.tableData || []"
+                border
+                style="width: 100%;margin-top:15px;">
+                <el-table-column
+                    prop="startTime"
+                    label="开始时间">
+                </el-table-column>
+                <el-table-column
+                    prop="endTime"
+                    label="结束时间">
+                </el-table-column>
+                <el-table-column
+                    prop="chargeDischargePower"
+                    label="充放功率（kW）">
+                </el-table-column>
+                <el-table-column
+                    prop="chargeStatus"
+                    label="充电状态">
+                    <template slot-scope="scope">
+                    {{chargeStatusOptions[scope.row.chargeStatus]}}
+                    </template>
+                </el-table-column>
+            </el-table>
+        </div>
+    </el-card>
+</template>
+<script>
+import {mapState} from 'vuex'
+export default{
+    props:{
+        info:{
+            require:true,
+            type:Object,
+            default:()=>{
+                return {}
+            }
+        }
+    },
+    computed:{
+    ...mapState({
+      chargeStatusOptions: state => state?.ems?.chargeStatusOptions || {},
+    }),
+  },
+    data(){
+        return {
+
+        }
+    },
+    methods:{
+        
+    }
+}
+   
+</script>
+<style lang="scss" scoped>
+ 
+</style>

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

@@ -1,148 +0,0 @@
-
-<template>
-  <el-row style="background:#fff;margin-top:30px;">
-    <el-col :xs="24" :sm="24" :lg="24">
-      <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
-        <div slot="header">
-          <span class="card-title">能量流转</span>
-        </div>
-        <div style="height: 310px" id="nllzChart"></div>
-      </el-card>
-    </el-col>
-  </el-row>
-</template>
-
-<script>
-import * as echarts from 'echarts'
-import resize from '@/mixins/ems/resize'
-import {formatNumber} from "@/filters/ems";
-
-export default {
-  mixins: [resize],
-  data() {
-    return {
-      chart: null
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(document.querySelector('#nllzChart'))
-    },
-    setOption(data) {
-      const {siteMonitorDataVo=[],gridNrtPower,loadNrtPower,energyStorageNrtPower,energyStorageAvailElec} = data
-      const source = [['日期','充电量','放电量']]
-      siteMonitorDataVo.forEach(item=>{
-        source.push([item.ammeterDate, item.chargedCap,item.disChargedCap])
-      })
-      this.chart.setOption({
-        title: [
-          // 右上角
-          {
-            text: `电网 实时功率：${formatNumber(gridNrtPower)} kW`,
-            top: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 右下角
-          {
-            text: `负载 实时功率：${formatNumber(loadNrtPower)} kW`,
-            bottom: 10,
-            right: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第一行
-          {
-            text: '储能',
-            bottom: 40,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第二行
-          {
-            text: `实时功率：${formatNumber(energyStorageNrtPower)} kW`,
-            bottom: 26,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          },
-          // 左下角第三行
-          {
-            text: `可用电量：${formatNumber(energyStorageAvailElec)} kWh`,
-            bottom: 10,
-            left: 10,
-            textStyle:{
-              fontSize:12,
-              color:'#666666'
-            }
-          }
-        ],
-        grid:{
-          left:200
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        textStyle:{
-          color:"#333333",
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
-        },
-        yAxis: {
-          type: 'value',
-          axisLine: {
-            lineStyle:{
-              color: '#333333',
-            }
-          }
-        },
-        dataset:{
-          source
-          // source: [['日期','充电量','放电量']]
-        },
-        series: [
-          {
-            name:'充电量',
-            type: 'line',
-          },{
-            name:'放电量',
-            type: 'line',
-          }]
-      })
-    }
-  }
-}
-
-</script>
-

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

@@ -10,7 +10,7 @@
             <span class="card-title">静态信息</span>
           </div>
           <div style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
-            <el-descriptions class="single-zd-info-container" :column="1" >
+            <el-descriptions class="home-normal-info" :column="1" >
               <el-descriptions-item size="mini" v-for="(item,index) in singleZdInfo" :key="index+'singleZdInfo'" :label="item.title">{{info[item.attr] | formatNumber }}</el-descriptions-item>
             </el-descriptions>
           </div>
@@ -32,14 +32,7 @@
         </el-card>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="10">
-        <el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
-          <div slot="header">
-            <span class="card-title">策略信息</span>
-          </div>
-          <div  style="box-sizing: border-box; height: 250px;padding:20px 15px;" >
-
-          </div>
-        </el-card>
+        <cl-info :info="{}"/>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="24">
         <week-chart ref="weekChart"/>
@@ -58,10 +51,11 @@ import {getDzjkHomeView} from '@/api/ems/dzjk'
 import WeekChart from "./WeekChart.vue";
 import ActiveChart from "./ActiveChart.vue";
 import AlarmTable from "./AlarmTable.vue";
+import ClInfo from './ClInfo.vue';
 import getQuerySiteId from '@/mixins/ems/getQuerySiteId'
 export default {
   name:'DzjkSbjkHome',
-  components: {WeekChart,ActiveChart,AlarmTable},
+  components: {WeekChart,ActiveChart,AlarmTable,ClInfo},
   mixins: [getQuerySiteId],
   data() {
     return {
@@ -136,6 +130,7 @@ export default {
       margin-bottom: 20px;
     }
   }
+  
 //数据概览
   .sjgl-data{
     text-align: center;
@@ -159,6 +154,17 @@ export default {
 </style>
 
 <style lang="scss">
+.home-normal-info{
+    font-size: 12px;
+    .el-descriptions-item__container{
+      .el-descriptions-item__label{
+        color:#666666;
+      }
+      .el-descriptions-item__content{
+        color: #333333;
+      }
+    } 
+  }
 /* card标题里的时间选择器 */
 .time-range-card{
   &.common-card-container .el-card__header{

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

@@ -0,0 +1,125 @@
+<template>
+  <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）">
+        <template slot-scope="scope">
+          <el-button
+            @click="chartDetail(scope.row, 'voltage')"
+            type="text"
+            size="small"
+          >
+            {{ scope.row.voltage }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="temperature" label="温度（℃）">
+        <template slot-scope="scope">
+          <el-button
+            @click="chartDetail(scope.row, 'temperature')"
+            type="text"
+            size="small"
+          >
+            {{ scope.row.temperature }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="soc" label="SOC（%）">
+        <template slot-scope="scope">
+          <el-button
+            @click="chartDetail(scope.row, 'soc')"
+            type="text"
+            size="small"
+          >
+            {{ scope.row.soc }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column prop="soh" label="SOH（%）">
+        <template slot-scope="scope">
+          <el-button
+            @click="chartDetail(scope.row, 'soh')"
+            type="text"
+            size="small"
+          >
+            {{ scope.row.soh }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="曲线图">
+        <template slot-scope="scope">
+          <el-button @click="chartDetail(scope.row)" type="text" size="small">
+            展示
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-show="tableData.length > 0"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pageNum"
+      :page-size="pageSize"
+      :page-sizes="[10, 20, 30, 40]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="totalSize"
+      style="margin-top: 15px; text-align: center"
+    >
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    tableData: {
+      require: true,
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    pageNum: {
+      require: true,
+      type: Number,
+      default: 1,
+    },
+    pageSize: {
+      require: true,
+      type: Number,
+      default: 10,
+    },
+    totalSize: {
+      require: true,
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    //查看表格行图表
+    chartDetail(row, dataType = "") {
+      const { clusterDeviceId, deviceId } = row;
+      this.$emit("chart", { clusterDeviceId, deviceId, dataType });
+    },
+    // 分页
+    handleSizeChange(val) {
+      this.$emit("handleSizeChange", val);
+    },
+    handleCurrentChange(val) {
+      this.$emit("handleCurrentChange", val);
+    },
+  },
+};
+</script>
+
+<style></style>

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

@@ -1,224 +1,205 @@
-
 <template>
-      <el-card v-loading="loading" shadow="always" class="common-card-container common-card-container-no-title-bg">
-        <div slot="header">
-          <span class="large-title">单体电池实时数据</span>
-        </div>
-      <!--    搜索栏-->
-      <el-form :inline="true" class="select-container">
-        <el-form-item label="电池堆">
-          <el-select v-model="search.stackId" placeholder="请选择" @change="changeStackId">
-            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in stackOptions" :key="index+'stackOptions'"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="电池簇">
-          <el-select v-model="search.clusterId" :no-data-text="!search.stackId && stackOptions.length > 0 ? '请先选择电池堆':'无数据'" placeholder="请选择" :loading="clusterloading" loading-text="正在加载数据">
-            <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in clusterOptions" :key="index+'clusterOptions'"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
-        </el-form-item>
-        <el-form-item>
-          <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;">-->
-<!--          <el-col :xs="24" :sm="24" :lg="24">-->
-<!--            <bar-chart ref="barChart"/>-->
-<!--          </el-col>-->
-<!--        </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）"
-          >
-            <template slot-scope="scope">
-              <el-button
-                @click="chartDetail(scope.row,'voltage')"
-                type="text"
-                size="small">
-                {{scope.row.voltage}}
-              </el-button>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="temperature"
-            label="温度（℃）">
-            <template slot-scope="scope">
-              <el-button
-                @click="chartDetail(scope.row,'temperature')"
-                type="text"
-                size="small">
-                {{scope.row.temperature}}
-              </el-button>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="soc"
-            label="SOC（%）">
-            <template slot-scope="scope">
-              <el-button
-                @click="chartDetail(scope.row,'soc')"
-                type="text"
-                size="small">
-                {{scope.row.soc}}
-              </el-button>
-            </template>
-          </el-table-column>
-          <el-table-column
-            prop="soh"
-            label="SOH（%）">
-            <template slot-scope="scope">
-              <el-button
-                @click="chartDetail(scope.row,'soh')"
-                type="text"
-                size="small">
-                {{scope.row.soh}}
-              </el-button>
-            </template>
-          </el-table-column>
-          <el-table-column
-            label="曲线图">
-            <template slot-scope="scope">
-              <el-button
-                @click="chartDetail(scope.row)"
-                type="text"
-                size="small">
-                展示
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <el-pagination
-          v-show="tableData.length>0"
-          background
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          :current-page="pageNum"
-          :page-size="pageSize"
-          :page-sizes="[10, 20, 30, 40]"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="totalSize"
-          style="margin-top:15px;text-align: center"
-          >
-        </el-pagination>
-      <chart-detail ref="chartDetail"/>
-    </el-card>
+  <el-card
+    v-loading="loading"
+    shadow="always"
+    class="common-card-container common-card-container-no-title-bg"
+  >
+    <div slot="header">
+      <span class="large-title">单体电池实时数据</span>
+    </div>
+    <!--    搜索栏-->
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="编号">
+        <el-input
+          v-model="search.deviceId"
+          placeholder="请输入"
+          clearable
+          style="width: 150px"
+        />
+      </el-form-item>
+      <el-form-item label="电池堆">
+        <el-select
+          v-model="search.stackId"
+          placeholder="请选择"
+          @change="changeStackId"
+        >
+          <el-option
+            :label="item.deviceName"
+            :value="item.id"
+            v-for="(item, index) in stackOptions"
+            :key="index + 'stackOptions'"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="电池簇">
+        <el-select
+          v-model="search.clusterId"
+          :no-data-text="
+            !search.stackId && stackOptions.length > 0
+              ? '请先选择电池堆'
+              : '无数据'
+          "
+          placeholder="请选择"
+          :loading="clusterloading"
+          loading-text="正在加载数据"
+        >
+          <el-option
+            :label="item.deviceName"
+            :value="item.id"
+            v-for="(item, index) in clusterOptions"
+            :key="index + 'clusterOptions'"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSearch" native-type="button"
+          >搜索</el-button
+        >
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="onReset" native-type="button">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 表格 -->
+    <dtdc-table
+      :tableData="tableData"
+      :pageNum="pageNum"
+      :pageSize="pageSize"
+      :totalSize="totalSize"
+      @chart="chartDetail"
+      @handleSizeChange="handleSizeChange"
+      @handleCurrentChange="handleCurrentChange"
+    />
+    <chart-detail ref="chartDetail" />
+  </el-card>
 </template>
 
-
 <script>
-import BarChart from './BarChart'
-import {getStackNameList, getClusterNameList, getClusterDataInfoList} from '@/api/ems/dzjk'
+import BarChart from "./BarChart";
+import {
+  getStackNameList,
+  getClusterNameList,
+  getClusterDataInfoList,
+} from "@/api/ems/dzjk";
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import ChartDetail from "./ChartDetail.vue";
+import Table from "./Table.vue";
 export default {
-  name:'DzjkSbjkDtdc',
-  mixins:[getQuerySiteId],
-  components:{BarChart, ChartDetail},
+  name: "DzjkSbjkDtdc",
+  mixins: [getQuerySiteId],
+  components: { BarChart, ChartDetail, DtdcTable: Table },
   data() {
     return {
-      loading:false,
-      clusterloading:false,
-      search:{stackId:'',clusterId:''},
-      stackOptions:[],//{id:'',deviceName:''}
-      clusterOptions:[],//{id:'',deviceName:''}
-      tableData:[],
-      pageSize:10,//分页栏当前每个数据总数
-      pageNum:1,//分页栏当前页数
-      totalSize:0,//table表格数据总数
-    }
+      loading: false,
+      clusterloading: false,
+      search: { stackId: "", clusterId: "", deviceId: "" },
+      stackOptions: [], //{id:'',deviceName:''}
+      clusterOptions: [], //{id:'',deviceName:''}
+      tableData: [],
+      pageSize: 10, //分页栏当前每个数据总数
+      pageNum: 1, //分页栏当前页数
+      totalSize: 0, //table表格数据总数
+    };
   },
-  methods:{
+  methods: {
     //查看表格行图表
-    chartDetail(row,dataType = ''){
-      const { clusterDeviceId, deviceId} = row,{siteId} = this
-      this.$refs.chartDetail.initChart({siteId,clusterDeviceId,deviceId},dataType)
+    chartDetail({ clusterDeviceId, deviceId, dataType = "" }) {
+      const { siteId } = this;
+      this.$refs.chartDetail.initChart(
+        { siteId, clusterDeviceId, deviceId },
+        dataType
+      );
     },
     // 分页
     handleSizeChange(val) {
       this.pageSize = val;
-      this.$nextTick(()=>{
-        this.getTableData()
-      })
+      this.$nextTick(() => {
+        this.getTableData();
+      });
     },
     handleCurrentChange(val) {
-      this.pageNum = val
-      this.$nextTick(()=>{
-        this.getTableData()
-      })
+      this.pageNum = val;
+      this.$nextTick(() => {
+        this.getTableData();
+      });
     },
     // 搜索
-    onSearch(){
-      this.pageNum =1//每次搜索从1开始搜索
-      this.getTableData()
+    onSearch() {
+      this.pageNum = 1; //每次搜索从1开始搜索
+      this.getTableData();
     },
     // 重置
     // 清空搜索栏选中数据
     // 清空电池簇列表，保留电池堆列表
-    onReset(){
-      this.search={stackId:'',clusterId:''}
-      this.clusterOptions=[]
-      this.pageNum = 1
-      this.getTableData()
+    onReset() {
+      this.search = { stackId: "", clusterId: "", deviceId: "" };
+      this.clusterOptions = [];
+      this.pageNum = 1;
+      this.getTableData();
     },
-    changeStackId(val){
-      if(val){
-        console.log('选择了电池堆，需要获取对应的电池簇',val,this.search.stackId)
-        this.search.clusterId=''
-        this.getClusterList()
+    changeStackId(val) {
+      if (val) {
+        console.log(
+          "选择了电池堆，需要获取对应的电池簇",
+          val,
+          this.search.stackId
+        );
+        this.search.clusterId = "";
+        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;
+    getTableData() {
+      this.loading = true;
+      const {
+        stackId: stackDeviceId,
+        clusterId: clusterDeviceId,
+        deviceId,
+      } = this.search;
+      const { siteId, pageNum, pageSize } = this;
+      getClusterDataInfoList({
+        stackDeviceId,
+        clusterDeviceId,
+        siteId,
+        // deviceId,
+        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 || []))
+    getStackList() {
+      getStackNameList(this.siteId).then((response) => {
+        this.stackOptions = JSON.parse(JSON.stringify(response?.data || []));
+      });
+    },
+    getClusterList() {
+      this.clusterloading = true;
+      getClusterNameList({
+        stackDeviceId: this.search.stackId,
+        siteId: this.siteId,
       })
+        .then((response) => {
+          this.clusterOptions = JSON.parse(
+            JSON.stringify(response?.data || [])
+          );
+        })
+        .finally(() => {
+          this.clusterloading = false;
+        });
     },
-    getClusterList(){
-      this.clusterloading =true
-      getClusterNameList({stackDeviceId:this.search.stackId,siteId: this.siteId}).then(response => {
-        this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []))
-      }).finally(() => {this.clusterloading =false})
-    },
-    init(){
+    init() {
       // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
-      this.search={stackId:'',clusterId:''}//保证切换站点时，清空选择项
-      this.getStackList()
-      this.getTableData()
-    }
+      this.search = { stackId: "", clusterId: "" }; //保证切换站点时，清空选择项
+      this.getStackList();
+      this.getTableData();
+    },
   },
-  mounted(){
-
-
-  }
-}
+  mounted() {},
+};
 </script>
-

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

@@ -31,7 +31,7 @@
         <div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
         <div>综合效率:<span class="point">{{efficiency | formatNumber}}%</span></div>
       </div>
-      <div id="dlzbChart" style="height: 310px"></div>
+      <div id="dlzbChart" style="height: 310px;"></div>
     </div>
   </el-card>
 </template>
@@ -167,7 +167,7 @@ export default {
   line-height: 18px;
   color: #333333;
   font-size: 16px;
-  padding:10px 0;
+  padding:20px 0;
   >div{
     display: inline-block;
     margin-right: 20px;