318摄像头列表弹窗bug修改

front/src/views/home/AbilityToApplyFor.vue

@@ -5,20 +5,14 @@
       <span class="btn" @click="falg = !falg" v-show="!falg">展开</span>
       <span class="btn" @click="falg = !falg" v-show="falg">收起</span>
     </div>
-    <div
+    <div v-for="(item, index) in dataForm" :key="index" class="ability-to-apply-for-content">
-      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
+          <div class="tx" :class="
-            class="tx"
-            :class="
             val.type == '基础设施'
               ? 'sxt'
               : val.componentType == '智能算法'
@@ -30,11 +24,14 @@
                     : val.componentType == '业务组件'
                       ? 'ywzj'
                       : ''
-            "
+          "></div>
-          ></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">
@@ -54,34 +51,53 @@
       </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 { useRouter } from 'vue-router'
-  import { message } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
-  import { ref, defineProps } from 'vue'
+import { ref, defineProps } from 'vue'
-  // import mybus from '@/myplugins/mybus'
+import mybus from '@/myplugins/mybus'
-  const props = defineProps({
+const router = useRouter()
+const props = defineProps({
   dataList: { type: Array, default: null },
-  })
+})
-  const falg = ref(false)
+const falg = ref(false)
-  let dataForm = ref([])
+let dataForm = ref([])
-  // eslint-disable-next-line vue/no-setup-props-destructure
+const videoVisible = ref(false)
-  dataForm.value = props.dataList
+const xVideoList = ref([])
-  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({
+const columns = ref([
-  //   Name: [],
+  {
-  //   depID: [],
+    title: '摄像头名称',
-  // })
+    dataIndex: 'name',
-  //移除方法
+  },
-  const removeFunction = (data) => {
+])
+// 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)
@@ -90,13 +106,36 @@
     }
   })
   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 })
+    })
+    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 {
+.ability-to-apply-for {
   height: 2.9rem;
   overflow: hidden;
+
   .title {
     font-size: 0.16rem;
     color: #212121;
@@ -106,9 +145,11 @@
     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;
@@ -116,6 +157,7 @@
       align-items: center;
       line-height: 0.22rem;
       margin-bottom: 0.2rem;
+
       span {
         display: inline-block;
         width: 0.05rem;
@@ -125,25 +167,30 @@
         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;
@@ -151,10 +198,12 @@
         color: #fff;
       }
     }
+
     .description {
       width: 8.8rem;
       color: rgba(0, 0, 0, 0.45);
     }
+
     .remove {
       margin-left: 0.1rem;
       width: 0.32rem;
@@ -163,43 +212,52 @@
       background-size: cover;
       cursor: pointer;
     }
+
     .remove:hover {
       background: url('~@/assets/home/remove-hover.png') no-repeat;
       background-size: cover;
     }
   }
-  }
+}
-  .all {
+
+.all {
   height: unset;
   min-height: 2.9rem;
-  }
+}
-  .btn {
+
+.btn {
   cursor: pointer;
-  }
+}
-  .tx {
+
+.tx {
   display: inline-block;
   width: 0.8rem;
   height: 0.8rem;
   margin-left: 0.1rem;
-  }
+}
-  .sxt {
+
+.sxt {
   background: url('~@/assets/home/sxt_square.png') no-repeat;
   background-size: 100%;
-  }
+}
-  .znsf {
+
+.znsf {
   background: url('~@/assets/home/znsf_square.png') no-repeat;
   background-size: 100%;
-  }
+}
-  .tcfw {
+
+.tcfw {
   background: url('~@/assets/home/tcfw_square.png') no-repeat;
   background-size: 100%;
-  }
+}
-  .kfzj {
+
+.kfzj {
   background: url('~@/assets/home/kfzj_square.png') no-repeat;
   background-size: 100%;
-  }
+}
-  .ywzj {
+
+.ywzj {
   background: url('~@/assets/home/ywzj_square.png') no-repeat;
   background-size: 100%;
-  }
+}
 </style>