功能新增 BUG修改

front/src/views/capacityOnTheShelf/Application.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-13 10:22:27
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 11:09:36
+ * @LastEditTime: 2022-06-15 17:55:02
  * @Description: 应用上架
 -->
 <template>
@@ -34,6 +34,11 @@
         :refData="refData"
         :dataFrom="dataFrom"
       ></application-function-introduction>
+      <application-associated-components
+        v-else-if="showView === '关联组件'"
+        :refData="refData"
+        :dataFrom="dataFrom"
+      ></application-associated-components>
       <application-deployment-use
         v-else-if="showView === '部署与应用'"
         :refData="refData"
@@ -55,6 +60,7 @@
 <script setup>
   import ApplicationEssentialInformation from '@/views/capacityOnTheShelf/components/ApplicationEssentialInformation.vue'
   import ApplicationFunctionIntroduction from '@/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue'
+  import ApplicationAssociatedComponents from '@/views/capacityOnTheShelf/components/ApplicationAssociatedComponents.vue'
   import ApplicationDeploymentUse from '@/views/capacityOnTheShelf/components/ApplicationDeploymentUse.vue'
   import { ref, onBeforeUnmount } from 'vue'
   import { useRouter } from 'vue-router'
@@ -288,7 +294,7 @@
         }
         .line {
           margin-left: 10px;
-          width: 280px;
+          width: 140px;
           height: 1px;
           background: #999;
         }

front/src/views/capacityOnTheShelf/components/AlgorithmScenarios.vue

@@ -47,7 +47,7 @@
           v-model:value="value2"
           :showCount="true"
           :maxlength="200"
-          placeholder="请填写应用场景名称+应用场景场景+应用场景两点+应用场景作用"
+          placeholder="请填写应用场景名称+应用场景场景+应用场景亮点+应用场景作用"
         />
       </div>
       <div class="dec upload" :key="showKey">

front/src/views/capacityOnTheShelf/components/ApplicationAssociatedComponents.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="application-associated-components">
+    <div class="title">
+      <div></div>
+      <div>{{ props.refData.name }}</div>
+      <div></div>
+    </div>
+    <div class="main">
+      <div class="items" v-show="data.length > 0">
+        <div class="item" v-for="(val, index) in data" :key="index">
+          <p>
+            <span>关联组件-{{ index + 1 }}</span>
+            <span></span>
+          </p>
+          <p>
+            <span>关联组件名称</span>
+            <span>{{ val.name }}</span>
+          </p>
+          <p>
+            <span>关联组件描述</span>
+            <span>{{ val.desc }}</span>
+          </p>
+          <p>
+            <span>关联组件地址</span>
+            <span>{{ val.url }}</span>
+          </p>
+          <div class="del">
+            <i class="delImg" @click="del(index)"></i>
+            <div @click="del(index)">删除</div>
+          </div>
+        </div>
+      </div>
+      <div class="add">添加更多关联组件</div>
+      <div class="name">
+        <span>关联组件名称</span>
+        <a-input
+          v-model:value="value"
+          :maxlength="24"
+          placeholder="请填写关联组件名称_关联组件描述热词,不超过24个字符"
+        />
+      </div>
+      <div class="dec">
+        <span>关联组件描述</span>
+        <a-textarea
+          v-model:value="value2"
+          :showCount="true"
+          :maxlength="200"
+          placeholder="请填写关联组件名称+关联组件场景+关联组件亮点+关联组件作用"
+        />
+      </div>
+      <div class="dec upload" :key="showKey">
+        <span>关联组件地址</span>
+        <a-input
+          v-model:value="value3"
+          :maxlength="50"
+          placeholder="请填写关联组件地址,不超过50个字符"
+        />
+      </div>
+      <div class="submit">
+        <a-button type="primary" @click="add()">提交</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps } from 'vue'
+  import mybus from '@/myplugins/mybus'
+  import { message } from 'ant-design-vue'
+  const props = defineProps({
+    refData: { type: Object, default: null },
+    dataFrom: { type: Array, default: null },
+  })
+  const value = ref('')
+  const value2 = ref('')
+  const value3 = ref('')
+  const data = ref([])
+  const showKey = ref(0)
+  // const fileList = ref([])
+  if (props.dataFrom) {
+    console.log(props.dataFrom)
+    props.dataFrom.infoList.forEach((item) => {
+      if (item.attrType === props.refData.name) {
+        data.value = JSON.parse(item.attrValue)
+      }
+    })
+  }
+  const add = () => {
+    if (
+      value.value.length > 0 &&
+      value2.value.length > 0 &&
+      value3.value.length > 0
+    ) {
+      data.value.push({
+        name: value.value,
+        desc: value2.value,
+        url: value3.value,
+      })
+      mybus.emit('chageDataFrom', {
+        attrType: props.refData.name,
+        attrValue: JSON.stringify(data.value),
+        delFlag: 0,
+      })
+      value.value = ''
+      value2.value = ''
+      value3.value = ''
+      showKey.value++
+    } else {
+      message.warning('请填写完整')
+    }
+  }
+  const del = (index) => {
+    data.value.splice(index, 1)
+    mybus.emit('chageDataFrom', {
+      attrType: props.refData.name,
+      attrValue: JSON.stringify(data.value),
+      delFlag: 0,
+    })
+  }
+</script>
+<style lang="less" scoped>
+  .application-associated-components {
+    height: 680px;
+    overflow: scroll;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 50px 100px 25px;
+    & > div {
+      width: 100%;
+    }
+    .title {
+      color: #333333;
+      font-size: 22px;
+      display: flex;
+      align-items: center;
+      margin-bottom: 25px;
+      div:first-child,
+      div:last-child {
+        width: 265px;
+        height: 1px;
+        background: #f0f0f0;
+      }
+      div:nth-child(2) {
+        margin: 0 30px;
+      }
+    }
+    .main {
+      margin-top: 25px;
+      .items {
+        background: #fafafa;
+        padding: 10px;
+        p {
+          display: flex;
+          justify-content: space-between;
+          span:nth-of-type(1) {
+            width: 200px;
+          }
+          span:nth-of-type(2) {
+            width: 100%;
+            font-weight: 600;
+          }
+        }
+        p:nth-of-type(1) > span:nth-of-type(1) {
+          font-size: 18px;
+          font-weight: 600;
+        }
+        .del {
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .delImg {
+            cursor: pointer;
+            display: inline-block;
+            width: 16px;
+            height: 18px;
+            background: url(~@/assets/home/sf_del.png) no-repeat;
+            margin-right: 5px;
+          }
+          div {
+            cursor: pointer;
+          }
+        }
+      }
+      .add {
+        margin-top: 10px;
+        font-size: 16px;
+        color: #007efb;
+      }
+      .name,
+      .dec {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-start;
+        span {
+          width: 120px;
+        }
+        :deep(.ant-input) {
+          resize: none;
+          width: 570px;
+        }
+        :deep(.ant-input-textarea) {
+          width: 570px;
+        }
+        :deep(.ant-radio-group) {
+          width: 570px;
+        }
+        :deep(.ant-input-number) {
+          width: 200px;
+        }
+        .ant-btn {
+          width: 100px;
+          height: 30px;
+          text-align: center;
+          background: #d9ebff;
+          color: #0087ff;
+          border: 1px solid #0087ff;
+          border-radius: 6px;
+        }
+      }
+      .upload span:nth-of-type(2) {
+        width: unset;
+      }
+      .submit {
+        margin-top: 40px;
+        display: flex;
+        justify-content: flex-end;
+        .ant-btn {
+          width: 80px;
+          height: 28px;
+          text-align: center;
+          background: #d9ebff;
+          color: #0087ff;
+          border: 1px solid #0087ff;
+          border-radius: 6px;
+        }
+      }
+    }
+  }
+  :deep(.ant-image-img) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  // .application-associated-components::-webkit-scrollbar {
+  //   display: none;
+  // }
+</style>

