feat: 甘特图嵌入

Gary Gu

7 days ago 11836748b73632ca1a28bc2a54a0098044feb5d8

 src/views/Home.vue

@@ -9,354 +9,786 @@
      </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">
          <!-- 模型 / 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>
          <!-- 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 class="w-full h-full" v-if="currentView === 'project'">
          <video
            controls
            muted
            controlslist="nodownload"
            autoplay
            class="video-box"
            ref="videoElement"
            style="width: 100%; height: 100%; background-color: #000"
          ></video>
        </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 />
      </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: "",
      },
    },
    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, // 立即执行一次
      },
    },
    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: {
      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: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
}
  .top-nav {
    height: 5vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
  }

.nav-items {
  display: flex;
  gap: 20px;
}
  .bottom-nav {
    flex: 1;
  }

.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-items {
    display: flex;
    gap: 20px;
  }

.nav-item.active {
  background: rgba(255,191,0,0.2);
  border-radius: 2px;
  border: 1px solid #FFBF00;
}
  .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;
  }

.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%);
}
  .nav-item.active {
    background: rgba(255, 191, 0, 0.2);
    border-radius: 2px;
    border: 1px solid #ffbf00;
  }

.content-wrapper {
  display: flex;
  overflow: hidden;
  position: relative;
}
  .time-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
  }

.side-menu {
  width: 250px;
  background-color: #1e3d6b;
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
}
  .time-info-item {
    display: flex;
    align-items: center;
  }

.menu-dropdown {
  padding: 15px;
}
  .time-line {
    width: 200px;
    height: 1px;
    background: linear-gradient(270deg, rgba(255, 191, 0, 0) 0%, #ffbf00 100%);
  }

.menu-select {
  width: 100%;
  padding: 8px;
  background-color: #0a1931;
  color: white;
  border: 1px solid #2a4d7d;
}
  .content-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    height: 98%;
  }

.menu-list {
  border-top: 1px solid #2a4d7d;
}
  .chart-content {
    width: 100%;
    height: calc(100% - 52% - 20px);
  }

.menu-item {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
  .side-menu {
    width: 160px;
    color: white;
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    bottom: auto;

.menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
    ::v-deep .el-cascader {
      width: 100%;
      height: 100%;

.arrow-icon {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
}
      .el-cascader-node__label {
        color: #fff;
      }

.submenu {
  background-color: #152b4a;
}
      .el-input .el-input__inner {
        background: rgba(33, 72, 115, 0.9);
      }
    }
  }

.submenu-item {
  padding: 10px 30px;
  font-size: 14px;
  cursor: pointer;
}
  .menu-dropdown {
    padding: 15px;
  }

.submenu-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
  .menu-select {
    width: 100%;
    padding: 8px;
    background-color: #0a1931;
    color: white;
    border: 1px solid #2a4d7d;
  }

.main-content {
  flex: 1;
  background-color: #fff;
  width: 100%;
  height: 588px;
}
  .menu-list {
    border-top: 1px solid #2a4d7d;
  }

.content-header {
  color: white;
  margin-bottom: 20px;
}
  .menu-item {
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

.chart-container {
  background-color: #1e3d6b;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  height: 100%;
}
  .menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

.chart-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  color: white;
}
  .arrow-icon {
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
  }

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
  .submenu {
    background-color: #152b4a;
  }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
  .submenu-item {
    padding: 10px 30px;
    font-size: 14px;
    cursor: pointer;
  }

.dot.blue {
  background-color: #00ffff;
}
  .submenu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

.dot.yellow {
  background-color: #ffd700;
}
  .main-content {
    flex: 1;
    background-color: #fff;
    width: 100%;
    height: 100%;
  }

.chart-area {
  height: 400px;
  margin-bottom: 20px;
}
  .content-header {
    color: white;
    margin-bottom: 20px;
  }

.chart-tabs {
  display: flex;
  gap: 10px;
}
  .chart-container {
    padding: 20px;
    width: 100%;
    height: calc(100% - 5vh);
  }

.tab {
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}
  .chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    color: white;
  }

.tab.active {
  background-color: #2a4d7d;
}
  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .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: hidden;
      margin-bottom: 0px !important;
      margin-right: 0px !important;
    }
  }
</style>