Home Explore Help
Register Sign In
csx
/
Vue_New
Watch 2
Star 1
Fork 1
Code Issues 13 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

修改

See999 3 years ago
parent
f7918ce656
commit
81d191f72a
30 changed files with 7472 additions and 249 deletions
Split View Show Diff Stats
  1. 2 2
      config/dev.env.js
  2. 25 20
      index.html
  3. 238 108
      src/router/modules/qcd.js
  4. 340 0
      src/xt_pages/qcd/basicInformationAnalysis.vue
  5. 66 60
      src/xt_pages/qcd/components/BarChart.vue
  6. 142 59
      src/xt_pages/qcd/components/LineChart.vue
  7. 70 0
      src/xt_pages/qcd/indicatorControlAnalysis/analysis.vue
  8. 277 0
      src/xt_pages/qcd/indicatorControlAnalysis/analysisDetails.vue
  9. 397 0
      src/xt_pages/qcd/indicatorControlAnalysis/bloodPressure.vue
  10. 368 0
      src/xt_pages/qcd/indicatorControlAnalysis/bloodPressureDetails.vue
  11. 35 0
      src/xt_pages/qcd/indicatorControlAnalysis/components/NewNav.vue
  12. 337 0
      src/xt_pages/qcd/indicatorControlAnalysis/components/office.vue
  13. 371 0
      src/xt_pages/qcd/indicatorControlAnalysis/components/personal.vue
  14. 384 0
      src/xt_pages/qcd/indicatorControlAnalysis/monitor.vue
  15. 384 0
      src/xt_pages/qcd/indicatorControlAnalysis/process.vue
  16. 390 0
      src/xt_pages/qcd/indicatorControlAnalysis/weight.vue
  17. 368 0
      src/xt_pages/qcd/indicatorControlAnalysis/weightDetails.vue
  18. 261 0
      src/xt_pages/qcd/officesControlAnalysis/project.vue
  19. 356 0
      src/xt_pages/qcd/officesControlAnalysis/time.vue
  20. 348 0
      src/xt_pages/qcd/patientComplianceDetails.vue
  21. 287 0
      src/xt_pages/qcd/patientControlAnalysis.vue
  22. 27 0
      src/xt_pages/qcd/treatmentControlAnalysis.vue
  23. 86 0
      src/xt_pages/qcd/treatmentControlAnalysis/check.vue
  24. 293 0
      src/xt_pages/qcd/treatmentControlAnalysis/components/CheckAll.vue
  25. 284 0
      src/xt_pages/qcd/treatmentControlAnalysis/components/CheckPersonal.vue
  26. 306 0
      src/xt_pages/qcd/treatmentControlAnalysis/components/TimeAll.vue
  27. 293 0
      src/xt_pages/qcd/treatmentControlAnalysis/components/TimePersonal.vue
  28. 86 0
      src/xt_pages/qcd/treatmentControlAnalysis/time.vue
  29. 329 0
      src/xt_pages/qcd/workAnalysis/doctor.vue
  30. 322 0
      src/xt_pages/qcd/workAnalysis/nurse.vue

+ 2 - 2
config/dev.env.js View File 

