add view

src/assets/iconfont/iconfont.js

 ;(function(window) {
 
   var svgSprite = '<svg>' +
+    '' +
+    '<symbol id="icon-tubiaoleixingzhengchang" viewBox="0 0 1024 1024">' +
+    '' +
+    '<path d="M64 448 320 448 320 960 64 960 64 448 64 448ZM704 256 960 256 960 960 704 960 704 256 704 256ZM384 64 640 64 640 960 384 960 384 64 384 64Z"  ></path>' +
+    '' +
+    '</symbol>' +
     '' +
     '<symbol id="icon-zujian" viewBox="0 0 1024 1024">' +
     '' +

src/components/Charts/keyboard2.vue

+<template>
+    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
+</template>
+<script>
+    // 引入 ECharts 主模块
+    const echarts = require('echarts/lib/echarts');
+    // 引入柱状图
+    require('echarts/lib/chart/bar');
+    require('echarts/lib/chart/line');
+    // 引入提示框和标题组件
+    require('echarts/lib/component/tooltip');
+    require('echarts/lib/component/title');
+
+    require('echarts/lib/component/visualMap');
+    export default {
+      name: 'barPercent',
+      props: {
+        className: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        id: {
+          type: String,
+          default: 'bar-percent-chart'
+        },
+        width: {
+          type: String,
+          default: '200px'
+        },
+        height: {
+          type: String,
+          default: '200px'
+        }
+      },
+      data() {
+        return {};
+      },
+      mounted() {
+        this.initBar();
+      },
+      methods: {
+        initBar() {
+          this.chart = echarts.init(document.getElementById(this.id));
+
+          const xAxisData = [];
+          const data = [];
+          const data2 = [];
+          for (let i = 0; i < 50; i++) {
+            xAxisData.push(i);
+            data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+            data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3);
+          }
+          this.chart.setOption(
+            {
+              backgroundColor: '#08263a',
+              xAxis: [{
+                show: false,
+                data: xAxisData
+              }, {
+                show: false,
+                data: xAxisData
+              }],
+              visualMap: {
+                show: false,
+                min: 0,
+                max: 50,
+                dimension: 0,
+                inRange: {
+                  color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+                }
+              },
+              yAxis: {
+                axisLine: {
+                  show: false
+                },
+                axisLabel: {
+                  textStyle: {
+                    color: '#4a657a'
+                  }
+                },
+                splitLine: {
+                  show: true,
+                  lineStyle: {
+                    color: '#08263f'
+                  }
+                },
+                axisTick: {
+                  show: false
+                }
+              },
+              series: [{
+                name: 'back',
+                type: 'bar',
+                data: data2,
+                z: 1,
+                itemStyle: {
+                  normal: {
+                    opacity: 0.4,
+                    barBorderRadius: 5,
+                    shadowBlur: 3,
+                    shadowColor: '#111'
+                  }
+                }
+              }, {
+                name: 'Simulate Shadow',
+                type: 'line',
+                data,
+                z: 2,
+                showSymbol: false,
+                animationDelay: 0,
+                animationEasing: 'linear',
+                animationDuration: 1200,
+                lineStyle: {
+                  normal: {
+                    color: 'transparent'
+                  }
+                },
+                areaStyle: {
+                  normal: {
+                    color: '#08263a',
+                    shadowBlur: 50,
+                    shadowColor: '#000'
+                  }
+                }
+              }, {
+                name: 'front',
+                type: 'bar',
+                data,
+                xAxisIndex: 1,
+                z: 3,
+                itemStyle: {
+                  normal: {
+                    barBorderRadius: 5
+                  }
+                }
+              }],
+              animationEasing: 'elasticOut',
+              animationEasingUpdate: 'elasticOut',
+              animationDelay(idx) {
+                return idx * 20;
+              },
+              animationDelayUpdate(idx) {
+                return idx * 20;
+              }
+            })
+        }
+      }
+    }
+</script>

src/components/Hamburger/index.vue

 <template>
     <div>
-        <svg @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}" aria-hidden="true">
-            <use xlink:href="#icon-hamburger"></use>
-        </svg>
+        <svg t="1492500959545" @click="toggleClick" class="wscn-icon hamburger" :class="{'is-active':isActive}"  style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1691" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 966.8023 568.849776z" p-id="1692"></path><path d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 966.8023 881.527125z" p-id="1693"></path><path d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 966.8023 256.17345z" p-id="1694"></path></svg>
     </div>
 </template>
 

src/router/index.js

@@ -19,6 +19,12 @@ import reset from '../views/login/reset';
 /* components*/
 const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
 const Markdown = resolve => require(['../views/components/markdown'], resolve);
