aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

Browse Source
This commit is contained in:
zhangyh
2025-11-20 13:47:53 +08:00
parent e6d657eaf1 2249bf614f
commit 4b2553fa10
6 changed files with 459 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

427
public/sketch_bar_chart.html Normal file
View File

@@ -0,0 +1,427 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>style category</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
background-color: #f9f9f9;
}
.viewport {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background-color: #f9f9f9;
cursor: grab;
scrollbar-width: thick;
scrollbar-color: #666 #eee;
}
.viewport::-webkit-scrollbar {
height: 16px;
width: 16px;
}
.viewport::-webkit-scrollbar-track {
background: #eee;
border-radius: 8px;
}
.viewport::-webkit-scrollbar-thumb {
background: #666;
border-radius: 8px;
border: 3px solid #eee;
}
.viewport::-webkit-scrollbar-thumb:hover {
background: #333;
}
.content-size {
position: relative;
width: 100%;
height: 100%;
}
.content {
padding: 30px;
transform-origin: top left;
width: max-content;
min-width: 100%;
}
h1 {
text-align: center;
font-size: 100px;
margin: 40px 0 60px;
font-weight: bold;
color: #333;
}
.chart-section {
margin-bottom: 80px;
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
h2 {
text-align: center;
font-size: 80px;
margin: 0 0 40px;
font-weight: bold;
color: #444;
}
.chart-container {
overflow-x: auto;
width: 100%;
min-width: 8000px; /* 适配20倍组间空隙，大幅扩大容器宽度 */
min-height: 1900px;
scrollbar-width: thick;
scrollbar-color: #666 #eee;
padding-bottom: 100px;
}
/* 自定义滚动条 */
.chart-container::-webkit-scrollbar {
height: 16px;
}
.chart-container::-webkit-scrollbar-track {
background: #eee;
border-radius: 8px;
}
.chart-container::-webkit-scrollbar-thumb {
background: #666;
border-radius: 8px;
border: 3px solid #eee;
}
.chart-container::-webkit-scrollbar-thumb:hover {
background: #333;
}
canvas {
width: 100%;
height: 1800px !important;
background: #fff;
border: 2px solid #ddd;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
/* 响应式调整：保持默认缩放30%，不额外调整 */
@media (max-width: 1200px) {
.chart-container {
min-height: 1900px;
}
canvas {
height: 1800px !important;
}
h1 {
font-size: 48px;
}
h2 {
font-size: 36px;
}
}
</style>
<!-- 禁止页面缩放的meta标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="viewport" class="viewport">
<div id="content-size" class="content-size">
<div id="content" class="content">
<h1>style category</h1>
<div class="chart-section">
<h2>1. ALL </h2>
<div class="chart-container">
<canvas id="chartAll"></canvas>
</div>
</div>
<div class="chart-section">
<h2>2. Male </h2>
<div class="chart-container">
<canvas id="chartMale"></canvas>
</div>
</div>
<div class="chart-section">
<h2>3. Female </h2>
<div class="chart-container">
<canvas id="chartFemale"></canvas>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const viewport = document.getElementById('viewport');
const content = document.getElementById('content');
const contentSize = document.getElementById('content-size');
let MIN_SCALE = 1;
const MAX_SCALE = 3;
let scale = 1;
function computeMinScale() {
const cw = content.offsetWidth;
const vw = viewport.clientWidth;
if (!cw || !vw) return 1;
return Math.min(MAX_SCALE, Math.max(0.2, vw / cw));
}
function updateWrapperSize() {
const w = content.offsetWidth * scale;
const h = content.offsetHeight * scale;
contentSize.style.width = w + 'px';
contentSize.style.height = h + 'px';
}
function applyScale(newScale, ax, ay) {
const prev = scale;
const target = Math.max(MIN_SCALE, Math.min(MAX_SCALE, newScale));
if (target === prev) return;
const ratio = target / prev;
const rect = viewport.getBoundingClientRect();
const anchorX = ax != null ? ax : viewport.scrollLeft + viewport.clientWidth / 2;
const anchorY = ay != null ? ay : viewport.scrollTop + viewport.clientHeight / 2;
scale = target;
content.style.transform = 'scale(' + scale + ')';
updateWrapperSize();
let newLeft = anchorX * ratio - viewport.clientWidth / 2;
let newTop = anchorY * ratio - viewport.clientHeight / 2;
const maxLeft = Math.max(0, contentSize.scrollWidth - viewport.clientWidth);
const maxTop = Math.max(0, contentSize.scrollHeight - viewport.clientHeight);
viewport.scrollLeft = Math.max(0, Math.min(maxLeft, newLeft));
viewport.scrollTop = Math.max(0, Math.min(maxTop, newTop));
}
function initScale() {
MIN_SCALE = computeMinScale();
scale = MIN_SCALE;
content.style.transform = 'scale(' + scale + ')';
updateWrapperSize();
}
initScale();
let dragging = false;
let sx = 0, sy = 0, sl = 0, st = 0;
viewport.addEventListener('mousedown', function(e) {
if (e.button !== 0) return;
dragging = true;
viewport.style.cursor = 'grabbing';
sx = e.clientX;
sy = e.clientY;
sl = viewport.scrollLeft;
st = viewport.scrollTop;
});
window.addEventListener('mousemove', function(e) {
if (!dragging) return;
viewport.scrollLeft = sl - (e.clientX - sx);
viewport.scrollTop = st - (e.clientY - sy);
});
window.addEventListener('mouseup', function() {
dragging = false;
viewport.style.cursor = '';
});
viewport.addEventListener('wheel', function(e) {
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
const factor = e.deltaY < 0 ? 1.1 : 0.9;
const rect = viewport.getBoundingClientRect();
const ax = viewport.scrollLeft + (e.clientX - rect.left);
const ay = viewport.scrollTop + (e.clientY - rect.top);
const next = scale * factor;
applyScale(next < MIN_SCALE ? MIN_SCALE : next, ax, ay);
}
}, { passive: false });
window.addEventListener('resize', function() {
const prevMin = MIN_SCALE;
MIN_SCALE = computeMinScale();
if (scale < MIN_SCALE) {
applyScale(MIN_SCALE);
} else {
updateWrapperSize();
}
});
window.addEventListener('load', function() {
initScale();
});
});
// 共用配置 - 保持原有标签处理逻辑（下划线换行）
const labels = [
'ACADEMIC','BUSINESS','CASUAL','COUNTRY_STYLE','DOPAMINE','ETHNIC','FUTURISM',
'GOTHIC','LOLITA','MERLAD','MINIMALISM','NEW_CHINESE','OUTDOOR_FUNCTIONAL',
'POST_APOCALYPTIC','PREPPY','ROCK','ROMANTIC','SEXY','SWEET','WABI_SABI','Y2K','民族风'
].map(label => label.replace('_', '\n'));
// 所有数据（保持更新后的数值）
const allData = {
male_tops: [0,686,638,491,128,11,366,35,0,20,313,126,359,166,385,187,6,3,3,219,282,0],
male_bottoms: [0,280,199,141,132,1,43,49,0,13,178,93,279,10,96,25,0,5,0,163,239,0],
male_outwear: [0,2442,2147,1245,161,19,671,216,0,58,471,168,1001,319,803,367,11,1,1,278,631,0],
female_dress: [260,1030,4322,1158,256,0,397,340,488,279,1104,312,215,170,0,223,990,607,1438,293,292,159],
female_skirt: [408,662,1177,633,214,0,381,280,278,308,358,200,297,209,0,231,584,233,714,246,385,95],
female_blouse: [618,1275,3786,710,385,0,533,412,454,453,616,221,852,181,0,437,869,533,899,336,991,169],
female_outwear: [267,1255,740,453,178,0,418,160,101,301,273,172,712,172,0,245,198,13,159,280,500,76],
female_trousers: [171,782,1899,391,232,0,267,64,137,293,351,141,865,101,0,189,654,137,319,299,427,96]
};
// 颜色配置（保持原有颜色）
const colors = {
male_tops: '#1f77b4',
male_bottoms: '#ff7f0e',
male_outwear: '#2ca02c',
female_dress: '#d62728',
female_skirt: '#9467bd',
female_blouse: '#8c564b',
female_outwear: '#e377c2',
female_trousers: '#7f7f7f'
};
// 图表基础配置 - 核心修改：categoryPercentage设为0.04（原0.8的1/20），扩大组间空隙20倍
const baseChartConfig = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
font: { size: 60, weight: 'bold' },
padding: 60,
boxWidth: 60
},
padding: { bottom: 60 }
},
tooltip: {
mode: 'index',
intersect: false,
padding: 30,
titleFont: { size: 60 },
bodyFont: { size: 42 },
boxPadding: 20,
cornerRadius: 12
}
},
scales: {
x: {
stacked: false,
title: {
display: true,
text: '',
font: { size: 1, weight: 'bold' },
padding: { top: 1, bottom: 1 }
},
ticks: {
maxRotation: 0, // 保持原有斜放角度（向左下45度）
minRotation: 0, // 强制固定角度
autoSkip: false,
font: { size: 28, weight: 'bold' },
padding: 150,
color: '#333',
lineHeight: 1.3,
align: 'right' // 斜放标签右对齐，提升可读性
},
grid: { display: false },
border: { width: 3 },
categoryPercentage: 0.5, // 核心修改：原0.8 → 0.04，组间空隙扩大20倍
barPercentage: 0.8, // 保持组内柱子宽度不变
},
y: {
beginAtZero: true,
title: {
display: true,
text: '',
font: { size: 1, weight: 'bold' },
padding: { right: 1 }
},
ticks: {
font: { size: 33, weight: 'bold' },
padding: 30,
color: '#333',
stepSize: 500 // 适配更大数值范围
},
grid: { color: '#e0e0e0', lineWidth: 3 },
border: { width: 3 }
}
},
layout: {
padding: { top: 60, right: 90, bottom: 100, left: 90 }
},
animation: { duration: 1500, easing: 'easeOutQuart' },
barThickness: 'flex',
maxBarThickness: 70,
minBarLength: 5
};
// 1. 创建综合图表
new Chart(document.getElementById('chartAll'), {
type: 'bar',
data: {
labels: labels,
datasets: Object.keys(allData).map(key => ({
label: key,
data: allData[key],
backgroundColor: colors[key]
}))
},
options: { ...baseChartConfig }
});
// 2. 创建男性分类图表
new Chart(document.getElementById('chartMale'), {
type: 'bar',
data: {
labels: labels,
datasets: [
{ label: 'male_tops', data: allData.male_tops, backgroundColor: colors.male_tops },
{ label: 'male_bottoms', data: allData.male_bottoms, backgroundColor: colors.male_bottoms },
{ label: 'male_outwear', data: allData.male_outwear, backgroundColor: colors.male_outwear }
]
},
options: {
...baseChartConfig,
scales: {
...baseChartConfig.scales,
x: {
...baseChartConfig.scales.x,
categoryPercentage: 0.35
},
y: {
...baseChartConfig.scales.y,
stepSize: 800 // 适配男性外套最大值2442
}
}
}
});
// 3. 创建女性分类图表
new Chart(document.getElementById('chartFemale'), {
type: 'bar',
data: {
labels: labels,
datasets: [
{ label: 'female_dress', data: allData.female_dress, backgroundColor: colors.female_dress },
{ label: 'female_skirt', data: allData.female_skirt, backgroundColor: colors.female_skirt },
{ label: 'female_blouse', data: allData.female_blouse, backgroundColor: colors.female_blouse },
{ label: 'female_outwear', data: allData.female_outwear, backgroundColor: colors.female_outwear },
{ label: 'female_trousers', data: allData.female_trousers, backgroundColor: colors.female_trousers }
]
},
options: {
...baseChartConfig,
scales: {
...baseChartConfig.scales,
x: {
...baseChartConfig.scales.x,
categoryPercentage: 0.28
},
y: {
...baseChartConfig.scales.y,
stepSize: 1000 // 适配女性连衣裙最大值4322
}
}
}
});
</script>
</body>
</html>

