From 0ccd9ca4b3a0ac1474c8cb9445d8b669654c7a81 Mon Sep 17 00:00:00 2001
From: 潘志宝 <979469083@qq.com>
Date: 星期一, 28 十月 2024 17:37:59 +0800
Subject: [PATCH] Merge branch 'master' of http://dlindusit.com:53929/r/iailab-plat-ui-vue3
---
src/views/data/point/index.vue | 61 +++++++
src/api/data/da/point/index.ts | 10 +
src/api/data/da/point/daPointChart.ts | 17 ++
src/views/data/point/PointImportForm.vue | 138 +++++++++++++++++
src/views/data/point/DaPointChart.vue | 231 ++++++++++++++++++++++++++++
5 files changed, 452 insertions(+), 5 deletions(-)
diff --git a/src/api/data/da/point/daPointChart.ts b/src/api/data/da/point/daPointChart.ts
new file mode 100644
index 0000000..658a7ec
--- /dev/null
+++ b/src/api/data/da/point/daPointChart.ts
@@ -0,0 +1,17 @@
+import request from '@/config/axios'
+
+export interface DaPointChartReqVO {
+ pointNos?: [],
+ start?: Date,
+ end?: Date,
+}
+
+// 查询chart列表
+export const getPointDaChart = (data: DaPointChartReqVO) => {
+ return request.post({ url: '/data/api/data/point/history', data })
+}
+
+//导出DaPointValue
+export const exportDaPointValue = (params) => {
+ return request.download({ url: '/data/da/point/exportValue', params })
+}
diff --git a/src/api/data/da/point/index.ts b/src/api/data/da/point/index.ts
index 5556ae2..bb0a516 100644
--- a/src/api/data/da/point/index.ts
+++ b/src/api/data/da/point/index.ts
@@ -52,3 +52,13 @@
export const deleteDaPoint = (id: number) => {
return request.delete({ url: '/data/da/point/delete?id=' + id })
}
+
+//导出DaPointList
+export const exportDaPoint = (params) => {
+ return request.download({ url: '/data/da/point/export', params })
+}
+
+// 下载用户导入模板
+export const importPointTemplate = () => {
+ return request.download({ url: '/data/da/point/get-import-template' })
+}
diff --git a/src/views/data/point/DaPointChart.vue b/src/views/data/point/DaPointChart.vue
new file mode 100644
index 0000000..fabc2f6
--- /dev/null
+++ b/src/views/data/point/DaPointChart.vue
@@ -0,0 +1,231 @@
+<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"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ placeholder="选择日期时间"
+ />
+ </el-form-item>
+ <el-form-item>
+ <el-date-picker
+ v-model="dataForm.endTime"
+ type="datetime"
+ 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="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 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({
+ pointNo: "",
+ start: undefined,
+ end: 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();
+
+ 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();
+ }
+
+ defineExpose({open}) // 提供 open 方法，用于打开弹窗
+
+ async function getDataList() {
+ visible.value = true;
+ if (dataForm.value.id) {
+ try {
+ queryParams.pointNo=dataForm.value.pointNo;
+ queryParams.start = dataForm.value.startTime;
+ queryParams.end = dataForm.value.endTime;
+ const data = await DaPoint.getPointDaChart(queryParams)
+ const dataList = [];
+ const xAxisData = [];
+ data[dataForm.value.pointNo].forEach(function (value) {
+ // 判断数据是否为布尔型
+ if (typeof value["value"] === "boolean") {
+ value["value"] = value["value"]? 1 : 0;
+ }
+ dataList.push([value["time"], value["value"]]);
+ xAxisData.push(value["time"]);
+ });
+ let seriesData = [];
+ seriesData.push({
+ name: "采集值",
+ type: "line",
+ data: dataList,
+ showSymbol: false,
+ 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: xAxisData,
+ },
+ yAxis: {
+ type: "value",
+ },
+ dataZoom: [
+ {
+ type: "inside",
+ },
+ ],
+ series: seriesData,
+ };
+ myChart.clear();
+ 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
+ }
+ }
+</script>
+<style>
+ .el-select {
+ width: 100%;
+ }
+
+ .result-chart {
+ height: 500px;
+ }
+</style>
diff --git a/src/views/data/point/PointImportForm.vue b/src/views/data/point/PointImportForm.vue
new file mode 100644
index 0000000..964e3d6
--- /dev/null
+++ b/src/views/data/point/PointImportForm.vue
@@ -0,0 +1,138 @@
+<template>
+ <Dialog v-model="dialogVisible" title="测点导入" width="400">
+ <el-upload
+ ref="uploadRef"
+ v-model:file-list="fileList"
+ :action="importUrl + '?updateSupport=' + updateSupport"
+ :auto-upload="false"
+ :disabled="formLoading"
+ :headers="uploadHeaders"
+ :limit="1"
+ :on-error="submitFormError"
+ :on-exceed="handleExceed"
+ :on-success="submitFormSuccess"
+ accept=".xlsx, .xls"
+ drag
+ >
+ <Icon icon="ep:upload" />
+ <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+ <template #tip>
+ <div class="el-upload__tip text-center">
+ <div class="el-upload__tip">
+ <el-checkbox v-model="updateSupport" />
+ 是否更新已经存在的测点数据
+ </div>
+ <span>仅允许导入 xls、xlsx 格式文件。</span>
+ <el-link
+ :underline="false"
+ style="font-size: 12px; vertical-align: baseline"
+ type="primary"
+ @click="importTemplate"
+ >
+ 下载模板
+ </el-link>
+ </div>
+ </template>
+ </el-upload>
+ <template #footer>
+ <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="dialogVisible = false">取 消</el-button>
+ </template>
+ </Dialog>
+</template>
+<script lang="ts" setup>
+import * as DaPointApi from '@/api/data/da/point'
+import { getAccessToken, getTenantId } from '@/utils/auth'
+import download from '@/utils/download'
+
+defineOptions({ name: 'PointImportForm' })
+
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+const uploadRef = ref()
+const importUrl =
+ import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/data/da/point/import'
+const uploadHeaders = ref() // 上传 Header 头
+const fileList = ref([]) // 文件列表
+const updateSupport = ref(0) // 是否更新已经存在的测点数据
+
+/** 打开弹窗 */
+const open = () => {
+ dialogVisible.value = true
+ updateSupport.value = 0
+ fileList.value = []
+ resetForm()
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+ if (fileList.value.length == 0) {
+ message.error('请上传文件')
+ return
+ }
+ // 提交请求
+ uploadHeaders.value = {
+ Authorization: 'Bearer ' + getAccessToken(),
+ 'tenant-id': getTenantId()
+ }
+ formLoading.value = true
+ uploadRef.value!.submit()
+}
+
+/** 文件上传成功 */
+const emits = defineEmits(['success'])
+const submitFormSuccess = (response: any) => {
+ if (response.code !== 0) {
+ message.error(response.msg)
+ formLoading.value = false
+ return
+ }
+ // 拼接提示语
+ const data = response.data
+ let text = '上传成功数量：' + data.createPointnames.length + ';'
+ for (let pointname of data.createPointnames) {
+ text += '< ' + pointname + ' >'
+ }
+ text += '更新成功数量：' + data.updatePointnames.length + ';'
+ for (const pointname of data.updatePointnames) {
+ text += '< ' + pointname + ' >'
+ }
+ text += '更新失败数量：' + Object.keys(data.failurePointnames).length + ';'
+ for (const pointname in data.failurePointnames) {
+ text += '< ' + pointname + ': ' + data.failurePointnames[pointname] + ' >'
+ }
+ message.alert(text)
+ formLoading.value = false
+ dialogVisible.value = false
+ // 发送操作成功的事件
+ emits('success')
+}
+
+/** 上传错误提示 */
+const submitFormError = (): void => {
+ message.error('上传失败，请您重新上传！')
+ formLoading.value = false
+}
+
+/** 重置表单 */
+const resetForm = async (): Promise<void> => {
+ // 重置上传状态和文件
+ formLoading.value = false
+ await nextTick()
+ uploadRef.value?.clearFiles()
+}
+
+/** 文件数超出提示 */
+const handleExceed = (): void => {
+ message.error('最多只能上传一个文件！')
+}
+
+/** 下载模板操作 */
+const importTemplate = async () => {
+ const res = await DaPointApi.importPointTemplate()
+ download.excel(res, '测点导入模版.xls')
+}
+</script>
diff --git a/src/views/data/point/index.vue b/src/views/data/point/index.vue
index a7e20cf..dcc989c 100644
--- a/src/views/data/point/index.vue
+++ b/src/views/data/point/index.vue
@@ -53,6 +53,23 @@
<Icon icon="ep:plus" class="mr-5px" />
新增
</el-button>
+ <el-button
+ type="warning"
+ plain
+ @click="handleImport"
+ v-hasPermi="['data:point:import']"
+ >
+ <Icon icon="ep:upload" /> 导入
+ </el-button>
+ <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>
</ContentWrap>
@@ -60,7 +77,7 @@
<!-- 列表 -->
<ContentWrap>
<el-table border stripe v-loading="loading" :data="list">
- <el-table-column fixed label="测点编码" header-align="center" align="left" min-width="110" prop="pointNo" />
+ <el-table-column fixed label="测点编码" header-align="center" align="left" min-width="100" prop="pointNo" />
<el-table-column label="测点名称" header-align="center" align="left" min-width="200" prop="pointName" />
<el-table-column label="测点类型" align="center" prop="pointType" width="100">
<template #default="scope">
@@ -91,7 +108,7 @@
</template>
</el-table-column>
- <el-table-column label="操作" align="center" min-width="110" fixed="right" width="120">
+ <el-table-column label="操作" align="center" min-width="130" fixed="right" width="120">
<template #default="scope">
<el-button
link
@@ -101,6 +118,7 @@
>
编辑
</el-button>
+ <el-button link type="primary" @click="chartHandle(scope.row)">数据查看</el-button>
<el-button
link
type="danger"
@@ -124,11 +142,19 @@
<!-- 表单弹窗：添加/修改 -->
<DaPointForm ref="formRef" @success="getList" />
+ <DaPointChart ref="chartView" />
+
+ <!-- 用户导入对话框 -->
+ <PointImportForm ref="importFormRef" @success="getList" />
</template>
<script lang="ts" setup>
-import DaPointForm from './DaPointForm.vue'
import * as DaPoint from '@/api/data/da/point'
-import {DICT_TYPE} from "@/utils/dict";
+import {ref} from "vue";
+import download from "@/utils/download";
+import {DICT_TYPE, getDictOptions} from "@/utils/dict";
+import DaPointForm from './DaPointForm.vue'
+import DaPointChart from './DaPointChart.vue'
+import * as UserApi from "@/api/system/user";
defineOptions({name: 'DataPoint'})
@@ -146,7 +172,6 @@
tagNo: undefined,
})
const queryFormRef = ref() // 搜索的表单
- const exportLoading = ref(false) // 导出的加载中
/** 查询列表 */
const getList = async () => {
@@ -164,6 +189,12 @@
const handleQuery = () => {
queryParams.pageNo = 1
getList()
+ }
+
+ /** 查看数据操作 */
+ const chartView = ref()
+ const chartHandle = (raw: object) => {
+ chartView.value.open(raw)
}
/** 重置按钮操作 */
@@ -191,7 +222,27 @@
} catch {
}
}
+ /** 测点导入 */
+ const importFormRef = ref()
+ const handleImport = () => {
+ importFormRef.value.open()
+ }
+ /** 导出按钮操作 */
+ const exportLoading = ref(false)
+ const handleExport = async () => {
+ try {
+ // 导出的二次确认
+ await message.exportConfirm()
+ // 发起导出
+ exportLoading.value = true
+ const data = await DaPoint.exportDaPoint(queryParams)
+ download.excel(data, '测点列表.xls')
+ } catch {
+ } finally {
+ exportLoading.value = false
+ }
+ }
/** 初始化 **/
onMounted(async () => {
await getList()
--
Gitblit v1.9.3