gasInjection-project/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;
      min-height: 200px;
      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;
      }
      
    }
  }
}

: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>