5.5首页修改提交

src/views/vent/home/colliery/components/fan-monitor.vue

@@ -5,13 +5,8 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select
-        v-model:value="searchValue"
-        style="width: 180px; margin-right: 10px"
-        :options="fanTypeList"
-        aria-placeholder="请选择"
-        @change="changeSelect"
-      />
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="fanTypeList"
+        aria-placeholder="请选择" @change="changeSelect" />
       <div class="status-yx">
         <div class="now-name">
           <i style="margin: 0px 5px 0px 5px">
@@ -30,360 +25,374 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
-  import { useGo } from '/@/hooks/web/usePage';
-  let props = defineProps({
-    fandata: Array,
-  });
-  const emit = defineEmits(['goDetail']);
-  const go = useGo();
-  let searchValue = ref('');
-  let fanList = reactive<any[]>([]);
-  let fanTypeList = reactive<any[]>([]); //下拉列表
-  let fjStatus = ref(''); //运行风机
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
+import { useGo } from '/@/hooks/web/usePage';
+let props = defineProps({
+  fandata: Array,
+});
+const emit = defineEmits(['goDetail']);
+const go = useGo();
+let searchValue = ref('');
+let fanList = reactive<any[]>([]);
+let fanTypeList = reactive<any[]>([]); //下拉列表
+let fjStatus = ref(''); //运行风机
 
-  //获取dom节点
-  let fan = ref<any>();
-  //echart图表数据
-  let echartData = reactive<any>({
-    xdata: 0,
-    ydata: 0,
-  });
-  //跳转详情
-  function getDetail() {
-    emit('goDetail', 'fanLocal');
-  }
-  //选项切换
-  function changeSelect(val) {
-    switch (val) {
-      case '局扇监测':
-        fjStatus.value =
-          fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan1StartStatus == '1'
-            ? '1号风机'
-            : fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan2StartStatus == '1'
+//获取dom节点
+let fan = ref<any>();
+//echart图表数据
+let echartData = reactive<any>({
+  xdata: 0,
+  ydata: 0,
+});
+//跳转详情
+function getDetail() {
+  emit('goDetail', 'fanLocal');
+}
+//选项切换
+function changeSelect(val) {
+  searchValue.value=val
+  switch (val) {
+    case '局扇监测':
+      fjStatus.value =
+        fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan1StartStatus == '1'
+          ? '1号风机'
+          : fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan2StartStatus == '1'
             ? '2号风机'
             : '';
-        echartData.xdata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity1;
-        echartData.ydata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity2;
-        getOption();
-        break;
-      case '局部通风机系统':
-        fjStatus.value =
-          fanList.filter((v) => v.strinstallpos == '局扇监测')[1].readData.Fan1StartStatus == '1'
-            ? '1号风机'
-            : fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.Fan2StartStatus == '1'
+      echartData.xdata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity1;
+      echartData.ydata = fanList.filter((v) => v.strinstallpos == '局扇监测')[0].readData.windQuantity2;
+      getOption();
+      break;
+    case '局部通风机系统':
+      fjStatus.value =
+        fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.Fan1StartStatus == '1'
+          ? '1号风机'
+          : fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.Fan2StartStatus == '1'
             ? '2号风机'
             : '';
-        echartData.xdata = fanList.filter((v) => v.strinstallpos == '局扇监测')[1].readData.windQuantity1;
-        echartData.ydata = fanList.filter((v) => v.strinstallpos == '局扇监测')[1].readData.windQuantity2;
-        getOption();
-        break;
-    }
+      echartData.xdata = fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.windQuantity1;
+      echartData.ydata = fanList.filter((v) => v.strinstallpos == '局部通风机系统')[0].readData.windQuantity2;
+      getOption();
+      break;
   }
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(fan.value);
-      let option = {
-        grid: {
-          top: '20%',
-          left: '7%',
-          bottom: '14%',
-          right: '7%',
-          containLabel: true,
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['吸风量', '供风量'],
-            axisTick: {
-              alignWithLabel: true,
+}
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(fan.value);
+    let option = {
+      grid: {
+        top: '20%',
+        left: '7%',
+        bottom: '14%',
+        right: '7%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          data: ['吸风量', '供风量'],
+          axisTick: {
+            alignWithLabel: true,
+          },
+          nameTextStyle: {
+            color: 'red',
+          },
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
             },
-            nameTextStyle: {
-              color: 'red',
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: '#b3b8cc',
+              padding: 10,
+              fontSize: 14,
             },
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164)',
-              },
+            formatter: function (data) {
+              return data;
             },
-            axisLabel: {
-              //坐标轴刻度标签的相关设置
-              textStyle: {
-                color: '#b3b8cc',
-                padding: 10,
-                fontSize: 14,
-              },
-              formatter: function (data) {
-                return data;
-              },
+          },
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          min: 0,
+          name: '(m³/min)',
+          nameTextStyle: {
+            color: '#b3b8cc',
+            fontSize: 12,
+            padding: 0,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
             },
           },
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            min: 0,
-            name: '(m³/min)',
-            nameTextStyle: {
+
+          axisLabel: {
+            show: true,
+            textStyle: {
               color: '#b3b8cc',
-              fontSize: 12,
               padding: 0,
+              fontSize: 14,
             },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                color: 'rgba(62, 103, 164,.4)',
-              },
-            },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164)',
-              },
-            },
-
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
-                fontSize: 14,
-              },
-              formatter: function (value) {
-                if (value === 0) {
-                  return value;
-                }
+            formatter: function (value) {
+              if (value === 0) {
                 return value;
-              },
+              }
+              return value;
             },
