From b989fca1dff5f648e328787986dfbc27f8656866 Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Fri, 10 Jan 2025 17:51:42 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                          |   2 +-
 src/api/system/device.js                  |   9 +
 src/components/Charts/LineChart.vue       | 198 +++++++
 src/components/Charts/MiniLine.vue        | 207 ++++---
 src/views/index.vue                       | 639 ++++++++++++++++++++--
 src/views/system/device/device_detail.vue |  23 +-
 src/views/system/room/index.vue           |   6 +-
 src/views/system/room/room_detail.vue     | 237 ++++----
 src/views/system/store/index.vue          |   6 +-
 src/views/system/store/store_detail.vue   |  85 ++-
 src/views/user/user/detail.vue            |   2 +-
 11 files changed, 1118 insertions(+), 296 deletions(-)
 create mode 100644 src/components/Charts/LineChart.vue

diff --git a/.env.development b/.env.development
index 6e0da17..5f7a26e 100644
--- a/.env.development
+++ b/.env.development
@@ -6,7 +6,7 @@ ENV = 'development'
 
 # 共享空间/开发环境
 # VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
-VUE_APP_BASE_API = 'http://192.168.2.43:8089'
+VUE_APP_BASE_API = 'http://192.168.2.63:8089'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/src/api/system/device.js b/src/api/system/device.js
index aa8a103..f326185 100644
--- a/src/api/system/device.js
+++ b/src/api/system/device.js
@@ -154,4 +154,13 @@ export function placementDevice(data){
     method: 'post',
     data: data
   })
+}
+
+
+// 设备绑定商户
+export function bindMch(deviceId,mchId){
+  return request({
+    url: '/system/device/'+deviceId+'/bindMch?mchId='+mchId,
+    method: 'put'
+  })
 }
\ No newline at end of file
diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue
new file mode 100644
index 0000000..0085e48
--- /dev/null
+++ b/src/components/Charts/LineChart.vue
@@ -0,0 +1,198 @@
+<template>
+    <div ref="chart" :style="{ width: '100%', height: height }"></div>
+  </template>
+  
+  <script>
+  import * as echarts from 'echarts'
+  import { debounce } from 'lodash'
+  
+  export default {
+    name: 'LineChart',
+    props: {
+      data: {
+        type: Object,
+        required: true
+      },
+      height: {
+        type: String,
+        default: '350px'
+      },
+      showHours: {
+        type: Boolean,
+        default: false
+      },
+      yAxisInterval: {
+        type: Number,
+        default: null
+      }
+    },
+    data() {
+      return {
+        chart: null
+      }
+    },
+    mounted() {
+      this.initChart()
+      this.__resizeHandler = debounce(() => {
+        if (this.chart) {
+          this.chart.resize()
+        }
+      }, 100)
+      window.addEventListener('resize', this.__resizeHandler)
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return
+      }
+      window.removeEventListener('resize', this.__resizeHandler)
+      this.chart.dispose()
+      this.chart = null
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(this.$refs.chart)
+        this.setOptions()
+      },
+      setOptions() {
+        const option = {
+          tooltip: {
+            trigger: 'axis',
+            backgroundColor: 'rgba(50, 50, 50, 0.9)',
+            borderWidth: 0,
+            textStyle: {
+              color: '#fff'
+            },
+            axisPointer: {
+              type: 'line',
+              lineStyle: {
+                color: '#ddd'
+              }
+            }
+          },
+          legend: {
+            data: this.data.datasets.map(item => item.label),
+            bottom: 0,
+            icon: 'circle',
+            itemWidth: 8,
+            itemHeight: 8,
+            itemGap: 15,
+            textStyle: {
+              color: '#666'
+            }
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '15%',
+            top: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: this.data.labels,
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              lineStyle: {
+                color: '#eee'
+              }
+            },
+            axisLabel: {
+              color: '#666',
+              formatter: (value) => {
+                if (this.showHours) {
+                  return value
+                }
+                return value.substring(5) // 只显示月-日
+              }
+            }
+          },
+          yAxis: {
+            type: 'value',
+            splitLine: {
+              lineStyle: {
+                color: '#eee'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLine: {
+              show: false
+            },
+            axisLabel: {
+              color: '#666',
+              formatter: (value) => {
+                if (value >= 1000) {
+                  return (value / 1000) + 'k'
+                }
+                return value
+              }
+            },
+            interval: this.yAxisInterval
+          },
+          series: this.data.datasets.map(dataset => ({
+            name: dataset.label,
+            type: 'line',
+            data: dataset.data,
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 8,
+            showSymbol: false,
+            emphasis: {
+              focus: 'series',
+              scale: false,
+              itemStyle: {
+                symbolSize: 8
+              }
+            },
+            lineStyle: {
+              width: 2,
+              color: dataset.color
+            },
+            itemStyle: {
+              color: dataset.color,
+              borderWidth: 2,
+              borderColor: '#fff'
+            },
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: this.adjustColor(dataset.color, 0.3)
+                },
+                {
+                  offset: 1,
+                  color: this.adjustColor(dataset.color, 0.1)
+                }
+              ])
+            }
+          }))
+        }
+        
+        this.chart.setOption(option)
+      },
+      adjustColor(color, opacity) {
+        // 将十六进制颜色转换为 rgba
+        if (color.startsWith('#')) {
+          const r = parseInt(color.slice(1, 3), 16)
+          const g = parseInt(color.slice(3, 5), 16)
+          const b = parseInt(color.slice(5, 7), 16)
+          return `rgba(${r}, ${g}, ${b}, ${opacity})`
+        }
+        // 如果已经是 rgba 格式，直接返回
+        return color
+      }
+    },
+    watch: {
+      data: {
+        handler() {
+          this.setOptions()
+        },
+        deep: true
+      }
+    }
+  }
+  </script>
\ No newline at end of file
diff --git a/src/components/Charts/MiniLine.vue b/src/components/Charts/MiniLine.vue
index d3c07b2..a833413 100644
--- a/src/components/Charts/MiniLine.vue
+++ b/src/components/Charts/MiniLine.vue
@@ -1,81 +1,144 @@
 <template>
