huanghai/aiData
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0f4435b51c549baa254f8c74c086d71d01036383
aiData/static/js/dashboard.js

495 lines
20 KiB
JavaScript
Raw Normal View History

'commit'
2026-01-21 07:51:52 +08:00
const { createApp, ref, computed, watch, nextTick, onMounted } = Vue;
createApp({
setup() {
// ==========================================
// Common State
// ==========================================
const apiBase = ref(window.location.origin || "http://localhost:8000");
const isMobile = ref(window.innerWidth <= 768);
// Handle window resize
window.addEventListener('resize', () => {
isMobile.value = window.innerWidth <= 768;
if (chartInstance) chartInstance.resize();
'commit'
2026-01-21 08:41:47 +08:00
if (trendChartInstance) trendChartInstance.resize();
'commit'
2026-01-21 07:51:52 +08:00
});
// ==========================================
// Dashboard State & Logic
// ==========================================
const operators = ref([
{label:"新电途",value:"新电途"},
{label:"特来电",value:"特来电"},
{label:"驿来特",value:"驿来特"},
{label:"艾特吉易充",value:"艾特吉易充"}
]);
// Default select all or specific one? App.js had "驿来特"
const selectedOperator = ref("驿来特");
const aiText = ref("");
const loading = ref(false);
const exporting = ref(false);
const exportingReport = ref(false);
const aiLoading = ref(false);
const aiBoxRef = ref(null);
const priceTableRows = ref([]);
const hourlyPricesByOperator = ref({});
let chartInstance = null;
'commit'
2026-01-21 08:41:47 +08:00
let trendChartInstance = null;
'commit'
2026-01-21 07:51:52 +08:00
const chartType = ref('line');
'commit'
2026-01-21 08:41:47 +08:00
const trendDays = ref(7);
'commit'
2026-01-21 07:51:52 +08:00
// ECharts Initialization
const initChart = () => {
const dom = document.getElementById("chart");
if (dom && !chartInstance) {
if (typeof echarts === 'undefined') {
console.error("ECharts not loaded");
return;
}
chartInstance = echarts.init(dom);
}
};
'commit'
2026-01-21 08:41:47 +08:00
const initTrendChart = () => {
const dom = document.getElementById("trendChart");
if (dom && !trendChartInstance) {
if (typeof echarts === 'undefined') {
console.error("ECharts not loaded");
return;
}
trendChartInstance = echarts.init(dom);
}
};
'commit'
2026-01-21 07:51:52 +08:00
const renderChart = () => {
if (!chartInstance) return;
const series = operators.value.map(op => {
const seriesData = [];
for (let h = 0; h < 24; h++) {
const list = hourlyPricesByOperator.value[op.value] || [];
seriesData.push(list[h] !== undefined ? list[h] : null);
}
if (chartType.value === 'bar') {
return {
name: op.label,
type: "bar",
barGap: 0,
emphasis: { focus: 'series' },
data: seriesData
};
} else {
return {
name: op.label,
type: "line",
smooth: true,
emphasis: { focus: 'series' },
data: seriesData
};
}
});
const hours = [];
for (let h = 0; h < 24; h++) {
hours.push(h.toString().padStart(2,"0") + ":00");
}
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(30, 41, 59, 0.9)',
borderColor: '#334155',
textStyle: { color: '#f1f5f9' },
axisPointer: { type: chartType.value === 'bar' ? 'shadow' : 'line' }
},
legend: {
data: operators.value.map(o => o.label),
textStyle: { color: "#94a3b8" },
bottom: 0
},
xAxis: {
type: "category",
data: hours,
axisLine: { lineStyle: { color: "#475569" } },
axisLabel: { color: "#94a3b8" }
},
yAxis: {
type: "value",
name: "元/度",
nameTextStyle: { color: "#94a3b8" },
axisLine: { lineStyle: { color: "#475569" } },
axisLabel: { color: "#94a3b8" },
splitLine: { lineStyle: { color: "#334155", type: 'dashed' } }
},
grid: { left: 50, right: 30, top: 40, bottom: 40 },
series: series
};
chartInstance.setOption(option, true);
};
const buildPriceTable = () => {
const rows = [];
for (let h = 0; h < 24; h++) {
const row = {hour: (h.toString().padStart(2,"0") + ":00"), values: []};
operators.value.forEach(op => {
const series = hourlyPricesByOperator.value[op.value] || [];
const price = series[h] !== undefined ? series[h] : null;
row.values.push({operator: op.value, price});
});
rows.push(row);
}
priceTableRows.value = rows;
renderChart();
};
const loadAllOperatorsPrices = async () => {
loading.value = true;
try{
const res = await axios.get(apiBase.value + "/api/operators/hourly-prices");
if (res && res.data && Array.isArray(res.data.operators)) {
const dict = {};
res.data.operators.forEach(item => {
dict[item.operator] = item.series || [];
});
hourlyPricesByOperator.value = dict;
buildPriceTable();
}
}catch(e){
console.error(e);
}finally{
loading.value = false;
}
};
'commit'
2026-01-21 08:41:47 +08:00
const loadTrendData = async () => {
try {
const res = await axios.get(apiBase.value + "/api/operators/price-trends?days=" + trendDays.value);
if (res && res.data) {
renderTrendChart(res.data);
}
} catch (e) {
console.error("Failed to load trend data:", e);
}
};
const renderTrendChart = (data) => {
if (!trendChartInstance) initTrendChart();
if (!trendChartInstance) return;
const option = {
backgroundColor: 'transparent',
tooltip: {
trigger: "axis",
backgroundColor: 'rgba(30, 41, 59, 0.9)',
borderColor: '#334155',
textStyle: { color: '#f1f5f9' }
},
legend: {
data: data.series.map(s => s.name),
textStyle: { color: "#94a3b8" },
top: 10
},
'commit'
2026-01-21 09:59:09 +08:00
grid: { left: 50, right: 30, top: 60, bottom: 60 },
'commit'
2026-01-21 08:41:47 +08:00
xAxis: {
'commit'
2026-01-21 09:59:09 +08:00
type: 'category',
data: data.dates,
axisLabel: {
show: true,
color: '#94a3b8',
interval: function(index, value) {
// 强制显示 00:00, 06:00, 12:00, 18:00
if (value && value.includes(' ')) {
const time = value.split(' ')[1];
return time === '00:00' || time === '06:00' || time === '12:00' || time === '18:00';
}
return index % 6 === 0; // 每6个点显示一个（对应 6 小时）
},
formatter: function(value) {
if (!value) return '';
const parts = value.split(' ');
if (parts.length === 2) {
const time = parts[1];
// 如果是零点，显示日期和时间
if (time === '00:00') {
return parts[0] + '\n' + time;
}
return time;
}
return value;
}
},
axisLine: { lineStyle: { color: '#334155' } },
axisTick: { show: true, lineStyle: { color: '#334155' } }
'commit'
2026-01-21 08:41:47 +08:00
},
yAxis: {
type: "value",
name: "元/度",
nameTextStyle: { color: "#94a3b8" },
axisLine: { lineStyle: { color: "#475569" } },
axisLabel: { color: "#94a3b8" },
splitLine: { lineStyle: { color: "#334155", type: 'dashed' } },
min: (value) => (value.min * 0.95).toFixed(2),
max: (value) => (value.max * 1.05).toFixed(2)
},
series: data.series.map(s => ({
name: s.name,
type: 'line',
smooth: true,
symbol: 'circle',
symbolSize: 6,
data: s.data,
emphasis: { focus: 'series' }
}))
};
trendChartInstance.setOption(option, true);
};
'commit'
2026-01-21 07:51:52 +08:00
const exportAllPrices = async () => {
try{
exporting.value = true;
const res = await axios.get(apiBase.value + "/api/export/prices-zip",{responseType:"blob"});
const blob = new Blob([res.data],{type:"application/zip"});
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "多供应商电价导出.zip";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}catch(e){
console.error(e);
}finally{
exporting.value = false;
}
};
const exportAiReport = async () => {
if (!aiText.value) {
alert("请先生成AI分析报告");
return;
}
try {
exportingReport.value = true;
const res = await axios.post(apiBase.value + "/api/export/ai-report-docx", {
content: aiText.value
}, {responseType: "blob"});
const blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"});
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "AI分析报告.docx";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
} catch (e) {
console.error(e);
alert("导出失败，请检查是否安装Pandoc");
} finally {
exportingReport.value = false;
}
};
const startAiAnalysis = async () => {
if (aiLoading.value) return;
aiText.value = "";
aiLoading.value = true;
try{
const response = await fetch(apiBase.value + "/api/ai/pricing/strategy-summary");
if (!response.body) return;
const reader = response.body.getReader();
const decoder = new TextDecoder();
'commit'
2026-01-21 08:51:44 +08:00
let fullText = "";
'commit'
2026-01-21 07:51:52 +08:00
while (true) {
const {done, value} = await reader.read();
if (done) break;
const chunk = decoder.decode(value, {stream: true});
'commit'
2026-01-21 08:51:44 +08:00
fullText += chunk;
if (fullText.includes("---CLEAR_PREVIOUS_HINTS---")) {
const parts = fullText.split("---CLEAR_PREVIOUS_HINTS---");
aiText.value = parts[parts.length - 1];
} else {
aiText.value = fullText;
}
'commit'
2026-01-21 07:51:52 +08:00
await Vue.nextTick();
if (aiBoxRef.value) {
aiBoxRef.value.scrollTop = aiBoxRef.value.scrollHeight;
}
}
}catch(e){
console.error(e);
aiText.value += "\n(分析过程出错: " + e.message + ")";
}finally{
aiLoading.value = false;
}
};
const formatCell = v => {
if (v === null || v === undefined || v === "") return "-";
if (typeof v === "number") {
if (Number.isNaN(v)) return "-";
return v.toFixed(2);
}
return v;
};
const getPriceColor = (price) => {
if (price === null || price === undefined) return 'inherit';
if (price > 1.2) return '#ef4444'; // Red-500
if (price < 0.8) return '#10b981'; // Emerald-500
return '#f1f5f9'; // Slate-100
};
'commit'
2026-01-21 08:41:47 +08:00
// Configure Marked
if (typeof marked !== 'undefined') {
marked.use({
gfm: true,
breaks: true
});
}
'commit'
2026-01-21 08:51:44 +08:00
// 降级用的简易 Markdown 解析器 (增强版)
'commit'
2026-01-21 07:51:52 +08:00
const simpleMarkdown = (text) => {
if (!text) return '';
let lines = text.split('\n');
let html = '';
let inList = false;
const parseInline = (str) => {
return str
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
'commit'
2026-01-21 08:51:44 +08:00
.replace(/\*(.*?)\*/g, '<em>$1</em>')
'commit'
2026-01-21 08:41:47 +08:00
.replace(/`(.*?)`/g, '<code style="background:rgba(148, 163, 184, 0.1); padding:2px 4px; border-radius:4px;">$1</code>');
'commit'
2026-01-21 07:51:52 +08:00
};
for (let line of lines) {
let trimmed = line.trim();
'commit'
2026-01-21 08:41:47 +08:00
if (!trimmed) {
if (inList) { html += '</ul>'; inList = false; }
html += '<br>';
continue;
}
'commit'
2026-01-21 08:51:44 +08:00
if (trimmed.startsWith('# ')) {
if (inList) { html += '</ul>'; inList = false; }
html += `<h1>${parseInline(trimmed.substring(2))}</h1>`;
} else if (trimmed.startsWith('## ')) {
if (inList) { html += '</ul>'; inList = false; }
html += `<h2>${parseInline(trimmed.substring(3))}</h2>`;
} else if (trimmed.startsWith('### ')) {
'commit'
2026-01-21 07:51:52 +08:00
if (inList) { html += '</ul>'; inList = false; }
html += `<h3>${parseInline(trimmed.substring(4))}</h3>`;
'commit'
2026-01-21 08:41:47 +08:00
} else if (trimmed.startsWith('- ') || /^\d+\./.test(trimmed)) {
'commit'
2026-01-21 07:51:52 +08:00
if (!inList) { html += '<ul>'; inList = true; }
let content = trimmed.replace(/^(- |\d+\. )/, '');
html += `<li>${parseInline(content)}</li>`;
'commit'
2026-01-21 08:51:44 +08:00
} else if (trimmed.startsWith('|') && trimmed.endsWith('|')) {
// 简单的表格识别 (仅作示意，复杂表格仍需 marked)
if (inList) { html += '</ul>'; inList = false; }
let cells = trimmed.split('|').filter(c => c.trim() || c === '');
html += '<div style="display:flex; border-bottom:1px solid #334155; padding:4px;">';
cells.forEach(c => {
html += `<div style="flex:1; padding:4px;">${parseInline(c.trim())}</div>`;
});
html += '</div>';
'commit'
2026-01-21 08:41:47 +08:00
} else {
'commit'
2026-01-21 07:51:52 +08:00
if (inList) { html += '</ul>'; inList = false; }
'commit'
2026-01-21 08:41:47 +08:00
html += `<p>${parseInline(trimmed)}</p>`;
'commit'
2026-01-21 07:51:52 +08:00
}
}
if (inList) html += '</ul>';
return html;
};
'commit'
2026-01-21 08:41:47 +08:00
// 增强的 Markdown & LaTeX 解析器
const renderMarkdownAndLatex = (text) => {
if (!text) return '';
'commit'
2026-01-21 08:51:44 +08:00
// 如果包含提示信息且还没被清除，先简单处理显示
if (text.includes('正在收集各供应商价格数据') || text.includes('正在进行 AI 深度分析')) {
return `<div style="color: #64748b; font-style: italic;">${text.replace(/\n/g, '<br>')}</div>`;
}
'commit'
2026-01-21 08:41:47 +08:00
try {
let processedText = text;
'commit'
2026-01-21 08:51:44 +08:00
// 1. 处理 LaTeX (如果 katex 加载成功)
if (typeof katex !== 'undefined') {
// 处理块级 LaTeX: $$ ... $$
processedText = processedText.replace(/\$\$\s*([\s\S]*?)\s*\$\$/g, (match, formula) => {
try {
'commit'
2026-01-21 08:41:47 +08:00
return '<div class="katex-block">' + katex.renderToString(formula, { displayMode: true, throwOnError: false }) + '</div>';
'commit'
2026-01-21 08:51:44 +08:00
} catch (e) { return match; }
});
// 处理行内 LaTeX: $ ... $
processedText = processedText.replace(/\$([^\$\n]+?)\$/g, (match, formula) => {
try {
'commit'
2026-01-21 08:41:47 +08:00
return katex.renderToString(formula, { displayMode: false, throwOnError: false });
'commit'
2026-01-21 08:51:44 +08:00
} catch (e) { return match; }
});
}
'commit'
2026-01-21 08:41:47 +08:00
'commit'
2026-01-21 08:51:44 +08:00
// 2. 使用 marked 解析 Markdown (优先使用)
'commit'
2026-01-21 08:41:47 +08:00
if (typeof marked !== 'undefined') {
'commit'
2026-01-21 08:51:44 +08:00
// 兼容不同版本的 marked (UMD 版本中 marked 可能是函数或对象)
const parseFn = (typeof marked.parse === 'function') ? marked.parse.bind(marked) : (typeof marked === 'function' ? marked : null);
if (parseFn) {
return parseFn(processedText);
}
'commit'
2026-01-21 08:41:47 +08:00
}
'commit'
2026-01-21 08:51:44 +08:00
// 3. 降级使用改进后的 simpleMarkdown
return simpleMarkdown(processedText);
'commit'
2026-01-21 08:41:47 +08:00
} catch (e) {
'commit'
2026-01-21 08:51:44 +08:00
console.error('Markdown rendering error:', e);
return simpleMarkdown(text);
'commit'
2026-01-21 08:41:47 +08:00
}
};
'commit'
2026-01-21 07:51:52 +08:00
const renderedAiText = computed(() => {
'commit'
2026-01-21 08:41:47 +08:00
return renderMarkdownAndLatex(aiText.value);
'commit'
2026-01-21 07:51:52 +08:00
});
onMounted(() => {
initChart();
'commit'
2026-01-21 08:41:47 +08:00
initTrendChart();
'commit'
2026-01-21 07:51:52 +08:00
loadAllOperatorsPrices();
'commit'
2026-01-21 08:41:47 +08:00
loadTrendData();
'commit'
2026-01-21 08:42:20 +08:00
startAiAnalysis();
'commit'
2026-01-21 07:51:52 +08:00
});
return {
operators,
loading,
exporting,
exportingReport,
aiLoading,
aiText,
aiBoxRef,
priceTableRows,
hourlyPricesByOperator,
chartType,
'commit'
2026-01-21 08:41:47 +08:00
trendDays,
'commit'
2026-01-21 07:51:52 +08:00
// Actions
loadAllOperatorsPrices,
'commit'
2026-01-21 08:41:47 +08:00
loadTrendData,
'commit'
2026-01-21 07:51:52 +08:00
exportAllPrices,
exportAiReport,
startAiAnalysis,
formatCell,
getPriceColor,
renderedAiText
};
}
}).mount('#app');
Reference in New Issue Copy Permalink