diff --git a/src/views/counter/components/chart.vue b/src/views/counter/components/chart.vue
new file mode 100644
index 0000000..c25cb7f
--- /dev/null
+++ b/src/views/counter/components/chart.vue
@@ -0,0 +1,135 @@
+<template>
+  <div :class="className" :style="{height:height,width:width}"></div>
+</template>
+
+<script>
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import { debounce } from '@/utils'
+
+export default {
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '350px'
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    chartData: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+    if (this.autoResize) {
+      this.__resizeHanlder = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHanlder)
+    }
+
+    // 监听侧边栏的变化
+    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    if (this.autoResize) {
+      window.removeEventListener('resize', this.__resizeHanlder)
+    }
+
+    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
+
+    this.chart.dispose()
+    this.chart = null
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val)
+      }
+    }
+  },
+  methods: {
+    setOptions({ historyData, xAxis, title } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          data: xAxis,
+          boundaryGap: false,
+          axisLabel: {
+            interval: 0
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 20,
+          top: 30,
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross'
+          },
+          padding: [5, 10]
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          }
+        },
+        legend: {
+          data: [title]
+        },
+        series: [{
+          name: title, itemStyle: {
+            normal: {
+              color: '#FF005A',
+              lineStyle: {
+                color: '#FF005A',
+                width: 2
+              }
+            }
+          },
+          smooth: true,
+          type: 'line',
+          data: historyData,
+          animationDuration: 2800,
+          animationEasing: 'cubicInOut'
+        }]
+      })
+    },
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons')
+      console.log(this.chartData)
+      // this.setOptions(this.chartData)
+    }
+  }
+}
+</script>
diff --git a/src/views/counter/components/screen.vue b/src/views/counter/components/screen.vue
new file mode 100644
index 0000000..ea8614e
--- /dev/null
+++ b/src/views/counter/components/screen.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="screen-wrapper">
+    <div class="device-base">
+      <ul>
+        <li>设备: <span>{{this.$store.getters.deviceID}}</span></li>
+        <li>地区: <span>尖沙咀</span></li>
+        <li>设备名称: <span>香港大学1号机</span></li>
+      </ul>
+    </div>
+    <div class="device-screen"></div>
+    <div class="device-status"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'screen',
+  data() {
+    return {
+      //
+    }
+  },
+  methods: {
+    //
+  }
+}
+</script>
+
+<style lang="scss">
+  .device-base {
+    display: flex;
+    justify-content: center;
+    ul {
+      li {
+        list-style-type: none;
+        display: inline-block;
+      }
+    }
+    
+  }
+</style>
diff --git a/src/views/counter/detail.vue b/src/views/counter/detail.vue
index 9418728..b036b1d 100644
--- a/src/views/counter/detail.vue
+++ b/src/views/counter/detail.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="app-container">
-    <el-tabs v-model="activeName2" @tab-click="handleTabClick">
-      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
-      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+    <el-tabs v-model="activeName" @tab-click="handleTabClick">
+      <el-tab-pane label="显示屏" name="screen">
+        <screen></screen>
+      </el-tab-pane>
+      <el-tab-pane label="趋势图" name="chart">配置管理</el-tab-pane>
     </el-tabs>
     <el-table
       v-loading="listLoading"
@@ -57,14 +59,18 @@
 
 <script>
 import { fetchDeviceLogs } from '@/api/counter'
+import Screen from './components/screen'
 export default {
   name: 'deviceDetail',
+  components: {
+    Screen
+  },
   data() {
     return {
       listLoading: true,
       deviceLogs: [],
-      total: 0,
-      activeName2: 'first'
+      activeName: 'screen',
+      total: 0
     }
   },
   methods: {