111

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

@@ -21,7 +21,7 @@ const searchTime = ref([]);
 
 // 月份柱状图
 const getMiddleBarObj = ref({
-  updateType: "充值"
+  updateType: "充值",
 });
 const getMiddleBarData = ref({});
 const middleTotalRecharge = ref(0);
@@ -32,7 +32,6 @@ const middleRecharge = ref([]);
 const middleFree = ref([]);
 const middleTask = ref([]);
 
-
 // 地区排名
 const getAreaRankObj = ref({
   updateType: "充值",
@@ -138,7 +137,6 @@ const get = async function () {
     console.log("getDayConsumeCoin", getDayConsumeCoin.value);
     console.log("platformData", platformData.value);
 
-
     option3Data.value = [
       {
         value: Math.abs(statistics.value.rechargeSumCoin),
@@ -212,13 +210,13 @@ const get = async function () {
     ERPData.value.forEach((item, index) =>
       item == ""
         ? (ERPData.value[index] = {
-          value: 0,
-          name: "第" + (index + 1) + "学科" + 0,
-        })
+            value: 0,
+            name: "第" + (index + 1) + "学科" + 0,
+          })
         : (ERPData.value[index] = {
-          value: item[0],
-          name: "第" + (index + 1) + "学科" + item[0],
-        })
+            value: item[0],
+            name: "第" + (index + 1) + "学科" + item[0],
+          })
     );
     console.log("ERPData", ERPData.value);
     HCData.value = [
@@ -238,13 +236,13 @@ const get = async function () {
     HCData.value.forEach((item, index) =>
       item == ""
         ? (HCData.value[index] = {
-          value: 0,
-          name: "第" + (index + 1) + "学科" + 0,
-        })
+            value: 0,
+            name: "第" + (index + 1) + "学科" + 0,
+          })
         : (HCData.value[index] = {
-          value: item[0],
-          name: "第" + (index + 1) + "学科" + item[0],
-        })
+            value: item[0],
+            name: "第" + (index + 1) + "学科" + item[0],
+          })
     );
     console.log("HCData", HCData.value);
     LinkData.value = [
@@ -264,13 +262,13 @@ const get = async function () {
     LinkData.value.forEach((item, index) =>
       item == ""
         ? (LinkData.value[index] = {
-          value: 0,
-          name: "第" + (index + 1) + "学科" + 0,
-        })
+            value: 0,
+            name: "第" + (index + 1) + "学科" + 0,
+          })
         : (LinkData.value[index] = {
-          value: item[0],
-          name: "第" + (index + 1) + "学科" + item[0],
-        })
+            value: item[0],
+            name: "第" + (index + 1) + "学科" + item[0],
+          })
     );
     console.log("LinkData", LinkData.value);
     goldData.value = [
@@ -290,13 +288,13 @@ const get = async function () {
     goldData.value.forEach((item, index) =>
       item == ""
         ? (goldData.value[index] = {
-          value: 0,
-          name: "第" + (index + 1) + "学科" + 0,
-        })
+            value: 0,
+            name: "第" + (index + 1) + "学科" + 0,
+          })
         : (goldData.value[index] = {
-          value: item[0],
-          name: "第" + (index + 1) + "学科" + item[0],
-        })
+            value: item[0],
+            name: "第" + (index + 1) + "学科" + item[0],
+          })
     );
     console.log("goldData", goldData.value);
     allData.value = [
@@ -374,14 +372,18 @@ const getMiddleBar = async function () {
   console.log("getMiddleBarData", getMiddleBarData.value);
 
   // 柱状图数据处理
-  middleCategory.value = getMiddleBarData.value
-    .map((item) => item.day == null ? item.month : item.day.substring(0, 10));
-  middleRecharge.value = getMiddleBarData.value
-    .map((item) => Math.abs(item.rechargeSumCoin));
-  middleFree.value = getMiddleBarData.value
-    .map((item) => Math.abs(item.freeSumCoin));
-  middleFree.value = getMiddleBarData.value
-    .map((item) => Math.abs(item.taskSumCoin));
+  middleCategory.value = getMiddleBarData.value.map((item) =>
+    item.day == null ? item.month : item.day.substring(0, 10)
+  );
+  middleRecharge.value = getMiddleBarData.value.map((item) =>
+    Math.abs(item.rechargeSumCoin)
+  );
+  middleFree.value = getMiddleBarData.value.map((item) =>
+    Math.abs(item.freeSumCoin)
+  );
+  middleTask.value = getMiddleBarData.value.map((item) =>
+    Math.abs(item.taskSumCoin)
+  );
 
   middleTotalRecharge.value = 0;
   middleTotalFree.value = 0;
@@ -548,7 +550,7 @@ const getMiddleBar = async function () {
     // 使用刚指定的配置项和数据显示图表。
     consume.setOption(option);
   }
-}
+};
 
 // 获取门店排名
 const getAreaRank = async function () {
@@ -628,13 +630,21 @@ const handleChange = function () {
 // 时间范围控制
 const disabledDate = function (date) {
   const currentDate = new Date();
-  const startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
-  const endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+  const startDate = new Date(
+    currentDate.getFullYear(),
+    currentDate.getMonth() - 1,
+    1
+  );
+  const endDate = new Date(
+    currentDate.getFullYear(),
+    currentDate.getMonth() + 1,
+    0
+  );
   if (date >= startDate && date <= endDate) {
     return false;
   }
   return true;
-}
+};
 // 本日
 const today = function () {
   const current = new Date();
@@ -651,7 +661,6 @@ const today = function () {
   searchTime.value = [startDate, endDate];
   search();
   // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
-
 };
 // 本周
 const thisWeek = function () {
@@ -667,16 +676,8 @@ const thisWeek = function () {
 // 本月
 const thisMonth = function () {
   const current = new Date();
-  const startDate = new Date(
-    current.getFullYear(),
-    current.getMonth(),
-    1
-  );
-  const endDate = new Date(
-    current.getFullYear(),
-    current.getMonth() + 1,
-    0
-  );
+  const startDate = new Date(current.getFullYear(), current.getMonth(), 1);
+  const endDate = new Date(current.getFullYear(), current.getMonth() + 1, 0);
   searchTime.value = [startDate, endDate];
   search();
   // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
@@ -684,16 +685,8 @@ const thisMonth = function () {
 // 本年
 const thisYear = function () {
   const current = new Date();
-  const startDate = new Date(
-    current.getFullYear(),
-    0,
-    1
-  );
-  const endDate = new Date(
-    current.getFullYear() + 1,
-    0,
-    0
-  );
+  const startDate = new Date(current.getFullYear(), 0, 1);
+  const endDate = new Date(current.getFullYear() + 1, 0, 0);
   searchTime.value = [startDate, endDate];
   search();
   // console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"))
@@ -701,13 +694,22 @@ const thisYear = function () {
 const allTime = function () {
   searchTime.value = ["", ""];
   search();
-}
+};
 // 根据时间搜索
 const search = function () {
-  console.log("searchTime", moment(searchTime.value[0]).format("YYYY-MM-DD") + "至" + moment(searchTime.value[1]).format("YYYY-MM-DD"));
+  console.log(
+    "searchTime",
+    moment(searchTime.value[0]).format("YYYY-MM-DD") +
+      "至" +
+      moment(searchTime.value[1]).format("YYYY-MM-DD")
+  );
 
-  getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format("YYYY-MM-DD");
-  getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format("YYYY-MM-DD");
+  getMiddleBarObj.value.searchStartTime = moment(searchTime.value[0]).format(
+    "YYYY-MM-DD"
+  );
+  getMiddleBarObj.value.searchEndTime = moment(searchTime.value[1]).format(
+    "YYYY-MM-DD"
+  );
   if (getMiddleBarObj.value.searchStartTime == "Invalid date") {
     delete getMiddleBarObj.value.searchStartTime;
   }
@@ -716,8 +718,12 @@ const search = function () {
   }
   console.log("getMiddleBarObj", getMiddleBarObj.value);
 
-  getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format("YYYY-MM-DD");
-  getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format("YYYY-MM-DD");
+  getAreaRankObj.value.searchStartTime = moment(searchTime.value[0]).format(
+    "YYYY-MM-DD"
+  );
+  getAreaRankObj.value.searchEndTime = moment(searchTime.value[1]).format(
+    "YYYY-MM-DD"
+  );
   if (getAreaRankObj.value.searchStartTime == "Invalid date") {
     delete getAreaRankObj.value.searchStartTime;
   }
@@ -728,8 +734,7 @@ const search = function () {
 
   getMiddleBar();
   getAreaRank();
-}
-
+};
 
 // 切换平台
 const changePlatform = function () {
@@ -1066,26 +1071,37 @@ onMounted(async function () {
             <span v-if="getSumCoin.coinDifference > 0">
               <div class="comparedWithYesterday">
                 <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                <span class="red-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="red-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span v-if="getSumCoin.coinDifference < 0">
               <div class="comparedWithYesterday">
                 <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                <span class="green-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="green-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span v-if="getSumCoin.coinDifference == 0">
               <div class="comparedWithYesterday">
                 <span>较前一天 {{ formatNum(getSumCoin.coinDifference) }}</span>
-                <span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="grey-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
           </p>
-          <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
-            formatNum(getSumCoin.todayFree)
-          }}
-            任务{{ formatNum(getSumCoin.todayTask) }}</template>
+          <template #footer
+            >充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
+              formatNum(getSumCoin.todayFree)
+            }}
+            任务{{ formatNum(getSumCoin.todayTask) }}</template
+          >
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -1097,7 +1113,8 @@ onMounted(async function () {
           <p>
             折合新币累计金额 {{ formatNum(Math.abs(statistics.totalSumCoin)) }}
           </p>
-          <template #footer>昨日新增
+          <template #footer
+            >昨日新增
             {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }}
             ，其中充值
             {{ formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }}
@@ -1114,10 +1131,12 @@ onMounted(async function () {
             消费 {{ formatNum(Math.abs(getYearConsumeCoin.yearConsumeCoin)) }};
             退款 {{ formatNum(Math.abs(getYearConsumeCoin.yearRefundCoin)) }}
           </p>
-          <template #footer>昨日新增消耗
+          <template #footer
+            >昨日新增消耗
             {{ formatNum(Math.abs(getDayConsumeCoin.daysumCoin)) }} ; 消费
             {{ formatNum(Math.abs(getDayConsumeCoin.dayConsumeCoin)) }} ; 退款
-            {{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template>
+            {{ formatNum(Math.abs(getDayConsumeCoin.dayRefundCoin)) }}</template
+          >
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -1130,63 +1149,95 @@ onMounted(async function () {
             <span v-if="statistics.weekOverWeekRate > 0">
               <div class="comparedWithYesterday">
                 <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span class="red-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="red-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span v-if="statistics.weekOverWeekRate < 0">
               <div class="comparedWithYesterday">
                 <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span class="green-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="green-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span v-if="statistics.weekOverWeekRate == 0">
               <div class="comparedWithYesterday">
                 <span>周同比 {{ statistics.weekOverWeekRate }}%</span>
-                <span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="grey-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
             <span v-if="statistics.dayOverDayRate > 0">
               <div class="comparedWithYesterday">
                 <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span class="red-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="red-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span v-if="statistics.dayOverDayRate < 0">
               <div class="comparedWithYesterday">
                 <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span class="green-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="green-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
             <span v-if="statistics.dayOverDayRate == 0">
               <div class="comparedWithYesterday">
                 <span> 日环比{{ statistics.dayOverDayRate }}%</span>
-                <span class="grey-triangle" style="margin: 6px 0px 0px 7px"></span>
+                <span
+                  class="grey-triangle"
+                  style="margin: 6px 0px 0px 7px"
+                ></span>
               </div>
             </span>
           </p>
-          <template #footer>昨日充值人数
+          <template #footer
+            >昨日充值人数
             {{ formatNum(Math.abs(statistics.rechargeCountYesterday)) }}
             ，其中首充
             {{ formatNum(Math.abs(statistics.firstRechargeCountYesterday)) }}
-            人</template>
+            人</template
+          >
         </el-card>
       </el-col>
     </el-row>
     <el-row :gutter="20">
       <el-col>
         <el-card>
-          <div style="margin-right: auto;text-align: right">
-            <el-button text @click="allTime()" >全部</el-button>
+          <div style="margin-right: auto; text-align: right">
+            <el-button text @click="allTime()">全部</el-button>
             <el-button text @click="today()">今日</el-button>
             <el-button text @click="thisWeek()">本周</el-button>
             <el-button text @click="thisMonth()">本月</el-button>
             <el-button text @click="thisYear()">本年</el-button>
-            <el-date-picker v-model="searchTime" type="daterange" range-separator="→" start-placeholder="开始时间"
-              end-placeholder="结束时间" style="width: 200px;" :disabled-date="disabledDate" @change="search" />
+            <el-date-picker
+              v-model="searchTime"
+              type="daterange"
+              range-separator="→"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              style="width: 200px"
+              :disabled-date="disabledDate"
+              @change="search"
+            />
           </div>
 
-          <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
+          <el-tabs
+            v-model="activeName"
+            class="demo-tabs"
+            @tab-change="handleChange"
+          >
             <el-tab-pane label="金币充值" name="recharge">
               <div>
                 合计：充值金币：
@@ -1194,13 +1245,17 @@ onMounted(async function () {
                   formatNum(middleTotalRecharge)
                 }}</span>
                 ，免费金币：
-                <span class="mid-head-font">{{ formatNum(middleTotalFree) }}</span>
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalFree)
+                }}</span>
                 ，任务金币：
-                <span class="mid-head-font">{{ formatNum(middleTotalTask) }}</span>
+                <span class="mid-head-font">{{
+                  formatNum(middleTotalTask)
+                }}</span>
               </div>
               <div class="bar">
-                <el-scrollbar style="width: 1150px;">
-                  <div id="recharge" style="width: 100%; height: 400px;"></div>
+                <el-scrollbar style="width: 1150px">
+                  <div id="recharge" style="width: 100%; height: 400px"></div>
                 </el-scrollbar>
 
                 <div style="width: 100px">
@@ -1219,15 +1274,31 @@ onMounted(async function () {
                 </div>
                 <div style="width: 310px">
                   <div class="ranking-header">
-                    <span style="margin-right: 90px; width: 150px">门店金币充值排名</span>
-                    <el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px"
-                      @change="changeGoldType">
-                      <el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" />
+                    <span style="margin-right: 90px; width: 150px"
+                      >门店金币充值排名</span
+                    >
+                    <el-select
+                      v-model="goldType"
+                      placeholder="请选择金币类型"
+                      size="small"
+                      style="width: 90px"
+                      @change="changeGoldType"
+                    >
+                      <el-option
+                        v-for="item in gold"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
                     </el-select>
                   </div>
                   <div>
                     <el-scrollbar height="360px">
-                      <div v-for="(item, index) in areaRank" :key="item" class="ranking-item">
+                      <div
+                        v-for="(item, index) in areaRank"
+                        :key="item"
+                        class="ranking-item"
+                      >
                         <!-- <component :is="findBsComponent(index)" /> -->
                         <span style="width: 15px; text-align: center">{{
                           index + 1
@@ -1258,8 +1329,8 @@ onMounted(async function () {
                 }}</span>
               </div>
               <div class="bar">
-                <el-scrollbar style="width: 1150px;">
-                  <div id="consume" style="width: 100%; height: 400px;"></div>
+                <el-scrollbar style="width: 1150px">
+                  <div id="consume" style="width: 100%; height: 400px"></div>
                 </el-scrollbar>
 
                 <div style="width: 100px">
@@ -1278,15 +1349,31 @@ onMounted(async function () {
                 </div>
                 <div style="width: 310px">
                   <div class="ranking-header">
-                    <span style="margin-right: 90px; width: 150px">门店金币消费排名</span>
-                    <el-select v-model="goldType" placeholder="请选择金币类型" size="small" style="width: 90px"
-                      @change="changeGoldType">
-                      <el-option v-for="item in gold" :key="item.value" :label="item.label" :value="item.value" />
+                    <span style="margin-right: 90px; width: 150px"
+                      >门店金币消费排名</span
+                    >
+                    <el-select
+                      v-model="goldType"
+                      placeholder="请选择金币类型"
+                      size="small"
+                      style="width: 90px"
+                      @change="changeGoldType"
+                    >
+                      <el-option
+                        v-for="item in gold"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      />
                     </el-select>
                   </div>
                   <div>
                     <el-scrollbar height="360px">
-                      <div v-for="(item, index) in areaRank" :key="item" class="ranking-item">
+                      <div
+                        v-for="(item, index) in areaRank"
+                        :key="item"
+                        class="ranking-item"
+                      >
                         <!-- <component :is="findBsComponent(index)" /> -->
                         <span style="width: 15px; text-align: center">{{
                           index + 1
@@ -1325,8 +1412,14 @@ onMounted(async function () {
           <template #header>
             <div class="card-header" style="display: flex">
               <span class="tail-head">四大学科类别占比</span>
-              <el-radio-group v-model="platform" fill="#ffffff" text-color="#409eff" size="small"
-                @change="changePlatform" style="margin-left: auto">
+              <el-radio-group
+                v-model="platform"
+                fill="#ffffff"
+                text-color="#409eff"
+                size="small"
+                @change="changePlatform"
+                style="margin-left: auto"
+              >
                 <el-radio-button label="全部平台" value="全部平台" />
                 <el-radio-button label="ERP" value="ERP" />
                 <el-radio-button label="HC" value="HC" />
@@ -1357,7 +1450,7 @@ onMounted(async function () {
 </template>
 
 <style scoped>
-.medium-button{
+.medium-button {
   display: flex;
 }
 .head-mid-font {