选煤厂生产管理平台前端代码
dongyukun
2024-12-11 121bafb30d19c8951812713f6a81d440d1149a97
提交 | 用户 | 时间
5cc1d9 1 <template>
D 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="开始时间">
12         <el-date-picker
13           size="mini"
14           v-model="queryParams.startTime"
15           format="YYYY-MM-DD HH:mm:00"
16           value-format="YYYY-MM-DD HH:mm:00"
17           type="datetime"
18           :clearable="false"
19           placeholder="选择日期时间"/>
20       </el-form-item>
21       <el-form-item label="结束时间">
22         <el-date-picker
23           size="mini"
24           v-model="queryParams.endTime"
25           format="YYYY-MM-DD HH:mm:00"
26           value-format="YYYY-MM-DD HH:mm:00"
27           type="datetime"
28           :clearable="false"
29           placeholder="选择日期时间"/>
30       </el-form-item>
31       <el-form-item label="系统名称" prop="xt">
32         <el-select
33           v-model="queryParams.xt"
34           class="!w-240px"
35           clearable
36           placeholder="请选择系统名称"
37         >
38           <el-option
39             v-for="dict in getIntDictOptions(DICT_TYPE.PMS_XT)"
40             :key="dict.value"
41             :label="dict.label"
42             :value="dict.value"
43           />
44         </el-select>
45       </el-form-item>
46       <el-form-item>
47         <el-button @click="handleQuery">
48           <Icon icon="ep:search" class="mr-5px" />
49           搜索
50         </el-button>
51         <el-button @click="resetQuery">
52           <Icon icon="ep:refresh" class="mr-5px" />
53           重置
54         </el-button>
55         <el-button
56           type="primary"
57           plain
58           @click="openForm('create')"
59           v-hasPermi="['data:point:create']"
60         >
61           <Icon icon="ep:plus" class="mr-5px" />
62           新增
63         </el-button>
64         <el-button
65           type="warning"
66           plain
67           @click="handleImport"
68           v-hasPermi="['data:point:import']"
69         >
70           <Icon icon="ep:upload" /> 导入
71         </el-button>
72         <el-button
73           type="success"
74           plain
75           @click="handleExport"
76           :loading="exportLoading"
77           v-hasPermi="['data:point:export']"
78         >
79           <Icon icon="ep:download" />导出
80         </el-button>
81       </el-form-item>
82     </el-form>
83   </ContentWrap>
84
85   <!-- 列表 -->
86   <ContentWrap>
87     <el-table border stripe v-loading="loading" :data="list">
88       <el-table-column type="index" header-align="center" align="center" min-width="50" label="序号"/>
89       <el-table-column prop="lsh" header-align="center" align="center" label="流水号" min-width="250"/>
90       <el-table-column prop="rq" header-align="center" align="center" label="日期" min-width="200"/>
91       <el-table-column prop="bcName" header-align="center" align="center" label="班次" min-width="200"/>
92       <el-table-column prop="xtName" header-align="center" align="center" label="系统" min-width="300"/>
93       <el-table-column prop="nbdrl" header-align="center" align="center" label="电耗" min-width="200">
94         <template #default="scope"><span v-if="Number(scope.row.nbdrl) ===  Number('-2')" style="color: red;">电耗通讯中断</span>
95           <span v-else>{{ scope.row.nbdrl }}</span></template>
96       </el-table-column>
97       <el-table-column label="操作" fixed="right" header-align="center" align="center" width="160">
98         <template #default="scope">
99           <el-button type="text" size="small"
100                      @click="showDet(scope.row.id)">电耗明细</el-button>
101         </template>
102       </el-table-column>
103     </el-table>
104     <!-- 分页 -->
105     <Pagination
106       :total="total"
107       v-model:page="queryParams.pageNo"
108       v-model:limit="queryParams.pageSize"
109       @pagination="getList"
110     />
111   </ContentWrap>
112   <!--电耗明细-->
113   <Form ref="formRef"/>
114 </template>
115 <script lang="ts" setup>
116   import * as PowerConsume from '@/api/prod/powerConsume'
117   import {ref} from "vue";
118   import download from "@/utils/download";
119   import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
120
121   defineOptions({name: 'PowerConsume'})
122
123   const message = useMessage() // 消息弹窗
124   const {t} = useI18n() // 国际化
125
126   const loading = ref(true) // 列表的加载中
127   const total = ref(0) // 列表的总页数
128   const list = ref([]) // 列表的数据
129   const queryParams = reactive({
130     pageNo: 1,
131     pageSize: 10,
132     startDate: undefined,
133     endDate: undefined,
134     xt: undefined
135   })
136   const queryFormRef = ref() // 搜索的表单
137
138   /** 查询列表 */
139   const getList = async () => {
140     loading.value = true
141     try {
142       const page = await PowerConsume.getPowerConsumePage(queryParams)
143       list.value = page.list
144       total.value = page.total
145     } finally {
146       loading.value = false
147     }
148   }
149
150   /** 搜索按钮操作 */
151   const handleQuery = () => {
152     queryParams.pageNo = 1
153     getList()
154   }
155
156   /** 查看数据操作 */
157   const chartView  = ref()
158   const chartHandle = (raw: object) => {
159     chartView.value.open(raw)
160   }
161
162   /** 重置按钮操作 */
163   const resetQuery = () => {
164     queryFormRef.value.resetFields()
165     handleQuery()
166   }
167
168   /** 添加/修改操作 */
169   const formRef = ref()
170   const openForm = (type: string, id?: number) => {
171     formRef.value.open(type, id)
172   }
173
174   /** 删除按钮操作 */
175   const handleDelete = async (id: number) => {
176     try {
177       // 删除的二次确认
178       await message.delConfirm()
179       // 发起删除
180       await PowerConsume.deletePowerConsume(id)
181       message.success(t('common.delSuccess'))
182       // 刷新列表
183       await getList()
184     } catch {
185     }
186   }
187   /** 测点导入 */
188   const importFormRef = ref()
189   const handleImport = () => {
190     importFormRef.value.open()
191   }
192
193   /** 导出按钮操作 */
194   const exportLoading = ref(false)
195   const handleExport = async () => {
196     try {
197       // 导出的二次确认
198       await message.exportConfirm()
199       // 发起导出
200       exportLoading.value = true
201       const data = await PowerConsume.exportPowerConsume(queryParams)
202       download.excel(data, '测点列表.xlsx')
203     } catch {
204     } finally {
205       exportLoading.value = false
206     }
207   }
208   /** 初始化 **/
209   onMounted(async () => {
210     await getList()
211   })
212 </script>