|
|
@ -81,7 +81,7 @@ |
|
|
|
clearable |
|
|
|
collapse-tags |
|
|
|
collapse-tags-tooltip |
|
|
|
placeholder="请选择分类" |
|
|
|
placeholder="请选择参数分类" |
|
|
|
style="width: 150px" |
|
|
|
@change="classChange" |
|
|
|
> |
|
|
@ -96,7 +96,7 @@ |
|
|
|
clearable |
|
|
|
collapse-tags |
|
|
|
collapse-tags-tooltip |
|
|
|
placeholder="请选择参数" |
|
|
|
placeholder="请选择曲线参数" |
|
|
|
@change="parameterChange" |
|
|
|
> |
|
|
|
<el-option |
|
|
@ -136,7 +136,7 @@ |
|
|
|
<el-card class="echart" shadow="always"> |
|
|
|
<div class="sidebar"> |
|
|
|
<h3>换热站</h3> |
|
|
|
<el-menu default-active="" class="deviceMenu" @select="handleSelect" @open="handleOpen"> |
|
|
|
<el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen"> |
|
|
|
<el-menu-item :index="item.centerDeviceCode" v-for="item in deviceData" :key="item.centerDeviceCode"> |
|
|
|
<i class="iconfont icon-station" /> |
|
|
|
<el-tooltip class="box-item" effect="dark" :content="item.deviceName" placement="right-start"> |
|
|
@ -146,7 +146,7 @@ |
|
|
|
</el-menu> |
|
|
|
</div> |
|
|
|
<div class="comparisonInfo"> |
|
|
|
<div ref="stackedRef" class="stackedLine">暂无数据</div> |
|
|
|
<div ref="stackedRef" id="stackedLine" class="stackedLine">暂无数据</div> |
|
|
|
</div> |
|
|
|
<div class="sidebar"> |
|
|
|
<div class="paramList"> |
|
|
@ -165,24 +165,29 @@ import * as echarts from 'echarts'; |
|
|
|
import { Ref } from 'vue'; |
|
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
|
import { useDateFormat, useNow } from '@vueuse/core'; |
|
|
|
import { randomColor } from '@/utils/index'; |
|
|
|
import { randomColor, endTime, debounce } from '@/utils/index'; |
|
|
|
const stackedRef: Ref<HTMLElement | any> = ref(null); |
|
|
|
import type { FormInstance, FormRules } from 'element-plus'; |
|
|
|
import { ReturnDownBack } from '@vicons/ionicons5'; |
|
|
|
|
|
|
|
import { getAllDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index'; |
|
|
|
import { getAllDevices, getDevices, getClass, getParams, getPortions, getDeviceInfos } from '@/api/device/index'; |
|
|
|
import { partitionVo, classVo, parameterVo, seriesVo, mainInfoVo } from '@/api/device/types'; |
|
|
|
|
|
|
|
const router = useRouter(); |
|
|
|
const route = useRoute(); |
|
|
|
const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD'); |
|
|
|
const currentEndTime = ref(); |
|
|
|
// const nowTime = ref(); |
|
|
|
const timer = ref(); |
|
|
|
const isCurrentRoute = ref(true); |
|
|
|
// const currentSecond = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss'); |
|
|
|
|
|
|
|
const searchRef = ref<FormInstance>(); |
|
|
|
// const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 12, 0, 0)]; |
|
|
|
// const multipleLimit = ref(0); |
|
|
|
// const parameterLimit = ref(0); |
|
|
|
// const deptId = ref(0); |
|
|
|
const deptId = ref(0); |
|
|
|
const keyupType = ref(); |
|
|
|
// const seriesData = ref<seriesVo[]>(); |
|
|
|
const daysData: any = reactive([ |
|
|
|
{ |
|
|
@ -203,6 +208,7 @@ const daysData: any = reactive([ |
|
|
|
} |
|
|
|
]); |
|
|
|
const searchForm: any = reactive({ |
|
|
|
startTime: '', |
|
|
|
date: '', |
|
|
|
time: '', |
|
|
|
step: 1, |
|
|
@ -219,7 +225,8 @@ const filterForm = reactive({ |
|
|
|
deviceUuid: '', |
|
|
|
paramCode: '', |
|
|
|
partion: '', |
|
|
|
showZero: false |
|
|
|
showZero: false, |
|
|
|
queryType: 1 //1:正常查询,2:实时查询 |
|
|
|
}); |
|
|
|
const rules = reactive<FormRules>({ |
|
|
|
// device: [ |
|
|
@ -232,7 +239,7 @@ const rules = reactive<FormRules>({ |
|
|
|
// parameter: [ |
|
|
|
// { |
|
|
|
// required: true, |
|
|
|
// message: '请选择参数', |
|
|
|
// message: '请选择曲线参数', |
|
|
|
// trigger: 'change' |
|
|
|
// } |
|
|
|
// ] |
|
|
@ -315,10 +322,301 @@ const options = { |
|
|
|
series: [{}] |
|
|
|
}; |
|
|
|
|
|
|
|
const options2 = { |
|
|
|
color: colors, |
|
|
|
title: { |
|
|
|
text: '单设备多参数' |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'axis' |
|
|
|
// position: function (pt: any) { |
|
|
|
// return [pt[0], '10%']; |
|
|
|
// } |
|
|
|
}, |
|
|
|
legend: { |
|
|
|
data: ['瞬时流量', '瞬时热量', '累计热量'] |
|
|
|
}, |
|
|
|
grid: { |
|
|
|
top: '80', |
|
|
|
left: '100', |
|
|
|
right: '150', |
|
|
|
bottom: '50', |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
toolbox: { |
|
|
|
feature: { |
|
|
|
restore: {} |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'time', |
|
|
|
boundaryGap: false |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '瞬时流量(m³/h)', |
|
|
|
position: 'left', |
|
|
|
alignTicks: true, |
|
|
|
offset: 0, |
|
|
|
scale: true, //自适应 |
|
|
|
minInterval: 1, //最小间距 |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 12, |
|
|
|
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
// 轴刻度 |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: colors[0] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'value', |
|
|
|
name: '瞬时热量(JG/h)', |
|
|
|
position: 'right', |
|
|
|
alignTicks: true, |
|
|
|
offset: 0, |
|
|
|
scale: true, //自适应 |
|
|
|
minInterval: 1, //最小间距 |
|
|
|
nameTextStyle: { |
|
|
|
fontSize: 12, |
|
|
|
padding: [0, 0, 0, 0] //name文字位置 对应 上右下左 |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
// 轴刻度 |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLine: { |
|
|
|
show: true, |
|
|
|
lineStyle: { |
|
|
|
color: colors[1] |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
dataZoom: [ |
|
|
|
{ |
|
|
|
type: 'inside', |
|
|
|
startValue: '0' |
|
|
|
// start: 0, |
|
|
|
// end: 20 |
|
|
|
}, |
|
|
|
{ |
|
|
|
startValue: '0' |
|
|
|
// start: 0, |
|
|
|
// end: 20 |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: '瞬时流量', |
|
|
|
type: 'line', |
|
|
|
smooth: true, |
|
|
|
symbol: 'none', |
|
|
|
yAxisIndex: 0, |
|
|
|
data: [ |
|
|
|
['2023-10-01 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 15:00:00', Math.round(Math.random() * 500)] |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '瞬时热量', |
|
|
|
type: 'line', |
|
|
|
smooth: true, |
|
|
|
symbol: 'none', |
|
|
|
yAxisIndex: 1, |
|
|
|
data: [ |
|
|
|
['2023-10-01 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-01 15:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-02 15:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-03 15:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-04 15:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-05 15:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-06 15:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 08:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 09:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 10:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 11:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 12:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 13:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 14:00:00', Math.round(Math.random() * 100)], |
|
|
|
['2023-10-07 15:00:00', Math.round(Math.random() * 100)] |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '累计热量', |
|
|
|
type: 'line', |
|
|
|
smooth: true, |
|
|
|
symbol: 'none', |
|
|
|
yAxisIndex: 1, |
|
|
|
data: [ |
|
|
|
['2023-10-01 08:00:00', Math.round(Math.random() * 600)], |
|
|
|
['2023-10-01 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-01 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-02 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-03 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-04 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-05 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-06 15:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 08:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 09:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 10:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 11:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 12:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 13:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 14:00:00', Math.round(Math.random() * 500)], |
|
|
|
['2023-10-07 15:00:00', Math.round(Math.random() * 500)] |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
// deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId')); |
|
|
|
deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId')); |
|
|
|
searchForm.date = currentTime.value; |
|
|
|
searchForm.time = '00:00:00'; |
|
|
|
searchForm.startTime = currentTime.value + ' 00:00:00'; |
|
|
|
filterForm.startTime = currentTime.value + ' 00:00:00'; |
|
|
|
// searchForm.time = [currentTime.value + ' 00:00:00', currentSecond.value]; |
|
|
|
// filterForm.startTime = currentTime.value + ' 00:00:00'; |
|
|
@ -326,29 +624,24 @@ onMounted(() => { |
|
|
|
getDevice(); |
|
|
|
getParam(); |
|
|
|
getPortion(); |
|
|
|
// const chart = echarts.init(document.getElementById("stackedLine")); |
|
|
|
// chart.setOption(options2); |
|
|
|
}); |
|
|
|
|
|
|
|
onUnmounted(() => { |
|
|
|
//组件注销前清除setTimeout |
|
|
|
if (timer.value !== null || timer.value !== undefined) { |
|
|
|
clearTimeout(timer.value); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
const handleSelect = (key: string, keyPath: string[], item: object) => { |
|
|
|
const deviceSelect = (key: string, keyPath: string[], item: object) => { |
|
|
|
//点击换热站列表 |
|
|
|
console.log(key, keyPath, item); |
|
|
|
filterForm.deviceUuid = key; |
|
|
|
if (filterForm.startTime === '') { |
|
|
|
ElMessage({ |
|
|
|
message: '请选择时间', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (filterForm.paramCode === '') { |
|
|
|
ElMessage({ |
|
|
|
message: '请选择参数', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
getDeviceInfo(); |
|
|
|
verifyInfo(); |
|
|
|
}; |
|
|
|
const handleOpen = (key: string, keyPath: string[]) => { |
|
|
|
const deviceOpen = (key: string, keyPath: string[]) => { |
|
|
|
console.log(key, keyPath); |
|
|
|
filterForm.deviceUuid = key; |
|
|
|
}; |
|
|
@ -361,12 +654,17 @@ function lineClick() { |
|
|
|
document.addEventListener('keyup', e => { |
|
|
|
//监听键盘事件 |
|
|
|
console.log('按键:', e.key); |
|
|
|
if (e.key === 'ArrowUp') { |
|
|
|
keyClick('0'); |
|
|
|
} else if (e.key === 'ArrowDown') { |
|
|
|
keyClick('1'); |
|
|
|
} |
|
|
|
keyupType.value = e.key; |
|
|
|
keyClickDebounce(); |
|
|
|
// if (e.key === 'ArrowUp') { |
|
|
|
// // keyClick('0'); |
|
|
|
// } else if (e.key === 'ArrowDown') { |
|
|
|
// keyClick('1'); |
|
|
|
// } |
|
|
|
}); |
|
|
|
const keyClickDebounce = debounce(() => { |
|
|
|
keyClick(keyupType.value); |
|
|
|
}, 500); |
|
|
|
function keyClick(res: string) { |
|
|
|
//键盘事件 |
|
|
|
if (filterForm.startTime === '') { |
|
|
@ -374,40 +672,38 @@ function keyClick(res: string) { |
|
|
|
message: '请选择时间', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
if (filterForm.paramCode === '') { |
|
|
|
} else if (filterForm.paramCode === '') { |
|
|
|
ElMessage({ |
|
|
|
message: '请选择参数', |
|
|
|
message: '请选择曲线参数', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
return; |
|
|
|
} |
|
|
|
const device = searchForm.device; |
|
|
|
} else { |
|
|
|
const device = filterForm.deviceUuid; |
|
|
|
const deviceDataValue = deviceData.value; |
|
|
|
console.log('已选设备:', searchForm.device); |
|
|
|
// console.log('已选设备:', filterForm.deviceUuid); |
|
|
|
if (deviceDataValue?.length != 0) { |
|
|
|
deviceDataValue?.map((item: deviceVo, index: number) => { |
|
|
|
console.log('遍历设备:', item, index); |
|
|
|
if (res === '0') { |
|
|
|
// console.log('遍历设备:', item, index); |
|
|
|
if (res === 'ArrowUp') { |
|
|
|
//上一个 |
|
|
|
if (device === item.centerDeviceCode && index != 0) { |
|
|
|
searchForm.device = deviceDataValue[index - 1].centerDeviceCode; |
|
|
|
filterForm.deviceUuid = searchForm.device; |
|
|
|
console.log('当前设备:', searchForm.device); |
|
|
|
filterForm.deviceUuid = deviceDataValue[index - 1].centerDeviceCode; |
|
|
|
// filterForm.deviceUuid = filterForm.deviceUuid; |
|
|
|
// console.log('当前设备:', filterForm.deviceUuid); |
|
|
|
} |
|
|
|
} else if (res === '1') { |
|
|
|
} else if (res === 'ArrowDown') { |
|
|
|
//下一个 |
|
|
|
if (device === item.centerDeviceCode && index + 1 != deviceDataValue?.length) { |
|
|
|
console.log('当前设备:', item.deviceName, index); |
|
|
|
searchForm.device = deviceDataValue[index + 1].centerDeviceCode; |
|
|
|
filterForm.deviceUuid = searchForm.device; |
|
|
|
console.log('当前设备:', searchForm.device); |
|
|
|
// console.log('当前设备:', item.deviceName, index); |
|
|
|
filterForm.deviceUuid = deviceDataValue[index + 1].centerDeviceCode; |
|
|
|
// filterForm.deviceUuid = filterForm.deviceUuid; |
|
|
|
// console.log('当前设备:', filterForm.deviceUuid); |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
getDeviceInfo(); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
function showZeroChange() { |
|
|
@ -418,8 +714,8 @@ function showZeroChange() { |
|
|
|
|
|
|
|
function getDevice() { |
|
|
|
//获取设备 |
|
|
|
// const params = deptId.value; |
|
|
|
getAllDevices().then((res: any) => { |
|
|
|
const params = deptId.value; |
|
|
|
getDevices(params).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
deviceData.value = res.data; |
|
|
|
} |
|
|
@ -446,14 +742,67 @@ function getPortion() { |
|
|
|
function getDeviceInfo() { |
|
|
|
//获取折线图数据 |
|
|
|
const params = filterForm; |
|
|
|
params.startTime = searchForm.startTime; |
|
|
|
params.step = searchForm.step; |
|
|
|
params.stepType = searchForm.stepType; |
|
|
|
params.queryType = 1; |
|
|
|
getDeviceInfos(params).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
mainInfoList.value = res.data.mainInfos; |
|
|
|
if (res.data.additionalInfo != null) { |
|
|
|
currentEndTime.value = res.data.additionalInfo.endTime; |
|
|
|
debounceClick(); |
|
|
|
} |
|
|
|
init(res.data); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
const debounceClick = debounce(() => { |
|
|
|
getDeviceInfoss(); |
|
|
|
}, 360000); |
|
|
|
|
|
|
|
function getDeviceInfoss() { |
|
|
|
//轮询获取折线图数据 |
|
|
|
console.log(useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value); |
|
|
|
const params = filterForm; |
|
|
|
params.startTime = currentEndTime.value; |
|
|
|
params.step = 6; |
|
|
|
params.stepType = '3'; |
|
|
|
params.queryType = 2; |
|
|
|
console.log(params); |
|
|
|
getDeviceInfos(params).then((res: any) => { |
|
|
|
if (res.code === 200) { |
|
|
|
if (isCurrentRoute.value) { |
|
|
|
timer.value = setTimeout(async () => { |
|
|
|
await (timer.value && clearTimeout(timer.value)); |
|
|
|
await getDeviceInfoss(); |
|
|
|
}, 360000); |
|
|
|
} |
|
|
|
if (res.data.additionalInfo != null) { |
|
|
|
currentEndTime.value = res.data.additionalInfo.endTime; |
|
|
|
console.log(currentEndTime.value, res.data.mainInfos); |
|
|
|
} |
|
|
|
options.series.forEach((originalObj: any) => { |
|
|
|
res.data.mainInfos.forEach((newObj: any) => { |
|
|
|
if (originalObj.name === newObj.name) { |
|
|
|
newObj.data.map((item: any) => { |
|
|
|
originalObj.data.push(item); |
|
|
|
}); |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
console.log(options.series); |
|
|
|
const chart = echarts.init(document.getElementById('stackedLine')); |
|
|
|
chart.setOption(options); |
|
|
|
// mainInfoList.value = res.data.mainInfos; |
|
|
|
// init(res.data); |
|
|
|
} else { |
|
|
|
clearTimeout(timer.value); |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
function init(data: any) { |
|
|
|
//折线图实例化 |
|
|
|
options.yAxis = []; |
|
|
@ -463,7 +812,7 @@ function init(data: any) { |
|
|
|
options.title.text = '暂无数据'; |
|
|
|
options.title.x = 'center'; |
|
|
|
options.title.y = 'center'; |
|
|
|
const chart = echarts.init(stackedRef.value); |
|
|
|
const chart = echarts.init(document.getElementById('stackedLine')); |
|
|
|
chart.clear(); |
|
|
|
chart.resize(); |
|
|
|
console.log('options--', options); |
|
|
@ -514,7 +863,7 @@ function init(data: any) { |
|
|
|
data: item.data |
|
|
|
}); |
|
|
|
}); |
|
|
|
const chart = echarts.init(stackedRef.value); |
|
|
|
const chart = echarts.init(document.getElementById('stackedLine')); |
|
|
|
chart.clear(); |
|
|
|
chart.resize(); |
|
|
|
console.log('options--', options); |
|
|
@ -534,15 +883,29 @@ function init(data: any) { |
|
|
|
// } |
|
|
|
function dateChange(res: any) { |
|
|
|
//日期选择 |
|
|
|
console.log('date--', res, searchForm.date); |
|
|
|
// console.log('date--', res, searchForm.date); |
|
|
|
if (res === null) { |
|
|
|
searchForm.startTime = ''; |
|
|
|
filterForm.startTime = ''; |
|
|
|
} else { |
|
|
|
searchForm.startTime = res + ' ' + searchForm.time; |
|
|
|
filterForm.startTime = res + ' ' + searchForm.time; |
|
|
|
console.log('date--', filterForm.startTime); |
|
|
|
verifyInfo(); |
|
|
|
// console.log('date--', filterForm.startTime); |
|
|
|
} |
|
|
|
} |
|
|
|
function timeChange(res: any) { |
|
|
|
//时间选择 |
|
|
|
console.log('time--', res, searchForm.time); |
|
|
|
if (searchForm.date === null) { |
|
|
|
searchForm.startTime = ''; |
|
|
|
filterForm.startTime = ''; |
|
|
|
} else { |
|
|
|
// console.log('time--', res, searchForm.time); |
|
|
|
searchForm.startTime = searchForm.date + ' ' + res; |
|
|
|
filterForm.startTime = searchForm.date + ' ' + res; |
|
|
|
console.log('time--', filterForm.startTime); |
|
|
|
verifyInfo(); |
|
|
|
// console.log('time--', filterForm.startTime); |
|
|
|
} |
|
|
|
} |
|
|
|
function stepChange(num: any) { |
|
|
|
//时间长度 |
|
|
@ -551,10 +914,12 @@ function stepChange(num: any) { |
|
|
|
function stepTypeChange(value: string) { |
|
|
|
//时间长度 |
|
|
|
filterForm.stepType = value; |
|
|
|
verifyInfo(); |
|
|
|
} |
|
|
|
function classChange(value: string) { |
|
|
|
//分类选择确认 |
|
|
|
searchForm.parameter = []; |
|
|
|
filterForm.paramCode = ''; |
|
|
|
parameterData.value = []; |
|
|
|
classData.value?.map((res: any) => { |
|
|
|
if (value === res.setId) { |
|
|
@ -568,16 +933,40 @@ function classChange(value: string) { |
|
|
|
console.log('paramCode--', filterForm.paramCode); |
|
|
|
} |
|
|
|
}); |
|
|
|
verifyInfo(); |
|
|
|
} |
|
|
|
function parameterChange(value: any) { |
|
|
|
//参数选择确认 |
|
|
|
// parameterLimit.value = value.length <= 1 ? 0 : 1; |
|
|
|
filterForm.paramCode = ''; |
|
|
|
filterForm.paramCode = value.toString(); |
|
|
|
console.log('paramCode--', filterForm.paramCode); |
|
|
|
// console.log('paramCode--', filterForm.paramCode); |
|
|
|
verifyInfo(); |
|
|
|
} |
|
|
|
function partitionChange(res: string) { |
|
|
|
//分区确认 |
|
|
|
filterForm.partion = res; |
|
|
|
verifyInfo(); |
|
|
|
} |
|
|
|
function verifyInfo() { |
|
|
|
if (filterForm.deviceUuid === '') { |
|
|
|
ElMessage({ |
|
|
|
message: '请选择换热站', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
} else if (filterForm.startTime === '') { |
|
|
|
ElMessage({ |
|
|
|
message: '请选择起始时间', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
} else if (filterForm.paramCode === '') { |
|
|
|
ElMessage({ |
|
|
|
message: '请选择曲线参数', |
|
|
|
type: 'warning' |
|
|
|
}); |
|
|
|
} else { |
|
|
|
getDeviceInfo(); |
|
|
|
} |
|
|
|
} |
|
|
|
// const submitForm = (formEl: FormInstance | undefined) => { |
|
|
|
// //筛选确认 |
|
|
|