2
src/component/home/index.vue
View File

@@ -226,7 +226,7 @@ export default defineComponent({
storeData.positionList = position
store.commit('setProbject',storeData)
// setChatData()
if(route.name == 'tools'){
if(route.name == 'toolsPage'){
getCollection('tools',null)
}else{
getCollection('design',null)

9
src/component/home/newProject/workspace.vue
View File

@@ -84,7 +84,7 @@
</div>
</div>
<div class="complete">
<div class="gallery_btn" style="padding: 0rem 2.2rem; line-height: 4.5rem;font-weight: 500;" @click="complete">{{ sourceType == 'edit' ? $t('HomeView.Save') : $t('HomeView.Start')}}</div>
<div class="gallery_btn" style="padding: 0rem 2.2rem; line-height: 4.5rem;font-weight: 500;" @click="complete(sourceType)">{{ sourceType == 'edit' ? $t('HomeView.Save') : $t('HomeView.Start')}}</div>
</div>
</div>
<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
@@ -201,12 +201,11 @@ export default defineComponent({
const formatterBrandDNA = (value: number)=>{
return `${value}%`;
}
const complete = ()=>{
const complete = (sourceType)=>{
// if(!data.selectObject.name){
// message.info(t('PrintboardUpload.jsContent7'))
// return
// }
console.log(data.selectObject)
let value = {
name:data.selectObject.name,
process:props.httpWorkflowType,
@@ -227,6 +226,10 @@ export default defineComponent({
}
Https.axiosPost(Https.httpUrls.projectSaveOrUpdate,value).then((rv)=>{
if(rv){
if((sourceType == 'edit' && data.selectObject.id == rv.id) || sourceType != 'edit'){
store.state.Workspace.cachedRoutes = [];
store.commit('setProjectPath','')
}
data.selectObject.id = rv.id
let storeData = {

26
src/component/toolsPage/index.vue
View File

@@ -5,18 +5,24 @@
:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}"
class="toProduct"
:isState="openType =='toProduct'"
v-if="openType == 'toProduct'"
v-if="openType == 'toProduct' || currentProjectPath.includes('toProduct')"
v-show="openType == 'toProduct'"
></toProduct>
<toProduct ref="relight"
:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}"
class="relight"
:isState="openType =='relight'"
v-if="openType == 'relight'"
v-if="openType == 'relight' || currentProjectPath.includes('relight')"
v-show="openType == 'relight'"
></toProduct>
<poseTransfer v-if="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
<deReconstruction v-if="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
<patternMaking3D v-if="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
<canvasUpload v-if="openType == 'canvasUpload'" ref="canvasUpload" @canvasChangeGetJSON="canvasChangeGetJSON" :isSubmitCanvasJSON="true"></canvasUpload>
<poseTransfer v-if="openType == 'poseTransfer' || currentProjectPath.includes('poseTransfer')"
v-show="openType == 'poseTransfer'" ref="poseTransfer"></poseTransfer>
<deReconstruction v-if="openType == 'deReconstruction' || currentProjectPath.includes('deReconstruction')"
v-show="openType == 'deReconstruction'" ref="deReconstruction"></deReconstruction>
<patternMaking3D v-if="openType == 'patternMaking3D' || currentProjectPath.includes('patternMaking3D')"
v-show="openType == 'patternMaking3D'" ref="patternMaking3D"></patternMaking3D>
<canvasUpload v-if="openType == 'canvasUpload' || currentProjectPath.includes('canvasUpload')"
v-show="openType == 'canvasUpload'" ref="canvasUpload" @canvasChangeGetJSON="canvasChangeGetJSON" :isSubmitCanvasJSON="true"></canvasUpload>
</div>
</div>
</template>
@@ -62,7 +68,10 @@ export default defineComponent({
width: 800,
height: 600,
backgroundColor: "#f8f8f8",
}
},
currentProjectPath:computed(() => {
return store.state.Workspace.projectPath
})
})
const dataDom:any = reactive({
toProduct:null as any,
@@ -79,7 +88,6 @@ export default defineComponent({
const setIsShowMark = (boolean:boolean)=>{
data.isShowMark = boolean
}
let settingGetHistory:any = inject('settingGetHistory')
const open = (str:any)=>{
nextTick(()=>{
@@ -92,7 +100,7 @@ export default defineComponent({
(query:any, oldQuery:any) => {
if(oldQuery && query == oldQuery)return
const key = Object.keys(query)?.[0]
if(route.name == 'tools' && key){
if(route.name == 'toolsPage' && key){
data.openType = query[key]
nextTick(()=>{
open(query[key])

2
src/router/index.ts
View File

@@ -67,7 +67,7 @@ const routes: Array<RouteRecordRaw> = [
children: [
{
path: "tools",
name: "tools",
name: "toolsPage",
meta: { enter: "all",cache:true },
component: () => import("@/views/HomeView/Tools.vue"),
},

10
src/views/HomeMain.vue
View File

@@ -779,9 +779,13 @@ export default defineComponent({
}).observe(imgParent)
}
const setRouter = (item, childItem) => {
let itemRouter = item.router
if (childItem.router) itemRouter = itemRouter + '?' + childItem.router
router.push(itemRouter)
if(store.state.Workspace.projectPath.includes(childItem.value)){
router.push(store.state.Workspace.projectPath)
}else{
let itemRouter = item.router
if (childItem.router) itemRouter = itemRouter + '?' + childItem.router
router.push(itemRouter)
}
}
const setHistory = (item, childItem) => {
// router.push(`/home/tools?tools=toProduct&id=${childItem.id}`)