@@ -6,9 +6,9 @@
6 6 
 module.exports = {
7 7 
   NODE_ENV: '"development"',
8 8 
   ENV_CONFIG: '"dev"',
9 
-  // BASE_API: '"http://new_mobile.xt.api.sgjyun.com"', // //http://api.xt.test.sgjyun.com http://112.74.16.180:9527,////'"http://localhost:9529"',
9 
+  BASE_API: '"http://new_mobile.xt.api.sgjyun.com"', // //http://api.xt.test.sgjyun.com http://112.74.16.180:9527,////'"http://localhost:9529"',
10 10 
   // BASE_API:'"http://localhost:9531"',
11 
-  BASE_API: '"http://api.xt.test.sgjyun.com"',
11 
+  // BASE_API: '"http://api.xt.test.sgjyun.com"',
12 12 
   SSO_HOST: '"http://testsso.sgjyun.com"',
13 13 
   SRCM_HOST: '"http://test1.sgjyun.com"',
14 14 
   XT_HOST: '"http://xt.test.sgjyun.com"',

+ 25 - 20
index.html View File 

@@ -1,25 +1,30 @@
1 1 
 <!DOCTYPE html>
2 2 
 <html>
3 
+  <head>
4 
+    <meta charset="utf-8" />
5 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6 
+    <meta name="renderer" content="webkit" />
7 
+    <meta
8 
+      name="viewport"
9 
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
10 
+    />
11 
+    <title>血透管理-酷医云</title>
12 
+  </head>
3 13
4 
-<head>
5 
-  <meta charset="utf-8">
6 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 
-  <meta name="renderer" content="webkit">
8 
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
9 
-  <title>血透管理-酷医云</title>
10 
-</head>
11 
-
12 
-<body>
13 
-  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
14 
-  <script src="<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js"></script>
15 
-  <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.config.js"></script>
16 
-  <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.all.min.js"></script>
17 
-  <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.service.js"></script>
18 
-  <script src="<%= htmlWebpackPlugin.options.path %>/neditor/i18n/zh-cn/zh-cn.js"></script>
19 
-  <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.parse.min.js"></script>
20 
-
21 
-  <div id="app"></div>
22 
-  <!-- built files will be auto injected -->
23 
-</body>
14 
+  <body>
15 
+    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
16 
+    <script src="<%= htmlWebpackPlugin.options.path %>/tinymce4.7.5/tinymce.min.js"></script>
17 
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.config.js"></script>
18 
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.all.min.js"></script>
19 
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.service.js"></script>
20 
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/i18n/zh-cn/zh-cn.js"></script>
21 
+    <script src="<%= htmlWebpackPlugin.options.path %>/neditor/neditor.parse.min.js"></script>
24 22
23 
+    <div id="app"></div>
24 
+    <!-- built files will be auto injected -->
25 
+    <link
26 
+      rel="stylesheet"
27 
+      href="//at.alicdn.com/t/font_1480998_l66fq6mc0y.css"
28 
+    />
29 
+  </body>
25 30 
 </html>

+ 238 - 108
src/router/modules/qcd.js View File 

@@ -1,270 +1,400 @@
1 
-import Layout from '@/views/layout/Layout'
1 
+import Layout from "@/views/layout/Layout";
2 2
3 3 
 export default {
4 
-  path: '/qcd',
4 
+  path: "/qcd",
5 5 
   component: Layout,
6 
-  redirect: '/qcd/dialysistotal',
7 
-  name: 'qcd',
6 
+  redirect: "/qcd/dialysistotal",
7 
+  name: "qcd",
8 8 
   alwaysShow: true,
9 9 
   meta: {
10 
-    title: '科室质控',
11 
-    icon: 'statistics'
10 
+    title: "科室质控",
11 
+    icon: "statistics"
12 12 
   },
13 
-  children: [{
14 
-      path: '/statistics/index',
15 
-      component: () => import('@/xt_pages/statistics/index'),
16 
-      name: 'statistics',
13 
+  children: [
14 
+    {
15 
+      path: "/statistics/index",
16 
+      component: () => import("@/xt_pages/statistics/index"),
17 
+      name: "statistics",
18 
+      meta: {
19 
+        title: "statistics",
20 
+        noCache: true
21 
+      }
22 
+    },
23 
+    {
24 
+      path: "/qcd/dialysistotal",
25 
+      component: () => import("@/xt_pages/qcd/dialysisTotal"),
26 
+      name: "dialysistotal",
27 
+      meta: {
28 
+        title: "透析总量",
29 
+        noCache: true
30 
+      }
31 
+    },
32 
+    {
33 
+      path: "/qcd/processindicators",
34 
+      component: () => import("@/xt_pages/qcd/processIndicators"),
35 
+      name: "processIndicators",
36 
+      meta: {
37 
+        title: "过程指标",
38 
+        noCache: true
39 
+      }
40 
+    },
41 
+    {
42 
+      path: "/qcd/outcomeIndicators/control",
43 
+      component: () => import("@/xt_pages/qcd/outcomeIndicators/control"),
44 
+      name: "outcomeIndicatorsControl",
45 
+      meta: {
46 
+        title: "结果指标",
47 
+        noCache: true
48 
+      }
49 
+    },
50 
+    {
51 
+      path: "/qcd/outcomeIndicators/query",
52 
+      hidden: true,
53 
+      is_menu: false,
54 
+      component: () => import("@/xt_pages/qcd/outcomeIndicators/query"),
55 
+      name: "outcomeIndicatorsQuery",
56 
+      meta: {
57 
+        title: "指标查询",
58 
+        noCache: true
59 
+      }
60 
+    },
61 
+    {
62 
+      path: "/qcd/patientanalysis/total",
63 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/total"),
64 
+      name: "patientAnalysisTotal",
65 
+      meta: {
66 
+        title: "患者分析",
67 
+        noCache: true
68 
+      }
69 
+    },
70 
+    {
71 
+      path: "/qcd/patientanalysis/statisticalConfig",
72 
+      component: () => import("@/xt_pages/qcd/statisticalConfiguration"),
73 
+      name: "statisticalConfig",
74 
+      meta: {
75 
+        title: "统计配置",
76 
+        noCache: true
77 
+      }
78 
+    },
79 
+    {
80 
+      path: "/qcd/basicInformationAnalysis",
81 
+      component: () => import("@/xt_pages/qcd/basicInformationAnalysis"),
82 
+      name: "basicInformationAnalysis",
83 
+      meta: {
84 
+        title: "基本信息统计",
85 
+        noCache: true
86 
+      }
87 
+    },
88 
+    {
89 
+      path: "/qcd/officesControlAnalysis/time",
90 
+      component: () => import("@/xt_pages/qcd/officesControlAnalysis/time"),
91 
+      name: "officesControlAnalysis",
17 92 
       meta: {
18 
-        title: 'statistics',
93 
+        title: "科室质控达标统计",
19 94 
         noCache: true
20 95 
       }
21 96 
     },
22 97 
     {
23 
-      path: '/qcd/dialysistotal',
24 
-      component: () => import('@/xt_pages/qcd/dialysisTotal'),
25 
-      name: 'dialysistotal',
98 
+      path: "/qcd/officesControlAnalysis/project",
99 
+      hidden: true,
100 
+      is_menu: false,
101 
+      component: () => import("@/xt_pages/qcd/officesControlAnalysis/project"),
102 
+      name: "patientControlAnalysisProject",
26 103 
       meta: {
27 
-        title: '透析总量',
104 
+        title: "科室质控达标统计按项目",
28 105 
         noCache: true
29 106 
       }
30 107 
     },
31 108 
     {
32 
-      path: '/qcd/processindicators',
33 
-      component: () => import('@/xt_pages/qcd/processIndicators'),
34 
-      name: 'processIndicators',
109 
+      path: "/qcd/patientControlAnalysis",
110 
+      component: () => import("@/xt_pages/qcd/patientControlAnalysis"),
111 
+      name: "patientControlAnalysisTime",
35 112 
       meta: {
36 
-        title: '过程指标',
113 
+        title: "患者质控达标统计",
37 114 
         noCache: true
38 115 
       }
39 116 
     },
40 117 
     {
41 
-      path: '/qcd/outcomeIndicators/control',
42 
-      component: () => import('@/xt_pages/qcd/outcomeIndicators/control'),
43 
-      name: 'outcomeIndicatorsControl',
118 
+      path: "/qcd/patientComplianceDetails",
119 
+      hidden: true,
120 
+      is_menu: false,
121 
+      component: () => import("@/xt_pages/qcd/patientComplianceDetails"),
122 
+      name: "patientComplianceDetails",
44 123 
       meta: {
45 
-        title: '结果指标',
124 
+        title: "患者质控达标统计详情",
46 125 
         noCache: true
47 126 
       }
48 127 
     },
128 
+
49 129 
     {
50 
-      path: '/qcd/outcomeIndicators/query',
130 
+      path: "/qcd/treatmentControlAnalysis/time",
131 
+      component: () => import("@/xt_pages/qcd/treatmentControlAnalysis/time"),
132 
+      name: "treatmentControlAnalysis",
133 
+      meta: {
134 
+        title: "治疗信息统计",
135 
+        noCache: true
136 
+      }
137 
+    },
138 
+    {
139 
+      path: "/qcd/treatmentControlAnalysis/check",
51 140 
       hidden: true,
52 141 
       is_menu: false,
53 
-      component: () => import('@/xt_pages/qcd/outcomeIndicators/query'),
54 
-      name: 'outcomeIndicatorsQuery',
142 
+      component: () => import("@/xt_pages/qcd/treatmentControlAnalysis/check"),
143 
+      name: "treatmentControlAnalysisCheck",
55 144 
       meta: {
56 
-        title: '指标查询',
145 
+        title: "治疗信息统计检验检查",
57 146 
         noCache: true
58 147 
       }
59 148 
     },
60 149 
     {
61 
-      path: '/qcd/patientanalysis/total',
62 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/total'),
63 
-      name: 'patientAnalysisTotal',
150 
+      path: "/qcd/indicatorControlAnalysis/analysis",
151 
+      component: () =>
152 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/analysis"),
153 
+      name: "indicatorControlAnalysis",
64 154 
       meta: {
65 
-        title: '患者分析',
155 
+        title: "指标评估统计",
66 156 
         noCache: true
67 157 
       }
68 158 
     },
69 159 
     {
70 
-      path: '/qcd/patientanalysis/statisticalConfig',
71 
-      component: () => import('@/xt_pages/qcd/statisticalConfiguration'),
72 
-      name: 'statisticalConfig',
160 
+      path: "/qcd/indicatorControlAnalysis/process",
161 
+      hidden: true,
162 
+      is_menu: false,
163 
+      component: () =>
164 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/process"),
165 
+      name: "process",
73 166 
       meta: {
74 
-        title: '统计配置',
167 
+        title: "指标评估统计透析过程",
75 168 
         noCache: true
76 169 
       }
77 170 
     },
78 171 
     {
79 
-      path: '/qcd/patientanalysis/basicInformationAnalysis',
80 
-      component: () => import('@/xt_pages/qcd/basicInformationAnalysis'),
81 
-      name: 'basicInformationAnalysis',
172 
+      path: "/qcd/indicatorControlAnalysis/monitor",
173 
+      hidden: true,
174 
+      is_menu: false,
175 
+      component: () =>
176 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/monitor"),
177 
+      name: "monitor",
82 178 
       meta: {
83 
-        title: '基本信息统计',
179 
+        title: "指标评估统计透析监测",
84 180 
         noCache: true
85 181 
       }
86 182 
     },
87 183 
     {
88 
-      path: '/qcd/patientanalysis/patientControlAnalysis',
89 
-      component: () => import('@/xt_pages/qcd/patientControlAnalysis'),
90 
-      name: 'patientControlAnalysis',
184 
+      path: "/qcd/indicatorControlAnalysis/bloodPressure",
185 
+      hidden: true,
186 
+      is_menu: false,
187 
+      component: () =>
188 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/bloodPressure"),
189 
+      name: "bloodPressure",
91 190 
       meta: {
92 
-        title: '患者质控达标统计',
191 
+        title: "指标评估统计血压",
93 192 
         noCache: true
94 193 
       }
95 194 
     },
96 195 
     {
97 
-      path: '/qcd/patientanalysis/treatmentControlAnalysis',
98 
-      component: () => import('@/xt_pages/qcd/treatmentControlAnalysis'),
99 
-      name: 'treatmentControlAnalysis',
196 
+      path: "/qcd/indicatorControlAnalysis/bloodPressureDetails",
197 
+      hidden: true,
198 
+      is_menu: false,
199 
+      component: () =>
200 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/bloodPressureDetails"),
201 
+      name: "bloodPressureDetails",
100 202 
       meta: {
101 
-        title: '治疗信息统计',
203 
+        title: "指标评估统计血压详情",
102 204 
         noCache: true
103 205 
       }
104 206 
     },
105 207 
     {
106 
-      path: '/qcd/patientanalysis/indicatorControlAnalysis',
107 
-      component: () => import('@/xt_pages/qcd/indicatorControlAnalysis'),
108 
-      name: 'indicatorControlAnalysis',
208 
+      path: "/qcd/indicatorControlAnalysis/weight",
209 
+      hidden: true,
210 
+      is_menu: false,
211 
+      component: () => import("@/xt_pages/qcd/indicatorControlAnalysis/weight"),
212 
+      name: "weight",
109 213 
       meta: {
110 
-        title: '指标评估统计',
214 
+        title: "指标评估体重",
111 215 
         noCache: true
112 216 
       }
113 217 
     },
114 218 
     {
115 
-      path: '/qcd/patientanalysis/workAnalysis',
116 
-      component: () => import('@/xt_pages/qcd/workAnalysis'),
117 
-      name: 'workAnalysis',
219 
+      path: "/qcd/indicatorControlAnalysis/weightDetails",
220 
+      hidden: true,
221 
+      is_menu: false,
222 
+      component: () =>
223 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/weightDetails"),
224 
+      name: "weightDetails",
118 225 
       meta: {
119 
-        title: '工作量分析统计',
226 
+        title: "指标评估体重详情",
120 227 
         noCache: true
121 228 
       }
122 229 
     },
123 230 
     {
124 
-      path: '/qcd/patientanalysis/officesControlAnalysis',
125 
-      component: () => import('@/xt_pages/qcd/officesControlAnalysis'),
126 
-      name: 'officesControlAnalysis',
231 
+      path: "/qcd/analysisDetails",
232 
+      hidden: true,
233 
+      is_menu: false,
234 
+      component: () =>
235 
+        import("@/xt_pages/qcd/indicatorControlAnalysis/analysisDetails"),
236 
+      name: "analysisDetails",
237 
+      meta: {
238 
+        title: "化验指标评估统计详情",
239 
+        noCache: true
240 
+      }
241 
+    },
242 
+    {
243 
+      path: "/qcd/workAnalysis/doctor",
244 
+      component: () => import("@/xt_pages/qcd/workAnalysis/doctor"),
245 
+      name: "workAnalysisDoctor",
246 
+      meta: {
247 
+        title: "工作量分析统计医生",
248 
+        noCache: true
249 
+      }
250 
+    },
251 
+    {
252 
+      path: "/qcd/workAnalysis/nurse",
253 
+      hidden: true,
254 
+      is_menu: false,
255 
+      component: () => import("@/xt_pages/qcd/workAnalysis/nurse"),
256 
+      name: "workAnalysisNurse",
127 257 
       meta: {
128 
-        title: '科室质控达标统计',
258 
+        title: "工作量分析统计护士",
129 259 
         noCache: true
130 260 
       }
131 261 
     },
132 262
133 263 
     {
134 
-      path: '/qcd/patientanalysis/checkStatistical',
264 
+      path: "/qcd/patientanalysis/checkStatistical",
135 265 
       hidden: true,
136 266 
       is_menu: false,
137 
-      component: () => import('@/xt_pages/qcd/checkStatistical'),
138 
-      name: 'checkStatistical',
267 
+      component: () => import("@/xt_pages/qcd/checkStatistical"),
268 
+      name: "checkStatistical",
139 269 
       meta: {
140 
-        title: '检验检查统计配置',
270 
+        title: "检验检查统计配置",
141 271 
         noCache: true
142 272 
       }
143 273 
     },
144 274 
     {
145 
-      path: '/qcd/patientanalysis/weight',
275 
+      path: "/qcd/patientanalysis/weight",
146 276 
       hidden: true,
147 277 
       is_menu: false,
148 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/weight'),
149 
-      name: 'patientAnalysisWeight',
278 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/weight"),
279 
+      name: "patientAnalysisWeight",
150 280 
       meta: {
151 
-        title: '体重分析',
281 
+        title: "体重分析",
152 282 
         noCache: true
153 283 
       }
154 284 
     },
155 285 
     {
156 
-      path: '/qcd/patientanalysis/bloodpressure',
286 
+      path: "/qcd/patientanalysis/bloodpressure",
157 287 
       hidden: true,
158 288 
       is_menu: false,
159 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/bloodPressure'),
160 
-      name: 'patientAnalysisBloodPressure',
289 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/bloodPressure"),
290 
+      name: "patientAnalysisBloodPressure",
161 291 
       meta: {
162 
-        title: '血压分析',
292 
+        title: "血压分析",
163 293 
         noCache: true
164 294 
       }
165 295 
     },
166 296 
     {
167 
-      path: '/qcd/patientanalysis/dialysisage',
297 
+      path: "/qcd/patientanalysis/dialysisage",
168 298 
       hidden: true,
169 299 
       is_menu: false,
170 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/dialysisAge'),
171 
-      name: 'patientAnalysisDialysisAge',
300 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/dialysisAge"),
301 
+      name: "patientAnalysisDialysisAge",
172 302 
       meta: {
173 
-        title: '透析龄分析',
303 
+        title: "透析龄分析",
174 304 
         noCache: true
175 305 
       }
176 306 
     },
177 307 
     {
178 
-      path: '/qcd/patientanalysis/lapseto',
308 
+      path: "/qcd/patientanalysis/lapseto",
179 309 
       hidden: true,
180 310 
       is_menu: false,
181 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/lapseto'),
182 
-      name: 'patientAnalysisLapseto',
311 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/lapseto"),
312 
+      name: "patientAnalysisLapseto",
183 313 
       meta: {
184 
-        title: '转归分析',
314 
+        title: "转归分析",
185 315 
         noCache: true
186 316 
       }
187 317 
     },
188 318 
     {
189 
-      path: '/qcd/patientanalysis/complication',
319 
+      path: "/qcd/patientanalysis/complication",
190 320 
       hidden: true,
191 321 
       is_menu: false,
192 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/complication'),
193 
-      name: 'patientAnalysisComplication',
322 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/complication"),
323 
+      name: "patientAnalysisComplication",
194 324 
       meta: {
195 
-        title: '并发症分析',
325 
+        title: "并发症分析",
196 326 
         noCache: true
197 327 
       }
198 328 
     },
199 329 
     {
200 
-      path: '/qcd/patientanalysis/infectiousdiseases',
330 
+      path: "/qcd/patientanalysis/infectiousdiseases",
201 331 
       hidden: true,
202 332 
       is_menu: false,
203 333 
       component: () =>
204 
-        import('@/xt_pages/qcd/patientAnalysis/infectiousDiseases'),
205 
-      name: 'patientAnalysisInfectiousDiseases',
334 
+        import("@/xt_pages/qcd/patientAnalysis/infectiousDiseases"),
335 
+      name: "patientAnalysisInfectiousDiseases",
206 336 
       meta: {
207 
-        title: '传染病分析',
337 
+        title: "传染病分析",
208 338 
         noCache: true
209 339 
       }
210 340 
     },
211 341 
     {
212 
-      path: '/qcd/pa/person/lapseto',
342 
+      path: "/qcd/pa/person/lapseto",
213 343 
       hidden: true,
214 344 
       is_menu: false,
215 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/person/lapseto'),
216 
-      name: 'paPersonLapseto',
345 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/person/lapseto"),
346 
+      name: "paPersonLapseto",
217 347 
       meta: {
218 
-        title: '转归',
348 
+        title: "转归",
219 349 
         noCache: true
220 350 
       }
221 351 
     },
222 352 
     {
223 
-      path: '/qcd/pa/person/weight',
353 
+      path: "/qcd/pa/person/weight",
224 354 
       hidden: true,
225 355 
       is_menu: false,
226 
-      component: () => import('@/xt_pages/qcd/patientAnalysis/person/weight'),
227 
-      name: 'paPersonWeight',
356 
+      component: () => import("@/xt_pages/qcd/patientAnalysis/person/weight"),
357 
+      name: "paPersonWeight",
228 358 
       meta: {
229 
-        title: '体重',
359 
+        title: "体重",
230 360 
         noCache: true
231 361 
       }
232 362 
     },
233 363 
     {
234 
-      path: '/qcd/pa/person/bloodpressure',
364 
+      path: "/qcd/pa/person/bloodpressure",
235 365 
       hidden: true,
236 366 
       is_menu: false,
237 367 
       component: () =>
238 
-        import('@/xt_pages/qcd/patientAnalysis/person/bloodPressure'),
239 
-      name: 'paPersonBloodPressure',
368 
+        import("@/xt_pages/qcd/patientAnalysis/person/bloodPressure"),
369 
+      name: "paPersonBloodPressure",
240 370 
       meta: {
241 
-        title: '血压',
371 
+        title: "血压",
242 372 
         noCache: true
243 373 
       }
244 374 
     },
245 375 
     {
246 
-      path: '/qcd/pa/person/indicators',
376 
+      path: "/qcd/pa/person/indicators",
247 377 
       hidden: true,
248 378 
       is_menu: false,
249 379 
       component: () =>
250 
-        import('@/xt_pages/qcd/patientAnalysis/person/indicators'),
251 
-      name: 'paPersonIndicators',
380 
+        import("@/xt_pages/qcd/patientAnalysis/person/indicators"),
381 
+      name: "paPersonIndicators",
252 382 
       meta: {
253 
-        title: '指标控制',
383 
+        title: "指标控制",
254 384 
         noCache: true
255 385 
       }
256 386 
     },
257 387 
     {
258 
-      path: '/qcd/pa/person/oralmedicine',
388 
+      path: "/qcd/pa/person/oralmedicine",
259 389 
       hidden: true,
260 390 
       is_menu: false,
261 391 
       component: () =>
262 
-        import('@/xt_pages/qcd/patientAnalysis/person/oralMedicine'),
263 
-      name: 'paPersonOralMedicine',
392 
+        import("@/xt_pages/qcd/patientAnalysis/person/oralMedicine"),
393 
+      name: "paPersonOralMedicine",
264 394 
       meta: {
265 
-        title: '口服药',
395 
+        title: "口服药",
266 396 
         noCache: true
267 397 
       }
268 398 
     }
269 399 
   ]
270 
-}
400 
+};

+ 340 - 0
src/xt_pages/qcd/basicInformationAnalysis.vue View File 

@@ -0,0 +1,340 @@
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 
+        <label class="title">
22 
+          <span class="name">日期查询</span> :
23 
+        </label>
24 
+        <el-date-picker
25 
+          v-model="listQuery.start_time"
26 
+          prefix-icon="el-icon-date"
27 
+          @change="changeTime"
28 
+          :editable="false"
29 
+          style="width: 196px;"
30 
+          type="date"
31 
+          placeholder="选择日期时间"
32 
+          align="right"
33 
+          format="yyyy-MM-dd"
34 
+          value-format="yyyy-MM-dd"
35 
+        ></el-date-picker>
36 
+        <span class>-</span>
37 
+        <el-date-picker
38 
+          v-model="listQuery.end_time"
39 
+          prefix-icon="el-icon-date"
40 
+          @change="changeEndTime"
41 
+          :editable="false"
42 
+          style="width: 196px;"
43 
+          type="date"
44 
+          placeholder="选择日期时间"
45 
+          align="right"
46 
+          format="yyyy-MM-dd"
47 
+          value-format="yyyy-MM-dd"
48 
+        ></el-date-picker>
49 
+      </div>
50 
+      <div class="cell clearfix" style="align-items:normal">
51 
+        <div style="float:left">
52 
+          <div class="infoBox">
53 
+            <div class="infoOne">
54 
+              <div class="titleBox">
55 
+                <span class="point"></span>
56 
+                <p class="infoTitle">透析总量(100次)</p>
57 
+              </div>
58 
+              <div class="borderBox">
59 
+                <p>HD:64次(64%)</p>
60 
+                <el-progress :percentage="70"></el-progress>
61 
+                <p>HD:64次(64%)</p>
62 
+                <el-progress :percentage="70"></el-progress>
63 
+                <p>HD:64次(64%)</p>
64 
+                <el-progress :percentage="70"></el-progress>
65 
+                <p>HD:64次(64%)</p>
66 
+                <el-progress :percentage="70"></el-progress>
67 
+                <p>HD:64次(64%)</p>
68 
+                <el-progress :percentage="70"></el-progress>
69 
+                <p>HD:64次(64%)</p>
70 
+                <el-progress :percentage="70"></el-progress>
71 
+                <p>HD:64次(64%)</p>
72 
+                <el-progress :percentage="70"></el-progress>
73 
+                <p>HD:64次(64%)</p>
74 
+                <el-progress :percentage="70"></el-progress>
75 
+                <p>HD:64次(64%)</p>
76 
+                <el-progress :percentage="70"></el-progress>
77 
+              </div>
78 
+            </div>
79 
+            <div class="infoOne">
80 
+              <div class="titleBox">
81 
+                <span class="point2"></span>
82 
+                <p class="infoTitle">传染病统计</p>
83 
+              </div>
84 
+              <div class="borderBox2">
85 
+                <p>无传染病:64人(64%)</p>
86 
+                <el-progress :percentage="70"></el-progress>
87 
+                <p>乙肝:64人(64%)</p>
88 
+                <el-progress :percentage="70"></el-progress>
89 
+              </div>
90 
+            </div>
91 
+          </div>
92 
+        </div>
93 
+        <div style="float:left">
94 
+          <div class="infoBox">
95 
+            <div class="infoOne">
96 
+              <div class="titleBox">
97 
+                <span class="point1"></span>
98 
+                <p class="infoTitle">转归统计(总人数100人)</p>
99 
+              </div>
100 
+              <div class="borderBox1">
101 
+                <p>留治:64人(64%)</p>
102 
+                <el-progress :percentage="70"></el-progress>
103 
+                <p>转出:64人(64%)</p>
104 
+                <el-progress :percentage="70"></el-progress>
105 
+              </div>
106 
+            </div>
107 
+            <div class="infoOne">
108 
+              <div class="titleBox">
109 
+                <span class="point2"></span>
110 
+                <p class="infoTitle">男女比例</p>
111 
+              </div>
112 
+              <div class="borderBox2">
113 
+                <p>男:64人(64%)</p>
114 
+                <el-progress :percentage="70"></el-progress>
115 
+                <p>女:64人(64%)</p>
116 
+                <el-progress :percentage="70"></el-progress>
117 
+              </div>
118 
+            </div>
119 
+            <div class="infoOne">
120 
+              <div class="titleBox">
121 
+                <span class="point"></span>
122 
+                <p class="infoTitle">年龄统计</p>
123 
+              </div>
124 
+              <div class="borderBox">
125 
+                <p>年龄&lt;20:64人(64%)</p>
126 
+                <el-progress :percentage="70"></el-progress>
127 
+                <p>20≤年龄≤30:64人(64%)</p>
128 
+                <el-progress :percentage="70"></el-progress>
129 
+                <p>30≤年龄≤40:64人(64%)</p>
130 
+                <el-progress :percentage="70"></el-progress>
131 
+                <p>其他:64人(64%)</p>
132 
+                <el-progress :percentage="70"></el-progress>
133 
+              </div>
134 
+            </div>
135 
+            <div class="infoOne">
136 
+              <div class="titleBox">
137 
+                <span class="point1"></span>
138 
+                <p class="infoTitle">透龄统计</p>
139 
+              </div>
140 
+              <div class="borderBox1">
141 
+                <p>透析龄&lt;12:64人(64%)</p>
142 
+                <el-progress :percentage="70"></el-progress>
143 
+                <p>12≤透析龄≤36:64人(64%)</p>
144 
+                <el-progress :percentage="70"></el-progress>
145 
+                <p>36≤透析龄≤60:64人(64%)</p>
146 
+                <el-progress :percentage="70"></el-progress>
147 
+                <p>透析龄 ≥60:64人(64%)</p>
148 
+                <el-progress :percentage="70"></el-progress>
149 
+              </div>
150 
+            </div>
151 
+          </div>
152 
+        </div>
153 
+      </div>
154 
+    </div>
155 
+  </div>
156 
+</template>
157 
+
158 
+
159 
+
160 
+<script>
161 
+import { GetOICData } from "@/api/qcd";
162 
+import PieChart from "../qcd/components/BarChart";
163 
+import { uParseTime } from "@/utils/tools";
164 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
165 
+export default {
166 
+  name: "dialysisTotal",
167 
+  components: {
168 
+    PieChart,
169 
+    BreadCrumb
170 
+  },
171 
+  data() {
172 
+    return {
173 
+      crumbs: [
174 
+        { path: false, name: "科室质控" },
175 
+        { path: false, name: "基本信息统计" }
176 
+      ],
177 
+      listQuery: {
178 
+        start_time: "",
179 
+        end_time: "",
180 
+        page: 1,
181 
+        limit: 10
182 
+      },
183 
+      stateType: 0,
184 
+      month: [
185 
+        { value: 0, label: "本月", state: 0 },
186 
+        { value: 1, label: "近三个月", state: 1 },
187 
+        { value: 2, label: "近半年", state: 2 },
188 
+        { value: 3, label: "近一年", state: 3 }
189 
+      ]
190 
+    };
191 
+  },
192 
+  created() {},
193 
+  methods: {
194 
+    changeTime() {},
195 
+    changeEndTime(val) {
196 
+      var time =
197 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
198 
+      if (time < 0) {
199 
+        this.$message.error("结束时间不能小于开始时间");
200 
+        this.listQuery.end_time = "";
201 
+      } else {
202 
+      }
203 
+    },
204 
+    selectLapseTo(state) {
205 
+      this.stateType = state;
206 
+      this.listQuery.state = state;
207 
+    }
208 
+  }
209 
+};
210 
+</script>
211 
+
212 
+ <style rel="stylesheet/scss" lang="scss" scoped>
213 
+.infoBox {
214 
+  display: flex;
215 
+  flex-wrap: wrap;
216 
+  .infoOne {
217 
+    margin-right: 30px;
218 
+    margin-top: 30px;
219 
+    .titleBox {
220 
+      display: flex;
221 
+      align-items: center;
222 
+    }
223 
+    .point {
224 
+      display: inline-block;
225 
+      width: 7px;
226 
+      height: 7px;
227 
+      background: linear-gradient(
228 
+        90deg,
229 
+        rgba(169, 224, 243, 1),
230 
+        rgba(159, 189, 252, 1)
231 
+      );
232 
+      border-radius: 50%;
233 
+    }
234 
+    .point1 {
235 
+      width: 7px;
236 
+      height: 7px;
237 
+      background: linear-gradient(
238 
+        90deg,
239 
+        rgba(255, 215, 192, 1),
240 
+        rgba(255, 153, 148, 1)
241 
+      );
242 
+      border-radius: 50%;
243 
+    }
244 
+    .point2 {
245 
+      width: 7px;
246 
+      height: 7px;
247 
+      background: linear-gradient(
248 
+        90deg,
249 
+        rgba(215, 195, 253, 1),
250 
+        rgba(179, 168, 247, 1)
251 
+      );
252 
+      border-radius: 50%;
253 
+    }
254 
+    .infoTitle {
255 
+      font-size: 16px;
256 
+      font-weight: bold;
257 
+      margin-left: 5px;
258 
+      color: #000;
259 
+    }
260 
+    .borderBox {
261 
+      width: 340px;
262 
+      min-height: 140px;
263 
+      background: rgba(255, 255, 255, 1);
264 
+      border: 1px solid rgba(229, 229, 229, 1);
265 
+      border-radius: 10px;
266 
+      padding: 0 14px 20px;
267 
+      margin-top: 10px;
268 
+      p {
269 
+        font-size: 14px;
270 
+        color: #000;
271 
+        margin: 10px 0 3px;
272 
+      }
273 
+    }
274 
+    .borderBox1 {
275 
+      width: 340px;
276 
+      min-height: 140px;
277 
+      background: rgba(255, 255, 255, 1);
278 
+      border: 1px solid rgba(229, 229, 229, 1);
279 
+      border-radius: 10px;
280 
+      padding: 0 14px 20px;
281 
+      margin-top: 10px;
282 
+      p {
283 
+        font-size: 14px;
284 
+        color: #000;
285 
+        margin: 10px 0 3px;
286 
+      }
287 
+    }
288 
+    .borderBox2 {
289 
+      width: 340px;
290 
+      min-height: 140px;
291 
+      background: rgba(255, 255, 255, 1);
292 
+      border: 1px solid rgba(229, 229, 229, 1);
293 
+      border-radius: 10px;
294 
+      padding: 0 14px 20px;
295 
+      margin-top: 10px;
296 
+      p {
297 
+        font-size: 14px;
298 
+        color: #000;
299 
+        margin: 10px 0 3px;
300 
+      }
301 
+    }
302 
+  }
303 
+}
304 
+</style>
305 
+
306 
+<style lang="scss">
307 
+.infoBox {
308 
+  .infoOne {
309 
+    .borderBox {
310 
+      .el-progress-bar__inner {
311 
+        background: linear-gradient(
312 
+          90deg,
313 
+          rgba(169, 224, 243, 1),
314 
+          rgba(159, 189, 252, 1)
315 
+        );
316 
+      }
317 
+    }
318 
+    .borderBox1 {
319 
+      .el-progress-bar__inner {
320 
+        background: linear-gradient(
321 
+          90deg,
322 
+          rgba(255, 215, 192, 1),
323 
+          rgba(255, 153, 148, 1)
324 
+        );
325 
+      }
326 
+    }
327 
+    .borderBox2 {
328 
+      .el-progress-bar__inner {
329 
+        background: linear-gradient(
330 
+          90deg,
331 
+          rgba(215, 195, 253, 1),
332 
+          rgba(179, 168, 247, 1)
333 
+        );
334 
+      }
335 
+    }
336 
+  }
337 
+}
338 
+</style>
339 
+
340 
+

+ 66 - 60
src/xt_pages/qcd/components/BarChart.vue View File 

@@ -3,117 +3,123 @@
3 3 
 </template>
4 4
5 5 
 <script>
6 
-import echarts from 'echarts'
7 
-require('echarts/theme/macarons') // echarts theme
8 
-import { debounce } from '@/utils'
6 
+import echarts from "echarts";
7 
+require("echarts/theme/macarons"); // echarts theme
8 
+import { debounce } from "@/utils";
9 9
10 
-const animationDuration = 6000
10 
+const animationDuration = 6000;
11 11
12 12 
 export default {
13 13 
   props: {
14 14 
     className: {
15 15 
       type: String,
16 
-      default: 'chart'
16 
+      default: "chart"
17 17 
     },
18 18 
     width: {
19 19 
       type: String,
20 
-      default: '100%'
20 
+      default: "100%"
21 21 
     },
22 22 
     height: {
23 23 
       type: String,
24 
-      default: '380px'
24 
+      default: "380px"
25 25 
     },
26 
-    title:{
26 
+    title: {
27 27 
       type: String,
28 
-      default: 'chart'
28 
+      default: "chart"
29 29 
     },
30 
-    options:{
31 
-      type:Object,
32 
-      default:function(){
33 
-        return {}
30 
+    options: {
31 
+      type: Object,
32 
+      default: function() {
33 
+        return {};
34 34 
       }
35 35 
     }
36 36 
   },
37 37 
   data() {
38 38 
     return {
39 39 
       chart: null,
40 
-      chartOptions:{},
41 
-    }
40 
+      chartOptions: {}
41 
+    };
42 42 
   },
43 43 
   mounted() {
44 
-    this.initChart()
44 
+    this.initChart();
45 45 
     this.__resizeHanlder = debounce(() => {
46 46 
       if (this.chart) {
47 
-        this.chart.resize()
47 
+        this.chart.resize();
48 48 
       }
49 
-    }, 100)
50 
-    window.addEventListener('resize', this.__resizeHanlder)
49 
+    }, 100);
50 
+    window.addEventListener("resize", this.__resizeHanlder);
51 51 
   },
52 52 
   beforeDestroy() {
53 53 
     if (!this.chart) {
54 
-      return
54 
+      return;
55 55 
     }
56 
-    window.removeEventListener('resize', this.__resizeHanlder)
57 
-    this.chart.dispose()
58 
-    this.chart = null
59 
-  },
60 
-  created(){
56 
+    window.removeEventListener("resize", this.__resizeHanlder);
57 
+    this.chart.dispose();
58 
+    this.chart = null;
61 59 
   },
62 
-  watch:{
63 
-    "options":function(){
60 
+  created() {},
61 
+  watch: {
62 
+    options: function() {
64 63 
       this.chartOptions = this.options;
65 
-      this.initChart()
64 
+      this.initChart();
66 65 
       this.__resizeHanlder = debounce(() => {
67 66 
         if (this.chart) {
68 
-          this.chart.resize()
67 
+          this.chart.resize();
69 68 
         }
70 
-      }, 100)
71 
-      window.addEventListener('resize', this.__resizeHanlder)
69 
+      }, 100);
70 
+      window.addEventListener("resize", this.__resizeHanlder);
72 71 
     }
73 72 
   },
74 73 
   methods: {
75 74 
     initChart() {
76 75 
       console.log("this.chartOptions", this.chartOptions);
77 
-      this.chart = echarts.init(this.$el, 'macarons')
76 
+      this.chart = echarts.init(this.$el, "macarons");
78 77 
       this.chart.setOption({
79 78 
         title: {
80 
-            text: this.title,
79 
+          text: this.title
81 80 
         },
82 81 
         tooltip: {
83 
-          trigger: 'axis',
84 
-          axisPointer: { // 坐标轴指示器，坐标轴触发有效
85 
-            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
82 
+          trigger: "axis",
83 
+          axisPointer: {
84 
+            // 坐标轴指示器，坐标轴触发有效
85 
+            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
86 86 
           }
87 87 
         },
88 88 
         grid: {
89 
-          left: '2%',
90 
-          right: '2%',
91 
-          bottom: '3%',
89 
+          left: "2%",
90 
+          right: "2%",
91 
+          bottom: "3%",
92 92 
           containLabel: true
93 93 
         },
94 
-        xAxis: [{
95 
-          type: 'category',
96 
-          data:  this.chartOptions.xAxis,
97 
-          axisTick: {
98 
-            alignWithLabel: true
94 
+        xAxis: [
95 
+          {
96 
+            type: "category",
97 
+            data: this.chartOptions.xAxis,
98 
+            axisTick: {
99 
+              alignWithLabel: true
100 
+            }
101 
+          }
102 
+        ],
103 
+        yAxis: [
104 
+          {
105 
+            type: "value",
106 
+            axisTick: {
107 
+              show: false
108 
+            }
99 109 
           }
100 
-        }],
101 
-        yAxis: [{
102 
-          type: 'value',
103 
-          axisTick: {
104 
-            show: false
110 
+        ],
111 
+        series: [
112 
+          {
113 
+            name: "",
114 
+            type: "bar",
115 
+            stack: "vistors",
116 
+            barWidth: "60%",
117 
+            data: this.chartOptions.series,
118 
+            animationDuration
105 119 
           }
106 
-        }],
107 
-        series: [{
108 
-          name: '',
109 
-          type: 'bar',
110 
-          stack: 'vistors',
111 
-          barWidth: '60%',
112 
-          data: this.chartOptions.series,
113 
-          animationDuration
114 
-        }]
115 
-      })
120 
+        ]
121 
+      });
116 122 
     }
117 123 
   }
118 
-}
124 
+};
119 125 
 </script>

+ 142 - 59
src/xt_pages/qcd/components/LineChart.vue View File 

@@ -3,23 +3,23 @@
3 3 
 </template>
4 4
5 5 
 <script>
6 
-import echarts from 'echarts'
7 
-require('echarts/theme/macarons') // echarts theme
8 
-import { debounce } from '@/utils'
6 
+import echarts from "echarts";
7 
+require("echarts/theme/macarons"); // echarts theme
8 
+import { debounce } from "@/utils";
9 9
10 10 
 export default {
11 11 
   props: {
12 12 
     className: {
13 13 
       type: String,
14 
-      default: 'chart'
14 
+      default: "chart"
15 15 
     },
16 16 
     width: {
17 17 
       type: String,
18 
-      default: '100%'
18 
+      default: "100%"
19 19 
     },
20 20 
     height: {
21 21 
       type: String,
22 
-      default: '380px'
22 
+      default: "230px"
23 23 
     },
24 24 
     autoResize: {
25 25 
       type: Boolean,
 
@@ -28,125 +28,208 @@ export default {
28 28 
     chartData: {
29 29 
       type: Object
30 30 
     },
31 
-    title:{
31 
+    title: {
32 32 
       type: String,
33 
-      default: 'chart'
33 
+      default: "chart"
34 34 
     },
35 
-    options:{
36 
-      type:Object,
37 
-      default:function(){
38 
-        return {}
35 
+    options: {
36 
+      type: Object,
37 
+      default: function() {
38 
+        return {};
39 39 
       }
40 40 
     }
41 41 
   },
42 42 
   data() {
43 43 
     return {
44 44 
       chart: null,
45 
-      chartOptions:{
46 
-        xAxis:[],
47 
-        legend:[],
48 
-        series:[],
49 
-      },
50 
-
51 
-    }
45 
+      chartOptions: {
46 
+        xAxis: [],
47 
+        legend: [],
48 
+        series: []
49 
+      }
50 
+    };
52 51 
   },
53 52 
   mounted() {
54 
-    this.initChart()
53 
+    this.initChart();
55 54 
     if (this.autoResize) {
56 55 
       this.__resizeHanlder = debounce(() => {
57 56 
         if (this.chart) {
58 
-          this.chart.resize()
57 
+          this.chart.resize();
59 58 
         }
60 
-      }, 100)
61 
-      window.addEventListener('resize', this.__resizeHanlder)
59 
+      }, 100);
60 
+      window.addEventListener("resize", this.__resizeHanlder);
62 61 
     }
63 62
64 63 
     // 监听侧边栏的变化
65 
-    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
66 
-    sidebarElm.addEventListener('transitionend', this.__resizeHanlder)
64 
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
65 
+    sidebarElm.addEventListener("transitionend", this.__resizeHanlder);
67 66 
   },
68 67 
   beforeDestroy() {
69 68 
     if (!this.chart) {
70 
-      return
69 
+      return;
71 70 
     }
72 71 
     if (this.autoResize) {
73 
-      window.removeEventListener('resize', this.__resizeHanlder)
72 
+      window.removeEventListener("resize", this.__resizeHanlder);
74 73 
     }
75 74
76 
-    const sidebarElm = document.getElementsByClassName('sidebar-container')[0]
77 
-    sidebarElm.removeEventListener('transitionend', this.__resizeHanlder)
75 
+    const sidebarElm = document.getElementsByClassName("sidebar-container")[0];
76 
+    sidebarElm.removeEventListener("transitionend", this.__resizeHanlder);
78 77
79 
-    this.chart.dispose()
80 
-    this.chart = null
78 
+    this.chart.dispose();
79 
+    this.chart = null;
81 80 
   },
82 81 
   watch: {
83 
-
84 
-    "options":function(){
82 
+    options: function() {
85 83 
       this.chartOptions = this.options;
86 
-      this.initChart()
84 
+      this.initChart();
87 85 
       this.__resizeHanlder = debounce(() => {
88 86 
         if (this.chart) {
89 
-          this.chart.resize()
87 
+          this.chart.resize();
90 88 
         }
91 
-      }, 100)
92 
-      window.addEventListener('resize', this.__resizeHanlder)
89 
+      }, 100);
90 
+      window.addEventListener("resize", this.__resizeHanlder);
93 91 
     },
94 
-
95 92
96 93 
     chartData: {
97 94 
       deep: true,
98 95 
       handler(val) {
99 
-        this.setOptions(val)
96 
+        this.setOptions(val);
100 97 
       }
101 98 
     }
102 99 
   },
103 
-  created(){
100 
+  created() {
104 101 
     this.chartOptions = this.options;
105 102 
     console.log("this.chartOptions", this.chartOptions, this.options);
106 103 
   },
107 104 
   methods: {
105 
+    // setOptions({ expectedData, actualData } = {}) {
106 
+    //   this.chart.setOption({
107 
+    //     title: {
108 
+    //         text: this.title,
109 
+    //     },
110 
+    //     xAxis: {
111 
+    //       data: this.chartOptions.xAxis,
112 
+    //       boundaryGap: false,
113 
+    //       axisTick: {
114 
+    //         show: false
115 
+    //       }
116 
+    //     },
117 
+    //     grid: {
118 
+    //       left: 50,
119 
+    //       right: 50,
120 
+    //       bottom: 20,
121 
+    //       top: 30,
122 
+    //       containLabel: true
123 
+    //     },
124 
+    //     tooltip: {
125 
+    //       trigger: 'axis',
126 
+    //       axisPointer: {
127 
+    //         type: 'cross'
128 
+    //       },
129 
+    //       padding: [5, 10]
130 
+    //     },
131 
+    //     yAxis: {
132 
+    //       axisTick: {
133 
+    //         show: false
134 
+    //       }
135 
+    //     },
136 
+    //     legend: {
137 
+    //       data: this.chartOptions.legend,
138 
+    //     },
139 
+    //     series: this.chartOptions.series,
140 
+    //   })
141 
+    // },
108 142 
     setOptions({ expectedData, actualData } = {}) {
109 143 
       this.chart.setOption({
110 
-        title: {
111 
-            text: this.title,
112 
-        },
144 
+        // title: {
145 
+        //   text: this.title
146 
+        // },
113 147 
         xAxis: {
114 
-          data: this.chartOptions.xAxis,
115 
-          boundaryGap: false,
148 
+          data: this.chartOptions.xAxis.data,
149 
+          // boundaryGap: false
116 150 
           axisTick: {
117 
-            show: false
151 
+            show: true
152 
+          },
153 
+          axisLine: {
154 
+            lineStyle: {
155 
+              color: "pink" //x轴颜色
156 
+            }
157 
+          },
158 
+          axisLabel: {
159 
+            interval: 0,
160 
+            formatter: function(value) {
161 
+              var ret = ""; //拼接加\n返回的类目项
162 
+              var maxLength = 8; //每项显示文字个数
163 
+              var valLength = value.length; //X轴类目项的文字个数
164 
+              var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
165 
+              if (rowN > 1) {
166 
+                //如果类目项的文字大于3,
167 
+                for (var i = 0; i < rowN; i++) {
168 
+                  var temp = ""; //每次截取的字符串
169 
+                  var start = i * maxLength; //开始截取的位置
170 
+                  var end = start + maxLength; //结束截取的位置
171 
+                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
172 
+                  temp = value.substring(start, end) + "\n";
173 
+                  ret += temp; //凭借最终的字符串
174 
+                }
175 
+                return ret;
176 
+              } else {
177 
+                return value;
178 
+              }
179 
+            }
118 180 
           }
119 181 
         },
120 182 
         grid: {
121 
-          left: 50,
183 
+          left: 0,
122 184 
           right: 50,
123 
-          bottom: 20,
185 
+          bottom: 10,
124 186 
           top: 30,
125 187 
           containLabel: true
126 188 
         },
127 189 
         tooltip: {
128 
-          trigger: 'axis',
190 
+          trigger: "axis",
129 191 
           axisPointer: {
130 
-            type: 'cross'
192 
+            type: "cross"
131 193 
           },
132 194 
           padding: [5, 10]
133 195 
         },
134 196 
         yAxis: {
135 197 
           axisTick: {
136 
-            show: false
198 
+            show: true
199 
+          },
200 
+          axisLine: {
201 
+            lineStyle: {
202 
+              color: "pink" //y轴颜色
203 
+            }
137 204 
           }
138 205 
         },
139 
-        legend: {
140 
-          data: this.chartOptions.legend,
141 
-        },
142 
-        series: this.chartOptions.series,
143 
-      })
206 
+        // dataZoom: [
207 
+        //   {
208 
+        //     //Y轴固定,让内容滚动
209 
+        //     type: "slider",
210 
+        //     show: false,
211 
+        //     xAxisIndex: [0],
212 
+        //     start: 1,
213 
+        //     end: 80, //设置X轴刻度之间的间隔(根据数据量来调整)
214 
+        //     zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
215 
+        //   },
216 
+        //   {
217 
+        //     type: "inside",
218 
+        //     xAxisIndex: [0],
219 
+        //     start: 1,
220 
+        //     end: 80,
221 
+        //     zoomLock: true //锁定区域禁止缩放
222 
+        //   }
223 
+        // ],
224 
+        legend: this.chartOptions.legend,
225 
+        series: this.chartOptions.series
226 
+      });
144 227 
     },
145 228 
     initChart() {
146 
-      this.chart = echarts.init(this.$el, 'macarons')
229 
+      this.chart = echarts.init(this.$el, "macarons");
147 230 
       this.chart.clear();
148 
-      this.setOptions(this.chartData)
231 
+      this.setOptions(this.chartData);
149 232 
     }
150 233 
   }
151 
-}
234 
+};
152 235 
 </script>

+ 70 - 0
src/xt_pages/qcd/indicatorControlAnalysis/analysis.vue View File 

@@ -0,0 +1,70 @@
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_analysis">
8 
+        <new-nav activeName="analysis"></new-nav>
9 
+        <div class="cell clearfix">
10 
+          <label class="title">
11 
+            <span class="name">转归状态</span> :
12 
+          </label>
13 
+          <div class="time">
14 
+            <ul class>
15 
+              <li
16 
+                :class="item.state == wayType ? 'active' : ''"
17 
+                @click="chooseWay(item.state)"
18 
+                v-for="item in way"
19 
+                :key="item.value"
20 
+              >{{ item.label }}</li>
21 
+            </ul>
22 
+          </div>
23 
+        </div>
24 
+        <div v-if="wayType == 0">
25 
+          <office></office>
26 
+        </div>
27 
+        <div v-if="wayType == 1">
28 
+          <personal></personal>
29 
+        </div>
30 
+      </div>
31 
+    </div>
32 
+  </div>
33 
+</template>
34 
+
35 
+
36 
+<script>
37 
+import NewNav from "../indicatorControlAnalysis/components/NewNav";
38 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
39 
+import LineChart from "../../qcd/components/LineChart";
40 
+import office from "../indicatorControlAnalysis/components/office";
41 
+import personal from "../indicatorControlAnalysis/components/personal";
42 
+export default {
43 
+  components: {
44 
+    LineChart,
45 
+    BreadCrumb,
46 
+    office,
47 
+    personal,
48 
+    NewNav
49 
+  },
50 
+  data() {
51 
+    return {
52 
+      crumbs: [
53 
+        { path: false, name: "科室质控" },
54 
+        { path: false, name: "指标评估统计" },
55 
+        { path: false, name: "化验指标统计" }
56 
+      ],
57 
+      way: [
58 
+        { value: 0, label: "科室", state: 0 },
59 
+        { value: 1, label: "个人", state: 1 }
60 
+      ],
61 
+      wayType: 0
62 
+    };
63 
+  },
64 
+  methods: {
65 
+    chooseWay(way) {
66 
+      this.wayType = way;
67 
+    }
68 
+  }
69 
+};
70 
+</script>

+ 277 - 0
src/xt_pages/qcd/indicatorControlAnalysis/analysisDetails.vue View File 

@@ -0,0 +1,277 @@
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_analysisDetails">
8 
+        <div class="cell clearfix" style="margin:0">
9 
+          <el-form :inline="true" :model="listQuery">
10 
+            <el-form-item label>
11 
+              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
12 
+              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
13 
+            </el-form-item>
14 
+          </el-form>
15 
+        </div>
16 
+        <el-container>
17 
+          <div style="width:150px">
18 
+            <div class="tableTitle">患者列表</div>
19 
+            <el-table :data="tableData" border style="width: 100%;" height="500">
20 
+              <el-table-column prop="date" label="日期" width="70"></el-table-column>
21 
+              <el-table-column prop="name" label="姓名" width="80"></el-table-column>
22 
+            </el-table>
23 
+          </div>
24 
+          <div class="containerRight" style="flex:1;overflow: hidden">
25 
+            <div class="cell clearfix">
26 
+              <label class="title" style="text-align:left">
27 
+                <span class="name">统计方式</span> :
28 
+              </label>
29 
+              <div class="time">
30 
+                <ul class>
31 
+                  <li
32 
+                    :class="item.state == monthType ? 'active' : ''"
33 
+                    @click="chooseMonth(item.state)"
34 
+                    v-for="item in month"
35 
+                    :key="item.value"
36 
+                  >{{ item.label }}</li>
37 
+                </ul>
38 
+              </div>
39 
+              <label class="title">
40 
+                <span class="name">日期查询</span> :
41 
+              </label>
42 
+              <el-date-picker
43 
+                v-model="listQuery.start_time"
44 
+                prefix-icon="el-icon-date"
45 
+                @change="changeTime"
46 
+                :editable="false"
47 
+                type="date"
48 
+                style="max-width:160px"
49 
+                placeholder="选择日期时间"
50 
+                align="right"
51 
+                format="yyyy-MM-dd"
52 
+                value-format="yyyy-MM-dd"
53 
+              ></el-date-picker>
54 
+              <span class>-</span>
55 
+              <el-date-picker
56 
+                v-model="listQuery.end_time"
57 
+                prefix-icon="el-icon-date"
58 
+                @change="changeEndTime"
59 
+                :editable="false"
60 
+                type="date"
61 
+                style="max-width:160px"
62 
+                placeholder="选择日期时间"
63 
+                align="right"
64 
+                format="yyyy-MM-dd"
65 
+                value-format="yyyy-MM-dd"
66 
+              ></el-date-picker>
67 
+            </div>
68 
+            <div class="tableTitle">指标趋势</div>
69 
+            <div>
70 
+              <line-chart :options="chart"></line-chart>
71 
+            </div>
72 
+          </div>
73 
+        </el-container>
74 
+      </div>
75 
+    </div>
76 
+  </div>
77 
+</template>
78 
+
79 
+<script>
80 
+import echarts from "echarts";
81 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
82 
+import LineChart from "../../qcd/components/LineChart";
83 
+export default {
84 
+  components: {
85 
+    LineChart,
86 
+    BreadCrumb
87 
+  },
88 
+  data() {
89 
+    return {
90 
+      crumbs: [
91 
+        { path: false, name: "科室质控" },
92 
+        { path: false, name: "指标评估统计" },
93 
+        { path: false, name: "化验指标统计详情" }
94 
+      ],
95 
+      tableData: [
96 
+        {
97 
+          date: "2016",
98 
+          name: "王小虎"
99 
+        },
100 
+        {
101 
+          date: "2016",
102 
+          name: "王小虎"
103 
+        },
104 
+        {
105 
+          date: "2016",
106 
+          name: "王小虎"
107 
+        },
108 
+        {
109 
+          date: "2016",
110 
+          name: "王小虎"
111 
+        },
112 
+        {
113 
+          date: "2016",
114 
+          name: "王小虎"
115 
+        },
116 
+        {
117 
+          date: "2016",
118 
+          name: "王小虎"
119 
+        },
120 
+        {
121 
+          date: "2016",
122 
+          name: "王小虎"
123 
+        },
124 
+        {
125 
+          date: "2016",
126 
+          name: "王小虎"
127 
+        },
128 
+        {
129 
+          date: "2016",
130 
+          name: "王小虎"
131 
+        },
132 
+        {
133 
+          date: "2016",
134 
+          name: "王小虎"
135 
+        },
136 
+        {
137 
+          date: "2016",
138 
+          name: "王小虎"
139 
+        },
140 
+        {
141 
+          date: "2016",
142 
+          name: "王小虎"
143 
+        }
144 
+      ],
145 
+      listQuery: {
146 
+        start_time: "",
147 
+        end_time: "",
148 
+        page: 1,
149 
+        limit: 10
150 
+      },
151 
+      month: [
152 
+        { value: 0, label: "本月", state: 0 },
153 
+        { value: 1, label: "近三个月", state: 1 },
154 
+        { value: 2, label: "近半年", state: 2 },
155 
+        { value: 3, label: "近一年", state: 3 }
156 
+      ],
157 
+      monthType: 0,
158 
+      chart: {
159 
+        title: {
160 
+          text: "ECharts 入门示例"
161 
+        },
162 
+        tooltip: {},
163 
+        legend: {
164 
+          data: ["次数"],
165 
+          left: 0
166 
+        },
167 
+        xAxis: {
168 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
169 
+        },
170 
+        yAxis: {
171 
+          axisLabel: {
172 
+            formatter: "{value} %"
173 
+          },
174 
+          show: false
175 
+        },
176 
+        series: [
177 
+          {
178 
+            name: "次数",
179 
+            type: "line",
180 
+            data: [
181 
+              "78.57",
182 
+              "50",
183 
+              "80",
184 
+              "93.33",
185 
+              "92.86",
186 
+              "100",
187 
+              "12",
188 
+              "77",
189 
+              "37"
190 
+            ],
191 
+            barWidth: 30,
192 
+            label: {
193 
+              normal: {
194 
+                show: true,
195 
+                position: "top",
196 
+                formatter: "{c}次"
197 
+              }
198 
+            },
199 
+            //配置样式
200 
+            itemStyle: {
201 
+              //通常情况下：
202 
+
203 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
204 
+              normal: {
205 
+                color: function(params) {
206 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
207 
+                  var colorList = [
208 
+                    ["#A9E0F3", "#9FBDFC"],
209 
+                    ["#A9E0F3", "#9FBDFC"],
210 
+                    ["#A9E0F3", "#9FBDFC"],
211 
+
212 
+                    ["#FFD7C0", "#FF9994"],
213 
+                    ["#FFD7C0", "#FF9994"],
214 
+                    ["#FFD7C0", "#FF9994"],
215 
+                    ["#D7C3FD", "#B3A8F7"],
216 
+                    ["#D7C3FD", "#B3A8F7"],
217 
+                    ["#D7C3FD", "#B3A8F7"]
218 
+                  ];
219 
+
220 
+                  var index = params.dataIndex;
221 
+                  if (params.dataIndex >= colorList.length) {
222 
+                    index = params.dataIndex % colorList.length;
223 
+                  }
224 
+
225 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
226 
+                    { offset: 0, color: colorList[index][0] },
227 
+                    // { offset: 0.5, color: colorList[index][1] },
228 
+                    { offset: 1, color: colorList[index][1] }
229 
+                  ]);
230 
+                },
231 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
232 
+              },
233 
+
234 
+              //鼠标悬停时：
235 
+              emphasis: {
236 
+                shadowBlur: 10,
237 
+                shadowOffsetX: 0,
238 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
239 
+              }
240 
+            }
241 
+          }
242 
+        ]
243 
+      }
244 
+    };
245 
+  },
246 
+  methods: {
247 
+    chooseMonth(month) {
248 
+      this.monthType = month;
249 
+    }
250 
+  }
251 
+};
252 
+</script>
253 
+
254 
+<style lang="scss" scoped>
255 
+.containerRight {
256 
+  padding-left: 10px;
257 
+}
258 
+.tableTitle {
259 
+  font-size: 16px;
260 
+  color: #000;
261 
+  font-weight: bold;
262 
+  margin-bottom: 10px;
263 
+  margin-top: 8px;
264 
+}
265 
+</style>
266 
+
267 
+
268 
+<style lang="scss">
269 
+.page_analysisDetails {
270 
+  .cell {
271 
+    text-align: center;
272 
+  }
273 
+  .el-form-item {
274 
+    margin-bottom: 0;
275 
+  }
276 
+}
277 
+</style>

