mirror of
https://gitee.com/anji-plus/report.git
synced 2026-02-02 09:27:47 +08:00
update upload
This commit is contained in:
qianlishi
@@ -1,15 +1,16 @@
|
||||
@import './variables.scss';
|
||||
@import './mixin.scss';
|
||||
@import './transition.scss';
|
||||
@import './element-ui.scss';
|
||||
@import './sidebar.scss';
|
||||
@import "./variables.scss";
|
||||
@import "./mixin.scss";
|
||||
@import "./transition.scss";
|
||||
@import "./element-ui.scss";
|
||||
@import "./sidebar.scss";
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
|
||||
Microsoft YaHei, Arial, sans-serif;
|
||||
}
|
||||
|
||||
label {
|
||||
@@ -21,7 +22,7 @@ html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app{
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -40,9 +41,9 @@ a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
div:focus{
|
||||
div:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
@@ -69,8 +70,8 @@ a:hover {
|
||||
}
|
||||
|
||||
//main-container全局样式
|
||||
.app-main{
|
||||
min-height: 100%
|
||||
.app-main {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
@@ -85,27 +86,27 @@ a:hover {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.float-r{
|
||||
.float-r {
|
||||
float: right;
|
||||
}
|
||||
.float-l{
|
||||
.float-l {
|
||||
float: left;
|
||||
}
|
||||
/*日志折叠面板定制*/
|
||||
.log .el-collapse{
|
||||
border-top:0;
|
||||
border-bottom:0;
|
||||
.log .el-collapse {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.log .el-collapse-item__header {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #fff;
|
||||
background:rgba(145,163,177,.15);
|
||||
background: rgba(145, 163, 177, 0.15);
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
-webkit-transition: border-bottom-color .3s;
|
||||
transition: border-bottom-color .3s;
|
||||
-webkit-transition: border-bottom-color 0.3s;
|
||||
transition: border-bottom-color 0.3s;
|
||||
outline: 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
@@ -115,90 +116,92 @@ a:hover {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #fff;
|
||||
background: #263C7C;
|
||||
|
||||
background: #263c7c;
|
||||
}
|
||||
.log .el-collapse-item__content{
|
||||
.log .el-collapse-item__content {
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding: 20px;
|
||||
}
|
||||
.log .el-collapse-item__arrow{
|
||||
.log .el-collapse-item__arrow {
|
||||
margin-top: 14px;
|
||||
float: right;
|
||||
margin-right: -77px;
|
||||
}
|
||||
.log .icon-btn_style, .log .icon-btn_style:hover {
|
||||
.log .icon-btn_style,
|
||||
.log .icon-btn_style:hover {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
//大屏展示的一些样式
|
||||
.my-dialog{
|
||||
.el-dialog{
|
||||
background: #062B69;
|
||||
border:1px solid #5DDAF6
|
||||
.my-dialog {
|
||||
.el-dialog {
|
||||
background: #062b69;
|
||||
border: 1px solid #5ddaf6;
|
||||
}
|
||||
.el-dialog__header{
|
||||
border-bottom:1px solid #5DDAF6;
|
||||
.el-dialog__header {
|
||||
border-bottom: 1px solid #5ddaf6;
|
||||
text-align: center;
|
||||
}
|
||||
.el-dialog__title{
|
||||
color: #5CDCF9;
|
||||
.el-dialog__title {
|
||||
color: #5cdcf9;
|
||||
}
|
||||
.el-input__inner{
|
||||
background:#091E43;
|
||||
border-color: #254E97;
|
||||
.el-input__inner {
|
||||
background: #091e43;
|
||||
border-color: #254e97;
|
||||
}
|
||||
.el-date-editor .el-range__icon{
|
||||
color: #5CDCF9;
|
||||
.el-date-editor .el-range__icon {
|
||||
color: #5cdcf9;
|
||||
}
|
||||
input {
|
||||
background:#091E43;
|
||||
background: #091e43;
|
||||
}
|
||||
.el-date-editor .el-range-input{
|
||||
color: #5CDCF9;
|
||||
.el-date-editor .el-range-input {
|
||||
color: #5cdcf9;
|
||||
}
|
||||
.form-handle{
|
||||
.el-form-item__label{
|
||||
color: #5CDCF9;
|
||||
.form-handle {
|
||||
.el-form-item__label {
|
||||
color: #5cdcf9;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.el-textarea__inner,.el-select:hover .el-input__inner{
|
||||
background-color: #091E43;
|
||||
border-color: #254E97;
|
||||
border-bottom:1px solid #254E97;
|
||||
.el-textarea__inner,
|
||||
.el-select:hover .el-input__inner {
|
||||
background-color: #091e43;
|
||||
border-color: #254e97;
|
||||
border-bottom: 1px solid #254e97;
|
||||
}
|
||||
.el-button--blue{
|
||||
color: #FFF;
|
||||
.el-button--blue {
|
||||
color: #fff;
|
||||
background-color: #224788;
|
||||
border-color: #224788;
|
||||
}
|
||||
.el-button--green{
|
||||
color: #FFF;
|
||||
background-color: #2092AD;
|
||||
border-color: #2092AD;
|
||||
.el-button--green {
|
||||
color: #fff;
|
||||
background-color: #2092ad;
|
||||
border-color: #2092ad;
|
||||
}
|
||||
}
|
||||
.el-input--prefix .el-input__inner{
|
||||
.el-input--prefix .el-input__inner {
|
||||
padding-left: 45px;
|
||||
}
|
||||
.el-input-group__append, .el-input-group__prepend{
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
color: #333;
|
||||
}
|
||||
//avue
|
||||
.preview-form{
|
||||
height: auto!important;
|
||||
overflow-y: auto!important;
|
||||
.preview-form {
|
||||
height: auto !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
.x-spreadsheet-toolbar-btns{
|
||||
.x-spreadsheet-toolbar-btns {
|
||||
margin-left: 30px !important;
|
||||
}
|
||||
.ml10{
|
||||
.ml10 {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@@ -208,77 +211,80 @@ a:hover {
|
||||
color: black;
|
||||
direction: ltr;
|
||||
}
|
||||
.jsoneditor-vue{
|
||||
.jsoneditor-vue {
|
||||
height: 100%;
|
||||
}
|
||||
.printSet {
|
||||
background-image: url('../images/bianzu.png') !important;
|
||||
background-image: url("../images/bianzu.png") !important;
|
||||
background-size: 19px;
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
opacity: 1!important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.qrCodes {
|
||||
background-image: url('../images/qrcode.png') !important;
|
||||
background-image: url("../images/qrcode.png") !important;
|
||||
background-size: 19px;
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
opacity: 1!important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.barCodes {
|
||||
background-image: url('../images/tiaoxingma.png') !important;
|
||||
background-image: url("../images/tiaoxingma.png") !important;
|
||||
background-size: 19px;
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
opacity: 1!important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.collapse-input-style {
|
||||
.el-input__inner ,.el-textarea__inner{
|
||||
.el-input__inner,
|
||||
.el-textarea__inner {
|
||||
background: #263445 !important;
|
||||
border: 1px solid #3f5673;
|
||||
color:#a8e3ff
|
||||
color: #a8e3ff;
|
||||
}
|
||||
.el-slider__runway{
|
||||
.el-slider__runway {
|
||||
height: 2px;
|
||||
background-color:#5e6b82
|
||||
background-color: #5e6b82;
|
||||
}
|
||||
.el-slider__bar{
|
||||
.el-slider__bar {
|
||||
height: 2px;
|
||||
}
|
||||
.el-slider__button-wrapper{
|
||||
.el-slider__button-wrapper {
|
||||
top: -17px;
|
||||
}
|
||||
.el-slider__button{
|
||||
.el-slider__button {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.el-switch__core{
|
||||
background-color:#5e6b82;
|
||||
.el-switch__core {
|
||||
background-color: #5e6b82;
|
||||
border: 1px solid #3f5673;
|
||||
}
|
||||
.el-input-group__append, .el-input-group__prepend{
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
background: #5e6b82 !important;
|
||||
border: 1px solid #3f5673;
|
||||
color:#a8e3ff
|
||||
color: #a8e3ff;
|
||||
}
|
||||
.el-input-number__increase, .el-input-number__decrease{
|
||||
.el-input-number__increase,
|
||||
.el-input-number__decrease {
|
||||
background: #5e6b82 !important;
|
||||
border: 1px solid #3f5673;
|
||||
color:#a8e3ff
|
||||
color: #a8e3ff;
|
||||
}
|
||||
.el-input-number.is-controls-right .el-input-number__increase{
|
||||
.el-input-number.is-controls-right .el-input-number__increase {
|
||||
height: 15px;
|
||||
border-bottom: 1px solid #3f5673;
|
||||
}
|
||||
.el-input-number.is-controls-right .el-input-number__decrease{
|
||||
.el-input-number.is-controls-right .el-input-number__decrease {
|
||||
border-left: 1px solid #3f5673;
|
||||
}
|
||||
.el-form-item__label {
|
||||
font-size: 12px;
|
||||
color: #bfcbd9!important;
|
||||
color: #bfcbd9 !important;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
}
|
||||
@@ -286,7 +292,7 @@ a:hover {
|
||||
line-height: 30px !important;
|
||||
height: 30px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
line-height: 30px !important;
|
||||
height: 30px;
|
||||
}
|
||||
// .el-form-item__content {
|
||||
// line-height: 30px !important;
|
||||
// height: 30px;
|
||||
// }
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="requestUrl"
|
||||
:on-success="handleSucess"
|
||||
:on-remove="handleRemove"
|
||||
:file-list="fileList"
|
||||
:headers="headers"
|
||||
:limit="1"
|
||||
list-type="picture"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
</el-upload>
|
||||
</template>
|
||||
<script>
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
model: {
|
||||
prop: "value",
|
||||
event: "input"
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
requestUrl: process.env.BASE_API + "/file/upload",
|
||||
headers: {
|
||||
Authorization: getToken()
|
||||
},
|
||||
fileList: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
console.log(val);
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.fileList = this.value;
|
||||
},
|
||||
methods: {
|
||||
handleSucess(file) {
|
||||
console.log(file);
|
||||
this.fileList = [{ name: file.data.fileType, url: file.data.urlPath }];
|
||||
this.$emit("input", this.fileList);
|
||||
this.$emit("change", this.fileList);
|
||||
},
|
||||
handleRemove(file) {
|
||||
this.fileList = [];
|
||||
this.$emit("input", []);
|
||||
this.$emit("change", []);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -61,12 +61,10 @@
|
||||
v-model="formData[item.name]"
|
||||
@change="val => changed(val, item.name)"
|
||||
/>
|
||||
|
||||
<el-upload
|
||||
v-if="item.type == 'el-upload-picture'"
|
||||
size="mini"
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
list-type="picture-card"
|
||||
<customUpload
|
||||
v-if="item.type == 'custom-upload'"
|
||||
v-model="formData[item.name]"
|
||||
@change="changed($event, item.name)"
|
||||
/>
|
||||
|
||||
<el-radio-group
|
||||
@@ -284,6 +282,7 @@ import "codemirror/mode/shell/shell.js";
|
||||
import dynamicComponents from "./dynamicComponents.vue";
|
||||
import customColorComponents from "./customColorComponents";
|
||||
import dynamicAddTable from "./dynamicAddTable.vue";
|
||||
import customUpload from "./customUpload.vue";
|
||||
export default {
|
||||
name: "DynamicForm",
|
||||
components: {
|
||||
@@ -291,7 +290,8 @@ export default {
|
||||
vueJsonEditor,
|
||||
dynamicComponents,
|
||||
customColorComponents,
|
||||
dynamicAddTable
|
||||
dynamicAddTable,
|
||||
customUpload
|
||||
},
|
||||
model: {
|
||||
prop: "value",
|
||||
|
||||
@@ -6,21 +6,23 @@
|
||||
!-->
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div v-if="toolIsShow"
|
||||
class="layout-left"
|
||||
:style="{ width: widthLeftForTools + 'px' }">
|
||||
<el-tabs type="border-card"
|
||||
:stretch="true">
|
||||
<div
|
||||
v-if="toolIsShow"
|
||||
class="layout-left"
|
||||
: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"
|
||||
:key="widget.code"
|
||||
@end="evt => widgetOnDragged(evt, widget.code)">
|
||||
<draggable
|
||||
v-for="widget in widgetTools"
|
||||
:key="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>
|
||||
@@ -28,14 +30,15 @@
|
||||
</el-tab-pane>
|
||||
<!-- 左侧图层-->
|
||||
<el-tab-pane label="图层">
|
||||
<div v-for="(item, index) in layerWidget"
|
||||
:key="index"
|
||||
class="tools-item"
|
||||
:class="widgetIndex == index ? 'is-active' : ''"
|
||||
@click="layerClick(index)">
|
||||
<div
|
||||
v-for="(item, index) in layerWidget"
|
||||
:key="index"
|
||||
class="tools-item"
|
||||
:class="widgetIndex == index ? 'is-active' : ''"
|
||||
@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>
|
||||
@@ -43,40 +46,49 @@
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<div class="layout-left-fold"
|
||||
:style="{ width: widthLeftForToolsHideButton + 'px' }"
|
||||
@click="toolIsShow = !toolIsShow">
|
||||
<div
|
||||
class="layout-left-fold"
|
||||
:style="{ width: widthLeftForToolsHideButton + 'px' }"
|
||||
@click="toolIsShow = !toolIsShow"
|
||||
>
|
||||
<i class="el-icon-arrow-right" />
|
||||
</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">
|
||||
<el-tooltip class="item"
|
||||
effect="dark"
|
||||
content="保存"
|
||||
placement="bottom">
|
||||
<i class="iconfont iconsave"
|
||||
@click="saveData"></i>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="保存"
|
||||
placement="bottom"
|
||||
>
|
||||
<i class="iconfont iconsave" @click="saveData"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span class="btn">
|
||||
<el-tooltip class="item"
|
||||
effect="dark"
|
||||
content="预览"
|
||||
placement="bottom">
|
||||
<i class="iconfont iconyulan"
|
||||
@click="viewScreen"></i>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="预览"
|
||||
placement="bottom"
|
||||
>
|
||||
<i class="iconfont iconyulan" @click="viewScreen"></i>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
<span class="btn border-left">
|
||||
<ul class="nav">
|
||||
<li><i class="el-icon-brush"></i><i class="el-icon-arrow-down"></i>
|
||||
<li>
|
||||
<i class="el-icon-brush"></i><i class="el-icon-arrow-down"></i>
|
||||
<ul>
|
||||
<li>
|
||||
<div><i class="el-icon-full-screen mr10"></i>边框 <i class="el-icon-arrow-right ml20"></i></div>
|
||||
<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="#">边框1</a></li>
|
||||
<li><a href="#">边框2</a></li>
|
||||
@@ -84,7 +96,11 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div><i class="el-icon-magic-stick mr10"></i>装饰<i class="el-icon-arrow-right ml20"></i></div>
|
||||
<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="#">装饰1</a></li>
|
||||
</ul>
|
||||
@@ -94,22 +110,27 @@
|
||||
</ul>
|
||||
</span>
|
||||
</div>
|
||||
<div class="workbench-container"
|
||||
:style="{
|
||||
<div
|
||||
class="workbench-container"
|
||||
:style="{
|
||||
width: bigscreenWidthInWorkbench + 'px',
|
||||
height: bigscreenHeightInWorkbench + 'px'
|
||||
}"
|
||||
@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"
|
||||
class="workbench"
|
||||
:style="{
|
||||
@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"
|
||||
class="workbench"
|
||||
:style="{
|
||||
transform: workbenchTransform,
|
||||
width: bigscreenWidth + 'px',
|
||||
height: bigscreenHeight + 'px',
|
||||
@@ -122,56 +143,70 @@
|
||||
'background-origin': 'initial',
|
||||
'background-clip': 'initial'
|
||||
}"
|
||||
@click.self="setOptionsOnClickScreen">
|
||||
<widget ref="widgets"
|
||||
v-for="(widget, index) in widgets"
|
||||
:key="index"
|
||||
v-model="widget.value"
|
||||
:index="index"
|
||||
:type="widget.type"
|
||||
:bigscreen="{ bigscreenWidth, bigscreenHeight }"
|
||||
@onActivated="setOptionsOnClickWidget"
|
||||
@contextmenu.prevent.native="rightClick($event, index)"
|
||||
@mousedown.prevent.native="widgetsClick(index)" />
|
||||
@click.self="setOptionsOnClickScreen"
|
||||
>
|
||||
<widget
|
||||
ref="widgets"
|
||||
v-for="(widget, index) in widgets"
|
||||
:key="index"
|
||||
v-model="widget.value"
|
||||
:index="index"
|
||||
:type="widget.type"
|
||||
:bigscreen="{ bigscreenWidth, bigscreenHeight }"
|
||||
@onActivated="setOptionsOnClickWidget"
|
||||
@contextmenu.prevent.native="rightClick($event, 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"
|
||||
:options="widgetOptions.setup"
|
||||
@onChanged="val => widgetValueChanged('setup', val)" />
|
||||
name="first"
|
||||
label="配置"
|
||||
>
|
||||
<dynamicForm
|
||||
ref="formData"
|
||||
:options="widgetOptions.setup"
|
||||
@onChanged="val => widgetValueChanged('setup', val)"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="isNotNull(widgetOptions.data)"
|
||||
name="second"
|
||||
label="数据">
|
||||
<dynamicForm ref="formData"
|
||||
:options="widgetOptions.data"
|
||||
@onChanged="val => widgetValueChanged('data', val)" />
|
||||
<el-tab-pane
|
||||
v-if="isNotNull(widgetOptions.data)"
|
||||
name="second"
|
||||
label="数据"
|
||||
>
|
||||
<dynamicForm
|
||||
ref="formData"
|
||||
:options="widgetOptions.data"
|
||||
@onChanged="val => widgetValueChanged('data', val)"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane v-if="isNotNull(widgetOptions.position)"
|
||||
name="third"
|
||||
label="坐标">
|
||||
<dynamicForm ref="formData"
|
||||
:options="widgetOptions.position"
|
||||
@onChanged="val => widgetValueChanged('position', val)" />
|
||||
<el-tab-pane
|
||||
v-if="isNotNull(widgetOptions.position)"
|
||||
name="third"
|
||||
label="坐标"
|
||||
>
|
||||
<dynamicForm
|
||||
ref="formData"
|
||||
:options="widgetOptions.position"
|
||||
@onChanged="val => widgetValueChanged('position', val)"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
|
||||
<content-menu :visible.sync="visibleContentMenu"
|
||||
:style-obj="styleObj"
|
||||
@deletelayer="deletelayer" />
|
||||
<content-menu
|
||||
:visible.sync="visibleContentMenu"
|
||||
:style-obj="styleObj"
|
||||
@deletelayer="deletelayer"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -192,7 +227,7 @@ export default {
|
||||
dynamicForm,
|
||||
contentMenu
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
layerWidget: [],
|
||||
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
|
||||
@@ -259,7 +294,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
// 左侧折叠切换时，动态计算中间区的宽度
|
||||
middleWidth () {
|
||||
middleWidth() {
|
||||
var widthLeftAndRight = 0;
|
||||
if (this.toolIsShow) {
|
||||
widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
|
||||
@@ -270,36 +305,37 @@ export default {
|
||||
var middleWidth = this.bodyWidth - widthLeftAndRight;
|
||||
return middleWidth;
|
||||
},
|
||||
middleHeight () {
|
||||
middleHeight() {
|
||||
return this.bodyHeight;
|
||||
},
|
||||
// 设计台按大屏的缩放比例
|
||||
bigscreenScaleInWorkbench () {
|
||||
bigscreenScaleInWorkbench() {
|
||||
var widthScale = this.middleWidth / this.bigscreenWidth;
|
||||
var heightScale = this.middleHeight / this.bigscreenHeight;
|
||||
return Math.min(widthScale, heightScale);
|
||||
},
|
||||
workbenchTransform () {
|
||||
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench
|
||||
})`;
|
||||
workbenchTransform() {
|
||||
return `scale(${this.bigscreenScaleInWorkbench}, ${
|
||||
this.bigscreenScaleInWorkbench
|
||||
})`;
|
||||
},
|
||||
// 大屏在设计模式的大小
|
||||
bigscreenWidthInWorkbench () {
|
||||
bigscreenWidthInWorkbench() {
|
||||
return this.getPXUnderScale(this.bigscreenWidth);
|
||||
},
|
||||
bigscreenHeightInWorkbench () {
|
||||
bigscreenHeightInWorkbench() {
|
||||
return this.getPXUnderScale(this.bigscreenHeight);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
widgets: {
|
||||
handler (val) {
|
||||
handler(val) {
|
||||
this.handlerLayerWidget(val);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
// 一进入时，加载屏幕配置属性
|
||||
this.setOptionsOnClickScreen();
|
||||
|
||||
@@ -308,7 +344,7 @@ export default {
|
||||
this.widgets = [];
|
||||
},
|
||||
methods: {
|
||||
handlerLayerWidget (val) {
|
||||
handlerLayerWidget(val) {
|
||||
const layerWidgetArr = [];
|
||||
for (let i = 0; i < val.length; i++) {
|
||||
const obj = {};
|
||||
@@ -323,7 +359,7 @@ export default {
|
||||
}
|
||||
this.layerWidget = layerWidgetArr;
|
||||
},
|
||||
async initEchartData () {
|
||||
async initEchartData() {
|
||||
const reportCode = this.$route.query.reportCode;
|
||||
const { code, data } = await detailDashboard(reportCode);
|
||||
if (code != 200) return;
|
||||
@@ -332,7 +368,7 @@ export default {
|
||||
this.widgets = processData;
|
||||
this.dashboard = screenData;
|
||||
},
|
||||
handleBigScreen (data) {
|
||||
handleBigScreen(data) {
|
||||
const optionScreen = this.deepClone(getToolByCode("screen").options);
|
||||
const setup = optionScreen.setup;
|
||||
for (const key in data) {
|
||||
@@ -350,7 +386,7 @@ export default {
|
||||
width: data.width
|
||||
};
|
||||
},
|
||||
handleInitEchartsData (data) {
|
||||
handleInitEchartsData(data) {
|
||||
const widgets = data.dashboard.widgets;
|
||||
const widgetsData = [];
|
||||
for (let i = 0; i < widgets.length; i++) {
|
||||
@@ -370,7 +406,7 @@ export default {
|
||||
}
|
||||
return widgetsData;
|
||||
},
|
||||
handleOptionsData (data, option) {
|
||||
handleOptionsData(data, option) {
|
||||
for (const key in data.setup) {
|
||||
for (let i = 0; i < option.setup.length; i++) {
|
||||
let item = option.setup[i];
|
||||
@@ -409,7 +445,7 @@ export default {
|
||||
return option;
|
||||
},
|
||||
// 保存数据
|
||||
async saveData () {
|
||||
async saveData() {
|
||||
if (!this.widgets || this.widgets.length == 0) {
|
||||
this.$message.error("请添加组件");
|
||||
return;
|
||||
@@ -431,7 +467,7 @@ export default {
|
||||
}
|
||||
},
|
||||
// 预览
|
||||
viewScreen () {
|
||||
viewScreen() {
|
||||
var routeUrl = this.$router.resolve({
|
||||
path: "/bigscreen/viewer",
|
||||
query: { reportCode: this.$route.query.reportCode }
|
||||
@@ -439,12 +475,12 @@ export default {
|
||||
window.open(routeUrl.href, "_blank");
|
||||
},
|
||||
// 在缩放模式下的大小
|
||||
getPXUnderScale (px) {
|
||||
getPXUnderScale(px) {
|
||||
return this.bigscreenScaleInWorkbench * px;
|
||||
},
|
||||
|
||||
// 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
|
||||
widgetOnDragged (evt, widgetCode) {
|
||||
widgetOnDragged(evt, widgetCode) {
|
||||
var widgetType = widgetCode;
|
||||
|
||||
// 获取结束坐标和列名
|
||||
@@ -485,7 +521,7 @@ export default {
|
||||
},
|
||||
|
||||
// 对组件默认值处理
|
||||
handleDefaultValue (widgetJson) {
|
||||
handleDefaultValue(widgetJson) {
|
||||
for (const key in widgetJson) {
|
||||
if (key == "options") {
|
||||
// collapse、data、position、setup
|
||||
@@ -525,12 +561,12 @@ export default {
|
||||
}
|
||||
return widgetJson;
|
||||
},
|
||||
layerClick (index) {
|
||||
layerClick(index) {
|
||||
this.widgetIndex = index;
|
||||
this.widgetsClick(index);
|
||||
},
|
||||
// 如果是点击大屏设计器中的底层，加载大屏底层属性
|
||||
setOptionsOnClickScreen () {
|
||||
setOptionsOnClickScreen() {
|
||||
this.screenCode = "screen";
|
||||
// 选中不同的组件 右侧都显示第一栏
|
||||
this.activeName = "first";
|
||||
@@ -538,7 +574,7 @@ export default {
|
||||
},
|
||||
|
||||
// 如果是点击某个组件，获取该组件的配置项
|
||||
setOptionsOnClickWidget (obj) {
|
||||
setOptionsOnClickWidget(obj) {
|
||||
this.screenCode = "";
|
||||
if (typeof obj == "number") {
|
||||
this.widgetOptions = this.deepClone(this.widgets[obj]["options"]);
|
||||
@@ -558,7 +594,7 @@ export default {
|
||||
});
|
||||
this.widgetOptions = this.deepClone(this.widgets[obj.index]["options"]);
|
||||
},
|
||||
widgetsClick (index) {
|
||||
widgetsClick(index) {
|
||||
const draggableArr = this.$refs.widgets;
|
||||
for (let i = 0; i < draggableArr.length; i++) {
|
||||
if (i == index) {
|
||||
@@ -569,14 +605,14 @@ export default {
|
||||
}
|
||||
this.setOptionsOnClickWidget(index);
|
||||
},
|
||||
handleMouseDown () {
|
||||
handleMouseDown() {
|
||||
const draggableArr = this.$refs.widgets;
|
||||
for (let i = 0; i < draggableArr.length; i++) {
|
||||
this.$refs.widgets[i].$refs.draggable.setActive(false);
|
||||
}
|
||||
},
|
||||
// 将当前选中的组件，右侧属性值更新
|
||||
widgetValueChanged (key, val) {
|
||||
widgetValueChanged(key, val) {
|
||||
if (this.screenCode == "screen") {
|
||||
this.dashboard = this.deepClone(val);
|
||||
} else {
|
||||
@@ -588,7 +624,7 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
rightClick (event, index) {
|
||||
rightClick(event, index) {
|
||||
this.rightClickIndex = index;
|
||||
const left = event.clientX;
|
||||
const top = event.clientY;
|
||||
@@ -602,10 +638,10 @@ export default {
|
||||
this.visibleContentMenu = true;
|
||||
return false;
|
||||
},
|
||||
deletelayer () {
|
||||
deletelayer() {
|
||||
this.widgets.splice(this.rightClickIndex, 1);
|
||||
},
|
||||
setDefaultValue (options, val) {
|
||||
setDefaultValue(options, val) {
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
if (Object.prototype.toString.call(options[i]) == "[object Object]") {
|
||||
for (const k in val) {
|
||||
|
||||
@@ -666,12 +666,12 @@ const widgetTools = [
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
type: 'el-input-text',
|
||||
type: 'custom-upload',
|
||||
label: '图片地址',
|
||||
name: 'imageAdress',
|
||||
required: false,
|
||||
placeholder: '',
|
||||
value: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg',
|
||||
value: [{url: 'http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg'}],
|
||||
},
|
||||
{
|
||||
type: 'vue-color',
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<div class="imagebox" :style="styleColor"><img :class="transStyle.startRotate?'startImg':''" :style="imgStyle" :src="imgStyle.imageAdress" alt=""></div>
|
||||
<div class="imagebox" :style="styleColor">
|
||||
<img
|
||||
:class="transStyle.startRotate ? 'startImg' : ''"
|
||||
:style="imgStyle"
|
||||
:src="imgStyle.imageAdress"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095508.jpg
|
||||
@@ -9,55 +16,59 @@
|
||||
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095504.jpg
|
||||
// http://pic.ik123.com/uploads/allimg/190813/12-1ZQ3095506.jpg
|
||||
export default {
|
||||
name: 'WidgetImage',
|
||||
name: "WidgetImage",
|
||||
components: {},
|
||||
props: {
|
||||
value: Object,
|
||||
ispreview: Boolean,
|
||||
ispreview: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: {},
|
||||
}
|
||||
options: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
transStyle() {
|
||||
return this.objToOne(this.options)
|
||||
return this.objToOne(this.options);
|
||||
},
|
||||
styleColor() {
|
||||
return {
|
||||
position: this.ispreview ? 'absolute' : 'static',
|
||||
position: this.ispreview ? "absolute" : "static",
|
||||
background: this.transStyle.background,
|
||||
'text-align': this.transStyle.textAlign,
|
||||
width: this.transStyle.width + 'px',
|
||||
height: this.transStyle.height + 'px',
|
||||
left: this.transStyle.left + 'px',
|
||||
top: this.transStyle.top + 'px',
|
||||
right: this.transStyle.right + 'px',
|
||||
|
||||
}
|
||||
"text-align": this.transStyle.textAlign,
|
||||
width: this.transStyle.width + "px",
|
||||
height: this.transStyle.height + "px",
|
||||
left: this.transStyle.left + "px",
|
||||
top: this.transStyle.top + "px",
|
||||
right: this.transStyle.right + "px"
|
||||
};
|
||||
},
|
||||
imgStyle() {
|
||||
return {
|
||||
imageAdress: this.transStyle.imageAdress,
|
||||
'border-radius': this.transStyle.borderRadius + 'px',
|
||||
opacity: this.transStyle.transparency / 100,
|
||||
}
|
||||
imageAdress:
|
||||
this.options.setup.imageAdress.length > 0
|
||||
? this.options.setup.imageAdress[0].url
|
||||
: "",
|
||||
"border-radius": this.transStyle.borderRadius + "px",
|
||||
opacity: this.transStyle.transparency / 100
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value: {
|
||||
handler(val) {
|
||||
this.options = val
|
||||
console.log(val);
|
||||
this.options = val;
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.options = this.value
|
||||
created() {
|
||||
this.options = this.value;
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
mounted() {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -71,13 +82,23 @@ export default {
|
||||
height: 100%;
|
||||
}
|
||||
.startImg {
|
||||
animation:turn 1s linear infinite;
|
||||
animation: turn 1s linear infinite;
|
||||
}
|
||||
@keyframes turn{
|
||||
0%{-webkit-transform:rotate(0deg);}
|
||||
25%{-webkit-transform:rotate(90deg);}
|
||||
50%{-webkit-transform:rotate(180deg);}
|
||||
75%{-webkit-transform:rotate(270deg);}
|
||||
100%{-webkit-transform:rotate(360deg);}
|
||||
@keyframes turn {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotate(270deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user