|
|
|
|
@ -6,23 +6,21 @@
|
|
|
|
|
!-->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="layout">
|
|
|
|
|
<div
|
|
|
|
|
v-if="toolIsShow"
|
|
|
|
|
<div v-if="toolIsShow"
|
|
|
|
|
class="layout-left"
|
|
|
|
|
:style="{ width: widthLeftForTools + 'px' }"
|
|
|
|
|
>
|
|
|
|
|
<el-tabs type="border-card" :stretch="true">
|
|
|
|
|
:style="{ width: widthLeftForTools + 'px' }">
|
|
|
|
|
<el-tabs type="border-card"
|
|
|
|
|
:stretch="true">
|
|
|
|
|
<!-- 左侧组件栏-->
|
|
|
|
|
<el-tab-pane label="工具栏">
|
|
|
|
|
<!-- <el-divider content-position="center">html</el-divider>-->
|
|
|
|
|
<draggable
|
|
|
|
|
v-for="widget in widgetTools"
|
|
|
|
|
<draggable v-for="widget in widgetTools"
|
|
|
|
|
:key="widget.code"
|
|
|
|
|
@end="evt => widgetOnDragged(evt, widget.code)"
|
|
|
|
|
>
|
|
|
|
|
@end="evt => widgetOnDragged(evt, widget.code)">
|
|
|
|
|
<div class="tools-item">
|
|
|
|
|
<span class="tools-item-icon">
|
|
|
|
|
<i class="iconfont" :class="widget.icon"></i>
|
|
|
|
|
<i class="iconfont"
|
|
|
|
|
:class="widget.icon"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="tools-item-text">{{ widget.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
@ -30,15 +28,14 @@
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<!-- 左侧图层-->
|
|
|
|
|
<el-tab-pane label="图层">
|
|
|
|
|
<div
|
|
|
|
|
v-for="(item, index) in layerWidget"
|
|
|
|
|
<div v-for="(item, index) in layerWidget"
|
|
|
|
|
:key="index"
|
|
|
|
|
class="tools-item"
|
|
|
|
|
:class="widgetIndex == index ? 'is-active' : ''"
|
|
|
|
|
@click="layerClick(index)"
|
|
|
|
|
>
|
|
|
|
|
@click="layerClick(index)">
|
|
|
|
|
<span class="tools-item-icon">
|
|
|
|
|
<i class="iconfont" :class="item.icon"></i>
|
|
|
|
|
<i class="iconfont"
|
|
|
|
|
:class="item.icon"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="tools-item-text">{{ item.label }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
@ -46,59 +43,76 @@
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="layout-left-fold"
|
|
|
|
|
<div class="layout-left-fold"
|
|
|
|
|
:style="{ width: widthLeftForToolsHideButton + 'px' }"
|
|
|
|
|
@click="toolIsShow = !toolIsShow"
|
|
|
|
|
>
|
|
|
|
|
@click="toolIsShow = !toolIsShow">
|
|
|
|
|
<i class="iconfont iconzhankai" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
class="layout-middle"
|
|
|
|
|
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"
|
|
|
|
|
>
|
|
|
|
|
<div class="layout-middle"
|
|
|
|
|
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }">
|
|
|
|
|
<div class="top-button">
|
|
|
|
|
<span class="btn border-right">
|
|
|
|
|
<ul class="nav">
|
|
|
|
|
<li><i class="el-icon-brush"></i>
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<div><i class="el-icon-full-screen mr10"></i>边框 <i class="el-icon-arrow-right ml20"></i></div>
|
|
|
|
|
<ul class="three-level">
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<div><i class="el-icon-magic-stick mr10"></i>装饰<i class="el-icon-arrow-right ml20"></i></div>
|
|
|
|
|
<ul class="three-level">
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
<li><a href="#">三级菜单项</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn">
|
|
|
|
|
<el-tooltip
|
|
|
|
|
class="item"
|
|
|
|
|
<el-tooltip class="item"
|
|
|
|
|
effect="dark"
|
|
|
|
|
content="保存"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont iconsave" @click="saveData"></i>
|
|
|
|
|
placement="bottom">
|
|
|
|
|
<i class="iconfont iconsave"
|
|
|
|
|
@click="saveData"></i>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</span>
|
|
|
|
|
<span class="btn">
|
|
|
|
|
<el-tooltip
|
|
|
|
|
class="item"
|
|
|
|
|
<el-tooltip class="item"
|
|
|
|
|
effect="dark"
|
|
|
|
|
content="预览"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont iconyulan" @click="viewScreen"></i>
|
|
|
|
|
placement="bottom">
|
|
|
|
|
<i class="iconfont iconyulan"
|
|
|
|
|
@click="viewScreen"></i>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="workbench-container"
|
|
|
|
|
<div class="workbench-container"
|
|
|
|
|
:style="{
|
|
|
|
|
width: bigscreenWidthInWorkbench + 'px',
|
|
|
|
|
height: bigscreenHeightInWorkbench + 'px'
|
|
|
|
|
}"
|
|
|
|
|
@mousedown="handleMouseDown"
|
|
|
|
|
>
|
|
|
|
|
<vue-ruler-tool
|
|
|
|
|
v-model="dashboard.presetLine"
|
|
|
|
|
@mousedown="handleMouseDown">
|
|
|
|
|
<vue-ruler-tool v-model="dashboard.presetLine"
|
|
|
|
|
class="vueRuler"
|
|
|
|
|
:step-length="50"
|
|
|
|
|
:parent="true"
|
|
|
|
|
:position="'relative'"
|
|
|
|
|
:is-scale-revise="true"
|
|
|
|
|
:visible.sync="dashboard.presetLineVisible"
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
id="workbench"
|
|
|
|
|
:visible.sync="dashboard.presetLineVisible">
|
|
|
|
|
<div id="workbench"
|
|
|
|
|
class="workbench"
|
|
|
|
|
:style="{
|
|
|
|
|
transform: workbenchTransform,
|
|
|
|
|
@ -113,10 +127,8 @@
|
|
|
|
|
'background-origin': 'initial',
|
|
|
|
|
'background-clip': 'initial'
|
|
|
|
|
}"
|
|
|
|
|
@click.self="setOptionsOnClickScreen"
|
|
|
|
|
>
|
|
|
|
|
<widget
|
|
|
|
|
ref="widgets"
|
|
|
|
|
@click.self="setOptionsOnClickScreen">
|
|
|
|
|
<widget ref="widgets"
|
|
|
|
|
v-for="(widget, index) in widgets"
|
|
|
|
|
:key="index"
|
|
|
|
|
v-model="widget.value"
|
|
|
|
|
@ -125,58 +137,46 @@
|
|
|
|
|
:bigscreen="{ bigscreenWidth, bigscreenHeight }"
|
|
|
|
|
@onActivated="setOptionsOnClickWidget"
|
|
|
|
|
@contextmenu.prevent.native="rightClick($event, index)"
|
|
|
|
|
@mousedown.prevent.native="widgetsClick(index)"
|
|
|
|
|
/>
|
|
|
|
|
@mousedown.prevent.native="widgetsClick(index)" />
|
|
|
|
|
</div>
|
|
|
|
|
</vue-ruler-tool>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
|
|
|
|
|
<el-tabs v-model="activeName" type="border-card" :stretch="true">
|
|
|
|
|
<el-tab-pane
|
|
|
|
|
v-if="
|
|
|
|
|
<div class="layout-right"
|
|
|
|
|
:style="{ width: widthLeftForOptions + 'px' }">
|
|
|
|
|
<el-tabs v-model="activeName"
|
|
|
|
|
type="border-card"
|
|
|
|
|
:stretch="true">
|
|
|
|
|
<el-tab-pane v-if="
|
|
|
|
|
isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
|
|
|
|
|
"
|
|
|
|
|
name="first"
|
|
|
|
|
label="配置"
|
|
|
|
|
>
|
|
|
|
|
<dynamicForm
|
|
|
|
|
ref="formData"
|
|
|
|
|
label="配置">
|
|
|
|
|
<dynamicForm ref="formData"
|
|
|
|
|
:options="widgetOptions.setup"
|
|
|
|
|
@onChanged="val => widgetValueChanged('setup', val)"
|
|
|
|
|
/>
|
|
|
|
|
@onChanged="val => widgetValueChanged('setup', val)" />
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane
|
|
|
|
|
v-if="isNotNull(widgetOptions.data)"
|
|
|
|
|
<el-tab-pane v-if="isNotNull(widgetOptions.data)"
|
|
|
|
|
name="second"
|
|
|
|
|
label="数据"
|
|
|
|
|
>
|
|
|
|
|
<dynamicForm
|
|
|
|
|
ref="formData"
|
|
|
|
|
label="数据">
|
|
|
|
|
<dynamicForm ref="formData"
|
|
|
|
|
:options="widgetOptions.data"
|
|
|
|
|
@onChanged="val => widgetValueChanged('data', val)"
|
|
|
|
|
/>
|
|
|
|
|
@onChanged="val => widgetValueChanged('data', val)" />
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
<el-tab-pane
|
|
|
|
|
v-if="isNotNull(widgetOptions.position)"
|
|
|
|
|
<el-tab-pane v-if="isNotNull(widgetOptions.position)"
|
|
|
|
|
name="third"
|
|
|
|
|
label="坐标"
|
|
|
|
|
>
|
|
|
|
|
<dynamicForm
|
|
|
|
|
ref="formData"
|
|
|
|
|
label="坐标">
|
|
|
|
|
<dynamicForm ref="formData"
|
|
|
|
|
:options="widgetOptions.position"
|
|
|
|
|
@onChanged="val => widgetValueChanged('position', val)"
|
|
|
|
|
/>
|
|
|
|
|
@onChanged="val => widgetValueChanged('position', val)" />
|
|
|
|
|
</el-tab-pane>
|
|
|
|
|
</el-tabs>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<content-menu
|
|
|
|
|
:visible.sync="visibleContentMenu"
|
|
|
|
|
<content-menu :visible.sync="visibleContentMenu"
|
|
|
|
|
:style-obj="styleObj"
|
|
|
|
|
@deletelayer="deletelayer"
|
|
|
|
|
/>
|
|
|
|
|
@deletelayer="deletelayer" />
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -285,8 +285,7 @@ export default {
|
|
|
|
|
return Math.min(widthScale, heightScale);
|
|
|
|
|
},
|
|
|
|
|
workbenchTransform () {
|
|
|
|
|
return `scale(${this.bigscreenScaleInWorkbench}, ${
|
|
|
|
|
this.bigscreenScaleInWorkbench
|
|
|
|
|
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench
|
|
|
|
|
})`;
|
|
|
|
|
},
|
|
|
|
|
// 大屏在设计模式的大小
|
|
|
|
|
@ -640,6 +639,15 @@ export default {
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.mr10 {
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
.ml20 {
|
|
|
|
|
margin-left: 20px;
|
|
|
|
|
}
|
|
|
|
|
.border-right {
|
|
|
|
|
border-right: 1px solid #566876;
|
|
|
|
|
}
|
|
|
|
|
.is-active {
|
|
|
|
|
background: #31455d !important;
|
|
|
|
|
color: #bfcbd9 !important;
|
|
|
|
|
@ -833,4 +841,80 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
ul,
|
|
|
|
|
li {
|
|
|
|
|
list-style: none;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
.nav {
|
|
|
|
|
}
|
|
|
|
|
.nav > li {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
.nav > li > a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
.nav > li:hover > a {
|
|
|
|
|
color: rgb(0, 136, 214);
|
|
|
|
|
}
|
|
|
|
|
.nav a {
|
|
|
|
|
color: #cde8ff;
|
|
|
|
|
display: block;
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.nav ul {
|
|
|
|
|
display: none;
|
|
|
|
|
background: #00113a;
|
|
|
|
|
position: absolute;
|
|
|
|
|
z-index: 10000;
|
|
|
|
|
width: 120px;
|
|
|
|
|
margin-left: -20px;
|
|
|
|
|
}
|
|
|
|
|
.nav ul li {
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
.nav > li:hover > ul {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.nav > li > .three-level > li > a {
|
|
|
|
|
width: 10em;
|
|
|
|
|
padding-left: 1em;
|
|
|
|
|
padding-right: 1em;
|
|
|
|
|
background-color: #0f2030;
|
|
|
|
|
}
|
|
|
|
|
// .nav li .three-level li {
|
|
|
|
|
// display: none;
|
|
|
|
|
// }
|
|
|
|
|
.nav > li > ul > li:hover > a {
|
|
|
|
|
display: block;
|
|
|
|
|
background-color: #182e42;
|
|
|
|
|
color: #fff;
|
|
|
|
|
}
|
|
|
|
|
.nav > li > ul > li > ul {
|
|
|
|
|
left: 100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
.nav > li:last-child > ul > li > ul {
|
|
|
|
|
left: -100%;
|
|
|
|
|
top: 0;
|
|
|
|
|
}
|
|
|
|
|
.nav > li > ul > li:hover > ul {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
.nav > li > ul > li > ul > li > a {
|
|
|
|
|
padding-top: 0.4em;
|
|
|
|
|
padding-bottom: 0.4em;
|
|
|
|
|
width: 10em;
|
|
|
|
|
padding-left: 1em;
|
|
|
|
|
padding-right: 1em;
|
|
|
|
|
background-color: rgb(50, 50, 50);
|
|
|
|
|
}
|
|
|
|
|
.nav > li > ul > li > ul > li:hover > a {
|
|
|
|
|
background-color: rgb(255, 255, 0);
|
|
|
|
|
color: rgb(0, 0, 0);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
yanzili
4 years ago