+ 397 - 0
src/xt_pages/qcd/indicatorControlAnalysis/bloodPressure.vue View File 

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

+ 368 - 0
src/xt_pages/qcd/indicatorControlAnalysis/bloodPressureDetails.vue View File 

@@ -0,0 +1,368 @@
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_bloodPressureDetails">
8 
+        <div class="cell clearfix" style="margin:0">
9 
+          <el-form :inline="true" :model="listQuery">
10 
+            <el-form-item label>
11 
+              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
12 
+              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
13 
+            </el-form-item>
14 
+          </el-form>
15 
+        </div>
16 
+        <el-container>
17 
+          <div style="width:150px">
18 
+            <div class="tableTitle">患者列表</div>
19 
+            <el-table :data="tableData" border style="width: 100%;" height="500">
20 
+              <el-table-column prop="date" label="日期" width="70"></el-table-column>
21 
+              <el-table-column prop="name" label="姓名" width="80"></el-table-column>
22 
+            </el-table>
23 
+          </div>
24 
+          <div class="containerRight" style="flex:1;overflow: hidden">
25 
+            <div class="cell clearfix">
26 
+              <label class="title" style="text-align:left">
27 
+                <span class="name">血压阶段</span> :
28 
+              </label>
29 
+              <el-select
30 
+                v-model="value"
31 
+                placeholder="请选择"
32 
+                @change="chooseType"
33 
+                style="width:110px;margin-right:10px"
34 
+              >
35 
+                <el-option
36 
+                  v-for="item in options"
37 
+                  :key="item.value"
38 
+                  :label="item.label"
39 
+                  :value="item.value"
40 
+                ></el-option>
41 
+              </el-select>
42 
+              <label class="title">
43 
+                <span class="name">日期查询</span> :
44 
+              </label>
45 
+              <el-date-picker
46 
+                v-model="listQuery.start_time"
47 
+                prefix-icon="el-icon-date"
48 
+                @change="changeTime"
49 
+                :editable="false"
50 
+                type="date"
51 
+                style="max-width:160px"
52 
+                placeholder="选择日期时间"
53 
+                align="right"
54 
+                format="yyyy-MM-dd"
55 
+                value-format="yyyy-MM-dd"
56 
+              ></el-date-picker>
57 
+              <span class>-</span>
58 
+              <el-date-picker
59 
+                v-model="listQuery.end_time"
60 
+                prefix-icon="el-icon-date"
61 
+                @change="changeEndTime"
62 
+                :editable="false"
63 
+                type="date"
64 
+                style="max-width:160px"
65 
+                placeholder="选择日期时间"
66 
+                align="right"
67 
+                format="yyyy-MM-dd"
68 
+                value-format="yyyy-MM-dd"
69 
+              ></el-date-picker>
70 
+            </div>
71 
+            <div class="tableTitle">指标趋势</div>
72 
+            <div>
73 
+              <line-chart :options="chart"></line-chart>
74 
+            </div>
75 
+            <div class="tableTitle">统计表</div>
76 
+            <div>
77 
+              <el-table :data="tableData1" style="width: 100%" border>
78 
+                <el-table-column fixed prop="date" label="日期"></el-table-column>
79 
+                <el-table-column prop="name" label="姓名"></el-table-column>
80 
+                <el-table-column prop="province" label="省份"></el-table-column>
81 
+                <el-table-column prop="city" label="市区"></el-table-column>
82 
+              </el-table>
83 
+
84 
+              <el-pagination
85 
+                align="right"
86 
+                @size-change="handleSizeChange"
87 
+                @current-change="handleCurrentChange"
88 
+                :current-page="listQuery.page"
89 
+                :page-sizes="[10, 20, 50, 100]"
90 
+                :page-size="10"
91 
+                background
92 
+                style="margin-top:20px;"
93 
+                layout="total, sizes, prev, pager, next, jumper"
94 
+                :total="total"
95 
+              ></el-pagination>
96 
+            </div>
97 
+          </div>
98 
+        </el-container>
99 
+      </div>
100 
+    </div>
101 
+  </div>
102 
+</template>
103 
+
104 
+<script>
105 
+import echarts from "echarts";
106 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
107 
+import LineChart from "../../qcd/components/LineChart";
108 
+export default {
109 
+  components: {
110 
+    LineChart,
111 
+    BreadCrumb
112 
+  },
113 
+  data() {
114 
+    return {
115 
+      crumbs: [
116 
+        { path: false, name: "科室质控" },
117 
+        { path: false, name: "患者血压详情" }
118 
+      ],
119 
+      tableData: [
120 
+        {
121 
+          date: "2016",
122 
+          name: "王小虎"
123 
+        },
124 
+        {
125 
+          date: "2016",
126 
+          name: "王小虎"
127 
+        },
128 
+        {
129 
+          date: "2016",
130 
+          name: "王小虎"
131 
+        },
132 
+        {
133 
+          date: "2016",
134 
+          name: "王小虎"
135 
+        },
136 
+        {
137 
+          date: "2016",
138 
+          name: "王小虎"
139 
+        },
140 
+        {
141 
+          date: "2016",
142 
+          name: "王小虎"
143 
+        },
144 
+        {
145 
+          date: "2016",
146 
+          name: "王小虎"
147 
+        },
148 
+        {
149 
+          date: "2016",
150 
+          name: "王小虎"
151 
+        },
152 
+        {
153 
+          date: "2016",
154 
+          name: "王小虎"
155 
+        },
156 
+        {
157 
+          date: "2016",
158 
+          name: "王小虎"
159 
+        },
160 
+        {
161 
+          date: "2016",
162 
+          name: "王小虎"
163 
+        },
164 
+        {
165 
+          date: "2016",
166 
+          name: "王小虎"
167 
+        }
168 
+      ],
169 
+      listQuery: {
170 
+        start_time: "",
171 
+        end_time: "",
172 
+        page: 1,
173 
+        limit: 10
174 
+      },
175 
+      chart: {
176 
+        title: {
177 
+          text: "ECharts 入门示例"
178 
+        },
179 
+        tooltip: {},
180 
+        legend: {
181 
+          data: ["收缩压", "舒张压"],
182 
+          left: 0
183 
+        },
184 
+        xAxis: {
185 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
186 
+        },
187 
+        yAxis: {
188 
+          axisLabel: {
189 
+            formatter: "{value} %"
190 
+          },
191 
+          show: false
192 
+        },
193 
+        series: [
194 
+          {
195 
+            name: "收缩压",
196 
+            type: "line",
197 
+            data: [
198 
+              "78.57",
199 
+              "50",
200 
+              "80",
201 
+              "93.33",
202 
+              "92.86",
203 
+              "100",
204 
+              "12",
205 
+              "77",
206 
+              "37"
207 
+            ],
208 
+            barWidth: 30,
209 
+            label: {
210 
+              normal: {
211 
+                show: true,
212 
+                position: "top",
213 
+                formatter: "{c}次"
214 
+              }
215 
+            },
216 
+            //配置样式
217 
+            itemStyle: {
218 
+              normal: {
219 
+                color: "#5b98ff", //折点颜色
220 
+                lineStyle: {
221 
+                  color: "#5b98ff" //折线颜色
222 
+                }
223 
+              }
224 
+            }
225 
+          },
226 
+          {
227 
+            name: "舒张压",
228 
+            type: "line",
229 
+            data: ["10", "20", "30", "53.33", "42.86", "100", "60", "27", "97"],
230 
+            barWidth: 30,
231 
+            label: {
232 
+              normal: {
233 
+                show: true,
234 
+                position: "top",
235 
+                formatter: "{c}次"
236 
+              }
237 
+            },
238 
+            //配置样式
239 
+            itemStyle: {
240 
+              normal: {
241 
+                color: "#dd7383", //折点颜色
242 
+                lineStyle: {
243 
+                  color: "#dd7383" //折线颜色
244 
+                }
245 
+              }
246 
+            }
247 
+          }
248 
+        ]
249 
+      },
250 
+      tableData1: [
251 
+        {
252 
+          date: "2016-05-03",
253 
+          name: "王小虎",
254 
+          province: "上海",
255 
+          city: "普陀区",
256 
+          address: "上海市普陀区金沙江路 1518 弄",
257 
+          zip: 200333
258 
+        },
259 
+        {
260 
+          date: "2016-05-02",
261 
+          name: "王小虎",
262 
+          province: "上海",
263 
+          city: "普陀区",
264 
+          address: "上海市普陀区金沙江路 1518 弄",
265 
+          zip: 200333
266 
+        },
267 
+        {
268 
+          date: "2016-05-04",
269 
+          name: "王小虎",
270 
+          province: "上海",
271 
+          city: "普陀区",
272 
+          address: "上海市普陀区金沙江路 1518 弄",
273 
+          zip: 200333
274 
+        },
275 
+        {
276 
+          date: "2016-05-01",
277 
+          name: "王小虎",
278 
+          province: "上海",
279 
+          city: "普陀区",
280 
+          address: "上海市普陀区金沙江路 1518 弄",
281 
+          zip: 200333
282 
+        },
283 
+        {
284 
+          date: "2016-05-08",
285 
+          name: "王小虎",
286 
+          province: "上海",
287 
+          city: "普陀区",
288 
+          address: "上海市普陀区金沙江路 1518 弄",
289 
+          zip: 200333
290 
+        },
291 
+        {
292 
+          date: "2016-05-06",
293 
+          name: "王小虎",
294 
+          province: "上海",
295 
+          city: "普陀区",
296 
+          address: "上海市普陀区金沙江路 1518 弄",
297 
+          zip: 200333
298 
+        },
299 
+        {
300 
+          date: "2016-05-07",
301 
+          name: "王小虎",
302 
+          province: "上海",
303 
+          city: "普陀区",
304 
+          address: "上海市普陀区金沙江路 1518 弄",
305 
+          zip: 200333
306 
+        },
307 
+        {
308 
+          date: "2016-05-08",
309 
+          name: "王小虎",
310 
+          province: "上海",
311 
+          city: "普陀区",
312 
+          address: "上海市普陀区金沙江路 1518 弄",
313 
+          zip: 200333
314 
+        },
315 
+        {
316 
+          date: "2016-05-06",
317 
+          name: "王小虎",
318 
+          province: "上海",
319 
+          city: "普陀区",
320 
+          address: "上海市普陀区金沙江路 1518 弄",
321 
+          zip: 200333
322 
+        },
323 
+        {
324 
+          date: "2016-05-07",
325 
+          name: "王小虎",
326 
+          province: "上海",
327 
+          city: "普陀区",
328 
+          address: "上海市普陀区金沙江路 1518 弄",
329 
+          zip: 200333
330 
+        }
331 
+      ]
332 
+    };
333 
+  },
334 
+  methods: {
335 
+    chooseMonth(month) {
336 
+      this.monthType = month;
337 
+    },
338 
+    clickQuality(index) {
339 
+      this.quality = index;
340 
+    }
341 
+  }
342 
+};
343 
+</script>
344 
+
345 
+<style lang="scss" scoped>
346 
+.containerRight {
347 
+  padding-left: 10px;
348 
+}
349 
+.tableTitle {
350 
+  font-size: 16px;
351 
+  color: #000;
352 
+  font-weight: bold;
353 
+  margin-bottom: 10px;
354 
+  margin-top: 8px;
355 
+}
356 
+</style>
357 
+
358 
+
359 
+<style lang="scss">
360 
+.page_bloodPressureDetails {
361 
+  .cell {
362 
+    text-align: center;
363 
+  }
364 
+  .el-form-item {
365 
+    margin-bottom: 0;
366 
+  }
367 
+}
368 
+</style>

+ 35 - 0
src/xt_pages/qcd/indicatorControlAnalysis/components/NewNav.vue View File 

@@ -0,0 +1,35 @@
1 
+<template>
2 
+  <el-tabs v-model="tabActiveName" @tab-click="handleTabClick" style="margin-bottom:10px">
3 
+    <el-tab-pane label="化验指标统计" name="analysis"></el-tab-pane>
4 
+    <el-tab-pane label="透析过程指标统计" name="process"></el-tab-pane>
5 
+    <el-tab-pane label="透析监测信息统计" name="monitor"></el-tab-pane>
6 
+    <el-tab-pane label="患者血压统计" name="bloodPressure"></el-tab-pane>
7 
+    <el-tab-pane label="患者体重统计" name="weight"></el-tab-pane>
8 
+  </el-tabs>
9 
+</template>
10 
+<script>
11 
+export default {
12 
+  props: {
13 
+    activeName: {
14 
+      type: String,
15 
+      default: "analysis"
16 
+    }
17 
+  },
18 
+  data() {
19 
+    return {
20 
+      tabActiveName: "analysis"
21 
+    };
22 
+  },
23 
+  methods: {
24 
+    handleTabClick(tab, event) {
25 
+      this.$router.push({
26 
+        path: "/qcd/indicatorControlAnalysis/" + this.tabActiveName
27 
+      });
28 
+    }
29 
+  },
30 
+  created() {
31 
+    this.tabActiveName = this.activeName;
32 
+  }
33 
+};
34 
+</script>
35 
+

+ 337 - 0
src/xt_pages/qcd/indicatorControlAnalysis/components/office.vue View File 

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

+ 371 - 0
src/xt_pages/qcd/indicatorControlAnalysis/components/personal.vue View File 

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

+ 384 - 0
src/xt_pages/qcd/indicatorControlAnalysis/monitor.vue View File 

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

+ 384 - 0
src/xt_pages/qcd/indicatorControlAnalysis/process.vue View File 

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

+ 390 - 0
src/xt_pages/qcd/indicatorControlAnalysis/weight.vue View File 

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

+ 368 - 0
src/xt_pages/qcd/indicatorControlAnalysis/weightDetails.vue View File 

@@ -0,0 +1,368 @@
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_weightDetails">
8 
+        <div class="cell clearfix" style="margin:0">
9 
+          <el-form :inline="true" :model="listQuery">
10 
+            <el-form-item label>
11 
+              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
12 
+              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
13 
+            </el-form-item>
14 
+          </el-form>
15 
+        </div>
16 
+        <el-container>
17 
+          <div style="width:150px">
18 
+            <div class="tableTitle">患者列表</div>
19 
+            <el-table :data="tableData" border style="width: 100%;" height="500">
20 
+              <el-table-column prop="date" label="日期" width="70"></el-table-column>
21 
+              <el-table-column prop="name" label="姓名" width="80"></el-table-column>
22 
+            </el-table>
23 
+          </div>
24 
+          <div class="containerRight" style="flex:1;overflow: hidden">
25 
+            <div class="cell clearfix">
26 
+              <label class="title" style="text-align:left">
27 
+                <span class="name">血压阶段</span> :
28 
+              </label>
29 
+              <el-select
30 
+                v-model="value"
31 
+                placeholder="请选择"
32 
+                @change="chooseType"
33 
+                style="width:110px;margin-right:10px"
34 
+              >
35 
+                <el-option
36 
+                  v-for="item in options"
37 
+                  :key="item.value"
38 
+                  :label="item.label"
39 
+                  :value="item.value"
40 
+                ></el-option>
41 
+              </el-select>
42 
+              <label class="title">
43 
+                <span class="name">日期查询</span> :
44 
+              </label>
45 
+              <el-date-picker
46 
+                v-model="listQuery.start_time"
47 
+                prefix-icon="el-icon-date"
48 
+                @change="changeTime"
49 
+                :editable="false"
50 
+                type="date"
51 
+                style="max-width:160px"
52 
+                placeholder="选择日期时间"
53 
+                align="right"
54 
+                format="yyyy-MM-dd"
55 
+                value-format="yyyy-MM-dd"
56 
+              ></el-date-picker>
57 
+              <span class>-</span>
58 
+              <el-date-picker
59 
+                v-model="listQuery.end_time"
60 
+                prefix-icon="el-icon-date"
61 
+                @change="changeEndTime"
62 
+                :editable="false"
63 
+                type="date"
64 
+                style="max-width:160px"
65 
+                placeholder="选择日期时间"
66 
+                align="right"
67 
+                format="yyyy-MM-dd"
68 
+                value-format="yyyy-MM-dd"
69 
+              ></el-date-picker>
70 
+            </div>
71 
+            <div class="tableTitle">指标趋势</div>
72 
+            <div>
73 
+              <line-chart :options="chart"></line-chart>
74 
+            </div>
75 
+            <div class="tableTitle">统计表</div>
76 
+            <div>
77 
+              <el-table :data="tableData1" style="width: 100%" border>
78 
+                <el-table-column fixed prop="date" label="日期"></el-table-column>
79 
+                <el-table-column prop="name" label="姓名"></el-table-column>
80 
+                <el-table-column prop="province" label="省份"></el-table-column>
81 
+                <el-table-column prop="city" label="市区"></el-table-column>
82 
+              </el-table>
83 
+
84 
+              <el-pagination
85 
+                align="right"
86 
+                @size-change="handleSizeChange"
87 
+                @current-change="handleCurrentChange"
88 
+                :current-page="listQuery.page"
89 
+                :page-sizes="[10, 20, 50, 100]"
90 
+                :page-size="10"
91 
+                background
92 
+                style="margin-top:20px;"
93 
+                layout="total, sizes, prev, pager, next, jumper"
94 
+                :total="total"
95 
+              ></el-pagination>
96 
+            </div>
97 
+          </div>
98 
+        </el-container>
99 
+      </div>
100 
+    </div>
101 
+  </div>
102 
+</template>
103 
+
104 
+<script>
105 
+import echarts from "echarts";
106 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
107 
+import LineChart from "../../qcd/components/LineChart";
108 
+export default {
109 
+  components: {
110 
+    LineChart,
111 
+    BreadCrumb
112 
+  },
113 
+  data() {
114 
+    return {
115 
+      crumbs: [
116 
+        { path: false, name: "科室质控" },
117 
+        { path: false, name: "患者血压详情" }
118 
+      ],
119 
+      tableData: [
120 
+        {
121 
+          date: "2016",
122 
+          name: "王小虎"
123 
+        },
124 
+        {
125 
+          date: "2016",
126 
+          name: "王小虎"
127 
+        },
128 
+        {
129 
+          date: "2016",
130 
+          name: "王小虎"
131 
+        },
132 
+        {
133 
+          date: "2016",
134 
+          name: "王小虎"
135 
+        },
136 
+        {
137 
+          date: "2016",
138 
+          name: "王小虎"
139 
+        },
140 
+        {
141 
+          date: "2016",
142 
+          name: "王小虎"
143 
+        },
144 
+        {
145 
+          date: "2016",
146 
+          name: "王小虎"
147 
+        },
148 
+        {
149 
+          date: "2016",
150 
+          name: "王小虎"
151 
+        },
152 
+        {
153 
+          date: "2016",
154 
+          name: "王小虎"
155 
+        },
156 
+        {
157 
+          date: "2016",
158 
+          name: "王小虎"
159 
+        },
160 
+        {
161 
+          date: "2016",
162 
+          name: "王小虎"
163 
+        },
164 
+        {
165 
+          date: "2016",
166 
+          name: "王小虎"
167 
+        }
168 
+      ],
169 
+      listQuery: {
170 
+        start_time: "",
171 
+        end_time: "",
172 
+        page: 1,
173 
+        limit: 10
174 
+      },
175 
+      chart: {
176 
+        title: {
177 
+          text: "ECharts 入门示例"
178 
+        },
179 
+        tooltip: {},
180 
+        legend: {
181 
+          data: ["透前体重", "透后体重"],
182 
+          left: 0
183 
+        },
184 
+        xAxis: {
185 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
186 
+        },
187 
+        yAxis: {
188 
+          axisLabel: {
189 
+            formatter: "{value} %"
190 
+          },
191 
+          show: false
192 
+        },
193 
+        series: [
194 
+          {
195 
+            name: "透前体重",
196 
+            type: "line",
197 
+            data: [
198 
+              "78.57",
199 
+              "50",
200 
+              "80",
201 
+              "93.33",
202 
+              "92.86",
203 
+              "100",
204 
+              "12",
205 
+              "77",
206 
+              "37"
207 
+            ],
208 
+            barWidth: 30,
209 
+            label: {
210 
+              normal: {
211 
+                show: true,
212 
+                position: "top",
213 
+                formatter: "{c}次"
214 
+              }
215 
+            },
216 
+            //配置样式
217 
+            itemStyle: {
218 
+              normal: {
219 
+                color: "#5b98ff", //折点颜色
220 
+                lineStyle: {
221 
+                  color: "#5b98ff" //折线颜色
222 
+                }
223 
+              }
224 
+            }
225 
+          },
226 
+          {
227 
+            name: "透后体重",
228 
+            type: "line",
229 
+            data: ["10", "20", "30", "53.33", "42.86", "100", "60", "27", "97"],
230 
+            barWidth: 30,
231 
+            label: {
232 
+              normal: {
233 
+                show: true,
234 
+                position: "top",
235 
+                formatter: "{c}次"
236 
+              }
237 
+            },
238 
+            //配置样式
239 
+            itemStyle: {
240 
+              normal: {
241 
+                color: "#dd7383", //折点颜色
242 
+                lineStyle: {
243 
+                  color: "#dd7383" //折线颜色
244 
+                }
245 
+              }
246 
+            }
247 
+          }
248 
+        ]
249 
+      },
250 
+      tableData1: [
251 
+        {
252 
+          date: "2016-05-03",
253 
+          name: "王小虎",
254 
+          province: "上海",
255 
+          city: "普陀区",
256 
+          address: "上海市普陀区金沙江路 1518 弄",
257 
+          zip: 200333
258 
+        },
259 
+        {
260 
+          date: "2016-05-02",
261 
+          name: "王小虎",
262 
+          province: "上海",
263 
+          city: "普陀区",
264 
+          address: "上海市普陀区金沙江路 1518 弄",
265 
+          zip: 200333
266 
+        },
267 
+        {
268 
+          date: "2016-05-04",
269 
+          name: "王小虎",
270 
+          province: "上海",
271 
+          city: "普陀区",
272 
+          address: "上海市普陀区金沙江路 1518 弄",
273 
+          zip: 200333
274 
+        },
275 
+        {
276 
+          date: "2016-05-01",
277 
+          name: "王小虎",
278 
+          province: "上海",
279 
+          city: "普陀区",
280 
+          address: "上海市普陀区金沙江路 1518 弄",
281 
+          zip: 200333
282 
+        },
283 
+        {
284 
+          date: "2016-05-08",
285 
+          name: "王小虎",
286 
+          province: "上海",
287 
+          city: "普陀区",
288 
+          address: "上海市普陀区金沙江路 1518 弄",
289 
+          zip: 200333
290 
+        },
291 
+        {
292 
+          date: "2016-05-06",
293 
+          name: "王小虎",
294 
+          province: "上海",
295 
+          city: "普陀区",
296 
+          address: "上海市普陀区金沙江路 1518 弄",
297 
+          zip: 200333
298 
+        },
299 
+        {
300 
+          date: "2016-05-07",
301 
+          name: "王小虎",
302 
+          province: "上海",
303 
+          city: "普陀区",
304 
+          address: "上海市普陀区金沙江路 1518 弄",
305 
+          zip: 200333
306 
+        },
307 
+        {
308 
+          date: "2016-05-08",
309 
+          name: "王小虎",
310 
+          province: "上海",
311 
+          city: "普陀区",
312 
+          address: "上海市普陀区金沙江路 1518 弄",
313 
+          zip: 200333
314 
+        },
315 
+        {
316 
+          date: "2016-05-06",
317 
+          name: "王小虎",
318 
+          province: "上海",
319 
+          city: "普陀区",
320 
+          address: "上海市普陀区金沙江路 1518 弄",
321 
+          zip: 200333
322 
+        },
323 
+        {
324 
+          date: "2016-05-07",
325 
+          name: "王小虎",
326 
+          province: "上海",
327 
+          city: "普陀区",
328 
+          address: "上海市普陀区金沙江路 1518 弄",
329 
+          zip: 200333
330 
+        }
331 
+      ]
332 
+    };
333 
+  },
334 
+  methods: {
335 
+    chooseMonth(month) {
336 
+      this.monthType = month;
337 
+    },
338 
+    clickQuality(index) {
339 
+      this.quality = index;
340 
+    }
341 
+  }
342 
+};
343 
+</script>
344 
+
345 
+<style lang="scss" scoped>
346 
+.containerRight {
347 
+  padding-left: 10px;
348 
+}
349 
+.tableTitle {
350 
+  font-size: 16px;
351 
+  color: #000;
352 
+  font-weight: bold;
353 
+  margin-bottom: 10px;
354 
+  margin-top: 8px;
355 
+}
356 
+</style>
357 
+
358 
+
359 
+<style lang="scss">
360 
+.page_weightDetails {
361 
+  .cell {
362 
+    text-align: center;
363 
+  }
364 
+  .el-form-item {
365 
+    margin-bottom: 0;
366 
+  }
367 
+}
368 
+</style>

