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.
1477 lines
43 KiB
1477 lines
43 KiB
<template>
|
|
<Teleport>
|
|
<div class="mask">
|
|
<transition>
|
|
<div v-if="visible" class="dialog_info">
|
|
<div class="dialog_info_left">
|
|
<div class="dialog_head">
|
|
<div class="tit">{{ device.deviceName }}</div>
|
|
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="onClose">
|
|
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
|
|
</div>
|
|
<div class="dialogContent">
|
|
<div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%;">
|
|
<vuescroll :ops="scrollOptions" class="templateBox">
|
|
<div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
|
|
<!-- 模板内容 -->
|
|
<BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
|
|
<!-- 操作按钮 -->
|
|
<div class="infoBtnBox">
|
|
<el-tooltip content="编辑" placement="top">
|
|
<p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
|
|
</el-tooltip>
|
|
<el-tooltip content="删除" placement="top">
|
|
<p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
|
|
</vuescroll>
|
|
</div>
|
|
<div v-else class="dialogContent_box" style="height: 100%;">
|
|
<div class="dialogContent_box_empty">暂无数据</div>
|
|
</div>
|
|
<div class="dialogContent_bottom">
|
|
<el-tabs v-model="activeTab" @tab-click="tabClickFn">
|
|
<el-tab-pane label="详情信息" name="first">
|
|
<div class="show_bottom_tab_box">
|
|
<div class="deviceInfo">
|
|
<div class="deviceInfo_l">设备名称</div>
|
|
<div class="deviceInfo_r">{{ device.deviceName }}</div>
|
|
</div>
|
|
<div class="deviceInfo">
|
|
<div class="deviceInfo_l">设备桩号</div>
|
|
<div class="deviceInfo_r">{{ device.stakeMarkId }}</div>
|
|
</div>
|
|
<div class="deviceInfo">
|
|
<div class="deviceInfo_l">屏幕像素</div>
|
|
<div class="deviceInfo_r">{{ JSON.parse(device.otherConfig).screenSize }} px</div>
|
|
</div>
|
|
<!-- <div class="deviceInfo" v-for="item in tabDataInfoList" :key="item.id">
|
|
<div class="deviceInfo_l">{{ item.tit }}: </div>
|
|
<div class="deviceInfo_r" :style="{ 'color': item.col }"> {{ item.txt }}</div>
|
|
</div> -->
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
<div class="dialogContent_bottom_btn">
|
|
<div class="show_bottom_btn_add" @click="____onAddDeviceItem">添加信息</div>
|
|
<div class="show_bottom_btn_del" @click="InformationReleaseFn">信息发布</div>
|
|
</div>
|
|
<div class="sideSwitch" @click="showSidePanel">
|
|
<img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
|
|
:style="{ 'transform': isShowTemplate ? 'rotate(0deg)' : 'rotate(180deg)' }">
|
|
<div class="txt">信息模板</div>
|
|
</div>
|
|
|
|
<!-- 原型图上没有“附近相机”，代码里暂时关闭
|
|
<div class="sideSwitch" style="top:36%;" @click="showCameraInfoFn">
|
|
<img class="img" src="@/assets/screen/xtb/leftd.png" alt=""
|
|
:style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }">
|
|
<div class="txt">附近像机</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 信息模板 -->
|
|
<div v-if="isShowTemplate" class="dialog_info_right">
|
|
<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="tplItem">
|
|
<!-- 模板内容 -->
|
|
<BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
|
|
<!-- <div class="infoPreview">
|
|
<div class="infoBox" :style="____boardBgStyle">
|
|
<span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' ')"></span>
|
|
</div>
|
|
</div> -->
|
|
<!-- 操作按钮 -->
|
|
<div class="infoBtnBox">
|
|
<el-tooltip content="加入待下发信息" placement="top">
|
|
<p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
|
|
</el-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vuescroll>
|
|
</div>
|
|
|
|
|
|
<!-- 附近相机 -->
|
|
<div v-if="dialogInfoCamera" class="dialog_info_right" style="padding:0;">
|
|
<div class="dialog_head" style="height:4vh;">
|
|
<div class="tit">摄像机设备</div>
|
|
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="closeCameraBtnFn">
|
|
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="">
|
|
</div>
|
|
<div class="info_right_camera">
|
|
<div class="info_right_camera_top">
|
|
<!-- 视频组件 -->
|
|
<videoView :url="videoUrl" />
|
|
</div>
|
|
<div class="info_right_camera_bom">
|
|
<div class="camera_bom_left">
|
|
<div class="camera_bom_left_item">
|
|
<div class="camera_bom_left_item_txt">选择相机: </div>
|
|
<div class="camera_bom_left_item_val">
|
|
<el-select v-model="cameraVal" placeholder="请选择" size="mini" style="width:130px"
|
|
@change="cameraValChangeFn">
|
|
<el-option v-for="item in cameraOptList" :key="item.camId" :label="item.camName"
|
|
:value="item.camId">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="camera_bom_left_item" v-for="item in cameraDataVideoList" :key="item.id">
|
|
<div class="camera_bom_left_item_txt">{{ item.txt }}: </div>
|
|
<div class="camera_bom_left_item_val">{{ item.val }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="camera_bom_right">
|
|
<div class="camera_bom_right_t">
|
|
<div class="camera_bom_right_t_box"></div>
|
|
<div class="camera_bom_right_t_h_po" v-for="item in cameraBtnList" :key="item.id"
|
|
@click="cameraControlBtnFn(item)"
|
|
:style="{ 'left': item.le, top: item.to, 'transform': 'rotate(' + item.ro + 'deg)' }"></div>
|
|
</div>
|
|
<div class="camera_bom_right_b">
|
|
<div class="camera_bom_right_b_btn" v-for="item in cameraControlList" :key="item.id">
|
|
<div class="camera_bom_right_b_btn_l" @click="cameraControlLeFn(item.numL)"></div>
|
|
<div class="camera_bom_right_b_btn_c">{{ item.txt }}</div>
|
|
<div class="camera_bom_right_b_btn_r" @click="cameraControlLeFn(item.numR)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</transition>
|
|
|
|
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
|
|
:visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
|
|
|
|
<!-- 情报板弹框中的弹框 -->
|
|
<addBoard ref="addinfo" @addInfo="addInfo" />
|
|
<editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script>
|
|
import addBoard from './addinfo.vue'
|
|
import editBoard from './editInfo.vue'
|
|
import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js'
|
|
import infoBoardTestData from "@/common/infoBoardTestData.js"
|
|
import { getBoardDeviceInfo } from '@/api/board/board'
|
|
|
|
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"
|
|
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"
|
|
import BoardInfoEditor from '@screen/components/infoBoard/BoardInfoEditor'
|
|
|
|
import vuescroll from 'vuescroll'
|
|
import scrollOptions from '@/common/scrollbar.js'
|
|
import Teleport from '@screen/components/Teleport.vue'
|
|
|
|
import { getTemplateList } from '@/api/board/template'
|
|
|
|
export default {
|
|
name: 'InfoBoard',
|
|
data() {
|
|
return {
|
|
dialogTit: '门架式可变信息标志YK16+270',
|
|
isShowTemplate: false,
|
|
dialogInfoCamera: false,
|
|
dialogInfoList: [],
|
|
moBanList: [],
|
|
moBanDataHandList: [],
|
|
_moBanDataList: [
|
|
{
|
|
id: 1001,
|
|
bt: '日常通用',
|
|
mbList: [
|
|
{ id: 305, txt: '谨慎驾驶', w: 768, h: 64, col: '#FFFF00', fz: 48, pdl: 288, pdt: 8, fm: '黑体' },
|
|
{ id: 306, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' },
|
|
{ id: 307, txt: '谨慎驾驶 注意安全', w: 768, h: 160, col: '#FF0000', fz: 60, pdl: 0, pdt: 0, fm: '黑体' },
|
|
{ id: 308, txt: '谨慎驾驶, <br/> 注意安全', w: 768, h: 160, col: '#03FF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }
|
|
]
|
|
},
|
|
{ id: 1002, bt: '施工管控', mbList: [{ id: 309, txt: '道路施工, <br/> 谨慎驾驶', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
|
|
{ id: 1003, bt: '恶劣天气', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
|
|
{ id: 1004, bt: '交通拥堵', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
|
|
{ id: 1005, bt: '突发事件', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] },
|
|
{ id: 1006, bt: '警情播报', mbList: [{ id: 309, txt: '救援 拨打96659', w: 768, h: 160, col: '#FFFF00', fz: 60, pdl: 0, pdt: 0, fm: '黑体' }] }
|
|
],
|
|
activeNames: [1001, 1002],
|
|
activeTab: "first",
|
|
moBanDataList: [{
|
|
dictCode: 1001,
|
|
dictLabel: "日常通用",
|
|
mbList: [
|
|
{
|
|
id: 3001,
|
|
screenSize: "200*80",
|
|
tcontents: [
|
|
{
|
|
content: "谨慎驾驶 注意安全",
|
|
formatStyle: 0,
|
|
fontSize: "24",
|
|
fontType: "微软雅黑",
|
|
fontColor: "0000FF"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}, {
|
|
dictCode: 1002,
|
|
dictLabel: "施工管理",
|
|
mbList: [
|
|
{
|
|
id: 3002,
|
|
screenSize: "800*90",
|
|
tcontents: [
|
|
{
|
|
content: "道路施工<br>缓慢驾驶",
|
|
formatStyle: 0,
|
|
fontSize: "18",
|
|
fontType: "微软雅黑",
|
|
fontColor: "FFFF00"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}],
|
|
tabDataInfoList: [],
|
|
tabInfoList: [
|
|
{ id: 401, tit: '设备名称', txt: '门架式可变信息标志', col: '#fff' },
|
|
{ id: 402, tit: '道路名称', txt: 'G35济菏高速', col: '#fff' },
|
|
{ id: 403, tit: '所属机构', txt: '山东高速济南发展公司', col: '#fff' },
|
|
{ id: 404, tit: '设备桩号', txt: 'K094+079', col: '#fff' },
|
|
{ id: 405, tit: '设备厂商', txt: '光电比特', col: '#fff' },
|
|
{ id: 406, tit: '设备状态', txt: '离线', col: '#888' }
|
|
],
|
|
cameraDataVideoList: [],
|
|
cameraDataList: [
|
|
{ id: 3001, txt: '设备名称', val: '疲劳唤醒设备1' },
|
|
{ id: 3002, txt: '设备编号', val: 'G00030497B0180001' },
|
|
{ id: 3003, txt: '设备桩号', val: 'K097+900' },
|
|
{ id: 3004, txt: '经/纬度', val: '117.071152/35.910659' },
|
|
{ id: 3005, txt: '道路名称', val: 'G35济菏高速' },
|
|
{ id: 3006, txt: '道路状况', val: '正常' },
|
|
{ id: 3007, txt: '方向', val: '菏泽' }
|
|
],
|
|
cameraBtnList: [
|
|
{ id: 4001, cmd: 23, dir: 'left', le: '26%', to: '33%', ro: 0 },
|
|
{ id: 4002, cmd: 21, dir: 'up', le: '46%', to: '4%', ro: 90 },
|
|
{ id: 4003, cmd: 24, dir: 'right', le: '65%', to: '33%', ro: 180 },
|
|
{ id: 4004, cmd: 22, dir: 'downward', le: '46%', to: '62%', ro: 267 }
|
|
],
|
|
cameraControlList: [
|
|
{ id: 5001, txt: '变倍', numL: 11, numR: 12 },
|
|
{ id: 5002, txt: '光圈', numL: 16, numR: 15 },
|
|
{ id: 5003, txt: '聚焦', numL: 14, numR: 13 }
|
|
],
|
|
showEmit: false,
|
|
|
|
selectedBdMsg: [],
|
|
selectedSize: "",
|
|
editDialog: {
|
|
mode: "",
|
|
type: "",
|
|
visible: false,
|
|
tpl: {}
|
|
},
|
|
scrollOptions,
|
|
templateAvailable: null,
|
|
tplCategory: [], //模板
|
|
templateAll: []
|
|
}
|
|
},
|
|
props: {
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
device: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
watch: {
|
|
device: {
|
|
handler(newV) {
|
|
this.____getDeviceInfo();
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll, Teleport },
|
|
created() {
|
|
// this.____getTemplateCategory();
|
|
// this.____getAllTemplate();
|
|
// this.getTemplateSeries();
|
|
},
|
|
computed: {
|
|
},
|
|
mounted() {
|
|
//测试数据
|
|
this.dialogInfoList = this.boardDataConvert(infoBoardTestData);
|
|
this.templateList = this.moBanDataList;
|
|
let deviceState = "online";
|
|
this.tabDataInfoList = [
|
|
{ id: 401, tit: '设备名称', txt: "门架式可变信息标志", col: '#fff' },
|
|
{ id: 402, tit: '道路名称', txt: "G35济菏高速", col: '#fff' },
|
|
{ id: 403, tit: '所属机构', txt: "山东高速济南发展公司", col: '#fff' },
|
|
{ id: 404, tit: '设备桩号', txt: "K094+079", col: '#fff' },
|
|
{ id: 405, tit: '设备厂商', txt: "光电比特", col: '#fff' },
|
|
{ id: 406, tit: '设备状态', txt: deviceState == 'online' ? '在线' : '离线', col: deviceState == 'online' ? '#10d269' : '#888' }
|
|
]
|
|
},
|
|
methods: {
|
|
// 获取信息模板分类
|
|
____getTemplateCategory() {
|
|
return this.getDicts('iot_template_category').then(res => {
|
|
this.tplCategory = res.data;
|
|
})
|
|
},
|
|
|
|
____getAllTemplate() {
|
|
return getTemplateList().then((res) => {
|
|
this.templateAll = res.data;
|
|
});
|
|
},
|
|
|
|
____getDeviceInfo() {
|
|
this.selectedSize = JSON.parse(this.device.otherConfig).screenSize;
|
|
if(this.tplCategory.length && this.templateAll.length){
|
|
this.____setAvailableTemplate();
|
|
}else{
|
|
Promise.all([this.____getTemplateCategory(), this.____getAllTemplate()]).then(res=>{
|
|
this.____setAvailableTemplate();
|
|
})
|
|
}
|
|
|
|
getBoardDeviceInfo(this.device.iotDeviceId).then(res => {
|
|
this.selectedBdMsg = res.data["3A"].content;
|
|
}).catch(err => {
|
|
|
|
})
|
|
},
|
|
|
|
____setAvailableTemplate() {
|
|
this.templateAvailable = [];
|
|
this.tplCategory.forEach((item, index) => {
|
|
let arr = this.templateAll['' + index];
|
|
if (arr.length > 0) {
|
|
let temp = [];
|
|
arr.forEach(tpl => {
|
|
if (tpl.screenSize == this.selectedSize) {
|
|
temp.push(tpl);
|
|
}
|
|
})
|
|
if (temp.length > 0) {
|
|
this.templateAvailable.push({
|
|
...item,
|
|
list: temp
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
____onEditBoardItem(tpl, index) {
|
|
// type : board template
|
|
// mode : edit add toDevice toTemplate
|
|
this.boardItemEdtingIndex = index;
|
|
this.editDialog = {
|
|
visible: true,
|
|
mode: "edit",
|
|
type: "device",
|
|
tpl
|
|
}
|
|
},
|
|
|
|
____onDeleteBoardItem(index) {
|
|
if (index > -1) {
|
|
this.selectedBdMsg.splice(index, 1)
|
|
this.$message.success('删除成功,发布后才能生效。')
|
|
}
|
|
},
|
|
|
|
____onEditSubmit(para) {
|
|
this.editDialog.tpl = {};
|
|
this.editDialog.visible = false;
|
|
|
|
if (para.type == "device") {
|
|
if (para.mode == "edit") {
|
|
this.selectedBdMsg[this.boardItemEdtingIndex] = para.data;
|
|
} else {
|
|
this.selectedBdMsg.push(para.data);
|
|
}
|
|
} else if (para.mode == "toDevice") {
|
|
this.selectedBdMsg.push(para.data);
|
|
} else {
|
|
this.____refreshPageData(para);
|
|
}
|
|
},
|
|
|
|
____refreshPageData(para) { },
|
|
|
|
|
|
// 新增待下发
|
|
____onAddToDevice(item) {
|
|
let arr = this.selectedSize.split("*");
|
|
item.origin = {
|
|
displayAreaWidth: +arr[0],
|
|
displayAreaHeight: +arr[1]
|
|
}
|
|
this.editDialog = {
|
|
visible: true,
|
|
mode: "toDevice",
|
|
type: "template",
|
|
tpl: item,
|
|
}
|
|
},
|
|
|
|
____onAddDeviceItem() {
|
|
let arr = this.selectedSize.split("*");
|
|
this.editDialog = {
|
|
visible: true,
|
|
mode: "add",
|
|
type: "device",
|
|
tpl: {
|
|
"textContent": "",
|
|
origin: {
|
|
displayAreaWidth: +arr[0],
|
|
displayAreaHeight: +arr[1]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
|
|
|
|
|
|
boardBoxStyle(node) {
|
|
let arr = node.screenSize.split("*");
|
|
let scale = this.getScrollSz(+arr[0]);
|
|
let obj = {
|
|
'width': `${+arr[0] / scale}px`,
|
|
'height': `${+arr[1] / scale}px`,
|
|
'justify-content': this.getTextAlign(node.tcontents[0].formatStyle)
|
|
}
|
|
return obj;
|
|
},
|
|
boardConStyle(node) {
|
|
let fSize = +node.tcontents[0].fontSize;
|
|
let scale = this.getScrollSz(fSize);
|
|
let obj = {
|
|
'font-size': `${fSize / scale}px`,
|
|
'color': '#' + node.tcontents[0].fontColor,
|
|
'font-family': node.tcontents[0].fontType
|
|
}
|
|
return obj;
|
|
},
|
|
//情报板原始数据转化成目标格式
|
|
boardDataConvert(origin) {
|
|
let rst = origin.map(item => {
|
|
return {
|
|
...item,
|
|
STAY: item.playbackDuration,
|
|
inScreenMode: item.screenEntryMethod,
|
|
screenSize: item.displayAreaWidth + '*' + item.displayAreaHeight,
|
|
tcontents: [
|
|
{
|
|
...item,
|
|
fontSpacing: item.fontSpacing,
|
|
fontSize: parseInt(item.fontSize.replace(/\D/g, '')),
|
|
fontType: item.font,
|
|
fontColor: item.foregroundColor.toUpperCase(),
|
|
formatStyle: item.horizontalAlignment,
|
|
STAY: item.playbackDuration / 10,
|
|
content: item.textContent.replaceAll('\\,', ',').replaceAll('\\=', '=').replaceAll('\\\\n', '\n')
|
|
}
|
|
]
|
|
}
|
|
});
|
|
return rst;
|
|
},
|
|
// 地图点位
|
|
mapClickEvent(e) {
|
|
this.dialogInfoList = []
|
|
console.log('父组件地图点位', e)
|
|
this.videoUrl = ''
|
|
this.cameraOptList = []
|
|
this.mapIds = e.target._opts.extData.deviceId
|
|
this.screenDataSize = e.target._opts.extData.sceenSize
|
|
this.dialogTit = e.target._opts.extData.deviceName
|
|
// this.tabDataInfoList = e.target._opts.extData
|
|
this.tabDataInfoList = [
|
|
{ id: 401, tit: '设备名称', txt: e.target._opts.extData.deviceName, col: '#fff' },
|
|
{ id: 402, tit: '道路名称', txt: e.target._opts.extData.roadName, col: '#fff' },
|
|
{ id: 403, tit: '所属机构', txt: e.target._opts.extData.organization, col: '#fff' },
|
|
{ id: 404, tit: '设备桩号', txt: e.target._opts.extData.pileNumber, col: '#fff' },
|
|
{ id: 405, tit: '设备厂商', txt: e.target._opts.extData.brind, col: '#fff' },
|
|
{ id: 406, tit: '设备状态', txt: e.target._opts.extData.deviceState == 'online' ? '在线' : '离线', col: e.target._opts.extData.deviceState == 'online' ? '#10d269' : '#888' }
|
|
]
|
|
this.getTemplateSeries()
|
|
this.updateList(this.mapIds)
|
|
this.getEnergyCameraBoardFn(e.target._opts.extData.pileNumber)
|
|
// this.mapDialogTop = e.pixel.y + 'px'
|
|
// this.mapDialogLeft = e.pixel.x + 'px'
|
|
// this.$refs.mapDialog.style.top = e.pixel.y + 'px'
|
|
// this.$refs.mapDialog.style.left = e.pixel.x + 'px'
|
|
// console.log(this.$refs.mapDialog)
|
|
},
|
|
getEnergyCameraBoardFn(pileNumber) {
|
|
getEnergyCameraBoardAPi({ pileNum: pileNumber }).then(res => {
|
|
console.log('获取到附近的像机', res)
|
|
this.cameraVal = res.data[0].camId
|
|
this.cameraOptList = res.data
|
|
this.cameraValCha(this.cameraOptList, this.cameraVal)
|
|
this.getEnergyCameraVideoFn()
|
|
})
|
|
},
|
|
getEnergyCameraVideoFn() {
|
|
getEnergyCameraVideoAPi({ camId: this.cameraVal }).then(res => {
|
|
// console.log('获取到视频', res)
|
|
this.videoUrl = res.data.liveUrl
|
|
})
|
|
},
|
|
cameraControlBtnFn(item) {
|
|
this.getEnergyCameraControlFn(item.cmd, 5)
|
|
},
|
|
cameraControlLeFn(item) {
|
|
// console.log('按钮点击事件', item)
|
|
this.getEnergyCameraControlFn(item, 5)
|
|
},
|
|
getEnergyCameraControlFn(cmd, spe) {
|
|
getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => {
|
|
// console.log('控制返回结果', res)
|
|
// this.videoUrl = res.data.liveUrl
|
|
})
|
|
},
|
|
cameraValChangeFn() {
|
|
console.log('点击切换按钮', this.cameraVal)
|
|
this.cameraValCha(this.cameraOptList, this.cameraVal)
|
|
},
|
|
// cameraDataVideoList
|
|
cameraValCha(date, num) {
|
|
let str = {
|
|
0: '正常',
|
|
1: '网络中断',
|
|
2: '网络正常无图像',
|
|
3: '有图像图可能存在问题'
|
|
}
|
|
date.forEach(i => {
|
|
if (i.camId === num) {
|
|
this.cameraDataVideoList = [
|
|
{ id: 3001, txt: '设备名称', val: i.camName },
|
|
{ id: 3002, txt: '设备编号', val: i.camId },
|
|
{ id: 3003, txt: '设备桩号', val: i.pileNum },
|
|
{ id: 3005, txt: '道路名称', val: i.deptName },
|
|
{ id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] }
|
|
]
|
|
}
|
|
})
|
|
},
|
|
// 信息发布
|
|
InformationReleaseFn() {
|
|
this.$confirm('是否确定发布情报板?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(() => {
|
|
return;
|
|
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()
|
|
objAll.deviceIds = this.mapIds
|
|
let that = this
|
|
|
|
// let devicePixel = this.form.devicePixel.split('*')
|
|
console.log('接口参数', this.dialogInfoList)
|
|
let newArr = this.dialogInfoList.map(item => {
|
|
let obj = {}
|
|
|
|
obj.STAY = item.STAY
|
|
obj.ACTION = item.inScreenMode
|
|
obj.SPEED = item.tcontents[0].fontSpacing
|
|
obj.COORDINATE = item.screenSize.replace('*', '')
|
|
obj.COLOR = item.tcontents[0].fontColor
|
|
obj.FONT = this.getFontValue(item.tcontents[0].fontType)
|
|
obj.FONT_SIZE = item.tcontents[0].fontSize
|
|
|
|
obj.CONTENT = item.tcontents[0].content.replaceAll(',', '\\,')
|
|
obj.CONTENT = item.tcontents[0].content.replaceAll('=', '\\=')
|
|
obj.CONTENT = item.tcontents[0].content.replace(/\n/g, '\\\\n')
|
|
|
|
// obj.CONTENT = item.tcontents[0].content.replace(/\n|\r\n/g, '<r><n>')
|
|
obj.width = this.processString(item.screenSize, 'w')
|
|
obj.height = this.processString(item.screenSize, 'h')
|
|
obj.formatStyle = item.tcontents[0].formatStyle
|
|
return obj
|
|
})
|
|
|
|
objAll.parameters = newArr
|
|
const param = {
|
|
objectData: JSON.stringify(objAll)
|
|
}
|
|
|
|
invokedFunction(595, 11, { size: '65535', fileName: 'play099.lst' })
|
|
.then(res => {
|
|
debugger
|
|
// console.log('发布消息,校验文件名-------------')
|
|
if (res.data.result == '01') {
|
|
invokedFunction(595, 13, { parameters: newArr })
|
|
.then(res => {
|
|
debugger
|
|
// console.log('发布消息,发送文件内容-----')
|
|
if (res.data.result == '01') {
|
|
invokedFunction(595, '1B', { fileId: '99' })
|
|
.then(res => {
|
|
debugger
|
|
// console.log('发布消息,播放文件-----')
|
|
})
|
|
.catch(() => {
|
|
this.$modal.msgError('发布失败,请重试')
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.$modal.msgError('发布失败,请重试')
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.$modal.msgError('发布失败,请重试')
|
|
})
|
|
loading.close()
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: 'info',
|
|
message: '已取消发布情报板'
|
|
})
|
|
loading.close()
|
|
})
|
|
this.updateList()
|
|
},
|
|
// 回读
|
|
updateList(deviceId) {
|
|
getDeviceRealtimeProperty(deviceId, '3A', { async: false })
|
|
.then(res => {
|
|
var contentsA = res.data['3A'].content
|
|
console.log('回读消息--1111111111---', contentsA)
|
|
|
|
this.dialogInfoList = this.boardDataConvert(contentsA);
|
|
|
|
console.log('hui1111111111111', this.dialogInfoList)
|
|
})
|
|
.catch(e => {
|
|
// this.$modal.msgError('回读失败,请重试')
|
|
})
|
|
// this.deviceId = deviceId
|
|
|
|
// 根据情报板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
|
|
}
|
|
})*/
|
|
},
|
|
// 获取模板分类
|
|
getTemplateSeries() {
|
|
this.templateList = []
|
|
getDicts('iot_template_category').then(res => {
|
|
this.moBanDataHandList = res.data
|
|
this.activeNames = res.data.map(item => {
|
|
return item.dictCode
|
|
})
|
|
this.getBoardTemplate()
|
|
})
|
|
},
|
|
// 获取模板
|
|
getBoardTemplate() {
|
|
getAllVmsTemplate({ devicePixel: this.screenDataSize }).then(res => {
|
|
this.templateList = this.moBanDataHandList.map((item, index) => {
|
|
if (item.dictSort === index) {
|
|
return {
|
|
...item,
|
|
mbList: res.data[index]
|
|
}
|
|
}
|
|
})
|
|
})
|
|
},
|
|
panelChangeFn(val) {
|
|
console.log(val)
|
|
},
|
|
// 接收子组件新增待发模板
|
|
addInfo(form) {
|
|
// console.log('待发新增', form)
|
|
this.dialogInfoList.push({
|
|
id: form.id,
|
|
screenSize: form.screenSize,
|
|
COORDINATE: form.coordinate,
|
|
...form,
|
|
tcontents: [{ ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }],
|
|
id: Math.floor(Math.random() * 10000000000000000),
|
|
txt: form.CONTENT,
|
|
fz: parseInt(form.FONT_SIZE.replace(/\D/g, '')),
|
|
fm: form.FONT,
|
|
formatStyle: form.formatStyle,
|
|
...this.processString(form.screenSize),
|
|
...this.processStrNum(form.COORDINATE)
|
|
})
|
|
},
|
|
// 打开添加信息弹窗
|
|
addMoDataInfoFn(type, mode) {
|
|
this.$refs.addinfo.init('', type, mode)
|
|
},
|
|
// 修改弹窗
|
|
editOutline(item, index, type) {
|
|
this.showEmit = true
|
|
this.index = index
|
|
this.editType = type
|
|
console.log('修改弹窗', item)
|
|
this.boardEmitItem = {
|
|
...item,
|
|
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,
|
|
formatStyle: item.tcontents[0].formatStyle,
|
|
ACTION: item.inScreenMode, //出屏方式
|
|
STAY: item.stopTime, //停留时间
|
|
type: type,
|
|
screenSize: item.screenSize,
|
|
category: item.category,
|
|
id: item.id,
|
|
tcontentsId: item.tcontents[0].id
|
|
}
|
|
},
|
|
|
|
// 接收子组件form表单 修改
|
|
receiveForm(form) {
|
|
console.log('接收子组件form表单 修改111111111', form)
|
|
this.formData = form
|
|
console.log('开始的数据', this.dialogInfoList)
|
|
this.dialogInfoList = this.dialogInfoList.map(item => {
|
|
if (item.id === form.id) {
|
|
return { ...item, tcontents: [{ ...item.tcontents[0], ...form, content: form.CONTENT, fontSize: parseInt(form.FONT_SIZE.replace(/\D/g, '')), fontType: form.FONT, fontColor: form.COLOR }] }
|
|
}
|
|
return item
|
|
})
|
|
console.log('修改后的数据', this.dialogInfoList)
|
|
// this.getTemplateSeries()
|
|
this.$forceUpdate()
|
|
},
|
|
|
|
delMoFn(index) {
|
|
console.log(index)
|
|
// deleteTemplate(item.tcontents[0].templateId)
|
|
this.dialogInfoList.splice(index, 1)
|
|
// this.removeItemById(this.dialogInfoList, item.id)
|
|
},
|
|
putLeftFn(item) {
|
|
console.log('点击事件', item)
|
|
this.dialogInfoList.push({ ...item, STAY: item.stopTime })
|
|
console.log('点击事件9990089089', this.dialogInfoList)
|
|
},
|
|
tabClickFn(tab, event) {
|
|
console.log(tab, event)
|
|
},
|
|
onClose() {
|
|
this.$emit("update:visible", false);
|
|
this.isShowTemplate = false
|
|
},
|
|
showSidePanel() {
|
|
if (this.dialogInfoCamera) {
|
|
this.dialogInfoCamera = false
|
|
}
|
|
this.isShowTemplate = !this.isShowTemplate
|
|
},
|
|
showCameraInfoFn() {
|
|
if (this.isShowTemplate) {
|
|
this.isShowTemplate = false
|
|
}
|
|
this.dialogInfoCamera = !this.dialogInfoCamera
|
|
},
|
|
subjectBtnFn(item) {
|
|
this.subjectBtn = item.id
|
|
},
|
|
closeCameraBtnFn() {
|
|
this.dialogInfoCamera = false
|
|
},
|
|
dialogClose() {
|
|
this.showEmit = false
|
|
this.arrowRightVisible = false
|
|
},
|
|
removeItemById(arr, id) {
|
|
const index = arr.findIndex(item => item.id === id) // 找到要删除项的索引
|
|
if (index !== -1) {
|
|
arr.splice(index, 1) // 从数组中删除该项
|
|
}
|
|
},
|
|
getScrollSz(w) {
|
|
if (w > 760) {
|
|
return 3
|
|
} else if (w > 470) {
|
|
return 2
|
|
} else {
|
|
return 1
|
|
}
|
|
},
|
|
processString(str, x) {
|
|
const parts = str.split('*') // 将字符串按照 '*' 分割成数组
|
|
const w = parseInt(parts[0]) // 将第一个部分解析为整数
|
|
const h = parseInt(parts[1]) // 将第二个部分解析为整数
|
|
if (x === 'w') {
|
|
return w
|
|
} else if (x === 'h') {
|
|
return h
|
|
} else {
|
|
return { w, h } // 返回包含 w 和 h 属性的对象
|
|
}
|
|
},
|
|
processStrNum(str, x) {
|
|
const pdl = parseInt(str.slice(0, 3)) // 截取前三位并解析为整数
|
|
const pdt = parseInt(str.slice(3)) // 截取后三位并解析为整数
|
|
if (x === 'l') {
|
|
return pdl
|
|
} else if (x === 't') {
|
|
return pdt
|
|
} else {
|
|
return { pdl, pdt } // 返回包含 pdl 和 pdt 属性的对象
|
|
}
|
|
},
|
|
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
|
|
}
|
|
},
|
|
// 转报文 字体
|
|
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' //白色
|
|
},
|
|
// 居中
|
|
getTextAlign(font) {
|
|
if (font == '0') {
|
|
return 'left'
|
|
} else if (font == '1') {
|
|
return 'right'
|
|
} else {
|
|
return 'center'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.templateBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.tplItem {
|
|
margin-right: 14px;
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding-bottom: 10px;
|
|
|
|
.boardPreview {
|
|
border: 1px solid rgba(61, 232, 255, 0.5);
|
|
// width: 560px;
|
|
// height:80px;
|
|
flex: 1;
|
|
}
|
|
|
|
.infoBtnBox {
|
|
width: 110px;
|
|
height: 80px;
|
|
display: flex;
|
|
margin-left: 10px;
|
|
/* // border: solid 1px #05afe3; */
|
|
border: 1px solid rgba(61, 232, 255, 0.5);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 30px;
|
|
height: 30px;
|
|
|
|
&.btnApply {
|
|
background-image: url(~@/assets/jihe/images/button/toLeft.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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.mask {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, .36);
|
|
z-index: 1100;
|
|
}
|
|
|
|
.map_dialog {
|
|
width: 510px;
|
|
height: 550px;
|
|
background-color: pink;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0px;
|
|
transform: translate(-110%, -110%);
|
|
}
|
|
|
|
.dialog_info {
|
|
width: 950px;
|
|
height: 600px;
|
|
position: absolute;
|
|
top: 12%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.dialog_info_left {
|
|
width: 510px;
|
|
height: 100%;
|
|
background-color: #114c66;
|
|
}
|
|
|
|
.dialog_info_right {
|
|
width: 430px;
|
|
height: 556px;
|
|
border: 2px solid #196980;
|
|
background-color: #114c66;
|
|
padding: 1vh 0.5vw;
|
|
overflow-y: scroll;
|
|
position: relative;
|
|
}
|
|
|
|
.dialog_head {
|
|
width: 100%;
|
|
height: 48px;
|
|
padding: 0 10px;
|
|
background-image: url('~@/assets/screen/xtb/qbbtit.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.tit {
|
|
color: #3de8ff;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.btnCls {
|
|
width: 13px;
|
|
height: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.deco {
|
|
width: 55%;
|
|
height: 5px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
.dialogContent {
|
|
width: 100%;
|
|
height: 300px;
|
|
padding: 10px 40px 10px 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.dialogContent_box {
|
|
width: 100%;
|
|
// height: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.dialogContent_l {
|
|
width: 355px;
|
|
// height: 4.91vh;
|
|
border: 2px solid #1d7890;
|
|
padding: 1px 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dialogContent_r {
|
|
width: 96px;
|
|
// height: 4.91vh;
|
|
border: 2px solid #1d7890;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
.dialogContent_l_xsq {
|
|
width: 256px;
|
|
height: 100%;
|
|
font-size: 18px;
|
|
color: #ff0000;
|
|
background-color: #000;
|
|
line-height: 1;
|
|
// text-align: center;
|
|
display: flex;
|
|
// justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.show_r_btn {
|
|
width: 1.67vw;
|
|
height: 2.96vh;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dialogContent_r_btn1 {
|
|
background-image: url('~@/assets/screen/xtb/gg.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.dialogContent_r_btn2 {
|
|
background-image: url('~@/assets/screen/xtb/xx.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.dialogContent_r_btn3 {
|
|
background-image: url('~@/assets/screen/xtb/zz.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.dialogContent_box_item {
|
|
margin-bottom: 0.5vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dialogContent_bottom {
|
|
width: 105%;
|
|
height: 16.52vh;
|
|
}
|
|
|
|
.deviceInfo {
|
|
width: 50%;
|
|
padding: 10px 0;
|
|
display: flex;
|
|
// flex-wrap: wrap;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.show_bottom_tab_box {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.deviceInfo_l {
|
|
color: #3de8ff;
|
|
font-size: 14px;
|
|
width: 70px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.deviceInfo_r {
|
|
width: 0;
|
|
flex: 1;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin-left: 0.5vw;
|
|
}
|
|
|
|
.sideSwitch {
|
|
position: absolute;
|
|
right: 0%;
|
|
top: 0%;
|
|
width: 24px;
|
|
line-height: 1.2;
|
|
padding: 0.5vh 0;
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%);
|
|
border-radius: 0px 0px 0px 0px;
|
|
opacity: 1;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
.img {
|
|
width: 15px;
|
|
height: 10px;
|
|
border: none;
|
|
transition: transform 0.3s ease;
|
|
/* 过渡效果 */
|
|
}
|
|
|
|
.txt {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.dialogContent_box_empty {
|
|
font-size: 14px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.dialog_info_right_tit {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin-bottom: 0.5vh;
|
|
}
|
|
|
|
.dialog_info_right_show {
|
|
width: 100%;
|
|
// height: 28vh;
|
|
}
|
|
|
|
.dialogContent_bottom_btn {
|
|
width: 100%;
|
|
height: 5vh;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.show_bottom_btn_add {
|
|
width: 90px;
|
|
height: 23px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 23px;
|
|
background: #00b3cc;
|
|
border-radius: 48px 48px 48px 48px;
|
|
opacity: 1;
|
|
margin-right: 0.5vw;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.show_bottom_btn_del {
|
|
width: 90px;
|
|
height: 23px;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
line-height: 23px;
|
|
background: #c87800;
|
|
border-radius: 48px 48px 48px 48px;
|
|
opacity: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.info_right_camera {
|
|
width: 100%;
|
|
height: calc(100% - 4vh);
|
|
padding: 1vh 0.5vw;
|
|
}
|
|
|
|
.info_right_camera_top {
|
|
width: 100%;
|
|
height: 20vh;
|
|
}
|
|
|
|
.info_right_camera_bom {
|
|
width: 100%;
|
|
padding: 1vh 0;
|
|
height: calc(100% - 20vh);
|
|
display: flex;
|
|
}
|
|
|
|
.camera_bom_left {
|
|
width: 50%;
|
|
height: 100%;
|
|
padding: 2vh 0;
|
|
border-right: 1px dashed #285a71;
|
|
}
|
|
|
|
.camera_bom_right {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.camera_bom_left_item {
|
|
width: 100%;
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 14px;
|
|
padding-bottom: 1.5vh;
|
|
}
|
|
|
|
.camera_bom_left_item_txt {
|
|
width: 31%;
|
|
color: #3de8ff;
|
|
}
|
|
|
|
.camera_bom_left_item_val {
|
|
color: #fff;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.camera_bom_right_t {
|
|
width: 100%;
|
|
height: 60%;
|
|
position: relative;
|
|
}
|
|
|
|
.camera_bom_right_b {
|
|
width: 100%;
|
|
height: 40%;
|
|
// background-color: deeppink;
|
|
}
|
|
|
|
.camera_bom_right_t_box {
|
|
width: 2vw;
|
|
height: 4vh;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: #005f87;
|
|
border-radius: 50%;
|
|
border: 1px solid #2191b1;
|
|
}
|
|
|
|
.camera_bom_right_t_h_po {
|
|
width: 1vw;
|
|
height: 5vh;
|
|
position: absolute;
|
|
left: 27%;
|
|
top: 33%;
|
|
cursor: pointer;
|
|
background-image: url('~@/assets/screen/xtb/xjleft.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.camera_bom_right_b_btn {
|
|
width: 100%;
|
|
padding: 0vh 2vw 1vh 2vw;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.camera_bom_right_b_btn_l {
|
|
width: 1.2vw;
|
|
height: 2.4vh;
|
|
border-radius: 50%;
|
|
background-image: url('~@/assets/screen/xtb/jhbtn.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.camera_bom_right_b_btn_c {
|
|
color: #fff;
|
|
}
|
|
|
|
.camera_bom_right_b_btn_r {
|
|
width: 1.2vw;
|
|
height: 2.4vh;
|
|
border-radius: 50%;
|
|
background-image: url('~@/assets/screen/xtb/addbtn.png');
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// background-color: #104b65;
|
|
// background-image: url('~@/assets/screen/xtb/qbbtit.png');
|
|
// background-size: 100% 100%;
|
|
// background-repeat: no-repeat;
|
|
// background-position: center;
|
|
|
|
/* 通用滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 3px;
|
|
/* 设置滚动条宽度 */
|
|
height: 3px;
|
|
/* 设置滚动条高度 */
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #114c66;
|
|
/* 设置滚动条轨道颜色 */
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #9abce0;
|
|
/* 设置滚动条滑块颜色 */
|
|
border-radius: 4px;
|
|
/* 设置滚动条滑块圆角 */
|
|
}
|
|
|
|
::v-deep .el-tabs__nav-wrap::after {
|
|
background-color: #316076;
|
|
}
|
|
|
|
::v-deep .el-tabs__item.is-active {
|
|
color: #3de8ff !important;
|
|
}
|
|
|
|
::v-deep .el-tabs__item {
|
|
color: #fff !important;
|
|
}
|
|
|
|
::v-deep .el-tabs__active-bar {
|
|
background-color: #3de8ff !important;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__header {
|
|
color: #fff;
|
|
height: 28px;
|
|
background-color: #053b4f;
|
|
border: none;
|
|
padding-left: 0.5vw;
|
|
}
|
|
|
|
::v-deep .el-collapse {
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__wrap {
|
|
color: #fff;
|
|
will-change: height;
|
|
background-color: #053b4f;
|
|
overflow: hidden;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
margin-top: 0.5vh;
|
|
border: none;
|
|
}
|
|
|
|
::v-deep .el-collapse-item__content {
|
|
margin-bottom: 0;
|
|
padding: 0.5vh 0.5vw;
|
|
}
|
|
|
|
::v-deep .el-collapse-item {
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
::v-deep .el-input--mini .el-input__icon {
|
|
line-height: 20px;
|
|
color: #fff;
|
|
}
|
|
|
|
::v-deep .el-input--mini .el-input__inner {
|
|
height: 20px;
|
|
line-height: 20px;
|
|
background-color: #086d8f;
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|