12 changed files with 579 additions and 73 deletions
@ -0,0 +1,115 @@ |
|||||
|
<template> |
||||
|
<div class='CustomControlVideo'> |
||||
|
<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 controls class="videoStream" :camId="camId" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Video from "@screen/components/Video" |
||||
|
|
||||
|
export default { |
||||
|
name: 'CustomControlVideo', |
||||
|
components: { |
||||
|
Video |
||||
|
}, |
||||
|
props: { |
||||
|
camId: { |
||||
|
type: String, |
||||
|
default: null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.CustomControlVideo { |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,64 @@ |
|||||
|
<template> |
||||
|
<ElRadio v-bind="getBind" v-on="$listeners" class="Radio"> |
||||
|
<slot /> |
||||
|
</ElRadio> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Radio', |
||||
|
props: {}, |
||||
|
computed: { |
||||
|
getBind() { |
||||
|
return { |
||||
|
border: true, |
||||
|
...this.$attrs |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
label.Radio { |
||||
|
border-color: rgba(96, 223, 254, .5); |
||||
|
border: 0; |
||||
|
// padding: 0; |
||||
|
// display: inline-flex; |
||||
|
// align-items: center; |
||||
|
// justify-content: center; |
||||
|
// height: 27px; |
||||
|
// padding: 0 6px; |
||||
|
// margin: 0 3px !important; |
||||
|
|
||||
|
&.is-checked { |
||||
|
border-color: rgba(0, 0, 0, 0); |
||||
|
// background: var(--active-color); |
||||
|
} |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-radio__input { |
||||
|
.el-radio__inner { |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
border: 1px solid #3DE8FF; |
||||
|
width: 15px; |
||||
|
height: 15px; |
||||
|
|
||||
|
&::after { |
||||
|
background-color: #3DE8FF; |
||||
|
width: 9px; |
||||
|
height: 9px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-radio__label { |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC, PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
padding-left: 3px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,111 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="modelVisible" title="设备操作"> |
||||
|
<div class='DeviceControlDialog'> |
||||
|
<Form class="form" ref="FormConfigRef" :formList="formList" column="1" style="flex: 1;" labelWidth="90px" /> |
||||
|
|
||||
|
<div class="footer"> |
||||
|
<Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false"> |
||||
|
取消 |
||||
|
</Button> |
||||
|
<Button @click.native="handleSearch"> |
||||
|
确定 |
||||
|
</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
import Form from '@screen/components/FormConfig'; |
||||
|
|
||||
|
import { cloneDeep } from "lodash" |
||||
|
|
||||
|
export default { |
||||
|
name: 'DeviceControlDialog', |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Form |
||||
|
}, |
||||
|
model: { |
||||
|
prop: 'visible', |
||||
|
event: "update:value" |
||||
|
}, |
||||
|
props: { |
||||
|
visible: Boolean |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
formList: [ |
||||
|
{ |
||||
|
label: "类型:", |
||||
|
key: "key291", |
||||
|
type: "RadioGroup", |
||||
|
isAlone: true, |
||||
|
required: true, |
||||
|
options: { |
||||
|
type: 'circle', |
||||
|
options: [ |
||||
|
{ |
||||
|
key: "手动控制", |
||||
|
label: "手动控制", |
||||
|
}, |
||||
|
{ |
||||
|
key: "自动控制", |
||||
|
label: "自动控制", |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: "工作状态:", |
||||
|
key: "key999", |
||||
|
type: "select", |
||||
|
}, |
||||
|
{ |
||||
|
label: "选择时间:", |
||||
|
key: "key009", |
||||
|
type: "datePicker", |
||||
|
options: { |
||||
|
type: "daterange", |
||||
|
}, |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
modelVisible: { |
||||
|
get() { |
||||
|
return this.visible |
||||
|
}, |
||||
|
set(val) { |
||||
|
this.$emit('update:value', val) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSearch() { |
||||
|
const result = cloneDeep(this.$refs.FormConfigRef?.formData); |
||||
|
} |
||||
|
}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DeviceControlDialog { |
||||
|
width: 360px; |
||||
|
height: 150px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 15px; |
||||
|
|
||||
|
.footer { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
gap: 9px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,129 @@ |
|||||
|
<template> |
||||
|
<Dialog v-model="obverseVisible" title="行车诱导"> |
||||
|
<div class="DrivingGuidance"> |
||||
|
<CustomControlVideo class="camera-video" /> |
||||
|
|
||||
|
<ElTabs v-model="activeName" @tab-click="handleClickTabs" class="tabs"> |
||||
|
<ElTabPane label="详细设计" name="first"> |
||||
|
<Descriptions :list="list" :data="data" style="gap: 18px" /> |
||||
|
</ElTabPane> |
||||
|
<ElTabPane label="设备参数" name="second">摄相机参数</ElTabPane> |
||||
|
</ElTabs> |
||||
|
|
||||
|
<div class="bottom"> |
||||
|
<Button @click.native="deviceControlVisible = true">设备操作</Button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<DeviceControlDialog v-model="deviceControlVisible" /> |
||||
|
</Dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Dialog from "@screen/components/Dialog/index.vue"; |
||||
|
import Button from "@screen/components/Buttons/Button.vue" |
||||
|
import Descriptions from '@screen/components/Descriptions.vue'; |
||||
|
import CustomControlVideo from '@screen/components/CustomControlVideo/index.vue'; |
||||
|
import DeviceControlDialog from "./components/DeviceControlDialog.vue" |
||||
|
|
||||
|
import { dialogDelayVisible } from "./../mixin" |
||||
|
|
||||
|
// 摄像机 G35 K094+079 |
||||
|
export default { |
||||
|
name: 'DrivingGuidance', |
||||
|
mixins: [dialogDelayVisible], |
||||
|
components: { |
||||
|
Dialog, |
||||
|
Button, |
||||
|
Descriptions, |
||||
|
CustomControlVideo, |
||||
|
DeviceControlDialog |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeName: 'first', |
||||
|
deviceControlVisible: true, |
||||
|
data: { |
||||
|
deviceType: "行车诱导", |
||||
|
deviceStation: "k094+079", |
||||
|
roadName: "G35济泽高速", |
||||
|
deviceDirection: "济南方向", |
||||
|
deviceStatus: "在线", |
||||
|
deviceVendors: "XXX厂家", |
||||
|
}, |
||||
|
list: [ |
||||
|
{ |
||||
|
label: '设备类型', |
||||
|
key: "deviceType", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备桩号', |
||||
|
key: "deviceStation", |
||||
|
}, |
||||
|
{ |
||||
|
label: '道路名称', |
||||
|
key: "roadName", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备方向', |
||||
|
key: "deviceDirection", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备状态', |
||||
|
key: "deviceStatus", |
||||
|
}, |
||||
|
{ |
||||
|
label: '设备厂商', |
||||
|
key: "deviceVendors", |
||||
|
}, |
||||
|
] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleClickTabs() { } |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.DrivingGuidance { |
||||
|
width: 600px; |
||||
|
height: 510px; |
||||
|
color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.camera-video { |
||||
|
flex: 1.5; |
||||
|
} |
||||
|
|
||||
|
.tabs { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
::v-deep { |
||||
|
.el-tabs__content { |
||||
|
flex: 1; |
||||
|
|
||||
|
.el-tab-pane { |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bottom { |
||||
|
margin-top: 12px; |
||||
|
display: flex; |
||||
|
gap: 9px; |
||||
|
align-items: center; |
||||
|
justify-content: end; |
||||
|
|
||||
|
>div { |
||||
|
font-size: 16px; |
||||
|
padding: 6px 12px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue