some modify

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.18.0",
     "vue": "^2.5.17"
   },
   "devDependencies": {

src/App.vue

@@ -5,7 +5,8 @@
 </template>
 
 <script>
-import currentDataV from './views/electronicFile/index'
+// import currentDataV from './views/electronicFile/index'
+import currentDataV from './views/manageDesk/index'
 
 export default {
   name: 'app',

src/components/index.js

@@ -2,9 +2,11 @@ import borderBox1 from './borderBox1/index'
 import borderBox2 from './borderBox2/index'
 import borderBox3 from './borderBox3/index'
 import borderBox4 from './borderBox4/index'
+import borderBox5 from './borderBox5/index'
 
 import decoration1 from './decoration1/index'
 import decoration2 from './decoration2/index'
+import decoration3 from './decoration3/index'
 
 import numberShow from './numberShow/index.vue'
 
@@ -18,8 +20,10 @@ export default function (Vue) {
   Vue.component('borderBox2', borderBox2)
   Vue.component('borderBox3', borderBox3)
   Vue.component('borderBox4', borderBox4)
+  Vue.component('borderBox5', borderBox5)
   Vue.component('decoration1', decoration1)
   Vue.component('decoration2', decoration2)
+  Vue.component('decoration3', decoration3)
   Vue.component('numberShow', numberShow)
   Vue.component('capsuleChart', capsuleChart)
   Vue.component('ringChart', ringChart)

src/views/electronicFile/index.vue

@@ -473,7 +473,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@import url('../../assets/style/index.less');
+@import url('../../assets/style/electroniceFile.less');
 
 #electronic-file {
   width: 100%;

src/views/manageDesk/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div id="manage-desk">
+    <div class="header">
+      <div class="left">{{ technicalSupport }}</div>
+      <div class="middle">{{ topMiddleTitle }}</div>
+      <border-box-2 class="right">
+        设备档案馆
+      </border-box-2>
+    </div>
+
+    <border-box-1 class="content">
+      <div class="top">
+        <div class="top-left">
+          <div class="top-left-title-1">
+            当月维修任务量
+            <decoration-3 />
+          </div>
+
+          <div class="top-left-title-2">
+            <decoration-3 />
+            运维人均工作量
+          </div>
+
+          <border-box-5 class="top-left-box-1">
+            <div class="tlb-text">
+              <div>22.0</div>
+              <div class="small-text">66</div>
+              <div class="small-text">0</div>
+            </div>
+          </border-box-5>
+
+          <border-box-5 class="top-left-box-2" :reverse="true">
+            <div class="tlb-text">
+              <div>0.1</div>
+              <div class="small-text">66</div>
+              <div class="small-text">0</div>
+            </div>
+          </border-box-5>
+        </div>
+      </div>
+
+      <div class="bottom">
+        <div class="bottom-left"></div>
+      </div>
+    </border-box-1>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ManageDesk',
+  data () {
+    return {
+      technicalSupport: '技术支持：河南东方世纪交通科技股份有限公司',
+      topMiddleTitle: '漯周界-机电运维管理台'
+    }
+  }
+}
+</script>
+
+<style lang="less">
+@import url('../../assets/style/manageDesk.less');
+
+#manage-desk {
+  width: 100%;
+  height: 100%;
+
+  .header {
+    position: relative;
+    height: 80px;
+
+    .left, .middle, .right {
+      position: absolute;
+    }
+
+    .left {
+      left: 35px;
+      bottom: 0px;
+      font-size: @MDHLFS;
+      color: @MDHLTC;
+    }
+
+    .middle {
+      font-size: @MDHMFS;
+      font-weight: bold;
+      left: 50%;
+      bottom: 0px;
+      transform: translateX(-50%);
+    }
+
+    .right {
+      width: 140px;
+      font-size: @MDHRFS;
+      right: 130px;
+      bottom: -20px;
+      text-align: center;
+    }
+  }
+
+  .content {
+    height: calc(~"100% - 80px");
+    display: flex;
+    flex-direction: column;
+  }
+
+  .top {
+    box-shadow: 0 0 3px red;
+    width: 100%;
+    height: 35%;
+    margin-top: 20px;
+    margin-bottom: 60px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .bottom {
+    flex: 1;
+    box-shadow: 0 0 3px green;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .top-left, .bottom-left {
+    width: 32%;
+    height: 100%;
+  }
+
+  .top-left {
+    position: relative;
+
+    .top-left-title-1, .top-left-title-2 {
+      position: absolute;
+      font-size: 20px;
+      width: 170px;
+    }
+
+    .top-left-title-1 {
+      left: 51%;
+      text-align: right;
+      top: 20px;
+    }
+
+    .top-left-title-2 {
+      right: 51%;
+      text-align: left;
+      bottom: 20px;
+    }
+
+    .border-box-5 {
+      position: absolute;
+      width: 48%;
+      height: 60%;
+    }
+
+    .tlb-text {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+
+      :nth-child(1) {
+        color: #00c0ff;
+        font-size: 48px;
+        font-weight: bold;
+
+        &::after {
+          font-size: 30px;
+          font-weight: bold;
+          color: #fff;
+          margin-left: 10px;
+        }
+      }
+
+      .small-text {
+        font-size: 16px;
+        margin: 10px 0px;
+
+        &::before {
+          margin-right: 40px;
+        }
+      }
+
+      :nth-child(2) {
+
+        &::before {
+          content: '同期';
+        }
+      }
+
+      :nth-child(3) {
+
+        &::before {
+          content: '环期';
+        }
+      }
+    }
+
+    .top-left-box-1 {
+      top: 0px;
+      left: 0px;
+
+      .tlb-text {
+        left: 40px;
+      }
+
+      .tlb-text :nth-child(1)::after {
+        content: '件'
+      }
+    }
+
+    .top-left-box-2 {
+      bottom: 0px;
+      right: 0px;
+
+      .tlb-text {
+        right: 40px;
+      }
+
+      .tlb-text :nth-child(1)::after {
+        content: '件 / 日'
+      }
+    }
+  }
+}
+</style>

yarn.lock

@@ -1146,6 +1146,13 @@ aws4@^1.8.0:
   version "1.8.0"
   resolved "http://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
 
+axios@^0.18.0:
+  version "0.18.0"
+  resolved "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
+  dependencies:
+    follow-redirects "^1.3.0"
+    is-buffer "^1.1.5"
+
 babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -3001,7 +3008,7 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, follow-redirects@^1.3.0:
   version "1.5.10"
   resolved "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
   dependencies: