Browse Source

feat 情报板优化 增加null判断

wangqin
qingzhengli 1 year ago
parent
commit
25df62884d
  1. 139
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue

139
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/InfoBoard/index.vue

@ -6,49 +6,22 @@
<div class="mainDialog"> <div class="mainDialog">
<div class="dialog_head"> <div class="dialog_head">
<div class="tit">{{ selectedDevice.deviceName }}</div> <div class="tit">{{ selectedDevice.deviceName }}</div>
<img <img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="____onClose" />
class="btnCls" <img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt="" />
src="@/assets/jihe/images/dialog/ibCls.png"
alt=""
@click="____onClose"
/>
<img
class="deco"
src="@/assets/jihe/images/dialog/ibHeadDeco.png"
alt=""
/>
</div> </div>
<div class="dialogContent"> <div class="dialogContent">
<div <div v-if="selectedBdMsg.length > 0" class="dialogContent_box" style="height: 100%">
v-if="selectedBdMsg.length > 0"
class="dialogContent_box"
style="height: 100%"
>
<vuescroll :ops="scrollOptions" class="listBox"> <vuescroll :ops="scrollOptions" class="listBox">
<div <div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem">
v-for="(itm, indx) in selectedBdMsg"
:key="indx"
class="tplItem"
>
<!-- 模板内容 --> <!-- 模板内容 -->
<BoardPreview <BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview>
class="boardPreview"
:boardWH="selectedSize"
:tpl="itm"
></BoardPreview>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="infoBtnBox"> <div class="infoBtnBox">
<el-tooltip content="编辑" placement="top"> <el-tooltip content="编辑" placement="top">
<p <p @click="____onEditBoardItem(itm, indx)" class="btn btnEdit"></p>
@click="____onEditBoardItem(itm, indx)"
class="btn btnEdit"
></p>
</el-tooltip> </el-tooltip>
<el-tooltip content="删除" placement="top"> <el-tooltip content="删除" placement="top">
<p <p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p>
@click="____onDeleteBoardItem(indx)"
class="btn btnDelete"
></p>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -88,58 +61,30 @@
</div> --> </div> -->
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="设备参数" name="second" <el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane>
>设备参数</el-tab-pane <el-tab-pane label="在线率统计" name="third">在线率统计</el-tab-pane>
>
<el-tab-pane label="在线率统计" name="third"
>在线率统计</el-tab-pane
>
</el-tabs> </el-tabs>
</div> </div>
<div class="dialogContent_bottom_btn"> <div class="dialogContent_bottom_btn">
<el-button <el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()">添加信息</el-button>
class="btnInfoBoard" <el-button class="btnInfoBoard" type="publish" @click="____publishInfo"
type="add" :disabled="selectedBdMsg.length <= 0 || selectedDevice.iotDeviceId === null || selectedDevice.iotDeviceId === undefined">发布信息</el-button>
@click.native="____onAddDeviceItem()"
>添加信息</el-button
>
<el-button
class="btnInfoBoard"
type="publish"
@click="____publishInfo"
:disabled="selectedBdMsg.length <= 0"
>发布信息</el-button
>
</div> </div>
<div class="sideSwitch" @click="____onShowTemplate"> <div class="sideSwitch" @click="____onShowTemplate">
<img <img class="img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{
class="img"
src="@/assets/screen/xtb/leftd.png"
alt=""
:style="{
transform: isShowTemplate transform: isShowTemplate
? 'rotate(0deg)' ? 'rotate(0deg)'
: 'rotate(180deg)', : 'rotate(180deg)',
}" }" />
/>
<div class="txt">信息模板</div> <div class="txt">信息模板</div>
</div> </div>
<!-- 附近的摄像机 --> <!-- 附近的摄像机 -->
<div <div class="sideSwitch" style="top: 36%" @click="____onShowCameraShower">
class="sideSwitch" <img class="img" src="@/assets/screen/xtb/leftd.png" alt="" :style="{
style="top: 36%"
@click="____onShowCameraShower"
>
<img
class="img"
src="@/assets/screen/xtb/leftd.png"
alt=""
:style="{
transform: dialogInfoCamera transform: dialogInfoCamera
? 'rotate(0deg)' ? 'rotate(0deg)'
: 'rotate(180deg)', : 'rotate(180deg)',
}" }" />
/>
<div class="txt">附近相机</div> <div class="txt">附近相机</div>
</div> </div>
</div> </div>
@ -148,23 +93,12 @@
<!-- 信息模板 --> <!-- 信息模板 -->
<div v-if="isShowTemplate" class="sideContent template"> <div v-if="isShowTemplate" class="sideContent template">
<vuescroll :ops="scrollOptions" class="listBox"> <vuescroll :ops="scrollOptions" class="listBox">
<div <div v-for="(item, index) in templateAvailable" :key="item.dictValue">
v-for="(item, index) in templateAvailable"
:key="item.dictValue"
>
<!-- 原来是<el-collapse v-model="activeNames"> --> <!-- 原来是<el-collapse v-model="activeNames"> -->
<h3>{{ item.dictLabel }}</h3> <h3>{{ item.dictLabel }}</h3>
<div <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
v-for="(itm, indx) in item.list"
:key="indx"
class="tplItem"
>
<!-- 模板内容 --> <!-- 模板内容 -->
<BoardTplPreview <BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview>
class="boardPreview"
:boardWH="selectedSize"
:tpl="itm"
></BoardTplPreview>
<!-- <div class="infoPreview"> <!-- <div class="infoPreview">
<div class="infoBox" :style="____boardBgStyle"> <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> <span class="infoTxt" :style="____boardTxtStyle(itm)" v-html="itm.content.replace(/\n|\r\n/g, '<br>').replace(/ /g, '&nbsp')"></span>
@ -173,10 +107,7 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="infoBtnBox infoBtnBoxSm"> <div class="infoBtnBox infoBtnBoxSm">
<el-tooltip content="加入待下发信息" placement="top"> <el-tooltip content="加入待下发信息" placement="top">
<p <p @click="____onTplToDevice(itm, false)" class="btn btnApply"></p>
@click="____onTplToDevice(itm, false)"
class="btn btnApply"
></p>
</el-tooltip> </el-tooltip>
</div> </div>
</div> </div>
@ -185,22 +116,13 @@
</div> </div>
<!-- 附近相机 --> <!-- 附近相机 -->
<CameraShower <CameraShower class="sideContent camera" :visible.sync="dialogInfoCamera" :list="nearbyCameraList">
class="sideContent camera" </CameraShower>
:visible.sync="dialogInfoCamera"
:list="nearbyCameraList"
></CameraShower>
</div> </div>
</transition> </transition>
<BoardInfoEditor <BoardInfoEditor @afterSubmit="____onEditSubmit" :mode="editDialog.mode" :type="editDialog.type"
@afterSubmit="____onEditSubmit" :visible.sync="editDialog.visible" :screenSize="selectedSize" :tpl="editDialog.tpl"></BoardInfoEditor>
:mode="editDialog.mode"
:type="editDialog.type"
:visible.sync="editDialog.visible"
:screenSize="selectedSize"
:tpl="editDialog.tpl"
></BoardInfoEditor>
</div> </div>
</Teleport> </Teleport>
</template> </template>
@ -347,11 +269,15 @@ export default {
if (IS_TESTING) { if (IS_TESTING) {
this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content); this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content);
} else { } else {
getBoardDeviceInfo(this.selectedDevice.iotDeviceId) // iotDeviceIdnull
const iotDeviceId = this.selectedDevice.iotDeviceId;
if (!(iotDeviceId === null || iotDeviceId === undefined))
getBoardDeviceInfo()
.then((res) => { .then((res) => {
this.selectedBdMsg = res.data["3A"].content; this.selectedBdMsg = res.data["3A"].content;
}) })
.catch((err) => { }); .catch((err) => { });
else this.$message.error("设备未接入");
} }
}, },
// //
@ -519,6 +445,7 @@ export default {
&.infoBtnBoxSm { &.infoBtnBoxSm {
width: 60px; width: 60px;
} }
width: 110px; width: 110px;
height: 80px; height: 80px;
display: flex; display: flex;
@ -584,6 +511,7 @@ export default {
padding: 0 0.5vw; padding: 0 0.5vw;
} }
} }
.mask { .mask {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -595,6 +523,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.content { .content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -613,10 +542,12 @@ export default {
background-color: #114c66; background-color: #114c66;
position: relative; position: relative;
margin-top: 50px; margin-top: 50px;
&.camera { &.camera {
width: 540px; width: 540px;
height: 556px; height: 556px;
} }
&.template { &.template {
width: 430px; width: 430px;
height: 556px; height: 556px;

Loading…
Cancel
Save