大屏数据修改

src/components/CommonMap.vue

@@ -252,7 +252,7 @@ onMounted(() => {
   width: 25px;
   height: 34px;
 }
-/deep/.infoWindow-title {
+:deep(.infoWindow-title) {
   background-image: url("../assets/images/标题.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -262,7 +262,7 @@ onMounted(() => {
   padding-left: 10px;
   font-weight: 700;
 }
-/deep/.infoWindow-content {
+:deep(.infoWindow-content) {
   background-image: url("../assets/images/信息文本.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -273,7 +273,7 @@ onMounted(() => {
   padding-top: 5px;
   padding-bottom: 5px;
 }
-/deep/.infoWindow-bottom {
+:deep(.infoWindow-bottom) {
   background-image: url("../assets/images/下标.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -281,23 +281,23 @@ onMounted(() => {
   margin-top: 1px;
   height: 22px;
 }
-/deep/.infoWindow-content-title {
+:deep(.infoWindow-content-title) {
   font-size: 18px;
   color: #fff;
   font-weight: 400;
 }
-/deep/.infoWindow-content-value {
+:deep(.infoWindow-content-value) {
   font-weight: 400;
   font-size: 24px;
   color: #93d2ff;
 }
-/deep/.infoWindow-unit {
+:deep(.infoWindow-unit) {
   font-size: 20px;
   color: #93d2ff;
   display: inline-block;
   margin-left: 3px;
 }
-/deep/.anchorPoint {
+:deep(.anchorPoint) {
   position: absolute;
   color: #fff;
   position: absolute;
@@ -306,11 +306,11 @@ onMounted(() => {
   transform: translate(-50%, -50%);
 }
 
-/deep/.amap-logo {
+:deep(.amap-logo) {
   display: none;
   opacity: 0 !important;
 }
-/deep/.amap-copyright {
+:deep(.amap-copyright) {
   opacity: 0;
 }
 </style>

src/components/CommonTotal.vue

@@ -150,7 +150,6 @@ onMounted(() => {});
         .font(12);
       }
       .stat-card-value {
-        // .vh(margin-top, 10);
         .font(24);
         cursor: pointer;
         font-family: "DIN";
@@ -161,4 +160,6 @@ onMounted(() => {});
 :deep(.el-dialog__title) {
   font-weight: 900;
 }
+:deep(.el-dialog) {
+}
 </style>

src/components/common/commonTable.vue

@@ -605,4 +605,14 @@ const handleNextClick = (val) => {
 :deep(.el-table) {
   background-color: rgba(255, 255, 255, 0.5);
 }
+.common-table {
+  background: rgb(157 188 218 / 40%);
+}
+:deep(.el-table th.el-table__cell) {
+  background: rgba(4, 66, 126, 0.4);
+  color: #fff;
+}
+:deep(.el-table tr) {
+  background: rgb(157 188 218 / 40%);
+}
 </style>

src/views/components/CircleProgress.vue

@@ -51,7 +51,11 @@ const initChart = () => {
         label: { show: false },
         labelLine: { show: false },
         data: [
-          { value: 33.8, name: "绿色扇区", itemStyle: { color: "#00FF00" } }, // 绿色扇区
+          {
+            value: 33.8,
+            name: "绿色扇区",
+            itemStyle: { color: "#00FF00", fontSize: 12 },
+          }, // 绿色扇区
           {
             value: 66.2,
             name: "背景扇区",

src/views/components/Construct.vue

@@ -27,7 +27,13 @@
           <div><CircleProgress /></div>
           <div class="investment-progress">
             <span>19.72/58.42亿元</span>
-            <div class="progress-image"></div>
+            <div class="progress-image">
+              <div class="progress-show-value"></div>
+              <div
+                class="progress-show-value-rel"
+                :style="{ width: `${33.8}%` }"
+              ></div>
+            </div>
           </div>
         </div>
       </div>
@@ -68,7 +74,6 @@ const recycleList = reactive([
 .construct-container {
   display: flex;
   .construct-left {
-    // width: 65%;
     flex: 1;
     height: 100%;
     .tag-image {
@@ -111,17 +116,40 @@ const recycleList = reactive([
         align-items: end;
         span {
           .vh(margin-bottom,-20);
+          font-family: "DIN";
         }
         .progress-image {
-          justify-content: center;
-          align-items: center;
           .vw(width,520);
           .vh(height,85);
           background-image: url("@/assets/images/箭头.png");
           background-repeat: no-repeat;
-          background-size: contain;
           background-position: center;
           background-size: 100% 100%;
+          position: relative;
+          .progress-show-value {
+            position: absolute;
+            .vh(top,26);
+            .vw(left,65);
+            width: 85%;
+            height: 30%;
+            background-image: url(/src/assets/images/baseRate.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
+          .progress-show-value-rel {
+            height: 100%;
+            background-image: url("@/assets/images/baseRateRel.png");
+            background-size: auto 100%;
+            -webkit-transform: skew(-30deg);
+            transform: skew(-30deg);
+            position: absolute;
+            .vh(top,26);
+            .vw(left,65);
+            height: 30%;
+            background-image: url(/src/assets/images/baseRateRel.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+          }
         }
       }
     }

src/views/components/Operation.vue

@@ -103,6 +103,11 @@ const completeList = reactive([
   .construct-left {
     flex: 1;
     height: 100%;
+    .tag-image {
+      img {
+        .vw(width, 85);
+      }
+    }
     .construct-left-map {
       .vh(height, 700);
       .vh(padding-top, 4);

src/views/homePage/copy.vue

+<template>
+  <div class="home-container">
+    <div class="header">
+      <div class="header-left">
+        <div
+          class="nav-btn"
+          :class="{ active: selectedLeftBtn === 'equity' }"
+          @click="selectLeftBtn('equity')"
+        >
+          股权投资
+        </div>
+        <div
+          class="nav-btn"
+          :class="{ active: selectedLeftBtn === 'risk' }"
+          @click="selectLeftBtn('risk')"
+        >
+          固定风险投资
+        </div>
+      </div>
+      <div class="header-middile">
+        葛洲坝集团交通投资有限公司投资决策分析系统
+      </div>
+      <div class="header-right">
+        <div
+          class="nav-btn"
+          :class="{ active: selectedRightBtn === 'realestate' }"
+          @click="selectRightBtn('realestate')"
+        >
+          房地产投资
+        </div>
+        <div
+          class="nav-btn"
+          :class="{ active: selectedRightBtn === 'finance' }"
+          @click="selectRightBtn('finance')"
+        >
+          融资建设投资
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <div class="fullscreen-btn">
+        <span @click="toggleFullscreen" class="fullscreen-text">
+          <el-icon :size="18">
+            <full-screen />
+          </el-icon>
+          {{ isFullscreen ? "退出全屏" : "全屏" }}
+        </span>
+      </div>
+      <div class="content-btn">
+        <span
+          v-for="item in navList"
+          :key="item.index"
+          :class="{ active: selectedContentBtn === item.index }"
+          @click="selectContentBtn(item)"
+          >{{ item.name }}
+        </span>
+      </div>
+      <ProjectApproval
+        :currentName="selectedContentName"
+        v-if="
+          selectedContentBtn === 1 ||
+          selectedContentBtn === 4 ||
+          selectedContentBtn === 5
+        "
+      />
+      <Construct v-else-if="selectedContentBtn === 2" />
+      <Operation v-else />
+    </div>
+    <div class="bottom"></div>
+  </div>
+</template>
+
+<script setup>
+import Construct from "../components/Construct.vue";
+import ProjectApproval from "../components/ProjectApproval.vue";
+import Operation from "../components/Operation.vue";
+import { reactive, ref } from "vue";
+
+const selectedLeftBtn = ref("equity");
+const selectedRightBtn = ref("");
+const selectedContentBtn = ref(1);
+const selectedContentName = ref("立项");
+const isFullscreen = ref(false);
+const showPopup = ref(false);
+const currentProject = ref({});
+const popupStyle = ref({});
+
+const navList = reactive([
+  {
+    index: 1,
+    name: "立项",
+  },
+  {
+    index: 2,
+    name: "建设",
+  },
+  {
+    index: 3,
+    name: "运营",
+  },
+  {
+    index: 4,
+    name: "转让",
+  },
+  {
+    index: 5,
+    name: "退出",
+  },
+]);
+
+const selectLeftBtn = (btn) => {
+  selectedLeftBtn.value = btn;
+  selectedRightBtn.value = "";
+};
+
+const selectRightBtn = (btn) => {
+  selectedRightBtn.value = btn;
+  selectedLeftBtn.value = "";
+};
+
+const selectContentBtn = (item) => {
+  selectedContentBtn.value = item.index;
+  selectedContentName.value = item.name;
+};
+
+const showProjectPopup = (event) => {
+  currentProject.value = {
+    name: "项目001",
+    data: [
+      { label: "数据01", value: "3654.89", unit: "单位" },
+      { label: "数据02", value: "3654.89", unit: "单位" },
+      { label: "数据03", value: "3654.89", unit: "单位" },
+    ],
+  };
+  popupStyle.value = {
+    left: `${event.clientX}px`,
+    top: `${event.clientY - 100}px`,
+  };
+  showPopup.value = true;
+};
+
+// 全屏切换功能
+const toggleFullscreen = () => {
+  const homeContainer = document.querySelector(".home-container");
+
+  if (isFullscreen.value) {
+    // 退出全屏
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+      document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen();
+    }
+
+    homeContainer.style.height = "100%";
+  } else {
+    // 进入全屏
+    if (homeContainer.requestFullscreen) {
+      homeContainer.requestFullscreen();
+    } else if (homeContainer.webkitRequestFullscreen) {
+      homeContainer.webkitRequestFullscreen();
+    } else if (homeContainer.msRequestFullscreen) {
+      homeContainer.msRequestFullscreen();
+    }
+
+    homeContainer.style.height = "100vh";
+  }
+
+  isFullscreen.value = !isFullscreen.value;
+};
+
+// 监听全屏变化事件
+window.addEventListener("fullscreenchange", () => {
+  if (!document.fullscreenElement) {
+    isFullscreen.value = false;
+    const homeContainer = document.querySelector(".home-container");
+    if (homeContainer) homeContainer.style.height = "100%";
+  } else {
+    isFullscreen.value = true;
+    const homeContainer = document.querySelector(".home-container");
+    if (homeContainer) homeContainer.style.height = "100vh";
+  }
+});
+</script>
+
+<style scoped lang="less">
+.home-container {
+  // background-image: url("@/assets/images/bg.png");
+  // background-repeat: no-repeat;
+  // background-size: cover;
+  // background-position: center;
+  width: 100%;
+  height: 100%;
+  background-color: #04427e;
+  overflow: hidden;
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .header {
+    width: 100%;
+    .vh(height, 80);
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    .header-middile {
+      background-image: url("@/assets/images/header.png");
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: auto;
+      .font(28);
+      letter-spacing: 1px;
+      font-weight: 400;
+      font-family: "YouSheBiaoTiHei";
+      .vw(width,950);
+      height: 74px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .header-left {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .nav-btn {
+        .font(16);
+        cursor: pointer;
+        color: #fff;
+        font-family: YouSheBiaoTiYuan;
+        font-weight: 100;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &:not(.active) {
+          background-image: url("@/assets/images/left-btn.png");
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+          width: 155px;
+          height: 35px;
+          background-size: 100% 100%;
+        }
+
+        &.active {
+          background-image: url("@/assets/images/left-hlightBtn.png");
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+          width: 155px;
+          height: 35px;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .header-right {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .nav-btn {
+        .font(16);
+        cursor: pointer;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: YouSheBiaoTiYuan;
+        &:not(.active) {
+          background-image: url("@/assets/images/right-btn.png");
+          background-repeat: no-repeat;
+          background-position: center;
+          width: 155px;
+          height: 35px;
+          background-size: 100% 100%;
+        }
+
+        &.active {
+          background-image: url("@/assets/images/right-hight-btn.png");
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+          width: 155px;
+          height: 35px;
+          background-size: 100% 100%;
+        }
+      }
+    }
+  }
+  .content {
+    flex: 1;
+    .vw(padding-left, 20);
+    .vw(padding-right, 20);
+    .content-btn {
+      .vh(margin-top,-10);
+      .vh(margin-bottom,20);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span {
+        .font(14);
+        width: 110px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        flex-shrink: 0;
+        color: #fff; // 补充文字颜色（匹配蓝色按钮的白色文字）
+      }
+
+      // 立项按钮
+      :nth-child(1) {
+        background-repeat: no-repeat;
+        background-size: 80% 80%;
+        background-position: center;
+        width: 115px;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        &.active {
+          background-image: url("@/assets/images/立项.png");
+        }
+        &:not(.active) {
+          background-image: url("@/assets/images/initiation-default.png");
+        }
+      }
+
+      // 退出按钮
+      :nth-child(5) {
+        background-repeat: no-repeat;
+        background-size: 80% 80%;
+        background-position: center;
+        width: 111px;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        &.active {
+          background-image: url("@/assets/images/退出-active.png");
+        }
+        &:not(.active) {
+          background-image: url("@/assets/images/退出.png");
+        }
+      }
+
+      // 中间按钮（建设、运营、转止）
+      :nth-child(2),
+      :nth-child(3),
+      :nth-child(4) {
+        background-repeat: no-repeat;
+        background-size: 80% 80%;
+        background-position: center;
+        width: 115px;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        margin-left: -32px;
+        background-image: url("@/assets/images/default-btn.png");
+        &.active {
+          background-image: url("@/assets/images/nav-hight-btn.png");
+        }
+      }
+      :nth-child(5) {
+        margin-left: -31px;
+      }
+    }
+  }
+  .bottom {
+    background-image: url("@/assets/images/bottom.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    width: 100%;
+    .vh(height, 80);
+  }
+  .fullscreen-btn {
+    display: flex;
+    cursor: pointer;
+    span {
+      margin-left: auto;
+      color: white;
+      font-weight: 700;
+      .font(16);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+  }
+}
+</style>

src/views/homePage/index.vue

@@ -80,7 +80,7 @@ import { reactive, ref } from "vue";
 
 const selectedLeftBtn = ref("equity");
 const selectedRightBtn = ref("");
-const selectedContentBtn = ref(3);
+const selectedContentBtn = ref(2);
 const selectedContentName = ref("立项");
 const isFullscreen = ref(false);
 const showPopup = ref(false);