|
|
|
|
<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">
|
|
|
|
|
<template v-if="deviceList.length> 0">
|
|
|
|
|
<el-checkbox-group class="deviceList" v-model="checkedDeviceIds" @change="____onSelectDevices">
|
|
|
|
|
<el-checkbox v-for="(itm, index) in deviceList" :label="itm.iotDeviceId" :key="index"
|
|
|
|
|
:disabled="!itm.iotDeviceId || itm.iotDeviceId.includes('null') || 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="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="(itm.deviceState == 0 || itm.deviceState == null) ? '离线' : '在线'"
|
|
|
|
|
placement="top">
|
|
|
|
|
<img src="@/assets/jihe/images/offline.svg" class="state"
|
|
|
|
|
v-if="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>
|
|
|
|
|
</template>
|
|
|
|
|
<div v-else style="color: #fff; text-align: center; line-height: 60px">
|
|
|
|
|
暂无数据
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</vuescroll>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- ++++++++++中间部分：单个设备++++++++++ -->
|
|
|
|
|
<div style="width: 37.8%" class="part partMiddle">
|
|
|
|
|
<WgtTitle title="待下发信息">
|
|
|
|
|
<div class="titleBtnBox">
|
|
|
|
|
<el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()"
|
|
|
|
|
:disabled="selectedBdMsg.length>=1">添加信息</el-button>
|
|
|
|
|
<el-button v-hasPermi="['service:broadcast:publish']" 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">
|
|
|
|
|
<!-- 模板内容 -->
|
|
|
|
|
<BroadcastTplShower class="boardPreview" :text="itm.content" />
|
|
|
|
|
<!-- 操作按钮 -->
|
|
|
|
|
<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 tpl_box">
|
|
|
|
|
<WgtTitle :title="`信息模板`" class="tpl_title">
|
|
|
|
|
<div class="titleBtnBox">
|
|
|
|
|
<el-button v-hasPermi="['service:broadcast:addTemplate']" class="btnInfoBoard" type="add" @click="____onAddTemplate">添加模板</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</WgtTitle>
|
|
|
|
|
<BroadcastTplList class="tpl_list" ref="tpl_list" @onAddToDevice="____onAddFromTpl" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<broadcastEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
|
|
|
|
|
:visible.sync="editDialog.visible" :tpl="editDialog.tpl"></broadcastEditor>
|
|
|
|
|
<!-- <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,
|
|
|
|
|
} from "@/api/broadcast/template";
|
|
|
|
|
import {
|
|
|
|
|
getDeviceRealtimeProperty,
|
|
|
|
|
} from "@/api/device/device";
|
|
|
|
|
import { getdeviceList, getBoardDeviceInfo } from "@/api/broadcast/broadcast";
|
|
|
|
|
|
|
|
|
|
import BroadcastTplShower from "@screen/components/broadcast/BroadcastTplShower.vue";
|
|
|
|
|
|
|
|
|
|
import broadcastEditor from "@screen/components/broadcast/broadcastEditor";
|
|
|
|
|
|
|
|
|
|
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 broadcast from "@screen/mixins/broadcast";
|
|
|
|
|
import { initSearch } from "@screen/utils/enum/common.js"
|
|
|
|
|
import BroadcastTplList from "@screen/components/broadcast/BroadcastTplList.vue";
|
|
|
|
|
import { mapState } from "vuex";
|
|
|
|
|
import request from '@/utils/request'
|
|
|
|
|
import { multiResultShow } from "@screen/utils/common";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "DeviceCast",
|
|
|
|
|
mixins: [broadcast],
|
|
|
|
|
components: {
|
|
|
|
|
BroadcastTplList,
|
|
|
|
|
draggable,
|
|
|
|
|
WgtTitle,
|
|
|
|
|
broadcastEditor,
|
|
|
|
|
editInfo,
|
|
|
|
|
BroadcastTplShower,
|
|
|
|
|
vuescroll,
|
|
|
|
|
},
|
|
|
|
|
dicts: ["iot_board_direction"],
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
tplCategory: [], //模板
|
|
|
|
|
multiPublish: true,
|
|
|
|
|
toggleIndex: 0,
|
|
|
|
|
toRightCategory: "", //向右类别绑定
|
|
|
|
|
arrowRightVisible: false, //向右类别弹窗
|
|
|
|
|
loading: false,
|
|
|
|
|
submitButton: false, //回读禁用
|
|
|
|
|
selectedDevices: [],
|
|
|
|
|
boardDirectionList: [], //方向
|
|
|
|
|
userQueryParams: {
|
|
|
|
|
userName: this.$store.state.user.name,
|
|
|
|
|
}, //用户
|
|
|
|
|
selectedPixelMode: null, //分辨率
|
|
|
|
|
editType: 0,
|
|
|
|
|
showEmit: false, //修改组件
|
|
|
|
|
index_: 0, //待下发 编辑项index
|
|
|
|
|
index: 0, //模板 编辑项 index
|
|
|
|
|
deviceId: "", //情报板id
|
|
|
|
|
boardEmitItem: null, //修改彈窗的數據
|
|
|
|
|
userDeptId: "", //管理站id
|
|
|
|
|
deptList: [], //分中心下拉框
|
|
|
|
|
mechanismList: [], //管理机构下拉框
|
|
|
|
|
devicessizeList: [], //分辨率下拉框
|
|
|
|
|
deviceList: [], //分辨率
|
|
|
|
|
checkedDeviceIds: [], //多选 选中项
|
|
|
|
|
form: {},
|
|
|
|
|
supplier: null, //报文类型
|
|
|
|
|
activeNames: [], //模板 展开项
|
|
|
|
|
checkAll: false,
|
|
|
|
|
isIndeterminate: false,
|
|
|
|
|
contentList: [], //待下发数据
|
|
|
|
|
toRightItem: {}, //向右添加到模板的数据
|
|
|
|
|
selectedBdMsg: [],
|
|
|
|
|
editDialog: {
|
|
|
|
|
mode: "",
|
|
|
|
|
type: "",
|
|
|
|
|
visible: false,
|
|
|
|
|
tpl: {},
|
|
|
|
|
},
|
|
|
|
|
scrollOptions,
|
|
|
|
|
boardItemEdtingIndex: -1,
|
|
|
|
|
isHideCtt: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
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()
|
|
|
|
|
]).then((res) => {
|
|
|
|
|
this.____resetForm();
|
|
|
|
|
this.____getIotBoard();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// this.rowDrop();
|
|
|
|
|
this.hideScrollFn();
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
...mapState(["menu"]),
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
____boardTxtStyle() {
|
|
|
|
|
return {
|
|
|
|
|
color: "#F00",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 行拖拽
|
|
|
|
|
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.deviceList = [];
|
|
|
|
|
// this.checkAll = false;
|
|
|
|
|
// 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)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getdeviceList(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.deviceList.push(item);
|
|
|
|
|
}
|
|
|
|
|
// console.log(item, item.otherConfig.screenSize)
|
|
|
|
|
// if (!this.selectedDevices.deviceName) {
|
|
|
|
|
// this.selectedDevices = item;
|
|
|
|
|
// }
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
____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;
|
|
|
|
|
}
|
|
|
|
|
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: ""
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
____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,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
____onAddFromTpl(item){
|
|
|
|
|
// if(this.checkedDeviceIds.length<=0){ // this.$message.warning('未选择设备!'); // return; // }
|
|
|
|
|
if(this.selectedBdMsg.length >= 1) {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: "warning",
|
|
|
|
|
message: "只能发布一条语音广播!",
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.editDialog = {
|
|
|
|
|
visible: false,
|
|
|
|
|
mode: "toDevice",
|
|
|
|
|
type: "template",
|
|
|
|
|
tpl: item,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
//提交之后的回调
|
|
|
|
|
____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") {
|
|
|
|
|
let temp = _.cloneDeep(para.data);
|
|
|
|
|
this.$delete(temp, "id");
|
|
|
|
|
this.selectedBdMsg.push(temp);
|
|
|
|
|
} else {
|
|
|
|
|
this.____refreshPageData();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
____refreshPageData() {
|
|
|
|
|
this.$refs["tpl_list"].____refreshData();
|
|
|
|
|
// if (para.type == "template") {
|
|
|
|
|
|
|
|
|
|
// this.____getAllTemplate().then((res) => {
|
|
|
|
|
// this.____sortTemplate();
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// } else {
|
|
|
|
|
// }
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 修改弹窗
|
|
|
|
|
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 删除中间模板
|
|
|
|
|
____onDeleteBoardItem(index) {
|
|
|
|
|
if (index > -1) {
|
|
|
|
|
this.selectedBdMsg.splice(index, 1);
|
|
|
|
|
this.$message.success("删除成功");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 发布信息
|
|
|
|
|
____onPublish() {
|
|
|
|
|
if (!this.selectedDevices.length) {
|
|
|
|
|
this.$message.warning("请选择设备");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// this.____publishInfo();
|
|
|
|
|
|
|
|
|
|
let deviceList = [];
|
|
|
|
|
let checkList = [];
|
|
|
|
|
this.selectedDevices.forEach(item=>{
|
|
|
|
|
deviceList.push({
|
|
|
|
|
deviceType: item.deviceType,
|
|
|
|
|
id: item.id,
|
|
|
|
|
iotDeviceId: item.iotDeviceId,
|
|
|
|
|
otherConfig: JSON.stringify(item.otherConfig),
|
|
|
|
|
});
|
|
|
|
|
checkList.push(item.otherConfig)
|
|
|
|
|
})
|
|
|
|
|
this.$confirm("是否确定发布语音广播?", "提示", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
})
|
|
|
|
|
.then(() => {
|
|
|
|
|
|
|
|
|
|
const param = {
|
|
|
|
|
"devices": deviceList,
|
|
|
|
|
"functions": [
|
|
|
|
|
{
|
|
|
|
|
"functionId": "1",//随便 不为空即可
|
|
|
|
|
"params": {
|
|
|
|
|
name: "task-3",
|
|
|
|
|
outVol: this.selectedBdMsg[0].outVol,
|
|
|
|
|
priority:this.selectedBdMsg[0].priority,
|
|
|
|
|
text: this.selectedBdMsg[0].content,
|
|
|
|
|
repeatTimes: this.selectedBdMsg[0].repeatTimes,
|
|
|
|
|
termList: checkList,
|
|
|
|
|
functionType: "startPaTts",
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let loading = this.$loading({
|
|
|
|
|
lock: true,
|
|
|
|
|
text: "Loading",
|
|
|
|
|
spinner: "el-icon-loading",
|
|
|
|
|
background: "rgba(0, 0, 0, 0.7)",
|
|
|
|
|
});
|
|
|
|
|
request({
|
|
|
|
|
url: `/business/device/batchFunctions`,
|
|
|
|
|
method: "post",
|
|
|
|
|
data: param,
|
|
|
|
|
}).then(data=>{
|
|
|
|
|
multiResultShow(data.data, item => item.result.retCode == '0', "广播控制");
|
|
|
|
|
}).catch((err) => {})
|
|
|
|
|
.finally(() => {
|
|
|
|
|
loading.close();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// let data = {
|
|
|
|
|
// functionType : "startPaTts",
|
|
|
|
|
// name : "task-3",
|
|
|
|
|
// // outVol : "6",
|
|
|
|
|
// outVol: this.selectedBdMsg[0].outVol,
|
|
|
|
|
// // priority : "1",
|
|
|
|
|
// priority: this.selectedBdMsg[0].priority,
|
|
|
|
|
// repeatTimes: this.selectedBdMsg[0].repeatTimes,
|
|
|
|
|
// // termList : [{ zoneld: "6001", termDN: "601" }, { zoneld: "6001", termDN: "608" }, { zoneld: "6001", termDN: "610" }],
|
|
|
|
|
// termList: deviceList,
|
|
|
|
|
// text: this.selectedBdMsg[0].content
|
|
|
|
|
// }
|
|
|
|
|
// publishToBoard(data)
|
|
|
|
|
// .then((res) => {
|
|
|
|
|
// // this.saveLog(content);
|
|
|
|
|
// const cbMsg = {
|
|
|
|
|
// 0: '成功',
|
|
|
|
|
// 1: '非法控制台标识',
|
|
|
|
|
// 2: '鉴权失败',
|
|
|
|
|
// 3: '非法分区标识',
|
|
|
|
|
// 4: '非法终端号码',
|
|
|
|
|
// 5: '非法分区名称',
|
|
|
|
|
// 6: '非法终端类型',
|
|
|
|
|
// 7: '非法控制话机号码',
|
|
|
|
|
// 8: '控制话机离线',
|
|
|
|
|
// 9: '控制话机忙',
|
|
|
|
|
// 10: '非法被叫号码',
|
|
|
|
|
// 11: '非法音乐标识',
|
|
|
|
|
// 12: '非法音乐资源链接',
|
|
|
|
|
// 13: '非法广播任务标识',
|
|
|
|
|
// 14: '非法文字广播内容',
|
|
|
|
|
// 15: '非法广播重复次数',
|
|
|
|
|
// 16: '非法广播文件列表',
|
|
|
|
|
// 17: '非法广播终端列表',
|
|
|
|
|
// 18: '非法呼叫标识'
|
|
|
|
|
// }
|
|
|
|
|
// if(res.retCode === 0){
|
|
|
|
|
// this.$message({
|
|
|
|
|
// type: "success",
|
|
|
|
|
// message: "发布成功",
|
|
|
|
|
// });
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$message({
|
|
|
|
|
// type: "error",
|
|
|
|
|
// message: "发布失败，"+cbMsg[res.retCode],
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// // !isMultiControl && this.____getDeviceInfo();
|
|
|
|
|
// })
|
|
|
|
|
// .catch((err) => {})
|
|
|
|
|
// .finally(() => {
|
|
|
|
|
// loading.close();
|
|
|
|
|
// });
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 接收子组件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.deviceList, (item) => {
|
|
|
|
|
return this.checkedDeviceIds.includes(item.iotDeviceId)
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// this.____forkDeviceInfo(this.selectedDevices);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 回读
|
|
|
|
|
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("回读消息------------------------");
|
|
|
|
|
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;
|
|
|
|
|
// width: 560px;
|
|
|
|
|
// height:80px;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.infoBtnBox {
|
|
|
|
|
width: 160px;
|
|
|
|
|
height: 50px;
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tpl_box {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
|
|
.tpl_title {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tpl_list {
|
|
|
|
|
flex: 1;
|
|
|
|
|
height: 0;
|
|
|
|
|
padding-left:10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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 {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
background-color: #053b4f;
|
|
|
|
|
::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 {
|
|
|
|
|
color: #fff;
|
|
|
|
|
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>
|
