<template>
  <div class="divCls">
    <div class="divCls1">
      <div>
<!--        <div @click="onClick" style="color: #02a7f0;position: absolute;top: 20px">返回</div>-->
<!--        <div class="productTitle">产品推荐</div>-->
<!--        <div class="topProducttitle">-->
<!--          <div>-->
<!--            <div class="topimg">-->
<!--              <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!--              <div>随意分</div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="characteristic">-->
<!--            <div style="text-align: right;color: #02a7f0">更多></div>-->
<!--            <sub-title>特点</sub-title>-->
<!--            <div class="characteristicdata">-->
<!--              <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!--              <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!--              <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!--              <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!--              <div>☆啊啊啊啊啊啊啊啊啊啊啊啊</div>-->
<!--            </div>-->
<!--            <div class="details">-->
<!--              <van-button color="linear-gradient(to right, rgba(250, 44, 25, 1) 1%, rgba(250, 100, 25, 1) 98%)" round type="info">产品推荐</van-button>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="product">-->
<!--          <div class="topimg">-->
<!--            <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!--            <div>随意分</div>-->
<!--          </div>-->
<!--          <div class="topimg">-->
<!--            <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!--            <div>随意分</div>-->
<!--          </div>-->
<!--          <div class="topimg">-->
<!--            <img src="../../assets/images/product-recommendation-chart-1.png" alt="">-->
<!--            <div>随意分</div>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div class="service">
        <div class="topTab-sty">
          <p :style="statisticsShow == '1'?{color: '#FF19BA'} : ''" @click="statisticsShow = '1'">客户经理视角</p>
          <p :style="statisticsShow == '2'?{color: '#FF19BA'} : ''" @click="orgClick('fzh')">分支机构视角</p>
          <p :style="statisticsShow == '3'?{color: '#FF19BA'} : ''" @click="orgClick('zh')">总行视角</p>
        </div>
        <div v-if="statisticsShow == '1'" class="statistics-sty">
          <div class="marketHousehold-sty">
            <p class="title-sty">营销户数</p>
            <div class="shadow-sty">
              <div class="householdTop-sty">
                <p class="custName-sty">李不颜</p>
                <div class="householdInfo-sty">
                  <div class="householdData-sty">
                    <p style="color: #999999">当月上门营销户数</p>
                    <div class="householdNum-sty">
                      <p>{{ householdNum }} </p>
                      <p>&nbsp;户</p>
                    </div>
                  </div>
                  <div class="householdData-sty">
                    <p style="color: #999999">全行排名</p>
                    <div class="householdNum-sty">
                      <p>{{ householdNum }}</p>
                      <p> / {{ total }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <p style="margin:10px 0 10px 10px;">全行客户经理当月前三</p>
              <div v-for="(item, index) in topThree" :key="index" class="householdBottom-sty">
                <svg v-if="item.marketNumbersRank == 1" class="icon imgCls" aria-hidden="true">
                  <use xlink:href="#icon-guanjunxpx" />
                </svg>
                <svg v-else-if="item.marketNumbersRank == 2" class="icon imgCls" aria-hidden="true">
                  <use xlink:href="#icon-yajunxpx" />
                </svg>
                <svg v-else-if="item.marketNumbersRank == 3" class="icon imgCls" aria-hidden="true">
                  <use xlink:href="#icon-jijunxpx" />
                </svg>
                <div class="rank-sty">
                  <p style="margin-bottom: 0">{{ item.exeUserName }}</p>
                  <p style="margin-bottom: 0">{{ item.orgName }}</p>
                </div>
                <van-progress
                  :percentage="item.percentage"
                  stroke-width="8"
                  pivot-color="#7232dd"
                  track-color="white"
                  color="linear-gradient(to right, #B8E5FF 0%, #00A3FF 100%)"
                  style="width: 40%"
                />
                <div style="margin-left: 10px">{{ item.marketNumbers }}</div>
              </div>
            </div>
          </div>
          <div class="marketFrequency-sty">
            <p class="title-sty">营销次数</p>
            <div class="shadow-sty">
              <div class="householdTop-sty" style="background-color: #FFFAFA">
                <p class="custName-sty" style="background-color: #FF574C">李不颜</p>
                <div class="householdInfo-sty">
                  <div class="householdData-sty">
                    <p style="color: #999999">当月上门营销户数</p>
                    <div class="householdNum-sty">
                      <p style="color: #FF574C">{{ householdNum }} </p>
                      <p>&nbsp;户</p>
                    </div>
                  </div>
                  <div class="householdData-sty">
                    <p style="color: #999999">全行排名</p>
                    <div class="householdNum-sty">
                      <p style="color: #FF574C">{{ householdNum }}</p>
                      <p> / {{ total }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <p style="margin:10px 0 10px 10px;">全行客户经理当月前三</p>
              <div v-for="(item, index) in topThree" :key="index" class="householdBottom-sty">
                <svg v-if="item.marketNumbersRank == 1" class="icon imgCls" aria-hidden="true">
                  <use xlink:href="#icon-guanjunxpx" />
                </svg>
                <svg v-else-if="item.marketNumbersRank == 2" class="icon imgCls" aria-hidden="true">
                  <use xlink:href="#icon-yajunxpx" />
                </svg>
                <svg v-else-if="item.marketNumbersRank == 3" class="icon imgCls" aria-hidden="true">
                  <use xlink:href="#icon-jijunxpx" />
                </svg>
                <div class="rank-sty">
                  <p style="margin-bottom: 0">{{ item.exeUserName }}</p>
                  <p style="margin-bottom: 0">{{ item.orgName }}</p>
                </div>
                <van-progress
                  :percentage="item.percentage"
                  stroke-width="8"
                  pivot-color="#7232dd"
                  track-color="white"
                  color="linear-gradient(to right, #FCD5D3 0%, #FF574C 100%)"
                  style="width: 40%"
                />
                <div style="margin-left: 10px">{{ item.marketNumbers }}</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="statisticsShow == '2' || statisticsShow == '3'" class="statistics-sty">
          <div class="marketHousehold-sty">
            <div class="trend-btn-sty">
              <p class="title-sty">营销户数</p>
              <div class="trend-btn-sty" @click="toDetail">
                <p class="trend-text-sty">{{ marketDetail }}</p>
                <span class="iconfont icon-sty">&#xe627;</span>
              </div>
            </div>
            <div class="shadow-sty">
              <div class="householdTop-sty" style="height: 30%">
                <p class="custName-sty"style="margin-bottom: 5px;width: 150px">{{ orgName }}</p>
                <div v-if="statisticsShow == '2'" class="householdInfo-sty">
                  <div class="householdData-sty">
                    <p style="color: #999999">本行当月上门营销户数</p>
                    <div class="householdNum-sty">
                      <p>{{ householdNum }} </p>
                      <p>&nbsp;户</p>
                    </div>
                  </div>
                  <div class="householdData-sty">
                    <p style="color: #999999">本行排名</p>
                    <div class="householdNum-sty">
                      <p>{{ householdNum }}</p>
                      <p> / {{ total }}</p>
                    </div>
                  </div>
                </div>
                <div v-else-if="statisticsShow == '3'" class="householdInfo-sty">
                  <div style="align-items: center" class="householdData-sty">
                    <p style="color: #999999">全行客户经理当月上门营销户数</p>
                    <div class="householdNum-sty">
                      <p style="color: #FF574C">{{ householdNum }} </p>
                      <p>&nbsp;户</p>
                    </div>
                  </div>
                </div>
              </div>
              <p style="margin:10px 0 10px 10px;">{{ frequencyTrendText }}</p>
              <div id="market-household-trend" class="trend-sty"></div>
            </div>
          </div>
          <div class="marketFrequency-sty">
            <div class="trend-btn-sty">
              <p class="title-sty">营销次数</p>
              <div class="trend-btn-sty" @click="toDetail">
                <p class="trend-text-sty">{{ marketDetail }}</p>
                <span class="iconfont icon-sty">&#xe627;</span>
              </div>
            </div>
            <div class="shadow-sty">
              <div class="householdTop-sty" style="background-color: #FFFAFA;height: 30%">
                <p class="custName-sty" style="background-color: #FF574C;width: 150px;margin-bottom: 5px">{{ orgName }}</p>
                <div v-if="statisticsShow == '2'" class="householdInfo-sty">
                  <div class="householdData-sty">
                    <p style="color: #999999">本行当月上门营销次数</p>
                    <div class="householdNum-sty">
                      <p style="color: #FF574C">{{ householdNum }} </p>
                      <p>&nbsp;次</p>
                    </div>
                  </div>
                  <div class="householdData-sty">
                    <p style="color: #999999">本行排名</p>
                    <div class="householdNum-sty">
                      <p style="color: #FF574C">{{ householdNum }}</p>
                      <p> / {{ total }}</p>
                    </div>
                  </div>
                </div>
                <div v-else-if="statisticsShow == '3'" class="householdInfo-sty">
                  <div class="householdData-sty" style="align-items: center">
                    <p style="color: #999999">全行客户经理当月上门营销次数</p>
                    <div class="householdNum-sty">
                      <p style="color: #FF574C">{{ householdNum }} </p>
                      <p>&nbsp;次</p>
                    </div>
                  </div>
                </div>
              </div>
              <p style="margin:10px 0 10px 10px;">{{ householdTrendText }}</p>
              <div id="market-frequency-trend" class="trend-sty"></div>
            </div>
          </div>
        </div>
<!--        <div>客户服务</div>-->
<!--        <div class="icon-style" @click="outlets">-->
<!--          <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/WDCX.png" /></div>-->
<!--          <div style="margin-top: 10px">网点查询</div>-->
<!--        </div>-->
<!--        <div class="icon-style" @click="calculate">-->
<!--          <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/FZGJ.png" /></div>-->
<!--          <div style="margin-top: 10px">贷款测算</div>-->
<!--        </div>-->
<!--        <div class="icon-style" @click="pricing">-->
<!--          <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/ZRCS.png" /></div>-->
<!--          <div style="margin-top: 10px">利率定价</div>-->
<!--        </div>-->
<!--        <div class="icon-style" @click="syfComputing">-->
<!--          <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/ZRCS.png" /></div>-->
<!--          <div style="margin-top: 10px">随意分试算</div>-->
<!--        </div>-->
<!--        <div class="icon-style" @click="enterprise">-->
<!--          <div style="display: flex;align-items: center"><img style="width: 100%;height: 100%" src="@/assets/images/KHCX.png" /></div>-->
<!--          <div style="margin-top: 10px">查企业</div>-->
<!--        </div>-->
      </div>
    </div>
    <div class="divCls2">
      <div><img style="height: 100%" src="../../assets/images/chengdu-bank-logo.png" alt=""></div>
      <div>
        <div v-if="PerAccountData.length != 0" @click="goMainView(1)" class="logindata personal">
          <div>个人贷款
            <div style="margin-left: auto;margin-right: 10px;"><span style="color: #02A7F0"
                                                                     class="iconfont icon--dengru"></span></div>
          </div>
          <!--          <div class="accountborder">-->
          <!--            <div v-for="(item, index) of PerAccountData" :key="index" class="accountdata" @click="jumpSystem(1,item)">-->
          <!--              <div>{{ item.ORGNAME + '-' + item.USERCODE}}</div>-->
          <!--              <div><span style="color: #02A7F0" class="iconfont icon&#45;&#45;dengru"></span></div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <div v-if="ComAccountData.length != 0" @click="goMainView(2)" class="logindata company">
          <div>对公贷款
            <div style="margin-left: auto;margin-right: 10px;"><span style="color: #02A7F0"
                                                                     class="iconfont icon--dengru"></span></div>
          </div>
          <!--          <div class="accountborder">-->
          <!--            <div v-for="(item, index) of ComAccountData" :key="index" class="accountdata" @click="jumpSystem(2,item)">-->
          <!--              <div>{{ item.org_name+ '-' + item.user_code }}</div>-->
          <!--              <div><span style="color: #02A7F0" class="iconfont icon&#45;&#45;dengru"></span></div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <div v-if="MovAccountData.length != 0" @click="goMainView(3)" class="logindata move">
          <div>移动展业</div>
          <!--          <div class="accountborder">-->
          <!--            <div v-for="(item, index) of MovAccountData" :key="index" class="accountdata" @click="jumpSystem(3,item)">-->
          <!--              <div>{{ item }}</div>-->
          <!--              <div><span style="color: #02A7F0" class="iconfont icon&#45;&#45;dengru"></span></div>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <sub-title>辅助工具</sub-title>
        <div class="KHFWDataStyle">
          <div @click="Recommend">
            <img src="@/assets/images/CPTJ.png" alt="">
            <div>产品推介</div>
          </div>
          <div @click="outlets">
            <img src="@/assets/images/WDCX.png" alt="">
            <div>网点查询</div>
          </div>
          <div @click="calculate">
            <img src="@/assets/images/FZGJ.png" alt="">
            <div>贷款测算</div>
          </div>
          <div @click="pricing">
            <img src="@/assets/images/ZRCS.png" alt="">
            <div>利率定价</div>
          </div>
          <div @click="syfComputing">
            <img src="@/assets/images/ZRCS.png" alt="">
            <div>随意分试算</div>
          </div>
          <div @click="enterprise">
            <img src="@/assets/images/KHCX.png" alt="">
            <div>查企业</div>
          </div>
        </div>
      </div>
      <van-popup
        v-model="userDialog"
        :close-on-click-overlay="true"
        :style="{ height: '217px', width: '526px' }"
      >
        <van-form>
          <div class="popup-heater">选择系统账号</div>
          <div v-if="dialogList.length!=0" class="popup-body">
            <div class="dialog-item" v-for="(item,index) in dialogList" @click="jumpSystem(sysNo,dialogList[index])"
                 :key="index">
              <svg style="width: 20px;height: 20px;" class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhanghaodenglu"></use>
              </svg>
              {{ item.user_code || item.USERCODE }}
            </div>
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Button } from "vant";
import nettyApi from "@/constants/api/ms-netty/netty.api";
import { NativeUI } from "@/public/ts/NativeUI";
import IF from "@/public/factory/InterFaceFactory";
import systemApi from "@/constants/api/ms-system/system.api";
import Public from "@/public/ts/Public";
import { MENU, WORKBENCH } from "@/constants/enum/menu.enum";
import { Progress } from 'vant';
import * as echarts from 'echarts';

Vue.use(Progress);
Vue.use(Button);
/**
 * @Description 统一门户
 * @Author JiangTao
 * @Date 2022-01-11 下午 06:04
 */
@Component({
  name: "TYMHView"
})
export default class TYMHView extends Vue {
  PerAccountData = []; //个人账户数据
  ComAccountData = []; //对公账户数据
  MovAccountData = []; //展业账户数据
  systemList: any = [];
  dialogList: any[] = []; //弹窗展示的用户列表
  hrCode = "";
  userDialog = false; //机构选择弹窗
  sysNo: any = "";//保存一下当前的弹窗编号
  householdNum = '100';
  total = '200';
  marketDetail = '详情分析';
  topThree = [
    {
      marketNumbersRank: 1,
      exeUserName: '李艳明',
      orgName: '某某分支行',
      percentage: 100,
      marketNumbers: '68'
    },{
      marketNumbersRank: 2,
      exeUserName: '张三',
      orgName: '某某分支行',
      percentage: 45,
      marketNumbers: '34'
    },{
      marketNumbersRank: 3,
      exeUserName: '赵四',
      orgName: '某某分支行',
      percentage: 80,
      marketNumbers: '52'
    }
  ];
  active = 0;
  household: any;
  frequency: any;
  trendData = [
    {
      datas: [
        {
          date: '1',
          frequency: 70
        },{
          date: '2',
          frequency: 100
        },{
          date: '3',
          frequency: 40
        },{
          date: '4',
          frequency: 130
        },
      ]
    }
  ];
  statisticsShow = '1';
  orgName = '某某某支行';
  householdTrendText = '';
  frequencyTrendText = '';

  mounted() {
    this.PerAccountData = []; //个人账户数据
    this.ComAccountData = []; //对公账户数据
    this.MovAccountData = []; //展业账户数据
    this.systemList = this.$route.params.systemList;
    this.hrCode = this.$route.params.hrCode;
    this.selectXDUserList();
    this.selectGDUserList();
    this.selectZYUSerList();
  }

  onClick() {
    this.$router.push({path: "/login"});
  }

  /**
   * @Description 网点查询
   * @Author JiangTao
   * @Date 2022-01-11 下午 09:09
   */
  outlets() {
    console.log("网点查询");
  }

  /**
   * @Description 产品推介/
   * @Author JiangTao
   * @Date 2022-01-11 下午 09:09
   */
  Recommend() {
    this.$router.push({
      path:'/ProductsRecommended'
    });
  }

  /**
   * @Description 贷款测算
   * @Author JiangTao
   * @Date 2022-01-11 下午 09:10
   */
  calculate() {
    this.$router.push({
      path:'/AuxiliaryTools',
      query: {
        activeKey: '1'
      }
    });
  }

  /**
   * @Description 利率定价
   * @Author JiangTao
   * @Date 2022-01-11 下午 09:10
   */
  pricing() {
    this.$router.push({
      path:'/AuxiliaryTools',
      query: {
        activeKey: '0'
      }
    });
  }

  /**
   * @Description 随意分试算
   * @Author wanghang
   * @Date 2022-03-3 下午
   */
  syfComputing() {
    this.$router.push({
      path:'/AuxiliaryTools',
      query: {
        activeKey: '2'
      }
    });
  }

  /**
   * @Description 查企业
   * @Author JiangTao
   * @Date 2022-01-11 下午 09:10
   */
  enterprise() {
    // console.log("查企业");
    this.$router.push({
      path:'/workbench/commonly-used/company/customer-inquiry',
    });
  }

  //查询信贷用户
  selectXDUserList() {
    const params = {
      tc: nettyApi.TRADE_CODE.selectUserList,
      employee_id: this.hrCode
    };
    NativeUI.showWaiting();
    IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
      NativeUI.closeWaiting();
      console.log(res);
      if (res.rc == "1") {
        this.ComAccountData = res.UserList;
      } else {
        if (res.ret_code != "111111") {
          NativeUI.toast("查询用户失败,请重试");
        }
      }
    });
  }

  //查询个贷用户
  selectGDUserList() {
    const params = {
      tc: nettyApi.TRADE_CODE.selectGDUserList,
      employee_id: this.hrCode,
      QFLGE: "1",
      id_card_no: ""
    };
    NativeUI.showWaiting();
    IF.transferDataInter(nettyApi.commonRq, params).then((res: any) => {
      NativeUI.closeWaiting();
      console.log("个贷用户", res);
      if (res.rc == "1") {
        this.PerAccountData = res.CustomerGRArray;
      } else {
        if (res.ret_code != "111111") {
          NativeUI.toast("查询用户失败,请重试");
        }
      }
    });
  }

  //查询展业用户
  selectZYUSerList() {
    console.log("查询展业用户");
  }

  //弹框或者直接跳转
  goMainView(index: any) {
    if (index == "1") {
      // this.PerAccountData = this.PerAccountData.concat(this.PerAccountData);
      if (this.PerAccountData.length == 1) {
        this.jumpSystem(1, this.PerAccountData[0]);
      } else {
        this.dialogList = this.PerAccountData;
        this.sysNo = 1;
        this.userDialog = true;
      }
    } else if (index == "2") {
      if (this.ComAccountData.length == 1) {
        this.jumpSystem(2, this.ComAccountData[0]);
      } else {
        this.dialogList = this.ComAccountData;
        this.sysNo = 2;
        this.userDialog = true;
      }
    } else if (index == "3") {
      if (this.MovAccountData.length == 1) {
        this.jumpSystem(3, this.MovAccountData[0]);
      } else {
        this.dialogList = this.MovAccountData;
        this.sysNo = 3;
        this.userDialog = true;
      }
    }
  }

  //跳转对应系统
  jumpSystem(systemType: any, item: any) {
    this.userDialog = false; //先关闭弹窗
    if (systemType == 1) {
      sessionStorage.setItem("user_code", item.USERCODE);
      sessionStorage.setItem("org_code", item.ORGCODE);
      sessionStorage.setItem("ORGNAME", item.ORGNAME);
      sessionStorage.setItem("USERNAME", item.USERNAME);
      sessionStorage.setItem("roleSystm", "personal");
      this.queryMenuList(item.USERCODE);
    } else if (systemType == 2) {
      sessionStorage.setItem("user_code", item.user_code);
      sessionStorage.setItem("org_code", item.org_no);
      sessionStorage.setItem("roleSystm", "company");
      this.queryMenuList(item.user_code);
    } else if (systemType == 3) {
      console.log("展业");
    }
  }

  /**
   *@Description 菜单查询
   *@Author XWH
   *@Date 2022/2/25 20:52
   */
  queryMenuList(userCode: string) {
    const query = {
      tc: "MECP",
      appId: "933807248106598400",
      userId: userCode
    };
    NativeUI.showWaiting();
    return IF.transferDataInter(systemApi.queryMenu, {}, query).then((res: any) => {
      console.log(res);
      NativeUI.closeWaiting();
      sessionStorage.setItem("roleNos", JSON.stringify(res.roleIds)); //存入roleNo角色列表
      sessionStorage.setItem("menuType", JSON.stringify(res.sysMenuInfos));
      this.$router.push({
        path: "/main/workbench"
      });
    });
  }
  /**
   *@Description 初始化趋势图
   *@Author XWH
   *@Date 2022/3/3 15:08
   */
  initEcharts() {
    this.$nextTick(() => {
      this.household = echarts.init(document.getElementById('market-frequency-trend') as HTMLDivElement);
      this.frequency = echarts.init(document.getElementById('market-household-trend') as HTMLDivElement);
      this.initHyChart(this.frequency);
      this.initHyChart(this.household);
    });
  }
  initHyChart(myChart: any) {
    console.log('初始化', myChart);
    const _this = this;
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        name: '日',
        axisTick: {
          show: false
        },
        data: _this.trendData[0].datas.map(f => f.date),
        axisLabel: {
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        name: '次'
      },
      series: [
        {
          data: _this.trendData[0].datas.map(f => f.frequency),
          type: 'line'
          // areaStyle: {
          //   color: '#ff0',
          //   opacity: 0.5
          // }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 50
        },
        {
          start: 0,
          end: 50
        }
      ]
    };
    myChart.setOption(option);
  }

  /**
  *@Description 展示分支机构营销统计页
  *@Author XWH
  *@Date 2022/3/4 19:49
  */
  orgClick (type: string) {
    if(type == 'zh'){
      this.orgName = '总行';
      this.statisticsShow = '3';
      this.householdTrendText = '全行营销户数趋势';
      this.frequencyTrendText = '全行营销次数趋势';
    }else if (type == 'fzh'){
      this.statisticsShow = '2';
      this.orgName = '某某某分支行';
      this.householdTrendText = '本行营销户数趋势';
      this.frequencyTrendText = '本行营销次数趋势';
    }
    this.$nextTick(() => {
      this.initEcharts();
    });
  }
  /**
  *@Description 统计详情页
  *@Author XWH
  *@Date 2022/3/5 12:36
  */
  toDetail() {
    this.$router.push({
      path: '/MarketStatisticsDetail'
    });
  }
}
</script>

