add
This commit is contained in:
Pan
parent
15a7d074d2
commit
89a4c3bda1
|
|
@ -21,6 +21,7 @@
|
||||||
"jquery": "3.1.1",
|
"jquery": "3.1.1",
|
||||||
"js-cookie": "2.1.3",
|
"js-cookie": "2.1.3",
|
||||||
"jsonlint": "1.6.2",
|
"jsonlint": "1.6.2",
|
||||||
|
"mockjs": "^1.0.1-beta3",
|
||||||
"normalize.css": "3.0.2",
|
"normalize.css": "3.0.2",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"showdown": "1.6.4",
|
"showdown": "1.6.4",
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -17,11 +17,11 @@
|
||||||
props: {
|
props: {
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bar-percent-chart'
|
default: 'chart'
|
||||||
},
|
},
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bar-percent-chart'
|
default: 'chart'
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
|
||||||
|
|
@ -17,11 +17,11 @@
|
||||||
props: {
|
props: {
|
||||||
className: {
|
className: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bar-percent-chart'
|
default: 'chart'
|
||||||
},
|
},
|
||||||
id: {
|
id: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'bar-percent-chart'
|
default: 'chart'
|
||||||
},
|
},
|
||||||
width: {
|
width: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -104,7 +104,6 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
/* eslint-disable */
|
/* eslint-disable */
|
||||||
import {getToken, upload} from 'api/qiniu';
|
|
||||||
import {effectRipple, data2blob} from './utils';
|
import {effectRipple, data2blob} from './utils';
|
||||||
import langBag from './lang';
|
import langBag from './lang';
|
||||||
const mimes = {
|
const mimes = {
|
||||||
|
|
@ -642,30 +641,71 @@
|
||||||
let that = this,
|
let that = this,
|
||||||
{
|
{
|
||||||
lang,
|
lang,
|
||||||
|
imgFormat,
|
||||||
mime,
|
mime,
|
||||||
|
url,
|
||||||
|
params,
|
||||||
|
headers,
|
||||||
|
field,
|
||||||
|
ki,
|
||||||
createImgUrl
|
createImgUrl
|
||||||
} = this,
|
} = this,
|
||||||
formData = new FormData();
|
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.loading = 1;
|
||||||
that.progress = 0;
|
|
||||||
that.setStep(3);
|
that.setStep(3);
|
||||||
formData.append('file', data2blob(createImgUrl, mime));
|
that.$emit('crop-success', createImgUrl, field, ki);
|
||||||
const token = this.$store.getters.token;
|
new Promise(function(resolve, reject) {
|
||||||
getToken(token).then((response)=> {
|
let client = new XMLHttpRequest();
|
||||||
const url = response.data.qiniu_url;
|
client.open('POST', url, true);
|
||||||
formData.append('token', response.data.qiniu_token);
|
client.onreadystatechange = function() {
|
||||||
formData.append('key', response.data.qiniu_key);
|
if (this.readyState !== 4) {
|
||||||
upload(formData).then((response)=> {
|
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.loading = 2;
|
||||||
that.$emit('crop-upload-success', url);
|
that.$emit('crop-upload-success', url);
|
||||||
}).catch(err => {
|
},
|
||||||
|
// 上传失败
|
||||||
|
function(sts) {
|
||||||
|
if (that.value) {
|
||||||
that.loading = 3;
|
that.loading = 3;
|
||||||
that.hasError = true;
|
that.hasError = true;
|
||||||
that.errorMsg = lang.fail;
|
that.errorMsg = lang.fail;
|
||||||
that.$emit('crop-upload-fail');
|
that.$emit('crop-upload-fail', sts, field, ki);
|
||||||
});
|
}
|
||||||
});
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<slot>pan</slot>
|
<slot>pan</slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pan-thumb" :style="{ backgroundImage: 'url('+ image+')' }"></div>
|
<img class="pan-thumb" :src="image">
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,7 @@ import 'vue-multiselect/dist/vue-multiselect.min.css';
|
||||||
import vueWaves from './directive/waves';
|
import vueWaves from './directive/waves';
|
||||||
import vueSticky from './directive/sticky';
|
import vueSticky from './directive/sticky';
|
||||||
import errLog from 'store/errLog';
|
import errLog from 'store/errLog';
|
||||||
|
import './mock/index.js';
|
||||||
// import './styles/mixin.scss';
|
// import './styles/mixin.scss';
|
||||||
|
|
||||||
// register globally
|
// register globally
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,10 @@
|
||||||
|
import Mock from 'mockjs';
|
||||||
|
Mock.mock(/\/article\/list/, {
|
||||||
|
'data|20': [{
|
||||||
|
id: '@id',
|
||||||
|
content: '@cparagraph',
|
||||||
|
time: '@datetime'
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
|
||||||
|
export default Mock;
|
||||||
|
|
@ -19,11 +19,17 @@ import reset from '../views/login/reset';
|
||||||
/* components*/
|
/* components*/
|
||||||
const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
|
const Tinymce = resolve => require(['../views/components/tinymce'], resolve);
|
||||||
const Markdown = resolve => require(['../views/components/markdown'], 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*/
|
/* charts*/
|
||||||
const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
|
const KeyboardChart = resolve => require(['../views/charts/keyboard'], resolve);
|
||||||
const KeyboardChart2 = resolve => require(['../views/charts/keyboard2'], 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*/
|
/* admin*/
|
||||||
|
|
@ -66,7 +72,8 @@ export default new Router({
|
||||||
children: [
|
children: [
|
||||||
{ path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
|
{ path: 'tinymce', component: Tinymce, name: '富文本编辑器' },
|
||||||
{ path: 'markdown', component: Markdown, name: 'Markdown' },
|
{ 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',
|
icon: 'tubiaoleixingzhengchang',
|
||||||
children: [
|
children: [
|
||||||
{ path: 'keyboard', component: KeyboardChart, name: '键盘图表' },
|
{ 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' }
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,7 @@
|
||||||
import keyboardChart from 'components/Charts/keyboard';
|
import keyboardChart from 'components/Charts/keyboard';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { keyboardChart },
|
components: { keyboardChart }
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -23,7 +18,7 @@
|
||||||
.chart-container{
|
.chart-container{
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,7 @@
|
||||||
import keyboardChart2 from 'components/Charts/keyboard2';
|
import keyboardChart2 from 'components/Charts/keyboard2';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { keyboardChart2 },
|
components: { keyboardChart2 }
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -23,7 +18,7 @@
|
||||||
.chart-container{
|
.chart-container{
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 90%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue