详情页bug以及后台日志

back/src/views/modules/sys/log-data-modification-log.vue

@@ -0,0 +1,301 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__log-operation">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
+        <el-form-item>
+          <el-select
+            v-model="dataForm.status"
+            :placeholder="$t('logOperation.status')"
+            clearable
+          >
+            <el-option
+              :label="$t('logOperation.status0')"
+              :value="0"
+            ></el-option>
+            <el-option
+              :label="$t('logOperation.status1')"
+              :value="1"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.creatorName"
+            placeholder="请输入操作人"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.operation"
+            placeholder="请输入操作名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select
+            v-model="operationType"
+            placeholder="请选择操作类型"
+            clearable
+          >
+            <el-option
+              label="增加"
+              value="/renren-admin/resource%/insert"
+            ></el-option>
+            <el-option
+              label="更新"
+              value="/renren-admin/resource%/update"
+            ></el-option>
+            <el-option
+              label="删除"
+              value="/renren-admin/resource%/delete"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetFunction()"> 重置 </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{
+            $t('export')
+          }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%"
+        :row-class-name="rowClassName"
+      >
+        <el-table-column
+          label="序号"
+          align="center"
+          prop="xh"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="operation"
+          label="操作名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="creatorName"
+          label="操作人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestUriCharacters"
+          label="操作类型"
+          header-align="center"
+          width="100"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="operationTable"
+          label="操作数据表"
+          header-align="center"
+          align="center"
+          width="120"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="status"
+          label="操作结果"
+          sortable="custom"
+          header-align="center"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
+              $t('logOperation.status0')
+            }}</el-tag>
+            <el-tag v-else size="small" type="success">{{
+              $t('logOperation.status1')
+            }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="操作时间"
+          sortable="custom"
+          header-align="center"
+          align="center"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="requestMethod"
+          label="操作方法"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestParams"
+          label="传递参数"
+          header-align="center"
+          align="center"
+          width="120"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="resultData"
+          label="返回结果"
+          header-align="center"
+          width="150"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      >
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/sys/log/operation/page',
+        getDataListIsPage: true,
+        exportURL: '/sys/log/operation/export'
+      },
+      dataForm: {
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: '',
+        operationType: 'all'
+      },
+      operationType: '',
+      value1: ''
+    }
+  },
+  watch: {
+    value1 (val) {
+      val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.startDate = val[0]
+      val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.endDate = val[1]
+    },
+    dataList (val) {
+      if (val[0].requestUri) {
+        this.requestUriFunction()
+      }
+    },
+    operationType (val) {
+      if (val !== 'all') {
+        this.dataForm.operationType = val
+      }
+    }
+  },
+  methods: {
+    // 重置按钮
+    resetFunction () {
+      const params = {
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: '',
+        operationType: 'all'
+      }
+      this.value1 = '' // 格式化日期
+      this.operationType = '' // 操作类型转化
+      this.page = 1
+      this.limit = 10
+      this.dataForm = params
+      this.getDataList() // 重置完调用查询方法
+    },
+    // 序号
+    rowClassName ({ row, rowIndex }) {
+      row.xh = rowIndex + 1 + (this.page - 1) * this.limit
+    },
+    // 操作类型字段
+    requestUriFunction () {
+      this.dataList.map((item, index) => {
+        const name = item.requestUri.substring(
+          item.requestUri.lastIndexOf('/') + 1
+        )
+        switch (name) {
+          case 'delete':
+            this.dataList[index].requestUriCharacters = '删除'
+            break
+          case 'update':
+            this.dataList[index].requestUriCharacters = '更新'
+            break
+          case 'insert':
+            this.dataList[index].requestUriCharacters = '增加'
+            break
+        }
+      })
+    },
+    // 定义格式化函数：
+    handleTime (time, format) {
+      if (time == null || time == undefined || time == '') {
+        return ''
+      }
+      var t = new Date(time)
+      var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+      }
+      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
+        switch (a) {
+          case 'yyyy':
+            return tf(t.getFullYear())
+            break
+          case 'MM':
+            return tf(t.getMonth() + 1)
+            break
+          case 'mm':
+            return tf(t.getMinutes())
+            break
+          case 'dd':
+            return tf(t.getDate())
+            break
+          case 'HH':
+            return tf(t.getHours())
+            break
+          case 'ss':
+            return tf(t.getSeconds())
+            break
+        }
+      })
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {})
+  }
+}
+</script>

back/src/views/modules/sys/log-operation.vue

@@ -1,40 +1,164 @@
 <template>
   <el-card shadow="never" class="aui-card--fill">
     <div class="mod-sys__log-operation">
-      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+      <el-form
+        :inline="true"
+        :model="dataForm"
+        @keyup.enter.native="getDataList()"
+      >
         <el-form-item>
-          <el-select v-model="dataForm.status" :placeholder="$t('logOperation.status')" clearable>
-            <el-option :label="$t('logOperation.status0')" :value="0"></el-option>
-            <el-option :label="$t('logOperation.status1')" :value="1"></el-option>
+          <el-select
+            v-model="dataForm.status"
+            :placeholder="$t('logOperation.status')"
+            clearable
+          >
+            <el-option
+              :label="$t('logOperation.status0')"
+              :value="0"
+            ></el-option>
+            <el-option
+              :label="$t('logOperation.status1')"
+              :value="1"
+            ></el-option>
           </el-select>
         </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.creatorName"
+            placeholder="请输入操作人"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-date-picker
+            v-model="value1"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="dataForm.operation"
+            placeholder="请输入操作名称"
+          ></el-input>
+        </el-form-item>
         <el-form-item>
           <el-button @click="getDataList()">{{ $t('query') }}</el-button>
         </el-form-item>
         <el-form-item>
-          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
+          <el-button @click="resetFunction()"> 重置 </el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{
+            $t('export')
+          }}</el-button>
         </el-form-item>
       </el-form>
-      <el-table v-loading="dataListLoading" :data="dataList" border @sort-change="dataListSortChangeHandle" style="width: 100%;">
-        <el-table-column prop="creatorName" :label="$t('logOperation.creatorName')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="operation" :label="$t('logOperation.operation')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="requestUri" :label="$t('logOperation.requestUri')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="requestMethod" :label="$t('logOperation.requestMethod')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="requestParams" :label="$t('logOperation.requestParams')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="requestTime" :label="$t('logOperation.requestTime')" sortable="custom" header-align="center" align="center">
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @sort-change="dataListSortChangeHandle"
+        style="width: 100%"
+        :row-class-name="rowClassName"
+      >
+        <el-table-column
+          label="序号"
+          align="center"
+          prop="xh"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="operation"
+          label="操作名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="creatorName"
+          label="操作人"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="createDate"
+          label="操作时间"
+          sortable="custom"
+          header-align="center"
+          align="center"
+          width="180"
+        ></el-table-column>
+        <el-table-column
+          prop="ip"
+          label="客户端IP"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestUri"
+          label="请求地址"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestMethod"
+          :label="$t('logOperation.requestMethod')"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          prop="requestParams"
+          :label="$t('logOperation.requestParams')"
+          header-align="center"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="resultData"
+          label="返回结果"
+          header-align="center"
+          width="150"
+          align="center"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          prop="requestTime"
+          :label="$t('logOperation.requestTime')"
+          sortable="custom"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
             {{ `${scope.row.requestTime}ms` }}
           </template>
         </el-table-column>
-        <el-table-column prop="status" :label="$t('logOperation.status')" sortable="custom" header-align="center" align="center">
+        <el-table-column
+          prop="status"
+          :label="$t('logOperation.status')"
+          sortable="custom"
+          header-align="center"
+          align="center"
+        >
           <template slot-scope="scope">
-            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('logOperation.status0') }}</el-tag>
-            <el-tag v-else size="small" type="success">{{ $t('logOperation.status1') }}</el-tag>
+            <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{
+              $t('logOperation.status0')
+            }}</el-tag>
+            <el-tag v-else size="small" type="success">{{
+              $t('logOperation.status1')
+            }}</el-tag>
           </template>
         </el-table-column>
-        <el-table-column prop="ip" :label="$t('logOperation.ip')" header-align="center" align="center"></el-table-column>
-        <el-table-column prop="userAgent" :label="$t('logOperation.userAgent')" header-align="center" align="center" width="150" :show-overflow-tooltip="true"></el-table-column>
-        <el-table-column prop="createDate" :label="$t('logOperation.createDate')" sortable="custom" header-align="center" align="center" width="180"></el-table-column>
+        <!-- <el-table-column
+          prop="userAgent"
+          :label="$t('logOperation.userAgent')"
+          header-align="center"
+          align="center"
+          width="150"
+          :show-overflow-tooltip="true"
+        ></el-table-column> -->
       </el-table>
       <el-pagination
         :current-page="page"
