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"
                :style="{ color: warnData.alarmLevel == 101 ? '#00d8ff' : warnData.alarmLevel == 102 ? '#fcfc22' : warnData.alarmLevel == 103 ? '#ff7010' : warnData.alarmLevel == 104 ? '#df4e43' : warnData.alarmLevel == 201 ? '#ff0000' : '' }">
                {{ warnData.alarmLevel == 101 ? '低风险' : warnData.alarmLevel ==
                  102 ? '一般风险' :
                  warnData.alarmLevel == 103 ? '较大风险' : warnData.alarmLevel == 104 ? '重大风险' : warnData.alarmLevel == 201 ?
                    '报警' :
                '-' }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">报警时间 : </div>
              <div class="item-val"> {{ warnData.starttime || '-' }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">报警位置 : </div>
              <div class="item-val"> {{ warnData.alarmName || '-' }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">监测设备 : </div>
              <div class="item-val"> {{ warnData.device || '-' }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label ">最高温度 : </div>
              <div class="item-val text-val"> {{ warnData.maxtemp || '-' }}</div>
            </div>
            <div class="warn-item">
              <div class="item-label">平均速度 : </div>
              <div class="item-val text-val1"> {{ warnData.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 props = defineProps({
  warnData: {
    type: Object,
    required: true
  }
})

let deviceModel = ref('-')
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>