10.15

fuintAdmin/src/views/financialStatement/reconciliation/tab/trading.vue

@@ -1,10 +1,91 @@
 <!-- 收银台订单-->
 <template>
-  <div style="">
+  <div class="container">
     <div class="new-top" >
       <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
         <el-form-item label="">
-          <el-input v-model="queryParams.orderNo" placeholder="流水编号"></el-input>
+          <el-input style="width: 215px;" v-model="queryParams.orderNo" placeholder="请输入订单号"></el-input>
+        </el-form-item>
+        <el-form-item label="" prop="payChannel">
+          <el-select
+            v-model="queryParams.payChannel"
+            clearable
+            placeholder="请选择订单类型"
+          >
+            <el-option label="小程序" value="applet"/>
+            <el-option label="收银台" value="cashier"/>
+            <el-option label="POS端" value="POS"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="payChannel">
+          <el-select
+            v-model="queryParams.payChannel"
+            clearable
+            placeholder="请选择订单分类"
+          >
+            <el-option label="小程序" value="applet"/>
+            <el-option label="收银台" value="cashier"/>
+            <el-option label="POS端" value="POS"/>
+          </el-select>
+        </el-form-item>
+
+
+          <el-form-item label="" prop="payType">
+            <el-select
+              v-model="queryParams.payType"
+              clearable
+              placeholder="请选择支付方式"
+            >
+              <el-option label="现金" value="CASH"/>
+              <el-option label="微信" value="WECHAT"/>
+              <el-option label="支付宝" value="ALIPAY"/>
+              <el-option label="余额" value="balance"/>
+            </el-select>
+          </el-form-item>
+        <el-form-item label="" prop="payType">
+          <el-select
+            v-model="queryParams.payType"
+            clearable
+            placeholder="请选择支付渠道"
+          >
+            <el-option label="现金" value="CASH"/>
+            <el-option label="微信" value="WECHAT"/>
+            <el-option label="支付宝" value="ALIPAY"/>
+            <el-option label="余额" value="balance"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            clearable
+            placeholder="请选择订单状态"
+          >
+            <el-option label="已支付" value="paid"/>
+            <el-option label="未支付" value="unpaid"/>
+            <el-option label="已退款" value="refund"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" style="margin-right: 0px" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            clearable
+            placeholder="请选择员工"
+          >
+            <el-option label="已支付" value="paid"/>
+            <el-option label="未支付" value="unpaid"/>
+            <el-option label="已退款" value="refund"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            clearable
+            placeholder="请输入付款用户"
+          >
+            <el-option label="已支付" value="paid"/>
+            <el-option label="未支付" value="unpaid"/>
+            <el-option label="已退款" value="refund"/>
+          </el-select>
         </el-form-item>
         <el-form-item label="">
           <el-date-picker
@@ -21,135 +102,62 @@
             placeholder="交易结束日期">
           </el-date-picker>
         </el-form-item>
-<!--          <el-form-item label="机构：" prop="deptId">-->
-<!--            <el-select-->
-<!--              v-model="queryParams.deptId"-->
-<!--              clearable-->
-<!--              placeholder="全部"-->
-<!--            >-->
-<!--              <el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.deptId">-->
-<!--              </el-option>-->
-
-
-<!--            </el-select>-->
-<!--          </el-form-item>-->
-          <el-form-item label="" prop="payChannel">
-            <el-select
-              v-model="queryParams.payChannel"
-              clearable
-              placeholder="支付渠道"
-            >
-              <el-option label="小程序" value="applet"/>
-              <el-option label="收银台" value="cashier"/>
-              <el-option label="POS端" value="POS"/>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="" prop="payType">
-            <el-select
-              v-model="queryParams.payType"
-              clearable
-              placeholder="支付方式"
-            >
-              <el-option label="现金" value="CASH"/>
-              <el-option label="微信" value="WECHAT"/>
-              <el-option label="支付宝" value="ALIPAY"/>
-              <el-option label="余额" value="balance"/>
-            </el-select>
-          </el-form-item>
-        <el-form-item label="" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            clearable
-            placeholder="支付状态"
-          >
-            <el-option label="已支付" value="paid"/>
-            <el-option label="未支付" value="unpaid"/>
-            <el-option label="已退款" value="refund"/>
-          </el-select>
-        </el-form-item>
         <el-form-item  style="float: right; margin-right: 0px ">
           <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
-<!--          <el-button type="primary" icon="el-icon-plus" @click = "exportExcelCashier()">导出订单</el-button>-->
-
         </el-form-item>
       </el-form>
     </div>
-    <div class="card-change-1" style="margin-right: 20px" >
+    <div class="wit_box" style="margin-right: 20px" >
       <div class="box-gang">
         <div class="box">
