24 changed files with 609 additions and 434 deletions
@ -1,54 +0,0 @@ |
|||
<template> |
|||
<ElInput class='FormInput' v-bind="getBind" v-on="$listeners" /> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'FormInput', |
|||
computed: { |
|||
getBind() { |
|||
return { |
|||
placeholder: "请输入", |
|||
...this.$attrs |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.FormInput { |
|||
height: 100%; |
|||
|
|||
::v-deep { |
|||
.el-input__inner { |
|||
background-color: #0D5F79; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
border: 0; |
|||
height: fit-content; |
|||
line-height: unset; |
|||
|
|||
&::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.el-textarea__inner { |
|||
background: #0A3E54; |
|||
border-radius: 5px; |
|||
opacity: 1; |
|||
border: 1px solid rgba(98, 224, 254, .6); |
|||
} |
|||
|
|||
.el-input__count { |
|||
background-color: rgba(0, 0, 0, 0); |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #3DE8FF; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,50 +0,0 @@ |
|||
<template> |
|||
<ElSelect class='FormSelect' v-bind="$attrs" v-on="$listeners"> |
|||
<ElOption v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
|||
<slot></slot> |
|||
</ElOption> |
|||
</ElSelect> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'FormSelect', |
|||
props: { |
|||
// options: { |
|||
// /** |
|||
// * { |
|||
// * value: any; |
|||
// * label: any; |
|||
// * }[] |
|||
// */ |
|||
// type: Array, |
|||
// default: () => [] |
|||
// } |
|||
}, |
|||
data() { |
|||
return { |
|||
options: [{ |
|||
value: '选项1', |
|||
label: '黄金糕' |
|||
}, { |
|||
value: '选项2', |
|||
label: '双皮奶' |
|||
}, { |
|||
value: '选项3', |
|||
label: '蚵仔煎' |
|||
}, { |
|||
value: '选项4', |
|||
label: '龙须面' |
|||
}, { |
|||
value: '选项5', |
|||
label: '北京烤鸭' |
|||
}], |
|||
value: '' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.FormSelect {} |
|||
</style> |
|||
@ -1,131 +0,0 @@ |
|||
<template> |
|||
<ElTimePicker class="TimeSelect" v-bind="getBind" v-on="$listeners" /> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TimeSelect', |
|||
computed: { |
|||
getBind() { |
|||
return { |
|||
placeholder: "请选择时间", |
|||
...this.$attrs |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
body { |
|||
|
|||
.el-time-range-picker.el-popper, |
|||
.el-popper.el-time-panel { |
|||
background: #064258; |
|||
border-radius: 3px; |
|||
border: 0; |
|||
|
|||
.el-time-range-picker__body, |
|||
.el-time-panel__content { |
|||
border-radius: 9px; |
|||
|
|||
&::after { |
|||
border: 0; |
|||
// background-image: url(~@screen/images/active.svg); |
|||
} |
|||
|
|||
&::before { |
|||
border: 0; |
|||
margin-top: -12px; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
background-image: url(~@screen/images/active.svg); |
|||
width: 100%; |
|||
margin-left: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.el-time-spinner__arrow { |
|||
color: #fff; |
|||
} |
|||
|
|||
.el-time-spinner__item { |
|||
color: rgba(0, 209, 255, .51); |
|||
|
|||
&:hover:not(.disabled):not(.active) { |
|||
background-color: unset; |
|||
color: rgba(0, 209, 255, 1); |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
color: rgba(0, 209, 255); |
|||
} |
|||
} |
|||
|
|||
.el-time-range-picker__body { |
|||
border: 1px solid #00B3CC; |
|||
} |
|||
|
|||
.el-time-panel__content { |
|||
&::before { |
|||
margin-top: -15px; |
|||
} |
|||
} |
|||
|
|||
.el-time-range-picker__content { |
|||
.el-time-range-picker__cell { |
|||
|
|||
.el-time-range-picker__header { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-time-panel__footer { |
|||
border-top: 0; |
|||
|
|||
.cancel { |
|||
color: #FFFFFF; |
|||
} |
|||
|
|||
.confirm { |
|||
color: #01B4DE; |
|||
} |
|||
} |
|||
|
|||
.popper__arrow { |
|||
border-bottom-color: #064258; |
|||
|
|||
&::after { |
|||
border-bottom-color: #064258; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang='scss' scoped> |
|||
.TimeSelect { |
|||
::v-deep { |
|||
.el-range-input { |
|||
background-color: #0D5F79; |
|||
} |
|||
|
|||
.el-range-separator { |
|||
color: #56CEFE; |
|||
} |
|||
|
|||
&, |
|||
.el-input__inner { |
|||
background-color: #0D5F79; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
border: 0; |
|||
|
|||
&::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,47 +0,0 @@ |
|||
<template> |
|||
<ElPopover class='Popover' v-bind="getBind" v-on="$listeners"> |
|||
<slot /> |
|||
<template #reference> |
|||
<slot name="reference" /> |
|||
</template> |
|||
</ElPopover> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Popover', |
|||
computed: { |
|||
getBind() { |
|||
return { |
|||
trigger: 'hover', |
|||
placement: "left", |
|||
...this.$attrs, |
|||
popperClass: "Popover-Scope-Screen" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss'> |
|||
div.el-popper.Popover-Scope-Screen { |
|||
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|||
border: 0; |
|||
color: #fff; |
|||
font-size: 14px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #FFFFFF; |
|||
|
|||
div.popper__arrow { |
|||
border-left-color: #00799f; |
|||
|
|||
&::after { |
|||
border-left-color: #00799f; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<style lang='scss' scoped> |
|||
.Popover {} |
|||
</style> |
|||
@ -0,0 +1,28 @@ |
|||
<template> |
|||
<video controls class="video-stream" v-bind="$attrs" ref="videoContainerRef" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import { openVideoStream } from "./videoStream.js" |
|||
|
|||
export default { |
|||
name: 'Video', |
|||
props: { |
|||
camId: { |
|||
type: String, |
|||
default: null |
|||
}, |
|||
url: { |
|||
type: String, |
|||
default: null |
|||
} |
|||
}, |
|||
mounted() { |
|||
openVideoStream(this.$refs.videoContainerRef, { camId: this.camId, url: this.url }) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.video-stream {} |
|||
</style> |
|||
@ -0,0 +1,41 @@ |
|||
import flvJs from "flv.js"; |
|||
import { getCameraStream } from "@screen/pages/Home/components/RoadAndEvents/utils/httpList.js"; |
|||
|
|||
/** |
|||
* |
|||
* @param {HTMLElement} container 容器 |
|||
* @param {{camId?: string; url?: string}?} options {camId: 相机ID; url: 直播地址} |
|||
* @returns |
|||
*/ |
|||
export async function openVideoStream(container, { camId, url } = {}) { |
|||
if (camId) { |
|||
const { code, data } = await getCameraStream(camId).catch(() => ({})); |
|||
|
|||
if (code != 200) return; |
|||
|
|||
url = data.liveUrl; |
|||
} |
|||
|
|||
if (!url) return; |
|||
|
|||
const flvPlayer = flvJs.createPlayer({ |
|||
type: "flv", |
|||
url: url, |
|||
isLive: true, |
|||
hasVideo: true, |
|||
hasAudio: true, |
|||
}); |
|||
|
|||
console.log( |
|||
"%c [ flvPlayer ]-26-「videoStream.js」", |
|||
"font-size:15px; background:#b2b540; color:#f6f984;", |
|||
flvPlayer |
|||
); |
|||
|
|||
flvPlayer.attachMediaElement(container); |
|||
|
|||
flvPlayer.load(); |
|||
flvPlayer.play(); |
|||
|
|||
return flvPlayer; |
|||
} |
|||
@ -1,47 +0,0 @@ |
|||
import flvJs from "flv.js"; |
|||
import { getCameraStream } from "./httpList"; |
|||
|
|||
/** |
|||
* |
|||
* @param {string} camId 相机ID |
|||
* @param {HTMLElement} container 容器 |
|||
* @param {DPlayerOptions?} options 配置项 |
|||
* @returns |
|||
*/ |
|||
export async function openVideoStream(camId, container) { |
|||
const { code, data } = await getCameraStream(camId).catch(() => ({})); |
|||
|
|||
if (code != 200) return; |
|||
|
|||
const flvPlayer = flvJs.createPlayer({ |
|||
type: "flv", |
|||
url: data.liveUrl, |
|||
isLive: true, |
|||
hasVideo: true, |
|||
hasAudio: true, |
|||
}); |
|||
|
|||
console.log( |
|||
"%c [ flvPlayer ]-26-「videoStream.js」", |
|||
"font-size:15px; background:#b2b540; color:#f6f984;", |
|||
flvPlayer |
|||
); |
|||
|
|||
flvPlayer.attachMediaElement(container); |
|||
|
|||
flvPlayer.load(); |
|||
flvPlayer.play(); |
|||
|
|||
return flvPlayer; |
|||
// return new DPlayer({
|
|||
// container,
|
|||
// autoplay: true,
|
|||
// ...options,
|
|||
// hotkey: false,
|
|||
// video: {
|
|||
// url: data.liveUrl,
|
|||
// type: "hls",
|
|||
// // type: "flv",
|
|||
// },
|
|||
// });
|
|||
} |
|||
@ -1,20 +1,37 @@ |
|||
<template> |
|||
<Card class='RealTimeVideo' title="实时视频"> |
|||
RealTimeVideo |
|||
<Video class="item-video" /> |
|||
<Video class="item-video" /> |
|||
</Card> |
|||
</template> |
|||
|
|||
<script> |
|||
import Card from "./../../components/Card.vue" |
|||
|
|||
import Card from "./../../components/Card.vue"; |
|||
import Video from "@screen/components/Video" |
|||
export default { |
|||
name: 'RealTimeVideo', |
|||
components: { |
|||
Card |
|||
Card, |
|||
Video |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.RealTimeVideo {} |
|||
.RealTimeVideo { |
|||
::v-deep { |
|||
.content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
gap: 9px; |
|||
} |
|||
} |
|||
|
|||
.item-video { |
|||
flex: 1; |
|||
width: calc(50% - 4.5px); |
|||
height: 100%; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,15 @@ |
|||
<template> |
|||
<div class='InformationReleaseManagement'> |
|||
InformationReleaseManagement |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'InformationReleaseManagement', |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.InformationReleaseManagement {} |
|||
</style> |
|||
@ -0,0 +1,15 @@ |
|||
<template> |
|||
<div class='PublishingChannelManagement'> |
|||
PublishingChannelManagement |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'PublishingChannelManagement', |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.PublishingChannelManagement {} |
|||
</style> |
|||
@ -0,0 +1,295 @@ |
|||
div.el-popper { |
|||
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|||
color: #fff; |
|||
font-size: 15px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
border: 0; |
|||
|
|||
&[x-placement^="top"] { |
|||
div.popper__arrow { |
|||
border-top-color: #00799f; |
|||
|
|||
&::after { |
|||
border-top-color: #00799f; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="left"] { |
|||
div.popper__arrow { |
|||
border-left-color: #00799f; |
|||
|
|||
&::after { |
|||
border-left-color: #00799f; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="right"] { |
|||
div.popper__arrow { |
|||
border-right-color: #00799f; |
|||
|
|||
&::after { |
|||
border-right-color: #00799f; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="bottom"] { |
|||
div.popper__arrow { |
|||
border-bottom-color: #00799f; |
|||
|
|||
&::after { |
|||
border-bottom-color: #00799f; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
div.el-popper.el-select-dropdown { |
|||
background: #123542; |
|||
box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.08), |
|||
1px 1px 2px 0px rgba(82, 90, 102, 0.04); |
|||
border-radius: 4px; |
|||
|
|||
.el-select-dropdown__list { |
|||
.el-select-dropdown__item { |
|||
font-size: 15px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
color: #fff; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 500; |
|||
/** |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
*/ |
|||
&:hover { |
|||
background: #0d5f79; |
|||
} |
|||
&.hover { |
|||
background: #0d5f79; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&.el-select-dropdown { |
|||
&[x-placement^="top"] { |
|||
div.popper__arrow { |
|||
border-top-color: #1a3442; |
|||
|
|||
&::after { |
|||
border-top-color: #1a3442; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="left"] { |
|||
div.popper__arrow { |
|||
border-left-color: #1a3442; |
|||
|
|||
&::after { |
|||
border-left-color: #1a3442; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="right"] { |
|||
div.popper__arrow { |
|||
border-right-color: #1a3442; |
|||
|
|||
&::after { |
|||
border-right-color: #1a3442; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="bottom"] { |
|||
div.popper__arrow { |
|||
border-bottom-color: #1a3442; |
|||
|
|||
&::after { |
|||
border-bottom-color: #1a3442; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
div.el-scrollbar { |
|||
.el-scrollbar__wrap { |
|||
/** |
|||
overflow: auto; |
|||
*/ |
|||
overflow-x: hidden; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
input.el-input__inner { |
|||
background-color: #0d5f79; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
border: 0; |
|||
height: 100%; |
|||
min-height: fit-content; |
|||
line-height: unset; |
|||
|
|||
&::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
div.el-input { |
|||
input.el-input__inner { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.el-input__suffix { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
} |
|||
div.el-textarea { |
|||
textarea.el-textarea__inner { |
|||
background: #0a3e54; |
|||
border-radius: 5px; |
|||
opacity: 1; |
|||
border: 1px solid rgba(98, 224, 254, 0.6); |
|||
} |
|||
|
|||
.el-input__count { |
|||
background-color: rgba(0, 0, 0, 0); |
|||
font-size: 12px; |
|||
font-family: PingFang SC, PingFang SC; |
|||
font-weight: 400; |
|||
color: #3de8ff; |
|||
line-height: 14px; |
|||
} |
|||
} |
|||
|
|||
div.el-time-panel.el-popper, |
|||
div.el-time-range-picker.el-popper { |
|||
background: #064258; |
|||
border-radius: 3px; |
|||
border: 0; |
|||
|
|||
.el-time-range-picker__body, |
|||
.el-time-panel__content { |
|||
border-radius: 9px; |
|||
|
|||
&::after { |
|||
border: 0; |
|||
} |
|||
|
|||
&::before { |
|||
border: 0; |
|||
margin-top: -12px; |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
background-image: url(~@screen/images/active.svg); |
|||
width: 100%; |
|||
margin-left: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.el-time-spinner__arrow { |
|||
color: #fff; |
|||
} |
|||
|
|||
.el-time-spinner__item { |
|||
color: rgba(0, 209, 255, 0.51); |
|||
|
|||
&:hover:not(.disabled):not(.active) { |
|||
background-color: unset; |
|||
color: rgba(0, 209, 255, 1); |
|||
} |
|||
} |
|||
|
|||
.active { |
|||
color: rgba(0, 209, 255); |
|||
} |
|||
} |
|||
|
|||
.el-time-range-picker__body { |
|||
border: 1px solid #00b3cc; |
|||
} |
|||
|
|||
.el-time-panel__content { |
|||
&::before { |
|||
margin-top: -15px; |
|||
} |
|||
} |
|||
|
|||
.el-time-range-picker__content { |
|||
.el-time-range-picker__cell { |
|||
.el-time-range-picker__header { |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-time-panel__footer { |
|||
border-top: 0; |
|||
|
|||
.cancel { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.confirm { |
|||
color: #01b4de; |
|||
} |
|||
} |
|||
|
|||
.el-range-input { |
|||
background-color: #0d5f79; |
|||
} |
|||
|
|||
.el-range-separator { |
|||
color: #56cefe; |
|||
} |
|||
|
|||
&, |
|||
.el-input__inner { |
|||
background-color: #0d5f79; |
|||
color: #fff; |
|||
border-radius: 2px; |
|||
border: 0; |
|||
|
|||
&::placeholder { |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
&[x-placement^="top"] { |
|||
div.popper__arrow { |
|||
border-top-color: #275e79; |
|||
|
|||
&::after { |
|||
border-top-color: #275e79; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="left"] { |
|||
div.popper__arrow { |
|||
border-left-color: #275e79; |
|||
|
|||
&::after { |
|||
border-left-color: #275e79; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="right"] { |
|||
div.popper__arrow { |
|||
border-right-color: #275e79; |
|||
|
|||
&::after { |
|||
border-right-color: #275e79; |
|||
} |
|||
} |
|||
} |
|||
&[x-placement^="bottom"] { |
|||
div.popper__arrow { |
|||
border-bottom-color: #275e79; |
|||
|
|||
&::after { |
|||
border-bottom-color: #275e79; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,37 @@ |
|||
body { |
|||
input, |
|||
textarea { |
|||
caret-color: white; |
|||
} |
|||
|
|||
div { |
|||
/* 滚动条整体部分 */ |
|||
&::-webkit-scrollbar { |
|||
width: 6px !important; |
|||
height: 6px !important; |
|||
padding: 15px; |
|||
} |
|||
|
|||
/* 滚动条的轨道 */ |
|||
&::-webkit-scrollbar-track { |
|||
background: rgba(17, 72, 90, 0.4); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/* 滚动条的滑块按钮 */ |
|||
&::-webkit-scrollbar-thumb { |
|||
background: #3785a0; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
/* 上下箭头 */ |
|||
&::-webkit-scrollbar-button { |
|||
display: none; |
|||
} |
|||
|
|||
/* 滚动条角 */ |
|||
&::-webkit-scrollbar-corner { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue