develop_cloud #1
@ -12,14 +12,22 @@
|
||||
class="ems-dialog"
|
||||
: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">
|
||||
<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"/>
|
||||
<date-time-select
|
||||
ref="dateTimeSelect"
|
||||
:data-unit="dataUnit"
|
||||
@initDate="(e) => (dataRange = e || [])"
|
||||
@updateDate="updateDate"
|
||||
/>
|
||||
</div>
|
||||
<div style="height: 350px" id="searchChart"></div>
|
||||
</el-card>
|
||||
@ -38,38 +46,39 @@ export default {
|
||||
siteId: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isDtdc() {
|
||||
return this.categoryName === '单体电池'
|
||||
return this.categoryName === "单体电池";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
show(val) {
|
||||
if (!val) {
|
||||
this.pointName=''
|
||||
this.categoryName=''
|
||||
this.deviceId=''
|
||||
this.dataUnit=1
|
||||
this.pointName = "";
|
||||
this.categoryName = "";
|
||||
this.deviceId = "";
|
||||
this.dataUnit = 1;
|
||||
this.child = "";
|
||||
if (!this.chart) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
this.hideLoading()
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.hideLoading();
|
||||
this.chart.dispose();
|
||||
this.chart = null;
|
||||
}
|
||||
},
|
||||
dataUnit: {
|
||||
handler(newVal, oldVal) {
|
||||
if(!this.show) return
|
||||
console.log('wacth到了dataUnit的变化',newVal,oldVal)
|
||||
if (!this.show) return;
|
||||
console.log("wacth到了dataUnit的变化", newVal, oldVal);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.getDate()
|
||||
})
|
||||
this.$refs.dateTimeSelect.init();
|
||||
this.getDate();
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -77,129 +86,147 @@ export default {
|
||||
chart: null,
|
||||
dataUnit: 1,
|
||||
dataRange: [],
|
||||
child:[],//单体电池需要数据 暂不删除
|
||||
pointName:'',
|
||||
categoryName:'',
|
||||
deviceId:''
|
||||
}
|
||||
child: "", //单体电池需要数据
|
||||
pointName: "",
|
||||
categoryName: "",
|
||||
deviceId: "",
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showChart({pointName,categoryName,deviceId}){
|
||||
showChart({ pointName, categoryName, deviceId, child = "" }) {
|
||||
//初始化数据
|
||||
this.pointName=pointName
|
||||
this.categoryName=categoryName
|
||||
this.deviceId=deviceId
|
||||
this.show = true
|
||||
this.pointName = pointName;
|
||||
this.categoryName = categoryName;
|
||||
this.deviceId = deviceId;
|
||||
child && (this.child = child);
|
||||
this.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dateTimeSelect.init()
|
||||
this.initChart()
|
||||
this.getDate()
|
||||
})
|
||||
this.$refs.dateTimeSelect.init();
|
||||
this.initChart();
|
||||
this.getDate();
|
||||
});
|
||||
},
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.querySelector('#searchChart'))
|
||||
this.chart = echarts.init(document.querySelector("#searchChart"));
|
||||
},
|
||||
showLoading() {
|
||||
this.chart && this.chart.showLoading()
|
||||
this.chart && this.chart.showLoading();
|
||||
},
|
||||
hideLoading() {
|
||||
this.chart && this.chart.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
|
||||
this.showLoading();
|
||||
const {
|
||||
siteId,
|
||||
dataUnit,
|
||||
dataRange: [start = "", end = ""],
|
||||
child,
|
||||
deviceId,
|
||||
categoryName,
|
||||
pointName,
|
||||
} = this;
|
||||
let siteDeviceMap = {};
|
||||
child && (siteDeviceMap[siteId] = child);
|
||||
let startDate, endDate;
|
||||
if (start && dataUnit === 3) {
|
||||
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
startDate = start + ' 00:00:00'
|
||||
startDate = start + " 00:00:00";
|
||||
} else {
|
||||
startDate=start
|
||||
startDate = start;
|
||||
}
|
||||
if (end && dataUnit === 3) {
|
||||
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
|
||||
endDate = end + ' 00:00:00'
|
||||
endDate = end + " 00:00:00";
|
||||
} else {
|
||||
endDate=end
|
||||
endDate = end;
|
||||
}
|
||||
|
||||
getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
|
||||
this.setOption(response?.data || [])
|
||||
}).finally(()=>{
|
||||
this.hideLoading()
|
||||
getPointValueList({
|
||||
siteIds: [siteId],
|
||||
deviceId,
|
||||
dataUnit,
|
||||
categoryName,
|
||||
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 (!this.chart) return;
|
||||
this.chart.clear();
|
||||
console.log("返回的数据", data);
|
||||
let dataset = [];
|
||||
if (data.length > 0) {
|
||||
data.forEach((item, index) => {
|
||||
item.deviceList.forEach(inner=>{
|
||||
item.deviceList.forEach((inner) => {
|
||||
dataset.push({
|
||||
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${this.pointName}`,
|
||||
type:'line',
|
||||
name: `${
|
||||
this.isDtdc
|
||||
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
|
||||
: ""
|
||||
}${this.isDtdc ? inner.deviceId : this.pointName}`,
|
||||
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)
|
||||
})
|
||||
})
|
||||
})
|
||||
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('暂无数据')
|
||||
this.$message.warning("暂无数据");
|
||||
}
|
||||
console.log('图表数据',dataset)
|
||||
console.log("图表数据", dataset);
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
// left: 'center',
|
||||
// top: '10',
|
||||
},
|
||||
grid: {
|
||||
containLabel: true
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#333333",
|
||||
},
|
||||
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
|
||||
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] },
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
series: dataset
|
||||
})
|
||||
series: dataset,
|
||||
});
|
||||
},
|
||||
updateDate(val) {
|
||||
this.dataRange =val || []
|
||||
this.getDate()
|
||||
this.dataRange = val || [];
|
||||
this.getDate();
|
||||
},
|
||||
handleColsed(done) {
|
||||
if (!this.chart) {
|
||||
@ -209,8 +236,8 @@ export default {
|
||||
this.chart = null;
|
||||
done();
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
@ -218,5 +245,4 @@ export default {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -10,13 +10,17 @@
|
||||
class="ems-dialog chart-detail-dialog"
|
||||
: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">
|
||||
<span class="card-title"></span>
|
||||
<date-range-select ref="dateRangeSelect" @updateDate="updateDate" />
|
||||
</div>
|
||||
<div class="card-main" v-loading="loading">
|
||||
<div id="lineChart" style="height: 310px;"></div>
|
||||
<div id="lineChart" style="height: 310px"></div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-dialog>
|
||||
@ -49,8 +53,8 @@ export default {
|
||||
methods: {
|
||||
// 更新时间范围 重置图表
|
||||
updateDate(data) {
|
||||
this.dateRange=data || []
|
||||
this.getData()
|
||||
this.dateRange = data || [];
|
||||
this.getData();
|
||||
},
|
||||
handleColsed(done) {
|
||||
if (!this.chart) {
|
||||
@ -94,7 +98,7 @@ export default {
|
||||
this.$nextTick(() => {
|
||||
!this.chart &&
|
||||
(this.chart = echarts.init(document.querySelector("#lineChart")));
|
||||
this.$refs.dateRangeSelect.init()
|
||||
this.$refs.dateRangeSelect.init();
|
||||
});
|
||||
},
|
||||
setOption(data) {
|
||||
@ -148,7 +152,6 @@ export default {
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
this.chart &&
|
||||
this.chart.setOption({
|
||||
color: ["#FFBD00", "#3C81FF", "#05AEA3", "#F86F70"],
|
||||
|
||||
@ -10,14 +10,17 @@
|
||||
v-for="(item, index) in tableData"
|
||||
:key="index + 'dtdcList'"
|
||||
:class="handleListClass(item)"
|
||||
@click="chartDetail(item)"
|
||||
>
|
||||
<div style="font-size: 10px; font-weight: 600">
|
||||
{{ item.clusterDeviceId }}
|
||||
</div>
|
||||
<div>#{{ item.deviceId }}</div>
|
||||
<div class="dy">{{ item.voltage }}V</div>
|
||||
<div class="wd">{{ item.temperature }}℃</div>
|
||||
<div class="dy pointer" @click="chartDetail(item, '电压 (V)')">
|
||||
{{ item.voltage }}V
|
||||
</div>
|
||||
<div class="wd pointer" @click="chartDetail(item, '温度 (℃)')">
|
||||
{{ item.temperature }}℃
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -101,7 +104,7 @@ export default {
|
||||
//查看表格行图表
|
||||
chartDetail(row, dataType = "") {
|
||||
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;
|
||||
min-width: 60px;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
&::before {
|
||||
display: block;
|
||||
content: "";
|
||||
|
||||
@ -8,10 +8,10 @@
|
||||
>
|
||||
<el-table-column prop="deviceId" label="单体编号"> </el-table-column>
|
||||
<el-table-column prop="clusterDeviceId" label="簇号"> </el-table-column>
|
||||
<el-table-column prop="voltage" label="电压（V）">
|
||||
<el-table-column prop="voltage" label="电压 (V)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, 'voltage')"
|
||||
@click="chartDetail(scope.row, '电压 (V)')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -19,10 +19,10 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="temperature" label="温度（℃）">
|
||||
<el-table-column prop="temperature" label="温度 (℃)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, 'temperature')"
|
||||
@click="chartDetail(scope.row, '温度 (℃)')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -30,10 +30,10 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="soc" label="SOC（%）">
|
||||
<el-table-column prop="soc" label="SOC (%)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, 'soc')"
|
||||
@click="chartDetail(scope.row, 'SOC (%)')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -41,10 +41,10 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="soh" label="SOH（%）">
|
||||
<el-table-column prop="soh" label="SOH (%)">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="chartDetail(scope.row, 'soh')"
|
||||
@click="chartDetail(scope.row, 'SOH (%)')"
|
||||
type="text"
|
||||
size="small"
|
||||
>
|
||||
@ -52,13 +52,13 @@
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="曲线图">
|
||||
<!-- <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-column> -->
|
||||
</el-table>
|
||||
<!-- <el-pagination
|
||||
v-show="tableData.length > 0"
|
||||
@ -116,7 +116,7 @@ export default {
|
||||
//查看表格行图表
|
||||
chartDetail(row, dataType = "") {
|
||||
const { clusterDeviceId, deviceId } = row;
|
||||
this.$emit("chart", { clusterDeviceId, deviceId, dataType });
|
||||
this.$emit("chart", { ...row, dataType });
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -103,6 +103,7 @@
|
||||
>
|
||||
</el-pagination>
|
||||
<chart-detail ref="chartDetail" />
|
||||
<point-chart ref="pointChart" :site-id="siteId" />
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
@ -117,10 +118,17 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import ChartDetail from "./ChartDetail.vue";
|
||||
import Table from "./Table.vue";
|
||||
import List from "./List.vue";
|
||||
import pointChart from "./../PointChart.vue";
|
||||
export default {
|
||||
name: "DzjkSbjkDtdc",
|
||||
mixins: [getQuerySiteId],
|
||||
components: { BarChart, ChartDetail, DtdcTable: Table, DtdcList: List },
|
||||
components: {
|
||||
BarChart,
|
||||
ChartDetail,
|
||||
DtdcTable: Table,
|
||||
DtdcList: List,
|
||||
pointChart,
|
||||
},
|
||||
computed: {
|
||||
pointIdList() {
|
||||
let obj = {};
|
||||
@ -162,12 +170,14 @@ export default {
|
||||
activeBtn !== menu && (this.activeBtn = menu);
|
||||
},
|
||||
//查看表格行图表
|
||||
chartDetail({ clusterDeviceId, deviceId, dataType = "" }) {
|
||||
const { siteId } = this;
|
||||
this.$refs.chartDetail.initChart(
|
||||
{ siteId, clusterDeviceId, deviceId },
|
||||
dataType
|
||||
);
|
||||
chartDetail({ deviceId, clusterDeviceId, dataType = "" }) {
|
||||
dataType &&
|
||||
this.$refs.pointChart.showChart({
|
||||
pointName: dataType,
|
||||
categoryName: "单体电池",
|
||||
deviceId: clusterDeviceId,
|
||||
child: [deviceId],
|
||||
});
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
|
||||
@ -1,17 +1,25 @@
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
|
||||
<!-- 顶部六个方块-->
|
||||
<real-time-base-info :data="runningHeadData" />
|
||||
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
|
||||
<el-card :class="{
|
||||
<div
|
||||
v-for="(pcsItem, pcsIndex) in pcsList"
|
||||
:key="pcsIndex + 'PcsHome'"
|
||||
style="margin-bottom: 25px"
|
||||
>
|
||||
<el-card
|
||||
: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">
|
||||
'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">
|
||||
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
|
||||
<span class="large-title"
|
||||
>{{ pcsIndex + 1 }}#{{ pcsItem.deviceName }}</span
|
||||
>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
@ -24,38 +32,137 @@
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="descriptions-main">
|
||||
<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 :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-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
|
||||
: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>
|
||||
<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>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
|
||||
<el-descriptions-item :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>
|
||||
<div
|
||||
v-for="(item, index) in pcsItem.pcsBranchInfoList"
|
||||
:key="index + 'pcsBranchInfoList'"
|
||||
class="descriptions-main"
|
||||
>
|
||||
<el-descriptions
|
||||
:colon="false"
|
||||
:column="4"
|
||||
contentClassName="descriptions-direction keep"
|
||||
direction="vertical"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
<el-descriptions-item
|
||||
: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
|
||||
: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
|
||||
: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>
|
||||
@ -71,10 +178,10 @@
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||||
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";
|
||||
export default {
|
||||
name:'DzjkSbjkPcs',
|
||||
name: "DzjkSbjkPcs",
|
||||
components: { RealTimeBaseInfo, pointChart },
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
data() {
|
||||
@ -83,56 +190,116 @@ export default {
|
||||
runningHeadData: {}, //运行信息
|
||||
pcsList: [],
|
||||
infoData: [
|
||||
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
|
||||
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
|
||||
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',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:'℃',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:'℃',pointName:''},
|
||||
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
|
||||
{
|
||||
label: "总交流有功电率",
|
||||
attr: "totalActivePower",
|
||||
unit: "kW",
|
||||
pointName: "总交流有功电率",
|
||||
},
|
||||
{
|
||||
label: "当天交流充电量",
|
||||
attr: "dailyAcChargeEnergy",
|
||||
unit: "kWh",
|
||||
pointName: "当天交流充电量 (kWh)",
|
||||
},
|
||||
{ label: "A相电压", attr: "aPhaseVoltage", unit: "V", 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: "℃",
|
||||
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: "℃",
|
||||
pointName: "",
|
||||
},
|
||||
{
|
||||
label: "交流频率",
|
||||
attr: "acFrequency",
|
||||
unit: "Hz",
|
||||
pointName: "交流频率",
|
||||
},
|
||||
],
|
||||
pcsBranchList: [], //pcs的支路列表
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//todo 后续需要新增设备id
|
||||
showChart(pointName, categoryName, deviceId) {
|
||||
console.log('点击查询图表',pointName,categoryName,deviceId)
|
||||
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
|
||||
console.log("点击查询图表", pointName, categoryName, deviceId);
|
||||
pointName &&
|
||||
this.$refs.pointChart.showChart({ pointName, categoryName, deviceId });
|
||||
},
|
||||
//6个方块数据
|
||||
getRunningHeadData() {
|
||||
getRunningHeadInfo(this.siteId).then(response => {
|
||||
this.runningHeadData = response?.data || {}
|
||||
})
|
||||
getRunningHeadInfo(this.siteId).then((response) => {
|
||||
this.runningHeadData = response?.data || {};
|
||||
});
|
||||
},
|
||||
getPcsList() {
|
||||
this.loading = true
|
||||
getPcsDetailInfo(this.siteId).then(response => {
|
||||
const data = response?.data || {}
|
||||
this.pcsList = JSON.parse(JSON.stringify(data))
|
||||
}).finally(()=>this.loading = false)
|
||||
this.loading = true;
|
||||
getPcsDetailInfo(this.siteId)
|
||||
.then((response) => {
|
||||
const data = response?.data || {};
|
||||
this.pcsList = JSON.parse(JSON.stringify(data));
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
},
|
||||
updateData() {
|
||||
this.getRunningHeadData()
|
||||
this.getPcsList()
|
||||
this.getRunningHeadData();
|
||||
this.getPcsList();
|
||||
},
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
this.updateData();
|
||||
this.updateInterval(this.updateData);
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<!--电位展示图表-->
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
v-loading="loading"
|
||||
:close-on-click-modal="false"
|
||||
@ -12,20 +13,39 @@
|
||||
title="点位清单"
|
||||
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-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-input
|
||||
v-model="form.dataPoint"
|
||||
clearable
|
||||
placeholder="请输入点位"
|
||||
style="width: 150px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<br>
|
||||
<br />
|
||||
<el-form-item label="最小值">
|
||||
<el-input v-model="form.lower" clearable placeholder="请输入最小值" style="width: 150px"></el-input>
|
||||
<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-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>
|
||||
@ -37,26 +57,35 @@
|
||||
class="common-table"
|
||||
max-height="400px"
|
||||
stripe
|
||||
style="width: 100%;"
|
||||
:default-sort = "{prop: 'updateTime', order: 'descending'}"
|
||||
@sort-change="changeSort">
|
||||
<el-table-column
|
||||
label="数据点位"
|
||||
prop="dataPoint">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="数据点位名称"
|
||||
prop="pointName">
|
||||
style="width: 100%"
|
||||
:default-sort="{ order: 'descending' }"
|
||||
@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"
|
||||
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
|
||||
@ -75,29 +104,34 @@
|
||||
>
|
||||
</el-pagination>
|
||||
</el-dialog>
|
||||
<point-chart ref="pointChart" :site-id="siteId" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getDevicePointList } from "@/api/ems/site";
|
||||
import pointChart from "@/views/ems/dzjk/sbjk/PointChart.vue";
|
||||
|
||||
export default {
|
||||
components: { pointChart },
|
||||
watch: {
|
||||
show(val) {
|
||||
if (!val) {
|
||||
this.tableData = []
|
||||
this.deviceId = ''
|
||||
this.deviceName = ''
|
||||
this.siteId = ''
|
||||
this.pageSize = 10
|
||||
this.pageNum = 1
|
||||
this.totalSize = 0
|
||||
this.tableData = [];
|
||||
this.deviceId = "";
|
||||
this.deviceName = "";
|
||||
this.siteId = "";
|
||||
this.pageSize = 10;
|
||||
this.pageNum = 1;
|
||||
this.totalSize = 0;
|
||||
this.form = {
|
||||
sortMethod: 'desc',//升序不传或者asc、降序desc）
|
||||
dataPointName: '',//点位名称
|
||||
dataPoint: '',//点位名称
|
||||
lower: '',//
|
||||
upper: '',//
|
||||
}
|
||||
this.loading = false
|
||||
valueSortMethod: "desc", //升序不传或者asc、降序desc）
|
||||
sortMethod: "desc", //升序不传或者asc、降序desc）
|
||||
dataPointName: "", //点位名称
|
||||
dataPoint: "", //点位名称
|
||||
lower: "", //
|
||||
upper: "", //
|
||||
};
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -106,81 +140,104 @@ export default {
|
||||
show: false,
|
||||
loading: false,
|
||||
form: {
|
||||
sortMethod: 'desc',//升序不传或者asc、降序desc）
|
||||
dataPointName: '',//点位名称
|
||||
dataPoint: '',//点位名称
|
||||
lower: '',//
|
||||
upper: '',//
|
||||
valueSortMethod: "desc", //最新值升序不传或者asc、降序desc）
|
||||
sortMethod: "desc", //升序不传或者asc、降序desc）
|
||||
dataPointName: "", //点位名称
|
||||
dataPoint: "", //点位名称
|
||||
lower: "", //
|
||||
upper: "", //
|
||||
},
|
||||
deviceCategory: '',
|
||||
deviceName: '',
|
||||
deviceId: '',
|
||||
siteId: '',
|
||||
deviceCategory: "",
|
||||
deviceName: "",
|
||||
deviceId: "",
|
||||
siteId: "",
|
||||
tableData: [],
|
||||
pageSize: 10, //分页栏当前每个数据总数
|
||||
pageNum: 1, //分页栏当前页数
|
||||
totalSize: 0, //table表格数据总数
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showChart(pointName, deviceName, deviceId) {
|
||||
console.log("点击查询图表", pointName, deviceName, deviceId);
|
||||
pointName &&
|
||||
this.$refs.pointChart.showChart({ pointName, deviceName, deviceId });
|
||||
},
|
||||
changeSort(c) {
|
||||
console.log('切换排序方式', c)
|
||||
console.log("切换排序方式", c);
|
||||
if (c.prop === "updateTime" && c.order) {
|
||||
this.form.sortMethod = c.order === 'descending' ? 'desc' : 'asc'
|
||||
this.getData()
|
||||
this.form.sortMethod = c.order === "descending" ? "desc" : "asc";
|
||||
this.getData();
|
||||
} else if (c.prop === "pointValue" && c.order) {
|
||||
this.form.valueSortMethod = c.order === "descending" ? "desc" : "asc";
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
search() {
|
||||
this.pageNum = 1
|
||||
this.getData()
|
||||
this.pageNum = 1;
|
||||
this.getData();
|
||||
},
|
||||
showTable({ deviceCategory, siteId, deviceId, deviceName }) {
|
||||
this.deviceCategory = deviceCategory
|
||||
this.siteId = siteId
|
||||
this.deviceId = deviceId
|
||||
this.deviceName = deviceName
|
||||
this.show = true
|
||||
this.getData()
|
||||
this.deviceCategory = deviceCategory;
|
||||
this.siteId = siteId;
|
||||
this.deviceId = deviceId;
|
||||
this.deviceName = deviceName;
|
||||
this.show = true;
|
||||
this.getData();
|
||||
},
|
||||
getData() {
|
||||
this.loading = true
|
||||
this.loading = true;
|
||||
const {
|
||||
siteId,
|
||||
deviceId,
|
||||
deviceCategory,
|
||||
pageNum,
|
||||
pageSize,
|
||||
form: {sortMethod, dataPointName, dataPoint, lower, upper}
|
||||
} = this
|
||||
form: {
|
||||
valueSortMethod,
|
||||
sortMethod,
|
||||
dataPointName,
|
||||
dataPoint,
|
||||
lower,
|
||||
upper,
|
||||
},
|
||||
} = this;
|
||||
getDevicePointList({
|
||||
siteId,
|
||||
deviceId,
|
||||
deviceCategory,
|
||||
pageNum,
|
||||
pageSize,
|
||||
sortMethod, dataPointName, dataPoint, lower, upper
|
||||
}).then(response => {
|
||||
this.tableData = response?.rows || [];
|
||||
this.totalSize = response?.total || 0
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
valueSortMethod,
|
||||
sortMethod,
|
||||
dataPointName,
|
||||
dataPoint,
|
||||
lower,
|
||||
upper,
|
||||
})
|
||||
.then((response) => {
|
||||
this.tableData = response?.rows || [];
|
||||
this.totalSize = response?.total || 0;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 分页
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val
|
||||
this.pageNum = val;
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
this.getData();
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
@ -188,5 +245,4 @@ export default {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user