From bab83405c39ae9ab8b6569ca29b1e9a6a3b04327 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期二, 08 八月 2023 09:50:10 +0800
Subject: [PATCH] 油烟监测 vue代码
---
src/test/TestSelect.vue | 244 +++++++++---------------------------------------
1 files changed, 48 insertions(+), 196 deletions(-)
diff --git a/src/test/TestSelect.vue b/src/test/TestSelect.vue
index 0f57761..6273f74 100644
--- a/src/test/TestSelect.vue
+++ b/src/test/TestSelect.vue
@@ -1,208 +1,60 @@
-<!-- 鑷姩浠庢帴鍙ｈ幏鍙栨暟鎹� 鐢熸垚浠〃鐩� -->
-
-<script lang="ts">
-import axios from 'axios';
-import * as echarts from 'echarts';
-
-export default {
- data() {
- return {
- loading:false,
- smogData: [
- // {
- // "time": "2023-06-24 13:23",
- // "value": 0.04,
- // "mnCode": "31011020175002"
- // },
- // {
- // "time": "2023-06-24 00:42",
- // "value": 0.04,
- // "mnCode": "31011020175004"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.06,
- // "mnCode": "31011020175008"
- // },
- // {
- // "time": "2023-06-24 13:38",
- // "value": 0.66,
- // "mnCode": "64480047078091"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.8,
- // "mnCode": "31011020175006"
- // },
- // {
- // "time": "2023-06-24 13:38",
- // "value": 0.69,
- // "mnCode": "64480047078099"
- // },
- // {
- // "time": "2023-05-24 20:39",
- // "value": 0.8,
- // "mnCode": "31011020175026"
- // },
-
- ],//浠庡悗绔斁鍥炵殑鍊�
- chartData: [], //浠庡浘鍍忚繑鍥炵殑鍊�
- };
- },
- mounted() {
- this.loading = true
- //鑷姩鑾峰彇鎺ュ彛鍏ㄩ儴鏁版嵁
- axios.get('https://fyami.com.cn/device/min/value/real_time', { params: { "page": 1, "per_page": 20 } }).then((result) => {
- this.smogData = result.data.data
- console.log(this.smogData);
- this.loading = false
- });
-
-
- },
-
- methods: {
- showMore(){
- this.smogData.forEach((device) => {
- const chartDom = document.querySelector(`#chart-${device.mnCode}`) //鏍规嵁閫夋嫨鍣ㄨ幏鍙栧厓绱狅紝骞朵笖鍙繑鍥炲厓绱犱腑鐨勭涓�涓�
- const chart = echarts.init(chartDom)
-
- this.chartData = {
- value: device.value,
- axisLabel: {
- show: true,
- textStyle: {
- color: '#666'
- },
- formatter: function (value) {
- return value;
- }
- },
- detail: {
- formatter: function (value) {
- return value + 'mg/m鲁';
- },
- textStyle: {
- fontSize: 10,
- fontWeight: 'bold'
- },
- offsetCenter: [0, '30%']
- },
- title: {
- show: true,
- text: '璁惧娌圭儫娴撳害',
- textStyle: {
- color: '#999',
- fontSize: 14
- },
- offsetCenter: [0, '-30%']
- },
- axisLine: {
- lineStyle: {
- width: 10,
- color: [
- [0.2, '#67e0e3'],
- [0.8, '#37a2da'],
- [1, '#fd666d']
- ]
- }
- },
- splitLine: {
- show: true,
- length: 10,
- lineStyle: {
- color: 'auto',
- }
- },
- axisTick: {
- show: true,
- length: 15,
- lineStyle: {
- color: 'auto',
- }
- }
- };
-
- chart.setOption({
- tooltip: {
- formatter: '{a}: <br/> {c}mg/m鲁'
- },
- series: [
- {
- name: '娌圭儫娴撳害',
- type: 'gauge',
- min: 0,
- max: 2,
- splitNumber: 10,
- axisLabel: this.chartData.axisLabel,
- detail: this.chartData.detail,
- data: [{ value: this.chartData.value, name: '' }],
- title: this.chartData.title,
- axisLine: this.chartData.axisLine,
- splitLine: this.chartData.splitLine,
- axisTick: this.chartData.axisTick
- }
- ]
- });
- })
- }
-
+<!-- <script >
+import {store} from '../utils/status.js'
+ export default {
+ data() {
+ return{
+ store
+ }
},
- }
+ methods: {
+
+ }
+}
</script>
<template>
- <div style="margin: 5px;">
- <span style="color: #b1b3b8;" >瀹炴椂鏁版嵁</span>
- </div>
-
- <hr style="margin-top: 10px;"/>
-
- <div >
- <el-button @click="showMore" style="margin-top: 20px;margin-left: 20px">灞曠ず</el-button>
-
- </div>
- <div v-loading="loading" >
- <!-- 鏍规嵁璁惧缂栧彿涓暟鍔ㄦ�佺敓鎴愪华琛ㄧ洏 -->
- <el-row :gutter="20">
- <el-col :span="12" v-for="device in smogData" :key="device.mnCode">
- <div class="chart-container">
- <div class="chart-title">璁惧{{ device.mnCode }}</div>
- <div class="chart-content">
- <div :id="'chart-' + device.mnCode" class="chartClass"></div>
- </div>
- <div>
- <span>娴撳害鍊间负锛歿{ device.value }}</span>
- <br/>
- 浜х敓鏃堕棿:{{ device.time}}
- </div>
- </div>
- <!-- <br v-if="index % 4 == 0"/> -->
- </el-col>
- </el-row>
+ <div>
+ <el-button @click="store.increment()">澧炲姞</el-button>
+ <div>count:{{ store.count }}</div>
</div>
</template>
-
-
-
<style lang="scss" scoped>
-.chart-container {
- background-color: #f9f9f9;
- padding: 20px;
- border-radius: 4px;
-}
-.chart-title {
- font-size: 16px;
- font-weight: 600;
-}
+</style> -->
-.chart-content {
- margin-top: 10px;
-}
+<!-- <script setup>
-.chartClass {
- height: 300px;
+import { useMouse } from '../utils/status1.js'
+const { x, y } = useMouse()
+
+</script> -->
+
+<template>
+Mouse position is at: {{ x }}, {{ y }}
+<div>{{ c }}</div>
+<div>{{ d }}</div>
+</template>
+
+<script >
+import { useMouse } from '../utils/status1.js'
+export default {
+ setup() {
+ const { x, y } = useMouse()
+ return { x, y }
+ },
+ data(){
+ return{
+ c:'濂界殑',
+ d:1
+ }
+ },
+ watch:{
+ x(){
+ this.d = this.x
+ }
+ }
+
}
-</style>
\ No newline at end of file
+</script>
+
--
Gitblit v1.9.3