Aug
1 month ago
8 changed files with 685 additions and 127 deletions
Split View
Diff Options
-
+2 -0admin-hanhai-vue/package.json
-
+6 -0admin-hanhai-vue/src/api/exhibit.js
-
+380 -0admin-hanhai-vue/src/components/ExhibitDataBoard.vue
-
+155 -127admin-hanhai-vue/src/views/dashboard/Analysis.vue
-
+7 -0jeecg-boot-module-system/src/main/java/org/jeecg/modules/api/assessmentController/ConfigController.java
-
+3 -0jeecg-boot-module-system/src/main/java/org/jeecg/modules/api/service/ConfigService.java
-
+121 -0jeecg-boot-module-system/src/main/java/org/jeecg/modules/api/service/impl/ConfigServiceImpl.java
-
+11 -0jeecg-boot-module-system/src/main/java/org/jeecg/modules/api/utils/CommonUtils.java
+ 2
- 0
admin-hanhai-vue/package.json
View File
+ 6
- 0
admin-hanhai-vue/src/api/exhibit.js
View File
| @ -0,0 +1,6 @@ | |||
| import { getAction } from '@/api/manage' | |||
| // 展品相关API接口 | |||
| // 配置-数量统计 | |||
| export const queryCount = (params) => getAction("/assessment/config/queryCount", params); | |||
+ 380
- 0
admin-hanhai-vue/src/components/ExhibitDataBoard.vue
View File
| @ -0,0 +1,380 @@ | |||
| <template> | |||
| <div class="exhibit-data-board"> | |||
| <div class="data-cards"> | |||
| <a-card class="data-card" :class="item.cardClass" v-for="(item, index) in dataItems" :key="index"> | |||
| <div class="card-content"> | |||
| <div class="icon-wrapper"> | |||
| <a-icon :type="item.icon" class="data-icon" /> | |||
| </div> | |||
| <div class="data-info"> | |||
| <div class="data-title">{{ item.title }}</div> | |||
| <div class="data-value"> | |||
| <ICountUp | |||
| :endVal="item.value" | |||
| :options="countUpOptions" | |||
| @ready="onReady" | |||
| /> | |||
| </div> | |||
| <div class="data-unit" v-if="item.unit">{{ item.unit }}</div> | |||
| </div> | |||
| </div> | |||
| <div class="card-footer" v-if="item.description"> | |||
| <span class="description">{{ item.description }}</span> | |||
| </div> | |||
| </a-card> | |||
| </div> | |||
| <!-- 统计率数据行 --> | |||
| <div class="rate-cards" style="margin-top: 24px;"> | |||
| <a-card class="rate-card" :class="item.cardClass" v-for="(item, index) in rateItems" :key="index"> | |||
| <div class="rate-content"> | |||
| <div class="rate-icon"> | |||
| <a-icon :type="item.icon" /> | |||
| </div> | |||
| <div class="rate-info"> | |||
| <div class="rate-title">{{ item.title }}</div> | |||
| <div class="rate-value"> | |||
| <ICountUp | |||
| :endVal="item.value" | |||
| :options="rateCountUpOptions" | |||
| @ready="onReady" | |||
| /> | |||
| <span class="rate-symbol">%</span> | |||
| </div> | |||
| </div> | |||
| <!-- <div class="rate-trend" :class="item.trend">--> | |||
| <!-- <a-icon :type="item.trend === 'up' ? 'arrow-up' : 'arrow-down'" />--> | |||
| <!-- <span>{{ item.trendValue }}%</span>--> | |||
| <!-- </div>--> | |||
| </div> | |||
| </a-card> | |||
| </div> | |||
| <!-- 维修保养统计 --> | |||
| <div class="maintenance-cards" style="margin-top: 24px;"> | |||
| <a-card class="maintenance-card" v-for="(item, index) in maintenanceItems" :key="index"> | |||
| <div class="maintenance-content"> | |||
| <div class="maintenance-header"> | |||
| <a-icon :type="item.icon" class="maintenance-icon" /> | |||
| <span class="maintenance-title">{{ item.title }}</span> | |||
| </div> | |||
| <div class="maintenance-value"> | |||
| <ICountUp | |||
| :endVal="item.value" | |||
| :options="rateCountUpOptions" | |||
| @ready="onReady" | |||
| /> | |||
| </div> | |||
| <div class="maintenance-footer"> | |||
| <span class="maintenance-desc">{{ item.description }}</span> | |||
| </div> | |||
| </div> | |||
| </a-card> | |||
| </div> | |||
| </div> | |||
| </template> | |||
| <script> | |||
| import ICountUp from 'vue-countup-v2' | |||
| import { queryCount } from '@/api/exhibit' | |||
| export default { | |||
| name: 'ExhibitDataBoard', | |||
| components: { | |||
| ICountUp | |||
| }, | |||
| data() { | |||
| return { | |||
| countUpOptions: { | |||
| useEasing: true, | |||
| useGrouping: true, | |||
| separator: ',', | |||
| decimal: '.', | |||
| duration: 2.5 | |||
| }, | |||
| rateCountUpOptions: { | |||
| useEasing: true, | |||
| useGrouping: false, | |||
| decimal: '.', | |||
| decimalPlaces: 2, | |||
| duration: 2.5 | |||
| }, | |||
| dataItems: [], | |||
| rateItems: [], | |||
| maintenanceItems: [] | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.loadStatisticsData() | |||
| }, | |||
| methods: { | |||
| onReady(instance, CountUp) { | |||
| // CountUp实例准备就绪 | |||
| }, | |||
| async loadStatisticsData() { | |||
| try { | |||
| const response = await queryCount() | |||
| if (response.success) { | |||
| const data = response.result | |||
| this.dataItems = data.dataItems || [] | |||
| this.rateItems = data.rateItems || [] | |||
| this.maintenanceItems = data.maintenanceItems || [] | |||
| } else { | |||
| this.$message.error('获取统计数据失败：' + response.message) | |||
| } | |||
| } catch (error) { | |||
| console.error('获取统计数据失败：', error) | |||
| this.$message.error('获取统计数据失败') | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped> | |||
| .exhibit-data-board { | |||
| padding: 24px; | |||
| background: #f5f5f5; | |||
| min-height: 100vh; | |||
| } | |||
| .data-cards { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| gap: 24px; | |||
| margin-bottom: 16px; | |||
| } | |||
| .data-cards .data-card { | |||
| flex: 1; | |||
| min-width: 250px; | |||
| border-radius: 12px; | |||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |||
| transition: all 0.3s ease; | |||
| margin-bottom: 16px; | |||
| } | |||
| .data-card:hover { | |||
| transform: translateY(-4px); | |||
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); | |||
| } | |||
| .card-content { | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 8px 0; | |||
| } | |||
| .icon-wrapper { | |||
| margin-right: 16px; | |||
| } | |||
| .data-icon { | |||
| font-size: 36px; | |||
| color: #1890ff; | |||
| } | |||
| .primary-card .data-icon { | |||
| color: #1890ff; | |||
| } | |||
| .warning-card .data-icon { | |||
| color: #faad14; | |||
| } | |||
| .danger-card .data-icon { | |||
| color: #f5222d; | |||
| } | |||
| .info-card .data-icon { | |||
| color: #722ed1; | |||
| } | |||
| .data-info { | |||
| flex: 1; | |||
| } | |||
| .data-title { | |||
| font-size: 14px; | |||
| color: #666; | |||
| margin-bottom: 4px; | |||
| } | |||
| .data-value { | |||
| font-size: 28px; | |||
| font-weight: bold; | |||
| color: #262626; | |||
| line-height: 1; | |||
| } | |||
| .data-unit { | |||
| font-size: 12px; | |||
| color: #999; | |||
| margin-top: 4px; | |||
| } | |||
| .card-footer { | |||
| margin-top: 12px; | |||
| padding-top: 12px; | |||
| border-top: 1px solid #f0f0f0; | |||
| } | |||
| .description { | |||
| font-size: 12px; | |||
| color: #999; | |||
| } | |||
| /* 统计率卡片样式 */ | |||
| .rate-cards { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| gap: 24px; | |||
| margin-bottom: 16px; | |||
| } | |||
| .rate-cards .rate-card { | |||
| flex: 1; | |||
| min-width: 280px; | |||
| border-radius: 12px; | |||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |||
| transition: all 0.3s ease; | |||
| margin-bottom: 16px; | |||
| } | |||
| .rate-card:hover { | |||
| transform: translateY(-2px); | |||
| box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); | |||
| } | |||
| .rate-content { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| } | |||
| .rate-icon { | |||
| font-size: 24px; | |||
| margin-right: 12px; | |||
| } | |||
| .success-rate .rate-icon { | |||
| color: #52c41a; | |||
| } | |||
| .warning-rate .rate-icon { | |||
| color: #faad14; | |||
| } | |||
| .danger-rate .rate-icon { | |||
| color: #f5222d; | |||
| } | |||
| .rate-info { | |||
| flex: 1; | |||
| } | |||
| .rate-title { | |||
| font-size: 14px; | |||
| color: #666; | |||
| margin-bottom: 4px; | |||
| } | |||
| .rate-value { | |||
| font-size: 24px; | |||
| font-weight: bold; | |||
| color: #262626; | |||
| } | |||
| .rate-symbol { | |||
| font-size: 16px; | |||
| margin-left: 2px; | |||
| } | |||
| .rate-trend { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| font-size: 12px; | |||
| } | |||
| .rate-trend.up { | |||
| color: #52c41a; | |||
| } | |||
| .rate-trend.down { | |||
| color: #f5222d; | |||
| } | |||
| /* 维修保养卡片样式 */ | |||
| .maintenance-cards { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| gap: 24px; | |||
| margin-bottom: 16px; | |||
| } | |||
| .maintenance-cards .maintenance-card { | |||
| flex: 1; | |||
| min-width: 200px; | |||
| border-radius: 8px; | |||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |||
| transition: all 0.3s ease; | |||
| } | |||
| .maintenance-card:hover { | |||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | |||
| } | |||
| .maintenance-content { | |||
| text-align: center; | |||
| } | |||
| .maintenance-header { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| margin-bottom: 12px; | |||
| } | |||
| .maintenance-icon { | |||
| font-size: 20px; | |||
| color: #1890ff; | |||
| margin-right: 8px; | |||
| } | |||
| .maintenance-title { | |||
| font-size: 14px; | |||
| color: #666; | |||
| } | |||
| .maintenance-value { | |||
| font-size: 32px; | |||
| font-weight: bold; | |||
| color: #262626; | |||
| margin-bottom: 8px; | |||
| } | |||
| .maintenance-footer { | |||
| font-size: 12px; | |||
| color: #999; | |||
| } | |||
| /* 响应式设计 */ | |||
| @media (max-width: 768px) { | |||
| .exhibit-data-board { | |||
| padding: 16px; | |||
| } | |||
| .data-value { | |||
| font-size: 24px; | |||
| } | |||
| .rate-value { | |||
| font-size: 20px; | |||
| } | |||
| .maintenance-value { | |||
| font-size: 28px; | |||
| } | |||
| } | |||
| </style> | |||