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;
+ }
+ }
+}