Compare commits

..

8 Commits

13 changed files with 76948 additions and 163136 deletions

3
.idea/misc.xml generated
View File

@@ -3,7 +3,4 @@
<component name="JavaScriptSettings"> <component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" /> <option name="languageLevel" value="ES6" />
</component> </component>
<component name="WebPackConfiguration">
<option name="mode" value="DISABLED" />
</component>
</project> </project>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,119 +0,0 @@
{
"name": "data",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "data",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"xlsx": "^0.18.5"
}
},
"node_modules/adler-32": {
"version": "1.3.1",
"resolved": "https://registry.npmmirror.com/adler-32/-/adler-32-1.3.1.tgz",
"integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/cfb": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/cfb/-/cfb-1.2.2.tgz",
"integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
"license": "Apache-2.0",
"dependencies": {
"adler-32": "~1.3.0",
"crc-32": "~1.2.0"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/codepage": {
"version": "1.15.0",
"resolved": "https://registry.npmmirror.com/codepage/-/codepage-1.15.0.tgz",
"integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/crc-32": {
"version": "1.2.2",
"resolved": "https://registry.npmmirror.com/crc-32/-/crc-32-1.2.2.tgz",
"integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
"license": "Apache-2.0",
"bin": {
"crc32": "bin/crc32.njs"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/frac": {
"version": "1.1.2",
"resolved": "https://registry.npmmirror.com/frac/-/frac-1.1.2.tgz",
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/ssf": {
"version": "0.11.2",
"resolved": "https://registry.npmmirror.com/ssf/-/ssf-0.11.2.tgz",
"integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
"license": "Apache-2.0",
"dependencies": {
"frac": "~1.1.2"
},
"engines": {
"node": ">=0.8"
}
},
"node_modules/wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/wmf/-/wmf-1.0.2.tgz",
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/word": {
"version": "0.3.0",
"resolved": "https://registry.npmmirror.com/word/-/word-0.3.0.tgz",
"integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
"license": "Apache-2.0",
"engines": {
"node": ">=0.8"
}
},
"node_modules/xlsx": {
"version": "0.18.5",
"resolved": "https://registry.npmmirror.com/xlsx/-/xlsx-0.18.5.tgz",
"integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
"license": "Apache-2.0",
"dependencies": {
"adler-32": "~1.3.0",
"cfb": "~1.2.1",
"codepage": "~1.15.0",
"crc-32": "~1.2.1",
"ssf": "~0.11.2",
"wmf": "~1.0.1",
"word": "~0.3.0"
},
"bin": {
"xlsx": "bin/xlsx.njs"
},
"engines": {
"node": ">=0.8"
}
}
}
}

View File

@@ -1,16 +0,0 @@
{
"name": "data",
"version": "1.0.0",
"description": "",
"main": "read-excel.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"dependencies": {
"xlsx": "^0.18.5"
}
}

View File

@@ -1,30 +0,0 @@
const XLSX = require('xlsx');
const fs = require('fs');
const path = require('path');
// Excel文件路径
const excelPath = 'C:\\Users\\chenhaid\\Documents\\WXWork\\1688858118476511\\Cache\\File\\2026-02\\供应商年度KPIv5.xlsx';
// 输出JSON文件路径
const outputPath = path.join(__dirname, 'kpi.json');
// 读取Excel文件
const workbook = XLSX.readFile(excelPath);
// 获取第一个工作表名称
const sheetName = workbook.SheetNames[0];
console.log('工作表列表:', workbook.SheetNames);
// 获取工作表
const worksheet = workbook.Sheets[sheetName];
// 转换为JSON
const jsonData = XLSX.utils.sheet_to_json(worksheet);
console.log('读取到', jsonData.length, '条数据');
console.log('第一条数据示例:', JSON.stringify(jsonData[0], null, 2));
// 写入JSON文件
fs.writeFileSync(outputPath, JSON.stringify(jsonData, null, 2), 'utf8');
console.log('已保存到:', outputPath);

File diff suppressed because it is too large Load Diff

View File

