From 99275eb3ea4f9a074be2e905907f00cfe77148a1 Mon Sep 17 00:00:00 2001
From: unknown <binbin0314@126.com>
Date: Tue, 15 Dec 2020 18:30:59 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E5=A4=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 rest/project.http                   |  18 +-
 src/common/index.styl               |   4 +-
 src/components/Panel/Panel.vue      |  35 +++-
 src/components/Sensor/Sensor.js     | 256 +++++++++++++++++-----------
 src/components/Sensor/Sensor.vue    |   5 +-
 src/mixins/socket.js                |  20 +--
 src/store/modules/messages/state.js |   8 +-
 7 files changed, 222 insertions(+), 124 deletions(-)

diff --git a/rest/project.http b/rest/project.http
index bae2841..e3c6bac 100644
--- a/rest/project.http
+++ b/rest/project.http
@@ -1,5 +1,6 @@
 # @tall = {{url}}/tall/v1.0
-@tall = http://www.sxwikionline.com/gateway/tall/v1.0
+@tall = http://test.tall.wiki/gateway/tall/v1.0
+@bin = https://test.tall.wiki/gateway/wisdomcar/debug/record
 @greenvalley = http://www.sxwikionline.com/gateway/greenvalley
 @type = content-type: application/json;charset=utf-8
 
@@ -54,3 +55,18 @@ Authorization: Bearer {{login.response.body.$.data.token}}
     "teamName": ""
   }
 }
+
+### 根据团队id查看研发团队相关信息
+
+POST {{bin}}
+{{type}}
+Authorization: Bearer {{login.response.body.$.data.token}}
+
+{
+  "param": {
+    "carNumber":"001",
+    "type":"1",
+    "value":"70000",
+    "time":"1607937529000",
+  }
+}
diff --git a/src/common/index.styl b/src/common/index.styl
index 5d6b91d..73ed138 100644
--- a/src/common/index.styl
+++ b/src/common/index.styl
@@ -26,8 +26,8 @@
 .wrap .bg-top .animation{
     position: absolute;
     top: -1px;
-    left: 21.5%;
-    width: 57%;
+    left: 14%;
+    width: 72%;
     height: 162px;
 }
 
diff --git a/src/components/Panel/Panel.vue b/src/components/Panel/Panel.vue
index 2490625..d59f645 100644
--- a/src/components/Panel/Panel.vue
+++ b/src/components/Panel/Panel.vue
@@ -4,21 +4,21 @@
       <div class="d-flex panel-box-1">
         <div class="flex-1">
           <span class="panel-tips">患者体重（kg）</span>
-          <span class="panel-con">60.00</span>
+          <span class="panel-con">{{ weightMessage }}</span>
         </div>
         <div class="flex-1">
           <span class="panel-tips">药物剂量（mg）</span>
-          <span class="panel-con">55.00</span>
+          <span class="panel-con">{{ thrombolyticDose }}</span>
         </div>
       </div>
       <div class="d-flex panel-box-1">
         <div class="flex-1">
           <span class="panel-tips">团注剂量（mg）</span>
-          <span class="panel-con">5.40</span>
+          <span class="panel-con">{{ bolusDose }}</span>
         </div>
         <div class="flex-1">
           <span class="panel-tips">维持剂量（mg）</span>
-          <span class="panel-con">48.60</span>
+          <span class="panel-con">{{ maintenanceDose }}</span>
         </div>
       </div>
       <div style="width: 95%; padding-left: 5%">
@@ -29,13 +29,16 @@
           </span>
         </div>
         <a-progress :percent="percent" :show-info="false" :stroke-color="strokeColor" :stroke-width="strokeWidth" status="active" />
