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