统计 及 页面适配

src/App.vue

@@ -5,8 +5,12 @@
 </template>
 
 <script>
+import DevicePixelRatio from './libs/rem'
 export default  {
   name:  'App',
+    created() {
+      new DevicePixelRatio().init()
+    },
     metaInfo() {
         return {
             title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,

src/libs/rem.js

@@ -0,0 +1,57 @@
+class DevicePixelRatio {
+  constructor() {
+    // this.flag = false;
+  }
+  // 获取系统类型
+  _getSystem() {
+    // let flag = false;
+    var agent = navigator.userAgent.toLowerCase();
+    //        var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
+    //        if(isMac) {
+    //            return false;
+    //        }
+    // 现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
+    if (agent.indexOf("windows") >= 0) {
+      return true;
+    }
+  }
+  // 获取页面缩放比例
+  //    _getDevicePixelRatio() {
+  //        let t = this;
+  //    }
+  // 监听方法兼容写法
+  _addHandler(element, type, handler) {
+    if (element.addEventListener) {
+      element.addEventListener(type, handler, false);
+    } else if (element.attachEvent) {
+      element.attachEvent("on" + type, handler);
+    } else {
+      element["on" + type] = handler;
+    }
+  }
+  // 校正浏览器缩放比例
+  _correct() {
+    let t = this;
+    // 页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
+    document.getElementsByTagName("body")[0].style.zoom = 1 / window.devicePixelRatio;
+  }
+  // 监听页面缩放
+  _watch() {
+    let t = this;
+    t._addHandler(window, "resize", function() { // 注意这个方法是解决全局有两个window.resize
+      // 重新校正
+      t._correct()
+    })
+  }
+  // 初始化页面比例
+  init() {
+    let t = this;
+    if (t._getSystem()) { // 判断设备，目前只在windows系统下校正浏览器缩放比例
+      // 初始化页面校正浏览器缩放比例
+      t._correct();
+      // 开启监听页面缩放
+      t._watch();
+    }
+  }
+}
+export default DevicePixelRatio;

src/views/hisStore/components/OrderSummaryTable.vue

@@ -14,78 +14,78 @@
       :summary-method="getSummaries"
       height="500"
       >
-      <el-table-column prop="name" :label="nameLable" width="100" class-name="sticky-column" align="center">
+      <el-table-column prop="name" :label="nameLable" min-width="70" class-name="sticky-column" align="center">
         <template slot-scope="scope">
           <span :class="{'group-name': scope.row.isGroup}">{{ scope.row.name }}</span>
         </template>
       </el-table-column>
-      <el-table-column prop="totalCalls" label="总单数" width="50" align="center"></el-table-column>
-      <el-table-column prop="totalAmount" label="总金额" width="80" align="center">
+      <el-table-column prop="totalCalls" label="总单数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="totalAmount" label="总金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.totalAmount ? scope.row.totalAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="validAmount" label="成单金额" width="80" align="center">
+      <el-table-column prop="validAmount" label="成单金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.validAmount ? scope.row.validAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="waitingOrders" label="待审数" width="50" align="center"></el-table-column>
-      <el-table-column prop="waitingAmount" label="待审金额" width="80" align="center">
+      <el-table-column prop="waitingOrders" label="待审数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="waitingAmount" label="待审金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.waitingAmount ? scope.row.waitingAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="unPassedOrders" label="未过数" width="50" align="center"></el-table-column>
-      <el-table-column prop="unPassedAmount" label="未过金额" width="80" align="center">
+      <el-table-column prop="unPassedOrders" label="未过数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="unPassedAmount" label="未过金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.unpassedAmount ? scope.row.unpassedAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="cancelOrders" label="取消数" width="50" align="center"></el-table-column>
-      <el-table-column prop="cancelAmount" label="取消金额" width="80" align="center">
+      <el-table-column prop="cancelOrders" label="取消数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="cancelAmount" label="取消金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.cancelAmount ? scope.row.cancelAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="completeOrders" label="成交数" width="50" align="center"></el-table-column>
-      <el-table-column prop="completeAmount" label="成交金额" width="80" align="center">
+      <el-table-column prop="completeOrders" label="成交数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="completeAmount" label="成交金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.completeAmount ? scope.row.completeAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="unshippedOrders" label="成交未发货数" width="50" align="center"></el-table-column>
-      <el-table-column prop="unshippedAmount" label="成交未发货金额" width="80" align="center">
+      <el-table-column prop="unshippedOrders" label="成交未发货数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="unshippedAmount" label="成交未发货金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.unshippedAmount ? scope.row.unshippedAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="shippedOrders" label="发货数" width="50" align="center"></el-table-column>
-      <el-table-column prop="shippedAmount" label="发货金额" width="80" align="center">
+      <el-table-column prop="shippedOrders" label="发货数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="shippedAmount" label="发货金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.shippedAmount ? scope.row.shippedAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="transitOrders" label="在途数" width="50" align="center"></el-table-column>
-      <el-table-column prop="transitAmount" label="在途金额" width="80" align="center">
+      <el-table-column prop="transitOrders" label="在途数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="transitAmount" label="在途金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.transitAmount ? scope.row.transitAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="receivedOrders" label="签收数" width="50" align="center"></el-table-column>
-      <el-table-column prop="receivedAmount" label="签收金额" width="80" align="center">
+      <el-table-column prop="receivedOrders" label="签收数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="receivedAmount" label="签收金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.receivedAmount ? scope.row.receivedAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="returnOrders" label="退货数" width="50" align="center"></el-table-column>
-      <el-table-column prop="returnAmount" label="退货金额" width="80" align="center">
+      <el-table-column prop="returnOrders" label="退货数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="returnAmount" label="退货金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.returnAmount ? scope.row.returnAmount.toFixed(2) : '0.00' }}
         </template>
       </el-table-column>
-      <el-table-column prop="paybackOrders" label="回款数" width="50" align="center"></el-table-column>
-      <el-table-column prop="paybackAmount" label="回款金额" width="80" align="center">
+      <el-table-column prop="paybackOrders" label="回款数" min-width="40" align="center"></el-table-column>
+      <el-table-column prop="paybackAmount" label="回款金额" min-width="70" align="center">
         <template slot-scope="scope">
           {{ scope.row.paybackAmount ? scope.row.paybackAmount.toFixed(2) : '0.00' }}
         </template>
@@ -195,9 +195,9 @@ export default {
 </script>
 
 <style scoped>
-.table-container {
+/* .table-container {
   margin-top: 30px;
-}
+} */
 
 .table-title {
   font-size: 16px;

src/views/hisStore/statistics/storeOrderStatistics.vue

@@ -75,6 +75,23 @@
               </el-select>
             </el-form-item>
           </el-col>
+          <el-col :span="6">
+            <el-form-item label-width="0">
+              <span></span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="统计维度:">
+              <el-select v-model="summaryType" placeholder="请选择统计维度" size="small" style="width: 140px; margin-bottom: 10px; margin-left: 10px;">
+                <el-option
+                  v-for="item in summaryTypes"
+                  :key="item.dictLabel"
+                  :label="item.dictLabel"
+                  :value="item.dictValue">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
         </el-row>
 
 
@@ -123,7 +140,17 @@
           <el-col :span="6">
             <el-form-item>
               <el-button type="primary" icon="el-icon-search" plain   @click="storeOrderStatistics">搜索</el-button>
+           
+       
+              <el-button type="primary" icon="el-icon-download" plain style="margin-left: 10px;margin-right: 10px;"   @click="exportExcel">导出</el-button>
+                   <!-- 是否展示统计图 -->
+              <el-switch
+                v-model="showChart"
+                active-color="#13ce66"
+                inactive-color="#ff4949">
+              </el-switch>
             </el-form-item>
+        
           </el-col>
         </el-row>
 
@@ -131,30 +158,28 @@
         
         
       </el-form>
+
+   
+
       <div class="data-box">
-        <!-- <div class="echart-box">
-          <div id="echart-customer"></div>
-        </div> -->
+     
 
         <!-- 新增的数据表格 -->
         <div class="table-container">
           <!-- 使用组件替换原有表格 -->
           <order-summary-table 
-            title="员工下单汇总" 
+            :title="tableTiele" 
             :table-data="tableData" 
-            nameLable="员工姓名" />
-            
-          <order-summary-table 
-            title="公司下单汇总" 
-            :table-data="companyTableData" 
-            nameLable="公司" />
+            :nameLable="nameLable" />
             
-          <order-summary-table 
-            title="部门下单汇总" 
-            :table-data="deptTableData" 
-            nameLable="部门"/>
         </div>
+
+
       </div>
+
+        <div class="echart-box" v-if="showChart">
+          <div id="echart-customer"></div>
+        </div>
     </div>
 
   </div>
@@ -164,7 +189,7 @@
 import OrderSummaryTable from '../components/OrderSummaryTable';
 import { storeOrderStatistics } from "@/api/hisStore/statistics";
 import { getUserListByDeptId} from "@/api/company/companyUser";
-// import echarts from 'echarts'
+import echarts from 'echarts'
 import resize from '../../dashboard/mixins/resize'
 import { treeselect } from "@/api/company/companyDept";
 import Treeselect from "@riophae/vue-treeselect";
@@ -176,10 +201,18 @@ export default {
   components: { Treeselect,OrderSummaryTable },
   watch: {
     // 监听deptId
-    'deptId': 'currDeptChange'
+    'deptId': 'currDeptChange',
+    // 监听 summaryType
+    'summaryType': 'summaryTypeChange',
+    
   },
   data() {
     return {
+      showChart:false, // 是否展示统计图
+      summaryType:1,// 默认员工
+      summaryTypes: [{dictLabel: '员工', dictValue: 1},
+        {dictLabel: '部门', dictValue: 2},
+        {dictLabel: '公司', dictValue: 3}],
       queryTypes:[
         { dictLabel: '下单时间', dictValue: 1 },
         { dictLabel: '发货时间', dictValue: 2 }
@@ -239,9 +272,12 @@ export default {
       orderCount: [],
       payPrice: [],
       // 新增表格数据
-      tableData: [],        // 员工下单汇总
+      tableData: [],        // 汇总
+      tableTiele: '员工下单汇总',
+      nameLable: '员工姓名',
       companyTableData: [], // 公司下单汇总
-      deptTableData: []     // 部门下单汇总
+      deptTableData: [],     // 部门下单汇总
+      userTableData:[] // 员工下单汇总
     }
   },
   created() {
@@ -262,6 +298,21 @@ export default {
     });
   },
   methods: {
+    summaryTypeChange(){
+      if (this.summaryType == 1) {
+        this.tableTiele = '员工下单汇总';
+        this.nameLable = '员工姓名';
+        this.tableData = this.userTableData;
+      } else if (this.summaryType == 2) {
+        this.tableTiele = '部门下单汇总';
+        this.nameLable = '部门名称';
+        this.tableData = this.deptTableData;
+      }else if (this.summaryType == 3) {
+        this.tableTiele = '公司下单汇总';
+        this.nameLable = '公司名称';
+        this.tableData = this.deptTableData;
+      }
+    },
     companyChange(val) {
       console.log(val);
       this.companyId = val;
@@ -314,6 +365,10 @@ export default {
         data.companyUserId = this.userIds
       }
 
+      if(this.summaryType){
+        data.summaryType = this.summaryType
+      }
+
       if(this.queryType){
         data.queryType = this.queryType
       }
@@ -343,13 +398,15 @@ export default {
         this.orderCount = response.orderCount;
         this.payPrice = response.payPrice;
         //表格数据
-        this.tableData = response.userTableData || [];
+        this.userTableData = response.userTableData || [];
         this.companyTableData = response.companyTableData || [];
         this.deptTableData = response.deptTableData || [];
 
-        // setTimeout(() => {
-        //   this.initEchart();
-        // }, 500);
+        this.summaryTypeChange();
+
+        setTimeout(() => {
+          this.initEchart();
+        }, 500);
       });
     },
     initEchart() {
@@ -443,6 +500,11 @@ export default {
   }
 }
 
+#echart-customer {
+  width: 100%;
+  height: 320px
+}
+
 .app-container {
   border: 1px solid #e6e6e6;
   padding: 12px;
@@ -491,14 +553,7 @@ export default {
       .el-select {
         margin: 5px 10px;
       }
-      
-      .table-box {
-        margin-top: 15px;
-        .export {
-          float: right;
-          margin: 10px 0px;
-        }
-      }
+    
       
       // 新增表格样式
       .table-container {