bloodPressure.vue 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367
  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="page_bloodPressure">
  8. <new-nav activeName="bloodPressure"></new-nav>
  9. <div class="cell clearfix">
  10. <el-form :inline="true" :model="listQuery">
  11. <el-form-item label>
  12. <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:110px"></el-input>
  13. <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
  14. </el-form-item>
  15. </el-form>
  16. <el-select v-model="value" placeholder="请选择" style="width:110px;margin-right:10px">
  17. <el-option
  18. v-for="item in options"
  19. :key="item.value"
  20. :label="item.label"
  21. :value="item.value"
  22. ></el-option>
  23. </el-select>
  24. <label class="title">
  25. <span class="name">日期查询</span> :
  26. </label>
  27. <el-date-picker
  28. v-model="listQuery.start_time"
  29. prefix-icon="el-icon-date"
  30. @change="changeTime"
  31. :editable="false"
  32. style="width: 150px;"
  33. type="date"
  34. placeholder="选择日期时间"
  35. align="right"
  36. format="yyyy-MM-dd"
  37. value-format="yyyy-MM-dd"
  38. ></el-date-picker>
  39. <span class>-</span>
  40. <el-date-picker
  41. v-model="listQuery.end_time"
  42. prefix-icon="el-icon-date"
  43. @change="changeEndTime"
  44. :editable="false"
  45. style="width: 150px;"
  46. type="date"
  47. placeholder="选择日期时间"
  48. align="right"
  49. format="yyyy-MM-dd"
  50. value-format="yyyy-MM-dd"
  51. ></el-date-picker>
  52. </div>
  53. <el-container>
  54. <div style="width:150px">
  55. <div class="tableTitle">患者列表</div>
  56. <el-table :data="tableData" border style="width: 100%;" height="500" :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
  57. <el-table-column prop="date" label="日期" width="70"></el-table-column>
  58. <el-table-column prop="name" label="姓名" width="80"></el-table-column>
  59. </el-table>
  60. </div>
  61. <div style="padding-left:10px;flex:1">
  62. <div class="tableTitle">指标趋势</div>
  63. <div>
  64. <line-chart :options="chart"></line-chart>
  65. </div>
  66. <div class="cell clearfix" style="margin:0;margin-bottom:10px">
  67. <div class="tableTitle">统计表</div>
  68. </div>
  69. <div>
  70. <el-table :data="tableData1" style="width: 100%" border :row-style="{ color: '#303133' }" :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
  71. <el-table-column fixed prop="date" label="日期"></el-table-column>
  72. <el-table-column prop="name" label="姓名"></el-table-column>
  73. <el-table-column prop="province" label="省份"></el-table-column>
  74. <el-table-column prop="city" label="市区"></el-table-column>
  75. <el-table-column prop="address" label="地址"></el-table-column>
  76. <el-table-column prop="zip" label="邮编"></el-table-column>
  77. <el-table-column label="操作" width="100">
  78. <template slot-scope="scope">
  79. <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
  80. </template>
  81. </el-table-column>
  82. </el-table>
  83. <el-pagination
  84. align="right"
  85. @size-change="handleSizeChange"
  86. @current-change="handleCurrentChange"
  87. :current-page="listQuery.page"
  88. :page-sizes="[10, 20, 50, 100]"
  89. :page-size="10"
  90. background
  91. style="margin-top:20px;"
  92. layout="total, sizes, prev, pager, next, jumper"
  93. :total="total"
  94. ></el-pagination>
  95. </div>
  96. </div>
  97. </el-container>
  98. </div>
  99. </div>
  100. </div>
  101. </template>
  102. <script>
  103. import echarts from "echarts";
  104. import NewNav from "../indicatorControlAnalysis/components/NewNav";
  105. import BreadCrumb from "@/xt_pages/components/bread-crumb";
  106. import LineChart from "../../qcd/components/LineChart";
  107. export default {
  108. components: {
  109. LineChart,
  110. BreadCrumb,
  111. NewNav
  112. },
  113. data() {
  114. return {
  115. crumbs: [
  116. { path: false, name: "科室质控" },
  117. { path: false, name: "指标评估统计" },
  118. { path: false, name: "患者血压统计" }
  119. ],
  120. listQuery: {
  121. start_time: "",
  122. end_time: "",
  123. page: 1,
  124. limit: 10
  125. },
  126. tableData: [
  127. {
  128. date: "2016",
  129. name: "王小虎"
  130. },
  131. {
  132. date: "2016",
  133. name: "王小虎"
  134. },
  135. {
  136. date: "2016",
  137. name: "王小虎"
  138. },
  139. {
  140. date: "2016",
  141. name: "王小虎"
  142. },
  143. {
  144. date: "2016",
  145. name: "王小虎"
  146. },
  147. {
  148. date: "2016",
  149. name: "王小虎"
  150. },
  151. {
  152. date: "2016",
  153. name: "王小虎"
  154. },
  155. {
  156. date: "2016",
  157. name: "王小虎"
  158. },
  159. {
  160. date: "2016",
  161. name: "王小虎"
  162. },
  163. {
  164. date: "2016",
  165. name: "王小虎"
  166. },
  167. {
  168. date: "2016",
  169. name: "王小虎"
  170. },
  171. {
  172. date: "2016",
  173. name: "王小虎"
  174. }
  175. ],
  176. tableData1: [
  177. {
  178. date: "2016-05-03",
  179. name: "王小虎",
  180. province: "上海",
  181. city: "普陀区",
  182. address: "上海市普陀区金沙江路 1518 弄",
  183. zip: 200333
  184. },
  185. {
  186. date: "2016-05-02",
  187. name: "王小虎",
  188. province: "上海",
  189. city: "普陀区",
  190. address: "上海市普陀区金沙江路 1518 弄",
  191. zip: 200333
  192. },
  193. {
  194. date: "2016-05-04",
  195. name: "王小虎",
  196. province: "上海",
  197. city: "普陀区",
  198. address: "上海市普陀区金沙江路 1518 弄",
  199. zip: 200333
  200. },
  201. {
  202. date: "2016-05-01",
  203. name: "王小虎",
  204. province: "上海",
  205. city: "普陀区",
  206. address: "上海市普陀区金沙江路 1518 弄",
  207. zip: 200333
  208. },
  209. {
  210. date: "2016-05-08",
  211. name: "王小虎",
  212. province: "上海",
  213. city: "普陀区",
  214. address: "上海市普陀区金沙江路 1518 弄",
  215. zip: 200333
  216. },
  217. {
  218. date: "2016-05-06",
  219. name: "王小虎",
  220. province: "上海",
  221. city: "普陀区",
  222. address: "上海市普陀区金沙江路 1518 弄",
  223. zip: 200333
  224. },
  225. {
  226. date: "2016-05-07",
  227. name: "王小虎",
  228. province: "上海",
  229. city: "普陀区",
  230. address: "上海市普陀区金沙江路 1518 弄",
  231. zip: 200333
  232. },
  233. {
  234. date: "2016-05-08",
  235. name: "王小虎",
  236. province: "上海",
  237. city: "普陀区",
  238. address: "上海市普陀区金沙江路 1518 弄",
  239. zip: 200333
  240. },
  241. {
  242. date: "2016-05-06",
  243. name: "王小虎",
  244. province: "上海",
  245. city: "普陀区",
  246. address: "上海市普陀区金沙江路 1518 弄",
  247. zip: 200333
  248. },
  249. {
  250. date: "2016-05-07",
  251. name: "王小虎",
  252. province: "上海",
  253. city: "普陀区",
  254. address: "上海市普陀区金沙江路 1518 弄",
  255. zip: 200333
  256. }
  257. ],
  258. chart: {
  259. title: {
  260. text: "ECharts 入门示例"
  261. },
  262. tooltip: {},
  263. legend: {
  264. data: ["次数"],
  265. left: 0
  266. },
  267. xAxis: {
  268. data: ["达标", "未达标"]
  269. },
  270. yAxis: {
  271. axisLabel: {
  272. formatter: "{value} %"
  273. },
  274. show: false
  275. },
  276. series: [
  277. {
  278. name: "次数",
  279. type: "bar",
  280. data: ["78.57", "50"],
  281. barWidth: 30,
  282. label: {
  283. normal: {
  284. show: true,
  285. position: "top",
  286. formatter: "{c}次"
  287. }
  288. },
  289. //配置样式
  290. itemStyle: {
  291. //通常情况下:
  292. //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
  293. normal: {
  294. color: function(params) {
  295. //我这边就两个柱子,大体就两个柱子颜色渐变,所以数组只有两个值,多个颜色就多个值
  296. var colorList = [
  297. ["#A9E0F3", "#9FBDFC"],
  298. ["#FFD7C0", "#FF9994"]
  299. ];
  300. var index = params.dataIndex;
  301. if (params.dataIndex >= colorList.length) {
  302. index = params.dataIndex % colorList.length;
  303. }
  304. return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  305. { offset: 0, color: colorList[index][0] },
  306. // { offset: 0.5, color: colorList[index][1] },
  307. { offset: 1, color: colorList[index][1] }
  308. ]);
  309. },
  310. barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
  311. },
  312. //鼠标悬停时:
  313. emphasis: {
  314. shadowBlur: 10,
  315. shadowOffsetX: 0,
  316. shadowColor: "rgba(0, 0, 0, 0.5)"
  317. }
  318. }
  319. }
  320. ]
  321. }
  322. };
  323. },
  324. methods: {
  325. chooseWay(way) {
  326. this.wayType = way;
  327. },
  328. handleClick(row) {
  329. console.log(row);
  330. this.$router.push({
  331. path: "/qcd/indicatorControlAnalysis/bloodPressureDetails"
  332. });
  333. }
  334. }
  335. };
  336. </script>
  337. <style lang="scss" scoped>
  338. .tableTitle {
  339. font-size: 16px;
  340. color: #000;
  341. font-weight: bold;
  342. margin-bottom: 10px;
  343. }
  344. </style>
  345. <style lang="scss">
  346. .page_bloodPressure {
  347. .el-button--medium {
  348. padding: 10px 8px;
  349. }
  350. .el-form-item {
  351. margin-bottom: 0;
  352. }
  353. .cell {
  354. text-align: center;
  355. }
  356. }
  357. </style>