From 4a52c2cf78fcbb5c122a23a3c0711e4f0064ca4a Mon Sep 17 00:00:00 2001
From: "851673013@qq.com" <851673013@qq.com>
Date: Mon, 18 Jul 2022 10:47:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A1=E6=89=B9=E5=92=8C=E5=89=8D=E5=8F=B0?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../myAgent/demo/Application-resources.vue    |  22 --
 .../myAgent/demo/ResourcesAndServices.vue     |  24 +-
 .../myAgent/demo/ability-resource-shelf.vue   | 137 ++++----
 .../views/detailsAll/ApplicationDetails.vue   | 327 ++++++++++--------
 .../Application/ApplicationAbilityTrial.vue   | 184 ++++++++++
 .../ApplicationDeploymentAndSecurity.vue      |  38 +-
 .../Application/ApplicationNavigation.vue     |   4 +
 7 files changed, 474 insertions(+), 262 deletions(-)
 delete mode 100644 back/src/views/modules/myAgent/demo/Application-resources.vue
 create mode 100644 front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue

diff --git a/back/src/views/modules/myAgent/demo/Application-resources.vue b/back/src/views/modules/myAgent/demo/Application-resources.vue
deleted file mode 100644
index bf310a87..00000000
--- a/back/src/views/modules/myAgent/demo/Application-resources.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div class="wrapper"></div>
-</template>
-
-<script>
-export default {
-  components: {},
-  props: {},
-  data () {
-    return {}
-  },
-  watch: {},
-  computed: {},
-  methods: {},
-  created () {},
-  mounted () {}
-}
-</script>
-<style lang="scss" scoped>
-.wrapper {
-}
-</style>
diff --git a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
index 2b46e2d3..5b37af66 100644
--- a/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
+++ b/back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
@@ -168,20 +168,6 @@ export default {
           this.dataView = val.filter(
             (item) => item.name === this.dataForm.type + '一'
           )[0]
-          console.log(this.dataView)
-          console.log(this.dataForm)
-          // 应用描述
-          // this.dataView.children[0].children[0].children[4].note1 =
-          //   this.dataForm.description
-          // 应用名称
-          // this.dataView.children[0].children[0].children[0].note1 =
-          //   this.dataForm.name
-          // 共享条件
-          this.dataView.children[2].children[1].children[0].note1 =
-            this.dataForm.shareCondition
-          // 共享类型
-          this.dataView.children[2].children[1].children[1].note1 =
-            this.dataForm.shareType
           this.dataForm.infoList.map((item, index) => {
             this.dataView.children.map((itemView, indexView) => {
               // console.log('itemView', itemView)
@@ -236,12 +222,16 @@ export default {
                 })
               })
             })
+
             if (item.attrType === '功能介绍') {
               this.dataForm.infoList[index].attrValue = JSON.parse(
                 item.attrValue
               )
             }
           })
+          console.log(this.dataView)
+          console.log(this.dataForm)
+          debugger
         } else {
           const componentType = this.dataForm.infoList.filter(
             (item) => item.attrType === '组件类型'
@@ -318,7 +308,11 @@ export default {
                 })
               })
             })
