<template>
<div class="infoBoardBox" :style="menu.isRecentOpen?'height:calc(100vh - 100px)':'height:calc(100vh - 60px)'">
<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> -->
<WgtTitle :title="'情报板列表'"></WgtTitle>
<el-form :model="form" class="formSearch" size="mini">
<!-- class="partCon" -->
<!-- style="display: flex; flex-direction: column" -->
<!-- ref="form" -->
<el-form-item>
<el-col :span="12">
<el-select v-model="form.selectedDirection" size="medium" placeholder="请选择方向" class="direction">
<el-option v-for="item in boardDirectionList" :key="item.dictValue" :label="item.dictLabel"
:value="item.dictValue" />
<!-- @click.native="____changeDirection(item.dictValue)" -->
</el-select>
</el-col>
<el-col :span="11" :offset="1">
<el-checkbox-group v-model="form.status" style="height:26px">
<el-checkbox label="1">在线</el-checkbox>
<el-checkbox label="0">离线</el-checkbox>
</el-checkbox-group>
</el-col>
</el-form-item>
<el-form-item label="开始桩号:">
<el-col :span="2" class="text-center tc-lb">K</el-col>
<el-col :span="7">
<el-input-number v-model="form.stakeFrom[0]" style="width: 100%;" :precision="0" :min="0"
:max="1000"></el-input-number>
</el-col>
<el-col :span="2" class="text-center tc-lb">+</el-col>
<el-col :span="7">
<el-input-number v-model="form.stakeFrom[1]" style="width: 100%;" :precision="0" :min="0"
:max="1000"></el-input-number>
</el-col>
</el-form-item>
<el-form-item label="结束桩号:">
<el-col :span="2" class="text-center tc-lb">K</el-col>
<el-col :span="7">
<el-input-number v-model="form.stakeTo[0]" style="width: 100%;" :precision="0" :min="0"
:max="1000"></el-input-number>
</el-col>
<el-col :span="2" class="text-center tc-lb">+</el-col>
<el-col :span="7">
<el-input-number v-model="form.stakeTo[1]" style="width: 100%;" :precision="0" :min="0"
:max="1000"></el-input-number>
</el-col>
</el-form-item>
<el-form-item style="display: flex; justify-content: center;">
<el-button class="btnInfoBoard" type="add" @click.native="____onSearchDevice()">搜索</el-button>
<el-button type="publish" @click.native="____onResetSearchDevice()">重置</el-button>
</el-form-item>
</el-form>
<div style="flex:1; height: 0; padding:0 10px 10px">
<vuescroll :ops="scrollOptions">
<el-collapse v-model="selectedSize" accordion @change="____onChangeSize" style="margin-right: 20px">
<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-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
<el-checkbox v-for="(itm, index) in item.list" :label="itm.iotDeviceId" :key="index"
:disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
<el-tooltip content="设备未接入" placement="top"
v-if="!itm.iotDeviceId || itm.iotDeviceId.includes('null_')">
<div class="title">{{ itm.deviceName }}</div>
</el-tooltip>
<el-tooltip content="设备离线" placement="top"
v-else-if="deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)">
<div class="title">{{ itm.deviceName }}</div>
</el-tooltip>
<div v-else class="title">{{ itm.deviceName }}</div>
<el-tooltip
:content="(deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null)) ? '离线' : '在线'"
placement="top">
<img src="@/assets/jihe/images/offline.svg" class="state"
v-if="deviceStateLatest[itm.iotDeviceId]===false || (itm.deviceState == 0 || itm.deviceState == null) ">
<img src="@/assets/jihe/images/online.svg" class="state" v-else>
</el-tooltip>
<el-tooltip content="回读" placement="top">
<el-button class="el-icon-tickets huiduButton" @click.stop.prevent="____forkDeviceInfo(itm)"
: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>
</vuescroll>
</div>
</div>
<!-- ++++++++++中间部分：单个设备++++++++++ -->
<div style="width: 37.8%" class="part partMiddle">
<!-- <WgtTitle :title="'待下发信息'"></WgtTitle> -->
<WgtTitle :title="`待下发信息 ${selectedSize ? selectedSize : ''}`">
<div class="titleBtnBox">
<el-button class="btnInfoBoard" type="add" :disabled="!selectedSize"
@click.native="____onAddDeviceItem()">添加信息</el-button>
<el-button class="btnInfoBoard" type="publish" @click="____onPublish"
:disabled="selectedBdMsg.length <= 0 || selectedDevices.length <= 0">发布信息</el-button>
</div>
</WgtTitle>
<!-- <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>待下发信息</div>
<span v-if="selectedSize">【 {{ selectedSize }}】</span>
</div>
<img class="qbbBigDotBa" src="@/assets/screen/xtb/qbba.png" alt="">
</div>
<div class="controlBox">
<el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()">添加信息</el-button>
<el-button class="btnInfoBoard" type="publish" @click="____onPublish" :disabled="selectedBdMsg.length <= 0">发布信息</el-button>
</div>
</div> -->
<div class="partCon">
<vuescroll :ops="scrollOptions" class="templateBox" v-if="selectedBdMsg.length > 0"
:class="{ hide: isHideCtt }">
<draggable tag="div" :list="selectedBdMsg" @end="____onDragend" ghostClass="ghost_class"
dragClass="drag_class" chosenClass="chosen_class">
<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>
</draggable>
</vuescroll>
<Empty v-else text="请从设备回读或从模板添加信息..." style="padding-top: 100px"></Empty>
</div>
</div>
<!-- ++++++++++右边部分：信息模板++++++++++ -->
<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="">
</div>
<div class="controlBox">
<el-button class="btnInfoBoard" type="add" @click="____onAddTemplate">添加模板</el-button>
</div>
</div> -->
<WgtTitle :title="`信息模板 ${selectedSize ? selectedSize : ''}`">
<div class="titleBtnBox">
<el-button class="btnInfoBoard" type="add" @click="____onAddTemplate">添加模板</el-button>
</div>
</WgtTitle>
<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="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="____onTplToDevice(itm, false)" :class="disabledButton && !selectedSize ? 'disabledClass' : ''
" class="btn btnApply"></p>
</el-tooltip>
<el-tooltip content="编辑" placement="top">
<p @click="____onEditTemplate(itm)" class="btn btnEdit"></p>
</el-tooltip>
<el-tooltip content="删除" placement="top">
<p @click="____onDeleteTemplate(itm)" class="btn btnDelete"></p>
</el-tooltip>
</div>
</div>
</div>
</vuescroll>
</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 tplCategory" :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>
<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 draggable from "vuedraggable";
import Sortable from "sortablejs";
import editInfo from "./editInfo";
import {
addTemplate,
addTemplateContent,
deleteTemplate,
} from "@/api/board/template";
import {
getDeviceRealtimeProperty,
} from "@/api/device/device";
import { getBoardList, getBoardDeviceInfo } from "@/api/board/board";
import { getTemplateList } from "@/api/board/template";
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 testDeviceList from "@screen/testData/deviceList.js";
import testDeviceInfo from "@screen/testData/infoBoard.js";
import WgtTitle from "@screen/pages/perception/widgets/title";
import InfoBoard from "@screen/mixins/InfoBoard";
import { initSearch } from "@screen/utils/enum/common.js"
import { mapState } from "vuex";
export default {
name: "DeviceBord",
mixins: [InfoBoard],
components: {
draggable,
WgtTitle,
BoardInfoEditor,
editInfo,
BoardPreview,
BoardTplPreview,
vuescroll,
},
dicts: ["iot_board_direction"],
data() {
return {
multiPublish: true,
toggleIndex: 0,
toRightCategory: "", //向右类别绑定
arrowRightVisible: false, //向右类别弹窗
loading: false,
submitButton: false, //回读禁用
selectedSize: "", //情报板设备 绑定
selectedDevices: [],
boardSizeDic: {}, //情报板设备字典
boardDirectionList: [], //方向
userQueryParams: {
userName: this.$store.state.user.name,
}, //用户
selectedPixelMode: null, //分辨率
editType: 0,
disabledButton: true, //禁用按钮
showEmit: false, //修改组件
index_: 0, //待下发 编辑项index
index: 0, //模板 编辑项 index
deviceId: "", //情报板id
boardEmitItem: null, //修改彈窗的數據
userDeptId: "", //管理站id
deptList: [], //分中心下拉框
mechanismList: [], //管理机构下拉框
devicessizeList: [], //分辨率下拉框
deviceList: [], //分辨率
checkedDeviceIds: [], //多选 选中项
templateAvailable: [],
form: {},
supplier: null, //报文类型
activeNames: [], //模板 展开项
tplCategory: [], //模板
checkAll: false,
isIndeterminate: false,
contentList: [], //待下发数据
toRightItem: {}, //向右添加到模板的数据
selectedBdMsg: [],
editDialog: {
mode: "",
type: "",
visible: false,
tpl: {},
},
scrollOptions,
boardItemEdtingIndex: -1,
isHideCtt: false,
deviceStateLatest:{}
};
},
watch: {
contentList: function (newVal, oldVal) {
this.$nextTick(() => {
this.rowDrop();
});
},
"editDialog.visible": function (newV) {
if (!newV) {
this.editDialog.tpl = null;
}
},
// boardSizeDic: function (newVal, oldVal) {
// console.log(newVal, 'selectedSize')
// if (newVal.length == 0) {
// this.form.selectedPixel = ''
// // this.allVmsTemplate('no')
// }
// }
// // 改变方向
// 'form.selectedDirection':function(newVal,oldVal){
// console.log(newVal,"newVal")
// this.boardSizeDic = []
// }
},
created() {
Promise.all([
this.____initDirection(),
this.____getBoardPixel(),
this.____getTemplateCategory(),
this.____getAllTemplate(),
]).then((res) => {
this.____resetForm();
this.____getIotBoard();
});
},
mounted(){
this.EventBus.$on("deviceState", deviceList => {
deviceList.forEach(item=>{
if(item.deviceType == "2"){
let bool;
if (item.deviceState === '0' || item.deviceState===null){
bool = false;
}else{
bool = true;
}
this.$set(this.deviceStateLatest, item.iotDeviceId, bool);
}
})
});
// this.rowDrop();
this.hideScrollFn();
},
destroyed(){
this.EventBus.$off("deviceState");
},
computed: {
...mapState(["menu"]),
____boardScale() {
let arr = this.selectedSize.split("*");
let boxW = 540;
let boxH = 80;
let scale = 1;
if (arr[0] / arr[1] > boxW / boxH) {
scale = boxW / arr[0];
} else {
scale = boxH / arr[1];
}
return scale;
},
____boardBgStyle() {
let arr = this.selectedSize.split("*");
return {
width: `${arr[0] * this.____boardScale}px`,
height: `${arr[1] * this.____boardScale}px`,
};
},
},
methods: {
____boardTxtStyle() {
return {
color: "#F00",
};
},
// 获取尺寸系列
____getBoardPixel() {
this.boardSizeDic = {};
return this.getDicts("iot_board_pixel").then((res) => {
res.data.forEach((item) => {
let dictValue = item.dictLabel.substr(item.dictLabel.search(/\d/))
this.boardSizeDic[dictValue] = {
label: item.dictLabel,
list: []
};
});
});
},
// 获取信息模板分类
____getTemplateCategory() {
return this.getDicts("iot_template_category").then((res) => {
this.tplCategory = res.data;
});
},
____getAllTemplate() {
return getTemplateList().then((res) => {
this.templateAll = res.data;
});
},
// 行拖拽
rowDrop() {
if (JSON.parse(JSON.stringify(this.contentList)).length > 0) {
// 要侦听拖拽响应的DOM对象
const tbody = document.querySelector(
".partCon .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);
},
});
}
},
____initDirection() {
return this.getDicts("iot_board_direction").then((res) => {
this.boardDirectionList = res.data;
});
},
//改变方向
____changeDirection(val) {
this.____getIotBoard();
},
____onSearchDevice() {
this.____getIotBoard();
},
____resetForm() {
this.form = {
selectedDirection: this.boardDirectionList[0].dictValue,
status: ["0", "1"],
stakeFrom: [+initSearch.startStakeMark[0], +initSearch.startStakeMark[1]],
stakeTo: [+initSearch.endStakeMark[0], +initSearch.endStakeMark[1]],
}
},
____onResetSearchDevice() {
this.____resetForm();
// this.____initDirection();
this.____getIotBoard();
},
// 情报板设备 折叠面板
____getIotBoard() {
// this.checkAll = false;
for (let key in this.boardSizeDic) {
this.boardSizeDic[key].list = [];
}
// TODO 接口
let param = {
direction: this.form.selectedDirection,
};
let stakeFrom = this.form.stakeFrom[0] * 1000 + this.form.stakeFrom[1];
let stakeTo = this.form.stakeTo[0] * 1000 + this.form.stakeTo[1];
let statusForm = _.cloneDeep(this.form.status);
if (statusForm.includes("0")) {
statusForm.push(null)
}
if (IS_TESTING) {
let res = testDeviceList;
res.data.forEach((item) => {
if (_.isString(item.otherConfig)) {
item.otherConfig = JSON.parse(item.otherConfig);
}
this.boardSizeDic[item.otherConfig.screenSize].list.push(item);
if (!this.selectedSize) {
this.selectedSize = item.otherConfig.screenSize;
}
// if (!this.selectedDevices.deviceName) {
// this.selectedDevices = item;
// }
});
this.____onChangeSize();
} else {
getBoardList(param).then((res) => {
res.data.forEach((item, index) => {
if (_.isString(item.otherConfig)) {
item.otherConfig = JSON.parse(item.otherConfig);
}
item.iotDeviceId = item.iotDeviceId || "null_" + item.id;
let stakeThis = +item?.stakeMark?.replace(/[K\+]/g, "") || -1;
if (stakeThis >= stakeFrom && stakeThis <= stakeTo && statusForm.includes(item.deviceState)) {
this.boardSizeDic[item.otherConfig.screenSize].list.push(item);
}
if (!this.selectedSize) {
this.selectedSize = item.otherConfig.screenSize;
}
// console.log(item, item.otherConfig.screenSize)
// if (!this.selectedDevices.deviceName) {
// this.selectedDevices = item;
// }
});
this.____onChangeSize();
// this.____onChangeSize(this.boardSizeDic[0].selectedPixel);
});
}
},
____forkDeviceInfo(deviceFrom) {
//从目标设备取得信息
if (IS_TESTING) {
this.selectedBdMsg = [];
this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
} else {
if (!deviceFrom.iotDeviceId || deviceFrom.iotDeviceId.includes("null_")) {
this.$message.warning("设备未接入！");
return;
}
if (this.deviceStateLatest[deviceFrom.iotDeviceId] === false){
this.$message.warning("设备已离线！");
return;
}
this.selectedBdMsg = [];
getBoardDeviceInfo(deviceFrom.iotDeviceId, deviceFrom.id)
.then((res) => {
this.selectedBdMsg = res.data["3A"].content;
this.isHideCtt = true;
this.$nextTick(() => {
this.isHideCtt = false;
});
})
.catch((err) => { });
}
},
____onAddTemplate() {
// if(selectedSize){
// fontSize = "64px"
// }
this.editDialog = {
visible: true,
mode: "add",
type: "template",
tpl: {
content: ""
},
};
},
____onEditTemplate(tpl) {
// type : board template
// mode : edit add
this.editDialog = {
visible: true,
mode: "edit",
type: "template",
tpl,
};
},
____onDragend(evt) {
// console.log(evt, this.selectedBdMsg , "拖拽结束+++=======")
},
____onEditBoardItem(tpl, index) {
// type : board template
// mode : edit add toDevice toTemplate
this.boardItemEdtingIndex = index;
this.editDialog = {
visible: true,
mode: "edit",
type: "device",
tpl,
};
},
//提交之后的回调
____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(_.cloneDeep(para.data));
}
} else if (para.mode == "toDevice") {
this.selectedBdMsg.push(_.cloneDeep(para.data));
} else {
this.____refreshPageData(para);
}
},
____refreshPageData(para) {
if (para.type == "template") {
this.____getAllTemplate().then((res) => {
this.____setAvailableTemplate();
});
} else {
}
},
// 向右添加模板
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.selectedPixel,
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;
},
/** 删除按钮操作 */
____onDeleteTemplate(row) {
const id = row.id;
let content = "确认删除?";
this.$confirm(content, "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
deleteTemplate(id).then(() => {
this.$message.success("删除成功");
this.____refreshPageData({ type: "template" });
});
});
},
// 删除中间模板
____onDeleteBoardItem(index) {
if (index > -1) {
this.selectedBdMsg.splice(index, 1);
this.$message.success("删除成功");
}
},
// 发布信息
____onPublish() {
if (!this.selectedDevices.length) {
this.$message.warning("请选择设备！");
return;
}
this.____publishInfo();
},
// 接收子组件form表单 修改
receiveForm(form) {
console.log(form, "接收子组件form表单 修改");
this.contentList.splice(this.index_, 1, form);
this.$forceUpdate();
this.allVmsTemplate("no");
},
// 多选
____onSelectDevices(arr) {
this.selectedDevices = [];
if (this.checkedDeviceIds.length == 0) {
return;
}
this.selectedDevices = _.filter(this.boardSizeDic[this.selectedSize].list, (item) => {
return this.checkedDeviceIds.includes(item.iotDeviceId)
});
// this.____forkDeviceInfo(this.selectedDevices);
},
// 情报板列表手风琴
____onChangeSize(val) {
this.____setAvailableTemplate();
this.checkedDeviceIds = [];
this.selectedDevices = [];
this.selectedBdMsg = [];
// this.contentList = []
// this.deviceList = []
// this.disabledButton = true
// this.checkedDeviceIds = []
// this.checkAll = false
// this.allVmsTemplate()
// for (let item of this.boardSizeDic) {
// if (item.selectedPixel == val) {
// // this.checkboxList = item.list;
// for (let itm of item.list) {
// this.deviceList.push(itm.deviceId)
// }
// }
// }
},
____setAvailableTemplate() {
if (!this.selectedSize) {
this.templateAvailable = [];
return;
}
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,
});
}
}
});
},
// 回读
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(deviceId, "3A", { async: false })
.then((res) => {
if ("3A" in res.data) {
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.toUpperCase();
item.FONT_SIZE = item.fontSize + "px";
item.ID = i;
item.FONT = item.font;
item.STAY = item.playbackDuration;
item.ACTION = item.screenEntryMethod;
item.COORDINATE =
this.covering(item.xCoordinate) +
this.covering(item.yCoordinate);
item.screenSize =
item.displayAreaWidth + "*" + item.displayAreaHeight;
item.CONTENT = item.textContent.replaceAll("\\,", ",");
item.CONTENT = item.CONTENT.replaceAll("\\=", "=");
item.CONTENT = item.CONTENT.replaceAll("\\\\n", "\n");
item.formatStyle = item.verticalAlignment;
this.contentList.push(item);
this.form.selectedPixel = item.screenSize;
}
console.log(this.contentList, "onSubmit-----this.contentList");
// this.rowDrop();
}
this.loading = false;
this.submitButton = false;
})
.catch((e) => {
this.$modal.msgWarning("回读失败,请重试");
this.loading = false;
this.submitButton = false;
});
this.deviceId = deviceId;
// 根据情报板id获取分辨率
/*getBoardInfo(deviceId).then(res => {
console.log(res, 'getBoardInfo')
this.form.selectedPixel = 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;
},
// 换算文字在模板的位置
getCoordinate(coordinate, type, screenSize) {
let width = "";
let height = "";
if (!screenSize) {
width = this.form.selectedPixel.split("*")[0];
height = this.form.selectedPixel.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";
}
}
}
}
},
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>
::v-deep .formSearch {
padding: 20px 20px 0;
.el-form-item__label {
color: #fff;
}
}
.direction {
::v-deep .el-input {
.el-input__inner {
font-size: 14px !important;
padding: 8px 5px;
}
}
}
.infoBoardBox {
width: 100%;
height: 100%;
.infoBoardCon {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
padding: 20px;
.part {
background-color: #133242;
margin-right: 10px;
display: flex;
flex-direction: column;
&.partRight {
margin-right: 0;
}
// .partTitle {
// padding: 0px 0;
// /* // border-bottom: 1px solid #05afe3; */
// margin-bottom: 10px;
// display: flex;
// justify-content: space-between;
// height: 60px;
// font-size: 18px;
// align-items: center;
// .controlBox {
// border: 1px solid #f00;
// display: flex;
// justify-content: center;
// margin-bottom: 10px;
// }
// }
.titleBtnBox {
flex: 1;
display: flex;
justify-content: flex-end;
padding: 0 10px;
}
.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;
}
}
.templateBox {
width: 100%;
height: 100%;
transition: all linear 0.3s;
opacity: 1;
transform: translateX(0);
&.hide {
transform: translateX(20px);
opacity: 0;
transition: all linear 0.3s;
}
.tplItem {
margin-right: 14px;
display: flex;
align-items: stretch;
padding-bottom: 10px;
.boardPreview {
border: 2px solid #004c64;
background-color: #133242;
// width: 560px;
// height:80px;
flex: 1;
}
.infoBtnBox {
width: 160px;
height: 80px;
display: flex;
margin-left: 10px;
/* // border: solid 1px #05afe3; */
border: 2px solid #004c64;
background-color: #133242;
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.svg);
}
&.btnEdit {
background-image: url(~@/assets/jihe/images/button/edit.svg);
}
&.btnDelete {
background-image: url(~@/assets/jihe/images/button/delete.svg);
}
}
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;
}
}
}
.tplItem.ghost_class {
.boardPreview,
.infoBtnBox {
border-color: #F00;
}
}
.tplItem.chosen_class {
.boardPreview,
.infoBtnBox {
border-color: #0A0;
}
}
.tplItem.drag_class {
.boardPreview,
.infoBtnBox {
border-color: #FF0;
}
}
.el-collapse {
max-height: 100% !important;
overflow: auto;
border-bottom: none;
border-top: none;
padding: 0 0.5vw;
}
}
}
}
.checkbox {
.boardLabel {}
// 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;
}
.deviceList {
::v-deep .el-checkbox__label {
display: flex !important;
justify-content: space-between;
width: 100%;
.title {
flex: 1;
width: 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
}
.state {
width: 18px;
height: 18px;
margin-right: 4px;
}
.huiduButton {
background: transparent;
border: none;
height: 18px;
width: 18px;
line-height: 20px;
padding: 0;
color: #fff;
font-size: 16px;
}
.huiduButton:hover {
color: #05afe3 !important;
}
}
.el-checkbox {
display: flex !important;
padding-top: 10px;
margin: 0;
}
}
::v-deep .el-table {
caret-color: rgba(0, 0, 0, 0);
user-select: none;
thead {
display: none;
}
}
// .boardListTitle {
// // 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;
}
// .partDeviceTempateTitle {
// width: 100%;
// color: #fff;
// padding-right: 110px !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-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 10px;
}
::v-deep .el-collapse {
color: #fff;
border: none;
}
::v-deep .el-collapse-item__wrap {
border: none;
}
::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>