首页echarts图形和其他bug
1 parent 1c0ca89 commit c73a1278e49527afdb6c2b866020d69189df9fa3
@朱忠杰 朱忠杰 authored on 5 Feb 2021
Showing 6 changed files
View
1659
src/components/ConfigManager/RtuConfig.vue
<template>
<div class="content">
<div v-if="!(formAll && formAllBody && formAllBody.length)" style="height:56px">
 
</div>
<div
v-if="!(formAll && formAllBody && formAllBody.length)"
style="height:56px"
></div>
<div
v-if="formAll && formAllBody && formAllBody.length"
class="filter-content"
>
placeholder="请搜索站点名或者编号"
:options="querySiteList"
filterable
@change="selectChange"
></el-cascader>
></el-cascader>
<!-- <el-select v-model="querySite" filterable @change="selectChange">
<el-option
v-for="(item,index) in querySiteList"
:key="index"
<el-button type="primary" @click="sunmitAll">
提交
</el-button>
<div class="rtu-history-box">
<el-select v-model="rtuHistoryId" filterable @change="selectRtuHistoryId">
<el-select
v-model="rtuHistoryId"
filterable
@change="selectRtuHistoryId"
>
<el-option
v-for="(item,index) in rtuHistoryList"
v-for="(item, index) in rtuHistoryList"
:key="index"
:label="`${item.createTime}`"
:value="item.id"
>
</el-select>
<el-button type="primary" @click="echoRtuHistory">
回显历史记录
</el-button>
 
