地图更新

src/components/CommonComplete.vue

@@ -77,18 +77,22 @@ const props = defineProps({
     .vw(padding, 10);
     background-image: url("@/assets/images/complete.png");
     background-repeat: no-repeat;
+    background-size: 100% 100%;
     .stat-card-title {
-      .font(12);
-      text-align: center;
+      .font(16);
+      .vh(margin-top,-8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
     .stat-card-value {
       .font(12);
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      .vh(margin-top,20);
+      .vh(margin-top,10);
       .card-value-top {
-        .vh(margin-bottom,10);
+        // .vh(margin-bottom,10);
       }
       .card-value-top,
       .card-value-bottom {
@@ -114,21 +118,21 @@ const props = defineProps({
           font-family: "Alibaba PuHuiTi";
         }
         .comparison-value {
-          color: #32d25a;
+          color: #ff4757;
           display: flex;
           align-items: center;
           gap: 2px;
 
           &.down-trend {
-            color: #ff4757;
+            color: #32d25a;
           }
 
           .trend-icon {
             .font(12);
-            color: #32d25a;
+            color: #ff4757;
 
             &.down-trend {
-              color: #ff4757;
+              color: #32d25a;
             }
           }
         }

src/components/CommonMap.vue

@@ -34,16 +34,12 @@ const handleInitMap = () => {
       const mapSize = map.getSize();
       mapSize.width < 780 ? map.setZoom(3.5) : map.setZoom(4);
       const minZoom = 4;
-      // map.on("zoomchange", function (e) {
-      //   map.getZoom() < 2 ? map.setZoom(minZoom) : map.setZoom(15);
-      // });
       handleDistrict();
       addPolylines();
       handleAddMarket(selectName);
     })
-    .catch((e) => {
-      // console.log(e);
-    });
+    .catch((e) => {});
+  // if (map) return true;
 };
 // 高亮和描边
 const handleDistrict = () => {
@@ -53,25 +49,9 @@ const handleDistrict = () => {
     level: "province", //查询行政级别为 市 province-省 district-市
   });
   let polygons = [];
-  let arr = ["中华人民共和国"]; //此处为高亮的市名
-  // arr.forEach((item) => {
   districtSearch.search("中华人民共和国", function (status, result) {
-    // 查询成功时，result即为对应的行政区信息
-    // map.remove(polygons); //清除上次结果
+    map.remove(polygons); //清除上次结果
     let bounds = result.districtList[0].boundaries;
-    // if (bounds) {
-    //   for (let i = 0, l = bounds.length; i < l; i++) {
-    //     //生成行政区划polygon
-    //     let polygon = new AMap.Polygon({
-    //       strokeWeight: 1,
-    //       path: bounds[i],
-    //       fillOpacity: 0.4,
-    //       fillColor: "#80d8ff",
-    //       strokeColor: "#0091ea",
-    //     });
-    //     polygons.push(polygon);
-    //   }
-    // }
     // 描边
     for (let i = 0; i < bounds.length; i++) {
       let outerPolyline = new AMap.Polyline({
@@ -85,7 +65,6 @@ const handleDistrict = () => {
     map.add(polygons);
     map.setFitView(polygons); //视口自适应
   });
-  // });
 };
 // 添加新路线
 const addPolylines = () => {
@@ -183,45 +162,45 @@ const handleAddMarket = (selectName) => {
   const markerData = {
     建设: [
       // 安徽
-      { number: 1, position: [117.27, 31.86] },
+      { number: 1, position: [117.27, 31.86], province: "安徽省" },
       // 广东
-      { number: 1, position: [113.2806, 23.1252] },
+      { number: 1, position: [113.2644, 23.1291], province: "广东省" },
       // 陕西
-      { number: 2, position: [112.5492, 37.857] },
+      { number: 2, position: [108.948, 34.2632], province: "陕西省" },
       // 广西
-      { number: 2, position: [108.3664, 22.8177] },
+      { number: 2, position: [108.32, 22.824], province: "广西壮族自治区" },
       // 山东
-      { number: 2, position: [121.6167, 38.9167] },
+      { number: 2, position: [117.0009, 36.6758], province: "山东省" },
       // 河北
-      { number: 1, position: [114.52, 38.05] },
+      { number: 1, position: [114.5025, 38.0455], province: "河北省" },
     ],
     试运营: [
       // 四川
-      { number: 2, position: [117.27, 31.86] },
+      { number: 2, position: [104.066, 30.5728], province: "四川省" },
       // 山东
-      { number: 3, position: [121.6167, 38.9167] },
+      { number: 3, position: [117.0009, 36.6758], province: "山东省" },
       // 云南
-      { number: 1, position: [102.7333, 25.05] },
+      { number: 1, position: [102.7123, 25.0406], province: "云南省" },
       // 陕西
-      { number: 3, position: [112.5492, 37.857] },
+      { number: 3, position: [108.948, 34.2632], province: "陕西省" },
       // 广西
-      { number: 1, position: [108.3664, 22.8177] },
+      { number: 1, position: [108.32, 22.824], province: "广西壮族自治区" },
       // 湖北
-      { number: 1, position: [114.3052, 30.5929] },
+      { number: 1, position: [114.2986, 30.5844], province: "湖北省" },
     ],
     运营: [
       // 四川
-      { number: 1, position: [117.27, 31.86] },
+      { number: 1, position: [104.066, 30.5728], province: "四川省" },
       // 山东
-      { number: 1, position: [121.6167, 38.9167] },
+      { number: 1, position: [117.0009, 36.6758], province: "山东省" },
       // 湖北
-      { number: 1, position: [114.3052, 30.5929] },
+      { number: 1, position: [114.2986, 30.5844], province: "湖北省" },
     ],
     退出: [
       // 河南
-      { number: 3, position: [113.65, 34.7667] },
+      { number: 3, position: [113.6654, 34.757], province: "河南省" },
     ],
-    立项: [], // 立项没有标记
+    // 立项: [],
   };
 
   const positionsList = markerData[selectName] || [];
@@ -233,16 +212,49 @@ const handleAddMarket = (selectName) => {
 
   // 创建新的标记
   for (var i = 0; i < positionsList.length; i++) {
+    const markerData = positionsList[i];
+
+    // 创建悬浮窗口内容
+    const infoContent = `
+      <div class="marker-info-window">
+        <div class="marker-info-title">${markerData.province}</div>
+        <div class="marker-info-content">
+          <span class="marker-info-label">路线数量:</span>
+          <span class="marker-info-value">${markerData.number}</span>
+          <span class="marker-info-unit">个</span>
+        </div>
+      </div>
+    `;
+
+    // 创建信息窗口实例
+    const infoWindow = new AMap.InfoWindow({
+      isCustom: true,
+      content: infoContent,
+      offset: new AMap.Pixel(0, -35),
+      closeWhenClickMap: true,
+    });
+
     const marker = new AMap.Marker({
       map: map,
-      position: positionsList[i].position,
+      position: markerData.position,
       offset: new AMap.Pixel(-13, -30),
       content:
         '<div class="custom-content-marker">' +
-        '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png">' +
-        `<div class="anchorPoint">${positionsList[i].number}</div>` +
+        '<img src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" style="width: 40px;height: 40px;">' +
+        `<div class="anchorPoint">${markerData.number}</div>` +
         "</div>",
     });
+
+    // 鼠标悬浮事件
+    marker.on("mouseover", function (e) {
+      infoWindow.open(map, e.lnglat);
+    });
+
+    // 鼠标移出事件
+    marker.on("mouseout", function () {
+      infoWindow.close();
+    });
+
     currentMarkers.push(marker);
   }
 };
@@ -263,7 +275,10 @@ onMounted(() => {
 <style scoped lang="less">
 .tourism {
   width: 100%;
-  .vh(height, 709);
+  .vh(height, 600);
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
 }
 .custom-content-marker {
   position: relative;
@@ -324,6 +339,50 @@ onMounted(() => {
   transform: translate(-50%, -50%);
 }
 
+// 标记悬浮窗口样式
+:deep(.marker-info-window) {
+  background: #04427e;
+  border: 1px solid #00ddeb;
+  border-radius: 6px;
+  padding: 8px 12px;
+  box-shadow: 0 2px 8px rgba(0, 221, 235, 0.3);
+  backdrop-filter: blur(4px);
+  min-width: 120px;
+}
+
+:deep(.marker-info-title) {
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  margin-bottom: 4px;
+  border-bottom: 1px solid rgba(0, 221, 235, 0.3);
+  padding-bottom: 2px;
+}
+
+:deep(.marker-info-content) {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+:deep(.marker-info-label) {
+  font-size: 12px;
+  color: #93d2ff;
+  font-weight: 400;
+}
+
+:deep(.marker-info-value) {
+  font-size: 16px;
+  font-weight: 600;
+  color: #00ddeb;
+}
+
+:deep(.marker-info-unit) {
+  font-size: 12px;
+  color: #93d2ff;
+  margin-left: 2px;
+}
+
 :deep(.amap-logo) {
   display: none;
   opacity: 0 !important;

src/components/CommonTotal.vue

@@ -5,6 +5,7 @@
         <div class="stat-card-title">{{ item.title }}</div>
         <div class="stat-card-value" @click="handleDetail(item)">
           {{ item.value }}
+          <span class="unit" v-if="item.value !== '*'">{{ item.unit }}</span>
         </div>
       </div>
     </div>
@@ -74,12 +75,12 @@ const currentPage = ref(1);
 const pageSize = ref(10);
 const tableTotal = ref(0);
 
-const generateTableData = () => {
+const generateTableData = (value) => {
   const data = [];
   const types = ["类型A", "类型B", "类型C"];
   const statuses = ["active", "inactive"];
 
-  for (let i = 1; i <= 10; i++) {
+  for (let i = 1; i <= value; i++) {
     data.push({
       id: i,
       name: `项目${i}`,
@@ -99,7 +100,8 @@ const generateTableData = () => {
 const handleDetail = (item) => {
   dialogVisible.value = true;
   dialogTitle.value = item.title;
-  tableData.value = generateTableData();
+  let currentValue = item.unit === "个" ? item.value : "";
+  tableData.value = generateTableData(currentValue);
 };
 
 // 分页处理
@@ -137,7 +139,7 @@ onMounted(() => {});
     display: flex;
     .stat-card {
       .vw(width, 180);
-      .vh(height, 90);
+      // .vh(height, 90);
       .vw(border-radius, 5);
       .vw(padding, 10);
       .vw(margin-right,10);
@@ -148,12 +150,17 @@ onMounted(() => {});
       flex-direction: column;
       justify-content: space-between;
       .stat-card-title {
-        .font(12);
+        .font(16);
+        // white-space: nowrap;
       }
       .stat-card-value {
         .font(18);
         cursor: pointer;
+        color: @Color;
         font-family: "DIN";
+        .unit {
+          .font(10);
+        }
       }
     }
     :last-child {

src/views/homePage/components/Construct.vue

 <template>
   <div class="construct-container">
     <div class="construct-left">
-      <div class="tag-image">
+      <!-- <div class="tag-image">
         <img src="@/assets/images/建设.png" />
-      </div>
+      </div> -->
       <div class="construct-left-map">
         <Map />
       </div>
@@ -60,26 +60,27 @@ defineOptions({
 });
 // 使用shallowReactive减少深层响应式开销
 const projectList = shallowReactive([
-  { title: "总个数（个）", value: "10" },
-  { title: "总投资（亿元）", value: "1334.05" },
-  { title: "总规模（公里）", value: "1051.56" },
+  { title: "总个数", value: "10", unit: "个" },
+  { title: "总投资", value: "1334.05", unit: "亿元" },
+  { title: "总规模", value: "1051.56", unit: "公里" },
 ]);
 const investmentList = shallowReactive([
-  { title: "10月完成投资（亿元）", value: "*" },
-  { title: "2025年完成投资（亿元）", value: "*" },
-  { title: "累计完成投资（亿元）", value: "*" },
+  { title: "10月完成投资", value: "*", unit: "亿元" },
+  { title: "2025年完成投资", value: "*", unit: "亿元" },
+  { title: "累计完成投资", value: "*", unit: "亿元" },
 ]);
 // recycleList
 const recycleList = shallowReactive([
-  { title: "10月完成投资（亿元）", value: "*" },
-  { title: "2025年完成投资（亿元）", value: "*" },
-  { title: "完成率", value: "*" },
+  { title: "10月完成投资", value: "*", unit: "亿元" },
+  { title: "2025年完成投资", value: "*", unit: "亿元" },
+  { title: "完成率", value: "*", unit: "" },
 ]);
 </script>
 
 <style scoped lang="less">
 .construct-container {
   display: flex;
+  .vh(margin-top,10);
   .construct-left {
     width: 100%;
     height: 100%;
@@ -97,6 +98,7 @@ const recycleList = shallowReactive([
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    .vh(height,700);
     .info-title {
       .vw(width, 180);
       .vh(height, 30);

src/views/homePage/components/Operation.vue

 <template>
   <div class="construct-container">
     <div class="construct-left">
-      <div class="tag-image">
+      <!-- <div class="tag-image">
         <img src="@/assets/images/建设.png" />
-      </div>
+      </div> -->
       <div class="construct-left-map">
         <Map />
       </div>
@@ -52,19 +52,19 @@ defineOptions({
 });
 // 使用shallowReactive减少深层响应式开销
 const projectList = shallowReactive([
-  { title: "总个数（个）", value: "2" },
-  { title: "总投资（亿元）", value: "114.23" },
-  { title: "总规模（公里）", value: "233.22" },
+  { title: "总个数", value: "2", unit: "个" },
+  { title: "总投资", value: "114.23", unit: "亿元" },
+  { title: "总规模", value: "233.22", unit: "公里" },
 ]);
 const investmentList = shallowReactive([
-  { title: "10月完成投资（亿元）", value: "*" },
-  { title: "2025年完成投资（亿元）", value: "*" },
-  { title: "累计完成投资（亿元）", value: "*" },
+  { title: "10月完成投资", value: "*", unit: "亿元" },
+  { title: "2025年完成投资", value: "*", unit: "亿元" },
+  { title: "累计完成投资", value: "*", unit: "亿元" },
 ]);
 const recycleList = shallowReactive([
-  { title: "10月完成投资（亿元）", value: "*" },
-  { title: "2025年完成投资（亿元）", value: "*" },
-  { title: "完成率", value: "*" },
+  { title: "10月完成投资", value: "*", unit: "亿元" },
+  { title: "2025年完成投资", value: "*", unit: "亿元" },
+  { title: "完成率", value: "*", unit: "" },
 ]);
 const operationList = shallowReactive([
   { title: "营业收入完成进度", value: "*", actualValue: "*", planValue: "*" },
@@ -122,13 +122,14 @@ const completeList = shallowReactive([
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    .vh(height,612);
     .info-title {
       .vw(width, 180);
       .vh(height, 30);
       .vh(line-height, 30);
       .font(16);
       .vw(padding-left,20);
-      .vh(margin-bottom,15);
+      .vh(margin-bottom,10);
       .vh(margin-top,15);
       text-align: left;
       color: #fff;

src/views/homePage/components/ProjectApproval.vue

@@ -34,21 +34,21 @@ const mapRef = ref(null);
 // 使用静态数据避免重复创建
 const STATIC_DATA = {
   立项: [
-    { title: "总个数（个）", value: "0" },
-    { title: "总投资（亿元）", value: "0" },
-    { title: "总规模（公里）", value: "0" },
+    { title: "总个数", value: "0", unit: "个" },
+    { title: "总投资", value: "0", unit: "亿元" },
+    { title: "总规模", value: "0", unit: "公里" },
   ],
   转让: [
-    { title: "总个数（个）", value: "59" },
-    { title: "总投资（亿元）", value: "2733.35" },
-    { title: "总规模（公里）", value: "5116.72" },
-    { title: "累计完成投资（亿元）", value: "3116.44" },
+    { title: "总个数", value: "59", unit: "个" },
+    { title: "总投资", value: "2733.35", unit: "亿元" },
+    { title: "总规模", value: "5116.72", unit: "公里" },
+    { title: "累计完成投资", value: "3116.44", unit: "亿元" },
   ],
   退出: [
-    { title: "总个数（个）", value: "3" },
-    { title: "总投资（亿元）", value: "141.29" },
-    { title: "总规模（公里）", value: "108.35" },
-    { title: "累计完成投资（亿元）", value: "0" },
+    { title: "总个数", value: "3", unit: "个" },
+    { title: "总投资", value: "141.29", unit: "亿元" },
+    { title: "总规模", value: "108.35", unit: "公里" },
+    { title: "累计完成投资", value: "0", unit: "亿元" },
   ],
 };
 
@@ -74,5 +74,6 @@ watch(
 .project-container {
   display: flex;
   justify-content: center;
+  .vh(margin-top, 20);
 }
 </style>

src/views/homePage/components/trialOperations.vue

 <template>
   <div class="construct-container">
     <div class="construct-left">
-      <div class="tag-image">
+      <!-- <div class="tag-image">
         <img src="@/assets/images/建设.png" />
-      </div>
+      </div> -->
       <div class="construct-left-map">
         <Map />
       </div>
@@ -52,19 +52,19 @@ defineOptions({
 });
 // 使用shallowReactive减少深层响应式开销
 const projectList = shallowReactive([
-  { title: "总个数（个）", value: "9" },
-  { title: "总投资（亿元）", value: "2733.35" },
-  { title: "总规模（公里）", value: "5116.72" },
+  { title: "总个数", value: "9", unit: "个" },
+  { title: "总投资", value: "1151.36", unit: "亿元" },
+  { title: "总规模", value: "945.67", unit: "公里" },
 ]);
 const investmentList = shallowReactive([
-  { title: "10月完成投资（亿元）", value: "*" },
-  { title: "2025年完成投资（亿元）", value: "*" },
-  { title: "累计完成投资（亿元）", value: "*" },
+  { title: "10月完成投资", value: "*", unit: "亿元" },
+  { title: "2025年完成投资", value: "*", unit: "亿元" },
+  { title: "累计完成投资", value: "*", unit: "亿元" },
 ]);
 const recycleList = shallowReactive([
-  { title: "10月完成投资（亿元）", value: "*" },
-  { title: "2025年完成投资（亿元）", value: "*" },
-  { title: "完成率", value: "*" },
+  { title: "10月完成投资", value: "*", unit: "亿元" },
+  { title: "2025年完成投资", value: "*", unit: "亿元" },
+  { title: "完成率", value: "*", unit: "" },
 ]);
 const operationList = shallowReactive([
   {
@@ -137,13 +137,14 @@ const completeList = shallowReactive([
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    .vh(height,612);
     .info-title {
       .vw(width, 180);
       .vh(height, 30);
       .vh(line-height, 30);
       .font(16);
       .vw(padding-left,20);
-      .vh(margin-bottom,15);
+      .vh(margin-bottom,10);
       .vh(margin-top,15);
       text-align: left;
       color: #fff;

src/views/homePage/index.vue

@@ -17,9 +17,7 @@
           固定资产投资
         </div>
       </div>
-      <div class="header-middile">
-        葛洲坝集团交通投资有限公司投资决策分析系统
-      </div>
+      <div class="header-middile"></div>
       <div class="header-right">
         <div
           class="nav-btn"
@@ -55,15 +53,15 @@
           >{{ item.name }}
         </span>
       </div>
-      <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
-        <ProjectApproval
-          :currentName="selectedContentName"
-          v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
-        />
-        <Construct v-else-if="selectedContentBtn === 2" />
-        <Operation v-else-if="selectedContentBtn === 4" />
-        <TrialOperations v-else-if="selectedContentBtn === 3" />
-      </keep-alive>
+      <!-- <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations"> -->
+      <ProjectApproval
+        :currentName="selectedContentName"
+        v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
+      />
+      <Construct v-else-if="selectedContentBtn === 2" />
+      <Operation v-else-if="selectedContentBtn === 4" />
+      <TrialOperations v-else-if="selectedContentBtn === 3" />
+      <!-- </keep-alive> -->
     </div>
     <div class="bottom"></div>
   </div>
@@ -223,7 +221,7 @@ window.addEventListener("fullscreenchange", () => {
     justify-content: center;
     align-items: flex-end;
     .header-middile {
-      background-image: url("@/assets/images/header.png");
+      background-image: url("@/assets/images/头部bg.png");
       background-repeat: no-repeat;
       background-position: center;
       // background-size: 170% 100%;
@@ -312,9 +310,10 @@ window.addEventListener("fullscreenchange", () => {
     flex: 1;
     .vw(padding-left, 20);
     .vw(padding-right, 20);
+    .vh(margin-top,-16px);
     .content-btn {
-      .vh(margin-top,-10);
-      .vh(margin-bottom,20);
+      // .vh(margin-top,0);
+      // .vh(margin-bottom,20);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -393,7 +392,7 @@ window.addEventListener("fullscreenchange", () => {
     background-size: cover;
     background-position: center;
     width: 100%;
-    .vh(height, 80);
+    .vh(height, 110);
   }
   .fullscreen-btn {
     display: flex;

src/views/systemManage/departManage.vue

@@ -426,15 +426,14 @@ onMounted(() => {
   background: rgba(157, 188, 218, 0.1);
   height: 100%;
   display: flex;
+  // flex-direction: row;
+  // box-sizing: border-box;
   .search-origin {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 8px;
     padding: 20px;
     margin-right: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    flex-shrink: 3;
-    width: 400px;
-    height: 845px;
   }
   .origin-title {
     display: flex;
@@ -526,7 +525,4 @@ onMounted(() => {
     color: white !important;
   }
 }
-// :deep(.el-tree-node > .el-tree-node__children) {
-//   background-color: rgba(37, 97, 239, 1) !important;
-// }
 </style>