@@ -101,7 +101,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0px 20px 40px; padding: 40px 20px;
position: relative; position: relative;
scroll-snap-align: start; scroll-snap-align: start;
overflow: hidden; overflow: hidden;
@@ -151,12 +151,10 @@
.cover-subtitle { .cover-subtitle {
margin-top: 30px; margin-top: 30px;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.5);
font-size: 1.8em; font-size: 1.1em;
font-weight: bold;
position: relative; position: relative;
z-index: 1; z-index: 1;
text-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
} }
.scroll-hint { .scroll-hint {
@@ -655,9 +653,8 @@
.ending-wish { .ending-wish {
margin-top: 40px; margin-top: 40px;
font-family: 'Orbitron', sans-serif; font-size: 1.2em;
font-size: 1.8em; color: rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.8);
} }
/* 导航点 */ /* 导航点 */
@@ -790,7 +787,7 @@
.ending-wish { font-size: 1em; } .ending-wish { font-size: 1em; }
.nav-dots { display: none; } .nav-dots { display: none; }
.section { padding: 0px 15px 50px; } .section { padding: 50px 15px; }
.back-btn { top: 15px; left: 15px; width: 40px; height: 40px; } .back-btn { top: 15px; left: 15px; width: 40px; height: 40px; }
} }
@@ -880,7 +877,7 @@
.app-usage-value { .app-usage-value {
font-family: 'Orbitron', sans-serif; font-family: 'Orbitron', sans-serif;
font-size: 4em; font-size: 5em;
font-weight: 700; font-weight: 700;
color: #00ff88; color: #00ff88;
line-height: 1; line-height: 1;
@@ -908,14 +905,6 @@
transition: width 1.5s ease; transition: width 1.5s ease;
width: 0%; width: 0%;
} }
.imgTopLogo {
width: 45%;
position: fixed;
z-index: 100000;
right: 20px;
top: 20px;
opacity: 0.8;
}
</style> </style>
</head> </head>
@@ -939,7 +928,6 @@
<!-- 主内容 --> <!-- 主内容 -->
<div id="mainContent" style="display: none;"> <div id="mainContent" style="display: none;">
<img src="./static/logo_top.png" class="imgTopLogo" alt="">
<!-- 粒子背景 --> <!-- 粒子背景 -->
<canvas id="particles"></canvas> <canvas id="particles"></canvas>
@@ -968,62 +956,74 @@
<!-- 总案件量 --> <!-- 总案件量 -->
<section class="section"> <section class="section">
<!-- <div class="section-label fade-in">TOTAL CASES</div>--> <div class="section-label fade-in">TOTAL CASES</div>
<h2 class="section-title fade-in">2025年共处理了</h2> <h2 class="section-title fade-in">这一年,我们共处理了</h2>
<div class="big-stat fade-in"> <div class="big-stat fade-in">
<div class="big-stat-number" id="totalCases">0</div> <div class="big-stat-number" id="totalCases">0</div>
<div class="big-stat-unit">个案件</div> <div class="big-stat-unit">个案件</div>
</div> </div>
<!-- <div class="donut-container fade-in" id="donutContainer"></div>--> <div class="donut-container fade-in" id="donutContainer"></div>
</section> </section>
<!-- 聚合案件 --> <!-- 聚合案件 -->
<section class="section"> <section class="section">
<!-- <div class="section-label fade-in">AGGREGATED CASES</div>--> <div class="section-label fade-in">AGGREGATED CASES</div>
<h2 class="section-title fade-in">在线聚合为您带来了</h2> <h2 class="section-title fade-in">年度聚合案件量</h2>
<div class="time-card fade-in"> <div class="time-card fade-in">
<!-- <div class="time-icon">📦</div>--> <div class="time-icon">📦</div>
<div class="time-value" id="aggregatedCases">0</div> <div class="time-value" id="aggregatedCases">0</div>
<div class="big-stat-unit">聚合量</div> <div class="big-stat-unit"></div>
<div class="time-desc" id="aggregatedDesc"> <div class="time-desc" id="aggregatedDesc">
占总案件量的 <span class="highlight">0%</span><br> 占总案件量的 <span class="highlight">0%</span><br>
<!-- 平均每月聚合 <span class="highlight">0</span> 个案件--> 平均每月聚合 <span class="highlight">0</span> 个案件
</div> </div>
</div> </div>
</section> </section>
<!-- 案件量TOP3 --> <!-- 案件量TOP3 -->
<section class="section rank-section"> <section class="section rank-section">
<!-- <div class="section-label fade-in">TOP PERFORMERS</div>--> <div class="section-label fade-in">TOP PERFORMERS</div>
<h2 class="section-title fade-in">年度案件量 TOP 3 师傅</h2> <h2 class="section-title fade-in">年度案件量 TOP 3 师傅</h2>
<div class="podium fade-in" id="podium"></div> <div class="podium fade-in" id="podium"></div>
<!-- <p class="fade-in" id="top3Summary" style="margin-top: 40px; color: rgba(255,255,255,0.5);"></p>--> <p class="fade-in" id="top3Summary" style="margin-top: 40px; color: rgba(255,255,255,0.5);"></p>
</section> </section>
<!-- 在线时长 --> <!-- 在线时长 -->
<section class="section wave-section"> <section class="section wave-section">
<div class="section-label fade-in">ONLINE DURATION</div> <div class="section-label fade-in">ONLINE DURATION</div>
<h2 class="section-title fade-in">车辆日均在线时长</h2> <h2 class="section-title fade-in">车辆平均总在线时长</h2>
<div class="big-stat fade-in"> <div class="big-stat fade-in">
<div class="big-stat-number" id="avgOnlineHours">0</div> <div class="big-stat-number" id="avgOnlineHours">0</div>
<div class="big-stat-unit">小时</div> <div class="big-stat-unit">小时</div>
<div class="big-stat-desc" id="onlineDesc">相当于 <span class="highlight">0</span> 天 · 日均在线 <span class="highlight">0</span> 小时</div>
</div> </div>
<div class="bar-chart fade-in" id="barChart"></div>
</section> </section>
<!-- 拒单率警示 --> <!-- 拒单率警示 -->
<section class="section alert-section"> <section class="section alert-section">
<div class="section-label fade-in" style="color: #ff6b6b;">ATTENTION</div> <div class="section-label fade-in" style="color: #ff6b6b;">ATTENTION</div>
<h2 class="section-title fade-in">未接单损失TOP3地区</h2> <h2 class="section-title fade-in">需要关注的数据</h2>
<div class="bar-chart fade-in" id="rejectionBarChart"> <div class="alert-grid fade-in">
<!-- 动态渲染拒单TOP3地区柱状图 --> <div class="alert-card">
<div class="alert-icon">📍</div>
<div class="alert-title">拒单率最高地区</div>
<div class="alert-value" id="rejectionRegion">-</div>
<div class="alert-desc">拒单率达 <span style="color: #ff6b6b; font-weight: bold;" id="rejectionRate">0%</span></div>
</div>
<div class="alert-card">
<div class="alert-icon">🕐</div>
<div class="alert-title">拒单率最高时段</div>
<div class="alert-value" id="rejectionTimeSlot">-</div>
<div class="alert-desc" id="rejectionTimeDesc">时段描述</div>
</div>
</div> </div>
<p class="fade-in" id="totalLossSummary" style="margin-top: 40px; color: rgba(255,255,255,0.8); font-size: 0.8em;"></p>
</section> </section>
<!-- APP使用率 --> <!-- APP使用率 -->
<section class="section compare-section"> <section class="section compare-section">
<div class="section-label fade-in">APP USAGE</div> <div class="section-label fade-in">APP USAGE</div>
<h2 class="section-title fade-in" style="font-size: 1.2em">使用APP,操作更方便,结算更快捷!</h2> <h2 class="section-title fade-in">APP 使用率</h2>
<div class="app-usage-container fade-in"> <div class="app-usage-container fade-in">
<div class="app-usage-card"> <div class="app-usage-card">
<div class="app-usage-icon">📱</div> <div class="app-usage-icon">📱</div>
@@ -1032,12 +1032,9 @@
<div class="app-usage-bar"> <div class="app-usage-bar">
<div class="app-usage-fill" id="appUsageFill"></div> <div class="app-usage-fill" id="appUsageFill"></div>
</div> </div>
<div class="app-usage-rank" id="appUsageRank" style="margin-top: 20px; font-size: 1.1em; color: rgba(255,255,255,0.8);">
APP排名超过了 <span class="highlight" id="appRankPercent">0%</span> 的客户
</div>
</div> </div>
</div> </div>
<!-- <p class="fade-in" id="appUsageDesc" style="margin-top: 40px; color: rgba(255,255,255,0.5);"></p>--> <p class="fade-in" id="appUsageDesc" style="margin-top: 40px; color: rgba(255,255,255,0.5);"></p>
</section> </section>
<!-- 结尾 --> <!-- 结尾 -->
@@ -1048,7 +1045,7 @@
让我们一起迎接更好的<br> 让我们一起迎接更好的<br>
<span class="ending-year">2026</span> <span class="ending-year">2026</span>
</div> </div>
<div class="ending-wish fade-in">优质服务,共享成果</div> <div class="ending-wish fade-in">砥砺前行 · 再创辉煌</div>
</section> </section>
</div> </div>
@@ -1057,7 +1054,9 @@
let excelData = { let excelData = {
kpi: [], kpi: [],
casesTop3: [], casesTop3: [],
rejectionRegion: [] onlineTop3: [],
rejectionRegion: [],
rejectionTime: []
}; };
let currentProvider = null; let currentProvider = null;
@@ -1093,15 +1092,19 @@
try { try {
// 并行加载所有JSON文件 // 并行加载所有JSON文件
const [kpi, casesTop3, rejectionRegion] = await Promise.all([ const [kpi, casesTop3, onlineTop3, rejectionRegion, rejectionTime] = await Promise.all([
loadJsonFile('data/kpi.json'), loadJsonFile('data/kpi.json'),
loadJsonFile('data/cases_top3.json'), loadJsonFile('data/cases_top3.json'),
loadJsonFile('data/rejection_region.json') loadJsonFile('data/online_top3.json'),
loadJsonFile('data/rejection_region.json'),
loadJsonFile('data/rejection_time.json')
]); ]);
excelData.kpi = kpi; excelData.kpi = kpi;
excelData.casesTop3 = casesTop3; excelData.casesTop3 = casesTop3;
excelData.onlineTop3 = onlineTop3;
excelData.rejectionRegion = rejectionRegion; excelData.rejectionRegion = rejectionRegion;
excelData.rejectionTime = rejectionTime;
// 获取URL指定的服务商ID // 获取URL指定的服务商ID
const urlProviderId = getProviderIdFromUrl(); const urlProviderId = getProviderIdFromUrl();
@@ -1169,50 +1172,54 @@
.map((row, i) => ({ .map((row, i) => ({
rank: i + 1, rank: i + 1,
name: row['服务人员工号'], name: row['服务人员工号'],
cases: row['完成案件量'] || 0, cases: row['完成案件量'] || 0
aggregatedCases: row['聚合案件量'] || 0
})); }));
// 获取在线时长TOP3师傅使用服务商id匹配
// 获取该服务商所有拒单地区数据 const onlineTop3 = excelData.onlineTop3
const allRejectionRegions = excelData.rejectionRegion .filter(row => String(row['服务商id']) === providerId)
.filter(row => String(row['服务商id']) === providerId);
// 总损失案件量使用kpi.json的拒单量
const totalLoss = kpiRow['拒单量'] || 0;
// 获取拒单率TOP3地区
const rejectionRegionTop3 = allRejectionRegions
.slice(0, 3) .slice(0, 3)
.map((row, i) => ({ .map((row, i) => ({
rank: i + 1, rank: i + 1,
region: row['地区'] || '-', name: row['司机姓名'],
count: row['拒单量'] || 0, hours: Math.round(row['年度总在线时长(小时)'] || 0)
rate: row['拒单率'] || 0
})); }));
// 获取拒单率最高地区使用服务商id匹配
const rejectionRegionData = excelData.rejectionRegion.find(row => String(row['服务商id']) === providerId);
// 获取拒单率最高时段使用服务商id匹配
const rejectionTimeData = excelData.rejectionTime.find(row => String(row['服务商id']) === providerId);
// 构建数据对象 // 构建数据对象
const data = { const data = {
year: 2025, year: 2025,
serviceProviderName: providerName, serviceProviderName: providerName,
summary: { summary: {
totalCases: kpiRow['案件量'] || 0, totalCases: kpiRow['完成案件量'] || 0,
caseBreakdown: { caseBreakdown: {
towing: kpiRow['拖车案件量'] || 0, towing: kpiRow['拖车完成量'] || 0,
minorRepair: kpiRow['小修案件量'] || 0, minorRepair: kpiRow['小修完成量'] || 0,
predicament: kpiRow['困境案件量'] || 0 predicament: kpiRow['困境完成量'] || 0
}, },
aggregatedCases: kpiRow['聚合案件量'] || 0 aggregatedCases: kpiRow['聚合案件量'] || 0
}, },
topMastersByCases: casesTop3, topMastersByCases: casesTop3,
onlineHours: { onlineHours: {
averageTotal: kpiRow['平均每车每人在线时长(小时)'] || 0 averageTotal: Math.round(kpiRow['年度车辆平均总在线时长(小时)'] || 0),
topMasters: onlineTop3
}, },
rejectionTop3Regions: rejectionRegionTop3, rejectionRate: {
totalLoss: totalLoss, highestRegion: {
appUsageRate: kpiRow['APP使用率.'] || 0, name: rejectionRegionData ? rejectionRegionData['地区'] : '-',
appRankOverCustomers: kpiRow['超过客户'] || 0 rate: rejectionRegionData ? ((rejectionRegionData['拒单率'] || 0) * 100).toFixed(2) : 0
},
highestTimeSlot: {
period: rejectionTimeData ? rejectionTimeData['时段'] : '-',
rate: rejectionTimeData ? ((rejectionTimeData['拒单率'] || 0) * 100).toFixed(2) : 0
}
},
appUsageRate: kpiRow['APP使用率.'] || 0
}; };
renderDashboard(data); renderDashboard(data);
@@ -1231,8 +1238,8 @@
document.getElementById('totalCases').textContent = totalCases.toLocaleString(); document.getElementById('totalCases').textContent = totalCases.toLocaleString();
document.getElementById('totalCases').dataset.target = totalCases; document.getElementById('totalCases').dataset.target = totalCases;
// 案件类型饼图(已注释) // 案件类型饼图
// renderDonutChart(data.summary.caseBreakdown, totalCases); renderDonutChart(data.summary.caseBreakdown, totalCases);
// 聚合案件 // 聚合案件
const aggregatedCases = data.summary.aggregatedCases; const aggregatedCases = data.summary.aggregatedCases;
@@ -1241,19 +1248,43 @@
document.getElementById('aggregatedCases').textContent = Math.round(aggregatedCases).toLocaleString(); document.getElementById('aggregatedCases').textContent = Math.round(aggregatedCases).toLocaleString();
document.getElementById('aggregatedCases').dataset.target = Math.round(aggregatedCases); document.getElementById('aggregatedCases').dataset.target = Math.round(aggregatedCases);
document.getElementById('aggregatedDesc').innerHTML = document.getElementById('aggregatedDesc').innerHTML =
'占总案件量的 <span class="highlight">' + aggregatedPercent + '%</span><br>' '占总案件量的 <span class="highlight">' + aggregatedPercent + '%</span><br>' +
'平均每月聚合 <span class="highlight">' + avgPerMonth + '</span> 个案件';
// TOP3 师傅 // TOP3 师傅
renderPodium(data.topMastersByCases, totalCases); renderPodium(data.topMastersByCases, totalCases);
// 在线时长(日均)- 截断保留两位小数(不四舍五入) // 在线时长
const avgHours = data.onlineHours.averageTotal; const avgHours = data.onlineHours.averageTotal;
const truncatedHours = (avgHours * 100) / 100; const days = (avgHours / 24).toFixed(1);
document.getElementById('avgOnlineHours').textContent = truncatedHours.toFixed(2); const dailyHours = (avgHours / 365).toFixed(1);
document.getElementById('avgOnlineHours').textContent = avgHours.toLocaleString();
document.getElementById('avgOnlineHours').dataset.target = avgHours;
document.getElementById('onlineDesc').innerHTML =
'相当于 <span class="highlight">' + days + '</span> 天 · 日均在线 <span class="highlight">' + dailyHours + '</span> 小时';
// 拒单TOP3地区 renderBarChart(data.onlineHours.topMasters);
renderRejectionTop3(data.rejectionTop3Regions, data.totalLoss);
// 拒单率
const regionRate = parseFloat(data.rejectionRate.highestRegion.rate) || 0;
const timeRate = parseFloat(data.rejectionRate.highestTimeSlot.rate) || 0;
if (regionRate === 0 || data.rejectionRate.highestRegion.name === '-') {
document.getElementById('rejectionRegion').textContent = '无';
document.getElementById('rejectionRate').textContent = '';
document.querySelector('.alert-card:first-child .alert-desc').textContent = '您没有拒单高发地区';
} else {
document.getElementById('rejectionRegion').textContent = data.rejectionRate.highestRegion.name;
document.getElementById('rejectionRate').textContent = data.rejectionRate.highestRegion.rate + '%';
}
if (timeRate === 0 || data.rejectionRate.highestTimeSlot.period === '-') {
document.getElementById('rejectionTimeSlot').textContent = '无';
document.getElementById('rejectionTimeDesc').textContent = '您没有拒单高发时段';
} else {
document.getElementById('rejectionTimeSlot').textContent = data.rejectionRate.highestTimeSlot.period;
document.getElementById('rejectionTimeDesc').textContent = '拒单率 ' + data.rejectionRate.highestTimeSlot.rate + '%';
}
// APP使用率 // APP使用率
const appUsagePercent = (data.appUsageRate * 100).toFixed(2); const appUsagePercent = (data.appUsageRate * 100).toFixed(2);
@@ -1262,10 +1293,12 @@
document.getElementById('appUsageFill').style.width = appUsagePercent + '%'; document.getElementById('appUsageFill').style.width = appUsagePercent + '%';
}, 100); }, 100);
// APP排名超过客户百分比 let usageLevel = '优秀';
const appRankPercent = (data.appRankOverCustomers * 100).toFixed(2); if (appUsagePercent < 90) usageLevel = '良好';
document.getElementById('appRankPercent').textContent = appRankPercent + '%'; if (appUsagePercent < 80) usageLevel = '一般';
if (appUsagePercent < 70) usageLevel = '需改进';
document.getElementById('appUsageDesc').innerHTML =
'APP使用率表现<span class="highlight">' + usageLevel + '</span>,继续保持高效的数字化运营';
} }
// 渲染环形图 // 渲染环形图
@@ -1342,61 +1375,15 @@
<div class="podium-avatar">${avatar}</div> <div class="podium-avatar">${avatar}</div>
<div class="podium-name">${master.name}</div> <div class="podium-name">${master.name}</div>
<div class="podium-value">${master.cases} 个</div> <div class="podium-value">${master.cases} 个</div>
<div class="podium-agg" style="font-size: 0.9em; color: #00ff88; margin-top: 5px;">聚合 ${master.aggregatedCases} 个</div>
<div class="podium-bar">${master.rank}</div> <div class="podium-bar">${master.rank}</div>
</div> </div>
`; `;
}).join(''); }).join('');
} const totalTop3 = topMasters.reduce((sum, m) => sum + m.cases, 0);
const percent = ((totalTop3 / total) * 100).toFixed(0);
// 渲染拒单TOP3地区纵向柱状图 document.getElementById('top3Summary').innerHTML =
function renderRejectionTop3(regions, totalLoss) { 'TOP3 合计完成 <span class="highlight">' + totalTop3 + '</span> 个案件,占总量 <span class="highlight">' + percent + '%</span>';
const container = document.getElementById('rejectionBarChart');
const summaryEl = document.getElementById('totalLossSummary');
if (!regions || regions.length === 0) {
// 没有拒单地区,显示奖状
container.innerHTML = `
<div style="text-align: center; padding: 40px;">
<div style="font-size: 4em; margin-bottom: 20px;">🏆</div>
<div style="color: #00ff88; font-size: 1.5em; margin-bottom: 10px;">优秀服务商</div>
<div style="color: rgba(255,255,255,0.7);">恭喜您在2025年度没有拒单记录</div>
</div>
`;
summaryEl.textContent = '';
return;
}
const maxCount = Math.max(...regions.map(r => r.count));
const colors = ['#ff6b6b', '#ff8c42', '#ffb347'];
container.innerHTML = `
<div style="display: flex; justify-content: center; align-items: flex-end; gap: 30px; height: 250px; padding: 20px;">
${regions.map((item, i) => {
const height = maxCount > 0 ? ((item.count / maxCount) * 100).toFixed(1) : 0;
return `
<div style="display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 120px;">
<div style="font-family: 'Orbitron', sans-serif; font-size: 1.1em; color: ${colors[i]}; margin-bottom: 10px;">${item.count} 单</div>
<div style="width: 60px; height: 180px; background: rgba(255,255,255,0.1); border-radius: 8px 8px 0 0; display: flex; align-items: flex-end; overflow: hidden;">
<div class="vertical-bar" data-height="${height}" style="width: 100%; height: 0%; background: linear-gradient(180deg, ${colors[i]}, ${colors[i]}88); border-radius: 8px 8px 0 0; transition: height 1.5s ease;"></div>
</div>
<div style="margin-top: 15px; font-size: 0.9em; color: rgba(255,255,255,0.8); text-align: center; word-break: break-all; max-width: 100px;">${item.region}</div>
</div>
`;
}).join('')}
</div>
`;
// 动画
setTimeout(() => {
container.querySelectorAll('.vertical-bar').forEach((bar) => {
bar.style.height = bar.dataset.height + '%';
});
}, 100);
// 显示总损失
summaryEl.innerHTML = '由于您未及时接单2025年共损失了 <span style="color: #ff6b6b; font-weight: bold; font-size: 1.3em;">' + totalLoss.toLocaleString() + '</span> 个案件';
} }
// 渲染柱状图 // 渲染柱状图