-        <div>123</div>
+        <div class="flex-1" style="width: 106%; margin-left: -3%">
+          <div class="flex-1" style="justify-content: center" v-for="(item, index) in lists" :key="index">{{ item }}</div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
   name: 'Panel',
   data() {
@@ -49,8 +52,28 @@ export default {
         from: '#1362B8',
         to: '#06D0CA',
       },
+      lists: [
+        '呼叫',
+        '到场',
+        '评估',
+        '采血',
+        'CT',
+        '谈话',
+        '签字',
+        '注射',
+        '介入',
+        '手术',
+        '穿刺',
+        'DSA',
+        '溶栓',
+        '再通',
+        '支架',
+        '解脱',
+        '结束',
+      ],
     };
   },
+  computed: mapState('messages', ['weightMessage', 'bolusDose', 'maintenanceDose', 'thrombolyticDose']),
   mounted() {
     const that = this;
     var add = setInterval(function() {
@@ -58,7 +81,7 @@ export default {
         that.percent = 0;
         that.percentA = 0;
       } else {
-        that.percent++;
+        that.percent += 100 / 16;
         that.percentA = (that.percent * 100) / 120 + '%';
       }
     }, 1000);
diff --git a/src/components/Sensor/Sensor.js b/src/components/Sensor/Sensor.js
index 4dcfac5..d36ceec 100644
--- a/src/components/Sensor/Sensor.js
+++ b/src/components/Sensor/Sensor.js
@@ -1,107 +1,165 @@
-var option = {
-  legend: {
-    x: 'center',
-    y: 'top',
-    data: ['传感器1', '传感器2'],
-    textStyle: {
-      fontWeight: 'normal',
-      color: '#ccc', //标题颜色
-    },
-  },
-  xAxis: {
-    type: 'category',
-    boundaryGap: false,
-    axisLine: {
-      //y轴
-      show: false,
-    },
-  },
-  yAxis: {
-    show: true,
-    type: 'value',
-    splitLine: { show: false }, //去除网格线
-    nameTextStyle: {
-      color: '#abb8ce',
-      show: false,
-    },
-    axisLabel: {
-      color: '#abb8ce',
-      show: false,
-    },
-    axisTick: {
-      //y轴刻度线
-      show: false,
-    },
-    axisLine: {
-      //y轴
-      show: false,
-    },
+import { mapState } from 'vuex';
+const mixin = {
+  data() {
+    return {
+      series1: [10, 20, 30, 10, 20, 30, 10, 20, 30], // 传感器1
+      series2: [20, 30, 10, 20, 30, 10, 20, 30, 10], // 传感器1
+      series3: [30, 10, 20, 30, 10, 20, 30, 10, 20], // 传感器1
+    };
   },
-  series: [
-    {
-      name: '传感器1',
-      data: [320, 932, 401, 834, 290, 530, 620],
-      type: 'line',
-      smooth: true,
-      symbol: 'none',
-      itemStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: 'rgba(10,73,130,1)', // 0% 处的颜色
+  computed: {
+    ...mapState('messages', ['vibrationSensor']),
+    option() {
+      return {
+        legend: {
+          x: 'center',
+          y: 'top',
+          data: ['传感器1', '传感器2', '传感器3'],
+          textStyle: {
+            fontWeight: 'normal',
+            color: '#ccc', //标题颜色
+          },
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            //y轴
+            show: false,
+          },
+        },
+        yAxis: {
+          show: true,
+          type: 'value',
+          splitLine: { show: false }, //去除网格线
+          nameTextStyle: {
+            color: '#abb8ce',
+            show: false,
+          },
+          axisLabel: {
+            color: '#abb8ce',
+            show: false,
+          },
+          axisTick: {
+            //y轴刻度线
+            show: false,
+          },
+          axisLine: {
+            //y轴
+            show: false,
+          },
+        },
+        series: [
+          {
+            name: '传感器1',
+            data: this.series1,
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(10,73,130,1)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(10,73,130,0)', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
-            {
-              offset: 1,
-              color: 'rgba(10,73,130,0)', // 100% 处的颜色
+            areaStyle: {},
+            lineStyle: { normal: { color: 'rgb(39,149,243)', width: 2 } },
+          },
+          {
+            name: '传感器2',
+            data: this.series2,
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(91,225,251,1)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(91,225,251,0)', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
-          ],
-          global: false, // 缺省为 false
-        },
-      },
-      areaStyle: {},
-      lineStyle: { normal: { color: 'rgb(39,149,243)', width: 2 } },
-    },
-    {
-      name: '传感器2',
-      data: [420, 232, 401, 234, 490, 230, 420],
-      type: 'line',
-      smooth: true,
-      symbol: 'none',
-      itemStyle: {
-        color: {
-          type: 'linear',
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0,
-              color: 'rgba(91,225,251,1)', // 0% 处的颜色
+            areaStyle: {},
+            lineStyle: {
+              normal: {
+                color: 'rgb(91,225,251)',
+                width: 2,
+              },
             },
-            {
-              offset: 1,
-              color: 'rgba(91,225,251,0)', // 100% 处的颜色
+          },
+          {
+            name: '传感器3',
+            data: this.series3,
+            type: 'line',
+            smooth: true,
+            symbol: 'none',
+            itemStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(241,158,194,1)', // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(241,158,194,0)', // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
             },
-          ],
-          global: false, // 缺省为 false
-        },
-      },
-      areaStyle: {},
-      lineStyle: {
-        normal: {
-          color: 'rgb(91,225,251)',
-          width: 2,
-        },
-      },
+            areaStyle: {},
+            lineStyle: {
+              normal: {
+                color: 'rgb(241,158,194)',
+                width: 2,
+              },
+            },
+          },
+        ],
+      };
+    },
+  },
+  watch: {
+    vibrationSensor(val) {
+      var vibList = val.split(',');
+      this.series1 = this.series1.concat(parseInt(vibList[0]));
+      this.series2 = this.series1.concat(parseInt(vibList[1]));
+      this.series3 = this.series1.concat(parseInt(vibList[2]));
+      console.log('vibrationSensor:', val);
     },
-  ],
+  },
 };
 
