应用资源

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,10 +22,10 @@
 </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: '部署与安全',
   englishTitle: 'DEPLOY&SAFE',
   content: [
@@ -45,12 +38,17 @@
       childrenContent: [],
     },
   ],
-  })
+})
-  //数据初始化
+let objUrl = {
-  const props = defineProps({
+  attrType: '访问地址',
+  attrValue: '' || '------',
+}
+dataFrom.value.content[0].childrenContent.push(objUrl)
+//数据初始化
+const props = defineProps({
   dataList: { type: Object, default: null },
-  })
+})
-  if (props.dataList.infoList) {
+if (props.dataList.infoList) {
   props.dataList.infoList.map((item) => {
     if (
       item.attrType === '部署区域' ||
@@ -63,6 +61,8 @@
       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) {
@@ -80,17 +80,16 @@
       dataFrom.value.content[1].childrenContent.push(itemContent)
     })
   }
-
+}
+watch(
+  () => props.dataList,
+  (val) => {
+    if (val) {
       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) => {
@@ -105,6 +104,8 @@
           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) {
@@ -122,48 +123,46 @@
           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;
   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(
+      background: linear-gradient(to right,
-          to right,
           rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 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;
         line-height: 0.26rem;
         color: #212956;
         margin-bottom: 0.2rem;
       }
+
       .card-content {
         div {
           display: inline-block;
@@ -172,19 +171,24 @@
           font-size: 0.2rem;
           line-height: 0.2rem;
           max-width: 5.84rem;
-            overflow: hidden; /*超出的隐藏*/
+          overflow: hidden;
+          /*超出的隐藏*/
           white-space: nowrap;
-            text-overflow: ellipsis; /*超出的设置为省略号*/
+          text-overflow: ellipsis;
+
+          /*超出的设置为省略号*/
           span {
             display: inline-block;
             max-width: 4rem;
-              overflow: hidden; /*超出的隐藏*/
+            overflow: hidden;
+            /*超出的隐藏*/
             white-space: nowrap;
-              text-overflow: ellipsis; /*超出的设置为省略号*/
+            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)