-          <div class="size-bole">{{ orderStatistics.wechat?orderStatistics.wechat:0 }}元/{{orderStatistics.wechatcount}}笔</div>
+          <div class="size-bole">{{ orderStatistics.wechat?orderStatistics.wechat:0 }}/{{orderStatistics.wechatcount}}</div>
           <div class="size-hui">
-            <div class="nei">微信收款</div>
+            <div class="dian" style="background: #0DC291"></div>
-            <div class="icon-img">
+            <div class="nei">微信收款（元）/笔数</div>
-              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
-            </div>
-          </div>
-
-        </div>
-        <div class="box">
-          <div class="size-bole">{{ orderStatistics.alipay?orderStatistics.alipay:0 }}元/{{orderStatistics.alipaycount}}笔</div>
-          <div class="size-hui">
-            <div class="nei">支付宝收款</div>
-
-            <div class="icon-img">
-              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
-            </div>
-
           </div>
         </div>
         <div class="box">
-          <div class="size-bole">{{ orderStatistics.balance?orderStatistics.balance:0 }}元</div>
+          <div class="size-bole" style="color:#00CAFF;">{{ orderStatistics.alipay?orderStatistics.alipay:0 }}/{{orderStatistics.alipaycount}}笔</div>
           <div class="size-hui">
-            <div class="nei">会员钱包收款</div>
+            <div class="dian" style="background: #00CAFF"></div>
-
+            <div class="nei">支付宝收款（元）/笔数</div>
-            <div class="icon-img">
-              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
-            </div>
-
           </div>
         </div>
         <div class="box">
-          <div class="size-bole">{{orderStatistics.balanceCount?orderStatistics.balanceCount:0}}笔</div>
+          <div class="size-bole" style="color:#F44522;" >{{ orderStatistics.balance?orderStatistics.balance:0 }}</div>
           <div class="size-hui">
-            <div class="nei">会员钱包笔数</div>
+            <div class="dian" style="background: #F44522"></div>
-
+            <div class="nei">云闪付收款（元）/笔数</div>
-            <div class="icon-img">
-              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
-            </div>
-
-          </div>
-        </div>
-        <!--        <div class="box">-->
-        <!--          <div class="size-hui">银行卡收款</div>-->
-        <!--          <div class="size-bole">{{ 0 }}元/{{0}}笔</div>-->
-        <!--        </div>-->
-        <!--        <div class="box">-->
-        <!--          <div class="size-hui">银联云闪付收款</div>-->
-        <!--          <div class="size-bole">{{ 0 }}元/{{0}}笔</div>-->
-        <!--        </div>-->
-        <div class="box">
-          <div class="size-bole">{{ orderStatistics.cash?orderStatistics.cash:0 }}元</div>
-
-          <div class="size-hui">
-            <div class="nei">现金支付收款</div>
-
-            <div class="icon-img">
-              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
-            </div>
-
           </div>
         </div>
         <div class="box">
-          <div class="size-bole">{{orderStatistics.cashcount?orderStatistics.cashcount:0}}笔</div>
+          <div class="size-bole"  style="color:#FF7E00;" >{{orderStatistics.balanceCount?orderStatistics.balanceCount:0}}</div>
+          <div class="size-hui">
+            <div class="dian" style="background: #FF7E00"></div>
+            <div class="nei">pos机收款（元）/笔数</div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="size-bole" style="color:#0D2ED8;">{{ orderStatistics.cash?orderStatistics.cash:0 }}</div>
 
           <div class="size-hui">
-            <div class="nei">现金收款笔数</div>
+            <div class="dian" style="background: #0D2ED8"></div>
-
+            <div class="nei">现金收款（元）/笔数</div>
-            <div class="icon-img">
+          </div>
-              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
+        </div>
-            </div>
+        <div class="box">
-
+          <div class="size-bole" style="color:#790DD8;">{{orderStatistics.cashcount?orderStatistics.cashcount:0}}</div>
+          <div class="size-hui">
+            <div class="dian" style="background: #790DD8"></div>
+            <div class="nei">会员消费（元）/笔数</div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="size-bole" style="color:#D80D54;">{{orderStatistics.cashcount?orderStatistics.cashcount:0}}</div>
+          <div class="size-hui">
+            <div class="dian" style="background: #D80D54"></div>
+            <div class="nei">挂帐收款（元）/笔数</div>
           </div>
         </div>
       </div>
@@ -312,7 +320,6 @@
 
   </div>
 </template>
