西海岸 待申请列表相关开发

front/src/api/home.js

@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 19:19:40
  * @LastEditors: Light
- * @LastEditTime: 2022-11-18 14:09:20
+ * @LastEditTime: 2022-11-19 14:53:29
  * @Description: 告诉大家这是什么
  */
 import request from '@/utils/request'
@@ -533,3 +533,26 @@ export function getPolicyCloudService(data) {
     data,
   })
 }
+// 西海岸基础设施待申请列表
+export function willApplyCameraSelect() {
+  return request({
+    url: '/willApplyCamera/select',
+    method: 'get',
+  })
+}
+// 西海岸基础设施待申请列表新增
+export function willApplyCameraBatchInsert(data) {
+  return request({
+    url: '/willApplyCamera/batchInsert',
+    method: 'post',
+    data,
+  })
+}
+// 西海岸基础设施待申请列表删除
+export function willApplyCameraBatchDelete(data) {
+  return request({
+    url: '/willApplyCamera/batchDelete',
+    method: 'post',
+    data,
+  })
+}

front/src/views/home/infrastructureApplication.vue

@@ -2,11 +2,177 @@
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
  * @LastEditors: Light
- * @LastEditTime: 2022-11-18 11:54:11
+ * @LastEditTime: 2022-11-19 17:15:15
  * @Description: 告诉大家这是什么
 -->
 <template>
-  <div>基础设施申请</div>
+  <div class="infrastructureApplication">
+    <div class="top">
+      <a-list size="small" bordered :data-source="dataList.toBeApplied">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <div class="name">
+              <a-tooltip>
+                <template #title>{{ item.channelName }}</template>
+                {{ item.channelName }}
+              </a-tooltip>
+            </div>
+            <a-button type="link" danger @click="delWillApplyCamera(item.id)">
+              移出
+            </a-button>
+          </a-list-item>
+        </template>
+        <template #header>
+          <div class="title">待申请列表</div>
+        </template>
+        <template #footer>
+          <a-button type="primary">一键申请</a-button>
+        </template>
+      </a-list>
+    </div>
+    <div class="bottom">
+      <a-list size="small" bordered :data-source="data">
+        <template #renderItem="{ item }">
+          <a-list-item>
+            <div class="name">
+              <a-tooltip>
+                <template #title>{{ item }}</template>
+                {{ item }}
+              </a-tooltip>
+            </div>
+            <a-button type="link" danger>删除</a-button>
+          </a-list-item>
+        </template>
+        <template #header>
+          <div class="title">已申请列表</div>
+        </template>
+      </a-list>
+    </div>
+  </div>
 </template>
-<script setup></script>
-<style lang="less" scoped></style>
+<script setup>
+  import {
+    willApplyCameraSelect,
+    willApplyCameraBatchInsert,
+    willApplyCameraBatchDelete,
+  } from '@/api/home'
+  import { onBeforeUnmount, reactive, ref } from 'vue'
+  import { message } from 'ant-design-vue'
+  import mybus from '@/myplugins/mybus'
+  const dataList = reactive({ toBeApplied: [], requested: [] })
+  // 待办
+  const addWacFlag = ref(true)
+  const delWacFlag = ref(true)
+  const delWillApplyCamera = (id) => {
+    console.log('删除===>', id)
+    if (delWacFlag.value) {
+      delWacFlag.value = false
+      willApplyCameraBatchDelete([id]).then((res) => {
+        if (res.data.code == 0) {
+          message.success('移出成功')
+        } else {
+          message.warning('移出失败')
+        }
+        init()
+      })
+    }
+  }
+  const init = () => {
+    willApplyCameraSelect().then((res) => {
+      if (res.data.code == 0) {
+        dataList.toBeApplied = res.data.data
+        delWacFlag.value = true
+        addWacFlag.value = true
+      } else {
+        message.warning('查询失败')
+        dataList.toBeApplied = []
+      }
+    })
+  }
+  init()
+  mybus.on('selectCamera', (obj) => {
+    // 判断最多10条
+    if (dataList.toBeApplied.length + dataList.requested.length > 10) {
+      message.warning('最多只能申请10个摄像头！')
+      return
+    }
+    // 判断是否已操作
+    let addFlag = true
+    dataList.toBeApplied.map((val) => {
+      if (addFlag && val.channelId == obj.channelId) {
+        addFlag = false
+      }
+    })
+    dataList.requested.map((val) => {
+      if (addFlag && val.channelId == obj.channelId) {
+        addFlag = false
+      }
+    })
+    if (addWacFlag.value) {
+      if (addFlag) {
+        addWacFlag.value = false
+        willApplyCameraBatchInsert([obj]).then((res) => {
+          if (res.data.code == 0) {
+            message.success('移入成功')
+          } else {
+            message.warning('移入失败')
+          }
+          init()
+        })
+      } else {
+        message.warning('已申请该摄像头！')
+      }
+    }
+  })
+  onBeforeUnmount(() => {
+    mybus.off('selectCamera')
+  })
+
+  const data = [
+    'Racing car sprays burning fuel into crowd.',
+    'Japanese princess to wed commoner.',
+    'Australian walks 100km after outback crash.',
+    'Man charged over missing wedding girl.',
+    'Los Angeles battles huge wildfires.',
+    'Racing car sprays burning fuel into crowd.',
+    'Japanese princess to wed commoner.',
+    'Australian walks 100km after outback crash.',
+    'Man charged over missing wedding girl.',
+    'Los Angeles battles huge wildfires.',
+  ]
+</script>
+<style lang="less" scoped>
+  .infrastructureApplication {
+    background: #fff;
+    position: fixed;
+    top: 50%;
+    right: 0.16rem;
+    margin-top: -3.5rem;
+    .bottom {
+      margin-top: 32px;
+    }
+    .title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .name {
+      width: 150px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      word-break: break-all;
+    }
+    :deep(.ant-list-footer) {
+      display: flex;
+      justify-content: flex-end;
+    }
+    :deep(.ant-list-items) {
+      height: 2.45rem;
+      overflow-y: scroll;
+    }
+    :deep(.ant-spin-nested-loading) {
+      height: 2.45rem;
+    }
+  }
+</style>