- <template>
- <!-- 视频分组 -->
- <div class="publicContainer">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="分类名称" prop="name">
- <el-input v-model="queryParams.name" placeholder="请输入分类名称" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item>
- <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
- <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
- </el-form-item>
- </el-form>
- <el-row :gutter="10" class="mb8">
- <el-col :span="1.5">
- <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['cameraResource:cameraGroupInfo:add']">新增</el-button>
- </el-col>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
- <el-table v-loading="loading" :data="cameraGroupInfoList" @selection-change="handleSelectionChange" max-height="650">
- <el-table-column type="selection" width="55" />
- <el-table-column label="分类名称" prop="name" />
- <el-table-column label="摄像头数量" prop="number" />
- <el-table-column label="创建时间" prop="createTime" />
- <el-table-column label="更新时间" prop="updateTime" />
- <el-table-column label="操作" class-name="small-padding fixed-width">
- <template #default="scope">
- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['cameraResource:cameraGroupInfo:edit']">
- 修改
- </el-button>
- <el-button
- link
- type="warning"
- icon="Edit"
- @click="handleconfiguration(scope.row)"
- v-hasPermi="['business:floodControlDepartment:edit']"
- >
- 配置摄像头
- </el-button>
- </template>
- </el-table-column>
- </el-table>
-
- <pagination
- v-show="total > 0"
- :total="total"
- v-model:page="queryParams.pageNum"
- v-model:limit="queryParams.pageSize"
- @pagination="getList"
- />
-
- <!-- 添加或修改自定义视频分组-分组对话框 -->
- <el-dialog :title="title" v-model="open" width="500px" append-to-body>
- <el-form ref="cameraGroupInfoRef" :model="form" :rules="rules" label-width="120px">
- <el-form-item label="分类名称" prop="name">
- <el-input v-model="form.name" placeholder="请输入分类名称" />
- </el-form-item>
- </el-form>
- <template #footer>
- <div class="dialog-footer">
- <el-button type="info" @click="cancel">取 消</el-button>
- <el-button type="primary" @click="submitForm">确 定</el-button>
- </div>
- </template>
- </el-dialog>
-
- <!-- 自定义视频分组-分组详情 -->
- <el-dialog title="自定义视频分组-分组详情" v-model="detailOpen" width="800px" append-to-body class="dialog-detail-box">
- <div class="dialog-form-detail flex flex-r flex-wrap">
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">分类名称</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.name }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">父级id 1级为0</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.parentId }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">负责人名称</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.dutyUser }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">手机号</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.phone }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">职位</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.position }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">备注</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.remark }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">状态</div>
- <div class="detail-value flex flex-align-center">
- {{ dialogFormDetail.status }}
- </div>
- </div>
- </div>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="cancel">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
-
- <!-- 配置摄像头 -->
- <el-dialog title="配置摄像头" v-model="AddDialog2" width="800px" append-to-body class="dialog-detail-box">
- <el-transfer
- filterable
- :filter-method="filterMethod"
- filter-placeholder="请输入名称"
- v-model="transferUserValue"
- :data="transferUserData"
- style="text-align: left"
- :titles="['待选列表', '已有列表']"
- :button-texts="['移除列表', '添加列表']"
- :props="{
- key: 'id',
- label: 'name',
- }"
- @change="transferChange"
- v-loading="transferloading"
- element-loading-text="拼命加载中"
- element-loading-spinner="el-icon-loading"
- element-loading-background="rgba(0, 0, 0, 0.8)"
- ></el-transfer>
- <template #footer>
- <div class="dialog-footer">
- <el-button @click="AddDialog2 = false">关 闭</el-button>
- </div>
- </template>
- </el-dialog>
- </div>
- </template>
-
- <script setup name="CameraGroupInfo">
- import {
- pagecameraGroupInfo,
- getcameraGroupInfo,
- delcameraGroupInfo,
- addcameraGroupInfo,
- updatecameraGroupInfo,
- batchRemove,
- batchSave,
- getNotBoundData,
- getBoundData,
- } from '@/api/cameraResource/cameraGroupInfo';
-
- const { proxy } = getCurrentInstance();
- import { ElMessage } from 'element-plus';
-
- const cameraGroupInfoList = ref([]);
- const open = ref(false);
- const loading = ref(false);
- const showSearch = ref(true);
- const ids = ref([]);
- const single = ref(true);
- const multiple = ref(true);
- const total = ref(0);
- const title = ref('');
- const detailOpen = ref(false);
-
- const groupId = ref('');
- const AddDialog2 = ref(false);
- const transferUserValue = ref([]);
- const transferUserData = ref([]);
- const yifenpei = ref([]);
- const transferloading = ref(false);
-
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- name: null,
- parentId: null,
- dutyUser: null,
- phone: null,
- position: null,
- status: null,
- },
- rules: {
- name: [{ required: true, message: '不能为空', trigger: 'blur' }],
- },
- dialogFormDetail: {}, //详情弹框数据
- });
-
- const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
-
- // 配置摄像头
- function handleconfiguration(row) {
- groupId.value = row.id;
- // 搜索已绑定的人员列表
- AddDialog2.value = true;
- Getallvideo();
- Getyifenpei();
- }
-
- function Getallvideo() {
- let prams = {
- groupId: groupId.value,
- };
- getNotBoundData(prams).then(res => {
- transferUserData.value = res.data;
- });
- }
-
- // 搜索已分配的用户
- function Getyifenpei() {
- getBoundData({ groupId: groupId.value }).then(res => {
- if (res.code == 200) {
- transferUserValue.value = [];
- yifenpei.value = res.data;
- res.data.map(item => {
- transferUserValue.value.push(item.id);
- });
- }
- });
- }
-
- function filterMethod(query, item) {
- let string = item.name;
- return string.indexOf(query) > -1;
- }
-
- function transferChange(value, direction, movedKeys) {
- transferloading.value = true;
- let params = '';
- let list = [];
- let AxiosUrl = '';
- if (direction == 'left') {
- AxiosUrl = batchRemove;
- yifenpei.value.map(item => {
- for (var k in movedKeys) {
- if (movedKeys[k] == item.id) {
- // list.push(item.id)
- list.push({
- cameraName: item.name,
- indexCode: item.indexCode,
- id: item.id,
- });
- }
- }
- });
-
- params = {
- cameraInfoList: list,
- gourpId: groupId.value,
- };
-
- // var a = new FormData()
- // a.append('ids', list.join(","))
- // params = a
- } else {
- transferUserData.value.map(item => {
- for (var k in value) {
- if (value[k] == item.id) {
- list.push({
- cameraName: item.name,
- indexCode: item.indexCode,
- id: item.id,
- });
- }
- }
- });
- params = {
- cameraInfoList: list,
- gourpId: groupId.value,
- };
- AxiosUrl = batchSave;
- }
-
- AxiosUrl(params)
- .then(response => {
- if (response.code === 200) {
- ElMessage({ message: response.msg, type: 'success' });
- } else {
- ElMessage({ message: response.msg, type: 'warning' });
- }
-
- Getyifenpei();
- Getallvideo();
-
- setTimeout(() => {
- getList();
- }, 100);
-
- // gettreeList()
- // getlistfloodControlDepartment()
- transferloading.value = false;
- })
- .catch(response => {
- transferloading.value = false;
- });
- }
-
- /** 搜索自定义视频分组-分组列表 */
- function getList() {
- // loading.value = true;
- pagecameraGroupInfo(queryParams.value).then(response => {
- cameraGroupInfoList.value = response.data;
- total.value = response.total;
- loading.value = false;
- });
- }
-
- // 取消按钮
- function cancel() {
- open.value = false;
- detailOpen.value = false;
- reset();
- }
-
- // 表单重置
- function reset() {
- form.value = {
- id: null,
- name: null,
- parentId: null,
- dutyUser: null,
- phone: null,
- position: null,
- remark: null,
- status: null,
- delFlag: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- };
- proxy.resetForm('cameraGroupInfoRef');
- }
-
- /** 搜索按钮操作 */
- function handleQuery() {
- queryParams.value.pageNum = 1;
- getList();
- }
-
- /** 重置按钮操作 */
- function resetQuery() {
- proxy.resetForm('queryRef');
- handleQuery();
- }
-
- // 多选框选中数据
- function handleSelectionChange(selection) {
- ids.value = selection.map(item => item.id);
- single.value = selection.length != 1;
- multiple.value = !selection.length;
- }
-
- /** 新增按钮操作 */
- function handleAdd() {
- reset();
- open.value = true;
- title.value = '添加自定义视频分组-分组';
- }
-
- /** 修改按钮操作 */
- function handleUpdate(row) {
- reset();
- const _id = row.id || ids.value;
- getcameraGroupInfo(_id).then(response => {
- form.value = response.data;
- open.value = true;
- title.value = '修改自定义视频分组-分组';
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- proxy.$refs['cameraGroupInfoRef'].validate(valid => {
- if (valid) {
- if (form.value.id != null) {
- updatecameraGroupInfo(form.value).then(response => {
- proxy.$modal.msgSuccess('修改成功');
- open.value = false;
- getList();
- });
- } else {
- addcameraGroupInfo(form.value).then(response => {
- proxy.$modal.msgSuccess('新增成功');
- open.value = false;
- getList();
- });
- }
- }
- });
- }
-
- /** 删除按钮操作 */
- function handleDelete(row) {
- const _ids = row.id || ids.value;
- proxy.$modal
- .confirm('是否确认删除自定义视频分组-分组编号为"' + _ids + '"的数据项?')
- .then(function () {
- return delcameraGroupInfo(_ids);
- })
- .then(() => {
- getList();
- proxy.$modal.msgSuccess('删除成功');
- })
- .catch(() => {});
- }
-
- /** 导出按钮操作 */
- function handleExport() {
- proxy.download(
- 'cameraResource/cameraGroupInfo/export',
- {
- ...queryParams.value,
- },
- `cameraGroupInfo_${new Date().getTime()}.xlsx`
- );
- }
- //查看详情操作
- function handleDetail(row) {
- detailOpen.value = true;
- dialogFormDetail.value = row;
- }
- getList();
- </script>