zhbyyy 1 年之前
父節點
當前提交
a77dbe3b3d

二進制
investmentNew/img/3D/world1.jpg


二進制
investmentNew/img/3D/world2.jpg


二進制
investmentNew/img/center-bottonm.png


+ 395 - 601
investmentNew/index.html

@@ -1,421 +1,258 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <!-- 引入样式 -->
-    <link rel="stylesheet" href="./styles/index.css" />
-    <link rel="stylesheet" href="./styles/animate.css" />
-    <!-- 引入js -->
-    <script src="./libs/vue@2.7.10.js"></script>
-    <script src="./libs/echarts.min2.js"></script>
-    <script src="./libs/datav.map.vue.js"></script>
-    <script src="./libs/axios.min.js"></script>
-    <script src="./js/request.js"></script>
-    <script src="./js/map/china.json"></script>
-    <script src="./js/Data.js"></script>
-    <script src="./libs/echarts-tooltip-carousel.js"></script>
-  </head>
 
-  <body>
-    <!-- <dv-full-screen-container> -->
-    <div id="app" class="w-full h-full">
-      <div class="top">
-        <div class="title" style="padding-top: 2%">
-          <span>投前管理</span>
-          <div></div>
-        </div>
-        <div class="mainTitle">数智化投资管理驾驶舱</div>
-        <div class="title" style="padding-top: 2%">
-          <span>投中、投后管理</span>
-          <div></div>
-        </div>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <!-- 引入样式 -->
+  <link rel="stylesheet" href="./styles/index.css" />
+  <link rel="stylesheet" href="./styles/animate.css" />
+  <!-- 引入js -->
+  <script src="./libs/vue@2.7.10.js"></script>
+  <script src="./libs/echarts.min2.js"></script>
+  <script src="./libs/echarts-gl.min.js"></script>
+  <script src="./libs/datav.map.vue.js"></script>
+  <script src="./libs/axios.min.js"></script>
+  <script src="./js/request.js"></script>
+  <script src="./js/map/china.json"></script>
+  <script src="./js/Data.js"></script>
+  <script src="./libs/echarts-tooltip-carousel.js"></script>
+</head>
+
+<body>
+  <!-- <dv-full-screen-container> -->
+  <div id="app" class="w-full h-full">
+    <div class="top">
+      <div class="title" style="padding-top: 2%">
+        <span>投前管理</span>
+        <div></div>
       </div>
-      <div class="bottom">
-        <div class="left">
-          <div>
-            <div class="title">投资计划分析</div>
-            <div class="content left1">
-              <div class="overflow-hidden">
-                <div class="child">
-                  <div style="font-size: 28px">固定资产类项目</div>
-                  <div></div>
-                  <div
-                    style="font-size: 60px; color: #68bdff; font-weight: bold"
-                  >
-                    251.63<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div
-                    style="
+      <div class="mainTitle">数智化投资管理驾驶舱</div>
+      <div class="title" style="padding-top: 2%">
+        <span>投中、投后管理</span>
+        <div></div>
+      </div>
+    </div>
+    <div class="bottom">
+      <div class="left">
+        <div>
+          <div class="title">投资计划分析</div>
+          <div class="content left1">
+            <div class="overflow-hidden">
+              <div class="child">
+                <div style="font-size: 28px">固定资产类项目</div>
+                <div></div>
+                <div style="font-size: 60px; color: #68bdff; font-weight: bold">
+                  251.63<span style="font-size: 28px">亿</span>
+                </div>
+                <div style="
                       font-size: 60px;
                       color: #68bdff;
                       font-weight: bold;
                       justify-self: center;
-                    "
-                  >
-                    103<span style="font-size: 28px">个</span>
-                  </div>
-                  <div style="font-size: 28px">投资金额</div>
-                  <div style="font-size: 28px; justify-self: center">
-                    项目数量
-                  </div>
+                    ">
+                  103<span style="font-size: 28px">个</span>
                 </div>
-                <div class="child">
-                  <div style="font-size: 28px">股权类项目</div>
-                  <div></div>
-                  <div
-                    style="font-size: 60px; color: #68bdff; font-weight: bold"
-                  >
-                    17.09<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div
-                    style="
+                <div style="font-size: 28px">投资金额</div>
+                <div style="font-size: 28px; justify-self: center">
+                  项目数量
+                </div>
+              </div>
+              <div class="child">
+                <div style="font-size: 28px">股权类项目</div>
+                <div></div>
+                <div style="font-size: 60px; color: #68bdff; font-weight: bold">
+                  17.09<span style="font-size: 28px">亿</span>
+                </div>
+                <div style="
                       font-size: 60px;
                       color: #68bdff;
                       font-weight: bold;
                       justify-self: center;
-                    "
-                  >
-                    58<span style="font-size: 28px">个</span>
-                  </div>
-                  <div style="font-size: 28px">投资金额</div>
-                  <div style="font-size: 28px; justify-self: center">
-                    项目数量
-                  </div>
+                    ">
+                  58<span style="font-size: 28px">个</span>
+                </div>
+                <div style="font-size: 28px">投资金额</div>
+                <div style="font-size: 28px; justify-self: center">
+                  项目数量
                 </div>
               </div>
