diff --git a/front/src/main.js b/front/src/main.js
index 8cd80605..a24e5800 100644
--- a/front/src/main.js
+++ b/front/src/main.js
@@ -51,3 +51,9 @@ router.beforeEach((to, from, next) => {
   document.body.scrollTop = 0
   next()
 })
+// 解决bug：页面/路由跳转后，滚动条消失，页面无法滚动
+router.afterEach((to, from, next) => {
+  document
+    .querySelector('body')
+    .setAttribute('style', 'overflow: auto !important;')
+})
diff --git a/front/src/views/capabilityCloud/components/ComponentServices.vue b/front/src/views/capabilityCloud/components/ComponentServices.vue
index 2c6dc034..ae100a9f 100644
--- a/front/src/views/capabilityCloud/components/ComponentServices.vue
+++ b/front/src/views/capabilityCloud/components/ComponentServices.vue
@@ -174,7 +174,7 @@
     } else {
       for (let i = 0; i < 31; i++) {
         let time = moment()
-          .subtract('days', 30 - i)
+          .subtract('days', 29 - i)
           .format('MM-DD')
         callTheTrendData.value.time.push(time)
         console.log('time', callTheTrendData.value, name)
@@ -186,14 +186,23 @@
       if (!xinhaianIsShow) {
         callTheTrendPort(start, end, 86400).then((res) => {
           if (res.data.data.result) {
-            // res.data.data.result.splice(0, 1)
             callTheTrendData.value.snum = []
             res.data.data.result[0].values.map((item) => {
-              callTheTrendData.value.snum.push(
-                moment(item[0] * 1000).format('MM-DD')
-              )
               callTheTrendData.value.snum.push(parseInt(item[1]))
             })
+            if (res.data.data.result[0].values.length < 30) {
+              for (
+                let i = 0;
+                i < 30 - res.data.data.result[0].values.length;
+                i++
+              ) {
+                callTheTrendData.value.snum.push(0)
+              }
+            }
+            console.log(
+              'callTheTrendData.value.snum',
+              callTheTrendData.value.snum
+            )
             callTheTrend(callTheTrendData.value)
           } else {
             for (let i = 0; i < 30; i++) {
diff --git a/front/src/views/home/AbilityToApplyFor.vue b/front/src/views/home/AbilityToApplyFor.vue
index 84b73888..57d4eabf 100644
--- a/front/src/views/home/AbilityToApplyFor.vue
+++ b/front/src/views/home/AbilityToApplyFor.vue
@@ -5,47 +5,44 @@
       <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
       <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
     </div>
-    <div
-      v-for="(item, index) in dataForm"
-      :key="index"
-      class="ability-to-apply-for-content"
-    >
+    <div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content">
       <div class="dep-name">
         <span></span>
         {{ item.deptName }}
       </div>
       <template v-for="val in item.arr" :key="val.resourceId">
         <div class="item">
-          <div
-            class="tx"
-            :class="
-              val.type == '基础设施'
-                ? 'sxt'
-                : val.componentType == '智能算法'
+          <div class="tx" :class="
+            val.type == '基础设施'
+              ? 'sxt'
+              : val.componentType == '智能算法'
                 ? 'znsf'
                 : val.componentType == '图层服务'
-                ? 'tcfw'
-                : val.componentType == '开发组件'
-                ? 'kfzj'
-                : val.componentType == '业务组件'
-                ? 'ywzj'
-                : ''
-            "
-          ></div>
+                  ? 'tcfw'
+                  : val.componentType == '开发组件'
+                    ? 'kfzj'
+                    : val.componentType == '业务组件'
+                      ? 'ywzj'
+                      : ''
+          "></div>
           <div class="text">
             <div class="name">
-              <span>{{ val.resourceName }}</span>
+              <span @click="
+                showItem(val.resourceId, val.type, val.delFlag, val.note1)
+              " style="cursor: pointer">
+                {{ val.resourceName }}
+              </span>
               <span>{{ val.type }}</span>
             </div>
             <div class="description">
               {{
-                val.description ||
-                (val.note1 &&
-                  JSON.parse(val.note1)[0].channelName +
+                  val.description ||
+                  (val.note1 &&
+                    JSON.parse(val.note1)[0].channelName +
                     '等' +
                     JSON.parse(val.note1).length +
                     '个摄像头') ||
-                '--'
+                  '--'
               }}
             </div>
           </div>
@@ -54,152 +51,213 @@
       </template>
     </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>
 </template>
 
 <script setup>
-  // import { useRouter } from 'vue-router'
-  import { message } from 'ant-design-vue'
-  import { ref, defineProps } from 'vue'
-  // import mybus from '@/myplugins/mybus'
-  const props = defineProps({
-    dataList: { type: Array, default: null },
-  })
-  const falg = ref(false)
-  let dataForm = ref([])
-  // eslint-disable-next-line vue/no-setup-props-destructure
-  dataForm.value = props.dataList
-  console.log(dataForm.value)
-  // const router = useRouter()
-  // const arr =
-  //   router.currentRoute.value.query.name instanceof Array
-  //     ? router.currentRoute.value.query.name
-  //     : [router.currentRoute.value.query.name]
-  // const dataResourceId = router.currentRoute.value.query.resourceId
+import { useRouter } from 'vue-router'
+import { message } from 'ant-design-vue'
+import { ref, defineProps } from 'vue'
+import mybus from '@/myplugins/mybus'
+const router = useRouter()
+const props = defineProps({
+  dataList: { type: Array, default: null },
+})
+const falg = ref(false)
+let dataForm = ref([])
+const videoVisible = ref(false)
+const xVideoList = ref([])
 
-  // const depList = ref({
-  //   Name: [],
-  //   depID: [],
-  // })
-  //移除方法
-  const removeFunction = (data) => {
-    dataForm.value.map((val) => {
-      if (val.arr.length > 1) {
-        val.arr = val.arr.filter((item) => item.id !== data.id)
-      } else {
-        message.error('至少需要提交一条能力申请！')
-      }
+const columns = ref([
+  {
+    title: '摄像头名称',
+    dataIndex: 'name',
+  },
+])
+// eslint-disable-next-line vue/no-setup-props-destructure
+dataForm.value = props.dataList
+console.log(dataForm.value)
+// const router = useRouter()
+// const arr =
+//   router.currentRoute.value.query.name instanceof Array
+//     ? router.currentRoute.value.query.name
+//     : [router.currentRoute.value.query.name]
+// const dataResourceId = router.currentRoute.value.query.resourceId
+
+// const depList = ref({
+//   Name: [],
+//   depID: [],
+// })
+//移除方法
+const removeFunction = (data) => {
+  dataForm.value.map((val) => {
+    if (val.arr.length > 1) {
+      val.arr = val.arr.filter((item) => item.id !== data.id)
+    } else {
+      message.error('至少需要提交一条能力申请！')
+    }
+  })
+  dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
+}
+// 详情
+const showItem = (id, type, delFlag, note1) => {
+  if (type == '基础设施') {
+    let arr = JSON.parse(note1)
+    xVideoList.value = []
+    arr.map((val) => {
+      xVideoList.value.push({ name: val.channelName, key: val.channelId })
     })
-    dataForm.value = dataForm.value.filter((val) => val.arr.length !== 0)
+    videoVisible.value = true
+  } else {
+    if (delFlag == 0) {
+      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+      mybus.emit('tabsChange', { flag: id })
+      router.push({
+        path: '/details',
+        query: {
+          id: id,
+        },
+      })
+    }
   }
+}
 </script>
 
 <style scoped lang="less">
-  .ability-to-apply-for {
-    height: 2.9rem;
-    overflow: hidden;
-    .title {
-      font-size: 0.16rem;
-      color: #212121;
-      border-bottom: 0.01rem #dddee1 solid;
-      padding-bottom: 0.1rem;
-      margin-bottom: 0.2rem;
+.ability-to-apply-for {
+  height: 2.9rem;
+  overflow: hidden;
+
+  .title {
+    font-size: 0.16rem;
+    color: #212121;
+    border-bottom: 0.01rem #dddee1 solid;
+    padding-bottom: 0.1rem;
+    margin-bottom: 0.2rem;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .ability-to-apply-for-content {
+    padding-right: 0.5rem;
+    position: relative;
+
+    .dep-name {
+      color: #0558e1;
+      font-size: 0.22rem;
       display: flex;
-      justify-content: space-between;
+      align-items: center;
+      line-height: 0.22rem;
+      margin-bottom: 0.2rem;
+
+      span {
+        display: inline-block;
+        width: 0.05rem;
+        height: 0.05rem;
+        background: #0558e1;
+        border-radius: 0.05rem;
+        margin-right: 0.05rem;
+      }
     }
-    .ability-to-apply-for-content {
-      padding-right: 0.5rem;
-      position: relative;
-      .dep-name {
-        color: #0558e1;
-        font-size: 0.22rem;
-        display: flex;
-        align-items: center;
-        line-height: 0.22rem;
-        margin-bottom: 0.2rem;
-        span {
-          display: inline-block;
-          width: 0.05rem;
-          height: 0.05rem;
-          background: #0558e1;
-          border-radius: 0.05rem;
-          margin-right: 0.05rem;
-        }
-      }
-      .item {
-        padding-bottom: 0.1rem;
-        margin-bottom: 0.1rem;
-        border-bottom: 1px solid #dddee1;
-        display: flex;
-        align-items: center;
-        .text {
-          margin-left: 0.2rem;
-          width: 8.8rem;
-        }
-      }
-      .name {
-        margin-bottom: 0.2rem;
-        span:first-child {
-          display: inline-block;
-          margin-right: 0.08rem;
-          font-size: 0.18rem;
-          color: #000000;
-        }
-        span:last-child {
-          display: inline-block;
-          padding: 0 0.05rem;
-          background: #00b8e6;
-          color: #fff;
-        }
-      }
-      .description {
+
+    .item {
+      padding-bottom: 0.1rem;
+      margin-bottom: 0.1rem;
+      border-bottom: 1px solid #dddee1;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 0.2rem;
         width: 8.8rem;
-        color: rgba(0, 0, 0, 0.45);
-      }
-      .remove {
-        margin-left: 0.1rem;
-        width: 0.32rem;
-        height: 0.32rem;
-        background: url('~@/assets/home/remove.png') no-repeat;
-        background-size: cover;
-        cursor: pointer;
-      }
-      .remove:hover {
-        background: url('~@/assets/home/remove-hover.png') no-repeat;
-        background-size: cover;
       }
     }
+
+    .name {
+      margin-bottom: 0.2rem;
+
+      span:first-child {
+        display: inline-block;
+        margin-right: 0.08rem;
+        font-size: 0.18rem;
+        color: #000000;
+      }
+
+      span:last-child {
+        display: inline-block;
+        padding: 0 0.05rem;
+        background: #00b8e6;
+        color: #fff;
+      }
+    }
+
+    .description {
+      width: 8.8rem;
+      color: rgba(0, 0, 0, 0.45);
+    }
+
+    .remove {
+      margin-left: 0.1rem;
+      width: 0.32rem;
+      height: 0.32rem;
+      background: url('~@/assets/home/remove.png') no-repeat;
+      background-size: cover;
+      cursor: pointer;
+    }
+
+    .remove:hover {
+      background: url('~@/assets/home/remove-hover.png') no-repeat;
+      background-size: cover;
+    }
   }
-  .all {
-    height: unset;
-    min-height: 2.9rem;
-  }
-  .btn {
-    cursor: pointer;
-  }
-  .tx {
-    display: inline-block;
-    width: 0.8rem;
-    height: 0.8rem;
-    margin-left: 0.1rem;
-  }
-  .sxt {
-    background: url('~@/assets/home/sxt_square.png') no-repeat;
-    background-size: 100%;
-  }
-  .znsf {
-    background: url('~@/assets/home/znsf_square.png') no-repeat;
-    background-size: 100%;
-  }
-  .tcfw {
-    background: url('~@/assets/home/tcfw_square.png') no-repeat;
-    background-size: 100%;
-  }
-  .kfzj {
-    background: url('~@/assets/home/kfzj_square.png') no-repeat;
-    background-size: 100%;
-  }
-  .ywzj {
-    background: url('~@/assets/home/ywzj_square.png') no-repeat;
-    background-size: 100%;
-  }
+}
+
+.all {
+  height: unset;
+  min-height: 2.9rem;
+}
+
+.btn {
+  cursor: pointer;
+}
+
+.tx {
+  display: inline-block;
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-left: 0.1rem;
+}
+
+.sxt {
+  background: url('~@/assets/home/sxt_square.png') no-repeat;
+  background-size: 100%;
+}
+
+.znsf {
+  background: url('~@/assets/home/znsf_square.png') no-repeat;
+  background-size: 100%;
+}
+
+.tcfw {
+  background: url('~@/assets/home/tcfw_square.png') no-repeat;
+  background-size: 100%;
+}
+
+.kfzj {
+  background: url('~@/assets/home/kfzj_square.png') no-repeat;
+  background-size: 100%;
+}
+
+.ywzj {
+  background: url('~@/assets/home/ywzj_square.png') no-repeat;
+  background-size: 100%;
+}
 </style>