</div>
</div>
<div id="navMenuContent">
<el-menu
>
</el-menu>
</div>
<div class="switchContent">
<div v-if="formAll && formAll.length !==0 &&formAll[0] && formAllBody && formAllBody.length">
<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}`]"
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-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"
v-for="item in i.data"
:key="item.fieldIdentifier"
:class="{'el-col-class':true,'stop':item.hasOwnProperty('isShow') ? !item.isShow : false}"
: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}"
:class="{ 'el-form-item-input': true }"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
><i slot="suffix">{{ item.unit }}</i></el-input
>
<el-form-item
v-if="parseInt(item.fieldType) === 2"
:label="item.fieldName"
:prop="item.fieldIdentifier"
:class="{'el-form-item-input':true}"
:class="{ 'el-form-item-input': true }"
>
<el-select
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
:class="{'stop':!i.isShow}"
:class="{ stop: !i.isShow }"
>
<el-option
v-for="item in creatListTest(item.selectOption)"
:key="item.code"
<el-form-item
v-if="parseInt(item.fieldType) === 3"
:label="item.fieldName"
:prop="item.fieldIdentifier"
:class="{'el-form-item-input':true,'form-switch':true}"
:class="{
'el-form-item-input': true,
'form-switch': true
}"
>
<el-switch
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
active-color="#13ce66"
inactive-color="#ff4949"
@change="switchChange(item.fieldIdentifier)"
<el-form-item
v-if="parseInt(item.fieldType) === 5"
:label="item.fieldName"
:prop="item.fieldIdentifier"
:class="{'el-form-item-input':true}"
:class="{ 'el-form-item-input': true }"
>
<el-input
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
><i slot="suffix">{{ item.unit }}</i></el-input
>
<el-form-item
v-if="parseInt(item.fieldType) === 6"
:label="item.fieldName"
:prop="item.fieldIdentifier"
:class="{'el-form-item-input':true}"
:class="{ 'el-form-item-input': true }"
>
<el-select
v-model="
formItem[`form${formItemIndex + 1}`][item.fieldIdentifier]
formItem[`form${formItemIndex + 1}`][
item.fieldIdentifier
]
"
:placeholder="item.validatorMark"
multiple
collapse-tags
>
<el-option
v-for="(item, index) in creatListTest(item.selectOption)"
v-for="(item, index) in creatListTest(
item.selectOption
)"
:key="item.code"
:label="item.value"
:value="index"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<!-- </div> -->
 
</template>
 
</el-row>
<!-- </div> -->
</template>
</el-row>
</div>
</el-form>
</div>
</div>
// import { float } from 'html2canvas/dist/types/css/property-descriptors/float';
export default {
data() {
return {
querySite:[],
stCode:'',
rtuHistoryId:'',
hexRtuCode:'',
querySiteList:[],
rtuHistoryList:[],
siteNameList:['遥测站设置','中心站设置','传感器型号选择','气象传感通信设置','工业相机设置','水文传感通信','从机设置',
'数据滤波','水位计','雨量计','流量计','蒸发皿','土壤沉降仪','4-20mA设置','其他设置'],
formAll:[],
querySite: [],
stCode: "",
rtuHistoryId: "",
hexRtuCode: "",
querySiteList: [],
rtuHistoryList: [],
siteNameList: [
"遥测站设置",
"中心站设置",
"传感器型号选择",
"气象传感通信设置",
"工业相机设置",
"水文传感通信",
"从机设置",
"数据滤波",
"水位计",
"雨量计",
"流量计",
"蒸发皿",
"土壤沉降仪",
"4-20mA设置",
"其他设置"
],
formAll: [],
// siteNameList:[],
formAllBody: [],
activeIndex: "0",
rules: {}
// rtuDtu(){
// return this.formAll[0].form1.rtuOutDtu;
// }
// },
watch:{
'querySite':{
watch: {
querySite: {
handler(newValue, oldValue) {
console.log('this.formAll[0].form1.rtuOutDtu')
console.log("this.formAll[0].form1.rtuOutDtu");
},
deep:true
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;
}
})
}
)
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;
}
})
}
)
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[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
}
}
)
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
}
}
)
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]
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]
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
}
}
)
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
}
)
function() {
return this.formAll[0].form1.rtucjFlagTrans;
},
function(newVal, oldVal) {
this.formAllBody["1"][0].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]
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]
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]
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]
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]
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]
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: {
switchChange(val){
switchChange(val) {
// console.log(val,this.formAll[0].form1,'change')
},
switchClick(val){
console.log(val,'click')
switchClick(val) {
console.log(val, "click");
},
echoClick() {
let rtuCode = ''
if(this.querySite.length===1){
rtuCode = this.querySite[0]
}else{
rtuCode = this.querySite[1]
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
// 根据站点回显
console.log(this.querySite,'this.querySite')
console.log(this.querySite, "this.querySite");
this.formAll = [];
this.activeIndex = "0";
// this.getSiteList();
this.initPage(rtuCode);
this.getRtuHistoryList()
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]
let rtuCode = "";
if (this.querySite.length === 1) {
rtuCode = this.querySite[0];
} else {
rtuCode = this.querySite[1];
}
// 根据站点和历史id,回显
this.formAll = [];
this.activeIndex = "0";
// console.log(this.activeIndex)
},
temStorageEcho() {
// this.activeIndex = '0'
if(localStorage.getItem(name)){
if (localStorage.getItem(name)) {
this.formAll = JSON.parse(localStorage.getItem(name));
this.$message({ message: '暂存回显成功', type: "success" });
} else{
this.$message({ message: '无暂存内容', type: "warning" });
this.$message({ message: "暂存回显成功", type: "success" });
} else {
this.$message({ message: "无暂存内容", type: "warning" });
}
// console.log(JSON.parse(sessionStorage.getItem(name)),111)
},
temStorage() {
this.$refs["form"][i].validate(valid => {
if (valid) {
successCount++;
} else {
this.$message({message: `${this.siteNameList[i]} 校验失败,请查看`,type: "warning"});
this.$message({
message: `${this.siteNameList[i]} 校验失败,请查看`,
type: "warning"
});
// alert(`${this.siteNameList[i]} 校验失败,请查看`);
// this.$notify({
// title: '警告',
// message: `${this.siteNameList[i]} 校验失败,请查看`,
successFlag = true;
// return false;
}
});
if(successFlag){
return false
}
}
console.log(this.stCode,'form6Inputform6Input9999999')
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,
hexRtuCode: this.hexRtuCode,
rtuTelemeteringStationSetting: this.formAll[0].form1,
rtuCentreSetting: this.formAll[1].form2,
rtuSenseTypeSetting: this.formAll[2].form3,
rtuMeteorologicalSensingCommunicationSetting: this.formAll[3].form4,
// ] = rtuAddUpTimesNew;
parmas.data["rtuIndustrialCameraSetting"][
"rtucamera_jiabao"
] = rtucamera_jiabaoNew;
this.$http.post(`${this.nozzle.rTUSettingServiceUpdate}`,parmas).then(res=>{
// console.log(res,'rTUSettingServiceUpdate')
this.echoClick()
})
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])
},
}
},
selectChange(val) {
// this.querySite = []
this.rtuHistoryId='',
// console.log(val,'val')
this.echoClick(val);
this.getRtuHistoryList()
(this.rtuHistoryId = ""),
// console.log(val,'val')
this.echoClick(val);
this.getRtuHistoryList();
},
selectChange1(val) {
// console.log(val,'val') input搜索
this.echoClick(val);
this.getRtuHistoryList()
this.getRtuHistoryList();
},
selectRtuHistoryId(val) {
console.log(val,'selectRtuHistoryId')
console.log(val, "selectRtuHistoryId");
// this.echoClick(val);
},
async initPage(site) {
// 切换站点后去请求历史下拉框
// 回显接口请求数据 将水文传感里面3处特殊的控件需要的值,用请求数据遍历生成表单需要的字段,因为这3处的动态表单使用的是死的字段,其他的对应的表单数据赋值给对应表单就能回显了、
let resFirst = await this.$http.post(
`${this.nozzle.rTUSettingServiceQueryById}?rtuCode=${site}`
);
if(resFirst.data.msg ===507){
this.$message('请更新')
if (resFirst.data.msg === 507) {
this.$message("请更新");
}
let resData = resFirst.data.data;
let formArr = [
"rtuTelemeteringStationSetting",
 
for (let i = 1; i <= 15; i++) {
let obj = {};
// 水文传感里是第6个表单
if (i !== 6 && i !== 5) {
if (i !== 6 && i !== 5) {
obj[`form${i}`] = resData[formArr[i - 1]];
}
// else if (i === 1) {
// var formObj = Object.assign({},resData[formArr[i - 1]]);
// // console.log(form1Obj,'form1Obj')
// obj[`form${i}`] = formObj;
// }
else if (i === 5) {
let formObj = Object.assign({},resData[formArr[i - 1]]);
let formObj = Object.assign({}, resData[formArr[i - 1]]);
let rtucamera_jiabaoNew = [];
if (!formObj.hasOwnProperty("rtucamera_jiabao")) {
return;
}
"rtuSoilSettler",
"rtu4To20Setting",
"rtuOtherSetting"
];
console.log(this.formAll,resData,'ressssss')
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) {
if (i !== 6 && i !== 5) {
obj[`form${i}`] = resData[formArr[i - 1]];
}
// else if (i === 1) {
// var formObj = Object.assign({},resData[formArr[i - 1]]);
// // console.log(form1Obj,'form1Obj')
// obj[`form${i}`] = formObj;
// }
else if (i === 5) {
let formObj = Object.assign({},resData[formArr[i - 1]]);
let formObj = Object.assign({}, resData[formArr[i - 1]]);
let rtucamera_jiabaoNew = [];
if (!formObj.hasOwnProperty("rtucamera_jiabao")) {
return;
}
});
var newObj = [];
// 根据小标题去重
uniq(sub_titleList).forEach(item => {
var obj = { name: item, data: [], isShow:true, isBlock:true };
var obj = { name: item, data: [], isShow: true, isBlock: true };
var data = dataRes[i].forEach(l => {
l.isShow = true
l.isShow = true;
if (
l.subTitle === item &&
l.subTitle !== "" &&
l.subTitle !== undefined
});
this.$set(this.formAllBody, i, newObj);
}
}
console.log(this.formAllBody,'999')
console.log(this.formAllBody, "999");
});
},
async getSiteList() {
await this.$http
.post(this.nozzle.rTUSettingServiceQueryList)
.then(res => {
console.log(res.data.data,'resss')
console.log(res.data.data, "resss");
this.querySiteList = res.data.data;
// 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]
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}`
//`${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=>{
created() {
this.getSiteList().then(res => {
// this.querySiteList[0].rtuStationCode
this.initPage(this.querySite);
this.getRtuHistoryList()
this.getRtuHistoryList();
});
 
this.formControl();
// console.log(666)
},
}
// beforeRouteLeave (to, from, next) {
// // 导航离开该组件的对应路由时调用
// // 可以访问组件实例 `this`
// this.$confirm("请检查是否需要暂存!", "提示", {
// background-color: black!important;
// }
// }
// }
.content{
width: 100% !important;
height: 100% !important;
#navMenuContent {
/* height: calc(100% - 20px);
.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; */
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;
}
.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;
}
.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;
}
//
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;
}
}
// 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
.el-input {
width: 100% !important;
.el-input__inner {
width: 100% !important;
color: var(--white) !important;
}
}
 
}
.rowClass{
.el-col-class{
position:relative
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; */
}
 
}
.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;
}
}
// 普通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 {
.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;
}
}
// /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--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;
// }
 
