4 changed files with 727 additions and 256 deletions
Unified View
Diff Options
-
+23 -0.gitignore
-
+2 -0admin-hanhai-vue/package.json
-
+418 -0admin-hanhai-vue/src/components/ExhibitDataBoard.vue
-
+284 -256admin-hanhai-vue/src/views/dashboard/Analysis.vue
+ 23
- 0
.gitignore
View File
| @ -0,0 +1,23 @@ | |||||
| .DS_Store | |||||
| node_modules | |||||
| /dist | |||||
| # local env files | |||||
| .env.local | |||||
| .env.*.local | |||||
| # Log files | |||||
| npm-debug.log* | |||||
| yarn-debug.log* | |||||
| yarn-error.log* | |||||
| # Editor directories and files | |||||
| .idea | |||||
| .vscode | |||||
| *.suo | |||||
| *.ntvs* | |||||
| *.njsproj | |||||
| *.sln | |||||
| *.sw* | |||||
| target | |||||
| .idea/**.* | |||||
+ 2
- 0
admin-hanhai-vue/package.json
View File
+ 418
- 0
admin-hanhai-vue/src/components/ExhibitDataBoard.vue
View File
| @ -0,0 +1,418 @@ | |||||
| <template> | |||||
| <div class="exhibit-data-board"> | |||||
| <a-row :gutter="24" class="data-cards"> | |||||
| <a-col :xs="24" :sm="12" :md="6" v-for="(item, index) in dataItems" :key="index"> | |||||
| <a-card class="data-card" :class="item.cardClass"> | |||||
| <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> | |||||
| </a-col> | |||||
| </a-row> | |||||
| <!-- 统计率数据行 --> | |||||
| <a-row :gutter="24" class="rate-cards" style="margin-top: 24px;"> | |||||
| <a-col :xs="24" :sm="12" :md="8" v-for="(item, index) in rateItems" :key="index"> | |||||
| <a-card class="rate-card" :class="item.cardClass"> | |||||
| <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> | |||||
| </a-col> | |||||
| </a-row> | |||||
| <!-- 维修保养统计 --> | |||||
| <a-row :gutter="24" class="maintenance-cards" style="margin-top: 24px;"> | |||||
| <a-col :xs="24" :sm="12" :md="6" v-for="(item, index) in maintenanceItems" :key="index"> | |||||
| <a-card class="maintenance-card"> | |||||
| <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="countUpOptions" | |||||
| @ready="onReady" | |||||
| /> | |||||
| </div> | |||||
| <div class="maintenance-footer"> | |||||
| <span class="maintenance-desc">{{ item.description }}</span> | |||||
| </div> | |||||
| </div> | |||||
| </a-card> | |||||
| </a-col> | |||||
| </a-row> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import ICountUp from 'vue-countup-v2' | |||||
| 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: 1, | |||||
| duration: 2.5 | |||||
| }, | |||||
| dataItems: [ | |||||
| { | |||||
| title: '展品数量', | |||||
| value: 1256, | |||||
| icon: 'database', | |||||
| cardClass: 'primary-card', | |||||
| description: '总展品数量' | |||||
| }, | |||||
| { | |||||
| title: '维护中数量', | |||||
| value: 89, | |||||
| icon: 'tool', | |||||
| cardClass: 'warning-card', | |||||
| description: '正在维护的展品' | |||||
| }, | |||||
| { | |||||
| title: '无法使用数量', | |||||
| value: 23, | |||||
| icon: 'exclamation-circle', | |||||
| cardClass: 'danger-card', | |||||
| description: '故障无法使用' | |||||
| }, | |||||
| { | |||||
| title: '其它', | |||||
| value: 45, | |||||
| icon: 'question-circle', | |||||
| cardClass: 'info-card', | |||||
| description: '其他状态展品' | |||||
| } | |||||
| ], | |||||
| rateItems: [ | |||||
| { | |||||
| title: '完好率', | |||||
| value: 92.5, | |||||
| icon: 'check-circle', | |||||
| cardClass: 'success-rate', | |||||
| trend: 'up', | |||||
| trendValue: 2.3 | |||||
| }, | |||||
| { | |||||
| title: '维修率', | |||||
| value: 7.1, | |||||
| icon: 'setting', | |||||
| cardClass: 'warning-rate', | |||||
| trend: 'down', | |||||
| trendValue: 1.2 | |||||
| }, | |||||
| { | |||||
| title: '故障率', | |||||
| value: 1.8, | |||||
| icon: 'warning', | |||||
| cardClass: 'danger-rate', | |||||
| trend: 'down', | |||||
| trendValue: 0.5 | |||||
| } | |||||
| ], | |||||
| maintenanceItems: [ | |||||
| { | |||||
| title: '维修次数', | |||||
| value: 156, | |||||
| icon: 'wrench', | |||||
| description: '本月维修总次数' | |||||
| }, | |||||
| { | |||||
| title: '保养次数', | |||||
| value: 89, | |||||
| icon: 'safety-certificate', | |||||
| description: '本月保养总次数' | |||||
| }, | |||||
| { | |||||
| title: '维修次数/最多展品', | |||||
| value: 12, | |||||
| icon: 'bar-chart', | |||||
| description: '单个展品最多维修次数' | |||||
| }, | |||||
| { | |||||
| title: '平均维修时长', | |||||
| value: 4.5, | |||||
| icon: 'clock-circle', | |||||
| description: '小时' | |||||
| } | |||||
| ] | |||||
| } | |||||
| }, | |||||
| methods: { | |||||
| onReady(instance, CountUp) { | |||||
| // CountUp实例准备就绪 | |||||
| } | |||||
| } | |||||
| } | |||||
| </script> | |||||
| <style scoped> | |||||
| .exhibit-data-board { | |||||
| padding: 24px; | |||||
| background: #f5f5f5; | |||||
| min-height: 100vh; | |||||
| } | |||||
| .data-cards .data-card { | |||||
| 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 .rate-card { | |||||
| 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 .maintenance-card { | |||||
| 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> | |||||