Merge branch 'hi-ucs-dev' of http://15.2.21.221:3000/wuhongjian/hi-ucs into hi-ucs-dev

2022-07-05 17:36:56 +08:00 · 2022-07-05 17:36:56 +08:00 · b6942754cd
parent d71dc876f5 6539637031
commit b6942754cd
29 changed files with 1416 additions and 1011 deletions
--- a/back/src/views/modules/ability/bsabilityai.vue
+++ b/back/src/views/modules/ability/bsabilityai.vue
@ -55,12 +55,16 @@
          width="50"
        ></el-table-column>
        <af-table-column
+          :show-overflow-tooltip="true"
+          width="280"
          prop="name"
          label="组件名称"
          header-align="center"
          align="center"
        ></af-table-column>
        <af-table-column
+        :show-overflow-tooltip="true"
+          width="300"
          v-for="(item, index) in dataList[0].infoList"
          :key="index"
          :label="item.attrType"
@ -126,32 +130,32 @@
 </template>

 <script>
-import mixinViewModule from "@/mixins/view-module";
-import AddOrUpdate from "./bsabilityai-add-or-update";
-import dictionaries from "@/utils/dictionaries";
-import qs from "qs";
-import RelateApplication from "./bsabilityai-relate-application.vue"
+import mixinViewModule from '@/mixins/view-module'
+import AddOrUpdate from './bsabilityai-add-or-update'
+import dictionaries from '@/utils/dictionaries'
+import qs from 'qs'
+import RelateApplication from './bsabilityai-relate-application.vue'
 export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
-        getDataListURL: "/resource/page",
+        getDataListURL: '/resource/page',
        getDataListIsPage: true,
-        exportURL: "/ability/bsabilityai/export",
-        deleteURL: "/resource/delete",
-        deleteIsBatch: true,
+        exportURL: '/ability/bsabilityai/export',
+        deleteURL: '/resource/delete',
+        deleteIsBatch: true
      },
      disabled: false,
      sceneArr: dictionaries.sceneArr,
      fieldArr: dictionaries.fieldArr,
      shareFormArr: dictionaries.shareFormArr,
      dataForm: {
-        name: "",
-        creator: "",
+        name: '',
+        creator: '',
        delFlag: 0,
        selectType: 0,
-        type: "组件服务",
+        type: '组件服务'
      },
      qp: false,
      // 关联应用弹窗
@ -161,7 +165,7 @@ export default {
        responseData: {},
        linkType: ''
      }
-    };
+    }
  },
  watch: {},
  components: {
@ -169,182 +173,185 @@ export default {
    RelateApplication
  },
  created () {
-    this.dataForm.name = "";
-    this.dataForm.type = "组件服务";
+    this.dataForm.name = ''
+    this.dataForm.type = '组件服务'
  },
  mounted () {
-    window.addEventListener("resize", this.a);
-    this.fullScreen();
+    window.addEventListener('resize', this.a)
+    this.fullScreen()
  },
  methods: {
    reset () {
      this.$http
        .get(
          this.mixinViewModuleOptions.getDataListURL +
-            "?" +
+            '?' +
            qs.stringify({
              // order: this.order,
              // orderField: this.orderField,
              // type: '组件服务',
              page: 1,
              limit: 10,
-              creator: "",
+              creator: '',
              selectType: 0,
              delFlag: 0,
-              type: "组件服务",
-              name: "",
+              type: '组件服务',
+              name: ''
            })
        )
        .then(({ data: res }) => {
-          this.dataForm.name = "";
+          this.dataForm.name = ''
          if (res.code !== 0) {
-            this.dataList = [];
-            this.total = 0;
-            return this.$message.error(res.msg);
+            this.dataList = []
+            this.total = 0
+            return this.$message.error(res.msg)
          }
          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.list
-            : res.data;
+            : res.data
          this.total = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.total
-            : 0;
+            : 0
          if (this.mixinViewModuleOptions.requestCallback) {
-            this.mixinViewModuleOptions.requestCallback(res.data);
+            this.mixinViewModuleOptions.requestCallback(res.data)
          }
-          this.dataListLoading = false;
+          this.dataListLoading = false
        })
        .catch(() => {
-          this.dataListLoading = false;
-        });
+          this.dataListLoading = false
+        })
    },
    findValue (list, type) {
-      const found = list.find((item) => item.attrType === type);
+      const found = list.find((item) => item.attrType === type)
      if (found) {
-        return found.attrValue;
+        return found.attrValue
      } else {
-        return "暂无数据";
+        return '暂无数据'
      }
    },
    showDetail (val) {
      // this.addOrUpdateHandle(id)
-      this.addOrUpdateVisible = true;
-      this.disabled = false;
-      console.log("显示数据=============》", val);
+      this.addOrUpdateVisible = true
+      this.disabled = false
+      console.log('显示数据=============》', val)
      this.$nextTick(() => {
-        this.$refs.addOrUpdate.UpdateState = false;
-        this.$refs.addOrUpdate.dataFormShowDetails = val;
-        this.$refs.addOrUpdate.init();
-      });
-      this.disabled = true;
+        this.$refs.addOrUpdate.UpdateState = false
+        this.$refs.addOrUpdate.dataFormShowDetails = val
+        this.$refs.addOrUpdate.init()
+      })
+      this.disabled = true
    },
    showDocument (val) {
-      console.log(val);
+      console.log(val)
      window.open(
-        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
-        "_blank"
-      );
+        window.SITE_CONFIG.frontUrl + '?id=' + val.id + '&&type=' + val.type,
+        '_blank'
+      )
    },
    getDataList2 (names) {
      if (names != null) {
        this.$http
          .get(
            this.mixinViewModuleOptions.getDataListURL +
-              "?" +
+              '?' +
              qs.stringify({
                // order: this.order,
                // orderField: this.orderField,
                // type: '组件服务',
                pageNum: 1,
                pageSize: this.limit,
-                type: "组件服务",
-                creator: "",
+                type: '组件服务',
+                creator: '',
                selectType: 0,
                delFlag: 0,
-                name: names,
+                name: names
              })
          )
          .then(({ data: res }) => {
-            console.log("res", res);
+            console.log('res', res)
            if (res.code !== 0) {
-              this.dataList = [];
-              this.total = 0;
-              return this.$message.error(res.msg);
+              this.dataList = []
+              this.total = 0
+              return this.$message.error(res.msg)
            }
            if (res.data.list.length !== 0) {
-              this.dataList = res.data.list;
+              this.dataList = res.data.list
              this.total = this.mixinViewModuleOptions.getDataListIsPage
                ? res.data.total
-                : 0;
+                : 0
              if (this.mixinViewModuleOptions.requestCallback) {
-                this.mixinViewModuleOptions.requestCallback(res.data);
+                this.mixinViewModuleOptions.requestCallback(res.data)
              }
-              this.dataListLoading = false;
+              this.dataListLoading = false
            } else {
-              this.$message.error("未查询到相关信息");
-              this.reset();
+              this.$message.error('未查询到相关信息')
+              this.reset()
            }
          })
          .catch(() => {
-            this.dataListLoading = false;
-          });
+            this.dataListLoading = false
+          })
      } else {
-        this.$message.error("查询信息不能为空");
+        this.$message.error('查询信息不能为空')
      }
    },
    fullScreen () {
      if (window.outerHeight === screen.availHeight) {
        if (window.outerWidth === screen.availWidth) {
          console.log(
-            "全屏1",
+            '全屏1',
            window.outerHeight,
            screen.availHeight,
            window.outerWidth,
            screen.availWidth
-          );
-          this.qp = false;
+          )
+          this.qp = false
        } else {
          console.log(
-            "不是全屏2",
+            '不是全屏2',
            window.outerHeight,
            screen.availHeight,
            window.outerWidth,
            screen.availWidth
-          );
-          this.qp = true;
+          )
+          this.qp = true
        }
      } else {
        console.log(
-          "不是全屏3",
+          '不是全屏3',
          window.outerHeight,
          screen.availHeight,
          window.outerWidth,
          screen.availWidth
-        );
-        this.qp = true;
+        )
+        this.qp = true
      }
    },
    // 点击关联应用按钮
    showRelateApplication (row) {
      this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
        if (res && res.data) {
-          this.relateApplicationVisible = true;
+          this.relateApplicationVisible = true
          this.relateInfo = {
            id: row.id,
            responseData: res.data,
            linkType: '2'
-          };
+          }
        }
      }).catch(() => { })
    },
    // 是否展示关联应用弹窗
    handleIsShowRelatePopup (type) {
-      this.relateApplicationVisible = type;
+      this.relateApplicationVisible = type
+    }
+  }
 }
