充值审核bug

vue/gold-system/src/assets/css/common.css

@@ -24,3 +24,26 @@
     display: block;
     background-color: grey;
 }
+.yellow-dot {
+    margin: 7px 5px 0px 0px;
+    width: 10px;
+    height: 10px;
+    display: block;
+    background-color: #ffe733;
+}
+
+.light-green-dot {
+    margin: 7px 5px 0px 0px;
+    width: 10px;
+    height: 10px;
+    display: block;
+    background-color: #35e383;
+}
+
+.blue-dot {
+    margin: 7px 5px 0px 0px;
+    width: 10px;
+    height: 10px;
+    display: block;
+    background-color: #5f8ff5;
+}

vue/gold-system/src/views/audit/rechargeAudit.vue

@@ -113,7 +113,7 @@ const reset = function () {
     rechargeVo.value.area = '';
     rechargeVo.value.startDate = '';
     rechargeVo.value.endDate = '';
-    get();
+    getTime.value = {};
 }
 // 今天
 const getToday = function () {
@@ -398,7 +398,7 @@ onMounted(async function () {
                 <div>
                     <el-table :data="tableData" :height="tableHeight" style="width: 100%">
                         <el-table-column prop="username" label="姓名" width="100px" />
-                        <el-table-column prop="homilyId" label="精网号" width="150px" />
+                        <el-table-column prop="jwcode" label="精网号" width="150px" />
                         <el-table-column prop="area" label="所属地区" width="100px" />
                         <el-table-column prop="activityName" label="活动名称" width="150px" />
                         <el-table-column prop="rechargeGold" label="充值金额" width="100px" />

vue/gold-system/src/views/audit/refundAudit.vue

@@ -9,8 +9,8 @@ import moment from 'moment';
 // 充值明细表格
 const tableData = ref([]);
 // 搜索======================================
-// 搜索rechargeVo
-const rechargeVo = ref({});
+// 搜索consumeDetail
+const consumeDetail = ref({});
 // 搜索对象
 const getObj = ref({
     pageNum: 1,
@@ -38,27 +38,15 @@ const passObj = ref({});
 //标签页默认高亮选项
 const activeName = ref('all')
 
-// 支付方式选项
-const payWay = [
+// 退款类型选项
+const refundType = [
     {
-        value: '微信',
-        label: '微信',
+        value: '退金币',
+        label: '退金币',
     },
     {
-        value: '支付宝',
-        label: '支付宝',
-    },
-    {
-        value: '银联',
-        label: '银联',
-    },
-    {
-        value: '信用卡',
-        label: '信用卡',
-    },
-    {
-        value: '借记卡',
-        label: '借记卡',
+        value: '退商品',
+        label: '退商品',
     },
 ]
 
@@ -82,16 +70,16 @@ const get = async function (val) {
         // 搜索参数时间赋值
         if (getTime.value != null) {
             if (getTime.value.startDate != '' && getTime.value.endDate != '') {
-                rechargeVo.value.startDate = getTime.value[0];
-                rechargeVo.value.endDate = getTime.value[1];
+                consumeDetail.value.startDate = getTime.value[0];
+                consumeDetail.value.endDate = getTime.value[1];
             }
         } else {
-            rechargeVo.value.startDate = '';
-            rechargeVo.value.endDate = '';
+            consumeDetail.value.startDate = '';
+            consumeDetail.value.endDate = '';
         }
         console.log('搜索参数', getObj.value);
         // 发送POST请求
-        const result = await axios.post('http://192.168.8.93:10030/audit/audit/refund', { ...getObj.value, rechargeVo: { ...rechargeVo.value } });
+        const result = await axios.post('http://192.168.8.93:10030/audit/audit/refund', { ...getObj.value, consumeDetail: { ...consumeDetail.value } });
 
         // 将响应结果存储到响应式数据中
         console.log('请求成功', result);
@@ -108,12 +96,10 @@ const get = async function (val) {
 }
 // 重置
 const reset = function () {
-    rechargeVo.value.activityId = '';
-    rechargeVo.value.payWay = '';
-    rechargeVo.value.area = '';
-    rechargeVo.value.startDate = '';
-    rechargeVo.value.endDate = '';
-    get();
+    consumeDetail.value.area = '';
+    consumeDetail.value.startDate = '';
+    consumeDetail.value.endDate = '';
+    getTime.value = {};
 }
 // 今天
 const getToday = function () {
@@ -146,18 +132,18 @@ const get7Days = function () {
 //全部充值明细
 const adminAll = function () {
     console.log('adminAll');
-    rechargeVo.value.status = '';
+    consumeDetail.value.status = '';
     get();
 }
 //待审核充值明细
 const adminWait = function () {
-    rechargeVo.value.status = 0;
+    consumeDetail.value.status = 0;
     get();
     console.log('adminWait');
 }
 //已通过充值明细
 const adminPass = function () {
-    rechargeVo.value.status = 1;
+    consumeDetail.value.status = 1;
     get();
     console.log('adminPass');
 }
@@ -337,18 +323,18 @@ onMounted(async function () {
                 <el-row style="margin-bottom: 10px;">
                     <el-col :span="8">
                         <div class="head-card-element">
-                            <el-text class="mx-1" size="large">活动名称：</el-text>
-                            <el-select v-model="rechargeVo.activityId" placeholder="请选择活动名称" size="large"
+                            <el-text class="mx-1" size="large">退款类型：</el-text>
+                            <el-select v-model="consumeDetail.refundType" placeholder="请选择退款类型" size="large"
                                 style="width: 240px">
-                                <el-option v-for="item in activity" :key="item.activityId" :label="item.activityName"
-                                    :value="item.activityId" />
+                                <el-option v-for="item in refundType" :key="item.value" :label="item.label"
+                                    :value="item.value" />
                             </el-select>
                         </div>
                     </el-col>
                     <el-col :span="8">
                         <div class="head-card-element">
-                            <el-text class="mx-1" size="large">支付方式：</el-text>
-                            <el-select v-model="rechargeVo.payWay" placeholder="请选择支付方式" size="large"
+                            <el-text class="mx-1" size="large">退款商品：</el-text>
+                            <el-select v-model="consumeDetail.refundGoods" placeholder="请选择退款商品" size="large"
                                 style="width: 240px">
                                 <el-option v-for="item in payWay" :key="item.value" :label="item.label"
                                     :value="item.value" />
@@ -359,7 +345,7 @@ onMounted(async function () {
                     <el-col :span="8">
                         <div class="head-card-element">
                             <el-text class="mx-1" size="large">所属地区：</el-text>
-                            <el-select v-model="rechargeVo.area" placeholder="请选择所属地区" size="large"
+                            <el-select v-model="consumeDetail.area" placeholder="请选择所属地区" size="large"
                                 style="width: 240px">
                                 <el-option v-for="item in area" :key="item" :label="item" :value="item" />
                             </el-select>
@@ -397,11 +383,11 @@ onMounted(async function () {
                 </el-tabs>
                 <div>
                     <el-table :data="tableData" :height="tableHeight" style="width: 100%">
-                        <el-table-column prop="name" label="姓名" width="100px" />
-                        <el-table-column prop="homilyId" label="精网号" width="150px" />
+                        <el-table-column prop="user" label="姓名" width="100px" />
+                        <el-table-column prop="jwcode" label="精网号" width="150px" />
                         <el-table-column prop="area" label="所属地区" width="100px" />
                         <el-table-column prop="refundType" label="退款类型" width="150px" />
-                        <el-table-column prop="goods" label="退款商品" width="100px" />
+                        <el-table-column prop="refundGoods" label="退款商品" width="100px" />
                         <el-table-column prop="refundCoin" label="退款金币数" width="100px">
                             <template #default="scope">
                                 <span>{{ scope.row.rechargeCoin + scope.row.freeCoin + scope.row.taskCoin }}</span>
@@ -411,7 +397,7 @@ onMounted(async function () {
                         <el-table-column prop="freeCoin" label="免费金币" width="100px" />
                         <el-table-column prop="taskCoin" label="任务金币" width="100px" />
                         <el-table-column prop="remark" label="备注" width="200px" show-overflow-tooltip />
-                        <el-table-column prop="adminName" label="提交人" width="100px" />
+                        <el-table-column prop="name" label="提交人" width="100px" />
                         <el-table-column prop="status" label="审核状态" width="100px">
                             <template #default="scope">
                                 <span v-if="scope.row.status === 1">
@@ -435,13 +421,18 @@ onMounted(async function () {
                             </template>
                         </el-table-column>
                         <el-table-column prop="reson" label="驳回理由" width="200px" show-overflow-tooltip />
-                        <el-table-column prop="createTime" label="提交时间" width="200px" />
+                        <el-table-column prop="createTime" label="提交时间" width="200px">
+                            <template #default="scope">
+                                {{ moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
+                            </template>
+                        </el-table-column>
                         <el-table-column fixed="right" prop="operation" label="操作" width="150px">
                             <template #default="scope">
                                 <div class="operation">
                                     <el-popconfirm title="确定要通过此条记录吗？" @confirm="passConfirm">
                                         <template #reference>
-                                            <el-button :disabled='((scope.row.status === 1 )||(scope.row.status === 2)) ? true : false'
+                                            <el-button
+                                                :disabled='((scope.row.status === 1) || (scope.row.status === 2)) ? true : false'
                                                 type="primary" text @click="pass(scope.row)">
                                                 通过
                                             </el-button>
@@ -453,8 +444,9 @@ onMounted(async function () {
                                             </el-button>
                                         </template>
                                     </el-popconfirm>
-                                    <el-button :disabled='((scope.row.status === 1 )||(scope.row.status === 2)) ? true : false' type="primary" text
-                                        @click="reject(scope.row)">
+                                    <el-button
+                                        :disabled='((scope.row.status === 1) || (scope.row.status === 2)) ? true : false'
+                                        type="primary" text @click="reject(scope.row)">
                                         驳回
                                     </el-button>
                                 </div>

vue/gold-system/src/views/managerecharge/activity.vue

@@ -8,8 +8,8 @@ import moment from 'moment';
 // 用户对象假的
 const admin = ref({
     adminId: 1,
-    name: '客服A',
-    area: '新加坡'
+    name: '赵刚',
+    area: '中国'
 })
 //活动表格数据
 const tableData = ref([]);
@@ -83,7 +83,6 @@ const reset = function () {
     getObj.value.pageSize = 5;
     getTime.value = {};
     activity.value = {};
-    get();
 }
 //新增活动弹出框
 const addActivityVisible = ref(false)

vue/gold-system/src/views/recharge/adminRecharge.vue

@@ -9,8 +9,8 @@ import moment from 'moment';
 // 用户对象假的
 const admin = ref({
     adminId: 1,
-    name: '客服A',
-    area: '新加坡'
+    name: '赵刚',
+    area: '中国'
 })
 
 // 充值明细表格
@@ -113,7 +113,7 @@ const reset = function () {
     rechargeVo.value.area = '';
     rechargeVo.value.startDate = '';
     rechargeVo.value.endDate = '';
-    get();
+    getTime.value = {};
 }
 // 今天
 const getToday = function () {
@@ -337,7 +337,7 @@ onMounted(async function () {
                 <div>
                     <el-table :data="tableData" :height="tableHeight" style="width: 100%">
                         <el-table-column prop="username" label="姓名" width="100px" />
-                        <el-table-column prop="homilyId" label="精网号" width="150px" />
+                        <el-table-column prop="jwcode" label="精网号" width="150px" />
                         <el-table-column prop="area" label="所属地区" width="100px" />
                         <el-table-column prop="activityName" label="活动名称" width="150px" />
                         <el-table-column prop="rechargeGold" label="充值金额" width="100px" />

vue/gold-system/src/views/recharge/allRecharge.vue

@@ -103,7 +103,7 @@ const reset = function () {
     rechargeVo.value.area = '';
     rechargeVo.value.startDate = '';
     rechargeVo.value.endDate = '';
-    get();
+    getTime.value={};
 }
 // 今天
 const getToday = function () {
@@ -306,7 +306,7 @@ onMounted(async function () {
                 <div>
                     <el-table :data="tableData" :height="tableHeight" style="width: 100%">
                         <el-table-column prop="username" label="姓名" width="100px" />
-                        <el-table-column prop="homilyId" label="精网号" width="150px" />
+                        <el-table-column prop="jwcode" label="精网号" width="150px" />
                         <el-table-column prop="area" label="所属地区" width="100px" />
                         <el-table-column prop="activityName" label="活动名称" width="150px" />
                         <el-table-column prop="rechargeGold" label="充值金额" width="100px" />

vue/gold-system/src/views/usergold/index.vue

@@ -1,128 +1,123 @@
 <script setup>
 import { ref, onMounted, reactive, computed } from "vue";
 import ElementPlus from "element-plus";
+import axios from 'axios';
 
-const tableData = [
-    {
-        activityName: '这是活动名称',
-        startTime: '2023-12-22 00:00:00',
-        endTime: '2024-12-22 23:59:59',
-        rechargeRatio: '10:1',
-        status: '进行中',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称2',
-        startTime: '2023-12-22 00:00:00',
-        endTime: '2024-12-22 23:59:59',
-        rechargeRatio: '5:1',
-        status: '进行中',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称3',
-        startTime: '2024-12-22 00:00:00',
-        endTime: '2025-12-22 23:59:59',
-        rechargeRatio: '10:1',
-        status: '未开始',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称4',
-        startTime: '2024-12-22 00:00:00',
-        endTime: '2025-12-22 23:59:59',
-        rechargeRatio: '5:1',
-        status: '未开始',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称5',
-        startTime: '2023-01-01 00:00:00',
-        endTime: '2023-12-22 23:59:59',
-        rechargeRatio: '10:1',
-        status: '已结束',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-    {
-        activityName: '这是活动名称6',
-        startTime: '2023-01-01 00:00:00',
-        endTime: '2023-12-22 23:59:59',
-        rechargeRatio: '5:1',
-        status: '已结束',
-        adminName: '张三',
-        createTime: '2023-01-01 00:00:00',
-    },
-
-]
-
-//下拉框
-const value = ref('')
-const options = [
-    {
-        value: 'Option1',
-        label: 'Option1',
-    },
-    {
-        value: 'Option2',
-        label: 'Option2',
-    },
+// 充值明细表格
+const tableData = ref([]);
+// 搜索===========================================
+// 搜索detail
+const detail = ref({});
+// 搜索对象
+const getObj = ref({
+    pageNum: 1,
+    pageSize: 5,
+});
+//分页总条目
+const total = ref(100);
+// 搜索对象时间
+const getTime = ref([]);
+// 支付方式选项
+const updateType = [
     {
-        value: 'Option3',
-        label: 'Option3',
+        value: '充值',
+        label: '充值',
     },
     {
-        value: 'Option4',
-        label: 'Option4',
+        value: '消费',
+        label: '消费',
     },
     {
-        value: 'Option5',
-        label: 'Option5',
+        value: '退款',
+        label: '退款',
     },
 ]
 
+//表格高度
+const tableHeight = computed(function () {
+    return (getObj.value.pageSize + 2) * 60 + 'px';
+});
 
-//搜索对象
-const getObj = ref({
-    page: 1,
-    size: 10,
-})
-//分页总条目
-const total = ref(100)
 
-//新增活动弹出框
-const addActivityVisible = ref(false)
-//打开新增活动弹出框
-const openAddActivityVisible = function () {
-    addActivityVisible.value = true
+// 方法
+// 搜索===========================================================================
+// 搜索方法
+const get = async function (val) {
+    try {
+        // 搜索参数页码赋值 
+        if (typeof val === 'number') {
+            getObj.value.pageNum = val;
+        }
+        // 搜索参数时间赋值
+        if (getTime.value != null) {
+            if (getTime.value.startDate != '' && getTime.value.endDate != '') {
+                detail.value.startDate = getTime.value[0];
+                detail.value.endDate = getTime.value[1];
             }
-//关闭新增窗口弹出框
-const closeAddActivityVisible = function () {
-    addActivityVisible.value = false
+        } else {
+            detail.value.startDate = '';
+            detail.value.endDate = '';
+        }
+        console.log('搜索参数', getObj.value);
+        // 发送POST请求
+        const result = await axios.post('http://192.168.8.93:10040/detail', { ...getObj.value, detail: { ...detail.value } });
+
+        // 将响应结果存储到响应式数据中
+        console.log('请求成功', result);
+        // 存储表格数据
+        tableData.value = result.data.data.list;
+        console.log('tableData', tableData.value);
+        // 存储分页总数
+        total.value = result.data.data.total;
+        console.log('total', total.value);
+    } catch (error) {
+        console.log('请求失败', error);
+        // 在这里可以处理错误逻辑，比如显示错误提示等
     }
-//添加活动按钮
-const addActicity = function () {
-    openAddActivityVisible();
 }
 
-// 添加对象
-const addObj = reactive({
-    activityName: '',
-    freeGold: '',
-    rechargeRatio: '',
-    startTime: '',
-    endTime: '',
-    adminName: '',
-})
+// 重置
+const reset = function () {
+    detail.value.jwcode = '';
+    detail.value.updateType = '';
+    detail.value.startDate = '';
+    detail.value.endDate = '';
+    getTime.value = {};
+}
+// 今天
+const getToday = function () {
+    const today = new Date();
+    const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+    getTime.value = [startDate, endDate];
+    console.log('getTime', getTime.value);
+    get();
+}
+// 昨天
+const getYesterday = function () {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const startDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
+    const endDate = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate() + 1);
+    getTime.value = [startDate, endDate];
+    console.log('getTime', getTime.value);
+    get();
+}
+// 近7天
+const get7Days = function () {
+    const today = new Date();
+    const startDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 6);
+    const endDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+    getTime.value = [startDate, endDate];
+    console.log('getTime', getTime.value);
+    get();
+}
 
 
-const Delete = function (index, row) {
-    console.log(index, row)
-}
+// 挂载
+onMounted(async function () {
+    await get();
+})
 
 </script>
 
@@ -133,23 +128,23 @@ const Delete = function (index, row) {
                 <div class="head-card">
                     <div class="head-card-element">
                         <el-text class="mx-1" size="large">精网号：</el-text>
-                        <el-input v-model="input" style="width: 240px" placeholder="请输入活动名称" clearable />
+                        <el-input v-model="detail.jwcode" style="width: 240px" placeholder="请输入精网号" clearable />
                     </div>
                     <div class="head-card-element">
                         <el-text class="mx-1" size="large">更新类型：</el-text>
-                        <el-select v-model="value" placeholder="请选择活动名称" size="large" style="width: 240px">
-                                <el-option v-for="item in options" :key="item.value" :label="item.label"
+                        <el-select v-model="detail.updateType" placeholder="请选择更新类型" size="large" style="width: 240px">
+                            <el-option v-for="item in updateType" :key="item.value" :label="item.label"
                                 :value="item.value" />
                         </el-select>
                     </div>
                     <div class="head-card-element">
                         <el-text class="mx-1" size="large">更新时间：</el-text>
-                        <el-time-picker v-model="value1" is-range range-separator="至" start-placeholder="起始时间"
+                        <el-time-picker v-model="getTime" is-range range-separator="至" start-placeholder="起始时间"
                             end-placeholder="结束时间" />
                     </div>
                     <div class="head-card-btn">
-                        <el-button>重置</el-button>
-                        <el-button type="primary">查询</el-button>
+                        <el-button @click="reset()">重置</el-button>
+                        <el-button type="primary" @click="get()">查询</el-button>
                     </div>
                 </div>
             </el-card>
@@ -164,21 +159,24 @@ const Delete = function (index, row) {
                 <div>
                     <el-table :data="tableData" style="width: 100%">
                         <el-table-column prop="name" label="姓名" />
-                        <el-table-column prop="homilyId" label="精网号" />
+                        <el-table-column prop="jwcode" label="精网号" />
                         <el-table-column prop="area" label="所属地区" />
-                        <el-table-column prop="gold" label="更新数量" />
+                        <el-table-column prop="gold" label="更新数量">
+                            <template #default="scope">
+                                <span>{{ scope.row.rechargeCoin + scope.row.freeCoin + scope.row.taskCoin }}</span>
+                            </template>
+                        </el-table-column>
                         <el-table-column prop="updateType" label="更新类型" />
                             <el-table-column prop="freeCoin" label="免费金币" />
                             <el-table-column prop="rechargeCoin" label="充值金币" />
                             <el-table-column prop="taskCoin" label="任务金币" />
-                        <el-table-column prop="commitName" label="提交人" />
+                            <el-table-column prop="name" label="提交人" />
                             <el-table-column prop="createTime" label="更新时间" />
                     </el-table>
                 </div>
 
                 <!-- 分页 -->
-                <el-pagination background
-                    layout="prev, pager, next" :total="total" />
+                <el-pagination background layout="prev, pager, next" :total="total" />
 
             </el-card>
         </el-col>
@@ -187,8 +185,6 @@ const Delete = function (index, row) {
 </template>
 
     <style scoped>
-
-
     .status {
         display: flex;
     }

vue/gold-system/src/views/workspace/index.vue

@@ -3,68 +3,169 @@ import { all } from 'axios';
 import * as echarts from 'echarts';
 import { ref, onMounted, reactive, computed } from "vue";
 import { VscInfo } from 'vue-icons-plus/vsc'
+import { Bs1CircleFill, Bs2CircleFill, Bs3CircleFill, Bs4Circle, Bs5Circle, Bs6Circle, Bs7Circle, Bs8Circle } from 'vue-icons-plus/bs'
+
+// 变量
+// 搜索对象
+const getObj = ref({
+    goldType: '',
+    platform: 'all',
+});
 //默认高亮标签页
 const activeName = ref('recharge')
-// 默认高亮单选按钮
-const platform = ref('all')
-
-onMounted(function () {
-    // 第一个柱状图 基于准备好的dom，初始化echarts实例
-    var rechargeBar = echarts.init(document.getElementById('recharge'));
+// 金币分类选项
+const gold = [
+    {
+        value: '',
+        label: '全部类型',
+    },
+    {
+        value: 'rechargeGole',
+        label: '充值金币',
+    },
+    {
+        value: 'freeGold',
+        label: '免费金币',
+    },
+    {
+        value: 'taskGold',
+        label: '付费金币',
+    },
+]
+// 图表
 // 指定图表的配置项和数据
-    var option = {
-        title: {
-            text: 'ECharts 入门示例'
+const option1 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+        }
     },
-        tooltip: {},
-        legend: {
-            data: ['销量']
+    legend: {},
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
     },
     xAxis: {
-            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+
     },
-        yAxis: {},
     series: [
         {
-                name: '销量',
+            name: '充值金币',
+            color: '#35e383',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: true
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 302, 301, 334, 390, 330, 320]
+        },
+        {
+            name: '免费金币',
+            color: '#5f8ff5',
             type: 'bar',
-                data: [5, 20, 36, 10, 10, 20]
+            stack: 'total',
+            label: {
+                show: true
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name: '任务金币',
+            color: '#ffe733',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: true
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
         }
     ]
 };
-    // 使用刚指定的配置项和数据显示图表。
-    rechargeBar.setOption(option);
-
 
-    //第二个柱状图 基于准备好的dom，初始化echarts实例
-    var consumeBar = echarts.init(document.getElementById('consume'));
-    // 指定图表的配置项和数据
-    var option = {
-        title: {
-            text: 'ECharts 入门示例'
+const option2 = {
+    tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+        }
     },
-        tooltip: {},
-        legend: {
-            data: ['销量']
+    legend: {},
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true
     },
     xAxis: {
-            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+        type: 'category',
+        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+    },
+    yAxis: {
+        type: 'value'
+
     },
-        yAxis: {},
     series: [
         {
-                name: '销量',
+            name: '充值金币',
+            color: '#35e383',
             type: 'bar',
-                data: [5, 20, 36, 10, 10, 20]
+            stack: 'total',
+            label: {
+                show: true
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 302, 301, 334, 390, 330, 320]
+        },
+        {
+            name: '免费金币',
+            color: '#5f8ff5',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: true
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name: '任务金币',
+            color: '#ffe733',
+            type: 'bar',
+            stack: 'total',
+            label: {
+                show: true
+            },
+            emphasis: {
+                focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290, 330, 310]
         }
     ]
 };
-    // 使用刚指定的配置项和数据显示图表。
-    consumeBar.setOption(option);
-
-    // 第一个饼状图 基于准备好的dom，初始化echarts实例
-    var yearRechargePie = echarts.init(document.getElementById('yearRecharge'));
-    var option = {
+const option3 = {
     tooltip: {
         trigger: 'item'
     },
@@ -102,12 +203,7 @@ onMounted(function () {
         }
     ]
 };
-    // 使用刚指定的配置项和数据显示图表。
-    yearRechargePie.setOption(option);
-
-    // 第二个饼状图 基于准备好的dom，初始化echarts实例
-    var yearConsumePie = echarts.init(document.getElementById('yearConsume'));
-    var option = {
+const option4 = {
     tooltip: {
         trigger: 'item'
     },
@@ -145,12 +241,7 @@ onMounted(function () {
         }
     ]
 };
-    // 使用刚指定的配置项和数据显示图表。
-    yearConsumePie.setOption(option);
-
-    // 第三个饼状图 基于准备好的dom，初始化echarts实例
-    var nowGoldPie = echarts.init(document.getElementById('nowGold'));
-    var option = {
+const option5 = {
     tooltip: {
         trigger: 'item'
     },
@@ -188,12 +279,7 @@ onMounted(function () {
         }
     ]
 };
-    // 使用刚指定的配置项和数据显示图表。
-    nowGoldPie.setOption(option);
-
-    // 第四个饼状图 基于准备好的dom，初始化echarts实例
-    var goldCategoryPie = echarts.init(document.getElementById('goldCategory'));
-    var option = {
+const option6 = {
     tooltip: {
         trigger: 'item'
     },
@@ -231,8 +317,92 @@ onMounted(function () {
         }
     ]
 };
+
+const list = ref([]);
+
+// 方法
+// 搜索方法
+const get = function () {
+    console.log(getObj.value);
+}
+// 全部平台
+const allPlatform = function () {
+    list.value = [
+        { value: 100, name: '项目1' },
+        { value: 100, name: '项目2' },
+        { value: 100, name: '项目3' },
+        { value: 100, name: '项目4' },
+        { value: 100, name: '项目5' }
+    ]
+    option6.series.data = list.value;
+    // 第4个饼状图 基于准备好的dom，初始化echarts实例
+    var pie = echarts.init(document.getElementById('goldCategory'));
     // 使用刚指定的配置项和数据显示图表。
-    goldCategoryPie.setOption(option);
+    pie.setOption(option6);
+    getObj.value.platform = 'all';
+    get();
+}
+// HC
+const HomilyChart = function () {
+    list.value = [
+        { value: 100, name: '项目1' },
+        { value: 200, name: '项目2' },
+        { value: 300, name: '项目3' },
+        { value: 400, name: '项目4' },
+        { value: 500, name: '项目5' }
+    ]
+    getObj.value.platform = 'HomilyChart';
+    get();
+}
+// Link
+const HomilyLink = function () {
+    list.value = [
+        { value: 100, name: '项目1' },
+        { value: 200, name: '项目2' },
+        { value: 100, name: '项目3' },
+        { value: 200, name: '项目4' },
+        { value: 100, name: '项目5' }
+    ]
+    getObj.value.platform = 'HomilyLink';
+    get();
+}
+
+onMounted(function () {
+    get();
+    // 第一个柱状图 基于准备好的dom，初始化echarts实例
+    var rechargeBar = echarts.init(document.getElementById('recharge'));
+    // 使用刚指定的配置项和数据显示图表。
+    rechargeBar.setOption(option1);
+
+    //第二个柱状图 基于准备好的dom，初始化echarts实例
+    var consumeBar = echarts.init(document.getElementById('consume'));
+    // 使用刚指定的配置项和数据显示图表。
+    consumeBar.setOption(option2);
+
+    // 第一个饼状图 基于准备好的dom，初始化echarts实例
+    var yearRechargePie = echarts.init(document.getElementById('yearRecharge'));
+
+    // 使用刚指定的配置项和数据显示图表。
+    yearRechargePie.setOption(option3);
+
+    // 第二个饼状图 基于准备好的dom，初始化echarts实例
+    var yearConsumePie = echarts.init(document.getElementById('yearConsume'));
+
+    // 使用刚指定的配置项和数据显示图表。
+    yearConsumePie.setOption(option4);
+
+    // 第三个饼状图 基于准备好的dom，初始化echarts实例
+    var nowGoldPie = echarts.init(document.getElementById('nowGold'));
+
+    // 使用刚指定的配置项和数据显示图表。
+    nowGoldPie.setOption(option5);
+
+    // 第4个饼状图 基于准备好的dom，初始化echarts实例
+    var goldCategoryPie = echarts.init(document.getElementById('goldCategory'));
+
+    // 使用刚指定的配置项和数据显示图表。
+    goldCategoryPie.setOption(option6);
+
 })
 
 
@@ -279,10 +449,124 @@ onMounted(function () {
             <el-card>
                 <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                     <el-tab-pane label="金币充值" name="recharge">
-                        <div id="recharge" style="width: 600px;height:400px;"></div>
+                        <div class="bar">
+                            <div id="recharge" style="width: 1200px;height:400px;"></div>
+                            <div>
+                                <div class="goldCategory">
+                                    <span class="light-green-dot"></span>
+                                    <span>充值金币</span>
+                                </div>
+                                <div class="goldCategory">
+                                    <span class="blue-dot"></span>
+                                    <span>免费金币</span>
+                                </div>
+                                <div class="goldCategory">
+                                    <span class="yellow-dot"></span>
+                                    <span>任务金币</span>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="ranking-header">
+                                    <span style="margin-right: 40px;">门店金币充值排名</span>
+                                    <el-select v-model="getObj.goldType" placeholder="请选择金币类型" size="small"
+                                        style="width: 90px;">
+                                        <el-option v-for="item in gold" :key="item.value" :label="item.label"
+                                            :value="item.value" />
+                                    </el-select>
+                                </div>
+                                <div>
+                                    <div class="ranking-item">
+                                        <Bs1CircleFill />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs2CircleFill />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs3CircleFill />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs4Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs5Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs1Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs6Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs7Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs8Circle />
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
                     </el-tab-pane>
                     <el-tab-pane label="金币消费" name="consume">
-                        <div id="consume" style="width: 600px;height:400px;"></div>
+                        <div class="bar">
+                            <div id="consume" style="width: 1200px;height:400px;"></div>
+                            <div>
+                                <div class="goldCategory">
+                                    <span class="light-green-dot"></span>
+                                    <span>充值金币</span>
+                                </div>
+                                <div class="goldCategory">
+                                    <span class="blue-dot"></span>
+                                    <span>免费金币</span>
+                                </div>
+                                <div class="goldCategory">
+                                    <span class="yellow-dot"></span>
+                                    <span>任务金币</span>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="ranking-header">
+                                    <span style="margin-right: 40px;">门店金币消费排名</span>
+                                    <el-select v-model="getObj.goldType" placeholder="请选择金币类型" size="small"
+                                        style="width: 90px;">
+                                        <el-option v-for="item in gold" :key="item.value" :label="item.label"
+                                            :value="item.value" />
+                                    </el-select>
+                                </div>
+                                <div>
+                                    <div class="ranking-item">
+                                        <Bs1CircleFill />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs2CircleFill />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs3CircleFill />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs4Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs5Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs1Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs6Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs7Circle />
+                                    </div>
+                                    <div class="ranking-item">
+                                        <Bs8Circle />
+                                    </div>
+
+                                </div>
+
+                            </div>
+                        </div>
                     </el-tab-pane>
                 </el-tabs>
 
@@ -309,11 +593,11 @@ onMounted(function () {
                 <template #header>
                     <div class="card-header" style="display: flex;">
                         <span>金币消耗类别占比</span>
-                        <el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small"
+                        <el-radio-group v-model="getObj.platform" fill="#ffffff" text-color="#409eff" size="small"
                             style="margin-left: auto;">
-                            <el-radio-button label="全部平台" value="all" />
-                            <el-radio-button label="HC" value="hc" />
-                            <el-radio-button label="Link" value="link" />
+                            <el-radio-button label="全部平台" value="all" @click="allPlatform()" />
+                            <el-radio-button label="HC" value="hc" @click="HomilyChart()" />
+                            <el-radio-button label="Link" value="link" @click="HomilyLink()" />
                         </el-radio-group>
                     </div>
                 </template>
@@ -324,6 +608,24 @@ onMounted(function () {
 </template>
 
 <style scoped>
+.ranking-item {
+    margin-bottom: 10px;
+}
+
+.ranking-header {
+    margin-bottom: 10px;
+    display: flex;
+}
+
+.goldCategory {
+    margin-right: 20px;
+    display: flex;
+}
+
+.bar {
+    display: flex;
+}
+
 .pie {
     display: flex;
 }