diff --git a/.env.development b/.env.development
index fc90eae..d0b36c9 100644
--- a/.env.development
+++ b/.env.development
@@ -6,11 +6,8 @@ VITE_APP_BASE_API=/dev-api
 
 # 接口地址
 
-# VITE_APP_API_URL=https://admintestpapi.sxczgkj.cn/ # 线上
 VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 正式
 
-# VITE_APP_API_URL=https://api.youlai.tech # 线上
-# VITE_APP_API_URL=http://localhost:8989    # 本地
 
 # WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
 VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
diff --git a/.env.production b/.env.production
index 17729b6..72449c3 100644
--- a/.env.production
+++ b/.env.production
@@ -4,3 +4,14 @@ VITE_APP_BASE_API = '/prod-api'
 
 # WebSocket端点(可选)
 #VITE_APP_WS_ENDPOINT=wss://api.youlai.tech/ws 
+
+# 接口地址
+
+VITE_APP_API_URL=https://tapi.cashier.sxczgkj.cn/ # 正式
+
+
+# WebSocket 端点（不配置则关闭），线上 ws://api.youlai.tech/ws ，本地 ws://localhost:8989/ws
+VITE_APP_WS_ENDPOINT=wss://sockets.sxczgkj.com/wss
+
+# 启用 Mock 服务
+VITE_MOCK_DEV_SERVER=false
diff --git a/src/api/account/permission.ts b/src/api/account/permission.ts
index 038b653..8530815 100644
--- a/src/api/account/permission.ts
+++ b/src/api/account/permission.ts
@@ -4,14 +4,14 @@ const baseURL = Account_BaseUrl + "/admin";
 const ShopStaffApi = {
   // 获取店铺权限列表
   getshopPermission() {
-    return request<any>({
+    return request<any, PermissionResonpseResponse>({
       url: `${baseURL}/shopPermission`,
       method: "get",
     });
   },
   // 获取员工对应的权限id
   getPermission(id: number | string) {
-    return request<any>({
+    return request<any, string[]>({
       url: `${baseURL}/shopStaff/permission`,
       method: "get",
       params: { id }
@@ -20,3 +20,56 @@ const ShopStaffApi = {
 };
 
 export default ShopStaffApi;
+
+/**
+ * 权限列表
+ *
+ * CzgResult«List«ShopPermission»»
+ */
+export interface PermissionResonpseResponse {
+  code?: number | null;
+  data?: ShopPermission[] | null;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+/**
+* 店铺权限 实体类。
+*
+* ShopPermission
+*/
+export interface ShopPermission {
+  children?: ShopPermission[] | null;
+  /**
+   * 权限code，为了区分采用汉语拼音
+   */
+  code?: null | string;
+  createTime?: null | string;
+  id: string;
+  /**
+   * 是否重要： 重要对应页面红色
+   */
+  isImportant?: number | null;
+  /**
+   * 权限名称
+   */
+  label?: null | string;
+  /**
+   * 层级
+   */
+  level?: number | null;
+  /**
+   * 上级ID
+   */
+  parentId?: number | null;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  /**
+   * 权限类型：staff 员工，
+   */
+  type?: null | string;
+  updateTime?: null | string;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/api/account/shopArea.ts b/src/api/account/shopArea.ts
new file mode 100644
index 0000000..db9a4ea
--- /dev/null
+++ b/src/api/account/shopArea.ts
@@ -0,0 +1,78 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/shopArea";
+const ShopStaffApi = {
+  getList(params: getListRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+      params
+    });
+  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data
+    });
+  },
+  edit(data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data
+    });
+  },
+  delete(id: string | number) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "delete",
+      data: { id }
+    });
+  },
+};
+
+export default ShopStaffApi;
+
+export interface getListRequest {
+  /**
+   * 区域名称
+   */
+  name?: string;
+  page?: string;
+  size?: string;
+  [property: string]: any;
+}
+/**
+ * ShopAreaEditDTO
+ */
+export interface editRequest {
+  /**
+   * id
+   */
+  id: number | null;
+  /**
+   * 区域名称
+   */
+  name?: null | string;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  [property: string]: any;
+}
+
+/**
+ * ShopAreaAddDTO
+ */
+export interface addRequest {
+  /**
+   * 区域名称
+   */
+  name: null | string;
+  /**
+   * 排序
+   */
+  sort?: number | null;
+  [property: string]: any;
+}
\ No newline at end of file
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index ef74130..78af5eb 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -1,9 +1,20 @@
 <template>
   <!-- drawer -->
   <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
+    <el-drawer
+      v-model="modalVisible"
+      :append-to-body="true"
+      v-bind="modalConfig.drawer"
+      @close="handleCloseModal"
+    >
       <!-- 表单 -->
-      <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
+      <el-form
+        ref="formRef"
+        label-width="auto"
+        v-bind="modalConfig.form"
+        :model="formData"
+        :rules="formRules"
+      >
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
             <template v-if="item.type === 'title'">
@@ -15,7 +26,12 @@
                 <template v-if="item.tips" #label>
                   <span>
                     {{ item.label }}
-                    <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                    <el-tooltip
+                      placement="bottom"
+                      effect="light"
+                      :content="item.tips"
+                      :raw-content="true"
+                    >
                       <el-icon style="vertical-align: -0.15em" size="16">
                         <QuestionFilled />
                       </el-icon>
@@ -90,13 +106,20 @@
                 </template>
                 <!-- 自定义 -->
                 <template v-else-if="item.type === 'custom'">
-                  <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
+                  <slot
+                    :name="item.slotName ?? item.prop"
+                    :prop="item.prop"
+                    :formData="formData"
+                    :attrs="item.attrs"
+                  />
                 </template>
               </el-form-item>
             </el-col>
           </template>
         </el-row>
       </el-form>
+      <!-- 表单底部插槽 -->
+      <slot name="formFooter" />
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div v-if="!formDisable">
@@ -111,13 +134,26 @@
   </template>
   <!-- dialog -->
   <template v-else>
-    <el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
-      v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
+    <el-dialog
+      v-model="modalVisible"
+      :align-center="true"
+      :append-to-body="true"
+      width="70vw"
+      v-bind="modalConfig.dialog"
+      style="padding-right: 0"
+      @close="handleCloseModal"
+    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
-          style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
+        <el-form
+          ref="formRef"
+          label-width="auto"
+          v-bind="modalConfig.form"
+          style="padding-right: var(--el-dialog-padding-primary)"
+          :model="formData"
+          :rules="formRules"
+        >
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
               <template v-if="item.type === 'title'">
@@ -131,7 +167,12 @@
                   <template v-if="item.tips" #label>
                     <span>
                       {{ item.label }}
-                      <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
+                      <el-tooltip
+                        placement="bottom"
+                        effect="light"
+                        :content="item.tips"
+                        :raw-content="true"
+                      >
                         <el-icon style="vertical-align: -0.15em" size="16">
                           <QuestionFilled />
                         </el-icon>
@@ -140,7 +181,11 @@
                   </template>
                   <!-- Input 输入框 -->
                   <template v-if="item.type === 'input' || item.type === undefined">
-                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" :disabled="item.disabled" />
+                    <el-input
+                      v-model="formData[item.prop]"
+                      v-bind="item.attrs"
+                      :disabled="item.disabled"
+                    />
                   </template>
                   <!-- textarea 输入框 -->
                   <template v-else-if="item.type === 'textarea'">
@@ -207,8 +252,12 @@
                   </template>
                   <!-- 自定义 -->
                   <template v-else-if="item.type === 'custom'">
-                    <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
-                      :attrs="item.attrs" />
+                    <slot
+                      :name="item.slotName ?? item.prop"
+                      :prop="item.prop"
+                      :formData="formData"
+                      :attrs="item.attrs"
+                    />
                   </template>
                 </el-form-item>
               </el-col>
@@ -216,6 +265,8 @@
           </el-row>
         </el-form>
       </el-scrollbar>
+      <!-- 表单底部插槽 -->
+      <slot name="formFooter" />
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
@@ -370,7 +421,14 @@ function handleDisabled(disable: boolean) {
 }
 
 // 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled, handleClose });
+defineExpose({
+  setModalVisible,
+  getFormData,
+  setFormData,
+  setFormItemData,
+  handleDisabled,
+  handleClose,
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index c18d156..548e0ec 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -11,7 +11,6 @@ const Layout = () => import("@/layout/index.vue");
 export const usePermissionStore = defineStore("permission", () => {
   // 储所有路由，包括静态路由和动态路由
   const routes = ref<RouteRecordRaw[]>(constantRoutes);
-  console.log(router);
   // 混合模式左侧菜单路由
   const mixedLayoutLeftRoutes = ref<RouteRecordRaw[]>([]);
   // 路由是否加载完成
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 424ced4..b095c7d 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -15,7 +15,6 @@ const service = axios.create({
 // 请求拦截器
 service.interceptors.request.use(
   (config: InternalAxiosRequestConfig) => {
-    console.log(config);
     const accessToken = getToken();
     // 如果 Authorization 设置为 no-auth，则不携带 Token，用于登录、刷新 Token 等接口
     if (config.headers.Authorization !== "no-auth" && accessToken) {
diff --git a/src/utils/websocket.ts b/src/utils/websocket.ts
index e0202af..3b3bf13 100644
--- a/src/utils/websocket.ts
+++ b/src/utils/websocket.ts
@@ -1,4 +1,3 @@
-
 class WebSocketManager {
   private client: WebSocket | null = null;
   private connected: boolean = false;
@@ -35,6 +34,11 @@ class WebSocketManager {
     };
     this.client.onerror = (error) => {
       console.error("WebSocket 发生错误:", error);
+      ElNotification({
+        title: "提示",
+        message: "WebSocket 发生错误",
+        type: "error",
+      });
     };
     this.client.onmessage = (event) => {
       const message = event.data;
diff --git a/src/views/data/index copy.vue b/src/views/data/index copy.vue
new file mode 100644
index 0000000..8a98c27
--- /dev/null
+++ b/src/views/data/index copy.vue	
@@ -0,0 +1,1479 @@
+<template>
+  <div class="app-container" style="padding-bottom: 100px">
+    <!-- <div class="card_wrap">
+      <div class="card">
+        <div class="header">
+          <div class="card_title">总销售额</div>
+          <el-tooltip effect="dark" content="订单支付金额" placement="top">
+            <i class="icon el-icon-warning-outline"></i>
+          </el-tooltip>
+        </div>
+        <div class="number">{{ topData.totalSales || 0 }}</div>
+        <div class="row">平均每单{{ topData.averageSales || 0 }}</div>
+        <div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">支付笔数</div>
+        </div>
+        <div class="number">{{ topData.paymentsNumber }}</div>
+        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          今日支付笔数{{ topData.paymentsNumberToday || 0 }}
+        </div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">访问量</div>
+        </div>
+        <div class="number">{{ topData.totalVisits }}</div>
+        <div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          <div class="dot"></div>
+          今日访问 {{ topData.totalVisitsToday || 0 }}
+        </div>
+      </div>
+      <div class="card">
+        <div class="header">
+          <div class="card_title">用户数</div>
+        </div>
+        <div class="number">{{ topData.totalUser }}</div>
+        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
+        <div class="row">
+          今日新增 {{ topData.userToday || 0 }}
+          <i class="icon el-icon-caret-top"></i>
+        </div>
+      </div>
+    </div> -->
+    <div class="h_card_wrap">
+      <div class="status_wrap">
+        <div class="left">
+          <div class="dot"></div>
+          <span>营业</span>
+        </div>
+        <div class="time_wrap">
+          <el-radio-group v-model="timeValue" @change="timeChange">
+            <el-radio-button value="0">今天</el-radio-button>
+            <el-radio-button value="-1">昨天</el-radio-button>
+            <el-radio-button value="-7">最近7天</el-radio-button>
+            <el-radio-button value="-30">最近30天</el-radio-button>
+            <el-radio-button value="week">本周</el-radio-button>
+            <el-radio-button value="month">本月</el-radio-button>
+            <el-radio-button value="custom">自定义</el-radio-button>
+          </el-radio-group>
+          <el-date-picker
+            v-model="query.createdAt"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="['00:00:00', '23:59:59']"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            v-if="timeValue == 'custom'"
+            @change="summarytrade"
+          ></el-date-picker>
+        </div>
+      </div>
+      <div class="content" v-loading="tradeLoading">
+        <div class="top">
+          <div class="item earnings">
+            <div class="num_wrap">
+              <div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
+              <div class="tips">
+                营业实收（元）
+                <el-tooltip popper-class="popper" effect="light" placement="bottom">
+                  <div class="tips_row" slot="content">
+                    <div class="item" v-for="(item, index) in tradeSale.payCount" :key="index">
+                      <div class="left">
+                        <img class="icon" :src="item.icon" />
+                        <span>{{ item.payType }}</span>
+                      </div>
+                      <span class="num">{{ item.payAmount }}</span>
+                    </div>
+                  </div>
+                  <el-icon class="el-icon-question" />
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="line_wrap">
+              <div class="line_item">
+                <div class="line_item_top">
+                  <div>销售金额（元）</div>
+                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
+                </div>
+                <div class="line_gropress">
+                  <div
+                    class="gropress l"
+                    :style="{
+                      width: `${
+                        tradeSale.incomeAmount
+                          ? (tradeSale.incomeAmount / tradeSale.totalSaleAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                  <div
+                    class="gropress r"
+                    :style="{
+                      width: `${
+                        tradeSale.refundAmount
+                          ? (tradeSale.refundAmount / tradeSale.totalSaleAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                </div>
+                <div class="line_btm">
+                  <el-icon class="icon el-icon-caret-right" />
+                  <div class="info">
+                    <span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
+                    <span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+              <div class="line_item">
+                <div class="line_item_top">
+                  <div>充值金额（元）</div>
+                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
+                </div>
+                <div class="line_gropress">
+                  <div
+                    class="gropress l"
+                    :style="{
+                      width: `${
+                        tradeSale.inAmount
+                          ? (tradeSale.inAmount / tradeSale.totalVipAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                  <div
+                    class="gropress r"
+                    :style="{
+                      width: `${
+                        tradeSale.inAmount
+                          ? (tradeSale.outAmount / tradeSale.totalVipAmount) * 100
+                          : 0
+                      }%`,
+                    }"
+                  ></div>
+                </div>
+                <div class="line_btm">
+                  <el-icon class="icon el-icon-caret-right" />
+                  <div class="info">
+                    <span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
+                    <span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="item data">
+            <div class="data_item">
+              <div class="num_wrap">
+                <div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
+                <div class="tips">会员消费（元）</div>
+              </div>
+            </div>
+            <div class="data_item_right">
+              <div class="t">
+                <span>新增会员数</span>
+                <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span>
+              </div>
+              <div class="t">
+                <span>会员消费笔数</span>
+                <span class="n">{{ tradeVip.useNum || 0 }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btm">
+          <div class="item item1">
+            <div class="title">客单价</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
+              <div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
+            </div>
+          </div>
+          <div class="item item2">
+            <div class="title">
+              翻台率
+              <el-tooltip
+                effect="dark"
+                content="翻台率=（客单数-桌台数）/桌台数*100%"
+                placement="top"
+              >
+                <el-icon class="icon el-icon-question" />
+              </el-tooltip>
+            </div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
+              <div class="t">{{ tradeCount.turnoverRate }}</div>
+            </div>
+          </div>
+          <div class="item item3">
+            <div class="title">优惠金额</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
+              <div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
+            </div>
+          </div>
+          <div class="item item4">
+            <div class="title">优惠笔数</div>
+            <div class="icon_wrap">
+              <img class="img" src="@/assets/images/data_home_item4_icon.png" />
+              <div class="t">{{ tradeCount.saveNum || 0 }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 销售额 -->
+    <div class="chart_wrap" style="display: flex">
+      <div class="item">
+        <div class="header">
+          <div class="tab_wrap">
+            <div
+              class="item"
+              :class="{ active: lineChartType == 0 }"
+              @click="lineChartTypeChange(0)"
+            >
+              销售趋势
+            </div>
+            <div
+              class="item"
+              :class="{ active: lineChartType == 1 }"
+              @click="lineChartTypeChange(1)"
+            >
+              支付占比
+            </div>
+          </div>
+          <el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
+            <el-radio-button value="7">近7天</el-radio-button>
+            <el-radio-button value="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div
+          class="chart"
+          ref="saleChart"
+          v-loading="saleLoading"
+          style="height: 350px"
+          v-show="lineChartType == 0"
+        ></div>
+        <div
+          class="chart"
+          ref="payChart"
+          v-loading="payChartLoading"
+          style="height: 350px"
+          v-show="lineChartType == 1"
+        ></div>
+      </div>
+      <!-- 商品销售排行 -->
+      <div class="item" style="margin-left: 20px">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">商品销售排行</div>
+          </div>
+          <el-radio-group v-model="saleTableActive" @change="rankChange">
+            <!-- <el-radio-button label="1">今天</el-radio-button> -->
+            <el-radio-button value="7">近7天</el-radio-button>
+            <el-radio-button value="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div class="sale_data">
+          <!-- <div class="card">
+            <div class="sale_data_header">
+              <div class="card_title">销售数量</div>
+            </div>
+            <div class="number">{{ productCount }}</div>
+            <div class="product_chart_wrap" ref="productCountChart"></div>
+          </div> -->
+          <!-- <div class="card">
+            <div class="sale_data_header">
+              <div class="card_title">销售金额</div>
+            </div>
+            <div class="number">￥{{ productSum }}</div>
+            <div class="product_chart_wrap" ref="productSumChart"></div>
+          </div> -->
+        </div>
+        <div class="table">
+          <el-table :data="saleTable" v-loading="saleTableLoading">
+            <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
+            <el-table-column label="商品名称" prop="productName"></el-table-column>
+            <el-table-column label="数量" prop="salesNum"></el-table-column>
+            <el-table-column label="金额" prop="salesAmount"></el-table-column>
+          </el-table>
+          <div
+            class="head-container"
+            style="padding-top: 20px; display: flex; justify-content: flex-end"
+          >
+            <el-pagination
+              :total="saleTableTotal"
+              :page-size="saleTableSize"
+              :current-page="saleTablePage + 1"
+              @current-change="paginationChange"
+              layout="total, prev, pager, next, jumper"
+            ></el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="chart_wrap" style="display: flex;">
+      <div class="item" style="margin-left: 20px;">
+        <div class="header">
+          <div class="tab_wrap">
+            <div class="item active">支付占比类型</div>
+          </div>
+          <el-radio-group v-model="payChartDay" @change="datePayType">
+            <el-radio-button label="7">近7天</el-radio-button>
+            <el-radio-button label="30">30天</el-radio-button>
+          </el-radio-group>
+        </div>
+        <div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
+      </div>
+    </div> -->
+  </div>
+</template>
+
+<script>
+import {
+  summaryGet,
+  summaryTodayGet,
+  dateProduct,
+  dateAmount,
+  datePayType,
+  summaryDateGet,
+  summarytrade,
+} from "@/api/data/index.js";
+import dayjs from "dayjs";
+import * as echarts from "echarts";
+import { debounce, formatDecimal } from "@/utils/tools.js";
+export default {
+  name: "home",
+  data() {
+    return {
+      formatDecimal,
+      topData: "",
+      saleTab: "sale",
+      saleActive: "7",
+      cardPayChart: null,
+      cardCountChart: null,
+      cardUserChart: null,
+      saleLoading: false,
+      saleChart: null,
+      payChartDay: "7",
+      payChartLoading: false,
+      payChart: null,
+      chartType: 1,
+      productCount: 0,
+      productSum: 0,
+      saleTableActive: "7",
+      saleTable: [],
+      saleTableLoading: false,
+      saleTablePage: 0,
+      saleTableTotal: 0,
+      saleTableSize: 5,
+      __resizeHandler: null,
+      productCountChart: null,
+      productSumChart: null,
+      lineChartType: 0,
+      timeValue: "0",
+      query: {
+        createdAt: "",
+      },
+      tradeLoading: false,
+      tradeSale: {
+        payCount: [],
+      },
+      tradeVip: "",
+      tradeCount: "",
+    };
+  },
+  mounted() {
+    // 增加首页提示是否账号30天过期
+    let date = dayjs(localStorage.getItem("expireDate")).diff(dayjs().format("YYYY-MM-DD"), "day");
+    if (date <= 30 && date >= 0) {
+      this.$alert(
+        `店铺账号有限期至${localStorage.getItem("expireDate")}，店铺账号到期剩余${date}天!`,
+        "提示"
+      );
+    }
+    // this.summaryGet();
+    this.dateAmount();
+    this.dateProduct();
+    // this.summaryDateGet();
+    this.timeChange("0");
+
+    this.__resizeHandler = debounce(() => {
+      if (this.saleChart) {
+        this.saleChart.resize();
+      }
+      if (this.payChart) {
+        this.payChart.resize();
+      }
+      if (this.cardPayChart) {
+        this.cardPayChart.resize();
+      }
+      if (this.cardUserChart) {
+        this.cardUserChart.resize();
+      }
+      if (this.productCountChart) {
+        this.productCountChart.resize();
+      }
+      // if (this.productSumChart) {
+      //   this.productSumChart.resize();
+      // }
+    }, 100);
+    window.addEventListener("resize", this.__resizeHandler);
+    // this.initCardUserChart();
+  },
+  methods: {
+    // 切换时间
+    timeChange(e) {
+      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
+      switch (e) {
+        case "":
+          // 全部
+          this.query.createdAt = [];
+          break;
+        case "0":
+          // 今天
+          this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
+          break;
+        case "-1":
+          // 昨天
+          this.query.createdAt = [
+            dayjs().add(-1, "d").format(format[0]),
+            dayjs().add(-1, "d").format(format[1]),
+          ];
+          break;
+        case "-7":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs().add(-7, "d").format(format[0]),
+            dayjs().format(format[1]),
+          ];
+          break;
+        case "-30":
+          // 最近7天
+          this.query.createdAt = [
+            dayjs().add(-30, "d").format(format[0]),
+            dayjs().format(format[1]),
+          ];
+          break;
+        case "week":
+          // 本周
+          this.query.createdAt = [
+            dayjs().startOf("week").format(format[0]),
+            dayjs().endOf("week").format(format[1]),
+          ];
+          break;
+        case "month":
+          // 本周
+          this.query.createdAt = [
+            dayjs().startOf("month").format(format[0]),
+            dayjs().endOf("month").format(format[1]),
+          ];
+          break;
+        case "custom":
+          // 自定义
+          this.query.createdAt = [];
+          break;
+        default:
+          break;
+      }
+      if (e != "custom") {
+        this.summarytrade();
+      }
+    },
+    // 获取营业板块数据
+    async summarytrade() {
+      try {
+        this.tradeLoading = true;
+        const res = await summarytrade({
+          startTime: this.query.createdAt[0],
+          endTime: this.query.createdAt[1],
+        });
+        this.tradeLoading = false;
+        this.tradeSale = res.sale;
+        this.tradeVip = res.vip;
+        this.tradeCount = res.count;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    lineChartTypeChange(i) {
+      this.lineChartType = i;
+      if (i == 0) {
+        this.dateAmount();
+      } else {
+        this.datePayType();
+      }
+    },
+    // 初始化支付笔数柱状图
+    initCardPayChart(time = [], data = []) {
+      this.cardPayChart = echarts.init(this.$refs.cardPayChart);
+      this.cardPayChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: "30%",
+          },
+        ],
+      });
+    },
+    // 初始化访问量柱状图
+    initCardCountChart(time = [], data = []) {
+      this.cardCountChart = echarts.init(this.$refs.cardCountChart);
+      this.cardCountChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: data,
+            type: "bar",
+            barWidth: "30%",
+          },
+        ],
+      });
+    },
+    // 初始化用户数折线图
+    initCardUserChart(time = [], data = []) {
+      this.cardUserChart = echarts.init(this.$refs.cardUserChart);
+      this.cardUserChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 10,
+          x2: 0,
+          y2: 2,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: data,
+            type: "line",
+            symbol: "none",
+          },
+        ],
+      });
+    },
+    // 初始化销售额图标
+    initSaleChart(time, data) {
+      this.saleChart = null;
+      this.saleChart = echarts.init(this.$refs.saleChart);
+      this.saleChart.setOption({
+        title: {
+          text: "销售趋势",
+          x: "center",
+        },
+        tooltip: {
+          trigger: "axis",
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: time,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              lineStyle: {
+                color: "#999",
+              },
+            },
+            axisLabel: {
+              rotate: time.length <= 7 ? 0 : 45,
+              interval: 0,
+              fontSize: "9",
+            },
+          },
+        ],
+        color: ["#409eff", "#FFC83A", "#F98B26"],
+        yAxis: [
+          {
+            type: "value",
+            axisLine: {
+              lineStyle: {
+                color: "#999",
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                type: "dashed",
+                color: "#ececec",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "订单金额",
+            type: "bar",
+            barWidth: time.length <= 7 ? "50%" : "30%",
+            data: data.map((item) => item.orderAmount),
+          },
+          // {
+          //   name: '实收金额',
+          //   type: "bar",
+          //   barWidth: time.length <= 7 ? "30%" : "20%",
+          //   data: data.map(item => item.actualAmount),
+          // },
+          // {
+          //   name: '优惠金额',
+          //   type: "bar",
+          //   barWidth: time.length <= 7 ? "30%" : "20%",
+          //   data: data.map(item => item.discountAmount),
+          // }
+        ],
+      });
+    },
+    // 初始化销售额图表
+    initPayChart(data) {
+      this.payChart = echarts.init(this.$refs.payChart);
+      this.payChart.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: (params) => {
+            return `${params.name}：${params.value}笔`;
+          },
+        },
+        legend: {
+          top: "5%",
+          left: "center",
+        },
+        color: [
+          "#409eff",
+          "#91cc75",
+          "#fac858",
+          "#ee6666",
+          "#73c0de",
+          "#3ba272",
+          "#fc8452",
+          "#9a60b4",
+          "#ea7ccc",
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: ["40%", "70%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: 20,
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: data,
+          },
+        ],
+      });
+    },
+    // 获取销售额柱状图数据
+    async dateAmount() {
+      try {
+        this.saleLoading = true;
+        const res = await dateAmount(this.saleActive);
+        const data = res.total.map((item) => {
+          return {
+            orderAmount: item.orderAmount,
+            // actualAmount: item.actualAmount,
+            // discountAmount: item.discountAmount
+          };
+        });
+        const time = res.total.map((item) => item.tradeDay);
+        this.initSaleChart(time, data);
+        setTimeout(() => {
+          this.saleLoading = false;
+        }, 300);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    paginationChange(e) {
+      this.saleTablePage = e - 1;
+      this.dateProduct();
+    },
+    // 获取销售额排行表格数据
+    async dateProduct() {
+      try {
+        this.saleTableLoading = true;
+        const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize);
+        this.saleTable = res.productList.content;
+        this.saleTableTotal = res.productList.totalElements;
+        this.productCount = res.productCount.payAmount;
+        this.productSum = res.productSum.payAmount;
+
+        this.summaryDateGet(res.countList);
+        setTimeout(() => {
+          this.saleTableLoading = false;
+        }, 300);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 支付类型占比 饼图
+    async datePayType() {
+      try {
+        this.payChartLoading = true;
+        const res = await datePayType(this.saleActive);
+        const data = res.countPayType.map((item) => {
+          return {
+            value: item.count,
+            name: item.payType,
+          };
+        });
+        setTimeout(() => {
+          this.payChartLoading = false;
+        }, 300);
+        this.initPayChart(data);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    // 汇总数据
+    async summaryGet() {
+      try {
+        const res1 = await summaryGet();
+        const res2 = await summaryTodayGet();
+        this.topData = {
+          ...res1,
+          ...res2,
+        };
+        let payTime = res1.countDateList.map((item) => item.tradeDay);
+        let payData = res1.countDateList.map((item) => item.count);
+
+        let countTime = res1.visitsCountList.map((item) => item.tradeDay);
+        let countData = res1.visitsCountList.map((item) => item.count);
+
+        this.initCardPayChart(payTime, payData);
+        this.initCardCountChart(countTime, countData);
+        console.log(this.topData);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    rankChange() {
+      this.dateProduct();
+      // this.summaryDateGet();
+    },
+    // 初始化销售图标
+    initProduceChart(p1, p2) {
+      this.productCountChart = echarts.init(this.$refs.productCountChart);
+      // this.productSumChart = echarts.init(this.$refs.productSumChart);
+
+      this.productCountChart.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        grid: {
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 0,
+        },
+        xAxis: [
+          {
+            boundaryGap: false,
+            type: "category",
+            data: p1[0],
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        color: "#409eff",
+        yAxis: [
+          {
+            type: "value",
+            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+            axisTick: {
+              show: false, // 不显示坐标轴刻度线
+            },
+            axisLine: {
+              show: false, // 不显示坐标轴线
+            },
+            axisLabel: {
+              show: false, // 不显示坐标轴上的文字
+            },
+            splitLine: {
+              show: false, // 不显示网格线
+            },
+          },
+        ],
+        series: [
+          {
+            data: p1[1],
+            type: "line",
+            symbol: "none",
+            smooth: true,
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#409eff", // 渐变颜色
+                },
+                {
+                  offset: 1,
+                  color: "#409eff", // 渐变颜色
+                },
+              ]),
+            },
+          },
+        ],
+      });
+
+      // this.productSumChart.setOption({
+      //   tooltip: {
+      //     trigger: "axis"
+      //   },
+      //   grid: {
+      //     x: 0,
+      //     y: 0,
+      //     x2: 0,
+      //     y2: 0
+      //   },
+      //   xAxis: [
+      //     {
+      //       boundaryGap: false,
+      //       type: "category",
+      //       data: p2[0],
+      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+      //       axisTick: {
+      //         show: false // 不显示坐标轴刻度线
+      //       },
+      //       axisLine: {
+      //         show: false // 不显示坐标轴线
+      //       },
+      //       axisLabel: {
+      //         show: false // 不显示坐标轴上的文字
+      //       },
+      //       splitLine: {
+      //         show: false // 不显示网格线
+      //       }
+      //     }
+      //   ],
+      //   color: "#409eff",
+      //   yAxis: [
+      //     {
+      //       type: "value",
+      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+      //       axisTick: {
+      //         show: false // 不显示坐标轴刻度线
+      //       },
+      //       axisLine: {
+      //         show: false // 不显示坐标轴线
+      //       },
+      //       axisLabel: {
+      //         show: false // 不显示坐标轴上的文字
+      //       },
+      //       splitLine: {
+      //         show: false // 不显示网格线
+      //       }
+      //     }
+      //   ],
+      //   series: [
+      //     {
+      //       data: p2[1],
+      //       type: "line",
+      //       symbol: "none",
+      //       smooth: true,
+      //       areaStyle: {
+      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+      //           {
+      //             offset: 0,
+      //             color: "#409eff" // 渐变颜色
+      //           },
+      //           {
+      //             offset: 1,
+      //             color: "#409eff" // 渐变颜色
+      //           }
+      //         ])
+      //       }
+      //     }
+      //   ]
+      // });
+    },
+    // 日期汇总数据
+    async summaryDateGet(res) {
+      try {
+        console.log(res);
+
+        // const res = await summaryDateGet(this.saleTableActive);
+        let p1 = [res.map((item) => item.tradeDay), res.map((item) => item.saleNum)];
+        let p2 = [res.map((item) => item.tradeDay), res.map((item) => item.saleAmount)];
+
+        // console.log(p1);
+        // console.log(p2);
+
+        // this.initProduceChart(p1, p2);
+      } catch (error) {
+        console.log(error);
+      }
+    },
+  },
+};
+</script>
+
+<style>
+.popper {
+  border: 1px solid #d9d9d9 !important;
+}
+</style>
+<style scoped lang="scss">
+.tips_row {
+  width: 300px;
+  padding: 0 10px;
+
+  .item {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    color: #666;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid #d9d9d9;
+    }
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        font-size: 20px;
+        margin-right: 10px;
+      }
+    }
+
+    .num {
+      color: #1890ff;
+    }
+  }
+}
+
+.app-container {
+  padding: 20px;
+  background-color: #f5f5f5;
+}
+
+.h_card_wrap {
+  .status_wrap {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890ff;
+        margin-right: 10px;
+      }
+    }
+
+    .time {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .content {
+    background-color: #fff;
+    margin-top: 15px;
+    padding: 20px;
+
+    .top {
+      display: flex;
+
+      .item {
+        flex: 1;
+
+        &.earnings {
+          display: flex;
+        }
+
+        &.data {
+          margin-left: 40px;
+          background: url("../../assets/images/data_home_bg1.png") no-repeat center center / cover;
+          display: flex;
+          align-items: center;
+        }
+
+        .data_item {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .data_item_right {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          .t {
+            width: 200px;
+            color: #333;
+            display: flex;
+
+            &:not(:first-child) {
+              margin-top: 20px;
+            }
+          }
+
+          .n {
+            color: #1890ff;
+            margin-left: 20px;
+          }
+        }
+
+        .num_wrap {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+
+          .num {
+            font-size: 30px;
+            color: #1890ff;
+          }
+
+          .tips {
+            font-size: 12px;
+            margin-top: 10px;
+          }
+        }
+
+        .line_wrap {
+          flex: 1;
+          padding-left: 20px;
+
+          .line_item {
+            &:not(:first-child) {
+              margin-top: 20px;
+            }
+
+            .line_item_top {
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+
+              .t {
+                color: #999;
+              }
+            }
+
+            .line_gropress {
+              display: flex;
+              margin-top: 6px;
+              background-color: #f6f6f6;
+
+              .gropress {
+                height: 5px;
+
+                &.l {
+                  background-color: #1890ff;
+                }
+
+                &.r {
+                  background-color: #ff3f3f;
+                }
+              }
+            }
+
+            .line_btm {
+              display: flex;
+              justify-content: space-between;
+              margin-top: 5px;
+
+              .icon {
+                color: #a2a2a2;
+                position: relative;
+                left: -5px;
+                font-size: 12px;
+              }
+
+              .info {
+                font-size: 12px;
+
+                .l_t {
+                  color: #1890ff;
+                }
+
+                .l_r {
+                  color: #ff3f3f;
+                  margin-left: 10px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .btm {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+
+      .item {
+        width: 200px;
+        height: 83px;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding-left: 18px;
+
+        &.item1 {
+          background-image: url("../../assets/images/data_home_item1.png");
+        }
+
+        &.item2 {
+          background-image: url("../../assets/images/data_home_item2.png");
+        }
+
+        &.item3 {
+          background-image: url("../../assets/images/data_home_item3.png");
+        }
+
+        &.item4 {
+          background-image: url("../../assets/images/data_home_item4.png");
+        }
+
+        .title {
+          display: flex;
+          align-items: center;
+          color: #333;
+          font-size: 14px;
+
+          .icon {
+            font-size: 12px;
+            color: #999;
+            margin-left: 6px;
+          }
+        }
+
+        .icon_wrap {
+          display: flex;
+          align-items: center;
+          margin-top: 10px;
+
+          .img {
+            width: 36px;
+            height: 36px;
+          }
+
+          .t {
+            font-size: 24px;
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+
+.card_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  .card {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 2px;
+    padding: 0 20px;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      color: #999;
+      padding-top: 20px;
+
+      .card_title {
+        font-size: 14px;
+        flex: 1;
+      }
+    }
+
+    .number {
+      padding: 20px 0 10px 0;
+      font-size: 24px;
+      height: 60px;
+    }
+
+    .row {
+      height: 50px;
+      color: #555;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #ececec;
+      }
+
+      .icon {
+        color: rgb(255, 85, 85);
+        margin-left: 4px;
+      }
+
+      .dot {
+        $size: 6px;
+        width: $size;
+        height: $size;
+        border-radius: 50%;
+        background-color: #1890ff;
+        margin-right: 6px;
+      }
+    }
+  }
+}
+
+.chart_wrap {
+  margin-top: 20px;
+
+  .sale_data {
+    display: flex;
+
+    .card {
+      flex: 1;
+      background-color: #fff;
+      border-radius: 2px;
+      padding: 0 20px;
+
+      .sale_data_header {
+        display: flex;
+        justify-content: space-between;
+        color: #999;
+        padding-top: 20px;
+
+        .card_title {
+          font-size: 14px;
+          flex: 1;
+        }
+      }
+
+      .number {
+        padding-top: 10px;
+        font-size: 24px;
+        height: 60px;
+      }
+
+      .product_chart_wrap {
+        height: 50px;
+      }
+    }
+  }
+
+  .item {
+    flex: 1;
+    background-color: #fff;
+    border-radius: 2px;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #ececec;
+      padding: 0 20px;
+
+      .tab_wrap {
+        display: flex;
+        $color: #1890ff;
+
+        .item {
+          padding: 0 10px;
+          height: 60px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 14px;
+          margin-right: 20px;
+
+          &.active {
+            position: relative;
+            color: $color;
+
+            &::after {
+              content: "";
+              width: 100%;
+              border-bottom: 2px solid $color;
+              position: absolute;
+              bottom: 0;
+              left: 0;
+            }
+          }
+        }
+      }
+    }
+
+    .chart {
+      padding: 20px 0;
+      height: 300px;
+    }
+
+    .table {
+      padding: 20px;
+    }
+  }
+}
+</style>
diff --git a/src/views/data/index.vue b/src/views/data/index.vue
index 8a98c27..41a40c8 100644
--- a/src/views/data/index.vue
+++ b/src/views/data/index.vue
@@ -1,1479 +1 @@
-<template>
-  <div class="app-container" style="padding-bottom: 100px">
-    <!-- <div class="card_wrap">
-      <div class="card">
-        <div class="header">
-          <div class="card_title">总销售额</div>
-          <el-tooltip effect="dark" content="订单支付金额" placement="top">
-            <i class="icon el-icon-warning-outline"></i>
-          </el-tooltip>
-        </div>
-        <div class="number">{{ topData.totalSales || 0 }}</div>
-        <div class="row">平均每单{{ topData.averageSales || 0 }}</div>
-        <div class="row">今日销售额{{ topData.totalSalesToday || 0 }}</div>
-      </div>
-      <div class="card">
-        <div class="header">
-          <div class="card_title">支付笔数</div>
-        </div>
-        <div class="number">{{ topData.paymentsNumber }}</div>
-        <div class="row" ref="cardPayChart" style="padding-bottom: 2px;"></div>
-        <div class="row">
-          今日支付笔数{{ topData.paymentsNumberToday || 0 }}
-        </div>
-      </div>
-      <div class="card">
-        <div class="header">
-          <div class="card_title">访问量</div>
-        </div>
-        <div class="number">{{ topData.totalVisits }}</div>
-        <div class="row" ref="cardCountChart" style="padding-bottom: 2px;"></div>
-        <div class="row">
-          <div class="dot"></div>
-          今日访问 {{ topData.totalVisitsToday || 0 }}
-        </div>
-      </div>
-      <div class="card">
-        <div class="header">
-          <div class="card_title">用户数</div>
-        </div>
-        <div class="number">{{ topData.totalUser }}</div>
-        <div class="row" ref="cardUserChart" style="padding-bottom: 2px;"></div>
-        <div class="row">
-          今日新增 {{ topData.userToday || 0 }}
-          <i class="icon el-icon-caret-top"></i>
-        </div>
-      </div>
-    </div> -->
-    <div class="h_card_wrap">
-      <div class="status_wrap">
-        <div class="left">
-          <div class="dot"></div>
-          <span>营业</span>
-        </div>
-        <div class="time_wrap">
-          <el-radio-group v-model="timeValue" @change="timeChange">
-            <el-radio-button value="0">今天</el-radio-button>
-            <el-radio-button value="-1">昨天</el-radio-button>
-            <el-radio-button value="-7">最近7天</el-radio-button>
-            <el-radio-button value="-30">最近30天</el-radio-button>
-            <el-radio-button value="week">本周</el-radio-button>
-            <el-radio-button value="month">本月</el-radio-button>
-            <el-radio-button value="custom">自定义</el-radio-button>
-          </el-radio-group>
-          <el-date-picker
-            v-model="query.createdAt"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :default-time="['00:00:00', '23:59:59']"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            v-if="timeValue == 'custom'"
-            @change="summarytrade"
-          ></el-date-picker>
-        </div>
-      </div>
-      <div class="content" v-loading="tradeLoading">
-        <div class="top">
-          <div class="item earnings">
-            <div class="num_wrap">
-              <div class="num">{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}</div>
-              <div class="tips">
-                营业实收（元）
-                <el-tooltip popper-class="popper" effect="light" placement="bottom">
-                  <div class="tips_row" slot="content">
-                    <div class="item" v-for="(item, index) in tradeSale.payCount" :key="index">
-                      <div class="left">
-                        <img class="icon" :src="item.icon" />
-                        <span>{{ item.payType }}</span>
-                      </div>
-                      <span class="num">{{ item.payAmount }}</span>
-                    </div>
-                  </div>
-                  <el-icon class="el-icon-question" />
-                </el-tooltip>
-              </div>
-            </div>
-            <div class="line_wrap">
-              <div class="line_item">
-                <div class="line_item_top">
-                  <div>销售金额（元）</div>
-                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalSaleAmount || 0) }}</div> -->
-                </div>
-                <div class="line_gropress">
-                  <div
-                    class="gropress l"
-                    :style="{
-                      width: `${
-                        tradeSale.incomeAmount
-                          ? (tradeSale.incomeAmount / tradeSale.totalSaleAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                  <div
-                    class="gropress r"
-                    :style="{
-                      width: `${
-                        tradeSale.refundAmount
-                          ? (tradeSale.refundAmount / tradeSale.totalSaleAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                </div>
-                <div class="line_btm">
-                  <el-icon class="icon el-icon-caret-right" />
-                  <div class="info">
-                    <span class="l_t">收：{{ formatDecimal(tradeSale.incomeAmount || 0) }}</span>
-                    <span class="l_r">退：{{ formatDecimal(tradeSale.refundAmount || 0) }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="line_item">
-                <div class="line_item_top">
-                  <div>充值金额（元）</div>
-                  <!-- <div class="t">{{ formatDecimal(tradeSale.totalVipAmount || 0) }}</div> -->
-                </div>
-                <div class="line_gropress">
-                  <div
-                    class="gropress l"
-                    :style="{
-                      width: `${
-                        tradeSale.inAmount
-                          ? (tradeSale.inAmount / tradeSale.totalVipAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                  <div
-                    class="gropress r"
-                    :style="{
-                      width: `${
-                        tradeSale.inAmount
-                          ? (tradeSale.outAmount / tradeSale.totalVipAmount) * 100
-                          : 0
-                      }%`,
-                    }"
-                  ></div>
-                </div>
-                <div class="line_btm">
-                  <el-icon class="icon el-icon-caret-right" />
-                  <div class="info">
-                    <span class="l_t">收：{{ formatDecimal(tradeSale.inAmount || 0) }}</span>
-                    <span class="l_r">退：{{ formatDecimal(tradeSale.outAmount || 0) }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="item data">
-            <div class="data_item">
-              <div class="num_wrap">
-                <div class="num">{{ formatDecimal(tradeVip.useAmount || 0) }}</div>
-                <div class="tips">会员消费（元）</div>
-              </div>
-            </div>
-            <div class="data_item_right">
-              <div class="t">
-                <span>新增会员数</span>
-                <span class="n">{{ tradeVip.newFlow || 0 }}(人)</span>
-              </div>
-              <div class="t">
-                <span>会员消费笔数</span>
-                <span class="n">{{ tradeVip.useNum || 0 }}</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="btm">
-          <div class="item item1">
-            <div class="title">客单价</div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item1_icon.png" />
-              <div class="t">{{ formatDecimal(tradeCount.unitPrice || 0) }}</div>
-            </div>
-          </div>
-          <div class="item item2">
-            <div class="title">
-              翻台率
-              <el-tooltip
-                effect="dark"
-                content="翻台率=（客单数-桌台数）/桌台数*100%"
-                placement="top"
-              >
-                <el-icon class="icon el-icon-question" />
-              </el-tooltip>
-            </div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item2_icon.png" />
-              <div class="t">{{ tradeCount.turnoverRate }}</div>
-            </div>
-          </div>
-          <div class="item item3">
-            <div class="title">优惠金额</div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item3_icon.png" />
-              <div class="t">{{ formatDecimal(tradeCount.saveAmount || 0) }}</div>
-            </div>
-          </div>
-          <div class="item item4">
-            <div class="title">优惠笔数</div>
-            <div class="icon_wrap">
-              <img class="img" src="@/assets/images/data_home_item4_icon.png" />
-              <div class="t">{{ tradeCount.saveNum || 0 }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 销售额 -->
-    <div class="chart_wrap" style="display: flex">
-      <div class="item">
-        <div class="header">
-          <div class="tab_wrap">
-            <div
-              class="item"
-              :class="{ active: lineChartType == 0 }"
-              @click="lineChartTypeChange(0)"
-            >
-              销售趋势
-            </div>
-            <div
-              class="item"
-              :class="{ active: lineChartType == 1 }"
-              @click="lineChartTypeChange(1)"
-            >
-              支付占比
-            </div>
-          </div>
-          <el-radio-group v-model="saleActive" @change="lineChartTypeChange(lineChartType)">
-            <el-radio-button value="7">近7天</el-radio-button>
-            <el-radio-button value="30">30天</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div
-          class="chart"
-          ref="saleChart"
-          v-loading="saleLoading"
-          style="height: 350px"
-          v-show="lineChartType == 0"
-        ></div>
-        <div
-          class="chart"
-          ref="payChart"
-          v-loading="payChartLoading"
-          style="height: 350px"
-          v-show="lineChartType == 1"
-        ></div>
-      </div>
-      <!-- 商品销售排行 -->
-      <div class="item" style="margin-left: 20px">
-        <div class="header">
-          <div class="tab_wrap">
-            <div class="item active">商品销售排行</div>
-          </div>
-          <el-radio-group v-model="saleTableActive" @change="rankChange">
-            <!-- <el-radio-button label="1">今天</el-radio-button> -->
-            <el-radio-button value="7">近7天</el-radio-button>
-            <el-radio-button value="30">30天</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div class="sale_data">
-          <!-- <div class="card">
-            <div class="sale_data_header">
-              <div class="card_title">销售数量</div>
-            </div>
-            <div class="number">{{ productCount }}</div>
-            <div class="product_chart_wrap" ref="productCountChart"></div>
-          </div> -->
-          <!-- <div class="card">
-            <div class="sale_data_header">
-              <div class="card_title">销售金额</div>
-            </div>
-            <div class="number">￥{{ productSum }}</div>
-            <div class="product_chart_wrap" ref="productSumChart"></div>
-          </div> -->
-        </div>
-        <div class="table">
-          <el-table :data="saleTable" v-loading="saleTableLoading">
-            <!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
-            <el-table-column label="商品名称" prop="productName"></el-table-column>
-            <el-table-column label="数量" prop="salesNum"></el-table-column>
-            <el-table-column label="金额" prop="salesAmount"></el-table-column>
-          </el-table>
-          <div
-            class="head-container"
-            style="padding-top: 20px; display: flex; justify-content: flex-end"
-          >
-            <el-pagination
-              :total="saleTableTotal"
-              :page-size="saleTableSize"
-              :current-page="saleTablePage + 1"
-              @current-change="paginationChange"
-              layout="total, prev, pager, next, jumper"
-            ></el-pagination>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- <div class="chart_wrap" style="display: flex;">
-      <div class="item" style="margin-left: 20px;">
-        <div class="header">
-          <div class="tab_wrap">
-            <div class="item active">支付占比类型</div>
-          </div>
-          <el-radio-group v-model="payChartDay" @change="datePayType">
-            <el-radio-button label="7">近7天</el-radio-button>
-            <el-radio-button label="30">30天</el-radio-button>
-          </el-radio-group>
-        </div>
-        <div style="height: 400px;margin-top: 30px;" ref="payChart" v-loading="payChartLoading"></div>
-      </div>
-    </div> -->
-  </div>
-</template>
-
-<script>
-import {
-  summaryGet,
-  summaryTodayGet,
-  dateProduct,
-  dateAmount,
-  datePayType,
-  summaryDateGet,
-  summarytrade,
-} from "@/api/data/index.js";
-import dayjs from "dayjs";
-import * as echarts from "echarts";
-import { debounce, formatDecimal } from "@/utils/tools.js";
-export default {
-  name: "home",
-  data() {
-    return {
-      formatDecimal,
-      topData: "",
-      saleTab: "sale",
-      saleActive: "7",
-      cardPayChart: null,
-      cardCountChart: null,
-      cardUserChart: null,
-      saleLoading: false,
-      saleChart: null,
-      payChartDay: "7",
-      payChartLoading: false,
-      payChart: null,
-      chartType: 1,
-      productCount: 0,
-      productSum: 0,
-      saleTableActive: "7",
-      saleTable: [],
-      saleTableLoading: false,
-      saleTablePage: 0,
-      saleTableTotal: 0,
-      saleTableSize: 5,
-      __resizeHandler: null,
-      productCountChart: null,
-      productSumChart: null,
-      lineChartType: 0,
-      timeValue: "0",
-      query: {
-        createdAt: "",
-      },
-      tradeLoading: false,
-      tradeSale: {
-        payCount: [],
-      },
-      tradeVip: "",
-      tradeCount: "",
-    };
-  },
-  mounted() {
-    // 增加首页提示是否账号30天过期
-    let date = dayjs(localStorage.getItem("expireDate")).diff(dayjs().format("YYYY-MM-DD"), "day");
-    if (date <= 30 && date >= 0) {
-      this.$alert(
-        `店铺账号有限期至${localStorage.getItem("expireDate")}，店铺账号到期剩余${date}天!`,
-        "提示"
-      );
-    }
-    // this.summaryGet();
-    this.dateAmount();
-    this.dateProduct();
-    // this.summaryDateGet();
-    this.timeChange("0");
-
-    this.__resizeHandler = debounce(() => {
-      if (this.saleChart) {
-        this.saleChart.resize();
-      }
-      if (this.payChart) {
-        this.payChart.resize();
-      }
-      if (this.cardPayChart) {
-        this.cardPayChart.resize();
-      }
-      if (this.cardUserChart) {
-        this.cardUserChart.resize();
-      }
-      if (this.productCountChart) {
-        this.productCountChart.resize();
-      }
-      // if (this.productSumChart) {
-      //   this.productSumChart.resize();
-      // }
-    }, 100);
-    window.addEventListener("resize", this.__resizeHandler);
-    // this.initCardUserChart();
-  },
-  methods: {
-    // 切换时间
-    timeChange(e) {
-      const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
-      switch (e) {
-        case "":
-          // 全部
-          this.query.createdAt = [];
-          break;
-        case "0":
-          // 今天
-          this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
-          break;
-        case "-1":
-          // 昨天
-          this.query.createdAt = [
-            dayjs().add(-1, "d").format(format[0]),
-            dayjs().add(-1, "d").format(format[1]),
-          ];
-          break;
-        case "-7":
-          // 最近7天
-          this.query.createdAt = [
-            dayjs().add(-7, "d").format(format[0]),
-            dayjs().format(format[1]),
-          ];
-          break;
-        case "-30":
-          // 最近7天
-          this.query.createdAt = [
-            dayjs().add(-30, "d").format(format[0]),
-            dayjs().format(format[1]),
-          ];
-          break;
-        case "week":
-          // 本周
-          this.query.createdAt = [
-            dayjs().startOf("week").format(format[0]),
-            dayjs().endOf("week").format(format[1]),
-          ];
-          break;
-        case "month":
-          // 本周
-          this.query.createdAt = [
-            dayjs().startOf("month").format(format[0]),
-            dayjs().endOf("month").format(format[1]),
-          ];
-          break;
-        case "custom":
-          // 自定义
-          this.query.createdAt = [];
-          break;
-        default:
-          break;
-      }
-      if (e != "custom") {
-        this.summarytrade();
-      }
-    },
-    // 获取营业板块数据
-    async summarytrade() {
-      try {
-        this.tradeLoading = true;
-        const res = await summarytrade({
-          startTime: this.query.createdAt[0],
-          endTime: this.query.createdAt[1],
-        });
-        this.tradeLoading = false;
-        this.tradeSale = res.sale;
-        this.tradeVip = res.vip;
-        this.tradeCount = res.count;
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    lineChartTypeChange(i) {
-      this.lineChartType = i;
-      if (i == 0) {
-        this.dateAmount();
-      } else {
-        this.datePayType();
-      }
-    },
-    // 初始化支付笔数柱状图
-    initCardPayChart(time = [], data = []) {
-      this.cardPayChart = echarts.init(this.$refs.cardPayChart);
-      this.cardPayChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 0,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: data,
-            type: "bar",
-            barWidth: "30%",
-          },
-        ],
-      });
-    },
-    // 初始化访问量柱状图
-    initCardCountChart(time = [], data = []) {
-      this.cardCountChart = echarts.init(this.$refs.cardCountChart);
-      this.cardCountChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 0,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: data,
-            type: "bar",
-            barWidth: "30%",
-          },
-        ],
-      });
-    },
-    // 初始化用户数折线图
-    initCardUserChart(time = [], data = []) {
-      this.cardUserChart = echarts.init(this.$refs.cardUserChart);
-      this.cardUserChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 10,
-          x2: 0,
-          y2: 2,
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: data,
-            type: "line",
-            symbol: "none",
-          },
-        ],
-      });
-    },
-    // 初始化销售额图标
-    initSaleChart(time, data) {
-      this.saleChart = null;
-      this.saleChart = echarts.init(this.$refs.saleChart);
-      this.saleChart.setOption({
-        title: {
-          text: "销售趋势",
-          x: "center",
-        },
-        tooltip: {
-          trigger: "axis",
-        },
-        xAxis: [
-          {
-            type: "category",
-            data: time,
-            axisTick: {
-              alignWithLabel: true,
-            },
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
-            axisLabel: {
-              rotate: time.length <= 7 ? 0 : 45,
-              interval: 0,
-              fontSize: "9",
-            },
-          },
-        ],
-        color: ["#409eff", "#FFC83A", "#F98B26"],
-        yAxis: [
-          {
-            type: "value",
-            axisLine: {
-              lineStyle: {
-                color: "#999",
-              },
-            },
-            splitLine: {
-              lineStyle: {
-                type: "dashed",
-                color: "#ececec",
-              },
-            },
-          },
-        ],
-        series: [
-          {
-            name: "订单金额",
-            type: "bar",
-            barWidth: time.length <= 7 ? "50%" : "30%",
-            data: data.map((item) => item.orderAmount),
-          },
-          // {
-          //   name: '实收金额',
-          //   type: "bar",
-          //   barWidth: time.length <= 7 ? "30%" : "20%",
-          //   data: data.map(item => item.actualAmount),
-          // },
-          // {
-          //   name: '优惠金额',
-          //   type: "bar",
-          //   barWidth: time.length <= 7 ? "30%" : "20%",
-          //   data: data.map(item => item.discountAmount),
-          // }
-        ],
-      });
-    },
-    // 初始化销售额图表
-    initPayChart(data) {
-      this.payChart = echarts.init(this.$refs.payChart);
-      this.payChart.setOption({
-        tooltip: {
-          trigger: "item",
-          formatter: (params) => {
-            return `${params.name}：${params.value}笔`;
-          },
-        },
-        legend: {
-          top: "5%",
-          left: "center",
-        },
-        color: [
-          "#409eff",
-          "#91cc75",
-          "#fac858",
-          "#ee6666",
-          "#73c0de",
-          "#3ba272",
-          "#fc8452",
-          "#9a60b4",
-          "#ea7ccc",
-        ],
-        series: [
-          {
-            type: "pie",
-            radius: ["40%", "70%"],
-            avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: "center",
-            },
-            emphasis: {
-              label: {
-                show: true,
-                fontSize: 20,
-              },
-            },
-            labelLine: {
-              show: false,
-            },
-            data: data,
-          },
-        ],
-      });
-    },
-    // 获取销售额柱状图数据
-    async dateAmount() {
-      try {
-        this.saleLoading = true;
-        const res = await dateAmount(this.saleActive);
-        const data = res.total.map((item) => {
-          return {
-            orderAmount: item.orderAmount,
-            // actualAmount: item.actualAmount,
-            // discountAmount: item.discountAmount
-          };
-        });
-        const time = res.total.map((item) => item.tradeDay);
-        this.initSaleChart(time, data);
-        setTimeout(() => {
-          this.saleLoading = false;
-        }, 300);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    paginationChange(e) {
-      this.saleTablePage = e - 1;
-      this.dateProduct();
-    },
-    // 获取销售额排行表格数据
-    async dateProduct() {
-      try {
-        this.saleTableLoading = true;
-        const res = await dateProduct(this.saleTableActive, this.saleTablePage, this.saleTableSize);
-        this.saleTable = res.productList.content;
-        this.saleTableTotal = res.productList.totalElements;
-        this.productCount = res.productCount.payAmount;
-        this.productSum = res.productSum.payAmount;
-
-        this.summaryDateGet(res.countList);
-        setTimeout(() => {
-          this.saleTableLoading = false;
-        }, 300);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 支付类型占比 饼图
-    async datePayType() {
-      try {
-        this.payChartLoading = true;
-        const res = await datePayType(this.saleActive);
-        const data = res.countPayType.map((item) => {
-          return {
-            value: item.count,
-            name: item.payType,
-          };
-        });
-        setTimeout(() => {
-          this.payChartLoading = false;
-        }, 300);
-        this.initPayChart(data);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    // 汇总数据
-    async summaryGet() {
-      try {
-        const res1 = await summaryGet();
-        const res2 = await summaryTodayGet();
-        this.topData = {
-          ...res1,
-          ...res2,
-        };
-        let payTime = res1.countDateList.map((item) => item.tradeDay);
-        let payData = res1.countDateList.map((item) => item.count);
-
-        let countTime = res1.visitsCountList.map((item) => item.tradeDay);
-        let countData = res1.visitsCountList.map((item) => item.count);
-
-        this.initCardPayChart(payTime, payData);
-        this.initCardCountChart(countTime, countData);
-        console.log(this.topData);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-    rankChange() {
-      this.dateProduct();
-      // this.summaryDateGet();
-    },
-    // 初始化销售图标
-    initProduceChart(p1, p2) {
-      this.productCountChart = echarts.init(this.$refs.productCountChart);
-      // this.productSumChart = echarts.init(this.$refs.productSumChart);
-
-      this.productCountChart.setOption({
-        tooltip: {
-          trigger: "axis",
-        },
-        grid: {
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 0,
-        },
-        xAxis: [
-          {
-            boundaryGap: false,
-            type: "category",
-            data: p1[0],
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        color: "#409eff",
-        yAxis: [
-          {
-            type: "value",
-            show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-            axisTick: {
-              show: false, // 不显示坐标轴刻度线
-            },
-            axisLine: {
-              show: false, // 不显示坐标轴线
-            },
-            axisLabel: {
-              show: false, // 不显示坐标轴上的文字
-            },
-            splitLine: {
-              show: false, // 不显示网格线
-            },
-          },
-        ],
-        series: [
-          {
-            data: p1[1],
-            type: "line",
-            symbol: "none",
-            smooth: true,
-            areaStyle: {
-              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "#409eff", // 渐变颜色
-                },
-                {
-                  offset: 1,
-                  color: "#409eff", // 渐变颜色
-                },
-              ]),
-            },
-          },
-        ],
-      });
-
-      // this.productSumChart.setOption({
-      //   tooltip: {
-      //     trigger: "axis"
-      //   },
-      //   grid: {
-      //     x: 0,
-      //     y: 0,
-      //     x2: 0,
-      //     y2: 0
-      //   },
-      //   xAxis: [
-      //     {
-      //       boundaryGap: false,
-      //       type: "category",
-      //       data: p2[0],
-      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-      //       axisTick: {
-      //         show: false // 不显示坐标轴刻度线
-      //       },
-      //       axisLine: {
-      //         show: false // 不显示坐标轴线
-      //       },
-      //       axisLabel: {
-      //         show: false // 不显示坐标轴上的文字
-      //       },
-      //       splitLine: {
-      //         show: false // 不显示网格线
-      //       }
-      //     }
-      //   ],
-      //   color: "#409eff",
-      //   yAxis: [
-      //     {
-      //       type: "value",
-      //       show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-      //       axisTick: {
-      //         show: false // 不显示坐标轴刻度线
-      //       },
-      //       axisLine: {
-      //         show: false // 不显示坐标轴线
-      //       },
-      //       axisLabel: {
-      //         show: false // 不显示坐标轴上的文字
-      //       },
-      //       splitLine: {
-      //         show: false // 不显示网格线
-      //       }
-      //     }
-      //   ],
-      //   series: [
-      //     {
-      //       data: p2[1],
-      //       type: "line",
-      //       symbol: "none",
-      //       smooth: true,
-      //       areaStyle: {
-      //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-      //           {
-      //             offset: 0,
-      //             color: "#409eff" // 渐变颜色
-      //           },
-      //           {
-      //             offset: 1,
-      //             color: "#409eff" // 渐变颜色
-      //           }
-      //         ])
-      //       }
-      //     }
-      //   ]
-      // });
-    },
-    // 日期汇总数据
-    async summaryDateGet(res) {
-      try {
-        console.log(res);
-
-        // const res = await summaryDateGet(this.saleTableActive);
-        let p1 = [res.map((item) => item.tradeDay), res.map((item) => item.saleNum)];
-        let p2 = [res.map((item) => item.tradeDay), res.map((item) => item.saleAmount)];
-
-        // console.log(p1);
-        // console.log(p2);
-
-        // this.initProduceChart(p1, p2);
-      } catch (error) {
-        console.log(error);
-      }
-    },
-  },
-};
-</script>
-
-<style>
-.popper {
-  border: 1px solid #d9d9d9 !important;
-}
-</style>
-<style scoped lang="scss">
-.tips_row {
-  width: 300px;
-  padding: 0 10px;
-
-  .item {
-    height: 40px;
-    display: flex;
-    align-items: center;
-    color: #666;
-    justify-content: space-between;
-
-    &:not(:last-child) {
-      border-bottom: 1px solid #d9d9d9;
-    }
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .icon {
-        font-size: 20px;
-        margin-right: 10px;
-      }
-    }
-
-    .num {
-      color: #1890ff;
-    }
-  }
-}
-
-.app-container {
-  padding: 20px;
-  background-color: #f5f5f5;
-}
-
-.h_card_wrap {
-  .status_wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      align-items: center;
-
-      .dot {
-        $size: 6px;
-        width: $size;
-        height: $size;
-        border-radius: 50%;
-        background-color: #1890ff;
-        margin-right: 10px;
-      }
-    }
-
-    .time {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  .content {
-    background-color: #fff;
-    margin-top: 15px;
-    padding: 20px;
-
-    .top {
-      display: flex;
-
-      .item {
-        flex: 1;
-
-        &.earnings {
-          display: flex;
-        }
-
-        &.data {
-          margin-left: 40px;
-          background: url("../../assets/images/data_home_bg1.png") no-repeat center center / cover;
-          display: flex;
-          align-items: center;
-        }
-
-        .data_item {
-          flex: 1;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-        }
-
-        .data_item_right {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-
-          .t {
-            width: 200px;
-            color: #333;
-            display: flex;
-
-            &:not(:first-child) {
-              margin-top: 20px;
-            }
-          }
-
-          .n {
-            color: #1890ff;
-            margin-left: 20px;
-          }
-        }
-
-        .num_wrap {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-
-          .num {
-            font-size: 30px;
-            color: #1890ff;
-          }
-
-          .tips {
-            font-size: 12px;
-            margin-top: 10px;
-          }
-        }
-
-        .line_wrap {
-          flex: 1;
-          padding-left: 20px;
-
-          .line_item {
-            &:not(:first-child) {
-              margin-top: 20px;
-            }
-
-            .line_item_top {
-              display: flex;
-              justify-content: space-between;
-              font-size: 12px;
-
-              .t {
-                color: #999;
-              }
-            }
-
-            .line_gropress {
-              display: flex;
-              margin-top: 6px;
-              background-color: #f6f6f6;
-
-              .gropress {
-                height: 5px;
-
-                &.l {
-                  background-color: #1890ff;
-                }
-
-                &.r {
-                  background-color: #ff3f3f;
-                }
-              }
-            }
-
-            .line_btm {
-              display: flex;
-              justify-content: space-between;
-              margin-top: 5px;
-
-              .icon {
-                color: #a2a2a2;
-                position: relative;
-                left: -5px;
-                font-size: 12px;
-              }
-
-              .info {
-                font-size: 12px;
-
-                .l_t {
-                  color: #1890ff;
-                }
-
-                .l_r {
-                  color: #ff3f3f;
-                  margin-left: 10px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    .btm {
-      display: flex;
-      justify-content: space-between;
-      margin-top: 20px;
-
-      .item {
-        width: 200px;
-        height: 83px;
-        background-repeat: no-repeat;
-        background-position: center center;
-        background-size: 100% 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        padding-left: 18px;
-
-        &.item1 {
-          background-image: url("../../assets/images/data_home_item1.png");
-        }
-
-        &.item2 {
-          background-image: url("../../assets/images/data_home_item2.png");
-        }
-
-        &.item3 {
-          background-image: url("../../assets/images/data_home_item3.png");
-        }
-
-        &.item4 {
-          background-image: url("../../assets/images/data_home_item4.png");
-        }
-
-        .title {
-          display: flex;
-          align-items: center;
-          color: #333;
-          font-size: 14px;
-
-          .icon {
-            font-size: 12px;
-            color: #999;
-            margin-left: 6px;
-          }
-        }
-
-        .icon_wrap {
-          display: flex;
-          align-items: center;
-          margin-top: 10px;
-
-          .img {
-            width: 36px;
-            height: 36px;
-          }
-
-          .t {
-            font-size: 24px;
-            margin-left: 10px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.card_wrap {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-
-  .card {
-    flex: 1;
-    background-color: #fff;
-    border-radius: 2px;
-    padding: 0 20px;
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      color: #999;
-      padding-top: 20px;
-
-      .card_title {
-        font-size: 14px;
-        flex: 1;
-      }
-    }
-
-    .number {
-      padding: 20px 0 10px 0;
-      font-size: 24px;
-      height: 60px;
-    }
-
-    .row {
-      height: 50px;
-      color: #555;
-      font-size: 14px;
-      display: flex;
-      align-items: center;
-
-      &:not(:last-child) {
-        border-bottom: 1px solid #ececec;
-      }
-
-      .icon {
-        color: rgb(255, 85, 85);
-        margin-left: 4px;
-      }
-
-      .dot {
-        $size: 6px;
-        width: $size;
-        height: $size;
-        border-radius: 50%;
-        background-color: #1890ff;
-        margin-right: 6px;
-      }
-    }
-  }
-}
-
-.chart_wrap {
-  margin-top: 20px;
-
-  .sale_data {
-    display: flex;
-
-    .card {
-      flex: 1;
-      background-color: #fff;
-      border-radius: 2px;
-      padding: 0 20px;
-
-      .sale_data_header {
-        display: flex;
-        justify-content: space-between;
-        color: #999;
-        padding-top: 20px;
-
-        .card_title {
-          font-size: 14px;
-          flex: 1;
-        }
-      }
-
-      .number {
-        padding-top: 10px;
-        font-size: 24px;
-        height: 60px;
-      }
-
-      .product_chart_wrap {
-        height: 50px;
-      }
-    }
-  }
-
-  .item {
-    flex: 1;
-    background-color: #fff;
-    border-radius: 2px;
-
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: 1px solid #ececec;
-      padding: 0 20px;
-
-      .tab_wrap {
-        display: flex;
-        $color: #1890ff;
-
-        .item {
-          padding: 0 10px;
-          height: 60px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 14px;
-          margin-right: 20px;
-
-          &.active {
-            position: relative;
-            color: $color;
-
-            &::after {
-              content: "";
-              width: 100%;
-              border-bottom: 2px solid $color;
-              position: absolute;
-              bottom: 0;
-              left: 0;
-            }
-          }
-        }
-      }
-    }
-
-    .chart {
-      padding: 20px 0;
-      height: 300px;
-    }
-
-    .table {
-      padding: 20px;
-    }
-  }
-}
-</style>
+<template></template>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 89b71b5..3c33e78 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -15,7 +15,7 @@
           <el-radio-button :value="1">员工</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 'staff'">
+      <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 1">
         <el-input
           v-model="state.loginForm.merchantName"
           type="text"
@@ -145,7 +145,7 @@ function getCookie() {
     rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
     code: "",
     merchantName: "",
-    loginType: "merchant",
+    loginType: 0,
   };
 }
 
diff --git a/src/views/shop/staff/components/select-permission.vue b/src/views/shop/staff/components/select-permission.vue
index 3a0794d..63bed0f 100644
--- a/src/views/shop/staff/components/select-permission.vue
+++ b/src/views/shop/staff/components/select-permission.vue
@@ -1 +1,52 @@
-<template>11</template>
\ No newline at end of file
+<template>
+  <div v-for="(item, index) in list" :key="index">
+    <h4 class="title">
+      {{ item.label }}
+    </h4>
+    <div v-if="item.children" class="flex gap-10">
+      <el-checkbox-group v-model="model[index]">
+        <el-checkbox
+          v-for="(child, childIndex) in item.children"
+          :key="childIndex"
+          :value="child.id"
+          :label="child.label"
+          :style="returnStyle(child)"
+        ></el-checkbox>
+      </el-checkbox-group>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const model = defineModel({ type: Array, default: () => [] });
+
+const importantPer = ["允许收款", "允许打折", "允许修改会员余额", "允许沽清"];
+function returnStyle(child) {
+  if (importantPer.includes(child.label)) {
+    return "color:red";
+  }
+}
+for (const item in props.list) {
+  console.log(item);
+  model[item] = [];
+}
+function getFormData() {
+  return formData;
+}
+defineExpose({
+  getFormData,
+});
+</script>
+
+<style scoped >
+.title {
+  text-align: left;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/shop/staff/config/add.ts b/src/views/shop/staff/config/add.ts
index cff3b73..5cdcbd9 100644
--- a/src/views/shop/staff/config/add.ts
+++ b/src/views/shop/staff/config/add.ts
@@ -144,12 +144,7 @@ const modalConfig: IModalConfig<addRequest> = {
         sm: 12,
       },
     },
-    {
-      label: "员工权限设置",
-      prop: "",
-      type: "title",
-      slotName: "title",
-    },
+
     {
       label: "是否允许管理端登录",
       prop: "isManage",
@@ -170,6 +165,20 @@ const modalConfig: IModalConfig<addRequest> = {
       ],
       initialValue: 1,
     },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      type: 'custom',
+      prop: 'permission',
+      slotName: 'permission',
+      label: '',
+      hidden: true
+    }
+
   ],
 };
 
diff --git a/src/views/shop/staff/config/edit.ts b/src/views/shop/staff/config/edit.ts
index 126f0e2..b168e17 100644
--- a/src/views/shop/staff/config/edit.ts
+++ b/src/views/shop/staff/config/edit.ts
@@ -27,7 +27,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "角色",
       prop: "roleId",
-      rules: [{ required: true, message: "请选择角色", trigger: "blur" }],
+      rules: [{ required: false, message: "请选择角色", trigger: "blur" }],
       type: "select",
       attrs: {
         placeholder: "请选择角色",
@@ -54,7 +54,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "员工编号",
       prop: "code",
-      rules: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入员工编号", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入员工编号",
@@ -68,7 +68,7 @@ const modalConfig: IModalConfig<editRequest> = {
       label: "手机号",
       prop: "phone",
       rules: [{
-        required: true,
+        required: false,
         pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
         message: "请输入正确的手机号码",
         trigger: "blur",
@@ -85,7 +85,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "登录账号",
       prop: "accountName",
-      rules: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入登录账号", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入登录账号",
@@ -98,7 +98,7 @@ const modalConfig: IModalConfig<editRequest> = {
     {
       label: "登录密码",
       prop: "accountPwd",
-      rules: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
+      rules: [{ required: false, message: "请输入登录密码", trigger: "blur" }],
       type: "input",
       attrs: {
         placeholder: "请输入登录密码",
@@ -144,12 +144,6 @@ const modalConfig: IModalConfig<editRequest> = {
         sm: 12,
       },
     },
-    {
-      label: "员工权限设置",
-      prop: "",
-      type: "title",
-      slotName: "title",
-    },
     {
       label: "是否允许管理端登录",
       prop: "isManage",
@@ -170,6 +164,12 @@ const modalConfig: IModalConfig<editRequest> = {
       ],
       initialValue: 1,
     },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
   ],
 };
 
diff --git a/src/views/shop/staff/index.vue b/src/views/shop/staff/index.vue
index ad70a37..eb2dada 100644
--- a/src/views/shop/staff/index.vue
+++ b/src/views/shop/staff/index.vue
@@ -43,8 +43,12 @@
 
     <!-- 新增 -->
     <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
-      <template #permission="scope">
-        <selectPermission></selectPermission>
+      <template #formFooter>
+        <selectPermission
+          v-model="selPermissionList"
+          :list="permissionList"
+          ref="refSelectPermission"
+        ></selectPermission>
       </template>
     </page-modal>
 
@@ -54,8 +58,12 @@
       :modal-config="editModalConfig"
       @submit-click="handleSubmitClick"
     >
-      <template #permission="scope">
-        <selectPermission></selectPermission>
+      <template #formFooter>
+        <selectPermission
+          v-model="selPermissionList"
+          :list="permissionList"
+          ref="refSelectPermission"
+        ></selectPermission>
       </template>
     </page-modal>
   </div>
@@ -71,9 +79,10 @@ import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
 import RoleApi, { type SysRole } from "@/api/account/role";
 import ShopStaffApi from "@/api/account/shopStaff";
-import permissionApi from "@/api/account/permission";
+import permissionApi, { type ShopPermission } from "@/api/account/permission";
 import selectPermission from "./components/select-permission.vue";
-permissionApi.getshopPermission();
+const refSelectPermission = ref();
+
 const {
   searchRef,
   contentRef,
@@ -89,9 +98,36 @@ const {
   handleFilterChange,
 } = usePage();
 
+//店铺权限列表
+let permissionList = ref<ShopPermission[]>([]);
+//选中的权限列表
+let selPermissionList = ref<string[]>([]);
 // 数据初始化
 async function init() {
+  // 覆写添加确定方法
+  const oldAddSubmitFunc = addModalConfig.formAction;
+  addModalConfig.formAction = (data) => {
+    return oldAddSubmitFunc({
+      ...data,
+      shopPermissionIds: selPermissionList.value.reduce((pre: string[], cur: string) => {
+        return pre.concat(cur);
+      }, [] as string[]),
+    });
+  };
+  // 覆写编辑确定方法
+  const oldeditSubmitFunc = editModalConfig.formAction;
+  editModalConfig.formAction = (data) => {
+    return oldeditSubmitFunc({
+      ...data,
+      shopPermissionIds: selPermissionList.value.reduce((pre: string[], cur: string) => {
+        return pre.concat(cur);
+      }, [] as string[]),
+    });
+  };
+
   const res = await RoleApi.getList({ page: 1, size: 100 });
+  const permission = await permissionApi.getshopPermission();
+  permissionList.value = Array.isArray(permission) ? permission : [];
   const roleArr = res.records.map((item: SysRole) => {
     return {
       ...item,
@@ -106,12 +142,33 @@ init();
 
 // 新增
 async function handleAddClick() {
+  selPermissionList.value = [];
   addModalRef.value?.setModalVisible();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
+  selPermissionList.value = [];
   editModalRef.value?.handleDisabled(false);
   editModalRef.value?.setModalVisible();
+  // 设置权限选中
+  const perselArr = await permissionApi.getPermission(row.id);
+  for (let id of perselArr) {
+    for (let index in permissionList.value) {
+      const item = permissionList.value[index];
+      if (item.children) {
+        for (let child of item.children) {
+          if (child.id != null && child.id == id) {
+            if (selPermissionList.value[index]) {
+              selPermissionList.value[index].push(id);
+            } else {
+              selPermissionList.value[index] = [id];
+            }
+          }
+        }
+      }
+    }
+  }
+  console.log(selPermissionList.value);
   // 根据id获取数据进行填充
   await ShopStaffApi.get(row.id).then((res) => {
     console.log(res);