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

ems接口、综合查询

Browse Source
This commit is contained in:
白菜
2025-12-09 18:25:36 +08:00
parent 97f9b3ff0e
commit f49efb5edd
3 changed files with 547 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/ems/dzjk.js
View File

@ -24,6 +24,14 @@ export function getSiteAllDeviceCategory(siteId) {
}) })
} }
//EMS
export function getEmsDataList(siteId) {
return request({
url: `/ems/siteMonitor/getEmsDataList?siteId=${siteId}`,
method: 'get',
})
}
//获取pcs、实时运行头部的设备信息 //获取pcs、实时运行头部的设备信息
export function getRunningHeadInfo(siteId) { export function getRunningHeadInfo(siteId) {
return request({ return request({

487
src/views/ems/dzjk/sbjk/ems/index.vue
View File

@ -1,206 +1,253 @@
<template> <template>
<div v-loading="loading" class="ems"> <div v-loading="loading" class="ems">
<div <!-- <div-->
v-for="(item, index) in list" <!-- v-for="(item, index) in list"-->
:key="index + 'PcsHome'" <!-- :key="index + 'PcsHome'"-->
style="margin-bottom: 25px" <!-- style="margin-bottom: 25px"-->
<!-- >-->
<!-- <el-card-->
<!-- :class="{-->
<!-- 'warning-card-container': item.workStatus === '1',-->
<!-- 'timing-card-container': item.workStatus === '2',-->
<!-- 'running-card-container': !['1', '2'].includes(item.workStatus),-->
<!-- }"-->
<!-- class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"-->
<!-- shadow="always"-->
<!-- >-->
<!-- &lt;!&ndash; 标题&ndash;&gt;-->
<!-- <div slot="header">-->
<!-- <span class="large-title"-->
<!-- >{{ item.deviceName }}</span-->
<!-- >-->
<!-- <div class="info">-->
<!-- <div>-->
<!-- {{-->
<!-- $store.state.ems.workStatusOptions[item.workStatus]-->
<!-- }}-->
<!-- </div>-->
<!-- <div>数据更新时间：{{ item.dataUpdateTime }}</div>-->
<!-- </div>-->
<!-- <div class="alarm">-->
<!-- <el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">-->
<!-- 详细-->
<!-- </el-button>-->
<!-- <el-badge :value="item.alarmNum || 0" class="item">-->
<!-- <i-->
<!-- class="el-icon-message-solid alarm-icon"-->
<!-- @click="pointDetail(item,'alarmPoint')"-->
<!-- ></i>-->
<!-- </el-badge>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; 工作状态&ndash;&gt;-->
<!-- <div class="descriptions-main">-->
<!-- <el-descriptions :colon="false" :column="5" direction="vertical">-->
<!-- <el-descriptions-item-->
<!-- :contentClassName="`descriptions-direction ${-->
<!-- item.workStatus === '0' ? 'save' : 'danger'-->
<!-- }`"-->
<!-- :span="1"-->
<!-- label="工作状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >{{-->
<!-- $store.state.ems.workStatusOptions[item.workStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="工作模式"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- todo 手动/自动-->
<!-- {{-->
<!-- $store.state.ems.gridStatusOptions[item.gridStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="并网状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >{{-->
<!-- $store.state.ems.gridStatusOptions[item.gridStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="告警状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- todo-->
<!-- &lt;!&ndash;-->
<!-- {{-->
<!-- $store.state.ems.warnOptions[item.warnMode]-->
<!-- }}&ndash;&gt;-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :contentClassName="`descriptions-direction ${-->
<!-- item.deviceStatus === '2' ? 'save' : 'danger'-->
<!-- }`"-->
<!-- :span="1"-->
<!-- label="设备状态"-->
<!-- labelClassName="descriptions-label"-->
<!-- >{{-->
<!-- $store.state.ems.deviceStatusOptions[item.deviceStatus]-->
<!-- }}-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- &lt;!&ndash; 用电量&ndash;&gt;-->
<!-- <div class="descriptions-main descriptions-main-bg-color">-->
<!-- <el-descriptions :colon="false" :column="5" direction="vertical">-->
<!-- <el-descriptions-item-->
<!-- :span="5"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="当日用电量："-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="电网用电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="储能放电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="储能充电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="负荷用电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- <el-descriptions-item-->
<!-- :span="1"-->
<!-- contentClassName="descriptions-direction"-->
<!-- label="光伏发电量"-->
<!-- labelClassName="descriptions-label"-->
<!-- >-->
<!-- </el-descriptions-item-->
<!-- >-->
<!-- </el-descriptions>-->
<!-- </div>-->
<!-- &lt;!&ndash; 表格&ndash;&gt;-->
<!-- <el-table-->
<!-- class="common-table"-->
<!-- stripe-->
<!-- style="width: 100%;margin-top:25px;">-->
<!-- <el-table-column-->
<!-- label="功率"-->
<!-- prop="type">-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="电网"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span class="pointer"-->
<!-- @click="showChart('簇电压',scope.row.clusterId)">{{ scope.row.clusterVoltage }} V</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="储能">-->
<!-- <template slot-scope="scope">-->
<!-- <span class="pointer"-->
<!-- @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="负荷">-->
<!-- <template slot-scope="scope">-->
<!-- <span class="pointer"-->
<!-- @click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- label="光伏">-->
<!-- <template slot-scope="scope">-->
<!-- <span class="pointer"-->
<!-- @click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- &lt;!&ndash; 图表&ndash;&gt;-->
<!-- <div id="emsChart" style="height: 350px"></div>-->
<!-- </el-card>-->
<!-- </div>-->
<el-card
v-for="(item,index) in list"
:key="index+'emsList'"
class="sbjk-card-container list running-card-container"
shadow="always"
> >
<el-card <div slot="header">
:class="{ <span class="large-title">{{ item.deviceName }}</span>
'warning-card-container': item.workStatus === '1', <div class="info">
'timing-card-container': item.workStatus === '2', <div>
'running-card-container': !['1', '2'].includes(item.workStatus), EMS控制模式: {{
}" item.emsStatus === 0 ? '自动' : '手动'
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"
>{{ item.deviceName }}</span
>
<div class="info">
<div>
{{
$store.state.ems.workStatusOptions[item.workStatus]
}}
</div>
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
</div>
<div class="alarm">
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
详细
</el-button>
<el-badge :value="item.alarmNum || 0" class="item">
<i
class="el-icon-message-solid alarm-icon"
@click="pointDetail(item,'alarmPoint')"
></i>
</el-badge>
</div> </div>
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
</div> </div>
<!-- 工作状态--> <div class="alarm">
<div class="descriptions-main"> <el-button size="small" style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
<el-descriptions :colon="false" :column="5" direction="vertical"> </el-button>
<el-descriptions-item <el-badge :value="item.alarmNum || 0" class="item">
:contentClassName="`descriptions-direction ${ <i
item.workStatus === '0' ? 'save' : 'danger' class="el-icon-message-solid alarm-icon"
}`" @click="pointDetail(item,'alarmPoint')"
:span="1" ></i>
label="工作状态" </el-badge>
labelClassName="descriptions-label" </div>
>{{ </div>
$store.state.ems.workStatusOptions[item.workStatus] <el-row class="device-info-row">
}} <el-col v-for="(tempDataItem,tempDataIndex) in bmsDataList" :key="tempDataIndex+'bmsTempData'"
</el-descriptions-item :span="6" class="device-info-col">
> <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
<el-descriptions-item <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
:span="1" v-html="tempDataItem.unit"></span></span>
contentClassName="descriptions-direction" </span>
label="工作模式" </el-col>
labelClassName="descriptions-label" </el-row>
> <el-row class="device-info-row" style="margin-top:20px;">
todo 手动/自动 <el-col v-for="(tempDataItem,tempDataIndex) in pcsDataList" :key="tempDataIndex+'pcsTempData'"
{{ :span="6" class="device-info-col">
$store.state.ems.gridStatusOptions[item.gridStatus] <span class="pointer" @click="showChart(tempDataItem.name,item.deviceId)">
}} <span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
v-html="tempDataItem.unit"></span></span>
</span>
</el-col>
</el-row>
</el-card>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="并网状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.gridStatusOptions[item.gridStatus]
}}
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="告警状态"
labelClassName="descriptions-label"
>
todo
<!--
{{
$store.state.ems.warnOptions[item.warnMode]
}}-->
</el-descriptions-item
>
<el-descriptions-item
:contentClassName="`descriptions-direction ${
item.deviceStatus === '2' ? 'save' : 'danger'
}`"
:span="1"
label="设备状态"
labelClassName="descriptions-label"
>{{
$store.state.ems.deviceStatusOptions[item.deviceStatus]
}}
</el-descriptions-item
>
</el-descriptions>
</div>
<!-- 用电量-->
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions :colon="false" :column="5" direction="vertical">
<el-descriptions-item
:span="5"
contentClassName="descriptions-direction"
label="当日用电量："
labelClassName="descriptions-label"
>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="电网用电量"
labelClassName="descriptions-label"
>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="储能放电量"
labelClassName="descriptions-label"
>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="储能充电量"
labelClassName="descriptions-label"
>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="负荷用电量"
labelClassName="descriptions-label"
>
</el-descriptions-item
>
<el-descriptions-item
:span="1"
contentClassName="descriptions-direction"
label="光伏发电量"
labelClassName="descriptions-label"
>
</el-descriptions-item
>
</el-descriptions>
</div>
<!-- 表格-->
<el-table
class="common-table"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
label="功率"
prop="type">
</el-table-column>
<el-table-column
label="电网"
>
<template slot-scope="scope">
<span class="pointer"
@click="showChart('簇电压',scope.row.clusterId)">{{ scope.row.clusterVoltage }} V</span>
</template>
</el-table-column>
<el-table-column
label="储能">
<template slot-scope="scope">
<span class="pointer"
@click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>
</template>
</el-table-column>
<el-table-column
label="负荷">
<template slot-scope="scope">
<span class="pointer"
@click="showChart('簇电流',scope.row.clusterId)">{{ scope.row.clusterCurrent }} A</span>
</template>
</el-table-column>
<el-table-column
label="光伏">
<template slot-scope="scope">
<span class="pointer"
@click="showChart('当前SOC',scope.row.clusterId)">{{ scope.row.currentSoc }} %</span>
</template>
</el-table-column>
</el-table>
<!-- 图表-->
<div id="emsChart" style="height: 350px"></div>
</el-card>
</div>
<el-empty v-show="list.length <= 0" :image-size="200"></el-empty> <el-empty v-show="list.length <= 0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/> <point-chart ref="pointChart" :site-id="siteId"/>
<point-table ref="pointTable"/> <point-table ref="pointTable"/>
@ -211,7 +258,7 @@
import pointChart from "./../PointChart.vue"; import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue"; import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getPcsDetailInfo} from "@/api/ems/dzjk"; import {getEmsDataList} from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate"; import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default { export default {
@ -222,21 +269,53 @@ export default {
return { return {
loading: false, loading: false,
list: [], list: [],
bmsDataList: [{
name: 'BMS1SOC',
attr: 'bms1Soc'
},
{
name: 'BMS2SOC',
attr: 'bms2Soc'
},
{
name: 'BMS3SOC',
attr: 'bms3Soc'
},
{
name: 'BMS4SOC',
attr: 'bms4Soc'
}],
pcsDataList: [{
name: 'PCS-1有功功率',
attr: 'pcs1Yggl'
},
{
name: 'PCS-2有功功率',
attr: 'pcs2Yggl'
},
{
name: 'PCS-3有功功率',
attr: 'pcs3Yggl'
},
{
name: 'PCS-4有功功率',
attr: 'pcs4Yggl'
}]
}; };
}, },
methods: { methods: {
// 查看设备电位表格 // 查看设备电位表格
pointDetail(row, dataType) { pointDetail(row, dataType) {
const {deviceId} = row const {deviceId} = row
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType) this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'EMS'}, dataType)
}, },
showChart(pointName, deviceId, isBranch = false) { showChart(pointName, deviceId) {
pointName && pointName &&
this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId}); this.$refs.pointChart.showChart({pointName, deviceCategory: 'EMS', deviceId});
}, },
getPcsList() { getData() {
this.loading = true; this.loading = true;
getPcsDetailInfo(this.siteId) getEmsDataList(this.siteId)
.then((response) => { .then((response) => {
const data = response?.data || {}; const data = response?.data || {};
this.list = JSON.parse(JSON.stringify(data)); this.list = JSON.parse(JSON.stringify(data));
@ -244,7 +323,7 @@ export default {
.finally(() => (this.loading = false)); .finally(() => (this.loading = false));
}, },
updateData() { updateData() {
this.getPcsList(); this.getData();
}, },
init() { init() {
this.updateData(); this.updateData();

388
src/views/ems/search/index.vue
View File

@ -1,68 +1,68 @@
<template> <template>
<div <div
v-loading="loading" v-loading="loading"
class="ems-dashboard-editor-container" class="ems-dashboard-editor-container"
style="background-color: #ffffff" style="background-color: #ffffff"
> >
<el-form ref="form" :model="form" label-position="top"> <el-form ref="form" :model="form" label-position="top">
<el-form-item <el-form-item
label="站点" label="站点"
prop="siteIds" prop="siteIds"
:rules="[{ required: true, message: '请选择站点' }]" :rules="[{ required: true, message: '请选择站点' }]"
> >
<el-radio-group v-model="form.siteIds" @input="changeSiteIds"> <el-radio-group v-model="form.siteIds" @input="changeSiteIds">
<el-radio <el-radio
v-for="(item, index) in siteList" v-for="(item, index) in siteList"
:key="index + 'zdListSearch'" :key="index + 'zdListSearch'"
:label="item.siteId" :label="item.siteId"
> >
{{ item.siteName }} {{ item.siteName }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
label="设备" label="设备"
prop="deviceCategory" prop="deviceCategory"
:rules="[{ required: true, message: '请选择设备' }]" :rules="[{ required: true, message: '请选择设备' }]"
> >
<el-radio-group v-model="form.deviceCategory" @input="changeSiteIds"> <el-radio-group v-model="form.deviceCategory" @input="changeSiteIds">
<el-radio <el-radio
v-for="(item, index) in deviceCategoryList" v-for="(item, index) in deviceCategoryList"
:key="index + 'sbListSearch'" :key="index + 'sbListSearch'"
:label="item.code" :label="item.code"
> >
{{ item.name }} {{ item.name }}
</el-radio> </el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-if="isDtdc" v-if="isDtdc"
label="单体电池(不超过5个)" label="单体电池(不超过5个)"
prop="child" prop="child"
:rules="[{ required: true, message: '请选择单体电池' }]" :rules="[{ required: true, message: '请选择单体电池' }]"
> >
<el-cascader <el-cascader
v-model="form.child" v-model="form.child"
style="width: 400px" style="width: 400px"
:props="{ multiple: true }" :props="{ multiple: true }"
:show-all-levels="false" :show-all-levels="false"
:options="childOptions" :options="childOptions"
@change="handleChildChange" @change="handleChildChange"
></el-cascader> ></el-cascader>
</el-form-item> </el-form-item>
<div style="display: flex"> <div style="display: flex">
<el-form-item <el-form-item
label="点位" label="点位"
prop="pointName" prop="pointName"
:rules="[{ required: true, message: '请输入点位' }]" :rules="[{ required: true, message: '请输入点位' }]"
style="margin-right: 50px" style="margin-right: 50px"
> >
<el-autocomplete <el-autocomplete
v-model="form.pointName" v-model="form.pointName"
placeholder="请输入点位" placeholder="请输入点位"
clearable clearable
:fetch-suggestions="querySearchAsync" :fetch-suggestions="querySearchAsync"
@select="handleSelect" @select="handleSelect"
></el-autocomplete> ></el-autocomplete>
</el-form-item> </el-form-item>
</div> </div>
@ -71,8 +71,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-card <el-card
shadow="always" shadow="always"
class="common-card-container common-card-container-body-no-padding time-range-card" 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">
<span class="card-title"> <span class="card-title">
@ -83,10 +83,10 @@
</el-radio-group> </el-radio-group>
</span> </span>
<date-time-select <date-time-select
ref="dateTimeSelect" ref="dateTimeSelect"
:data-unit="form.dataUnit" :data-unit="form.dataUnit"
@initDate="(e) => (form.dataRange = e || [])" @initDate="(e) => (form.dataRange = e || [])"
@updateDate="updateDate" @updateDate="updateDate"
/> />
</div> </div>
<div style="height: 350px" id="searchChart"></div> <div style="height: 350px" id="searchChart"></div>
@ -97,18 +97,14 @@
<script> <script>
import * as echarts from "echarts"; import * as echarts from "echarts";
import resize from "@/mixins/ems/resize"; import resize from "@/mixins/ems/resize";
import { getAllSites } from "@/api/ems/zddt"; import {getAllSites} from "@/api/ems/zddt";
import { import {getAllBatteryIdsBySites, getAllDeviceCategory, getPointValueList, pointFuzzyQuery,} from "@/api/ems/search";
getAllDeviceCategory,
getPointValueList,
pointFuzzyQuery,
getAllBatteryIdsBySites,
} from "@/api/ems/search";
import DateTimeSelect from "./DateTimeSelect.vue"; import DateTimeSelect from "./DateTimeSelect.vue";
export default { export default {
name: "Search", name: "Search",
mixins: [resize], mixins: [resize],
components: { DateTimeSelect }, components: {DateTimeSelect},
computed: { computed: {
isDtdc() { isDtdc() {
return this.form.deviceCategory === "BATTERY"; return this.form.deviceCategory === "BATTERY";
@ -161,7 +157,7 @@ export default {
getChildList() { getChildList() {
this.childOptions = []; this.childOptions = [];
this.form.child = []; this.form.child = [];
const { siteIds } = this.form; const {siteIds} = this.form;
getAllBatteryIdsBySites([siteIds]).then((response) => { getAllBatteryIdsBySites([siteIds]).then((response) => {
const data = response?.data || {}; const data = response?.data || {};
const base = 50; const base = 50;
@ -178,7 +174,7 @@ export default {
if (num === 0) return; if (num === 0) return;
for (let i = 1; i <= num; i++) { for (let i = 1; i <= num; i++) {
const start = (i - 1) * base + 1, const start = (i - 1) * base + 1,
end = i * base; end = i * base;
options[index].children.push({ options[index].children.push({
value: i, value: i,
label: `${start}-${end}`, label: `${start}-${end}`,
@ -214,76 +210,89 @@ export default {
this.getDate(); this.getDate();
}, },
setOption(data) { setOption(data) {
// 点位类型 dataType 1-瞬时值 2-累计值 仅当值为2展示差值
// 图表类型 chartType 1-曲线图，2-箱线图
if (!this.chart) return; if (!this.chart) return;
this.chart.clear(); this.chart.clear();
console.log("返回的数据", data); console.log("返回的数据", data);
let dataset = []; if (!data || data.length <= 0) {
if (data.length > 0) {
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
: ""
}${inner.deviceId}`,
type: "line",
markPoint: {
symbolSize: 30,
emphasis: {
disabled:false//打开 鼠标高亮
},
data: [//最大值、最小值
{
// type: 'max',
name: `最大值`,
coord:[inner.maxDate,inner.maxValue],
relativeTo:'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
},
},
{
// type: 'min',
name: `最小值`,
coord:[inner.minDate,inner.minValue],
relativeTo:'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
}
}
]
},
xdata: [],
data: [],
});
const length = dataset.length;
inner.pointValueList.forEach((value) => {
dataset[length - 1].xdata.push(value.valueDate);
dataset[length - 1].data.push(value.pointValue);
});
});
});
} else {
this.$message.warning("暂无数据"); this.$message.warning("暂无数据");
} }
console.log("图表数据", dataset); console.log('展示的图表类型chartType', data[0].chartType)
if (data[0].chartType === 2) {
// 箱型图
this.setBoxOption(data)
} else {
//折线图
this.setLineOption(data)
}
},
setLineOption(data) {
let dataset = [];
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
: ""
}${inner.deviceId}`,
type: "line",
markPoint: {
symbolSize: 30,
emphasis: {
disabled: false//打开 鼠标高亮
},
data: [//最大值、最小值
{
// type: 'max',
name: `最大值`,
coord: [inner.maxDate, inner.maxValue],
relativeTo: 'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最大值:${inner.maxValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
},
},
{
// type: 'min',
name: `最小值`,
coord: [inner.minDate, inner.minValue],
relativeTo: 'coordinate',
label: {
position: "top",
formatter: item.dataType === 2 ? ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
`差值:${inner.diffValue}`,
]).join('\n') : ([
`最小值:${inner.minValue}`,
// `平均值:${inner.avgValue}`,
]).join('\n'),
}
}
]
},
xdata: [],
data: [],
});
const length = dataset.length;
inner.pointValueList.forEach((value) => {
dataset[length - 1].xdata.push(value.valueDate);
dataset[length - 1].data.push(value.pointValue);
});
});
});
console.log("折线图图表数据", dataset);
this.chart.setOption({ this.chart.setOption({
legend: { legend: {
// left: 'center', // left: 'center',
@ -305,7 +314,121 @@ export default {
textStyle: { textStyle: {
color: "#333333", color: "#333333",
}, },
xAxis: { type: "category", data: dataset?.[0]?.xdata || [] }, xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
yAxis: {
type: "value",
},
dataZoom: [
{
type: "inside",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: dataset,
});
},
setBoxOption(data) {
let dataset = [];
data.forEach((item, index) => {
item.deviceList.forEach((inner) => {
dataset.push({
name: `${
this.isDtdc
? `${inner.parentDeviceId ? inner.parentDeviceId + "-" : ""}`
: ""
}${inner.deviceId}`,
type: "boxplot",
// markPoint: {
// symbolSize: 30,
// emphasis: {
// disabled: false//打开 鼠标高亮
// },
// data: [//最大值、最小值
// {
// // type: 'max',
// name: `最大值`,
// coord: [inner.maxDate, inner.maxValue],
// relativeTo: 'coordinate',
// label: {
// position: "top",
// formatter: item.dataType === 2 ? ([
// `最大值:${inner.maxValue}`,
// // `平均值:${inner.avgValue}`,
// `差值:${inner.diffValue}`,
// ]).join('\n') : ([
// `最大值:${inner.maxValue}`,
// // `平均值:${inner.avgValue}`,
// ]).join('\n'),
// },
// },
// {
// // type: 'min',
// name: `最小值`,
// coord: [inner.minDate, inner.minValue],
// relativeTo: 'coordinate',
// label: {
// position: "top",
// formatter: item.dataType === 2 ? ([
// `最小值:${inner.minValue}`,
// // `平均值:${inner.avgValue}`,
// `差值:${inner.diffValue}`,
// ]).join('\n') : ([
// `最小值:${inner.minValue}`,
// // `平均值:${inner.avgValue}`,
// ]).join('\n'),
// }
// }
// ]
// },
xdata: [],
data: [],
});
const length = dataset.length;
inner.pointValueList.forEach((value) => {
const {valueDate, min, q1, median, q3, max} = value
dataset[length - 1].xdata.push(valueDate);
dataset[length - 1].data.push([min, q1, median, q3, max]);
});
});
});
console.log("箱型图图表数据", dataset);
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true,
},
tooltip: {
trigger: 'item',
formatter: function (params) {
console.log(11111111111, params.data)
let data = params.data;
let result = params.name + ' ' + params.seriesName + '<br/>';
result += '最小值: ' + data[1] + '<br/>';
result += '平均值: ' + data[3] + '<br/>';
result += '最大值: ' + data[5];
return result;
}
// trigger: "axis",
// axisPointer: {
// type: 'cross',
// },
// axisPointer: {
// // 坐标轴指示器，坐标轴触发有效
// type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
// },
},
textStyle: {
color: "#333333",
},
xAxis: {type: "category", data: dataset?.[0]?.xdata || []},
yAxis: { yAxis: {
type: "value", type: "value",
}, },
@ -345,9 +468,9 @@ export default {
}).then((response) => { }).then((response) => {
const data = response?.data || []; const data = response?.data || [];
cb( cb(
data.map((item) => { data.map((item) => {
return { name: item, value: item }; return {name: item, value: item};
}) })
); );
}); });
}, },
@ -359,10 +482,11 @@ export default {
}, },
getZdList() { getZdList() {
return getAllSites() return getAllSites()
.then((response) => { .then((response) => {
this.siteList = response.data || []; this.siteList = response.data || [];
}) })
.finally(() => {}); .finally(() => {
});
}, },
getDate() { getDate() {
this.$refs.form.validate((valid) => { this.$refs.form.validate((valid) => {
@ -371,8 +495,8 @@ export default {
return this.$message.error("请输入正确的点位"); return this.$message.error("请输入正确的点位");
} }
if ( if (
this.isDtdc && this.isDtdc &&
(this.form.child.length === 0 || this.form.child.length > 5) (this.form.child.length === 0 || this.form.child.length > 5)
) { ) {
return this.$message.error("请选择单体电池且不能超过5个"); return this.$message.error("请选择单体电池且不能超过5个");
} }
@ -417,12 +541,12 @@ export default {
endDate, endDate,
siteDeviceMap, siteDeviceMap,
}) })
.then((response) => { .then((response) => {
this.setOption(response?.data || []); this.setOption(response?.data || []);
}) })
.finally(() => { .finally(() => {
this.loading = false; this.loading = false;
}); });
} }
}); });
}, },
@ -440,7 +564,7 @@ export default {
this.initChart(); this.initChart();
this.$refs.dateTimeSelect.init(); this.$refs.dateTimeSelect.init();
Promise.all([this.getDeviceCategory(), this.getZdList()]).finally( Promise.all([this.getDeviceCategory(), this.getZdList()]).finally(
() => (this.loading = false) () => (this.loading = false)
); );
}); });
}, },