<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
       <div class="app-titel">
        <div class="titel-text">楼盘选择：</div>
        <div style="margin-left: 26px">
           <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="app-titel" style="margin-top: 10px;">
        <div class="titel-text">接待时间</div>
        <div class="toptimeqhuan">
          <div :class="{ tophove: TimetoAhoose == 0 }" @click="tabtimetap(0)">近7天</div>
          <div :class="{ tophove: TimetoAhoose == 1 }" @click="tabtimetap(1)"> 近15天 </div>
          <div :class="{ tophove: TimetoAhoose == 2 }" @click="tabtimetap(2)">  近30天 </div>
        </div>
        <div style="margin-left: 26px">
          <el-date-picker
            @change="confirmtime()"
            v-model="customtime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>

    <!-- 二 -->
    <div class="app-box-er">
      <el-row :gutter="15">
        <el-col :span="4">
          <div class="grid-content">
            <div class="text1">接待量</div>
            <div class="text2">1045</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="text1">接待量</div>
            <div class="text2">1045</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="text1">接待量</div>
            <div class="text2">1045</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="text1">接待量</div>
            <div class="text2">1045</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="text1">接待量</div>
            <div class="text2">1045</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content">
            <div class="text1">接待量</div>
            <div class="text2">1045</div>
          </div>
        </el-col>
      </el-row>
      <div id="main"></div>
    </div>

     <!-- 三 -->
    <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">客户来源</div>
          </div>
          <div id="Brokenline1"></div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">客户性别</div>
          </div>
           <div id="Brokenline2"></div>
        </div>
    </div>

     <!-- 四 -->
    <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">团队销讲趋势</div>
             <div class="text2">
               <el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
             </div>
              <div class="text2">
                <el-select style="width: 90%; margin: 0 auto;"  v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
          </div>
          <div id="Pinspeak1"></div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">员工销讲趋势</div>
             <div class="text2">
               <el-select style="width: 90%; margin: 0 auto;" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
             </div>
              <div class="text2">
                <el-select style="width: 90%; margin: 0 auto;"  v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
          </div>
           <div id="Pinspeak2"></div>
        </div>
    </div>


      <!-- 五 -->
    <div class="app-box-san">
        <div class="zuo">
          <div class="title">
            <div class="text1">销讲维度执行排名</div>
          </div>
            <div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
                <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
                    <div class="jinboxtit">{{item.name}}</div>
                    <div class="jinbox-box">
                        <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
                    </div>
                    <div class="jinboxbott">{{item.avgZxl}}%</div>
                </div>
            </div>
        </div>
        <div class="you">
          <div class="title">
            <div class="text1">销讲指标执行率排名</div>
              <div class="text2"></div>
               <div class="text2">
                <el-select style="width: 90%; margin: 0 auto;"  v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
          </div>
            <div style="overflow-y:auto;height: 350px;width: 94%;margin: 0 auto;">
                <div  class="jinbox" v-for="(item,i) in ceratelist" :key='i'>
                    <div class="jinboxtit">{{item.name}}</div>
                    <div class="jinbox-box">
                        <div class="boxbaifenbi" :style="'width:'+(item.avgZxl)+'%;'"></div>
                    </div>
                    <div class="jinboxbott">{{item.avgZxl}}%</div>
                </div>
            </div>
        </div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      customtime: "",
      TimetoAhoose: 2,
      fromobj: {
        starttime: "",
        endoftime: "",
      },
      houseId: "",
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }],
        value: '',
        ceratelist:[
            {name:'还是得',avgZxl:80},
             {name:'大大奥德赛',avgZxl:90},
              {name:'沙发和',avgZxl:20},
               {name:'还是得',avgZxl:10},
                {name:'还客户家客户是得',avgZxl:80},
        ]
    };
  },
  mounted() {
      this.SwitchCARDS()
      //客户来源
      this.Brokenlinefun()
      //客户性别
      this.Broken2inefun()
      //团队销讲
      this.Pinspeakfun1()
      //员工销讲
      this.Pinspeakfun2()
  },
  methods: {
    SwitchCARDS(){
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
          tooltip: {
                trigger: 'axis'
              },
          legend: {
              data: ['来访人数/个'],
              bottom: '10',
          },
          grid: {
              left: 10,
              right: 10,

              containLabel: true,
          },
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
              axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度

                  }
              }
          },
          yAxis: {
              type: 'value',
              splitNumber:4,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
               axisLine: {
                  lineStyle: {
                    ype: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度
                  }
              },
              splitLine: {
                  lineStyle: {
                      type: 'dashed' // y轴分割线类型
                  }
              },
              axisTick: {       //y轴刻度线
                  show: false
              },
          },
          series: [{
              name:'来访人数/个',
              data: [820, 932, 901, 934, 1290, 1330, 1320,],
              type: 'line',
              smooth: true,

          }]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },
     //客户来源
    Brokenlinefun(){
      let chartDom = document.getElementById('Brokenline1');
      let myChart = echarts.init(chartDom);
      let option = {
            tooltip: {
              trigger: "item",
            },
            graphic: [
              {
                type: "text",
                left: "center",
                top: "42%",
                style: {
                  text: '80',
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 24,
                  color: "#32363D",
                  fontFamily: "Microsoft YaHei",
                },
              },
              {
                type: "text",
                left: "center",
                top: "55%",
                style: {
                  text: "接待总数",
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 16,
                  color: "#666666",
                },
              },
            ],
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                 data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'}
                ]
              },
            ],
          };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },
    //客户性别
    Broken2inefun(){
      let chartDom = document.getElementById('Brokenline2');
      let myChart = echarts.init(chartDom);
      let option = {
            tooltip: {
              trigger: "item",
            },
            graphic: [
              {
                type: "text",
                left: "center",
                top: "42%",
                style: {
                  text: '80',
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 24,
                  color: "#32363D",
                  fontFamily: "Microsoft YaHei",
                },
              },
              {
                type: "text",
                left: "center",
                top: "55%",
                style: {
                  text: "接待总数",
                  textAlign: "center",
                  fill: "#000",
                  width: 30,
                  height: 30,
                  fontSize: 16,
                  color: "#666666",
                },
              },
            ],
            series: [
              {
                name: "",
                type: "pie",
                radius: ["48%", "70%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                 data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                ]
              },
            ],
          };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },
     //团队销讲
    Pinspeakfun1(){
      let chartDom = document.getElementById('Pinspeak1');
      let myChart = echarts.init(chartDom);
      let option= {
          tooltip: {
                trigger: 'axis'
              },
          legend: {
              data: ['来访人数/个'],
              bottom: '10',
          },
          grid: {
              left: 10,
              right: 10,

              containLabel: true,
          },
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
              axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度

                  }
              }
          },
          yAxis: {
              type: 'value',
              splitNumber:4,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
               axisLine: {
                  lineStyle: {
                    ype: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度
                  }
              },
              splitLine: {
                  lineStyle: {
                      type: 'dashed' // y轴分割线类型
                  }
              },
              axisTick: {       //y轴刻度线
                  show: false
              },
          },
          series: [{
              name:'来访人数/个',
              data: [820, 932, 901, 934, 1290, 1330, 1320,],
              type: 'line',
              smooth: true,

          }]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },
    //员工销讲
    Pinspeakfun2(){
         let chartDom = document.getElementById('Pinspeak2');
      let myChart = echarts.init(chartDom);
      let option= {
          tooltip: {
                trigger: 'axis'
              },
          legend: {
              data: ['来访人数/个'],
              bottom: '10',
          },
          grid: {
              left: 10,
              right: 10,

              containLabel: true,
          },
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
              axisLine: {
                  lineStyle: {
                    type: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度

                  }
              }
          },
          yAxis: {
              type: 'value',
              splitNumber:4,
              axisLabel: {    //重点在这一块，其余可以忽略
                  textStyle: {
                      color: '#212121',  //更改坐标轴文字颜色
                  }
              },
               axisLine: {
                  lineStyle: {
                    ype: 'solid',
                    color: '#DDE1EE',//x线的颜色
                    width:'1'//坐标线的宽度
                  }
              },
              splitLine: {
                  lineStyle: {
                      type: 'dashed' // y轴分割线类型
                  }
              },
              axisTick: {       //y轴刻度线
                  show: false
              },
          },
          series: [{
              name:'来访人数/个',
              data: [820, 932, 901, 934, 1290, 1330, 1320,],
              type: 'line',
              smooth: true,

          }]
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize();});
    },

    //时间选择
    tabtimetap(index) {
      this.TimetoAhoose = index;
      this.fromobj.starttime = "";
      this.fromobj.endoftime = "";
      this.customtime = "";
      this.getorgCode();
    },
    //自定义时间
    confirmtime() {
      if (this.customtime == "") {

      } else {
        this.TimetoAhoose = 6;
        const d = new Date(this.customtime[0]);
        this.fromobj.starttime = d.getFullYear() + "-" + this.Zeropadding(d.getMonth() + 1) + "-" + this.Zeropadding(d.getDate());
        const c = new Date(this.customtime[1]);
        this.fromobj.endoftime = c.getFullYear() + "-" + this.Zeropadding(c.getMonth() + 1) + "-" + this.Zeropadding(c.getDate());
      }
    },

  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1200px;
  padding-bottom: 100px;
}

// 进度条
 .jinbox {
      width: 100%;
      height: 18px;
      line-height: 18px;
      display: flex;
      font-size: 16px;
      color: #2C3542;
      margin-top: 20px;
      .jinboxtit {
            width: 14%;
            height: 18px;
            padding-right: 6px;
            white-space: nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }
        .jinbox-box {
            width: 75%;
            height: 100%;
            border-radius: 8px;
            background: #F2F2F2;
        }
        .boxbaifenbi {
            height: 100%;
            background:#60D7A0;
            border-radius: 8px;
        }
        .boxbaifenbi2 {
            height: 100%;
            background: #5B8FF9;
        }
        .jinboxbott {
            width: 16%;
            text-indent: 50px;
        }
  }




#main{
  width: 100%;
  height: 380px;
}
#Brokenline1{
  width: 100%;
  height: 350px;
}
#Brokenline2{
  width: 100%;
  height: 350px;
}
#Pinspeak1{
 width: 100%;
  height: 350px;
}
#Pinspeak2{
 width: 100%;
  height: 350px;
}
.app-box-san{
  width: 100%;
  height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo{
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
      }
      .text2{
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you{
    height: 100%;
    flex: 1;
    background: #FFFFFF;
    border-radius: 4px;
    .title{
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #E0E0E0;
      display: flex;
      align-content: center;
      .text1{
          flex: 2;
          line-height: 55px;
          text-indent: 20px;
          font-weight: 500;
          font-size: 16px;
          color: #333333;
      }
      .text2{
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}





.app-box-er{
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  margin-top: 15px;
  padding: 15px;
}
.grid-content{
  background: #ffffff;
  height: 90px;
  border: 1px solid #E0E0E0;
  .text1{
    height: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    line-height: 16px;
    text-indent: 20px;
    margin-top: 20px;
  }
  .text2{
    height: 32px;
    font-size: 32px;
    font-weight: normal;
    color: #32363D;
    line-height: 32px;
    text-indent: 20px;
    margin-top: 10px;
  }
}




.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top{
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.app-titel {
  width: 100%;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #32363d;
    text-indent: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
  }
}
</style>
