From 161eaddef3e2b362191a9272a5191dad972fab36 Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Tue, 14 Jun 2022 14:33:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BA=94=E7=94=A8=E8=B5=84=E6=BA=90=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/assets/detailsAll/yy_bg1.png        | Bin 0 -> 1884 bytes
 front/src/assets/detailsAll/yy_dian.png       | Bin 0 -> 1041 bytes
 .../src/views/detailsAll/AlgorithmDetails.vue |   2 +-
 .../views/detailsAll/ApplicationDetails.vue   |  32 ++-
 .../Application/ApplicationAbilityToise.vue   | 136 ++++++++++
 .../ApplicationDeploymentAndSecurity.vue      | 141 ++++++++++
 .../ApplicationFunctionIntorduction.vue       | 253 ++++++++++++++++++
 ...tionOwningDepartmentAndServiceProvider.vue | 174 ++++++++++++
 8 files changed, 735 insertions(+), 3 deletions(-)
 create mode 100644 front/src/assets/detailsAll/yy_bg1.png
 create mode 100644 front/src/assets/detailsAll/yy_dian.png
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue

diff --git a/front/src/assets/detailsAll/yy_bg1.png b/front/src/assets/detailsAll/yy_bg1.png
new file mode 100644
index 0000000000000000000000000000000000000000..f5316a86625c795e29cd75432be02070ad1e0152
GIT binary patch
literal 1884
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
ASpWb4

literal 0
HcmV?d00001