-    <div class="mini-line" ref="chart"></div>
-  </template>
-  
-  <script>
-  import * as echarts from 'echarts'
-  
-  export default {
-    name: 'MiniLine',
-    props: {
-      data: {
-        type: Array,
-        required: true
-      },
-      color: {
-        type: String,
-        default: '#409EFF'
-      }
+  <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'MiniLine',
+  props: {
+    data: {
+      type: Array,
+      required: true
     },
-    mounted() {
-      this.initChart()
+    color: {
+      type: String,
+      default: '#409EFF'
     },
-    methods: {
-      initChart() {
-        this.chart = echarts.init(this.$refs.chart)
-        
-        const option = {
-          grid: {
-            left: 0,
-            right: 0,
-            top: 0,
-            bottom: 0
+    title: {
+      type: String,
+      default: ''
+    },
+    prefix: {
+      type: String,
+      default: ''
+    },
+    suffix: {
+      type: String,
+      default: ''
+    },
+    tooltipFormatter: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none'
           },
-          xAxis: {
-            type: 'category',
-            show: false,
-            boundaryGap: false
+          backgroundColor: 'rgba(50, 50, 50, 0.8)',
+          borderWidth: 0,
+          padding: [5, 10],
+          textStyle: {
+            color: '#fff',
+            fontSize: 12
           },
-          yAxis: {
-            type: 'value',
-            show: false
-          },
-          series: [{
-            type: 'line',
-            data: this.data,
-            smooth: true,
-            symbol: 'none',
-            lineStyle: {
-              color: this.color,
-              width: 1
-            },
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                offset: 0,
-                color: this.color
-              }, {
-                offset: 1,
-                color: '#fff'
-              }]),
-              opacity: 0.2
+          formatter: (params) => {
+            if (this.tooltipFormatter) {
+              return this.tooltipFormatter(params[0]);
             }
+            return params[0].value;
+          },
+          position: function (pos, params, el, elRect, size) {
+            // 将 tooltip 固定在数据点上方
+            return {
+              top: pos[1] - 40,
+              left: pos[0] - 50
+            };
+          }
+        },
+        grid: {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0
+        },
+        xAxis: {
+          type: 'category',
+          show: false,
+          boundaryGap: false
+        },
+        yAxis: {
+          type: 'value',
+          show: false
+        },
+        series: [{
+          data: this.data,
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 6,
+          showSymbol: false,
+          emphasis: {
+            scale: false,
+            focus: 'series'
+          },
+          lineStyle: {
+            color: this.color,
+            width: 2
+          },
+          itemStyle: {
+            color: this.color,
+            borderWidth: 2,
+            borderColor: '#fff'
+          },
+          areaStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+              offset: 0,
+              color: this.color
+            }, {
+              offset: 1,
+              color: 'rgba(255, 255, 255, 0)'
+            }])
+          }
+        }]
+      }
+      
+      this.chart.setOption(option)
+    }
+  },
+  watch: {
+    data: {
+      handler(newValue) {
+        this.chart && this.chart.setOption({
+          series: [{
+            data: newValue
           }]
-        }
-        
-        this.chart.setOption(option)
-      }
-    },
-    beforeDestroy() {
-      if (this.chart) {
-        this.chart.dispose()
-      }
+        })
+      },
+      deep: true
     }
   }
-  </script>
-  
-  <style scoped>
-  .mini-line {
-    width: 100%;
-    height: 100%;
-  }
-  </style>
\ No newline at end of file
+}
+</script>
\ No newline at end of file
diff --git a/src/views/index.vue b/src/views/index.vue
index b3bdbbe..e1b20c6 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,95 +1,521 @@
 <template>
   <div class="app-container" v-loading="loading">
-    <template>
-      <!-- 统计卡片行 -->
-      <el-row :gutter="20" class="statistics-cards">
-        <el-col :span="6" v-for="(stat, index) in statisticsData" :key="index">
-          <div class="stat-card">
-            <div class="stat-header">
-              <span class="stat-title">{{ stat.label }}</span>
-              <el-tooltip v-if="stat.tip" :content="stat.tip" placement="top">
-                <i class="el-icon-question"></i>
-              </el-tooltip>
+    <!-- 统计卡片行 -->
+    <el-row :gutter="20" class="statistics-cards">
+      <el-col :span="4" v-for="(stat, index) in statisticsData" :key="index">
+        <div class="stat-card" :style="{ '--bg-color': stat.bgColor }">
+          <div class="stat-header">
+            <i :class="stat.icon" :style="{ color: stat.chartColor }"></i>
+            <span class="stat-title">{{ stat.label }}</span>
+            <el-tooltip v-if="stat.tip" :content="stat.tip" placement="top">
+              <i class="el-icon-question"></i>
+            </el-tooltip>
+          </div>
+          <div class="stat-body">
+            <div class="stat-value">
+              <template v-if="stat.isMoney">¥ {{ formatNumber(mockDetail[stat.field]) }}</template>
+              <template v-else>{{ mockDetail[stat.field] || '0' }}{{ stat.suffix }}</template>
             </div>
-            <div class="stat-body">
-              <div class="stat-value">
-                <template v-if="stat.isMoney">¥ {{ detail[stat.field] || '0.00' }}</template>
-                <template v-else>{{ detail[stat.field] || '0' }}</template>
-              </div>
-              <div class="stat-trend" v-if="stat.today !== undefined">
-                今日 
-                <span :class="['trend-value', stat.today > 0 ? 'up' : 'down']">
-                  {{ stat.today }}
-                  <i :class="stat.today > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
-                </span>
-              </div>
-            </div>
-            <div class="stat-chart" v-if="stat.chartData">
-              <mini-line :data="stat.chartData" :color="stat.chartColor" />
+            <div class="stat-trend" v-if="stat.today !== undefined">
+              今日 
+              <span :class="['trend-value', stat.today > 0 ? 'up' : 'down']">
+                <template v-if="stat.isMoney">¥ {{ formatNumber(Math.abs(stat.today)) }}</template>
+                <template v-else>{{ Math.abs(stat.today) }}</template>
+                <i :class="stat.today > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
+              </span>
             </div>
           </div>
-        </el-col>
-      </el-row>
+          <div class="stat-chart" v-if="stat.chartData">
+            <mini-line 
+              :data="stat.chartData" 
+              :color="stat.chartColor"
+              :title="stat.label"
+              :prefix="stat.isMoney ? '¥ ' : ''"
+              :suffix="stat.suffix || ''"
+              :tooltip-formatter="(data) => formatTooltip(data, stat)"
+            />
+          </div>
+        </div>
+      </el-col>
+    </el-row>
 
