gas-injection/src/views/vent/monitorManager/deviceMonitor/modal/dust.modal.vue

<template>
  <BasicModal v-bind="$attrs" destroyOnClose @register="register" :title="`粉尘监测详情    ${currentTime}`" width="1200px" >
    <div class="fiber-modal">
      <div class="modal-left">
        <div v-for="device in deviceList" class="link-item" :class="{'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
          <span class="" @click="selectDevice(device.deviceID)">{{ device.stationname }}</span>
        </div>
      </div>
      <div class="modal-right">
        <div class="right-top">
          <div class="top-item">
            <div class="icon">
              <SvgIcon class="icon-style max-temperature" size="30" name="hd-wd" />
            </div>
            <div class="item-container">
              <div class="title">巷道温度</div>
              <div class="value"><span class="data">{{ dustMonitor.temperature }}</span> <span>℃</span> </div>
            </div>
          </div>
          <div class="top-item">
            <div class="icon">
              <SvgIcon class="icon-style min-temperature" size="30" name="dust-nd" />
            </div>
            <div class="item-container">
              <div class="title">粉尘浓度</div>
              <div class="value"><span class="data">{{ dustMonitor.humidity }}</span> <span>mg/m³</span></div>
            </div>
          </div>
          <div class="top-item">
            <div class="icon">
              <SvgIcon class="icon-style aveg-temperature" size="30" name="pw-sy" />
            </div>
            <div class="item-container">
              <div class="title">喷雾水压</div>
              <div class="value"><span class="data">{{ dustMonitor.waterPressure }}</span> <span>MPa</span></div>
            </div>
          </div>
          <div class="top-item warning-box">
            <div class="icon">
              <SvgIcon class="icon-style" size="30" name="pw-zz" />
            </div>
            <div class="item-container">
              <div class="title">喷雾装置</div>
              <div class="warning-value">低风险</div>
            </div>
          </div>
          <div class="top-item warning-box">
            <div class="icon">
              <SvgIcon class="icon-style" size="40" name="kg" />
            </div>
            <div class="item-container">
              <div class="title">喷雾开关</div>
              <div class="warning-value">
                <a-switch checked-children="开" un-checked-children="关" v-model:checked="dustSwitch" />
              </div>
            </div>
          </div>
        </div>
        <div class="right-center">
          <span class="base-title">粉尘实时监测</span>
          <div class="dust-group">
            <div class="dust-item">
              <div class="title">粉尘浓度(实时)</div>
              <div class="value">{{ dustMonitor.breathWeighted }}<span>mg/m³</span></div>
            </div>
            <div class="dust-item">
              <div class="title">总尘浓度(时间加权)</div>
              <div class="value">{{ dustMonitor.totalDust }}<span>mg/m³</span></div>
            </div>
            <div class="dust-item">
              <div class="title">呼吸加权容许浓度</div>
              <div class="value">{{ dustMonitor.breathWeighted }}<span>mg/m³</span></div>
            </div>
            <div class="dust-item">
              <div class="title">爆炸浓度(煤尘)</div>
              <div class="value">{{ dustMonitor.dustval }}<span>mg/m³</span></div>
            </div>
          </div> 
        </div>
        <div class="right-bottom">
          <span class="base-title">粉尘预测曲线</span>
          <div class="echarts-box">
            <BarAndLine
              xAxisPropType="readTime"
              :dataSource="posList"
              height="100%"
              :chartsColumns="chartsColumns"
              :option="echatsOption"
              chartsType="listMonitor" />
          </div>
        </div>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import BarAndLine from '/@/components/chart/BarAndLine.vue';
import { SvgIcon } from '/@/components/Icon';
import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
import dayjs from 'dayjs'

export default defineComponent({
  components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
  props: {
    dataSource: {type: Array},
    activeID: {type: String}
  },
  setup(props) {
    const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
    const modelRef = ref({});
    const loading = ref(true);
    const activeDeviceID = ref('');
    const deviceList = ref<any[]>([])
    const posList = ref<any[]>([])
    const dustMonitor = shallowRef({})
    const dustSwitch = ref(false)

    const echatsOption = {
      grid: {
        top: '20%',
        left: '2px',
        right: '10px',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {}
      }
    }

    const chartsColumns = [
      {
        legend: '粉尘平均浓度',
        seriesName: '(mg/m³)',
        ymax: 5,
        yname: 'mg/m³',
        linetype: 'line',
        yaxispos: 'left',
        color: '#FDB146',
        sort: 1,
        xRotate: 0,
        dataIndex: 'hourAvg',
      },
      {
        legend: '粉尘最大浓度',
        seriesName: '(mg/m³)',
        ymax: 5,
        yname: 'mg/m³',
        linetype: 'line',
        yaxispos: 'left',
        color: '#EE6666',
        sort: 1,
        xRotate: 0,
        dataIndex: 'hourMax',
      },
      {
        legend: '粉尘最小浓度',
        seriesName: '(mg/m³)',
        ymax: 5,
        yname: 'mg/m³',
        linetype: 'line',
        yaxispos: 'left',
        color: '#9BCB75',
        sort: 1,
        xRotate: 0,
        dataIndex: 'hourMin',
      },
    ]

    const columns = [
      {
        title: '安装位置',
        dataIndex: 'position',
        width: 60,
        align: 'center',
        customRender: ({ index }) => {
          return `测点${index}`
        }
      },
      {
        title: '安装距离(m)',
        dataIndex: 'pos',
        align: 'center',
        width: 60,
      },
      {
        title: '测点温度',
        dataIndex: 'value',
        align: 'center',
        width: 50,
      },
      {
        title: '测点状态',
        dataIndex: 'state',
        align: 'center',
        width: 50,
        customRender: () => {
          return `正常`
        }
      },
    ];

    const warningConfig = reactive({
      data: [
        ['测点6', '318℃', '严重报警'],
        ['测点43', '142℃', '一般预警'],
        ['测点23', '167℃', '一版预警'],
        ['测点6', '198℃', '超高预警'],
        ['测点65', '197℃', '超高预警'],
        ['测点78', '154℃', '一般预警'],
        ['测点61', '104℃', '一般预警'],
        ['测点87', '150℃', '一般信息'],
      ],
      index: false,
      columnWidth: [150],
      oddRowBGC: '#009acd10',
      evenRowBGC: '#009acd05',
      align: ['center', 'center', 'center'],
    });
    
    const [register, { setModalProps }] = useModalInner();

    function handleVisibleChange(visible) {
      if (visible) {
        loading.value = true;
        setModalProps({ loading: true, confirmLoading: true });

        setTimeout(() => {
          loading.value = false;
          setModalProps({ loading: false, confirmLoading: false });
        }, 1000);
      }
    }

    // 选择监测
    function selectDevice (id){
      loading.value = true;
      setModalProps({ loading: true, confirmLoading: true });
       setTimeout(() => {
        loading.value = false;
        activeDeviceID.value = id
        setModalProps({ loading: false, confirmLoading: false });
      }, 300);
    }

    watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
      deviceList.value = newDataSource as any[]
      if(newActiveID != oldActiveID){
        activeDeviceID.value = newActiveID as string
      }
      newDataSource?.forEach((item:any, index) => {
        if((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value){
          activeDeviceID.value = item.deviceID
          const list = item.summaryHour
          list.filter(data => {
            const date = new Date();     //1. js获取当前时间
            const min = date.getMinutes();  //2. 获取当前分钟
            return Object.assign(data, data.dustval, { readTime: (dayjs(date.setMinutes(min + 10))).format('YYYY-MM-DD HH:mm:ss') })
          })
          if(list.length > 0) posList.value = list
          dustMonitor.value = item.readData
        }
      })
    })

    return { register, model: modelRef, currentTime, dustSwitch, handleVisibleChange, selectDevice, deviceList, activeDeviceID, dustMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
  },
  
});
</script>
<style lang="less" scoped>
  .fiber-modal{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    .modal-left{
      width: 200px;
      height: 100%;
      overflow-y: auto;
      background: #ffffff11;
      padding: 5px;
      border-radius: 5px;
      .active-device-title {
        color: aqua;
      }
      .link-item{
        position: relative;
        cursor: pointer;
        line-height: 30px;
        padding-left: 30px;
        span:hover{
          color: #89ffff;
        }
        &::after{
          content: '';
          position: absolute;
          display: block;
          width: 8px;
          height: 8px;
          top: 12px;
          left: 10px;
          transform: rotateZ(45deg) skew(10deg, 10deg);
          background: #45d3fd;
        }
      }
    }
    .modal-right{
      width: calc(100% - 220px);
      .base-title{
        line-height: 32px;
        position: relative;
        padding-left: 20px;
        &::after{
          content: '';
          position: absolute;
          display: block;
          width: 4px;
          height: 12px;
          top: 4px;
          left: 10px;
          background: #45d3fd;
          border-radius: 4px;
        }
      }
      .right-top{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 30px;
        padding: 0 10px;
        .top-item{
          width: 155px;
          height: 60px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          background: url('/@/assets/images/vent/model_image/dust-monitor-bg.png') no-repeat;
          padding-top: 16px;
          .icon{
            width: 58px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: -8px;
          }
          .item-container{
            width: 100px;
            display: flex;
            flex-direction: column;
            // justify-content: start;
            div{
              padding-left: 8px;
            }
            .title{
              font-size: 14px;
              margin-bottom: 8px;
            }
            .value{
              position: relative;
              width: 110px;
              top: -8px;
              .data{
                display: inline-block;
                width: 50px;
                font-family: douyuFont;
                font-weight: 600;
                font-size: 14px;
                -webkit-background-clip: text;
                background-clip: text;
                color: #28DCE4;
              }
              span{
                font-family: Arial, Helvetica, sans-serif;
                font-size: 14px;
                color: #ffffffdd;
              }
            }
            
          }
        }
        .warning-box{
          padding-top: 0px;
          .icon{
            margin-top: 20px;
            .icon-style{
              color: #FDB146;
            }
          }
          .title{
            padding-top: 0px;
          }
          .warning-value{
            font-family: electronicFont;
            font-size: 18px;
            color: #61ddb1;
          }
        }
      }
      .right-center{
        margin-top: 20px;
        .dust-group{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .dust-item{
            width: 238px;
            height: 148px;
            background: url('/@/assets/images/vent/model_image/dust-bg.png') no-repeat;
            scale: 0.9;
            .title{
              position: absolute;
              top: 80px;
              left: 70px;
              font-size: 16px;
            }
            .value{
              position: absolute;
              top: 50px;
              left: 50px;
              font-family: 'douyuFont';
              color: #20dbfd;
              text-shadow: 0 0 25px #00d8ff;
              font-size: 18px;
              font-weight: bolder;
              span{
                font-family: Arial, Helvetica, sans-serif;
                font-size: 16px;
                color: aliceblue;
                margin-left: 8px;
              }
            }
          }
        }
      }
      .right-bottom{
        margin-top: 20px;
        .echarts-box{
          width: 100%;
          height: 270px;
        }
      }

      
    }
  }
</style>