mky-vent-5/src/views/vent/home/clique/components/work-monitor.vue

<template>
  <div class="workMonitor">
    <div class="title-top" @click="getDetail">工作面智能管控</div>
    <div class="toggle-search">
      <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"
      />
    </div>
    <div class="work-echart">
      <div class="work" ref="work"></div>
    </div>
    <div class="work-card">
      <div class="card-item" v-for="(item, index) in tabList" :key="index">
        <div class="item-s">
          <div class="item-label">{{ item.name }}</div>
          <div class="item-val">{{ item.val }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick, onMounted, defineProps, watch } from 'vue';
  import { SvgIcon } from '/@/components/Icon';
  import * as echarts from 'echarts';

  let props = defineProps({
    workList: Array,
  });

  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 work = ref<any>();
  let echartData = reactive({
    xdata: [],
    ydata: [],
    ydata1: [],
  });
  //跳转详情
  function getDetail() {
    console.log('跳转详情');
  }
  //选项切换
  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);
        });

        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',
          },
        },

        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,
        },

        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;
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: echartData.xdata,
          },
        ],

        yAxis: [
          {
            name: 'm³/s',
            nameTextStyle: {
              color: '#b3b8cc',
              fontSize: 12,
              padding: -10,
            },
            min: 0,
            splitLine: {
              show: true,
              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: 12,
              },
              formatter: function (value) {
                if (value === 0) {
                  return value;
                }
                return value;
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        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,
            },
            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,
            },
            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,
        });
      });
      searchValue.value = workTypeList[0].value;

      changeSelect(searchValue.value);
    },
    {
      deep: true,
    }
  );

  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;
      }
    }
    .toggle-search {
      position: absolute;
      left: 9px;
      top: 37px;
      display: flex;
      .icon-search {
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translate(0%, -50%);
      }
    }
    .work-echart {
      position: absolute;
      top: 66px;
      left: 0;
      height: 110px;
      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;
      display: flex;
      justify-content: space-around;
      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;
          background: url('../../../../../assets/images/home-container/line-val.png') no-repeat;
          .item-label {
            width: 100%;
            text-align: center;
            color: #b3b8cc;
            font-size: 12px;
          }
          .item-val {
            position: absolute;
            left: 50%;
            top: 31px;
            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>