1 // vue页面的操作
2 // vue页面中引入组件；组件放入components文件夹中
3 import pension from "@/components/CarWenShidu/echart.vue";
4 import pensionshidu from "@/components/CarWenShidu/echartshidu.vue";
5
6 // 向组件中传值 handleMethod 通过datecode进行赋值
7 <div><el-tag type="primary">车厢温度变化曲线</el-tag><pension :handleMethod ="datecode"/></div>
8
9 // 引入js接口api
10 import { listcode, getWenshidu, delWenshidu, addWenshidu, updateWenshidu } from "@/api/system/wenshidu";
11
12 // vue页面中调用接口传值
13 function getList() {
14 loading.value = true;
15 listcode(queryParams.value).then(response => {
16 wenshiduList.value = response.rows;
17 datecode.value = response.data
18 console.log(datecode.value)
19 console.log(response.data)
20 total.value = response.total;
21 loading.value = false;
22 });
23
24 //组件数据的接收
25 let wenducode = defineProps(['handleMethod'])
26 const showH1= false;
27 // 获取使用传入的数值
28 <h1 v-if="showH1">{{ wenducode }}</h1>
29 //数据的赋值
30 Data1.value = wenducode.handleMethod.wendu01;
31 Data2.value = wenducode.handleMethod.wendu02;
32 Data3.value = wenducode.handleMethod.wendu03;
33
34 //完整代码示例
35 <template>
36 <div class="app-container">
37 <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="auto">
38 <el-form-item label="车辆信息编码" prop="carCodeNumber">
39 <el-input
40 v-model="queryParams.carCodeNumber"
41 placeholder="请输入车辆信息编码"
42 clearable
43 @keyup.enter="handleQuery"
44 />
45 </el-form-item>
46 <el-form-item label="车厢温度记录时间" prop="carBoxWenduTime">
47 <el-date-picker clearable
48 v-model="queryParams.carBoxWenduTime"
49 type="date"
50 value-format="YYYY-MM-DD"
51 placeholder="请选择车厢温度记录时间">
52 </el-date-picker>
53 </el-form-item>
54 <el-form-item>
55 <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
56 <el-button icon="Refresh" @click="resetQuery">重置</el-button>
57 </el-form-item>
58 </el-form>
59
60 <!-- 添加或修改车厢信息温度，湿度对话框 -->
61 <el-dialog :title="title" v-model="open" width="500px" append-to-body>
62 <el-form ref="wenshiduRef" :model="form" :rules="rules" label-width="80px">
63 <el-form-item label="车辆信息编码" prop="carCodeNumber">
64 <el-input v-model="form.carCodeNumber" placeholder="请输入车辆信息编码" />
65 </el-form-item>
66 <el-form-item label="车厢温度记录时间" prop="carBoxWenduTime">
67 <el-date-picker clearable
68 v-model="form.carBoxWenduTime"
69 type="date"
70 value-format="YYYY-MM-DD"
71 placeholder="请选择车厢温度记录时间">
72 </el-date-picker>
73 </el-form-item>
74 </el-form>
75 <template #footer>
76 <div class="dialog-footer">
77 <el-button type="primary" @click="submitForm">确 定</el-button>
78 <el-button @click="cancel">取 消</el-button>
79 </div>
80 <div class="dialog-footer">
81 <div ref = "chart" style="width: 1000px; height: 400px;"></div>
82 </div>
83 </template>
84 </el-dialog>
85 <div><el-tag type="primary">车厢温度变化曲线</el-tag><pension :handleMethod="datecode"/></div>
86 <div><el-tag type="primary">车厢湿度变化曲线</el-tag><pensionshidu/></div>
87 </div>
88 </template>
89
90 <script setup name="Wenshidu">
91 import { listcode, getWenshidu, delWenshidu, addWenshidu, updateWenshidu } from "@/api/system/wenshidu";
92 import pension from "@/components/CarWenShidu/echart.vue";
93 import pensionshidu from "@/components/CarWenShidu/echartshidu.vue";
94
95
96
97
98 const { proxy } = getCurrentInstance();
99 let datecode = ref() ;//定义变量传值给组件
100 const wenshiduList = ref([123]);
101 const open = ref(false);
102 const loading = ref(true);
103 const showSearch = ref(true);
104 const ids = ref([]);
105 const single = ref(true);
106 const multiple = ref(true);
107 const total = ref(0);
108 const title = ref("");
109
110 const data = reactive({
111 form: {},
112 queryParams: {
113 pageNum: 1,
114 pageSize: 10,
115 carCodeNumber: null,
116 carBoxWenduTime: null,
117 carBoxWendu1: null,
118 carBoxWendu2: null,
119 carBoxWendu3: null,
120 carBoxWendu4: null,
121 carBoxWendu5: null,
122 carBoxWendu6: null,
123 carBoxWendu7: null,
124 carBoxWendu8: null,
125 carBoxShidu1: null,
126 carBoxShidu2: null,
127 carBoxShidu3: null,
128 carBoxShidu4: null,
129 carBoxShidu5: null,
130 carBoxShidu6: null,
131 carBoxShidu7: null,
132 carBoxShidu8: null,
133 companyId: null,
134 deptId: null,
135 createUserId: null,
136 updateUserId: null,
137 },
138 rules: {
139 }
140 });
141
142 const { queryParams, form, rules } = toRefs(data);
143
144 /** 查询车厢信息温度，湿度列表 */
145 function getList() {
146 loading.value = true;
147 listcode(queryParams.value).then(response => {
148 wenshiduList.value = response.rows;
149 datecode.value = response.data
150 total.value = response.total;
151 loading.value = false;
152 });
153 }
154
155 // 取消按钮
156 function cancel() {
157 open.value = false;
158 reset();
159 }
160
161 // 表单重置
162 function reset() {
163 form.value = {
164 carCodeNumber: null,
165 carBoxWenduTime: null,
166 carBoxWendu1: null,
167 carBoxWendu2: null,
168 carBoxWendu3: null,
169 carBoxWendu4: null,
170 carBoxWendu5: null,
171 carBoxWendu6: null,
172 carBoxWendu7: null,
173 carBoxWendu8: null,
174 carBoxShidu1: null,
175 carBoxShidu2: null,
176 carBoxShidu3: null,
177 carBoxShidu4: null,
178 carBoxShidu5: null,
179 carBoxShidu6: null,
180 carBoxShidu7: null,
181 carBoxShidu8: null,
182 objId: null,
183 companyId: null,
184 deptId: null,
185 createUserId: null,
186 createTime: null,
187 updateUserId: null,
188 updateTime: null,
189 delFlag: null
190 };
191 proxy.resetForm("wenshiduRef");
192 }
193
194 /** 搜索按钮操作 */
195 function handleQuery() {
196 queryParams.value.pageNum = 1;
197 getList();
198 }
199
200 /** 重置按钮操作 */
201 function resetQuery() {
202 proxy.resetForm("queryRef");
203 handleQuery();
204 }
205
206 // 多选框选中数据
207 function handleSelectionChange(selection) {
208 ids.value = selection.map(item => item.objId);
209 single.value = selection.length != 1;
210 multiple.value = !selection.length;
211 }
212
213 /** 新增按钮操作 */
214 function handleAdd() {
215 reset();
216 open.value = true;
217 title.value = "添加车厢信息温度，湿度";
218 }
219
220 /** 修改按钮操作 */
221 function handleUpdate(row) {
222 reset();
223 const _objId = row.objId || ids.value
224 getWenshidu(_objId).then(response => {
225 form.value = response.data;
226 open.value = true;
227 title.value = "修改车厢信息温度，湿度";
228 });
229 }
230
231 /** 提交按钮 */
232 function submitForm() {
233 proxy.$refs["wenshiduRef"].validate(valid => {
234 if (valid) {
235 if (form.value.objId != null) {
236 updateWenshidu(form.value).then(response => {
237 proxy.$modal.msgSuccess("修改成功");
238 open.value = false;
239 getList();
240 });
241 } else {
242 addWenshidu(form.value).then(response => {
243 proxy.$modal.msgSuccess("新增成功");
244 open.value = false;
245 getList();
246 });
247 }
248 }
249 });
250 }
251
252 /** 删除按钮操作 */
253 function handleDelete(row) {
254 const _objIds = row.objId || ids.value;
255 proxy.$modal.confirm('是否确认删除车厢信息温度，湿度编号为"' + _objIds + '"的数据项？').then(function() {
256 return delWenshidu(_objIds);
257 }).then(() => {
258 getList();
259 proxy.$modal.msgSuccess("删除成功");
260 }).catch(() => {});
261 }
262
263 /** 导出按钮操作 */
264 function handleExport() {
265 proxy.download('mqtts/wenshidu/export', {
266 ...queryParams.value
267 }, `wenshidu_${new Date().getTime()}.xlsx`)
268 }
269
270 getList();
271 </script>
272
273
274 //组件代码
275 <template>
276 <div class="dialog-footer">
277 <div ref="chart" style="width: 1000px; height: 400px;"> </div>
278 <h1 v-if="showH1">{{ wenducode }}</h1>
279 </div>
280 </template>
281
282 <script setup>
283 import { listcode } from "@/api/system/wenshidu";
284 import { ref, onMounted, reactive, watchEffect } from "vue";
285 import * as echarts from "echarts";
286
287 let constres = reactive([]);
288 const chart = ref();
289 const axisData = ['1 号车厢温度', '2 号车厢温度', '3 号车厢温度', '4 号车厢温度', '5 号车厢温度', '6 号车厢温度', '7 号车厢温度', '8 号车厢温度'];
290 //let xData = ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'];
291 let Data1 = ref([]);
292 let Data2 = ref([]);
293 let Data3 = ref([]);
294 let Data4 = ref([]);
295 let Data5 = ref([]);
296 let Data6 = ref([]);
297 let Data7 = ref([]);
298 let Data8 = ref([]);
299 let xData = ref([]);
300 let echart=null
301 const showH1= false;
302 let wenducode = defineProps(['handleMethod'])
303 const lineChart = () => {}
304 // 基于 dom,初始化 echarts 实例
305
306 // 绘制图表
307 // watchEffect(() => {
308 listcode().then(response => {
309 Data1.value = wenducode.handleMethod.wendu01;
310 Data2.value = wenducode.handleMethod.wendu02;
311 Data3.value = wenducode.handleMethod.wendu03;
312 Data4.value = wenducode.handleMethod.wendu04;
313 Data5.value = wenducode.handleMethod.wendu05;
314 Data6.value = wenducode.handleMethod.wendu06;
315 Data7.value = wenducode.handleMethod.wendu07;
316 Data8.value = wenducode.handleMethod.wendu08;
317 xData.value = wenducode.handleMethod.xData;
318
319 // 添加在这里
320 console.log(Data1.value);
321 // console.log(response);
322 echart.setOption({
323 // title: {
324 // text: '车厢温度变化',
325 // size:'1px'
326 // },
327 tooltip: {
328 trigger: 'axis'
329 },
330 legend: {
331 data: axisData
332 },
333 grid: {
334 left: '3%',
335 right: '4%',
336 bottom: '3%',
337 containLabel: true
338 },
339 toolbox: {
340 feature: {
341 saveAsImage: {}
342 }
343 },
344 xAxis: {
345 type: 'category',
346 boundaryGap: false,
347 data: xData.value
348 },
349 yAxis: {
350 type: 'value',
351 axisLabel: {
352 formatter: '{value} °C'
353 }
354 },
355
356 series: [
357
358 {
359 name: '1 号车厢温度',
360 type: 'line',
361 smooth: true, // 开启平滑过度
362 emphasis: { // 高亮选择
363 focus: "serice"
364 },
365 data: Data1.value
366 },
367 {
368 name: '2 号车厢温度',
369 type: 'line',
370 smooth: true, // 开启平滑过度
371 emphasis: { // 高亮选择
372 focus: "serice"
373 },
374 data: Data2.value
375 },
376 {
377 name: '3 号车厢温度',
378 type: 'line',
379 smooth: true, // 开启平滑过度
380 emphasis: { // 高亮选择
381 focus: "serice"
382 },
383 data: Data3.value
384 },
385 {
386 name: '4 号车厢温度',
387 type: 'line',
388 smooth: true, // 开启平滑过度
389 emphasis: { // 高亮选择
390 focus: "serice"
391 },
392 data: Data4.value
393 },
394 {
395 name: '5 号车厢温度',
396 type: 'line',
397 smooth: true, // 开启平滑过度
398 emphasis: { // 高亮选择
399 focus: "serice"
400 },
401 data: Data5.value
402 },
403 {
404 name: '6 号车厢温度',
405 type: 'line',
406 smooth: true, // 开启平滑过度
407 emphasis: { // 高亮选择
408 focus: "serice"
409 },
410 data: Data6.value
411 },
412 {
413 name: '7 号车厢温度',
414 type: 'line',
415 smooth: true, // 开启平滑过度
416 emphasis: { // 高亮选择
417 focus: "serice"
418 },
419 data: Data7.value
420 },
421 {
422 name: '8 号车厢温度',
423 type: 'line',
424 smooth: true, // 开启平滑过度
425 emphasis: { // 高亮选择
426 focus: "serice"
427 },
428 data: Data8.value
429 }
430 ]
431 },true);
432 });
433 onMounted(()=>{
434 echart = echarts.init(chart.value);
435 lineChart()
436 })
437 window.onresize = function () {
438 echart.resize();
439 };
440 // listcode();
441 // Data1 = reactive([1,5,6])
442 </script>
443 <style scoped></style>
标签：vue,const,true,value,车厢,vue3,组件,null,ref From： https://www.cnblogs.com/188221creat/p/18184157