ss

dist/static/js/1.7c4426ec63e0c6913d64.js

@@ -1,2 +0,0 @@
-webpackJsonp([1],{"2yKw":function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r={render:function(){var e=this.$createElement;return(this._self._c||e)("div",[this._v("homepage")])},staticRenderFns:[]};var a=t("VU/8")({name:"panel"},r,!1,function(e){t("JohG")},null,null);n.default=a.exports},JohG:function(e,n){}});
-//# sourceMappingURL=1.7c4426ec63e0c6913d64.js.map

dist/static/js/0.1f7d5f249e3c0ba6050e.js

@@ -1,2 +1,2 @@
-webpackJsonp([0],{Myn3:function(e,n){},QvN8:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r={render:function(){var e=this.$createElement;return(this._self._c||e)("div",[this._v("trace")])},staticRenderFns:[]};var a=t("VU/8")({name:"trace",data:function(){return{}}},r,!1,function(e){t("Myn3")},null,null);n.default=a.exports}});
-//# sourceMappingURL=0.1f7d5f249e3c0ba6050e.js.map
+webpackJsonp([1],{Myn3:function(e,n){},QvN8:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var r={render:function(){var e=this.$createElement;return(this._self._c||e)("div",[this._v("trace")])},staticRenderFns:[]};var a=t("VU/8")({name:"trace",data:function(){return{}}},r,!1,function(e){t("Myn3")},null,null);n.default=a.exports}});
+//# sourceMappingURL=1.a27636fb3d854e13d6ca.js.map

dist/static/js/2.ee4f118745a92e4499de.js

@@ -1,2 +0,0 @@
-webpackJsonp([2],{QvN8:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r={render:function(){var e=this.$createElement;return(this._self._c||e)("div",[this._v("trace")])},staticRenderFns:[]};var a=n("VU/8")({name:"trace",data:function(){return{}}},r,!1,function(e){n("TGxm")},null,null);t.default=a.exports},TGxm:function(e,t){}});
-//# sourceMappingURL=2.ee4f118745a92e4499de.js.map

package-lock.json

@@ -14570,6 +14570,12 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "dev": true
     },
+    "shvl": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-1.3.1.tgz",
+      "integrity": "sha512-+rRPP46hloYUAEImJcqprUgXu+05Ikqr4h4V+w5i2zJy37nAqtkQKufs3+3S2fDq6JNRrHMIQhB/Vaex+jgAAw==",
+      "dev": true
+    },
     "signal-exit": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
@@ -15900,6 +15906,24 @@
       "integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w==",
       "dev": true
     },
+    "vuex-persistedstate": {
+      "version": "2.5.4",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-2.5.4.tgz",
+      "integrity": "sha512-XYJhKIwO+ZVlTaXyxKxnplrJ88Fnvk5aDw753bxzRw5/yMKLQ6lq9CDCBex2fwZaQcLibhtgJOxGCHjy9GLSlQ==",
+      "dev": true,
+      "requires": {
+        "deepmerge": "2.2.1",
+        "shvl": "1.3.1"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+          "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==",
+          "dev": true
+        }
+      }
+    },
     "watchpack": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",

package.json

@@ -74,6 +74,7 @@
     "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.5.2",
     "vuex": "^3.0.1",
+    "vuex-persistedstate": "^2.5.4",
     "webpack": "^3.6.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.9.1",

src/App.vue

@@ -1,30 +1,9 @@
 <template>
   <el-row id='app'>
-    <!-- <chaoge-brush></chaoge-brush> -->
     <el-col :span="24" class='main-container'>
-    <chao-ge></chao-ge>
     <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> -->
-    <!-- <test-com></test-com> -->
-   <!-- <ant></ant> -->
-   <!-- <my-list></my-list> -->
-   <!-- <my-can></my-can> -->
-   <!-- <my-car></my-car> -->
-    <!-- <bar></bar> -->
-  <!-- <el-select v-model="opt" placeholder="请选择" >
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value">
-    </el-option>
-  </el-select> -->
-  <!-- </div> -->
 </template>
 
 <script>
