diff --git a/src/components/ConfigManager/RtuConfig.vue b/src/components/ConfigManager/RtuConfig.vue index 2aa6409..60226ac 100644 --- a/src/components/ConfigManager/RtuConfig.vue +++ b/src/components/ConfigManager/RtuConfig.vue @@ -2,7 +2,7 @@
搜索 --> - - + - - 搜索 - + 搜索 + > - + 回显 - + 暂存 - + 暂存回显 - + 提交
- + - + 回显历史记录
@@ -96,10 +123,10 @@
@@ -131,7 +158,9 @@ :key="item.fieldIdentifier" :class="{ 'el-col-class': true, - stop: item.hasOwnProperty('isShow') ? !item.isShow : false + stop: item.hasOwnProperty('isShow') + ? !item.isShow + : false, }" > { - 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; - } - } - ); - // 流量计水鬼 - this.$watch( - function() { - return this.formAll[2].form3.rtucgq_liuliang1; - }, - function(newVal, oldVal) { - var targetNameArr = [ - "直接流量输出", - "安装高度", - "流量校正", - "淤积深度", - "无效参数", - "无效参数", - "无效参数", - "堰槽截面表高度分辨率" - ]; - var targetStatusArr = [ - false, - true, - true, - true, - false, - false, - false, - false - ]; - // let select= ['直接流量输出','三角堰','矩形堰','梯形堰','圆管','自定义截面','直角三角堰明渠','巴歇尔槽明渠'] // 下拉框值， - let strArr = [ - "rtull_ll1_jiemian", - "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]; - } - } - }); - } - ); - 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[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[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[]') - } - ); + this.initWatch(); // bottom }, methods: { - search(){ + search() { this.formAll = []; - this.querySite= [] + this.querySite = []; // console.log(this.querySite,'querySite') - this.getSiteList(this.searchCode) + this.getSiteList(this.searchCode); }, - switchChange(val){ + switchChange(val) { // console.log(val,this.formAll[0].form1,'change') }, switchClick(val) { @@ -1093,20 +635,35 @@ }, temStorageEcho() { // this.activeIndex = '0' - if(localStorage.getItem(this.querySite[1])){ - this.formAll = JSON.parse(localStorage.getItem(name)); - this.$message({ message: "暂存回显成功", type: "success" }); + 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() { - try { - 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" }); + 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' @@ -1115,17 +672,63 @@ // 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 => { + this.$refs["form"][i].validate((valid) => { if (valid) { successCount++; } else { this.$message({ message: `${this.siteNameList[i]} 校验失败，请查看`, - type: "warning" + type: "warning", }); // alert(`${this.siteNameList[i]} 校验失败，请查看`); // this.$notify({ @@ -1166,8 +769,8 @@ rtuEvaporatingDishSetting: this.formAll[11].form12, rtuSoilSettler: this.formAll[12].form13, rtu4To20Setting: this.formAll[13].form14, - rtuOtherSetting: this.formAll[14].form15 - } + rtuOtherSetting: this.formAll[14].form15, + }, }; // 之前初始化时将3处的两个数组生成了需要的字段，现在需要把每处16个字段组装成两数组，删除不需要的字段,转化方法暂时写在这里 function dealInputSwitch( @@ -1236,7 +839,7 @@ ] = rtucamera_jiabaoNew; this.$http .post(`${this.nozzle.rTUSettingServiceUpdate}`, parmas) - .then(res => { + .then((res) => { // console.log(res,'rTUSettingServiceUpdate') this.echoClick(); }); @@ -1278,11 +881,11 @@ }, selectChange(val) { // this.querySite = [] - this.rtuHistoryId='' + this.rtuHistoryId = ""; // console.log(val,'val') // if(this.querySite.length!==2) return; this.echoClick(val); - this.getRtuHistoryList() + this.getRtuHistoryList(); }, selectChange1(val) { // console.log(val,'val') input搜索 @@ -1294,7 +897,7 @@ // this.echoClick(val); }, async initPage(site) { - this.loading = true + this.loading = true; // 切换站点后去请求历史下拉框 // this.getRtuHistoryList() // 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、 @@ -1320,7 +923,7 @@ "rtuEvaporatingDishSetting", "rtuSoilSettler", "rtu4To20Setting", - "rtuOtherSetting" + "rtuOtherSetting", ]; // console.log(this.formAll,resData,'ressssss') // this.formAll={} @@ -1402,7 +1005,7 @@ this.formAll.push(obj); // console.log(this.formAll,this.stCode,'this.formAll') } - this.loading = false + this.loading = false; }, async initPage2(rtuCode) { // 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、 @@ -1425,7 +1028,7 @@ "rtuEvaporatingDishSetting", "rtuSoilSettler", "rtu4To20Setting", - "rtuOtherSetting" + "rtuOtherSetting", ]; console.log(this.formAll, resData, "ressssss"); // this.formAll={} @@ -1598,36 +1201,55 @@ return temp; } // 生成表单控件的接口 - this.$http.post(this.nozzle.rtuPageQueryPage).then(res => { + 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) => { - this.rules[item.fieldIdentifier] = [ - { - validator: (rule, value, callback) => { - this.validatorAll( - rule, - value, - callback, - item.validatorType, - item.validatorRules, - item.validatorErrorText - ); + 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", }, - 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 => { + let sub_titleList = dataRes[i].map((item) => { return item.subTitle; }); var newObj = []; // 根据小标题去重 - uniq(sub_titleList).forEach(item => { + uniq(sub_titleList).forEach((item) => { var obj = { name: item, data: [], isShow: true, isBlock: true }; - var data = dataRes[i].forEach(l => { + var data = dataRes[i].forEach((l) => { l.isShow = true; if ( l.subTitle === item && @@ -1651,11 +1273,11 @@ console.log(this.formAllBody, "999"); }); }, - async getSiteList(val='') { - // ,{stCode:this.querySite} + async getSiteList(val = "") { + // ,{stCode:this.querySite} await this.$http .post(`${this.nozzle.rTUSettingServiceQueryList}?stCode=${val}`) - .then(res => { + .then((res) => { // console.log(res.data.data,'resss') this.querySiteList = res.data.data; // this.querySiteList.push({ @@ -1675,15 +1297,641 @@ await this.$http //`${this.nozzle.queryRTUSettingHistory}?stCode=${this.querySite}` .post(`${this.nozzle.queryRTUSettingHistory}?rtuCode=${rtuCode}`) - .then(res => { + .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.getSiteList().then((res) => { // this.querySiteList[0].rtuStationCode // this.initPage(this.querySite); // this.getRtuHistoryList() @@ -1691,7 +1939,12 @@ this.formControl(); // console.log(666) - } + }, + updated() { + // if(this.formAll.length !==0){ + // this.initWatch() + // } + }, // beforeRouteLeave (to, from, next) { // // 导航离开该组件的对应路由时调用 // // 可以访问组件实例 `this` @@ -1752,12 +2005,12 @@ margin: 11px 0 11px 0 !important; .el-form-item__label { // text-align: right; - width: 160px !important; + width: 180px !important; text-align: right !important; color: var(--white) !important; } .el-form-item__content { - margin: 0 0 0 160px !important; + margin: 0 0 0 180px !important; .el-select { width: 100% !important; .el-input .el-input__inner { diff --git a/src/components/ConfigManager/RtuConfig.vue b/src/components/ConfigManager/RtuConfig.vue index 2aa6409..60226ac 100644 --- a/src/components/ConfigManager/RtuConfig.vue +++ b/src/components/ConfigManager/RtuConfig.vue @@ -2,7 +2,7 @@
搜索 --> - - + - - 搜索 - + 搜索 + > - + 回显 - + 暂存 - + 暂存回显 - + 提交
- + - + 回显历史记录
@@ -96,10 +123,10 @@
@@ -131,7 +158,9 @@ :key="item.fieldIdentifier" :class="{ 'el-col-class': true, - stop: item.hasOwnProperty('isShow') ? !item.isShow : false + stop: item.hasOwnProperty('isShow') + ? !item.isShow + : false, }" > { - 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; - } - } - ); - // 流量计水鬼 - this.$watch( - function() { - return this.formAll[2].form3.rtucgq_liuliang1; - }, - function(newVal, oldVal) { - var targetNameArr = [ - "直接流量输出", - "安装高度", - "流量校正", - "淤积深度", - "无效参数", - "无效参数", - "无效参数", - "堰槽截面表高度分辨率" - ]; - var targetStatusArr = [ - false, - true, - true, - true, - false, - false, - false, - false - ]; - // let select= ['直接流量输出','三角堰','矩形堰','梯形堰','圆管','自定义截面','直角三角堰明渠','巴歇尔槽明渠'] // 下拉框值， - let strArr = [ - "rtull_ll1_jiemian", - "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]; - } - } - }); - } - ); - 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[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[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[]') - } - ); + this.initWatch(); // bottom }, methods: { - search(){ + search() { this.formAll = []; - this.querySite= [] + this.querySite = []; // console.log(this.querySite,'querySite') - this.getSiteList(this.searchCode) + this.getSiteList(this.searchCode); }, - switchChange(val){ + switchChange(val) { // console.log(val,this.formAll[0].form1,'change') }, switchClick(val) { @@ -1093,20 +635,35 @@ }, temStorageEcho() { // this.activeIndex = '0' - if(localStorage.getItem(this.querySite[1])){ - this.formAll = JSON.parse(localStorage.getItem(name)); - this.$message({ message: "暂存回显成功", type: "success" }); + 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() { - try { - 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" }); + 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' @@ -1115,17 +672,63 @@ // 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 => { + this.$refs["form"][i].validate((valid) => { if (valid) { successCount++; } else { this.$message({ message: `${this.siteNameList[i]} 校验失败，请查看`, - type: "warning" + type: "warning", }); // alert(`${this.siteNameList[i]} 校验失败，请查看`); // this.$notify({ @@ -1166,8 +769,8 @@ rtuEvaporatingDishSetting: this.formAll[11].form12, rtuSoilSettler: this.formAll[12].form13, rtu4To20Setting: this.formAll[13].form14, - rtuOtherSetting: this.formAll[14].form15 - } + rtuOtherSetting: this.formAll[14].form15, + }, }; // 之前初始化时将3处的两个数组生成了需要的字段，现在需要把每处16个字段组装成两数组，删除不需要的字段,转化方法暂时写在这里 function dealInputSwitch( @@ -1236,7 +839,7 @@ ] = rtucamera_jiabaoNew; this.$http .post(`${this.nozzle.rTUSettingServiceUpdate}`, parmas) - .then(res => { + .then((res) => { // console.log(res,'rTUSettingServiceUpdate') this.echoClick(); }); @@ -1278,11 +881,11 @@ }, selectChange(val) { // this.querySite = [] - this.rtuHistoryId='' + this.rtuHistoryId = ""; // console.log(val,'val') // if(this.querySite.length!==2) return; this.echoClick(val); - this.getRtuHistoryList() + this.getRtuHistoryList(); }, selectChange1(val) { // console.log(val,'val') input搜索 @@ -1294,7 +897,7 @@ // this.echoClick(val); }, async initPage(site) { - this.loading = true + this.loading = true; // 切换站点后去请求历史下拉框 // this.getRtuHistoryList() // 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、 @@ -1320,7 +923,7 @@ "rtuEvaporatingDishSetting", "rtuSoilSettler", "rtu4To20Setting", - "rtuOtherSetting" + "rtuOtherSetting", ]; // console.log(this.formAll,resData,'ressssss') // this.formAll={} @@ -1402,7 +1005,7 @@ this.formAll.push(obj); // console.log(this.formAll,this.stCode,'this.formAll') } - this.loading = false + this.loading = false; }, async initPage2(rtuCode) { // 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、 @@ -1425,7 +1028,7 @@ "rtuEvaporatingDishSetting", "rtuSoilSettler", "rtu4To20Setting", - "rtuOtherSetting" + "rtuOtherSetting", ]; console.log(this.formAll, resData, "ressssss"); // this.formAll={} @@ -1598,36 +1201,55 @@ return temp; } // 生成表单控件的接口 - this.$http.post(this.nozzle.rtuPageQueryPage).then(res => { + 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) => { - this.rules[item.fieldIdentifier] = [ - { - validator: (rule, value, callback) => { - this.validatorAll( - rule, - value, - callback, - item.validatorType, - item.validatorRules, - item.validatorErrorText - ); + 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", }, - 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 => { + let sub_titleList = dataRes[i].map((item) => { return item.subTitle; }); var newObj = []; // 根据小标题去重 - uniq(sub_titleList).forEach(item => { + uniq(sub_titleList).forEach((item) => { var obj = { name: item, data: [], isShow: true, isBlock: true }; - var data = dataRes[i].forEach(l => { + var data = dataRes[i].forEach((l) => { l.isShow = true; if ( l.subTitle === item && @@ -1651,11 +1273,11 @@ console.log(this.formAllBody, "999"); }); }, - async getSiteList(val='') { - // ,{stCode:this.querySite} + async getSiteList(val = "") { + // ,{stCode:this.querySite} await this.$http .post(`${this.nozzle.rTUSettingServiceQueryList}?stCode=${val}`) - .then(res => { + .then((res) => { // console.log(res.data.data,'resss') this.querySiteList = res.data.data; // this.querySiteList.push({ @@ -1675,15 +1297,641 @@ await this.$http //`${this.nozzle.queryRTUSettingHistory}?stCode=${this.querySite}` .post(`${this.nozzle.queryRTUSettingHistory}?rtuCode=${rtuCode}`) - .then(res => { + .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.getSiteList().then((res) => { // this.querySiteList[0].rtuStationCode // this.initPage(this.querySite); // this.getRtuHistoryList() @@ -1691,7 +1939,12 @@ this.formControl(); // console.log(666) - } + }, + updated() { + // if(this.formAll.length !==0){ + // this.initWatch() + // } + }, // beforeRouteLeave (to, from, next) { // // 导航离开该组件的对应路由时调用 // // 可以访问组件实例 `this` @@ -1752,12 +2005,12 @@ margin: 11px 0 11px 0 !important; .el-form-item__label { // text-align: right; - width: 160px !important; + width: 180px !important; text-align: right !important; color: var(--white) !important; } .el-form-item__content { - margin: 0 0 0 160px !important; + margin: 0 0 0 180px !important; .el-select { width: 100% !important; .el-input .el-input__inner { diff --git a/src/components/ConfigManager/SiteManagement.vue b/src/components/ConfigManager/SiteManagement.vue index d8291d6..86aa31b 100644 --- a/src/components/ConfigManager/SiteManagement.vue +++ b/src/components/ConfigManager/SiteManagement.vue @@ -1068,12 +1068,10 @@ }, // 弹框取消表单按钮 resetField(formName) { - if(formName === "ruleForm") { - this.yzaddflag = false; - }else{ - this.configtrue = false; - } - this.closedialog(formName); + this.yzaddflag = false; + this.configtrue = false; + + this.closedialog(); }, //获取站点类型列表 async getsityType() {