<template>
<div class="app-container">
<el-form :model="queryParams"
ref="queryRef"
:inline="true"
v-show="showSearch"
label-width="108px">
<el-form-item label="绑定类型名称"
prop="type">
<!-- <el-input v-model="queryParams.typeName"
placeholder="请输入绑定类型名称"
clearable
@keyup.enter="handleQuery" /> -->
<el-select filterable
v-model="queryParams.type"
placeholder="请选择绑定类型名称">
<el-option v-for="item in typeNameList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue" />
</el-select>
</el-form-item>
<!-- <el-form-item label="站点编号" prop="stCode">
<el-input
v-model="queryParams.stCode"
placeholder="请输入站点编号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="站点名称" prop="stName">
<el-input
v-model="queryParams.stName"
placeholder="请输入站点名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="视频编号" prop="indexCode">
<el-input
v-model="queryParams.indexCode"
placeholder="请输入视频编号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="视频名称" prop="indexName">
<el-input
v-model="queryParams.indexName"
placeholder="请输入视频名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="负责人账号" prop="dutyUserNo">
<el-input
v-model="queryParams.dutyUserNo"
placeholder="请输入负责人账号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="负责人名称" prop="dutyUserName">
<el-input
v-model="queryParams.dutyUserName"
placeholder="请输入负责人名称"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="负责人手机" prop="dutyUserPhone">
<el-input
v-model="queryParams.dutyUserPhone"
placeholder="请输入负责人手机"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item> -->
<el-form-item>
<el-button type="primary"
icon="Search"
@click="handleQuery">搜索</el-button>
<el-button 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="['business:siteCameraRelation:add']">新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['business:siteCameraRelation:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['business:siteCameraRelation:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['business:siteCameraRelation:export']">导出</el-button>
</el-col> -->
<right-toolbar v-model:showSearch="showSearch"
@queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading"
:data="siteCameraRelationList"
@selection-change="handleSelectionChange">
<el-table-column type="selection"
width="55"
align="center" />
<!-- <el-table-column label="绑定类型"
align="center"
prop="type" /> -->
<el-table-column label="绑定类型名称"
align="center"
prop="typeName" />
<el-table-column label="站点类型 "
align="center"
prop="stationType" />
<el-table-column label="站点编号"
align="center"
prop="stCode" />
<!-- <el-table-column label="站点名称"
align="center"
prop="stName" /> -->
<!-- <el-table-column label="视频编号"
align="center"
prop="indexCode" /> -->
<el-table-column label="视频名称"
align="center"
prop="indexName" />
<!-- <el-table-column label="负责人账号"
align="center"
prop="dutyUserNo" /> -->
<el-table-column label="负责人名称"
align="center"
prop="dutyUserName" />
<!-- <el-table-column label="负责人手机"
align="center"
prop="dutyUserPhone" /> -->
<!-- <el-table-column label="备注"
align="center"
prop="remark" />
<el-table-column label="状态"
align="center"
prop="status" /> -->
<el-table-column label="操作"
align="center"
class-name="small-padding fixed-width">
<template #default="scope">
<el-button link
type="primary"
icon="Edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['business:siteCameraRelation:edit']">修改</el-button>
<el-button link
type="primary"
icon="Delete"
@click="handleDelete(scope.row)"
v-hasPermi="['business:siteCameraRelation:remove']">删除</el-button>
<el-button link
type="primary"
icon="View"
@click="handleDetail(scope.row)"
v-hasPermi="['business:siteCameraRelation:view']">详情</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="800px"
append-to-body>
<el-form ref="siteCameraRelationRef"
:model="form"
:rules="rules"
label-width="120px">
<el-row :gutter="10"
class="mb8">
<el-col :span="12">
<el-form-item label="绑定类型名称"
prop="type">
<!-- <el-input v-model="form.typeName"
placeholder="请输入绑定类型名称" /> -->
<el-select filterable
v-model="form.type"
placeholder="请选择绑定类型名称"
@change="typeNamechange">
<el-option v-for="item in typeNameList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="站点类型"
prop="stationType">
<el-select filterable
v-model="form.stationType"
placeholder="请选择站点类型"
@change="stationTypechange">
<el-option v-for="item in stationTypeList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10"
class="mb8">
<el-col :span="12">
<el-form-item label="站点编号"
prop="stCode">
<el-select filterable
v-model="form.stCode"
placeholder="请选择站点编号"
@change="stationchange">
<el-option v-for="dict in stationList"
:key="dict.id"
:label="dict.name"
:value="dict.id" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="视频编号"
prop="indexCode">
<el-select filterable
v-model="form.indexCode"
placeholder="请选择视频编号"
@change="indexCodechange">
<el-option v-for="dict in cameraList"
:key="dict.id"
:label="dict.name"
:value="dict.id" />
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10"
class="mb8">
<el-col :span="12">
<el-form-item label="负责人"
prop="dutyUserNo">
<el-select filterable
v-model="form.dutyUserNo"
placeholder="请选择责任人"
@change="peoplechange">
<el-option v-for="dict in allpeople"
:key="dict.userId"
:label="dict.nickName"
:value="dict.userId" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
</el-col>
</el-row>
<!-- <el-form-item label="站点名称"
prop="stName">
<el-input v-model="form.stName"
placeholder="请输入站点名称" />
</el-form-item> -->
<!-- <el-form-item label="视频名称"
prop="indexName">
<el-input v-model="form.indexName"
placeholder="请输入视频名称" />
</el-form-item> -->
<!--
<el-form-item label="负责人名称"
prop="dutyUserName">
<el-input v-model="form.dutyUserName"
placeholder="请输入负责人名称" />
</el-form-item>
<el-form-item label="负责人手机"
prop="dutyUserPhone">
<el-input v-model="form.dutyUserPhone"
placeholder="请输入负责人手机" />
</el-form-item> -->
<!-- <el-form-item label="备注"
prop="remark">
<el-input v-model="form.remark"
placeholder="请输入备注" />
</el-form-item>
<el-form-item label="删除标志"
prop="delFlag">
<el-input v-model="form.delFlag"
placeholder="请输入删除标志" />
</el-form-item> -->
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary"
@click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</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.type}}
</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.typeName}}
</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.stationType}}
</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.stCode}}
</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.stName}}
</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.indexCode}}
</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.indexName}}
</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.dutyUserNo}}
</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.dutyUserName}}
</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.dutyUserPhone}}
</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>
</div>
</template>
<script setup name="SiteCameraRelation">
import { pagesiteCameraRelation, getsiteCameraRelation, delsiteCameraRelation, addsiteCameraRelation, updatesiteCameraRelation } from "@/api/siteCameraRelation";
const { proxy } = getCurrentInstance();
import { listUser, } from "@/api/system/user";
import {
cameraInfolist,
} from "@/api/cameraResource/cameraGroupInfo";
const siteCameraRelationList = ref([]);
const open = ref(false);
const loading = ref(true);
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 data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
type: null,
typeName: null,
stationType: null,
stCode: null,
stName: null,
indexCode: null,
indexName: null,
dutyUserNo: null,
dutyUserName: null,
dutyUserPhone: null,
status: null,
},
rules: {
typeName: [{ required: true, message: "不能为空", trigger: "change" }],
stName: [{ required: true, message: "不能为空", trigger: "change" }],
stCode: [{ required: true, message: "不能为空", trigger: "change" }],
indexCode: [{ required: true, message: "不能为空", trigger: "change" }],
dutyUserNo: [{ required: true, message: "不能为空", trigger: "change" }],
},
dialogFormDetail: {}, //详情弹框数据
});
const allpeople = ref([]); //所有人
const cameraList = ref([]); //所有的视频
const stationList = ref([]); //所有的站点
const stationTypeList = ref([
{ dictValue: 2, dictLabel: '雨量站' },
{ dictValue: 1, dictLabel: '水位站' },
]); //所有的站点类型
const typeNameList = ref([
{ dictValue: 1, dictLabel: '站点' },
{ dictValue: 0, dictLabel: '其它' },
]); //绑定类型
const { queryParams, form, rules, dialogFormDetail } = toRefs(data);
/** 查询站点和摄像头关联列表 */
function getList () {
loading.value = true;
pagesiteCameraRelation(queryParams.value).then(response => {
siteCameraRelationList.value = response.data;
total.value = response.total;
loading.value = false;
});
}
// 获得所有人的接口
function getallpeople () {
let params = {
pageNum: 1,
pageSize: 9999
}
listUser(params).then(
(res) => {
allpeople.value = res.data
}
);
}
// 获取所有摄像头的接口
function Getallvideo () {
cameraInfolist().then(res => {
cameraList.value = res.data
})
}
function peoplechange (value) {
var obj = allpeople.value.filter(item => { return item.userId == value })[0]
form.value.dutyUserName = obj.nickName
form.value.dutyUserPhone = obj.phonenumber
}
function indexCodechange (value) {
var obj = cameraList.value.filter(item => { return item.id == value })[0]
form.value.indexName = obj.name
}
function typeNamechange (value) {
var obj = typeNameList.value.filter(item => { return item.dictValue == value })[0]
form.value.typeName = obj.name
}
function stationTypechange (value) {
// var obj = stationTypeList.value.filter(item => { return item.dictValue == value })[0]
// form.value.stName = obj.name
}
function stationchange (value) {
var obj = stationList.value.filter(item => { return item.id == value })[0]
// form.value.indexName = obj.name
}
// 取消按钮
function cancel () {
open.value = false;
detailOpen.value = false;
reset();
}
// 表单重置
function reset () {
form.value = {
id: null,
type: null,
typeName: null,
stationType: null,
stCode: null,
stName: null,
indexCode: null,
indexName: null,
dutyUserNo: null,
dutyUserName: null,
dutyUserPhone: null,
remark: null,
status: null,
delFlag: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
proxy.resetForm("siteCameraRelationRef");
}
/** 搜索按钮操作 */
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
getsiteCameraRelation(_id).then(response => {
form.value = response.data;
open.value = true;
title.value = "修改站点和摄像头关联";
});
}
/** 提交按钮 */
function submitForm () {
proxy.$refs["siteCameraRelationRef"].validate(valid => {
if (valid) {
if (form.value.id != null) {
updatesiteCameraRelation(form.value).then(response => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addsiteCameraRelation(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 delsiteCameraRelation(_ids);
}).then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
}).catch(() => { });
}
/** 导出按钮操作 */
function handleExport () {
proxy.download('business/siteCameraRelation/export', {
...queryParams.value
}, `siteCameraRelation_${new Date().getTime()}.xlsx`)
}
//查看详情操作
function handleDetail (row) {
detailOpen.value = true;
dialogFormDetail.value = row;
}
getList();
getallpeople()
Getallvideo()
</script>
