大屏开发

src/assets/fonts/font.less

@@ -15,14 +15,20 @@
 
 @font-face {
   font-family: 'DIN';
-  src: url('../fonts/0.otf') format('woff'); 
+  src: url('../fonts/DIN.otf') format('woff'); 
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DINBold';
+  src: url('../fonts/DINBold.woff'); 
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Alibaba PuHuiTi';
-  src: url('../fonts/2.otf') format('woff'); 
+  src: url('../fonts/AlibabaPuHuiTi.otf') format('woff'); 
   font-weight: normal;
   font-style: normal;
 }
\ No newline at end of file

src/components/CommonMap.vue

@@ -18,16 +18,16 @@ const emit = defineEmits(["province-selected"]);
 import gansuLine from "./newLine.json";
 let map = null;
 window._AMapSecurityConfig = {
-  securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
-  // securityJsCode: "7aee6d6553ba9a8178e0c57b60a51481",
+  securityJsCode: "7aee6d6553ba9a8178e0c57b60a51481",
 };
+let geojsonObj = null;
+
 // 初始化地图
 const handleInitMap = () => {
   let selectName = sessionStorage.getItem("selectedContentBtn");
   AMapLoader.load({
-    key: "c691971f068b92c897fb908c4ddef6d4", // 申请好的Web端开发者Key
-    // key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
-    version: "2.0",
+    key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
+    // version: "2.0",
     plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
   })
     .then((AMap) => {
@@ -37,8 +37,7 @@ const handleInitMap = () => {
         zoom: 4, //根据屏幕宽度设置初始化地图级别
         center: [100.808299, 35.791787], //初始化地图中心点位置
         expandZoomRange: true, // 开启显示范围设置
-        mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
-        // mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
+        mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
         rotateEnable: false, // 是否可以旋转
         copyrightControl: false,
         logoControl: false,
@@ -50,21 +49,31 @@ const handleInitMap = () => {
       //   map.setZoom(3.5);
       // }
       handleDistrict();
-      addPolylines();
-      handleAddMarket(selectName);
+      // addPolylines();
+      // handleAddMarket(selectName);
+      map.on("zoomend", () => {
+        let zoom = map.getZoom();
+        console.log(zoom)
+        if (zoom === 7) {
+          addPolylines();
+        } else if (zoom < 7) {
+          console.log(geojsonObj);
+          geojsonObj && map.remove(geojsonObj);
+        }
+      });
     })
     .catch((e) => {});
 };
 // 高亮和描边
 const handleDistrict = () => {
   let districtSearch = new AMap.DistrictSearch({
-    subdistrict: 0, //获取边界不需要返回下级行政区
+    subdistrict: 1, //获取边界不需要返回下级行政区
     extensions: "all", //返回行政区边界坐标组等具体信息
-    level: "province", //查询行政级别为 市 province-省 district-
+    level: "country", //查询行政级别为 市 province-省 district-
   });
-  let polygons = [];
-  districtSearch.search("中华人民共和国", function (status, result) {
-    map.remove(polygons); //清除上次结果
+  // let polygons = [];
+  districtSearch.search("中国", function (status, result) {
+    // map.remove(polygons); //清除上次结果
     let bounds = result.districtList[0].boundaries;
     // 描边
     for (let i = 0; i < bounds.length; i++) {
@@ -75,14 +84,25 @@ const handleDistrict = () => {
         map: map,
       });
       map.add(outerPolyline);
+      // const chinaBg = new AMap.Polygon({
+      //     path: bounds[i],
+      //     fillColor: "#026CB7",      // 背景色
+      //     fillOpacity: 0.5,          // 透明度
+      //     strokeColor: "#026CB7", // 浅蓝色边框
+      //     strokeWeight: 1,
+      //     strokeOpacity: 1,
+      //     zIndex: 10,
+      //     bubble: false
+      // });
+      // map.add(chinaBg);
     }
-    map.add(polygons);
-    map.setFitView(polygons); //视口自适应
+    // map.add(polygons);
+    // map.setFitView(polygons); //视口自适应
   });
 };
 // 添加新路线
 const addPolylines = () => {
-  let geojsonObj = new AMap.GeoJSON({
+  geojsonObj = new AMap.GeoJSON({
     geoJSON: gansuLine,
     getPolyline: function (geojson, lnglats) {
       // 生成路线
@@ -93,17 +113,17 @@ const addPolylines = () => {
         extData: geojson.properties, // 自定义属性数据
       });
       // 生成新的路线，用于覆盖旧的
-      const newPolyline = new AMap.Polyline({
-        path: lnglats,
-        strokeWeight: 4,
-        strokeColor: "#00DDEB",
-        isOutline: true,
-        borderWeight: 2,
-        outlineColor: "rgba(0, 221, 235, 1)",
-        cursor: "pointer",
-      });
-      map.add(newPolyline);
-      newPolyline.hide();
+      // newPolyline = new AMap.Polyline({
+      //   path: lnglats,
+      //   strokeWeight: 4,
+      //   strokeColor: "#00DDEB",
+      //   isOutline: true,
+      //   borderWeight: 2,
+      //   outlineColor: "rgba(0, 221, 235, 1)",
+      //   cursor: "pointer",
+      // });
+      // map.add(newPolyline);
+      // newPolyline.hide();
 
       // 获取路线数据
       const properties = polylineObj.getExtData();
@@ -136,18 +156,18 @@ const addPolylines = () => {
       });
 
       // 鼠标经过
-      polylineObj.on("mouseover", function (e) {
-        newPolyline.show();
-        infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
-      });
-      // 鼠标移出
-      polylineObj.on("mouseout", function (e) {
-        newPolyline.hide();
-        infoWindow.close();
-      });
+      // polylineObj.on("mouseover", function (e) {
+      //   newPolyline.show();
+      //   infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
+      // });
+      // // 鼠标移出
+      // polylineObj.on("mouseout", function (e) {
+      //   newPolyline.hide();
+      //   infoWindow.close();
+      // });
 
-      // 鼠标双击
-      polylineObj.on("dblclick", function (e) {});
+      // // 鼠标双击
+      // polylineObj.on("dblclick", function (e) {});
       return polylineObj;
     },
   });
@@ -383,7 +403,7 @@ defineExpose({
 onMounted(() => {
   handleInitMap();
   // 监听窗口大小变化
-  window.addEventListener("resize", handleResize);
+  // window.addEventListener("resize", handleResize);
 });
 
 // 处理窗口大小变化

src/views/homePage/index.vue

@@ -3,35 +3,23 @@
     <div class="header">
       <div class="header-left">
         <div
-          class="nav-btn"
-          :class="{ active: selectedLeftBtn === 'equity' }"
-          @click="selectLeftBtn('equity')"
+          class="nav-btn" v-for="item in navLeftBtns" :key="item.key"
+          :class="{ active: selectedBtn === item.key }"
+          @click="changeBtn(item.key)"
         >
-          股权投资
-        </div>
-        <div
-          class="nav-btn"
-          :class="{ active: selectedLeftBtn === 'risk' }"
-          @click="selectLeftBtn('risk')"
-        >
-          固定资产投资
+          <span>{{item.name}}</span>
         </div>
       </div>
-      <div class="header-middile"></div>
+      <div class="header-middile">
+        <span>葛洲坝集团交通投资有限公司投资决策分析系统</span>
+      </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')"
+          class="nav-btn" v-for="item in navRightBtns" :key="item.key"
+          :class="{ active: selectedBtn === item.key }"
+          @click="changeBtn(item.key)"
         >
-          融资建设投资
+          <span>{{item.name}}</span>
         </div>
       </div>
       <div class="header-fullscreen">
@@ -43,72 +31,253 @@
         </span>
       </div>
     </div>
-    <div class="content">
-      <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 class="nav-list">
+      <span
+        v-for="item in navList"
+        :key="item.index"
+        :class="{ active: selectedContentBtn === item.key }"
+        @click="selectContentBtn(item)"
+        >{{ item.name }}
+      </span>
+    </div>
+    <div class="map-container">
+      <div class="map-content">
+        <div class="info-top-wrap" v-if="['lixiang', 'tuichu'].includes(selectedContentBtn)">
+          <div class="data-info">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn]" :key="idx"
+               @click="handleDetail(item)"
+            >
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-value">
+                {{ item.value }}
+                <span class="item-unit">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="info-right-wrap" v-else-if="selectedContentBtn === 'jianshe'">
+          <div class="info-title">项目概况</div>
+          <div class="data-info">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].gaikuang" :key="idx"
+               @click="handleDetail(item)"
+            >
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-value">
+                {{ item.value }}
+                <span class="item-unit">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="info-title">投资完成情况</div>
+          <div class="data-info">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].tzwcqk" :key="idx"
+               @click="handleDetail(item)"
+            >
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-value">
+                {{ item.value }}
+                <span class="item-unit">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="info-title">投资完成情况</div>
+          <div class="info-progress">
+            <div class="progress-pie" ref="progressPie"></div>
+            <div class="progress-bar">
+              <div class="progress-text">19.72/58.42亿元</div>
+              <div class="progress-image">
+                <div class="progress-show-value"></div>
+                <!-- rel100%宽在css上占父元素的85%，进度样式上要做换算 -->
+                <div
+                  class="progress-show-value-rel"
+                  :style="{ width: `${33.8 * 85 / 100}%` }"
+                ></div>
+              </div>
+            </div>
+          </div>
+          <div class="info-title">投资回收完成情况</div>
+          <div class="data-info">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].tzhswcqk" :key="idx"
+               @click="handleDetail(item)"
+            >
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-value">
+                {{ item.value }}
+                <span class="item-unit">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="info-right-wrap" v-else-if="['shiyunying', 'yunying'].includes(selectedContentBtn)">
+          <div class="info-title">项目概况</div>
+          <div class="data-info">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].gaikuang" :key="idx"
+               @click="handleDetail(item)"
+            >
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-value">
+                {{ item.value }}
+                <span class="item-unit">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+          <template v-if="infoObj[selectedContentBtn].tzwcqk">
+            <div class="info-title">投资完成情况</div>
+            <div class="data-info">
+              <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].tzwcqk" :key="idx">
+                <div class="item-title">{{ item.title }}</div>
+                <div class="item-value">
+                  {{ item.value }}
+                  <span class="item-unit">{{ item.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </template>
+          <div class="info-title">经营计划完成情况</div>
+          <div class="data-info-large">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].jyjhwcqk" :key="idx">
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-content">
+                <div class="target-item" v-for="(target, index) in item.data" :key="index"
+                  :class="{'target-small': target.size === 'small'}"
+                >
+                  <div class="target-name">{{ target.name }}</div>
+                  <div class="target-value">{{ target.value }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="info-title">投资回收完成情况</div>
+          <div class="data-info">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].tzhswcqk" :key="idx">
+              <div class="item-title">{{ item.title }}</div>
+              <div class="item-value">
+                {{ item.value }}
+                <span class="item-unit">{{ item.unit }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="info-title">2025经营计划完成进度</div>
+          <div class="data-info-large">
+            <div class="info-item" v-for="(item, idx) in infoObj[selectedContentBtn].jyjhwcjd" :key="idx">
+              <div class="item-content">
+                <div class="target-item" v-for="(target, index) in item.data" :key="index">
+                  <div class="target-name">{{ target.name }}</div>
+                  <div class="target-value">{{ target.value }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Map ref="mapRef" />
+        <div class="back-to-country-btn" @click="backToCountry" v-show="showBackBtn">
+          返回全国
+        </div>
       </div>
-      <keep-alive include="ProjectApproval,Construct,Operation,TrialOperations">
-        <ProjectApproval
-          :currentName="selectedContentName"
-          :isFullscreen="isFullscreen"
-          v-if="selectedContentBtn === 1 || selectedContentBtn === 6"
-        />
-        <Construct
-          :isFullscreen="isFullscreen"
-          v-else-if="selectedContentBtn === 2"
-        />
-        <Operation
-          :isFullscreen="isFullscreen"
-          v-else-if="selectedContentBtn === 4"
-        />
-        <TrialOperations
-          :isFullscreen="isFullscreen"
-          v-else-if="selectedContentBtn === 3"
-        />
-      </keep-alive>
+
     </div>
     <div class="bottom"></div>
+    <!-- 详情信息 -->
+    <el-dialog
+      :title="dialogTitle + '详情'"
+      v-model="dialogVisible"
+      width="80%"
+      :before-close="handleClose"
+    >
+      <div class="dialog-content">
+        <div class="table-wrap">
+          <el-table :data="tableData" style="width: 100%" empty-text="暂无数据">
+            <el-table-column type="index"
+              width="60" label="序号" :align="'center'"
+            />
+            <el-table-column prop="name" label="项目名称" :align="'center'" width="120"/>
+            <el-table-column prop="qy" label="项目区域" :align="'center'" width="100" />
+            <el-table-column prop="jsgm" label="建设规模" :align="'center'">
+              <el-table-column prop="zlc" label="总里程（KM)" :align="'center'" />
+              <el-table-column prop="cds" label="车道数" :align="'center'" />
+              <el-table-column prop="qsb" label="桥隧比" :align="'center'" />
+            </el-table-column>
+            <el-table-column prop="jsq" label="建设期（年）" :align="'center'" />
+            <el-table-column prop="yyqnx" label="运营期年限（年）" :align="'center'" width="100" />
+            <el-table-column prop="jcztz" label="决策总投资" :align="'center'" width="110" />
+            <el-table-column prop="jczt" label="决策主体" :align="'center'" width="100" />
+            <el-table-column prop="jcsj" label="决策时间" width="110" :align="'center'"/>
+            <el-table-column prop="sfPPP" label="是否是PPP项目" :align="'center'" width="100" />
+            <el-table-column prop="xmmyms" label="项目名义模式" :align="'center'" width="110" />
+            <el-table-column prop="sjms" label="实际模式" :align="'center'" width="150" />
+            <el-table-column prop="gqjg" label="股权结构" :align="'center'"  width="100"/>
+            <el-table-column prop="xmzt" label="项目状态" :align="'center'" width="100" />
+            <el-table-column prop="tcsj" label="通车时间" width="110" :align="'center'"/>
+            <el-table-column prop="hbfs" label="回报方式" :align="'center'" width="150" />
+          </el-table>
+        </div>
+        <!-- <div class="page-wrap">
+          <el-pagination background layout="prev, pager, next" :total="1000" />
+        </div> -->
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="handleClose">取 消</el-button>
+          <el-button type="primary" @click="handleClose"
+            >确 定</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <script setup>
-import Construct from "./components/Construct.vue";
-import ProjectApproval from "./components/ProjectApproval.vue";
-import Operation from "./components/Operation.vue";
-import TrialOperations from "./components/trialOperations.vue";
-import { reactive, ref, nextTick, watch, onMounted } from "vue";
+import Map from "@/components/CommonMap.vue";
+import { reactive, ref, nextTick, watch, onMounted, onUnmounted } from "vue";
+import * as echarts from "echarts";
 
-const selectedLeftBtn = ref("equity");
-const selectedRightBtn = ref("");
-const selectedContentBtn = ref(1);
+const navLeftBtns = reactive([
+  {
+    key: "equity",
+    name: "股权投资"
+  },
+  {
+    key: "risk",
+    name: "固定资产投资"
+  }
+]);
+const navRightBtns = reactive([
+  {
+    key: "realestate",
+    name: "房地产投资"
+  },
+  {
+    key: "finance",
+    name: "融资建设投资"
+  }
+]);
+const selectedBtn = ref("equity");
+const selectedContentBtn = ref("lixiang");
 const selectedContentName = ref("立项");
 const isFullscreen = ref(false);
-const showPopup = ref(false);
-const currentProject = ref({});
-const popupStyle = ref({});
+const showBackBtn = ref(false);
 
 const navList = reactive([
   {
     index: 1,
     name: "立项",
+    key: "lixiang"
   },
   {
     index: 2,
     name: "建设",
+    key: "jianshe"
   },
   {
     index: 3,
     name: "试运营",
+    key: "shiyunying"
   },
   {
     index: 4,
     name: "运营",
+    key: "yunying"
   },
   // {
   //   index: 5,
@@ -117,17 +286,814 @@ const navList = reactive([
   {
     index: 6,
     name: "退出",
+    key: "tuichu"
   },
 ]);
+const infoObj = reactive({
+  lixiang: [
+    {
+      title: "总个数", value: "0", unit: "个",
+      data: [
+        {
+          name: "/",
+          qy: "/",
+          zlc: "/",
+          cds: "/",
+          qsb: "/",
+          jsq: "/",
+          yyqnx: "/",
+          jcztz: "/",
+          jczt: "/",
+          jcsj: "/",
+          sfPPP: "/",
+          xmmyms: "/",
+          sjms: "/",
+          gqjg: "/",
+          xmzt: "/",
+          tcsj: "/",
+          hbfs: "/",
+        }
+      ]
+    },
+    { title: "总投资", value: "0", unit: "亿元" },
+    { title: "总规模", value: "0", unit: "公里" }
+  ],
+  jianshe: {
+    gaikuang: [
+      {
+        title: "总个数", value: "10", unit: "个",
+        data: [
+          {
+            name: "和襄高速",
+            qy: "安徽",
+            zlc: "170.6",
+            cds: "4/6",
+            qsb: "29.50%",
+            jsq: "3",
+            yyqnx: "29.5",
+            jcztz: "247.54",
+            jczt: "中国能建",
+            jcsj: "2023/1/11",
+            sfPPP: "是",
+            xmmyms: "BOT+建设期投资补助",
+            sjms: "BOT+车购税资金50.63亿元",
+            gqjg: "控股",
+            xmzt: "在建",
+            tcsj: "预计2025/12/31",
+            hbfs: "使用者付费"
+          },
+          {
+            name: "肇明高速",
+            qy: "广东",
+            zlc: "98.43",
+            cds: "6",
+            qsb: "55.12%",
+            jsq: "3",
+            yyqnx: "25",
+            jcztz: "214.94",
+            jczt: "中国能建",
+            jcsj: "2019/12/12",
+            sfPPP: "否",
+            xmmyms: "BOT+施工总承包+政府补助",
+            sjms: "BOT+政府股权投资",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2029/6/30",
+            hbfs: "使用者付费"
+          },
+          {
+            name: "延安东高速",
+            qy: "陕西",
+            zlc: "57.16",
+            cds: "4",
+            qsb: "49.7%",
+            jsq: "3",
+            yyqnx: "30",
+            jcztz: "85.94",
+            jczt: "中国能建",
+            jcsj: "2020/6/29",
+            sfPPP: "是",
+            xmmyms: "PPP",
+            sjms: "BOT+90%工可车流量延期条件兜底",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2025/12/15",
+            hbfs: "使用者付费（有合作期末延长收费期条款）"
+          },
+          {
+            name: "关环高速",
+            qy: "陕西",
+            zlc: "73.74",
+            cds: "4",
+            qsb: "29.38%",
+            jsq: "4",
+            yyqnx: "30",
+            jcztz: "71.84",
+            jczt: "中国能建",
+            jcsj: "2020/8/4",
+            sfPPP: "是",
+            xmmyms: "PPP",
+            sjms: "BOT+定补",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2028/9/30",
+            hbfs: "使用者付费+政府固定补助"
+          },
+          {
+            name: "横钦高速",
+            qy: "广西",
+            zlc: "166.024",
+            cds: "4",
+            qsb: "15.85%",
+            jsq: "4",
+            yyqnx: "30",
+            jcztz: "208.32",
+            jczt: "中国能建",
+            jcsj: "2021/12/30",
+            sfPPP: "是",
+            xmmyms: "BOT+施工总承包+可行性缺口补助",
+            sjms: "BOT+运营期定补6.1亿/年+缺口延期条件兜底",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2026/9/30",
+            hbfs: "使用者付费+可行性缺口补助（实际为固定补助+合作期末延长收费期条款）"
+          },
+          {
+            name: "全灌高速",
+            qy: "广西",
+            zlc: "75.14",
+            cds: "4",
+            qsb: "26.1%",
+            jsq: "3",
+            yyqnx: "30",
+            jcztz: "92.73",
+            jczt: "中国能建",
+            jcsj: "2021/12/30",
+            sfPPP: "是",
+            xmmyms: "BOT+施工总承包+可行性缺口补助",
+            sjms: "BOT+运营期定补3.204亿/年+缺口延期条件兜底",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2026/6/30（泉南拼接2027年3月）",
+            hbfs: "使用者付费+可行性缺口补助（实际为固定补助+合作期末延长收费期条款）"
+          },
+          {
+            name: "济商高速（济宁）",
+            qy: "山东",
+            zlc: "45.076",
+            cds: "6",
+            qsb: "15.78%",
+            jsq: "3",
+            yyqnx: "25",
+            jcztz: "69.48",
+            jczt: "中国能建",
+            jcsj: "2021/9/2",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2025/12/31",
+            hbfs: "使用者付费"
+          },
+          {
+            name: "济商高速（菏泽）",
+            qy: "山东",
+            zlc: "65.47",
+            cds: "6",
+            qsb: "12.43%",
+            jsq: "3",
+            yyqnx: "30",
+            jcztz: "104.07",
+            jczt: "中国能建",
+            jcsj: "2021/9/28",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2025/12/31",
+            hbfs: "使用者付费"
+          },
+          {
+            name: "承克高速",
+            qy: "河北",
+            zlc: "105.58",
+            cds: "4",
+            qsb: "26.48%",
+            jsq: "3",
+            yyqnx: "25",
+            jcztz: "130.25",
+            jczt: "中国能建",
+            jcsj: "2023/3/8",
+            sfPPP: "是",
+            xmmyms: "BOT+可行性缺口补助",
+            sjms: "BOT+车购税+运营期定补9500万元",
+            gqjg: "参股",
+            xmzt: "在建",
+            tcsj: "预计2027/9/10",
+            hbfs: "使用者付费+政府固定补助"
+          },
+          {
+            name: "S10高速",
+            qy: "甘肃",
+            zlc: "194.34",
+            cds: "4",
+            qsb: "6.8%",
+            jsq: "4",
+            yyqnx: "30",
+            jcztz: "108.94",
+            jczt: "中国能建",
+            jcsj: "2025/1/6",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "控股",
+            xmzt: "筹建",
+            tcsj: "预计2028/12/31",
+            hbfs: "使用者付费"
+          }
+        ]
+      },
+      {
+        title: "总投资", value: "1334.05", unit: "亿元"
+      },
+      {
+        title: "总规模", value: "1051.56", unit: "公里"
+      }
+    ],
+    tzwcqk: [
+      { title: "10月完成投资", value: "*" },
+      { title: "2025年完成投资", value: "*" },
+      { title: "累计完成投资", value: "*" }
+    ],
+    tzhswcqk: [
+      { title: "10月完成投资", value: "*" },
+      { title: "2025年完成投资", value: "*" },
+      { title: "完成率", value: "*" }
+    ]
+  },
+  shiyunying: {
+    gaikuang: [
+      {
+        title: "总个数", value: "9", unit: "个",
+        data: [
+          {
+            name: "巴万高速",
+            qy: "四川",
+            zlc: "120.07",
+            cds: "4",
+            qsb: "64.57%",
+            jsq: "4",
+            yyqnx: "30",
+            jcztz: "188.2",
+            jczt: "中国能建",
+            jcsj: "2016/12/26",
+            sfPPP: "是",
+            xmmyms: "BOT+政府股权合作",
+            sjms: "BOT+可行性缺口补助（费用兜底）",
+            gqjg: "控股",
+            xmzt: "已运营",
+            tcsj: "2021/1/1",
+            hbfs: "使用者付费+可行性缺口费用补助",
+          },
+          {
+            name: "巨单高速",
+            qy: "山东",
+            zlc: "116.2",
+            cds: "4",
+            qsb: "5.36%",
+            jsq: "3",
+            yyqnx: "25",
+            jcztz: "80.16",
+            jczt: "中国能建",
+            jcsj: "2016/12/26",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2020/1/1",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "济泰高速",
+            qy: "山东",
+            zlc: "60.33",
+            cds: "6",
+            qsb: "49.43%",
+            jsq: "3",
+            yyqnx: "25",
+            jcztz: "101.82",
+            jczt: "中国能建",
+            jcsj: "2016/12/26",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2020/10/27",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "枣菏高速",
+            qy: "山东",
+            zlc: "187.32",
+            cds: "4",
+            qsb: "16.69%",
+            jsq: "3.5",
+            yyqnx: "25",
+            jcztz: "144.79",
+            jczt: "中国能建",
+            jcsj: "2016/12/26",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2020/10/8",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "延黄高速",
+            qy: "陕西",
+            zlc: "149.47",
+            cds: "4",
+            qsb: "54.92%",
+            jsq: "3.25",
+            yyqnx: "28",
+            jcztz: "145.88",
+            jczt: "中国能建",
+            jcsj: "2018/7/25",
+            sfPPP: "是",
+            xmmyms: "BOT",
+            sjms: "BOT+车购税资金50.23亿元",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2021/6/30",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "宁石高速",
+            qy: "陕西",
+            zlc: "51.78",
+            cds: "4",
+            qsb: "54.92%",
+            jsq: "3.72",
+            yyqnx: "28",
+            jcztz: "60.54",
+            jczt: "中国能建",
+            jcsj: "2018/7/25",
+            sfPPP: "是",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2022/12/9",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "田西高速",
+            qy: "广西",
+            zlc: "191.26",
+            cds: "4",
+            qsb: "53.62%",
+            jsq: "3.75",
+            yyqnx: "30",
+            jcztz: "273.75",
+            jczt: "中国能建",
+            jcsj: "2018/12/13",
+            sfPPP: "是",
+            xmmyms: "“DBFOT（设计－建设－融资－运营－移交）”的PPP模式",
+            sjms: "BOT+建设期补助29.54亿元（含政府资本金）+运营固定补助3.1045亿元/年+可行性缺口补助（费用兜底）",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2022/12/29",
+            hbfs: "使用者付费+固定补助+可行性缺口补助",
+          },
+          {
+            name: "武阳高速",
+            qy: "湖北",
+            zlc: "91.308",
+            cds: "4/6",
+            qsb: "40.41%",
+            jsq: "4",
+            yyqnx: "30",
+            jcztz: "113.51",
+            jczt: "中国能建",
+            jcsj: "2018/11/13",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2023/10/20",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "麟法高速",
+            qy: "陕西",
+            zlc: "46.33",
+            cds: "4",
+            qsb: "29.38%",
+            jsq: "4",
+            yyqnx: "30",
+            jcztz: "52.79",
+            jczt: "中国能建",
+            jcsj: "2020/8/4",
+            sfPPP: "是",
+            xmmyms: "PPP",
+            sjms: "BOT+定补",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2025/7/21",
+            hbfs: "使用者付费+固定补助",
+          },
+        ]
+      },
+      {
+        title: "总投资", value: "1151.36", unit: "亿元"
+      },
+      {
+        title: "总规模", value: "945.67", unit: "公里"
+      }
+    ],
+    tzwcqk: [
+      { title: "10月完成投资", value: "*" },
+      { title: "2025年完成投资", value: "*" },
+      { title: "累计完成投资", value: "*" }
+    ],
+    jyjhwcqk: [
+      {
+        title: "营业收入",
+        data: [
+          {
+            name: "11月完成",
+            value: "*"
+          },
+          {
+            name: "第三季度完成",
+            value: "*"
+          },
+          {
+            name: "2025累计完成",
+            value: "*"
+          },
+          {
+            name: "累计同期环比",
+            size: "small",
+            value: "*"
+          }
+        ]
+      },
+      {
+        title: "运营成本",
+        data: [
+          {
+            name: "11月完成",
+            value: "*"
+          },
+          {
+            name: "第三季度完成",
+            value: "*"
+          },
+          {
+            name: "2025累计完成",
+            value: "*"
+          },
+          {
+            name: "累计同期环比",
+            size: "small",
+            value: "*"
+          }
+        ]
+      },
+      {
+        title: "利润总额",
+        data: [
+          {
+            name: "11月完成",
+            value: "*"
+          },
+          {
+            name: "第三季度完成",
+            value: "*"
+          },
+          {
+            name: "2025累计完成",
+            value: "*"
+          },
+          {
+            name: "累计同期环比",
+            size: "small",
+            value: "*"
+          }
+        ]
+      }
+    ],
+    tzhswcqk: [
+      { title: "10月完成投资", value: "*" },
+      { title: "2025年完成投资", value: "*" },
+      { title: "完成率", value: "*" }
+    ],
+    jyjhwcjd: [
+      {
+        data: [
+          {
+            name: "营业收入完成进度",
+            value: "*"
+          },
+          {
+            name: "实际完成金额",
+            value: "*"
+          },
+          {
+            name: "计划完成金额",
+            value: "*"
+          }
+        ]
+      },
+      {
+        data: [
+          {
+            name: "运营成本完成进度",
+            value: "*"
+          },
+          {
+            name: "实际完成金额",
+            value: "*"
+          },
+          {
+            name: "计划完成金额",
+            value: "*"
+          }
+        ]
+      },
+      {
+        data: [
+          {
+            name: "利润总额完成进度",
+            value: "*"
+          },
+          {
+            name: "实际完成金额",
+            value: "*"
+          },
+          {
+            name: "计划完成金额",
+            value: "*"
+          }
+        ]
+      }
+    ]
+  },
+  yunying: {
+    gaikuang: [
+      {
+        title: "总个数", value: "2", unit: "个",
+        data: [
+          {
+            name: "襄荆高速",
+            qy: "湖北",
+            zlc: "185.42",
+            cds: "4",
+            qsb: "1.8%",
+            jsq: "5",
+            yyqnx: "30",
+            jcztz: "44.15",
+            jczt: "葛洲坝集团",
+            jcsj: "2000年",
+            sfPPP: "否",
+            xmmyms: "BOT",
+            sjms: "BOT",
+            gqjg: "控股",
+            xmzt: "已运营",
+            tcsj: "2004/6/26",
+            hbfs: "使用者付费",
+          },
+          {
+            name: "杨宣高速",
+            qy: "云南",
+            zlc: "47.8",
+            cds: "4",
+            qsb: "50%",
+            jsq: "3",
+            yyqnx: "30",
+            jcztz: "70.08",
+            jczt: "授权葛洲坝集团",
+            jcsj: "2018/2/9",
+            sfPPP: "否",
+            xmmyms: "EPC+BOT+股权合作",
+            sjms: "BOT+政府股权投资+建设期补助资金",
+            gqjg: "参股",
+            xmzt: "已运营",
+            tcsj: "2021/10/8",
+            hbfs: "使用者付费",
+          }
+        ]
+      },
+      {
+        title: "总投资", value: "114.23", unit: "亿元"
+      },
+      {
+        title: "总规模", value: "945.67", unit: "公里"
+      }
+    ],
+    tzhswcqk: [
+      { title: "10月完成投资", value: "*" },
+      { title: "2025年完成投资", value: "*" },
+      { title: "完成率", value: "*" }
+    ],
+    jyjhwcqk: [
+      {
+        title: "营业收入",
+        data: [
+          {
+            name: "11月完成",
+            value: "*"
+          },
+          {
+            name: "第三季度完成",
+            value: "*"
+          },
+          {
+            name: "2025累计完成",
+            value: "*"
+          },
+          {
+            name: "累计同期环比",
+            size: "small",
+            value: "*"
+          }
+        ]
+      },
+      {
+        title: "运营成本",
+        data: [
+          {
+            name: "11月完成",
+            value: "*"
+          },
+          {
+            name: "第三季度完成",
+            value: "*"
+          },
+          {
+            name: "2025累计完成",
+            value: "*"
+          },
+          {
+            name: "累计同期环比",
+            size: "small",
+            value: "*"
+          }
+        ]
+      },
+      {
+        title: "利润总额",
+        data: [
+          {
+            name: "11月完成",
+            value: "*"
+          },
+          {
+            name: "第三季度完成",
+            value: "*"
+          },
+          {
+            name: "2025累计完成",
+            value: "*"
+          },
+          {
+            name: "累计同期环比",
+            size: "small",
+            value: "*"
+          }
+        ]
+      }
+    ],
+    jyjhwcjd: [
+      {
+        data: [
+          {
+            name: "营业收入完成进度",
+            value: "*"
+          },
+          {
+            name: "实际完成金额",
+            value: "*"
+          },
+          {
+            name: "计划完成金额",
+            value: "*"
+          }
+        ]
+      },
+      {
+        data: [
+          {
+            name: "运营成本完成进度",
+            value: "*"
+          },
+          {
+            name: "实际完成金额",
+            value: "*"
+          },
+          {
+            name: "计划完成金额",
+            value: "*"
+          }
+        ]
+      },
+      {
+        data: [
+          {
+            name: "利润总额完成进度",
+            value: "*"
+          },
+          {
+            name: "实际完成金额",
+            value: "*"
+          },
+          {
+            name: "计划完成金额",
+            value: "*"
+          }
+        ]
+      }
+    ]
+  },
+  tuichu: [
+    { 
+      title: "总个数", value: "3", unit: "个",
+      data: [
+        {
+          name: "内鹤高速",
+          qy: "河南",
+          zlc: "31.43",
+          cds: "4",
+          qsb: "20.01%",
+          jsq: "3",
+          yyqnx: "40",
+          jcztz: "40.48",
+          jczt: "中国能建",
+          jcsj: "",
+          sfPPP: "否",
+          xmmyms: "BOT",
+          sjms: "BOT",
+          gqjg: "",
+          xmzt: "拟退出",
+          tcsj: "",
+          hbfs: "",
+        },
+        {
+          name: "内林东段高速",
+          qy: "河南",
+          zlc: "33.65",
+          cds: "4",
+          qsb: "18.40%",
+          jsq: "3",
+          yyqnx: "40",
+          jcztz: "43.67",
+          jczt: "中国能建",
+          jcsj: "",
+          sfPPP: "否",
+          xmmyms: "BOT",
+          sjms: "BOT",
+          gqjg: "",
+          xmzt: "拟退出",
+          tcsj: "",
+          hbfs: "",
+        },
+        {
+          name: "内林西段高速",
+          qy: "河南",
+          zlc: "43.27",
+          cds: "4",
+          qsb: "30.31%",
+          jsq: "3",
+          yyqnx: "40",
+          jcztz: "57.14",
+          jczt: "中国能建",
+          jcsj: "",
+          sfPPP: "否",
+          xmmyms: "BOT",
+          sjms: "BOT",
+          gqjg: "",
+          xmzt: "拟退出",
+          tcsj: "",
+          hbfs: "",
+        }
+      ]
+    },
+    { title: "总投资", value: "141.29", unit: "亿元" },
+    { title: "总规模", value: "108.35", unit: "公里" },
+    { title: "累计完成投资", value: "0", unit: "亿元" }
+  ]
+})
 
-const selectLeftBtn = (btn) => {
-  selectedLeftBtn.value = btn;
-  selectedRightBtn.value = "";
-};
-
-const selectRightBtn = (btn) => {
-  selectedRightBtn.value = btn;
-  selectedLeftBtn.value = "";
+const changeBtn = (btn) => {
+  selectedBtn.value = btn;
 };
 
 // 添加防抖功能，避免频繁切换造成的性能问题
@@ -137,11 +1103,78 @@ const selectContentBtn = (item) => {
     clearTimeout(debounceTimer);
   }
   debounceTimer = setTimeout(() => {
-    selectedContentBtn.value = item.index;
+    selectedContentBtn.value = item.key;
     selectedContentName.value = item.name;
-    sessionStorage.setItem("selectedContentBtn", selectedContentName.value);
+    sessionStorage.setItem("selectedContentBtn", selectedContentName.key);
+    if (item.key === "jianshe") {
+      nextTick(()=> {
+        initProgressPie();
+      })
+    } else {
+      progressPieChart.dispose()
+    }
   }, 100);
 };
+// 绘制投资完成情况环形图
+const progressPie = ref(null);
+let progressPieChart = null;
+const initProgressPie = () => {
+  progressPieChart?.dispose();
+  progressPieChart = echarts.init(progressPie.value);
+  const option = {
+    // 中心百分比文字
+    title: {
+      text: ["{a|33.8}", "{b|%}"].join(" "),
+      left: "center",
+      top: "center",
+      textStyle: {
+        color: "#2FD2FB", // 蓝色文字（匹配截图）
+        lineHeight: 1.2,
+        fontFamily: "DINBold",
+        fontWeight: "bold",
+        rich: {
+          a: {
+            fontSize: 22
+          },
+          b: {
+            fontSize: 12
+          }
+        }
+        
+      }
+    },
+    series: [
+      // 1. 外层圆环边框（浅色蓝环）
+      {
+        type: "pie",
+        radius: ["85%", "70%"], // 外层边框的粗细
+        startAngle: 0,
+        itemStyle: {
+          borderColor: "#8692fc",
+          borderWidth: 1,
+        },
+        label: { show: false },
+        labelLine: { show: false },
+        data: [
+          {
+            value: 33.8,
+            name: "绿色扇区",
+            itemStyle: { color: "#00FF00", fontSize: 12 },
+          }, // 绿色扇区
+          {
+            value: 66.2,
+            name: "背景扇区",
+            itemStyle: { color: "transparent" },
+          },
+        ],
+      },
+    ],
+  };
+  progressPieChart.setOption(option);
+};
+const resizeEcharts = () => {
+progressPieChart?.resize()
+}
 
 // 全屏切换功能
 const toggleFullscreen = () => {
@@ -180,7 +1213,11 @@ const toggleFullscreen = () => {
 
 // 页面初始化时设置sessionStorage
 onMounted(() => {
-  sessionStorage.setItem("selectedContentBtn", selectedContentName.value);
+  sessionStorage.setItem("selectedContentBtn", selectedContentName.key);
+  window.addEventListener("resize", resizeEcharts);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", resizeEcharts);
 });
 
 // 监听全屏变化事件
@@ -203,18 +1240,28 @@ window.addEventListener("fullscreenchange", () => {
     }
   }
 });
+
+// 表格弹框
+let tableData = ref([]);
+const handleDetail = (item) => {
+  if (item.data?.length) {
+    tableData.value = item.data;
+    dialogVisible.value = true;
+  }
+};
+const dialogTitle = ref("");
+const dialogVisible = ref(false);
+const handleClose = () => {
+  dialogVisible.value = false;
+}
 </script>
 
 <style scoped lang="less">
 .home-container {
-  // background-image: url("@/assets/images/bg.png");
-  // background-repeat: no-repeat;
-  // background-size: cover;
-  // background-position: center;
+  background-image: url("@/assets/images/bg.png");
+  background-size: 100% 100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(to bottom, #04427e, #095dcc);
-  overflow: hidden;
   color: #fff;
   display: flex;
   flex-direction: column;
@@ -243,140 +1290,111 @@ window.addEventListener("fullscreenchange", () => {
     }
 
     .header-middile {
-      background-image: url("@/assets/images/头部bg.png");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      letter-spacing: 1px;
+      background-image: url("@/assets/images/header.png");
+      background-size: 100% 100%;
+      .vw(width,750);
       font-weight: 400;
       font-family: "YouSheBiaoTiHei";
       .vh(height,75);
       display: flex;
       justify-content: center;
       align-items: center;
+      span{
+        background: linear-gradient(to bottom, #fff, #B4CFF2);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
       @media screen and (max-width: 2560px) {
-        flex: 1;
+        // flex: 1;
         .font(28);
       }
       @media screen and (max-width: 1920px) {
-        flex: 0.7;
+        // flex: 0.7;
         .font(28);
       }
 
       @media screen and (max-width: 1440px) {
-        .font(24);
+        // .font(24);
         flex: 0.8;
       }
     }
-    .header-left {
+    .header-left,.header-right {
       display: flex;
       align-items: center;
       justify-content: center;
       .nav-btn {
-        .font(16);
+        .font(20);
         cursor: pointer;
-        color: #fff;
+        // color: #fff;
         font-family: YouSheBiaoTiYuan;
         display: flex;
         align-items: center;
         justify-content: center;
-        .vh(height,36);
-        .vw(width,155);
+        .vh(height,54);
+        .vw(width,194);
         background-repeat: no-repeat;
         background-position: center;
         background-size: 100% 100%;
-        &:not(.active) {
-          background-image: url("@/assets/images/left-btn.png");
+        &.active{
+          .font(22);
+          span{
+            background: linear-gradient(to bottom, #fff, #fff, #0047FF);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          }
         }
-
-        &.active {
+        span{
+          background: linear-gradient(to bottom, #fff, #3D73FF);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+      }
+    }
+    .header-left{
+      .nav-btn{
+        margin-right: -20px;
+        background-image: url("@/assets/images/left-btn.png");
+        &.active{
           background-image: url("@/assets/images/left-hlightBtn.png");
         }
       }
     }
     .header-right {
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      margin-left: -20px;
       .nav-btn {
-        .font(16);
-        cursor: pointer;
-        color: #fff;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-family: YouSheBiaoTiYuan;
-        .vh(height,36);
-        .vw(width,155);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 100% 100%;
-        &:not(.active) {
-          background-image: url("@/assets/images/right-btn.png");
-        }
-
+        background-image: url("@/assets/images/right-btn.png");
         &.active {
           background-image: url("@/assets/images/right-hight-btn.png");
         }
       }
     }
   }
-  .content {
-    width: 100%;
-    .vw(padding-left, 20);
-    .vw(padding-right, 20);
-    .vh(margin-top,-16px);
-    height: calc(100vh - 190px);
-
-    // 根据屏幕宽度调整高度，确保在不同尺寸下都能显示底部图标
-    @media screen and (max-width: 1450px) {
-      height: calc(100vh - 180px);
-    }
-
-    @media screen and (max-width: 1280px) {
-      height: calc(100vh - 170px);
-    }
-
-    // 全屏模式下的高度调整
-    .fullscreen & {
-      height: calc(100vh - 120px);
-
-      @media screen and (max-width: 1450px) {
-        height: calc(100vh - 110px);
-      }
-
-      @media screen and (max-width: 1280px) {
-        height: calc(100vh - 100px);
-      }
-      @media screen and (max-width: 1920px) {
-        height: calc(100vh - 80px);
-      }
-    }
-    .content-btn {
+  .nav-list{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .vw(margin-top, 10);
+    span{
+      .font(14);
+      width: 110px;
+      height: 35px;
       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;
+      justify-content: center;
+      cursor: pointer;
+      flex-shrink: 0;
+      color: rgba(255, 255, 255, 0.5);
+      background-image: url("@/assets/images/default-btn.png");
+      background-repeat: no-repeat;
+      background-size: 80% 80%;
+      background-position: center;
+      margin-left: -32px;
+      &.active{
         color: #fff;
+        background-image: url("@/assets/images/nav-hight-btn.png");
       }
-
-      // 立项按钮
-      :nth-child(1) {
-        background-repeat: no-repeat;
-        background-size: 80% 80%;
-        background-position: center;
-        width: 115px;
-        height: 35px;
-        line-height: 35px;
-        text-align: center;
+      &:nth-child(1) {
+        margin-left: 0;
         &.active {
           background-image: url("@/assets/images/立项.png");
         }
@@ -384,54 +1402,267 @@ window.addEventListener("fullscreenchange", () => {
           background-image: url("@/assets/images/initiation-default.png");
         }
       }
-
-      // 退出按钮
-      :nth-child(6) {
-        background-repeat: no-repeat;
-        background-size: 80% 80%;
-        background-position: center;
-        width: 111px;
-        height: 35px;
-        line-height: 35px;
-        text-align: center;
+      &:nth-child(6) {
+        margin-left: -31px;
+        background-image: url("@/assets/images/退出.png");
         &.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),
-      :nth-child(5) {
-        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");
+    }
+  }
+  .map-container{
+    flex: 1;
+    height: 0;
+    display: flex;
+    .vh(margin-bottom, -20);
+    .map-content{
+      position: relative;
+      flex: 1;
+      width: 0;
+      height: 100%;
+      .info-top-wrap{
+        position: absolute;
+        width: 100%;
+        top: 0;
+        z-index: 777;
+        .vh(margin-top, 10);
+      }
+      .info-right-wrap{
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        .vw(right, 44);
+        .vw(width, 580);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        z-index: 777;
+        .info-title{
+          .vw(width, 180);
+          .vh(height, 28);
+          .vh(line-height, 28);
+          .font(16);
+          .vw(padding-left,20);
+          .vh(margin-bottom,10);
+          text-align: left;
+          color: #fff;
+          white-space: nowrap;
+          font-family: YouSheBiaoTiYuan;
+          background-image: url("@/assets/images/tag.png");
+          background-size: 100% 100%;
+        }
+        .data-info{
+          justify-content: space-between;
         }
       }
-      :nth-child(6) {
-        margin-left: -31px;
+      .data-info{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .vh(margin-bottom,15);
+        .info-item {
+          .vw(width, 180);
+          // .vh(height, 90);
+          .vw(border-radius, 5);
+          .vw(padding, 10);
+          .vw(margin-right,10);
+          background-image: url("@/assets/images/total2.png");
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          cursor: pointer;
+          .item-title {
+            .font(12);
+            // white-space: nowrap;
+          }
+          .item-value {
+            .font(20);
+            color: @Color;
+            font-family: "DIN";
+            .item-unit {
+              .font(10);
+            }
+          }
+        }
+        :last-child {
+          margin-right: 0;
+          margin-bottom: 0;
+        }
+      }
+      .info-progress{
+        display: flex;
+        align-items: center;
+        .progress-pie{
+          .vw(width, 120);
+          .vw(height, 120);
+        }
+        .progress-bar{
+          flex: 1;
+          width: 0;
+          position: relative;
+          .progress-text{
+            position: absolute;
+            top: -5px;
+            right: 0;
+            .font(20);
+            font-family: DIN;
+          }
+          .progress-image{
+            width: 100%;
+            .vh(height, 98);
+            background-image: url("@/assets/images/progressBar.png");
+            background-size: 100% 100%;
+            .progress-show-value {
+              position: absolute;
+              top: 35%;
+              left: 15%;
+              width: 85%;
+              height: 30%;
+              background-image: url("@/assets/images/baseRate.png");
+              background-size: 100% 100%;
+            }
+            .progress-show-value-rel {
+              position: absolute;
+              top: 36%;
+              left: 15%;
+              height: 30%;
+              background-image: url(/src/assets/images/progress.png);
+              background-size: auto 100%;
+              -webkit-transform: skew(-30deg);
+              transform: skew(-30deg);
+            }
+          }
+        }
+      }
+      .data-info-large{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .vh(margin-bottom,15);
+        .info-item{
+          .vw(width, 180);
+          .vw(border-radius, 5);
+          .vw(margin-right,10);
+          .vw(padding-left, 10);
+          .vw(padding-right, 10);
+          .vw(padding-top, 5);
+          .vw(padding-bottom, 5);
+          background-image: url("@/assets/images/complete.png");
+          background-size: 100% 100%;
+          display: flex;
+          flex-direction: column;
+          .item-title{
+            .vh(height, 22);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-image: url("@/assets/images/completeTitle.png");
+            background-size: 100% 100%;
+            .font(12);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .item-content{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: flex-end;
+            justify-content: space-between;
+            .vh(padding-top, 10);
+            .target-item{
+              min-width: 50%;
+              .target-name{
+                .font(10);
+                color: #fff;
+              }
+              .target-value{
+                .font(20);
+                color: #96F6FF;
+                font-family: DINBold;
+              }
+              &.target-small{
+                width: 40%;
+                min-width: 40%;
+                .target-name{
+                  .font(8);
+                  color: rgba(255, 255, 255, 0.7);
+                }
+                .target-value{
+                  .font(14);
+                }
+              }
+            }
+          }
+        }
       }
     }
   }
   .bottom {
     background-image: url("@/assets/images/bottom.png");
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: 100% 100%;
     background-position: center;
     width: 100%;
     .vh(height, 110);
   }
+  .dialog-content{
+    display: flex;
+    flex-direction: column;
+    .table-wrap{
+      .el-table{
+        height: 100%;
+          thead {
+              color: #000;
+              th{
+                  background: #f5f7fa;
+                  .cell{
+                      text-align: center;
+                  }
+              }
+          }
+      }
+    }
+    .page-wrap{
+      margin-top: 10px;
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.home-container {
+  .el-dialog{
+    height: 75%;
+    display: flex;
+    flex-direction: column;
+    .el-dialog__body{
+      flex: 1;
+      height: 0;
+    }
+  }
+  .dialog-content{
+    height: 100%;
+    .table-wrap{
+      max-height: 100%;
+      .el-table{
+        height: 100%;
+          thead {
+              color: #000;
+              th{
+                  background: #f5f7fa;
+                  .cell{
+                      text-align: center;
+                  }
+              }
+          }
+      }
+    }
+  }
 }
 </style>