blood_table.vue 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496
  1. <template>
  2. <div class="main-contain">
  3. <div class="position">
  4. <div>
  5. <span>
  6. <el-button @click="return_click" type="text" icon="el-icon-arrow-left">返回</el-button>
  7. </span>&nbsp;&nbsp;
  8. <span>患者血压详情</span>
  9. </div>
  10. </div>
  11. <div class="app-container">
  12. <div class="page_patientControlAnalysis">
  13. <div style="display: flex;margin-bottom: 20px;">
  14. <div style="flex: 3;display: flex;flex-wrap:wrap">
  15. <div>
  16. 日期:
  17. <el-select v-model="date_value" @change="datachange" placeholder="请选择" style="width: 100px;">
  18. <el-option
  19. v-for="item in date_options"
  20. :key="item.value"
  21. :label="item.label"
  22. :value="item.value">
  23. </el-option>
  24. </el-select>
  25. </div>
  26. <div style="margin:0 10px;">
  27. <el-date-picker
  28. v-model="start_date"
  29. type="date"
  30. value-format="yyyy-MM-dd"
  31. placeholder="选择日期"
  32. style="width: 150px;">
  33. </el-date-picker>
  34. <span>-</span>
  35. <el-date-picker
  36. v-model="end_date"
  37. type="date"
  38. value-format="yyyy-MM-dd"
  39. placeholder="选择日期"
  40. style="width: 150px;">
  41. </el-date-picker>
  42. </div>
  43. <div>
  44. 状态:
  45. <el-select v-model="status_value" placeholder="请选择" style="width: 100px;">
  46. <el-option :key="0" label="不限" :value="0"></el-option>
  47. <el-option
  48. v-for="item in status_options"
  49. :key="item.value"
  50. :label="item.label"
  51. :value="item.value">
  52. </el-option>
  53. </el-select>
  54. </div>
  55. <div>
  56. 患者状态:
  57. <el-select v-model="blood_value" placeholder="请选择" style="width: 100px;">
  58. <el-option :key="0" label="不限" :value="0"></el-option>
  59. <el-option
  60. v-for="item in blood_options"
  61. :key="item.value"
  62. :label="item.label"
  63. :value="item.value">
  64. </el-option>
  65. </el-select>
  66. </div>
  67. </div>
  68. <div style="flex: 1;">
  69. <div>
  70. <el-button type="primary" @click="deil_click">查询</el-button>
  71. <el-button type="primary" @click="exportExcel">导出</el-button>
  72. </div>
  73. </div>
  74. </div>
  75. <el-table :data="tableData" border style="width: 100%"
  76. :header-cell-style="{textAlign: 'center'}"
  77. :cell-style="{ textAlign: 'center' }"
  78. height="380">
  79. <el-table-column
  80. prop="index"
  81. label="序号"
  82. width="50">
  83. </el-table-column>
  84. <el-table-column
  85. prop="dialysis_no"
  86. label="透析号"
  87. width="70">
  88. </el-table-column>
  89. <el-table-column
  90. prop="patient_name"
  91. label="患者姓名"
  92. width="80">
  93. </el-table-column>
  94. <el-table-column
  95. prop="gender"
  96. label="性别"
  97. width="50">
  98. </el-table-column>
  99. <el-table-column
  100. prop="age"
  101. label="年龄"
  102. width="50">
  103. </el-table-column>
  104. <el-table-column
  105. prop="dialysis_date"
  106. label="透析日期"
  107. width="100">
  108. </el-table-column>
  109. <el-table-column
  110. prop="dryweight"
  111. label="干体重"
  112. width="70">
  113. </el-table-column>
  114. <el-table-column
  115. prop="UltrafiltrationVol"
  116. label="超滤总量(L)"
  117. width="90">
  118. </el-table-column>
  119. <el-table-column
  120. prop="actual_ultrafiltration"
  121. label="实际超滤量(ml)"
  122. width="100">
  123. </el-table-column>
  124. <el-table-column
  125. prop="ultrafiltration_rate"
  126. label="超滤率"
  127. width="70">
  128. </el-table-column>
  129. <el-table-column
  130. prop="preDialysisBP"
  131. label="透前血压"
  132. width="90">
  133. </el-table-column>
  134. <el-table-column
  135. prop="monitoringbp"
  136. label="监测记录血压">
  137. </el-table-column>
  138. <el-table-column
  139. prop="PostDialysisBP"
  140. label="透后血压"
  141. width="90">
  142. </el-table-column>
  143. </el-table>
  144. <div style="text-align: right;margin-top: 10px;">
  145. <el-pagination
  146. @size-change="handleSizeChange"
  147. @current-change="handleCurrentChange"
  148. :current-page="currentPage"
  149. :page-sizes="[50,100, 200, 300, 400]"
  150. :page-size="limit"
  151. layout="total, sizes, prev, pager, next, jumper"
  152. :total="total">
  153. </el-pagination>
  154. </div>
  155. </div>
  156. </div>
  157. <!-- 弹窗 -->
  158. </div>
  159. </template>
  160. <script>
  161. import * as echarts from 'echarts';
  162. import XLSX from 'xlsx';
  163. import { uParseTime } from "@/utils/tools";
  164. import {Getbpdetail} from '../../../../api/qcd'
  165. import { forEach } from 'jszip';
  166. import html2canvas from "html2canvas"
  167. export default {
  168. components:{
  169. },
  170. data(){
  171. return{
  172. date_value:4,
  173. start_date:'',
  174. end_date:this.getTime(new Date()),
  175. mode:'',
  176. date_mode:'',
  177. source:'',
  178. dialyze_value:0,
  179. dialyze_dialog:false,
  180. currentPage:1,
  181. limit:50,
  182. total:0,
  183. tableData:[],
  184. status_value:1,
  185. blood_value:0,
  186. status_options:[{value:1,label:'达标'},{value:2,label:'不达标'}],
  187. date_options:[{value:1,label:'最近七天'},{value:2,label:'本周'},{value:3,label:'上周'},{value:4,label:'本月'},
  188. {value:5,label:'上月'},{value:6,label:'本年'},{value:7,label:'上一年'}
  189. ],
  190. blood_options:[{value:1,label:'透前血压'},{value:2,label:'透后血压'}],
  191. date_mode_options:[{value:1,label:'按周'},{value:2,label:'按天'},{value:3,label:'按月'},{value:4,label:'按年'}],
  192. source_options:[{value:1,label:'以开始透析为准'},{value:2,label:'以排班为准'}],
  193. input:'',
  194. }
  195. },
  196. methods:{
  197. // 返回
  198. return_click(){
  199. this.$router.push('/Dialysisanalysis/qualitycontrol/weightblood')
  200. },
  201. // 导出excel
  202. exportExcel(){
  203. let tableData = [
  204. ['序号', '透析号', '患者姓名','性别','年龄', '透析日期','干体重', '超滤总量','实际超滤量','超滤率','透前血压','监测记录血压','透后血压']//导出表头
  205. ]
  206. this.tableData.forEach((item,index) =>{
  207. let rowdata=[]
  208. rowdata=[
  209. item.index,
  210. item.dialysis_no,
  211. item.patient_name,
  212. item.gender,
  213. item.age,
  214. item.dialysis_date,
  215. item.dryweight,
  216. item.UltrafiltrationVol,
  217. item.actual_ultrafiltration,
  218. item.ultrafiltration_rate,
  219. item.preDialysisBP,
  220. item.monitoringbp,
  221. item.PostDialysisBP,
  222. ]
  223. tableData.push(rowdata)
  224. })
  225. let workSheet = XLSX.utils.aoa_to_sheet(tableData);
  226. let bookNew = XLSX.utils.book_new();
  227. XLSX.utils.book_append_sheet(bookNew, workSheet, '患者血压详情') // 工作簿名称
  228. let name = '患者血压详情'+ '.xlsx'
  229. XLSX.writeFile(bookNew, name) // 保存的文件名
  230. },
  231. // 详情查询
  232. deil_click(){
  233. this.Getdialyzerdetail(this.status_value)
  234. },
  235. // 选择日期
  236. datachange(eve){
  237. if(eve ==1){
  238. this.start_date = this.getPreviousDate(7)
  239. this.end_date = this.getTime(new Date())
  240. }else if(eve==2){
  241. this.start_date = this.getFirstDayOfWeek(new Date())
  242. this.end_date = this.getTime(new Date())
  243. console.log('this.start_date', this.start_date);
  244. }else if(eve ==3){
  245. var date=new Date()
  246. date.setDate(date.getDate()-7 - date.getDay() + 1);
  247. var m =''
  248. var d = ''
  249. if(date.getMonth() + 1<10){
  250. m = '0'+(date.getMonth() + 1)
  251. }else{
  252. m = date.getMonth() + 1
  253. }
  254. if(date.getDate()<10){
  255. d = '0'+date.getDate()
  256. }else{
  257. d = date.getDate()
  258. }
  259. // this.start_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() ;
  260. this.start_date = date.getFullYear() + "-" + m + "-" + d ;
  261. date.setDate(date.getDate() +6);
  262. var mm = ''
  263. var dd = ''
  264. if(date.getMonth() + 1<10){
  265. mm = '0'+(date.getMonth() + 1)
  266. }else{
  267. mm = date.getMonth() + 1
  268. }
  269. if(date.getDate()<10){
  270. dd = '0'+date.getDate()
  271. }else{
  272. dd = date.getDate()
  273. }
  274. // if(date.getMonth() + 1<10)
  275. // this.end_date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
  276. this.end_date = date.getFullYear() + "-" + mm + "-" + dd ;
  277. console.log('this.end_date',this.end_date);
  278. }else if(eve ==4){
  279. this.start_date = this.getFirstDayOfMonth(new Date())
  280. this.end_date = this.getTime(new Date())
  281. }else if(eve ==5){
  282. this.getLastMonthFirstDay()
  283. this.getLastMonthLastDay()
  284. }else if(eve == 6){
  285. this.start_date = this.getFirstDayOfYear(new Date())
  286. this.end_date = this.getTime(new Date())
  287. }else if(eve == 7){
  288. this.getLastYearFirstDay()
  289. this.getLastYearLastDay()
  290. }
  291. console.log('eve',eve);
  292. },
  293. // 详情数据源
  294. Getdialyzerdetail(value){
  295. const params={
  296. status_type:value,
  297. statistics_type:this.blood_value,
  298. start_time:this.start_date,
  299. end_time:this.end_date,
  300. page:this.currentPage,
  301. limit:this.limit,
  302. }
  303. Getbpdetail(params).then(response =>{
  304. if(response.data.state == 1){
  305. const list = response.data.data.list
  306. const table=[]
  307. if(list.length > 0){
  308. list.forEach((item,index)=>{
  309. const obj ={
  310. index:index+1,
  311. dialysis_no:item.dialysis_no,
  312. patient_name:item.patient_name,
  313. gender:this.getgender(item.gender),
  314. age:item.age,
  315. dialysis_date:this.getTime(item.assessment_date),
  316. dryweight:item.dry_weight,
  317. UltrafiltrationVol:item.ultrafiltration_vol/1000,
  318. actual_ultrafiltration:item.actual_ultrafiltration,
  319. ultrafiltration_rate:item.ultrafiltration_rate,
  320. preDialysisBP:item.pre_dialysis_bp,
  321. monitoringbp:item.monitoring_bp,
  322. PostDialysisBP:item.post_dialysis_bp,
  323. }
  324. table.push(obj)
  325. })
  326. this.tableData = table
  327. this.total = response.data.data.total
  328. }
  329. }
  330. console.log('77777血压表格',response);
  331. })
  332. },
  333. // 首先定义一个getPreviousDate函数,方便调用
  334. getPreviousDate(numOfDays) {
  335. var date = new Date();
  336. date.setDate(date.getDate() - numOfDays);
  337. var year = date.getFullYear();
  338. if(date.getMonth() + 1<10){
  339. var month = '0'+(date.getMonth() + 1);
  340. }else{
  341. var month = date.getMonth() + 1;
  342. }
  343. if(date.getDate()<10){
  344. var day = '0'+date.getDate();
  345. }else{
  346. var day = date.getDate();
  347. }
  348. return year + "-" + month + "-" + day;
  349. },
  350. // 本周
  351. getFirstDayOfWeek(date){
  352. var weekday = date.getDay()
  353. date.setDate(date.getDate()-weekday+1);//往前算(weekday-1)天,年份、月份会自动变化
  354. return this.timeFormat(date);
  355. },
  356. // 本月
  357. getFirstDayOfMonth (date) {
  358. date.setDate(1);
  359. return this.timeFormat(date);
  360. },
  361. //上个月第一天
  362. getLastMonthFirstDay() {
  363. var date = new Date();
  364. date.setDate(0);
  365. var y = date.getFullYear(); //获取年份
  366. var m = date.getMonth() + 1; //获取月份
  367. m = m < 10 ? "0" + m : m;
  368. this.start_date = [y, m, '01'].join("-")
  369. // return [y, m, '01'].join("-");
  370. },
  371. // 上个月最后一天
  372. getLastMonthLastDay() {
  373. var date = new Date();
  374. date.setDate(0);
  375. var y = date.getFullYear(); //获取年份
  376. var m = date.getMonth() + 1; //获取月份
  377. var d = new Date(y, m, 0).getDate(); //获取当月最后一日
  378. m = m < 10 ? "0" + m : m; //月份补 0
  379. d = d < 10 ? "0" + d : d; //日数补 0
  380. this.end_date = [y, m, d].join("-")
  381. // return [y, m, d].join("-");
  382. },
  383. // 本年
  384. getFirstDayOfYear (date) {
  385. date.setDate(1);
  386. date.setMonth(0);
  387. return this.timeFormat(date);
  388. },
  389. // 上一年第一天
  390. getLastYearFirstDay() {
  391. let date = new Date();
  392. const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
  393. const start_month= date.setMonth(0); // 设置月份为1月(注意月份是从0开始的)
  394. const start_day = date.setDate(1); // 设置日期为1日
  395. // const last_month = date.setMonth(11); // 设置月份为12月
  396. // const last_day = date.setDate(0); // 设置日期为0,这将自动设置为该月的最后一天
  397. // this.start_date = year+ "-" +start_month+ "-" +start_day
  398. this.start_date = this.getTime(start_day)
  399. // return this.start_date
  400. },
  401. // 上一年最后一天
  402. getLastYearLastDay() {
  403. let date = new Date();
  404. const year= date.setFullYear(date.getFullYear() - 1); // 设置年份为前一年
  405. const last_month = date.setMonth(12); // 设置月份为12月
  406. const last_day = date.setDate(0);// 设置日期为0,这将自动设置为该月的最后一天
  407. // this.end_date = year+ "-" +last_month+ "-" +last_day
  408. this.end_date = this.getTime(last_day)
  409. console.log('this.end_date',this.end_date);
  410. // return this.end_date;
  411. },
  412. // 日期格式化
  413. timeFormat(date) {
  414. if (!date || typeof(date) === "string") {
  415. this.error("参数异常,请检查...");
  416. }
  417. var y = date.getFullYear(); //年
  418. if(date.getMonth() + 1<10){
  419. var m ='0'+(date.getMonth() + 1); //月
  420. }else{
  421. var m =date.getMonth() + 1; //月
  422. }
  423. if(date.getDate()<10){
  424. var d ='0'+date.getDate(); //日
  425. }else{
  426. var d = date.getDate(); //日
  427. }
  428. // var d = date.getDate(); //日
  429. return y + "-" + m + "-" + d;
  430. },
  431. handleCurrentChange(val){
  432. this.currentPage = val
  433. this.Getdialyzerdetail(this.status_value)
  434. },
  435. handleSizeChange(val){
  436. this.limit = val
  437. this.Getdialyzerdetail(this.status_value)
  438. },
  439. // 性别
  440. getgender(ids){
  441. if(ids ==1){
  442. return "男"
  443. }else{
  444. return "女"
  445. }
  446. },
  447. // getVol(value){
  448. // if(value >1000){
  449. // }
  450. // },
  451. // 转换时间
  452. getTime(val) {
  453. if(val < 0){
  454. return ""
  455. }
  456. if(val == ""){
  457. return ""
  458. }else {
  459. return uParseTime(val, '{y}-{m}-{d}')
  460. }
  461. },
  462. dataURLtoBlob(dataURL) {
  463. const arr = dataURL.split(',');
  464. const mime = arr[0].match(/:(.*?);/)[1];
  465. const bstr = atob(arr[1]);
  466. let n = bstr.length;
  467. const u8arr = new Uint8Array(n);
  468. while (n--) {
  469. u8arr[n] = bstr.charCodeAt(n);
  470. }
  471. return new Blob([u8arr], { type: mime });
  472. },
  473. },
  474. mounted(){
  475. },
  476. created(){
  477. this.start_date = this.getFirstDayOfMonth(new Date())
  478. this.Getdialyzerdetail(this.status_value)
  479. },
  480. }
  481. </script>