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