xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

develop_cloud #1

Merged
dashixiong merged 234 commits from develop_cloud into main-cloud 2026-02-11 02:06:04 +00:00
Conversation 0 Commits 234 Files Changed 137 +13572 -388
123 changed files with 13572 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 679f8f2a07 - Show all commits

300
src/views/ems/dzjk/sbjk/PointChart.vue
View File

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

31
src/views/ems/dzjk/sbjk/dtdc/ChartDetail.vue
View File

@ -10,13 +10,17 @@
class="ems-dialog chart-detail-dialog" class="ems-dialog chart-detail-dialog"
:before-close="handleColsed" :before-close="handleColsed"
> >
<el-card shadow="always" class="common-card-container time-range-card" style="margin-top:20px"> <el-card
shadow="always"
class="common-card-container time-range-card"
style="margin-top: 20px"
>
<div slot="header" class="time-range-header"> <div slot="header" class="time-range-header">
<span class="card-title"></span> <span class="card-title"></span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/> <date-range-select ref="dateRangeSelect" @updateDate="updateDate" />
</div> </div>
<div class="card-main" v-loading="loading"> <div class="card-main" v-loading="loading">
<div id="lineChart" style="height: 310px;"></div> <div id="lineChart" style="height: 310px"></div>
</div> </div>
</el-card> </el-card>
</el-dialog> </el-dialog>
@ -28,7 +32,7 @@ import resize from "@/mixins/ems/resize";
import { getSingleBatteryData } from "@/api/ems/dzjk"; import { getSingleBatteryData } from "@/api/ems/dzjk";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue"; import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default { export default {
components: {DateRangeSelect}, components: { DateRangeSelect },
mixins: [resize], mixins: [resize],
data() { data() {
return { return {
@ -48,9 +52,9 @@ export default {
}, },
methods: { methods: {
// 更新时间范围 重置图表 // 更新时间范围 重置图表
updateDate(data){ updateDate(data) {
this.dateRange=data || [] this.dateRange = data || [];
this.getData() this.getData();
}, },
handleColsed(done) { handleColsed(done) {
if (!this.chart) { if (!this.chart) {
@ -94,7 +98,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
!this.chart && !this.chart &&
(this.chart = echarts.init(document.querySelector("#lineChart"))); (this.chart = echarts.init(document.querySelector("#lineChart")));
this.$refs.dateRangeSelect.init() this.$refs.dateRangeSelect.init();
}); });
}, },
setOption(data) { setOption(data) {
@ -148,7 +152,6 @@ export default {
}, },
]; ];
} }
this.chart && this.chart &&
this.chart.setOption({ this.chart.setOption({
color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"], color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
@ -186,10 +189,10 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-detail-dialog{ .chart-detail-dialog {
::v-deep{ ::v-deep {
.el-dialog__body{ .el-dialog__body {
padding-top:0; padding-top: 0;
} }
} }
} }

12
src/views/ems/dzjk/sbjk/dtdc/List.vue
View File

@ -10,14 +10,17 @@
v-for="(item, index) in tableData" v-for="(item, index) in tableData"
:key="index + 'dtdcList'" :key="index + 'dtdcList'"
:class="handleListClass(item)" :class="handleListClass(item)"
@click="chartDetail(item)"
> >
<div style="font-size: 10px; font-weight: 600"> <div style="font-size: 10px; font-weight: 600">
{{ item.clusterDeviceId }} {{ item.clusterDeviceId }}
</div> </div>
<div>#{{ item.deviceId }}</div> <div>#{{ item.deviceId }}</div>
<div class="dy">{{ item.voltage }}V</div> <div class="dy pointer" @click="chartDetail(item, '电压 (V)')">
<div class="wd">{{ item.temperature }}℃</div> {{ item.voltage }}V
</div>
<div class="wd pointer" @click="chartDetail(item, '温度 (℃)')">
{{ item.temperature }}℃
</div>
</div> </div>
</div> </div>
@ -101,7 +104,7 @@ export default {
//查看表格行图表 //查看表格行图表
chartDetail(row, dataType = "") { chartDetail(row, dataType = "") {
const { clusterDeviceId, deviceId } = row; const { clusterDeviceId, deviceId } = row;
this.$emit("chart", { clusterDeviceId, deviceId, dataType }); this.$emit("chart", { ...row, dataType });
}, },
}, },
}; };
@ -123,7 +126,6 @@ export default {
box-sizing: content-box; box-sizing: content-box;
min-width: 60px; min-width: 60px;
width: auto; width: auto;
cursor: pointer;
&::before { &::before {
display: block; display: block;
content: ""; content: "";

22
src/views/ems/dzjk/sbjk/dtdc/Table.vue
View File

@ -8,10 +8,10 @@
> >
<el-table-column prop="deviceId" label="单体编号"> </el-table-column> <el-table-column prop="deviceId" label="单体编号"> </el-table-column>
<el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column> <el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column>
<el-table-column prop="voltage" label="电压（V）"> <el-table-column prop="voltage" label="电压 (V)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@click="chartDetail(scope.row, 'voltage')" @click="chartDetail(scope.row, '电压 (V)')"
type="text" type="text"
size="small" size="small"
> >
@ -19,10 +19,10 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="temperature" label="温度（℃）"> <el-table-column prop="temperature" label="温度 (℃)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@click="chartDetail(scope.row, 'temperature')" @click="chartDetail(scope.row, '温度 (℃)')"
type="text" type="text"
size="small" size="small"
> >
@ -30,10 +30,10 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="soc" label="SOC（%）"> <el-table-column prop="soc" label="SOC (%)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@click="chartDetail(scope.row, 'soc')" @click="chartDetail(scope.row, 'SOC (%)')"
type="text" type="text"
size="small" size="small"
> >
@ -41,10 +41,10 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="soh" label="SOH（%）"> <el-table-column prop="soh" label="SOH (%)">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@click="chartDetail(scope.row, 'soh')" @click="chartDetail(scope.row, 'SOH (%)')"
type="text" type="text"
size="small" size="small"
> >
@ -52,13 +52,13 @@
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="曲线图"> <!-- <el-table-column label="曲线图">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="chartDetail(scope.row)" type="text" size="small"> <el-button @click="chartDetail(scope.row)" type="text" size="small">
展示 展示
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column> -->
</el-table> </el-table>
<!-- <el-pagination <!-- <el-pagination
v-show="tableData.length > 0" v-show="tableData.length > 0"
@ -116,7 +116,7 @@ export default {
//查看表格行图表 //查看表格行图表
chartDetail(row, dataType = "") { chartDetail(row, dataType = "") {
const { clusterDeviceId, deviceId } = row; const { clusterDeviceId, deviceId } = row;
this.$emit("chart", { clusterDeviceId, deviceId, dataType }); this.$emit("chart", { ...row, dataType });
}, },
}, },
}; };

24
src/views/ems/dzjk/sbjk/dtdc/index.vue
View File

@ -103,6 +103,7 @@
> >
</el-pagination> </el-pagination>
<chart-detail ref="chartDetail" /> <chart-detail ref="chartDetail" />
<point-chart ref="pointChart" :site-id="siteId" />
</el-card> </el-card>
</template> </template>
@ -117,10 +118,17 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import ChartDetail from "./ChartDetail.vue"; import ChartDetail from "./ChartDetail.vue";
import Table from "./Table.vue"; import Table from "./Table.vue";
import List from "./List.vue"; import List from "./List.vue";
import pointChart from "./../PointChart.vue";
export default { export default {
name: "DzjkSbjkDtdc", name: "DzjkSbjkDtdc",
mixins: [getQuerySiteId], mixins: [getQuerySiteId],
components: { BarChart, ChartDetail, DtdcTable: Table, DtdcList: List }, components: {
BarChart,
ChartDetail,
DtdcTable: Table,
DtdcList: List,
pointChart,
},
computed: { computed: {
pointIdList() { pointIdList() {
let obj = {}; let obj = {};
@ -162,12 +170,14 @@ export default {
activeBtn !== menu && (this.activeBtn = menu); activeBtn !== menu && (this.activeBtn = menu);
}, },
//查看表格行图表 //查看表格行图表
chartDetail({ clusterDeviceId, deviceId, dataType = "" }) { chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
const { siteId } = this; dataType &&
this.$refs.chartDetail.initChart( this.$refs.pointChart.showChart({
{ siteId, clusterDeviceId, deviceId }, pointName: dataType,
dataType categoryName: "单体电池",
); deviceId: clusterDeviceId,
child: [deviceId],
});
}, },
// 分页 // 分页
handleSizeChange(val) { handleSizeChange(val) {

363
src/views/ems/dzjk/sbjk/pcs/index.vue
View File

@ -1,69 +1,176 @@
<template> <template>
<div v-loading="loading" class="pcs-ems-dashboard-editor-container"> <div v-loading="loading" class="pcs-ems-dashboard-editor-container">
<!-- 顶部六个方块--> <!-- 顶部六个方块-->
<real-time-base-info :data="runningHeadData"/> <real-time-base-info :data="runningHeadData" />
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;"> <div
<el-card :class="{ v-for="(pcsItem, pcsIndex) in pcsList"
'warning-card-container':pcsItem.workStatus === '1', :key="pcsIndex + 'PcsHome'"
'timing-card-container':pcsItem.workStatus === '2', style="margin-bottom: 25px"
'running-card-container':!['1','2'].includes(pcsItem.workStatus) >
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg" <el-card
shadow="always"> :class="{
'warning-card-container': pcsItem.workStatus === '1',
'timing-card-container': pcsItem.workStatus === '2',
'running-card-container': !['1', '2'].includes(pcsItem.workStatus),
}"
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always"
>
<div slot="header"> <div slot="header">
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span> <span class="large-title"
>{{ pcsIndex + 1 }}#{{ pcsItem.deviceName }}</span
>
<div class="info"> <div class="info">
<div> <div>
{{ {{
$store.state.ems.communicationStatusOptions[ $store.state.ems.communicationStatusOptions[
pcsItem.communicationStatus pcsItem.communicationStatus
] ]
}} }}
</div> </div>
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div> <div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
</div> </div>
<div class="alarm"> <div class="alarm">
<el-badge :value="pcsItem.alarmNum || 0" class="item"> <el-badge :value="pcsItem.alarmNum || 0" class="item">
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i> <i
class="el-icon-message-solid"
style="font-size: 26px; color: #fff; display: block"
></i>
</el-badge> </el-badge>
</div> </div>
</div> </div>
<div class="descriptions-main"> <div class="descriptions-main">
<el-descriptions :colon="false" :column="4" direction="vertical"> <el-descriptions :colon="false" :column="4" direction="vertical">
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item> <el-descriptions-item
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item> :contentClassName="`descriptions-direction ${
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item> pcsItem.workStatus === '0' ? 'save' : 'danger'
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item> }`"
</el-descriptions> :span="1"
</div> label="工作状态"
<div class="descriptions-main descriptions-main-bg-color"> labelClassName="descriptions-label"
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label"> >{{
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1"> $store.state.ems.workStatusOptions[pcsItem.workStatus]
<span class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)"> }}</el-descriptions-item
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span> >
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="并网状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
}}</el-descriptions-item
>
<el-descriptions-item
:contentClassName="`descriptions-direction ${
pcsItem.deviceStatus === '0' ? 'save' : 'danger'
}`"
:span="1"
label="设备状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
}}</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="控制模式"
labelClassName="descriptions-label"
>{{
$store.state.ems.controlModeOptions[pcsItem.controlMode]
}}</el-descriptions-item
>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions
:colon="false"
:column="4"
contentClassName="descriptions-direction"
direction="vertical"
labelClassName="descriptions-label"
>
<el-descriptions-item
v-for="(item, index) in infoData"
:key="index + 'pcsInfoData'"
:label="item.label"
:span="1"
>
<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> </span>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
</div> </div>
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main"> <div
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label"> v-for="(item, index) in pcsItem.pcsBranchInfoList"
<el-descriptions-item :label="'支路'+(index+1)" :span="4" contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item> :key="index + 'pcsBranchInfoList'"
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流功率" labelClassName="descriptions-label"> class="descriptions-main"
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span> >
</el-descriptions-item> <el-descriptions
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电压" labelClassName="descriptions-label"> :colon="false"
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span> :column="4"
</el-descriptions-item> contentClassName="descriptions-direction keep"
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电流" labelClassName="descriptions-label"> direction="vertical"
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span> labelClassName="descriptions-label"
</el-descriptions-item> >
</el-descriptions> <el-descriptions-item
</div> :label="'支路' + (index + 1)"
:span="4"
contentClassName="descriptions-direction keep"
labelClassName="descriptions-label"
>{{ item.dischargeStatus }}</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流功率"
labelClassName="descriptions-label"
>
<span
class="pointer"
@click="showChart('直流功率', 'PCS分支设备', item.deviceId)"
>{{ item.dcPower }}kW</span
>
</el-descriptions-item>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流电压"
labelClassName="descriptions-label"
>
<span
class="pointer"
@click="showChart('直流电压', 'PCS分支设备', item.deviceId)"
>{{ item.dcVoltage }}V</span
>
</el-descriptions-item>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="直流电流"
labelClassName="descriptions-label"
>
<span
class="pointer"
@click="showChart('直流电流', 'PCS分支设备', item.deviceId)"
>{{ item.dcCurrent }}A</span
>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card> </el-card>
</div> </div>
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty> <el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})--> <!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
<point-chart ref="pointChart" :site-id="siteId"/> <point-chart ref="pointChart" :site-id="siteId" />
</div> </div>
</template> </template>
@ -71,68 +178,128 @@
import pointChart from "./../PointChart.vue"; import pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue"; import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk' import { getRunningHeadInfo, getPcsDetailInfo } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate"; import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default { export default {
name:'DzjkSbjkPcs', name: "DzjkSbjkPcs",
components:{RealTimeBaseInfo,pointChart}, components: { RealTimeBaseInfo, pointChart },
mixins:[getQuerySiteId,intervalUpdate], mixins: [getQuerySiteId, intervalUpdate],
data() { data() {
return { return {
loading:false, loading: false,
runningHeadData:{},//运行信息 runningHeadData: {}, //运行信息
pcsList:[], pcsList: [],
infoData:[ infoData: [
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'}, {
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'}, label: "总交流有功电率",
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''}, attr: "totalActivePower",
{label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'}, unit: "kW",
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'}, pointName: "总交流有功电率",
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'}, },
{label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''}, {
{label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'}, label: "当天交流充电量",
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'}, attr: "dailyAcChargeEnergy",
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;',pointName:''}, unit: "kWh",
{label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''}, pointName: "当天交流充电量 (kWh)",
{label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'}, },
{label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'}, { label: "A相电压", attr: "aPhaseVoltage", unit: "V", pointName: "" },
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;',pointName:''}, {
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'} label: "A相电流",
attr: "aPhaseCurrent",
unit: "A",
pointName: "A相电流",
},
{
label: "总交流无功电率",
attr: "totalReactivePower",
unit: "kVar",
pointName: "总交流无功电率",
},
{
label: "当天交流放电量",
attr: "dailyAcDischargeEnergy",
unit: "kWh",
pointName: "当天交流放电量 (kWh)",
},
{ label: "B相电压", attr: "bPhaseVoltage", unit: "V", pointName: "" },
{
label: "B相电流",
attr: "bPhaseCurrent",
unit: "A",
pointName: "B相电流",
},
{
label: "总交流视在功率",
attr: "totalApparentPower",
unit: "kVA",
pointName: "总交流视在功率",
},
{
label: "PCS模块温度",
attr: "pcsModuleTemperature",
unit: "&#8451;",
pointName: "",
},
{ label: "C相电压", attr: "cPhaseVoltage", unit: "V", pointName: "" },
{
label: "C相电流",
attr: "cPhaseCurrent",
unit: "A",
pointName: "C相电流",
},
{
label: "总交流功率因数",
attr: "totalPowerFactor",
unit: "",
pointName: "总交流功率因数",
},
{
label: "PCS环境温度",
attr: "pcsEnvironmentTemperature",
unit: "&#8451;",
pointName: "",
},
{
label: "交流频率",
attr: "acFrequency",
unit: "Hz",
pointName: "交流频率",
},
], ],
pcsBranchList:[],//pcs的支路列表 pcsBranchList: [], //pcs的支路列表
} };
}, },
methods:{ methods: {
//todo 后续需要新增设备id showChart(pointName, categoryName, deviceId) {
showChart(pointName,categoryName,deviceId){ console.log("点击查询图表", pointName, categoryName, deviceId);
console.log('点击查询图表',pointName,categoryName,deviceId) pointName &&
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId}) this.$refs.pointChart.showChart({ pointName, categoryName, deviceId });
}, },
//6个方块数据 //6个方块数据
getRunningHeadData(){ getRunningHeadData() {
getRunningHeadInfo(this.siteId).then(response => { getRunningHeadInfo(this.siteId).then((response) => {
this.runningHeadData = response?.data || {} this.runningHeadData = response?.data || {};
}) });
}, },
getPcsList(){ getPcsList() {
this.loading = true this.loading = true;
getPcsDetailInfo(this.siteId).then(response => { getPcsDetailInfo(this.siteId)
const data = response?.data || {} .then((response) => {
this.pcsList = JSON.parse(JSON.stringify(data)) const data = response?.data || {};
}).finally(()=>this.loading = false) this.pcsList = JSON.parse(JSON.stringify(data));
})
.finally(() => (this.loading = false));
}, },
updateData(){ updateData() {
this.getRunningHeadData() this.getRunningHeadData();
this.getPcsList() this.getPcsList();
},
init() {
this.updateData();
this.updateInterval(this.updateData);
}, },
init(){
this.updateData()
this.updateInterval(this.updateData)
}
}, },
};
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped></style>
</style>

270
src/views/ems/site/sblb/PointTable.vue
View File

@ -1,6 +1,7 @@
<!--电位展示图表--> <!--电位展示图表-->
<template> <template>
<el-dialog <div>
<el-dialog
v-loading="loading" v-loading="loading"
:close-on-click-modal="false" :close-on-click-modal="false"
:visible.sync="show" :visible.sync="show"
@ -11,56 +12,84 @@
show-close show-close
title="点位清单" title="点位清单"
width="800px" width="800px"
> >
<el-form :inline="true" label-width="85px">
<el-form-item label="点位名称">
<el-input
v-model="form.dataPointName"
clearable
placeholder="请输入点位名称"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item label="点位">
<el-input
v-model="form.dataPoint"
clearable
placeholder="请输入点位"
style="width: 150px"
></el-input>
</el-form-item>
<br />
<el-form-item label="最小值">
<el-input
v-model="form.lower"
clearable
placeholder="请输入最小值"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item label="最大值">
<el-input
v-model="form.upper"
clearable
placeholder="请输入最大值"
style="width: 150px"
></el-input>
</el-form-item>
<el-form-item style="margin-left: 20px">
<el-button type="primary" @click="search">搜索</el-button>
</el-form-item>
</el-form>
<el-form :inline="true" label-width="85px"> <el-table
<el-form-item label="点位名称">
<el-input v-model="form.dataPointName" clearable placeholder="请输入点位名称" style="width: 150px"></el-input>
</el-form-item>
<el-form-item label="点位">
<el-input v-model="form.dataPoint" clearable placeholder="请输入点位" style="width: 150px"></el-input>
</el-form-item>
<br>
<el-form-item label="最小值">
<el-input v-model="form.lower" clearable placeholder="请输入最小值" style="width: 150px"></el-input>
</el-form-item>
<el-form-item label="最大值">
<el-input v-model="form.upper" clearable placeholder="请输入最大值" style="width: 150px"></el-input>
</el-form-item>
<el-form-item style="margin-left: 20px">
<el-button type="primary" @click="search">搜索</el-button>
</el-form-item>
</el-form>
<el-table
:data="tableData" :data="tableData"
class="common-table" class="common-table"
max-height="400px" max-height="400px"
stripe stripe
style="width: 100%;" style="width: 100%"
:default-sort = "{prop: 'updateTime', order: 'descending'}" :default-sort="{ order: 'descending' }"
@sort-change="changeSort"> @sort-change="changeSort"
<el-table-column
label="数据点位"
prop="dataPoint">
</el-table-column>
<el-table-column
label="数据点位名称"
prop="pointName">
</el-table-column>
<el-table-column
label="最新值"
prop="pointValue">
</el-table-column>
<el-table-column
label="更新时间"
prop="updateTime"
sortable="custom"
> >
</el-table-column> <el-table-column label="数据点位" prop="dataPoint"> </el-table-column>
</el-table> <el-table-column label="数据点位名称" prop="pointName">
<el-pagination </el-table-column>
v-show="tableData.length>0" <el-table-column
label="最新值"
prop="pointValue"
align="right"
sortable="custom"
>
<template slot-scope="scope">
<span
class="pointer"
@click="
showChart(
scope.row.pointName,
scope.row.deviceName,
scope.row.deviceId
)
"
>{{ scope.row.pointValue }}</span
>
</template>
</el-table-column>
<el-table-column label="单位" prop="unit"></el-table-column>
<el-table-column label="更新时间" prop="updateTime" sortable="custom">
</el-table-column>
</el-table>
<el-pagination
v-show="tableData.length > 0"
:current-page="pageNum" :current-page="pageNum"
:page-size="pageSize" :page-size="pageSize"
:page-sizes="[10, 20, 30, 40]" :page-sizes="[10, 20, 30, 40]"
@ -69,35 +98,40 @@
background background
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
small small
style="margin-top:15px;text-align: center" style="margin-top: 15px; text-align: center"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
> >
</el-pagination> </el-pagination>
</el-dialog> </el-dialog>
<point-chart ref="pointChart" :site-id="siteId" />
</div>
</template> </template>
<script> <script>
import {getDevicePointList} from "@/api/ems/site"; import { getDevicePointList } from "@/api/ems/site";
import pointChart from "@/views/ems/dzjk/sbjk/PointChart.vue";
export default { export default {
components: { pointChart },
watch: { watch: {
show(val) { show(val) {
if (!val) { if (!val) {
this.tableData = [] this.tableData = [];
this.deviceId = '' this.deviceId = "";
this.deviceName = '' this.deviceName = "";
this.siteId = '' this.siteId = "";
this.pageSize = 10 this.pageSize = 10;
this.pageNum = 1 this.pageNum = 1;
this.totalSize = 0 this.totalSize = 0;
this.form = { this.form = {
sortMethod: 'desc',//升序不传或者asc、降序desc） valueSortMethod: "desc", //升序不传或者asc、降序desc）
dataPointName: '',//点位名称 sortMethod: "desc", //升序不传或者asc、降序desc）
dataPoint: '',//点位名称 dataPointName: "", //点位名称
lower: '',// dataPoint: "", //点位名称
upper: '',// lower: "", //
} upper: "", //
this.loading = false };
this.loading = false;
} }
}, },
}, },
@ -106,81 +140,104 @@ export default {
show: false, show: false,
loading: false, loading: false,
form: { form: {
sortMethod: 'desc',//升序不传或者asc、降序desc） valueSortMethod: "desc", //最新值升序不传或者asc、降序desc）
dataPointName: '',//点位名称 sortMethod: "desc", //升序不传或者asc、降序desc）
dataPoint: '',//点位名称 dataPointName: "", //点位名称
lower: '',// dataPoint: "", //点位名称
upper: '',// lower: "", //
upper: "", //
}, },
deviceCategory: '', deviceCategory: "",
deviceName: '', deviceName: "",
deviceId: '', deviceId: "",
siteId: '', siteId: "",
tableData: [], tableData: [],
pageSize: 10,//分页栏当前每个数据总数 pageSize: 10, //分页栏当前每个数据总数
pageNum: 1,//分页栏当前页数 pageNum: 1, //分页栏当前页数
totalSize: 0,//table表格数据总数 totalSize: 0, //table表格数据总数
} };
}, },
methods: { methods: {
showChart(pointName, deviceName, deviceId) {
console.log("点击查询图表", pointName, deviceName, deviceId);
pointName &&
this.$refs.pointChart.showChart({ pointName, deviceName, deviceId });
},
changeSort(c) { changeSort(c) {
console.log('切换排序方式', c) console.log("切换排序方式", c);
if(c.prop === "updateTime" && c.order){ if (c.prop === "updateTime" && c.order) {
this.form.sortMethod = c.order === 'descending' ? 'desc' : 'asc' this.form.sortMethod = c.order === "descending" ? "desc" : "asc";
this.getData() this.getData();
} else if (c.prop === "pointValue" && c.order) {
this.form.valueSortMethod = c.order === "descending" ? "desc" : "asc";
this.getData();
} }
}, },
search() { search() {
this.pageNum = 1 this.pageNum = 1;
this.getData() this.getData();
}, },
showTable({deviceCategory, siteId, deviceId, deviceName}) { showTable({ deviceCategory, siteId, deviceId, deviceName }) {
this.deviceCategory = deviceCategory this.deviceCategory = deviceCategory;
this.siteId = siteId this.siteId = siteId;
this.deviceId = deviceId this.deviceId = deviceId;
this.deviceName = deviceName this.deviceName = deviceName;
this.show = true this.show = true;
this.getData() this.getData();
}, },
getData() { getData() {
this.loading = true this.loading = true;
const { const {
siteId, siteId,
deviceId, deviceId,
deviceCategory, deviceCategory,
pageNum, pageNum,
pageSize, pageSize,
form: {sortMethod, dataPointName, dataPoint, lower, upper} form: {
} = this valueSortMethod,
sortMethod,
dataPointName,
dataPoint,
lower,
upper,
},
} = this;
getDevicePointList({ getDevicePointList({
siteId, siteId,
deviceId, deviceId,
deviceCategory, deviceCategory,
pageNum, pageNum,
pageSize, pageSize,
sortMethod, dataPointName, dataPoint, lower, upper valueSortMethod,
}).then(response => { sortMethod,
this.tableData = response?.rows || []; dataPointName,
this.totalSize = response?.total || 0 dataPoint,
}).finally(() => { lower,
this.loading = false upper,
}) })
.then((response) => {
this.tableData = response?.rows || [];
this.totalSize = response?.total || 0;
})
.finally(() => {
this.loading = false;
});
}, },
// 分页 // 分页
handleSizeChange(val) { handleSizeChange(val) {
this.pageSize = val; this.pageSize = val;
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.pageNum = val this.pageNum = val;
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData();
}) });
}, },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
@ -188,5 +245,4 @@ export default {
line-height: 40px; line-height: 40px;
} }
} }
</style> </style>