邓洁: 传感器数据监控

src/components/content/airInfo/AirInfo.vue

@@ -61,6 +61,7 @@
 import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
+import {getEchartsInfo} from "../../../api/largeScreen";
 
 let myEcharts = reactive({});
 let myAirEcharts = reactive({});
@@ -69,6 +70,7 @@ const props = defineProps({
   airData: Array
 });
 const windSpeed = ref('')
+const windSpeedId = ref(0)
 const airTitle = ref('')
 const airList = ref([])
 const timeList = ref(["年", "月", "日"]);
@@ -91,19 +93,39 @@ watch(() => props.airData, (now) => {
     getAirInfo(now.sensorList)
   }
 }, {deep: true});
-const handleOpenChart = () => {
+const getChartInfo = (equipmentId) => {
-  isWindSpeedVisited.value = true
+  getEchartsInfo(equipmentId).then(res => {
-  nextTick(() => {
+    if (res?.code === 1000) {
-    initChart()
+      isWindSpeedVisited.value = true
+      nextTick(() => {
+        initChart(res.data.dates, res.data.values)
+      })
+    }
   })
 }
-const handleOpenAirChart = (item) => {
+const getGasChartInfo = (equipmentId) => {
-  isAirVisited.value = true
+  getEchartsInfo(equipmentId).then(res => {
-  airTitle.value = item.name
+    if (res?.code === 1000) {
-  nextTick(() => {
+      isAirVisited.value = true
-    initAirChart()
+      nextTick(() => {
+        initAirChart(res.data.dates, res.data.values)
+      })
+    }
   })
 }
+const handleOpenChart = () => {
+  // isWindSpeedVisited.value = true
+  getChartInfo(windSpeedId.value)
+}
+
+const handleOpenAirChart = (item) => {
+  // isAirVisited.value = true
+  airTitle.value = item.name
+  getGasChartInfo(item.equipmentId)
+  // nextTick(() => {
+  //   initAirChart()
+  // })
+}
 const timeSelect = (index) => {
   console.log('选择时间', index)
   if (index === 0) {
@@ -146,13 +168,14 @@ const getAirInfo = (now) => {
       airObj = changeData(item)
       airArr.push(airObj)
     } else if (item.equipmentType === "windSpeed") {
+      windSpeedId.value = item.equipmentId
       windSpeed.value = item.value
     }
   })
   airArr.push(airArr.shift())
   airList.value = airArr
 }
-const initChart = () => {
+const initChart = (type, values) => {
   //3.初始化container容器
   myEcharts = echarts.init(document.getElementById('containerWind'));
   //5.传入数据
@@ -190,8 +213,8 @@ const initChart = () => {
         let content = `
           <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
             <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
-            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="color: #FFFFFF">进风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
-            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
+            <div style="font-size: 48px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;margin-top: 30px"><span style="color: #FFFFFF">出风口: </span><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[1].value}</span></div>
           </div>`;
         return content;
       },
@@ -211,7 +234,8 @@ const initChart = () => {
     //X轴
     xAxis: {
       type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+      // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+      data:type,
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -232,7 +256,8 @@ const initChart = () => {
     //配置项
     series: [
       {
-        data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
+        // data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
+        data:values,
         type: 'line',
         smooth: true,
         symbolSize: 24,
@@ -249,7 +274,7 @@ const initChart = () => {
     myEcharts.resize();
   }
 }
-const initAirChart = () => {
+const initAirChart = (type, values) => {
   //3.初始化container容器
   myAirEcharts = echarts.init(document.getElementById('containerAir'));
   //5.传入数据
@@ -284,7 +309,7 @@ const initAirChart = () => {
         let content = `
           <div style="background: linear-gradient(180deg, #254062 0%, rgba(20,36,51,0.3) 100%);;border: 2px solid #6087BA;border-radius: 4px;padding: 8px 16px;">
             <div style="font-size: 52px;font-family: PingFang SC-Regular, PingFang SC;font-weight: 400;color: #EFEEEE;margin-bottom: 8px;">${params[0].name}</div>
-            <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
+            <div style="font-size: 52px;line-height: 48px;font-family: Bebas Neue-Regular, Bebas Neue;font-weight: 400;"><span style="background: linear-gradient(180deg, #F5B85F 0%, #FFFFFF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
           </div>`;
         return content;
       },
@@ -304,7 +329,8 @@ const initAirChart = () => {
     //X轴
     xAxis: {
       type: 'category',
-      data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+      // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+      data:type,
       axisLabel: {
         textStyle: {
           fontSize: 45,
@@ -325,7 +351,8 @@ const initAirChart = () => {
     //配置项
     series: [
       {
-        data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+        // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+        data:values,
         type: 'line',
         smooth: true,
         symbolSize: 24,
@@ -385,8 +412,9 @@ const initAirChart = () => {
       .input-fan {
         //margin: 0 26px;
 
-        > span:last-child {
+        > span:first-child {
           margin-left: 25px;
+          margin-right: 25px;
         }
       }
     }

src/components/content/usedEle/UsedEle.vue

@@ -60,8 +60,9 @@ let myEcharts = reactive({});
 const isVisited = ref(false);
 const eleData = ref([])
 const electricityConsumptionMonthly = ref()
-const monthlySavings = ref(55555)
+const monthlySavings = ref(5)
-const valueA = ref(electricityConsumptionMonthly.value);
+const length = ref(null);
+const valueA = ref();
 const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
     isVisited.value
@@ -70,6 +71,7 @@ const bgImage = computed(() =>
 );
 watch(() => props.eleData, (now) => {
   getBasicData(now.frequencyChangerList)
+  // setValue()
 }, {deep: true});
 watch(() => props.list, (now) => {
   eleData.value.forEach(item => {
@@ -84,7 +86,23 @@ watch(() => props.list, (now) => {
       }
     })
   })
+  // setValue()
 }, {deep: true});
+onMounted(()=>{
+  // setValue()
+})
+const setValue=()=> {
+  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
+  console.log('width',electricityConsumptionMonthly.value,width)
+  valueA.value.style.height = `${width}px`;
+  // let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
+  // point.value.style.left = `${flag}px`;
+  // if (width >= flag) {
+  //   value.value.style.background = "#F53839";
+  // } else {
+  //   value.value.style.background = "#60DDDE";
+  // }
+}
 const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []