src/layout/components/Navbar.vue

@@ -9,15 +9,15 @@
         <!-- <search id="header-search" class="right-menu-item" /> -->
         <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
         <!-- <FuintDoc id="fuint-doc" class="right-menu-item hover-effect" /> -->
-        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click" >
           <div class="avatar-wrapper">
             <!-- <img :src="avatar" class="user-avatar"> -->
             <span class="user-name">{{ $i18n.messages[lang].lang }}</span>
             <i class="el-icon-caret-bottom" />
           </div>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item v-for="(item, index) in langList" :key="index">
-              <span @click="setLang(index)">{{ item.lang }}</span>
+          <el-dropdown-menu slot="dropdown" >
+            <el-dropdown-item v-for="(item, index) in langList" :key="index" >
+              <span style="display:block;height: 100%; height: 100%;" @click="setLang(index)">{{ item.lang }}</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
@@ -93,6 +93,7 @@ export default {
   },
   methods: {
     setLang(language) {
+      console.log(language)
       this.$i18n.locale = language;
       console.log(language)
     },
@@ -100,15 +101,19 @@ export default {
       this.$store.dispatch('app/toggleSideBar')
     },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          location.href = '/';
-        })
-      }).catch(() => { });
+        this.$confirm(
+            this.$t('nav.confirmLogoutMessage'),
+            this.$t('nav.prompt'),
+            {
+                confirmButtonText: this.$t('nav.confirm'),
+                cancelButtonText: this.$t('nav.cancel'),
+                type: 'warning'
+            }
+        ).then(() => {
+            this.$store.dispatch('LogOut').then(() => {
+                location.href = '/';
+            });
+        }).catch(() => {});
     }
   }
 }

src/locales/en.json

@@ -5,11 +5,74 @@
   "reset": "Reset",
   "phone": "Phone",
   "contact": "Contact",
+  "盼达点餐管理系统": "Panda Ordering Management System",
+  "nav":{
+    "setLayout": "Set Layout",
+    "logout": "Logout",
+    "confirmLogoutMessage": "Are you sure you want to log out of the system?",
+    "prompt": "Prompt",
+    "confirm": "Confirm",
+    "cancel": "Cancel"
+  },
+  "login":{
+      "welcomeMessage": "Welcome to use {systemName}, your small butler for membership marketing such as vouchers, stored-value cards, and punch cards!",
+      "usernamePlaceholder": "Username",
+      "passwordPlaceholder": "Password",
+      "captchaPlaceholder": "Please enter the verification code",
+      "rememberPassword": "Remember password",
+      "loginNow": "Log in now",
+      "loggingIn": "Logging in...",
+      "copyrightMessage": "Copyright © {startYear}-{endYear} <a class=\"link\" href=\"{url}\">{url}</a> All Rights Reserved.",
+      "usernameRequired": "Please enter your username",
+      "passwordRequired": "Please enter your password",
+      "captchaRequired": "Please enter the verification code"
 
-  "nav.setLayout": "Set Layout",
-  "nav.logout": "Logout",
-
-  "operational.overview": "Operational Overview",
+  },
+  "operational": {
+    "overview": "Operational Overview",
+    "totalTransactionAmount": "Total Transaction Amount (Yuan)",
+    "commonFunctions": "Common Functions",
+    "orderManagement": "Order Management",
+    "goodsManagement": "Goods Management",
+    "reportStatistics": "Report Statistics",
+    "lastSevenDaysOrderCount": "Order count in the last seven days",
+    "orderStatistics": "Order statistics",
+    "incomeComparisonAmount": "Income comparison amount",
+    "income": "Income",
+    "startTimePlaceholder": "Start Time",
+    "endTimePlaceholder": "End Time",
+    "reset": "Reset",
+    "query": "Query",
+    "lastThreeDays": "Last 3 Days",
+    "lastSevenDays": "Last 7 Days",
+    "lastFifteenDays": "Last 15 Days",
+    "lastThirtyDays": "Last 30 Days",
+    "dataOverview": "Data Overview",
+    "orderCount": "Order Count (pieces)",
+    "transactionAmount": "Transaction Amount (Yuan)",
+    "totalPayAmount": "Total Payment Amount (Yuan)",
+    "totalOrderCount": "Total Order Count (pieces)",
+    "totalPayUserCount": "Total Number of Paying Users",
+    "operationTrend": "Operation Trend",
+    "dataRanking": "Data Ranking",
+    "goodsSalesRanking": "Goods Sales Ranking",
+    "userConsumptionRanking": "User Consumption Ranking",
+    "id": "ID",
+    "goodsName": "Goods Name",
+    "salesVolume": "Sales Volume",
+    "salesAmount": "Sales Amount (Yuan)",
+    "userName": "User Name",
+    "memberNumber": "Member Number",
+    "consumptionAmount": "Consumption Amount (Yuan)",
+    "chart1Title": "Order count in the last seven days",
+    "chart1Header": "Order statistics",
+    "chart2Title": "Income comparison amount",
+    "chart2Header": "Income",
+    "lastSevenDaysOrderCount": "Order count in the last seven days",
+    "orderStatistics": "Order statistics",
+    "incomeTrendChart": "Income trend chart",
+    "memberStatistics": "Member statistics"
+  },
   "today.revenue": "Today's Revenue",
 
   "store.list.storeName": "Store Name",

src/locales/ru.json

@@ -5,7 +5,7 @@
     "nav.logout": "Logout",
     
     "welcome": "Welcome",
-    "greeting": "Hello, {name}!"
-    
+    "greeting": "Hello, {name}!",
+    "盼达点餐管理系统": "Система управления заказами Panda"
     
   }

src/locales/sr.json

@@ -1,3 +1,3 @@
 {
-  
+  "盼达点餐管理系统": "Система управљања нараштанима Panda"
 }

src/locales/zh.json

@@ -1,10 +1,73 @@
 {
   "lang": "中文",
   "curency": "人民币",
-
-  "nav.setLayout": "布局设置",
-  "nav.logout": "退出登录",
-
+  "盼达点餐管理系统": "盼达点餐管理系统",
+  "nav":{
+    "setLayout": "布局设置",
+    "logout": "退出登录",
+    "confirmLogoutMessage": "确定注销并退出系统吗？",
+    "prompt": "提示",
+    "confirm": "确定",
+    "cancel": "取消"
+  },
+  "login": {
+      "welcomeMessage": "欢迎使用 {systemName}，您的卡券、储值卡、计次卡等会员营销小管家！",
+      "usernamePlaceholder": "账号",
+      "passwordPlaceholder": "密码",
+      "captchaPlaceholder": "请输入验证码",
+      "rememberPassword": "记住密码",
+      "loginNow": "立即登录",
+      "loggingIn": "登 录 中...",
+      "copyrightMessage": "Copyright © {startYear}-{endYear} <a class=\"link\" href=\"{url}\">{url}</a> All Rights Reserved.",
+      "usernameRequired": "请输入您的账号",
+      "passwordRequired": "请输入您的密码",
+      "captchaRequired": "请输入验证码"
+  },
+  "operational": {
+    "overview": "运营概况",
+    "totalTransactionAmount": "总交易金额（元）",
+    "commonFunctions": "常用功能",
+    "orderManagement": "订单管理",
+    "goodsManagement": "商品管理",
+    "reportStatistics": "报表统计",
+    "lastSevenDaysOrderCount": "近七日订单数量",
+    "orderStatistics": "订单统计",
+    "incomeComparisonAmount": "收益对比金额",
+    "income": "收益",
+    "startTimePlaceholder": "开始时间",
+    "endTimePlaceholder": "结束时间",
+    "reset": "重置",
+    "query": "查询",
+    "lastThreeDays": "近3天",
+    "lastSevenDays": "近7天",
+    "lastFifteenDays": "近15天",
+    "lastThirtyDays": "近30天",
+    "dataOverview": "数据概况",
+    "orderCount": "订单数（笔）",
+    "transactionAmount": "交易金额（元）",
+    "totalPayAmount": "总支付金额（元）",
+    "totalOrderCount": "总订单数（笔）",
+    "totalPayUserCount": "总支付人数",
+    "operationTrend": "运营走势",
+    "dataRanking": "数据排行",
+    "goodsSalesRanking": "商品销售排行",
+    "userConsumptionRanking": "用户消费排行",
+    "id": "ID",
+    "goodsName": "商品名称",
+    "salesVolume": "销售量",
+    "salesAmount": "销售金额（元）",
+    "userName": "用户名",
+    "memberNumber": "会员号",
+    "consumptionAmount": "消费金额（元）",
+    "chart1Title": "近七日订单数量",
+    "chart1Header": "订单统计",
+    "chart2Title": "收益对比金额",
+    "chart2Header": "收益",
+    "lastSevenDaysOrderCount": "近七日订单数量",
+    "orderStatistics": "订单统计",
+    "incomeTrendChart": "收益趋势图",
+    "memberStatistics": "会员统计"
+  },
   "operational.overview": "运营概况",
   "today.revenue": "今日营收",
 

src/views/index.vue

@@ -87,7 +87,7 @@
                   fill="#8a8a8a"
                 ></path>
               </svg>
-              <p class="text">总交易金额（元）</p>
+              <p class="text">{{ $t('operational.totalTransactionAmount') }}</p>
               <p class="number">
                 {{ homeData.totalPay ? homeData.totalPay : "0.00" }}
               </p>
@@ -268,11 +268,10 @@
       </div>
     </div>
     <div class="overview">
-      
-      <div class="title">常用功能</div>
-      <div class="content">
-        <el-row class="line home-tools">
-          <!-- <el-col class="item no-border" :span="8"
+        <div class="title">{{ $t('operational.commonFunctions') }}</div>
+        <div class="content">
+            <el-row class="line home-tools">
+                        <!-- <el-col class="item no-border" :span="8"
             ><div class="do" @click="toCashier('/fuintCashier/')">
               <img class="t-icon" src="@/assets/images/home/pay.png" />
               <div class="text">收银下单</div>
@@ -290,61 +289,53 @@
               <div class="text">会员管理</div>
             </div></el-col
           > -->
-        </el-row>
-        <el-row class="line home-tools">
-          <el-col class="item no-border" :span="8"
-            ><div class="do" @click="toTarget('/order/index')">
-              <img class="t-icon" src="@/assets/images/home/order.png" />
-              <div class="text">订单管理</div>
-            </div></el-col
-          >
-          <!-- <el-col class="item no-border" :span="8"
-            ><div class="do" @click="toTarget('/coupon/coupon/index')">
-              <img class="t-icon" src="@/assets/images/home/card.png" />
-              <div class="text">卡券管理</div>
-            </div></el-col
-          > -->
-          <el-col class="item no-border" :span="8"
-            ><div class="do" @click="toTarget('/goods/goods/index')">
-              <img class="t-icon" src="@/assets/images/home/goods.png" />
-              <div class="text">商品管理</div>
-            </div></el-col
-          >
-        </el-row>
-      </div>
+                <el-col class="item no-border" :span="8">
+                    <div class="do" @click="toTarget('/order/index')">
+                        <img class="t-icon" src="@/assets/images/home/order.png" />
+                        <div class="text">{{ $t('operational.orderManagement') }}</div>
+                    </div>
+                </el-col>
+                <el-col class="item no-border" :span="8">
+                    <div class="do" @click="toTarget('/goods/goods/index')">
+                        <img class="t-icon" src="@/assets/images/home/goods.png" />
+                        <div class="text">{{ $t('operational.goodsManagement') }}</div>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
     </div>
     <div class="overview">
-      <div class="title">报表统计</div>
-      <div class="content">
-        <el-row>
-          <el-col class="item" :span="12">
-            <commonChart
-              v-if="chartData1.length > 0"
-              :title="chart1.title"
-              :color="chart1.color"
-              :chart-type="chart1.chartType"
-              :head-list="chart1.header"
-              :data-list="chartData1"
-              width="100%"
-              id="chart1"
-              height="400px"
-            />
-          </el-col>
-          <el-col class="item" :span="12">
-            <commonChart
-              v-if="chartData2.length > 0"
-              :title="chart2.title"
-              :color="chart2.color"
-              :chart-type="chart2.chartType"
-              :head-list="chart2.header"
-              :data-list="chartData2"
-              width="100%"
-              id="chart2"
-              height="400px"
-            />
-          </el-col>
-        </el-row>
-      </div>
+        <div class="title">{{ $t('operational.reportStatistics') }}</div>
+        <div class="content">
+            <el-row>
+                <el-col class="item" :span="12">
+                    <commonChart
+                        v-if="chartData1.length > 0"
+                        :title="chart1.title"
+                        :color="chart1.color"
+                        :chart-type="chart1.chartType"
+                        :head-list="chart1.header"
+                        :data-list="chartData1"
+                        width="100%"
+                        id="chart1"
+                        height="400px"
+                    />
+                </el-col>
+                <el-col class="item" :span="12">
+                    <commonChart
+                        v-if="chartData2.length > 0"
+                        :title="chart2.title"
+                        :color="chart2.color"
+                        :chart-type="chart2.chartType"
+                        :head-list="chart2.header"
+                        :data-list="chartData2"
+                        width="100%"
+                        id="chart2"
+                        height="400px"
+                    />
+                </el-col>
+            </el-row>
+        </div>
     </div>
   </div>
 </template>
@@ -371,16 +362,16 @@ export default {
         totalPayUser: 0,
       },
       chart1: {
-        title: "近七日订单数量",
-        color: "#ff5b57",
-        chartType: "bar",
-        header: ["订单统计"],
+          title: this.$t('operational.lastSevenDaysOrderCount'),
+          color: "#ff5b57",
+          chartType: "bar",
+          header: [this.$t('operational.orderStatistics')],
       },
       chart2: {
-        title: "收益对比金额",
-        color: "#113a28",
-        chartType: "line",
-        header: ["收益"],
+          title: this.$t('operational.incomeComparisonAmount'),
+          color: "#113a28",
+          chartType: "line",
+          header: [this.$t('operational.income')],
       },
       chartData1: [],
       chartData2: [],

src/views/login.vue

@@ -4,7 +4,7 @@
       <div class="caption">
         <h4 class="caption-title">{{ systemName }}</h4>
         <p class="caption-remark">
-          欢迎使用 {{ systemName }}，您的卡券、储值卡、计次卡等会员营销小管家！
+          {{ $t('login.welcomeMessage', { systemName: systemName }) }}
         </p>
       </div>
     </div>
@@ -20,7 +20,7 @@
             type="text"
             auto-complete="off"
             clearable
-            placeholder="账号"
+            :placeholder="$t('login.usernamePlaceholder')"
           >
             <svg-icon
               slot="prefix"
@@ -34,7 +34,7 @@
             v-model="loginForm.password"
             type="password"
             auto-complete="off"
-            placeholder="密码"
+            :placeholder="$t('login.passwordPlaceholder')"
             clearable
             @keyup.enter.native="handleLogin"
           >
@@ -49,7 +49,7 @@
           <el-input
             v-model="loginForm.captchaCode"
             auto-complete="off"
-            placeholder="请输入验证码"
+            :placeholder="$t('login.captchaPlaceholder')"
             style="width: 63%"
             clearable
             @keyup.enter.native="handleLogin"
@@ -67,8 +67,9 @@
         <el-checkbox
           v-model="loginForm.rememberMe"
           style="margin: 0px 0px 25px 0px"
-          >记住密码</el-checkbox
         >
+          {{ $t('login.rememberPassword') }}
+        </el-checkbox>
         <el-form-item style="width: 100%">
           <el-button
             :loading="loading"
@@ -77,17 +78,15 @@
             style="width: 100%; line-height: 24px; font-size: 16px"
             @click.native.prevent="handleLogin"
           >
-            <span v-if="!loading">立即登录</span>
-            <span v-else>登 录 中...</span>
+            <span v-if="!loading">{{ $t('login.loginNow') }}</span>
+            <span v-else>{{ $t('login.loggingIn') }}</span>
           </el-button>
         </el-form-item>
       </el-form>
       <div class="copy-right">
-        <span
-          >Copyright © 2022-2024
-          <a class="link" href="https://www.fuint.cn">fuint.cn</a> All Rights
-          Reserved.</span
-        >
+        <span>
+          {{ $t('login.copyrightMessage', { startYear: 2022, endYear: 2024, url: 'https://www.fuint.cn' }) }}
+        </span>
       </div>
     </div>
   </div>
@@ -103,7 +102,7 @@ export default {
   data() {
     return {
       codeUrl: "",
-      systemName: process.env.VUE_APP_TITLE,
+      systemName: this.$t(process.env.VUE_APP_TITLE),
       loginForm: {
         username: "admin",
         password: "123456",
@@ -113,14 +112,14 @@ export default {
       },
       loginRules: {
         username: [
-          { required: true, trigger: "blur", message: "请输入您的账号" },
+          { required: true, trigger: "blur", message: this.$t('login.usernameRequired') },
         ],
         password: [
-          { required: true, trigger: "blur", message: "请输入您的密码" },
+          { required: true, trigger: "blur", message: this.$t('login.passwordRequired') },
         ],
         captchaCode: [
-          { required: true, trigger: "change", message: "请输入验证码" },
-          { min: 4, max: 6, message: "请输入验证码", trigger: "blur" },
+          { required: true, trigger: "change", message: this.$t('login.captchaRequired') },
+          { min: 4, max: 6, message: this.$t('login.captchaRequired'), trigger: "blur" },
         ],
       },
       loading: false,

src/views/statistic/index.vue

@@ -1,43 +1,44 @@
 <template>
   <div class="app-container">
     <div class="overview">
-      <div class="title">数据概况</div>
+      <div class="title">{{ $t('operational.dataOverview') }}</div>
       <div class="content" v-loading="loading">
         <el-row class="line">
-          <div class="date-picker">
+        <div class="date-picker">
             <el-date-picker
-              v-model="startTime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetime"
-              style="width: 200px"
-              placeholder="开始时间"
+                v-model="startTime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                type="datetime"
+                style="width: 200px"
+                :placeholder="$t('operational.startTimePlaceholder')"
             ></el-date-picker>
             <span class="sp"> ~ </span>
             <el-date-picker
-              v-model="endTime"
-              value-format="yyyy-MM-dd HH:mm:ss"
-              type="datetime"
-              style="width: 200px"
-              placeholder="结束时间"
+                v-model="endTime"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                type="datetime"
+                style="width: 200px"
+                :placeholder="$t('operational.endTimePlaceholder')"
             ></el-date-picker>
-          </div>
-          <div class="do-search">
-            <el-button icon="el-icon-refresh" size="small" @click="reset"
-              >重置</el-button
-            >
+        </div>
+        <div class="do-search">
+            <el-button icon="el-icon-refresh" size="small" @click="reset">
+                {{ $t('operational.reset') }}
+            </el-button>
             <el-button
-              type="primary"
-              icon="el-icon-search"
-              size="small"
-              @click="getMainData"
-              >查询</el-button
+                type="primary"
+                icon="el-icon-search"
+                size="small"
+                @click="getMainData"
             >
-            <span class="ex" @click="setDay(3)">近3天</span>
-            <span class="ex" @click="setDay(7)">近7天</span>
-            <span class="ex" @click="setDay(15)">近15天</span>
-            <span class="ex" @click="setDay(30)">近30天</span>
-          </div>
-        </el-row>
+                {{ $t('operational.query') }}
+            </el-button>
+            <span class="ex" @click="setDay(3)">{{ $t('operational.lastThreeDays') }}</span>
+            <span class="ex" @click="setDay(7)">{{ $t('operational.lastSevenDays') }}</span>
+            <span class="ex" @click="setDay(15)">{{ $t('operational.lastFifteenDays') }}</span>
+            <span class="ex" @click="setDay(30)">{{ $t('operational.lastThirtyDays') }}</span>
+        </div>
+    </el-row>
         <el-row class="line">
           <el-col class="item" :span="6">
             <div class="do">
@@ -62,7 +63,7 @@
                   p-id="7599"
                 ></path>
               </svg>
-              <p class="text">订单数（笔）</p>
+              <p class="text">{{ $t('operational.orderCount') }}</p>
               <p class="number">{{ mainData.orderCount }}</p>
             </div>
           </el-col>
@@ -89,7 +90,7 @@
                   p-id="10176"
                 ></path>
               </svg>
-              <p class="text">交易金额（元）</p>
+              <p class="text">{{ $t('operational.transactionAmount') }}</p>
               <p class="number">
                 {{
                   mainData.payAmount
@@ -122,7 +123,7 @@
                   fill="#8a8a8a"
                 ></path>
               </svg>
-              <p class="text">总支付金额（元）</p>
+              <p class="text">{{ $t('operational.totalPayAmount') }}</p>
               <p class="number">
                 {{ mainData.totalPayAmount ? mainData.totalPayAmount : "0.00" }}
               </p>
@@ -146,7 +147,7 @@
                   p-id="4781"
                 ></path>
               </svg>
-              <p class="text">总订单数（笔）</p>
+              <p class="text">{{ $t('operational.totalOrderCount') }}</p>
               <p class="number">{{ mainData.totalOrderCount }}</p>
             </div>
           </el-col>
@@ -185,7 +186,7 @@
                   fill="#8a8a8a"
                 ></path>
               </svg>
-              <p class="text">总支付人数</p>
+              <p class="text">{{ $t('operational.totalPayUserCount') }}</p>
               <p class="number">{{ mainData.totalPayUserCount }}</p>
             </div>
           </el-col>
@@ -193,7 +194,7 @@
       </div>
     </div>
     <div class="overview">
-      <div class="title">运营走势</div>
+      <div class="title">{{ $t('operational.operationTrend') }}</div>
       <div class="content">
         <el-row>
           <el-col class="item" :span="12">
@@ -226,61 +227,61 @@
       </div>
     </div>
     <div class="overview">
-      <div class="title">数据排行</div>
-      <div class="content">
-        <el-row>
-          <el-col class="item" :span="12">
-            <div class="title">商品销售排行</div>
-            <el-table
-              v-loading="loading"
-              :data="goodsList"
-              style="border: solid 1px #cccccc"
-            >
-              <el-table-column label="ID" prop="id" width="60" />
-              <el-table-column label="商品名称" align="center">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.name }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="销售量" align="center" prop="num" />
-              <el-table-column
-                label="销售金额（元）"
-                align="center"
-                prop="amount"
-              >
-                <template slot-scope="scope">
-                  <span>{{ scope.row.amount.toFixed(2) }}</span>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-col>
-          <el-col class="item" :span="12">
-            <div class="title">用户消费排行</div>
-            <el-table
-              v-loading="loading"
-              :data="memberList"
-              style="border: solid 1px #cccccc"
-            >
-              <el-table-column label="ID" prop="id" width="60" />
-              <el-table-column label="用户名" align="center" width="100">
-                <template slot-scope="scope">
-                  <span>{{ scope.row.name }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="会员号" align="center" prop="userNo" />
-              <el-table-column
-                label="消费金额（元）"
-                align="center"
-                prop="amount"
-              >
-                <template slot-scope="scope">
-                  <span>{{ scope.row.amount.toFixed(2) }}</span>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-col>
-        </el-row>
-      </div>
+        <div class="title">{{ $t('operational.dataRanking') }}</div>
+        <div class="content">
+            <el-row>
+                <el-col class="item" :span="12">
+                    <div class="title">{{ $t('operational.goodsSalesRanking') }}</div>
+                    <el-table
+                        v-loading="loading"
+                        :data="goodsList"
+                        style="border: solid 1px #cccccc"
+                    >
+                        <el-table-column :label="$t('operational.id')" prop="id" width="60" />
+                        <el-table-column :label="$t('operational.goodsName')" align="center">
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.name }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('operational.salesVolume')" align="center" prop="num" />
+                        <el-table-column
+                            :label="$t('operational.salesAmount')"
+                            align="center"
+                            prop="amount"
+                        >
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.amount.toFixed(2) }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-col>
+                <el-col class="item" :span="12">
+                    <div class="title">{{ $t('operational.userConsumptionRanking') }}</div>
+                    <el-table
+                        v-loading="loading"
+                        :data="memberList"
+                        style="border: solid 1px #cccccc"
+                    >
+                        <el-table-column :label="$t('operational.id')" prop="id" width="60" />
+                        <el-table-column :label="$t('operational.userName')" align="center" width="100">
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.name }}</span>
+                            </template>
+                        </el-table-column>
+                        <el-table-column :label="$t('operational.memberNumber')" align="center" prop="userNo" />
+                        <el-table-column
+                            :label="$t('operational.consumptionAmount')"
+                            align="center"
+                            prop="amount"
+                        >
+                            <template slot-scope="scope">
+                                <span>{{ scope.row.amount.toFixed(2) }}</span>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </el-col>
+            </el-row>
+        </div>
     </div>
   </div>
 </template>
@@ -311,16 +312,16 @@ export default {
         totalPayUserCount: 0,
       },
       chart1: {
-        title: "近七日订单数量",
-        color: "#ff5b57",
-        chartType: "bar",
-        header: ["订单统计"],
+          title: this.$t('operational.lastSevenDaysOrderCount'),
+          color: "#ff5b57",
+          chartType: "bar",
+          header: [this.$t('operational.orderStatistics')]
       },
       chart2: {
-        title: "收益趋势图",
-        color: "#113a28",
-        chartType: "line",
-        header: ["会员统计"],
+          title: this.$t('operational.incomeTrendChart'),
+          color: "#113a28",
+          chartType: "line",
+          header: [this.$t('operational.memberStatistics')]
       },
       chartData1: [],
       chartData2: [],