You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1723 lines
53 KiB
1723 lines
53 KiB
<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.eqDirection" 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>
|
|
<el-collapse v-model="iotBoardActive" accordion @change="handleChange">
|
|
<el-collapse-item v-for="(item, index) in iotBoardList" :key="index" :title="item.label" :name="item.devicePixel">
|
|
<div>
|
|
<!-- <el-checkbox style="width: 100%" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
|
|
</el-checkbox>-->
|
|
<div style="margin: 5px 0"></div>
|
|
<el-checkbox-group class="checkbox" v-model="checkedCities" @change="handleCheckedCitiesChange" :max="1">
|
|
<el-checkbox v-for="(itm, index) in item.list" :label="itm.deviceId" :key="index">
|
|
<el-tooltip :content="itm.deviceIp" 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.deviceId)" :disabled="submitButton"></el-button>
|
|
</el-tooltip>
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</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 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>情报板列表</div>
|
|
<span v-if="form.devicePixel">【 {{ form.devicePixel }}】</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)" :disabled="form.devicePixel ? false : disabledButton">添加信息</el-button>
|
|
<el-button type="primary" @click="publishInfo" :disabled="
|
|
!form.devicePixel ||
|
|
contentList.length == 0 ||
|
|
checkedCities.length == 0
|
|
">发布信息</el-button>
|
|
</div>
|
|
</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.devicePixel, 'width') + 'px',
|
|
height: getScreenSize(form.devicePixel, 'height') + 'px',
|
|
lineHeight:getScreenSize(form.devicePixel, 'height') + 'px',
|
|
textAlign: 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.devicePixel, 'height') + 'px',
|
|
}" class="boardTextStyle" 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="menuBox">
|
|
<!-- <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>
|
|
</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>情报板列表</div>
|
|
<span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span>
|
|
</div>
|
|
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
|
|
<!-- <span>信息模板</span>
|
|
<span v-if="form.devicePixel">【 {{ form.devicePixel }}】</span> -->
|
|
</div>
|
|
<div class="controlBox">
|
|
<el-button type="primary" @click="openDialogVisible(2, 2)">添加模板</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="templateBox">
|
|
<el-collapse v-model="activeNames">
|
|
<el-collapse-item v-for="(item, index) in iotTemplateCategoryList" :key="index" :title="item.dictLabel" :name="item.dictValue">
|
|
<div v-for="(itm, indx) in item.list" :key="indx" class="con" :style="{
|
|
fontSize: getFontSize(
|
|
itm.tcontents[0].fontSize,
|
|
itm.screenSize
|
|
),
|
|
color: getColorStyle(itm.tcontents[0].fontColor),
|
|
fontFamily: itm.tcontents[0].fontType,
|
|
}">
|
|
<div class="templateTitle">
|
|
<div :style="{
|
|
width: getScreenSize(itm.screenSize, 'width') + 'px',
|
|
height: getScreenSize(itm.screenSize, 'height') + 'px',
|
|
lineHeight:getScreenSize(itm.screenSize, 'height') + 'px',
|
|
textAlign: getTextAlign(itm.tcontents[0].formatStyle),
|
|
position: 'relative',
|
|
|
|
}" style="background: black; position: relative;overflow: hidden;">
|
|
<span :style="{
|
|
/*left: getCoordinate(
|
|
itm.tcontents[0].coordinate.substring(0, 3),
|
|
'left',
|
|
itm.screenSize
|
|
),
|
|
top: getCoordinate(
|
|
itm.tcontents[0].coordinate.substring(3, 6),
|
|
'top',
|
|
itm.screenSize
|
|
),*/
|
|
position:'relative',
|
|
maxHeight:getScreenSize(itm.screenSize, 'height') + 'px',
|
|
}" class="boardTextStyle" v-html="
|
|
itm.tcontents[0].content
|
|
.replace(/\n|\r\n/g, '<br>')
|
|
.replace(/ /g, ' ')
|
|
"></span>
|
|
</div>
|
|
</div>
|
|
<div class="menuBox">
|
|
<el-tooltip content="加入待下发信息" placement="top">
|
|
<div @click="arrowLeft(itm)" :class="
|
|
disabledButton && !form.devicePixel
|
|
? 'disabledClass'
|
|
: ''
|
|
" style="cursor: pointer" class="toLeft"></div>
|
|
</el-tooltip>
|
|
<el-tooltip content="编辑" placement="top">
|
|
<div @click="editOutline(itm, indx, 2)" class="edit"></div>
|
|
</el-tooltip>
|
|
<el-tooltip content="删除" placement="top">
|
|
<div @click="handleDelete(itm)" class="del"></div>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog title="提示" :visible.sync="arrowRightVisible" width="20%" :before-close="dialogClose">
|
|
<el-row>
|
|
<el-col :span="18">
|
|
<el-select v-model="toRightCategory" placeholder="请选择所属类别">
|
|
<el-option v-for="item in iotTemplateCategoryList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
|
|
</el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-button type="primary" plain @click="arrowRightAllVmsTemplate">
|
|
确定
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</el-dialog>
|
|
<addinfo ref="addinfo" @addInfo="addInfo" @getActiveNames="getActiveNames"></addinfo>
|
|
<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 editInfo from './editInfo'
|
|
import boardData from './boardData'
|
|
import { getUserDeptId } from '@/api/system/user'
|
|
import { listTunnels, devicessize, information, getBoardInfo, getBoardEditInfo, getIotBoardList, 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'
|
|
|
|
// 对象深拷贝
|
|
export const deepClone = data => {
|
|
// 封装的判断数据类型的方法
|
|
var type = typeof data
|
|
var obj
|
|
if (type === 'array') {
|
|
obj = []
|
|
} else if (type === 'object') {
|
|
obj = {}
|
|
} else {
|
|
// 不再具有下一层次
|
|
return data
|
|
}
|
|
if (type === 'array') {
|
|
for (var i = 0, len = data.length; i < len; i++) {
|
|
obj.push(deepClone(data[i]))
|
|
}
|
|
} else if (type === 'object') {
|
|
for (var key in data) {
|
|
obj[key] = deepClone(data[key])
|
|
}
|
|
}
|
|
return obj
|
|
}
|
|
|
|
export default {
|
|
name: 'Device',
|
|
components: {
|
|
addinfo,
|
|
editInfo
|
|
},
|
|
dicts: ['iot_board_direction'],
|
|
|
|
data() {
|
|
return {
|
|
toggleIndex: 0,
|
|
toRightCategory: '', //向右类别绑定
|
|
arrowRightVisible: false, //向右类别弹窗
|
|
loading: false,
|
|
submitButton: false, //回读禁用
|
|
iotBoardActive: '', //情报板设备 绑定
|
|
iotBoardList: [], //情报板设备列表
|
|
boardDirectionList: [], //方向
|
|
userQueryParams: {
|
|
userName: this.$store.state.user.name
|
|
}, //用户
|
|
devicePixelMode: null, //分辨率
|
|
editType: 0,
|
|
disabledButton: true, //禁用按钮
|
|
showEmit: false, //修改组件
|
|
index_: 0, //待下发 编辑项index
|
|
index: 0, //模板 编辑项 index
|
|
deviceId: '', //情报板id
|
|
boardEmitItem: null, //修改彈窗的數據
|
|
userDeptId: '', //管理站id
|
|
deptList: [], //分中心下拉框
|
|
mechanismList: [], //管理机构下拉框
|
|
devicessizeList: [], //分辨率下拉框
|
|
deviceList: [], //分辨率
|
|
checkedCities: [], //多选 选中项
|
|
form: {
|
|
company: null,
|
|
mechanism: null,
|
|
localInfo: null,
|
|
devicePixel: null
|
|
}, //情报板列表表单
|
|
supplier: null, //报文类型
|
|
activeNames: [], //模板 展开项
|
|
iotTemplateCategoryList: [], //模板
|
|
checkAll: false,
|
|
isIndeterminate: false,
|
|
contentList: [], //待下发数据
|
|
toRightItem: {} //向右添加到模板的数据
|
|
}
|
|
},
|
|
watch: {
|
|
contentList: function (newVal, oldVal) {
|
|
this.$nextTick(() => {
|
|
this.rowDrop()
|
|
})
|
|
},
|
|
iotBoardList: function (newVal, oldVal) {
|
|
console.log(newVal, 'iotBoardActive')
|
|
if (newVal.length == 0) {
|
|
this.form.devicePixel = ''
|
|
this.allVmsTemplate('no')
|
|
}
|
|
}
|
|
// // 改变方向
|
|
// 'form.eqDirection':function(newVal,oldVal){
|
|
// console.log(newVal,"newVal")
|
|
// this.iotBoardList = []
|
|
// }
|
|
},
|
|
created() {
|
|
this.getInfoMode()
|
|
this.changeDirection()
|
|
},
|
|
mounted() {
|
|
// this.rowDrop();
|
|
this.hideScrollFn()
|
|
},
|
|
|
|
methods: {
|
|
// 获取信息模板字典表
|
|
getInfoMode() {
|
|
this.getDicts('iot_template_category').then(res => {
|
|
this.iotTemplateCategoryList = res.data
|
|
})
|
|
},
|
|
|
|
// 行拖拽
|
|
rowDrop() {
|
|
if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
|
|
// 要侦听拖拽响应的DOM对象
|
|
const tbody = document.querySelector('.contentBox .el-table__body-wrapper tbody')
|
|
const _this = this
|
|
Sortable.create(tbody, {
|
|
// 结束拖拽后的回调函数
|
|
onEnd({ newIndex, oldIndex }) {
|
|
const currentRow = _this.contentList.splice(oldIndex, 1)[0]
|
|
_this.contentList.splice(newIndex, 0, currentRow)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//改变方向
|
|
changeDirection(val) {
|
|
this.getDicts('iot_board_direction').then(res => {
|
|
this.boardDirectionList = res.data
|
|
|
|
if (val) {
|
|
this.form.eqDirection = val
|
|
} else {
|
|
this.form.eqDirection = res.data[0].dictValue
|
|
}
|
|
|
|
this.getIotBoard()
|
|
})
|
|
},
|
|
|
|
// 情报板设备 折叠面板
|
|
getIotBoard() {
|
|
this.checkAll = false
|
|
|
|
//TODO 测试数据 需删除走接口
|
|
let testData = [
|
|
{
|
|
devicePixel: '768*64',
|
|
label: '门架板768*64',
|
|
list: [
|
|
{
|
|
searchValue: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
remark: null,
|
|
params: {},
|
|
deviceId: 65,
|
|
deviceName: '门架式可变信息标志K103+900',
|
|
brandId: 4,
|
|
iotBoardBrandName: {
|
|
brandId: 4,
|
|
brandName: '光电比特'
|
|
},
|
|
routeId: 17,
|
|
routeDirection: '济南方向',
|
|
deviceMarkingName: null,
|
|
deviceTypeId: 202010001,
|
|
deviceTypeNumber: 202010004,
|
|
deviceModelId: null,
|
|
factoryLibrary: null,
|
|
userUnitId: 555503,
|
|
operatorId: null,
|
|
longitude: '117.9554825',
|
|
latitude: '36.84254887',
|
|
firmId: 18,
|
|
purchaseDate: '2022-12-14T16:06:03.000+08:00',
|
|
warrantyYears: null,
|
|
unitPrice: null,
|
|
runStatus: 1,
|
|
tunnelId: 'JQ-JiNan-WenZuBei-MJY',
|
|
deviceStatus: '1',
|
|
installDate: '2022-12-14T16:06:03.000+08:00',
|
|
maintainId: 2,
|
|
collarAgencyId: 555503,
|
|
pileNumber: 'K103+900',
|
|
manageAgencyId: 'YG11002',
|
|
producteDate: null,
|
|
repairDate: null,
|
|
operateDate: null,
|
|
serviceLife: null,
|
|
storageDate: null,
|
|
isMonitor: 1,
|
|
isConfig: 1,
|
|
localInfo: 36,
|
|
routeNumber: null,
|
|
routeName: null,
|
|
deviceIp: '10.0.31.111',
|
|
devicePort: null,
|
|
devicePixel: '768*64',
|
|
userName: null,
|
|
passWord: null,
|
|
protocolName: null,
|
|
deviceTypeIds: null,
|
|
lUserID: null,
|
|
lAlarmHandle: null,
|
|
lUserIDStr: null,
|
|
lAlarmHandleStr: null,
|
|
eqDirection: null,
|
|
iotDeviceType: null
|
|
},
|
|
{
|
|
searchValue: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
remark: null,
|
|
params: {},
|
|
deviceId: 1055550313,
|
|
deviceName: '门架式可变信息标志ZK19+333',
|
|
brandId: 4,
|
|
iotBoardBrandName: {
|
|
brandId: 4,
|
|
brandName: '光电比特'
|
|
},
|
|
routeId: 17,
|
|
routeDirection: '济南方向',
|
|
deviceMarkingName: null,
|
|
deviceTypeId: 202010001,
|
|
deviceTypeNumber: 202010004,
|
|
deviceModelId: null,
|
|
factoryLibrary: null,
|
|
userUnitId: 555503,
|
|
operatorId: null,
|
|
longitude: '117.9554825',
|
|
latitude: '36.84254887',
|
|
firmId: 18,
|
|
purchaseDate: '2022-12-14T16:06:03.000+08:00',
|
|
warrantyYears: null,
|
|
unitPrice: null,
|
|
runStatus: 1,
|
|
tunnelId: 'JQ-JiNan-WenZuBei-MJY',
|
|
deviceStatus: '1',
|
|
installDate: '2022-12-14T16:06:03.000+08:00',
|
|
maintainId: 2,
|
|
collarAgencyId: 555503,
|
|
pileNumber: 'ZK134+587',
|
|
manageAgencyId: 'YG11002',
|
|
producteDate: null,
|
|
repairDate: null,
|
|
operateDate: null,
|
|
serviceLife: null,
|
|
storageDate: null,
|
|
isMonitor: 1,
|
|
isConfig: 1,
|
|
localInfo: 36,
|
|
routeNumber: null,
|
|
routeName: null,
|
|
deviceIp: '10.7.179.245',
|
|
devicePort: null,
|
|
devicePixel: '768*64',
|
|
userName: null,
|
|
passWord: null,
|
|
protocolName: null,
|
|
deviceTypeIds: null,
|
|
lUserID: null,
|
|
lAlarmHandle: null,
|
|
lUserIDStr: null,
|
|
lAlarmHandleStr: null,
|
|
eqDirection: null,
|
|
iotDeviceType: null
|
|
}
|
|
]
|
|
},
|
|
{
|
|
devicePixel: '480*48',
|
|
label: '雨棚480*48',
|
|
list: [
|
|
{
|
|
searchValue: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
remark: null,
|
|
params: {},
|
|
deviceId: 65,
|
|
deviceName: '雨棚可变信息标志ZK18+665',
|
|
brandId: 4,
|
|
iotBoardBrandName: {
|
|
brandId: 4,
|
|
brandName: '光电比特'
|
|
},
|
|
routeId: 17,
|
|
routeDirection: '济南方向',
|
|
deviceMarkingName: null,
|
|
deviceTypeId: 202010001,
|
|
deviceTypeNumber: 202010004,
|
|
deviceModelId: null,
|
|
factoryLibrary: null,
|
|
userUnitId: 555503,
|
|
operatorId: null,
|
|
longitude: '117.9554825',
|
|
latitude: '36.84254887',
|
|
firmId: 18,
|
|
purchaseDate: '2022-12-14T16:06:03.000+08:00',
|
|
warrantyYears: null,
|
|
unitPrice: null,
|
|
runStatus: 1,
|
|
tunnelId: 'JQ-JiNan-WenZuBei-MJY',
|
|
deviceStatus: '1',
|
|
installDate: '2022-12-14T16:06:03.000+08:00',
|
|
maintainId: 2,
|
|
collarAgencyId: 555503,
|
|
pileNumber: 'ZK134+587',
|
|
manageAgencyId: 'YG11002',
|
|
producteDate: null,
|
|
repairDate: null,
|
|
operateDate: null,
|
|
serviceLife: null,
|
|
storageDate: null,
|
|
isMonitor: 1,
|
|
isConfig: 1,
|
|
localInfo: 16,
|
|
routeNumber: null,
|
|
routeName: null,
|
|
deviceIp: '10.7.181.29',
|
|
devicePort: null,
|
|
devicePixel: '480*48',
|
|
userName: null,
|
|
passWord: null,
|
|
protocolName: null,
|
|
deviceTypeIds: null,
|
|
lUserID: null,
|
|
lAlarmHandle: null,
|
|
lUserIDStr: null,
|
|
lAlarmHandleStr: null,
|
|
eqDirection: null,
|
|
iotDeviceType: null
|
|
}
|
|
]
|
|
},
|
|
{
|
|
devicePixel: '192*160',
|
|
label: ' 悬臂192*160',
|
|
list: [
|
|
{
|
|
searchValue: null,
|
|
createBy: null,
|
|
createTime: null,
|
|
updateBy: null,
|
|
updateTime: null,
|
|
remark: null,
|
|
params: {},
|
|
deviceId: 1055550306,
|
|
deviceName: '悬臂可变信息标志YK16+970',
|
|
brandId: 4,
|
|
iotBoardBrandName: {
|
|
brandId: 4,
|
|
brandName: '光电比特'
|
|
},
|
|
routeId: 17,
|
|
routeDirection: '菏泽方向',
|
|
deviceMarkingName: null,
|
|
deviceTypeId: 202010001,
|
|
deviceTypeNumber: 202010004,
|
|
deviceModelId: null,
|
|
factoryLibrary: null,
|
|
userUnitId: 555503,
|
|
operatorId: null,
|
|
longitude: null,
|
|
latitude: null,
|
|
firmId: 18,
|
|
purchaseDate: '2022-12-14T16:06:03.000+08:00',
|
|
warrantyYears: null,
|
|
unitPrice: null,
|
|
runStatus: 1,
|
|
tunnelId: 'JQ-JiNan-WenZuBei-MJY',
|
|
deviceStatus: '1',
|
|
installDate: '2022-12-14T16:06:03.000+08:00',
|
|
maintainId: 2,
|
|
collarAgencyId: 555503,
|
|
pileNumber: 'YK133+825',
|
|
manageAgencyId: 'YG11002',
|
|
producteDate: null,
|
|
repairDate: null,
|
|
operateDate: null,
|
|
serviceLife: null,
|
|
storageDate: null,
|
|
isMonitor: 1,
|
|
isConfig: 1,
|
|
localInfo: 16,
|
|
routeNumber: null,
|
|
routeName: null,
|
|
deviceIp: '10.7.180.84',
|
|
devicePort: null,
|
|
devicePixel: '192*160',
|
|
userName: null,
|
|
passWord: null,
|
|
protocolName: null,
|
|
deviceTypeIds: null,
|
|
lUserID: null,
|
|
lAlarmHandle: null,
|
|
lUserIDStr: null,
|
|
lAlarmHandleStr: null,
|
|
eqDirection: null,
|
|
iotDeviceType: null
|
|
}
|
|
]
|
|
}
|
|
]
|
|
this.iotBoardList = testData
|
|
if (testData.length > 0) {
|
|
this.iotBoardActive = testData[0].devicePixel
|
|
this.handleChange(testData[0].devicePixel)
|
|
} else {
|
|
this.getInfoMode()
|
|
}
|
|
this.$forceUpdate()
|
|
|
|
// TODO 接口
|
|
/*let param = {
|
|
eqDirection: this.form.eqDirection,
|
|
tunnelId: this.form.tunnel,
|
|
manageAgencyId: this.form.deptId,
|
|
};
|
|
getIotBoardList(param).then((res) => {
|
|
console.log(res, "查询情报板设备列表");
|
|
this.iotBoardList = res.data;
|
|
if (res.data.length > 0) {
|
|
this.iotBoardActive = res.data[0].devicePixel;
|
|
this.handleChange(res.data[0].devicePixel);
|
|
} else {
|
|
this.getInfoMode();
|
|
}
|
|
this.$forceUpdate();
|
|
});*/
|
|
},
|
|
|
|
// 板子分辨率换算
|
|
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
|
|
}
|
|
} 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
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 接收子组件 新增模板
|
|
getActiveNames() {
|
|
this.allVmsTemplate()
|
|
},
|
|
|
|
// 向左新增待下发
|
|
arrowLeft(item) {
|
|
var list = {
|
|
FONT_SIZE: item.tcontents[0].fontSize + 'px',
|
|
COLOR: item.tcontents[0].fontColor,
|
|
CONTENT: item.tcontents[0].content,
|
|
COORDINATE: item.tcontents[0].coordinate,
|
|
FONT: this.getFont(item.tcontents[0].fontType),
|
|
SPEED: item.tcontents[0].fontSpacing, //字体间距
|
|
ACTION: item.inScreenMode, //出屏方式
|
|
STAY: item.stopTime, //停留时间
|
|
category: item.category, //所属类别
|
|
ID: this.contentList.length,
|
|
format: item.tcontents[0].contentList,
|
|
formatStyle : item.tcontents[0].formatStyle,
|
|
}
|
|
this.contentList.push(list)
|
|
this.toggleIndex++
|
|
console.log(this.contentList, 'this.contentList')
|
|
console.log(this.toggleIndex, 'toggleIndex')
|
|
},
|
|
|
|
// 向右添加模板
|
|
arrowRight(item) {
|
|
this.toRightItem = item
|
|
if (!item.category) {
|
|
this.arrowRightVisible = true
|
|
} else {
|
|
this.arrowRightAllVmsTemplate()
|
|
}
|
|
},
|
|
|
|
// 向右添加模板
|
|
arrowRightAllVmsTemplate() {
|
|
console.log(this.contentList, '不选所属类别向右contentList')
|
|
console.log(this.toRightItem, this.toRightCategory)
|
|
let item = this.toRightItem
|
|
let templateId = ''
|
|
let method = 'put'
|
|
const params1 = {
|
|
inScreenMode: item.ACTION,
|
|
screenSize: this.form.devicePixel,
|
|
applyType: '',
|
|
category: item.category ? item.category : this.toRightCategory,
|
|
coordinate: '',
|
|
height: '',
|
|
id: '',
|
|
imageUrl: '',
|
|
imgSizeFrom: '',
|
|
remark: '',
|
|
stopTime: item.STAY,
|
|
vmsType: '',
|
|
width: ''
|
|
}
|
|
|
|
// 新增
|
|
addTemplate(params1, method).then(data => {
|
|
console.log(data, '新增口返回data')
|
|
const templateContent = []
|
|
templateContent.push({
|
|
content: item.CONTENT,
|
|
coordinate: item.COORDINATE,
|
|
fontColor: this.getColorStyle(item.COLOR),
|
|
fontSize: item.FONT_SIZE.substring(0, 2),
|
|
fontSpacing: item.SPEED,
|
|
fontType: this.getFontStyle(item.FONT)
|
|
})
|
|
const params2 = {
|
|
templateContent: templateContent,
|
|
templateId: data
|
|
}
|
|
addTemplateContent(params2)
|
|
.catch(err => {
|
|
throw err
|
|
})
|
|
.then(res => {
|
|
if (res.code == 200) {
|
|
this.allVmsTemplate('no')
|
|
}
|
|
})
|
|
// this.getActiveNames(item.category);
|
|
})
|
|
this.arrowRightVisible = false
|
|
},
|
|
|
|
// 修改弹窗
|
|
editOutline(item, index, type) {
|
|
this.index = index
|
|
this.editType = type
|
|
console.log(item, '修改弹窗')
|
|
this.boardEmitItem = {
|
|
FONT_SIZE: item.tcontents[0].fontSize + 'px',
|
|
COLOR: item.tcontents[0].fontColor,
|
|
CONTENT: item.tcontents[0].content,
|
|
COORDINATE: item.tcontents[0].coordinate,
|
|
FONT: this.getFont(item.tcontents[0].fontType),
|
|
SPEED: item.tcontents[0].fontSpacing,
|
|
ACTION: item.inScreenMode, //出屏方式
|
|
STAY: item.stopTime, //停留时间
|
|
type: type,
|
|
screenSize: item.screenSize,
|
|
category: item.category,
|
|
id: item.id,
|
|
tcontentsId: item.tcontents[0].id,
|
|
formatStyle : item.tcontents[0].formatStyle
|
|
}
|
|
this.showEmit = true
|
|
},
|
|
|
|
/** 删除按钮操作 */
|
|
handleDelete(row) {
|
|
const ids = row.id || this.ids
|
|
let content = '是否确认删除选中数据项?'
|
|
if (ids == null || ids == undefined || ids == [] || ids == '') {
|
|
content = '是否确认删除当前情报板模板?'
|
|
}
|
|
this.$confirm(content, '警告', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(function () {
|
|
return deleteTemplate(ids)
|
|
})
|
|
.then(() => {
|
|
this.allVmsTemplate('no')
|
|
this.$modal.msgSuccess('删除成功')
|
|
})
|
|
},
|
|
|
|
// 情报板管理右侧查询接口
|
|
allVmsTemplate(type) {
|
|
const param = {
|
|
devicePixel: this.form.devicePixel
|
|
}
|
|
|
|
//TODO 接口
|
|
getAllVmsTemplate(param).then(res => {
|
|
let data = res.data
|
|
console.log(res, '情报板管理右侧查询接口')
|
|
let jArr = []
|
|
|
|
for (let j = 0; j < this.iotTemplateCategoryList.length; j++) {
|
|
let arr = this.iotTemplateCategoryList[j]
|
|
let brr = data[j]
|
|
arr.list = brr
|
|
jArr.push(j.toString())
|
|
}
|
|
if (type != 'no') {
|
|
this.activeNames = jArr
|
|
}
|
|
this.$forceUpdate()
|
|
console.log(this.iotTemplateCategoryList, '新模板')
|
|
})
|
|
},
|
|
|
|
// 删除中间模板
|
|
delQbbDrawer(index) {
|
|
if (index > -1) {
|
|
this.contentList.splice(index, 1)
|
|
this.$message.success('删除成功')
|
|
}
|
|
},
|
|
|
|
// 发布信息
|
|
publishInfo() {
|
|
this.$confirm('是否确定发布情报板?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
let loading = this.$loading({
|
|
lock: true,
|
|
text: 'Loading',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(0, 0, 0, 0.7)'
|
|
})
|
|
const objAll = {}
|
|
objAll.deviceIds = this.checkedCities.toString()
|
|
let that = this
|
|
|
|
let devicePixel = this.form.devicePixel.split('*')
|
|
let newArr = this.contentList.map(function (item) {
|
|
let obj = {}
|
|
|
|
obj.STAY = item.STAY
|
|
obj.ACTION = item.ACTION
|
|
obj.SPEED = item.SPEED
|
|
obj.COORDINATE = item.COORDINATE.replace('-', '0')
|
|
obj.COLOR = that.getColorValue(item.COLOR)
|
|
obj.FONT = that.getFontValue(item.FONT)
|
|
obj.FONT_SIZE = item.FONT_SIZE.substring(0, 2)
|
|
obj.CONTENT = item.CONTENT.replace(/\n|\r\n/g, '<r><n>')
|
|
obj.width = devicePixel[0]
|
|
obj.height = devicePixel[1]
|
|
obj.horizontalAlignment = item.formatStyle //水平居中
|
|
return obj
|
|
})
|
|
objAll.parameters = newArr
|
|
const param = {
|
|
objectData: JSON.stringify(objAll)
|
|
}
|
|
console.log(newArr, 'newArr')
|
|
|
|
|
|
|
|
invokedFunction(65,'1B',{fileId:'1'}).then(res =>{
|
|
debugger
|
|
console.log('发布消息,播放文件-----------------------------')
|
|
console.log(res)
|
|
}).catch(()=>{
|
|
this.$modal.msgError("发布失败,请重试");
|
|
})
|
|
|
|
|
|
/*invokedFunction(65,11,{size : '65535',fileName:'play001.lst'}).then(res =>{
|
|
debugger
|
|
console.log('发布消息,校验文件名-------------------------------------')
|
|
console.log(res)
|
|
if (res.data.result == '01'){
|
|
invokedFunction(65,13,{parameters:newArr}).then(res =>{
|
|
debugger
|
|
console.log('发布消息,发送文件内容-----------------------------')
|
|
console.log(res)
|
|
if (res.data.result == '01'){
|
|
invokedFunction(65,'1B',{fileId:'1'}).then(res =>{
|
|
debugger
|
|
console.log('发布消息,播放文件-----------------------------')
|
|
console.log(res)
|
|
}).catch(()=>{
|
|
this.$modal.msgError("发布失败,请重试");
|
|
})
|
|
|
|
}
|
|
}).catch(()=>{
|
|
this.$modal.msgError("发布失败,请重试");
|
|
})
|
|
}
|
|
}).catch(()=>{
|
|
this.$modal.msgError("发布失败,请重试");
|
|
})*/
|
|
loading.close()
|
|
}).catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消发布情报板'
|
|
})
|
|
loading.close()
|
|
})
|
|
},
|
|
|
|
// 接收子组件新增待发模板
|
|
addInfo(form) {
|
|
console.log(form, '待发新增')
|
|
form.ID = this.contentList.length
|
|
this.contentList.push(deepClone(form))
|
|
this.$message.success('添加成功')
|
|
this.$forceUpdate()
|
|
},
|
|
|
|
// 接收子组件form表单 修改
|
|
receiveForm(form) {
|
|
console.log(form, '接收子组件form表单 修改')
|
|
this.contentList.splice(this.index_, 1, form)
|
|
this.$forceUpdate()
|
|
this.allVmsTemplate('no')
|
|
},
|
|
|
|
// 打开添加信息弹窗
|
|
openDialogVisible(type, mode) {
|
|
this.$refs.addinfo.init(this.form.devicePixel, type, mode)
|
|
},
|
|
|
|
// 全选
|
|
handleCheckAllChange(val) {
|
|
this.checkedCities = val ? this.deviceList : []
|
|
},
|
|
|
|
// 多选
|
|
handleCheckedCitiesChange(value) {
|
|
console.log(value, 'value')
|
|
this.checkedCities = value
|
|
let val = JSON.parse(JSON.stringify(value))
|
|
for (let itm of this.deviceList) {
|
|
if (val.indexOf(itm) > -1) {
|
|
this.checkAll = true
|
|
} else {
|
|
this.checkAll = false
|
|
return
|
|
}
|
|
}
|
|
this.$forceUpdate()
|
|
},
|
|
// 情报板列表手风琴
|
|
handleChange(val) {
|
|
this.contentList = []
|
|
this.deviceList = []
|
|
this.disabledButton = true
|
|
this.checkedCities = []
|
|
this.checkAll = false
|
|
this.form.devicePixel = val
|
|
this.allVmsTemplate()
|
|
for (let item of this.iotBoardList) {
|
|
if (item.devicePixel == val) {
|
|
// this.checkboxList = item.list;
|
|
for (let itm of item.list) {
|
|
this.deviceList.push(itm.deviceId)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 转报文 ITEM001
|
|
formatNum(num, length) {
|
|
return (Array(length).join('0') + parseInt(num)).slice(-length)
|
|
},
|
|
|
|
// 转报文 字体
|
|
getFontValue(font) {
|
|
if (font == '黑体' || font == 'SimHei') return '1'
|
|
if (font == '楷体' || font == 'KaiTi') return '2'
|
|
if (font == '仿宋' || font == 'FangSong') return '4'
|
|
if (font == '隶书' || font == 'LiSu') return '5'
|
|
else return '3' //宋体
|
|
},
|
|
|
|
// 转报文 色号
|
|
getColorValue(color) {
|
|
if (color == '蓝色' || color == 'blue') return '0000FF'
|
|
if (color == '绿色' || color == '#00FF00' || color == 'GreenYellow') return '00FF00'
|
|
if (color == '红色' || color == 'red') return 'FF0000'
|
|
if (color == '黄色' || color == 'yellow') return 'FFFF00'
|
|
return 'FFFFFF' //白色
|
|
},
|
|
|
|
// 向内容显示区域添加一条信息
|
|
addContentDisplayInfos(addId, no, disContent) {
|
|
var jsonArr = {}
|
|
jsonArr.itemId = addId
|
|
jsonArr.disContent = disContent
|
|
this.disContentList.push(jsonArr)
|
|
},
|
|
|
|
// 回读
|
|
async onSubmit(deviceId) {
|
|
this.submitButton = true
|
|
this.loading = true
|
|
this.contentList = []
|
|
// 获取情报板修改页面信息
|
|
const param = {
|
|
deviceId: deviceId
|
|
}
|
|
/* await getBoardContentData(param)
|
|
.then(res => {
|
|
console.log(res, 'onSubmit')
|
|
var contents = res.data.parameters
|
|
console.log(contents, 'onSubmit-----contents')
|
|
for (let i = 0; i < contents.length; i++) {
|
|
let item = contents[i]
|
|
item.COLOR = this.getColorStyle(item.COLOR)
|
|
item.FONT_SIZE = Number(item.FONT_SIZE.substring(0, 2)) + 'px'
|
|
item.ID = i
|
|
item.FONT = this.getFont(item.FONT)
|
|
this.contentList.push(item)
|
|
}
|
|
console.log(this.contentList, 'onSubmit-----this.contentList')
|
|
this.loading = false
|
|
this.submitButton = false
|
|
// this.rowDrop();
|
|
})
|
|
.catch(e => {
|
|
this.loading = false
|
|
this.submitButton = false
|
|
})*/
|
|
await getDeviceRealtimeProperty('65','3A',{ async: false})
|
|
.then(res => {
|
|
if ("3A" in res.data){
|
|
console.log('回读消息------------------------')
|
|
console.log(res.data)
|
|
var contents = res.data['3A'].content
|
|
for (let i = 0; i < contents.length; i++) {
|
|
let item = contents[i]
|
|
item.COLOR = item.foregroundColor
|
|
item.FONT_SIZE = item.fontSize + 'px'
|
|
item.ID = i
|
|
item.FONT = item.font
|
|
item.COORDINATE = this.covering(item.xCoordinate) + this.covering(item.yCoordinate)
|
|
item.screenSize = item.displayAreaWidth + '*' + item.displayAreaHeight
|
|
item.CONTENT = item.textContent
|
|
item.formatStyle = item.verticalAlignment
|
|
this.contentList.push(item)
|
|
}
|
|
console.log(this.contentList, 'onSubmit-----this.contentList')
|
|
// this.rowDrop();
|
|
}
|
|
this.loading = false
|
|
this.submitButton = false
|
|
})
|
|
.catch(e => {
|
|
this.$modal.msgError("回读失败,请重试");
|
|
this.loading = false
|
|
this.submitButton = false
|
|
})
|
|
this.deviceId = deviceId
|
|
this.form.devicePixel = '768*64'
|
|
|
|
|
|
// 根据情报板id获取分辨率
|
|
/*getBoardInfo(deviceId).then(res => {
|
|
console.log(res, 'getBoardInfo')
|
|
this.form.devicePixel = res.data.pixel
|
|
if (res.data.deviceId) {
|
|
this.disabledButton = false
|
|
} else {
|
|
this.disabledButton = true
|
|
}
|
|
})*/
|
|
},
|
|
|
|
covering(value){
|
|
|
|
if (value.length < 3){
|
|
value = '0'+value
|
|
return this.covering(value)
|
|
}
|
|
|
|
return value
|
|
},
|
|
|
|
// 待下发 编辑
|
|
openQbbDrawer(item, index, type) {
|
|
this.index_ = index
|
|
console.log(item)
|
|
this.boardEmitItem = item
|
|
this.boardEmitItem.screenSize = this.form.devicePixel
|
|
this.boardEmitItem.deviceId = this.deviceId
|
|
this.boardEmitItem.type = type
|
|
|
|
this.showEmit = true
|
|
},
|
|
|
|
// 转颜色
|
|
getColorStyle(font) {
|
|
if (font == '黄色' || font == 'yellow' || font == '4') {
|
|
return '#FFFF00'
|
|
} else if (font == '红色' || font == 'red' || font == '1') {
|
|
return '#FF0000'
|
|
} else if (font == '绿色' || font == 'GreenYellow' || font == '000255000000' || font == '2') {
|
|
return '#00FF00'
|
|
} else if (font == '蓝色' || font == 'blue' || font == '3') {
|
|
return '#0000FF'
|
|
} else if (font == '7' || font == 'white') {
|
|
return '#FFFFFF'
|
|
} else {
|
|
return '#' + font
|
|
}
|
|
},
|
|
|
|
// 居中
|
|
getTextAlign(font) {
|
|
if (font == '0'){
|
|
return 'left'
|
|
} else if (font == '1'){
|
|
return 'right'
|
|
} else {
|
|
return 'center'
|
|
}
|
|
},
|
|
|
|
// 换算字号
|
|
getFontSize(font, screenSize) {
|
|
if (!font) {
|
|
return
|
|
}
|
|
let width = ''
|
|
let height = ''
|
|
if (!screenSize) {
|
|
width = this.form.devicePixel.split('*')[0]
|
|
height = this.form.devicePixel.split('*')[1]
|
|
} else {
|
|
width = screenSize.split('*')[0]
|
|
height = screenSize.split('*')[1]
|
|
}
|
|
if (width <= 450 && height <= 75) {
|
|
if (font.toString().length == 2) {
|
|
return font + 'px'
|
|
} else {
|
|
return font.substring(0, 2) + 'px'
|
|
}
|
|
} else {
|
|
if (width / 450 > height / 75) {
|
|
if (font.toString().length == 2) {
|
|
return font / (width / 450) + 'px'
|
|
} else {
|
|
return font.substring(0, 2) / (width / 450) + 'px'
|
|
}
|
|
} else {
|
|
if (font.toString().length == 2) {
|
|
return font / (height / 75) + 'px'
|
|
} else {
|
|
return font.substring(0, 2) / (height / 75) + 'px'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
// 换算文字在模板的位置
|
|
getCoordinate(coordinate, type, screenSize) {
|
|
let width = ''
|
|
let height = ''
|
|
if (!screenSize) {
|
|
width = this.form.devicePixel.split('*')[0]
|
|
height = this.form.devicePixel.split('*')[1]
|
|
} else {
|
|
width = screenSize.split('*')[0]
|
|
height = screenSize.split('*')[1]
|
|
}
|
|
if (width <= 450 && height <= 75) {
|
|
return coordinate + 'px'
|
|
} else {
|
|
if (type == 'left') {
|
|
if (width < 450 && height > 75) {
|
|
return coordinate / (height / 75) + 'px'
|
|
} else {
|
|
if (width / 450 >= height / 75) {
|
|
return coordinate / (width / 450) + 'px'
|
|
} else {
|
|
return coordinate / (height / 75) + 'px'
|
|
}
|
|
}
|
|
} else if (type == 'top') {
|
|
if (width < 450 && height > 75) {
|
|
return coordinate / (height / 75) + 'px'
|
|
} else {
|
|
if (width / 450 >= height / 75) {
|
|
return coordinate / (width / 450) + 'px'
|
|
} else {
|
|
return coordinate / (height / 75) + 'px'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
getFontStyle(font) {
|
|
if (font == '宋体') {
|
|
return 'Simsun'
|
|
} else if (font == '黑体') {
|
|
return 'SimHei'
|
|
} else if (font == '楷体') {
|
|
return 'KaiTi'
|
|
} else {
|
|
return font
|
|
}
|
|
},
|
|
getFont(font) {
|
|
if (font == 'KaiTi' || font == 'k') {
|
|
return '楷体'
|
|
} else if (font == 'SimSun' || font == 's') {
|
|
return '宋体'
|
|
} else if (font == 'SimHei' || font == 'h') {
|
|
return '黑体'
|
|
} else if (font == 'FangSong' || font == 'f') {
|
|
return '仿宋'
|
|
} else if (font == 'LiSu' || font == 'l') {
|
|
return '隶书'
|
|
} else {
|
|
return font
|
|
}
|
|
},
|
|
// // 上移
|
|
// moveTop(i, item) {
|
|
// if (item && i) {
|
|
// let obj = { ...this.contentList[i - 1] };
|
|
// this.contentList.splice(i - 1, 1, item);
|
|
// this.contentList.splice(i, 1, obj);
|
|
// this.$forceUpdate();
|
|
// }
|
|
// },
|
|
// // 下移
|
|
// moveBottom(i, item) {
|
|
// if (item && typeof i === "number") {
|
|
// let obj = { ...this.contentList[i + 1] };
|
|
// this.contentList.splice(i + 1, 1, item);
|
|
// this.contentList.splice(i, 1, obj);
|
|
// this.$forceUpdate();
|
|
// }
|
|
// },
|
|
dialogClose() {
|
|
this.showEmit = false
|
|
this.arrowRightVisible = false
|
|
setTimeout(() => {
|
|
this.allVmsTemplate('no')
|
|
}, 500)
|
|
},
|
|
hideScrollFn() {
|
|
// 隐藏滚动条
|
|
document.documentElement.style.overflow = 'hidden'
|
|
// 禁用滚动功能
|
|
function disableScroll() {
|
|
// 记录当前滚动位置
|
|
const scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
|
|
|
|
// 设置滚动位置为固定值，防止滚动
|
|
document.body.style.position = 'fixed'
|
|
document.body.style.top = `-${scrollPosition}px`
|
|
}
|
|
|
|
// 启用滚动功能
|
|
function enableScroll() {
|
|
// 获取之前记录的滚动位置
|
|
const scrollPosition = parseInt(document.body.style.top || '0', 10)
|
|
|
|
// 恢复滚动位置
|
|
document.body.style.position = ''
|
|
document.body.style.top = ''
|
|
|
|
// 滚动到之前的位置
|
|
window.scrollTo(0, -scrollPosition)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
.verticalBox {
|
|
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;
|
|
}
|
|
|
|
.menuBox {
|
|
display: flex;
|
|
align-items: center;
|
|
/* // margin-left: 10px; */
|
|
/* // border: solid 1px #05afe3; */
|
|
height: 75px;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
border: 2px solid #004c64;
|
|
|
|
div {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
> div:first-of-type {
|
|
/* background-image: url(../../../assets/cloudControl/edit2.png); */
|
|
}
|
|
|
|
> div:nth-of-type(2) {
|
|
/* background-image: url(../../../assets/cloudControl/edit4.png); */
|
|
}
|
|
|
|
/* // >div:last-of-type{
|
|
// background-image: url(../../../assets/cloudControl/edit4.png);
|
|
// } */
|
|
> div:first-of-type:hover {
|
|
/* background-image: url(../../../assets/cloudControl/edit1.png); */
|
|
}
|
|
|
|
> div:nth-of-type(2):hover {
|
|
/* background-image: url(../../../assets/cloudControl/closeIcon1.png); */
|
|
}
|
|
|
|
/* // >div:last-of-type:hover{
|
|
// background-image: url(../../../assets/cloudControl/closeIcon1.png);
|
|
// } */
|
|
i {
|
|
font-size: 24px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
caret-color: rgba(0, 0, 0, 0);
|
|
user-select: none;
|
|
}
|
|
|
|
i:hover {
|
|
color: #05afe3 !important;
|
|
}
|
|
}
|
|
|
|
/* // } */
|
|
.controlBox {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.templateBox {
|
|
width: 100%;
|
|
height: calc(100% - 46px);
|
|
padding: 0 0 1vh 0;
|
|
|
|
.con {
|
|
height: 75px;
|
|
margin: 10px 0;
|
|
padding: 0 10px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.templateTitle {
|
|
height: 75px;
|
|
border: 2px solid #004c64;
|
|
position: relative;
|
|
width: 540px;
|
|
float: left;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.menuBox {
|
|
display: flex;
|
|
float: right;
|
|
margin-left: 15px;
|
|
padding: 0 0.2vw;
|
|
/* // border: solid 1px #05afe3; */
|
|
width: calc(100% - 555px);
|
|
height: 100%;
|
|
border: 2px solid #004c64;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
div {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
> div:first-of-type {
|
|
/* background-image: url(../../../assets/cloudControl/toLeft2.png); */
|
|
}
|
|
|
|
> div:nth-of-type(2) {
|
|
/* background-image: url(../../../assets/cloudControl/edit2.png); */
|
|
}
|
|
|
|
> div:last-of-type {
|
|
/* background-image: url(../../../assets/cloudControl/edit4.png); */
|
|
}
|
|
|
|
> div:first-of-type:hover {
|
|
/* background-image: url(../../../assets/cloudControl/toLeft1.png); */
|
|
}
|
|
|
|
> div:nth-of-type(2):hover {
|
|
/* background-image: url(../../../assets/cloudControl/edit1.png); */
|
|
}
|
|
|
|
> div:last-of-type:hover {
|
|
/* background-image: url(../../../assets/cloudControl/closeIcon1.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.checkbox {
|
|
label {
|
|
width: 100%;
|
|
padding: 10px 0;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
}
|
|
}
|
|
}
|
|
.qbbBigDotBa {
|
|
width: 64px;
|
|
height: 9px;
|
|
position: absolute;
|
|
right: 5%;
|
|
top: 35%;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__content {
|
|
line-height: normal;
|
|
padding-bottom: 0px;
|
|
}
|
|
|
|
::v-deep .el-checkbox__label {
|
|
display: flex !important;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
.el-checkbox {
|
|
display: flex !important;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
::v-deep .el-table {
|
|
caret-color: rgba(0, 0, 0, 0);
|
|
user-select: none;
|
|
|
|
thead {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.huiduButton {
|
|
background: transparent;
|
|
border: none;
|
|
height: 19px;
|
|
line-height: 20px;
|
|
padding: 0;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.huiduButton:hover {
|
|
color: #05afe3 !important;
|
|
}
|
|
|
|
.boardTextStyle {
|
|
position: absolute;
|
|
/*line-height: 1;*/
|
|
caret-color: rgba(0, 0, 0, 0);
|
|
user-select: none;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
overflow: hidden;
|
|
}
|
|
.qbbBigTitle {
|
|
// margin-top: 1vh;
|
|
color: #fff;
|
|
height: 35px !important;
|
|
background-image: url('~@/assets/screen/xtb/qbbtit.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
display: flex;
|
|
justify-content: start !important;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.qbbBigDot {
|
|
width: 18px;
|
|
height: 22px;
|
|
margin: 0 0.5vw 0 0.5vw;
|
|
}
|
|
.awaitBigTitle {
|
|
width: 100%;
|
|
color: #fff;
|
|
padding-right: 6vw !important;
|
|
height: 35px !important;
|
|
background-image: url('~@/assets/screen/xtb/qbbti.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: relative;
|
|
}
|
|
|
|
::v-deep .sortable-chosen:not(th) {
|
|
background-color: rgba(5, 175, 227, 0.1) !important;
|
|
}
|
|
|
|
::v-deep .el-select .el-input .el-input__inner {
|
|
caret-color: rgba(0, 0, 0, 0);
|
|
user-select: none;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__header,
|
|
.el-collapse-item__content {
|
|
caret-color: rgba(0, 0, 0, 0);
|
|
user-select: none;
|
|
}
|
|
|
|
::v-deep .el-collapse {
|
|
border-bottom: transparent;
|
|
}
|
|
|
|
::v-deep .el-table .cell {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
::v-deep .el-checkbox + .el-checkbox {
|
|
margin-left: 0px !important;
|
|
}
|
|
::v-deep .el-select .el-input .el-input__inner {
|
|
color: #fff;
|
|
background-color: #053b4f;
|
|
border-color: transparent;
|
|
}
|
|
::v-deep .el-collapse-item__header {
|
|
background-color: #053b4f;
|
|
color: #fff;
|
|
padding-left: 1vw;
|
|
border-top: 5px solid #112d3b;
|
|
border-radius: 7px;
|
|
border-bottom: 5px solid #112d3b;
|
|
}
|
|
::v-deep .el-collapse-item__wrap {
|
|
background-color: #053b4f;
|
|
padding: 0 1vw;
|
|
}
|
|
::v-deep .el-collapse {
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
::v-deep .el-collapse-item__wrap {
|
|
border: none;
|
|
}
|
|
::v-deep .el-checkbox__label {
|
|
color: #fff;
|
|
}
|
|
::v-deep .el-button--medium {
|
|
width: 96px;
|
|
height: 23px;
|
|
line-height: 1px;
|
|
border-radius: 15px;
|
|
}
|
|
::v-deep .el-table__body-wrapper {
|
|
background-color: #053b4f;
|
|
padding: 0 1vw;
|
|
}
|
|
::v-deep .el-table tr {
|
|
background-color: #053b4f;
|
|
}
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
|
background-color: #053b4f;
|
|
}
|
|
::v-deep .el-table td.el-table__cell {
|
|
border: none;
|
|
}
|
|
.el-table::before,
|
|
.el-table--group::after,
|
|
.el-table--border::after {
|
|
content: none;
|
|
}
|
|
/* 通用滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 3px; /* 设置滚动条宽度 */
|
|
height: 3px; /* 设置滚动条高度 */
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #00295b; /* 设置滚动条轨道颜色 */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #9abce0; /* 设置滚动条滑块颜色 */
|
|
border-radius: 4px; /* 设置滚动条滑块圆角 */
|
|
}
|
|
</style>
|
|
|