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

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 || {};