+const Jsoneditor = resolve => require(['../views/components/jsoneditor'], resolve);
+
+/* charts*/
+const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
+const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve);
+
 
 /* admin*/
 // const AdminCreateUser = resolve => require(['../views/admin/createUser'], resolve);
@@ -52,14 +58,27 @@ export default new Router({
       ]
     },
     {
-      path: '/admin',
+      path: '/components',
       component: Layout,
       redirect: 'noredirect',
       name: '组件',
       icon: 'zujian',
       children: [
         { path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
-         { path: 'markdown', component: Markdown, name: 'Markdown' }
+        { path: 'markdown', component: Markdown, name: 'Markdown' },
+        { path: 'jsoneditor', component: Jsoneditor, name: 'json编辑器' }
+
+      ]
+    },
+    {
+      path: '/charts',
+      component: Layout,
+      redirect: 'noredirect',
+      name: '图表',
+      icon: 'tubiaoleixingzhengchang',
+      children: [
+        { path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
+         { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' }
 
       ]
     },

src/styles/index.scss

 @import './btn.scss';
 // @import './editor.scss';
 @import "./mixin.scss";
-
 body {
   //height: 100%;
   //overflow-y: scroll;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
   //@include scrollBar;
 }
-label{
+
+label {
   font-weight: 700;
 }
 
@@ -19,7 +19,9 @@ html {
   box-sizing: border-box;
 }
 
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   box-sizing: inherit;
 }
 
@@ -68,21 +70,29 @@ a:hover {
   display: block;
 }
 
-.components-container{
+.components-container {
   margin: 30px 50px;
+  position: relative;
 }
 
-code{
+.editor-container .CodeMirror {
+  height: 100%!important;
+}
+
+code {
   background: #eef1f6;
   padding: 20px 10px;
   margin-bottom: 20px;
   display: block;
 }
-.fade-enter-active, .fade-leave-active {
+
+.fade-enter-active,
+.fade-leave-active {
   transition: all .2s ease
 }
 
-.fade-enter, .fade-leave-active {
+.fade-enter,
+.fade-leave-active {
   opacity: 0;
 }
 
@@ -101,7 +111,6 @@ code{
 //    margin: 0 auto;
 //  }
 //}
-
 //main-container全局样式
 .app-container {
   padding: 20px;
@@ -139,7 +148,6 @@ code{
   .el-upload {
     float: left;
     width: 100px;
-
   }
   .el-upload-list {
     float: left;
@@ -190,15 +198,18 @@ code{
   }
 }
 
-.link-type,.link-type:focus {
+.link-type,
+.link-type:focus {
   color: #337ab7;
   cursor: pointer;
-  &:hover{
+  &:hover {
     color: rgb(32, 160, 255);
   }
 }
 
-.publishedTag, .draftTag, .deletedTag {
+.publishedTag,
+.draftTag,
+.deletedTag {
   color: #fff;
   background-color: $panGreen;
   line-height: 1;
@@ -242,7 +253,7 @@ code{
   .el-checkbox {
     margin: 0 20px 15px 0;
   }
-  .el-checkbox + .el-checkbox {
+  .el-checkbox+.el-checkbox {
     margin-left: 0px;
   }
 }
@@ -272,8 +283,8 @@ code{
   p {
     display: inline-block;
   }
-  .el-collapse-item__content{
-    padding-right:0px;
+  .el-collapse-item__content {
+    padding-right: 0px;
   }
 }
 
@@ -328,12 +339,14 @@ code{
     margin-right: 8px;
   }
 }
-.small-padding{
-  .cell{
+
+.small-padding {
+  .cell {
     padding-left: 8px;
     padding-right: 8px;
   }
 }
+
 .status-col {
   .cell {
     padding: 0 10px;
@@ -348,7 +361,10 @@ code{
 //  margin-left: 0px!important;
 //}
 .no-border {
-  .el-input-group__prepend, .el-input__inner, .el-date-editor__editor, .multiselect__tags {
+  .el-input-group__prepend,
+  .el-input__inner,
+  .el-date-editor__editor,
+  .multiselect__tags {
     border: none;
   }
 }
@@ -384,7 +400,7 @@ code{
 }
 
 //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
-.el-dialog{
+.el-dialog {
   transform: none;
   left: 0;
   position: relative;

src/views/charts/keyboard.vue

+<template>
+  <div class="components-container" style='height:100vh'>
+    <div class='chart-container'>
+       <keyboardChart height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import keyboardChart from 'components/Charts/keyboard';
+
+    export default {
+      components: { keyboardChart },
+      data() {
+        return {
+
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+</style>
+

src/views/charts/keyboard2.vue

+<template>
+  <div class="components-container" style='height:100vh'>
+    <div class='chart-container'>
+       <keyboardChart2 id='apple' height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import keyboardChart2 from 'components/Charts/keyboard2';
+
+    export default {
+      components: { keyboardChart2 },
+      data() {
+        return {
+
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+</style>
+

src/views/charts/markdown.vue

+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="150"></MdEditor>
+    </div>
+  </div>
+</template>
+<script>
+    import MdEditor from 'components/MdEditor';
+
+    export default {
+      components: { MdEditor },
+      data() {
+        return {
+          content: 'Simplemde'
+        }
+      }
+    };
+</script>
+
+

src/views/charts/tinymce.vue

+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+      <Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
+    </div>
+    <!--<div class='editor-content'>
+{{content}}
+    </div>-->
+  </div>
+</template>
+<script>
+    import Tinymce from 'components/Tinymce';
+
+    export default {
+      components: { Tinymce },
+      data() {
+        return {
+          content: 'Tinymce'
+        }
+      },
+      methods: {
+
+      }
+    };
+</script>
+
+

src/views/components/404.vue

-<template>
-    <div class="errorpage-container"> 404
-        <splitPane v-on:resize="resize" split="vertical">
-            <template slot="paneL">
-                <div class="left-container"></div>
-            </template>
-            <template slot="paneR">
-                <splitPane split="horizontal">
-                    <template slot="paneL">
-                        <div class="top-container"></div>
-                    </template>
-                    <template slot="paneR">
-                        <div class="bottom-container">
-                        </div>
-                    </template>
-                </splitPane>
-            </template>
-        </splitPane>
-    </div>
-</template>
-
-
-<script>
-    import splitPane from 'components/SplitPane/SplitPane'
-    export default {
-      components: { splitPane },
-      methods: {
-        resize() {
-          console.log('resize')
-        }
-      }
-    };
-</script>
-<style rel="stylesheet/scss" lang="scss" scoped>
-    .errorpage-container{
-        position: relative;
-        height: 100vh;
-    }
-    .left-container {
-        background-color: #F38181;
-        height:100%;
-    }
-
-    .right-container {
-        background-color: #FCE38A;
-        height: 200px;
-    }
-
-    .top-container {
-        background-color: #FCE38A;
-        width: 100%;
-        height: 100%;
-    }
-
-    .bottom-container {
-        width: 100%;
-        background-color: #95E1D3;
-        height: 100%;
-
-    }
-</style>

src/views/components/dndlist.vue

+<template>
+  <div class="components-container">
+    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
+    <div class="editor-container">
+       <TwoDndList :list1="list1" :list2="list2" :list1Title="头条列表" list2Title="文章池"></TwoDndList>
+    </div>
+    <!--<div class='editor-content'>
+{{content}}
+    </div>-->
+  </div>
+</template>
+<script>
+    import DndList from 'components/twoDndList'
+
+    export default {
+      components: { DndList },
+      data() {
+        return {
+          list1: [],
+          list2: []
+        }
+      },
+      methods: {
+
+      }
+    };
+</script>
+
+

src/views/components/jsoneditor.vue

+<template>
+  <div class="components-container" style='height:100vh'>
+    <code>有校验</code>
+    <div class="editor-container">
+      <json-editor ref="jsonEditor" v-model="value"></json-editor>
+    </div>
+  </div>
+</template>
+<script>
+    import jsonEditor from 'components/jsonEditor';
+    const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]';
+    export default {
+      components: { jsonEditor },
+      data() {
+        return {
+          value: JSON.parse(jsonData)
+        }
+      }
+    };
+</script>
+
+<style scoped>
+.editor-container{
+    position: relative;
+    height: 100%;
+}
+</style>
+

src/views/dashboard/default/index.vue

@@ -19,13 +19,12 @@
 <script>
     import { mapGetters } from 'vuex';
     import PanThumb from 'components/PanThumb';
-    import emptyGif from 'assets/gifs/business_fella.gif';
     export default {
       name: 'dashboard-default',
       components: { PanThumb },
       data() {
         return {
-          emptyGif
+          emptyGif: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3'
         }
       },
       computed: {

src/views/error/401.vue

@@ -27,12 +27,12 @@
 </template>
 <script>
     import errGif from 'assets/401.gif';
-    import ewizardClap from 'assets/gifs/wizard_clap.gif';
+
     export default {
       data() {
         return {
           errGif: errGif + '?' + +new Date(),
-          ewizardClap,
+          ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
           dialogVisible: false
         }
       },