add

src/views/charts/keyboard.vue

@@ -10,12 +10,7 @@
     import keyboardChart from 'components/Charts/keyboard';
 
     export default {
-      components: { keyboardChart },
-      data() {
-        return {
-
-        }
-      }
+      components: { keyboardChart }
     };
 </script>
 
@@ -23,7 +18,7 @@
 .chart-container{
     position: relative;
     width: 100%;
-    height: 100%;
+    height: 90%;
 }
 </style>
 

src/views/charts/keyboard2.vue

@@ -10,12 +10,7 @@
     import keyboardChart2 from 'components/Charts/keyboard2';
 
     export default {
-      components: { keyboardChart2 },
-      data() {
-        return {
-
-        }
-      }
+      components: { keyboardChart2 }
     };
 </script>
 
@@ -23,7 +18,7 @@
 .chart-container{
     position: relative;
     width: 100%;
-    height: 100%;
+    height: 90%;
 }
 </style>
 

src/views/charts/line.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    https://github.com/ecomfe/echarts/blob/master/index.js
+    http://echarts.baidu.com/tutorial.html
+    <div class='chart-container'>
+       <lineMarker height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import lineMarker from 'components/Charts/lineMarker';
+
+    export default {
+      components: { lineMarker }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 80%;
+}
+</style>
+

src/views/charts/markdown.vue

@@ -1,22 +0,0 @@
-<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/mixchart.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    <div class='chart-container'>
+       <mixchart id='apple' height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import mixchart from 'components/Charts/mixchart';
+
+    export default {
+      components: { mixchart }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 90%;
+    padding-bottom: 40px;
+}
+</style>
+

src/views/charts/tinymce.vue

@@ -1,28 +0,0 @@
-<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/avatarUpload.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="components-container">
+    <code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'>vue-image-crop-upload</a>
+    由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
+    </code>
+
+    <PanThumb image='https://wpimg.wallstcn.com/577965b9-bb9e-4e02-9f0c-095b41417191'>
+    </PanThumb>
+    <el-button type="primary" icon="upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">修改头像
+    </el-button>
+
+    <ImageCropper :width="300" :height="300" url="https://httpbin.org/post" @crop-upload-success="cropSuccess" :key="imagecropperKey"
+      v-show="imagecropperShow" />
+  </div>
+</template>
+<script>
+    import ImageCropper from 'components/ImageCropper';
+    import PanThumb from 'components/PanThumb';
+    export default {
+      components: { ImageCropper, PanThumb },
+      data() {
+        return {
+          imagecropperShow: false,
+          imagecropperKey: 0
+        }
+      },
+      methods: {
+        cropSuccess() {
+          this.imagecropperShow = false;
+          this.imagecropperKey = this.imagecropperKey + 1;
+        }
+      }
+    };
+</script>
+<style scoped>
+.avatar{
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+}
+</style>
+

src/views/excel/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="errPage-container">
+    aaa
+  </div>
+</template>
+<script>
+import { getList } from 'api/article'
+export default {
+  data() {
+    return {
+      list: null,
+      total: null,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        area: undefined,
+        department: undefined
+      }
+    }
+  },
+  created() {
+    this.fetchData();
+  },
+  methods: {
+    fetchData() {
+      this.listLoading = true;
+      getList(this.listQuery).then(response => {
+        console.log(response)
+        const data = response.data;
+        this.list = data.items;
+        this.total = data.item_count;
+        this.listLoading = false;
+      })
+    }
+  }
+};
+</script>