|
@@ -0,0 +1,492 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN" style="font-size: 50px;">
|
|
|
+<head>
|
|
|
+ <title>本月项目数量采购行业排行榜</title>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="format-detection" content="telephone=yes"/>
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <script src="/big-member/js/rem.js"></script>
|
|
|
+ <!--S-当前页面的css资源-->
|
|
|
+ <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/reset-css/5.0.1/reset.min.css />
|
|
|
+ <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/index.css />
|
|
|
+ <link rel="stylesheet" href=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/icon/local.css />
|
|
|
+ <!--E-当前页面的css资源-->
|
|
|
+ <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/big-member/weixin/css/public.css?v={{Msg "seo" "version"}}'>
|
|
|
+ <link rel="stylesheet" href='{{Msg "seo" "cdn"}}/big-member/weixin/css/j-icons.css?v={{Msg "seo" "version"}}'>
|
|
|
+ <style>
|
|
|
+ .j-container{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .table_{
|
|
|
+ width: 7rem;
|
|
|
+ border: 0.02rem solid #E5E5E5;
|
|
|
+ margin: 0 auto;
|
|
|
+ /* margin-top: 0.32rem; */
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .fix_{
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ top: 0;
|
|
|
+ padding-top: 0.32rem;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .fix_analysis{
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ padding-top: 0.32rem;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ }
|
|
|
+ .fix_analysis .table_analysis{
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ margin-top: 0.24rem;
|
|
|
+ }
|
|
|
+ .fix_analysis .sort_box{
|
|
|
+ margin-top: 0 !important;
|
|
|
+ }
|
|
|
+ .table_ th{
|
|
|
+ border: 0.02rem solid #E5E5E5;
|
|
|
+ height: 0.88rem;
|
|
|
+ background: #F5F6F7;
|
|
|
+ color: #9B9CA3;
|
|
|
+ font-size: 0.26rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .table_ tr{
|
|
|
+ height: 0.88rem;
|
|
|
+ }
|
|
|
+ .table_ td{
|
|
|
+ border: 0.02rem solid #E5E5E5;
|
|
|
+ height: 0.88rem;
|
|
|
+ color: #171826;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ text-align: center;
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: middle;
|
|
|
+ word-break: break-all;
|
|
|
+
|
|
|
+ }
|
|
|
+ .table_analysis{
|
|
|
+ width: 7rem;
|
|
|
+ border: 0.02rem solid #E5E5E5;
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ margin-top: 0.24rem;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .table_analysis th{
|
|
|
+ border: 0.02rem solid #E5E5E5;
|
|
|
+ height: 0.88rem;
|
|
|
+ background: #F5F6F7;
|
|
|
+ color: #9B9CA3;
|
|
|
+ font-size: 0.26rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: middle;
|
|
|
+
|
|
|
+ }
|
|
|
+ .table_analysis td{
|
|
|
+ border: 0.02rem solid #E5E5E5;
|
|
|
+ height: 0.88rem;
|
|
|
+ color: #171826;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ text-align: center;
|
|
|
+ display: table-cell;
|
|
|
+ vertical-align: middle;
|
|
|
+ word-break: break-all;
|
|
|
+
|
|
|
+ }
|
|
|
+ .table_analysis tr{
|
|
|
+ height: 0.88rem;
|
|
|
+ }
|
|
|
+ .sort{
|
|
|
+ width: 1.04rem;
|
|
|
+ }
|
|
|
+ .long{
|
|
|
+ width: 3.28rem;
|
|
|
+ }
|
|
|
+ .sort_{
|
|
|
+ width: 1.02rem;
|
|
|
+ }
|
|
|
+ .long_{
|
|
|
+ width: 2.4rem;
|
|
|
+ }
|
|
|
+ .middle{
|
|
|
+ width: 1.92rem;
|
|
|
+ }
|
|
|
+ .t_right{
|
|
|
+ text-align: right !important;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 0.2rem;
|
|
|
+ }
|
|
|
+ .otners{
|
|
|
+ font-size: 0.26rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ color: #9B9CA3;
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ margin-top: 0.32rem;
|
|
|
+ margin-bottom: 0.32rem;
|
|
|
+ }
|
|
|
+ .ml-24{
|
|
|
+ margin-left: 0.24rem;
|
|
|
+
|
|
|
+ }
|
|
|
+ .box{
|
|
|
+ padding-top: 1.19rem;
|
|
|
+
|
|
|
+ }
|
|
|
+ .box_analysis{
|
|
|
+ padding-top: 1.59rem;
|
|
|
+ }
|
|
|
+ .others{
|
|
|
+ font-size: 0.26rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ color: #9B9CA3;
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ margin-top: 0.32rem;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .clearfix > .left{
|
|
|
+ float: left;
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ color: #5F5E64;
|
|
|
+ font-size: 0.26rem;
|
|
|
+ line-height: 0.44rem;
|
|
|
+ margin-bottom: 0.32rem;
|
|
|
+
|
|
|
+ }
|
|
|
+ .clearfix > .right{
|
|
|
+ float: left;
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ color: #5F5E64;
|
|
|
+ font-size: 0.26rem;
|
|
|
+ line-height: 0.44rem;
|
|
|
+ margin-left: 0.32rem;
|
|
|
+
|
|
|
+ }
|
|
|
+ .sort_box{
|
|
|
+ margin-top: 0.32rem;
|
|
|
+ }
|
|
|
+ .sort_box .tit{
|
|
|
+ color: #5F5E64;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ float: left;
|
|
|
+ margin-left: 0.24rem;
|
|
|
+ margin-right: 0.16rem;
|
|
|
+ }
|
|
|
+ .sort_box .btn{
|
|
|
+ color: #5F5E64;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ float: left;
|
|
|
+ margin-right: 0.32rem;
|
|
|
+
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #2ABED1 !important;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="j-container">
|
|
|
+ <div id="report_table" class="j-main" v-cloak>
|
|
|
+ <div v-if = "parm=='analysis'" class="box_analysis">
|
|
|
+ <div class="fix_analysis">
|
|
|
+ <div class="sort_box clearfix">
|
|
|
+ <div class="tit">排序:</div>
|
|
|
+ <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}" @click="sort_click(index)">${item}</div>
|
|
|
+ </div>
|
|
|
+ <table class="table_analysis">
|
|
|
+ <thead>
|
|
|
+ <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==3 ,'middle':index==2||index==1}" v-html="item"></th></tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="sort_box clearfix">
|
|
|
+ <div class="tit">排序:</div>
|
|
|
+ <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}" @click="sort_click(index)">${item}</div>
|
|
|
+ </div> -->
|
|
|
+ <table class="table_analysis">
|
|
|
+ <!-- <thead>
|
|
|
+ <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==3 ,'middle':index==2||index==1}" v-html="item"></th></tr>
|
|
|
+ </thead> -->
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item,index) in data_list" >
|
|
|
+ <td class="sort_">${index + 1}</td>
|
|
|
+ <td class="middle">${item.buyclass}</td>
|
|
|
+ <td class="t_right middle">${item.total}</td>
|
|
|
+ <td class="t_right long_">${item.amount}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div class="others" v-if="analysis_num&&analysis_price">客户类型为“其它”:</div>
|
|
|
+ <div class="clearfix" v-if="analysis_num&&analysis_price">
|
|
|
+ <div class="left">项目数量:${analysis_num}个</div>
|
|
|
+ <div class="right">项目金额:${analysis_price}万元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box" v-else>
|
|
|
+ <div class="fix_">
|
|
|
+ <table class="table_ ">
|
|
|
+ <thead>
|
|
|
+ <tr><th v-for="(item,index) in head_list" :class="{'sort': index==0,'long': index==1 || index==2}" v-html="item"></th></tr>
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <table class="table_ ">
|
|
|
+ <!-- <thead>
|
|
|
+ <tr><th v-for="(item,index) in head_list" :class="{'sort': index==0,'long': index==1 || index==2}" v-html="item"></th></tr>
|
|
|
+ </thead> -->
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item,index) in data_list" >
|
|
|
+ <td class="sort">${index + 1}</td>
|
|
|
+ <td class="long">${item.buyerclass}</td>
|
|
|
+ <td class="t_right long">${item.value}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ <div class="otners" v-if="parm=='curMonthCountTop' && num">采购行业为“其它”的项目数量:${num}个</div>
|
|
|
+ <div class="otners" v-if="parm=='curMonthScaleTop' && num">采购行业为“其它”的项目金额:${num}万元</div>
|
|
|
+ <div class="otners" v-if="parm=='averageScaleTop' && num">采购行业为“其它”的项目平均金额:${num}万元</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vue/2.6.11/vue.min.js></script>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/vant/2.12.24/lib/vant.min.js></script>
|
|
|
+<script src=//cdn-common.jianyu360.com/cdn/lib/zepto/1.2.0/zepto.min.js></script>
|
|
|
+<script src='{{Msg "seo" "cdn"}}/big-member/js/utils.js?v={{Msg "seo" "version"}}'></script>
|
|
|
+<script>
|
|
|
+ var vNode_ = {
|
|
|
+ delimiters: ['${', '}'],
|
|
|
+ el: '#report_table',
|
|
|
+ components: {
|
|
|
+
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ tab:0,
|
|
|
+ tabs:['项目数量由高到低','项目金额由高到低'],
|
|
|
+ head_list:['排名','采购行业','项目数量(个)'],
|
|
|
+ data_list:[],
|
|
|
+ parm:'',
|
|
|
+ num:'',
|
|
|
+ analysis_num:'',
|
|
|
+ analysis_price:'',
|
|
|
+ rid:''
|
|
|
+
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.parm = utils.getParam('source')
|
|
|
+ this.rid=utils.getParam('rid')
|
|
|
+ if (this.parm=='curMonthCountTop'){ //数量排行
|
|
|
+ this.head_list=['排名','采购行业','项目数量(个)'];
|
|
|
+ document.title='本月项目数量采购行业排行榜'
|
|
|
+
|
|
|
+ }else if(this.parm=='curMonthScaleTop'){ //规模排行
|
|
|
+ this.head_list=['排名','采购行业','项目金额(万元)'];
|
|
|
+ document.title='本月项目规模采购行业排行榜'
|
|
|
+
|
|
|
+ }else if(this.parm=='averageScaleTop'){ //平均规模排行
|
|
|
+ this.head_list=['排名','采购行业','项目平均金额'+'<br>'+'(万元)'];
|
|
|
+ document.title='本月项目平均规模采购行业排行榜'
|
|
|
+
|
|
|
+ }else if(this.parm=='analysis'){ //定制化客户分布
|
|
|
+ this.head_list=['序号','客户类型','项目数量'+'<br>'+'(个)','项目金额'+'<br>'+'(万元)'];
|
|
|
+ document.title='客户类型分布详情'
|
|
|
+
|
|
|
+ }
|
|
|
+ if(this.parm=='analysis'){
|
|
|
+ this.analysis_data()
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.monthdata()
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ sort_click (index) {
|
|
|
+ if (index == this.tab){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.tab=index
|
|
|
+ if(this.tab==0){//数量排序
|
|
|
+ let data_=this.data_list.sort(function(a,b){return b.total-a.total});
|
|
|
+ this.data_list=data_
|
|
|
+
|
|
|
+ }else{ //金额排序
|
|
|
+ let data_=this.data_list.sort(function(a,b){return b.amount-a.amount});
|
|
|
+ this.data_list=data_
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ analysis_data (){
|
|
|
+ let this_=this
|
|
|
+ let res= JSON.parse(sessionStorage.getItem('getAnalysisResult_'))
|
|
|
+ if (res && res.error_code === 0 && res.data) {
|
|
|
+ let data_ = res.data.customer_scale
|
|
|
+ data_.forEach(ele => {
|
|
|
+ if(ele.amount){
|
|
|
+ ele.amount=(ele.amount / 10000).toFixed(2)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ data_.sort(function(a,b){return b.total-a.total});
|
|
|
+ let newarr = data_.filter(function (item, index) {
|
|
|
+ return !(item['amount'] ==0 && item['total'] ==0 )
|
|
|
+ })
|
|
|
+ this_.data_list=newarr
|
|
|
+ if(res.data.customer_scale_other){
|
|
|
+ this_.analysis_num=res.data.customer_scale_other.total
|
|
|
+ this_.analysis_price=(res.data.customer_scale_other.amount / 10000).toFixed(2)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // this.$toast('请求失败')
|
|
|
+ }
|
|
|
+
|
|
|
+ // $.ajax({
|
|
|
+ // type: 'POST',
|
|
|
+ // url: '/bigmember/marketAnalysis/getAnalysisResult',
|
|
|
+ // data: {
|
|
|
+ // flag:3,
|
|
|
+ // rid: this_.rid,
|
|
|
+ // },
|
|
|
+ // success: function (res) {
|
|
|
+ // if (res && res.error_code === 0 && res.data) {
|
|
|
+ // let data_ = res.data.customer_scale
|
|
|
+ // data_.forEach(ele => {
|
|
|
+ // if(ele.amount){
|
|
|
+ // ele.amount=(ele.amount / 10000).toFixed(2)
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // data_.sort(function(a,b){return b.total-a.total});
|
|
|
+ // let newarr = data_.filter(function (item, index) {
|
|
|
+ // return !(item['amount'] ==0 && item['total'] ==0 )
|
|
|
+ // })
|
|
|
+ // this_.data_list=newarr
|
|
|
+ // if(res.data.customer_scale_other){
|
|
|
+ // this_.analysis_num=res.data.customer_scale_other.total
|
|
|
+ // this_.analysis_price=(res.data.customer_scale_other.amount / 10000).toFixed(2)
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // // this.$toast('请求失败')
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ monthdata(){
|
|
|
+ var that = this
|
|
|
+ $.ajax({
|
|
|
+ type:'POST',
|
|
|
+ url:'/bigmember/report/detail',
|
|
|
+ data:{
|
|
|
+ start: utils.getParam('start'),
|
|
|
+ end: utils.getParam('end'),
|
|
|
+ type: utils.getParam('type')
|
|
|
+ },
|
|
|
+ success:function(res) {
|
|
|
+ // console.log(res)
|
|
|
+ if(res.error_code == 0 && res.data) {
|
|
|
+ console.log(that.parm)
|
|
|
+ if(that.parm=='curMonthCountTop'){ //数量
|
|
|
+ let others=[]
|
|
|
+ let data_ =res.data.project_buyerclass_count
|
|
|
+ // data_.push({buyerclass:'其它',count:12})
|
|
|
+ data_.forEach(ele => {
|
|
|
+ if(ele.count){
|
|
|
+ ele.value=ele.count
|
|
|
+ }
|
|
|
+ if(ele.buyerclass=='其它'){
|
|
|
+ others.push(ele)
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ let newarr = data_.filter(function (item, index) {
|
|
|
+ return (item['buyerclass'] != '其它' && item['count']!=0)
|
|
|
+ })
|
|
|
+ that.data_list=newarr
|
|
|
+
|
|
|
+ if(others.length!=0){
|
|
|
+ that.num=others[0].count
|
|
|
+ }
|
|
|
+
|
|
|
+ }else if(that.parm=='curMonthScaleTop'){ //规模排行
|
|
|
+ let data_ =res.data.project_buyerclass_bidamount
|
|
|
+ let others=[]
|
|
|
+ // data_.push({buyerclass:'其它',bidamount:12})
|
|
|
+ data_.forEach(ele => {
|
|
|
+ if(ele.bidamount){
|
|
|
+ ele.value=ele.bidamount.toFixed(2)
|
|
|
+ }
|
|
|
+ if(ele.buyerclass=='其它'){
|
|
|
+ others.push(ele)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let newarr = data_.filter(function (item, index) {
|
|
|
+ return (item['buyerclass'] != '其它' && item['bidamount']!=0)
|
|
|
+ })
|
|
|
+ console.log(newarr)
|
|
|
+ that.data_list=newarr
|
|
|
+ if(others.length!=0){
|
|
|
+ that.num=others[0].bidamount
|
|
|
+ }
|
|
|
+ }else if(that.parm=='averageScaleTop'){ //平均规模排行
|
|
|
+ let data_ =res.data.project_buyerclass_average_bidamount
|
|
|
+ let others=[]
|
|
|
+ // data_.push({buyerclass:'其它',average:12})
|
|
|
+ data_.forEach(ele => {
|
|
|
+ if(ele.average){
|
|
|
+ ele.value=ele.average.toFixed(2)
|
|
|
+
|
|
|
+ }
|
|
|
+ if(ele.buyerclass=='其它'){
|
|
|
+ others.push(ele)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let newarr = data_.filter(function (item, index) {
|
|
|
+ return (item['buyerclass'] != '其它' && item['average']!=0)
|
|
|
+ })
|
|
|
+ that.data_list=newarr
|
|
|
+ if(others.length!=0){
|
|
|
+ that.num=others[0].average
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }else{
|
|
|
+ console.log("未获取到数据")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ error:function(err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
|
|
+var vueComponent = new Vue(vNode_)
|
|
|
+</script>
|
|
|
+{{include "/common/baiducc.html"}}
|
|
|
+</body>
|
|
|
+</html>
|