mengff
/
jihe-hs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加组件显示

wangqin
Joe 2 years ago
parent
36299c577b
commit
d04b3e61f5
1 changed files with 147 additions and 144 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 291
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue

291
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue
View File

@ -1,164 +1,166 @@
<template>
<div class="mask">
<transition>
<div v-if="visible" class="dialog_info">
<div class="dialog_info_left">
<div class="dialog_head">
<div class="tit">{{ dialogTit }}</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>
<Teleport>
<div class="mask">
<transition>
<div v-if="visible" class="dialog_info">
<div class="dialog_info_left">
<div class="dialog_head">
<div class="tit">{{ dialogTit }}</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_bottom">
<el-tabs v-model="activeTab" @tab-click="tabClickFn">
<el-tab-pane label="详情信息" name="first">
<div class="show_bottom_tab_box">
<div class="show_bottom_tab_item">
<div class="show_bottom_tab_item_l">设备名称</div>
<div class="show_bottom_tab_item_r">{{ device.deviceName }}</div>
</div>
<div class="show_bottom_tab_item">
<div class="show_bottom_tab_item_l">设备桩号</div>
<div class="show_bottom_tab_item_r">{{ device.stakeMarkId }}</div>
</div>
<div class="show_bottom_tab_item">
<div class="show_bottom_tab_item_l">屏幕像素</div>
<div class="show_bottom_tab_item_r">{{ JSON.parse(device.otherConfig).screenSize }}</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 class="show_bottom_tab_item" v-for="item in tabDataInfoList" :key="item.id">
</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="show_bottom_tab_item">
<div class="show_bottom_tab_item_l">设备名称</div>
<div class="show_bottom_tab_item_r">{{ device.deviceName }}</div>
</div>
<div class="show_bottom_tab_item">
<div class="show_bottom_tab_item_l">设备桩号</div>
<div class="show_bottom_tab_item_r">{{ device.stakeMarkId }}</div>
</div>
<div class="show_bottom_tab_item">
<div class="show_bottom_tab_item_l">屏幕像素</div>
<div class="show_bottom_tab_item_r">{{ JSON.parse(device.otherConfig).screenSize }}</div>
</div>
<!-- <div class="show_bottom_tab_item" v-for="item in tabDataInfoList" :key="item.id">
<div class="show_bottom_tab_item_l">{{ item.tit }}: </div>
<div class="show_bottom_tab_item_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>
</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>
<!-- 信息模板 -->
<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 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, '&nbsp')"></span>
</div>
</div> -->
<!-- 操作按钮 -->
<div class="infoBtnBox">
<el-tooltip content="加入待下发信息" placement="top">
<p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
</el-tooltip>
<!-- 操作按钮 -->
<div class="infoBtnBox">
<el-tooltip content="加入待下发信息" placement="top">
<p @click="____onAddToDevice(itm)" class="btn btnApply"></p>
</el-tooltip>
</div>
</div>
</div>
</div>
</vuescroll>
</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 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_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 class="info_right_camera">
<div class="info_right_camera_top">
<!-- 视频组件 -->
<videoView :url="videoUrl" />
</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 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_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 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>
</div>
</transition>
</div>
</transition>
<BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
:visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
<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>
<!-- 情报板弹框中的弹框 -->
<addBoard ref="addinfo" @addInfo="addInfo" />
<editBoard v-if="showEmit" :boardEmitItem="boardEmitItem" @receiveForm="receiveForm" @dialogClose="dialogClose" />
</div>
</Teleport>
</template>
<script>
@ -174,6 +176,7 @@ 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'
@ -307,7 +310,7 @@ export default {
immediate: false
}
},
components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll },
components: { addBoard, editBoard, BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll, Teleport },
created() {
this.____getTemplateCategory();
this.____getAllTemplate();
@ -418,9 +421,9 @@ export default {
____onAddToDevice(item) {
let arr = this.selectedSize.split("*");
item.origin = {
displayAreaWidth: +arr[0],
displayAreaHeight: +arr[1]
}
displayAreaWidth: +arr[0],
displayAreaHeight: +arr[1]
}
this.editDialog = {
visible: true,
mode: "toDevice",
@ -431,19 +434,19 @@ export default {
____onAddDeviceItem() {
let arr = this.selectedSize.split("*");
this.editDialog = {
visible: true,
mode: "add",
type: "device",
tpl: {
"textContent": "",
origin : {
displayAreaWidth: +arr[0],
displayAreaHeight: +arr[1]
}
this.editDialog = {
visible: true,
mode: "add",
type: "device",
tpl: {
"textContent": "",
origin: {
displayAreaWidth: +arr[0],
displayAreaHeight: +arr[1]
}
}
},
}
},
@ -579,7 +582,7 @@ export default {
type: 'warning'
})
.then(() => {
return ;
return;
let loading = this.$loading({
lock: true,
text: 'Loading',

Write Preview
Loading…
Cancel
Save