1 changed files with 0 additions and 369 deletions
@ -1,369 +0,0 @@ |
|||
<template> |
|||
<Dialog v-model="obverseVisible" title="摄像机设备"> |
|||
<div class="ControlCamera"> |
|||
<div class="camera-video"> |
|||
<div class="control-btns"> |
|||
<div class="left"> |
|||
<div class="radio"> |
|||
<span>图像</span> |
|||
<span class="active">视频</span> |
|||
</div> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="btn">2X</div> |
|||
<div class="btn">全屏</div> |
|||
</div> |
|||
</div> |
|||
<Video class="videoStream" :camId="dialogData.iotDeviceId" /> |
|||
</div> |
|||
|
|||
<div class="content"> |
|||
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
|||
<div class="dash-line"></div> |
|||
<div class="right"> |
|||
<div class="direction"> |
|||
<img class="top" src="./images/top.svg" @click="controlClick(21)"> |
|||
<img class="right" src="./images/right.svg" @click="controlClick(24)"> |
|||
<div class="center"></div> |
|||
<img class="bottom" src="./images/bottom.svg" @click="controlClick(22)"> |
|||
<img class="left" src="./images/left.svg" @click="controlClick(23)"> |
|||
</div> |
|||
|
|||
<div class="options"> |
|||
<div v-for="item in options" :key="item.key"> |
|||
<img src="./images/sub.svg" @click="controlClick(item.sub)"> |
|||
<span>{{ item.label }}</span> |
|||
<img src="./images/add.svg" @click="controlClick(item.add)"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="bottom"> |
|||
<Button style="background: #00B3CC;">云台控制</Button> |
|||
</div> |
|||
</div> |
|||
</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"; |
|||
import Descriptions from '@screen/components/Descriptions.vue'; |
|||
|
|||
import { dialogDelayVisible } from "./../mixin" |
|||
import { controlCamera } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
|||
import { throttle } from "lodash" |
|||
|
|||
import { getRoadInfoByStakeMark } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js" |
|||
|
|||
export default { |
|||
name: 'ControlCamera', |
|||
mixins: [dialogDelayVisible], |
|||
components: { |
|||
Dialog, |
|||
Button, |
|||
Video, |
|||
Descriptions |
|||
}, |
|||
data() { |
|||
return { |
|||
// statusEnum: CameraStatusEnum[this.dialogData.status] || {}, |
|||
// cameraDirection: CameraDirectionEnum[this.dialogData.camOrientation]?.text, |
|||
data: { |
|||
direction: 1, |
|||
longitude: 'longitude2', |
|||
latitude: 'latitude2', |
|||
}, |
|||
list: [ |
|||
{ |
|||
label: '设备名称', |
|||
key: "deviceName", |
|||
}, |
|||
{ |
|||
label: '设备编号', |
|||
key: "deviceCode", |
|||
}, |
|||
{ |
|||
label: '设备桩号', |
|||
key: "stakeMarkId", |
|||
}, |
|||
{ |
|||
label: '设备方向', |
|||
key: "direction", |
|||
enum: "CameraDirectionEnum" |
|||
}, |
|||
{ |
|||
label: '经/纬度', |
|||
key: "${longitude} / ${latitude}", |
|||
}, |
|||
{ |
|||
label: '道路名称', |
|||
key: "roadName", |
|||
}, |
|||
{ |
|||
label: '设备状态', |
|||
key: "deviceState", |
|||
enum: "DeviceTypeEnum" |
|||
}, |
|||
], |
|||
options: [ |
|||
{ |
|||
label: "变倍", |
|||
key: "zoom", |
|||
add: "12", |
|||
sub: "11" |
|||
}, |
|||
{ |
|||
label: "光圈", |
|||
key: "aperture", |
|||
add: "15", |
|||
sub: "16" |
|||
}, |
|||
{ |
|||
label: "聚焦", |
|||
key: "focus", |
|||
add: "13", |
|||
sub: "14" |
|||
}, |
|||
] |
|||
} |
|||
}, |
|||
async created() { |
|||
this.data = { ...this.dialogData, roadName: null } |
|||
|
|||
const roadInfo = await getRoadInfoByStakeMark(this.dialogData.stakeMarkId); |
|||
|
|||
if (roadInfo) this.data.roadName = roadInfo.roadName; |
|||
}, |
|||
methods: { |
|||
controlClick: throttle(function (type) { |
|||
controlCamera(this.dialogData.iotDeviceId, type) |
|||
}, 360) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.ControlCamera { |
|||
height: 510px; |
|||
width: 660px; |
|||
|
|||
font-size: 16px; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
line-height: 19px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.camera-video { |
|||
position: relative; |
|||
flex: 1; |
|||
// background-color: #19E1B1; |
|||
|
|||
.videoStream { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.control-btns { |
|||
z-index: 1; |
|||
position: absolute; |
|||
padding: 6px 9px; |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.left, |
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 9px; |
|||
} |
|||
|
|||
.radio { |
|||
background: #265A70; |
|||
border-radius: 41px 41px 41px 41px; |
|||
overflow: hidden; |
|||
opacity: 1; |
|||
border: 1px solid #3DE8FF; |
|||
font-size: 12px; |
|||
// font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 14px; |
|||
height: fit-content; |
|||
|
|||
// -webkit-background-clip: text; |
|||
// -webkit-text-fill-color: transparent; |
|||
|
|||
.active { |
|||
background-color: rgba(61, 232, 255, 1); |
|||
} |
|||
|
|||
span { |
|||
background-color: rgba(38, 90, 112, 1); |
|||
padding: 4px 9px; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
|
|||
&:hover { |
|||
background-color: rgba(61, 232, 255, 1); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn { |
|||
background: #265A70; |
|||
border-radius: 6px 6px 6px 6px; |
|||
opacity: 1; |
|||
border: 1px solid #3DE8FF; |
|||
font-size: 12px; |
|||
// font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
line-height: 14px; |
|||
padding: 3px 9px; |
|||
cursor: pointer; |
|||
// -webkit-background-clip: text; |
|||
// -webkit-text-fill-color: transparent; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
flex: 0.9; |
|||
display: flex; |
|||
|
|||
.left { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
gap: 15px; |
|||
|
|||
.color1 { |
|||
color: #19E1B1; |
|||
} |
|||
|
|||
>div { |
|||
display: flex; |
|||
gap: 24px; |
|||
align-items: center; |
|||
|
|||
&>:last-child { |
|||
|
|||
&>:first-child { |
|||
width: 51px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.desc-item { |
|||
&>:first-child { |
|||
color: #3DE8FF; |
|||
display: inline-block; |
|||
width: 81px; |
|||
} |
|||
|
|||
&>:last-child {} |
|||
} |
|||
} |
|||
|
|||
.dash-line { |
|||
padding: 0 9px; |
|||
position: relative; |
|||
|
|||
&::after { |
|||
content: ""; |
|||
position: absolute; |
|||
height: 100%; |
|||
border-right: 1px dashed #ccc; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
flex: 1; |
|||
|
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
gap: 36px; |
|||
|
|||
img { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.direction { |
|||
display: grid; |
|||
grid-template-columns: 0.3fr 1fr 0.3fr; |
|||
grid-template-rows: 0.3fr 1fr 0.3fr; |
|||
align-items: center; |
|||
justify-items: center; |
|||
|
|||
gap: 3px; |
|||
|
|||
|
|||
.top { |
|||
grid-area: 1/2/1/2; |
|||
} |
|||
|
|||
.right { |
|||
grid-area: 2/3/2/3; |
|||
} |
|||
|
|||
.bottom { |
|||
grid-area: 3/2/3/2; |
|||
} |
|||
|
|||
.left { |
|||
grid-area: 2/1/2/1; |
|||
} |
|||
|
|||
.center { |
|||
grid-area: 2/2/2/2; |
|||
|
|||
width: 66px; |
|||
height: 66px; |
|||
background: #006A96; |
|||
border-radius: 50%; |
|||
opacity: 1; |
|||
border: 1px solid #3DE8FF |
|||
} |
|||
} |
|||
|
|||
.options { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
gap: 18px; |
|||
|
|||
>div { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 9px |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.bottom { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: end; |
|||
|
|||
>div { |
|||
font-size: 16px; |
|||
padding: 6px 9px; |
|||
} |
|||
|
|||
gap: 9px; |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue