|
|
|
@ -6,29 +6,55 @@ |
|
|
|
<div class="mainDialog"> |
|
|
|
<div class="dialog_head"> |
|
|
|
<div class="tit">{{ selectedDevice.deviceName }}</div> |
|
|
|
<img class="btnCls" src="@/assets/jihe/images/dialog/ibCls.png" alt="" @click="____onClose"> |
|
|
|
<img class="deco" src="@/assets/jihe/images/dialog/ibHeadDeco.png" alt=""> |
|
|
|
<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%;"> |
|
|
|
<div |
|
|
|
v-if="selectedBdMsg.length > 0" |
|
|
|
class="dialogContent_box" |
|
|
|
style="height: 100%" |
|
|
|
> |
|
|
|
<vuescroll :ops="scrollOptions" class="listBox"> |
|
|
|
<div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem"> |
|
|
|
<div |
|
|
|
v-for="(itm, indx) in selectedBdMsg" |
|
|
|
:key="indx" |
|
|
|
class="tplItem" |
|
|
|
> |
|
|
|
<!-- 模板内容 --> |
|
|
|
<BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview> |
|
|
|
<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> |
|
|
|
<p |
|
|
|
@click="____onEditBoardItem(itm, indx)" |
|
|
|
class="btn btnEdit" |
|
|
|
></p> |
|
|
|
</el-tooltip> |
|
|
|
<el-tooltip content="删除" placement="top"> |
|
|
|
<p @click="____onDeleteBoardItem(indx)" class="btn btnDelete"></p> |
|
|
|
<p |
|
|
|
@click="____onDeleteBoardItem(indx)" |
|
|
|
class="btn btnDelete" |
|
|
|
></p> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</vuescroll> |
|
|
|
</div> |
|
|
|
<div v-else class="dialogContent_box" style="height: 100%;"> |
|
|
|
<div v-else class="dialogContent_box" style="height: 100%"> |
|
|
|
<div class="dialogContent_box_empty">暂无数据</div> |
|
|
|
</div> |
|
|
|
<div class="dialogContent_bottom"> |
|
|
|
@ -37,15 +63,24 @@ |
|
|
|
<div class="show_bottom_tab_box"> |
|
|
|
<div class="deviceInfo"> |
|
|
|
<div class="deviceInfo_l">设备名称</div> |
|
|
|
<div class="deviceInfo_r">{{ selectedDevice.deviceName }}</div> |
|
|
|
<div class="deviceInfo_r"> |
|
|
|
{{ selectedDevice.deviceName }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="deviceInfo"> |
|
|
|
<div class="deviceInfo_l">设备桩号</div> |
|
|
|
<div class="deviceInfo_r">{{ selectedDevice.stakeMark }}</div> |
|
|
|
<div class="deviceInfo_r"> |
|
|
|
{{ selectedDevice.stakeMark }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="deviceInfo"> |
|
|
|
<div class="deviceInfo_l">屏幕像素</div> |
|
|
|
<div class="deviceInfo_r">{{ JSON.parse(selectedDevice.otherConfig).screenSize }} px</div> |
|
|
|
<div class="deviceInfo_r"> |
|
|
|
{{ |
|
|
|
JSON.parse(selectedDevice.otherConfig).screenSize |
|
|
|
}} |
|
|
|
px |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <div class="deviceInfo" v-for="item in tabDataInfoList" :key="item.id"> |
|
|
|
<div class="deviceInfo_l">{{ item.tit }}: </div> |
|
|
|
@ -53,22 +88,58 @@ |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</el-tab-pane> |
|
|
|
<el-tab-pane label="设备参数" name="second">设备参数</el-tab-pane> |
|
|
|
<el-tab-pane label="设备参数" name="second" |
|
|
|
>设备参数</el-tab-pane |
|
|
|
> |
|
|
|
<el-tab-pane label="在线率统计" name="third" |
|
|
|
>在线率统计</el-tab-pane |
|
|
|
> |
|
|
|
</el-tabs> |
|
|
|
</div> |
|
|
|
<div class="dialogContent_bottom_btn"> |
|
|
|
<el-button class="btnInfoBoard" type="add" @click.native="____onAddDeviceItem()">添加信息</el-button> |
|
|
|
<el-button class="btnInfoBoard" type="publish" @click="____publishInfo" :disabled="selectedBdMsg.length <= 0">发布信息</el-button> |
|
|
|
<el-button |
|
|
|
class="btnInfoBoard" |
|
|
|
type="add" |
|
|
|
@click.native="____onAddDeviceItem()" |
|
|
|
>添加信息</el-button |
|
|
|
> |
|
|
|
<el-button |
|
|
|
class="btnInfoBoard" |
|
|
|
type="publish" |
|
|
|
@click="____publishInfo" |
|
|
|
:disabled="selectedBdMsg.length <= 0" |
|
|
|
>发布信息</el-button |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div class="sideSwitch" @click="____onShowTemplate"> |
|
|
|
<img class="img" src="@/assets/screen/xtb/leftd.png" alt="" |
|
|
|
:style="{ 'transform': isShowTemplate ? 'rotate(0deg)' : 'rotate(180deg)' }"> |
|
|
|
<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="____onShowCameraShower"> |
|
|
|
<img class="img" src="@/assets/screen/xtb/leftd.png" alt="" |
|
|
|
:style="{ 'transform': dialogInfoCamera ? 'rotate(0deg)' : 'rotate(180deg)' }"> |
|
|
|
<div |
|
|
|
class="sideSwitch" |
|
|
|
style="top: 36%" |
|
|
|
@click="____onShowCameraShower" |
|
|
|
> |
|
|
|
<img |
|
|
|
class="img" |
|
|
|
src="@/assets/screen/xtb/leftd.png" |
|
|
|
alt="" |
|
|
|
:style="{ |
|
|
|
transform: dialogInfoCamera |
|
|
|
? 'rotate(0deg)' |
|
|
|
: 'rotate(180deg)', |
|
|
|
}" |
|
|
|
/> |
|
|
|
<div class="txt">附近相机</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -77,12 +148,23 @@ |
|
|
|
<!-- 信息模板 --> |
|
|
|
<div v-if="isShowTemplate" class="sideContent template"> |
|
|
|
<vuescroll :ops="scrollOptions" class="listBox"> |
|
|
|
<div v-for="(item, index) in templateAvailable" :key="item.dictValue"> |
|
|
|
<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"> |
|
|
|
<div |
|
|
|
v-for="(itm, indx) in item.list" |
|
|
|
:key="indx" |
|
|
|
class="tplItem" |
|
|
|
> |
|
|
|
<!-- 模板内容 --> |
|
|
|
<BoardTplPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardTplPreview> |
|
|
|
<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> |
|
|
|
@ -91,7 +173,10 @@ |
|
|
|
<!-- 操作按钮 --> |
|
|
|
<div class="infoBtnBox infoBtnBoxSm"> |
|
|
|
<el-tooltip content="加入待下发信息" placement="top"> |
|
|
|
<p @click="____onTplToDevice(itm, false)" class="btn btnApply"></p> |
|
|
|
<p |
|
|
|
@click="____onTplToDevice(itm, false)" |
|
|
|
class="btn btnApply" |
|
|
|
></p> |
|
|
|
</el-tooltip> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -99,44 +184,55 @@ |
|
|
|
</vuescroll> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 附近相机 --> |
|
|
|
<CameraShower class="sideContent camera" :visible.sync="dialogInfoCamera" :list="nearbyCameraList"></CameraShower> |
|
|
|
|
|
|
|
|
|
|
|
<CameraShower |
|
|
|
class="sideContent camera" |
|
|
|
:visible.sync="dialogInfoCamera" |
|
|
|
:list="nearbyCameraList" |
|
|
|
></CameraShower> |
|
|
|
</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> |
|
|
|
</div> |
|
|
|
</Teleport> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { listDevice, invokedFunction, getDeviceRealtimeProperty } from '@/api/device/device.js' |
|
|
|
import { |
|
|
|
listDevice, |
|
|
|
invokedFunction, |
|
|
|
getDeviceRealtimeProperty, |
|
|
|
} from "@/api/device/device.js"; |
|
|
|
// import infoBoardTestData from "@/common/infoBoardTestData.js" |
|
|
|
import { getBoardDeviceInfo } from '@/api/board/board' |
|
|
|
import { getNearbyCameraByPileNum } from '@/api/camera/camera' |
|
|
|
import { getBoardDeviceInfo } from "@/api/board/board"; |
|
|
|
import { getNearbyCameraByPileNum } from "@/api/camera/camera"; |
|
|
|
|
|
|
|
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue" |
|
|
|
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue" |
|
|
|
import BoardInfoEditor from '@screen/components/infoBoard/BoardInfoEditor' |
|
|
|
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"; |
|
|
|
import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue"; |
|
|
|
import BoardInfoEditor from "@screen/components/infoBoard/BoardInfoEditor"; |
|
|
|
|
|
|
|
import vuescroll from 'vuescroll' |
|
|
|
import scrollOptions from '@/common/scrollbar.js' |
|
|
|
import Teleport from '@screen/components/Teleport.vue' |
|
|
|
import vuescroll from "vuescroll"; |
|
|
|
import scrollOptions from "@/common/scrollbar.js"; |
|
|
|
import Teleport from "@screen/components/Teleport.vue"; |
|
|
|
|
|
|
|
import { getTemplateList } from '@/api/board/template' |
|
|
|
import { getTemplateList } from "@/api/board/template"; |
|
|
|
|
|
|
|
import testDeviceInfo from "@screen/testData/infoBoard.js" |
|
|
|
import testDeviceInfo from "@screen/testData/infoBoard.js"; |
|
|
|
|
|
|
|
import CameraShower from '@screen/components/CameraShower' |
|
|
|
import CameraShower from "@screen/components/CameraShower"; |
|
|
|
|
|
|
|
import InfoBoard from '@screen/mixins/InfoBoard' |
|
|
|
import InfoBoard from "@screen/mixins/InfoBoard"; |
|
|
|
export default { |
|
|
|
name: 'InfoBoard', |
|
|
|
mixins:[InfoBoard], |
|
|
|
name: "InfoBoard", |
|
|
|
mixins: [InfoBoard], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isShowTemplate: false, |
|
|
|
@ -148,24 +244,24 @@ export default { |
|
|
|
tabDataInfoList: [], |
|
|
|
cameraDataVideoList: [], |
|
|
|
cameraDataList: [ |
|
|
|
{ id: 3001, txt: '设备名称', val: '疲劳唤醒设备1' }, |
|
|
|
{ id: 3002, txt: '设备编号', val: 'G00030497B0180001' }, |
|
|
|
{ id: 3003, txt: '设备桩号', val: 'K097+900' }, |
|
|
|
{ id: 3004, txt: '经/纬度', val: '117.071152/35.910659' }, |
|
|
|
{ id: 3005, txt: '道路名称', val: 'G35济菏高速' }, |
|
|
|
{ id: 3006, txt: '道路状况', val: '正常' }, |
|
|
|
{ id: 3007, txt: '方向', val: '菏泽' } |
|
|
|
{ id: 3001, txt: "设备名称", val: "疲劳唤醒设备1" }, |
|
|
|
{ id: 3002, txt: "设备编号", val: "G00030497B0180001" }, |
|
|
|
{ id: 3003, txt: "设备桩号", val: "K097+900" }, |
|
|
|
{ id: 3004, txt: "经/纬度", val: "117.071152/35.910659" }, |
|
|
|
{ id: 3005, txt: "道路名称", val: "G35济菏高速" }, |
|
|
|
{ id: 3006, txt: "道路状况", val: "正常" }, |
|
|
|
{ id: 3007, txt: "方向", val: "菏泽" }, |
|
|
|
], |
|
|
|
cameraBtnList: [ |
|
|
|
{ id: 4001, cmd: 23, dir: 'left', le: '26%', to: '33%', ro: 0 }, |
|
|
|
{ id: 4002, cmd: 21, dir: 'up', le: '46%', to: '4%', ro: 90 }, |
|
|
|
{ id: 4003, cmd: 24, dir: 'right', le: '65%', to: '33%', ro: 180 }, |
|
|
|
{ id: 4004, cmd: 22, dir: 'downward', le: '46%', to: '62%', ro: 267 } |
|
|
|
{ id: 4001, cmd: 23, dir: "left", le: "26%", to: "33%", ro: 0 }, |
|
|
|
{ id: 4002, cmd: 21, dir: "up", le: "46%", to: "4%", ro: 90 }, |
|
|
|
{ id: 4003, cmd: 24, dir: "right", le: "65%", to: "33%", ro: 180 }, |
|
|
|
{ id: 4004, cmd: 22, dir: "downward", le: "46%", to: "62%", ro: 267 }, |
|
|
|
], |
|
|
|
cameraControlList: [ |
|
|
|
{ id: 5001, txt: '变倍', numL: 11, numR: 12 }, |
|
|
|
{ id: 5002, txt: '光圈', numL: 16, numR: 15 }, |
|
|
|
{ id: 5003, txt: '聚焦', numL: 14, numR: 13 } |
|
|
|
{ id: 5001, txt: "变倍", numL: 11, numR: 12 }, |
|
|
|
{ id: 5002, txt: "光圈", numL: 16, numR: 15 }, |
|
|
|
{ id: 5003, txt: "聚焦", numL: 14, numR: 13 }, |
|
|
|
], |
|
|
|
|
|
|
|
selectedBdMsg: [], |
|
|
|
@ -174,50 +270,53 @@ export default { |
|
|
|
mode: "", |
|
|
|
type: "", |
|
|
|
visible: false, |
|
|
|
tpl: {} |
|
|
|
tpl: {}, |
|
|
|
}, |
|
|
|
scrollOptions, |
|
|
|
templateAvailable: null, |
|
|
|
tplCategory: [], //模板 |
|
|
|
templateAll: [], |
|
|
|
nearbyCameraList:[] |
|
|
|
} |
|
|
|
nearbyCameraList: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
props: { |
|
|
|
visible: { |
|
|
|
type: Boolean, |
|
|
|
default: false |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
selectedDevice: { |
|
|
|
type: Object, |
|
|
|
default: null |
|
|
|
} |
|
|
|
default: null, |
|
|
|
}, |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
selectedDevice: { |
|
|
|
handler(newV) { |
|
|
|
this.____initData(); |
|
|
|
}, |
|
|
|
immediate: true |
|
|
|
} |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
components: { BoardPreview, BoardTplPreview, BoardInfoEditor, vuescroll, Teleport, |
|
|
|
CameraShower |
|
|
|
}, |
|
|
|
components: { |
|
|
|
BoardPreview, |
|
|
|
BoardTplPreview, |
|
|
|
BoardInfoEditor, |
|
|
|
vuescroll, |
|
|
|
Teleport, |
|
|
|
CameraShower, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
// this.____getTemplateCategory(); |
|
|
|
// this.____getAllTemplate(); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
mounted() {}, |
|
|
|
methods: { |
|
|
|
// 获取信息模板分类 |
|
|
|
____getTemplateCategory() { |
|
|
|
return this.getDicts('iot_template_category').then(res => { |
|
|
|
return this.getDicts("iot_template_category").then((res) => { |
|
|
|
this.tplCategory = res.data; |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
//获取全部模版 |
|
|
|
____getAllTemplate() { |
|
|
|
@ -227,51 +326,54 @@ export default { |
|
|
|
}, |
|
|
|
//初始化数据 |
|
|
|
____initData() { |
|
|
|
this.selectedSize = JSON.parse(this.selectedDevice.otherConfig).screenSize; |
|
|
|
if(this.tplCategory.length && this.templateAll.length){ |
|
|
|
this.selectedSize = JSON.parse( |
|
|
|
this.selectedDevice.otherConfig |
|
|
|
).screenSize; |
|
|
|
if (this.tplCategory.length && this.templateAll.length) { |
|
|
|
this.____setAvailableTemplate(); |
|
|
|
}else{ |
|
|
|
Promise.all([this.____getTemplateCategory(), this.____getAllTemplate()]).then(res=>{ |
|
|
|
} else { |
|
|
|
Promise.all([ |
|
|
|
this.____getTemplateCategory(), |
|
|
|
this.____getAllTemplate(), |
|
|
|
]).then((res) => { |
|
|
|
this.____setAvailableTemplate(); |
|
|
|
}) |
|
|
|
}); |
|
|
|
} |
|
|
|
|
|
|
|
this.____getDeviceInfo(); |
|
|
|
}, |
|
|
|
// 获取已选中设备的展示内容 |
|
|
|
____getDeviceInfo(){ |
|
|
|
____getDeviceInfo() { |
|
|
|
if (IS_TESTING) { |
|
|
|
|
|
|
|
this.selectedBdMsg = _.cloneDeep(testDeviceInfo.data["3A"].content); |
|
|
|
|
|
|
|
}else{ |
|
|
|
getBoardDeviceInfo(this.selectedDevice.iotDeviceId).then(res => { |
|
|
|
} else { |
|
|
|
getBoardDeviceInfo(this.selectedDevice.iotDeviceId) |
|
|
|
.then((res) => { |
|
|
|
this.selectedBdMsg = res.data["3A"].content; |
|
|
|
}).catch(err => { |
|
|
|
|
|
|
|
}) |
|
|
|
.catch((err) => {}); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 设置当前设备可用的模板 |
|
|
|
____setAvailableTemplate() { |
|
|
|
this.templateAvailable = []; |
|
|
|
this.tplCategory.forEach((item, index) => { |
|
|
|
let arr = this.templateAll['' + index]; |
|
|
|
let arr = this.templateAll["" + index]; |
|
|
|
if (arr.length > 0) { |
|
|
|
let temp = []; |
|
|
|
arr.forEach(tpl => { |
|
|
|
arr.forEach((tpl) => { |
|
|
|
if (tpl.screenSize == this.selectedSize) { |
|
|
|
temp.push(tpl); |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
if (temp.length > 0) { |
|
|
|
this.templateAvailable.push({ |
|
|
|
...item, |
|
|
|
list: temp |
|
|
|
list: temp, |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
//调用编辑器编辑设备展示项 |
|
|
|
____onEditBoardItem(tpl, index) { |
|
|
|
@ -282,17 +384,17 @@ export default { |
|
|
|
visible: true, |
|
|
|
mode: "edit", |
|
|
|
type: "device", |
|
|
|
tpl |
|
|
|
} |
|
|
|
tpl, |
|
|
|
}; |
|
|
|
}, |
|
|
|
//删除设备展示项 |
|
|
|
//删除设备展示项 |
|
|
|
____onDeleteBoardItem(index) { |
|
|
|
if (index > -1) { |
|
|
|
this.selectedBdMsg.splice(index, 1) |
|
|
|
this.$message.success('删除成功。') |
|
|
|
this.selectedBdMsg.splice(index, 1); |
|
|
|
this.$message.success("删除成功。"); |
|
|
|
} |
|
|
|
}, |
|
|
|
//编辑机编辑后的回调 |
|
|
|
//编辑机编辑后的回调 |
|
|
|
____onEditSubmit(para) { |
|
|
|
this.editDialog.tpl = {}; |
|
|
|
this.editDialog.visible = false; |
|
|
|
@ -310,85 +412,93 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
____refreshPageData(para) { }, |
|
|
|
____refreshPageData(para) {}, |
|
|
|
|
|
|
|
____getNearbyCams() { |
|
|
|
if(!this.selectedDevice.stakeMark){ |
|
|
|
if (!this.selectedDevice.stakeMark) { |
|
|
|
this.$message.warning("设备缺少stakeMark字段..."); |
|
|
|
} |
|
|
|
let stakeMark = this.selectedDevice.stakeMark; |
|
|
|
|
|
|
|
// stakeMark = "K64+300"; |
|
|
|
|
|
|
|
getNearbyCameraByPileNum(stakeMark).then(res=>{ |
|
|
|
getNearbyCameraByPileNum(stakeMark).then((res) => { |
|
|
|
this.nearbyCameraList = res.data; |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
cameraControlBtnFn(item) { |
|
|
|
this.getEnergyCameraControlFn(item.cmd, 5) |
|
|
|
this.getEnergyCameraControlFn(item.cmd, 5); |
|
|
|
}, |
|
|
|
cameraControlLeFn(item) { |
|
|
|
// console.log('按钮点击事件', item) |
|
|
|
this.getEnergyCameraControlFn(item, 5) |
|
|
|
this.getEnergyCameraControlFn(item, 5); |
|
|
|
}, |
|
|
|
getEnergyCameraControlFn(cmd, spe) { |
|
|
|
getEnergyCameraControlAPi({ camId: this.cameraVal, cmdType: cmd, speed: spe }).then(res => { |
|
|
|
getEnergyCameraControlAPi({ |
|
|
|
camId: this.cameraVal, |
|
|
|
cmdType: cmd, |
|
|
|
speed: spe, |
|
|
|
}).then((res) => { |
|
|
|
// console.log('控制返回结果', res) |
|
|
|
// this.videoUrl = res.data.liveUrl |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
cameraValChangeFn() { |
|
|
|
console.log('点击切换按钮', this.cameraVal) |
|
|
|
this.cameraValCha(this.cameraOptList, this.cameraVal) |
|
|
|
console.log("点击切换按钮", this.cameraVal); |
|
|
|
this.cameraValCha(this.cameraOptList, this.cameraVal); |
|
|
|
}, |
|
|
|
// cameraDataVideoList |
|
|
|
cameraValCha(date, num) { |
|
|
|
let str = { |
|
|
|
0: '正常', |
|
|
|
1: '网络中断', |
|
|
|
2: '网络正常无图像', |
|
|
|
3: '有图像图可能存在问题' |
|
|
|
} |
|
|
|
date.forEach(i => { |
|
|
|
0: "正常", |
|
|
|
1: "网络中断", |
|
|
|
2: "网络正常无图像", |
|
|
|
3: "有图像图可能存在问题", |
|
|
|
}; |
|
|
|
date.forEach((i) => { |
|
|
|
if (i.camId === num) { |
|
|
|
this.cameraDataVideoList = [ |
|
|
|
{ id: 3001, txt: '设备名称', val: i.camName }, |
|
|
|
{ id: 3002, txt: '设备编号', val: i.camId }, |
|
|
|
{ id: 3003, txt: '设备桩号', val: i.pileNum }, |
|
|
|
{ id: 3005, txt: '道路名称', val: i.deptName }, |
|
|
|
{ id: 3006, txt: '道路状况', val: i.status == '-1' ? '未启用' : str[Number(i.status)] } |
|
|
|
] |
|
|
|
{ id: 3001, txt: "设备名称", val: i.camName }, |
|
|
|
{ id: 3002, txt: "设备编号", val: i.camId }, |
|
|
|
{ id: 3003, txt: "设备桩号", val: i.pileNum }, |
|
|
|
{ id: 3005, txt: "道路名称", val: i.deptName }, |
|
|
|
{ |
|
|
|
id: 3006, |
|
|
|
txt: "道路状况", |
|
|
|
val: i.status == "-1" ? "未启用" : str[Number(i.status)], |
|
|
|
}, |
|
|
|
]; |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
}, |
|
|
|
tabClickFn(tab, event) { |
|
|
|
console.log(tab, event) |
|
|
|
console.log(tab, event); |
|
|
|
}, |
|
|
|
____onClose() { |
|
|
|
this.$emit("update:visible", false); |
|
|
|
this.isShowTemplate = false |
|
|
|
this.isShowTemplate = false; |
|
|
|
}, |
|
|
|
____onShowTemplate() { |
|
|
|
if (this.dialogInfoCamera) { |
|
|
|
this.dialogInfoCamera = false |
|
|
|
this.dialogInfoCamera = false; |
|
|
|
} |
|
|
|
this.isShowTemplate = !this.isShowTemplate |
|
|
|
this.isShowTemplate = !this.isShowTemplate; |
|
|
|
}, |
|
|
|
____onShowCameraShower() { |
|
|
|
if (this.isShowTemplate) { |
|
|
|
this.isShowTemplate = false |
|
|
|
this.isShowTemplate = false; |
|
|
|
} |
|
|
|
this.dialogInfoCamera = !this.dialogInfoCamera |
|
|
|
this.dialogInfoCamera = !this.dialogInfoCamera; |
|
|
|
this.____getNearbyCams(); |
|
|
|
}, |
|
|
|
subjectBtnFn(item) { |
|
|
|
this.subjectBtn = item.id |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
this.subjectBtn = item.id; |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.listBox { |
|
|
|
padding: 20px; |
|
|
|
|
|
|
|
@ -406,7 +516,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.infoBtnBox { |
|
|
|
&.infoBtnBoxSm{ |
|
|
|
&.infoBtnBoxSm { |
|
|
|
width: 60px; |
|
|
|
} |
|
|
|
width: 110px; |
|
|
|
@ -457,7 +567,6 @@ export default { |
|
|
|
color: #ccc; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.controlBox { |
|
|
|
@ -481,7 +590,7 @@ export default { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
background: rgba(0, 0, 0, .36); |
|
|
|
background: rgba(0, 0, 0, 0.36); |
|
|
|
z-index: 1100; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
@ -504,14 +613,14 @@ export default { |
|
|
|
background-color: #114c66; |
|
|
|
position: relative; |
|
|
|
margin-top: 50px; |
|
|
|
&.camera{ |
|
|
|
&.camera { |
|
|
|
width: 540px; |
|
|
|
height: 556px; |
|
|
|
} |
|
|
|
&.template{ |
|
|
|
&.template { |
|
|
|
width: 430px; |
|
|
|
height: 556px; |
|
|
|
padding:20px 0 20px 10px; |
|
|
|
padding: 20px 0 20px 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -519,7 +628,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 48px; |
|
|
|
padding: 0 10px; |
|
|
|
background-image: url('~@/assets/screen/xtb/qbbtit.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/qbbtit.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
@ -600,21 +709,21 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.dialogContent_r_btn1 { |
|
|
|
background-image: url('~@/assets/screen/xtb/gg.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/gg.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
.dialogContent_r_btn2 { |
|
|
|
background-image: url('~@/assets/screen/xtb/xx.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/xx.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
} |
|
|
|
|
|
|
|
.dialogContent_r_btn3 { |
|
|
|
background-image: url('~@/assets/screen/xtb/zz.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/zz.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
@ -794,7 +903,7 @@ export default { |
|
|
|
left: 27%; |
|
|
|
top: 33%; |
|
|
|
cursor: pointer; |
|
|
|
background-image: url('~@/assets/screen/xtb/xjleft.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/xjleft.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
@ -811,7 +920,7 @@ export default { |
|
|
|
width: 1.2vw; |
|
|
|
height: 2.4vh; |
|
|
|
border-radius: 50%; |
|
|
|
background-image: url('~@/assets/screen/xtb/jhbtn.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/jhbtn.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
@ -826,7 +935,7 @@ export default { |
|
|
|
width: 1.2vw; |
|
|
|
height: 2.4vh; |
|
|
|
border-radius: 50%; |
|
|
|
background-image: url('~@/assets/screen/xtb/addbtn.png'); |
|
|
|
background-image: url("~@/assets/screen/xtb/addbtn.png"); |
|
|
|
background-size: 100% 100%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-position: center; |
|
|
|
|
qingzhengli
12 months ago