工业互联网平台前端 vue3版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-11-27 fd13b0017518273406ee1a9906c07d079e4a9ac4
提交 | 用户 | 时间
031c25 1 <template>
D 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     >
93ce03 13       <el-form-item label="开始时间">
031c25 14         <el-date-picker
93ce03 15           size="mini"
031c25 16           v-model="dataForm.startTime"
854c42 17           format="YYYY-MM-DD HH:mm:00"
D 18           value-format="YYYY-MM-DD HH:mm:00"
031c25 19           type="datetime"
93ce03 20           :clearable="false"
D 21           placeholder="选择日期时间"/>
031c25 22       </el-form-item>
93ce03 23       <el-form-item label="结束时间">
031c25 24         <el-date-picker
93ce03 25           size="mini"
031c25 26           v-model="dataForm.endTime"
0d21bc 27           format="YYYY-MM-DD HH:mm:00"
D 28           value-format="YYYY-MM-DD HH:mm:00"
031c25 29           type="datetime"
93ce03 30           :clearable="false"
D 31           placeholder="选择日期时间"/>
031c25 32       </el-form-item>
D 33       <el-form-item>
34         <el-button @click="getDataList()">查询</el-button>
35       </el-form-item>
36       <el-form-item>
37         <el-button
38           type="success"
39           plain
40           @click="handleExport"
41           :loading="exportLoading"
42           v-hasPermi="['data:point:export']"
43         >
d5e559 44           <Icon icon="ep:download"/>
潘 45           导出
031c25 46         </el-button>
D 47       </el-form-item>
48     </el-form>
3f10e7 49     <div ref="chartDom" class="result-chart" v-loading="loading"></div>
031c25 50   </el-dialog>
D 51 </template>
52
53 <script lang="ts" setup>
d5e559 54 import {ref} from 'vue';
潘 55 import * as echarts from 'echarts';
56 import * as DaPoint from '@/api/data/da/point/daPointChart'
57 import {getYMDHM0} from "@/utils/dateUtil"
58 import download from "@/utils/download";
031c25 59
d5e559 60 const message = useMessage() // 消息弹窗
潘 61 const visible = ref(false);
62 const chartDom = ref(null);
63 let myChart = null;
64 const chartParams = reactive({
65   codes: [],
66   pointNo: undefined,
67   startDate: undefined,
68   endDate: undefined,
69 })
70 const dataForm = ref({
71   id: "",
72   pointNo: "",
73   pointName: "",
74   pointTypeName: "",
75   startTime: getYMDHM0(new Date() - 60 * 60 * 1000),
76   endTime: "",
77 });
031c25 78
d5e559 79 /** 打开弹窗 */
潘 80 const open = async (row: object) => {
81   visible.value = true
82   dataForm.value.id = row.id;
83   dataForm.value.pointNo = row.pointNo;
84   dataForm.value.pointName = row.pointName;
85   getDataList();
86 }
031c25 87
d5e559 88 defineExpose({open}) // 提供 open 方法，用于打开弹窗
031c25 89
e0b3e4 90   const loading = ref(false)
031c25 91   async function getDataList() {
D 92     visible.value = true;
3f10e7 93     loading.value = true
031c25 94     if (dataForm.value.id) {
D 95       try {
c9ff29 96         chartParams.codes=[dataForm.value.pointNo];
D 97         chartParams.startDate = dataForm.value.startTime;
98         chartParams.endDate = dataForm.value.endTime;
99         const data = await DaPoint.getPointDaChart(chartParams)
3f10e7 100         loading.value = false
c4b4d2 101         let seriesData = []
潘 102         data.series.forEach(item => {
103           seriesData.push({
104             name: item.name,
105             type: "line",
106             data: item.data,
107             showSymbol: true,
108             smooth: false,
109             lineStyle: {
110               normal: {
111                 color: "#5B8FF9",
112                 width: 1,
113               },
031c25 114             },
c4b4d2 115           });
潘 116         })
117
d5e559 118       myChart = echarts.init(chartDom.value);
潘 119       const option = {
120         title: {
121           text: dataForm.value.pointName,
122           top: 0,
123           left: "1%",
124           textStyle: {
125             fontSize: 14,
126           },
127         },
128         tooltip: {
129           trigger: "axis",
130           axisPointer: {
131             type: "line",
132             lineStyle: {
133               color: "#cccccc",
134               width: "1",
135               type: "dashed",
031c25 136             },
D 137           },
d5e559 138         },
潘 139         legend: {
140           show: false,
141           top: 10,
142         },
143         grid: {
144           top: 30,
145           left: "3%",
146           right: "5%",
147           bottom: 10,
148           containLabel: true,
149         },
150         xAxis: {
151           type: "category",
152           boundaryGap: false,
153           data: data.categories,
154         },
155         yAxis: {
156           type: "value",
157         },
158         dataZoom: [
159           {
160             type: "inside",
031c25 161           },
d5e559 162         ],
潘 163         series: seriesData,
164       };
165       myChart.setOption(option);
166     } catch (error) {
167       console.error(error)
031c25 168     }
D 169   }
d5e559 170 }
潘 171
172 /** 导出按钮操作 */
173 const exportLoading = ref(false)
174 const handleExport = async () => {
175   try {
176     // 导出的二次确认
177     await message.exportConfirm()
178     // 发起导出
179     exportLoading.value = true
180     const data = await DaPoint.exportDaPointValue({
181       pointNo: dataForm.value.pointNo,
182       start: dataForm.value.startTime,
183       end: dataForm.value.endTime
184     })
185     download.excel(data, dataForm.value.pointName + '.xls')
186   } catch {
187   } finally {
188     exportLoading.value = false
031c25 189   }
d5e559 190 }
031c25 191 </script>
D 192 <style>
d5e559 193 .el-select {
潘 194   width: 100%;
195 }
031c25 196
d5e559 197 .result-chart {
潘 198   height: 500px;
199 }
031c25 200 </style>