diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormInput.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormInput.vue index bf3cb826..baa7b3ac 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormInput.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormInput.vue @@ -21,18 +21,21 @@ export default { height: 100%; ::v-deep { - .el-input__inner { - background-color: #0D5F79; - color: #fff; - border-radius: 2px; - border: 0; - height: fit-content; - line-height: unset; + // .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; - } - } + // font-size: 12px; + + // &::placeholder { + // color: #fff; + // } + // } .el-textarea__inner { background: #0A3E54; diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormSelect.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormSelect.vue index 0188941d..98639119 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormSelect.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/components/FormSelect.vue @@ -46,5 +46,19 @@ export default { diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue index b21849a4..9a8f5a08 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/components/FormConfig/index.vue @@ -118,6 +118,7 @@ export default { .el-form-item__content { margin: 0 !important; flex: 1; + height: 100%; .el-input__prefix { color: #fff; diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue b/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue new file mode 100644 index 00000000..06a95af3 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js b/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js new file mode 100644 index 00000000..5e6fc116 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/components/Video/videoStream.js @@ -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; +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/index.vue b/ruoyi-ui/src/views/JiHeExpressway/index.vue index 60ef738f..52099311 100644 --- a/ruoyi-ui/src/views/JiHeExpressway/index.vue +++ b/ruoyi-ui/src/views/JiHeExpressway/index.vue @@ -32,48 +32,8 @@ export default { }; - - + diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss new file mode 100644 index 00000000..e16ef990 --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/scss/el-reset.scss @@ -0,0 +1,150 @@ +div.el-popper { + 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 4px 4px 4px; + opacity: 1; + border: 0; + + .el-select-dropdown__list { + .el-select-dropdown__item { + font-size: 15px; + font-family: PingFang SC, PingFang SC; + font-weight: 500; + color: #ffffff; + /** + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + */ + &:hover { + background: #0d5f79; + } + &.hover { + background: #0d5f79; + } + } + } + + &[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; + } + } + } + &.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; + } + } + 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; + } + } +} diff --git a/ruoyi-ui/src/views/JiHeExpressway/scss/index.scss b/ruoyi-ui/src/views/JiHeExpressway/scss/index.scss new file mode 100644 index 00000000..cf15d03f --- /dev/null +++ b/ruoyi-ui/src/views/JiHeExpressway/scss/index.scss @@ -0,0 +1,39 @@ +@import url(./el-reset.scss); + +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; + } + } +}