AbnormalStatistics.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <div>
  3. <common @asynCallBack="asynCallBack"></common>
  4. <top-header :pageTitle="pageTitle" ></top-header>
  5. <div class="mui-content">
  6. <div class="fyy-temper-date">
  7. <a @click="selectStartDate" class="mui-col-xs-5" v-text="dataForm.startTime"></a>
  8. <span class="mui-col-xs-2">至</span>
  9. <a @click="selectEndDate" class="mui-col-xs-5" v-text="dataForm.endTime"></a>
  10. </div>
  11. <ul class="mui-table-view mui-grid-view mui-grid-9 vongi-statistics">
  12. <li class="mui-table-view-cell mui-media mui-col-xs-4">
  13. <div class="vongi-statistics-body">
  14. <span class="mui-icon mui-icon-home iconfont icon-qiyegongchangjianzhu"></span>
  15. <div class="mui-media-body">异常数量</div>
  16. <div class="mui-media-body mui-h3 color4fc5f7" v-text="companyTotalCount"> </div>
  17. </div>
  18. </li>
  19. <li class="mui-table-view-cell mui-media mui-col-xs-4">
  20. <div class="vongi-statistics-body">
  21. <span class="mui-icon mui-icon-home iconfont icon-ziyuan"></span>
  22. <div class="mui-media-body">异常人数</div>
  23. <div class="mui-media-body mui-h3 colorfe616c" v-text="personTotalCount"> </div>
  24. </div>
  25. </li>
  26. <li class="mui-table-view-cell mui-media mui-col-xs-4">
  27. <div class="vongi-statistics-body">
  28. <span class="mui-icon mui-icon-home iconfont icon-renshu"></span>
  29. <div class="mui-media-body">未测人员</div>
  30. <div class="mui-media-body mui-h3 colorf8b155" v-text="undetectedCount"> </div>
  31. </div>
  32. </li>
  33. </ul>
  34. <div class="mui-content-padded vongi-yctj-list">
  35. <ul class="mui-table-view mui-table-view-chevron">
  36. <li class="mui-table-view-cell mui-collapse">
  37. <a class="mui-navigate-right" @touchend="setNowOpen(1)" >异常单位列表</a>
  38. <ul class="mui-table-view mui-table-view-chevron">
  39. <li class="mui-table-view-cell mui-media" v-for="(item,index) in companyList">
  40. <router-link :to="{name: 'HouseKeeperControlHealthAbnormalRecord', query: {companyId: item.id,companyName:doEscape(item.name),filter:1,queryDate:item.date}}"
  41. class="mui-navigate-right">
  42. <div class="mui-media-body">
  43. {{item.name}}
  44. <h4 class='mui-pull-right'><span class="colorfe616c" v-text="item.personCount"></span>人</h4>
  45. </div>
  46. </router-link>
  47. </li>
  48. </ul>
  49. </li>
  50. </ul>
  51. </div>
  52. <div class="mui-content-padded vongi-yctj-list">
  53. <ul class="mui-table-view mui-table-view-chevron">
  54. <li class="mui-table-view-cell mui-collapse">
  55. <a class="mui-navigate-right" @touchend="setNowOpen(2)">未检测员工列表</a>
  56. <ul class="mui-table-view mui-table-view-chevron">
  57. <li class="mui-table-view-cell" v-for="(item,index) in personList">
  58. <router-link :to="{name: 'CommonHealthCert', query: {personId: item.id}}" class="mui-navigate-right">
  59. {{item.name}}<span class="iconfont icon-erweima1 color55f868" :style="'color:'+getGreenCodeColor(item['healthyCode'])" ></span>
  60. </router-link>
  61. </li>
  62. </ul>
  63. </li>
  64. </ul>
  65. </div>
  66. </div>
  67. <loading :visible="isLoading"></loading>
  68. </div>
  69. </template>
  70. <script>
  71. require('$project/assets/js/mui.picker.min.js');
  72. import * as API_ControlHealth from '@/apis/HouseKeeper/control/health'
  73. import Common from '$project/components/Common.vue'
  74. import Loading from '$project/components/Loading.vue'
  75. import isReachBottom from '$project/utils/isReachBottom'
  76. import TopHeader from '$project/components/TopHeader.vue'
  77. import {
  78. mapGetters,
  79. mapMutations
  80. } from 'vuex'
  81. import {
  82. currentTimeStamp,
  83. parseUnixTime,
  84. beforeTimeStamp
  85. } from '$project/utils'
  86. export default {
  87. name: 'HouseKeeperControlHealthAbnormalStatistics',
  88. components: {
  89. Common,
  90. Loading,
  91. TopHeader
  92. },
  93. data() {
  94. return {
  95. pageTitle: "异常统计",
  96. isLoading: false,
  97. dataForm: {
  98. startTime: '',
  99. endTime: '',
  100. },
  101. personTotalCount: 0,
  102. companyTotalCount: 0,
  103. undetectedCount: 0,
  104. companyList: [],
  105. personList: [],
  106. personListForm: {
  107. pageIndex: 1,
  108. pageSize: 20,
  109. startTime: '',
  110. totalPage: 1,
  111. endTime: 0
  112. },
  113. nowOpen: 0,
  114. };
  115. },
  116. created() {
  117. this.queryDate = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
  118. //定义当前日期范围
  119. if (this.$store.state.control_abnormal_statistics_startTime) {
  120. this.dataForm.startTime = this.$store.state.control_abnormal_statistics_startTime;
  121. } else {
  122. this.dataForm.startTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
  123. this.$store.commit('setControlAbnormalStatisticsStartTime', this.dataForm.startTime);
  124. this.personListForm.startTime = parseUnixTime(beforeTimeStamp(0), '{y}-{m}-{d}');
  125. }
  126. if (this.$store.state.control_abnormal_statistics_endTime) {
  127. this.dataForm.endTime = this.$store.state.control_abnormal_statistics_endTime;
  128. } else {
  129. this.dataForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
  130. this.$store.commit('setControlAbnormalStatisticsEndTime', this.dataForm.endTime);
  131. this.personListForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
  132. }
  133. //this.personListForm.startTime = parseUnixTime(beforeTimeStamp(7), '{y}-{m}-{d}');
  134. //this.personListForm.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}');
  135. },
  136. methods: {
  137. asynCallBack(){},
  138. setNowOpen(val) {
  139. this.nowOpen = val;
  140. console.log('当前' + this.nowOpen);
  141. },
  142. //选择起始日期
  143. selectStartDate() {
  144. var _this = this;
  145. var picker = new mui.DtPicker({
  146. "type": "date",
  147. "beginYear": 2020,
  148. "endYear": 2040,
  149. "endDate": new Date(),
  150. "value": _this.dataForm.startTime
  151. });
  152. picker.show(function(rs) {
  153. _this.dataForm.startTime = rs.text;
  154. _this.$store.commit('setControlAbnormalStatisticsStartTime', _this.dataForm.startTime);
  155. _this.getUnusalStatistic();
  156. picker.dispose();
  157. });
  158. },
  159. //选择结束日期
  160. selectEndDate() {
  161. var _this = this;
  162. var beginDate = new Date(_this.dataForm.startTime);
  163. beginDate.setDate(beginDate.getDate());
  164. var endDate = new Date();
  165. endDate.setDate(endDate.getDate());
  166. var picker = new mui.DtPicker({
  167. "type": "date",
  168. "beginYear": 2020,
  169. "beginDate": beginDate,
  170. "endDate": endDate,
  171. "value": _this.dataForm.endTime
  172. });
  173. picker.show(function(rs) {
  174. _this.dataForm.endTime = rs.text;
  175. _this.$store.commit('setControlAbnormalStatisticsEndTime', _this.dataForm.endTime);
  176. _this.getUnusalStatistic();
  177. _this.getPersonList();
  178. picker.dispose();
  179. });
  180. },
  181. //获取统计数据
  182. getUnusalStatistic() {
  183. this.isLoading = true;
  184. API_ControlHealth.getAbnormalStatistics(this.dataForm).then(response => {
  185. this.isLoading = false;
  186. this.personTotalCount = response.personTotalCount;
  187. this.companyTotalCount = response.companyTotalCount;
  188. this.undetectedCount = response.undetectedCount;
  189. this.companyList = response.list;
  190. }).catch(error => {
  191. this.isLoading = false;
  192. this.mui.toast(error);
  193. });
  194. },
  195. //获取未检测人员列表
  196. getPersonList() {
  197. this.isLoading = true;
  198. API_ControlHealth.getUndetectedPersonList(this.personListForm).then(response => {
  199. this.isLoading = false;
  200. if (this.personListForm.pageIndex == 1) {
  201. this.personList = response.data; // 数据数组
  202. this.personListForm.pageIndex = response.pageNumber; //当前页数
  203. this.personListForm.totalPage = response.totalPage; //总页数
  204. } else {
  205. this.personList = [ // 当前数据与第二页数据合并到一个数组中
  206. ...this.personList,
  207. ...response.data
  208. ];
  209. }
  210. this.personListForm.pageIndex++;
  211. }).catch(error => {
  212. this.isLoading = false;
  213. this.mui.toast(error);
  214. });
  215. },
  216. //下拉事件
  217. handleScrool() {
  218. //console.log(window.screen.height + '-' + document.body.scrollTop + '-' + document.body.clientHeight)
  219. if (isReachBottom()) {
  220. console.log('到达底部' + this.nowOpen)
  221. if (this.nowOpen == 2 && this.personListForm.pageIndex <= this.personListForm.totalPage && this.isLoading == false) {
  222. this.getPersonList();
  223. } else {
  224. return;
  225. }
  226. }
  227. },
  228. doEscape(str) {
  229. return escape(str);
  230. },
  231. //获取健康码颜色值
  232. getGreenCodeColor(healthyCode) {
  233. var healthyCode = healthyCode || '11';
  234. var color = {
  235. "00": '#09ae47',
  236. "01": '#e5aa37',
  237. "10": '#fe616c',
  238. "11": '#C0C0C0'
  239. }
  240. return color[healthyCode];
  241. }
  242. },
  243. mounted() {
  244. //显示数据
  245. this.getUnusalStatistic();
  246. //获取未检测人员列表
  247. this.getPersonList();
  248. //监控下拉加载事件
  249. var _this = this;
  250. window.addEventListener('scroll', _this.handleScrool);
  251. },
  252. destroyed() {
  253. //销毁监听事件
  254. var _this = this;
  255. window.removeEventListener('scroll', _this.handleScrool);
  256. },
  257. watch: {
  258. 'dataForm.startTime': {
  259. handler(newValue) {
  260. this.personListForm.startTime = newValue;
  261. },
  262. immediate: true,
  263. deep: true
  264. },
  265. 'dataForm.endTime': {
  266. handler(newValue) {
  267. this.personListForm.endTime = newValue;
  268. },
  269. immediate: true,
  270. deep: true
  271. }
  272. }
  273. };
  274. </script>
  275. <style scoped src="$project/assets/css/sczpfyy.css"></style>
  276. <style scoped src="$project/assets/css/xpwyfyy.css"></style>
  277. <style src="$project/assets/css/iconfont.css"></style>
  278. <style>
  279. </style>