webapp / GreenwayWeb

<template>
  <div style="padding: 10px;">
    <div
      style="font-weight: bold;font-size: 14px;background-color:#fff;padding: 20px;display:flex;justify-content: space-between;align-items: center">
      <div>图表分析</div>
      <el-form :inline="true"  label-position="left">
        <el-form-item label="选择日期">
          <el-date-picker v-model="Time"   type="daterange"     value-format="yyyy-MM-dd" style="width: 240px;margin-top:5px"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
<el-form-item>
              <el-button
                style="background-color: #3F9B6A;color: #fff;"
                @click="onSubmit"
                >查询
              </el-button>
              <el-button
               class="buttonHover"
                 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                @click="resetting"
                >重置
              </el-button>
            </el-form-item>
      </el-form>
    </div>
    <div style="padding: 10px 0;">
      <div style="display: flex;">
          <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;margin-right:20px;">
            <div style="">支付渠道监控</div>
            <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
            <div style="height:350px;width:100%" ref="shopBing">
            </div>
          </div>
		  <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;">
		    <div>支付笔数分析</div>
		    <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			<div class="card_body">{{transactionSuccessRates.totalSuccessRate}}%</div>
			
		    <div style="display:flex;justify-content: space-between;" class="card_tu">
		      <div style="width:100%;height:15px;position: relative;background-color: #F1F2F5;margin-top: 20px;">
		         <div style="position: absolute;top: 0;left: 0;background-color: #448EF7;height:15px;" :style="`width:${transactionSuccessRates.thisWeekSuccessRate?transactionSuccessRates.totalSuccessRate:0}%`"></div>
		      </div>
		    </div>
		    <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
		    <div>
			   周同比<i class="el-icon-caret-top" v-if="transactionSuccessRates.changeDirection&&transactionSuccessRates.changeDirection=='上升'" style="color:green;padding: 0 5px;"></i><i class="el-icon-caret-top" v-if="transactionSuccessRates.changeDirection&&transactionSuccessRates.changeDirection=='下降'" style="color:red;padding: 0 5px;"></i><span :style="transactionSuccessRates.changeDirection&&transactionSuccessRates.changeDirection=='上升'?'color:green':transactionSuccessRates.changeDirection&&transactionSuccessRates.changeDirection=='下降'?'color:red':''">{{transactionSuccessRates.changeAmount}}</span>
		    					
		    </div>
			<div style="margin-top: 20px;">支付金额分析</div>
			<div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			<div style="font-size: 16px;">
				<div style="padding: 20px 0;">下单数：{{paymentChannels.paymentQuantity}}</div>
				<div  style="padding:  0 0 20px 0;">总交易额(元)：{{paymentChannels.price}}</div>
				<div>退款金额(元)：{{paymentChannels.refundPrice}}</div>
			</div>
			<div style="display: flex;justify-content: space-between;">
				<!-- <div>退款：{{paymentChannels.paymentQuantity}}</div> -->
				
			</div>
		    </div>
		  </div>

      </div>

      <div style="margin-top:20px;">
        <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;">
          <!-- <div style="">商户交易监控</div> -->
		  <div style="">支付笔数统计</div>
          <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
          <div style="height:350px;width:100%" ref="jiankong">
          </div>
        </div>
      </div>
<div style="margin-top:20px;">
        <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;">
          <div style="">支付金额统计</div>
          <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
          <div style="height:350px;width:100%" ref="bishu">
          </div>
        </div>
      </div>
	  <div style="margin-top:20px;">
	          <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;">
	            <div style="">支付笔数图表化展示</div>
	            <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
	            <div style="height:350px;width:100%" ref="zhibi">
	            </div>
	          </div>
	        </div>
			<div style="margin-top:20px;">
			        <div style="width:100%;background-color: #fff;padding:20px 20px 10px 20px;">
			          <div style="">支付金额图表化展示</div>
			          <div style="background-color: #F4F4F4;height: 2px;margin:20px  0 10px 0"></div>
			          <div style="height:350px;width:100%" ref="zhijin">
			          </div>
			        </div>
			      </div>
    </div>
  </div>
