Merge branch 'master' of ssh://47.110.145.204:2222/godwithdh/wx_h5

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:'/bianalysis/totalamount/',method:'get',host:'default'},
+   getTipTotalamount:{url:'/bianalysis/totalamount/',method:'get',host:"default"},
+   getTipSellinfo:{url:'/bianalysis/sellinfo/',method:'get',host:"default"},
+   getTipSalesinfo:{url:'/bianalysis/salesinfo/',method:'get',host:"default"},
+   getTipPayinfo:{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("getTipSalesinfo",{
+                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("getTipTotalamount",{},"加载中",{})
+            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("getTipPayinfo",{
+                data:{
+                    dStartDate:this.search.dBeginDate,
+                    dEndDate:this.search.dEndDate
+                }
+            },"加载中",{})
+            this.allPay=0
+            // this.list.forEach(v=>{
+            //     this.allPay+=v.nAmount
+            // })
+        },
+    },
+}
+</script>

src/view/tiip/IntReportForms/salesStatistics.vue

+<style lang="less" scoped>
+    #statistics{
+        background:#f2f2f2;
+        height:100%;
+        display: flex;
+        flex-direction: column;
+        .Content{
+            height:100%;
+            // height:1px;
+            // flex-grow: 1;
+            // overflow: auto;
+            // -webkit-overflow-scrolling: touch;
+        }
+        .Content>.double{
+            display:flex;
+            >.card{
+                flex-grow:1;
+                width:50%;
+            }
+        }
+        .card{
+            border-radius: 6px;
+            background:#fff;
+            box-shadow: 1px 1px 10px -1px #888;
+            overflow: hidden;
+            margin:6px;
+            position:relative;
+            .imgBC{
+                position:absolute;
+                top:32px;
+            }
+            img{
+                max-height: 80%;
+                left: 50%;
+                transform: translate(-50%,0);
+            }
+            >.head{
+                background: linear-gradient(90deg,#708bf6, #2d8cf0, #00B2EE);
+                padding:5px 0;
+                color:#fff;
+                text-align: center;
+            }
+            >.foot{
+                display:flex;
+                font-size:10px;
+                >div{
+                    flex-grow:1;
+                    width:50%;
+                    margin:4px 0;
+                    text-align: center;
+                    >p{
+                        margin:2px 0;
+                        &:last-child{
+                            color:#009BDE;
+                        }
+                    }
+                }
+            }
+        }
+    }
+</style>
+<template>
+    <div id="statistics">
+        <searchComponent :search='search' />
+        <div class="Content">
+            <div class='double'>
+                <div class="card">
+                    <div class="head">月总订单金额同比率</div>
+                    <div  ref='chart1' style="width:100%;height:150px;"/>
+                </div>
+                <div class="card">
+                    <div class="head">月总订单金额环比率</div>
+                    <div  ref='chart2' style="width:100%;height:150px;"/>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="head">销售排行</div>
+                <div ref='chart3' :style="{width:'100%',height:'180px',opacity:chartData.set3.length>0?'1':'0'}" />
+                <img v-if="chartData.set3.length==0" src="@/assets/noData.jpg" class="imgBC" />
+                <div class="foot">
+                    <div style="border-right:1px solid #009BDE;">
+                        <p>销售笔数</p>
+                        <p >{{chartData.set4.iSellCount}}</p>
+                    </div>
+                    <div>
+                        <p>销售额</p>
+                        <p>￥{{chartData.set4.nSellAmount}}万</p>
+                    </div>
+                </div>
+            </div>
+            <div class="card">
+                <div class="head">产品颜色销售排行</div>
+                <div ref='chart5' :style="{width:'100%',height:'230px',opacity:chartData.set5.length>0?'1':'0'}" />
+                <img v-if="chartData.set5.length==0" src="@/assets/noData.jpg" class="imgBC" />
+            </div>
+            <div class="card">
+                <div class="head">产品销售排行</div>
+                <div ref='chart6' :style="{width:'100%',height:'230px',opacity:chartData.set6.length>0?'1':'0'}" />
+                <img v-if="chartData.set6.length==0" src="@/assets/noData.jpg" class="imgBC" />
+            </div>
+        </div>
+        
+    </div>
+</template>
+<script>
+import Util from '@/libs/util.js'
+import searchComponent from '@/components/search'
+import { Confirm } from 'vux'
+import { clearTimeout, setTimeout } from 'timers';
+import { toUnicode } from 'punycode';
+import echarts from 'echarts';
+
+export default {
+    name:"salesStatistics",
+    components:{searchComponent},
+    data(){
+        return{
+            search:{
+                dBeginDate:Util.dateFormat(new Date(),'yyyy-MM-01'),
+                dEndDate:Util.dateFormat(new Date(),'yyyy-MM-dd'),
+            },
+            chartData:{
+                nOrderSameRatio:0,
+                nOrderRingRatio:0,
+                set3:[],
+                set4:{
+                    iSellCount:0,
+                    nSellAmount:0,
+                },
+                set5:[],
+                set6:[],
+            },
+            chart1:null,
+            chart2:null,
+            chart3:null,
+            chart5:null,
+            chart6:null,
+        }
+    },
+    created(){
+        window.s=this
+    },
+    activated(){
+        setTimeout(()=>{
+            this.chart1.resize()
+            this.chart2.resize()
+            this.resize(this.chart3,1.15)
+            this.resize(this.chart5,1.35)
+            this.resize(this.chart6,1.35)
+        })
+    },
+    mounted(){
+        window.h=this
+
+        this.createChart('chart1')
+        this.createChart('chart2')
+        this.createChart('chart3')
+        this.createChart('chart5','set5',true)
+        this.createChart('chart6','set6',true)
+        window.addEventListener('resize',()=>{
+            setTimeout(()=>{
+                this.chart1.resize()
+                this.chart2.resize()
+                this.resize(this.chart3,1.15)
+                this.resize(this.chart5,1.35)
+                this.resize(this.chart6,1.35)
+            })
+        })
+
+        this.searchData();
+        
+        this.global.$off('searchData');
+        this.global.$on('searchData',()=>{
+            this.searchData()
+        })
+    },
+    methods:{
+        createChart(name,kield,isLinstener){
+            var myChart=this.$echarts.init(this.$refs[name])
+            if(isLinstener){
+                let time=0
+                myChart.getZr().on('mousedown',param=>{
+                    const pointInPixel = [param.offsetX, param.offsetY]
+                    if (myChart.containPixel('grid', pointInPixel)) {
+                        let index = myChart.convertFromPixel({ seriesIndex: 0 }, [param.offsetX, param.offsetY])[0]
+                        time=setTimeout(()=>{
+                            var data=this.chartData[kield]
+                            var options=myChart.getOption()
+                            options.tooltip[0].show=false
+                            myChart.setOption(options)
+                            this.$vux.confirm.show({
+                                title:"提示",
+                                content:"是否查看详情",
+                                onConfirm:()=>{
+                                    this.$store.dispatch('setChartHearData',data[index]).then(()=>{
+                                        this.$router.push({name:"chartMmcolorsaleDetail"});
+                                    })
+                                    options.tooltip[0].show=true
+                                    myChart.setOption(options)
+                                },
+                                onCancel(){
+                                    options.tooltip[0].show=true
+                                    myChart.setOption(options)
+                                }
+                            })
+                        },500)
+                    }
+                })
+                myChart.getZr().on('mousemove',()=>{
+                    clearTimeout(time)
+                })
+                myChart.getZr().on('mouseup',()=>{
+                    clearTimeout(time)
+                })
+            };
+            this[name]=myChart
+        },
+        resize(chart,rate){
+            var options=chart.getOption()
+            if(!options)return;
+            options.dataZoom[0].end=options.dataZoom[0].start+(window.innerWidth*rate)/options.xAxis[0].data.length
+            chart.setOption(options)
+            chart.resize()
+        },
+
+        async searchData(){//搜索数据
+            await this.getChartData()
+            this.showValue()
+        },
+        async getChartData(){
+            var value =await this.request('getTipSellinfo',{
+                params:{
+                    dStartDate:this.search.dBeginDate,
+                    dEndDate:this.search.dEndDate
+                }
+            },true,{iProjectId:this.iProjectId})
+            Object.assign(this.chartData,{
+                nOrderSameRatio:Math.round((value.set1&&value.set1[0]&&value.set1[0].nOrderSameRatio||0)*100)/100,
+                nOrderRingRatio:Math.round((value.set2&&value.set2[0]&&value.set2[0].nOrderRingRatio||0)*100)/100,
+                set3:typeof value.set3=='object'&&value.set3.length>0&&value.set3.map(v=>{
+                    v.value=Math.round(v.nAmount/100)/100
+                    return v
+                })||[],
+                set4:{
+                    iSellCount:value.set4&&value.set4[0]&&value.set4[0].iSellCount||0,
+                    nSellAmount:(Math.round((value.set4&&value.set4[0]&&value.set4[0].nSellAmount||0)/100)/100).toLocaleString(),
+                },
+                set5:typeof value.set5=='object'&&value.set5.length>0&&value.set5||[],
+                set6:typeof value.set6=='object'&&value.set6.length>0&&value.set6||[],
+            })
+
+        },
+        showValue(){
+            this.drawRing({
+                e:this.chart1,
+                value:this.chartData.nOrderSameRatio
+            })
+            this.drawRing({
+                e:this.chart2,
+                value:this.chartData.nOrderRingRatio
+            })
+            this.drawLing({
+                e:this.chart3,
+                value:this.chartData.set3
+            })
+            this.drawLing2({
+                e:this.chart5,
+                value:this.chartData.set5
+            })
+            this.drawLing2({
+                e:this.chart6,
+                value:this.chartData.set6
+            })
+        },
+        drawRing(data){//仪表盘
+            data.e.setOption({
+                tooltip : {
+                    show:false,
+                },
+                series: [
+                    {
+                        type: 'gauge',
+                        data: [{value: data.value, name: '比例'}],
+                        radius:"90%",
+                        min:-100,
+                        max:100,
+                        title:{
+                            fontSize:10
+                        },
+                        detail:{
+                            fontSize:11,
+                            formatter:'{value}%',
+                            padding:[50,0,0,0],
+                        },
+                        axisLine:{
+                            show:false,
+                            lineStyle:{
+                                color:[[0.5,'red'],[0.75,'#1CB712'],[0.90,'#156F8E'],[1,'#152989']],
+                                width:15
+                            }
+                        },
+                        splitLine:{
+                            length:15
+                        },
+                        axisLabel:{
+                            fontSize:9,
+                            distance:1,
+                        },
+                        itemStyle:{
+                            opacity:0.3,
+                        },
+                    }
+                ]
+            })
+        },
+        drawLing(data){//折线
+            data.e.setOption({
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#111'
+                        }
+                    },
+                    formatter:val=>{
+                        return data.value[val[0].dataIndex].nAmount
+                    }
+                },
+                toolbox: {
+                    feature: {
+                        restore: {show: true},
+                    },
+                },
+                grid: {
+                    top:30,
+                    height:130,
+                    right:10,
+                },
+                xAxis: {
+                    type:"category",
+                    data:data.value.map(v=>v.sYearMonth),
+                    axisPointer:{
+                        type:"shadow"
+                    },
+                    axisTick:{
+                        alignWithLabel: true
+                    },
+                    axisLabel: {
+                        interval:0 
+                    },
+                    minInterval:10,
+                },
+                yAxis: {
+                    type: 'value',
+                    name:"金额(万)",
+                    offset:-10,
+                },
+                dataZoom: [{
+                    type: 'inside',
+                    xAxisIndex: 0,
+                    show: false, //flase直接隐藏图形
+                    filterMode: 'empty',
+                    start: 0,//滚动条的起始位置
+                    end: (window.innerWidth*1.15)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+                }],
+                series: [
+                    {
+                        id: 'a',
+                        type: 'line',
+                        smooth: true,
+                        symbolSize: 10,
+                        data: data.value.map(v=>v.value),
+                        label:{
+                            show:true,
+                            formatter:val=>{
+                                return `${val.data}万`
+                            }
+                        },
+                        itemStyle:{
+                            normal:{
+                                color:'#708bf6'
+                            }
+                        }
+                    }
+                ]
+            })
+        },
+        drawLing2(data){
+            data.e.setOption({
+                color:['#5cadff','#1c2438'],
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#111'
+                        }
+                    }
+                },
+                toolbox: {
+                    feature: {
+                        // dataView: {show: true, readOnly: false},
+                        // magicType: {show: true, type: ['line', 'bar']},
+                        restore: {show: true},
+                        // saveAsImage: {show: true}
+                    },
+                },
+                grid: {
+                    left: '2%',   // 与容器左侧的距离
+                    right: '2%', // 与容器右侧的距离
+                    height:160,
+                    containLabel: true
+                },
+                legend: {
+                    data:['金额','数量'],
+                    x: 'left'
+                },
+                xAxis: [{
+                    type: 'category',
+                    data: data.value.map(v=>v.sCustomerName),
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    axisTick: {
+                        alignWithLabel: true
+                    },
+                    axisLabel: {
+                        interval:0 
+                    },
+                }],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '金额',
+                        axisLabel: {
+                            formatter: '{value}'
+                        },
+                        scale:true,
+                        axisLine:{
+                            lineStyle:{
+                                color:'#5CADFF',
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '数量',
+                        scale:true,
+                        axisLabel: {
+                            formatter: '{value}'
+                        }
+                    }
+                ],
+                series: [
+                    {
+                        name:'金额',
+                        type:'bar',
+                        data:data.value.map(v=>v.nAmount),
+                        barWidth:32,
+                        color:new echarts.graphic.LinearGradient(0.5, 0, 0.5, 1, [{
+                                offset: 0,
+                                color: '#708bf6'
+                            }, {
+                                offset: 1,
+                                color: '#00B2EE'
+                        }])
+                    },
+                    {
+                        name:'数量',
+                        type:'line',
+                        yAxisIndex: 1,
+                        data:data.value.map(v=>v.nQty),
+                        itemStyle:{
+                            normal:{
+                                color:'#708bf6'
+                            }
+                        }
+                    }
+                ],
+                dataZoom: [{
+                    type: 'inside',
+                    show: true, //flase直接隐藏图形
+                    xAxisIndex: [0],
+                    left: '9%', //滚动条靠左侧的百分比
+                    start: 0,//滚动条的起始位置
+                    end: (window.innerWidth*1.35)/data.value.length //滚动条的截止位置（按比例分割你的柱状图x轴长度）
+                }],
+            })
+        }
+    },
+}
+</script>
+