From 15a7d074d2fdc0aa085497518da794532f41020b Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 18 Apr 2017 21:38:49 +0800
Subject: [PATCH] add view

---
 src/assets/iconfont/iconfont.js       |   6 ++
 src/components/Charts/keyboard2.vue   | 149 ++++++++++++++++++++++++++
 src/components/Hamburger/index.vue    |   4 +-
 src/router/index.js                   |  23 +++-
 src/styles/index.scss                 |  64 ++++++-----
 src/views/charts/keyboard.vue         |  29 +++++
 src/views/charts/keyboard2.vue        |  29 +++++
 src/views/charts/markdown.vue         |  22 ++++
 src/views/charts/tinymce.vue          |  28 +++++
 src/views/components/404.vue          |  61 -----------
 src/views/components/dndlist.vue      |  29 +++++
 src/views/components/jsoneditor.vue   |  28 +++++
 src/views/dashboard/default/index.vue |   3 +-
 src/views/error/401.vue               |   4 +-
 14 files changed, 385 insertions(+), 94 deletions(-)
 create mode 100644 src/components/Charts/keyboard2.vue
 create mode 100644 src/views/charts/keyboard.vue
 create mode 100644 src/views/charts/keyboard2.vue
 create mode 100644 src/views/charts/markdown.vue
 create mode 100644 src/views/charts/tinymce.vue
 delete mode 100644 src/views/components/404.vue
 create mode 100644 src/views/components/dndlist.vue
 create mode 100644 src/views/components/jsoneditor.vue

diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js
index b3394628..67079a93 100644
--- a/src/assets/iconfont/iconfont.js
+++ b/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">' +
     '' +
diff --git a/src/components/Charts/keyboard2.vue b/src/components/Charts/keyboard2.vue
new file mode 100644
index 00000000..8ba50545
--- /dev/null
+++ b/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>
diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue
index 5361dd51..fc330374 100644
--- a/src/components/Hamburger/index.vue
+++ b/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>
 
diff --git a/src/router/index.js b/src/router/index.js
index 0768f3c4..2e5bd97d 100644
--- a/src/router/index.js
+++ b/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' }
 
       ]
     },
diff --git a/src/styles/index.scss b/src/styles/index.scss
index c6beb1d3..d04b5dff 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,17 +1,17 @@
 @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{
-      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;
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
new file mode 100644
index 00000000..c5dd06e8
--- /dev/null
+++ b/src/views/charts/keyboard.vue
@@ -0,0 +1,29 @@
+<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>
+
diff --git a/src/views/charts/keyboard2.vue b/src/views/charts/keyboard2.vue
new file mode 100644
index 00000000..f459ac7b
--- /dev/null
+++ b/src/views/charts/keyboard2.vue
@@ -0,0 +1,29 @@
+<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>
+
diff --git a/src/views/charts/markdown.vue b/src/views/charts/markdown.vue
new file mode 100644
index 00000000..3bf5e1ac
--- /dev/null
+++ b/src/views/charts/markdown.vue
@@ -0,0 +1,22 @@
+<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>
+
+
diff --git a/src/views/charts/tinymce.vue b/src/views/charts/tinymce.vue
new file mode 100644
index 00000000..a88bd91c
--- /dev/null
+++ b/src/views/charts/tinymce.vue
@@ -0,0 +1,28 @@
+<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>
+
+
diff --git a/src/views/components/404.vue b/src/views/components/404.vue
deleted file mode 100644
index d2b3ce3c..00000000
--- a/src/views/components/404.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<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>
diff --git a/src/views/components/dndlist.vue b/src/views/components/dndlist.vue
new file mode 100644
index 00000000..bc84361d
--- /dev/null
+++ b/src/views/components/dndlist.vue
@@ -0,0 +1,29 @@
+<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>
+
+
diff --git a/src/views/components/jsoneditor.vue b/src/views/components/jsoneditor.vue
new file mode 100644
index 00000000..ca8142a5
--- /dev/null
+++ b/src/views/components/jsoneditor.vue
@@ -0,0 +1,28 @@
+<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>
+
diff --git a/src/views/dashboard/default/index.vue b/src/views/dashboard/default/index.vue
index 745afa99..97b05fa6 100644
--- a/src/views/dashboard/default/index.vue
+++ b/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: {
diff --git a/src/views/error/401.vue b/src/views/error/401.vue
index a1fe9bc1..3e95fa6f 100644
--- a/src/views/error/401.vue
+++ b/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
         }
       },