DiKongGanZhiPingTai/src/views/demo/resourcemanagement/aiinstance/ShowInfoDrawer.vue

<template>
  <div class="drawer-title">
    <div class="title-content">
      <div class="title-icon"></div>
      <div class="title-span">算法实例详情</div>
    </div>
    <div class="title-tools-div">
      <EditOutlined  style="font-size: 19px;margin-right: 19px;cursor: pointer;" @click="emits('changeAddModal',true,false)"/>
      <div class="button-interval"></div>
      <CloseOutlined style="font-size: 19px;cursor: pointer;" @click="emits('changeDrawerModal',false)"/>
    </div>
  </div>
  <div class="drawer-content">
    <img class="content-image" :src="`${VITE_GLOB_API_URL}/${props.showInfoData.cover}`"/>
    <div class="content-item-name">
      <div class="item-name-label">实例名称</div>
      <div class="item-name-value">{{ props.showInfoData.name }}</div>
    </div>
    <div class="content-item-description">
      <div class="item-description-label">描述</div>
      <div class="item-description-value">{{props.showInfoData.description}}</div>
    </div>
    <div class="content-interval"></div>
    <div class="content-item">
      <div class="item-label">显示内容</div>
      <div class="item-value">{{ props.showInfoData.displayScheme }}</div>
    </div>
    <div class="content-item">
      <div class="item-label">关联事件</div>
      <div class="item-value">-</div>
    </div>
    <div class="content-item">
      <div class="item-label">AI算法</div>
      <div class="item-value">
        <div v-for="algoName in props.showInfoData.algoNames">{{ `${algoName}` }}</div>
      </div>
    </div>
    <div class="content-interval"></div>
    <div class="content-item">
      <div class="item-label" style="margin-right: 0px;width: 101px;">画面识别区域</div>
      <div class="item-value" style="padding-left: 22px;">{{`水平方向：${props.showInfoData.recognitionX}%  垂直方向：${props.showInfoData.recognitionY}%`}}</div>
    </div>
    <div class="content-item">
      <div class="item-label">空间约束</div>
      <div class="item-value">{{props.showInfoData.spaceConstraint == 1?`外扩距离：${props.showInfoData.expansionDistance}米`:'关闭'}}</div>
    </div>
    <div class="content-item">
      <div class="item-label">时间约束</div>
      <div class="item-value">{{props.showInfoData.temporalConstraints == 1?`有效时段：${props.showInfoData.tcStartTime}~${props.showInfoData.tcEndTime}`:'关闭'}}</div>
    </div>
    <div class="content-item">
      <div class="item-label">航飞要求</div>
      <div class="item-value">
        <div>{{`飞行速度：${props.showInfoData.flySpeed.split('~')[0]}m/s~${props.showInfoData.flySpeed.split('~')[1]}m/s`}}</div>
        <div>{{`云台俯仰角：${props.showInfoData.gimbalPitchDegree.split('~')[0]}°～${props.showInfoData.gimbalPitchDegree.split('~')[1]}°`}}</div>
        <div>{{`对象画面对比：${props.showInfoData.recognitionCoverage.split('~')[0]}%～${props.showInfoData.recognitionCoverage.split('~')[1]}%`}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue"
import { EditOutlined, CloseOutlined } from '@ant-design/icons-vue'
import { getAppEnvConfig } from '@/utils/env';
const { VITE_GLOB_API_URL } = getAppEnvConfig();
const props = defineProps(['showInfoData'])
const emits = defineEmits(['changeDrawerModal','changeAddModal'])
</script>

<style lang="scss" scoped>
.drawer-title{
  width: 100%;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 29px;
  padding-right: 30px;
  border-bottom: 1px solid #E7E7E7;
  .title-content{
    display: flex;
    height: 34px;
    align-items: center;
    .title-icon{
      width: 3px;
      height: 18px;
      background: #0B60BD;
      margin-right: 9px;
    }
    .title-span{
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 20px;
      color: #11131B;
      line-height: 33px;
    }
  }
  .title-tools-div{
    display: flex;
    height: 19px;
    align-items: center;
    .button-interval{
      width: 1px;
      height: 18px;
      background: #E7E7E7;
      margin-right: 16px;
    }
  }
}
.drawer-content{
  height: calc(100vh - 63px);
  overflow: auto;
  scrollbar-width: none;
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  padding: 30px;
  .content-image{
    width: 300px;
    height: 200px;
    margin-bottom: 32px;
  }
  .content-item-name{
    display: flex;
    margin-bottom: 18px;
    .item-name-label{
      width: 68px;
      height: 26px;
      background: #0B60BD;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      line-height: 20px;
      margin-right: 21px;
      display: flex;
      align-items: center;
      padding-left: 7px;
    }
    .item-name-value{
      width: 294px;
      height: 27px;
      background: rgba(216, 216, 216, 0.34);
      padding-left: 28px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #1C1D22;
      line-height: 20px;
      display: flex;
      align-items: center;
    }
  }
  .content-item-description{
    display: flex;
    // margin-bottom: 18px;
    .item-description-label{
      width: 68px;
      height: 26px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #8D8E90;
      line-height: 20px;
      margin-right: 21px;
      display: flex;
      align-items: center;
      padding-left: 7px;
    }
    .item-description-value{
      width: 294px;
      // height: 27px;
      // background: rgba(216, 216, 216, 0.34);
      padding-left: 28px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #1C1D22;
      line-height: 20px;
      display: flex;
      align-items: center;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: ;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
  }
  .content-item{
    display: flex;
    margin-bottom: 18px;
    .item-label{
      width: 68px;
      height: 26px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 14px;
      color: #8D8E90;
      background: #f0f0f0;
      line-height: 20px;
      margin-right: 21px;
      display: flex;
      align-items: center;
      padding-left: 7px;
    }
    .item-value{
      width: 294px;
      // height: 27px;
      // background: rgba(216, 216, 216, 0.34);
      padding-left: 28px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 14px;
      color: #1C1D22;
      line-height: 27px;
      // display: flex;
      // align-items: center;
    }
  }
  .content-interval{
    width: 100;
    height: 1px;
    background: #E7E7E7;
    margin-bottom: 30px;
    margin-top: 30px;
  }
}
</style>