工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
liriming
2025-03-03 8bb7160c9c4fd7ce5893ee673647b13cc35410ae
提交 | 用户 | 时间
c62768 1 <template>
c889d8 2   <el-row :gutter="20">
J 3     <el-col :span="3" :xs="24">
4       <ContentWrap class="h-1/1">
5         <el-tree
6           style="max-width: 600px"
7           :data="dataCategoryList"
8           :props="treeProps"
9           default-expand-all
10           highlight-current
11           @node-click="handleNodeClick"
12         />
13       </ContentWrap>
14     </el-col>
15     <el-col :span="21" :xs="24">
16       <!-- 搜索工作栏 -->
17       <ContentWrap>
18         <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px"
19                  label-width="68px">
20           <el-form-item label="指标编码" prop="itemNo">
21             <el-input v-model="queryParams.itemNo" class="!w-200px" clearable placeholder="请输入指标编码"
22                       @keyup.enter="handleQuery"/>
23           </el-form-item>
24           <el-form-item label="指标名称" prop="itemName">
25             <el-input v-model="queryParams.itemName" class="!w-200px" clearable placeholder="请输入指标名称"
26                       @keyup.enter="handleQuery"/>
27           </el-form-item>
28           <el-form-item label="指标类型" prop="itemType">
29             <el-select v-model="queryParams.itemType"  class="!w-200px" clearable placeholder="请选择指标类型">
30               <el-option
31                 v-for="dict in getStrDictOptions(DICT_TYPE.IND_ITEM_TYPE)"
32                 :key="dict.value"
33                 :label="dict.label"
34                 :value="dict.value"
35               />
36             </el-select>
37           </el-form-item>
38           <el-form-item>
39             <el-button @click="handleQuery">
40               <Icon class="mr-5px" icon="ep:search"/>
41               搜索
42             </el-button>
43             <el-button @click="resetQuery">
44               <Icon class="mr-5px" icon="ep:refresh"/>
45               重置
46             </el-button>
47             <el-button
48               v-hasPermi="['data:ind-item:create']"
49               plain
50               type="primary"
51               @click="openForm('create')"
52             >
53               <Icon class="mr-5px" icon="ep:plus"/>
54               新增
55             </el-button>
56           </el-form-item>
57         </el-form>
58       </ContentWrap>
c62768 59
c889d8 60       <!-- 列表 -->
J 61       <ContentWrap>
62         <el-table v-loading="loading" :data="list">
63           <el-table-column prop="itemNo" label="指标编码" header-align="center" align="center" min-width="70"/>
64           <el-table-column prop="itemName" label="指标名称" header-align="center" align="center" min-width="150"/>
65           <el-table-column prop="itemCategoryName" label="指标分类" header-align="center" align="center" min-width="80"/>
66           <el-table-column prop="itemType" label="指标类型" header-align="center" align="center" min-width="60">
67             <template #default="scope">
68               <dict-tag :type="DICT_TYPE.IND_ITEM_TYPE" :value="scope.row.itemType" />
69             </template>
70           </el-table-column>
71           <el-table-column prop="coefficient" label="系数" header-align="center" align="center" min-width="50"/>
72           <el-table-column prop="precision" label="指标精度" header-align="center" align="center" min-width="50"/>
73           <el-table-column prop="timeGranularity" label="时间粒度" header-align="center" align="center" min-width="50">
74             <template #default="scope">
75               <dict-tag :type="DICT_TYPE.TIME_GRANULARITY" :value="scope.row.timeGranularity" />
76             </template>
77           </el-table-column>
78           <el-table-column
79             :formatter="dateFormatter"
80             align="center"
81             label="创建时间"
82             prop="createTime"
83             width="200"/>
84           <el-table-column align="center" label="操作">
85             <template #default="scope">
86               <el-button
87                 v-hasPermi="['data:ind-item:update']"
88                 link
89                 type="primary"
90                 @click="openForm('update', scope.row)">
91                 修改
92               </el-button>
93               <el-button
94                 link
95                 type="primary"
96                 @click="getCurrentData(scope.row.itemNo)">
97                 当前值
331bbb 98               </el-button>
J 99               <el-button
100                 link
101                 type="primary"
102                 @click="getHistoryData(scope.row)">
103                 历史值
c889d8 104               </el-button>
J 105               <el-button
106                 v-hasPermi="['data:ind-item:delete']"
107                 link
108                 type="danger"
109                 @click="handleDelete(scope.row.id)">
110                 删除
111               </el-button>
112             </template>
113           </el-table-column>
114         </el-table>
115         <!-- 分页 -->
116         <Pagination
117           v-model:limit="queryParams.pageSize"
118           v-model:page="queryParams.pageNo"
119           :total="total"
120           @pagination="getList"
121         />
122       </ContentWrap>
123     </el-col>
124   </el-row>
125
c62768 126
J 127   <!-- 表单弹窗：添加/修改 -->
128   <AtomIndDefineForm ref="atomFormRef" @success="getList" />
129   <DerIndDefineForm ref="derFormRef" @success="getList" />
130   <CalIndDefineForm ref="calFormRef" @success="getList" />
131   <SelectItemType ref="itemTypeSel"/>
331bbb 132   <IndCurrentData ref="indCurrentData"/>
J 133   <IndHistoryChart ref="indHistoryChart"/>
c62768 134 </template>
J 135
136 <script lang="ts" setup>
2e092f 137   import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
c62768 138   import { dateFormatter } from '@/utils/formatTime'
J 139   import * as DataSetApi from '@/api/data/ind/data/data.set'
140   import AtomIndDefineForm from './AtomIndDefineForm.vue'
141   import DerIndDefineForm from './DerIndDefineForm.vue'
142   import CalIndDefineForm from './CalIndDefineForm.vue'
143   import SelectItemType from './selectItemType.vue'
144   import download from '@/utils/download'
145   import * as ItemApi from '@/api/data/ind/item/item'
146   import * as CategoryApi from "@/api/data/ind/category";
c889d8 147   import IndCurrentData from './IndCurrentData.vue'
331bbb 148   import IndHistoryChart from './IndHistoryChart.vue'
c889d8 149   import {handleTree} from "@/utils/tree";
J 150
c62768 151
9e6ba7 152   defineOptions({ name: 'IndItem' })
c62768 153
J 154   const message = useMessage() // 消息弹窗
155   const { t } = useI18n() // 国际化
156   const dataCategoryList = ref([] as CategoryApi.IndItemCategoryVO[])
157   const loading = ref(true) // 列表的加载中
158   const total = ref(0) // 列表的总页数
159   const list = ref([]) // 字典表格数据
160   const queryParams = reactive({
161     pageNo: 1,
162     pageSize: 10,
163     itemNo: '',
164     itemName: '',
165     itemType: '',
166     itemCategory: ''
167   })
168   const queryFormRef = ref() // 搜索的表单
169   const exportLoading = ref(false) // 导出的加载中
170
171   /** 查询字典类型列表 */
172   const getList = async () => {
173     loading.value = true
174     try {
175       const data = await ItemApi.getItemPage(queryParams)
176       list.value = data.list
177       total.value = data.total
178     } finally {
179       loading.value = false
180     }
c889d8 181   }
J 182
183   const getCategoryTree = async () => {
184     dataCategoryList.value = []
185     const res = await CategoryApi.getCategoryListAllSimple()
186     let category: Tree = {id: 0, label: '主类目', children: []}
187     category.children = handleTree(res, 'id', 'pid')
188     dataCategoryList.value.push(category)
c62768 189   }
J 190
191   /** 搜索按钮操作 */
192   const handleQuery = () => {
193     queryParams.pageNo = 1
194     getList()
195   }
196
197   /** 重置按钮操作 */
198   const resetQuery = () => {
199     queryFormRef.value.resetFields()
200     handleQuery()
201   }
202
203   /** 添加/修改操作 */
204   const atomFormRef = ref()
205   const derFormRef = ref()
206   const calFormRef = ref()
207   const itemTypeSel = ref()
208
209   const openForm = (type: string, row) => {
210     if(row !== null && row !==undefined){
211       if(row.itemType === 'ATOM'){
212         if (row.id){
213           atomFormRef.value.open(type,row.id)
214         }
215       }else if(row.itemType === 'CAL'){
216         if (row.id){
217           calFormRef.value.open(type,row.id)
218         }
219       }else if(row.itemType === 'DER'){
220         if (row.id){
221           derFormRef.value.open(type,row.id)
222         }
223       }
224     }else {
225       itemTypeSel.value.open(type)
226     }
c889d8 227   }
J 228   const indCurrentData = ref()
229   const getCurrentData = (itemNo: string) => {
230     indCurrentData.value.open(itemNo)
c62768 231   }
J 232
331bbb 233   const indHistoryChart = ref()
J 234   const getHistoryData = (raw: object) => {
235     indHistoryChart.value.open(raw)
236   }
237
c62768 238   /** 删除按钮操作 */
J 239   const handleDelete = async (id: number) => {
240     try {
241       // 删除的二次确认
242       await message.delConfirm()
243       // 发起删除
244       await ItemApi.deleteItem(id)
245       message.success(t('common.delSuccess'))
246       // 刷新列表
247       await getList()
248     } catch {}
249   }
250
c889d8 251   const handleNodeClick = (data: Tree) => {
J 252     if( data.id !== 0 ){
253       queryParams.itemCategory = String(data.id)
254     }else {
255       queryParams.itemCategory = ''
256     }
257     getList()
258   }
259
c62768 260   /** 初始化 **/
J 261   onMounted(() => {
262     getList()
c889d8 263     getCategoryTree()
c62768 264   })
J 265 </script>