chart

src/components/search.vue

@@ -15,20 +15,21 @@
         <div class="Content">
             <div class="Title">时间纬度</div>
             <div class="padding-left-15 btns">
-                <button @click="changeDate(index)" v-for="(item,index) in btns" :key="index" :class="index == active ? 'active' : ''">
-                    {{item}}
+                <button @click="changeDate(v)" v-for="(v,i) in btns" :key="i" :class="{active:v == selectDate}">
+                    {{v}}
                 </button>
             </div>
         </div>
         <div class="Content" >
             <div class="Title">日期范围</div>
-            <div style="flex:1;display:flex;">
-                <div class="padding-left-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;">
-                    <datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-change="searchData($event,1)"></datetime>
+            <div style="flex:1;display:flex;" class="DATE">
+                <div class="padding-left-15 dateTime">
+                    <datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-confirm="searchData($event,1)"></datetime>
                     <!-- <i class='iconfont icon-right'></i> -->
                 </div>
-                <div class="padding-right-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;">
-                    <datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-change="searchData($event,2)"></datetime>
+                <span class="line"/>
+                <div class="padding-right-15 dateTime">
+                    <datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-confirm="searchData($event,2)"></datetime>
                     <!-- <i class='iconfont icon-right'></i> -->
                 </div>
             </div>