-      <!-- 其他内容保持不变 -->
-    </template>
+    <!-- 第二行：待办事项和图表 -->
+    <el-row :gutter="20" class="dashboard-content">
+      <!-- 待办事项 -->
+      <el-col :span="6">
+        <el-card class="todo-card" shadow="never">
+          <div slot="header">
+            <span>待办事项</span>
+          </div>
+          <div class="todo-list">
+            <div v-for="(item, index) in todoItems" :key="index" class="todo-item">
+              <div class="item-left">
+                <i :class="item.icon" :style="{color: item.color}"></i>
+                <span>{{ item.title }}</span>
+              </div>
+              <div class="item-right">
+                <span :style="{color: item.count > 0 ? '#409EFF' : '#909399'}">{{ item.count }}</span>
+                <span>条</span>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 支付对账 -->
+      <el-col :span="9">
+        <el-card class="chart-card" shadow="never">
+          <div slot="header">
+            <span>支付对账</span>
+            <el-date-picker
+              v-model="paymentDateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small"
+              :picker-options="pickerOptions"
+            />
+          </div>
+          <div class="chart-container">
+            <line-chart :data="paymentChartData" height="300px" />
+          </div>
+        </el-card>
+      </el-col>
+
+      <!-- 收入及成本 -->
+      <el-col :span="9">
+        <el-card class="chart-card" shadow="never">
+          <div slot="header">
+            <span>收入及成本</span>
+            <el-date-picker
+              v-model="incomeDateRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              size="small"
+              :picker-options="pickerOptions"
+            />
+          </div>
+          <div class="chart-container">
+            <line-chart :data="incomeChartData" height="300px" />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 第三行：每日充值提现 -->
+    <el-row :gutter="20" class="dashboard-content">
+      <el-col :span="24">
+        <el-card class="chart-card" shadow="never">
+          <div slot="header">
+            <span>每日充值提现</span>
+            <el-date-picker
+              v-model="dailyTransactionDate"
+              type="date"
+              placeholder="选择日期"
+              size="small"
+              :picker-options="pickerOptions"
+            />
+          </div>
+          <div class="chart-container">
+            <line-chart 
+              :data="dailyTransactionData" 
+              height="300px"
+              :y-axis-interval="100"
+              :show-hours="true"
+            />
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 第四行：店铺地图分布 -->
+    <el-row :gutter="20" class="dashboard-content">
+      <el-col :span="24">
+        <el-card class="map-card" shadow="never">
+          <div slot="header">
+            <span>店铺分布</span>
+          </div>
+          <div class="map-container" id="storeMap"></div>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-// ... 其他 import 保持不变 ...
-import MiniLine from '@/components/Charts/MiniLine'  // 需要创建这个迷你折线图组件
+import MiniLine from '@/components/Charts/MiniLine'
+import LineChart from '@/components/Charts/LineChart'
+import AMapLoader from "@amap/amap-jsapi-loader"
+import globalConfig from '@/utils/config/globalConfig'
 
 export default {
+  name: 'Dashboard',
   components: {
-    // ... 其他组件保持不变 ...
-    MiniLine
+    MiniLine,
+    LineChart
   },
   data() {
     return {
-      // ... 其他 data 保持不变 ...
+      loading: false,
+      map: null,
+      markers: [],
+      mockDetail: {
+        deviceCount: 2576,
+        orderCount: 52829,
+        balance: 15680.50,
+        totalIncome: 807357.19,
+        userDeviceCount: 1360,
+        merchantBalance: 57721.81
+      },
+      // 统计卡片数据
       statisticsData: [
         {
           label: '设备总数',
           field: 'deviceCount',
-          today: 255,
-          chartData: [120, 132, 101, 134, 90, 230, 210],
+          icon: 'el-icon-monitor',
           chartColor: '#409EFF',
-          tip: '系统中的所有设备数量'
+          bgColor: '#ECF5FF',
+          today: 96,
+          chartData: [2200, 2300, 2400, 2500, 2576]
         },
         {
           label: '订单总数',
           field: 'orderCount',
-          today: 77,
-          chartData: [220, 182, 191, 234, 290, 330, 310],
+          today: 96,
+          chartData: [51220, 51382, 51591, 51834, 52290, 52733, 52829],
           chartColor: '#67C23A',
-          tip: '系统中的所有订单数量'
+          tip: '系统中的所有订单数量',
+          icon: 'el-icon-s-order',
+          bgColor: 'rgba(103, 194, 58, 0.1)',
+          suffix: ' 单'
         },
         {
           label: '账户余额',
           field: 'balance',
           isMoney: true,
-          chartData: [150, 232, 201, 154, 190, 330, 410],
-          chartColor: '#E6A23C'
+          today: 1471.60,
+          chartData: [15150, 15232, 15401, 15454, 15590, 15630, 15680.50],
+          chartColor: '#E6A23C',
+          icon: 'el-icon-wallet',
+          bgColor: 'rgba(230, 162, 60, 0.1)'
         },
         {
-          label: '总收入',
+          label: '订单金额',
           field: 'totalIncome',
           isMoney: true,
-          chartData: [320, 332, 301, 334, 390, 330, 320],
-          chartColor: '#F56C6C'
+          today: 1471.60,
+          chartData: [801320, 802332, 803301, 804334, 805390, 805885.59, 807357.19],
+          chartColor: '#F56C6C',
+          icon: 'el-icon-money',
+          bgColor: 'rgba(245, 108, 108, 0.1)'
+        },
+        {
+          label: '用户设备数',
+          field: 'userDeviceCount',
+          today: 15,
+          chartData: [1220, 1282, 1291, 1334, 1345, 1345, 1360],
+          chartColor: '#909399',
+          tip: '用户持有的设备总数',
+          icon: 'el-icon-mobile',
+          bgColor: 'rgba(144, 147, 153, 0.1)',
+          suffix: ' 台'
+        },
+        {
+          label: '商户余额',
+          field: 'merchantBalance',
+          isMoney: true,
+          today: 366.51,
+          chartData: [55150, 55232, 56201, 56454, 56990, 57355.30, 57721.81],
+          chartColor: '#9B59B6',
+          tip: '商户账户当前余额',
+          icon: 'el-icon-bank-card',
+          bgColor: 'rgba(155, 89, 182, 0.1)'
         }
+      ],
+      // 待办事项数据
+      todoItems: [
+        {
+          icon: 'el-icon-s-shop',
+          title: '商家加盟',
+          count: 0,
+          color: '#409EFF'
+        },
+        {
+          icon: 'el-icon-money',
+          title: '提现申请',
+          count: 0,
+          color: '#67C23A'
+        },
+        {
+          icon: 'el-icon-warning',
+          title: '风控审核',
+          count: 0,
+          color: '#E6A23C'
+        },
+        {
+          icon: 'el-icon-monitor',
+          title: '到期设备',
+          count: 2576,
+          color: '#F56C6C'
+        },
+        {
+          icon: 'el-icon-s-shop',
+          title: '店铺审核',
+          count: 2,
+          color: '#909399'
+        },
+        {
+          icon: 'el-icon-warning-outline',
+          title: '待处理故障信息',
+          count: 37,
+          color: '#F56C6C'
+        }
+      ],
+      // 日期选择器配置
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+              picker.$emit('pick', [start, end])
+            }
+          },
+          {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date()
+              const start = new Date()
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+              picker.$emit('pick', [start, end])
+            }
+          }
+        ]
+      },
+      // 支付对账数据
+      paymentDateRange: [new Date('2025-01-04'), new Date('2025-01-10')],
+      paymentChartData: {
+        labels: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10'],
+        datasets: [
+          {
+            label: '支付金额',
+            data: [10000, 9500, 8000, 7500, 9000, 8500, 2000],
+            color: '#409EFF'
+          },
+          {
+            label: '退款金额',
+            data: [2000, 1500, 2000, 1000, 1200, 1000, 800],
+            color: '#67C23A'
+          },
+          {
+            label: '实收金额',
+            data: [8000, 8000, 6000, 6500, 7800, 7500, 1200],
+            color: '#E6A23C'
+          }
+        ]
+      },
+      // 收入及成本数据
+      incomeDateRange: [new Date('2025-01-04'), new Date('2025-01-10')],
+      incomeChartData: {
+        labels: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10'],
+        datasets: [
+          {
+            label: '订单服务费收入',
+            data: [100, 95, 85, 75, 90, 85, 20],
+            color: '#409EFF'
+          },
+          {
+            label: '提现服务费收入',
+            data: [40, 45, 40, 35, 20, 15, 10],
+            color: '#67C23A'
+          },
+          {
+            label: '月租收入',
+            data: [20, 18, 16, 14, 12, 10, 8],
+            color: '#E6A23C'
+          },
+          {
+            label: '订单手机号收入',
+            data: [10, 8, 6, 4, 2, 0, 0],
+            color: '#F56C6C'
+          },
+          {
+            label: '运营成本',
+            data: [25, 20, 15, 18, 20, 22, 15],
+            color: '#909399'
+          }
+        ]
+      },
+      // 每日充值提现数据
+      dailyTransactionDate: new Date('2025-01-10'),
+      dailyTransactionData: {
+        labels: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00', 
+                '14:00', '16:00', '18:00', '20:00', '22:00'],
+        datasets: [
+          {
+            label: '充值 (元)',
+            data: [250, 420, 450, 450, 450, 480, 30, 0, 0, 0, 0, 0],
+            color: '#409EFF'
+          },
+          {
+            label: '提现 (元)',
+            data: [220, 0, 0, 0, 0, 180, 0, 0, 0, 0, 0, 0],
+            color: '#67C23A'
+          }
+        ]
+      },
+      // 店铺位置数据
+      storeLocations: [
+        { id: 1, name: '测试店铺1', address: '北京市朝阳区', lng: 116.481488, lat: 39.990464, status: 1 },
+        { id: 2, name: '测试店铺2', address: '北京市海淀区', lng: 116.310316, lat: 39.991228, status: 1 },
+        { id: 3, name: '测试店铺3', address: '北京市西城区', lng: 116.366794, lat: 39.915309, status: 2 }
       ]
     }
