From 5aec569c9d67c86819010171bc527afede505fe5 Mon Sep 17 00:00:00 2001
From: TreeWish <1131093754@qq.com>
Date: 星期四, 23 二月 2023 18:51:48 +0800
Subject: [PATCH] 管网一张图对接接口数据

---
 src/assets/img/Screen/leftBar.png        |    0 
 src/assets/img/Screen/cunchu.png         |    0 
 src/assets/img/Screen/contentBg.png      |    0 
 src/components/Screen/top.vue            |    2 
 src/assets/img/Screen/asideTitleBg.png   |    0 
 src/components/chart/FileFormat.vue      |  252 +++++++++++
 src/components/Screen/left.vue           |  338 ++++++++-------
 src/assets/img/Screen/numBg.png          |    0 
 src/components/Screen/mapsdk.vue         |    2 
 src/components/Screen/right.vue          |   46 +
 src/components/chart/CountDataApply.vue  |  188 ++++++++
 src/components/chart/ServiceType.vue     |   73 +-
 src/assets/img/Screen/rightBar.png       |    0 
 src/main.js                              |    6 
 package.json                             |    1 
 src/assets/img/Screen/projectBg.png      |    0 
 src/views/Thematic/index.vue             |   16 
 src/components/chart/DataStorage.vue     |  216 +++++++++
 src/components/chart/ProjectCategory.vue |  136 ++++++
 19 files changed, 1,065 insertions(+), 211 deletions(-)

diff --git a/package.json b/package.json
index 12b8a37..593b600 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "fix-memory-limit": "cross-env LIMIT=4096 increase-memory-limit"
   },
   "dependencies": {
+    "@jiaminghi/data-view": "^2.10.0",
     "@terraformer/wkt": "^2.1.2",
     "@turf/turf": "^6.5.0",
     "animate.css": "^4.1.1",
diff --git a/src/assets/img/Screen/asideTitleBg.png b/src/assets/img/Screen/asideTitleBg.png
new file mode 100644
index 0000000..b86f3ab
--- /dev/null
+++ b/src/assets/img/Screen/asideTitleBg.png
Binary files differ
diff --git a/src/assets/img/Screen/contentBg.png b/src/assets/img/Screen/contentBg.png
new file mode 100644
index 0000000..58b4f8e
--- /dev/null
+++ b/src/assets/img/Screen/contentBg.png
Binary files differ
diff --git a/src/assets/img/Screen/cunchu.png b/src/assets/img/Screen/cunchu.png
new file mode 100644
index 0000000..376f3dd
--- /dev/null
+++ b/src/assets/img/Screen/cunchu.png
Binary files differ
diff --git a/src/assets/img/Screen/leftBar.png b/src/assets/img/Screen/leftBar.png
new file mode 100644
index 0000000..e2dde16
--- /dev/null
+++ b/src/assets/img/Screen/leftBar.png
Binary files differ
diff --git a/src/assets/img/Screen/numBg.png b/src/assets/img/Screen/numBg.png
new file mode 100644
index 0000000..2b25fc5
--- /dev/null
+++ b/src/assets/img/Screen/numBg.png
Binary files differ
diff --git a/src/assets/img/Screen/projectBg.png b/src/assets/img/Screen/projectBg.png
new file mode 100644
index 0000000..bb10a91
--- /dev/null
+++ b/src/assets/img/Screen/projectBg.png
Binary files differ
diff --git a/src/assets/img/Screen/rightBar.png b/src/assets/img/Screen/rightBar.png
new file mode 100644
index 0000000..e25ee66
--- /dev/null
+++ b/src/assets/img/Screen/rightBar.png
Binary files differ
diff --git a/src/components/Screen/left.vue b/src/components/Screen/left.vue
index 2886037..cf51f3c 100644
--- a/src/components/Screen/left.vue
+++ b/src/components/Screen/left.vue
@@ -4,9 +4,19 @@
       <img :src="leftImg" @click="ChangeLeft" />
     </div>
     <div class="leftContainer" v-show="ChartDisplay">
-      <div class="current1" id="leftCurrent1"></div>
-      <div class="current1" id="leftCurrent2"></div>
-      <div class="current1" id="leftCurrent3"></div>
+      <div class="current1" id="leftCurrent1">
+        <div class="aside-title">鏁版嵁鐢宠娆℃暟</div>
+        <count-data-apply ></count-data-apply>
+      </div>
+      <div class="current1" id="leftCurrent2">
+        <div class="aside-title">鏈嶅姟绫诲埆</div>
+
+        <service-type></service-type>
+      </div>
+      <div class="current1" id="leftCurrent3">
+        <div class="aside-title">瀛樺偍淇℃伅</div>
+        <data-storage></data-storage>
+      </div>
     </div>
     <div class="leftContainer" v-show="ProjectreeDisplay">
       <project-tree></project-tree>
@@ -14,10 +24,16 @@
   </div>
 </template>
 <script>
-import ProjectTree from './ProjectTree.vue'
+import ProjectTree from "./ProjectTree.vue"
+import countDataApply from "@/components/chart/CountDataApply.vue"
+import ServiceType from "../chart/ServiceType.vue"
+import DataStorage from "../chart/DataStorage.vue"
 export default {
   components: {
-    ProjectTree
+    ProjectTree,
+    countDataApply,
+    ServiceType,
+    DataStorage,
   },
   data() {
     return {
@@ -28,8 +44,8 @@
     }
   },
   mounted() {
-    this.OpenLeftInit();
-    this.OpenLeftInitChart();
+    this.OpenLeftInit()
+    // this.OpenLeftInitChart();
   },
   methods: {
     ChangeLeft() {
@@ -39,7 +55,7 @@
         } else {
           this.leftImg = require("../../assets/img/Screen/rightArrow.png")
         }
-        this.ChartDisplay = !this.ChartDisplay;
+        this.ChartDisplay = !this.ChartDisplay
       }
 
       if (this.leftMessage == "projectree") {
@@ -48,109 +64,107 @@
         } else {
           this.leftImg = require("../../assets/img/Screen/rightArrow.png")
         }
-        this.ProjectreeDisplay = !this.ProjectreeDisplay;
+        this.ProjectreeDisplay = !this.ProjectreeDisplay
       }
 
-
-      this.$parent.ChangeWidth("left");
+      this.$parent.ChangeWidth("left")
     },
     //鎵撳紑澶у睆宸︿晶鐣岄潰
     OpenLeftInit() {
-      this.ChartDisplay = true;
-      this.ProjectreeDisplay = false;
-      this.leftMessage = "init";
-      this.OpenLeftInitChart();
-      this.$parent.ChangeWidth("leftView");
-
+      this.ChartDisplay = true
+      this.ProjectreeDisplay = false
+      this.leftMessage = "init"
+      // this.OpenLeftInitChart();
+      this.$parent.ChangeWidth("leftView")
     },
     //鎵撳紑宸ョ▼鏍�
     OpenLeftProjectTree() {
-      this.ChartDisplay = false;
-      this.ProjectreeDisplay = true;
-      this.leftMessage = "projectree";
-      this.$parent.ChangeWidth("leftTree");
+      this.ChartDisplay = false
+      this.ProjectreeDisplay = true
+      this.leftMessage = "projectree"
+      this.$parent.ChangeWidth("leftTree")
     },
     //澶у睆鐣岄潰鍥捐〃
     OpenLeftInitChart() {
       //宸︿竴鍥�
       let option1 = {
         title: {
-          text: '椤圭洰鍒嗙被',
+          text: "椤圭洰鍒嗙被",
           padding: [10, 30],
           textStyle: {
-            color: '#fff',
-            fontSize: 15
+            color: "#fff",
+            fontSize: 15,
           },
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow',
+            type: "shadow",
           },
         },
         grid: {
-          left: '2%',
-          right: '4%',
-          bottom: '0%',
+          left: "2%",
+          right: "4%",
+          bottom: "0%",
           containLabel: true,
         },
         xAxis: {
-          type: 'value',
+          type: "value",
           boundaryGap: [0, 0.01],
           axisLine: {
             lineStyle: {
-              color: '#ccc',
+              color: "#ccc",
             },
           },
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
         },
         yAxis: {
-          type: 'category',
+          type: "category",
           data: [
-            '绠¢亾绫�',
-            '绠$綉绫�',
-            '鍩哄缓绫�',
-            '鑸┖娴嬮噺',
-            '椋庨櫓鎺掓煡',
-            '宸ョ▼鍩硅',
+            "绠¢亾绫�",
+            "绠$綉绫�",
+            "鍩哄缓绫�",
+            "鑸┖娴嬮噺",
+            "椋庨櫓鎺掓煡",
+            "宸ョ▼鍩硅",
           ],
           axisLine: {
             lineStyle: {
-              color: '#ccc',
+              color: "#ccc",
             },
           },
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
         },
         series: [
           {
-            name: '椤圭洰鍒嗙被',
-            type: 'bar',
+            name: "椤圭洰鍒嗙被",
+            type: "bar",
             barWidth: 20,
             data: [36, 45, 25, 15, 49, 33],
             itemStyle: {
               normal: {
                 // 鏌卞舰鍥惧渾瑙掞紝鍒濆鍖栨晥鏋�
                 barBorderRadius: [0, 90, 90, 0],
-                color: (params) => {
+                color: params => {
                   var colorList = [
-                    ['#00FCFF', '#008297'],
-                    ['#0091FF', '#005EA4'],
-                    ['#901698', '#F157EE'],
-                    ['#40FBCB', '#009871'],
-                    ['#FF515A', '#FFDD53'],
-                    ['#6574E2', '#261164'],
-                  ];
-                  var colorItem = colorList[params.dataIndex];
+                    ["#00FCFF", "#008297"],
+                    ["#0091FF", "#005EA4"],
+                    ["#901698", "#F157EE"],
+                    ["#40FBCB", "#009871"],
+                    ["#FF515A", "#FFDD53"],
+                    ["#6574E2", "#261164"],
+                  ]
+                  var colorItem = colorList[params.dataIndex]
                   return new this.$echarts.graphic.LinearGradient(
                     1,
                     0,
@@ -167,68 +181,68 @@
                       },
                     ],
                     false
-                  );
+                  )
                 },
               },
             },
           },
         ],
