diff --git a/package-lock.json b/package-lock.json
index b1e1d53..3d212bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.8.3",
+        "default-passive-events": "^2.0.0",
+        "echarts": "^5.4.1",
         "vue": "^2.6.14",
         "vue-router": "^3.5.1",
         "vuex": "^3.6.2"
@@ -4522,6 +4524,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/default-passive-events": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
+      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
+    },
     "node_modules/defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/defaults/-/defaults-1.0.4.tgz",
@@ -4709,6 +4716,20 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/echarts": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "dependencies": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.1"
+      }
+    },
+    "node_modules/echarts/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -10744,6 +10765,19 @@
       "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
+    },
+    "node_modules/zrender": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "dependencies": {
+        "tslib": "2.3.0"
+      }
+    },
+    "node_modules/zrender/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
     }
   },
   "dependencies": {
@@ -12630,7 +12664,8 @@
       "version": "5.0.8",
       "resolved": "https://registry.npmmirror.com/@vue/cli-plugin-vuex/-/cli-plugin-vuex-5.0.8.tgz",
       "integrity": "sha512-HSYWPqrunRE5ZZs8kVwiY6oWcn95qf/OQabwLfprhdpFWAGtLStShjsGED2aDpSSeGAskQETrtR/5h7VqgIlBA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@vue/cli-service": {
       "version": "5.0.8",
@@ -13047,13 +13082,15 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmmirror.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmmirror.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -13112,7 +13149,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmmirror.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-colors": {
       "version": "4.1.3",
@@ -13909,7 +13947,8 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz",
       "integrity": "sha512-fBffmak0bPAnyqc/HO8C3n2sHrp9wcqQz6ES9koRF2/mLOVAx9zIQ3Y7R29sYCteTPqMCwns4WYQoCX91Xl3+w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.3",
@@ -14080,7 +14119,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmmirror.com/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -14213,6 +14253,11 @@
         }
       }
     },
+    "default-passive-events": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmmirror.com/default-passive-events/-/default-passive-events-2.0.0.tgz",
+      "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
+    },
     "defaults": {
       "version": "1.0.4",
       "resolved": "https://registry.npmmirror.com/defaults/-/defaults-1.0.4.tgz",
@@ -14369,6 +14414,22 @@
       "integrity": "sha512-wK2sCs4feiiJeFXn3zvY0p41mdU5VUgbgs1rNsc/y5ngFUijdWd+iIN8eoyuZHKB8xN6BL4PdWmzqFmxNg6V2w==",
       "dev": true
     },
