|
|
@@ -3,26 +3,26 @@
|
|
|
<!-- 统计指标 -->
|
|
|
<div class="stats-container">
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-value">1,356</div>
|
|
|
<div class="stat-label">总打标数</div>
|
|
|
+ <div class="stat-value">{{ overviewData.countNum }}</div>
|
|
|
<div class="stat-icon blue"><i class="el-icon-data-analysis"></i></div>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-value">1,124</div>
|
|
|
<div class="stat-label">准确标签数</div>
|
|
|
- <div class="stat-rate">准确率: 87.4%</div>
|
|
|
+ <div class="stat-value">{{ overviewData.accurateNum }}</div>
|
|
|
+ <div class="stat-rate">准确率: {{ overviewData.accurateRate }}</div>
|
|
|
<div class="stat-icon green"><i class="el-icon-check"></i></div>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-value">202</div>
|
|
|
<div class="stat-label">人工调整数</div>
|
|
|
- <div class="stat-rate">调整率: 13.6%</div>
|
|
|
+ <div class="stat-value">{{ overviewData.manualAdjustCount }}</div>
|
|
|
+ <div class="stat-rate">调整率: {{ overviewData.manualAdjustRate }}</div>
|
|
|
<div class="stat-icon yellow"><i class="el-icon-s-operation"></i></div>
|
|
|
</div>
|
|
|
<div class="stat-item">
|
|
|
- <div class="stat-value">1,356</div>
|
|
|
- <div class="stat-label">平均处理时长</div>
|
|
|
- <div class="stat-icon purple"><i class="el-icon-time"></i></div>
|
|
|
+ <div class="stat-label">打标未确认</div>
|
|
|
+ <div class="stat-value">{{ overviewData.taggedUnconfirmed }}</div>
|
|
|
+ <div class="stat-icon purple"><i class="el-icon-question"></i></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -35,7 +35,6 @@
|
|
|
<div class="chart-period">
|
|
|
<el-radio-group v-model="trendPeriod" size="small">
|
|
|
<el-radio-button label="day">日</el-radio-button>
|
|
|
- <el-radio-button label="week">周</el-radio-button>
|
|
|
<el-radio-button label="month">月</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</div>
|
|
|
@@ -80,16 +79,246 @@ export default {
|
|
|
return {
|
|
|
// 图表实例
|
|
|
trendChart: null,
|
|
|
- distributionChart: null
|
|
|
+ distributionChart: null,
|
|
|
+
|
|
|
+ // 统计数据
|
|
|
+ overviewData: {
|
|
|
+ countNum: 0,
|
|
|
+ accurateNum: 0,
|
|
|
+ accurateRate: '0%',
|
|
|
+ manualAdjustCount: 0,
|
|
|
+ manualAdjustRate: '0%',
|
|
|
+ taggedUnconfirmed: 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ trendPeriod: {
|
|
|
+ type: String,
|
|
|
+ default: 'month'
|
|
|
+ },
|
|
|
+ tagSort: {
|
|
|
+ type: String,
|
|
|
+ default: 'desc'
|
|
|
+ },
|
|
|
+ searchParams: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({
|
|
|
+ dateRange: [],
|
|
|
+ tagSystem: ''
|
|
|
+ })
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
// 使用nextTick确保DOM元素已渲染完成
|
|
|
this.$nextTick(() => {
|
|
|
+ this.loadOverviewData()
|
|
|
this.initCharts()
|
|
|
})
|
|
|
},
|
|
|
+ watch: {
|
|
|
+ // 监听搜索参数变化,重新加载数据
|
|
|
+ searchParams: {
|
|
|
+ handler() {
|
|
|
+ this.loadOverviewData()
|
|
|
+ this.loadTrendData()
|
|
|
+ this.loadDistributionData()
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ // 监听趋势周期变化,重新加载趋势数据
|
|
|
+ trendPeriod() {
|
|
|
+ this.loadTrendData()
|
|
|
+ },
|
|
|
+ // 监听排序方式变化,重新加载分布数据
|
|
|
+ tagSort() {
|
|
|
+ this.loadDistributionData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
methods: {
|
|
|
+ // 加载概览数据
|
|
|
+ loadOverviewData() {
|
|
|
+ // 构建请求参数
|
|
|
+ const params = {
|
|
|
+ startTaggingTime: this.searchParams.dateRange[0] || '',
|
|
|
+ endTaggingTime: this.searchParams.dateRange[1] || '',
|
|
|
+ categoryCode: this.searchParams.tagSystem || ''
|
|
|
+ };
|
|
|
+ console.log('加载概览数据参数:', params);
|
|
|
+
|
|
|
+ // 调用后端接口
|
|
|
+ yufp.service.request({
|
|
|
+ url: backend.tagServer + "/api/aitagtaglog/dataOverview",
|
|
|
+ method: 'post',
|
|
|
+ data: params,
|
|
|
+ callback: (code, error, response) => {
|
|
|
+ if (response.code == '0') {
|
|
|
+ // 更新统计数据
|
|
|
+ this.overviewData = {
|
|
|
+ countNum: response.data.countNum || 0,
|
|
|
+ accurateNum: response.data.accurateNum || 0,
|
|
|
+ accurateRate: response.data.accurateRate || '0%',
|
|
|
+ manualAdjustCount: response.data.manualAdjustCount || 0,
|
|
|
+ manualAdjustRate: response.data.manualAdjustRate || '0%',
|
|
|
+ taggedUnconfirmed: response.data.taggedUnconfirmed || 0
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.message || '获取概览数据失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载打标趋势数据
|
|
|
+ loadTrendData() {
|
|
|
+ // 构建请求参数
|
|
|
+ const params = {
|
|
|
+ startTaggingTime: this.searchParams.dateRange[0] || '',
|
|
|
+ endTaggingTime: this.searchParams.dateRange[1] || '',
|
|
|
+ categoryCode: this.searchParams.tagSystem || '',
|
|
|
+ statisticalPeriod: this.trendPeriod
|
|
|
+ };
|
|
|
+ console.log('加载打标趋势数据参数:', params);
|
|
|
+
|
|
|
+ // 调用后端接口
|
|
|
+ yufp.service.request({
|
|
|
+ url: backend.tagServer + "/api/aitagtaglog/taggingTrend",
|
|
|
+ method: 'post',
|
|
|
+ data: params,
|
|
|
+ callback: (code, error, response) => {
|
|
|
+ if (response.code == '0') {
|
|
|
+ // 更新打标趋势图表
|
|
|
+ this.updateTrendChart(response.data || [])
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.message || '获取打标趋势数据失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 加载标签分布统计数据
|
|
|
+ loadDistributionData() {
|
|
|
+ // 构建请求参数
|
|
|
+ const params = {
|
|
|
+ startTaggingTime: this.searchParams.dateRange[0] || '',
|
|
|
+ endTaggingTime: this.searchParams.dateRange[1] || '',
|
|
|
+ categoryCode: this.searchParams.tagSystem || '',
|
|
|
+ sort: this.tagSort
|
|
|
+ };
|
|
|
+ console.log('加载标签分布统计数据参数:', params);
|
|
|
+
|
|
|
+ // 调用后端接口
|
|
|
+ yufp.service.request({
|
|
|
+ url: backend.tagServer + "/api/aitagtaglog/tagDistStats",
|
|
|
+ method: 'post',
|
|
|
+ data: params,
|
|
|
+ callback: (code, error, response) => {
|
|
|
+ if (response.code == '0') {
|
|
|
+ // 更新标签分布图表
|
|
|
+ this.updateDistributionChart(response.data || [])
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.message || '获取标签分布统计数据失败');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新打标趋势图表
|
|
|
+ updateTrendChart(data) {
|
|
|
+ if (!this.trendChart || !data || data.length === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const labels = data.map(item => item.label || '')
|
|
|
+ const values = data.map(item => item.value || 0)
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: labels
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '智能打标数',
|
|
|
+ type: 'line',
|
|
|
+ data: values,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#1890ff'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: '#1890ff'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.trendChart.setOption(option)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更新标签分布图表
|
|
|
+ updateDistributionChart(data) {
|
|
|
+ if (!this.distributionChart || !data || data.length === 0) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const names = data.map(item => item.name || '')
|
|
|
+ const values = data.map(item => item.value || 0)
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ axisPointer: {
|
|
|
+ type: 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: names,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 45
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '标签数量',
|
|
|
+ type: 'bar',
|
|
|
+ data: values,
|
|
|
+ itemStyle: {
|
|
|
+ color: function(params) {
|
|
|
+ const colors = ['#1890ff', '#36cfc9', '#52c41a', '#faad14', '#722ed1', '#eb2f96']
|
|
|
+ return colors[params.dataIndex % colors.length]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+
|
|
|
+ this.distributionChart.setOption(option)
|
|
|
+ },
|
|
|
+
|
|
|
// 初始化图表
|
|
|
initCharts() {
|
|
|
// 检查echarts是否正确加载
|
|
|
@@ -98,36 +327,14 @@ export default {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- // 模拟数据
|
|
|
- const trendData = [
|
|
|
- { month: '1月', value: 60 },
|
|
|
- { month: '2月', value: 80 },
|
|
|
- { month: '3月', value: 110 },
|
|
|
- { month: '4月', value: 65 },
|
|
|
- { month: '5月', value: 90 },
|
|
|
- { month: '6月', value: 130 },
|
|
|
- { month: '7月', value: 110 },
|
|
|
- { month: '8月', value: 140 },
|
|
|
- { month: '9月', value: 160 }
|
|
|
- ]
|
|
|
-
|
|
|
- const distributionData = [
|
|
|
- { name: '远洋捕捞', value: 150 },
|
|
|
- { name: '船舶制造', value: 130 },
|
|
|
- { name: '海水养殖', value: 100 },
|
|
|
- { name: '海洋运输', value: 70 },
|
|
|
- { name: '海洋旅游', value: 50 },
|
|
|
- { name: '生物医药', value: 40 }
|
|
|
- ]
|
|
|
-
|
|
|
// 初始化打标趋势图表
|
|
|
- this.initTrendChart(trendData)
|
|
|
+ this.initTrendChart()
|
|
|
// 初始化标签分布图表
|
|
|
- this.initDistributionChart(distributionData)
|
|
|
+ this.initDistributionChart()
|
|
|
},
|
|
|
|
|
|
// 初始化打标趋势图表
|
|
|
- initTrendChart(data) {
|
|
|
+ initTrendChart() {
|
|
|
if (!this.$refs.trendChart) {
|
|
|
console.error('trendChart DOM element not found');
|
|
|
return;
|
|
|
@@ -149,7 +356,7 @@ export default {
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
- data: data.map(item => item.month)
|
|
|
+ data: []
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value'
|
|
|
@@ -158,7 +365,7 @@ export default {
|
|
|
{
|
|
|
name: '智能打标数',
|
|
|
type: 'line',
|
|
|
- data: data.map(item => item.value),
|
|
|
+ data: [],
|
|
|
lineStyle: {
|
|
|
color: '#1890ff'
|
|
|
},
|
|
|
@@ -170,13 +377,16 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.trendChart.setOption(option)
|
|
|
+
|
|
|
+ // 初始化后加载数据
|
|
|
+ this.loadTrendData()
|
|
|
} catch (error) {
|
|
|
console.error('Error initializing trend chart:', error);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 初始化标签分布图表
|
|
|
- initDistributionChart(data) {
|
|
|
+ initDistributionChart() {
|
|
|
if (!this.$refs.distributionChart) {
|
|
|
console.error('distributionChart DOM element not found');
|
|
|
return;
|
|
|
@@ -200,7 +410,7 @@ export default {
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
- data: data.map(item => item.name),
|
|
|
+ data: [],
|
|
|
axisLabel: {
|
|
|
rotate: 45
|
|
|
}
|
|
|
@@ -212,7 +422,7 @@ export default {
|
|
|
{
|
|
|
name: '标签数量',
|
|
|
type: 'bar',
|
|
|
- data: data.map(item => item.value),
|
|
|
+ data: [],
|
|
|
itemStyle: {
|
|
|
color: function(params) {
|
|
|
const colors = ['#1890ff', '#36cfc9', '#52c41a', '#faad14', '#722ed1', '#eb2f96']
|
|
|
@@ -224,6 +434,9 @@ export default {
|
|
|
}
|
|
|
|
|
|
this.distributionChart.setOption(option)
|
|
|
+
|
|
|
+ // 初始化后加载数据
|
|
|
+ this.loadDistributionData()
|
|
|
} catch (error) {
|
|
|
console.error('Error initializing distribution chart:', error);
|
|
|
}
|