-      };
-      let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"));
-      myChart1.setOption(option1);
+      }
+      let myChart1 = this.$echarts.init(document.getElementById("leftCurrent1"))
+      myChart1.setOption(option1)
       window.addEventListener("resize", function () {
-        myChart1.resize();
-      });
+        myChart1.resize()
+      })
 
       //宸︿簩鍥�
       let dataAxis = [
-        '涓縿涓滅嚎绠¢亾宸ョ▼鍗楁',
-        '涓縿涓滅嚎绠¢亾宸ョ▼涓',
-        '骞垮窞绔�',
-        '鍞愬北LNG',
-        '鏂扮枂杩炴湪娌佺珯鍦�',
-        '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�',
-      ];
-      let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1];
-      let yMax = 500;
-      let dataShadow = [];
+        "涓縿涓滅嚎绠¢亾宸ョ▼鍗楁",
+        "涓縿涓滅嚎绠¢亾宸ョ▼涓",
+        "骞垮窞绔�",
+        "鍞愬北LNG",
+        "鏂扮枂杩炴湪娌佺珯鍦�",
+        "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�",
+      ]
+      let data = [0.4, 0.2, 0.7, 0.65, 0.5, 0.1]
+      let yMax = 500
+      let dataShadow = []
       for (let i = 0; i < data.length; i++) {
-        dataShadow.push(yMax);
+        dataShadow.push(yMax)
       }
       let option2 = {
         title: {
-          text: '椤圭洰瀹屾垚搴�',
+          text: "椤圭洰瀹屾垚搴�",
           padding: [10, 30],
           textStyle: {
-            color: '#fff',
-            fontSize: 15
+            color: "#fff",
+            fontSize: 15,
           },
         },
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow',
+            type: "shadow",
           },
         },
         grid: {
-          left: '3%',
-          right: '0%',
-          bottom: '0%',
+          left: "3%",
+          right: "0%",
+          bottom: "0%",
           containLabel: true,
         },
         xAxis: {
-          type: 'category',
+          type: "category",
           data: dataAxis,
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
             formatter: function (params) {
-              var newParamsName = ''; // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
-              var paramsNameNumber = params.length; // 瀹為檯鏍囩鐨勪釜鏁�
-              var provideNumber = 4; // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
-              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
+              var newParamsName = "" // 鏈�缁堟嫾鎺ユ垚鐨勫瓧绗︿覆
+              var paramsNameNumber = params.length // 瀹為檯鏍囩鐨勪釜鏁�
+              var provideNumber = 4 // 姣忚鑳芥樉绀虹殑瀛楃殑涓暟
+              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 鎹㈣鐨勮瘽锛岄渶瑕佹樉绀哄嚑琛岋紝鍚戜笂鍙栨暣
               /**
                * 鍒ゆ柇鏍囩鐨勪釜鏁版槸鍚﹀ぇ浜庤瀹氱殑涓暟锛� 濡傛灉澶т簬锛屽垯杩涜鎹㈣澶勭悊 濡傛灉涓嶅ぇ浜庯紝鍗崇瓑浜庢垨灏忎簬锛屽氨杩斿洖鍘熸爣绛�
                */
@@ -236,25 +250,25 @@
               if (paramsNameNumber > provideNumber) {
                 /** 寰幆姣忎竴琛�,p琛ㄧず琛� */
                 for (var p = 0; p < rowNumber; p++) {
-                  var tempStr = ''; // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
-                  var start = p * provideNumber; // 寮�濮嬫埅鍙栫殑浣嶇疆
-                  var end = start + provideNumber; // 缁撴潫鎴彇鐨勪綅缃�
+                  var tempStr = "" // 琛ㄧず姣忎竴娆℃埅鍙栫殑瀛楃涓�
+                  var start = p * provideNumber // 寮�濮嬫埅鍙栫殑浣嶇疆
+                  var end = start + provideNumber // 缁撴潫鎴彇鐨勪綅缃�
                   // 姝ゅ鐗规畩澶勭悊鏈�鍚庝竴琛岀殑绱㈠紩鍊�
                   if (p == rowNumber - 1) {
                     // 鏈�鍚庝竴娆′笉鎹㈣
-                    tempStr = params.substring(start, paramsNameNumber);
+                    tempStr = params.substring(start, paramsNameNumber)
                   } else {
                     // 姣忎竴娆℃嫾鎺ュ瓧绗︿覆骞舵崲琛�
-                    tempStr = params.substring(start, end) + '\n';
+                    tempStr = params.substring(start, end) + "\n"
                   }
-                  newParamsName += tempStr; // 鏈�缁堟嫾鎴愮殑瀛楃涓�
+                  newParamsName += tempStr // 鏈�缁堟嫾鎴愮殑瀛楃涓�
                 }
               } else {
                 // 灏嗘棫鏍囩鐨勫�艰祴缁欐柊鏍囩
-                newParamsName = params;
+                newParamsName = params
               }
               //灏嗘渶缁堢殑瀛楃涓茶繑鍥�
-              return newParamsName;
+              return newParamsName
             },
           },
         },
