4 changed files with 727 additions and 256 deletions
Split 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> | |||