门店排名滚动条和数字分开，柱状图指标，柱状图数字

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

@@ -365,12 +365,8 @@ const get = async function () {
 // 获取中间柱状图数据
 const getMiddleBar = async function () {
   const result = await API.post(
-    "http://192.168.8.93:10010/statistics/getCoinTime?" +
-      "searchEndTime=" +
-      getMiddleBarObj.value.searchEndTime +
-      "&searchStartTime=" +
-      getMiddleBarObj.value.searchStartTime,
-    {}
+    "http://192.168.8.93:10010/statistics/getCoinTime",
+    getMiddleBarObj.value
   );
 
   getMiddleBarData.value = result.data;
@@ -378,7 +374,7 @@ const getMiddleBar = async function () {
 
   // 柱状图数据处理
   middleCategory.value = getMiddleBarData.value.map((item) =>
-    item.day == null ? item.month : item.day.substring(0, 10)
+    item.day == null ? item.month : item.day.substring(5, 10)
   );
   middleRecharge.value = getMiddleBarData.value.map((item) =>
     Math.abs(item.rechargeSumCoin)
@@ -423,7 +419,8 @@ const getMiddleBar = async function () {
         },
       },
       legend: {
-        show: false,
+        right: "-5%",
+        orient: "vertical",
       },
       grid: {
         left: "3%",
@@ -445,7 +442,7 @@ const getMiddleBar = async function () {
           type: "bar",
           stack: "total",
           label: {
-            show: true,
+            show: false,
           },
           emphasis: {
             focus: "series",
@@ -458,7 +455,7 @@ const getMiddleBar = async function () {
           type: "bar",
           stack: "total",
           label: {
-            show: true,
+            show: false,
           },
           emphasis: {
             focus: "series",
@@ -471,7 +468,7 @@ const getMiddleBar = async function () {
           type: "bar",
           stack: "total",
           label: {
-            show: true,
+            show: false,
           },
           emphasis: {
             focus: "series",
@@ -495,7 +492,8 @@ const getMiddleBar = async function () {
         },
       },
       legend: {
-        show: false,
+        right: "-5%",
+        orient: "vertical",
       },
       grid: {
         left: "3%",
@@ -517,7 +515,7 @@ const getMiddleBar = async function () {
           type: "bar",
           stack: "total",
           label: {
-            show: true,
+            show: false,
           },
           emphasis: {
             focus: "series",
@@ -530,7 +528,7 @@ const getMiddleBar = async function () {
           type: "bar",
           stack: "total",
           label: {
-            show: true,
+            show: false,
           },
           emphasis: {
             focus: "series",
@@ -543,7 +541,7 @@ const getMiddleBar = async function () {
           type: "bar",
           stack: "total",
           label: {
-            show: true,
+            show: false,
           },
           emphasis: {
             focus: "series",
@@ -883,7 +881,8 @@ onMounted(async function () {
       },
     },
     legend: {
-      show: false,
+      right: "-5%",
+      orient: "vertical",
     },
     grid: {
       left: "3%",
@@ -905,7 +904,7 @@ onMounted(async function () {
         type: "bar",
         stack: "total",
         label: {
-          show: true,
+          show: false,
         },
         emphasis: {
           focus: "series",
@@ -918,7 +917,7 @@ onMounted(async function () {
         type: "bar",
         stack: "total",
         label: {
-          show: true,
+          show: false,
         },
         emphasis: {
           focus: "series",
@@ -931,7 +930,7 @@ onMounted(async function () {
         type: "bar",
         stack: "total",
         label: {
-          show: true,
+          show: false,
         },
         emphasis: {
           focus: "series",
@@ -1093,37 +1092,26 @@ 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) }} 免费{{
+          <template #footer>充值{{ formatNum(getSumCoin.todayRecharge) }} 免费{{
             formatNum(getSumCoin.todayFree)
           }}
-            任务{{ formatNum(getSumCoin.todayTask) }}</template
-          >
+            任务{{ formatNum(getSumCoin.todayTask) }}</template>
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -1136,8 +1124,7 @@ onMounted(async function () {
             折合新币累计金额
             {{ formatNum(Math.abs(statistics.rechargeSumCoin)) }}
           </p>
-          <template #footer
-            >昨日新增
+          <template #footer>昨日新增
             {{ formatNum(Math.abs(statistics.totalYesterdaySumCoin)) }}
             ，其中充值
             {{ formatNum(Math.abs(statistics.rechargeYesterdaySumCoin)) }}
@@ -1154,12 +1141,10 @@ 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">
@@ -1172,66 +1157,46 @@ 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>
@@ -1239,59 +1204,23 @@ onMounted(async function () {
       <el-col>
         <el-card>
           <div style="margin-right: auto; text-align: right">
-            <el-radio-group
-              v-model="changeTimeRatio"
-              style="margin-right: 10px"
-              @change="changeTime()"
-            >
-              <el-radio-button
-                label="全部"
-                value="allDays"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本日"
-                value="day"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本周"
-                value="week"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本月"
-                value="month"
-                style="border-color: white"
-              />
-              <el-radio-button
-                label="本年"
-                value="year"
-                style="border-color: white"
-              />
+            <el-radio-group v-model="changeTimeRatio" style="margin-right: 10px" @change="changeTime()">
+              <el-radio-button label="全部" value="allDays" style="border-color: white" />
+              <el-radio-button label="本日" value="day" style="border-color: white" />
+              <el-radio-button label="本周" value="week" style="border-color: white" />
+              <el-radio-button label="本月" value="month" style="border-color: white" />
+              <el-radio-button label="本年" value="year" style="border-color: white" />
             </el-radio-group>
             <!-- <el-button text @click="allTime()" dark=true>全部</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>
                 合计：充值金币：
@@ -1308,57 +1237,35 @@ onMounted(async function () {
                 }}</span>
               </div>
               <div class="bar">
-                <el-scrollbar style="width: 1150px">
                 <div id="recharge" style="width: 100%; height: 400px"></div>
-                </el-scrollbar>
-
-                <div style="width: 100px">
+                <div style="width: 140px">
                   <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 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
                         }}</span>
                         <span style="margin-left: 10px">{{ item.name }}</span>
-                        <span style="margin-left: auto">{{
+                        <span style="margin-left: auto;margin-right: 10px">{{
                           formatNum(item.value)
                         }}</span>
                       </div>
@@ -1383,57 +1290,35 @@ onMounted(async function () {
                 }}</span>
               </div>
               <div class="bar">
-                <el-scrollbar style="width: 1150px">
                 <div id="consume" style="width: 100%; height: 400px"></div>
-                </el-scrollbar>
-
-                <div style="width: 100px">
+                <div style="width: 140px">
                   <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 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
                         }}</span>
                         <span style="margin-left: 10px">{{ item.name }}</span>
-                        <span style="margin-left: auto">{{
+                        <span style="margin-left: auto;margin-right: 10px">{{
                           formatNum(item.value)
                         }}</span>
                       </div>
@@ -1466,14 +1351,8 @@ 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" />
@@ -1537,6 +1416,7 @@ onMounted(async function () {
 }
 
 .goldCategory {
+  margin-bottom: 4px;
   margin-right: 20px;
   display: flex;
 }