@@ -264,7 +278,7 @@
           },
 
           splitLine: {
-            show: false
+            show: false,
           },
           axisTick: {
             show: false,
@@ -273,70 +287,69 @@
           axisLabel: {
             show: true,
             textStyle: {
-              color: '#fff',
+              color: "#fff",
             },
           },
         },
         dataZoom: [
           {
-            type: 'inside',
+            type: "inside",
           },
         ],
         series: [
           {
-            type: 'bar',
-            barWidth: '40%',
+            type: "bar",
+            barWidth: "40%",
             showBackground: true,
             itemStyle: {
               color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: '#83bff6' },
-                { offset: 0.5, color: '#188df0' },
-                { offset: 1, color: '#188df0' },
+                { offset: 0, color: "#83bff6" },
+                { offset: 0.5, color: "#188df0" },
+                { offset: 1, color: "#188df0" },
               ]),
             },
             emphasis: {
               itemStyle: {
                 color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: '#2378f7' },
-                  { offset: 0.7, color: '#2378f7' },
-                  { offset: 1, color: '#83bff6' },
+                  { offset: 0, color: "#2378f7" },
+                  { offset: 0.7, color: "#2378f7" },
+                  { offset: 1, color: "#83bff6" },
                 ]),
               },
             },
             data: data,
           },
         ],
-      };
-      const zoomSize = 6;
-      let myChart2 = this.$echarts.init(document.getElementById('leftCurrent2'));
-      myChart2.on('click', function (params) {
+      }
+      const zoomSize = 6
+      let myChart2 = this.$echarts.init(document.getElementById("leftCurrent2"))
+      myChart2.on("click", function (params) {
         myChart2.dispatchAction({
-          type: 'dataZoom',
+          type: "dataZoom",
           startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
           endValue:
             dataAxis[
-            Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
+              Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
             ],
-        });
-      });
+        })
+      })
 
-      myChart2.setOption(option2);
-      window.addEventListener('resize', function () {
-        myChart2.resize();
-      });
-
+      myChart2.setOption(option2)
+      window.addEventListener("resize", function () {
+        myChart2.resize()
+      })
 
       //宸︿笁鍥�
-      var legendData = ['浜哄憳', '鍙樻洿鍚庝汉鍛�']; //鍥句緥
+      var legendData = ["浜哄憳", "鍙樻洿鍚庝汉鍛�"] //鍥句緥
 
       var indicator = [
-        { name: '涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�', max: 80 },
-        { name: '鍞愬北LNG', max: 80 },
-        { name: '涓縿涓滅嚎绠¢亾宸ョ▼鍗楁', max: 160 },
-        { name: '涓縿涓滅嚎绠¢亾宸ョ▼涓', max: 100 },
-        { name: '鏂扮枂杩炴湪娌佺珯鍦�', max: 40 },
-        { name: '骞垮窞绔�', max: 40 },
-      ];
+        { name: "涓紖澶╃劧姘旂閬撻闄╂帓鏌ヨ埅绌烘憚褰辨祴閲�", max: 80 },
+        { name: "鍞愬北LNG", max: 80 },
+        { name: "涓縿涓滅嚎绠¢亾宸ョ▼鍗楁", max: 160 },
+        { name: "涓縿涓滅嚎绠¢亾宸ョ▼涓", max: 100 },
+        { name: "鏂扮枂杩炴湪娌佺珯鍦�", max: 40 },
+        { name: "骞垮窞绔�", max: 40 },
+      ]
       var dataArr = [
         {
           value: [35, 30, 80, 70, 15, 15],
@@ -344,11 +357,11 @@
           itemStyle: {
             normal: {
               lineStyle: {
-                color: '#4A99FF',
+                color: "#4A99FF",
                 // shadowColor: '#4A99FF',
                 // shadowBlur: 10,
               },
-              shadowColor: '#4A99FF',
+              shadowColor: "#4A99FF",
               shadowBlur: 10,
             },
           },
@@ -356,7 +369,7 @@
             normal: {
               // 鍗曢」鍖哄煙濉厖鏍峰紡
               color: {
-                type: 'linear',
+                type: "linear",
                 x: 0, //鍙�
                 y: 0, //涓�
                 x2: 1, //宸�
@@ -364,15 +377,15 @@
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#4A99FF',
+                    color: "#4A99FF",
                   },
                   {
                     offset: 0.5,
-                    color: 'rgba(0,0,0,0)',
+                    color: "rgba(0,0,0,0)",
                   },
                   {
                     offset: 1,
-                    color: '#4A99FF',
+                    color: "#4A99FF",
                   },
                 ],
                 globalCoord: false,
@@ -384,7 +397,7 @@
           label: {
             show: true,
             formatter: function (params) {
-              return params.value;
+              return params.value
             },
           },
         },
@@ -394,11 +407,11 @@
           itemStyle: {
             normal: {
               lineStyle: {
-                color: '#4BFFFC',
+                color: "#4BFFFC",
                 // shadowColor: '#4BFFFC',
                 // shadowBlur: 10,
               },
-              shadowColor: '#4BFFFC',
+              shadowColor: "#4BFFFC",
               shadowBlur: 10,
             },
           },
@@ -406,7 +419,7 @@
             normal: {
               // 鍗曢」鍖哄煙濉厖鏍峰紡
               color: {
-                type: 'linear',
+                type: "linear",
                 x: 0, //鍙�
                 y: 0, //涓�
                 x2: 1, //宸�
@@ -414,15 +427,15 @@
                 colorStops: [
                   {
                     offset: 0,
-                    color: '#4BFFFC',
+                    color: "#4BFFFC",
                   },
                   {
                     offset: 0.5,
-                    color: 'rgba(0,0,0,0)',
+                    color: "rgba(0,0,0,0)",
                   },
                   {
                     offset: 1,
-                    color: '#4BFFFC',
+                    color: "#4BFFFC",
                   },
                 ],
                 globalCoord: false,
@@ -434,19 +447,19 @@
           label: {
             show: true,
             formatter: function (params) {
-              return params.value;
+              return params.value
             },
           },
         },
-      ];
-      var colorArr = ['#4A99FF', '#4BFFFC']; //棰滆壊
+      ]
+      var colorArr = ["#4A99FF", "#4BFFFC"] //棰滆壊
       let option3 = {
         title: {
-          text: '浜哄憳鍙樺姩',
+          text: "浜哄憳鍙樺姩",
           padding: [10, 30],
           textStyle: {
-            color: '#fff',
-            fontSize: 15
+            color: "#fff",
+            fontSize: 15,
           },
         },
         color: colorArr,
@@ -454,7 +467,7 @@
           // shape: 'circle',
           name: {
             textStyle: {
-              color: '#fff',
+              color: "#fff",
               fontSize: 12,
             },
           },
@@ -469,49 +482,42 @@
             show: true,
             areaStyle: {
               // 鍒嗛殧鍖哄煙鐨勬牱寮忚缃��
-              color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
+              color: ["rgba(255,255,255,0)", "rgba(255,255,255,0)"], // 鍒嗛殧鍖哄煙棰滆壊銆傚垎闅斿尯鍩熶細鎸夋暟缁勪腑棰滆壊鐨勯『搴忎緷娆″惊鐜缃鑹层�傞粯璁ゆ槸涓�涓繁娴呯殑闂撮殧鑹层��
             },
           },
           axisLine: {
             //鎸囧悜澶栧湀鏂囨湰鐨勫垎闅旂嚎鏍峰紡
             lineStyle: {
-              color: '#153269',
+              color: "#153269",
             },
           },
           splitLine: {
             lineStyle: {
-              color: '#113865', // 鍒嗛殧绾块鑹�
+              color: "#113865", // 鍒嗛殧绾块鑹�
               width: 1, // 鍒嗛殧绾跨嚎瀹�
             },
           },
         },
         series: [
           {
-            type: 'radar',
+            type: "radar",
             symbolSize: 4,
             // symbol: 'angle',
             data: dataArr,
           },
         ],
-      };
+      }
 
-      let myChart3 = this.$echarts.init(document.getElementById('leftCurrent3'));
-      myChart3.setOption(option3);
-      window.addEventListener('resize', function () {
-        myChart3.resize();
-      });
-
+      let myChart3 = this.$echarts.init(document.getElementById("leftCurrent3"))
+      myChart3.setOption(option3)
+      window.addEventListener("resize", function () {
+        myChart3.resize()
+      })
     },
-
-
-
-
-
-
   },
 }
 </script>
-<style lang="scss">
+<style lang="less">
 .current {
   height: 100%;
   width: 100%;
@@ -536,7 +542,7 @@
 
   .leftContainer {
     height: 100%;
-    width: calc(100% - 36px);
+    width: calc(100% - 7px);
 
     display: flex;
     flex-direction: column;
@@ -549,6 +555,14 @@
       background: url(../../assets/img/Screen/chartbg.png);
       background-size: 100% 100%;
       background-repeat: no-repeat;
+      overflow: hidden;
+    }
+    .content {
+      width: 100%;
+      background: url(../../assets/img/Screen/contentBg.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      
     }
   }
 }
diff --git a/src/components/Screen/mapsdk.vue b/src/components/Screen/mapsdk.vue
index 553eb8b..c3c0699 100644
--- a/src/components/Screen/mapsdk.vue
+++ b/src/components/Screen/mapsdk.vue
@@ -127,7 +127,7 @@
 }
 </script>
 
-<style scoped lang="scss">
+<style scoped lang="less">
 .ParentCentermapdiv {
   display: fixed;
   height: 100%;
diff --git a/src/components/Screen/right.vue b/src/components/Screen/right.vue
index f99994d..090c5f5 100644
--- a/src/components/Screen/right.vue
+++ b/src/components/Screen/right.vue
@@ -2,17 +2,22 @@
   <div class="current">
     <div class="rightContainer" v-show="ChartDisplay">
       <div class="current1">
-        <div class="aside-title">鐩綍鍒嗗竷</div>
-        <echart11></echart11>
+        <div class="aside-title">宸ョ▼绉嶇被</div>
+        <project-category></project-category>
       </div>
-      <div class="current1">
+      <!-- <div class="current1">
         <div class="aside-title">鏁版嵁鍙婃湇鍔℃彁浜�</div>
         <echart12></echart12>
-      </div>
-      <div class="current1">
-        <div class="aside-title">鍚勭被鏁版嵁瀛樺偍鍒嗗竷</div>
-        <!-- <echart13></echart13> -->
-        <chart></chart>
+      </div> -->
+      <div class="" >
+        <div class="aside-title">鏂囦欢鏍煎紡</div>
+        <div class="content" style="height: 542px">
+          <div class="header">
+            <div>鏍煎紡</div>
+            <div>鏁伴噺</div>
+          </div>
+          <file-format></file-format>
+        </div>
       </div>
     </div>
     <div class="rightarrow">
@@ -24,14 +29,16 @@
 import echart11 from "@/components/echart11.vue"
 import echart12 from "@/components/echart12.vue"
 import echart13 from "@/components/echart13.vue"
-import chart from "@/components/chart/index.vue"
+import FileFormat from "@/components/chart/FileFormat.vue"
+import ProjectCategory from "../chart/ProjectCategory.vue"
 
 export default {
   components: {
     echart11,
     echart12,
     echart13,
-    chart
+    FileFormat,
+    ProjectCategory
   },
   data() {
     return {
@@ -52,7 +59,7 @@
   },
 }
 </script>
-<style lang="scss">
+<style lang="less">
 .current {
   height: 100%;
   width: 100%;
@@ -74,7 +81,7 @@
   }
   .rightContainer {
     height: 100%;
-    width: calc(100% - 36px);
+    width: calc(100% - 7px);
 
     display: flex;
     flex-direction: column;
@@ -89,4 +96,19 @@
     }
   }
 }
+.content {
+  width: 377px;
+  background: url(../../assets/img/Screen/contentBg.png);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  .header {
+    margin: 0px auto;
+    padding: 10px 0;
+    width: 80%;
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 13px;
+  }
+}
 </style>
diff --git a/src/components/Screen/top.vue b/src/components/Screen/top.vue
index bb6f7c9..f79dc91 100644
--- a/src/components/Screen/top.vue
+++ b/src/components/Screen/top.vue
@@ -62,7 +62,7 @@
   },
 }
 </script>
