整合大屏编辑页面
This commit is contained in:
LeonardYoung
579
ruoyi-ui/src/views/screen/page/build.vue
Normal file
579
ruoyi-ui/src/views/screen/page/build.vue
Normal file
@ -0,0 +1,579 @@
|
||||
<template>
|
||||
<div class="build">
|
||||
<imglist ref="imglist"
|
||||
@change="handleSetimg"></imglist>
|
||||
<top ref="top"></top>
|
||||
<div class="app"
|
||||
:class="{'app--none':!menuFlag}">
|
||||
<div class="menu"
|
||||
v-show="menuFlag"
|
||||
@click.self="handleMouseDown">
|
||||
<p class="title">图层</p>
|
||||
<layer ref="layer"
|
||||
:nav="nav"></layer>
|
||||
</div>
|
||||
<container ref="container"></container>
|
||||
<div class="menu params"
|
||||
v-show="menuFlag">
|
||||
<p class="title">操作</p>
|
||||
<el-tabs class="tabs"
|
||||
stretch
|
||||
v-model="tabsActive">
|
||||
<el-tab-pane name="0">
|
||||
<el-tooltip slot="label"
|
||||
effect="dark"
|
||||
content="配置"
|
||||
placement="top">
|
||||
<div><i class="el-icon-setting"></i></div>
|
||||
</el-tooltip>
|
||||
<el-form label-width="120px"
|
||||
label-position="left"
|
||||
size="mini">
|
||||
<!-- 组件配置 -->
|
||||
<template v-if="!vaildProp('',[undefined])">
|
||||
<p class="title">{{activeObj.title}}</p>
|
||||
<el-form-item label="图层名称">
|
||||
<avue-input v-model="activeObj.name"></avue-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="隐藏">
|
||||
<avue-switch v-model="activeObj.display"></avue-switch>
|
||||
</el-form-item>
|
||||
<template v-if="vaildProp('colorList')">
|
||||
<el-form-item label="系统配色">
|
||||
<avue-switch v-model="activeOption.switchTheme"></avue-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="配色选择"
|
||||
v-if="activeOption.switchTheme">
|
||||
<avue-select v-model="activeOption.theme"
|
||||
:dic="dicOption.themeList">
|
||||
</avue-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<component :is="activeComponent.prop+'Option'"></component>
|
||||
<common-option></common-option>
|
||||
</template>
|
||||
<!-- 多选配置选项 -->
|
||||
<template v-else-if="isSelectActive">
|
||||
<el-form-item label="水平方式">
|
||||
<el-tooltip content="左对齐"
|
||||
placement="top">
|
||||
<i class="el-icon-s-fold icon"
|
||||
@click="$refs.container.handlePostionSelect('left')"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="居中对齐"
|
||||
placement="top">
|
||||
<i class="el-icon-s-operation icon"
|
||||
@click="$refs.container.handlePostionSelect('center')"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="右对齐"
|
||||
placement="top">
|
||||
<i class="el-icon-s-unfold icon"
|
||||
@click="$refs.container.handlePostionSelect('right')"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="垂直方式">
|
||||
<el-tooltip content="顶对齐"
|
||||
placement="top">
|
||||
<i class="el-icon-s-fold icon"
|
||||
@click="$refs.container.handlePostionSelect('top')"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="中部对齐"
|
||||
placement="top">
|
||||
<i class="el-icon-s-operation icon"
|
||||
@click="$refs.container.handlePostionSelect('middle')"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="底对齐"
|
||||
placement="top">
|
||||
<i class="el-icon-s-unfold icon"
|
||||
@click="$refs.container.handlePostionSelect('bottom')"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button type="primary"
|
||||
size="mini"
|
||||
class="block"
|
||||
@click="handleDeleteSelect">删除</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button type="danger"
|
||||
size="mini"
|
||||
class="block"
|
||||
@click="handleFloder">成组</el-button>
|
||||
</el-form-item>
|
||||
</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="大屏简介">
|
||||
<avue-input v-model="config.info"
|
||||
type="textarea"
|
||||
:min-rows="5"></avue-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景颜色">
|
||||
<avue-color v-model="config.backgroundColor"></avue-color>
|
||||
</el-form-item>
|
||||
<el-form-item label="背景图片">
|
||||
<img :src="config.backgroundImage"
|
||||
@click="handleOpenImg('config.backgroundImage','background')"
|
||||
alt=""
|
||||
width="100%" />
|
||||
</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="环境地址">
|
||||
<avue-input type="textarea"
|
||||
:min-rows="2"
|
||||
v-model="config.url"></avue-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('query')">编辑</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="水印(预览有效)">
|
||||
<avue-switch v-model="config.mark.show"></avue-switch>
|
||||
</el-form-item>
|
||||
<template v-if="config.mark.show">
|
||||
<el-form-item label="内容">
|
||||
<avue-input v-model="config.mark.text"></avue-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="大小">
|
||||
<avue-input-number v-model="config.mark.fontSize"></avue-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色">
|
||||
<avue-color v-model="config.mark.textStyle"></avue-color>
|
||||
</el-form-item>
|
||||
<el-form-item label="角度">
|
||||
<avue-input-number v-model="config.mark.degree"></avue-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- 数据配置 -->
|
||||
<el-tab-pane name="1"
|
||||
v-if="vaildProp('dataList')">
|
||||
<el-tooltip slot="label"
|
||||
effect="dark"
|
||||
content="数据"
|
||||
placement="top">
|
||||
<div><i class="el-icon-document-copy"></i></div>
|
||||
</el-tooltip>
|
||||
<el-form label-width="120px"
|
||||
label-position="left"
|
||||
size="mini">
|
||||
<el-form-item label="数据类型">
|
||||
<avue-radio v-model="activeObj.dataType"
|
||||
:dic="dicOption.dataType"></avue-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据值"
|
||||
label-position="top"
|
||||
v-if="activeObj.dataType===0">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('data')">编辑</el-button>
|
||||
</el-form-item>
|
||||
<template v-if="activeObj.dataType===1">
|
||||
<el-form-item label="接口地址">
|
||||
<avue-input type="textarea"
|
||||
:min-rows="6"
|
||||
v-model="activeObj.url"></avue-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口方式"
|
||||
v-if="activeObj.dataType===1">
|
||||
<avue-radio v-model="activeObj.dataMethod"
|
||||
:dic="dicOption.dataMethod"></avue-radio>
|
||||
</el-form-item>
|
||||
<el-form-item label="接口参数"
|
||||
v-if="activeObj.dataType===1">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('dataQuery')">编辑</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="刷新时间">
|
||||
<avue-input-number v-model="activeObj.time"></avue-input-number>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="数据处理">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('dataFormatter')">编辑</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
class="block"
|
||||
@click="handleRefresh">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
</el-tab-pane>
|
||||
<!-- 交互事件配置 -->
|
||||
<el-tab-pane name="2"
|
||||
v-if="vaildProp('eventList')">
|
||||
<el-tooltip slot="label"
|
||||
effect="dark"
|
||||
content="交互"
|
||||
placement="top">
|
||||
<div><i class="el-icon-thumb"></i></div>
|
||||
</el-tooltip>
|
||||
<el-form label-width="120px"
|
||||
label-position="left"
|
||||
size="mini">
|
||||
<el-form-item label="子类">
|
||||
<avue-select multiple
|
||||
v-model="activeObj.child.index"
|
||||
:dic="childList"
|
||||
:props="childProps">
|
||||
</avue-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="参数名称">
|
||||
<avue-input v-model="activeObj.child.paramName"></avue-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- 其他事件配置 -->
|
||||
<el-tab-pane name="3"
|
||||
v-if="vaildProp('formatterList')">
|
||||
<el-tooltip slot="label"
|
||||
effect="dark"
|
||||
content="事件"
|
||||
placement="top">
|
||||
<div><i class="iconfont icon-peizhi"></i></div>
|
||||
</el-tooltip>
|
||||
<el-form label-width="120px"
|
||||
label-position="left"
|
||||
size="mini">
|
||||
<el-form-item label="提示事件">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('formatter')">编辑</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="点击事件"
|
||||
v-if="vaildProp('clickFormatterList')">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('clickFormatter')">编辑</el-button>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item label="标题事件"
|
||||
v-if="vaildProp('labelFormatterList')">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
@click="openCode('labelFormatter')">编辑</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button size="mini"
|
||||
type="primary"
|
||||
class="block"
|
||||
@click="handleRefresh">刷新</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<!-- 基本参数配置 -->
|
||||
<el-tab-pane name="4"
|
||||
v-if="isActive">
|
||||
<el-tooltip slot="label"
|
||||
effect="dark"
|
||||
content="参数"
|
||||
placement="top">
|
||||
<div><i class="el-icon-folder"></i></div>
|
||||
</el-tooltip>
|
||||
<el-form label-width="120px"
|
||||
label-position="left"
|
||||
size="mini">
|
||||
<el-form-item label="序号">
|
||||
<avue-input v-model="activeObj.index"
|
||||
disabled></avue-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="X位置">
|
||||
<avue-input-number v-model="activeObj.left"></avue-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="Y位置">
|
||||
<avue-input-number v-model="activeObj.top"></avue-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="宽度">
|
||||
<avue-input-number v-model="activeComponent.width"></avue-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="高度">
|
||||
<avue-input-number v-model="activeComponent.height"></avue-input-number>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog title="代码编辑"
|
||||
:visible.sync="code.box"
|
||||
@close="code.obj={}"
|
||||
width="60%">
|
||||
<codeedit ref="codeedit"
|
||||
v-model="code.obj"></codeedit>
|
||||
<span slot="footer"
|
||||
class="dialog-footer">
|
||||
<el-button size="small"
|
||||
@click="code.box=false">取 消</el-button>
|
||||
<el-button type="primary"
|
||||
@click="codeClose"
|
||||
size="small">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<contentmenu ref="contentmenu"></contentmenu>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
import layer from './group/layer';
|
||||
import top from './group/top';
|
||||
import imglist from './group/imglist'
|
||||
import contentmenu from './group/contentmenu'
|
||||
import codeedit from './group/code';
|
||||
import { dicOption } from '@/option/config'
|
||||
import init from '@/mixins/'
|
||||
import { uuid } from '@/utils/utils'
|
||||
import components from '@/option/components'
|
||||
export default {
|
||||
mixins: [init, components],
|
||||
data () {
|
||||
return {
|
||||
keys: {
|
||||
ctrl: false,
|
||||
},
|
||||
loading: '',
|
||||
childProps: {
|
||||
label: 'name',
|
||||
value: 'index'
|
||||
},
|
||||
key: '',
|
||||
menuFlag: true,
|
||||
code: {
|
||||
box: false,
|
||||
type: '',
|
||||
obj: '',
|
||||
},
|
||||
form: {},
|
||||
dicOption: dicOption,
|
||||
tabsActive: 0,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
imglist,
|
||||
layer,
|
||||
codeedit,
|
||||
top,
|
||||
contentmenu
|
||||
},
|
||||
computed: {
|
||||
isFolder () {
|
||||
return this.activeObj.children
|
||||
},
|
||||
isActive () {
|
||||
return this.active.length !== 0
|
||||
},
|
||||
isSelectActive () {
|
||||
return this.active.length > 1;
|
||||
},
|
||||
childList () {
|
||||
return this.list.filter(ele => {
|
||||
if (['tabs'].includes(ele.component.prop)) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
},
|
||||
activeComponent () {
|
||||
return this.activeObj.component || {}
|
||||
},
|
||||
activeOption () {
|
||||
return this.activeObj.option || {}
|
||||
},
|
||||
activeObj () {
|
||||
let result
|
||||
if (this.validatenull(this.active)) {
|
||||
return {}
|
||||
}
|
||||
this.active.forEach(ele => {
|
||||
const item = this.findnav(ele, true);
|
||||
if (this.active.length > 1) {
|
||||
if (!result) result = [];
|
||||
result.push(item.obj);
|
||||
} else {
|
||||
result = item.obj
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
menuFlag () {
|
||||
this.setResize();
|
||||
},
|
||||
overactive (n, o) {
|
||||
[o, n].forEach((ele, index) => {
|
||||
if (!ele) return
|
||||
this.setActive(ele, index === 1, 'setOverActive');
|
||||
})
|
||||
},
|
||||
active (n, o) {
|
||||
[o, n].forEach((ele, index) => {
|
||||
ele.forEach(item => {
|
||||
this.setActive(item, index === 1, 'setActive');
|
||||
})
|
||||
})
|
||||
//隐藏右键菜单
|
||||
this.$refs.contentmenu.hide();
|
||||
// 初始化选项卡
|
||||
this.tabsActive = '0';
|
||||
},
|
||||
},
|
||||
created () {
|
||||
this.listen();
|
||||
},
|
||||
mounted () {
|
||||
this.initFun()
|
||||
},
|
||||
methods: {
|
||||
codeClose () {
|
||||
let value = this.$refs.codeedit.getValue();
|
||||
if (this.validatenull(value)) {
|
||||
value = '{}'
|
||||
}
|
||||
try {
|
||||
if (['query', 'data'].includes(this.code.type)) {
|
||||
value = JSON.parse(value, null, 4)
|
||||
}
|
||||
if (this.code.type === 'query') {
|
||||
this.config.query = value;
|
||||
} else {
|
||||
this.activeObj[this.code.type] = value;
|
||||
}
|
||||
this.code.box = false;
|
||||
} catch (error) {
|
||||
this.$message.error('数据格式有误')
|
||||
}
|
||||
|
||||
},
|
||||
openCode (type) {
|
||||
this.code.type = type;
|
||||
if (type === 'query') {
|
||||
this.code.obj = this.config.query;
|
||||
} else {
|
||||
this.code.obj = this.activeObj[type];
|
||||
}
|
||||
this.code.box = true;
|
||||
},
|
||||
initFun () {
|
||||
['setScale', 'setResize'].forEach(ele => {
|
||||
this[ele] = this.$refs.container[ele]
|
||||
});
|
||||
['handleAdd'].forEach(ele => {
|
||||
this[ele] = this.$refs.top[ele]
|
||||
})
|
||||
},
|
||||
// 右键菜单
|
||||
handleContextMenu (e, item = {}) {
|
||||
if (!item.index) {
|
||||
return
|
||||
}
|
||||
if (!this.isSelectActive) {
|
||||
this.active = [item.index];
|
||||
}
|
||||
setTimeout(() => {
|
||||
this.$refs.contentmenu.show(e.clientX, e.clientY);
|
||||
}, 0)
|
||||
},
|
||||
//监听键盘的按键
|
||||
listen () {
|
||||
document.onkeydown = (e) => {
|
||||
this.keys.ctrl = e.keyCode === 17;
|
||||
}
|
||||
document.onkeyup = () => {
|
||||
this.keys.ctrl = false;
|
||||
}
|
||||
},
|
||||
setActive (val, result, fun) {
|
||||
const obj = this.$refs.container.handleGetObj(val);
|
||||
if (!this.validatenull(obj)) obj[0][fun](result)
|
||||
},
|
||||
//批量成组
|
||||
handleFloder () {
|
||||
let floder = {
|
||||
"title": "文件夹",
|
||||
"name": "文件夹",
|
||||
"index": uuid(),
|
||||
"children": []
|
||||
}
|
||||
this.active.forEach(index => {
|
||||
const params = this.findnav(index);
|
||||
floder.children.push(params.obj);
|
||||
delete params.parent.splice(params.count, 1);
|
||||
})
|
||||
this.nav.push(floder);
|
||||
this.handleInitActive();
|
||||
},
|
||||
//批量删除
|
||||
handleDeleteSelect () {
|
||||
this.$confirm(`是否批量删除所选图层?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.active.forEach(index => {
|
||||
const params = this.findnav(index);
|
||||
delete params.parent.splice(params.count, 1);
|
||||
})
|
||||
this.handleInitActive()
|
||||
})
|
||||
},
|
||||
vaildProp (name, list) {
|
||||
if (list) {
|
||||
return list.includes(this.activeComponent.prop)
|
||||
}
|
||||
return this.dicOption[name].includes(this.activeComponent.prop)
|
||||
},
|
||||
handleRefresh (tip) {
|
||||
this.$refs.container.handleRefresh(tip);
|
||||
},
|
||||
formatTooltip (val) {
|
||||
return parseInt(val);
|
||||
},
|
||||
//打开图库
|
||||
handleOpenImg (item, type) {
|
||||
this.$refs.imglist.openImg(item, type);
|
||||
},
|
||||
//图库框回调赋值
|
||||
handleSetimg (val, type) {
|
||||
if (type === 'activeObj.data') {
|
||||
this.activeObj.data = val;
|
||||
} if (type === 'activeObj.data.value') {
|
||||
this.activeObj.data.value = val;
|
||||
} else if (type === 'activeOption.backgroundImage') {
|
||||
this.activeOption.backgroundImage = val;
|
||||
} else if (type === 'activeOption.backgroundBorder') {
|
||||
this.activeOption.backgroundBorder = val;
|
||||
} else if (type === 'activeOption.empBackgroundBorder') {
|
||||
this.activeOption.empBackgroundBorder = val;
|
||||
} else if (type === 'config.backgroundImage') {
|
||||
this.config.backgroundImage = val;
|
||||
} else if (type === 'activeOption.symbol') {
|
||||
this.activeOption.symbol = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "../styles/style.scss";
|
||||
</style>
|
||||
82
ruoyi-ui/src/views/screen/page/group/code.vue
Normal file
82
ruoyi-ui/src/views/screen/page/group/code.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<textarea :ref="id"
|
||||
v-model="code"
|
||||
style="height:300px;width:100%;"></textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import "codemirror/theme/blackboard.css";
|
||||
import "codemirror/lib/codemirror.css";
|
||||
import "codemirror/addon/hint/show-hint.css";
|
||||
|
||||
let CodeMirror = require("codemirror/lib/codemirror");
|
||||
require("codemirror/addon/edit/matchbrackets");
|
||||
require("codemirror/addon/selection/active-line");
|
||||
require("codemirror/addon/hint/show-hint");
|
||||
export default {
|
||||
name: "codeMirror",
|
||||
data () {
|
||||
return {
|
||||
editor: '',
|
||||
id: Math.floor(Math.random() * 100),
|
||||
code: ''
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Object, Array],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler (val) {
|
||||
if (['object', 'array'].includes(typeof val)) {
|
||||
this.code = JSON.stringify(this.value, null, 4);
|
||||
} else {
|
||||
this.code = val;
|
||||
}
|
||||
this.setValue(this.code);
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
getValue () {
|
||||
return this.editor.getValue()
|
||||
},
|
||||
setValue (val) {
|
||||
if (this.editor) this.editor.setValue(val);
|
||||
|
||||
},
|
||||
init () {
|
||||
let mime = 'text/javascript'
|
||||
let theme = 'blackboard'//设置主题，不设置的会使用默认主题
|
||||
this.editor = CodeMirror.fromTextArea(this.$refs[this.id], {
|
||||
mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
|
||||
indentWithTabs: true,
|
||||
smartIndent: true,
|
||||
lineNumbers: true,
|
||||
matchBrackets: true,
|
||||
theme: theme,
|
||||
// autofocus: true,
|
||||
extraKeys: { 'Ctrl': 'autocomplete' },//自定义快捷键
|
||||
// hintOptions: {//自定义提示选项
|
||||
// tables: {
|
||||
// users: ['name', 'score', 'birthDate'],
|
||||
// countries: ['name', 'population', 'size']
|
||||
// }
|
||||
// }
|
||||
})
|
||||
//代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
|
||||
this.editor.on('cursorActivity', () => {
|
||||
this.editor.showHint()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
248
ruoyi-ui/src/views/screen/page/group/container.vue
Normal file
248
ruoyi-ui/src/views/screen/page/group/container.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div class="middle">
|
||||
<div class="wrapper__grade"
|
||||
@mousedown="contain.handleMouseDown"></div>
|
||||
<div id="wrapper"
|
||||
class="wrapper"
|
||||
@mousedown="contain.handleMouseDown">
|
||||
<div class="content"
|
||||
id="content"
|
||||
ref="content">
|
||||
<div class="container"
|
||||
:style="styleName"
|
||||
id="container"
|
||||
ref="container">
|
||||
<div class="grade"
|
||||
v-if="gradeFlag || contain.config.gradeShow"
|
||||
:style="gradeLenStyle"></div>
|
||||
<subgroup ref="subgroup"
|
||||
:nav="contain.list"></subgroup>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import subgroup from './subgroup'
|
||||
import common from '@/config'
|
||||
import { getObj } from '@/api/visual'
|
||||
export default {
|
||||
name: 'contents',
|
||||
inject: ["contain"],
|
||||
provide () {
|
||||
return {
|
||||
// contain: this.contain,
|
||||
container: this
|
||||
};
|
||||
},
|
||||
components: {
|
||||
subgroup
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
selectCount: {},
|
||||
scale: 1,
|
||||
gradeFlag: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stepScale () {
|
||||
let scale = Number(((1 / this.scale) * 100).toFixed(2));
|
||||
return scale
|
||||
},
|
||||
//计算中央可视化大屏比例
|
||||
styleName () {
|
||||
const scale = this.contain.config.scale;
|
||||
return Object.assign({
|
||||
transform: `scale(${scale / 100}, ${scale / 100})`,
|
||||
width: this.setPx(this.contain.config.width),
|
||||
height: this.setPx(this.contain.config.height),
|
||||
backgroundColor: this.contain.config.backgroundColor
|
||||
}, (() => {
|
||||
if (this.contain.config.backgroundImage) {
|
||||
return {
|
||||
background: `url(${this.contain.config.backgroundImage}) 0% 0% / 100% 100% rgb(3, 12, 59)`,
|
||||
}
|
||||
}
|
||||
return
|
||||
})())
|
||||
},
|
||||
gradeLenStyle () {
|
||||
return {
|
||||
backgroundSize: `${this.setPx(this.contain.config.gradeLen)} ${this.setPx(this.contain.config.gradeLen)},${this.setPx(this.contain.config.gradeLen)} ${this.setPx(this.contain.config.gradeLen)}`
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.initData();
|
||||
this.initFun();
|
||||
},
|
||||
methods: {
|
||||
initFun () {
|
||||
['handleRefresh', 'handleGetObj'].forEach(ele => {
|
||||
console.log('66666');
|
||||
this[ele] = this.$refs.subgroup[ele]
|
||||
});
|
||||
},
|
||||
//初始化数据
|
||||
initData () {
|
||||
const id = this.$route.params.id;
|
||||
this.contain.id = id;
|
||||
this.contain.contentWidth = this.$refs.content.offsetWidth;
|
||||
const isBuild = this.$route.name === 'build';
|
||||
const width = isBuild ? this.contain.contentWidth : document.body.clientWidth
|
||||
if (id) {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在加载中，请稍后',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
getObj(id).then(res => {
|
||||
const callback = () => {
|
||||
//赋值属性
|
||||
this.contain.config = JSON.parse(config.detail) || {};
|
||||
this.contain.nav = JSON.parse(config.component) || [];
|
||||
this.calcData();
|
||||
this.setScale(width);
|
||||
}
|
||||
const data = res.data;
|
||||
this.contain.obj = data;
|
||||
const config = data.config;
|
||||
this.contain.visual = data.visual;
|
||||
//添加水印。只有查看页面生效
|
||||
if (!isBuild) {
|
||||
if (this.contain.config.mark.show) {
|
||||
this.watermark(this.contain.config.mark);
|
||||
}
|
||||
const password = this.contain.visual.password
|
||||
if (!this.validatenull(password)) {
|
||||
this.$prompt('请输入密码', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
showCancelButton: false,
|
||||
showClose: false,
|
||||
closeOnClickModal: false,
|
||||
inputPattern: new RegExp(password),
|
||||
inputErrorMessage: '密码不正确，请重新输入'
|
||||
}).then(() => {
|
||||
callback();
|
||||
})
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
loading.close();
|
||||
}).catch((err) => {
|
||||
console.log(err)
|
||||
loading.close();
|
||||
})
|
||||
} else {
|
||||
this.setScale(width);
|
||||
}
|
||||
},
|
||||
//适配尺寸
|
||||
setResize () {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.content.style.width = this.setPx((this.contain.config.scale * this.contain.config.width) / 100)
|
||||
this.$refs.content.style.height = this.setPx((this.contain.config.scale * this.contain.config.height) / 100)
|
||||
})
|
||||
},
|
||||
//计算比例
|
||||
setScale (width) {
|
||||
this.$nextTick(() => {
|
||||
this.contain.config.scale = (width / this.contain.config.width) * 100
|
||||
this.scale = this.contain.config.scale;
|
||||
this.setResize();
|
||||
})
|
||||
},
|
||||
calcData () {
|
||||
if (!this.contain.config.mark) this.contain.config.mark = {}
|
||||
if (!this.contain.config.query) this.contain.config.query = {}
|
||||
},
|
||||
handlePostionSelect (postion) {
|
||||
this.handleCalcPostionSelect();
|
||||
const x1 = this.selectCount.maxx1;
|
||||
const x2 = this.selectCount.maxx2;
|
||||
const y1 = this.selectCount.maxy1;
|
||||
const y2 = this.selectCount.maxy2;
|
||||
if (postion === 'left') {
|
||||
this.handleMoveSelectList(x1, undefined, true, postion);
|
||||
} else if (postion === 'center') {
|
||||
this.handleMoveSelectList(x1 + (x2 - x1) / 2, undefined, true, postion);
|
||||
} else if (postion === 'right') {
|
||||
this.handleMoveSelectList(x2, undefined, true, postion);
|
||||
} else if (postion === 'top') {
|
||||
this.handleMoveSelectList(undefined, y1, true, postion);
|
||||
} else if (postion === 'middle') {
|
||||
this.handleMoveSelectList(undefined, y1 + (y2 - y1) / 2, true, postion);
|
||||
} else if (postion === 'bottom') {
|
||||
this.handleMoveSelectList(undefined, y2, true, postion);
|
||||
}
|
||||
},
|
||||
handleMoveSelectList (left, top, type, postion) {
|
||||
this.contain.active.forEach(ele => {
|
||||
ele = this.contain.findlist(ele)
|
||||
const ele_component = ele.component;
|
||||
//水平情况
|
||||
if (left) {
|
||||
let baseLeft = Number(type ? left : (ele.left + left).toFixed(2));
|
||||
if (postion === 'right') {
|
||||
baseLeft = baseLeft - ele_component.width
|
||||
}
|
||||
else if (postion === 'center') {
|
||||
const obj_center = ele.left + ele_component.width / 2;
|
||||
baseLeft = ele.left + (left - obj_center)
|
||||
}
|
||||
this.$set(ele, 'left', baseLeft);
|
||||
this.$refs.subgroup.$refs[common.DEAFNAME + ele.index][0].setLeft(baseLeft)
|
||||
}
|
||||
//垂直情况
|
||||
if (top) {
|
||||
let baseTop = Number(type ? top : (ele.top + top).toFixed(2));
|
||||
if (postion === 'bottom') {
|
||||
baseTop = baseTop - ele_component.height
|
||||
}
|
||||
else if (postion === 'middle') {
|
||||
const obj_middle = ele.top + ele_component.height / 2;
|
||||
baseTop = ele.top + (top - obj_middle)
|
||||
}
|
||||
this.$set(ele, 'top', baseTop)
|
||||
this.$refs.subgroup.$ref[common.DEAFNAME + ele.index][0].setTop(baseTop)
|
||||
}
|
||||
})
|
||||
},
|
||||
//计算多选状态下的最大边界值
|
||||
handleCalcPostionSelect () {
|
||||
this.selectCount.maxx1 = 99999;
|
||||
this.selectCount.maxy1 = 99999;
|
||||
this.contain.active.forEach(ele => {
|
||||
ele = this.contain.findlist(ele)
|
||||
const left = ele.left;
|
||||
const top = ele.top;
|
||||
const width = ele.component.width;
|
||||
const height = ele.component.height;
|
||||
if (this.selectCount.maxx1 > left) {
|
||||
this.selectCount.maxx1 = left;
|
||||
}
|
||||
if (this.selectCount.maxx2 < left + width) {
|
||||
this.selectCount.maxx2 = left + width;
|
||||
}
|
||||
if (this.selectCount.maxy1 > top) {
|
||||
this.selectCount.maxy1 = top;
|
||||
}
|
||||
if (this.selectCount.maxy2 < top + height) {
|
||||
this.selectCount.maxy2 = top + height;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
232
ruoyi-ui/src/views/screen/page/group/contentmenu.vue
Normal file
232
ruoyi-ui/src/views/screen/page/group/contentmenu.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="contentmenu"
|
||||
v-show="contentMenu"
|
||||
@click="contentMenu=false"
|
||||
:style="styleName">
|
||||
<div class="contentmenu__item"
|
||||
@click="handleLogout()"
|
||||
v-if="contain.isFolder"> <i class="el-icon-close"></i>解散分组
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleCompose()"
|
||||
v-if="!contain.isFolder"> <i class="el-icon-close"></i>组合分组
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleDel()"> <i class="el-icon-close"></i>删除图层
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleCopy()"><i class="el-icon-document"></i>复制图层
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleTop()"><i class="el-icon-arrow-up"></i>置顶图层
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleBottom()"><i class="el-icon-arrow-down"></i>置底图层
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleStepTop()"><i class="el-icon-arrow-up"></i>上移一层
|
||||
</div>
|
||||
<div class="contentmenu__item"
|
||||
@click="handleStepBottom()"><i class="el-icon-arrow-down"></i>下移一层
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '@/utils/utils'
|
||||
export default {
|
||||
name: 'contentmenu',
|
||||
inject: ["contain"],
|
||||
data () {
|
||||
return {
|
||||
contentMenu: false,
|
||||
contentMenuX: 0,
|
||||
contentMenuY: 0,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleName () {
|
||||
return {
|
||||
left: this.setPx(this.contentMenuX),
|
||||
top: this.setPx(this.contentMenuY)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show (X = 0, Y = 0) {
|
||||
this.contentMenuX = X;
|
||||
this.contentMenuY = Y;
|
||||
this.contentMenu = true;
|
||||
},
|
||||
hide () {
|
||||
this.contentMenuX = 0;
|
||||
this.contentMenuY = 0;
|
||||
this.contentMenu = false;
|
||||
},
|
||||
handleStepBottom () {
|
||||
this.handleCommon(false, true);
|
||||
},
|
||||
handleStepTop () {
|
||||
this.handleCommon(true, true);
|
||||
},
|
||||
//文件夹成组逻辑
|
||||
handleCompose () {
|
||||
let list = this.contain.active;
|
||||
this.$confirm(`是否组合所选择的图层?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let floder = {
|
||||
"title": "文件夹",
|
||||
"name": "文件夹",
|
||||
"index": uuid(),
|
||||
"children": []
|
||||
}
|
||||
//查找到每个组件调用核心方法就行组合操作
|
||||
//寻找父类
|
||||
const params = this.contain.findnav(list[0], true);
|
||||
list.forEach(ele => {
|
||||
const item = this.contain.findnav(ele, true);
|
||||
item.parent.splice(item.count, 1);
|
||||
floder.children.push(item.obj);
|
||||
});
|
||||
params.parent.push(floder);
|
||||
}).catch(() => { })
|
||||
},
|
||||
//文件夹解散逻辑
|
||||
handleLogout () {
|
||||
let ele = this.contain.activeObj
|
||||
this.$confirm(`是否解散${ele.name}图层?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
//查找到文件夹调用核心方法nav去操作
|
||||
const params = this.contain.findnav(ele.index, true);
|
||||
const list = this.deepClone(params.obj.children)
|
||||
params.parent.splice(params.count, 1);
|
||||
list.forEach(ele => {
|
||||
params.parent.push(ele);
|
||||
});
|
||||
this.contain.handleInitActive();
|
||||
}).catch(() => { })
|
||||
},
|
||||
//删除组件的方法
|
||||
handleDel () {
|
||||
this.$confirm(`是否删除所选图层?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
const params = this.contain.findnav(this.contain.active[0], true);
|
||||
this.contain.active.forEach(ele => {
|
||||
const item = this.contain.findnav(ele, true);
|
||||
if (Array.isArray(params.parent)) {
|
||||
params.parent.splice(item.count, 1);
|
||||
} else {
|
||||
params.parent.children.splice(item.count, 1);
|
||||
}
|
||||
});
|
||||
this.contain.handleInitActive();
|
||||
}).catch(() => { })
|
||||
},
|
||||
//复制组件的方法
|
||||
handleCopy () {
|
||||
//寻找父类
|
||||
const params = this.contain.findnav(this.contain.active[0], true);
|
||||
this.contain.active.forEach(ele => {
|
||||
const item = this.contain.findnav(ele, true);
|
||||
const obj = this.deepClone(item.obj);
|
||||
obj.index = uuid();
|
||||
params.parent.push(obj)
|
||||
});
|
||||
this.contain.handleInitActive();
|
||||
},
|
||||
// 图层的上下移动方法
|
||||
handleCommon (first = false, step = false) {
|
||||
// 交换数组元素
|
||||
var swapItems = function (arr, index1, index2) {
|
||||
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
|
||||
return arr;
|
||||
};
|
||||
let obj = this.contain.activeObj;
|
||||
let data = this.deepClone(obj);
|
||||
let params = this.contain.findnav(obj.index, true);
|
||||
if (params.pcount !== 0) {
|
||||
if (params.len < 1) return;
|
||||
if (step) {
|
||||
if (first && params.count === 0) return
|
||||
if (!first && params.count === params.len) return
|
||||
let count = first ? params.count - 1 : params.count + 1
|
||||
swapItems(params.parent.children, params.count, count);
|
||||
} else {
|
||||
if (first) {
|
||||
if (params.count === 0) return
|
||||
params.parent.children.splice(params.count, 1);
|
||||
params.parent.children.unshift(data);
|
||||
} else {
|
||||
if (params.count === params.len) return
|
||||
params.parent.children.splice(params.count, 1);
|
||||
params.parent.children.push(data);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (this.contain.nav.length < 1) return;
|
||||
if (step) {
|
||||
if (first && params.count === 0) return
|
||||
if (!first && params.count === params.len) return
|
||||
let count = first ? params.count - 1 : params.count + 1
|
||||
swapItems(this.contain.nav, params.count, count);
|
||||
} else {
|
||||
if (first) {
|
||||
if (params.count === 0) return
|
||||
this.contain.nav.splice(params.count, 1)
|
||||
this.contain.nav.unshift(data);
|
||||
} else {
|
||||
if (params.count === params.len) return
|
||||
this.contain.nav.splice(params.count, 1)
|
||||
this.contain.nav.push(data);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
handleTop () {
|
||||
this.handleCommon(true);
|
||||
},
|
||||
handleBottom () {
|
||||
this.handleCommon();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.contentmenu {
|
||||
width: 160px;
|
||||
position: fixed;
|
||||
z-index: 99999;
|
||||
list-style: none;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
padding: 0;
|
||||
background: #27343e;
|
||||
color: #bcc9d4;
|
||||
}
|
||||
.contentmenu__item {
|
||||
z-index: 10000;
|
||||
list-style: none;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
.contentmenu__item:hover {
|
||||
background-color: rgba(0, 192, 222, 0.1);
|
||||
}
|
||||
.contentmenu__item i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.contentmenu__item :first-child {
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
||||
86
ruoyi-ui/src/views/screen/page/group/imglist.vue
Normal file
86
ruoyi-ui/src/views/screen/page/group/imglist.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<el-dialog title="图库"
|
||||
width="80%"
|
||||
:visible.sync="imgVisible">
|
||||
<div style="margin:0 auto;">
|
||||
<el-upload class="upload-demo"
|
||||
:on-success="onSuccess"
|
||||
:show-file-list="false"
|
||||
:action="url+'/visual/put-file'"
|
||||
multiple
|
||||
list-type="picture">
|
||||
<el-button size="small"
|
||||
icon="el-icon-upload"
|
||||
type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<el-scrollbar class="imgList">
|
||||
<img :src="item.value"
|
||||
:style="styleName"
|
||||
@click="handleSetimg(item.value)"
|
||||
v-for="(item,index) in imgOption[imgActive]"
|
||||
:key="index" />
|
||||
</el-scrollbar>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { imgOption } from '@/option/config'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
imgVisible: false,
|
||||
imgObj: '',
|
||||
type: '',
|
||||
imgActive: 0,
|
||||
imgOption: imgOption,
|
||||
imgTabs: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
styleName () {
|
||||
if (this.type === 'background') {
|
||||
return {
|
||||
width: '200px'
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type: {
|
||||
handler () {
|
||||
if (this.type === 'background') {
|
||||
this.imgActive = 0;
|
||||
} else if (this.type == 'border') {
|
||||
this.imgActive = 1;
|
||||
} else {
|
||||
this.imgActive = 2;
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSuccess (res) {
|
||||
const url = res.data.link;
|
||||
this.imgOption[this.imgActive].unshift({
|
||||
label: url,
|
||||
value: url
|
||||
});
|
||||
},
|
||||
openImg (item, type) {
|
||||
this.type = type;
|
||||
this.imgObj = item
|
||||
this.imgVisible = true;
|
||||
},
|
||||
handleSetimg (item) {
|
||||
this.imgVisible = false;
|
||||
this.$emit('change', item, this.imgObj);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
121
ruoyi-ui/src/views/screen/page/group/layer.vue
Normal file
121
ruoyi-ui/src/views/screen/page/group/layer.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<draggable :group="{ name: 'form' }"
|
||||
ghost-class="ghost"
|
||||
:list="nav"
|
||||
:animation="300">
|
||||
<template v-for="item in nav">
|
||||
<div :key="item.index"
|
||||
class="menu__folder"
|
||||
v-if="item.children">
|
||||
<div @dblclick="hangeChangeName(item)"
|
||||
@click="handleSetActive(item)"
|
||||
@contextmenu.prevent="contain.handleContextMenu($event,item)"
|
||||
:class="['menu__item--folder',{'is-active':handleGetActive(item),'is-over':contain.overactive===item.index}]">
|
||||
<i class="iconfont icon-fold"
|
||||
@click="openFolder(item)"
|
||||
:class="{'is-active':item.menu}"></i>
|
||||
<i class="iconfont icon-folder"
|
||||
@click="openFolder(item)"></i>
|
||||
<input type="text"
|
||||
@keyup.enter="item.isname=false"
|
||||
v-if="item.isname"
|
||||
v-model="item.name">
|
||||
<span v-else>{{item.name}}</span>
|
||||
</div>
|
||||
<div :key="'list'
|
||||
+item.index"
|
||||
class="menu__list"
|
||||
v-show="item.menu">
|
||||
<draggable :group="{ name: 'form' }"
|
||||
ghost-class="ghost"
|
||||
:list="item.children"
|
||||
:animation="300">
|
||||
<template v-for="citem in item.children">
|
||||
<div v-if="!citem.children"
|
||||
:key="citem.index"
|
||||
:class="['menu__item',{'is-active':handleGetActive(citem),'is-over':contain.overactive===citem.index}]"
|
||||
@click="handleSetActive(citem)"
|
||||
@contextmenu.prevent="contain.handleContextMenu($event,citem)"
|
||||
@mouseover="contain.overactive=citem.index"
|
||||
@mouseout="contain.overactive=undefined">
|
||||
<span class="menu__icon">
|
||||
<i :class="'iconfont '+citem.icon"></i>
|
||||
</span>
|
||||
<span>{{citem.title}}</span>
|
||||
</div>
|
||||
<layer v-else
|
||||
:count="count+1"
|
||||
:key="citem.index"
|
||||
:nav="[citem]"></layer>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
:key="item.index"
|
||||
@contextmenu.prevent="contain.handleContextMenu($event,item)"
|
||||
@click="handleSetActive(item)"
|
||||
:class="['menu__item',{'is-active':handleGetActive(item),'is-over': contain.overactive===item.index}]"
|
||||
@mouseover="contain.overactive=item.index"
|
||||
@mouseout="contain.overactive=undefined">
|
||||
<span class="menu__icon">
|
||||
<i :class="'iconfont '+item.icon"></i>
|
||||
</span>
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vuedraggable from 'vuedraggable';
|
||||
export default {
|
||||
name: 'layer',
|
||||
inject: ["contain"],
|
||||
provide () {
|
||||
return {
|
||||
contain: this.contain
|
||||
};
|
||||
},
|
||||
components: {
|
||||
draggable: vuedraggable
|
||||
},
|
||||
props: {
|
||||
count: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
nav: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleGetActive (item) {
|
||||
return this.contain.active.includes(item.index);
|
||||
},
|
||||
handleSetActive (item) {
|
||||
if (this.contain.keys.ctrl) {
|
||||
if (!Array.isArray(this.contain.active)) {
|
||||
this.contain.handleInitActive();
|
||||
}
|
||||
this.contain.active.push(item.index)
|
||||
} else {
|
||||
this.contain.active = [item.index];
|
||||
}
|
||||
},
|
||||
hangeChangeName (item) {
|
||||
this.$set(item, 'isname', !item.isname)
|
||||
},
|
||||
openFolder (item) {
|
||||
this.$set(item, 'menu', !item.menu)
|
||||
item.isname = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
149
ruoyi-ui/src/views/screen/page/group/subgroup.vue
Normal file
149
ruoyi-ui/src/views/screen/page/group/subgroup.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-for="item in nav"
|
||||
:key="item.index"
|
||||
@contextmenu.prevent="contain.handleContextMenu($event,item)">
|
||||
<avue-draggable v-if="!item.children"
|
||||
v-bind="item"
|
||||
:scale="container.stepScale"
|
||||
:disabled="!contain.menuFlag"
|
||||
:step="container.stepScale"
|
||||
:width="item.component.width"
|
||||
:height="item.component.height"
|
||||
:ref="common.DEAFNAME+item.index"
|
||||
:id="common.DEAFNAME+item.index"
|
||||
v-show="!item.display"
|
||||
@over="handleOver"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur">
|
||||
<component :ref="common.NAME+item.index"
|
||||
:id="common.NAME+item.index"
|
||||
:is="common.COMPNAME+item.component.name"
|
||||
v-bind="item"
|
||||
:data-formatter="getFunction(item.dataFormatter)"
|
||||
:click-formatter="getFunction(item.clickFormatter)"
|
||||
:label-formatter="getFunction(item.labelFormatter)"
|
||||
:formatter="getFunction(item.formatter)"
|
||||
:width="item.component.width"
|
||||
:data-query="getJson(item.dataQuery)"
|
||||
:height="item.component.height"
|
||||
:animation="!contain.menuFlag"
|
||||
:theme="(item.option || {}).theme"
|
||||
:disabled="!contain.menuFlag"
|
||||
:scale="container.stepScale"
|
||||
:option="item.option"
|
||||
:home-url="contain.config.url"
|
||||
:click="handleClick" />
|
||||
</avue-draggable>
|
||||
<subgroup :nav="item.children"></subgroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addUrlParam } from '@/utils/utils'
|
||||
import common from '@/config'
|
||||
export default {
|
||||
name: 'subgroup',
|
||||
inject: ["contain", 'container'],
|
||||
// provide () {
|
||||
// return {
|
||||
// contain: this.contain,
|
||||
// container: this.container
|
||||
// };
|
||||
// },
|
||||
props: {
|
||||
nav: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
common: common,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getFunction (fun) {
|
||||
if (!this.validatenull(fun)) {
|
||||
try {
|
||||
return eval(fun);
|
||||
} catch {
|
||||
return function () { }
|
||||
}
|
||||
}
|
||||
},
|
||||
getJson (str) {
|
||||
if (this.validatenull(str)) return {};
|
||||
if (typeof str == "string") {
|
||||
try {
|
||||
return JSON.parse(str);
|
||||
} catch {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
return str;
|
||||
},
|
||||
//点击事件交互
|
||||
handleClick ({ type, child, value }) {
|
||||
if (type === 'tabs') {
|
||||
const indexList = child.index;
|
||||
indexList.forEach((index) => {
|
||||
const paramName = child.paramName;
|
||||
const item = this.contain.findlist(index);
|
||||
if (!item.url) return
|
||||
let params = {};
|
||||
if (item.dataQuery) {
|
||||
params = this.getJson(item.dataQuery)
|
||||
} else {
|
||||
params = {}
|
||||
}
|
||||
params[paramName] = value;
|
||||
item.dataQuery = JSON.stringify(params);
|
||||
this.$refs[this.common.NAME + index].forEach(ele => {
|
||||
ele.updateData();
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
//刷新数据
|
||||
handleRefresh (tip = true) {
|
||||
this.$refs[this.common.NAME + this.contain.activeObj.index][0].updateData();
|
||||
if (tip) {
|
||||
this.$message.success('刷新成功')
|
||||
}
|
||||
},
|
||||
//获取对象
|
||||
handleGetObj (val) {
|
||||
return this.$refs[`${this.common.DEAFNAME}${val}`];
|
||||
},
|
||||
handleOver ({ index }) {
|
||||
this.contain.overactive = index;
|
||||
},
|
||||
handleFocus ({ index }) {
|
||||
this.container.gradeFlag = true;
|
||||
if (this.contain.keys.ctrl) {
|
||||
if (!Array.isArray(this.contain.active)) {
|
||||
this.contain.handleInitActive();
|
||||
}
|
||||
this.contain.active.push(index);
|
||||
} else if (!this.contain.active.includes(index)) {
|
||||
this.contain.active = [index];
|
||||
}
|
||||
},
|
||||
handleBlur ({ left, top, width, height }) {
|
||||
if (Array.isArray(this.contain.activeObj)) return
|
||||
this.container.gradeFlag = false;
|
||||
this.$set(this.contain.activeObj.component, 'width', width)
|
||||
this.$set(this.contain.activeObj.component, 'height', height)
|
||||
this.$set(this.contain.activeObj, 'left', left)
|
||||
this.$set(this.contain.activeObj, 'top', top)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
192
ruoyi-ui/src/views/screen/page/group/top.vue
Normal file
192
ruoyi-ui/src/views/screen/page/group/top.vue
Normal file
@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-menu class="nav"
|
||||
mode="horizontal"
|
||||
background-color="#212528"
|
||||
text-color="#fff"
|
||||
active-text-color="#409EFF"
|
||||
@mousedown="contain.handleMouseDown">
|
||||
<el-submenu :index="index+''"
|
||||
v-for="(item,index) in baseList"
|
||||
:key="index">
|
||||
<template slot="title">
|
||||
<el-tooltip effect="dark"
|
||||
:content="item.label"
|
||||
placement="top">
|
||||
<i :class="'nav__icon iconfont '+item.icon"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<el-menu-item @click="handleAdd(citem.option,true)"
|
||||
:key="cindex"
|
||||
:index="`${index}-${cindex}`"
|
||||
v-for="(citem,cindex) in item.children">
|
||||
<i :class="'nav__icon iconfont '+citem.option.icon"></i>
|
||||
<span>{{citem.label}}</span>
|
||||
</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item index="6"
|
||||
@click="handleReset"
|
||||
v-show="!contain.menuFlag">
|
||||
<el-tooltip effect="dark"
|
||||
content="还原"
|
||||
placement="top">
|
||||
<i class="nav__icon iconfont icon-reset"></i>
|
||||
</el-tooltip>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="7"
|
||||
@click="handleView"
|
||||
v-show="contain.menuFlag">
|
||||
<el-tooltip effect="dark"
|
||||
content="预览"
|
||||
placement="top">
|
||||
<i class="nav__icon iconfont icon-view"></i>
|
||||
</el-tooltip>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="8"
|
||||
@click="handleBuild">
|
||||
<el-tooltip effect="dark"
|
||||
content="保存"
|
||||
placement="top">
|
||||
<i class="nav__icon iconfont icon-build"></i>
|
||||
</el-tooltip>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { uuid } from '@/utils/utils'
|
||||
import baseList from '@/option/base'
|
||||
import { updateComponent } from '@/api/visual'
|
||||
export default {
|
||||
inject: ["contain"],
|
||||
data () {
|
||||
return {
|
||||
baseList: baseList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
vaildData (id) {
|
||||
const list = [];
|
||||
for (var i = 0; i < 20; i++) {
|
||||
list.push(i + '')
|
||||
}
|
||||
return list.includes(id)
|
||||
},
|
||||
handleView () {
|
||||
this.contain.menuFlag = false;
|
||||
this.contain.handleInitActive();
|
||||
this.contain.setScale(document.body.clientWidth);
|
||||
},
|
||||
handleReset () {
|
||||
this.contain.menuFlag = true;
|
||||
this.contain.setScale(this.contain.contentWidth);
|
||||
},
|
||||
handleBuild () {
|
||||
this.contain.handleInitActive();
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在保存配置，请稍后',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
html2canvas(document.getElementById('content'), {
|
||||
onrendered: (canvas) => {
|
||||
function dataURLtoFile (dataurl, filename) {
|
||||
var arr = dataurl.split(','),
|
||||
mime = arr[0].match(/:(.*?);/)[1],
|
||||
bstr = atob(arr[1]),
|
||||
n = bstr.length,
|
||||
u8arr = new Uint8Array(n);
|
||||
while (n--) {
|
||||
u8arr[n] = bstr.charCodeAt(n);
|
||||
}
|
||||
return new File([u8arr], filename, { type: mime });
|
||||
}
|
||||
|
||||
var file = dataURLtoFile(canvas.toDataURL('image/jpeg', 0.1), new Date().getTime() + '.jpg');
|
||||
var formdata = new FormData();
|
||||
formdata.append('file', file)
|
||||
axios.post(this.url + '/visual/put-file', formdata, {
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
}
|
||||
}).then(res => {
|
||||
|
||||
// console.log('666666666666666')
|
||||
|
||||
const data = res.data;
|
||||
console.log(res.data);
|
||||
// console.log('666666666666666888888888888888')
|
||||
const url = data.link;
|
||||
// console.log('66666666666666688888888888888899999999999999999999')
|
||||
const formdata = {
|
||||
visual: {
|
||||
id: this.contain.visual.id,
|
||||
backgroundUrl: url
|
||||
},
|
||||
config: {
|
||||
id: this.contain.obj.config.id,
|
||||
visualId: this.contain.visual.id,
|
||||
detail: JSON.stringify(this.contain.config),
|
||||
component: JSON.stringify(this.contain.nav),
|
||||
},
|
||||
}
|
||||
return updateComponent(formdata)
|
||||
}).then(() => {
|
||||
loading.close();
|
||||
this.$confirm('保存成功大屏配置, 是否打开预览?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/view/' + this.contain.id
|
||||
})
|
||||
window.open(routeUrl.href, '_blank');
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
}).catch(() => {
|
||||
this.$message.error('模版例子不能修改')
|
||||
loading.close();
|
||||
})
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
handleAdd (option, first = false) {
|
||||
let obj = this.deepClone(option);
|
||||
obj.left = 0;
|
||||
obj.top = 0
|
||||
obj.index = uuid();
|
||||
if (first) {
|
||||
this.contain.nav.unshift(obj);
|
||||
} else {
|
||||
this.contain.nav.push(obj);
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.nav {
|
||||
border-bottom: 0 !important;
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nav__icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.nav .el-submenu .el-submenu__title,
|
||||
.nav .el-menu-item {
|
||||
height: 45px;
|
||||
line-height: 45px;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
72
ruoyi-ui/src/views/screen/page/index.vue
Normal file
72
ruoyi-ui/src/views/screen/page/index.vue
Normal file
@ -0,0 +1,72 @@
|
||||
<template>
|
||||
|
||||
<el-container class="list">
|
||||
<el-aside width="230px">
|
||||
<h2 class="title">Avue-data数据大屏</h2>
|
||||
<el-menu :default-active="activeName"
|
||||
background-color="#171b22"
|
||||
text-color="#fff"
|
||||
@select="handleSelect"
|
||||
active-text-color="#00baff">
|
||||
<el-menu-item index="1">
|
||||
<i class="el-icon-document"></i>
|
||||
大屏管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="2">
|
||||
<i class="el-icon-document"></i>
|
||||
地图管理
|
||||
</el-menu-item>
|
||||
<el-menu-item index="3">
|
||||
<i class="el-icon-document"></i>
|
||||
分类管理
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
<el-scrollbar class="list"
|
||||
style="width:100%;height:800px;">
|
||||
<list v-if="activeName==1"></list>
|
||||
<maps v-if="activeName==2"></maps>
|
||||
<category v-if="activeName==3"></category>
|
||||
</el-scrollbar>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import list from './list/index'
|
||||
import maps from './list/map'
|
||||
import category from './list/category'
|
||||
//导入主题文件
|
||||
import '@/theme/index.js'
|
||||
// import '@/styles/common.scss'
|
||||
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
list,
|
||||
maps,
|
||||
category
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
activeName: '1',
|
||||
}
|
||||
},
|
||||
created () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleSelect (key) {
|
||||
this.activeName = key;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
font-size: 20px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
126
ruoyi-ui/src/views/screen/page/list/category.vue
Normal file
126
ruoyi-ui/src/views/screen/page/list/category.vue
Normal file
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<avue-crud :option="option"
|
||||
v-model="form"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
:before-open="beforeOpen"
|
||||
:data="data"></avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, getObj, addObj, delObj, updateObj } from '@/api/category'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
form: {},
|
||||
data: [],
|
||||
option: {
|
||||
index: true,
|
||||
align: 'center',
|
||||
headerAlign: 'center',
|
||||
column: [
|
||||
{
|
||||
label: '模块名',
|
||||
prop: 'categoryKey',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入模块名",
|
||||
trigger: "blur"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: '模块值',
|
||||
prop: 'categoryValue',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入模块值",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
vaildData (id) {
|
||||
return [0, 1].includes(id)
|
||||
},
|
||||
beforeOpen (done, type) {
|
||||
if (type == 'edit') {
|
||||
getObj(this.form.id).then(res => {
|
||||
const data = res.data;
|
||||
this.form = data
|
||||
done()
|
||||
})
|
||||
} else {
|
||||
done()
|
||||
}
|
||||
},
|
||||
rowDel (row, index) {
|
||||
if (this.vaildData(index)) {
|
||||
this.$message.error('例子模板不允许修改')
|
||||
return false;
|
||||
}
|
||||
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delObj(row.id).then(() => {
|
||||
this.$message.success('删除成功');
|
||||
this.getList()
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
rowUpdate (row, index, done) {
|
||||
if (this.vaildData(index)) {
|
||||
this.$message.error('例子模板不允许修改')
|
||||
return false;
|
||||
}
|
||||
updateObj(row).then(() => {
|
||||
this.$message.success('修改成功');
|
||||
this.getList()
|
||||
done();
|
||||
})
|
||||
},
|
||||
rowSave (row, done) {
|
||||
addObj(row).then(() => {
|
||||
this.$message.success('新增成功');
|
||||
this.getList()
|
||||
done();
|
||||
})
|
||||
},
|
||||
getList () {
|
||||
getList({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
}).then(res => {
|
||||
const data = res.data;
|
||||
this.data = data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
.title {
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
349
ruoyi-ui/src/views/screen/page/list/index.vue
Normal file
349
ruoyi-ui/src/views/screen/page/list/index.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<el-container class="list">
|
||||
<el-header>
|
||||
<el-menu :default-active="activeName"
|
||||
mode="horizontal"
|
||||
background-color="#171b22"
|
||||
text-color="#fff"
|
||||
active-text-color="#00baff"
|
||||
@select="handleSelect">
|
||||
<el-menu-item :index="item.categoryValue"
|
||||
:key="item.categoryValue"
|
||||
v-for="item in typelist"
|
||||
@click="getList(item.categoryValue)">
|
||||
<i class="iconfont icon-daping"></i>
|
||||
{{item.categoryKey}}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
</el-header>
|
||||
<el-main>
|
||||
<div class="page">
|
||||
<el-pagination layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-size="page.size"
|
||||
:current-page.sync="page.page"
|
||||
:total="page.total">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="content__item content__item--add"
|
||||
@click="handleAdd">
|
||||
<div>
|
||||
<i class="el-icon-plus"></i>
|
||||
<p>新建大屏</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content__item"
|
||||
v-for="(item,index) in list"
|
||||
:key="index"
|
||||
@mouseover="item._menu=true"
|
||||
@mouseout="item._menu=false">
|
||||
<div class="content__info">
|
||||
<img v-if="item.backgroundUrl"
|
||||
:src="item.backgroundUrl"
|
||||
alt="" />
|
||||
<div class="content__menu"
|
||||
v-show="item._menu">
|
||||
<div class="content__btn"
|
||||
@click="handleEdit(item)">
|
||||
编辑
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content__main">
|
||||
<span class="content__name">{{item.title}}</span>
|
||||
<div class="content__menulist">
|
||||
<div class="content__view">
|
||||
<el-tooltip content="删除">
|
||||
<i class="el-icon-delete"
|
||||
@click="handleDel(item,index)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="编辑">
|
||||
<i class="el-icon-edit"
|
||||
@click="handleUpdate(item,index)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="预览">
|
||||
<i class="el-icon-view"
|
||||
@click="handleViews(item,index)"></i>
|
||||
</el-tooltip>
|
||||
<el-tooltip content="复制">
|
||||
<i class="el-icon-copy-document"
|
||||
@click="handleCopy(item,index)"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<span class="content__status"
|
||||
:class="{'content__status--active':item.status}">
|
||||
{{item.status?'已发布':'未发布'}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-dialog title="新建大屏"
|
||||
width="35%"
|
||||
:visible.sync="box">
|
||||
<avue-form :option="option"
|
||||
v-model="form"
|
||||
@submit="handleSave"></avue-form>
|
||||
</el-dialog>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import { getList, addObj, updateObj, delObj, getCategory, copyObj } from '@/api/visual';
|
||||
export default {
|
||||
name: "list",
|
||||
data () {
|
||||
return {
|
||||
typelist: [],
|
||||
index: 0,
|
||||
type: '',
|
||||
option: {
|
||||
column: [{
|
||||
label: '分组',
|
||||
prop: 'category',
|
||||
span: 24,
|
||||
labelWidth: 100,
|
||||
type: 'select',
|
||||
dicUrl: this.url + '/category/list',
|
||||
props: {
|
||||
label: 'categoryKey',
|
||||
value: 'categoryValue',
|
||||
},
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请选择分组",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}, {
|
||||
label: '大屏名称',
|
||||
span: 24,
|
||||
labelWidth: 100,
|
||||
prop: 'title',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入大屏名称",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}, {
|
||||
label: '大屏尺寸',
|
||||
span: 14,
|
||||
labelWidth: 100,
|
||||
prop: 'width',
|
||||
placeholder: '请输入宽度',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入大屏尺寸",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}, {
|
||||
label: '',
|
||||
span: 10,
|
||||
labelWidth: 1,
|
||||
prop: 'height',
|
||||
placeholder: '请输入高度',
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入大屏尺寸",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}, {
|
||||
label: '密码',
|
||||
span: 24,
|
||||
type: 'password',
|
||||
labelWidth: 100,
|
||||
prop: 'password',
|
||||
}, {
|
||||
label: '发布状态',
|
||||
prop: 'status',
|
||||
span: 24,
|
||||
labelWidth: 100,
|
||||
type: 'select',
|
||||
dicData: [{
|
||||
label: '未发布',
|
||||
value: 0
|
||||
}, {
|
||||
label: '已发布',
|
||||
value: 1
|
||||
}]
|
||||
}]
|
||||
},
|
||||
page: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
},
|
||||
form: {},
|
||||
box: false,
|
||||
activeName: '',
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getCategory()
|
||||
console.log(this.url);
|
||||
},
|
||||
methods: {
|
||||
vaildData (id) {
|
||||
const list = [];
|
||||
for (var i = 0; i < 20; i++) {
|
||||
list.push(i)
|
||||
}
|
||||
return list.includes(id)
|
||||
},
|
||||
getCategory () {
|
||||
getCategory().then(res => {
|
||||
console.log(res);
|
||||
const data = res.data;
|
||||
this.typelist = data;
|
||||
this.activeName = (data[0] || {}).categoryValue;
|
||||
this.getList();
|
||||
})
|
||||
},
|
||||
handleCopy (item) {
|
||||
this.$confirm('确认复制当前大屏', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
copyObj(item.id).then(() => {
|
||||
this.$message.success('复制成功');
|
||||
this.getList();
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
handleDel (item, index) {
|
||||
this.$confirm('是否确认永久删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
if (this.vaildData(index)) {
|
||||
this.$message.error('例子模板不允许修改')
|
||||
return false;
|
||||
}
|
||||
delObj(item.id).then(() => {
|
||||
this.list.splice(index, 1)
|
||||
this.$message.success('删除成功')
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
handleUpdate (item, index) {
|
||||
this.form = item
|
||||
this.form.category = this.form.category + '';
|
||||
this.type = 'edit';
|
||||
this.option.column[2].display = false;
|
||||
this.option.column[3].display = false;
|
||||
this.box = true;
|
||||
this.index = index;
|
||||
},
|
||||
handleEdit (item) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/build/' + item.id
|
||||
})
|
||||
if(self!=top){
|
||||
// 页面在iframe中时处理容
|
||||
|
||||
window.location.replace(routeUrl.href);
|
||||
}else{
|
||||
window.open(routeUrl.href, '_blank');
|
||||
}
|
||||
},
|
||||
handleViews (item) {
|
||||
let routeUrl = this.$router.resolve({
|
||||
path: '/view/' + item.id
|
||||
})
|
||||
window.open(routeUrl.href, '_blank');
|
||||
},
|
||||
handleAdd () {
|
||||
this.type = 'add';
|
||||
this.option.column[5].display = false;
|
||||
this.form.category = this.activeName;
|
||||
this.form.width = 1920;
|
||||
this.form.height = 1080;
|
||||
this.box = true;
|
||||
},
|
||||
handleSave (form, done) {
|
||||
done();
|
||||
if (this.type == 'add') {
|
||||
addObj(Object.assign({
|
||||
category: this.activeName,
|
||||
}, this.form)).then(res => {
|
||||
this.box = false;
|
||||
this.$message.success('新增成功');
|
||||
this.getList();
|
||||
const id = res.data.id;
|
||||
this.handleEdit({ id })
|
||||
})
|
||||
} else {
|
||||
if (this.vaildData(Number(this.index))) {
|
||||
this.$message.error('例子模板不允许修改')
|
||||
return false;
|
||||
}
|
||||
updateObj(Object.assign({
|
||||
category: this.activeName
|
||||
}, {
|
||||
id: this.form.id,
|
||||
password: this.form.password,
|
||||
status: this.form.status,
|
||||
title: this.form.title
|
||||
})).then(() => {
|
||||
this.box = false;
|
||||
this.$message.success('修改成功');
|
||||
this.getList();
|
||||
})
|
||||
}
|
||||
},
|
||||
handleSelect (key) {
|
||||
this.activeName = key;
|
||||
this.page.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange (val) {
|
||||
this.page.page = val;
|
||||
this.getList();
|
||||
},
|
||||
handleSizeChange (val) {
|
||||
this.page.size = val;
|
||||
this.getList();
|
||||
},
|
||||
getList (category) {
|
||||
const loading = this.$loading({
|
||||
lock: true,
|
||||
text: '正在加载中，请稍后',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
this.list = []
|
||||
getList({
|
||||
category: category || this.activeName,
|
||||
pageNum: this.page.page,
|
||||
pageSize: this.page.size,
|
||||
}).then(res => {
|
||||
loading.close();
|
||||
const data = res.data;
|
||||
this.page.total = data.total;
|
||||
this.list = data.records
|
||||
this.initData();
|
||||
})
|
||||
},
|
||||
initData () {
|
||||
this.list.forEach((ele, index) => {
|
||||
this.$set(this.list[index], '_menu', false)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/styles/list.scss";
|
||||
</style>
|
||||
142
ruoyi-ui/src/views/screen/page/list/map.vue
Normal file
142
ruoyi-ui/src/views/screen/page/list/map.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div class="map">
|
||||
<a class="title"
|
||||
target="_blank"
|
||||
href="https://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4">点击我添加更多地图</a>
|
||||
<avue-crud :option="option"
|
||||
v-model="form"
|
||||
@row-save="rowSave"
|
||||
@row-update="rowUpdate"
|
||||
@row-del="rowDel"
|
||||
:before-open="beforeOpen"
|
||||
:data="data">
|
||||
<template slot="dataForm"
|
||||
slot-scope="{}">
|
||||
<codeedit v-model="form.data"
|
||||
ref="codeedit"></codeedit>
|
||||
</template>
|
||||
</avue-crud>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import codeedit from '../group/code';
|
||||
import { getList, getObj, addObj, delObj, updateObj } from '@/api/map'
|
||||
export default {
|
||||
components: {
|
||||
codeedit
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
form: {},
|
||||
data: [],
|
||||
option: {
|
||||
labelWidth: 100,
|
||||
index: true,
|
||||
align: 'center',
|
||||
headerAlign: 'center',
|
||||
column: [
|
||||
{
|
||||
label: '地图名称',
|
||||
prop: 'name',
|
||||
row: true,
|
||||
rules: [{
|
||||
required: true,
|
||||
message: "请输入地图名称",
|
||||
trigger: "blur"
|
||||
}]
|
||||
},
|
||||
{
|
||||
label: '地图数据',
|
||||
prop: 'data',
|
||||
span: 24,
|
||||
hide: true,
|
||||
formslot: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
vaildData (id) {
|
||||
return [0, 1, 2].includes(id)
|
||||
},
|
||||
beforeOpen (done, type) {
|
||||
if (type == 'edit') {
|
||||
getObj(this.form.id).then(res => {
|
||||
const data = res.data;
|
||||
this.form = data
|
||||
this.form.data = JSON.stringify(JSON.parse(this.form.data), null, 4)
|
||||
done()
|
||||
})
|
||||
} else {
|
||||
done()
|
||||
}
|
||||
},
|
||||
rowDel (row, index) {
|
||||
if (this.vaildData(index)) {
|
||||
this.$message.error('例子模板不允许修改')
|
||||
return false;
|
||||
}
|
||||
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delObj(row.id).then(() => {
|
||||
this.$message.success('删除成功');
|
||||
this.getList()
|
||||
})
|
||||
}).catch(() => {
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
rowUpdate (row, index, done) {
|
||||
if (this.vaildData(index)) {
|
||||
this.$message.error('例子模板不允许修改')
|
||||
return false;
|
||||
}
|
||||
row.data = this.$refs.codeedit.getValue()
|
||||
updateObj(row).then(() => {
|
||||
this.$message.success('修改成功');
|
||||
this.getList()
|
||||
done();
|
||||
})
|
||||
},
|
||||
rowSave (row, done) {
|
||||
row.data = this.$refs.codeedit.getValue()
|
||||
addObj(row).then(() => {
|
||||
this.$message.success('新增成功');
|
||||
this.getList()
|
||||
done();
|
||||
})
|
||||
},
|
||||
getList () {
|
||||
getList({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
}).then(res => {
|
||||
const data = res.data;
|
||||
this.data = data.records;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
.title {
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
padding: 0 50px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
14
ruoyi-ui/src/views/screen/page/view.vue
Normal file
14
ruoyi-ui/src/views/screen/page/view.vue
Normal file
@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<div class="build views">
|
||||
<container ref="container"></container>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import init from '@/mixins/'
|
||||
export default {
|
||||
mixins: [init],
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "../styles/style.scss";
|
||||
</style>
|
||||
243
ruoyi-ui/src/views/screen/styles/common.scss
Normal file
243
ruoyi-ui/src/views/screen/styles/common.scss
Normal file
@ -0,0 +1,243 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #171b22;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background-color: transparent;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: hsla(220, 4%, 58%, .3);
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.img{
|
||||
margin-right: 5px;
|
||||
}
|
||||
.block{
|
||||
margin: 0 auto;
|
||||
width:90%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
color:#409EFF;
|
||||
}
|
||||
|
||||
|
||||
.el-select-dropdown {
|
||||
border-radius: 0;
|
||||
border:none;
|
||||
color: #bcc9d4;
|
||||
background-color: #27343e;
|
||||
color: #bcc9d4;
|
||||
}
|
||||
.el-select-dropdown__item{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-select-dropdown__item.selected,.el-select-dropdown__item.hover{
|
||||
font-weight: normal;
|
||||
background-color: rgba(0,192,222,.1);
|
||||
}
|
||||
.el-select-dropdown__item.hover{
|
||||
color: #fff;
|
||||
}
|
||||
.el-select-dropdown__item.selected{
|
||||
color: #fff;
|
||||
}
|
||||
.el-input-group__append, .el-input-group__prepend,.el-dialog .el-input-group__append, .el-dialog .el-input-group__prepend{
|
||||
background-color: #0f1014;
|
||||
border-color: #282e3a;
|
||||
}
|
||||
|
||||
.el-collapse-item__header.is-active{
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
.el-collapse-item__wrap{
|
||||
background-color:#000;
|
||||
border-bottom: none;
|
||||
}
|
||||
.el-radio__input, .params .el-radio__label,.params input{
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-table th, .el-table tr,.el-table, .el-table__expanded-cell {
|
||||
background-color: transparent !important;
|
||||
color:#859094 !important;
|
||||
}
|
||||
.el-table td, .el-table th.is-leaf {
|
||||
border-color: #859094 !important;
|
||||
}
|
||||
.avue-empty__desc{
|
||||
color:#fff;
|
||||
}
|
||||
.el-form-item__label, .el-dialog .el-form-item__label{
|
||||
color:#fff !important;
|
||||
}
|
||||
|
||||
.hover-row td,.hover-row th{
|
||||
background-color: transparent !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
.el-table__fixed-right::before, .el-table__fixed::before,.el-table::before{
|
||||
display: none;
|
||||
}
|
||||
.el-table td, .el-table th.is-leaf {
|
||||
border-bottom:none;
|
||||
}
|
||||
.el-dialog ,.avue-group__item{
|
||||
background: #1b1e25;
|
||||
}
|
||||
.el-message-box{
|
||||
background: #1b1e25;
|
||||
border-color: #1b1e25;
|
||||
}
|
||||
.el-message-box__title{
|
||||
color:#fff;
|
||||
}
|
||||
.el-dialog__title{
|
||||
color:#fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-dialog__body{
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.el-collapse-item__arrow.is-active{
|
||||
color:#fff;
|
||||
}
|
||||
.el-collapse{
|
||||
border-top:none;
|
||||
border-bottom: none;
|
||||
}
|
||||
input{
|
||||
border-width: 2px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.avue-crud{
|
||||
width: 90%;
|
||||
}
|
||||
.el-radio{
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.el-color-picker__trigger,.el-dialog .el-color-picker__trigger{
|
||||
border:none;
|
||||
}
|
||||
.el-collapse-item__arrow{
|
||||
position: absolute;
|
||||
left:10px;
|
||||
line-height: 40px;
|
||||
color:#bcc9d4;
|
||||
}
|
||||
|
||||
|
||||
.el-form-item{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.el-pagination__total{
|
||||
color:#fff;
|
||||
}
|
||||
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
|
||||
background-color:transparent;
|
||||
color: #fff;
|
||||
}
|
||||
.el-pagination.is-background .el-pager li:not(.disabled).active{
|
||||
background-color: transparent;
|
||||
border:1px solid #409EFF;
|
||||
}
|
||||
.el-form-item__label,.el-dialog .el-form-item__label{
|
||||
color:#859094;
|
||||
padding-left: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.el-form-item__content, .el-dialog .el-form-item__content{
|
||||
padding-right: 20px;
|
||||
}
|
||||
.el-checkbox__inner,input,.el-slider__runway,textarea,
|
||||
.el-dialog input,.el-switch__core,.el-dialog .el-slider__runway,.el-dialog textarea{
|
||||
background-color: #0f1014 !important;
|
||||
color:#859094 !important;
|
||||
border-color:#282e3a !important;
|
||||
}
|
||||
.el-switch.is-checked .el-switch__core {
|
||||
border-color: #409EFF !important;
|
||||
background-color: #409EFF !important;
|
||||
}
|
||||
.el-button,.el-dialog .el-button{
|
||||
border-radius: 0;
|
||||
}
|
||||
.el-button--primary,.el-dialog .el-button--primary{
|
||||
background-color: transparent;
|
||||
color:#409EFF;
|
||||
border-color:#409EFF;
|
||||
}
|
||||
.el-button--danger,.el-dialog .el-button--danger{
|
||||
background-color: transparent;
|
||||
color:#f56c6c;
|
||||
border-color:#f56c6c;
|
||||
}
|
||||
.el-button--default,.el-dialog .el-button--default{
|
||||
background-color: transparent;
|
||||
color:#859094;
|
||||
border-color:#859094;
|
||||
}
|
||||
.el-collapse-item__content{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{
|
||||
background-color: initial;
|
||||
color:#fff;
|
||||
}
|
||||
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
|
||||
background-color: initial;
|
||||
color:#fff;
|
||||
}
|
||||
.el-dialog__title{
|
||||
color:#fff !important;
|
||||
}
|
||||
.el-collapse-item__header{
|
||||
padding-left: 20px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: transparent;
|
||||
color:#bcc9d4;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
border-color: #282e3a;
|
||||
}
|
||||
|
||||
.icon-gauge{
|
||||
font-size: 12px !important;
|
||||
}
|
||||
135
ruoyi-ui/src/views/screen/styles/list.scss
Normal file
135
ruoyi-ui/src/views/screen/styles/list.scss
Normal file
@ -0,0 +1,135 @@
|
||||
.list{
|
||||
.el-menu{
|
||||
border-right: none;
|
||||
}
|
||||
.el-menu.el-menu--horizontal {
|
||||
border-color: rgb(33, 37, 40);
|
||||
border-width: 2px;
|
||||
}
|
||||
.page{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.el-menu i {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&__item{
|
||||
position: relative;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 258px;
|
||||
height: 184px;
|
||||
border: 1px solid #3a4659;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
box-shadow: 0 0 20px 0 #000;
|
||||
border: 1px solid #00baff;
|
||||
}
|
||||
&--add {
|
||||
height: 184px;
|
||||
width: 258px;
|
||||
border: 1px solid #00baff;
|
||||
font-size: 14px;
|
||||
color: #8eeeff;
|
||||
background-image: linear-gradient(-90deg, rgba(0, 222, 255, .39) 0, rgba(0, 174, 255, .19) 100%);
|
||||
box-shadow: 0 0 10px 0 rgba(55, 224, 255, .3);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
i {
|
||||
display: block;
|
||||
padding-bottom: 10px;
|
||||
text-align: center;
|
||||
font-size: 19px;
|
||||
}
|
||||
p {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&__main {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
justify-content: space-between;
|
||||
background: #1d262e;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
color: #bcc9d4;
|
||||
a{
|
||||
color:#bcc9d4;
|
||||
}
|
||||
i{
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
&__view{
|
||||
margin-right: 2px;
|
||||
}
|
||||
&__menulist{
|
||||
display: flex;
|
||||
i{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&__status--active {
|
||||
color: #fff
|
||||
}
|
||||
&__name {
|
||||
width: 100px;
|
||||
padding: 0 5px;
|
||||
line-height: 28px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
&__info {
|
||||
position: relative;
|
||||
height: calc(100% - 36px);
|
||||
}
|
||||
&__menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: rgba(29,38,46,0.8);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&__btn {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
outline: 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
background-image: linear-gradient(-225deg, #00d3f1 0, #12b3ff 100%);
|
||||
color: #293f52;
|
||||
border: none;
|
||||
transition: .3s ease;
|
||||
cursor: pointer
|
||||
}
|
||||
&__info{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
315
ruoyi-ui/src/views/screen/styles/style.scss
Normal file
315
ruoyi-ui/src/views/screen/styles/style.scss
Normal file
@ -0,0 +1,315 @@
|
||||
|
||||
.build{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.app {
|
||||
width:100%;
|
||||
height: calc(100% - 45px);
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selectall{
|
||||
position: absolute;
|
||||
border: 1px dotted #409EFF;
|
||||
z-index:10000;
|
||||
}
|
||||
.icon{
|
||||
font-size: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.selectbg{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
z-index:9999;
|
||||
}
|
||||
.selectflag{
|
||||
width:100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
z-index:9999;
|
||||
cursor: move;
|
||||
}
|
||||
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title{
|
||||
font-size: 12px;
|
||||
}
|
||||
.menu {
|
||||
width: 180px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
color:#bcc8d4;
|
||||
background: #1d1f26;
|
||||
}
|
||||
.menu__list{
|
||||
padding-left: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.menu__item--folder{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 6px;
|
||||
color:#bcc9d4;
|
||||
font-size: 12px;
|
||||
input{
|
||||
border:none;
|
||||
outline: none;
|
||||
}
|
||||
.icon-folder{
|
||||
font-size: 16px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.icon-fold{
|
||||
font-size: 12px;
|
||||
margin-right: 10px;
|
||||
transform: rotate(90deg);
|
||||
display:inline-block;
|
||||
font-weight: bold;
|
||||
&.is-active{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&.is-active{
|
||||
color: #fff;
|
||||
background: rgba(143,225,255,.1);
|
||||
}
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: rgba(143,225,255,.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.menu__folder{
|
||||
&.ghost{
|
||||
opacity: .6;
|
||||
color:#fff;
|
||||
background: #409EFF !important;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
.menu__item {
|
||||
margin-bottom: 1px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 6px;
|
||||
position: relative;
|
||||
background: #1b1f25;
|
||||
cursor: pointer;
|
||||
flex: none;
|
||||
font-size: 12px;
|
||||
&.is-over,&:hover {
|
||||
color: #fff;
|
||||
background: rgba(143,225,255,.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
&.ghost{
|
||||
opacity: .6;
|
||||
color:#fff;
|
||||
background: #409EFF !important;
|
||||
cursor: move;
|
||||
}
|
||||
&.is-active {
|
||||
background: #409EFF !important;
|
||||
color: #373d41 !important;
|
||||
}
|
||||
}
|
||||
.menu__icon{
|
||||
color: #409EFF;
|
||||
margin-right: 10px;
|
||||
width: 53px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
border: 1px solid #3a4659;
|
||||
background: #282a30;
|
||||
}
|
||||
.top{
|
||||
padding: 10px 20px;
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
z-index:9999;
|
||||
background-color: rgba(255,255,255,.4);
|
||||
}
|
||||
.middle{
|
||||
background-color: #2a2d32;
|
||||
flex:1;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.wrapper {
|
||||
position: relative;
|
||||
padding:60px 0 0 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.content{
|
||||
transform-origin: 0 0;
|
||||
background-color: #333;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.footer__menu{
|
||||
padding-top: 8px;
|
||||
margin-right:370px;
|
||||
float: right;
|
||||
width:300px;
|
||||
}
|
||||
.app--none{
|
||||
padding: 0;
|
||||
height:100%;
|
||||
}
|
||||
.app--none .wrapper{
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.app--none .content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border:none;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.wrapper__grade{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
background: url(https://img.alicdn.com/tfs/TB184VLcPfguuRjSspkXXXchpXa-14-14.png) repeat;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding:0 20px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
line-height: 35px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
letter-spacing: 2px;
|
||||
text-indent: 2px;
|
||||
background-color:#2d343c;
|
||||
color:#fff;
|
||||
&--left{
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.params {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.tabs{
|
||||
margin-top: -10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tabs .el-input-number{
|
||||
width:100%;
|
||||
}
|
||||
.tabs .el-tabs__header{
|
||||
background: #27343e;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
.tabs i{
|
||||
color: #bcc9d4;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tabs .is-active i{
|
||||
color: #409EFF;
|
||||
|
||||
}
|
||||
.tabs .el-tabs__nav-wrap::after{
|
||||
background: #27343e;
|
||||
}
|
||||
.tabs .el-tabs__item{
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tabs .el-tabs__active-bar{
|
||||
top:0;
|
||||
}
|
||||
|
||||
.el-collapse-item__header{
|
||||
padding-left: 30px;
|
||||
}
|
||||
.el-switch__core{
|
||||
width: 35px;
|
||||
height: 16px;
|
||||
}
|
||||
.el-switch{
|
||||
height:10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
.el-switch__core:after{
|
||||
top:-1px;
|
||||
width: 16px;
|
||||
height:16px;
|
||||
}
|
||||
.el-slider__button-wrapper{
|
||||
top:-17px;
|
||||
}
|
||||
.el-slider__button{
|
||||
border-radius: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-width: 1px;
|
||||
}
|
||||
.el-slider__bar,.el-slider__runway{
|
||||
height: 2px;
|
||||
}
|
||||
.imgList{
|
||||
height:350px;
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.imgList img{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 20px 10px ;
|
||||
}
|
||||
.el-input-number__decrease, .el-input-number__increase{
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.views{
|
||||
.wrapper{
|
||||
padding: 0;
|
||||
}
|
||||
.middle{
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
169
ruoyi-ui/src/views/screen/theme/avue.project.js
Normal file
169
ruoyi-ui/src/views/screen/theme/avue.project.js
Normal file
@ -0,0 +1,169 @@
|
||||
var theme_avue = {
|
||||
"version": 1,
|
||||
"themeName": "avue",
|
||||
"theme": {
|
||||
"seriesCnt": "4",
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"titleColor": "#516b91",
|
||||
"subtitleColor": "#93b7e3",
|
||||
"textColorShow": false,
|
||||
"textColor": "#333",
|
||||
"markTextColor": "#eee",
|
||||
"color": [
|
||||
"#83bff6",
|
||||
"#23b7e5",
|
||||
"#188df0",
|
||||
"#564aa3",
|
||||
"#a5e7f0",
|
||||
"#cbb0e3"
|
||||
],
|
||||
"borderColor": "#ccc",
|
||||
"borderWidth": 0,
|
||||
"visualMapColor": [
|
||||
"#83bff6",
|
||||
"#23b7e5",
|
||||
"#188df0",
|
||||
"#564aa3"
|
||||
],
|
||||
"legendTextColor": "#999999",
|
||||
"kColor": "#edafda",
|
||||
"kColor0": "transparent",
|
||||
"kBorderColor": "#d680bc",
|
||||
"kBorderColor0": "#8fd3e8",
|
||||
"kBorderWidth": "2",
|
||||
"lineWidth": "2",
|
||||
"symbolSize": "6",
|
||||
"symbol": "emptyCircle",
|
||||
"symbolBorderWidth": "2",
|
||||
"lineSmooth": true,
|
||||
"graphLineWidth": 1,
|
||||
"graphLineColor": "#aaa",
|
||||
"mapLabelColor": "#000000",
|
||||
"mapLabelColorE": "rgb(81,107,145)",
|
||||
"mapBorderColor": "#516b91",
|
||||
"mapBorderColorE": "#516b91",
|
||||
"mapBorderWidth": 0.5,
|
||||
"mapBorderWidthE": 1,
|
||||
"mapAreaColor": "#f3f3f3",
|
||||
"mapAreaColorE": "rgba(165,231,240,1)",
|
||||
"axes": [{
|
||||
"type": "all",
|
||||
"name": "通用坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#cccccc",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#999999",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#eeeeee"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(80,36,204,0.05)",
|
||||
"rgba(223,35,35,0.02)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "category",
|
||||
"name": "类目坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": false,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "value",
|
||||
"name": "数值坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "log",
|
||||
"name": "对数坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "time",
|
||||
"name": "时间坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
],
|
||||
"axisSeperateSetting": true,
|
||||
"toolboxColor": "#999999",
|
||||
"toolboxEmpasisColor": "#666666",
|
||||
"tooltipAxisColor": "#f9dbdb",
|
||||
"tooltipAxisWidth": 1,
|
||||
"timelineLineColor": "#8fd3e8",
|
||||
"timelineLineWidth": 1,
|
||||
"timelineItemColor": "#8fd3e8",
|
||||
"timelineItemColorE": "#8fd3e8",
|
||||
"timelineCheckColor": "#8fd3e8",
|
||||
"timelineCheckBorderColor": "rgba(138,124,168,0.37)",
|
||||
"timelineItemBorderWidth": 1,
|
||||
"timelineControlColor": "#213dbc",
|
||||
"timelineControlBorderColor": "#8fd3e8",
|
||||
"timelineControlBorderWidth": 0.5,
|
||||
"timelineLabelColor": "#8fd3e8",
|
||||
"datazoomBackgroundColor": "rgba(0,0,0,0)",
|
||||
"datazoomDataColor": "rgba(255,255,255,0.3)",
|
||||
"datazoomFillColor": "rgba(167,183,204,0.4)",
|
||||
"datazoomHandleColor": "#2472d9",
|
||||
"datazoomHandleWidth": "100",
|
||||
"datazoomLabelColor": "#333333"
|
||||
}
|
||||
}
|
||||
window.echarts.registerTheme(theme_avue.themeName, theme_avue.theme)
|
||||
181
ruoyi-ui/src/views/screen/theme/halloween.project.js
Normal file
181
ruoyi-ui/src/views/screen/theme/halloween.project.js
Normal file
@ -0,0 +1,181 @@
|
||||
var theme_macarons = {
|
||||
"version": 1,
|
||||
"themeName": "macarons",
|
||||
"theme": {
|
||||
"seriesCnt": "4",
|
||||
"backgroundColor": "rgba(0,0,0,0)",
|
||||
"titleColor": "#008acd",
|
||||
"subtitleColor": "#aaaaaa",
|
||||
"textColorShow": false,
|
||||
"textColor": "#333",
|
||||
"markTextColor": "#eeeeee",
|
||||
"color": [
|
||||
"#2ec7c9",
|
||||
"#b6a2de",
|
||||
"#5ab1ef",
|
||||
"#ffb980",
|
||||
"#d87a80",
|
||||
"#8d98b3",
|
||||
"#e5cf0d",
|
||||
"#97b552",
|
||||
"#95706d",
|
||||
"#dc69aa",
|
||||
"#07a2a4",
|
||||
"#9a7fd1",
|
||||
"#588dd5",
|
||||
"#f5994e",
|
||||
"#c05050",
|
||||
"#59678c",
|
||||
"#c9ab00",
|
||||
"#7eb00a",
|
||||
"#6f5553",
|
||||
"#c14089"
|
||||
],
|
||||
"borderColor": "#ccc",
|
||||
"borderWidth": 0,
|
||||
"visualMapColor": [
|
||||
"#5ab1ef",
|
||||
"#e0ffff"
|
||||
],
|
||||
"legendTextColor": "#333333",
|
||||
"kColor": "#d87a80",
|
||||
"kColor0": "#2ec7c9",
|
||||
"kBorderColor": "#d87a80",
|
||||
"kBorderColor0": "#2ec7c9",
|
||||
"kBorderWidth": 1,
|
||||
"lineWidth": 2,
|
||||
"symbolSize": 3,
|
||||
"symbol": "emptyCircle",
|
||||
"symbolBorderWidth": 1,
|
||||
"lineSmooth": true,
|
||||
"graphLineWidth": 1,
|
||||
"graphLineColor": "#aaaaaa",
|
||||
"mapLabelColor": "#d87a80",
|
||||
"mapLabelColorE": "rgb(100,0,0)",
|
||||
"mapBorderColor": "#eeeeee",
|
||||
"mapBorderColorE": "#444444",
|
||||
"mapBorderWidth": 0.5,
|
||||
"mapBorderWidthE": 1,
|
||||
"mapAreaColor": "#dddddd",
|
||||
"mapAreaColorE": "rgba(254,153,78,1)",
|
||||
"axes": [{
|
||||
"type": "all",
|
||||
"name": "通用坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#eeeeee",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#eeeeee",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#eeeeee",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#aaaaaa"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"#eeeeee"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "category",
|
||||
"name": "类目坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#008acd",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": false,
|
||||
"splitLineColor": [
|
||||
"#eee"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "value",
|
||||
"name": "数值坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#008acd",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#eee"
|
||||
],
|
||||
"splitAreaShow": true,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "log",
|
||||
"name": "对数坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#008acd",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#eee"
|
||||
],
|
||||
"splitAreaShow": true,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "time",
|
||||
"name": "时间坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#008acd",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#eee"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
],
|
||||
"axisSeperateSetting": true,
|
||||
"toolboxColor": "#2ec7c9",
|
||||
"toolboxEmpasisColor": "#18a4a6",
|
||||
"tooltipAxisColor": "#008acd",
|
||||
"tooltipAxisWidth": "1",
|
||||
"timelineLineColor": "#008acd",
|
||||
"timelineLineWidth": 1,
|
||||
"timelineItemColor": "#008acd",
|
||||
"timelineItemColorE": "#a9334c",
|
||||
"timelineCheckColor": "#2ec7c9",
|
||||
"timelineCheckBorderColor": "rgba(46,199,201,0.4)",
|
||||
"timelineItemBorderWidth": 1,
|
||||
"timelineControlColor": "#008acd",
|
||||
"timelineControlBorderColor": "#008acd",
|
||||
"timelineControlBorderWidth": 0.5,
|
||||
"timelineLabelColor": "#008acd",
|
||||
"datazoomBackgroundColor": "rgba(47,69,84,0)",
|
||||
"datazoomDataColor": "rgba(239,239,255,1)",
|
||||
"datazoomFillColor": "rgba(182,162,222,0.2)",
|
||||
"datazoomHandleColor": "#008acd",
|
||||
"datazoomHandleWidth": "100",
|
||||
"datazoomLabelColor": "#333333"
|
||||
}
|
||||
}
|
||||
|
||||
window.echarts.registerTheme(theme_macarons.themeName, theme_macarons.theme)
|
||||
3
ruoyi-ui/src/views/screen/theme/index.js
Normal file
3
ruoyi-ui/src/views/screen/theme/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import './avue.project.js'
|
||||
import './halloween.project.js'
|
||||
import './wonderland.project'
|
||||
168
ruoyi-ui/src/views/screen/theme/wonderland.project.js
Normal file
168
ruoyi-ui/src/views/screen/theme/wonderland.project.js
Normal file
@ -0,0 +1,168 @@
|
||||
var theme_wonderland = {
|
||||
"version": 1,
|
||||
"themeName": "wonderland",
|
||||
"theme": {
|
||||
"seriesCnt": "3",
|
||||
"backgroundColor": "rgba(255,255,255,0)",
|
||||
"titleColor": "#666666",
|
||||
"subtitleColor": "#999999",
|
||||
"textColorShow": false,
|
||||
"textColor": "#333",
|
||||
"markTextColor": "#ffffff",
|
||||
"color": [
|
||||
"#4ea397",
|
||||
"#22c3aa",
|
||||
"#7bd9a5",
|
||||
"#d0648a",
|
||||
"#f58db2",
|
||||
"#f2b3c9"
|
||||
],
|
||||
"borderColor": "#ccc",
|
||||
"borderWidth": 0,
|
||||
"visualMapColor": [
|
||||
"#d0648a",
|
||||
"#22c3aa",
|
||||
"#adfff1"
|
||||
],
|
||||
"legendTextColor": "#999999",
|
||||
"kColor": "#d0648a",
|
||||
"kColor0": "transparent",
|
||||
"kBorderColor": "#d0648a",
|
||||
"kBorderColor0": "#22c3aa",
|
||||
"kBorderWidth": "1",
|
||||
"lineWidth": "3",
|
||||
"symbolSize": "8",
|
||||
"symbol": "emptyCircle",
|
||||
"symbolBorderWidth": "2",
|
||||
"lineSmooth": false,
|
||||
"graphLineWidth": "1",
|
||||
"graphLineColor": "#cccccc",
|
||||
"mapLabelColor": "#28544e",
|
||||
"mapLabelColorE": "rgb(52,158,142)",
|
||||
"mapBorderColor": "#999999",
|
||||
"mapBorderColorE": "#22c3aa",
|
||||
"mapBorderWidth": 0.5,
|
||||
"mapBorderWidthE": 1,
|
||||
"mapAreaColor": "#eeeeee",
|
||||
"mapAreaColorE": "rgba(34,195,170,0.25)",
|
||||
"axes": [{
|
||||
"type": "all",
|
||||
"name": "通用坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#cccccc",
|
||||
"axisTickShow": false,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#999999",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#eeeeee"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "category",
|
||||
"name": "类目坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": false,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "value",
|
||||
"name": "数值坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "log",
|
||||
"name": "对数坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "time",
|
||||
"name": "时间坐标轴",
|
||||
"axisLineShow": true,
|
||||
"axisLineColor": "#333",
|
||||
"axisTickShow": true,
|
||||
"axisTickColor": "#333",
|
||||
"axisLabelShow": true,
|
||||
"axisLabelColor": "#333",
|
||||
"splitLineShow": true,
|
||||
"splitLineColor": [
|
||||
"#ccc"
|
||||
],
|
||||
"splitAreaShow": false,
|
||||
"splitAreaColor": [
|
||||
"rgba(250,250,250,0.3)",
|
||||
"rgba(200,200,200,0.3)"
|
||||
]
|
||||
}
|
||||
],
|
||||
"axisSeperateSetting": false,
|
||||
"toolboxColor": "#999999",
|
||||
"toolboxEmpasisColor": "#666666",
|
||||
"tooltipAxisColor": "#cccccc",
|
||||
"tooltipAxisWidth": 1,
|
||||
"timelineLineColor": "#4ea397",
|
||||
"timelineLineWidth": 1,
|
||||
"timelineItemColor": "#4ea397",
|
||||
"timelineItemColorE": "#4ea397",
|
||||
"timelineCheckColor": "#4ea397",
|
||||
"timelineCheckBorderColor": "rgba(60,235,210,0.3)",
|
||||
"timelineItemBorderWidth": 1,
|
||||
"timelineControlColor": "#4ea397",
|
||||
"timelineControlBorderColor": "#4ea397",
|
||||
"timelineControlBorderWidth": 0.5,
|
||||
"timelineLabelColor": "#4ea397",
|
||||
"datazoomBackgroundColor": "rgba(255,255,255,0)",
|
||||
"datazoomDataColor": "rgba(222,222,222,1)",
|
||||
"datazoomFillColor": "rgba(114,230,212,0.25)",
|
||||
"datazoomHandleColor": "#cccccc",
|
||||
"datazoomHandleWidth": "100",
|
||||
"datazoomLabelColor": "#999999"
|
||||
}
|
||||
}
|
||||
window.echarts.registerTheme(theme_wonderland.themeName, theme_wonderland.theme)
|
||||
Reference in New Issue
Block a user