Elizabeth's proactive approach involves introducing urinal toilet attachment , an ingenious concept that optimizes space and functionality.

basicInformationAnalysis.vue 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779
  1. <template>
  2. <div class="main-contain">
  3. <div class="position">
  4. <bread-crumb :crumbs="crumbs"></bread-crumb>
  5. </div>
  6. <div class="app-container">
  7. <div class="cell clearfix">
  8. <label class="title">
  9. <span class="name">转归状态</span> :
  10. </label>
  11. <div class="time">
  12. <ul class>
  13. <li
  14. :class="item.state == stateType ? 'active' : ''"
  15. @click="selectLapseTo(item.state)"
  16. v-for="item in month"
  17. :key="item.value"
  18. >{{ item.label }}</li>
  19. </ul>
  20. </div>
  21. <el-date-picker
  22. v-model="listQuery.start_time"
  23. prefix-icon="el-icon-date"
  24. @change="changeTime"
  25. :editable="false"
  26. style="width: 196px;"
  27. type="date"
  28. placeholder="选择日期时间"
  29. align="right"
  30. format="yyyy-MM-dd"
  31. value-format="yyyy-MM-dd"
  32. :picker-options="pickerOptions"
  33. ></el-date-picker>
  34. <span class>-</span>
  35. <el-date-picker
  36. v-model="listQuery.end_time"
  37. prefix-icon="el-icon-date"
  38. @change="changeEndTime"
  39. :editable="false"
  40. style="width: 196px;"
  41. type="date"
  42. placeholder="选择日期时间"
  43. align="right"
  44. format="yyyy-MM-dd"
  45. value-format="yyyy-MM-dd"
  46. :picker-options="pickerOptions"
  47. ></el-date-picker>
  48. </div>
  49. <div class="cell clearfix" style="align-items:normal">
  50. <div style="float:left">
  51. <div class="infoBox">
  52. <div class="infoOne">
  53. <div class="titleBox">
  54. <span class="point"></span>
  55. <p class="infoTitle">透析总量({{total}}次)</p>
  56. </div>
  57. <div class="borderBox">
  58. <div v-for="(item,index) in modetype" :key="index">
  59. <span v-if="item.mode_id == 1">
  60. <p>HD:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  61. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  62. </span>
  63. <span v-if="item.mode_id == 2">
  64. <p>HDF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  65. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  66. </span>
  67. <span v-if="item.mode_id == 3">
  68. <p>HD+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  69. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  70. </span>
  71. <span v-if="item.mode_id == 4">
  72. <p>HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  73. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  74. </span>
  75. <span v-if="item.mode_id == 5">
  76. <p>HF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  77. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  78. </span>
  79. <span v-if="item.mode_id == 6">
  80. <p>SCUF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  81. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  82. </span>
  83. <span v-if="item.mode_id == 7">
  84. <p>IUF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  85. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  86. </span>
  87. <span v-if="item.mode_id == 8">
  88. <p>HFHD:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  89. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  90. </span>
  91. <span v-if="item.mode_id == 9">
  92. <p>HFHD+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  93. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  94. </span>
  95. <span v-if="item.mode_id == 10">
  96. <p>PHF:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  97. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  98. </span>
  99. <span v-if="item.mode_id == 11">
  100. <p>HFR:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  101. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  102. </span>
  103. <span v-if="item.mode_id == 12">
  104. <p>HDF+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  105. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  106. </span>
  107. <span v-if="item.mode_id == 13">
  108. <p>HFHD+HP:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  109. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  110. </span>
  111. <span v-if="item.mode_id == 14">
  112. <p>腹水回输:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  113. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  114. </span>
  115. <span v-if="item.mode_id == 15">
  116. <p>HD前置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  117. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  118. </span>
  119. <span v-if="item.mode_id == 16">
  120. <p>HD后置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  121. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  122. </span>
  123. <span v-if="item.mode_id == 17">
  124. <p>HDF前置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  125. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  126. </span>
  127. <span v-if="item.mode_id == 18">
  128. <p>HDF后置换:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  129. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  130. </span>
  131. <span v-if="item.mode_id == 19">
  132. <p>IUF+HD:{{item.count}}次({{(item.count/total*100).toFixed(1)}}%)</p>
  133. <el-progress :percentage="(item.count/total*100).toFixed(1)"></el-progress>
  134. </span>
  135. </div>
  136. </div>
  137. </div>
  138. <div class="infoOne">
  139. <div class="titleBox">
  140. <span class="point2"></span>
  141. <p class="infoTitle">传染病统计</p>
  142. </div>
  143. <div class="borderBox2">
  144. <div v-for="(item,i) in this.InfectiousList" :key="i">
  145. <span v-if="item.disease_id == 2">
  146. <p>乙肝:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
  147. <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
  148. </span>
  149. <span v-if="item.disease_id == 3">
  150. <p>丙肝:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
  151. <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
  152. </span>
  153. <span v-if="item.disease_id == 4">
  154. <p>艾滋病:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
  155. <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
  156. </span>
  157. <span v-if="item.disease_id == 5">
  158. <p>肺结核:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
  159. <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
  160. </span>
  161. <span v-if="item.disease_id == 6">
  162. <p>梅毒:{{item.count}}人({{(item.count/InfectiousTotal*100).toFixed(1)}}%)</p>
  163. <el-progress :percentage="(item.count/InfectiousTotal*100).toFixed(1)"></el-progress>
  164. </span>
  165. <span v-if="item.disease_id == 1">
  166. <p>其他:{{item.count}}人({{((item.count)/InfectiousTotal*100).toFixed(1)}}%)</p>
  167. <el-progress :percentage="((item.count)/InfectiousTotal*100).toFixed(1)"></el-progress>
  168. </span>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. <div style="float:left">
  175. <div class="infoBox">
  176. <div class="infoOne">
  177. <div class="titleBox">
  178. <span class="point1"></span>
  179. <p class="infoTitle">转归统计(总人数{{patientCount}}人)</p>
  180. </div>
  181. <div class="borderBox1">
  182. <p>留治:{{rollOutTotal}}人({{(rollOutTotal/patientCount*100).toFixed(1)}}%)</p>
  183. <el-progress :percentage="(rollOutTotal/patientCount*100).toFixed(1)"></el-progress>
  184. <p>转出:{{outTotal}}人({{(outTotal/patientCount*100).toFixed(1)}}%)</p>
  185. <el-progress :percentage="(outTotal/patientCount*100).toFixed(1)"></el-progress>
  186. </div>
  187. </div>
  188. <div class="infoOne">
  189. <div class="titleBox">
  190. <span class="point2"></span>
  191. <p class="infoTitle">男女比例</p>
  192. </div>
  193. <div class="borderBox2">
  194. <p>男:{{totalMan}}人({{(totalMan/totalGender*100).toFixed(1)}}%)</p>
  195. <el-progress :percentage="(totalMan/totalGender*100).toFixed(1)"></el-progress>
  196. <p>女:{{totalWoman}}人({{(totalWoman/totalGender*100).toFixed(1)}}%)</p>
  197. <el-progress :percentage="(totalWoman/totalGender*100).toFixed(1)"></el-progress>
  198. </div>
  199. </div>
  200. <div class="infoOne">
  201. <div class="titleBox">
  202. <span class="point"></span>
  203. <p class="infoTitle">年龄统计</p>
  204. </div>
  205. <div class="borderBox">
  206. <div v-for="(item,j) in ageCount" :key="j">
  207. <span v-if="item.age == 20">
  208. <p>年龄≤20:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
  209. <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
  210. </span>
  211. <span v-if="item.age == 40">
  212. <p>20&lt;年龄≤40:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
  213. <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
  214. </span>
  215. <span v-if="item.age == 60">
  216. <p>40&lt;年龄≤60:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
  217. <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
  218. </span>
  219. <span v-if="item.age == 80">
  220. <p>60&lt;年龄≤80:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
  221. <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
  222. </span>
  223. <span v-if="item.age ==150">
  224. <p>大于80:{{item.count}}人({{(item.count/ageTotal*100).toFixed(1)}}%)</p>
  225. <el-progress :percentage="(item.count/ageTotal*100).toFixed(1)"></el-progress>
  226. </span>
  227. </div>
  228. </div>
  229. </div>
  230. <div class="infoOne">
  231. <div class="titleBox">
  232. <span class="point1"></span>
  233. <p class="infoTitle">透龄统计</p>
  234. </div>
  235. <div class="borderBox1">
  236. <div v-for="(item,index) in dialysisAge" :key="index">
  237. <span v-if="item.age== 1">
  238. <p>透析龄≤12:{{item.count}}人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
  239. <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
  240. </span>
  241. <span v-if="item.age == 2">
  242. <p>12&lt;透析龄≤36:{{item.count}}人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
  243. <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
  244. </span>
  245. <span v-if="item.age == 3">
  246. <p>36≤透析龄≤60:{{item.count}}/人({{(item.count/patientCount*100).toFixed(1)}}%)</p>
  247. <el-progress :percentage="(item.count/patientCount*100).toFixed(1)"></el-progress>
  248. </span>
  249. <span v-if="item.age == 4">
  250. 透析龄 ≥60:{{item.count}}人({{((item.count)/patientCount*100).toFixed(1)}}%)
  251. <el-progress :percentage="((item.count)/patientCount*100).toFixed(1)"></el-progress>
  252. </span>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. </div>
  259. </div>
  260. </div>
  261. </template>
  262. <script>
  263. const moment = require('moment')
  264. import { GetOICData } from "@/api/qcd";
  265. import PieChart from "../qcd/components/BarChart";
  266. import { uParseTime } from "@/utils/tools";
  267. import BreadCrumb from "@/xt_pages/components/bread-crumb";
  268. import {getDialysisModeType,getTotalLapseCount,getTotalSexCount,getTotalInfectiousCount,getTotalAgeCount,getTotalDialysisCount} from "@/api/common/common"
  269. export default {
  270. name: "dialysisTotal",
  271. components: {
  272. PieChart,
  273. BreadCrumb
  274. },
  275. data() {
  276. return {
  277. pickerOptions: {
  278. disabledDate(time) {
  279. let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear()-1)).getTime() - 24 * 3600 * 1000;
  280. return time.getTime() > Date.now() || time.getTime() < threeMonths;;
  281. }
  282. },
  283. crumbs: [
  284. { path: false, name: "质控管理" },
  285. { path: false, name: "基本信息统计" }
  286. ],
  287. listQuery: {
  288. start_time: "",
  289. end_time: "",
  290. page: 1,
  291. limit: 10
  292. },
  293. stateType: 0,
  294. month: [
  295. { value: 0, label: "本月", state: 0 },
  296. { value: 1, label: "近三个月", state: 1 },
  297. { value: 2, label: "近半年", state: 2 },
  298. { value: 3, label: "近一年", state: 3 },
  299. { value:4,label:"自定义",state:4}
  300. ],
  301. modetype:[],
  302. total:0,
  303. patientCount:0,
  304. rollOut:0,
  305. RetentionCount:0,
  306. totalMan:0,
  307. totalWoman:0,
  308. totalGender:0,
  309. InfectiousList:[],
  310. InfectiousTotal:0,
  311. ageCount:[],
  312. ageTotal:0,
  313. otherTotal:0,
  314. totalone:0,
  315. totaltwo:0,
  316. totalthree:0,
  317. rollOutTotal:0,
  318. outTotal:0,
  319. dialysisAge:[],
  320. };
  321. },
  322. methods: {
  323. getTimestamp(time) {
  324. // 把时间日期转成时间戳
  325. return new Date(time).getTime() / 1000;
  326. },
  327. changeTime(val) {
  328. this.stateType = 4
  329. var timeStar=Date.parse(val)/1000
  330. var timeEnd =Date.parse(this.listQuery.end_time)/1000
  331. var time = this.getTimestamp(val) - this.getTimestamp(this.end_time);
  332. if (time > 0) {
  333. this.$message.error("结束时间不能小于开始时间");
  334. this.start_time = "";
  335. } else {
  336. //统计透析总量
  337. this.getDialysisModeType(val,this.listQuery.end_time)
  338. //统计转归状态
  339. this.getTotalLapseCount(timeStar,timeEnd)
  340. //统计男女比例
  341. this.getTotalSexCount(timeStar,timeEnd)
  342. //统计传染病
  343. this.getTotalInfectiousCount(timeStar,timeEnd)
  344. //统计年龄
  345. this.getTotalAgeCount(timeStar,timeEnd)
  346. //统计透析年龄
  347. this.getTotalDialysisCount(timeStar,timeEnd)
  348. }
  349. },
  350. changeEndTime(val) {
  351. this.stateType = 4
  352. var timeEnd=Date.parse(val)/1000
  353. var timeStar =Date.parse(this.listQuery.start_time)/1000
  354. var time =
  355. this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
  356. if (time < 0) {
  357. this.$message.error("结束时间不能小于开始时间");
  358. this.listQuery.end_time = "";
  359. } else {
  360. //统计透析总量
  361. this.getDialysisModeType(this.listQuery.start_time,val)
  362. //统计转归状态
  363. this.getTotalLapseCount(timeStar,timeEnd)
  364. //统计男女比例
  365. this.getTotalSexCount(timeStar,timeEnd)
  366. //统计传染病
  367. this.getTotalInfectiousCount(timeStar,timeEnd)
  368. //统计年龄
  369. this.getTotalAgeCount(timeStar,timeEnd)
  370. //统计透析年龄
  371. this.getTotalDialysisCount(timeStar,timeEnd)
  372. }
  373. },
  374. selectLapseTo(state) {
  375. this.stateType = state;
  376. this.listQuery.state = state;
  377. //获取本月当前机构的透析模式
  378. const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'
  379. // console.log("开始时间",startDate)
  380. const endDate = moment(new Date()).format('YYYY-MM-DD')
  381. // console.log("结束时间",endDate)
  382. var now = new Date()
  383. var nowMonth = now.getMonth(); //当前月
  384. var nowYear = now.getFullYear(); //当前年
  385. //本月的开始时间
  386. var monthStartDate = new Date(nowYear, nowMonth, 1);
  387. var timeStar=Date.parse(monthStartDate)/1000;//s
  388. // console.log("本月第一天",timeStar)
  389. //本月的结束时间
  390. var monthEndDate = new Date(nowYear, nowMonth+1, 0);
  391. var timeEnd=Date.parse(monthEndDate)/1000-1;//s
  392. // console.log("本月最后一天",timeEnd)
  393. //本月
  394. if(state == 0){
  395. //统计透析总量
  396. this.getDialysisModeType(startDate,endDate)
  397. //统计转归状态
  398. this.getTotalLapseCount(timeStar,timeEnd)
  399. //统计男女比例
  400. this.getTotalSexCount(timeStar,timeEnd)
  401. //统计传染病
  402. this.getTotalInfectiousCount(timeStar,timeEnd)
  403. //统计年龄
  404. this.getTotalAgeCount(timeStar,timeEnd)
  405. //统计透析年龄
  406. this.getTotalDialysisCount(timeStar,timeEnd)
  407. }
  408. //近三月
  409. if(state == 1){
  410. const startDate = moment().subtract('month', 3).format('YYYY-MM-DD')
  411. console.log("三月前",startDate)
  412. var startunitx = Date.parse(startDate)/1000
  413. console.log("开始时间搓",startunitx)
  414. const endDate = moment(new Date()).format('YYYY-MM-DD')
  415. console.log("结束时间",endDate)
  416. var endunitx = Date.parse(endDate)/1000
  417. console.log("日期时间搓",endunitx)
  418. //统计透析总量
  419. this.getDialysisModeType(startDate,endDate)
  420. //统计转归状态
  421. this.getTotalLapseCount(startunitx,endunitx)
  422. //统计男女比例
  423. this.getTotalSexCount(startunitx,endunitx)
  424. //统计传染病
  425. this.getTotalInfectiousCount(startunitx,endunitx)
  426. //统计年龄
  427. this.getTotalAgeCount(startunitx,endunitx)
  428. //统计透析年龄
  429. this.getTotalDialysisCount(startunitx,endunitx)
  430. }
  431. //近半年
  432. if(state == 2){
  433. const startDate = moment().subtract('month', 6).format('YYYY-MM-DD')
  434. console.log("6月前",startDate)
  435. var startunitx = Date.parse(startDate)/1000
  436. console.log("开始时间搓",startunitx)
  437. const endDate = moment(new Date()).format('YYYY-MM-DD')
  438. console.log("结束时间",endDate)
  439. var endunitx = Date.parse(endDate)/1000
  440. console.log("日期时间搓",endunitx)
  441. //统计透析总量
  442. this.getDialysisModeType(startDate,endDate)
  443. //统计转归状态
  444. this.getTotalLapseCount(startunitx,endunitx)
  445. //统计男女比例
  446. this.getTotalSexCount(startunitx,endunitx)
  447. //统计传染病
  448. this.getTotalInfectiousCount(startunitx,endunitx)
  449. //统计年龄
  450. this.getTotalAgeCount(startunitx,endunitx)
  451. //统计透析年龄
  452. this.getTotalDialysisCount(startunitx,endunitx)
  453. }
  454. //近一年
  455. if(state == 3){
  456. const startDate = moment().subtract('month', 12).format('YYYY-MM-DD')
  457. console.log("6月前",startDate)
  458. var startunitx = Date.parse(startDate)/1000
  459. console.log("开始时间搓",startunitx)
  460. const endDate = moment(new Date()).format('YYYY-MM-DD')
  461. console.log("结束时间",endDate)
  462. var endunitx = Date.parse(endDate)/1000
  463. console.log("日期时间搓",endunitx)
  464. //统计透析总量
  465. this.getDialysisModeType(startDate,endDate)
  466. //统计转归状态
  467. this.getTotalLapseCount(startunitx,endunitx)
  468. //统计男女比例
  469. this.getTotalSexCount(startunitx,endunitx)
  470. //统计传染病
  471. this.getTotalInfectiousCount(startunitx,endunitx)
  472. //统计年龄
  473. this.getTotalAgeCount(startunitx,endunitx)
  474. //统计透析年龄
  475. this.getTotalDialysisCount(startunitx,endunitx)
  476. }
  477. },
  478. getDialysisModeType(startDate,endDate){
  479. getDialysisModeType(startDate,endDate).then(response=>{
  480. if(response.data.state == 1){
  481. var modetype = response.data.data.modetype
  482. var total = response.data.data.total
  483. console.log("total",total)
  484. this.total = total
  485. this.modetype = modetype
  486. console.log("modetype",modetype)
  487. }
  488. })
  489. },
  490. //统计转归
  491. getTotalLapseCount(startDate,endDate){
  492. getTotalLapseCount(startDate,endDate).then(response=>{
  493. if(response.data.state == 1){
  494. var patients = response.data.data.patients
  495. this.rollOutTotal = patients.length
  496. console.log("留治病人长度",patients.length)
  497. var patienttwo = response.data.data.patienttwo
  498. this.outTotal = patienttwo.length
  499. console.log("转出长度", this.outTotal)
  500. var count = response.data.data.count
  501. this.patientCount = count
  502. }
  503. })
  504. },
  505. //统计男女比例
  506. getTotalSexCount(timeStar,timeEnd){
  507. getTotalSexCount(timeStar,timeEnd).then(response=>{
  508. if(response.data.state === 1){
  509. var total = response.data.data.total
  510. // console.log("总人数",total)
  511. this.totalGender = total
  512. var totalMan = response.data.data.totalSex
  513. // console.log("男人",totalMan)
  514. this.totalMan = totalMan
  515. var totalWoman = total - totalMan
  516. this.totalWoman = totalWoman
  517. }
  518. })
  519. },
  520. //统计传染病
  521. getTotalInfectiousCount(timeStar,timeEnd){
  522. getTotalInfectiousCount(timeStar,timeEnd).then(response=>{
  523. if(response.data.state === 1){
  524. this.InfectiousTotal = response.data.data.total
  525. console.log("===",this.InfectiousTotal)
  526. var infectious = response.data.data.count
  527. console.log("infectious",infectious)
  528. var otherTotal = response.data.data.otherTotal
  529. console.log("otherTotal",otherTotal)
  530. this.otherTotal = otherTotal
  531. var arr = [
  532. {count:0,disease_id:2},
  533. {count:0,disease_id:3},
  534. {count:0,disease_id:4},
  535. {count:0,disease_id:5},
  536. {count:0,disease_id:6},
  537. ]
  538. if(infectious.length == 0){
  539. this.InfectiousList = arr
  540. return false
  541. }
  542. this.InfectiousList = infectious
  543. }
  544. })
  545. },
  546. getTotalAgeCount(timeStar,timeEnd){
  547. getTotalAgeCount(timeStar,timeEnd).then(response=>{
  548. if(response.data.state == 1){
  549. var ageCount = response.data.data.ageCount
  550. console.log("ageCount",ageCount)
  551. var arr = []
  552. arr = ageCount.sort(this.compare('age'))
  553. this.ageCount = arr
  554. this.ageTotal = response.data.data.total
  555. }
  556. })
  557. },
  558. compare:function (k) {
  559. return function (a, b) {
  560. var M = a[k];
  561. var N = b[k];
  562. return M - N; // 从低向高排
  563. // return N - M; // 从高向低排
  564. }
  565. },
  566. //统计透析年龄
  567. getTotalDialysisCount(timeStar,timeEnd){
  568. // const endDate = moment(new Date()).format('YYYY-MM-DD')
  569. // console.log("结束时间",endDate)
  570. // var end = Date.parse(endDate)/1000
  571. // console.log("end",end)
  572. // const startDate = moment().subtract('month', 144).format('YYYY-MM-DD')
  573. // var twStart = Date.parse(startDate)/1000
  574. // console.log("12年前",twStart)
  575. // const start = moment().subtract('month', 432).format('YYYY-MM-DD')
  576. // console.log("start",start)
  577. // var sixStart = Date.parse(start)/1000
  578. // console.log("36年前",sixStart)
  579. // const sevnstart = moment().subtract('month', 720).format('YYYY-MM-DD')
  580. // var sevenStart = Date.parse(sevnstart)/1000
  581. // console.log("60年前",sevenStart)
  582. getTotalDialysisCount(timeStar,timeEnd).then(response=>{
  583. if(response.data.state == 1){
  584. var dataage = response.data.data.dataage
  585. console.log("dataage",dataage)
  586. this.dialysisAge = dataage
  587. }
  588. })
  589. }
  590. },
  591. created() {
  592. //获取本月当前机构的透析模式
  593. const startDate = moment().subtract('month', 0).format('YYYY-MM') + '-01'
  594. console.log("开始时间",startDate)
  595. const endDate = moment(new Date()).format('YYYY-MM-DD')
  596. // console.log("结束时间",endDate)
  597. var now = new Date()
  598. var nowMonth = now.getMonth(); //当前月
  599. var nowYear = now.getFullYear(); //当前年
  600. //本月的开始时间
  601. var monthStartDate = new Date(nowYear, nowMonth, 1);
  602. var timeStar=Date.parse(monthStartDate)/1000;//s
  603. // console.log("本月第一天",timeStar)
  604. //本月的结束时间
  605. var monthEndDate = new Date(nowYear, nowMonth+1, 0);
  606. var timeEnd=Date.parse(monthEndDate)/1000-1;//s
  607. // console.log("本月最后一天",timeEnd)
  608. //统计透析总量
  609. this.getDialysisModeType(startDate,endDate)
  610. //统计转归状态
  611. this.getTotalLapseCount(timeStar,timeEnd)
  612. //统计男女比例
  613. this.getTotalSexCount(timeStar,timeEnd)
  614. //统计传染病
  615. this.getTotalInfectiousCount(timeStar,timeEnd)
  616. //统计年龄
  617. this.getTotalAgeCount(timeStar,timeEnd)
  618. //统计透析年龄
  619. this.getTotalDialysisCount(timeStar,timeEnd)
  620. },
  621. };
  622. </script>
  623. <style rel="stylesheet/scss" lang="scss" scoped>
  624. .infoBox {
  625. display: flex;
  626. flex-wrap: wrap;
  627. .infoOne {
  628. margin-right: 30px;
  629. margin-top: 30px;
  630. .titleBox {
  631. display: flex;
  632. align-items: center;
  633. }
  634. .point {
  635. display: inline-block;
  636. width: 7px;
  637. height: 7px;
  638. background: linear-gradient(
  639. 90deg,
  640. rgba(169, 224, 243, 1),
  641. rgba(159, 189, 252, 1)
  642. );
  643. border-radius: 50%;
  644. }
  645. .point1 {
  646. width: 7px;
  647. height: 7px;
  648. background: linear-gradient(
  649. 90deg,
  650. rgba(255, 215, 192, 1),
  651. rgba(255, 153, 148, 1)
  652. );
  653. border-radius: 50%;
  654. }
  655. .point2 {
  656. width: 7px;
  657. height: 7px;
  658. background: linear-gradient(
  659. 90deg,
  660. rgba(215, 195, 253, 1),
  661. rgba(179, 168, 247, 1)
  662. );
  663. border-radius: 50%;
  664. }
  665. .infoTitle {
  666. font-size: 16px;
  667. font-weight: bold;
  668. margin-left: 5px;
  669. color: #000;
  670. }
  671. .borderBox {
  672. width: 340px;
  673. min-height: 140px;
  674. background: rgba(255, 255, 255, 1);
  675. border: 1px solid rgba(229, 229, 229, 1);
  676. border-radius: 10px;
  677. padding: 0 14px 20px;
  678. margin-top: 10px;
  679. p {
  680. font-size: 14px;
  681. color: #000;
  682. margin: 10px 0 3px;
  683. }
  684. }
  685. .borderBox1 {
  686. width: 340px;
  687. min-height: 140px;
  688. background: rgba(255, 255, 255, 1);
  689. border: 1px solid rgba(229, 229, 229, 1);
  690. border-radius: 10px;
  691. padding: 0 14px 20px;
  692. margin-top: 10px;
  693. p {
  694. font-size: 14px;
  695. color: #000;
  696. margin: 10px 0 3px;
  697. }
  698. }
  699. .borderBox2 {
  700. width: 340px;
  701. min-height: 140px;
  702. background: rgba(255, 255, 255, 1);
  703. border: 1px solid rgba(229, 229, 229, 1);
  704. border-radius: 10px;
  705. padding: 0 14px 20px;
  706. margin-top: 10px;
  707. p {
  708. font-size: 14px;
  709. color: #000;
  710. margin: 10px 0 3px;
  711. }
  712. }
  713. }
  714. }
  715. </style>
  716. <style lang="scss">
  717. .infoBox {
  718. .infoOne {
  719. .borderBox {
  720. .el-progress-bar__inner {
  721. background: linear-gradient(
  722. 90deg,
  723. rgba(169, 224, 243, 1),
  724. rgba(159, 189, 252, 1)
  725. );
  726. }
  727. .el-progress-bar{
  728. margin-right: -59px;
  729. padding-right: 60px;
  730. }
  731. }
  732. .borderBox1 {
  733. .el-progress-bar__inner {
  734. background: linear-gradient(
  735. 90deg,
  736. rgba(255, 215, 192, 1),
  737. rgba(255, 153, 148, 1)
  738. );
  739. }
  740. .el-progress-bar{
  741. margin-right: -59px;
  742. padding-right: 60px;
  743. }
  744. }
  745. .borderBox2 {
  746. .el-progress-bar__inner {
  747. background: linear-gradient(
  748. 90deg,
  749. rgba(215, 195, 253, 1),
  750. rgba(179, 168, 247, 1)
  751. );
  752. }
  753. .el-progress-bar{
  754. margin-right: -59px;
  755. padding-right: 60px;
  756. }
  757. }
  758. }
  759. }
  760. </style>