-<style lang="scss">
+<style lang="less">
 .top {
   height: 100%;
   width: 100%;
diff --git a/src/components/chart/CountDataApply.vue b/src/components/chart/CountDataApply.vue
new file mode 100644
index 0000000..ac948f4
--- /dev/null
+++ b/src/components/chart/CountDataApply.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="CountDataApply" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { countDataApply } from "@/api/screen.js"
+export default {
+  data() {
+    return {
+      option: {},
+    }
+  },
+  mounted() {
+    // const option = this.initData()
+    this.initChart()
+  },
+  methods: {
+    async initChart() {
+      const res = await countDataApply()
+      if (res.code == 200) {
+      }
+      let xAxis = []
+      let yAxis = []
+
+      res.result.forEach(item => {
+        xAxis.push(item.name)
+        yAxis.push(item.number)
+      })
+ 
+      // let data = [220, 182, 191, 234, 290, 330, 310]
+      // const sideData = data.map(item => {
+      //   return {
+      //     name: item.name,
+      //     value: item.number,
+      //   }
+      // })
+
+      let option = {
+        backgroundColor: "transparent",
+        tooltip: {
+          trigger: "axis",
+          formatter: "{b} : {c}",
+          axisPointer: {
+            // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+            type: "shadow", // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+          },
+        },
+        xAxis: {
+          data: xAxis,
+          //鍧愭爣杞�
+          axisLine: {
+            lineStyle: {
+              color: "#3eb2e8",
+            },
+          },
+          //鍧愭爣鍊兼爣娉�
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        yAxis: {
+          //鍧愭爣杞�
+          axisLine: {
+            show: false,
+          },
+          //鍧愭爣鍊兼爣娉�
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",
+            },
+          },
+          //鍒嗘牸绾�
+          splitLine: {
+            lineStyle: {
+              color: "#4784e8",
+            },
+          },
+        },
+        series: [
+          {
+            name: "a",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 12,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#0B4EC3", // 0% 澶勭殑棰滆壊
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#138CEB", // 60% 澶勭殑棰滆壊
+                    },
+                    {
+                      offset: 1,
+                      color: "#17AAFE", // 100% 澶勭殑棰滆壊
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: xAxis,
+            barGap: 0,
+          },
+          {
+            type: "bar",
+            barWidth: 8,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 澶勭殑棰滆壊
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 澶勭殑棰滆壊
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 澶勭殑棰滆壊
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: yAxis,
+          },
+          {
+            name: "b",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#1779E0",
+            },
+            symbol: "path://M 0,0 l 120,0 l -30,60 l -120,0 z",
+            symbolSize: ["30", "12"],
+            symbolOffset: ["0", "-11"],
+            //symbolRotate: -5,
+            symbolPosition: "end",
+            data: xAxis,
+            z: 3,
+          },
+        ],
+      }
+      const chart = echarts.init(this.$refs.chart)
+
+      chart.setOption(option)
+      window.addEventListener("resize", function () {
+        chart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.CountDataApply {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/chart/DataStorage.vue b/src/components/chart/DataStorage.vue
new file mode 100644
index 0000000..ce7a550
--- /dev/null
+++ b/src/components/chart/DataStorage.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="data-storage">
+    <div class="data-storage__header">
+      <div class="text">
+        <img
+          class="img"
+          src="@/assets/img/Screen/cunchu.png"
+          alt=""
+          srcset=""
+        />
+        <div class="title">鍏卞瓨鍌ㄦ枃浠舵暟閲�</div>
+      </div>
+      <div class="num">
+        <dv-digital-flop :config="config1" style="width: 70px; height: 20px" />
+        <!-- <div class="value">5</div> -->
+      </div>
+    </div>
+    <div class="data-storage__content">
+      <!-- <dv-scroll-board :config="config" style="width: 330px; height: 220px" /> -->
+      <el-scrollbar class="scrollbar">
+        <el-table
+          :data="tableData"
+          :row-style="{ background: 'rgba(135,180,248,0.10)' }"
+          :cell-style="{ background: 'rgba(135,180,248,0.10)' }"
+          :header-row-style="{
+            background: 'rgba(57,128,236,0.29)',
+            color: '#fff',
+          }"
+          :header-cell-style="{
+            background: 'rgba(57,128,236,0.29)',
+            color: '#fff',
+          }"
+        >
+          <el-table-column prop="index" label="缂栧彿" width="50">
+            <template slot-scope="scope">
+              <div
+                style="
+                  background: rgba(180, 188, 235, 0.25);
+                  text-align: center;
+                "
+              >
+                {{ scope.row.index }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="name" label="鍚嶇О">
+            <template slot-scope="scope">
+              <div>{{ scope.row.name }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="num" label="鏂囦欢鏁�" width="70">
+          </el-table-column>
+        </el-table>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import { countDataStorage } from "@/api/screen.js"
+export default {
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "鐜嬪皬铏�",
+          address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1518 寮�",
+        },
+        {
+          date: "2016-05-04",
+          name: "鐜嬪皬铏�",
+          address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1517 寮�",
+        },
+        {
+          date: "2016-05-01",
+          name: "鐜嬪皬铏�",
+          address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1519 寮�",
+        },
+        {
+          date: "2016-05-03",
+          name: "鐜嬪皬铏�",
+          address: "涓婃捣甯傛櫘闄�鍖洪噾娌欐睙璺� 1516 寮�",
+        },
+      ],
+      config: {
+        header: ["缂栧彿", "鍚嶇О", "鏂囦欢鏁�"],
+        data: [
+          ["琛�1鍒�1", "琛�1鍒�2", "琛�1鍒�3"],
+          ["琛�2鍒�1", "琛�2鍒�2", "琛�2鍒�3"],
+          ["琛�3鍒�1", "琛�3鍒�2", "琛�3鍒�3"],
+          ["琛�4鍒�1", "琛�4鍒�2", "琛�4鍒�3"],
+          ["琛�5鍒�1", "琛�5鍒�2", "琛�5鍒�3"],
+          ["琛�6鍒�1", "琛�6鍒�2", "琛�6鍒�3"],
+          ["琛�7鍒�1", "琛�7鍒�2", "琛�7鍒�3"],
+          ["琛�8鍒�1", "琛�8鍒�2", "琛�8鍒�3"],
+          ["琛�9鍒�1", "琛�9鍒�2", "琛�9鍒�3"],
+          ["琛�10鍒�1", "琛�10鍒�2", "琛�10鍒�3"],
+        ],
+        columnWidth: [40, 300, 50],
+        align: ["center"],
+        carousel: "page",
+      },
+      config1: {
+        number: [0],
+        content: "{nt}涓�",
+        style: {
+          fontSize: 12,
+          fill: "#00baff",
+        },
+      },
+    }
+  },
+  created() {
+    this.initTable()
+  },
+  methods: {
+    async initTable() {
+      const res = await countDataStorage()
+      if (res.code == 200) {
+        let count = 0
+        this.tableData = res.result.map((item, i) => {
+          count += item.鏂囦欢鏁�
+          return {
+            index: i + 1,
+            name: item.鍚嶇О,
+            num: item.鏂囦欢鏁�,
+          }
+        })
+        console.log(count)
+        this.config1.number = [count]
+        this.config1 = {
+          ...this.config1,
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.data-storage {
+  margin: 10px;
+  width: 377px;
+  &__header {
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 20px;
+    width: 340px;
+    box-sizing: border-box;
+    .text {
+      display: flex;
+      align-items: center;
+    }
+    .title {
+      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
+      color: #ffffff;
+    }
+    .img {
+      margin-right: 4px;
+
+      width: 16px;
+      height: 16px;
+    }
+    .value {
+      text-align: center;
+      color: #ffffff;
+      width: 16px;
+      height: 20px;
+      background: url("~@/assets/img/Screen/numBg.png");
+      background-size: 100% 100%;
+    }
+  }
+  &__content {
+    width: 95%;
+    height: 220px;
+  }
+}
+</style>
+
+<style lang="scss">
+.index-wrap {
+  margin: 0 auto;
+  width: 14px;
+  height: 14px;
+  background: rgba(180, 188, 235, 0.25);
+}
+.scrollbar {
+  width: 100%;
+  overflow-x: hidden;
+  height: 200px;
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+  .el-table {
+    height: 100%;
+    width: 100%;
+    background-color: transparent;
+    color: #fff;
+  }
+  .el-table th.el-table__cell.is-leaf,
+  .el-table td.el-table__cell {
+    border: none;
+  }
+  .el-table--group::after,
+  .el-table--border::after,
+  .el-table::before {
+    border: none;
+  }
+  .el-table::before {
+    height: 0;
+  }
+}
+</style>
diff --git a/src/components/chart/FileFormat.vue b/src/components/chart/FileFormat.vue
new file mode 100644
index 0000000..306fafe
--- /dev/null
+++ b/src/components/chart/FileFormat.vue
@@ -0,0 +1,252 @@
+<template>
+  <div class="file-format" ref="chart"></div>
+</template>
+
+<script>
+import * as echarts from "echarts"
+import { countFileFormat } from "@/api/screen.js"
+export default {
+  data() {
+    return {
+      option: {},
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    async initChart() {
+      let data = [
+        {
+          name: "user1",
+          value: 10,
+        },
+        {
+          name: "user2",
+          value: 20,
+        },
+        {
+          name: "user3",
+          value: 23,
+        },
+        {
+          name: "user4",
+          value: 44,
+        },
+        {
+          name: "user1",
+          value: 10,
+        },
+        {
+          name: "user2",
+          value: 20,
+        },
+        {
+          name: "user3",
+          value: 53,
+        },
+        {
+          name: "user4",
+          value: 24,
+        },
+        {
+          name: "user1",
+          value: 10,
+        },
+        {
+          name: "user2",
+          value: 20,
+        },
+      ]
+      const res = await countFileFormat()
+      if (res.code == 200) {
+        data = res.result.map(item => {
+          return {
+            name: item.type,
+            value: item.count,
+          }
+        })
+      }
+      data.sort((a, b) => b.value - a.value)
+      data = data.slice(0, 10)
+      let getArrByKey = (data, k) => {
+        let key = k || "value"
+        let res = []
+        if (data) {
+          data.forEach(function (t) {
+            res.push(t[key])
+          })
+        }
+        return res
+      }
+      let getSymbolData = data => {
+        let arr = []
+        for (var i = 0; i < data.length; i++) {
+          arr.push({
+            value: data[i].value,
+            symbolPosition: "end",
+          })
+        }
+        return arr
+      }
+      let opt = {
+        index: 0,
+      }
+      let color = ["#A71A2B"]
+      data = data.sort((a, b) => {
+        return b.value - a.value
+      })
+      let option = {
+        backgroundColor: "transparent",
+        grid: {
+          top: "2%",
+          bottom: "2%",
+          right: "5%",
+          left: "10%",
+          containLabel: true,
+        },
+        xAxis: {
+          show: false,
+        },
+        yAxis: [
+          {
+            triggerEvent: true,
+            show: true,
+            inverse: true,
+            data: getArrByKey(data, "name"),
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+              interval: 0,
+              color: "#fff",
+              align: "left",
+              margin: 0,
+              fontSize: 13,
+              formatter: function (value, index) {
+                return "{title|" + value + "}"
+              },
+              rich: {
+                title: {
+                  width: 165,
+                },
+              },
+            },
+          },
+          {
+            triggerEvent: true,
+            show: true,
+            inverse: true,
+            data: getArrByKey(data, "name"),
+            axisLine: {
+              show: false,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              interval: 0,
+              shadowOffsetX: "-20px",
+              color: "#fff",
+              align: "right",
+              verticalAlign: "bottom",
+              lineHeight: 20,
+              fontSize: 13,
+              formatter: function (value, index) {
+                return data[index].value
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "XXX",
+            type: "pictorialBar",
+            symbol:
+              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
+            symbolSize: [35, 35],
+            symbolOffset: [20, 0],
+            z: 5,
+            data: getSymbolData(data),
+          },
+          {
+            name: "鏉�",
+            type: "bar",
+            showBackground: true,
+            barBorderRadius: 10,
+            yAxisIndex: 0,
+            data: data,
+            barWidth: 8,
+            // align: left,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  1,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#5A9DFF",
+                    },
+                    {
+                      offset: 0.7,
+                      color: "#1878FF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#164182",
+                    },
+                  ],
+                  false
+                ),
+                barBorderRadius: 5,
+              },
+              // color: '#A71A2B',
+              barBorderRadius: 2,
+            },
+            label: {
+              normal: {
+                color: "#fff",
+                show: true,
+                position: ["0px", "-25px"],
+                textStyle: {
+                  fontSize: 14,
+                },
+                formatter: function (a, b) {
+                  return a.name
+                },
+              },
+            },
+          },
+        ],
+      }
+
+      const chart = echarts.init(this.$refs.chart)
+
+      chart.setOption(option)
+      window.addEventListener("resize", function () {
+        chart.resize()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.file-format {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/components/chart/ProjectCategory.vue b/src/components/chart/ProjectCategory.vue
new file mode 100644
index 0000000..242cec7
--- /dev/null
+++ b/src/components/chart/ProjectCategory.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="project-category">
+    <div class="content">
+
+        <div
+          :class="i % 2 ? 'rank2' : 'rank1'"
+          v-for="(item, i) in datalist.slice(0, 8)"
+          :key="item.projtype"
+        >
+          <div class="num">{{ item.count }}涓�</div>
+          <div class="name">{{ item.projtype }}</div>
+          <div class="bar">
+            <img src="~@/assets/img/Screen/leftBar.png" alt="" />
+          </div>
+        </div>
+
+
+      <!-- <div class="rank rank2">
+        <div class="num">2涓�</div>
+        <div class="name">鍌ㄦ皵搴撳伐绋�</div>
+        <div class="bar">
+          <img src="~@/assets/img/Screen/leftBar.png" alt="">
+        </div>
+      </div>
+      <div class="rank rank3">
+        <div class="num">2涓�</div>
+        <div class="name">鍌ㄦ皵搴撳伐绋�</div>
+        <div class="bar">
+          <img src="~@/assets/img/Screen/leftBar.png" alt="">
+        </div>
+      </div>
+      <div class="rank rank4">
+        <div class="num">2涓�</div>
+        <div class="name">鍌ㄦ皵搴撳伐绋�</div>
+        <div class="bar">
+          <img src="~@/assets/img/Screen/leftBar.png" alt="">
+        </div>
+      </div>
+      <div class="rank rank1">
+        <div class="num">2涓�</div>
+        <div class="name">鍌ㄦ皵搴撳伐绋�</div>
+        <div class="bar">
+          <img src="~@/assets/img/Screen/leftBar.png" alt="">
+        </div>
+      </div>
+      <div class="rank rank2">
+        <div class="num">2涓�</div>
+        <div class="name">鍌ㄦ皵搴撳伐绋�</div>
+        <div class="bar">
+          <img src="~@/assets/img/Screen/leftBar.png" alt="">
+        </div>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { countProjectCategory } from "@/api/screen.js"
+export default {
+  data() {
+    return {
+      datalist: [],
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      const res = await countProjectCategory()
+      if (res.code == 200) {
+        this.datalist = res.result
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.project-category {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/img/Screen/projectBg.png") center center;
+  background-size: 330px 227px;
+  .content {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0 auto;
+    height: 90%;
+    justify-content: space-between;
+    .rank1, .rank2 {
+      // box-sizing: border-box;
+      // display: flex;
+      // flex-direction: column;
+      // width: 160px;
+      // flex: 1;
+      height: 25px;
+      // align-items: end;
+
+      .num {
+        color: #839ecb;
+      }
+      .name {
+        // margin: 6px;
+        color: #fff;
+      }
+      .bar {
+        width: 61px;
+        height: 3px;
+        // background: url("~@/assets/img/Screen/leftBar.png");
+        // background-size: 100% 100%;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+    .rank1 {
+      width: 35%;
+      display: flex;
+      flex-direction: column;
+      align-items: end;
+      text-align: right;
+    }
+    .rank2 {
+      width: 35%;
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      text-align: left;
+    }
+  }
+}
+</style>
diff --git a/src/components/chart/index.vue b/src/components/chart/ServiceType.vue
similarity index 80%
rename from src/components/chart/index.vue
rename to src/components/chart/ServiceType.vue
index c0d1e5d..d84e8be 100644
--- a/src/components/chart/index.vue
+++ b/src/components/chart/ServiceType.vue
@@ -4,7 +4,7 @@
 
 <script>
 import * as echarts from "echarts"
-
+import { countDataVisit } from "@/api/screen.js"
 export default {
   data() {
     return {}
@@ -13,15 +13,8 @@
     this.initChart()
   },
   methods: {
-    initChart() {
-      const chart = echarts.init(this.$refs.chart)
-
-      chart.setOption(option)
-      window.addEventListener("resize", function () {
-        chart.resize()
-      })
-    },
-    initData() {
+    async initChart() {
+      const res = await countDataVisit()
       let dataPie = [
         {
           value: 410,
@@ -56,15 +49,26 @@
           name: "涓汉5",
         },
       ]
+      let count = 0
+      if (res.code == 200) {
+        dataPie = res.result.map(item => {
+          count += item.count
+          return {
+            value: item.count,
+            name: item.modular1,
+          }
+        })
+      }
+
       let colorPie = ["#5f6d86", "#0b2036", "#002e49"]
       let colorWrap = [
+        "#006CFF",
         "#3087d6",
         "#afe1ff",
         "#4be1ff",
-        "#006CFF",
         "#5C7AAE",
         "#15D0FF",
-        "#00BAFF",
+        "#7f44bb",
         "#9BD3FF",
       ]
       let baseDataPie = [],
@@ -87,7 +91,7 @@
             itemStyle: {
               normal: {
                 color: colorWrap[i],
-                borderWidth: 5,
+                borderWidth: 4,
                 borderColor: colorWrap[i],
                 shadowBlur: 5,
                 shadowColor: "rgba(48, 135, 214, 0.3)",
@@ -109,35 +113,36 @@
       }
 
       let option = {
-        backgroundColor: "#021228",
+        backgroundColor: "transparent",
         title: {
           text: "鏈嶅姟绫诲瀷鎬绘暟閲�",
-          subtext: "10,225",
+          subtext: count,
           textStyle: {
-            color: "#00b5f3",
+            color: "#fff",
             fontSize: 12,
           },
           subtextStyle: {
             align: "center",
-            fontSize: 18,
-            color: ["#85c7e3"],
-            fontWeight: 800,
+            fontSize: 20,
+            color: ["#fff"],
+            fontWeight: 400,
+            fontFamily: "YouSheBiaoTiHei",
           },
           x: "20%",
           y: "40%",
         },
-        tooltip: {
-          show: true,
-          // trigger: "item",
-          // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%",
-        },
+        // tooltip: {
+        //   show: true,
+        //   // trigger: "item",
+        //   // formatter: "{a}锛歿b} <br/>鍗犳瘮锛歿d}%",
+        // },
         legend: {
-          data: ["浼佷笟", "鏀垮簻", "涓汉"],
+          data: dataPie,
           icon: "vertical",
           right: "1%",
-          top: "center",
+          top: "10%",
           orient: "vertical",
-          itemGap: 20,
+          itemGap: 7,
           itemWidth: 12,
           itemHeight: 3,
 
@@ -148,11 +153,11 @@
                 target = dataPie[i].value
               }
             }
-            let arr = [name, target]
-            return arr.join("\n")
+            let arr = `${name} |${target}`
+            return arr
           },
           textStyle: {
-            lineHeight: 20,
+            lineHeight: 15,
             color: "#9ed2f5",
           },
         },
@@ -181,7 +186,7 @@
             data: baseDataWrap,
           },
           {
-            name: "鎶ヨ",
+            name: "鏈嶅姟绫诲瀷",
             type: "pie",
             color: "#5F6D86",
             selectedMode: "single",
@@ -198,6 +203,12 @@
           },
         ],
       }
+      const chart = echarts.init(this.$refs.chart)
+
+      chart.setOption(option)
+      window.addEventListener("resize", function () {
+        chart.resize()
+      })
     },
   },
 }
diff --git a/src/main.js b/src/main.js
index a6fa7a2..2d26db7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,6 +17,10 @@
 import '@/assets/css/config.css'
 import 'animate.css';
 import VueParticles from 'vue-particles'
+import dataV from '@jiaminghi/data-view'
+
+Vue.use(dataV)
+
 Vue.use(VueParticles)
 Vue.prototype.$echarts = echarts;
 import * as echarts from 'echarts';
@@ -27,6 +31,8 @@
 Vue.prototype.$wkt = WKT;
 Vue.config.productionTip = false;
 
+
+
 new Vue({
   router,
   i18n,
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 8806e59..d3b7ca7 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -104,14 +104,22 @@
 <style lang="less">
 .themaic {
   .aside-title {
+    box-sizing: border-box;
     padding-left: 30px;
-    height: 27px;
-    line-height: 27px;
-    background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
+    // height: 27px;
+    // line-height: 27px;
+    // background: linear-gradient(0deg, #9cd2ff 0%, #ffffff 100%);
     font-size: 15px;
     font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
-    -webkit-background-clip: text;
+    // -webkit-background-clip: text;
     color: #fff;
+    width: 100%;
+
+    height: 30px;
+    line-height: 30px;
+    background: url(~@/assets/img/Screen/asideTitleBg.png);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
   }
 }
 </style>

--
Gitblit v1.9.3