-              <div class="overflow-hidden left1B">
-                <div class="flex items-center justify-center flex-col">
-                  <div
-                    style="font-size: 72px; color: #ffe036; font-weight: bold"
-                  >
-                    450.12<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div style="font-size: 28px">年度投资计划总额</div>
+            </div>
+            <div class="overflow-hidden left1B">
+              <div class="flex items-center justify-center flex-col">
+                <div style="font-size: 72px; color: #ffe036; font-weight: bold">
+                  450.12<span style="font-size: 28px">亿</span>
                 </div>
-                <div class="left1C">
-                  <div class="flex justify-between left1C-child">
-                    <div
-                      style="height: 100%; width: 48%"
-                      class="flex items-center justify-center font28 pointer"
-                      @click="industryProportionChange(1)"
-                      :class="industryProportion==1?'industryProportion1':'industryProportion2'"
-                    >
-                      主辅业计划占比
-                    </div>
-                    <div
-                      style="height: 100%; width: 48%"
-                      class="flex items-center justify-center font28 pointer"
-                      @click="industryProportionChange(2)"
-                      :class="industryProportion==2?'industryProportion1':'industryProportion2'"
-                    >
-                      项目管理类型
-                    </div>
+                <div style="font-size: 28px">年度投资计划总额</div>
+              </div>
+              <div class="left1C">
+                <div class="flex justify-between left1C-child">
+                  <div style="height: 100%; width: 48%" class="flex items-center justify-center font28 pointer"
+                    @click="industryProportionChange(1)"
+                    :class="industryProportion==1?'industryProportion1':'industryProportion2'">
+                    主辅业计划占比
+                  </div>
+                  <div style="height: 100%; width: 48%" class="flex items-center justify-center font28 pointer"
+                    @click="industryProportionChange(2)"
+                    :class="industryProportion==2?'industryProportion1':'industryProportion2'">
+                    项目管理类型
                   </div>
-                  <div
-                    class="flex overflow-hidden items-center"
-                    style="padding: 1% 0"
-                  >
-                    <div
-                      ref="leftEcharts1"
-                      style="height: 100%; aspect-ratio: 1/1; flex-shrink: 0"
-                    ></div>
-                    <div style="width: 95%; margin-left: 5%">
-                      <div class="flex items-center font28">
-                        <img
-                          src="./img/title-icon.png"
-                          style="width: 32px; height: 52px"
-                          alt=""
-                        />
-                        <span style="margin: 0 10px"
-                          >{{industryProportion==1?'主业':'特别监管类'}}</span
-                        >
-                        <span style="color: #68bdff">41个</span>
-                      </div>
-                      <div
-                        ref="leftEcharts2"
-                        style="height: 50%; width: 100%"
-                      ></div>
+                </div>
+                <div class="flex overflow-hidden items-center" style="padding: 1% 0">
+                  <div ref="leftEcharts1" style="height: 100%; aspect-ratio: 1/1; flex-shrink: 0"></div>
+                  <div style="width: 95%; margin-left: 5%">
+                    <div class="flex items-center font28">
+                      <img src="./img/title-icon.png" style="width: 32px; height: 52px" alt="" />
+                      <span style="margin: 0 10px">{{industryProportion==1?'主业':'特别监管类'}}</span>
+                      <span style="color: #68bdff">41个</span>
                     </div>
+                    <div ref="leftEcharts2" style="height: 50%; width: 100%"></div>
                   </div>
-                  <div
-                    class="flex overflow-hidden items-center"
-                    style="padding: 1% 0"
-                  >
-                    <div
-                      ref="leftEcharts3"
-                      style="height: 100%; aspect-ratio: 1/1; flex-shrink: 0"
-                    ></div>
-                    <div style="width: 95%; margin-left: 5%">
-                      <div class="flex items-center font28">
-                        <img
-                          src="./img/title-icon.png"
-                          style="width: 32px; height: 52px"
-                          alt=""
-                        />
-                        <span style="margin: 0 10px"
-                          >{{industryProportion==1?'辅业':'备案类'}}</span
-                        >
-                        <span style="color: #68bdff">62个</span>
-                      </div>
-                      <div
-                        ref="leftEcharts4"
-                        style="height: 50%; width: 100%"
-                      ></div>
+                </div>
+                <div class="flex overflow-hidden items-center" style="padding: 1% 0">
+                  <div ref="leftEcharts3" style="height: 100%; aspect-ratio: 1/1; flex-shrink: 0"></div>
+                  <div style="width: 95%; margin-left: 5%">
+                    <div class="flex items-center font28">
+                      <img src="./img/title-icon.png" style="width: 32px; height: 52px" alt="" />
+                      <span style="margin: 0 10px">{{industryProportion==1?'辅业':'备案类'}}</span>
+                      <span style="color: #68bdff">62个</span>
                     </div>
