raolu
/
PC-application


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>居民分析</title>
    <meta name="author" content="yihu.com" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
    <link rel="stylesheet" type="text/css" href="../../../plugins/toastr/toastr.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../css/resident-analysis.css" />
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body style="margin: 0">
    <div id="main">
      <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen"></header-tab>
      <header-prompt></header-prompt>
      <resident-analysis></resident-analysis>
      <vuedals></vuedals>

      <div class="mui-scroll-wrapper" style="top: 46px">
        <div class="mui-scroll">
          <!-- 位置信息 start -->
          <!-- <div class="ui-grid ui-grid-middle location-div">
                    <div class="ui-col-0 text-box c-f13 c-nowrap" style="max-width:60%;">
                        <img src="../images/dizhi_icon.png" width="12">
                        <span id="areaTitle" class="title c-666 c-f13 ml5">厦门市</span>
                    </div>
                    <div class="ui-col-0">
                        <span class="jiezhi-time c-f13"></span>
                    </div>
                    <div class="ui-col-1 c-t-right"><span class="choose-label"></span></div>
                </div> -->
          <!-- 位置信息 end -->
          <div class="ui-grid plr10 mt20">
            <div class="div-qingkuang-left" style="height: 304px">
              <div class="bgc-fff" style="height: 100%">
                <div class="plr10 c-border-b ptb10">
                  <!-- <img src="../images/xianshangjiaofeiqingkuang_icon.png" width="22" class="mr5"> -->
                  <span class="c-323232 c-bold c-f16">线上缴费情况</span>
                </div>
                <div class="ui-grid ui-grid-middle container">
                  <div class="ui-col-0 c-t-center c-w-33">
                    <p class="c-ffc800 c-f16 c-bold online-num"></p>
                    <p class="c-ffc800 c-f14 mt5 online-rate"></p>
                    <p class="c-ffc800 c-f12 mt5">线上缴费人数</p>
                  </div>
                  <div class="ui-col-0 c-t-center c-w-33 c-position-r">
                    <div class="div-jf-title2">
                      在线缴费
                      <br />
                      分析
                    </div>
                    <div id="pieChart" style="width: 100%" class="height-140 ui-col-0"></div>
                  </div>
                  <div class="ui-col-0 c-t-center c-w-33">
                    <p class="c-17b3ec c-f16 c-bold offline-num"></p>
                    <p class="c-17b3ec c-f14 mt5 offline-rate"></p>
                    <p class="c-17b3ec c-f12 mt5">线下缴费人数</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="ui-col-1"></div>
            <div class="div-qingkuang-right" style="height: 304px">
              <!-- <script type="text/html" id="line-chart"> -->
              <!-- 折线图 -->
              <!-- <line-chart v-on:getlinedata="getNewLineData" lineid="lineChart"></line-chart> -->
              <div>
                <div class="ui-grid plr10 c-border-b">
                  <div class="ui-col-0 ptb10">
                    <span class="c-333 c-f16">{{ chartObj && chartObj.panelName }}</span>
                  </div>
                  <div class="ui-col-1 c-t-right ptb5" v-show="!chartObj.noDateType">
                    <span class="date-tag" :class="{active: chartObj.selectedDateType == 1}" data-type="1" @click="changeType(1)">日</span>
                    <span class="date-tag" :class="{active: chartObj.selectedDateType == 2}" data-type="2" @click="changeType(2)">周</span>
                    <span class="date-tag" :class="{active: chartObj.selectedDateType == 3}" data-type="3" @click="changeType(3)">月</span>
                  </div>
                </div>
                <div class="ui-grid ui-grid-middle mt5 plr10" v-if="!chartObj.noshowDate">
                  <div v-if="chartObj.showDatePanel" class="ui-col-1">
                    <span>数据时间:</span>
                    <el-date-picker
                      v-model="chartObj.defaultValue[0]"
                      type="date"
                      unlink-panels
                      placeholder="开始日期"
                      :picker-options="chartObj.pickerOptions2"
                      @change="dateChange"
                      value-format="yyyy-MM-dd"></el-date-picker>
                    <span>—</span>
                    <el-date-picker
                      v-model="chartObj.defaultValue[1]"
                      type="date"
                      unlink-panels
                      placeholder="结束日期"
                      :picker-options="chartObj.pickerOptions2"
                      @change="dateChange"
                      value-format="yyyy-MM-dd"></el-date-picker>
                  </div>
                  <div v-if="!chartObj.showDatePanel" class="ui-col-1 c-f12 mtb10 c-909090">
                    <span>{{startDate}}</span>
                    ~
                    <span>{{endDate}}</span>
                    数据
                  </div>
                  <div class="ui-col-0 c-f12 c-909090 mtb10 pr15">单位：{{chartObj.unit}}</div>
                </div>
                <div v-else class="c-f12 c-909090 mtb10 pl15">单位：{{chartObj.unit}}</div>
                <div class="line-chart" id="lineChart" style="width: 100%" :style="{height: chartObj.chartheight + 'px'}"></div>
              </div>
              <!-- </script> -->
            </div>
          </div>
          <!-- <div class="mt10 bgc-fff c-border-tb pb10">line-chart
                    <div class="ui-grid ui-grid-middle c-border-b plr10">
                        <div class="ui-col-0">
                            <span class="c-323232 c-bold c-f16">线上缴费趋势</span>
                        </div>
                        <div class="ui-col-1 c-t-right ptb5">
                            <span class="date-tag active" data-type="1">日</span>
                            <span class="date-tag" data-type="2">周</span>
                            <span class="date-tag" data-type="3">月</span>
                        </div>
                    </div>
                    <div class="clearfix mt5 plr10">
                        <div class="fl c-f12 c-909090"><span id="startValue"></span> ~ <span id="endValue"></span>数据</div>
                        <div class="fr c-f12 c-909090">单位：人</div>
                    </div>
                    <div class="line-chart" id="lineChart" style="height: 200px"></div>
                </div> -->
          <div class="mt10">
            <div class="area-tab-panel">
              <div class="area-tab" v-if="levelType == 4" :class="areaType == 4?'active':''" data-val="4" @click="showTabs(4)">
                <span>各区</span>
                <i class="border-line-right"></i>
              </div>
              <div class="area-tab" v-if="levelType >= 3" :class="areaType == 3?'active':''" data-val="3" @click="showTabs(3)">
                <span>社区</span>
                <i class="border-line-right"></i>
              </div>
              <div class="area-tab" :class="areaType == 2?'active':''" data-val="2" @click="showTabs(2)">
                <span>团队</span>
                <i class="border-line-right"></i>
              </div>
            </div>
            <table class="bottom-list-table mb20" id="listTable">
              <thead>
                <tr>
                  <th>排名</th>
                  <th>线上缴费量</th>
                  <th>总缴费量</th>
                  <!-- {{if level>2 && lowLevel != 1}} -->
                  <th width="20"></th>
                  <!-- {{/if}} -->
                </tr>
              </thead>
              <tbody>
                <tr v-for="v in tableList"class="data-row" :data-name="v.name" :data-code="v.code" data-type="">
                  <td class="area-name">
                    <div v-if="v.top == 1" class="ranking ranking1">{{v.top}}</div>
                    <div v-else-if="v.top == 2" class="ranking ranking2">{{v.top}}</div>
                    <div v-else-if="v.top == 3" class="ranking ranking3">{{v.top}}</div>
                    <div v-else class="ranking">{{v.top}}</div>
                    <div class="ui-col-1 c-nowrap-multi">{{v.name}}</div>
                  </td>
                  <td>{{v.signPayOnlineNum}}</td>
                  <td>{{v.signNum}}</td>
                  <!-- {{if level>2 && lowLevel != 1}} -->
                  <td>
                    <i class="fa fa-angle-right"></i>
                  </td>
                  <!-- {{/if}} -->
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="h45">
            <div class="demo-comtop">
                <a class="mui-action-back"></a>
                <h1>线上缴费情况</h1>
                <a class="header-link">
                    <img src="../images/hanbaobao_icon.png" width="25" class="mt10">
                </a>
            </div>
        </div> -->

    <!-- 团队信息模块 -->
    <div class="modal-overlay"></div>
    <div class="modal-content">
      <div class="div-header-title">
        <div class="div-overlay-img"></div>
        <div class="div-overlay-title">团队详情</div>
      </div>
      <div class="div-overlay-content">
        <div class="pt15" id="teamInfoBox" style="height: 260px; overflow: auto"></div>
      </div>
      <div class="div-close"></div>
    </div>

    <script type="text/html" id="data-list">
      <thead>
        <tr>
          <th>排名</th>
          <th>线上缴费量</th>
          <th>总缴费量</th>
          <!-- {{if level>2 && lowLevel != 1}} -->
          <th width="20"></th>
          <!-- {{/if}} -->
        </tr>
      </thead>
      <tbody>
        {{each list as v i}}
        <tr class="data-row" data-name="{{v.name}}" data-code="{{v.code}}" data-type="">
          <td class="area-name">
            {{if v.top == 1}}
            <div class="ranking ranking1">{{v.top}}</div>
            {{else if v.top == 2}}
            <div class="ranking ranking2">{{v.top}}</div>
            {{else if v.top == 3}}
            <div class="ranking ranking3">{{v.top}}</div>
            {{else}}
            <div class="ranking">{{v.top}}</div>
            {{/if}}
            <div class="ui-col-1 c-nowrap-multi">{{v.name}}</div>
          </td>
          <td>{{v.signPayOnlineNum}}</td>
          <td>{{v.signNum}}</td>
          <!-- {{if level>2 && lowLevel != 1}} -->
          <td>
            <i class="fa fa-angle-right"></i>
          </td>
          <!-- {{/if}} -->
        </tr>
        {{/each}}
      </tbody>
    </script>

    <!-- 团队信息模板 -->
    <script type="text/html" id="teamInfo">
      <div class="plr15 pb20">
        <span class="c-f14 c-bold c-333">团队名称：</span>
        <span class="c-f14 c-333">{{team.name}}</span>
      </div>
      <div class="plr15 pb20">
        <span class="c-f14 c-bold c-333">所在社区：</span>
        <span class="c-f14 c-333">{{team.hospitalName}}</span>
      </div>
      <div class="plr15 pb20">
        <span class="c-f14 c-bold c-333">团队长：</span>
        <span class="c-f14 c-333">{{team.leaderName}}</span>
      </div>
      <div class="plr15 pb20">
        <span class="c-f14 c-bold c-333">
          团队成员(
          <span class="span-team-count">{{memberLength}}</span>
          人)：
        </span>
        <p class="c-f14 c-333 mt10">
          {{each members as member index}} {{if index == 0}} {{member.name}} {{else if index < 20}} 、{{member.name}} {{else if index == 20}} 、{{member.name}}等 {{/if}} {{/each}}
        </p>
      </div>
    </script>

    <script src="../../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/underscore-1.9.1.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/template.js"></script>
    <script src="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../plugins/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/common/event-bus.js"></script>
    <script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/common.js" type="text/javascript" charset="UTF-8"></script>
    <script src="../../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="../../../component/statistics/header-prompt.js"></script>
    <script type="text/javascript" src="../../../component/statistics/resident-analysis.js"></script>
    <script type="text/javascript" src="../../../component/statistics/resident-analysis-filter.js"></script>
    <script src="../js/resident-analysis-charts.js" type="text/javascript" charset="UTF-8"></script>
    <script src="../js/resident-analysis.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
      new Vue({
        el: '#main',
        data: {
          appname: '居民分析',
          isback: true,
          isrefresh: true,
          isfilter: true,
          isopen: false,
          self,
          initLevel: null,
          type: null,
          level: null,
          area: null,
          title: null,
          startDate: '',
          endDate: '',
          lowLevel: null,
          dateType: 1,
          selectedDateType: 1,
          analysisType: '1',
          areaType: null,
		  tableList:[],
          chooseYear: new Date().getFullYear(),
          userRole: {},
          reqParam: [],
          reqList: [],
          chartObj: {
            selectedDateType: 1,
            startDate: '', //数据展示时显示的开始时间
            endDate: '', //数据展示时显示的结束时间
            panelName: '',
            unit: '人',
            dateValue: '',
            lineid: '',
            showDatePanel: '',
            defaultValue: [],
            pickerOptions2: {
              disabledDate: function (d) {
                var start = new Date(getStartDate(chooseYear) + ' 00:00:00'),
                  end = new Date(getEndDate(chooseYear) + ' 23:59:59')
                return d < start || d > end
              }
            },
            chooseYear: '',
            noDateType: false, //不显示年月日
            chartheight: 200, //表格高度
            noshowDate: false //显示统计时间
          }
        },
        components: {
          vuedals: Vuedals.Component
        },
        mounted: function () {
          var vm = this
          this.initData()
          EventBus.$on('time-data', function (arg) {
            console.log('arg', arg)
            vm.chooseYear = arg.year
            vm.chartObj.chooseYear = arg.year
            vm.level = Number(arg.level)
            if (arg.level == '3') {
              vm.lowLevel = 2
            } else if (arg.level == '2') {
              vm.lowLevel = 1
            } else {
              vm.lowLevel = 0
            }
            vm.area = arg.areaCode || '350200'
            vm.startDate = vm.getStartDate()
            vm.endDate = vm.getEndDate()

            vm.showTabs(vm.level, 1)
            vm.initReqParams()
            vm.loadData([0, 1, 2])
            vm.bindEvents()
          })
        },
        methods: {
          changeType: function (type) {
            this.selectedDateType = type
            //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
            // this.$emit('getlinedata', { dateType: type })
            this.getNewLineData({ dateType: type })
          },
          dateChange: function () {
            var vm = this
            if (vm.defaultValue[0] && vm.defaultValue[1]) {
              if (vm.defaultValue[0] > vm.defaultValue[1]) {
                vm.$message.warning('开始时间应小于结束时间')
              } else {
                this.getNewLineData({ dateType: this.selectedDateType, dateValue: [vm.defaultValue[0], vm.defaultValue[1]] })
                // this.$emit('getlinedata', { dateType: this.selectedDateType, dateValue: [vm.defaultValue[0], vm.defaultValue[1]] })
              }
            }
          },
          initData() {
            const self = JSON.parse(window.sessionStorage.getItem('selectedRole'))
            // const self = {
            //   doctorAuthOperate: '1',
            //   high: '1',
            //   code: '350200',
            //   level: '2',
            //   name: '厦门市卫生健康委员会',
            //   isManage: '1',
            //   areas: '350200',
            //   type: '1'
            // }
            this.areaType = '4'
            this.userRole = self
            this.initLevel = this.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2
            this.level = this.initLevel
            this.area = self.code
            this.title = self.title
            //   if (self.year && !isNaN(self.year)) {
            //     this.chooseYear = parseInt(self.year);
            //   }
            this.startDate = this.getStartDate()
            this.endDate = this.getEndDate()
            this.showTabs(this.level, 1)
            this.initReqParams()
            this.reqList.push({
              level: this.level,
              lowLevel: this.lowLevel,
              area: this.area,
              title: this.title,
              analysisType: this.analysisType,
              req: this.reqParam
            })
            this.loadData([0, 1, 2])
            // this.initScroller();
            // this.shaixuanInit(self);
            this.bindEvents()
          },
          // getStartDate() {
          //   if (this.chooseYear < '2023') {
          //     return this.chooseYear + '-07-01';
          //   } else {
          //     return this.chooseYear + '-01-01';
          //   }
          // },
          getEndDate() {
            // 逻辑同原文件
            var nowdate = new Date()
            var year = nowdate.getFullYear()
            var month = nowdate.getMonth() + 1
            var day = nowdate.getDate()
            var endDate = ''
            if (this.chooseYear < '2023') {
              endDate = new Date(parseInt(this.chooseYear) + 1 + '-06-30')
            } else {
              endDate = new Date(parseInt(this.chooseYear) + '-12-31')
            }
            var now = new Date()

            if (now <= endDate) {
              return now.format('yyyy-MM-dd')
            } else {
              if (this.chooseYear < '2023') {
                return parseInt(this.chooseYear) + 1 + '-06-30'
              } else {
                return parseInt(this.chooseYear) + '-12-31'
              }
            }
          },
          initReqParams() {
            this.startDate = this.getStartDate()
            this.endDate = this.getEndDate()
            var mIndex = 82, //折线图指标index
              bIndexs = { '4': '75', '3': '76', '2': '77' }
            var bIndex = 82 //bIndexs[level];
            this.reqParam = []
            this.reqParam.push(
              httpRequest.get('/statistics/signPayOnline', {
                data: { level: this.level, area: this.area, year: this.chooseYear }
              })
            )
            this.reqParam.push(
              httpRequest.get('/statistics/interval_total', {
                data: { level: this.level, area: this.area, startDate: this.startDate, endDate: this.endDate, interval: this.selectedDateType, index: mIndex }
              })
            )
            // this.reqParam.push(
            //   httpRequest.post('/statistics/lowlevel_all_sign_pay_online', {
            //     data: { sort: 1, date: this.endDate, level: this.level, index: bIndex, area: this.area, year: this.chooseYear }
            //   })
            // )
            if (this.lowLevel) {
              this.reqParam.push(
                httpRequest.post('/statistics/lowlevel_all_sign_pay_online', {
                  data: { sort: 1, date: this.endDate, lowLevel: this.lowLevel, level: this.level, index: bIndex, area: this.area, year: this.chooseYear }
                })
              )
            } else {
              this.reqParam.push(
                httpRequest.post('/statistics/lowlevel_all_sign_pay_online', {
                  data: { sort: 1, date: this.endDate, level: this.level, index: bIndex, area: this.area, year: this.chooseYear }
                })
              )
            }
          },
          loadData(loadArr) {
            // plus.nativeUI.showWaiting();
            // getJieZhiTime();
            var vm = this
            var reqPromise = []
            for (var i = 0; i < loadArr.length; i++) {
              var j = loadArr[i]
              reqPromise.push(this.reqParam[j])
            }
            Promise.all(reqPromise, true).then(function (ress) {
              console.log(99999, ress)

              var res1, res2, res3

              for (var i = 0; i < loadArr.length; i++) {
                var j = loadArr[i] + 1
                if (j == 1) {
                  res1 = ress[i]
                }
                if (j == 2) {
                  res2 = ress[i]
                }
                if (j == 3) {
                  res3 = ress[i]
                }
              }

              if (res1 && res1.status == 200) {
                vm.handleTopData(res1.data)
              }
              if (res2 && res2.status == 200) {
                vm.handleSecondPanelData(res2.data, vm)
              }
              if (res3) {
                if (res3.status == 200) {
                  vm.listHandle(res3.data)
                } else {
                  $('#listTable').empty()
                  mui.toast(res3.msg)
                }
              }
              // plus.nativeUI.closeWaiting();
            })
          },
          handleTopData(res) {
            $('.online-num').text(res.signPayOnlineNum)
            $('.online-rate').text(res.signPayOnlineRate)
            $('.offline-num').text(res.signPayUnderNum)
            $('.offline-rate').text(res.signPayUnderRate)

            var pieChart = echarts.init(document.getElementById('pieChart')),
              options = {
                tooltip: {
                  trigger: 'item',
                  formatter: '{b}:<br/> {c} ({d}%)'
                },
                series: [
                  {
                    type: 'pie',
                    radius: ['80%', '70%'],
                    color: ['#ffc800', '#17b3ec'],
                    avoidLabelOverlap: false,
                    label: {
                      normal: {
                        show: false,
                        position: 'center'
                      }
                      //                      emphasis: {
                      //                          show: true,
                      //                          textStyle: {
                      //                              fontSize: '16',
                      //                              fontWeight: 'bold'
                      //                          }
                      //                      }
                    },
                    labelLine: {
                      normal: {
                        show: false
                      }
                    },
                    data: [
                      { value: res.signPayOnlineNum, name: '线上缴费人数' },
                      { value: res.signPayUnderNum, name: '线下缴费人数' }
                    ]
                  }
                ]
              }
            pieChart.setOption(options)
          },
          getNewLineData(arg) {
            this.selectedDateType = arg.dateType
            this.initReqParams()
            this.loadData([1], this)
          },
          xlineChart(arg) {
            console.log('arg', arg)

            var vm = this
            vm.chartObj.panelName = arg.panelName
            if (arg.selectedDateType) {
              vm.chartObj.selectedDateType = arg.selectedDateType
            }
            if (arg.unit) {
              vm.chartObj.unit = arg.unit
            }
            vm.chartObj.dateValue = arg.dateValue
            //	                vm.chooseYear = arg.chooseYear;
            chooseYear = arg.chooseYear
            vm.chartObj.noDateType = arg.noDateType
            vm.chartObj.noshowDate = arg.noshowDate
            if (arg.chartheight) {
              vm.chartObj.chartheight = arg.chartheight
            }
            vm.$nextTick(function () {
              vm.drawLine(vm, arg)
            })
          },
          handleSecondPanelData(data, vm) {
            var xDatas = [],
              yDatas = [],
              names = [],
              colors = ['#12b7f5', '#cd67fd', '#FF9526']
            for (var p in data) {
              var xData = _.map(data[p].data, function (o) {
                return o.range
              })
              var yData = _.map(data[p].data, function (o) {
                return o.amount
              })
              xDatas.push(xData)
              yDatas.push(yData)
            }
            this.xlineChart({
              panelName: '线上缴费趋势',
              quotaNames: ['线上缴费量'],
              xData: xDatas[0],
              yDatas: yDatas,
              colors: colors,
              selectedDateType: vm.selectedDateType,
              nowlineid: 'lineChart'
            })
            // EventBus.$emit("draw-line-chart", {
            // 	panelName: '线上缴费趋势',
            // 	quotaNames: ['线上缴费量'],
            // 	xData: xDatas,
            // 	yDatas: yDatas,
            // 	colors: colors,
            // 	selectedDateType: vm.selectedDateType,
            // 	nowlineid: "lineChart"
            // });
          },
          drawLine(vm, arg) {
            var lineCharts = echarts.init(document.getElementById('lineChart'))
            var xData = arg.xData,
              yDatas = arg.yDatas,
              names = arg.quotaNames,
              colors = arg.colors,
              markLineValue = arg.markLineValue,
              markLineName = arg.markLineName
            //处理数据, 数据按照20条数一屏展示
            //      var lastIndex = xData.length % 20;
            if (xData.length > 20) {
              dataZoom_end = 100 - (19 / xData.length) * 100
            } else {
              dataZoom_end = 0
            }
            //初始结束时间
            var lastValue = xData[xData.length - 1]
            // if (vm.selectedDateType == 1 || vm.selectedDateType == 2) {
            //   vm.endDate = lastValue
            // } else if (vm.selectedDateType == 3) {
            //   var val = lastValue.substr(5, 2) + '月'
            //   vm.endDate = lastValue.substr(0, 4) + '年' + val
            // }
            var options = {
              tooltip: {
                trigger: 'axis'
              },
              color: colors,
              legend: {
                top: '0px',
                data: names,
                borderColor: '#f1f1f1'
              },
              grid: {
                show: false,
                left: '20px',
                right: '20px',
                bottom: '40px',
                top: '20px',
                containLabel: true
              },
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLabel: {
                  interval: 0, //横轴信息全部显示
                  formatter: function (value, index) {
                    if (vm.selectedDateType == 1 || vm.selectedDateType == 2) {
                      if (index == 0) {
                        vm.startDate = value
                        return value.substr(5, 2) + '月' + value.substr(8, 2)
                      } else {
                        if (index == 19) {
                          vm.endDate = value
                        }
                        return value.substr(8, 2)
                      }
                    } else if (vm.selectedDateType == 3) {
                      var val = value.substr(5, 2) + '月'
                      //   if (index == 0) {
                      //     vm.startDate = value.substr(0, 4) + '年' + val
                      //   } else {
                      //     if (index == 19) {
                      //       vm.endDate = value.substr(0, 4) + '年' + val
                      //     }
                      //   }
                      return val
                    }
                  }
                }
              },
              yAxis: {
                type: 'value',
                axisPointer: {
                  snap: true
                },
                scale: true,
                minInterval: 1,
                boundaryGap: ['10%', '30%'],
                splitLine: { show: false }
              },
              dataZoom: [
                {
                  //给x轴设置滚动条
                  //              show: false,
                  start: dataZoom_end,
                  end: 100,
                  type: 'slider',
                  zoomLock: false
                },
                {
                  //下面这个属性是内容区域配置
                  start: dataZoom_end,
                  end: 100,
                  type: 'inside',
                  zoomLock: false
                }
              ]
            }
            var series = []
            for (var i = 0; i < yDatas.length; i++) {
              var obj = {
                name: names[i],
                type: 'line',
                smooth: true,
                data: yDatas[i],
                lineStyle: {
                  normal: {
                    color: colors[i]
                  }
                }
              }
              series.push(obj)
            }
            options.series = series
            if (markLineValue) {
              //目前统计只有签约统计页面有目标量
              $.extend(options.yAxis, {
                min: function (value) {
                  if (value.min > markLineValue) {
                    return markLineValue / 2
                  } else {
                    return value.min / 2
                  }
                },
                max: function (value) {
                  if (value.max > markLineValue) {
                    return parseInt(value.max * 1.5)
                  } else {
                    return parseInt(markLineValue * 1.2)
                  }
                }
              })
              $.extend(options.series[0], {
                markLine: {
                  data: [{ yAxis: markLineValue, name: markLineName }],
                  label: {
                    show: true,
                    position: 'middle',
                    formatter: '{b}: {c}'
                  },
                  lineStyle: {
                    color: 'rgb(194,53,49)'
                  }
                }
              })
            }
            //          console.log(JSON.stringify(options));
            $('#' + vm.lineid).removeAttr('_echarts_instance_')
            lineCharts.setOption(options)
            window.lineCharts = lineCharts
          },
          listHandle(res) {
            for (var k in res) {
              var list = res[k]
              var topArr = soreRank(this.amountArr(list))
              list = _.map(list, function (o, index) {
                o.top = topArr[index]
                o.rate = parseFloat(o.rate).toFixed(2)
                o.targetRate = parseFloat(o.targetRate).toFixed(2)
                return o
              })
              console.log('list', { list: list, level: this.level, lowLevel: this.lowLevel, analysisType: this.analysisType })
			  this.tableList = list
            //   var html = template('data-list', { list: list, level: this.level, lowLevel: this.lowLevel, analysisType: this.analysisType })
            //   $('#listTable').empty().append(html)
            }
          },
          amountArr(list) {
            var amountArr = []
            for (var k in list) {
              amountArr.push(list[k].signPayOnlineNum)
            }

            return amountArr
          },
          showRow() {},
          showTabs(type, levelType) {
            // $('.area-tab').removeClass('active')
            switch (type) {
              case 4:
                if (levelType) {
                  this.levelType = 4
                  //   $('.area-tab').show()
                  //   $('.area-tab').eq(0).addClass('active')
                }
                this.areaType = '4'
                break
              case 3:
                if (levelType) {
                  this.levelType = 3
                  //   $('.area-tab').eq(0).hide()
                  //   $('.area-tab').eq(1).show()
                  //   $('.area-tab').eq(1).addClass('active')
                }

                this.areaType = '3'
                break
              case 2:
                if (levelType) {
                  this.levelType = 2
                  //   $('.area-tab').eq(0).hide()
                  //   $('.area-tab').eq(1).hide()
                  //   $('.area-tab').eq(2).addClass('active')
                }
                this.areaType = '2'
                break
              case 1: //团队
                $('.area-tab-panel').parent().remove()
                break
            }
            if (type == '3') {
              this.lowLevel = 2
            } else if (type == '2') {
              this.lowLevel = 1
            } else {
              this.lowLevel = 0
            }

            this.initReqParams()
            this.loadData([2])
            // this.loadData([2], this)
          },
          /**
           * 初始化筛选事件
           */
          // shaixuanInit(main) {
          // 	var shaixuan = plus.webview.getWebviewById('shaixuan2.html');
          // 	if (!shaixuan) {
          // 		shaixuan = mui.createWindow({
          // 			id: 'shaixuan2.html',
          // 			url: 'shaixuan2.html',
          // 			styles: {
          // 				top: 0,
          // 				bottom: 0,
          // 				left: '20%',
          // 				width: '80%',
          // 				scorllIndicator: "none"
          // 			},
          // 			show: {
          // 				aniShow: "slide-in-right",
          // 				duration: "400"
          // 			},
          // 			extras: {
          // 				noYear: '2016',
          // 				chooseYear: this.chooseYear,
          // 				//              	hasCustomDate:true,
          // 			}
          // 		});
          // 	}
          // 	window.addEventListener("hideShaiXuan", function () {
          // 		console.log("hideShaiXuan");
          // 		main.setStyle({ mask: "none" });
          // 		shaixuan.hide();
          // 	}, false);

          // 	window.addEventListener("showShaiXuan", function () {
          // 		shaixuan.show();
          // 		main.setStyle({ mask: "rgba(0,0,0,0.5)" });
          // 		main.addEventListener("maskClick", function () {
          // 			main.setStyle({ mask: "none" });
          // 			shaixuan.hide();
          // 		}, false);
          // 	});
          // },
          getLowCodeData(code) {
            if (code == 3) {
              this.lowLevel = ''
            } else {
              this.lowLevel = code
            }

            //触发组件监听事件,去父页面请求新的数据
            this.$emit('getnewdata', {
              level: this.level,
              area: this.area,
              lowLevel: this.lowLevel
            })
          },
          bindEvents() {
            var vm = this
            //说明信息相关事件
            $('#closeBtn').on('tap', function () {
              $('.information').hide()
            })

            $('.info-icon').on('tap', function () {
              $('.information').show()
            })

            //左滑筛选区域的数据
            // $('.header-link').on("tap", function () {
            // 	var self = plus.webview.currentWebview();
            // 	mui.fire(self, "showShaiXuan");
            // });

            //日、周、月按钮切换
            $('.date-tag').on('tap', function () {
              vm.selectedDateType = $(this).attr('data-type')
              $('.date-tag').removeClass('active')
              $(this).addClass('active')

              this.initReqParams()
              vm.loadData([1]) //只加载中间区域的数据
            })

            //底部各区等区域的tab切换
            $('.area-tab').on('tap', function () {
              var $this = $(this),
                type = $this.attr('data-val') //4 - 各区， 3 - 社区， 2 - 团队

              this.areaType = type
              if ($this.hasClass('active')) {
                return false
              }
              $('.area-tab').removeClass('active')
              $this.addClass('active')
              this.showTabs(this.level)
              if (type == '3') {
                this.lowLevel = 2
              } else if (type == '2') {
                this.lowLevel = 1
              } else {
                this.lowLevel = 0
              }
              this.initReqParams()
              vm.loadData([2])
            })

            //底部每条记录的点击事件
            $('#listTable').on('click', '.data-row', function () {
              var $this = $(this),
                name = $this.attr('data-name'),
                code = $this.attr('data-code'),
                $selectTab = $('.area-tab.active')

              if (vm.areaType == '2') {
                //获得团队信息，弹框显示数据
                vm.showTeamInfo(code)
                return false
              }

              vm.title = name
              vm.area = code
              var newlevel = vm.level - 1
              //如果是市级管理员，先点击“社区”tab后再往下看下一级的数据，需要将level再-1
              if (newlevel == 3 && vm.lowLevel == 2) {
                newlevel--
              }
              vm.lowLevel = ''
              vm.level = newlevel
              vm.areaType = newlevel
              $('#areaTitle').text(vm.title)

              vm.showTabs(vm.level, 1)
              vm.initReqParams()
              //记录返回链接信息
              vm.reqList.push({
                level: vm.level,
                lowLevel: vm.lowLevel,
                area: vm.area,
                title: vm.title,
                analysisType: vm.analysisType,
                req: vm.reqParam
              })
              vm.loadData([0, 1, 2])
            })

            //弹出遮罩
            $('.icon-remark').on('click', function (e) {
              $('.modal-overlay').addClass('modal-overlay-visible')
              setTimeout(function () {
                $('.modal-content').show()
              }, 50)
            })

            $('.div-close,.modal-overlay').on('click', function () {
              $('.modal-overlay').removeClass('modal-overlay-visible')
              $('.modal-content').hide()
            })

            //添加页面监听
            window.addEventListener('refresh', function (e) {
              var year = e.detail.year
              this.chooseYear = year

              //重置变量值
              this.level = this.initLevel
              this.area = this.userRole.code
              this.title = this.userRole.name
              this.lowLevel = ''
              if (e.detail.startTime) {
                this.startDate = e.detail.startTime
                this.endDate = e.detail.endTime
              } else {
                this.startDate = this.getStartDate()
                this.endDate = this.getEndDate()
              }

              $('#areaTitle').text(title)
              $('.choose-label').text(this.chooseYear + '年')

              this.showTabs()
              this.initReqParams()

              //清空请求数组
              reqList.splice(0, reqList.length)
              //记录返回链接信息
              reqList.push({
                level: this.level,
                lowLevel: this.lowLevel,
                area: this.area,
                title: this.title,
                analysisType: this.analysisType,
                req: this.reqParam
              })
              vm.loadData([0, 1, 2])
            })
          },

          /*
           * 获得团队信息
           */

          showTeamInfo(teamId) {
            console.log(9999999)
            console.log(teamId)

            var url = '/doctor/admin-teams/teams/info',
              params = {
                teamId: teamId
              }
            httpRequest.get(url, { data: params }).then(function (res) {
              if (res.status == 200) {
                var data = res.data
                data.memberLength = data.members.length
                var html = template('teamInfo', data)
                $('#teamInfoBox').empty().append(html)
                $('.modal-overlay').addClass('modal-overlay-visible')
                setTimeout(function () {
                  $('.modal-content').show()
                }, 50)
              }
            })
          },
          getStartDate() {
            if (this.chooseYear < '2023') {
              return this.chooseYear + '-07-01'
            } else {
              return this.chooseYear + '-01-01'
            }
          },
          getEndDate() {
            var nowdate = new Date()
            var year = nowdate.getFullYear()
            var month = nowdate.getMonth() + 1
            var day = nowdate.getDate()
            var endDate = ''
            if (this.chooseYear < '2023') {
              endDate = new Date(parseInt(this.chooseYear) + 1 + '-06-30')
            } else {
              endDate = new Date(parseInt(this.chooseYear) + '-12-31')
            }
            var now = new Date()

            if (now <= endDate) {
              return now.format('yyyy-MM-dd')
            } else {
              if (this.chooseYear < '2023') {
                return parseInt(this.chooseYear) + 1 + '-06-30'
              } else {
                return parseInt(this.chooseYear) + '-12-31'
              }
            }
          }
        }
      })
    </script>
  </body>
</html>