Binary file not shown.

Before

Width:  |  Height:  |  Size: 296 KiB

View File

@@ -8,7 +8,7 @@
:border="false" :border="false"
:fixed="true" :fixed="true"
:safe-area-inset-top="true" :safe-area-inset-top="true"
@click-left="back" @click-left="h5GoBack"
/> />
</div> </div>
<div class="addContentWrap"> <div class="addContentWrap">
@@ -92,57 +92,6 @@
</template> </template>
</el-input> </el-input>
</div> </div>
<div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
<div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')" style="align-items: center">
<div class="titleType" style="width: 60px">
<img class="startImg" src="@/assets/start.png" />
<span>保费</span>
</div>
<van-field
type="number"
class="vanIpt"
v-model="liabilityInsuranceAmount"
input-align="right"
>
<template slot="right-icon" >
<span style="white-space: nowrap;"></span>
</template>
</van-field>
</div>
<div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
<div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>保额</span>
</div>
<div style="display:flex;align-items: center;justify-content: flex-end">
<el-select
v-model="liabilityInsuranceQuota"
value-key="name"
class="elSelect"
collapse-tags="collapse-tags"
placeholder="请选择" style="width: 55%"
>
<el-option
v-for="item in liabilityQuotaOptions"
:key="item.value"
:label="item.value"
:value="item.value"
>
</el-option>
</el-select><span style="margin-right: 16px;opacity: .5;">万元</span>
</div>
<!-- <van-field
type="number"
class="vanIpt"
v-model="liabilityInsuranceQuota"
input-align="right"
>
<template slot="right-icon" >
<span style="white-space: nowrap;">万元 </span>
</template>
</van-field>-->
</div>
</template> </template>
<common-btn title="保存" @submitClick="submitBtn"/> <common-btn title="保存" @submitClick="submitBtn"/>
<van-calendar v-model="showDatePicker" :min-date="minDate" <van-calendar v-model="showDatePicker" :min-date="minDate"
@@ -155,7 +104,7 @@
import {Dialog} from "vant"; import {Dialog} from "vant";
import {myMixins} from "@/utils/myMixins" import {myMixins} from "@/utils/myMixins"
import {formatDate1} from "@/utils/common" import {formatDate1} from "@/utils/common"
import { uploadImage, updateInsurance, getInfoById,userOperationPermissions} from "@/api/mine" import { uploadImage, updateInsurance, getInfoById} from "@/api/mine"
import CommonBtn from "@/components/commonBtn.vue" import CommonBtn from "@/components/commonBtn.vue"
export default { export default {
name: "vehicleAdd", name: "vehicleAdd",
@@ -166,7 +115,6 @@ export default {
children: 'children', children: 'children',
label: 'name' label: 'name'
}, },
liabilityQuotaOptions:[{value:10},{value:20},{value:30},{value:50},{value:70},{value:80},{value:100},{value:200}],
minDate: new Date(1970, 0, 1), // 设置最小可选日期1970年1月1日 minDate: new Date(1970, 0, 1), // 设置最小可选日期1970年1月1日
maxDate: new Date(2099, 11, 31), // 设置最大可选日期2099年12月31日 maxDate: new Date(2099, 11, 31), // 设置最大可选日期2099年12月31日
showDatePicker: false, showDatePicker: false,
@@ -182,9 +130,6 @@ export default {
insurancePicturePhoto: '', // 保单照片 insurancePicturePhoto: '', // 保单照片
isMultiple: false, // 是否支持多选 isMultiple: false, // 是否支持多选
insuranceCorp: '', insuranceCorp: '',
liabilityInsuranceAmount:'',
liabilityInsuranceQuota:'',
permissonList:[],
insuranceOptions: [{ insuranceOptions: [{
name: '太平洋', name: '太平洋',
value: 1 value: 1
@@ -238,24 +183,11 @@ export default {
async mounted() { async mounted() {
this.id=this.$route.params?.id this.id=this.$route.params?.id
await this.getPermissions()
if( this.id){ if( this.id){
// await this.vehicleInfo() // await this.vehicleInfo()
} }
}, },
methods:{ methods:{
back() {
this.$router.push({
name:'vehicleAdd',
params:{
id: this.id
}
})
},
async getPermissions(){
let res = await userOperationPermissions();
this.permissonList = res.data
},
async vehicleInfo(){ async vehicleInfo(){
let res= await getInfoById({ let res= await getInfoById({
vehicleId:this.id vehicleId:this.id
@@ -327,14 +259,6 @@ export default {
this.$toast('保单有效期不能为空') this.$toast('保单有效期不能为空')
return return
} }
if(this.hasLiabilityInsurance == 1 && this.permissonList?.includes('hasInsuranceAudit') && !this.liabilityInsuranceAmount && this.liabilityInsuranceAmount!=0){
this.$toast('保费不能为空')
return
}
if(this.hasLiabilityInsurance == 1 && !this.liabilityInsuranceQuota && this.permissonList?.includes('hasInsuranceAudit')){
this.$toast('保额不能为空')
return
}
let timeObj; let timeObj;
if(this.dateVal) { if(this.dateVal) {
timeObj = this.formatDateTimeRange(this.dateVal) timeObj = this.formatDateTimeRange(this.dateVal)
@@ -347,8 +271,6 @@ export default {
insuranceCorp: this.hasLiabilityInsurance == 1 ? this.insuranceCorp : '', insuranceCorp: this.hasLiabilityInsurance == 1 ? this.insuranceCorp : '',
liabilityInsuranceStartTime: this.hasLiabilityInsurance == 1 ? (timeObj?.startTime || '' ) : '', liabilityInsuranceStartTime: this.hasLiabilityInsurance == 1 ? (timeObj?.startTime || '' ) : '',
liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '', liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '',
liabilityInsuranceQuota:this.liabilityInsuranceQuota || '',
liabilityInsuranceAmount:this.liabilityInsuranceAmount || '',
}) })
} }
await updateInsurance(params) await updateInsurance(params)
@@ -358,8 +280,7 @@ export default {
this.$toast('添加成功') this.$toast('添加成功')
} }
setTimeout(()=>{ setTimeout(()=>{
// this.$router.back(); this.$router.back();
this.back()
},2000) },2000)
} }
}, },

View File

@@ -156,7 +156,6 @@
minorCount: '', minorCount: '',
serviceAreaCode: [], serviceAreaCode: [],
linkEmail:'', linkEmail:'',
person:'',
accountInfoDTO:{ accountInfoDTO:{
dutyParagraph:'', dutyParagraph:'',
accountNumber:'', accountNumber:'',
@@ -265,10 +264,6 @@
this.$toast('营业执照未上传') this.$toast('营业执照未上传')
return return
} }
if(this.form.person != this.form.legalName){
this.$toast('身份证法人姓名和营业执照法人不一致')
return
}
if( !this.licensePhoto ) { if( !this.licensePhoto ) {
this.$toast('开户许可证未上传') this.$toast('开户许可证未上传')
return return
@@ -403,7 +398,6 @@
imageUrl: this.idFrontPhoto, imageUrl: this.idFrontPhoto,
cardSide: 'FRONT' cardSide: 'FRONT'
}) })
// 身份证法人名称
this.form.legalName = res?.data?.name this.form.legalName = res?.data?.name
}, },
async companyPhotoHandler(file) { async companyPhotoHandler(file) {
@@ -426,8 +420,6 @@
this.form.accountInfoDTO.dutyParagraph=res?.data?.regNum this.form.accountInfoDTO.dutyParagraph=res?.data?.regNum
this.form.accountInfoDTO.unitName = res?.data?.name this.form.accountInfoDTO.unitName = res?.data?.name
this.form.accountInfoDTO.companyType=res?.data?.type this.form.accountInfoDTO.companyType=res?.data?.type
// 营业执照法人名称
this.form.person = res?.data?.person
await this.QrCodeHandler(); await this.QrCodeHandler();
}, },
async licensePhotoHandler(file){// 开户许可证 async licensePhotoHandler(file){// 开户许可证

View File

@@ -8,7 +8,7 @@
:border="false" :border="false"
:fixed="true" :fixed="true"
:safe-area-inset-top="true" :safe-area-inset-top="true"
@click-left="back" @click-left="h5GoBack"
/> />
</div> </div>
<div class="addContentWrap"> <div class="addContentWrap">
@@ -311,83 +311,9 @@
</template> </template>
</el-input> </el-input>
</div> </div>
<div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
<div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>保费</span>
</div>
<van-field
type="number"
class="vanIpt"
v-model="liabilityInsuranceAmount"
input-align="right"
>
<template slot="right-icon" >
<span style="white-space: nowrap;"></span>
</template>
</van-field>
</div>
<div class="lineBot" v-if="permissonList?.includes('hasInsuranceAudit')"></div>
<div class="itemContent" v-if="permissonList?.includes('hasInsuranceAudit')">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>保额</span>
</div>
<div style="display:flex;align-items: center;justify-content: flex-end">
<el-select
v-model="liabilityInsuranceQuota"
value-key="name"
class="elSelect"
collapse-tags="collapse-tags"
placeholder="请选择" style="width: 55%"
>
<el-option
v-for="item in liabilityQuotaOptions"
:key="item.value"
:label="item.value"
:value="item.value"
>
</el-option>
</el-select><span style="margin-right: 16px;opacity: .5;">万元</span>
</div>
<!-- <van-field
type="number"
class="vanIpt"
v-model="liabilityInsuranceQuota"
input-align="right"
>
<template slot="right-icon" >
<span style="white-space: nowrap;">万元 </span>
</template>
</van-field>-->
</div>
<!-- <div class="lineBot"></div>
<div class="itemContent">
<div class="titleType">
<img class="startImg" src="@/assets/start.png" />
<span>保单号(救援)</span>
</div>
<van-field
class="vanIpt"
style="width: 72%"
v-model="insuranceCode"
input-align="right"
> </van-field>
</div>
<div class="lineBot"></div>
<div class="itemContent">
<div class="titleType"> <span>保单号(中道物流)</span> </div>
<van-field
class="vanIpt"
style="width: 65%"
v-model="insuranceCodeZd"
input-align="right"
> </van-field>
</div>
<div class="lineBot"></div>-->
</template> </template>
<div class="itemContent"> <div class="itemContent">
<div class="titleType"> <div class="titleType">
<img class="startImg" src="@/assets/start.png" /> <img class="startImg" src="@/assets/start.png" />
@@ -418,7 +344,7 @@
</div> </div>
</div>--> </div>-->
</div> </div>
<two-common-btn class="btn" @cancelClick="back" @submitClick="submitBtn" /> <two-common-btn class="btn" @cancelClick="h5GoBack" @submitClick="submitBtn" />
<van-calendar v-model="showDatePicker" :min-date="minDate" <van-calendar v-model="showDatePicker" :min-date="minDate"
:max-date="maxDate" type="range" @confirm="onConfirm" /> :max-date="maxDate" type="range" @confirm="onConfirm" />
@@ -614,7 +540,6 @@ export default {
name: '其他', name: '其他',
value: 14 value: 14
}], }],
liabilityQuotaOptions:[{value:10},{value:20},{value:30},{value:50},{value:70},{value:80},{value:100},{value:200}],
approvalForm:{ approvalForm:{
type:2, type:2,
supplierId:'', supplierId:'',
@@ -632,10 +557,7 @@ export default {
vehicleInfoChange:false, vehicleInfoChange:false,
insuranceChange:false, insuranceChange:false,
loading: false, loading: false,
liabilityInsuranceAmount:'',
liabilityInsuranceQuota:'',
insuranceCode:'',
insuranceCodeZd:'',
} }
}, },
computed: { computed: {
@@ -1030,7 +952,7 @@ export default {
isVehicleChange(e) { isVehicleChange(e) {
this.vehicleStatus=e this.vehicleStatus=e
}, },
/* async submitAuditHandle(){//提交审核 async submitAuditHandle(){//提交审核
let urls=[] let urls=[]
this.insurancePictureFiles?.forEach(item => urls.push(item.url)) this.insurancePictureFiles?.forEach(item => urls.push(item.url))
let time =this.dateVal ? this.formatDateTimeRange(this.dateVal) : '' let time =this.dateVal ? this.formatDateTimeRange(this.dateVal) : ''
@@ -1108,7 +1030,7 @@ export default {
this.approvalDialogShow=false this.approvalDialogShow=false
await this.submitBtn(); await this.submitBtn();
} }
},*/ },
async submitApprovalHandle(){//提交审批-走接口 async submitApprovalHandle(){//提交审批-走接口
if(this.vehicleInfoChange){ if(this.vehicleInfoChange){
if(!(this.selectedOption.length > 0)){ if(!(this.selectedOption.length > 0)){
@@ -1211,14 +1133,6 @@ export default {
this.vehicleInfoChange=false this.vehicleInfoChange=false
this.insuranceChange=false this.insuranceChange=false
}, },
back() {
this.$router.push({
name:'vehicleManage',
params:{
id: this.id
}
})
},
async submitBtn(){ async submitBtn(){
if( !this.vehicleLicenseFront ) { if( !this.vehicleLicenseFront ) {
this.$toast('行驶证主页照片不能为空') this.$toast('行驶证主页照片不能为空')
@@ -1280,26 +1194,12 @@ export default {
this.$toast('保单有效期不能为空') this.$toast('保单有效期不能为空')
return return
} }
if( this.hasLiabilityInsurance == 1){
if(this.permissonList.includes('hasInsuranceAudit') && !this.liabilityInsuranceAmount && this.liabilityInsuranceAmount!=0){
this.$toast('保费不能为空')
return
}
if(this.permissonList.includes('hasInsuranceAudit') && !this.liabilityInsuranceQuota){
this.$toast('保额不能为空')
return
}
/* if(!this.insuranceCode){
this.$toast('保单号(救援)不能为空')
return
}*/
}
let timeObj; let timeObj;
if(this.dateVal) { if(this.dateVal) {
timeObj = this.formatDateTimeRange(this.dateVal) timeObj = this.formatDateTimeRange(this.dateVal)
} }
this.serviceIds = this.$refs.tree.getCheckedKeys(true) this.serviceIds = this.$refs.tree.getCheckedKeys(true)
// console.log('1122',this.vehicleStatus) console.log('1122',this.vehicleStatus)
// return // return
await saveVehicle({ await saveVehicle({
vehicleId:this.id ? this.id : '', vehicleId:this.id ? this.id : '',
@@ -1321,11 +1221,7 @@ export default {
liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '', liabilityInsuranceEndTime: this.hasLiabilityInsurance == 1 ? (timeObj?.endTime || '') : '',
virtualVehicle: this.virtualVehicle, virtualVehicle: this.virtualVehicle,
canSubmitApproval:true, canSubmitApproval:true,
vehicleStatus:this.vehicleStatus, vehicleStatus:this.vehicleStatus
liabilityInsuranceAmount:this.liabilityInsuranceAmount,
liabilityInsuranceQuota:this.liabilityInsuranceQuota,
insuranceCode:this.insuranceCode,
insuranceCodeZd:this.insuranceCodeZd,
}) })
if(this.id){ if(this.id){
this.$toast('修改成功') this.$toast('修改成功')
@@ -1531,12 +1427,4 @@ export default {
transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg);
} }
} }
.vanIpt{
width: 80%;
display: flex;
align-items: center;
}
.vanIpt1{
width: 72%;
}
</style> </style>