<style lang="scss" scoped>
.divCls {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  padding: 1% 0.5%;
  display: flex;
  justify-content: space-around;
}

.divCls1 {
  width: 70%;
  height: auto;
}

.divCls1 > div {
  background-color: white;
  border-radius: 20px;
  padding: 10px;
}

.divCls1 > div:nth-child(1) {
  height: 30%;
  margin-bottom: 2%;
}

.divCls1 > div:nth-child(2) {
  height: 70%;
}

.divCls2 {
  width: 27%;
  height: auto;
  background-color: white;
  border-radius: 20px;
  padding: 25px;
}

.divCls2 > div:nth-child(1) {
  height: 6%;
}

.divCls2 > div:nth-child(2) {
  height: 94%;
  padding-bottom: 40px;
  overflow-y: auto;
}

.logindata {
  width: 100%;
  margin: 20px auto 0 auto;
  height: auto;
}

.logindata > div:nth-child(1) {
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 20px;
  border-radius: 10px;
}

.personal > div:nth-child(1) {
  background-image: url("../../assets/images/GRDKimg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.company > div:nth-child(1) {
  background-image: url("../../assets/images/DGDKimg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.move > div:nth-child(1) {
  background-image: url("../../assets/images/ZYXTimg.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.personal > div:nth-child(2) {
  border: 1px solid rgba(189, 212, 254, 1);
}

.company > div:nth-child(2) {
  border: 1px solid rgba(254, 225, 159, 1);
}

.move > div:nth-child(2) {
  border: 1px solid #FEBDBDFF;
}

.accountborder {
  padding: 0 7px 0 20px;
  max-height: 165px;
  overflow-y: auto;
}

.accountdata {
  height: 55px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e1e2e3;
}

.accountdata:last-child {
  border-bottom: 0;
}

.icon-style{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*.service > div {*/
/*  display: flex;*/
/*  justify-content: space-between;*/
/*  align-items: center;*/
/*}*/

/*.service > div:nth-child(1) {*/
/*  width: 25px;*/
/*  font-size: 18px;*/
/*  font-weight: bold;*/
/*}*/

/*.service div > div:nth-child(1) {*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  border-radius: 30px;*/
/*  !*background-color: red;*!*/
/*  !*margin-right: 10px;*!*/
/*}*/

.productTitle {
  height: 5%;
  font-size: 20px;
  font-weight: bold;
}

.topProducttitle {
  height: 63%;
  display: flex;
  justify-content: flex-start;
}

.topProducttitle > div {
  width: 50%;
}

.topProducttitle > div:nth-child(1) {
  height: 100%;
  padding: 15px 0;
}

.product {
  height: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product > div {
  width: 31%;
  height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
}

.topimg {
  height: 100%;
  border-radius: 15px;
  box-shadow: 0 0 5px rgba(253, 80, 101, 0.5);
}

.topimg > img {
  width: 100%;
  height: 80%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.topimg > div {
  width: 100%;
  height: 20%;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.product > div > img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.characteristic {
  padding-left: 15px;
  display: flex;
  flex-direction: column;
}

.characteristicdata {
  padding-left: 15px;
  height: 60%;
  overflow-y: auto;
}

.characteristicdata div {
  font-size: 16px !important;
  line-height: 30px;
}

.details {
  width: 100%;
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
}

.popup-heater {
  width: 100%;
  height: 13%;
  line-height: 55px;
  padding-left: 3%;
  font-size: 18px;
  font-family: "Arial Normal", "Arial";
  border-bottom: 1px solid #d7d7d7;
}

.popup-body {
  width: 96%;
  height: 100%;
  /*padding: 3.5% 0;*/
  line-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}

.dialog-item {
  display: flex;
  font-size: 16px;
  align-items: center;
  justify-content: center;
}
.service {
  display: flex;
  flex-direction: column;
  /*justify-content: space-between;*/
  /*align-items: center;*/
}
.topTab-sty{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  height: 40px;
  p{
    font-size: 16px;
    margin-right: 10px;
    color: #838383;
  }
}
.statistics-sty{
  display: flex;
  justify-content: space-around;
  height: 90%;
  width: 100%;
}
.marketHousehold-sty{
  width: 45%;
  height: 90%;
  display: flex;
  flex-direction: column;
}
.marketFrequency-sty{
  width: 45%;
  height: 90%;
  display: flex;
  flex-direction: column;
}
.title-sty{
  font-size: 20px;
  font-weight: bold;
}
.householdTop-sty{
  height: 40%;
  border-radius: 20px;
  background-color: #F5FBFF;
  //box-shadow: -5px -5px 10px -4px #C9C9C9,5px -5px 10px -4px #C9C9C9;
  p{
    font-size: 18px;
  }

}
.custName-sty{
  width: 100px;
  text-align: center;
  color: white;
  background-color: #00A3FF;
  border-radius: 10px 0 10px 0;
  line-height: 40px;
}
.householdInfo-sty{
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
}
.householdData-sty{
  display: flex;
  flex-direction: column;
}
.householdNum-sty{
  display: flex;

}
.householdNum-sty > p:nth-child(1){
  font-size: 24px;
  color: #00A3FF;
}
.householdNum-sty > p:nth-child(2){
  font-size: 16px;
  color: #999999;
  align-self: flex-end;
}
.householdBottom-sty{
  width: 100%;
  margin: 0 0 10px 10px;
  display: flex;
  align-items: center;
  border-radius: 20px;

  /*justify-content: space-between;*/
}
.householdBottom-sty div {
  width: 30%;
  font-size: 14px;
  color: #333333;
}
::v-deep .van-progress__pivot {
  display: none;
}
.imgCls {
  width: 30px;
  height: 30px;
}
.rank-sty{
  color: #999999;
  font-size: 14px;
  margin-left: 5px;
}
.shadow-sty{
  box-shadow: 0 0 10px #C9C9C9;
  border-radius: 20px;
  height: 100%
}
.trend-sty {
  width: 100%;
  height: 250px;
}
.KHFWStyle {}
.KHFWDataStyle {
  display: grid;
  grid-template-columns: repeat(3, 32%);
  row-gap: 20px;
}
.KHFWDataStyle > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.KHFWDataStyle > div img {
  width: 50%;
}
::v-deep .d-subtitle {
  margin: 10px 0;
}
.trend-btn-sty{
  display: flex;
  justify-content: space-between;
}
.trend-text-sty {
  font-size: 16px;
  color: #3654f3;
}
.icon-sty {
  color: #3654f3;
}
</style>
