工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-11-27 fd13b0017518273406ee1a9906c07d079e4a9ac4
提交 | 用户 | 时间
23beab 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       :inline="true"
10       :model="dataForm"
11       @keydown.enter="getDataList()"
12     >
13       <el-form-item>
14         <el-date-picker
15           v-model="dataForm.startTime"
16           type="datetime"
17           format="YYYY-MM-DD HH:mm:ss"
18           value-format="YYYY-MM-DD HH:mm:ss"
19           placeholder="选择日期时间"
20         />
21       </el-form-item>
22       <el-form-item>
23         <el-date-picker
24           v-model="dataForm.endTime"
25           type="datetime"
26           format="YYYY-MM-DD HH:mm:ss"
27           value-format="YYYY-MM-DD HH:mm:ss"
28           placeholder="选择日期时间"
29         />
30       </el-form-item>
31       <el-form-item>
32         <el-button @click="getDataList()">查询</el-button>
33       </el-form-item>
34       <el-form-item>
35         <el-button
36           type="success"
37           plain
38           @click="handleExport"
39           :loading="exportLoading"
40           v-hasPermi="['data:point:export']"
41         >
cfec18 42           <Icon icon="ep:download"/>
潘 43           导出
23beab 44         </el-button>
潘 45       </el-form-item>
46     </el-form>
3f10e7 47     <div ref="chartDomPlan" class="result-chart"  v-loading="loading"></div>
23beab 48   </el-dialog>
潘 49 </template>
50
51 <script lang="ts" setup>
52 import {ref} from 'vue';
53 import * as echarts from 'echarts';
54 import * as ItemApi from '@/api/data/plan/item'
55 import download from "@/utils/download";
cfec18 56
23beab 57 const message = useMessage() // 消息弹窗
潘 58 const visible = ref(false);
59 const chartDomPlan = ref(null);
60 let myChart = null;
61 const dataForm = ref({
62   id: "",
63   itemNo: "",
64   itemName: "",
65   startTime: getYMDHMS(),
66   endTime: undefined,
67 });
68 const queryParams = reactive({
69   itemNos: [],
70   start: undefined,
71   end: undefined,
72 })
3f10e7 73 const loading = ref(true) // 列表的加载中
cfec18 74
23beab 75 function getYMDHMS() {
潘 76   let timestamp = new Date().getTime();
77   let time = new Date(timestamp - 1000 * 60 * 60 * 3);
78   let year = time.getFullYear();
79   let month = (time.getMonth() + 1).toString();
80   let date = time.getDate().toString();
81   let hours = time.getHours().toString();
82   let minute = time.getMinutes().toString();
83
84   if (month < 10) {
85     month = "0" + month;
86   }
87   if (date < 10) {
88     date = "0" + date;
89   }
90   if (hours < 10) {
91     hours = "0" + hours;
92   }
93   if (minute < 10) {
94     minute = "0" + minute;
95   }
96
97   return (
98     year +
99     "-" +
100     month +
101     "-" +
102     date +
103     " " +
104     hours +
105     ":" +
106     minute +
107     ":" +
108     "00"
109   );
110 }
cfec18 111
23beab 112 /** 打开弹窗 */
潘 113 const open = async (row: object) => {
114   visible.value = true
115   dataForm.value.id = row.id;
116   dataForm.value.itemNo = row.itemNo;
117   dataForm.value.itemName = row.itemName;
118   dataForm.value.startTime = getYMDHMS();
119   dataForm.value.endTime = "";
120   getDataList();
121 }
122
123 defineExpose({open}) // 提供 open 方法，用于打开弹窗
124
125 async function getDataList() {
126   visible.value = true;
3f10e7 127   loading.value = true
23beab 128   if (dataForm.value.id) {
潘 129     try {
cfec18 130       queryParams.itemNos = [dataForm.value.itemNo];
23beab 131       queryParams.start = dataForm.value.startTime;
潘 132       queryParams.end = dataForm.value.endTime;
133       const data = await ItemApi.getPlanChart(queryParams)
3f10e7 134       loading.value = false
23beab 135       let seriesData = []
潘 136       data.series.forEach(item => {
137         seriesData.push({
138           name: item.name,
139           type: "line",
140           data: item.data,
141           showSymbol: true,
142           smooth: false,
143           lineStyle: {
144             normal: {
145               color: "#5B8FF9",
146               width: 1,
147             },
148           },
149         });
150       })
151
152       myChart = echarts.init(chartDomPlan.value);
153       const option = {
154         title: {
155           text: dataForm.value.itemName,
156           top: 0,
157           left: "1%",
158           textStyle: {
159             fontSize: 14,
160           },
161         },
162         tooltip: {
163           trigger: "axis",
164           axisPointer: {
165             type: "line",
166             lineStyle: {
167               color: "#cccccc",
168               width: "1",
169               type: "dashed",
170             },
171           },
172         },
173         legend: {
174           show: false,
175           top: 10,
176         },
177         grid: {
178           top: 30,
179           left: "3%",
180           right: "5%",
181           bottom: 10,
182           containLabel: true,
183         },
184         xAxis: {
185           type: "category",
186           boundaryGap: false,
187           data: data.categories,
188         },
189         yAxis: {
190           type: "value",
191         },
192         dataZoom: [
193           {
194             type: "inside",
195           },
196         ],
197         series: seriesData,
198       };
199       myChart.setOption(option);
200     } catch (error) {
201       console.error(error)
202     }
203   }
204 }
cfec18 205
23beab 206 /** 导出按钮操作 */
潘 207 const exportLoading = ref(false)
208 const handleExport = async () => {
cfec18 209   queryParams.itemNo = dataForm.value.itemNo;
23beab 210   queryParams.start = dataForm.value.startTime;
潘 211   queryParams.end = dataForm.value.endTime;
212   try {
213     // 导出的二次确认
214     await message.exportConfirm()
215     // 发起导出
216     exportLoading.value = true
217     const data = await ItemApi.exportPlanValue(queryParams)
cfec18 218     download.excel(data, '计划数据.xlsx')
23beab 219   } catch {
潘 220   } finally {
221     exportLoading.value = false
222   }
223 }
224 </script>
225 <style>
226 .el-select {
227   width: 100%;
228 }
229
230 .result-chart {
231   height: 500px;
232 }
233 </style>