<template>
<div class="content">
<div
v-if="!(formAll && formAllBody && formAllBody.length)"
style="height:56px"
></div>
<div
v-if="formAll && formAllBody && formAllBody.length"
class="filter-content"
>
<!-- <span style="color:var(--white)!important;">
请先搜索站点名称或编号:
</span> -->
<!-- <el-autocomplete
v-model="site1"
:fetch-suggestions="querySearchAsync1"
placeholder="请输入内容"
@select="selectChange1"
></el-autocomplete> -->
<!-- <el-button>
搜索
</el-button> -->
<el-input v-model="searchCode" placeholder="请输入站点名或编号" style="display:inline-block;width:200px" clearable>
</el-input>
<el-button type="primary" @click="search">
搜索
</el-button>
<el-cascader
v-model="querySite"
placeholder="请选择"
:options="querySiteList"
filterable
:show-all-levels="false"
clearable
:props="{
expandTrigger:'hover'
}"
@change="selectChange"
>
</el-cascader>
<!-- <el-select v-model="querySite" filterable @change="selectChange">
<el-option
v-for="(item,index) in querySiteList"
:key="index"
:label="`${item.rtuStationCode} ${item.rtuStationName}`"
:value="item.rtuStationCode"
>:disabled="!(querySite.length&&(querySite[0].length===0))"
</el-option>
</el-select> -->
<el-button type="primary" @click="echoClick" :disabled="querySite.length !==2">
回显
</el-button>
<el-button type="primary" @click="temStorage" :disabled="querySite.length !==2">
暂存
</el-button>
<el-button type="primary" @click="temStorageEcho" :disabled="querySite.length !==2">
暂存回显
</el-button>
<el-button type="primary" @click="sunmitAll" :disabled="querySite.length !==2">
提交
</el-button>
<div class="rtu-history-box">
<el-select v-model="rtuHistoryId" filterable @change="selectRtuHistoryId" :disabled="querySite.length !==2">
<el-option
v-for="(item, index) in rtuHistoryList"
:key="index"
:label="`${item.createTime}`"
:value="item.id"
>
</el-option>
</el-select>
<el-button type="primary" @click="echoRtuHistory" :disabled="querySite.length !==2">
回显历史记录
</el-button>
</div>
</div>
<div id="navMenuContent">
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
type="border-card"
>
<el-menu-item
v-for="(item, index) in siteNameList"
:index="`${index}`"
:key="index"
>{{ item }}</el-menu-item
>
</el-menu>
</div>
<div class="switchContent">
<div
v-if="
formAll &&
formAll.length !== 0 &&
formAll[0] &&
formAllBody &&
formAllBody.length
"
>
<div v-for="(formItem, formItemIndex) in formAll" :key="formItemIndex">
<el-form
v-show="formItem[`form${formItemIndex + 1}Show`]"
:model="formItem[`form${formItemIndex + 1}`]"
:rules="rules"
ref="form"
class="demo-ruleForm"
label-position="right"
label-width="130px"
size="mini"
>
<!-- {{`form${index+1}`}} -->
<div class="row-box">
<el-row
v-for="(i, index) in formAllBody[formItemIndex + 1]"
:key="index"
:class="{ 'control-show': !i.isShow, rowClass: true }"
>
<template v-if="i.isBlock">
<!-- <div :class="{'control-show':i.isShow}"> -->
<el-col :span="6" v-if="i.name" class="subTitle">{{
i.name
}}</el-col>
<el-col
:span="6"
v-for="item in i.data"
:key="item.fieldIdentifier"
:class="{
'el-col-class': true,
stop: item.hasOwnProperty('isShow') ? !item.isShow : false
}"
>
<el-form-item
v-if="parseInt(item.fieldType) === 1"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
><i slot="suffix">{{ item.unit }}</i></el-input
>
</el-form-item>
<el-form-item
v-if="parseInt(item.fieldType) === 2"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-select
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
:class="{ stop: !i.isShow }"
>
<el-option
v-for="item in creatListTest(item.selectOption)"
:key="item.code"
:label="item.value"
:value="item.value"
>
<span style="float: left">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item
v-if="parseInt(item.fieldType) === 3"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{
'el-form-item-input': true,
'form-switch': true
}"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
active-color="#13ce66"
inactive-color="#ff4949"
@change="switchChange(item.fieldIdentifier)"
></el-switch>
</el-form-item>
<!-- <el-form-item
v-if="parseInt(item.fieldType) === 3 && item.fieldIdentifier ==='rtuhour'"
:label="item.fieldName"
:prop="item.fieldIdentifier"
class="el-form-item-input form-switch"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
"
active-color="#13ce66"
inactive-color="#ff4949"
:disabled="formAll[0].form1.rtuOutDtu"
></el-switch>
</el-form-item> -->
<el-form-item
v-if="parseInt(item.fieldType) === 5"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
><i slot="suffix">{{ item.unit }}</i></el-input
>
</el-form-item>
<div
v-if="parseInt(item.fieldType) === 4"
class="input-switch-div"
>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<!-- <el-input v-model="formItem[`form${formItemIndex+1}`][`${item.fieldIdentifier}input${0}`]" :placeholder="item.validatorMark"></el-input> -->
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${0}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1;"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${0}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${1}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${1}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${2}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${2}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${3}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${3}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${4}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1;"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${4}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${5}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${5}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${6}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${6}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item
:prop="item.fieldIdentifier"
class="el-form-item-input input-switch"
style="flex:1"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}input${7}`
]
"
:placeholder="item.validatorMark"
></el-input>
</el-form-item>
<el-form-item
class="el-form-item-input input-switch"
style="flex:1"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][
`${item.fieldIdentifier}switch${7}`
]
"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
</div>
<el-form-item
v-if="parseInt(item.fieldType) === 6"
:label="item.fieldName + ':'"
:prop="item.fieldIdentifier"
:class="{ 'el-form-item-input': true }"
>
<el-select
v-model="
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
multiple
collapse-tags
>
<el-option
v-for="(item, index) in creatListTest(
item.selectOption
)"
:key="item.code"
:label="item.value"
:value="index"
>
<span style="float: left">{{ item.value }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- </div> -->
</template>
</el-row>
</div>
</el-form>
</div>
</div>
</div>
<!-- <div v-if="!(formAll&&formAll[0].length)" style="height:56px">
请先选择站点
</div> -->
<!-- bottom -->
</div>
</template>
<script>
// import { float } from 'html2canvas/dist/types/css/property-descriptors/float';
export default {
data() {
return {
querySite: [], // 站点列表 树形结构
stCode: "", //
rtuHistoryId: "", // 历史框选中后的id
hexRtuCode: "", // rtucode查到的list里的后台需要的字段
querySiteList: [], // 级联框需要的数据
rtuHistoryList: [], // 历史框数据
siteNameList: [
"遥测站设置",
"中心站设置",
"传感器型号选择",
"气象传感通信设置",
"工业相机设置",
"水文传感通信",
"从机设置",
"数据滤波",
"水位计",
"雨量计",
"流量计",
"蒸发皿",
"土壤沉降仪",
"4-20mA设置",
"其他设置"
],
formAll: [], // 所有表单，结构从0开始取，代表每一个表单的每个控件的值
// siteNameList:[],
formAllBody: [], //所有字段控件 结构从1开始取，每个item有name（标题名），data数组包含控件对象
activeIndex: "0",//
rules: {}, //
searchCode: '',
loading:false
};
},
// computed:{
// rtuDtu(){
// return this.formAll[0].form1.rtuOutDtu;
// }
// },
watch: {
querySite: {
handler(newValue, oldValue) {
console.log("this.formAll[0].form1.rtuOutDtu");
},
deep: true
}
},
mounted() {
// 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;
}
}
);
// 流量计水鬼
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[]')
}
);
// bottom
},
methods: {
search(){
this.formAll = [];
this.querySite= []
// console.log(this.querySite,'querySite')
this.getSiteList(this.searchCode)
},
switchChange(val){
// console.log(val,this.formAll[0].form1,'change')
},
switchClick(val) {
console.log(val, "click");
},
echoClick() {
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
// 根据站点回显
console.log(this.querySite, "this.querySite");
this.formAll = [];
this.activeIndex = "0";
// this.getSiteList();
this.initPage(rtuCode);
this.getRtuHistoryList();
// this.handleSelect(0)
// console.log(this.activeIndex)
},
echoRtuHistory() {
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
// 根据站点和历史id，回显
this.formAll = [];
this.activeIndex = "0";
this.initPage2(rtuCode);
// this.handleSelect(0)
// console.log(this.activeIndex)
},
temStorageEcho() {
// this.activeIndex = '0'
if(localStorage.getItem(this.querySite[1])){
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(this.querySite[1], JSON.stringify(this.formAll));
this.$message({ message: `${this.querySite[1]}保存成功`, type: "success" });
} catch (err) {
this.$message({ message: err, type: "warning" });
}
// sessionStorage.setItem(name,'999')
// // location.href='http://192.168.16.189:8080/#/ConfigManager/RtuConfig'
// window.open("http://192.168.16.189:8080/#/ConfigManager/RtuConfig",'_blank');
// localStorage.getItem(name);
// console.log(sessionStorage.setItem(name),111)
},
sunmitAll() {
// 提交所有表单，循环校验所有表单，当有个表单校验失败就break，提示该表单校验失败，根据校验成功总数或者无失败确定完成，组装数据发送到后台
var successCount = 0;
var successFlag = false;
for (var i = 0; i < 15; i++) {
this.$refs["form"][i].validate(valid => {
if (valid) {
successCount++;
} else {
this.$message({
message: `${this.siteNameList[i]} 校验失败，请查看`,
type: "warning"
});
// alert(`${this.siteNameList[i]} 校验失败，请查看`);
// this.$notify({
// title: '警告',
// message: `${this.siteNameList[i]} 校验失败，请查看`,
// type: 'warning'
// });
successFlag = true;
// return false;
}
});
if (successFlag) {
return false;
}
}
console.log(this.stCode, "form6Inputform6Input9999999");
if (successCount === this.siteNameList.length) {
this.$message({ message: "表单全部校验成功", type: "success" });
} else {
// this.$message({message: `第${i}个表单校验失败，请查看`,type: "warning"});
}
// 组装数据需要的属性，暂时是死值，也可以循环出来
const parmas = {
data: {
rtuCode: this.rtuCode,
hexRtuCode: this.hexRtuCode,
rtuTelemeteringStationSetting: this.formAll[0].form1,
rtuCentreSetting: this.formAll[1].form2,
rtuSenseTypeSetting: this.formAll[2].form3,
rtuMeteorologicalSensingCommunicationSetting: this.formAll[3].form4,
rtuIndustrialCameraSetting: this.formAll[4].form5,
rtuHydrologicSensingCommunication: this.formAll[5].form6,
rtuSlaveSetting: this.formAll[6].form7,
rtuDataFilter: this.formAll[7].form8,
rtuWaterLevelSetting: this.formAll[8].form9,
rtuRainSetting: this.formAll[9].form10,
rtuFlowmeterSetting: this.formAll[10].form11,
rtuEvaporatingDishSetting: this.formAll[11].form12,
rtuSoilSettler: this.formAll[12].form13,
rtu4To20Setting: this.formAll[13].form14,
rtuOtherSetting: this.formAll[14].form15
}
};
// 之前初始化时将3处的两个数组生成了需要的字段，现在需要把每处16个字段组装成两数组，删除不需要的字段,转化方法暂时写在这里
function dealInputSwitch(
str = "rtushuiwen_shangqingarrInt",
strBool = "rtushuiwen_shangqingarrboolean"
) {
var form6Input = [];
var form6Switch = [];
var strTarget = "rtuHydrologicSensingCommunication";
for (let i = 0; i < 8; i++) {
var hasInput = parmas.data[strTarget].hasOwnProperty(
`${str}input${i}`
);
if (hasInput) {
form6Input[i] = parmas.data[strTarget][`${str}input${i}`];
} else {
form6Input[i] = null;
}
parmas.data[strTarget][str] = form6Input;
delete parmas.data[strTarget][`${str}input${i}`];
var hasSwitch = parmas.data[strTarget].hasOwnProperty(
`${str}switch${i}`
);
if (hasSwitch) {
form6Switch[i] = parmas.data[strTarget][`${str}switch${i}`];
} else {
form6Switch[i] = false;
}
parmas.data[strTarget][strBool] = form6Switch;
delete parmas.data[strTarget][`${str}switch${i}`];
}
}
dealInputSwitch(
"rtushuiwen_shangqingarrInt",
"rtushuiwen_shangqingarrboolean"
);
dealInputSwitch(
"rtushuiwen_chenjiangarrInt",
"rtushuiwen_chenjiangarrboolean"
);
dealInputSwitch("rtushuiwen_zhaweiarrInt", "rtushuiwen_zhaweiarrboolean");
// let rtuAddUpTimes = parmas.data["rtuTelemeteringStationSetting"][
// "rtuAddUpTimes"
// ].sort((item1, item2) => item1 - item2);
let rtucamera_jiabao = parmas.data["rtuIndustrialCameraSetting"][
"rtucamera_jiabao"
].sort((item1, item2) => item1 - item2);
let rtuAddUpTimesNew = [];
let rtucamera_jiabaoNew = [];
// console.log(rtuAddUpTimes,'rtuAddUpTimes')
for (var i = 0; i < 24; i++) {
// rtuAddUpTimesNew.push(0);
rtucamera_jiabaoNew.push(0);
}
// rtuAddUpTimes.forEach((item, index) => {
// rtuAddUpTimesNew[item] = 1;
// });
rtucamera_jiabao.forEach((item, index) => {
rtucamera_jiabaoNew[item] = 1;
});
// parmas.data["rtuTelemeteringStationSetting"][
// "rtuAddUpTimes"
// ] = rtuAddUpTimesNew;
parmas.data["rtuIndustrialCameraSetting"][
"rtucamera_jiabao"
] = rtucamera_jiabaoNew;
this.$http
.post(`${this.nozzle.rTUSettingServiceUpdate}`, parmas)
.then(res => {
// console.log(res,'rTUSettingServiceUpdate')
this.echoClick();
});
// console.log(parmas,'form6Inputform6Input')
// this.formAll=[]
// this.initPage(this.querySiteList[1])
},
creatListTest(arr) {
var arrList = arr.split(",");
// console.log(arrList,'arrrrrrrr')
let list = arrList.map((item, index) => {
let obj = {};
obj["code"] = index;
obj["value"] = item;
return obj;
});
return list;
},
creatList(arr) {
// 下拉框需要的option数据，ele需要value和lable，value是点击后的字段值，lable是展示值
let list = arr.map((item, index) => {
let obj = {};
obj["code"] = index + 1;
obj["value"] = item;
return obj;
});
return list;
},
handleSelect(key) {
this.activeIndex = key;
// console.log(key)
for (var i = 0; i < 15; i++) {
if (key != i) {
this.formAll[i][`form${i + 1}Show`] = false;
} else {
this.formAll[i][`form${i + 1}Show`] = true;
}
}
},
selectChange(val) {
// this.querySite = []
this.rtuHistoryId=''
// console.log(val,'val')
// if(this.querySite.length!==2) return;
this.echoClick(val);
this.getRtuHistoryList()
},
selectChange1(val) {
// console.log(val,'val') input搜索
this.echoClick(val);
this.getRtuHistoryList();
},
selectRtuHistoryId(val) {
console.log(val, "selectRtuHistoryId");
// this.echoClick(val);
},
async initPage(site) {
this.loading = true
// 切换站点后去请求历史下拉框
// this.getRtuHistoryList()
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.rTUSettingServiceQueryById}?rtuCode=${site}`
);
if (resFirst.data.code === 507) {
this.$message(resFirst.data.msg);
}
let resData = resFirst.data.data;
let formArr = [
"rtuTelemeteringStationSetting",
"rtuCentreSetting",
"rtuSenseTypeSetting",
"rtuMeteorologicalSensingCommunicationSetting",
"rtuIndustrialCameraSetting",
"rtuHydrologicSensingCommunication",
"rtuSlaveSetting",
"rtuDataFilter",
"rtuWaterLevelSetting",
"rtuRainSetting",
"rtuFlowmeterSetting",
"rtuEvaporatingDishSetting",
"rtuSoilSettler",
"rtu4To20Setting",
"rtuOtherSetting"
];
// console.log(this.formAll,resData,'ressssss')
// this.formAll={}
this.rtuCode = resData.rtuCode;
this.hexRtuCode = resData.hexRtuCode;
for (let i = 1; i <= 15; i++) {
let obj = {};
// 水文传感里是第6个表单
if (i !== 6 && i !== 5) {
obj[`form${i}`] = resData[formArr[i - 1]];
}
// else if (i === 1) {
// var formObj = Object.assign({},resData[formArr[i - 1]]);
// var rtuAddUpTimesNew = [];
// if (!formObj.hasOwnProperty("rtuAddUpTimes")) {
// return;
// }
// formObj.rtuAddUpTimes.forEach((res, index) => {
// if (res === 1) {
// rtuAddUpTimesNew.push(index);
// }
// });
// // form1Obj.hasOwnProperty('rtuAddUpTimes')
// formObj.rtuAddUpTimes = rtuAddUpTimesNew;
// // console.log(form1Obj,'form1Obj')
// obj[`form${i}`] = formObj;
// }
else if (i === 5) {
let formObj = Object.assign({}, resData[formArr[i - 1]]);
let rtucamera_jiabaoNew = [];
if (!formObj.hasOwnProperty("rtucamera_jiabao")) {
return;
}
formObj.rtucamera_jiabao.forEach((res, index) => {
if (res === 1) {
rtucamera_jiabaoNew.push(index);
}
});
formObj.rtucamera_jiabao = rtucamera_jiabaoNew;
// console.log(form1Obj,'form1Obj')
obj[`form${i}`] = formObj;
} else if (i === 6) {
var form6Obj = resData[formArr[i - 1]];
// 每一处需要input switch各8个共16个模拟字段，只处理第6个表单
function creatInputSwitch(str, strBool) {
if (
form6Obj.hasOwnProperty(str) &&
form6Obj.hasOwnProperty(strBool)
) {
for (let i = 0; i < 8; i++) {
form6Obj[`${str}input${i}`] = form6Obj[str][i];
form6Obj[`${str}switch${i}`] = form6Obj[strBool][i];
}
delete form6Obj[str];
delete form6Obj[strBool];
}
}
creatInputSwitch(
"rtushuiwen_shangqingarrInt",
"rtushuiwen_shangqingarrboolean"
);
creatInputSwitch(
"rtushuiwen_chenjiangarrInt",
"rtushuiwen_chenjiangarrboolean"
);
creatInputSwitch(
"rtushuiwen_zhaweiarrInt",
"rtushuiwen_zhaweiarrboolean"
);
obj[`form${i}`] = form6Obj;
}
if (i !== 1) {
obj[`form${i}Show`] = false;
} else {
obj[`form${i}Show`] = true;
}
// 表单数据赋值完成，控制表单切换的formshow,也放在一起了
this.formAll.push(obj);
// console.log(this.formAll,this.stCode,'this.formAll')
}
this.loading = false
},
async initPage2(rtuCode) {
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值，用请求数据遍历生成表单需要的字段，因为这3处的动态表单使用的是死的字段，其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.RTUVersionRevert}?rtuCode=${rtuCode}&id=${this.rtuHistoryId}`
);
let resData = resFirst.data.data;
let formArr = [
"rtuTelemeteringStationSetting",
"rtuCentreSetting",
"rtuSenseTypeSetting",
"rtuMeteorologicalSensingCommunicationSetting",
"rtuIndustrialCameraSetting",
"rtuHydrologicSensingCommunication",
"rtuSlaveSetting",
"rtuDataFilter",
"rtuWaterLevelSetting",
"rtuRainSetting",
"rtuFlowmeterSetting",
"rtuEvaporatingDishSetting",
"rtuSoilSettler",
"rtu4To20Setting",
"rtuOtherSetting"
];
console.log(this.formAll, resData, "ressssss");
// this.formAll={}
this.rtuCode = resData.rtuCode;
this.hexRtuCode = resData.hexRtuCode;
for (let i = 1; i <= 15; i++) {
let obj = {};
// 水文传感里是第6个表单
if (i !== 6 && i !== 5) {
obj[`form${i}`] = resData[formArr[i - 1]];
}
// else if (i === 1) {
// var formObj = Object.assign({},resData[formArr[i - 1]]);
// var rtuAddUpTimesNew = [];
// if (!formObj.hasOwnProperty("rtuAddUpTimes")) {
// return;
// }
// formObj.rtuAddUpTimes.forEach((res, index) => {
// if (res === 1) {
// rtuAddUpTimesNew.push(index);
// }
// });
// // form1Obj.hasOwnProperty('rtuAddUpTimes')
// formObj.rtuAddUpTimes = rtuAddUpTimesNew;
// // console.log(form1Obj,'form1Obj')
// obj[`form${i}`] = formObj;
// }
else if (i === 5) {
let formObj = Object.assign({}, resData[formArr[i - 1]]);
let rtucamera_jiabaoNew = [];
if (!formObj.hasOwnProperty("rtucamera_jiabao")) {
return;
}
formObj.rtucamera_jiabao.forEach((res, index) => {
if (res === 1) {
rtucamera_jiabaoNew.push(index);
}
});
formObj.rtucamera_jiabao = rtucamera_jiabaoNew;
// console.log(form1Obj,'form1Obj')
obj[`form${i}`] = formObj;
} else if (i === 6) {
var form6Obj = resData[formArr[i - 1]];
// 每一处需要input switch各8个共16个模拟字段，只处理第6个表单
function creatInputSwitch(str, strBool) {
if (
form6Obj.hasOwnProperty(str) &&
form6Obj.hasOwnProperty(strBool)
) {
for (let i = 0; i < 8; i++) {
form6Obj[`${str}input${i}`] = form6Obj[str][i];
form6Obj[`${str}switch${i}`] = form6Obj[strBool][i];
}
delete form6Obj[str];
delete form6Obj[strBool];
}
}
creatInputSwitch(
"rtushuiwen_shangqingarrInt",
"rtushuiwen_shangqingarrboolean"
);
creatInputSwitch(
"rtushuiwen_chenjiangarrInt",
"rtushuiwen_chenjiangarrboolean"
);
creatInputSwitch(
"rtushuiwen_zhaweiarrInt",
"rtushuiwen_zhaweiarrboolean"
);
obj[`form${i}`] = form6Obj;
}
if (i !== 1) {
obj[`form${i}Show`] = false;
} else {
obj[`form${i}Show`] = true;
}
// 表单数据赋值完成，控制表单切换的formshow,也放在一起了
this.formAll.push(obj);
// console.log(this.formAll,this.stCode,'this.formAll')
}
},
validatorAll(rule, value, callback, type, sug, alart) {
let typeLocal = type;
let sugLocal = sug;
let alartLocal = alart;
// 数字范围、数字长度、字符串长度、正则等
if (value && parseInt(typeLocal) === 1) {
// 数字范围
if (value !== undefined) {
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (sug1 <= value && value <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
} else {
callback();
}
} else if (value && parseInt(typeLocal) === 2 && sugLocal) {
// 正则
let regExp = sugLocal.slice(1, -1);
let reg = new RegExp(regExp);
if (reg.test(value)) {
callback();
} else {
callback(new Error(alartLocal));
}
} else if (value && parseInt(typeLocal) === 3) {
if (sugLocal === undefined || sugLocal === "") {
// 下拉框 不显示错误信息
callback();
} else {
// console.log(value,sugLocal.indexOf(','),'value')
if (sugLocal.indexOf(",") !== -1) {
// 带，的是范围，不带则是固定长度
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (value.length >= sug1 && value.length <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
} else if (sugLocal.indexOf(",") === -1) {
// console.log(sugLocal.indexOf(','),parseInt(sugLocal))
if (value.length === parseInt(sugLocal)) {
callback();
} else {
callback(new Error(alartLocal));
}
}
}
} else if (value && parseInt(typeLocal) === 4) {
if (sugLocal === undefined || sugLocal === "") {
callback();
} else {
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (sug1 <= value && value <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
}
} else if (value && parseInt(typeLocal) === 5) {
// console.log(value,'value')
if (typeof value !== "number") {
callback(new Error("请输入纯数字"));
} else {
let sug1 = parseInt(sugLocal.split(",")[0]);
let sug2 = parseInt(sugLocal.split(",")[1]);
if (sug1 <= value && value <= sug2) {
callback();
} else {
callback(new Error(alartLocal));
}
}
} else {
callback();
}
},
formControl() {
function uniq(array) {
var temp = []; //一个新的临时数组
for (var i = 0; i < array.length; i++) {
if (temp.indexOf(array[i]) == -1) {
temp.push(array[i]);
}
}
return temp;
}
// 生成表单控件的接口
this.$http.post(this.nozzle.rtuPageQueryPage).then(res => {
var dataRes = res.data.data;
// console.log(dataRes,'dataRes')
for (var i in dataRes) {
if (dataRes[i].length !== 0) {
dataRes[i].forEach((item, index, arr) => {
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 => {
l.isShow = true;
if (
l.subTitle === item &&
l.subTitle !== "" &&
l.subTitle !== undefined
) {
obj.data.push(l);
} else if (l.subTitle === "" || l.subTitle === undefined) {
obj.data.push(l);
}
});
if (obj.name === undefined) {
return;
}
// obj.data= data 将后台数据生成带有小标题的
newObj.push(obj);
});
this.$set(this.formAllBody, i, newObj);
}
}
console.log(this.formAllBody, "999");
});
},
async getSiteList(val='') {
// ,{stCode:this.querySite}
await this.$http
.post(`${this.nozzle.rTUSettingServiceQueryList}?stCode=${val}`)
.then(res => {
// console.log(res.data.data,'resss')
this.querySiteList = res.data.data;
// this.querySiteList.push({
// label:2001,
// value:2001
// });
// this.querySite[0] = this.querySiteList[0].children[0].label;
});
},
async getRtuHistoryList() {
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
await this.$http
//`${this.nozzle.queryRTUSettingHistory}?stCode=${this.querySite}`
.post(`${this.nozzle.queryRTUSettingHistory}?rtuCode=${rtuCode}`)
.then(res => {
// console.log(res.data,'resss')
this.rtuHistoryList = res.data.data;
// this.querySite = this.querySiteList[0].rtuStationCode;
});
}
},
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>
// /deep/.el-cascader__dropdown{
// // background-color: black;
// .el-scrollbar{
// .el-cascader-menu__list{
// background-color: black!important;
// }
// }
// }
.content {
width: 100% !important;
height: 100% !important;
#navMenuContent {
/* height: calc(100% - 20px);
width: calc(100% - 20px);
float: left;
border: 1px solid aqua;
box-sizing: border-box;
margin: 10px;
position: relative; */
width: 100%;
/* background-color: #fff; */
}
.filter-content {
text-align: left;
padding: 10px;
position: relative;
.rtu-history-box {
padding: 10px 0 0 0;
position: absolute;
right: 100px;
top: 0;
}
}
.switchContent {
// color: rgb(99, 96, 96);
color: red;
/* background-color: #fff; */
/* background-color: #fff; */
// color: white !important;
padding: 2% 0 0 0;
/deep/ .el-form {
.el-col {
height: 51px !important;
.el-form-item {
margin: 11px 0 11px 0 !important;
.el-form-item__label {
// text-align: right;
width: 160px !important;
text-align: right !important;
color: var(--white) !important;
}
.el-form-item__content {
margin: 0 0 0 160px !important;
.el-select {
width: 100% !important;
.el-input .el-input__inner {
width: 100% !important;
}
}
.el-input {
width: 100% !important;
.el-input__inner {
width: 100% !important;
color: var(--white) !important;
}
}
i {
color: var(--white);
font-style: normal !important;
padding-right: 5px !important;
}
//
}
}
// input的单位，i图标
// .el-form-item__content i{
// color: var(--white);
// font-style:normal !important;
// padding-right: 5px !important;
// }
// 普通input框100，select框也100
// .el-form-item.el-form-item-input{
// // margin:11px 0 11px 0 !important;
// .el-form-item__content{
// // .el-select, .el-input{
// // width: 100%;
// // }
// .el-input__inner{
// // width: 100%;
// }
// }
// }
// 小标题
&.subTitle {
/* height:40px!important; */
line-height: 51px !important;
color: #409eff !important;
/* margin-top: 11px; */
}
// 普通switch框，左180，右居中
.el-form-item.el-form-item-input.form-switch .el-form-item__label {
width: 180px !important;
}
.el-form-item.el-form-item-input.form-switch .el-form-item__content {
// width: 100% !important;
text-align: center !important;
margin-left: 180px !important;
}
.input-switch-div {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 1000px !important;
display: flex !important;
// 土地商情哪里，input content左为0，.input-switch-div定位，el-form-item__content定位66px
.el-form-item-input.input-switch .el-form-item__content {
margin-left: 0 !important;
}
.el-form-item-input.input-switch .el-form-item-input {
/* display: flex; */
margin: initial !important;
}
.el-form-item .el-form-item__content .el-input .el-input__inner {
width: 66px !important;
}
}
i {
color: var(--white);
font-style: normal !important;
padding-right: 5px !important;
}
//
}
}
// input的单位，i图标
// .el-form-item__content i{
// color: var(--white);
// font-style:normal !important;
// padding-right: 5px !important;
// }
// 普通input框100，select框也100
// .el-form-item.el-form-item-input{
// // margin:11px 0 11px 0 !important;
// .el-form-item__content{
// // .el-select, .el-input{
// // width: 100%;
// // }
// .el-input__inner{
// // width: 100%;
// }
// }
// }
// 小标题
&.subTitle {
/* height:40px!important; */
line-height: 51px !important;
color: aqua !important;
/* margin-top: 11px; */
}
// 普通switch框，左180，右居中
.el-form-item.el-form-item-input.form-switch .el-form-item__label {
width: 180px !important;
}
.el-form-item.el-form-item-input.form-switch .el-form-item__content {
// width: 100% !important;
text-align: center !important;
margin-left: 180px !important;
}
.input-switch-div {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 1000px !important;
display: flex !important;
// 土地商情哪里，input content左为0，.input-switch-div定位，el-form-item__content定位66px
.el-form-item-input.input-switch .el-form-item__content {
margin-left: 0 !important;
}
.rowClass.control-show {
// background-color: #fff;
// cursor: pointer;
background-color: rgba(204, 204, 204, 0.397) !important;
pointer-events: none !important;
border: 1px solid pink;
box-sizing: border-box;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// .control-show{
// }
}
.stop {
background-color: rgba(204, 204, 204, 0.397);
pointer-events: none;
border-radius: 10px;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// box-shadow: pink 10px 10px 10px ;
.el-input__suffix-inner {
pointer-events: none;
}
}
}
}
.rowClass {
.el-col-class {
position: relative;
}
}
.rowClass:nth-child(2n + 1) {
// background-color: rgba( 245,222,179,0.3);
box-shadow: rgba(144, 147, 153, 0.32) 0px 2px 4px 0px;
margin: 10px 0 0 0;
border-radius: 10px;
}
.rowClass:nth-child(2n) {
background-color: rgba(144, 147, 153, 0.3);
box-shadow: rgba(144, 147, 153, 0.32) 0px 2px 4px 0px;
margin: 10px 0 0 0;
border-radius: 10px;
}
.rowClass.control-show {
// background-color: #fff;
// cursor: pointer;
background-color: #ccc !important;
pointer-events: none !important;
border: 1px solid pink;
box-sizing: border-box;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// .control-show{
// }
}
.stop {
background-color: #ccc;
pointer-events: none;
border-radius: 10px;
.el-input__inner {
border: 1px solid #dcdfe6;
}
// box-shadow: pink 10px 10px 10px ;
.el-input__suffix-inner {
pointer-events: none;
}
}
}
// /deep/.el-menu-item{
// background-color: #fff !important;
// }
/deep/ .el-menu.el-menu-demo.el-menu--horizontal {
border-bottom: initial !important;
background-color: initial !important;
li.el-menu-item {
background-image: initial !important;
background-color: #fff !important;
}
.el-menu-item.is-active {
// background-color: var(--dialogtitle)!important;
// background-color: #fff !important;
}
.el-menu-item:hover {
background-color: #fff !important;
}
}
// .el-menu--horizontal>.el-menu-item.is-active{
// background-color: #fff !important;
// }
// .el-menu-item .is-active {
// background-color: #fff !important;
// }
// .el-menu-item:hover {
// background-color: #fff !important;
// }
// /deep/ .el-menu-item {
// background-color: #fff!important;
// }
</style>
<style>
.content .switchContent[data-v-6d3cd89e] .el-form .rowClass.control-show {
background-color: #968282 !important;
}
</style>