</template>

<script>
  import {chartAnalysis,trafficMonitoring} from '../../../api/online.js'
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        activeName: 'zfb',
        tabTitle: '',
        jiaosucc:78,
      pageindex:{
        startTime:"2020-01-01",
        endTime:"2030-12-29"
      },
      Time:[],
	  transactionSuccessRates:{},
	  paymentChannels:{}
      }
    },
    computed: {},
    created() {

    },
    mounted() {
		const now = new Date();
		const year = now.getFullYear();
		const month = String(now.getMonth() + 1).padStart(2, '0')
		const day = String(now.getDate()).padStart(2, '0')
		this.pageindex.endTime= `${year}-${month}-${day}`
      this.getAll()

	  
    },
    methods: {
      getAll(){
		  trafficMonitoring().then(res=>{
			  this.initChartone(res.data.merchantTrafficChartDisplays)
			this.initChartTwo(res.data.merchantTrafficChartDisplays)
			this.kong(res.data.merchantTrafficChartDisplays)
			this.kongTwo(res.data.merchantTrafficChartDisplays)
		  })
      chartAnalysis(this.pageindex).then(res=>{
		  this.transactionSuccessRates = res.data.transactionSuccessRates
		  this.paymentChannels = res.data.paymentChannels[0]
             if(res.data.userTraffics &&res.data.paymentChannels ){
               
               this.shopB(res.data.paymentChannels)
             }else{
               let data =[]
               this.shopB(data)
             }

           })

            },
      shopB(datas){
        let Dom = this.$refs.shopBing
        let myChart = echarts.init(Dom)
		let totalRevenue = datas.reduce((sum, item) => sum + item.price, 0);
   let processedData = datas.map(item => {
     let paymentModeName;
     if (item.paymentMode === 1) {
       paymentModeName = '微信';
     } else {
       paymentModeName = item.paymentMode;
     }
     return {
       name: paymentModeName,
       value: item.paymentQuantity
     }
   })

           let option = {
                tooltip: {
                      trigger: 'item',
                      // 设置提示框显示在右侧
                      position: 'right' ,
                  },
               legend: {
                 top: '38%',
                 left: 'right',
                 orient:'vertical'
               },
               series: [
                 {
                   name: '营业额',
                   type: 'pie',
                   radius: ['50%', '70%'],
                   avoidLabelOverlap: false,
                   itemStyle: {
                     borderRadius: 10,
                     borderColor: '#fff',
                     borderWidth: 1,
					     color: function(params) {
					                     return 'green';
					                 }
                   },
                   label: {
                     show: false,
                   },
                   emphasis: {
                     label: {
                       show: false,
                       fontSize: 40,
                     }
                   },
                   labelLine: {
                     show: false
                   },
                   data:processedData
                 }
               ],
			     // 在中间添加营业额文本
			       graphic: [
			           {
			               type: 'text',
			               left: 'center',
			               top: 'center',
			               style: {
			                   text: `营业额${totalRevenue}`,
			                   fontSize: 20,
			                   fill: '#333'
			               }
			           }
			       ]
           }
           option && myChart.setOption(option)
      },
      kong(datas){
                var chartDom = this.$refs.jiankong
                var myChart = echarts.init(chartDom)
                let processedData = datas.map(item => ({
                  name: item.time,
                  value: item.num
                }))
                const option = {
					  tooltip: {
					    trigger: 'axis', // 触发类型，折线图常用 axis
					    formatter: function (params) {
					      // params[0] 取第一个系列的数据（这里只有一个系列）
					      return `销售数：${params[0].value}`; 
					    }
					  },
        grid: {  
          top: '5%',
          left: '10%',  // 增大左侧间距，给 X 轴更多显示空间
          right: '10%',
          bottom: '5%',
          containLabel: true
        },

        xAxis: {
          name: '',
          type: 'category',
          data:processedData.map(item => item.name),
		  axisLabel: { interval: 0 }, // 0=显示所有刻度
		    axisTick: { interval: 0 },   // 同步显示所有刻度线
		   label: {
		        // 自定义文本显示规则
		        formatter: function (name) {
		          if (name.length > 3) {  // 超过4字时截断
		            return `${name.slice(0, 3)}...`;
		          }
		          return name;
		        }
				}
        },

        yAxis: {
          type: 'value',
          min:0, // 配置 Y 轴刻度最小值
          splitNumber:6,  // 配置 Y 轴数值间隔
        },

        series: [
          {
            name: '实际',
            type: 'line',
            symbol: 'circle', // 实心圆点
            smooth: 0.5, // 设置折线弧度
               data: processedData.map(item => item.value),
          }
        ],
        color: ['#3366CC'] // 三个折线的颜色
     }
                option && myChart.setOption(option)
      },
	  kongTwo(datas){
	             var chartDom = this.$refs.bishu
	             var myChart = echarts.init(chartDom)
	             let processedData = datas.map(item => ({
	        name: item.time,
	        value: item.price
	             }))
	             const option = {
	  					  tooltip: {
	  					    trigger: 'axis', // 触发类型，折线图常用 axis
	  					    formatter: function (params) {
	  					      // params[0] 取第一个系列的数据（这里只有一个系列）
	  					      return `销售数：${params[0].value}`; 
	  					    }
	  					  },
	     grid: {  
	       top: '5%',
	       left: '10%',  // 增大左侧间距，给 X 轴更多显示空间
	       right: '10%',
	       bottom: '5%',
	       containLabel: true
	     },
	  
	     xAxis: {
	       name: '',
	       type: 'category',
	       data:processedData.map(item => item.name),
	  		  axisLabel: { interval: 0 }, // 0=显示所有刻度
	  		    axisTick: { interval: 0 },   // 同步显示所有刻度线
	  		   label: {
	  		        // 自定义文本显示规则
	  		        formatter: function (name) {
	  		          if (name.length > 3) {  // 超过4字时截断
	  		            return `${name.slice(0, 3)}...`;
	  		          }
	  		          return name;
	  		        }
	  				}
	     },
	  
	     yAxis: {
	       type: 'value',
	       min:0, // 配置 Y 轴刻度最小值
	       splitNumber:6,  // 配置 Y 轴数值间隔
	     },
	  
	     series: [
	       {
	         name: '实际',
	         type: 'line',
	         symbol: 'circle', // 实心圆点
	         smooth: 0.5, // 设置折线弧度
	            data: processedData.map(item => item.value),
	       }
	     ],
	     color: ['#3366CC'] // 三个折线的颜色
	  }
	             option && myChart.setOption(option)
	   },
     onSubmit() {
       if(this.Time.length!=0){
          this.pageindex.startTime = this.Time[0]
         this.pageindex.endTime = this.Time[1]
           this.getAll()
       }
     },
     resetting(){
       this.pageindex= {
        startTime:"2020-01-01",
      }
	  const now = new Date();
	  const year = now.getFullYear();
	  const month = String(now.getMonth() + 1).padStart(2, '0')
	  const day = String(now.getDate()).padStart(2, '0')
	  this.pageindex.endTime= `${year}-${month}-${day}`
       this.Time=[]
       this.getAll()
     },
      handleSizeChange() {

      },
      handleCurrentChange() {

      },
	  initChartone(datas) {
	  	let Dom = this.$refs.zhibi
	  	let myChart = echarts.init(Dom)
	  
	  	const productNames = datas.map(item => item.shopName)
	  	const salesData = datas.map(item => item.price)
	  	const option = {
	  		tooltip: {
	  			trigger: 'axis',
	  			axisPointer: {
	  				type: 'shadow'
	  			}
	  		},
	  		xAxis: {
	  			type: 'category',
	  			data: productNames,
	  		},
	  		yAxis: {
	  			type: 'value',
	  			name: '销售金额'
	  		},
	  		series: [{
	  			color: '#3f9b6a',
	  			name: '销售金额',
	  			type: 'bar',
	  			data: salesData,
	  		}]
	  	};
	  	option && myChart.setOption(option)
	  	window.addEventListener('resize', function() {
	  		myChart.resize();
	  	})
	  },
	  initChartTwo(datas) {
	  			const chartDom = this.$refs.zhijin;
	  		const myChart = echarts.init(chartDom);
	  const xData = datas.map(item => item.shopName)
	  const trafficData = datas.map(item => item.num)

	  		const option = {
	  			tooltip: {
	  				trigger: 'axis',
	  				axisPointer: {
	  					type: 'shadow'
	  				}
	  			},
	  			xAxis: {
	  				type: 'category',
	  				data: xData,
	  			},
	  			yAxis: {
	  				type: 'value',
	  				name: '销售数量'
	  			},
	  			series: [{
	  				color: '#3f9b6a',
	  				name: '销售数量',
	  				type: 'bar',
	  				data: trafficData,
	  			}]
	  		};
	  		
	  		myChart.setOption(option);
	  
	  		},
    }
  }