-  },
-};
 </script>
 <style lang="scss" scoped>
 .el-tooltip__popper {
  max-width: 50%;
 }
+::v-deep .el-table .cell{
+  width: 200px;
+}
 </style>
--- a/back/src/views/modules/ability/bsdataresources.vue
+++ b/back/src/views/modules/ability/bsdataresources.vue
@ -84,7 +84,11 @@ export default {
  methods: {
    // 重置
    resetDataList () {
-      this.dataForm = this.noDataForm
+      this.dataForm = {
+        orderId: '',
+        status: '',
+        userId: ''
+      },
      this.page = 1 // 当前页码
      this.query()
    },
--- a/front/package.json
+++ b/front/package.json
@ -38,6 +38,7 @@
    "pinyin-pro": "^3.8.3",
    "postprocessing": "^5.3.2",
    "remixicon": "^2.5.0",
+    "swiper": "^8.2.6",
    "three": "^0.98.0",
    "three.meshline": "^1.1.0",
    "vue": "^3.1.4",
@ -70,6 +71,7 @@
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "svg-sprite-loader": "^6.0.9",
+    "swiper": "^8.0.0",
    "vab-config": "0.0.8",
    "webpackbar": "^5.0.0-3"
  },
--- a/front/src/assets/newHome/newHome-title-bg.png
+++ b/front/src/assets/newHome/newHome-title-bg.png
--- a/front/src/main.js
+++ b/front/src/main.js
@ -1,8 +1,8 @@
 /*
 * @Author: hisense.wuhongjian
 * @Date: 2022-03-29 17:48:03
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-06-10 15:45:34
+ * @LastEditors: hisense.liangjunhua
+ * @LastEditTime: 2022-07-05 15:04:47
 * @Description: 告诉大家这是什么
 */
 import { createApp } from 'vue'
@ -45,3 +45,9 @@ app
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
 }
+router.beforeEach((to, from, next) => {
+  // console.log('跳转路由=========>', to, from, next)
+  document.documentElement.scrollTop = 0
+  document.body.scrollTop = 0
+  next()
+})
--- a/front/src/views/capabilityCloud/components/PlatformOverview.vue
+++ b/front/src/views/capabilityCloud/components/PlatformOverview.vue
@ -2,7 +2,7 @@
 * @Author: hisense.liangjunhua
 * @Date: 2022-06-19 10:15:33
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-06-19 17:52:04
+ * @LastEditTime: 2022-07-05 16:11:11
 * @Description: 告诉大家这是什么
 -->
 <template>
@ -134,7 +134,7 @@
    },
    grid: {
      top: '14%',
-      left: '4%',
+      left: '6%',
      right: '5%',
      bottom: '12%',
      containLabel: true,
--- a/front/src/views/capacityOnTheShelf/Application.vue
+++ b/front/src/views/capacityOnTheShelf/Application.vue
@ -391,7 +391,7 @@
        }
        .line {
          margin-left: 10px;
-          width: 140px;
+          width: 280px;
          height: 1px;
          background: #999;
        }
--- a/front/src/views/detailsAll/AlgorithmDetails.vue
+++ b/front/src/views/detailsAll/AlgorithmDetails.vue
@ -15,12 +15,6 @@
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></algorithm-navigation>
-    <!-- 算法展示  视频 -->
-    <algorithm-display
-      :dataList="dataList.data"
-      id="algorithm-display"
-      class="scrollBox"
-    ></algorithm-display>
    <!-- 关联能力 -->
    <algorithm-associated-ability
      v-if="!loading"
@ -28,6 +22,12 @@
      id="algorithm-associated-ability"
      class="scrollBox"
    ></algorithm-associated-ability>
+    <!-- 算法展示  视频 -->
+    <algorithm-display
+      :dataList="dataList.data"
+      id="algorithm-display"
+      class="scrollBox"
+    ></algorithm-display>
    <!-- 算法优势 -->
    <algorithm-advantage
      :dataList="dataList.data"
--- a/front/src/views/detailsAll/ApplicationDetails.vue
+++ b/front/src/views/detailsAll/ApplicationDetails.vue
@ -163,7 +163,6 @@
        }
        queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
          associatedComponents.value[0].dataList = res.data.data
-          debugger
          loading.value = false
        })
      })
--- a/front/src/views/detailsAll/DeveloperComponents.vue
+++ b/front/src/views/detailsAll/DeveloperComponents.vue
@ -16,12 +16,6 @@
      :class="{ fixed: scrollTop >= 600 }"
      :selectNow="selectNow"
    ></developer-navigation>
