Merge branch 'feature/恭城' of…

Merge branch 'feature/恭城' of https://gitlab.suvalue.com/ninglupeng/vue-composition-api into feature/恭城

# Conflicts:
#	src/views/outHistorygrouping.vue

package-lock.json

@@ -14,6 +14,8 @@
                 "element-ui": "^2.15.6",
                 "jquery": "^3.6.0",
                 "js-cookie": "^3.0.1",
+                "lodash": "^4.17.21",
+                "sortablejs": "^1.15.2",
                 "vue": "^2.6.11"
             },
             "devDependencies": {
@@ -8790,9 +8792,8 @@
         },
         "node_modules/lodash": {
             "version": "4.17.21",
-            "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
@@ -12424,6 +12425,11 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/sortablejs": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz",
+            "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA=="
+        },
         "node_modules/source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -22405,9 +22411,8 @@
         },
         "lodash": {
             "version": "4.17.21",
-            "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "lodash.debounce": {
             "version": "4.0.8",
@@ -25474,6 +25479,11 @@
                 "is-plain-obj": "^1.0.0"
             }
         },
+        "sortablejs": {
+            "version": "1.15.2",
+            "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.2.tgz",
+            "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA=="
+        },
         "source-list-map": {
             "version": "2.0.1",
             "resolved": "https://registry.npmmirror.com/source-list-map/-/source-list-map-2.0.1.tgz",

package.json

@@ -14,6 +14,8 @@
         "element-ui": "^2.15.6",
         "jquery": "^3.6.0",
         "js-cookie": "^3.0.1",
+        "lodash": "^4.17.21",
+        "sortablejs": "^1.15.2",
         "vue": "^2.6.11"
     },
     "devDependencies": {

src/assets/scss/app.scss

+/* 全局公共的css */
+:root {
+    --white: #ffffff;
+}
+
+/* color + 颜色 */
+/* 以下的颜色统一采取数字+大写 */
+.color-000 {
+    color: #000;
+}
+
+
+.color-66F {
+    color: #66FFFF;
+}
+
+.color-F54 {
+    color: #F54336;
+}
+
+.color-70C {
+    color: #70CBFF;
+}
+
+.color-2D3 {
+    color: #2d3139;
+}
+
+.color-333 {
+    color: #333333;
+}
+
+.color-C1C {
+    color: #c1cbdc;
+}
+
+.color-5A5 {
+    color: #5a5d61;
+}
+
+.color-696 {
+    color: #696a6b;
+}
+
+.color-C0C {
+    color: #c0c3c8;
+}
+
+.color-4CC {
+    color: #4cc6cb;
+}
+
+.color-457 {
+    color: #457cd9;
+}
+
+.color-6C7 {
+    color: #6c717b;
+}
+
+.color-383 {
+    color: #383b40;
+}
+
+.color-FFF {
+    color: #ffffff;
+}
+
+.color-FF5 {
+    color: #ff5252;
+}
+
+.color-5E6 {
+    color: #5e6166;
+}
+
+.color-C7C {
+    color: #c7cedb;
+}
+
+.color-2D3 {
+    color: #2d3139;
+}
+
+.color-E55 {
+    color: #e55050;
+}
+
+.color-FE5 {
+    color: #fe5858;
+}
+
+.color-F04 {
+    color: #f04e4e;
+}
+
+.color-AAA {
+    color: #aaadb1;
+}
+
+.color-8F9 {
+    color: #8f9aae;
+}
+
+.color-6A9 {
+    color: #6a93df;
+}
+
+.color-7F7 {
+    color: #7f7f7f;
+}
+
+.color-909 {
+    color: #909598;
+}
+
+.color-68A {
+    color: #68af19;
+}
+
+.color-EC9 {
+    color: #ec9500;
+}
+
+.color-FAA {
+    color: #faad14;
+}
+
+.color-FF0 {
+    color: #ff0000;
+}
+
+.color-7F8 {
+    color: #7f858f;
+}
+
+.color-005 {
+    color: #005fa2;
+}
+
+.color-A1A {
+    color: #a1a5ab;
+}
+
+.color-FF4 {
+    color: #ff4a40;
+}
+
+.color-F8A {
+    color: #f8a41e;
+}
+
+.color-8F9 {
+    color: #8f9aae;
+}
+
+.color-498 {
+    color: #498aa4;
+}
+
+.color-969 {
+    color: #969799;
+}
+
+.color-4E9 {
+    color: #4e98ff;
+}
+
+.color-F23 {
+    color: #f23f36;
+}
+
+.color-027 {
+    color: #0279ff;
+}
+
+.color-245 {
+    color: #245ba9;
+}
+
+.color-F85 {
+    color: #f85353;
+}
+
+.color-262 {
+    color: #262626;
+}
+
+.color-B2B {
+    color: #b2b2b2;
+}
+
+.color-F59 {
+    color: #f59d30;
+}
+
+.color-585 {
+    color: #585858;
+}
+
+.color-BDB {
+    color: #bdbdbd;
+}
+
+.color-FF9 {
+    color: #ff9c00;
+}
+
+.color-1CA {
+    color: #1ca9d5;
+}
+
+.color-666 {
+    color: #666;
+}
+
+.color-999 {
+    color: #999999;
+}
+
+.color-464 {
+    color: #464a53;
+}
+
+.color-B69 {
+    color: #b692ee;
+}
+
+.color-5BD {
+    color: #5bd1d4;
+}
+
+.color-69D {
+    color: #69d69c;
+}
+
+.color-F8B {
+    color: #f8b851;
+}
+
+.color-F48 {
+    color: #f48f46;
+}
+
+/* line + 行高 */
+.line-16 {
+    line-height: 16px;
+}
+
+.line-18 {
+    line-height: 18px;
+}
+
+.line-20 {
+    line-height: 20px;
+}
+
+.line-25 {
+    line-height: 25px;
+}
+
+.line-30 {
+    line-height: 30px;
+}
+
+.line-35 {
+    line-height: 35px;
+}
+
+.line-40 {
+    line-height: 40px;
+}
+
+.line-45 {
+    line-height: 45px;
+}
+
+.line-50 {
+    line-height: 50px;
+}
+
+.line-55 {
+    line-height: 55px;
+}
+
+/* 渐变背景  */
+/* linear-gradient + 颜色 */
+.linear-gradient-F0A {
+    background: linear-gradient(349deg, #f0af47 0%, #ffc568 100%);
+}
+
+/* 纯色背景 bg + 颜色 */
+/* 不推荐写background 会覆盖其他的属性 */
+.bg-68A {
+    background-color: #68af19;
+}
+
+.bg-F2F {
+    background-color: #f2fafd;
+}
+
+.bg-F9F {
+    background: #f9fdff;
+}
+
+.bg-EDF {
+    background-color: #edf2fa;
+}
+
+.bg-F6F {
+    background-color: #f6f8fc;
+}
+
+.bg-FFF {
+    background-color: #fff;
+}
+
+.bg-E3E {
+    background-color: #e3edff;
+}
+
+.bg-5E9 {
+    background-color: #5e9aff;
+}
+
+.bg-FBF {
+    background-color: #fbfbfb;
+}
+
+.bg-ECF {
+    background-color: #ecf0f6;
+}
+
+.bg-22d {
+    background-color: #22d016;
+}
+
+.bg-457 {
+    background-color: #457cd9;
+}
+
+.bg-F9F {
+    background-color: #f9fbfe;
+}
+
+.bg-F8F {
+    background-color: #f8f8f8;
+}
+
+.bg-F04 {
+    background-color: #f04e4e;
+}
+
+.bg-B69 {
+    background-color: #b692ee;
+}
+
+.bg-5BD {
+    background-color: #5bd1d4;
+}
+
+.bg-69D {
+    background-color: #69d69c;
+}
+
+.bg-F8B {
+    background-color: #f8b851;
+}
+
+.bg-F48 {
+    background-color: #f48f46;
+}
+
+.bg-769 {
+    background-color: #769aff;
+}
+
+.bg-246 {
+    background-color: #f2f4f6;
+}
+
+.bg-none {
+    background-color: transparent;
+}
+
+/* 字体 */
+.font-12 {
+    font-size: 12px;
+}
+
+.font-14 {
+    font-size: 14px;
+}
+
+.font-16 {
+    font-size: 16px;
+}
+
+.font-18 {
+    font-size: 18px;
+}
+
+.font-20 {
+    font-size: 20px;
+}
+
+.font-22 {
+    font-size: 22px;
+}
+
+.font-24 {
+    font-size: 24px;
+}
+
+.font-26 {
+    font-size: 26px;
+}
+
+.font-28 {
+    font-size: 28px;
+}
+
+.font-30 {
+    font-size: 30px;
+}
+
+.font-32 {
+    font-size: 32px;
+}
+
+.font-34 {
+    font-size: 34px;
+}
+
+.font-36 {
+    font-size: 36px;
+}
+
+.font-38 {
+    font-size: 38px;
+}
+
+.font-40 {
+    font-size: 40px;
+}
+
+.font-42 {
+    font-size: 42px;
+}
+
+.weight-100 {
+    font-weight: 100;
+}
+
+.weight-400 {
+    font-weight: 400;
+}
+
+.weight-500 {
+    font-weight: 500;
+}
+
+.weight-600 {
+    font-weight: 600;
+}
+
+.weight-700 {
+    font-weight: 700;
+}
+
+/* .pad + 上下 + 左右的 边距规定  */
+/* 只有一个数字 则是上下左右相同 */
+/* 建议在使用的时候来完善这里 这是一个颗粒性的问题 */
+
+/* 上下边距为0 左右边距增加 */
+.pad-0-5 {
+    padding: 0 5px;
+}
+
+.pad-0-10 {
+    padding: 0 10px;
+}
+
+.pad-0-15 {
+    padding: 0 15px;
+}
+
+.pad-0-20 {
+    padding: 0 20px;
+}
+
+.pad-0-30 {
+    padding: 0 30px;
+}
+
+/* 上下边距为5 左右边距增加 */
+.pad-5-0 {
+    padding: 5px 0;
+}
+
+.pad-5 {
+    padding: 5px;
+}
+
+.pad-5-10 {
+    padding: 5px 10px;
+}
+
+.pad-5-15 {
+    padding: 5px 15px;
+}
+
+.pad-5-20 {
+    padding: 5px 20px;
+}
+
+/* 上下边距为10 左右边距增加 */
+.pad-10-0 {
+    padding: 10px 0;
+}
+
+.pad-10-5 {
+    padding: 10px 5px;
+}
+
+.pad-10 {
+    padding: 10px;
+}
+
+.pad-10-15 {
+    padding: 10px 15px;
+}
+
+.pad-10-20 {
+    padding: 10px 20px;
+}
+
+/* 上下边距为15 左右边距增加 */
+.pad-15-0 {
+    padding: 15px 0;
+}
+
+.pad-15-5 {
+    padding: 15px 5px;
+}
+
+.pad-15-10 {
+    padding: 15px 10px;
+}
+
+.pad-15 {
+    padding: 15px;
+}
+
+.pad-15-20 {
+    padding: 15px 20px;
+}
+
+/* 上下边距为20 左右边距增加 */
+.pad-20-0 {
+    padding: 20px 0;
+}
+
+.pad-20-5 {
+    padding: 20px 5px;
+}
+
+.pad-20-10 {
+    padding: 20px 10px;
+}
+
+.pad-20-15 {
+    padding: 20px 15px;
+}
+
+.pad-20-20 {
+    padding: 20px;
+}
+
+/* 上下边距为25 左右边距增加  */
+.pad-20 {
+    padding: 20px;
+}
+
+.pad-25 {
+    padding: 25px;
+}
+
+/* 上下边距为30 左右边距增加  */
+.pad-30 {
+    padding: 30px;
+}
+
+.pad-40 {
+    padding: 40px;
+}
+
+/* 单方向上 */
+/* 上 */
+.pad-top-5 {
+    padding-top: 5px;
+}
+
+.pad-top-10 {
+    padding-top: 10px;
+}
+
+.pad-top-15 {
+    padding-top: 15px;
+}
+
+.pad-top-20 {
+    padding-top: 20px;
+}
+
+.pad-top-25 {
+    padding-top: 25px;
+}
+
+.pad-top-30 {
+    padding-top: 30px;
+}
+
+.pad-top-40 {
+    padding-top: 40px;
+}
+
+/* 左 */
+.pad-left-5 {
+    padding-left: 5px;
+}
+
+.pad-left-10 {
+    padding-left: 10px;
+}
+
+.pad-left-15 {
+    padding-left: 15px;
+}
+
+.pad-left-20 {
+    padding-left: 20px;
+}
+
+.pad-left-25 {
+    padding-left: 25px;
+}
+
+.pad-left-30 {
+    padding-left: 30px;
+}
+
+.pad-left-40 {
+    padding-left: 40px;
+}
+
+/* 下 */
+.pad-bottom-5 {
+    padding-bottom: 5px;
+}
+
+.pad-bottom-10 {
+    padding-bottom: 10px;
+}
+
+.pad-bottom-15 {
+    padding-bottom: 15px;
+}
+
+.pad-bottom-20 {
+    padding-bottom: 20px;
+}
+
+.pad-bottom-25 {
+    padding-bottom: 25px;
+}
+
+.pad-bottom-30 {
+    padding-bottom: 30px;
+}
+
+.pad-bottom-40 {
+    padding-bottom: 40px;
+}
+
+/* 右 */
+.pad-right-5 {
+    padding-right: 5px;
+}
+
+.pad-right-10 {
+    padding-right: 10px;
+}
+
+.pad-right-15 {
+    padding-right: 15px;
+}
+
+.pad-right-20 {
+    padding-right: 20px;
+}
+
+.pad-right-25 {
+    padding-right: 25px;
+}
+
+.pad-right-30 {
+    padding-right: 30px;
+}
+
+.pad-right-40 {
+    padding-right: 40px;
+}
+
+/* mar和pad大致相同 多了auto */
+.mar-0 {
+    margin: 0;
+}
+
+.mar-0-auto {
+    margin: 0 auto;
+}
+
+.mar-0-5 {
+    margin: 0 5px;
+}
+
+.mar-0-10 {
+    margin: 0 10px;
+}
+
+.mar-0-15 {
+    margin: 0 15px;
+}
+
+.mar-0-20 {
+    margin: 0 20px;
+}
+
+.mar-0-25 {
+    margin: 0 25px;
+}
+
+.mar-0-30 {
+    margin: 0 30px;
+}
+
+.mar-0-35 {
+    margin: 0 35px;
+}
+
+.mar-0-40 {
+    margin: 0 40px;
+}
+
+.mar-5-auto {
+    margin: 5px auto;
+}
+
+.mar-5-0 {
+    margin: 5px 0;
+}
+
+.mar-5 {
+    margin: 5px;
+}
+
+.mar-5-10 {
+    margin: 5px 10px;
+}
+
+.mar-5-15 {
+    margin: 5px 15px;
+}
+
+.mar-5-20 {
+    margin: 5px 20px;
+}
+
+.mar-10-auto {
+    margin: 10px auto;
+}
+
+.mar-10-0 {
+    margin: 10px 0;
+}
+
+.mar-10-5 {
+    margin: 10px 5px;
+}
+
+.mar-10 {
+    margin: 10px;
+}
+
+.mar-10-15 {
+    margin: 10px 15px;
+}
+
+.mar-10-20 {
+    margin: 10px 20px;
+}
+
+.mar-10-30 {
+    margin: 10px 30px;
+}
+
+.mar-15-auto {
+    margin: 15px auto;
+}
+
+.mar-15-0 {
+    margin: 15px 0;
+}
+
+.mar-15-5 {
+    margin: 15px 5px;
+}
+
+.mar-15-10 {
+    margin: 15px 10px;
+}
+
+.mar-15 {
+    margin: 15px;
+}
+
+.mar-15-20 {
+    margin: 15px 20px;
+}
+
+.mar-20-auto {
+    margin: 20px auto;
+}
+
+.mar-20-0 {
+    margin: 20px 0;
+}
+
+.mar-20-5 {
+    margin: 20px 5px;
+}
+
+.mar-20-10 {
+    margin: 20px 10px;
+}
+
+.mar-20-15 {
+    margin: 20px 15px;
+}
+
+.mar-20 {
+    margin: 20px;
+}
+
+.mar-30 {
+    margin: 30px;
+}
+
+.mar-30-0 {
+    margin: 30px 0;
+}
+
+/* 上 */
+.mar-top-auto {
+    margin-top: auto;
+}
+
+.mar-top-5 {
+    margin-top: 5px;
+}
+
+.mar-top-10 {
+    margin-top: 10px;
+}
+
+.mar-top-15 {
+    margin-top: 15px;
+}
+
+.mar-top-20 {
+    margin-top: 20px;
+}
+
+.mar-top-25 {
+    margin-top: 25px;
+}
+
+.mar-top-30 {
+    margin-top: 30px;
+}
+
+.mar-top-40 {
+    margin-top: 40px;
+}
+
+/* 左 */
+.mar-left-auto {
+    margin-left: auto;
+}
+
+.mar-left-5 {
+    margin-left: 5px;
+}
+
+.mar-left-8 {
+    margin-left: 8px;
+}
+
+.mar-left-10 {
+    margin-left: 10px;
+}
+
+.mar-left-15 {
+    margin-left: 15px;
+}
+
+.mar-left-20 {
+    margin-left: 20px;
+}
+
+.mar-left-25 {
+    margin-left: 25px;
+}
+
+.mar-left-30 {
+    margin-left: 30px;
+}
+
+.mar-left-35 {
+    margin-left: 35px;
+}
+
+.mar-left-40 {
+    margin-left: 40px;
+}
+
+.mar-left-45 {
+    margin-left: 45px;
+}
+
+.mar-left-50 {
+    margin-left: 50px;
+}
+
+/* 右 */
+.mar-right-0 {
+    margin-right: auto;
+}
+
+.mar-right-5 {
+    margin-right: 5px;
+}
+
+.mar-right-10 {
+    margin-right: 10px;
+}
+
+.mar-right-15 {
+    margin-right: 15px;
+}
+
+.mar-right-20 {
+    margin-right: 20px;
+}
+
+.mar-right-25 {
+    margin-right: 25px;
+}
+
+.mar-right-30 {
+    margin-right: 30px;
+}
+
+.mar-right-40 {
+    margin-right: 40px;
+}
+
+.mar-right-45 {
+    margin-right: 45px;
+}
+
+.mar-right-60 {
+    margin-right: 60px;
+}
+
+.mar-right-100 {
+    margin-right: 100px;
+}
+
+/* 下 */
+.mar-bottom-auto {
+    margin-bottom: auto;
+}
+
+.mar-bottom-4 {
+    margin-bottom: 4px;
+}
+
+.mar-bottom-10 {
+    margin-bottom: 10px;
+}
+
+.mar-bottom-15 {
+    margin-bottom: 15px;
+}
+
+.mar-bottom-20 {
+    margin-bottom: 20px;
+}
+
+.mar-bottom-25 {
+    margin-bottom: 25px;
+}
+
+.mar-bottom-30 {
+    margin-bottom: 30px;
+}
+
+.mar-bottom-40 {
+    margin-bottom: 40px;
+}
+
+.mar-bottom-45 {
+    margin-bottom: 45px;
+}
+
+/* flex-主轴-测轴 */
+.flex {
+    display: flex;
+}
+
+/* 主轴 end */
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.flex-end-center {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+/* 主轴 between */
+.flex-between {
+    display: flex;
+    justify-content: space-between;
+}
+
+.flex-between-center {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.flex-between-start {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+}
+
+.flex-around-center {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+/* 主轴 center */
+.flex-center {
+    display: flex;
+    justify-content: center;
+}
+
+.flex-center-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.flex-center-end {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+}
+
+/* 主轴 start  */
+.flex-start {
+    display: flex;
+    justify-content: flex-start;
+}
+
+.flex-start-center {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.flex-start-end {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+
+/* 换行 */
+.wrap {
+    flex-wrap: wrap;
+}
+
+.column {
+    flex-direction: column;
+}
+
+.flex-1 {
+    flex: 1;
+}
+
+.grow {
+    flex-grow: 1;
+}
+
+.shrink {
+    flex-shrink: 0;
+}
+
+.self-start {
+    align-self: flex-start;
+}
+
+.self-center {
+    align-self: center;
+}
+
+.self-end {
+    align-self: end;
+}
+
+.block {
+    display: block;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-left {
+    text-align: left;
+}
+
+.text-right {
+    text-align: right;
+}
+
+/* radius-50-p  -p表示百分比 没有-p表示固定尺寸 */
+.radius-3 {
+    border-radius: 3px;
+}
+
+.radius-4 {
+    border-radius: 4px;
+}
+
+.radius-100 {
+    border-radius: 100px;
+}
+
+.radius-50-p {
+    border-radius: 50%;
+}
+
+/* 定位 */
+.relative {
+    position: relative;
+}
+
+/* r20 l20 表示左右 t20 b20 表示上下 */
+.absolute-r20-b20 {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+
+.absolute-l30-t30 {
+    position: absolute;
+    top: 30px;
+    left: 30px;
+}
+
+/* 单方向 */
+.absolute-center-left {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.absolute-center-top {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+/* 绝对定位居中 */
+.absolute-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+/* 遮罩 */
+.mask-fixed {
+    z-index: 5;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.mask-absolute {
+    z-index: 5;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* 单行文本 */
+.one-txt-cut {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.ect-1 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    text-overflow: ellipsis;
+}
+
+.ect-2 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+}
+
+.ect-3 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+}
+
+.sizing {
+    box-sizing: border-box;
+}
+
+.sizing-w {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.sizing-h {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.sizing-w-h {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+/* border + 方向 + 颜色  */
+/* 方向没有则是四个方向 */
+.border-1 {
+    border: 1px solid;
+}
+
+.border-top-1 {
+    border-top: 1px solid;
+}
+
+.border-left-1 {
+    border-left: 1px solid;
+}
+
+.border-right-1 {
+    border-right: 1px solid;
+}
+
+.border-bottom-1 {
+    border-bottom: 1px solid;
+}
+
+.border-2 {
+    border: 2px;
+}
+
+.border-3 {
+    border: 3px;
+}
+
+.border-E2E {
+    border-color: #e2e5e9;
+}
+
+.border-D8D {
+    border-color: #d8dce6;
+}
+
+.border-457 {
+    border-color: #457cd9;
+}
+
+.border-979 {
+    border-color: #979797;
+}
+
+.border-F0F {
+    border-color: #f0f0f0;
+}
+
+.border-FAA {
+    border-color: #faad14;
+}
+
+// 手势
+.cursor {
+    cursor: pointer;
+}
+
+/* 高 -p表示百分比 */
+.height-20 {
+    height: 20px;
+}
+
+.height-30 {
+    height: 30px;
+}
+
+.height-40 {
+    height: 40px;
+}
+
+.height-50 {
+    height: 50px;
+}
+
+.height-60 {
+    height: 60px;
+}
+
+.height-70 {
+    height: 70px;
+}
+
+.height-80 {
+    height: 80px;
+}
+
+.height-90 {
+    height: 90px;
+}
+
+.height-100 {
+    height: 100px;
+}
+
+.height-200 {
+    height: 200px;
+}
+
+.height-50-p {
+    height: 50%;
+}
+
+.height-100-p {
+    height: 100%;
+}
+
+.h100 {
+    height: 100%;
+}
+
+.h90 {
+    height: 90%;
+}
+
+.h80 {
+    height: 80%;
+}
+
+/* 宽 */
+.width-50 {
+    width: 50px;
+}
+
+.width-60 {
+    width: 60px;
+}
+
+.width-70 {
+    width: 70px;
+}
+
+.width-80 {
+    width: 80px;
+}
+
+.width-90 {
+    width: 90px;
+}
+
+.width-100 {
+    width: 100px;
+}
+
+.width-120 {
+    width: 120px;
+}
+
+.width-50-p {
+    width: 50%;
+}
+
+.width-100-p {
+    width: 100%;
+}
+
+.w100 {
+    width: 100%;
+}
+
+.w90 {
+    width: 90%;
+}
+
+.w85 {
+    width: 85%;
+}
+
+.w80 {
+    width: 80%;
+}
+
+.w70 {
+    width: 70%;
+}
+
+.w50 {
+    width: 50%;
+}
+
+.w30 {
+    width: 30%;
+}
+
+.w33 {
+    width: 33%;
+}
+
+
+
+/* 垂直线 */
+.vertical-F0F {
+    margin: 0 10px;
+    width: 1px;
+    background-color: #f0f0f0;
+}
+
+/* 水平线 */
+.horizontal-F0F {
+    margin: 10px 0;
+    height: 1px;
+    background-color: #f0f0f0;
+}
+
+/* 阅读红点 */
+.read-bot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #ff6d6d;
+    position: absolute;
+    top: 4px;
+    right: 4px;
+}
+
+.status {
+    display: inline-block;
+    border-radius: 8px 0px 8px 0px;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 22px;
+    padding: 0 8px;
+}
+
+.overflow {
+    overflow: hidden;
+}
+
+.overflow-y {
+    overflow-y: auto;
+}
+
+.overflow-x {
+    overflow-x: auto;
+}
+
+.ant-table-thead>tr>th,
+.ant-table-tbody>tr>td {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.g {
+    color: green;
+}
+
+.r {
+    color: red;
+}
+
+.divider {
+    margin: r(20) 0;
+    height: 2px;
+    background: linear-gradient(90deg, rgba(42, 99, 209, 0) 0%, rgba(41, 99, 209, 0.7) 20%, #2862D1 51%, rgba(42, 99, 209, 0.71) 84%, rgba(42, 99, 209, 0) 100%);
+}
\ No newline at end of file

src/components/medicalRecordHomepage/index2.vue

+<template>
+    <div id="medicalrecord">
+        <div class="pageindex">
+            <el-row>
+                <el-col :span="8" :offset="16">
+                    <el-row>
+                        <el-col :span="7"><span class="key setlListSn">清单流水号 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("setlListSn") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="9"><span class="key fixmedinsName">定点医疗机构名称</span></el-col>
+                        <el-col :span="14"
+                            ><span class="values">{{ changeValue("fixmedinsName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="9"><span class="key fixmedinsCode">定点医疗机构代码 </span></el-col>
+                        <el-col :span="14"
+                            ><span class="values">{{ changeValue("fixmedinsCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="7"><span class="key hiSetlLv">医保结算等级 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("hiSetlLvVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="5"><span class="key hiNo">医保编号</span></el-col>
+                        <el-col :span="18"
+                            ><span class="values">{{ changeValue("hiNo") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="4"><span class="key medcasNo">病案号 </span></el-col>
+                        <el-col :span="19"
+                            ><span class="values">{{ changeValue("medcasNo") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="5"><span class="key dclaTime">申报时间 </span></el-col>
+                        <el-col :span="19"
+                            ><span class="values">{{ changeValue("dclaTime") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+        </div>
+
+        <div class="text-center bg-ECF font-14 pad-5-0">一、基本信息</div>
+        <div class="pageindex">
+            <el-row :gutter="20">
+                <el-col :xl="3" :lg="3" :md="4">
+                    <el-row>
+                        <el-col :span="8"><span class="key psnName"> 姓名 </span></el-col>
+                        <el-col :span="16"
+                            ><span class="values"> {{ changeValue("psnName") }} </span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :xl="5" :lg="5" :md="5">
+                    <el-row>
+                        <el-col :span="5"><span class="key gend"> 性别 </span></el-col>
+                        <el-col :span="8">
+                            <span class="values"> {{ changeValue("gend") }} </span>
+                        </el-col>
+                        <el-col :span="11">
+                            <span class="value noBottomBoder paddingLeft10">1.男 2.女</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :xl="8" :lg="8" :md="7">
+                    <el-row>
+                        <el-col :span="5"><span class="key brdy">出生日期 </span></el-col>
+                        <el-col :span="19"
+                            ><span class="values">
+                                {{ changeValue("brdy") != "——" ? transformTimestamp(changeValue("brdy")) : changeValue("brdy") }}</span
+                            ></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :xl="4" :lg="4" :md="4">
+                    <el-row>
+                        <el-col :span="8"><span class="key age">年龄 </span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("age") }} </span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :xl="4" :lg="4" :md="4">
+                    <el-row>
+                        <el-col :span="8"><span class="key ntly">国籍 </span></el-col>
+                        <el-col :span="16">
+                            <span class="values">{{ changeValue("ntlyVal") }} </span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="7">
+                    <el-row>
+                        <el-col :span="11" :md="13"><span class="value" style="border: none">(年龄不满一周岁的)</span></el-col>
+                        <el-col :span="4" :md="3"><span class="key ageDays">年龄</span></el-col>
+                        <el-col :span="8" :md="5">
+                            <span class="values"> {{ changeValue("ageDays") }} </span>
+                        </el-col>
+                        <el-col :span="2"><span class="value" style="border: none">天</span></el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="4">
+                    <el-row>
+                        <el-col :span="6"><span class="key naty">民族</span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("natyVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="5">
+                    <el-row>
+                        <el-col :span="12"><span class="key psnCertType">患者证件类别</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("psnCertTypeVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="8"><span class="key certNo">患者证件号码</span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("certNo") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="4"><span class="key prfs">职业</span></el-col>
+                        <el-col :span="18"
+                            ><span class="values">{{ changeValue("prfsVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="18">
+                    <el-row>
+                        <el-col :span="2"><span class="key currAddr">现住址</span></el-col>
+                        <el-col :span="22"
+                            ><span class="values">{{ changeValue("currAddr") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-row>
+                        <el-col :span="6"><span class="key empName empAddr">工作单位及地址</span></el-col>
+                        <el-col :span="17">
+                            <span class="values">{{ changeValue("empAddr") }} </span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="7"><span class="key empTel">单位电话</span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("empTel") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="4"><span class="key empPoscode">邮编</span></el-col>
+                        <el-col :span="20"
+                            ><span class="values">{{ changeValue("empPoscode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="5">
+                    <el-row>
+                        <el-col :span="11"><span class="key conerName">联系人姓名</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("conerName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="4">
+                    <el-row>
+                        <el-col :span="6"><span class="key patnRlts">关系</span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("patnRltsVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="10">
+                    <el-row>
+                        <el-col :span="3"><span class="key conerAddr">地址</span></el-col>
+                        <el-col :span="20"
+                            ><span class="values">{{ changeValue("conerAddr") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="5">
+                    <el-row>
+                        <el-col :span="5"><span class="key conerTel">电话</span></el-col>
+                        <el-col :span="19"
+                            ><span class="values">{{ changeValue("conerTel") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key insuType">医保类型</span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("insuTypeVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="8"><span class="key spPsnType">特殊人员类型</span></el-col>
+                        <el-col :span="15"
+                            ><span class="values">{{ changeValue("spPsnTypeVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="4"><span class="key insuPlc">参保地</span></el-col>
+                        <el-col :span="20"
+                            ><span class="values">{{ changeValue("insuPlc") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="9"><span class="key nwbAdmType">新生儿入院类型</span></el-col>
+                        <el-col :span="14"
+                            ><span class="values">{{ changeValue("nwbAdmTypeVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="9"><span class="key nwbBirWt">新生儿出生体重</span></el-col>
+                        <el-col :span="13"
+                            ><span class="values">{{ changeValue("nwbBirWt") }}</span></el-col
+                        >
+                        <el-col :span="1"><span class="key"> 克 </span></el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="9"><span class="key nwbAdmWt">新生儿入院体重</span></el-col>
+                        <el-col :span="14"
+                            ><span class="values">{{ changeValue("nwbAdmWt") }}</span></el-col
+                        >
+                        <el-col :span="1"><span class="key"> 克 </span></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- <div class="text-center bg-ECF font-14 pad-5-0">二、门诊慢特病诊疗信息</div>
+        <div class="pageindex">
+            <el-row>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="8"><span class="key diagnostiC_DEPARTMENT">诊断科别</span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("diagnostiC_DEPARTMENT") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6" :offset="12">
+                    <el-row>
+                        <el-col :span="8"><span class="key visiT_DATE">就诊日期</span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("visiT_DATE") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-table :data="info.clinicDiagInfo" border :header-cell-class-name="diagnosisclass">
+                    <el-table-column prop="diaG_NAME" label="病种名称"></el-table-column>
+                    <el-table-column prop="diaG_CODE" label="病种代码"></el-table-column>
+                    <el-table-column prop="opS_NAME" label="手术及操作名称"> </el-table-column>
+                    <el-table-column prop="opS_CODE" label="手术及操作代码"></el-table-column>
+                </el-table>
+            </el-row>
+        </div> -->
+        <div class="text-center bg-ECF font-14 pad-5-0">三、住院诊疗信息</div>
+        <div class="pageindex">
+            <el-row>
+                <el-col>
+                    <el-row>
+                        <el-col :span="3"><span class="key iptMedType">住院医疗类型</span></el-col>
+                        <el-col :span="1">
+                            <span class="values">{{ changeValue("iptMedType") }}</span>
+                        </el-col>
+                        <el-col :span="20"><span class="value noBottomBoder paddingLeft10">1.住院 2.日间手术</span></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col>
+                    <el-row>
+                        <el-col :span="3"><span class="key admWay">入院途径</span></el-col>
+                        <el-col :span="1">
+                            <span class="values">{{ changeValue("admWay") }}</span>
+                        </el-col>
+                        <el-col :span="20">
+                            <span class="value noBottomBoder paddingLeft10">1.急诊 2.门诊 3.其他医疗机构转入 9.其他</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col>
+                    <el-row>
+                        <el-col :span="3"><span class="key trtType">治疗类别</span></el-col>
+                        <el-col :span="1">
+                            <span class="values">{{ changeValue("trtType") }}</span>
+                        </el-col>
+                        <el-col :span="20">
+                            <span class="value noBottomBoder paddingLeft10">10.西医 20.中医（21 中医 22 民族医） 30.中西医</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key admTime">入院时间 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{
+                                changeValue("admTime") != "——" ? transformTimestamp(changeValue("admTime")) : changeValue("admTime")
+                            }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key admDeptName">入院科别 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("admDeptName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key refldeptDept">转科科别 </span></el-col>
+                        <el-col :span="18"
+                            ><span class="values">{{ changeValue("refldeptDeptVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key dscgTime">出院时间 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{
+                                changeValue("dscgTime") != "——" ? transformTimestamp(changeValue("dscgTime")) : changeValue("dscgTime")
+                            }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key dscgCaty">出院科别 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("dscgCatyVal") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key actIptDays">实际住院 </span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("actIptDays") }}</span></el-col
+                        >
+                        <el-col :span="1"><span class="key">天 </span></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="16">
+                    <el-row>
+                        <el-col :span="8"><span class="key otpWmDiag">门（急）诊诊断（西医诊断）</span></el-col>
+                        <el-col :span="16">
+                            <span class="values">{{ changeValue("otpWmDiag") }}</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key otpWmDiagDiseCode">疾病代码</span></el-col>
+                        <el-col :span="18">
+                            <span class="values">{{ changeValue("otpWmDiagDiseCode") }}</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="16">
+                    <el-row>
+                        <el-col :span="8"><span class="key otpTcmDiag">门（急）诊诊断（中医诊断）</span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("otpTcmDiag") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="6"><span class="key otpTcmDiagDiseCode">疾病代码</span></el-col>
+                        <el-col :span="18"
+                            ><span class="values">{{ changeValue("otpTcmDiagDiseCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-table :data="info.diseTranInfos" border :header-cell-class-name="diagnosisclass">
+                    <el-table-column prop="wmDiagName" label="出院西医诊断">
+                        <template #default="{ row, $index }">
+                            <span style="color: #909399">
+                                {{ $index == 0 ? "主要诊断：" : $index == 1 ? "其他诊断：" : "" }}
+                            </span>
+                            {{ row.wmDiagName }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="wmDiagCode" label="疾病代码"> </el-table-column>
+                    <el-table-column prop="wmAdmCondType" label="入院病情"></el-table-column>
+                    <el-table-column prop="tcmDiagName" label="出院中医诊断">
+                        <template #default="{ row, $index }">
+                            <span style="color: #909399">
+                                {{ $index == 0 ? "主病：" : $index == 1 ? "主证：" : "" }}
+                            </span>
+                            {{ row.tcmDiagName }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="tcmDiagCode" label="疾病代码"></el-table-column>
+                    <el-table-column prop="tcmAdmCondType" label="入院病情"> </el-table-column>
+                </el-table>
+            </el-row>
+            <el-row>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="8"><span class="key diagCodeCnt">诊断代码计数</span></el-col>
+                        <el-col :span="10"
+                            ><span class="values">{{ changeValue("diagCodeCnt") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-table :data="info.oprnInfos" border :header-cell-class-name="headerRowStyle">
+                    <el-table-column prop="oprnOprtName" label="手术操作名称">
+                        <template #default="{ row, $index }">
+                            <span style="color: #909399">
+                                {{ $index == 0 ? "主要手术：" : $index == 1 ? "其他手术：" : "" }}
+                            </span>
+                            {{ row.oprnOprtName }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="oprnOprtCode" label="手术操作代码"></el-table-column>
+                    <el-table-column label="手术操作起止时间">
+                        <template #default="scope">
+                            <span v-if="scope.row.oprnOprtBegntime">{{ scope.row.oprnOprtBegntime }}</span>
+                            <span v-if="scope.row.oprnOprtEndtime"> - {{ scope.row.oprnOprtEndtime }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="operDrName" label="术者医师姓名"></el-table-column>
+                    <el-table-column prop="operDrCode" label="术者医师代码"></el-table-column>
+                    <el-table-column prop="anstWayVal" label="麻醉方式"></el-table-column>
+                    <el-table-column label="麻醉起止时间">
+                        <template #default="scope">
+                            <span v-if="scope.row.anstBegntime">{{ scope.row.anstBegntime }}</span>
+                            <span v-if="scope.row.anstEndtime"> - {{ scope.row.anstEndtime }}</span>
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="anstDrName" label="麻醉医师姓名"></el-table-column>
+                    <el-table-column prop="anstDrCode" label="麻醉医师代码"></el-table-column>
+                </el-table>
+            </el-row>
+            <el-row>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="12"><span class="key oprnOprtCodeCnt">手术及操作代码计数</span></el-col>
+                        <el-col :span="10"
+                            ><span class="values">{{ changeValue("oprnOprtCodeCnt") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-row>
+                        <el-col :span="6"><span class="key ventUsedDays ventUsedHCnt ventUsedMCnt">呼吸机使用时间</span></el-col>
+                        <el-col :span="3"
+                            ><span class="values">{{ changeValue("ventUsedDays") }}</span></el-col
+                        >
+                        <el-col :span="1"><span class="key">天 </span></el-col>
+                        <el-col :span="3"
+                            ><span class="values">{{ changeValue("ventUsedHCnt") }}</span></el-col
+                        >
+                        <el-col :span="2"><span class="ke">小时 </span></el-col>
+                        <el-col :span="3"
+                            ><span class="values">{{ changeValue("ventUsedMCnt") }}</span></el-col
+                        >
+                        <el-col :span="2"><span class="key">分钟 </span></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="5">
+                    <span class="key c28 c29 c30"> 颅脑损伤患者昏迷时间：</span>
+                </el-col>
+                <el-col :span="18">
+                    <el-row>
+                        <el-col :span="2">
+                            <span class="key bfadmComaDays bfadmComaHCnt bfadmComaMCnt">入院前</span>
+                        </el-col>
+                        <el-col :span="2">
+                            <span class="values"> {{ changeValue("bfadmComaDays") }}</span>
+                        </el-col>
+                        <el-col :span="1"><span class="key">天 </span></el-col>
+                        <el-col :span="2">
+                            <span class="values"> {{ changeValue("bfadmComaHCnt") }}</span>
+                        </el-col>
+                        <el-col :span="2"><span class="key">小时 </span></el-col>
+                        <el-col :span="2">
+                            <span class="values"> {{ changeValue("bfadmComaMCnt") }}</span>
+                        </el-col>
+                        <el-col :span="2"><span class="key">分钟 </span></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="18" :offset="5">
+                    <el-row>
+                        <el-col :span="2">
+                            <span class="key afadmComaDays afadmComaHCnt afadmComaMCnt">入院后</span>
+                        </el-col>
+                        <el-col :span="2">
+                            <span class="values"> {{ changeValue("afadmComaDays") }}</span>
+                        </el-col>
+                        <el-col :span="1"><span class="key">天 </span></el-col>
+                        <el-col :span="2">
+                            <span class="values"> {{ changeValue("afadmComaHCnt") }}</span>
+                        </el-col>
+                        <el-col :span="2"><span class="key">小时 </span></el-col>
+                        <el-col :span="2">
+                            <span class="values"> {{ changeValue("afadmComaMCnt") }}</span>
+                        </el-col>
+                        <el-col :span="2"><span class="key">分钟 </span></el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-table :data="info.icuInfos" border :header-cell-class-name="headerRowStyle">
+                    <el-table-column prop="scsCutdWardTypeVal" label="重症监护病房类型"></el-table-column>
+                    <el-table-column prop="scsCutdInpoolTime" label="进重症监护室时间"> </el-table-column>
+                    <el-table-column prop="scsCutdExitTime" label="出重症监护室时间"></el-table-column>
+                    <el-table-column prop="scsCutdSumDura" label="合计"></el-table-column>
+                </el-table>
+            </el-row>
+            <el-row>
+                <el-table :data="info.bldInfos" border :header-cell-class-name="headerRowStyle">
+                    <el-table-column prop="bldCatVal" label="输血品种"></el-table-column>
+                    <el-table-column prop="bldAmt" label="输血量"> </el-table-column>
+                    <el-table-column prop="bldUnt" label="输血计量单位"></el-table-column>
+                </el-table>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key spgaNurscareDays">特级护理天数</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("spgaNurscareDays") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key lv1NurscareDays">一级护理天数</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("lv1NurscareDays") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key scdNurscareDays">二级护理天数</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("scdNurscareDays") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key lv3NurscareDays">三级护理天数</span></el-col>
+                        <el-col :span="13"
+                            ><span class="values">{{ changeValue("lv3NurscareDays") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :xl="2" :lg="2" :md="2">
+                    <span class="key dscgWay"> 离院方式: </span>
+                </el-col>
+                <el-col :xl="3" :lg="3" :md="3">
+                    <span class="value"> {{ changeValue("dscgWay") }} </span>
+                </el-col>
+                <el-col :xl="8" :lg="8" :md="8">
+                    <span class="value noBottomBoder acpMedinsName">1.医嘱离院 2.医嘱转院，拟接收医疗机构名称： </span>
+                </el-col>
+                <el-col :xl="10" :lg="10" :md="10">
+                    <span class="value"> {{ info.dscgWay == "2" ? changeValue("acpMedinsName") : "——" }}</span>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :xl="10" :lg="10" :md="10">
+                    <span class="value noBottomBoder acpMedinsName">3.医嘱转社区卫生服务机构/乡镇卫生院，拟接收医疗机构名称：</span>
+                </el-col>
+                <el-col :xl="3" :lg="3" :md="3">
+                    <span class="value"> {{ info.dscgWay == "3" ? changeValue("acpMedinsName") : "——" }}</span>
+                </el-col>
+                <el-col :xl="10" :lg="10" :md="10">
+                    <span class="value noBottomBoder">4.非医嘱离院5.死亡9.其他</span>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :xl="5" :lg="5" :md="7"><span class="value noBottomBoder daysRinpFlag31">是否有出院31天内再住院计划</span></el-col>
+                <el-col :xl="2" :lg="2" :md="2">
+                    <span class="value"> {{ changeValue("daysRinpFlag31") == "2" ? "有" : "无" }}</span>
+                </el-col>
+                <el-col :xl="2" :lg="2" :md="2"><span class="value noBottomBoder daysRinpPup31 paddingLeft10">目的:</span></el-col>
+                <el-col :xl="11" :lg="11" :md="11">
+                    <span class="value"> {{ changeValue("daysRinpPup31") }}</span>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key chfpdrName">主诊医师姓名</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("chfpdrName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key chfpdrCode">主诊医师代码</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("chfpdrCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key respNursName">责任护士姓名</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("respNursName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="11"><span class="key respNursCode">责任护士代码</span></el-col>
+                        <el-col :span="13"
+                            ><span class="values">{{ changeValue("respNursCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="text-center bg-ECF font-14 pad-5-0">四、医疗收费信息</div>
+        <div class="pageindex">
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="8"><span class="key bizSn">业务流水号：</span></el-col>
+                        <el-col :span="15"
+                            ><span class="values">{{ changeValue("bizSn") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="7"><span class="key billCode">票据代码：</span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("billCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+                <el-col :span="8">
+                    <el-row>
+                        <el-col :span="7"><span class="key billNo">票据号码：</span></el-col>
+                        <el-col :span="17"
+                            ><span class="values">{{ changeValue("billNo") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-row>
+                        <el-col :span="4">
+                            <span class="key setlBegnDate setlEndDate"> 结算期间：</span>
+                        </el-col>
+                        <el-col :span="20">
+                            <span class="values">{{ changeValue("setlBegnDate") }} - {{ changeValue("setlEndDate") }}</span>
+                        </el-col>
+                        <!-- <el-col :span="1"><span class="key">— </span></el-col>
+                        <el-col :span="6">
+                            <span class="values"> 2023-9-3</span>
+                        </el-col> -->
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-table :data="info.itemInfos" border :header-cell-class-name="headerRowStyle">
+                    <el-table-column prop="medChrgitmTypeVal" label="项目名称"></el-table-column>
+                    <el-table-column prop="itemSumamt" label="金额"></el-table-column>
+                    <el-table-column prop="itemClaaAmt" label="甲类"></el-table-column>
+                    <el-table-column prop="itemClabAmt" label="乙类"></el-table-column>
+                    <el-table-column prop="itemOwnpayAmt" label="自费"></el-table-column>
+                    <el-table-column prop="itemOthAmt" label="其他"></el-table-column>
+                </el-table>
+            </el-row>
+            <el-row>
+                <el-col :span="24">
+                    <table class="tables">
+                        <tbody>
+                            <tr>
+                                <td colspan="2">医保统筹基金支付</td>
+                                <td>{{ info.hifpPay || "/" }}</td>
+                                <td rowspan="5">个人负担</td>
+                                <td rowspan="3">个人自付</td>
+                                <td rowspan="3">{{ info.psnSelfpayAmt || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td rowspan="3">补充医疗保险支付</td>
+                                <td>职工大额补助</td>
+                                <td>{{ info.hifobPay || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td>居民大病保险</td>
+                                <td>{{ info.hifmiPay || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td>公务员医疗补助</td>
+                                <td>{{ info.cvlservPay || "/" }}</td>
+                                <td rowspan="2">个人自费</td>
+                                <td rowspan="2">{{ info.psnOwnpayFee || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td colspan="2">医疗救助支付</td>
+                                <td>{{ info.mafPay || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td rowspan="3">其他支付</td>
+                                <td>企业补充</td>
+                                <td>{{ info.hifesPay || "/" }}</td>
+                                <td rowspan="3">个人支付</td>
+                                <td rowspan="2">个人账户支付</td>
+                                <td rowspan="2">{{ info.acctPayamt || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td>商业保险</td>
+                                <td>{{ info.ltciPay || "/" }}</td>
+                            </tr>
+                            <tr>
+                                <td>...</td>
+                                <td></td>
+                                <td rowspan="1">个人现金支付</td>
+                                <td rowspan="1">{{ info.psnCashpay || "/" }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-row>
+                        <el-col :span="5">
+                            <span class="key hiPaymtd"> 医保支付方式：</span>
+                        </el-col>
+                        <el-col :span="10">
+                            <span class="values">{{ changeValue("hiPaymtd") }}</span>
+                        </el-col>
+                    </el-row>
+                </el-col>
+            </el-row>
+            <hr style="margin: 24px 0" />
+            <el-row :gutter="20">
+                <el-col :span="9">
+                    <el-row>
+                        <el-col :span="10"><span class="key medinsFillDept">定点医疗机构填报部门 </span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("medinsFillDept") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="9">
+                    <el-row>
+                        <el-col :span="7"><span class="key hsorgName">医保经办机构 </span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("hsorgName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="4"><span class="key hsorgCode">代码 </span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("hsorgCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+            <el-row :gutter="20">
+                <el-col :span="9">
+                    <el-row>
+                        <el-col :span="10"><span class="key medinsFillPsn">定点医疗机构填报人</span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("medinsFillPsn") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="9">
+                    <el-row>
+                        <el-col :span="7"><span class="key hsorgOpterName">医保机构经办人 </span></el-col>
+                        <el-col :span="16"
+                            ><span class="values">{{ changeValue("hsorgOpterName") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+
+                <el-col :span="6">
+                    <el-row>
+                        <el-col :span="4"><span class="key hsorgOpterCode">代码 </span></el-col>
+                        <el-col :span="12"
+                            ><span class="values">{{ changeValue("hsorgOpterCode") }}</span></el-col
+                        >
+                    </el-row>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+
+<script>
+import { reactive, toRefs, computed, onMounted, nextTick } from "@vue/composition-api";
+import { transformTimestamp } from "../../utils/formatTime";
+import { decimal } from "../../utils/decimal";
+// @ is an alias to /src
+export default {
+    components: {},
+    props: ["info"],
+    data() {
+        return {};
+    },
+    methods: {
+        decimal,
+        transformTimestamp,
+        changeValue(str) {
+            if (str && this.info) {
+                return this.info[str] ? this.info[str] : "——";
+            } else {
+                return "——";
+            }
+        },
+        headerRowStyle({ column }) {
+            if (column.label == "手术及操作编码") {
+                return "ops";
+            }
+        },
+        diagnosisclass({ column }) {
+            if (column.label == "出院诊断") {
+                return "diagnosis";
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+#medicalrecord {
+    width: 100%;
+    font-size: 12px !important;
+    border: 1px solid #000;
+    #clickColor {
+        background-color: #f3bf18;
+    }
+
+    .el-row {
+        margin-bottom: 20px;
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // .el-table::before {
+    //     background-color: #000;
+    // }
+
+    /* .el-table--border::after */
+
+    .homePageTitle {
+        font-size: 20px;
+        font-weight: bold;
+        text-align: center;
+    }
+
+    .juEnd {
+        display: flex;
+        justify-content: flex-end;
+    }
+
+    .juStart {
+        display: flex;
+        justify-content: flex-start;
+    }
+
+    .juCenter {
+        display: flex;
+        justify-content: center;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .key {
+        font-size: 14px;
+        font-weight: bold;
+
+        font-family: "PingFang SC";
+    }
+
+    .value {
+        font-size: 14px;
+        border-bottom: 1px solid #000;
+        font-family: "PingFang SC";
+        display: block;
+    }
+    .values {
+        font-size: 14px;
+        padding-left: 10px;
+        border-bottom: 1px solid #000;
+        font-family: "PingFang SC";
+        display: block;
+    }
+
+    .noBottomBoder {
+        border-bottom: none;
+    }
+
+    .paddingLeft10 {
+        padding-left: 10px;
+    }
+    .pageindex {
+        padding: 20px;
+        // min-height: 800px;
+    }
+    .tables {
+        width: 100%;
+        border-top: 1px solid #ebeef5;
+        border-left: 1px solid #ebeef5;
+        border-spacing: 0; /*去掉单元格间隙*/
+        th {
+            border-bottom: 1px solid #ebeef5;
+            border-right: 1px solid #ebeef5;
+            padding: 10px 30px;
+            vertical-align: middle; /* 垂直居中 */
+            text-align: center;
+        }
+        td {
+            padding: 10px 30px;
+            border-bottom: 1px solid #ebeef5;
+            border-right: 1px solid #ebeef5;
+            vertical-align: middle; /* 垂直居中 */
+            text-align: center;
+        }
+    }
+}
+</style>

src/main.js

@@ -9,6 +9,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
 import router from "@/router/index";
+import "@/assets/scss/app.scss";
 Vue.config.productionTip = false;
 import http from "@/utils/http.js";
 Vue.prototype.$http = http;
@@ -21,9 +22,11 @@ Vue.use(VueCompositionApi);
 import dayjs from "dayjs";
 import "dayjs/locale/zh-cn";
 dayjs.locale("zh-cn");
+//引入 lodash
+import _ from "lodash";
+Vue.prototype._ = _;
 new Vue({
     store,
-
     router,
     render: (h) => h(App),
 }).$mount("#app");

src/router/index.js

@@ -51,9 +51,14 @@ const router = new Router({
 
         {
             path: "/outpatientDetails_pingguo",
-            name: "outpatientDetails",
+            name: "outpatientDetails_pingguo",
             component: (resolve) => require(["@/views/outpatientDetails_pingguo.vue"], resolve),
         },
+        {
+            path: "/seeSettlementList",
+            name: "seeSettlementList",
+            component: (resolve) => require(["@/views/seeSettlementList.vue"], resolve),
+        },
     ],
     // mode: 'history' /*hash*/ /*不显示路由中的#*/
 });

src/utils/decimal.js

@@ -12,14 +12,14 @@ export function decimal(num) {
     } else {
         result = Math.round(num * 100) / 100;
         var s_x = result.toString();
-        var pos_decimal = s_x.indexOf('.');
+        var pos_decimal = s_x.indexOf(".");
         if (pos_decimal < 0) {
             //不是小数
             pos_decimal = s_x.length;
-            s_x += '.';
+            s_x += ".";
         }
         while (s_x.length <= pos_decimal + 2) {
-            s_x += '0';
+            s_x += "0";
         }
         return s_x;
     }
@@ -27,26 +27,24 @@ export function decimal(num) {
 
 export function toPercent(point) {
     var str = Number(point * 100).toFixed(2);
-    str += '%';
+    str += "%";
     return str;
 }
 export function keepTwoDecimalFull(num) {
     var result = parseFloat(num);
     result = Math.round(num * 100) / 100;
     var s_x = result.toString();
-    var pos_decimal = s_x.indexOf('.');
+    var pos_decimal = s_x.indexOf(".");
     if (pos_decimal < 0) {
         pos_decimal = s_x.length;
-        s_x += '.';
+        s_x += ".";
     }
     while (s_x.length <= pos_decimal + 2) {
-        s_x += '0';
+        s_x += "0";
     }
     return s_x;
 }
-export function changeArr(
-    data
-) {
+export function changeArr(data) {
     let arr = data.map((o) => [
         o.cmi,
         o.feeConsumeIndex,
@@ -69,5 +67,3 @@ export function changeArr(
 
     return arr;
 }
-
-

src/views/diagList.vue

+<template>
+    <div class="diagList">
+        <div class="left">
+            <div class="text-right mar-bottom-10">
+                <el-button type="primary" size="mini" slot="append" icon="el-icon-search" @click="search">查询</el-button>
+            </div>
+            <div class="font-14 color-999">
+                <div class="mar-bottom-10">
+                    <div class="flex-between-center">
+                        <div><span class="color-FF4">*</span> <span class="">主诊断：</span></div>
+                        <i @click="addotdiagName" class="cursor color-245 font-14 el-icon-circle-plus-outline">其他诊断</i>
+                    </div>
+                    <div id="list">
+                        <template v-for="(ele, index) in searchForm.otdiagName">
+                            <div :key="index" class="w100">
+                                <div class="font-12 width-90 mar-top-10" v-if="index != 0 && index == 1">其他诊断：</div>
+                                <div class="flex-between-center w100">
+                                    <el-select
+                                        class="mar-top-5 w90 mar-right-5"
+                                        filterable
+                                        remote
+                                        v-model="searchForm.otdiagName[index]"
+                                        reserve-keyword
+                                        :placeholder="index == 0 ? '请输入主诊断' : '请输入其他诊断'"
+                                        :remote-method="remoteMethod"
+                                        size="mini"
+                                        clearable
+                                    >
+                                        <el-option v-for="item in zdoptions" :key="item.name" :label="item.name" :value="item.name" />
+                                    </el-select>
+                                    <div v-if="searchForm.otdiagName.length != 1" class="flex-between-center">
+                                        <i @click.stop="dell(index)" class="cursor color-F54 mar-right-5 font-14 el-icon-remove-outline"></i>
+                                        <i class="cursor color-245 font-14 el-icon-sort"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+                <div class="mar-bottom-10">
+                    <div class="flex-between-center">
+                        <div><span class="">主手术：</span></div>
+                        <i @click="addotopsName" class="cursor color-245 font-14 el-icon-circle-plus-outline">其他手术</i>
+                    </div>
+                    <div id="list1">
+                        <template v-for="(el, i) in searchForm.otopsName">
+                            <div :key="i" class="w100">
+                                <div class="flex-between-center mar-top-10" v-if="i != 0 && i == 1">
+                                    <span class="font-12">其他手术：</span>
+                                </div>
+                                <div class="flex-between-center w100">
+                                    <el-select
+                                        class="mar-top-5 w90 mar-right-5"
+                                        v-model="searchForm.otopsName[i]"
+                                        filterable
+                                        remote
+                                        :collapse-tags="true"
+                                        :collapse-tags-tooltip="true"
+                                        reserve-keyword
+                                        :placeholder="i == 0 ? '请输入主手术' : '请输入其他手术'"
+                                        :remote-method="otssremoteMethod"
+                                        size="mini"
+                                        clearable
+                                    >
+                                        <el-option v-for="item in otssoptions" :key="item.name" :label="item.name" :value="item.name" />
+                                    </el-select>
+                                    <div v-if="searchForm.otopsName.length != 1" class="flex-between-center">
+                                        <i @click.stop="del(i)" class="cursor color-F54 mar-right-5 font-14 el-icon-remove-outline"></i>
+                                        <i class="cursor color-245 font-14 el-icon-sort"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">年龄：</span>
+                    <div class="mar-top-5 flex-between-center">
+                        <el-input v-model.trim="searchForm.a14" class="flex-1" size="mini" clearable placeholder="请输入年龄" />
+                        <span class="mar-left-5">岁</span>
+                    </div>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">ICU总时长：</span>
+                    <div class="mar-top-5 flex-between-center">
+                        <el-input v-model.trim="searchForm.icuTime" class="flex-1" size="mini" clearable placeholder="请输入ICU总时长" />
+                        <span class="mar-left-5">分钟</span>
+                    </div>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">医保类型：</span>
+                    <el-select class="mar-top-5 w100" v-model="searchForm.a46C" placeholder="医保类型" size="mini" clearable>
+                        <el-option label="城镇职工" value="城镇职工" />
+                        <el-option label="城乡居民" value="城乡居民" />
+                    </el-select>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">新生儿年龄：</span>
+                    <div class="mar-top-5 flex-between-center">
+                        <el-input v-model.trim="searchForm.a16" class="flex-1" size="mini" clearable placeholder="请输入年龄" />
+                        <span class="mar-left-5">天</span>
+                    </div>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">新生儿体重：</span>
+                    <div class="mar-top-5 flex-between-center">
+                        <el-input v-model.trim="searchForm.birthWeight" class="flex-1" size="mini" clearable placeholder="请输入" />
+                        <span class="mar-left-5">g</span>
+                    </div>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-60">性别：</span>
+                    <el-radio-group v-model="searchForm.a12C" size="mini" class="mar-right-10">
+                        <el-radio label="0" class="mar-right-5">未知</el-radio>
+                        <el-radio label="1" class="mar-right-5">男</el-radio>
+                        <el-radio label="2" class="mar-right-5">女</el-radio>
+                    </el-radio-group>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">离院方式：</span>
+                    <el-select v-model="searchForm.b34C" placeholder="请选择离院方式" size="mini" class="w100 mar-top-5">
+                        <el-option v-for="item in leaveoptions" :key="item.value" :label="item.label" :value="item.value" />
+                    </el-select>
+                </div>
+                <div class="mar-bottom-10">
+                    <span class="width-80">总费用：</span>
+                    <el-input v-model.trim="searchForm.d01" class="w100 mar-top-5" size="mini" clearable placeholder="请输入总费用" />
+                </div>
+            </div>
+        </div>
+        <div class="right">
+            <div class="outaddrecordEnrollment_centent">
+                <div class="outaddrecordEnrollment_centent_totalnum" v-for="(item, index) in addCorePercents" :key="index">
+                    <div class="outsetgrouping_centent_totalnum_left_yxrz" v-if="item.isShow">
+                        <div class="dw" style="height: 24%"><img src="../assets/img/t29.png" alt="" /> 优先入组</div>
+                    </div>
+                    <div style="flex: 1">
+                        <div class="outaddrecordEnrollment_centent_totalnum_left">
+                            <div class="outaddrecordEnrollment_centent_totalnum_left_text1">
+                                <span>分组编码：{{ item.code }}</span>
+                                <span>分组名称：{{ item.coreName }}</span>
+                                <span>基准点数：{{ item.score }}</span>
+                            </div>
+
+                            <div class="outaddrecordEnrollment_centent_totalnum_left_text3">
+                                <span>预计DRG支付费用：{{ decimal(item.actualfee) }}</span>
+                                <span>分组类型：{{ item.disNature }}</span>
+                            </div>
+                        </div>
+                        <div class="diagList_fenqu" v-if="item.lowMagnification != 0 && item.highMagnification != 0">
+                            <div class="diagList_fenqu_di">
+                                <div class="diagList_fenqu_di_bb">
+                                    <div class="diagList_fenqu_di_bb_div1">
+                                        <span
+                                            class="diagList_fenqu_di_bb_div1_num"
+                                            :style="{ marginLeft: item.totalwidth - 1 + '%', color: item.totalcolor }"
+                                            >{{ decimal(item.totalFee) }}</span
+                                        >
+                                        <span
+                                            class="diagList_fenqu_di_bb_div1_he"
+                                            :style="{
+                                                marginLeft: item.totalwidth + '%',
+                                                backgroundColor: item.totalcolor,
+                                            }"
+                                        ></span>
+                                    </div>
+                                    <div class="diagList_fenqu_di_bb_div2" style="height: 100%">
+                                        <span class="diagList_fenqu_di_bb_div2_span1" :style="{ width: item.lowwidth + '%' }"
+                                            ><span class="diagList_fenqu_di_bb_div2_span1_t1" :title="'低倍率区域：&lt;=' + Math.round(item.lowMagnification)"
+                                                >低倍率区域：&lt;={{ Math.round(item.lowMagnification) }}</span
+                                            ></span
+                                        >
+                                        <span class="diagList_fenqu_di_bb_div2_span2" :style="{ width: item.contentwidth + '%' }"
+                                            ><span
+                                                class="diagList_fenqu_di_bb_div2_span2_t2"
+                                                :title="'正常区域：' + (Math.round(item.lowMagnification) + 1) + '~' + (Math.round(item.highMagnification) - 1)"
+                                                >正常区域：{{ Math.round(item.lowMagnification) + 1 + "~" + (Math.round(item.highMagnification) - 1) }}</span
+                                            ></span
+                                        >
+
+                                        <span class="diagList_fenqu_di_bb_div2_span3" :style="{ width: item.heightwidth + '%' }"
+                                            ><span class="diagList_fenqu_di_bb_div2_span3_t3" :title="'高倍率区域：>=' + Math.round(item.highMagnification)"
+                                                >高倍率区域：>={{ Math.round(item.highMagnification) }}</span
+                                            ></span
+                                        >
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mar-0-15 pad-5-10" style="background-color: rgba(44, 171, 227, 0.08)">
+                            <div style="background-color: rgba(44, 171, 227, 0.08)" class="pad-5-10">MCC:</div>
+                            <div class="bg-FFF w100 pad-10">
+                                {{ item.mccDatas && item.mccDatas.length ? item.mccDatas.join("；") : "--" }}
+                            </div>
+                        </div>
+                        <div class="mar-0-15 pad-5-10" style="background-color: rgba(44, 171, 227, 0.08)">
+                            <div style="background-color: rgba(44, 171, 227, 0.08)" class="pad-5-10">CC:</div>
+                            <div class="bg-FFF w100 pad-10">
+                                {{ item.ccDatas && item.ccDatas.length ? item.ccDatas.join("；") : "--" }}
+                            </div>
+                        </div>
+                    </div>
+                    <!-- <div class="outaddrecordEnrollment_centent_totalnum_right">
+                            <div :id="`indexChart11` + index" class="outaddrecordEnrollment_centent_totalnum_right_echar1"></div>
+                            <div :id="`indexChart11two` + index" class="outaddrecordEnrollment_centent_totalnum_right_echar2"></div>
+                            <div :id="`indexChart11tree` + index" class="outaddrecordEnrollment_centent_totalnum_right_echar3"></div>
+                            <div :id="`indexChart11fore` + index" class="outaddrecordEnrollment_centent_totalnum_right_echar4"></div>
+                            <div :id="`indexChart11file` + index" class="outaddrecordEnrollment_centent_totalnum_right_echar5"></div>
+                        </div> -->
+                </div>
+
+                <div v-show="addnolistShow" class="outaddrecordEnrollment_centent_nodata">
+                    <div class="outaddrecordEnrollment_centent_nodata_img">
+                        <img src="../assets/img/nodata.png" alt="" />
+                    </div>
+                    <div class="outaddrecordEnrollment_centent_nodata_text">暂无数据</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Sortable from "sortablejs";
+import http from "../utils/http";
+import { initEcharts, categoryChart, categoryChart11 } from "../utils/echarts";
+import { decimal } from "../utils/decimal";
+import { Message } from "element-ui";
+import { setItem, getItem } from "../utils/auth";
+import { Loading } from "element-ui";
+
+export default {
+    name: "diagList",
+    components: {},
+    props: ["code", "isshow"],
+    data() {
+        return {
+            zdoptions: [], //诊断
+            otzdoptions: [], //诊断
+            ssoptions: [], //主手术
+            otssoptions: [], //其他手术
+            searchForm: {
+                a14: "0",
+                a16: "0",
+                birthWeight: "0",
+                a12C: "0",
+                icuTime: "0",
+                b34C: "1",
+                opsList: [], //手术
+                otopsName: [""],
+                otdiagName: [""],
+                diagList: [], //诊断
+                a46C: "城乡居民",
+                d01: 0,
+            },
+            //离院方式选择器
+            leaveoptions: [
+                {
+                    label: "医嘱离院",
+                    value: "1",
+                },
+                {
+                    label: "医嘱转院",
+                    value: "2",
+                },
+                {
+                    label: "医嘱转社区卫生服务机构/乡镇卫生院",
+                    value: "3",
+                },
+                {
+                    label: "非医嘱离院",
+                    value: "4",
+                },
+                {
+                    label: "死亡",
+                    value: "5",
+                },
+                {
+                    label: "其他",
+                    value: "9",
+                },
+            ],
+            addCorePercents: [],
+            addnolistShow: true, //没有搜索数据的时候显示
+        };
+    },
+    //监听属性 类似于data概念
+    computed: {},
+    //监控data中的数据变化
+    watch: {
+        isshow: {
+            handler() {
+                if (this.isshow) {
+                    if (this.code) {
+                        Object.assign(this.searchForm, this.code);
+                        this.searchForm.otdiagName = [];
+                        this.searchForm.otopsName = [];
+                        this.searchForm.otdiagName = this.searchForm.diagList.length ? this.searchForm.diagList.map((item) => item.diagCode) : [""];
+                        this.searchForm.otopsName = this.searchForm.opsList.length ? this.searchForm.opsList.map((item) => item.opsCode) : [""];
+                        this.getlist();
+                    }
+                }
+            },
+        },
+    },
+    created() {},
+    mounted() {
+        if (this.code) {
+            Object.assign(this.searchForm, this.code);
+            this.searchForm.otdiagName = [];
+            this.searchForm.otopsName = [];
+            this.searchForm.otdiagName = this.searchForm.diagList.length ? this.searchForm.diagList.map((item) => item.diagCode) : [""];
+            this.searchForm.otopsName = this.searchForm.opsList.length ? this.searchForm.opsList.map((item) => item.opsCode) : [""];
+            this.getlist();
+        }
+        this.rowDrop();
+        this.rowDrop1();
+    },
+    beforeMount() {}, //生命周期 - 挂载之前
+    destroyed() {}, //生命周期 - 销毁完成
+    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+    //方法集合
+    methods: {
+        decimal,
+        //添加诊断
+        addotdiagName() {
+            let arr = this.searchForm.otdiagName.filter((item) => item);
+            if (!arr.length) {
+                Message.warning("请先输入主诊断");
+                return;
+            }
+            let v = _.last(this.searchForm.otdiagName);
+            if (!v) {
+                Message.warning("请输入诊断");
+                return;
+            }
+            this.searchForm.otdiagName.push("");
+        },
+        dell(i) {
+            this.searchForm.otdiagName.splice(i, 1);
+        },
+        //手术
+        addotopsName() {
+            let v = _.last(this.searchForm.otopsName);
+            if (!v) {
+                this.$message.warning("请输入手术");
+                return;
+            }
+            this.searchForm.otopsName.push("");
+        },
+        del(i) {
+            this.searchForm.otopsName.splice(i, 1);
+        },
+
+        //查询
+        search() {
+            let arr = this.searchForm.otdiagName.filter((item) => item);
+            if (!arr.length) {
+                Message.warning("请输入主诊断");
+                return;
+            }
+            this.searchForm.otdiagName
+                .filter((item) => item)
+                .map((item, i) => {
+                    this.searchForm.diagList.push({
+                        diagCode: item,
+                        diagOrder: i == 0 ? "0" : "1",
+                    });
+                });
+            this.searchForm.otopsName
+                .filter((item) => item)
+                .map((item, i) => {
+                    this.searchForm.opsList.push({
+                        opsCode: item,
+                        opsOrder: i == 0 ? "0" : "1",
+                    });
+                });
+            this.getlist();
+        },
+
+        //获取列表数据
+        getlist() {
+            http.post(`/medical/post/GetCorePercentsByAssemble`, this.searchForm)
+                .then((data) => {
+                    if (data && data.length == 0) {
+                        Message.warning({
+                            message: `此诊断作为主诊断无法入组!`,
+                            type: "warning",
+                        });
+                    }
+                    this.addCorePercents = data;
+                    this.addCorePercents.map((item) => {
+                        // 高倍率>总费用   高倍率金额+高倍率金额*30%
+                        if (item.highMagnification > item.totalFee) {
+                            item.heightnum = item.highMagnification + item.highMagnification * 0.3;
+                        } else if (item.highMagnification < item.totalFee) {
+                            // 高倍率<总费用   患者总费用的金额+患者总费用的金额*30%
+                            item.heightnum = item.totalFee + item.totalFee * 0.3;
+                        }
+                        // 低倍率宽度
+                        item.lowwidth = Math.round((Math.round(item.lowMagnification) / Math.round(item.heightnum)) * 100);
+                        // 高倍率宽度
+                        item.heightwidth = Math.round(((Math.round(item.heightnum) - Math.round(item.highMagnification)) / Math.round(item.heightnum)) * 100);
+                        // 正常倍率宽度
+                        item.contentwidth = 100 - (item.lowwidth + item.heightwidth);
+                        //总费用宽度
+                        item.totalwidth = Math.round((Math.round(item.totalFee) / Math.round(item.heightnum)) * 100);
+                        //  判断总费用显示的颜色
+                        if (item.totalFee < item.lowMagnification) {
+                            item.totalcolor = "#e9c622";
+                        } else if (item.totalFee > item.lowMagnification && item.totalFee < item.highMagnification) {
+                            item.totalcolor = "#22d016";
+                        } else if (item.totalFee > item.highMagnification) {
+                            item.totalcolor = "#ff7e00";
+                        }
+                        if (item.lowMagnification == 0 || item.highMagnification == 0) {
+                            item.bottomheight = "80%";
+                        } else if (data.lowMagnification != 0) {
+                            item.bottomheight = "68%";
+                        }
+                    });
+                    if (this.addCorePercents.length == 0) {
+                        this.addnolistShow = true;
+                    } else {
+                        this.addnolistShow = false;
+                    }
+                    // this.totalCount = data.totalCount;
+                    // for (var i = 0; i < this.addCorePercents.length; i++) {
+                    //     initEcharts(categoryChart11("药占比", this.addCorePercents[i].drugPercent, "#2CABE3"), `indexChart11${i}`);
+                    //     initEcharts(categoryChart11("耗材占比", this.addCorePercents[i].materialsPercent, "#71D875"), `indexChart11two${i}`);
+                    //     initEcharts(categoryChart11("检查占比", this.addCorePercents[i].inspectPercent, "#F35E77"), `indexChart11tree${i}`);
+                    //     initEcharts(categoryChart11("检验占比", this.addCorePercents[i].testPercent, "#FFB321"), `indexChart11fore${i}`);
+                    //     initEcharts(categoryChart11("其他", this.addCorePercents[i].otherPercent, "#C05EF3"), `indexChart11file${i}`);
+                    //     (this.diagList = []), (this.opsList = []);
+                    // }
+                    this.searchForm.diagList = [];
+                    this.searchForm.opsList = [];
+                })
+                .catch((error) => {});
+        },
+        remoteMethod(query) {
+            if (query) {
+                http.post(`/medical/get/GetDiagOpss?diagName=${query}&type=${1}`, {})
+                    .then((data) => {
+                        this.zdoptions = data;
+                    })
+                    .catch((error) => {});
+            } else {
+                this.zdoptions = [];
+            }
+        },
+        otremoteMethod(query) {
+            if (query) {
+                http.post(`/medical/get/GetDiagOpss?diagName=${query}&type=${1}`, {})
+                    .then((data) => {
+                        this.otzdoptions = data;
+                    })
+                    .catch((error) => {});
+            } else {
+                this.zdoptions = [];
+            }
+        },
+        //获取主手术，其他手术的数据
+        ssremoteMethod(query) {
+            if (query) {
+                http.post(`/medical/get/GetDiagOpss?diagName=${query}&type=${2}`, {})
+                    .then((data) => {
+                        this.ssoptions = data;
+                    })
+                    .catch((error) => {});
+            } else {
+                this.ssoptions = [];
+            }
+        },
+        //获取其他手术的数据
+        otssremoteMethod(query) {
+            if (query) {
+                http.post(`/medical/get/GetDiagOpss?diagName=${query}&type=${2}`, {})
+                    .then((data) => {
+                        this.otssoptions = data;
+                    })
+                    .catch((error) => {});
+            } else {
+                this.otssoptions = [];
+            }
+        },
+        // 行拖拽
+        rowDrop() {
+            let _this = this;
+            const el = document.getElementById("list");
+            Sortable.create(el, {
+                animation: 100,
+                delay: 0,
+                onEnd({ newIndex, oldIndex }) {
+                    if (newIndex === oldIndex) return;
+                    if (_this.searchForm) {
+                        _this.searchForm.otdiagName.splice(newIndex, 0, _this.searchForm.otdiagName.splice(oldIndex, 1)[0]);
+                        var newArray = _this.searchForm.otdiagName.slice(0);
+                        _this.searchForm.otdiagName = [];
+                        _this.$nextTick(function () {
+                            _this.searchForm.otdiagName = newArray;
+                        });
+                    }
+                },
+            });
+        },
+        rowDrop1() {
+            let _this = this;
+            const ele = document.getElementById("list1");
+            Sortable.create(ele, {
+                animation: 100,
+                delay: 0,
+                group: "shared",
+                onEnd({ newIndex, oldIndex }) {
+                    if (newIndex === oldIndex) return;
+                    if (_this.searchForm) {
+                        _this.searchForm.otopsName.splice(newIndex, 0, _this.searchForm.otopsName.splice(oldIndex, 1)[0]);
+                        var newArray = _this.searchForm.otopsName.slice(0);
+                        _this.searchForm.otopsName = [];
+                        _this.$nextTick(function () {
+                            _this.searchForm.otopsName = newArray;
+                        });
+                    }
+                },
+            });
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+.diagList {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    .left {
+        width: 250px;
+        padding: 10px;
+        height: 100%;
+        overflow-y: auto;
+    }
+    .right {
+        // width: calc(100% - 250px);
+        background-color: #f1f5f8;
+        overflow-y: auto;
+        flex: 1;
+        .outaddrecordEnrollment_centent {
+            background-color: #f1f5f8;
+            height: 100%;
+            overflow-y: auto;
+            &_totalnum {
+                // height: 151px;
+                background-color: #fff;
+                margin: 12px;
+                padding: 10px;
+                // display: flex;
+                // align-items: center;
+                // justify-content: space-around;
+                &_left {
+                    // flex: 1;
+                    width: 98%;
+                    height: auto !important;
+                    background-color: rgba(44, 171, 227, 0.08);
+                    margin: 0 15px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    &_text1 {
+                        width: 100%;
+                        height: 30%;
+                        display: flex;
+                        margin-top: 5px;
+                        margin-bottom: 0;
+                        justify-content: space-between;
+                        span {
+                            height: 100%;
+                            width: 50%;
+                            padding: 5px 0;
+                            margin: 5px 10px;
+                            background-color: #fff;
+                            display: flex;
+                            justify-content: start;
+                            align-items: center;
+                            font-size: 14px;
+                            padding-left: 10px;
+                            font-family: PingFang SC;
+                            font-weight: 300;
+                            color: #6a707e;
+                        }
+                    }
+                    &_text2 {
+                        width: 100%;
+                        height: 30%;
+                        display: flex;
+                        justify-content: space-between;
+                        span {
+                            height: 100%;
+                            width: 50%;
+                            padding: 5px 0;
+                            margin: 5px 10px;
+                            background-color: #fff;
+                            display: flex;
+                            justify-content: start;
+                            align-items: center;
+                            font-size: 14px;
+                            padding-left: 10px;
+                            font-family: PingFang SC;
+                            font-weight: 300;
+                            color: #6a707e;
+                        }
+                    }
+                    &_text3 {
+                        width: 100%;
+                        height: 30%;
+                        margin-top: 5px;
+                        margin-bottom: 5px;
+                        display: flex;
+                        justify-content: space-between;
+                        span {
+                            height: 100%;
+                            width: 50%;
+                            padding: 5px 0;
+                            margin: 5px 10px;
+                            background-color: #fff;
+                            display: flex;
+                            justify-content: start;
+                            align-items: center;
+                            font-size: 14px;
+                            padding-left: 10px;
+                            font-family: PingFang SC;
+                            font-weight: 300;
+                            color: #6a707e;
+                        }
+                    }
+                    &_radios {
+                        width: 3%;
+                        height: 30%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                    &_text {
+                        width: 97%;
+                        height: 100%;
+                        display: flex;
+
+                        flex-direction: column;
+                        justify-content: center;
+                        &_msg1 {
+                            height: 40%;
+                            box-sizing: content-box;
+                            border: 10px solid rgba(44, 171, 227, 0.08);
+                            border-bottom: 5px solid rgba(44, 171, 227, 0.08);
+                            border-top: 5px solid rgba(44, 171, 227, 0.08);
+                            margin-bottom: 5px;
+                            // margin-top: 5px;
+                            display: flex;
+
+                            &_text11 {
+                                width: 25%;
+                                height: 100%;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                span {
+                                    height: 100%;
+                                    width: 85%;
+                                    // margin:5px 5px;
+                                    display: flex;
+                                    justify-content: start;
+                                    align-items: center;
+                                    font-size: 14px;
+                                    padding-left: 10px;
+                                    font-family: PingFang SC;
+                                    font-weight: 300;
+                                    color: #6a707e;
+                                }
+                            }
+                            &_text22 {
+                                width: 25%;
+                                height: 100%;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                span {
+                                    height: 100%;
+                                    width: 85%;
+                                    // margin:5px 5px;
+                                    display: flex;
+                                    justify-content: start;
+                                    align-items: center;
+                                    font-size: 14px;
+                                    padding-left: 10px;
+                                    font-family: PingFang SC;
+                                    font-weight: 300;
+                                    color: #6a707e;
+                                }
+                            }
+                            &_text33 {
+                                width: 25%;
+                                height: 100%;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                span {
+                                    height: 100%;
+                                    width: 85%;
+                                    // margin:5px 5px;
+                                    display: flex;
+                                    justify-content: start;
+                                    align-items: center;
+                                    font-size: 14px;
+                                    padding-left: 10px;
+                                    font-family: PingFang SC;
+                                    font-weight: 300;
+                                    color: #6a707e;
+                                }
+                            }
+                            &_text44 {
+                                width: 25%;
+                                height: 100%;
+                                display: flex;
+                                flex-direction: column;
+                                justify-content: center;
+                                span {
+                                    height: 100%;
+                                    width: 85%;
+                                    // margin:5px 5px;
+                                    display: flex;
+                                    justify-content: start;
+                                    align-items: flex-start;
+
+                                    font-size: 14px;
+                                    padding-left: 10px;
+                                    font-family: PingFang SC;
+                                    font-weight: 300;
+                                    color: #6a707e;
+                                }
+                            }
+                        }
+
+                        &_msg2 {
+                            background-color: rgba(44, 171, 227, 0.08);
+                            display: flex;
+                            flex-direction: column;
+                            height: 40%;
+                            justify-content: center;
+                            // padding-top: 10px;
+                            &_text3 {
+                                // margin-bottom: 10px;
+                                width: 100%;
+                                height: 83%;
+                                display: flex;
+                                justify-content: space-between;
+                                span {
+                                    display: block;
+                                    height: 100%;
+                                    width: 50%;
+                                    margin: 0px 10px;
+                                    background-color: #fff;
+                                    display: flex;
+                                    justify-content: start;
+                                    align-items: center;
+                                    font-size: 14px;
+                                    padding-left: 10px;
+                                    font-family: PingFang SC;
+                                    font-weight: 300;
+                                    color: #6a707e;
+                                }
+                            }
+                            &_text5 {
+                                margin-top: 10px;
+                                margin-bottom: 10px;
+                                width: 100%;
+                                height: 45%;
+                                display: flex;
+                                justify-content: space-between;
+                                span {
+                                    height: 100%;
+                                    width: 50%;
+                                    margin: 0px 10px;
+                                    background-color: #fff;
+                                    display: flex;
+                                    justify-content: start;
+                                    align-items: center;
+                                    font-size: 14px;
+                                    padding-left: 10px;
+                                    font-family: PingFang SC;
+                                    font-weight: 300;
+                                    color: #6a707e;
+                                }
+                            }
+                        }
+                    }
+                }
+                &_right {
+                    width: 100%;
+                    height: 30%;
+                    display: flex;
+                    justify-content: space-around;
+                    &_text1 {
+                        width: 19%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        margin-left: 3%;
+                        &_span1 {
+                            color: #2cabe3;
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                        }
+                        &_echar1 {
+                            width: 50%;
+                            height: 88px;
+                            margin-left: -30px;
+                        }
+                    }
+
+                    &_text2 {
+                        width: 19%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        &_span2 {
+                            color: #71d875;
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                        }
+                        &_echar2 {
+                            width: 50%;
+                            height: 88px;
+                            margin-left: -30px;
+                        }
+                    }
+                    &_text3 {
+                        width: 19%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        &_span3 {
+                            color: #f35e77;
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                        }
+                        &_echar3 {
+                            width: 50%;
+                            height: 85px;
+                            margin-left: -30px;
+                        }
+                    }
+                    &_text4 {
+                        width: 19%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        &_span4 {
+                            color: #ffb321;
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                        }
+                        &_echar4 {
+                            width: 50%;
+                            height: 88px;
+                            margin-left: -30px;
+                        }
+                    }
+                    &_text5 {
+                        width: 19%;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        &_span5 {
+                            color: #c05ef3;
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            font-size: 14px;
+                        }
+                        &_echar5 {
+                            width: 50%;
+                            height: 88px;
+                            margin-left: -30px;
+                        }
+                    }
+                }
+            }
+            // 没有数据
+            &_nodata {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-content: center;
+                text-align: center;
+                &_img {
+                    display: flex;
+                    justify-content: center;
+                    align-content: center;
+                    text-align: center;
+                    img {
+                        width: 115px;
+                        height: 102px;
+                    }
+                }
+                &_text {
+                    font-size: 18px;
+                    font-family: PingFang SC;
+                    font-weight: 400;
+                    color: #abafb3;
+                }
+            }
+        }
+        .diagList_fenqu {
+            height: 35%;
+            margin-bottom: 10;
+        }
+    }
+    &_fenqu {
+        width: 100%;
+        height: 80px !important;
+        margin-bottom: 10px;
+        background-color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &_di {
+            width: 100%;
+            height: 85%;
+            background-color: white;
+            display: flex;
+            justify-content: center;
+            &_bb {
+                width: 98%;
+                height: 85%;
+                margin: 0 5px;
+                background-color: white;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                padding-top: 5px;
+                &_div1 {
+                    width: 100%;
+                    height: 18%;
+                    // display: flex;
+                    // flex-direction: column;
+                    // align-items: flex-start;
+                    &_num {
+                        display: flex;
+                        font-size: 12px;
+                        font-family: PingFang SC;
+                    }
+                    &_he {
+                        display: block;
+                        width: 2px;
+                        height: 10px;
+                    }
+                }
+                &_div2 {
+                    width: 100%;
+                    height: 64%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    &_span1 {
+                        display: block;
+                        // width: 33%;
+                        height: 50%;
+                        border-radius: 2px;
+                        color: white;
+                        font-size: 12px;
+
+                        background-color: #e9c622;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-family: PingFang SC;
+                        &_t1 {
+                            width: 90%;
+                            height: 100%;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            text-align: center;
+                            padding-top: 10px;
+                        }
+                        &_t1:hover {
+                            width: 90%;
+                        }
+                    }
+                    &_span2 {
+                        display: block;
+                        // width: 33%;
+                        height: 50%;
+                        border-radius: 2px;
+                        color: white;
+                        font-size: 12px;
+
+                        background-color: #22d016;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-family: PingFang SC;
+                        &_t2 {
+                            width: 90%;
+                            height: 100%;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            text-align: center;
+                            padding-top: 10px;
+                        }
+                        &_t2:hover {
+                            width: 90%;
+                        }
+                    }
+                    &_span3 {
+                        display: block;
+                        // width: 33%;
+                        height: 50%;
+                        border-radius: 2px;
+                        color: white;
+                        font-size: 12px;
+                        background-color: #ff7e00;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-family: PingFang SC;
+                        &_t3 {
+                            width: 90%;
+                            height: 100%;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            text-align: center;
+
+                            padding-top: 10px;
+                        }
+                        &_t3:hover {
+                            width: 90%;
+                        }
+                    }
+                }
+                &_div3 {
+                    width: 100%;
+                    height: 18%;
+                    display: flex;
+                    &_span1 {
+                        display: flex;
+                        height: 100%;
+                        justify-content: start;
+                        font-size: 12px;
+                        font-family: PingFang SC;
+                        color: #abafb3;
+                    }
+                    &_span2 {
+                        display: flex;
+                        height: 100%;
+                        font-size: 12px;
+                        font-family: PingFang SC;
+                        color: #abafb3;
+                        justify-content: start;
+                    }
+                    &_span3 {
+                        display: flex;
+                        height: 100%;
+                        font-family: PingFang SC;
+                        font-size: 12px;
+                        color: #abafb3;
+                        justify-content: space-between;
+                    }
+                    // &_span4 {
+                    // 	display: flex;
+                    // 	width: 25%;
+                    // 	height: 100%;
+                    // 	font-family: PingFang SC;
+                    // 	padding-left: 383px;
+                    // 	font-size: 12px;
+                    // 	color: #abafb3;
+                    // }
+                }
+            }
+        }
+    }
+}
+</style>

src/views/outHistorygrouping.vue

@@ -8,9 +8,17 @@
 <template>
   <!-- 智能分组 -->
   <div class="outsetgrouping" id="setGroupingbox">
-    <div class="outsetgrouping_button">
+    <div class="outsetgrouping_button flex-between-center font-14 color-666">
+      <div>
+        <span class="span1">患者信息</span
+        ><span class="mar-left-15 color-F54" v-if="casehisObj?.isLowRisk"
+          >该主诊断符合低风险死亡</span
+        >
+      </div>
+      <div>
         <router-link
           target="_blank"
+          v-if="$route.query.type"
           :to="{ path: '/medicalRecordImport', query: { id: $route.query.id } }"
         >
           <el-button
@@ -45,6 +53,7 @@
           <span class="s2">疾病分组查询</span>
         </el-button>
       </div>
+    </div>
     <div class="outsetgrouping_top">
       <div class="outsetgrouping_top_message">
         <div class="outsetgrouping_top_message_left" style="width: 18%">
@@ -376,6 +385,16 @@
       :fullscreen="true"
     >
       <!-- 病案分组 -->
+      <diagList :code="casehisObj" :isshow="addrecordEnrollmentShow"></diagList>
+    </el-dialog>
+    <el-dialog
+      center
+      :visible.sync="addrecordEnrollmentShow1"
+      class="fullscreen"
+      :before-close="closeDialog"
+      :fullscreen="true"
+    >
+      <!-- 病案分组 -->
       <div class="outaddrecordEnrollment" id="outaddrecordEnrollment">
         <div class="outaddrecordEnrollment_search">
           <div class="outaddrecordEnrollment_search_div1">
@@ -703,8 +722,10 @@ import { decimal } from '../utils/decimal'
 import { Message } from 'element-ui'
 import { useRoute, useRouter } from '../utils/useVueRouter'
 import { initEcharts, categoryChart, categoryChart11 } from '../utils/echarts'
+import diagList from './diagList'
 export default {
   name: 'outHistorygrouping',
+  components: { diagList },
   data() {
     return {
       abc: '',
@@ -738,6 +759,7 @@ export default {
       addgroupList2: [], //主手术
       addgroupArr2: [],
       addrecordEnrollmentShow: false,
+      addrecordEnrollmentShow1: false,
       // 性别选择器
       sexoptions: [
         {
@@ -934,11 +956,7 @@ export default {
     //关闭弹层前的回调
     closeDialog() {
       this.addrecordEnrollmentShow = false
-      this.outaddsearchForm = {
-        diagName: '',
-        opsName: ''
-      }
-      ;(this.otdiagName = []), (this.otopsName = []), this.addclear()
+      // this.getCaseHis(this.$route.query.id);
     },
 
     //清空输入框的值时触发
@@ -1177,7 +1195,7 @@ export default {
 </script>
 <style lang="scss">
 @import '../styles/mixin.scss';
-@import '../styles/outHistorygrouping.scss';
+// @import "../styles/outHistorygrouping.scss";
 .outsetgrouping {
   height: 96%;
   background-color: white;
@@ -1843,7 +1861,7 @@ export default {
   .fullscreen {
     .el-dialog.is-fullscreen {
       .el-dialog__body {
-        height: 91%;
+        height: 90%;
       }
     }
   }

src/views/outpatientDetails.vue

@@ -12,8 +12,8 @@
             <div class="outpatientDetails_top_div1">
                 <span class="span1">患者信息</span>
                 <div>
-                    <el-button class="outpatientDetails_top_div1_button" type="primary" size="mini" @click="gosear"> 疾病分组查询 </el-button>
-                    <el-button class="outpatientDetails_top_div1_button" size="mini" type="primary" @click="topage">病案质控</el-button>
+                    <!-- <el-button class="outpatientDetails_top_div1_button" type="primary" size="mini" @click="gosear"> 疾病分组查询 </el-button> -->
+                    <!-- <el-button class="outpatientDetails_top_div1_button" size="mini" type="primary" @click="topage">病案质控</el-button> -->
                     <el-button class="outpatientDetails_top_div1_button" type="primary" size="mini" @click="getControl">医嘱质控</el-button>
                 </div>
             </div>
@@ -155,18 +155,18 @@
                         @row-click="eowclick"
                         @expand-change="changeRowClick"
                     >
-                        <el-table-column prop="iteM_TYPE" label="项目名称" width="110" header-align="center" align="center"> </el-table-column>
-                        <el-table-column prop="totalFee" label="总金额(小计)" width="80" header-align="center" align="right">
+                        <el-table-column prop="iteM_TYPE" label="项目名称" header-align="center" align="center"> </el-table-column>
+                        <el-table-column prop="totalFee" label="总金额(小计)" header-align="center" align="right">
                             <template slot-scope="scope">
                                 {{ decimal(scope.row.totalFee) }}
                             </template>
                         </el-table-column>
-                        <el-table-column prop="proportion" label="占总费用(比例)" width="90" header-align="center" align="right">
+                        <el-table-column prop="proportion" label="占总费用(比例)" header-align="center" align="right">
                             <template slot-scope="scope">
                                 {{ scope.row.proportion != undefined ? decimal(scope.row.proportion) + "%" : "" }}
                             </template>
                         </el-table-column>
-                        <el-table-column prop="coreTotalFee" label="预计DRG设定费用(参考)" width="100" header-align="center" align="right">
+                        <!-- <el-table-column prop="coreTotalFee" label="预计DRG设定费用(参考)" width="100" header-align="center" align="right">
                             <template slot-scope="scope">
                                 {{ decimal(scope.row.coreTotalFee) }}
                             </template>
@@ -175,7 +175,7 @@
                             <template slot-scope="scope">
                                 {{ scope.row.coreProportion != undefined ? decimal(scope.row.coreProportion) + "%" : "" }}
                             </template>
-                        </el-table-column>
+                        </el-table-column> -->
                     </el-table>
                 </div>
                 <!-- 中间有数据样式 表格-->

src/views/seeSettlementList.vue

+<!--
+ * @Author: wsq
+ * @Date: 2022-04-22 14:21:50
+ * @LastEditors: wsq
+ * @LastEditTime: 2022-07-01 17:08:45
+ * @Description: 
+-->
+<template>
+    <!-- 查看质控 -->
+    <div class="outseeQualityControl">
+        <div class="outseeQualityControl_box">
+            <div class="outseeQualityControl_box_btn">
+                <el-button class="outseeQualityControl_box_btn_button" size="mini" type="primary" @click="getSynchronous">同步数据</el-button>
+            </div>
+            <div class="outseeQualityControl_box_header">
+                <div class="outseeQualityControl_box_header_text"></div>
+            </div>
+            <div class="outseeQualityControl_box_Content">
+                <div class="outseeQualityControl_box_Content_left">
+                    <medical-record-homepage :info="medicalrecord"> </medical-record-homepage>
+                </div>
+
+                <div class="outseeQualityControl_box_Content_right">
+                    <div class="outseeQualityControl_box_Content_right_top">
+                        <!--非编码问题 -->
+                        <div
+                            :class="[isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_left' : 'outseeQualityControl_box_Content_right_top_left11']"
+                            @click="leftcode"
+                        >
+                            <div class="outseeQualityControl_box_Content_right_top_left_div1">
+                                <img src="../assets/img/fbm.png" alt="" v-show="isleftcodeShow" />
+                                <img src="../assets/img/bm.png" alt="" v-show="!isleftcodeShow" />
+                            </div>
+                            <div class="outseeQualityControl_box_Content_right_top_left_div2">
+                                <span
+                                    :class="[
+                                        isleftcodeShow
+                                            ? 'outseeQualityControl_box_Content_right_top_left_div2_span1'
+                                            : 'outseeQualityControl_box_Content_right_top_left_div2_span11',
+                                    ]"
+                                    >{{ fruleCount }}</span
+                                >
+                                <span
+                                    :class="[
+                                        isleftcodeShow
+                                            ? 'outseeQualityControl_box_Content_right_top_left_div2_span2'
+                                            : 'outseeQualityControl_box_Content_right_top_left_div2_span22',
+                                    ]"
+                                    >非编码问题</span
+                                >
+                            </div>
+                        </div>
+                        <!-- 编码问题 -->
+                        <div
+                            :class="[
+                                isleftcodeShow ? 'outseeQualityControl_box_Content_right_top_right' : 'outseeQualityControl_box_Content_right_top_right11',
+                            ]"
+                            @click="rightcode"
+                        >
+                            <div class="outseeQualityControl_box_Content_right_top_right_div1">
+                                <img src="../assets/img/fbm.png" alt="" v-show="!isleftcodeShow" />
+                                <img src="../assets/img/bm.png" alt="" v-show="isleftcodeShow" />
+                            </div>
+                            <div class="outseeQualityControl_box_Content_right_top_right_div2">
+                                <span
+                                    :class="[
+                                        isleftcodeShow
+                                            ? 'outseeQualityControl_box_Content_right_top_right_div2_span1'
+                                            : 'outseeQualityControl_box_Content_right_top_right_div2_span11',
+                                    ]"
+                                    >{{ ruleCount }}</span
+                                >
+                                <span
+                                    :class="[
+                                        isleftcodeShow
+                                            ? 'outseeQualityControl_box_Content_right_top_right_div2_span2'
+                                            : 'outseeQualityControl_box_Content_right_top_right_div2_span22',
+                                    ]"
+                                    >编码问题</span
+                                >
+                            </div>
+                        </div>
+                    </div>
+                    <div class="outseeQualityControl_box_Content_right_center">
+                        <div class="outseeQualityControl_box_Content_right_center_line" v-show="isleftcodeShow"></div>
+                        <div class="outseeQualityControl_box_Content_right_center_line2" v-show="!isleftcodeShow"></div>
+                    </div>
+                    <div class="outseeQualityControl_box_Content_right_bottom">
+                        <!-- <div class="outseeQualityControl_box_Content_right_bottom_title">患者基本信息</div> -->
+                        <div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="isleftcodeShow">
+                            <el-tree
+                                :data="departmentTree"
+                                :props="defaultProps"
+                                :default-expand-all="false"
+                                ref="tree"
+                                node-key="id"
+                                @node-click="handleNodeClick"
+                            >
+                                <template #default="{ node, data }">
+                                    <span class="custom-tree-node">
+                                        <div class="leftbox" :class="[data.ruleName != '非编码问题' ? 'leftboxs' : '']">
+                                            <el-tooltip placement="bottom" trigger="hover">
+                                                <template #content>{{ data.ruleName }} </template>
+                                                <span :class="[data.ruleName == '非编码问题' ? 'spans' : '']">{{ data.ruleName }}</span>
+                                            </el-tooltip>
+                                        </div>
+                                    </span>
+                                </template>
+                            </el-tree>
+                        </div>
+
+                        <div class="outseeQualityControl_box_Content_right_bottom_tree" v-show="!isleftcodeShow">
+                            <el-tree
+                                :data="rightdepartmentTree"
+                                :props="defaultProps"
+                                :default-expand-all="false"
+                                ref="tree"
+                                node-key="id"
+                                @node-click="handleNodeClick"
+                                v-show="!isnodataShow"
+                            >
+                                <template #default="{ node, data }">
+                                    <span class="custom-tree-node">
+                                        <div class="leftbox" :class="[data.ruleName != '编码问题' ? 'leftboxs' : '']">
+                                            <el-tooltip placement="bottom" trigger="hover">
+                                                <template #content>{{ data.ruleName }} </template>
+                                                <span :class="[data.ruleName == '编码问题' ? 'spans' : '']">{{ data.ruleName }}</span>
+                                            </el-tooltip>
+                                        </div>
+                                    </span>
+                                </template>
+                            </el-tree>
+                            <div class="outseeQualityControl_box_Content_right_bottom_tree_nodata" v-show="isnodataShow">
+                                <img class="outseeQualityControl_box_Content_right_bottom_tree_nodata_img" src="../assets/img/mininodata.png" alt="" />
+                                <div class="outseeQualityControl_box_Content_right_bottom_tree_nodata_text">暂无数据</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import http from "../utils/http";
+import medicalRecordHomepage from "../components/medicalRecordHomepage/index2.vue";
+import $ from "jquery";
+import { setItem, removeToken } from "@/utils/auth";
+import { Message, Loading } from "element-ui";
+export default {
+    components: {
+        medicalRecordHomepage,
+    },
+    name: "outseeQualityControl",
+    data() {
+        return {
+            medicalrecord: null,
+            ScoringDetails: null,
+            caseHistoryScoreData: null,
+            departmentTree: [], //非编码问题数据
+            rightdepartmentTree: [], //编码问题数据
+            isleftcodeShow: true, //非编码问题数据是否显示
+            defaultProps: {
+                children: "rulesLists",
+                label: "ruleName",
+            },
+            clicktitle: "",
+            fruleCount: "", //非编码问题数据条数
+            ruleCount: "", //编码问题数据条数
+            isnodataShow: false, //编码是否有数据,
+            inhtml: "",
+            splithtml: "", //
+            splithtml2: "", //单位电话
+            splithtml3: "", //病房
+            keys: [], //获取所有的问卷key
+            values: [], //
+            loadingOption1: {
+                // 加载loading
+                fullscreen: true,
+                text: "正在加载...",
+                spinner: "el-icon-loading",
+                background: "rgba(0, 0, 0, 0.5)",
+            },
+        };
+    },
+    mounted() {
+        if (this.$route.query.id) {
+            this.getScoringDetails(this.$route.query.id);
+            this.getHomePage(this.$route.query.id);
+            setItem("outpid", this.$route.query.id);
+        }
+    },
+    methods: {
+        //同步数据
+        getSynchronous(id) {
+            http.post(`/medical/get/Synchronization?id=${this.$route.query.id}`)
+                .then((data) => {
+                    Message.success(data.message);
+                })
+                .catch((error) => {
+                    Message.error(error);
+                });
+        },
+        //获取到点击的值
+        handleNodeClick(data) {
+            let arr = document.getElementsByClassName(data.columnName);
+            let dom = $("#medicalRecord").find("#clickColor");
+            if (dom.length != 0) {
+                dom.removeAttr("id");
+            }
+
+            arr[0].setAttribute("id", "clickColor");
+
+            this.scrollTop();
+        },
+
+        scrollTop() {
+            if ($("#clickColor").position()) {
+                $(".outseeQualityControl_box_Content_left").animate(
+                    {
+                        scrollTop:
+                            $("#clickColor").offset().top -
+                            $(".outseeQualityControl_box_Content_left").offset().top +
+                            $(".outseeQualityControl_box_Content_left").scrollTop() -
+                            300,
+                    },
+                    500
+                );
+            }
+        },
+
+        //获取患者基本信息树形数据
+        getScoringDetails(id) {
+            var loadingInstance1 = Loading.service(this.loadingOption1);
+            http.get(`/settlement/valid/result?setlId=${id}`, {})
+                .then((data) => {
+                    this.departmentTree = data[0].rulesLists;
+                    this.rightdepartmentTree = data[1].rulesLists;
+                    this.fruleCount = data[0].ruleCount;
+                    this.ruleCount = data[1].ruleCount;
+                    if (this.fruleCount == 0 || this.ruleCount == 0) {
+                        this.isnodataShow = true;
+                    }
+                    loadingInstance1.close();
+                })
+                .catch((error) => {
+                    loadingInstance1.close();
+                });
+        },
+
+        // 获取病案首页数据
+        getHomePage(id) {
+            http.get(`/settlement/detail?setlId=${id}`, {})
+                .then((data) => {
+                    console.log(data);
+                    this.medicalrecord = data;
+                    this.keys = Object.keys(data);
+                })
+                .catch((error) => {});
+        },
+
+        //点击非编码问题
+        leftcode() {
+            this.isleftcodeShow = true;
+        },
+        //点击编码问题
+        rightcode() {
+            this.isleftcodeShow = false;
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+// @import '../styles/mixin.scss';
+// @import 'styles/media/components/outseeQualityControl.scss';
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    overflow: hidden;
+}
+#app {
+    height: 100%;
+    width: 100%;
+}
+
+.outseeQualityControl {
+    height: 100%;
+    width: 100%;
+    background-color: white;
+    // overflow: hidden;
+    // position: relative;
+
+    #clickColor {
+        background-color: #f3bf18;
+    }
+
+    &_box {
+        background-color: #f3fafd;
+        padding: 2%;
+        height: 92%;
+
+        &_btn {
+            width: 100%;
+            height: 40px;
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 20px;
+            &_button {
+                background-color: #2cabe3;
+                color: #fff;
+            }
+        }
+        &_header {
+            height: 25px;
+            margin-bottom: 20px;
+            background: url("../assets/img/dataMaintenance/title.png") no-repeat;
+            background-size: 100% 100%;
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            &_text {
+                font-size: 13px;
+                font-family: PingFang SC;
+                font-weight: 500;
+                color: #ffffff;
+                margin-left: 15px;
+            }
+        }
+        &_Content {
+            display: flex;
+            // flex-direction: row;
+            height: calc(100% - 80px);
+            // width: 100%;
+            justify-content: space-between;
+            // align-items: center;
+            // align-content: center;
+            // flex-wrap: nowrap;
+            // margin-top: 20px;
+            &_left {
+                width: 60%;
+                background-color: #ffffff;
+                height: 96%;
+                padding: 2% 4%;
+                overflow: auto;
+                overflow-x: hidden;
+            }
+
+            &_right {
+                width: 32%;
+                flex: 1;
+                margin-left: 1%;
+                display: flex;
+                flex-direction: column;
+                flex-wrap: nowrap;
+                justify-content: space-between;
+                align-items: center;
+
+                &_top {
+                    background: #ffffff;
+                    border-radius: 8px;
+                    height: 16%;
+                    width: 100%;
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    align-content: center;
+                    justify-content: space-around;
+                    align-items: center;
+                    // padding: 3% 10%;
+                    &_left {
+                        flex: 1;
+                        height: 100%;
+                        border-radius: 8px;
+                        background-image: url("../assets/img/BG.png");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        display: flex;
+
+                        &_div1 {
+                            flex: 1;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+
+                            img {
+                                width: 82px;
+                                height: 53px;
+                            }
+                        }
+
+                        &_div2 {
+                            flex: 1;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+
+                            &_span1 {
+                                color: #fff;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span2 {
+                                color: #fff;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+
+                            &_span11 {
+                                color: #2cabe3;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span22 {
+                                color: #2cabe3;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+                        }
+
+                        .leftblue {
+                            color: #2cabe3;
+                        }
+                    }
+
+                    &_left11 {
+                        flex: 1;
+                        height: 100%;
+                        border-radius: 8px;
+                        background-color: #fff;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        display: flex;
+
+                        &_div1 {
+                            flex: 1;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+
+                            img {
+                                width: 82px;
+                                height: 63px;
+                            }
+                        }
+
+                        &_div2 {
+                            flex: 1;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+
+                            &_span1 {
+                                color: #fff;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span2 {
+                                color: #fff;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+
+                            &_span11 {
+                                color: #2cabe3;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span22 {
+                                color: #2cabe3;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+                        }
+
+                        .leftblue {
+                            color: #2cabe3;
+                        }
+                    }
+
+                    &_right {
+                        height: 100%;
+                        flex: 1;
+                        border-radius: 8px;
+                        display: flex;
+
+                        &_div1 {
+                            flex: 1;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+
+                            img {
+                                width: 82px;
+                                height: 53px;
+                            }
+                        }
+
+                        &_div2 {
+                            flex: 1;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+
+                            &_span1 {
+                                color: #2cabe3;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span2 {
+                                color: #2cabe3;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+
+                            &_span11 {
+                                color: white;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span22 {
+                                color: white;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+                        }
+                    }
+
+                    &_right11 {
+                        flex: 1;
+                        height: 100%;
+                        border-radius: 8px;
+                        background-image: url("../assets/img/BG.png");
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        display: flex;
+
+                        &_div1 {
+                            flex: 1;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+
+                            img {
+                                width: 82px;
+                                height: 53px;
+                            }
+                        }
+
+                        &_div2 {
+                            flex: 1;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+
+                            &_span1 {
+                                color: #2cabe3;
+                                font-size: 26px;
+                                font-weight: 700;
+                            }
+
+                            &_span2 {
+                                color: #2cabe3;
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+                        }
+                    }
+                }
+
+                &_center {
+                    width: 100%;
+                    height: 2%;
+                    background-color: #ffff;
+                    display: flex;
+
+                    &_line {
+                        width: 50%;
+                        height: 30%;
+                        border-radius: 40px;
+                        background-color: #2cabe3;
+                        margin: 5px 0 5px 0;
+                    }
+
+                    &_line2 {
+                        width: 50%;
+                        height: 30%;
+                        border-radius: 40px;
+                        background-color: #2cabe3;
+                        margin: 5px 0 5px 0;
+                        margin-left: 50%;
+                    }
+                }
+
+                &_bottom {
+                    background: #ffffff;
+                    border-radius: 8px;
+                    height: 100%;
+                    width: 100%;
+                    // padding: 0 5% 5% 5%;
+
+                    &_title {
+                        font-size: 14px;
+                        font-family: PingFang SC;
+                        font-weight: bold;
+                        color: #6a707e;
+                        line-height: 40px;
+
+                        height: 10%;
+
+                        // @include flexLayout;
+
+                        justify-content: left;
+                    }
+
+                    &_tree {
+                        .is-leaf {
+                            visibility: hidden;
+                        }
+
+                        height: 100%;
+                        overflow-x: hidden;
+
+                        .leftboxs {
+                            border-bottom: 1px dashed #dddddd;
+                        }
+
+                        .leftbox {
+                            width: 100%;
+                            display: flex;
+                            align-items: center;
+                            height: 100%;
+                            overflow: hidden;
+                            white-space: pre-wrap;
+                            text-overflow: ellipsis;
+
+                            span {
+                                font-size: 14px;
+                                font-family: PingFang SC;
+                                font-weight: 400;
+                                line-height: 22px;
+                                text-align: start;
+                                overflow: hidden;
+                                width: 92%;
+                                white-space: nowrap;
+                                text-overflow: ellipsis;
+                            }
+
+                            .spans {
+                                color: #2cabe3;
+                                font-weight: 500;
+                            }
+                        }
+
+                        ._score {
+                            font-size: 13px;
+                            font-family: PingFang SC;
+                            font-weight: 400;
+                            color: #ff3333;
+                            line-height: 22px;
+
+                            width: 50%;
+
+                            display: flex;
+                            flex-direction: row;
+                            justify-content: flex-end;
+                            padding-right: 5%;
+
+                            span {
+                                color: rgba(106, 112, 126, 1);
+                            }
+                        }
+
+                        .el-tree {
+                            width: 98%;
+                            height: 85px;
+
+                            .el-tree-node__content {
+                                height: 85px;
+                            }
+
+                            .el-tree-node.is-current > .el-tree-node__content {
+                                height: 85px;
+
+                                /* background: #5fc3f0; */
+
+                                .custom-tree-node {
+                                    .leftbox {
+                                        width: 100%;
+                                        display: flex;
+                                        align-items: center;
+                                        height: 100%;
+
+                                        span {
+                                            font-size: 14px;
+                                            font-family: PingFang SC;
+                                            font-weight: 400;
+                                            line-height: 22px;
+                                            text-align: start;
+                                        }
+                                    }
+
+                                    ._score {
+                                        font-size: 13px;
+                                        font-family: PingFang SC;
+                                        font-weight: 400;
+
+                                        line-height: 22px;
+                                    }
+                                }
+                            }
+                        }
+
+                        .el-tree-node {
+                            white-space: initial;
+                        }
+
+                        &_nodata {
+                            height: 80%;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+
+                            &_img {
+                                width: 80px;
+                                height: 80px;
+                            }
+
+                            &_text {
+                                color: #abafb3;
+                                font-family: PingFang SC;
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .custom-tree-node {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
+    }
+
+    .el-tree > .el-tree-node {
+        //父级加下滑线
+        // border-bottom: 1px dashed #dddddd;
+    }
+
+    //修改三角icon样式
+    .el-icon-caret-right {
+        font-size: 18px;
+        color: #e4e4e4;
+    }
+
+    .el-tree-node__content .el-tree-node__label {
+        //子集字体小一号
+        font-size: 14;
+        font-family: PingFang SC;
+        font-weight: 400;
+        line-height: 22px;
+    }
+
+    .el-tree-node__children .el-tree-node__label {
+        //子集字体小一号
+
+        font-size: 12px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        line-height: 22px;
+    }
+}
+</style>