webapp / GreenwayWeb

<template>
  <div style="padding: 10px;background-color:#F2F3F5">
    <div class="zhuti">
      <div style="font-size:12px;font-weight:600">
        推广效果统计
      </div>
        <div style="border: 1px solid #EBEEF5;width: 100%;padding:20px;margin: 20px 0;">
          <div>
             <el-radio-group v-model="radio1" size="mini" style="margin-right:10px">
                  <el-radio-button label="今日"></el-radio-button>
                  <el-radio-button label="昨日"></el-radio-button>
                  <el-radio-button label="近7天"></el-radio-button>
                  <el-radio-button label="近30天"></el-radio-button>
                  <el-radio-button label="自定义"></el-radio-button>
                </el-radio-group>
                <el-date-picker
                      size="mini"
                      v-model="value1"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
          </div>
            <div ref="chard" style="100%;height: 600px;" ></div>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
          :border="true"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="auto"
            min-width="4%"
            prop="date"
            align="center"
          >
          <template slot-scope="scope">
                  {{scope.$index +1}}
               </template>
          </el-table-column>
          <el-table-column
            label="渠道名称"
            prop="schemeTitle"
            width="auto"
            min-width="12%"
          >

          </el-table-column>
          <el-table-column
            label="扫码次数"
            prop="publisher"
            width="auto"
            min-width="5%"
          >

          </el-table-column>
          <el-table-column
            label="活动参与人数"
            prop="applicant"
            width="auto"
            min-width="10%"
          >
          </el-table-column>

        </el-table>
        <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>
</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,
      }
    }
  },
  computed: {},
  created() {
    this.getAll()

  },
  mounted(){
    this.charDam()
  },
  methods: {
    charDam(){
      let Dom = this.$refs.chard
      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],
            ['知乎', 72.4, 53.9]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: {
          type:'value',
          max:40000
        },
        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: 20px;
  background-color: #Fff;
  min-height: calc(100vh - 50px - 20px);
}

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



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

.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
     }
     /deep/ .el-dialog__header {
       background-color: #fff;
       padding: 0
     }
     ::v-deep .shenhe_css{
      .el-dialog__header {
         border-bottom:1px solid rgb(234, 234, 234);
         padding: 10px 15px;
       }
       .el-dialog__title {
         font-size: 16px !important;
         font-weight: 600;
         color: #000;

       }
     }
     /deep/ .el-radio__input.is-checked .el-radio__inner{
       border-color:#3F9B6A;
       background:#3F9B6A;
     }
</style>