-    <!-- 组件展示  视频 -->
-    <Developer-presentation
-      :dataList="dataList.data"
-      id="eveloper-presentation"
-      class="scrollBox"
-    ></Developer-presentation>
    <!-- 关联能力 -->
    <developer-associated-ability
      v-if="!loading"
@ -29,6 +23,12 @@
      id="developer-associated-ability"
      class="scrollBox"
    ></developer-associated-ability>
+    <!-- 组件展示  视频 -->
+    <Developer-presentation
+      :dataList="dataList.data"
+      id="eveloper-presentation"
+      class="scrollBox"
+    ></Developer-presentation>
    <!-- 功能介绍-->
    <developer-function-intorduction
      :dataList="dataList.data"
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue
@ -1,7 +1,10 @@
 <template>
  <div class="application-associated-ability" v-if="flag">
    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
      <div
        class="associated-ability-card"
        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
        </div>
      </div>
    </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
  </div>
 </template>

 <script setup>
  import { ref, defineProps, watch } from 'vue'
  import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
  const router = useRouter()
+  const modules = ref([Pagination])
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const props = defineProps({
    associatedComponents: { type: Array, default: null },
@ -84,15 +127,18 @@
 <style lang="less" scoped>
  .application-associated-ability {
    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .application-associated-ability-main {
      margin-top: 0.4rem;
      width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around !important;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
      .associated-ability-card {
        width: 3.2rem;
        height: 2.78rem;
--- a/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
+++ b/front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
@ -85,7 +85,7 @@
    dataList: { type: Object, default: null },
  })

-  const select = ref('algorithm-display')
+  const select = ref('algorithm-associated-ability')

  const selectNav = (key) => {
    select.value = key
@ -128,7 +128,7 @@
    )
    if (navList.value.filter((item) => item.name === list.value[0])[0]) {
      select.value = navList.value.filter(
-        (item) => item.name === list.value[0]
+        (item) => (item.name === '关联应用') | (item.name === list.value[0])
      )[0].key
    }
    console.log('11111111111111111111111111', list.value, navList.value)
@ -167,7 +167,7 @@
            list.value.push('使用方式')
          }
        })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
        navList.value.forEach((item) => {
          console.log(item)
          if (list.value.indexOf(item.name) > -1) {
--- a/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue
@ -1,7 +1,10 @@
 <template>
  <div class="application-associated-ability" v-if="flag">
    <detals-title title="关联组件" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
      <div
        class="associated-ability-card"
        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -26,17 +29,58 @@
        </div>
      </div>
    </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+            :class="cardFunction(dataFrom[0].dataList)"
+          >
+            <div class="icon"></div>
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description || '' }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description || '' }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
  </div>
 </template>
-
 <script setup>
  import { ref, defineProps, watch } from 'vue'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const props = defineProps({
    associatedComponents: { type: Array, default: null },
  })
+  const modules = ref([Pagination])
  const dataFrom = ref([])
  const flag = ref(true)
  const oldid = router.currentRoute.value.query.id
@ -91,18 +135,22 @@
 <style lang="less" scoped>
  .application-associated-ability {
    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .application-associated-ability-main {
      margin-top: 0.4rem;
      width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around;
+      position: relative;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
      .associated-ability-card {
        width: 3.2rem;
-        // height: 2.78rem;
+        height: 2.78rem;
        display: flex;
        flex-direction: column;
        align-items: center;
--- a/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
+++ b/front/src/views/detailsAll/components/Application/ApplicationNavigation.vue
@ -28,6 +28,10 @@
      name: '应用展示',
      key: 'application-presentation',
    },
+    {
+      name: '关联组件',
+      key: 'application-associated-ability',
+    },
    {
      name: '功能介绍',
      key: 'function-introduction',
@ -36,10 +40,6 @@
    //   name: '关联组件',
    //   key: 'application-associated-components',
    // },
-    {
-      name: '关联组件',
-      key: 'application-associated-ability',
-    },
    {
      name: '使用能力',
      key: 'ability-to-use',
--- a/front/src/views/detailsAll/components/Application/style.css
+++ b/front/src/views/detailsAll/components/Application/style.css
@ -0,0 +1,31 @@
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  text-align: center;
+  font-size: 18px;
+  background: #fff;
+
+  /* Center slide text vertically */
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
--- a/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessAssociatedAbility.vue
@ -1,7 +1,10 @@
 <template>
  <div class="application-associated-ability" v-if="flag">
    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
      <div
        class="associated-ability-card"
        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
        </div>
      </div>
    </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
  </div>
 </template>

 <script setup>
  import { ref, defineProps, watch } from 'vue'
  import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
  const router = useRouter()
+  const modules = ref([Pagination])
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const props = defineProps({
    associatedComponents: { type: Array, default: null },
@ -84,15 +127,18 @@
 <style lang="less" scoped>
  .application-associated-ability {
    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .application-associated-ability-main {
      margin-top: 0.4rem;
      width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
      .associated-ability-card {
        width: 3.2rem;
        height: 2.78rem;
--- a/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessNavigation.vue
@ -21,13 +21,14 @@
  </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
  const navList = ref([
-    {
-      name: '关联应用',
-      key: 'business-associated-ability',
-    },
    {
      name: '组件展示',
      key: 'business-presentation',
@ -61,6 +62,22 @@
  })
  const select = ref('business-presentation')
  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'business-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
  const selectNav = (key) => {
    select.value = key
    console.log(key, select.value)
@ -69,8 +86,8 @@
  if (props.dataList.infoList) {
    list.value = []
    let arr = [
-      '组件视频介绍',
      '关联应用',
+      '组件视频介绍',
      '功能介绍',
      '应用场景',
      '应用案例',
@ -94,7 +111,7 @@
        list.value.push('组件展示')
      }
    })
-    list.value.push('关联应用')
+    list.value.unshift('关联应用')
    list.value.push('使用方式')
    navList.value.forEach((item) => {
      console.log(item)
@ -125,8 +142,8 @@
      if (val) {
        list.value = []
        let arr = [
-          '组件视频介绍',
          '关联应用',
+          '组件视频介绍',
          '功能介绍',
          '应用场景',
          '应用案例',
@ -151,7 +168,7 @@
            list.value.push('组件展示')
          }
        })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
        list.value.push('使用方式')
        navList.value.forEach((item) => {
          console.log(item)
@ -166,10 +183,13 @@
          }
        })
        if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
            select.value = navList.value.filter(
-            (item) => item.name === list.value[0]
+              (item) =>
+                (item.name === '关联应用') | (item.name === list.value[0])
            )[0].key
          }
+        }
        console.log('11111111111111111111111111', list.value, navList.value)
      }
    }
--- a/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
+++ b/front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
@ -2,10 +2,7 @@
  <!-- 使用方式 -->
  <div class="usage-mode" v-if="flag">
    <div class="tltle">
-      <DetalsTitle
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
    </div>
    <div class="content" v-for="item in dataFrom.content" :key="item.title">
      <div class="content-left">
@ -30,7 +27,7 @@
          <div class="content-right-title">{{ item.contact }}</div>
          <div class="content-right-content">
            <p>
-              <span>{{ item.contact }}</span>
+              <span>{{ item.facilitator.name }}</span>
              <a-tooltip>
                <template #title>{{ item.facilitator.value }}</template>
                <span>{{ item.facilitator.value }}</span>
@ -56,7 +53,7 @@
          <div class="content-right-title">{{ item.contact2 }}</div>
          <div class="content-right-content">
            <p>
-              <span>{{ item.contact2 }}</span>
+              <span>{{ item.facilitator2.name }}</span>
              <a-tooltip>
                <template #title>{{ item.facilitator2.value }}</template>
                <span>{{ item.facilitator2.value }}</span>
@ -235,14 +232,15 @@
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0;
+
  .content {
    margin-top: 0.3rem;
    display: flex;
+
    .content-left {
      height: 1.5rem;
      width: 6.2rem;
-        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-          no-repeat;
+      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
      background-position: center;
      background-size: 100% 100%;
      border-radius: 0.1rem;
@ -251,21 +249,25 @@
      display: flex;
      align-items: center;
      padding: 0 0.35rem;
+
      .left {
        .content-left-title {
          font-size: 0.26rem;
          line-height: 0.26rem;
          color: #212956;
          margin-bottom: 0.2rem;
+
          span:first-child {
            margin-right: 0.1rem;
          }
        }
+
        .content-left-content {
          width: 4.2rem;
          font-size: 0.2rem;
          color: rgba(33, 41, 86, 0.8);
          line-height: 0.2rem;
+
          p {
            display: -webkit-box;
            overflow: hidden;
@ -275,6 +277,7 @@
          }
        }
      }
+
      .right {
        div {
          height: 0.4rem;
@ -288,16 +291,17 @@
          align-items: center;
          cursor: pointer;
        }
+
        div:first-child {
          margin-bottom: 0.2rem;
        }
      }
    }
+
    .content-right {
      height: 1.5rem;
      width: 6.2rem;
-        background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png')
-          no-repeat;
+      background: url('~@/assets/detailsAll/business/business_usage_mode_bg.png') no-repeat;
      background-position: center;
      background-size: 100% 100%;
      border-radius: 0.1rem;
@ -306,17 +310,20 @@
      justify-content: space-around;
      align-items: center;
      padding: 0 0.3rem;
+
      .content-right-left {
        border-right: 0.01rem solid #707fe0;
        padding-right: 0.1rem;
        margin-right: 0.1rem;
      }
+
      .content-right-title {
        font-size: 0.26rem;
        line-height: 0.26rem;
        color: #212956;
        margin-bottom: 0.15rem;
      }
+
      .content-right-content {
        display: flex;
        font-size: 0.16rem;
@ -326,6 +333,7 @@
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        flex-direction: column;
+
        p {
          // width: 1.60rem;
          height: 0.2rem;
@ -336,6 +344,7 @@
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          margin-right: 0.15rem;
+
          span {
            cursor: pointer;
          }
--- a/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue
@ -1,7 +1,10 @@
 <template>
  <div class="application-associated-ability" v-if="flag">
    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
-    <div class="application-associated-ability-main">
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
      <div
        class="associated-ability-card"
        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
@ -24,13 +27,53 @@
        </div>
      </div>
    </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
  </div>
 </template>

 <script setup>
  import { ref, defineProps, watch } from 'vue'
  import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
  const router = useRouter()
+  const modules = ref([Pagination])
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const props = defineProps({
    associatedComponents: { type: Array, default: null },
@ -49,7 +92,8 @@
    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
    // alert(id)
  }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
    console.log('这个是空值', props.associatedComponents)
    flag.value = true
    dataFrom.value = props.associatedComponents
@ -60,7 +104,7 @@
  watch(
    () => props.associatedComponents,
    (val) => {
-      if (val.length != 0) {
+      if (val) {
        flag.value = true
        dataFrom.value = props.associatedComponents
        console.log('dataFrom.value', dataFrom.value)
@ -83,15 +127,18 @@
 <style lang="less" scoped>
  .application-associated-ability {
    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .application-associated-ability-main {
      margin-top: 0.4rem;
      width: 13.3rem;
-      display: grid;
-      grid-template-columns: repeat(4, 25%);
+      display: flex;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
      .associated-ability-card {
        width: 3.2rem;
        height: 2.78rem;
--- a/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
+++ b/front/src/views/detailsAll/components/Developer/DeveloperNavigation.vue
@ -21,17 +21,18 @@
  </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
  const navList = ref([
    {
      name: '组件展示',
      key: 'eveloper-presentation',
    },
-    {
-      name: '关联应用',
-      key: 'developer-associated-ability',
-    },
    {
      name: '功能介绍',
      key: 'function-introduction',
@ -64,6 +65,22 @@
  })
  const select = ref('algorithm-display')
  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'developer-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
  const selectNav = (key) => {
    select.value = key
    mybus.emit('flyToView', select.value)
@ -81,7 +98,7 @@
        list.value.push('组件展示')
      }
    })
-    list.value.push('关联应用')
+    list.value.unshift('关联应用')
    navList.value.forEach((item) => {
      console.log(item)
      if (list.value.indexOf(item.name) > -1) {
@ -123,7 +140,7 @@
            list.value.push('组件展示')
          }
        })
-        list.value.push('关联应用')
+        list.value.unshift('关联应用')
        list.value.push('组件试用')
        list.value.push('使用方式')
        navList.value.forEach((item) => {
@ -139,10 +156,13 @@
          }
        })
        if (list.value.length > 0) {
+          if (navList.value.filter((item) => item.name === list.value[0])[0]) {
            select.value = navList.value.filter(
-            (item) => item.name === list.value[0]
+              (item) =>
+                (item.name === '关联应用') | (item.name === list.value[0])
            )[0].key
          }
+        }
        console.log('11111111111111111111111111', list.value, navList.value)
      }
    }
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue
@ -1,30 +1,79 @@
 <template>
  <div class="application-associated-ability" v-if="flag">
-    <detals-title title="关联应用" type="RELEVANCE"></detals-title>
-    <div class="application-associated-ability-main">
+    <detals-title title="关联应用" type="ASSOCIATED"></detals-title>
+    <div
+      class="application-associated-ability-main"
+      v-if="dataFrom[0].dataList.length < 4"
+    >
      <div
        class="associated-ability-card"
        v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
        :key="dataListitem.id"
        @click="switchFunction(dataListitem.id)"
      >
+        <a-tooltip>
+          <template #title>{{ dataListitem.name }}</template>
          <div class="associated-ability-card-title">
            {{ dataListitem.name }}
          </div>
+        </a-tooltip>
        <div class="associated-ability-card-content">
+          <a-tooltip>
+            <template #title>{{ dataListitem.description }}</template>
            <div class="associated-ability-card-content-font">
              {{ dataListitem.description }}
            </div>
+          </a-tooltip>
        </div>
      </div>
    </div>
+    <div class="application-associated-ability-main" v-else>
+      <swiper
+        :slidesPerView="3"
+        :spaceBetween="30"
+        :pagination="{ clickable: true }"
+        :modules="modules"
+        class="mySwiper"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+      >
+        <swiper-slide
+          v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
+          :key="dataListitem.id"
+        >
+          <div
+            class="associated-ability-card"
+            @click="switchFunction(dataListitem.id)"
+          >
+            <a-tooltip>
+              <template #title>{{ dataListitem.name }}</template>
+              <div class="associated-ability-card-title">
+                {{ dataListitem.name }}
+              </div>
+            </a-tooltip>
+            <div class="associated-ability-card-content">
+              <a-tooltip>
+                <template #title>{{ dataListitem.description }}</template>
+                <div class="associated-ability-card-content-font">
+                  {{ dataListitem.description }}
+                </div>
+              </a-tooltip>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
  </div>
 </template>

 <script setup>
  import { ref, defineProps, watch } from 'vue'
  import { useRouter } from 'vue-router'
+  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
+  import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
+  import 'swiper/swiper-bundle.min.css'
  const router = useRouter()
+  const modules = ref([Pagination])
  import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
  const props = defineProps({
    associatedComponents: { type: Array, default: null },
@ -34,17 +83,20 @@
  const oldid = router.currentRoute.value.query.id
  //点击查看详情
  const switchFunction = (id) => {
-    router.push({
-      path: '/details',
-      query: {
-        id: id,
-      },
-    })
+    // router.push({
+    //   path: '/details',
+    //   query: {
+    //     id: id,
+    //   },
+    // })
+    window.open(window.SITE_CONFIG.previewUrl + '#/details?id=' + id)
+    // alert(id)
  }
-  if (props.associatedComponents[0].dataList.length != 0) {
+  console.log('这个是空值', props.associatedComponents[0])
+  if (props.associatedComponents[0].dataList.length > 0) {
+    console.log('这个是空值', props.associatedComponents)
    flag.value = true
    dataFrom.value = props.associatedComponents
-    debugger
    console.log('dataFrom.value', dataFrom.value)
  } else {
    flag.value = false
@ -75,7 +127,7 @@
 <style lang="less" scoped>
  .application-associated-ability {
    padding-top: 0.8rem;
-    padding-bottom: 0.8rem;
+    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
@ -83,20 +135,31 @@
      margin-top: 0.4rem;
      width: 13.3rem;
      display: flex;
-      justify-content: space-between;
+      justify-content: space-around;
+      :deep(.swiper) {
+        padding-bottom: 0.6rem;
+      }
      .associated-ability-card {
        width: 3.2rem;
+        height: 2.78rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #e4e6f5;
        border-radius: 0.1rem;
        padding-bottom: 0.3rem;
+        margin-right: 0.2rem;
+        margin-top: 0.2rem;
        cursor: pointer;
        .associated-ability-card-title {
+          width: 2.2rem;
          padding-top: 0.3rem;
          font-size: 0.22rem;
          text-align: center;
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
        }
        .associated-ability-card-content {
          width: 100%;
@ -107,6 +170,11 @@
            color: #999;
            margin-right: 0.15rem;
            margin-top: 0.15rem;
+            text-align: center;
+            display: -webkit-box;
+            overflow: hidden;
+            -webkit-line-clamp: 5;
+            -webkit-box-orient: vertical;
          }
        }
      }
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceNavigation.vue
@ -21,13 +21,14 @@
  </div>
 </template>
 <script setup>
-  import { ref, defineProps, watch } from 'vue'
+  import { ref, defineProps, watch, getCurrentInstance } from 'vue'
+  import { useRouter } from 'vue-router'
  import mybus from '@/myplugins/mybus'
+  import { queryPartAppByKeyId2 } from '@/api/home'
+  // 获取当前路由地址
+  const router = useRouter()
+  const keyId = router.currentRoute.value.query.id
  const navList = ref([
-    {
-      name: '关联应用',
-      key: 'layer-service-associated-ability',
-    },
    {
      name: '图层展示',
      key: 'service-presentation',
@ -64,6 +65,22 @@
  })
  const select = ref('service-presentation')
  const list = ref([])
+  // 根据能力id查询是否存在关联应用
+  if (keyId) {
+    queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
+      console.log('ressssssss', res)
+      if (res.data.data.length > 0) {
+        // 存在关联应用时在导航栏加入关联应用
+        navList.value.unshift({
+          name: '关联应用',
+          key: 'service-associated-ability',
+          show: true,
+        })
+        // list.value.push('关联应用')
+        console.log('navList', navList)
+      }
+    })
+  }
  const selectNav = (key) => {
    select.value = key
    console.log(key, select.value)
--- a/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
+++ b/front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
@ -2,10 +2,7 @@
  <!-- 使用方式 -->
  <div class="usage-mode" v-if="flag">
    <div class="tltle">
-      <DetalsTitle
-        :title="dataFrom.title"
-        :type="dataFrom.englishTitle"
-      ></DetalsTitle>
+      <DetalsTitle :title="dataFrom.title" :type="dataFrom.englishTitle"></DetalsTitle>
    </div>
    <div class="content" v-for="item in dataFrom.content" :key="item.title">
      <div class="content-left">
@ -31,7 +28,7 @@
          <div class="content-right-title">{{ item.contact }}</div>
          <div class="content-right-content">
            <p>
-              <span>{{ item.contact }}</span>
+              <span>{{ item.facilitator.name }}</span>
              <a-tooltip>
                <template #title>{{ item.facilitator.value }}</template>
                <span>{{ item.facilitator.value }}</span>
@ -57,7 +54,7 @@
          <div class="content-right-title">{{ item.contact2 }}</div>
          <div class="content-right-content">
            <p>
-              <span>{{ item.contact2 }}</span>
+              <span>{{ item.facilitator2.name }}</span>
              <a-tooltip>
                <template #title>{{ item.facilitator2.value }}</template>
                <span>{{ item.facilitator2.value }}</span>
@ -237,38 +234,42 @@
  flex-direction: column;
  align-items: center;
  padding: 0.8rem 0;
+
  .content {
    margin-top: 0.3rem;
    display: flex;
+
    .content-left {
      height: 1.8rem;
      width: 6.2rem;
-        background: linear-gradient(
-          to right,
+      background: linear-gradient(to right,
          rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4)
-        );
+          rgba(148, 163, 252, 0.4));
      border-radius: 0.1rem;
      margin-right: 0.6rem;
      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
      display: flex;
      align-items: center;
      padding: 0 0.35rem;
+
      .left {
        .content-left-title {
          font-size: 0.26rem;
          line-height: 0.26rem;
          color: #212956;
          margin-bottom: 0.2rem;
+
          span:first-child {
            margin-right: 0.1rem;
          }
        }
+
        .content-left-content {
          width: 4.2rem;
          font-size: 0.2rem;
          color: rgba(33, 41, 86, 0.8);
          line-height: 0.2rem;
+
          p {
            display: -webkit-box;
            overflow: hidden;
@ -279,11 +280,13 @@
            color: #212956;
            line-height: 26px;
          }
+
          p:last-of-type {
            margin-top: 20px;
          }
        }
      }
+
      .right {
        div {
          height: 0.4rem;
@ -297,36 +300,39 @@
          align-items: center;
          cursor: pointer;
        }
+
        div:first-child {
          margin-bottom: 0.2rem;
        }
      }
    }
+
    .content-right {
      height: 1.8rem;
      width: 6.2rem;
-        background: linear-gradient(
-          to right,
+      background: linear-gradient(to right,
          rgba(113, 132, 252, 0.4),
-          rgba(148, 163, 252, 0.4)
-        );
+          rgba(148, 163, 252, 0.4));
      border-radius: 0.1rem;
      box-shadow: 0rem 0.05rem 0.15rem rgba(82, 106, 255, 0.4);
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding: 0 0.3rem;
+
      .content-right-left {
-          border-right: 0.01rem solid #b0b9f1;
+        // border-right: 0.01rem solid #b0b9f1;
        padding-right: 0.1rem;
        margin-right: 0.1rem;
      }
+
      .content-right-title {
        font-size: 0.26rem;
        line-height: 0.26rem;
        color: #212956;
        margin-bottom: 0.15rem;
      }
+
      .content-right-content {
        display: flex;
        font-size: 0.16rem;
@ -336,6 +342,7 @@
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        flex-direction: column;
+
        p {
          // width: 1.60rem;
          height: 0.2rem;
@ -345,6 +352,7 @@
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          margin-right: 0.15rem;
+
          span {
            cursor: pointer;
            font-size: 20px;
--- a/front/src/views/home/components/searchResultList.vue
+++ b/front/src/views/home/components/searchResultList.vue
@ -123,7 +123,10 @@
              <span>{{ item.deptName || '--' }}</span>
            </div>
            <div v-if="selectCardsname !== '基础设施'">
+              <a-tooltip>
+                <template #title>{{ item.description }}</template>
                {{ item.description || '--' }}
+              </a-tooltip>
            </div>
          </div>
          <div class="bottom" v-if="selectCardsname !== '基础设施'">
--- a/front/src/views/home/details.vue
+++ b/front/src/views/home/details.vue
@ -91,7 +91,7 @@
      const router = useRouter()
      const id = router.currentRoute.value.query.id
      const obj = JSON.parse(window.sessionStorage.getItem('preview'))
-      let showView = ref('details-view')
+      let showView = ref('')
      const init = () => {
        if (id) {
          selectOne(id).then((res) => {
--- a/front/src/views/newHome/components/Navigation.vue
+++ b/front/src/views/newHome/components/Navigation.vue
@ -80,26 +80,32 @@
            <a-select
              ref="select"
              style="width: 1.4rem; height: 0.4rem"
-              v-for="item in fabubumen"
-              :key="item"
-              v-model="item.value"
              placeholder="请选择省份"
              @change="qushijiedao"
+              :key="fabubumen"
+            >
+              <a-select-option
+                :value="item.name"
+                v-model="item.value"
+                v-for="item in fabubumen"
+                :key="item"
              >
-              <a-select-option :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
            <a-select
              ref="select"
              style="width: 1.4rem; height: 0.4rem"
-              v-for="item in shi"
-              :key="item"
-              v-model:value="item.value"
              @change="qushijiedao"
              placeholder="请选择市"
+              :key="shi"
+            >
+              <a-select-option
+                :value="item.name"
+                v-model:value="item.value"
+                v-for="item in shi"
+                :key="item"
              >
-              <a-select-option :value="item.name">
                {{ item.name }}
              </a-select-option>
            </a-select>
@ -167,9 +173,9 @@
      id: '100001',
    },
  ])
-  let shi = ref(['请先选择省份'])
-  let qu = ref(['请先选择市'])
-  let jiedao = ref(['请先选择区'])
+  let shi = ref([])
+  let qu = ref([])
+  let jiedao = ref([])
  function qushijiedao(value) {
    let danwei = value.substr(-1)
    // name.substr(-1)
--- a/front/src/views/personalCenter/components/Collection.vue
+++ b/front/src/views/personalCenter/components/Collection.vue
@ -50,7 +50,7 @@
              >
                {{ item.name }}
              </span>
-              <span class="time">收藏时间：{{ item.createDate }}</span>
+              <span class="time">收藏时间：{{ item.updateDate }}</span>
              <svg
                t="1652233950228"
                class="icon"
@ -238,6 +238,7 @@
          type: val.resourceDTO.type,
          resourceId: val.resourceId,
          createDate: val.createDate,
+          updateDate: val.updateDate,
          description: val.resourceDTO.description,
          delFlag: val.resourceDTO.delFlag,
        }
--- a/front/src/views/personalCenter/components/PurchaseVehicle.vue
+++ b/front/src/views/personalCenter/components/PurchaseVehicle.vue
@ -97,7 +97,8 @@
                <a-list-item-meta
                  :description="
                    item.description ||
-                    (item.note1 &&
+                    (JSON.parse(item.note1) &&
+                      JSON.parse(item.note1)[0] &&
                      JSON.parse(item.note1)[0].channelName +
                        '等' +
                        JSON.parse(item.note1).length +
@ -107,9 +108,15 @@
                  style="position: relative"
                >
                  <template #title>
+                    <div>
                      <span
                        @click="
-                        showItem(item.resourceId, item.type, item.delFlag)
+                          showItem(
+                            item.resourceId,
+                            item.type,
+                            item.delFlag,
+                            item.note1
+                          )
                        "
                        style="cursor: pointer"
                        class="name"
@ -117,6 +124,32 @@
                        {{ item.resourceName }}
                      </span>
                      <span class="type">{{ item.type }}</span>
+                    </div>
+                    <span class="time">
+                      加购时间:{{ item.time }}
+                      <a-popconfirm
+                        title="是否删除该记录?"
+                        ok-text="是"
+                        cancel-text="否"
+                        @confirm="delOne(item)"
+                        @cancel="cancel"
+                      >
+                        <a-button
+                          type="primary"
+                          style="
+                            width: 0.7rem;
+                            height: 0.3rem;
+                            margin-left: 0.12rem;
+                            border-radius: 2px;
+                            background: #fff;
+                            color: #0558e1;
+                          "
+                          @click="del"
+                        >
+                          删除
+                        </a-button>
+                      </a-popconfirm>
+                    </span>
                    <svg
                      t="1652233950228"
                      class="icon"
@ -194,6 +227,24 @@
      </div>
    </div>
  </div>
+  <a-modal
+    v-model:visible="videoVisible"
+    title="已申请摄像头列表"
+    @ok="videoVisible = false"
+  >
+    <a-table
+      :columns="columns"
+      :data-source="xVideoList"
+      bordered
+      :pagination="{ defaultPageSize: 6 }"
+    >
+      <template #bodyCell="{ column, text }">
+        <!-- <template>
+        <a>{{ text }}</a>
+      </template> -->
+      </template>
+    </a-table>
+  </a-modal>
  <!-- <a-pagination
    v-model:current="pageNum"
    v-model:page-size="pageSize"
@ -225,6 +276,8 @@
  const pageNum = ref('1')
  const pageSize = ref('99999')
  // const pageSizeOptions = ref(['5', '10', '20'])
+  const videoVisible = ref(false)
+  const xVideoList = ref([])
  const total = ref(0)
  const load = ref(0)
  // 多选框
@ -234,6 +287,12 @@
  const checkAll = ref(false)
  const checkNum = ref(0)
  const showKey = ref(0)
+  const columns = ref([
+    {
+      title: '摄像头名称',
+      dataIndex: 'name',
+    },
+  ])
  // 筛选条件
  const name = ref('')
  const type = ref('')
@ -674,11 +733,34 @@
      })
    }
  }
+
+  const delOne = (item) => {
+    // console.log(item)
+    sgcDel({
+      ids: [item.id],
+    }).then((res) => {
+      if (res.data.msg === 'success') {
+        message.success('删除成功')
+        // console.log('删除申购车列表================>', res)
+        mybus.emit('getSgcNum')
+        clean()
+      }
+    })
+  }
  const cancel = (e) => {
    // console.log(e)
  }
  // 详情
-  const showItem = (id, type, delFlag) => {
+  const showItem = (id, type, delFlag, note1) => {
+    if (type == '基础设施') {
+      console.log()
+      let arr = JSON.parse(note1)
+      xVideoList.value = []
+      arr.map((val) => {
+        xVideoList.value.push({ name: val.channelName, key: val.channelId })
+      })
+      videoVisible.value = true
+    } else {
      if (delFlag == 0) {
        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
        mybus.emit('tabsChange', { flag: id })
@ -690,6 +772,7 @@
        })
      }
    }
+  }
  // 一键申请
  const apply = () => {
    // list.value.forEach((val) => {
@ -921,4 +1004,8 @@
    background: url('~@/assets/home/ywzj_square.png') no-repeat;
    background-size: 100%;
  }
+  :deep(.ant-list-item-meta-title) {
+    display: flex;
+    justify-content: space-between;
+  }
 </style>
--- a/front/src/views/personalCenter/components/addApplication.vue
+++ b/front/src/views/personalCenter/components/addApplication.vue
@ -9,83 +9,38 @@
        <div class="form-container">
          <div v-if="applySuccess">
            <div class="title">申请人信息</div>
-            <a-form
-              ref="formRef"
-              :model="formName"
-              name="basic"
-              :label-col="{ style: { width: '106px' } }"
-              :wrapper-col="{ style: { width: '230px' } }"
-              labelAlign="left"
-              autocomplete="off"
-            >
+            <a-form ref="formRef" :model="formName" name="basic" :label-col="{ style: { width: '106px' } }"
+              :wrapper-col="{ style: { width: '230px' } }" labelAlign="left" autocomplete="off">
              <div class="base-info">
-                <a-form-item
-                  label="申请人"
-                  name="applyUserName"
-                  :rules="[{ required: true, message: '请输入申请人' }]"
-                >
-                  <a-input
-                    placeholder="请输入申请人"
-                    v-model:value="formName.applyUserName"
-                  />
+                <a-form-item label="申请人" name="applyUserName" :rules="[{ required: true, message: '请输入申请人' }]">
+                  <a-input placeholder="请输入申请人" v-model:value="formName.applyUserName" />
                </a-form-item>

-                <a-form-item
-                  style="margin: 0 22px"
-                  label="申请人电话"
-                  name="applyUserPhone"
-                  :rules="[
+                <a-form-item style="margin: 0 22px" label="申请人电话" name="applyUserPhone" :rules="[
                  {
                    required: true,
                    pattern: /^1[3456789]\d{9}$/,
                    message: '请输入正确的电话号码',
                  },
-                  ]"
-                >
-                  <a-input
-                    placeholder="请输入申请人电话"
-                    v-model:value="formName.applyUserPhone"
-                  />
+                ]">
+                  <a-input placeholder="请输入申请人电话" v-model:value="formName.applyUserPhone" />
                </a-form-item>

-                <a-form-item
-                  label="申请单位"
-                  name="applyUserDeptName"
-                  :rules="[{ required: true, message: '请输入申请单位' }]"
-                >
-                  <a-input
-                    placeholder="请输入申请单位"
-                    v-model:value="formName.applyUserDeptName"
-                  />
+                <a-form-item label="申请单位" name="applyUserDeptName" :rules="[{ required: true, message: '请输入申请单位' }]">
+                  <a-input placeholder="请输入申请单位" v-model:value="formName.applyUserDeptName" />
                </a-form-item>
              </div>

              <div class="title">需求信息</div>

-              <a-form-item
-                style="margin-bottom: 10px"
-                label="需求标题"
-                name="demandSubject"
-                :rules="[{ required: true, message: '请输入需求标题' }]"
-              >
-                <a-input
-                  style="width: 350px"
-                  v-model:value="formName.demandSubject"
-                />
+              <a-form-item style="margin-bottom: 10px" label="需求标题" name="demandSubject"
+                :rules="[{ required: true, message: '请输入需求标题' }]">
+                <a-input style="width: 350px" v-model:value="formName.demandSubject" />
              </a-form-item>

-              <a-form-item
-                style="margin-bottom: 10px"
-                label="需求类型"
-                name="detailsType"
-                :rules="[{ required: true, message: '请选择需求类型' }]"
-              >
-                <a-select
-                  ref="select"
-                  v-model:value="formName.detailsType"
-                  @focus="focus"
-                  style="width: 200px"
-                >
+              <a-form-item style="margin-bottom: 10px" label="需求类型" name="detailsType"
+                :rules="[{ required: true, message: '请选择需求类型' }]">
+                <a-select ref="select" v-model:value="formName.detailsType" @focus="focus" style="width: 200px">
                  <a-select-option value="基础设施">基础设施</a-select-option>
                  <a-select-option value="数据资源">数据资源</a-select-option>
                  <a-select-option value="组件服务">组件服务</a-select-option>
@ -94,26 +49,14 @@
                </a-select>
              </a-form-item>

-              <a-form-item
-                label="应用领域"
-                name="detailsField"
-                style="width: 350px"
-                :rules="[{ required: true, message: '请输入应用领域' }]"
-              >
-                <a-input
-                  placeholder="请输入应用领域"
-                  v-model:value="formName.detailsField"
-                />
+              <a-form-item label="应用领域" name="detailsField" style="width: 350px"
+                :rules="[{ required: true, message: '请输入应用领域' }]">
+                <a-input placeholder="请输入应用领域" v-model:value="formName.detailsField" />
              </a-form-item>

-              <a-form-item
-                style="margin-bottom: 10px"
-                label="需求描述"
-                name="demandDetails"
-                :rules="[{ required: true, message: '请输入需求描述' }]"
-              >
-                <a-textarea
-                  style="
+              <a-form-item style="margin-bottom: 10px" label="需求描述" name="demandDetails"
+                :rules="[{ required: true, message: '请输入需求描述' }]">
+                <a-textarea style="
                    width: 500px;
                    height: 150px;
                    font-size: 16px;
@ -123,24 +66,12 @@
                    border-radius: 6px;
                    padding: 10px;
                    resize: none;
-                  "
-                  v-model:value="formName.demandDetails"
-                />
+                  " v-model:value="formName.demandDetails" />
              </a-form-item>
-              <a-form-item
-                style="color: #666; font-size: 16px"
-                label="附件上传"
-                name="applyDoc"
-              >
-                <a-upload
-                  v-model:file-list="fileList"
-                  name="file"
-                  :action="upLoadUrl"
-                  :headers="headers"
-                  @change="handleChange"
-                >
-                  <a-button
-                    style="
+              <a-form-item style="color: #666; font-size: 16px" label="附件上传" name="applyDoc">
+                <a-upload v-model:file-list="fileList" name="file" :action="upLoadUrl" :headers="headers"
+                  @change="handleChange">
+                  <a-button style="
                      width: 100px;
                      height: 30px;
                      margin-right: 10px;
@ -151,8 +82,7 @@
                      border: 1px solid #bbd3ef;
                      padding: 0;
                      text-align: center;
-                    "
-                  >
+                    ">
                    <upload-outlined></upload-outlined>
                    文件上传
                  </a-button>
@ -163,8 +93,7 @@
              </a-form-item>

              <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-                <a-button
-                  style="
+                <a-button style="
                    width: 80px;
                    height: 38px;
                    margin-right: 20px;
@ -175,15 +104,10 @@
                    border: none;
                    padding: 0;
                    text-align: center;
-                  "
-                  type="primary"
-                  html-type="cancle"
-                  @click="signOut"
-                >
+                  " type="primary" html-type="cancle" @click="signOut">
                  退出申请
                </a-button>
-                <a-button
-                  style="
+                <a-button style="
                    width: 80px;
                    height: 38px;
                    background: #0087ff;
@ -193,11 +117,7 @@
                    border: none;
                    padding: 0;
                    text-align: center;
-                  "
-                  type="primary"
-                  html-type="submit"
-                  @click="processStartHandle()"
-                >
+                  " type="primary" html-type="submit" @click="processStartHandle()">
                  提交申请
                </a-button>
              </a-form-item>
@ -296,10 +216,10 @@
      }

      if (info.file.status === 'done') {
-          message.success(`${info.file.name} file uploaded successfully`)
+        message.success(`${info.file.name} 文件上传成功`)
        formName.enclosure = info.file.response.data
      } else if (info.file.status === 'error') {
-          message.error(`${info.file.name} file upload failed.`)
+        message.error(`${info.file.name} 文件上传失败`)
      }
    }

@ -362,6 +282,7 @@
  margin: 90px auto 0;
  display: flex;
  justify-content: space-between;
+
  aside {
    width: 282px;
    height: 96%;
@ -369,6 +290,7 @@
    background-color: #fff;
    margin: 1% 0 3%;
  }
+
  article {
    width: 1090px;
    height: 99%;
@ -376,8 +298,10 @@
    background-color: #fff;
    margin: 5% auto;
  }
+
  .form-container {
    padding: 20px 20px 30px 20px;
+
    .title {
      font-size: 20px;
      color: #000;
@ -385,18 +309,22 @@
      margin-bottom: 20px;
    }
  }
+
  .base-info {
    display: flex;
  }
+
  :deep(.ant-form-item-label) {
    label {
      color: #666;
      font-size: 16px;
+
      &::after {
        content: '';
      }
    }
  }
+
  :deep(.ant-form-item-required) {
    &::before {
      font-size: 8px;
@ -408,11 +336,13 @@
    border: 1px solid #e0e0e0;
    border-radius: 6px;
  }
+
  .success {
    div {
      width: 100px;
      margin: 80px auto 40px;
    }
+
    text-align: center;
    font-size: 20px;
    font-weight: bold;