ehs_tanghHe
/
tanghe-report
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'gitee/master' into gitee-master

Browse Source
Raod 3 years ago
parent f89f63eb25 3ed6520ee7
commit 998f68d3c4
4 changed files with 540 additions and 485 deletions
Show Stats Download Patch File Download Diff File

583
report-ui/src/views/report/bigscreen/designer/index.vue
Unescape Escape View File

@ -6,21 +6,23 @@
!--> !-->
<template> <template>
<div class="layout"> <div class="layout">
<div v-if="toolIsShow" <div
class="layout-left" v-if="toolIsShow"
:style="{ width: widthLeftForTools + 'px' }"> class="layout-left"
<el-tabs type="border-card" :style="{ width: widthLeftForTools + 'px' }"
:stretch="true"> >
<el-tabs type="border-card" :stretch="true">
<!-- 左侧组件栏--> <!-- 左侧组件栏-->
<el-tab-pane label="工具栏"> <el-tab-pane label="工具栏">
<!-- <el-divider content-position="center">html</el-divider>--> <!-- <el-divider content-position="center">html</el-divider>-->
<draggable v-for="widget in widgetTools" <draggable
:key="widget.code" v-for="widget in widgetTools"
@end="(evt) => widgetOnDragged(evt, widget.code)"> :key="widget.code"
@end="evt => widgetOnDragged(evt, widget.code)"
>
<div class="tools-item"> <div class="tools-item">
<span class="tools-item-icon"> <span class="tools-item-icon">
<i class="iconfont" <i class="iconfont" :class="widget.icon"></i>
:class="widget.icon"></i>
</span> </span>
<span class="tools-item-text">{{ widget.label }}</span> <span class="tools-item-text">{{ widget.label }}</span>
</div> </div>
@ -28,12 +30,13 @@
</el-tab-pane> </el-tab-pane>
<!-- 左侧图层--> <!-- 左侧图层-->
<el-tab-pane label="图层"> <el-tab-pane label="图层">
<div v-for="(item, index) in layerWidget" <div
:key="index" v-for="(item, index) in layerWidget"
class="tools-item"> :key="index"
class="tools-item"
>
<span class="tools-item-icon"> <span class="tools-item-icon">
<i class="iconfont" <i class="iconfont" :class="item.icon"></i>
:class="item.icon"></i>
</span> </span>
<span class="tools-item-text">{{ item.label }}</span> <span class="tools-item-text">{{ item.label }}</span>
</div> </div>
@ -41,113 +44,155 @@
</el-tabs> </el-tabs>
</div> </div>
<div class="layout-left-fold" <div
:style="{ width: widthLeftForToolsHideButton + 'px' }" class="layout-left-fold"
@click="toolIsShow = !toolIsShow"> :style="{ width: widthLeftForToolsHideButton + 'px' }"
@click="toolIsShow = !toolIsShow"
>
<i class="iconfont iconzhankai" /> <i class="iconfont iconzhankai" />
</div> </div>
<div class="layout-middle" <div
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"> class="layout-middle"
:style="{ width: middleWidth + 'px', height: middleHeight + 'px' }"
>
<div class="top-button"> <div class="top-button">
<span class="btn"> <span class="btn">
<el-tooltip class="item" <el-tooltip
effect="dark" class="item"
content="保存" effect="dark"
placement="bottom"> content="保存"
<i class="iconfont iconsave" placement="bottom"
@click="saveData"></i> >
<i class="iconfont iconsave" @click="saveData"></i>
</el-tooltip> </el-tooltip>
</span> </span>
<span class="btn"> <span class="btn">
<el-tooltip class="item" <el-tooltip
effect="dark" class="item"
content="预览" effect="dark"
placement="bottom"> content="预览"
<i class="iconfont iconyulan" placement="bottom"
@click="viewScreen"></i> >
<i class="iconfont iconyulan" @click="viewScreen"></i>
</el-tooltip> </el-tooltip>
</span> </span>
</div> </div>
<div class="workbench-container" <div
:style="{ width: bigscreenWidthInWorkbench + 'px', height: bigscreenHeightInWorkbench + 'px' }"> class="workbench-container"
<vue-ruler-tool v-model="dashboard.presetLine" :style="{
class="vueRuler" width: bigscreenWidthInWorkbench + 'px',
:step-length="50" height: bigscreenHeightInWorkbench + 'px'
:parent="true" }"
:position="'relative'" >
:is-scale-revise="true" <vue-ruler-tool
:visible.sync="dashboard.presetLineVisible"> v-model="dashboard.presetLine"
<div id="workbench" class="vueRuler"
class="workbench" :step-length="50"
:style="{ transform: workbenchTransform, width: bigscreenWidth + 'px', height: bigscreenHeight + 'px', 'background-color': dashboard.backgroundColor, 'background-image': 'url(' + dashboard.backgroundImage + ')', 'background-position': '0% 0%', 'background-size': '100% 100%', 'background-repeat': 'initial', 'background-attachment': 'initial', 'background-origin': 'initial', 'background-clip': 'initial' }" :parent="true"
@click="setOptionsOnClickScreen"> :position="'relative'"
<widget v-for="(widget, index) in widgets" :is-scale-revise="true"
:key="index" :visible.sync="dashboard.presetLineVisible"
v-model="widget.value" >
:index="index" <div
:type="widget.type" id="workbench"
:bigscreen="{ bigscreenWidth, bigscreenHeight }" class="workbench"
@onActivated="setOptionsOnClickWidget" :style="{
@contextmenu.prevent.native="rightClick($event, index)" /> transform: workbenchTransform,
width: bigscreenWidth + 'px',
height: bigscreenHeight + 'px',
'background-color': dashboard.backgroundColor,
'background-image': 'url(' + dashboard.backgroundImage + ')',
'background-position': '0% 0%',
'background-size': '100% 100%',
'background-repeat': 'initial',
'background-attachment': 'initial',
'background-origin': 'initial',
'background-clip': 'initial'
}"
@click="setOptionsOnClickScreen"
>
<widget
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)"
/>
</div> </div>
</vue-ruler-tool> </vue-ruler-tool>
</div> </div>
</div> </div>
<div class="layout-right" <div class="layout-right" :style="{ width: widthLeftForOptions + 'px' }">
:style="{ width: widthLeftForOptions + 'px' }"> <el-tabs v-model="activeName" type="border-card" :stretch="true">
<el-tabs v-model="activeName" <el-tab-pane
type="border-card" v-if="
:stretch="true"> isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)
<el-tab-pane v-if="isNotNull(widgetOptions.setup) || isNotNull(widgetOptions.collapse)" "
name="first" name="first"
label="配置"> label="配置"
<dynamicForm ref="formData" >
:options="widgetOptions.setup" <dynamicForm
@onChanged="(val) => widgetValueChanged('setup', val)" /> ref="formData"
:options="widgetOptions.setup"
@onChanged="val => widgetValueChanged('setup', val)"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.data)" <el-tab-pane
name="second" v-if="isNotNull(widgetOptions.data)"
label="数据"> name="second"
<dynamicForm ref="formData" label="数据"
:options="widgetOptions.data" >
@onChanged="(val) => widgetValueChanged('data', val)" /> <dynamicForm
ref="formData"
:options="widgetOptions.data"
@onChanged="val => widgetValueChanged('data', val)"
/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane v-if="isNotNull(widgetOptions.position)" <el-tab-pane
name="third" v-if="isNotNull(widgetOptions.position)"
label="坐标"> name="third"
<dynamicForm ref="formData" label="坐标"
:options="widgetOptions.position" >
@onChanged="(val) => widgetValueChanged('position', val)" /> <dynamicForm
ref="formData"
:options="widgetOptions.position"
@onChanged="val => widgetValueChanged('position', val)"
/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<content-menu :visible.sync="visibleContentMenu" <content-menu
:style-obj="styleObj" :visible.sync="visibleContentMenu"
@deletelayer="deletelayer" /> :style-obj="styleObj"
@deletelayer="deletelayer"
/>
</div> </div>
</template> </template>
<script> <script>
import { insertDashboard, detailDashboard } from '@/api/bigscreen' import { insertDashboard, detailDashboard } from "@/api/bigscreen";
import { widgetTools, getToolByCode } from './tools' import { widgetTools, getToolByCode } from "./tools";
import widget from './widget/widget.vue' import widget from "./widget/widget.vue";
import dynamicForm from './form/dynamicForm.vue' import dynamicForm from "./form/dynamicForm.vue";
import draggable from 'vuedraggable' import draggable from "vuedraggable";
import VueRulerTool from 'vue-ruler-tool' // 大屏设计页面的标尺插件 import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
import contentMenu from './form/contentMenu' import contentMenu from "./form/contentMenu";
export default { export default {
name: 'Login', name: "Login",
components: { components: {
draggable, draggable,
VueRulerTool, VueRulerTool,
widget, widget,
dynamicForm, dynamicForm,
contentMenu, contentMenu
}, },
data () { data() {
return { return {
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域 widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
widthLeftForTools: 200, // 左侧工具栏宽度 widthLeftForTools: 200, // 左侧工具栏宽度
@ -161,22 +206,22 @@ export default {
// 工作台大屏画布，保存到表gaea_report_dashboard中 // 工作台大屏画布，保存到表gaea_report_dashboard中
dashboard: { dashboard: {
id: null, id: null,
title: '', // 大屏页面标题 title: "", // 大屏页面标题
width: 1920, // 大屏设计宽度 width: 1920, // 大屏设计宽度
height: 1080, // 大屏设计高度 height: 1080, // 大屏设计高度
backgroundColor: '', // 大屏背景色 backgroundColor: "", // 大屏背景色
backgroundImage: '', // 大屏背景图片 backgroundImage: "", // 大屏背景图片
refreshSeconds: null, // 大屏刷新时间间隔 refreshSeconds: null, // 大屏刷新时间间隔
presetLine: [], // 辅助线 presetLine: [], // 辅助线
presetLineVisible: true, // 辅助线是否显示 presetLineVisible: true // 辅助线是否显示
}, },
// 大屏的标记 // 大屏的标记
screenCode: '', screenCode: "",
// 大屏画布中的组件 // 大屏画布中的组件
widgets: [ widgets: [
{ {
// type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中 // type和value最终存到数据库中去，保存到gaea_report_dashboard_widget中
type: 'widget-text', type: "widget-text",
value: { value: {
setup: {}, setup: {},
data: {}, data: {},
@ -185,12 +230,12 @@ export default {
height: 100, height: 100,
left: 0, left: 0,
top: 0, top: 0,
zIndex: 0, zIndex: 0
}, }
}, },
// options属性是从工具栏中拿到的tools中拿到 // options属性是从工具栏中拿到的tools中拿到
options: [], options: []
}, }
], // 工作区中拖放的组件 ], // 工作区中拖放的组件
// 当前激活组件 // 当前激活组件
@ -199,83 +244,85 @@ export default {
widgetOptions: { widgetOptions: {
setup: [], // 配置 setup: [], // 配置
data: [], // 数据 data: [], // 数据
position: [], // 坐标 position: [] // 坐标
}, },
flagWidgetClickStopPropagation: false, // 点击组件时阻止事件冒泡传递到画布click事件上 flagWidgetClickStopPropagation: false, // 点击组件时阻止事件冒泡传递到画布click事件上
styleObj: { styleObj: {
left: 0, left: 0,
top: 0, top: 0
}, },
visibleContentMenu: false, visibleContentMenu: false,
rightClickIndex: -1, rightClickIndex: -1,
activeName: 'first', activeName: "first"
} };
}, },
computed: { computed: {
// 左侧折叠切换时，动态计算中间区的宽度 // 左侧折叠切换时，动态计算中间区的宽度
middleWidth () { middleWidth() {
var widthLeftAndRight = 0 var widthLeftAndRight = 0;
if (this.toolIsShow) { if (this.toolIsShow) {
widthLeftAndRight += this.widthLeftForTools // 左侧工具栏宽度 widthLeftAndRight += this.widthLeftForTools; // 左侧工具栏宽度
} }
widthLeftAndRight += this.widthLeftForToolsHideButton // 左侧工具栏折叠按钮宽度 widthLeftAndRight += this.widthLeftForToolsHideButton; // 左侧工具栏折叠按钮宽度
widthLeftAndRight += this.widthLeftForOptions // 右侧配置栏宽度 widthLeftAndRight += this.widthLeftForOptions; // 右侧配置栏宽度
var middleWidth = this.bodyWidth - widthLeftAndRight var middleWidth = this.bodyWidth - widthLeftAndRight;
return middleWidth return middleWidth;
}, },
middleHeight () { middleHeight() {
return this.bodyHeight return this.bodyHeight;
}, },
// 设计台按大屏的缩放比例 // 设计台按大屏的缩放比例
bigscreenScaleInWorkbench () { bigscreenScaleInWorkbench() {
var widthScale = this.middleWidth / this.bigscreenWidth var widthScale = this.middleWidth / this.bigscreenWidth;
var heightScale = this.middleHeight / this.bigscreenHeight var heightScale = this.middleHeight / this.bigscreenHeight;
return Math.min(widthScale, heightScale) return Math.min(widthScale, heightScale);
}, },
workbenchTransform () { workbenchTransform() {
return `scale(${this.bigscreenScaleInWorkbench}, ${this.bigscreenScaleInWorkbench})` return `scale(${this.bigscreenScaleInWorkbench}, ${
this.bigscreenScaleInWorkbench
})`;
}, },
// 大屏在设计模式的大小 // 大屏在设计模式的大小
bigscreenWidthInWorkbench () { bigscreenWidthInWorkbench() {
return this.getPXUnderScale(this.bigscreenWidth) return this.getPXUnderScale(this.bigscreenWidth);
}, },
bigscreenHeightInWorkbench () { bigscreenHeightInWorkbench() {
return this.getPXUnderScale(this.bigscreenHeight) return this.getPXUnderScale(this.bigscreenHeight);
}, },
layerWidget () { layerWidget() {
const layerWidgetArr = [] const layerWidgetArr = [];
for (let i = 0; i < this.widgets.length; i++) { for (let i = 0; i < this.widgets.length; i++) {
layerWidgetArr.push(getToolByCode(this.widgets[i].type)) layerWidgetArr.push(getToolByCode(this.widgets[i].type));
} }
return layerWidgetArr return layerWidgetArr;
}, }
}, },
mounted () { mounted() {
// 一进入时，加载屏幕配置属性 // 一进入时，加载屏幕配置属性
this.setOptionsOnClickScreen() this.setOptionsOnClickScreen();
// 如果是新的设计工作台 // 如果是新的设计工作台
this.initEchartData() this.initEchartData();
this.widgets = [] this.widgets = [];
}, },
methods: { methods: {
async initEchartData () { async initEchartData() {
const reportCode = this.$route.query.reportCode const reportCode = this.$route.query.reportCode;
const { code, data } = await detailDashboard(reportCode) const { code, data } = await detailDashboard(reportCode);
if (code != 200) return if (code != 200) return;
const processData = this.handleInitEchartsData(data) const processData = this.handleInitEchartsData(data);
const screenData = this.handleBigScreen(data.dashboard) const screenData = this.handleBigScreen(data.dashboard);
this.widgets = processData this.widgets = processData;
this.dashboard = screenData this.dashboard = screenData;
}, },
handleBigScreen (data) { handleBigScreen(data) {
const optionScreen = this.deepClone(getToolByCode('screen').options) const optionScreen = this.deepClone(getToolByCode("screen").options);
const setup = optionScreen.setup const setup = optionScreen.setup;
for (const key in data) { for (const key in data) {
for (let i = 0; i < setup.length; i++) { for (let i = 0; i < setup.length; i++) {
if (key == setup[i].name) { if (key == setup[i].name) {
setup[i].value = data[key] setup[i].value = data[key];
} }
} }
} }
@ -284,35 +331,46 @@ export default {
backgroundImage: data.backgroundImage, backgroundImage: data.backgroundImage,
height: data.height, height: data.height,
title: data.title, title: data.title,
width: data.width, width: data.width
} };
}, },
handleInitEchartsData (data) { handleInitEchartsData(data) {
console.log(data) const widgets = data.dashboard.widgets;
const widgets = data.dashboard.widgets const widgetsData = [];
const widgetsData = []
for (let i = 0; i < widgets.length; i++) { for (let i = 0; i < widgets.length; i++) {
var obj = {} var obj = {};
obj.type = widgets[i].type obj.type = widgets[i].type;
obj.value = { obj.value = {
setup: widgets[i].value.setup, setup: widgets[i].value.setup,
data: widgets[i].value.data, data: widgets[i].value.data,
collapse: widgets[i].value.collapse, collapse: widgets[i].value.collapse,
position: widgets[i].value.position, position: widgets[i].value.position
} };
const tool = this.deepClone(getToolByCode(widgets[i].type)) const tool = this.deepClone(getToolByCode(widgets[i].type));
const option = tool.options const option = tool.options;
const options = this.handleOptionsData(widgets[i].value, option) const options = this.handleOptionsData(widgets[i].value, option);
obj.options = options obj.options = options;
widgetsData.push(obj) widgetsData.push(obj);
} }
return widgetsData return widgetsData;
}, },
handleOptionsData (data, option) { handleOptionsData(data, option) {
for (const key in data.setup) { for (const key in data.setup) {
for (let i = 0; i < option.setup.length; i++) { for (let i = 0; i < option.setup.length; i++) {
if (key == option.setup[i].name) { let item = option.setup[i];
option.setup[i].value = data.setup[key] if (Object.prototype.toString.call(item) == "[object Object]") {
if (key == option.setup[i].name) {
option.setup[i].value = data.setup[key];
}
} else if (Object.prototype.toString.call(item) == "[object Array]") {
for (let j = 0; j < item.length; j++) {
const list = item[j].list;
list.forEach(el => {
if (key == el.name) {
el.value = data.setup[key];
}
});
}
} }
} }
} }
@ -320,7 +378,7 @@ export default {
for (const key in data.position) { for (const key in data.position) {
for (let i = 0; i < option.position.length; i++) { for (let i = 0; i < option.position.length; i++) {
if (key == option.position[i].name) { if (key == option.position[i].name) {
option.position[i].value = data.position[key] option.position[i].value = data.position[key];
} }
} }
} }
@ -328,28 +386,17 @@ export default {
for (const key in data.data) { for (const key in data.data) {
for (let i = 0; i < option.data.length; i++) { for (let i = 0; i < option.data.length; i++) {
if (key == option.data[i].name) { if (key == option.data[i].name) {
option.data[i].value = data.data[key] option.data[i].value = data.data[key];
} }
} }
} }
// // collapse return option;
// for (const key in data.collapse) {
// for (let i = 0; i < option.collapse.length; i++) {
// const itemList = option.collapse[i].list
// for (let j = 0; j < itemList.length; j++) {
// if (key == itemList[j].name) {
// itemList[j].value = data.collapse[key]
// }
// }
// }
// }
return option
}, },
// 保存数据 // 保存数据
async saveData () { async saveData() {
if (!this.widgets || this.widgets.length == 0) { if (!this.widgets || this.widgets.length == 0) {
this.$message.error('请添加组件') this.$message.error("请添加组件");
return return;
} }
const screenData = { const screenData = {
reportCode: this.$route.query.reportCode, reportCode: this.$route.query.reportCode,
@ -358,44 +405,46 @@ export default {
width: this.dashboard.width, width: this.dashboard.width,
height: this.dashboard.height, height: this.dashboard.height,
backgroundColor: this.dashboard.backgroundColor, backgroundColor: this.dashboard.backgroundColor,
backgroundImage: this.dashboard.backgroundImage, backgroundImage: this.dashboard.backgroundImage
}, },
widgets: this.widgets, widgets: this.widgets
};
const { code, data } = await insertDashboard(screenData);
if (code == "200") {
this.$message.success("保存成功！");
} }
const { code, data } = await insertDashboard(screenData)
if (code != '200') return
}, },
// 预览 // 预览
viewScreen () { viewScreen() {
var routeUrl = this.$router.resolve({ var routeUrl = this.$router.resolve({
path: '/report/bigscreen/viewer', path: "/bigscreen/viewer",
query: { reportCode: this.$route.query.reportCode }, query: { reportCode: this.$route.query.reportCode }
}) });
window.open(routeUrl.href, '_blank') window.open(routeUrl.href, "_blank");
}, },
// 在缩放模式下的大小 // 在缩放模式下的大小
getPXUnderScale (px) { getPXUnderScale(px) {
return this.bigscreenScaleInWorkbench * px return this.bigscreenScaleInWorkbench * px;
}, },
// 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去 // 拖动一个组件放到工作区中去，在拖动结束时，放到工作区对应的坐标点上去
widgetOnDragged (evt, widgetCode) { widgetOnDragged(evt, widgetCode) {
var widgetType = widgetCode var widgetType = widgetCode;
// 获取结束坐标和列名 // 获取结束坐标和列名
var eventX = evt.originalEvent.clientX // 结束在屏幕的x坐标 var eventX = evt.originalEvent.clientX; // 结束在屏幕的x坐标
var eventY = evt.originalEvent.clientY // 结束在屏幕的y坐标 var eventY = evt.originalEvent.clientY; // 结束在屏幕的y坐标
var workbenchPosition = this.getDomTopLeftById('workbench') var workbenchPosition = this.getDomTopLeftById("workbench");
var widgetTopInWorkbench = eventY - workbenchPosition.top var widgetTopInWorkbench = eventY - workbenchPosition.top;
var widgetLeftInWorkbench = eventX - workbenchPosition.left var widgetLeftInWorkbench = eventX - workbenchPosition.left;
// 计算在缩放模式下的x y // 计算在缩放模式下的x y
var x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench var x = widgetLeftInWorkbench / this.bigscreenScaleInWorkbench;
var y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench var y = widgetTopInWorkbench / this.bigscreenScaleInWorkbench;
// 复制一个组件 // 复制一个组件
var tool = getToolByCode(widgetType) var tool = getToolByCode(widgetType);
var widgetJson = { var widgetJson = {
type: widgetType, type: widgetType,
value: { value: {
@ -406,89 +455,91 @@ export default {
height: 0, height: 0,
left: 0, left: 0,
top: 0, top: 0,
zIndex: 0, zIndex: 0
}, }
}, },
options: tool.options, options: tool.options
} };
// 处理默认值 // 处理默认值
const widgetJsonValue = this.handleDefaultValue(widgetJson) const widgetJsonValue = this.handleDefaultValue(widgetJson);
// 将选中的复制组件，放到工作区中去 // 将选中的复制组件，放到工作区中去
this.widgets.push(this.deepClone(widgetJsonValue)) this.widgets.push(this.deepClone(widgetJsonValue));
// 激活新组件的配置属性 // 激活新组件的配置属性
this.setOptionsOnClickWidget(this.widgets.length - 1) this.setOptionsOnClickWidget(this.widgets.length - 1);
}, },
// 对组件默认值处理 // 对组件默认值处理
handleDefaultValue (widgetJson) { handleDefaultValue(widgetJson) {
for (const key in widgetJson) { for (const key in widgetJson) {
if (key == 'options') { if (key == "options") {
// collapse、data、position、setup // collapse、data、position、setup
// setup 处理 // setup 处理
for (let i = 0; i < widgetJson.options.setup.length; i++) { for (let i = 0; i < widgetJson.options.setup.length; i++) {
const item = widgetJson.options.setup[i] const item = widgetJson.options.setup[i];
if (Object.prototype.toString.call(item) == '[object Object]') { if (Object.prototype.toString.call(item) == "[object Object]") {
widgetJson.value.setup[item.name] = item.value widgetJson.value.setup[item.name] = item.value;
} else if (Object.prototype.toString.call(item) == '[object Array]') { } else if (
Object.prototype.toString.call(item) == "[object Array]"
) {
for (let j = 0; j < item.length; j++) { for (let j = 0; j < item.length; j++) {
const list = item[j].list const list = item[j].list;
list.forEach((el) => { list.forEach(el => {
widgetJson.value.setup[el.name] = el.value widgetJson.value.setup[el.name] = el.value;
}) });
} }
} }
} }
// position // position
for (let i = 0; i < widgetJson.options.position.length; i++) { for (let i = 0; i < widgetJson.options.position.length; i++) {
const item = widgetJson.options.position[i] const item = widgetJson.options.position[i];
if (item.value) { if (item.value) {
widgetJson.value.position[item.name] = item.value widgetJson.value.position[item.name] = item.value;
} }
} }
// data 处理 // data 处理
if (widgetJson.options.data && widgetJson.options.data.length > 0) { if (widgetJson.options.data && widgetJson.options.data.length > 0) {
for (let i = 0; i < widgetJson.options.data.length; i++) { for (let i = 0; i < widgetJson.options.data.length; i++) {
const item = widgetJson.options.data[i] const item = widgetJson.options.data[i];
if (item.value) { if (item.value) {
widgetJson.value.data[item.name] = item.value widgetJson.value.data[item.name] = item.value;
} }
} }
} }
} }
} }
return widgetJson return widgetJson;
}, },
// 如果是点击大屏设计器中的底层，加载大屏底层属性 // 如果是点击大屏设计器中的底层，加载大屏底层属性
setOptionsOnClickScreen () { setOptionsOnClickScreen() {
this.screenCode = 'screen' this.screenCode = "screen";
// 选中不同的组件 右侧都显示第一栏 // 选中不同的组件 右侧都显示第一栏
this.activeName = 'first' this.activeName = "first";
this.widgetOptions = getToolByCode('screen')['options'] this.widgetOptions = getToolByCode("screen")["options"];
}, },
// 如果是点击某个组件，获取该组件的配置项 // 如果是点击某个组件，获取该组件的配置项
setOptionsOnClickWidget (index) { setOptionsOnClickWidget(index) {
// 选中不同的组件 右侧都显示第一栏 // 选中不同的组件 右侧都显示第一栏
this.activeName = 'first' this.activeName = "first";
this.screenCode = '' this.screenCode = "";
if (typeof index == 'number') { if (typeof index == "number") {
if (index < 0 || index >= this.widgets.length) { if (index < 0 || index >= this.widgets.length) {
return return;
} }
this.widgetIndex = index this.widgetIndex = index;
console.log(this.deepClone(this.widgets[index]['options'])) this.widgetOptions = this.deepClone(this.widgets[index]["options"]);
this.widgetOptions = this.deepClone(this.widgets[index]['options']) return;
return
} else { } else {
// 执行传递过来的值 // 执行传递过来的值
this.widgets[index.index].value.position = index.obj this.widgets[index.index].value.position = index.obj;
} }
}, },
// 将当前选中的组件，右侧属性值更新 // 将当前选中的组件，右侧属性值更新
widgetValueChanged (key, val) { widgetValueChanged(key, val) {
console.log(key);
console.log(val);
/* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value /* 更新指定 this.widgets 中第 this.widgetIndex 个组件的value
widgets: [{ widgets: [{
type: 'widget-text', type: 'widget-text',
@ -498,58 +549,62 @@ export default {
position: {} position: {}
} }
}]*/ }]*/
if (this.screenCode == 'screen') { if (this.screenCode == "screen") {
this.dashboard = this.deepClone(val) this.dashboard = this.deepClone(val);
} }
for (let i = 0; i < this.widgets.length; i++) { for (let i = 0; i < this.widgets.length; i++) {
if (this.widgetIndex == i) { if (this.widgetIndex == i) {
this.widgets[i].value[key] = this.deepClone(val) this.widgets[i].value[key] = this.deepClone(val);
this.setDefaultValue(this.widgets[i].options[key], val) this.setDefaultValue(this.widgets[i].options[key], val);
} }
} }
console.log(this.widgets);
}, },
rightClick (event, index) { rightClick(event, index) {
this.rightClickIndex = index this.rightClickIndex = index;
const left = event.clientX const left = event.clientX;
const top = event.clientY const top = event.clientY;
if (left || top) { if (left || top) {
this.styleObj = { this.styleObj = {
left: left + 'px', left: left + "px",
top: top + 'px', top: top + "px",
display: 'block', display: "block"
} };
} }
this.visibleContentMenu = true this.visibleContentMenu = true;
return false return false;
}, },
deletelayer () { deletelayer() {
this.widgets.splice(this.rightClickIndex, 1) this.widgets.splice(this.rightClickIndex, 1);
// console.log(this.widgets);
}, },
setDefaultValue (options, val) { setDefaultValue(options, val) {
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
if (Object.prototype.toString.call(options[i]) == '[object Object]') { if (Object.prototype.toString.call(options[i]) == "[object Object]") {
for (const k in val) { for (const k in val) {
if (options[i].name == k) { if (options[i].name == k) {
options[i].value = val[k] options[i].value = val[k];
} }
} }
} else if (Object.prototype.toString.call(options[i]) == '[object Array]') { } else if (
Object.prototype.toString.call(options[i]) == "[object Array]"
) {
for (let j = 0; j < options[i].length; j++) { for (let j = 0; j < options[i].length; j++) {
const list = options[i][j].list const list = options[i][j].list;
for (let z = 0; z < list.length; z++) { for (let z = 0; z < list.length; z++) {
for (const k in val) { for (const k in val) {
if (list[z].name == k) { if (list[z].name == k) {
list[z].value = val[k] list[z].value = val[k];
} }
} }
} }
} }
} }
} }
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

80
report-ui/src/views/report/bigscreen/designer/widget/widget.vue
Unescape Escape View File

@ -32,8 +32,8 @@
:aspect-ratio="false" :aspect-ratio="false"
@clicked="onActivated(index)" @clicked="onActivated(index)"
@activated="onActivated(index)" @activated="onActivated(index)"
@dragstop="(ev) => onDragstop(ev, index)" @dragstop="ev => onDragstop(ev, index)"
@resizing="(ev) => onResizing(ev, index)" @resizing="ev => onResizing(ev, index)"
> >
<component :is="type" :value="value" /> <component :is="type" :value="value" />
</vue-drag-resize> </vue-drag-resize>
@ -44,26 +44,26 @@
// 大屏设计页面的拖拽插件 https://gitee.com/charact/vue-draggable-resizable-gorkys#dragstop // 大屏设计页面的拖拽插件 https://gitee.com/charact/vue-draggable-resizable-gorkys#dragstop
// import VueDraggableResizable from 'vue-draggable-resizable-gorkys' // import VueDraggableResizable from 'vue-draggable-resizable-gorkys'
// import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css' // import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
import VueDragResize from 'vue-drag-resize' import VueDragResize from "vue-drag-resize";
import widgetHref from './widgetHref.vue' import widgetHref from "./widgetHref.vue";
import widgetText from './widgetText.vue' import widgetText from "./widgetText.vue";
import WidgetMarquee from './widgetMarquee.vue' import WidgetMarquee from "./widgetMarquee.vue";
import widgetTime from './widgetTime.vue' import widgetTime from "./widgetTime.vue";
import widgetImage from './widgetImage.vue' import widgetImage from "./widgetImage.vue";
import widgetSlider from './widgetSlider.vue' import widgetSlider from "./widgetSlider.vue";
import widgetVideo from './widgetVideo.vue' import widgetVideo from "./widgetVideo.vue";
import WidgetIframe from './widgetIframe.vue' import WidgetIframe from "./widgetIframe.vue";
import widgetBarchart from './widgetBarchart.vue' import widgetBarchart from "./widgetBarchart.vue";
import widgetGradientColorBarchart from './bar/widgetGradientColorBarchart.vue' import widgetGradientColorBarchart from "./bar/widgetGradientColorBarchart.vue";
import widgetLinechart from './widgetLinechart.vue' import widgetLinechart from "./widgetLinechart.vue";
import widgetBarlinechart from './widgetBarlinechart' import widgetBarlinechart from "./widgetBarlinechart";
import WidgetPiechart from './widgetPiechart.vue' import WidgetPiechart from "./widgetPiechart.vue";
import WidgetHollowPiechart from './widgetHollowPiechart.vue' import WidgetHollowPiechart from "./widgetHollowPiechart.vue";
import WidgetFunnel from './widgetFunnel.vue' import WidgetFunnel from "./widgetFunnel.vue";
import WidgetGauge from './widgetGauge.vue' import WidgetGauge from "./widgetGauge.vue";
export default { export default {
name: 'Widget', name: "Widget",
components: { components: {
// VueDraggableResizable, // VueDraggableResizable,
VueDragResize, VueDragResize,
@ -82,11 +82,11 @@ export default {
WidgetPiechart, WidgetPiechart,
WidgetHollowPiechart, WidgetHollowPiechart,
WidgetFunnel, WidgetFunnel,
WidgetGauge, WidgetGauge
}, },
model: { model: {
prop: 'value', prop: "value",
event: 'input', event: "input"
}, },
props: { props: {
/* /*
@ -98,48 +98,48 @@ export default {
bigscreen: Object, bigscreen: Object,
value: { value: {
type: [Object], type: [Object],
default: () => {}, default: () => {}
}, }
}, },
data() { data() {
return { return {
data: { data: {
setup: {}, setup: {},
data: {}, data: {},
position: {}, position: {}
}, }
} };
}, },
computed: { computed: {
widgetsWidth() { widgetsWidth() {
return this.value.position.width return this.value.position.width;
}, },
widgetsHeight() { widgetsHeight() {
return this.value.position.height return this.value.position.height;
}, },
widgetsLeft() { widgetsLeft() {
return this.value.position.left return this.value.position.left;
}, },
widgetsTop() { widgetsTop() {
return this.value.position.top return this.value.position.top;
}, },
widgetsZIndex() { widgetsZIndex() {
return this.value.position.zIndex return this.value.position.zIndex || 1;
}, }
}, },
mounted() {}, mounted() {},
methods: { methods: {
onActivated(index) { onActivated(index) {
this.$emit('onActivated', index) this.$emit("onActivated", index);
}, },
onDragstop(obj, index) { onDragstop(obj, index) {
this.$emit('onActivated', { index, obj }) this.$emit("onActivated", { index, obj });
}, },
onResizing(obj, index) { onResizing(obj, index) {
this.$emit('onActivated', { index, obj }) this.$emit("onActivated", { index, obj });
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

315
report-ui/src/views/report/bigscreen/designer/widget/widgetBarchart.vue
Unescape Escape View File

@ -6,11 +6,11 @@
<script> <script>
export default { export default {
name: 'WidgetBarchart', name: "WidgetBarchart",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean
}, },
data() { data() {
return { return {
@ -18,121 +18,120 @@ export default {
grid: {}, grid: {},
legend: { legend: {
textStyle: { textStyle: {
color: '#fff', color: "#fff"
}, }
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
data: [], data: [],
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: "#fff"
}, }
}, }
}, },
yAxis: { yAxis: {
type: 'value', type: "value",
data: [], data: [],
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: '#fff', color: "#fff"
}, }
}, }
}, },
series: [ series: [
{ {
data: [], data: [],
type: 'bar', type: "bar",
barGap: '0%', barGap: "0%",
itemStyle: { itemStyle: {
borderRadius: null, borderRadius: null
}, }
}, }
], ]
}, },
optionsStyle: {}, // 样式 optionsStyle: {}, // 样式
optionsData: {}, // 数据 optionsData: {}, // 数据
optionsSetup: {}, optionsSetup: {}
} };
}, },
computed: { computed: {
styleObj() { styleObj() {
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + 'px', width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + 'px', height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + 'px', left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + 'px', top: this.optionsStyle.top + "px",
background: this.optionsSetup.background, background: this.optionsSetup.background
} };
}, }
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
console.log(val) this.optionsStyle = val.position;
this.optionsStyle = val.position this.optionsData = val.data;
this.optionsData = val.data this.optionsCollapse = val.setup;
this.optionsCollapse = val.setup this.optionsSetup = val.setup;
this.optionsSetup = val.setup this.editorOptions();
this.editorOptions()
}, },
deep: true, deep: true
}, }
}, },
mounted() { mounted() {
this.optionsStyle = this.value.position this.optionsStyle = this.value.position;
this.optionsData = this.value.data this.optionsData = this.value.data;
this.optionsCollapse = this.value.setup this.optionsCollapse = this.value.setup;
this.optionsSetup = this.value.setup this.optionsSetup = this.value.setup;
this.editorOptions() this.editorOptions();
}, },
methods: { methods: {
// 修改图标options属性 // 修改图标options属性
editorOptions() { editorOptions() {
this.setOptionsTitle() this.setOptionsTitle();
this.setOptionsX() this.setOptionsX();
this.setOptionsY() this.setOptionsY();
this.setOptionsTop() this.setOptionsTop();
this.setOptionsTooltip() this.setOptionsTooltip();
this.setOptionsMargin() this.setOptionsMargin();
this.setOptionsLegend() this.setOptionsLegend();
this.setOptionsColor() this.setOptionsColor();
this.setOptionsData() this.setOptionsData();
}, },
// 标题修改 // 标题修改
setOptionsTitle() { setOptionsTitle() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const title = {} const title = {};
title.text = optionsCollapse.titleText title.text = optionsCollapse.titleText;
title.show = optionsCollapse.isNoTitle title.show = optionsCollapse.isNoTitle;
title.left = optionsCollapse.textAlign title.left = optionsCollapse.textAlign;
title.textStyle = { title.textStyle = {
color: optionsCollapse.textColor, color: optionsCollapse.textColor,
fontSize: optionsCollapse.textFontSize, fontSize: optionsCollapse.textFontSize,
fontWeight: optionsCollapse.textFontWeight, fontWeight: optionsCollapse.textFontWeight
} };
title.subtext = optionsCollapse.subText title.subtext = optionsCollapse.subText;
title.subtextStyle = { title.subtextStyle = {
color: optionsCollapse.subTextColor, color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.subTextFontWeight, fontWeight: optionsCollapse.subTextFontWeight,
fontSize: optionsCollapse.subTextFontSize, fontSize: optionsCollapse.subTextFontSize
} };
this.options.title = title this.options.title = title;
}, },
// X轴设置 // X轴设置
setOptionsX() { setOptionsX() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const xAxis = { const xAxis = {
type: 'category', type: "category",
show: optionsCollapse.hideX, // 坐标轴是否显示 show: optionsCollapse.hideX, // 坐标轴是否显示
name: optionsCollapse.xName, // 坐标轴名称 name: optionsCollapse.xName, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsCollapse.xNameColor, color: optionsCollapse.xNameColor,
fontSize: optionsCollapse.xNameFontSize, fontSize: optionsCollapse.xNameFontSize
}, },
nameRotate: optionsCollapse.textAngle, // 文字角度 nameRotate: optionsCollapse.textAngle, // 文字角度
inverse: optionsCollapse.reversalX, // 轴反转 inverse: optionsCollapse.reversalX, // 轴反转
@ -142,194 +141,194 @@ export default {
rotate: optionsCollapse.textAngle, // 文字角度 rotate: optionsCollapse.textAngle, // 文字角度
textStyle: { textStyle: {
color: optionsCollapse.Xcolor, // x轴 坐标文字颜色 color: optionsCollapse.Xcolor, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeX, fontSize: optionsCollapse.fontSizeX
}, }
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: "#fff"
}, }
}, }
} };
this.options.xAxis = xAxis this.options.xAxis = xAxis;
}, },
// Y轴设置 // Y轴设置
setOptionsY() { setOptionsY() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const yAxis = { const yAxis = {
type: 'value', type: "value",
show: optionsCollapse.isShowY, // 坐标轴是否显示 show: optionsCollapse.isShowY, // 坐标轴是否显示
name: optionsCollapse.textNameY, // 坐标轴名称 name: optionsCollapse.textNameY, // 坐标轴名称
nameTextStyle: { nameTextStyle: {
color: optionsCollapse.NameColorY, color: optionsCollapse.NameColorY,
fontSize: optionsCollapse.NameFontSizeY, fontSize: optionsCollapse.NameFontSizeY
}, },
inverse: optionsCollapse.reversalY, // 轴反转 inverse: optionsCollapse.reversalY, // 轴反转
axisLabel: { axisLabel: {
show: true, show: true,
textStyle: { textStyle: {
color: optionsCollapse.colorY, // x轴 坐标文字颜色 color: optionsCollapse.colorY, // x轴 坐标文字颜色
fontSize: optionsCollapse.fontSizeY, fontSize: optionsCollapse.fontSizeY
}, }
}, },
splitLine: { splitLine: {
show: false, show: false
}, },
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#fff', color: "#fff"
}, }
}, }
} };
this.options.yAxis = yAxis this.options.yAxis = yAxis;
}, },
// 数值设定 or 柱体设置 // 数值设定 or 柱体设置
setOptionsTop() { setOptionsTop() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const series = this.options.series const series = this.options.series;
for (const key in series) { for (const key in series) {
if (series[key].type == 'bar') { if (series[key].type == "bar") {
series[key].label = { series[key].label = {
show: optionsCollapse.isShow, show: optionsCollapse.isShow,
position: 'top', position: "top",
distance: 10, distance: 10,
fontSize: optionsCollapse.fontSize, fontSize: optionsCollapse.fontSize,
color: optionsCollapse.subTextColor, color: optionsCollapse.subTextColor,
fontWeight: optionsCollapse.fontWeight, fontWeight: optionsCollapse.fontWeight
} };
series[key].barWidth = optionsCollapse.maxWidth series[key].barWidth = optionsCollapse.maxWidth;
series[key].barMinHeight = optionsCollapse.minHeight series[key].barMinHeight = optionsCollapse.minHeight;
} }
} }
this.options.series = series this.options.series = series;
}, },
// tooltip 设置 // tooltip 设置
setOptionsTooltip() { setOptionsTooltip() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const tooltip = { const tooltip = {
trigger: 'item', trigger: "item",
show: true, show: true,
textStyle: { textStyle: {
color: optionsCollapse.lineColor, color: optionsCollapse.lineColor,
fontSize: optionsCollapse.fontSize, fontSize: optionsCollapse.fontSize
}, }
} };
this.options.tooltip = tooltip this.options.tooltip = tooltip;
}, },
// 边距设置 // 边距设置
setOptionsMargin() { setOptionsMargin() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const grid = { const grid = {
left: optionsCollapse.marginLeft, left: optionsCollapse.marginLeft,
right: optionsCollapse.marginRight, right: optionsCollapse.marginRight,
bottom: optionsCollapse.marginBottom, bottom: optionsCollapse.marginBottom,
top: optionsCollapse.marginTop, top: optionsCollapse.marginTop,
containLabel: true, containLabel: true
} };
this.options.grid = grid this.options.grid = grid;
}, },
// 图例操作 legend // 图例操作 legend
setOptionsLegend() { setOptionsLegend() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const legend = this.options.legend const legend = this.options.legend;
legend.show = optionsCollapse.isShowLegend legend.show = optionsCollapse.isShowLegend;
legend.left = optionsCollapse.lateralPosition == 'left' ? 0 : 'auto' legend.left = optionsCollapse.lateralPosition == "left" ? 0 : "auto";
legend.right = optionsCollapse.lateralPosition == 'right' ? 0 : 'auto' legend.right = optionsCollapse.lateralPosition == "right" ? 0 : "auto";
legend.top = optionsCollapse.longitudinalPosition == 'top' ? 0 : 'auto' legend.top = optionsCollapse.longitudinalPosition == "top" ? 0 : "auto";
legend.bottom = optionsCollapse.longitudinalPosition == 'bottom' ? 0 : 'auto' legend.bottom =
legend.orient = optionsCollapse.layoutFront optionsCollapse.longitudinalPosition == "bottom" ? 0 : "auto";
legend.orient = optionsCollapse.layoutFront;
legend.textStyle = { legend.textStyle = {
color: optionsCollapse.lengedColor, color: optionsCollapse.lengedColor,
fontSize: optionsCollapse.fontSize, fontSize: optionsCollapse.fontSize
} };
legend.itemWidth = optionsCollapse.lengedWidth legend.itemWidth = optionsCollapse.lengedWidth;
}, },
// 图例颜色修改 // 图例颜色修改
setOptionsColor() { setOptionsColor() {
const optionsCollapse = this.optionsSetup const optionsCollapse = this.optionsSetup;
const customColor = optionsCollapse.customColor const customColor = optionsCollapse.customColor;
if (!customColor) return if (!customColor) return;
const arrColor = [] const arrColor = [];
for (let i = 0; i < customColor.length; i++) { for (let i = 0; i < customColor.length; i++) {
arrColor.push(customColor[i].color) arrColor.push(customColor[i].color);
} }
const itemStyle = { const itemStyle = {
normal: { normal: {
color: (params) => { color: params => {
return arrColor[params.dataIndex] return arrColor[params.dataIndex];
}, },
barBorderRadius: optionsCollapse.radius, barBorderRadius: optionsCollapse.radius
}, }
} };
for (const key in this.options.series) { for (const key in this.options.series) {
if (this.options.series[key].type == 'bar') { if (this.options.series[key].type == "bar") {
this.options.series[key].itemStyle = itemStyle this.options.series[key].itemStyle = itemStyle;
} }
} }
this.options = Object.assign({}, this.options) this.options = Object.assign({}, this.options);
}, },
// 数据解析 // 数据解析
setOptionsData() { setOptionsData() {
const optionsSetup = this.optionsSetup const optionsSetup = this.optionsSetup;
console.log(optionsSetup) const optionsData = this.optionsData; // 数据类型 静态 or 动态
const optionsData = this.optionsData // 数据类型 静态 or 动态 optionsData.dataType == "staticData"
console.log(optionsData) ? this.staticDataFn(optionsData.staticData, optionsSetup)
optionsData.dataType == 'staticData' ? this.staticDataFn(optionsData.staticData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup) : this.dynamicDataFn(optionsData.dynamicData, optionsSetup);
}, },
// 静态数据 // 静态数据
staticDataFn(val, optionsSetup) { staticDataFn(val, optionsSetup) {
const staticData = JSON.parse(val) const staticData = JSON.parse(val);
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = [] this.options.xAxis.data = [];
this.options.yAxis.data = staticData.categories this.options.yAxis.data = staticData.categories;
this.options.xAxis.type = 'value' this.options.xAxis.type = "value";
this.options.yAxis.type = 'category' this.options.yAxis.type = "category";
} else { } else {
this.options.xAxis.data = staticData.categories this.options.xAxis.data = staticData.categories;
this.options.yAxis.data = [] this.options.yAxis.data = [];
this.options.xAxis.type = 'category' this.options.xAxis.type = "category";
this.options.yAxis.type = 'value' this.options.yAxis.type = "value";
} }
// series // series
const series = this.options.series const series = this.options.series;
for (const i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == "bar") {
series[i].data = staticData.series[0].data series[i].data = staticData.series[0].data;
} }
} }
}, },
// 动态数据 // 动态数据
dynamicDataFn(val, optionsSetup) { dynamicDataFn(val, optionsSetup) {
console.log(val) if (!val) return;
if (!val) return
// x轴 // x轴
if (optionsSetup.verticalShow) { if (optionsSetup.verticalShow) {
this.options.xAxis.data = [] this.options.xAxis.data = [];
this.options.yAxis.data = val.xAxis this.options.yAxis.data = val.xAxis;
this.options.xAxis.type = 'value' this.options.xAxis.type = "value";
this.options.yAxis.type = 'category' this.options.yAxis.type = "category";
} else { } else {
this.options.xAxis.data = val.xAxis this.options.xAxis.data = val.xAxis;
this.options.yAxis.data = [] this.options.yAxis.data = [];
this.options.xAxis.type = 'category' this.options.xAxis.type = "category";
this.options.yAxis.type = 'value' this.options.yAxis.type = "value";
} }
// series // series
const series = this.options.series const series = this.options.series;
for (const i in series) { for (const i in series) {
if (series[i].type == 'bar') { if (series[i].type == "bar") {
series[i].data = val.series[i].data series[i].data = val.series[i].data;
} }
} }
}, }
}, }
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

47
report-ui/src/views/report/bigscreen/designer/widget/widgetText.vue
Unescape Escape View File

@ -10,52 +10,53 @@
<script> <script>
export default { export default {
name: 'WidgetText', name: "WidgetText",
components: {}, components: {},
props: { props: {
value: Object, value: Object,
ispreview: Boolean, ispreview: Boolean
}, },
data() { data() {
return { return {
options: {}, options: {}
} };
}, },
computed: { computed: {
transStyle() { transStyle() {
return this.objToOne(this.options) return this.objToOne(this.options);
}, },
styleColor() { styleColor() {
console.log(this.transStyle);
return { return {
position: this.ispreview ? 'absolute' : 'static', position: this.ispreview ? "absolute" : "static",
color: this.transStyle.color, color: this.transStyle.color,
'font-weight': this.transStyle.fontWeight, "font-weight": this.transStyle.fontWeight,
text: this.transStyle.text, text: this.transStyle.text,
'font-size': this.transStyle.fontSize + 'px', "font-size": this.transStyle.fontSize + "px",
'letter-spacing': this.transStyle.letterSpacing + 'em', "letter-spacing": this.transStyle.letterSpacing + "em",
background: this.transStyle.background, background: this.transStyle.background,
'text-align': this.transStyle.textAlign, "text-align": this.transStyle.textAlign,
width: this.transStyle.width + 'px', width: this.transStyle.width + "px",
height: this.transStyle.height + 'px', height: this.transStyle.height + "px",
left: this.transStyle.left + 'px', left: this.transStyle.left + "px",
top: this.transStyle.top + 'px', top: this.transStyle.top + "px",
right: this.transStyle.right + 'px', right: this.transStyle.right + "px"
} };
}, }
}, },
watch: { watch: {
value: { value: {
handler(val) { handler(val) {
this.options = val this.options = val;
}, },
deep: true, deep: true
}, }
}, },
mounted() { mounted() {
this.options = this.value this.options = this.value;
}, },
methods: {}, methods: {}
} };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

Write Preview
Loading…
Cancel
Save