+    "echarts": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.1.tgz",
+      "integrity": "sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==",
+      "requires": {
+        "tslib": "2.3.0",
+        "zrender": "5.4.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz",
@@ -15537,7 +15598,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ieee754": {
       "version": "1.2.1",
@@ -16896,25 +16958,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmmirror.com/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-loader": {
       "version": "6.2.1",
@@ -17004,7 +17070,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -17039,7 +17106,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmmirror.com/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -18559,7 +18627,8 @@
     "vuex": {
       "version": "3.6.2",
       "resolved": "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz",
-      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw=="
+      "integrity": "sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==",
+      "requires": {}
     },
     "watchpack": {
       "version": "2.4.0",
@@ -18864,7 +18933,8 @@
           "version": "8.11.0",
           "resolved": "https://registry.npmmirror.com/ws/-/ws-8.11.0.tgz",
           "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -18991,7 +19061,8 @@
       "version": "7.5.9",
       "resolved": "https://registry.npmmirror.com/ws/-/ws-7.5.9.tgz",
       "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "y18n": {
       "version": "5.0.8",
@@ -19099,6 +19170,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.1.tgz",
+      "integrity": "sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==",
+      "requires": {
+        "tslib": "2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 90d9f0a..02174a3 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "default-passive-events": "^2.0.0",
+    "echarts": "^5.4.1",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
diff --git a/public/index.html b/public/index.html
index 3e5a139..8008a7a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>公司概况平台</title>
   </head>
   <body>
     <noscript>
diff --git a/src/App.vue b/src/App.vue
index 240acf4..5d78a2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,1283 @@
 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
+    <div class="bg">
+      <nav class="bg_header">
+        <div class="bg_time">
+          <span>天气：晴/22℃</span>
+          <span>统计日期：{{ this.date }}</span>
+        </div>
+      </nav>
+      <div class="bg_content">
+        <div class="left_content">
+          <!-- 基本信息 -->
+          <section class="pie_msg">
+            <p class="p_title" style="margin-top:12px">基本信息</p>
+            <div class="pie_echart" ref="pie_echart">
+
+            </div>
+          </section>
+          <section class="bar_msg">
+            <p class="p_title">各组项目总额、产值统计</p>
+            <div class="bar_echart" ref="bar_echart">
+
+            </div>
+          </section>
+          <section class="rank_msg">
+            <p class="p_title">各组项目完成度对比图</p>
+            <div class="rank_echart" ref="rank_echart">
+
+            </div>
+          </section>
+        </div>
+        <div class="right_content">
+          <div class="top_plate">
+            <p class="plate1_title">{{ projectMsg.name }}</p>
+            <section class="demo_msg">
+              <p class="director">负责人：{{ projectMsg.people }}</p>
+              <div class="d1">
+                <span>项目总额：{{ projectMsg.total }}</span>
+                <span>投入人数：{{ projectMsg.peopleNum }}</span>
+                <span>投入人天：{{ projectMsg.peopleTime }}</span>
+                <span>项目历时：{{ projectMsg.time }}</span>
+              </div>
+              <div class="d2">
+                <span>项目差旅占比：{{ projectMsg.travel }}</span>
+                <span>工资投入占比：{{ projectMsg.wages }}</span>
+                <span>其他占比：{{ projectMsg.other }}</span>
+              </div>
+              <div class="d3">
+                <span>整体完成度：{{ projectMsg.completion }}</span>
+                <span>已完成产值：{{ projectMsg.outputValue }}</span>
+                <span>回款比例：{{ projectMsg.Collection }}</span>
+              </div>
+            </section>
+          </div>
+          <div class="bottom_plate">
+            <section class="member">
+              <p class="m_title">成员情况预览：</p>
+              <div class="member_msg">
+                <div class="member-item" v-for="(s, i) in memberPageData" :key="i">
+                  <div class="left-item">
+                    <p class="name"><span>{{ s.name }}</span></p>
+                    <img src="../src/assets/img.png" alt="">
+                  </div>
+                  <div class="right-item">
+                    <p>职务：{{ s.post }}</p>
+                    <p>人力：{{ s.manpower }}</p>
+                    <p>人力占比：{{ s.manpowerScale }}</p>
+                    <p>产值：{{ s.value }}</p>
+                    <p>产值占比：{{ s.valueScale }}</p>
+                    <p>奖金额度：{{ s.bonusAmount }}</p>
+                  </div>
+                </div>
+
+              </div>
+            </section>
+            <!-- 三个小块 left: calc(50% - 87px)-->
+            <div class="pageNum" v-if="page > 1">
+              <div class="updatePage" :style="'width:' + 87 * page + 'px;'">
+                <div v-for="(s, i) in page" @click="updateI(i)" :class="updateIndex == i ? 'active' : ''" :key="i">
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: "App",
+  data() {
+    return {
+      //项目总看板信息
+      projectMsgs: [
+        {
+          name: '鄂州花湖机场综合管廊管控平台(1/3)',
+          people: "张扬",
+          total: '150W',
+          peopleNum: '15',
+          peopleTime: '950',
+          time: '9月',
+          travel: '6%',
+          wages: '12%',
+          other: '2%',
+          completion: '96%',
+          outputValue: '160万',
+          Collection: '60%',
+          children:
+            [
+              {
+                name: '张扬',
+                post: '项目经理',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '成丹丹',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W',
+              },
+              {
+                name: '陈向学',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '卢家健',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '王志勋',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '李效邦',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '高国正',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '黄嘉宇',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '2W'
+              },
+              {
+                name: '陈国平',
+                post: '开发人员',
+                manpower: '7.8月',
+                manpowerScale: '4.5%',
+                value: '43W',
+                valueScale: '30%',
+                bonusAmount: '1.5W'
+              },
+            ]
+        },
+        {
+          name: '视频边缘端管理平台(2/3)',
+          people: "张扬",
+          total: '150W',
+          peopleNum: '15',
+          peopleTime: '850',
+          time: '7.5月',
+          travel: '6%',
+          wages: '12%',
+          other: '2%',
+          completion: '96%',
+          outputValue: '180万',
+          Collection: '60%',
+          children: [
+            {
+              name: '张扬',
+              post: '项目经理',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+            {
+              name: '成丹丹',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W',
+            },
+            {
+              name: '陈向学',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+            {
+              name: '陈向学',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+            {
+              name: '陈向学',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+          ]
+        },
+        {
+          name: '苏逸360全景仿真平台(3/3)',
+          people: "王天星",
+          total: '170W',
+          peopleNum: '15',
+          peopleTime: '850',
+          time: '8月',
+          travel: '6%',
+          wages: '12%',
+          other: '2%',
+          completion: '96%',
+          outputValue: '140万',
+          Collection: '60%',
+          children: [
+            {
+              name: '王天星',
+              post: '项目经理',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+            {
+              name: '成丹丹',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W',
+            },
+            {
+              name: '陈向学',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+            {
+              name: '黄嘉宇',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '2W'
+            },
+            {
+              name: '陈国平',
+              post: '开发人员',
+              manpower: '7.8月',
+              manpowerScale: '4.5%',
+              value: '43W',
+              valueScale: '30%',
+              bonusAmount: '1.5W'
+            },
+          ]
+        },
+      ],
+      projectMsg: {},
+      projectIndex: 0,
 
+      updateIndex: 0,
+      memberPageData: [],
+      memberData: [
+        {
+          name: '张扬',
+          post: '项目经理',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '成丹丹',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W',
+        },
+        {
+          name: '陈向学',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '卢家健',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '王志勋',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '李效邦',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '高国正',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '黄嘉宇',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '2W'
+        },
+        {
+          name: '陈国平',
+          post: '开发人员',
+          manpower: '7.8月',
+          manpowerScale: '4.5%',
+          value: '43W',
+          valueScale: '30%',
+          bonusAmount: '1.5W'
+        },
+      ],
+      page: 0,
+
+      projectPage: 0,
+      //[900, 800, 700, 1000, 600, 300, 400, 200]
+      projectData: [
+        { name: '项目一', value: 900 },
+        { name: '项目二', value: 800 },
+        { name: '项目三', value: 700 },
+        { name: '项目四', value: 1000 },
+        { name: '项目五', value: 600 },
+        { name: '项目六', value: 300 },
+        { name: '项目七', value: 400 },
+        { name: '项目八', value: 200 },
+        { name: '项目九', value: 700 },
+      ],
+      projectPageData: [],
+      projectPageIndex: 0,
+
+      // 各组项目完成对比图数据
+      itemData: [
+        { name: '项目一', value: 500 },
+        { name: '项目二', value: 400 },
+        { name: '项目三', value: 300 },
+        { name: '项目四', value: 200 },
+        { name: '项目五', value: 600 },
+        { name: '项目六', value: 777 },
+        { name: '项目七', value: 888 },
+      ],
+      itemPageData: [],
+      itemPage: 0,
+      itemPageIndex: 0,
+
+      date: '',
+
+      rect: require('../src/assets/rect.png'),
+
+      // 成员定时器
+      memberTimer: '',
+
+      // 成员情况定时器
+      situationTimer:null
+    }
+
+  },
+  created() {
+
+    //顶部项目看板信息切换 
+    this.memberTimer = setInterval(() => {
+      this.projectIndex++
+      if (this.projectIndex == this.projectMsgs.length) {
+        this.projectIndex = 0
+      }
+      this.slideHanle()
+    }, 15000);
+
+    // 获取页数信息
+    this.byPage()
+    this.byProjectDataPage()
+    this.byItemDataPage()
+    // 获取一页中的数据
+    this.getData1()
+    this.getData2()
+    this.getData3()
+    // 获取当前年月
+    this.getNowDate()
+    // 成员情况预览切换
+    this.situationTimer = setInterval(() => {
+      this.updateIndex++
+      if (this.updateIndex == this.page) {
+        this.updateIndex = 0
+      }
+    }, 4000);
+    setInterval(() => {
+      this.projectPageIndex++
+      if (this.projectPageIndex == this.projectPage) {
+        this.projectPageIndex = 0
+      }
+    }, 4000);
+
+    //各项目对比图的切换
+    setInterval(() => {
+      this.itemPageIndex++
+      if (this.itemPageIndex == this.itemPage) {
+        this.itemPageIndex = 0
+      }
+      this.getNowDate()
+    }, 15000);
+
+    // 
+    this.slideHanle()
+  },
+
+  methods: {
+    // 轮播滚动看板信息
+    slideHanle() {
+      this.projectMsg = this.projectMsgs[this.projectIndex]
+
+    },
+    // 获取成员信息的页数
+    byPage() {
+      if (this.memberData) {
+        this.page = Math.ceil(this.memberData.length / 4)
+      }
+    },
+    // 获取bar图的页数
+    byProjectDataPage() {
+      if (this.projectData) {
+        this.projectPage = Math.ceil(this.projectData.length / 7)
+      }
+    },
+    // 获取各项完成度对比图的页数
+    byItemDataPage() {
+      if (this.itemData) {
+        this.itemPage = Math.ceil(this.itemData.length / 4)
+      }
+    },
+    getData3() {
+      this.memberPageData = this.memberData.slice(0, 4)
+
+    },
+    getData2() {
+      this.itemPageData = this.itemData.slice(0, 4)
+    },
+    getData1() {
+      this.projectPageData = this.projectData.slice(0, 7)
+    },
+    updateI(i) {
+      this.updateIndex = i
+    },
+    // 获取当前时间
+    getNowDate() {
+      let newDate = new Date()
+      // console.log(newDate);
+      this.time = newDate.toLocaleTimeString('chinese', { hour12: false })
+      let year = newDate.getFullYear()
+      let month = newDate.getMonth() + 1
+      let day = newDate.getDate()
+      if (day < 10) {
+        day = '0' + day
+      }
+      this.date = year + "年" + month + "月" + day + "日"
+    },
+    // 绘制饼图
+    drawPie() {
+      let color = [
+        '#57f5ff',
+        '#006674',
+        '#008f9f',
+        '#00abbf'
+      ];
+      let seriesData = [
+        { "name": "A需求类型", "value": 30 },
+        { "name": "B需求类型", "value": 10 },
+        { "name": "C需求类型", "value": 15 },
+        { "name": "D需求类型", "value": 15 }
+      ]
+      let myChart = echarts.init(this.$refs.pie_echart)
+      let option = {
+        color: color,
+        tooltip: {},
+        title: {
+          text: [
+            '{a|1.合同签订数量4个;\n}',
+            '{a|2.合同签订额10W;\n}',
+            '{a|3.全年项目整体完成度15%;\n}',
+            '{a|4.平均项目完成度20%;\n}',
+            '{a|5.项目交付百分比25%;\n}',
+            '{a|6.总人天消耗1500;\n}',
+          ].join(''),
+          right: '11%',
+          top: '15%',
+          textStyle: {
+            rich: {
+              a: {
+                color: "#fff",
+                fontSize: 16,
+                lineHeight: 22
+              }
+            }
+          }
+        },
+
+        series: [{
+          name: '需求类型占比',
+          type: 'pie',
+          width: 200,
+          height: 200,
+          center: ['60%', '55%'],
+          radius: '80%',
+          labelLine: {
+            show: false,
+            length: 0,
+            length2: 0,
+          },
+          itemStyle: {
+            borderWidth: 5,
+            borderColor: "#57f5ff"
+
+          },
+          label: {
+            show: false,
+          },
+          data: seriesData,
+        }],
+      };
+
+      myChart.setOption(option);
+    },
+    // 绘制柱状图
+    drawBar() {
+      let myChart = echarts.getInstanceByDom(this.$refs.bar_echart)
+      if (myChart == null) {
+        myChart = echarts.init(this.$refs.bar_echart)
+      }
+      let option = {
+        tooltip: {},
+        grid: {
+          left: '4%',
+          right: '4%',
+          bottom: '2%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: this.projectPageData.map((val) => {
+              return val.name
+            }),
+            axisLine: {
+              lineStyle: {
+                color: '#353949',
+                width: 2,
+                type: "solid"
+              }
+            },
+            axisLabel: {
+              textStyle: {
+                //改变刻度字体样式
+                color: '#fff',
+                fontSize: 12,
+              },
+
+            },
+            axisTick:
+            {
+              alignWithLabel: true,
+              show: false
+            },
+          },
+        ],
+        yAxis: [
+          {
+            min: 0,
+            max: 1000,
+            intervel: 200,
+            type: 'value',
+            formatter: '{value} (元)', //  单位
+            axisLabel: {
+              textStyle: {
+                //改变刻度字体样式
+                color: '#fff',
+              },
+            },
+            axisLine: {
+              show: false, //y轴线消失
+            },
+            axisTick: {
+              show: false, //y轴坐标点消失
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#353949',
+                width: 2,
+                type: "solid"
+              }
+            }
+          },
+        ],
+        series: [
+          {
+
+            name: '公司产值',
+            type: 'bar',
+            barWidth: '13',
+            data: this.projectPageData.map((val) => {
+              return val.value
+            }),
+            itemStyle: {
+              //柱形图圆角，鼠标移上去效果
+
+
+
+              //柱形图圆角，初始化效果
+
+              color: new echarts.graphic.LinearGradient(
+                0,
+                1,
+                0,
+                0,
+                [
+                  {
+                    offset: 0,
+                    color: '#17f4f8', // 100% 处的颜色
+                  },
+                  {
+                    offset: 0.7,
+                    color: '#befcfd', // 60% 处的颜色
+                  },
+                  {
+                    offset: 1,
+
+                    color: '#f8ffff ', // 0% 处的颜色
+                  },
+                ],
+                false
+              ),
+            },
+          },
+        ],
+      }
+      myChart.setOption(option)
+    },
+    // 绘制各组项目完成对比图
+    drawRankTable() {
+      const getSymbolData = (datas) => {
+        let arr = [];
+        for (var i = 0; i < datas.length; i++) {
+          arr.push({
+            value: datas[i].value,
+            symbolPosition: "end",
+          });
+        }
+        return arr;
+      };
+      // let myChart = echarts.init(this.$refs.rank_echart)
+      let myChart = echarts.getInstanceByDom(this.$refs.rank_echart)
+      if (myChart == null) {
+        myChart = echarts.init(this.$refs.rank_echart)
+      }
+      const category = this.itemPageData; // 类别
+      var datas = [];
+      category.forEach((value) => {
+        datas.push(value.value);
+      });
+      const ydata = category.map((v) => v.name);
+      const xdata = category.map((v) => v.value);
+      // var grapArr = [];
+      // let num = this.itemPageData.length
+      // console.log(num,'num');
+      // for (let i = 0; i < num; i++) {
+      //   grapArr.push({
+      //     type: 'rect',
+      //     left: 25, // 相对父元素居中
+      //     top: 26 + (i * 50),  // 相对父元素居中
+      //     shape: {
+      //       width: 3,
+      //       height: 35
+      //     },
+      //     style: {
+      //       fill: '#464646',
+      //     }
+      //   });
+      // }
+      let option = {
+        // graphic: grapArr,
+        grid: {
+          left: '7%',
+          top: '12%', // 设置条形图的边距
+          right: '7%',
+          bottom: '15%',
+        },
+        xAxis: [{
+          min: 0,
+          max: 900,
+          intervel: 100,
+          splitLine: {
+            show: false,
+
+          },
+          axisLine: {
+            show: false,
+
+          },
+          axisLabel: {
+            show: false,
+
+          },
+          axisTick: {
+            show: false,
+          },
+        }],
+        yAxis: [
+          {
+            type: 'category',
+            inverse: true,
+            // 名字
+            data: ydata,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                verticalAlign: 'bottom',
+                color: '#fff',
+                fontSize: 14,
+                fontFamily: 'Microsoft YaHei',
+                align: 'left',
+                padding: [0, 0, 12, 10],
+              },
+              formatter: (name, index) => {
+                // const _index = index + 1;
+                if (index == 0) {
+                  return `${name}`;
+                }
+                return ` ${name}`
+              },
+            },
+            offset: 0,
+          },
+
+          {
+            type: 'category',
+            inverse: true,
+            data: xdata,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                verticalAlign: 'bottom',
+                color: '#fff',
+                fontSize: 14,
+                fontFamily: 'Microsoft YaHei',
+                align: 'right',
+                padding: [0, 0, 9, 10],
+              },
+              formatter: (value) => {
+                // const _index = index + 1;
+                return `${value}人`
+              },
+            },
+            offset: 0,
+          },
+          {
+            type: 'category',
+            inverse: true,
+            axisLabel: {
+              show: true,
+              margin: 10,
+              verticalAlign: 'bottom',
+              padding: [0, 0, -6, 0],
+              formatter: () => {
+                // const _index = index + 1;
+                return ` {img|}`
+              },
+              rich: {
+                img: {
+                  backgroundColor: {
+                    image: this.rect
+                  },
+                  width: 3,
+                  height: 36,
+
+                }
+              }
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+
+            data: ydata,
+            offset: -460,
+          },
+        ],
+        series: [
+
+          {
+            // 内
+            // xAxisIndex:0,
+            type: 'bar',
+            barWidth: 10,
+            xAxisIndex: 0,
+            itemStyle: {
+              borderRadius: 8,
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ // color在这里
+                {
+                  offset: 0.2,
+                  color: '#22839b'
+                },
+                {
+                  offset: 1,
+                  color: '#31bac7'
+                }
+              ])
+            },
+            data: category,
+            z: 2,
+          },
+          {
+            name: '外框',
+            type: 'bar',
+            barGap: '-72%',
+            data: [
+              900,
+              900,
+              900,
+              900,
+            ],
+            barWidth: 5,
+            itemStyle: {
+              color: '#464646', // 填充色
+              borderRadius: 0, //圆角半径
+            },
+            z: 0,
+          },
+          {
+            type: "pictorialBar",
+            Symbol: 'path://M2.000,-0.000 C3.104,-0.000 4.000,0.895 4.000,2.000 L4.000,9.000 C4.000,10.105 3.104,11.000 2.000,11.000 C0.895,11.000 -0.000,10.105 -0.000,9.000 L-0.000,2.000 C-0.000,0.895 0.895,-0.000 2.000,-0.000 Z',
+            symbolSize: [5, 16],
+            symbolOffset: [0, 1],
+            z: 12,
+            itemStyle: {
+              color: "#fff",
+
+            },
+            data: getSymbolData(category),
+          },
+        ],
+      };
+      myChart.setOption(option)
+    }
+  },
+  mounted() {
+    this.drawPie()
+    this.drawBar()
+    this.drawRankTable()
+  },
+  watch: {
+
+    projectIndex: {
+      handler: function () {
+        // console.log(newVal,oldVal);
+        // 关闭定时器
+        clearInterval(this.memberTimer)
+
+
+        clearInterval(this.situationTimer)
+        // 开启定时器
+        this.memberTimer = setInterval(() => {
+          this.projectIndex++
+          if (this.projectIndex == this.projectMsgs.length) {
+            this.projectIndex = 0
+          }
+          this.slideHanle()
+        }, 15000);
+
+        this.situationTimer = setInterval(()=>{
+          this.updateIndex++
+      if (this.updateIndex == this.page) {
+        this.updateIndex = 0
+      }
+        },4000)
+        this.memberData = this.projectMsg.children
+        this.byPage()
+        this.updateIndex = 0
+        if (this.memberData.length < 4) {
+          this.memberPageData = this.memberData
+        }
+        // console.log(this.memberData);
+      }
+    },
+
+    // 项目成员
+    updateIndex: {
+      handler(newVal) {
+        if (newVal < this.page - 1) {
+          this.memberPageData = this.memberData.slice(0 + newVal * 4, 4 + newVal * 4)
+        } else {
+          this.memberPageData = this.memberData.slice(newVal * 4)
+        }
+      },
+      immediate: true
+    },
+    projectPageIndex: {
+      handler(newVal) {
+        if (newVal < this.projectPage - 1) {
+          this.projectPageData = this.projectData.slice(0 + newVal * 7, 7 + newVal * 7)
+        } else {
+          this.projectPageData = this.projectData.slice(newVal * 7)
+        }
+        this.drawBar()
+      },
+
+    },
+    // 项目成员信息
+    itemPageIndex: {
+      handler(newVal) {
+        if (newVal < this.itemPage - 1) {
+          console.log(this.itemPage);
+          this.itemPageData = this.itemData.slice(0 + newVal * 4, 4 + newVal * 4)
+        } else {
+          this.itemPageData = this.itemData.slice(newVal * 4)
+        }
+        this.drawRankTable()
+      },
+
+    }
+
+  }
+}
+</script>
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+body,
+html {
+  margin: 0;
+  padding: 0;
 }
 
