GitBucket
Newer
<template>
<!-- 数据能力 -->
<div class="app-container">
<el-form
:model="queryParams"
ref="queryRef"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="" prop="st">
<el-select v-model="queryParams.st" placeholder="请选择站点">
<el-option
v-for="dict in searchSiteList"
:key="dict.stCode"
:label="dict.stName"
:value="dict.stCode"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="dateRange">
<el-date-picker
v-model="queryParams.dateRange"
value-format="YYYY-MM-DD HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始周期"
end-placeholder="结束周期"
></el-date-picker>
</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-table
v-loading="loading"
:data="rtuSiteInfoList"
border
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="序号" type="index" width="55" align="center" />
<el-table-column
label="站点编号"
align="center"
prop="st"
show-overflow-tooltip
/>
<el-table-column
label="站点名称"
align="center"
prop="stName"
show-overflow-tooltip
/>
<el-table-column
label="源完整率"
align="center"
prop="completeRate"
width="90"
>
</el-table-column>
<el-table-column
label="正常率"
align="center"
prop="normalRate"
width="90"
>
</el-table-column>
<el-table-column
label="关联雨水管网"
align="center"
prop="referRainPipeStName"
show-overflow-tooltip
/>
<el-table-column
label="关联雨量站"
align="center"
prop="referRainStationStName"
width="180"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
label="优化设置"
align="center"
prop="isEnable"
width="90"
>
<template #default="scope">
<dict-tag :options="isNumberState" :value="scope.row.isEnable" />
</template>
</el-table-column>
<el-table-column label="已选优化指标" align="center">
<template #default="scope">
<el-table-column label="小时水量1" align="center">
<template #default="scope">
<dict-tag :options="isNumberState" :value="scope.row.sbl1" />
</template>
</el-table-column>
<el-table-column label="浊度" align="center">
<template #default="scope">
<dict-tag :options="isNumberState" :value="scope.row.turb" />
</template>
</el-table-column>
<el-table-column label="水位" align="center">
<template #default="scope">
<dict-tag :options="isNumberState" :value="scope.row.z" />
</template>
</el-table-column>
<el-table-column label="流速" align="center">
<template #default="scope">
<dict-tag :options="isNumberState" :value="scope.row.va" />
</template>
</el-table-column>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="100"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button
link
type="primary"
icon="View"
@click="handleSet(scope.row)"
>设置</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<!-- 设置修复因子 -->
<el-dialog :title="title" v-model="open" width="900px" append-to-body>
<el-form
ref="configFormRef"
:model="form"
:rules="rules"
label-width="100px"
>
<el-row>
<el-col :span="12">
<el-form-item label="规则引擎" prop="ruleId">
<el-select v-model="form.ruleId" placeholder="请选择规则引擎">
<el-option
v-for="item in ruleList"
:key="item.ruleId"
:label="item.ruleName"
:value="item.ruleId"
></el-option>
</el-select> </el-form-item
></el-col>
<el-col :span="12">
<el-form-item label="关联雨量站" prop="referRainStationSt">
<el-select
multiple
collapse-tags
collapse-tags-tooltip
v-model="form.referRainStationSt"
placeholder="请选择关联雨量站"
>
<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" v-if="isliuliangzhan">
<el-form-item label="关联流量站：" prop="referFlowStationSt">
<el-select
v-model="form.referFlowStationSt"
multiple
collapse-tags
collapse-tags-tooltip
placeholder="请选择关联流量站"
>
<el-option
v-for="item in liulianglist"
: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="referRainPipeSt">
<el-select
multiple
collapse-tags
collapse-tags-tooltip
v-model="form.referRainPipeSt"
placeholder="请选择关联雨水管网"
>
<el-option
v-for="item in guanwanglist"
: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="isEnable">
<el-select v-model="form.isEnable" placeholder="请选择">
<el-option
v-for="dict in isNumberState"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<div
class="flex flex-r flex-align-center"
v-for="(item, index) in form.siteRepairPropertyConfigList"
:key="item.id"
>
<!-- <el-icon
style="
margin-bottom: 15px;
cursor: pointer;
color: cornflowerblue;
font-size: 18px;
"
@click="addCofig"
><CirclePlusFilled
/></el-icon> -->
<div class="flex flex-r flex-1 flex-align-center">
<el-form-item label="修复因子" prop="property" label-width="90">
<el-select v-model="item.property" placeholder="请选择">
<el-option
v-for="(item, index) in xiufulist"
:key="item.code"
:label="item.name + ' ' + '(' + item.code + ')'"
:value="item.code"
></el-option>
</el-select>
</el-form-item>
<div class="flex flex-r">
<div class="el-form-item__label" style="margin-left: 20px">
正常范围
</div>
<div class="flex flex-1">
<el-form-item label="" prop="minValue" label-width="0">
<el-input v-model="item.minValue" placeholder="请输入" />
</el-form-item>
</div>
<div class="flex flex-1">
<el-form-item label="" prop="maxValue" label-width="0">
<el-input v-model="item.maxValue" placeholder="请输入" />
</el-form-item>
</div>
</div>
<el-form-item label="是否启用" prop="isEnable" label-width="90">
<el-select v-model="item.isEnable" placeholder="请选择">
<el-option
v-for="dict in isNumberState"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</div>
<el-icon
style="
margin-bottom: 15px;
margin-left: 10px;
cursor: pointer;
color: red;
font-size: 18px;
"
@click="delCofig(index)"
><Delete
/></el-icon>
</div>
</el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="addCofig">新增修复因子</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup>
import {
pageRepairSite_page_with_all_site,
listRuleEngine,
listRepairAllSite,
listSite,
listSiteSupportedProperty,
siteconfigdetail_by_st,
addRtuRepairConfig,
updateRtuRepairConfig,
} from "@/api/dataAnalysis/repairdata";
const { proxy } = getCurrentInstance();
const siteTypes = proxy.fixDict["siteTypes"]; //站点类型
const elevationSystemTypes = proxy.fixDict["elevationSystemTypes"]; //高程系统/坐标系
const monitorTargetTypes = proxy.fixDict["monitorTargetTypes"]; //监测对象类型
const buildTypes = proxy.fixDict["buildTypes"]; //建设方式
const onlineStatus = proxy.fixDict["onlineStatus"]; //在线状态
const faultStatus = proxy.fixDict["faultStatus"]; //故障状态
const isNumberState = proxy.fixDict["isNumberState"];
const activeName = ref("first");
const rtuSiteInfoList = 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 currentRow = ref({});
const searchSiteList = ref([]); //站点搜索列表
const isconfigAdd = ref(true); //修改/新增判断按钮
const isliuliangzhan = ref(false);
const ruleList = ref([]); //规则下拉框
const yulianglist = ref([]); //雨量站下拉框
const liulianglist = ref([]); //流量站下拉框
const guanwanglist = ref([]); //雨水管网下拉框
const xiufulist = ref([]); //修复因子下拉
const data = reactive({
form: {
siteRepairPropertyConfigList: [
{
id: "",
isEnable: 1,
maxValue: "",
minValue: "",
property: "",
propertyName: "",
siteRepairConfigId: "",
st: "",
type: "",
},
],
},
queryParams: {
pageNo: 1,
pageSize: 10,
st: null,
dateRange: [],
},
rules: {
ruleId: [
{
required: true,
message: "请选择规则引擎",
trigger: "blur",
},
],
referRainStationSt: [
{
required: true,
message: "请选择关联雨量站",
trigger: "blur",
},
],
isEnable: [
{
required: true,
message: "请选择是否启用",
trigger: "blur",
},
],
},
});
const { queryParams, form, rules } = toRefs(data);
watch(
() => form.value.siteRepairPropertyConfigList,
(v1, v2) => {
let propertys = form.value.siteRepairPropertyConfigList.map((item) => {
return item.property;
});
isliuliangzhan.value = propertys.includes("va");
form.value.referFlowStationSt = isliuliangzhan.value
? form.value.referFlowStationSt
: [];
}
);
/** 查询RTU站点列表 */
function getList() {
loading.value = true;
let params = proxy.formatAddDateRange(
queryParams.value,
queryParams.value.dateRange,
"startDatetime",
"endDatetime"
);
pageRepairSite_page_with_all_site(params).then((response) => {
if (response.data.length > 0) {
response.data.forEach((item) => {
if (item.siteRepairPropertyConfigList.length > 0) {
item.siteRepairPropertyConfigList.forEach((config) => {
if (config.property == "sbl1") {
item.sbl1 = config["isEnable"];
}
if (config.property == "turb") {
item.turb = config["isEnable"];
}
if (config.property == "z") {
item.z = config["isEnable"];
}
if (config.property == "va") {
item.va = config["isEnable"];
}
});
} else {
item.sbl1 = "--";
item.turb = "--";
item.z = "--";
item.va = "--";
}
});
}
rtuSiteInfoList.value = response.data;
total.value = response.total;
loading.value = false;
});
}
//获取站点列表
function getSearchSiteList() {
listRepairAllSite({ platformCode: 111211 }).then((res) => {
searchSiteList.value = res.data;
});
}
//获取下拉数据
function selectionList(row) {
//获取规则引擎下拉
listRuleEngine().then((res) => {
ruleList.value = res.data;
});
//流量站下拉
listSite({ samePlatformSt: row.st, existProperty: "sbl1" }).then((res) => {
liulianglist.value = res.data;
});
//雨量站下拉
listSite({ samePlatformSt: row.st, existProperty: "pj" }).then((res) => {
yulianglist.value = res.data;
});
//雨水管网下拉
listSite({ samePlatformSt: row.st, existProperty: "z" }).then((res) => {
guanwanglist.value = res.data;
});
//修复因子下拉
listSiteSupportedProperty(row.st).then((res) => {
xiufulist.value = res.data;
});
//获取修复详情
siteconfigdetail_by_st(row.st).then((res) => {
if (res.data) {
// 修改
isconfigAdd.value = false;
res.data.referFlowStationSt = res.data.referFlowStationSt
? res.data.referFlowStationSt.split(",")
: [];
res.data.referRainPipeSt = res.data.referRainPipeSt
? res.data.referRainPipeSt.split(",")
: [];
res.data.referRainStationSt = res.data.referRainStationSt
? res.data.referRainStationSt.split(",")
: [];
form.value = res.data;
} else {
//新增
isconfigAdd.value = true;
}
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
id: "",
ruleId: "", //规则引擎
st: "", //站点编号
isEnable: 1, // 是否启用（0否 1是）
referRainStationSt: [], //关联雨量站点(可多选，用,隔开)
referRainPipeSt: [], //关联雨水管网(可多选，用,隔开)
referFlowStationSt: [], //关联雨水管网(可多选，用,隔开)
siteRepairPropertyConfigList: [
{
property: "", //修复因子
isEnable: 1, //是否启用（0否 1是）
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
},
],
};
proxy.resetForm("configFormRef");
}
//设置修复因子
function handleSet(row) {
reset();
currentRow.value = row;
const _id = row.id || ids.value;
title.value = "修复因子";
open.value = true;
selectionList(row);
}
//批量添加修复因子
function addCofig() {
form.value.siteRepairPropertyConfigList.push({
property: "", //修复因子
isEnable: 1, //是否启用（0否 1是）
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
});
}
//删除修复因子
function delCofig(index) {
form.value.siteRepairPropertyConfigList.splice(index, 1);
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNo = 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 submitForm() {
proxy.$refs["configFormRef"].validate((valid) => {
if (valid) {
form.value.referFlowStationSt = form.value.referFlowStationSt.join(",");
form.value.referRainPipeSt = form.value.referRainPipeSt.join(",");
form.value.referRainStationSt = form.value.referRainStationSt.join(",");
form.value.st = currentRow.value.st;
if (isconfigAdd.value) {
addRtuRepairConfig(form.value).then((response) => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
} else {
updateRtuRepairConfig(form.value).then((response) => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal
.confirm("是否确认删除？")
.then(function () {
return delrtuSiteInfo(_ids);
})
.then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
})
.catch(() => {});
}
getList();
getSearchSiteList();
</script>
<style lang="scss" scoped></style>