test

build/webpack.base.conf.js

@@ -47,6 +47,10 @@ module.exports = {
         options: vueLoaderConfig
       },
       {
+        test: /\.scss/,
+        loaders: ['style','css','sass']
+      },
+      {
         test: /\.js$/,
         loader: 'babel-loader',
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]

mock/index.js

@@ -6,7 +6,7 @@ const Mock = require('mockjs')
  * 每个mock模块只需暴露一个默认的接口
  * 暴露的模块中的元素，必须每个带有url，methods，callback
  */
-const apiModules = ['list', 'test']
+const apiModules = ['list']
 
 let API = {}
 

mock/modules/test/test.js

@@ -1,49 +0,0 @@
-import Mock from 'mockjs'
-import API from '../../../src/api'
-
-let listData1 = Mock.mock({
-  'dataList': [
-    {
-      'data': [
-        {'NAME':'李子','PRICE': '128'},
-        {'NAME':'苹果','PRICE': '130'},
-        {'NAME':'香蕉','PRICE': '110'},
-        {'NAME':'西瓜','PRICE': '100'}
-      ]
-    }
-  ],
-  'carList': [
-    {
-      'data': [
-        {'NAME':'1李子','PRICE': '128'},
-        {'NAME':'1苹果','PRICE': '130'},
-        {'NAME':'1香蕉','PRICE': '110'},
-        {'NAME':'1西瓜','PRICE': '100'}
-      ]
-    }
-  ]
-})
-
-export const getList1 = {
-  url: new RegExp(API.getList1),
-  type: /get/,
-  callback: function (req) {
-    // console.log(req.body)
-    return {
-      status: 'ok',
-      data: listData1.dataList
-    }
-  }
-}
-
-export const getCar1 = {
-  url: new RegExp(API.getcarList1),
-  type: /get/,
-  callback: function (req) {
-    // console.log(req.body)
-    return {
-      status: 'ok',
-      data: listData1.carList
-    }
-  }
-}

src/App.vue

@@ -1,12 +1,17 @@
 <template>
-  <div id="app">
+  <el-row id='app'>
+    <el-col :span="24" class='main-container'>
+    <router-view></router-view>
+    </el-col>
+  </el-row>
+  <!-- <div id="app" class='el-row'> -->
+    <!-- <my-chart></my-chart> -->
      <!-- <hello-world></hello-world> -->
-     <my-table></my-table>
-    <!-- <chao-ge v-if='opt == 1'></chao-ge> -->
+     <!-- <my-table></my-table> -->
+    <!-- <chao-ge></chao-ge> -->
     <!-- <test-com></test-com> -->
     <!-- <chaoge-brush></chaoge-brush> -->
     <!-- <keep-alive> -->
-    <!-- <router-view></router-view> -->
     <!-- </keep-alive> -->
    <!-- <ant></ant> -->
    <!-- <my-list></my-list> -->
@@ -21,7 +26,7 @@
       :value="item.value">
     </el-option>
   </el-select> -->
-  </div>
+  <!-- </div> -->
 </template>
 
 <script>
@@ -35,6 +40,7 @@ import myTable from './components/mytable'
 import myList from './components/myList'
 import myCar from './components/mycar'
 // import myCan from './components/mycan'
