|
|
|
@ -1,21 +1,13 @@ |
|
|
|
<template> |
|
|
|
<div class="container infoBoardBox" style="height:94vh;;background-color: #11232a;"> |
|
|
|
<div style=" |
|
|
|
height: 100%; |
|
|
|
margin-left: 0px; |
|
|
|
margin-right: 0px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
"> |
|
|
|
<div style="width: 20%" class="verticalBox"> |
|
|
|
<div style="width:100%;height:100%;padding:1vh 0.2vw;"> |
|
|
|
<div style="width:100%;height:100%;background-color:#112d3b;padding:0 0 1vh 0;"> |
|
|
|
<div class="bigTitle qbbBigTitle"> |
|
|
|
<div class="infoBoardBox"> |
|
|
|
<div class="infoBoardCon"> |
|
|
|
<div style="width: 20%" class="part partLeft"> |
|
|
|
<div class="partTitle boardListTitle"> |
|
|
|
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> |
|
|
|
<div>情报板列表</div> |
|
|
|
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> |
|
|
|
</div> |
|
|
|
<el-form ref="form" style="padding:0 0.5vw;" :model="form"> |
|
|
|
<el-form ref="form" :model="form" class="partCon"> |
|
|
|
<el-form-item style="margin-bottom: 12px;"> |
|
|
|
<el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" style="overflow: hidden;width: 100%;"> |
|
|
|
<el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" @click.native="____changeDirection(item.dictValue)" /> |
|
|
|
@ -45,13 +37,9 @@ |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style="width: 37.8%" class="verticalBox verticalBoxBorderLeft"> |
|
|
|
<div style="width:100%;height:100%;padding:1vh 0.2vw;"> |
|
|
|
<div style="width:100%;height:100%;background-color:#112d3b;"> |
|
|
|
<div style="width: 37.8%" class="part partMiddle"> |
|
|
|
|
|
|
|
<div class="bigTitle awaitBigTitle"> |
|
|
|
<div class="partTitle partDeviceTempateTitle"> |
|
|
|
<div> |
|
|
|
<div style="display: flex;justify-content: start !important;align-items: center;"> |
|
|
|
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> |
|
|
|
@ -66,7 +54,7 @@ |
|
|
|
<el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="contentBox"> |
|
|
|
<div class="partCon"> |
|
|
|
<el-table :data="contentList" row-key="ID" v-loading="loading" style="height: 100%;padding: 0 1vh; background-color: #112d3b;overflow-y: scroll;" :key="toggleIndex"> |
|
|
|
<el-table-column width="545"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
@ -117,15 +105,11 @@ |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 信息模板 --> |
|
|
|
<div style=" width: 42.2%" class="verticalBox verticalBoxBorderLeft"> |
|
|
|
<div style="width:100%;height:100%;padding:1vh 0.2vw;"> |
|
|
|
<div style="width:100%;height:100%;background-color:#112d3b"> |
|
|
|
|
|
|
|
<div class="bigTitle awaitBigTitle"> |
|
|
|
<div style=" width: 42.2%" class="part partRight"> |
|
|
|
<div class="partTitle partDeviceTempateTitle"> |
|
|
|
<div> |
|
|
|
<div style="display: flex;justify-content: start !important;align-items: center;"> |
|
|
|
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> |
|
|
|
@ -139,11 +123,12 @@ |
|
|
|
<el-button type="primary" @click="____onAddTemplate">添加模板</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="templateBox"> |
|
|
|
<div class="partCon"> |
|
|
|
<vuescroll :ops="scrollOptions" class="templateBox"> |
|
|
|
<div v-for="(item,index) in templateAvailable" :key="item.dictValue"> |
|
|
|
<!-- 原来是<el-collapse v-model="activeNames"> --> |
|
|
|
<h3>{{ item.dictLabel }}</h3> |
|
|
|
<div v-for="(itm, indx) in item.list" :key="indx" class="infoItem"> |
|
|
|
<div v-for="(itm, indx) in item.list" :key="indx" class="tplItem"> |
|
|
|
<!-- 模板内容 --> |
|
|
|
<BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview> |
|
|
|
<!-- <div class="infoPreview"> |
|
|
|
@ -165,8 +150,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</vuescroll> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -202,6 +186,9 @@ import { getBoardList } from '@/api/board/board' |
|
|
|
import { getTemplateList } from '@/api/board/template' |
|
|
|
import BoardPreview from './BoardPreview' |
|
|
|
|
|
|
|
import vuescroll from 'vuescroll' |
|
|
|
import scrollOptions from '@/common/scrollbar.js' |
|
|
|
|
|
|
|
// 对象深拷贝 |
|
|
|
export const deepClone = data => { |
|
|
|
// 封装的判断数据类型的方法 |
|
|
|
@ -232,7 +219,8 @@ export default { |
|
|
|
components: { |
|
|
|
BoardInfoEditor, |
|
|
|
editInfo, |
|
|
|
BoardPreview |
|
|
|
BoardPreview, |
|
|
|
vuescroll |
|
|
|
}, |
|
|
|
dicts: ['iot_board_direction'], |
|
|
|
|
|
|
|
@ -285,7 +273,8 @@ export default { |
|
|
|
type:"", |
|
|
|
visible:false, |
|
|
|
tpl:{} |
|
|
|
} |
|
|
|
}, |
|
|
|
scrollOptions |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -372,7 +361,7 @@ computed:{ |
|
|
|
rowDrop() { |
|
|
|
if (JSON.parse(JSON.stringify(this.contentList)).length > 0) { |
|
|
|
// 要侦听拖拽响应的DOM对象 |
|
|
|
const tbody = document.querySelector('.contentBox .el-table__body-wrapper tbody') |
|
|
|
const tbody = document.querySelector('.partCon .el-table__body-wrapper tbody') |
|
|
|
const _this = this |
|
|
|
Sortable.create(tbody, { |
|
|
|
// 结束拖拽后的回调函数 |
|
|
|
@ -1060,28 +1049,35 @@ computed:{ |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.container { |
|
|
|
.verticalBox { |
|
|
|
.infoBoardBox { |
|
|
|
.infoBoardCon{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 10px 5px; |
|
|
|
|
|
|
|
.bigTitle { |
|
|
|
display: flex; flex-direction: row; |
|
|
|
align-items: stretch; |
|
|
|
padding: 20px; |
|
|
|
.part { |
|
|
|
background-color: #133242; |
|
|
|
margin-right: 10px; |
|
|
|
display: flex; flex-direction: column; |
|
|
|
&.partRight{ |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
.partTitle { |
|
|
|
padding: 0px 0; |
|
|
|
/* // border-bottom: 1px solid #05afe3; */ |
|
|
|
margin-bottom: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
height: 60px; |
|
|
|
font-size: 0.8vw; |
|
|
|
font-size: 18px; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.contentBox { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 46px); |
|
|
|
padding: 0 0 1vh 0; |
|
|
|
/* // overflow: auto; */ |
|
|
|
|
|
|
|
.partCon { |
|
|
|
flex: 1; |
|
|
|
height: 0; |
|
|
|
padding:10px; |
|
|
|
.con { |
|
|
|
/* // border: 1px solid #05afe3; */ |
|
|
|
height: 75px; |
|
|
|
@ -1102,13 +1098,10 @@ computed:{ |
|
|
|
} |
|
|
|
|
|
|
|
.templateBox { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 46px); |
|
|
|
padding: 0 0 1vh 0; |
|
|
|
|
|
|
|
.infoItem { |
|
|
|
width: 100%; height: 100%; |
|
|
|
.tplItem { |
|
|
|
margin-right: 14px; |
|
|
|
display: flex; |
|
|
|
box-sizing: content-box; |
|
|
|
align-items: stretch; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
@ -1185,6 +1178,7 @@ computed:{ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.checkbox { |
|
|
|
label { |
|
|
|
@ -1242,7 +1236,7 @@ computed:{ |
|
|
|
color: #05afe3 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.qbbBigTitle { |
|
|
|
.boardListTitle { |
|
|
|
// margin-top: 1vh; |
|
|
|
color: #fff; |
|
|
|
height: 35px !important; |
|
|
|
@ -1260,10 +1254,10 @@ computed:{ |
|
|
|
height: 22px; |
|
|
|
margin: 0 0.5vw 0 0.5vw; |
|
|
|
} |
|
|
|
.awaitBigTitle { |
|
|
|
.partDeviceTempateTitle { |
|
|
|
width: 100%; |
|
|
|
color: #fff; |
|
|
|
padding-right: 6vw !important; |
|
|
|
padding-right: 110px !important; |
|
|
|
height: 35px !important; |
|
|
|
background-image: url('~@/assets/screen/xtb/qbbti.png'); |
|
|
|
background-size: 100% 100%; |
|
|
|
|
hui
1 year ago