hsq-pro/src/views/vent/monitorManager/hsqHome/components/WarnCenTop.vue

<template>
  <div class="mixed-warn">
    <div class="list-title">
      <span>设备详情-</span>
      <span style="margin-left: 5px;">{{ deviceModel }}</span>
    </div>
    <div class="list-t">
      <div class="basic-box">
        <div class="box-btn">
          <div class="baisc-btn">
            <div class="btn-item">确认报警</div>
          </div>
          <div class="baisc-btn">
            <div class="btn-item">视频回放</div>
          </div>
          <div class="baisc-btn">
            <div class="btn-item">联动处置</div>
          </div>
          <div class="baisc-btn">
            <div class="btn-item">上报值班</div>
          </div>
        </div>
        <div class="echart-box"></div>
      </div>
      <div class="basic-box">
        <basicBorder title="报警详情">
          <div class="warn-detail">
            <div class="warn-item">
              <div class="item-label">报警级别 : </div>
              <div class="item-val text-val"> {{ warnDetail.grade }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">报警时间 : </div>
              <div class="item-val"> {{ warnDetail.time }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">报警位置 : </div>
              <div class="item-val"> {{ warnDetail.address }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">监测设备 : </div>
              <div class="item-val"> {{ warnDetail.device }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label ">最高温度 : </div>
              <div class="item-val text-val"> {{ warnDetail.maxtemp }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">平均速度 : </div>
              <div class="item-val text-val1"> {{ warnDetail.speed }}</div>
            </div>
          </div>
        </basicBorder>
      </div>
    </div>
    <div class="list-c">
      <basicBorder title="报警地图位置">

      </basicBorder>
    </div>
    <div class="list-b">
      <basicBorder title="处理流程">
        <div class="process-flow-box">
          <div class="flow-title">
            <span></span>
            <span>当前状态:等待值班人员确认处理</span>
          </div>
          <div class="flow-process">
            <div class="pic-process" v-for="(item, index) in picList" :key="index">
              <img :src="item.src" alt="">
              <div class="pic-text">{{ item.label }}</div>
            </div>
          </div>
          <div class="flow-step">
            <a-steps progress-dot :current="1">
              <a-step title="" description="" v-for="(item,index) in 5" :key="index" />
            </a-steps>
          </div>
        </div>
      </basicBorder>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import basicBorder from './basicBorder.vue'
import { getAssetURL } from '/@/utils/ui';

let deviceModel = ref('CAM-001')
let warnDetail = reactive({
  grade: '一级报警（严重）',
  time: '2024-12-20 14:31:22',
  address: '采掘场A区,东经87.6，北纬43.8',
  device: '双光谱相机',
  maxtemp: '65.3',
  speed: '48.7'
})
let picList = ref([
  { src: getAssetURL('home-container/configurable/hsq/4-1.png'), label: '1.报警触发' },
  { src: getAssetURL('home-container/configurable/hsq/6-1.png'), label: '2.系统确认' },
  { src: getAssetURL('home-container/configurable/hsq/6-2.png'), label: '3.通知值班' },
  { src: getAssetURL('home-container/configurable/hsq/4-4.png'), label: '4.现场处置' },
  { src: getAssetURL('home-container/configurable/hsq/4-5.png'), label: '5.确认解除' },
])

</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

@{theme-deepblue} {
  .mixed-warn {}
}

.mixed-warn {
  --image-box-bg: url('@/assets/images/home-container/configurable/hsq/2-11.png');
  --image-box-bg1: url('@/assets/images/home-container/configurable/hsq/3-4.png');
  --image-box-bg2: url('@/assets/images/home-container/configurable/hsq/4-1.png');
  --image-box-bg3: url('@/assets/images/home-container/configurable/hsq/4-2.png');
  --image-box-bg4: url('@/assets/images/home-container/configurable/hsq/4-3.png');
  --image-box-bg5: url('@/assets/images/home-container/configurable/hsq/4-4.png');
  --image-box-bg6: url('@/assets/images/home-container/configurable/hsq/4-5.png');

  --image-box-bg7: url('@/assets/images/home-container/configurable/hsq/ceshi1.png');
  position: relative;
  width: 100%;
  height: 100%;
  padding: 15px 30px;
  box-sizing: border-box;

  .list-title {
    width: 177px;
    height: 30px;
    line-height: 22px;
    margin-bottom: 10px;
    color: #fc002a;
    font-weight: bolder;
    background: var(--image-box-bg) no-repeat;
    background-size: 100% 100%;
  }

  .list-t {
    display: flex;
    justify-content: space-between;
    height: 235px;
    margin-bottom: 10px;
  }

  .basic-box {
    width: calc(50% - 5px);
    height: 100%;

    &:nth-child(1) {
      margin-right: 10px;
    }
  }

  .box-btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 34px;
    background: var(--image-box-bg1) no-repeat;
    background-size: 100% 100%;
    margin-bottom: 10px;
  }

  .baisc-btn {
    width: 85px;
    height: 28px;
    border: 1px solid #01fefc;
    border-radius: 2px;
    padding: 3px;
    cursor: pointer;
  }

  .btn-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(32, 166, 169);
  }

  .echart-box {
    height: calc(100% - 44px);
    background-color: #114268;
    background: var(--image-box-bg7) no-repeat;
    background-size: 100% 100%;
  }

  .warn-detail {
    height: 100%;
  }

  .warn-item {
    display: flex;
    align-items: center;
    height: 23px;
    background: linear-gradient(to right, #134c77, transparent);
    margin-bottom: 8px;
    padding: 0px 15px;
    box-sizing: border-box;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .item-label {
    margin-right: 5px;
    font-size: 13px;
  }

  .item-val {
    font-size: 13px;
  }

  .text-val {
    color: #fc002a;
  }

  .text-val1 {
    color: orange;
  }

  .list-c {
    height: 150px;
    margin-bottom: 10px;
  }

  .list-b {
    position: relative;
    height: 120px;
  }

  .process-flow-box {
    height: 100%;
  }

  .flow-title {
    position: absolute;
    left: 150px;
    top: 6px;
    color: orange;

    span {
      &:nth-child(1) {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: orange;
        margin-right: 5px;
      }
    }
  }

  .flow-process {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .pic-process {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 36px;
      height: 24px;
    }

    .pic-text {
      width: 100%;
      text-align: center;
      border-top: 1px solid rgba(18, 73, 113);
      border-bottom: 1px solid rgba(18, 73, 113);
      border-left: 1px solid #29abf1;
      border-right: 1px solid #29abf1;
      border-radius: 5px;
    }
  }
  .flow-step{
      width: 100%;
      position: absolute;
      bottom: 0px;
      left: 0;
      padding: 0px 30px;
    }
  
}
:deep(.zxm-steps-icon .zxm-steps-icon-dot){
  border: 1px solid #2cb6ff !important;
}
:deep(.zxm-steps-item-process > .zxm-steps-item-container > .zxm-steps-item-tail::after){
     background-color: rgba(28, 118, 172,.6) !important;
}
:deep(.zxm-steps-item-wait > .zxm-steps-item-container > .zxm-steps-item-tail::after){
   background-color: rgba(28, 118, 172,.6) !important;
}
</style>