tmzn-weihe/src/views/smart-early-warning/right.vue

<template>
  <BasePanelRight>
    <div class="warning-container">
      <BaseMain title="预警详情">
        <template v-slot:mainArea>
          <div class="detail-container">
            <Carousel :items="items" />
            <el-collapse v-model="activeNames" @change="handleChange" class="v-collapse">
              <el-collapse-item title="预警来源" name="1">
                <div class="form-content">
                  <div class="form-item">
                    <div class="label">摄像机编号：</div>
                    <div class="value">{{ sourceObj.params1 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">摄像机名称：</div>
                    <div class="value">{{ sourceObj.params2 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">通道名称：</div>
                    <div class="value">{{ sourceObj.params3 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">摄像机厂家：</div>
                    <div class="value">{{ sourceObj.params4 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">摄像机挂高：</div>
                    <div class="value">{{ sourceObj.params5 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">摄像机经纬度：</div>
                    <div class="value">{{ sourceObj.params6 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">摄像机地址：</div>
                    <div class="value">{{ sourceObj.params7 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">置信度：</div>
                    <div class="value">{{ sourceObj.params8 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">水平方位角：</div>
                    <div class="value">{{ sourceObj.params9 }}</div>
                  </div>
                </div>
              </el-collapse-item>
              <el-collapse-item title="事件信息" name="2">
                <div class="form-content">
                  <div class="form-item">
                    <div class="label">事件编号：</div>
                    <div class="value">{{ eventInfo.params1 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">事件标题：</div>
                    <div class="value">{{ eventInfo.params2 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">预警来源：</div>
                    <div class="value">{{ eventInfo.params3 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">预警类型：</div>
                    <div class="value">{{ eventInfo.params4 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">预警原因：</div>
                    <div class="value">{{ eventInfo.params5 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">重要等级：</div>
                    <div class="value">{{ eventInfo.params6 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">预警时间：</div>
                    <div class="value">{{ eventInfo.params7 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">所属网格：</div>
                    <div class="value">{{ eventInfo.params8 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">所属网格员：</div>
                    <div class="value">{{ eventInfo.params9 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">事发地点：</div>
                    <div class="value">{{ eventInfo.params10 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">经纬度：</div>
                    <div class="value">{{ eventInfo.params11 }}</div>
                  </div>
                  <div class="form-item">
                    <div class="label">事件描述：</div>
                    <div class="value">{{ eventInfo.params12 }}</div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </template>
      </BaseMain>
    </div>
  </BasePanelRight>
</template>

<script>
import BasePanelRight from '@/components/base-panel/base-panel-right'
import BaseMain from '@/components/base-main/base-main.vue'
import Carousel from './carousel.vue'
import ImgUrl from '@/assets/image/smart-early-warning/banner.png'
export default {
  data() {
    return {
      items: [
        {
          image: ImgUrl,
          thumbnail: ImgUrl
        },
        {
          image: ImgUrl,
          thumbnail: ImgUrl
        },
        {
          image: ImgUrl,
          thumbnail: ImgUrl
        }
      ],
      sourceObj: {
        params1: '43030400831327000100',
        params2: '咸宁阳兴平仪空村综合机房',
        params3: '咸宁阳兴平仪空村综合机房梯次LY',
        params4: '大华',
        params5: '35.0米',
        params6: '112.985866,27.814898',
        params7: '咸宁阳兴平仪空村综合机房',
        params8: '0.80615',
        params9: 'N8.37°E'
      },
      eventInfo: {
        params1: '202508251210241338766566',
        params2: '流域乱建预警',
        params3: 'AI预警',
        params4: '四乱预警',
        params5: '暂无',
        params6: '一级',
        params7: '2025-08-25 09:36:31',
        params8: '双马街道',
        params9: '戴永强',
        params10: '咸宁阳兴平仪空村综合机房',
        params11: '112.986374,27.817957',
        params12: '暂无'
      },
      activeNames: ['1','2']
    }
  },
  components: {
    BasePanelRight,
    BaseMain,
    Carousel
  },
  methods: {
    handleChange() {}
  }
}
</script>

<style lang="scss" scoped>
.warning-container {
  position: absolute;
  top: px-to-rem(66);
  z-index: 1;
  left: px-to-rem(-4);
  height: calc(100% - px-to-rem(75));
  :deep(.baseMainContainer) {
    height: inherit;
    .content-area {
      height: 100%;
    }
  }
  .detail-container {
    padding: px-to-rem(10) px-to-rem(8);
    .form-content {
      .form-item {
        display: flex;
        justify-content: flex-end;
        gap:px-to-rem(11);
         .label {
          width: 35%;
          font-weight: 400;
          font-size: px-to-rem(14);
          color: #abb4c1;
          text-align: right;
        }
        .value {
          width: 65%;
          font-weight: 400;
          font-size: px-to-rem(14);
          color: #ffffff;
        }
      }
    }
  }
  .v-collapse {
    :deep(.el-collapse-item__header) {
      background: #26344b;
      font-weight: 500;
      font-size: px-to-rem(14);
      color: #ffffff;
      padding: px-to-rem(5) px-to-rem(11);
      height: auto;
      line-height: initial;
      border-bottom: 0;
      border-left: px-to-rem(1) solid #4f9fff;
    }
    :deep(.el-collapse-item__wrap) {
      background-color: transparent;
      border-bottom: 0;
    }
    :deep(.el-collapse-item__content){
        padding:px-to-rem(8) px-to-rem(0)
    }
  }
}
</style>