<template>
|
<!-- 搜索 -->
|
<ContentWrap>
|
<el-form
|
class="-mb-15px"
|
:model="queryParams"
|
ref="queryFormRef"
|
:inline="true"
|
label-width="68px"
|
>
|
<el-form-item label="开始时间">
|
<el-date-picker
|
size="mini"
|
v-model="queryParams.startTime"
|
format="YYYY-MM-DD HH:mm:00"
|
value-format="YYYY-MM-DD HH:mm:00"
|
type="datetime"
|
:clearable="false"
|
placeholder="选择日期时间"/>
|
</el-form-item>
|
<el-form-item label="结束时间">
|
<el-date-picker
|
size="mini"
|
v-model="queryParams.endTime"
|
format="YYYY-MM-DD HH:mm:00"
|
value-format="YYYY-MM-DD HH:mm:00"
|
type="datetime"
|
:clearable="false"
|
placeholder="选择日期时间"/>
|
</el-form-item>
|
<el-form-item label="调度指标" prop="ddzb">
|
<el-select
|
v-model="queryParams.ddbz"
|
class="!w-240px"
|
clearable
|
placeholder="请选择调度指标"
|
>
|
<el-option
|
v-for="dict in getIntDictOptions(DICT_TYPE.PMS_DDZB)"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="handleQuery">
|
<Icon icon="ep:search" class="mr-5px"/>
|
搜索
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<div :loading="loading" style="height: 400px; width: 100%;">
|
<bar-line :option="chartOption"/>
|
</div>
|
</ContentWrap>
|
</template>
|
<script lang="ts" setup>
|
import {ref} from "vue"
|
import {getYMD} from "@/utils/dateUtil"
|
|
defineOptions({name: 'Analysis'})
|
|
const loading = ref(false)
|
const chartOption = {}
|
const queryParams = reactive({
|
startTime: getYMD(new Date().getTime() - 3600 * 1000 * 24 * 30),
|
endTime: getYMD(new Date()),
|
groupType: 'day',
|
index: ''
|
})
|
|
|
const queryChart = async () => {
|
|
this.loading = true
|
this.$http.post(`/iailab-iems-coal-proddisp/analysis/index/chart`, queryParams).then(({data: res}) => {
|
this.loading = false
|
if (res.code !== 0) {
|
return this.$message.error(res.msg)
|
}
|
let series = []
|
if (res.data.series) {
|
res.data.series.forEach(function (item) {
|
series.push(
|
{
|
name: item.name,
|
data: item.data,
|
type: 'line',
|
smooth: false
|
}
|
)
|
})
|
}
|
|
this.chartOption = {
|
title: {
|
text: res.data.valueName,
|
textStyle: {
|
fontSize: 14
|
}
|
},
|
tooltip: {
|
trigger: 'axis'
|
},
|
grid: {
|
top: '10%',
|
right: '10%',
|
bottom: '10%',
|
left: '5%'
|
},
|
legend: {
|
type: 'scroll',
|
data: res.data.legend
|
},
|
toolbox: {
|
show: true,
|
top: 0,
|
right: '10%',
|
feature: {
|
dataView: {readOnly: false},
|
magicType: {type: ['line', 'bar']},
|
saveAsImage: {}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
data: res.data.categories
|
},
|
yAxis: {
|
type: 'value',
|
//name: res.data.valueName,
|
nameTextStyle: {
|
fontWeight: 'bold'
|
},
|
axisLine: {
|
show: true
|
}
|
},
|
series: series
|
}
|
|
}).catch(() => {
|
this.loading = false
|
})
|
}
|
/** 初始化 **/
|
onMounted(async () => {
|
await queryChart()
|
})
|
</script>
|
