crm/app/sys/view/customer_setting/team_statistics_data.html

{extend name="public/layout" /} {block name="title"}日常任务{/block}
{block name="body"}
<style>
    html,
    body {
        display: block;
        width: 100%;
        height: 100%;
    }

    .lay-main {
        background-color: #EEEEEE;
        width: 100%;
        height: 100%;
    }

    .flex {
        display: flex;
    }

    .lay-leftBox {
        width: 360px;
        height: 97%;
        background-color: #fff;
        margin: 10px 13px 10px;
        box-sizing: border-box;
        padding: 10px;
        overflow-y: auto;
    }

    .lay-rightBox {
        width: calc(100% - 400px);
        height: 97%;
        background-color: #fff;
        margin-top: 10px;
        margin-left: 0px;
        box-sizing: border-box;
        padding: 10px;
        position: relative;
    }

    .lay-leftTips {
        width: 100%;
        height: 18px;
        line-height: 18px;
        border-left: 5px solid #249EFB;
        box-sizing: border-box;
        padding-left: 6px;
    }

    .lay-rightTips {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
    }

    .labelIcon {
        width: 5px;
        height: 18px;
        border-radius: 2px;
        background-color: #249EFB;
    }

    .valid {
        color: #249EFB;
        font-weight: 700;
    }

    .ml6 {
        margin-left: 6px;
    }

    .layui-border-blue,
    .layui-border-blue:hover {
        color: #249EFB;
        border-color: #249EFB;
    }

    .visitlistBox {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .visitItemBox {
        flex: 1;
    }

    .layui-border-black {
        margin: 0px 5px 6px !important;
        position: relative;
    }

    .lay-close {
        position: absolute;
        top: -15px;
        right: -10px;
        z-index: 99 !important;
    }

    .fieldBox {
        width: 100%;
        display: flex;
        box-sizing: border-box;
        padding: 10px 0px;
    }

    .fieldLeftBox {
        width: 60%;
        box-sizing: border-box;
    }

    .fieldRightBox {
        flex: 1;
        margin-left: 10px;
        box-sizing: border-box;
    }

    .fieldTitle {
        font-size: 13px;
        color: #333333;
        font-weight: 600;
        line-height: 25px;
    }

    .fieldViewBox {
        border: 1px solid #EEEEEE;
        padding: 5px;
        border-radius: 4px;
        box-sizing: border-box;
        height: 360px;
        overflow: auto;
    }

    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    .fieldViewBox::-webkit-scrollbar {
        width: 4px;
    }

    /* 滚动槽 */
    .fieldViewBox::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
        border-radius: 0px;
    }

    /* 滚动条滑块 */
    .fieldViewBox::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #cccccc;
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    .searchBox {
        width: 100%;
        height: 40px;
        border: 1px solid #EEEEEE;
        border-radius: 4px;
        box-sizing: border-box;
        padding: 0px 10px;
        display: flex;
        align-items: center;
    }

    .searchBox>input {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        outline: none;
        border: none;
    }

    .selectFieldBox {
        width: 100%;
        height: auto;
        overflow: hidden;
        box-sizing: border-box;
        padding: 10px 0px 10px;
    }

    .layui-icon-ok:before {
        font-size: 12px !important;
    }

    .layui-form-checkbox {
        margin-bottom: 5px;
    }

    .sortItemBox {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
    }

    .sortLeft>img {
        width: 16px;
    }

    .sortRight>img {
        width: 16px;
    }

    .moveElement {
        cursor: move;
    }

    .fixed-btn {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 10px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #cccccc;
        margin-top: 15px;
        position: absolute;
        bottom: 0px;
        left: 0px;
    }

    .mt10 {
        margin-top: 10px;
    }

    .layui-form-checkbox i {
        line-height: 23px !important;
    }
    .imgview {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        position: relative;
    }

    .pagesbox {
        display: block;
        width: 100%;
        position: relative;
        background: #f0f4f7;
        overflow: hidden;
    }

    .topbgbox {
        display: block;
        width: 100%;
        height: 160px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .topbgbox::before {
        content: "";
        width: 140%;
        height: 160px;
        position: absolute;
        left: -20%;
        top: 0;
        border-radius: 0 0 50% 50%;
        background: linear-gradient(160deg, #2376ff, #2376ff);
    }

    .clearfix::after {
        clear: both;
        content: ' ';
        display: table;
    }

    .clearfix::before {
        content: ' ';
        display: table;
    }

    .sortbox {
        padding: 16px 8px 12px;
        position: relative;
        z-index: 1;
        color: #fff;
    }

    .left {
        float: left;
    }

    .right {
        float: right;
    }

    .leftdapartbox {
        display: block;
        position: relative;
        top: 3px;
    }

    .dapartextbox {
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        float: left;
    }

    .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .leftdapartbox img {
        float: left;
        width: 6px;
        margin-left: 3px;
        position: relative;
        top: 8px;
    }

    .toprightbox {
        display: block;
        height: 28px;
        background: rgba(240, 244, 247, 0.2);
        border-radius: 3px;
        padding: 4px 56px 4px 3px;
        position: relative;
        overflow: hidden;
        float: right;
        box-sizing: border-box;
    }

    .toprightbox div {
        float: left;
        display: block;
        height: 20px;
        line-height: 20px;
        padding: 0 3px;
        text-align: center;
        margin-right: 5px;
        border-radius: 5px;
        color: #FFFFFF;
        font-size: 12px;
    }

    .toprightbox div.rightallbox {
        position: absolute;
        top: 0;
        right: 0;
        width: 54px;
        background: rgba(240, 244, 247, 0.2);
        line-height: 28px;
        height: 28px;
        border-radius: 0;
        box-sizing: border-box;
    }

    .rightallbox img {
        float: left;
        width: 16px;
        margin-left: 5px;
        position: relative;
        top: 6px;
    }

    .toprightbox div.nowsurvey {
        background: #1f61cd !important;
    }

    .surveybox {
        display: block;
        width: 95%;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px rgba(38, 146, 253, 0.1);
        border-radius: 5px;
        overflow: hidden;
        padding: 15px 0 0;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
    }

    .topsurveybox {
        display: block;
        padding: 0 10px 12px;
    }

    .leftopsurvey {
        display: block;
        padding-left: 9px;
        position: relative;
        line-height: 20px;
        font-size: 13px;
        font-weight: bold;

    }

    .leftopsurvey::before {
        content: " ";
        display: block;
        width: 4px;
        height: 14px;
        background: #041826;
        position: absolute;
        top: 3px;
        left: 0;
    }

    .moneybox {
        font-size: 12px;
        font-weight: bold;
        line-height: 20px;
    }

    .color44D7B6 {
        color: #44D7B6 !important;
    }

    .colorF54D64 {
        color: #F54D64 !important;
    }

    .color333 {
        color: #333;
    }

    .width25 {
        width: 25%;
    }

    .center {
        text-align: center;
    }

    .numbox {
        line-height: 25px;
        font-size: 14px;
        color: #041826;
        font-weight: bold;
    }

    .everysurveynum {
        position: relative;
        float: left;
        padding-bottom: 10px;
    }

    .ftext {
        color: #89A0B7;
        font-size: 12px;
        line-height: 18px;
        margin-top: 4px;
    }

    .mr16 {
        margin-right: 12px;
    }

    .ratebox {
        display: block;
        width: 94%;
        background: #FFFFFF;
        border-radius: 5px;
        margin: 8px auto 0;
        padding: 14px 10px;
        box-sizing: border-box;
    }

    .everyratebox {
        display: block;
        width: 60px;
        height: 60px;
        background: linear-gradient(rgba(74, 205, 253, 0.18), rgba(36, 158, 251, 1));
        background-image: -webkit-linear-gradient(90deg, rgba(36, 158, 251, 1), rgba(74, 205, 253, 0.18));
        border-radius: 50%;
    }

    .everyratebox .ratecontentbox {
        display: block;
        width: 50px;
        height: 50px;
        background: #FFFFFF;
        border-radius: 50%;
        position: absolute;
        top: 5px;
        left: 5px;
        overflow: hidden;
        padding-top: 10px;
        box-sizing: border-box;
    }

    .relative {
        position: relative;
    }

    .everyratebox1 {
        background: linear-gradient(rgba(121, 237, 220, 0.18), rgba(68, 215, 182, 1));
        background-image: -webkit-linear-gradient(90deg, rgba(68, 215, 182, 1), rgba(121, 237, 220, 0.18));
    }

    .everyratebox2 {
        background: linear-gradient(rgba(252, 219, 0, 0.18), rgba(247, 181, 0, 1));
        background-image: -webkit-linear-gradient(90deg, rgba(247, 181, 0, 1), rgba(252, 219, 0, 0.18));
    }

    .everyratebox3 {
        background: linear-gradient(rgba(253, 157, 0, 0.18), rgba(250, 100, 0, 1));
        background-image: -webkit-linear-gradient(90deg, rgba(250, 100, 0, 1), rgba(253, 157, 0, 0.18));
    }

    .ratenumbox {
        font-weight: bold;
        font-size: 13px;
        color: #222;
        line-height: 18px;
    }

    .ratetextbox {
        display: block;
        font-size: 10px;
        line-height: 14px;
        color: #89A0B7;
    }
    .sortbtnbox{
      padding: 12px 10px 8px;
    }
    .everysortbtn{
      text-align: center;
      line-height: 18px;
      margin-right: 12px;
    }
    .allsurveybox{
      display: block;
      padding-bottom: 10px;
    }
    .font14{
      font-size: 14px;
    }
    .ml8{
      margin-left: 4px;
    }
    .orderimg{
      display: block;
      width: 6px;
    }
    .toporderimg{
        margin-top: 6px;
        margin-bottom: 1px;
        transform: rotateX(180deg);
    }
    .topsurveybox img{
      width: 13px;
      height: 13px;
      border-radius: 50%;
      position: relative;
      top: 1.5px;
      float: left;
    }
    .leftopsurvey1{
      padding-left: 4px;
    }
    .leftopsurvey1::before{
      display: none !important;
    }
    .barechart{
        display: block;
        width: 100%;
        height:170px;
    }
</style>

<body>
    <div class="lay-main flex">
        <div class="lay-leftBox">
            <div class="lay-leftTips">手机端示例</div>
            <div class="imgview">
                <div class="pagesbox ">
                    <div class="topbgbox"></div>
                    <div class="clearfix sortbox">
                        <div class="left leftdapartbox clearfix">
                            <div class="ellipsis dapartextbox">团队部门名称</div>
                            <img
                                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAKCAYAAAC5Sw6hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEqADAAQAAAABAAAACgAAAADKOW4WAAAAhElEQVQoFWP8//9/GQMDQx4QswIxExAzQmkQG52PLAdi/wfiuYyMjOmMQIOeADnSQEwu+AY0iBtk4xRyTYDqa4XrB7qqHYjJAQhDYKYBTSHVsE6YXgyaBMN6MDSjCxBhWD+6Hpx8PIZNwqkJlwQWw6biUktQHGhYPRC/B+JuIAYlQJwAAIgmA7GMAt7oAAAAAElFTkSuQmCC">
                        </div>

                        <div class="toprightbox clearfix">
                            <div class="everysurveybtn nowsurvey">今日</div>
                            <div class="everysurveybtn ">近7日</div>
                            <div class="everysurveybtn ">近一月</div>
                            <div class="everysurveybtn ">其他</div>
                            <div class="everysurveybtn rightallbox" style="margin-right: 0px;">
                                <img
                                    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAc1JREFUeF7tmiFLRUEQhc+pFkEQRBBMFjWIxb8hYrHZzWYt/gG7xWDyWcRisRj8AQomk8EsWEeuvPDeFd/uwux1995z6x3mzXx7Znbm8oiBPxx4/hAAKWDgBFQCAxeAmmAnJWBmcwCO/1DbJ4BXkrf/ocbsAMxsCcAdgK1AgvcADkm+dwmiCwAjALuRSY1I7kXauph1AaA50eXIaD9INorp7OkCgKVkQzJ7TJPxZP8xMxMAKSCBgEpAPUBNMHtj1i0wQSA7bV2DmgM0CNU3CU7s75sAFlpzzFezvwO4JvkYmnGq6wEJ+3uT+zrJl1kQagSQsr+fkjzpG4A3AKshaY/fP5Pc6BsA16ZVYwkIQKT8f8xC66sUUNsk6H1i3v5S1Blj+2sZ8g7Y219MUik2AtCm5X1i3v5STjfGtkoFmNk8gDMA+wAWW4k+ALgkedFLAGa2AuAGwHYgwSuSByEI1SnAzM4BHIUSG78P7io1AmhW8bVIAE8kd2bZ1gjAdVQXgNquQe9rVQqQAloEvCVWuj+VgEpAJTBNoPSa9Y5PPUA9QD1APWCKgHeTKd2fmmDkh4XemmX/k1Tp5ASg9BPKHZ8UkJtw6f6lgNJPKHd833wkoVD2aixMAAAAAElFTkSuQmCC">
                                <span>统计</span>
                            </div>
                        </div>
                    </div>

                    <div class="surveybox">
                        <div class="clearfix topsurveybox">
                            <div class="left leftopsurvey">数据概况</div>
                            <div class="right moneybox colorF54D64">业绩(万元)：256.2568</div>
                        </div>
                        <div  class="surveynumbox surveynum1box clearfix color333">
                            <div  class="width25 center everysurveynum customer_num">
                                <div class="numbox">152</div>
                                <div class="ftext">客户总量</div>
                            </div>
                            <div class="width25  center everysurveynum valid_count">
                                <div class="numbox">89</div>
                                <div class="ftext">有效线索</div>
                            </div>
                            <div class="width25 center everysurveynum visit_num">
                                <div class="numbox">26</div>
                                <div class="ftext">加微</div>
                            </div>
                            <div class="width25 center everysurveynum yylf_num">
                                <div class="numbox">21</div>
                                <div class="ftext">预约量房</div>
                            </div>
                            <div class="width25 center everysurveynum lf_num">
                                <div class="numbox">59</div>
                                <div class="ftext">量房</div>
                            </div>
                            <div class="width25 center everysurveynum yydd_num">
                                <div class="numbox">49</div>
                                <div class="ftext">预约到店</div>
                            </div>
                            <div class="width25 center everysurveynum ydd_num">
                                <div class="numbox">32</div>
                                <div class="ftext">到店</div>
                            </div>
                            <div class="width25 center everysurveynum deposit_num">
                                <div class="numbox">13</div>
                                <div class="ftext">定金</div>
                            </div>
                            <div class="width25 center everysurveynum signed_num">
                                <div class="numbox">5</div>
                                <div class="ftext">合同</div>
                            </div>
                            <div class="width25 center everysurveynum yyhd_num">
                                <div class="numbox">9</div>
                                <div class="ftext">预计到外场</div>
                            </div>
                            <div class="width25 center everysurveynum ydc_num">
                                <div class="numbox">4</div>
                                <div class="ftext">外场到场</div>
                            </div>
                        </div>
                        <div style="display:none;" class="barechart" id="barechart"></div>
                    </div>
                    <div class="clearfix ratebox">
                        <div class="everyratebox relative left mr16">
                            <div class="ratecontentbox center ">
                                <div class="ratenumbox">58%</div>
                                <div class="ratetextbox">量房率</div>
                            </div>
                        </div>
                        <div class="everyratebox relative left mr16 everyratebox1">
                            <div class="ratecontentbox center ">
                                <div class="ratenumbox">30%</div>
                                <div class="ratetextbox">到店率</div>
                            </div>
                        </div>
                        <div class="everyratebox relative left mr16 everyratebox2">
                            <div class="ratecontentbox center ">
                                <div class="ratenumbox">2%</div>
                                <div class="ratetextbox">定金率</div>
                            </div>
                        </div>
                        <div class="everyratebox relative left everyratebox3">
                            <div class="ratecontentbox center ">
                                <div class="ratenumbox">1.5%</div>
                                <div class="ratetextbox">合同率</div>
                            </div>
                        </div>
                    </div>
                    <div class="sortbtnbox clearfix">
                      <div class="left everysortbtn">
                        <div class="left font14"> 业绩 </div>
                        <div class="left ml8">
                          <img src="__STATIC__/img/crmasc.png" class="orderimg toporderimg" />
                          <img src="__STATIC__/img/crmasc.png" class="orderimg" />
                        </div>
                      </div>
                      <div class="left everysortbtn">
                        <div class="left font14"> 加微 </div>
                        <div class="left ml8">
                          <img src="__STATIC__/img/crmasc.png" class="orderimg toporderimg" />
                          <img src="__STATIC__/img/crmasc.png" class="orderimg" />
                        </div>
                      </div>
                      <div class="left everysortbtn">
                        <div class="left font14"> 量房 </div>
                        <div class="left ml8">
                          <img src="__STATIC__/img/crmasc.png" class="orderimg toporderimg" />
                          <img src="__STATIC__/img/crmasc.png" class="orderimg" />
                        </div>
                      </div>
                      <div class="left everysortbtn">
                        <div class="left font14"> 到店 </div>
                        <div class="left ml8">
                          <img src="__STATIC__/img/crmasc.png" class="orderimg toporderimg" />
                          <img src="__STATIC__/img/crmasc.png" class="orderimg" />
                        </div>
                      </div>
                      <div class="left everysortbtn">
                        <div class="left font14"> 定金 </div>
                        <div class="left ml8">
                          <img src="__STATIC__/img/crmasc.png" class="orderimg toporderimg" />
                          <img src="__STATIC__/img/crmasc.png" class="orderimg" />
                        </div>
                      </div>
                      <div class="left everysortbtn" style="margin-right: 0;">
                        <div class="left font14"> 合同 </div>
                        <div class="left ml8">
                          <img src="__STATIC__/img/crmasc.png" class="orderimg toporderimg" />
                          <img src="__STATIC__/img/crmasc.png" class="orderimg" />
                        </div>
                      </div>
                    </div>
                    <div class="allsurveybox">
                      <div class="surveybox">
                        <div class="clearfix topsurveybox">
                          <img src="__STATIC__/img/default.png" />
                          <div class="left leftopsurvey leftopsurvey1">总管理员</div>
                          <div class="right moneybox color44D7B6">业绩(万元)：256.2568</div>
                        </div>
                        <div class="surveynumbox clearfix color333">
                            <div class="width25 center everysurveynum customer_num">
                                <div class="numbox">152</div>
                                <div class="ftext">客户总量</div>
                            </div>
                            <div class="width25  center everysurveynum valid_count">
                                <div class="numbox">89</div>
                                <div class="ftext">有效线索</div>
                            </div>
                            <div class="width25 center everysurveynum visit_num">
                                <div class="numbox">26</div>
                                <div class="ftext">加微</div>
                            </div>
                            <div class="width25 center everysurveynum yylf_num">
                                <div class="numbox">21</div>
                                <div class="ftext">预约量房</div>
                            </div>
                            <div class="width25 center everysurveynum lf_num">
                                <div class="numbox">59</div>
                                <div class="ftext">量房</div>
                            </div>
                            <div class="width25 center everysurveynum yydd_num">
                                <div class="numbox">49</div>
                                <div class="ftext">预约到店</div>
                            </div>
                            <div class="width25 center everysurveynum ydd_num">
                                <div class="numbox">32</div>
                                <div class="ftext">到店</div>
                            </div>
                            <div class="width25 center everysurveynum deposit_num">
                                <div class="numbox">13</div>
                                <div class="ftext">定金</div>
                            </div>
                            <div class="width25 center everysurveynum signed_num">
                                <div class="numbox">5</div>
                                <div class="ftext">合同</div>
                            </div>
                            <div class="width25 center everysurveynum yyhd_num">
                                <div class="numbox">9</div>
                                <div class="ftext">预计到外场</div>
                            </div>
                            <div class="width25 center everysurveynum ydc_num">
                                <div class="numbox">4</div>
                                <div class="ftext">外场到场</div>
                            </div>
                        </div>
                      </div>

                      
                    </div>
                </div>
            </div>
        </div>
        <div class="lay-rightBox">
            <div class="lay-rightTips">
                <div class="labelIcon"></div>
                <span class="ml6">数据概览设置</span>
            </div>
            <div class="layui-form mt10">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.customer_num" }
                    checked {/if} title="客户总量" value="customer_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.visit_num" }
                    checked {/if} title="加微" value="visit_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.yylf_num" } checked
                    {/if} title="预约量房" value="yylf_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.lf_num" } checked
                    {/if} title="量房" value="lf_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.yydd_num" } checked
                    {/if} title="预约到店" value="yydd_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.ydd_num" } checked
                    {/if} title="到店" value="ydd_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.deposit_num" }
                    checked {/if} title="定金" value="deposit_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.signed_num" }
                    checked {/if} title="合同" value="signed_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.yyhd_num" } checked
                    {/if} title="预计到外场" value="yyhd_num">
                <input lay-filter="switchTest" type="checkbox" name="addwechat" {if condition="$type.ydc_num" } checked
                    {/if} title="外场到场" value="ydc_num">
            </div>
            <div class="fixed-btn">
                <div class="layui-btn layui-btn-primary">取消</div>
                <button type="button" class="layui-btn mdt15 mdl15" id="save_all">保存</button>
            </div>
          </div>
        </div>
    </div>
