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