From 71eae6deebf8e2f4a21642a528325ff09c754d3c Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Wed, 6 Jul 2022 18:15:58 +0800
Subject: [PATCH] =?UTF-8?q?318=E6=91=84=E5=83=8F=E5=A4=B4=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=BC=B9=E7=AA=97bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/views/home/AbilityToApplyFor.vue | 372 ++++++++++++---------
 1 file changed, 215 insertions(+), 157 deletions(-)

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>