herenshan112
5 months ago
40 changed files with 4522 additions and 244 deletions
@ -0,0 +1,25 @@ |
|||
import request from '@/utils/request'; |
|||
//获取维度及度量字段
|
|||
export function dimMeaFormTable(data?: any) { |
|||
return request({ |
|||
url: "/systemapi/chart/dimMeaFormTable", |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
//将图表信息写入数据库
|
|||
export function countChartValue(data?: any) { |
|||
return request({ |
|||
url: "/systemapi/chart/countChartValue", |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
//获取图表设定信息
|
|||
export function getChartCont(data?: any) { |
|||
return request({ |
|||
url: "/systemapi/chart/getChartCont", |
|||
method: 'post', |
|||
data: data |
|||
}); |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
export interface dimMeaInfo { |
|||
title:string; |
|||
type:number; |
|||
field:string; |
|||
} |
|||
|
|||
export interface dimSetInfo{ |
|||
title: string; |
|||
type: string; |
|||
field: string; |
|||
options: any, |
|||
oldTitle: string; |
|||
timeType: string; |
|||
sort: number; |
|||
} |
|||
|
|||
export interface maeSetInfo extends dimSetInfo{ |
|||
method:number; |
|||
format:number; |
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-03 16:46:48 |
|||
@ 功能: 过滤器结构体 |
|||
*/ |
|||
export interface filterInfo { |
|||
type:number; //字段类型 1：文本；2：数值；3：时间
|
|||
lable:string; //名称
|
|||
field:string; //字段
|
|||
conditions:string; //文本类型条件值
|
|||
method:number; //聚合方式 1:求和；2:平均值；3:计数；4:去重计数；5:最大值；6:求和；
|
|||
modality:number; //条件形式。 1：单条件；2：或条件；3：且条件
|
|||
modalityList:modalityListInfo[]; //条件列表
|
|||
startTime:number; //开始时间
|
|||
endTime:number; //结束时间
|
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-03 16:52:33 |
|||
@ 功能: 过滤数字类型聚合条件列表 |
|||
*/ |
|||
export interface modalityListInfo{ |
|||
equation:number; //表达式。1：等于；2：不等于；3：大于；4：小于；5：大于等于；6：小于等于；7：为空；8：不为空
|
|||
value:string; //等式值
|
|||
} |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 14:32:41 |
|||
@ 功能: 搜索结构 |
|||
*/ |
|||
export interface searchInfo{ |
|||
lable: string; |
|||
type: number; |
|||
field: string; |
|||
options: any; |
|||
oldTitle: string; |
|||
timeType: string; |
|||
sort: number; |
|||
isTime: boolean; |
|||
value: string; |
|||
startTime: string; |
|||
endTime: string; |
|||
coor: string; |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
export const matchList = [ |
|||
{ |
|||
label:"求和", |
|||
value:1 |
|||
}, |
|||
{ |
|||
label:"平均值", |
|||
value:2 |
|||
}, |
|||
{ |
|||
label:"计数", |
|||
value:3 |
|||
}, |
|||
{ |
|||
label:"去重计数", |
|||
value:4 |
|||
}, |
|||
{ |
|||
label:"最大值", |
|||
value:5 |
|||
}, |
|||
{ |
|||
label:"最小值", |
|||
value:6 |
|||
} |
|||
] |
|||
//表达式
|
|||
export const expList = [ |
|||
{ |
|||
label:"等于", |
|||
value:1 |
|||
}, |
|||
{ |
|||
label:"不等于", |
|||
value:2 |
|||
}, |
|||
{ |
|||
label:"大于", |
|||
value:3 |
|||
}, |
|||
{ |
|||
label:"小于", |
|||
value:4 |
|||
}, |
|||
{ |
|||
label:"大于等于", |
|||
value:5 |
|||
}, |
|||
{ |
|||
label:"小于等于", |
|||
value:6 |
|||
}, |
|||
{ |
|||
label:"为空", |
|||
value:7 |
|||
}, |
|||
{ |
|||
label:"不为空", |
|||
value:8 |
|||
} |
|||
] |
|||
|
After Width: | Height: | Size: 735 B |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 482 B |
|
After Width: | Height: | Size: 612 B |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 4.5 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -0,0 +1,99 @@ |
|||
//表单组件
|
|||
export const echartsUnitList = [ |
|||
{ |
|||
uuid:"", |
|||
icon: "bingtu", |
|||
type: "pie", |
|||
title: "饼图", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ['search'], |
|||
factor: [], |
|||
}, |
|||
}, |
|||
{ |
|||
uuid:"", |
|||
icon: "zhexiantu", |
|||
type: "line", |
|||
title: "折线图", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ['search'], |
|||
factor: [], |
|||
}, |
|||
}, |
|||
{ |
|||
uuid:"", |
|||
icon: "zhibiao", |
|||
type: "target", |
|||
title: "指标图", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ['search'], |
|||
factor: [], |
|||
}, |
|||
}, |
|||
{ |
|||
uuid:"", |
|||
icon: "zhu", |
|||
type: "bar", |
|||
title: "柱图", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ['search'], |
|||
factor: [], |
|||
}, |
|||
}, |
|||
{ |
|||
uuid:"", |
|||
icon: "paiming1", |
|||
type: "barRace", |
|||
title: "排行榜", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ['search'], |
|||
factor: [], |
|||
}, |
|||
}, |
|||
{ |
|||
uuid:"", |
|||
icon: "leidatu", |
|||
type: "radar", |
|||
title: "雷达图", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ['search'], |
|||
factor: [], |
|||
}, |
|||
} |
|||
] |
|||
@ -1,15 +0,0 @@ |
|||
<template> |
|||
<div /> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { useRoute, useRouter } from 'vue-router'; |
|||
|
|||
const route = useRoute(); |
|||
const router = useRouter(); |
|||
|
|||
const { params, query } = route; |
|||
const { path } = params; |
|||
|
|||
router.replace({ path: '/' + path, query }); |
|||
</script> |
|||
@ -0,0 +1,186 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-23 10:55:32 |
|||
@ 备注: 数据看板 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import { dimMeaInfo } from "@/api/chart/index"; |
|||
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({ |
|||
appCont: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
formKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
groupKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
menuId: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
appPageKey: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
formVersion: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
state: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const butLoading = ref(false); |
|||
const echartsInfo = reactive<echatsViews>({ |
|||
uuid: "12332", |
|||
icon: "zhu", |
|||
type: "bar", |
|||
title: "柱图", |
|||
widthBox: 0, |
|||
y: [], |
|||
x: [], |
|||
filter: [], |
|||
timelength: 1, |
|||
search: { |
|||
state: false, |
|||
searchBut: ["search"], |
|||
factor: [], |
|||
}, |
|||
}); |
|||
const dimAry = ref<dimMeaInfo[]>([]); |
|||
const meaAry = ref<dimMeaInfo[]>([]); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 13:06:25 |
|||
@ 功能: 获取维度义量化字段 |
|||
*/ |
|||
const dimMeaList = () => { |
|||
console.log("获取维度义量化字段", props); |
|||
dimMeaFormTable({ id: props.state.formData.form.name }).then((data) => { |
|||
console.log("获取维度义量化字段", data); |
|||
dimAry.value = data.data.dimList; |
|||
meaAry.value = data.data.meaList; |
|||
}); |
|||
/*获取视图数据*/ |
|||
getChartCont({ id: props.state.formData.form.name }).then((data) => { |
|||
console.log("获取视图数据", data); |
|||
if (data.code == 0) { |
|||
props.state.echatsViews = data.data; |
|||
} |
|||
}); |
|||
}; |
|||
onMounted(() => { |
|||
dimMeaList(); |
|||
// props.state.echatsViews.push(echartsInfo); |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-08 09:08:35 |
|||
@ 功能: 提交数据 |
|||
*/ |
|||
const saveChart = () => { |
|||
console.log("提交图标设置", props); |
|||
butLoading.value = true; |
|||
countChartValue({ |
|||
tableKey: props.state.formData.form.name, |
|||
chartList: props.state.echatsViews, |
|||
}) |
|||
.then((data) => { |
|||
console.log("获取视图数据", data); |
|||
butLoading.value = false; |
|||
}) |
|||
.finally(() => { |
|||
butLoading.value = false; |
|||
}); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="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 |
|||
> |
|||
<!-- <el-button type="warning">另存为新版本</el-button> --> |
|||
</div> |
|||
<div class="design-form"> |
|||
<ContainerPath |
|||
:echats-views="props.state.echatsViews" |
|||
:table-key="props.state.formData.form.name" |
|||
:dim-ary="dimAry" |
|||
:mea-ary="meaAry" |
|||
:types="5" |
|||
/> |
|||
</div> |
|||
</el-main> |
|||
<el-aside width="250px" |
|||
><RightPath :dim-ary="dimAry" :mea-ary="meaAry" /> |
|||
</el-aside> |
|||
</el-container> |
|||
</div> |
|||
</template> |
|||
<style scoped> |
|||
.common-layout { |
|||
width: 100%; |
|||
.el-aside { |
|||
height: calc(100vh - 40px); |
|||
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,223 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 15:20:37 |
|||
@ 备注: 柱状图 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
kuandu: string | number; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
kuandu: () => { |
|||
return ""; |
|||
}, |
|||
} |
|||
); |
|||
var myChart = ref<any>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPictures = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement); |
|||
myChart.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "15%", |
|||
top: "15%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], |
|||
}, |
|||
yAxis: {}, |
|||
legend: { |
|||
data: ["销量", "销量科技"], |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "销量", |
|||
type: "bar", |
|||
data: [5, 20, 36, 10, 10, 20], |
|||
}, |
|||
{ |
|||
name: "销量科技", |
|||
type: "bar", |
|||
data: [15, 21, 26, 70, 18, 29], |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
// myChart.value.resize(); |
|||
} |
|||
}; |
|||
watch( |
|||
() => props.kuandu, |
|||
(val: any) => { |
|||
console.log("画图完毕--改变-->", val); |
|||
drawPictures(); |
|||
}, |
|||
{ deep: true } |
|||
); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPictures(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form |
|||
v-if="props.data.search" |
|||
:inline="true" |
|||
label-width="auto" |
|||
class="demo-form-inline" |
|||
> |
|||
<el-form-item v-for="item in props.data.search.factor" :label="item.lable"> |
|||
<el-date-picker |
|||
v-if="item.type == 3 && item.timeType == 'ymdhms'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'year'" |
|||
v-model="item.value" |
|||
type="yearrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'month'" |
|||
v-model="item.value" |
|||
type="monthrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'day'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'hour'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'minute'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'second'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-select |
|||
v-else-if="item.options != null" |
|||
v-model="item.value" |
|||
clearable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in item.options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-else v-model="item.value" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
{{ props }} |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 250px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,201 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 16:00:09 |
|||
@ 备注: 排行榜 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
var myChart = ref<any>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPictures = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement); |
|||
myChart.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "5%", |
|||
top: "15%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
max: "dataMax", |
|||
}, |
|||
yAxis: { |
|||
type: "category", |
|||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], |
|||
inverse: true, |
|||
}, |
|||
series: [ |
|||
{ |
|||
realtimeSort: true, |
|||
name: "销量", |
|||
type: "bar", |
|||
data: [5, 26, 36, 10, 15, 20], |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPictures(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form :inline="true" label-width="auto" class="demo-form-inline"> |
|||
<el-form-item v-for="item in props.data.search.factor" :label="item.lable"> |
|||
<el-date-picker |
|||
v-if="item.type == 3 && item.timeType == 'ymdhms'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'year'" |
|||
v-model="item.value" |
|||
type="yearrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'month'" |
|||
v-model="item.value" |
|||
type="monthrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'day'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'hour'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'minute'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'second'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-select |
|||
v-else-if="item.options != null" |
|||
v-model="item.value" |
|||
clearable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in item.options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-else v-model="item.value" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 250px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,169 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 15:59:41 |
|||
@ 备注: 柱状图 |
|||
--> |
|||
|
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
import { AnalysisCss } from "@/components/DesignForm/public/form/calculate/cssInfo.ts"; |
|||
import elementResizeDetectorMaker from "element-resize-detector"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
var myChart = ref<any>(); |
|||
const erd = elementResizeDetectorMaker(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPictures = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement); |
|||
myChart.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "15%", |
|||
top: "15%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"], |
|||
}, |
|||
yAxis: {}, |
|||
legend: { |
|||
data: ["销量", "销量科技"], |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "销量", |
|||
type: "bar", |
|||
data: [5, 20, 36, 10, 10, 20], |
|||
}, |
|||
{ |
|||
name: "销量科技", |
|||
type: "bar", |
|||
data: [15, 21, 26, 70, 18, 29], |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPictures(); |
|||
}); |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
// 返回栅格宽度 |
|||
const getFormItemStyle = (ele: echatsViews) => { |
|||
// console.log("返回栅格宽度311---->", ele); |
|||
if (ele.widthBox == 0) { |
|||
return { width: "100%", 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); |
|||
return AnalysisCss(ele.styles.divStyle); |
|||
} |
|||
return { width: (ele.widthBox / 24) * 100 + "%" }; |
|||
} |
|||
if (ele.styles?.divStyle) { |
|||
// console.log("返回栅格宽度3",AnalysisCss(ele.styles.divStyle))1 |
|||
return AnalysisCss(ele.styles.divStyle); |
|||
} |
|||
}; |
|||
|
|||
watch( |
|||
() => props.data, |
|||
(v: echatsViews) => { |
|||
// myChart.value.resize(); |
|||
// console.log("刷新", myChart.value); |
|||
}, |
|||
{ |
|||
deep: true, |
|||
} |
|||
); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form :inline="true" label-width="auto" class="demo-form-inline"> |
|||
<el-form-item label="名称"> |
|||
<el-input /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
{{ props.data }} |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 250px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,216 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 15:58:38 |
|||
@ 备注: 折线图 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
var myChartPie = ref<any>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPie = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChartPie.value = echarts.init( |
|||
document.getElementById(props.uuid) as HTMLDivElement |
|||
); |
|||
myChartPie.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "5%", |
|||
top: "15%", |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], |
|||
}, |
|||
legend: { |
|||
data: ["销量", "销量科技"], |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "销量", |
|||
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|||
type: "line", |
|||
smooth: true, |
|||
}, |
|||
{ |
|||
name: "销量科技", |
|||
data: [822, 942, 951, 4, 1290, 1330, 1320], |
|||
type: "line", |
|||
smooth: true, |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPie(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form |
|||
v-if="props.data.search" |
|||
:inline="true" |
|||
label-width="auto" |
|||
class="demo-form-inline" |
|||
> |
|||
<el-form-item v-for="item in props.data.search.factor" :label="item.lable"> |
|||
<el-date-picker |
|||
v-if="item.type == 3 && item.timeType == 'ymdhms'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'year'" |
|||
v-model="item.value" |
|||
type="yearrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'month'" |
|||
v-model="item.value" |
|||
type="monthrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'day'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'hour'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'minute'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'second'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-select |
|||
v-else-if="item.options != null" |
|||
v-model="item.value" |
|||
clearable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in item.options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-else v-model="item.value" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 250px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,217 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 15:58:06 |
|||
@ 备注: 饼状图 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
var myChartPie = ref<any>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPie = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChartPie.value = echarts.init( |
|||
document.getElementById(props.uuid) as HTMLDivElement |
|||
); |
|||
myChartPie.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "5%", |
|||
top: "15%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
data: ["Allocated Budget", "Actual Spending"], |
|||
}, |
|||
radar: { |
|||
// shape: 'circle', |
|||
indicator: [ |
|||
{ name: "Sales", max: 6500 }, |
|||
{ name: "Administration", max: 16000 }, |
|||
{ name: "Information Technology", max: 30000 }, |
|||
{ name: "Customer Support", max: 38000 }, |
|||
{ name: "Development", max: 52000 }, |
|||
{ name: "Marketing", max: 25000 }, |
|||
], |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Budget vs spending", |
|||
type: "radar", |
|||
data: [ |
|||
{ |
|||
value: [4200, 3000, 20000, 35000, 50000, 18000], |
|||
name: "Allocated Budget", |
|||
}, |
|||
{ |
|||
value: [5000, 14000, 28000, 26000, 42000, 21000], |
|||
name: "Actual Spending", |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPie(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form :inline="true" label-width="auto" class="demo-form-inline"> |
|||
<el-form-item v-for="item in props.data.search.factor" :label="item.lable"> |
|||
<el-date-picker |
|||
v-if="item.type == 3 && item.timeType == 'ymdhms'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'year'" |
|||
v-model="item.value" |
|||
type="yearrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'month'" |
|||
v-model="item.value" |
|||
type="monthrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'day'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'hour'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'minute'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'second'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-select |
|||
v-else-if="item.options != null" |
|||
v-model="item.value" |
|||
clearable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in item.options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-else v-model="item.value" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 250px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,216 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 15:58:06 |
|||
@ 备注: 饼状图 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
var myChartPie = ref<any>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPie = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChartPie.value = echarts.init( |
|||
document.getElementById(props.uuid) as HTMLDivElement |
|||
); |
|||
myChartPie.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "5%", |
|||
top: "15%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
left: "center", |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Access From", |
|||
type: "pie", |
|||
radius: "50%", |
|||
data: [ |
|||
{ value: 1048, name: "Search Engine" }, |
|||
{ value: 735, name: "Direct" }, |
|||
{ value: 580, name: "Email" }, |
|||
{ value: 484, name: "Union Ads" }, |
|||
{ value: 300, name: "Video Ads" }, |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: "rgba(0, 0, 0, 0.5)", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPie(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form |
|||
v-if="props.data.search" |
|||
:inline="true" |
|||
label-width="auto" |
|||
class="demo-form-inline" |
|||
> |
|||
<el-form-item v-for="item in props.data.search.factor" :label="item.lable"> |
|||
<el-date-picker |
|||
v-if="item.type == 3 && item.timeType == 'ymdhms'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'year'" |
|||
v-model="item.value" |
|||
type="yearrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'month'" |
|||
v-model="item.value" |
|||
type="monthrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'day'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'hour'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'minute'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'second'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-select |
|||
v-else-if="item.options != null" |
|||
v-model="item.value" |
|||
clearable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in item.options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-else v-model="item.value" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 250px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,222 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 16:00:36 |
|||
@ 备注: 雷达图 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import * as echarts from "echarts"; |
|||
|
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
uuid: string; |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
uuid: () => { |
|||
return ""; |
|||
}, |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
var myChartPie = ref<any>(); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 11:34:21 |
|||
@ 功能: 画图 |
|||
*/ |
|||
const drawPie = () => { |
|||
if (props.uuid && props.uuid != "") { |
|||
myChartPie.value = echarts.init( |
|||
document.getElementById(props.uuid) as HTMLDivElement |
|||
); |
|||
myChartPie.value.setOption({ |
|||
grid: { |
|||
left: "2%", |
|||
right: "2%", |
|||
bottom: "5%", |
|||
top: "5%", |
|||
containLabel: true, |
|||
}, |
|||
legend: { |
|||
data: ["Allocated Budget", "Actual Spending"], |
|||
}, |
|||
radar: { |
|||
// shape: 'circle', |
|||
indicator: [ |
|||
{ name: "Sales", max: 6500 }, |
|||
{ name: "Administration", max: 16000 }, |
|||
{ name: "Information Technology", max: 30000 }, |
|||
{ name: "Customer Support", max: 38000 }, |
|||
{ name: "Development", max: 52000 }, |
|||
{ name: "Marketing", max: 25000 }, |
|||
], |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: "Budget vs spending", |
|||
type: "radar", |
|||
data: [ |
|||
{ |
|||
value: [4200, 3000, 20000, 35000, 50000, 18000], |
|||
name: "Allocated Budget", |
|||
}, |
|||
{ |
|||
value: [5000, 14000, 28000, 26000, 42000, 21000], |
|||
name: "Actual Spending", |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}); |
|||
console.log("画图完毕---->", props); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-26 09:47:45 |
|||
@ 功能: 判断是否有收缩条件 |
|||
*/ |
|||
const searBut = (val: string) => { |
|||
if (props.data.search.searchBut && Array.isArray(props.data.search.searchBut)) { |
|||
if (props.data.search.searchBut.includes(val)) { |
|||
return true; |
|||
} |
|||
} |
|||
return false; |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
nextTick(() => { |
|||
drawPie(); |
|||
}); |
|||
}); |
|||
</script> |
|||
<template> |
|||
<div> |
|||
<el-space wrap class="spaceBox"> |
|||
<svg-icon icon-class="zydq" :size="20" /> |
|||
<el-text>{{ props.data.title }}</el-text> |
|||
</el-space> |
|||
<el-form |
|||
v-if="props.data.search" |
|||
:inline="true" |
|||
label-width="auto" |
|||
class="demo-form-inline" |
|||
> |
|||
<el-form-item v-for="item in props.data.search.factor" :label="item.lable"> |
|||
<el-date-picker |
|||
v-if="item.type == 3 && item.timeType == 'ymdhms'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'year'" |
|||
v-model="item.value" |
|||
type="yearrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'month'" |
|||
v-model="item.value" |
|||
type="monthrange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'day'" |
|||
v-model="item.value" |
|||
type="daterange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'hour'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'minute'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-date-picker |
|||
v-else-if="item.type == 3 && item.timeType == 'second'" |
|||
v-model="item.value" |
|||
type="datetimerange" |
|||
range-separator="To" |
|||
start-placeholder="起始时间" |
|||
end-placeholder="结束时间" |
|||
value-format="x" |
|||
/> |
|||
<el-select |
|||
v-else-if="item.options != null" |
|||
v-model="item.value" |
|||
clearable |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in item.options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-else v-model="item.value" /> |
|||
</el-form-item> |
|||
<el-form-item v-if="props.data.search.state"> |
|||
<el-button v-if="searBut('search')" type="primary" @click="onSubmit" |
|||
>查询</el-button |
|||
> |
|||
<el-button v-if="searBut('reset')" @click="resetForm(ruleFormRef)" |
|||
>重置</el-button |
|||
> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="barBox" :id="props.uuid"></div> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.barBox { |
|||
height: 400px; |
|||
width: 100%; |
|||
} |
|||
.spaceBox { |
|||
margin-top: 15px; |
|||
span { |
|||
font-size: 20px; |
|||
} |
|||
} |
|||
.demo-form-inline { |
|||
padding: 10px 0 0px 0; |
|||
} |
|||
.demo-form-inline .el-input { |
|||
--el-input-width: 200px; |
|||
} |
|||
|
|||
.demo-form-inline .el-select { |
|||
--el-select-width: 200px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,23 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-25 15:59:10 |
|||
@ 备注: 指标图 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
const props = withDefaults( |
|||
defineProps<{ |
|||
data: echatsViews; |
|||
tableKey: string; |
|||
}>(), |
|||
{ |
|||
data: () => { |
|||
return []; |
|||
}, |
|||
} |
|||
); |
|||
</script> |
|||
<template> |
|||
<div>指标图</div> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,284 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 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 []; |
|||
}, |
|||
}, |
|||
}); |
|||
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 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------->", item); |
|||
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) => { |
|||
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("点击激活当前--->", 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") { |
|||
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: 'echartsform', |
|||
ghostClass: 'ghost', |
|||
animation: 200, |
|||
handle: '.drag-move', |
|||
disabled: type !== 5, |
|||
}" |
|||
@add="draggableAdd" |
|||
> |
|||
<template #item="{ element }"> |
|||
<div |
|||
class="group" |
|||
:class="{ |
|||
['group-' + element.type]: true, |
|||
active: activeKey === getGroupName(element), |
|||
}" |
|||
:style="getFormItemStyle(element)" |
|||
@click.stop="groupClick(element)" |
|||
v-if="linksIf(element)" |
|||
> |
|||
<BarPage |
|||
v-if="element.type == 'bar'" |
|||
:data="element" |
|||
:table-key="tableKey" |
|||
:uuid="element.uuid" |
|||
:kuandu="kuandu" |
|||
/> |
|||
<BarRacePage |
|||
v-if="element.type == 'barRace'" |
|||
:data="element" |
|||
:uuid="element.uuid" |
|||
:table-key="tableKey" |
|||
:kuandu="kuandu" |
|||
/> |
|||
<LinePage |
|||
v-if="element.type == 'line'" |
|||
:data="element" |
|||
:table-key="tableKey" |
|||
:uuid="element.uuid" |
|||
:kuandu="kuandu" |
|||
/> |
|||
<PiePage |
|||
v-if="element.type == 'pie'" |
|||
:data="element" |
|||
:table-key="tableKey" |
|||
:uuid="element.uuid" |
|||
:kuandu="kuandu" |
|||
/> |
|||
<RadarPage |
|||
v-if="element.type == 'radar'" |
|||
:data="element" |
|||
:table-key="tableKey" |
|||
:uuid="element.uuid" |
|||
:kuandu="kuandu" |
|||
/> |
|||
<TargetPage |
|||
v-if="element.type == 'target'" |
|||
:data="element" |
|||
:uuid="element.uuid" |
|||
:table-key="tableKey" |
|||
:dim-ary="props.dimAry" |
|||
:mea-ary="props.meaAry" |
|||
:kuandu="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,105 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-24 14:00:19 |
|||
@ 备注: |
|||
--> |
|||
<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> |
|||
<!-- <el-col v-for="item in echartsUnitList" :span="12"> |
|||
<el-card class="cardBox" style="width: 100%" shadow="always"> |
|||
<svg-icon :icon-class="item.icon" :size="90" /> |
|||
<el-text class="mx-1" size="large">{{ item.title }}</el-text> |
|||
</el-card> |
|||
</el-col> --> |
|||
<div class="echartLeft"> |
|||
<!-- <div> |
|||
<el-button type="danger" text>切换版本</el-button> |
|||
</div> --> |
|||
<draggable |
|||
v-model="echartsUnitList" |
|||
tag="ul" |
|||
:group="{ name: 'echartsform', pull: 'clone', put: false }" |
|||
ghost-class="ghost" |
|||
:sort="false" |
|||
:clone="clone" |
|||
item-key="key123" |
|||
> |
|||
<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,396 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-24 13:57:09 |
|||
@ 备注: 图表面板右侧 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { echatsViews } from "@/api/DesignForm/types"; |
|||
import { timeSearch } from "@/utils/workflow/const"; |
|||
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
|||
import { dimSetInfo, MaeSetInfo, filterInfo, searchInfo } from "@/api/chart/type"; |
|||
|
|||
//引入页面 |
|||
import DimensionPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/dimension.vue"; |
|||
import MeasurementPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/measurement.vue"; |
|||
import DimMeaPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/dimMea.vue"; |
|||
import FilterPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/filterPage.vue"; |
|||
import SearchPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/searchPage.vue"; |
|||
|
|||
const props = defineProps({ |
|||
dimAry: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
meaAry: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const pickDimInfo = ref<dimSetInfo>(""); |
|||
const pickMeaInfo = ref<MaeSetInfo>(""); |
|||
const pickFilpage = ref<filterInfo>(""); |
|||
const pickSearInfo = ref<searchInfo>(""); |
|||
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
|||
const openDim = ref(false); |
|||
const openMea = ref(false); |
|||
const openDimMea = ref(false); |
|||
const openFilpage = ref(false); |
|||
const openSearch = ref(false); |
|||
const dimMeaType = ref(1); |
|||
const controlData = computed(() => { |
|||
// console.log("注册自定义事件--------1--------->", store.controlAttr); |
|||
return store.controlAttr; |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 15:01:25 |
|||
@ 功能: 选择维度与度量字段 |
|||
*/ |
|||
const pickDim = (val: number) => { |
|||
openDimMea.value = true; |
|||
dimMeaType.value = val; |
|||
}; |
|||
// const controlDatas = reactive<echatsViews>({ |
|||
// uuid: "", |
|||
// type: "cyl", |
|||
// title: "柱状图", |
|||
// y: [], |
|||
// x: [], |
|||
// filter: [], |
|||
// timelength: 1, |
|||
// search: { |
|||
// state: false, |
|||
// echatsViews: [], |
|||
// factor: [], |
|||
// }, |
|||
// }); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 11:06:51 |
|||
@ 功能: 删除维度 |
|||
*/ |
|||
const delDim = (index: number) => { |
|||
if ( |
|||
controlData.value.x && |
|||
Array.isArray(controlData.value.x) && |
|||
controlData.value.x.length > 0 |
|||
) { |
|||
controlData.value.x.splice(index, 1); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 13:02:10 |
|||
@ 功能: 打开设置维度 |
|||
*/ |
|||
const setDimInfo = (val: dimSetInfo) => { |
|||
pickDimInfo.value = val; |
|||
openDim.value = true; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-02 16:49:04 |
|||
@ 功能: 删除度量 |
|||
*/ |
|||
const delMea = (index: number) => { |
|||
if ( |
|||
controlData.value.y && |
|||
Array.isArray(controlData.value.y) && |
|||
controlData.value.y.length > 0 |
|||
) { |
|||
controlData.value.y.splice(index, 1); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-04 16:59:11 |
|||
@ 功能: 删除过滤条件 |
|||
*/ |
|||
const delMeaDim = (index: number) => { |
|||
if ( |
|||
controlData.value.filter && |
|||
Array.isArray(controlData.value.filter) && |
|||
controlData.value.filter.length > 0 |
|||
) { |
|||
controlData.value.filter.splice(index, 1); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 14:30:19 |
|||
@ 功能: 删除搜索条件 |
|||
*/ |
|||
const delSearch = (index: number) => { |
|||
if ( |
|||
controlData.value.search.factor && |
|||
Array.isArray(controlData.value.search.factor) && |
|||
controlData.value.search.factor.length > 0 |
|||
) { |
|||
controlData.value.search.factor.splice(index, 1); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-02 16:50:02 |
|||
@ 功能: 打开度量设置 |
|||
*/ |
|||
const setMeaInfo = (val: dimSetInfo) => { |
|||
pickMeaInfo.value = val; |
|||
openMea.value = true; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 09:09:35 |
|||
@ 功能: 打开过滤条件设置 |
|||
*/ |
|||
const setFilInfo = (val: dimSetInfo) => { |
|||
pickFilpage.value = val; |
|||
openFilpage.value = true; |
|||
console.log("打开过滤条件设置", openFilpage.value, pickFilpage.value); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 14:31:56 |
|||
@ 功能: 设置搜索条件配置 |
|||
*/ |
|||
const setSearch = (val: searchInfo) => { |
|||
pickSearInfo.value = val; |
|||
console.log("设置搜索条件配置", val); |
|||
openSearch.value = true; |
|||
}; |
|||
</script> |
|||
<template> |
|||
<div class="echartsRight"> |
|||
<el-divider content-position="left">配置属性</el-divider> |
|||
<div v-if="controlData.icon"> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">图表名称</el-text> |
|||
<el-text class="mx-1" type="primary"></el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<el-input v-model="controlData.title" placeholder="请输入图表名称" clearable /> |
|||
</div> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">表单栅格</el-text> |
|||
<el-text class="mx-1" type="primary"></el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<el-input |
|||
v-model="controlData.widthBox" |
|||
placeholder="表单区域栅格宽，0为自动宽" |
|||
clearable |
|||
/> |
|||
</div> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">看板标签/维度</el-text> |
|||
<el-text class="mx-1 shouxing" type="primary" @click="pickDim(1)">添加</el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<div |
|||
v-if="controlData.x && Array.isArray(controlData.x) && controlData.x.length < 1" |
|||
class="arttInXuquan" |
|||
> |
|||
<el-text class="mx-1" type="info">未设置维度字段</el-text> |
|||
</div> |
|||
<div v-for="(item, index) in controlData.x" class="dimListBox"> |
|||
<div class="dimListTitle">{{ item.title }}</div> |
|||
<el-space wrap> |
|||
<svg-icon |
|||
icon-class="set" |
|||
:size="20" |
|||
class="setBut" |
|||
@click="setDimInfo(item)" |
|||
/> |
|||
<svg-icon icon-class="sc" :size="20" class="setBut" @click="delDim(index)" /> |
|||
</el-space> |
|||
</div> |
|||
</div> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">看板指标/度量</el-text> |
|||
<el-text class="mx-1 shouxing" type="primary" @click="pickDim(2)">添加</el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<div |
|||
v-if="controlData.y && Array.isArray(controlData.y) && controlData.y.length < 1" |
|||
class="arttInXuquan" |
|||
> |
|||
<el-text class="mx-1" type="info">未设置度量字段</el-text> |
|||
</div> |
|||
<div v-for="(item, index) in controlData.y" class="dimListBox"> |
|||
<div class="dimListTitle">{{ item.title }}</div> |
|||
<el-space wrap> |
|||
<svg-icon |
|||
icon-class="set" |
|||
:size="20" |
|||
class="setBut" |
|||
@click="setMeaInfo(item)" |
|||
/> |
|||
<svg-icon icon-class="sc" :size="20" class="setBut" @click="delMea(index)" /> |
|||
</el-space> |
|||
</div> |
|||
</div> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">过滤器</el-text> |
|||
<el-text class="mx-1 shouxing" type="primary" @click="pickDim(3)">添加</el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<div v-if="controlData.filter.length < 1" class="arttInXuquan"> |
|||
<el-text class="mx-1" type="info">未设置过滤器</el-text> |
|||
</div> |
|||
<div v-for="(item, index) in controlData.filter" class="dimListBox"> |
|||
<div class="dimListTitle">{{ item.lable }}</div> |
|||
<el-space wrap> |
|||
<svg-icon |
|||
icon-class="set" |
|||
:size="20" |
|||
class="setBut" |
|||
@click="setFilInfo(item)" |
|||
/> |
|||
<svg-icon |
|||
icon-class="sc" |
|||
:size="20" |
|||
class="setBut" |
|||
@click="delMeaDim(index)" |
|||
/> |
|||
</el-space> |
|||
</div> |
|||
</div> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">数据时间范围</el-text> |
|||
<el-text class="mx-1" type="primary"></el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<el-select |
|||
v-model="controlData.timelength" |
|||
placeholder="请选择时间范围" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in timeSearch" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</div> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1" size="large">查询条件</el-text> |
|||
<el-text class="mx-1" type="primary" |
|||
><el-switch v-model="controlData.search.state" |
|||
/></el-text> |
|||
</div> |
|||
<div v-if="controlData.search.state" class="arttBoxInfo"> |
|||
<el-text class="mx-1">按钮显示</el-text> |
|||
<el-checkbox-group v-model="controlData.search.searchBut"> |
|||
<el-checkbox label="查询" value="search" /> |
|||
<el-checkbox label="重置" value="reset" /> |
|||
</el-checkbox-group> |
|||
<div class="arttBoxTitle"> |
|||
<el-text class="mx-1">设置查询条件</el-text> |
|||
<el-text class="mx-1 shouxing" type="primary" @click="pickDim(4)">添加</el-text> |
|||
</div> |
|||
<div class="arttBoxInfo"> |
|||
<div v-if="controlData.search.factor.length < 1" class="arttInXuquan"> |
|||
<el-text class="mx-1" type="info">未设置查询条件</el-text> |
|||
</div> |
|||
<div v-for="(item, index) in controlData.search.factor" class="dimListBox"> |
|||
<div class="dimListTitle">{{ item.oldTitle }}</div> |
|||
<el-space wrap> |
|||
<svg-icon |
|||
icon-class="set" |
|||
:size="20" |
|||
class="setBut" |
|||
@click="setSearch(item)" |
|||
/> |
|||
<svg-icon |
|||
icon-class="sc" |
|||
:size="20" |
|||
class="setBut" |
|||
@click="delSearch(index)" |
|||
/> |
|||
</el-space> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<DimensionPage |
|||
v-if="openDim" |
|||
v-model:is-show="openDim" |
|||
v-model:dim-info="pickDimInfo" |
|||
/> |
|||
<MeasurementPage |
|||
v-if="openMea" |
|||
v-model:is-show="openMea" |
|||
v-model:mea-info="pickMeaInfo" |
|||
/> |
|||
<DimMeaPage |
|||
v-if="openDimMea" |
|||
v-model:is-show="openDimMea" |
|||
:dim-mea-type="dimMeaType" |
|||
:dim-ary="dimAry" |
|||
:mea-ary="meaAry" |
|||
/> |
|||
<FilterPage |
|||
v-if="openFilpage" |
|||
v-model:is-show="openFilpage" |
|||
v-model:dim-info="pickFilpage" |
|||
/> |
|||
<SearchPage |
|||
v-if="openSearch" |
|||
v-model:is-show="openSearch" |
|||
v-model:dim-info="pickSearInfo" |
|||
/> |
|||
</div> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.echartsRight { |
|||
width: 100%; |
|||
padding: 0px 10px; |
|||
} |
|||
.arttBoxTitle { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
} |
|||
.arttBoxInfo { |
|||
margin: 10px 0; |
|||
} |
|||
.arttInXuquan { |
|||
width: 10; |
|||
text-align: center; |
|||
border: 1px dashed rgb(199.5, 201, 204); |
|||
padding: 5px 0; |
|||
} |
|||
.shouxing { |
|||
cursor: pointer; |
|||
} |
|||
.dimListBox { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
margin-bottom: 5px; |
|||
svg :hover { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
.dimListTitle { |
|||
width: 170px; |
|||
background-color: #f8f8f8; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 5px 10px; |
|||
border-radius: 5px; |
|||
color: #4e4e4e; |
|||
font-size: 14px; |
|||
} |
|||
.setBut { |
|||
cursor: pointer; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,731 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 14:50:32 |
|||
@ 备注: 维度与计量字段 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import type { CollapseIconPositionType } from "element-plus"; |
|||
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
|||
import { dimMeaInfo, filterInfo } from "@/api/chart/type"; |
|||
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
|||
|
|||
const props = defineProps({ |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
dimMeaType: { |
|||
type: Number, |
|||
default: 1, |
|||
}, |
|||
dimAry: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
meaAry: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}); |
|||
const drawTitle = ref(""); |
|||
const leftPick = ref<CollapseIconPositionType>("right"); |
|||
const checkDimList = ref<any>([]); |
|||
const checkMeaList = ref<any>([]); |
|||
//获取当前激活的项目 |
|||
const controlData = computed(() => { |
|||
return store.controlAttr; |
|||
}); |
|||
const emits = defineEmits(["update:isShow"]); |
|||
const openClose = computed({ |
|||
get: () => { |
|||
switch (props.dimMeaType) { |
|||
case 2: |
|||
drawTitle.value = "添加度量"; |
|||
break; |
|||
case 3: |
|||
drawTitle.value = "添加过滤器"; |
|||
break; |
|||
case 4: |
|||
drawTitle.value = "添加查询条件"; |
|||
break; |
|||
default: |
|||
drawTitle.value = "添加维度"; |
|||
|
|||
break; |
|||
} |
|||
huanyuan(); |
|||
return props.isShow; |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits("update:isShow", newVal); |
|||
}, |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 14:39:42 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const handleClose = () => { |
|||
emits("update:isShow", false); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 15:52:20 |
|||
@ 功能: 返回时间题目 |
|||
*/ |
|||
const timeTitle = (field: dimMeaInfo, typ: string) => { |
|||
return field.title + "(" + typ + ")"; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 15:52:20 |
|||
@ 功能: 返回时间值 |
|||
*/ |
|||
const timeVal = (field: dimMeaInfo, typ: string) => { |
|||
return field.field + "|#$#|" + typ; |
|||
}; |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 08:34:44 |
|||
@ 功能: 维度组装 |
|||
*/ |
|||
const dimMakecont = (val: number) => { |
|||
if (Array.isArray(checkDimList.value)) { |
|||
let fieldAry = new Array(); |
|||
checkDimList.value.forEach((item: any) => { |
|||
let valAry = item.split("|#$#|"); |
|||
|
|||
if (Array.isArray(valAry) && valAry.length > 1) { |
|||
switch (val) { |
|||
case 3: |
|||
break; |
|||
case 4: |
|||
break; |
|||
default: |
|||
props.dimAry.forEach((itemDim) => { |
|||
if (itemDim.field == valAry[0]) { |
|||
let isNew = true; |
|||
if ( |
|||
Array.isArray(controlData.value.x) && |
|||
controlData.value.x.length > 0 |
|||
) { |
|||
controlData.value.x.forEach((xItem: any) => { |
|||
if (xItem.field == item) { |
|||
isNew = false; |
|||
fieldAry.push(xItem); |
|||
} |
|||
}); |
|||
} |
|||
if (isNew) { |
|||
fieldAry.push({ |
|||
title: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
timeType: valAry[valAry.length - 1], |
|||
sort: 1, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} else { |
|||
switch (val) { |
|||
case 3: |
|||
break; |
|||
case 4: |
|||
break; |
|||
default: |
|||
props.dimAry.forEach((itemDim) => { |
|||
console.log("维度组装-----1------->", itemDim.field == item, itemDim, item); |
|||
if (itemDim.field == item) { |
|||
let isNew = true; |
|||
if ( |
|||
Array.isArray(controlData.value.x) && |
|||
controlData.value.x.length > 0 |
|||
) { |
|||
controlData.value.x.forEach((xItem: any) => { |
|||
if (xItem.field == item) { |
|||
isNew = false; |
|||
fieldAry.push(xItem); |
|||
} |
|||
}); |
|||
} |
|||
if (isNew) { |
|||
fieldAry.push({ |
|||
title: itemDim.title, |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title, |
|||
timeType: "", |
|||
sort: 1, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
controlData.value.x = fieldAry; |
|||
console.log("维度组装", controlData.value); |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 14:21:28 |
|||
@ 功能: 组装度量 |
|||
*/ |
|||
const meaMakecont = (val: number) => { |
|||
// "组装度量--->", |
|||
// Array.isArray(checkMeaList.value), |
|||
// checkMeaList.value.length, |
|||
// checkMeaList.value |
|||
// ); |
|||
if (Array.isArray(checkMeaList.value) && checkMeaList.value.length > 0) { |
|||
let fieldAry = new Array(); |
|||
checkMeaList.value.forEach((item: any) => { |
|||
let valAry = item.split("|#$#|"); |
|||
if (Array.isArray(valAry) && valAry.length > 1) { |
|||
switch (val) { |
|||
case 3: |
|||
break; |
|||
case 4: |
|||
break; |
|||
default: |
|||
props.meaAry.forEach((itemDim) => { |
|||
if (itemDim.field == valAry[0]) { |
|||
let isNew = true; |
|||
if ( |
|||
Array.isArray(controlData.value.y) && |
|||
controlData.value.y.length > 0 |
|||
) { |
|||
controlData.value.y.forEach((yItem: any) => { |
|||
if (yItem.field == item) { |
|||
isNew = false; |
|||
fieldAry.push(yItem); |
|||
} |
|||
}); |
|||
} |
|||
if (isNew) { |
|||
fieldAry.push({ |
|||
title: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
timeType: valAry[valAry.length - 1], |
|||
sort: 1, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} else { |
|||
switch (val) { |
|||
case 3: |
|||
break; |
|||
case 4: |
|||
break; |
|||
default: |
|||
props.meaAry.forEach((itemDim) => { |
|||
console.log("维度组装-----1------->", itemDim.field == item, itemDim, item); |
|||
if (itemDim.field == item) { |
|||
let isNew = true; |
|||
if ( |
|||
Array.isArray(controlData.value.y) && |
|||
controlData.value.y.length > 0 |
|||
) { |
|||
controlData.value.y.forEach((xItem: any) => { |
|||
if (xItem.field == item) { |
|||
isNew = false; |
|||
fieldAry.push(xItem); |
|||
} |
|||
}); |
|||
} |
|||
if (isNew) { |
|||
fieldAry.push({ |
|||
title: itemDim.title, |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title, |
|||
timeType: "", |
|||
sort: 1, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
controlData.value.y = fieldAry; |
|||
} |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-03 09:34:59 |
|||
@ 功能: 组装过滤器 |
|||
*/ |
|||
const meaDimCont = () => { |
|||
console.log("维度数据--->", checkDimList.value, props.dimAry); |
|||
console.log("量度数据--->", checkMeaList.value); |
|||
let fieldAry = new Array(); |
|||
if (Array.isArray(checkDimList.value) && checkDimList.value.length > 0) { |
|||
checkDimList.value.forEach((item: any) => { |
|||
let valAry = item.split("|#$#|"); |
|||
if (Array.isArray(valAry) && valAry.length > 1) { |
|||
props.dimAry.forEach((itemDim) => { |
|||
if (itemDim.field == valAry[0]) { |
|||
fieldAry.push({ |
|||
lable: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
type: 3, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
timeType: valAry[valAry.length - 1], |
|||
sort: 1, |
|||
conditions: "", |
|||
method: 1, |
|||
modality: 1, |
|||
modalityList: [], |
|||
startTime: "", |
|||
endTime: "", |
|||
meadim: 1, |
|||
}); |
|||
} |
|||
}); |
|||
} else { |
|||
props.dimAry.forEach((itemDim) => { |
|||
if (itemDim.field == item) { |
|||
fieldAry.push({ |
|||
lable: itemDim.title, |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title, |
|||
timeType: "", |
|||
sort: 1, |
|||
conditions: "", |
|||
method: 1, |
|||
modality: 1, |
|||
modalityList: [], |
|||
startTime: "", |
|||
endTime: "", |
|||
meadim: 1, |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
let fieldMeaAry = new Array(); |
|||
if (Array.isArray(checkMeaList.value) && checkMeaList.value.length > 0) { |
|||
checkMeaList.value.forEach((item: any) => { |
|||
let valAry = item.split("|#$#|"); |
|||
if (Array.isArray(valAry) && valAry.length > 1) { |
|||
props.meaAry.forEach((itemDim) => { |
|||
if (itemDim.field == valAry[0]) { |
|||
fieldMeaAry.push({ |
|||
lable: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
type: 3, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
timeType: valAry[valAry.length - 1], |
|||
sort: 1, |
|||
conditions: "", |
|||
method: 1, |
|||
modality: 1, |
|||
modalityList: [], |
|||
startTime: "", |
|||
endTime: "", |
|||
meadim: 2, |
|||
}); |
|||
} |
|||
}); |
|||
} else { |
|||
props.meaAry.forEach((itemDim) => { |
|||
if (itemDim.field == item) { |
|||
fieldMeaAry.push({ |
|||
lable: itemDim.title, |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title, |
|||
timeType: "", |
|||
sort: 1, |
|||
conditions: "", |
|||
method: 1, |
|||
modality: 1, |
|||
modalityList: [], |
|||
startTime: "", |
|||
endTime: "", |
|||
meadim: 2, |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
console.log("量度数据-23-->", fieldAry); |
|||
console.log("量度数据--34->", fieldMeaAry); |
|||
|
|||
controlData.value.filter.splice(0, controlData.value.filter.length); |
|||
console.log("量度数据--55->", controlData.value.filter); |
|||
controlData.value.filter.push(...fieldAry, ...fieldMeaAry); |
|||
console.log("量度数据--66->", controlData.value.filter); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 14:07:17 |
|||
@ 功能: 组装搜索条件 |
|||
*/ |
|||
const searchList = () => { |
|||
let fieldAry = new Array(); |
|||
if (Array.isArray(checkDimList.value) && checkDimList.value.length > 0) { |
|||
checkDimList.value.forEach((item: any) => { |
|||
let valAry = item.split("|#$#|"); |
|||
if (Array.isArray(valAry) && valAry.length > 1) { |
|||
props.dimAry.forEach((itemDim) => { |
|||
if (itemDim.field == valAry[0]) { |
|||
fieldAry.push({ |
|||
lable: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
timeType: valAry[valAry.length - 1], |
|||
sort: 1, |
|||
isTime: true, |
|||
value: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
coor: "Y", |
|||
}); |
|||
} |
|||
}); |
|||
} else { |
|||
props.dimAry.forEach((itemDim) => { |
|||
if (itemDim.field == item) { |
|||
fieldAry.push({ |
|||
lable: itemDim.title, |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title, |
|||
timeType: "", |
|||
sort: 1, |
|||
isTime: false, |
|||
value: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
coor: "Y", |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
let fieldMeaAry = new Array(); |
|||
if (Array.isArray(checkMeaList.value) && checkMeaList.value.length > 0) { |
|||
checkMeaList.value.forEach((item: any) => { |
|||
let valAry = item.split("|#$#|"); |
|||
if (Array.isArray(valAry) && valAry.length > 1) { |
|||
props.meaAry.forEach((itemDim) => { |
|||
if (itemDim.field == valAry[0]) { |
|||
fieldMeaAry.push({ |
|||
lable: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
type: 3, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title + "（" + valAry[valAry.length - 1] + "）", |
|||
timeType: valAry[valAry.length - 1], |
|||
sort: 1, |
|||
isTime: true, |
|||
value: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
coor: "X", |
|||
}); |
|||
} |
|||
}); |
|||
} else { |
|||
props.meaAry.forEach((itemDim) => { |
|||
if (itemDim.field == item) { |
|||
fieldMeaAry.push({ |
|||
lable: itemDim.title, |
|||
type: itemDim.type, |
|||
field: itemDim.field, |
|||
options: itemDim.options, |
|||
oldTitle: itemDim.title, |
|||
timeType: "", |
|||
sort: 1, |
|||
isTime: false, |
|||
value: "", |
|||
startTime: "", |
|||
endTime: "", |
|||
coor: "X", |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
console.log("量度数据-23-->", fieldAry); |
|||
console.log("量度数据--34->", fieldMeaAry); |
|||
controlData.value.search.factor.splice(0, controlData.value.search.factor.length); |
|||
console.log("量度数据--55->", controlData.value.search.factor); |
|||
controlData.value.search.factor.push(...fieldAry, ...fieldMeaAry); |
|||
console.log("量度数据--66->", controlData.value.search); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 16:12:49 |
|||
@ 功能: 确定选择 |
|||
*/ |
|||
const pickDimMeaSet = () => { |
|||
console.log("确定选择", props.dimMeaType); |
|||
switch (props.dimMeaType) { |
|||
case 2: |
|||
drawTitle.value = "添加度量"; |
|||
meaMakecont(props.dimMeaType); |
|||
break; |
|||
case 3: |
|||
drawTitle.value = "添加过滤器"; |
|||
meaDimCont(); |
|||
break; |
|||
case 4: |
|||
drawTitle.value = "添加查询条件"; |
|||
searchList(); |
|||
break; |
|||
default: |
|||
drawTitle.value = "添加维度"; |
|||
dimMakecont(props.dimMeaType); |
|||
break; |
|||
} |
|||
handleClose(); |
|||
}; |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 14:28:37 |
|||
@ 功能: 初始化加载 |
|||
*/ |
|||
onMounted(() => { |
|||
huanyuan(); |
|||
}); |
|||
|
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 15:45:56 |
|||
@ 功能: 还原数据 |
|||
*/ |
|||
const huanyuan = () => { |
|||
switch (props.dimMeaType) { |
|||
case 2: |
|||
checkMeaList.value.splice(0, checkMeaList.value.length); |
|||
if ( |
|||
controlData.value.y && |
|||
Array.isArray(controlData.value.y) && |
|||
controlData.value.y.length > 0 |
|||
) { |
|||
controlData.value.y.forEach((item: any) => { |
|||
if (item.timeType != "") { |
|||
checkMeaList.value.push(timeVal(item, item.timeType)); |
|||
} else { |
|||
checkMeaList.value.push(item.field); |
|||
} |
|||
}); |
|||
} |
|||
break; |
|||
case 3: |
|||
checkMeaList.value.splice(0, checkMeaList.value.length); |
|||
checkDimList.value.splice(0, checkDimList.value.length); |
|||
if ( |
|||
controlData.value.filter && |
|||
Array.isArray(controlData.value.filter) && |
|||
controlData.value.filter.length > 0 |
|||
) { |
|||
controlData.value.filter.forEach((item: any) => { |
|||
if (item.meadim == 1) { |
|||
if (item.timeType != "") { |
|||
checkDimList.value.push(timeVal(item, item.timeType)); |
|||
} else { |
|||
checkDimList.value.push(item.field); |
|||
} |
|||
} else { |
|||
if (item.timeType != "") { |
|||
checkMeaList.value.push(timeVal(item, item.timeType)); |
|||
} else { |
|||
checkMeaList.value.push(item.field); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
break; |
|||
case 4: |
|||
drawTitle.value = "添加查询条件"; |
|||
checkMeaList.value.splice(0, checkMeaList.value.length); |
|||
checkDimList.value.splice(0, checkDimList.value.length); |
|||
if ( |
|||
controlData.value.search.factor && |
|||
Array.isArray(controlData.value.search.factor) && |
|||
controlData.value.search.factor.length > 0 |
|||
) { |
|||
controlData.value.search.factor.forEach((item: any) => { |
|||
if (item.meadim == 1) { |
|||
if (item.timeType != "") { |
|||
checkDimList.value.push(timeVal(item, item.timeType)); |
|||
} else { |
|||
checkDimList.value.push(item.field); |
|||
} |
|||
} else { |
|||
if (item.timeType != "") { |
|||
checkMeaList.value.push(timeVal(item, item.timeType)); |
|||
} else { |
|||
checkMeaList.value.push(item.field); |
|||
} |
|||
} |
|||
}); |
|||
} |
|||
break; |
|||
default: |
|||
checkDimList.value.splice(0, checkDimList.value.length); |
|||
if ( |
|||
controlData.value.x && |
|||
Array.isArray(controlData.value.x) && |
|||
controlData.value.x.length > 0 |
|||
) { |
|||
controlData.value.x.forEach((item: any) => { |
|||
if (item.timeType != "") { |
|||
checkDimList.value.push(timeVal(item, item.timeType)); |
|||
} else { |
|||
checkDimList.value.push(item.field); |
|||
} |
|||
}); |
|||
} |
|||
break; |
|||
} |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-drawer |
|||
v-model="openClose" |
|||
:title="drawTitle" |
|||
direction="rtl" |
|||
:before-close="handleClose" |
|||
> |
|||
<div class="drawBodyBox"> |
|||
<el-divider |
|||
v-if="props.dimMeaType == 3 || props.dimMeaType == 4" |
|||
content-position="left" |
|||
>维度</el-divider |
|||
> |
|||
<el-checkbox-group |
|||
v-if="props.dimMeaType == 1 || props.dimMeaType == 3 || props.dimMeaType == 4" |
|||
v-model="checkDimList" |
|||
> |
|||
<div v-for="(item, index) in props.dimAry"> |
|||
<el-checkbox v-if="item.type == 1" :label="item.title" :value="item.field" /> |
|||
<el-collapse v-if="item.type == 3" :expand-icon-position="leftPick"> |
|||
<el-collapse-item :title="item.title" :name="index"> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'ymdhms')" |
|||
:value="timeVal(item, 'ymdhms')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'year')" |
|||
:value="timeVal(item, 'year')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'month')" |
|||
:value="timeVal(item, 'month')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'day')" |
|||
:value="timeVal(item, 'day')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'hour')" |
|||
:value="timeVal(item, 'hour')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'minute')" |
|||
:value="timeVal(item, 'minute')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'second')" |
|||
:value="timeVal(item, 'second')" |
|||
/> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</div> |
|||
</el-checkbox-group> |
|||
|
|||
<el-divider |
|||
v-if="props.dimMeaType == 3 || props.dimMeaType == 4" |
|||
content-position="left" |
|||
>度量</el-divider |
|||
> |
|||
|
|||
<el-checkbox-group |
|||
v-if="props.dimMeaType == 2 || props.dimMeaType == 3 || props.dimMeaType == 4" |
|||
v-model="checkMeaList" |
|||
> |
|||
<div v-for="(item, index) in props.meaAry"> |
|||
<el-checkbox v-if="item.type == 2" :label="item.title" :value="item.field" /> |
|||
<el-collapse v-if="item.type == 3" :expand-icon-position="leftPick"> |
|||
<el-collapse-item :title="item.title" :name="index"> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'ymdhms')" |
|||
:value="timeVal(item, 'ymdhms')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'year')" |
|||
:value="timeVal(item, 'year')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'onth')" |
|||
:value="timeVal(item, 'onth')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'day')" |
|||
:value="timeVal(item, 'day')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'hour')" |
|||
:value="timeVal(item, 'hour')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'minute')" |
|||
:value="timeVal(item, 'minute')" |
|||
/> |
|||
<el-checkbox |
|||
:label="timeTitle(item, 'second')" |
|||
:value="timeVal(item, 'second')" |
|||
/> |
|||
</el-collapse-item> |
|||
</el-collapse> |
|||
</div> |
|||
</el-checkbox-group> |
|||
|
|||
<el-button class="drawBut" type="primary" @click="pickDimMeaSet()">确定</el-button> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<style lang="scss" scoped> |
|||
.drawBodyBox { |
|||
padding: 0 10px; |
|||
} |
|||
.drawBut { |
|||
width: 100%; |
|||
margin-top: 20px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,106 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 13:50:00 |
|||
@ 备注: 维度弹窗 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { dimSetInfo } from "@/api/chart/type"; |
|||
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
|||
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
|||
|
|||
const props = defineProps({ |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
dimInfo: { |
|||
type: Object, |
|||
default() { |
|||
return ""; |
|||
}, |
|||
}, |
|||
}); |
|||
//获取当前激活的项目 |
|||
const controlData = computed(() => { |
|||
return store.controlAttr; |
|||
}); |
|||
const emits = defineEmits(["update:isShow", "update:dimInfo"]); |
|||
const openClose = computed({ |
|||
get: () => { |
|||
return props.isShow; |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits("update:isShow", newVal); |
|||
}, |
|||
}); |
|||
|
|||
const dimConter = reactive<dimSetInfo>({ |
|||
title: "", |
|||
type: "", |
|||
field: "", |
|||
options: [], |
|||
oldTitle: "", |
|||
timeType: "", |
|||
sort: 1, |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 14:39:42 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const handleClose = () => { |
|||
emits("update:isShow", false); |
|||
}; |
|||
onMounted(() => { |
|||
dimConter.title = props.dimInfo.title; |
|||
dimConter.type = props.dimInfo.type; |
|||
dimConter.field = props.dimInfo.field; |
|||
dimConter.options = props.dimInfo.options; |
|||
dimConter.oldTitle = props.dimInfo.oldTitle; |
|||
dimConter.timeType = props.dimInfo.timeType; |
|||
dimConter.sort = props.dimInfo.sort; |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 14:11:06 |
|||
@ 功能: 确定选择 |
|||
*/ |
|||
const pickDimConst = () => { |
|||
props.dimInfo.oldTitle = dimConter.oldTitle; |
|||
props.dimInfo.sort = dimConter.sort; |
|||
emits("update:dimInfo", dimConter); |
|||
handleClose(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="openClose" |
|||
title="设置维度字段" |
|||
width="500" |
|||
:before-close="handleClose" |
|||
draggable |
|||
> |
|||
<el-form :model="dimConter" label-width="auto"> |
|||
<el-form-item label="字段原名"> |
|||
<el-input v-model="dimConter.title" autocomplete="off" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label="显示名称"> |
|||
<el-input v-model="dimConter.oldTitle" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item label="排序"> |
|||
<el-select v-model="dimConter.sort" placeholder="请选择排序方式"> |
|||
<el-option label="不排序" :value="1" /> |
|||
<el-option label="升序" :value="2" /> |
|||
<el-option label="降序" :value="3" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" @click="pickDimConst"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,255 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 08:28:46 |
|||
@ 备注: 过滤条件配置 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { matchList, expList } from "@/api/chart/unitData"; |
|||
import { filterInfo } from "@/api/chart/type"; |
|||
const props = defineProps({ |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
dimInfo: { |
|||
type: Object, |
|||
default() { |
|||
return ""; |
|||
}, |
|||
}, |
|||
}); |
|||
const emits = defineEmits(["update:isShow", "update:dimInfo"]); |
|||
const openClose = computed({ |
|||
get: () => { |
|||
return props.isShow; |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits("update:isShow", newVal); |
|||
}, |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 14:39:42 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const handleClose = () => { |
|||
emits("update:isShow", false); |
|||
}; |
|||
const dimConter = reactive<filterInfo>({ |
|||
lable: "", |
|||
type: 0, |
|||
field: "", |
|||
options: null, |
|||
oldTitle: "", |
|||
timeType: "", |
|||
sort: 1, |
|||
conditions: "", |
|||
method: 0, |
|||
modality: 0, |
|||
modalityList: [], |
|||
startTime: "", |
|||
endTime: "", |
|||
meadim: "", |
|||
}); |
|||
const pickModality = (val: number | string) => { |
|||
console.log("改变选择---2->", val); |
|||
switch (val) { |
|||
case 2: |
|||
dimConter.modalityList = [ |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
]; |
|||
break; |
|||
case 3: |
|||
dimConter.modalityList = [ |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
]; |
|||
break; |
|||
default: |
|||
dimConter.modalityList = [ |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
]; |
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
dimConter.lable = props.dimInfo.lable; |
|||
dimConter.type = props.dimInfo.type; |
|||
dimConter.field = props.dimInfo.field; |
|||
dimConter.options = props.dimInfo.options; |
|||
dimConter.oldTitle = props.dimInfo.oldTitle; |
|||
dimConter.timeType = props.dimInfo.timeType; |
|||
dimConter.sort = props.dimInfo.sort; |
|||
|
|||
dimConter.conditions = props.dimInfo.conditions; |
|||
dimConter.method = props.dimInfo.method; |
|||
dimConter.modality = props.dimInfo.modality; |
|||
if ( |
|||
Array.isArray(props.dimInfo.modalityList) && |
|||
props.dimInfo.modalityList.length > 0 |
|||
) { |
|||
console.log("初始化加载---2->", dimConter); |
|||
console.log("初始化加载---21->", props.dimInfo.modalityList); |
|||
dimConter.modalityList.splice(0, dimConter.modalityList.length); |
|||
dimConter.modalityList = props.dimInfo.modalityList; |
|||
} else { |
|||
console.log("初始化加载---3->", dimConter); |
|||
if (dimConter.modality == 1) { |
|||
dimConter.modalityList = [ |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
]; |
|||
} else { |
|||
dimConter.modalityList = [ |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
{ |
|||
equation: "", |
|||
value: "", |
|||
}, |
|||
]; |
|||
} |
|||
} |
|||
|
|||
dimConter.startTime = props.dimInfo.startTime; |
|||
dimConter.endTime = props.dimInfo.endTime; |
|||
dimConter.meadim = props.dimInfo.meadim; |
|||
|
|||
console.log("初始化加载", dimConter); |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 13:21:09 |
|||
@ 功能: 提交过滤条件 |
|||
*/ |
|||
const pickFilterConst = () => { |
|||
console.log("提交过滤条件", dimConter); |
|||
|
|||
props.dimInfo.conditions = dimConter.conditions; |
|||
props.dimInfo.method = dimConter.method; |
|||
|
|||
props.dimInfo.modality = dimConter.modality; |
|||
props.dimInfo.modalityList = dimConter.modalityList; |
|||
|
|||
props.dimInfo.startTime = dimConter.startTime; |
|||
props.dimInfo.endTime = dimConter.endTime; |
|||
props.dimInfo.meadim = dimConter.meadim; |
|||
|
|||
emits("update:dimInfo", dimConter); |
|||
handleClose(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="openClose" |
|||
title="设置过滤器" |
|||
width="500" |
|||
:before-close="handleClose" |
|||
draggable |
|||
> |
|||
<el-form :model="dimConter" label-width="auto"> |
|||
<el-form-item label="字段原名"> |
|||
<el-text>{{ dimConter.lable }}</el-text> |
|||
</el-form-item> |
|||
<el-form-item label="字段类型"> |
|||
<el-text v-if="dimConter.type == 1">文本</el-text> |
|||
<el-text v-if="dimConter.type == 2">数值</el-text> |
|||
<el-text v-if="dimConter.type == 3">时间</el-text> |
|||
</el-form-item> |
|||
<el-form-item v-if="dimConter.type == 1" label="过滤条件"> |
|||
<el-input v-model="dimConter.conditions" /> |
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="dimConter.type == 2" label="聚合方式"> |
|||
<el-select |
|||
v-model="dimConter.method" |
|||
clearable |
|||
placeholder="请选择聚合方式" |
|||
style="width: 240px" |
|||
> |
|||
<el-option |
|||
v-for="item in matchList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="dimConter.type == 2" label="条件形式"> |
|||
<el-radio-group |
|||
v-model="dimConter.modality" |
|||
@change="pickModality(dimConter.modality)" |
|||
> |
|||
<el-radio :value="1">单条件</el-radio> |
|||
<el-radio :value="2">或条件</el-radio> |
|||
<el-radio :value="3">且条件</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item v-if="dimConter.type == 2" label="过滤条件"> |
|||
<div v-for="item in dimConter.modalityList"> |
|||
<el-space wrap> |
|||
<el-select |
|||
v-model="item.equation" |
|||
clearable |
|||
placeholder="" |
|||
style="min-width: 120px" |
|||
> |
|||
<el-option |
|||
v-for="items in expList" |
|||
:key="items.value" |
|||
:label="items.label" |
|||
:value="items.value" |
|||
/> |
|||
</el-select> |
|||
<el-input v-model="item.value" /> |
|||
</el-space> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item v-if="dimConter.type == 3" label="开始于"> |
|||
<el-date-picker |
|||
v-model="dimConter.startTime" |
|||
type="datetime" |
|||
placeholder="请选择时间" |
|||
format="YYYY/MM/DD hh:mm:ss" |
|||
value-format="x" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item v-if="dimConter.type == 3" label="结束于"> |
|||
<el-date-picker |
|||
v-model="dimConter.endTime" |
|||
type="datetime" |
|||
placeholder="请选择时间" |
|||
format="YYYY/MM/DD hh:mm:ss" |
|||
value-format="x" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" @click="pickFilterConst"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,131 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 13:51:11 |
|||
@ 备注: 度量弹窗 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { maeSetInfo } from "@/api/chart/type"; |
|||
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
|||
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
|||
const props = defineProps({ |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
meaInfo: { |
|||
type: Array, |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
}); |
|||
//获取当前激活的项目 |
|||
const controlData = computed(() => { |
|||
return store.controlAttr; |
|||
}); |
|||
const emits = defineEmits(["update:isShow", "update:meaInfo"]); |
|||
const openClose = computed({ |
|||
get: () => { |
|||
return props.isShow; |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits("update:isShow", newVal); |
|||
}, |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 14:39:42 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const handleClose = () => { |
|||
emits("update:isShow", false); |
|||
}; |
|||
const meaConter = reactive<maeSetInfo>({ |
|||
title: "", |
|||
type: "", |
|||
field: "", |
|||
options: [], |
|||
oldTitle: "", |
|||
timeType: "", |
|||
sort: 1, |
|||
method: 1, |
|||
format: 1, |
|||
}); |
|||
onMounted(() => { |
|||
meaConter.title = props.meaInfo.title; |
|||
meaConter.type = props.meaInfo.type; |
|||
meaConter.field = props.meaInfo.field; |
|||
meaConter.options = props.meaInfo.options; |
|||
meaConter.oldTitle = props.meaInfo.oldTitle; |
|||
meaConter.timeType = props.meaInfo.timeType; |
|||
meaConter.sort = props.meaInfo.sort; |
|||
meaConter.method = props.meaInfo.method; |
|||
meaConter.format = props.meaInfo.format; |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-03 08:58:51 |
|||
@ 功能: 提交度量字段设置 |
|||
*/ |
|||
const pickMeaConst = () => { |
|||
props.meaInfo.oldTitle = meaConter.oldTitle; |
|||
props.meaInfo.sort = meaConter.sort; |
|||
props.meaInfo.method = meaConter.method; |
|||
props.meaInfo.format = meaConter.format; |
|||
emits("update:meaInfo", meaConter); |
|||
handleClose(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="openClose" |
|||
title="设置度量字段" |
|||
width="500" |
|||
:before-close="handleClose" |
|||
draggable |
|||
> |
|||
<el-form :model="meaConter" label-width="auto"> |
|||
<el-form-item label="字段原名"> |
|||
<el-input v-model="meaConter.title" autocomplete="off" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label="显示名称"> |
|||
<el-input v-model="meaConter.oldTitle" autocomplete="off" /> |
|||
</el-form-item> |
|||
<el-form-item label="排序"> |
|||
<el-select v-model="meaConter.sort" placeholder="请选择排序方式"> |
|||
<el-option label="不排序" :value="1" /> |
|||
<el-option label="升序" :value="2" /> |
|||
<el-option label="降序" :value="3" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="聚合方式"> |
|||
<el-select v-model="meaConter.method" placeholder="请选择聚合方式"> |
|||
<el-option label="求和" :value="1" /> |
|||
<el-option label="平均值" :value="2" /> |
|||
<el-option label="计数" :value="3" /> |
|||
<el-option label="去重计数" :value="4" /> |
|||
<el-option label="最大值" :value="5" /> |
|||
<el-option label="最小值" :value="6" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="数据展示格式"> |
|||
<el-select v-model="meaConter.format" placeholder="请选择数据展示格式"> |
|||
<el-option label="自动（原始值）" :value="1" /> |
|||
<el-option label="整数" :value="2" /> |
|||
<el-option label="保留1位小数" :value="3" /> |
|||
<el-option label="保留2位小数" :value="4" /> |
|||
<el-option label="百分比" :value="5" /> |
|||
<el-option label="百分比1位小数" :value="6" /> |
|||
<el-option label="百分比2位小数" :value="7" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" @click="pickMeaConst"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
@ -0,0 +1,99 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-07-07 14:37:36 |
|||
@ 备注: 搜索条件 |
|||
--> |
|||
<script lang="ts" setup> |
|||
import { dimSetInfo } from "@/api/chart/type"; |
|||
import { useDesignEchartsStore } from "@/store/DesignForm/designForm"; |
|||
const store = useDesignEchartsStore() as any; //自定义表单存储器 |
|||
|
|||
const props = defineProps({ |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
dimInfo: { |
|||
type: Object, |
|||
default() { |
|||
return ""; |
|||
}, |
|||
}, |
|||
}); |
|||
//获取当前激活的项目 |
|||
const controlData = computed(() => { |
|||
return store.controlAttr; |
|||
}); |
|||
const emits = defineEmits(["update:isShow", "update:dimInfo"]); |
|||
const openClose = computed({ |
|||
get: () => { |
|||
return props.isShow; |
|||
}, |
|||
set: (newVal: any) => { |
|||
emits("update:isShow", newVal); |
|||
}, |
|||
}); |
|||
|
|||
const dimConter = reactive<dimSetInfo>({ |
|||
title: "", |
|||
type: "", |
|||
field: "", |
|||
options: [], |
|||
oldTitle: "", |
|||
timeType: "", |
|||
sort: 1, |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-27 14:39:42 |
|||
@ 功能: 关闭 |
|||
*/ |
|||
const handleClose = () => { |
|||
emits("update:isShow", false); |
|||
}; |
|||
onMounted(() => { |
|||
dimConter.lable = props.dimInfo.lable; |
|||
dimConter.type = props.dimInfo.type; |
|||
dimConter.field = props.dimInfo.field; |
|||
dimConter.options = props.dimInfo.options; |
|||
dimConter.oldTitle = props.dimInfo.oldTitle; |
|||
dimConter.timeType = props.dimInfo.timeType; |
|||
dimConter.sort = props.dimInfo.sort; |
|||
}); |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2025-06-30 14:11:06 |
|||
@ 功能: 确定选择 |
|||
*/ |
|||
const pickDimConst = () => { |
|||
props.dimInfo.lable = dimConter.lable; |
|||
props.dimInfo.sort = dimConter.sort; |
|||
emits("update:dimInfo", dimConter); |
|||
handleClose(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="openClose" |
|||
title="设置查询字段" |
|||
width="500" |
|||
:before-close="handleClose" |
|||
draggable |
|||
>{{ dimConter }} |
|||
<el-form :model="dimConter" label-width="auto"> |
|||
<el-form-item label="字段原名"> |
|||
<el-input v-model="dimConter.oldTitle" autocomplete="off" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label="显示名称"> |
|||
<el-input v-model="dimConter.lable" autocomplete="off" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="handleClose">取消</el-button> |
|||
<el-button type="primary" @click="pickDimConst"> 确定 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue