build

src/components/reports/index.js

@@ -1,8 +1,10 @@
 import WanyuReport from "./src/WanyuReport.vue"
 import DepartmentReport from "./src/DepartmentReport.vue"
+import ControlDisplay from "./src/ControlDisplay.vue"
 
 const components = [
   WanyuReport,
+  ControlDisplay,
   DepartmentReport
 ]
 

src/components/reports/src/ControlDisplay.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class="app-main">
+      <div class="app-main-zhunbeixuanzhuan" v-if="!isLoading">
+        <div class="app-main-xuanzhuan">
+          <div class="search clear">
+            <h3 style="display:inline-block;" class="fl">业绩报表</h3>
+
+            <el-date-picker
+              v-model="date"
+              style="margin-top:10px;"
+              class="fr picker"
+              :size="'small'"
+              :editable="false"
+              :clearable="false"
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+              type="date"
+              align="right"
+              placeholder="选择日期"
+              :picker-options="{
+                disabledDate(time) {
+                  return time.getTime() > Date.now();
+                }
+              }"
+            >
+            </el-date-picker>
+          </div>
+
+          <h3>平台维度</h3>
+
+          <el-row class="myul">
+            <el-col style="margin-bottom:20px">
+              <wanyu-report :date="date" />
+            </el-col>
+          </el-row>
+
+
+          <h3>业务公司维度</h3> 
+          <el-row :gutter="20">
+            <el-col 
+                v-for="(company,index) in companyArr"
+                style="margin-bottom:20px" 
+                :xs="24" :sm="12" :md="12" :lg="6" :xl="6"
+                :key="company.companyNo"
+              >
+              <department-report 
+                :date="date" 
+                :index="index + 1" 
+                :companyNo="company.companyNo" 
+              />
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+export default {
+  name:'control-display',
+  props:['companyArr','isLoading'],
+  data(){
+    return {
+      date:''
+    }
+  },
+  mounted(){
+    this.date = this.transformTime()
+  },
+  methods:{
+    transformTime() {
+      let time = new Date();
+      let y = time.getFullYear();
+      let M = time.getMonth() + 1;
+      let d = time.getDate();
+      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
+    },
+  }
+};
+</script>
+<style lang="scss">
+@mixin layout-dev {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  overflow-y: auto
+}
+html {
+  @include layout-dev;
+
+  body {
+    @include layout-dev;
+    text-align: left;
+  }
+  .clear::after,
+  .clear::before {
+    content: "";
+    display: block;
+    clear: both;
+  }
+
+  #app {
+    @include layout-dev;
+
+    padding: 0;
+    .app-main {
+      width: 100%;
+      padding: 0;
+      margin: 0;
+      box-sizing: border-box;
+      .app-main-zhunbeixuanzhuan {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        .app-main-xuanzhuan {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          // bottom: 0px;
+          box-sizing: border-box;
+          padding: 16px;
+        }
+      }
+      .search {
+        position: relative;
+        padding: 0 0 12px 0;
+        width: 100%;
+      }
+      .shengxia {
+        float: left;
+        height: 33px;
+        line-height: 32px;
+        width: calc(100% - 122px);
+      }
+      .picker{
+        width: 112px;
+      }
+      .fr {
+        float: right;
+      }
+      .fr.my-fr {
+        width: 112px;
+        line-height: 32px;
+        text-align: right;
+        i {
+          font-size: 17px;
+          height: 32px;
+          line-height: 32px;
+          color: #606266;
+          display: inline-block;
+          vertical-align: top;
+        }
+        span {
+          display: inline-block;
+          vertical-align: top;
+          color: #606266;
+          font-size: 14px;
+          padding: 0 0 0 5px;
+        }
+      }
+      .title {
+        text-align: center;
+        padding: 0 0 8px 0;
+      }
+      .el-table .el-table__header-wrapper table thead tr th {
+        background: #f5f7fa !important;
+      }
+      .el-date-editor.fr.el-input.el-input--small.el-input--prefix.el-input--suffix.el-date-editor--date {
+        .el-input__inner {
+          padding-right: 0 !important;
+        }
+      }
+      .el-drawer__wrapper {
+        #el-drawer__title {
+          margin: 0 !important;
+          display: none !important;
+        }
+        .el-drawer__body {
+          .demo-drawer__content_header {
+            padding: 20px 20px 0 !important;
+            font-size: 16px !important;
+            color: #72767b !important;
+          }
+          ul.demo-drawer__content_body {
+            width: 100% !important;
+            box-sizing: border-box !important;
+            li {
+              height: 23px !important;
+              line-height: 23px !important;
+              font-size: 14px !important;
+              color: #72767b !important;
+              box-sizing: border-box !important;
+            }
+            li.active_e {
+              height: 23px !important;
+              line-height: 23px !important;
+              color: #409eff !important;
+              font-size: 14px !important;
+              box-sizing: border-box !important;
+            }
+          }
+        }
+      }
+      .myul {
+        position: relative;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+        width: 100%;
+        .myli {
+          position: relative;
+          list-style-type: none;
+          padding: 0;
+          margin: 0;
+          width: 100%;
+        }
+      }
+      .el-table .warning-row {
+        background: #f5f7fa !important;
+        // background: oldlace !important;
+      }
+
+      .el-table .success-row {
+        background: #f0f9eb !important;
+      }
+    }
+  }
+}
+</style>

