mky-vent-5/src/views/dashboard/Analysis/homePage/workerFace.vue

<template>
  <div class="center-container">
    <div class="lr-box left-box">
      <!-- <div class="container-title">
        <a-select class="title-select" ref="select" v-model:value="currentTitleValue" @change="handleTitleChange">
          <a-select-option value="2">15212工作面</a-select-option>
          <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
          <a-select-option value="3">掘进工作面</a-select-option>
        </a-select>
      </div> -->

      <div class="item">
        <dv-decoration7 style="height: 30px">
          <div class="base-title">监测信息</div>
        </dv-decoration7>
        <div class="need-air-group vent-flex-row">
          <div class="air-box">
            <div class="title">总进风量</div>
            <div class="air-num">10000</div>
          </div>
          <div class="air-box">
            <div class="title">总回风量</div>
            <div class="air-num">80000</div>
          </div>
          <div class="air-box">
            <div class="title">总需风量</div>
            <div class="air-num">90000</div>
          </div>
        </div>
        <div class="item-container">
          <BarAndLineCustom xAxisPropType="time" :chartData="monitorData" height="240px" :propTypeArr="['jin', 'hui']" :option="echartsOption" />
        </div>
      </div>
      <div class="item">
        <dv-decoration7 style="height: 30px">
          <div class="base-title">基本信息</div>
        </dv-decoration7>
        <div class="base-information-box">
          <div class="base-information">
            <div v-for="(device, index) in workerFaceDeviceList" :key="index" class="device-num-box">
              <div class="icon"></div>
              <div class="text-box">
                <div class="title">{{ device.title }}</div>
                <div class="value">{{ device.value }}套</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lr-box right-box">
      <div class="warning-box">
        <dv-decoration7 style="height: 30px">
          <div class="base-title">报警信息</div>
        </dv-decoration7>
        <div class="warning-top">
          <div class="warning-icon">
            <div class="title">告警信息</div>
            <div class="num-box">
              <div class="num">20</div>
              <div class="rate-box">
                <div class="day-rate">日环比: +2%</div>
                <div class="week-rate">周环比: +2%</div>
                <div class="moth-rate">月环比: +2%</div>
              </div>
            </div>
          </div>
          <div class="warning-icon">
            <div class="title">预警信息</div>
            <div class="num-box">
              <div class="num">20</div>
              <div class="rate-box">
                <div class="day-rate">日环比: +2%</div>
                <div class="week-rate">周环比: +2%</div>
                <div class="moth-rate">月环比: +2%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="warning-monitor">
        <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 220px" />
      </div>
      <div class="device-monitor-box">
        <dv-decoration7 style="height: 30px">
          <div class="base-title">设备信息</div>
        </dv-decoration7>
        <div class="device-btn-group">
          <div
            v-for="deviceType in deviceTypes"
            class="device-btn"
            :class="{ 'device-active': deviceActive === deviceType.type }"
            :key="deviceType.type"
            @click="showDeviceMonitor(deviceType)"
            >{{ deviceType.text }}</div
          >
        </div>
        <div class="device-table" :class="{ 'device-table-open': deviceActive, 'device-table-close': !deviceActive }">
          <div class="vent-flex-row device-tab">
            <div class="tab tab-active">设备监测</div>
            <a-divider type="vertical" style="height: 10px; background-color: #aaa" />
            <div class="tab">历史信息</div>
          </div>
          <div class="device-animation">
            <MonitorTable
              class="monitor-table"
              :columnsType="deviceColumnsType"
              :dataSource="deviceMonitorData"
              title="风门监测"
              :isShowSelect="false"
              :isShowPagination="false"
              :isShowActionColumn="true"
              :scroll="{ y: 160 }"
            >
              <template #filterCell="{ column, record }">
                <template v-if="record.frontGateOpenCtrl">
                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
                    >正在打开</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen'" color="processing">打开</a-tag>
                </template>
                <template v-else>
                  <a-tag v-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 0" color="red"
                    >正在关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 0 && record.frontGateClose == 1" color="default"
                    >关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'frontGateOpen' && record.frontGateOpen == 1 && record.frontGateClose == 0" color="default"
                    >打开</a-tag
                  >
                </template>
                <template v-if="record.rearGateOpenCtrl">
                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
                    >正在打开</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen'" color="processing">打开</a-tag>
                </template>
                <template v-else>
                  <a-tag v-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 0" color="red"
                    >正在关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 0 && record.rearGateClose == 1" color="default"
                    >关闭</a-tag
                  >
                  <a-tag v-else-if="column.dataIndex === 'rearGateOpen' && record.rearGateOpen == 1 && record.rearGateClose == 0" color="default"
                    >打开</a-tag
                  >
                </template>

                <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : 'red'">{{
                  record.warnFlag == 0 ? '正常' : '报警'
                }}</a-tag>
                <a-tag v-if="column.dataIndex === 'netStatus'" :color="record.netStatus == 0 ? 'default' : 'green'">{{
                  record.netStatus == 0 ? '断开' : '连接'
                }}</a-tag>
              </template>
              <template #action="{ record }">
                <TableAction
                  :actions="[
                    {
                      label: '详情',
                      onClick: goDetail.bind(null, record),
                    },
                    {
                      label: '定位',
                      onClick: goDetail.bind(null, record),
                    },
                  ]"
                />
              </template>
            </MonitorTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { TableAction } from '/@/components/Table';
  import { onMounted, onUnmounted, ref, reactive } from 'vue';
  import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard, BorderBox7 as DvBorderBox7 } from '@kjgl77/datav-vue3';
  import { workerFaceDeviceList } from '../home.data';
  import BarAndLineCustom from '/@/components/chart/BarAndLineCustom.vue';
  import { list, deviceMonitor } from '../home.api';
  import echarts from '/@/utils/lib/echarts';
  import MonitorTable from '/@/views/vent/monitorManager/comment/MonitorTable.vue';

  const currentTitleValue = ref('2'); // 监测工作面id

  const monitorData = ref([]); // 存放监测数据

  const echartsOption = reactive({
    tooltip: { trigger: 'axis', axisPointer: { lineStyle: { color: '#fff' } } },
    legend: {
      top: '10',
      icon: 'rect',
      // itemWidth: 14, itemHeight: 5, itemGap: 10,
      data: ['进风', '回风'],
      right: '10px',
      textStyle: { fontSize: 12, color: '#fff' },
    },
    grid: { x: 50, y: 50, x2: 12, y2: 40 },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: { lineStyle: { color: '#57617B' } },
      axisLabel: { textStyle: { color: '#ffffffcc' } },
      splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed' } },
      data: [],
    },
    yAxis: [
      {
        type: 'value',
        name: 'm³/min',
        axisTick: {
          show: false,
        },
        axisLine: { lineStyle: { show: true, color: '#57617B' } },
        axisLabel: { margin: 10, textStyle: { fontSize: 12, color: '#ffffffcc' } },
        splitLine: { show: true, lineStyle: { color: '#57617B22', type: 'dashed' } },
      },
    ],
    series: [
      {
        name: '进风',
        type: 'line',
        smooth: true,
        lineStyle: { normal: { width: 2 } },
        yAxisIndex: 0,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(185,150,248,0.3)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(185,150,248,0)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: { normal: { color: '#B996F8' } },
        data: [],
      },
      {
        name: '回风',
        type: 'line',
        smooth: true,
        lineStyle: { normal: { width: 2 } },
        yAxisIndex: 0,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: 'rgba(3, 194, 236, 0.3)',
                },
                {
                  offset: 0.8,
                  color: 'rgba(3, 194, 236, 0)',
                },
              ],
              false
            ),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: { normal: { color: '#03C2EC' } },
        data: [],
      },
    ],
  });

  const warningConfig = reactive({
    data: [
      ['15211辅运顺槽', '测风装置', '异常信息'],
      ['2-2煤辅运大巷4联巷对面胶运联巷', '气源压力', '异常信息'],
      ['3-1煤回风延伸', '平均风速', '异常信息'],
      ['2-4煤辅运大巷水仓', '风门', '异常信息'],
      ['4-2煤南部集中回风二联巷', '测风装置', '异常信息'],
      ['5-2煤回风大巷西侧', '测风装置', '异常信息'],
      ['2-2煤辅运大巷三联巷', '风门', '异常信息'],
      ['利民风窗', '风窗', '异常信息'],
    ],
    index: false,
    columnWidth: [150],
    oddRowBGC: '#003B5155',
    evenRowBGC: '#0A273255',
    align: ['center', 'center', 'center'],
  });
  // 监测设备类型集合
  const deviceTypes = ref([
    {
      text: '风门',
      type: 'gate_normal',
      columnsType: 'gate_monitor',
    },
    {
      text: '风窗',
      type: 'window_normal',
      columnsType: 'window_monitor',
    },
    {
      text: '测风装置',
      type: 'windrect_rect',
      columnsType: 'windrect_monitor',
    },
  ]);
  const deviceActive = ref(''); //当前监测的设备
  const deviceColumnsType = ref(''); //存放当前监测的Columns的key值
  const deviceMonitorData = ref([]); //存放监测的数据集合
  // const deviceType =

  // 标题选择
  function handleTitleChange() {
    //
  }
  function showDeviceMonitor(deviceType) {
    if (deviceActive.value === deviceType.type) {
      deviceActive.value = '';
    } else {
      deviceColumnsType.value = deviceType.columnsType;
      deviceActive.value = deviceType.type;
    }
  }
  let timer: null | NodeJS.Timeout | undefined = null;
  function getMonitor() {
    if (timer == null) {
      timer = setTimeout(async () => {
        // 首页监测
        const result = await list({});
        if (result) {
          const list = result['sys_surface'];
          const currentObj = list.find((item) => {
            return item.deviceID == currentTitleValue.value;
          });
          if (currentObj) {
            monitorData.value = currentObj['history'];
          }
        }
        // 设备监测
        const deviceMonitorList = await deviceMonitor({ devicetype: 'sys', pagetype: 'normal', systemID: '2' });
        deviceMonitorList.forEach((item) => {
          if (item['msgTxt']['type'] === deviceActive.value) {
            deviceMonitorData.value = item['msgTxt']['datalist'];
          }
        });

        if (timer) {
          timer = null;
        }
        getMonitor();
      }, 1000);
    }
  }

  function goDetail() {}

  onMounted(() => {
    getMonitor();
  });

  onUnmounted(() => {
    if (timer) timer = undefined;
  });
