This commit is contained in:
Pan 2017-04-18 21:38:49 +08:00
parent d10370086e
commit 15a7d074d2
14 changed files with 385 additions and 94 deletions

View file

@ -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">' +
'' +

View file

@ -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>

View file

@ -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>

View file

@ -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' }
]
},

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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: {

View file

@ -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
}
},