add view

Author: PanJiaChen

src/assets/iconfont/iconfont.js

@@ -1,6 +1,12 @@
 ;(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

@@ -0,0 +1,149 @@
+<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

@@ -1,8 +1,6 @@
 <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

@@ -1,25 +1,27 @@
 @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;
 }
 
 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{
-      background: #eef1f6;
-          padding: 20px 10px;
-    margin-bottom: 20px;
-        display: block;
+.editor-container .CodeMirror {
+  height: 100%!important;
 }
-.fade-enter-active, .fade-leave-active {
+
+code {
+  background: #eef1f6;
+  padding: 20px 10px;
+  margin-bottom: 20px;
+  display: block;
+}
+
+.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;