邓洁: 传感器数据监控

2023-12-22 23:33:48 +08:00
parent 267ef35001
commit e2b1ef3845
2 changed files with 67 additions and 21 deletions
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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 = () => {
-  isWindSpeedVisited.value = true
-  nextTick(() => {
-    initChart()
+const getChartInfo = (equipmentId) => {
+  getEchartsInfo(equipmentId).then(res => {
+    if (res?.code === 1000) {
+      isWindSpeedVisited.value = true
+      nextTick(() => {
+        initChart(res.data.dates, res.data.values)
+      })
+    }
  })
 }
-const handleOpenAirChart = (item) => {
-  isAirVisited.value = true
-  airTitle.value = item.name
-  nextTick(() => {
-    initAirChart()
+const getGasChartInfo = (equipmentId) => {
+  getEchartsInfo(equipmentId).then(res => {
+    if (res?.code === 1000) {
+      isAirVisited.value = true
+      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;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;"><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%);-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;
        }
      }
    }
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/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 valueA = ref(electricityConsumptionMonthly.value);
+const monthlySavings = ref(5)
+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 = []