.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>
View
329
src/components/ConfigManager/SiteManagement.vue
<span
>站点名称命名规则 "[项目名称]"
+安装位置关键标识,例如[武昌]湖北大学东门监测站点</span
>
</el-form-item>
<el-form-item label="站点编号" prop="stCode" style="width: 100%">
<el-input
:disabled="iscodefalse"
size="small"
v-model="ruleForm.stCode"
class="selectInput"
></el-input>
<span>站点编号现在暂无规则制定</span>
</el-form-item>
<el-form-item label="站点类型" prop="stationType">
<el-select
class="selectInput"
import { mapGetters } from "vuex";
import markMap from "./markMap.vue";
export default {
components: {
markMap,
markMap
},
data() {
return {
// 判断添加站点和修改时候站点编号是否无法选中
iscodefalse: false,
dialogFormVisible: false,
//站点搜索相关
siteFilterInfo: {
query: {
searchStr: "",
startDate: "",
endDate: "",
endDate: ""
},
list: [
{
type: "input",
label: "站点名称/编号",
value: "searchStr",
hideLabel: true,
hideLabel: true
},
{
type: "date",
label: "开始时间",
value: "startDate",
dateType: "date",
datePickerOptions: "pickerOptionsStart",
hideLabel: true,
hideLabel: true
},
{
type: "date",
label: "结束时间",
value: "endDate",
dateType: "date",
datePickerOptions: "pickerOptionsEnd",
hideLabel: true,
hideLabel: true
},
{
type: "button",
label: "查询",
btType: "primary",
icon: "el-icon-search",
event: "search",
show: true,
show: true
},
{
type: "button",
label: "添加站点",
btType: "primary",
icon: "el-icon-circle-plus-outline",
event: "create",
show: true,
disabled: true,
// disabled: true,
has: "m11-2-1"
}
]
},
data: [],
fieldList: [
{ label: "站点编号", value: "stCode", minWidth: 120, tooltip: true },
{ label: "站点名称", value: "stName", minWidth: 120, tooltip: true },
{
label: "所属项目",
value: "platformName",
minWidth: 120,
tooltip: true
},
{ label: "站点类型", value: "stationTypeName", width: 120 },
{
label: "站点存储时间",
value: "ut",
minWidth: 150,
tooltip: true
},
 
{ label: "安装人", value: "person", width: 150 },
{ label: "关联设备", value: "equips", width: 150, type: "slot" },
{
label: "站点安装时间",
value: "createTime",
minWidth: 120,
tooltip: true,
},
{ label: "安装人", value: "person", width: 100 },
{ label: "关联设备", value: "equips", width: 150, type: "slot" },
{
label: "首次数据接入时间",
value: "tt",
minWidth: 150,
tooltip: true,
},
tooltip: true
}
],
handle: {
fixed: "right",
label: "操作",
size: "small",
type: "text",
event: "update",
show: true,
has: "m11-2-2",
},
],
},
has: "m11-2-2"
}
]
}
},
//列表相关
listTypeInfo: {},
loadingdelet: undefined,
guanwanglist: [],
xiufulist: [],
delFlagoptions: [
{ value: "0", lable: "禁用" },
{ value: "1", lable: "启用" },
{ value: "1", lable: "启用" }
],
configForm: {
ruleId: "", //规则引擎
 
{
property: "", //修复因子
isEnable: "", //是否启用(0否 1是)
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
},
],
maxValue: 0 // 正常范围最大值
}
]
},
ruleForm: {
id: "", //站点ID
stName: "", //站点名称
// stationTypeName: "", //站点名称
coordinateSystem: "WGS84坐标系", //坐标系(经纬度所对应的的坐标系)
address: "", //站点安装位置
person: "", //安装负责人
fileList: [], //现场安装图片
fileList: [] //现场安装图片
},
rules: {
// area: [
// {
// required: true,
// message: "请选择所属区域",
// trigger: "change"
// }
// ],
stCode: [
{
required: true,
message: "请填写站点编号",
trigger: "blur"
}
],
stationType: [
{
required: true,
message: "请选择站点类型",
trigger: "change",
},
trigger: "change"
}
],
platformCode: [
{
required: true,
message: "请选择所属项目",
trigger: "change",
},
trigger: "change"
}
],
stName: [
{
required: true,
message: "请填写站点名称",
trigger: "blur",
},
trigger: "blur"
}
],
lon: [
{
required: true,
message: "请填写经度",
trigger: "blur",
},
trigger: "blur"
}
],
lat: [
{
required: true,
message: "请填写纬度",
trigger: "blur",
},
trigger: "blur"
}
],
coordinateSystem: [
{
required: true,
message: "请填写站点坐标系",
trigger: "blur",
},
trigger: "blur"
}
],
address: [
{
required: true,
message: "请填写站点安装位置",
trigger: "blur",
},
trigger: "blur"
}
],
person: [
{
required: true,
message: "请填写安装负责人",
trigger: "blur",
},
],
trigger: "blur"
}
]
},
value: [],
// 站点管理/所属区域数组
syscityList: [],
projectList: [],
//弹窗相关
dialogInfo: {
title: {
look: "",
look: ""
},
width: "60%",
visible: false,
btLoading: false,
type: "",
btList: [
{ label: "关闭", type: "", icon: "", event: "close", show: true },
],
{ label: "关闭", type: "", icon: "", event: "close", show: true }
]
},
//设备表格通用相关
deviceTableInfo: {
url: this.nozzle.sysEquipRelatedList, //接口地址
{
label: "设备名称",
value: "equipDesc",
minWidth: 100,
tooltip: true,
tooltip: true
},
{
label: "设备厂家",
value: "equipFactory",
minWidth: 150,
tooltip: true,
},
],
tooltip: true
}
]
},
//已关联设备表格相关
isRelatedDeviceTableInfo: {
data: [],
query: {
sign: "",
sign: ""
},
selectList: [],
selectList: []
},
//未关联设备表格相关
unRelatedDeviceTableInfo: {
data: [],
query: {
sign: "unbound",
sign: "unbound"
},
selectList: [],
selectList: []
},
//设备关联过滤相关
deviceRelatedQuery: {
searchStr: "",
siteCode: "",
siteCode: ""
},
//选中的项目对象
projectObj: {},
projectObj: {}
};
},
mounted() {
this.siteTableInfo.refresh = Math.random();
//添加按钮是否可点击
isCanInsertDevice() {
return this.unRelatedDeviceTableInfo.selectList.length ? false : true;
},
...mapGetters(["allDept", "allRole", "allCity"]),
...mapGetters(["allDept", "allRole", "allCity"])
},
watch: {
"ruleForm.area": {
handler(newVal, oldVal) {
this.$refs.cascader.dropDownVisible = false;
}
}
},
deep: true, // 深度监听
 