src/components/reports/src/DepartmentReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="SalesReportRejectedNew">
-    <div class="table-header">{{companyName || '--'}}业绩报表</div>
+    <div class="table-header">{{index}}.{{companyName || '--'}}</div>
 
     <el-table class="table-sub__header" :data="[stats]" size="mini" border style="margin-top:10px;margin-bottom:-1px">
       <!-- <span>月指标:</span>{{ stats.total_tips }} -->
@@ -18,7 +18,6 @@
       style="width: 100%"
       row-key="id"
       default-expand-all
-      :row-class-name="tableRowClassName"
       :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
     >
       <el-table-column prop="type" label="业绩类型"  width="70">
@@ -48,7 +47,7 @@ import setHeight from "@/mixins/index";
 
 export default {
   name: "DepartmentReport",
-  props: ["date","name","companyNo"],
+  props: ["date","companyNo","index"],
   mixins: [setHeight],
   watch: {
     date: function(val) {
@@ -169,7 +168,6 @@ export default {
 <style lang="scss" scoped>
 .table-header {
   font-size: 14px;
-  font-weight: bold;
   border-bottom: none;
 }
 .table-sub__header {

src/components/reports/src/WanyuReport.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="SalesReportRejectedNew">
-    <div class="table-header">北京万宇恒通国际科贸有限公司业绩报表</div>
+    <div class="table-header">北京万宇恒通国际科贸有限公司</div>
     <el-table
       :data="tableData"
       v-loading="loading"
@@ -10,13 +10,12 @@
       style="width: 100%"
       row-key="id"
       default-expand-all
-      :row-class-name="tableRowClassName"
       :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
     >
       <el-table-column label="部门" fixed="left" width="70" prop="depart">
         <template slot-scope="scope">{{getCompanyLabel(scope.row.depart)}}</template>
       </el-table-column>
-      <el-table-column label="本日销售额" width="100" align="center">
+      <el-table-column label="本日销售额" min-width="100" align="center">
          <template slot-scope="scope">
             {{ unit2TenThousand(scope.row.dayinfo.sale_total) }}
          </template>
@@ -194,7 +193,6 @@ export default {
 
 .table-header {
   font-size: 14px;
-  font-weight: bold;
   border-bottom: none;
 }
 

src/components/unusual/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <el-empty :description="message">
+      <el-button type="primary" @click="toLogin">重新登录</el-button>
+    </el-empty>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['message'],
+  methods:{
+    toLogin(){
+      this.$router.push('/login')
+    }
+  }
+}
+</script>

src/pages/report.vue

@@ -1,244 +1,40 @@
 <template>
-  <div id="app" v-cloak>
-    <div class="app-main">
-      <div class="app-main-zhunbeixuanzhuan">
-        <div class="app-main-xuanzhuan">
-          <div class="search clear">
-            <el-date-picker
-              v-model="date"
-              class="fr picker"
-              :size="'small'"
-              :editable="false"
-              :clearable="false"
-              value-format="yyyy-MM-dd"
-              format="yyyy-MM-dd"
-              type="date"
-              align="right"
-              placeholder="选择日期"
-              :picker-options="{
-                disabledDate(time) {
-                  return time.getTime() > Date.now();
-                }
-              }"
-            >
-            </el-date-picker>
-          </div>
-
-          <h3>平台业绩报表</h3>
-          <el-row class="myul">
-            <el-col style="margin-bottom:20px">
-              <wanyu-report :date="date" />
-            </el-col>
-          </el-row>
-
-
-          <!-- 24 -->
-          <h3>公司业绩报表</h3> 
-          <el-row :gutter="10">
-            <el-col style="margin-bottom:20px" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
-              <department-report companyNo="GS2302231125079621" :date="date" />
-            </el-col>
-            <el-col style="margin-bottom:20px" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
-              <department-report companyNo="GS2302231124114965" :date="date" />
-            </el-col>
-            <el-col style="margin-bottom:20px" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
-              <department-report companyNo="GS2302231323386950" :date="date" />
-            </el-col>
-            <el-col style="margin-bottom:20px" :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
-              <department-report companyNo="GS2203161855277894" :date="date" />
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-    </div>
+  <div id="app" v-cloak v-loading="state.loading">
+    <control-display  v-if="!state.error" :companyArr="companyArr" />
+    <unusual-state v-else :message="state.message" />
   </div>
 </template>
 <script>
 import asyncRequest from "@/api/index"
 import { getParameterByName } from "../utils/auth"
+import UnusualState from "@/components/unusual/index.vue"
 export default {
   name:'report',
+  components:{ UnusualState },
   data() {
     return {
-      date: ""
-    };
-  },
-  async created() {
-    this.date = this.transformTime();
-    const { search } = window.location
-    if(search.indexOf('?') !== -1){
-      const query = {}
-      search.split('?')[1].split('&').forEach(item => {
-        const [key,value] = item.split('=')
-        query[key] = value
-      })
+      companyArr:[],
+      state:{
+        error:false,
+        loading:false,
+        message:'',
+      }
     }
   },
   async mounted(){
-    const result = await asyncRequest.userinfo({code:getParameterByName('code')})
-    alert(JSON.stringify(result))
-  },
-  methods: {
-    transformTime() {
-      let time = new Date();
-      let y = time.getFullYear();
-      let M = time.getMonth() + 1;
-      let d = time.getDate();
-      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
-    },
-  }
-};
-</script>
-<style lang="scss">
-@mixin layout-dev {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  overflow-y: auto
-}
-html {
-  @include layout-dev;
-
-  body {
-    @include layout-dev;
-    text-align: left;
-  }
-  .clear::after,
-  .clear::before {
-    content: "";
-    display: block;
-    clear: both;
-  }
+    this.state.loading = true
+    const result = await asyncRequest.userinfo({code: getParameterByName('code')})
+    this.state.loading = false
 
-  #app {
-    @include layout-dev;
-
-    padding: 0;
-    .app-main {
-      width: 100%;
-      padding: 0;
-      margin: 0;
-      box-sizing: border-box;
-      .app-main-zhunbeixuanzhuan {
-        position: relative;
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        .app-main-xuanzhuan {
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          // bottom: 0px;
-          box-sizing: border-box;
-          padding: 16px;
-        }
-      }
-      .search {
-        position: relative;
-        padding: 0 0 12px 0;
-      }
-      .shengxia {
-        float: left;
-        height: 33px;
-        line-height: 32px;
-        width: calc(100% - 122px);
-      }
-      .picker{
-        width: 112px;
-      }
-      .fr {
-        float: right;
-      }
-      .fr.my-fr {
-        width: 112px;
-        line-height: 32px;
-        text-align: right;
-        i {
-          font-size: 17px;
-          height: 32px;
-          line-height: 32px;
-          color: #606266;
-          display: inline-block;
-          vertical-align: top;
-        }
-        span {
-          display: inline-block;
-          vertical-align: top;
-          color: #606266;
-          font-size: 14px;
-          padding: 0 0 0 5px;
-        }
-      }
-      .title {
-        text-align: center;
-        padding: 0 0 8px 0;
-      }
-      .el-table .el-table__header-wrapper table thead tr th {
-        background: #f5f7fa !important;
-      }
-      .el-date-editor.fr.el-input.el-input--small.el-input--prefix.el-input--suffix.el-date-editor--date {
-        .el-input__inner {
-          padding-right: 0 !important;
-        }
-      }
-      .el-drawer__wrapper {
-        #el-drawer__title {
-          margin: 0 !important;
-          display: none !important;
-        }
-        .el-drawer__body {
-          .demo-drawer__content_header {
-            padding: 20px 20px 0 !important;
-            font-size: 16px !important;
-            color: #72767b !important;
-          }
-          ul.demo-drawer__content_body {
-            width: 100% !important;
-            box-sizing: border-box !important;
-            li {
-              height: 23px !important;
-              line-height: 23px !important;
-              font-size: 14px !important;
-              color: #72767b !important;
-              box-sizing: border-box !important;
-            }
-            li.active_e {
-              height: 23px !important;
-              line-height: 23px !important;
-              color: #409eff !important;
-              font-size: 14px !important;
-              box-sizing: border-box !important;
-            }
-          }
-        }
-      }
-      .myul {
-        position: relative;
-        list-style-type: none;
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-        width: 100%;
-        .myli {
-          position: relative;
-          list-style-type: none;
-          padding: 0;
-          margin: 0;
-          width: 100%;
-        }
-      }
-      .el-table .warning-row {
-        background: #f5f7fa !important;
-        // background: oldlace !important;
-      }
-
-      .el-table .success-row {
-        background: #f0f9eb !important;
-      }
+    switch(Number(result.code)){
+      case 0:
+        this.companyArr = result.data.companyArr || []
+        break
+      default:
+        this.state.error = true
+        this.state.message = result.message
+        break
     }
   }
-}
-</style>
+};
+</script>

src/utils/auth.js

@@ -13,7 +13,6 @@ export function removeCode(){
   return window.localStorage.removeItem(CODE_KEY)
 }
 
-
 export function getParameterByName(name) {
   var url = window.location.href;
   name = name.replace(/[\[\]]/g, '\\$&');
@@ -23,3 +22,32 @@ export function getParameterByName(name) {
   if (!results[2]) return '';
   return decodeURIComponent(results[2].replace(/\+/g, ' '));
 }
+
+
+// const errorData = {"code":1004,"message":"未获取到用户数据"}
+// const data =  {
+// 	"code": 0,
+// 	"message": "获取成功",
+// 	"data": {
+// 		"id": "1",
+// 		"openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
+// 		"mobile": "",
+// 		"gender": "0",
+// 		"nickname": "",
+// 		"avatar": "",
+// 		"subscribe_time": "2022-12-21 15:52:14",
+// 		"addr": "",
+// 		"status": "1",
+// 		"companyArr": [
+//         {"companyNo":"GS2302231323386950","companyName":"北京泓源广诚国际商贸有限公司"},
+//         {"companyNo":"GS2302231124114965","companyName":"北京普润心堂商贸有限公司"},
+//         {"companyNo":"GS2302231125079621","companyName":"北京百辰荣达国际科贸有限公司"},
+//         {"companyNo":"GS2203161855277894","companyName":"北京万宇恒通国际科贸有限公司"}
+//       ],
+// 		"addtime": "2023-04-10 18:11:07",
+// 		"updatetime": "2023-04-11 09:37:53"
+// 	}
+// }
+
+
+// export const mockData = errorData