+  },
+  mounted() {
+    this.initMap()
+  },
+  beforeDestroy() {
+    if (this.map) {
+      this.map.destroy()
+    }
+  },
+  methods: {
+    formatNumber(num) {
+      return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+    },
+    formatTooltip(data, stat) {
+      const date = new Date()
+      const day = date.getDate() - (6 - data.dataIndex)
+      const month = date.getMonth() + 1
+      const year = date.getFullYear()
+      const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
+      
+      let value = data.value
+      if (stat.isMoney) {
+        value = '¥ ' + this.formatNumber(value)
+      }
+      if (stat.suffix) {
+        value += stat.suffix
+      }
+
+      return `
+        <div style="text-align: center;">
+          <div style="color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 4px;">
+            ${formattedDate}
+          </div>
+          <div style="color: #fff; font-size: 14px;">
+            ${stat.label} ${value}
+          </div>
+        </div>
+      `
+    },
+    async initMap() {
+      try {
+        await AMapLoader.load({
+          key: globalConfig.aMap.key,
+          version: "2.0",
+          plugins: [
+            "AMap.ToolBar",
+            "AMap.Scale",
+            "AMap.HeatMap",
+            "AMap.MarkerCluster"
+          ],
+        });
+
+        this.map = new AMap.Map('storeMap', {
+          zoom: 11,
+          center: [116.397428, 39.90923],
+          viewMode: '3D'
+        });
+
+        // 添加工具条和比例尺
+        this.map.addControl(new AMap.ToolBar({
+          position: 'RB'
+        }));
+        this.map.addControl(new AMap.Scale());
+
+        // 添加店铺标记
+        this.addStoreMarkers();
+
+      } catch (e) {
+        console.error('地图初始化失败:', e);
+      }
+    },
+   
+  addStoreMarkers() {
+    // 清除现有标记
+    this.markers.forEach(marker => marker.remove());
+    this.markers = [];
+
+    // 添加新标记
+    this.storeLocations.forEach(store => {
+      const markerContent = document.createElement('div');
+      markerContent.className = 'custom-marker';
+      markerContent.innerHTML = `<i class="${this.getMarkerIcon(store.status)}"></i>`;
+
+      const marker = new AMap.Marker({
+        position: new AMap.LngLat(store.lng, store.lat),
+        title: store.name,
+        content: markerContent
+      });
+
+      const infoWindow = new AMap.InfoWindow({
+        content: `
+          <div class="map-info-window">
+            <h4>${store.name}</h4>
+            <p>${store.address}</p>
+            <p>状态: ${this.getStatusText(store.status)}</p>
+          </div>
+        `,
+        offset: new AMap.Pixel(0, -30)
+      });
+
+      marker.on('click', () => {
+        infoWindow.open(this.map, marker.getPosition());
+      });
+
+      this.markers.push(marker);
+    });
+
+    // 将所有标记添加到地图
+    this.map.add(this.markers);
+
+    // 调整视图以包含所有标记
+    if (this.markers.length > 0) {
+      this.map.setFitView();
+    }
+  },
+    getMarkerIcon(status) {
+    // 使用 Element UI 的图标
+    switch (status) {
+      case 1:
+        return 'el-icon-s-shop';
+      case 2:
+        return 'el-icon-warning';
+      default:
+        return 'el-icon-s-shop';
+    }
+  },
+
+  getStatusText(status) {
+    const statusMap = {
+      1: '正常营业',
+      2: '暂停营业'
+    };
+    return statusMap[status] || '未知状态';
+  }
   }