+ 261 - 0
src/xt_pages/qcd/officesControlAnalysis/project.vue View File 

@@ -0,0 +1,261 @@
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 
+      <el-tabs v-model="activeName" @tab-click="handleClick">
8 
+        <el-tab-pane label="按时间分组" name="first"></el-tab-pane>
9 
+        <el-tab-pane label="按项目分组" name="second"></el-tab-pane>
10 
+      </el-tabs>
11 
+      <div class="cell clearfix">
12 
+        <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
13 
+          <el-option
14 
+            v-for="item in options"
15 
+            :key="item.value"
16 
+            :label="item.label"
17 
+            :value="item.value"
18 
+          ></el-option>
19 
+        </el-select>
20 
+        <el-select v-model="type" placeholder="请选择" @change="chooseType" style="margin-right:20px">
21 
+          <el-option
22 
+            v-for="item in options1"
23 
+            :key="item.value"
24 
+            :label="item.label"
25 
+            :value="item.value"
26 
+          ></el-option>
27 
+        </el-select>
28 
+        <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
29 
+          <el-option
30 
+            v-for="item in options"
31 
+            :key="item.value"
32 
+            :label="item.label"
33 
+            :value="item.value"
34 
+          ></el-option>
35 
+        </el-select>
36 
+      </div>
37 
+
38 
+      <div class="cell clearfix">
39 
+        <p class="chartTitle">统计图</p>
40 
+      </div>
41 
+      <div>
42 
+        <line-chart :options="chart"></line-chart>
43 
+      </div>
44 
+      <div class="cell clearfix">
45 
+        <p class="point"></p>
46 
+        <p class="pointTitle">指标正常范围值</p>
47 
+      </div>
48 
+      <div class="cell clearfix newDisplay">
49 
+        <span class="index">钙(2.25-2.75)</span>
50 
+        <span class="index">钙(2.25-2.75)</span>
51 
+        <span class="index">钙(2.25-2.75)</span>
52 
+        <span class="index">钙(2.25-2.75)</span>
53 
+        <span class="index">钙(2.25-2.75)</span>
54 
+        <span class="index">钙(2.25-2.75)</span>
55 
+        <span class="index">钙(2.25-2.75)</span>
56 
+        <span class="index">钙(2.25-2.75)</span>
57 
+        <span class="index">钙(2.25-2.75)</span>
58 
+        <span class="index">钙(2.25-2.75)</span>
59 
+        <span class="index">钙(2.25-2.75)</span>
60 
+        <span class="index">钙(2.25-2.75)</span>
61 
+        <span class="index">钙(2.25-2.75)</span>
62 
+        <span class="index">钙(2.25-2.75)</span>
63 
+        <span class="index">钙(2.25-2.75)</span>
64 
+        <span class="index">钙(2.25-2.75)</span>
65 
+        <span class="index">钙(2.25-2.75)</span>
66 
+        <span class="index">钙(2.25-2.75)</span>
67 
+      </div>
68 
+    </div>
69 
+  </div>
70 
+</template>
71 
+
72 
+<script>
73 
+import echarts from "echarts";
74 
+import { GetOICData } from "@/api/qcd";
75 
+import LineChart from "../../qcd/components/LineChart";
76 
+import { uParseTime } from "@/utils/tools";
77 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
78 
+export default {
79 
+  components: {
80 
+    LineChart,
81 
+    BreadCrumb
82 
+  },
83 
+  data() {
84 
+    return {
85 
+      activeName: "second",
86 
+      crumbs: [
87 
+        { path: false, name: "科室质控" },
88 
+        { path: false, name: "科室质控达标统计" },
89 
+        { path: false, name: "按项目分组" }
90 
+      ],
91 
+      options: [
92 
+        {
93 
+          value: "选项1",
94 
+          label: "黄金糕"
95 
+        },
96 
+        {
97 
+          value: "选项2",
98 
+          label: "双皮奶"
99 
+        },
100 
+        {
101 
+          value: "选项3",
102 
+          label: "蚵仔煎"
103 
+        },
104 
+        {
105 
+          value: "选项4",
106 
+          label: "龙须面"
107 
+        },
108 
+        {
109 
+          value: "选项5",
110 
+          label: "北京烤鸭"
111 
+        }
112 
+      ],
113 
+      value: "请选项",
114 
+      options1: [
115 
+        {
116 
+          value: "按季度对比统计",
117 
+          label: "按季度对比统计"
118 
+        },
119 
+        {
120 
+          value: "按月份对比统计",
121 
+          label: "按月份对比统计"
122 
+        }
123 
+      ],
124 
+      type: "按季度对比统计",
125 
+      chart: {
126 
+        title: {
127 
+          text: "ECharts 入门示例"
128 
+        },
129 
+        tooltip: {},
130 
+        legend: {
131 
+          data: ["次数"],
132 
+          left: 0
133 
+        },
134 
+        xAxis: {
135 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
136 
+        },
137 
+        yAxis: {
138 
+          axisLabel: {
139 
+            formatter: "{value} %"
140 
+          },
141 
+          show: false
142 
+        },
143 
+        series: [
144 
+          {
145 
+            name: "次数",
146 
+            type: "line",
147 
+            data: [
148 
+              "78.57",
149 
+              "50",
150 
+              "80",
151 
+              "93.33",
152 
+              "92.86",
153 
+              "100",
154 
+              "12",
155 
+              "77",
156 
+              "37"
157 
+            ],
158 
+            barWidth: 30,
159 
+            label: {
160 
+              normal: {
161 
+                show: true,
162 
+                position: "top",
163 
+                formatter: "{c}次"
164 
+              }
165 
+            },
166 
+            //配置样式
167 
+            itemStyle: {
168 
+              //通常情况下：
169 
+
170 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
171 
+              normal: {
172 
+                color: function(params) {
173 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
174 
+                  var colorList = [
175 
+                    ["#A9E0F3", "#9FBDFC"],
176 
+                    ["#A9E0F3", "#9FBDFC"],
177 
+                    ["#A9E0F3", "#9FBDFC"],
178 
+
179 
+                    ["#FFD7C0", "#FF9994"],
180 
+                    ["#FFD7C0", "#FF9994"],
181 
+                    ["#FFD7C0", "#FF9994"],
182 
+                    ["#D7C3FD", "#B3A8F7"],
183 
+                    ["#D7C3FD", "#B3A8F7"],
184 
+                    ["#D7C3FD", "#B3A8F7"]
185 
+                  ];
186 
+
187 
+                  var index = params.dataIndex;
188 
+                  if (params.dataIndex >= colorList.length) {
189 
+                    index = params.dataIndex % colorList.length;
190 
+                  }
191 
+
192 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
193 
+                    { offset: 0, color: colorList[index][0] },
194 
+                    // { offset: 0.5, color: colorList[index][1] },
195 
+                    { offset: 1, color: colorList[index][1] }
196 
+                  ]);
197 
+                },
198 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
199 
+              },
200 
+
201 
+              //鼠标悬停时：
202 
+              emphasis: {
203 
+                shadowBlur: 10,
204 
+                shadowOffsetX: 0,
205 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
206 
+              }
207 
+            }
208 
+          }
209 
+        ]
210 
+      }
211 
+    };
212 
+  },
213 
+  methods: {
214 
+    handleClick() {
215 
+      if (this.activeName == "first") {
216 
+        this.$router.push({ path: "/qcd/officesControlAnalysis/time" });
217 
+      }
218 
+    },
219 
+    chooseType(val) {
220 
+      console.log(val);
221 
+      this.type = val;
222 
+    }
223 
+  }
224 
+};
225 
+</script>
226 
+
227 
+<style lang="scss" scoped>
228 
+.newLi {
229 
+  li {
230 
+    background: #f5f5f6;
231 
+  }
232 
+}
233 
+.chartTitle {
234 
+  font-size: 16px;
235 
+  font-weight: bold;
236 
+  color: #000000;
237 
+}
238 
+.point {
239 
+  width: 13px;
240 
+  height: 13px;
241 
+  background: linear-gradient(
242 
+    0deg,
243 
+    rgba(169, 224, 243, 1),
244 
+    rgba(159, 189, 252, 1)
245 
+  );
246 
+  border-radius: 7px;
247 
+  margin-right: 8px;
248 
+}
249 
+.pointTitle {
250 
+  font-size: 13px;
251 
+}
252 
+.index {
253 
+  color: #a09ba3;
254 
+  font-size: 13px;
255 
+  margin-right: 36px;
256 
+  margin-bottom: 20px;
257 
+}
258 
+.newDisplay {
259 
+  flex-wrap: wrap;
260 
+}
261 
+</style>

+ 356 - 0
src/xt_pages/qcd/officesControlAnalysis/time.vue View File 

@@ -0,0 +1,356 @@
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 
+      <el-tabs v-model="activeName" @tab-click="handleClick">
8 
+        <el-tab-pane label="按时间分组" name="first"></el-tab-pane>
9 
+        <el-tab-pane label="按项目分组" name="second"></el-tab-pane>
10 
+      </el-tabs>
11 
+      <div class="cell clearfix">
12 
+        <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
13 
+          <el-option
14 
+            v-for="item in options"
15 
+            :key="item.value"
16 
+            :label="item.label"
17 
+            :value="item.value"
18 
+          ></el-option>
19 
+        </el-select>
20 
+        <el-select v-model="type" placeholder="请选择" @change="chooseType" style="margin-right:20px">
21 
+          <el-option
22 
+            v-for="item in options1"
23 
+            :key="item.value"
24 
+            :label="item.label"
25 
+            :value="item.value"
26 
+          ></el-option>
27 
+        </el-select>
28 
+        <div v-if="type == '自定义'">
29 
+          <label class="title">
30 
+            <span class="name">日期查询</span> :
31 
+          </label>
32 
+          <el-date-picker
33 
+            v-model="listQuery.start_time"
34 
+            prefix-icon="el-icon-date"
35 
+            @change="changeTime"
36 
+            :editable="false"
37 
+            style="width: 196px;"
38 
+            type="date"
39 
+            placeholder="选择日期时间"
40 
+            align="right"
41 
+            format="yyyy-MM-dd"
42 
+            value-format="yyyy-MM-dd"
43 
+          ></el-date-picker>
44 
+          <span class>-</span>
45 
+          <el-date-picker
46 
+            v-model="listQuery.end_time"
47 
+            prefix-icon="el-icon-date"
48 
+            @change="changeEndTime"
49 
+            :editable="false"
50 
+            style="width: 196px;"
51 
+            type="date"
52 
+            placeholder="选择日期时间"
53 
+            align="right"
54 
+            format="yyyy-MM-dd"
55 
+            value-format="yyyy-MM-dd"
56 
+          ></el-date-picker>
57 
+        </div>
58 
+      </div>
59 
+      <div class="cell clearfix">
60 
+        <div class="time newLi" v-if="type == '按季度对比统计'">
61 
+          <ul class>
62 
+            <li
63 
+              :class="item.state == quarterType ? 'active' : ''"
64 
+              @click="chooseQuarter(item.state)"
65 
+              v-for="item in quarter"
66 
+              :key="item.value"
67 
+            >{{ item.label }}</li>
68 
+          </ul>
69 
+        </div>
70 
+        <div class="time newLi" v-if="type == '按月份对比统计'">
71 
+          <ul class>
72 
+            <li
73 
+              :class="item.state == monthType ? 'active' : ''"
74 
+              @click="chooseMonth(item.state)"
75 
+              v-for="item in month"
76 
+              :key="item.value"
77 
+            >{{ item.label }}</li>
78 
+          </ul>
79 
+        </div>
80 
+      </div>
81 
+      <div class="cell clearfix">
82 
+        <p class="chartTitle">统计图</p>
83 
+      </div>
84 
+      <div>
85 
+        <line-chart :options="chart"></line-chart>
86 
+      </div>
87 
+      <div class="cell clearfix">
88 
+        <p class="point"></p>
89 
+        <p class="pointTitle">指标正常范围值</p>
90 
+      </div>
91 
+      <div class="cell clearfix newDisplay">
92 
+        <span class="index">钙(2.25-2.75)</span>
93 
+        <span class="index">钙(2.25-2.75)</span>
94 
+        <span class="index">钙(2.25-2.75)</span>
95 
+        <span class="index">钙(2.25-2.75)</span>
96 
+        <span class="index">钙(2.25-2.75)</span>
97 
+        <span class="index">钙(2.25-2.75)</span>
98 
+        <span class="index">钙(2.25-2.75)</span>
99 
+        <span class="index">钙(2.25-2.75)</span>
100 
+        <span class="index">钙(2.25-2.75)</span>
101 
+        <span class="index">钙(2.25-2.75)</span>
102 
+        <span class="index">钙(2.25-2.75)</span>
103 
+        <span class="index">钙(2.25-2.75)</span>
104 
+        <span class="index">钙(2.25-2.75)</span>
105 
+        <span class="index">钙(2.25-2.75)</span>
106 
+        <span class="index">钙(2.25-2.75)</span>
107 
+        <span class="index">钙(2.25-2.75)</span>
108 
+        <span class="index">钙(2.25-2.75)</span>
109 
+        <span class="index">钙(2.25-2.75)</span>
110 
+      </div>
111 
+    </div>
112 
+  </div>
113 
+</template>
114 
+
115 
+<script>
116 
+import echarts from "echarts";
117 
+import { GetOICData } from "@/api/qcd";
118 
+import LineChart from "../../qcd/components/LineChart";
119 
+import { uParseTime } from "@/utils/tools";
120 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
121 
+export default {
122 
+  components: {
123 
+    LineChart,
124 
+    BreadCrumb
125 
+  },
126 
+  data() {
127 
+    return {
128 
+      activeName: "first",
129 
+      crumbs: [
130 
+        { path: false, name: "科室质控" },
131 
+        { path: false, name: "科室质控达标统计" },
132 
+        { path: false, name: "按时间分组" }
133 
+      ],
134 
+      listQuery: {
135 
+        start_time: "",
136 
+        end_time: "",
137 
+        page: 1,
138 
+        limit: 10
139 
+      },
140 
+      options: [
141 
+        {
142 
+          value: "选项1",
143 
+          label: "黄金糕"
144 
+        },
145 
+        {
146 
+          value: "选项2",
147 
+          label: "双皮奶"
148 
+        },
149 
+        {
150 
+          value: "选项3",
151 
+          label: "蚵仔煎"
152 
+        },
153 
+        {
154 
+          value: "选项4",
155 
+          label: "龙须面"
156 
+        },
157 
+        {
158 
+          value: "选项5",
159 
+          label: "北京烤鸭"
160 
+        }
161 
+      ],
162 
+      value: "请选项",
163 
+      options1: [
164 
+        {
165 
+          value: "按季度对比统计",
166 
+          label: "按季度对比统计"
167 
+        },
168 
+        {
169 
+          value: "按月份对比统计",
170 
+          label: "按月份对比统计"
171 
+        },
172 
+        {
173 
+          value: "自定义",
174 
+          label: "自定义"
175 
+        }
176 
+      ],
177 
+      type: "按季度对比统计",
178 
+      quarter: [
179 
+        { value: 0, label: "第一季度", state: 0 },
180 
+        { value: 1, label: "第二季度", state: 1 },
181 
+        { value: 2, label: "第三季度", state: 2 },
182 
+        { value: 3, label: "第四季度", state: 3 }
183 
+      ],
184 
+      quarterType: 0,
185 
+      month: [
186 
+        { value: 0, label: "一月", state: 0 },
187 
+        { value: 1, label: "二月", state: 1 },
188 
+        { value: 2, label: "三月", state: 2 },
189 
+        { value: 3, label: "四月", state: 3 },
190 
+        { value: 4, label: "五月", state: 4 },
191 
+        { value: 5, label: "六月", state: 5 },
192 
+        { value: 6, label: "七月", state: 6 },
193 
+        { value: 7, label: "八月", state: 7 },
194 
+        { value: 8, label: "九月", state: 8 },
195 
+        { value: 9, label: "十月", state: 9 },
196 
+        { value: 10, label: "十一月", state: 10 },
197 
+        { value: 11, label: "十二月", state: 11 }
198 
+      ],
199 
+      monthType: 0,
200 
+      chart: {
201 
+        title: {
202 
+          text: "ECharts 入门示例"
203 
+        },
204 
+        tooltip: {},
205 
+        legend: {
206 
+          data: ["次数"],
207 
+          left: 0
208 
+        },
209 
+        xAxis: {
210 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
211 
+        },
212 
+        yAxis: {
213 
+          axisLabel: {
214 
+            formatter: "{value} %"
215 
+          },
216 
+          show: false
217 
+        },
218 
+        series: [
219 
+          {
220 
+            name: "次数",
221 
+            type: "bar",
222 
+            data: [
223 
+              "78.57",
224 
+              "50",
225 
+              "80",
226 
+              "93.33",
227 
+              "92.86",
228 
+              "100",
229 
+              "12",
230 
+              "77",
231 
+              "37"
232 
+            ],
233 
+            barWidth: 30,
234 
+            label: {
235 
+              normal: {
236 
+                show: true,
237 
+                position: "top",
238 
+                formatter: "{c}次"
239 
+              }
240 
+            },
241 
+            //配置样式
242 
+            itemStyle: {
243 
+              //通常情况下：
244 
+
245 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
246 
+              normal: {
247 
+                color: function(params) {
248 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
249 
+                  var colorList = [
250 
+                    ["#A9E0F3", "#9FBDFC"],
251 
+                    ["#A9E0F3", "#9FBDFC"],
252 
+                    ["#A9E0F3", "#9FBDFC"],
253 
+
254 
+                    ["#FFD7C0", "#FF9994"],
255 
+                    ["#FFD7C0", "#FF9994"],
256 
+                    ["#FFD7C0", "#FF9994"],
257 
+                    ["#D7C3FD", "#B3A8F7"],
258 
+                    ["#D7C3FD", "#B3A8F7"],
259 
+                    ["#D7C3FD", "#B3A8F7"]
260 
+                  ];
261 
+
262 
+                  var index = params.dataIndex;
263 
+                  if (params.dataIndex >= colorList.length) {
264 
+                    index = params.dataIndex % colorList.length;
265 
+                  }
266 
+
267 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
268 
+                    { offset: 0, color: colorList[index][0] },
269 
+                    // { offset: 0.5, color: colorList[index][1] },
270 
+                    { offset: 1, color: colorList[index][1] }
271 
+                  ]);
272 
+                },
273 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
274 
+              },
275 
+
276 
+              //鼠标悬停时：
277 
+              emphasis: {
278 
+                shadowBlur: 10,
279 
+                shadowOffsetX: 0,
280 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
281 
+              }
282 
+            }
283 
+          }
284 
+        ]
285 
+      }
286 
+    };
287 
+  },
288 
+  methods: {
289 
+    handleClick() {
290 
+      if (this.activeName == "second") {
291 
+        this.$router.push({ path: "/qcd/officesControlAnalysis/project" });
292 
+      }
293 
+    },
294 
+    changeTime() {},
295 
+    changeEndTime(val) {
296 
+      var time =
297 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
298 
+      if (time < 0) {
299 
+        this.$message.error("结束时间不能小于开始时间");
300 
+        this.listQuery.end_time = "";
301 
+      } else {
302 
+      }
303 
+    },
304 
+    selectLapseTo(state) {
305 
+      this.stateType = state;
306 
+      this.listQuery.state = state;
307 
+    },
308 
+    chooseType(val) {
309 
+      console.log(val);
310 
+      this.type = val;
311 
+    },
312 
+    chooseQuarter(quarter) {
313 
+      this.quarterType = quarter;
314 
+    },
315 
+    chooseMonth(month) {
316 
+      this.monthType = month;
317 
+    }
318 
+  }
319 
+};
320 
+</script>
321 
+
322 
+<style lang="scss" scoped>
323 
+.newLi {
324 
+  li {
325 
+    background: #f5f5f6;
326 
+  }
327 
+}
328 
+.chartTitle {
329 
+  font-size: 16px;
330 
+  font-weight: bold;
331 
+  color: #000000;
332 
+}
333 
+.point {
334 
+  width: 13px;
335 
+  height: 13px;
336 
+  background: linear-gradient(
337 
+    0deg,
338 
+    rgba(169, 224, 243, 1),
339 
+    rgba(159, 189, 252, 1)
340 
+  );
341 
+  border-radius: 7px;
342 
+  margin-right: 8px;
343 
+}
344 
+.pointTitle {
345 
+  font-size: 13px;
346 
+}
347 
+.index {
348 
+  color: #a09ba3;
349 
+  font-size: 13px;
350 
+  margin-right: 36px;
351 
+  margin-bottom: 20px;
352 
+}
353 
+.newDisplay {
354 
+  flex-wrap: wrap;
355 
+}
356 
+</style>

