herenshan112
/
ShutongInterconnectedChemicalCloudPlatform
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

柱状图完成

qin_24
herenshan112 4 months ago
parent
71af48ab5c
commit
6408617e6d
10 changed files with 231 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      src/api/DesignForm/tableButton.ts
  2. 8
      src/api/chart/index.ts
  3. 45
      src/components/DesignForm/app/index.vue
  4. 48
      src/components/DesignForm/tableListPage/index.vue
  5. 2
      src/permission.ts
  6. 3
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/dataBoard.vue
  7. 71
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
  8. 25
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/right.vue
  9. 36
      src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue
  10. 23
      src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue

9
src/api/DesignForm/tableButton.ts
View File

@ -346,6 +346,15 @@ export interface viewPageType {
sortWord:string,
sort:number
}
},
chart:{
status:boolean,
isClick:boolean,
form:{
mapWord:string,
sortWord:string,
sort:number
}
}
}

8
src/api/chart/index.ts
View File

@ -23,3 +23,11 @@ export function getChartCont(data?: any) {
data: data
});
}
//根据条件解析图标结果
export function analyzeChartData(data?: any) {
return request({
url: "/systemapi/chart/analyzeChartData",
method: 'post',
data: data
});
}

45
src/components/DesignForm/app/index.vue
View File

