工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
潘志宝
2025-02-06 67c33047e156f740f03b47dbf80e7cf4d8eff0ec
提交 | 用户 | 时间
3e5f6c 1 <template>
潘 2   <el-dialog
3     title="当前值"
4     :close-on-click-modal="false"
5     width="50%"
6     v-model="visible"
7   >
8     <el-form
9       :model="dataForm"
10       v-loading="formLoading"
11       label-width="120px"
12     >
13       <el-row>
14         <el-col :span="12">
15           <el-form-item label="测点编码" prop="pointNo">
16             <el-input v-model="dataForm.pointNo" readonly/>
17           </el-form-item>
18         </el-col>
19         <el-col :span="12">
20           <el-form-item label="测点名称" prop="pointName">
21             <el-input v-model="dataForm.pointName" readonly/>
22           </el-form-item>
23         </el-col>
24       </el-row>
25       <el-row>
26         <el-col :span="12">
27           <el-form-item label="数据时间" prop="dataTime">
28             <el-input v-model="dataForm.dataTime" readonly/>
29           </el-form-item>
30         </el-col>
31         <el-col :span="12">
32           <el-form-item label="数据值" prop="dataValue">
33             <el-input v-model="dataForm.dataValue" readonly>
34               <template #append>{{ dataForm.unit }}</template>
35             </el-input>
36           </el-form-item>
37         </el-col>
38       </el-row>
39     </el-form>
40
41     <!-- 列表 -->
42     <ContentWrap v-if="dataForm.pointType === 'CALCULATE'">
43       <el-table border stripe v-loading="tableLoading" :data="list">
44         <el-table-column type="index" header-align="center" align="center" fixed="left" width="50"/>
67c330 45         <el-table-column fixed label="测点编码" header-align="center" align="left" min-width="150" prop="pointNo" />
3e5f6c 46         <el-table-column fixed label="测点名称" header-align="center" align="left" min-width="240" prop="pointName" />
67c330 47         <el-table-column fixed label="当前值" header-align="center" align="left" min-width="150" prop="currentValue" />
3e5f6c 48       </el-table>
潘 49       <!-- 分页 -->
50       <Pagination
51         :total="total"
52         v-model:page="queryParams.pageNo"
53         v-model:limit="queryParams.pageSize"
54         @pagination="getList"
55       />
56     </ContentWrap>
57
58   </el-dialog>
59 </template>
60 <script lang="ts" setup>
61
62 import {reactive, ref} from "vue";
63 import {getYMDHM0} from "@/utils/dateUtil";
64 import * as DaPoint from "@/api/data/da/point/daPointChart";
65
66 const message = useMessage() // 消息弹窗
67 const visible = ref(false);
68 const formLoading = ref(false)
69 const tableLoading = ref(false)
70 const total = ref(0) // 列表的总页数
71 const list = ref([]) // 列表的数据
72 const queryParams = reactive({
73   pageNo: 1,
74   pageSize: 10,
75   pointNo: undefined
76 })
77 const queryFormRef = ref() // 搜索的表单
78
79 const dataForm = ref({
80   id: "",
81   pointNo: "",
82   pointName: "",
83   pointType: "",
84   unit: "",
85   dataTime: "",
86   dataValue: "",
87 });
88
89 /** 打开弹窗 */
90 const open = async (row: object) => {
91   visible.value = true
92   resetForm()
93   dataForm.value.id = row.id;
94   dataForm.value.pointNo = row.pointNo;
95   dataForm.value.pointName = row.pointName;
96   dataForm.value.pointType = row.pointType;
97   dataForm.value.unit = row.unit;
98   getCurrentData()
99   queryParams.pointNo = row.pointNo;
100   if (dataForm.value.pointType === "CALCULATE") {
101     getList()
102   }
103 }
104
105 defineExpose({open}) // 提供 open 方法，用于打开弹窗
106
107 async function getCurrentData() {
108   visible.value = true;
109   formLoading.value = true
110   if (dataForm.value.id) {
111     let params0 = [dataForm.value.pointNo]
112     const data = await DaPoint.getPointsRealValue(params0)
113     formLoading.value = false
114     dataForm.value.dataTime = getYMDHM0(new Date());
115     dataForm.value.dataValue = data[dataForm.value.pointNo]
116   }
117 }
118
119 /** 查询列表 */
120 const getList = async () => {
121   tableLoading.value = true
122   try {
123     const page = await DaPoint.getMathPointCurrentValue(queryParams)
124     list.value = page.list
125     total.value = page.total
126   } finally {
127     tableLoading.value = false
128   }
129 }
130
131 /** 重置表单 */
132 const resetForm = () => {
133   dataForm.value = {
134     id: undefined,
135     pointNo: undefined,
136     pointName: undefined,
137     pointType: undefined,
138     unit: undefined,
139     dataTime: undefined,
140     dataValue: undefined,
141   }
142 }
143
144 </script>