|
|
@@ -0,0 +1,197 @@
|
|
|
+<template>
|
|
|
+ <div class="rs-layout" v-if="scenes.length">
|
|
|
+ <iframe :src="url" v-if="url" />
|
|
|
+
|
|
|
+ <div class="mount">
|
|
|
+ <el-select
|
|
|
+ v-model="currentId"
|
|
|
+ placeholder="请选择场景"
|
|
|
+ style="width: 120px"
|
|
|
+ class="scene-select"
|
|
|
+ popper-class="scene-select-popper"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in scenes"
|
|
|
+ :key="item.sceneCode"
|
|
|
+ :label="item.sceneName"
|
|
|
+ :value="item.id"
|
|
|
+ >
|
|
|
+ <div class="option">
|
|
|
+ <p>{{ item.startTime }}</p>
|
|
|
+ <p>{{ item.sceneName }}</p>
|
|
|
+ </div>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <div class="split-screen">
|
|
|
+ <span @click="gotoSlice">
|
|
|
+ <el-icon class="icon"><ZoomIn /></el-icon>
|
|
|
+ 分屏
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { getSceneLink, getSliceLink, Scene, SceneType } from "@/store/scene";
|
|
|
+import { dateFormat } from "@/util";
|
|
|
+import { computed, ref, watch } from "vue";
|
|
|
+import ZoomIn from "@/assets/screen_s.svg";
|
|
|
+import { router } from "@/router";
|
|
|
+
|
|
|
+const scenes = ref<Scene[]>([]);
|
|
|
+const currentId = ref<number>();
|
|
|
+const current = computed(
|
|
|
+ () => currentId.value && scenes.value.find((item) => item.id === currentId.value)
|
|
|
+);
|
|
|
+const url = ref<string>();
|
|
|
+watch(currentId, async (id) => {
|
|
|
+ if (!id) {
|
|
|
+ url.value = void 0;
|
|
|
+ } else {
|
|
|
+ url.value = await getSceneLink(current.value, true);
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const gotoSlice = () => {
|
|
|
+ window.open(getSliceLink(relicsId.value));
|
|
|
+};
|
|
|
+
|
|
|
+const relicsId = computed(() => Number(router.currentRoute.value.params.relicsId));
|
|
|
+const fetchScenes = async () => {
|
|
|
+ if (!relicsId.value) {
|
|
|
+ scenes.value = [];
|
|
|
+ currentId.value = void 0;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ await setTimeout(() => {}, 100);
|
|
|
+ const codes = ["SG-wh-gSLkoDR4yki", "SG-wh-yr0t9VgE0FA", "SG-wh-w7a5kIyJ7PQ"];
|
|
|
+ scenes.value = codes.map(
|
|
|
+ (code, i) =>
|
|
|
+ ({
|
|
|
+ id: i + 1,
|
|
|
+ sceneCode: code,
|
|
|
+ sceneSource: SceneType.CLUNT,
|
|
|
+ sceneName: `场景名称${i}`,
|
|
|
+ startTime: dateFormat(new Date(2014, i, 1), "yyyy-MM-dd"),
|
|
|
+ } as Scene)
|
|
|
+ );
|
|
|
+
|
|
|
+ if (!current.value) {
|
|
|
+ currentId.value = scenes.value[0].id;
|
|
|
+ }
|
|
|
+};
|
|
|
+watch(relicsId, fetchScenes, { immediate: true });
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+.rs-layout {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ iframe {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.mount {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: rgba(26, 26, 26, 0.8);
|
|
|
+ box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1);
|
|
|
+ border-radius: 58px 58px 58px 58px;
|
|
|
+ border: 1px solid #000000;
|
|
|
+}
|
|
|
+
|
|
|
+.option {
|
|
|
+ padding: 8px 0;
|
|
|
+ p {
|
|
|
+ margin: 0 !important;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ }
|
|
|
+ p:first-child {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 19px;
|
|
|
+ margin-bottom: 4px !important;
|
|
|
+ }
|
|
|
+ p:last-child {
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.7);
|
|
|
+ line-height: 14px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.split-screen {
|
|
|
+ margin-left: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 2px;
|
|
|
+ margin-right: 16px;
|
|
|
+ background: rgba(255, 255, 255, 0.16);
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.scene-select {
|
|
|
+ --el-fill-color-blank: rgba(0, 0, 0, 0);
|
|
|
+ --el-border-color: rgba(0, 0, 0, 0);
|
|
|
+ --el-color-primary: rgba(0, 0, 0, 0);
|
|
|
+ --el-border-color-hover: rgba(0, 0, 0, 0);
|
|
|
+ --el-text-color-regular: #fff;
|
|
|
+ --el-text-color-placeholder: #fff;
|
|
|
+}
|
|
|
+.scene-select-popper {
|
|
|
+ --el-bg-color-overlay: rgba(27, 27, 28, 0.8);
|
|
|
+ --el-border-color-light: #000000;
|
|
|
+ --el-box-shadow-light: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1);
|
|
|
+ --el-fill-color-light: rgba(255, 255, 255, 0.1);
|
|
|
+
|
|
|
+ &.el-popper[data-popper-placement^="top"] .el-popper__arrow:before {
|
|
|
+ border: none;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ background: none;
|
|
|
+ border-left-color: transparent;
|
|
|
+ border: 7px solid transparent;
|
|
|
+ border-top-color: var(--el-bg-color-overlay) !important;
|
|
|
+ transform: rotate(0) translate(0, 6px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown__item {
|
|
|
+ height: auto;
|
|
|
+ line-height: inherit;
|
|
|
+ margin: 8px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