@@ -43,7 +167,8 @@
         :total="total"
         layout="total, sizes, prev, pager, next, jumper"
         @size-change="pageSizeChangeHandle"
-        @current-change="pageCurrentChangeHandle">
+        @current-change="pageCurrentChangeHandle"
+      >
       </el-pagination>
     </div>
   </el-card>
@@ -61,8 +186,76 @@ export default {
         exportURL: '/sys/log/operation/export'
       },
       dataForm: {
-        status: ''
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: ''
+      },
+      value1: ''
+    }
+  },
+  watch: {
+    value1 (val) {
+      val[0] = this.handleTime(val[0], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.startDate = val[0]
+      val[1] = this.handleTime(val[1], 'yyyy-MM-dd HH:mm:ss')
+      this.dataForm.endDate = val[1]
+    }
+  },
+  methods: {
+    // 重置按钮
+    resetFunction () {
+      const params = {
+        status: '',
+        creatorName: '',
+        startDate: '',
+        endDate: '',
+        operation: '',
+        operationType: 'all'
       }
+      this.value1 = '' // 格式化日期
+      this.operationType = '' // 操作类型转化
+      this.page = 1
+      this.limit = 10
+      this.dataForm = params
+      this.getDataList() // 重置完调用查询方法
+    },
+    // 序号
+    rowClassName ({ row, rowIndex }) {
+      row.xh = rowIndex + 1 + (this.page - 1) * this.limit
+    },
+    // 定义格式化函数：
+    handleTime (time, format) {
+      if (time == null || time == undefined || time == '') {
+        return ''
+      }
+      var t = new Date(time)
+      var tf = function (i) {
+        return (i < 10 ? '0' : '') + i
+      }
+      return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function (a) {
+        switch (a) {
+          case 'yyyy':
+            return tf(t.getFullYear())
+            break
+          case 'MM':
+            return tf(t.getMonth() + 1)
+            break
+          case 'mm':
+            return tf(t.getMinutes())
+            break
+          case 'dd':
+            return tf(t.getDate())
+            break
+          case 'HH':
+            return tf(t.getHours())
+            break
+          case 'ss':
+            return tf(t.getSeconds())
+            break
+        }
+      })
     }
   }
 }

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

@@ -144,11 +144,11 @@
             dataFrom.value.content[1].childrenContent.push(itemContent)
           })
         }
-        // let obj = {
-        //   attrType: '访问地址',
-        //   attrValue: props.dataList.link || '------',
-        // }
-        // dataFrom.value.content[0].childrenContent.push(obj)
+        let obj = {
+          attrType: '访问地址',
+          attrValue: props.dataList.link || '------',
+        }
+        dataFrom.value.content[0].childrenContent.push(obj)
       }
     }
   )

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

@@ -8,7 +8,12 @@
 <template>
   <div class="application-navigation" v-if="navList.length > 0">
     <template v-for="nav in navList" :key="nav.key">
-      <div class="nav" :class="{ select: nav.key == select }" v-if="nav.show" @click="selectNav(nav.key)">
+      <div
+        class="nav"
+        :class="{ select: nav.key == select }"
+        v-if="nav.show"
+        @click="selectNav(nav.key)"
+      >
         {{ nav.name }}
         <span class="line"></span>
       </div>