</script>

<style scoped>
  .zhuti {
    margin-top: 20px;
    /* padding: 10px 20px 20px 20px; */
    /* background-color: #Fff; */
    min-height: calc(100vh - 50px - 20px);
    position: relative;
  }

  /deep/ .el-form-item__content {
    line-height: 0;
  }

  .tableBtn {
    display: inline-block;
    margin-right: 10px;
  }

  ::v-deep .formSearch {
    position: relative;
    margin: 20px 0;
    display: flex;
    width: 100%;
    height: 30px;
    font-size: 12px;
    justify-content: space-between;

    .el-form-item__label {
      line-height: 28px;
      font-size: 12px;
      color: #000;
      font-weight: 100;
    }
  }

  .greens {
    color: #3F9B6A;
  }

  /deep/ .el-table__row {
    font-size: 12px;
  }

  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #3F9B6A;
  }

  .el-row {
    margin-bottom: 20px;
  }

  :last-child {
    margin-bottom: 0;
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /deep/ .bg-purple[data-v-0e3fe4ec] {
    background: #fff;
    height: 50px;
  }

  /deep/ .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .demo-input-suffix {
    display: flex;
    margin-right: 20px;
  }

  .pagination {
    text-align: right;
    line-height: 20px;
  }

  /deep/ .el-pagination__total {
    margin-top: 4px;
  }

  /deep/ .btn-prev {
    position: absolute;
    top: 4px;
    right: 266px;
  }

  /deep/ .el-pager {
    position: absolute;
    top: 4px;
    right: 40px;
  }

  /deep/ .btn-next {
    position: absolute;
    top: 4px;
    right: 10px;
  }

  ::v-deep .btn .el-button:focus,
  .el-button:hover {
    border: 1px solid #3F9B6A;
  }

  ::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: #3F9B6A
  }

  ::v-deep .dialog_css_Xq {
    .el-dialog__header {
      background-color: #fafafa;

    }

    .el-dialog__title {
      color: #000
    }
  }

  ::v-deep .el-tabs__item.is-active {
    color: #3F9B6A;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #3F9B6A;

  }

    .card_body {
      font-size: 24px;
      margin-top: 10px;
      font-weight: 600;
    }
  .card_tree {
    padding: 20px 20px 10px 20px;
    margin-right: 20px;
    background-color: #fff;

    .card_title {
      color: #B0B0B0;
	  font-size: 16px;
    }


    .card_tu {
      height: 80px;
    }

    .card_foot {
      color: #B0B0B0;
    }
  }

  .card_liuliang {
    margin-top: 20px;

    margin-right: 20px;
    display: flex;

    .card_title {
      color: #B0B0B0;
      font-size: 12px;
      padding: 15px 0;
    }

    .card_body {
      font-size: 24px;
      font-weight: 600;
    }
  }
</style>