Skip to content

V
VueElementTemplate
Commit 89a4c3bd authored by Pan's avatar Pan
Browse files
Options

add

parent 15a7d074
Hide whitespace changes
Inline Side-by-side
Showing with 754 additions and 98 deletions
package.json
View file @ 89a4c3bd
...@@ -21,6 +21,7 @@ ...@@ -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",
......
src/api/article.js 0 → 100644
View file @ 89a4c3bd
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
});
}
src/components/Charts/keyboard.vue
View file @ 89a4c3bd
...@@ -17,11 +17,11 @@ ...@@ -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,
......
src/components/Charts/keyboard2.vue
View file @ 89a4c3bd
...@@ -17,11 +17,11 @@ ...@@ -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,
......
src/components/Charts/linemarker.vue 0 → 100644
View file @ 89a4c3bd
<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>
src/components/Charts/mixchart.vue 0 → 100644
View file @ 89a4c3bd
<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>
src/components/ImageCropper/index.vue
View file @ 89a4c3bd
...@@ -104,7 +104,6 @@ ...@@ -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 = {
...@@ -639,33 +638,74 @@ ...@@ -639,33 +638,74 @@
}, },
// 上传图片 // 上传图片
upload() { upload() {
let that = this, let that = this,
{ {
lang, lang,
mime, imgFormat,
createImgUrl mime,
} = this, url,
formData = new FormData(); params,
// 上传文件 headers,
that.loading = 1; field,
that.progress = 0; ki,
that.setStep(3); createImgUrl
formData.append('file', data2blob(createImgUrl, mime)); } = this,
const token = this.$store.getters.token; fmData = new FormData();
getToken(token).then((response)=> { fmData.append(field, data2blob(createImgUrl, mime), field + '.' + imgFormat);
const url = response.data.qiniu_url; // 添加其他参数
formData.append('token', response.data.qiniu_token); if (typeof params == 'object' && params) {
formData.append('key', response.data.qiniu_key); Object.keys(params).forEach((k) => {
upload(formData).then((response)=> { fmData.append(k, params[k]);
that.loading = 2; })
that.$emit('crop-upload-success', url); }
}).catch(err => { // 监听进度回调
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.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);
}); }
}); }
);
} }
} }
} }
......
src/components/PanThumb/index.vue
View file @ 89a4c3bd
...@@ -5,7 +5,7 @@ ...@@ -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>
......
src/main.js
View file @ 89a4c3bd
...@@ -20,6 +20,7 @@ import 'vue-multiselect/dist/vue-multiselect.min.css'; ...@@ -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
......
src/mock/index.js 0 → 100644
View file @ 89a4c3bd
import Mock from 'mockjs';
Mock.mock(/\/article\/list/, {
'data|20': [{
id: '@id',
content: '@cparagraph',
time: '@datetime'
}]
})
export default Mock;
src/router/index.js
View file @ 89a4c3bd
...@@ -19,11 +19,17 @@ import reset from '../views/login/reset'; ...@@ -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({ ...@@ -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({ ...@@ -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' }
] ]
}, },
// { // {
......
src/views/charts/keyboard.vue
View file @ 89a4c3bd
...@@ -10,12 +10,7 @@ ...@@ -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 @@ ...@@ -23,7 +18,7 @@
.chart-container{ .chart-container{
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 90%;
} }
</style> </style>
src/views/charts/keyboard2.vue
View file @ 89a4c3bd
...@@ -10,12 +10,7 @@ ...@@ -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 @@ ...@@ -23,7 +18,7 @@
.chart-container{ .chart-container{
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 90%;
} }
</style> </style>
src/views/charts/line.vue 0 → 100644
View file @ 89a4c3bd
<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 deleted 100644 → 0
View file @ 15a7d074
<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 → 100644
View file @ 89a4c3bd
<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 deleted 100644 → 0
View file @ 15a7d074
<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 → 100644
View file @ 89a4c3bd
<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 → 100644
View file @ 89a4c3bd
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment