22 changed files with 698 additions and 114 deletions
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,168 @@ |
|||||
|
<template> |
||||
|
<Dialog v-if="data" v-model="visibleModel" :title="data.deviceName" width="600px"> |
||||
|
<div v-for="(itm, indx) in selectedBdMsg" :key="indx" class="tplItem"> |
||||
|
|
||||
|
<BoardPreview class="boardPreview" :boardWH="selectedSize" :tpl="itm"></BoardPreview> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
|
||||
|
import BoardPreview from "@screen/components/infoBoard/BoardPreview.vue"; |
||||
|
import request from "@/utils/request"; |
||||
|
import { getBoardDeviceInfo } from "@/api/board/board"; |
||||
|
|
||||
|
export default { |
||||
|
name: "DialogBoard", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
BoardPreview, |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
data() { |
||||
|
return { |
||||
|
selectedBdMsg:[], |
||||
|
selectedSize:null |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
const deviceFrom = this.data; |
||||
|
if(deviceFrom.otherConfig){ |
||||
|
this.selectedSize = JSON.parse(deviceFrom.otherConfig).screenSize |
||||
|
|
||||
|
} |
||||
|
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; |
||||
|
|
||||
|
}) |
||||
|
.catch((err) => { }); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,64 @@ |
|||||
|
<template> |
||||
|
<Dialog v-if="data" v-model="visibleModel" :title="data.deviceName" width="600px"> |
||||
|
<Video class="video-stream" :camId="data.iotDeviceId" /> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue"; |
||||
|
|
||||
|
import Video from "@screen/components/Video/Video.vue" |
||||
|
import request from "@/utils/request"; |
||||
|
import { getBoardDeviceInfo } from "@/api/board/board"; |
||||
|
|
||||
|
export default { |
||||
|
name: "DialogCamera", |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Video |
||||
|
}, |
||||
|
props: { |
||||
|
visible: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: null, |
||||
|
}, |
||||
|
}, |
||||
|
emit: ["close"], |
||||
|
data() { |
||||
|
return { |
||||
|
selectedBdMsg:[], |
||||
|
selectedSize:null |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
visibleModel: { |
||||
|
get() { |
||||
|
if (this.visible) this.getData(); |
||||
|
return this.visible; |
||||
|
}, |
||||
|
set(bool) { |
||||
|
this.$emit("close", bool); |
||||
|
}, |
||||
|
}, |
||||
|
}, |
||||
|
methods: { |
||||
|
getData() { |
||||
|
|
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.video-stream { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue