diff --git a/src/components/DateRangePicker/index.vue b/src/components/DateRangePicker/index.vue new file mode 100644 index 0000000..c736ed8 --- /dev/null +++ b/src/components/DateRangePicker/index.vue @@ -0,0 +1,64 @@ + + diff --git a/src/router/index.js b/src/router/index.js index 0fd3640..c055eb8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -239,7 +239,7 @@ export const dynamicRoutes = [ permissions: ['system:equipment:query'], children: [ { - path: 'index/:equipmentId(\\d+)', + path: 'index/:roomId(\\d+)', component: () => import('@/views/system/equipment/equipment_detail'), name: 'EquipmentDetail', meta: { title: '设施详情', activeMenu: '/system/equipment' } diff --git a/src/views/system/equipment/equipment_detail.vue b/src/views/system/equipment/equipment_detail.vue index 10949ea..34b566c 100644 --- a/src/views/system/equipment/equipment_detail.vue +++ b/src/views/system/equipment/equipment_detail.vue @@ -1,120 +1,575 @@ \ No newline at end of file + +.operation-buttons { + // margin-left: auto; + display: flex; + flex-wrap: wrap; + gap: 5px; + justify-content: flex-end; + margin-bottom: 20px; + text-align: right; + .el-button { + margin: 0; + padding: 10px 10px; + } +} + +.box-card { + border-radius: 12px; + padding: 24px; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); +} + +.box-card:hover { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); +} + +.room-header { + margin-bottom: 48px; +} + +.image-wrapper { + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + position: relative; +} + +.image-wrapper:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); +} + +.room-image { + width: 100%; + height: 320px; + border-radius: 12px; + object-fit: cover; +} + +.room-title { + display: flex; + align-items: center; + margin-bottom: 28px; + padding-bottom: 16px; + border-bottom: 1px solid #EBEEF5; +} + +.room-title h2 { + margin: 0; + margin-right: 15px; + font-size: 28px; + color: #303133; + font-weight: 600; +} + +.status-tag { + margin-left: auto; + padding: 0 16px; + height: 28px; + line-height: 28px; + font-size: 14px; +} + +.room-info { + margin-top: 28px; +} + +.info-text { + color: #606266; + font-size: 14px; +} + +.tags-section { + margin-top: 28px; + padding: 16px; + background: #f9fafc; + border-radius: 8px; +} + +.tags-wrapper { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: 8px; +} + +.label { + color: #606266; + margin-right: 16px; + font-weight: 500; + font-size: 14px; +} + +.tag-item { + margin-right: 10px; + margin-bottom: 8px; + border-radius: 4px; + padding: 0 12px; + height: 28px; + line-height: 26px; +} + +.section-block { + margin-top: 48px; + padding-top: 32px; + border-top: 1px solid #EBEEF5; +} + +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 28px; +} + +h3 { + margin: 0; + font-size: 20px; + font-weight: 600; + color: #303133; + display: flex; + align-items: center; +} + +h3 i { + margin-right: 12px; + font-size: 24px; + color: #409EFF; +} + +.total-rules { + margin-top: 3px; +} + +.price { + color: #F56C6C; + font-weight: 600; + font-size: 16px; +} + +.unit { + color: #909399; + margin-left: 4px; + font-size: 14px; +} + +.image-slot { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + background: #f5f7fa; +} + +.image-slot i { + font-size: 48px; + color: #909399; +} + +.custom-table { + margin-top: 16px; + border-radius: 8px; + overflow: hidden; +} + +:deep(.el-descriptions) { + padding: 20px; + background-color: #fff; + border-radius: 8px; +} + +:deep(.el-descriptions__label) { + font-weight: 500; + color: #606266; +} + +:deep(.el-descriptions__content) { + padding: 12px 16px; +} + +:deep(.el-table th) { + background-color: #f5f7fa !important; + font-weight: 500; +} + +:deep(.el-table--border) { + border-radius: 8px; + overflow: hidden; +} + +:deep(.el-descriptions__body) { + background-color: #fff; +} + +:deep(.el-descriptions-item__label) { + background-color: #f5f7fa; + font-weight: 500; +} + +// 标签选择器样式 +.el-select { + :deep(.el-select__tags) { + flex-wrap: wrap; + + .el-tag { + margin: 2px; + max-width: none; + } + } + + :deep(.el-input__inner) { + height: auto; + min-height: 32px; + padding-top: 4px; + padding-bottom: 4px; + } +} + +.el-select-dropdown__item { + padding: 0 10px; + height: 32px; + line-height: 32px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.el-form-item { + margin-bottom: 18px; + + .el-select { + width: auto; + min-width: 240px; + max-width: 100%; + } +} + \ No newline at end of file diff --git a/src/views/system/room/room_detail.vue b/src/views/system/room/room_detail.vue index 52a80e1..d20fedd 100644 --- a/src/views/system/room/room_detail.vue +++ b/src/views/system/room/room_detail.vue @@ -327,8 +327,17 @@ export default { } .operation-buttons { + // margin-left: auto; + display: flex; + flex-wrap: wrap; + gap: 5px; + justify-content: flex-end; margin-bottom: 20px; text-align: right; + .el-button { + margin: 0; + padding: 10px 10px; + } } .box-card { diff --git a/src/views/user/user/components/UserDailyRechargeReport.vue b/src/views/user/user/components/UserDailyRechargeReport.vue index 4a33d4a..6b3e7fb 100644 --- a/src/views/user/user/components/UserDailyRechargeReport.vue +++ b/src/views/user/user/components/UserDailyRechargeReport.vue @@ -1,64 +1,155 @@ - - - - - - + - - - - - - +--> +export default { + name: "UserDailyRechargeReport", + components: { DateRangePicker }, + props: { + query: { + type: Object, + default: () => { + return {} + } + } + }, + data() { + return { + loading: false, + list: [], + queryParams: { + payDateStart: getLastDateStr(30), + payDateEnd: getLastDateStr(0), + arrivalId: null, + arrivalTypes: BonusArrivalType.userList() + }, + chart: null + } + }, + computed: { + labels() { + return this.list.map(item => item.key); + }, + chartData() { + return this.list.map(item => item.sum == null ? 0 : Number(item.sum.toFixed(2))); + } + }, + created() { + this.queryParams = { + ...this.queryParams, + ...this.query + } + this.getList(); + }, + mounted() { + this.initChart(); + }, + beforeDestroy() { + if (this.chart) { + this.chart.dispose(); + } + }, + methods: { + initChart() { + this.chart = echarts.init(this.$refs.chartRef); + this.updateChartData(); + }, + updateChartData() { + if (!this.chart) return; + + const option = { + tooltip: { + trigger: 'axis', + formatter: '{b}
{a}: {c}元' + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: this.labels + }, + yAxis: { + type: 'value', + axisLabel: { + formatter: '{value}元' + } + }, + series: [{ + name: '收入', + type: 'line', + data: this.chartData, + smooth: true, + symbol: 'circle', + symbolSize: 6, + itemStyle: { + color: '#409EFF' + }, + lineStyle: { + width: 2 + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: 'rgba(64,158,255,0.3)' + }, { + offset: 1, + color: 'rgba(64,158,255,0.1)' + }]) + } + }] + }; + + this.chart.setOption(option); + }, + getList() { + this.loading = true; + // 模拟API调用 + setTimeout(() => { + // 生成最近30天的模拟数据 + const mockData = Array.from({length: 30}, (_, i) => { + const date = new Date(); + date.setDate(date.getDate() - i); + return { + key: `${date.getMonth() + 1}-${date.getDate()}`, + sum: Math.random() * 1000 + } + }).reverse(); + + this.list = mockData; + this.loading = false; + // 更新图表数据 + this.$nextTick(() => { + this.updateChartData(); + }); + }, 500) + } + }, + watch: { + // 监听窗口大小变化，重绘图表 + '$store.state.app.sidebar.opened': { + handler() { + if (this.chart) { + this.$nextTick(() => { + this.chart.resize(); + }); + } + } + } + } +} + \ No newline at end of file diff --git a/src/views/user/user/detail.vue b/src/views/user/user/detail.vue index ec0fd27..802efe0 100644 --- a/src/views/user/user/detail.vue +++ b/src/views/user/user/detail.vue @@ -1,180 +1,565 @@ - - + +.app-container .box-card:nth-child(n + 1) { + margin-top: 1em; +} + \ No newline at end of file diff --git a/src/views/user/user/index.vue b/src/views/user/user/index.vue index 00f7af1..03bae84 100644 --- a/src/views/user/user/index.vue +++ b/src/views/user/user/index.vue @@ -135,6 +135,7 @@ icon="el-icon-view" @click="handleView(scope.row)" v-hasPermi="['system:smUser:detail']" + v-if="scope.row.userType == '01'" >详情