front/src/views/capacityOnTheShelf/components/ApplicationFunctionIntroduction.vue

@@ -47,7 +47,7 @@
           v-model:value="value2"
           :showCount="true"
           :maxlength="200"
-          placeholder="请填写功能名称+功能场景+功能两点+功能作用"
+          placeholder="请填写功能名称+功能场景+功能亮点+功能作用"
         />
       </div>
       <div class="dec upload" :key="showKey">

front/src/views/detailsAll/ApplicationDetails.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 11:32:22
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 14:47:39
+ * @LastEditTime: 2022-06-15 18:10:36
  * @Description: 应用详情页
 -->
 <template>
@@ -23,6 +23,12 @@
       id="application-presentation"
       class="scrollBox"
     ></application-presentation>
+    <!-- 关联组件 -->
+    <application-associated-components
+      :dataList="dataList.data"
+      id="application-associated-components"
+      class="scrollBox"
+    ></application-associated-components>
     <!-- 功能介绍-->
     <application-function-intorduction
       :dataList="dataList.data"
@@ -57,6 +63,7 @@
 </template>
 <script setup>
   import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
+  import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.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'

front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 14:54:01
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 14:27:15
+ * @LastEditTime: 2022-06-15 18:32:23
  * @Description: 算法详情页导航
 -->
 <template>
@@ -93,6 +93,10 @@
         item.show = true
       }
     })
+    console.log(
+      'props.dataList.infoList==============>',
+      navList.value.filter((item) => item.name === list.value[0])
+    )
     select.value = navList.value.filter(
       (item) => item.name === list.value[0]
     )[0].key

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

