From e2a92db057ef2153f3e645e074f1e771987b2051 Mon Sep 17 00:00:00 2001
From: Gary Gu <garygu@Garydebijibendiannao.local>
Date: Fri, 30 May 2025 10:35:53 +0800
Subject: [PATCH] feat: 优化数据
---
src/views/Home.vue | 1026 ++++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 737 insertions(+), 289 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index da552b2..0c08726 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,354 +9,802 @@
</div>
<div class="time-info">
<div class="time-info-item">
- <i class="el-icon-date" style="color: #FFBF00;font-size: 20px;"></i>
+ <i class="el-icon-date" style="color: #ffbf00; font-size: 20px"></i>
<div class="text-white text-[16px] ml-[4px]">工程倒计时/天</div>
- <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">175</div>
+ <div class="text-[#FFBF00] text-[24px] font-bold ml-[28px]">{{ endDate }}</div>
</div>
- <div class="time-line">
- </div>
+ <div class="time-line"> </div>
</div>
</div>
+ <div class="bottom-nav">
+ <div class="content-wrapper mb-[20px]">
+ <!-- 720菜单 -->
+ <div class="side-menu z-[100]" v-if="currentView === '720'">
+ <el-cascader
+ popper-class="custom-dropdown"
+ v-model="panoValue"
+ :options="panoList"
+ @change="handlePanoChange"
+ :props="{ value: 'id', label: 'label', children: 'Children' }"
+ />
+ </div>
+ <!-- 项目实况-->
+ <div class="side-menu z-[100]" v-if="currentView === 'project'">
+ <el-cascader
+ popper-class="custom-dropdown"
+ v-model="liveValue"
+ :options="liveList"
+ @change="handleLiveChange"
+ :props="{ value: 'id', label: 'label', children: 'JSCProjectMonitorList' }"
+ />
+ </div>
- <div class="content-wrapper mb-[20px]">
- <!-- 720菜单 -->
- <div class="side-menu" v-if="currentView === '720'">
- <div class="menu-dropdown">
- <select class="menu-select">
- <option>请选择</option>
- </select>
- </div>
- <div class="menu-list">
- <div class="menu-item">
- <span>一期</span>
- <i class="arrow-icon"></i>
+ <!-- 主要内容区域 -->
+ <div class="main-content" :style="isFullScreen ? fullScreenStyle : ''" v-loading="isLoading" ref="mainContent">
+ <!-- 模型 / 720 -->
+ <div
+ class="w-full h-full"
+ :style="isFullScreen ? fullScreenStyle : 'width: 100%; height: 100%;'"
+ v-if="currentView === '720' || currentView === 'model'"
+ >
+ <iframe
+ id="model-iframe"
+ class="content-frame w-full h-full"
+ src=""
+ frameborder="0"
+ :style="isFullScreen ? fullScreenModelStyle : ''"
+ v-if="currentView === 'model'"
+ ></iframe>
+ <iframe
+ ref="panoiframe"
+ id="panoviewpreview"
+ class="pano-frame w-full h-full"
+ :style="isFullScreen ? fullScreenPanoStyle : ''"
+ v-if="currentView === '720'"
+ ></iframe>
</div>
- <div class="menu-item">
- <span>二期</span>
- <i class="arrow-icon"></i>
- </div>
- <div class="menu-item">
- <span>三期</span>
- <i class="arrow-icon"></i>
- </div>
- <div class="menu-item">
- <span>四期</span>
- <i class="arrow-icon"></i>
- </div>
- </div>
- <div class="submenu">
- <div class="submenu-item">1#楼东立面图</div>
- <div class="submenu-item">1#出入口层立-1</div>
- <div class="submenu-item">2#出入口层立-2</div>
- <div class="submenu-item">2#楼东立面图</div>
- <div class="submenu-item">3#楼东立面图</div>
- <div class="submenu-item">停车场入口区控制面</div>
- </div>
+ <!-- 项目 -->
+ <video v-if="currentView === 'project'" controls muted controlslist="nodownload" autoplay class="video-box" ref="videoElement"></video>
+ <!-- 720全景图版本选择 -->
+ <!--<div class="w-full h-[120px] bg-[rgba(19,40,64,0.8)] absolute bottom-0 left-0 right-0 flex items-center py-[10px]" :style="isFullScreen ? 'z-index: 100; height:' : ''" v-if="currentView === '720'">
+ <div v-for="item in panoVersionList" :key="item.value" :style="isFullScreen ? 'z-index: 100;' : ''">
+ <div class="w-[160px] h-[100px] mr-[10px] ml-[10px] cursor-pointer border-[1px] border-[#3068A5] rounded-[2px]" @click="panoPreview(panoObj, item)">
+ <img :src="getItemImg(item)" alt="全景图" class="w-full h-full" />
+ </div>
</div>
+ </div>-->
- <!-- 主要内容区域 -->
- <div class="main-content" v-loading="isLoading">
- <!-- 模型 -->
- <div class="w-full h-full" v-if="currentView === 'model'" >
- <iframe id="model-iframe" class="content-frame w-full h-[588px]" src="" frameborder="0"></iframe>
- </div>
- <!-- 720 -->
- <div class="w-full h-full bg-white" v-if="currentView === '720'">
- <div id="panoviewpreview" class="pano-frame w-full h-[588px]">
+ <!-- 放大镜 -->
+ <div
+ class="w-[80px] h-[80px] bg-[#008C99] absolute top-[-40px] right-[-40px] rounded-[50%] z-[100]"
+ v-if="currentView === 'model' || currentView === '720'"
+ @click="handleZoomOut"
+ >
+ <img src="../assets/images/backgrounds/zoomin.png" alt="放大" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-if="isFullScreen" />
+ <img src="../assets/images/backgrounds/zoomout.png" alt="缩小" class="w-[16px] h-[16px] mt-[50px] ml-[15px] cursor-pointer" v-else />
</div>
- </div>
- <!-- 项目 -->
- <div class="w-full h-full" v-if="currentView === 'project'" >
- <iframe id="scene-iframe" class="scene-frame w-full h-[588px]" src="" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="chart-content">
- <div
- class="w-full h-[4vh] mb-[1vh]"
+ <div
+ class="w-full h-[4vh] mb-[1vh]"
:style="{
backgroundImage: `url(${bottomImage})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center center',
- backgroundSize: '100% 100%'
+ backgroundSize: '100% 100%',
}"
>
</div>
- <div class="chart-container">
- <img src="../assets/images/backgrounds/shigongjinduchart.png" alt="施工进度" class="w-full h-[280px]"/>
+ <div class="chart-container" :style="sectionStyle">
+ <Gantt :selected-id="selectedId" />
</div>
</div>
</div>
</template>
<script>
-import { nextTick } from 'vue'
-export default {
- name: 'Home',
- components: {
- },
- data() {
- return {
- currentView: 'model',
- chartOptions: {
- id: 'shigongjinduChart',
- options: {
- title: {
- text: '施工进度'
+ import flvjs from "flv.js";
+ import { nextTick } from "vue";
+ import { HomeAPI } from "../api/home";
+ import { getProjectId, getToken, getProjectEndDate } from "../utils/getToken.js";
+ import Gantt from "@/components/Gantt.vue";
+ export default {
+ name: "Home",
+ components: { Gantt },
+ props: {
+ selectedId: {
+ type: String,
+ default: "",
+ },
+ isHederFullScreen: {
+ type: Boolean,
+ default: false,
+ },
+ },
+ data() {
+ return {
+ liveValue: [],
+ playerStatus: "未就绪",
+ errorMessage: "",
+ flvPlayer: null,
+ videoSrc: "",
+ currentView: "model",
+ chartOptions: {
+ id: "shigongjinduChart",
+ options: {
+ title: {
+ text: "施工进度",
+ },
+ },
+ },
+ bottomImage: new URL("@/assets/images/titles/shigong.png", import.meta.url).href,
+ isLoading: false,
+ panoVersionList: [],
+ isFullScreen: false,
+ fullScreenStyle: "",
+ fullScreenPanoStyle: "",
+ fullScreenModelStyle: "",
+ panoList: [
+ {
+ value: "zhinan",
+ label: "指南",
+ children: [
+ {
+ value: "shejiyuanze",
+ label: "设计原则",
+ },
+ {
+ value: "daohang",
+ label: "导航",
+ },
+ ],
+ },
+ {
+ value: "zujian",
+ label: "组件",
+ children: [
+ {
+ value: "basic",
+ label: "Basic",
+ },
+ {
+ value: "form",
+ label: "Form",
+ },
+ {
+ value: "data",
+ label: "Data",
+ },
+ {
+ value: "notice",
+ label: "Notice",
+ },
+ {
+ value: "navigation",
+ label: "Navigation",
+ },
+ {
+ value: "others",
+ label: "Others",
+ },
+ ],
+ },
+ ],
+ panoValue: [],
+ liveList: [],
+ backgroundImage: new URL("@/assets/images/backgrounds/cover_bg.png", import.meta.url).href,
+ endDate: 0,
+ };
+ },
+ computed: {
+ sectionStyle() {
+ return {
+ backgroundImage: `url(${this.backgroundImage})`,
+ backgroundRepeat: "no-repeat",
+ backgroundPosition: "center center",
+ backgroundSize: "100% 100%",
+ };
+ },
+ projectId() {
+ return getProjectId();
+ },
+ projectEndDate() {
+ return getProjectEndDate();
+ },
+ },
+ watch: {
+ projectEndDate: {
+ deep: true,
+ handler(newVal) {
+ console.log("newVal", newVal);
+ const date = new Date(newVal);
+ // 获取当前日期作为Date对象
+ const now = new Date();
+ // 计算两个日期的差异（毫秒）
+ const diffTime = Math.abs(now - date);
+ // 将毫秒转换为天数
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+ this.endDate = diffDays;
+ },
+ },
+ selectedId: {
+ handler(newVal) {
+ console.log("实况界面接收到的数据:", newVal);
+ // 处理数据变化的逻辑
+ this.getProjectLive(newVal);
+ },
+ deep: true, // 深度监听对象内部变化
+ immediate: true, // 立即执行一次
+ },
+ },
+ created() {
+ window.addEventListener("resize", this.resize);
+ },
+ beforeDestroy() {
+ window.removeEventListener("resize", this.resize);
+ this.destroyPlayer(); // 销毁播放器实例
+ },
+ mounted() {
+ setTimeout(() => {
+ console.log("projectEndDate", getProjectEndDate());
+ this.modelShow();
+ }, 1000);
+ },
+ updated() {
+ if (this.$refs.panoiframe) {
+ // IE
+ if (this.$refs.panoiframe.attachEvent) {
+ this.$refs.panoiframe.attachEvent("onload", () => {
+ console.log("loading");
+ // 加载成功
+ this.isLoading = false;
+ });
+ } else {
+ this.$refs.panoiframe.onload = () => {
+ console.log("loading2");
+ // 加载成功
+ this.isLoading = false;
+ };
+ }
+ }
+ },
+ methods: {
+ resize() {
+ const windowInfo = {
+ width: window.innerWidth,
+ height: window.innerHeight,
+ };
+ if (windowInfo.height > 1080) {
+ this.$refs.mainContent.style.height = "100%";
+ } else {
+ this.$refs.mainContent.style.height = "450px";
+ }
+ },
+ getItemImg(item) {
+ return `${window.ProjectConfig.panoBaseUrl}/Panorama${this.panoObj.PbUrl}/vtour/panos/${item.PsScenename}.tiles/thumb.jpg`;
+ },
+ handleZoomOut() {
+ console.log("放大");
+ this.isFullScreen = !this.isFullScreen;
+ if (this.isFullScreen) {
+ const clientX = document.documentElement.clientWidth || document.body.clientWidth;
+ const clientY = document.documentElement.clientHeight || document.body.clientHeight;
+ this.fullScreenStyle = `width: ${clientX - 40}px; height: ${
+ clientY - 120
+ }px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`;
+ if (this.currentView === "720") {
+ this.fullScreenPanoStyle = `width: 100%; height: 100%; z-index: 100; `;
+ } else if (this.currentView === "model") {
+ this.fullScreenModelStyle = `width: ${clientX - 40}px; height: ${
+ clientY - 120
+ }px; margin:20px; position: fixed; top: 80px; left: 0;z-index: 100;background-color: #fff;overflow: hidden;`;
}
}
},
- bottomImage: new URL('@/assets/images/titles/shigong.png', import.meta.url).href,
- isLoading: false
- }
- },
- methods: {
- handleChange(view) {
- this.isLoading = true
- this.currentView = view
- if (view === 'model') {
- removepano('krpanoSWFObject')
+ handleChange(view) {
+ this.isLoading = true;
+ this.currentView = view;
+ if (view === "model") {
+ nextTick(() => {
+ this.modelShow();
+ });
+ } else if (view === "720") {
+ nextTick(() => {
+ this.panoShow();
+ });
+ } else if (view === "project") {
+ nextTick(() => {
+ this.getProjectLive(this.selectedId);
+ });
+ }
+ },
+ handlePanoChange(value) {
+ console.log("value", value);
+ this.isLoading = true;
+ this.panoList.forEach((item) => {
+ if (item.LabelId === value[0]) {
+ item.Children.forEach((item2) => {
+ if (item2.PbGuid === value[1]) {
+ this.panoObj = item2;
+ console.log("panoObj", this.panoObj);
+ this.getPanoPhase(item2);
+ }
+ });
+ }
+ });
+ },
+ modelShow() {
+ const iframe = document.getElementById("model-iframe");
+ const token = getToken();
+ const projectId = this.projectId;
+ let ifrSrc = "";
+ console.log("模型中查看");
+ // ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
+ ifrSrc = window.ProjectConfig.modelUrl;
+ iframe.src = ifrSrc;
+ console.log("加载iframe地址", ifrSrc);
+ this.isLoading = false;
+ },
+ panoShow() {
+ const data = {
+ projectId: this.projectId,
+ };
+ HomeAPI.GetProjectPanoramaList(data).then((res) => {
+ console.log("全景图", res);
+ if (res.Ret === 1) {
+ const result = res.Data;
+ if (result.length > 0) {
+ result.forEach((element) => {
+ element.id = element.LabelId;
+ element.label = element.LabelName;
+ element.Children.forEach((item) => {
+ item.id = item.PbGuid;
+ item.label = item.PbName;
+ });
+ });
+ this.panoList = result;
+ this.panoValue = [result[0].id, result[0].Children[0].id];
+ this.panoObj = result[0].Children[0];
+ this.getPanoPhase();
+ }
+ }
+ });
+ },
+ getPanoPhase() {
+ const data = {
+ pbguid: this.panoObj.PbGuid,
+ };
+ HomeAPI.GetScenesByPbGuid(data).then((res) => {
+ console.log("全景图阶段", res);
+ if (res.Ret === 1) {
+ this.panoVersionList = res.Data;
+ this.panoPreview(this.panoObj, this.panoVersionList[0]);
+ }
+ });
+ },
+ panoPreview(item, scene) {
+ // /LinkShare/PanoShare/:PanoId/:organizeId/:StartScene
+ // PanoId：全景图的id，organizeId：项目id，StartScene:初始场景id
+ const panoFrame = document.getElementById("panoviewpreview");
nextTick(() => {
- this.modelShow()
- })
- } else if (view === '720') {
- nextTick(() => {
- this.panoShow()
- })
- } else if (view === 'project') {
- nextTick(() => {
- this.sceneShow()
- })
- }
+ if (panoFrame.src) {
+ panoFrame.removeAttribute("src"); //先移除上一次的src地址
+ }
+ setTimeout(() => {
+ let ifrSrc = "";
+ ifrSrc = `${window.ProjectConfig.panoUrl}/#/LinkShare/PanoShare/${scene.PbGuid}/${this.projectId}/${scene.PsScenename}`;
+ panoFrame.setAttribute("src", ifrSrc);
+ }, 300);
+ });
+ // removepano('krpanoSWFObject')
+ // const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
+ // const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
+ // let setting = {}
+ // if (scene) {
+ // const scenename = 'scene_' + scene.PsScenename
+ // setting = {
+ // startscene: scenename
+ // }
+ // }
+ // this.$nextTick(() => {
+ // embedpano({
+ // xml: xmlurl,
+ // target: 'panoviewpreview',
+ // basepath,
+ // vars: setting,
+ // html5: 'auto',
+ // passQueryParameters: true,
+ // })
+ // })
+ },
+ sceneShow() {
+ const iframe = document.getElementById("scene-iframe");
+ let ifrSrc = "";
+ ifrSrc = window.ProjectConfig.sceneUrl;
+ iframe.src = ifrSrc;
+ this.isLoading = false;
+ },
+ mounted() {
+ this.isLoading = true;
+ this.modelShow();
+ },
+ /**
+ * 获取项目实况数据
+ * @param {string} bindId - 标段ID
+ */
+ getProjectLive(bindId) {
+ const params = {
+ bindId,
+ };
+ HomeAPI.GetJSCProjectMonitor(params).then((res) => {
+ if (res.Ret === 1) {
+ const result = res.Data;
+ if (result.length > 0) {
+ console.log("实况数据", result);
+ result.forEach((element) => {
+ element.id = element.BindId;
+ element.label = element.BindName;
+ element.JSCProjectMonitorList.forEach((item) => {
+ item.id = item.MonitorUrl;
+ item.label = item.MonitorName;
+ });
+ });
+ }
+ this.isLoading = false;
+ this.liveList = result;
+ this.liveValue = [result[0].id, result[0].JSCProjectMonitorList[0].id];
+ this.videoSrc = this.liveList[0].JSCProjectMonitorList[0].MonitorUrl;
+ this.loadVideo();
+ }
+ });
+ },
+ /**
+ * 处理实况的实时变化
+ * @param value
+ */
+ handleLiveChange(value) {
+ console.log("实况变化", value);
+ this.videoSrc = value[1];
+ this.loadVideo();
+ },
+ // 检查FLV支持
+ checkFlvSupport() {
+ if (!flvjs.isSupported()) {
+ this.errorMessage = "当前浏览器不支持FLV播放";
+ this.playerStatus = "不支持";
+ return false;
+ }
+ this.playerStatus = "已就绪";
+ return true;
+ },
+ /**
+ * 销毁播放器实例
+ */
+ destroyPlayer() {
+ if (this.flvPlayer) {
+ try {
+ this.flvPlayer.pause();
+ this.flvPlayer.unload();
+ this.flvPlayer.detachMediaElement();
+ this.flvPlayer.destroy();
+ this.flvPlayer = null;
+ } catch (error) {
+ console.error("销毁播放器时出错:", error);
+ }
+ }
+ this.isReady = false;
+ },
+ /**
+ * 加载视频
+ */
+ loadVideo() {
+ if (!this.videoSrc.trim()) {
+ this.errorMessage = "请播放有效的视频URL";
+ return;
+ }
+
+ if (!this.checkFlvSupport()) {
+ return;
+ }
+ this.errorMessage = "";
+ this.playerStatus = "加载中...";
+
+ try {
+ // 销毁旧的播放器实例
+ this.destroyPlayer();
+
+ // 创建FLV播放器
+ this.flvPlayer = flvjs.createPlayer(
+ {
+ type: "flv",
+ url: this.videoSrc,
+ isLive: false, // 如果是直播流，设置为true
+ cors: true,
+ withCredentials: false,
+ },
+ {
+ enableWorker: false,
+ enableStashBuffer: true,
+ stashInitialSize: 128,
+ autoCleanupSourceBuffer: true,
+ },
+ );
+
+ // 绑定事件监听器
+ // this.bindPlayerEvents()
+
+ // 绑定到video元素
+ this.flvPlayer.attachMediaElement(this.$refs.videoElement);
+
+ // 开始加载
+ this.flvPlayer.load();
+ } catch (error) {
+ console.error("加载视频失败:", error);
+ this.errorMessage = "视频加载失败: " + error.message;
+ this.playerStatus = "加载失败";
+ }
+ },
},
- modelShow() {
- const iframe = document.getElementById('model-iframe')
- const token = '08168BBAD572518D1AB6EC233A13C3E2FA9C16340A21C6B6D0F2785DBDF2CB3506A0873877DA22C7E7ADA6CB1012493B4C702FC75B529ABD'
- const projectId = '1c179617-a7d9-4243-b813-84fa55a17ce7'
- let ifrSrc = ''
- console.log('模型中查看')
- ifrSrc = `${window.ProjectConfig.modelUrl}?token=${token}&projectId=${projectId}&isPreview=1&edit=false`
- iframe.src = ifrSrc
- console.log('加载iframe地址', ifrSrc)
- this.isLoading = false
- },
- panoShow(item, scene) {
- this.isLoading = false
- const basepath = `${window.ProjectConfig.panoUrl}/Panorama${item.PbUrl}/vtour/`
- const xmlurl = `${basepath}tour.xml?r=${(Math.random() * 100000 + 1)}`
- let setting = {}
- if (scene) {
- const scenename = 'scene_' + scene.PsScenename
- setting = { startscene: scenename }
- }
- this.$nextTick(() => {
- embedpano({
- xml: xmlurl,
- target: 'panoviewpreview',
- basepath,
- vars: setting,
- html5: 'auto',
- passQueryParameters: true
- })
- })
- },
- sceneShow() {
- const iframe = document.getElementById('scene-iframe')
- const ifrSrc = window.ProjectConfig.sceneUrl
- iframe.src = ifrSrc
- this.isLoading = false
- }
- },
- mounted() {
- this.isLoading = true
- this.modelShow()
- },
-}
+ };
</script>
-<style scoped lang="scss">
-.home-container {
- display: flex;
- flex-direction: column;
- height: 100vh;
-}
+<style lang="scss" scoped>
+ .home-container {
+ display: flex;
+ flex-direction: column;
+ height: calc(100vh - 100px);
+ overflow: hidden;
+ }
+ .top-nav {
+ height: 5vh;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: white;
+ }
-.top-nav {
- height: 50px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: white;
-}
+ .bottom-nav {
+ flex: 1;
+ }
-.nav-items {
- display: flex;
- gap: 20px;
-}
+ .nav-items {
+ display: flex;
+ gap: 20px;
+ }
-.nav-item {
- background: rgba(112,119,140,0.3);
- border-radius: 2px;
- border: 1px solid rgba(112,124,140,0.6);
- padding: 5px 16px;
- cursor: pointer;
-}
+ .nav-item {
+ background: rgba(112, 119, 140, 0.3);
+ border-radius: 2px;
+ border: 1px solid rgba(112, 124, 140, 0.6);
+ padding: 5px 16px;
+ cursor: pointer;
+ }
-.nav-item.active {
- background: rgba(255,191,0,0.2);
- border-radius: 2px;
- border: 1px solid #FFBF00;
-}
+ .nav-item.active {
+ background: rgba(255, 191, 0, 0.2);
+ border-radius: 2px;
+ border: 1px solid #ffbf00;
+ }
-.time-info {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 200px;
-}
-.time-info-item {
- display: flex;
- align-items: center;
-
-}
-.time-line {
- width: 200px;
- height: 1px;
- background: linear-gradient( 270deg, rgba(255,191,0,0) 0%, #FFBF00 100%);
-}
+ .time-info {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 200px;
+ }
-.content-wrapper {
- display: flex;
- overflow: hidden;
- position: relative;
-}
+ .time-info-item {
+ display: flex;
+ align-items: center;
+ }
-.side-menu {
- width: 250px;
- background-color: #1e3d6b;
- color: white;
- position: absolute;
- top: 10px;
- left: 10px;
- right: auto;
- bottom: auto;
-}
+ .time-line {
+ width: 200px;
+ height: 1px;
+ background: linear-gradient(270deg, rgba(255, 191, 0, 0) 0%, #ffbf00 100%);
+ }
-.menu-dropdown {
- padding: 15px;
-}
+ .content-wrapper {
+ display: flex;
+ overflow: hidden;
+ position: relative;
+ height: 98%;
+ }
-.menu-select {
- width: 100%;
- padding: 8px;
- background-color: #0a1931;
- color: white;
- border: 1px solid #2a4d7d;
-}
+ .chart-content {
+ width: 100%;
+ height: calc(100% - 52% - 20px);
+ }
-.menu-list {
- border-top: 1px solid #2a4d7d;
-}
+ .side-menu {
+ width: 160px;
+ color: white;
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ right: auto;
+ bottom: auto;
-.menu-item {
- padding: 12px 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- cursor: pointer;
-}
+ ::v-deep .el-cascader {
+ width: 100%;
+ height: 100%;
-.menu-item:hover {
- background-color: rgba(255, 255, 255, 0.1);
-}
+ .el-cascader-node__label {
+ color: #fff;
+ }
-.arrow-icon {
- border: solid white;
- border-width: 0 2px 2px 0;
- display: inline-block;
- padding: 3px;
- transform: rotate(-45deg);
-}
+ .el-input .el-input__inner {
+ background: rgba(33, 72, 115, 0.9);
+ }
+ }
+ }
-.submenu {
- background-color: #152b4a;
-}
+ .menu-dropdown {
+ padding: 15px;
+ }
-.submenu-item {
- padding: 10px 30px;
- font-size: 14px;
- cursor: pointer;
-}
+ .menu-select {
+ width: 100%;
+ padding: 8px;
+ background-color: #0a1931;
+ color: white;
+ border: 1px solid #2a4d7d;
+ }
-.submenu-item:hover {
- background-color: rgba(255, 255, 255, 0.1);
-}
+ .menu-list {
+ border-top: 1px solid #2a4d7d;
+ }
-.main-content {
- flex: 1;
- background-color: #fff;
- width: 100%;
- height: 588px;
-}
+ .menu-item {
+ padding: 12px 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ cursor: pointer;
+ }
-.content-header {
- color: white;
- margin-bottom: 20px;
-}
+ .menu-item:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
-.chart-container {
- background-color: #1e3d6b;
- border-radius: 8px;
- padding: 20px;
- width: 100%;
- height: 100%;
-}
+ .arrow-icon {
+ border: solid white;
+ border-width: 0 2px 2px 0;
+ display: inline-block;
+ padding: 3px;
+ transform: rotate(-45deg);
+ }
-.chart-legend {
- display: flex;
- gap: 20px;
- margin-bottom: 20px;
- color: white;
-}
+ .submenu {
+ background-color: #152b4a;
+ }
-.legend-item {
- display: flex;
- align-items: center;
- gap: 8px;
-}
+ .submenu-item {
+ padding: 10px 30px;
+ font-size: 14px;
+ cursor: pointer;
+ }
-.dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
-}
+ .submenu-item:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
-.dot.blue {
- background-color: #00ffff;
-}
+ .main-content {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 1;
+ background-color: #000;
+ width: 100%;
+ height: 450px;
+ }
+ .video-box {
+ width: 100%;
+ height: 100%;
+ }
-.dot.yellow {
- background-color: #ffd700;
-}
+ .content-header {
+ color: white;
+ margin-bottom: 20px;
+ }
-.chart-area {
- height: 400px;
- margin-bottom: 20px;
-}
+ .chart-container {
+ padding: 20px;
+ width: 100%;
+ height: calc(100% - 5vh);
+ }
-.chart-tabs {
- display: flex;
- gap: 10px;
-}
+ .chart-legend {
+ display: flex;
+ gap: 20px;
+ margin-bottom: 20px;
+ color: white;
+ }
-.tab {
- padding: 8px 16px;
- color: white;
- cursor: pointer;
- border-radius: 4px;
-}
+ .legend-item {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
-.tab.active {
- background-color: #2a4d7d;
-}
+ .dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ .dot.blue {
+ background-color: #00ffff;
+ }
+
+ .dot.yellow {
+ background-color: #ffd700;
+ }
+
+ .chart-area {
+ height: 400px;
+ margin-bottom: 20px;
+ }
+
+ .chart-tabs {
+ display: flex;
+ gap: 10px;
+ }
+
+ .tab {
+ padding: 8px 16px;
+ color: white;
+ cursor: pointer;
+ border-radius: 4px;
+ }
+
+ .tab.active {
+ background-color: #2a4d7d;
+ }</style
+><style lang="scss">
+ .custom-dropdown {
+ background-color: rgba(33, 72, 115, 0.9);
+ border-radius: 2px;
+ border: 1px solid #3068a5;
+
+ .el-cascader-menu {
+ color: #fff;
+
+ .el-cascader-node__label {
+ color: #fff;
+ }
+ }
+
+ .el-cascader .el-input .el-input__inner:focus,
+ .el-cascader .el-input.is-focus .el-input__inner {
+ height: 28px;
+ line-height: 28px;
+ }
+
+ .el-cascader .el-input .el-input__inner {
+ height: 28px;
+ line-height: 28px;
+ background: rgba(33, 72, 115, 0.9);
+ }
+
+ .el-input__icon {
+ line-height: 38px;
+ }
+
+ .el-cascader-node:not(.is-disabled):focus,
+ .el-cascader-node:not(.is-disabled):hover {
+ background: #3068a5;
+ }
+
+ .popper__arrow {
+ display: none;
+ }
+
+ .el-scrollbar__wrap {
+ overflow-x: hidden;
+ overflow-y: scroll;
+ }
+ }
</style>
--
Gitblit v1.9.3