</body>
{/block}
{block name="js"}
<script src="__STATIC__/js/echarts.min.js"></script>
<script>
    layui.config({
        base: '__LAYUI__/',
        urlbase: '/sys'
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'laypage', 'element'], function () {
        var $ = layui.$,
            table = layui.table,
            laypage = layui.laypage,
            element = layui.element,
            form = layui.form;

        $('#save_all').click(function () {
            var value = [];
            $("input:checkbox[name='addwechat']:checked").each(function () {
                value.push($(this).val());
            });
            if (value.length < 5) {
                layer.msg('最少选中5个统计数据展示', { anim: 6 })
                return;
            }
            $.ajax({
                type: "post",
                url: '{:url("customerSetting/team_statistics_data_save")}',
                data: { value: value },
                success: function (res) {
                    surveyfun();
                    layer.msg(res.msg, { anim: 0, time: 800 });
                }
            })

        });
        let showobj=null;
        surveyfun();
        function surveyfun(){
            $.ajax({
                type: "post",
                url: '{:url("customerSetting/teamStatisticsSetting")}',
                data: {},
                success: function (res) {
                    if(res.code==1){
                        showobj= res.data;
                        if($('.rightallbox')[0].className.indexOf('nowsurvey')>-1){
                            setTimeout(() => {
                                echartbox(showobj);
                            }, 100);
                        }

                        if(!!showobj.customer_num&&showobj.customer_num==1){
                            $($('.customer_num')[0]).show();
                            $($('.customer_num')[1]).show();
                        }else{
                            $($('.customer_num')[0]).hide();
                            $($('.customer_num')[1]).hide();
                        }
                        if (!!showobj.deposit_num && showobj.deposit_num == 1) {
                            $($('.deposit_num')[0]).show();
                            $($('.deposit_num')[1]).show();
                        } else {
                            $($('.deposit_num')[0]).hide();
                            $($('.deposit_num')[1]).hide();
                        }
                        if (!!showobj.lf_num && showobj.lf_num == 1) {
                            $($('.lf_num')[0]).show();
                            $($('.lf_num')[1]).show();
                        } else {
                            $($('.lf_num')[0]).hide();
                            $($('.lf_num')[1]).hide();
                        }
                        if (!!showobj.signed_num && showobj.signed_num == 1) {
                            $($('.signed_num')[0]).show();
                            $($('.signed_num')[1]).show();
                        } else {
                            $($('.signed_num')[0]).hide();
                            $($('.signed_num')[1]).hide();
                        }
                        if (!!showobj.valid_count && showobj.valid_count == 1) {
                            $($('.valid_count')[0]).show();
                            $($('.valid_count')[1]).show();
                        } else {
                            $($('.valid_count')[0]).hide();
                            $($('.valid_count')[1]).hide();
                        }
                        if (!!showobj.visit_num && showobj.visit_num == 1) {
                            $($('.visit_num')[0]).show();
                            $($('.visit_num')[1]).show();
                        } else {
                            $($('.visit_num')[0]).hide();
                            $($('.visit_num')[1]).hide();
                        }
                        if (!!showobj.ydc_num && showobj.ydc_num == 1) {
                            $($('.ydc_num')[0]).show();
                            $($('.ydc_num')[1]).show();
                        } else {
                            $($('.ydc_num')[0]).hide();
                            $($('.ydc_num')[1]).hide();
                        }
                        if (!!showobj.ydd_num && showobj.ydd_num == 1) {
                            $($('.ydd_num')[0]).show();
                            $($('.ydd_num')[1]).show();
                        } else {
                            $($('.ydd_num')[0]).hide();
                            $($('.ydd_num')[1]).hide();
                        }
                        if (!!showobj.yydd_num && showobj.yydd_num == 1) {
                            $($('.yydd_num')[0]).show();
                            $($('.yydd_num')[1]).show();
                        } else {
                            $($('.yydd_num')[0]).hide();
                            $($('.yydd_num')[1]).hide();
                        }
                        if (!!showobj.yyhd_num && showobj.yyhd_num == 1) {
                            $($('.yyhd_num')[0]).show();
                            $($('.yyhd_num')[1]).show();
                        } else {
                            $($('.yyhd_num')[0]).hide();
                            $($('.yyhd_num')[1]).hide();
                        }
                        if (!!showobj.yylf_num && showobj.yylf_num == 1) {
                            $($('.yylf_num')[0]).show();
                            $($('.yylf_num')[1]).show();
                        } else {
                            $($('.yylf_num')[0]).hide();
                            $($('.yylf_num')[1]).hide();
                        }
                    }
                }
            })
        }
        for(let i=0;i< $('.everysurveybtn').length;i++){
            $('.everysurveybtn')[i].index=i;
            $($('.everysurveybtn')[i]).click(function(){
                let index=this.index;
                for(let j = 0; j < $('.everysurveybtn').length; j++){
                    $($('.everysurveybtn')[j]).removeClass('nowsurvey');
                }
                $(this).addClass('nowsurvey');
                if(index==4){
                    $('.surveynum1box').hide();
                    $('.barechart').show();
                    surveyfun();
                }else{
                    $('.surveynum1box').show();
                    $('.barechart').hide();
                }
            })
            
        }
    });
    function echartbox(showobj) { 
        var myChart = echarts.init(document.getElementById('barechart'));
        var option;
        let arr = [{
            text: '客户',
            name: 'customer_num',
            num: 152
        },
        {
            text: '有效线索',
            name: 'valid_count',
            num: 89
        },
        {
            text: '加微',
            name: 'visit_num',
            num: 26
        },
        {
            text: '量房',
            name: 'lf_num',
            num: 21
        },
        {
            text: '到店',
            name: 'ydd_num',
            num: 32
        },
        {
            text: '定金',
            name: 'deposit_num',
            num: 13
        },
        {
            text: '合同',
            name: 'signed_num',
            num: 5
        },
        {
            text: '预约量房',
            name: 'yylf_num',
            num: 21
        },
        {
            text: '预约到店',
            name: 'yydd_num',
            num: 49
        },
        {
            text: '预计到外场',
            name: 'yyhd_num',
            num: 9
        },
        {
            text: '外场到场',
            name: 'ydc_num',
            num: 4
        },
        ];
        let arr1 = [],
            arr2 = [];
        for (let i = 0; i < arr.length; i++) {
            if (showobj[arr[i].name] == 1) {
                arr1.push(arr[i].text);
                arr2.push(arr[i].num);
            }

        }
        option = {
            xAxis: {
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#9DB6CF',
                        width: 2
                    }
                },
                z: 10,
                axisLabel: {
                    show: true,
                    interval: 0, //使x轴上的文字显示完全,
                    fontSize: '10',
                    formatter: function (params) {
                        let newParamsName = "";
                        if (params.length > 2) {
                            var tempStr = params.substring(0, 2) + "\n";
                            newParamsName = tempStr + params.substring(2, params.length);
                        } else {
                            newParamsName = params;
                        }
                        return newParamsName;
                    }
                },
                data: arr1
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '32',
                top: '15'
            },
            yAxis: {
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#9DB6CF',
                        width: 2
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            },
            series: [{
                type: 'bar',
                barWidth: 14,
                label: {
                    show: true,
                    color: '#222222',
                    position: 'top'
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#ABC7FE'
                    },
                    {
                        offset: 1,
                        color: '#2476FE'
                    }
                    ])
                },
                data: arr2
            }]
        };
        myChart.setOption(option);
    }
</script>
{/block}