-nav {
-  padding: 30px;
+* {
+  margin: 0;
+  padding: 0;
 }
 
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
+.bg {
+  width: 1920px;
+  height: 1080px;
+  background: url(../src/assets/bg.png);
+  position: relative;
 }
 
-nav a.router-link-exact-active {
-  color: #42b983;
+.bg_header {
+  width: 1920px;
+  height: 606px;
+  background: url(../src/assets/header.png);
+  position: relative;
+}
+
+.bg_header .bg_time {
+  position: absolute;
+  right: 40px;
+  top: 37px;
+  color: #fff;
+}
+
+.bg_header .bg_time>span:nth-child(1) {
+  margin-right: 30px;
+}
+
+.bg_content {
+  width: 94%;
+  height: 920px;
+  /* background-color: aqua; */
+  position: absolute;
+  top: 125px;
+  left: 4%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left_content {
+  width: 501px;
+  height: 100%;
+  background: url(../src/assets/left_border.png);
+}
+
+.left_content .pie_msg {
+  width: 100%;
+  height: 300px;
+}
+
+.left_content .pie_echart {
+  width: 100%;
+  height: 240px;
+}
+
+.left_content .bar_msg {
+  width: 100%;
+  height: 308px;
+}
+
+.left_content .bar_echart {
+  width: 100%;
+  height: 248px;
+}
+
+.left_content .rank_msg {
+  width: 100%;
+  height: 310px;
+}
+
+.left_content .rank_echart {
+  height: 267px;
+  width: 100%;
+}
+
+.p_title {
+  margin: 0 0 0 17px;
+  width: 392px;
+  height: 42px;
+  line-height: 42px;
+  font-family: "Microsoft YaHei";
+  color: rgb(255, 255, 255);
+  z-index: 154;
+  font-size: 20px;
+  letter-spacing: 3px;
+  padding-left: 15px;
+  box-sizing: border-box;
+  background: url(../src/assets/title.png);
+}
+
+.right_content {
+  width: 1260px;
+  padding-top: 8px;
+  box-sizing: border-box;
+}
+
+.right_content .top_plate {
+  width: 100%;
+  height: 274px;
+  background: url(../src/assets/font_border.png);
+  padding-left: 32px;
+  padding-top: 15px;
+  box-sizing: border-box;
+}
+
+.right_content .plate1_title {
+  width: 596px;
+  height: 52px;
+  margin: 0;
+  background: url(../src/assets/font_title.png);
+  line-height: 52px;
+  font-size: 22px;
+  font-family: "Microsoft YaHei";
+  color: rgb(255, 255, 255);
+  padding-left: 15px;
+  box-sizing: border-box;
+}
+
+.right_content .demo_msg {
+  padding-left: 10px;
+  box-sizing: border-box;
+}
+
+.right_content .demo_msg .director {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 20px 0 0 0;
+  font-family: "Microsoft YaHei";
+  color: rgb(255, 255, 255);
+}
+
+.right_content .d1,
+.right_content .d2,
+.right_content .d3 {
+  margin-top: 17px;
+  font-size: 17px;
+  color: #fff;
+}
+
+.right_content .demo_msg span {
+  margin-right: 42px;
+  letter-spacing: 3px;
+}
+
+.right_content .bottom_plate {
+  width: 100%;
+  background: url(../src/assets/bottom_border.png);
+  height: 549px;
+  margin-top: 38px;
+  position: relative;
+}
+
+.bottom_plate .member {
+  padding: 18px 0 0 32px;
+  box-sizing: border-box;
+}
+
+.bottom_plate .m_title {
+  width: 441px;
+  height: 52px;
+  background: url(../src/assets/member_title.png);
+  line-height: 52px;
+  padding-left: 15px;
+  font-size: 22px;
+  font-family: "Microsoft YaHei";
+  color: rgb(255, 255, 255);
+  box-sizing: border-box;
+}
+
+.bottom_plate .member_msg {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding-left: 65px;
+  padding-right: 135px;
+  box-sizing: border-box;
+}
+
+.bottom_plate .member-item {
+  margin-top: 20px;
+  width: 375px;
+  height: 207px;
+  display: flex;
+  background: url(../src/assets/member_item.png) no-repeat;
+  padding: 10px 0 20px 18px;
+  box-sizing: border-box;
+}
+
+.bottom_plate .member-item .left-item {
+  width: 165px;
+}
+
+.bottom_plate .member-item .right-item {
+  width: calc(100% - 165px - 18px);
+  padding: 27px 0 0 0;
+  box-sizing: border-box;
+}
+
+.bottom_plate .member-item .right-item p {
+  line-height: 25px;
+  color: #fff;
+}
+
+.bottom_plate .member-item .name {
+  margin-bottom: 14px;
+  color: #fff;
+  padding-left: 5px;
+  font-size: 17px;
+  box-sizing: border-box;
+}
+
+.bottom_plate .pageNum {
+  width: 100%;
+  position: absolute;
+  left: 0;
+  height: 31px;
+  bottom: -55px;
+  display: flex;
+  justify-content: space-between;
+  justify-content: center;
+}
+
+.bottom_plate .updatePage {
+  height: 31px;
+  position: absolute;
+  display: flex;
+  justify-content: space-around;
+
+}
+
+.bottom_plate .updatePage>div {
+  width: 35px;
+  height: 30px;
+  background-color: #292d3d;
+  border: 1px #e1e2e4 solid;
+  box-sizing: border-box;
+}
+
+.active {
+  border: 2px #e1e2e4 solid !important;
 }
 </style>
diff --git a/src/assets/bg.png b/src/assets/bg.png
new file mode 100644
index 0000000..68681eb
Binary files /dev/null and b/src/assets/bg.png differ
diff --git a/src/assets/bottom_border.png b/src/assets/bottom_border.png
new file mode 100644
index 0000000..34c7061
Binary files /dev/null and b/src/assets/bottom_border.png differ
diff --git a/src/assets/font_border.png b/src/assets/font_border.png
new file mode 100644
index 0000000..3d3aedc
Binary files /dev/null and b/src/assets/font_border.png differ
diff --git a/src/assets/font_title.png b/src/assets/font_title.png
new file mode 100644
index 0000000..0ce0497
Binary files /dev/null and b/src/assets/font_title.png differ
diff --git a/src/assets/header.png b/src/assets/header.png
new file mode 100644
index 0000000..a39695a
Binary files /dev/null and b/src/assets/header.png differ
diff --git a/src/assets/img.png b/src/assets/img.png
new file mode 100644
index 0000000..4a22148
Binary files /dev/null and b/src/assets/img.png differ
diff --git a/src/assets/left_border.png b/src/assets/left_border.png
new file mode 100644
index 0000000..98fffc6
Binary files /dev/null and b/src/assets/left_border.png differ
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
Binary files a/src/assets/logo.png and /dev/null differ
diff --git a/src/assets/member_item.png b/src/assets/member_item.png
new file mode 100644
index 0000000..d41e90d
Binary files /dev/null and b/src/assets/member_item.png differ
diff --git a/src/assets/member_title.png b/src/assets/member_title.png
new file mode 100644
index 0000000..a826f5e
Binary files /dev/null and b/src/assets/member_title.png differ
diff --git a/src/assets/rect.png b/src/assets/rect.png
new file mode 100644
index 0000000..9526559
Binary files /dev/null and b/src/assets/rect.png differ
diff --git a/src/assets/rectRadius.png b/src/assets/rectRadius.png
new file mode 100644
index 0000000..c05c958
Binary files /dev/null and b/src/assets/rectRadius.png differ
diff --git a/src/assets/title.png b/src/assets/title.png
new file mode 100644
index 0000000..f388936
Binary files /dev/null and b/src/assets/title.png differ
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c544cb..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/main.js b/src/main.js
index f253456..533940c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,12 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount('#app')
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import 'default-passive-events'
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index a395a1f..9f46c9d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 
 Vue.use(VueRouter)
 
@@ -8,16 +7,9 @@ const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
+    component: () => import('../views/HomeView.vue')
   },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
+  
 ]
 
 const router = new VueRouter({
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index e8d96d7..0427a40 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,18 +1,60 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+
+
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
+
 
 export default {
   name: 'HomeView',
   components: {
-    HelloWorld
+
+  },
+  data() {
+    return {
+      zoneRelationArr: [],
+      itemsData: [],
+      itemsDataObject:{
+        
+      },
+      zoneRealation: []
+    }
+  },
+  methods: {
+//     match() {
+//       // const result = [{}, {}]
+//       // 第一次数组转对象 key为obejctid，value为item  确保每次mqtt返回的数据中 以单个物体为准 只取最后一次的数据
+//       this.itemsData.forEach(item => {
+//         if(this.itemsDataObject[item.obj_id]){
+//           this.itemsDataObject[item.obj_id] = {...item,det_id:this.itemsDataObject[item.obj_id].det_id+'-'}
+// +item
+//         }
+//       })
+      // // 第二次  对象key，value对调，以对象经过的区域id为key item为value
+      // const obj={}
+      // Object.keys(this.itemsDataObject).forEach(key=>{
+      //   obj[this.itemsDataObject[key].det_id] =this.itemsDataObject[key]
+      // })
+      // this.formatZoomRelatonData(this.zoneRelationArr)
+      // // const zoneRealationObject=
+      // this.zoneRealation.forEach(item=>{
+      //   // itemsDataObject[]
+      //   if(item.)
+      // })
+    // },
+    // formatZoomRelatonData(arr, preGraphId) {
+    //   arr.forEach(item => {
+    //     if (item.superiorData) {
+    //       const preGraphId2 = (preGraphId || '') + '-' + item.graphId
+    //       this.formatZoomRelatonData(item.superiorData, preGraphId2)
+    //     } else {
+    //       this.zoneRealation.push((preGraphId || '') + '-' + item.graphId)
+    //     }
+    //   })
+    // }
   }
 }
 </script>