@@ -16,179 +21,179 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, watch } from 'vue'
-import mybus from '@/myplugins/mybus'
-import { useRouter } from 'vue-router'
-import { queryPartAppByKeyId } from '@/api/home'
-// 获取当前路由地址
-const router = useRouter()
-const keyId = router.currentRoute.value.query.id
-const navList = ref([
-  {
-    name: '应用展示',
-    key: 'application-presentation',
-  },
-  {
-    name: '功能介绍',
-    key: 'function-introduction',
-  },
-  {
-    name: '使用能力',
-    key: 'ability-to-use',
-  },
-  {
-    name: '部署与安全',
-    key: 'deployment-and-security',
-  },
-  {
-    name: '归属部门与服务商',
-    key: 'department-and-service-provider',
-  },
-  {
-    name: '常见问题',
-    key: 'common-problem',
-  },
-])
-const props = defineProps({
-  selectNow: { type: String, default: '' },
-  dataList: { type: Object, default: null },
-  associatedComponents: { type: Array, default: null },
-})
-const select = ref('application-associated-ability')
-const list = ref([])
-// 根据能力id查询是否存在关联应用
-if (keyId) {
-  let params = {
-    keyId: keyId,
-    type: '组件服务',
-  }
-  queryPartAppByKeyId(params).then((res) => {
-    console.log('ressssssss', res)
-    if (res.data.data.length != 0) {
-      // 存在关联应用时在导航栏加入关联应用
-      navList.value.unshift({
-        name: '关联组件',
-        key: 'application-associated-ability',
-        show: true,
-      })
-      list.value.unshift('关联组件')
-    }
+  import { ref, defineProps, watch } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import { useRouter } from 'vue-router'
+  import { queryPartAppByKeyId } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
+  const navList = ref([
+    {
+      name: '应用展示',
+      key: 'application-presentation',
+    },
+    {
+      name: '功能介绍',
+      key: 'function-introduction',
+    },
+    {
+      name: '使用能力',
+      key: 'ability-to-use',
+    },
+    {
+      name: '部署与安全',
+      key: 'deployment-and-security',
+    },
+    {
+      name: '归属部门与服务商',
+      key: 'department-and-service-provider',
+    },
+    {
+      name: '常见问题',
+      key: 'common-problem',
+    },
+  ])
+  const props = defineProps({
+    selectNow: { type: String, default: '' },
+    dataList: { type: Object, default: null },
+    associatedComponents: { type: Array, default: null },
   })
-}
-const selectNav = (key) => {
-  select.value = key
-  mybus.emit('flyToView', select.value)
-}
-if (props.dataList.infoList) {
-  list.value = []
-  props.dataList.infoList.map((item) => {
-    if (
-      item.attrType === '功能介绍' ||
-      item.attrType === '常见问题' ||
-      item.attrType === '使用能力' ||
-      item.attrType === '关联组件'
-    ) {
-      list.value.push(item.attrType)
-    } else if (item.attrType === '应用展示视频') {
-      list.value.push('应用展示')
+  const select = ref('application-associated-ability')
+  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    let params = {
+      keyId: keyId,
+      type: '组件服务',
     }
-  })
-  list.value.unshift('关联组件')
-  list.value.push('部署与安全')
-  list.value.push('归属部门与服务商')
-  navList.value.forEach((item) => {
-    console.log(item)
-    if (list.value.indexOf(item.name) > -1) {
-      item.show = true
-    }
-  })
-  if (list.value.length > 0) {
-    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-      select.value = navList.value.filter(
-        (item) => (item.name === '关联组件') | (item.name === list.value[0])
-      )[0].key
-    }
-  }
-  console.log('11111111111111111111111111', list.value, navList.value)
-}
-watch(
-  () => props.selectNow,
-  (newValue) => {
-    select.value = newValue
-  }
-)
-watch(
-  () => props.dataList,
-  (val) => {
-    if (val) {
-      list.value = []
-      val.infoList.map((item) => {
-        if (
-          item.attrType === '功能介绍' ||
-          item.attrType === '常见问题' ||
-          item.attrType === '使用能力' ||
-          item.attrType === '关联组件'
-        ) {
-          list.value.push(item.attrType)
-        } else if (item.attrType === '应用展示视频') {
-          list.value.push('应用展示')
-        }
-      })
-      list.value.unshift('关联组件')
-      list.value.push('部署与安全')
-      list.value.push('归属部门与服务商')
-      navList.value.forEach((item) => {
-        console.log(item)
-        if (list.value.indexOf(item.name) > -1) {
-          item.show = true
-        }
-      })
-      if (list.value.length > 0) {
-        if (navList.value.filter((item) => item.name === list.value[0])[0]) {
-          select.value = navList.value.filter(
-            (item) =>
-              (item.name === '关联组件') | (item.name === list.value[0])
-          )[0].key
-        }
+    queryPartAppByKeyId(params).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length != 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联组件',
+          key: 'application-associated-ability',
+          show: true,
+        })
+        list.value.unshift('关联组件')
       }
-      console.log('11111111111111111111111111', list.value, navList.value)
-    }
+    })
   }
