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

personal.vue 21KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651
  1. <template>
  2. <div class="page_personal">
  3. <div class="cell clearfix">
  4. <el-form :inline="true">
  5. <el-form-item label>
  6. <el-autocomplete
  7. class="checkSearch"
  8. popper-class="my-autocomplete"
  9. v-model="search_value"
  10. :fetch-suggestions="querySearchAsync"
  11. :trigger-on-focus="false"
  12. placeholder="请输入病人名字"
  13. @select="handleSelect"
  14. >
  15. <i class="el-icon-search el-input__icon" slot="suffix"></i>
  16. <template slot-scope="{ item }">
  17. <div class="name">{{ item.name }}</div>
  18. </template>
  19. </el-autocomplete>
  20. </el-form-item>
  21. </el-form>
  22. <el-select v-model="query.project_id" placeholder="请选择" style="width:120px;margin-right:20px"
  23. @change="changeProject">
  24. <el-option
  25. v-for="item in project_columns"
  26. :key="item.project_id"
  27. :label="item.project_name"
  28. :value="item.project_id"
  29. ></el-option>
  30. </el-select>
  31. <el-select
  32. v-model="query.item_id"
  33. placeholder="请选择"
  34. style="width:120px;margin-right:20px"
  35. @change="changeItem"
  36. >
  37. <el-option
  38. v-for="item in item_columns"
  39. :key="item.id"
  40. :label="item.item_name"
  41. :value="item.id"
  42. ></el-option>
  43. </el-select>
  44. <!--<el-select v-model="query.range_value" placeholder="请选择" style="width:120px;margin-right:20px"-->
  45. <!--@change="changeRangeValue">-->
  46. <!--<el-option-->
  47. <!--v-for="item in range_value_columns"-->
  48. <!--:key="item"-->
  49. <!--:label="item"-->
  50. <!--:value="item"-->
  51. <!--&gt;</el-option>-->
  52. <!--</el-select>-->
  53. <label class="title">
  54. <span class="name">日期查询</span> :
  55. </label>
  56. <el-date-picker
  57. v-model="query.start_time"
  58. prefix-icon="el-icon-date"
  59. @change="changeTime"
  60. :editable="false"
  61. style="width: 150px;"
  62. type="date"
  63. :picker-options="pickerOptions"
  64. placeholder="选择日期时间"
  65. align="right"
  66. format="yyyy-MM-dd"
  67. value-format="yyyy-MM-dd"
  68. ></el-date-picker>
  69. <span class>-</span>
  70. <el-date-picker
  71. v-model="query.end_time"
  72. prefix-icon="el-icon-date"
  73. @change="changeEndTime"
  74. :editable="false"
  75. :picker-options="pickerOptions"
  76. style="width: 150px;"
  77. type="date"
  78. placeholder="选择日期时间"
  79. align="right"
  80. format="yyyy-MM-dd"
  81. value-format="yyyy-MM-dd"
  82. ></el-date-picker>
  83. </div>
  84. <el-container>
  85. <div style="width:150px">
  86. <div class="tableTitle">患者列表</div>
  87. <el-table ref="table" :data="patientsData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }"
  88. :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
  89. highlight-current-row
  90. @current-change="handleChange">
  91. <el-table-column prop="dialysis_no" label="透析号" width="80">
  92. <template slot-scope="scope">{{scope.row.dialysis_no}}</template>
  93. </el-table-column>
  94. <el-table-column prop="name" label="姓名" width="80">
  95. <template slot-scope="scope">{{ scope.row.name }}</template>
  96. </el-table-column>
  97. </el-table>
  98. </div>
  99. <div style="padding-left:10px;flex:1">
  100. <div class="tableTitle">统计图</div>
  101. <div>
  102. <line-chart :options="options"></line-chart>
  103. </div>
  104. <div class="tableTitle">指标趋势</div>
  105. <div>
  106. <div>
  107. <line-chart :options="options2"></line-chart>
  108. </div>
  109. </div>
  110. <div></div>
  111. </div>
  112. </el-container>
  113. </div>
  114. </template>
  115. <script>
  116. import echarts from 'echarts'
  117. import LineChart from '../../components/LineChart'
  118. import {
  119. GetInspectionIndexChart,
  120. GetInspectionIndexInit,
  121. GetInspectionIndexTable,
  122. GetPatientInspectionIndexBarChart,
  123. GetPatientInspectionIndexChart,
  124. GetRangeValue,
  125. GetDefalutPatient
  126. } from '@/api/common/statistics'
  127. import { uParseTime } from '@/utils/tools'
  128. import { getCurrentOrgPatients } from '@/api/common/common'
  129. import { PostSearch } from '@/api/patient'
  130. export default {
  131. components: {
  132. LineChart
  133. },
  134. data() {
  135. return {
  136. pickerOptions: {
  137. disabledDate(time) {
  138. let threeMonths = new Date(new Date().setFullYear(new Date().getFullYear() - 1)).getTime() - 24 * 3600 * 1000
  139. return time.getTime() > Date.now() || time.getTime() < threeMonths
  140. }
  141. },
  142. item_name: '',
  143. search_value: '',
  144. query: {
  145. patient_id: '',
  146. start_time: '',
  147. end_time: '',
  148. limit: 20,
  149. page: 1,
  150. project_id: '',
  151. item_id: '',
  152. range_type: '',
  153. range_value: ''
  154. },
  155. project_columns: [],
  156. item_columns: [],
  157. range_value_columns: [],
  158. all_inspection_reference: [],
  159. patientsData: [],
  160. value: '请选项',
  161. tableData: [],
  162. options: {
  163. title: {
  164. text: 'ECharts 入门示例'
  165. },
  166. tooltip: {},
  167. legend: {
  168. data: [''],
  169. left: 0
  170. },
  171. xAxis: {
  172. data: []
  173. },
  174. yAxis: {
  175. axisLabel: {
  176. formatter: '{value} %'
  177. },
  178. show: false
  179. },
  180. series: [
  181. {
  182. name: '',
  183. type: 'bar',
  184. data: [],
  185. barWidth: 30,
  186. label: {
  187. normal: {
  188. show: true,
  189. position: 'top',
  190. formatter: '{c}'
  191. }
  192. },
  193. //配置样式
  194. itemStyle: {
  195. //通常情况下:
  196. //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
  197. normal: {
  198. color: function(params) {
  199. //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值
  200. var colorList = [
  201. ['#A9E0F3', '#9FBDFC'],
  202. ['#FFD7C0', '#FF9994']
  203. ]
  204. var index = params.dataIndex
  205. if (params.dataIndex >= colorList.length) {
  206. index = params.dataIndex % colorList.length
  207. }
  208. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  209. { offset: 0, color: colorList[index][0] },
  210. // { offset: 0.5, color: colorList[index][1] },
  211. { offset: 1, color: colorList[index][1] }
  212. ])
  213. },
  214. barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
  215. },
  216. //鼠标悬停时:
  217. emphasis: {
  218. shadowBlur: 10,
  219. shadowOffsetX: 0,
  220. shadowColor: 'rgba(0, 0, 0, 0.5)'
  221. }
  222. }
  223. }
  224. ]
  225. },
  226. options2: {
  227. title: {
  228. text: 'ECharts 入门示例'
  229. },
  230. tooltip: {},
  231. legend: {
  232. data: ['次数'],
  233. left: 0
  234. },
  235. xAxis: {
  236. data: [],
  237. axisLine: {
  238. lineStyle: {
  239. color: '#FF0000',
  240. width: 8 //这里是为了突出显示加上的
  241. }
  242. },
  243. axisLabel: {
  244. interval: 0,
  245. formatter: function(value) {
  246. var ret = '' //拼接加\n返回的类目项
  247. var maxLength = 8 //每项显示文字个数
  248. var valLength = value.length //X轴类目项的文字个数
  249. var rowN = Math.ceil(valLength / maxLength) //类目项需要换行的行数
  250. if (rowN > 1) {
  251. //如果类目项的文字大于3,
  252. for (var i = 0; i < rowN; i++) {
  253. var temp = '' //每次截取的字符串
  254. var start = i * maxLength //开始截取的位置
  255. var end = start + maxLength //结束截取的位置
  256. //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
  257. temp = value.substring(start, end) + '\n'
  258. ret += temp //凭借最终的字符串
  259. }
  260. return ret
  261. } else {
  262. return value
  263. }
  264. }
  265. }
  266. },
  267. yAxis: {
  268. axisLabel: {
  269. formatter: '{value} %'
  270. },
  271. show: false,
  272. axisLine: {
  273. lineStyle: {
  274. color: '#00FF00',
  275. width: 8 //这里是为了突出显示加上的
  276. }
  277. }
  278. },
  279. series: [
  280. {
  281. name: '',
  282. type: 'line',
  283. data: [],
  284. barWidth: 30,
  285. label: {
  286. normal: {
  287. show: true,
  288. position: 'top',
  289. formatter: '{c}'
  290. }
  291. },
  292. //配置样式
  293. itemStyle: {
  294. //通常情况下:
  295. //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
  296. normal: {
  297. color: function(params) {
  298. //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值
  299. var colorList = [
  300. ['#A9E0F3', '#9FBDFC'],
  301. ['#FFD7C0', '#FF9994']
  302. ]
  303. var index = params.dataIndex
  304. if (params.dataIndex >= colorList.length) {
  305. index = params.dataIndex % colorList.length
  306. }
  307. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  308. { offset: 0, color: colorList[index][0] },
  309. // { offset: 0.5, color: colorList[index][1] },
  310. { offset: 1, color: colorList[index][1] }
  311. ])
  312. },
  313. barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
  314. },
  315. //鼠标悬停时:
  316. emphasis: {
  317. shadowBlur: 10,
  318. shadowOffsetX: 0,
  319. shadowColor: 'rgba(0, 0, 0, 0.5)'
  320. }
  321. }
  322. }
  323. ]
  324. }
  325. }
  326. },
  327. methods: {
  328. handleChange(val){
  329. this.query.patient_id = val.id
  330. this.query.page = 1
  331. this.GetPatientInspectionIndexBarChart(this.query)
  332. this.GetPatientInspectionIndexChart(this.query)
  333. },
  334. handleSelect(val) {
  335. this.query.patient_id = val.id
  336. this.query.page = 1
  337. this.GetPatientInspectionIndexBarChart(this.query)
  338. this.GetPatientInspectionIndexChart(this.query)
  339. for (let i = 0; i< this.patientsData.length; i++){
  340. if(this.patientsData[i].id == val.id){
  341. this.$refs.table.setCurrentRow(this.patientsData[i])
  342. }
  343. }
  344. },
  345. querySearchAsync(keyword, cb) {
  346. let key = ''
  347. if (keyword != undefined) {
  348. key = keyword
  349. }
  350. let searchArray = []
  351. PostSearch(key).then(response => {
  352. if (response.data.state == 1) {
  353. searchArray = response.data.data.patient
  354. cb(searchArray)
  355. } else {
  356. cb([])
  357. }
  358. })
  359. },
  360. getCurrentOrgPatients() {
  361. getCurrentOrgPatients().then(response => {
  362. if (response.data.state == 1) {
  363. var patients = response.data.data.patients
  364. this.patientsData = patients
  365. GetDefalutPatient()
  366. .then(rs => {
  367. var resp = rs.data
  368. if (resp.state == 1) {
  369. this.query.patient_id =resp.data.patient.id
  370. this.patient_name = resp.data.patient.name
  371. for (let i = 0; i< this.patientsData.length; i++){
  372. if(this.patientsData[i].id == resp.data.patient.id){
  373. this.$refs.table.setCurrentRow(this.patientsData[i])
  374. }
  375. }
  376. this.GetInspectionIndexInit()
  377. } else {
  378. }
  379. })
  380. .catch(error => {
  381. })
  382. }
  383. })
  384. },
  385. changeProject(val) {
  386. this.query.page = 1
  387. let item_inspection_reference = []
  388. for (let i = 0; i < this.all_inspection_reference.length; i++) {
  389. if (this.all_inspection_reference[i].project_id == val) {
  390. item_inspection_reference.push(this.all_inspection_reference[i])
  391. }
  392. }
  393. this.item_columns = item_inspection_reference
  394. var projectInfo = this.getPojectInfo(this.item_columns[0].project_id, this.item_columns[0].id)
  395. this.query.project_id = projectInfo.project_id
  396. this.query.item_id = projectInfo.id
  397. this.item_name = projectInfo.item_name
  398. this.query.range_type = projectInfo.range_type
  399. this.GetRangeValue(projectInfo.range_type, projectInfo.project_id, projectInfo.id)
  400. }, changeItem(val) {
  401. this.query.page = 1
  402. this.query.item_id = val
  403. var projectInfo = this.getPojectInfo(this.query.project_id, val)
  404. this.item_name = projectInfo.item_name
  405. this.GetRangeValue(projectInfo.range_type, projectInfo.project_id, projectInfo.id)
  406. }, changeRangeValue(val) {
  407. this.query.range_value = val
  408. this.query.page = 1
  409. // this.GetInspectionIndexTable(this.query)
  410. }, GetInspectionIndexInit() {
  411. GetInspectionIndexInit()
  412. .then(rs => {
  413. var resp = rs.data
  414. if (resp.state == 1) {
  415. let project = []
  416. let item = []
  417. this.all_inspection_reference = resp.data.references
  418. for (let i = 0; i < this.all_inspection_reference.length; i++) {
  419. project.push(this.all_inspection_reference[i])
  420. }
  421. var obj = {}
  422. //去重复
  423. project = project.reduce((cur, next) => {
  424. obj[next.project_id] ? '' : (obj[next.project_id] = true && cur.push(next))
  425. return cur
  426. }, [])
  427. this.project_columns = project
  428. for (let i = 0; i < this.all_inspection_reference.length; i++) {
  429. if (this.all_inspection_reference[i].project_id == this.project_columns[0].project_id) {
  430. item.push(this.all_inspection_reference[i])
  431. }
  432. }
  433. this.item_columns = item
  434. this.item_name = item[0].item_name
  435. var projectInfo = this.getPojectInfo(this.project_columns[0].project_id, this.item_columns[0].id)
  436. this.query.project_id = projectInfo.project_id
  437. this.query.item_id = projectInfo.id
  438. this.query.range_type = projectInfo.range_type
  439. this.GetRangeValue(projectInfo.range_type, projectInfo.project_id, projectInfo.id)
  440. } else {
  441. this.$message.error(resp.msg)
  442. }
  443. })
  444. .catch(error => {
  445. })
  446. },
  447. getPojectInfo(project_id, item_id) {
  448. for (let i = 0; i < this.all_inspection_reference.length; i++) {
  449. if (this.all_inspection_reference[i].project_id == project_id && this.all_inspection_reference[i].id == item_id) {
  450. return this.all_inspection_reference[i]
  451. }
  452. }
  453. return null
  454. }, changeTime(val) {
  455. var time = this.getTimestamp(val) - this.getTimestamp(this.query.end_time)
  456. if (time > 0) {
  457. this.$message.error('结束时间不能小于开始时间')
  458. } else {
  459. // this.getDialysisList()
  460. this.query.page = 1
  461. this.GetInspectionIndexChart(this.query)
  462. this.GetInspectionIndexTable(this.query)
  463. }
  464. },
  465. changeEndTime(val) {
  466. var time =
  467. this.getTimestamp(val) - this.getTimestamp(this.query.start_time)
  468. if (time < 0) {
  469. this.$message.error('结束时间不能小于开始时间')
  470. } else {
  471. this.query.page = 1
  472. this.GetInspectionIndexChart(this.query)
  473. this.GetInspectionIndexTable(this.query)
  474. }
  475. }, GetRangeValue(range_type, project_id, id) {
  476. let params = {
  477. range_type: range_type,
  478. project_id: project_id,
  479. item_id: id
  480. }
  481. GetRangeValue(params)
  482. .then(rs => {
  483. var resp = rs.data
  484. if (resp.state == 1) {
  485. if (range_type == 1) {
  486. this.range_value_columns = []
  487. this.range_value_columns.push('全部')
  488. this.range_value_columns.push('小于' + resp.data.range_vaule[0])
  489. this.range_value_columns.push(resp.data.range_vaule[0] + '~' + resp.data.range_vaule[1])
  490. this.range_value_columns.push('大于' + resp.data.range_vaule[1])
  491. this.query.range_value = '全部'
  492. } else {
  493. this.range_value_columns = []
  494. this.range_value_columns.push('全部')
  495. for (let i = 0; i < resp.data.range_vaule.length; i++) {
  496. this.range_value_columns.push(resp.data.range_vaule[i])
  497. }
  498. this.query.range_value = '全部'
  499. }
  500. this.GetPatientInspectionIndexBarChart(this.query)
  501. this.GetPatientInspectionIndexChart(this.query)
  502. } else {
  503. this.$message.error(resp.msg)
  504. }
  505. }
  506. )
  507. .catch(error => {
  508. })
  509. },
  510. GetPatientInspectionIndexBarChart(params) {
  511. this.options.xAxis.data = []
  512. this.options.series[0].data = []
  513. GetPatientInspectionIndexBarChart(params)
  514. .then(rs => {
  515. var resp = rs.data
  516. if (resp.state == 1) {
  517. for (let i = 0; i < resp.data.data.length; i++) {
  518. this.options.xAxis.data.push(resp.data.data[i].name)
  519. this.options.series[0].data.push(resp.data.data[i].total)
  520. }
  521. } else {
  522. this.$toast({
  523. message: resp.msg
  524. })
  525. }
  526. })
  527. .catch(error => {
  528. })
  529. },
  530. GetPatientInspectionIndexChart(params) {
  531. this.options2.xAxis.data = []
  532. this.options2.series[0].data = []
  533. GetPatientInspectionIndexChart(params)
  534. .then(rs => {
  535. var resp = rs.data
  536. if (resp.state == 1) {
  537. for (let i = 0; i < resp.data.data.length; i++) {
  538. this.options2.xAxis.data.push(resp.data.data[i].date)
  539. this.options2.series[0].data.push(resp.data.data[i].value)
  540. }
  541. } else {
  542. }
  543. })
  544. .catch(error => {
  545. })
  546. }, getTimestamp(time) {
  547. // 把时间日期转成时间戳
  548. return new Date(time).getTime() / 1000;
  549. },
  550. }, created() {
  551. var date = new Date()
  552. var year = date.getFullYear() //获取完整的年份(4位)
  553. var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : date.getMonth() + 1 //获取当前月份(0-11,0代表1月)
  554. var day = date.getDate() < 0 ? '0' + date.getDate().toString() : date.getDate() //获取当前日(1-31)
  555. var last_month = date.getMonth() < 10 ? '0' + date.getMonth().toString() : date.getMonth() //获取当前月份(0-11,0代表1月)
  556. this.query.end_time = year + '-' + month + '-' + day
  557. this.query.start_time = year + '-' + last_month + '-' + day
  558. this.getCurrentOrgPatients()
  559. }
  560. }
  561. </script>
  562. <style lang="scss" scoped>
  563. .tableTitle {
  564. font-size: 16px;
  565. color: #000;
  566. font-weight: bold;
  567. margin-bottom: 10px;
  568. }
  569. </style>
  570. <style lang="scss">
  571. .page_personal {
  572. .cell {
  573. text-align: center;
  574. }
  575. .el-button--medium {
  576. padding: 10px 8px;
  577. }
  578. .el-form-item {
  579. margin-bottom: 0;
  580. }
  581. }
  582. </style>