hi-ucs/front/src/views/detailsAll/components/LayerService/LayerServiceInformation.vue

<template>
  <!-- 图层信息  -->
  <div class="usage-mode" v-if="flag">
    <div class="tltle">
      <DetalsTitle title="图层信息" type="INFORMATION"></DetalsTitle>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="content-left-content">
          <ul>
            <li v-for="(item, index) in dataFromLeft.content" :key="index">
              <img :src="iconImg" />
              <span>{{ item.type }}</span>
              <p>{{ item.values }}</p>
            </li>
          </ul>
          <ul>
            <li v-for="(item, index) in dataFromCenter.content" :key="index">
              <img :src="iconImg" />
              <span>{{ item.type }}</span>
              <p>{{ item.values }}</p>
            </li>
          </ul>
          <ul>
            <li v-for="(item, index) in dataFromRight.content" :key="index">
              <img :src="iconImg" />
              <span>{{ item.type }}</span>
              <p>{{ item.values }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
  import { ref, defineProps, watch } from 'vue'
  const iconImg = require('@/assets/detailsAll/layer-service/layer-icon.png')
  const dataFromLeft = ref({
    content: [
      {
        type: '服务类型',
        values: '',
      },
      {
        type: '覆盖区域',
        values: '',
      },
      {
        type: '切片策略',
        values: '',
      },
    ],
  })
  const dataFromCenter = ref({
    content: [
      {
        type: '坐标系',
        values: '',
      },
      {
        type: '切片尺寸详情',
        values: '',
      },
      {
        type: '最小级别名称',
        values: '',
      },
    ],
  })
  const dataFromRight = ref({
    content: [
      {
        type: '数据范围',
        values: '',
      },
      {
        type: '图层名称',
        values: '',
      },
      {
        type: '最大级别',
        values: '',
      },
    ],
  })
  //数据初始化
  const props = defineProps({
    dataList: { type: Object, default: null },
  })
  const flag = ref(true)
  if (props.dataList.infoList) {
    let obj = props.dataList.infoList.filter(
      (item) => item.attrType === '技术文档'
    )[0]
    if (!obj) {
      flag.value = false
    } else {
      // dataFrom.value.content[0].link.value = props.dataList.apiUrl
      // dataFrom.value.content[0].facilitator.value = props.dataList.deptContacts
      console.log('dataList', props.dataList)
      props.dataList.infoList.map((item) => {
        if (item.attrType === '服务类型') {
          dataFromLeft.value.content[0].values = item.attrValue || '123'
        } else if (item.attrType === '覆盖区域') {
          dataFromLeft.value.content[1].values = item.attrValue || '--'
        } else if (item.attrType === '切片策略') {
          dataFromLeft.value.content[2].values = item.attrValue || '--'
        } else if (item.attrType === '坐标系') {
          dataFromCenter.value.content[0].values = item.attrValue || '--'
        } else if (item.attrType === '切片尺寸') {
          dataFromCenter.value.content[1].values = item.attrValue || '--'
        } else if (item.attrType === '最小级别') {
          dataFromCenter.value.content[2].values = item.attrValue || '--'
        } else if (item.attrType === '数据范围') {
          dataFromRight.value.content[0].values = item.attrValue || '--'
        } else if (item.attrType === '图层类型') {
          dataFromRight.value.content[1].values = item.attrValue || '--'
        } else if (item.attrType === '最大级别') {
          dataFromRight.value.content[2].values = item.attrValue || '--'
        }
      })
    }
  }
  watch(
    () => props.dataList,
    (val) => {
      if (val) {
        let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0]
        if (!obj) {
          flag.value = false
        } else {
          // dataFrom.value.content[0].link.value = val.apiUrl
          // dataFrom.value.content[0].facilitator.value = val.deptContacts
          console.log('dataList', val)
          val.infoList.map((item) => {
            if (item.attrType === '服务类型') {
              dataFromLeft.value.content[0].values = item.attrValue || '123'
            } else if (item.attrType === '覆盖区域') {
              dataFromLeft.value.content[1].values = item.attrValue || '--'
            } else if (item.attrType === '切片策略') {
              dataFromLeft.value.content[2].values = item.attrValue || '--'
            } else if (item.attrType === '坐标系') {
              dataFromCenter.value.content[0].values = item.attrValue || '--'
            } else if (item.attrType === '切片尺寸') {
              dataFromCenter.value.content[1].values = item.attrValue || '--'
            } else if (item.attrType === '最小级别') {
              dataFromCenter.value.content[2].values = item.attrValue || '--'
            } else if (item.attrType === '数据范围') {
              dataFromRight.value.content[0].values = item.attrValue || '--'
            } else if (item.attrType === '图层类型') {
              dataFromRight.value.content[1].values = item.attrValue || '--'
            } else if (item.attrType === '最大级别') {
              dataFromRight.value.content[2].values = item.attrValue || '--'
            }
          })
        }
      }
    }
  )
</script>

<style lang="less" scoped>
  .usage-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.8rem 0;
    .content {
      margin-top: 0.3rem;
      display: flex;
      .content-left {
        height: 2.8rem;
        width: 13rem;
        background: url('~@/assets/detailsAll/layer-service/layer-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border-radius: 0.1rem;
        box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
        display: flex;
        align-items: center;
        padding: 0 0.35rem;

        .content-left-content {
          width: 100%;
          font-size: 0.2rem;
          color: rgba(33, 41, 86, 0.8);
          line-height: 0.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          ul {
            padding: 0;
            margin: 0;
          }
          ul li {
            list-style: none;
            display: flex;
            align-items: center;
            margin-bottom: 0.3rem;
            line-height: 0.25rem;
          }
          img {
            margin: 0 0.2rem 0 0;
            width: 0.15rem;
            height: 0.15rem;
          }
          span {
            font-size: 0.2rem;
            color: #666666;
            display: block;
            margin-right: 0.8rem;
            width: 120px;
          }
          p {
            width: 2rem;
            margin-bottom: 0;
            font-size: 0.2rem;
            color: #333333;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
</style>