-            axisTick: {
-              show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: '',
+          type: 'pictorialBar',
+          symbolSize: [60, 16],
+          symbolOffset: [0, -10],
+          symbolPosition: 'end',
+          z: 12,
+          //"barWidth": "20",
+          label: {
+            normal: {
+              show: true,
+              position: 'top',
+              formatter: '{c}',
+              color: '#fff',
             },
           },
-        ],
-        series: [
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [60, 16],
-            symbolOffset: [0, -10],
-            symbolPosition: 'end',
-            z: 12,
-            //"barWidth": "20",
-            label: {
-              normal: {
-                show: true,
-                position: 'top',
-                formatter: '{c}',
-                color: '#fff',
+          data: [
+            {
+              value: echartData.xdata,
+              itemStyle: {
+                color: '#59cb42',
               },
             },
-            data: [
-              {
-                value: echartData.xdata,
-                itemStyle: {
-                  color: '#59cb42',
-                },
+            {
+              value: echartData.ydata,
+              itemStyle: {
+                color: '#3cefff',
               },
-              {
-                value: echartData.ydata,
-                itemStyle: {
-                  color: '#3cefff',
-                },
-              },
-            ],
-          },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [60, 16],
-            symbolOffset: [0, 10],
-            // "barWidth": "20",
-            z: 12,
-            data: [
-              {
-                value: 100,
-                itemStyle: {
-                  color: '#59cb42',
-                },
+            },
+          ],
+        },
+        {
+          name: '',
+          type: 'pictorialBar',
+          symbolSize: [60, 16],
+          symbolOffset: [0, 10],
+          // "barWidth": "20",
+          z: 12,
+          data: [
+            {
+              value: 100,
+              itemStyle: {
+                color: '#59cb42',
               },
-              {
-                value: 100,
-                itemStyle: {
-                  color: '#3cefff',
-                },
+            },
+            {
+              value: 100,
+              itemStyle: {
+                color: '#3cefff',
               },
-            ],
+            },
+          ],
+        },
+        {
+          name: '',
+          type: 'pictorialBar',
+          symbolSize: [90, 30],
+          symbolOffset: [0, 20],
+          z: 10,
+          itemStyle: {
+            normal: {
+              color: 'transparent',
+              borderColor: '#14b1eb',
+              borderType: 'dashed',
+              borderWidth: 5,
+            },
           },
-          {
-            name: '',
-            type: 'pictorialBar',
-            symbolSize: [90, 30],
-            symbolOffset: [0, 20],
-            z: 10,
-            itemStyle: {
-              normal: {
-                color: 'transparent',
-                borderColor: '#14b1eb',
-                borderType: 'dashed',
-                borderWidth: 5,
-              },
+          data: [100, 100],
+        },
+        {
+          type: 'bar',
+          itemStyle: {
+            normal: {
+              //color: '#14b1eb',
+              opacity: 0.7,
             },
-            data: [100, 100],
           },
-          {
-            type: 'bar',
-            itemStyle: {
-              normal: {
-                //color: '#14b1eb',
-                opacity: 0.7,
+          //silent: true,
+          barWidth: '60',
+          //barGap: '-100%', // Make series be overlap
+          data: [
+            {
+              value: echartData.xdata,
+              itemStyle: {
+                color: '#59cb42',
               },
             },
-            //silent: true,
-            barWidth: '60',
-            //barGap: '-100%', // Make series be overlap
-            data: [
-              {
-                value: echartData.xdata,
-                itemStyle: {
-                  color: '#59cb42',
-                },
-              },
-              {
-                value: echartData.ydata,
-                itemStyle: {
-                  color: '#3cefff',
-                },
-              },
-            ],
-            markLine: {
-              symbol: 'none',
-              label: {
-                position: 'middle',
-                formatter: '{b}',
+            {
+              value: echartData.ydata,
+              itemStyle: {
+                color: '#3cefff',
               },
-              // data: [
-              //   {
-              //     name: '目标值',
-              //     yAxis: 40, //res.targetTwo,
-              //     lineStyle: {
-              //       color: 'rgba(0, 119, 233,.8)',
-              //     },
-              //   },
-              // ],
             },
+          ],
+          markLine: {
+            symbol: 'none',
+            label: {
+              position: 'middle',
+              formatter: '{b}',
+            },
+            // data: [
+            //   {
+            //     name: '目标值',
+            //     yAxis: 40, //res.targetTwo,
+            //     lineStyle: {
+            //       color: 'rgba(0, 119, 233,.8)',
+            //     },
+            //   },
+            // ],
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  watch(
-    () => props.fandata,
-    (val) => {
-      console.log(val, '局部风机数据');
-      fanList = val[0];
-      fanTypeList.length = 0;
-      fanList.forEach((el) => {
-        fanTypeList.push({
-          label: el.strinstallpos,
-          value: el.strinstallpos,
-        });
+watch(
+  () => props.fandata,
+  (val) => {
+    console.log(val, '局部风机数据');
+    fanList = val[0];
+    fanTypeList.length = 0;
+    fanList.forEach((el) => {
+      fanTypeList.push({
+        label: el.strinstallpos,
+        value: el.strinstallpos,
       });
-      searchValue.value = fanTypeList[0].value;
-      console.log(searchValue.value, '77777');
+    });
 
+    if (searchValue.value) {
+      changeSelect(searchValue.value);
+    } else {
+      searchValue.value = fanTypeList[0].value;
       changeSelect(searchValue.value);
-    },
-    {
-      deep: true,
     }
-  );
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
+
+.fanMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
     font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
+    }
   }
-  .fanMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
 
-    .title-top {
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
+
+    .icon-search {
       position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
     }
-    .toggle-search {
-      position: absolute;
-      left: 9px;
-      top: 37px;
+
+    .status-yx {
+      height: 30px;
+      width: 180px;
+      background-color: rgba(8, 148, 255, 0.3);
+      border: 1px solid #1d80da;
       display: flex;
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
-      }
-      .status-yx {
-        height: 30px;
-        width: 180px;
-        background-color: rgba(8, 148, 255, 0.3);
-        border: 1px solid #1d80da;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .now-status {
-          margin-right: 5px;
-          padding-top: 3px;
-          font-family: 'douyuFont';
-          color: #3df6ff;
-        }
-      }
-    }
-    .fan-contents {
-      position: absolute;
-      top: 66px;
-      left: 0;
-      height: calc(100% - 66px);
-      width: 100%;
-      .fan {
-        width: 100%;
-        height: 100%;
+      justify-content: space-between;
+      align-items: center;
+
+      .now-status {
+        margin-right: 5px;
+        padding-top: 3px;
+        font-family: 'douyuFont';
+        color: #3df6ff;
       }
     }
   }
-  :deep .zxm-select-selector {
+
+  .fan-contents {
+    position: absolute;
+    top: 66px;
+    left: 0;
+    height: calc(100% - 66px);
     width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-  :deep .zxm-select-arrow {
-    color: #fff !important;
+
+    .fan {
+      width: 100%;
+      height: 100%;
+    }
   }
-</style>
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}</style>

src/views/vent/home/colliery/components/main-monitor.vue

@@ -5,13 +5,8 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select
-        v-model:value="searchValue"
-        style="width: 180px; margin-right: 10px"
-        :options="mainTypeList"
-        aria-placeholder="请选择"
-        @change="changeSelect"
-      />
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="mainTypeList"
+        aria-placeholder="请选择" @change="changeSelect" />
       <div class="status-yx">
         <div class="now-name">
           <i style="margin: 0px 5px 0px 5px">
@@ -30,367 +25,387 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
 
-  let props = defineProps({
-    maindata: Array,
-  });
-  const emit = defineEmits(['goDetail']);
-  let searchValue = ref('');
-  let mainTypeList = reactive<any>([]); //下拉框
-  let mainList = reactive<any[]>([]); //主风机列表
+let props = defineProps({
+  maindata: Array,
+});
+const emit = defineEmits(['goDetail']);
+let searchValue = ref('');
+let mainTypeList = reactive<any>([]); //下拉框
+let mainList = reactive<any[]>([]); //主风机列表
 
-  //获取dom节点
-  let main = ref<any>();
-  //echart图表数据
-  let echartData = reactive<any>({
-    ydata: [],
-    ydata1: [],
-  });
+//获取dom节点
+let main = ref<any>();
+//echart图表数据
+let echartData = reactive<any>({
+  ydata: [],
+  ydata1: [],
+});
 
 
-  //跳转详情
-  function getDetail() {
-    console.log('跳转详情');
-    emit('goDetail', 'fanMain');
-  }
-  //选项切换
-  function changeSelect(val) {
-    let objParam
-    let objParam1
-    switch (val) {
-      case '1号回风斜井':
-         objParam = {
-          dataQ: mainList[0].readData.m3,
-          dataH: mainList[0].readData.DataPa,
-        }
-         objParam1={
-          dataha0: -0.056,
-          dataha1: 3.6491,
-          dataha2: 434.4,
-          dataha3: 100,
-          dataha4: -1000,
-        }
-        setChart(objParam,objParam1);
-        getOption();
-        break;
-      case '2号回风立井':
+//跳转详情
+function getDetail() {
+  console.log('跳转详情');
+  emit('goDetail', 'fanMain');
+}
+//选项切换
+function changeSelect(val) {
+  let objParam
+  let objParam1
+  searchValue.value = val;
+  switch (val) {
+    case '1号回风斜井':
       objParam = {
-          dataQ: mainList[1].readData.m3,
-          dataH: mainList[1].readData.DataPa,
-        }
-         objParam1={
-          dataha0: -0.056,
-          dataha1: 3.6491,
-          dataha2: 434.4,
-          dataha3: 100,
-          dataha4: -1000,
-        }
-        setChart(objParam,objParam1);
-        getOption();
-        break;
-    }
+        dataQ: mainList[0].readData.m3,
+        dataH: mainList[0].readData.DataPa,
+      }
+      objParam1 = {
+        dataha0: -0.056,
+        dataha1: 3.6491,
+        dataha2: 434.4,
+        dataha3: 100,
+        dataha4: -1000,
+      }
+      setChart(objParam, objParam1);
+      getOption();
+      break;
+    case '2号回风立井':
+      objParam = {
+        dataQ: mainList[1].readData.m3,
+        dataH: mainList[1].readData.DataPa,
+      }
+      objParam1 = {
+        dataha0: -0.056,
+        dataha1: 3.6491,
+        dataha2: 434.4,
+        dataha3: 200,
+        dataha4: -800,
+      }
+      setChart(objParam, objParam1);
+      getOption();
+      break;
   }
+}
 
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(main.value);
-      let option = {
-        title: {
-          textStyle: {
-            color: '#3df6ff',
-            fontSize: 14, // 字体颜色
-          },
-          text: '',
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(main.value);
+    let option = {
+      title: {
+        textStyle: {
+          color: '#3df6ff',
+          fontSize: 14, // 字体颜色
         },
-        grid: {
-          top: '25%',
-          left: '5%',
-          right: '19%',
-          bottom: '8%',
-          containLabel: true,
+        text: '',
+      },
+      grid: {
+        top: '25%',
+        left: '5%',
+        right: '19%',
+        bottom: '8%',
+        containLabel: true,
+      },
+      legend: {
+        // x:'right',
+        top: '5%',
+        textStyle: {
+          color: '#ffffff',
+          fontSize: 14, // 字体颜色
         },
-        legend: {
-          // x:'right',
-          top: '5%',
-          textStyle: {
-            color: '#ffffff',
-            fontSize: 14, // 字体颜色
-          },
-          data: ['风阻', '负压'],
+        data: ['风阻', '负压'],
+      },
+      tooltip: {
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        textStyle: {
+          color: '#3df6ff',
+          fontSize: 14, // 字体颜色
         },
-        tooltip: {
-          backgroundColor: 'rgba(0,0,0,0.8)',
-          textStyle: {
+        formatter: function (params, ticket, callback) {
+          // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
+          // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
+          var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
+          res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
+          res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
+          return res;
+        },
+        trigger: 'item',
+      },
+      color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
+      xAxis: [
+        {
+          name: '风量\r\n(m³/min)\r\n',
+          nameTextStyle: {
             color: '#3df6ff',
-            fontSize: 14, // 字体颜色
-          },
-          formatter: function (params, ticket, callback) {
-            console.log(params, 'params1');
-            // var res = '风量' + ' : ' + Math.round(params.data[0] * 60 * 10) / 10 + '(m³/min)<br/>'
-            // res = res + '&emsp;&emsp;&emsp;' + params.data[0] + '(m³/s)<br/>'
-            var res = '风量' + ' : ' + params.data[0] * 60 + '(m³/min)<br/>';
-            res = res + '&emsp;&emsp;&emsp;' + params.data[0].toFixed(2) + '(m³/s)<br/>';
-            res = res + '负压' + ' : ' + params.data[1] + '(Pa)<br/>';
-            return res;
+            fontSize: 12,
           },
-          trigger: 'item',
-        },
-        color: ['#00bb00', '#ffbb00', '#ff0000', '#0000ff'],
-        xAxis: [
-          {
-            name: '风量\r\n(m³/min)\r\n',
-            nameTextStyle: {
-              color: '#3df6ff',
-              fontSize: 12,
-            },
-            axisLine: {
-              lineStyle: {
-                color: '#0092d5',
-                width: 1, // 这里是为了突出显示加上的
-              },
-            },
-            splitLine: {
-              show: false, // 网格线
-              lineStyle: {
-                color: '#006c9d',
-                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
-              },
-            },
-            axisLabel: {
-              show: true,
-              position: 'bottom',
-              textStyle: {
-                color: '#b3b8cc',
-                fontSize: 14,
-              },
+          axisLine: {
+            lineStyle: {
+              color: '#0092d5',
+              width: 1, // 这里是为了突出显示加上的
             },
-            type: 'value',
-            min: 0,
-            max: 400,
           },
-          {
-            name: '',
-            nameTextStyle: {
-              color: '#3df6ff',
-              fontSize: 12,
+          splitLine: {
+            show: false, // 网格线
+            lineStyle: {
+              color: '#006c9d',
+              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
             },
-            axisTick: {
-              show: false,
-            },
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#0092d5',
-                width: 1, // 这里是为了突出显示加上的
-              },
-            },
-            splitLine: {
-              show: false, // 网格线
-              lineStyle: {
-                color: '#006c9d',
-                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
-              },
+          },
+          axisLabel: {
+            show: true,
+            position: 'bottom',
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 14,
             },
-            axisLabel: {
-              show: false,
-              textStyle: {
-                color: '#b3b8cc',
-                fontSize: 14,
-              },
+          },
+          type: 'value',
+          min: 0,
+          max: 400,
+        },
+        {
+          name: '',
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+          },
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: '#0092d5',
+              width: 1, // 这里是为了突出显示加上的
             },
-            type: 'value',
-            min: 0,
-            max: 400,
           },
-        ],
-        yAxis: [
-          {
-            name: '负压(Pa)',
-            splitNumber: 5,
-            nameTextStyle: {
-              color: '#3df6ff',
-              fontSize: 12,
+          splitLine: {
+            show: false, // 网格线
+            lineStyle: {
+              color: '#006c9d',
+              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: '#0092d5',
-                width: 1, // 这里是为了突出显示加上的
-              },
+          },
+          axisLabel: {
+            show: false,
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 14,
             },
-            splitLine: {
-              show: true, // 网格线
-              lineStyle: {
-                color: '#006c9d',
-                type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
-              },
+          },
+          type: 'value',
+          min: 0,
+          max: 400,
+        },
+      ],
+      yAxis: [
+        {
+          name: '负压(Pa)',
+          splitNumber: 5,
+          nameTextStyle: {
+            color: '#3df6ff',
+            fontSize: 12,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#0092d5',
+              width: 1, // 这里是为了突出显示加上的
             },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#b3b8cc',
-                fontSize: 14,
-              },
+          },
+          splitLine: {
+            show: true, // 网格线
+            lineStyle: {
+              color: '#006c9d',
+              type: 'dashed', // 设置网格线类型 dotted：虚线   solid:实线
             },
-            type: 'value',
-            min: 0,
-            max: 4000,
           },
-        ],
-        series: [
-          {
-            name: '风阻',
-            yAxisIndex: 0,
-            xAxisIndex: 1,
-            type: 'line',
-            smooth: true,
-            animationDuration: 1000,
-            showSymbol: false,
-            data: echartData.ydata,
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#b3b8cc',
+              fontSize: 14,
+            },
           },
-          {
-            name: '负压',
-            yAxisIndex: 0,
-            xAxisIndex: 1,
-            type: 'line',
-            smooth: true,
-            animationDuration: 1000,
-            showSymbol: false,
+          type: 'value',
+          min: 0,
+          max: 4000,
+        },
+      ],
+      series: [
+        {
+          name: '风阻',
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
+          data: echartData.ydata,
+        },
+        {
+          name: '负压',
+          yAxisIndex: 0,
+          xAxisIndex: 1,
+          type: 'line',
+          smooth: true,
+          animationDuration: 1000,
+          showSymbol: false,
 
-            data: echartData.ydata1,
-          },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+          data: echartData.ydata1,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  // 设置曲线数据
-  function setChart(param, character) {
-    param.dataQ = param.dataQ == null ? 0 : param.dataQ;
-    param.dataH = param.dataH == null ? 0 : param.dataH;
-    let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
-    let H1 = parseFloat(param.dataH);
+// 设置曲线数据
+function setChart(param, character) {
+  param.dataQ = param.dataQ == null ? 0 : param.dataQ;
+  param.dataH = param.dataH == null ? 0 : param.dataH;
+  let Q1 = Math.round((parseFloat(param.dataQ) / 60) * 100) / 100;
+  let H1 = parseFloat(param.dataH);
 
-    let q = Q1 - character.dataha3;
-    let h = H1 - character.dataha4;
-    // 风压特性曲线1
-    let data = [];
-    // 风压特性曲线2
-    let data2 = [];
+  let q = Q1 - character.dataha3;
+  let h = H1 - character.dataha4;
+  // 风压特性曲线1
+  let data = [];
+  // 风压特性曲线2
+  let data2 = [];
 
-    for (let i = 30; i <= 400; i++) {
-      let x = i;
-      let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
-      data2.push([x, y4]);
-    }
-    for (let i = 0; i <= 400; i++) {
-      let x = i;
-      let y = (H1 / Q1 / Q1) * x * x;
-      data.push([x, y]);
-    }
-    echartData.ydata=data
-    echartData.ydata1=data2
+  for (let i = 30; i <= 400; i++) {
+    let x = i;
+    let y4 = character.dataha0 * (x - q) * (x - q) + character.dataha1 * (x - q) + character.dataha2 + h;
+    data2.push([x, y4]);
   }
+  for (let i = 0; i <= 400; i++) {
+    let x = i;
+    let y = (H1 / Q1 / Q1) * x * x;
+    data.push([x, y]);
+  }
+  echartData.ydata = data
+  echartData.ydata1 = data2
+}
+
+watch(
+  () => props.maindata,
+  (val) => {
+    console.log(val, '主风机数据');
+    mainList = val;
+    mainTypeList.length = 0;
 
-  watch(
-    () => props.maindata,
-    (val) => {
-      console.log(val, '主风机数据');
-      mainList = val;
-      mainTypeList.length = 0;
+    mainList.forEach(el => {
       mainTypeList.push({
-        label: mainList[0].strinstallpos,
-        value: mainList[0].strinstallpos,
+        label: el.strinstallpos,
+        value: el.strinstallpos,
       });
+    })
+
+    if (searchValue.value) {
+      changeSelect(searchValue.value);
+    } else {
       searchValue.value = mainTypeList[0].value;
       changeSelect(searchValue.value);
-    },
-    {
-      deep: true,
     }
-  );
-  onMounted(() => {});
+  },
+  {
+    deep: true,
+  }
+);
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
+
+.mainMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
     font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
+    }
   }
-  .mainMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .title-top {
+
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
+
+    .icon-search {
       position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
     }
-    .toggle-search {
-      position: absolute;
-      left: 9px;
-      top: 37px;
+
+    .status-yx {
+      height: 30px;
+      width: 180px;
+      background-color: rgba(8, 148, 255, 0.3);
+      border: 1px solid #1d80da;
       display: flex;
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
-      }
-      .status-yx {
-        height: 30px;
-        width: 180px;
-        background-color: rgba(8, 148, 255, 0.3);
-        border: 1px solid #1d80da;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        .now-status {
-          margin-right: 5px;
-          padding-top: 3px;
-          font-family: 'douyuFont';
-          color: #3df6ff;
-        }
-      }
-    }
-    .main-contents {
-      position: absolute;
-      top: 66px;
-      left: 0;
-      height: calc(100% - 66px);
-      width: 100%;
-      .main {
-        width: 100%;
-        height: 100%;
+      justify-content: space-between;
+      align-items: center;
+
+      .now-status {
+        margin-right: 5px;
+        padding-top: 3px;
+        font-family: 'douyuFont';
+        color: #3df6ff;
       }
     }
   }
-  :deep .zxm-select-selector {
+
+  .main-contents {
+    position: absolute;
+    top: 66px;
+    left: 0;
+    height: calc(100% - 66px);
     width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-  :deep .zxm-select-arrow {
-    color: #fff !important;
+
+    .main {
+      width: 100%;
+      height: 100%;
+    }
   }
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}
 </style>

src/views/vent/home/colliery/components/wind-line.vue

@@ -5,13 +5,8 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select
-        v-model:value="searchValue"
-        style="width: 180px; margin-right: 10px"
-        :options="lineTypeList"
-        aria-placeholder="请选择"
-        @change="changeSelect"
-      />
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="lineTypeList"
+        aria-placeholder="请选择" @change="changeSelect" />
     </div>
     <div class="line-echart">
       <div class="line" ref="line"></div>
@@ -45,407 +40,489 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
-  const emit = defineEmits(['goDetail'])
+import { ref, reactive, onMounted, nextTick, defineProps, watch } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
+const emit = defineEmits(['goDetail'])
 
-  let props = defineProps({
-    lineList: Array,
-  });
+let props = defineProps({
+  lineList: Array,
+});
 
-  //获取dom节点
-  let line = ref<any>();
-  let lineData = reactive<any[]>([]);
-  let searchValue = ref('');
-  const lineTypeList = reactive<any[]>([]);
-
-  let echartData = reactive<any[]>([
-    { name: '进风区', value: 0 },
-    { name: '用风区', value: 0 },
-    { name: '回风区', value: 0 },
-  ]);
-  let xData = reactive<any[]>([]);
-  let yData = reactive<any[]>([]);
-  let percentE = ref<any>(0);
-  let percentF = ref<any>(0);
-  let percentT = ref<any>(0);
-
-  let tabList = reactive<any[]>([
-    { name: '总风量(m³/min)', val: 0 },
-    { name: '总阻力(Pa)', val: 0 },
-    { name: '等积孔(m²)', val: 0 },
-  ]);
-  //跳转详情
-  function getDetail() {
-    console.log('跳转详情');
-    emit('goDetail', 'majorpath')
-  }
-  //选项切换
-  function changeSelect(val) {
-    switch (val) {
-      case '1号回风斜井':
-        // echartData[0].value = lineData[0].majorpath.drag_1;
-        // echartData[1].value = lineData[0].majorpath.drag_2;
-        // echartData[2].value = lineData[0].majorpath.drag_3;
-        // tabList[0].val = lineData[0].majorpath.drag_total;
-        // tabList[1].val = lineData[0].majorpath.m3_total;
-        echartData[0].value = Math.floor(Math.random()*(629-620+1))+620;
-        echartData[1].value =  Math.floor(Math.random()*(949-940+1))+940;
-        echartData[2].value =  Math.floor(Math.random()*(855-850+1))+850;
-        tabList[0].val =  Math.floor(Math.random()*(10700-10600+1))+10600;
-        tabList[1].val =  Math.floor(Math.random()*(2433-2423+1))+2423;
-        tabList[2].val = 0.56;
-        percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-        percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-        percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-        getOption();
-        break;
-      case '2号回风立井':
-        // echartData[0].value = lineData[1].majorpath.drag_1;
-        // echartData[1].value = lineData[1].majorpath.drag_2;
-        // echartData[2].value = lineData[1].majorpath.drag_3;
-        // tabList[0].val = lineData[1].majorpath.drag_total;
-        // tabList[1].val = lineData[1].majorpath.m3_total;
-        echartData[0].value = Math.floor(Math.random()*(830-820+1))+820;
-        echartData[1].value =  Math.floor(Math.random()*(620-600+1))+600;
-        echartData[2].value =  Math.floor(Math.random()*(860-800+1))+800;
-        tabList[0].val =  Math.floor(Math.random()*(10100-10000+1))+10000;
-        tabList[1].val =  Math.floor(Math.random()*(2310-2210+1))+2210;
-        tabList[2].val = 0.78;
-        percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-        percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-        percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
-        getOption();
-        break;
-    }
+//获取dom节点
+let line = ref<any>();
+let lineData = reactive<any[]>([]);
+let searchValue = ref('');
+const lineTypeList = reactive<any[]>([]);
+
+let echartData = reactive<any[]>([
+  { name: '进风区', value: 0 },
+  { name: '用风区', value: 0 },
+  { name: '回风区', value: 0 },
+]);
+let xData = reactive<any[]>([]);
+let yData = reactive<any[]>([]);
+let percentE = ref<any>(0);
+let percentF = ref<any>(0);
+let percentT = ref<any>(0);
+
+let tabList = reactive<any[]>([
+  { name: '总风量(m³/min)', val: 0 },
+  { name: '总阻力(Pa)', val: 0 },
+  { name: '等积孔(m²)', val: 0 },
+]);
+//跳转详情
+function getDetail() {
+  console.log('跳转详情');
+  emit('goDetail', 'majorpath')
+}
+//选项切换
+function changeSelect(val) {
+  searchValue.value = val;
+  switch (val) {
+    case 'bet关键路线1':
+      echartData[0].value = lineData[0].majorpath.drag_1 || 0;
+      echartData[1].value = lineData[0].majorpath.drag_2 || 0;
+      echartData[2].value = lineData[0].majorpath.drag_3 || 0;
+      tabList[0].val = lineData[0].majorpath.drag_total || 0;
+      tabList[1].val = lineData[0].majorpath.m3_total || 0;
+      tabList[2].val = 0.78;
+      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+
+      // echartData[0].value = Math.floor(Math.random() * (629 - 620 + 1)) + 620;
+      // echartData[1].value = Math.floor(Math.random() * (949 - 940 + 1)) + 940;
+      // echartData[2].value = Math.floor(Math.random() * (855 - 850 + 1)) + 850;
+      // tabList[0].val = Math.floor(Math.random() * (10700 - 10600 + 1)) + 10600;
+      // tabList[1].val = Math.floor(Math.random() * (2433 - 2423 + 1)) + 2423;
+      // tabList[2].val = 0.56;
+      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      getOption();
+      break;
+    case 'bet关键路线2':
+      echartData[0].value = lineData[1].majorpath.drag_1 || 0;
+      echartData[1].value = lineData[1].majorpath.drag_2 || 0;
+      echartData[2].value = lineData[1].majorpath.drag_3 || 0;
+      tabList[0].val = lineData[1].majorpath.drag_total || 0;
+      tabList[1].val = lineData[1].majorpath.m3_total || 0;
+      tabList[2].val = 0.83;
+      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+
+      // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
+      // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
+      // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
+      // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
+      // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
+      // tabList[2].val = 0.78;
+      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      getOption();
+      break;
+    case 'sw关键路线1':
+      echartData[0].value = lineData[2].majorpath.drag_1 || 0;
+      echartData[1].value = lineData[2].majorpath.drag_2 || 0;
+      echartData[2].value = lineData[2].majorpath.drag_3 || 0;
+      tabList[0].val = lineData[2].majorpath.drag_total || 0;
+      tabList[1].val = lineData[2].majorpath.m3_total || 0;
+      tabList[2].val = 0.88;
+      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+
+      // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
+      // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
+      // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
+      // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
+      // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
+      // tabList[2].val = 0.78;
+      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      getOption();
+      break;
+    case 'sw关键路线2':
+      echartData[0].value = lineData[3].majorpath.drag_1 || 0;
+      echartData[1].value = lineData[3].majorpath.drag_2 || 0;
+      echartData[2].value = lineData[3].majorpath.drag_3 || 0;
+      tabList[0].val = lineData[3].majorpath.drag_total || 0;
+      tabList[1].val = lineData[3].majorpath.m3_total || 0;
+      tabList[2].val = 0.93;
+      percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+      percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2) || 0;
+
+      // echartData[0].value = Math.floor(Math.random() * (830 - 820 + 1)) + 820;
+      // echartData[1].value = Math.floor(Math.random() * (620 - 600 + 1)) + 600;
+      // echartData[2].value = Math.floor(Math.random() * (860 - 800 + 1)) + 800;
+      // tabList[0].val = Math.floor(Math.random() * (10100 - 10000 + 1)) + 10000;
+      // tabList[1].val = Math.floor(Math.random() * (2310 - 2210 + 1)) + 2210;
+      // tabList[2].val = 0.78;
+      // percentF.value = ((echartData[0].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentT.value = ((echartData[1].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      // percentE.value = ((echartData[2].value / (echartData[0].value + echartData[1].value + echartData[2].value)) * 100).toFixed(2);
+      getOption();
+      break;
   }
+}
 
-  function getOption() {
-    nextTick(() => {
-      function deepCopy(obj) {
-        if (typeof obj !== 'object') {
-          return obj;
-        }
-        var newobj = {};
-        for (var attr in obj) {
-          newobj[attr] = obj[attr];
-        }
-        return newobj;
+function getOption() {
+  nextTick(() => {
+    function deepCopy(obj) {
+      if (typeof obj !== 'object') {
+        return obj;
+      }
+      var newobj = {};
+      for (var attr in obj) {
+        newobj[attr] = obj[attr];
       }
+      return newobj;
+    }
 
-      echartData.map((a, b) => {
-        xData.push(a.name);
-        yData.push(a.value);
-      });
-      var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
-      var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
-      var RealData = [];
-      var borderData = [];
-      echartData.map((item, index) => {
-        var newobj = deepCopy(item);
-        var newobj1 = deepCopy(item);
-        RealData.push(newobj);
-        borderData.push(newobj1);
-      });
-      RealData.map((item, index) => {
-        item.itemStyle = {
-          normal: {
-            color: startColor[index],
+    echartData.map((a, b) => {
+      xData.push(a.name);
+      yData.push(a.value);
+    });
+    var startColor = ['rgba(255, 224, 28,.6)', 'rgba(31, 248, 251,.6)', 'rgba(154, 255, 168,.6)'];
+    var borderStartColor = ['#ffe01c', '#1ff8fb', '#9affa8'];
+    var RealData = [];
+    var borderData = [];
+    echartData.map((item, index) => {
+      var newobj = deepCopy(item);
+      var newobj1 = deepCopy(item);
+      RealData.push(newobj);
+      borderData.push(newobj1);
+    });
+    RealData.map((item, index) => {
+      item.itemStyle = {
+        normal: {
+          color: startColor[index],
+        },
+      };
+    });
+    borderData.map((item, index) => {
+      item.itemStyle = {
+        normal: {
+          color: borderStartColor[index],
+        },
+      };
+    });
+    const myChart = echarts.init(line.value);
+
+    let option = {
+      legend: [
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '12%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#b3b8cc',
           },
-        };
-      });
-      borderData.map((item, index) => {
-        item.itemStyle = {
-          normal: {
-            color: borderStartColor[index],
+          data: ['进风区'],
+        },
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '42%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#b3b8cc',
           },
-        };
-      });
-      const myChart = echarts.init(line.value);
-
-      let option = {
-        legend: [
-          {
-            // orient: 'vertical',
-            x: '50%',
-            y: '12%',
-            itemWidth: 10,
-            itemHeight: 10,
-            align: 'left',
-            textStyle: {
-              fontSize: 14,
-              color: '#b3b8cc',
+          data: ['用风区'],
+        },
+        {
+          // orient: 'vertical',
+          x: '50%',
+          y: '70%',
+          itemWidth: 10,
+          itemHeight: 10,
+          align: 'left',
+          textStyle: {
+            fontSize: 14,
+            color: '#b3b8cc',
+          },
+          data: ['回风区'],
+        },
+      ],
+      tooltip: {
+        formatter: '{b}:{c}',
+      },
+      series: [
+        // 主要展示层的
+        {
+          radius: ['40%', '80%'],
+          center: ['25%', '50%'],
+          type: 'pie',
+          z: 10,
+          label: {
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
             },
-            data: ['进风区'],
           },
-          {
-            // orient: 'vertical',
-            x: '50%',
-            y: '42%',
-            itemWidth: 10,
-            itemHeight: 10,
-            align: 'left',
-            textStyle: {
-              fontSize: 14,
-              color: '#b3b8cc',
+          labelLine: {
+            normal: {
+              show: false,
+            },
+            emphasis: {
+              show: false,
             },
-            data: ['用风区'],
           },
-          {
-            // orient: 'vertical',
-            x: '50%',
-            y: '70%',
-            itemWidth: 10,
-            itemHeight: 10,
-            align: 'left',
-            textStyle: {
-              fontSize: 14,
-              color: '#b3b8cc',
+          itemStyle: {
+            normal: {
+              borderWidth: 5,
+              borderColor: 'rgba(5, 45, 99)',
             },
-            data: ['回风区'],
           },
-        ],
-        tooltip: {
-          formatter: '{b}:{c}',
+          data: RealData,
         },
-        series: [
-          // 主要展示层的
-          {
-            radius: ['40%', '80%'],
-            center: ['25%', '50%'],
-            type: 'pie',
-            z: 10,
-            label: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
+        // 边框的设置
+        {
+          radius: ['45%', '52%'],
+          center: ['25%', '50%'],
+          type: 'pie',
+          z: 5,
+          label: {
+            normal: {
+              show: false,
             },
-            itemStyle: {
-              normal: {
-                borderWidth: 5,
-                borderColor: 'rgba(2, 39, 115)',
-              },
+            emphasis: {
+              show: false,
             },
-            data: RealData,
           },
-          // 边框的设置
-          {
-            radius: ['45%', '52%'],
-            center: ['25%', '50%'],
-            type: 'pie',
-            z: 5,
-            label: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
-            },
-            labelLine: {
-              normal: {
-                show: false,
-              },
-              emphasis: {
-                show: false,
-              },
+          labelLine: {
+            normal: {
+              show: false,
             },
-
-            animation: false,
-            tooltip: {
+            emphasis: {
               show: false,
             },
-            data: borderData,
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
 
-  watch(
-    () => props.lineList,
-    (val) => {
-      console.log(val, '关键路线数据');
-      lineData = val;
-      lineTypeList.length = 0;
-      lineData.forEach((el) => {
-        lineTypeList.push({
-          label: el.deviceName,
-          value: el.deviceName,
-        });
+          animation: false,
+          tooltip: {
+            show: false,
+          },
+          data: borderData,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
+
+watch(
+  () => props.lineList,
+  (val) => {
+    console.log(val, '关键路线数据');
+    lineData = val;
+    lineTypeList.length = 0;
+    lineData.forEach((el) => {
+      lineTypeList.push({
+        label: el.deviceName,
+        value: el.deviceName,
       });
-      searchValue.value = lineTypeList[0].value;
+    });
 
+    if (searchValue.value) {
+      changeSelect(searchValue.value);
+    } else {
+      searchValue.value = lineTypeList[0].value;
       changeSelect(searchValue.value);
-    },
-    {
-      deep: true,
     }
-  );
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  @font-face {
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../../assets/font/douyuFont.otf');
+}
+
+.windLine {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
     font-family: 'douyuFont';
-    src: url('../../../../../assets/font/douyuFont.otf');
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
+    }
   }
-  .windLine {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .title-top {
+
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
+
+    .icon-search {
       position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
+    }
+  }
+
+  .line-echart {
+    position: absolute;
+    top: 66px;
+    left: 0;
+    width: 100%;
+    height: 120px;
+
+    .line {
+      width: 100%;
+      height: 100%;
     }
-    .toggle-search {
+
+    .pic {
+      height: 100%;
       position: absolute;
-      left: 9px;
-      top: 37px;
+      left: 45%;
+      top: 0;
       display: flex;
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
+      align-items: center;
+
+      img {
+        height: 60%;
       }
     }
-    .line-echart {
+
+    .percent {
       position: absolute;
-      top: 66px;
-      left: 0;
-      width: 100%;
-      height: 120px;
-      .line {
-        width: 100%;
-        height: 100%;
-      }
-      .pic {
-        height: 100%;
-        position: absolute;
-        left: 45%;
-        top: 0;
-        display: flex;
-        align-items: center;
-        img {
-          height: 60%;
+      left: 75%;
+      top: 0;
+      width: 45px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-between;
+      align-items: center;
+
+      .percent-box {
+        font-size: 14px;
+
+        // color: #b3b8cc;
+        &:nth-child(1) {
+          position: absolute;
+          top: 12%;
+          color: #ffe01c;
         }
-      }
-      .percent {
-        position: absolute;
-        left: 75%;
-        top: 0;
-        width: 45px;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        // justify-content: space-between;
-        align-items: center;
-        .percent-box {
-          font-size: 14px;
-          // color: #b3b8cc;
-          &:nth-child(1) {
-            position: absolute;
-            top: 12%;
-            color: #ffe01c;
-          }
-          &:nth-child(2) {
-            position: absolute;
-            top: 42%;
-            color: #1ff8fb;
-          }
-          &:nth-child(3) {
-            position: absolute;
-            top: 70%;
-            color: #9affa8;
-          }
-          .dw {
-            color: #b3b8cc;
-            margin-left: 5px;
-          }
+
+        &:nth-child(2) {
+          position: absolute;
+          top: 42%;
+          color: #1ff8fb;
+        }
+
+        &:nth-child(3) {
+          position: absolute;
+          top: 70%;
+          color: #9affa8;
+        }
+
+        .dw {
+          color: #b3b8cc;
+          margin-left: 5px;
         }
       }
     }
-    .line-card {
-      position: absolute;
-      top: 186px;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 186px);
-      padding: 0px 15px 15px 15px;
-      box-sizing: border-box;
+  }
+
+  .line-card {
+    position: absolute;
+    top: 186px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 186px);
+    padding: 0px 15px 15px 15px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .card-item {
       display: flex;
-      justify-content: space-around;
+      flex: 1;
+      justify-content: center;
       align-items: center;
-      .card-item {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        .item-s {
-          position: relative;
-          width: 105px;
-          height: 58px;
-          margin-top: 20px;
-          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
-          background-size: 100% 90%;
-          .item-label {
-            width: 100%;
-            text-align: center;
-            color: #b3b8cc;
-            font-size: 12px;
-          }
-          .item-val {
-            position: absolute;
-            left: 50%;
-            top: 26px;
-            font-size: 14px;
-            font-family: 'douyuFont';
-            color: #fff;
-            transform: translate(-50%, 0);
-          }
+      height: 100%;
+
+      .item-s {
+        position: relative;
+        width: 105px;
+        height: 58px;
+        margin-top: 20px;
+        background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+        background-size: 100% 90%;
+
+        .item-label {
+          width: 100%;
+          text-align: center;
+          color: #b3b8cc;
+          font-size: 12px;
+        }
+
+        .item-val {
+          position: absolute;
+          left: 50%;
+          top: 26px;
+          font-size: 14px;
+          font-family: 'douyuFont';
+          color: #fff;
+          transform: translate(-50%, 0);
         }
       }
     }
   }
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-  :deep .zxm-select-arrow {
-    color: #fff !important;
-  }
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}
 </style>

src/views/vent/home/colliery/components/work-monitor.vue

@@ -5,13 +5,8 @@
       <i class="icon-search">
         <SvgIcon class="icon" size="14" name="toggle" />
       </i>
-      <a-select
-        v-model:value="searchValue"
-        style="width: 180px; margin-right: 10px"
-        :options="workTypeList"
-        aria-placeholder="请选择"
-        @change="changeSelect"
-      />
+      <a-select v-model:value="searchValue" style="width: 180px; margin-right: 10px" :options="workTypeList"
+        aria-placeholder="请选择" @change="changeSelect" />
     </div>
     <div class="work-echart">
       <div class="work" ref="work"></div>
@@ -28,360 +23,378 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
-  import { SvgIcon } from '/@/components/Icon';
-  import * as echarts from 'echarts';
+import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import * as echarts from 'echarts';
 
-  let props = defineProps({
-    workList: Array,
-  });
-  const emit = defineEmits(['goDetail']);
-  let workData = reactive<any[]>([]);
-  let searchValue = ref('');
-  const workTypeList = reactive<any[]>([]);
+let props = defineProps({
+  workList: Array,
+});
+const emit = defineEmits(['goDetail']);
+let workData = reactive<any[]>([]);
+let searchValue = ref('');
+const workTypeList = reactive<any[]>([]);
 
-  let tabList = reactive<any[]>([
-    { name: '进风量(m³/min)', val: null },
-    { name: '回风量(m³/min)', val: null },
-    { name: '需风量(m³/min)', val: null },
-  ]);
+let tabList = reactive<any[]>([
+  { name: '进风量(m³/min)', val: null },
+  { name: '回风量(m³/min)', val: null },
+  { name: '需风量(m³/min)', val: null },
+]);
 
-  let work = ref<any>();
-  let echartData = reactive({
-    xdata: [],
-    ydata: [],
-    ydata1: [],
-  });
-  //跳转详情
-  function getDetail() {
-    console.log('跳转详情');
-    emit('goDetail', 'work');
-  }
-  //选项切换
-  function changeSelect(val) {
-    switch (val) {
-      case '15212工作面':
-        tabList[0].val = workData[0].jin;
-        tabList[1].val = workData[0].hui;
-        tabList[2].val = workData[0].xufengliang;
-        echartData.xdata.length = 0;
-        echartData.ydata.length = 0;
-        echartData.ydata1.length = 0;
-        workData[0].history.forEach((el) => {
-          echartData.xdata.push(el.time);
-          echartData.ydata.push(el.jin);
-          echartData.ydata1.push(el.hui);
-        });
+let work = ref<any>();
+let echartData = reactive({
+  xdata: [],
+  ydata: [],
+  ydata1: [],
+});
+//跳转详情
+function getDetail() {
+  console.log('跳转详情');
+  emit('goDetail', 'work');
+}
+//选项切换
+function changeSelect(val) {
+  searchValue.value = val;
+  switch (val) {
+    case '15212工作面':
+      tabList[0].val = workData[0].jin;
+      tabList[1].val = workData[0].hui;
+      tabList[2].val = workData[0].xufengliang;
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      echartData.ydata1.length = 0;
+      workData[0].history.forEach((el) => {
+        echartData.xdata.push(el.time);
+        echartData.ydata.push(el.jin);
+        echartData.ydata1.push(el.hui);
+      });
 
-        getOption();
-        break;
-      case '采煤工作面':
-        tabList[0].val = workData[1].jin;
-        tabList[1].val = workData[1].hui;
-        tabList[2].val = workData[1].xufengliang;
-        echartData.xdata.length = 0;
-        echartData.ydata.length = 0;
-        echartData.ydata1.length = 0;
-        workData[1].history.forEach((el) => {
-          echartData.xdata.push(el.time);
-          echartData.ydata.push(el.jin);
-          echartData.ydata1.push(el.hui);
-        });
-        getOption();
-        break;
-    }
+      getOption();
+      break;
+    case '采煤工作面':
+      tabList[0].val = workData[1].jin;
+      tabList[1].val = workData[1].hui;
+      tabList[2].val = workData[1].xufengliang;
+      echartData.xdata.length = 0;
+      echartData.ydata.length = 0;
+      echartData.ydata1.length = 0;
+      workData[1].history.forEach((el) => {
+        echartData.xdata.push(el.time);
+        echartData.ydata.push(el.jin);
+        echartData.ydata1.push(el.hui);
+      });
+      getOption();
+      break;
   }
+}
 
-  function getOption() {
-    nextTick(() => {
-      const myChart = echarts.init(work.value);
-      let option = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-          },
+function getOption() {
+  nextTick(() => {
+    const myChart = echarts.init(work.value);
+    let option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
         },
+      },
 
-        legend: {
-          align: 'left',
-          right: '4%',
-          top: '6%',
-          type: 'plain',
-          textStyle: {
-            color: '#7ec7ff',
-            fontSize: 12,
-          },
-          // icon:'rect',
-          itemGap: 25,
-          itemWidth: 18,
-          icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-          data: [
-            {
-              name: '工作面进风',
-            },
-            {
-              name: '工作面回风',
-            },
-            // {
-            //   name: '工作面需风'
-            // }
-          ],
+      legend: {
+        align: 'left',
+        right: '4%',
+        top: '6%',
+        type: 'plain',
+        textStyle: {
+          color: '#7ec7ff',
+          fontSize: 12,
         },
+        // icon:'rect',
+        itemGap: 25,
+        itemWidth: 18,
+        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
+        data: [
+          {
+            name: '工作面进风',
+          },
+          {
+            name: '工作面回风',
+          },
+          // {
+          //   name: '工作面需风'
+          // }
+        ],
+      },
 
-        grid: {
-          top: '28%',
-          left: '5%',
-          right: '5%',
-          bottom: '5%',
-          containLabel: true,
-        },
+      grid: {
+        top: '28%',
+        left: '5%',
+        right: '5%',
+        bottom: '5%',
+        containLabel: true,
+      },
 
-        xAxis: [
-          {
-            type: 'category',
-            // boundaryGap: false,
-            axisLine: {
-              //坐标轴轴线相关设置。数学上的x轴
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164)',
-              },
-            },
-            axisLabel: {
-              //坐标轴刻度标签的相关设置
-              textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
-                fontSize: 12,
-              },
-              formatter: function (data) {
-                return data;
-              },
+      xAxis: [
+        {
+          type: 'category',
+          // boundaryGap: false,
+          axisLine: {
+            //坐标轴轴线相关设置。数学上的x轴
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
             },
-            splitLine: {
-              show: false,
+          },
+          axisLabel: {
+            //坐标轴刻度标签的相关设置
+            textStyle: {
+              color: '#b3b8cc',
+              padding: 0,
+              fontSize: 12,
             },
-            axisTick: {
-              show: false,
+            formatter: function (data) {
+              return data;
             },
-            data: echartData.xdata,
           },
-        ],
+          splitLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          data: echartData.xdata,
+        },
+      ],
 
-        yAxis: [
-          {
-            name: 'm³/s',
-            nameTextStyle: {
-              color: '#b3b8cc',
-              fontSize: 12,
-              padding: -10,
+      yAxis: [
+        {
+          name: 'm³/s',
+          nameTextStyle: {
+            color: '#b3b8cc',
+            fontSize: 12,
+            padding: -10,
+          },
+          min: 0,
+          splitNumber: 3,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164,.4)',
             },
-            min: 0,
-            splitNumber: 3,
-            splitLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164,.4)',
-              },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: 'rgba(62, 103, 164)',
             },
-            axisLine: {
-              show: true,
-              lineStyle: {
-                color: 'rgba(62, 103, 164)',
-              },
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: '#b3b8cc',
+              padding: 0,
+              fontSize: 12,
             },
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: '#b3b8cc',
-                padding: 0,
-                fontSize: 12,
-              },
-              formatter: function (value) {
-                if (value === 0) {
-                  return value;
-                }
+            formatter: function (value) {
+              if (value === 0) {
                 return value;
-              },
-            },
-            axisTick: {
-              show: false,
+              }
+              return value;
             },
           },
-        ],
-        series: [
-          {
-            name: '工作面进风',
-            type: 'line',
-            yAxisIndex: 0,
-            symbolSize: 6,
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: 'orange', // 线条颜色
-              },
-              borderColor: 'rgba(0,0,0,.4)',
-            },
-            itemStyle: {
-              color: 'orange',
-              borderColor: '#646ace',
-              borderWidth: 0,
+          axisTick: {
+            show: false,
+          },
+        },
+      ],
+      series: [
+        {
+          name: '工作面进风',
+          type: 'line',
+          yAxisIndex: 0,
+          symbolSize: 6,
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: 'orange', // 线条颜色
             },
-            data: echartData.ydata,
+            borderColor: 'rgba(0,0,0,.4)',
           },
-          {
-            name: '工作面回风',
-            type: 'line',
-            yAxisIndex: 0,
-            symbolSize: 6,
+          itemStyle: {
+            color: 'orange',
+            borderColor: '#646ace',
+            borderWidth: 0,
+          },
+          data: echartData.ydata,
+        },
+        {
+          name: '工作面回风',
+          type: 'line',
+          yAxisIndex: 0,
+          symbolSize: 6,
 
-            lineStyle: {
-              normal: {
-                width: 2,
-                color: '#1891de', // 线条颜色
-              },
-              borderColor: 'rgba(0,0,0,.4)',
-            },
-            itemStyle: {
-              color: '#1891de',
-              borderColor: '#646ace',
-              borderWidth: 0,
+          lineStyle: {
+            normal: {
+              width: 2,
+              color: '#1891de', // 线条颜色
             },
-            data: echartData.ydata1,
+            borderColor: 'rgba(0,0,0,.4)',
           },
-        ],
-      };
-      myChart.setOption(option);
-      window.onresize = function () {
-        myChart.resize();
-      };
-    });
-  }
+          itemStyle: {
+            color: '#1891de',
+            borderColor: '#646ace',
+            borderWidth: 0,
+          },
+          data: echartData.ydata1,
+        },
+      ],
+    };
+    myChart.setOption(option);
+    window.onresize = function () {
+      myChart.resize();
+    };
+  });
+}
 
-  watch(
-    () => props.workList,
-    (val) => {
-      console.log(val, '工作面数据');
-      workData = val;
-      workTypeList.length = 0;
-      workData.forEach((el) => {
-        workTypeList.push({
-          label: el.deviceName,
-          value: el.deviceName,
-        });
+watch(
+  () => props.workList,
+  (val) => {
+    console.log(val, '工作面数据');
+    workData = val;
+    workTypeList.length = 0;
+    workData.forEach((el) => {
+      workTypeList.push({
+        label: el.deviceName,
+        value: el.deviceName,
       });
-      searchValue.value = workTypeList[0].value;
+    });
 
+    if (searchValue.value) {
+      changeSelect(searchValue.value);
+    } else {
+      searchValue.value = workTypeList[0].value;
       changeSelect(searchValue.value);
-    },
-    {
-      deep: true,
     }
-  );
+  },
+  {
+    deep: true,
+  }
+);
 
-  onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style lang="less" scoped>
-  .workMonitor {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    .title-top {
-      position: absolute;
-      top: 9px;
-      left: 46px;
-      color: #fff;
-      font-size: 16px;
-      font-family: 'douyuFont';
-      cursor: pointer;
-      &:hover {
-        color: #66ffff;
-      }
+.workMonitor {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .title-top {
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    color: #fff;
+    font-size: 16px;
+    font-family: 'douyuFont';
+    cursor: pointer;
+
+    &:hover {
+      color: #66ffff;
     }
-    .toggle-search {
+  }
+
+  .toggle-search {
+    position: absolute;
+    left: 9px;
+    top: 37px;
+    display: flex;
+
+    .icon-search {
       position: absolute;
-      left: 9px;
-      top: 37px;
-      display: flex;
-      .icon-search {
-        position: absolute;
-        top: 50%;
-        left: 5px;
-        transform: translate(0%, -50%);
-      }
+      top: 50%;
+      left: 5px;
+      transform: translate(0%, -50%);
     }
-    .work-echart {
-      position: absolute;
-      top: 66px;
-      left: 0;
-      height: 120px;
-      margin: 5px 0px;
-      padding: 0px 20px;
-      box-sizing: border-box;
-      width: 100%;
-      .work {
-        height: 100%;
-        background: url('../../../../../assets/images/home-container/work-bd.png') no-repeat;
-        background-size: 100% 100%;
-      }
+  }
+
+  .work-echart {
+    position: absolute;
+    top: 66px;
+    left: 0;
+    height: 120px;
+    margin: 5px 0px;
+    padding: 0px 20px;
+    box-sizing: border-box;
+    width: 100%;
+
+    .work {
+      height: 100%;
+      background: url('../../../../../assets/images/home-container/work-bd.png') no-repeat;
+      background-size: 100% 100%;
     }
-    .work-card {
-      position: absolute;
-      top: 186px;
-      left: 0;
-      width: 100%;
-      height: calc(100% - 186px);
-      padding: 0px 15px 15px 15px;
-      box-sizing: border-box;
+  }
+
+  .work-card {
+    position: absolute;
+    top: 186px;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 186px);
+    padding: 0px 15px 15px 15px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .card-item {
       display: flex;
-      justify-content: space-around;
+      flex: 1;
+      justify-content: center;
       align-items: center;
-      .card-item {
-        display: flex;
-        flex: 1;
-        justify-content: center;
-        align-items: center;
-        height: 100%;
-        .item-s {
-          position: relative;
-          width: 105px;
-          height: 58px;
-          margin-top: 20px;
-          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
-          background-size: 100% 90%;
-          .item-label {
-            width: 100%;
-            text-align: center;
-            color: #b3b8cc;
-            font-size: 12px;
-          }
-          .item-val {
-            position: absolute;
-            left: 50%;
-            top: 28px;
-            font-size: 14px;
-            font-family: 'douyuFont';
-            color: #fff;
-            transform: translate(-50%, 0);
-          }
+      height: 100%;
+
+      .item-s {
+        position: relative;
+        width: 105px;
+        height: 58px;
+        margin-top: 20px;
+        background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
+        background-size: 100% 90%;
+
+        .item-label {
+          width: 100%;
+          text-align: center;
+          color: #b3b8cc;
+          font-size: 12px;
+        }
+
+        .item-val {
+          position: absolute;
+          left: 50%;
+          top: 28px;
+          font-size: 14px;
+          font-family: 'douyuFont';
+          color: #fff;
+          transform: translate(-50%, 0);
         }
       }
     }
   }
-  :deep .zxm-select-selector {
-    width: 100%;
-    height: 30px !important;
-    padding: 0 11px 0px 25px !important;
-    background-color: rgba(8, 148, 255, 0.3) !important;
-    border: 1px solid #1d80da !important;
-  }
-  :deep .zxm-select-selection-item {
-    color: #fff !important;
-    line-height: 28px !important;
-  }
-  :deep .zxm-select-arrow {
-    color: #fff !important;
-  }
-</style>
+}
+
+:deep .zxm-select-selector {
+  width: 100%;
+  height: 30px !important;
+  padding: 0 11px 0px 25px !important;
+  background-color: rgba(8, 148, 255, 0.3) !important;
+  border: 1px solid #1d80da !important;
+}
+
+:deep .zxm-select-selection-item {
+  color: #fff !important;
+  line-height: 28px !important;
+}
+
+:deep .zxm-select-arrow {
+  color: #fff !important;
+}</style>

src/views/vent/monitorManager/alarmMonitor/fire.data.ts

@@ -57,12 +57,6 @@ export const topList = [
   },
 ];
 
-//光钎测温测点编号列表
-export const pointList = [
-  { label: '测点1', value: 0 },
-  { label: '测点2', value: 1 },
-];
-
 //光钎图表数据
 export const echartDataGq = {
   maxData: [],
@@ -71,12 +65,6 @@ export const echartDataGq = {
   xData: [],
 };
 
-//束管监测-测点编号列表
-export const pointList1 = [
-  { label: '测点1', value: 0 },
-  { label: '测点2', value: 1 },
-];
-
 //束管监测选项列表
 export const contentList = [
   {
@@ -205,15 +193,6 @@ export const columns = [
   { rowIndex: 2, dataIndex: 'warnFlag', title: '状态', type: '1', align: 'center' },
   { rowIndex: 3, dataIndex: 'readTime', title: '时间', type: '1', align: 'center' },
 ];
-
-//外因火灾温度监测-测点列表
-export const pointOutList = [
-  { label: '测点1', value: 0 },
-  { label: '测点2', value: 1 },
-];
-
-
-
 //井下消防材料库列表
 export const dataList = [
   {

src/views/vent/monitorManager/alarmMonitor/fire/closeWall.vue

@@ -136,7 +136,7 @@ let activeIndex = ref(0)
 //当前激活密闭参数类型
 let type = ref('O2')
 //时间查询参数
-let TimeRange = reactive<any>([])
+// let TimeRange = reactive<any>([])
 
 let echartDataSg1 = reactive({
     xData: [],
@@ -199,9 +199,9 @@ function btnClick(item, ind) {
 
 }
 //时间选项切换
-function onDataChange(value, dateString) {
-    TimeRange = [dateString[0], dateString[1]]
-}
+// function onDataChange(value, dateString) {
+//     TimeRange = [dateString[0], dateString[1]]
+// }
 
 watch(() => props.listData, (val) => {
     console.log(val, 'val---')

src/views/vent/monitorManager/alarmMonitor/fire/dustPage.vue

@@ -47,7 +47,7 @@ let topAreaList = reactive<any[]>([])
 let activeIndex = ref(0)
 
 //中间区域数据
-let centerAreaListB = reactive<any[]>([])
+// let centerAreaListB = reactive<any[]>([])
 let choiceData = reactive<any[]>([])
 
 //粉尘图表数据
@@ -70,17 +70,17 @@ let echartDataFc = reactive({
 //顶部区域选项切换
 function topAreaClick(index) {
     activeIndex.value = index
-    centerAreaListB.length = 0
+    // centerAreaListB.length = 0
     echartDataFc.maxData.data.length = 0
     echartDataFc.minData.data.length = 0
     echartDataFc.aveValue.data.length = 0
     echartDataFc.xData.length = 0
-    centerAreaListB.push(
-        { content: choiceData[index].readData.dustval || '/' },
-        { content: choiceData[index].readData.totalDust || '/' },
-        { content: choiceData[index].readData.breathWeighted || '/' },
-        { content: choiceData[index].readData.atomizingState || '/' },
-    )
+    // centerAreaListB.push(
+    //     { content: choiceData[index].readData.dustval || '/' },
+    //     { content: choiceData[index].readData.totalDust || '/' },
+    //     { content: choiceData[index].readData.breathWeighted || '/' },
+    //     { content: choiceData[index].readData.atomizingState || '/' },
+    // )
     choiceData[index].history.forEach(el => {
         echartDataFc.maxData.data.push(el.dustval)
         echartDataFc.minData.data.push(el.ratio)
@@ -105,18 +105,18 @@ watch(() => props.listData, (val) => {
             },)
         })
         choiceData = val.common.dust
-        centerAreaListB.length = 0
+        // centerAreaListB.length = 0
         echartDataFc.maxData.data.length = 0
         echartDataFc.minData.data.length = 0
         echartDataFc.aveValue.data.length = 0
         echartDataFc.xData.length = 0
         if (choiceData[activeIndex.value]) {
-            centerAreaListB.push(
-                { content: choiceData[activeIndex.value].readData.dustval || '--' },
-                { content: choiceData[activeIndex.value].readData.totalDust || '--' },
-                { content: choiceData[activeIndex.value].readData.breathWeighted || '--'},
-                { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
-            )
+            // centerAreaListB.push(
+            //     { content: choiceData[activeIndex.value].readData.dustval || '--' },
+            //     { content: choiceData[activeIndex.value].readData.totalDust || '--' },
+            //     { content: choiceData[activeIndex.value].readData.breathWeighted || '--'},
+            //     { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
+            // )
 
             choiceData[activeIndex.value].history.forEach(el => {
                 echartDataFc.maxData.data.push(el.dustval)
@@ -128,12 +128,12 @@ watch(() => props.listData, (val) => {
 
         } else {
             activeIndex.value = 0
-            centerAreaListB.push(
-                { content: choiceData[activeIndex.value].readData.dustval || '--' },
-                { content: choiceData[activeIndex.value].readData.totalDust || '--' },
-                { content: choiceData[activeIndex.value].readData.breathWeighted || '--' },
-                { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
-            )
+            // centerAreaListB.push(
+            //     { content: choiceData[activeIndex.value].readData.dustval || '--' },
+            //     { content: choiceData[activeIndex.value].readData.totalDust || '--' },
+            //     { content: choiceData[activeIndex.value].readData.breathWeighted || '--' },
+            //     { content: choiceData[activeIndex.value].readData.atomizingState || '--' },
+            // )
             choiceData[activeIndex.value].history.forEach(el => {
                 echartDataFc.maxData.data.push(el.dustval)
                 echartDataFc.minData.data.push(el.ratio)

src/views/vent/monitorManager/alarmMonitor/fire/fireWork.vue

@@ -80,7 +80,7 @@ import { onMounted, ref, reactive, watch, defineProps } from 'vue';
 import imgUrl from '../../../../../assets/images/fire/pie.png'
 import echartLine from './common/echartLine.vue'
 import echartLine1 from './common/echartLine1.vue'
-import { topList, pointList, pointList1, contentList, } from '../fire.data'
+import { topList, contentList, } from '../fire.data'
 
 let props = defineProps({
     listData: Object,
@@ -104,25 +104,25 @@ let echartDataSg = reactive({
 })
 let echartDataSgList = reactive<any[]>([])
 //光钎测温测点编号
-let pointCode = ref('')
+// let pointCode = ref('')
 //束管监测-查询时间
-let TimeRange = reactive<any>([])
+// let TimeRange = reactive<any>([])
 //束管监测-测点编号
-let pointCode1 = ref('')
+// let pointCode1 = ref('')
 
 
 //光钎测温测点编号选项切换
-function handleChange(val) {
-    pointCode.value = val
-}
+// function handleChange(val) {
+//     pointCode.value = val
+// }
 //束管监测-时间选项切换
-function onDataChange(value, dateString) {
-    TimeRange = [dateString[0], dateString[1]]
-}
+// function onDataChange(value, dateString) {
+//     TimeRange = [dateString[0], dateString[1]]
+// }
 //束管监测测点编号选项切换
-function handleChange1(val) {
-    pointCode1.value = val
-}
+// function handleChange1(val) {
+//     pointCode1.value = val
+// }
 //束管实时数据选项点击
 function getSgClick(items) {
     echartDataSg.xData.length = 0

src/views/vent/monitorManager/alarmMonitor/fire/mainWell.vue

@@ -100,8 +100,6 @@
             <div class="echart-box">
                 <div class="title-f">
                     <div class="title-text">{{ `${type}趋势` }}</div>
-                    <!-- <a-range-picker v-model="TimeRange" :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                        :placeholder="['开始时间', '终止时间']" @change="onDataChange" /> -->
                 </div>
                 <div class="echarts-box">
                     <echartLine1 :echartDataSg="echartDataSg1"></echartLine1>
@@ -113,7 +111,7 @@
 
 <script lang="ts" setup>
 import { ref, computed, reactive, watch, defineProps } from 'vue';
-import { topOutList, tabList, columns, pointOutList, } from '../fire.data'
+import { topOutList, tabList, columns, } from '../fire.data'
 import imgUrl from '../../../../../assets/images/fire/pie.png'
 import echartLine2 from './common/echartLine2.vue'
 import echartLine1 from './common/echartLine1.vue'
@@ -220,7 +218,7 @@ let monitorlistPl = reactive([])
 
 
 //温度监测-测点编码
-let pointCode = ref('')
+// let pointCode = ref('')
 
 
 
@@ -280,9 +278,9 @@ function btnClick(item, ind) {
 
 
 //温度监测测点编号选项切换
-function handleChange(val) {
-    pointCode.value = val
-}
+// function handleChange(val) {
+//     pointCode.value = val
+// }
 
 watch(() => props.listData, (val) => {
     console.log(val, 'val---------------')