+                    <div ref="leftEcharts4" style="height: 50%; width: 100%"></div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div>
-            <div class="title">投资额度分析</div>
-            <div class="content left3">
-              <div ref="leftEcharts6" style="width: 100%; height: 100%"></div>
-              <div></div>
-            </div>
+        </div>
+        <div>
+          <div class="title">投资额度分析</div>
+          <div class="content left3">
+            <div ref="leftEcharts6" style="width: 100%; height: 100%"></div>
+            <div></div>
           </div>
-          <div>
-            <div class="title">产业布局分析</div>
-            <div class="content left2">
-              <div
-                class="flex items-center justify-around font28"
-                style="padding: 0 10%"
-              >
-                <div
-                  @click="industryLayoutChange(0)"
-                  class="pointer"
-                  :class="industryLayout==0?'industryProportion1':'industryProportion2'"
-                  style="padding: 1% 2%"
-                >
-                  传统产业分析
-                </div>
-                <div
-                  @click="industryLayoutChange(1)"
-                  class="pointer"
-                  :class="industryLayout==1?'industryProportion1':'industryProportion2'"
-                  style="padding: 1% 2%"
-                >
-                  战略性新兴产业
-                </div>
-                <div
-                  @click="industryLayoutChange(2)"
-                  class="pointer"
-                  :class="industryLayout==2?'industryProportion1':'industryProportion2'"
-                  style="padding: 1% 2%"
-                >
-                  特色优势产业
-                </div>
-                <div
-                  @click="industryLayoutChange(3)"
-                  class="pointer"
-                  :class="industryLayout==3?'industryProportion1':'industryProportion2'"
-                  style="padding: 1% 2%"
-                >
-                  公共基础等产业
-                </div>
+        </div>
+        <div>
+          <div class="title">产业布局分析</div>
+          <div class="content left2">
+            <div class="flex items-center justify-around font28" style="padding: 0 10%">
+              <div @click="industryLayoutChange(0)" class="pointer"
+                :class="industryLayout==0?'industryProportion1':'industryProportion2'" style="padding: 1% 2%">
+                传统产业分析
+              </div>
+              <div @click="industryLayoutChange(1)" class="pointer"
+                :class="industryLayout==1?'industryProportion1':'industryProportion2'" style="padding: 1% 2%">
+                战略性新兴产业
+              </div>
+              <div @click="industryLayoutChange(2)" class="pointer"
+                :class="industryLayout==2?'industryProportion1':'industryProportion2'" style="padding: 1% 2%">
+                特色优势产业
+              </div>
+              <div @click="industryLayoutChange(3)" class="pointer"
+                :class="industryLayout==3?'industryProportion1':'industryProportion2'" style="padding: 1% 2%">
+                公共基础等产业
               </div>
-              <div ref="leftEcharts5" style="width: 100%; height: 100%"></div>
             </div>
+            <div ref="leftEcharts5" style="width: 100%; height: 100%"></div>
           </div>
-          <div>
-            <div class="title">企业额度分析</div>
-            <div class="content"></div>
-          </div>
-          <div>
-            <div class="title">项目阶段分析</div>
-            <div class="content left4">
-              <div ref="leftEcharts7" style="height: 100%; width: 100%"></div>
-              <div ref="leftEcharts8" style="height: 100%; width: 100%"></div>
-              <div class="left4A">
-                <!-- 第一列 -->
-                <div
-                  style="width: 104px; top: 21%; left: 9%; animation-delay: 1s"
-                >
-                  <div class="text-center">1230亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div
-                  style="width: 104px; top: 51%; left: 9%; animation-delay: 1s"
-                >
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1036亿</div>
-                </div>
-                <!-- 第二列 -->
-                <div style="width: 104px; top: 30%; left: 19%">
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div style="width: 104px; top: 62%; left: 19%">
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
-                <!-- 第三列 -->
-                <div
-                  style="width: 104px; top: 35%; left: 29%; animation-delay: 1s"
-                >
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div
-                  style="width: 104px; top: 60%; left: 29%; animation-delay: 1s"
-                >
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
-                <!-- 第四列 -->
-                <div style="width: 104px; top: 31%; left: 39%">
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div style="width: 104px; top: 61%; left: 39%">
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
-                <!-- 第五列 -->
-                <div
-                  style="width: 104px; top: 41%; left: 58%; animation-delay: 1s"
-                >
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div
-                  style="width: 104px; top: 65%; left: 58%; animation-delay: 1s"
-                >
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
-                <!-- 第六列 -->
-                <div style="width: 104px; top: 35%; left: 68%">
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div style="width: 104px; top: 63%; left: 68%">
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
-                <!-- 第七列 -->
-                <div
-                  style="width: 104px; top: 21%; left: 78%; animation-delay: 1s"
-                >
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div
-                  style="width: 104px; top: 51%; left: 78%; animation-delay: 1s"
-                >
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
-                <!-- 第八列 -->
-                <div style="width: 104px; top: 31%; left: 88%">
-                  <div class="text-center">1830亿</div>
-                  <img
-                    src="./img/left-blue.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                </div>
-                <div style="width: 104px; top: 61%; left: 88%">
-                  <img
-                    src="./img/left-green.png"
-                    class=""
-                    style="width: 104px; height: 112px"
-                    alt=""
-                  />
-                  <div class="text-center">1025亿</div>
-                </div>
+        </div>
+        <div>
+          <div class="title">企业额度分析</div>
+          <div class="content"></div>
+        </div>
+        <div>
+          <div class="title">项目阶段分析</div>
+          <div class="content left4">
+            <div ref="leftEcharts7" style="height: 100%; width: 100%"></div>
+            <div ref="leftEcharts8" style="height: 100%; width: 100%"></div>
+            <div class="left4A">
+              <!-- 第一列 -->
+              <div style="width: 104px; top: 21%; left: 9%; animation-delay: 1s">
+                <div class="text-center">1230亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 51%; left: 9%; animation-delay: 1s">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1036亿</div>
+              </div>
+              <!-- 第二列 -->
+              <div style="width: 104px; top: 30%; left: 19%">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 62%; left: 19%">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第三列 -->
+              <div style="width: 104px; top: 35%; left: 29%; animation-delay: 1s">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 60%; left: 29%; animation-delay: 1s">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第四列 -->
+              <div style="width: 104px; top: 31%; left: 39%">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 61%; left: 39%">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第五列 -->
+              <div style="width: 104px; top: 41%; left: 58%; animation-delay: 1s">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 65%; left: 58%; animation-delay: 1s">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第六列 -->
+              <div style="width: 104px; top: 35%; left: 68%">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 63%; left: 68%">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第七列 -->
+              <div style="width: 104px; top: 21%; left: 78%; animation-delay: 1s">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 51%; left: 78%; animation-delay: 1s">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
+              </div>
+              <!-- 第八列 -->
+              <div style="width: 104px; top: 31%; left: 88%">
+                <div class="text-center">1830亿</div>
+                <img src="./img/left-blue.png" class="" style="width: 104px; height: 112px" alt="" />
+              </div>
+              <div style="width: 104px; top: 61%; left: 88%">
+                <img src="./img/left-green.png" class="" style="width: 104px; height: 112px" alt="" />
+                <div class="text-center">1025亿</div>
               </div>
             </div>
           </div>
-          <div>
-            <div class="title">重点项目两线指标</div>
-            <div class="content"></div>
-          </div>
         </div>
-        <div class="center">
+        <div>
+          <div class="title">重点项目两线指标</div>
+          <div class="content"></div>
+        </div>
+      </div>
+      <div class="center">
+        <div>
           <div>
-            <div>
-              <div class="title">两个转型</div>
-              <div class="content relative center1">
-                <div
-                  class="flex items-center justify-end"
-                  style="font-size: 24px"
-                >
-                  <span
-                    style="
+            <div class="title">两个转型</div>
+            <div class="content relative center1">
+              <div class="flex items-center justify-end" style="font-size: 24px">
+                <span style="
                       display: inline-block;
                       margin-right: 15px;
                       border-radius: 10px;
@@ -424,11 +261,9 @@
                       background: url('../img/blueBig.png') no-repeat center
                         center;
                       background-size: 100% 100%;
-                    "
-                  ></span>
-                  <span style="margin-right: 40px">产业转型</span>
-                  <span
-                    style="
+                    "></span>
+                <span style="margin-right: 40px">产业转型</span>
+                <span style="
                       display: inline-block;
                       margin-right: 15px;
                       border-radius: 10px;
@@ -437,269 +272,228 @@
                       background: url('../img/greenBig.png') no-repeat center
                         center;
                       background-size: 100% 100%;
-                    "
-                  ></span>
+                    "></span>
 
-                  <span>数字转型</span>
-                </div>
-                <div></div>
-                <div
-                  class="absolute flex items-center justify-center flex-col bubble"
-                  style="
+                <span>数字转型</span>
+              </div>
+              <div></div>
+              <div class="absolute flex items-center justify-center flex-col bubble" style="
                     width: 192px;
                     height: 192px;
                     top: 25%;
                     left: 25%;
                     animation-delay: 1s;
-                  "
-                >
-                  <span
-                    style="font-size: 30px; font-weight: bold; color: #68bdff"
-                    >206<span class="font28">亿</span></span
-                  >
-                  <span class="font28">投资金额</span>
-                </div>
-                <div
-                  class="absolute flex items-center justify-center flex-col bubble"
-                  style="
+                  ">
+                <span style="font-size: 30px; font-weight: bold; color: #68bdff">206<span class="font28">亿</span></span>
+                <span class="font28">投资金额</span>
+              </div>
+              <div class="absolute flex items-center justify-center flex-col bubble" style="
                     width: 170px;
                     height: 170px;
                     top: 60%;
                     left: 70%;
                     animation-delay: 1s;
-                  "
-                >
-                  <span
-                    style="font-size: 30px; font-weight: bold; color: #68bdff"
-                    >153<span class="font28">个</span></span
-                  >
-                  <span class="font28">项目数量</span>
-                </div>
-                <div
-                  class="absolute flex items-center justify-center flex-col bubble"
-                  style="width: 175px; height: 175px; top: 65%; left: 15%"
-                >
-                  <span
-                    style="font-size: 30px; font-weight: bold; color: #ebde27"
-                    >113<span class="font28">个</span></span
-                  >
-                  <span class="font28">项目数量</span>
-                </div>
-                <div
-                  class="absolute flex items-center justify-center flex-col bubble"
-                  style="width: 190px; height: 190px; top: 35%; left: 50%"
-                >
-                  <span
-                    style="font-size: 30px; font-weight: bold; color: #ebde27"
-                    >168<span class="font28">亿</span></span
-                  >
-                  <span class="font28">投资金额</span>
-                </div>
+                  ">
+                <span style="font-size: 30px; font-weight: bold; color: #68bdff">153<span class="font28">个</span></span>
+                <span class="font28">项目数量</span>
+              </div>
+              <div class="absolute flex items-center justify-center flex-col bubble"
+                style="width: 175px; height: 175px; top: 65%; left: 15%">
+                <span style="font-size: 30px; font-weight: bold; color: #ebde27">113<span class="font28">个</span></span>
+                <span class="font28">项目数量</span>
+              </div>
+              <div class="absolute flex items-center justify-center flex-col bubble"
+                style="width: 190px; height: 190px; top: 35%; left: 50%">
+                <span style="font-size: 30px; font-weight: bold; color: #ebde27">168<span class="font28">亿</span></span>
+                <span class="font28">投资金额</span>
               </div>
-            </div>
-            <div>
-              <div class="title">投资产业分布</div>
-              <div class="content"></div>
-            </div>
-            <div>
-              <div class="title">投资执行情况</div>
-              <div class="content"></div>
             </div>
           </div>
-          <div class="center2">
-            <div>
-              <div class="flex justify-center flex-col">
-                <div style="padding-left: 40%">
-                  <div
-                    style="font-size: 60px; color: #68bdff; font-weight: bold"
-                  >
-                    17.09<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div style="font-size: 28px; justify-self: center">
-                    总投资额
-                  </div>
+          <div>
+            <div class="title">投资产业分布</div>
+            <div class="content"></div>
+          </div>
+          <div>
+            <div class="title">投资执行情况</div>
+            <div class="content"></div>
+          </div>
+        </div>
+        <div class="center2">
+          <div>
+            <div class="flex justify-center flex-col">
+              <div>
+                <div style="font-size: 60px; color: #68bdff; font-weight: bold">
+                  17.09<span style="font-size: 28px">亿</span>
+                </div>
+                <div style="font-size: 28px; justify-self: center">
+                  总投资额
                 </div>
               </div>
-              <div class="flex justify-center flex-col">
-                <div style="padding-left: 40%">
-                  <div
-                    style="font-size: 60px; color: #5bdcc8; font-weight: bold"
-                  >
-                    353.07<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div style="font-size: 28px; justify-self: center">
-                    项目总数
-                  </div>
+            </div>
+            <div class="flex justify-center flex-col">
+              <div>
+                <div style="font-size: 60px; color: #5bdcc8; font-weight: bold">
+                  353.07<span style="font-size: 28px">亿</span>
+                </div>
+                <div style="font-size: 28px; justify-self: center">
+                  项目总数
                 </div>
               </div>
-              <div class="flex justify-center flex-col">
-                <div style="padding-left: 40%">
-                  <div
-                    style="font-size: 60px; color: #5bdcc8; font-weight: bold"
-                  >
-                    2.22<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div style="font-size: 28px; justify-self: center">
-                    股权资产
-                  </div>
+            </div>
+            <div class="flex justify-center flex-col">
+              <div>
+                <div style="font-size: 60px; color: #5bdcc8; font-weight: bold">
+                  2.22<span style="font-size: 28px">亿</span>
+                </div>
+                <div style="font-size: 28px; justify-self: center">
+                  股权资产
                 </div>
               </div>
-              <div class="flex justify-center flex-col">
-                <div style="padding-left: 40%">
-                  <div
-                    style="font-size: 60px; color: #68bdff; font-weight: bold"
-                  >
-                    66.28<span style="font-size: 28px">亿</span>
-                  </div>
-                  <div style="font-size: 28px; justify-self: center">
-                    固定资产
-                  </div>
+            </div>
+            <div class="flex justify-center flex-col">
+              <div>
+                <div style="font-size: 60px; color: #68bdff; font-weight: bold">
+                  66.28<span style="font-size: 28px">亿</span>
+                </div>
+                <div style="font-size: 28px; justify-self: center">
+                  固定资产
                 </div>
               </div>
             </div>
-            <div ref="shanxi" style="width: 100%; height: 100%"></div>
           </div>
+          <div class="relative overflow-hidden">
+            <div ref="shanxi" style="width: 100%; height: 100%;z-index: 100;"></div>
+            <div class="center3" ref="leftEcharts9"></div>
+          </div>
+        </div>
+        <div>
           <div>
             <div>
-              <div>
-                <div class="title">五个一体化</div>
-                <div class="content"></div>
-              </div>
+              <div class="title">五个一体化</div>
+              <div class="content"></div>
             </div>
+          </div>
+          <div>
             <div>
-              <div>
-                <div class="title">投资阶段分析</div>
-                <div class="content"></div>
-              </div>
+              <div class="title">投资阶段分析</div>
+              <div class="content"></div>
             </div>
+          </div>
+          <div>
             <div>
-              <div>
-                <div class="title">重点项目监控</div>
-                <div class="content"></div>
-              </div>
+              <div class="title">重点项目监控</div>
+              <div class="content"></div>
             </div>
           </div>
         </div>
-        <div class="right">
-          <div class="means">
-            <div class="meansWrap">
-              <div class="meansHead">
-                <img src="./img/1.png" alt="" />
-                固定资产
-              </div>
-              <div class="wrapMeansItem">
-                <div
-                  v-for="(item, index) in meansList"
-                  class="itemWid"
-                  :class="[topIndex == index ? 'active': '']"
-                >
-                  <div class="itemBac">
-                    <div>
-                      {{item.value}}
-                      <p>个</p>
-                    </div>
-                    <span>{{item.label}}</span>
+      </div>
+      <div class="right">
+        <div class="means">
+          <div class="meansWrap">
+            <div class="meansHead">
+              <img src="./img/1.png" alt="" />
+              固定资产
+            </div>
+            <div class="wrapMeansItem">
+              <div v-for="(item, index) in meansList" class="itemWid" :class="[topIndex == index ? 'active': '']">
+                <div class="itemBac">
+                  <div>
+                    {{item.value}}
+                    <p>个</p>
                   </div>
-                  <img
-                    v-if="index != meansList.length -1"
-                    src="./img/6.png"
-                    alt=""
-                  />
+                  <span>{{item.label}}</span>
                 </div>
+                <img v-if="index != meansList.length -1" src="./img/6.png" alt="" />
               </div>
             </div>
-            <div class="shareholding">
-              <div class="meansHead">
-                <img src="./img/2.png" alt="" />
-                股权类
-              </div>
+          </div>
+          <div class="shareholding">
+            <div class="meansHead">
+              <img src="./img/2.png" alt="" />
+              股权类
             </div>
           </div>
-          <div>
-            <div class="publicTitle">进度成本偏差概览</div>
-            <div class="progressCost">
-              <div class="costItem" v-for="(item, index) in costList">
-                <div class="itemTop">
-                  <div class="topDiv">
-                    <p>项目数量</p>
-                    <div class="costNum">
-                      {{item.num}}
-                      <span>个</span>
-                    </div>
-                  </div>
-                  <div class="topDiv" style="margin-top: 1.875rem">
-                    <p>项目数量</p>
-                    <div class="costNum">
-                      {{item.value}}
-                      <span>亿</span>
-                    </div>
+        </div>
+        <div>
+          <div class="publicTitle">进度成本偏差概览</div>
+          <div class="progressCost">
+            <div class="costItem" v-for="(item, index) in costList">
+              <div class="itemTop">
+                <div class="topDiv">
+                  <p>项目数量</p>
+                  <div class="costNum">
+                    {{item.num}}
+                    <span>个</span>
                   </div>
                 </div>
-                <div class="itemBottom">
-                  <img class="aniLeft" src="./img/8.png" alt="" />
-                  <div>{{item.status}}</div>
-                  <img class="aniRight" src="./img/9.png" alt="" />
+                <div class="topDiv" style="margin-top: 1.875rem">
+                  <p>项目数量</p>
+                  <div class="costNum">
+                    {{item.value}}
+                    <span>亿</span>
+                  </div>
                 </div>
               </div>
+              <div class="itemBottom">
+                <img class="aniLeft" src="./img/8.png" alt="" />
+                <div>{{item.status}}</div>
+                <img class="aniRight" src="./img/9.png" alt="" />
+              </div>
             </div>
           </div>
-          <div>
-            <div class="publicTitle">投资预算执行</div>
-            <div class="invest">
-              <div class="lp">
-                <div class="quan"></div>
-                <div class="bigq"></div>
-                <img :src="investData.investList[witchs].url" alt="" />
-                <div
-                  class="plItem"
-                  :style="{transform:'rotate('+innerDeg+'deg)'}"
-                >
-                  <div
-                    :class="[witchs == index? 'active' : '']"
-                    v-for="(item, index) in investData.investList"
-                    :style="{ transform: 'translateY(-50%) rotate(-' + item.deg + 'deg)' }"
-                    @click="clickItem(index)"
-                  >
-                    {{item.name}}
-                  </div>
+        </div>
+        <div>
+          <div class="publicTitle">投资预算执行</div>
+          <div class="invest">
+            <div class="lp">
+              <div class="quan"></div>
+              <div class="bigq"></div>
+              <img :src="investData.investList[witchs].url" alt="" />
+              <div class="plItem" :style="{transform:'rotate('+innerDeg+'deg)'}">
+                <div :class="[witchs == index? 'active' : '']" v-for="(item, index) in investData.investList"
+                  :style="{ transform: 'translateY(-50%) rotate(-' + item.deg + 'deg)' }" @click="clickItem(index)">
+                  {{item.name}}
                 </div>
               </div>
