<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>客服服务管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">销售统计</span></div>
      </div>
        <div style="width: 100%;margin-bottom:30px;">
           <div style="display:flex;margin-top:10px;">
             <div style="width:48%;height: 400px;marigin-right:20px;" >
               <div style="display: flex;justify-content: space-between;">
                 <div style="line-height:35px;">销售额统计图表</div>
               </div>
               <div ref="shop1TJ" style="width:100%;height: 400px;" ></div>
             </div>
			 <div style="width:48%;height: 400px;marigin-right:20px;" >
			   <div style="display: flex;justify-content: space-between;">
			     <div style="line-height:35px;">日交易额</div>
			   </div>
			   <div ref="shop1ZX" style="width:100%;height: 400px;" ></div>
			 
			 </div>
            <!-- <div style="width:48%;height: 400px;marigin-right:20px;" >
              <div style="display: flex;justify-content: space-between;">
                <div style="line-height:35px;">商品销售分布图表</div>
              </div>

              <div ref="shop2BT" style="width:100%;height: 400px;" ></div>
            </div> -->
            <!-- <div style="width:48%;height: 400px;marigin-right:20px;" >
              <div style="display: flex;justify-content: space-between;">
                <div style="line-height:35px;">销售渠道统计图表</div>
              </div>

              <div ref="shop2LD" style="width:100%;height: 400px;" ></div>
            </div> -->
           </div>
        </div>
        <div style="width: 100%;margin-bottom;20px;">
           <div style="display:flex;margin-top:10px;">
             <!-- <div style="width:48%;height: 400px;marigin-right:20px;" >
               <div style="display: flex;justify-content: space-between;">
                 <div style="line-height:35px;">日交易额</div>
               </div>
               <div ref="shop1ZX" style="width:100%;height: 400px;" ></div>

             </div> -->
            <div style="width:48%;height: 400px;marigin-right:20px;" >
              <div style="display: flex;justify-content: space-between;">
                <div style="line-height:35px;">周订单量</div>
              </div>
              <div ref="shop2TJ" style="width:100%;height: 400px;" ></div>
            </div>
            <div style="width:48%;height: 400px;marigin-right:20px;" >
              <div style="display: flex;justify-content: space-between;">
                <div style="line-height:35px;">销售趋势预测图表</div>
              </div>
              <div ref="shop3QS" style="width:100%;height: 400px;" ></div>
            </div>
           </div>
        </div>
    </div>

  </div>
</template>