@@ -37,7 +16,6 @@ import chaogeBrush from './components/chaogebrush'
 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',

src/components/TestCom.vue

@@ -5,7 +5,7 @@
 </template>
 <script>
 import Mock from 'mockjs'
-import _ from 'lodash'
+// import _ from 'lodash'
 let MockName = Mock.mock({
   'array|4': [
     {
@@ -18,13 +18,11 @@ let MockName = Mock.mock({
     }
   ]
 })
-let arr = [1, 2, 3, 4, 5, 6]
-let darr = [4, 5, 6]
-let farr = _.difference(arr, darr)
-let arr2 = _.chunk(arr, 2)
-console.log(arr2)
-console.log(farr)
-// console.log(MockName)
+// let arr = [1, 2, 3, 4, 5, 6]
+// let darr = [4, 5, 6]
+// let farr = _.difference(arr, darr)
+// let arr2 = _.chunk(arr, 2)
+
 let colorMap = new Map([['红色', 'red'], ['黄色', 'yellow'], ['绿色', 'green'], ['蓝色', 'blue']])
 // console.log(colorMap)
 export default {

src/components/chaoge.vue

@@ -10,7 +10,7 @@ import echarts from 'echarts'
 import Mock from 'mockjs'
 import moment from 'moment'
 let startTimes = (new Date()).getTime() - 60 * 60 * 1000
-
+// const JSON = require('circular-json')
 let MockData = Mock.mock({
   'defaultData|60': [
     [function () {
@@ -178,6 +178,13 @@ export default {
     }
   },
   mounted () {
+    var a = {'name': 'zzz'}
+    var b = {'name': 'vvv'}
+    a.child = b
+    b.parent = a
+    console.log(a)
+    // localStorage.myobj = JSON.stringify(a)
+    // localStorage.monitorRouter = JSON.stringify(this.$route)
     this.drawChart('first')
     console.log('组件生成')
     // this.refresh()

src/components/chaogebrush.vue

@@ -31,7 +31,7 @@ import moment from 'moment'
 // import chartConfig from '@/utils/chart/baseConf.js'
 // import BrushView from '../utils/BrushView'
 
-// require('../utils/BrushView')
+require('../utils/BrushView')
 let startTimes = (new Date()).getTime() - 60 * 60 * 1000
 
 let MockData = Mock.mock({
@@ -43,7 +43,7 @@ let MockData = Mock.mock({
   ]
 })
 
-console.log(MockData)
+// console.log(MockData)
 export default {
   name: 'chaogebrush',
   data () {

src/components/myList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <ul>
-      <li></li>
+      <li v-for='item in list' :key='item'></li>
     </ul>
   </div>
 </template>
@@ -18,13 +18,16 @@ export default {
   computed: {
     ...mapGetters(['list'])
   },
+  watch: {
+    list (newVal, oldVal) {
+      console.log('myList组件里')
+      console.log(newVal)
+    }
+  },
   methods: {
     getList () {
       this.$store.dispatch({
-        type: 'getList',
-        params: {
-          val: this
-        }
+        type: 'getList'
       })
     }
   },

src/components/mybrush.vue

@@ -0,0 +1,50 @@
+/* eslint-disable */
+<template>
+    <div>
+
+    </div>
+</template>
+<script>
+export default {
+    name:'mybrush',
+    data () {
+        return {}
+    },
+    methods: {
+        splitData(rawData) {
+        var categoryData = [];
+        var values = [];
+        var volumes = [];
+        for (var i = 0; i < rawData.length; i++) {
+            categoryData.push(rawData[i].splice(0, 1)[0]);
+            values.push(rawData[i]);
+            volumes.push([i, rawData[i][4], rawData[i][0] > rawData[i][1] ? 1 : -1]);
+        }
+        return {
+            categoryData: categoryData,
+            values: values,
+            volumes: volumes
+        }
+      },
+      calculateMA(dayCount, data) {
+        var result = [];
+        for (var i = 0, len = data.values.length; i < len; i++) {
+            if (i < dayCount) {
+                result.push('-');
+                continue;
+            }
+            var sum = 0;
+            for (var j = 0; j < dayCount; j++) {
+                sum += data.values[i - j][1];
+            }
+            result.push(+(sum / dayCount).toFixed(3));
+        }
+        return result;
+     },
+     
+    }
+}
+</script>
+<style>
+
+</style>

src/router/index.js

@@ -5,9 +5,10 @@ import Router from 'vue-router'
 import chaogeBrush from '@/components/chaogebrush'
 import TestCom from '@/components/TestCom'
 // import Homepage from '@/views/homepage'
-import routerPage from './modules/router.index'
+import routerIndex from './modules/router.index'
+import routerPage from './modules/router.page'
 
-const childRouters = [...routerPage]
+const childRouters = [...routerIndex, ...routerPage]
 
 Vue.use(Router)
 

src/router/modules/router.index.js

@@ -5,15 +5,6 @@ export default [
     name: 'panel',
     component (resolve) {
       require(['@/views/panel/index.vue'], resolve)
-    },
-    children: [
-      {
-        path: 'trace',
-        name: 'Trace',
-        component (resolve) {
-          require(['@/views/trace/index.vue'], resolve)
-        }
-      }
-    ]
+    }
   }
 ]

src/router/modules/router.page.js

@@ -0,0 +1,13 @@
+export default [
+  {
+    path: '/trace',
+    name: 'trace',
+    component (resolve) {
+      require(['@/views/trace/index.vue'], resolve)
+    },
+    meta: {
+      keepAlive: true, // 需要被缓存
+      isBack: false
+    }
+  }
+]

src/store/index.js

@@ -1,10 +1,19 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
 
 import Chart from './modules/chart'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
+  plugins: [createPersistedState({
+    storage: window.sessionStorage,
+    reducer (val) {
+      return {
+        monitorRouter: val.monitorRouter
+      }
+    }
+  })],
   modules: {
     Chart
   }

src/store/modules/chart.js

@@ -1,10 +1,12 @@
 import TYPES from '../mutation_types'
 import API from '../../api'
+import axios from 'axios'
 const chart = {
   state: {
     time: {},
     list: [],
-    carlist: []
+    carlist: [],
+    monitorRouter: {}
   },
   mutations: {
     [TYPES.TIME] (state, val) {
@@ -15,6 +17,9 @@ const chart = {
     },
     [TYPES.CARLIST] (state, val) {
       state.list = val.list
+    },
+    [TYPES.MYNAME] (state, val) {
+      state.monitorRouter = val.monitorRouter
     }
   },
   actions: {
@@ -26,11 +31,11 @@ const chart = {
       })
     },
     async getList (context, val) {
-      console.log(val)
-      val.params.val.$http.get(API.getList, {
+      // console.log(this)
+      axios.get(API.getList, {
       })
         .then(function (response) {
-          console.log(response)
+          // console.log(response)
         })
         .catch(function (error) {
           console.log(error)
@@ -59,7 +64,8 @@ const chart = {
   getters: {
     time: state => { return state.time },
     list: state => { return state.list },
-    carlist: state => { return state.carlist }
+    carlist: state => { return state.carlist },
+    monitorRouter: state => { return state.monitorRouter }
   }
 }
 

src/store/mutation_types/index.js

@@ -1,7 +1,8 @@
 const TYPES = {
   TIME: 'TIME',
   LIST: 'LIST',
-  CARLIST: 'CARLIST'
+  CARLIST: 'CARLIST',
+  MYNAME: 'MYNAME'
 }
 // console.log(TYPES)
 export default TYPES

src/utils/BrushView.js

@@ -1,107 +1,108 @@
-/* eslint-disable */
-// import * as echarts from '../../node_modules/echarts'
-var echarts = require('../../node_modules/echarts')
-// import * as zrUtil from '../../node_modules/zrender/src/core/util'
-var zrUtil = require('../../node_modules/zrender/src/core/util')
-var BrushController = require('./BrushController')
-
-/*
-* Licensed to the Apache Software Foundation (ASF) under one
-* or more contributor license agreements.  See the NOTICE file
-* distributed with this work for additional information
-* regarding copyright ownership.  The ASF licenses this file
-* to you under the Apache License, Version 2.0 (the
-* "License"); you may not use this file except in compliance
-* with the License.  You may obtain a copy of the License at
-*
-*   http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing,
-* software distributed under the License is distributed on an
-* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-* KIND, either express or implied.  See the License for the
-* specific language governing permissions and limitations
-* under the License.
-*/
-var _default = echarts.extendComponentView({
-  type: 'brush',
-  init: function (ecModel, api) {
-    /**
-     * @readOnly
-     * @type {module:echarts/model/Global}
-     */
-    this.ecModel = ecModel
-    /**
-     * @readOnly
-     * @type {module:echarts/ExtensionAPI}
-     */
-    this.api = api
-    /**
-     * @readOnly
-     * @type {module:echarts/component/brush/BrushModel}
-     */
-    this.model
-    /**
-     * @private
-     * @type {module:echarts/component/helper/BrushController}
-     */
-    (this._brushController = new BrushController(api.getZr())).on('brush', zrUtil.bind(this._onBrush, this)).mount()
-  },
-
-  /**
-   * @override
-   */
-  render: function (brushModel) {
-    this.model = brushModel
-    return updateController.apply(this, arguments)
-  },
-
-  /**
-   * @override
-   */
-  updateTransform: updateController,
-
-  /**
-   * @override
-   */
-  updateView: updateController,
-  // /**
-  //  * @override
-  //  */
-  // updateLayout: updateController,
-  // /**
-  //  * @override
-  //  */
-  // updateVisual: updateController,
-
-  /**
-   * @override
-   */
-  dispose: function () {
-    this._brushController.dispose()
-  },
-
-  /**
-   * @private
-   */
-  _onBrush: function (areas, opt) {
-    var modelId = this.model.id
-    this.model.brushTargetManager.setOutputRanges(areas, this.ecModel) // Action is not dispatched on drag end, because the drag end
-    // emits the same params with the last drag move event, and
-    // may have some delay when using touch pad, which makes
-    // animation not smooth (when using debounce).
-    (!opt.isEnd || opt.removeOnClick) && this.api.dispatchAction({
-      type: 'brush',
-      brushId: modelId,
-      areas: zrUtil.clone(areas),
-      $from: modelId
-    })
-  }
-})
-
-function updateController (brushModel, ecModel, api, payload) {
-  // Do not update controller when drawing.
-  // (!payload || payload.$from !== brushModel.id) && this._brushController.setPanels(brushModel.brushTargetManager.makePanelOpts(api)).enableBrush(brushModel.brushOption).updateCovers(brushModel.areas.slice())
-}
-
-module.exports = _default
+/* eslint-disable */
+// import * as echarts from '../../node_modules/echarts'
+var echarts = require('../../node_modules/echarts/lib/echarts')
+// import * as zrUtil from '../../node_modules/zrender/src/core/util'
+var zrUtil = require('zrender/src/core/util')
+var BrushController = require('./BrushController')
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+var _default = echarts.extendComponentView({
+  type: 'brush',
+  init: function (ecModel, api) {
+    /**
+     * @readOnly
+     * @type {module:echarts/model/Global}
+     */
+    this.ecModel = ecModel
+    /**
+     * @readOnly
+     * @type {module:echarts/ExtensionAPI}
+     */
+    this.api = api
+    /**
+     * @readOnly
+     * @type {module:echarts/component/brush/BrushModel}
+     */
+    this.model;
+    /**
+     * @private
+     * @type {module:echarts/component/helper/BrushController}
+     */
+    (this._brushController = new BrushController(api.getZr())).on('brush', zrUtil.bind(this._onBrush, this)).mount()
+  },
+
+  /**
+   * @override
+   */
+  render: function (brushModel) {
+    // console.log(brushModel)
+    this.model = brushModel
+    return updateController.apply(this, arguments)
+  },
+
+  /**
+   * @override
+   */
+  updateTransform: updateController,
+
+  /**
+   * @override
+   */
+  updateView: updateController,
+  // /**
+  //  * @override
+  //  */
+  // updateLayout: updateController,
+  // /**
+  //  * @override
+  //  */
+  // updateVisual: updateController,
+
+  /**
+   * @override
+   */
+  dispose: function () {
+    this._brushController.dispose()
+  },
+
+  /**
+   * @private
+   */
+  _onBrush: function (areas, opt) {
+    var modelId = this.model.id
+    this.model.brushTargetManager.setOutputRanges(areas, this.ecModel); // Action is not dispatched on drag end, because the drag end
+    // emits the same params with the last drag move event, and
+    // may have some delay when using touch pad, which makes
+    // animation not smooth (when using debounce).
+    (!opt.isEnd || opt.removeOnClick) && this.api.dispatchAction({
+      type: 'brush',
+      brushId: modelId,
+      areas: zrUtil.clone(areas),
+      $from: modelId
+    })
+  }
+})
+
+function updateController (brushModel, ecModel, api, payload) {
+  // Do not update controller when drawing.
+  (!payload || payload.$from !== brushModel.id) && this._brushController.setPanels(brushModel.brushTargetManager.makePanelOpts(api)).enableBrush(brushModel.brushOption).updateCovers(brushModel.areas.slice())
+}
+
+module.exports = _default

src/views/homepage/index.vue

@@ -4,11 +4,13 @@
       <el-aside :width="isCollapse ? '65px' : '200px'">
       <div class='index-logo' :class='{"tosmall":isCollapse}'><h1>Ant Design Pro</h1></div>
       <el-menu
-      default-active="1"
+      default-active="/panel"
       class="el-menu-vertical-demo"
       @open="handleOpen"
       @close="handleClose"
-      :collapse="isCollapse">
+      :collapse="isCollapse"
+      unique-opened
+      router>
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-mobile-phone"></i>
@@ -17,7 +19,7 @@
         <el-menu-item-group>
           <!-- <template slot="title">分组一</template> -->
           <el-menu-item index="/panel">分析页</el-menu-item>
-          <el-menu-item index="1-2">监控页</el-menu-item>
+          <el-menu-item index="/trace">监控页</el-menu-item>
           <el-menu-item index="1-2">工作台</el-menu-item>
         </el-menu-item-group>
       </el-submenu>

src/views/panel/index.vue

@@ -1,9 +1,35 @@
 <template>
-    <div>homepage</div>
+    <div>panel
+      <div>{{list}}</div>
+      <my-list></my-list>
+    </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+import myList from '../../components/myList'
 export default {
-  name: 'panel'
+  name: 'panel',
+  computed: {
+    ...mapGetters(['list'])
+  },
+  components: {myList},
+  watch: {
+    list (newVal, oldVal) {
+      console.log('父组件')
+      console.log(newVal)
+    }
+  },
+  methods: {
+    getList () {
+      this.$store.dispatch({
+        type: 'getList'
+      })
+    }
+  },
+  mounted () {
+    this.getList()
+    console.log(this.list)
+  }
 }
 </script>
 <style lang = 'scss'>

src/views/trace/index.vue

@@ -1,12 +1,22 @@
 <template>
-   <div>trace</div>
+   <div>trace {{monitorRouter}}</div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'trace',
   data () {
     return {
     }
+  },
+  computed: {
+    ...mapGetters(['monitorRouter'])
+  },
+  mounted () {
+    this.$store.commit({
+      type: 'MYNAME',
+      monitorRouter: this.$route
+    })
   }
 }
 </script>