157 lines
5.2 KiB
Vue
157 lines
5.2 KiB
Vue
|
<template>
|
||
|
|
<el-dialog class="cn-operate-dialog control-popup" v-model="dialogVisible" :title="title">
|
||
|
|
<el-form :inline="true">
|
||
|
|
<el-form-item label="日期">
|
||
|
|
<DatePicker ref="datePickerRef" v-if="dialogVisible"></DatePicker>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item>
|
||
|
|
<el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" />
|
||
|
|
<el-empty description="暂无数据" v-else style="flex: 1" v-loading="loading"></el-empty>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, inject, nextTick } from 'vue'
|
||
|
|
import { reactive } from 'vue'
|
||
|
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||
|
|
import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
|
||
|
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||
|
|
import { install$5 } from 'echarts/types/dist/shared'
|
||
|
|
const datePickerRef = ref()
|
||
|
|
const form: any = reactive({
|
||
|
|
code: '',
|
||
|
|
icon: '',
|
||
|
|
id: '',
|
||
|
|
name: '',
|
||
|
|
path: '',
|
||
|
|
pid: '0',
|
||
|
|
remark: '',
|
||
|
|
routeName: '',
|
||
|
|
sort: 0,
|
||
|
|
type: 0
|
||
|
|
})
|
||
|
|
const echartsData = ref<any>(null)
|
||
|
|
const popupData = ref<any>(null)
|
||
|
|
const dialogVisible = ref(false)
|
||
|
|
const loading = ref(true)
|
||
|
|
const title = ref('')
|
||
|
|
const open = (text: string, data?: anyObj) => {
|
||
|
|
title.value = text
|
||
|
|
popupData.value = data
|
||
|
|
dialogVisible.value = true
|
||
|
|
nextTick(() => {
|
||
|
|
init()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const init = () => {
|
||
|
|
echartsData.value = null
|
||
|
|
loading.value = true
|
||
|
|
getDeviceDataTrend({
|
||
|
|
endTime: datePickerRef.value.timeValue[1],
|
||
|
|
lineId: popupData.value.lineId,
|
||
|
|
startTime: datePickerRef.value.timeValue[0],
|
||
|
|
statisticalParams: popupData.value.children
|
||
|
|
}).then(res => {
|
||
|
|
if (res.data.length && res.data[0].length) {
|
||
|
|
let arr: any[] = []
|
||
|
|
res.data.forEach((item: any[]) => {
|
||
|
|
arr.push(...item)
|
||
|
|
})
|
||
|
|
echartsData.value = {
|
||
|
|
options: {
|
||
|
|
grid: {
|
||
|
|
top: '50px',
|
||
|
|
left: '10px',
|
||
|
|
right: '20px',
|
||
|
|
bottom: '40px',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
series: res.data.map((item: any) => {
|
||
|
|
return {
|
||
|
|
data: item.map((item: any) => {
|
||
|
|
return item.statisticalData
|
||
|
|
}),
|
||
|
|
markPoint: {
|
||
|
|
symbol: 'circle',
|
||
|
|
symbolSize: 8,
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: [
|
||
|
|
{ type: 'max', name: 'Max' },
|
||
|
|
{ type: 'min', name: 'Min' }
|
||
|
|
]
|
||
|
|
},
|
||
|
|
type: 'line',
|
||
|
|
showSymbol: false,
|
||
|
|
smooth: true,
|
||
|
|
name: item[0].anotherName
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
data: res.data.map((item: any[]) => {
|
||
|
|
return item[0].anotherName
|
||
|
|
})
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
name: `单位:(${arr[0].unit})`,
|
||
|
|
type: 'value',
|
||
|
|
axisLine: {
|
||
|
|
show: true
|
||
|
|
},
|
||
|
|
minInterval: 1,
|
||
|
|
interval: parseInt(
|
||
|
|
(
|
||
|
|
(arr
|
||
|
|
.map(item => item.statisticalData)
|
||
|
|
.sort((a, b) => {
|
||
|
|
return b - a
|
||
|
|
})[0] *
|
||
|
|
1.5) /
|
||
|
|
5
|
||
|
|
).toFixed(0)
|
||
|
|
),
|
||
|
|
min: 0,
|
||
|
|
max: parseInt(
|
||
|
|
(
|
||
|
|
arr
|
||
|
|
.map(item => item.statisticalData)
|
||
|
|
.sort((a, b) => {
|
||
|
|
return b - a
|
||
|
|
})[0] * 1.5
|
||
|
|
).toFixed(0)
|
||
|
|
)
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
data: res.data[0].map((item: any) => {
|
||
|
|
return item.time
|
||
|
|
}),
|
||
|
|
axisLabel: {
|
||
|
|
formatter: function (value: string) {
|
||
|
|
return value.split(' ').join('\n')
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
echartsData.value = null
|
||
|
|
}
|
||
|
|
loading.value = false
|
||
|
|
})
|
||
|
|
}
|
||
|
|
defineExpose({ open })
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.control-popup {
|
||
|
|
.el-dialog__body {
|
||
|
|
padding-bottom: 20px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|