|
|
|
@ -1,149 +1,134 @@ |
|
|
|
<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"> |
|
|
|
<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-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)" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<!-- {{ boardSizeDic }} --> |
|
|
|
<el-collapse v-model="selectedSize" accordion @change="____onChangeSize"> |
|
|
|
<el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key"> |
|
|
|
<div v-if="item.list.length>0"> |
|
|
|
<!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选 |
|
|
|
</el-checkbox> --> |
|
|
|
<el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1"> |
|
|
|
<el-checkbox v-for="(itm, index) in item.list" :label="itm.id" :key="index"> |
|
|
|
<el-tooltip :content="itm.ip" placement="top"> |
|
|
|
<div>{{ itm.deviceName }}</div> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="回读当前信息" placement="top"> |
|
|
|
<el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.id)" :disabled="submitButton"></el-button> |
|
|
|
</el-tooltip> |
|
|
|
</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
<div v-else style="color: #fff; text-align: center; line-height: 60px;">暂无数据</div> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<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> |
|
|
|
</div> |
|
|
|
<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)" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item> |
|
|
|
<!-- {{ boardSizeDic }} --> |
|
|
|
<el-collapse v-model="selectedSize" accordion @change="____onChangeSize"> |
|
|
|
<el-collapse-item v-for="(item, key) in boardSizeDic" :key="key" :title="item.label" :name="key"> |
|
|
|
<div v-if="item.list.length>0"> |
|
|
|
<!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选 |
|
|
|
</el-checkbox> --> |
|
|
|
<el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1"> |
|
|
|
<el-checkbox v-for="(itm, index) in item.list" :label="itm.id" :key="index"> |
|
|
|
<el-tooltip :content="itm.ip" placement="top"> |
|
|
|
<div>{{ itm.deviceName }}</div> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="回读当前信息" placement="top"> |
|
|
|
<el-button class="el-icon-tickets huiduButton" @click.stop.prevent="onSubmit(itm.id)" :disabled="submitButton"></el-button> |
|
|
|
</el-tooltip> |
|
|
|
</el-checkbox> |
|
|
|
</el-checkbox-group> |
|
|
|
</div> |
|
|
|
<div v-else style="color: #fff; text-align: center; line-height: 60px;">暂无数据</div> |
|
|
|
</el-collapse-item> |
|
|
|
</el-collapse> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
</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 class="bigTitle awaitBigTitle"> |
|
|
|
<div> |
|
|
|
<div style="display: flex;justify-content: start !important;align-items: center;"> |
|
|
|
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> |
|
|
|
<div>{{ selectedDevice.deviceName }}</div> |
|
|
|
<span v-if="selectedSize">【 {{ selectedSize }}】</span> |
|
|
|
</div> |
|
|
|
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="controlBox"> |
|
|
|
<el-button type="primary" @click.native="openDialogVisible(1, 2)">添加信息</el-button> |
|
|
|
<el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button> |
|
|
|
<div style="width: 37.8%" class="part partMiddle"> |
|
|
|
|
|
|
|
<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=""> |
|
|
|
<div>{{ selectedDevice.deviceName }}</div> |
|
|
|
<span v-if="selectedSize">【 {{ selectedSize }}】</span> |
|
|
|
</div> |
|
|
|
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> |
|
|
|
</div> |
|
|
|
<div class="contentBox"> |
|
|
|
<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"> |
|
|
|
<div class="con"> |
|
|
|
<div style="background: black; position: relative" :style="{ |
|
|
|
color: getColorStyle(scope.row.COLOR) , |
|
|
|
fontSize: getFontSize(scope.row.FONT_SIZE), |
|
|
|
fontFamily: scope.row.FONT, |
|
|
|
width: getScreenSize(form.selectedPixel, 'width') + 'px', |
|
|
|
height: getScreenSize(form.selectedPixel, 'height') + 'px', |
|
|
|
'lineHeight':'1', |
|
|
|
'display': 'flex', |
|
|
|
'align-items': 'center', |
|
|
|
'justify-content': getTextAlign(scope.row.formatStyle), |
|
|
|
}"> |
|
|
|
<span :style="{ |
|
|
|
/*left: getCoordinate( |
|
|
|
scope.row.COORDINATE.substring(0, 3), |
|
|
|
'left' |
|
|
|
), |
|
|
|
top: getCoordinate( |
|
|
|
scope.row.COORDINATE.substring(3, 6), |
|
|
|
'top' |
|
|
|
),*/ |
|
|
|
position:'relative', |
|
|
|
maxHeight:getScreenSize(form.selectedPixel, 'height') + 'px', |
|
|
|
}" class="infoTxt" v-html=" |
|
|
|
scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, ' '): ''"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column width="130"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="infoBtnBox"> |
|
|
|
<!-- <el-tooltip content="加入信息模板" placement="top"> |
|
|
|
<div @click="arrowRight(scope.row)"></div> |
|
|
|
</el-tooltip> --> |
|
|
|
|
|
|
|
<el-tooltip content="编辑" placement="top"> |
|
|
|
<div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="删除" placement="top"> |
|
|
|
<div @click="delQbbDrawer(scope.$index)" class="del"></div> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<div class="controlBox"> |
|
|
|
<el-button type="primary" @click.native="openDialogVisible(1, 2)">添加信息</el-button> |
|
|
|
<el-button type="primary" @click="publishInfo" :disabled="contentList.length == 0">发布信息</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<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"> |
|
|
|
<div class="con"> |
|
|
|
<div style="background: black; position: relative" :style="{ |
|
|
|
color: getColorStyle(scope.row.COLOR) , |
|
|
|
fontSize: getFontSize(scope.row.FONT_SIZE), |
|
|
|
fontFamily: scope.row.FONT, |
|
|
|
width: getScreenSize(form.selectedPixel, 'width') + 'px', |
|
|
|
height: getScreenSize(form.selectedPixel, 'height') + 'px', |
|
|
|
'lineHeight':'1', |
|
|
|
'display': 'flex', |
|
|
|
'align-items': 'center', |
|
|
|
'justify-content': getTextAlign(scope.row.formatStyle), |
|
|
|
}"> |
|
|
|
<span :style="{ |
|
|
|
/*left: getCoordinate( |
|
|
|
scope.row.COORDINATE.substring(0, 3), |
|
|
|
'left' |
|
|
|
), |
|
|
|
top: getCoordinate( |
|
|
|
scope.row.COORDINATE.substring(3, 6), |
|
|
|
'top' |
|
|
|
),*/ |
|
|
|
position:'relative', |
|
|
|
maxHeight:getScreenSize(form.selectedPixel, 'height') + 'px', |
|
|
|
}" class="infoTxt" v-html=" |
|
|
|
scope.row.CONTENT? scope.row.CONTENT.replace(/\n|\r\n/g,'<br>').replace(/ /g, ' '): ''"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column width="130"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<div class="infoBtnBox"> |
|
|
|
<!-- <el-tooltip content="加入信息模板" placement="top"> |
|
|
|
<div @click="arrowRight(scope.row)"></div> |
|
|
|
</el-tooltip> --> |
|
|
|
|
|
|
|
<el-tooltip content="编辑" placement="top"> |
|
|
|
<div @click="openQbbDrawer(scope.row, scope.$index, 1)" class="edit"></div> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="删除" placement="top"> |
|
|
|
<div @click="delQbbDrawer(scope.$index)" class="del"></div> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</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> |
|
|
|
<div style="display: flex;justify-content: start !important;align-items: center;"> |
|
|
|
<img class="qbbBigDot" src="@/assets/screen/xtb/qbbdot.png" alt=""> |
|
|
|
<div>信息模板<span v-if="selectedSize">[{{ selectedSize }}]</span></div> |
|
|
|
</div> |
|
|
|
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> |
|
|
|
<!-- <span>信息模板</span> |
|
|
|
<span v-if="form.selectedPixel">【 {{ form.selectedPixel }}】</span> --> |
|
|
|
</div> |
|
|
|
<div class="controlBox"> |
|
|
|
<el-button type="primary" @click="____onAddTemplate">添加模板</el-button> |
|
|
|
<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=""> |
|
|
|
<div>信息模板<span v-if="selectedSize">[{{ selectedSize }}]</span></div> |
|
|
|
</div> |
|
|
|
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt=""> |
|
|
|
<!-- <span>信息模板</span> |
|
|
|
<span v-if="form.selectedPixel">【 {{ form.selectedPixel }}】</span> --> |
|
|
|
</div> |
|
|
|
<div class="templateBox"> |
|
|
|
<div class="controlBox"> |
|
|
|
<el-button type="primary" @click="____onAddTemplate">添加模板</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<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"> |
|
|
|
@ -160,14 +145,13 @@ |
|
|
|
<p @click="____onEditTemplate(itm)" class="btn btnEdit"></p> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="删除" placement="top"> |
|
|
|
<p @click="handleDelete(itm)" class="btn btnDelete"></p> |
|
|
|
<p @click="____onDeleteTemplate(itm)" class="btn btnDelete"></p> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</vuescroll> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<el-dialog title="提示" :visible.sync="arrowRightVisible" width="20%" :before-close="dialogClose"> |
|
|
|
@ -185,22 +169,26 @@ |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-dialog> |
|
|
|
<addinfo @submit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></addinfo> |
|
|
|
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type" :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor> |
|
|
|
<!-- <editInfo :boardEmitItem="this.boardEmitItem" @receiveForm="receiveForm" v-if="this.showEmit" @dialogClose="dialogClose"></editInfo> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import Sortable from 'sortablejs' |
|
|
|
import addinfo from './addinfo' |
|
|
|
import BoardInfoEditor from './BoardInfoEditor' |
|
|
|
import editInfo from './editInfo' |
|
|
|
import boardData from './boardData' |
|
|
|
import { getUserDeptId } from '@/api/system/user' |
|
|
|
import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getboardSizeDic, getBoardContentData, deviceControl } from '@/api/information/api.js' |
|
|
|
import { uploadBoardEditInfo, getAllVmsTemplate, addTemplate, addTemplateContent, getBoardContent, deleteTemplate, splicingBoard } from '@/api/board/template' |
|
|
|
import { invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device' |
|
|
|
import { getBoardList , getTemplateList } from '@/api/board/board' |
|
|
|
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 => { |
|
|
|
// 封装的判断数据类型的方法 |
|
|
|
@ -229,9 +217,10 @@ export const deepClone = data => { |
|
|
|
export default { |
|
|
|
name: 'Device', |
|
|
|
components: { |
|
|
|
addinfo, |
|
|
|
BoardInfoEditor, |
|
|
|
editInfo, |
|
|
|
BoardPreview |
|
|
|
BoardPreview, |
|
|
|
vuescroll |
|
|
|
}, |
|
|
|
dicts: ['iot_board_direction'], |
|
|
|
|
|
|
|
@ -284,7 +273,8 @@ export default { |
|
|
|
type:"", |
|
|
|
visible:false, |
|
|
|
tpl:{} |
|
|
|
} |
|
|
|
}, |
|
|
|
scrollOptions |
|
|
|
} |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
@ -371,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, { |
|
|
|
// 结束拖拽后的回调函数 |
|
|
|
@ -442,36 +432,14 @@ computed:{ |
|
|
|
tpl |
|
|
|
} |
|
|
|
}, |
|
|
|
____onEditSubmit(){ |
|
|
|
console.log("提交后外层的回调"); |
|
|
|
____onEditSubmit(para){ |
|
|
|
this.____refreshPageData(para); |
|
|
|
}, |
|
|
|
// 板子分辨率换算 |
|
|
|
getScreenSize(num, type) { |
|
|
|
// console.log(num) |
|
|
|
let width = num.split('*')[0] |
|
|
|
let height = num.split('*')[1] |
|
|
|
// 实际分辨率比页面板子小 |
|
|
|
if (width <= 450 && height <= 75) { |
|
|
|
if (type == 'width') { |
|
|
|
return width |
|
|
|
} else if (type == 'height') { |
|
|
|
return height |
|
|
|
} |
|
|
|
____refreshPageData(para){ |
|
|
|
if (para.type == 'template') { |
|
|
|
this.____getAllTemplate().then(this.____onChangeSize) |
|
|
|
} else { |
|
|
|
// 实际分辨率比页面板子大 |
|
|
|
if (width / 450 > height / 75) { |
|
|
|
if (type == 'width') { |
|
|
|
return 450 |
|
|
|
} else if (type == 'height') { |
|
|
|
return height / (width / 450) |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (type == 'width') { |
|
|
|
return width / (height / 75) |
|
|
|
} else if (type == 'height') { |
|
|
|
return 75 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
@ -586,51 +554,19 @@ computed:{ |
|
|
|
}, |
|
|
|
|
|
|
|
/** 删除按钮操作 */ |
|
|
|
handleDelete(row) { |
|
|
|
const ids = row.id || this.ids |
|
|
|
let content = '是否确认删除选中数据项?' |
|
|
|
if (ids == null || ids == undefined || ids == [] || ids == '') { |
|
|
|
content = '是否确认删除当前情报板模板?' |
|
|
|
} |
|
|
|
____onDeleteTemplate(row) { |
|
|
|
const id = row.id; |
|
|
|
let content = '确认删除?' |
|
|
|
this.$confirm(content, '警告', { |
|
|
|
confirmButtonText: '确定', |
|
|
|
cancelButtonText: '取消', |
|
|
|
type: 'warning' |
|
|
|
}) |
|
|
|
.then(function () { |
|
|
|
return deleteTemplate(ids) |
|
|
|
}) |
|
|
|
.then(() => { |
|
|
|
this.allVmsTemplate('no') |
|
|
|
this.$modal.msgSuccess('删除成功') |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
// 情报板管理右侧查询接口 |
|
|
|
allVmsTemplate(type) { |
|
|
|
const param = { |
|
|
|
selectedPixel: this.form.selectedPixel |
|
|
|
} |
|
|
|
|
|
|
|
//TODO 接口 |
|
|
|
getAllVmsTemplate(param).then(res => { |
|
|
|
let data = res.data |
|
|
|
console.log(res, '情报板管理右侧查询接口') |
|
|
|
let jArr = [] |
|
|
|
|
|
|
|
for (let j = 0; j < this.tplCategory.length; j++) { |
|
|
|
let arr = this.tplCategory[j] |
|
|
|
let brr = data[j] |
|
|
|
arr.list = brr |
|
|
|
jArr.push(j.toString()) |
|
|
|
} |
|
|
|
if (type != 'no') { |
|
|
|
this.activeNames = jArr |
|
|
|
} |
|
|
|
this.$forceUpdate() |
|
|
|
console.log(this.tplCategory, '新模板') |
|
|
|
}) |
|
|
|
|
|
|
|
}).then(()=>{ |
|
|
|
deleteTemplate(id).then(()=>{ |
|
|
|
this.$message.success('删除成功!'); |
|
|
|
this.____refreshPageData({type:"template"}); |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 删除中间模板 |
|
|
|
@ -1113,128 +1049,133 @@ computed:{ |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.container { |
|
|
|
.verticalBox { |
|
|
|
.infoBoardBox { |
|
|
|
.infoBoardCon{ |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
padding: 10px 5px; |
|
|
|
|
|
|
|
.bigTitle { |
|
|
|
padding: 0px 0; |
|
|
|
/* // border-bottom: 1px solid #05afe3; */ |
|
|
|
margin-bottom: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
height: 60px; |
|
|
|
font-size: 0.8vw; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.contentBox { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 46px); |
|
|
|
padding: 0 0 1vh 0; |
|
|
|
/* // overflow: auto; */ |
|
|
|
|
|
|
|
.con { |
|
|
|
/* // border: 1px solid #05afe3; */ |
|
|
|
height: 75px; |
|
|
|
position: relative; |
|
|
|
width: 540px; |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
border: 2px solid #004c64; |
|
|
|
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; |
|
|
|
} |
|
|
|
/* // } */ |
|
|
|
.controlBox { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
.partTitle { |
|
|
|
padding: 0px 0; |
|
|
|
/* // border-bottom: 1px solid #05afe3; */ |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.templateBox { |
|
|
|
width: 100%; |
|
|
|
height: calc(100% - 46px); |
|
|
|
padding: 0 0 1vh 0; |
|
|
|
|
|
|
|
.infoItem { |
|
|
|
display: flex; |
|
|
|
box-sizing: content-box; |
|
|
|
align-items: stretch; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
.boardPreview{ |
|
|
|
border: 2px solid #004c64; |
|
|
|
// width: 560px; |
|
|
|
// height:80px; |
|
|
|
flex: 1; |
|
|
|
justify-content: space-between; |
|
|
|
height: 60px; |
|
|
|
font-size: 18px; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.partCon { |
|
|
|
flex: 1; |
|
|
|
height: 0; |
|
|
|
padding:10px; |
|
|
|
.con { |
|
|
|
/* // border: 1px solid #05afe3; */ |
|
|
|
height: 75px; |
|
|
|
position: relative; |
|
|
|
width: 540px; |
|
|
|
overflow: hidden; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
border: 2px solid #004c64; |
|
|
|
} |
|
|
|
.infoBtnBox { |
|
|
|
width: 160px; |
|
|
|
height: 80px; |
|
|
|
display: flex; |
|
|
|
float: right; |
|
|
|
margin-left: 10px; |
|
|
|
padding: 0 0.2vw; |
|
|
|
/* // border: solid 1px #05afe3; */ |
|
|
|
/* // } */ |
|
|
|
.controlBox { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.templateBox { |
|
|
|
width: 100%; height: 100%; |
|
|
|
.tplItem { |
|
|
|
margin-right: 14px; |
|
|
|
display: flex; |
|
|
|
align-items: stretch; |
|
|
|
margin-bottom: 10px; |
|
|
|
|
|
|
|
.boardPreview{ |
|
|
|
border: 2px solid #004c64; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.btn { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
&.btnApply{ |
|
|
|
background-image: url(~@/assets/jihe/images/button/toLeft.png); |
|
|
|
} |
|
|
|
&.btnEdit{ |
|
|
|
background-image: url(~@/assets/jihe/images/button/edit.png); |
|
|
|
// width: 560px; |
|
|
|
// height:80px; |
|
|
|
flex: 1; |
|
|
|
} |
|
|
|
.infoBtnBox { |
|
|
|
width: 160px; |
|
|
|
height: 80px; |
|
|
|
display: flex; |
|
|
|
float: right; |
|
|
|
margin-left: 10px; |
|
|
|
padding: 0 0.2vw; |
|
|
|
/* // border: solid 1px #05afe3; */ |
|
|
|
border: 2px solid #004c64; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
.btn { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
&.btnApply{ |
|
|
|
background-image: url(~@/assets/jihe/images/button/toLeft.png); |
|
|
|
} |
|
|
|
&.btnDelete{ |
|
|
|
background-image: url(~@/assets/jihe/images/button/delete.png); |
|
|
|
&.btnEdit{ |
|
|
|
background-image: url(~@/assets/jihe/images/button/edit.png); |
|
|
|
} |
|
|
|
&.btnDelete{ |
|
|
|
background-image: url(~@/assets/jihe/images/button/delete.png); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
i { |
|
|
|
font-size: 24px; |
|
|
|
color: #666; |
|
|
|
padding-left: 4px; |
|
|
|
cursor: pointer; |
|
|
|
caret-color: rgba(0, 0, 0, 0); |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
i:hover { |
|
|
|
color: #05afe3; |
|
|
|
} |
|
|
|
|
|
|
|
.disabledClass { |
|
|
|
pointer-events: none; |
|
|
|
cursor: auto !important; |
|
|
|
color: #ccc; |
|
|
|
} |
|
|
|
|
|
|
|
i { |
|
|
|
font-size: 24px; |
|
|
|
color: #666; |
|
|
|
padding-left: 4px; |
|
|
|
cursor: pointer; |
|
|
|
caret-color: rgba(0, 0, 0, 0); |
|
|
|
user-select: none; |
|
|
|
} |
|
|
|
|
|
|
|
i:hover { |
|
|
|
color: #05afe3; |
|
|
|
} |
|
|
|
|
|
|
|
.disabledClass { |
|
|
|
pointer-events: none; |
|
|
|
cursor: auto !important; |
|
|
|
color: #ccc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.controlBox { |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.el-collapse { |
|
|
|
max-height: 100% !important; |
|
|
|
overflow: auto; |
|
|
|
border-bottom: none; |
|
|
|
border-top: none; |
|
|
|
padding: 0 0.5vw; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.controlBox { |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.el-collapse { |
|
|
|
max-height: 100% !important; |
|
|
|
overflow: auto; |
|
|
|
border-bottom: none; |
|
|
|
border-top: none; |
|
|
|
padding: 0 0.5vw; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
@ -1295,7 +1236,7 @@ computed:{ |
|
|
|
color: #05afe3 !important; |
|
|
|
} |
|
|
|
|
|
|
|
.qbbBigTitle { |
|
|
|
.boardListTitle { |
|
|
|
// margin-top: 1vh; |
|
|
|
color: #fff; |
|
|
|
height: 35px !important; |
|
|
|
@ -1313,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%; |
|
|
|
|
Joe
1 year ago