sl-sfy-safety/src/views/cameras/overview/CamerasOverview.vue

<template>
  <div class="camera-page">
    <ConditionQuery />
    <div class="camera-list">
      <div v-if="showActionBar" class="action-bar">
        <span class="num-text">已选{{ chooseNum }}项</span>
        <el-button :class="isActiveExport ? 'btn-active' : 'btn-normal'" @click="handleBatchExport"
          >导出</el-button
        >
        <el-button :class="isActiveDelete ? 'btn-active' : 'btn-normal'" @click="handleBatchDelete"
          >删除</el-button
        >
        <span class="close-btn" @click="handleSelectNone"></span>
      </div>
      <BasicTable
        :columns="columns"
        :data-source="cameraItems"
        :row-key="(row) => row.code"
        :action-column="actionColumn"
        :pagination="{
          total: total,
          currentPage: page,
          pageSize: size,
          hideOnSinglePage: !cameraItems.length,
        }"
        :loading="loading"
        :tableSetting="{
          size: false,
          redo: false,
          fullscreen: false,
          striped: false,
          setting: false,
        }"
        :striped="true"
        ref="tableRef"
        @order-change="orderByItem"
        @selection-change="handleSelectionChange"
        @page-num-change="handlePageNumChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #tableTitle>
          <el-button type="primary" :icon="Plus" @click="showAddPopover = true">添加</el-button>
          <el-button
            color="#1890FF"
            @click="showBatchImportPopover = true"
            style="margin-left: 18px"
            plain
          >
            <template #icon>
              <el-icon>
                <DocumentAdd />
              </el-icon>
            </template>
            批量添加
          </el-button>
          <el-button
            color="#1890FF"
            @click="showBatchEditPopover = true"
            style="margin-left: 18px"
            plain
          >
            <template #icon>
              <el-icon>
                <Edit />
              </el-icon>
            </template>
            批量修改
          </el-button>
          <el-badge :value="totalRow" :hidden="totalRow < 1" class="item">
            <el-button color="#1890FF" @click="showSharedPopover = true" plain>共享相机</el-button>
          </el-badge>
        </template>
        <template #empty>
          <div class="empty-content flex flex-col items-center">
            <img :src="emptyImg" class="empty-img" />
            <span class="empty-text">目前无内容，请先添加相机</span>
          </div>
        </template>
      </BasicTable>
    </div>
    <AddCamera class="add-popover" v-model="showAddPopover" />
    <BatchImportCamera
      class="batch-import"
      v-if="showBatchImportPopover"
      @update="handleUpdateBatchImport"
      @close="handleCloseBatchImport"
    />
    <BatchEditCamera
      class="batch-import"
      v-if="showBatchEditPopover"
      @update="handleUpdateBatchEdit"
      @close="handleCloseBatchEdit"
    />
    <EditCamera class="add-popover" v-model="showEditPopover" :edit-data="editCameraData" />
    <EditSRSCamera class="add-popover" v-model="showEditSRSPopover" :edit-data="editCameraData" />
    <EditNVRCamera class="add-popover" v-model="showEditNVRPopover" :edit-data="editCameraData" />
    <ShareCamera class="add-popover" v-model="addSharedPopover" :share-data="shareCameraData" />
    <EditSharedCamera
      class="add-popover"
      v-model="showSharedPopover"
      @update-unadd="updateUnaddAmount"
    />
  </div>
</template>