-            if (item.attrType === '算法优势' || item.attrType === '应用场景') {
+            if (
+              item.attrType === '算法优势' ||
+              item.attrType === '应用场景' ||
+              item.attrType === '功能介绍'
+            ) {
               this.dataForm.infoList[index].attrValue = JSON.parse(
                 item.attrValue
               )
diff --git a/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue b/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
index a6e1e698..a1ee69a8 100644
--- a/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
+++ b/back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
@@ -7,9 +7,6 @@
         @keyup.enter.native="dataFormSubmitHandle()"
         :label-width="$i18n.locale === 'en-US' ? '120px' : 'auto'"
       >
-        <div v-if="shifoushizujian">
-          <Applicationresources></Applicationresources>
-        </div>
         <div v-if="flagShow">
           <ResourcesAndServices
             :dataForm="dataForm"
@@ -39,13 +36,21 @@
     <div class="agreeOr">
       <h3>审批</h3>
       <div>
-        <el-radio-group v-model="agreeOrList" style="width:230px;">
+        <el-radio-group v-model="agreeOrList" style="width: 230px">
           <el-radio-button label="同意" class="blueAll">同意</el-radio-button>
           <el-radio-button label="退回" class="redAll">退回</el-radio-button>
         </el-radio-group>
-        <el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
-        <el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
-         <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
+        <el-input
+          v-if="agreeOrList === '同意'"
+          v-model="inputAgree"
+          placeholder="请输入同意意见"
+        ></el-input>
+        <el-input
+          v-if="agreeOrList === '退回'"
+          v-model="inputNo"
+          placeholder="请输入退回意见"
+        ></el-input>
+        <el-button class="inputBule" @click="agreeOrNot">提交</el-button>
       </div>
     </div>
   </div>
@@ -53,7 +58,6 @@
 
 <script>
 import processModule from '@/mixins/process-module'
-import Applicationresources from './Application-resources.vue'
 import ResourcesAndServices from './ResourcesAndServices.vue'
 import debounce from 'lodash/debounce'
 import qs from 'qs'
@@ -62,7 +66,6 @@ export default {
   // 注入公共方法
   // mixins: [processModule],
   components: {
-    Applicationresources,
     ResourcesAndServices
   },
   props: {
@@ -146,64 +149,72 @@ export default {
         // }
       })
     },
-    agreeOrNot: debounce(function () {
-      if (this.agreeOrList === '同意') {
-        console.log('this.dataForm.taskId', this.taskId)
-        const params = qs.stringify({
-          taskId: this.taskId,
-          comment: this.inputAgree
-        })
-        console.log(params)
-        this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
-          if (res.code !== 0) {
-            this.$message.error(res.msg)
-            if (this.callbacks.taskHandleErrorCallback) {
-              this.callbacks.taskHandleErrorCallback(res)
-            }
-            return
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              if (this.callbacks.taskHandleSuccessCallback) {
-                this.callbacks.taskHandleSuccessCallback(res)
-              }
-            }
+    agreeOrNot: debounce(
+      function () {
+        if (this.agreeOrList === '同意') {
+          console.log('this.dataForm.taskId', this.taskId)
+          const params = qs.stringify({
+            taskId: this.taskId,
+            comment: this.inputAgree
           })
-        }).catch(() => {})
-      } else if (this.agreeOrList === '退回') {
-        console.log('this.dataForm.taskId', this.taskId)
-        const params = qs.stringify({
-          taskId: this.taskId,
-          comment: this.inputNo
-        })
-        this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
-          if (res.code !== 0) {
-            this.$message.error(res.msg)
-            if (this.callbacks.taskHandleErrorCallback) {
-              this.callbacks.taskHandleErrorCallback(res)
-            }
-            return
-          }
-          this.$message({
-            message: this.$t('prompt.success'),
-            type: 'success',
-            duration: 500,
-            onClose: () => {
-              this.visible = false
-              if (this.callbacks.taskHandleSuccessCallback) {
-                this.callbacks.taskHandleSuccessCallback(res)
+          console.log(params)
+          this.$http
+            .post('/act/task/complete?' + params)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.$message.error(res.msg)
+                if (this.callbacks.taskHandleErrorCallback) {
+                  this.callbacks.taskHandleErrorCallback(res)
+                }
+                return
               }
-            }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  if (this.callbacks.taskHandleSuccessCallback) {
+                    this.callbacks.taskHandleSuccessCallback(res)
+                  }
+                }
+              })
+            })
+            .catch(() => {})
+        } else if (this.agreeOrList === '退回') {
+          console.log('this.dataForm.taskId', this.taskId)
+          const params = qs.stringify({
+            taskId: this.taskId,
+            comment: this.inputNo
           })
-        })
-      }
-    }, 1000, { leading: true, trailing: false })
+          this.$http
+            .post('/act/task/backToFirst?', params)
+            .then(({ data: res }) => {
+              if (res.code !== 0) {
+                this.$message.error(res.msg)
+                if (this.callbacks.taskHandleErrorCallback) {
+                  this.callbacks.taskHandleErrorCallback(res)
+                }
+                return
+              }
+              this.$message({
+                message: this.$t('prompt.success'),
+                type: 'success',
+                duration: 500,
+                onClose: () => {
+                  this.visible = false
+                  if (this.callbacks.taskHandleSuccessCallback) {
+                    this.callbacks.taskHandleSuccessCallback(res)
+                  }
+                }
+              })
+            })
+        }
+      },
+      1000,
+      { leading: true, trailing: false }
+    )
   }
