feat : 电流、有毒气体和传感器echarts按日月年监控数据

src/components/content/airInfo/AirInfo.vue

@@ -1,32 +1,32 @@
 <template>
   <div id="air-info">
     <div style="height: 21px" v-if="airList.length!==0"></div>
-    <div  class="fan-speed">
-     <div v-if="windSpeed!==0">
-       <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
-       <div class="fan-info" @click="handleOpenChart">
-         <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
-       </div>
-     </div>
-      <div class="fan-info">
-        <div class="input-fan"><span>风向</span>{{ windDirection }}°</div>
+    <div class="fan-speed">
+      <div>
+        <img src="@/assets/images/airInfo/fan-v-icon.png" alt=""/>
+        <div class="fan-info" @click="handleOpenChart(windSpeedId)">
+          <div class="input-fan"><span>风速</span>{{ windSpeed }}m/s</div>
+        </div>
+      </div>
+      <div class="wind-direction-info" @click="handleOpenChart(windDirectionSpeedId)">
+        <div class="input-fan"><span>风向</span>{{ windDirection }} °</div>
       </div>
     </div>
     <item-info
         v-for="(item,index) in airList"
         :key="index"
         :wp="item"
-        @click="handleOpenAirChart(item)"
+        @click="handleOpenChart(item,'air')"
     />
     <div style="height: 1px" v-if="airList.length!==0"></div>
     <div class="digital-tunnel">
-      <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="'风速监控数据'" width="2175px"
+      <el-dialog :close-on-click-modal="false" v-model="isWindSpeedVisited" :title="dialogTitle+'监控数据'" width="2175px"
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
         <div class="loading-block" v-if="showSpeedLoading">
           <div class="loading" v-if="loadingText==='加载中...'"></div>
-          <span>{{loadingText}}</span>
+          <span>{{ loadingText }}</span>
         </div>
         <div class="chat-dialog" v-else>
           <div id="containerWind"></div>
@@ -43,30 +43,6 @@
         <div class="right-bottom-icon"></div>
       </el-dialog>
     </div>
-    <div class="digital-tunnel">
-      <el-dialog :close-on-click-modal="false" v-model="isAirVisited" :title="airTitle+'监控数据'" width="2175px"
-                 :modal="false">
-        <div class="left-top-icon"></div>
-        <div class="right-top-icon"></div>
-        <div class="loading-block" v-if="showLoading">
-          <div class="loading" ></div>
-          <span>加载中...</span>
-        </div>
-        <div class="chat-dialog" v-else>
-          <div id="containerAir"></div>
-          <div style="width: 1px;"></div>
-        </div>
-        <div class="time-select">
-          <time-range-btn
-              :buttonList="timeList"
-              v-model="selectTimeButton"
-              @select="timeSelect"
-          />
-        </div>
-        <div class="left-bottom-icon"></div>
-        <div class="right-bottom-icon"></div>
-      </el-dialog>
-    </div>
   </div>
 </template>
 
@@ -74,11 +50,9 @@
 import ItemInfo from "./childComps/ItemInfo.vue";
 import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import * as echarts from 'echarts';
-import {getEchartsInfo} from "../../../api/largeScreen";
-import {ElMessage} from "element-plus";
+import {getEchartsInfo} from "@/api/largeScreen";
 
 let myEcharts = reactive({});