@@ -0,0 +1,149 @@
+<!--
+ * @Author: hisense.liangjunhua
+ * @Date: 2022-06-08 16:06:10
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-06-15 18:26:36
+ * @Description: 关联组件
+-->
+<template>
+  <div class="application-associated-components" v-if="flag">
+    <detals-title title="关联组件" type="RELEVANCE"></detals-title>
+    <div class="main">
+      <div class="top">
+        <div v-for="val in data" :key="val.id" class="item">
+          <div class="icon" :class="val.icon"></div>
+          <div class="title" @click="goToView(val.url)">{{ val.title }}</div>
+          <a-tooltip>
+            <template #title>{{ val.text }}</template>
+            <div class="text">{{ val.text }}</div>
+          </a-tooltip>
+        </div>
+      </div>
+      <div class="bottom"></div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { ref, defineProps, watch } from 'vue'
+  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
+  const data = ref([])
+  const props = defineProps({
+    dataList: { type: Object, default: null },
+  })
+  const flag = ref(true)
+  const goToView = (url) => {
+    if (url) {
+      console.log(url)
+      window.open(url, '_blank')
+    }
+  }
+  if (props.dataList.infoList) {
+    let obj = props.dataList.infoList.filter(
+      (item) => item.attrType === '关联组件'
+    )[0]
+    if (!obj) {
+      flag.value = false
+    } else {
+      data.value = []
+      let arr = JSON.parse(obj.attrValue)
+      if (arr.length > 3) {
+        // 截取数组前三位
+        arr = arr.splice(0, 3)
+      }
+      arr.forEach((item, index) => {
+        data.value.push({
+          title: item.name,
+          text: item.desc,
+          url: item.url,
+          icon: 'icon1',
+          id: index,
+        })
+      })
+    }
+  }
+  watch(
+    () => props.dataList,
+    (val) => {
+      if (val) {
+        let obj = val.infoList.filter((item) => item.attrType === '关联组件')[0]
+        if (!obj) {
+          flag.value = false
+        } else {
+          data.value = []
+          let arr = JSON.parse(obj.attrValue)
+          if (arr.length > 3) {
+            // 截取数组前三位
+            arr = arr.splice(0, 3)
+          }
+          arr.forEach((item, index) => {
+            data.value.push({
+              title: item.name,
+              text: item.desc,
+              icon: 'icon1',
+              id: index,
+            })
+          })
+        }
+      }
+    }
+  )
+</script>
+<style lang="less" scoped>
+  .application-associated-components {
+    padding: 100px 300px 60px;
+    .main {
+      margin-top: 40px;
+      .top {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        .item {
+          width: 424px;
+          padding: 35px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          border: 1px solid #e4e6f5;
+          border-radius: 10px;
+          margin-left: 20px;
+          .icon {
+            width: 82px;
+            height: 82px;
+          }
+          .icon1 {
+            background: url('~@/assets/detailsAll/sf_icon1.png') no-repeat;
+            background-size: 100%;
+          }
+          .icon2 {
+            background: url('~@/assets/detailsAll/sf_icon2.png') no-repeat;
+            background-size: 100%;
+          }
+          .icon3 {
+            background: url('~@/assets/detailsAll/sf_icon3.png') no-repeat;
+            background-size: 100%;
+          }
+          .title {
+            font-size: 22px;
+            margin-top: 25px;
+            text-align: center;
+          }
+          .text {
+            height: 78px;
+            font-size: 18px;
+            line-height: 26px;
+            margin-top: 15px;
+            color: #999;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+          }
+        }
+        .item:nth-of-type(1) {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+</style>

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

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-08 14:54:01
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 14:45:44
+ * @LastEditTime: 2022-06-15 18:24:39
  * @Description: 应用详情页导航
 -->
 <template>
@@ -32,6 +32,10 @@
       name: '功能介绍',
       key: 'function-introduction',
     },
+    {
+      name: '关联组件',
+      key: 'application-associated-components',
+    },
     {
       name: '使用能力',
       key: 'ability-to-use',
@@ -65,11 +69,12 @@
       if (
         item.attrType === '算法优势' ||
         item.attrType === '常见问题' ||
-        item.attrType === '使用能力'
+        item.attrType === '使用能力' ||
+        item.attrType === '关联组件'
       ) {
         list.value.push(item.attrType)
-      } else if (item.attrType === '算法介绍视频') {
+      } else if (item.attrType === '应用展示视频') {
-        list.value.push('算法展示')
+        list.value.push('应用展示')
       }
     })
     navList.value.forEach((item) => {
@@ -98,7 +103,8 @@
           if (
             item.attrType === '功能介绍' ||
             item.attrType === '常见问题' ||
-            item.attrType === '使用能力'
+            item.attrType === '使用能力' ||
+            item.attrType === '关联组件'
           ) {
             list.value.push(item.attrType)
           } else if (item.attrType === '应用展示视频') {

front/src/views/home/components/header.vue

@@ -80,9 +80,32 @@
         <template #title>
           <span>{{ user.username }}</span>
         </template>
-        <span class="name">{{ user.username }}</span>
+        <span
+          class="name"
+          @click="jumpPage({ name: '个人中心', key: 'personalCenter' })"
+        >
+          {{ user.username }}
+        </span>
       </a-tooltip>
       <span @click="logout" class="out">退出</span>
+      <svg
+        t="1655286092324"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="2160"
+        width="20"
+        height="20"
+        style="margin-top: 0.05rem"
+        @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })"
+      >
+        <path
+          d="M1016.832 606.208q2.048 12.288-1.024 29.696t-10.24 35.328-17.408 32.256-22.528 20.48-21.504 6.144-20.48-4.096q-10.24-3.072-25.6-5.632t-31.232-1.024-31.744 6.656-27.136 17.408q-24.576 25.6-28.672 58.368t9.216 62.464q10.24 20.48-3.072 40.96-6.144 8.192-19.456 16.896t-29.184 15.872-33.28 11.264-30.72 4.096q-9.216 0-17.408-7.168t-11.264-15.36l-1.024 0q-11.264-31.744-38.4-54.784t-62.976-23.04q-34.816 0-62.976 23.04t-39.424 53.76q-5.12 12.288-15.36 17.92t-22.528 5.632q-14.336 0-32.256-5.12t-35.84-12.8-32.256-17.92-21.504-20.48q-5.12-7.168-5.632-16.896t7.68-27.136q11.264-23.552 8.704-53.76t-26.112-55.808q-14.336-15.36-34.816-19.968t-38.912-3.584q-21.504 1.024-44.032 8.192-14.336 4.096-28.672-2.048-11.264-4.096-20.992-18.944t-17.408-32.768-11.776-36.864-2.048-31.232q3.072-22.528 20.48-28.672 30.72-12.288 55.296-40.448t24.576-62.976q0-35.84-24.576-62.464t-55.296-38.912q-9.216-3.072-15.36-14.848t-6.144-24.064q0-13.312 4.096-29.696t10.752-31.744 15.36-28.16 18.944-18.944q8.192-5.12 15.872-4.096t16.896 4.096q30.72 12.288 64 7.68t58.88-29.184q12.288-12.288 17.92-30.208t7.168-35.328 0-31.744-2.56-20.48q-2.048-6.144-3.584-14.336t1.536-14.336q6.144-14.336 22.016-25.088t34.304-17.92 35.84-10.752 27.648-3.584q13.312 0 20.992 8.704t10.752 17.92q11.264 27.648 36.864 48.64t60.416 20.992q35.84 0 63.488-19.968t38.912-50.688q4.096-8.192 12.8-16.896t17.92-8.704q14.336 0 31.232 4.096t33.28 11.264 30.208 18.432 22.016 24.576q5.12 8.192 3.072 17.92t-4.096 13.824q-13.312 29.696-8.192 62.464t29.696 57.344 60.416 27.136 66.56-11.776q8.192-5.12 19.968-4.096t19.968 9.216q15.36 14.336 27.136 43.52t15.872 58.88q2.048 17.408-5.632 27.136t-15.872 12.8q-31.744 11.264-54.272 39.424t-22.528 64q0 34.816 18.944 60.928t49.664 37.376q7.168 4.096 12.288 8.192 11.264 9.216 15.36 23.552zM540.672 698.368q46.08 0 87.04-17.408t71.168-48.128 47.616-71.168 17.408-86.528-17.408-86.528-47.616-70.656-71.168-47.616-87.04-17.408-86.528 17.408-70.656 47.616-47.616 70.656-17.408 86.528 17.408 86.528 47.616 71.168 70.656 48.128 86.528 17.408z"
+          p-id="2161"
+          fill="#bfbfbf"
+        ></path>
+      </svg>
     </div>
   </div>
 </template>
@@ -103,9 +126,9 @@
     { name: '能力统计', key: 'abilityStatistics' },
     { name: '开发指南', key: 'developmentGuide' },
     { name: '需求中心', key: 'demandCenter' },
-    { name: '个人中心', key: 'personalCenter' },
+    // { name: '个人中心', key: 'personalCenter' },
     { name: '区市站点', key: 'mapTest' },
-    { name: '后台管理', key: 'houtaiguanli' },
+    // { name: '后台管理', key: 'houtaiguanli' },
     { name: '赋能案例', key: 'assignCase' },
   ])
   const user = ref({})

front/src/views/home/details.vue

@@ -2,7 +2,7 @@
  * @Author: hisense.liangjunhua
  * @Date: 2022-06-14 09:43:49
  * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-14 10:20:42
+ * @LastEditTime: 2022-06-15 18:19:22
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -77,8 +77,10 @@
       ])
       const router = useRouter()
       const id = router.currentRoute.value.query.id
+      const obj = JSON.parse(window.sessionStorage.getItem('preview'))
       let showView = ref('algorithm-details')
       const init = () => {
+        if (id) {
           selectOne(id).then((res) => {
             if (res.data.data.type == '组件服务') {
               showView.value = 'algorithm-details'
@@ -86,6 +88,14 @@
               showView.value = 'application-details'
             }
           })
+        } else if (obj) {
+          console.log('obj============>', obj)
+          if (obj.type == '组件服务') {
+            showView.value = 'algorithm-details'
+          } else {
+            showView.value = 'application-details'
+          }
+        }
       }
       init()
       return {