-)
+  const selectNav = (key) => {
+    select.value = key
+    mybus.emit('flyToView', select.value)
+  }
+  if (props.dataList.infoList) {
+    list.value = []
+    props.dataList.infoList.map((item) => {
+      if (
+        item.attrType === '功能介绍' ||
+        item.attrType === '常见问题' ||
+        item.attrType === '使用能力' ||
+        item.attrType === '关联组件'
+      ) {
+        list.value.push(item.attrType)
+      } else if (item.attrType === '应用展示视频') {
+        list.value.push('应用展示')
+      }
+    })
+    list.value.unshift('关联组件')
+    list.value.push('部署与安全')
+    list.value.push('归属部门与服务商')
+    navList.value.forEach((item) => {
+      console.log(item)
+      if (list.value.indexOf(item.name) > -1) {
+        item.show = true
+      }
+    })
+    if (list.value.length > 0) {
+      if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+        select.value = navList.value.filter(
+          (item) => (item.name === '关联组件') | (item.name === list.value[0])
+        )[0].key
+      }
+    }
+    console.log('11111111111111111111111111', list.value, navList.value)
+  }
+  watch(
+    () => props.selectNow,
+    (newValue) => {
+      select.value = newValue
+    }
+  )
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        list.value = []
+        val.infoList.map((item) => {
+          if (
+            item.attrType === '功能介绍' ||
+            item.attrType === '常见问题' ||
+            item.attrType === '使用能力' ||
+            item.attrType === '关联组件'
+          ) {
+            list.value.push(item.attrType)
+          } else if (item.attrType === '应用展示视频') {
+            list.value.push('应用展示')
+          }
+        })
+        list.value.unshift('关联组件')
+        list.value.push('部署与安全')
+        list.value.push('归属部门与服务商')
+        navList.value.forEach((item) => {
+          console.log(item)
+          if (list.value.indexOf(item.name) > -1) {
+            item.show = true
+          }
+        })
+        if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
+            select.value = navList.value.filter(
+              (item) =>
+                (item.name === '关联组件') | (item.name === list.value[0])
+            )[0].key
+          }
+        }
+        console.log('11111111111111111111111111', list.value, navList.value)
+      }
+    }
+  )
 </script>
 <style lang="less" scoped>
