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