Joe
1 year ago
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