<template>
<!-- rtu站点管理 -->
<div class="publicContainer">
<div class="table-content">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
<el-form-item label="站点类型" prop="siteType">
<el-select v-model="queryParams.siteType" placeholder="请选择" clearable>
<el-option v-for="dict in siteTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="监测类型" prop="monitorTargetType">
<el-select v-model="queryParams.monitorTargetType" placeholder="请选择" clearable>
<el-option v-for="dict in monitorTargetTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="在线状态" prop="onlineStatus">
<el-select v-model="queryParams.onlineStatus" placeholder="请选择" clearable style="width: 100px">
<el-option v-for="dict in onlineStatus" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="故障状态" prop="faultStatus">
<el-select v-model="queryParams.faultStatus" placeholder="请选择" clearable>
<el-option v-for="dict in faultStatus" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="建设方式" prop="buildType">
<el-select v-model="queryParams.buildType" placeholder="请选择" clearable style="width: 100px">
<el-option v-for="dict in camera_access_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</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="['dataAnalysis:rtuSiteInfo:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['dataAnalysis:rtuSiteInfo:export']">
导出
</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="rtuSiteInfoList" max-height="650">
<el-table-column label="序号" type="index" width="55" />
<el-table-column label="站点类型" prop="siteType" width="90">
<template #default="scope">
<span>{{ selectDictLabel(siteTypes, scope.row.siteType) }}</span>
</template>
</el-table-column>
<el-table-column label="监测类型" prop="monitorTargetType" width="90">
<template #default="scope">
<span>{{ selectDictLabel(monitorTargetTypes, scope.row.monitorTargetType) }}</span>
</template>
</el-table-column>
<el-table-column label="站点编号" prop="stCode" width="130" />
<el-table-column label="站点名称" prop="stName" show-overflow-tooltip />
<el-table-column label="在线状态" prop="onlineStatus" width="90">
<template #default="scope">
<dict-tag :options="onlineStatus" :value="scope.row.onlineStatus" />
</template>
</el-table-column>
<el-table-column label="故障状态" prop="faultStatus" width="90">
<template #default="scope">
<dict-tag :options="faultStatus" :value="scope.row.faultStatus" />
</template>
</el-table-column>
<el-table-column label="建设方式" prop="buildType" width="90">
<template #default="scope">
<dict-tag :options="camera_access_type" :value="scope.row.buildType" />
</template>
</el-table-column>
<el-table-column label="安装地址" prop="address" show-overflow-tooltip />
<el-table-column label="安装日期" prop="installDate" width="120">
<template #default="scope">
<span>{{ parseTime(scope.row.installDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="合同日期" prop="contractDate" width="120">
<template #default="scope">
<span>{{ parseTime(scope.row.contractDate, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="负责人" prop="chargeUser" width="150" show-overflow-tooltip />
<el-table-column label="操作" width="200" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dataAnalysis:rtuSiteInfo:edit']">
修改
</el-button>
<el-button link type="warning" icon="View" @click="handleDetail(scope.row)">监测项配置</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"
/>
</div>
<el-dialog :title="dialogTitle" v-model="dialogShow" width="900px" append-to-body>
<!-- 添加或修改RTU站点对话框 -->
<el-form ref="rtuSiteInfoRef" :model="form" :rules="rules" label-width="140px" style="max-height: 730px">
<el-row>
<el-col :span="12">
<el-form-item label="站点编号" prop="stCode">
<el-input v-model="form.stCode" placeholder="请输入站点编号" :disabled="form.id ? true : false" /> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="站点名称" prop="stName">
<el-input v-model="form.stName" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="站点类型" prop="siteType">
<el-select v-model="form.siteType" placeholder="请选择" style="width: 100%" :disabled="dialogTitle == '修改RTU站点'">
<el-option v-for="dict in siteTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监测类型" prop="monitorTargetType">
<el-select v-model="form.monitorTargetType" placeholder="请选择" style="width: 100%" :disabled="dialogTitle == '修改RTU站点'">
<el-option v-for="dict in monitorTargetTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="关联雨量站" prop="referRainStCode">
<el-select v-model="form.referRainStCode" placeholder="请选择" style="width: 100%" filterable multiple>
<el-option v-for="item in yulianglist" :key="item.stCode" :label="item.stName" :value="item.stCode"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="建设方式" prop="buildType">
<el-select v-model="form.buildType" placeholder="请选择" style="width: 100%">
<el-option v-for="dict in camera_access_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="form.buildType == 'share'">
<el-form-item label="共享接口地址" prop="shareUrl">
<el-input v-model="form.shareUrl" placeholder="请输入" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属水系" prop="drainageSystem">
<el-input v-model="form.drainageSystem" placeholder="请输入所属水系" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="高程系统" prop="elevationSystem">
<el-select v-model="form.elevationSystem" placeholder="请选择" style="width: 100%">
<el-option v-for="dict in elevationSystemTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="额定电压(伏)" prop="ratedVoltage">
<el-select v-model="form.ratedVoltage" placeholder="请选择" style="width: 100%">
<el-option v-for="dict in rated_voltage" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="监测时间间隔(分钟)" prop="monitorIntervalMinute">
<el-input v-model="form.monitorIntervalMinute" placeholder="请输入监测时间间隔" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="离线时间判断(分钟)" prop="offlineCheckMinute">
<el-input v-model="form.offlineCheckMinute" placeholder="请输入离线时间判断" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否安装视频监控" prop="isCameraInstall">
<el-select v-model="form.isCameraInstall" placeholder="请选择" clearable @change="clearChange2" style="width: 100%">
<el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24" v-if="form.isCameraInstall == 2">
<el-form-item label="视频监控点选择项" prop="cameraInfoIndexs">
<el-select style="width: 100%" v-model="form.cameraInfoIndexs" placeholder="请选择" clearable filterable multiple>
<el-option v-for="item in cameraList" :key="item.indexCode" :label="item.name" :value="item.indexCode" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="安装地址" prop="address">
<el-input v-model="form.address" placeholder="请输入安装地址">
<template #append>
<el-icon color="#81888e" size="23" @click="openMapDialog">
<LocationInformation />
</el-icon>
</template>
</el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="监测高度(米)" prop="elevationHeight">
<el-input v-model="form.elevationHeight" placeholder="请输入监测高度" />
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item label="安装高度(米)" prop="installHeight">
<el-input v-model="form.installHeight" placeholder="请输入安装高度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装日期" prop="installDate">
<el-date-picker
clearable
v-model="form.installDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择安装日期"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="合同日期" prop="contractDate">
<el-date-picker
clearable
v-model="form.contractDate"
type="date"
value-format="YYYY-MM-DD"
placeholder="请选择合同日期"
style="width: 100%"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人" prop="chargeUser">
<el-input v-model="form.chargeUser" placeholder="请输入负责人" />
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="备注" prop="remark">
<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="图片:" v-if="dialogShow" style="width: 90%" prop="coverPhotosFileList">
<ImageFileUpload
:limit="3"
:saveFileArr="form.coverPhotosFileList"
:listType="'picture-card'"
:refField="'coverPhotos'"
:refType="'rtu_site_info'"
/>
</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="mapDialogOpen" width="1100px" append-to-body destroy-on-close class="dialog-detail-box">
<!-- 地址选择 -->
<div class="map-box" style="height: 600px">
<mapBox :isShowTool="false" :isShowSearch="true" :isSelectAddress="true" @getPlace="getAddress"></mapBox>
</div>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="mapDialogOpen = false">确 定</el-button>
</div>
</template>
</el-dialog>
<el-dialog title="监测项列表" v-model="detailOpen" width="1100px" append-to-body class="dialog-detail-box">
<!-- 监测项列表 -->
<monitorList :refresh="refresh" :row="currentRow"></monitorList>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="detailOpen = false">关 闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="RtuSiteInfo">
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { pagertuSiteInfo, addrtuSiteInfo, updatertuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
import { realtimeDataListByType } from '@/api/floodSys/oneMap.js';
import mapBox from '@/components/Map/index.vue';
import monitorList from './monitorList';
import { nextTick } from 'vue';
import { pagecameraResource } from '@/api/cameraResource/cameraResource';
const { proxy } = getCurrentInstance();
const { rated_voltage } = proxy.useDict('rated_voltage');
const camera_access_type = ref([
{ value: 'owner', label: '自建' },
{ value: 'share', label: '共享' },
]);
const siteTypes = proxy.fixDict['siteTypes']; //站点类型
const elevationSystemTypes = proxy.fixDict['elevationSystemTypes']; //高程系统/坐标系
const monitorTargetTypes = proxy.fixDict['monitorTargetTypes']; //监测对象类型
const onlineStatus = proxy.fixDict['onlineStatus']; //在线状态
const faultStatus = proxy.fixDict['faultStatus']; //故障状态
const yulianglist = ref([]); //雨量站下拉框
const rtuSiteInfoList = ref([]);
const dialogShow = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const dialogTitle = ref('');
const detailOpen = ref(false);
const currentRow = ref({});
const refresh = ref(1);
const mapDialogOpen = ref(false); //地图弹框
const flowType = ref([
{ label: '是', value: 2 },
{ label: '否', value: 0 },
]);
const cameraList = ref([]);
const data = reactive({
form: {},
queryParams: {
pageNum: 1,
pageSize: 10,
siteType: null,
onlineStatus: null,
faultStatus: null,
buildType: null,
monitorTargetType: '',
},
rules: {
isCameraInstall: [{ required: true, message: '安装视频监控不能为空', trigger: 'change' }],
siteType: [{ required: true, message: '站点类型不能为空', trigger: 'change' }],
monitorTargetType: [{ required: true, message: '监测对象类型不能为空', trigger: 'change' }],
buildType: [{ required: true, message: '建设方式不能为空', trigger: 'change' }],
stName: [{ required: true, message: '站点不能为空', trigger: 'blur' }],
stCode: [{ required: true, message: '站点编号不能为空', trigger: 'blur' }],
},
});
const { queryParams, form, rules } = toRefs(data);
/** 查询RTU站点列表 */
function getList() {
loading.value = true;
pagertuSiteInfo(queryParams.value).then(response => {
rtuSiteInfoList.value = response.data;
total.value = response.total;
loading.value = false;
});
}
//切换类型
function changeTargetType(val) {
queryParams.value.monitorTargetType = val;
getList();
}
// 取消按钮
function cancel() {
dialogShow.value = false;
reset();
}
function clearChange2() {
if (form.value.isCameraInstall == 0) {
form.value.cameraInfoIndexs = [];
}
}
// 表单重置
function reset() {
form.value = {
id: null,
address: '',
belongId: '',
belongType: '',
buildType: '',
chargeUser: '',
contractDate: '',
createBy: '',
createTime: '',
delFlag: '',
drainageSystem: '',
shareUrl: '',
// elevationHeight: 0,
elevationSystem: '',
id: '',
installDate: '',
installHeight: 0,
lonLat: '',
monitorIntervalMinute: '',
monitorTargetType: '',
offlineCheckMinute: '',
substituteStCode: '',
referRainStCode: '',
remark: '',
requireDataCompleteRate: 0,
siteType: '',
stCode: '',
stName: '',
status: '',
substituteStCode: '',
tt: '',
updateBy: '',
updateTime: '',
ut: '',
isCameraInstall: '',
cameraInfoIndexs: [],
coverPhotosFileList: [],
};
proxy.resetForm('rtuSiteInfoRef');
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm('queryRef');
queryParams.value.monitorTargetType = [];
handleQuery();
}
// 新增操作
function handleAdd() {
reset();
dialogShow.value = true;
dialogTitle.value = '新增RTU站点';
}
/** 修改按钮操作 */
function handleUpdate(row) {
dialogShow.value = true;
dialogTitle.value = '修改RTU站点';
nextTick(() => {
form.value = { ...form.value, ...row };
if (!!form.value.referRainStCode) form.value.referRainStCode = form.value.referRainStCode.split(',');
if (!!form.value.cameraInfoIndexs) form.value.cameraInfoIndexs = form.value.cameraInfoIndexs.split(',');
});
}
//打开单位地址地图弹框
function openMapDialog() {
mapDialogOpen.value = true;
setTimeout(() => {
if (window.newfiberMap && form.value.lonLat) {
let position = form.value.lonLat.split(',');
newfiberMap.removeByIds(['addressSearch']);
newfiberMap.geojsonToMap(
NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
{
id: 'addressSearch',
name: form.value.address,
geometrys: `POINT(${position.join(' ')})`,
type: NewFiberMap.Enum.VectorType.ICON,
style: {
url: '/src/assets/images/gisMap/marker.png',
width: 50,
height: 50,
},
labelOptions: {
font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
color: 'rgb(255,255,255,1)',
pixelOffset: [0, -38],
backgroundColor: 'rgba(64,158,255,1)',
showBackground: true,
distanceDisplayCondition: [Number.MIN_VALUE, 55000],
},
},
])
);
}
}, 100);
}
function getAddress(val) {
form.value.address = val.caseAddress;
form.value.lonLat = val.lonLat.join(',');
}
/** 提交按钮 */
function submitForm() {
let params = { ...form.value };
if (!!params.referRainStCode) params.referRainStCode = params.referRainStCode.join(',');
if (!!params.cameraInfoIndexs) params.cameraInfoIndexs = params.cameraInfoIndexs.join(',');
proxy.$refs['rtuSiteInfoRef'].validate(valid => {
if (valid) {
delete params.onlineStatus;
delete params.faultStatus;
if (dialogTitle.value == '修改RTU站点') {
updatertuSiteInfo(params).then(response => {
proxy.$modal.msgSuccess('修改成功');
dialogShow.value = false;
getList();
});
} else {
addrtuSiteInfo(params).then(response => {
proxy.$modal.msgSuccess('新增成功');
dialogShow.value = false;
getList();
});
}
}
});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download(
'/business/rtuSiteInfo/export',
{
...queryParams.value,
},
`rtuSiteInfo_${new Date().getTime()}.xlsx`
);
}
//查看详情操作
function handleDetail(row) {
detailOpen.value = true;
currentRow.value = row;
refresh.value = Math.random();
}
function getList3() {
let param = {
pageNum: 1,
pageSize: 9999,
};
pagecameraResource(param).then(response => {
cameraList.value = response.data;
});
}
//获取雨量站数据
const getRealtimeRain = async () => {
let params = {
monitorTargetType: 'rainfall',
orderBy: 'tt desc',
};
let res = await realtimeDataListByType(params);
if (res && res.code == 200) {
yulianglist.value = res.data || [];
}
};
onMounted(() => {
getList();
getList3();
getRealtimeRain();
});
</script>
<style lang="scss" scoped></style>
