zwgczx/agchart
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
wintsa 2026-05-08 11:01:07 +08:00
parent 5c3be71186
commit 0990959e82
10 changed files with 145 additions and 850 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.playwright-mcp/console-2026-05-08T02-04-09-373Z.log Normal file
View File

@ -0,0 +1,2 @@
[ 909ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=2852bbef:20102
[ 1197ms] [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://127.0.0.1:5173/favicon.ico:0

1
.playwright-mcp/console-2026-05-08T02-05-10-848Z.log Normal file
View File

@ -0,0 +1 @@
[ 30ms] [INFO] %cDownload the React DevTools for a better development experience: https://react.dev/link/react-devtools font-weight:bold @ http://127.0.0.1:5173/node_modules/.vite/deps/react-dom_client.js?v=2852bbef:20102

59
.playwright-mcp/page-2026-05-08T02-04-10-573Z.yml Normal file
View File

@ -0,0 +1,59 @@
- main [ref=e3]:
- generic:
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- region "年度费用模板" [ref=e4]:
- region "年度总费用图表" [ref=e5]:
- generic [ref=e6]:
- button "纵坐标：造价（元）" [ref=e8] [cursor=pointer]: 造价（元）
- button "全屏(F11)" [ref=e9] [cursor=pointer]
- generic [ref=e11]:
- figure "图表，共有0个系列":
- generic [ref=e12]:
- img "interactive chart":
- generic:
- img
- img
- region [ref=e13]
- toolbar "标注" [ref=e14]:
- button "均" [disabled] [ref=e15]:
- generic: 均
- button "Line Tool" [disabled] [ref=e16]
- button "Text Tool" [disabled] [ref=e17]
- button "Shape Tool" [disabled] [ref=e18]
- button "Fibonacci Tool" [disabled] [ref=e19]
- button "Clear annotations" [disabled] [ref=e20]
- status:
- generic: 没有数据显示
- toolbar "缩放" [ref=e21]:
- button "缩小" [disabled] [ref=e22]
- button "放大" [ref=e23] [cursor=pointer]
- button "左移" [disabled] [ref=e24]
- button "右移" [disabled] [ref=e25]
- button "重置" [disabled] [ref=e26]
- generic [ref=e27]: 请选择右侧分类项
- complementary "选择内容" [ref=e28]:
- tablist "选择内容切换项" [ref=e29]:
- tab "自然地理区位" [selected] [ref=e30] [cursor=pointer]
- tab "设施类别" [ref=e31] [cursor=pointer]
- tab "建设阶段" [ref=e32] [cursor=pointer]
- tab "规划形式" [ref=e33] [cursor=pointer]
- generic [ref=e34]:
- generic [ref=e35]: 自然地理区位
- generic [ref=e36]: 加载中

59
.playwright-mcp/page-2026-05-08T02-05-11-092Z.yml Normal file
View File

@ -0,0 +1,59 @@
- main [ref=e3]:
- generic:
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- generic: 众为数字化管理平台
- region "年度费用模板" [ref=e4]:
- region "年度总费用图表" [ref=e5]:
- generic [ref=e6]:
- button "纵坐标：造价（元）" [ref=e8] [cursor=pointer]: 造价（元）
- button "全屏(F11)" [ref=e9] [cursor=pointer]
- generic [ref=e11]:
- figure "图表，共有0个系列":
- generic [ref=e12]:
- img "interactive chart":
- generic:
- img
- img
- region [ref=e13]
- toolbar "标注" [ref=e14]:
- button "均" [disabled] [ref=e15]:
- generic: 均
- button "Line Tool" [disabled] [ref=e16]
- button "Text Tool" [disabled] [ref=e17]
- button "Shape Tool" [disabled] [ref=e18]
- button "Fibonacci Tool" [disabled] [ref=e19]
- button "Clear annotations" [disabled] [ref=e20]
- status:
- generic: 没有数据显示
- toolbar "缩放" [ref=e21]:
- button "缩小" [disabled] [ref=e22]
- button "放大" [ref=e23] [cursor=pointer]
- button "左移" [disabled] [ref=e24]
- button "右移" [disabled] [ref=e25]
- button "重置" [disabled] [ref=e26]
- generic [ref=e27]: 请选择右侧分类项
- complementary "选择内容" [ref=e28]:
- tablist "选择内容切换项" [ref=e29]:
- tab "自然地理区位" [selected] [ref=e30] [cursor=pointer]
- tab "设施类别" [ref=e31] [cursor=pointer]
- tab "建设阶段" [ref=e32] [cursor=pointer]
- tab "规划形式" [ref=e33] [cursor=pointer]
- generic [ref=e34]:
- generic [ref=e35]: 自然地理区位
- generic [ref=e36]: 加载中

783
demo.html
View File

@ -1,783 +0,0 @@
<script type="text/javascript">
// 泛微的replaceAll方法不支持第一个入参为REGEXP，需在此处重写replaceAll方法，扩展其功能
(function () {
const nativeReplace = String.prototype.replace;
String.prototype.replaceAll = function (search, replacement) {
if (search instanceof RegExp) {
if (!search.global) {
throw new TypeError(
"replaceAll called with a non-global RegExp"
);
}
return nativeReplace.call(this, search, replacement);
}
return nativeReplace.call(
this,
new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
replacement
);
};
})();
// 禁止ModeForm的右键菜单
ModeForm.controlBtnDisabled(true);
const myGlobalParams = {};
window.myGlobalParams = myGlobalParams;
// 获取图形展示类型
// 0为日养费用趋势图，1为日养指标趋势图
myGlobalParams.cardUrl_lx = ModeForm.getCardUrlInfo().lx;
switch (myGlobalParams.cardUrl_lx) {
case '1':
myGlobalParams.indicator_type = 0;
myGlobalParams.axes_y_Name = "指标(元/公里)";
myGlobalParams.axes_y_Formatter = axesYValueFormatterSD;
myGlobalParams.diyButtonArr = [{
value: 'type-select',
tooltip: '选择指标类型',
label: `<span class="ag-charts-myButton-type-select ag-charts-diy-button" style="font-size: 10px;">主线</span>`,
}];
myGlobalParams.zj = '0';
break;
case '2':
myGlobalParams.axes_y_Name = "结算(元)";
myGlobalParams.axes_y_Formatter = axesYValueFormatterTT;
myGlobalParams.diyButtonArr = [/*{
value: 'feeitem-select',
tooltip: '选择费用项目',
label: `<i class="icon-coms-search ag-charts-myButton-feeitem-select ag-charts-diy-button"></i>`,
}*/];
myGlobalParams.feeitem = '99';
break;
case '3':
myGlobalParams.indicator_type = 0;
myGlobalParams.axes_y_Name = "指标(元/公里)";
myGlobalParams.axes_y_Formatter = axesYValueFormatterSD;
myGlobalParams.diyButtonArr = [{
value: 'type-select',
tooltip: '选择指标类型',
label: `<span class="ag-charts-myButton-type-select ag-charts-diy-button" style="font-size: 10px;">主线</span>`,
}];
myGlobalParams.feeitem = '99';
break;
default:
myGlobalParams.axes_y_Name = "结算价(元)";
myGlobalParams.axes_y_Formatter = axesYValueFormatterTT;
myGlobalParams.diyButtonArr = [];
myGlobalParams.zj = 0;
break;
}
const { AgCharts } = agCharts;
myGlobalParams.updateChartTO = null;
myGlobalParams.paperTheme = {
palette: {
fills: ["#006f9b", "#ff7faa", "#00994d", "#ff8833", "#00a0dd"],
strokes: ["#003f58", "#934962", "#004a25", "#914d1d", "#006288"],
},
overrides: {
common: {
subtitle: {
text: "Paper Theme",
},
},
},
params: {
foregroundColor: "#262a33",
backgroundColor: "#fff1e5",
accentColor: "#0d7680",
fontFamily: '"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif',
fontSize: 14,
tooltipBackgroundColor: "#fff7ef",
tooltipTextColor: "#262a33",
},
};
myGlobalParams.options = {
container: document.getElementById("myChart"),
theme: myGlobalParams.paperTheme,
locale: {
localeText: agChartsLocale.AG_CHARTS_LOCALE_ZH_CN,
},
zoom: {
enabled: true,
anchorPointX: 'pointer',
anchorPointY: 'pointer',
},
annotations: {
enabled: true,
toolbar: {
buttons: myGlobalParams.diyButtonArr.concat([
{
icon: 'trend-line-drawing',
value: 'line-menu',
tooltip: 'Line Tool',
},
{
icon: 'text-annotation',
value: 'text-menu',
tooltip: 'Text Tool',
},
{
icon: 'arrow-drawing',
value: 'shape-menu',
tooltip: 'Shape Tool',
},
// {
// icon: 'measurer-drawing',
// value: 'measurer-menu',
// tooltip: 'Measurer Tool',
// },
{
icon: 'fibonacci-retracement-drawing',
value: 'fibonacci-menu',
tooltip: 'Fibonacci Tool',
},
{
value: 'full-screen',
tooltip: '全屏',
label: `<i class="anticon anticon-arrow-salt ag-charts-myButton-fullScreen ag-charts-diy-button"></i>`,
},
{
icon: 'delete',
value: 'clear',
tooltip: 'Clear annotations',
},
]),
},
},
legend: {
position: "right",
},
title: {
text: ` `,
},
axes: {
y: {
type: "number",
position: "left",
title: {
text: myGlobalParams.axes_y_Name,
},
crosshair: {
snap: false,
},
},
x: {
type: "category",
position: "bottom",
// title: {
// text: "Year",
// },
crosshair: {
snap: false,
},
},
},
formatter: {
y: myGlobalParams.axes_y_Formatter,
}
};
myGlobalParams.userid = ecodeSDK.getEcodeParams(['ecode_params'])._user.id;// String
// 获取series数据
let initialInterval = setInterval(async () => {
if ($(`#myChart`).length > 0) {
clearInterval(initialInterval);
let dockerH = $(`.coms-mode-docker.coms-mode-card`).height();
$(`.myChartRow`).css('height', `${dockerH - 52}px`);
let resStr1 = await $.post(`/api/esb/oa/execute?eventkey=ExecuteMySQL&params={"SQLID":"90","vars":[{"value":"${myGlobalParams.userid}"}],"maxRunNum":"3"}`);
let res = JSON.parse(resStr1).data.res.map(m => JSON.parse(m));
res.sort((a, b) => a.CJ.localeCompare(b.CJ));
if (res.length == 0) return;
myGlobalParams.compInfo = res[0];
await AgChartOptionHandler();
beforeAgChartFirstRender();
myGlobalParams.agChart = AgCharts.create(myGlobalParams.options);
// 添加全屏按钮
let myFullScreemIV = setInterval(() => {
if ($(`.ag-charts-myButton-fullScreen`).length > 0) {
clearInterval(myFullScreemIV);
$(`.ag-charts-myButton-fullScreen`)[0].parentNode.parentNode.addEventListener('keydown', agChartsDiyButtonKeyDownEvent);
$(`.ag-charts-myButton-fullScreen`)[0].parentNode.parentNode.addEventListener('click', function () {
$(`.ag-charts-toolbar__button--active`).removeClass('ag-charts-toolbar__button--active');
$(this).addClass('ag-charts-toolbar__button--active');
if (!document.fullscreenElement) {
$(`#myChart`)[0].requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
if ($(`.ag-charts-myButton-fullScreen`).length > 0) {
if (!document.fullscreenElement) {
$(`.ag-charts-myButton-fullScreen`).removeClass('anticon-shrink');
$(`.ag-charts-myButton-fullScreen`).addClass('anticon-arrow-salt');
} else {
$(`.ag-charts-myButton-fullScreen`).removeClass('anticon-arrow-salt');
$(`.ag-charts-myButton-fullScreen`).addClass('anticon-shrink');
}
}
});
}
}, 50);
afterAgChartFirstRender();
}
}, 50);
function beforeAgChartFirstRender() {
}
function afterAgChartFirstRender() {
if (['1', '3'].includes(myGlobalParams.cardUrl_lx)) {
let myButtonIV1 = setInterval(() => {
if ($(`.ag-charts-myButton-type-select`).length > 0) {
clearInterval(myButtonIV1);
$(`.ag-charts-myButton-type-select`)[0].parentNode.parentNode.addEventListener('keydown', agChartsDiyButtonKeyDownEvent);
$(`.ag-charts-myButton-type-select`)[0].parentNode.parentNode.addEventListener('click', function () {
$(`.ag-charts-toolbar__button--active`).removeClass('ag-charts-toolbar__button--active');
$(this).addClass('ag-charts-toolbar__button--active');
$(`.ag-charts-canvas-overlay.ag-charts-tooltip-container>div:nth-child(4)`).append(`
<div role="menu" aria-orientation="vertical" class="ag-charts-menu ag-charts-popover ag-charts-annotations__toolbar-menu" aria-label="主线" style="right: unset; bottom: unset; left: 60px; top: 66px;">
<div role="menuitem" aria-disabled="false" class="ag-charts-menu__row ag-charts-diy-button-submenu" data-popover-id="select-zb-type-zx" tabindex="0">
<span class="ag-charts-menu__label ag-charts-diy-button-submenu-label">主线量里程指标</span>
</div>
<div role="menuitem" aria-disabled="false" class="ag-charts-menu__row ag-charts-diy-button-submenu" data-popover-id="select-zb-type-yh" tabindex="-1">
<span class="ag-charts-menu__label ag-charts-diy-button-submenu-label">养护量里程指标</span>
</div>
<div role="menuitem" aria-disabled="false" class="ag-charts-menu__row ag-charts-diy-button-submenu" data-popover-id="select-zb-type-sf" tabindex="-1">
<span class="ag-charts-menu__label ag-charts-diy-button-submenu-label">收费量里程指标</span>
</div>
<div role="menuitem" aria-disabled="false" class="ag-charts-menu__row ag-charts-diy-button-submenu" data-popover-id="select-zb-type-dl" tabindex="-1">
<span class="ag-charts-menu__label ag-charts-diy-button-submenu-label">四车道当量里程指标</span>
</div>
</div>
`);
$(`.ag-charts-diy-button-submenu`)[0].focus({ preventScroll: true });
let titles = ['主线', '养护', '收费', '当量'];
for (let i = 0; i < $(`.ag-charts-diy-button-submenu`).length; i++) {
$(`.ag-charts-diy-button-submenu`)[i].addEventListener('click', (e) => {
$(`.ag-charts-canvas-overlay.ag-charts-tooltip-container>div:nth-child(4)`).empty();
document.removeEventListener('mousedown', agChartsSubMenuEraser, true);
$(`.ag-charts-myButton-type-select`).text(titles[i]);
// 业务逻辑
clearInterval(myGlobalParams.updateChartTO);
myGlobalParams.indicator_type = i;
myGlobalParams.updateChartTO = setTimeout(async () => {
if (myGlobalParams.cardUrl_lx == 1) {
myGlobalParams.zj = ModeForm.getFieldValue('field293946');
if (myGlobalParams.zj.length == 0) {
myGlobalParams.options.data = [];
} else {
await AgChartOptionHandler();
}
} else if (myGlobalParams.cardUrl_lx == 3) {
let feeitem = ModeForm.getFieldValue('field294935');
if (feeitem.length == 0) {
$(`.ag-charts-title-diy-feeitem>span`)[0].innerHTML = '请选择费用项目';
myGlobalParams.options.data = [];
} else {
$(`.ag-charts-title-diy-feeitem>span`)[0].innerHTML = ModeForm.getBrowserShowName('field294935');
myGlobalParams.feeitem = feeitem.match(/\d+$/g)[0];
await AgChartOptionHandler();
}
}
myGlobalParams.agChart.updateDelta({ data: myGlobalParams.options.data });
}, 300);
});
$(`.ag-charts-diy-button-submenu`)[i].addEventListener('mouseenter', (e) => {
if (document.activeElement !== e.target) {
document.activeElement.setAttribute('tabindex', '-1');
e.target.setAttribute('tabindex', '0');
e.target.focus({ preventScroll: true });
}
});
$(`.ag-charts-diy-button-submenu`)[i].addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowDown':
e.target.nextElementSibling?.focus({ preventScroll: true });
break;
case 'ArrowUp':
e.target.previousElementSibling?.focus({ preventScroll: true });
break;
case 'ArrowLeft':
agChartsSubMenuEraser();
$(`.ag-charts-myButton-type-select`)[0].parentNode.parentNode.focus({ preventScroll: true });
break;
case 'Escape':
agChartsSubMenuEraser();
$(`.ag-charts-myButton-type-select`)[0].parentNode.parentNode.focus({ preventScroll: true });
break;
default:
break;
}
});
}
document.addEventListener('mousedown', agChartsSubMenuEraser, true);
});
}
}, 50);
} else if (myGlobalParams.cardUrl_lx == 2) {
// let myButtonIV2 = setInterval(() => {
// if ($(`.ag-charts-myButton-feeitem-select`).length > 0) {
// clearInterval(myButtonIV2);
// $(`.ag-charts-myButton-feeitem-select`)[0].parentNode.parentNode.addEventListener('keydown', agChartsDiyButtonKeyDownEvent);
// $(`.ag-charts-myButton-feeitem-select`)[0].parentNode.parentNode.addEventListener('click', function () {
// $(`.ag-charts-toolbar__button--active`).removeClass('ag-charts-toolbar__button--active');
// $(this).addClass('ag-charts-toolbar__button--active');
// // 业务逻辑
// $(`#field294935span button`).click();
// });
// }
// }, 50);
}
// 增加表单字段 Component
if (['0', '1'].includes(myGlobalParams.cardUrl_lx)) {
let selectZJComp;
ModeForm.proxyFieldContentComp("field293946", function (info, compFn) {
selectZJComp = selectZJComp ? selectZJComp : compFn();
return compFn();
});
ModeForm.forceRenderField("field293946");
$(`#myChart`).prepend(`<div class="selectZJ" style="position: absolute; top: 10px; left: 0px; z-index: 1000; width: 100%;"></div>`);
ReactDOM.render(selectZJComp, $(`#myChart>div.selectZJ`)[0]);
} else if (['2', '3'].includes(myGlobalParams.cardUrl_lx)) {
$(`#myChart`).prepend(`<div class="ag-charts-title-diy-feeitem" style="display: flex; justify-content: center; align-items: center; font-size: 23px; position: absolute; top: 10px; left: 0px; z-index: 1000; width: 100%;"><span>年度总费用</span><div class="ag-charts-title-diy-feeitem-editor" style="padding-left: 5px;"></div></div>`);
let editComp = React.createElement(antd.Button, { size: 'small', type: 'dashed', icon: 'edit', onClick: () => $(`#field294935span button`).click() });
ReactDOM.render(editComp, $(`.ag-charts-title-diy-feeitem>div.ag-charts-title-diy-feeitem-editor`)[0]);
}
}
function agChartsDiyButtonKeyDownEvent(e) {
if (e.key == ' ' || e.key == 'Enter') {
this.click();
}
}
function agChartsSubMenuEraser(e = null) {
if (e && (e.target.classList.contains('ag-charts-diy-button-submenu') || e.target.classList.contains('ag-charts-diy-button-submenu-label'))) return;
$(`.ag-charts-canvas-overlay.ag-charts-tooltip-container>div:nth-child(4)`).empty();
document.removeEventListener('mousedown', agChartsSubMenuEraser, true);
}
ModeForm.bindFieldChangeEvent('field293946,field294935', async function (obj, id, value) {
clearInterval(myGlobalParams.updateChartTO);
if (id == 'field293946') {
myGlobalParams.updateChartTO = setTimeout(async () => {
myGlobalParams.zj = value;
if (myGlobalParams.zj.length == 0) {
myGlobalParams.options.data = [];
} else {
await AgChartOptionHandler();
}
myGlobalParams.agChart.updateDelta({ data: myGlobalParams.options.data });
}, 300);
} else if (id == 'field294935') {
myGlobalParams.updateChartTO = setTimeout(async () => {
if (value.length == 0) {
$(`.ag-charts-title-diy-feeitem>span`)[0].innerHTML = '请选择费用项目';
myGlobalParams.options.data = [];
} else {
$(`.ag-charts-title-diy-feeitem>span`)[0].innerHTML = ModeForm.getBrowserShowName(id);
myGlobalParams.feeitem = value.match(/\d+$/g)[0];
await AgChartOptionHandler();
}
myGlobalParams.agChart.updateDelta({ data: myGlobalParams.options.data });
}, 300);
}
});
async function AgChartOptionHandler() {
let res;
if (myGlobalParams.cardUrl_lx == 1) {
let resStr2 = await $.post(`/api/esb/oa/execute?eventkey=ExecuteMySQL&params={"SQLID":"91","vars":[{"value":"${myGlobalParams.compInfo.ID}"},{"value":"${myGlobalParams.indicator_type}"},{"value":"${myGlobalParams.zj}"}],"maxRunNum":"3"}`);
res = JSON.parse(resStr2).data.res.map(m => JSON.parse(m));
res.sort((a, b) => a.NF.localeCompare(b.NF));
res.sort((a, b) => a.LDJC.localeCompare(b.LDJC));
res.sort((a, b) => a.EJDW.localeCompare(b.EJDW));
} else if (myGlobalParams.cardUrl_lx == 2) {
let resStr2 = await $.post(`/api/esb/oa/execute?eventkey=ExecuteMySQL&params={"SQLID":"93","vars":[{"value":"1"},{"value":"${myGlobalParams.compInfo.ID}"},{"value":"${myGlobalParams.feeitem}"}],"maxRunNum":"3"}`);
res = JSON.parse(resStr2).data.res.map(m => JSON.parse(m));
res.sort((a, b) => a.NF.localeCompare(b.NF));
res.sort((a, b) => a.LDJC.localeCompare(b.LDJC));
res.sort((a, b) => a.EJDW.localeCompare(b.EJDW));
} else if (myGlobalParams.cardUrl_lx == 3) {
let resStr2 = await $.post(`/api/esb/oa/execute?eventkey=ExecuteMySQL&params={"SQLID":"94","vars":[{"value":"${myGlobalParams.compInfo.ID}"},{"value":"${myGlobalParams.indicator_type}"},{"value":"${myGlobalParams.feeitem}"}],"maxRunNum":"3"}`);
res = JSON.parse(resStr2).data.res.map(m => JSON.parse(m));
res.sort((a, b) => a.NF.localeCompare(b.NF));
res.sort((a, b) => a.LDJC.localeCompare(b.LDJC));
res.sort((a, b) => a.EJDW.localeCompare(b.EJDW));
} else {
let resStr2 = await $.post(`/api/esb/oa/execute?eventkey=ExecuteMySQL&params={"SQLID":"89","vars":[{"value":"${myGlobalParams.compInfo.ID}"},{"value":"${myGlobalParams.zj}"}],"maxRunNum":"3"}`);
res = JSON.parse(resStr2).data.res.map(m => JSON.parse(m));
res.sort((a, b) => a.NF.localeCompare(b.NF));
res.sort((a, b) => a.LDJC.localeCompare(b.LDJC));
res.sort((a, b) => a.EJDW.localeCompare(b.EJDW));
}
if (myGlobalParams.options.series) {
let data = getData(res, myGlobalParams.compInfo);
myGlobalParams.options.data = data;
} else {
let { series, data } = getDataAndSeries(res, myGlobalParams.compInfo);
myGlobalParams.options.data = data;
myGlobalParams.options.series = series;
}
}
function getData(data, companyInfo_GD) {
if (['1', '3'].includes(myGlobalParams.cardUrl_lx)) {
let res2 = [];
let totalMap = new Map();
let secTotalMap = new Map();
let yKey;
data.forEach((di, index) => {
if (companyInfo_GD.CJ == 1) {
if (secTotalMap.has(di.EJDW)) {
if (secTotalMap.get(di.EJDW).has(di.NF)) {
secTotalMap.get(di.EJDW).get(di.NF).set('fee', (secTotalMap.get(di.EJDW).get(di.NF).get('fee') || 0) + di.FY * 1);
secTotalMap.get(di.EJDW).get(di.NF).set('ldcd', (secTotalMap.get(di.EJDW).get(di.NF).get('ldcd') || 0) + di.CD * 1);
} else {
secTotalMap.get(di.EJDW).set(di.NF, new Map([['fee', di.FY * 1], ['ldcd', di.CD * 1]]));
}
} else {
secTotalMap.set(di.EJDW, new Map([[di.NF, new Map([['fee', di.FY * 1], ['ldcd', di.CD * 1]])]]));
}
}
if (totalMap.has(di.NF)) {
totalMap.get(di.NF).set('fee', (totalMap.get(di.NF).get('fee') || 0) + di.FY * 1);
totalMap.get(di.NF).set('ldcd', (totalMap.get(di.NF).get('ldcd') || 0) + di.CD * 1);
} else {
totalMap.set(di.NF, new Map([['fee', di.FY * 1], ['ldcd', di.CD * 1]]));
}
yKey = myGlobalParams.options.series.find(f => f.yName == di.LDJC).yKey;
res2.push(
{
year: di.NF,
[yKey]: di.ZBZ * 1,
}
);
});
let totalInd = [];
totalMap.forEach((value, key) => {
if (value.get('ldcd') != 0) {
totalInd.push({
year: key,
total: Math.round(value.get('fee') / value.get('ldcd') * 100) / 100,
});
}
});
totalInd.sort((a, b) => a.year.localeCompare(b.year));
if (companyInfo_GD.CJ == 1) {
secTotalMap.forEach((value, key) => {
let secTotalInd = [];
let yKeyi = myGlobalParams.options.series.find(f => f.yName == key).yKey;
value.forEach((v, k) => {
if (v.get('ldcd') != 0) {
secTotalInd.push({
year: k,
[yKeyi]: Math.round(v.get('fee') / v.get('ldcd') * 100) / 100,
});
}
});
secTotalInd.sort((a, b) => a.year.localeCompare(b.year));
totalInd = totalInd.concat(secTotalInd);
});
}
return totalInd.concat(res2);
} else if (['0', '2'].includes(myGlobalParams.cardUrl_lx)) {
let res2 = [];
let totalMap = new Map();
let secTotalMap = new Map();
let yKey;
data.forEach((di, index) => {
if (companyInfo_GD.CJ == 1) {
if (secTotalMap.has(di.EJDW)) {
secTotalMap.get(di.EJDW).set(di.NF, (secTotalMap.get(di.EJDW).get(di.NF) || 0) + di.FY * 1);
} else {
secTotalMap.set(di.EJDW, new Map([[di.NF, di.FY * 1]]));
}
}
totalMap.set(di.NF, (totalMap.get(di.NF) || 0) + di.FY * 1);
yKey = myGlobalParams.options.series.find(f => f.yName == di.LDJC).yKey;
res2.push(
{
year: di.NF,
[yKey]: di.FY * 1,
}
);
});
let totalFee = [];
totalMap.forEach((value, key) => {
totalFee.push({
year: key,
total: value,
});
});
totalFee.sort((a, b) => a.year.localeCompare(b.year));
if (companyInfo_GD.CJ == 1) {
secTotalMap.forEach((value, key) => {
let secTotalFee = [];
let yKeyi = myGlobalParams.options.series.find(f => f.yName == key).yKey;
value.forEach((v, k) => {
secTotalFee.push({
year: k,
[yKeyi]: v,
});
});
secTotalFee.sort((a, b) => a.year.localeCompare(b.year));
totalFee = totalFee.concat(secTotalFee);
});
}
return totalFee.concat(res2);
}
}
function getDataAndSeries(data, companyInfo_GDS) {
if (['1', '3'].includes(myGlobalParams.cardUrl_lx)) {
let res1 = [];
let res2 = [];
let lds = [];
let totalMap = new Map();
let secTotalMap = new Map();
let yKey;
data.forEach((di, index) => {
if (companyInfo_GDS.CJ == 1) {
if (secTotalMap.has(di.EJDW)) {
if (secTotalMap.get(di.EJDW).has(di.NF)) {
secTotalMap.get(di.EJDW).get(di.NF).set('fee', (secTotalMap.get(di.EJDW).get(di.NF).get('fee') || 0) + di.FY * 1);
secTotalMap.get(di.EJDW).get(di.NF).set('ldcd', (secTotalMap.get(di.EJDW).get(di.NF).get('ldcd') || 0) + di.CD * 1);
} else {
secTotalMap.get(di.EJDW).set(di.NF, new Map([['fee', di.FY * 1], ['ldcd', di.CD * 1]]));
}
} else {
secTotalMap.set(di.EJDW, new Map([[di.NF, new Map([['fee', di.FY * 1], ['ldcd', di.CD * 1]])]]));
}
}
if (totalMap.has(di.NF)) {
totalMap.get(di.NF).set('fee', (totalMap.get(di.NF).get('fee') || 0) + di.FY * 1);
totalMap.get(di.NF).set('ldcd', (totalMap.get(di.NF).get('ldcd') || 0) + di.CD * 1);
} else {
totalMap.set(di.NF, new Map([['fee', di.FY * 1], ['ldcd', di.CD * 1]]));
}
if (!lds.includes(di.LDJC)) {
yKey = `fee${lds.length}`;
lds.push(di.LDJC);
res1.push(
{
type: "line",
yKey: yKey,
yName: di.LDJC,
xKey: "year",
interpolation: { type: "smooth" },
visible: false,
}
);
} else {
yKey = `fee${lds.indexOf(di.LDJC)}`;
}
res2.push(
{
year: di.NF,
[yKey]: di.ZBZ * 1,
}
);
});
res1.sort((a, b) => a.yName.localeCompare(b.yName));
if (res1.length == 1) {
res1[0].visible = true;
return { series: res1, data: res2 };
}
let totalItem = [{
type: "line",
yKey: 'total',
yName: companyInfo_GDS.JC,
xKey: "year",
interpolation: { type: "smooth" },
visible: true,
}];
let totalInd = [];
totalMap.forEach((value, key) => {
if (value.get('ldcd') != 0) {
totalInd.push({
year: key,
total: Math.round(value.get('fee') / value.get('ldcd') * 100) / 100,
});
}
});
totalInd.sort((a, b) => a.year.localeCompare(b.year));
if (companyInfo_GDS.CJ == 1) {
let item = 0;
secTotalMap.forEach((value, key) => {
let secTotalInd = [];
item++;
let yKeyi = `total${item}`;
totalItem.push({
type: "line",
yKey: yKeyi,
yName: key,
xKey: "year",
interpolation: { type: "smooth" },
visible: false,
});
value.forEach((v, k) => {
if (v.get('ldcd') != 0) {
secTotalInd.push({
year: k,
[yKeyi]: Math.round(v.get('fee') / v.get('ldcd') * 100) / 100,
});
}
});
secTotalInd.sort((a, b) => a.year.localeCompare(b.year));
totalInd = totalInd.concat(secTotalInd);
});
}
return { series: totalItem.concat(res1), data: totalInd.concat(res2) };
} else {
let res1 = [];
let res2 = [];
let lds = [];
let totalMap = new Map();
let secTotalMap = new Map();
let yKey;
data.forEach((di, index) => {
if (companyInfo_GDS.CJ == 1) {
if (secTotalMap.has(di.EJDW)) {
secTotalMap.get(di.EJDW).set(di.NF, (secTotalMap.get(di.EJDW).get(di.NF) || 0) + di.FY * 1);
} else {
secTotalMap.set(di.EJDW, new Map([[di.NF, di.FY * 1]]));
}
}
totalMap.set(di.NF, (totalMap.get(di.NF) || 0) + di.FY * 1);
if (!lds.includes(di.LDJC)) {
yKey = `fee${lds.length}`;
lds.push(di.LDJC);
res1.push(
{
type: "line",
yKey: yKey,
yName: di.LDJC,
xKey: "year",
interpolation: { type: "smooth" },
visible: false,
}
);
} else {
yKey = `fee${lds.indexOf(di.LDJC)}`;
}
res2.push(
{
year: di.NF,
[yKey]: di.FY * 1,
}
);
});
res1.sort((a, b) => a.yName.localeCompare(b.yName));
if (res1.length == 1) {
res1[0].visible = true;
return { series: res1, data: res2 };
}
let totalItem = [{
type: "line",
yKey: 'total',
yName: companyInfo_GDS.JC,
xKey: "year",
interpolation: { type: "smooth" },
visible: true,
}];
let totalFee = [];
totalMap.forEach((value, key) => {
totalFee.push({
year: key,
total: value,
});
});
totalFee.sort((a, b) => a.year.localeCompare(b.year));
if (companyInfo_GDS.CJ == 1) {
let item = 0;
secTotalMap.forEach((value, key) => {
let secTotalFee = [];
item++;
let yKeyi = `total${item}`;
totalItem.push({
type: "line",
yKey: yKeyi,
yName: key,
xKey: "year",
interpolation: { type: "smooth" },
visible: false,
});
value.forEach((v, k) => {
secTotalFee.push({
year: k,
[yKeyi]: v,
});
});
secTotalFee.sort((a, b) => a.year.localeCompare(b.year));
totalFee = totalFee.concat(secTotalFee);
});
}
return { series: totalItem.concat(res1), data: totalFee.concat(res2) };
}
}
function axesYValueFormatterTT({ value }) {
if (value < 10000) {
return Number(value).toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
}
return `${(Number(value) / 10000).toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
})}万`;
}
function axesYValueFormatterSD({ value }) {
return Number(value).toLocaleString('zh-CN', {
minimumFractionDigits: 0,
maximumFractionDigits: 0,
});
}
</script>
<style type="text/css">
/* 隐藏右键菜单 */
.wea-right-menu-show {
display: none !important;
}
.wea-browser {
max-width: 100% !important;
}
.noDisplay {
display: none !important;
}
/* 扩展mask样式的适应性(如QQ浏览器) */
.ag-charts-icon {
-webkit-mask-image: var(--icon);
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
}
</style>

