diff --git a/package-lock.json b/package-lock.json
index 3f7a43f..d1ac80a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,6 @@
         "core-js": "^3.8.3",
         "echarts": "^5.4.3",
         "echarts-gl": "^2.0.9",
-        "lib-flexible": "^0.3.2",
         "postcss-preset-env": "^9.3.0",
         "postcss-pxtorem": "^5.1.1",
         "register-service-worker": "^1.7.2",
@@ -7877,11 +7876,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/lib-flexible": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
-      "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
-    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -18803,11 +18797,6 @@
       "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
       "dev": true
     },
-    "lib-flexible": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
-      "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
-    },
     "lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/lilconfig/-/lilconfig-2.1.0.tgz",
diff --git a/package.json b/package.json
index 2192739..ab40294 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "core-js": "^3.8.3",
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
-    "lib-flexible": "^0.3.2",
     "postcss-preset-env": "^9.3.0",
     "postcss-pxtorem": "^5.1.1",
     "register-service-worker": "^1.7.2",
diff --git a/src/App.vue b/src/App.vue
index 8a04de8..ebd2a13 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,15 +5,11 @@
 </template>
 <script></script>
 <style lang="less">
-* {
-  margin: 0;
-  padding: 0;
-}
 #app {
-  // width: 100vw;
-  // height: 100vh;
-  width: 1920px;
-  height: 1080px;
+  width: 100vw;
+  height: 100vh;
+  // width: 1920px;
+  // height: 1080px;
   padding-top: 15px;
   padding-left: 13px;
   padding-bottom: 13px;
@@ -22,4 +18,8 @@
   background-color: #04134c;
   overflow: hidden;
 }
+* {
+  margin: 0;
+  padding: 0;
+}
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 94ffcbd..478deec 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,10 +19,10 @@ const routes = [
     component: () => import("../views/ZHDY.vue"),
   },
   {
-    path:"/xqxy",
-    name:"xqxy",
-    component:()=>import("../views/XQXY.vue"),
-  }
+    path: "/xqxy",
+    name: "xqxy",
+    component: () => import("../views/XQXY.vue"),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/Two.vue b/src/views/Two.vue
index b6aacaa..d69092b 100644
--- a/src/views/Two.vue
+++ b/src/views/Two.vue
@@ -7,12 +7,49 @@
     </div>
     <div class="container">
       <div class="left">
-        <div class="ztynqk"></div>
+        <div class="ztynqk">
+          <p class="title">总体用能情况</p>
+          <ul class="typeBox">
+            <li :class="res == '日' ? 'active' : ''" @click="res = '日'">日</li>
+            <li :class="res == '月' ? 'active' : ''" @click="res = '月'">月</li>
+            <li :class="res == '年' ? 'active' : ''" @click="res = '年'">年</li>
+          </ul>
+          <div class="bottom">
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标.png" alt="" />
+              <div>
+                <p>用电量(MWH)</p>
+                <p><span>84.00</span><span>-13.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/图标(1).png" alt="" />
+              <div>
+                <p>用蒸汽量(m2)</p>
+                <p><span>45.32</span><span>-23.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3125.png" alt="" />
+              <div>
+                <p>用水量(m2)</p>
+                <p><span>56.00</span><span>-33.20%</span></p>
+              </div>
+            </div>
+            <div class="bottomBox">
+              <img src="../assets/客户侧总体用能情况分析/组 3124.png" alt="" />
+              <div>
+                <p>用汽量(m2)</p>
+                <p><span>37.00</span><span>43.20%</span></p>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="ssfhzs"></div>
         <div class="ynl"></div>
       </div>
       <div class="center">
-        <div class="map"></div>
+        <div id="map"></div>
         <div class="yhzyfbqk"></div>
       </div>
       <div class="right">
@@ -23,7 +60,278 @@
     </div>
   </div>
 </template>
-<script></script>
+<script>
+import * as echarts from "echarts";
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    initMap() {
+      //后端返回的数据
+      var data = [
+        {
+          name: "济南市",
+          value: 1,
+          coord: [117.000923, 36.675807],
+        },
+        {
+          name: "青岛市",
+          value: 2,
+          coord: [120.382639, 36.067082],
+        },
+        {
+          name: "淄博市",
+          value: 3,
+          coord: [118.059134, 36.804685],
+        },
+        {
+          name: "枣庄市",
+          value: 4,
+          coord: [117.557964, 34.856424],
+        },
+        {
+          name: "东营市",
+          value: 5,
+          coord: [118.674767, 37.434751],
+        },
+        {
+          name: "烟台市",
+          value: 6,
+          coord: [121.447935, 37.463822],
+        },
+        {
+          name: "潍坊市",
+          value: 7,
+          coord: [119.161756, 36.706774],
+        },
+        {
+          name: "济宁市",
+          value: 8,
+          coord: [116.587245, 35.415393],
+        },
+        {
+          name: "泰安市",
+          value: 9,
+          coord: [117.089415, 36.188078],
+        },
+        {
+          name: "威海市",
+          value: 10,
+          coord: [122.120419, 37.513068],
+        },
+        {
+          name: "日照市",
+          value: 11,
+          coord: [119.526888, 35.416377],
+        },
+        {
+          name: "临沂市",
+          value: 12,
+          coord: [118.356448, 35.104672],
+        },
+        {
+          name: "德州市",
+          value: 13,
+          coord: [116.357465, 37.434093],
+        },
+        {
+          name: "聊城市",
+          value: 14,
+          coord: [115.986869, 36.455829],
+        },
+        {
+          name: "滨州市",
+          value: 15,
+          coord: [118.016974, 37.383542],
+        },
+        {
+          name: "菏泽市",
+          value: 16,
+          coord: [115.469381, 35.246531],
+        },
+      ];
+      var chartDom = document.getElementById("map");
+      var myChart = this.$echarts.init(chartDom, null, { renderer: "webgl" });
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+      //获取山东地图数据。
+      $.get(
+        "https://geo.datav.aliyun.com/areas_v3/bound/370000_full.json",
+        function (geojson) {
+          echarts.registerMap("山东", geojson);
+          let option = {
+            series: [
+              {
+                tooltip: {
+                  trigger: "item",
+                  // show: false,
+                },
+                name: "山东",
+                type: "map",
+                map: "山东",
+                boxDepth: 60, //地图倾斜度
+                regionHeight: 6, //地图厚度
+                aspectScale: 0.9, //地图长宽比
+                emphasis: {
+                  itemStyle: {
+                    areaColor: "#70EAF4", // 高亮时候地图显示的颜色
+                    borderWidth: 2, // 高亮时的边框宽度
+                  },
+                  label: {
+                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    color: "#fff",
+                  },
+                },
+                label: {
+                  show: true, //是否显示市
+                  formatter: function (params) {
+                    var name = params.name;
+                    var value = params.value;
+                    var text = ` {fline|${value}}\n{tline|${name}} `;
+                    return text;
+                  },
+                  textStyle: {
+                    color: "#000", //文字颜色
+                    fontSize: 16, //文字大小
+                    fontFamily: "微软雅黑",
+                    // backgroundColor: {
+                    //   image: "../assets/客户侧总体用能情况分析/光标.png",
+                    // },
+                    // padding: [15, 20],
+                  },
+                  rich: {
+                    fline: {
+                      padding: [0, 35],
+                      color: "#FDCC00",
+                      fontSize: 14,
+                      fontWeight: 600,
+                    },
+                    tline: {
+                      padding: [0, 27],
+                      color: "#fff",
+                      fontSize: 12,
+                    },
+                  },
+                },
+                itemStyle: {
+                  opacity: 0.8, // 透明度
+                  borderWidth: 2, //分界线宽度
+                  borderColor: "#0699E4", //分界线颜色
+                  areaColor: {
+                    x: 0.5,
+                    y: 0.7,
+                    r: 0.5,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(20,110,230,0.4)",
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(6,33,121,0.4)",
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+                groundplane: {
+                  show: true,
+                },
+                data: data,
+                z: 999,
+                shading: "realistic",
+                // 真实感材质相关配置 shading: 'realistic'时有效
+                realisticMaterial: {
+                  detailTexture: "rgb(0, 102, 204)", // 纹理贴图
+                  textureTiling: 0, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+                  roughness: 0.8, // 调整光照模型的粗糙度
+                  metalness: 0.0, // 调整金属感，0.0 为非金属
+                  roughnessAdjust: 0,
+                },
+                viewControl: {
+                  distance: 90, // 地图视角 控制初始大小
+                  rotateSensitivity: 0, // 旋转
+                  zoomSensitivity: 1.5, // 缩放
+                },
+                zoom: 1.25,
+              },
+            ],
+            animation: true,
+          };
+
+          myChart.setOption(option);
+          myChart.on("click", chartClick);
+          //点击地图区域事件
+          function chartClick(param) {
+            console.log(param);
+            myChart.setOption(option, false);
+            window.addEventListener("resize", function () {
+              myChart.resize();
+            });
+            // var selectedPro = param.name;
+            // if (!cityProper[selectedPro]) {
+            //   option.series.splice(1);
+            //   option.legend = null;
+            //   option.visualMap = null;
+            //   myChart.setOption(option, true);
+            //   return;
+            // }
+            //获取点击区域数据
+            // $.get(cityProper[selectedPro], function (geojson) {
+            //   echarts.registerMap(selectedPro, geojson);
+            //   //根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
+            //   option.series[0] = {
+            //     name: "",
+            //     type: "map",
+            //     map: selectedPro,
+            //     boxDepth: 80, //地图倾斜度
+            //     regionHeight: 5, //地图厚度
+            //     itemStyle: {
+            //       normal: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //       emphasis: {
+            //         label: {
+            //           show: true,
+            //         },
+            //       },
+            //     },
+            //     groundplane: {
+            //       show: false,
+            //     },
+            //     data: data,
+            //     shading: "realistic",
+            //     // 真实感材质相关配置 shading: 'realistic'时有效
+            //     realisticMaterial: {
+            //       detailTexture: "#fff", // 纹理贴图
+            //       textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
+            //       roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
+            //       metalness: 0, // 0材质是非金属 ，1金属
+            //       roughnessAdjust: 0,
+            //     },
+            //     viewControl: {
+            //       distance: 30, // 地图视角 控制初始大小
+            //       rotateSensitivity: 1, // 旋转
+            //       zoomSensitivity: 1, // 缩放
+            //     },
+            //   };
+            //   myChart.setOption(option);
+            // });
+          }
+        }
+      );
+    },
+  },
+  created() {},
+  mounted() {
+    this.initMap();
+  },
+};
+</script>
 <style lang="less" scoped>
 .top {
   background-color: red;
@@ -82,30 +390,100 @@
       height: 27.3vh;
       background-color: red;
       background: url("../assets/客户侧总体用能情况分析/组 3117.png");
-      background-size: cover;
+      background-size: 100% 100%;
       background-repeat: no-repeat;
       position: relative;
+
       .title {
         position: absolute;
-        left: 8.3vw;
-        width: 7.5vw;
-        height: 3.3vh;
-        font-size: 1.7vh;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 18px;
         font-family: "Source Han Sans";
         font-weight: 700;
         color: rgba(255, 255, 255, 0.87);
-        line-height: 3.3vh;
+      }
+
+      .typeBox {
+        list-style: none;
+        display: flex;
+        position: absolute;
+        top: 54px;
+        left: 50%;
+        transform: translateX(-50%);
+        li {
+          width: 39px;
+          height: 21px;
+          background: rgba(29, 29, 29, 0.5);
+          border-radius: 2px 2px 2px 2px;
+          font-size: 14px;
+          border: 1px solid #666666;
+          text-align: center;
+          margin: 2.5px;
+          cursor: pointer;
+        }
+
+        .active {
+          background: rgba(10, 167, 255, 0.3);
+          border: 1px solid #0aa7ff;
+        }
+      }
+
+      .bottom {
+        margin-top: 90px;
+        display: flex;
+        flex-wrap: wrap;
+
+        .bottomBox {
+          display: flex;
+          align-items: center;
+          width: 180px;
+          margin: 10px;
+
+          img {
+            width: 72px;
+            height: 72px;
+          }
+
+          div {
+            p:nth-of-type(1) {
+              width: 120px;
+              margin-bottom: 10px;
+              margin-top: 5px;
+              font-size: 14px;
+              font-family: " AlibabaPuHuiTi";
+              font-weight: 400;
+            }
+
+            span:nth-of-type(1) {
+              font-size: 20px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 700;
+            }
+
+            span:nth-of-type(2) {
+              font-size: 14px;
+              font-family: "AlibabaPuHuiTi";
+              font-weight: 400;
+              margin-left: 6px;
+            }
+          }
+        }
       }
     }
     .ssfhzs {
       width: 100%;
       height: 29.2vh;
       background-color: yellow;
+      background: url("../assets/客户侧总体用能情况分析/实时负荷走势-框.png");
+      background-size: 100% 100%;
     }
     .ynl {
       width: 100%;
       height: 30vh;
       background-color: blue;
+      background: url("../assets/客户侧总体用能情况分析/用能量-框.png");
+      background-size: 100% 100%;
     }
   }
   .right {
@@ -113,27 +491,47 @@
       width: 100%;
       height: 27.2vh;
       background-color: yellow;
+      background: url("../assets/客户侧总体用能情况分析/组 3117.png");
+      background-size: 100% 100%;
     }
     .ynflzb {
       height: 27.2vh;
       background-color: red;
+      background: url("../assets/客户侧总体用能情况分析/组 3118.png");
+      background-size: 100% 100%;
     }
     .qyydlpm {
       height: 32.7vh;
       background-color: aqua;
+      background: url("../assets/客户侧总体用能情况分析/组 3119.png");
+      background-size: 100% 100%;
     }
   }
   .center {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    .map {
+    position: relative;
+
+    #map {
+      width: 994px;
+      position: absolute;
+      height: 627px;
       height: 58vh;
-      background-color: red;
+      background: url(../assets/客户侧总体用能情况分析/背景.png);
+      background-size: 100% 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      overflow: hidden;
     }
     .yhzyfbqk {
       height: 30vh;
+      width: 100%;
       background-color: yellow;
+      background: url("../assets/客户侧总体用能情况分析/组 3120.png");
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 0;
     }
   }
 }