|
|
|
|
@ -32,16 +32,16 @@
|
|
|
|
|
label-width="100px"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="记录时间">
|
|
|
|
|
<date-picker
|
|
|
|
|
<el-date-picker
|
|
|
|
|
v-model="daterangeRecordTime"
|
|
|
|
|
range
|
|
|
|
|
type="datetime"
|
|
|
|
|
type="datetimerange"
|
|
|
|
|
range-separator="-"
|
|
|
|
|
start-placeholder="开始时间"
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
|
value-type="YYYY-MM-DD HH:mm:ss"
|
|
|
|
|
:placeholder="['开始时间', '结束时间']"
|
|
|
|
|
:lang="lang"
|
|
|
|
|
style="width: 340px"
|
|
|
|
|
></date-picker>
|
|
|
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
|
|
|
style="width: 400px"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
@ -97,8 +97,6 @@ import Chart from '@/components/chart.vue'
|
|
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
import {pointSteamInstantList} from "@/api/ems/report/reportPointSteam";
|
|
|
|
|
import {listRecordSteamInstant, steamInstantList} from "@/api/ems/record/recordSteamInstant";
|
|
|
|
|
import DatePicker from 'vue-datepicker-next';
|
|
|
|
|
import 'vue-datepicker-next/index.css';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'currentSteamCurve',
|
|
|
|
|
@ -110,13 +108,10 @@ export default {
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
Chart,
|
|
|
|
|
Treeselect,
|
|
|
|
|
DatePicker
|
|
|
|
|
Treeselect
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
//下拉树List
|
|
|
|
|
baseMonitorInfoOptions: [],
|
|
|
|
|
//左侧树结构List
|
|
|
|
|
monitorInfoOptions: [],
|
|
|
|
|
workUnitName: undefined,
|
|
|
|
|
@ -194,12 +189,6 @@ export default {
|
|
|
|
|
{ key: 11, label: `记录时间`, visible: true },
|
|
|
|
|
{ key: 12, label: `计量设备名称`, visible: true }
|
|
|
|
|
],
|
|
|
|
|
lang: {
|
|
|
|
|
formatLocale: {
|
|
|
|
|
firstDayOfWeek: 1
|
|
|
|
|
},
|
|
|
|
|
monthBeforeYear: false
|
|
|
|
|
},
|
|
|
|
|
// 停电统计信息
|
|
|
|
|
powerOutageSummary: {
|
|
|
|
|
count: 0,
|
|
|
|
|
@ -222,14 +211,17 @@ export default {
|
|
|
|
|
const yesterday = parseTime(lastDate, '{y}-{m}-{d}')
|
|
|
|
|
|
|
|
|
|
console.log(today,yesterday)
|
|
|
|
|
this.daterangeRecordTime[0] = yesterday+ ' 08:00:00'
|
|
|
|
|
this.daterangeRecordTime[1] = today + ' 08:00:00'
|
|
|
|
|
// 正确的数组赋值方式
|
|
|
|
|
this.daterangeRecordTime = [yesterday + ' 08:00:00', today + ' 08:00:00']
|
|
|
|
|
|
|
|
|
|
// 初始化图表基础配置
|
|
|
|
|
this.initBaseChartOptions()
|
|
|
|
|
this.getTreeselect()
|
|
|
|
|
// 先加载树结构，再加载图表数据
|
|
|
|
|
this.getTreeMonitorInfo()
|
|
|
|
|
this.getList()
|
|
|
|
|
// 延迟加载图表数据，避免重复提交
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.getList()
|
|
|
|
|
}, 100)
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
// 根据名称筛选计量设备树
|
|
|
|
|
@ -243,7 +235,7 @@ export default {
|
|
|
|
|
this.baseChartOptions = {
|
|
|
|
|
grid: {
|
|
|
|
|
top: '40',
|
|
|
|
|
bottom: '10%',
|
|
|
|
|
bottom: '20%',
|
|
|
|
|
left: '10%',
|
|
|
|
|
right: '3%'
|
|
|
|
|
},
|
|
|
|
|
@ -415,13 +407,6 @@ export default {
|
|
|
|
|
URL.revokeObjectURL(link.href);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 查询计量设备信息下拉树结构 */
|
|
|
|
|
getTreeselect() {
|
|
|
|
|
getMonitorInfoTree({ monitorType: 4 }).then(response => {
|
|
|
|
|
this.monitorInfoOptions = response.data
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/** 筛选节点 */
|
|
|
|
|
filterNode(value, data) {
|
|
|
|
|
if (!value) return true
|
|
|
|
|
@ -668,6 +653,29 @@ export default {
|
|
|
|
|
color: '#000000'
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const formatYAxisLabel = (value) => {
|
|
|
|
|
const num = Number(value);
|
|
|
|
|
if (!Number.isFinite(num)) {
|
|
|
|
|
return value;
|
|
|
|
|
}
|
|
|
|
|
if (Math.abs(num) >= 10000) {
|
|
|
|
|
return (num / 1000).toFixed(1) + 'k';
|
|
|
|
|
}
|
|
|
|
|
if (Math.abs(num) >= 1) {
|
|
|
|
|
return num.toFixed(1);
|
|
|
|
|
}
|
|
|
|
|
return num.toFixed(3);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option.yAxis.axisLabel = {
|
|
|
|
|
...(option.yAxis.axisLabel || {}),
|
|
|
|
|
formatter: formatYAxisLabel,
|
|
|
|
|
margin: 14
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
option.yAxis.splitNumber = option.yAxis.splitNumber || 5;
|
|
|
|
|
option.yAxis.axisLabel.showMaxLabel = true;
|
|
|
|
|
|
|
|
|
|
// 针对特定字段，如果业务上它们不应为负，则强制Y轴从0开始
|
|
|
|
|
if (name === '瞬时流量' || name === '压力' || name === '温度') {
|
|
|
|
|
option.yAxis.min = 0;
|
|
|
|
|
@ -759,10 +767,7 @@ export default {
|
|
|
|
|
this.hasChartData = data && data.length > 0;
|
|
|
|
|
|
|
|
|
|
if (!this.hasChartData) {
|
|
|
|
|
// 如果没有数据，清空图表并返回
|
|
|
|
|
this.$refs.Chart1.setData({});
|
|
|
|
|
this.$refs.Chart2.setData({});
|
|
|
|
|
this.$refs.Chart3.setData({});
|
|
|
|
|
// 如果没有数据，直接返回，让模板显示空状态
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -798,10 +803,28 @@ export default {
|
|
|
|
|
'#fac858'
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// 等待 DOM 更新后再访问图表组件
|
|
|
|
|
await this.$nextTick()
|
|
|
|
|
|
|
|
|
|
// 确保图表组件已渲染
|
|
|
|
|
if (!this.$refs.Chart1 || !this.$refs.Chart2 || !this.$refs.Chart3) {
|
|
|
|
|
console.error('图表组件未渲染')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.$refs.Chart1.setData(option1)
|
|
|
|
|
this.$refs.Chart2.setData(option2)
|
|
|
|
|
this.$refs.Chart3.setData(option3)
|
|
|
|
|
|
|
|
|
|
// 再次等待，确保图表内部 chart 属性已初始化
|
|
|
|
|
await this.$nextTick()
|
|
|
|
|
|
|
|
|
|
// 检查图表实例是否已创建
|
|
|
|
|
if (!this.$refs.Chart1.chart || !this.$refs.Chart2.chart || !this.$refs.Chart3.chart) {
|
|
|
|
|
console.error('图表实例未初始化')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
echarts.connect(this.$refs.Chart1.chart, this.$refs.Chart2.chart, this.$refs.Chart3.chart)
|
|
|
|
|
|
|
|
|
|
// 同步缩放
|
|
|
|
|
@ -842,7 +865,7 @@ export default {
|
|
|
|
|
/** 查询树形结构 */
|
|
|
|
|
getTreeMonitorInfo() {
|
|
|
|
|
getMonitorInfoTree({ monitorType: 4 }).then(response => {
|
|
|
|
|
this.baseMonitorInfoOptions = this.handleTree(response.data, "id", "parentId")
|
|
|
|
|
this.monitorInfoOptions = this.handleTree(response.data, "id", "parentId")
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