20
src/App.tsx
View File

@ -14,7 +14,7 @@ import { AG_CHARTS_LOCALE_ZH_CN } from 'ag-charts-locale';
LicenseManager.setLicenseKey('[v3][RELEASE][0102]_NDg2Njc4MzY3MDgzNw==16d78ca762fb5d2ff740aed081e2af7b');
ModuleRegistry.registerModules([AnnotationsModule, ContextMenuModule, ZoomModule, CrosshairModule]);
const API_BASE_URL = 'http://127.0.0.1:9089/api/v1';
const API_BASE_URL = 'https://nest.zwgczx.com/api/v1';
const statisticOptions = [
{ key: 'minValue', label: '最低值', shortLabel: '低' },
@ -365,9 +365,6 @@ function App() {
);
const getNodeColor = (contentKey: ContentKey, nodeId: string) => {
const selectedIndex = selectedContentNodes.findIndex((node) => node.contentKey === contentKey && node.id === nodeId);
if (selectedIndex >= 0) return selectedContentNodes[selectedIndex].color;
let hash = 0;
const key = getSelectionKey(contentKey, nodeId);
for (let index = 0; index < key.length; index += 1) {
@ -506,8 +503,7 @@ function App() {
return current.filter((_, index) => index !== existingIndex);
}
const usedColors = new Set(current.map((item) => item.color));
const color = chartLineColors.find((item) => !usedColors.has(item)) ?? chartLineColors[current.length % chartLineColors.length];
const color = getNodeColor(contentKey, node.id);
return [...current, { id: node.id, contentKey, label: node.label, color }];
});
};
@ -588,7 +584,6 @@ function App() {
} catch (error) {
if (controller.signal.aborted) return;
setLoadError(error instanceof Error ? error.message : '接口请求失败');
setChartDataBySelection({});
} finally {
if (!controller.signal.aborted) {
setLoading(false);
@ -601,7 +596,7 @@ function App() {
return () => {
controller.abort();
};
}, [chartDataBySelection, chartQueryVersion, groupKey, metricKey, selectedContentNodes]);
}, [chartQueryVersion, groupKey, metricKey, selectedContentNodes]);
useEffect(() => {
const frame = chartFrameRef.current;
@ -785,6 +780,11 @@ function App() {
enabled: true,
items: ['defaults'],
},
overlays: {
noData: {
text: '请选择右侧分类项',
},
},
annotations: {
enabled: true,
toolbar: {
@ -969,9 +969,7 @@ function App() {
</div>
) : null}
</div>
{loading || loadError || selectedContentNodes.length === 0 ? (
<div className="chart-status">{loading ? '加载中' : loadError || '请选择右侧分类项'}</div>
) : null}
{loading || loadError ? <div className="chart-status">{loading ? '加载中' : loadError}</div> : null}
<button className="chart-fullscreen-button ag-charts-toolbar__button" type="button" title="全屏(F11)">
<i className="anticon anticon-arrow-salt ag-charts-myButton-fullScreen ag-charts-diy-button" />
</button>

15
vite-dev.log
View File

@ -98,3 +98,18 @@ Port 5173 is in use, trying another one...
15:54:29 [vite] (client) hmr update /src/styles.css
16:29:28 [vite] (client) hmr update /src/App.tsx
16:29:37 [vite] (client) hmr update /src/App.tsx
17:53:09 [vite] (client) hmr update /src/App.tsx
17:53:24 [vite] (client) hmr update /src/styles.css
17:54:53 [vite] (client) hmr update /src/App.tsx
17:55:03 [vite] (client) hmr update /src/styles.css
18:10:22 [vite] (client) hmr update /src/App.tsx
09:43:29 [vite] (client) page reload zbChart/index.html
09:43:43 [vite] (client) page reload demo.html
09:44:24 [vite] (client) hmr update /src/App.tsx
09:47:32 [vite] (client) hmr update /src/App.tsx
09:56:50 [vite] (client) hmr update /src/App.tsx
10:03:05 [vite] (client) hmr update /src/App.tsx
10:04:28 [vite] (client) hmr update /src/App.tsx
10:04:35 [vite] (client) hmr update /src/styles.css
10:06:06 [vite] (client) hmr update /src/App.tsx
10:06:25 [vite] (client) hmr update /src/styles.css

42
zbChart/assets/index-BBo2g0gG.js
View File

File diff suppressed because one or more lines are too long

1
zbChart/assets/index-hvfQ0T_3.css
View File

File diff suppressed because one or more lines are too long

13
zbChart/index.html
View File

@ -1,13 +0,0 @@
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AG Chart Service</title>
<script type="module" crossorigin src="/assets/index-BBo2g0gG.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-hvfQ0T_3.css">
</head>
<body>
<div id="root"></div>
</body>
</html>