ylrz_his_scrm_companyUI/src/views/qw/contactWay/statisDetails.vue

<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
       数据分析
      </div>
    <div class="contentx" v-if="item!=null">
        <div class="desct">
           数据分析
        </div>
        <div class="statistics-container">
          <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :span="6"  >
              <el-card style="height: 100px">
                <div class="statistic-item">
                  <h2>{{ item.addNum }} </h2>
                  <p>添加人数</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6" >
              <el-card style="height: 100px">
                <div class="statistic-item">
                  <h2>{{ item.deleteNum }} </h2>
                  <p>流失人数</p>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6"  >
              <el-card style="height: 100px">
                <div class="statistic-item">
                  <h2>{{ item.addNum-item.deleteNum }} </h2>
                  <p>剩余人数</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
    </div>
      <div class="contentx" v-if="item!=null">
        <div class="desct">
          数据统计
        </div>
        <div>
            <el-select v-model="value" placeholder="请选择日期" style="margin-left: 40px;" @change="changeValue">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
        </div>
          <div id="echart-customer" style="width: 100%; height: 400px;"></div>
        </div>
        <div class="contentx" v-if="item!=null">
          <div class="desct">
            数据表格
          </div>
          <div>
              <el-table
                :data="list"
                border
                :summary-method="getSummaries"
                show-summary
                max-height="500"
                style="width: 100%;">
                <el-table-column
                  prop="type"
                  label="日期">
                </el-table-column>
                <el-table-column
                  prop="addNum"
                  label="添加人数">
                </el-table-column>
                <el-table-column
                  prop="deleteNum"
                  label="流失人数">
                </el-table-column>
                <el-table-column
                  prop="num"
                  label="净人数">
                </el-table-column>

              </el-table>
          </div>

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

<script>
  import {statistics, sync,listContactWay, getContactWay, delContactWay, addContactWay, updateContactWay, exportContactWay } from "@/api/qw/contactWay";
  import echarts from 'echarts'
  export default {
    name: "statisDetails",
    props:["data"],
    data() {
      return {
        item:null,
        value: '5',
        options: [{
           value: '1',
           label: '今天'
         }, {
           value: '2',
           label: '昨天'
         }, {
           value: '3',
           label: '本周'
         }, {
           value: '4',
           label: '上周'
         }, {
           value: '5',
           label: '本月'
         }
         , {
           value: '6',
           label: '上月'
         }
         , {
           value: '7',
           label: '本季度'
         }
         , {
           value: '8',
           label: '上季度'
         }
         , {
           value: '9',
           label: '本年'
         }
         , {
           value: '10',
           label: '上年'
         }],
         list:[],
         dates:[],
         addNum:[],
         deleteNum:[],
         num:[],
      };


    },
    created() {


    },
    methods: {
      getDetails(orderId) {
        this.item=null;
        this.list=null;
        getContactWay(orderId).then(response => {
           this.item = response.data;
           this.getStatisList()
        });
      },
      changeValue(){
        this.getStatisList()
      },
      getStatisList(){
        var data={type:this.value,wayId:this.item.id}

        statistics(data).then(response => {
        this.list=response.list;
        this.dates=response.dates;
        this.addNum=response.addNum;
        this.deleteNum=response.deleteNum;
        this.num=response.num;
        setTimeout(() => {
        this.initEchart();
        }, 500);
        });
      },
      initEchart(){
        var option = {
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          legend: {
              data: ['添加人数', '流失人数','净人数']
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: this.dates
              }
          ],
          yAxis: [
              {
                  type: 'value',
                  axisLabel:{
                    formatter:'{value}'
                  }
              }
          ],
          series: [

              {
                  name: '添加人数',
                  type: 'line',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.addNum
              },
              {
                  name: '流失人数',
                  type: 'line',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.deleteNum
              },
              {
                  name: '净人数',
                  type: 'line',
                  emphasis: {
                      focus: 'series'
                  },
                  data: this.num
              }
          ]
        };
        this.chart=echarts.init(document.getElementById("echart-customer"));
        this.chart.setOption(option,true);
      },
    }
  }
</script>
<style>
   .contentx{
       height: 100%;
       background-color: #fff;
       padding: 0px 20px 20px;
       margin: 20px;
   }
   .el-descriptions-item__label.is-bordered-label{
     font-weight: normal;
   }
   .el-descriptions-item__content {
     max-width: 150px;
     min-width: 100px;
   }
   .desct{
       padding-top: 20px;
       padding-bottom: 20px;
       color: #524b4a;
       font-weight: bold;
     }
    .require:before {
        content: '* ';
        color: red;
    }
    .noRequire:before{
      content: '* ';
      color: white;
    }
    .statistics-container {
      padding: 20px;
    }
    .statistic-item {
      text-align: center;
      margin-top: 5%;
    }
    .statistic-item h2 {
      font-size: 24px;
      margin: 0;
    }
    .statistic-item p {
      margin: 5px 0 0;
      color: #666;
    }
    .echart-box{
      margin: 0 auto;
      text-align: center;
    }
</style>