From 0cae456a355877d1e89494b3b436bda3afde48c9 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期五, 10 一月 2025 08:53:56 +0800
Subject: [PATCH] 预测项运行状态查询
---
src/views/data/point/DaPointChart.vue | 279 +++++++++++++++++++++++++------------------------------
1 files changed, 128 insertions(+), 151 deletions(-)
diff --git a/src/views/data/point/DaPointChart.vue b/src/views/data/point/DaPointChart.vue
index ddc9a2d..caaa271 100644
--- a/src/views/data/point/DaPointChart.vue
+++ b/src/views/data/point/DaPointChart.vue
@@ -10,21 +10,25 @@
:model="dataForm"
@keydown.enter="getDataList()"
>
- <el-form-item>
+ <el-form-item label="开始时间">
<el-date-picker
+ size="mini"
v-model="dataForm.startTime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- placeholder="选择日期时间"
- />
+ :clearable="false"
+ placeholder="选择日期时间"/>
</el-form-item>
- <el-form-item>
+ <el-form-item label="结束时间">
<el-date-picker
+ size="mini"
v-model="dataForm.endTime"
+ format="YYYY-MM-DD HH:mm:00"
+ value-format="YYYY-MM-DD HH:mm:00"
type="datetime"
- value-format="yyyy-MM-dd HH:mm:ss"
- placeholder="选择日期时间"
- />
+ :clearable="false"
+ placeholder="选择日期时间"/>
</el-form-item>
<el-form-item>
<el-button @click="getDataList()">查询</el-button>
@@ -37,92 +41,63 @@
:loading="exportLoading"
v-hasPermi="['data:point:export']"
>
- <Icon icon="ep:download" />导出
+ <Icon icon="ep:download"/>
+ 导出
</el-button>
</el-form-item>
</el-form>
- <div ref="chartDom" class="result-chart"></div>
+ <div ref="chartDom" 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 DaPoint from '@/api/data/da/point/daPointChart'
- import download from "@/utils/download";
- const message = useMessage() // 消息弹窗
- const visible = ref(false);
- const chartDom = ref(null);
- let myChart = null;
- const dataForm = ref({
- id: "",
- pointNo: "",
- pointName: "",
- pointTypeName: "",
- startTime: getYMDHMS(),
- endTime: undefined,
- });
- const queryParams = reactive({
- codes: [],
- startDate: undefined,
- endDate: undefined,
- })
- function getYMDHMS() {
- let timestamp = new Date().getTime();
- let time = new Date(timestamp - 1000 * 60 * 30);
- 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();
+import {ref} from 'vue';
+import * as echarts from 'echarts';
+import * as DaPoint from '@/api/data/da/point/daPointChart'
+import {getYMDHM0} from "@/utils/dateUtil"
+import download from "@/utils/download";
- 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.pointNo = row.pointNo;
- dataForm.value.pointName = row.pointName;
- dataForm.value.startTime = getYMDHMS();
- dataForm.value.endTime = "";
- getDataList();
- }
+const message = useMessage() // 消息弹窗
+const visible = ref(false);
+const chartDom = ref(null);
+let myChart = null;
+const chartParams = reactive({
+ codes: [],
+ pointNo: undefined,
+ startDate: undefined,
+ endDate: undefined,
+})
+const dataForm = ref({
+ id: "",
+ pointNo: "",
+ pointName: "",
+ pointTypeName: "",
+ startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
+ endTime: "",
+});
- defineExpose({open}) // 提供 open 方法，用于打开弹窗
+/** 打开弹窗 */
+const open = async (row: object) => {
+ visible.value = true
+ dataForm.value.id = row.id;
+ dataForm.value.pointNo = row.pointNo;
+ dataForm.value.pointName = row.pointName;
+ getDataList();
+}
+defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+ const loading = ref(false)
async function getDataList() {
visible.value = true;
+ loading.value = true
if (dataForm.value.id) {
try {
- queryParams.codes=[dataForm.value.pointNo];
- queryParams.startDate = dataForm.value.startTime;
- queryParams.endDate = dataForm.value.endTime;
- const data = await DaPoint.getPointDaChart(queryParams)
+ chartParams.codes=[dataForm.value.pointNo];
+ chartParams.startDate = dataForm.value.startTime;
+ chartParams.endDate = dataForm.value.endTime;
+ const data = await DaPoint.getPointDaChart(chartParams)
+ loading.value = false
let seriesData = []
data.series.forEach(item => {
seriesData.push({
@@ -140,84 +115,86 @@
});
})
- myChart = echarts.init(chartDom.value);
- const option = {
- title: {
- text: dataForm.value.pointName,
- top: 0,
- left: "1%",
- textStyle: {
- fontSize: 14,
+ myChart = echarts.init(chartDom.value);
+ const option = {
+ title: {
+ text: dataForm.value.pointName,
+ top: 0,
+ left: "1%",
+ textStyle: {
+ fontSize: 14,
+ },
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "line",
+ lineStyle: {
+ color: "#cccccc",
+ width: "1",
+ type: "dashed",
},
},
- 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",
},
- 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)
- }
+ ],
+ series: seriesData,
+ };
+ myChart.setOption(option);
+ } catch (error) {
+ console.error(error)
}
}
- /** 导出按钮操作 */
- const exportLoading = ref(false)
- const handleExport = async () => {
- queryParams.pointNos=[dataForm.value.pointNo];
- queryParams.start = dataForm.value.startTime;
- queryParams.end = dataForm.value.endTime;
- try {
- // 导出的二次确认
- await message.exportConfirm()
- // 发起导出
- exportLoading.value = true
- const data = await DaPoint.exportDaPointValue(queryParams)
- download.excel(data, dataForm.value.pointName +'.xls')
- } catch {
- } finally {
- exportLoading.value = false
- }
+}
+
+/** 导出按钮操作 */
+const exportLoading = ref(false)
+const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DaPoint.exportDaPointValue({
+ pointNo: dataForm.value.pointNo,
+ start: dataForm.value.startTime,
+ end: dataForm.value.endTime
+ })
+ download.excel(data, dataForm.value.pointName + '.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
}
+}
</script>
<style>
- .el-select {
- width: 100%;
- }
+.el-select {
+ width: 100%;
+}
- .result-chart {
- height: 500px;
- }
+.result-chart {
+ height: 500px;
+}
</style>
--
Gitblit v1.9.3