-              <div class="investInfoWrap">
-                <div class="investInfo">
-                  预算额<span>{{investData.investList[witchs].yse}}</span>亿
-                </div>
-                <div class="investInfo">
-                  已签合同额<span>{{investData.investList[witchs].yqhte}}</span>亿
-                </div>
-                <div class="investInfo">
-                  产值认定额<span>{{investData.investList[witchs].czrde}}</span>亿
-                </div>
-                <div class="investInfo">
-                  结算额<span>{{investData.investList[witchs].jse}}</span>亿
-                </div>
-                <div class="investInfo">
-                  付款额<span>{{investData.investList[witchs].fke}}</span>亿
-                </div>
+            </div>
+            <div class="investInfoWrap">
+              <div class="investInfo">
+                预算额<span>{{investData.investList[witchs].yse}}</span>亿
+              </div>
+              <div class="investInfo">
+                已签合同额<span>{{investData.investList[witchs].yqhte}}</span>亿
+              </div>
+              <div class="investInfo">
+                产值认定额<span>{{investData.investList[witchs].czrde}}</span>亿
+              </div>
+              <div class="investInfo">
+                结算额<span>{{investData.investList[witchs].jse}}</span>亿
+              </div>
+              <div class="investInfo">
+                付款额<span>{{investData.investList[witchs].fke}}</span>亿
               </div>
             </div>
           </div>
-          <div>
-            <div class="publicTitle">进度成本偏差</div>
-            <div class="echartsWrap" ref="echartR1"></div>
-          </div>
-          <div>
-            <div class="publicTitle">项目风险分析</div>
-            <div class="projectRisk">
-              <div class="riskWrap" ref="echartR2"></div>
-              <div class="riskWrap" ref="echartR3"></div>
-              <div class="riskWrap longRisk" ref="echartR4"></div>
-            </div>
+        </div>
+        <div>
+          <div class="publicTitle">进度成本偏差</div>
+          <div class="echartsWrap" ref="echartR1"></div>
+        </div>
+        <div>
+          <div class="publicTitle">项目风险分析</div>
+          <div class="projectRisk">
+            <div class="riskWrap" ref="echartR2"></div>
+            <div class="riskWrap" ref="echartR3"></div>
+            <div class="riskWrap longRisk" ref="echartR4"></div>
           </div>
         </div>
       </div>
-      <!-- <div style="width: 500px;height: 500px;" ref="echart1"></div> -->
+      <div class="bottom-tip"></div>
     </div>
-    <!-- </dv-full-screen-container> -->
-    <script src="./js/index.js"></script>
-  </body>
-</html>
+    <!-- <div style="width: 500px;height: 500px;" ref="echart1"></div> -->
+  </div>
+  <!-- </dv-full-screen-container> -->
+  <script src="./js/index.js"></script>
+</body>
+
+</html>

+ 44 - 9
investmentNew/js/index.js