-  // ... 其他方法保持不变 ...
 }
 </script>
 
 <style lang="scss" scoped>
 .statistics-cards {
-  margin-bottom: 20px;
-  
   .stat-card {
     background: #fff;
     border-radius: 4px;
@@ -99,10 +525,28 @@ export default {
     overflow: hidden;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
     
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--bg-color);
+      opacity: 0.1;
+    }
+    
     .stat-header {
       display: flex;
       align-items: center;
       margin-bottom: 16px;
+      position: relative;
+      z-index: 1;
+      
+      i:first-child {
+        font-size: 20px;
+        margin-right: 8px;
+      }
       
       .stat-title {
         font-size: 14px;
@@ -117,6 +561,9 @@ export default {
     }
     
     .stat-body {
+      position: relative;
+      z-index: 1;
+      
       .stat-value {
         font-size: 24px;
         font-weight: bold;
@@ -152,7 +599,103 @@ export default {
       left: 0;
       width: 100%;
       height: 50px;
+      z-index: 1;
     }
   }
 }
+
+.dashboard-content {
+  margin-top: 20px;
+  
+  .todo-card {
+    height: 400px;
+    
+    .todo-list {
+      .todo-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid #EBEEF5;
+        
+        &:last-child {
+          border-bottom: none;
+        }
+        
+        .item-left {
+          display: flex;
+          align-items: center;
+          
+          i {
+            font-size: 16px;
+            margin-right: 8px;
+          }
+        }
+        
+        .item-right {
+          color: #909399;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  
+  .chart-card {
+    height: 400px;
+    
+    :deep(.el-card__header) {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .chart-container {
+      height: 300px;
+    }
+  }
+
+  .map-card {
+    height: 500px;
+    
+    .map-container {
+      width: 100%;
+      height: 420px;
+    }
+  }
+}
+
+:deep(.el-card__header) {
+  padding: 15px 20px;
+  border-bottom: 1px solid #EBEEF5;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+:deep(.el-card__body) {
+  padding: 20px;
+}
+
+:deep(.map-info-window) {
+  padding: 8px 12px;
+  
+  h4 {
+    margin: 0 0 8px;
+    font-size: 16px;
+    color: #303133;
+  }
+  
+  p {
+    margin: 4px 0;
+    font-size: 14px;
+    color: #606266;
+  }
+}
+
+:deep(.echarts-tooltip) {
+  background: #fff !important;
+  border: 1px solid #eee !important;
+  border-radius: 4px !important;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
+  padding: 0 !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/system/device/device_detail.vue b/src/views/system/device/device_detail.vue
index 5f69dfe..b3c6426 100644
--- a/src/views/system/device/device_detail.vue
+++ b/src/views/system/device/device_detail.vue
@@ -386,7 +386,8 @@ import {
   bindDeviceUser,
   deviceSwitch,
   rebootDevice,
-  offlineDevice
+  offlineDevice,
+  bindMch
 } from '@/api/system/device'
 import { listUser } from "@/api/user/user"
 import { listData } from '@/api/system/dict/data'
@@ -661,15 +662,6 @@ export default {
       this.getFacilityList()
     },
 
-    // getFacilityList() {
-    //   this.facilityTableLoading = true
-    //   listEquipment(this.facilityQueryParams).then(response => {
-    //     this.facilityList = response.rows || []
-    //     this.facilityTotal = response.total || 0
-    //     this.facilityTableLoading = false
-    //   })
-    // },
-
     handleBindFacility(row) {
       placementDevice({
         deviceId: this.deviceData.deviceId,
@@ -731,27 +723,20 @@ export default {
       this.handleUserQuery();
     },
     handleBindUser(row) {
-      this.$modal.confirm('确认要将该设备绑定到商户"' + row.userName + '"吗？').then(() => {
-
-      }).then((response) => {
+      bindMch(this.deviceData.deviceId,row.userId).then((response) => {
         if (response.code == 200) {
-          this.$modal.msgSuccess("绑定成功")
+          this.$message.success("绑定成功")
           this.bindUserDialogVisible = false
           this.fetchDeviceData(this.deviceData.deviceId)
         } else {
           this.$message.error("绑定失败")
         }
-      }).catch((err) => {
-        console.log(err, 'err');
-
-        this.$message.error("绑定失败", err)
       })
     }
   }
 }
 </script>
 
-
 <style lang="scss" scoped>
 .device-detail {
   padding: 20px;
diff --git a/src/views/system/room/index.vue b/src/views/system/room/index.vue
index 94159e3..8b294ee 100644
--- a/src/views/system/room/index.vue
+++ b/src/views/system/room/index.vue
@@ -72,8 +72,8 @@
             <template v-else-if="column.key === 'tags'">
               <dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]" />
             </template>
-            <template v-else-if="column.key === 'picture'">
-              <image-preview :src="d.row[column.key]" :width="50" :height="50" />
+            <template v-else-if="column.key === 'pictures'">
+              <image-preview :src="d.row[column.key][0]" :width="50" :height="50" />
             </template>
             <template v-else-if="column.key === 'status'">
               <dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]" />
@@ -161,7 +161,7 @@ export default {
         { key: 'roomId', visible: true, label: '房间id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
         { key: 'roomName', visible: true, label: '房间名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
         { key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
-        { key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
+        { key: 'pictures', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
         { key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
         { key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null },
         { key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
diff --git a/src/views/system/room/room_detail.vue b/src/views/system/room/room_detail.vue
index d20fedd..7d649ac 100644
--- a/src/views/system/room/room_detail.vue
+++ b/src/views/system/room/room_detail.vue
@@ -10,16 +10,24 @@
       <!-- 房间基本信息 -->
       <div class="room-header">
         <el-row :gutter="40">
-          <el-col :span="8">
+          <el-col :span="6">
             <div class="image-wrapper">
-              <el-image :src="room.picture" fit="cover" class="room-image">
-                <div slot="error" class="image-slot">
-                  <i class="el-icon-picture-outline"></i>
-                </div>
-              </el-image>
+              <el-carousel height="300px" indicator-position="outside" :autoplay="true" trigger="click" arrow="always">
+                <el-carousel-item v-for="(url, index) in room.pictures" :key="index">
+                  <el-image 
+                    :src="url" 
+                    class="carousel-image"
+                    fit="fill"
+                  >
+                    <div slot="error" class="image-slot">
+                      <i class="el-icon-picture-outline"></i>
+                    </div>
+                  </el-image>
+                </el-carousel-item>
+              </el-carousel>
             </div>
           </el-col>
-          <el-col :span="16">
+          <el-col :span="18">
             <div class="room-title">
               <h2>{{ room.roomName }}</h2>
               <el-tag :type="room.status === '1' ? 'success' : 'info'" class="status-tag" effect="dark">
@@ -61,8 +69,6 @@
         </el-row>
       </div>
 
-
-
       <!-- WiFi信息 -->
       <div v-if="room.wifi" class="section-block">
         <h3>
@@ -137,12 +143,11 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-    <el-tabs v-model="activeTab" class="detail-tabs">
 
+    <el-tabs v-model="activeTab" class="detail-tabs">
       <el-tab-pane label="订单列表" name="orders">
         <order :roomId="room.roomId"></order>
       </el-tab-pane>
-    
       <el-tab-pane label="设备列表" name="devices">
         <device :roomId="room.roomId"></device>
       </el-tab-pane>
@@ -155,7 +160,6 @@
     </el-tabs>
   </div>
 </template>
-
 <script>
 import { getRoom, updateRoom } from '@/api/system/room'
 import { getDicts } from '@/api/system/dict/data'
@@ -309,17 +313,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .detail-tabs {
-    margin-top: 20px;
-
-    .search-form {
-      margin-bottom: 20px;
-
-      .el-form-item {
-        margin-bottom: 10px;
-      }
-    }
-  }
 .app-container {
   padding: 24px;
   background-color: #f5f7fa;
@@ -327,7 +320,6 @@ export default {
 }
 
 .operation-buttons {
-  // margin-left: auto;
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
@@ -344,10 +336,10 @@ export default {
   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);
+  &:hover {
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
+  }
 }
 
 .room-header {
@@ -359,19 +351,53 @@ export default {
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
-  position: relative;
-}
+  
+  :deep(.el-carousel) {
+    .el-carousel__indicators {
+      bottom: -20px;
+    }
 
-.image-wrapper:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
-}
+    .el-carousel__arrow {
+      background-color: rgba(0, 0, 0, 0.3);
+      
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+    }
 
-.room-image {
-  width: 100%;
-  height: 320px;
-  border-radius: 12px;
-  object-fit: cover;
+    .el-carousel__item {
+      background-color: #f5f7fa;
+      overflow: hidden;
+
+      .carousel-image {
+        width: 100%;
+        height: 100%;
+        display: block;
+
+        :deep(.el-image__inner) {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+
+        .image-slot {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          background: #f5f7fa;
+          color: #909399;
+          font-size: 30px;
+        }
+      }
+    }
+  }
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  }
 }
 
 .room-title {
@@ -380,22 +406,22 @@ export default {
   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;
-}
+  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;
+  .status-tag {
+    margin-left: auto;
+    padding: 0 16px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 14px;
+  }
 }
 
 .room-info {
@@ -441,32 +467,21 @@ export default {
   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 {
-  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;
+    i {
+      margin-right: 12px;
+      font-size: 24px;
+      color: #409EFF;
+    }
+  }
 }
 
 .price {
@@ -481,58 +496,40 @@ h3 i {
   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;
+
+  .el-descriptions__label {
+    font-weight: 500;
+    color: #606266;
+  }
+
+  .el-descriptions__content {
+    padding: 12px 16px;
+  }
+
+  .el-descriptions__body {
+    background-color: #fff;
+  }
+
+  .el-descriptions-item__label {
+    background-color: #f5f7fa;
+    font-weight: 500;
+  }
 }
 
-:deep(.el-descriptions__label) {
-  font-weight: 500;
-  color: #606266;
-}
+.detail-tabs {
+  margin-top: 20px;
 
-:deep(.el-descriptions__content) {
-  padding: 12px 16px;
-}
+  .search-form {
+    margin-bottom: 20px;
 
-: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-form-item {
+      margin-bottom: 10px;
+    }
+  }
 }
 
 // 标签选择器样式
diff --git a/src/views/system/store/index.vue b/src/views/system/store/index.vue
index 1e02c2f..00e0bc2 100644
--- a/src/views/system/store/index.vue
+++ b/src/views/system/store/index.vue
@@ -108,8 +108,8 @@
             <template v-else-if="column.key === 'status'">
               <dict-tag :options="dict.type.ss_store_status" :value="d.row[column.key]"/>
             </template>
-            <template v-else-if="column.key === 'picture'">
-              <image-preview :src="d.row[column.key]" :width="50" :height="50"/>
+            <template v-else-if="column.key === 'pictures'">
+              <image-preview :src="d.row[column.key][0]" :width="50" :height="50"/>
             </template>
             <template v-else-if="column.key === 'address'">
               <el-link
@@ -294,7 +294,7 @@ export default {
         {key: 'managerName', visible: true, label: '店长', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
         {key: 'contactName', visible: true, label: '联系人', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
         {key: 'contactMobile', visible: true, label: '联系电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
-        {key: 'picture', visible: true, label: '商户图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
+        {key: 'pictures', visible: true, label: '商户图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
         {key: 'address', visible: true, label: '门店地址', minWidth: null, sortable: true, overflow: false, align: 'center', width: 150},
         {key: 'businessTime', visible: true, label: '营业时间', minWidth: "120", sortable: false, overflow: false, align: 'center', width: null},
         {key: 'serverPhone', visible: true, label: '客服电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
diff --git a/src/views/system/store/store_detail.vue b/src/views/system/store/store_detail.vue
index b6f6e11..20c6a7e 100644
--- a/src/views/system/store/store_detail.vue
+++ b/src/views/system/store/store_detail.vue
@@ -10,14 +10,25 @@
           </el-tag>
         </div>
         <div class="action-buttons">
-          <!-- <el-button type="primary" size="small" @click="handleEdit">编辑</el-button> -->
           <el-button type="danger" size="small" @click="handleDelete">删除</el-button>
         </div>
       </div>
       <el-row :gutter="20">
-        <el-col :span="2">
+        <el-col :span="6">
           <div class="store-image">
-            <image-preview :src="storeData.picture" :width="80" :height="80" />
+            <el-carousel height="300px" indicator-position="outside" :autoplay="true" trigger="click" arrow="always">
+              <el-carousel-item v-for="(url, index) in storeData.pictures" :key="index">
+                <el-image 
+                  :src="url" 
+                  fit="fill"
+                  style="width: 100%; height: 100%"
+                >
+                  <div slot="error" class="image-slot">
+                    <i class="el-icon-picture-outline"></i>
+                  </div>
+                </el-image>
+              </el-carousel-item>
+            </el-carousel>
           </div>
         </el-col>
         <el-col :span="7">
@@ -80,7 +91,6 @@
           <div class="stat-content">
             <div class="stat-label">今日收入</div>
             <div class="stat-value">¥ {{ stats.todayIncome || '0.00' }}</div>
-
           </div>
         </el-card>
       </el-col>
@@ -94,7 +104,6 @@
           <div class="stat-content">
             <div class="stat-label">本月收入</div>
             <div class="stat-value">¥ {{ stats.monthIncome || '0.00' }}</div>
-
           </div>
         </el-card>
       </el-col>
@@ -108,7 +117,6 @@
           <div class="stat-content">
             <div class="stat-label">总营收</div>
             <div class="stat-value">¥ {{ stats.totalIncome || '0.00' }}</div>
-
           </div>
         </el-card>
       </el-col>
@@ -122,7 +130,6 @@
           <div class="stat-content">
             <div class="stat-label">总提现</div>
             <div class="stat-value">¥ {{ stats.totalWithdraw || '0.00' }}</div>
-
           </div>
         </el-card>
       </el-col>
@@ -140,7 +147,6 @@
               <span class="divider">/</span>
               <span class="total">{{ stats.totalRooms || 0 }}</span>
             </div>
-
           </div>
         </el-card>
       </el-col>
@@ -151,7 +157,6 @@
           <div class="stat-icon facility">
             <i class="el-icon-set-up"></i>
           </div>
-
           <div class="stat-content">
             <div class="stat-label">设施使用</div>
             <div class="stat-numbers">
@@ -159,7 +164,6 @@
               <span class="divider">/</span>
               <span class="total">{{ stats.totalFacilities || 0 }}</span>
             </div>
-
           </div>
         </el-card>
       </el-col>
@@ -189,8 +193,8 @@
         </el-card>
       </el-col>
     </el-row>
-    <el-tabs v-model="activeTab" class="detail-tabs">
 
+    <el-tabs v-model="activeTab" class="detail-tabs">
       <el-tab-pane label="订单列表" name="orders">
         <order :storeId="storeId"></order>
       </el-tab-pane>
@@ -206,8 +210,6 @@
       <el-tab-pane label="员工列表" name="users">
         <user :storeId="storeId"></user>
       </el-tab-pane>
-
-
     </el-tabs>
   </div>
 </template>
@@ -273,6 +275,7 @@ export default {
     window.removeEventListener('resize', this.resizeChart);
   },
   methods: {
+  
     getStatusType(status) {
       const statusMap = {
         0: 'info',
@@ -470,6 +473,46 @@ export default {
 <style lang="scss" scoped>
 .store-detail {
   padding: 20px;
+  
+  .store-image {
+    width: 100%;
+    margin-bottom: 20px;
+
+    :deep(.el-carousel) {
+      .el-carousel__indicators {
+        bottom: -20px;
+      }
+
+      .el-carousel__arrow {
+        background-color: rgba(0, 0, 0, 0.5);
+        
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.7);
+        }
+      }
+
+      .el-carousel__item {
+        overflow: hidden;
+        
+        .el-image {
+          width: 100%;
+          height: 100%;
+          display: block;
+          
+          .image-slot {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            background: #f5f7fa;
+            color: #909399;
+            font-size: 30px;
+          }
+        }
+      }
+    }
+  }
 
   .info-card {
     margin-bottom: 20px;
@@ -518,22 +561,6 @@ export default {
         font-size: 14px;
       }
     }
-
-    .store-image {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px 0;
-
-      :deep(.el-image) {
-        border-radius: 8px;
-        overflow: hidden;
-        display: block;
-        border: 1px solid #EBEEF5;
-      }
-    }
   }
 
   .detail-tabs {
diff --git a/src/views/user/user/detail.vue b/src/views/user/user/detail.vue
index 789ba08..49f34f8 100644
--- a/src/views/user/user/detail.vue
+++ b/src/views/user/user/detail.vue
@@ -285,7 +285,7 @@ export default {
       open: false,
       title: "",
       form: {},
-      reportActiveTab: 'monthly',
+      reportActiveTab: 'daily',
       mainActiveTab: 'orders',
       statisticsData: [
         { label: '店铺数', field: 'storeCount', icon: 'el-icon-office-building', color: 'blue', unit: '家' },