@@ -47,7 +48,7 @@ export default {
   data () {
     return {
         btns:['本日','本周','本月','本年'],
-        active:2,
+        selectDate:"本月",
         inputValue:'',
         selectValue:'全部'
     }
@@ -104,10 +105,11 @@ export default {
           }
           this.global.$emit('searchData');
       },
-      changeDate(index){
-          this.active = index;
+      changeDate(name){
+        this.selectDate = name;
         this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
-          this.search.dBeginDate = Util.getDate(this.btns[index]);
+        this.search.dBeginDate = Util.getDate(name);
+        this.global.$emit('searchData');
       },
       changeSelect(e){
         this.selectValue = this.status[e.target.selectedIndex].sStatus;
@@ -125,7 +127,7 @@ export default {
       }
   },
   mounted(){
-    window.d = this;
+    window.DATA = this;
   },
   components: {
     Search,
@@ -151,6 +153,17 @@ export default {
             .Title{
                 width:50px;text-align:center;font-size:12px;
             }
+            >.DATE{
+                justify-content: space-around;
+                >.line{
+                    width: 20px;
+                    margin:0 -50px;
+                    background: #03f315;
+                    height: 4px;
+                    align-self: center;
+                    border-radius: 50px;
+                }
+            }
         }
         .gradient{
             background: linear-gradient(90deg,#8470FF, #2d8cf0, #00B2EE)

src/libs/apiMap.js

@@ -65,7 +65,10 @@ const methodMap = {
    /**
     * tiip 小程序
     */
-   getTtipTotalamount:{url:apiURL('default')+'/bianalysis/totalamount/',method:'get'},
+   getTtipTotalamount:{url:'/bianalysis/totalamount/',method:'get',host:"default"},
+   getTtipSellinfo:{url:'/bianalysis/sellinfo/',method:'get',host:"default"},
+   getTiipSalesinfo:{url:'/bianalysis/salesinfo/',method:'get',host:"default"},
+   getTiipPayinfo:{url:"/bianalysis/payinfo/",method:"get",host:"default"},
 
 };
 export default methodMap;

src/libs/axios.js

@@ -41,7 +41,7 @@ AsInst.interceptors.response.use(response => {
   // }
   return response;
 }, (error) => {
-  if(error.response.data.hasOwnProperty('error_data')){
+  if(error.response.data&&error.response.data.hasOwnProperty('error_data')){
     vm.$vux.confirm.show({
       title:"提示",
       content:error.response.data.error_title,

src/libs/http.js

@@ -69,16 +69,16 @@ Http.install = function (Vue) {
       }).catch((error) => {
         if (error.status === 200) {
           if (!error.data) {
-            console.log('Customize Notice', error);
+            console.log('Customize Notice post_1', error);
           } else if (error.data && error.data.code == '0') {
             resolve(error.data)
-            console.log('Customize Notice', error);
+            console.log('Customize Notice post_2', error);
           }
         } else if (error.status === 500) {
           resolve(response.data);
-          console.log('Customize Notice', error);
+          console.log('Customize Notice post_3', error);
         } else {
-          console.log('Customize Notice', error);
+          console.log('Customize Notice post_4', error);
         }
         closeLoading();
         reject(error);
@@ -109,13 +109,13 @@ Http.install = function (Vue) {
       }).catch((error) => {
         if (error.status === 200) {
           if (!error.data) {
-            console.log('Customize Notice', error);
+            console.log('Customize Notice get_1', error);
           }
         } else if (error.status === 500) {
           resolve(response.data);
-          console.log('Customize Notice', error);
+          console.log('Customize Notice get_2', error);
         } else {
-          console.log('Customize Notice', error);
+          console.log('Customize Notice get_3', error);
         }
         closeLoading();
         reject(error);

src/router/index.js

@@ -284,7 +284,7 @@ let tipRoutes = [
     path:"/main",
     children:[
       {
-        path:"/tiip/IntReportForms/:iProjectId/:userId",
+        path:"/tiip/IntReportForms/:userId",
         name:"IntReportForms",
         component:()=>import("@/view/tiip/IntReportForms/index.vue"),
         meta:{

src/view/shopVersion/form/empAna/index.vue

@@ -101,7 +101,6 @@ export default {
         })
     },
     async mounted(){
-        window.d = this;
         this.$store.dispatch('saveUserId',this.$route.params.userId);
         window.addEventListener("resize",()=>{
             setTimeout(async ()=>{

src/view/tiip/IntReportForms/Repayment.vue

+<style lang="less">
+
+</style>
+<template>
+    <div id="repayment">
+
+    </div>
+</template>
+<script>
+export default {
+    name:"repayment",
+    data(){
+        return{
+            
+        }
+    },
+}
+</script>

src/view/tiip/IntReportForms/cost.vue

+<style lang="less">
+
+</style>
+<template>
+    <div id="cost">
+
+    </div>
+</template>
+<script>
+export default {
+    name:"cost",
+    data(){
+        return{
+            
+        }
+    },
+}
+</script>

src/view/tiip/IntReportForms/empAna.vue

+<style lang="less">
+    @import url("../../../styles/common.less");
+    #empAna{
+        background:#dce9fe;
+        >.CONTENT{
+            .iCard{
+                height:260px;
+                >p{
+                    margin:0;
+                    height:30px;
+                    line-height: 30px;
+                    background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
+                    color: #fff;
+                    text-align: center;
+                }
+                &:last-child{
+                    margin-bottom:8px;
+                }
+            }
+        }
+        .noData{
+            height:calc(100% - 30px);
+            width:100%;
+            img{
+                width:100%;
+            }
+        }
+    }
+</style>
+<template>
+    <div id="empAna">
+        <div class="HEADER">
+            <searchComponent :search="search" />
+        </div>
+        <div class="CONTENT">
+            <div class="iCard" ref="chart1">
+                <p>前十名员工（联动）</p>
+                <canvas id="chart1" v-show="chartData1.length > 0" width="400" height="260" style="width:100%;height:240px; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></canvas>
+                <div class="noData" v-if="chartData1.length <= 0">
+                    <img src="@/assets/noData.jpg" class="_img" alt="">
+                </div>
+            </div>
+            <div class="iCard" ref="chart2">
+                <p>{{title}}每月回款率</p>
+                <canvas id="chart2" v-show="chartData2.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
+                <div class="noData" v-if="chartData2.length <= 0">
+                    <img src="@/assets/noData.jpg" class="_img" alt="">
+                </div>
+            </div>
+            <div class="iCard" ref="chart3">
+                <p>{{title}}按月统计订单金额</p>
+                <canvas id="chart3" v-show="chartData3.length > 0" width="400" height="260" style="width:100%;height:240px;"></canvas>
+                <div class="noData" v-if="chartData3.length <= 0">
+                    <img src="@/assets/noData.jpg" class="_img" alt="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import Util from '@/libs/util.js'
+import searchComponent from "@/components/search"
+import { employees } from '@/view/shopVersion/form/empAna/mixins/employees'
+import { receivable } from '@/view/shopVersion/form/empAna/mixins/receivable'
+import { orderAmount } from '@/view/shopVersion/form/empAna/mixins/orderAmount'
+import { setTimeout } from 'timers';
+export default {
+    name:"empAna",
+    components:{searchComponent},
+    mixins: [employees,receivable,orderAmount],
+    data(){
+        return{
+            search:{
+                dBeginDate:Util.dateFormat(new Date(),"yyyy-MM-01"),
+                dEndDate:Util.dateFormat(new Date(),"yyyy-MM-dd"),
+            },
+            typeList:{time:true},
+            direction:'vertical',
+            tempChartData2:[],
+            tempChartData3:[],
+            title:"",
+        }
+    },
+    async mounted(){
+        window.addEventListener("resize",()=>{
+            setTimeout(async ()=>{
+                this.renderResize();
+                if(this.chartData1.length>0){
+                    this.chart1.changeSize(this.$refs['chart1'].offsetWidth);
+                    this.chart1.destroy();
+                }
+                if(this.chartData2.length > 0){
+                    this.chart2.changeSize(this.$refs['chart2'].offsetWidth); // 清除
+                    this.chart2.destroy();
+                }
+                if(this.chartData3.length > 0){
+                    this.chart3.changeSize(this.$refs['chart3'].offsetWidth); // 清除
+                    this.chart3.destroy();
+                }
+
+                if(this.chartData1.length > 0){
+                    await this.renderChart1();
+                }
+                if(this.chartData2.length > 0){
+                    await this.renderChart2();
+                }
+                if(this.chartData3.length > 0){
+                    await this.renderChart3();
+                }
+            })
+        })
+
+        this.$nextTick(async ()=>{
+            this.renderResize();
+            await this.getData();
+            if(this.chartData1.length>0){
+                await this.renderChart1()
+            }
+            if(this.chartData2.length>0){
+                await this.renderChart2()
+            }
+            if(this.chartData3.length>0){
+                await this.renderChart3()
+            }
+        })
+
+        this.global.$off("searchData");
+        this.global.$on("searchData",async ()=>{
+            this.chartData1=[]
+            this.chartData2=[]
+            this.chartData3=[]
+            
+            if(this.chartData1.length > 0){
+                await this.chart1.destroy();
+            }
+            if(this.chartData2.length > 0){
+                await this.chart2.destroy();
+            }
+            if(this.chartData3.length > 0){
+                await this.chart3.destroy();
+            }
+            await this.getData();
+            if(this.chartData1.length > 0){
+                await this.renderChart1();
+            }
+            if(this.chartData2.length > 0){
+                await this.renderChart2();
+            }
+            if(this.chartData3.length > 0){
+                await this.renderChart3();
+            }
+
+        });
+    },
+    methods:{
+        renderResize(){
+            let width = document.documentElement.clientWidth;
+            let height = document.documentElement.clientHeight;
+            if(width > height) {
+                this.direction = 'cross';
+            }else{
+                this.direction = 'vertical';
+            }
+        },
+        async getData(){
+            var res=await this.request("getTiipSalesinfo",{
+                data:{
+                    dStartDate:this.search.dBeginDate,
+                    dEndDate:this.search.dEndDate,
+                    sSalesName:"环思软件",
+                }
+            },"加载中",{})
+            this.title=res.set1&&res.set1[0]&&res.set1[0].sSalesName
+            this.chartData1=res.set1&&res.set1.map(v=>{
+                return{
+                    sSalesName:v.sSalesName,
+                    nAmount:v.nAmount,
+                    iSalesId:v.sSalesName,
+                }
+            })||[]
+
+            this.tempChartData2 = res.set2&&res.set2.map(v=>{
+                return{
+                    nPaydAmount:v.nPaydAmount,
+                    sMonth:v.sMonth,
+                    iSalesId:v.sSalesName,
+                }
+            })||[];
+            this.tempChartData3 = res.set3&&res.set3.map(v=>{
+                return{
+                    iSalesId:v.sSalesName,
+                    sMonth:v.sMonth,
+                    nAmount:v.nAmount,
+                }
+            })||[];
+            this.chartData2=res.set2&&res.set2.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)||[]
+            this.chartData3=res.set3&&res.set3.filter(v=>this.chartData1.length>0&&v.iSalesId==this.chartData1[0].iSalesId)||[]
+        },
+    },
+}
+</script>

src/view/tiip/IntReportForms/index.vue

@@ -5,7 +5,12 @@
         height:100%;
         display:flex;
         flex-direction: column;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
         .HEADER{
+          flex-shrink: 0;
           padding:10px 10px 0 10px;
           .items{
             display: flex;
@@ -53,6 +58,47 @@
             }
           }
         }
+        .TAB{
+          padding:10px;
+          flex-shrink: 0;
+          .buttonTab {
+            > a{
+              color:#708bf6;
+            }
+            > a.vux-button-tab-item-first{
+              border-top-left-radius: 5px;
+              border-bottom-left-radius: 5px;
+            }
+            > a.vux-button-tab-item-last{
+              border-top-right-radius: 5px;
+              border-bottom-right-radius: 5px;
+            }
+            > a.vux-button-tab-item-first:after{
+              border:1px solid #708bf6;
+              border-top-left-radius: 5px;
+              border-bottom-left-radius: 5px;
+              color:#708bf6;
+            }
+            > a.vux-button-tab-item-middle:after{
+              border:1px solid #708bf6;
+              color:#708bf6;
+            }
+            > a.vux-button-tab-item-last:after{
+              border-top-right-radius: 5px;
+              border-bottom-right-radius: 5px;
+              border:1px solid #708bf6;
+            }
+            > a.vux-button-group-current{
+              background: #708bf6;
+              color:white;
+            }
+          }
+          
+        }
+        .content{
+            flex-grow:1;
+            overflow: auto;
+        }
     }
 </style>
 <template>
@@ -79,28 +125,42 @@
                 </swiper-item>
             </swiper>
         </div>
+        <div class="TAB">
+            <button-tab class="buttonTab" :value="activeBtn" >
+                <button-tab-item @on-item-click="situation='salesStatistics'">销售统计</button-tab-item>
+                <button-tab-item @on-item-click="situation='empAna'">员工排行</button-tab-item>
+                <button-tab-item @on-item-click="situation='revenue'">收支分析</button-tab-item>
+                <button-tab-item @on-item-click="situation='Repayment'">回款额</button-tab-item>
+                <button-tab-item @on-item-click="situation='cost'">费用分析</button-tab-item>
+            </button-tab>
+        </div>
+        <div class="content">
+            <component :is="situation" />
+        </div>
     </div>
 </template>
 <script>
 import Util from '@/libs/util.js';
 import {mapState} from 'vuex';
 import {Swiper,SwiperItem,ButtonTab, ButtonTabItem } from 'vux';
+import salesStatistics from "./salesStatistics"
+import empAna from "./empAna"
+import revenue from "./revenue"
 export default {
     name:"IntReportForms",
-    components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem},
+    components:{Swiper,SwiperItem,ButtonTab, ButtonTabItem,salesStatistics,empAna,revenue},
     data(){
         return{
             list:[],
+            activeBtn:0,
+            situation:"salesStatistics",
         }
     },
     created(){
         this.$store.dispatch('saveUserId',this.$route.params.userId);
-        this.$store.dispatch('setIproject',this.$route.params.iProjectId);
     },
     computed:{
-        ...mapState({
-            iProjectId:state => state.app.iProjectId,
-        })
+        
     },
     mounted(){
         this.$nextTick(()=>{
@@ -109,8 +169,65 @@ export default {
     },
     methods:{
         async init(){
-            var value=await this.request("getTtipTotalamount",{},"加载中",{iProjectId:this.iProjectId});
-            console.log(value)
+            var res=await this.request("getTtipTotalamount",{},"加载中",{})
+            this.list=[
+                {
+                child:[
+                    {
+                        title:'本日销售额',
+                        rate:(res.set1[0].nTodaySellAmountRate||0).toLocaleString(),
+                        price:(res.set1[0].nTodaySellAmount||0).toLocaleString()
+                    },
+                    {
+                        title:'本日实收',
+                        rate:(res.set1[0].nTodaySellProfitRate||0).toLocaleString(),
+                        price:(res.set1[0].nTodaySellProfit||0).toLocaleString()
+                    }
+                ]
+                },
+                {
+                child:[
+                    {
+                        title:'本周销售额',
+                        rate:(res.set1[0].nWeekSellAmountRate||0).toLocaleString(),
+                        price:(res.set1[0].nWeekSellAmount||0).toLocaleString()
+                    },
+                    {
+                        title:'本周实收',
+                        rate:(res.set1[0].nWeekSellProfitRate||0).toLocaleString(),
+                        price:(res.set1[0].nWeekSellProfit||0).toLocaleString()
+                    }
+                ]
+                },
+                {
+                child:[
+                    {
+                        title:'本月销售额',
+                        rate:(res.set1[0].nMonthSellAmountRate||0).toLocaleString(),
+                        price:(res.set1[0].nMonthSellAmount||0).toLocaleString()
+                    },
+                    {
+                        title:'本月实收',
+                        rate:(res.set1[0].nMonthSellProfitRate||0).toLocaleString(),
+                        price:(res.set1[0].nMonthSellProfit||0).toLocaleString()
+                    }
+                ]
+                },
+                {
+                child:[
+                    {
+                        title:'本年销售额',
+                        rate:(res.set1[0].nYearSellAmountRate||0).toLocaleString(),
+                        price:(res.set1[0].nYearSellAmount||0).toLocaleString()
+                    },
+                    {
+                        title:'本年实收',
+                        rate:(res.set1[0].nYearSellProfitRate||0).toLocaleString(),
+                        price:(res.set1[0].nYearSellProfit||0).toLocaleString()
+                    }
+                ]
+                }
+            ]
         },
     }
 }

src/view/tiip/IntReportForms/revenue.vue

+<style lang="less">
+    @import url("../../../styles/common.less");
+
+</style>
+<template>
+    <div id="revenue">
+        <searchComponent :search='search' />
+        <div class="iCard">
+            <div  ref='chart' style="width:100%;height:150px;"/>
+            <table>
+                <tr>
+                    <td><div> <span>支</span> </div></td>
+                    <td><div> <span>总支出</span> </div></td>
+                    <td><div></div></td>
+                    <td><div> <span>{{allPay}}</span> </div></td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</template>
+<script>
+import Util from '@/libs/util.js'
+import { Confirm } from 'vux'
+import searchComponent from '@/components/search'
+import echarts from 'echarts';
+
+export default {
+    name:"revenue",
+    components:{searchComponent},
+    data(){
+        return{
+            search:{
+                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
+                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
+            },
+
+            chart:null,
+            list:[],
+            allPay:0,
+        }
+    },
+    mounted(){
+        this.$nextTick(()=>{
+            this.chart=this.$echarts.init(this.$refs.chart)
+            this.searchData()
+        })
+
+        this.global.$off('searchData');
+        this.global.$on('searchData',()=>{
+            this.searchData()
+        })
+    },
+    methods:{
+        async searchData(){
+            this.list=await this.request("getTiipPayinfo",{
+                data:{
+                    dStartDate:this.search.dBeginDate,
+                    dEndDate:this.search.dEndDate
+                }
+            },"加载中",{})
+            this.allPay=0
+            // this.list.forEach(v=>{
+            //     this.allPay+=v.nAmount
+            // })
+        },
+    },
+}
+</script>