@@ -10,6 +10,7 @@ let app = new Vue({
       leftEcharts6: "",
       leftEcharts7: "",
       leftEcharts8: "",
+      leftEcharts9: '',
       shanxiMap: "", // 山西地图
       industryProportion: 1, // 主辅业占比轮播
       industryLayout: 0, //产业布局分析
@@ -249,6 +250,7 @@ let app = new Vue({
       this.leftEcharts6Fun();
       this.leftEcharts7Fun();
       this.leftEcharts8Fun();
+      this.leftEcharts9Fun();
       this.chinaEchartsFun();
       this.initChartR1();
       this.initChartR2();
@@ -1069,6 +1071,10 @@ let app = new Vue({
     // 产业布局分析点击方法
     industryLayoutChange (e) {
       this.industryLayout = e;
+      this.time2 && clearInterval(this.time2);
+      this.leftEcharts5.dispose();
+      this.timeNs()
+      this.leftEcharts5Fun();
     },
     yuanChange (value) {
       return Number((value / 100000000).toFixed(2));
@@ -2518,13 +2524,12 @@ let app = new Vue({
           if (geoCoord) {
             res.push({
               name: data[i].name,
-              value: geoCoord.concat(data[i].value),
+              value: geoCoord.concat(data[i].value,data[i].value2),
             });
           }
         }
         return res;
       };
-
       var convertedData = [
         convertData(data),
         convertData(
@@ -2535,12 +2540,11 @@ let app = new Vue({
             .slice(0, 6)
         ),
       ];
-      console.log(convertedData[0], '看看啥情况')
       data.sort(function (a, b) {
         return a.value - b.value;
       });
       option = {
-        // backgroundColor: '#404a59',
+        backgroundColor: '#404a5900',
         animation: true,
         animationDuration: 1000,
         animationEasing: "cubicInOut",
@@ -2600,7 +2604,7 @@ let app = new Vue({
             confine: true, // 不超出当前表
 
             formatter: (params, ticket, callback) => {
-              console.log('走了点点了2', params)
+              console.log(params,'?????????')
               // 清空所有轮播
               for (var k in geoCoordMap) {
                 that.shanxiMap.dispatchAction({
@@ -2644,8 +2648,8 @@ let app = new Vue({
               <div class="flex items-center">
                 <img src="./img/yellowArrow.png" style="width: 12px;height: 22px;margin-right:10px" alt=""><span class="fb">${params.name}</span>
               </div>
-                <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">26<span style="font-size:20px" class="fn">个</span></span></div>
-                <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">180<span style="font-size:20px" class="fn">亿</span></span></div>
+                <div class="blueIcon flex items-center">项目数量:<span class="fb" style="color:#68BDFF;">${params.value[3]}<span style="font-size:20px" class="fn">个</span></span></div>
+                <div class="blueIcon flex items-center">投资总额:<span class="fb" style="color:#68BDFF">${params.value[2]}<span style="font-size:20px" class="fn">亿</span></span></div>
               </div>`
             },
           },
@@ -2749,9 +2753,10 @@ let app = new Vue({
             symbolSize: function (val) {
               return Math.max(val[2] / 500, 8);
             },
-            showEffectOn: "render",
+            showEffectOn: "emphasis",
             rippleEffect: {
               brushType: "stroke",
+              color:'#58F7DF'
             },
             hoverAnimation: true,
             label: {
@@ -2794,9 +2799,10 @@ let app = new Vue({
             symbolSize: function (val) {
               return Math.max(val[2] / 500, 8);
             },
-            showEffectOn: "render",
+            showEffectOn: "emphasis",
             rippleEffect: {
               brushType: "stroke",
+              color:'#DF62F2'
             },
             hoverAnimation: true,
             label: {
@@ -2847,5 +2853,34 @@ let app = new Vue({
       });
       this.shanxiMap.setOption(option);
     },
+    leftEcharts9Fun () {
+      let that = this;
+      this.leftEcharts9 = echarts.init(this.$refs["leftEcharts9"]);
+      // var ROOT_PATH = 'https://echarts.apache.org/examples';
+      let option = {
+        backgroundColor: '#00000000',
+        globe: {
+          globeRadius:65,
+          baseTexture: './img/3D/world1.jpg',
+          heightTexture: './img/3D/world1.jpg',
+          displacementScale: 0.04,
+          shading: 'realistic',
+          // environment: './img/3D/world2.jpg',
+          realisticMaterial: {
+            roughness: 0.9
+          },
+          postEffect: {
+            enable: true
+          },
+          light: {
+            main: {
+              intensity: 0,
+              shadow: true
+            },
+          }
+        }
+      };
+      that.leftEcharts9.setOption(option);
+    }
   },
 });

文件差異過大導致無法顯示
+ 0 - 0
investmentNew/libs/echarts-gl.min.js


+ 28 - 8
investmentNew/styles/index.css

@@ -88,6 +88,7 @@ a {
   gap: 10px;
   padding: 0 1% 1% 1%;
   align-items: end;
+  position: relative;
 }
 .left,
 .right {
@@ -232,6 +233,7 @@ a {
   width: 100%;
   overflow: hidden;
   gap: 10px;
+  position: relative;
 }
 .center > div:nth-child(1),
 .center > div:nth-child(3) {
@@ -266,7 +268,7 @@ a {
 }
 .center2 {
   display: grid;
-  grid-template-rows: 1fr 4fr;
+  grid-template-rows: 1fr 6fr;
   overflow: hidden;
 }
 .center2 > div:nth-child(1) > div {
@@ -281,25 +283,34 @@ a {
   gap: 10px;
   overflow: hidden;
 }
+.center2 > div:nth-child(1) > div{
+  margin-left: 10%;
+  background-size: 100% 100%;
+  overflow: hidden;
+  padding-left: 40%;
+}
 .center2 > div:nth-child(1) > div:nth-child(1) {
   background: url("../img/centerTop1.png") no-repeat center left; /*图标路径*/
-  background-size: 140% 100%;
-  overflow: hidden;
 }
 .center2 > div:nth-child(1) > div:nth-child(2) {
   background: url("../img/centerTop2.png") no-repeat center left; /*图标路径*/
-  background-size: 140% 100%;
-  overflow: hidden;
 }
 .center2 > div:nth-child(1) > div:nth-child(3) {
   background: url("../img/centerTop3.png") no-repeat center left; /*图标路径*/
-  background-size: 140% 100%;
-  overflow: hidden;
 }
 .center2 > div:nth-child(1) > div:nth-child(4) {
   background: url("../img/centerTop4.png") no-repeat center left; /*图标路径*/
-  background-size: 140% 100%;
+}
+.center3{
+  position: absolute !important;
   overflow: hidden;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  opacity: 0.4;
+  /* display: none; */
 }
 .bgTooltip {
   overflow: hidden;
@@ -324,6 +335,15 @@ a {
   margin-right: 10px;
   color: #40a9ff;
 }
+.bottom-tip{
+  background: url("../img/center-bottonm.png") no-repeat center left; /*图标路径*/
+  background-size: 100% 100%;
+  width: 1600px;
+  height: 120px;
+  position: absolute;
+  bottom: 0;
+  left: calc( 50% - 800px);
+}
 /* 公共css */
 /* 宽高纵横比 */
 .font28 {

部分文件因文件數量過多而無法顯示