-export default option;
+export default mixin;
diff --git a/src/components/Sensor/Sensor.vue b/src/components/Sensor/Sensor.vue
index 8d0331f..93c13a0 100644
--- a/src/components/Sensor/Sensor.vue
+++ b/src/components/Sensor/Sensor.vue
@@ -5,10 +5,11 @@
   </div>
 </template>
 <script>
-import option from './Sensor.js';
+import mixin from './Sensor.js';
 // import option from './Sensor3D.js';
 export default {
   name: 'Sensor',
+  mixins: [mixin],
   data() {
     return {
       width: '',
@@ -36,7 +37,7 @@ export default {
       // 基于准备好的dom，初始化echarts实例
       let myChart = this.$echarts.init(document.getElementById('Sensor'));
       // 绘制图表
-      myChart.setOption(option);
+      myChart.setOption(this.option);
     },
   },
 };
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 033a4d0..537c569 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -63,34 +63,34 @@ const mixin = {
         case 1: // 体重
           // 收到同步消息
           // 把消息添加到store 的消息栈中
-          this.messagesAddWeight(data);
+          this.messagesAddWeight(data.data);
           break;
         case 2: // RFID
-          this.messagesAddRfid(data);
+          this.messagesAddRfid(data.data);
           break;
         case 3: // 称重传感器一
-          this.messagesAddWeighSensor1(data);
+          this.messagesAddWeighSensor1(data.data);
           break;
         case 4: // 称重传感器二
-          this.messagesAddWeighSensor2(data);
+          this.messagesAddWeighSensor2(data.data);
           break;
         case 5: // 称重传感器三
-          this.messagesAddWeighSensor3(data);
+          this.messagesAddWeighSensor3(data.data);
           break;
         case 6: // 称重传感器四
-          this.messagesAddWeighSensor4(data);
+          this.messagesAddWeighSensor4(data.data);
           break;
         case 7: // 震动传感器
-          this.messagesAddVibrationSensor(data);
+          this.messagesAddVibrationSensor(data.data);
           break;
         case 8: // 溶栓剂量（总量）
-          this.messagesAddThrombolyticDose(data);
+          this.messagesAddThrombolyticDose(data.data);
           break;
         case 9: // 团注剂量
-          this.messagesAddBolusDose(data);
+          this.messagesAddBolusDose(data.data);
           break;
         case 10: // 维持剂量
-          this.messagesAddMaintenanceDose(data);
+          this.messagesAddMaintenanceDose(data.data);
           break;
         default:
           break;
diff --git a/src/store/modules/messages/state.js b/src/store/modules/messages/state.js
index 3a86c92..09c828e 100644
--- a/src/store/modules/messages/state.js
+++ b/src/store/modules/messages/state.js
@@ -1,15 +1,15 @@
 const state = {
   syncMessages: [], // 同步消息
-  weightMessage: null, // 体重
+  weightMessage: 0, // 体重
   rfidMessage: null, // RFID
   weighSensor1: null, // 称重传感器一
   weighSensor2: null, // 称重传感器二
   weighSensor3: null, // 称重传感器三
   weighSensor4: null, // 称重传感器四
   vibrationSensor: null, // 震动传感器
-  thrombolyticDose: null, // 溶栓剂量（总量）
-  bolusDose: null, // 团注剂量
-  maintenanceDose: null, // 维持剂量
+  thrombolyticDose: 0, // 溶栓剂量（总量）
+  bolusDose: 0, // 团注剂量
+  maintenanceDose: 0, // 维持剂量
 };
 
 export default state;

From e2bd10c14e0c5e7d951c176a0b7a5683c1f2c39b Mon Sep 17 00:00:00 2001
From: unknown <binbin0314@126.com>
Date: Wed, 16 Dec 2020 14:12:01 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E7=9B=B8=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Duration/Duration.js     | 26 +++++++-
 src/components/Map/Map.js               | 44 ++++++------
 src/components/Map/Map.vue              | 89 +------------------------
 src/components/Sensor/Sensor.js         |  6 +-
 src/components/Statistics/Statistics.js |  2 +-
 src/router/index.js                     | 12 ++--
 src/views/BtnPage/BtnPage.vue           | 49 ++++++++++++++
 7 files changed, 112 insertions(+), 116 deletions(-)
 create mode 100644 src/views/BtnPage/BtnPage.vue

diff --git a/src/components/Duration/Duration.js b/src/components/Duration/Duration.js
index e8caddf..4e9ee92 100644
--- a/src/components/Duration/Duration.js
+++ b/src/components/Duration/Duration.js
@@ -31,12 +31,33 @@ const mixin = {
         xAxis: {
           type: 'category',
           boundaryGap: false,
-          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+          data: [
+            '呼叫',
+            '到场',
+            '评估',
+            '采血',
+            'CT',
+            '谈话',
+            '签字',
+            '注射',
+            '介入',
+            '手术',
+            '穿刺',
+            'DSA',
+            '溶栓',
+            '再通',
+            '支架',
+            '解脱',
+            '结束',
+          ],
           axisLabel: {
             textStyle: {
               fontWeight: 'normal',
               color: '#ccc', //标题颜色
             },
+            formatter: function(value) {
+              return value.split('').join('\n');
+            },
           },
         },
         yAxis: {
@@ -61,6 +82,7 @@ const mixin = {
           {
             name: '我院记录',
             type: 'line',
+            connectNulls: true,
             stack: '总量',
             symbolSize: 6,
             // symbol: 'star',
@@ -75,6 +97,7 @@ const mixin = {
           {
             name: '国际水准',
             type: 'line',
+            connectNulls: true,
             stack: '总量',
             symbolSize: 6,
             data: this.pointTimeInternation,
@@ -88,6 +111,7 @@ const mixin = {
           {
             name: '当前数据',
             type: 'line',
+            connectNulls: true,
             stack: '总量',
             symbolSize: 6,
             data: this.pointTimeCurrentList,
diff --git a/src/components/Map/Map.js b/src/components/Map/Map.js
index 7ad96f3..dedfdd3 100644
--- a/src/components/Map/Map.js
+++ b/src/components/Map/Map.js
@@ -4,47 +4,53 @@ var option = {
       type: 'map3D',
       name: '山西',
       selectedMode: 'single', //地图高亮单选
-      boxDepth: 90, //地图倾斜度
-      regionHeight: 8, //地图高度
+      boxDepth: 230, //地图倾斜度
+      regionHeight: 6, //地图高度
       map: '山西',
       viewControl: {
-        distance: 150, //地图视角 控制初始大小
-        rotateSensitivity: 0, //禁止旋转
-        zoomSensitivity: 0, //禁止缩放
+        distance: 1000, //地图视角 控制初始大小
+        rotateSensitivity: 1, //禁止旋转
+        zoomSensitivity: 1, //禁止缩放
       },
       label: {
         show: true, //是否显示市
         textStyle: {
-          color: '#0a1640', //文字颜色
+          color: '#aaa', //文字颜色
           fontSize: 12, //文字大小
           backgroundColor: 'rgba(0,0,0,0)', //透明度0清空文字背景
         },
       },
       itemStyle: {
-        color: '#81d0f1', //地图颜色
-        borderWidth: 0.5, //分界线wdith
+        color: 'rgb(18,57,90)', //地图颜色
+        borderWidth: 1, //分界线wdith
         borderColor: '#459bca', //分界线颜色
       },
       emphasis: {
         label: {
           show: true, //是否显示高亮
-          textStyle: {
-            color: '#fff', //高亮文字颜色
-          },
-        },
-        itemStyle: {
-          color: '#0489d6', //地图高亮颜色
+          textStyle: { color: '#fff' }, //高亮文字颜色
         },
+        itemStyle: { color: '#A7820D' }, //地图高亮颜色
       },
-      //高亮市区  echarts  bug 不生效
-      regions: [
+      data: [
         {
           name: '运城市',
-          itemStyle: {
-            areaColor: '#f00',
-          },
+          value: 0,
+          label: { textStyle: { color: '#fff' } }, //高亮文字颜色
+          itemStyle: { color: '#A7820D' }, //地图高亮颜色
         },
       ],
+      //高亮市区  echarts  bug 不生效
+      // regions: [
+      //   {
+      //     name: '运城市',
+      //     value: 0,
+      //     itemStyle: {
+      //       areaColor: 'red',
+      //       label: { show: false },
+      //     },
+      //   },
+      // ],
     },
   ],
 };
diff --git a/src/components/Map/Map.vue b/src/components/Map/Map.vue
index 6759b73..d4999a9 100644
--- a/src/components/Map/Map.vue
+++ b/src/components/Map/Map.vue
@@ -1,6 +1,6 @@
 <template>
   <div :style="{ width: 'width', height: 'height' }" class="chart-box">
-    <div id="myEchart" ref="myEchart" style="width: 100%;height:100%;"></div>
+    <div id="myEchart" ref="myEchart" style="width: 100%; height: 100%"></div>
   </div>
 </template>
 
@@ -22,6 +22,7 @@ export default {
     let hg = window.innerHeight;
     this.width = wh + 'px';
     this.height = hg + 'px';
+    console.log(this.width);
     console.log(this.height);
     window.onresize = () => {
       return (() => {
@@ -50,88 +51,4 @@ export default {
 };
 </script>
 
-<style lang="stylus" scoped>
-/* 懒加载图标动画 */
-.demo-spin-icon-load {
-  animation: ani-demo-spin 1s linear infinite;
-}
-
-@keyframes ani-demo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  50% {
-    transform: rotate(180deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-/* 弹窗样式 */
-.layer {
-  position: absolute;
-  left: 400px;
-  top: 300px;
-  z-index: 100;
-  width: 360px;
-  height: 280px;
-  background: rgba(10, 22, 64, 0.9);
-  border-radius: 5px;
-  border: 1px solid #122253;
-  transform: translate(-100%, -100%);
-
-  .content {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    text-align: center;
-
-    p {
-      font-size: 20px;
-      color: #fff;
-      line-height: 50px;
-    }
-
-    .col-item {
-      height: 41px;
-      margin-top: 20px;
-      border-right: 1px solid #172353;
-
-      .num {
-        color: #ebf8ff;
-        font-size: 18px;
-      }
-
-      .text {
-        color: #507ebc;
-        font-size: 12px;
-      }
-    }
-  }
-
-  .content::after {
-    content: '';
-    width: 120px;
-    height: 2px;
-    background: #FFCCFF;
-    position: absolute;
-    right: -120px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .content::before {
-    content: '';
-    width: 2px;
-    height: 80px;
-    background: #FFB800;
-    position: absolute;
-    right: -134px;
-    top: 136px;
-    transform: rotateZ(-20deg);
-  }
-}
-</style>
+<style lang="stylus" scoped></style>
diff --git a/src/components/Sensor/Sensor.js b/src/components/Sensor/Sensor.js
index d36ceec..8691980 100644
--- a/src/components/Sensor/Sensor.js
+++ b/src/components/Sensor/Sensor.js
@@ -3,8 +3,8 @@ const mixin = {
   data() {
     return {
       series1: [10, 20, 30, 10, 20, 30, 10, 20, 30], // 传感器1
-      series2: [20, 30, 10, 20, 30, 10, 20, 30, 10], // 传感器1
-      series3: [30, 10, 20, 30, 10, 20, 30, 10, 20], // 传感器1
+      series2: [20, 30, 10, 20, 30, 10, 20, 30, 10], // 传感器2
+      series3: [30, 10, 20, 30, 10, 20, 30, 10, 20], // 传感器3
     };
   },
   computed: {
@@ -13,7 +13,7 @@ const mixin = {
       return {
         legend: {
           x: 'center',
-          y: 'top',
+          y: '8%',
           data: ['传感器1', '传感器2', '传感器3'],
           textStyle: {
             fontWeight: 'normal',
diff --git a/src/components/Statistics/Statistics.js b/src/components/Statistics/Statistics.js
index 71cff98..57fa16f 100644
--- a/src/components/Statistics/Statistics.js
+++ b/src/components/Statistics/Statistics.js
@@ -17,7 +17,7 @@ const mixin = {
         legend: [
           {
             x: 'center',
-            y: 'top',
+            y: '8%',
             data: ['本年', '去年'],
             textStyle: {
               fontWeight: 'normal',
diff --git a/src/router/index.js b/src/router/index.js
index 0cd1f16..bd6ac85 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,12 +11,12 @@ const routes = [
     name: 'Home',
     component: Home,
   },
-  // 白框框显示内容界面
-  // {
-  //   path: '/Index',
-  //   name: 'Index',
-  //   component: () => import(/* webpackChunkName: "Index" */ 'views/Index/Index.vue'),
-  // },
+  // 模拟按钮界面
+  {
+    path: '/BtnPage',
+    name: 'BtnPage',
+    component: () => import(/* webpackChunkName: "Index" */ 'views/BtnPage/BtnPage.vue'),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/BtnPage/BtnPage.vue b/src/views/BtnPage/BtnPage.vue
new file mode 100644
index 0000000..1ca651a
--- /dev/null
+++ b/src/views/BtnPage/BtnPage.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="wrap flex-1">
+    <a-button type="primary" v-for="(item, index) in nameList" :key="index"> {{ item }} </a-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BtnPage',
+  data() {
+    return {
+      str: '模拟按钮界面',
+      nameList: [
+        '分诊区',
+        '急救医生',
+        '采血车',
+        'CT室',
+        '介入室',
+        '平车停放点',
+        '卒中中心门口',
+        '急救大楼门',
+        '抢救室门',
+        '走廊',
+        '心电图室门口',
+        '专用电梯口（一楼）',
+        '专用电梯口（四楼）',
+        'CCU导管室门口',
+        '急救护士',
+        '专科医生',
+        '专科护士',
+      ],
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="stylus" scoped>
+.wrap {
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+
+  button {
+    margin: 20px;
+    flex: 0 0 8%;
+  }
+}
+</style>