console
new Vue({
el: '#app',
data() {
return {
key: '',
baseList: baseList,
menuFlag: true,
dialogVisible: false,
CodeMirrorEditor: {},
gradeFlag: false,
relaod: true,
form: {},
dicOption: dicOption,
tableOption: tableOption,
colorOption: colorOption,
config: {
name: 'avuex数据大屏',
width: 1920,
height: 1080,
scale: 1,
backgroundImage: 'https://sugar.bce.baidu.com/static/img-templet/background-2.png',
gradeShow: false,
gradeLen: 30,
},
active: -1,
list: list
}
},
computed: {
zIndexList: {
set(val) {
const leng = val.length;
val.forEach((ele, index) => {
const zIndex = leng - index;
this.$set(this.list[ele.index], 'zIndex', zIndex)
})
},
get() {
let list = [];
list = this.list.map(ele => {
return {
index: ele.index,
title: ele.title,
zIndex: ele.zIndex
}
})
list.sort(compare("zIndex"));
return list;
}
},
listLen() {
return this.list.length || 0;
},
activeComponent() {
return this.activeObj.component || {}
},
activeKey() {
if (this.activeComponent.name === 'table') {
return this.activeComponent.option.column
} else if (['bar', 'line', 'pie'].includes(this.activeComponent.name)) {
return this.activeComponent.option.barColor
}
},
activeObj() {
return this.list[this.active] || {}
},
styleName() {
const scale = this.config.scale;
return {
transform: `scale(${scale / 100}, ${scale / 100})`,
background: `url(${this.config.backgroundImage}) 0% 0% / 100% 100% rgb(3, 12, 59)`,
width: this.setPx(this.config.width),
height: this.setPx(this.config.height)
}
},
gradeLenStyle() {
return {
backgroundSize: `${this.setPx(this.config.gradeLen)} ${this.setPx(this.config.gradeLen)},${this.setPx(this.config.gradeLen)} ${this.setPx(this.config.gradeLen)}`
}
}
},
created() {
this.initData();
},
mounted() {
this.setResize();
},
watch: {
menuFlag(val) {
this.$nextTick(() => {
this.setResize();
})
},
active(val) {
this.list.forEach((ele, index) => {
if (this.$refs['item_' + index]) {
if (index === val) {
this.$refs['item_' + index][0].setActive(true)
} else {
this.$refs['item_' + index][0].setActive(false)
}
}
});
},
},
methods: {
initData() {
this.list.forEach((ele, index) => {
this.$set(this.list, index, Object.assign(ele, {
index,
zIndex: (this.listLen - 1) - index
}));
})
},
setResize() {
this.config.scale = (this.$refs.wrapper.offsetWidth / this.config.width) * 100
},
formatTooltip(val) {
return parseInt(val);
},
handleMouseDown() {
this.active = -1;
},
handleChange(index) {
this.active = index;
},
handleFocus() {
this.gradeFlag = true;
},
handleBlur() {
this.gradeFlag = false;
},
handleDel(index, zIndex) {
const obj = this.list[index]
this.$confirm(`是否删除<<${obj.name}>>图层?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.active = -1;
this.list.splice(index, 1);
this.relaod = false;
this.$nextTick(() => {
this.relaod = true;
})
}).catch(() => {
});
},
handleCopy(index, zIndex) {
const obj = this.list[index]
this.$confirm(`是否复制<<${obj.name}>>图层?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.addCompoment(obj);
}).catch(() => {
});
},
handleResize({ index, width, height }) {
const ele = this.list[index].component;
this.$set(ele, 'width', width)
this.$set(ele, 'height', height)
},
handlePostion({ index, left, top }) {
const ele = this.list[index];
this.$set(ele, 'left', left)
this.$set(ele, 'top', top)
},
rowSave(row, done) {
this.activeKey.push(row);
done()
},
rowDel(row, index) {
this.activeKey.splice(index, 1);
},
rowUpdate(row, index, done) {
this.activeKey.splice(index, 1, row);
done()
},
addCompoment(option) {
const obj = this.deepClone(option);
obj.left = 0;
obj.top = 0;
obj.zIndex = this.listLen;
obj.index = this.listLen;
this.list.push(obj);
},
handleView() {
this.menuFlag = false;
this.active = -1;
},
handleBuild() {
this.dialogVisible = true;
this.$nextTick(() => {
this.CodeMirrorEditor = CodeMirror.fromTextArea(this.$refs.code, {
lineNumbers: true,
mode: 'application/json',
gutters: ['CodeMirror-lint-markers'],
theme: 'rubyblue',
lint: true
});
this.CodeMirrorEditor.setValue(JSON.stringify(this.list, null, 2))
})
},
}
})
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>
</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"
/>
<link rel="stylesheet" href="https://avuex.avue.top/lib/index.css" />
<link rel="stylesheet" href="https://avuex.avue.top/cdn/codemirror/codemirror.css"
/>
<link rel="stylesheet" href="https://avuex.avue.top/cdn/codemirror/theme/rubyblue.css"
/>
<link rel="stylesheet" href="https://avuex.avue.top/cdn/codemirror/addon/lint/lint.css"
/>
<script src="https://avuex.avue.top/cdn/codemirror/codemirror.js">
</script>
<script src="https://avuex.avue.top/cdn/codemirror/addon/lint/lint.js">
</script>
<script src="https://avuex.avue.top/cdn/codemirror/mode/javascript/javascript.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/theme-chalk/index.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js">
</script>
<script src="https://avuex.avue.top/lib/avue.min.js">
</script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.19.2/vuedraggable.umd.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js">
</script>
<script src="https://avuex.avue.top/cdn/draggable/js/colorOption.js">
</script>
<script src="https://avuex.avue.top/cdn/draggable/js/listOption.js">
</script>
<script src="https://avuex.avue.top/cdn/draggable/js/dicOption.js">
</script>
<script src="https://avuex.avue.top/cdn/draggable/js/baseList.js">
</script>
<script src="https://avuex.avue.top/cdn/draggable/js/utils.js">
</script>
</head>
<body>
<div id="app">
<el-dialog title="复制代码" :visible.sync="dialogVisible">
<div class="json-editor">
<textarea ref="code" name="code"></textarea>
</div>
</el-dialog>
<el-menu mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<el-submenu :index="index+''" v-for="(item,index) in baseList" :key="index">
<template slot="title">{{item.label}}</template>
<el-menu-item @click="addCompoment(citem.option)" :key="cindex" :index=`${index}-${cindex}`
v-for="(citem,cindex) in item.children">{{citem.label}}</el-menu-item>
</el-submenu>
<el-menu-item index="6" @click="menuFlag=true" v-show="!menuFlag">还原</el-menu-item>
<el-menu-item index="7" @click="handleView" v-show="menuFlag">预览</el-menu-item>
<el-menu-item index="8" @click="handleBuild">生成数据</el-menu-item>
</el-menu>
<div class="app" :class="{'app--none':!menuFlag}">
<div class="menu" v-show="menuFlag">
<p class="title">图层</p>
<draggable v-model="zIndexList">
<div class="menu__item" :class="{'menu__item--active':item.index===active}" v-for="(item,index) in zIndexList"
:key="index" @click="active=item.index">
{{item.title}}
</div>
</draggable>
</div>
<div class="wrapper" ref="wrapper">
<div class="content">
<div class="container" :style="styleName" ref="container" @mousedown.stop.self="handleMouseDown">
<div class="grade" v-if="gradeFlag || config.gradeShow" :style="gradeLenStyle"></div>
<avue-draggable v-if="relaod" :disabled="!menuFlag" :ref="'item_'+index" :id="'item_'+index" :step="2"
@focus="handleFocus" @postion="handlePostion" :resize="item.resize" @resize="handleResize"
@blur="handleBlur" @change="handleChange" :index="index" :z-index="item.zIndex"
v-for="(item,index) in list" :width="item.component.width" :height="item.component.height" :key="index"
:top="item.top" :left="item.left">
<img v-if="['img'].includes(item.component.prop)" :src="item.data" draggable="false" />
<component :id="'component_'+index" :component="item.component" v-else
:is="'avue-echart-'+item.component.name" :component="item.component" :data="item.data"
:option="item.component.option" :url="item.url" :time="item.time" :data-Type="item.dataType">
</component>
<div slot-scope="scope" slot="menu">
<i class="el-icon-close" @click="handleDel(scope.index,scope.zIndex)"></i>
<i class="el-icon-document" @click="handleCopy(scope.index,scope.zIndex)"></i>
</div>
</avue-draggable>
</div>
</div>
</div>
<div class="menu params" v-show="menuFlag">
<p class="title">操作</p>
<el-form label-width="100px">
<template v-if="![undefined].includes(activeComponent.prop)">
<el-collapse>
<el-collapse-item title="数据设置" v-if="dicOption.dataList.includes(activeComponent.prop)">
<el-form-item label="数据类型">
<avue-radio v-model="activeObj.dataType" :dic="dicOption.dataType"></avue-radio>
</el-form-item>
<el-form-item label="数据值" v-if="activeObj.dataType===0">
<avue-input v-model="activeObj.data"></avue-input>
</el-form-item>
<template v-if="activeObj.dataType===1">
<el-form-item label="接口地址">
<avue-input v-model="activeObj.url"></avue-input>
</el-form-item>
<el-form-item label="刷新时间">
<avue-input-number v-model="activeObj.time"></avue-input-number>
</el-form-item>
</template>
</el-collapse-item>
</el-collapse>
<el-form-item label="图层名称">
<avue-input v-model="activeObj.name"></avue-input>
</el-form-item>
<template v-if="activeComponent.prop==='swiper'">
<el-form-item label="类型">
<avue-radio v-model="activeComponent.option.type" :dic="dicOption.swiperType"></avue-radio>
</el-form-item>
<el-form-item label="轮播时间">
<avue-input v-model="activeComponent.option.interval"></avue-input>
</el-form-item>
<el-form-item label="选择器">
<avue-radio v-model="activeComponent.option.indicator" :dic="dicOption.swiperIndicator"></avue-radio>
</el-form-item>
<el-form-item label="图片透明度">
<avue-silder v-model="activeComponent.option.opacity"></avue-silder>
</el-form-item>
</template>
<template v-if="activeComponent.prop==='text'">
<el-form-item label="文本内容">
<avue-input v-model="activeObj.data"></avue-input>
</el-form-item>
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.fontSize"></avue-silder>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="activeComponent.option.color"></avue-color>
</el-form-item>
<el-form-item label="字体背景">
<avue-color v-model="activeComponent.option.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="对齐方式">
<avue-select v-model="activeComponent.option.textAlign" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-collapse>
<el-collapse-item title="跑马灯设置">
<el-form-item label="开启">
<avue-switch v-model="activeComponent.option.scroll"></avue-switch>
</el-form-item>
<template v-if="activeComponent.option.scroll">
<el-form-item label="滚动速度">
<avue-input v-model="activeComponent.option.speed"></avue-input>
</el-form-item>
</template>
</el-collapse-item>
<el-collapse-item title="超链设置">
<el-form-item label="开启">
<avue-switch v-model="activeComponent.option.link"></avue-switch>
</el-form-item>
<template v-if="activeComponent.option.link">
<el-form-item label="打开方式">
<avue-radio v-model="activeComponent.option.linkTarget" :dic="dicOption.target"></avue-radio>
</el-form-item>
<el-form-item label="超链地址">
<avue-input v-model="activeComponent.option.linkHref"></avue-input>
</el-form-item>
</template>
</el-collapse-item>
</el-collapse>
</template>
<template v-else-if="activeComponent.prop==='datetime'">
<el-form-item label="时间格式">
<avue-select v-model="activeComponent.option.format" :dic="dicOption.format">
</avue-select>
</el-form-item>
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.fontSize" :max="200"></avue-silder>
</el-form-item>
<el-form-item label="字体背景">
<avue-color v-model="activeComponent.option.backgroundColor"></avue-color>
</el-form-item>
<el-form-item label="对其方式">
<avue-select v-model="activeComponent.option.textAlign" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="activeComponent.option.color"></avue-color>
</el-form-item>
</template>
<template v-else-if="activeComponent.prop==='img'">
<el-form-item label="缩略图">
<img :src="activeObj.data" alt="" width="100%" />
</el-form-item>
<el-form-item label="图片地址">
<avue-input v-model="activeObj.data"></avue-input>
</el-form-item>
</template>
<template v-else-if="activeComponent.prop==='progress'">
<el-form-item label="类型">
<avue-radio v-model="activeComponent.option.type" :dic="dicOption.line">
</avue-select>
</el-form-item>
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.fontSize" :max="200"></avue-silder>
</el-form-item>
<el-form-item label="边框大小">
<avue-silder v-model="activeComponent.option.strokeWidth" :max="50"></avue-silder>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="activeComponent.option.color"></avue-color>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="边框颜色">
<avue-color v-model="activeComponent.option.borderColor"></avue-color>
</el-form-item>
</template>
<template v-else-if="activeComponent.prop==='flop'">
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.fontSize" :max="200"></avue-silder>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="activeComponent.option.color"></avue-color>
</el-form-item>
<el-form-item label="字体间距">
<avue-silder v-model="activeComponent.option.split"></avue-silder>
</el-form-item>
<el-form-item label="文字粗细">
<avue-select v-model="activeComponent.option.fontWeight" :dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
<el-form-item label="边框">
<avue-radio v-model="activeComponent.option.type" :dic="dicOption.border">
</avue-select>
</el-form-item>
<template v-if="activeComponent.option.type==='img'">
<el-form-item label="背景图片">
<img :src="item" v-for="(item,index) in activeComponent.list" :key="index"
@click="activeComponent.option.backgroundImage=item">
</el-form-item>
</template>
<template v-else-if="activeComponent.option.type==='border'">
<el-form-item label="边框颜色">
<avue-color v-model="activeComponent.option.borderColor"></avue-color>
</el-form-item>
<el-form-item label="边框宽度">
<avue-silder v-model="activeComponent.option.borderWidth" :max="10"></avue-silder>
</el-form-item>
</template>
<el-form-item label="背景颜色">
<avue-color v-model="activeComponent.option.backgroundColor"></avue-color>
</el-form-item>
<el-collapse>
<el-collapse-item title="前缀设置">
<el-form-item label="前缀内容">
<avue-input v-model="activeComponent.option.prefixText"></avue-input>
</el-form-item>
<el-form-item label="对其方式">
<avue-select v-model="activeComponent.option.prefixTextAlign" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="间距">
<avue-silder v-model="activeComponent.option.prefixSplit"></avue-silder>
</el-form-item>
<el-form-item label="颜色">
<avue-color v-model="activeComponent.option.prefixColor"></avue-color>
</el-form-item>
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.prefixFontSize" :max="200"></avue-silder>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="后缀设置">
<el-form-item label="后缀内容">
<avue-input v-model="activeComponent.option.suffixText"></avue-input>
</el-form-item>
<el-form-item label="对其方式">
<avue-select v-model="activeComponent.option.suffixTextAlign" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="间距">
<avue-silder v-model="activeComponent.option.suffixSplit"></avue-silder>
</el-form-item>
<el-form-item label="颜色">
<avue-color v-model="activeComponent.option.suffixColor"></avue-color>
</el-form-item>
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.suffixFontSize" :max="200"></avue-silder>
</el-form-item>
</el-collapse-item>
</el-collapse>
</template>
<template v-else-if="activeComponent.prop==='table'">
<el-form-item label="表头颜色">
<avue-color type="textarea" v-model="activeComponent.style.headerColor"></avue-color>
</el-form-item>
<el-form-item label="表头背景">
<avue-color type="textarea" v-model="activeComponent.style.headerBackgroud"></avue-color>
</el-form-item>
<el-form-item label="字体位置">
<avue-select v-model="activeComponent.style.headerTextAlign" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
</el-form-item>
<el-form-item label="文字颜色">
<avue-color type="textarea" v-model="activeComponent.style.bodyColor"></avue-color>
</el-form-item>
<el-form-item label="表格背景">
<avue-color type="textarea" v-model="activeComponent.style.bodyBackgroud"></avue-color>
</el-form-item>
<el-form-item label="字体位置">
<avue-select v-model="activeComponent.style.bodyTextAlign" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
</el-form-item>
<el-form-item label="分割线">
<avue-color type="textarea" v-model="activeComponent.style.borderColor"></avue-color>
</el-form-item>
<avue-crud :option="tableOption" :data="activeComponent.option.column" @row-save="rowSave"
@row-del="rowDel" @row-update="rowUpdate"></avue-crud>
</template>
<template v-else-if="activeComponent.prop==='pie'">
<el-form-item label="设置为环形">
<avue-switch v-model="activeComponent.option.radius"></avue-switch>
</el-form-item>
<el-form-item label="南丁格尔玫瑰">
<avue-switch v-model="activeComponent.option.roseType"></avue-switch>
</el-form-item>
<el-form-item label="自动按数据大小排序">
<avue-switch v-model="activeComponent.option.sort"></avue-switch>
</el-form-item>
<el-form-item label="不展示为零数据项">
<avue-switch v-model="activeComponent.option.notCount"></avue-switch>
</el-form-item>
<el-form-item label="显示Label">
<avue-switch v-model="activeComponent.option.labelShow"></avue-switch>
</el-form-item>
</template>
<template v-else-if="['bar','line'].includes(activeComponent.prop)">
<el-form-item label="标题">
<avue-input type="textarea" v-model="activeComponent.option.title"></avue-input>
</el-form-item>
<el-form-item label="标题大小">
<avue-silder v-model="activeComponent.option.titleFontSize"></avue-silder>
</el-form-item>
<el-form-item label="标题颜色">
<avue-color v-model="activeComponent.option.titleColor"></avue-color>
</el-form-item>
<el-form-item label="标题对齐">
<avue-select v-model="activeComponent.option.titlePostion" :dic="dicOption.textAlign">
</avue-select>
</el-form-item>
<el-form-item label="标题隐藏">
<avue-switch v-model="activeComponent.option.titleShow"></avue-switch>
</el-form-item>
<el-form-item label="标题链接">
<avue-input type="textarea" v-model="activeComponent.option.titleLink"></avue-input>
</el-form-item>
<el-form-item label="面积堆积" v-if="['line'].includes(activeComponent.prop)">
<avue-switch v-model="activeComponent.option.areaStyle"></avue-switch>
</el-form-item>
<el-collapse>
<el-collapse-item title="X轴设置">
<el-form-item label="显示">
<avue-switch v-model="activeComponent.option.xAxisShow">
</avue-switch>
</el-form-item>
<el-form-item label="显示网格线">
<avue-switch v-model="activeComponent.option.xAxisSplitLineShow">
</avue-switch>
</el-form-item>
<el-form-item label="轴反转">
<avue-switch v-model="activeComponent.option.xAxisInverse">
</avue-switch>
</el-form-item>
<el-form-item label="字号">
<avue-silder v-model="activeComponent.option.xNameFontSize">
</avue-silder>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="Y轴设置">
<el-form-item label="显示">
<avue-switch v-model="activeComponent.option.yAxisShow">
</avue-switch>
</el-form-item>
<el-form-item label="轴网格线">
<avue-switch v-model="activeComponent.option.yAxisSplitLineShow">
</avue-switch>
</el-form-item>
<el-form-item label="反转">
<avue-switch v-model="activeComponent.option.yAxisInverse">
</avue-switch>
</el-form-item>
<el-form-item label="字号">
<avue-silder v-model="activeComponent.option.yNameFontSize">
</avue-silder>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="数字提示设置">
<el-form-item label="显示">
<avue-switch v-model="activeComponent.option.labelShow">
</avue-switch>
</el-form-item>
<el-form-item label="字体大小">
<avue-silder v-model="activeComponent.option.labelShowFontSize">
</avue-silder>
</el-form-item>
<el-form-item label="字体颜色">
<avue-color v-model="activeComponent.option.labelShowColor">
</avue-color>
</el-form-item>
<el-form-item label="字体粗细">
<avue-select v-model="activeComponent.option.labelShowFontWeight" :dic="dicOption.fontWeight">
</avue-select>
</el-form-item>
</el-collapse-item>
<template v-if="['bar'].includes(activeComponent.prop)">
<el-collapse-item title="柱体设置">
<el-form-item label="最大宽度">
<avue-silder v-model="activeComponent.option.barWidth">
</avue-silder>
</el-form-item>
<el-form-item label="圆角">
<avue-silder v-model="activeComponent.option.barRadius">
</avue-silder>
</el-form-item>
<el-form-item label="最小高度">
<avue-silder v-model="activeComponent.option.barMinHeight">
</avue-silder>
</el-form-item>
</el-collapse-item>
</template>
</el-collapse>
</template>
<template v-if="['bar','pie','line'].includes(activeComponent.prop)">
<el-collapse>
<el-collapse-item title="坐标轴边距设置">
<el-form-item label="图例">
<avue-switch v-model="activeComponent.option.legendShow"></avue-switch>
</el-form-item>
<el-form-item label="左边距(像素)">
<avue-silder v-model="activeComponent.option.gridX" max="200"></avue-silder>
</el-form-item>
<el-form-item label="顶边距(像素)">
<avue-silder v-model="activeComponent.option.gridY" max="200"></avue-silder>
</el-form-item>
<el-form-item label="右边距(像素)">
<avue-silder v-model="activeComponent.option.gridX2" max="200"></avue-silder>
</el-form-item>
<el-form-item label="底边距(像素)">
<avue-silder v-model="activeComponent.option.gridY2" max="200"></avue-silder>
</el-form-item>
</el-collapse-item>
<el-collapse-item title="自定义配色">
<el-form-item label="文字颜色">
<avue-color v-model="activeComponent.option.nameColor">
</avue-color>
</el-form-item>
<el-form-item label="轴线颜色">
<avue-color v-model="activeComponent.option.lineColor"></avue-color>
</el-form-item>
<avue-crud :option="colorOption" :data="activeComponent.option.barColor" @row-save="rowSave"
@row-del="rowDel" @row-update="rowUpdate"></avue-crud>
</el-collapse-item>
</el-collapse>
</template>
</template>
</template>
<template v-else>
<el-form-item label="大屏名称">
<avue-input v-model="config.name"></avue-input>
</el-form-item>
<el-form-item label="大屏宽度">
<avue-input-number v-model="config.width"></avue-input-number>
</el-form-item>
<el-form-item label="大屏高度">
<avue-input-number v-model="config.height"></avue-input-number>
</el-form-item>
<el-form-item label="缩放比例">
<el-slider v-model="config.scale" :max="200" :format-tooltip="formatTooltip"></el-slider>
</el-form-item>
<el-form-item label="缩略图">
<img :src="config.backgroundImage" alt="" width="100%" />
</el-form-item>
<el-form-item label="背景图片">
<avue-input v-model="config.backgroundImage"></avue-input>
</el-form-item>
<el-form-item label="显示网格">
<avue-switch v-model="config.gradeShow"></avue-switch>
</el-form-item>
<el-form-item label="网格间距">
<avue-input-number v-model="config.gradeLen"></avue-input-number>
</el-form-item>
</template>
</el-form>
</div>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html,
body,
#app,
.app {
height: 100%;
}
.json-editor .CodeMirror {
height: 500px;
overflow: auto;
}
.json-editor .cm-s-rubyblue span.cm-string {
color: #F08047;
}
img {
user-select: none;
}
.app {
padding: 5px;
display: flex;
box-sizing: border-box;
}
.menu {
padding: 0 10px;
margin: 0 5px;
width: 150px;
height: 100%;
overflow: hidden;
overflow-y: auto;
border: 1px solid #eee;
}
.menu__item {
margin-bottom: 2px;
width: 100%;
height: 40px;
line-height: 40px;
text-indent: 1em;
font-size: 14px;
border: 1px solid #eee;
}
.menu__item:hover {
border: 1px dashed #09f;
cursor: move;
}
.menu__item--active {
border: 1px dashed #09f;
}
.top {
padding: 10px 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: rgba(255, 255, 255, .4);
}
.wrapper {
padding-top: 60px;
background-color: #eee;
position: relative;
width: 900px;
height: 100%;
overflow: auto;
border: 1px solid #eee;
box-sizing: border-box;
}
.app--none {
padding: 0
}
.app--none .wrapper {
padding: 0;
width: 100%;
}
.app--none .content {
height: 100%;
border: none;
}
.content {
height: 500px;
overflow: hidden;
}
.container {
user-select: none;
transform-origin: 0 0;
position: relative;
}
.grade {
width: 100%;
height: 100%;
background-size: 30px 30px, 30px 30px;
background-image: linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 0px);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.title {
margin-bottom: 10px;
line-height: 40px;
height: 40px;
text-align: center;
font-weight: 500;
font-size: 18px;
letter-spacing: 2px;
text-indent: 2px;
}
.params {
width: 350px;
}
.el-form-item {
margin-top: 10px;
}