diff --git a/front/src/assets/detailsAll/yy_dian.png b/front/src/assets/detailsAll/yy_dian.png
new file mode 100644
index 0000000000000000000000000000000000000000..a6c079dfd60933bc80937be6f70821a22f4bab30
GIT binary patch
literal 1041
zcmaJ=PfXKL94?>>K?x8}axgC)B$%-N+a|PO!q#qX2_<CAu#>TCA6o<MtL>XBgagV6
zmG~#92NM$$kA^deF&;c|!+1ds9*75{CS1ID($}#K56+jg?@xZ;_xpao_r1-z*{i)h
zLp>Bl_2#llKA3~AJ4F8O_b+Q?x`5L~JdYM}O>-fYG*AhGoTZgv9%{zQ%{@3tQC-7k
zp@@s>jHDxr(SjJpw;Y0|sL3hc(ex#VK?#;kJ3$}6c}D}&NYD#$l~WxVR?O_G3+Gp7
z3;ODkE*kXI6)@>bgusGW1HQFvdy=1^>%0<K2gfW8>LGY3L7#{!s&ha_E(GHYAJI9E
z1LGoNXeCWAmBxU;2|UZiSUwivI4LShu^4C!nxu1$MJcaj8p+5mL02$#B$ln!YD_K4
zAh*o&qA0SQzzRZyL`1w58*6^V_QFjD1$w$`I@m-u2pF{zs^SDqq@L7ZIW1b-YxIe9
zjP*5#<ryxhsTruM{|~jSR<wun@Ko<ViM_&#1KB+EP}SAR%`Jw5RE{LOP{YVAAhg_U
z<6H${<W-OZ1c8Zz(FM~sP|dqk2dJu)vpuZYI?O2vnouyNX-Hx^D#&pml}={jJfD^)
zQhYR>j0<FBQkTbtCRRau)q*x|VvSR*+!h;{!E#7u1-j-fXk=VufqKo7*<Op-mal;|
z+G|O+#j->U8{F()H{CoU_6e3P<C0Cw`p_nRcZspR{k>1*QEcRtWWhfyy?*iQS;x74
z>gYOPLPvdHAJ0t0esmlSk4C1mgEJfaHoC8d2QT)X-;D_a`|H=jg9AfcOi0R`4@1V*
zTcD0iuRYDGpgIE7<J$*My0^+NzkPn++4<_j*$0{3&`<DtT@K$3EkC-qGaz^E7-v3C
e^gR#tQ{5a@*dG}?+&(aZN198|Dm$qgcm4pGxJNMn

literal 0
HcmV?d00001

diff --git a/front/src/views/detailsAll/AlgorithmDetails.vue b/front/src/views/detailsAll/AlgorithmDetails.vue
index d9d03b2e..edab53f7 100644
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@@ -166,6 +166,6 @@
     left: 0;
   }
   .fixed2 > div:nth-of-type(3) {
-    margin-top: 84px;
+    margin-top: 0.84rem;
   }
 </style>
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 9eb31790..a9bcfe8f 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -62,6 +62,30 @@
       id="usage-mode"
       class="scrollBox"
     ></algorithm-usage-mode>
+    <!-- 功能介绍-->
+    <application-function-intorduction
+      :dataList="dataList.data"
+      id="subtool"
+      class="scrollBox"
+    ></application-function-intorduction>
+    <!-- 使用能力 -->
+    <application-ability-toise
+      :dataList="dataList.data"
+      id="ability-toise"
+      class="scrollBox"
+    ></application-ability-toise>
+    <!-- 部署与安全-->
+    <application-deployment-and-security
+      :dataList="dataList.data"
+      id="application-deployment-and-security"
+      class="scrollBox"
+    ></application-deployment-and-security>
+    <!-- 归属部门与服务商-->
+    <application-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="application-owning-department-and-service-provider"
+      class="scrollBox"
+    ></application-owning-department-and-service-provider>
     <!-- 常见问题-->
     <algorithm-common-problem
       :dataList="dataList.data"
@@ -71,6 +95,10 @@
   </div>
 </template>
 <script setup>
+  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
+  import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
+  import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
+  import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
   import ApplicationTopDetails from '@/views/detailsAll/components/Application/ApplicationTopDetails.vue'
   import ApplicationNavigation from '@/views/detailsAll/components/Application/ApplicationNavigation.vue'
   import ApplicationPresentation from '@/views/detailsAll/components/Application/ApplicationPresentation.vue'
@@ -137,7 +165,7 @@
         console.log('初始化详情页=========================>', dataList.data)
         const arrList = ref([])
         arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-        if (arrList.value.indexOf(id) === -1) {
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
           arrList.value.push(id)
           updateVisits({
             id: res.data.data.id,
@@ -168,6 +196,6 @@
     left: 0;
   }
   .fixed2 > div:nth-of-type(3) {
-    margin-top: 84px;
+    margin-top: 0.84rem;
   }
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue b/front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue
new file mode 100644
index 00000000..b12ca549
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationAbilityToise.vue
@@ -0,0 +1,136 @@
+<!--使用能力-->
+<template>
+  <div class="application-ability-toise" v-if="flase">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div v-for="(item, index) in dataFrom.content" :key="index" class="card">
+        <div class="card-title">{{ item.title }}</div>
+        <div class="card-content">
+          <div
+            v-for="(cardContentItem, cardContentIndex) in item.children"
+            :key="cardContentIndex"
+            class="card-content-bottom"
+          >
+            <span></span>
+            {{ cardContentItem }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  let dataFrom = ref({
+    title: '使用能力',
+    englishTitle: 'ABILITY',
+    content: [
+      {
+        title: '组件服务',
+        children: [
+          '能力名称一',
+          '能力名称二',
+          '能力名称三',
+          '能力名称四',
+          '能力名称一',
+          '能力名称一',
+          '能力名称一',
+          '能力名称八',
+        ],
+      },
+      {
+        title: '数据资源',
+        children: [
+          '能力名称一',
+          '能力名称二',
+          '能力名称三',
+          '能力名称四',
+          '能力名称一',
+          '能力名称一',
+          '能力名称一',
+          '能力名称八',
+        ],
+      },
+      {
+        title: '基础设施',
+        children: [
+          '能力名称一',
+          '能力名称二',
+          '能力名称三',
+          '能力名称四',
+          '能力名称一',
+          '能力名称一',
+          '能力名称一',
+          '能力名称八',
+        ],
+      },
+    ],
+  })
+</script>
+
+<style lang="less" scoped>
+  .application-ability-toise {
+    padding: 1.4rem 0 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #f7f8fa;
+    .title {
+      margin-bottom: 0.4rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      .card {
+        display: flex;
+        flex-direction: column;
+        width: 4.2rem;
+        align-items: space-between;
+        padding: 0.3rem 0.35rem 0.3rem 0.35rem;
+        background: #ffffff;
+        margin-right: 0.2rem;
+        border: 0.01rem #e4e6f5 solid;
+        border-radius: 0.1rem;
+        .card-title {
+          margin: auto;
+          width: 1.3rem;
+          height: 0.45rem;
+          font-size: 0.22rem;
+          color: #917567;
+          background: url('~@/assets/detailsAll/yy_bg1.png') no-repeat;
+          background-size: 100%;
+          text-align: center;
+          line-height: 0.45rem;
+        }
+        .card-content {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          .card-content-bottom {
+            text-align: center;
+            margin-top: 0.3rem;
+            color: #666;
+            font-size: 0.18rem;
+            span {
+              display: inline-block;
+              width: 0.12rem;
+              height: 0.12rem;
+              margin-right: 0.1rem;
+              background: url('~@/assets/detailsAll/yy_dian.png') no-repeat;
+              background-size: 100%;
+            }
+          }
+        }
+      }
+      .card:nth-child(3n + 3) {
+        margin-right: 0;
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
new file mode 100644
index 00000000..5465dfbc
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
@@ -0,0 +1,141 @@
+<!--部署与安全-->
+<template>
+  <div class="application-deployment-and-security">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div
+        v-for="(item, index) in dataFrom.content"
+        :key="index"
+        class="content-card"
+      >
+        <div class="card-title">{{ item.childrenTitle }}</div>
+        <div class="card-content">
+          <div v-for="carditem in item.childrenContent" :key="carditem">
+            <span>{{ carditem.attrType }}：</span>
+            <a-tooltip>
+              <template #title>{{ carditem.attrValue }}</template>
+              <span>{{ carditem.attrValue }}</span>
+            </a-tooltip>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+
+  let dataFrom = ref({
+    title: '部署与安全',
+    englishTitle: 'DEPLOY&SAFE',
+    content: [
+      {
+        childrenTitle: '部署',
+        childrenContent: [],
+      },
+      {
+        childrenTitle: '安全',
+        childrenContent: [],
+      },
+    ],
+  })
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    props.dataList.infoList.map((item) => {
+      if (item.attrType === '部署区域' || item.attrType === '是否统一登录') {
+        dataFrom.value.content[0].childrenContent.push(item)
+      } else if (
+        item.attrType === '是否等保备案' ||
+        item.attrType === '等保定级'
+      ) {
+        dataFrom.value.content[1].childrenContent.push(item)
+      }
+    })
+    let obj = {
+      attrType: '访问地址',
+      attrValue: props.dataList.link,
+    }
+    dataFrom.value.content[0].childrenContent.push(obj)
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        dataFrom.value.content[0].childrenContent = []
+        dataFrom.value.content[1].childrenContent = []
+        props.dataList.infoList.map((item) => {
+          if (
+            item.attrType === '部署区域' ||
+            item.attrType === '是否统一登录'
+          ) {
+            dataFrom.value.content[0].childrenContent.push(item)
+          } else if (
+            item.attrType === '是否等保备案' ||
+            item.attrType === '等保定级'
+          ) {
+            dataFrom.value.content[1].childrenContent.push(item)
+          }
+        })
+        let obj = {
+          attrType: '访问地址',
+          attrValue: props.dataList.link,
+        }
+        dataFrom.value.content[0].childrenContent.push(obj)
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+        }
+        .card-content {
+          div {
+            display: inline-block;
+            margin-right: 0.7rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
new file mode 100644
index 00000000..03d712d7
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
@@ -0,0 +1,253 @@
+<!--功能介绍-->
+<template>
+  <div class="function-intorduction" v-if="flag">
+    <div class="application-scenarios-and-case-son">
+      <!-- {{ dataFrom.attrType }} -->
+      <div class="title">
+        <DetalsTitle :title="dataFrom.attrType" type="INTRODUCE"></DetalsTitle>
+      </div>
+      <div class="tab">
+        <div
+          v-for="(itemSonTitle, indexSonTitle) in dataFrom.attrValue"
+          :key="itemSonTitle.name"
+          @click="tabSwitch(itemSonTitle.name)"
+          class="tab-son"
+          :class="
+            tabIndexClass(indexSonTitle, dataFrom.name, dataFrom.attrValue)
+          "
+        >
+          <a-tooltip>
+            <template #title>{{ itemSonTitle.name }}</template>
+            <div
+              class="tab-top"
+              :class="
+                tabInitialize() == itemSonTitle.name ? 'tab-top-down' : ''
+              "
+            >
+              {{ itemSonTitle.name }}
+            </div>
+          </a-tooltip>
+          <div
+            class="tab-bottom"
+            v-if="tabInitialize() == itemSonTitle.name"
+          ></div>
+        </div>
+      </div>
+      <template v-for="itemSonTitle in dataFrom.attrValue" :key="itemSonTitle">
+        <div class="content" v-if="tabindex == itemSonTitle.name">
+          <div class="content-left">
+            <div class="content-left-scene" v-if="!itemSonTitle.img"></div>
+            <a-image
+              :width="635"
+              :height="340"
+              :src="itemSonTitle.img"
+              v-if="itemSonTitle.img"
+            ></a-image>
+          </div>
+          <div class="content-right">
+            <div class="content-right-scene">
+              <div class="content-top">{{ itemSonTitle.name }}</div>
+              <a-tooltip>
+                <template #title>{{ itemSonTitle.desc }}</template>
+                <div class="content-bottom">{{ itemSonTitle.desc }}</div>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  const flag = ref(true)
+  let dataFrom = ref([])
+  // tab切换方法
+  let tabindex = ref('场景说明一')
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '功能介绍'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      obj.attrValue = JSON.parse(obj.attrValue)
+      dataFrom.value = obj
+      tabindex.value = dataFrom.value.attrValue[0].name
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '功能介绍')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          obj.attrValue = JSON.parse(obj.attrValue)
+          dataFrom.value = obj
+          tabindex.value = dataFrom.value.attrValue[0].name
+        }
+      }
+    }
+  )
+  //滚动条样式
+  function tabIndexClass(index, title, content) {
+    if (title == '功能介绍' && index == 0 && content.length > 6) {
+      return 'tab-son-class'
+    }
+  }
+  //初始化tab切换（判断标题不同，点击事件的判断变量不同）
+  function tabInitialize() {
+    return tabindex.value
+  }
+  //tab切换点击事件
+  function tabSwitch(name) {
+    tabindex.value = name
+    return tabindex.value
+  }
+</script>
+
+<style lang="less" scoped>
+  .function-intorduction {
+    width: 100%;
+    background: #f7f8fa;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: unset;
+    .application-scenarios-and-case-son {
+      padding-top: 0.8rem;
+      padding-bottom: 0.8rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      overflow: unset;
+      .tab {
+        max-width: 13rem;
+        overflow-x: auto;
+        display: flex;
+        justify-content: center;
+        color: #808080;
+        border-bottom: 0.01rem #e4e6f5 solid;
+        margin-top: 0.45rem;
+        margin-bottom: 0.4rem;
+        cursor: pointer;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+        .tab-son {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          margin-right: 1rem;
+          .tab-top {
+            min-width: 1.2rem;
+            font-size: 0.24rem;
+            line-height: 0.24rem;
+            margin-bottom: 0.2rem;
+            max-width: 2rem;
+            height: 0.24rem;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+          }
+          .tab-top-down {
+            min-width: 1.2rem;
+            color: #526aff;
+            margin-bottom: 0.16rem;
+          }
+          .tab-bottom {
+            height: 0.04rem;
+            width: 0.6rem;
+            background: #526aff;
+          }
+        }
+        .tab-son-class {
+          margin-left: 4.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son-class-two {
+          margin-left: 2.3rem;
+          margin-bottom: 0.02rem;
+        }
+        .tab-son:last-child {
+          margin-right: 0rem;
+        }
+      }
+      .tab::-webkit-scrollbar-thumb {
+        background: rgba(82, 106, 255, 0.4);
+      }
+      .content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        min-width: 13rem;
+        height: 3.4rem;
+        .content-left {
+          position: absolute;
+          left: 0;
+          min-width: 6.2rem;
+          :deep(.ant-image-img) {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+          // text-align: center;
+          .content-top {
+            text-align: left;
+          }
+        }
+        .content-right {
+          width: 6.2rem;
+          height: 3.4rem;
+          position: absolute;
+          right: 0;
+          display: flex;
+          justify-content: center;
+        }
+        .content-right-scene,
+        .content-right-case {
+          width: 6.2rem;
+          height: 3.4rem;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+        .content-left-scene,
+        .content-left-case {
+          height: 3.4rem;
+          width: 6.35rem;
+          border-radius: 0.1rem;
+          background: url('~@/assets/detailsAll/sf_tupianceshi.png') no-repeat;
+          background-position: center;
+          background-size: 6.35rem 3.4rem;
+        }
+        .content-top {
+          font-size: 0.22rem;
+          line-height: 0.22rem;
+          color: #000000;
+          margin-bottom: 0.35rem;
+        }
+        .content-bottom {
+          font-size: 0.18rem;
+          color: #999999;
+          line-height: 0.26rem;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 6;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+    .application-scenarios-and-case-son:first-child {
+      padding-top: 1rem;
+    }
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue b/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
new file mode 100644
index 00000000..c575dafd
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
@@ -0,0 +1,174 @@
+<!--归属部门与服务商-->
+<template>
+  <div class="application-deployment-and-security">
+    <div class="title">
+      <DetalsTitle
+        :title="dataFrom.title"
+        :type="dataFrom.englishTitle"
+      ></DetalsTitle>
+    </div>
+    <div class="content">
+      <div
+        v-for="(item, index) in dataFrom.content"
+        :key="index"
+        class="content-card"
+      >
+        <div class="card-title">{{ item.childrenTitle }}</div>
+        <div class="card-content">
+          <div v-for="carditem in item.childrenContent" :key="carditem">
+            <div>
+              <span>{{ carditem.attrType }}：</span>
+              <a-tooltip>
+                <template #title>{{ carditem.attrValue }}</template>
+                <span>{{ carditem.attrValue }}</span>
+              </a-tooltip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+  import { ref, defineProps, watch } from 'vue'
+  let dataFrom = ref({
+    title: '归属部门与服务商',
+    englishTitle: 'DEPARTMENT&ERVICE',
+    content: [
+      {
+        childrenTitle: '归属部门信息',
+        childrenContent: [],
+      },
+      {
+        childrenTitle: '服务商信息',
+        childrenContent: [],
+      },
+    ],
+  })
+  console.log(dataFrom.value)
+  //数据初始化
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  if (props.dataList.infoList) {
+    let obj = {
+      attrType: '部门名称',
+      attrValue: props.dataList.deptName,
+    }
+    dataFrom.value.content[0].childrenContent[0] = obj
+    let deptContacts = {
+      attrType: '部门联系人',
+      attrValue: props.dataList.deptContacts,
+    }
+    dataFrom.value.content[0].childrenContent[1] = deptContacts
+    let deptPhone = {
+      attrType: '部门联系人',
+      attrValue: props.dataList.deptPhone,
+    }
+    dataFrom.value.content[0].childrenContent[2] = deptPhone
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '服务商联系电话'
+      ) {
+        dataFrom.value.content[1].childrenContent.push(item)
+      }
+    })
+    console.log('obj', dataFrom.value)
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        dataFrom.value.content[0].childrenContent = []
+        dataFrom.value.content[1].childrenContent = []
+        let obj = {
+          attrType: '部门名称',
+          attrValue: props.dataList.deptName,
+        }
+        dataFrom.value.content[0].childrenContent[0] = obj
+        let deptContacts = {
+          attrType: '部门联系人',
+          attrValue: props.dataList.deptContacts,
+        }
+        dataFrom.value.content[0].childrenContent[1] = deptContacts
+        let deptPhone = {
+          attrType: '部门联系人',
+          attrValue: props.dataList.deptPhone,
+        }
+        dataFrom.value.content[0].childrenContent[2] = deptPhone
+        props.dataList.infoList.map((item) => {
+          if (
+            item.attrType === '服务商' ||
+            item.attrType === '服务商联系人' ||
+            item.attrType === '服务商联系电话'
+          ) {
+            dataFrom.value.content[1].childrenContent.push(item)
+          }
+        })
+        console.log('obj', dataFrom.value)
+      }
+    }
+  )
+</script>
+
+<style lang="less" scoped>
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+    .content {
+      display: flex;
+      width: 13rem;
+      justify-content: space-between;
+      .content-card {
+        height: 1.5rem;
+        width: 6.2rem;
+        border-radius: 0.2rem;
+        background: linear-gradient(
+          to right,
+          rgba(113, 132, 252, 0.4),
+          rgba(148, 163, 252, 0.4)
+        );
+        padding: 0 0.3rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+          line-height: 0.26rem;
+        }
+        .card-content {
+          white-space: nowrap;
+          div {
+            display: inline-block;
+            margin-right: 0.2rem;
+            color: rgba(33, 41, 86, 0.8);
+            font-size: 0.2rem;
+            max-width: 2.8rem;
+            div {
+              max-width: 2.8rem;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 1;
+            }
+          }
+          div:first-child {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+</style>