-
 }
 </script>
 <style scoped lang="scss">
diff --git a/front/src/views/detailsAll/ApplicationDetails.vue b/front/src/views/detailsAll/ApplicationDetails.vue
index 7eee09d3..4e01e14b 100644
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@@ -8,172 +8,211 @@
 <template>
   <div class="application-details" :class="{ fixed2: scrollTop >= 600 }">
     <!-- 头部基本信息 -->
-    <application-top-details :dataList="dataList.data"></application-top-details>
+    <application-top-details
+      :dataList="dataList.data"
+    ></application-top-details>
     <!-- 导航 -->
-    <application-navigation :dataList="dataList.data" :associatedComponents="associatedComponents"
-      :class="{ fixed: scrollTop >= 600 }" :selectNow="selectNow"></application-navigation>
+    <application-navigation
+      :dataList="dataList.data"
+      :associatedComponents="associatedComponents"
+      :class="{ fixed: scrollTop >= 600 }"
+      :selectNow="selectNow"
+    ></application-navigation>
     <!-- 关联能力 -->
-    <application-associated-ability v-if="!loading" :associatedComponents="associatedComponents"
-      id="application-associated-ability" class="scrollBox"></application-associated-ability>
+    <application-associated-ability
+      v-if="!loading"
+      :associatedComponents="associatedComponents"
+      id="application-associated-ability"
+      class="scrollBox"
+    ></application-associated-ability>
     <!-- 应用展示  视频 -->
-    <application-presentation :dataList="dataList.data" id="application-presentation" class="scrollBox">
-    </application-presentation>
+    <application-presentation
+      :dataList="dataList.data"
+      id="application-presentation"
+      class="scrollBox"
+    ></application-presentation>
     <!-- 关联组件 -->
-    <application-associated-components :dataList="dataList.data" id="application-associated-components"
-      class="scrollBox" v-if="false"></application-associated-components>
+    <application-associated-components
+      :dataList="dataList.data"
+      id="application-associated-components"
+      class="scrollBox"
+      v-if="false"
+    ></application-associated-components>
 
     <!-- 功能介绍-->
-    <application-function-intorduction :dataList="dataList.data" id="function-introduction" class="scrollBox">
-    </application-function-intorduction>
+    <application-function-intorduction
+      :dataList="dataList.data"
+      id="function-introduction"
+      class="scrollBox"
+    ></application-function-intorduction>
+    <!--应用详情-->
+    <application-ability-trial
+      :dataList="dataList.data"
+      id="application-ability-trial"
+      class="scrollBox"
+    ></application-ability-trial>
     <!-- 使用能力 -->
-    <application-ability-toise :dataList="dataList.data" id="ability-to-use" class="scrollBox">
-    </application-ability-toise>
+    <application-ability-toise
+      :dataList="dataList.data"
+      id="ability-to-use"
+      class="scrollBox"
+    ></application-ability-toise>
     <!-- 部署与安全-->
-    <application-deployment-and-security :dataList="dataList.data" id="deployment-and-security" class="scrollBox">
-    </application-deployment-and-security>
+    <application-deployment-and-security
+      :dataList="dataList.data"
+      id="deployment-and-security"
+      class="scrollBox"
+    ></application-deployment-and-security>
     <!-- 归属部门与服务商-->