@ -53,6 +53,7 @@ import MapPage from "@/components/DesignForm/app/mapPage.vue";
import CalendarPage from "@/components/DesignForm/app/calendar/calendar1/calendarPage.vue";
import SearchSelect from "@/components/DesignForm/app/calendar/selectSearch.vue";
import AKSelect from "@/components/DesignForm/public/form/select.vue";
import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue";
const props = withDefaults(
defineProps<{
@ -80,6 +81,7 @@ const props = withDefaults(
formBasicConfig?: any;
fieldsDetailList?: any;
orgAndManTree?: any;
echatsViews: echatsViews;
}>(),
{
showPage: true,
@ -130,6 +132,12 @@ const props = withDefaults(
},
}
);
const echatsViewsdf = computed({
get() {
return props.echatsViews;
},
set(newVal: any) {},
});
const emits = defineEmits<{
(e: "selectionChange", row: any): void;
(e: "btnClick", btn: any, row?: any): void; // 列表上面及表格列表里添加删除按钮事件
@ -1422,6 +1430,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 3:
props.viewPage.list.isClick = false;
@ -1429,6 +1438,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
getPageData();
break;
case 4:
@ -1437,15 +1447,26 @@ const tabsView = (val: any, types: number) => {
props.viewPage.time.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 5:
props.viewPage.card.isClick = false;
props.viewPage.list.isClick = false;
props.viewPage.date.isClick = false;
props.viewPage.time.isClick = false;
props.viewPage.gantt.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 6:
props.viewPage.list.isClick = false;
props.viewPage.date.isClick = false;
props.viewPage.time.isClick = false;
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 7:
props.viewPage.card.isClick = false;
props.viewPage.list.isClick = false;
props.viewPage.date.isClick = false;
props.viewPage.time.isClick = false;
@ -1458,6 +1479,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.time.isClick = false;
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.chart.isClick = false;
break;
}
};
@ -1762,6 +1784,20 @@ const readerColumnSun = (column: any) => {
@click="tabsView(props.viewPage.map, 5)"
/>
</el-tooltip>
<el-tooltip
v-if="viewPage.chart.status"
class="box-item"
effect="dark"
content="BI报表"
placement="top"
>
<el-button
size="small"
class="fa fa-line-chart"
:color="viewPage.chart.isClick ? '#a0cfff' : ''"
@click="tabsView(viewPage.chart, 7)"
/>
</el-tooltip>
</el-button-group>
</div>
</div>
@ -2082,6 +2118,13 @@ const readerColumnSun = (column: any) => {
:columns-filter="columnsFilter"
/>
</el-col>
<el-col v-if="viewType == 7" :span="24">
<ContainerPath
:echats-views="echatsViewsdf"
:table-key="formBasicConfig.name"
:types="1"
/>
</el-col>
<el-col :span="24" style="display: none">
<el-button-group>
<el-tooltip

48
src/components/DesignForm/tableListPage/index.vue
View File

@ -35,7 +35,7 @@ import html2canvas from "html2canvas";
import JSZip, { forEach } from "jszip";
import { ElLoading, ElMessage, ElNotification } from "element-plus";
import { softDeletion, retractRunWorkFlow, recalSendMsg } from "@/api/taskapi/management";
import { echatsViews } from "@/api/DesignForm/types";
import { formatNumber } from "@/api/DesignForm/utils";
//引入组件
import FormPageCont from "@/components/DesignForm/tableListPage/formPageCont.vue";
@ -46,6 +46,7 @@ import GanttPage from "@/components/DesignForm/app/gannttPage.vue";
import MapPage from "@/components/DesignForm/app/mapPage.vue";
import CalendarPage from "@/components/DesignForm/app/calendar/calendar1/calendarPage.vue";
import SearchSelect from "@/components/DesignForm/app/calendar/selectSearch.vue";
import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue";
const props = withDefaults(
defineProps<{
@ -71,6 +72,7 @@ const props = withDefaults(
formBasicConfig?: any;
fieldsDetailList?: any;
orgAndManTree?: any;
echatsViews: echatsViews;
}>(),
{
showPage: true,
@ -118,6 +120,13 @@ const props = withDefaults(
},
}
);
const echatsViewsdf = computed({
get() {
return props.echatsViews;
},
set(newVal: any) {},
});
const emits = defineEmits<{
(e: "selectionChange", row: any): void;
(e: "btnClick", btn: any, row?: any): void; // 列表上面及表格列表里添加删除按钮事件
@ -1361,6 +1370,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 3:
props.viewPage.list.isClick = false;
@ -1368,6 +1378,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
getPageData();
break;
case 4:
@ -1376,6 +1387,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.time.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 5:
props.viewPage.list.isClick = false;
@ -1383,8 +1395,18 @@ const tabsView = (val: any, types: number) => {
props.viewPage.time.isClick = false;
props.viewPage.gantt.isClick = false;
props.viewPage.card.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 6:
props.viewPage.list.isClick = false;
props.viewPage.date.isClick = false;
props.viewPage.time.isClick = false;
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.chart.isClick = false;
break;
case 7:
props.viewPage.card.isClick = false;
props.viewPage.list.isClick = false;
props.viewPage.date.isClick = false;
props.viewPage.time.isClick = false;
@ -1397,6 +1419,7 @@ const tabsView = (val: any, types: number) => {
props.viewPage.time.isClick = false;
props.viewPage.gantt.isClick = false;
props.viewPage.map.isClick = false;
props.viewPage.chart.isClick = false;
break;
}
};
@ -1768,6 +1791,20 @@ const readerColumnSun = (column: any) => {
@click="tabsView(viewPage.map, 5)"
/>
</el-tooltip>
<el-tooltip
v-if="viewPage.chart.status"
class="box-item"
effect="dark"
content="BI报表"
placement="top"
>
<el-button
size="small"
class="fa fa-line-chart"
:color="viewPage.chart.isClick ? '#a0cfff' : ''"
@click="tabsView(viewPage.chart, 7)"
/>
</el-tooltip>
</el-button-group>
</div>
</div>
@ -2118,9 +2155,14 @@ const readerColumnSun = (column: any) => {
:columns-filter="columnsFilter"
/>
</el-col>
<el-col :span="24" style="display: none">
{{ tableDataList }}
<el-col v-if="viewType == 7" :span="24">
<ContainerPath
:echats-views="echatsViewsdf"
:table-key="formBasicConfig.name"
:types="1"
/>
</el-col>
<el-col :span="24" style="display: none"> </el-col>
<el-col :span="24" style="display: none">
<el-button-group>
<el-tooltip

2
src/permission.ts
View File

@ -16,7 +16,7 @@ const whiteList = ["/login","/login/silentlogin","/aiurl"];
router.beforeEach(async (to:any, from:any, next:any) => {
NProgress.start();
console.log("白名单路由----》");
const hasToken = localStorage.getItem(appTokenKey);
// console.log("白名单路由----》",hasToken,"--->",to.path);
if (hasToken) {

3
src/views/sysworkflow/lowcodepage/appPage/appPageForm/dataBoard.vue
View File

@ -7,6 +7,7 @@
import { echatsViews } from "@/api/DesignForm/types";
import { dimMeaInfo } from "@/api/chart/index";
import { dimMeaFormTable, countChartValue, getChartCont } from "@/api/chart/index";
import { useDesignEchartsStore } from "@/store/DesignForm/designForm";
//引入页面
import LeftPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/left.vue";
@ -47,7 +48,7 @@ const props = defineProps({
},
},
});
const store = useDesignEchartsStore() as any; //自定义表单存储器
const butLoading = ref(false);
const echartsInfo = reactive<echatsViews>({
uuid: "12332",

71
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/chart/bar.vue
View File

@ -4,6 +4,7 @@
@ 备注: 柱状图
-->
<script lang="ts" setup>
import { analyzeChartData } from "@/api/chart/index";
import { echatsViews } from "@/api/DesignForm/types";
import * as echarts from "echarts";
@ -35,34 +36,46 @@ var myChart = ref<any>();
const drawPictures = () => {
if (props.uuid && props.uuid != "") {
myChart.value = echarts.init(document.getElementById(props.uuid) as HTMLDivElement);
myChart.value.setOption({
grid: {
analyzeChartData({ tableKey: props.tableKey, chartId: props.uuid }).then((data) => {
console.log("火兔", data);
let optVal = data.data;
optVal.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],
},
],
};
myChart.value.setOption(optVal);
});
// 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();
}
@ -75,6 +88,14 @@ watch(
},
{ deep: true }
);
watch(
() => props.data,
(val: any) => {
console.log("画图完毕--改变-->", val);
drawPictures();
},
{ deep: true }
);
/**
@ 作者: 秦东
@ 时间: 2025-06-26 09:47:45
@ -88,7 +109,10 @@ const searBut = (val: string) => {
}
return false;
};
//搜索
const onSubmit = () => {
drawPictures();
};
onMounted(() => {
nextTick(() => {
drawPictures();
@ -196,7 +220,6 @@ onMounted(() => {
</el-form-item>
</el-form>
<div class="barBox" :id="props.uuid"></div>
{{ props }}
</div>
</template>
<style lang="scss" scoped>

25
src/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/right.vue
View File

@ -8,6 +8,7 @@ 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 { matchList } from "@/api/chart/unitData";
//引入页面
import DimensionPage from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/winBox/dimension.vue";
@ -163,6 +164,23 @@ const setSearch = (val: searchInfo) => {
console.log("设置搜索条件配置", val);
openSearch.value = true;
};
/**
@ 作者: 秦东
@ 时间: 2025-07-17 09:05:41
@ 功能: 聚合方式
*/
const shuxingmh = (val: any) => {
let titleVal = "";
if (Array.isArray(matchList)) {
matchList.forEach((item: any) => {
console.log(item.value, val, item.value == val);
if (item.value == val) {
titleVal = item.label;
}
});
}
return titleVal;
};
</script>
<template>
<div class="echartsRight">
@ -198,7 +216,7 @@ const setSearch = (val: searchInfo) => {
<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>
<div class="dimListTitle">{{ item.oldTitle }}</div>
<el-space wrap>
<svg-icon
icon-class="set"
@ -222,7 +240,7 @@ const setSearch = (val: searchInfo) => {
<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>
<div class="dimListTitle">{{ item.title }}({{ shuxingmh(item.method) }})</div>
<el-space wrap>
<svg-icon
icon-class="set"
@ -243,7 +261,8 @@ const setSearch = (val: searchInfo) => {
<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>
{{ item }}
<div class="dimListTitle">{{ item.oldTitle }}</div>
<el-space wrap>
<svg-icon
icon-class="set"

36
src/views/sysworkflow/lowcodepage/appPage/appPageForm/openAppFormPage.vue
View File

@ -17,6 +17,7 @@ import { appPageDataInit, appWorkFlow } from "@/api/date/type";
//引入页面
import AppFlowSee from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/appFlow/appFlowSee.vue";
import ContainerPath from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/echatesUnit/container.vue";
const props = defineProps({
appCont: {
@ -44,7 +45,7 @@ const props = defineProps({
default: "",
},
});
const echatsViews = ref<any>("");
const appInitData = ref<appPageDataInit>("");
//app表单
const stateForm = reactive<any>({
@ -159,6 +160,14 @@ const stateList = reactive({
ranks: 3,
},
},
chart: {
status: false,
isClick: false,
form: {
sortWord: "",
sortClass: 1,
},
},
},
});
@ -196,7 +205,7 @@ const activePage = ref(0); //默认选择的页面
/**
@ 作者: 秦东
@ 时间: 2024-05-18 10:13:15
@ 功能:
@ 功能:
*/
const handleAppPageClick = () => {};
@ -208,8 +217,9 @@ const handleAppPageClick = () => {};
const gainAppFormPageInit = () => {
if (props.menusInfo.id) {
gainAppPageInfo({ id: props.menusInfo.id }).then((data) => {
console.log("获取初始化表单数据", data);
console.log("获取初始化表单数据----->", data);
appInitData.value = data.data;
echatsViews.value = data.data.chartList;
if (data.data.page && data.data.pageList && data.data.appFlow) {
activePage.value = 1;
} else if (data.data.page && !data.data.pageList && data.data.appFlow) {
@ -356,8 +366,16 @@ const gainAppFormPageInit = () => {
stateList.dict = stateData.dict;
stateList.refreshTable = stateData.refreshTable;
if (stateData.view) {
stateList.view = stateData.view;
// stateList.view = stateData.view;
stateList.view.card = stateData.view.card;
stateList.view.list = stateData.view.list;
stateList.view.date = stateData.view.date;
stateList.view.time = stateData.view.time;
stateList.view.gantt = stateData.view.gantt;
stateList.view.map = stateData.view.map;
}
stateList.view.chart.status = data.data.chart;
// console.log("开发---->", stateList.view);
}
if (data.data.page) {
// console.log("data.data.mastesform", data.data)
@ -484,7 +502,7 @@ defineExpose({
}
}
} */
</script>
<template>
@ -501,6 +519,7 @@ defineExpose({
<el-tab-pane v-if="appInitData.pageList" label="列表预览" :name="1" />
<el-tab-pane v-if="appInitData.page" label="表单预览" :name="2" />
<el-tab-pane v-if="appInitData.appFlow" label="流程图" :name="3" />
<el-tab-pane v-if="appInitData.chart" label="BI报表" :name="4" />
</el-tabs>
</el-col>
<el-col v-if="activePage != 3" :span="24" class="pageBoxInfo">
@ -519,6 +538,7 @@ defineExpose({
:form-basic-config="stateForm.formData.form"
:fields-detail-list="stateForm.formData.list"
:org-and-man-tree="orgAndManTree"
:echats-views="echatsViews"
@optionsValue5Get5="optionsValue5Get5"
/>
<ak-form
@ -538,6 +558,12 @@ defineExpose({
:save-draft-page="saveDraftPage"
@optionsValue3Get3="optionsValue3Get3"
/>
<ContainerPath
v-if="activePage == 4"
:echats-views="echatsViews"
:table-key="appInitData.appForm.tablekey"
:types="1"
/>
</el-scrollbar>
</el-card>
</el-col>

23
src/views/sysworkflow/lowcodepage/runApp/runAppForm.vue
View File

@ -157,8 +157,17 @@ const stateList = reactive({
title: [],
},
},
chart: {
status: false,
isClick: false,
form: {
sortWord: "",
sortClass: 1,
},
},
},
});
const echatsViews = ref<any>("");
const appFormTitle = ref("");
const versionTitle = ref<string>(""); //表单名称
const versionId = ref<string>(""); //表单版本号
@ -185,6 +194,7 @@ const initLoadData = () => {
gainAppPageInfo({ id: props.pickAppMenu.id }).then((data) => {
// console.log("获取初始化表单数据bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb", data);
appInitData.value = data.data;
echatsViews.value = data.data.chartList;
// console.log("获取初始化表单数据---!",appInitData.value)
mastesformjson.value = data.data.appForm.mastesformjson;
isFlow.value = data.data.appForm.flowIsOpen;
@ -280,9 +290,19 @@ const initLoadData = () => {
stateList.formApi = stateData.formApi;
stateList.dict = stateData.dict;
stateList.refreshTable = stateData.refreshTable;
// if (stateData.view) {
// stateList.view = stateData.view;
// }
if (stateData.view) {
stateList.view = stateData.view;
// stateList.view = stateData.view;
stateList.view.card = stateData.view.card;
stateList.view.list = stateData.view.list;
stateList.view.date = stateData.view.date;
stateList.view.time = stateData.view.time;
stateList.view.gantt = stateData.view.gantt;
stateList.view.map = stateData.view.map;
}
stateList.view.chart.status = data.data.chart;
}
if (data.data.page) {
// console.log("data.data.mastesform", data.data)
@ -389,6 +409,7 @@ function optionsValue3Get3(data: any, fieldName: string) {
:form-basic-config="stateForm.formData.form"
:fields-detail-list="stateForm.formData.list"
:org-and-man-tree="orgAndManTree"
:echats-views="echatsViews"
/>
<!-- <AppFormPage
v-else

Write Preview
Loading…
Cancel
Save