vent-template/src/views/vent/monitorManager/deviceMonitor/modal/fiber.modal.vue

<template>
  <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情    ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel" >
    <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="38" name="max-temperature.svg" />
            </div>
            <div class="item-container">
              <div class="title">最高温度</div>
              <div class="value">{{ posMonitor.fmax }} <span>℃</span> </div>
            </div>
          </div>
          <div class="top-item">
            <div class="icon">
              <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
            </div>
            <div class="item-container">
              <div class="title">最低温度</div>
              <div class="value">{{ posMonitor.fmin }} <span>℃</span></div>
            </div>
          </div>
          <div class="top-item">
            <div class="icon">
              <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
            </div>
            <div class="item-container">
              <div class="title">平均温度</div>
              <div class="value">{{ posMonitor.favg }} <span>℃</span></div>
            </div>
          </div>
          <div class="top-item warning-box">
            <div class="icon">
              <SvgIcon class="icon-style" size="38" name="risk-level" />
            </div>
            <div class="item-container">
              <div class="title">风险等级</div>
              <div class="warning-value">低风险</div>
            </div>
          </div>
        </div>
        <div class="right-center">
          <div class="table-box">
            <span class="base-title">测点监测详情</span>
            <a-table
              size="small"
              :columns="columns"
              :data-source="posList"
              :pagination="false"
              :scroll="{ y: 200 }"
            />
          </div>
          <div class="warning-box">
            <span class="base-title">预警历史详情</span>
            <div class="warning-container">
              <dv-scroll-board ref="scrollBoard" :config="warningConfig" style="width: 100%; height: 240px; overflow-y: auto; border: 1px solid #39e8ff33;" />
            </div>
          </div>
        </div>
        <div class="right-bottom">
          <span class="base-title">测点监测曲线</span>
          <div class="echarts-box">
            <BarAndLine
              xAxisPropType="pos"
              :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 posMonitor = shallowRef({})

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

    const chartsColumns = [
      {
        legend: '测点温度',
        seriesName: '(℃)',
        ymax: 200,
        yname: '℃',
        linetype: 'line',
        yaxispos: 'left',
        color: '#FDB146',
        sort: 1,
        xRotate: 0,
        dataIndex: 'value',
      },
    ]

    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({
      header: ['测点', '温度', '预警信息'],
      data: [
        ['测点6', '318℃', '严重报警'],
        ['测点43', '142℃', '一般预警'],
        ['测点23', '167℃', '一版预警'],
        ['测点6', '198℃', '超高预警'],
        ['测点65', '197℃', '超高预警'],
        ['测点78', '154℃', '一般预警'],
        ['测点61', '104℃', '一般预警'],
        ['测点87', '150℃', '一般信息'],
      ],
      index: false,
      columnWidth: [150],
      headerHeight: 38,
      headerBGC: '#3d9dd45d',
      oddRowBGC: '#009acd10',
      evenRowBGC: '#009acd05',
      align: ['center', 'center', 'center'],
    });
    
    const [register, { setModalProps, closeModal }] = 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);
    }

    function handleOk(e) {
      e.preventDefault()
      closeModal()
    }

    function handleCancel(e) {
      e.preventDefault()
      closeModal()
    }

    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 = JSON.parse(item.readData.fibreTemperature)
          if(list.length > 0) posList.value = list
          posMonitor.value = item.readData
        }
      })
    })

    return { register, model: modelRef, currentTime, handleVisibleChange, selectDevice, handleOk, handleCancel, deviceList, activeDeviceID, posMonitor, echatsOption, posList, chartsColumns, columns, warningConfig };
  },
  
});
</script>
<style lang="less" scoped>
  .fiber-modal{
    width: 100%;
    height: 650px;
    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: 10px;
        .top-item{
          width: 200px;
          height: 80px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          border: 1px solid rgba(25,237,255,.4);
          box-shadow: inset 0 0 10px rgba(0,197,255,.6);
          background: rgba(0,0,0,.06666666666666667);
          padding-top: 16px;
          .icon{
            margin-right: 10px;
            margin-top: 5px;
            color: #FDB146;
          }
          .item-container{
            width: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            div{
              text-align: center;
            }
            .title{
              font-size: 18px;
            }
            .value{
              text-shadow: 0 0 25px #00fbfe;
              background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1);
              font-style: normal;
              background-size: cover;
              font-family: electronicFont;
              font-size: 30px;
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              position: relative;
              top: -8px;
              span{
                font-family: Arial, Helvetica, sans-serif;
                font-size: 18px;
                color: aliceblue;
              }
              
            }
            
          }
        }
        .warning-box{
          padding-top: 0px;
          .icon{
            margin-top: 20px;
            .icon-style{
              color: #FDB146;
            }
          }
          .warning-value{
            font-size: 18px;
            color: #61ddb1;
          }
        }
      }
      .right-center{
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .table-box{
          position: relative;
          width: 500px;
          height: 250px;
        }
        .warning-box{
          width: calc(100% - 520px);
          .warning-container{
            width: 100%;
            height: convert;
            background: #009acd00;
            :deep(.dv-scroll-board){
              .row-item{
                height: 40px !important;
                line-height: 40px !important;
              }
              .header-item{
                border-top: 1px solid #91e9fe !important;
                border-bottom: 1px solid #91e9fe !important;
              }
            }

          }
        }
      }
      .right-bottom{
        margin-top: 20px;
        .echarts-box{
          width: 100%;
          height: 230px;
        }
      }

      
    }
  }
  :deep(.zxm-table-body){
    border: 1px solid rgba(57, 232, 255, 0.2) !important;
    .zxm-table-tbody > tr > td{
      border: none !important;
    }
  }
  :deep(.zxm-table-cell){
    border-right: none !important;
  }
</style>