<template>
<div class="content">
<div
v-if="!(formAll && formAllBody && formAllBody.length)"
style="height: 56px"
></div>
<div
v-if="formAll && formAllBody && formAllBody.length"
class="filter-content"
>
<!-- <span style="color:var(--white)!important;">
请先搜索站点名称或编号:
</span> -->
<!-- <el-autocomplete
v-model="site1"
:fetch-suggestions="querySearchAsync1"
placeholder="请输入内容"
@select="selectChange1"
></el-autocomplete> -->
<!-- <el-button>
搜索
</el-button> -->
<el-input
v-model="searchCode"
placeholder="请输入站点名或编号"
style="display: inline-block; width: 200px"
clearable
>
</el-input>
<el-button type="primary" @click="search"> 搜索 </el-button>
<el-cascader
v-model="querySite"
placeholder="请选择"
:options="querySiteList"
filterable
:show-all-levels="false"
clearable
:props="{
expandTrigger: 'hover',
}"
@change="selectChange"
>
</el-cascader>
<!-- <el-select v-model="querySite" filterable @change="selectChange">
<el-option
v-for="(item,index) in querySiteList"
:key="index"
:label="`${item.rtuStationCode} ${item.rtuStationName}`"
:value="item.rtuStationCode"
>:disabled="!(querySite.length&&(querySite[0].length===0))"
</el-option>
</el-select> -->
<el-button
type="primary"
@click="echoClick"
:disabled="querySite.length !== 2"
>
回显
</el-button>
<el-button
type="primary"
@click="temStorage"
:disabled="querySite.length !== 2"
>
暂存
</el-button>
<el-button
type="primary"
@click="temStorageEcho"
:disabled="querySite.length !== 2"
>
暂存回显
</el-button>
<el-button
type="primary"
@click="sunmitAll"
:disabled="querySite.length !== 2"
>
提交
</el-button>
<div class="rtu-history-box">
<el-select
v-model="rtuHistoryId"
filterable
@change="selectRtuHistoryId"
:disabled="querySite.length !== 2"
>
<el-option
v-for="(item, index) in rtuHistoryList"
:key="index"
:label="`${item.createTime}`"
:value="item.id"
>
</el-option>
</el-select>
<el-button
type="primary"
@click="echoRtuHistory"
:disabled="querySite.length !== 2"
>
回显历史记录
</el-button>
</div>
</div>
<div id="navMenuContent">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
type="border-card"
>
<el-menu-item
v-for="(item, index) in siteNameList"
:index="`${index}`"
:key="index"
>{{ item }}</el-menu-item
>
</el-menu>
</div>
<div class="switchContent">
<div
v-if="
formAll &&
formAll.length !== 0 &&
formAll[0] &&
formAllBody &&
formAllBody.length
"
>
<div v-for="(formItem, formItemIndex) in formAll" :key="formItemIndex">
<el-form
v-show="formItem[`form${formItemIndex + 1}Show`]"
:model="formItem[`form${formItemIndex + 1}`]"
:rules="rules"
ref="form"
class="demo-ruleForm"
label-position="right"
label-width="130px"
size="mini"
>
<!-- {{`form${index+1}`}} -->
<div class="row-box">
<el-row
v-for="(i, index) in formAllBody[formItemIndex + 1]"
:key="index"
:class="{ 'control-show': !i.isShow, rowClass: true }"
>
<template v-if="i.isBlock">
<!-- <div :class="{'control-show':i.isShow}"> -->
<el-col :span="6" v-if="i.name" class="subTitle">{{
i.name
}}</el-col>
<el-col
:span="6"
v-for="item in i.data"
:key="item.fieldIdentifier"
:class="{
'el-col-class': true,
stop: item.hasOwnProperty('isShow')
? !item.isShow
: false,
}"
>
<el-form-item
v-if="parseInt(item.fieldType) === 1"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
><i slot="suffix">{{ item.unit }}</i></el-input
>
</el-form-item>
<el-form-item
v-if="parseInt(item.fieldType) === 2"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-select
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
:class="{ stop: !i.isShow }"
>
<el-option
v-for="item in creatListTest(item.selectOption)"
:key="item.code"
:label="item.value"
:value="item.value"
>
<span style="float: left">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="parseInt(item.fieldType) === 3"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{
'el-form-item-input': true,
'form-switch': true,
}"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
active-color="#13ce66"
inactive-color="#ff4949"
@change="switchChange(item.fieldIdentifier)"
></el-switch>
</el-form-item>
<!-- <el-form-item
v-if="parseInt(item.fieldType) === 3 && item.fieldIdentifier ==='rtuhour'"
:label="item.fieldName"
:prop="item.fieldIdentifier"
class="el-form-item-input form-switch"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
"
active-color="#13ce66"
inactive-color="#ff4949"
:disabled="formAll[0].form1.rtuOutDtu"
></el-switch>
</el-form-item> -->
<el-form-item
v-if="parseInt(item.fieldType) === 5"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
><i slot="suffix">{{ item.unit }}</i></el-input
>
</el-form-item>
<div
v-if="parseInt(item.fieldType) === 4"
class="input-switch-div"
>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<!-- <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${0}`]" :placeholder="item.validatorMark"></el-input> -->
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${0}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${0}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${1}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${1}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${2}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${2}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${3}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${3}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${4}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${4}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${5}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${5}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${6}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${6}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${7}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex: 1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${7}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
</div>
<el-form-item
v-if="parseInt(item.fieldType) === 6"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-select
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
multiple
collapse-tags
>
<el-option
v-for="(item, index) in creatListTest(
item.selectOption
)"
:key="item.code"
:label="item.value"
:value="index"
>
<span style="float: left">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- </div> -->
</template>
</el-row>
</div>
</el-form>
</div>
</div>
</div>
<!-- <div v-if="!(formAll&&formAll[0].length)" style="height:56px">
请先选择站点
</div> -->
<!-- bottom -->
</div>
</template>
<script>
// import { float } from 'html2canvas/dist/types/css/property-descriptors/float';
export default {
data() {
return {
querySite: [], // 站点列表 树形结构
stCode: "", //
rtuHistoryId: "", // 历史框选中后的id
hexRtuCode: "", // rtucode查到的list里的后台需要的字段
querySiteList: [], // 级联框需要的数据
rtuHistoryList: [], // 历史框数据
siteNameList: [
"遥测站设置",
"中心站设置",
"传感器型号选择",
"气象传感通信设置",
"工业相机设置",
"水文传感通信",
"从机设置",
"数据滤波",
"水位计",
"雨量计",
"流量计",
"蒸发皿",
"土壤沉降仪",
"4-20mA设置",
"其他设置",
],
formAll: [], // 所有表单，结构从0开始取，代表每一个表单的每个控件的值
// siteNameList:[],
formAllBody: [], //所有字段控件 结构从1开始取，每个item有name（标题名），data数组包含控件对象
activeIndex: "0", //
rules: {}, //
searchCode: "",
loading: false,
};
},
// computed:{
// rtuDtu(){
// return this.formAll[0].form1.rtuOutDtu;
// }
// },
watch: {
querySite: {
handler(newValue, oldValue) {
console.log("this.formAll[0].form1.rtuOutDtu");
},
deep: true,
},
formAll: {
handler(newValue, oldValue) {
if (newValue.length !== 0) {
}
},
deep: true,
},
},
mounted() {
this.initWatch();
// bottom
},
methods: {
search() {
this.formAll = [];
this.querySite = [];
// console.log(this.querySite,'querySite')
this.getSiteList(this.searchCode);
},
switchChange(val) {
// console.log(val,this.formAll[0].form1,'change')
},
switchClick(val) {
console.log(val, "click");
},
echoClick() {
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
// 根据站点回显
console.log(this.querySite, "this.querySite");
this.formAll = [];
this.activeIndex = "0";
// this.getSiteList();
this.initPage(rtuCode);
this.getRtuHistoryList();
// this.handleSelect(0)
// console.log(this.activeIndex)
},
echoRtuHistory() {
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
// 根据站点和历史id，回显
this.formAll = [];
this.activeIndex = "0";
this.initPage2(rtuCode);
// this.handleSelect(0)
// console.log(this.activeIndex)
},
temStorageEcho() {
// this.activeIndex = '0'
if (
this.querySite.length === 2 &&
localStorage.getItem(this.querySite[1])
) {
this.formAll = JSON.parse(localStorage.getItem(this.querySite[1]));
console.log(this.formAll, this.querySite[1], "this.formAll");
this.$message({
message: `${this.querySite[1]}暂存回显成功`,
type: "success",
});
} else {
this.$message({ message: "无暂存内容", type: "warning" });
}
// console.log(JSON.parse(sessionStorage.getItem(name)),111)
},
temStorage() {
if (this.querySite.length === 2) {
try {
localStorage.removeItem(this.querySite[1]);
// console.log(this.formAll,'this.formAll')
localStorage.setItem(this.querySite[1], JSON.stringify(this.formAll));
this.$message({
message: `${this.querySite[1]}保存成功`,
type: "success",
});
} catch (err) {
this.$message({ message: err, type: "warning" });
}
}
// sessionStorage.setItem(name,'999')
// // location.href='http://192.168.16.189:8080/#/ConfigManager/RtuConfig'
// window.open("http://192.168.16.189:8080/#/ConfigManager/RtuConfig",'_blank');
// localStorage.getItem(name);
// console.log(sessionStorage.setItem(name),111)
},
sunmitAll() {
console.log(this.formAll, "formAll");
// 水位计 流量计 蒸发皿 rtucgq_llly1
// let shuiWeiArr = ['独立水位计','流量计内置水位计','蒸发皿']
// let liuLiangArr = ['内置水位计','外置独立水位计']
// let zhengFaMinArr = ['独立蒸发皿','水位值1','水位值2']
if (
this.formAll[2].form3.rtucgq_swly1 === "蒸发皿" &&
this.formAll[2].form3.rtucgq_zfly === "水位值1"
) {
this.$message({
message: `水位计1和蒸发皿数据冲突！`,
type: "warning",
});
return;
}
if (
this.formAll[2].form3.rtucgq_swly2 === "蒸发皿" &&
this.formAll[2].form3.rtucgq_zfly === "水位值2"
) {
this.$message({
message: `水位计2和蒸发皿数据冲突！`,
type: "warning",
});
return;
}
if (
this.formAll[2].form3.rtucgq_swly1 === "流量计内置水位计" &&
this.formAll[2].form3.rtucgq_llly1 === "外置独立水位计"
) {
this.$message({
message: `水位计1和流量计1数据冲突！`,
type: "warning",
});
return;
}
if (
this.formAll[2].form3.rtucgq_swly2 === "流量计内置水位计" &&
this.formAll[2].form3.rtucgq_llly2 === "外置独立水位计"
) {
this.$message({
message: `水位计2和流量计2数据冲突！`,
type: "warning",
});
return;
}
// return ;
// 提交所有表单，循环校验所有表单，当有个表单校验失败就break，提示该表单校验失败，根据校验成功总数或者无失败确定完成，组装数据发送到后台
var successCount = 0;
var successFlag = false;
for (var i = 0; i < 15; i++) {
this.$refs["form"][i].validate((valid) => {
if (valid) {
successCount++;
} else {
this.$message({
message: `${this.siteNameList[i]} 校验失败，请查看`,
type: "warning",
});
// alert(`${this.siteNameList[i]} 校验失败，请查看`);
// this.$notify({
// title: '警告',
// message: `${this.siteNameList[i]} 校验失败，请查看`,
// type: 'warning'
// });
successFlag = true;
// return false;
}
});
if (successFlag) {
return false;
}
}
console.log(this.stCode, "form6Inputform6Input9999999");
if (successCount === this.siteNameList.length) {
this.$message({ message: "表单全部校验成功", type: "success" });
} else {
// this.$message({message: `第${i}个表单校验失败，请查看`,type: "warning"});
}
// 组装数据需要的属性，暂时是死值，也可以循环出来
const parmas = {
data: {
rtuCode: this.rtuCode,
hexRtuCode: this.hexRtuCode,
rtuTelemeteringStationSetting: this.formAll[0].form1,
rtuCentreSetting: this.formAll[1].form2,
rtuSenseTypeSetting: this.formAll[2].form3,
rtuMeteorologicalSensingCommunicationSetting: this.formAll[3].form4,
rtuIndustrialCameraSetting: this.formAll[4].form5,
rtuHydrologicSensingCommunication: this.formAll[5].form6,
rtuSlaveSetting: this.formAll[6].form7,
rtuDataFilter: this.formAll[7].form8,
rtuWaterLevelSetting: this.formAll[8].form9,
rtuRainSetting: this.formAll[9].form10,
rtuFlowmeterSetting: this.formAll[10].form11,
rtuEvaporatingDishSetting: this.formAll[11].form12,
rtuSoilSettler: this.formAll[12].form13,
rtu4To20Setting: this.formAll[13].form14,
rtuOtherSetting: this.formAll[14].form15,
},
};
// 之前初始化时将3处的两个数组生成了需要的字段，现在需要把每处16个字段组装成两数组，删除不需要的字段,转化方法暂时写在这里
function dealInputSwitch(
str = "rtushuiwen_shangqingarrInt",
strBool = "rtushuiwen_shangqingarrboolean"
) {
var form6Input = [];
var form6Switch = [];
var strTarget = "rtuHydrologicSensingCommunication";
for (let i = 0; i < 8; i++) {
var hasInput = parmas.data[strTarget].hasOwnProperty(
`${str}input${i}`
);
if (hasInput) {
form6Input[i] = parmas.data[strTarget][`${str}input${i}`];
} else {
form6Input[i] = null;
}
parmas.data[strTarget][str] = form6Input;
delete parmas.data[strTarget][`${str}input${i}`];
var hasSwitch = parmas.data[strTarget].hasOwnProperty(
`${str}switch${i}`
);
if (hasSwitch) {
form6Switch[i] = parmas.data[strTarget][`${str}switch${i}`];
} else {
form6Switch[i] = false;
}
parmas.data[strTarget][strBool] = form6Switch;
delete parmas.data[strTarget][`${str}switch${i}`];
}
}
dealInputSwitch(
"rtushuiwen_shangqingarrInt",
"rtushuiwen_shangqingarrboolean"
);
dealInputSwitch(
"rtushuiwen_chenjiangarrInt",
"rtushuiwen_chenjiangarrboolean"
);
dealInputSwitch("rtushuiwen_zhaweiarrInt", "rtushuiwen_zhaweiarrboolean");
// let rtuAddUpTimes = parmas.data["rtuTelemeteringStationSetting"][
// "rtuAddUpTimes"
// ].sort((item1, item2) => item1 - item2);
let rtucamera_jiabao = parmas.data["rtuIndustrialCameraSetting"][
"rtucamera_jiabao"
].sort((item1, item2) => item1 - item2);
let rtuAddUpTimesNew = [];
let rtucamera_jiabaoNew = [];
// console.log(rtuAddUpTimes,'rtuAddUpTimes')
for (var i = 0; i < 24; i++) {
// rtuAddUpTimesNew.push(0);
rtucamera_jiabaoNew.push(0);
}
// rtuAddUpTimes.forEach((item, index) => {
// rtuAddUpTimesNew[item] = 1;
// });
rtucamera_jiabao.forEach((item, index) => {
rtucamera_jiabaoNew[item] = 1;
});
// parmas.data["rtuTelemeteringStationSetting"][
// "rtuAddUpTimes"
// ] = rtuAddUpTimesNew;
parmas.data["rtuIndustrialCameraSetting"][
"rtucamera_jiabao"
] = rtucamera_jiabaoNew;
this.$http
.post(`${this.nozzle.rTUSettingServiceUpdate}`, parmas)
.then((res) => {
// console.log(res,'rTUSettingServiceUpdate')
this.echoClick();
});
// console.log(parmas,'form6Inputform6Input')
// this.formAll=[]
// this.initPage(this.querySiteList[1])
},
creatListTest(arr) {
var arrList = arr.split(",");
// console.log(arrList,'arrrrrrrr')
let list = arrList.map((item, index) => {
let obj = {};
obj["code"] = index;
obj["value"] = item;
return obj;
});
return list;
},
creatList(arr) {
// 下拉框需要的option数据，ele需要value和lable，value是点击后的字段值，lable是展示值
let list = arr.map((item, index) => {
let obj = {};
obj["code"] = index + 1;
obj["value"] = item;
return obj;
});
return list;
},
handleSelect(key) {
this.activeIndex = key;
// console.log(key)
for (var i = 0; i < 15; i++) {
if (key != i) {
this.formAll[i][`form${i + 1}Show`] = false;
} else {
this.formAll[i][`form${i + 1}Show`] = true;
}
}
},
selectChange(val) {
// this.querySite = []
this.rtuHistoryId = "";
// console.log(val,'val')
// if(this.querySite.length!==2) return;
this.echoClick(val);
this.getRtuHistoryList();
},
selectChange1(val) {
// console.log(val,'val') input搜索
this.echoClick(val);
this.getRtuHistoryList();
},
selectRtuHistoryId(val) {
console.log(val, "selectRtuHistoryId");
// this.echoClick(val);
},
async initPage(site) {
this.loading = true;
// 切换站点后去请求历史下拉框
// this.getRtuHistoryList()
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.rTUSettingServiceQueryById}?rtuCode=${site}`
);
if (resFirst.data.code === 507) {
this.$message(resFirst.data.msg);
}
let resData = resFirst.data.data;
let formArr = [
"rtuTelemeteringStationSetting",
"rtuCentreSetting",
"rtuSenseTypeSetting",
"rtuMeteorologicalSensingCommunicationSetting",
"rtuIndustrialCameraSetting",
"rtuHydrologicSensingCommunication",
"rtuSlaveSetting",
"rtuDataFilter",
"rtuWaterLevelSetting",
"rtuRainSetting",
"rtuFlowmeterSetting",
"rtuEvaporatingDishSetting",
"rtuSoilSettler",
"rtu4To20Setting",
"rtuOtherSetting",
];
// console.log(this.formAll,resData,'ressssss')
// this.formAll={}
this.rtuCode = resData.rtuCode;
this.hexRtuCode = resData.hexRtuCode;
for (let i = 1; i <= 15; i++) {
let obj = {};
// 水文传感里是第6个表单
if (i !== 6 && i !== 5) {
obj[`form${i}`] = resData[formArr[i - 1]];
}
// else if (i === 1) {
// var formObj = Object.assign({},resData[formArr[i - 1]]);
// var rtuAddUpTimesNew = [];
// if (!formObj.hasOwnProperty("rtuAddUpTimes")) {
// return;
// }
// formObj.rtuAddUpTimes.forEach((res, index) => {
// if (res === 1) {
// rtuAddUpTimesNew.push(index);
// }
// });
// // form1Obj.hasOwnProperty('rtuAddUpTimes')
// formObj.rtuAddUpTimes = rtuAddUpTimesNew;
// // console.log(form1Obj,'form1Obj')
// obj[`form${i}`] = formObj;
// }
else if (i === 5) {
let formObj = Object.assign({}, resData[formArr[i - 1]]);
let rtucamera_jiabaoNew = [];
if (!formObj.hasOwnProperty("rtucamera_jiabao")) {
return;
}
formObj.rtucamera_jiabao.forEach((res, index) => {
if (res === 1) {
rtucamera_jiabaoNew.push(index);
}
});
formObj.rtucamera_jiabao = rtucamera_jiabaoNew;
// console.log(form1Obj,'form1Obj')
obj[`form${i}`] = formObj;
} else if (i === 6) {
var form6Obj = resData[formArr[i - 1]];
// 每一处需要input switch各8个共16个模拟字段，只处理第6个表单
function creatInputSwitch(str, strBool) {
if (
form6Obj.hasOwnProperty(str) &&
form6Obj.hasOwnProperty(strBool)
) {
for (let i = 0; i < 8; i++) {
form6Obj[`${str}input${i}`] = form6Obj[str][i];
form6Obj[`${str}switch${i}`] = form6Obj[strBool][i];
}
delete form6Obj[str];
delete form6Obj[strBool];
}
}
creatInputSwitch(
"rtushuiwen_shangqingarrInt",
"rtushuiwen_shangqingarrboolean"
);
creatInputSwitch(
"rtushuiwen_chenjiangarrInt",
"rtushuiwen_chenjiangarrboolean"
);
creatInputSwitch(
"rtushuiwen_zhaweiarrInt",
"rtushuiwen_zhaweiarrboolean"
);
obj[`form${i}`] = form6Obj;
}
if (i !== 1) {
obj[`form${i}Show`] = false;
} else {
obj[`form${i}Show`] = true;
}
// 表单数据赋值完成，控制表单切换的formshow,也放在一起了
this.formAll.push(obj);
// console.log(this.formAll,this.stCode,'this.formAll')
}
this.loading = false;
},
async initPage2(rtuCode) {
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.RTUVersionRevert}?rtuCode=${rtuCode}&id=${this.rtuHistoryId}`
);
let resData = resFirst.data.data;
let formArr = [
"rtuTelemeteringStationSetting",
"rtuCentreSetting",
"rtuSenseTypeSetting",
"rtuMeteorologicalSensingCommunicationSetting",
"rtuIndustrialCameraSetting",
"rtuHydrologicSensingCommunication",
"rtuSlaveSetting",
"rtuDataFilter",
"rtuWaterLevelSetting",
"rtuRainSetting",
"rtuFlowmeterSetting",
"rtuEvaporatingDishSetting",
"rtuSoilSettler",
"rtu4To20Setting",
"rtuOtherSetting",
];
console.log(this.formAll, resData, "ressssss");
// this.formAll={}
this.rtuCode = resData.rtuCode;
this.hexRtuCode = resData.hexRtuCode;
for (let i = 1; i <= 15; i++) {
let obj = {};
// 水文传感里是第6个表单
if (i !== 6 && i !== 5) {
obj[`form${i}`] = resData[formArr[i - 1]];
}
// else if (i === 1) {
// var formObj = Object.assign({},resData[formArr[i - 1]]);
// var rtuAddUpTimesNew = [];
// if (!formObj.hasOwnProperty("rtuAddUpTimes")) {
// return;
// }
// formObj.rtuAddUpTimes.forEach((res, index) => {
// if (res === 1) {
// rtuAddUpTimesNew.push(index);
// }
// });
// // form1Obj.hasOwnProperty('rtuAddUpTimes')
// formObj.rtuAddUpTimes = rtuAddUpTimesNew;
// // console.log(form1Obj,'form1Obj')
// obj[`form${i}`] = formObj;
// }
else if (i === 5) {
let formObj = Object.assign({}, resData[formArr[i - 1]]);
let rtucamera_jiabaoNew = [];
if (!formObj.hasOwnProperty("rtucamera_jiabao")) {
return;
}
formObj.rtucamera_jiabao.forEach((res, index) => {
if (res === 1) {
rtucamera_jiabaoNew.push(index);
}
});
formObj.rtucamera_jiabao = rtucamera_jiabaoNew;
// console.log(form1Obj,'form1Obj')
obj[`form${i}`] = formObj;
} else if (i === 6) {
var form6Obj = resData[formArr[i - 1]];
// 每一处需要input switch各8个共16个模拟字段，只处理第6个表单
function creatInputSwitch(str, strBool) {
if (
form6Obj.hasOwnProperty(str) &&
form6Obj.hasOwnProperty(strBool)
) {
for (let i = 0; i < 8; i++) {
form6Obj[`${str}input${i}`] = form6Obj[str][i];
form6Obj[`${str}switch${i}`] = form6Obj[strBool][i];
}
delete form6Obj[str];
delete form6Obj[strBool];
}
}
creatInputSwitch(
"rtushuiwen_shangqingarrInt",
"rtushuiwen_shangqingarrboolean"
);
creatInputSwitch(
"rtushuiwen_chenjiangarrInt",
"rtushuiwen_chenjiangarrboolean"
);
creatInputSwitch(
"rtushuiwen_zhaweiarrInt",
"rtushuiwen_zhaweiarrboolean"
);
obj[`form${i}`] = form6Obj;
}
if (i !== 1) {
obj[`form${i}Show`] = false;
} else {
obj[`form${i}Show`] = true;
}
// 表单数据赋值完成，控制表单切换的formshow,也放在一起了
this.formAll.push(obj);
// console.log(this.formAll,this.stCode,'this.formAll')
}
},
validatorAll(rule, value, callback, type, sug, alart) {
let typeLocal = type;
let sugLocal = sug;
let alartLocal = alart;
// 数字范围、数字长度、字符串长度、正则等
if (value && parseInt(typeLocal) === 1) {
// 数字范围
if (value !== undefined) {
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (sug1 <= value && value <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
} else {
callback();
}
} else if (value && parseInt(typeLocal) === 2 && sugLocal) {
// 正则
let regExp = sugLocal.slice(1, -1);
let reg = new RegExp(regExp);
if (reg.test(value)) {
callback();
} else {
callback(new Error(alartLocal));
}
} else if (value && parseInt(typeLocal) === 3) {
if (sugLocal === undefined || sugLocal === "") {
// 下拉框 不显示错误信息
callback();
} else {
// console.log(value,sugLocal.indexOf(','),'value')
if (sugLocal.indexOf(",") !== -1) {
// 带，的是范围，不带则是固定长度
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (value.length >= sug1 && value.length <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
} else if (sugLocal.indexOf(",") === -1) {
// console.log(sugLocal.indexOf(','),parseInt(sugLocal))
if (value.length === parseInt(sugLocal)) {
callback();
} else {
callback(new Error(alartLocal));
}
}
}
} else if (value && parseInt(typeLocal) === 4) {
if (sugLocal === undefined || sugLocal === "") {
callback();
} else {
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (sug1 <= value && value <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
}
} else if (value && parseInt(typeLocal) === 5) {
// console.log(value,'value')
if (typeof value !== "number") {
callback(new Error("请输入纯数字"));
} else {
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (sug1 <= value && value <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
}
} else {
callback();
}
},
formControl() {
function uniq(array) {
var temp = []; //一个新的临时数组
for (var i = 0; i < array.length; i++) {
if (temp.indexOf(array[i]) == -1) {
temp.push(array[i]);
}
}
return temp;
}
// 生成表单控件的接口
this.$http.post(this.nozzle.rtuPageQueryPage).then((res) => {
var dataRes = res.data.data;
// console.log(dataRes,'dataRes')
for (var i in dataRes) {
if (dataRes[i].length !== 0) {
dataRes[i].forEach((item, index, arr) => {
if (item.fieldType !== 5) {
this.rules[item.fieldIdentifier] = [
{
validator: (rule, value, callback) => {
this.validatorAll(
rule,
value,
callback,
item.validatorType,
item.validatorRules,
item.validatorErrorText
);
},
trigger: "change",
},
];
} else if (item.fieldType === 5) {
this.rules[item.fieldIdentifier] = [
{
validator: (rule, value, callback) => {
this.validatorAll(
rule,
value,
callback,
item.validatorType,
item.validatorRules,
item.validatorErrorText
);
},
trigger: "change",
},
{ required: true, message: "必填", trigger: "change" },
];
}
});
let sub_titleList = dataRes[i].map((item) => {
return item.subTitle;
});
var newObj = [];
// 根据小标题去重
uniq(sub_titleList).forEach((item) => {
var obj = { name: item, data: [], isShow: true, isBlock: true };
var data = dataRes[i].forEach((l) => {
l.isShow = true;
if (
l.subTitle === item &&
l.subTitle !== "" &&
l.subTitle !== undefined
) {
obj.data.push(l);
} else if (l.subTitle === "" || l.subTitle === undefined) {
obj.data.push(l);
}
});
if (obj.name === undefined) {
return;
}
// obj.data= data 将后台数据生成带有小标题的
newObj.push(obj);
});
this.$set(this.formAllBody, i, newObj);
}
}
console.log(this.formAllBody, "999");
});
},
async getSiteList(val = "") {
// ,{stCode:this.querySite}
await this.$http
.post(`${this.nozzle.rTUSettingServiceQueryList}?stCode=${val}`)
.then((res) => {
// console.log(res.data.data,'resss')
this.querySiteList = res.data.data;
// this.querySiteList.push({
// label:2001,
// value:2001
// });
// this.querySite[0] = this.querySiteList[0].children[0].label;
});
},
async getRtuHistoryList() {
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
await this.$http
//`${this.nozzle.queryRTUSettingHistory}?stCode=${this.querySite}`
.post(`${this.nozzle.queryRTUSettingHistory}?rtuCode=${rtuCode}`)
.then((res) => {
// console.log(res.data,'resss')
this.rtuHistoryList = res.data.data;
// this.querySite = this.querySiteList[0].rtuStationCode;
});
},
initWatch() {
// console.log(this.formAll,this.formAllBody,'this.formAll[0]')
//// 第一个函数就是处理你要监听的属性，只要将其return出去就行
// 外置dtu开关
this.$watch(
function () {
return this.formAll[0].form1.rtuOutDtu;
},
function (newVal, oldVal) {
this.formAllBody["1"].forEach((item, index, arr) => {
if (item.name === "外置DTU设置") {
arr[index].isShow = newVal;
}
});
}
);
// GPRS，LORA开关
this.$watch(
function () {
return this.formAll[0].form1.rtuInnerMode;
},
function (newVal, oldVal) {
this.formAllBody["1"].forEach((item, index, arr) => {
if (item.name === "内置LoRa相关配置") {
arr[index].isShow = newVal === "LORA" ? true : false;
}
});
this.formAllBody["2"].forEach((item, index, arr) => {
if (item.name === "中心站1") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "中心站2") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "中心站3") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "中心站4(备份站)") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "VPN专网设置1") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "VPN专网设置2") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "NBIOT网络设置") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "中心站其他设置") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
if (item.name === "远程后台服务器设置") {
arr[index].isShow = newVal === "GPRS" ? true : false;
}
});
}
);
// 水位计雷达
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_shuiwei1;
},
function (newVal, oldVal) {
if (
!(
(newVal === "NF-WGX-5小雷达水位计") |
(newVal === "NF-WGX-6大雷达水位计")
)
) {
this.formAllBody["9"][2].isShow = false;
} else {
this.formAllBody["9"][2].isShow = true;
}
}
);
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_shuiwei2;
},
function (newVal, oldVal) {
if (
!(
(newVal === "NF-WGX-5小雷达水位计") |
(newVal === "NF-WGX-6大雷达水位计")
)
) {
this.formAllBody["9"][2].isShow = false;
} else {
this.formAllBody["9"][4].isShow = true;
}
}
);
// 流量计水龟 流量计1 流量计1设置
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_liuliang1;
},
function (newVal, oldVal) {
let arr = [
"4-20mA流量计",
"NACH-FL900流速仪",
"LWGY涡轮流量计",
"SM_311水表",
];
if (arr.indexOf(newVal) !== -1) {
this.formAll[10].form11.rtull_ll1_jiemian = "直接流量输出";
this.formAllBody["11"][1].data[0].isShow = false;
} else {
this.formAllBody["11"][1].data[0].isShow = true;
}
}
);
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_liuliang2;
},
function (newVal, oldVal) {
let arr = [
"4-20mA流量计",
"NACH-FL900流速仪",
"LWGY涡轮流量计",
"SM_311水表",
];
if (arr.indexOf(newVal) !== -1) {
this.formAll[10].form11.rtull_ll2_jiemian = "直接流量输出";
this.formAllBody["11"][4].data[0].isShow = false;
} else {
this.formAllBody["11"][4].data[0].isShow = true;
}
}
);
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_liuliang2;
},
function (newVal, oldVal) {
if (!(newVal === "NF_LZX_2水龟")) {
this.formAllBody["11"][6].isShow = false;
} else {
this.formAllBody["11"][6].isShow = true;
}
}
);
// 遥测站 采集标志 开关， 存储周期 rtuSaveCircle
this.$watch(
function () {
return this.formAll[0].form1.rtucjFlagTrans;
},
function (newVal, oldVal) {
this.formAllBody["1"][0].data[3].isShow = !newVal;
}
);
// 域名传输
this.$watch(
function () {
return this.formAll[1].form2.rtuZxZx1RealmNameTrans;
},
function (newVal, oldVal) {
this.formAllBody["2"][0].data[2].isShow = newVal;
this.formAllBody["2"][0].data[3].isShow = !newVal;
}
);
this.$watch(
function () {
return this.formAll[1].form2.rtuZxZx2RealmNameTrans;
},
function (newVal, oldVal) {
this.formAllBody["2"][2].data[2].isShow = newVal;
this.formAllBody["2"][2].data[3].isShow = !newVal;
}
);
this.$watch(
function () {
return this.formAll[1].form2.rtuZxZx3RealmNameTrans;
},
function (newVal, oldVal) {
this.formAllBody["2"][4].data[2].isShow = newVal;
this.formAllBody["2"][4].data[3].isShow = !newVal;
}
);
this.$watch(
function () {
return this.formAll[1].form2.rtuZxZx4RealmNameTrans;
},
function (newVal, oldVal) {
this.formAllBody["2"][6].data[2].isShow = newVal;
this.formAllBody["2"][6].data[3].isShow = !newVal;
}
);
// 外置dtu设置，下拉框
this.$watch(
function () {
return this.formAll[0].form1.rtuother_dtu_type;
},
function (newVal, oldVal) {
var targetArr = [
[true, true, true, true, false],
[true, true, false, false, false],
[false, false, false, false, true],
[false, false, false, false, false],
];
let select = [
"LoRa-利尔达CN470",
"ManThink-门思科技",
"BC28电信管理平台NB",
"M5311移动平台NB",
]; // 下拉框值，对应targetArr其他5个控件显示的4状态
let strArr = [
"JoinEUI",
"频率格式",
"上行频率",
"下行频率",
"电信NB服务ID",
];
this.formAllBody["1"][2].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldName === strArr[i]) {
arr[index].isShow = targetArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
// 从机1 ，2设置
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_congji1;
},
function (newVal, oldVal) {
var targetNameArr = [
["无效参数", "无效参数", "无效参数"],
["抽水周期", "抽水超时", "排水超时"],
["无效参数", "无效参数", "无效参数"],
["采集周期", "通道延时", "演示递增"],
["采集周期", "通道延时", "无效参数"],
["查询周期", "抽水超时", "排水超时"],
];
var targetStatusArr = [
[false, false, false],
[true, true, true],
[false, false, false],
[true, true, true],
[true, true, false],
[true, true, true],
];
let select = [
"默认从机",
"电机驱动板（水质监测柜）",
"VGUS屏幕（水质监测柜）",
"二供（净水器）",
"二供（水箱）",
"主控板（5/9参数水质监测柜）",
]; // 下拉框值，对应targetArr其他5个控件显示的4状态
let strArr = ["rtucj1_canshu1", "rtucj1_canshu2", "rtucj1_canshu3"];
this.formAllBody["7"][1].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldIdentifier === strArr[i]) {
arr[index].isShow = targetStatusArr[select.indexOf(newVal)][i];
arr[index].fieldName = targetNameArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
this.$watch(
function () {
return this.formAll[6].form7.rtucj_kaiguan1;
},
function (newVal, oldVal) {
this.formAllBody["7"][1].isShow = newVal;
}
);
this.$watch(
function () {
return this.formAll[6].form7.rtucj_kaiguan2;
},
function (newVal, oldVal) {
this.formAllBody["7"][3].isShow = newVal;
}
);
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_congji2;
},
function (newVal, oldVal) {
var targetNameArr = [
["无效参数", "无效参数", "无效参数"],
["抽水周期", "抽水超时", "排水超时"],
["无效参数", "无效参数", "无效参数"],
["采集周期", "通道延时", "演示递增"],
["采集周期", "通道延时", "无效参数"],
["查询周期", "抽水超时", "排水超时"],
];
var targetStatusArr = [
[false, false, false],
[true, true, true],
[false, false, false],
[true, true, true],
[true, true, false],
[true, true, true],
];
let select = [
"默认从机",
"电机驱动板（水质监测柜）",
"VGUS屏幕（水质监测柜）",
"二供（净水器）",
"二供（水箱）",
"主控板（5/9参数水质监测柜）",
]; // 下拉框值，对应targetArr其他5个控件显示的4状态
let strArr = ["rtucj2_canshu1", "rtucj2_canshu2", "rtucj2_canshu3"];
this.formAllBody["7"][3].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldIdentifier === strArr[i]) {
arr[index].isShow = targetStatusArr[select.indexOf(newVal)][i];
arr[index].fieldName = targetNameArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
// 流量计 流量槽
this.$watch(
function () {
return this.formAll[10].form11.rtull_ll1_jiemian;
},
function (newVal, oldVal) {
var targetNameArr = [
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"无效参数",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"上地宽度",
"堰槽高度",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"上地宽度",
"堰槽高度",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"窄底宽度",
"堰槽高度",
"宽底宽度",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"槽堰直径",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"无效参数",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"溢流高度",
"流量校正",
"淤积深度",
"无效参数",
"槽堰高度",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"溢流高度",
"流量校正",
"淤积深度",
"槽堰高度",
"槽序号",
"无效参数",
"堰槽截面表高度分辨率",
],
];
var targetStatusArr = [
[true, true, true, false, false, false, false],
[true, true, true, true, true, false, false],
[true, true, true, true, true, false, false],
[true, true, true, true, true, true, false],
[true, true, true, false, true, false, false],
[true, true, true, false, false, false, true],
[true, true, true, false, true, false, false],
[true, true, true, true, true, false, false],
];
let select = [
"直接流量输出",
"三角堰",
"矩形堰",
"梯形堰",
"圆管",
"自定义截面",
"直角三角堰明渠",
"巴歇尔槽明渠",
]; // 下拉框值，
let strArr = [
"rtull_ll1_gaodu",
"rtull_ll1_jiaozheng",
"rtull_ll1_shendu",
"rtull_ll1_shangdikuandu",
"rtull_ll1_yancaogaodu",
"rtull_ll1_xiadikuandu",
"rtull_ll1_fenbian",
];
this.formAllBody["11"][1].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldIdentifier === strArr[i]) {
arr[index].isShow = targetStatusArr[select.indexOf(newVal)][i];
arr[index].fieldName = targetNameArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
this.$watch(
function () {
return this.formAll[10].form11.rtull_ll2_jiemian;
},
function (newVal, oldVal) {
var targetNameArr = [
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"无效参数",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"上地宽度",
"堰槽高度",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"上地宽度",
"堰槽高度",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"窄底宽度",
"堰槽高度",
"宽底宽度",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"槽堰直径",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"无效参数",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"溢流高度",
"流量校正",
"淤积深度",
"无效参数",
"槽堰高度",
"无效参数",
"堰槽截面表高度分辨率",
],
[
"溢流高度",
"流量校正",
"淤积深度",
"槽堰高度",
"槽序号",
"无效参数",
"堰槽截面表高度分辨率",
],
];
var targetStatusArr = [
[true, true, true, false, false, false, false],
[true, true, true, true, true, false, false],
[true, true, true, true, true, false, false],
[true, true, true, true, true, true, false],
[true, true, true, false, true, false, false],
[true, true, true, false, false, false, true],
[true, true, true, false, true, false, false],
[true, true, true, true, true, false, false],
];
let select = [
"直接流量输出",
"三角堰",
"矩形堰",
"梯形堰",
"圆管",
"自定义截面",
"直角三角堰明渠",
"巴歇尔槽明渠",
]; // 下拉框值，
let strArr = [
"rtull_ll2_gaodu",
"rtull_ll2_jiaozheng",
"rtull_ll2_shendu",
"rtull_ll2_shangdikuandu",
"rtull_ll2_yancaogaodu",
"rtull_ll2_xiadikuandu",
"rtull_ll2_fenbian",
];
this.formAllBody["11"][4].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldIdentifier === strArr[i]) {
arr[index].isShow = targetStatusArr[select.indexOf(newVal)][i];
arr[index].fieldName = targetNameArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
// 蒸发皿
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_zfly;
},
function (newVal, oldVal) {
var targetNameArr = [
["安装高度", "量程", "最小加水量"],
["无效参数", "无效参数", "最小加水量"],
["无效参数", "无效参数", "最小加水量"],
];
var targetStatusArr = [
[true, true, true],
[false, false, true],
[false, false, true],
];
let select = ["独立蒸发皿", "水位值1", "水位值2"]; // 下拉框值，对应targetArr其他5个控件显示的4状态
let strArr = ["rtuzf_gaodu", "rtuzf_liangcheng", "rtuzf_zuixiao"];
this.formAllBody["12"][0].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldIdentifier === strArr[i]) {
arr[index].isShow = targetStatusArr[select.indexOf(newVal)][i];
arr[index].fieldName = targetNameArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
// 4am， 存储周期 rtuSaveCircle
this.$watch(
function () {
return this.formAll[2].form3.rtucgq_liuliang1;
},
function (newVal, oldVal) {
var targetNameArr = [
[
"安装高度",
"流量校正",
"淤积深度",
"无效参数",
"无效参数",
"无效参数",
"堰槽截面表高度分辨率",
],
];
var targetStatusArr = [
[true, true, true, false, false, false, false],
];
let select = ["独立蒸发皿", "水位值1", "水位值2"]; // 下拉框值，对应targetArr其他5个控件显示的4状态
let strArr = ["rtuzf_gaodu", "rtuzf_liangcheng", "rtuzf_zuixiao"];
this.formAllBody["11"][1].data.forEach((item, index, arr) => {
for (let i = 0; i < strArr.length; i++) {
if (arr[index].fieldIdentifier === strArr[i]) {
arr[index].isShow = targetStatusArr[select.indexOf(newVal)][i];
arr[index].fieldName = targetNameArr[select.indexOf(newVal)][i];
}
}
});
// console.log(this.formAllBody['1'][2].data, select.indexOf(newVal),'_this.formAllBody[]')
}
);
},
},
created() {
this.getSiteList().then((res) => {
// this.querySiteList[0].rtuStationCode
// this.initPage(this.querySite);
// this.getRtuHistoryList()
});
this.formControl();
// console.log(666)
},
updated() {
// if(this.formAll.length !==0){
// this.initWatch()
// }
},
// beforeRouteLeave (to, from, next) {
// // 导航离开该组件的对应路由时调用
// // 可以访问组件实例 `this`
// this.$confirm("请检查是否需要暂存！", "提示", {
// confirmButtonText: "已暂存",
// cancelButtonText: "取消",
// type: "warning"
// }).then(res=>{ next() }).catch(() => {});
// }
};
</script>
<style lang="scss" scoped>
// /deep/.el-cascader__dropdown{
// // background-color: black;
// .el-scrollbar{
// .el-cascader-menu__list{
// background-color: black!important;
// }
// }
// }
.content {
width: 100% !important;
height: 100% !important;
#navMenuContent {
/* height: calc(100% - 20px);
width: calc(100% - 20px);
float: left;
border: 1px solid aqua;
box-sizing: border-box;
margin: 10px;
position: relative; */
width: 100%;
/* background-color: #fff; */
}
.filter-content {
text-align: left;
padding: 10px;
position: relative;
.rtu-history-box {
padding: 10px 0 0 0;
position: absolute;
right: 100px;
top: 0;
}
}
.switchContent {
// color: rgb(99, 96, 96);
color: red;
/* background-color: #fff; */
/* background-color: #fff; */
// color: white !important;
padding: 2% 0 0 0;
/deep/ .el-form {
.el-col {
height: 51px !important;
.el-form-item {
margin: 11px 0 11px 0 !important;
.el-form-item__label {
// text-align: right;
width: 180px !important;
text-align: right !important;
color: var(--white) !important;
}
.el-form-item__content {
margin: 0 0 0 180px !important;
.el-select {
width: 100% !important;
.el-input .el-input__inner {
width: 100% !important;
}
}
.el-input {
width: 100% !important;
.el-input__inner {
width: 100% !important;
color: var(--white) !important;
}
}
i {
color: var(--white);
font-style: normal !important;
padding-right: 5px !important;
}
//
}
}
// input的单位，i图标
// .el-form-item__content i{
// color: var(--white);
// font-style:normal !important;
// padding-right: 5px !important;
// }
// 普通input框100，select框也100
// .el-form-item.el-form-item-input{
// // margin:11px 0 11px 0 !important;
// .el-form-item__content{
// // .el-select, .el-input{
// // width: 100%;
// // }
// .el-input__inner{
// // width: 100%;
// }
// }
// }
// 小标题
&.subTitle {
/* height:40px!important; */
line-height: 51px !important;
color: #409eff !important;
/* margin-top: 11px; */
}
// 普通switch框，左180，右居中
.el-form-item.el-form-item-input.form-switch .el-form-item__label {
width: 180px !important;
}
.el-form-item.el-form-item-input.form-switch .el-form-item__content {
// width: 100% !important;
text-align: center !important;
margin-left: 180px !important;
}
.input-switch-div {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 1000px !important;
display: flex !important;
// 土地商情哪里，input content左为0，.input-switch-div定位，el-form-item__content定位66px
.el-form-item-input.input-switch .el-form-item__content {
margin-left: 0 !important;
}
.el-form-item-input.input-switch .el-form-item-input {
/* display: flex; */
margin: initial !important;
}
.el-form-item .el-form-item__content .el-input .el-input__inner {
width: 66px !important;
}
}
i {
color: var(--white);
font-style: normal !important;
padding-right: 5px !important;
}
//
}
}
// input的单位，i图标
// .el-form-item__content i{
// color: var(--white);
// font-style:normal !important;
// padding-right: 5px !important;
// }
// 普通input框100，select框也100
// .el-form-item.el-form-item-input{
// // margin:11px 0 11px 0 !important;
// .el-form-item__content{
// // .el-select, .el-input{
// // width: 100%;
// // }
// .el-input__inner{
// // width: 100%;
// }
// }
// }
// 小标题
&.subTitle {
/* height:40px!important; */
line-height: 51px !important;
color: aqua !important;
/* margin-top: 11px; */
}
// 普通switch框，左180，右居中
.el-form-item.el-form-item-input.form-switch .el-form-item__label {
width: 180px !important;
}
.el-form-item.el-form-item-input.form-switch .el-form-item__content {
// width: 100% !important;
text-align: center !important;
margin-left: 180px !important;
}
.input-switch-div {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 1000px !important;
display: flex !important;
// 土地商情哪里，input content左为0，.input-switch-div定位，el-form-item__content定位66px
.el-form-item-input.input-switch .el-form-item__content {
margin-left: 0 !important;
}
.rowClass.control-show {
// background-color: #fff;
// cursor: pointer;
background-color: rgba(204, 204, 204, 0.397) !important;
pointer-events: none !important;
border: 1px solid pink;
box-sizing: border-box;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// .control-show{
// }
}
.stop {
background-color: rgba(204, 204, 204, 0.397);
pointer-events: none;
border-radius: 10px;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// box-shadow: pink 10px 10px 10px ;
.el-input__suffix-inner {
pointer-events: none;
}
}
}
}
.rowClass {
.el-col-class {
position: relative;
}
}
.rowClass:nth-child(2n + 1) {
// background-color: rgba( 245,222,179,0.3);
box-shadow: rgba(144, 147, 153, 0.32) 0px 2px 4px 0px;
margin: 10px 0 0 0;
border-radius: 10px;
}
.rowClass:nth-child(2n) {
background-color: rgba(144, 147, 153, 0.3);
box-shadow: rgba(144, 147, 153, 0.32) 0px 2px 4px 0px;
margin: 10px 0 0 0;
border-radius: 10px;
}
.rowClass.control-show {
// background-color: #fff;
// cursor: pointer;
background-color: #ccc !important;
pointer-events: none !important;
border: 1px solid pink;
box-sizing: border-box;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// .control-show{
// }
}
.stop {
background-color: #ccc;
pointer-events: none;
border-radius: 10px;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// box-shadow: pink 10px 10px 10px ;
.el-input__suffix-inner {
pointer-events: none;
}
}
}
// /deep/.el-menu-item{
// background-color: #fff !important;
// }
/deep/ .el-menu.el-menu-demo.el-menu--horizontal {
border-bottom: initial !important;
background-color: initial !important;
li.el-menu-item {
background-image: initial !important;
background-color: #fff !important;
}
.el-menu-item.is-active {
// background-color: var(--dialogtitle)!important;
// background-color: #fff !important;
}
.el-menu-item:hover {
background-color: #fff !important;
}
}
// .el-menu--horizontal>.el-menu-item.is-active{
// background-color: #fff !important;
// }
// .el-menu-item .is-active {
// background-color: #fff !important;
// }
// .el-menu-item:hover {
// background-color: #fff !important;
// }
// /deep/ .el-menu-item {
// background-color: #fff!important;
// }
</style>
<style>
.content .switchContent[data-v-6d3cd89e] .el-form .rowClass.control-show {
background-color: #968282 !important;
}
</style>