-let myAirEcharts = reactive({});
 const props = defineProps({
   list: Array,
   airData: Array
@@ -87,14 +61,14 @@ const windSpeed = ref(0)
 const windDirection = ref(0)
 const loadingText = ref('加载中...')
 const windSpeedId = ref(0)
-const airTitle = ref('')
+const windDirectionSpeedId = ref(0)
+const dialogTitle = ref('风速')
+const openDialogId = ref(0)
 const airList = ref([])
 const timeList = ref(["年", "月", "日"]);
 const selectTimeButton = ref(2);
 const isWindSpeedVisited = ref(false);
 const showSpeedLoading = ref(false)
-const isAirVisited = ref(false);
-const showLoading = ref(false)
 watch(() => props.list, (now) => {
   airList.value?.forEach(item => {
     now.forEach(newItem => {
@@ -111,59 +85,56 @@ watch(() => props.airData, (now) => {
     } else {
       getAirInfo(now.sensorList)
     }
-  }else {
+  } else {
     airList.value = []
     windSpeed.value = 0
   }
 }, {deep: true});
-const getChartInfo = (equipmentId) => {
+
+const getChartInfo = (equipmentId, type = 'day') => {
   isWindSpeedVisited.value = true
-  showSpeedLoading.value=true
-  getEchartsInfo(equipmentId).then(res => {
+  showSpeedLoading.value = true
+  getEchartsInfo(equipmentId, type).then(res => {
     if (res?.code === 1000) {
-      showSpeedLoading.value=false
+      showSpeedLoading.value = false
       nextTick(() => {
         initChart(res.data.dates, res.data.values)
       })
-    }else {
-      loadingText.value=res.msg
+    } else {
+      loadingText.value = res.msg
     }
   })
-}
-const getGasChartInfo = (equipmentId) => {
-  isAirVisited.value = true
-  showLoading.value=true
-  getEchartsInfo(equipmentId).then(res => {
-    if (res?.code === 1000) {
-      showLoading.value = false
-      nextTick(() => {
-        initAirChart(res.data.dates, res.data.values)
-      })
-    }
+  nextTick(() => {
+    loadingText.value = '加载中...'
   })
 }
-const handleOpenChart = () => {
-  getChartInfo(windSpeedId.value)
+const handleOpenChart = (id, type) => {
+  selectTimeButton.value = 2
+  if (type === 'air') {
+    dialogTitle.value = id.name
+    openDialogId.value = id.equipmentId
+    getChartInfo(id.equipmentId, 'day')
+  } else {
+    if (id === 11) {
+      dialogTitle.value = '风向'
+    } else {
+      dialogTitle.value = '风速'
+    }
+    openDialogId.value = id
+    getChartInfo(id, 'day')
+  }
 }
 
-const handleOpenAirChart = (item) => {
-  // isAirVisited.value = true
-  airTitle.value = item.name
-  getGasChartInfo(item.equipmentId)
-  // nextTick(() => {
-  //   initAirChart()
-  // })
-}
 const timeSelect = (index) => {
-  console.log('选择时间', index)
   if (index === 0) {
-    console.log('--年')
+    getChartInfo(openDialogId.value, 'year')
   } else if (index === 1) {
-    console.log('--月')
+    getChartInfo(openDialogId.value, 'month')
   } else if (index === 2) {
-    console.log('--日')
+    getChartInfo(openDialogId.value, 'day')
   }
 };
+
 const changeData = (item) => {
   return {
     equipmentId: item.equipmentId,
@@ -199,12 +170,13 @@ const getAirInfo = (now) => {
       windSpeedId.value = item.equipmentId
       windSpeed.value = item.value
     } else if (item.equipmentType === "windDirection") {
+      windDirectionSpeedId.value = item.equipmentId
       windDirection.value = item.value
     }
   })
-  if(airArr.length!==0){
+  if (airArr.length !== 0) {
     airArr.push(airArr.shift())
-      airList.value = airArr
+    airList.value = airArr
   }
 }
 const initChart = (type, values) => {
@@ -305,101 +277,6 @@ const initChart = (type, values) => {
     myEcharts.resize();
   }
 }
-const initAirChart = (type, values) => {
-  //3.初始化container容器
-  myAirEcharts = echarts.init(document.getElementById('containerAir'));
-  //5.传入数据
-  let option = {
-    //图例
-    legend: {
-      // left: 0,
-      textStyle: {
-        color: '#FFFFFF',
-        fontSize: 40
-      }
-    },
-    //离容器四侧的距离
-    grid: {
-      left: 0, // 左边距
-      right: 20, // 右边距
-      top: 80, // 顶边距
-      bottom: 0, // 底边距
-      containLabel: true,
-    },
-    //提示框组件
-    tooltip: {
-      show: true,
-      trigger: 'axis',
-      backgroundColor: "transparent", // 设置背景颜色为透明
-      borderColor: "transparent", // 设置边框颜色为透明
-      padding: 0, // 设置内边距为0
-      textStyle: {
-        fontSize: 40
-      },
-      formatter: function (params) {
-        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%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">${params[0].value}</span></div>
-          </div>`;
-        return content;
-      },
-    },
-    toolbox: {
-      show: false,
-      right: 10,
-      feature: {
-        dataZoom: {
-          yAxisIndex: 'none'
-        }
-      }
-    },
-    dataZoom: [{
-      type: 'inside'
-    }],
-    //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: type,
-      axisLabel: {
-        textStyle: {
-          fontSize: 45,
-          color: '#D6F1FA'
-        },
-      },
-    },
-    //Y轴
-    yAxis: {
-      type: 'value',
-      axisLabel: {
-        textStyle: {
-          fontSize: 45,
-          color: '#D6F1FA'
-        },
-      },
-    },
-    //配置项
-    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: values,
-        type: 'line',
-        smooth: true,
-        symbolSize: 24,
-        lineStyle: {
-          width: 5
-        }
-      }
-    ]
-  }
-  myAirEcharts.setOption(option);
-  //图表大小自适应窗口大小变化
-  window.onresize = () => {
-    myAirEcharts.resize();
-  }
-}
-
 </script>
 
 <style lang="scss" scoped>
@@ -428,27 +305,55 @@ const initAirChart = (type, values) => {
     padding: 5px 0 5px 15px;
     margin-bottom: 25px;
     margin-left: 21px;
-    >div:first-child{
+
+    > div:first-child {
       display: flex;
     }
-    &:hover {
-      //width: 790px;
-      background: #2E5589;
-      border-radius: 6px;
-    }
+
 
     img {
       width: 29px;
       height: 34px;
     }
 
+    .wind-direction-info {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      margin-right: 54px;
+
+
+      .input-fan {
+        cursor: pointer;
+
+        &:hover {
+          //width: 230px;
+          padding-left: 20px;
+          //padding-right: 20px;
+          background: #2E5589;
+          border-radius: 6px;
+        }
+
+        > span:first-child {
+          //margin-left: 25px;
+          margin-right: 25px;
+        }
+      }
+    }
+
     .fan-info {
       flex: 1;
       display: flex;
       justify-content: flex-start;
+      cursor: pointer;
 
       .input-fan {
         //margin: 0 26px;
+        &:hover {
+          width: 230px;
+          background: #2E5589;
+          border-radius: 6px;
+        }
 
         > span:first-child {
           margin-left: 25px;