+ 348 - 0
src/xt_pages/qcd/patientComplianceDetails.vue View File 

@@ -0,0 +1,348 @@
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_patientComplianceDetails">
8 
+        <div class="cell clearfix" style="margin:0">
9 
+          <el-form :inline="true" :model="listQuery">
10 
+            <el-form-item label>
11 
+              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
12 
+              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
13 
+            </el-form-item>
14 
+          </el-form>
15 
+        </div>
16 
+        <el-container>
17 
+          <div style="width:150px">
18 
+            <div class="tableTitle">患者列表</div>
19 
+            <el-table :data="tableData" border style="width: 100%;" height="500">
20 
+              <el-table-column prop="date" label="日期" width="70"></el-table-column>
21 
+              <el-table-column prop="name" label="姓名" width="80"></el-table-column>
22 
+            </el-table>
23 
+          </div>
24 
+          <div class="containerRight" style="flex:1;overflow: hidden">
25 
+            <div class="cell clearfix">
26 
+              <label class="title" style="text-align:left">
27 
+                <span class="name">统计方式</span> :
28 
+              </label>
29 
+              <div class="time">
30 
+                <ul class>
31 
+                  <li
32 
+                    :class="item.state == monthType ? 'active' : ''"
33 
+                    @click="chooseMonth(item.state)"
34 
+                    v-for="item in month"
35 
+                    :key="item.value"
36 
+                  >{{ item.label }}</li>
37 
+                </ul>
38 
+              </div>
39 
+              <label class="title">
40 
+                <span class="name">日期查询</span> :
41 
+              </label>
42 
+              <el-date-picker
43 
+                v-model="listQuery.start_time"
44 
+                prefix-icon="el-icon-date"
45 
+                @change="changeTime"
46 
+                :editable="false"
47 
+                type="date"
48 
+                style="max-width:160px"
49 
+                placeholder="选择日期时间"
50 
+                align="right"
51 
+                format="yyyy-MM-dd"
52 
+                value-format="yyyy-MM-dd"
53 
+              ></el-date-picker>
54 
+              <span class>-</span>
55 
+              <el-date-picker
56 
+                v-model="listQuery.end_time"
57 
+                prefix-icon="el-icon-date"
58 
+                @change="changeEndTime"
59 
+                :editable="false"
60 
+                type="date"
61 
+                style="max-width:160px"
62 
+                placeholder="选择日期时间"
63 
+                align="right"
64 
+                format="yyyy-MM-dd"
65 
+                value-format="yyyy-MM-dd"
66 
+              ></el-date-picker>
67 
+            </div>
68 
+            <div class="tableTitle">指标监控</div>
69 
+            <div style="width:100%;overflow-x:auto">
70 
+              <div class="qualityBox">
71 
+                <div
72 
+                  class="qualityOne"
73 
+                  v-for="(item,index) in arr"
74 
+                  :key="index"
75 
+                  :class="quality == index ? 'active' : ''"
76 
+                  @click="clickQuality(index)"
77 
+                >
78 
+                  <p>{{ item }}</p>
79 
+                  <i class="iconfont icon-gantanhao gth" v-if="index % 2 == 0"></i>
80 
+                  <i class="iconfont icon-gou gou" v-else></i>
81 
+                </div>
82 
+              </div>
83 
+            </div>
84 
+            <div class="tableTitle">指标趋势</div>
85 
+            <div>
86 
+              <line-chart :options="chart"></line-chart>
87 
+            </div>
88 
+          </div>
89 
+        </el-container>
90 
+      </div>
91 
+    </div>
92 
+  </div>
93 
+</template>
94 
+
95 
+<script>
96 
+import echarts from "echarts";
97 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
98 
+import LineChart from "../qcd/components/LineChart";
99 
+export default {
100 
+  components: {
101 
+    LineChart,
102 
+    BreadCrumb
103 
+  },
104 
+  data() {
105 
+    return {
106 
+      crumbs: [
107 
+        { path: false, name: "科室质控" },
108 
+        { path: false, name: "患者达标详情" }
109 
+      ],
110 
+      tableData: [
111 
+        {
112 
+          date: "2016",
113 
+          name: "王小虎"
114 
+        },
115 
+        {
116 
+          date: "2016",
117 
+          name: "王小虎"
118 
+        },
119 
+        {
120 
+          date: "2016",
121 
+          name: "王小虎"
122 
+        },
123 
+        {
124 
+          date: "2016",
125 
+          name: "王小虎"
126 
+        },
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 
+      listQuery: {
161 
+        start_time: "",
162 
+        end_time: "",
163 
+        page: 1,
164 
+        limit: 10
165 
+      },
166 
+      month: [
167 
+        { value: 0, label: "本月", state: 0 },
168 
+        { value: 1, label: "近三个月", state: 1 },
169 
+        { value: 2, label: "近半年", state: 2 },
170 
+        { value: 3, label: "近一年", state: 3 }
171 
+      ],
172 
+      monthType: 0,
173 
+      arr: ["钙", "磷", "钙萨达撒所多", "磷", "钙", "磷", "钙", "磷"],
174 
+      quality: 0,
175 
+      chart: {
176 
+        title: {
177 
+          text: "ECharts 入门示例"
178 
+        },
179 
+        tooltip: {},
180 
+        legend: {
181 
+          data: ["次数"],
182 
+          left: 0
183 
+        },
184 
+        xAxis: {
185 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
186 
+        },
187 
+        yAxis: {
188 
+          axisLabel: {
189 
+            formatter: "{value} %"
190 
+          },
191 
+          show: false
192 
+        },
193 
+        series: [
194 
+          {
195 
+            name: "次数",
196 
+            type: "line",
197 
+            data: [
198 
+              "78.57",
199 
+              "50",
200 
+              "80",
201 
+              "93.33",
202 
+              "92.86",
203 
+              "100",
204 
+              "12",
205 
+              "77",
206 
+              "37"
207 
+            ],
208 
+            barWidth: 30,
209 
+            label: {
210 
+              normal: {
211 
+                show: true,
212 
+                position: "top",
213 
+                formatter: "{c}次"
214 
+              }
215 
+            },
216 
+            //配置样式
217 
+            itemStyle: {
218 
+              //通常情况下：
219 
+
220 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
221 
+              normal: {
222 
+                color: function(params) {
223 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
224 
+                  var colorList = [
225 
+                    ["#A9E0F3", "#9FBDFC"],
226 
+                    ["#A9E0F3", "#9FBDFC"],
227 
+                    ["#A9E0F3", "#9FBDFC"],
228 
+
229 
+                    ["#FFD7C0", "#FF9994"],
230 
+                    ["#FFD7C0", "#FF9994"],
231 
+                    ["#FFD7C0", "#FF9994"],
232 
+                    ["#D7C3FD", "#B3A8F7"],
233 
+                    ["#D7C3FD", "#B3A8F7"],
234 
+                    ["#D7C3FD", "#B3A8F7"]
235 
+                  ];
236 
+
237 
+                  var index = params.dataIndex;
238 
+                  if (params.dataIndex >= colorList.length) {
239 
+                    index = params.dataIndex % colorList.length;
240 
+                  }
241 
+
242 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
243 
+                    { offset: 0, color: colorList[index][0] },
244 
+                    // { offset: 0.5, color: colorList[index][1] },
245 
+                    { offset: 1, color: colorList[index][1] }
246 
+                  ]);
247 
+                },
248 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
249 
+              },
250 
+
251 
+              //鼠标悬停时：
252 
+              emphasis: {
253 
+                shadowBlur: 10,
254 
+                shadowOffsetX: 0,
255 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
256 
+              }
257 
+            }
258 
+          }
259 
+        ]
260 
+      }
261 
+    };
262 
+  },
263 
+  methods: {
264 
+    chooseMonth(month) {
265 
+      this.monthType = month;
266 
+    },
267 
+    clickQuality(index) {
268 
+      this.quality = index;
269 
+    }
270 
+  }
271 
+};
272 
+</script>
273 
+
274 
+<style lang="scss" scoped>
275 
+.containerRight {
276 
+  padding-left: 10px;
277 
+}
278 
+.tableTitle {
279 
+  font-size: 16px;
280 
+  color: #000;
281 
+  font-weight: bold;
282 
+  margin-bottom: 10px;
283 
+  margin-top: 8px;
284 
+}
285 
+.qualityBox {
286 
+  display: flex;
287 
+  flex-wrap: nowrap;
288 
+  min-width: 1800px;
289 
+  .qualityOne {
290 
+    width: 4.5rem;
291 
+    height: 4.5rem;
292 
+    border-radius: 0.3125rem;
293 
+    border: 1px solid rgba(229, 229, 229, 1);
294 
+    display: flex;
295 
+    align-items: center;
296 
+    flex-direction: column;
297 
+    margin-right: 0.875rem;
298 
+    cursor: pointer;
299 
+    //   justify-content: space-around;
300 
+    .gth {
301 
+      color: #ff974a;
302 
+      font-size: 1.25rem;
303 
+    }
304 
+    .gou {
305 
+      color: #5cd924;
306 
+      font-size: 1.25rem;
307 
+    }
308 
+    p {
309 
+      width: 100%;
310 
+      margin-top: 1.25rem;
311 
+      margin-bottom: 0.625rem;
312 
+      font-weight: bold;
313 
+      color: #666666;
314 
+      font-size: 0.875rem;
315 
+      text-align: center;
316 
+      white-space: nowrap;
317 
+      overflow: hidden;
318 
+      text-overflow: ellipsis;
319 
+    }
320 
+  }
321 
+  .active {
322 
+    background: #5b98ff;
323 
+    p {
324 
+      color: #fff;
325 
+    }
326 
+    .gth {
327 
+      color: #fff;
328 
+      font-size: 1.25rem;
329 
+    }
330 
+    .gou {
331 
+      color: #fff;
332 
+      font-size: 1.25rem;
333 
+    }
334 
+  }
335 
+}
336 
+</style>
337 
+
338 
+
339 
+<style lang="scss">
340 
+.page_patientComplianceDetails {
341 
+  .cell {
342 
+    text-align: center;
343 
+  }
344 
+  .el-form-item {
345 
+    margin-bottom: 0;
346 
+  }
347 
+}
348 
+</style>

+ 287 - 0
src/xt_pages/qcd/patientControlAnalysis.vue View File 

@@ -0,0 +1,287 @@
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_patientControlAnalysis">
8 
+        <div class="cell clearfix">
9 
+          <el-form :inline="true" :model="listQuery">
10 
+            <el-form-item label>
11 
+              <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width: 200px;"></el-input>
12 
+              <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
13 
+            </el-form-item>
14 
+          </el-form>
15 
+          <el-select v-model="value" placeholder="请选择" style="margin-right:20px;width:100px">
16 
+            <el-option
17 
+              v-for="item in options"
18 
+              :key="item.value"
19 
+              :label="item.label"
20 
+              :value="item.value"
21 
+            ></el-option>
22 
+          </el-select>
23 
+          <el-select v-model="value" placeholder="请选择" style="margin-right:20px;width:100px">
24 
+            <el-option
25 
+              v-for="item in options"
26 
+              :key="item.value"
27 
+              :label="item.label"
28 
+              :value="item.value"
29 
+            ></el-option>
30 
+          </el-select>
31 
+          <label class="title">
32 
+            <span class="name">日期查询</span> :
33 
+          </label>
34 
+          <el-date-picker
35 
+            v-model="listQuery.start_time"
36 
+            prefix-icon="el-icon-date"
37 
+            @change="changeTime"
38 
+            :editable="false"
39 
+            style="width: 196px;"
40 
+            type="date"
41 
+            placeholder="选择日期时间"
42 
+            align="right"
43 
+            format="yyyy-MM-dd"
44 
+            value-format="yyyy-MM-dd"
45 
+          ></el-date-picker>
46 
+          <span class>-</span>
47 
+          <el-date-picker
48 
+            v-model="listQuery.end_time"
49 
+            prefix-icon="el-icon-date"
50 
+            @change="changeEndTime"
51 
+            :editable="false"
52 
+            style="width: 196px;"
53 
+            type="date"
54 
+            placeholder="选择日期时间"
55 
+            align="right"
56 
+            format="yyyy-MM-dd"
57 
+            value-format="yyyy-MM-dd"
58 
+          ></el-date-picker>
59 
+        </div>
60 
+        <div class="cell clearfix">
61 
+          <p class="chartTitle">统计图</p>
62 
+        </div>
63 
+        <div>
64 
+          <line-chart :options="chart"></line-chart>
65 
+        </div>
66 
+        <div class="cell clearfix">
67 
+          <p class="chartTitle">统计表</p>
68 
+        </div>
69 
+        <div>
70 
+          <el-table :data="tableData" border style="width: 100%">
71 
+            <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
72 
+            <el-table-column prop="name" label="姓名" width="120"></el-table-column>
73 
+            <el-table-column prop="province" label="省份" width="120"></el-table-column>
74 
+            <el-table-column prop="city" label="市区" width="120"></el-table-column>
75 
+            <el-table-column prop="address" label="地址" width="300"></el-table-column>
76 
+            <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
77 
+            <el-table-column fixed="right" 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 
+
84 
+          <el-pagination
85 
+            align="right"
86 
+            @size-change="handleSizeChange"
87 
+            @current-change="handleCurrentChange"
88 
+            :current-page="listQuery.page"
89 
+            :page-sizes="[10, 20, 50, 100]"
90 
+            :page-size="10"
91 
+            background
92 
+            style="margin-top:20px;"
93 
+            layout="total, sizes, prev, pager, next, jumper"
94 
+            :total="total"
95 
+          ></el-pagination>
96 
+        </div>
97 
+      </div>
98 
+    </div>
99 
+  </div>
100 
+</template>
101 
+
102 
+<script>
103 
+import echarts from "echarts";
104 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
105 
+import LineChart from "../qcd/components/LineChart";
106 
+export default {
107 
+  components: {
108 
+    LineChart,
109 
+    BreadCrumb
110 
+  },
111 
+  data() {
112 
+    return {
113 
+      crumbs: [
114 
+        { path: false, name: "科室质控" },
115 
+        { path: false, name: "患者质控达标统计" }
116 
+      ],
117 
+      listQuery: {
118 
+        start_time: "",
119 
+        end_time: "",
120 
+        page: 1,
121 
+        limit: 10
122 
+      },
123 
+      options: [
124 
+        {
125 
+          value: "选项1",
126 
+          label: "黄金糕"
127 
+        },
128 
+        {
129 
+          value: "选项2",
130 
+          label: "双皮奶"
131 
+        },
132 
+        {
133 
+          value: "选项3",
134 
+          label: "蚵仔煎"
135 
+        },
136 
+        {
137 
+          value: "选项4",
138 
+          label: "龙须面"
139 
+        },
140 
+        {
141 
+          value: "选项5",
142 
+          label: "北京烤鸭"
143 
+        }
144 
+      ],
145 
+      value: "",
146 
+      chart: {
147 
+        title: {
148 
+          text: "ECharts 入门示例"
149 
+        },
150 
+        tooltip: {},
151 
+        legend: {
152 
+          data: ["次数"],
153 
+          left: 0
154 
+        },
155 
+        xAxis: {
156 
+          data: ["达标", "未达标"]
157 
+        },
158 
+        yAxis: {
159 
+          axisLabel: {
160 
+            formatter: "{value} %"
161 
+          },
162 
+          show: false
163 
+        },
164 
+        series: [
165 
+          {
166 
+            name: "次数",
167 
+            type: "bar",
168 
+            data: ["78.57", "50"],
169 
+            barWidth: 30,
170 
+            label: {
171 
+              normal: {
172 
+                show: true,
173 
+                position: "top",
174 
+                formatter: "{c}次"
175 
+              }
176 
+            },
177 
+            //配置样式
178 
+            itemStyle: {
179 
+              //通常情况下：
180 
+
181 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
182 
+              normal: {
183 
+                color: function(params) {
184 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
185 
+                  var colorList = [
186 
+                    ["#A9E0F3", "#9FBDFC"],
187 
+
188 
+                    ["#FFD7C0", "#FF9994"]
189 
+                  ];
190 
+
191 
+                  var index = params.dataIndex;
192 
+                  if (params.dataIndex >= colorList.length) {
193 
+                    index = params.dataIndex % colorList.length;
194 
+                  }
195 
+
196 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
197 
+                    { offset: 0, color: colorList[index][0] },
198 
+                    // { offset: 0.5, color: colorList[index][1] },
199 
+                    { offset: 1, color: colorList[index][1] }
200 
+                  ]);
201 
+                },
202 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
203 
+              },
204 
+
205 
+              //鼠标悬停时：
206 
+              emphasis: {
207 
+                shadowBlur: 10,
208 
+                shadowOffsetX: 0,
209 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
210 
+              }
211 
+            }
212 
+          }
213 
+        ]
214 
+      },
215 
+      tableData: [
216 
+        {
217 
+          date: "2016-05-02",
218 
+          name: "王小虎",
219 
+          province: "上海",
220 
+          city: "普陀区",
221 
+          address: "上海市普陀区金沙江路 1518 弄",
222 
+          zip: 200333
223 
+        },
224 
+        {
225 
+          date: "2016-05-04",
226 
+          name: "王小虎",
227 
+          province: "上海",
228 
+          city: "普陀区",
229 
+          address: "上海市普陀区金沙江路 1517 弄",
230 
+          zip: 200333
231 
+        },
232 
+        {
233 
+          date: "2016-05-01",
234 
+          name: "王小虎",
235 
+          province: "上海",
236 
+          city: "普陀区",
237 
+          address: "上海市普陀区金沙江路 1519 弄",
238 
+          zip: 200333
239 
+        },
240 
+        {
241 
+          date: "2016-05-03",
242 
+          name: "王小虎",
243 
+          province: "上海",
244 
+          city: "普陀区",
245 
+          address: "上海市普陀区金沙江路 1516 弄",
246 
+          zip: 200333
247 
+        }
248 
+      ]
249 
+    };
250 
+  },
251 
+  methods: {
252 
+    changeTime() {},
253 
+    changeEndTime(val) {
254 
+      var time =
255 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
256 
+      if (time < 0) {
257 
+        this.$message.error("结束时间不能小于开始时间");
258 
+        this.listQuery.end_time = "";
259 
+      } else {
260 
+      }
261 
+    },
262 
+    handleClick(row) {
263 
+      console.log(row);
264 
+      this.$router.push({ path: "/qcd/patientComplianceDetails" });
265 
+    }
266 
+  }
267 
+};
268 
+</script>
269 
+
270 
+<style lang="scss" scoped>
271 
+.page_patientControlAnalysis {
272 
+  .pointTitle {
273 
+    font-size: 13px;
274 
+  }
275 
+}
276 
+</style>
277 
+
278 
+<style lang="scss">
279 
+.page_patientControlAnalysis {
280 
+  .el-form-item {
281 
+    margin-bottom: 0;
282 
+  }
283 
+  .cell {
284 
+    text-align: center;
285 
+  }
286 
+}
287 
+</style>

