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