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

2024-02-22 17:10:06 +08:00
parent 98799e8bcc
commit 3a23b467ec
7 changed files with 132 additions and 209 deletions
--- a/src/api/largeScreen.js
+++ b/src/api/largeScreen.js
@@ -22,23 +22,23 @@ export const getTunnelBySiteId = (siteId) => {
  })
 }
 // 传感器echarts数据
-export const getEchartsInfo = (equipmentId) => {
+export const getEchartsInfo = (equipmentId,type) => {
  return request({
-    url: `/tunnel/large/screen/echarts/sensor/${equipmentId}`,
+    url: `/tunnel/large/screen/echarts/sensor/${equipmentId}/${type}`,
    method: 'get'
  })
 }
 // 有害气体echarts数据
-export const getBadGasEchartsInfo = (tunnelId) => {
+export const getBadGasEchartsInfo = (tunnelId,type) => {
  return request({
-    url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}`,
+    url: `/tunnel/large/screen/echarts/gas/sensor/${tunnelId}/${type}`,
    method: 'get'
  })
 }
 //电流监控数据
-export const getFanEchartsInfo = (equipmentId) => {
+export const getFanEchartsInfo = (equipmentId,type) => {
  return request({
-    url: `/tunnel/large/screen/echarts/current/${equipmentId}`,
+    url: `/tunnel/large/screen/echarts/current/${equipmentId}/${type}`,
    method: 'get'
  })
 }
--- a/src/api/tunnelScene.js
+++ b/src/api/tunnelScene.js
@@ -8,7 +8,7 @@ export const getEquipmentType = () => {
  });
 };
 // 获取设备
-export const getEquipment = (tunnelId, typeKey, equipmentIds = "1") => {
+export const getEquipment = (tunnelId, typeKey, equipmentIds='0') => {
  return request({
    url: "/tunnel/model/equipment/option",
    method: "post",
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -316,6 +316,11 @@ body,
      height: 1160px;
      //width: 1300px;
    }
+    #containerWindDirection {
+      flex: 1;
+      height: 1160px;
+      //width: 1300px;
+    }

    #containerEle {
      flex: 1;
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/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;
--- a/src/components/content/badGasInfo/BadGasInfo.vue
+++ b/src/components/content/badGasInfo/BadGasInfo.vue
@@ -5,7 +5,7 @@
    <div class="title">有害气体</div>
    <div v-if="badGasList==null||badGasList.length===0" class="showNull">
      <div class="loading" v-if="loading===0"></div>
-      {{loading===0?'加载中...':'暂无数据~'}}
+      {{ loading === 0 ? '加载中...' : '暂无数据~' }}
    </div>
    <div v-else class="info-list">
      <gas-info-item
@@ -26,7 +26,7 @@
        <div class="left-top-icon"></div>
        <div class="right-top-icon"></div>
        <div class="loading-block" v-if="showLoading">
-          <div class="loading" ></div>
+          <div class="loading"></div>
          <span>加载中...</span>
        </div>
        <div class="chat-dialog" v-else>
@@ -100,13 +100,12 @@ watch(
    {deep: true}
 );
 const timeSelect = (index) => {
-  console.log("选择时间", index);
  if (index === 0) {
-    console.log("--年");
+    getBadGasChartInfo('years')
  } else if (index === 1) {
-    console.log("--月");
+    getBadGasChartInfo('month')
  } else if (index === 2) {
-    console.log("--日");
+    getBadGasChartInfo('day')
  }
 };
 const getBadGasInfo = (now) => {
@@ -138,13 +137,13 @@ const changeData = (item) => {
    unit: item.unit,
  };
 };
-const getBadGasChartInfo = () => {
+const getBadGasChartInfo = (type) => {
  isBadGasVisited.value = true
-  showLoading.value=true
+  showLoading.value = true
  let id = props.tunnelId
-  getBadGasEchartsInfo(id).then(res => {
+  getBadGasEchartsInfo(id, type).then(res => {
    if (res?.code === 1000) {
-      showLoading.value=false
+      showLoading.value = false
      nextTick(() => {
        initChart(res.data.dates, res.data)
      })
@@ -152,7 +151,7 @@ const getBadGasChartInfo = () => {
  })
 }
 const handleOpenChart = () => {
-  getBadGasChartInfo()
+  getBadGasChartInfo('day')
 };
 const getImageUrl = (name) => {
  return new URL(`../../../assets/images/badGasInfo/${name}`, import.meta.url)
@@ -366,7 +365,7 @@ const initChart = (type, values) => {

 <style lang="scss" scoped>
 #bad-gas-info {
-  margin-top:40px;
+  margin-top: 40px;
  cursor: pointer;
  //position: absolute;
  width: 824px;
@@ -376,6 +375,7 @@ const initChart = (type, values) => {
  //right: 72px;
  background-image: url(../../../assets/images/badGasInfo/bg.png);
  padding: 22px 17px 25px 50px;
+
  .title {
    font-size: 38px;
    font-weight: 800;
--- a/src/components/content/fanInfo/FanInfo.vue
+++ b/src/components/content/fanInfo/FanInfo.vue
@@ -98,13 +98,13 @@
          <div id="containerFan"></div>
          <div style="width: 1px;"></div>
        </div>
-        <!--        <div class="time-select">-->
-        <!--          <time-range-btn-->
-        <!--              :buttonList="timeList"-->
-        <!--              v-model="selectTimeButton"-->
-        <!--              @select="timeSelect"-->
-        <!--          />-->
-        <!--        </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>
@@ -115,6 +115,7 @@
 <script setup>
 import * as echarts from "echarts";
 import FanInfoItem from "./FanInfoItem.vue";
+import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
 import {
  editFrequency,
  editFrequencyModelSwitch,
@@ -122,6 +123,8 @@ import {
  getFanEchartsInfo
 } from "@/api/largeScreen";

+const timeList = ref(["年", "月", "日"]);
+const selectTimeButton = ref(2);
 const props = defineProps({
  list: Array,
  tunnelId: Number,
@@ -132,7 +135,6 @@ const props = defineProps({
 const socketData = ref()
 let Echarts_info1 = null;
 let fan01_option = reactive();
-const shuntThreshold = ref(23)
 const transducerData = ref([])
 const shuntList = ref([
  {
@@ -154,6 +156,7 @@ const stateC = ref(false)
 const isVisited = ref(false)
 const showLoading = ref(false)
 const fanIndex = ref(0)
+const openEquipmentId = ref(0)
 let myEcharts = reactive({});
 watch(() => props.loading, (now) => {
  props.loading = now
@@ -194,6 +197,15 @@ watch(() => props.list, (now) => {
  })
  handleOnMounted()
 }, {deep: true});
+const timeSelect = (index) => {
+  if (index === 0) {
+    getFanInfo(openEquipmentId.value,'years')
+  } else if (index === 1) {
+    getFanInfo(openEquipmentId.value,'month')
+  } else if (index === 2) {
+    getFanInfo(openEquipmentId.value,'day')
+  }
+};
 const packageData = (item, type, flag) => {
  let number = 0
  if (item.equipmentType === "frequency1") {
@@ -234,10 +246,10 @@ const changeModel = (item) => {
  //   console.log('修改自动模式', res)
  // })
 }
-const getFanInfo = (equipmentId) => {
+const getFanInfo = (equipmentId, type = 'day') => {
  isVisited.value = true
  showLoading.value = true
-  getFanEchartsInfo(equipmentId).then(res => {
+  getFanEchartsInfo(equipmentId, type).then(res => {
    if (res?.code === 1000) {
      showLoading.value = false
      nextTick(() => {
@@ -247,8 +259,8 @@ const getFanInfo = (equipmentId) => {
  })
 }
 const handleOpenChart = (item, index) => {
-
-  getFanInfo(item.equipmentId)
+  openEquipmentId.value = item.equipmentId
+  getFanInfo(item.equipmentId, 'day')
  fanIndex.value = index + 1
 }
 const getTransData = (data) => {
@@ -858,6 +870,7 @@ input[type="number"] {
                  white-space: pre;
                  margin-right: 14px;
                }
+
                //:deep(.is-disabled) {
                //  .el-input__inner{
                //    color: #FFFFFF!important;
--- a/src/components/content/tunnelScene/editEquComp/editDialog.vue
+++ b/src/components/content/tunnelScene/editEquComp/editDialog.vue
@@ -122,7 +122,7 @@ watch(
  (newVal) => {
    console.log(params.tunnelId, newVal);
    equipment.value.reset();
-    getEquipment(params.tunnelId, newVal, 1).then((res) => {
+    getEquipment(params.tunnelId, newVal).then((res) => {
      options2.splice(0, options2.length);
      options2.push(
        ...res.data.map((item) => {