+ 27 - 0
src/xt_pages/qcd/treatmentControlAnalysis.vue View File 

@@ -0,0 +1,27 @@
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"></div>
7 
+  </div>
8 
+</template>
9 
+
10 
+<script>
11 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
12 
+import LineChart from "../qcd/components/LineChart";
13 
+export default {
14 
+  components: {
15 
+    LineChart,
16 
+    BreadCrumb
17 
+  },
18 
+  data() {
19 
+    return {
20 
+      crumbs: [
21 
+        { path: false, name: "科室质控" },
22 
+        { path: false, name: "患者质控达标统计" }
23 
+      ]
24 
+    };
25 
+  }
26 
+};
27 
+</script>

+ 86 - 0
src/xt_pages/qcd/treatmentControlAnalysis/check.vue View File 

@@ -0,0 +1,86 @@
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_treatment">
8 
+        <el-tabs v-model="activeName" @tab-click="handleClick">
9 
+          <el-tab-pane label="患者透析次数统计" name="first"></el-tab-pane>
10 
+          <el-tab-pane label="患者检验检查统计" name="second"></el-tab-pane>
11 
+        </el-tabs>
12 
+        <div class="cell clearfix">
13 
+          <label class="title">
14 
+            <span class="name">转归状态</span> :
15 
+          </label>
16 
+          <div class="time">
17 
+            <ul class>
18 
+              <li
19 
+                :class="item.state == wayType ? 'active' : ''"
20 
+                @click="chooseWay(item.state)"
21 
+                v-for="item in way"
22 
+                :key="item.value"
23 
+              >{{ item.label }}</li>
24 
+            </ul>
25 
+          </div>
26 
+        </div>
27 
+        <div v-if="wayType == 0">
28 
+          <check-personal></check-personal>
29 
+        </div>
30 
+        <div v-if="wayType == 1">
31 
+          <check-all></check-all>
32 
+        </div>
33 
+      </div>
34 
+    </div>
35 
+  </div>
36 
+</template>
37 
+
38 
+<script>
39 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
40 
+import LineChart from "../../qcd/components/LineChart";
41 
+import CheckPersonal from "../treatmentControlAnalysis/components/CheckPersonal";
42 
+import CheckAll from "../treatmentControlAnalysis/components/CheckAll";
43 
+export default {
44 
+  components: {
45 
+    LineChart,
46 
+    BreadCrumb,
47 
+    CheckPersonal,
48 
+    CheckAll
49 
+  },
50 
+  data() {
51 
+    return {
52 
+      crumbs: [
53 
+        { path: false, name: "科室质控" },
54 
+        { path: false, name: "治疗信息统计" },
55 
+        { path: false, name: "患者透析次数统计" }
56 
+      ],
57 
+      activeName: "second",
58 
+      way: [
59 
+        { value: 0, label: "统计个人", state: 0 },
60 
+        { value: 1, label: "统计全部", state: 1 }
61 
+      ],
62 
+      wayType: 0
63 
+    };
64 
+  },
65 
+  methods: {
66 
+    handleClick() {
67 
+      if (this.activeName == "first") {
68 
+        this.$router.push({ path: "/qcd/treatmentControlAnalysis/time" });
69 
+      }
70 
+    },
71 
+    chooseWay(way) {
72 
+      this.wayType = way;
73 
+    }
74 
+  }
75 
+};
76 
+</script>
77 
+
78 
+
79 
+
80 
+<style lang="scss">
81 
+.page_treatment {
82 
+  .el-form-item {
83 
+    margin-bottom: 0;
84 
+  }
85 
+}
86 
+</style>

+ 293 - 0
src/xt_pages/qcd/treatmentControlAnalysis/components/CheckAll.vue View File 

@@ -0,0 +1,293 @@
1 
+<template>
2 
+  <div class="page_checkAll">
3 
+    <div class="cell clearfix">
4 
+      <el-form :inline="true" :model="listQuery">
5 
+        <el-form-item label>
6 
+          <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
7 
+          <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
8 
+        </el-form-item>
9 
+      </el-form>
10 
+      <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
11 
+        <el-option
12 
+          v-for="item in options"
13 
+          :key="item.value"
14 
+          :label="item.label"
15 
+          :value="item.value"
16 
+        ></el-option>
17 
+      </el-select>
18 
+      <el-select
19 
+        v-model="value"
20 
+        placeholder="请选择"
21 
+        @change="chooseType"
22 
+        style="width:120px;margin-right:20px"
23 
+      >
24 
+        <el-option
25 
+          v-for="item in options"
26 
+          :key="item.value"
27 
+          :label="item.label"
28 
+          :value="item.value"
29 
+        ></el-option>
30 
+      </el-select>
31 
+      <label class="title">
32 
+        <span class="name">日期查询</span> :
33 
+      </label>
34 
+      <el-date-picker
35 
+        v-model="listQuery.start_time"
36 
+        prefix-icon="el-icon-date"
37 
+        @change="changeTime"
38 
+        :editable="false"
39 
+        style="width: 196px;"
40 
+        type="date"
41 
+        placeholder="选择日期时间"
42 
+        align="right"
43 
+        format="yyyy-MM-dd"
44 
+        value-format="yyyy-MM-dd"
45 
+      ></el-date-picker>
46 
+      <span class>-</span>
47 
+      <el-date-picker
48 
+        v-model="listQuery.end_time"
49 
+        prefix-icon="el-icon-date"
50 
+        @change="changeEndTime"
51 
+        :editable="false"
52 
+        style="width: 196px;"
53 
+        type="date"
54 
+        placeholder="选择日期时间"
55 
+        align="right"
56 
+        format="yyyy-MM-dd"
57 
+        value-format="yyyy-MM-dd"
58 
+      ></el-date-picker>
59 
+    </div>
60 
+    <el-container>
61 
+      <div style="width:150px">
62 
+        <div class="tableTitle">患者列表</div>
63 
+        <el-table :data="tableData" border style="width: 100%;" height="500">
64 
+          <el-table-column prop="date" label="日期" width="70"></el-table-column>
65 
+          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
66 
+        </el-table>
67 
+      </div>
68 
+      <div style="padding-left:10px;flex:1">
69 
+        <div class="tableTitle">统计表</div>
70 
+        <el-table :data="tableData1" style="width: 100%" border>
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>
78 
+
79 
+        <el-pagination
80 
+          align="right"
81 
+          @size-change="handleSizeChange"
82 
+          @current-change="handleCurrentChange"
83 
+          :current-page="listQuery.page"
84 
+          :page-sizes="[10, 20, 50, 100]"
85 
+          :page-size="10"
86 
+          background
87 
+          style="margin-top:20px;"
88 
+          layout="total, sizes, prev, pager, next, jumper"
89 
+          :total="total"
90 
+        ></el-pagination>
91 
+      </div>
92 
+    </el-container>
93 
+  </div>
94 
+</template>
95 
+
96 
+
97 
+<script>
98 
+export default {
99 
+  data() {
100 
+    return {
101 
+      listQuery: {
102 
+        start_time: "",
103 
+        end_time: "",
104 
+        page: 1,
105 
+        limit: 10
106 
+      },
107 
+      options: [
108 
+        {
109 
+          value: "选项1",
110 
+          label: "黄金糕"
111 
+        },
112 
+        {
113 
+          value: "选项2",
114 
+          label: "双皮奶"
115 
+        },
116 
+        {
117 
+          value: "选项3",
118 
+          label: "蚵仔煎"
119 
+        },
120 
+        {
121 
+          value: "选项4",
122 
+          label: "龙须面"
123 
+        },
124 
+        {
125 
+          value: "选项5",
126 
+          label: "北京烤鸭"
127 
+        }
128 
+      ],
129 
+      value: "请选项",
130 
+      tableData: [
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 
+          date: "2016",
177 
+          name: "王小虎"
178 
+        }
179 
+      ],
180 
+      tableData1: [
181 
+        {
182 
+          date: "2016-05-03",
183 
+          name: "王小虎",
184 
+          province: "上海",
185 
+          city: "普陀区",
186 
+          address: "上海市普陀区金沙江路 1518 弄",
187 
+          zip: 200333
188 
+        },
189 
+        {
190 
+          date: "2016-05-02",
191 
+          name: "王小虎",
192 
+          province: "上海",
193 
+          city: "普陀区",
194 
+          address: "上海市普陀区金沙江路 1518 弄",
195 
+          zip: 200333
196 
+        },
197 
+        {
198 
+          date: "2016-05-04",
199 
+          name: "王小虎",
200 
+          province: "上海",
201 
+          city: "普陀区",
202 
+          address: "上海市普陀区金沙江路 1518 弄",
203 
+          zip: 200333
204 
+        },
205 
+        {
206 
+          date: "2016-05-01",
207 
+          name: "王小虎",
208 
+          province: "上海",
209 
+          city: "普陀区",
210 
+          address: "上海市普陀区金沙江路 1518 弄",
211 
+          zip: 200333
212 
+        },
213 
+        {
214 
+          date: "2016-05-08",
215 
+          name: "王小虎",
216 
+          province: "上海",
217 
+          city: "普陀区",
218 
+          address: "上海市普陀区金沙江路 1518 弄",
219 
+          zip: 200333
220 
+        },
221 
+        {
222 
+          date: "2016-05-06",
223 
+          name: "王小虎",
224 
+          province: "上海",
225 
+          city: "普陀区",
226 
+          address: "上海市普陀区金沙江路 1518 弄",
227 
+          zip: 200333
228 
+        },
229 
+        {
230 
+          date: "2016-05-07",
231 
+          name: "王小虎",
232 
+          province: "上海",
233 
+          city: "普陀区",
234 
+          address: "上海市普陀区金沙江路 1518 弄",
235 
+          zip: 200333
236 
+        },
237 
+        {
238 
+          date: "2016-05-08",
239 
+          name: "王小虎",
240 
+          province: "上海",
241 
+          city: "普陀区",
242 
+          address: "上海市普陀区金沙江路 1518 弄",
243 
+          zip: 200333
244 
+        },
245 
+        {
246 
+          date: "2016-05-06",
247 
+          name: "王小虎",
248 
+          province: "上海",
249 
+          city: "普陀区",
250 
+          address: "上海市普陀区金沙江路 1518 弄",
251 
+          zip: 200333
252 
+        },
253 
+        {
254 
+          date: "2016-05-07",
255 
+          name: "王小虎",
256 
+          province: "上海",
257 
+          city: "普陀区",
258 
+          address: "上海市普陀区金沙江路 1518 弄",
259 
+          zip: 200333
260 
+        }
261 
+      ]
262 
+    };
263 
+  },
264 
+  methods: {
265 
+    changeTime() {},
266 
+    changeEndTime(val) {
267 
+      var time =
268 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
269 
+      if (time < 0) {
270 
+        this.$message.error("结束时间不能小于开始时间");
271 
+        this.listQuery.end_time = "";
272 
+      } else {
273 
+      }
274 
+    }
275 
+  }
276 
+};
277 
+</script>
278 
+
279 
+<style lang="scss" scoped>
280 
+.tableTitle {
281 
+  font-size: 16px;
282 
+  color: #000;
283 
+  font-weight: bold;
284 
+  margin-bottom: 10px;
285 
+}
286 
+</style>
287 
+<style lang="scss">
288 
+.page_checkAll {
289 
+  .cell {
290 
+    text-align: center;
291 
+  }
292 
+}
293 
+</style>

+ 284 - 0
src/xt_pages/qcd/treatmentControlAnalysis/components/CheckPersonal.vue View File 

@@ -0,0 +1,284 @@
1 
+<template>
2 
+  <div class="page_checkPersonal">
3 
+    <div class="cell clearfix">
4 
+      <el-form :inline="true" :model="listQuery">
5 
+        <el-form-item label>
6 
+          <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
7 
+          <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
8 
+        </el-form-item>
9 
+      </el-form>
10 
+      <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
11 
+        <el-option
12 
+          v-for="item in options"
13 
+          :key="item.value"
14 
+          :label="item.label"
15 
+          :value="item.value"
16 
+        ></el-option>
17 
+      </el-select>
18 
+      <el-select
19 
+        v-model="value"
20 
+        placeholder="请选择"
21 
+        @change="chooseType"
22 
+        style="width:120px;margin-right:20px"
23 
+      >
24 
+        <el-option
25 
+          v-for="item in options"
26 
+          :key="item.value"
27 
+          :label="item.label"
28 
+          :value="item.value"
29 
+        ></el-option>
30 
+      </el-select>
31 
+      <label class="title">
32 
+        <span class="name">日期查询</span> :
33 
+      </label>
34 
+      <el-date-picker
35 
+        v-model="listQuery.start_time"
36 
+        prefix-icon="el-icon-date"
37 
+        @change="changeTime"
38 
+        :editable="false"
39 
+        style="width: 196px;"
40 
+        type="date"
41 
+        placeholder="选择日期时间"
42 
+        align="right"
43 
+        format="yyyy-MM-dd"
44 
+        value-format="yyyy-MM-dd"
45 
+      ></el-date-picker>
46 
+      <span class>-</span>
47 
+      <el-date-picker
48 
+        v-model="listQuery.end_time"
49 
+        prefix-icon="el-icon-date"
50 
+        @change="changeEndTime"
51 
+        :editable="false"
52 
+        style="width: 196px;"
53 
+        type="date"
54 
+        placeholder="选择日期时间"
55 
+        align="right"
56 
+        format="yyyy-MM-dd"
57 
+        value-format="yyyy-MM-dd"
58 
+      ></el-date-picker>
59 
+    </div>
60 
+    <el-container>
61 
+      <div style="width:150px">
62 
+        <div class="tableTitle">患者列表</div>
63 
+        <el-table :data="tableData" border style="width: 100%;" height="500">
64 
+          <el-table-column prop="date" label="日期" width="70"></el-table-column>
65 
+          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
66 
+        </el-table>
67 
+      </div>
68 
+      <div style="padding-left:10px;flex:1">
69 
+        <div class="tableTitle">统计图</div>
70 
+        <div>
71 
+          <line-chart :options="chart"></line-chart>
72 
+        </div>
73 
+      </div>
74 
+    </el-container>
75 
+  </div>
76 
+</template>
77 
+
78 
+
79 
+<script>
80 
+import echarts from "echarts";
81 
+import LineChart from "../../components/LineChart";
82 
+export default {
83 
+  components: {
84 
+    LineChart
85 
+  },
86 
+  data() {
87 
+    return {
88 
+      listQuery: {
89 
+        start_time: "",
90 
+        end_time: "",
91 
+        page: 1,
92 
+        limit: 10
93 
+      },
94 
+      options: [
95 
+        {
96 
+          value: "选项1",
97 
+          label: "黄金糕"
98 
+        },
99 
+        {
100 
+          value: "选项2",
101 
+          label: "双皮奶"
102 
+        },
103 
+        {
104 
+          value: "选项3",
105 
+          label: "蚵仔煎"
106 
+        },
107 
+        {
108 
+          value: "选项4",
109 
+          label: "龙须面"
110 
+        },
111 
+        {
112 
+          value: "选项5",
113 
+          label: "北京烤鸭"
114 
+        }
115 
+      ],
116 
+      value: "请选项",
117 
+      tableData: [
118 
+        {
119 
+          date: "2016",
120 
+          name: "王小虎"
121 
+        },
122 
+        {
123 
+          date: "2016",
124 
+          name: "王小虎"
125 
+        },
126 
+        {
127 
+          date: "2016",
128 
+          name: "王小虎"
129 
+        },
130 
+        {
131 
+          date: "2016",
132 
+          name: "王小虎"
133 
+        },
134 
+        {
135 
+          date: "2016",
136 
+          name: "王小虎"
137 
+        },
138 
+        {
139 
+          date: "2016",
140 
+          name: "王小虎"
141 
+        },
142 
+        {
143 
+          date: "2016",
144 
+          name: "王小虎"
145 
+        },
146 
+        {
147 
+          date: "2016",
148 
+          name: "王小虎"
149 
+        },
150 
+        {
151 
+          date: "2016",
152 
+          name: "王小虎"
153 
+        },
154 
+        {
155 
+          date: "2016",
156 
+          name: "王小虎"
157 
+        },
158 
+        {
159 
+          date: "2016",
160 
+          name: "王小虎"
161 
+        },
162 
+        {
163 
+          date: "2016",
164 
+          name: "王小虎"
165 
+        }
166 
+      ],
167 
+      chart: {
168 
+        title: {
169 
+          text: "ECharts 入门示例"
170 
+        },
171 
+        tooltip: {},
172 
+        legend: {
173 
+          data: ["次数"],
174 
+          left: 0
175 
+        },
176 
+        xAxis: {
177 
+          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
178 
+        },
179 
+        yAxis: {
180 
+          axisLabel: {
181 
+            formatter: "{value} %"
182 
+          },
183 
+          show: false
184 
+        },
185 
+        series: [
186 
+          {
187 
+            name: "次数",
188 
+            type: "bar",
189 
+            data: [
190 
+              "78.57",
191 
+              "50",
192 
+              "80",
193 
+              "93.33",
194 
+              "92.86",
195 
+              "100",
196 
+              "12",
197 
+              "77",
198 
+              "37"
199 
+            ],
200 
+            barWidth: 30,
201 
+            label: {
202 
+              normal: {
203 
+                show: true,
204 
+                position: "top",
205 
+                formatter: "{c}次"
206 
+              }
207 
+            },
208 
+            //配置样式
209 
+            itemStyle: {
210 
+              //通常情况下：
211 
+
212 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
213 
+              normal: {
214 
+                color: function(params) {
215 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
216 
+                  var colorList = [
217 
+                    ["#A9E0F3", "#9FBDFC"],
218 
+                    ["#A9E0F3", "#9FBDFC"],
219 
+                    ["#A9E0F3", "#9FBDFC"],
220 
+
221 
+                    ["#FFD7C0", "#FF9994"],
222 
+                    ["#FFD7C0", "#FF9994"],
223 
+                    ["#FFD7C0", "#FF9994"],
224 
+                    ["#D7C3FD", "#B3A8F7"],
225 
+                    ["#D7C3FD", "#B3A8F7"],
226 
+                    ["#D7C3FD", "#B3A8F7"]
227 
+                  ];
228 
+
229 
+                  var index = params.dataIndex;
230 
+                  if (params.dataIndex >= colorList.length) {
231 
+                    index = params.dataIndex % colorList.length;
232 
+                  }
233 
+
234 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
235 
+                    { offset: 0, color: colorList[index][0] },
236 
+                    // { offset: 0.5, color: colorList[index][1] },
237 
+                    { offset: 1, color: colorList[index][1] }
238 
+                  ]);
239 
+                },
240 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
241 
+              },
242 
+
243 
+              //鼠标悬停时：
244 
+              emphasis: {
245 
+                shadowBlur: 10,
246 
+                shadowOffsetX: 0,
247 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
248 
+              }
249 
+            }
250 
+          }
251 
+        ]
252 
+      }
253 
+    };
254 
+  },
255 
+  methods: {
256 
+    changeTime() {},
257 
+    changeEndTime(val) {
258 
+      var time =
259 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
260 
+      if (time < 0) {
261 
+        this.$message.error("结束时间不能小于开始时间");
262 
+        this.listQuery.end_time = "";
263 
+      } else {
264 
+      }
265 
+    }
266 
+  }
267 
+};
268 
+</script>
269 
+
270 
+<style lang="scss" scoped>
271 
+.tableTitle {
272 
+  font-size: 16px;
273 
+  color: #000;
274 
+  font-weight: bold;
275 
+  margin-bottom: 10px;
276 
+}
277 
+</style>
278 
+<style lang="scss">
279 
+.page_checkPersonal {
280 
+  .cell {
281 
+    text-align: center;
282 
+  }
283 
+}
284 
+</style>

+ 306 - 0
src/xt_pages/qcd/treatmentControlAnalysis/components/TimeAll.vue View File 

@@ -0,0 +1,306 @@
1 
+<template>
2 
+  <div class="page_timeAll">
3 
+    <div class="cell clearfix">
4 
+      <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
5 
+        <el-option
6 
+          v-for="item in options"
7 
+          :key="item.value"
8 
+          :label="item.label"
9 
+          :value="item.value"
10 
+        ></el-option>
11 
+      </el-select>
12 
+      <el-select
13 
+        v-model="value"
14 
+        placeholder="请选择"
15 
+        @change="chooseType"
16 
+        style="width:120px;margin-right:20px"
17 
+      >
18 
+        <el-option
19 
+          v-for="item in options"
20 
+          :key="item.value"
21 
+          :label="item.label"
22 
+          :value="item.value"
23 
+        ></el-option>
24 
+      </el-select>
25 
+      <label class="title">
26 
+        <span class="name">日期查询</span> :
27 
+      </label>
28 
+      <el-date-picker
29 
+        v-model="listQuery.start_time"
30 
+        prefix-icon="el-icon-date"
31 
+        @change="changeTime"
32 
+        :editable="false"
33 
+        style="width: 196px;"
34 
+        type="date"
35 
+        placeholder="选择日期时间"
36 
+        align="right"
37 
+        format="yyyy-MM-dd"
38 
+        value-format="yyyy-MM-dd"
39 
+      ></el-date-picker>
40 
+      <span class>-</span>
41 
+      <el-date-picker
42 
+        v-model="listQuery.end_time"
43 
+        prefix-icon="el-icon-date"
44 
+        @change="changeEndTime"
45 
+        :editable="false"
46 
+        style="width: 196px;"
47 
+        type="date"
48 
+        placeholder="选择日期时间"
49 
+        align="right"
50 
+        format="yyyy-MM-dd"
51 
+        value-format="yyyy-MM-dd"
52 
+      ></el-date-picker>
53 
+    </div>
54 
+    <div class="tableTitle">统计图</div>
55 
+    <div>
56 
+      <line-chart :options="chart"></line-chart>
57 
+    </div>
58 
+    <div class="tableTitle">统计表</div>
59 
+    <div>
60 
+      <el-table :data="tableData" style="width: 100%" border>
61 
+        <el-table-column fixed prop="date" label="日期"></el-table-column>
62 
+        <el-table-column prop="name" label="姓名"></el-table-column>
63 
+        <el-table-column prop="province" label="省份"></el-table-column>
64 
+        <el-table-column prop="city" label="市区"></el-table-column>
65 
+        <el-table-column prop="address" label="地址"></el-table-column>
66 
+        <el-table-column prop="zip" label="邮编"></el-table-column>
67 
+      </el-table>
68 
+
69 
+      <el-pagination
70 
+        align="right"
71 
+        @size-change="handleSizeChange"
72 
+        @current-change="handleCurrentChange"
73 
+        :current-page="listQuery.page"
74 
+        :page-sizes="[10, 20, 50, 100]"
75 
+        :page-size="10"
76 
+        background
77 
+        style="margin-top:20px;"
78 
+        layout="total, sizes, prev, pager, next, jumper"
79 
+        :total="total"
80 
+      ></el-pagination>
81 
+    </div>
82 
+  </div>
83 
+</template>
84 
+
85 
+<script>
86 
+import echarts from "echarts";
87 
+import LineChart from "../../components/LineChart";
88 
+export default {
89 
+  components: {
90 
+    LineChart
91 
+  },
92 
+  data() {
93 
+    return {
94 
+      listQuery: {
95 
+        start_time: "",
96 
+        end_time: "",
97 
+        page: 1,
98 
+        limit: 10
99 
+      },
100 
+      options: [
101 
+        {
102 
+          value: "选项1",
103 
+          label: "黄金糕"
104 
+        },
105 
+        {
106 
+          value: "选项2",
107 
+          label: "双皮奶"
108 
+        },
109 
+        {
110 
+          value: "选项3",
111 
+          label: "蚵仔煎"
112 
+        },
113 
+        {
114 
+          value: "选项4",
115 
+          label: "龙须面"
116 
+        },
117 
+        {
118 
+          value: "选项5",
119 
+          label: "北京烤鸭"
120 
+        }
121 
+      ],
122 
+      value: "请选项",
123 
+      tableData: [
124 
+        {
125 
+          date: "2016-05-03",
126 
+          name: "王小虎",
127 
+          province: "上海",
128 
+          city: "普陀区",
129 
+          address: "上海市普陀区金沙江路 1518 弄",
130 
+          zip: 200333
131 
+        },
132 
+        {
133 
+          date: "2016-05-02",
134 
+          name: "王小虎",
135 
+          province: "上海",
136 
+          city: "普陀区",
137 
+          address: "上海市普陀区金沙江路 1518 弄",
138 
+          zip: 200333
139 
+        },
140 
+        {
141 
+          date: "2016-05-04",
142 
+          name: "王小虎",
143 
+          province: "上海",
144 
+          city: "普陀区",
145 
+          address: "上海市普陀区金沙江路 1518 弄",
146 
+          zip: 200333
147 
+        },
148 
+        {
149 
+          date: "2016-05-01",
150 
+          name: "王小虎",
151 
+          province: "上海",
152 
+          city: "普陀区",
153 
+          address: "上海市普陀区金沙江路 1518 弄",
154 
+          zip: 200333
155 
+        },
156 
+        {
157 
+          date: "2016-05-08",
158 
+          name: "王小虎",
159 
+          province: "上海",
160 
+          city: "普陀区",
161 
+          address: "上海市普陀区金沙江路 1518 弄",
162 
+          zip: 200333
163 
+        },
164 
+        {
165 
+          date: "2016-05-06",
166 
+          name: "王小虎",
167 
+          province: "上海",
168 
+          city: "普陀区",
169 
+          address: "上海市普陀区金沙江路 1518 弄",
170 
+          zip: 200333
171 
+        },
172 
+        {
173 
+          date: "2016-05-07",
174 
+          name: "王小虎",
175 
+          province: "上海",
176 
+          city: "普陀区",
177 
+          address: "上海市普陀区金沙江路 1518 弄",
178 
+          zip: 200333
179 
+        },
180 
+        {
181 
+          date: "2016-05-08",
182 
+          name: "王小虎",
183 
+          province: "上海",
184 
+          city: "普陀区",
185 
+          address: "上海市普陀区金沙江路 1518 弄",
186 
+          zip: 200333
187 
+        },
188 
+        {
189 
+          date: "2016-05-06",
190 
+          name: "王小虎",
191 
+          province: "上海",
192 
+          city: "普陀区",
193 
+          address: "上海市普陀区金沙江路 1518 弄",
194 
+          zip: 200333
195 
+        },
196 
+        {
197 
+          date: "2016-05-07",
198 
+          name: "王小虎",
199 
+          province: "上海",
200 
+          city: "普陀区",
201 
+          address: "上海市普陀区金沙江路 1518 弄",
202 
+          zip: 200333
203 
+        }
204 
+      ],
205 
+      chart: {
206 
+        title: {
207 
+          text: "ECharts 入门示例"
208 
+        },
209 
+        tooltip: {},
210 
+        legend: {
211 
+          data: ["次数"],
212 
+          left: 0
213 
+        },
214 
+        xAxis: {
215 
+          data: ["达标", "未达标"]
216 
+        },
217 
+        yAxis: {
218 
+          axisLabel: {
219 
+            formatter: "{value} %"
220 
+          },
221 
+          show: false
222 
+        },
223 
+        series: [
224 
+          {
225 
+            name: "次数",
226 
+            type: "bar",
227 
+            data: ["78.57", "50"],
228 
+            barWidth: 30,
229 
+            label: {
230 
+              normal: {
231 
+                show: true,
232 
+                position: "top",
233 
+                formatter: "{c}次"
234 
+              }
235 
+            },
236 
+            //配置样式
237 
+            itemStyle: {
238 
+              //通常情况下：
239 
+
240 
+              //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
241 
+              normal: {
242 
+                color: function(params) {
243 
+                  //我这边就两个柱子，大体就两个柱子颜色渐变，所以数组只有两个值，多个颜色就多个值
244 
+                  var colorList = [
245 
+                    ["#A9E0F3", "#9FBDFC"],
246 
+
247 
+                    ["#FFD7C0", "#FF9994"]
248 
+                  ];
249 
+
250 
+                  var index = params.dataIndex;
251 
+                  if (params.dataIndex >= colorList.length) {
252 
+                    index = params.dataIndex % colorList.length;
253 
+                  }
254 
+
255 
+                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
256 
+                    { offset: 0, color: colorList[index][0] },
257 
+                    // { offset: 0.5, color: colorList[index][1] },
258 
+                    { offset: 1, color: colorList[index][1] }
259 
+                  ]);
260 
+                },
261 
+                barBorderRadius: [5, 5, 0, 0] //柱状角成椭圆形
262 
+              },
263 
+
264 
+              //鼠标悬停时：
265 
+              emphasis: {
266 
+                shadowBlur: 10,
267 
+                shadowOffsetX: 0,
268 
+                shadowColor: "rgba(0, 0, 0, 0.5)"
269 
+              }
270 
+            }
271 
+          }
272 
+        ]
273 
+      }
274 
+    };
275 
+  },
276 
+  methods: {
277 
+    changeTime() {},
278 
+    changeEndTime(val) {
279 
+      var time =
280 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
281 
+      if (time < 0) {
282 
+        this.$message.error("结束时间不能小于开始时间");
283 
+        this.listQuery.end_time = "";
284 
+      } else {
285 
+      }
286 
+    }
287 
+  }
288 
+};
289 
+</script>
290 
+
291 
+<style lang="scss" scoped>
292 
+.tableTitle {
293 
+  font-size: 16px;
294 
+  color: #000;
295 
+  font-weight: bold;
296 
+  margin-bottom: 10px;
297 
+}
298 
+</style>
299 
+
300 
+<style lang="scss">
301 
+.page_timeAll {
302 
+  .cell {
303 
+    text-align: center;
304 
+  }
305 
+}
306 
+</style>

+ 293 - 0
src/xt_pages/qcd/treatmentControlAnalysis/components/TimePersonal.vue View File 

@@ -0,0 +1,293 @@
1 
+<template>
2 
+  <div class="page_timePersonal">
3 
+    <div class="cell clearfix">
4 
+      <el-form :inline="true" :model="listQuery">
5 
+        <el-form-item label>
6 
+          <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
7 
+          <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
8 
+        </el-form-item>
9 
+      </el-form>
10 
+      <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
11 
+        <el-option
12 
+          v-for="item in options"
13 
+          :key="item.value"
14 
+          :label="item.label"
15 
+          :value="item.value"
16 
+        ></el-option>
17 
+      </el-select>
18 
+      <el-select
19 
+        v-model="value"
20 
+        placeholder="请选择"
21 
+        @change="chooseType"
22 
+        style="width:120px;margin-right:20px"
23 
+      >
24 
+        <el-option
25 
+          v-for="item in options"
26 
+          :key="item.value"
27 
+          :label="item.label"
28 
+          :value="item.value"
29 
+        ></el-option>
30 
+      </el-select>
31 
+      <label class="title">
32 
+        <span class="name">日期查询</span> :
33 
+      </label>
34 
+      <el-date-picker
35 
+        v-model="listQuery.start_time"
36 
+        prefix-icon="el-icon-date"
37 
+        @change="changeTime"
38 
+        :editable="false"
39 
+        style="width: 196px;"
40 
+        type="date"
41 
+        placeholder="选择日期时间"
42 
+        align="right"
43 
+        format="yyyy-MM-dd"
44 
+        value-format="yyyy-MM-dd"
45 
+      ></el-date-picker>
46 
+      <span class>-</span>
47 
+      <el-date-picker
48 
+        v-model="listQuery.end_time"
49 
+        prefix-icon="el-icon-date"
50 
+        @change="changeEndTime"
51 
+        :editable="false"
52 
+        style="width: 196px;"
53 
+        type="date"
54 
+        placeholder="选择日期时间"
55 
+        align="right"
56 
+        format="yyyy-MM-dd"
57 
+        value-format="yyyy-MM-dd"
58 
+      ></el-date-picker>
59 
+    </div>
60 
+    <el-container>
61 
+      <div style="width:150px">
62 
+        <div class="tableTitle">患者列表</div>
63 
+        <el-table :data="tableData" border style="width: 100%;" height="500">
64 
+          <el-table-column prop="date" label="日期" width="70"></el-table-column>
65 
+          <el-table-column prop="name" label="姓名" width="80"></el-table-column>
66 
+        </el-table>
67 
+      </div>
68 
+      <div style="padding-left:10px;flex:1">
69 
+        <div class="tableTitle">统计表</div>
70 
+        <el-table :data="tableData1" style="width: 100%" border>
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>
78 
+
79 
+        <el-pagination
80 
+          align="right"
81 
+          @size-change="handleSizeChange"
82 
+          @current-change="handleCurrentChange"
83 
+          :current-page="listQuery.page"
84 
+          :page-sizes="[10, 20, 50, 100]"
85 
+          :page-size="10"
86 
+          background
87 
+          style="margin-top:20px;"
88 
+          layout="total, sizes, prev, pager, next, jumper"
89 
+          :total="total"
90 
+        ></el-pagination>
91 
+      </div>
92 
+    </el-container>
93 
+  </div>
94 
+</template>
95 
+
96 
+
97 
+<script>
98 
+export default {
99 
+  data() {
100 
+    return {
101 
+      listQuery: {
102 
+        start_time: "",
103 
+        end_time: "",
104 
+        page: 1,
105 
+        limit: 10
106 
+      },
107 
+      options: [
108 
+        {
109 
+          value: "选项1",
110 
+          label: "黄金糕"
111 
+        },
112 
+        {
113 
+          value: "选项2",
114 
+          label: "双皮奶"
115 
+        },
116 
+        {
117 
+          value: "选项3",
118 
+          label: "蚵仔煎"
119 
+        },
120 
+        {
121 
+          value: "选项4",
122 
+          label: "龙须面"
123 
+        },
124 
+        {
125 
+          value: "选项5",
126 
+          label: "北京烤鸭"
127 
+        }
128 
+      ],
129 
+      value: "请选项",
130 
+      tableData: [
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 
+          date: "2016",
177 
+          name: "王小虎"
178 
+        }
179 
+      ],
180 
+      tableData1: [
181 
+        {
182 
+          date: "2016-05-03",
183 
+          name: "王小虎",
184 
+          province: "上海",
185 
+          city: "普陀区",
186 
+          address: "上海市普陀区金沙江路 1518 弄",
187 
+          zip: 200333
188 
+        },
189 
+        {
190 
+          date: "2016-05-02",
191 
+          name: "王小虎",
192 
+          province: "上海",
193 
+          city: "普陀区",
194 
+          address: "上海市普陀区金沙江路 1518 弄",
195 
+          zip: 200333
196 
+        },
197 
+        {
198 
+          date: "2016-05-04",
199 
+          name: "王小虎",
200 
+          province: "上海",
201 
+          city: "普陀区",
202 
+          address: "上海市普陀区金沙江路 1518 弄",
203 
+          zip: 200333
204 
+        },
205 
+        {
206 
+          date: "2016-05-01",
207 
+          name: "王小虎",
208 
+          province: "上海",
209 
+          city: "普陀区",
210 
+          address: "上海市普陀区金沙江路 1518 弄",
211 
+          zip: 200333
212 
+        },
213 
+        {
214 
+          date: "2016-05-08",
215 
+          name: "王小虎",
216 
+          province: "上海",
217 
+          city: "普陀区",
218 
+          address: "上海市普陀区金沙江路 1518 弄",
219 
+          zip: 200333
220 
+        },
221 
+        {
222 
+          date: "2016-05-06",
223 
+          name: "王小虎",
224 
+          province: "上海",
225 
+          city: "普陀区",
226 
+          address: "上海市普陀区金沙江路 1518 弄",
227 
+          zip: 200333
228 
+        },
229 
+        {
230 
+          date: "2016-05-07",
231 
+          name: "王小虎",
232 
+          province: "上海",
233 
+          city: "普陀区",
234 
+          address: "上海市普陀区金沙江路 1518 弄",
235 
+          zip: 200333
236 
+        },
237 
+        {
238 
+          date: "2016-05-08",
239 
+          name: "王小虎",
240 
+          province: "上海",
241 
+          city: "普陀区",
242 
+          address: "上海市普陀区金沙江路 1518 弄",
243 
+          zip: 200333
244 
+        },
245 
+        {
246 
+          date: "2016-05-06",
247 
+          name: "王小虎",
248 
+          province: "上海",
249 
+          city: "普陀区",
250 
+          address: "上海市普陀区金沙江路 1518 弄",
251 
+          zip: 200333
252 
+        },
253 
+        {
254 
+          date: "2016-05-07",
255 
+          name: "王小虎",
256 
+          province: "上海",
257 
+          city: "普陀区",
258 
+          address: "上海市普陀区金沙江路 1518 弄",
259 
+          zip: 200333
260 
+        }
261 
+      ]
262 
+    };
263 
+  },
264 
+  methods: {
265 
+    changeTime() {},
266 
+    changeEndTime(val) {
267 
+      var time =
268 
+        this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
269 
+      if (time < 0) {
270 
+        this.$message.error("结束时间不能小于开始时间");
271 
+        this.listQuery.end_time = "";
272 
+      } else {
273 
+      }
274 
+    }
275 
+  }
276 
+};
277 
+</script>
278 
+
279 
+<style lang="scss" scoped>
280 
+.tableTitle {
281 
+  font-size: 16px;
282 
+  color: #000;
283 
+  font-weight: bold;
284 
+  margin-bottom: 10px;
285 
+}
286 
+</style>
287 
+<style lang="scss">
288 
+.page_timePersonal {
289 
+  .cell {
290 
+    text-align: center;
291 
+  }
292 
+}
293 
+</style>

+ 86 - 0
src/xt_pages/qcd/treatmentControlAnalysis/time.vue View File 

@@ -0,0 +1,86 @@
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_treatment">
8 
+        <el-tabs v-model="activeName" @tab-click="handleClick">
9 
+          <el-tab-pane label="患者透析次数统计" name="first"></el-tab-pane>
10 
+          <el-tab-pane label="患者检验检查统计" name="second"></el-tab-pane>
11 
+        </el-tabs>
12 
+        <div class="cell clearfix">
13 
+          <label class="title">
14 
+            <span class="name">转归状态</span> :
15 
+          </label>
16 
+          <div class="time">
17 
+            <ul class>
18 
+              <li
19 
+                :class="item.state == wayType ? 'active' : ''"
20 
+                @click="chooseWay(item.state)"
21 
+                v-for="item in way"
22 
+                :key="item.value"
23 
+              >{{ item.label }}</li>
24 
+            </ul>
25 
+          </div>
26 
+        </div>
27 
+        <div v-if="wayType == 0">
28 
+          <time-personal></time-personal>
29 
+        </div>
30 
+        <div v-if="wayType == 1">
31 
+          <time-all></time-all>
32 
+        </div>
33 
+      </div>
34 
+    </div>
35 
+  </div>
36 
+</template>
37 
+
38 
+<script>
39 
+import BreadCrumb from "@/xt_pages/components/bread-crumb";
40 
+import LineChart from "../../qcd/components/LineChart";
41 
+import TimePersonal from "../treatmentControlAnalysis/components/TimePersonal";
42 
+import TimeAll from "../treatmentControlAnalysis/components/TimeAll";
43 
+export default {
44 
+  components: {
45 
+    LineChart,
46 
+    BreadCrumb,
47 
+    TimePersonal,
48 
+    TimeAll
49 
+  },
50 
+  data() {
51 
+    return {
52 
+      crumbs: [
53 
+        { path: false, name: "科室质控" },
54 
+        { path: false, name: "治疗信息统计" },
55 
+        { path: false, name: "患者透析次数统计" }
56 
+      ],
57 
+      activeName: "first",
58 
+      way: [
59 
+        { value: 0, label: "统计个人", state: 0 },
60 
+        { value: 1, label: "统计全部", state: 1 }
61 
+      ],
62 
+      wayType: 0
63 
+    };
64 
+  },
65 
+  methods: {
66 
+    handleClick() {
67 
+      if (this.activeName == "second") {
68 
+        this.$router.push({ path: "/qcd/treatmentControlAnalysis/check" });
69 
+      }
70 
+    },
71 
+    chooseWay(way) {
72 
+      this.wayType = way;
73 
+    }
74 
+  }
75 
+};
76 
+</script>
77 
+
78 
+
79 
+
80 
+<style lang="scss">
81 
+.page_treatment {
82 
+  .el-form-item {
83 
+    margin-bottom: 0;
84 
+  }
85 
+}
86 
+</style>

+ 329 - 0
src/xt_pages/qcd/workAnalysis/doctor.vue View File 

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

+ 322 - 0
src/xt_pages/qcd/workAnalysis/nurse.vue View File 

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