+import myChart from './components/brushchart'
 export default {
   name: 'App',
   components: {
@@ -46,7 +52,8 @@ export default {
     chaogeBrush,
     myTable,
     myList,
-    myCar
+    myCar,
+    myChart
     // myCan
   },
   data () {
@@ -73,25 +80,12 @@ export default {
 }
 </script>
 
-<style>
+<style lang ='scss'>
+@import './assets/scss/public.scss';
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  height: 100%;
+}
+.main-container {
+  height: 100%;
 }
- .demo-table-expand {
-    font-size: 0;
-  }
-  .demo-table-expand label {
-    width: 90px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 50%;
-  }
 </style>

src/assets/scss/public.scss

@@ -0,0 +1,32 @@
+// 字体大小
+$fontSize: 14px;
+
+html,
+body {
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%; // background-color: $backgroundColor;
+}
+
+p,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+.el-menu-vertical-demo {
+  padding: 16px 0px;
+  .el-submenu__title {
+    text-align: left;
+  }
+}
+.el-submenu .el-menu-item {
+  padding-left: 48px;
+  text-align: left;
+}
+.publicStyle {
+  font-size: $fontSize;
+  
+}

src/components/brushchart.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div id='myChart' :style="{width: '900px', height: '500px'}"></div>
+  </div>
+</template>
+<script>
+import Mock from 'mockjs'
+import moment from 'moment'
+// import chartConfig from '@/utils/chart/baseConf.js'
+let startTimes = (new Date()).getTime() - 60 * 60 * 1000
+
+let MockData = Mock.mock({
+  'defaultData|60': [
+    [function () {
+      startTimes += 60000
+      return moment(new Date(startTimes)).format('YYYY-MM-DD HH:mm')
+    }, '@integer(0, 9999)']
+  ]
+})
+export default {
+  name: 'brushchart',
+  data () {
+    return {
+      startValue: 55,
+      endValue: 59,
+      options: {
+        toolbox: {
+          feature: {
+            dataZoom: {
+              yAxisIndex: false
+            }
+          }
+        },
+        dataZoom: [
+          {
+            show: true,
+            type: 'slider',
+            top: '90%',
+            realtime: false,
+            zoomLock: true
+          }
+        ],
+        xAxis: {
+          type: 'category'
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [{
+          data: [],
+          type: 'line'
+        }]
+      },
+      myChart: {}
+    }
+  },
+  methods: {
+    doChart () {
+      let chartData = MockData.defaultData
+      this.options.series[0].data = chartData
+      this.myChart = this.$echarts.init(document.getElementById('myChart'))
+      this.myChart.setOption(this.options)
+      let renderBrushed = (params) => {
+        this.startValue = this.myChart.getModel().option.dataZoom[0].startValue
+        // console.log(this.startValue)
+        this.endValue = this.myChart.getModel().option.dataZoom[0].endValue
+        // console.log(this.endValue)
+        // console.log(chartData[this.startValue][0])
+        console.log(chartData[this.endValue])
+        // console.log(startValue)
+        // console.log(params)
+      }
+      this.myChart.dispatchAction({
+        type: 'dataZoom',
+        // 开始位置的数值
+        startValue: 55,
+        // 结束位置的数值
+        endValue: 60
+      })
+      this.myChart.on('datazoom', renderBrushed)
+      // setTimeout(() => {
+      setInterval(() => {
+        // let start = this.startValue--
+        // let end = this.endValue--
+        this.startValue--
+        this.endValue--
+        this.myChart.dispatchAction({
+          type: 'dataZoom',
+          // 开始位置的数值
+          startValue: this.startValue,
+          // 结束位置的数值
+          endValue: this.endValue
+        })
+      }, 3000)
+      // }, 1000)
+    }
+  },
+  mounted () {
+    this.doChart()
+  }
+}
+</script>
+<style>
+
+</style>

src/components/chaoge.vue

@@ -2,7 +2,7 @@
   <div>
     <h1>测试组件</h1>
     <p>选择的时间轴： {{timeRang}}</p>
-    <div id="myChart" style="width: 800px;height:400px;"></div>
+    <div id="myChart1" style="width: 800px;height:400px;"></div>
   </div>
 </template>
 <script>
@@ -31,8 +31,9 @@ export default {
     drawChart (flag) {
     //   console.log(flag)
       console.log('hautu ')
-      this.myChart = echarts.init(document.getElementById('myChart'))
+      this.myChart = echarts.init(document.getElementById('myChart1'))
       let chartData = MockData.defaultData
+      console.log(chartData)
       // 指定图表的配置项和数据
       let option = {
         title: {

src/components/chaogebrush.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <p>选择的时间轴： {{time}}</p>
+    <!-- <p>选择的时间轴： {{time}}</p>
     时间框大小 <select name="" id=""><option value="">1</option></select>
-    最近几小时 <select name="" id=""><option value="">1</option></select>
+    最近几小时 <select name="" id=""><option value="">1</option></select> -->
     <div id="myChart" style="width: 800px;height:400px;"></div>
-    <button @click='toPage'>跳转1</button>
+    <!-- <button @click='toPage'>跳转1</button>
     <button @click='toPage2'>跳转2</button>
     <p>TOP SQL</p>
     <table border="1px">
       <tr><td>1</td><td>2</td><td>3</td></tr>
       <tr><td>1</td><td>2</td><td>3</td></tr>
-    </table>
+    </table> -->
   </div>
 </template>
 <script>

src/views/homepage/index.vue

@@ -1,45 +1,103 @@
 <template>
 <div>
-     <el-menu
-      default-active="2"
+  <el-container class='home-container'>
+      <el-aside :width="isCollapse ? '65px' : '200px'">
+      <div class='index-logo' :class='{"tosmall":isCollapse}'><h1>Ant Design Pro</h1></div>
+      <el-menu
+      default-active="1"
       class="el-menu-vertical-demo"
       @open="handleOpen"
-      @close="handleClose">
+      @close="handleClose"
+      :collapse="isCollapse">
       <el-submenu index="1">
         <template slot="title">
-          <i class="el-icon-location"></i>
-          <span>导航一</span>
+          <i class="el-icon-mobile-phone"></i>
+          <span>Dashboard</span>
         </template>
         <el-menu-item-group>
           <!-- <template slot="title">分组一</template> -->
-          <el-menu-item index="1-1">选项1</el-menu-item>
-          <el-menu-item index="1-2">选项2</el-menu-item>
+          <el-menu-item index="/panel">分析页</el-menu-item>
+          <el-menu-item index="1-2">监控页</el-menu-item>
+          <el-menu-item index="1-2">工作台</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
       <el-submenu index="2">
         <template slot="title">
-          <i class="el-icon-location"></i>
-          <span>导航一</span>
+          <i class="el-icon-tickets"></i>
+          <span>表单页</span>
         </template>
         <el-menu-item-group>
           <!-- <template slot="title">分组一</template> -->
-          <el-menu-item index="2-1">选项1</el-menu-item>
-          <el-menu-item index="2-2">选项2</el-menu-item>
+          <el-menu-item index="2-1">基础表单</el-menu-item>
+          <el-menu-item index="2-2">分步表单</el-menu-item>
+          <el-menu-item index="2-3">高级表单</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
       <el-submenu index="3">
         <template slot="title">
-          <i class="el-icon-location"></i>
-          <span>导航一</span>
+          <i class="el-icon-document"></i>
+          <span>列表页</span>
         </template>
         <el-menu-item-group>
           <!-- <template slot="title">分组一</template> -->
-          <el-menu-item index="3-1">选项1</el-menu-item>
-          <el-menu-item index="3-2">选项2</el-menu-item>
+          <el-menu-item index="3-1">查询表格</el-menu-item>
+          <el-menu-item index="3-2">标准表格</el-menu-item>
+          <el-menu-item index="3-3">查询表格</el-menu-item>
+          <el-menu-item index="3-4">标准表格</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+        <el-submenu index="4">
+        <template slot="title">
+          <i class="el-icon-printer"></i>
+          <span>详情页</span>
+        </template>
+        <el-menu-item-group>
+          <!-- <template slot="title">分组一</template> -->
+          <el-menu-item index="4-1">基础详情页</el-menu-item>
+          <el-menu-item index="4-2">高级详情页</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+      <el-submenu index="5">
+        <template slot="title">
+          <i class="el-icon-success"></i>
+          <span>结果页</span>
+        </template>
+        <el-menu-item-group>
+          <!-- <template slot="title">分组一</template> -->
+          <el-menu-item index="5-1">成功页</el-menu-item>
+          <el-menu-item index="5-2">失败页</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+        <el-submenu index="6">
+        <template slot="title">
+          <i class="el-icon-warning"></i>
+          <span>异常页</span>
+        </template>
+        <el-menu-item-group>
+          <!-- <template slot="title">分组一</template> -->
+          <el-menu-item index="6-1">403</el-menu-item>
+          <el-menu-item index="6-2">404</el-menu-item>
+          <el-menu-item index="6-3">500</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+        <el-submenu index="7">
+        <template slot="title">
+          <i class="el-icon-service"></i>
+          <span>个人页</span>
+        </template>
+        <el-menu-item-group>
+          <!-- <template slot="title">分组一</template> -->
+          <el-menu-item index="7-1">个人中心</el-menu-item>
+          <el-menu-item index="7-2">个人设置</el-menu-item>
         </el-menu-item-group>
       </el-submenu>
      </el-menu>
-     <input type="text" maxlength='20' style='width:500px;'>
+  </el-aside>
+  <el-container>
+   <el-header><div class='menu-icon' @click='changeMenu'><i class='el-icon-arrow-right' v-if='isCollapse'></i><i class='el-icon-arrow-left' v-else></i></div></el-header>
+    <el-main class='right-container'>Main</el-main>
+  </el-container>
+  </el-container>
   </div>
 </template>
 <script>
@@ -47,6 +105,7 @@ export default {
   name: 'homepage',
   data () {
     return {
+      isCollapse: false
     }
   },
   methods: {
@@ -55,10 +114,65 @@ export default {
     },
     handleOpen () {
       console.log('handleOpen')
+    },
+    changeMenu () {
+      this.isCollapse = !this.isCollapse
     }
   }
 }
 </script>
-<style>
-
+<style lang='scss'>
+  .el-aside {
+    // background-color: #D3DCE6;
+    color: #333;
+    text-align: center;
+    /* line-height: 200px; */
+  }
+  .el-menu-item-group__title {
+    padding-top: 0px;
+  }
+  .el-main {
+    background-color: #E9EEF3;
+    color: #333;
+    text-align: center;
+    /* line-height: 160px; */
+  }
+  .home-container {
+    height: 100%;
+    min-width: 1366px;
+  }
+  .index-logo {
+    transition:  0.3s;
+    cursor: pointer;
+    h1{
+      color:#1890ff;
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0px;
+      overflow: hidden;
+    }
+    height: 64px;
+    position: relative;
+    line-height: 64px;
+    background-color: white;
+    box-shadow:1px 1px 0 0 #e8e8e8;
+  }
+  .el-header {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    height: 64px !important;
+    padding: 0px;
+    padding-right: 20px;
+    .menu-icon {
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      width:64px;
+      cursor: pointer;
+    }
+  }
+  .tosmall {
+    width: 64px;
+  }
 </style>

src/views/trace/index.vue

@@ -0,0 +1,16 @@
+<template>
+   <div>trace</div> 
+</template>
+<script>
+export default {
+  name: 'trace',
+  data() {
+    return {
+      
+    }
+  } 
+}
+</script>
+<style lang='scss'>
+
+</style>