<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"
>
<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"
>
<!-- <span style="float: left">{{ item }}</span> -->
</el-option>
</el-select>
<el-button type="primary" @click="echoClick">
回显
</el-button>
<el-button type="primary" @click="temStorage">
暂存
</el-button>
<el-button type="primary" @click="temStorageEcho">
暂存回显
</el-button>
<el-button type="primary" @click="sunmitAll">
提交
</el-button>
<div class="rtu-history-box">
<el-select v-model="rtuHistoryId" filterable @change="selectRtuHistoryId">
<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">
回显历史记录
</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, index) in i.data"
:key="index"
style="position:relative"
>
<el-form-item
v-if="parseInt(item.fieldType) === 1"
:label="item.fieldName"
:prop="item.fieldIdentifier"
:class="{'el-form-item-input':true,'stop':item.hasOwnProperty('isSHow') ? item.isSHow:false}"
>
<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,'stop':item.hasOwnProperty('isSHow') ? item.isSHow:false}"
>
<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,'stop':item.hasOwnProperty('isSHow') ? item.isSHow:false}"
>
<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,'stop':item.hasOwnProperty('isSHow') ? item.isSHow:false}"
>
<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,'stop':item.hasOwnProperty('isSHow') ? item.isSHow:false}"
>
<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>
</template>
<script>
export default {
data() {
return {
querySite:'',
stCode:'',
rtuHistoryId:'',
hexRtuCode:'',
querySiteList:[],
rtuHistoryList:[],
siteNameList:['遥测站设置','中心站设置','传感器型号选择','气象传感通信设置','工业相机设置','水文传感通信','从机设置',
'数据滤波','水位计','雨量计','流量计','蒸发皿','土壤沉降仪','4-20mA设置','其他设置'],
formAll:[],
// siteNameList:[],
formAllBody: [],
activeIndex: "0",
rules: {}
};
},
// computed:{
// rtuDtu(){
// return this.formAll[0].form1.rtuOutDtu;
// }
// },
// watch:{
// 'rtuDtu':{
// handler(newValue, oldValue) {
// console.log('this.formAll[0].form1.rtuOutDtu')
// },
// deep:true
// }
// },
mounted() {
// console.log(this.formAll,this.formAllBody,'this.formAll[0]')
//// 第一个函数就是处理你要监听的属性，只要将其return出去就行
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;
}
})
// switch(newVal){
// case false:
// console.log(11);
// break;
// case true:
// console.log(22);
// break;
// }
}
)
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;
}
})
}
)
// this.$watch(
// function () {
// return this.formAll[0].form1.rtuother_dtu_type;
// },
// function (newVal, oldVal) {
// let targetArr = [[true,true,true,false,false],[true,true,false,false,false],[false,false,false,false,true],[false,false,false,false,false]]
// // let select= ['JoinEUI','频率格式','上行频率','下行频率','电信NB服务ID']
// let strArr= ['JoinEUI','频率格式','上行频率','下行频率','电信NB服务ID']
// let _this = this
// let caseFun = function(newValIndex,strArr,targetArr){
// console.log(_this.formAllBody['1'],88888)
// _this.formAllBody['0'].form1.forEach((item,index,arr)=>{
// if(item.name === '外置DTU设置'){
// item.data.forEach((item,index,arr)=>{
// for(let i = 0;i<strArr.length;i++){
// if(arr[index].fieldName===strArr){
// arr[index]['isShow'] = targetArr[i][0]
// }
// }
// })
// }
// })
// }
// if(newVal==='LoRa-利尔达CN470') caseFun(0,strArr,targetArr)
// if(newVal==='ManThink-门思科技') caseFun(1,strArr,targetArr)
// if(newVal==='BC28电信管理平台NB') caseFun(2,strArr,targetArr)
// if(newVal==='M5311移动平台NB') caseFun(3,strArr,targetArr)
// // function change(select,targetArr){
// // let strArr= ['rtuother_join','rtuother_geshi','rtuother_shangxing','rtuother_xiaxing','rtuOutDtuServiceID']
// // let strArr= ['JoinEUI','频率格式','上行频率','下行频率','电信NB服务ID']
// // let select1= ['JoinEUI','频率格式','上行频率','下行频率','电信NB服务ID']
// // switch(newVal){
// // case 'LoRa-利尔达CN470':
// // // console.log(this,88888)
// // caseFun(this,0,strArr,targetArr)
// // // this.formAllBody['0'].forEach((item,index,arr)=>{
// // // if(item.name && item.name === '外置DTU设置'){
// // // item.data.forEach((item,index,arr)=>{
// // // for(let i = 0;i<strArr.length;i++){
// // // if(arr[index].fieldName===strArr){
// // // arr[index]['isShow'] = targetArr[i][0]
// // // }
// // // }
// // // })
// // // }
// // // })
// // break;
// // case 'ManThink-门思科技':
// // caseFun(this,1,strArr,targetArr)
// // break;
// // case 'BC28电信管理平台NB':
// // caseFun(this,2,strArr,targetArr)
// // break;
// // case 'M5311移动平台NB':
// // caseFun(this,3,strArr,targetArr)
// // break;
// // }
// // }
// // this.formAllBody['0'].forEach((item,index,arr)=>{
// // if(item.name === '内置LoRa相关配置'){
// // arr[index].isShow = newVal === 'LORA' ? true : false;
// // }
// // })
// }
// )
// bottom
},
// watch:{
// // 'formAll[0].form1.rtuOutDtu':{
// // handler(){
// // console.log(888)
// // },
// // deep:true
// // },
// // 'formAll': {
// // handler(newValue, oldValue) {
// // console.log(newValue,this.formAllBody,'obj.a changed');
// // if(newValue[0].form1.rtuOutDtu ===true){
// // // rtuStationType
// // // console.log(this.formAllBody['1'][0].data,555)
// // this.formAllBody['1'][0].data.forEach((item,index,arr)=>{
// // if(item.fieldIdentifier === 'rtuStationType'){
// // // console.log(555)
// // arr[index].selectOption='降水,河道,水库（湖泊）,闸坝,泵站,潮汐,墒情,地下水,水质,取水口,排水口'
// // }
// // })
// // this.formAllBody['1'].forEach((item,index,arr)=>{
// // if(item.name === '外置DTU设置'){
// // // console.log(555)
// // arr[index].isBlock= newValue[0].form1.rtuOutDtu;
// // }
// // })
// // }else if(newValue[0].form1.rtuOutDtu === false){
// // this.formAllBody['1'][0].data.forEach((item,index,arr)=>{
// // if(item.fieldIdentifier === 'rtuStationType'){
// // // console.log(555)
// // arr[index].selectOption='水质,取水口,排水口'
// // }
// // })
// // this.formAllBody['1'].forEach((item,index,arr)=>{
// // if(item.name === '外置DTU设置'){
// // // console.log(555)
// // arr[index].isBlock= newValue[0].form1.rtuOutDtu;
// // }
// // })
// // // arr[index].selectOption='降水,河道,水库（湖泊）,闸坝,泵站,潮汐,墒情,地下水,水质,取水口,排水口'
// // // console.log(666)
// // }
// // },
// // deep: true
// // }
// },
methods: {
switchChange(val){
// console.log(val,this.formAll[0].form1,'change')
},
switchClick(val){
console.log(val,'click')
},
echoClick() {
// 根据站点回显
this.formAll = [];
this.activeIndex = "0";
this.getSiteList();
this.initPage(this.querySite);
// this.handleSelect(0)
// console.log(this.activeIndex)
},
echoRtuHistory() {
// 根据站点和历史id，回显
this.formAll = [];
this.activeIndex = "0";
this.initPage2();
// this.handleSelect(0)
// console.log(this.activeIndex)
},
temStorageEcho() {
// this.activeIndex = '0'
if(localStorage.getItem(name)){
this.formAll = JSON.parse(localStorage.getItem(name));
this.$message({ message: '暂存回显成功', type: "success" });
} else{
this.$message({ message: '无暂存内容', type: "warning" });
}
// console.log(JSON.parse(sessionStorage.getItem(name)),111)
},
temStorage() {
try {
localStorage.setItem(name, JSON.stringify(this.formAll));
this.$message({ message: `保存成功`, type: "success" });
} catch (err) {
this.$message({ message: err, type: "warning" });
}
// localStorage.getItem(name);
// console.log(sessionStorage.getItem(name),111)
},
sunmitAll() {
// 提交所有表单，循环校验所有表单，当有个表单校验失败就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: {
stCode: this.stCode,
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) {
// console.log(val,'val')
this.echoClick(val);
this.getRtuHistoryList()
},
selectRtuHistoryId(val) {
console.log(val,'selectRtuHistoryId')
// this.echoClick(val);
},
async initPage(site) {
// 切换站点后去请求历史下拉框
this.getRtuHistoryList()
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.rTUSettingServiceQueryById}?stCode=${site}`
);
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.stCode = resData.stCode;
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')
}
},
async initPage2() {
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.RTUVersionRevert}?stCode=${this.querySite}&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.stCode = resData.stCode;
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) => {
this.rules[item.fieldIdentifier] = [
{
validator: (rule, value, callback) => {
this.validatorAll(
rule,
value,
callback,
item.validatorType,
item.validatorRules,
item.validatorErrorText
);
},
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 => {
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() {
await this.$http
.post(this.nozzle.rTUSettingServiceQueryList)
.then(res => {
// console.log(res.data.data,'resss')
this.querySiteList = res.data.data;
this.querySite = this.querySiteList[0].rtuStationCode;
});
},
async getRtuHistoryList() {
await this.$http
//`${this.nozzle.queryRTUSettingHistory}?stCode=${this.querySite}`
.post(`${this.nozzle.queryRTUSettingHistory}?stCode=${this.querySite}`)
.then(res => {
// console.log(res.data,'resss')
this.rtuHistoryList = res.data.data;
// this.querySite = this.querySiteList[0].rtuStationCode;
});
}
},
created(){
this.getSiteList().then(res=>{
// this.querySiteList[0].rtuStationCode
this.initPage(this.querySite);
this.getRtuHistoryList()
});
this.formControl();
// console.log(666)
},
// beforeRouteLeave (to, from, next) {
// // 导航离开该组件的对应路由时调用
// // 可以访问组件实例 `this`
// this.$confirm("请检查是否需要暂存！", "提示", {
// confirmButtonText: "已暂存",
// cancelButtonText: "取消",
// type: "warning"
// }).then(res=>{ next() }).catch(() => {});
// }
};
</script>
<style lang="scss" scoped>
.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: 130px;
text-align: right!important;
color: var(--white)!important;
}
.el-form-item__content{
.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: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;
}
.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
}
}
}
.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;
}
.rowClass:nth-child(2n){
background-color: rgba(144,147,153,0.3);
box-shadow: rgba(144,147,153, 0.32) 0px 2px 4px 0px;
}
.rowClass.control-show{
// background-color: #fff;
// cursor: pointer;
background-color: #ccc;
pointer-events: none;
border: 1px solid pink;
box-sizing: border-box;
// .control-show{
// }
}
.stop {
background-color: #ccc;
pointer-events: none;
.el-input__suffix-inner{
pointer-events: none;
}
}
}
// .row-box{
// height: 80vh;
// display: flex;
// justify-content: flex-start;
// flex-direction: column;
// flex-wrap: wrap;
// .rowClass{
// display: flex;
// justify-content: flex-start;
// flex-direction: column;
// flex-wrap: wrap;
// }
// }
}
// /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>
