工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
liriming
2025-03-03 8bb7160c9c4fd7ce5893ee673647b13cc35410ae
提交 | 用户 | 时间
1c14d6 1 <template>
L 2   <!-- 搜索 -->
3   <ContentWrap>
4     <el-form
5       class="-mb-15px"
6       :model="queryParams"
7       ref="queryFormRef"
8       :inline="true"
9       label-width="68px"
10     >
11       <el-form-item label="测点编码" prop="pointNo">
12         <el-input
13           v-model="queryParams.pointNo"
14           placeholder="请输入测点编码"
15           clearable
16           @keyup.enter="handleQuery"
aba8b4 17           class="!w-200px"
1c14d6 18         />
L 19       </el-form-item>
20       <el-form-item label="测点名称" prop="pointName">
21         <el-input
22           v-model="queryParams.pointName"
23           placeholder="请输入测点名称"
24           clearable
25           @keyup.enter="handleQuery"
aba8b4 26           class="!w-200px"
1c14d6 27         />
L 28       </el-form-item>
f33c52 29       <el-form-item label="测点类型" prop="pointType">
潘 30         <el-select
31           v-model="queryParams.pointType"
32           placeholder="请选择"
33           clearable
34           class="!w-240px"
35         >
36           <el-option
37             v-for="dict in getStrDictOptions(DICT_TYPE.DATA_POINT_TYPE)"
38             :key="dict.value"
39             :label="dict.label"
40             :value="dict.value"
41           />
42         </el-select>
43       </el-form-item>
e9d8f9 44       <el-form-item label="测点Tag" prop="tagNo">
潘 45         <el-input
46           v-model="queryParams.tagNo"
47           placeholder="请输入测点Tag"
48           clearable
49           @keyup.enter="handleQuery"
aba8b4 50           class="!w-200px"
e9d8f9 51         />
潘 52       </el-form-item>
d97202 53       <el-form-item label="采集质量" prop="collectQuality">
潘 54         <el-select
55           v-model="queryParams.collectQuality"
56           placeholder="请选择"
57           clearable
58           class="!w-240px"
59         >
60           <el-option
61             v-for="dict in getStrDictOptions(DICT_TYPE.DATA_QUALITY)"
62             :key="dict.value"
63             :label="dict.label"
64             :value="dict.value"
65           />
66         </el-select>
67       </el-form-item>
1c14d6 68       <el-form-item>
L 69         <el-button @click="handleQuery">
70           <Icon icon="ep:search" class="mr-5px" />
71           搜索
72         </el-button>
73         <el-button @click="resetQuery">
74           <Icon icon="ep:refresh" class="mr-5px" />
75           重置
76         </el-button>
77         <el-button
78           type="primary"
79           plain
80           @click="openForm('create')"
85c27f 81           v-hasPermi="['data:point:create']"
1c14d6 82         >
L 83           <Icon icon="ep:plus" class="mr-5px" />
84           新增
85         </el-button>
031c25 86         <el-button
D 87           type="warning"
88           plain
89           @click="handleImport"
90           v-hasPermi="['data:point:import']"
91         >
92           <Icon icon="ep:upload" /> 导入
93         </el-button>
94         <el-button
95           type="success"
96           plain
97           @click="handleExport"
98           :loading="exportLoading"
99           v-hasPermi="['data:point:export']"
100         >
101           <Icon icon="ep:download" />导出
102         </el-button>
5d8c73 103         <el-button
J 104           type="success"
105           plain
106           @click="enable"
107           v-hasPermi="['data:point:update']"
108         >启用
109         </el-button>
110         <el-button
111           type="danger"
112           plain
113           @click="disable"
114           v-hasPermi="['data:point:update']"
115         >禁用
116         </el-button>
1c14d6 117       </el-form-item>
L 118     </el-form>
119   </ContentWrap>
120
121   <!-- 列表 -->
122   <ContentWrap>
5d8c73 123     <el-table border stripe v-loading="loading" :data="list" @selection-change="selectionChangeHandle">
de0f62 124       <el-table-column type="selection" header-align="center" align="center" fixed="left" width="50"/>
5d8c73 125       <el-table-column fixed label="测点编码" header-align="center" align="left" min-width="130" prop="pointNo" />
de0f62 126       <el-table-column fixed label="测点名称" header-align="center" align="left" min-width="240" prop="pointName" />
e9d8f9 127       <el-table-column label="测点类型" align="center" prop="pointType" width="100">
潘 128         <template #default="scope">
129           <dict-tag :type="DICT_TYPE.DATA_POINT_TYPE" :value="scope.row.pointType" />
130         </template>
131       </el-table-column>
132       <el-table-column label="数据类型" align="center" prop="dataType" width="100">
133         <template #default="scope">
134           <dict-tag :type="DICT_TYPE.POINT_DATA_TYPE" :value="scope.row.dataType" />
15a226 135         </template>
L 136       </el-table-column>
137       <el-table-column label="值类型" align="center" prop="valueType" width="120">
138         <template #default="scope">
df90c0 139           <dict-tag :type="DICT_TYPE.MEASURE_VALUE_TYPE" :value="scope.row.valueType" />
e9d8f9 140         </template>
潘 141       </el-table-column>
c4b4d2 142       <el-table-column label="测量单位" align="center" prop="unit" width="80"/>
1c14d6 143       <el-table-column label="单位转换" align="center" prop="unittransfactor" />
c4b4d2 144       <el-table-column label="默认值" align="center" prop="defaultValue" width="100"/>
e9d8f9 145       <el-table-column label="采集频率" align="center" prop="minfreqid" width="100"/>
c4b4d2 146       <el-table-column label="数据源类型" align="center" prop="sourceType" min-width="100"/>
潘 147       <el-table-column label="数据源名称" align="center" prop="sourceName" min-width="100"/>
e9d8f9 148       <el-table-column label="测点Tag" header-align="center" align="left" prop="tagNo" min-width="150"/>
d97202 149       <el-table-column label="采集质量" header-align="center" align="center" prop="collectQuality" width="100">
de0f62 150         <template #default="scope">
潘 151           <el-tag v-if="scope.row.collectQuality === 'Good'" size="small" type="success">{{scope.row.collectQuality}}</el-tag>
152           <el-tag v-if="scope.row.collectQuality === 'Bad'" size="small" type="danger">{{scope.row.collectQuality}}</el-tag>
153         </template>
154       </el-table-column>
155       <el-table-column label="采集时间" header-align="center" align="center" prop="collectTime" min-width="150"/>
5d8c73 156       <el-table-column label="是否启用" align="center" prop="isEnable" width="85">
85c27f 157         <template #default="scope">
潘 158           <el-tag v-if="scope.row.isEnable === 1" size="small">是</el-tag>
159           <el-tag v-else size="small" type="danger">否</el-tag>
160         </template>
161       </el-table-column>
1c14d6 162
3e5f6c 163       <el-table-column label="操作"  align="center" min-width="130" fixed="right" width="140">
1c14d6 164         <template #default="scope">
L 165           <el-button
166             link
c4b4d2 167             size="mini"
1c14d6 168             type="primary"
L 169             @click="openForm('update', scope.row.id)"
85c27f 170             v-hasPermi="['data:point:update']"
1c14d6 171           >
L 172             编辑
173           </el-button>
3e5f6c 174           <el-button link size="mini" type="primary" @click="chartHandle(scope.row)">历史值</el-button>
1c14d6 175           <el-button
L 176             link
c4b4d2 177             size="mini"
1c14d6 178             type="danger"
L 179             @click="handleDelete(scope.row.id)"
85c27f 180             v-hasPermi="['data:point:delete']"
1c14d6 181           >
L 182             删除
183           </el-button>
3e5f6c 184           <el-button link size="mini" type="primary" @click="pointValueHandle(scope.row)">当前值</el-button>
1c14d6 185         </template>
L 186       </el-table-column>
187     </el-table>
188     <!-- 分页 -->
189     <Pagination
190       :total="total"
191       v-model:page="queryParams.pageNo"
192       v-model:limit="queryParams.pageSize"
193       @pagination="getList"
194     />
195   </ContentWrap>
196
197   <!-- 表单弹窗：添加/修改 -->
198   <DaPointForm ref="formRef" @success="getList" />
199
3e5f6c 200   <!-- 历史值 -->
031c25 201   <DaPointChart ref="chartView" />
D 202
3e5f6c 203   <!-- 当前值 -->
潘 204   <DaPointValue ref="pointValue" />
205
206   <!-- 测点导入对话框 -->
031c25 207   <PointImportForm ref="importFormRef" @success="getList" />
1c14d6 208 </template>
L 209 <script lang="ts" setup>
210 import * as DaPoint from '@/api/data/da/point'
5d8c73 211 import {ref, reactive} from "vue";
031c25 212 import download from "@/utils/download";
d97202 213 import {DICT_TYPE, getDictOptions, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
031c25 214 import DaPointForm from './DaPointForm.vue'
D 215 import DaPointChart from './DaPointChart.vue'
3e5f6c 216 import DaPointValue from './DaPointValue.vue'
c52be7 217 import PointImportForm from './PointImportForm.vue'
1c14d6 218
85c27f 219 defineOptions({name: 'DataPoint'})
1c14d6 220
L 221   const message = useMessage() // 消息弹窗
222   const {t} = useI18n() // 国际化
223
224   const loading = ref(true) // 列表的加载中
225   const total = ref(0) // 列表的总页数
226   const list = ref([]) // 列表的数据
227   const queryParams = reactive({
228     pageNo: 1,
229     pageSize: 10,
230     pointNo: undefined,
231     pointName: undefined,
f33c52 232     pointType: undefined,
e9d8f9 233     tagNo: undefined,
d97202 234     collectQuality: undefined,
1c14d6 235   })
L 236   const queryFormRef = ref() // 搜索的表单
237
238   /** 查询列表 */
239   const getList = async () => {
240     loading.value = true
241     try {
242       const page = await DaPoint.getDaPointPage(queryParams)
243       list.value = page.list
244       total.value = page.total
245     } finally {
246       loading.value = false
247     }
248   }
249
250   /** 搜索按钮操作 */
251   const handleQuery = () => {
252     queryParams.pageNo = 1
253     getList()
031c25 254   }
D 255
3e5f6c 256   /** 查看历史值操作 */
031c25 257   const chartView  = ref()
D 258   const chartHandle = (raw: object) => {
259     chartView.value.open(raw)
1c14d6 260   }
L 261
3e5f6c 262 /** 查看当前值操作 */
潘 263 const pointValue  = ref()
264 const pointValueHandle = (raw: object) => {
265   pointValue.value.open(raw)
266 }
267
1c14d6 268   /** 重置按钮操作 */
L 269   const resetQuery = () => {
270     queryFormRef.value.resetFields()
271     handleQuery()
272   }
273
274   /** 添加/修改操作 */
275   const formRef = ref()
276   const openForm = (type: string, id?: number) => {
277     formRef.value.open(type, id)
278   }
279
280   /** 删除按钮操作 */
281   const handleDelete = async (id: number) => {
282     try {
283       // 删除的二次确认
284       await message.delConfirm()
285       // 发起删除
286       await DaPoint.deleteDaPoint(id)
287       message.success(t('common.delSuccess'))
288       // 刷新列表
289       await getList()
290     } catch {
291     }
292   }
031c25 293   /** 测点导入 */
D 294   const importFormRef = ref()
295   const handleImport = () => {
296     importFormRef.value.open()
297   }
1c14d6 298
031c25 299   /** 导出按钮操作 */
D 300   const exportLoading = ref(false)
301   const handleExport = async () => {
302     try {
303       // 导出的二次确认
304       await message.exportConfirm()
305       // 发起导出
306       exportLoading.value = true
307       const data = await DaPoint.exportDaPoint(queryParams)
813ce2 308       download.excel(data, '测点列表.xlsx')
031c25 309     } catch {
D 310     } finally {
311       exportLoading.value = false
312     }
313   }
5d8c73 314
J 315   let dataListSelections = reactive([])
316   // 多选
317   function selectionChangeHandle (val) {
318     dataListSelections = val
319   }
320   // 启用
321   async function enable() {
322     let ids = dataListSelections.map(item => {
323       return item.id
324     })
4d3aa7 325     // 二次确认
D 326     await message.confirm('确认要开启所选测点？')
5d8c73 327     await DaPoint.enable(ids)
J 328     message.success(t('common.enableSuccess'))
329     await getList()
330   }
331   // 禁用
332   async function disable(){
333     let ids = dataListSelections.map(item => {
334       return item.id
335     })
4d3aa7 336     // 二次确认
D 337     await message.confirm('确认要禁用所选测点？')
5d8c73 338     await DaPoint.disable(ids)
J 339     message.success(t('common.disableSuccess'))
340     await getList()
341   }
342
1c14d6 343   /** 初始化 **/
L 344   onMounted(async () => {
345     await getList()
346   })
347 </script>