-
 <script>
 
 import {
@@ -470,6 +477,10 @@ import {
 </script>
 
 <style scoped lang="scss">
+.container{
+  background: #f4f5f9;
+  height: 100vh;
+}
   .app-top{
     width: 100%;
 
@@ -489,42 +500,47 @@ import {
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
   }
   .box{
     //box-sizing: border-box;
     padding: 5px;
     //background: #f9f9f9;
-    margin-right: 20px;
     padding-left: 20px;
 
     width: 211px;
     height: 60px;
-    background: rgba(64,158,255,0.05);
+    background:#fff;
-    border-radius: 6px 6px 6px 6px;
+    border-radius: 10px;
-    border: 1px solid #fe8c4a;
+    border: 1px solid #FF9655;
 
   }
   .size-hui{
-    //font-size: 14px;
-    //margin-bottom: 10px;
-    //margin-top: 10px;
     display: flex;
     align-items: center;
-    //width: 200px;
     font-family: Source Han Sans CN, Source Han Sans CN;
     font-weight: 400;
     font-size: 13px;
     color: #888888;
-    //line-height: 0px;
     text-align: left;
     font-style: normal;
     text-transform: none;
+
     .nei {
+      color: #333333;
       width: 150px;
     }
   }
+  .dian{
+    width: 6px;
+    height: 6px;
+  border-radius: 50%;
+    margin-right: 5px;
+  }
+
   .el-form--inline .el-form-item {
-   margin-bottom: 0px;
+   margin-bottom: 15px;
+    margin-right: 21px;
   }
   .icon-img{
 
@@ -550,10 +566,11 @@ import {
 
     //width: 53px;
     height: 31px;
-    font-family: YouSheBiaoTiHei;
+    //font-family: YouSheBiaoTiHei;
-    font-weight: 400;
+    font-size: 24px;
+    color: #0DC291;
+    font-weight: 600;
     font-size: 24px;
-    color: #555555;
     //line-height: 0px;
     text-align: left;
     font-style: normal;
@@ -589,8 +606,19 @@ import {
     width: 98%;
     background: #FFFFFF;
     margin: 15px auto;
-    height: 60px;
+    height: 115px;
-    padding: 5px;
+    box-sizing: border-box;
+    padding: 15px;
+    border-radius: 4px;
+    margin-bottom: 5px;
+  }
+  .wit_box{
+    width: 98%;
+    background: #FFFFFF;
+    margin: 5px auto;
+    box-sizing: border-box;
+    padding: 15px;
+    border-radius: 4px;
   }
 
 </style>

fuintAdmin/src/views/shopowner.vue

@@ -146,7 +146,7 @@
     </div>
     <div class="b-bs">
       <div class="left-box-t">
-        <div class="d-s">
+        <div class="d-s" style="margin-bottom: 10px">
           <div class="h-tt" style="margin-right: 15px">油品交易分析</div>
 
           <el-dropdown placement="bottom-start">
@@ -174,9 +174,10 @@
               @blur="getDataShow">
             </el-date-picker>
           </div>
-          <div id="cccf"
+
-               style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
         </div>
+        <div id="cccf"
+             style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
       </div>
       <div class="right-box-t">
         <div style="font-size: 16px;font-weight: bold"><span style="margin-right: 15px">员工排行</span>
@@ -683,7 +684,8 @@ export default {
           }
         },
         legend: {
-          data: this.dataCount.oilNames
+          data: this.dataCount.oilNames,
+          left:'right'
         },
         xAxis: [
           {
@@ -839,7 +841,8 @@ export default {
           }
         },
         legend: {
-          data: ['Evaporation', '油品交易额', '非油品交易额', '会员充值金额', '会员消费金额', '会员余额']
+          data: ['Evaporation', '油品交易额', '非油品交易额', '会员充值金额', '会员消费金额', '会员余额'],
+          left:'right'
         },
         xAxis: [
           {
@@ -855,23 +858,10 @@ export default {
           {
             type: 'value',
             name: '金额(元)',
-            // min: 0,
-            // max: 10000,
-            // interval: 2000,
             axisLabel: {
               formatter: '{value}'
             }
           }
-          // {
-          //   type: 'value',
-          //   name: '',
-          //   min: 0,
-          //   max: 25,
-          //   interval: 5,
-          //   axisLabel: {
-          //     formatter: '{value} '
-          //   }
-          // }
         ],
         series: [
           {
@@ -890,9 +880,6 @@ export default {
               }
             },
             barGap: '60%',
-            // data: [
-            //   2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            // ]
             data: oilAmountList
           },
           {
@@ -910,9 +897,6 @@ export default {
                 barBorderRadius: [50, 50, 0, 0]
               }
             },
-            // data: [
-            //   2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            // ]
             data: noOilAmountList
           },
           {
@@ -930,9 +914,6 @@ export default {
                 barBorderRadius: [50, 50, 0, 0]
               }
             },
-            // data: [
-            //   2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            // ]
             data: rechargeBalanceList
           },
           {