|
|
|
@ -10,28 +10,63 @@ |
|
|
|
<!-- </div> --> |
|
|
|
<WgtTitle :title="'情报板列表'"></WgtTitle> |
|
|
|
<el-form |
|
|
|
ref="form" |
|
|
|
:model="form" |
|
|
|
class="partCon" |
|
|
|
style="display: flex; flex-direction: column" |
|
|
|
:model="form" |
|
|
|
class="formSearch" size="mini" |
|
|
|
> |
|
|
|
<el-form-item style="margin-bottom: 12px"> |
|
|
|
<el-select |
|
|
|
v-model="form.selectedDirection" |
|
|
|
size="medium" |
|
|
|
placeholder="请选择方向" |
|
|
|
class="direction" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in boardDirectionList" |
|
|
|
:key="item.dictValue" |
|
|
|
:label="item.dictLabel" |
|
|
|
:value="item.dictValue" |
|
|
|
@click.native="____changeDirection(item.dictValue)" |
|
|
|
/> |
|
|
|
</el-select> |
|
|
|
<!-- class="partCon" --> |
|
|
|
<!-- style="display: flex; flex-direction: column" --> |
|
|
|
<!-- ref="form" --> |
|
|
|
<el-form-item> |
|
|
|
<el-col :span="12"> |
|
|
|
<el-select |
|
|
|
v-model="form.selectedDirection" |
|
|
|
size="medium" |
|
|
|
placeholder="请选择方向" |
|
|
|
class="direction" |
|
|
|
> |
|
|
|
<el-option |
|
|
|
v-for="item in boardDirectionList" |
|
|
|
:key="item.dictValue" |
|
|
|
:label="item.dictLabel" |
|
|
|
:value="item.dictValue" |
|
|
|
/> |
|
|
|
<!-- @click.native="____changeDirection(item.dictValue)" --> |
|
|
|
</el-select> |
|
|
|
</el-col> |
|
|
|
<el-col :span="11" :offset="1"> |
|
|
|
<el-checkbox-group v-model="form.status" style="height:26px"> |
|
|
|
<el-checkbox label="1">在线</el-checkbox> |
|
|
|
<el-checkbox label="0">离线</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</el-col> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="开始桩号:"> |
|
|
|
<el-col :span="2" class="text-center tc-lb">K</el-col> |
|
|
|
<el-col :span="7"> |
|
|
|
<el-input-number v-model="form.stakeFrom[0]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number> |
|
|
|
</el-col> |
|
|
|
<el-col :span="2" class="text-center tc-lb">+</el-col> |
|
|
|
<el-col :span="7"> |
|
|
|
<el-input-number v-model="form.stakeFrom[1]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number> |
|
|
|
</el-col> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="结束桩号:"> |
|
|
|
<el-col :span="2" class="text-center tc-lb">K</el-col> |
|
|
|
<el-col :span="7"> |
|
|
|
<el-input-number v-model="form.stakeTo[0]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number> |
|
|
|
</el-col> |
|
|
|
<el-col :span="2" class="text-center tc-lb">+</el-col> |
|
|
|
<el-col :span="7"> |
|
|
|
<el-input-number v-model="form.stakeTo[1]" style="width: 100%;" :precision="0" :min="0" :max="1000"></el-input-number> |
|
|
|
</el-col> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item style="display: flex; justify-content: center;"> |
|
|
|
<el-button class="btnInfoBoard" type="add" @click.native="____onSearchDevice()">搜索</el-button> |
|
|
|
<el-button type="publish" @click.native="____onResetSearchDevice()">重置</el-button> |
|
|
|
</el-form-item> |
|
|
|
<vuescroll :ops="scrollOptions" style="flex: 1; height: 0"> |
|
|
|
</el-form> |
|
|
|
<div style="flex:1; height: 0; padding:0 10px 10px"> |
|
|
|
<vuescroll :ops="scrollOptions"> |
|
|
|
<el-collapse |
|
|
|
v-model="selectedSize" |
|
|
|
accordion |
|
|
|
@ -46,7 +81,7 @@ |
|
|
|
> |
|
|
|
<div v-if="item.list.length > 0"> |
|
|
|
<el-checkbox-group |
|
|
|
class="checkbox" |
|
|
|
class="deviceList" |
|
|
|
v-model="checkedDeviceIds" |
|
|
|
:max="2" |
|
|
|
@change="____onSelectDevices" |
|
|
|
@ -80,7 +115,7 @@ |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</vuescroll> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- ++++++++++中间部分：单个设备++++++++++ --> |
|
|
|
<div style="width: 37.8%" class="part partMiddle"> |
|
|
|
@ -357,13 +392,7 @@ export default { |
|
|
|
deviceList: [], //分辨率 |
|
|
|
checkedDeviceIds: [], //多选 选中项 |
|
|
|
templateAvailable: [], |
|
|
|
form: { |
|
|
|
selectedDirection: "", |
|
|
|
company: null, |
|
|
|
mechanism: null, |
|
|
|
localInfo: null, |
|
|
|
selectedPixel: null, |
|
|
|
}, //情报板列表表单 |
|
|
|
form: {}, |
|
|
|
supplier: null, //报文类型 |
|
|
|
activeNames: [], //模板 展开项 |
|
|
|
tplCategory: [], //模板 |
|
|
|
@ -408,6 +437,7 @@ export default { |
|
|
|
// } |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.____resetForm(); |
|
|
|
Promise.all([ |
|
|
|
this.____initDirection(), |
|
|
|
this.____getBoardPixel(), |
|
|
|
@ -501,9 +531,25 @@ export default { |
|
|
|
this.____getIotBoard(); |
|
|
|
}, |
|
|
|
|
|
|
|
____onSearchDevice(){ |
|
|
|
this.____getIotBoard(); |
|
|
|
}, |
|
|
|
____resetForm(){ |
|
|
|
this.form = { |
|
|
|
selectedDirection: "", |
|
|
|
status: ["0", "1"], |
|
|
|
stakeFrom: [55, 378], |
|
|
|
stakeTo: [208, 153] |
|
|
|
} |
|
|
|
}, |
|
|
|
____onResetSearchDevice(){ |
|
|
|
this.____resetForm(); |
|
|
|
this.____initDirection(); |
|
|
|
this.____getIotBoard(); |
|
|
|
}, |
|
|
|
// 情报板设备 折叠面板 |
|
|
|
____getIotBoard() { |
|
|
|
this.checkAll = false; |
|
|
|
// this.checkAll = false; |
|
|
|
for (let key in this.boardSizeDic) { |
|
|
|
this.boardSizeDic[key].list = []; |
|
|
|
} |
|
|
|
@ -511,6 +557,13 @@ export default { |
|
|
|
let param = { |
|
|
|
direction: this.form.selectedDirection, |
|
|
|
}; |
|
|
|
let stakeFrom = this.form.stakeFrom[0] * 1000 + this.form.stakeFrom[1]; |
|
|
|
let stakeTo = this.form.stakeTo[0] * 1000 + this.form.stakeTo[1]; |
|
|
|
let statusForm = _.cloneDeep(this.form.status); |
|
|
|
if(statusForm.includes("0")){ |
|
|
|
statusForm.push(null) |
|
|
|
} |
|
|
|
|
|
|
|
if (IS_TESTING) { |
|
|
|
let res = testDeviceList; |
|
|
|
res.data.forEach((item) => { |
|
|
|
@ -534,7 +587,12 @@ export default { |
|
|
|
item.otherConfig = JSON.parse(item.otherConfig); |
|
|
|
} |
|
|
|
item.iotDeviceId = item.iotDeviceId || "null_" + item.id; |
|
|
|
this.boardSizeDic[item.otherConfig.screenSize].list.push(item); |
|
|
|
|
|
|
|
let stakeThis = +item?.stakeMark?.replace(/[K\+]/g, "") || -1; |
|
|
|
|
|
|
|
if(stakeThis >= stakeFrom && stakeThis <= stakeTo && statusForm.includes(item.deviceState)){ |
|
|
|
this.boardSizeDic[item.otherConfig.screenSize].list.push(item); |
|
|
|
} |
|
|
|
if (!this.selectedSize) { |
|
|
|
this.selectedSize = item.otherConfig.screenSize; |
|
|
|
} |
|
|
|
@ -1109,10 +1167,15 @@ export default { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
::v-deep .formSearch{ |
|
|
|
padding: 20px 20px 0; |
|
|
|
.el-form-item__label{ color: #fff;} |
|
|
|
} |
|
|
|
.direction { |
|
|
|
::v-deep .el-input { |
|
|
|
.el-input__inner { |
|
|
|
font-size: 16px !important; |
|
|
|
font-size: 14px !important; |
|
|
|
padding: 8px 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -1291,32 +1354,34 @@ export default { |
|
|
|
padding-bottom: 0px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-checkbox__label { |
|
|
|
display: flex !important; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
.title{ flex:1; width:0; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;} |
|
|
|
.state{ width: 18px; height: 18px; margin-right: 4px;} |
|
|
|
.huiduButton { |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
height: 18px; |
|
|
|
width: 18px; |
|
|
|
line-height: 20px; |
|
|
|
padding: 0; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
.deviceList{ |
|
|
|
::v-deep .el-checkbox__label { |
|
|
|
display: flex !important; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
.title{ flex:1; width:0; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;} |
|
|
|
.state{ width: 18px; height: 18px; margin-right: 4px;} |
|
|
|
.huiduButton { |
|
|
|
background: transparent; |
|
|
|
border: none; |
|
|
|
height: 18px; |
|
|
|
width: 18px; |
|
|
|
line-height: 20px; |
|
|
|
padding: 0; |
|
|
|
color: #fff; |
|
|
|
font-size: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
.huiduButton:hover { |
|
|
|
color: #05afe3 !important; |
|
|
|
.huiduButton:hover { |
|
|
|
color: #05afe3 !important; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-checkbox { |
|
|
|
display: flex !important; |
|
|
|
padding-top: 10px; |
|
|
|
margin: 0; |
|
|
|
.el-checkbox { |
|
|
|
display: flex !important; |
|
|
|
padding-top: 10px; |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-table { |
|
|
|
@ -1383,10 +1448,6 @@ export default { |
|
|
|
padding-left: 5px; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-checkbox + .el-checkbox { |
|
|
|
margin-left: 0px !important; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-collapse-item__header { |
|
|
|
background-color: #053b4f; |
|
|
|
color: #fff; |
|
|
|
@ -1410,10 +1471,6 @@ export default { |
|
|
|
border: none; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-checkbox__label { |
|
|
|
color: #ff0; |
|
|
|
} |
|
|
|
|
|
|
|
::v-deep .el-button--medium { |
|
|
|
width: 96px; |
|
|
|
height: 23px; |
|
|
|
|
