admin/gr_bi_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BI大屏下钻和日期拆分

Browse Source
This commit is contained in:
mll
2026-02-08 20:35:07 +08:00
parent 84bdfdb8bc
commit 13e436bbb5
13 changed files with 1948 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/mixins/common.js
View File

@@ -181,7 +181,7 @@ export default {
},
// 对象深拷贝
deepClone(data) {
deepClone(data,dd) {
let type = this.getObjectType(data)
let obj
if (type === 'array') {

1418
src/views/bigscreenDesigner/designer/components/drillDrownSetting.vue Normal file
View File

File diff suppressed because it is too large Load Diff

50
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
View File

@@ -13,8 +13,10 @@
<el-form-item
v-if="
inputShow[item.name] &&
item.type != 'el-collapse'&&
item.type != 'dycustComponents' &&
item.type != 'dynamic-add-table'
item.type != 'dynamic-add-table'&&
(item.name != 'is_drill_drown' || hideDrill === false)
"
:label="item.label"
:prop="item.name"
@@ -155,7 +157,7 @@
<el-button type="primary" @click="saveData">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="代码编辑"
:visible.sync="methodsVisible"
@@ -173,6 +175,15 @@
</span>
</el-dialog>
</el-form-item>
<el-collapse v-if="inputShow[item.name] && item.type === 'el-collapse'">
<el-collapse-item
class="collapseItem1"
:title="item.label"
@click.prevent.native="handleCollapse"
:name="item.label"
>
</el-collapse-item>
</el-collapse>
<dynamicComponents
v-if="item.type == 'dycustComponents' && inputShow[item.name]"
v-model="formData[item.name]"
@@ -336,6 +347,7 @@
<script>
import ColorPicker from "./colorPicker.vue";
import vueJsonEditor from "vue-json-editor";
import "codemirror/lib/codemirror.css"; // 核心样式
import "codemirror/theme/cobalt.css"; // 引入主题后还需要在 options 中指定主题才会生效
// language
@@ -354,7 +366,7 @@ import componentLinkage from './componentLinkage';
import imageSelect from './imageSelect';
import multiIframeManager from './multiIframeManager.vue';
export default {
name: "DynamicForm",
name: "dynamic-form",
components: {
imageSelect,
ColorPicker,
@@ -390,6 +402,10 @@ export default {
widgetIndex: {
type: Number,
default: -1
},
hideDrill:{
type: Boolean,
default:false,
}
},
data() {
@@ -399,6 +415,8 @@ export default {
dialogVisibleStaticData: false,
methodsVisible: false,
validationRules: "",
optionsJavascript: {
mode: "text/javascript",
tabSize: 2, // 缩进格式
@@ -416,6 +434,7 @@ export default {
value(newValue, oldValue) {
this.formData = newValue || {};
},
options(val) {
this.setDefaultValue();
this.isShowData();
@@ -427,6 +446,12 @@ export default {
},
mounted() {},
methods: {
handleCollapse(){
this.$emit('handleCollapse',this.formData)
},
changeDrillData(val){
this.changed(val, 'drill_drown_setting')
},
onJsonChange(val) {
console.log(val);
},
@@ -442,7 +467,6 @@ export default {
} else {
this.$set(this.formData, key, val);
}
this.$emit("onChanged", this.formData);
// key为当前用户操作的表单组件
for (let i = 0; i < this.options.length; i++) {
@@ -465,6 +489,7 @@ export default {
handleClose() {
this.dialogVisibleStaticData = false;
this.methodsVisible = false;
},
// 组件属性 数据是否展示动态还是静态数据
isShowData() {
@@ -480,8 +505,9 @@ export default {
}
}
data.forEach((el) => {
if (el.relactiveDomValue != currentData.value) {
if (el.relactiveDomValue != currentData.value&&el.name!=='drill_drown_setting') {
this.inputShow[el.name] = false;
console.log(el.name)
}
});
},
@@ -494,6 +520,9 @@ export default {
this.formData[this.options[i].name] = this.deepClone(
this.options[i].value
);
if(this.options[i].name=="is_drill_drown"&&this.formData[this.options[i].name]){
this.inputShow['drill_drown_setting']=true
}
} else if (Object.prototype.toString.call(obj) == "[object Array]") {
for (let j = 0; j < obj.length; j++) {
const list = obj[j].list;
@@ -515,6 +544,12 @@ export default {
</script>
<style lang="scss">
.dialogDrillDrown.el-dialog__wrapper .el-dialog{
.el-dialog__body{
max-height:calc(100vh - 60px) !important;
overflow-y:hidden !important;
}
}
.el-form-item {
margin-bottom: 5px;
}
@@ -547,4 +582,9 @@ export default {
background: transparent;
padding-bottom: 0;
}
.collapseItem1 .el-collapse-item__arrow.is-active{
cursor:pointer;
color: #bcc9d4;
transform:rotate(0)
}
</style>

33
src/views/bigscreenDesigner/designer/index.vue
View File

@@ -310,11 +310,12 @@
label="配置"
>
<dynamicForm
ref="formData"
ref="formData1"
:options="widgetOptions.setup"
:layer-widget="layerWidget"
:widget-index="widgetIndex"
:widget-params-config="widgetParamsConfig"
@handleCollapse="handleCollapse"
@onChanged="(val) => widgetValueChanged('setup', val)"
/>
</el-tab-pane>
@@ -342,7 +343,15 @@
</el-tab-pane>
</el-tabs>
</div>
<el-dialog
title="下钻配置"
:visible.sync="dialogVisibleDrillDrown"
width="100%"
class="dialogDrillDrown"
>
<drill-drown-setting @submitDrillDrownData="submitDrillDrownData" :screenData="screenData"></drill-drown-setting>
</el-dialog>
<content-menu
:visible.sync="visibleContentMenu"
:style-obj="styleObj"
@@ -367,7 +376,7 @@ import dynamicForm from "./components/dynamicForm.vue";
import draggable from "vuedraggable";
import VueRulerTool from "vue-ruler-tool"; // 大屏设计页面的标尺插件
import contentMenu from "./components/contentMenu";
import DrillDrownSetting from "./components/drillDrownSetting";
export default {
name: "Login",
components: {
@@ -376,11 +385,13 @@ export default {
widget,
dynamicForm,
contentMenu,
DrillDrownSetting
},
mixins: [mixin],
data() {
return {
grade: false,
dialogVisibleDrillDrown:false,
layerWidget: [],
widgetTools: widgetTools, // 左侧工具栏的组件图标，将js变量加入到当前作用域
widthLeftForTools: 200, // 左侧工具栏宽度
@@ -388,7 +399,10 @@ export default {
widthLeftForOptions: 300, // 右侧属性配置区
widthPaddingTools: 18,
toolIsShow: true, // 左侧工具栏是否显示
screenData:{
dashboard: { },
widgets: []
},
bigscreenWidth: 1920, // 大屏设计的大小
bigscreenHeight: 1080,
@@ -494,6 +508,14 @@ export default {
});
},
methods: {
submitDrillDrownData(data){
this.dialogVisibleDrillDrown=false
this.$refs.formData1.changeDrillData(data)
},
handleCollapse(val){
this.dialogVisibleDrillDrown=true
this.screenData=val.drill_drown_setting?val.drill_drown_setting:this.screenData
},
// 获取图层数据
getLayerData(val) {
const layerWidgetArr = [];
@@ -506,6 +528,7 @@ export default {
if (val[i].value.paramsKeys) {
obj.paramsKeys = val[i].value.paramsKeys;
}
const options = val[i].options["setup"];
options.forEach((el) => {
if (el.name == "layerName") {
@@ -596,6 +619,7 @@ export default {
options: tool.options,
};
// 处理默认值
console.log(widgetType)
const widgetJsonValue = this.getWidgetConfigValue(widgetJson);
widgetJsonValue.value.position.left =
@@ -618,7 +642,6 @@ export default {
widgetJson.value.position
);
this.setWidgetConfigValue(widgetJson.options.data, widgetJson.value.data);
return widgetJson;
},
setWidgetConfigValue(config, configValue) {

18
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-image.js
View File

@@ -70,6 +70,24 @@ export const widgetImage = {
required: false,
placeholder: '',
},
{
type: 'el-switch',
label: '开启下钻',
name: 'is_drill_drown',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-collapse',
label: '下钻配置',
name: 'drill_drown_setting',
relactiveDom:'is_drill_drown',
relactiveDomValue:true,
required: false,
placeholder: '',
value:''
},
],
// 数据
data: [],

18
src/views/bigscreenDesigner/designer/tools/configure/texts/widget-text.js
View File

@@ -150,6 +150,24 @@ export const widgetText = {
placeholder: '',
value: false,
},
{
type: 'el-switch',
label: '开启下钻',
name: 'is_drill_drown',
required: false,
placeholder: '',
value: false,
},
{
type: 'el-collapse',
label: '下钻配置',
name: 'drill_drown_setting',
relactiveDom:'is_drill_drown',
relactiveDomValue:true,
required: false,
placeholder: '',
value:''
},
[
{
name: '自定义样式设置',

179
src/views/bigscreenDesigner/designer/widget/form/widgetFormTime old.vue Normal file
View File

@@ -0,0 +1,179 @@
<!--
* @Author: qianlishi qianlishi@anji-plus.com
* @Date: 2023-03-06 15:38:10
* @LastEditors: qianlishi qianlishi@anji-plus.com
* @LastEditTime: 2023-04-20 13:54:57
-->
<template>
<el-date-picker
:style="styleObj"
v-model="timeValue"
:value-format="valueFormat"
:picker-options="datetimeRangePickerOptions"
:type="dateType"
@[eventChange]="change"
/>
</template>
<script>
import {
originWidgetLinkageLogic,
targetWidgetLinkageLogic,
} from "@/views/bigscreenDesigner/designer/linkageLogic";
import miment from 'miment'
export default {
name: "WidgetFormTime",
props: {
value: Object,
ispreview: Boolean,
widgetIndex: {
type: Number,
default: 0,
},
},
data() {
return {
timeValue: "",
optionsStyle: {},
optionsData: {},
optionsSetup: {},
//日期时间快捷选项
datetimeRangePickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
}, {
text: '昨天',
onClick(picker) {
const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一周',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date(new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
start.setTime(miment().add(-6, 'DD').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-1, 'MM').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-3, 'MM').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近半年',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-6, 'MM').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一年',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-1, 'YY').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}],
// disabledDate(time){
// return time.getTime() > Date.now()
// }
}
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.select_background,
};
},
eventChange() {
return "change";
},
dateType() {
return this.optionsSetup.dateType || 'datetimerange';
},
valueFormat() {
return this.dateType === 'daterange' ? 'yyyy-MM-dd' : 'yyyy-MM-dd HH:mm:ss';
},
allComponentLinkage() {
return this.$store.state.designer.allComponentLinkage;
},
},
watch: {
value: {
handler(val) {
this.optionsSetup = val.setup;
this.optionsData = val.data;
this.optionsStyle = val.position;
},
deep: true,
},
},
mounted() {
this.optionsSetup = this.value.setup;
this.optionsData = this.value.data;
this.optionsStyle = this.value.position;
targetWidgetLinkageLogic(this); // 联动-目标组件逻辑
},
methods: {
change(event) {
const formTimeData = {}
formTimeData['startTime'] = event[0] //startTime
formTimeData['endTime'] = event[1] //endTime
originWidgetLinkageLogic(this, true, {
currentData: formTimeData,
}); // 联动-源组件逻辑
},
},
};
</script>
<style scoped lang="scss">
.el-select {
height: 100%;
.el-input {
height: 100%;
.el-input__inner {
height: 100%;
background: inherit;
color: inherit;
&::placeholder {
color: inherit;
}
}
}
}
</style>

126
src/views/bigscreenDesigner/designer/widget/form/widgetFormTime.vue
View File

@@ -5,14 +5,26 @@
* @LastEditTime: 2023-04-20 13:54:57
-->
<template>
<div class="pickWrap">
<el-date-picker
:style="styleObj"
v-model="timeValue"
:value-format="valueFormat"
:picker-options="datetimeRangePickerOptions"
:type="dateType"
@[eventChange]="change"
class="start-picker date-picker"
:style="styleObj"
v-model="startTime"
:value-format="valueFormat"
:type="dateType=='datetimerange'?'datetime':'date'"
@[eventChange]="change"
/>
<el-date-picker
class="date-picker"
:style="{...styleObj,left:styleObj.leftEnd,width:styleObj.widthEnd}"
v-model="endTime"
:value-format="valueFormat"
:type="dateType=='datetimerange'?'datetime':'date'"
@[eventChange]="change"
/>
</div>
</template>
<script>
import {
@@ -33,85 +45,23 @@ export default {
},
data() {
return {
timeValue: "",
optionsStyle: {},
optionsData: {},
optionsSetup: {},
//日期时间快捷选项
datetimeRangePickerOptions: {
shortcuts: [{
text: '今天',
onClick(picker) {
const start = new Date(new Date(new Date().getTime()).setHours(0, 0, 0, 0));
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
}, {
text: '昨天',
onClick(picker) {
const start = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(0, 0, 0, 0));
const end = new Date(new Date(new Date().getTime() - 24 * 60 * 60 * 1000).setHours(23, 59, 59, 999));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一周',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date(new Date(new Date().getTime() + 24 * 60 * 60 * 1000));
start.setTime(miment().add(-6, 'DD').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-1, 'MM').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-3, 'MM').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近半年',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-6, 'MM').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一年',
onClick(picker) {
const end = new Date(new Date(new Date().getTime()).setHours(23, 59, 59, 999));
const start = new Date();
start.setTime(miment().add(-1, 'YY').stamp());
new Date(start.setHours(0, 0, 0, 0));
picker.$emit('pick', [start, end]);
}
}],
// disabledDate(time){
// return time.getTime() > Date.now()
// }
}
endTime:null,
startTime:null,
};
},
computed: {
styleObj() {
return {
position: this.ispreview ? "absolute" : "static",
width: this.optionsStyle.width + "px",
width: this.optionsStyle.width/2+12 + "px",
widthEnd: this.optionsStyle.width/2-12 + "px",
height: this.optionsStyle.height + "px",
left: this.optionsStyle.left + "px",
leftEnd: this.optionsStyle.left+this.optionsStyle.width/2+12 + "px",
top: this.optionsStyle.top + "px",
background: this.optionsSetup.select_background,
};
@@ -149,8 +99,8 @@ export default {
methods: {
change(event) {
const formTimeData = {}
formTimeData['startTime'] = event[0] //startTime
formTimeData['endTime'] = event[1] //endTime
formTimeData['startTime'] = this.startTime //event[0] //startTime
formTimeData['endTime'] = this.endTime //event[1] //endTime
originWidgetLinkageLogic(this, true, {
currentData: formTimeData,
}); // 联动-源组件逻辑
@@ -159,21 +109,15 @@ export default {
};
</script>
<style scoped lang="scss">
.el-select {
height: 100%;
.el-input {
height: 100%;
.el-input__inner {
height: 100%;
background: inherit;
color: inherit;
&::placeholder {
color: inherit;
}
.start-picker{
display:flex;
&:after{
content:'-';
width:24px;
transform:translate(7px,5px)
}
}
}
.pickWrap{
display:flex;
}
</style>

2
src/views/bigscreenDesigner/designer/widget/temp.vue
View File

@@ -5,6 +5,7 @@
:value="value"
:ispreview="true"
:widget-index="index"
@oepnTheDrillView="$emit('oepnTheDrillView',$event)"
/>
</div>
</template>
@@ -58,7 +59,6 @@ import widgetChinaMap from "./map/widgetChinaMap.vue";
import widgetGlobalMap from "./map/widgetGlobalMap.vue";
import widgetBarStackMoreShowChart from "./bar/widgetBarStackMoreShowChart.vue";
import widgetBarLineSingleChart from "./barline/widgetBarLineSingleChart.vue";
export default {
name: "WidgetTemp",
components: {

20
src/views/bigscreenDesigner/designer/widget/texts/widgetImage.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="imagebox" :style="styleColor">
<div class="imagebox" :style="styleColor" @click="handleClick" >
<img
:class="transStyle.startRotate ? 'startImg' : ''"
:style="imgStyle"
@@ -18,7 +18,8 @@ export default {
},
data() {
return {
options: {}
options: {},
optionsSetup:{}
};
},
computed: {
@@ -50,15 +51,26 @@ export default {
value: {
handler(val) {
this.options = val;
this.optionsSetup = val.setup;
},
deep: true
}
},
created() {
this.options = this.value;
this.optionsSetup = this.value.setup;
},
mounted() {},
methods: {}
mounted() {
},
methods: {
handleClick(){
console.log(this.optionsSetup)
if(!!this.optionsSetup.is_drill_drown){
this.$emit('oepnTheDrillView',this.optionsSetup.drill_drown_setting)
}
},
}
};
</script>

7
src/views/bigscreenDesigner/designer/widget/texts/widgetText.vue
View File

@@ -5,7 +5,7 @@
* @Last Modified time: 2022-3-14 14:04:24
!-->
<template>
<div class="text" :style="computedStyleColor">{{ styleColor.text }}</div>
<div class="text" @click="handleClick" :style="computedStyleColor">{{ styleColor.text }}</div>
</template>
<script>
import {targetWidgetLinkageLogic} from "@/views/bigscreenDesigner/designer/linkageLogic";
@@ -84,6 +84,11 @@ export default {
this.setOptionsData();
},
methods: {
handleClick(){
if(!!this.optionsSetup.is_drill_drown){
this.$emit('oepnTheDrillView',this.optionsSetup.drill_drown_setting)
}
},
// 根据条件应用样式
getConditionalStyle() {
const setup = this.optionsSetup || {};

150
src/views/bigscreenDesigner/viewer/drillDrownView.vue Normal file
View File

@@ -0,0 +1,150 @@
<!--
* @Descripttion: 大屏设计器 -- 预览
* @Author: Devli
* @Date: 2021-3-13 11:04:24
* @Last Modified by: Raod
* @Last Modified time: 2022-5-6 11:04:24
!-->
<template>
<div class="layout">
<div :style="bigScreenStyle">
<widget
v-for="(widget, index) in widgets"
:key="index"
v-model="widget.value"
:index="index"
:type="widget.type"
/>
</div>
</div>
</template>
<script>
import widget from "../designer/widget/temp";
import { detailDashboard } from "@/api/bigscreen";
export default {
name: "Login",
components: {
widget
},
data() {
return {
bigScreenStyle: {},
dashboard:{},
widgets: [],
viewData:{}
};
},
props:{
screenData:{
type:Object,
default:()=>{
return {
dashboard: { },
widgets: []
}
}
}
},
watch: {
screenData: {
handler(val) {
this.viewData=val
this.getData();
},
deep: true,
immediate:true
}
},
mounted() {
this.viewData=this.screenData
this.getData();
window.onresize=this.Debounce(this.setScale,500);
},
methods: {
async getData() {
const data = {dashboard:{...this.viewData.dashboard,...this.viewData},widgets:null};
this.dashboard=data.dashboard||{};
const equipment = document.body.clientWidth;
const ratioEquipment = equipment / data.dashboard.width;
this.bigScreenStyle = {
width: data.dashboard.width + "px",
height: data.dashboard.height + "px",
"background-color": data.dashboard.backgroundColor,
"background-image": "url(" + data.dashboard.backgroundImage + ")",
"background-position": "0% 0%",
"background-size": "100% 100%",
"background-repeat": "initial",
"background-attachment": "initial",
"background-origin": "initial",
"background-clip": "initial",
transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
"transform-origin": "0 0"
};
data.dashboard.widgets.forEach((item, index) => {
item.value.widgetId = item.value.setup.widgetId
item.value.widgetCode = item.value.setup.widgetCode
if (item.value.setup.componentLinkage && item.value.setup.componentLinkage.length) {
this.$store.commit('SET_ALL_COMPONENT_LINKAGE', {
index,
widgetId: item.value.widgetId,
linkageArr: item.value.setup.componentLinkage
})
}
})
this.widgets = data.dashboard.widgets;
// 定时刷新
if(data.dashboard.refreshSeconds>0) {
setTimeout(function(){ window.location.reload(); }, data.dashboard.refreshSeconds*1000);
}
},
Debounce:(fn,t)=>{
const delay=t||500;
let timer=null;
return(...args)=>{
if(timer){
clearTimeout(timer);
}
const context=this
timer=setTimeout(()=>{
fn.apply(context,args);
},delay);
}
},
setScale(){
const scale=this.getScale();
this.bigScreenStyle.transform='scale('+scale.scalex+','+scale.scaley+')'
},
getScale(){
let width = this.dashboard.width
let height = this.dashboard.height
// 固定宽度比例
const scalex = window.innerWidth / width
// 高度按相同比例缩放，但允许超出屏幕高度
const scaley = scalex
return {
scalex,
scaley
}
},
}
};
</script>
<style lang="scss">
.layout {
width: 100%;
height: 100%;
text-align: center;
}
.bottom-text {
width: 100%;
color: #a0a0a0;
position: fixed;
bottom: 16px;
z-index: 9999;
}
</style>

35
src/views/bigscreenDesigner/viewer/index.vue
View File

@@ -14,24 +14,39 @@
v-model="widget.value"
:index="index"
:type="widget.type"
@oepnTheDrillView="oepnTheDrillView"
/>
</div>
<el-dialog
:title="''"
class="dialogDrillDrown dialogDrillDrownView" :visible.sync="visiableDrillView">
<drill-drown-view :screenData="screenData"></drill-drown-view>
</el-dialog>
</div>
</template>
<script>
import widget from "../designer/widget/temp";
import DrillDrownView from "./drillDrownView";
import { detailDashboard } from "@/api/bigscreen";
export default {
name: "Login",
components: {
widget
widget,
DrillDrownView
},
data() {
return {
bigScreenStyle: {},
dashboard:{},
widgets: []
widgets: [],
screenData:{
dashboard: { },
widgets: []
},
visiableDrillView:false
};
},
mounted() {
@@ -39,6 +54,10 @@ export default {
window.onresize=this.Debounce(this.setScale,500);
},
methods: {
oepnTheDrillView(val){
this.screenData=val
this.visiableDrillView=true
},
async getData() {
const reportCode = this.$route.query.reportCode;
const { code, data } = await detailDashboard(reportCode);
@@ -117,6 +136,18 @@ export default {
height: 100%;
text-align: center;
}
.dialogDrillDrownView .el-dialog{
width:auto;
margin-top:0 !important;
.el-dialog__body{
padding:0;
height:calc(100vh - 60px);
overflow-y:auto;
}
.el-dialog__header .el-dialog__headerbtn{
top: 6px;
}
}
.bottom-text {
width: 100%;
color: #a0a0a0;