|
@@ -6,80 +6,47 @@
|
|
|
import echarts from "echarts";
|
|
|
require("echarts/theme/macarons");
|
|
|
import resize from "./mixins/resize";
|
|
|
-import {
|
|
|
- selectTypeList
|
|
|
-} from "@/api/knowledge";
|
|
|
+import { selectTypeList, structure_count } from "@/api/knowledge";
|
|
|
|
|
|
export default {
|
|
|
mixins: [resize],
|
|
|
props: {
|
|
|
className: {
|
|
|
type: String,
|
|
|
- default: "chart"
|
|
|
+ default: "chart",
|
|
|
},
|
|
|
width: {
|
|
|
type: String,
|
|
|
- default: "100%"
|
|
|
+ default: "100%",
|
|
|
},
|
|
|
height: {
|
|
|
type: String,
|
|
|
- default: "350px"
|
|
|
+ default: "350px",
|
|
|
+ },
|
|
|
+ kenValue: {
|
|
|
+ type: Object,
|
|
|
+ default: null,
|
|
|
},
|
|
|
- kenValue:{
|
|
|
- type:Number,
|
|
|
- default:null
|
|
|
- }
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
chart: null,
|
|
|
- chartData: [
|
|
|
- {
|
|
|
- category: "Customer",
|
|
|
- Document: 8,
|
|
|
- Video: 77,
|
|
|
- Audio: 22,
|
|
|
- Image: 76,
|
|
|
- Text: 11,
|
|
|
- Other: 88
|
|
|
- },
|
|
|
- {
|
|
|
- category: "Developer",
|
|
|
- Document: 23,
|
|
|
- Video: 52,
|
|
|
- Audio: 80,
|
|
|
- Image: 30,
|
|
|
- Text: 22,
|
|
|
- Other: 20
|
|
|
- },
|
|
|
- {
|
|
|
- category: "Manager",
|
|
|
- Document: 98,
|
|
|
- Video: 65,
|
|
|
- Audio: 18,
|
|
|
- Image: 92,
|
|
|
- Text: 71,
|
|
|
- Other: 90
|
|
|
- },
|
|
|
- {
|
|
|
- category: "Designer",
|
|
|
- Document: 93,
|
|
|
- Video: 33,
|
|
|
- Audio: 98,
|
|
|
- Image: 10,
|
|
|
- Text: 36,
|
|
|
- Other: 11
|
|
|
- }
|
|
|
- ],
|
|
|
- dirList:[]
|
|
|
+ chartData: [],
|
|
|
+ dirList: [],
|
|
|
+ currentKenId: null, // 新增:用于跟踪当前选中的知识库ID
|
|
|
};
|
|
|
},
|
|
|
- watch:{
|
|
|
- kenValue:{
|
|
|
+ watch: {
|
|
|
+ kenValue: {
|
|
|
+ immediate: true,
|
|
|
handler(val) {
|
|
|
- this.init(val)
|
|
|
- }
|
|
|
- }
|
|
|
+ if (val && val.id !== this.currentKenId) {
|
|
|
+ this.currentKenId = val.id;
|
|
|
+ this.resetChart();
|
|
|
+ this.procData(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
@@ -96,33 +63,87 @@ export default {
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
this.chart = echarts.init(this.$el, "macarons");
|
|
|
+ // 初始化空的图表配置
|
|
|
+ this.updateChart([]);
|
|
|
+ },
|
|
|
+ /* getColor(type) {
|
|
|
+ const colorMap = {
|
|
|
+ Document: "#FF7B7B",
|
|
|
+ Video: "#9D96F5",
|
|
|
+ Audio: "#4ADEDE",
|
|
|
+ Image: "#FFA400",
|
|
|
+ Text: "#5D7DFF",
|
|
|
+ Other: "#4ADEDE",
|
|
|
+ };
|
|
|
+ return colorMap[type];
|
|
|
+ }, */
|
|
|
+ /* 处理数据 */
|
|
|
+ resetChart() {
|
|
|
+ if (this.chart) {
|
|
|
+ this.chart.clear();
|
|
|
+ }
|
|
|
+ this.chartData = [];
|
|
|
+ },
|
|
|
+
|
|
|
+ procData(val) {
|
|
|
+ if (!val || !val.directories) {
|
|
|
+ /* console.error("Invalid input data"); */
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.chartData = val.directories.map((dir) => ({
|
|
|
+ name: dir.name,
|
|
|
+ ...dir.file_type_stats,
|
|
|
+ }));
|
|
|
|
|
|
- const categories = this.chartData.map(item => item.category);
|
|
|
- const series = ["Document", "Video", "Audio", "Image", "Text", "Other"].map(type => ({
|
|
|
- name: type,
|
|
|
+ if (val.other_files && val.other_files.file_type_stats) {
|
|
|
+ this.chartData.push({
|
|
|
+ name: "其他",
|
|
|
+ ...val.other_files.file_type_stats,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ console.log(this.chartData);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.updateChart(this.chartData);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ updateChart(data) {
|
|
|
+ if (!this.chart) {
|
|
|
+ console.error("Chart is not initialized");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const categories = data.map((item) => item.name);
|
|
|
+
|
|
|
+ // 获取所有存在的文件类型
|
|
|
+ const fileTypes = Array.from(
|
|
|
+ new Set(data.flatMap((item) => Object.keys(item)))
|
|
|
+ ).filter((key) => key !== "name");
|
|
|
+
|
|
|
+ const series = fileTypes.map((type) => ({
|
|
|
+ name: this.getFileTypeName(type),
|
|
|
type: "bar",
|
|
|
- barWidth: "10%",
|
|
|
- data: this.chartData.map(item => item[type]),
|
|
|
- itemStyle: { color: this.getColor(type) }
|
|
|
+ barWidth: "2%",
|
|
|
+ data: data.map((item) => item[type] || 0),
|
|
|
+ itemStyle: { color: this.getColor(type) },
|
|
|
}));
|
|
|
|
|
|
this.chart.setOption({
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
- axisPointer: {
|
|
|
- type: "shadow"
|
|
|
- }
|
|
|
+ axisPointer: { type: "shadow" },
|
|
|
},
|
|
|
legend: {
|
|
|
- data: ["Document", "Video", "Audio", "Image", "Text", "Other"],
|
|
|
- bottom: 0
|
|
|
+ data: fileTypes.map(this.getFileTypeName),
|
|
|
+ bottom: 0,
|
|
|
},
|
|
|
grid: {
|
|
|
left: "3%",
|
|
|
right: "4%",
|
|
|
bottom: "10%",
|
|
|
top: "3%",
|
|
|
- containLabel: true
|
|
|
+ containLabel: true,
|
|
|
},
|
|
|
xAxis: [
|
|
|
{
|
|
@@ -132,45 +153,64 @@ export default {
|
|
|
axisLine: { show: false },
|
|
|
axisLabel: {
|
|
|
interval: 0,
|
|
|
- align: 'center',
|
|
|
+ align: "center",
|
|
|
margin: 20,
|
|
|
- fontSize: 14
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- alignWithLabel: true
|
|
|
+ fontSize: 14,
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: true,
|
|
|
- lineStyle: {
|
|
|
- type: 'dashed',
|
|
|
- color: '#ddd'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- max: 100
|
|
|
- }
|
|
|
+ lineStyle: { type: "dashed", color: "#ddd" },
|
|
|
+ },
|
|
|
+ },
|
|
|
],
|
|
|
- series: series
|
|
|
+ yAxis: [{ type: "value" }],
|
|
|
+ series: series,
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
getColor(type) {
|
|
|
const colorMap = {
|
|
|
- Document: "#FF7B7B",
|
|
|
- Video: "#9D96F5",
|
|
|
- Audio: "#4ADEDE",
|
|
|
- Image: "#FFA400",
|
|
|
- Text: "#5D7DFF",
|
|
|
- Other: "#4ADEDE"
|
|
|
+ jpg: "#54a0ff",
|
|
|
+ png: "#9D96F5",
|
|
|
+ gif: "#4ADEDE",
|
|
|
+ mp4: "#FFA400",
|
|
|
+ mp3: "#5D7DFF",
|
|
|
+ pdf: "#FF6B6B",
|
|
|
+ doc: "#4ECDC4",
|
|
|
+ docx: "#4ECDC4",
|
|
|
+ xls: "#45B7D1",
|
|
|
+ xlsx: "#45B7D1",
|
|
|
+ ppt: "#FF8C42",
|
|
|
+ pptx: "#FF8C42",
|
|
|
+ txt: "#6AB04C",
|
|
|
+ other: "#95AFC0",
|
|
|
};
|
|
|
- return colorMap[type];
|
|
|
+ return colorMap[type] || "#95AFC0"; // 默认颜色
|
|
|
+ },
|
|
|
+
|
|
|
+ getFileTypeName(type) {
|
|
|
+ const typeMap = {
|
|
|
+ jpg: "JPG图片",
|
|
|
+ png: "PNG图片",
|
|
|
+ gif: "GIF图片",
|
|
|
+ mp4: "MP4视频",
|
|
|
+ mp3: "MP3音频",
|
|
|
+ pdf: "PDF文档",
|
|
|
+ doc: "Word文档",
|
|
|
+ docx: "Word文档",
|
|
|
+ xls: "Excel表格",
|
|
|
+ xlsx: "Excel表格",
|
|
|
+ ppt: "PPT演示",
|
|
|
+ pptx: "PPT演示",
|
|
|
+ txt: "文本文件",
|
|
|
+ other: "其他文件",
|
|
|
+ };
|
|
|
+ return typeMap[type] || type;
|
|
|
},
|
|
|
+
|
|
|
/* 获取知识库目录 */
|
|
|
- init(val){
|
|
|
- const tList={
|
|
|
+ init(val) {
|
|
|
+ /* const tList={
|
|
|
page: 1,
|
|
|
pageSize: 9999,
|
|
|
kb_id: val,
|
|
@@ -179,8 +219,9 @@ export default {
|
|
|
console.log(res);
|
|
|
if(res.status!==200) return
|
|
|
this.dirList=res.data.dataList
|
|
|
- })
|
|
|
+ }) */
|
|
|
+ /* 获取汇总 */
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|