From 89a4c3bda15b2e9b5671ea57fbe549f9cd24436d Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 19 Apr 2017 18:43:57 +0800
Subject: [PATCH] add
---
package.json | 1 +
src/api/article.js | 29 +++
src/components/Charts/keyboard.vue | 4 +-
src/components/Charts/keyboard2.vue | 4 +-
src/components/Charts/linemarker.vue | 219 +++++++++++++++++++++
src/components/Charts/mixchart.vue | 266 ++++++++++++++++++++++++++
src/components/ImageCropper/index.vue | 90 ++++++---
src/components/PanThumb/index.vue | 2 +-
src/main.js | 1 +
src/mock/index.js | 10 +
src/router/index.js | 27 ++-
src/views/charts/keyboard.vue | 9 +-
src/views/charts/keyboard2.vue | 9 +-
src/views/charts/line.vue | 26 +++
src/views/charts/markdown.vue | 22 ---
src/views/charts/mixchart.vue | 25 +++
src/views/charts/tinymce.vue | 28 ---
src/views/components/avatarUpload.vue | 42 ++++
src/views/excel/index.vue | 38 ++++
19 files changed, 754 insertions(+), 98 deletions(-)
create mode 100644 src/api/article.js
create mode 100644 src/components/Charts/linemarker.vue
create mode 100644 src/components/Charts/mixchart.vue
create mode 100644 src/mock/index.js
create mode 100644 src/views/charts/line.vue
delete mode 100644 src/views/charts/markdown.vue
create mode 100644 src/views/charts/mixchart.vue
delete mode 100644 src/views/charts/tinymce.vue
create mode 100644 src/views/components/avatarUpload.vue
create mode 100644 src/views/excel/index.vue
diff --git a/package.json b/package.json
index 16f9cb1..e7f159d 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"jquery": "3.1.1",
"js-cookie": "2.1.3",
"jsonlint": "1.6.2",
+ "mockjs": "^1.0.1-beta3",
"normalize.css": "3.0.2",
"nprogress": "0.2.0",
"showdown": "1.6.4",
diff --git a/src/api/article.js b/src/api/article.js
new file mode 100644
index 0000000..a359329
--- /dev/null
+++ b/src/api/article.js
@@ -0,0 +1,29 @@
+import fetch, { tpFetch } from 'utils/fetch';
+import { param } from 'utils';
+
+export function getList(query) {
+ return tpFetch({
+ url: '/article/list',
+ method: 'get'
+ });
+}
+export function upload(data) {
+ return tpFetch({
+ url: 'https://upload.qbox.me',
+ method: 'post',
+ data
+ });
+}
+
+
+/* 外部uri转七牛uri*/
+export function netUpload(token, net_url) {
+ const imgData = {
+ net_url
+ };
+ return fetch({
+ url: '/qiniu/upload/net/async',
+ method: 'post',
+ data: imgData
+ });
+}
diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue
index 2266a54..8b866d8 100644
--- a/src/components/Charts/keyboard.vue
+++ b/src/components/Charts/keyboard.vue
@@ -17,11 +17,11 @@
props: {
className: {
type: String,
- default: 'bar-percent-chart'
+ default: 'chart'
},
id: {
type: String,
- default: 'bar-percent-chart'
+ default: 'chart'
},
width: {
type: String,
diff --git a/src/components/Charts/keyboard2.vue b/src/components/Charts/keyboard2.vue
index 8ba5054..605d7c1 100644
--- a/src/components/Charts/keyboard2.vue
+++ b/src/components/Charts/keyboard2.vue
@@ -17,11 +17,11 @@
props: {
className: {
type: String,
- default: 'bar-percent-chart'
+ default: 'chart'
},
id: {
type: String,
- default: 'bar-percent-chart'
+ default: 'chart'
},
width: {
type: String,
diff --git a/src/components/Charts/linemarker.vue b/src/components/Charts/linemarker.vue
new file mode 100644
index 0000000..cbba78b
--- /dev/null
+++ b/src/components/Charts/linemarker.vue
@@ -0,0 +1,219 @@
+<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/line');
+ // 引入æç¤ºæ¡†å’Œæ ‡é¢˜ç»„ä»¶
+ require('echarts/lib/component/tooltip');
+ require('echarts/lib/component/title');
+ require('echarts/lib/component/legend');
+ export default {
+ name: 'barPercent',
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ id: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '200px'
+ },
+ height: {
+ type: String,
+ default: '200px'
+ }
+ },
+ data() {
+ return {};
+ },
+ mounted() {
+ this.initChart();
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(document.getElementById(this.id));
+
+ this.chart.setOption({
+ backgroundColor: '#394056',
+ title: {
+ text: '请求数',
+ textStyle: {
+ fontWeight: 'normal',
+ fontSize: 16,
+ color: '#F1F1F3'
+ },
+ left: '6%'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#57617B'
+ }
+ }
+ },
+ legend: {
+ icon: 'rect',
+ itemWidth: 14,
+ itemHeight: 5,
+ itemGap: 13,
+ data: ['移动', '电信', 'è”通'],
+ right: '4%',
+ textStyle: {
+ fontSize: 12,
+ color: '#F1F1F3'
+ }
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: '#57617B'
+ }
+ },
+ data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
+ }],
+ yAxis: [{
+ type: 'value',
+ name: 'å•ä½ï¼ˆ%）',
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#57617B'
+ }
+ },
+ axisLabel: {
+ margin: 10,
+ textStyle: {
+ fontSize: 14
+ }
+ },
+ splitLine: {
+ lineStyle: {
+ color: '#57617B'
+ }
+ }
+ }],
+ series: [{
+ name: '移动',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+ normal: {
+ width: 1
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(137, 189, 27, 0.3)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(137, 189, 27, 0)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ shadowBlur: 10
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'rgb(137,189,27)',
+ borderColor: 'rgba(137,189,2,0.27)',
+ borderWidth: 12
+
+ }
+ },
+ data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
+ }, {
+ name: '电信',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+ normal: {
+ width: 1
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 136, 212, 0.3)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 136, 212, 0)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ shadowBlur: 10
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'rgb(0,136,212)',
+ borderColor: 'rgba(0,136,212,0.2)',
+ borderWidth: 12
+
+ }
+ },
+ data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
+ }, {
+ name: 'è”通',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ showSymbol: false,
+ lineStyle: {
+ normal: {
+ width: 1
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(219, 50, 51, 0.3)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(219, 50, 51, 0)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ shadowBlur: 10
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: 'rgb(219,50,51)',
+ borderColor: 'rgba(219,50,51,0.2)',
+ borderWidth: 12
+ }
+ },
+ data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
+ }]
+ })
+ }
+ }
+ }
+</script>
diff --git a/src/components/Charts/mixchart.vue b/src/components/Charts/mixchart.vue
new file mode 100644
index 0000000..c7c9fe5
--- /dev/null
+++ b/src/components/Charts/mixchart.vue
@@ -0,0 +1,266 @@
+<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/legend');
+ require('echarts/lib/component/dataZoom');
+ export default {
+ name: 'barPercent',
+ props: {
+ className: {
+ type: String,
+ default: 'chart'
+ },
+ id: {
+ type: String,
+ default: 'chart'
+ },
+ width: {
+ type: String,
+ default: '200px'
+ },
+ height: {
+ type: String,
+ default: '200px'
+ }
+ },
+ data() {
+ return {};
+ },
+ mounted() {
+ this.initChart();
+ },
+ methods: {
+ initChart() {
+ this.chart = echarts.init(document.getElementById(this.id));
+ const xData = (function() {
+ const data = [];
+ for (let i = 1; i < 13; i++) {
+ data.push(i + '月份');
+ }
+ return data;
+ }());
+ this.chart.setOption({
+ backgroundColor: '#344b58',
+ title: {
+ text: '统计',
+ subtext: 'from http://gallery.echartsjs.com',
+ x: '4%',
+ textStyle: {
+ color: '#fff',
+ fontSize: '22'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ grid: {
+ borderWidth: 0,
+ top: 110,
+ bottom: 95,
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ legend: {
+ x: '15%',
+ top: '10%',
+ textStyle: {
+ color: '#90979c'
+ },
+ data: ['女', 'ç”·', 'å¹³å‡']
+ },
+ calculable: true,
+ xAxis: [{
+ type: 'category',
+ axisLine: {
+ lineStyle: {
+ color: '#90979c'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ splitArea: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0
+
+ },
+ data: xData
+ }],
+ yAxis: [{
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#90979c'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0
+ },
+ splitArea: {
+ show: false
+ }
+ }],
+ dataZoom: [{
+ show: true,
+ height: 30,
+ xAxisIndex: [
+ 0
+ ],
+ bottom: 30,
+ start: 10,
+ end: 80,
+ handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+ handleSize: '110%',
+ handleStyle: {
+ color: '#d3dee5'
+
+ },
+ textStyle: {
+ color: '#fff' },
+ borderColor: '#90979c'
+
+
+ }, {
+ type: 'inside',
+ show: true,
+ height: 15,
+ start: 1,
+ end: 35
+ }],
+ series: [{
+ name: '女',
+ type: 'bar',
+ stack: '总é‡',
+ barMaxWidth: 35,
+ barGap: '10%',
+ itemStyle: {
+ normal: {
+ color: 'rgba(255,144,128,1)',
+ label: {
+ show: true,
+ textStyle: {
+ color: '#fff'
+ },
+ position: 'insideTop',
+ formatter(p) {
+ return p.value > 0 ? p.value : '';
+ }
+ }
+ }
+ },
+ data: [
+ 709,
+ 1917,
+ 2455,
+ 2610,
+ 1719,
+ 1433,
+ 1544,
+ 3285,
+ 5208,
+ 3372,
+ 2484,
+ 4078
+ ]
+ },
+
+ {
+ name: 'ç”·',
+ type: 'bar',
+ stack: '总é‡',
+ itemStyle: {
+ normal: {
+ color: 'rgba(0,191,183,1)',
+ barBorderRadius: 0,
+ label: {
+ show: true,
+ position: 'top',
+ formatter(p) {
+ return p.value > 0 ? p.value : '';
+ }
+ }
+ }
+ },
+ data: [
+ 327,
+ 1776,
+ 507,
+ 1200,
+ 800,
+ 482,
+ 204,
+ 1390,
+ 1001,
+ 951,
+ 381,
+ 220
+ ]
+ }, {
+ name: 'å¹³å‡',
+ type: 'line',
+ stack: '总é‡',
+ symbolSize: 10,
+ symbol: 'circle',
+ itemStyle: {
+ normal: {
+ color: 'rgba(252,230,48,1)',
+ barBorderRadius: 0,
+ label: {
+ show: true,
+ position: 'top',
+ formatter(p) {
+ return p.value > 0 ? p.value : '';
+ }
+ }
+ }
+ },
+ data: [
+ 1036,
+ 3693,
+ 2962,
+ 3810,
+ 2519,
+ 1915,
+ 1748,
+ 4675,
+ 6209,
+ 4323,
+ 2865,
+ 4298
+ ]
+ }
+ ]
+ })
+ }
+ }
+ }
+</script>
diff --git a/src/components/ImageCropper/index.vue b/src/components/ImageCropper/index.vue
index d0e94ab..1e60a5d 100644
--- a/src/components/ImageCropper/index.vue
+++ b/src/components/ImageCropper/index.vue
@@ -104,7 +104,6 @@
<script>
/* eslint-disable */
- import {getToken, upload} from 'api/qiniu';
import {effectRipple, data2blob} from './utils';
import langBag from './lang';
const mimes = {
@@ -639,33 +638,74 @@
},
// ä¸Šä¼ å›¾ç‰‡
upload() {
- let that = this,
- {
- lang,
- mime,
- createImgUrl
- } = this,
- formData = new FormData();
- // ä¸Šä¼ æ–‡ä»¶
- that.loading = 1;
- that.progress = 0;
- that.setStep(3);
- formData.append('file', data2blob(createImgUrl, mime));
- const token = this.$store.getters.token;
- getToken(token).then((response)=> {
- const url = response.data.qiniu_url;
- formData.append('token', response.data.qiniu_token);
- formData.append('key', response.data.qiniu_key);
- upload(formData).then((response)=> {
- that.loading = 2;
- that.$emit('crop-upload-success', url);
- }).catch(err => {
+ let that = this,
+ {
+ lang,
+ imgFormat,
+ mime,
+ url,
+ params,
+ headers,
+ field,
+ ki,
+ createImgUrl
+ } = this,
+ fmData = new FormData();
+ fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);
+ // æ·»åŠ å…¶ä»–å‚æ•°
+ if (typeof params == 'object' && params) {
+ Object.keys(params).forEach((k) => {
+ fmData.append(k, params[k]);
+ })
+ }
+ // 监å¬è¿›åº¦å›žè°ƒ
+ const uploadProgress = function(event) {
+ if (event.lengthComputable) {
+ that.progress = 100 * Math.round(event.loaded) / event.total;
+ }
+ };
+ // ä¸Šä¼ æ–‡ä»¶
+ that.reset();
+ that.loading = 1;
+ that.setStep(3);
+ that.$emit('crop-success', createImgUrl, field, ki);
+ new Promise(function(resolve, reject) {
+ let client = new XMLHttpRequest();
+ client.open('POST', url, true);
+ client.onreadystatechange = function() {
+ if (this.readyState !== 4) {
+ return;
+ }
+ if (this.status === 200) {
+ resolve(JSON.parse(this.responseText));
+ } else {
+ reject(this.status);
+ }
+ };
+ client.upload.addEventListener("progress", uploadProgress, false); //监å¬è¿›åº¦
+ // 设置header
+ if (typeof headers == 'object' && headers) {
+ Object.keys(headers).forEach((k) => {
+ client.setRequestHeader(k, headers[k]);
+ })
+ }
+ client.send(fmData);
+ }).then(
+ // ä¸Šä¼ æˆåŠŸ
+ function(resData) {
+ that.loading = 2;
+ that.$emit('crop-upload-success', url);
+ },
+ // ä¸Šä¼ å¤±è´¥
+ function(sts) {
+ if (that.value) {
that.loading = 3;
that.hasError = true;
that.errorMsg = lang.fail;
- that.$emit('crop-upload-fail');
- });
- });
+ that.$emit('crop-upload-fail', sts, field, ki);
+ }
+ }
+ );
}
}
}
diff --git a/src/components/PanThumb/index.vue b/src/components/PanThumb/index.vue
index 69a832b..be63aff 100644
--- a/src/components/PanThumb/index.vue
+++ b/src/components/PanThumb/index.vue
@@ -5,7 +5,7 @@
<slot>pan</slot>
</div>
</div>
- <div class="pan-thumb" :style="{ backgroundImage: 'url('+ image+')' }"></div>
+ <img class="pan-thumb" :src="image">
</div>
</template>
<script>
diff --git a/src/main.js b/src/main.js
index b47697f..846ca00 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,6 +20,7 @@ import 'vue-multiselect/dist/vue-multiselect.min.css';
import vueWaves from './directive/waves';
import vueSticky from './directive/sticky';
import errLog from 'store/errLog';
+import './mock/index.js';
// import './styles/mixin.scss';
// register globally
diff --git a/src/mock/index.js b/src/mock/index.js
new file mode 100644
index 0000000..d19419c
--- /dev/null
+++ b/src/mock/index.js
@@ -0,0 +1,10 @@
+import Mock from 'mockjs';
+Mock.mock(/\/article\/list/, {
+ 'data|20': [{
+ id: '@id',
+ content: '@cparagraph',
+ time: '@datetime'
+ }]
+})
+
+export default Mock;
diff --git a/src/router/index.js b/src/router/index.js
index 2e5bd97..920ed64 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,11 +19,17 @@ 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);
+const JsonEditor = resolve => require(['../views/components/jsoneditor'], resolve);
+const AvatarUpload = resolve => require(['../views/components/avatarupload'], resolve);
/* charts*/
const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], resolve);
+const LineMarker = resolve => require(['../views/charts/line'], resolve);
+const MixChart = resolve => require(['../views/charts/mixchart'], resolve);
+
+/* excel*/
+const ExcelDownload = resolve => require(['../views/excel/index'], resolve);
/* admin*/
@@ -66,7 +72,8 @@ export default new Router({
children: [
{ path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
{ path: 'markdown', component: Markdown, name: 'Markdown' },
- { path: 'jsoneditor', component: Jsoneditor, name: 'json编辑器' }
+ { path: 'jsoneditor', component: JsonEditor, name: 'json编辑器' },
+ { path: 'avatarupload', component: AvatarUpload, name: '头åƒä¸Šä¼ ' }
]
},
@@ -78,8 +85,20 @@ export default new Router({
icon: 'tubiaoleixingzhengchang',
children: [
{ path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
- { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' }
-
+ { path: 'keyboard2', component: KeyboardChart2, name: '键盘图表2' },
+ { path: 'line', component: LineMarker, name: '折线图' },
+ { path: 'mixchart', component: MixChart, name: 'æ··åˆå›¾è¡¨' }
+ ]
+ },
+ {
+ path: '/excel',
+ component: Layout,
+ redirect: 'noredirect',
+ name: 'excel',
+ icon: 'tubiaoleixingzhengchang',
+ noDropdown: true,
+ children: [
+ { path: 'download', component: ExcelDownload, name: '导出excel' }
]
},
// {
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index c5dd06e..f0d066c 100644
--- a/src/views/charts/keyboard.vue
+++ b/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>
diff --git a/src/views/charts/keyboard2.vue b/src/views/charts/keyboard2.vue
index f459ac7..d46c358 100644
--- a/src/views/charts/keyboard2.vue
+++ b/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>
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
new file mode 100644
index 0000000..5992c50
--- /dev/null
+++ b/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>
+
diff --git a/src/views/charts/markdown.vue b/src/views/charts/markdown.vue
deleted file mode 100644
index 3bf5e1a..0000000
--- a/src/views/charts/markdown.vue
+++ /dev/null
@@ -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>
-
-
diff --git a/src/views/charts/mixchart.vue b/src/views/charts/mixchart.vue
new file mode 100644
index 0000000..8b2afd0
--- /dev/null
+++ b/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>
+
diff --git a/src/views/charts/tinymce.vue b/src/views/charts/tinymce.vue
deleted file mode 100644
index a88bd91..0000000
--- a/src/views/charts/tinymce.vue
+++ /dev/null
@@ -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>
-
-
diff --git a/src/views/components/avatarUpload.vue b/src/views/components/avatarUpload.vue
new file mode 100644
index 0000000..a41558a
--- /dev/null
+++ b/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>
+
diff --git a/src/views/excel/index.vue b/src/views/excel/index.vue
new file mode 100644
index 0000000..6c18a78
--- /dev/null
+++ b/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>
--
2.21.0