-    <application-owning-department-and-service-provider :dataList="dataList.data" id="department-and-service-provider"
-      class="scrollBox"></application-owning-department-and-service-provider>
+    <application-owning-department-and-service-provider
+      :dataList="dataList.data"
+      id="department-and-service-provider"
+      class="scrollBox"
+    ></application-owning-department-and-service-provider>
     <!-- 常见问题-->
-    <application-common-problem :dataList="dataList.data" id="common-problem" class="scrollBox">
-    </application-common-problem>
+    <application-common-problem
+      :dataList="dataList.data"
+      id="common-problem"
+      class="scrollBox"
+    ></application-common-problem>
   </div>
 </template>
 <script setup>
-import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
-import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
-import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.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'
-import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
-import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  updateVisits,
-  selectOne,
-  queryPartAppByKeyId,
-  browsingInsert,
-} from '@/api/home'
-import mybus from '@/myplugins/mybus'
-const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
-let loading = ref(true)
-const router = useRouter()
-const scrollTop = ref(0)
-const domArr = ref([])
-const selectNow = ref('')
-const dataList = reactive({ data: {} })
-const id = router.currentRoute.value.query.id
-const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-document.documentElement.style.transition = 'all 0.3s ease'
-document.documentElement.scrollTop = 0
-document.body.style.transition = 'all 0.3s ease'
-document.body.scrollTop = 0
-mybus.on('flyToView', (id) => {
-  let top = document.querySelector('#' + id).offsetTop - 50
-  // console.log(top, document.querySelector('#' + id).offsetTop-50)
-  document.documentElement.scrollTop = top
-  document.body.scrollTop = top
-})
-onMounted(() => {
-  // console.clear()
-  window.addEventListener('scroll', () => {
-    domArr.value = document.querySelectorAll('.scrollBox')
-    scrollTop.value =
-      document.documentElement.scrollTop || document.body.scrollTop
-    for (let i = 0; i < domArr.value.length; i++) {
-      if (i === 0) {
-        if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else if (i == domArr.value.length - 1) {
-        if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
-          selectNow.value = domArr.value[i].id
-        }
-      } else {
-        if (
-          scrollTop.value >= domArr.value[i].offsetTop - 50 &&
-          scrollTop.value <= domArr.value[i + 1].offsetTop - 50
-        ) {
-          selectNow.value = domArr.value[i].id
-        }
-      }
-    }
+  import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
+  import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
+  import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.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'
+  import ApplicationAbilityTrial from '@/views/detailsAll/components/Application/ApplicationAbilityTrial.vue'
+  import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
+  import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
+  import { useRouter } from 'vue-router'
+  import {
+    updateVisits,
+    selectOne,
+    queryPartAppByKeyId,
+    browsingInsert,
+  } from '@/api/home'
+  import mybus from '@/myplugins/mybus'
+  const associatedComponents = ref([{ type: '组件服务', dataList: [] }])
+  let loading = ref(true)
+  const router = useRouter()
+  const scrollTop = ref(0)
+  const domArr = ref([])
+  const selectNow = ref('')
+  const dataList = reactive({ data: {} })
+  const id = router.currentRoute.value.query.id
+  const obj = JSON.parse(window.sessionStorage.getItem('preview'))
+  document.documentElement.style.transition = 'all 0.3s ease'
+  document.documentElement.scrollTop = 0
+  document.body.style.transition = 'all 0.3s ease'
+  document.body.scrollTop = 0
+  mybus.on('flyToView', (id) => {
+    let top = document.querySelector('#' + id).offsetTop - 50
+    // console.log(top, document.querySelector('#' + id).offsetTop-50)
+    document.documentElement.scrollTop = top
+    document.body.scrollTop = top
+  })
+  onMounted(() => {
+    // console.clear()
+    window.addEventListener('scroll', () => {
+      domArr.value = document.querySelectorAll('.scrollBox')
+      scrollTop.value =
+        document.documentElement.scrollTop || document.body.scrollTop
+      for (let i = 0; i < domArr.value.length; i++) {
+        if (i === 0) {
+          if (scrollTop.value <= domArr.value[i + 1].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else if (i == domArr.value.length - 1) {
+          if (scrollTop.value >= domArr.value[i].offsetTop - 50) {
+            selectNow.value = domArr.value[i].id
+          }
+        } else {
+          if (
+            scrollTop.value >= domArr.value[i].offsetTop - 50 &&
+            scrollTop.value <= domArr.value[i + 1].offsetTop - 50
+          ) {
+            selectNow.value = domArr.value[i].id
+          }
+        }
+      }
+    })
   })
-})
 
-const init = (id) => {
-  if (id) {
-    selectOne(id).then((res) => {
-      // console.clear()
-      dataList.data = res.data.data
-      const arrList = ref([])
-      arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
-      console.log(
-        '初始化详情页=========================>',
-        dataList.data,
-        arrList.value
-      )
-      if (arrList.value && arrList.value.indexOf(id) === -1) {
-        arrList.value.push(id)
-        updateVisits({
-          id: res.data.data.id,
-          visits: res.data.data.visits || '0',
+  const init = (id) => {
+    if (id) {
+      selectOne(id).then((res) => {
+        // console.clear()
+        dataList.data = res.data.data
+        const arrList = ref([])
+        arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
+        console.log(
+          '初始化详情页=========================>',
+          dataList.data,
+          arrList.value
+        )
+        if (arrList.value && arrList.value.indexOf(id) === -1) {
+          arrList.value.push(id)
+          updateVisits({
+            id: res.data.data.id,
+            visits: res.data.data.visits || '0',
+          }).then(() => {
+            window.sessionStorage.setItem(
+              'visits',
+              JSON.stringify(arrList.value)
+            )
+          })
+        }
+        // 浏览记录
+        browsingInsert({
+          resourceId: res.data.data.id,
         }).then(() => {
-          window.sessionStorage.setItem(
-            'visits',
-            JSON.stringify(arrList.value)
-          )
+          console.log('浏览记录+1')
         })
-      }
-      // 浏览记录
-      browsingInsert({
-        resourceId: res.data.data.id,
-      }).then(() => {
-        console.log('浏览记录+1')
       })
-    })
-    associatedComponents.value.map((item, index) => {
-      let queryPartAppByKeyIdParams = {
-        keyId: id,
-        type: item.type,
-      }
-      queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
-        associatedComponents.value[0].dataList = res.data.data
-        loading.value = false
+      associatedComponents.value.map((item, index) => {
+        let queryPartAppByKeyIdParams = {
+          keyId: id,
+          type: item.type,
+        }
+        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
+          associatedComponents.value[0].dataList = res.data.data
+          loading.value = false
+        })
       })
-    })
-  } else if (obj) {
-    dataList.data = obj
-    console.log('预览==============', obj)
+    } else if (obj) {
+      dataList.data = obj
+      console.log('预览==============', obj)
+    }
   }
-}
-const associatedComponentsFunction = () => {
-  if (
-    associatedComponents.value[0].dataList.length > 0 ||
-    associatedComponents.value[1].dataList.length > 0 ||
-    associatedComponents.value[2].dataList.length > 0
-  ) {
-    return associatedComponents.value
+  const associatedComponentsFunction = () => {
+    if (
+      associatedComponents.value[0].dataList.length > 0 ||
+      associatedComponents.value[1].dataList.length > 0 ||
+      associatedComponents.value[2].dataList.length > 0
+    ) {
+      return associatedComponents.value
+    }
   }
-}
-init(id)
-onBeforeUnmount(() => {
-  mybus.off('flyToView')
-})
+  init(id)
+  onBeforeUnmount(() => {
+    mybus.off('flyToView')
+  })
 </script>
 <style lang="less" scoped>
-.fixed {
-  position: fixed;
-  z-index: 2000;
-  top: 0;
-  left: 0;
-}
+  .fixed {
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+  }
 
-.fixed2>div:nth-of-type(3) {
-  margin-top: 0.84rem;
-}
+  .fixed2 > div:nth-of-type(3) {
+    margin-top: 0.84rem;
+  }
 </style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue b/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
new file mode 100644
index 00000000..866bccd4
--- /dev/null
+++ b/front/src/views/detailsAll/components/Application/ApplicationAbilityTrial.vue
@@ -0,0 +1,184 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-09 09:29:29
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-13 15:21:26
+ * @Description: 应用详情
+-->
+<template>
+  <div class="algorithm-on-trial" v-if="true">
+    <detals-title title="应用详情" type="PROBATION"></detals-title>
+    <div class="main">
+      <div class="main-left">
+        <p>{{ dataFrom.linkName }}</p>
+        <p style="cursor: pointer" @click="clickLink(dataFrom.link)">
+          {{ dataFrom.link }}
+        </p>
+      </div>
+      <div class="main-center">
+        <p>{{ dataFrom.numberName }}</p>
+        <p>{{ dataFrom.number }}</p>
+        <div @click="copyFunction(dataFrom.number, '复制账号')">复制账号</div>
+      </div>
+      <div class="main-right">
+        <p>{{ dataFrom.passwordName }}</p>
+        <p>{{ dataFrom.password }}</p>
+        <div @click="copyFunction(dataFrom.password2, '复制密码')">
+          复制密码
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  import { ref, defineProps, watch } from 'vue'
+  import { message } from 'ant-design-vue'
+  let flag = ref(true)
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const dataFrom = ref({
+    linkName: '访问地址',
+    link: 'http://localhost:8080/#/detailsfdddffffffffffffffdfgdfgdfdgdfgdfg',
+    numberName: '试用账号',
+    number: 'zhangfeihu',
+    passwordName: '试用密码',
+    password: '**************************',
+    password2: '',
+  })
+  if (props.dataList.infoList) {
+    // let obj = props.dataList.infoList.filter(
+    //   (item) => item.attrType === '是否支持试用' && item.attrValue === '是'
+    // )[0]
+    // if (obj) {
+    //   flag.value = false
+    // } else {
+    props.dataList.infoList.map((item) => {
+      if (item.attrType == '访问地址') {
+        debugger
+        dataFrom.value.link = item.attrValue
+      } else if (item.attrType == '试用用户名') {
+        dataFrom.value.number = item.attrValue
+      } else if (item.attrType == '试用密码') {
+        dataFrom.value.password2 = item.attrValue
+      }
+    })
+    // }
+  }
+  const clickLink = (link) => {
+    window.open(link)
+  }
+  //复制方法
+  const copyFunction = (data, name) => {
+    let url = data
+    let oInput = document.createElement('input')
+    oInput.value = url
+    document.body.appendChild(oInput)
+    oInput.select() // 选择对象;
+    console.log(oInput.value)
+    document.execCommand('Copy') // 执行浏览器复制命令
+    oInput.remove() // 执行浏览器复制命令
+    message.success(name + '成功')
+  }
+  message.config({
+    top: '100px', // 距离顶部的位置
+  })
+  // const success = () => {
+  //   message.success({
+  //     // content: 'This is a prompt message with custom className and style',
+  //     className: 'custom-class',
+  //     style: {},
+  //   })
+  // }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        // let obj = val.infoList.filter(
+        //   (item) => item.attrType === '是否支持试用' && item.attrValue === '是'
+        // )[0]
+        // if (!obj) {
+        //   flag.value = false
+        // } else {
+        props.dataList.infoList.map((item) => {
+          if (item.attrType == '访问地址') {
+            dataFrom.value.link = item.attrValue
+          } else if (item.attrType == '试用用户名') {
+            dataFrom.value.number = item.attrValue
+          } else if (item.attrType == '试用密码') {
+            dataFrom.value.password2 = item.attrValue
+          }
+        })
+        // }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .algorithm-on-trial {
+    padding: 0.8rem 0px 0.8rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .main {
+      margin-top: 0.3rem;
+      width: 13rem;
+      height: 2.5rem;
+      background: url('~@/assets/detailsAll/kfzj_sybg.png') no-repeat;
+      display: grid;
+      grid-template-columns: 33.33% 33.33% 33.33%;
+      align-items: center;
+      .main-left {
+        border-right: 0.01rem #ffffff solid;
+        padding-left: 0.7rem;
+        padding-right: 1rem;
+        & > p {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+      }
+      .main-center {
+        padding-left: 1rem;
+        padding-right: 1rem;
+      }
+      .main-right {
+        padding-right: 0.7rem;
+      }
+      & > div > p:first-child {
+        font-size: 0.26rem;
+        color: #ffffff;
+        font-weight: bold;
+      }
+      & > div > p:nth-child(2) {
+        font-size: 0.22rem;
+        color: #ffffff;
+        line-height: 0.34rem;
+      }
+      & > div:first-child > p:last-child {
+        text-decoration: underline;
+        word-wrap: break-word;
+        word-break: normal;
+      }
+      & > div > div:last-child {
+        height: 0.34rem;
+        width: 1.1rem;
+        border: 0.01rem solid #ffffff;
+        border-radius: 0.06rem;
+        font-size: 0.18rem;
+        color: #ffffff;
+        cursor: pointer;
+        text-align: center;
+        line-height: 0.34rem;
+      }
+    }
+  }
+</style>
+<style>
+  .custom-class {
+    /* top: 100px; */
+  }
+</style>
diff --git a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
index d6235ac1..51dee4f2 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue
@@ -75,13 +75,14 @@
           attrValue: '是',
         }
         dataFrom.value.content[1].childrenContent.push(isAndNo)
-      } else if (item.attrType === '访问地址') {
-        let obj = {
-          attrType: '访问地址',
-          attrValue: item.attrValue || '------',
-        }
-        dataFrom.value.content[0].childrenContent.push(obj)
       }
+      // } else if (item.attrType === '访问地址') {
+      //   let obj = {
+      //     attrType: '访问地址',
+      //     attrValue: item.attrValue || '------',
+      //   }
+      //   dataFrom.value.content[0].childrenContent.push(obj)
+      // }
     })
     if (dataFrom.value.content[1].childrenContent.length <= 0) {
       let data = [
@@ -99,12 +100,12 @@
       })
     }
   }
-  //访问地址跳转方法
-  const addressFunction = (name, itemValue) => {
-    if (name == '访问地址') {
-      window.open(itemValue)
-    }
-  }
+  // //访问地址跳转方法
+  // const addressFunction = (name, itemValue) => {
+  //   if (name == '访问地址') {
+  //     window.open(itemValue)
+  //   }
+  // }
   watch(
     () => props.dataList,
     (val) => {
@@ -125,13 +126,14 @@
               attrValue: '是',
             }
             dataFrom.value.content[1].childrenContent.push(isAndNo)
-          } else if (item.attrType === '访问地址') {
-            let obj = {
-              attrType: '访问地址',
-              attrValue: item.attrValue || '------',
-            }
-            dataFrom.value.content[0].childrenContent.push(obj)
           }
+          // } else if (item.attrType === '访问地址') {
+          //   let obj = {
+          //     attrType: '访问地址',
+          //     attrValue: item.attrValue || '------',
+          //   }
+          //   dataFrom.value.content[0].childrenContent.push(obj)
+          // }
         })
         if (dataFrom.value.content[1].childrenContent.length <= 0) {
           debugger
diff --git a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
index feff2a35..ba4241f8 100644
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@@ -41,6 +41,10 @@
       name: '使用能力',
       key: 'ability-to-use',
     },
+    {
+      name: '应用详情',
+      key: 'application-ability-trial',
+    },
     {
       name: '部署与安全',
       key: 'deployment-and-security',