health-management-analysis.html 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>总体分析</title>
  6. <meta name="author" content="yihu.com" />
  7. <meta name="format-detection" content="telephone=no" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  9. <meta name="apple-mobile-web-app-capable" content="yes" />
  10. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  11. <link rel="shortcut icon" href="../../../favicon.ico">
  12. <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
  13. <link rel="stylesheet" type="text/css" href="../../../css/font-awesome.min.css"/>
  14. <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
  15. <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
  16. <link href="../../../plugins/toastr/toastr.min.css" rel="stylesheet">
  17. <link rel="stylesheet" type="text/css" href="../../../css/element-ui.css"/>
  18. <link rel="stylesheet" type="text/css" href="../css/common.css"/>
  19. <style>
  20. .tip{
  21. vertical-align: inherit;
  22. margin-left: 5px;
  23. }
  24. .health-count{
  25. margin-left: 26.156px;
  26. }
  27. .black{
  28. color: #323232;
  29. }
  30. .health-title{
  31. margin-left: 14px;
  32. }
  33. .visible-xs-inline-block{
  34. display: inline-block;
  35. }
  36. .flex-box {
  37. display: -webkit-box;
  38. display: -ms-flexbox;
  39. display: flex;
  40. -webkit-box-pack: center;
  41. -ms-flex-pack: center;
  42. justify-content: space-between;
  43. -webkit-box-align: center;
  44. -ms-flex-align: center;
  45. align-items: baseline;
  46. }
  47. .c-w-33{
  48. /*height: 191.6px;*/
  49. }
  50. .shadow{
  51. position: absolute;
  52. left: 50%;
  53. top: 85px;
  54. background-color: rgba(50, 50, 50, 0.701961);
  55. border-color: rgb(51, 51, 51);
  56. color: rgb(255, 255, 255);
  57. font-size: 14px;
  58. font-family: sans-serif;
  59. border-radius: 4px;
  60. padding: 5px;
  61. visibility: hidden;
  62. min-width: 242px;
  63. z-index: 99999;
  64. text-align: left;
  65. }
  66. .shadowr{
  67. left: 0%;
  68. }
  69. .article-bar, .send-bar{height:15px;width:0%;}
  70. .article-bar{background: #7a97e0;}
  71. .send-bar{background: #17b3ec;}
  72. .c-f36 {font-size: 36px;}
  73. </style>
  74. </head>
  75. <body>
  76. <div id="main" class="plr20 c-hide" v-loading.fullscreen.lock="isloading">
  77. <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="false" ></header-tab>
  78. <header-prompt></header-prompt>
  79. <div class="clearfix ">
  80. <ul class="l-banner">
  81. <li>
  82. <div class="tag" :class="{'active': index==21}" @click="changeTag(21)">
  83. <div id="index_21" class="c-f18">{{topDatas['index_21']}}</div>
  84. <div class="mt5 c-f16 l-name">绑定微信</div>
  85. </div>
  86. </li>
  87. <li>
  88. <div class="tag" :class="{'active': index==149}" @click="changeTag(149)">
  89. <div id="index_20" class="c-f18">{{topDatas['index_149']}}</div>
  90. <div class="mt5 c-f16 l-name">管理人数</div>
  91. </div>
  92. </li>
  93. </ul>
  94. </div>
  95. <!-- 折线图 -->
  96. <line-chart v-on:getlinedata="getNewLineData" lineid="lineChart"></line-chart>
  97. <!-- 微信绑定统计 -->
  98. <div v-show="index=='21'" class="mt20 c-border bgc-fff">
  99. <div class="c-border-b plr10 ptb20 c-f16 c-333">{{wxTotal.label}}</div>
  100. <div class="ui-grid ui-grid-middle ptb10">
  101. <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
  102. <div class="c-f20 wz-num">{{wxTotal.amount1}}</div>
  103. <div class="c-f12">已缴费人数</div>
  104. </div>
  105. <div class="ui-col-1 c-position-r c-t-center">
  106. <div class="blur-cycle-box">
  107. <div class="c-f16 c-fff num mt15">{{wxTotal.rate}}</div>
  108. <div class="c-f12 c-fff mt5">绑定率</div>
  109. </div>
  110. <div id="pieChart2" style="width: 100%; height:100px;"></div>
  111. </div>
  112. <div class="ui-col-0 c-t-center c-909090 plr10 c-w-33">
  113. <div class="c-f20 zd-num">{{wxTotal.amount2}}</div>
  114. <div class="c-f12">未缴费人数</div>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- 底部区域图 -->
  119. <area-data-panel class="mt20" v-on:getnewdata="getAreaData"></area-data-panel>
  120. <!--模态框组件-->
  121. <vuedals></vuedals>
  122. </div>
  123. <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
  124. <script src="../../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
  125. <script src="../../../plugins/toastr/toastr.min.js"></script>
  126. <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
  127. <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
  128. <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
  129. <script src="../../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
  130. <script src="../../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
  131. <script src="../../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
  132. <script src="../../../js/element-ui.js" type="text/javascript" charset="utf-8"></script>
  133. <script src="../../../component/common/event-bus.js"></script>
  134. <script src="../../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
  135. <script src="../../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
  136. <script src="../../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
  137. <script src="../../../component/statistics/year-filter.js" type="text/javascript" charset="utf-8"></script>
  138. <script src="../../../component/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
  139. <script src="../../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
  140. <script src="../../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
  141. <script src="../../../component/statistics/team-info-dyy.js" type="text/javascript" charset="utf-8"></script>
  142. <script src="../../../component/common/pagination.js"></script>
  143. <script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
  144. <script src="../js/health-management-analysis.js" type="text/javascript" charset="utf-8"></script>
  145. </body>
  146. </html>