hi-ucs/front/src/views/home/infrastructureApplication.vue

<!--
 * @Author: Light
 * @Date: 2022-11-18 11:53:43
 * @LastEditors: Light
 * @LastEditTime: 2022-11-19 17:15:15
 * @Description: 告诉大家这是什么
-->
<template>
  <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>
  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>