<template>
|
<el-dialog
|
title="采集值"
|
:close-on-click-modal="false"
|
width="50%"
|
v-model="visible"
|
>
|
<el-form
|
:inline="true"
|
:model="dataForm"
|
@keydown.enter="getDataList()"
|
>
|
<el-form-item>
|
<el-date-picker
|
v-model="dataForm.startTime"
|
type="datetime"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
placeholder="选择日期时间"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-date-picker
|
v-model="dataForm.endTime"
|
type="datetime"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
placeholder="选择日期时间"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="getDataList()">查询</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="success"
|
plain
|
@click="handleExport"
|
:loading="exportLoading"
|
v-hasPermi="['data:point:export']"
|
>
|
<Icon icon="ep:download"/>
|
导出
|
</el-button>
|
</el-form-item>
|
</el-form>
|
<div ref="chartDomPlan" class="result-chart" v-loading="loading"></div>
|
</el-dialog>
|
</template>
|
|
<script lang="ts" setup>
|
import {ref} from 'vue';
|
import * as echarts from 'echarts';
|
import * as ItemApi from '@/api/data/plan/item'
|
import download from "@/utils/download";
|
|
const message = useMessage() // 消息弹窗
|
const visible = ref(false);
|
const chartDomPlan = ref(null);
|
let myChart = null;
|
const dataForm = ref({
|
id: "",
|
itemNo: "",
|
itemName: "",
|
startTime: getYMDHMS(),
|
endTime: undefined,
|
});
|
const queryParams = reactive({
|
itemNos: [],
|
start: undefined,
|
end: undefined,
|
})
|
const loading = ref(true) // 列表的加载中
|
|
function getYMDHMS() {
|
let timestamp = new Date().getTime();
|
let time = new Date(timestamp - 1000 * 60 * 60 * 3);
|
let year = time.getFullYear();
|
let month = (time.getMonth() + 1).toString();
|
let date = time.getDate().toString();
|
let hours = time.getHours().toString();
|
let minute = time.getMinutes().toString();
|
|
if (month < 10) {
|
month = "0" + month;
|
}
|
if (date < 10) {
|
date = "0" + date;
|
}
|
if (hours < 10) {
|
hours = "0" + hours;
|
}
|
if (minute < 10) {
|
minute = "0" + minute;
|
}
|
|
return (
|
year +
|
"-" +
|
month +
|
"-" +
|
date +
|
" " +
|
hours +
|
":" +
|
minute +
|
":" +
|
"00"
|
);
|
}
|
|
/** 打开弹窗 */
|
const open = async (row: object) => {
|
visible.value = true
|
dataForm.value.id = row.id;
|
dataForm.value.itemNo = row.itemNo;
|
dataForm.value.itemName = row.itemName;
|
dataForm.value.startTime = getYMDHMS();
|
dataForm.value.endTime = "";
|
getDataList();
|
}
|
|
defineExpose({open}) // 提供 open 方法，用于打开弹窗
|
|
async function getDataList() {
|
visible.value = true;
|
loading.value = true
|
if (dataForm.value.id) {
|
try {
|
queryParams.itemNos = [dataForm.value.itemNo];
|
queryParams.start = dataForm.value.startTime;
|
queryParams.end = dataForm.value.endTime;
|
const data = await ItemApi.getPlanChart(queryParams)
|
loading.value = false
|
let seriesData = []
|
data.series.forEach(item => {
|
seriesData.push({
|
name: item.name,
|
type: "line",
|
data: item.data,
|
showSymbol: true,
|
smooth: false,
|
lineStyle: {
|
normal: {
|
color: "#5B8FF9",
|
width: 1,
|
},
|
},
|
});
|
})
|
|
myChart = echarts.init(chartDomPlan.value);
|
const option = {
|
title: {
|
text: dataForm.value.itemName,
|
top: 0,
|
left: "1%",
|
textStyle: {
|
fontSize: 14,
|
},
|
},
|
tooltip: {
|
trigger: "axis",
|
axisPointer: {
|
type: "line",
|
lineStyle: {
|
color: "#cccccc",
|
width: "1",
|
type: "dashed",
|
},
|
},
|
},
|
legend: {
|
show: false,
|
top: 10,
|
},
|
grid: {
|
top: 30,
|
left: "3%",
|
right: "5%",
|
bottom: 10,
|
containLabel: true,
|
},
|
xAxis: {
|
type: "category",
|
boundaryGap: false,
|
data: data.categories,
|
},
|
yAxis: {
|
type: "value",
|
},
|
dataZoom: [
|
{
|
type: "inside",
|
},
|
],
|
series: seriesData,
|
};
|
myChart.setOption(option);
|
} catch (error) {
|
console.error(error)
|
}
|
}
|
}
|
|
/** 导出按钮操作 */
|
const exportLoading = ref(false)
|
const handleExport = async () => {
|
queryParams.itemNo = dataForm.value.itemNo;
|
queryParams.start = dataForm.value.startTime;
|
queryParams.end = dataForm.value.endTime;
|
try {
|
// 导出的二次确认
|
await message.exportConfirm()
|
// 发起导出
|
exportLoading.value = true
|
const data = await ItemApi.exportPlanValue(queryParams)
|
download.excel(data, '计划数据.xlsx')
|
} catch {
|
} finally {
|
exportLoading.value = false
|
}
|
}
|
</script>
|
<style>
|
.el-select {
|
width: 100%;
|
}
|
|
.result-chart {
|
height: 500px;
|
}
|
</style>
|
