webapp / GreenwayWeb

<template>
  <!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
  <div style="background-color:#fff">
    <div class="history">
      <div style="background-color:#Fff;padding:20px 20px 0 20px;display:flex;justify-content: space-between;">
        <div style="font-size:14px;font-weight:600;line-height:200%">商品消费明细</div>
          <!-- 顶部搜索 -->
          <div class="toolbar">
            <el-form ref="formParams" :inline="true" :model="formParams">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="formParams.dates"
                  type="daterange"
                   size="mini"
                   style="width:220px"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>

              <el-form-item label-width="0">
                <el-button  plain @click="search('formParams')" size="mini" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                <el-button plain @click="clear('formParams')" size="mini" style="background-color: #fff;color: #000;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
      <div style="background-color:#fff;padding: 20px 20px 0px;">
         <div style="background-color:#F2F3F5;padding: 5px;">
           <div style="background-color:#fff;display:flex;">
             <div style="padding:15px;width:49%;">
               <div style="margin-bottom:10px">商品消费数量分布图</div>
               <div style="height:250px" ref="myEchartsOne"></div>
             </div>
             <div style="padding:15px;width:49%;">
               <div style="margin-bottom:10px">商品消费表</div>
               <div style="height:250px" ref="myEchartsTwo"></div>
             </div>
           </div>
         </div>
      </div>
      <div style="background-color:#fff;padding: 20px 20px 0px;">
         <div style="background-color:#F2F3F5;padding: 5px;">
           <div style="background-color:#fff;padding:15px">商品消费排行榜</div>
           <div style="display:flex;">
               <div style="width:100%;height:250px;background-color:#fff;" ref="myEchartsThree"></div>
               <div style="width:100%;height:250px;background-color:#fff;"></div>
           </div>
         </div>
      </div>
        <!-- 表格 -->
        <div class="content_table" style="padding: 15px 10px 10px 20px;background-color:#fff">
             <div style="background-color: #F2F3F5;padding:5px;margin-bottom: 20px;">
          <div style="background-color:#fff;padding:15px;">
            <div class="table">
              <el-table
                border
                :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                style="width: 100%"
              >
                <el-table-column prop="ddh" label="订单号" />
                <el-table-column  prop="xdr" label="下单用户">
                </el-table-column>
                <el-table-column prop="zf" label="支付方式">
                </el-table-column>
                <el-table-column prop="zt" label="订单状态" />
                <el-table-column prop="dmo" label="订单总金额" />
                <el-table-column prop="yh" label="优惠金额" />
                <el-table-column prop="sf" label="订单实付金额" />
                <el-table-column prop="xtime" label="下单时间" />
              </el-table>
            </div>
            <div class="fenye">
              <div style="line-height: 34px">显示第1到第10条记录</div>
              <el-pagination class="pagination" :hide-on-single-page="flag" background small :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total,sizes,prev, pager,next" :total="total "
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
          </div>
          <!-- 分页 -->

       </div>
        </div>
      </div>

  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      list: [],
      total: 1,
      pageSize: 10,
      currentPage: 1,
      formParams: {
        page: 1,
        pageSize: 10
      },
      tipsList: [{
        id: 1,
        name: '系统消息'
      },
      {
        id: 2,
        name: '公告'
      },
      {
        id: 3,
        name: '站内信'
      }],
       tableData: [
         {
           ddh:'2679',
           xdr:'M*****4',
           zf:'微信',
           zt:'待发货',
           dmo:'0.01',
           yh:'0',
           sf:'0.01',
           xtime:'2024-07-25 11:59:51',
         },
         {
           ddh:'2678',
           xdr:'M*****4',
           zf:'微信',
           zt:'已发货',
           dmo:'0.01',
           yh:'0',
           sf:'0.01',
           xtime:'2024-07-25 09:27:04',
         },
         {
           ddh:'2677',
           xdr:'扑*仔',
           zf:'微信',
           zt:'已发货',
           dmo:'0.01',
           yh:'0',
           sf:'0.01',
           xtime:'2024-07-25 09:24:28',
         },

       ],
      rules: {
        noticeType: [
          { required: true, message: '请选择消息类型', trigger: 'change' }
        ]
      },

    }
  },
  mounted() {
    this.draws()
    this.draw()
    this.drawsTwo()
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    draw(arr) {
      const myEchart = echarts.init(this.$refs.myEchartsOne, 'light')
     let option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      };
      myEchart.setOption(option)
    },
    drawsTwo(){
      const myEchart = echarts.init(this.$refs.myEchartsTwo, 'light')
     let  option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      }
      myEchart.setOption(option)
    },
    draws(arr) {
      let lo = {
        "names": [
          "支付成功",
          "调取支付",
          "加购",
          "访问"
        ],
        "rates": [
          6,
          9,
          8,
          100
        ]
      }
      const myEchart = echarts.init(this.$refs.myEchartsThree, 'light')
      // const o = this.chartData
      const option = {
        // color: ["#74d1fd", "#009ae4", "#0071c1"],
        // 设置图表的位置
        grid: {
          x: 110, // 左间距
          y: 0, // 上间距
          x2: 60, // 右间距
          y2: 40 // 下间距
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型, axis: 坐标轴触发
          axisPointer: {
            // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
            // 'cross' 十字准星指示器 其实是种简写，表示启用两个正交的轴的 axisPointer
            type: 'none'
          },
          textStyle: {
            color: '#cdd3ee' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 折线（区域）图、柱状（条形）图、K线图
          // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          formatter: '{b}<br />{a0}: {c0}%'
        },
        // // 图例组件
        // legend: {
        //   textStyle: {
        //     // 文本样式
        //     fontSize: 16,
        //     color: "#cdd3ee"
        //   },
        //   top: 13, // 定位
        //   data: ["已完成", "进行中", "未完成"] // 图例的数据数组
        // },
        // X轴
        xAxis: {
          type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
          // 坐标轴刻度
          axisTick: {
            show: false // 是否显示坐标轴刻度 默认显示
          },
          // 坐标轴轴线
          axisLine: {
            // 是否显示坐标轴轴线 默认显示
            show: false // 是否显示坐标轴轴线 默认显示
          },
          // 坐标轴在图表区域中的分隔线
          splitLine: {
            show: false // 是否显示分隔线。默认数值轴显示
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        yAxis: [
          // 左侧Y轴
          {
            // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
            // 为该类型时必须通过 data 设置类目数据
            type: 'category',
            // 坐标轴刻度
            axisTick: {
              show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: {
              // 是否显示坐标轴轴线 默认显示
              show: false, // 是否显示坐标轴轴线 默认显示
              lineStyle: {
                // 坐标轴线线的颜色
                color: '#cdd3ee'
              }
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
              show: false // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 16, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value}'
            },
            // 类目数据，在类目轴（type: 'category'）中有效
            data: lo.names.reverse()
          }
        ],
        // 系列列表
        series: [{
          type: 'bar', // 系列类型
          name: '已完成',
          barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
          // label: {
          //   show: true,
          //   position: "inside"
          // },
          itemStyle: {
            barBorderRadius: [10, 0, 0, 10] // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
          },
          data: lo.rates.reverse() // 系列中的数据内容数组
        }]
      }

      myEchart.setOption(option)
    },

  }
 }
</script>

<style lang='scss' scoped>
.history{
  padding: 0px;
  min-height: calc(100vh - 50px - 20px);
}
 ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 12px;

       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
</style>
<style scoped>
.history /deep/ .el-table .cell.el-tooltip img {
  max-height: 100px;
}
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    position: relative;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }

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

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

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

 /deep/ .btn-prev {
   position: absolute;
   top: 4px;
   right: 69px;
 }
 .toolbar{
   .el-form-item{
     margin-bottom:0px;
   }
 }
</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>