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

设备监控使用统一的时间选择组件、文案更新

Browse Source
This commit is contained in:
白菜
2025-09-22 17:57:30 +08:00
parent cbc7a341c9
commit 0e7b54291f
8 changed files with 106 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -135,7 +135,7 @@ export default {
</script>
<style scoped lang="scss">
.common-card-container {
.sbjk-card-container {
::v-deep {
.el-table__row td{
&:not(:first-child){

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

@ -7,31 +7,18 @@
lock-scroll
append-to-body
width="700px"
class="ems-dialog"
class="ems-dialog chart-detail-dialog"
:before-close="handleColsed"
>
<div>
<el-form size="medium" label-width="100px" inline>
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
end-placeholder="结束时间"
:clearable="false"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData">搜索</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
<div id="lineChart" style="height: 360px; width: 100%"></div>
<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>
</el-card>
</el-dialog>
</template>
@ -39,8 +26,9 @@
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import { getSingleBatteryData } from "@/api/ems/dzjk";
import { formatDate } from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
components: {DateRangeSelect},
mixins: [resize],
data() {
return {
@ -56,18 +44,13 @@ export default {
},
dialogTableVisible: false,
dateRange: [],
defaultDateRange: [],
};
},
methods: {
resetDefaultDateRange() {
const now = new Date(),
formatNow = formatDate(now);
const weekAgo = formatDate(
new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
);
this.dateRange = [weekAgo, formatNow];
this.defaultDateRange = [weekAgo, formatNow];
// 更新时间范围 重置图表
updateDate(data){
this.dateRange=data || []
this.getData()
},
handleColsed(done) {
if (!this.chart) {
@ -102,22 +85,16 @@ export default {
this.chart.hideLoading();
});
},
// 重置
onReset() {
this.dateRange = this.defaultDateRange;
this.getData();
},
initChart({ siteId, clusterDeviceId, deviceId }, dataType) {
this.siteId = siteId;
this.clusterDeviceId = clusterDeviceId;
this.deviceId = deviceId;
this.dataType = dataType;
this.resetDefaultDateRange();
this.dialogTableVisible = true;
this.$nextTick(() => {
!this.chart &&
(this.chart = echarts.init(document.querySelector("#lineChart")));
this.getData();
this.$refs.dateRangeSelect.init()
});
},
setOption(data) {
@ -208,3 +185,12 @@ export default {
mounted() {},
};
</script>
<style lang="scss" scoped>
.chart-detail-dialog{
::v-deep{
.el-dialog__body{
padding-top:0;
}
}
}
</style>

5
src/views/ems/dzjk/sbjk/ssyx/CnglqxChart.vue
View File

@ -83,17 +83,16 @@ export default {
end: 100
}
],
// POC昨日有功功率、POC昨日无功功率
series: [
{
name:'POC实时有功功率',
name:'PCS实时有功功率',
type: 'line',
areaStyle: {
color:'#FFBD00'
},
data: data1,
},{
name:'POC实时无功功率',
name:'PCS实时无功功率',
type: 'line',
areaStyle: {
color: '#3C81FF'

4
src/views/ems/dzjk/sbjk/ssyx/PocpjwdChart.vue
View File

@ -2,7 +2,7 @@
<template>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding">
<div slot="header">
<span class="card-title">Poc平均温度</span>
<span class="card-title">PCS平均温度</span>
</div>
<div style="height: 360px" id="pocpjwdChart"/>
</el-card>
@ -80,7 +80,7 @@ export default {
],
series: [
{
name:'Poc平均温度',
name:'PCS平均温度',
data: data,
type: 'line',
areaStyle: {

82
src/views/ems/dzjk/tjbb/dcdqx/index.vue
View File

@ -1,56 +1,29 @@
<template>
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<!-- <el-form-item label="电池堆">-->
<!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div style="margin:30px 0;">
<!-- 二个选择按钮-->
<el-row style="">
<el-col :xs="24" :sm="24" :lg="24">
<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">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
<el-button v-for="(item,index) in btnList" :key="index+'dcdqxBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</el-col>
</el-row>
<!--echart-->
<div id="dcdEchart" style="height:360px;"></div>
</span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<div id="dcdEchart" style="height: 310px;"></div>
</div>
</el-card>
</template>
<script>
import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getStackData, getStackNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name:'DzjkTjbbDcdqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
return {
@ -59,11 +32,8 @@ export default {
return time.getTime() > Date.now();
},
},
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
// pcs:'',
// pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'堆平均维度',id:'1',attr:['temp'],source:['有功功率']},
@ -80,23 +50,11 @@ export default {
this.getData()
}
},
// 搜索
onSearch(){
// 更新时间范围 重置图表
updateDate(data){
this.dateRange=data || []
this.getData()
},
// 重置
onReset(){
// this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
this.dateRange=''
this.getData()
},
// getPcsList(){
// return getStackNameList(this.siteId).then(response => {
// const data = JSON.parse(JSON.stringify(response?.data || []))
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){
const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || [])
@ -189,18 +147,12 @@ export default {
this.chart = echarts.init(document.querySelector('#dcdEchart'));
},
init(){
this.loading = true
// this.pcs=''
// this.pcsOptions=[]
this.$nextTick(()=>{
this.initChart()
this.onReset()
this.$refs.dateRangeSelect.init()
})
}
},
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() {
if (!this.chart) {
return

54
src/views/ems/dzjk/tjbb/glqx/index.vue
View File

@ -1,31 +1,14 @@
<template>
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div style="margin:30px 0;">
<div id="glqxEchart" style="height:360px;"></div>
<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="glqxEchart" style="height: 310px;"></div>
</div>
</el-card>
</template>
@ -35,8 +18,10 @@ import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getPcsNameList, getPowerData} from "@/api/ems/dzjk";
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name:'DzjkTjbbGlqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
return {
@ -45,19 +30,14 @@ export default {
return time.getTime() > Date.now();
},
},
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
}
},
methods: {
// 搜索
onSearch(){
this.getData()
},
// 重置
onReset(){
this.dateRange=[]
// 更新时间范围 重置图表
updateDate(data){
this.dateRange=data || []
this.getData()
},
getData(){
@ -118,16 +98,12 @@ export default {
this.chart = echarts.init(document.querySelector('#glqxEchart'));
},
init(){
this.loading = true
this.$nextTick(()=>{
this.initChart()
this.getData()
this.$refs.dateRangeSelect.init()
})
}
},
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() {
if (!this.chart) {
return

53
src/views/ems/dzjk/tjbb/gltj/Dlzb.vue
View File

@ -1,31 +1,10 @@
<template>
<el-card shadow="always" class="common-card-container" style="margin-top:20px">
<div slot="header">
<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 class="select-container">
<el-form :inline="true">
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getData" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="total-data">
<div>总充电量:<span class="point">{{totalChargedCap | formatNumber}}kWh</span></div>
<div>总放电量:<span class="point">{{totalDisChargedCap | formatNumber}}kWh</span></div>
@ -42,7 +21,9 @@ import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getElectricData} from '@/api/ems/dzjk'
import {formatDate} from '@/filters/ems'
import DateRangeSelect from '@/components/Ems/DateRangeSelect/index.vue'
export default {
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
return {
@ -51,7 +32,6 @@ export default {
return time.getTime() > Date.now();
},
},
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
chart: null,
@ -61,9 +41,9 @@ export default {
}
},
methods: {
// 重置
onReset(){
this.dateRange=[]
// 更新时间范围 重置图表
updateDate(data){
this.dateRange=data || []
this.getData()
},
setOption(data,unit){
@ -80,7 +60,12 @@ export default {
top:40,
containLabel: true
},
tooltip: {},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
xAxis: [{
type: 'category',
name:`单位：${unit}`,
@ -145,15 +130,13 @@ export default {
})
},
init(){
this.$nextTick(()=>{
this.chart = echarts.init(document.querySelector('#dlzbChart'));
this.onReset()
this.$refs.dateRangeSelect.init()
})
}
},
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() {
if (!this.chart) {
return

93
src/views/ems/dzjk/tjbb/pcsqx/index.vue
View File

@ -1,56 +1,30 @@
<template>
<div v-loading="loading">
<div class="select-container">
<el-form :inline="true">
<!-- <el-form-item label="PCS">-->
<!-- <el-select v-model="pcs" placeholder="请选择" :loading="loading" loading-text="正在加载数据">-->
<!-- <el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in pcsOptions" :key="index+'pcsListOptions'"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="时间选择">
<el-date-picker
v-model="dateRange"
type="daterange"
range-separator="至"
start-placeholder="开始时间"
:picker-options="pickerOptions"
:default-value="defaultDateRange"
end-placeholder="结束时间">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
</el-form-item>
<el-form-item>
<el-button @click="onReset" native-type="button">重置</el-button>
</el-form-item>
</el-form>
</div>
<div style="margin:30px 0;">
<!-- 二个选择按钮-->
<el-row style="">
<el-col :xs="24" :sm="24" :lg="24">
<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">
<el-button-group class="ems-btns-group">
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
<el-button v-for="(item,index) in btnList" :key="index+'flqxcBtns'" size="mini" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
</el-button-group>
</el-col>
</el-row>
<!--echart-->
<div id="pcsEchart" style="height:360px;"></div>
</span>
<date-range-select ref="dateRangeSelect" @updateDate="updateDate"/>
</div>
<div class="card-main" v-loading="loading">
<div id="pcsEchart" style="height: 310px;"></div>
</div>
</el-card>
</template>
<script>
import * as echarts from 'echarts'
import resize from "@/mixins/ems/resize";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getPCSData, getPcsNameList} from '@/api/ems/dzjk'
import {formatDate} from "@/filters/ems";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
name:'DzjkTjbbPcsqx',
components: {DateRangeSelect},
mixins: [resize,getQuerySiteId],
data() {
return {
@ -59,17 +33,12 @@ export default {
return time.getTime() > Date.now();
},
},
defaultDateRange:[],//默认展示的时间
dateRange:[],
loading:false,
// pcs:'',
// pcsOptions: [],
activeBtn:'1',
btnList:[
{name:'有功功率',id:'1',attr:['activePower'],source:['有功功率']},
{name:'无功功率',id:'2',attr:['reactivePower'],source:['无功功率']},
// {name:'温度',id:'wd'},
// {name:'三相电压',id:'sxdy'},
{name:'三相电流',id:'3',attr:['uCurrent','vCurrent','wCurrent'],source:['u电流','v电流','w电流'],type:'bar'},
],
@ -83,23 +52,11 @@ export default {
this.getData()
}
},
// 搜索
onSearch(){
// 更新时间范围 重置图表
updateDate(data){
this.dateRange=data || []
this.getData()
},
// 重置
onReset(){
// this.pcs = this.pcsOptions.length > 0 ?this.pcsOptions[0].id : ''
this.dateRange=[]
this.getData()
},
// getPcsList(){
// return getPcsNameList(this.siteId).then(response => {
// const data = response?.data || [];
// this.pcsOptions = data
// this.pcs = data.length>0?data[0].id:'';
// })
// },
getData(){
const {siteId,activeBtn}=this;
const [start='',end='']=(this.dateRange || [])
@ -108,7 +65,6 @@ export default {
getPCSData({siteId,startTime:formatDate(start),endTime:formatDate(end),dataType:activeBtn}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{this.loading=false;})
},
compareDate(date1,date2){
console.log('比较时间',date1,date2)
@ -194,27 +150,12 @@ export default {
this.chart = echarts.init(document.querySelector('#pcsEchart'));
},
init(){
this.loading = true
// this.pcs=''
// this.pcsOptions=[]
this.$nextTick(()=>{
this.initChart()
this.onReset()
// this.getPcsList().then(()=>{
// if(this.pcs){
// this.onReset()
// }else{
// this.loading=false;
// }
//
// })
this.$refs.dateRangeSelect.init()
})
}
},
mounted(){
const now = new Date();
const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
this.defaultDateRange = [lastMonth, now];
},
beforeDestroy() {
if (!this.chart) {
return