From 23beab5084d97f25fb40ee57055436a1c84757f1 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期一, 04 十一月 2024 08:28:17 +0800
Subject: [PATCH] 计划数据
---
src/api/data/plan/item/index.ts | 19 ++-
src/views/data/plan/item/ItemChart.vue | 225 +++++++++++++++++++++++++++++++++++++++++++++
src/views/data/plan/item/index.vue | 45 ++++++--
3 files changed, 271 insertions(+), 18 deletions(-)
diff --git a/src/api/data/plan/item/index.ts b/src/api/data/plan/item/index.ts
index 897a453..e42e999 100644
--- a/src/api/data/plan/item/index.ts
+++ b/src/api/data/plan/item/index.ts
@@ -17,6 +17,12 @@
itemCategory: string
}
+export interface PlanChartReqVO {
+ itemNos?: [],
+ start?: Date,
+ end?: Date,
+}
+
// 查询列表
export const getItemPage = (params: PageParam) => {
return request.get({ url: '/data/plan-item/page', params })
@@ -47,9 +53,12 @@
return request.get({ url: '/data/plan-item/getList', params})
}
-export const validateAsNumber = (rule, value, callback) => {
- const regex = /^(\-|\+)?\d+(\.\d+)?$/;
- if (!regex.test(value)) {
- callback(new Error('请输入数字！'));
- }
+// 查询Plan图表
+export const getPlanChart = (data: PlanChartReqVO) => {
+ return request.post({ url: '/data/api/query-plans/chart', data })
+}
+
+// 导出Plan值
+export const exportPlanValue = (data: PlanChartReqVO) => {
+ return request.post({ url: '/data/api/export-plan/history-value', data })
}
diff --git a/src/views/data/plan/item/ItemChart.vue b/src/views/data/plan/item/ItemChart.vue
new file mode 100644
index 0000000..bb6d993
--- /dev/null
+++ b/src/views/data/plan/item/ItemChart.vue
@@ -0,0 +1,225 @@
+<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"></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,
+})
+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;
+ 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)
+ 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.itemNos=[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, dataForm.value.itemName +'.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+}
+</script>
+<style>
+.el-select {
+ width: 100%;
+}
+
+.result-chart {
+ height: 500px;
+}
+</style>
diff --git a/src/views/data/plan/item/index.vue b/src/views/data/plan/item/index.vue
index daa9a45..cc85952 100644
--- a/src/views/data/plan/item/index.vue
+++ b/src/views/data/plan/item/index.vue
@@ -4,11 +4,13 @@
<el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px"
label-width="68px">
<el-form-item label="计划编码" prop="itemNo">
- <el-input v-model="queryParams.itemNo" class="!w-200px" clearable placeholder="请输入计划编码"
+ <el-input v-model="queryParams.itemNo" class="!w-200px" clearable
+ placeholder="请输入计划编码"
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item label="计划名称" prop="itemName">
- <el-input v-model="queryParams.itemName" class="!w-200px" clearable placeholder="请输入计划名称"
+ <el-input v-model="queryParams.itemName" class="!w-200px" clearable
+ placeholder="请输入计划名称"
@keyup.enter="handleQuery"/>
</el-form-item>
<el-form-item>
@@ -36,12 +38,16 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list">
- <el-table-column prop="itemNo" label="计划编码" header-align="center" align="center" min-width="80"/>
- <el-table-column prop="itemName" label="计划名称" header-align="center" align="center" min-width="120"/>
- <el-table-column prop="itemCategoryName" label="计划分类" header-align="center" align="center" min-width="100"/>
- <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center" min-width="40">
+ <el-table-column prop="itemNo" label="计划编码" header-align="center" align="center"
+ min-width="80"/>
+ <el-table-column prop="itemName" label="计划名称" header-align="center" align="center"
+ min-width="120"/>
+ <el-table-column prop="itemCategoryName" label="计划分类" header-align="center" align="center"
+ min-width="100"/>
+ <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center"
+ min-width="40">
<template #default="scope">
- <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity" />
+ <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity"/>
</template>
</el-table-column>
<el-table-column
@@ -58,6 +64,8 @@
type="primary"
@click="openForm('update', scope.row.id)">
修改
+ </el-button>
+ <el-button link size="mini" type="primary" @click="chartHandle(scope.row)">数据
</el-button>
<el-button
v-hasPermi="['data:ind-item:delete']"
@@ -79,21 +87,25 @@
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
- <ItemForm ref="formRef" @success="getList" />
+ <ItemForm ref="formRef" @success="getList"/>
+
+ <!-- 表单弹窗：计划数据 -->
+ <ItemChart ref="chartView"/>
</template>
<script lang="ts" setup>
-import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
+import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
+import {dateFormatter} from '@/utils/formatTime'
import ItemForm from './ItemForm.vue'
import download from '@/utils/download'
import * as ItemApi from '@/api/data/plan/item'
import * as CategoryApi from "@/api/data/plan/category";
+import ItemChart from "./ItemChart.vue";
-defineOptions({ name: 'PlanItem' })
+defineOptions({name: 'PlanItem'})
const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
+const {t} = useI18n() // 国际化
const dataCategoryList = ref([] as CategoryApi.IndItemCategoryVO[])
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
@@ -127,6 +139,12 @@
getList()
}
+/** 查看数据操作 */
+const chartView = ref()
+const chartHandle = (raw: object) => {
+ chartView.value.open(raw)
+}
+
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value.resetFields()
@@ -149,7 +167,8 @@
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
- } catch {}
+ } catch {
+ }
}
/** 初始化 **/
--
Gitblit v1.9.3