sl-sfy-safety/src/views/cameras/preview/components/CameraConfigGroup/CameraConfigGroup.vue

<template>
  <div class="cameraConfigGroup">
     <el-card>
      <template #header>
        <el-button
          type="primary"
          @click="createGroupDialog = true"
          style="margin-top: 24px; margin-bottom: 16px; width: 138px"
        >
          <img src="@/assets/images/create.png" style="margin-top: -1px; margin-right: 5px" />新建相机分组
        </el-button>
      </template>
      <el-table
        :data="cameraGroupList"
        :span-method="objectSpanMethod"
        height="calc(100vh - 380px)"
        style="width: 100%; margin-top: 16px; --el-table-border-color: none"
        v-loading="loading"
      >
        <el-table-column prop="id" label="组序号"  width="70"/>
        <el-table-column prop="cameraName" label="相机名称" align="center">
          <template #default="scope">
            <div class="cameraName-text" v-if="scope.row.isMainCamera === IsMainCamera.YES">
              <el-icon><Star color="Gold" /></el-icon>
              {{ scope.row.cameraName }}
            </div>
          </template>  
        </el-table-column>
        <el-table-column prop="cameraCode" label="设备ID"/>
        <el-table-column prop="location" label="地点"/>
        <el-table-column prop="algoName" label="算法">
          <template #default="scope">
            <div class="algoId-text" @click="handleView(scope.row)">
              {{ scope.row.algoName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120px">
          <template #default="scope">
            <div class="operation">
              <el-tooltip effect="light" content="关闭/开启" placement="bottom">
                <el-switch 
                  :model-value="scope.row.status" 
                  :inactive-value="CameraGroupStatus.CLOSE"
                  :active-value="CameraGroupStatus.OPEN"
                  @update:model-value="(val) => handleSwitch(val, scope.row)"/>
              </el-tooltip>
              
              <el-tooltip effect="light" content="删除" placement="bottom">
                <img src="@/views/message/alarmMessages/img/delete.png" @click="handleDelete(scope.row)" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>

        <template #empty>
          <div class="emptyDiv">
            <img src="@/assets/images/empty.png" class="emptyImg" />
            <span class="emptySpan">暂无数据</span>
          </div>
        </template>
      </el-table>
      <section class="mt-4 flex justify-end">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next"
          :page-sizes="[10, 30, 50]"
          :total="total"
          v-model:page-size="requestParams.pageSize"
          v-model:current-page="requestParams.pageNumber"
          @change="queryCameraGroupPage"
        />
      </section>
    </el-card>

    <!--删除弹窗 -->
    <el-dialog v-model="deleteDialog" width="424px" top="20%" class="deleteDialog">
      <template #header="">
        <div class="deleteDialogHeader">
          <img src="@/assets/images/deleteTip.png" class="deleteTip" />
          <span class="titleSpan">请确认删除该相机分组吗？</span>
        </div>
      </template>
      <span style="margin-left: 37px">删除之后，该组多相机检测将失效！</span>
      <div class="dialogBottom">
        <el-button class="dialogBtn" @click="deleteDialog = false">取消</el-button>
        <el-button class="dialogBtn" type="primary" @click="confirmDelete">确定</el-button>
      </div>
    </el-dialog>

    <!-- 新增相机分组弹窗 -->
    <el-dialog v-model="createGroupDialog" width="70%" top="15%" left="25%" class="deleteDialog" title="设置相机组">
    <SettingCamera ref="settingCameraRef"/>
      <div class="dialogBottom">
        <el-button class="dialogBtn" @click="handleCancle">取消</el-button>
        <el-button class="dialogBtn" type="primary" @click="handleCreateGroup">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Star } from '@element-plus/icons-vue';
import useCameraGroupQuery from './hooks/useCameraGroupQuery';
import { CameraGroupTableItem, CameraGroupStatus, IsMainCamera } from '@/types/camera/camera-preview';
import { deleteDetectionGroup, updateGroupStatus, saveDetectionGroup } from '@/api/camera/camera-preview-group';
import SettingCamera from './components/SettingCamera.vue'

const router = useRouter();
const { requestParams, total, queryCameraGroupPage, cameraGroupList, loading } = useCameraGroupQuery();
const createGroupDialog = ref(false);
const deleteDialog = ref(false);
const cameraDetectionGroupId = ref();


const objectSpanMethod = ({
  row,
  rowIndex,
  columnIndex,
}) => {
  // 合并组序列和操作列
  if (columnIndex === 0 || columnIndex === 5) {
    const list = cameraGroupList.value;
    const groupId = row.cameraDetectionGroupId;
    const firstIndex = list.findIndex(item => item.cameraDetectionGroupId === groupId);
    
    if (rowIndex !== firstIndex) {
      return { rowspan: 0, colspan: 0 };
    }
    
    let rowCount = 0;
    for (let i = firstIndex; i < list.length; i++) {
      if (list[i].cameraDetectionGroupId === groupId) rowCount++;
      else break;
    }
    
    return {
      rowspan: rowCount,
      colspan: 1
    };
  }
};

const handleDelete = (row: CameraGroupTableItem) => {
  if (row.status === CameraGroupStatus.OPEN) {
    ElMessage({
      message: '开启状态的分组不可删除',
      type: 'warning',
      plain: true,
    });
  } else {
    deleteDialog.value = true;
    cameraDetectionGroupId.value = row.cameraDetectionGroupId;
  }
}

const handleSwitch = (newStatus: number, row: CameraGroupTableItem) => {
  const data = {
    cameraDetectionGroupId: row.cameraDetectionGroupId,
    status: newStatus,
  }
  updateGroupStatus(data).then(res => {
    ElMessage.success('操作成功')
    queryCameraGroupPage();
  })
}

const confirmDelete = () => {
  deleteDetectionGroup([Number(cameraDetectionGroupId.value)]).then(() => {
    ElMessage({
      message: '删除成功',
      type: 'success',
      plain: true,
    });
    deleteDialog.value = false;
    queryCameraGroupPage();
  })
  
}

const settingCameraRef = ref<InstanceType<typeof SettingCamera>>();
const handleCreateGroup = () => {
  const { valid, data } = settingCameraRef.value?.isValidate();
 
  if(valid) {
    // 执行提交逻辑
    const saveData = data.map(item => {
      return {
        cameraId: Number(item.code),
        algoId: Number(item.algoCode),
        isMainCamera: item.isMainCamera,
      }
    })
    
    saveDetectionGroup(saveData).then(() => {
      ElMessage({
        message: '相机组添加成功',
        type:'success',
        plain: true,
      });
      createGroupDialog.value = false;
      settingCameraRef.value?.clearForm();
      queryCameraGroupPage();
    })
  }
}

const handleCancle = () => {
  createGroupDialog.value = false
  settingCameraRef.value?.clearForm();
}

const handleView = (row: CameraGroupTableItem) => {
  router.push({
    path: '/algorithm/module-camera',
    query: {
      groupId: row.cameraDetectionGroupId,
    }
  })
}

onMounted(() => {
  queryCameraGroupPage();
})
</script>

<style lang="scss" scoped>
  .emptyDiv {
    margin-top: 78px;
    margin: auto;
    width: 396px;
    .emptyImg {
      height: 257px;
    }
    .emptySpan {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.45);
      text-align: left;
      font-style: normal;
    }
  }

  .algoId-text {
    cursor: pointer;
    color: #409eff;
  }

    .deleteDialog {
    .deleteDialogHeader {
      display: flex;
      .deleteTip {
        height: 24px;
        width: 24px;
      }
      
      .titleSpan {
        height: 24px;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.88);
        line-height: 24px;
        text-align: center;
        margin-left: 12px;
      }
    }
    .dialogBottom {
      display: flex;
      justify-content: flex-end;
      margin-top: 12px;
    }
  }

  .operation {
    display: flex;
    align-items: center;

    img {
      margin-left: 20px;
    }
    
  }


</style>