<script>
import {auditGetAll,
auditQueryById,
auditadd,
auditedit,
auditdel} from '@/api/audit'
import * as echarts from 'echarts'
export default {
  name: 'atmosphereGl',
  data () {
    return {
      currentPage: 1,
      radio1:0,
      total: 100,
      flag: false,
      pageSize: 10,
      tableData: [],
      pageindex: {
        pageNumber: 1,
        pageSize: 10,
      },
      formSel:{

      }
    }
  },
  computed: {},
  created() {
    this.getAll()

  },
  mounted(){
    this.charDam()
    this.charDam1()
    // this.charDam2()
    this.charDam3()
    // this.charDam4()
    this.charDam5()
  },
  methods: {
    charDam(){
      let Dom = this.$refs.shop2TJ
      let myChart = echarts.init(Dom);
     let option = {
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ['周一', 25],
            ['周二', 5],
            ['周三', 10],
            ['周四', 20],
            ['周五', 3],
            ['周六', 4],
            ['周日', 9]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {
          type:'value',
        },
        grid: {
          left: '1%',
          right: '1%',
          top: '5%',
          bottom: '6%',
          containLabel: true
        },
        series: [{ type: 'bar',color:'#3f9b6a' }]
      };
      option && myChart.setOption(option);
    },
    charDam1(){
      let Dom = this.$refs.shop1ZX
      let myChart = echarts.init(Dom);
      let option = {
  xAxis: {
    type: 'category',
    data: ['2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12', '2024-13']
  },
  yAxis: {
    type: 'value'
  },
  grid: {
    left: '1%',
    right: '1%',
    top: '5%',
    bottom: '6%',
    containLabel: true
  },
  series: [
    {// 设置线条颜色
      lineStyle: {
          color: '#3f9b6a', // 这里设置为红色
          width: 2, // 线条宽度
      },
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
option && myChart.setOption(option);
    },
    charDam2(){
          let Dom = this.$refs.shop2BT
          let myChart = echarts.init(Dom);
          let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'right',
    top:'40%',
  },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      color:['#3f9b6a','rgb(61,182,211)'],
      data: [
        { value: 1048, name: '已出租'},
        { value: 735, name: '未出租'},
      ]
    }
  ]
}
    option && myChart.setOption(option);
        },
        charDam3(){
          let Dom = this.$refs.shop1TJ
          let myChart = echarts.init(Dom);
         let option = {
            legend: {},
            tooltip: {},
            dataset: {
              source: [
                ['A-01区', 400],
                ['A-02区', 300],
                ['A-03区', 100],
                ['A-04区', 150],
                ['A-05区', 72.4]
              ]
            },
            xAxis: { type: 'category' },
            yAxis: {
              type:'value',
              max:1000
            },
            grid: {
              left: '1%',
              right: '1%',
              top: '5%',
              bottom: '6%',
              containLabel: true
            },
            series: [{ type: 'bar',color:'#3f9b6a' }]
          };
          option && myChart.setOption(option);
        },
        charDam4(){
          let Dom = this.$refs.shop2LD
          let myChart = echarts.init(Dom);
         let option = {

  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },

  legend: {
    data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
     orient: 'vertical',
    left: 'right',
    top:'40%'
  },
  series: [
    {
      name: '数据',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 80,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '20%',
      maxSize: '80%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
      ],
        color:['#3f9b6a','rgb(61,182,211)','#00ff00','rgb(0, 170, 255)','#55ffff'],
    },

  ]
}
          option && myChart.setOption(option);
        },
        charDam5(){
                  let Dom = this.$refs.shop3QS
                  let myChart = echarts.init(Dom);
                 let option = {
                    legend: {},
                    tooltip: {},
                    dataset: {
                      source: [
                        ['周一', 10000, 11115],
                        ['周二', 20000, 10000],
                        ['周三', 10000, 20000],
                        ['周四', 15500, 30000],
                        ['周五', 72.4, 53.9],
                        ['周六', 72.4, 53.9],
                        ['周日', 72.4, 53.9]
                      ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: {
                      type:'value',
                    },
                    grid: {
                      left: '1%',
                      right: '1%',
                      top: '5%',
                      bottom: '6%',
                      containLabel: true
                    },
                    series: [{ type: 'bar', color:'rgb(61,182,211)'}, { type: 'bar',color:'#3f9b6a' }]
                  };
                  option && myChart.setOption(option);

                },

    async getAll(){
      const res= await auditGetAll(this.pageindex)
      this.tableData   = res.data.content
     },

    handleSizeChange(){

    },
    handleCurrentChange(){

    },
  }
}
</script>

<style scoped>
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;

  }

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

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

.formSearch {
  position: relative;
  margin-top: 30px;
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 14px;
  margin-bottom:10px;
}

.greens {
  color: #3F9B6A;
}


.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;
}

     ::v-deep .el-select .el-input.is-focus .el-input__inner{
         border-color:#3F9B6A
     }
     /deep/ .el-dialog__header {
       background-color: #fff;
       padding: 0
     }
     /deep/ .el-radio__input.is-checked .el-radio__inner{
       border-color:#3F9B6A;
       background:#3F9B6A;
     }
     ::v-deep .buttonHover:hover{
       color:#3f9b6a !important;
       border-color: #c5e1d2 !important;
       background-color: #ecf5f0 !important;
       outline: none;
     }
</style>
