- <template>
- <!-- 站点和摄像头关联 -->
- <div class="publicContainer">
- <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
- <el-form-item label="建设方式" prop="buildType">
- <el-select filterable v-model="queryParams.buildType" placeholder="请选择建设方式">
- <el-option v-for="item in typeNameList" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </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>
- <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
- </el-row>
-
- <el-table v-loading="loading" :data="siteCameraRelationList" @selection-change="handleSelectionChange" max-height="650">
- <el-table-column type="selection" width="55" />
- <el-table-column label="建设方式" prop="buildType">
- <template #default="{ row }">
- <dict-tag :options="typeNameList" :value="row.buildType + ''" />
- </template>
- </el-table-column>
- <el-table-column label="监测类型 " prop="monitorTargetType">
- <template #default="{ row }">
- <dict-tag :options="headArr" :value="row.monitorTargetType + ''" />
- </template>
- </el-table-column>
- <el-table-column label="站点名称" prop="stName" />
- <el-table-column label="视频名称" prop="indexCodeName" />
- <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="['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="buildType">
- <el-select filterable v-model="form.buildType" placeholder="请选择建设方式" @change="stationTypechange" :disabled="disableds">
- <el-option v-for="item in typeNameList" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="监测类型" prop="monitorTargetType">
- <el-select
- filterable
- v-model="form.monitorTargetType"
- placeholder="请选择监测类型"
- @change="stationTypechange"
- :disabled="disableds"
- >
- <el-option v-for="item in headArr" :key="item.value" :label="item.label" :value="item.value" />
- </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" :disabled="disableds">
- <el-option v-for="dict in stCodeList" :key="dict.id" :label="dict.stName" :value="dict.stCode" />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="视频名称" prop="indexCodeList">
- <el-select filterable v-model="form.indexCodeList" placeholder="请选择视频编号" @change="indexCodechange" multiple>
- <el-option v-for="dict in cameraList" :key="dict.indexCode" :label="dict.name" :value="dict.indexCode" />
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- </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="900px" append-to-body>
- <div class="publicContainer">
- <div class="publicDetail">
- <div class="part">
- <p class="title">建设方式:</p>
- <p class="content">
- <dict-tag :options="typeNameList" :value="dialogFormDetail.buildType + ''" />
- </p>
- </div>
- <div class="part">
- <p class="title">监测类型:</p>
- <p class="content">
- <dict-tag :options="headArr" :value="dialogFormDetail.monitorTargetType + ''" />
- </p>
- </div>
- <div class="part">
- <p class="title">站点名称:</p>
- <p class="content">
- {{ dialogFormDetail.stName }}
- </p>
- </div>
- <div class="part">
- <p class="title">站点编号:</p>
- <p class="content">
- {{ dialogFormDetail.stCode }}
- </p>
- </div>
- <div class="part">
- <p class="title">视频编号:</p>
- <p class="content">
- {{ dialogFormDetail.indexCode }}
- </p>
- </div>
- <div class="part">
- <p class="title">视频名称:</p>
- <p class="content">
- {{ dialogFormDetail.indexCodeName }}
- </p>
- </div>
- <!-- <div class="part">
- <p class="title">负责人手机:</p>
- <p class="content">
- {{ dialogFormDetail.dutyUserPhone }}
- </p>
- </div>
- <div class="part">
- <p class="title">备注:</p>
- <p class="content">
- {{ dialogFormDetail.remark }}
- </p>
- </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,
- rtuSiteInfolist,
- } from '@/api/cameraResource/siteCameraRelation';
- import { listUser } from '@/api/system/user';
- import { cameraInfolist } from '@/api/cameraResource/cameraGroupInfo';
-
- const { proxy } = getCurrentInstance();
- const { site_type } = proxy.useDict('site_type');
- const site_types = ref([]);
- 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 disableds = ref(false);
- const data = reactive({
- form: {},
- queryParams: {
- pageNum: 1,
- pageSize: 10,
- type: null,
- buildType: null,
- stationType: null,
- stCode: null,
-
- indexCode: null,
- indexName: null,
- dutyUserNo: null,
- dutyUserName: null,
- dutyUserPhone: null,
- status: null,
- },
- rules: {
- buildType: [{ required: true, message: '不能为空', trigger: 'change' }],
- stName: [{ required: true, message: '不能为空', trigger: 'change' }],
- stCode: [{ required: true, message: '不能为空', trigger: 'change' }],
- indexCodeList: [{ required: true, message: '不能为空', trigger: 'change' }],
- dutyUserNo: [{ required: true, message: '不能为空', trigger: 'change' }],
- },
- dialogFormDetail: {}, //详情弹框数据
- });
- const stCodeList = ref([]);
- const buildType = ref('');
- const monitorTargetType = ref('');
- const allpeople = ref([]); //所有人
- const cameraList = ref([]); //所有的视频
- const stationList = ref([]); //所有的站点
- const stationTypeList = ref([
- { dictValue: 2, dictLabel: '雨量站' },
- { dictValue: 1, dictLabel: '水位站' },
- ]); //所有的站点类型
-
- const typeNameList = ref([
- { value: 'owner', label: '自建' },
- { value: 'share', label: '共享' },
- { value: 'official', label: '市局' },
- ]); //绑定类型
-
- const headArr = reactive([
- { label: '典型项目', value: 'typical_land' },
- { label: '雨量', value: 'rainfall' },
- { label: '管网', value: 'pipeline' },
- { label: '内涝点', value: 'waterlogging' },
- { label: '海绵设施', value: 'drain_outlet' },
- { label: '河道', value: 'river' },
- ]);
-
- 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() {
- stCodeList.value = [];
- // console.log(form, 'form');
- // console.log(form.value.monitorTargetType, 'form.value.monitorTargetType');
- // console.log(form.value.buildType, 'form.value.buildType');
- // console.log(stationList.value[0], 1111);
-
- for (let i = 0; i <= stationList.value.length; i++) {
- // console.log(stationList.value[i], 8989);
- if (stationList.value[i].monitorTargetType == form.value.monitorTargetType && stationList.value[i].buildType == form.value.buildType) {
- stCodeList.value.push(stationList.value[i]);
- console.log(stationList.value[i], 123123);
- }
- }
- // console.log(stationList.value, 1111);
- // var obj = stationTypeList.value.filter(item => {
- // return item.dictValue == value;
- // })[0];
- // form.value.stName = obj.name;
- // stationList.value = [];
- // site_types.value.forEach(i => {
- // if (i.monitorTargetType == e) {
- // stationList.value.push(i);
- // console.log(stationList.value, 'stationList.value');
- // }
- // });
- }
-
- async function rtuSiteInfolistM(value) {
- // var obj = stationList.value.filter(item => { return item.id == value })[0]
- let { data } = await rtuSiteInfolist();
- stationList.value = data;
- // form.value.indexName = obj.name
- console.log(stationList.value, 'stationList.value');
- }
- // 切换站点点位
- function stationchange(params) {
- stationList.value.forEach(element => {
- if (element.stCode == params) {
- form.value.stName = element.stName;
- return;
- }
- });
- }
-
- // 取消按钮
- 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,
- indexCodeList: 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 = '添加站点和摄像头关联';
- disableds.value = false;
- stCodeList.value = [];
- }
-
- /** 修改按钮操作 */
- function handleUpdate(row) {
- reset();
- // open.value = true;
- // title.value = '修改站点和摄像头关联';
- disableds.value = true;
- // return;
- const _id = row.id || ids.value;
- getsiteCameraRelation(_id).then(response => {
- form.value = response.data;
- form.value.dutyUserNo = Number(form.value.dutyUserNo);
- open.value = true;
- title.value = '修改站点和摄像头关联';
- stCodeList.value = [];
-
- for (let i = 0; i <= stationList.value.length; i++) {
- console.log(stationList.value[i], 8989);
- if (
- stationList.value[i].monitorTargetType == form.value.monitorTargetType &&
- stationList.value[i].buildType == form.value.buildType
- ) {
- stCodeList.value.push(stationList.value[i]);
- }
- }
- });
- }
-
- /** 提交按钮 */
- function submitForm() {
- console.log(form.value, 'form.value');
- 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 handleDetail(row) {
- detailOpen.value = true;
- dialogFormDetail.value = row;
- }
-
- getList();
- getallpeople();
- Getallvideo();
- rtuSiteInfolistM();
- </script>