hi-ucs/front/src/views/personalCenter/components/AbilityApplication.vue

<!--
 * @Author: hisense.liangjunhua
 * @Date: 2022-07-12 09:42:44
 * @LastEditors: hisense.liangjunhua
 * @LastEditTime: 2022-07-25 15:07:05
 * @Description:我的申请 能力申请 查看详情
-->
<template>
  <div class="top">
    <div class="title">基本信息</div>
    <div class="main">
      <div>
        <p class="item">
          <span>申请标题：{{ props.refObj.title }}</span>
          <span>申请单号：{{ props.refObj.applyNumber || '--' }}</span>
          <span v-if="props.refObj.applicationSystem">
            应用系统：{{ props.refObj.applicationSystem }}
          </span>
          <span v-else></span>
        </p>
        <p class="item">
          <span>申请人信息：{{ props.refObj.user }}</span>
          <span>电话：{{ props.refObj.phone }}</span>
          <span>单位：{{ props.refObj.unit }}</span>
        </p>
        <p v-if="props.refObj.applicationScene.length > 0">
          <span>应用场景：{{ props.refObj.applicationScene.join('；') }}</span>
        </p>
        <p>
          <span>应用背景：{{ props.refObj.applicationBackground }}</span>
        </p>
        <p>
          <span>期望效果：{{ props.refObj.effectWish }}</span>
        </p>
        <p v-if="props.refObj.enclosure">
          <span>
            申请单附件：
            <span class="enclosure">
              {{ props.refObj.enclosureName || '--' }}
              <span class="btn" @click="showThis()">预览</span>
            </span>
          </span>
        </p>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="title">申请能力</div>
    <div class="main">
      <div class="item" v-for="(item, index) in showArr" :key="item + index">
        <div class="deptName">
          <span class="img"></span>
          <span>{{ item.name }}</span>
        </div>
        <div class="oddNumbers">子单号：{{ item.instanceId }}</div>
        <div class="box" v-if="item.list.length > 0">
          <div class="ability" v-for="val in item.list" :key="val.id">
            <div
              class="left"
              :class="
                val.type == '应用资源'
                  ? 'yyzy'
                  : val.infoList.filter(
                      (val2) => val2.attrType == '组件类型'
                    )[0].attrValue == '智能算法'
                  ? 'znsf'
                  : val.infoList.filter(
                      (val2) => val2.attrType == '组件类型'
                    )[0].attrValue == '图层服务'
                  ? 'tcfw'
                  : val.infoList.filter(
                      (val2) => val2.attrType == '组件类型'
                    )[0].attrValue == '开发组件'
                  ? 'kfzj'
                  : val.infoList.filter(
                      (val2) => val2.attrType == '组件类型'
                    )[0].attrValue == '业务组件'
                  ? 'ywzj'
                  : 'yyzy'
              "
            ></div>
            <div class="right">
              <div class="ability-top">
                <div class="name">
                  {{ val.name }}
                  <span class="type">
                    {{
                      val.type == '应用资源'
                        ? '应用资源'
                        : val.infoList.filter(
                            (val2) => val2.attrType == '组件类型'
                          )[0].attrValue == '智能算法'
                        ? '智能算法'
                        : val.infoList.filter(
                            (val2) => val2.attrType == '组件类型'
                          )[0].attrValue == '图层服务'
                        ? '图层服务'
                        : val.infoList.filter(
                            (val2) => val2.attrType == '组件类型'
                          )[0].attrValue == '开发组件'
                        ? '开发组件'
                        : val.infoList.filter(
                            (val2) => val2.attrType == '组件类型'
                          )[0].attrValue == '业务组件'
                        ? '业务组件'
                        : '--'
                    }}
                  </span>
                </div>
                <div></div>
                <!-- <div class="btn" v-if="val.type == '组件服务'">技术文档</div> -->
              </div>
              <div class="ability-bottom">
                <div class="dec">资源描述：{{ val.description }}</div>
                <div class="result">
                  申请结果：{{
                    item.ended ? item.approveStatus || '审核完成' : '审核中'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box" v-if="item.list2.length > 0">
          <div class="ability" v-for="val in item.list2" :key="val.channelId">
            <div class="left sxt"></div>
            <div class="right">
              <div class="ability-top">
                <div class="name">
                  {{ val.channelName }}
                  <span class="type">基础设施</span>
                </div>
              </div>
              <div class="ability-bottom">
                <div class="dec2">位置：{{ val.nodeName }}</div>
                <div class="result" v-if="item.approveStatus == '通过'">
                  申请结果：{{
                    '列表地址：' +
                    backUrl +
                    'resource/getApplyCameraList/' +
                    item.instanceId +
                    ';' +
                    '视频流地址：' +
                    backUrl +
                    '/resource/hls/getHls/?channelId=' +
                    val.channelId
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ref, defineProps } from 'vue'
  const backUrl = ref(window.SITE_CONFIG.apiURL + '/')
  const props = defineProps({
    refObj: { type: Object, default: null },
  })
  const showThis = () => {
    window.open(
      window.SITE_CONFIG.previewUrl +
        'hisense_office/onlinePreview?url=' +
        btoa(encodeURI(props.refObj.enclosure))
    )
  }
  const showArr = ref([])
  console.log(props.refObj, '=====================================')
  if (props.refObj.resourceApplication) {
    showArr.value = []
    for (const key in props.refObj.resourceApplication) {
      if (props.refObj.resourceApplication[key].length > 0) {
        let obj = { name: '', instanceId: '', list: [], list2: [] }
        obj.name = key
        props.refObj.resourceApplication[key].map((item) => {
          obj.instanceId = item.instanceId
          obj.ended = item.ended
          obj.approveStatus = item.approveStatus
          if (item.resources.length > 0) {
            item.resources.map((val) => {
              obj.list.push(val)
            })
          } else {
            item.camera.map((val) => {
              obj.list2.push(val)
            })
          }
        })
        showArr.value.push(obj)
      }
    }
  }
</script>
<style lang="less" scoped>
  .title {
    font-size: 0.18rem;
    color: #000;
    font-weight: bold;
    margin-bottom: 0.2rem;
    padding-left: 0.1rem;
    border-left: 0.06rem #0058e1 solid;
  }
  .top {
    margin-bottom: 0.1rem;
    .main {
      background: #eee;
      padding: 0.2rem 0.2rem 0.1rem;
      p {
        display: flex;
        justify-content: space-between;
        & > span {
          width: 100%;
        }
        .enclosure {
          width: 95%;
          padding: 0.05rem 0.1rem;
          background: #ddd;
          display: flex;
          justify-content: space-between;
          margin-top: 0.05rem;
        }
        .btn:hover {
          color: #0058e1;
          cursor: pointer;
        }
      }
      .item {
        span {
          width: 2.5rem;
        }
      }
    }
  }
  .bottom {
    .main {
      .item {
        border-top: 1px #eee solid;
        .deptName {
          color: #0058e1;
          font-size: 0.16rem;
          margin-top: 0.1rem;
          display: flex;
          align-items: center;
          .img {
            width: 0.05rem;
            height: 0.05rem;
            border-radius: 0.05rem;
            background: #0058e1;
            margin-right: 0.1rem;
          }
        }
        .oddNumbers {
          margin: 0.1rem 0 0 0.15rem;
        }
        .box {
          margin-left: 0.1rem;
          .ability {
            height: 1.3rem;
            display: flex;
            border-bottom: 1px #eee solid;
            padding: 0.1rem 0;
            .left {
              display: inline-block;
              width: 1.1rem;
              height: 1.1rem;
              margin-left: 0.1rem;
              background: url('~@/assets/home/sxt_square.png') no-repeat;
              background-size: 100%;
            }

            .sxt {
              background: url('~@/assets/home/sxt_square.png') no-repeat;
              background-size: 100%;
            }
            .yyzy {
              background: url('~@/assets/home/yyzy_square.png') no-repeat;
              background-size: 100%;
            }

            .znsf {
              background: url('~@/assets/home/znsf_square.png') no-repeat;
              background-size: 100%;
            }

            .tcfw {
              background: url('~@/assets/home/tcfw_square.png') no-repeat;
              background-size: 100%;
            }

            .kfzj {
              background: url('~@/assets/home/kfzj_square.png') no-repeat;
              background-size: 100%;
            }

            .ywzj {
              background: url('~@/assets/home/ywzj_square.png') no-repeat;
              background-size: 100%;
            }
            .btn {
              cursor: pointer;
              color: #0087ff;
              align-self: flex-end;
              padding: 5px 10px;
              border: 1px #0087ff solid;
              border-radius: 0.2rem;
            }
            .right {
              flex: 1;
              margin-left: 0.15rem;
              .ability-top {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .name {
                  width: 6rem;
                  height: 0.2rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
                  .type {
                    background: #0087ff;
                    color: #fff;
                    padding: 2px 10px;
                    border-radius: 10px;
                    margin-left: 0.1rem;
                  }
                }
              }
              .ability-bottom {
                margin-top: 0.15rem;
                // display: flex;
                // justify-content: space-between;
                .dec {
                  width: 7rem;
                  height: 0.44rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
                }
                .dec2 {
                  width: 7rem;
                  height: 0.22rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  -webkit-box-orient: vertical;
                  word-break: break-all;
                }
                .result:hover {
                  color: #0058e1;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
    }
  }
</style>