应用资源

front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue

@@ -2,17 +2,10 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
     </div>
     <div class="content">
-      <div
+      <div v-for="(item, index) in dataFrom.content" :key="index" class="content-card">
-        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">
@@ -29,162 +22,173 @@
 </template>
 
 <script setup>
-  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
+import DetalsTitle from '@/views/detailsAll/components/DetalsTitle'
-  import { ref, defineProps, watch } from 'vue'
+import { ref, defineProps, watch } from 'vue'
 
-  let dataFrom = ref({
+let dataFrom = ref({
-    title: '部署与安全',
+  title: '部署与安全',
-    englishTitle: 'DEPLOY&SAFE',
+  englishTitle: 'DEPLOY&SAFE',
-    content: [
+  content: [
+    {
+      childrenTitle: '部署',
+      childrenContent: [],
+    },
+    {
+      childrenTitle: '安全',
+      childrenContent: [],
+    },
+  ],
+})
+let objUrl = {
+  attrType: '访问地址',
+  attrValue: '' || '------',
+}
+dataFrom.value.content[0].childrenContent.push(objUrl)
+//数据初始化
+const props = defineProps({
+  dataList: { type: Object, default: null },
+})
+if (props.dataList.infoList) {
+  props.dataList.infoList.map((item) => {
+    if (
+      item.attrType === '部署区域' ||
+      item.attrType === '是否统一登录' ||
+      item.attrType === '部署位置'
+    ) {
+      dataFrom.value.content[0].childrenContent.push(item)
+    } else if (
+      item.attrType === '是否等保备案' ||
+      item.attrType === '等保定级'
+    ) {
+      dataFrom.value.content[1].childrenContent.push(item)
+    } else if (item.attrType === '访问地址') {
+      objUrl.value = item.value
+    }
+  })
+  if (dataFrom.value.content[1].childrenContent.length <= 0) {
+    let data = [
       {
-        childrenTitle: '部署',
+        attrType: '是否等保备案',
-        childrenContent: [],
+        attrValue: '------',
       },
       {
-        childrenTitle: '安全',
+        attrType: '等保定级',
-        childrenContent: [],
+        attrValue: '------',
       },
-    ],
+    ]
-  })
+    data.map((itemContent) => {
-  //数据初始化
+      dataFrom.value.content[1].childrenContent.push(itemContent)
-  const props = defineProps({
-    dataList: { type: Object, default: null },
-  })
-  if (props.dataList.infoList) {
-    props.dataList.infoList.map((item) => {
-      if (
-        item.attrType === '部署区域' ||
-        item.attrType === '是否统一登录' ||
-        item.attrType === '部署位置'
-      ) {
-        dataFrom.value.content[0].childrenContent.push(item)
-      } else if (
-        item.attrType === '是否等保备案' ||
-        item.attrType === '等保定级'
-      ) {
-        dataFrom.value.content[1].childrenContent.push(item)
-      }
     })
-    if (dataFrom.value.content[1].childrenContent.length <= 0) {
-      let data = [
-        {
-          attrType: '是否等保备案',
-          attrValue: '------',
-        },
-        {
-          attrType: '等保定级',
-          attrValue: '------',
-        },
-      ]
-      data.map((itemContent) => {
-        dataFrom.value.content[1].childrenContent.push(itemContent)
-      })
-    }
-
-    let obj = {
-      attrType: '访问地址',
-      attrValue: props.dataList.link || '------',
-    }
-    dataFrom.value.content[0].childrenContent.push(obj)
   }
-  watch(
+}
-    () => props.dataList,
+watch(
-    (val) => {
+  () => props.dataList,
-      if (val) {
+  (val) => {
-        dataFrom.value.content[0].childrenContent = []
+    if (val) {
-        dataFrom.value.content[1].childrenContent = []
+      let obj = {
-        props.dataList.infoList.map((item) => {
+        attrType: '访问地址',
-          if (
+        attrValue: props.dataList.link || '------',
-            item.attrType === '部署区域' ||
+      }
-            item.attrType === '是否统一登录' ||
+      dataFrom.value.content[0].childrenContent.push(obj)
-            item.attrType === '部署位置'
+      dataFrom.value.content[0].childrenContent = []
-          ) {
+      dataFrom.value.content[1].childrenContent = []
-            dataFrom.value.content[0].childrenContent.push(item)
+      props.dataList.infoList.map((item) => {
-          } else if (
+        if (
-            item.attrType === '是否等保备案' ||
+          item.attrType === '部署区域' ||
-            item.attrType === '等保定级'
+          item.attrType === '是否统一登录' ||
-          ) {
+          item.attrType === '部署位置'
-            dataFrom.value.content[1].childrenContent.push(item)
+        ) {
-          }
+          dataFrom.value.content[0].childrenContent.push(item)
+        } else if (
+          item.attrType === '是否等保备案' ||
+          item.attrType === '等保定级'
+        ) {
+          dataFrom.value.content[1].childrenContent.push(item)
+        } else if (item.attrType === '访问地址') {
+          objUrl.value = item.value
+        }
+      })
+      if (dataFrom.value.content[1].childrenContent.length <= 0) {
+        let data = [
+          {
+            attrType: '是否等保备案',
+            attrValue: '------',
+          },
+          {
+            attrType: '等保定级',
+            attrValue: '------',
+          },
+        ]
+        data.map((itemContent) => {
+          dataFrom.value.content[1].childrenContent.push(itemContent)
         })
-        if (dataFrom.value.content[1].childrenContent.length <= 0) {
-          let data = [
-            {
-              attrType: '是否等保备案',
-              attrValue: '------',
-            },
-            {
-              attrType: '等保定级',
-              attrValue: '------',
-            },
-          ]
-          data.map((itemContent) => {
-            dataFrom.value.content[1].childrenContent.push(itemContent)
-          })
-        }
-        let obj = {
-          attrType: '访问地址',
-          attrValue: props.dataList.link || '------',
-        }
-        dataFrom.value.content[0].childrenContent.push(obj)
       }
     }
-  )
+  }
+)
 </script>
 
 <style lang="less" scoped>
-  .application-deployment-and-security {
+.application-deployment-and-security {
-    padding: 0.8rem 0;
+  padding: 0.8rem 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    margin-bottom: 0.3rem;
+  }
+
+  .content {
     display: flex;
-    flex-direction: column;
+    width: 13rem;
-    align-items: center;
+    justify-content: space-between;
-    .title {
+
-      margin-bottom: 0.3rem;
+    .content-card {
-    }
+      height: 1.5rem;
-    .content {
+      width: 6.2rem;
-      display: flex;
+      border-radius: 0.2rem;
-      width: 13rem;
+      background: linear-gradient(to right,
-      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)
+          rgba(148, 163, 252, 0.4));
-        );
+      padding: 0 0.3rem;
-        padding: 0 0.3rem;
+      display: flex;
-        display: flex;
+      flex-direction: column;
-        flex-direction: column;
+      justify-content: center;
-        justify-content: center;
+
-        .card-title {
+      .card-title {
-          font-size: 0.26rem;
+        font-size: 0.26rem;
-          line-height: 0.26rem;
+        line-height: 0.26rem;
-          color: #212956;
+        color: #212956;
-          margin-bottom: 0.2rem;
+        margin-bottom: 0.2rem;
-        }
+      }
-        .card-content {
+
-          div {
+      .card-content {
+        div {
+          display: inline-block;
+          margin-right: 0.7rem;
+          color: rgba(33, 41, 86, 0.8);
+          font-size: 0.2rem;
+          line-height: 0.2rem;
+          max-width: 5.84rem;
+          overflow: hidden;
+          /*超出的隐藏*/
+          white-space: nowrap;
+          text-overflow: ellipsis;
+
+          /*超出的设置为省略号*/
+          span {
             display: inline-block;
-            margin-right: 0.7rem;
+            max-width: 4rem;
-            color: rgba(33, 41, 86, 0.8);
+            overflow: hidden;
-            font-size: 0.2rem;
+            /*超出的隐藏*/
-            line-height: 0.2rem;
-            max-width: 5.84rem;
-            overflow: hidden; /*超出的隐藏*/
             white-space: nowrap;
-            text-overflow: ellipsis; /*超出的设置为省略号*/
+            text-overflow: ellipsis;
-            span {
+            /*超出的设置为省略号*/
-              display: inline-block;
-              max-width: 4rem;
-              overflow: hidden; /*超出的隐藏*/
-              white-space: nowrap;
-              text-overflow: ellipsis; /*超出的设置为省略号*/
-            }
           }
         }
       }
     }
   }
+}
 </style>

front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue

@@ -53,12 +53,12 @@ if (props.dataList.infoList) {
   dataFrom.value.content[0].childrenContent[0] = obj
   let deptContacts = {
     attrType: '部门联系人',
-    attrValue: props.dataList.deptContacts || '------',
+    attrValue: '',
   }
   dataFrom.value.content[0].childrenContent[1] = deptContacts
   let deptPhone = {
     attrType: '部门联系电话',
-    attrValue: props.dataList.deptPhone || '------',
+    attrValue: '',
   }
   dataFrom.value.content[0].childrenContent[2] = deptPhone
   props.dataList.infoList.map((item) => {
@@ -87,8 +87,13 @@ if (props.dataList.infoList) {
           dataFrom.value.content[1].childrenContent[2].attrValue = '------'
         }
       }
+    } else if (item.attrType === '部门联系人') {
+      deptContacts.attrValue = item.attrValue || '------'
+    } else if (item.attrType === '部门联系人电话') {
+      deptPhone.attrValue = item.attrValue || '------'
     }
   })
+
   console.log('obj', dataFrom.value)
 }
 watch(
@@ -147,6 +152,10 @@ watch(
                 '------'
             }
           }
+        } else if (item.attrType === '部门联系人') {
+          deptContacts.attrValue = item.attrValue || '------'
+        } else if (item.attrType === '部门联系人电话') {
+          deptPhone.attrValue = item.attrValue || '------'
         }
       })
       console.log('obj', dataFrom.value)