From e7b6da924c75bcae34945d585533d48b05b76f1c Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期二, 12 十一月 2024 11:28:57 +0800
Subject: [PATCH] 运行状态
---
src/views/model/pre/item/index.vue | 24 ++++-
src/views/model/pre/item/MmPredictItemChart.vue | 192 ++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 211 insertions(+), 5 deletions(-)
diff --git a/src/views/model/pre/item/MmPredictItemChart.vue b/src/views/model/pre/item/MmPredictItemChart.vue
new file mode 100644
index 0000000..215c854
--- /dev/null
+++ b/src/views/model/pre/item/MmPredictItemChart.vue
@@ -0,0 +1,192 @@
+<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 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"
+ :clearable="false"
+ placeholder="选择日期时间"/>
+ </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"
+ :clearable="false"
+ 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="chartDom" class="result-chart"></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 {getYMDHM0} from "@/utils/dateUtil"
+import download from "@/utils/download";
+const message = useMessage() // 消息弹窗
+const visible = ref(false);
+const chartDom = ref(null);
+let myChart = null;
+const chartParams = reactive({
+ codes:[],
+ startDate : undefined,
+ endDate: undefined,
+})
+const dataForm = ref({
+ id: "",
+ pointNo: "",
+ pointName: "",
+ pointTypeName: "",
+ startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
+ endTime: "",
+});
+
+/** 打开弹窗 */
+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 方法，用于打开弹窗
+
+async function getDataList() {
+ visible.value = true;
+ if (dataForm.value.id) {
+ try {
+ chartParams.codes=[dataForm.value.pointNo];
+ chartParams.startDate = dataForm.value.startTime;
+ chartParams.endDate = dataForm.value.endTime;
+ const data = await DaPoint.getPointDaChart(chartParams)
+ 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(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",
+ },
+ },
+ },
+ 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 () => {
+ chartParams.codes=[dataForm.value.pointNo];
+ chartParams.startDate = dataForm.value.startTime;
+ chartParams.endDate = dataForm.value.endTime;
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DaPoint.exportDaPointValue(chartParams)
+ download.excel(data, dataForm.value.pointName +'.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+</script>
+<style>
+.el-select {
+ width: 100%;
+}
+
+.result-chart {
+ height: 500px;
+}
+</style>
diff --git a/src/views/model/pre/item/index.vue b/src/views/model/pre/item/index.vue
index e0e8861..53f57f6 100644
--- a/src/views/model/pre/item/index.vue
+++ b/src/views/model/pre/item/index.vue
@@ -51,7 +51,7 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
- <el-table-column label="编号" align="center" prop="itemno"/>
+ <el-table-column label="编号" align="center" min-width="150" prop="itemno"/>
<el-table-column label="预测项名" header-align="center" align="left" min-width="200" prop="itemname"/>
<el-table-column label="类型名称" align="center" prop="itemtypename">
<template #default="scope">
@@ -62,7 +62,7 @@
<el-table-column label="预测长度" align="center" prop="predictlength"/>
<el-table-column label="粒度" align="center" prop="granularity">
<template #default="scope">
- <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.granularity" />
+ <dict-tag :type="DICT_TYPE.PRED_GRANULARITY" :value="scope.row.granularity" />
</template>
</el-table-column>
<el-table-column label="是否融合" align="center" prop="isfuse">
@@ -80,21 +80,25 @@
<dict-tag :type="DICT_TYPE.COM_IS_INT" :value="scope.row.status" />
</template>
</el-table-column>
- <el-table-column label="数据点名称" align="center" prop="tagname"/>
- <el-table-column label="存放表" align="center" prop="tablename"/>
- <el-table-column label="操作" align="center" min-width="110" fixed="right">
+ <el-table-column label="运行时间" align="center" prop="lastTime"/>
+ <el-table-column label="运行状态" align="center" prop="runStatus"/>
+ <el-table-column label="运行耗时" align="center" prop="duration"/>
+ <el-table-column label="操作" align="center" min-width="120" fixed="right">
<template #default="scope">
<el-button
link
type="primary"
+ size="mini"
@click="openForm('update', scope.row.id, scope.row.itemtypename)"
v-hasPermi="['model:pre-item:update']"
>
编辑
</el-button>
+ <el-button link size="mini" type="primary" @click="chartHandle(scope.row)">数据</el-button>
<el-button
link
type="danger"
+ size="mini"
@click="handleDelete(scope.row.id)"
v-hasPermi="['model:pre-item:delete']"
>
@@ -115,9 +119,13 @@
<!-- 表单弹窗：添加/修改 -->
<MmPredictItemForm ref="formRef" @success="getList"/>
+ <!-- 表单弹窗：数据 -->
+ <MmPredictItemChart ref="chartView" @success="getList"/>
+
</template>
<script lang="ts" setup>
import MmPredictItemForm from './MmPredictItemForm.vue'
+import MmPredictItemChart from './MmPredictItemChart.vue'
import * as MmPredictItem from '@/api/model/pre/predict'
import {DICT_TYPE} from "@/utils/dict";
@@ -171,6 +179,12 @@
handleQuery()
}
+/** 查看数据操作 */
+const chartView = ref()
+const chartHandle = (raw: object) => {
+ chartView.value.open(raw)
+}
+
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, itemtypename?: string) => {
--
Gitblit v1.9.3