-.application-navigation {
-  width: 19.12rem;
-  height: 0.84rem;
-  line-height: 0.8rem;
-  display: flex;
-  justify-content: space-around;
-  font-size: 0.24rem;
-  color: #666;
-  background: #fff;
-  padding: 0 3rem;
-  box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
-  position: relative;
-
-  .nav {
-    cursor: pointer;
+  .application-navigation {
+    width: 19.12rem;
+    height: 0.84rem;
+    line-height: 0.8rem;
     display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    justify-content: space-around;
+    font-size: 0.24rem;
+    color: #666;
+    background: #fff;
+    padding: 0 3rem;
+    box-shadow: 0rem 0.05rem 0.1rem #f2f3fb;
+    position: relative;
 
-    .line {
-      width: 0.4rem;
-      height: 0.04rem;
+    .nav {
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+
+      .line {
+        width: 0.4rem;
+        height: 0.04rem;
+      }
+    }
+
+    .select {
+      color: #526aff;
+
+      .line {
+        background: #526aff;
+      }
     }
   }
-
-  .select {
-    color: #526aff;
-
-    .line {
-      background: #526aff;
-    }
-  }
-}
 </style>

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

@@ -2,10 +2,17 @@
 <template>
   <div class="application-deployment-and-security">
     <div class="title">
-      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
+      <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
+        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">
@@ -24,206 +31,208 @@
 </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: '',
-  }
-  dataFrom.value.content[0].childrenContent[1] = deptContacts
-  let deptPhone = {
-    attrType: '部门联系电话',
-    attrValue: '',
-  }
-  dataFrom.value.content[0].childrenContent[2] = deptPhone
-  props.dataList.infoList.map((item) => {
-    if (
-      item.attrType === '服务商' ||
-      item.attrType === '服务商联系人' ||
-      item.attrType === '服务商联系电话' ||
-      item.attrType.indexOf('服务商名') != -1
-    ) {
+  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: '',
+    }
+    dataFrom.value.content[0].childrenContent[1] = deptContacts
+    let deptPhone = {
+      attrType: '部门联系电话',
+      attrValue: '',
+    }
+    dataFrom.value.content[0].childrenContent[2] = deptPhone
+    props.dataList.infoList.map((item) => {
       if (
         item.attrType === '服务商' ||
+        item.attrType === '服务商联系人' ||
+        item.attrType === '服务商联系电话' ||
         item.attrType.indexOf('服务商名') != -1
       ) {
-        dataFrom.value.content[1].childrenContent[0] = item
-        if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
-          dataFrom.value.content[1].childrenContent[0].attrValue = '------'
-        }
-      } else if (item.attrType === '服务商联系人') {
-        dataFrom.value.content[1].childrenContent[1] = item
-        if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
-          dataFrom.value.content[1].childrenContent[1].attrValue = '------'
-        }
-      } else if (item.attrType === '服务商联系电话') {
-        dataFrom.value.content[1].childrenContent[2] = item
-        if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
-          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(
-  () => 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 === '服务商联系电话' ||
           item.attrType.indexOf('服务商名') != -1
         ) {
+          dataFrom.value.content[1].childrenContent[0] = item
+          if (dataFrom.value.content[1].childrenContent[0].attrValue == '') {
+            dataFrom.value.content[1].childrenContent[0].attrValue = '------'
+          }
+        } else if (item.attrType === '服务商联系人') {
+          dataFrom.value.content[1].childrenContent[1] = item
+          if (dataFrom.value.content[1].childrenContent[1].attrValue == '') {
+            dataFrom.value.content[1].childrenContent[1].attrValue = '------'
+          }
+        } else if (item.attrType === '服务商联系电话') {
+          dataFrom.value.content[1].childrenContent[2] = item
+          if (dataFrom.value.content[1].childrenContent[2].attrValue == '') {
+            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(
+    () => 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 === '服务商联系电话' ||
             item.attrType.indexOf('服务商名') != -1
           ) {
-            dataFrom.value.content[1].childrenContent.push(item)
             if (
-              dataFrom.value.content[1].childrenContent[0].attrValue == ''
+              item.attrType === '服务商' ||
+              item.attrType.indexOf('服务商名') != -1
             ) {
-              dataFrom.value.content[1].childrenContent[0].attrValue =
-                '------'
-            }
-          } else if (item.attrType === '服务商联系人') {
-            dataFrom.value.content[1].childrenContent[1] = item
-            if (
-              dataFrom.value.content[1].childrenContent[1].attrValue == ''
-            ) {
-              dataFrom.value.content[1].childrenContent[1].attrValue =
-                '------'
-            }
-          } else if (item.attrType === '服务商联系电话') {
-            dataFrom.value.content[1].childrenContent[2] = item
-            if (
-              dataFrom.value.content[1].childrenContent[2].attrValue == ''
-            ) {
-              dataFrom.value.content[1].childrenContent[2].attrValue =
-                '------'
+              dataFrom.value.content[1].childrenContent.push(item)
+              if (
+                dataFrom.value.content[1].childrenContent[0].attrValue == ''
+              ) {
+                dataFrom.value.content[1].childrenContent[0].attrValue =
+                  '------'
+              }
+            } else if (item.attrType === '服务商联系人') {
+              dataFrom.value.content[1].childrenContent[1] = item
+              if (
+                dataFrom.value.content[1].childrenContent[1].attrValue == ''
+              ) {
+                dataFrom.value.content[1].childrenContent[1].attrValue =
+                  '------'
+              }
+            } else if (item.attrType === '服务商联系电话') {
+              dataFrom.value.content[1].childrenContent[2] = item
+              if (
+                dataFrom.value.content[1].childrenContent[2].attrValue == ''
+              ) {
+                dataFrom.value.content[1].childrenContent[2].attrValue =
+                  '------'
+              }
             }
+          } else if (item.attrType === '部门联系人') {
+            deptContacts.attrValue = item.attrValue || '------'
+          } else if (item.attrType === '部门联系人电话') {
+            deptPhone.attrValue = item.attrValue || '------'
           }
-        } else if (item.attrType === '部门联系人') {
-          deptContacts.attrValue = item.attrValue || '------'
-        } else if (item.attrType === '部门联系人电话') {
-          deptPhone.attrValue = item.attrValue || '------'
-        }
-      })
-      console.log('obj', dataFrom.value)
+        })
+        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 {
+  .application-deployment-and-security {
+    padding: 0.8rem 0;
     display: flex;
-    width: 13rem;
-    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
 
-    .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;
+    .title {
+      margin-bottom: 0.3rem;
+    }
+
+    .content {
       display: flex;
-      flex-direction: column;
-      justify-content: center;
+      width: 13rem;
+      justify-content: space-between;
 
-      .card-title {
-        font-size: 0.26rem;
-        color: #212956;
-        margin-bottom: 0.2rem;
-        line-height: 0.26rem;
-      }
+      .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-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;
-          }
+        .card-title {
+          font-size: 0.26rem;
+          color: #212956;
+          margin-bottom: 0.2rem;
+          line-height: 0.26rem;
         }
 
-        div:first-child {
-          display: block;
+        .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>