<script setup lang="ts">
  import { h, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
  import { BasicTable, TableActionIcons } from '@/components/Table';
  import { BasicColumn } from '@/components/Table';
  import { columns } from './hooks/overviewColumns';
  import ConditionQuery from './components/ConditionQuery.vue';
  import AddCamera from './components/CameraAddPopover.vue';
  import BatchImportCamera from './components/BatchImportCamera.vue';
  import BatchEditCamera from './components/BatchEditCamera.vue';
  import ShareCamera from './components/CameraSharePopover.vue';
  import EditCamera from './components/CameraEditPopover.vue';
  import EditSRSCamera from './components/CameraEditSRSPopover.vue';
  import EditNVRCamera from './components/CameraEditNVRPopover.vue';
  import EditSharedCamera from './components/CameraSharedEdit.vue';
  import emptyImg from '@/assets/images/table/table-empty.png';
  import { Plus, DocumentAdd, Edit } from '@element-plus/icons-vue';
  import shareIcon from '@/assets/images/table/table-share.png';
  import previewIcon from '@/assets/images/table/table-preview.png';
  import editIcon from '@/assets/images/table/table-edit.png';
  import deleteIcon from '@/assets/images/table/table-delete.png';
  import useCameraOverview from './stores/useCameraOverview';
  import { storeToRefs } from 'pinia';
  import { CameraDetailServer } from '@/types/camera/type';
  import { deleteCameraItem, deleteCameraItems } from '@/api/camera/camera-overview';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import useCameraShare from './hooks/useCameraShare';
  import router from '@/router';
  import { AddType } from '@/types/camera/constant';
  import axios, { AxiosRequestConfig } from 'axios';
  import { getHeaders } from '@/utils/http/axios';
  import { useGlobSetting } from '@/hooks/setting';
  import { useSceneTemplateList } from './stores/useSceneTemplateList';

  const sceneTemplateListInfo = useSceneTemplateList();
  const { getSceneTemplateList } = sceneTemplateListInfo;

  const { urlPrefix } = useGlobSetting();

  const useShare = useCameraShare();
  const { totalRow, queryToTenantId, isAddState, conditionSearch } = useShare;

  onMounted(() => {
    isAddState.value = false;
    console.log('isAddState', isAddState.value);
    queryToTenantId.value = -10;
    conditionSearch();
  });

  const cameraOverview = useCameraOverview();
  const { cameraItems, loading, total, page, size } = storeToRefs(cameraOverview);
  const { getCameraItems, openInterval, closeInterval, reset } = cameraOverview;

  const tableRef = ref();
  // 添加弹窗相关
  const showAddPopover = ref(false);
  // 批量添加弹窗
  const showBatchImportPopover = ref(false);
  // 批量删除弹窗
  const showBatchEditPopover = ref(false);
  const showSharedPopover = ref(false);
  const addSharedPopover = ref(false);
  const showEditPopover = ref(false);
  const showEditSRSPopover = ref(false);
  const showEditNVRPopover = ref(false);
  const editCameraData = ref<CameraDetailServer>();
  const shareCameraData = ref<CameraDetailServer | null>();
  // 多选操作
  const showActionBar = ref(false);
  const chooseNum = ref(0);
  const chooseId = ref<number[]>([]);
  const isActiveExport = ref(false);
  const isActiveDelete = ref(false);

  const updateUnaddAmount = () => {
    isAddState.value = false;
    console.log('isAddState', isAddState.value);
    queryToTenantId.value = -10;
    conditionSearch();
  };

  //操作列
  const actionColumn: BasicColumn = reactive({
    width: 200,
    title: '操作',
    prop: 'action',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableActionIcons as any, {
        space: 20,
        color: '#629bf9',
        style: 'img',
        size: 16,
        actionIcons: [
          {
            label: '分享',
            icon: shareIcon,
            onClick: handleShare.bind(null, record.row),
          },
          {
            label: '预览',
            icon: previewIcon,
            onClick: handlePreview.bind(null, record.row),
          },
          {
            label: '编辑',
            icon: editIcon,
            onClick: handleEdit.bind(null, record.row),
          },
          {
            label: '删除',
            icon: deleteIcon,
            onClick: handleDelete.bind(null, record.row),
          },
        ],
      });
    },
  });

  // 列排序操作
  const orderByItem = () => {};

  // 多选操作
  const handleSelectionChange = (selection) => {
    chooseNum.value = selection.length;
    showActionBar.value = chooseNum.value > 0 ? true : false;
    chooseId.value = [];
    selection.forEach((item) => {
      if (chooseId.value.indexOf(item.id) === -1) chooseId.value.push(item.id);
    });
  };

  const handleBatchExport = async () => {
    try {
      const requestBody = {
        cameraIdList: chooseId.value,
      };

      const config: AxiosRequestConfig = {
        headers: getHeaders(),
        responseType: 'blob',
      };
      const response = await axios.post(
        urlPrefix + '/addCameraList/downloadCameraList',
        requestBody,
        config,
      );
      const blob = new Blob([response.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      // 创建下载链接
      let downloadLink: HTMLAnchorElement | null = document.createElement('a');
      const url = window.URL.createObjectURL(blob);
      downloadLink.href = url;
      downloadLink.download = '相机导出信息.xlsx';
      downloadLink.click();
      // 移除下载链接
      window.URL.revokeObjectURL(url);
      downloadLink = null;
    } catch (error) {
      console.error('Error downloading file:', error);
    }
  };

  const handleBatchDelete = () => {
    if (showActionBar.value) isActiveDelete.value = !isActiveDelete.value;
    ElMessageBox.confirm('删除后，相机数据无法恢复', '请确认是否删除相机数据', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'deleteMessage',
      center: true,
    })
      .then(() => {
        deleteCameraItems(chooseId.value).then(() => {
          ElMessage({
            type: 'success',
            message: '删除成功',
          });
          page.value = 1;
          getCameraItems();
          handleSelectNone();
          isActiveDelete.value = !isActiveDelete.value;
        });
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        });
        isActiveDelete.value = !isActiveDelete.value;
      });
  };

  // 清除多选
  const handleSelectNone = () => {
    chooseId.value = [];
    chooseNum.value = 0;
    tableRef.value?.clearAll();
    showActionBar.value = false;
  };

  const handlePageNumChange = (pageNum) => {
    page.value = pageNum;
    getCameraItems();
  };

  const handlePageSizeChange = (pageSize) => {
    page.value = 1;
    size.value = pageSize;
    getCameraItems();
  };

  const handleShare = (row) => {
    addSharedPopover.value = true;
    shareCameraData.value = row;
  };

  const handlePreview = (_row) => {
    router.push(`/cameras/preview?cameraId=${_row.id}`);
  };

  const handleDelete = (row) => {
    ElMessageBox.confirm(`您想删除相机${row.code}`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(() => {
        deleteCameraItem({ cameraId: row.id }).then(() => {
          ElMessage.success('删除成功');

          getCameraItems();
        });
      })
      .catch(() => {});
  };

  const handleEdit = (row) => {
    if (row.sourceType === AddType.srs) {
      showEditSRSPopover.value = true;
    } else if (row.sourceType === AddType.ip) {
      showEditPopover.value = true;
    } else {
      showEditNVRPopover.value = true;
    }
    editCameraData.value = row;
  };

  // 批量导入相关事件
  const handleUpdateBatchImport = () => {
    showBatchImportPopover.value = false;
    page.value = 1;
    size.value = 10;
    getCameraItems();
  };
  const handleCloseBatchImport = () => {
    showBatchImportPopover.value = false;
  };

  // 批量修改相关事件
  const handleUpdateBatchEdit = () => {
    showBatchEditPopover.value = false;
    page.value = 1;
    size.value = 10;
    getCameraItems();
  };
  const handleCloseBatchEdit = () => {
    showBatchEditPopover.value = false;
  };

  onMounted(() => {
    getCameraItems();
    openInterval();
    getSceneTemplateList();
  });

  onBeforeUnmount(() => {
    closeInterval();
    reset();
  });
</script>

<style scoped lang="less">
  .action-bar {
    display: flex;
    align-items: center;
    position: absolute;
    top: 48px;
    min-width: calc(100vw - 266px);
    height: 50px;
    border-radius: 4px 4px 0px 0px;
    background-color: #ddefff;
    z-index: 10;

    .num-text {
      margin: 0 34px 0 25px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
    }

    .btn-normal {
      color: #1890ff;
      background: transparent;
      border: 1px solid #1890ff;
      border-radius: 2px;
    }

    .btn-active {
      color: #ffffff;
      background-color: #1890ff;
    }

    .close-btn {
      margin-left: auto;
      margin-right: 20px;
    }

    .close-btn:before {
      content: '\2716';
      color: #000;
      cursor: pointer;
    }
  }

  .camera-page {
    position: relative;
    height: calc(100vh - 64px - 12px);
    background-color: #ffffff;
  }

  .camera-list {
    padding: 0 21px;
    position: relative;
  }

  .empty-content {
    margin: auto;
    padding: 125px 0;
  }

  .empty-img {
    width: 396px;
  }

  .empty-text {
    font-size: 22px;
    color: #8e8e8e;
    line-height: 30px;
    text-align: center;
  }

  .add-tip {
    position: absolute;
    left: 187px;
    top: 64px;
    font-size: 16px;
    color: red;
  }

  .add-popover {
    position: absolute;
    width: calc(100% - 21px);
    height: 622px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;
  }

  .batch-import {
    position: absolute;
    width: 593px;
    height: 435px;
    left: 50%;
    top: 50%;
    margin-top: -218px;
    margin-left: -297px;
    z-index: 99;
  }

  .item {
    margin: 0px 40px 0px 15px;
  }
</style>
<style lang="less">
  .deleteMessage {
    padding: 20px 24px;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05),
      0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;

    .el-message-box__headerbtn {
      margin-top: 12px;
      margin-right: 12px;
    }

    .el-message-box__title {
      justify-content: start;
      color: rgba(0, 0, 0, 0.88);
      font-size: 16px;
      font-weight: 500;
    }

    .el-message-box__container {
      justify-content: start;
      margin-left: 23px;
    }

    .el-message-box__btns {
      display: block;
      float: right;
    }
  }
</style>