deep: true // 深度监听
},
yzaddflag(isss) {
if (!isss) {
this.$refs.ruleForm.clearValidate();
// console.log(this.$refs.ruleForm.clearValidate());
}
},
dialogVisible: {
handler(newVal, oldval) {
if (oldval) {
this.dialogImageUrl = "";
}
},
}
},
"dialogInfo.visible"(val) {
if (!val) {
this.deviceTableInfo.data = [];
},
platformCode(val) {
console.log(777, val);
this.ruleForm.platformCode = val;
},
}
},
methods: {
filterCondition() {
/**
this.configForm.siteRepairPropertyConfigList.push({
property: "", //修复因子
isEnable: "", //是否启用(0否 1是)
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
maxValue: 0 // 正常范围最大值
});
},
deleteIcons(index) {
// 删除过滤条件
httpurl = this.nozzle.siterepairconfigcreate;
} else {
httpurl = this.nozzle.siterepairconfigmodify;
}
this.$http.post(httpurl, this.configForm).then((res) => {
this.$http.post(httpurl, this.configForm).then(res => {
console.log(res);
if (res.data.code === 200) {
this.configtrue = false;
// this.isconfigadd=false
}
this.$message({
message: res.data.message,
type: res.data.code === 200 ? "success" : "error",
showClose: true,
showClose: true
});
});
},
//响应地图组件的确定,拾取坐标
SendLngLat(lonlat) {
this.dialogFormVisible = false;
this.ruleForm.lon = lonlat[0];
this.ruleForm.lat = lonlat[1];
this.$refs.ruleForm.validateField("lon", valid => {
//valid返回的是规则集中写的错误提示信息,如果满足条件,返回的就是空
if (!valid) {
return;
}
});
this.$refs.ruleForm.validateField("lat", valid => {
//valid返回的是规则集中写的错误提示信息,如果满足条件,返回的就是空
if (!valid) {
return;
}
});
},
//坐标拾取地图控件打开
pickLngLat() {
this.dialogFormVisible = true;
formdata.append("files", file.raw);
formdata.append("siteNo", this.ruleForm.stCode);
formdata.append("username", "admin");
let config = {
headers: { "Content-Type": "multipart/form-data" },
headers: { "Content-Type": "multipart/form-data" }
};
axios
.post(this.nozzle.upload, formdata, config)
.then((res) => {
.then(res => {
if (res.data.code == 1) {
this.loading = false;
this.$message({
message: "上传图片成功!",
type: "success",
type: "success"
});
this.ruleForm.fileList.push(res.data.data[0]);
this.siteTableInfo.refresh = Math.random();
}
})
.catch((res) => {
.catch(res => {
this.loading = false;
this.$message({
message: "服务器问题!请重试!",
type: "warning",
type: "warning"
});
});
},
// 删除图片按钮
deleteImg(fileNo) {
this.$confirm("此操作将永久删除该图片文件,无法撤回!是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
type: "warning"
})
.then(() => {
let fileNos = [];
fileNos.push(fileNo);
const loadingdelet = this.$loading({
lock: true,
text: "正在删除....",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
background: "rgba(0, 0, 0, 0.7)"
});
this.$http
.post(this.nozzle.delete, {
data: {
siteNo: this.ruleForm.stCode,
fileNos: fileNos,
},
fileNos: fileNos
}
})
.then((res) => {
.then(res => {
loadingdelet.close();
if (res.data.code === 1) {
this.siteTableInfo.refresh = Math.random();
}
this.$message({
type: res.data.code === 1 ? "success" : "error",
message: res.data.msg,
message: res.data.msg
});
this.ruleForm.fileList = this.ruleForm.fileList.filter((item) => {
this.ruleForm.fileList = this.ruleForm.fileList.filter(item => {
return item.fileNo != fileNo;
});
})
.catch((res) => {
.catch(res => {
loadingdelet.close();
this.$message({
type: "info",
message: "删除失败,请重试!",
message: "删除失败,请重试!"
});
});
})
.catch(() => {
loadingdelet.close();
this.$message({
type: "info",
message: "已取消删除",
message: "已取消删除"
});
});
},
// 点击图片显示图片预览大图
this.dialogVisible = true;
},
// 弹框提交表单按钮
saveOru(formName) {
this.$refs[formName].validate((valid) => {
this.$refs[formName].validate(valid => {
if (valid) {
this.$http
.post(this.nozzle.saveOrupdate, {
data: this.ruleForm,
data: this.ruleForm
})
.then((res) => {
.then(res => {
if (res.data.code === 1) {
this.siteTableInfo.refresh = Math.random();
this.yzaddflag = false;
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true,
showClose: true
});
});
}
});
let that = this;
if (visible) {
this.timer = setInterval(() => {
NodeList.prototype.forEach = Array.prototype.forEach;
document
.querySelectorAll(".el-cascader-node__label")
.forEach((el) => {
el.onclick = function () {
if (this.previousElementSibling)
this.previousElementSibling.click();
};
el.ondblclick = function () {
if (Array.isArray(that.$refs.cascader)) {
that.$refs.cascader[0].dropDownVisible = false;
} else {
that.$refs.cascader.dropDownVisible = false;
}
};
});
document.querySelectorAll(".el-cascader-node__label").forEach(el => {
el.onclick = function() {
if (this.previousElementSibling)
this.previousElementSibling.click();
};
el.ondblclick = function() {
if (Array.isArray(that.$refs.cascader)) {
that.$refs.cascader[0].dropDownVisible = false;
} else {
that.$refs.cascader.dropDownVisible = false;
}
};
});
}, 1000);
} else {
clearInterval(this.timer);
}
//获取站点类型列表
async getsityType() {
const { data } = await this.$http.post(this.nozzle.sityType, {
data: {
siteType: "site_type",
},
siteType: "site_type"
}
});
this.siteTypeList = data.data;
},
//获取当前用户所绑定的项目
this.$http
.post(this.nozzle.sysPlatformList, {
current: 0,
size: 0,
data: { searchStr: "", startDate: "", endDate: "" },
data: { searchStr: "", startDate: "", endDate: "" }
})
.then((res) => {
.then(res => {
if (res.data.code === 1) {
this.projectList = res.data.data.list.map((item) => {
this.projectList = res.data.data.list.map(item => {
return {
id: item.id,
key: item.name,
value: item.platformCode,
areaId: item.area,
areaId: item.area
};
});
}
});
this.siteTableInfo.refresh = Math.random();
break;
//添加站点
case "create":
this.iscodefalse = false;
this.projectObj = {};
this.yzaddflag = true;
this.title = "新增站点";
this.syscityList = this.removeEmptyChild(this.allCity);
break;
//编辑站点
case "update":
this.title = "修改站点";
this.iscodefalse = true;
for (let key in data) {
if (key === "stationType") {
data[key] = data[key] ? data[key].toString() : "";
}
this.projectObj = {
value: data.platformCode,
value: data.platformCode
};
this.ruleForm[key] = data[key];
}
this.syscityList = this.removeEmptyChild(this.allCity);
{
property: "", //修复因子
isEnable: "", //是否启用(0否 1是)
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
},
],
maxValue: 0 // 正常范围最大值
}
]
}),
console.log(index);
this.configForm.st = data.stCode;
 
this.$http.get(this.nozzle.ruleEngineselectAll).then((res) => {
this.$http.get(this.nozzle.ruleEngineselectAll).then(res => {
console.log(res);
if (res.data.code === 200) {
this.ruleList = res.data.data.list;
console.log(this.ruleList);
}
});
this.$http.post(this.nozzle.siteinfolist, { type: 1 }).then((res) => {
this.$http.post(this.nozzle.siteinfolist, { type: 1 }).then(res => {
console.log(res);
if (res.data.code === 200) {
this.yulianglist = res.data.data;
console.log(this.yulianglist);
}
});
this.$http.post(this.nozzle.siteinfolist, { type: 1 }).then((res) => {
this.$http.post(this.nozzle.siteinfolist, { type: 1 }).then(res => {
console.log(res);
if (res.data.code === 200) {
this.guanwanglist = res.data.data;
console.log(this.guanwanglist);
}
});
this.$http
.post(this.nozzle.listsitesupportedproperty + "/" + data.stCode)
.then((res) => {
.then(res => {
console.log(res);
if (res.data.code === 200) {
this.xiufulist = res.data.data;
console.log(this.xiufulist);
});
 
this.$http
.post(this.nozzle.siteconfigdetail_by_st + "/" + data.stCode)
.then((res) => {
.then(res => {
console.log(res);
if (res.data.code === 200) {
if (res.data.data) {
// 修改
this.configForm.isEnable = String(res.data.data.isEnable);
this.configForm.siteRepairPropertyConfigList =
res.data.data.siteRepairPropertyConfigList;
this.configForm.id = res.data.data.id;
this.configForm.siteRepairPropertyConfigList.forEach(
(item) => {
item.isEnable = String(item.isEnable);
}
);
this.configForm.siteRepairPropertyConfigList.forEach(item => {
item.isEnable = String(item.isEnable);
});
} else {
//新增
this.isconfigadd = true;
}
break;
//添加设备到站点
case "insert":
const insertEquipNoArr = this.unRelatedDeviceTableInfo.selectList.map(
(item) => item.equipNo
item => item.equipNo
);
const insertData = {
siteCode: this.unRelatedDeviceTableInfo.query.siteCode,
equipNos: insertEquipNoArr,
equipNos: insertEquipNoArr
};
this.$http
.post(this.nozzle.sysEquipInsertBatch, { data: insertData })
.then((res) => {
.then(res => {
if (res.data.code === 1) {
this.deviceRelatedQuery.searchStr = "";
this.deviceTableInfo.refresh = Math.random();
this.deviceTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true,
showClose: true
});
});
break;
//解绑设备与站点
case "remove":
const removeEquipNoArr = this.isRelatedDeviceTableInfo.selectList.map(
(item) => item.equipNo
item => item.equipNo
);
const removeData = {
siteCode: this.isRelatedDeviceTableInfo.query.siteCode,
equipNos: removeEquipNoArr,
equipNos: removeEquipNoArr
};
this.$http
.post(this.nozzle.sysEquipRemoveBatch, { data: removeData })
.then((res) => {
.then(res => {
if (res.data.code === 1) {
this.deviceRelatedQuery.searchStr = "";
this.deviceTableInfo.refresh = Math.random();
this.deviceTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true,
showClose: true
});
})
.catch((e) => {
.catch(e => {
console.log(e);
});
break;
//关闭
// stationTypeName: "",
coordinateSystem: "WGS84", //坐标系(经纬度所对应的的坐标系)
address: "", //站点安装位置
person: "", //安装负责人
fileList: [], //现场安装图片
fileList: [] //现场安装图片
};
// this.$refs.cascader.$refs.panel.activePath = [];
// this.$refs.cascader.$refs.panel.clearCheckedNodes();
},
this.ruleForm.area = data.areaId;
},
//将空的children置为undefined,避免在没有下一级数据的情况下显示暂无数据
removeEmptyChild(arr) {
arr.forEach((item) => {
arr.forEach(item => {
if (!item.children || item.children.length < 1) {
item.children = undefined;
} else {
this.removeEmptyChild(item.children);
}
});
return arr;
},
}
},
destroyed() {
clearInterval(this.timer);
},
}
};
</script>
<style lang="scss" scoped>
.addDialog {
View
src/components/configure/AlarmConfiguration.vue
View
src/components/configure/AlarmLog.vue
View
src/components/newFiber/NewFiberSearch.vue
View
src/components/site/previewOfSiteStatus.vue