</script>

<style lang="less" scoped>
  @ventSpace: zxm;
  .center-container{
    width: 100%;
    height: calc(100% - 100px);
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 90px;
    .lr-box {
      height: 100%;
      width: 347px;
      color: #fff;
      display: flex;
      flex-direction: column;
      pointer-events: auto;

      // .container-title {
      //   width: 398px;
      //   height: 34px;
      //   position: relative;
      //   top: -30px;
      //   background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
      //   background-size: contain;
      //   padding: 0 0 0 180px;
      //   font-size: 20px;
      //   pointer-events: auto;
      //   position: relative;

      //   .title-select {
      //     width: 198px;
      //     position: absolute;
      //     top: 0;
      //     left: 180px;
      //   }
      // }
      .item {
        // flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 20px;
        align-items: center;
        .item-container {
          width: 100%;
          height: 100%;
        }
      }
      .need-air-group{
        width: calc(100% - 20px);
        display: flex;
        justify-content: space-between;
        border: 1px solid #20dbfd22;
        box-shadow: 0 0 5px #00d8ff22 inset;
        padding: 10px;
        margin: 10px 10px 0 10px;
        .air-box{
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .title{
            margin-left: 5px;
          }
          .air-num{
            font-family: 'numberFont';
            color: #20dbfd;
            text-shadow: 0 0 25px #00d8ff;
            font-size: 28px;
            font-weight: bolder;
          }
        }

      }
      .base-title {
        width: calc(100% - 60px);
        text-align: center;
        color: #00d8ff;
      }
      .base-information-box{
        display: flex;
        margin-left: 5px;
        .base-information {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .device-num-box {
            width: 170px;
            height: 82px;
            background: url('/@/assets/images/vent/new-home/num-bg.png') no-repeat;
            background-size: contain;
            margin: 5px 0px;
            position: relative;

            .icon {
              position: absolute;
              width: 40px;
              height: 40px;
              background: url('/@/assets/images/vent/new-home/base-icon1.png') no-repeat;
              background-size: contain;
              top: 22px;
              left: 16px;
            }

            .text-box {
              height: 100%;
              margin-left: 70px;
              display: flex;
              justify-content: center;
              flex-direction: column;
              margin-top: 2px;

              .value {
                font-family: 'douyuFont';
                color: #28DCE4;
                margin-top: 5px;
              }
            }
          }
        }
      }

      .warning-box{
        .warning-top{
          display: flex;
          justify-content: space-between;
          padding: 10px 2px 0px 2px;
          .warning-icon{
            width: 168px;
            height: 105px;
            display: flex;
            flex-direction: column;
            background: url('/@/assets/images/vent/new-home/warning-bg.png') no-repeat;
            background-size: contain;
            .title{
              font-size: 13px;
              margin: 5px 0 5px 14px;

            }
            .num-box{
              display: flex;
              margin-left: 20px;
              .num{
                font-family: 'numberFont';
                font-size: 34px;
                color: #20dbfd;
                text-shadow: 0 0 25px #00d8ff;
                margin-right: 10px;
              }
              .rate-box{
                font-size: 12px;
                .day-rate{
                  color: #FE3E12;
                }
                .week-rate{
                  color: #FADB3E;
                }
                .moth-rate{
                  color: #12FE81;
                }
              }
            }
          }

        }
      }
      .device-monitor-box{
        margin-top: 20px;
        position: reactive;
        .device-btn-group{
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          .device-active{
            &::before{
              border-color: #0efcff;
              box-shadow: 1px 1px 3px 1px #0efcff inset;
            }
          }
          .device-btn{
            width: 100px;
            height: 40px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #0efcff;
            cursor: pointer;
            margin: 0 6px;
            &::before{
              content: '';
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              border: 1px solid #6176AF;
              transform: skewX(-38deg);
            }
          }
        }
        .device-table{
          position: absolute;
          width: 1550px;
          height: 270px;
          right: 0;
          bottom: 0;
          backdrop-filter: blur(30px);
          border: 1px solid #8b8b8b22;
          padding: 2px 0 10px 10px;
          z-index: 9999;

          &::before{
            position: absolute;
            content: '';
            width: 10px;
            height: 10px;
            border-top: 1px solid #00d8ff;
            border-left: 1px solid #00d8ff;
            left: 0px;
            top: -1px;
          }
          &::after{
            position: absolute;
            content: '';
            width: 10px;
            height: 10px;
            border-bottom: 1px solid #00d8ff;
            border-left: 1px solid #00d8ff;
            left: 0px;
            bottom: -1px;
          }
          .device-tab{
            width: 100%;
            .tab{
              margin: 5px;
              cursor: pointer;
            }
            .tab-active{
              color: #00d8ff;
            }
          }
          .device-animation{
            border-bottom: 1px solid #91e9fe44;
          }
          .monitor-table{
            background-color: #67e6fd05;
          }
        }
        .device-table-open{
          width: 1550;
          animation-name: open;
          /* 持续时间 */
          animation-duration: 2s;
          transition: all 2s linear 1s;
        }
        .device-table-close{
          width: 0px;
          animation-name: close;
          /* 持续时间 */
          animation-duration: 2s;
          transition: all 2s linear 1s;
        }

      }
    }
    .left-box{
      margin-top: 30px;
    }
  }

  :deep(.@{ventSpace}-table-thead){
    background-color: transparent !important;

    th{
      color: #00d8ff !important;
      border-color: #91e9fe44 !important;
      border: none !important;
      border-top: 1px solid #91e9fe44 !important;
      &:first-child{
        border-left: 1px solid #91e9fe44 !important;
      }
      &:last-child{
        border-right: 1px solid #91e9fe44 !important;
      }
      .@{ventSpace}-table-column-title{
        color: #00d8ff !important;
      }
      .@{ventSpace}-table-cell-scrollbar{
        box-shadow: none !important;
      }
    }
  }
  :deep(.@{ventSpace}-table-tbody){
    tr{
      td{
        background-color: transparent !important;
        border-bottom: 1px solid #91e9fe33 !important;
        // border-top: none !important;
        // border-left: none !important;
        &:first-child{
          border-left: 1px solid #91e9fe44 !important;
        }
        &:last-child{
          border-right: 1px solid #91e9fe44 !important;
        }
      }
      &:last-child{
        td{
          border-bottom: 1px solid #91e9fe44 !important;
        }
      }
    }

  }

  @keyframes open {
      /* 开始状态 */
      0% {
          opacity: 0;
          width: 0px;
      }
      /* 结束状态 */
      100% {
          opacity: 1;
          width: 1550px;
      }
  }
  @keyframes close {
      /* 开始状态 */
      0% {
          opacity: 1;
          width: 1550px;
      }
      /* 结束状态 */
      100% {
          opacity: 0;
          width: 0px;
      }
  }
</style>