herenshan112
2 months ago
19 changed files with 1376 additions and 42 deletions
|
After Width: | Height: | Size: 45 KiB |
@ -0,0 +1,301 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-24 14:02:25 |
||||
|
@ 备注: 画板 |
||||
|
--> |
||||
|
<script lang="ts" setup> |
||||
|
import { echatsViews } from "@/api/DesignForm/types"; |
||||
|
import { Md5 } from "ts-md5"; |
||||
|
import Draggable from "vuedraggable-es"; |
||||
|
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
||||
|
import { jsonParseStringify } from "@/utils/DesignForm"; |
||||
|
import { AnalysisCss } from "@/components/DesignForm/public/form/calculate/cssInfo.ts"; |
||||
|
|
||||
|
//引入图表组件 |
||||
|
import BarPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue"; |
||||
|
import BarRacePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue"; |
||||
|
import LinePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue"; |
||||
|
import PiePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue"; |
||||
|
import RadarPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue"; |
||||
|
import TargetPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/target.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
tableKey: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
types: { |
||||
|
type: Number, |
||||
|
default: 5, |
||||
|
}, |
||||
|
echatsViews: { |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
dimAry: { |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
meaAry: { |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
kuandu: { |
||||
|
type: Number, |
||||
|
default: 500, |
||||
|
} |
||||
|
}); |
||||
|
const dataList = computed({ |
||||
|
get: () => { |
||||
|
return props.echatsViews; |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
return newVal; |
||||
|
}, |
||||
|
}); |
||||
|
const type = computed({ |
||||
|
get: () => { |
||||
|
return props.types; |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
return newVal; |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
const state = reactive({ |
||||
|
clone: true, // 允许clone |
||||
|
gridAdd: false, |
||||
|
}); |
||||
|
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
||||
|
const activeKey = computed(() => { |
||||
|
return store.activeKey; |
||||
|
}); |
||||
|
const pickEcharts = ref<echatsViews>(); |
||||
|
const groupBox = ref(null) |
||||
|
const draggableAdd = (evt: any) => { |
||||
|
const newIndex = evt.newIndex; |
||||
|
const key = new Date().getTime().toString(); |
||||
|
const obj: any = dataList.value[newIndex]; |
||||
|
// console.log("设计拖拽事件-----1------->", evt); |
||||
|
// console.log("设计拖拽事件-----2------->", key); |
||||
|
// console.log("设计拖拽事件-----3------->", obj); |
||||
|
// console.log("设计拖拽事件-----4------->", newIndex); |
||||
|
if (!obj.uuid) { |
||||
|
obj.uuid = obj.type + key; |
||||
|
} |
||||
|
groupClick(obj); |
||||
|
}; |
||||
|
|
||||
|
// 根据表单设置不显示指定字段 |
||||
|
const linksIf = (obj: FormList) => { |
||||
|
// console.log("根据表单设置不显示指定字段-----1------->", obj); |
||||
|
return true; |
||||
|
}; |
||||
|
const getGroupName = (item: any) => { |
||||
|
console.log("获取编号-----1------->", groupBox.vlaue); |
||||
|
if (item.uuid) { |
||||
|
return item.uuid; |
||||
|
} else { |
||||
|
let md5Object: any = new Md5(); |
||||
|
md5Object.appendAsciiStr(JSON.stringify(item)); |
||||
|
let md5Str = md5Object.end(); |
||||
|
// item.uuid = md5Str; |
||||
|
return md5Str; |
||||
|
} |
||||
|
}; |
||||
|
const groupClick = (item: any, ele?: string) => { |
||||
|
|
||||
|
console.log("获取编号-----2------->", item,ele); |
||||
|
|
||||
|
|
||||
|
// if (props.types == 5) { |
||||
|
store.setActiveKey(getGroupName(item)); |
||||
|
store.setControlAttr(item); |
||||
|
// grid时显示添加列按钮 |
||||
|
state.gridAdd = item.type === "grid"; |
||||
|
// state.clone = !notNested(item.type) |
||||
|
// state.clone = !notNestedTableFlex(item.type); |
||||
|
pickEcharts.value = item; |
||||
|
// } |
||||
|
|
||||
|
console.log("点击激活当前--->", props.types, item, ele); |
||||
|
}; |
||||
|
// 删除或复制 |
||||
|
const click = (action: string, index: number, item?: any) => { |
||||
|
// if (type.value !== 5) { |
||||
|
// return; // 非设计模式 |
||||
|
// } |
||||
|
// console.log("删除或复制--->", action, index, item); |
||||
|
if (action === "clone") { |
||||
|
const key = item.type + new Date().getTime().toString(); |
||||
|
const newItem = jsonParseStringify(item); |
||||
|
dataList.value.splice(index, 0, Object.assign(newItem, { uuid: key })); |
||||
|
} else if (action === "del") { |
||||
|
console.log("要删除的对象------->", index); |
||||
|
dataList.value.splice(index, 1); |
||||
|
// 清空右侧栏信息 |
||||
|
store.setActiveKey(""); |
||||
|
store.setControlAttr({}); |
||||
|
} else if (action === "gridAdd") { |
||||
|
item.columns.push({ |
||||
|
list: [], |
||||
|
attr: { span: 12 }, |
||||
|
}); |
||||
|
} else if (action === "delGridChild") { |
||||
|
item.splice(index, 1); |
||||
|
} |
||||
|
}; |
||||
|
const kuandu = ref(0); |
||||
|
// 返回栅格宽度 |
||||
|
const getFormItemStyle = (ele: echatsViews) => { |
||||
|
console.log("返回栅格宽度311---->", ele); |
||||
|
if (ele.widthBox == 0) { |
||||
|
kuandu.value = "auto"; |
||||
|
return { width: "auto", margin: "0 5px" }; |
||||
|
} |
||||
|
if (ele.widthBox > 24) { |
||||
|
ele.widthBox = 24; |
||||
|
} |
||||
|
if (ele.widthBox < 0) { |
||||
|
ele.widthBox = 0; |
||||
|
} |
||||
|
if (ele.widthBox) { |
||||
|
if (ele.styles?.divStyle) { |
||||
|
ele.styles.divStyle.width = (ele.widthBox / 24) * 100 + "%"; |
||||
|
// console.log("返回栅格宽度311--2-->", ele.styles.divStyle); |
||||
|
kuandu.value = (ele.widthBox / 24) * 100 + "%"; |
||||
|
return AnalysisCss(ele.styles.divStyle); |
||||
|
} |
||||
|
|
||||
|
kuandu.value = (ele.widthBox / 24) * 100 + "%"; |
||||
|
// console.log("返回栅格宽度311--5-->", kuandu.value); |
||||
|
return { width: (ele.widthBox / 24) * 100 + "%" }; |
||||
|
} |
||||
|
if (ele.styles?.divStyle) { |
||||
|
// console.log("返回栅格宽度3", AnalysisCss(ele.styles.divStyle)); |
||||
|
return AnalysisCss(ele.styles.divStyle); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<draggable |
||||
|
itemKey="id" |
||||
|
:list="dataList" |
||||
|
name="fade" |
||||
|
class="drag" |
||||
|
v-bind="{ |
||||
|
group: 'echartsMyForm', |
||||
|
ghostClass: 'ghost', |
||||
|
animation: 200, |
||||
|
handle: '.drag-move', |
||||
|
disabled: type !== 5, |
||||
|
}" |
||||
|
@add="draggableAdd" |
||||
|
> |
||||
|
<template #item="{ element, index }"> |
||||
|
<div |
||||
|
ref="groupBox" |
||||
|
class="group" |
||||
|
:class="{ |
||||
|
['group-' + element.type]: true, |
||||
|
active: activeKey === getGroupName(element), |
||||
|
}" |
||||
|
|
||||
|
@click.stop="groupClick(element)" |
||||
|
v-if="linksIf(element)" |
||||
|
> |
||||
|
<BarPage |
||||
|
v-if="element.type == 'bar'" |
||||
|
:data="element" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="element.uuid" |
||||
|
:kuandu="props.kuandu" |
||||
|
/> |
||||
|
<BarRacePage |
||||
|
v-if="element.type == 'barRace'" |
||||
|
:data="element" |
||||
|
:uuid="element.uuid" |
||||
|
:table-key="tableKey" |
||||
|
:kuandu="props.kuandu" |
||||
|
/> |
||||
|
<LinePage |
||||
|
v-if="element.type == 'line'" |
||||
|
:data="element" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="element.uuid" |
||||
|
:kuandu="props.kuandu" |
||||
|
/> |
||||
|
<PiePage |
||||
|
v-if="element.type == 'pie'" |
||||
|
:data="element" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="element.uuid" |
||||
|
:kuandu="props.kuandu" |
||||
|
/> |
||||
|
<RadarPage |
||||
|
v-if="element.type == 'radar'" |
||||
|
:data="element" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="element.uuid" |
||||
|
:kuandu="props.kuandu" |
||||
|
/> |
||||
|
<TargetPage |
||||
|
v-if="element.type == 'target'" |
||||
|
:data="element" |
||||
|
:uuid="element.uuid" |
||||
|
:table-key="tableKey" |
||||
|
:dim-ary="props.dimAry" |
||||
|
:mea-ary="props.meaAry" |
||||
|
:kuandu="props.kuandu" |
||||
|
/> |
||||
|
|
||||
|
<template v-if="type === 5"> |
||||
|
<div class="drag-control"> |
||||
|
<div class="item-control"> |
||||
|
<i |
||||
|
class="icon-plus" |
||||
|
@click.stop="click('gridAdd', index, element)" |
||||
|
v-if="state.gridAdd" |
||||
|
title="添加列" |
||||
|
></i> |
||||
|
<i |
||||
|
class="icon-clone" |
||||
|
@click.stop="click('clone', index, element)" |
||||
|
v-if="state.clone" |
||||
|
title="克隆" |
||||
|
></i> |
||||
|
<i class="icon-del" @click.stop="click('del', index)"></i> |
||||
|
</div> |
||||
|
<div class="drag-move icon-move"></div> |
||||
|
</div> |
||||
|
<!-- <div class="tooltip" style="display: black;">{{ element.name }}</div> --> |
||||
|
<div class="tooltip" style="display: black"></div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
|
</draggable> |
||||
|
</template> |
||||
|
<style lang="scss" scoped> |
||||
|
.drag { |
||||
|
background: #ffffff; |
||||
|
border: 1px dashed #999; |
||||
|
height: calc(100vh - 105px); |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
position: relative; |
||||
|
} |
||||
|
.tiaojian { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,98 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-28 08:40:20 |
||||
|
@ 备注: |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import Draggable from "vuedraggable-es"; |
||||
|
import { echartsUnitList } from "@/components/DesignForm/echarts/index"; |
||||
|
import { jsonParseStringify } from "@/utils/DesignForm"; |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-05-15 10:15:14 |
||||
|
@ 功能: 克隆选中的组件数据结构 |
||||
|
*/ |
||||
|
const clone = (origin: any) => { |
||||
|
console.log("new--->克隆选中的组件数据结构", origin); |
||||
|
origin.uuid = origin.type + "_" + new Date().getTime().toString(); |
||||
|
return jsonParseStringify(origin); |
||||
|
}; |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="echartLeft"> |
||||
|
<draggable |
||||
|
v-model="echartsUnitList" |
||||
|
tag="ul" |
||||
|
:group="{ name: 'echartsMyForm', pull: 'clone', put: false }" |
||||
|
ghost-class="ghost" |
||||
|
:sort="false" |
||||
|
:clone="clone" |
||||
|
item-key="mykey123" |
||||
|
> |
||||
|
<template #item="{ element }"> |
||||
|
<li :span="12"> |
||||
|
<el-card class="cardBox" style="width: 100%" shadow="always"> |
||||
|
<svg-icon :icon-class="element.icon" :size="100" /> |
||||
|
<el-text class="mx-1" size="large">{{ element.title }}</el-text> |
||||
|
</el-card> |
||||
|
</li> |
||||
|
</template> |
||||
|
</draggable> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.echartLeft { |
||||
|
width: 100%; |
||||
|
|
||||
|
ul { |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
margin: 0; |
||||
|
padding-top: 25px; |
||||
|
li { |
||||
|
width: 46%; |
||||
|
position: relative; |
||||
|
float: left; |
||||
|
left: 0; |
||||
|
text-align: center; |
||||
|
margin-left: 3%; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.common-layout { |
||||
|
width: 100%; |
||||
|
.el-aside { |
||||
|
height: calc(100vh - 40px); |
||||
|
padding: 0 0px; |
||||
|
|
||||
|
.cardBox { |
||||
|
padding: 0px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
:deep .el-card__body { |
||||
|
text-align: center; |
||||
|
padding: 0 0 10px 0; |
||||
|
cursor: position; |
||||
|
} |
||||
|
} |
||||
|
.el-main { |
||||
|
padding: 10px; |
||||
|
border-right: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
border-left: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
.drawingBoard { |
||||
|
background-color: rgb(232.8, 233.4, 234.6); |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
.tubiaoRow { |
||||
|
margin-top: 20px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.svgClass { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
@ -0,0 +1,125 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 09:02:14 |
||||
|
@ 备注: 个人BI报表 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import Mydialog from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/mydialog.vue"; |
||||
|
//引入图表组件 |
||||
|
import BarPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue"; |
||||
|
import BarRacePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue"; |
||||
|
import LinePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue"; |
||||
|
import PiePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue"; |
||||
|
import RadarPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue"; |
||||
|
import TargetPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/target.vue"; |
||||
|
|
||||
|
import KongData from '@/assets/image/kong.png' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
tableKey: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
chartId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
chartView:{ |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
const dataList = computed({ |
||||
|
get: () => { |
||||
|
return props.chartView; |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
return newVal; |
||||
|
}, |
||||
|
}) |
||||
|
|
||||
|
const openClose = ref(false) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 11:49:19 |
||||
|
@ 功能: 打开窗口 |
||||
|
*/ |
||||
|
const openDialog = () => { |
||||
|
openClose.value = true |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="fullBox"> |
||||
|
<div class="fullBox"><el-button type="primary" @click="openDialog">设计个人BI报表</el-button></div> |
||||
|
<div class="fullBox"> |
||||
|
<div v-if="props.chartId!=''" class="fullBox"> |
||||
|
<div v-for="item in dataList"> |
||||
|
<BarPage |
||||
|
v-if="item.type == 'bar'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
/> |
||||
|
<BarRacePage |
||||
|
v-if="item.type == 'barRace'" |
||||
|
:data="item" |
||||
|
:uuid="item.uuid" |
||||
|
:table-key="tableKey" |
||||
|
/> |
||||
|
<LinePage |
||||
|
v-if="item.type == 'line'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
/> |
||||
|
<PiePage |
||||
|
v-if="item.type == 'pie'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
/> |
||||
|
<RadarPage |
||||
|
v-if="item.type == 'radar'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
|
||||
|
/> |
||||
|
<TargetPage |
||||
|
v-if="item.type == 'target'" |
||||
|
:data="item" |
||||
|
:uuid="item.uuid" |
||||
|
:table-key="tableKey" |
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img v-else class="fullBox" :src="KongData"></img> |
||||
|
|
||||
|
</div > |
||||
|
<Mydialog v-if="openClose" v-model:show="openClose" :chart-view="dataList" :table-key="tableKey" :chart-id="myChartId" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.fullBox{ |
||||
|
width: 100%; |
||||
|
:deep .el-dialog{ |
||||
|
padding: 5px; |
||||
|
} |
||||
|
} |
||||
|
.diaBox{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.faButBox{ |
||||
|
font-size: 15px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.diaTitle{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,270 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 14:07:42 |
||||
|
@ 备注: 个人BI设计器 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { dimMeaInfo } from "@/api/chart/type"; |
||||
|
import { dimMeaFormTable, countChartValue, getMyChartSetupAndData,saveMyBiCharts } from "@/api/chart/index"; |
||||
|
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
||||
|
|
||||
|
import LeftPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/drwePage/leftPage.vue"; |
||||
|
import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/drwePage/containerPage.vue"; |
||||
|
import RightPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/right.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
tableKey: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
chartId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
show:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
chartView:{ |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
const emits = defineEmits(["update:show"]); |
||||
|
const openClose = computed({ |
||||
|
get: () => props.show, |
||||
|
set: (val) => { |
||||
|
emits("update:show", val); |
||||
|
}, |
||||
|
}); |
||||
|
const maxWindows = ref(true) |
||||
|
const dimAry = ref<dimMeaInfo[]>([]); |
||||
|
const meaAry = ref<dimMeaInfo[]>([]); |
||||
|
|
||||
|
const sunDimAry = ref<any>([]); |
||||
|
const sunMeaAry = ref<any>([]); |
||||
|
const darwBody = ref(null) |
||||
|
const darwBodyWidth = ref(0) |
||||
|
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
||||
|
|
||||
|
const dataList = ref(props.chartView) |
||||
|
const increment = inject('haveMyBiCherBi'); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 11:48:38 |
||||
|
@ 功能: 关闭窗口 |
||||
|
*/ |
||||
|
const closeDialog = () => { |
||||
|
console.log("清空") |
||||
|
dimAry.value = [] |
||||
|
meaAry.value = [] |
||||
|
sunDimAry.value = [] |
||||
|
sunMeaAry.value = [] |
||||
|
props.chartView = [] |
||||
|
dataList.value=[] |
||||
|
// 清空右侧栏信息 |
||||
|
store.setActiveKey(""); |
||||
|
store.setControlAttr({}); |
||||
|
increment(); |
||||
|
emits("update:show", false); |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-27 13:06:25 |
||||
|
@ 功能: 获取维度义量化字段 |
||||
|
*/ |
||||
|
const dimMeaList = () => { |
||||
|
// console.log("获取维度义量化字段----------------------->", props); |
||||
|
dimMeaFormTable({ id: props.tableKey }).then((data) => { |
||||
|
// console.log("获取维度义量化字段----------------------->", data); |
||||
|
dimAry.value = data.data.dimList; |
||||
|
meaAry.value = data.data.meaList; |
||||
|
sunDimAry.value = data.data.SunDimListAry; |
||||
|
sunMeaAry.value = data.data.SunMeaListAry; |
||||
|
}); |
||||
|
/*获取视图数据*/ |
||||
|
getMyChartSetupAndData({ id: props.tableKey }).then((data) => { |
||||
|
console.log("获取视图数据----------------------->", data); |
||||
|
if (data.code == 0) { |
||||
|
props.chartView = data.data.chartList; |
||||
|
dataList.value = data.data.chartList; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
onMounted(() => { |
||||
|
|
||||
|
dimMeaList(); |
||||
|
nextTick(()=>{ |
||||
|
console.log("提交图标设置-->", darwBody.value); |
||||
|
console.log("提交图标设置", darwBody.value.offsetWidth); |
||||
|
darwBodyWidth.value = darwBody.value.offsetWidth |
||||
|
}) |
||||
|
// props.state.echatsViews.push(echartsInfo); |
||||
|
}); |
||||
|
const saveLoading = ref(false) |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 16:23:50 |
||||
|
@ 功能: 保存个人设计 |
||||
|
*/ |
||||
|
const saveChart = () => { |
||||
|
saveLoading.value = true |
||||
|
console.log("提交图标设置", props); |
||||
|
console.log("提交图标设置------------dataList----->", dataList); |
||||
|
saveMyBiCharts({ |
||||
|
tableKey: props.tableKey, |
||||
|
chartList: dataList.value, |
||||
|
}) |
||||
|
.then((data) => { |
||||
|
console.log("获取视图数据", data); |
||||
|
saveLoading.value = false; |
||||
|
}) |
||||
|
.finally(() => { |
||||
|
saveLoading.value = false; |
||||
|
closeDialog(); |
||||
|
}); |
||||
|
} |
||||
|
//全屏&还原 |
||||
|
const openAllOrSmiall = (val:boolean) => { |
||||
|
console.log("全屏&还原", val); |
||||
|
console.log("全屏&还原------>", darwBody.value.offsetWidth); |
||||
|
|
||||
|
if(val){ |
||||
|
|
||||
|
maxWindows.value = false |
||||
|
nextTick(()=>{ |
||||
|
darwBodyWidth.value = darwBody.value.offsetWidth |
||||
|
|
||||
|
}) |
||||
|
}else{ |
||||
|
maxWindows.value = true |
||||
|
nextTick(()=>{ |
||||
|
darwBodyWidth.value = darwBody.value.offsetWidth |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="fullBox"> |
||||
|
<el-dialog v-model="openClose" title="设计个人BI报表" :fullscreen="maxWindows" :show-close="false" :before-close="closeDialog" width="80%" > |
||||
|
<template #header="{ close, titleId, titleClass }"> |
||||
|
<div class="diaBox"> |
||||
|
<div class="diaTitle">设计个人BI报表</div> |
||||
|
<div class="faButBox"> |
||||
|
<el-space wrap> |
||||
|
<i title="全屏" v-if="!maxWindows" class="fa fa-expand" @click="openAllOrSmiall(maxWindows)"></i> |
||||
|
<i title="还原" v-if="maxWindows" class="fa fa-compress" @click="openAllOrSmiall(maxWindows)"></i> |
||||
|
<i title="关闭" class="fa fa-close" @click="closeDialog"></i> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div :class="maxWindows?'minBoxWidth common-layout':'minBoxWidth minBox common-layout'"> |
||||
|
<el-container> |
||||
|
<el-aside width="250px"> |
||||
|
<LeftPath /> |
||||
|
</el-aside> |
||||
|
<el-main> |
||||
|
<div class="chartBut"> |
||||
|
<el-button type="primary" size="small" v-loading="saveLoading" @click="saveChart()" |
||||
|
>保存</el-button> |
||||
|
</div> |
||||
|
<div ref="darwBody" class="design-form"> |
||||
|
<ContainerPath |
||||
|
:echats-views="dataList" |
||||
|
:table-key="props.tableKey" |
||||
|
:dim-ary="dimAry" |
||||
|
:mea-ary="meaAry" |
||||
|
:types="5" |
||||
|
:kuandu="darwBodyWidth" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
<el-aside width="250px"> |
||||
|
<RightPath |
||||
|
:dim-ary="dimAry" |
||||
|
:mea-ary="meaAry" |
||||
|
:sun-dim-ary="sunDimAry" |
||||
|
:sun-mea-ary="sunMeaAry" |
||||
|
/> |
||||
|
</el-aside> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.fullBox{ |
||||
|
width: 100%; |
||||
|
:deep .el-dialog{ |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.minBoxWidth{ |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
border-top: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
} |
||||
|
.minBox{ |
||||
|
|
||||
|
height: calc(100vh - 30vh); |
||||
|
} |
||||
|
} |
||||
|
.diaBox{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.faButBox{ |
||||
|
font-size: 15px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.diaTitle{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.common-layout { |
||||
|
width: 100%; |
||||
|
.el-aside { |
||||
|
|
||||
|
padding: 0 0px; |
||||
|
height: calc(100vh - 60px); |
||||
|
.cardBox { |
||||
|
padding: 0px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
:deep .el-card__body { |
||||
|
text-align: center; |
||||
|
padding: 0 0 10px 0; |
||||
|
cursor: position; |
||||
|
} |
||||
|
} |
||||
|
.el-main { |
||||
|
padding: 0px; |
||||
|
border-right: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
border-left: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
background-color: rgb(232.8, 233.4, 234.6); |
||||
|
|
||||
|
.drawingBoard { |
||||
|
/* background-color: rgb(232.8, 233.4, 234.6); */ |
||||
|
/* height: 100%; */ |
||||
|
} |
||||
|
} |
||||
|
.tubiaoRow { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.svgClass { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
.chartBut { |
||||
|
background-color: #ffffff; |
||||
|
padding: 5px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.design-form { |
||||
|
padding: 10px 10px 0 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,203 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 14:07:42 |
||||
|
@ 备注: 个人BI设计器 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { dimMeaInfo } from "@/api/chart/type"; |
||||
|
import { dimMeaFormTable, countChartValue, getChartCont } from "@/api/chart/index"; |
||||
|
|
||||
|
|
||||
|
import LeftPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/left.vue"; |
||||
|
import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue"; |
||||
|
import RightPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/right.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
tableKey: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
chartId: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
show:{ |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
chartView:{ |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
} |
||||
|
}) |
||||
|
const emits = defineEmits(["update:show"]); |
||||
|
const openClose = computed({ |
||||
|
get: () => props.show, |
||||
|
set: (val) => { |
||||
|
emits("update:show", val); |
||||
|
}, |
||||
|
}); |
||||
|
const maxWindows = ref(true) |
||||
|
const dimAry = ref<dimMeaInfo[]>([]); |
||||
|
const meaAry = ref<dimMeaInfo[]>([]); |
||||
|
|
||||
|
const sunDimAry = ref<any>([]); |
||||
|
const sunMeaAry = ref<any>([]); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-26 11:48:38 |
||||
|
@ 功能: 关闭窗口 |
||||
|
*/ |
||||
|
const closeDialog = () => { |
||||
|
emits("update:show", false); |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-06-27 13:06:25 |
||||
|
@ 功能: 获取维度义量化字段 |
||||
|
*/ |
||||
|
const dimMeaList = () => { |
||||
|
console.log("获取维度义量化字段", props); |
||||
|
dimMeaFormTable({ id: props.tableKey }).then((data) => { |
||||
|
console.log("获取维度义量化字段", data); |
||||
|
dimAry.value = data.data.dimList; |
||||
|
meaAry.value = data.data.meaList; |
||||
|
sunDimAry.value = data.data.SunDimListAry; |
||||
|
sunMeaAry.value = data.data.SunMeaListAry; |
||||
|
}); |
||||
|
/*获取视图数据*/ |
||||
|
getChartCont({ id: props.tableKey }).then((data) => { |
||||
|
console.log("获取视图数据", data); |
||||
|
if (data.code == 0) { |
||||
|
props.chartView = data.data; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
onMounted(() => { |
||||
|
dimMeaList(); |
||||
|
// props.state.echatsViews.push(echartsInfo); |
||||
|
}); |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="fullBox"> |
||||
|
<el-dialog v-model="openClose" title="设计个人BI报表" :fullscreen="maxWindows" :show-close="false" :before-close="closeDialog" width="80%" > |
||||
|
<template #header="{ close, titleId, titleClass }"> |
||||
|
<div class="diaBox"> |
||||
|
<div class="diaTitle">设计个人BI报表</div> |
||||
|
<div class="faButBox"> |
||||
|
<el-space wrap> |
||||
|
<i title="全屏" v-if="!maxWindows" class="fa fa-expand" @click="maxWindows=!maxWindows"></i> |
||||
|
<i title="还原" v-if="maxWindows" class="fa fa-compress" @click="maxWindows=!maxWindows"></i> |
||||
|
<i title="关闭" class="fa fa-close" @click="closeDialog"></i> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<div :class="maxWindows?'minBoxWidth common-layout':'minBoxWidth minBox common-layout'"> |
||||
|
<el-container> |
||||
|
<el-aside width="250px"> |
||||
|
<LeftPath /> |
||||
|
</el-aside> |
||||
|
<el-main> |
||||
|
<div class="chartBut"> |
||||
|
<el-button type="primary" v-loading="butLoading" @click="saveChart()" |
||||
|
>保存</el-button> |
||||
|
</div> |
||||
|
<div class="design-form"> |
||||
|
<ContainerPath |
||||
|
:echats-views="props.chartView" |
||||
|
:table-key="props.tableKey" |
||||
|
:dim-ary="dimAry" |
||||
|
:mea-ary="meaAry" |
||||
|
:types="5" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-main> |
||||
|
<el-aside width="250px"> |
||||
|
<RightPath |
||||
|
:dim-ary="dimAry" |
||||
|
:mea-ary="meaAry" |
||||
|
:sun-dim-ary="sunDimAry" |
||||
|
:sun-mea-ary="sunMeaAry" |
||||
|
/> |
||||
|
</el-aside> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.fullBox{ |
||||
|
width: 100%; |
||||
|
:deep .el-dialog{ |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.minBoxWidth{ |
||||
|
width: 100%; |
||||
|
overflow: hidden; |
||||
|
border-top: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
} |
||||
|
.minBox{ |
||||
|
|
||||
|
height: calc(100vh - 30vh); |
||||
|
} |
||||
|
} |
||||
|
.diaBox{ |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.faButBox{ |
||||
|
font-size: 15px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.diaTitle{ |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.common-layout { |
||||
|
width: 100%; |
||||
|
.el-aside { |
||||
|
|
||||
|
padding: 0 0px; |
||||
|
overflow: hidden; |
||||
|
.cardBox { |
||||
|
padding: 0px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
:deep .el-card__body { |
||||
|
text-align: center; |
||||
|
padding: 0 0 10px 0; |
||||
|
cursor: position; |
||||
|
} |
||||
|
} |
||||
|
.el-main { |
||||
|
padding: 0px; |
||||
|
border-right: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
border-left: 1px solid rgb(221.7, 222.6, 224.4); |
||||
|
background-color: rgb(232.8, 233.4, 234.6); |
||||
|
|
||||
|
.drawingBoard { |
||||
|
/* background-color: rgb(232.8, 233.4, 234.6); */ |
||||
|
/* height: 100%; */ |
||||
|
} |
||||
|
} |
||||
|
.tubiaoRow { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
.svgClass { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
.chartBut { |
||||
|
background-color: #ffffff; |
||||
|
padding: 5px; |
||||
|
text-align: right; |
||||
|
} |
||||
|
.design-form { |
||||
|
padding: 10px 10px 0 10px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,118 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-25 15:52:59 |
||||
|
@ 备注: BI图表查看 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import type { TabPaneName } from 'element-plus' |
||||
|
import { getMyChartSetupAndData } from "@/api/chart/index"; |
||||
|
//引入图表组件 |
||||
|
import MyContChart from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/myContChart.vue"; |
||||
|
import BarPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue"; |
||||
|
import BarRacePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/barRace.vue"; |
||||
|
import LinePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/line.vue"; |
||||
|
import PiePage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/pie.vue"; |
||||
|
import RadarPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/radar.vue"; |
||||
|
import TargetPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/target.vue"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
tableKey: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
echatsViews:{ |
||||
|
type: Array, |
||||
|
default() { |
||||
|
return []; |
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
const dataList = computed({ |
||||
|
get: () => { |
||||
|
return props.echatsViews; |
||||
|
}, |
||||
|
set: (newVal: any) => { |
||||
|
return newVal; |
||||
|
}, |
||||
|
}); |
||||
|
const pickChar = ref("all") |
||||
|
const myChartView = ref<any>([]) |
||||
|
const myChartId = ref("") |
||||
|
const myLoading = ref(false) |
||||
|
//改变选择 |
||||
|
const pickChartTable = (name: TabPaneName) => { |
||||
|
if(name=="oneman"){ |
||||
|
haveMyBiChears() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2025-09-29 15:37:44 |
||||
|
@ 功能: 获取个人报表 |
||||
|
*/ |
||||
|
const haveMyBiChears = () => { |
||||
|
myLoading.value = true |
||||
|
getMyChartSetupAndData({id:props.tableKey}).then((data:any)=>{ |
||||
|
myLoading.value = false |
||||
|
myChartView.value = data.data.chartList |
||||
|
myChartId.value = data.data.myChartId |
||||
|
}).finally(()=>{ myLoading.value = false}) |
||||
|
} |
||||
|
provide("haveMyBiCherBi",haveMyBiChears) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div> |
||||
|
<el-tabs v-model="pickChar" class="demo-tabs" @tab-change="pickChartTable"> |
||||
|
<el-tab-pane label="公共报表" name="all"> |
||||
|
<div v-for="item in dataList"> |
||||
|
<BarPage |
||||
|
v-if="item.type == 'bar'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
/> |
||||
|
<BarRacePage |
||||
|
v-if="item.type == 'barRace'" |
||||
|
:data="item" |
||||
|
:uuid="item.uuid" |
||||
|
:table-key="tableKey" |
||||
|
/> |
||||
|
<LinePage |
||||
|
v-if="item.type == 'line'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
/> |
||||
|
<PiePage |
||||
|
v-if="item.type == 'pie'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
/> |
||||
|
<RadarPage |
||||
|
v-if="item.type == 'radar'" |
||||
|
:data="item" |
||||
|
:table-key="tableKey" |
||||
|
:uuid="item.uuid" |
||||
|
|
||||
|
/> |
||||
|
<TargetPage |
||||
|
v-if="item.type == 'target'" |
||||
|
:data="item" |
||||
|
:uuid="item.uuid" |
||||
|
:table-key="tableKey" |
||||
|
/> |
||||
|
</div> |
||||
|
</el-tab-pane> |
||||
|
<el-tab-pane label="个人报表" name="oneman" v-loading="myLoading"> |
||||
|
<MyContChart :table-key="tableKey" :chart-view="myChartView" :chart-id="myChartId" @my-charts="haveMyBiChears" /> |
||||
|
</el-tab-pane> |
||||
|
</el-tabs> |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue