update

.eslintrc.js

@@ -53,7 +53,7 @@ module.exports = {
       'after': true
     }],
     'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
+    'indent': ['off', 2, 2, {
       'SwitchCase': 1
     }],
     'jsx-quotes': [2, 'prefer-single'],
@@ -193,6 +193,16 @@ module.exports = {
     'object-curly-spacing': [2, 'always', {
       objectsInObjects: false
     }],
-    'array-bracket-spacing': [2, 'never']
+    'array-bracket-spacing': [2, 'never'],
+    "vue/mustache-interpolation-spacing": ["error", "always" | "never"],
+    "vue/html-self-closing": ["error",{
+      "html": {
+        "void": "never",
+        "normal": "any",
+        "component": "any"
+      },
+      "svg": "always",
+      "math": "always"
+    }],
   }
 }

default.conf

@@ -67,6 +67,13 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
 
+    location /salpa/ {
+        proxy_pass  http://192.168.1.217:9080/;
+        proxy_set_header Host $proxy_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
     #error_page  404              /404.html;
 
     # redirect server error pages to the static page /50x.html

src/api/datamodel/model.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+export function createDataSource(data) {
+  return request({
+    url: '/salpa/subject/project/createDataSource',
+    method: 'post',
+    data: data
+  })
+}
+
+export function editDataSource(data) {
+  return request({
+    url: '/salpa/subject/project/updateDataSource',
+    method: 'put',
+    data: data
+  })
+}
+

src/api/metadata/datasource.js

@@ -113,3 +113,21 @@ export function getMetadatablood(data) {
     data: data
   })
 }
+
+export function uploadFile(data, type) {
+  return request({
+    url: '/data/metadata/sources/upload/' + type,
+    method: 'post',
+    data: data
+  })
+}
+
+export function pageOfflineData(data) {
+  return request({
+    url: '/data/metadata/offline/page',
+    method: 'get',
+    params: data
+  })
+}
+
+

src/api/monitor/projectApi.js

@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+export function pageProjectList(data) {
+  console.log('data==', data)
+  return request({
+    url: '/salpa/subject/project/pageList',
+    method: 'post',
+    data: data
+  })
+}
+export function addProject(data) {
+  return request({
+    url: '/salpa/subject/project/addProject',
+    method: 'post',
+    data: data
+  })
+}
+
+export function getProjectById(id) {
+  return request({
+    url: '/salpa/subject/project/getNewProjectById?id=' + id,
+    method: 'get'
+  })
+}
+
+export function updateProject(data) {
+  return request({
+    url: '/salpa/subject/project/updateNewProject',
+    method: 'post',
+    data: data
+  })
+}
+
+export function delNewProject(id) {
+  return request({
+    url: '/salpa/subject/project/deleteNewProject?id=' + id,
+    method: 'delete'
+  })
+}
+

src/assets/database/MariaDB.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 789.1 195.64" height="48">
+  <defs>
+    <style>.cls-1{fill:#003545;}</style>
+  </defs>
+  <title>MDB-HLogo_RGB</title>
+  <path class="cls-1" d="M378.08,70l18.52,71.5h-14L370.26,90l-23.17,51.5H335.3l-23.07-51.2-12.68,51.2H285.89L304.21,70h12.08l24.95,55.36L366.1,70Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M449.27,97.64V89.32h13.47v52.19H449.27v-8.42c-3.56,6-10.89,9.51-19.8,9.51-18.62,0-29-13.08-29-28.23,0-14.55,9.9-26.24,27-26.24C437.29,88.13,445.41,91.5,449.27,97.64Zm-34.46,17.43c0,9.6,6,17.82,17.72,17.82,11.29,0,17.43-8,17.43-17.53s-6.33-17.62-18-17.62C420.65,97.74,414.81,105.86,414.81,115.07Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M493.13,141.51H479.66V89.32h13.47V101c3.56-8,10.79-12.87,18.81-12.87a24.2,24.2,0,0,1,8.42,1.39l-2.87,9.9a29.66,29.66,0,0,0-7.13-1c-9.71,0-17.23,7.33-17.23,18.12Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M527.09,75.55a6.86,6.86,0,0,1,7.23-7,7.1,7.1,0,0,1,7.33,7.23c0,3.47-2.38,6.93-7.33,6.93A6.93,6.93,0,0,1,527.09,75.55Zm.59,13.77h13.47v38.13c0,2.37.5,4.06,2.48,4.06a14.37,14.37,0,0,0,2.57-.3l2.08,9.8a23.72,23.72,0,0,1-8.91,1.59c-5.65,0-11.69-1.69-11.69-14.46Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M601.36,97.64V89.32h13.46v52.19H601.36v-8.42c-3.57,6-10.9,9.51-19.81,9.51-18.62,0-29-13.08-29-28.23,0-14.55,9.91-26.24,27-26.24C589.37,88.13,597.49,91.5,601.36,97.64Zm-34.47,17.43c0,9.6,6,17.82,17.73,17.82,11.29,0,17.43-8,17.43-17.53s-6.34-17.62-18-17.62C572.74,97.74,566.89,105.86,566.89,115.07Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M635.51,70H667.8c27.13,0,40.7,14.95,40.5,35.75.2,21.59-14.76,35.75-38.13,35.75H635.51Zm8.91,6.34v58.92H669c21.59,0,29.81-14.56,29.81-29.71,0-17.13-10.3-29.21-29.81-29.21Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M763.35,141.51h-41V70h36.94c14.16,0,27.63,2.67,27.43,18.52,0,11.19-6.93,14.26-14.26,15.45,10.4.89,16.64,7.52,16.64,18.22C789.19,138.24,775.13,141.51,763.35,141.51Zm-3.07-40.31c14.16,0,17.33-5.44,17.33-12.38,0-10.39-6.34-12.77-17.33-12.77H730.87V101.2Zm.39,6h-29.8v28.23H762c8.72,0,17.93-2.88,17.93-13.87C779.89,108.93,769.29,107.24,760.67,107.24Z" transform="translate(0 -3.38)"></path>
+  <path class="cls-1" d="M299.2,4.34a4.35,4.35,0,0,0-2.92-1c-2.9,0-6.65,2-8.66,3-.35.19-.62.33-.81.41A27.32,27.32,0,0,1,276,9.53c-3.86.12-7.19.35-11.5.8C238.82,13,227.43,32.6,216.42,51.6c-6,10.32-12.18,21-20.67,29.28a54.92,54.92,0,0,1-5.59,4.74c-8.78,6.54-19.81,11.17-28.43,14.47-8.26,3.15-17.28,6-26,8.74-8,2.51-15.51,4.89-22.44,7.46-3.13,1.16-5.79,2-8.13,2.83-6.31,2.1-10.87,3.62-17.51,8.17-2.59,1.77-5.19,3.69-7,5.14A73.46,73.46,0,0,0,66.8,147.05a86.62,86.62,0,0,1-11.6,14c-1.4,1.37-3.89,2-7.62,2-4.37,0-9.67-.9-15.28-1.85-5.77-1-11.75-2-16.87-2-4.17,0-7.35.67-9.74,2.06,0,0-4,2.34-5.69,5.36l1.66.75a34.71,34.71,0,0,1,7.1,5.07,35.39,35.39,0,0,0,7.37,5.25,6.61,6.61,0,0,1,2.27,1.51c-.7,1-1.73,2.35-2.8,3.76-5.92,7.74-9.37,12.63-7.39,15.29a6.09,6.09,0,0,0,3,.71c12.9,0,19.82-3.36,28.59-7.6,2.54-1.23,5.16-2.5,8.16-3.8,5.12-2.22,10.64-5.76,16.48-9.52,7.74-5,15.74-10.11,23.49-12.6a64,64,0,0,1,19.71-2.77c8.23,0,16.83,1.1,25.15,2.17,6.21.79,12.63,1.61,18.93,2,2.45.15,4.72.22,6.92.22a77.2,77.2,0,0,0,8.83-.47l.7-.24c4.42-2.72,6.49-8.55,8.5-14.18,1.29-3.63,2.37-6.89,4.05-9a2.79,2.79,0,0,1,.34-.28.4.4,0,0,1,.5.09s0,.05,0,.15c-1.06,22.06-9.9,36.05-18.88,48.49l-6,6.43s8.39,0,13.16-1.84c17.42-5.21,30.58-16.69,40.15-35a149.42,149.42,0,0,0,6.32-14.44c.16-.41,1.68-1.17,1.53.95,0,.63-.09,1.32-.14,2h0c0,.43-.06.87-.08,1.31-.25,3-1,9.57-1,9.57l5.38-2.88c13-8.22,23-24.74,30.56-50.47,3.16-10.72,5.47-21.37,7.51-30.76,2.44-11.23,4.55-20.93,7-24.68,3.78-5.89,9.55-9.87,15.13-13.73l2.28-1.58c7-4.93,14-10.62,15.54-21.22l0-.24C301.22,7.29,300.27,5.27,299.2,4.34Z" transform="translate(0 -3.38)"></path>
+</svg>

src/assets/database/MySQL.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645770420428" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1363" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M1017.6 521.6c-3.2-3.2-6.4-6.4-6.4-9.6-6.4-12.8-16-22.4-28.8-32-9.6-6.4-28.8-16-32-25.6 6.4 0 12.8-3.2 19.2-3.2 9.6-3.2 16-3.2 25.6-3.2 3.2 0 9.6-3.2 12.8-3.2v-3.2c-3.2-6.4-9.6-12.8-12.8-19.2-12.8-12.8-28.8-25.6-44.8-38.4-9.6-6.4-19.2-9.6-28.8-16-3.2-3.2-9.6-3.2-9.6-6.4-3.2-6.4-6.4-16-9.6-22.4-6.4-16-16-35.2-22.4-54.4-3.2-12.8-6.4-25.6-12.8-35.2-28.8-51.2-57.6-83.2-102.4-115.2-9.6-6.4-22.4-9.6-35.2-12.8h-19.2c-3.2-3.2-9.6-6.4-12.8-9.6-16-9.6-54.4-35.2-67.2-3.2-6.4 19.2 9.6 38.4 16 48 3.2 6.4 9.6 16 12.8 22.4 3.2 6.4 3.2 9.6 3.2 16 6.4 12.8 9.6 28.8 16 41.6l9.6 19.2c3.2 3.2 6.4 6.4 6.4 9.6-3.2 6.4-3.2 16-6.4 22.4-9.6 35.2-6.4 76.8 6.4 102.4 3.2 6.4 16 25.6 28.8 19.2 12.8-6.4 9.6-22.4 12.8-38.4 0-3.2 0-6.4 3.2-9.6 3.2 9.6 6.4 16 9.6 25.6 9.6 16 22.4 32 35.2 41.6 6.4 6.4 12.8 16 19.2 19.2l-6.4-6.4c-6.4-6.4-9.6-12.8-12.8-19.2-12.8-19.2-22.4-35.2-28.8-54.4-3.2-9.6-9.6-19.2-12.8-28.8-3.2-3.2-3.2-9.6-3.2-9.6-3.2 6.4-9.6 12.8-12.8 19.2-6.4 12.8-6.4 28.8-6.4 44.8-9.6-3.2-12.8-12.8-16-22.4-6.4-22.4-9.6-57.6-3.2-83.2 3.2-6.4 9.6-25.6 6.4-32-3.2-6.4-6.4-9.6-9.6-12.8l-9.6-19.2c-6.4-16-9.6-35.2-16-54.4-3.2-6.4-9.6-16-12.8-22.4-6.4-9.6-9.6-12.8-16-22.4 0-3.2-3.2-9.6 0-12.8 0-3.2 3.2-3.2 3.2-3.2 3.2-3.2 12.8 0 16 3.2 9.6 3.2 19.2 9.6 25.6 16 3.2 3.2 6.4 9.6 12.8 9.6h6.4c9.6 3.2 19.2 0 25.6 3.2 12.8 6.4 25.6 12.8 38.4 22.4 35.2 25.6 64 60.8 83.2 105.6 3.2 6.4 3.2 12.8 6.4 22.4 6.4 16 12.8 28.8 19.2 44.8 6.4 12.8 9.6 28.8 19.2 41.6 3.2 6.4 19.2 9.6 28.8 12.8l19.2 9.6c9.6 6.4 19.2 12.8 25.6 19.2 3.2 3.2 19.2 9.6 19.2 16-22.4 0-38.4 3.2-51.2 9.6-6.4-3.2-12.8-3.2-12.8 3.2 3.2 3.2 3.2 6.4 3.2 9.6 3.2 6.4 9.6 12.8 12.8 19.2 6.4 6.4 12.8 9.6 16 12.8 9.6 6.4 22.4 12.8 32 19.2 6.4 3.2 12.8 9.6 19.2 12.8 3.2 3.2 3.2 6.4 9.6 6.4-3.2 0-3.2-3.2-3.2-6.4z" fill="#02608A" p-id="1364"></path><path d="M713.6 166.4c-3.2 0-6.4 0-9.6 3.2 3.2 0 12.8 25.6 16 25.6 3.2-3.2 6.4-9.6 6.4-12.8 0-6.4-3.2-9.6-9.6-12.8 0-3.2 0-3.2-3.2-3.2zM198.4 518.4l-57.6 201.6-57.6-201.6H32c-9.6 86.4-19.2 176-22.4 275.2h44.8c0-73.6 0-137.6 6.4-208l57.6 208h38.4l57.6-208c6.4 73.6 6.4 137.6 9.6 208h48c-3.2-83.2-12.8-172.8-22.4-275.2H198.4zM390.4 588.8c-6.4 60.8-9.6 112-28.8 163.2 0-12.8-3.2-19.2-9.6-44.8l-32-118.4H275.2l44.8 156.8c6.4 22.4 9.6 38.4 9.6 48 0 9.6 0 16-3.2 19.2-6.4 6.4-16 9.6-28.8 9.6h-16v35.2c6.4 3.2 16 6.4 22.4 6.4 25.6 0 48-16 67.2-54.4 25.6-44.8 48-118.4 64-220.8h-44.8z" fill="#02608A" p-id="1365"></path><path d="M953.6 748.8v-230.4h-48v272h115.2v-41.6zM832 771.2c3.2-3.2 6.4-6.4 9.6-12.8 19.2-25.6 28.8-60.8 28.8-112 0-89.6-32-134.4-92.8-134.4-32 0-54.4 12.8-70.4 35.2-19.2 25.6-28.8 60.8-28.8 112 0 48 9.6 83.2 25.6 105.6 16 19.2 38.4 28.8 67.2 28.8 12.8 0 22.4-3.2 32-3.2l57.6 38.4 16-32-44.8-25.6z m-54.4-25.6c-16 0-28.8-6.4-35.2-22.4-9.6-16-12.8-41.6-12.8-73.6 0-60.8 16-89.6 48-89.6 16 0 28.8 6.4 35.2 22.4 9.6 16 12.8 38.4 12.8 73.6 0 60.8-16 89.6-48 89.6zM633.6 656s-35.2-22.4-51.2-32c-19.2-12.8-32-25.6-32-41.6 0-9.6 6.4-16 12.8-25.6 6.4-6.4 16-9.6 28.8-9.6 16 0 32 6.4 44.8 16l9.6-35.2c-19.2-12.8-38.4-19.2-60.8-19.2s-38.4 6.4-54.4 19.2c-12.8 12.8-25.6 38.4-25.6 60.8 0 25.6 9.6 41.6 28.8 57.6 0 0 32 22.4 51.2 32 19.2 12.8 28.8 25.6 28.8 41.6 0 12.8-3.2 22.4-12.8 28.8-9.6 6.4-19.2 3.2-28.8 3.2-16 0-32-6.4-51.2-16l-9.6 32c22.4 16 44.8 25.6 67.2 25.6 25.6 0 44.8-6.4 60.8-22.4 16-16 22.4-35.2 22.4-57.6 0-25.6-9.6-41.6-28.8-57.6z" fill="#E58E01" p-id="1366"></path></svg>

src/assets/database/Oracle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1650692654847" class="icon" viewBox="0 0 8165 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="988" xmlns:xlink="http://www.w3.org/1999/xlink" width="255.15625" height="48"><defs><style type="text/css"></style></defs><path d="M3398.499037 666.115306h520.24153l-274.800972-442.904953-504.499351 800.60224-229.885787 0.187407 614.069914-961.397353A143.303803 143.303803 0 0 1 3643.564782 0.008746c48.350978 0 92.703942 22.801172 118.878438 60.907239l616.193859 963.084015-230.073194-0.187407-107.883901-178.973581h-527.175585l-114.942893-178.723706z m2386.751699 178.911113V10.00378h-195.090574v916.669574c0 25.362399 10.307379 49.600357 28.423379 67.716357 19.115503 18.928096 44.352964 29.360413 71.464494 29.360413h888.995824l114.693017-178.661236H5785.250736z m-3225.2726-149.425762a342.829673 342.829673 0 0 0 0-685.596877H1706.777029v1013.808813h194.903167V188.665016h644.867113a163.856092 163.856092 0 0 1 164.043499 164.105968 163.98103 163.98103 0 0 1-164.043499 164.168437l-549.414537-0.187407 581.77346 507.060579h283.234282l-391.430527-328.399343 89.268149 0.187407zM506.935641 1023.812593a506.873172 506.873172 0 1 1 0-1013.808813h589.269735a506.935641 506.935641 0 0 1 506.873173 506.935641 506.935641 506.935641 0 0 1-506.873173 507.060579l-589.269735-0.187407z m576.151253-178.661236a328.086998 328.086998 0 0 0 328.149467-328.211936 328.086998 328.086998 0 0 0-328.149467-328.211936H519.991655a328.274405 328.274405 0 0 0 0 656.423872h563.095239z m3702.285608 178.661236a506.935641 506.935641 0 1 1 0-1013.808813h700.277084l-114.755487 178.723705h-572.340646a328.274405 328.274405 0 1 0 0 656.423872h702.838312l-114.505611 178.661236h-601.576121z m2384.752692-178.661236a328.086998 328.086998 0 0 1-315.593205-238.506504h833.335977l114.755486-178.723705-948.341339-0.062469a328.211936 328.211936 0 0 1 315.843081-239.193663l572.028302 0.062469 114.942893-178.723705h-700.277084a506.935641 506.935641 0 0 0 0 1013.808813h601.576121l114.505611-178.661236h-702.775843zM7961.482027 117.950149a89.455556 89.455556 0 1 1 179.036051 0 89.455556 89.455556 0 1 1-179.036051 0z m89.580494 114.318204l0 0z m-10.744661-181.597278c17.553779 0 24.800179 0.187407 33.420895 3.435793 22.488827 7.558745 24.800179 28.235972 24.800179 35.794717a49.975171 49.975171 0 0 1-1.374317 10.494785 34.795213 34.795213 0 0 1-15.867117 21.926607c-1.311848 0.999503-2.061476 1.624193-5.747145 2.99851l29.672758 53.098619h-28.673254l-25.987089-48.850729h-17.303903v48.78826h-24.987586V50.671075h32.046579z m8.933061 57.721323c7.683683-0.124938 16.241931-0.687159 21.239448-7.996028a18.990565 18.990565 0 0 0 2.873572-10.932068 16.86662 16.86662 0 0 0-9.62022-15.492303c-5.747145-2.248883-11.619227-2.248883-23.425861-2.248883h-7.058993v36.669282h15.992054z" fill="#d81e06" p-id="989"></path></svg>

src/assets/database/clickhouse.svg

@@ -0,0 +1 @@
+<svg height="2222" viewBox="0 0 9 8" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m0 7h1v1h-1z" fill="#f00"/><path d="m0 0h1v7h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 0h1v8h-1zm2 3.25h1v1.5h-1z" fill="#fc0"/></svg>

src/assets/database/default.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1652175124881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42276" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M64 154.944a411.52 154.944 0 1 0 823.04 0 411.52 154.944 0 1 0-823.04 0Z" fill="#434343" p-id="42277"></path><path d="M477.632 709.12c-225.024 0-412.608-62.72-412.608-104.704v209.216c0 76.032 184.768 137.344 412.608 137.344s412.608-61.376 412.608-137.344V604.416c0 41.984-187.584 104.704-412.608 104.704z" fill="#434343" p-id="42278"></path><path d="M479.616 387.264C254.592 387.264 67.008 323.136 67.008 280.128v214.144c0 77.696 184.768 140.544 412.608 140.544s412.608-62.848 412.608-140.544V280.128c0 43.008-187.584 107.136-412.608 107.136z" fill="#434343" p-id="42279"></path></svg>

src/assets/database/elasticsearch.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M255.96 134.393c0-21.521-13.373-40.117-33.223-47.43a75.239 75.239 0 0 0 1.253-13.791c0-39.909-32.386-72.295-72.295-72.295-23.193 0-44.923 11.074-58.505 30.088-6.686-5.224-14.835-7.94-23.402-7.94-21.104 0-38.446 17.133-38.446 38.446 0 4.597.836 9.194 2.298 13.373C13.582 81.739 0 100.962 0 122.274c0 21.522 13.373 40.327 33.431 47.64-.835 4.388-1.253 8.985-1.253 13.79 0 39.7 32.386 72.087 72.086 72.087 23.402 0 44.924-11.283 58.505-30.088 6.686 5.223 15.044 8.149 23.611 8.149 21.104 0 38.446-17.134 38.446-38.446 0-4.597-.836-9.194-2.298-13.373 19.64-7.104 33.431-26.327 33.431-47.64z" fill="#FFF"/><path d="M100.085 110.364l57.043 26.119 57.669-50.565a64.312 64.312 0 0 0 1.253-12.746c0-35.52-28.834-64.355-64.355-64.355-21.313 0-41.162 10.447-53.072 27.998l-9.612 49.73 11.074 23.82z" fill="#F4BD19"/><path d="M40.953 170.75c-.835 4.179-1.253 8.567-1.253 12.955 0 35.52 29.043 64.564 64.564 64.564 21.522 0 41.372-10.656 53.49-28.208l9.403-49.729-12.746-24.238-57.251-26.118-56.207 50.774z" fill="#3CBEB1"/><path d="M40.536 71.918l39.073 9.194 8.775-44.506c-5.432-4.179-11.91-6.268-18.805-6.268-16.925 0-30.924 13.79-30.924 30.924 0 3.552.627 7.313 1.88 10.656z" fill="#E9478C"/><path d="M37.192 81.32c-17.551 5.642-29.67 22.567-29.67 40.954 0 17.97 11.074 34.059 27.79 40.327l54.953-49.73-10.03-21.52-43.043-10.03z" fill="#2C458F"/><path d="M167.784 219.852c5.432 4.18 11.91 6.478 18.596 6.478 16.925 0 30.924-13.79 30.924-30.924 0-3.761-.627-7.314-1.88-10.657l-39.073-9.193-8.567 44.296z" fill="#95C63D"/><path d="M175.724 165.317l43.043 10.03c17.551-5.85 29.67-22.566 29.67-40.954 0-17.97-11.074-33.849-27.79-40.326l-56.415 49.311 11.492 21.94z" fill="#176655"/></svg>

src/assets/database/presto.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2500" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid"><rect width="256" height="256" rx="18"/><path d="M230.118 128.531c0 7.047-5.713 12.76-12.761 12.76-7.047 0-12.76-5.713-12.76-12.76 0-7.048 5.713-12.761 12.76-12.761 7.048 0 12.761 5.713 12.761 12.761" fill="#669CFE"/><path d="M203.806 154.531c0 7.047-5.713 12.76-12.761 12.76-7.048 0-12.761-5.713-12.761-12.76 0-7.048 5.713-12.761 12.761-12.761 7.048 0 12.761 5.713 12.761 12.761" fill="#3FE7FE"/><path d="M177.451 181.072c0 7.048-5.713 12.761-12.76 12.761-7.048 0-12.761-5.713-12.761-12.761 0-7.047 5.713-12.76 12.761-12.76 7.047 0 12.76 5.713 12.76 12.76" fill="#FFF"/><path d="M202.993 102.336c0 6.597-5.348 11.944-11.944 11.944-6.597 0-11.945-5.347-11.945-11.944s5.348-11.945 11.945-11.945c6.596 0 11.944 5.348 11.944 11.945" fill="#669CFE"/><path d="M176.738 128.298c0 6.597-5.348 11.945-11.944 11.945-6.597 0-11.945-5.348-11.945-11.945s5.348-11.945 11.945-11.945c6.596 0 11.944 5.348 11.944 11.945" fill="#3FE7FE"/><path d="M150.569 154.642c0 6.597-5.347 11.945-11.944 11.945s-11.945-5.348-11.945-11.945 5.348-11.944 11.945-11.944 11.944 5.347 11.944 11.944" fill="#FFF"/><path d="M175.743 76.235c0 5.991-4.857 10.849-10.849 10.849s-10.849-4.858-10.849-10.849c0-5.992 4.857-10.849 10.849-10.849s10.849 4.857 10.849 10.849" fill="#669CFE"/><path d="M149.522 102.191c0 5.991-4.858 10.849-10.85 10.849-5.991 0-10.849-4.858-10.849-10.849 0-5.992 4.858-10.85 10.849-10.85 5.992 0 10.85 4.858 10.85 10.85" fill="#3FE7FE"/><path d="M123.253 128.618c0 5.992-4.857 10.849-10.849 10.849s-10.849-4.857-10.849-10.849c0-5.991 4.857-10.849 10.849-10.849s10.849 4.858 10.849 10.849" fill="#FFF"/><path d="M148.618 50.008c0 5.386-4.366 9.752-9.752 9.752-5.386 0-9.752-4.366-9.752-9.752 0-5.387 4.366-9.753 9.752-9.753 5.386 0 9.752 4.366 9.752 9.753" fill="#669CFE"/><path d="M122.297 76.089c0 5.386-4.366 9.753-9.752 9.753-5.386 0-9.752-4.367-9.752-9.753s4.366-9.752 9.752-9.752c5.386 0 9.752 4.366 9.752 9.752" fill="#3FE7FE"/><path d="M96.06 102.471c0 5.386-4.367 9.752-9.753 9.752s-9.752-4.366-9.752-9.752c0-5.386 4.366-9.753 9.752-9.753 5.386 0 9.753 4.367 9.753 9.753" fill="#FFF"/><path d="M95.06 154.721a8.67 8.67 0 1 1-17.338-.002 8.67 8.67 0 0 1 17.338.002M121.185 180.846a8.67 8.67 0 1 1-17.338-.002 8.67 8.67 0 0 1 17.338.002M147.268 206.929a8.669 8.669 0 0 1-8.669 8.669 8.669 8.669 0 0 1-8.669-8.669 8.669 8.669 0 0 1 8.669-8.669 8.669 8.669 0 0 1 8.669 8.669M95.185 206.929a8.67 8.67 0 1 1-17.339 0 8.67 8.67 0 0 1 17.339 0M42.601 206.929a8.67 8.67 0 1 1-17.337 0 8.67 8.67 0 0 1 17.337 0M68.726 180.804a8.67 8.67 0 1 1-17.337 0 8.67 8.67 0 0 1 17.337 0" fill="#6A9EFE"/><path d="M95.172 50.032a9.06 9.06 0 0 1-18.118 0 9.06 9.06 0 1 1 18.118 0" fill="#3FE7FE"/><path d="M68.799 76.538a9.06 9.06 0 1 1-18.12 0 9.06 9.06 0 0 1 18.12 0M41.174 49.663a7.31 7.31 0 1 1-14.62 0 7.31 7.31 0 0 1 14.62 0" fill="#FFF"/></svg>

src/assets/database/redis.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2148" viewBox="0 0 256 220" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M245.97 168.943c-13.662 7.121-84.434 36.22-99.501 44.075-15.067 7.856-23.437 7.78-35.34 2.09-11.902-5.69-87.216-36.112-100.783-42.597C3.566 169.271 0 166.535 0 163.951v-25.876s98.05-21.345 113.879-27.024c15.828-5.679 21.32-5.884 34.79-.95 13.472 4.936 94.018 19.468 107.331 24.344l-.006 25.51c.002 2.558-3.07 5.364-10.024 8.988" fill="#912626"/><path d="M245.965 143.22c-13.661 7.118-84.431 36.218-99.498 44.072-15.066 7.857-23.436 7.78-35.338 2.09-11.903-5.686-87.214-36.113-100.78-42.594-13.566-6.485-13.85-10.948-.524-16.166 13.326-5.22 88.224-34.605 104.055-40.284 15.828-5.677 21.319-5.884 34.789-.948 13.471 4.934 83.819 32.935 97.13 37.81 13.316 4.881 13.827 8.9.166 16.02" fill="#C6302B"/><path d="M245.97 127.074c-13.662 7.122-84.434 36.22-99.501 44.078-15.067 7.853-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.112-100.783-42.597C3.566 127.402 0 124.67 0 122.085V96.206s98.05-21.344 113.879-27.023c15.828-5.679 21.32-5.885 34.79-.95C162.142 73.168 242.688 87.697 256 92.574l-.006 25.513c.002 2.557-3.07 5.363-10.024 8.987" fill="#912626"/><path d="M245.965 101.351c-13.661 7.12-84.431 36.218-99.498 44.075-15.066 7.854-23.436 7.777-35.338 2.087-11.903-5.686-87.214-36.112-100.78-42.594-13.566-6.483-13.85-10.947-.524-16.167C23.151 83.535 98.05 54.148 113.88 48.47c15.828-5.678 21.319-5.884 34.789-.949 13.471 4.934 83.819 32.933 97.13 37.81 13.316 4.88 13.827 8.9.166 16.02" fill="#C6302B"/><path d="M245.97 83.653c-13.662 7.12-84.434 36.22-99.501 44.078-15.067 7.854-23.437 7.777-35.34 2.087-11.903-5.687-87.216-36.113-100.783-42.595C3.566 83.98 0 81.247 0 78.665v-25.88s98.05-21.343 113.879-27.021c15.828-5.68 21.32-5.884 34.79-.95C162.142 29.749 242.688 44.278 256 49.155l-.006 25.512c.002 2.555-3.07 5.361-10.024 8.986" fill="#912626"/><path d="M245.965 57.93c-13.661 7.12-84.431 36.22-99.498 44.074-15.066 7.854-23.436 7.777-35.338 2.09C99.227 98.404 23.915 67.98 10.35 61.497-3.217 55.015-3.5 50.55 9.825 45.331 23.151 40.113 98.05 10.73 113.88 5.05c15.828-5.679 21.319-5.883 34.789-.948 13.471 4.935 83.819 32.934 97.13 37.811 13.316 4.876 13.827 8.897.166 16.017" fill="#C6302B"/><path d="M159.283 32.757l-22.01 2.285-4.927 11.856-7.958-13.23-25.415-2.284 18.964-6.839-5.69-10.498 17.755 6.944 16.738-5.48-4.524 10.855 17.067 6.391M131.032 90.275L89.955 73.238l58.86-9.035-17.783 26.072M74.082 39.347c17.375 0 31.46 5.46 31.46 12.194 0 6.736-14.085 12.195-31.46 12.195s-31.46-5.46-31.46-12.195c0-6.734 14.085-12.194 31.46-12.194" fill="#FFF"/><path d="M185.295 35.998l34.836 13.766-34.806 13.753-.03-27.52" fill="#621B1C"/><path d="M146.755 51.243l38.54-15.245.03 27.519-3.779 1.478-34.791-13.752" fill="#9A2928"/></svg>

src/assets/database/trino.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.1 62.45"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#dd00a1;}.cls-3{fill:#f9d8d2;}.cls-4{fill:#10110e;}.cls-5{fill:#e5e5e5;}.cls-6{fill:#8accce;opacity:0.2;isolation:isolate;}.cls-7{fill:#515151;}</style></defs><path class="cls-1" d="M14.24,55.36c.92-.61-1.49-.38-1.69-.79a15,15,0,0,1-2.82-.51C8,53.62,3.9,50.85,3.47,48.25s0-7.65,1.83-10.61A17,17,0,0,1,9.73,33S6.16,24.51,5.85,18.1,6,.21,10.24,0s3.49,10.48,2.82,17.43a89.47,89.47,0,0,0-.21,13.89,19.45,19.45,0,0,1,5.51-.92,21.2,21.2,0,0,1,4.9.46S24.58,21,29,14.86,38,2.4,41,4.19s-.81,8.19-3.46,11.52-7.25,8.33-8.78,11a47.26,47.26,0,0,0-2.65,5.51,15,15,0,0,1,6.4,6.32c2.07,4.28,2.27,9.59,1.15,11.83a8.1,8.1,0,0,1-5.61,4c-1.32.1-6.91,1.48-6.91,1.48Z" transform="translate(0 0)"/><path class="cls-2" d="M24,30.94s3.33-8.7,6.32-13.6,7-8.59,8.26-7.84S36,14.85,32.66,19.32a112.3,112.3,0,0,0-7.44,12.37Z" transform="translate(0 0)"/><path class="cls-2" d="M10.64,32.44l.95-.75s-.13-8.7,0-14S12,5.78,10.23,5.85,7.23,11,7.92,18.23A86.92,86.92,0,0,0,10.64,32.44Z" transform="translate(0 0)"/><circle class="cls-3" cx="7.65" cy="49.17" r="1.94"/><circle class="cls-3" cx="30.57" cy="49.17" r="1.94"/><path class="cls-4" d="M22.33,49a.19.19,0,0,0-.25,0h0s-.57,1-1.41,1.06a2.11,2.11,0,0,1-1.5-.7V48c.54-.29,1.41-1.19,1.41-1.5a1.4,1.4,0,0,0-1.5-1.09c-1,0-1.7.65-1.7,1.19s1.1,1.23,1.41,1.44v1.45a1.77,1.77,0,0,1-1.3.7c-.8,0-1.4-1.08-1.4-1.09a.19.19,0,0,0-.25-.08h0a.18.18,0,0,0-.08.23h0c0,.06.71,1.29,1.73,1.29a2.07,2.07,0,0,0,1.5-.72,2.46,2.46,0,0,0,1.59.73h.14a2.47,2.47,0,0,0,1.71-1.25.18.18,0,0,0,0-.25A.24.24,0,0,0,22.33,49Z" transform="translate(0 0)"/><path class="cls-5" d="M9.73,33S7,26,6.42,22.29s-1-9.78-.3-13.85A46.3,46.3,0,0,1,7.31,2.85S6,12.34,6.49,16.49,9.73,33,9.73,33Z" transform="translate(0 0)"/><path class="cls-5" d="M23.26,30.85s2-10.59,4.91-14.76S34.73,6.9,36.52,5.62l1.82-1.28S31,12,28.17,18.34,23.26,30.85,23.26,30.85Z" transform="translate(0 0)"/><path class="cls-4" d="M11.6,42.85a1.52,1.52,0,1,0,1.52,1.52h0a1.52,1.52,0,0,0-1.5-1.52Zm.4,1.41a.42.42,0,1,1,.42-.42h0a.42.42,0,0,1-.41.43h0Z" transform="translate(0 0)"/><path class="cls-4" d="M26.55,42.85a1.52,1.52,0,1,0,1.51,1.53h0a1.52,1.52,0,0,0-1.51-1.53ZM27,44.26a.42.42,0,0,1-.43-.41h0a.43.43,0,0,1,.41-.43.42.42,0,0,1,.43.41h0a.41.41,0,0,1-.4.42h0Z" transform="translate(0 0)"/><ellipse class="cls-6" cx="19.36" cy="44.95" rx="14.1" ry="10.16"/><path class="cls-1" d="M36.43,39.3V32.58a2.46,2.46,0,0,0,1.91-2.29,2.65,2.65,0,0,0-5.27,0A2.48,2.48,0,0,0,35,32.58v6.55h-.2c-2-6.94-7.91-11.28-15.63-11.28S5.51,32.15,3.55,39.13H2.88A2.76,2.76,0,0,0,0,41.71v5.14a2.75,2.75,0,0,0,2.88,2.59h.91a13,13,0,0,0,3.59,5.11L6.09,55.72A.78.78,0,0,0,6,56.82l0,0H6c2.93,3.53,7.72,5.6,13.13,5.6s10.21-2,13.14-5.6a.79.79,0,0,0-.09-1.11h0l-1.3-1.19a13,13,0,0,0,3.59-5.08h1a2.74,2.74,0,0,0,2.87-2.6V41.71A2.58,2.58,0,0,0,36.43,39.3Zm-17.26-4c7.14,0,12.94,4.7,12.94,10.47,0,6.25-6.51,9-12.94,9S6.23,52,6.23,45.72C6.23,40,12,35.25,19.17,35.25Z" transform="translate(0 0)"/><path class="cls-7" d="M36.91,45.16H35v-1a18.61,18.61,0,0,0-.39-3.79h.82a1.35,1.35,0,0,1,1.44,1.25h0Z" transform="translate(0 0)"/><path class="cls-7" d="M35.47,48.18h-1A16.13,16.13,0,0,0,34.89,46h2v.85a1.34,1.34,0,0,1-1.36,1.32h-.06Z" transform="translate(0 0)"/><path class="cls-7" d="M19.17,61.1c-4.79,0-9.06-1.72-11.74-4.78l1.3-1.21a17.87,17.87,0,0,0,10.4,3,17.73,17.73,0,0,0,10.4-3l1.35,1.21C28.23,59.38,24,61.1,19.17,61.1Z" transform="translate(0 0)"/><path class="cls-7" d="M2.88,40.42h.85a19.33,19.33,0,0,0-.38,3.79,8.34,8.34,0,0,0,0,1H1.49v-3.5a1.27,1.27,0,0,1,1.24-1.29Z" transform="translate(0 0)"/><path d="M19.17,34.39a17.66,17.66,0,0,0-4.79.69V29.85a17.23,17.23,0,0,1,4.79-.64,17.3,17.3,0,0,1,4.8.64v5.26A15.91,15.91,0,0,0,19.17,34.39Z" transform="translate(0 0)"/><path class="cls-7" d="M1.44,46h2a17.56,17.56,0,0,0,.43,2.16h-1a1.35,1.35,0,0,1-1.44-1.25h0V46Z" transform="translate(0 0)"/><ellipse class="cls-7" cx="35.71" cy="30.29" rx="1.2" ry="1.08"/></svg>

src/assets/images/icon-unlock.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.79171 4.37499C3.79171 2.60308 5.22813 1.16666 7.00004 1.16666C8.77196 1.16666 10.2084 2.60308 10.2084 4.37499H9.04171C9.04171 3.24741 8.12762 2.33332 7.00004 2.33332C5.87246 2.33332 4.95837 3.24741 4.95837 4.37499V5.54166H11.6667C12.15 5.54166 12.5417 5.93341 12.5417 6.41666V11.6667C12.5417 12.1499 12.15 12.5417 11.6667 12.5417H2.33337C1.85013 12.5417 1.45837 12.1499 1.45837 11.6667V6.41666C1.45837 5.93341 1.85012 5.54166 2.33337 5.54166H3.79171V4.37499ZM2.62504 6.70832V11.375H11.375V6.70832H2.62504ZM7.58337 10.5V7.58332H6.41671V10.5H7.58337Z" fill="#4E5969"/>
+</svg>

src/assets/images/icon-user.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.25004 4.375C5.25004 3.4085 6.03354 2.62499 7.00004 2.62499C7.96654 2.62499 8.75004 3.4085 8.75004 4.375C8.75004 5.34149 7.96654 6.125 7.00004 6.125C6.03354 6.125 5.25004 5.34149 5.25004 4.375ZM7.00004 1.45833C5.38921 1.45833 4.08337 2.76416 4.08337 4.375C4.08337 5.98583 5.38921 7.29166 7.00004 7.29166C8.61087 7.29166 9.91671 5.98583 9.91671 4.375C9.91671 2.76416 8.61087 1.45833 7.00004 1.45833ZM4.66671 7.875C3.82716 7.875 3.03057 8.13082 2.43366 8.63611C1.8275 9.14923 1.45837 9.8955 1.45837 10.7917V11.6667C1.45837 12.1499 1.85013 12.5417 2.33337 12.5417H11.6667C12.15 12.5417 12.5417 12.1499 12.5417 11.6667V10.7917C12.5417 9.8955 12.1726 9.14923 11.5664 8.63611C10.9695 8.13082 10.1729 7.875 9.33337 7.875H4.66671ZM2.62504 10.7917C2.62504 10.2381 2.84354 9.81768 3.18744 9.52657C3.54059 9.22763 4.0565 9.04166 4.66671 9.04166H9.33337C9.94358 9.04166 10.4595 9.22763 10.8126 9.52657C11.1565 9.81768 11.375 10.2381 11.375 10.7917V11.375H2.62504V10.7917Z" fill="#4E5969"/>
+</svg>

src/assets/images/j-icon1.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="14" height="14" rx="2" fill="#233A82"/>
+<path d="M10.6625 3.56079H5.26806C4.32646 3.56079 3.56006 4.32719 3.56006 5.26879V10.7288C3.56006 11.6704 4.32646 12.4368 5.26806 12.4368H10.6625C11.6041 12.4368 12.3705 11.6704 12.3705 10.7288V5.26879C12.3713 4.32719 11.6049 3.56079 10.6625 3.56079ZM6.07926 10.4432C5.42886 10.4432 4.89926 9.91359 4.89926 9.26319C4.89926 8.61279 5.42886 8.08319 6.07926 8.08319C6.72966 8.08319 7.25926 8.61279 7.25926 9.26319C7.25926 9.91439 6.72966 10.4432 6.07926 10.4432ZM7.43286 6.07519L6.25286 7.22159C6.17046 7.30159 6.06086 7.34639 5.94646 7.34639H5.93926C5.88126 7.34555 5.82401 7.33316 5.77085 7.30995C5.7177 7.28673 5.6697 7.25316 5.62966 7.21119L4.94006 6.49359C4.85925 6.4094 4.81513 6.29659 4.81738 6.17991C4.81963 6.06323 4.86806 5.95221 4.95206 5.87119C5.03625 5.79038 5.14906 5.74626 5.26574 5.74851C5.38242 5.75076 5.49344 5.79919 5.57446 5.88319L5.95766 6.28159L6.82006 5.44399C6.86149 5.40367 6.91046 5.37192 6.96417 5.35054C7.01788 5.32916 7.07528 5.31858 7.13308 5.31939C7.19089 5.32021 7.24796 5.33241 7.30105 5.3553C7.35413 5.37819 7.40218 5.41132 7.44246 5.45279C7.52325 5.53684 7.56757 5.6494 7.56577 5.76597C7.56397 5.88253 7.5162 5.99367 7.43286 6.07519ZM10.7977 9.78159H8.25446C7.98966 9.78159 7.77446 9.56639 7.77446 9.30159C7.77446 9.03679 7.98966 8.82159 8.25446 8.82159H10.7977C11.0625 8.82159 11.2777 9.03679 11.2777 9.30159C11.2777 9.56639 11.0625 9.78159 10.7977 9.78159ZM10.7977 6.90559H8.25446C7.98966 6.90559 7.77446 6.69039 7.77446 6.42559C7.77446 6.16079 7.98966 5.94559 8.25446 5.94559H10.7977C11.0625 5.94559 11.2777 6.16079 11.2777 6.42559C11.2777 6.69039 11.0625 6.90559 10.7977 6.90559Z" fill="white"/>
+<path d="M6.00159 8.87109C5.77919 8.87109 5.59839 9.05189 5.59839 9.27429C5.59839 9.49669 5.77919 9.67749 6.00159 9.67749C6.22399 9.67749 6.40479 9.49669 6.40479 9.27429C6.40479 9.05189 6.22399 8.87109 6.00159 8.87109Z" fill="white"/>
+</svg>

src/assets/images/j-icon2.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="14" height="14" rx="2" fill="#3491FA"/>
+<path d="M7.99326 2.81006C5.13086 2.81006 2.81006 5.13086 2.81006 7.99326C2.81006 10.8557 5.13086 13.1765 7.99326 13.1765C10.8557 13.1765 13.1765 10.8557 13.1765 7.99326C13.1765 5.13086 10.8557 2.81006 7.99326 2.81006ZM10.0005 8.98046H7.54686C7.40873 8.98046 7.27627 8.92559 7.1786 8.82792C7.08093 8.73025 7.02606 8.59778 7.02606 8.45966V5.61166C7.02606 5.47353 7.08093 5.34107 7.1786 5.2434C7.27627 5.14573 7.40873 5.09086 7.54686 5.09086C7.68498 5.09086 7.81745 5.14573 7.91512 5.2434C8.01279 5.34107 8.06766 5.47353 8.06766 5.61166V7.93886H10.0005C10.1386 7.93886 10.2711 7.99373 10.3687 8.0914C10.4664 8.18907 10.5213 8.32153 10.5213 8.45966C10.5213 8.74766 10.2885 8.98046 10.0005 8.98046Z" fill="white"/>
+</svg>

src/assets/images/j-icon3.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="14" height="14" rx="2" fill="#F53F3F"/>
+<path d="M7.71483 3.27373C6.72523 2.95373 5.76843 3.31693 5.10843 3.70653C4.99243 3.32333 4.63323 3.05453 4.22363 3.10653C3.85483 3.15293 3.55403 3.46813 3.50683 3.85933C3.46603 4.20093 3.61163 4.50973 3.85003 4.68813V12.6521C3.85003 12.9273 4.05003 13.1673 4.31003 13.1761C4.57883 13.1849 4.79883 12.9561 4.79883 12.6737V9.94893C7.47963 8.18173 9.11003 9.41773 10.2492 9.69533C11.1788 9.92173 11.9716 9.55853 12.2732 9.38813C12.354 9.34253 12.4036 9.25293 12.4036 9.15613V4.21773C12.4036 4.02013 12.2076 3.89693 12.0412 3.98413C10.6996 4.69053 9.35963 3.80573 7.71483 3.27373ZM9.92043 6.09693C9.52043 6.00733 8.99403 5.81853 8.35083 5.43693C7.21963 4.76653 6.23403 5.39693 6.19323 5.42413C5.97643 5.56653 5.69003 5.49773 5.55403 5.26813C5.41803 5.03933 5.48123 4.73773 5.69643 4.59213C5.75643 4.55213 7.17803 3.61293 8.80443 4.57773C9.36923 4.91213 9.80763 5.06573 10.114 5.13453C10.3276 5.18253 10.4788 5.38413 10.4788 5.61533C10.478 5.92653 10.2084 6.16093 9.92043 6.09693Z" fill="white"/>
+</svg>

src/assets/images/j-icon4.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="14" height="14" rx="2" fill="#F77234"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.3488 7.76984L12.036 6.45704C11.9757 6.39681 11.9417 6.31509 11.9416 6.22984V4.37224C11.9416 4.19464 11.7976 4.05144 11.6208 4.05144H9.76399C9.67919 4.05144 9.59679 4.01784 9.53679 3.95704L8.22399 2.64424C8.19417 2.61438 8.15875 2.59069 8.11977 2.57453C8.08078 2.55837 8.03899 2.55005 7.99679 2.55005C7.95459 2.55005 7.9128 2.55837 7.87382 2.57453C7.83483 2.59069 7.79942 2.61438 7.76959 2.64424L6.45599 3.95704C6.39576 4.01737 6.31404 4.05133 6.22879 4.05144H4.37199C4.32986 4.05144 4.28815 4.05973 4.24923 4.07586C4.21031 4.09198 4.17494 4.11561 4.14515 4.1454C4.11536 4.17519 4.09173 4.21055 4.07561 4.24947C4.05949 4.28839 4.05119 4.33011 4.05119 4.37224V6.22904C4.05119 6.31384 4.01759 6.39624 3.95679 6.45624L2.64399 7.76984C2.61413 7.79966 2.59045 7.83508 2.57428 7.87406C2.55812 7.91305 2.5498 7.95483 2.5498 7.99704C2.5498 8.03924 2.55812 8.08103 2.57428 8.12001C2.59045 8.159 2.61413 8.19441 2.64399 8.22424L3.95679 9.53704C4.01713 9.59726 4.05108 9.67898 4.05119 9.76424V11.621C4.05119 11.7986 4.19519 11.9418 4.37199 11.9418H6.22879C6.31359 11.9418 6.39599 11.9754 6.45599 12.0362L7.76879 13.349C7.79862 13.3789 7.83403 13.4026 7.87302 13.4187C7.912 13.4349 7.95379 13.4432 7.99599 13.4432C8.03819 13.4432 8.07998 13.4349 8.11897 13.4187C8.15795 13.4026 8.19337 13.3789 8.22319 13.349L9.53599 12.0362C9.59622 11.9759 9.67794 11.9419 9.76319 11.9418H11.62C11.7976 11.9418 11.9408 11.7978 11.9408 11.621V9.76424C11.9408 9.67944 11.9744 9.59704 12.0352 9.53704L13.348 8.22424C13.378 8.19451 13.4018 8.15915 13.4181 8.12019C13.4344 8.08123 13.4428 8.03943 13.4429 7.9972C13.443 7.95497 13.4347 7.91315 13.4185 7.87413C13.4024 7.83511 13.3787 7.79966 13.3488 7.76984ZM5.44559 6.59864C5.44559 5.83624 5.90959 5.23944 6.50239 5.23944C7.09519 5.23944 7.55919 5.83624 7.55919 6.59864C7.55919 7.36104 7.09519 7.95784 6.50239 7.95784C5.90959 7.95784 5.44559 7.36104 5.44559 6.59864ZM7.29919 10.6354C7.26265 10.7068 7.20706 10.7668 7.13859 10.8086C7.07011 10.8503 6.99141 10.8724 6.91119 10.8722C6.83657 10.8722 6.7632 10.8531 6.69812 10.8165C6.63305 10.78 6.57845 10.7274 6.53958 10.6637C6.5007 10.6 6.47885 10.5274 6.47612 10.4528C6.47339 10.3782 6.48988 10.3042 6.52399 10.2378L8.79679 5.80344C8.8228 5.75245 8.85863 5.7071 8.90221 5.66999C8.9458 5.63288 8.99628 5.60475 9.05077 5.58721C9.10525 5.56966 9.16267 5.56306 9.21972 5.56776C9.27676 5.57247 9.33232 5.5884 9.38319 5.61464C9.43412 5.64072 9.4794 5.67658 9.51645 5.72018C9.55351 5.76377 9.5816 5.81424 9.59914 5.8687C9.61667 5.92316 9.6233 5.98055 9.61864 6.03757C9.61399 6.0946 9.59813 6.15014 9.57199 6.20104L7.29919 10.6354ZM9.88399 10.6098C9.29119 10.6098 8.82719 10.013 8.82719 9.25064C8.82719 8.48824 9.29119 7.89144 9.88399 7.89144C10.4768 7.89144 10.9408 8.48824 10.9408 9.25064C10.9408 10.013 10.476 10.6098 9.88399 10.6098ZM9.83644 8.79917C9.77912 8.86492 9.69824 9.01737 9.69824 9.2507C9.69824 9.5603 9.84064 9.7283 9.88544 9.7387C9.9002 9.73464 9.92826 9.71018 9.95806 9.66594C10.0154 9.60092 10.0972 9.44762 10.0972 9.213C10.0972 8.9034 9.95481 8.7354 9.91001 8.725C9.89509 8.72909 9.86659 8.75404 9.83644 8.79917ZM6.49961 6.1106C6.54441 6.121 6.68681 6.289 6.68681 6.5986C6.68681 6.9082 6.54521 7.0754 6.50361 7.0866C6.45881 7.0762 6.31641 6.9082 6.31641 6.5986C6.31641 6.289 6.45881 6.1218 6.49961 6.1106Z" fill="white"/>
+</svg>

src/styles/datastyle.css

@@ -171,13 +171,23 @@ body .hasTagsView .app-main .el-card{
 	border: 0;
 	border-radius: 0;
 }
+body .el-card.box-card.is-always-shadow,
 body .hasTagsView .app-main .el-card.box-card.is-always-shadow{
 	box-shadow: none;
 }
+body .el-card .el-card__header,
 body .hasTagsView .app-main .el-card .el-card__header{
 	border-bottom: 1px solid #E5E6EB;
 	padding: 10px 20px;
 }
+body .el-card .el-card__header .clearfix::before,
+body .el-card .el-card__header .clearfix::after{
+	content: "";
+	display: table;
+}
+body .el-card .el-card__header .clearfix::after{
+	clear: both;
+}
 body .hasTagsView .app-main .el-card .el-card__header>.clearfix>span{
 	line-height: 29px;
 	font-weight: bold;
@@ -248,18 +258,23 @@ body .el-button.is-disabled:hover {
     border-color: #E5E6EB;
 }
 body .el-button--primary,
-body .el-button--primary:focus{
+body .el-button--primary:focus,
+body .el-button.ms-btn,
+body .el-button.ms-btn:focus{
 	color:#fff;
 	background-color:#233A82;
 	border-color:#233A82;
 }
-body .el-button--primary:hover{
+body .el-button--primary:hover,
+body .el-button.ms-btn:hover{
 	color:#fff;
 	background:#2B50C4;
 	border-color:#2B50C4;
 }
 body .el-button--primary:active,
-body .el-button--primary.is-active{
+body .el-button--primary.is-active,
+body .el-button.ms-btn:active,
+body .el-button.ms-btn.is-active{
 	color:#fff;
 	background:#042281;
 	border-color:#042281;
@@ -267,11 +282,63 @@ body .el-button--primary.is-active{
 body .el-button--primary.is-disabled,
 body .el-button--primary.is-disabled:active,
 body .el-button--primary.is-disabled:focus,
-body .el-button--primary.is-disabled:hover {
+body .el-button--primary.is-disabled:hover ,
+body .el-button.ms-btn.is-disabled,
+body .el-button.ms-btn.is-disabled:active,
+body .el-button.ms-btn.is-disabled:focus,
+body .el-button.ms-btn.is-disabled:hover{
     color: #fff;
     background-color: #93A7E4;
     border-color: #93A7E4;
 }
+body .el-button.is-plain,
+body .el-button.is-plain:focus{
+	color:#4E5969;
+	background-color:#fff;
+	border-color:#E5E6EB;
+}
+body .el-button.is-plain:hover{
+	color:#4E5969;
+	background-color:#fff;
+	border-color:#C9CDD4;
+}
+body .el-button.is-plain:active{
+	color:#4E5969;
+	background-color:#fff;
+	border-color:#86909C;
+}
+body .el-button.is-plain.is-disabled,
+body .el-button.is-plain.is-disabled:active,
+body .el-button.is-plain.is-disabled:focus,
+body .el-button.is-plain.is-disabled:hover {
+    color: #C9CDD4;
+    background-color: #fff;
+    border-color: #E5E6EB;
+}
+body .el-button--primary.is-plain,
+body .el-button--primary.is-plain:focus{
+    color: #4e5969;
+    background: #f2f3f5;
+    border-color: #f2f3f5;
+}
+body .el-button--primary.is-plain:hover{
+    color: #4e5969;
+    background: #e5e6eb;
+    border-color: #e5e6eb;
+}
+body .el-button--primary.is-plain:active{
+    color: #4e5969;
+    background: #c9cdd4;
+    border-color: #c9cdd4;
+}
+body .el-button--primary.is-plain.is-disabled,
+body .el-button--primary.is-plain.is-disabled:active,
+body .el-button--primary.is-plain.is-disabled:focus,
+body .el-button--primary.is-plain.is-disabled:hover {
+    color: #c9cdd4;
+    background-color: #f7f8fa;
+    border-color: #f7f8fa;
+}
 body .el-button--text,
 body .el-button--text:focus{
 	color: #233A82;
@@ -346,9 +413,28 @@ body .el-table--medium .el-table__cell {
 body .el-table--border {
     border: 0;
 }
+body .el-table--border::after,
+body .el-table--group::after,
+body .el-table::before {
+    background-color: #e5e6eb;
+}
+body .el-table--border::after {
+    content: none;
+}
+body .el-table--border.btable::after {
+    content: "";
+}
 body .el-table--border .el-table__cell {
     border-right: 0;
 }
+body .el-table.btable{
+	border-top: 1px solid #e5e6eb !important;
+	border-left: 1px solid #e5e6eb !important;
+}
+body .el-table.btable .el-table__cell {
+    border-right: 1px solid #EBEEF5;
+}
+
 
 /*el-tree*/
 body .el-tree {
@@ -360,12 +446,12 @@ body .el-tree-node+.el-tree-node{
 body .el-tree-node__content{
 	height: 34px;
 }
-body .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+body .el-tree-node.is-current>.el-tree-node__content {
     background-color: #f2f3f5;
 	color: #233A82;
 	font-weight: bold;
 }
-body .el-tree--highlight-current .el-tree-node .el-tree-node__content:hover{
+body .el-tree-node .el-tree-node__content:hover{
 	background-color: #f2f3f5;
 }
 
@@ -381,6 +467,10 @@ body .el-checkbox__input.is-checked .el-checkbox__inner {
 body .el-checkbox__input.is-checked+.el-checkbox__label {
     color: #233A82;
 }
+body .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+    background-color: #233A82;
+    border-color: #233A82;
+}
 
 /*el-radio*/
 body .el-radio__inner:hover,
@@ -397,7 +487,8 @@ body .el-radio__input.is-checked+.el-radio__label {
 
 /*el-input*/
 body .el-textarea__inner:focus,
-body .el-input__inner:focus{
+body .el-input__inner:focus,
+body .el-select .el-input__inner:focus{
 	border-color:#233A82
 }
 
@@ -424,3 +515,379 @@ body .el-pager li.active {
 body #el-main-footer{
 	display: none;
 }
+
+/*el-switch*/
+body .el-switch.is-checked .el-switch__core {
+    border-color: #233a82;
+    background-color: #233a82;
+}
+
+/*el-step*/
+body .el-step__title {
+    font-size: 14px;
+    line-height: 32px;
+}
+body .el-step__line {
+    background-color: #E5E6EB;
+}
+body .el-step__head.is-success {
+    color: #00B42A;
+    border-color: #00B42A;
+}
+body .el-step__title.is-success {
+    color: #00B42A;
+}
+body .el-step__head.is-process {
+    color: #4E5969;
+    border-color: #4E5969;
+}
+body .el-step__title.is-process {
+    color: #4E5969;
+}
+body .el-step__icon.is-text {
+    border-width: 1px;
+}
+
+/*el-form*/
+body .el-form-item .el-form-item__label {
+    font-size: 14px;
+    color: #4E5969;
+    padding: 0 6px 0 0;
+	font-weight: normal;
+}
+
+/*el-progress*/
+body .el-progress-bar__inner {
+    background-color: #233A82 !important;
+}
+body .pro1 .el-progress-bar__inner {
+    background-color: #F53F3F !important;
+}
+body .el-progress-bar__inner .el-progress-bar__innerText{
+	color: #fff !important;
+}
+
+/*modellist*/
+.modellist{
+	display: flex;
+	flex-wrap: wrap;
+}
+.modellist .list{
+	display: block;
+	position: relative;
+	border: 1px solid #E5E6EB;
+	padding: 20px;
+	width: calc((100% - 60px) / 4);
+	margin: 10px 20px 10px 0;
+	cursor: pointer;
+}
+.modellist .list:nth-child(4n){
+	margin-right: 0;
+}
+.modellist .list:hover {
+    border-color: transparent;
+    box-shadow: 0 1px 2px -2px rgb(0 0 0 / 16%), 0 3px 6px 0 rgb(0 0 0 / 12%), 0 5px 12px 4px rgb(0 0 0 / 9%);
+}
+.modellist .list .limg{
+	display: block;
+}
+.modellist .list .limg img{
+	display: block;
+	width: 100px;
+	height: 100px;
+}
+.modellist .list .ltitle{
+	display: block;
+	margin: 12px 0 0 0;
+}
+.modellist .list .ltitle .title{
+	display: inline-block;
+	color: #4E5969 ;
+	font-size: 14px;
+	line-height: 24px;
+	margin: 0;
+	padding: 0;
+}
+.modellist .list:hover .ltitle .title,
+.modellist .list .ltitle .title:hover{
+	color: #233A82;
+}
+.modellist .list .lbtn{
+	display: none;
+	position: absolute;
+	flex-direction: column;
+	align-items: center;
+	justify-content: space-between;
+	height: 100%;
+	padding: 20px 10px;
+	right: 0;
+	top: 0;
+	box-sizing: border-box;
+}
+.modellist .list:hover .lbtn{
+	display: flex;
+}
+.modellist .list .lbtn i{
+	line-height: 24px;
+	padding: 0 10px;
+	font-size: 14px;
+	color: #4E5969;
+}
+.modellist .list .lbtn i:hover{
+	color: #165DFF;
+}
+
+/*login-page*/
+body ,html{
+	margin: 0;
+	padding: 0;
+}
+.login-page{
+	display: flex;
+	width: 100%;
+	height: 100%;
+	position: fixed;
+}
+.login-page .loleft{
+	display: block;
+	width: 66%;
+	background: url("../assets/images/login-bg.jpg") no-repeat center;
+	background-size: cover;
+	margin: 0;
+	padding: 0;
+}
+.login-page .loright{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 34%;
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+.login-page .loright .locont{
+	display: block;
+	width: 100%;
+	width: 300px;
+}
+.login-page .loright .locont .title{
+	display: block;
+	color: #1D2129;
+	text-align: center;
+	font-size: 26px;
+	font-style: normal;
+	font-weight: bold;
+	line-height: 50px;
+	letter-spacing:0;
+	margin: 0 0 60px 0;
+}
+.login-page .loright .locont .el-form-item{
+	margin-bottom: 20px;
+}
+.login-page .loright .locont .el-form-item:last-child{
+	margin-bottom: 0;
+}
+.login-page .loright .locont .el-form-item .el-button{
+	display: block;
+	width: 100%;
+}
+.login-page .loright .locont .el-input__icon.el-icon-user{
+	background: url("../assets/images/icon-user.svg") no-repeat center;
+	box-sizing: 14px;
+	color: transparent;
+}
+.login-page .loright .locont .el-input__icon.el-icon-view{
+	background: url("../assets/images/icon-unlock.svg") no-repeat center;
+	box-sizing: 14px;
+	color: transparent;
+}
+.login-page .loright .locont .el-input__inner,
+.login-page .loright .locont .el-button{
+    border-radius: 2px;
+}
+
+
+
+* {
+    --color: #233A82;
+    --color_shallow: #233A82;
+    --count_number: #233A82;
+    --count_number_shallow: #233A82;
+    --primary_color: #233A82;
+    --aside_color: #233A82;
+}
+
+
+.ftitle{
+	display: block;
+	text-align: center;
+	font-size: 20px;
+	line-height: 28px;
+	font-weight: bold;
+	color: #1D2129;
+	margin: 0;
+	padding: 0;
+}
+.stitle{
+	display: block;
+	text-align: left;
+	color: #1D2129;
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 24px;
+	padding: 0 0 8px 0;
+	margin: 30px 0 0 0;
+	border-bottom: 1px solid #e5e6eb;
+}
+.ttitle{
+	display: block;
+	text-align: left;
+	color: #1D2129;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 22px;
+	padding: 0 0 8px 0;
+	margin: 24px 0 0 0;
+}
+
+/*test-list*/
+.test-list{
+	display: flex;
+}
+.test-list .list{
+	display: block;
+	flex: 1;
+	padding: 24px 24px 0 24px;
+}
+.test-list .list+.list{
+	margin-left: 24px;
+}
+.test-list .list .title{
+	display: flex;
+	align-items: center;
+}
+.test-list .list .title img{
+	display: block;
+	width: 16px;
+	margin: 0 4px 0 0;
+}
+.test-list .list .title .tit{
+	display: block;
+	color: #86909C;
+	font-size: 14px;
+	line-height: 22px;
+	margin: 0;
+	padding: 0;
+}
+.test-list .list .figure{
+	display: block;
+	margin: 12px 0 0 0;
+	padding: 0;
+	color: #1D2129;
+	font-size: 24px;
+	line-height: 32px;
+	font-weight: bold;
+}
+
+/*badge*/
+body .el-badge.newbadge{
+	display: inline-flex;
+	flex-direction: row-reverse;
+	align-items: center;
+}
+body .el-badge.newbadge+.el-badge.newbadge{
+	margin-left: 20px;
+}
+body .el-badge.newbadge .sz{
+	color: #1D2129;
+	font-size: 14px;
+	font-weight: 300;
+	line-height: 22px;
+	margin: 0 0 0 10px;
+}
+body .el-badge.newbadge .el-badge__content.is-fixed{
+	position: inherit;
+	transform: inherit;
+	right: 0;
+	width: 18px;
+	height: 18px;
+	line-height: 18px;
+	text-align: center;
+	margin: 0;
+	padding: 0;
+	font-size: 12px;
+}
+body .el-badge__content{
+	background-color: #F53F3F;
+}
+body .el-badge__content--warning {
+    background-color: #F7BA1E;
+}
+body .el-badge__content--primary {
+    background-color: #0FC6C2;
+}
+
+
+/*ncoll*/
+body .ncoll{
+	margin: 5px 0 0 0;
+}
+body .ncoll.el-collapse{
+	border: 0;
+}
+body .ncoll.el-collapse .el-collapse-item>div:first-child{
+	text-align: center;
+}
+body .ncoll.el-collapse .el-collapse-item__header{
+	border-bottom: 0;
+	height: 30px;
+	line-height: 30px;
+	justify-content: center;
+	display: inline-flex;
+	color: #233A82;
+}
+body .ncoll.el-collapse .el-collapse-item__header:hover{
+	color: #2B50C4;
+}
+body .ncoll.el-collapse .el-collapse-item__header .tit{
+	display: block;
+	margin: 0;
+	display: block;
+	text-align: left;
+	font-size: 12px;
+	font-weight: normal;
+	line-height: 20px;
+}
+body .ncoll.el-collapse .el-collapse-item__header .el-collapse-item__arrow{
+	display: block;
+	width: 18px;
+	height: 18px;
+	text-align: center;
+	line-height: 18px;
+	padding: 0;
+	font-size: 14px;
+	margin: 0;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+body .ncoll.el-collapse .el-collapse-item__arrow.is-active {
+    -webkit-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+}
+body .ncoll.el-collapse .el-collapse-item__wrap{
+	border-bottom: 0;
+}
+body .ncoll.el-collapse .el-collapse-item__wrap .el-collapse-item__content{
+	padding: 5px 0;
+}
+
+.dbox{
+	border: 1px dashed #e5e6eb;
+	padding: 10px;
+	box-sizing: border-box;
+	margin: 10px 0 0 0;
+	border-radius: 4px;
+}
+.dbox .ttitle:first-child{
+	margin-top: 0;
+}

src/views/dashboard/PanelGroup.vue

@@ -7,9 +7,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            New Visits
+            接入数据源数量
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          <count-to :start-val="0" :end-val="5" :duration="2600" class="card-panel-num" />
         </div>
       </div>
     </el-col>
@@ -20,7 +20,7 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Messages
+            数据模型总数
           </div>
           <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
         </div>

src/views/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login" :style="'background-image:url('+ Background +');'">
+  <!--<div class="login" :style="'background-image:url('+ Background +');'">
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
       <div style="text-align: center;"> <img :src="allDataIcon" alt=""></div>
       <h3 class="title">
@@ -33,12 +33,37 @@
         </el-button>
       </el-form-item>
     </el-form>
-    <!--  底部  -->
+    &lt;!&ndash;  底部  &ndash;&gt;
     <div v-if="$store.state.settings.showFooter" id="el-login-footer">
       <span v-html="$store.state.settings.footerTxt" />
       <span v-if="$store.state.settings.caseNumber"> ⋅ </span>
       <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $store.state.settings.caseNumber }}</a>
     </div>
+  </div>-->
+
+  <div id="app">
+    <div class="login-page">
+      <div class="loleft"></div>
+      <div class="loright">
+        <div class="locont">
+          <div class="title">数据标准符合性检测工具</div>
+          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
+            <el-form-item prop="username">
+              <el-input v-model="loginForm.username" prefix-icon="el-icon-user" type="text" auto-complete="off" placeholder="请输入账号"></el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input v-model="loginForm.password" prefix-icon="el-icon-view" type="password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleLogin"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
+                <span v-if="!loading">登 录</span>
+                <span v-else>登 录 中...</span>
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div><!--login-page-->
   </div>
 </template>
 

src/views/market/apilog/LogList.vue

@@ -25,7 +25,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -36,7 +36,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -50,7 +50,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -92,14 +92,12 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['market:api:log:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['market:api:log:remove']"
               size="mini"
               type="text"
               icon="el-icon-delete"

src/views/market/apimask/ApiMaskAdd.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:mask:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/apimask/ApiMaskEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:mask:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/apimask/ApiMaskList.vue

@@ -20,7 +20,6 @@
       <el-col :span="12">
         <el-button-group>
           <el-button
-            v-hasPerm="['market:mask:add']"
             type="primary"
             icon="el-icon-plus"
             size="mini"
@@ -33,7 +32,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -44,7 +43,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -58,7 +57,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -100,21 +99,18 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['market:mask:edit']"
               size="mini"
               type="text"
               icon="el-icon-edit-outline"
               @click="handleEdit(scope.row)"
             >修改</el-button>
             <el-button
-              v-hasPerm="['market:mask:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['market:mask:remove']"
               size="mini"
               type="text"
               icon="el-icon-delete"

src/views/market/dataapi/DataApiAdd.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:api:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/dataapi/DataApiDetail.vue

@@ -3,8 +3,8 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:api:word']" size="mini" icon="el-icon-coin" round @click="handleWord">接口文档</el-button>
+        <el-button size="mini" icon="el-icon-coin" round @click="handleWord">接口文档</el-button>
-        <el-button v-hasPerm="['market:api:example']" size="mini" icon="el-icon-s-data" round @click="handleExample">接口示例</el-button>
+        <el-button size="mini" icon="el-icon-s-data" round @click="handleExample">接口示例</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/dataapi/DataApiEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:api:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/dataapi/DataApiExample.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:api:example']" size="mini" icon="el-icon-s-data" round @click="handleCall">接口调用</el-button>
+        <el-button size="mini" icon="el-icon-s-data" round @click="handleCall">接口调用</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/dataapi/DataApiList.vue

@@ -20,7 +20,6 @@
       <el-col :span="12">
         <el-button-group>
           <el-button
-            v-hasPerm="['market:api:add']"
             type="primary"
             icon="el-icon-plus"
             size="mini"
@@ -33,7 +32,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -44,7 +43,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -58,7 +57,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -100,28 +99,24 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['market:api:edit']"
               size="mini"
               type="text"
               icon="el-icon-edit-outline"
               @click="handleEdit(scope.row)"
             >修改</el-button>
             <el-button
-              v-hasPerm="['market:api:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['market:api:remove']"
               size="mini"
               type="text"
               icon="el-icon-delete"
               @click="handleDelete(scope.row)"
             >删除</el-button>
             <el-button
-              v-hasPerm="['market:api:copy']"
               size="mini"
               type="text"
               icon="el-icon-copy-document"
@@ -129,7 +124,6 @@
             >拷贝</el-button>
             <el-button
               v-if="scope.row.status !== '2'"
-              v-hasPerm="['market:api:release']"
               size="mini"
               type="text"
               icon="el-icon-upload2"
@@ -137,7 +131,6 @@
             >发布</el-button>
             <el-button
               v-if="scope.row.status === '2'"
-              v-hasPerm="['market:api:cancel']"
               size="mini"
               type="text"
               icon="el-icon-download"

src/views/market/dataservice/DataServiceAdd.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:service:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/dataservice/DataServiceEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['market:service:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/market/dataservice/DataServiceList.vue

@@ -20,7 +20,6 @@
       <el-col :span="12">
         <el-button-group>
           <el-button
-            v-hasPerm="['market:service:add']"
             type="primary"
             icon="el-icon-plus"
             size="mini"
@@ -33,7 +32,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -44,7 +43,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -58,7 +57,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -100,21 +99,18 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['market:service:edit']"
               size="mini"
               type="text"
               icon="el-icon-edit-outline"
               @click="handleEdit(scope.row)"
             >修改</el-button>
             <el-button
-              v-hasPerm="['market:service:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['market:service:remove']"
               size="mini"
               type="text"
               icon="el-icon-delete"

src/views/market/servicelog/LogList.vue

@@ -25,7 +25,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -36,7 +36,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -50,7 +50,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -92,14 +92,12 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['market:service:log:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['market:service:log:remove']"
               size="mini"
               type="text"
               icon="el-icon-delete"

src/views/masterdata/datamanage/DataAdd.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['masterdata:data:add']" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/masterdata/datamanage/DataEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['masterdata:data:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/masterdata/datamanage/DataList.vue

@@ -208,7 +208,6 @@
             <el-col :span="12">
               <el-button-group>
                 <el-button
-                  v-hasPerm="['masterdata:data:add']"
                   type="primary"
                   icon="el-icon-plus"
                   size="mini"
@@ -248,21 +247,18 @@
                   trigger="click"
                 >
                   <el-button
-                    v-hasPerm="['masterdata:data:edit']"
                     size="mini"
                     type="text"
                     icon="el-icon-edit-outline"
                     @click="handleEdit(scope.row)"
                   >修改</el-button>
                   <el-button
-                    v-hasPerm="['masterdata:data:detail']"
                     size="mini"
                     type="text"
                     icon="el-icon-view"
                     @click="handleDetail(scope.row)"
                   >详情</el-button>
                   <el-button
-                    v-hasPerm="['masterdata:data:remove']"
                     size="mini"
                     type="text"
                     icon="el-icon-delete"

src/views/masterdata/datamodel/DataModelAdd.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['masterdata:model:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button  size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/masterdata/datamodel/DataModelDetail.vue

@@ -3,8 +3,8 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-if="form.flowStatus === '1' || form.flowStatus === '6'" v-hasPerm="['masterdata:model:submit']" size="mini" icon="el-icon-s-data" round @click="submit">提交</el-button>
+        <el-button v-if="form.flowStatus === '1' || form.flowStatus === '6'"  size="mini" icon="el-icon-s-data" round @click="submit">提交</el-button>
-        <el-button v-if="form.flowStatus === '4'" v-hasPerm="['masterdata:model:create']" :disabled="form.isSync === '1'" size="mini" icon="el-icon-s-data" round @click="createTable">建模</el-button>
+        <el-button v-if="form.flowStatus === '4'"  :disabled="form.isSync === '1'" size="mini" icon="el-icon-s-data" round @click="createTable">建模</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/masterdata/datamodel/DataModelEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['masterdata:model:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/masterdata/datamodel/DataModelList.vue

@@ -20,7 +20,6 @@
       <el-col :span="12">
         <el-button-group>
           <el-button
-            v-hasPerm="['masterdata:model:add']"
             type="primary"
             icon="el-icon-plus"
             size="mini"
@@ -33,7 +32,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -44,7 +43,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -58,7 +57,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -100,7 +99,6 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['masterdata:model:edit']"
               v-flow-edit="scope.row.flowStatus"
               size="mini"
               type="text"
@@ -108,14 +106,12 @@
               @click="handleEdit(scope.row)"
             >修改</el-button>
             <el-button
-              v-hasPerm="['masterdata:model:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['masterdata:model:remove']"
               v-flow-del="scope.row.flowStatus"
               size="mini"
               type="text"

src/views/masterdata/datamodel/index.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="app-container">
-    <iframe src="http://192.168.1.217:8001/model/modelChildren" width="100%" height="850px" frameborder="0" />
+    <el-card class="box-card" shadow="always">
-    <!--<transition name="el-zoom-in-center">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
-      <data-model-list v-if="options.showList" @showCard="showCard" />
+        <el-form-item label="项目" prop="projectId">
-    </transition>
+          <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item">
-    <transition name="el-zoom-in-top">
+            <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
-      <data-model-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
+          </el-select>
-    </transition>
+        </el-form-item>
-    <transition name="el-zoom-in-top">
+      </el-form>
-      <data-model-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
+      <iframe src="http://192.168.1.217:8001/model/modelChildren?hideInMenu=true" width="100%" height="850px" frameborder="0" />
-    </transition>
+    </el-card>
-    <transition name="el-zoom-in-bottom">
-      <data-model-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
-    </transition>-->
   </div>
 </template>
 
@@ -21,19 +18,19 @@ export default {
   name: 'DataModel',
   data() {
     return {
-      options: {
+      projectsOptions: [
-        data: {},
+        {id: '1111', projectName: '演示项目'}
-        showList: true,
+      ],
-        showAdd: false,
+      // 查询参数
-        showEdit: false,
+      queryParams: {
-        showDetail: false
+        pageNum: 1,
+        pageSize: 20,
+        projectId: '1111',
+        fileName: ''
       }
     }
   },
   methods: {
-    showCard(data) {
-      Object.assign(this.options, data)
-    }
   }
 }
 </script>

src/views/metadata/changerecord/ChangeRecordAdd.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['metadata:changerecord:add']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/metadata/changerecord/ChangeRecordEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['metadata:changerecord:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
       </el-button-group>
     </div>

src/views/metadata/changerecord/ChangeRecordList.vue

@@ -25,7 +25,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -36,7 +36,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -50,7 +50,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -92,21 +92,18 @@
             trigger="click"
           >
             <el-button
-              v-hasPerm="['metadata:changerecord:edit']"
               size="mini"
               type="text"
               icon="el-icon-edit-outline"
               @click="handleEdit(scope.row)"
             >修改</el-button>
             <el-button
-              v-hasPerm="['metadata:changerecord:detail']"
               size="mini"
               type="text"
               icon="el-icon-view"
               @click="handleDetail(scope.row)"
             >详情</el-button>
             <el-button
-              v-hasPerm="['metadata:changerecord:remove']"
               size="mini"
               type="text"
               icon="el-icon-delete"

src/views/metadata/dataauthorize/index.vue

@@ -1,197 +1,22 @@
 <template>
   <div class="app-container">
-    <el-row :gutter="20">
+    <iframe src="http://192.168.1.217:8001/modelMonitor/dataextension" width="100%" height="850px" frameborder="0" />
-      <el-col :span="6">
-        <el-card class="box-card tree-wrapper" shadow="always">
-          <el-tree
-            ref="leftTree"
-            :data="leftTreeOptions"
-            node-key="id"
-            empty-text="加载中，请稍后"
-            :props="leftTreeDefaultProps"
-            default-expand-all
-            highlight-current
-            :expand-on-click-node="false"
-            @node-click="handleNodeClick"
-          >
-            <span slot-scope="{ node, data }" class="custom-tree-node">
-              <span><i v-if="node.level === 1" class="iconfont icon-zuzhi tree-folder" />{{ node.label }}</span>
-            </span>
-          </el-tree>
-        </el-card>
-      </el-col>
-      <el-col :span="18">
-        <el-card class="box-card tree-wrapper" shadow="always">
-          <el-row type="flex" justify="space-between">
-            <el-col :span="12">
-              <el-button-group>
-                <el-button
-                  v-hasPerm="['metadata:dataauthorize:refresh']"
-                  type="warning"
-                  icon="el-icon-refresh"
-                  size="mini"
-                  @click="handleCacheRefresh"
-                >刷新缓存</el-button>
-              </el-button-group>
-            </el-col>
-            <el-col :span="12">
-              <el-button-group style="float: right;">
-                <template v-if="showBtns">
-                  <el-button v-if="disabled" v-hasPerm="['metadata:dataauthorize:edit']" size="mini" round @click="disabled = false">修改</el-button>
-                  <el-button v-else v-hasPerm="['metadata:dataauthorize:edit']" size="mini" round @click="handSubmit">保存</el-button>
-                </template>
-              </el-button-group>
-            </el-col>
-          </el-row>
-          <el-divider />
-          <el-form ref="form" :model="form" :disabled="disabled">
-            <el-tree
-              ref="rightTree"
-              :data="rightTreeOptions"
-              show-checkbox
-              accordion
-              node-key="id"
-              empty-text="加载中，请稍后"
-              :props="rightTreeDefaultProps"
-              highlight-current
-              :expand-on-click-node="false"
-              :check-strictly="checkStrictly"
-            >
-              <span slot-scope="{ node, data }" class="custom-tree-node">
-                <span>
-                  <i v-if="node.level === 1" class="iconfont icon-shujuku tree-folder" />
-                  <i v-else-if="node.level === 2" class="iconfont icon-shujubiao tree-folder" />
-                  <i v-else-if="node.level === 3" class="iconfont icon-shujuziduan tree-folder" />
-                  {{ data.code ? (data.name ? data.code + '(' + data.name + ')' : data.code) : data.name }}
-                </span>
-              </span>
-            </el-tree>
-          </el-form>
-        </el-card>
-      </el-col>
-    </el-row>
   </div>
 </template>
 
 <script>
-import { listRole } from '@/api/systemMarket/role'
-import { getDataMetadataTree } from '@/api/metadata/datacolumn'
-import { getAuthorizedMetadata, metadataAuthorize, refreshAuthorize } from '@/api/metadata/dataauthorize'
-
 export default {
   name: 'DataAuthorize',
   data() {
     return {
-      tableHeight: document.body.offsetHeight - 310 + 'px',
-      // 左侧树
-      leftTreeOptions: [],
-      leftTreeDefaultProps: {
-        children: 'children',
-        label: 'roleName'
-      },
-      // 右侧树
-      rightTreeOptions: [],
-      rightTreeDefaultProps: {
-        children: 'children',
-        label: 'label'
-      },
-      checkStrictly: false,
-      form: {},
-      disabled: true,
-      showBtns: false,
-      btnSubmitEnable: false
     }
   },
   created() {
-    this.getLeftTree()
-    this.getRightTree()
   },
   methods: {
-    getLeftTree() {
-      listRole().then(response => {
-        if (response.success) {
-          const { data } = response
-          const tree = {}
-          tree.roleName = '角色组'
-          tree.children = data
-          this.leftTreeOptions = []
-          this.leftTreeOptions.push(tree)
-        }
-      })
-    },
-    handleNodeClick(data) {
-      if (data.id) {
-        this.form.roleId = data.id
-        getAuthorizedMetadata(data.id).then(response => {
-          if (response.success) {
-            this.$refs.rightTree.setCheckedKeys([])
-            const checkedKeys = response.data || []
-            if (checkedKeys && checkedKeys.length > 0) {
-              this.checkStrictly = true
-              this.$nextTick(() => {
-                this.$refs.rightTree.setCheckedKeys(checkedKeys)
-                this.checkStrictly = false
-              })
-            }
-            this.showBtns = true
-          }
-        })
-      }
-    },
-    getRightTree() {
-      getDataMetadataTree('column').then(response => {
-        if (response.success) {
-          const { data } = response
-          this.rightTreeOptions = data
-        }
-      })
-    },
-    handSubmit() {
-      const data = []
-      const checkedNodes = this.$refs.rightTree.getCheckedNodes(false, true)
-      checkedNodes.forEach((item, index, arr) => {
-        const obj = {}
-        obj.objectId = item.id
-        obj.roleId = this.form.roleId
-        obj.objectType = item.type
-        data.push(obj)
-      })
-      metadataAuthorize({ roleId: this.form.roleId, authorizeDataList: data }).then(response => {
-        if (response.success) {
-          this.$message.success('保存成功')
-          this.disabled = true
-        }
-      })
-    },
-    handleCacheRefresh() {
-      refreshAuthorize().then(response => {
-        if (response.success) {
-          this.$message.success('刷新缓存成功')
-        } else {
-          this.$message.error('刷新缓存失败')
-        }
-      })
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.el-card ::v-deep .el-card__body {
-  height: calc(100vh - 170px);
-}
-.tree-wrapper {
-  overflow-y: auto;
-  ::v-deep .custom-tree-node {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    .tree-folder {
-      margin-right: 5px;
-      color: #f6cf07;
-    }
-  }
-}
 </style>

src/views/metadata/datacolumn/DataColumnDetail.vue

@@ -12,21 +12,21 @@
           <el-col :span="8">
             <el-form-item label="字段名称" prop="columnName">
               <el-input v-model="form.columnName" disabled>
-                <el-button slot="append" v-hasPerm="['metadata:changerecord:add']" icon="el-icon-edit-outline" @click="changeRecord('columnName')" />
+                <el-button slot="append" icon="el-icon-edit-outline" @click="changeRecord('columnName')" />
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="字段注释" prop="columnComment">
               <el-input v-model="form.columnComment" disabled>
-                <el-button slot="append" v-hasPerm="['metadata:changerecord:add']" icon="el-icon-edit-outline" @click="changeRecord('columnComment')" />
+                <el-button slot="append" icon="el-icon-edit-outline" @click="changeRecord('columnComment')" />
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="8">
             <el-form-item label="数据默认值" prop="dataDefault">
               <el-input v-model="form.dataDefault" disabled>
-                <el-button slot="append" v-hasPerm="['metadata:changerecord:add']" icon="el-icon-edit-outline" @click="changeRecord('dataDefault')" />
+                <el-button slot="append" icon="el-icon-edit-outline" @click="changeRecord('dataDefault')" />
               </el-input>
             </el-form-item>
           </el-col>

src/views/metadata/datacolumn/DataColumnList.vue

@@ -48,7 +48,7 @@
               <el-tooltip content="密度" effect="dark" placement="top">
                 <el-dropdown trigger="click" @command="handleCommand">
                   <el-button circle size="mini">
-                    <svg-icon class-name="size-icon" icon-class="colum-height" />
+                    <i class="el-icon-s-grid"></i>
                   </el-button>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -59,7 +59,7 @@
               </el-tooltip>
               <el-tooltip content="刷新" effect="dark" placement="top">
                 <el-button circle size="mini" @click="handleRefresh">
-                  <svg-icon class-name="size-icon" icon-class="shuaxin" />
+                  <i class="el-icon-refresh"></i>
                 </el-button>
               </el-tooltip>
               <el-tooltip content="列设置" effect="dark" placement="top">
@@ -76,7 +76,7 @@
                   </el-checkbox-group>
                   <span slot="reference">
                     <el-button circle size="mini">
-                      <svg-icon class-name="size-icon" icon-class="shezhi" />
+                      <i class="el-icon-setting"></i>
                     </el-button>
                   </span>
                 </el-popover>
@@ -118,7 +118,6 @@
                 trigger="click"
               >
                 <el-button
-                  v-hasPerm="['metadata:datacolumn:detail']"
                   size="mini"
                   type="text"
                   icon="el-icon-view"

src/views/metadata/datasource/DataSourceAdd.vue

@@ -3,66 +3,146 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-if="active == 2" v-hasPerm="['metadata:datasource:add']" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 3" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
-        <el-button v-if="active == 1" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
+        <el-button v-if="active != 3" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
-        <el-button v-if="active == 2" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
+        <el-button v-if="active != 1" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
-    <div class="body-wrapper">
+    <div class="body-wrapper" style="padding-left: 20%">
-      <el-steps :active="active" finish-status="success" align-center>
+      <el-steps :active="active" finish-status="success" align-center style="width: 900px">
-        <el-step title="数据源信息" />
+        <el-step title="填写数据源信息" />
-        <el-step title="连接信息" />
+        <el-step title="选择数据库类型" />
+        <el-step title="填写连接信息" />
       </el-steps>
-      <el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px" style="width: 900px">
-        <el-form-item label="数据源类型" prop="dbType">
+        <div style="padding: 20px 0px">
-          <el-select v-model="form.dbType">
+          <el-form-item label="数据源名称" prop="sourceName">
-            <el-option
+            <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
-              v-for="item in dbTypeOptions"
+          </el-form-item>
-              :key="item.id"
+          <el-form-item label="状态" prop="status">
-              :label="item.itemValue"
+            <el-radio-group v-model="form.status">
-              :value="item.itemText"
+              <el-radio
-            />
+                v-for="dict in statusOptions"
-          </el-select>
+                :key="dict.id"
-        </el-form-item>
+                :label="dict.itemText"
-        <el-form-item label="数据源名称" prop="sourceName">
+              >{{ dict.itemValue }}</el-radio>
-          <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
-        <el-form-item label="状态" prop="status">
+          <el-form-item label="备注" prop="remark">
-          <el-radio-group v-model="form.status">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-            <el-radio
+          </el-form-item>
-              v-for="dict in statusOptions"
+        </div>
-              :key="dict.id"
-              :label="dict.itemText"
-            >{{ dict.itemValue }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
       </el-form>
-      <el-form v-if="active == 2" ref="form2" :model="form2" :rules="rules2" label-width="80px">
+      <el-form v-if="active == 2" ref="form" :model="form" :rules="rules" label-width="120px" style="width: 900px">
-        <el-form-item label="主机" prop="host">
+        <div class="modellist" style="padding: 20px 0px">
-          <el-input v-model="form2.host" placeholder="请输入主机" />
+          <div :class="[form.dbType =='1' ? 'choosedDbType' : '','list']" @click="chooseDbType('1')">
-        </el-form-item>
+            <div class="limg"><img :src="databaseImg.imgMySQL"></div>
-        <el-form-item label="端口" prop="port">
+            <div class="ltitle">
-          <el-input v-model="form2.port" placeholder="请输入端口" />
+              <el-tooltip content="mysql数据库" placement="bottom" effect="light">
-        </el-form-item>
+                <p class="title">mysql</p>
-        <el-form-item v-if="form.dbType === '3' || form.dbType === '4'" label="服务名" prop="sid">
+              </el-tooltip>
-          <el-input v-model="form2.sid" placeholder="请输入服务名" />
+            </div>
-        </el-form-item>
+          </div>
-        <el-form-item v-if="form.dbType !== '3' && form.dbType !== '4'" label="数据库" prop="dbName">
+          <div :class="[form.dbType =='2' ? 'choosedDbType' : '','list']" @click="chooseDbType('2')">
-          <el-input v-model="form2.dbName" placeholder="请输入数据库" />
+            <div class="limg"><img :src="databaseImg.imgMariaDB"></div>
-        </el-form-item>
+            <div class="ltitle">
-        <el-form-item label="用户名" prop="username">
+              <el-tooltip content="mariadb-3.0.3数据库" placement="bottom" effect="light">
-          <el-input v-model="form2.username" placeholder="请输入用户名" />
+                <p class="title">mariadb-3.0.3</p>
-        </el-form-item>
+              </el-tooltip>
-        <el-form-item label="密码" prop="password">
+            </div>
-          <el-input v-model="form2.password" placeholder="请输入密码" />
+          </div>
-        </el-form-item>
+          <div :class="[form.dbType =='3' ? 'choosedDbType' : '','list']" @click="chooseDbType('3')">
-        <el-form-item>
+            <div class="limg"><img :src="databaseImg.imgOracle"></div>
-          <el-button v-hasPerm="['metadata:datasource:connect']" size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
+            <div class="ltitle">
-        </el-form-item>
+              <el-tooltip content="oracle数据库" placement="bottom" effect="light">
+                <p class="title">oracle</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='9' ? 'choosedDbType' : '','list']" @click="chooseDbType('9')">
+            <div class="limg"><img :src="databaseImg.imgdm8"></div>
+            <div class="ltitle">
+              <el-tooltip content="dm数据库" placement="bottom" effect="light">
+                <p class="title">dm</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='8' ? 'choosedDbType' : '','list']" @click="chooseDbType('8')">
+            <div class="limg"><img :src="databaseImg.imgibmdb2"></div>
+            <div class="ltitle">
+              <el-tooltip content="db2数据库" placement="bottom" effect="light">
+                <p class="title">db2</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='5' ? 'choosedDbType' : '','list']" @click="chooseDbType('5')">
+            <div class="limg"><img :src="databaseImg.imgPostgreSQL"></div>
+            <div class="ltitle">
+              <el-tooltip content="PostgreSQ数据库" placement="bottom" effect="light">
+                <p class="title">PostgreSQ</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='6' ? 'choosedDbType' : '','list']" @click="chooseDbType('6')">
+            <div class="limg"><img :src="databaseImg.imgSqlserver"></div>
+            <div class="ltitle">
+              <el-tooltip content="Sqlserver数据库" placement="bottom" effect="light">
+                <p class="title">Sqlserver</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='7' ? 'choosedDbType' : '','list']" @click="chooseDbType('7')">
+            <div class="limg"><img :src="databaseImg.imgkingbase"></div>
+            <div class="ltitle">
+              <el-tooltip content="kingbase数据库" placement="bottom" effect="light">
+                <p class="title">kingbase</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='10' ? 'choosedDbType' : '','list']" @click="chooseDbType('10')">
+            <div class="limg"><img :src="databaseImg.imggaussdb"></div>
+            <div class="ltitle">
+              <el-tooltip content="GaussDB数据库" placement="bottom" effect="light">
+                <p class="title">GaussDB</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='4' ? 'choosedDbType' : '','list']" @click="chooseDbType('4')">
+            <div class="limg"><img :src="databaseImg.imgdefault"></div>
+            <div class="ltitle">
+              <el-tooltip content="MaxCompute数据库" placement="bottom" effect="light">
+                <p class="title">MaxCompute</p>
+              </el-tooltip>
+            </div>
+          </div>
+        </div><!--modellist 模型监控列表-->
+
+      </el-form>
+      <el-form v-if="active == 3" ref="form2" :model="form2" :rules="rules2" label-width="80px" style="width: 900px">
+        <div style="padding: 20px 0px">
+          <el-form-item label="主机" prop="host">
+            <el-input v-model="form2.host" placeholder="请输入主机" />
+          </el-form-item>
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="form2.port" placeholder="请输入端口" />
+          </el-form-item>
+          <el-form-item v-if="form.dbType === '3' || form.dbType === '4'" label="服务名" prop="sid">
+            <el-input v-model="form2.sid" placeholder="请输入服务名" />
+          </el-form-item>
+          <el-form-item v-if="form.dbType !== '3' && form.dbType !== '4'" label="数据库" prop="dbName">
+            <el-input v-model="form2.dbName" placeholder="请输入数据库" />
+          </el-form-item>
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form2.username" placeholder="请输入用户名" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form2.password" placeholder="请输入密码" />
+          </el-form-item>
+          <el-form-item>
+            <el-button size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
+          </el-form-item>
+        </div>
       </el-form>
     </div>
   </el-card>
@@ -70,6 +150,17 @@
 
 <script>
 import { addDataSource, checkConnection } from '@/api/metadata/datasource'
+import { createDataSource } from '@/api/datamodel/model'
+import imgMySQL from '@/assets/database/MySQL.svg'
+import imgMariaDB from '@/assets/database/MariaDB.svg'
+import imgOracle from '@/assets/database/Oracle.svg'
+import imgdm8 from '@/assets/database/dm8.png'
+import imgibmdb2 from '@/assets/database/ibmdb2.png'
+import imgPostgreSQL from '@/assets/database/PostgreSQL.svg'
+import imgSqlserver from '@/assets/database/Sqlserver.svg'
+import imgdefault from '@/assets/database/default.svg'
+import imgkingbase from '@/assets/database/kingbase.png'
+import imggaussdb from '@/assets/database/gaussdb.png'
 
 export default {
   name: 'DataSourceAdd',
@@ -84,6 +175,19 @@ export default {
   data() {
     return {
       title: '数据源新增',
+      databaseImg: {
+        isActive: true,
+        imgMySQL: imgMySQL,
+        imgMariaDB: imgMariaDB,
+        imgOracle: imgOracle,
+        imgdm8: imgdm8,
+        imgibmdb2: imgibmdb2,
+        imgPostgreSQL: imgPostgreSQL,
+        imgSqlserver: imgSqlserver,
+        imgdefault: imgdefault,
+        imgkingbase: imgkingbase,
+        imggaussdb: imggaussdb
+      },
       // 展示切换
       showOptions: {
         data: {},
@@ -124,7 +228,8 @@ export default {
         dbName: undefined,
         username: undefined,
         password: undefined,
-        sid: undefined
+        sid: undefined,
+        schema: ''
       },
       rules2: {
         host: [
@@ -180,6 +285,9 @@ export default {
     handleLastStep() {
       this.active--
     },
+    chooseDbType(type) {
+      this.form.dbType = type
+    },
     /** 检测数据库连通性 */
     handleCheckConnection() {
       this.$refs['form2'].validate(valid => {
@@ -204,6 +312,7 @@ export default {
           addDataSource(this.form).then(response => {
             if (response.success) {
               this.$message.success('保存成功')
+              this.saveModelDataSource()
               setTimeout(() => {
                 // 2秒后跳转列表页
                 this.$emit('showCard', this.showOptions)
@@ -221,6 +330,21 @@ export default {
           })
         }
       })
+    },
+    saveModelDataSource() {
+      const dbType = this.form.dbType
+      const dataSource = {
+        projectId: this.form2.dbName,
+        databaseName: this.form2.dbName,
+        schemaName: this.form2.schema === '' ? this.form2.dbName : this.form2.schema,
+        databaseType: dbType,
+        url: this.form2.host + ':' + this.form2.port + '/' + this.form2.dbName,
+        username: this.form2.username,
+        password: this.form2.password
+      }
+      createDataSource(dataSource).then(() => {
+      }).catch(() => {
+      })
     }
   }
 }
@@ -231,4 +355,7 @@ export default {
   height: calc(100vh - 230px);
   overflow-y: auto;
 }
+.choosedDbType{
+  border: 1px solid #165DFF;
+}
 </style>

src/views/metadata/datasource/DataSourceDetail.vue

@@ -4,74 +4,191 @@
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
         <!-- zrx add-->
-        <el-button v-if="form.isSync === '0'" v-hasPerm="['metadata:datasource:sync']" size="mini" icon="el-icon-coin" round @click="handleSync">元数据同步</el-button>
+        <el-button v-if="form.isSync === '0'" type="primary" size="mini" icon="el-icon-coin" @click="handleSync">元数据同步</el-button>
-        <el-button v-if="form.isSync === '2'" v-hasPerm="['metadata:datasource:sync']" size="mini" icon="el-icon-coin" round @click="handleSync">元数据更新</el-button>
+        <el-button v-if="form.isSync === '2'" type="primary" size="mini" icon="el-icon-coin" @click="handleSync">元数据更新</el-button>
-        <el-button v-if="form.isSync === '2'" v-hasPerm="['metadata:datasource:word']" size="mini" icon="el-icon-coin" round @click="handleWord">数据库文档</el-button>
+        <el-button v-if="form.isSync === '2'" type="primary" size="mini" icon="el-icon-coin" @click="handleWord">数据库文档</el-button>
-        <el-button v-if="form.isSync === '3'" v-hasPerm="['metadata:datasource:sync']" size="mini" icon="el-icon-coin" round @click="handleSync">元数据再次同步</el-button>
+        <el-button v-if="form.isSync === '3'" type="primary" size="mini" icon="el-icon-coin" @click="handleSync">元数据再次同步</el-button>
-        <el-button v-hasPerm="['metadata:datasource:connect']" size="mini" icon="el-icon-coin" round @click="handleCheckConnection">连通性检测</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-coin" @click="handleCheckConnection">连通性检测</el-button>
-        <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
     <div class="body-wrapper">
-      <el-steps :active="active" finish-status="success" align-center>
+      <el-descriptions style="margin-top: 20px" title="数据源信息" :column="2" border size="medium" >
-        <el-step title="数据源信息" />
+        <el-descriptions-item :labelStyle="{width: '200px'}" :contentStyle="{width: '35%'}">
-        <el-step title="连接信息" />
+          <template slot="label">
-      </el-steps>
+            <i class="el-icon-tickets"></i>
-      <el-form v-if="active == 1" ref="form" :model="form" label-width="80px" disabled>
+            数据源名称
-        <el-form-item label="数据源类型" prop="dbType">
+          </template>
-          <el-select v-model="form.dbType">
+          {{form.sourceName}}
-            <el-option
+        </el-descriptions-item>
-              v-for="item in dbTypeOptions"
+        <el-descriptions-item :labelStyle="{width: '200px'}">
-              :key="item.id"
+          <template slot="label">
-              :label="item.itemValue"
+            <i class="el-icon-star-off"></i>
-              :value="item.itemText"
+            状态
-            />
+          </template>
-          </el-select>
+          <template v-for="dict in statusOptions">
-        </el-form-item>
+            <el-tag v-if="form.status == dict.itemText && form.status == '1' " size="small" type="success">{{ dict.itemValue }}</el-tag>
-        <el-form-item label="数据源名称" prop="sourceName">
+            <el-tag v-if="form.status == dict.itemText && form.status != '1'  " size="small" type="warning">{{ dict.itemValue }}</el-tag>
-          <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
+          </template>
-        </el-form-item>
+        </el-descriptions-item>
-        <el-form-item label="状态" prop="status">
+        <el-descriptions-item :labelStyle="{width: '200px'}">
-          <el-radio-group v-model="form.status">
+          <template slot="label">
-            <el-radio
+            <i class="el-icon-document"></i>
-              v-for="dict in statusOptions"
+            备注
-              :key="dict.id"
+          </template>
-              :label="dict.itemText"
+          {{form.remark}}
-            >{{ dict.itemValue }}</el-radio>
+        </el-descriptions-item>
-          </el-radio-group>
+      </el-descriptions >
-        </el-form-item>
+      <el-descriptions style="margin-top: 20px" title="数据库类型" :column="1" :colon="false" border size="medium">
-        <el-form-item label="备注" prop="remark">
+        <el-descriptions-item :labelStyle="{width: '200px'}">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <template slot="label">
-        </el-form-item>
+            <i class="el-icon-menu"></i>
-      </el-form>
+            数据库类型
-      <el-form v-if="active == 2" ref="form2" :model="form2" label-width="80px" disabled>
+          </template>
-        <el-form-item label="主机" prop="host">
+          <div class="modellist" style="width:100%">
-          <el-input v-model="form2.host" placeholder="请输入主机" />
+            <div v-if="form.dbType =='1'" class="list" @click="chooseDbType('1')">
-        </el-form-item>
+              <div class="limg"><img :src="databaseImg.imgMySQL"></div>
-        <el-form-item label="端口" prop="port">
+              <div class="ltitle">
-          <el-input v-model="form2.port" placeholder="请输入端口" />
+                <el-tooltip content="mysql数据库" placement="bottom" effect="light">
-        </el-form-item>
+                  <p class="title">mysql</p>
-        <el-form-item v-if="form.dbType === '3' || form.dbType === '4'" label="服务名" prop="sid">
+                </el-tooltip>
-          <el-input v-model="form2.sid" placeholder="请输入服务名" />
+              </div>
-        </el-form-item>
+            </div>
-        <el-form-item v-if="form.dbType !== '3' && form.dbType !== '4'" label="数据库" prop="dbName">
+            <div v-if="form.dbType =='2'" class="list"  @click="chooseDbType('2')">
-          <el-input v-model="form2.dbName" placeholder="请输入数据库" />
+              <div class="limg"><img :src="databaseImg.imgMariaDB"></div>
-        </el-form-item>
+              <div class="ltitle">
-        <el-form-item label="用户名" prop="username">
+                <el-tooltip content="mariadb-3.0.3数据库" placement="bottom" effect="light">
-          <el-input v-model="form2.username" placeholder="请输入用户名" />
+                  <p class="title">mariadb-3.0.3</p>
-        </el-form-item>
+                </el-tooltip>
-        <el-form-item label="密码" prop="password">
+              </div>
-          <el-input v-model="form2.password" placeholder="请输入密码" />
+            </div>
-        </el-form-item>
+            <div v-if="form.dbType =='3'" class="list"  @click="chooseDbType('3')">
-      </el-form>
+              <div class="limg"><img :src="databaseImg.imgOracle"></div>
-      <el-button v-if="active == 1" style="margin-top: 12px;" @click="handleNextStep">下一步</el-button>
+              <div class="ltitle">
-      <el-button v-if="active == 2" style="margin-top: 12px;" @click="handleLastStep">上一步</el-button>
+                <el-tooltip content="oracle数据库" placement="bottom" effect="light">
+                  <p class="title">oracle</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='9'" class="list"  @click="chooseDbType('9')">
+              <div class="limg"><img :src="databaseImg.imgdm8"></div>
+              <div class="ltitle">
+                <el-tooltip content="dm数据库" placement="bottom" effect="light">
+                  <p class="title">dm</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='8'" class="list"  @click="chooseDbType('8')">
+              <div class="limg"><img :src="databaseImg.imgibmdb2"></div>
+              <div class="ltitle">
+                <el-tooltip content="db2数据库" placement="bottom" effect="light">
+                  <p class="title">db2</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='5'" class="list"  @click="chooseDbType('5')">
+              <div class="limg"><img :src="databaseImg.imgPostgreSQL"></div>
+              <div class="ltitle">
+                <el-tooltip content="PostgreSQ数据库" placement="bottom" effect="light">
+                  <p class="title">PostgreSQ</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='6'" class="list" @click="chooseDbType('6')">
+              <div class="limg"><img :src="databaseImg.imgSqlserver"></div>
+              <div class="ltitle">
+                <el-tooltip content="Sqlserver数据库" placement="bottom" effect="light">
+                  <p class="title">Sqlserver</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='7'" class="list" @click="chooseDbType('7')">
+              <div class="limg"><img :src="databaseImg.imgkingbase"></div>
+              <div class="ltitle">
+                <el-tooltip content="kingbase数据库" placement="bottom" effect="light">
+                  <p class="title">kingbase</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='10'" class="list"  @click="chooseDbType('10')">
+              <div class="limg"><img :src="databaseImg.imggaussdb"></div>
+              <div class="ltitle">
+                <el-tooltip content="GaussDB数据库" placement="bottom" effect="light">
+                  <p class="title">GaussDB</p>
+                </el-tooltip>
+              </div>
+            </div>
+            <div v-if="form.dbType =='4'" class="list"  @click="chooseDbType('4')">
+              <div class="limg"><img :src="databaseImg.imgdefault"></div>
+              <div class="ltitle">
+                <el-tooltip content="MaxCompute数据库" placement="bottom" effect="light">
+                  <p class="title">MaxCompute</p>
+                </el-tooltip>
+              </div>
+            </div>
+          </div><!--modellist 模型监控列表-->
+        </el-descriptions-item>
+      </el-descriptions>
+      <el-descriptions style="margin-top: 20px" title="连接信息" :column="2" border size="medium">
+        <el-descriptions-item :labelStyle="{width: '200px'}" :contentStyle="{width: '35%'}">
+          <template slot="label">
+            <i class="el-icon-coin"></i>
+            主机
+          </template>
+          {{form2.host}}
+        </el-descriptions-item>
+        <el-descriptions-item :labelStyle="{width: '200px'}">
+          <template slot="label">
+            <i class="el-icon-thumb"></i>
+            端口
+          </template>
+          {{form2.port}}
+        </el-descriptions-item>
+        <el-descriptions-item v-if="form.dbType === '3' || form.dbType === '4'">
+          <template slot="label">
+            <i class="el-icon-user"></i>
+            服务名
+          </template>
+          {{form2.sid}}
+        </el-descriptions-item>
+        <el-descriptions-item >
+          <template slot="label">
+            <i class="el-icon-coin"></i>
+            数据库
+          </template>
+          {{form2.dbName}}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-user"></i>
+            用户名
+          </template>
+          {{form2.username}}
+        </el-descriptions-item>
+        <el-descriptions-item>
+          <template slot="label">
+            <i class="el-icon-s-check"></i>
+            密码
+          </template>
+          {{form2.password}}
+        </el-descriptions-item>
+      </el-descriptions>
     </div>
   </el-card>
 </template>
 
 <script>
 import { getDataSource, checkConnection, sync, word } from '@/api/metadata/datasource'
+import imgMySQL from '@/assets/database/MySQL.svg'
+import imgMariaDB from '@/assets/database/MariaDB.svg'
+import imgOracle from '@/assets/database/Oracle.svg'
+import imgdm8 from '@/assets/database/dm8.png'
+import imgibmdb2 from '@/assets/database/ibmdb2.png'
+import imgPostgreSQL from '@/assets/database/PostgreSQL.svg'
+import imgSqlserver from '@/assets/database/Sqlserver.svg'
+import imgdefault from '@/assets/database/default.svg'
+import imgkingbase from '@/assets/database/kingbase.png'
+import imggaussdb from '@/assets/database/gaussdb.png'
 
 export default {
   name: 'DataSourceDetail',
@@ -86,6 +203,18 @@ export default {
   data() {
     return {
       title: '数据源详情',
+      databaseImg: {
+        imgMySQL: imgMySQL,
+        imgMariaDB: imgMariaDB,
+        imgOracle: imgOracle,
+        imgdm8: imgdm8,
+        imgibmdb2: imgibmdb2,
+        imgPostgreSQL: imgPostgreSQL,
+        imgSqlserver: imgSqlserver,
+        imgdefault: imgdefault,
+        imgkingbase: imgkingbase,
+        imggaussdb: imggaussdb
+      },
       // 展示切换
       showOptions: {
         data: {},
@@ -129,6 +258,7 @@ export default {
       getDataSource(id).then(response => {
         if (response.success) {
           this.form = response.data
+          console.log('ddd', this.form)
           this.form2 = this.form.dbSchema
         }
       })

src/views/metadata/datasource/DataSourceEdit.vue

@@ -3,73 +3,164 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-if="active == 2" v-hasPerm="['metadata:datasource:edit']" size="mini" icon="el-icon-plus" round :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 3" type="primary" size="mini" icon="el-icon-plus" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active != 3" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
+        <el-button v-if="active != 1" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
     <div class="body-wrapper">
       <el-steps :active="active" finish-status="success" align-center>
-        <el-step title="数据源信息" />
+        <el-step title="填写数据源信息" />
-        <el-step title="连接信息" />
+        <el-step title="选择数据库类型" />
+        <el-step title="填写连接信息" />
       </el-steps>
       <el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="数据源类型" prop="dbType">
+        <div style="padding: 20px 200px">
-          <el-select v-model="form.dbType">
+          <el-form-item label="数据源名称" prop="sourceName">
-            <el-option
+            <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
-              v-for="item in dbTypeOptions"
+          </el-form-item>
-              :key="item.id"
+          <el-form-item label="状态" prop="status">
-              :label="item.itemValue"
+            <el-radio-group v-model="form.status">
-              :value="item.itemText"
+              <el-radio
-            />
+                v-for="dict in statusOptions"
-          </el-select>
+                :key="dict.id"
-        </el-form-item>
+                :label="dict.itemText"
-        <el-form-item label="数据源名称" prop="sourceName">
+              >{{ dict.itemValue }}</el-radio>
-          <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
+            </el-radio-group>
-        </el-form-item>
+          </el-form-item>
-        <el-form-item label="状态" prop="status">
+          <el-form-item label="备注" prop="remark">
-          <el-radio-group v-model="form.status">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-            <el-radio
+          </el-form-item>
-              v-for="dict in statusOptions"
+        </div>
-              :key="dict.id"
-              :label="dict.itemText"
-            >{{ dict.itemValue }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
       </el-form>
-      <el-form v-if="active == 2" ref="form2" :model="form2" :rules="rules2" label-width="80px">
+      <el-form v-if="active == 2" ref="form" :model="form" :rules="rules" label-width="120px">
-        <el-form-item label="主机" prop="host">
+        <div class="modellist" style="padding: 20px 200px">
-          <el-input v-model="form2.host" placeholder="请输入主机" />
+          <div :class="[form.dbType =='1' ? 'choosedDbType' : '','list']" @click="chooseDbType('1')">
-        </el-form-item>
+            <div class="limg"><img :src="databaseImg.imgMySQL"></div>
-        <el-form-item label="端口" prop="port">
+            <div class="ltitle">
-          <el-input v-model="form2.port" placeholder="请输入端口" />
+              <el-tooltip content="mysql数据库" placement="bottom" effect="light">
-        </el-form-item>
+                <p class="title">mysql</p>
-        <el-form-item v-if="form.dbType === '3' || form.dbType === '4'" label="服务名" prop="sid">
+              </el-tooltip>
-          <el-input v-model="form2.sid" placeholder="请输入服务名" />
+            </div>
-        </el-form-item>
+          </div>
-        <el-form-item v-if="form.dbType !== '3' && form.dbType !== '4'" label="数据库" prop="dbName">
+          <div :class="[form.dbType =='2' ? 'choosedDbType' : '','list']" @click="chooseDbType('2')">
-          <el-input v-model="form2.dbName" placeholder="请输入数据库" />
+            <div class="limg"><img :src="databaseImg.imgMariaDB"></div>
-        </el-form-item>
+            <div class="ltitle">
-        <el-form-item label="用户名" prop="username">
+              <el-tooltip content="mariadb-3.0.3数据库" placement="bottom" effect="light">
-          <el-input v-model="form2.username" placeholder="请输入用户名" />
+                <p class="title">mariadb-3.0.3</p>
-        </el-form-item>
+              </el-tooltip>
-        <el-form-item label="密码" prop="password">
+            </div>
-          <el-input v-model="form2.password" placeholder="请输入密码" />
+          </div>
-        </el-form-item>
+          <div :class="[form.dbType =='3' ? 'choosedDbType' : '','list']" @click="chooseDbType('3')">
-        <el-form-item>
+            <div class="limg"><img :src="databaseImg.imgOracle"></div>
-          <el-button v-hasPerm="['metadata:datasource:connect']" size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
+            <div class="ltitle">
-        </el-form-item>
+              <el-tooltip content="oracle数据库" placement="bottom" effect="light">
+                <p class="title">oracle</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='9' ? 'choosedDbType' : '','list']" @click="chooseDbType('9')">
+            <div class="limg"><img :src="databaseImg.imgdm8"></div>
+            <div class="ltitle">
+              <el-tooltip content="dm数据库" placement="bottom" effect="light">
+                <p class="title">dm</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='8' ? 'choosedDbType' : '','list']" @click="chooseDbType('8')">
+            <div class="limg"><img :src="databaseImg.imgibmdb2"></div>
+            <div class="ltitle">
+              <el-tooltip content="db2数据库" placement="bottom" effect="light">
+                <p class="title">db2</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='5' ? 'choosedDbType' : '','list']" @click="chooseDbType('5')">
+            <div class="limg"><img :src="databaseImg.imgPostgreSQL"></div>
+            <div class="ltitle">
+              <el-tooltip content="PostgreSQ数据库" placement="bottom" effect="light">
+                <p class="title">PostgreSQ</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='6' ? 'choosedDbType' : '','list']" @click="chooseDbType('6')">
+            <div class="limg"><img :src="databaseImg.imgSqlserver"></div>
+            <div class="ltitle">
+              <el-tooltip content="Sqlserver数据库" placement="bottom" effect="light">
+                <p class="title">Sqlserver</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='7' ? 'choosedDbType' : '','list']" @click="chooseDbType('7')">
+            <div class="limg"><img :src="databaseImg.imgkingbase"></div>
+            <div class="ltitle">
+              <el-tooltip content="kingbase数据库" placement="bottom" effect="light">
+                <p class="title">kingbase</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='10' ? 'choosedDbType' : '','list']" @click="chooseDbType('10')">
+            <div class="limg"><img :src="databaseImg.imggaussdb"></div>
+            <div class="ltitle">
+              <el-tooltip content="GaussDB数据库" placement="bottom" effect="light">
+                <p class="title">GaussDB</p>
+              </el-tooltip>
+            </div>
+          </div>
+          <div :class="[form.dbType =='4' ? 'choosedDbType' : '','list']" @click="chooseDbType('4')">
+            <div class="limg"><img :src="databaseImg.imgdefault"></div>
+            <div class="ltitle">
+              <el-tooltip content="MaxCompute数据库" placement="bottom" effect="light">
+                <p class="title">MaxCompute</p>
+              </el-tooltip>
+            </div>
+          </div>
+        </div><!--modellist 模型监控列表-->
+
+      </el-form>
+      <el-form v-if="active == 3" ref="form2" :model="form2" :rules="rules2" label-width="80px">
+        <div style="padding: 20px 200px">
+          <el-form-item label="主机" prop="host">
+            <el-input v-model="form2.host" placeholder="请输入主机" />
+          </el-form-item>
+          <el-form-item label="端口" prop="port">
+            <el-input v-model="form2.port" placeholder="请输入端口" />
+          </el-form-item>
+          <el-form-item v-if="form.dbType === '3' || form.dbType === '4'" label="服务名" prop="sid">
+            <el-input v-model="form2.sid" placeholder="请输入服务名" />
+          </el-form-item>
+          <el-form-item v-if="form.dbType !== '3' && form.dbType !== '4'" label="数据库" prop="dbName">
+            <el-input v-model="form2.dbName" placeholder="请输入数据库" />
+          </el-form-item>
+          <el-form-item label="用户名" prop="username">
+            <el-input v-model="form2.username" placeholder="请输入用户名" />
+          </el-form-item>
+          <el-form-item label="密码" prop="password">
+            <el-input v-model="form2.password" placeholder="请输入密码" />
+          </el-form-item>
+          <el-form-item>
+            <el-button size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
+          </el-form-item>
+        </div>
       </el-form>
-      <el-button v-if="active == 1" style="margin-top: 12px;" @click="handleNextStep">下一步</el-button>
-      <el-button v-if="active == 2" style="margin-top: 12px;" @click="handleLastStep">上一步</el-button>
     </div>
   </el-card>
 </template>
 
 <script>
 import { getDataSource, updateDataSource, checkConnection } from '@/api/metadata/datasource'
+import { editDataSource } from '@/api/datamodel/model'
+import imgMySQL from '@/assets/database/MySQL.svg'
+import imgMariaDB from '@/assets/database/MariaDB.svg'
+import imgOracle from '@/assets/database/Oracle.svg'
+import imgdm8 from '@/assets/database/dm8.png'
+import imgibmdb2 from '@/assets/database/ibmdb2.png'
+import imgPostgreSQL from '@/assets/database/PostgreSQL.svg'
+import imgSqlserver from '@/assets/database/Sqlserver.svg'
+import imgdefault from '@/assets/database/default.svg'
+import imgkingbase from '@/assets/database/kingbase.png'
+import imggaussdb from '@/assets/database/gaussdb.png'
 
 export default {
   name: 'DataSourceEdit',
@@ -84,6 +175,19 @@ export default {
   data() {
     return {
       title: '数据源编辑',
+      databaseImg: {
+        isActive: true,
+        imgMySQL: imgMySQL,
+        imgMariaDB: imgMariaDB,
+        imgOracle: imgOracle,
+        imgdm8: imgdm8,
+        imgibmdb2: imgibmdb2,
+        imgPostgreSQL: imgPostgreSQL,
+        imgSqlserver: imgSqlserver,
+        imgdefault: imgdefault,
+        imgkingbase: imgkingbase,
+        imggaussdb: imggaussdb
+      },
       // 展示切换
       showOptions: {
         data: {},
@@ -202,6 +306,7 @@ export default {
           updateDataSource(this.form).then(response => {
             if (response.success) {
               this.$message.success('保存成功')
+              this.updateModelDataSource()
               setTimeout(() => {
                 // 2秒后跳转列表页
                 this.$emit('showCard', this.showOptions)
@@ -219,6 +324,21 @@ export default {
           })
         }
       })
+    },
+    updateModelDataSource() {
+      const dbType = this.form.dbType
+      const dataSource = {
+        projectId: this.form2.dbName,
+        databaseName: this.form2.dbName,
+        schemaName: this.form2.schema === '' ? this.form2.dbName : this.form2.schema,
+        databaseType: dbType,
+        url: this.form2.host + ':' + this.form2.port + '/' + this.form2.dbName,
+        username: this.form2.username,
+        password: this.form2.password
+      }
+      editDataSource(dataSource).then(() => {
+      }).catch(() => {
+      })
     }
   }
 }
@@ -229,4 +349,7 @@ export default {
   height: calc(100vh - 230px);
   overflow-y: auto;
 }
+.choosedDbType{
+  border: 1px solid #165DFF;
+}
 </style>

src/views/metadata/datasource/DataSourceList.vue

@@ -1,6 +1,11 @@
 <template>
   <el-card class="box-card" shadow="always">
     <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="项目" prop="projectId">
+        <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
+          <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="数据源名称" prop="sourceName">
         <el-input
           v-model="queryParams.sourceName"
@@ -20,14 +25,12 @@
       <el-col :span="12">
         <el-button-group>
           <el-button
-            v-hasPerm="['metadata:datasource:add']"
             type="primary"
             icon="el-icon-plus"
             size="mini"
             @click="handleAdd"
           >新增</el-button>
           <el-button
-            v-hasPerm="['metadata:datasource:refresh']"
             type="warning"
             icon="el-icon-refresh"
             size="mini"
@@ -40,7 +43,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -51,7 +54,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -65,7 +68,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -103,21 +106,18 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
-            v-hasPerm="['metadata:datasource:edit']"
             size="mini"
             type="text"
             icon="el-icon-edit-outline"
             @click="handleEdit(scope.row)"
           >修改</el-button>
           <el-button
-            v-hasPerm="['metadata:datasource:detail']"
             size="mini"
             type="text"
             icon="el-icon-view"
             @click="handleDetail(scope.row)"
           >详情</el-button>
           <el-button
-            v-hasPerm="['metadata:datasource:remove']"
             size="mini"
             type="text"
             icon="el-icon-delete"
@@ -146,7 +146,7 @@ export default {
   name: 'DataSourceList',
   data() {
     return {
-      tableHeight: document.body.offsetHeight - 310 + 'px',
+      tableHeight: document.body.offsetHeight - 330 + 'px',
       // 展示切换
       showOptions: {
         data: {},
@@ -160,6 +160,12 @@ export default {
       // 表格头
       tableColumns: [
         { prop: 'sourceName', label: '数据源名称', show: true },
+        {
+          prop: 'dbType',
+          label: '数据库类型',
+          show: true,
+          formatter: this.dbTypeFormatter
+        },
         {
           prop: 'isSync',
           label: '同步状态',
@@ -174,11 +180,15 @@ export default {
         },
         { prop: 'createTime', label: '创建时间', show: true }
       ],
+      projectsOptions: [
+        { id: '1111', projectName: '演示项目' }
+      ],
       // 默认选择中表格头
       checkedTableColumns: [],
       tableSize: 'medium',
       // 状态数据字典
       statusOptions: [],
+      dbTypeOptions: [],
       // 数据源表格数据
       dataSourceList: [],
       // 总数据条数
@@ -187,6 +197,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 20,
+        projectId: '1111',
         sourceName: ''
       }
     }
@@ -197,6 +208,11 @@ export default {
         this.statusOptions = response.data
       }
     })
+    this.getDicts('data_db_type').then(response => {
+      if (response.success) {
+        this.dbTypeOptions = response.data
+      }
+    })
     this.getList()
   },
   mounted() {
@@ -312,6 +328,10 @@ export default {
       this.queryParams.pageNum = val
       this.getList()
     },
+    dbTypeFormatter(row, column, cellValue, index) {
+      const dictLabel = this.selectDictLabel(this.dbTypeOptions, cellValue)
+      return dictLabel
+    },
     syncFormatter(row, column, cellValue, index) {
       if (cellValue === '0') {
         return <el-tag type='warning'>未同步</el-tag>

src/views/metadata/offlinedata/OfflineDataDetail.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" shadow="always">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item">
+            <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <iframe src="http://192.168.1.217:8001/model/modelChildren?hideInMenu=true&projectId=1" width="100%" height="850px" frameborder="0" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'OfflineDataDetail',
+    data() {
+      return {
+        projectsOptions: [
+          { id: '1111', projectName: '演示项目' }
+        ],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 20,
+          projectId: '1111',
+          fileName: ''
+        }
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/metadata/offlinedata/OfflineDataList.vue

@@ -0,0 +1,355 @@
+<template>
+  <el-card v-loading="boxCardLoading" class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="项目" prop="projectId">
+        <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
+          <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="离线文件名称" prop="sourceName">
+        <el-input
+          v-model="queryParams.fileName"
+          placeholder="请输入离线文件名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <el-button-group>
+          <el-upload
+            class="upload-demo"
+            action="#"
+            :show-file-list="false"
+            :http-request="uploadOfflineFile"
+          >
+            <el-button size="mini" type="primary" icon="el-icon-upload2">上传</el-button>
+          </el-upload>
+        </el-button-group>
+      </el-col>
+      <el-col :span="12">
+        <div class="right-toolbar">
+          <el-tooltip content="密度" effect="dark" placement="top">
+            <el-dropdown trigger="click" @command="handleCommand">
+              <el-button circle size="mini">
+                <i class="el-icon-s-grid"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="medium">正常</el-dropdown-item>
+                <el-dropdown-item command="small">中等</el-dropdown-item>
+                <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-tooltip content="刷新" effect="dark" placement="top">
+            <el-button circle size="mini" @click="handleRefresh">
+              <i class="el-icon-refresh"></i>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="列设置" effect="dark" placement="top">
+            <el-popover placement="bottom" width="100" trigger="click">
+              <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                <el-checkbox
+                  v-for="(item, index) in tableColumns"
+                  :key="index"
+                  :label="item.prop"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+              <span slot="reference">
+                <el-button circle size="mini">
+                  <i class="el-icon-setting"></i>
+                </el-button>
+              </span>
+            </el-popover>
+          </el-tooltip>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :size="tableSize"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
+        <template slot-scope="scope">
+          <el-button
+            v-if="scope.row.isSwitch != 'jrcg'"
+            size="mini"
+            type="text"
+            icon="el-icon-sort"
+            @click="handleSwitch(scope.row)"
+          >执行接入</el-button>
+          <el-button
+            v-if="scope.row.isSwitch == 'jrcg'"
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleDetail(scope.row)"
+          >查看接入数据</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-download"
+            @click="handleDownload(scope.row)"
+          >下载</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDetail(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+</template>
+
+<script>
+  import { pageOfflineData, delDataSource, uploadFile } from '@/api/metadata/datasource'
+
+  export default {
+    name: 'OfflineDataList',
+    data() {
+      return {
+        tableHeight: document.body.offsetHeight - 330 + 'px',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showAdd: false,
+          showEdit: false,
+          showDetail: false
+        },
+        // 遮罩层
+        loading: true,
+        boxCardLoading: false,
+        // 表格头
+        tableColumns: [
+          { prop: 'fileName', label: '离线文件名称', show: true },
+          {
+            prop: 'offlineType',
+            label: '离线文件类型',
+            show: true,
+            formatter: this.offlineTypeeFormatter
+          },
+          {
+            prop: 'isSwitch',
+            label: '接入状态',
+            show: true,
+            formatter: this.isSwitchFormatter
+          },
+          { prop: 'createTime', label: '上传时间', show: true },
+          { prop: 'switchTime', label: '接入时间', show: true }
+        ],
+        projectsOptions: [
+          { id: '1111', projectName: '演示项目' }
+        ],
+        // 默认选择中表格头
+        checkedTableColumns: [],
+        tableSize: 'medium',
+        // 状态数据字典
+        statusOptions: [],
+        dbTypeOptions: [],
+        // 数据源表格数据
+        tableDataList: [],
+        // 总数据条数
+        total: 0,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 20,
+          projectId: '1111',
+          fileName: ''
+        }
+      }
+    },
+    created() {
+      this.getDicts('sys_common_status').then(response => {
+        if (response.success) {
+          this.statusOptions = response.data
+        }
+      })
+      this.getDicts('data_db_type').then(response => {
+        if (response.success) {
+          this.dbTypeOptions = response.data
+        }
+      })
+      this.getList()
+    },
+    mounted() {
+      this.initCols()
+    },
+    methods: {
+      /** 查询数据源列表 */
+      getList() {
+        this.loading = true
+        pageOfflineData(this.queryParams).then(response => {
+          this.loading = false
+          if (response.success) {
+            const { data } = response
+            this.tableDataList = data.data
+            this.total = data.total
+          }
+        })
+      },
+      initCols() {
+        this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+      },
+      handleSwitch(row) {
+        this.boxCardLoading = true
+        setTimeout(() => {
+          row.isSwitch = 'jrcg'
+          this.boxCardLoading = false
+          this.$message.success('接入成功')
+        }, 2000)
+      },
+      /** 详情按钮操作 */
+      handleDetail(row) {
+        this.showOptions.data.id = row.id
+        this.showOptions.showList = false
+        this.showOptions.showDetail = true
+        this.$emit('showCard', this.showOptions)
+      },
+      handleCheckedColsChange(val) {
+        this.tableColumns.forEach(col => {
+          if (!this.checkedTableColumns.includes(col.prop)) {
+            col.show = false
+          } else {
+            col.show = true
+          }
+        })
+      },
+      handleCommand(command) {
+        this.tableSize = command
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1
+        this.getList()
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 20,
+          fileName: ''
+        }
+        this.handleQuery()
+      },
+      /** 刷新列表 */
+      handleRefresh() {
+        this.getList()
+      },
+      handleUpload() {
+
+      },
+      handleDownload(row) {
+
+      },
+      /** 删除按钮操作 */
+      handleDelete(row) {
+        this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          delDataSource(row.id).then(response => {
+            if (response.success) {
+              this.$message.success('删除成功')
+              this.getList()
+            }
+          })
+        }).catch(() => {
+        })
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`)
+        this.queryParams.pageNum = val
+        this.getList()
+      },
+      offlineTypeeFormatter(row, column, cellValue, index) {
+        if (cellValue === 'sjy') {
+          return '数据源文件'
+        } else if (cellValue === 'sj') {
+          return '数据文件'
+        }
+      },
+      isSwitchFormatter(row, column, cellValue, index) {
+        if (cellValue === 'djr') {
+          return <el-tag type='info'>待接入</el-tag>
+        } else if (cellValue === 'jrcg') {
+          return <el-tag type='success'>接入成功</el-tag>
+        } else if (cellValue === 'jrsb') {
+          return <el-tag type='error'>接入失败</el-tag>
+        }
+      },
+      uploadOfflineFile(file) {
+        this.formData = new FormData()
+        this.formData.append('file', file.file)
+        // 请求接口
+        uploadFile(this.formData, 'sjy').then((response) => {
+          if (response.success) {
+            this.$message.success('上传成功')
+          } else {
+            this.$message.error('上传失败')
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .right-toolbar {
+    float: right;
+  }
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 170px);
+  }
+</style>
+

src/views/metadata/offlinedata/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <offline-data-list v-if="options.showList" @showCard="showCard" />
+      <offline-data-detail v-if="options.showDetail" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+  import OfflineDataList from './OfflineDataList'
+  import OfflineDataDetail from './OfflineDataDetail'
+
+  export default {
+    name: 'OfflineData',
+    components: { OfflineDataList, OfflineDataDetail },
+    data() {
+      return {
+        options: {
+          data: {},
+          showList: true,
+          showDetail: true
+        }
+      }
+    },
+    methods: {
+      showCard(data) {
+        Object.assign(this.options, data)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/metadata/sqlconsole/index.vue

@@ -1,189 +1,23 @@
 <template>
   <div class="app-container">
-    <el-card class="box-card" shadow="always">
+    <iframe src="http://192.168.1.217:8001/OnlinInquiry/OnlinInquiryChildren" width="100%" height="850px" frameborder="0" />
-      <el-row>
-        <el-col :span="24">
-          <el-form :inline="true" class="demo-form-inline">
-            <el-form-item label="数据源">
-              <el-select v-model="sqlDataSource" placeholder="请选择数据源">
-                <el-option
-                  v-for="source in sourceOptions"
-                  :key="source.id"
-                  :label="source.sourceName"
-                  :value="source.id"
-                  :disabled="source.status === '0'"
-                />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button size="mini" round :disabled="sqlExecuting" @click="runData">运行</el-button>
-              <el-button size="mini" round :disabled="!sqlExecuting" @click="stopData">停止</el-button>
-              <el-button size="mini" round :disabled="sqlExecuting" @click="formaterSql">格式化</el-button>
-              <el-button size="mini" round :disabled="sqlExecuting" @click="refreshData">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col :span="24">
-          <sql-editor
-            ref="sqleditor"
-            :value="sqlText"
-            style="height: 300px; margin: 20px 0;"
-            @changeTextarea="changeTextarea($event)"
-          />
-        </el-col>
-      </el-row>
-      <el-row>
-        <el-col>
-          <div v-if="sqlExecuting" v-loading="sqlExecuting">数据加载中...</div>
-          <div v-else>
-            <div v-if="sqlConsole.length > 0">
-              <el-tabs v-model="activeTabName" type="border-card">
-                <el-tab-pane label="信息" name="table0">
-                  <pre>{{ executeResultInfo }}</pre>
-                </el-tab-pane>
-                <el-tab-pane v-for="(item,index) in sqlConsole" :key="(index+1)" :name="'table'+(index+1)" :label="'结果'+(index+1)">
-                  <el-table
-                    :data="item.dataList"
-                    stripe
-                    border
-                    :max-height="300"
-                    style="width: 100%; margin: 15px 0;"
-                  >
-                    <el-table-column label="序号" width="55" align="center">
-                      <template slot-scope="scope">
-                        <span>{{ scope.$index + 1 }}</span>
-                      </template>
-                    </el-table-column>
-                    <template v-for="(column, index) in item.columnList">
-                      <el-table-column
-                        :key="index"
-                        :prop="column"
-                        :label="column"
-                        align="center"
-                        show-overflow-tooltip
-                      />
-                    </template>
-                  </el-table>
-                </el-tab-pane>
-              </el-tabs>
-            </div>
-          </div>
-        </el-col>
-      </el-row>
-    </el-card>
   </div>
 </template>
 
 <script>
-import sqlFormatter from 'sql-formatter'
-import SqlEditor from '@/components/SqlEditor'
-import { listDataSource } from '@/api/metadata/datasource'
-import { runSql, stopSql } from '@/api/metadata/sqlconsole'
 
 export default {
   name: 'SqlConsole',
-  components: {
-    SqlEditor
-  },
   data() {
     return {
-      // 数据源数据字典
-      sourceOptions: [],
-      sqlDataSource: undefined,
-      sqlText: undefined,
-      sqlExecuting: false,
-      activeTabName: 'table0',
-      sqlExecutorId: undefined,
-      sqlConsole: [],
-      executeResultInfo: undefined
     }
   },
   created() {
-    this.getDataSourceList()
   },
   methods: {
-    getDataSourceList() {
-      listDataSource().then(response => {
-        if (response.success) {
-          this.sourceOptions = response.data
-        }
-      })
-    },
-    runData() {
-      if (!this.sqlDataSource) {
-        this.$message.error('数据源不能为空')
-        return
-      }
-      if (!this.sqlText) {
-        this.$message.error('查询SQL不能为空')
-        return
-      }
-      this.sqlExecuting = true
-      this.sqlExecutorId = (new Date()).getTime() + Math.ceil(Math.random() * 1000)
-      this.sqlConsole = []
-      const data = {}
-      data.sqlKey = this.sqlExecutorId
-      data.sourceId = this.sqlDataSource
-      data.sqlText = this.sqlText
-      runSql(data).then(response => {
-        if (response.success) {
-          const { data } = response
-          let resultStr = ''
-          for (let i = 0; i < data.length; i++) {
-            const item = data[i]
-            resultStr += item.sql
-            resultStr += '\n> 状态：' + ((item.success) ? '成功' : '失败')
-            if (item.count && item.count >= 0) {
-              resultStr += '\n> 影响行数：' + item.count
-            }
-            resultStr += '\n> 耗时：' + (item.time || 0) / 1000 + 's'
-            resultStr += '\n\n'
-          }
-          this.executeResultInfo = resultStr
-          this.sqlConsole = data
-        }
-        this.sqlExecuting = false
-      })
-    },
-    stopData() {
-      const data = {}
-      data.sqlKey = this.sqlExecutorId
-      stopSql(data).then(response => {
-        if (response.success) {
-          this.$message.success('停止成功')
-        }
-        this.sqlExecuting = false
-      })
-    },
-    changeTextarea(val) {
-      this.sqlText = val
-    },
-    formaterSql() {
-      if (!this.sqlText) {
-        return
-      }
-      this.$refs.sqleditor.editor.setValue(sqlFormatter.format(this.$refs.sqleditor.editor.getValue()))
-    },
-    refreshData() {
-      if (!this.sqlText) {
-        return
-      }
-      this.sqlExecuting = false
-      this.activeTabName = 'table0'
-      this.sqlExecutorId = undefined
-      this.sqlText = undefined
-      this.$refs.sqleditor.editor.setValue('')
-      this.sqlConsole = []
-      this.executeResultInfo = undefined
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.el-card ::v-deep .el-card__body {
-  height: calc(100vh - 170px);
-}
 </style>

src/views/monitor/project/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <data-source-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <data-source-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <data-source-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <data-source-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import DataSourceList from './projectList'
+import DataSourceAdd from './projectAdd'
+import DataSourceEdit from './projectEdit'
+import DataSourceDetail from './projectDetail'
+
+export default {
+  name: 'Project',
+  components: { DataSourceList, DataSourceAdd, DataSourceEdit, DataSourceDetail },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/monitor/project/projectAdd.vue

@@ -0,0 +1,119 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <div style="padding: 20px 200px">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+          </el-form-item>
+
+          <el-form-item label="项目描述" prop="projectDescription">
+            <el-input v-model="form.projectDescription" type="textarea" placeholder="请输入项目描述" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { addProject } from '@/api/monitor/projectApi'
+
+export default {
+  name: 'ProjectAdd',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '项目新增',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {
+        id: undefined,
+        projectName: undefined,
+        projectDescription: undefined,
+        subjectId: undefined,
+        deleted: undefined
+      },
+      // 表单校验
+      rules: {
+        projectName: [
+          { required: true, message: '项目名称不能为空', trigger: 'change' }
+        ]
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.form.dbSchema = this.form2
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          addProject(this.form).then(response => {
+            if (response.code === 200) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(() => {
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 230px);
+  overflow-y: auto;
+}
+.choosedDbType{
+  border: 1px solid #165DFF;
+}
+</style>

src/views/monitor/project/projectDetail.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" disabled>
+        <div style="padding: 20px 200px">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+          </el-form-item>
+
+          <el-form-item label="项目描述" prop="projectDescription">
+            <el-input v-model="form.projectDescription" type="textarea" placeholder="请输入项目描述" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import { getProjectById } from '@/api/monitor/projectApi'
+
+  export default {
+    name: 'ProjectDetail',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        title: '项目新增',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showAdd: false,
+          showEdit: false,
+          showDetail: false
+        },
+        // 保存按钮
+        loadingOptions: {
+          loading: false,
+          loadingText: '保存',
+          isDisabled: false
+        },
+        // 表单参数
+        form: {
+          id: undefined,
+          projectName: undefined,
+          projectDescription: undefined,
+          subjectId: undefined,
+          deleted: undefined
+        },
+        // 表单校验
+        rules: {
+          projectName: [
+            { required: true, message: '项目名称不能为空', trigger: 'change' }
+          ]
+        }
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.getProjectById(this.data.id)
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      /** 获取详情 */
+      async getProjectById(id) {
+        this.form = await getProjectById(id).then(response => {
+          if (response.code === 200) {
+            return response.data
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .choosedDbType{
+    border: 1px solid #165DFF;
+  }
+</style>

src/views/monitor/project/projectEdit.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <div style="padding: 20px 200px">
+          <el-form-item label="项目名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入项目名称" />
+          </el-form-item>
+
+          <el-form-item label="项目描述" prop="projectDescription">
+            <el-input v-model="form.projectDescription" type="textarea" placeholder="请输入项目描述" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  import { getProjectById, updateProject } from '@/api/monitor/projectApi'
+
+  export default {
+    name: 'ProjectEdit',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        title: '项目修改',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showAdd: false,
+          showEdit: false,
+          showDetail: false
+        },
+        // 保存按钮
+        loadingOptions: {
+          loading: false,
+          loadingText: '保存',
+          isDisabled: false
+        },
+        // 表单参数
+        form: {
+          id: undefined,
+          projectName: undefined,
+          projectDescription: undefined,
+          subjectId: undefined,
+          deleted: undefined
+        },
+        // 表单校验
+        rules: {
+          projectName: [
+            { required: true, message: '项目名称不能为空', trigger: 'change' }
+          ]
+        }
+      }
+    },
+    created() {
+    },
+    mounted() {
+      this.getProjectById(this.data.id)
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      /** 获取详情 */
+      async getProjectById(id) {
+        this.form = await getProjectById(id).then(response => {
+          if (response.code === 200) {
+            return response.data
+          }
+        })
+      },
+      /** 提交按钮 */
+      submitForm: function() {
+        this.$refs['form'].validate(valid => {
+          if (valid) {
+            this.loadingOptions.loading = true
+            this.loadingOptions.loadingText = '保存中...'
+            this.loadingOptions.isDisabled = true
+            updateProject(this.form).then(response => {
+              if (response.code === 200) {
+                this.$message.success('保存成功')
+                setTimeout(() => {
+                  // 2秒后跳转列表页
+                  this.$emit('showCard', this.showOptions)
+                }, 2000)
+              } else {
+                this.$message.error('保存失败')
+                this.loadingOptions.loading = false
+                this.loadingOptions.loadingText = '保存'
+                this.loadingOptions.isDisabled = false
+              }
+            }).catch(() => {
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .choosedDbType{
+    border: 1px solid #165DFF;
+  }
+</style>

src/views/monitor/project/projectList.vue

@@ -0,0 +1,300 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="项目名称" prop="sourceName">
+        <el-input
+          v-model="queryParams.projectName"
+          placeholder="请输入项目名称"
+          clearable
+          size="small"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+        <el-button-group>
+          <el-button
+            type="primary"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+          >新增</el-button>
+        </el-button-group>
+      </el-col>
+      <el-col :span="12">
+        <div class="right-toolbar">
+          <el-tooltip content="密度" effect="dark" placement="top">
+            <el-dropdown trigger="click" @command="handleCommand">
+              <el-button circle size="mini">
+                <i class="el-icon-s-grid"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="medium">正常</el-dropdown-item>
+                <el-dropdown-item command="small">中等</el-dropdown-item>
+                <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-tooltip content="刷新" effect="dark" placement="top">
+            <el-button circle size="mini" @click="handleRefresh">
+              <i class="el-icon-refresh"></i>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="列设置" effect="dark" placement="top">
+            <el-popover placement="bottom" width="100" trigger="click">
+              <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                <el-checkbox
+                  v-for="(item, index) in tableColumns"
+                  :key="index"
+                  :label="item.prop"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+              <span slot="reference">
+                <el-button circle size="mini">
+                  <i class="el-icon-setting"></i>
+                </el-button>
+              </span>
+            </el-popover>
+          </el-tooltip>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="dataSourceList"
+      border
+      tooltip-effect="dark"
+      :size="tableSize"
+      :height="tableHeight"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit-outline"
+            @click="handleEdit(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleDetail(scope.row)"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+</template>
+
+<script>
+import { pageProjectList, delNewProject } from '@/api/monitor/projectApi'
+export default {
+  name: 'ProjectList',
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 330 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        {
+          prop: 'projectName',
+          label: '项目名称',
+          show: true, width: '90px'
+        },
+        { prop: 'projectDescription', label: '项目描述', show: true }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 状态数据字典
+      statusOptions: [],
+      dbTypeOptions: [],
+      // 数据源表格数据
+      dataSourceList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        projectName: ''
+      }
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+    this.initCols()
+  },
+  methods: {
+    /** 查询数据源列表 */
+    getList() {
+      this.loading = true
+      // pageDataSource(this.queryParams).then(response => {
+      //   this.loading = false
+      //   if (response.success) {
+      //     const { data } = response
+      //     this.dataSourceList = data.data
+      //     this.total = data.total
+      //   }
+      // })
+      pageProjectList(this.queryParams).then(response => {
+        this.loading = false
+        if (response.code === 200) {
+          this.dataSourceList = response.rows
+          this.total = response.total
+        }
+        console.log('response==', response)
+      })
+    },
+    initCols() {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange(val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand(command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        sourceName: ''
+      }
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh() {
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.showOptions.data = {}
+      this.showOptions.showList = false
+      this.showOptions.showAdd = true
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = true
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = true
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delNewProject(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right-toolbar {
+  float: right;
+}
+.el-card ::v-deep .el-card__body {
+  height: calc(100vh - 170px);
+}
+</style>

src/views/quality/checkcontentrule/CheckContentRuleAdd.vue

@@ -3,35 +3,43 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['quality:rule:add']" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 2" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 1" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
+        <el-button v-if="active == 2" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
-    <div class="body-wrapper">
+    <div class="body-wrapper" style="padding-left: 20%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+      <el-steps :active="active" finish-status="success" align-center style="width: 900px">
-        <el-form-item label="规则名称" prop="ruleName">
+        <el-step title="填写检测用例信息" />
-          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
+        <el-step title="选择检测数据源" />
-        </el-form-item>
+      </el-steps>
-        <el-form-item label="核查类型" prop="ruleItemId">
+      <!--<el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 800px">
-          <el-select v-model="form.ruleItemId" placeholder="请选择核查类型" @change="ruleItemSelectChanged">
+        <div style="padding: 20px 100px">
-            <el-option
+          <el-form-item label="用例名称" prop="ruleName">
-              v-for="item in ruleItemOptions"
+            <el-input v-model="form.ruleName" placeholder="请输入用例名称" />
-              :key="item.id"
+          </el-form-item>
-              :label="item.itemExplain"
+          <el-form-item label="检测类型" prop="ruleItemId">
-              :value="item.id"
+            <el-select v-model="form.ruleItemId" placeholder="请选择检测类型" @change="ruleItemSelectChanged">
-            />
+              <el-option
-          </el-select>
+                v-for="item in ruleItemOptions"
-        </el-form-item>
+                :key="item.id"
-        <el-form-item label="规则级别" prop="ruleLevelId">
+                :label="item.itemExplain"
-          <el-select v-model="form.ruleLevelId" placeholder="请选择规则级别">
+                :value="item.id"
-            <el-option
+              />
-              v-for="item in ruleLevelOptions"
+            </el-select>
-              :key="item.id"
+          </el-form-item>
-              :label="item.name"
+          <el-form-item label="用例级别" prop="ruleLevelId">
-              :value="item.id"
+            <el-select v-model="form.ruleLevelId" placeholder="请选择用例级别">
-            />
+              <el-option
-          </el-select>
+                v-for="item in ruleLevelOptions"
-        </el-form-item>
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
         <el-form-item label="数据源" prop="ruleSourceId">
           <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" @change="sourceSelectChanged">
             <el-option
@@ -54,8 +62,8 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="核查字段" prop="ruleColumnId">
+        <el-form-item label="检测字段" prop="ruleColumnId">
-          <el-select v-model="form.ruleColumnId" placeholder="请选择核查字段" @change="columnSelectChanged">
+          <el-select v-model="form.ruleColumnId" placeholder="请选择检测字段" @change="columnSelectChanged">
             <el-option
               v-for="column in columnOptions"
               :key="column.id"
@@ -66,7 +74,7 @@
             </el-option>
           </el-select>
         </el-form-item>
-        <el-divider content-position="left">核查配置</el-divider>
+        <el-divider content-position="left">检测配置</el-divider>
         <el-row v-if="form.ruleConfig.ruleItemCode === 'timeliness_key'">
           <el-col :span="24">
             <el-form-item label="判定阀值">
@@ -137,7 +145,7 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <!--        正则表达式规则-->
+        &lt;!&ndash;        正则表达式规则&ndash;&gt;
         <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
           <el-col :span="24">
             <el-form-item label="正则表达">
@@ -170,6 +178,81 @@
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
+      </el-form>-->
+
+      <el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px" style="width: 800px">
+        <div style="padding: 20px 100px">
+          <el-form-item label="用例名称" prop="ruleName">
+            <el-input v-model="form.ruleName" placeholder="请输入用例名称" />
+          </el-form-item>
+          <el-form-item label="检测类型" prop="ruleItemId">
+            <el-select v-model="form.ruleItemId" placeholder="请选择检测类型" style="width: 100%" @change="ruleItemSelectChanged">
+              <el-option
+                v-for="item in ruleItemOptions"
+                :key="item.id"
+                :label="item.itemExplain"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+<!--          <el-form-item label="用例级别" prop="ruleLevelId">-->
+<!--            <el-select v-model="form.ruleLevelId" placeholder="请选择用例级别" style="width: 100%">-->
+<!--              <el-option-->
+<!--                v-for="item in ruleLevelOptions"-->
+<!--                :key="item.id"-->
+<!--                :label="item.name"-->
+<!--                :value="item.id"-->
+<!--              />-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
+        </div>
+      </el-form>
+      <el-form v-if="active == 2" ref="form" :model="form" :rules="rules" label-width="80px" style="width: 800px">
+        <div style="padding: 20px 100px">
+          <el-form-item label="数据源" prop="ruleSourceId">
+            <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" style="width: 100%" @change="sourceSelectChanged">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source.id"
+                :label="source.sourceName"
+                :value="source.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+            <el-col :span="24">
+              <el-form-item label="正则表达">
+                <el-input v-model="form.ruleConfig.regular.regular" placeholder="请输入正则规则" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+            <el-form-item label="常用正则">
+              <el-radio-group v-model="form.zzStatus" @change="handleZzStatusRadioChange">
+                <el-radio label="1">手机号码</el-radio>
+                <el-radio label="2">邮箱</el-radio>
+                <el-radio label="3">整数</el-radio>
+                <el-radio label="4">负数</el-radio>
+                <el-radio label="5">身份证</el-radio>
+                <el-radio label="6">日期格式yyyy-mm-dd</el-radio>
+                <el-radio label="7">IP</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-row>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{ dict.itemValue }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </div>
       </el-form>
     </div>
   </el-card>
@@ -194,7 +277,8 @@ export default {
   },
   data() {
     return {
-      title: '核查规则新增',
+      title: '检测用例新增',
+      active: 1,
       // 展示切换
       showOptions: {
         data: {},
@@ -310,6 +394,18 @@ export default {
     showCard() {
       this.$emit('showCard', this.showOptions)
     },
+    /** 步骤条下一步 */
+    handleNextStep() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.active++
+        }
+      })
+    },
+    /** 步骤条上一步 */
+    handleLastStep() {
+      this.active--
+    },
     getRuleLevelList() {
       listRuleLevel().then(response => {
         if (response.success) {
@@ -415,6 +511,8 @@ export default {
           this.loadingOptions.loading = true
           this.loadingOptions.loadingText = '保存中...'
           this.loadingOptions.isDisabled = true
+          this.form.ruleTableId = 'all'
+          this.form.ruleTable = '全表'
           addCheckRule(this.form).then(response => {
             if (response.success) {
               this.$message.success('保存成功')
@@ -442,6 +540,16 @@ export default {
         this.form.ruleConfig.regular.regular = '^[1-9][0-9]{10}$'
       } else if (value === '2') {
         this.form.ruleConfig.regular.regular = '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$'
+      } else if (value === '3') {
+        this.form.ruleConfig.regular.regular = '[0-9]*[1-9][0-9]*'
+      } else if (value === '4') {
+        this.form.ruleConfig.regular.regular = '-[0-9]*[1-9][0-9]*'
+      } else if (value === '5') {
+        this.form.ruleConfig.regular.regular = '\\d{15}(\\d\\d[0-9xX])?'
+      } else if (value === '6') {
+        this.form.ruleConfig.regular.regular = '(\\d{4}|\\d{2})-((1[0-2])|(0?[1-9]))-(([12][0-9])|(3[01])|(0?[1-9]))'
+      } else if (value === '7') {
+        this.form.ruleConfig.regular.regular = '((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)'
       }
     }
   }

src/views/quality/checkcontentrule/CheckContentRuleDetail.vue

@@ -21,16 +21,16 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="规则级别">
+<!--        <el-form-item label="规则级别">-->
-          <el-select v-model="form.ruleLevelId">
+<!--          <el-select v-model="form.ruleLevelId">-->
-            <el-option
+<!--            <el-option-->
-              v-for="item in ruleLevelOptions"
+<!--              v-for="item in ruleLevelOptions"-->
-              :key="item.id"
+<!--              :key="item.id"-->
-              :label="item.name"
+<!--              :label="item.name"-->
-              :value="item.id"
+<!--              :value="item.id"-->
-            />
+<!--            />-->
-          </el-select>
+<!--          </el-select>-->
-        </el-form-item>
+<!--        </el-form-item>-->
         <el-form-item label="数据源">
           <el-select v-model="form.ruleSourceId">
             <el-option

src/views/quality/checkcontentrule/CheckContentRuleEdit.vue

@@ -3,7 +3,7 @@
     <div slot="header" class="clearfix">
       <span>{{ title }}</span>
       <el-button-group style="float: right;">
-        <el-button v-hasPerm="['quality:rule:edit']" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
@@ -22,16 +22,16 @@
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="规则级别" prop="ruleLevelId">
+<!--        <el-form-item label="规则级别" prop="ruleLevelId">-->
-          <el-select v-model="form.ruleLevelId" placeholder="请选择规则级别">
+<!--          <el-select v-model="form.ruleLevelId" placeholder="请选择规则级别">-->
-            <el-option
+<!--            <el-option-->
-              v-for="item in ruleLevelOptions"
+<!--              v-for="item in ruleLevelOptions"-->
-              :key="item.id"
+<!--              :key="item.id"-->
-              :label="item.name"
+<!--              :label="item.name"-->
-              :value="item.id"
+<!--              :value="item.id"-->
-            />
+<!--            />-->
-          </el-select>
+<!--          </el-select>-->
-        </el-form-item>
+<!--        </el-form-item>-->
         <el-form-item label="数据源" prop="ruleSourceId">
           <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" @change="sourceSelectChanged">
             <el-option
@@ -218,9 +218,6 @@ export default {
         ruleItemId: [
           { required: true, message: '核查类型不能为空', trigger: 'change' }
         ],
-        ruleLevelId: [
-          { required: true, message: '规则级别不能为空', trigger: 'change' }
-        ],
         ruleSourceId: [
           { required: true, message: '数据源不能为空', trigger: 'change' }
         ],

src/views/quality/checkcontentrule/CheckContentRuleList.vue

@@ -26,10 +26,35 @@
     <el-col :span="18">
       <el-card class="box-card" shadow="always">
         <el-form ref="queryForm" :model="queryParams" :inline="true">
-          <el-form-item label="规则名称" prop="ruleName">
+          <el-form-item label="项目" prop="projectId">
+            <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
+              <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据源" prop="ruleName">
+            <el-input
+              v-model="queryParams.ruleSource"
+              placeholder="请输入数据源"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="数据表" prop="ruleName">
+            <el-input
+              v-model="queryParams.ruleTable"
+              placeholder="请输入数据表"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="用例名称" prop="ruleName">
             <el-input
               v-model="queryParams.ruleName"
-              placeholder="请输入规则名称"
+              placeholder="请输入用例名称"
               clearable
               size="small"
               @keyup.enter.native="handleQuery"
@@ -45,7 +70,6 @@
           <el-col :span="12">
             <el-button-group>
               <el-button
-                v-hasPerm="['quality:rule:add']"
                 type="primary"
                 icon="el-icon-plus"
                 size="mini"
@@ -58,7 +82,7 @@
               <el-tooltip content="密度" effect="dark" placement="top">
                 <el-dropdown trigger="click" @command="handleCommand">
                   <el-button circle size="mini">
-                    <svg-icon class-name="size-icon" icon-class="colum-height" />
+                    <i class="el-icon-s-grid"></i>
                   </el-button>
                   <el-dropdown-menu slot="dropdown">
                     <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -69,7 +93,7 @@
               </el-tooltip>
               <el-tooltip content="刷新" effect="dark" placement="top">
                 <el-button circle size="mini" @click="handleRefresh">
-                  <svg-icon class-name="size-icon" icon-class="shuaxin" />
+                  <i class="el-icon-refresh"></i>
                 </el-button>
               </el-tooltip>
               <el-tooltip content="列设置" effect="dark" placement="top">
@@ -83,7 +107,7 @@
                   </el-checkbox-group>
                   <span slot="reference">
                     <el-button circle size="mini">
-                      <svg-icon class-name="size-icon" icon-class="shezhi" />
+                      <i class="el-icon-setting"></i>
                     </el-button>
                   </span>
                 </el-popover>
@@ -122,21 +146,18 @@
           <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
             <template slot-scope="scope">
               <el-button
-                v-hasPerm="['quality:rule:edit']"
                 size="mini"
                 type="text"
                 icon="el-icon-edit-outline"
                 @click="handleEdit(scope.row)"
               >修改</el-button>
               <el-button
-                v-hasPerm="['quality:rule:detail']"
                 size="mini"
                 type="text"
                 icon="el-icon-view"
                 @click="handleDetail(scope.row)"
               >详情</el-button>
               <el-button
-                v-hasPerm="['quality:rule:remove']"
                 size="mini"
                 type="text"
                 icon="el-icon-delete"
@@ -167,7 +188,7 @@ export default {
   name: 'CheckContentRuleList',
   data() {
     return {
-      tableHeight: document.body.offsetHeight - 310 + 'px',
+      tableHeight: document.body.offsetHeight - 330 + 'px',
       // 展示切换
       showOptions: {
         data: {},
@@ -180,12 +201,12 @@ export default {
       loading: true,
       // 表格头
       tableColumns: [
-        { prop: 'ruleName', label: '规则名称', show: true },
-        { prop: 'ruleType', label: '规则类型', show: true },
         { prop: 'ruleSource', label: '数据源', show: true },
-        { prop: 'ruleTable', label: '数据表', show: true, formatter: this.ruleTableFormatter },
+        /* { prop: 'ruleTable', label: '数据表', show: true, formatter: this.ruleTableFormatter },*/
-        { prop: 'ruleColumn', label: '核查字段', show: true, formatter: this.ruleColumnFormatter },
+        /* { prop: 'ruleColumn', label: '检测字段', show: true, formatter: this.ruleColumnFormatter },*/
-        { prop: 'ruleLevel', label: '规则级别', width: 100, show: true },
+        { prop: 'ruleName', label: '用例名称', show: true },
+        { prop: 'ruleType', label: '用例类型', show: true },
+        // { prop: 'ruleLevel', label: '用例级别', width: 100, show: true },
         {
           prop: 'status',
           label: '状态',
@@ -195,6 +216,9 @@ export default {
         },
         { prop: 'createTime', label: '创建时间', show: true }
       ],
+      projectsOptions: [
+        { id: '1111', projectName: '演示项目' }
+      ],
       // 默认选择中表格头
       checkedTableColumns: [],
       tableSize: 'medium',
@@ -208,6 +232,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 20,
+        projectId: '1111',
         ruleTypeId: '',
         ruleName: ''
       },
@@ -237,11 +262,11 @@ export default {
         if (response.success) {
           const { data } = response
           const tree = {}
-          tree.name = '规则类型'
+          tree.name = '用例类型'
           const children = []
           data.forEach(e => {
-            if (e.code === 'unique' || e.code === 'integrity' || e.code === 'accuracy' ||
+            if (e.code === 'integrity' || e.code === 'accuracy' ||
-              e.code === 'consistent' || e.code === 'relevance' || e.code === 'regular') {
+              e.code === 'consistent' || e.code === 'regular') {
               children.push(e)
             }
           })
@@ -308,7 +333,7 @@ export default {
     handleAdd() {
       this.showOptions.data = {}
       if (!this.queryParams.ruleTypeId) {
-        this.$message.warning('请先选择核查规则类型')
+        this.$message.warning('请先选择核查用例类型')
         return
       }
       this.showOptions.data.ruleTypeId = this.queryParams.ruleTypeId
@@ -386,7 +411,7 @@ export default {
     float: right;
   }
   .el-card ::v-deep .el-card__body {
-    height: calc(100vh - 170px);
+    height: calc(100vh - 100px);
   }
   .tree-wrapper {
     overflow-y: auto;

src/views/quality/checkjob/CheckJobEdit.vue

@@ -7,13 +7,13 @@
         <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
       </el-button-group>
     </div>
-    <div class="body-wrapper">
+    <div class="body-wrapper"  style="padding-left: 25%">
-      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px"  style="width: 700px">
         <el-form-item label="任务名称" prop="jobName">
           <el-input v-model="form.jobName" placeholder="任务名称" />
         </el-form-item>
         <el-form-item label="任务类型" prop="jobType">
-          <el-select v-model="form.jobType" placeholder="请选择任务类型" @change="ruleItemSelectChanged">
+          <el-select v-model="form.jobType" placeholder="请选择任务类型" @change="ruleItemSelectChanged" style="width: 100%">
             <el-option
               v-for="item in ruleItemOptions"
               :key="item.typeId"
@@ -22,7 +22,16 @@
             />
           </el-select>
         </el-form-item>
-        <el-divider content-position="left">任务配置</el-divider>
+        <el-form-item label="检测用例" prop="checkCase">
+          <el-select v-model="form.checkCase" multiple placeholder="检测用例" style="width: 100%">
+            <el-option
+              v-for="item in checkCaseOptions"
+              :key="item.id"
+              :label="item.ruleName"
+              :value="item.id">
+            </el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="cron表达式" prop="cronExpression">
           <el-input v-model="form.cronExpression" placeholder="cron表达式" />
         </el-form-item>
@@ -37,7 +46,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="任务概述" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input v-model="form.remark" type="textarea" :rows="8" placeholder="请输入内容" />
         </el-form-item>
       </el-form>
     </div>
@@ -46,9 +55,10 @@
 
 <script>
 import { updateCheckJob, getScheduleJobById } from '@/api/quality/checkjob'
+import { pageCheckRule } from '@/api/quality/checkrule'
 
 export default {
-  name: 'CheckJobAdd',
+  name: 'CheckJobEdit',
   props: {
     data: {
       type: Object,
@@ -88,6 +98,7 @@ export default {
           { required: true, message: 'cron表达式不能为空', trigger: 'blur' }
         ]
       },
+      checkCaseOptions: [],
       // 状态数据字典
       statusOptions: [],
       // 规则级别数据字典
@@ -95,7 +106,8 @@ export default {
       // 核查类型数据字典
       ruleItemOptions: [
         { typeId: 'structure', typeName: '结构符合性' },
-        { typeId: 'content', typeName: '内容符合性' }
+        { typeId: 'content', typeName: '内容符合性' },
+        { typeId: 'relevance', typeName: '关联符合性' }
       ],
       sourceOptions: [],
       tableOptions: [],
@@ -111,6 +123,7 @@ export default {
         this.statusOptions = response.data
       }
     })
+    this.getCheckRule()
   },
   mounted() {
     this.getCheckJob(this.data.id)
@@ -134,6 +147,29 @@ export default {
       })
       this.form.jobType = item.typeId
     },
+    getCheckRule() {
+      let ruleType = 'nr'
+      if(this.form.jobType == 'structure'){
+        ruleType = 'jg'
+      } else if(this.form.jobType == 'relevance'){
+        ruleType = 'gl'
+      }
+      let params = {
+        pageNum: 1,
+        pageSize: 20,
+        projectId: '1111',
+        ruleTypeId: '',
+        ruleName: '',
+        ruleType: ruleType
+      }
+      this.checkCaseOptions = []
+      pageCheckRule(params).then(response => {
+        if (response.success) {
+          const { data } = response
+          this.checkCaseOptions = data.data
+        }
+      })
+    },
     /** 提交按钮 */
     submitForm: function () {
       this.$refs['form'].validate(valid => {

src/views/quality/checkjob/CheckJobList.vue

@@ -1,6 +1,11 @@
 <template>
   <el-card class="box-card" shadow="always">
     <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="项目" prop="projectId">
+        <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
+          <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+        </el-select>
+      </el-form-item>
       <el-form-item label="任务名称" prop="sourceName">
         <el-input
           v-model="queryParams.sourceName"
@@ -32,7 +37,7 @@
           <el-tooltip content="密度" effect="dark" placement="top">
             <el-dropdown trigger="click" @command="handleCommand">
               <el-button circle size="mini">
-                <svg-icon class-name="size-icon" icon-class="colum-height" />
+                <i class="el-icon-s-grid"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item command="medium">正常</el-dropdown-item>
@@ -43,7 +48,7 @@
           </el-tooltip>
           <el-tooltip content="刷新" effect="dark" placement="top">
             <el-button circle size="mini" @click="handleRefresh">
-              <svg-icon class-name="size-icon" icon-class="shuaxin" />
+              <i class="el-icon-refresh"></i>
             </el-button>
           </el-tooltip>
           <el-tooltip content="列设置" effect="dark" placement="top">
@@ -57,7 +62,7 @@
               </el-checkbox-group>
               <span slot="reference">
                 <el-button circle size="mini">
-                  <svg-icon class-name="size-icon" icon-class="shezhi" />
+                  <i class="el-icon-setting"></i>
                 </el-button>
               </span>
             </el-popover>
@@ -71,6 +76,7 @@
       :data="tableDataList"
       border
       tooltip-effect="dark"
+      :size="tableSize"
       :height="tableHeight"
       style="width: 100%;margin: 15px 0;"
     >
@@ -91,8 +97,20 @@
           show-overflow-tooltip
         />
       </template>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="400px">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleDetail(scope.row)"
+          >详情</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit-outline"
+            @click="handleEdit(scope.row)"
+          >修改</el-button>
           <el-button
             v-if="scope.row.status === '1'"
             size="mini"
@@ -104,28 +122,21 @@
             v-if="scope.row.status === '0'"
             size="mini"
             type="text"
-            icon="el-icon-view"
+            icon="el-icon-refresh-left"
             @click="handleResume(scope.row)"
           >任务恢复</el-button>
-          <el-button
+          <!--<el-button
             size="mini"
             type="text"
-            icon="el-icon-view"
+            icon="el-icon-s-promotion"
             @click="handleRun(scope.row)"
-          >立即执行</el-button>
+          >立即执行</el-button>-->
           <el-button
-            v-hasPerm="['quality:rule:edit']"
             size="mini"
             type="text"
-            icon="el-icon-edit-outline"
+            icon="el-icon-delete"
-            @click="handleEdit(scope.row)"
+            @click="handleDelete(scope.row)"
-          >修改</el-button>
+          >删除</el-button>
-<!--          <el-button-->
-<!--            size="mini"-->
-<!--            type="text"-->
-<!--            icon="el-icon-view"-->
-<!--            @click="handleRun(scope.row)"-->
-<!--          >查看</el-button>-->
         </template>
       </el-table-column>
     </el-table>
@@ -168,13 +179,24 @@ export default {
         // { prop: 'methodParams', label: '方法参数', show: true },
         { prop: 'cronExpression', label: 'cron表达式', show: true },
         { prop: 'afterDate', label: '最近完成时间', show: true },
+        {
+          prop: 'schedule',
+          label: '任务进度',
+          show: true,
+          formatter: this.scheduleFormatter
+        },
         {
           prop: 'status',
-          label: '状态',
+          label: '定时状态',
           show: true,
           formatter: this.statusFormatter
-        }
+        },
+        { prop: 'remark', label: '任务概述', show: true }
       ],
+      projectsOptions: [
+        { id: '1111', projectName: '演示项目' }
+      ],
+      tableSize: 'medium',
       // 默认选择中表格头
       checkedTableColumns: [],
       // 状态数据字典
@@ -187,6 +209,7 @@ export default {
       queryParams: {
         pageNum: 1,
         pageSize: 20,
+        projectId: '1111',
         sourceName: ''
       }
     }
@@ -293,6 +316,9 @@ export default {
         return <el-tag type='warning'>{dictLabel}</el-tag>
       }
     },
+    scheduleFormatter(row, column, cellValue, index){
+      return '100%'
+    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1

src/views/quality/checkjob/index.vue

@@ -9,6 +9,9 @@
     <transition name="el-zoom-in-top">
       <check-job-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
     </transition>
+    <transition name="el-zoom-in-top">
+      <check-job-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
+    </transition>
   </div>
 </template>
 
@@ -16,10 +19,11 @@
 import CheckJobList from './CheckJobList'
 import CheckJobAdd from './CheckJobAdd'
 import CheckJobEdit from './CheckJobEdit'
+import CheckJobDetail from './CheckJobDetail'
 
 export default {
   name: 'CheckJob',
-  components: { CheckJobList, CheckJobAdd, CheckJobEdit },
+  components: { CheckJobList, CheckJobAdd, CheckJobEdit, CheckJobDetail },
   data() {
     return {
       options: {

src/views/quality/checklog/CheckLogList.vue

@@ -1,8 +1,8 @@
 <template>
   <el-card class="box-card" shadow="always">
     <el-form ref="queryForm" :model="queryParams" :inline="true">
-      <el-form-item label="规则类型" prop="ruleTypeId">
+      <el-form-item label="用例类型" prop="ruleTypeId">
-        <el-select v-model="queryParams.ruleTypeId" clearable placeholder="请选择规则类型">
+        <el-select v-model="queryParams.ruleTypeId" clearable placeholder="请选择用例类型">
           <el-option
             v-for="item in ruleTypeOptions"
             :key="item.id"
@@ -75,8 +75,8 @@ export default {
       // 表格头
       tableColumns: [
         { prop: 'executeJobName', label: '任务名称', show: true },
-        { prop: 'executeRuleTypeName', label: '规则类型', show: true },
+        { prop: 'executeRuleTypeName', label: '用例类型', show: true },
-        { prop: 'executeRuleName', label: '规则名称', show: true },
+        { prop: 'executeRuleName', label: '用例名称', show: true },
         { prop: 'executeBatch', label: '执行批次', show: true },
         {
           prop: 'status',

src/views/quality/checkrelevancerule/CheckRelevanceRuleAdd.vue

@@ -0,0 +1,529 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button v-if="active == 2" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button v-if="active == 1" size="mini" type="primary" @click="handleNextStep">下一步</el-button>
+        <el-button v-if="active == 2" size="mini" type="primary" @click="handleLastStep">上一步</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper" style="padding-left: 20%">
+      <el-steps :active="active" finish-status="success" align-center style="width: 900px">
+        <el-step title="填写检测用例信息" />
+        <el-step title="选择检测数据源" />
+      </el-steps>
+      <!--<el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="用例名称" prop="ruleName">
+          <el-input v-model="form.ruleName" placeholder="请输入用例名称" />
+        </el-form-item>
+        <el-form-item label="检测类型" prop="ruleItemId">
+          <el-select v-model="form.ruleItemId" placeholder="请选择检测类型" @change="ruleItemSelectChanged">
+            <el-option
+              v-for="item in ruleItemOptions"
+              :key="item.id"
+              :label="item.itemExplain"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="用例级别" prop="ruleLevelId">
+          <el-select v-model="form.ruleLevelId" placeholder="请选择用例级别">
+            <el-option
+              v-for="item in ruleLevelOptions"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据源" prop="ruleSourceId">
+          <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" @change="sourceSelectChanged">
+            <el-option
+              v-for="source in sourceOptions"
+              :key="source.id"
+              :label="source.sourceName"
+              :value="source.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据表" prop="ruleTableId">
+          <el-select v-model="form.ruleTableId" placeholder="请选择数据表" @change="tableSelectChanged">
+            <el-option
+              v-for="table in tableOptions"
+              :key="table.id"
+              :label="table.tableName"
+              :value="table.id"
+            >
+              <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="检测字段" prop="ruleColumnId">
+          <el-select v-model="form.ruleColumnId" placeholder="请选择检测字段" @change="columnSelectChanged">
+            <el-option
+              v-for="column in columnOptions"
+              :key="column.id"
+              :label="column.columnName"
+              :value="column.id"
+            >
+              <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-divider content-position="left">检测配置</el-divider>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'timeliness_key'">
+          <el-col :span="24">
+            <el-form-item label="判定阀值">
+              <el-input-number v-model="form.ruleConfig.timeliness.threshold" :controls="false" :min="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'consistent_key'">
+          <el-col :span="12">
+            <el-form-item label="标准字典类别">
+              <el-select v-model="form.ruleConfig.consistent.gbTypeId" placeholder="请选择" @change="dictTypeSelectChanged">
+                <el-option
+                  v-for="item in dictTypeOptions"
+                  :key="item.id"
+                  :label="item.gbTypeName"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="标准字典字段">
+              <el-select v-model="form.ruleConfig.consistent.bindGbColumn" placeholder="请选择">
+                <el-option
+                  v-for="item in gbColumnOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'relevance_key'">
+          <el-col :span="12">
+            <el-form-item label="关联表">
+              <el-select v-model="form.ruleConfig.relevance.relatedTableId" placeholder="请选择" @change="relatedTableSelectChanged">
+                <el-option
+                  v-for="table in tableOptions"
+                  :key="table.id"
+                  :label="table.tableName"
+                  :value="table.id"
+                >
+                  <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="关联字段">
+              <el-select v-model="form.ruleConfig.relevance.relatedColumnId" placeholder="请选择" @change="relatedColumnSelectChanged">
+                <el-option
+                  v-for="column in relatedColumnOptions"
+                  :key="column.id"
+                  :label="column.columnName"
+                  :value="column.id"
+                >
+                  <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'accuracy_key_length'">
+          <el-col :span="24">
+            <el-form-item label="最大长度">
+              <el-input-number v-model="form.ruleConfig.accuracy.maxLength" :controls="false" :min="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        &lt;!&ndash;        正则表达式规则&ndash;&gt;
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+          <el-col :span="24">
+            <el-form-item label="正则表达">
+              <el-input v-model="form.ruleConfig.regular.regular" placeholder="请输入正则规则" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+          <el-form-item label="常用正则">
+            <el-radio-group v-model="form.zzStatus" @change="handleZzStatusRadioChange">
+              <el-radio label="1">手机号码</el-radio>
+              <el-radio label="2">邮箱</el-radio>
+              <el-radio label="3">整数</el-radio>
+              <el-radio label="4">负数</el-radio>
+              <el-radio label="5">身份证</el-radio>
+              <el-radio label="6">日期格式yyyy-mm-dd</el-radio>
+              <el-radio label="7">IP</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.id"
+              :label="dict.itemText"
+            >{{ dict.itemValue }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>-->
+
+      <el-form v-if="active == 1" ref="form" :model="form" :rules="rules" label-width="120px" style="width: 800px">
+        <div style="padding: 20px 100px">
+          <el-form-item label="用例名称" prop="ruleName">
+            <el-input v-model="form.ruleName" placeholder="请输入用例名称" />
+          </el-form-item>
+          <el-form-item label="检测类型" prop="ruleItemId">
+            <el-select v-model="form.ruleItemId" placeholder="请选择检测类型" style="width: 100%" @change="ruleItemSelectChanged">
+              <el-option
+                v-for="item in ruleItemOptions"
+                :key="item.id"
+                :label="item.itemExplain"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+<!--          <el-form-item label="用例级别" prop="ruleLevelId">-->
+<!--            <el-select v-model="form.ruleLevelId" placeholder="请选择用例级别" style="width: 100%">-->
+<!--              <el-option-->
+<!--                v-for="item in ruleLevelOptions"-->
+<!--                :key="item.id"-->
+<!--                :label="item.name"-->
+<!--                :value="item.id"-->
+<!--              />-->
+<!--            </el-select>-->
+<!--          </el-form-item>-->
+        </div>
+      </el-form>
+      <el-form v-if="active == 2" ref="form" :model="form" :rules="rules" label-width="80px" style="width: 800px">
+        <div style="padding: 20px 100px">
+          <el-form-item label="数据源" prop="ruleSourceId">
+            <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" style="width: 100%" @change="sourceSelectChanged">
+              <el-option
+                v-for="source in sourceOptions"
+                :key="source.id"
+                :label="source.sourceName"
+                :value="source.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-radio-group v-model="form.status">
+              <el-radio
+                v-for="dict in statusOptions"
+                :key="dict.id"
+                :label="dict.itemText"
+              >{{ dict.itemValue }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { listRuleLevel, listRuleItem, addCheckRule } from '@/api/quality/checkrule'
+import { listDataSource } from '@/api/metadata/datasource'
+import { listDataTable } from '@/api/metadata/datatable'
+import { listDataColumn } from '@/api/metadata/datacolumn'
+import { listDataDictType } from '@/api/standard/datadict'
+
+export default {
+  name: 'CheckRelevanceRuleAdd',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '检测用例新增',
+      active: 1,
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {
+        ruleName: undefined,
+        ruleTypeId: undefined,
+        ruleItemId: undefined,
+        ruleLevelId: undefined,
+        ruleDbType: undefined,
+        ruleSourceId: undefined,
+        ruleSource: undefined,
+        ruleTableId: undefined,
+        ruleTable: undefined,
+        ruleTableComment: undefined,
+        ruleColumnId: undefined,
+        ruleColumn: undefined,
+        ruleColumnComment: undefined,
+        ruleConfig: {
+          ruleItemCode: undefined,
+          consistent: {
+            gbTypeId: undefined,
+            bindGbColumn: undefined
+          },
+          relevance: {
+            relatedTableId: undefined,
+            relatedTable: undefined,
+            relatedTableComment: undefined,
+            relatedColumnId: undefined,
+            relatedColumn: undefined,
+            relatedColumnComment: undefined
+          },
+          timeliness: {
+            threshold: undefined
+          },
+          accuracy: {
+            maxLength: undefined
+          },
+          regular: {
+            regular: undefined
+          }
+        },
+        status: '1',
+        zzStatus: '0' // 状态正则
+      },
+      // 表单校验
+      rules: {
+        ruleName: [
+          { required: true, message: '规则名称不能为空', trigger: 'blur' }
+        ],
+        ruleItemId: [
+          { required: true, message: '核查类型不能为空', trigger: 'change' }
+        ],
+        ruleSourceId: [
+          { required: true, message: '数据源不能为空', trigger: 'change' }
+        ],
+        ruleTableId: [
+          { required: true, message: '数据表不能为空', trigger: 'change' }
+        ],
+        ruleColumnId: [
+          { required: true, message: '核查字段不能为空', trigger: 'change' }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 规则级别数据字典
+      ruleLevelOptions: [],
+      // 核查类型数据字典
+      ruleItemOptions: [],
+      sourceOptions: [],
+      tableOptions: [],
+      columnOptions: [],
+      dictTypeOptions: [],
+      gbColumnOptions: [
+        { value: 'gb_code', label: '标准编码' },
+        { value: 'gb_name', label: '标准名称' }
+      ],
+      relatedColumnOptions: []
+    }
+  },
+  created() {
+    console.log('data:' + this.data)
+    this.form.ruleTypeId = this.data.ruleTypeId
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    listDataDictType().then(response => {
+      if (response.success) {
+        this.dictTypeOptions = response.data
+      }
+    })
+    this.getRuleLevelList()
+    this.getRuleItemList()
+    this.getDataSourceList()
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 步骤条下一步 */
+    handleNextStep() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.active++
+        }
+      })
+    },
+    /** 步骤条上一步 */
+    handleLastStep() {
+      this.active--
+    },
+    getRuleLevelList() {
+      listRuleLevel().then(response => {
+        if (response.success) {
+          this.ruleLevelOptions = response.data
+        }
+      })
+    },
+    getRuleItemList() {
+      listRuleItem({ ruleTypeId: this.data.ruleTypeId }).then(response => {
+        if (response.success) {
+          this.ruleItemOptions = response.data
+        }
+      })
+    },
+    getDataSourceList() {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    },
+    ruleItemSelectChanged(val) {
+      const item = this.ruleItemOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleConfig.ruleItemCode = item.itemCode
+    },
+    sourceSelectChanged(val) {
+      listDataTable({ sourceId: val }).then(response => {
+        if (response.success) {
+          this.tableOptions = response.data
+          this.columnOptions = []
+          const source = this.sourceOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.ruleSource = source.sourceName
+          this.form.ruleDbType = source.dbType
+          this.form.ruleTableId = ''
+          this.form.ruleTable = ''
+          this.form.ruleTableComment = ''
+          this.form.ruleColumnId = ''
+          this.form.ruleColumn = ''
+          this.form.ruleColumnComment = ''
+        }
+      })
+    },
+    tableSelectChanged(val) {
+      listDataColumn({ sourceId: this.form.ruleSourceId, tableId: val }).then(response => {
+        if (response.success) {
+          this.columnOptions = response.data
+          const table = this.tableOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.ruleTable = table.tableName
+          this.form.ruleTableComment = table.tableComment
+          this.form.ruleColumnId = ''
+          this.form.ruleColumn = ''
+          this.form.ruleColumnComment = ''
+        }
+      })
+    },
+    columnSelectChanged(val) {
+      const column = this.columnOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleColumn = column.columnName
+      this.form.ruleColumnComment = column.columnComment
+      this.$forceUpdate()
+    },
+    dictTypeSelectChanged(val) {
+      const item = this.dictTypeOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleConfig.consistent.gbTypeCode = item.gbTypeCode
+      this.form.ruleConfig.consistent.gbTypeName = item.gbTypeName
+    },
+    relatedTableSelectChanged(val) {
+      listDataColumn({ sourceId: this.form.ruleSourceId, tableId: val }).then(response => {
+        if (response.success) {
+          this.relatedColumnOptions = response.data
+          const table = this.tableOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.ruleConfig.relevance.relatedTable = table.tableName
+          this.form.ruleConfig.relevance.relatedTableComment = table.tableComment
+          this.form.ruleConfig.relevance.relatedColumnId = ''
+          this.form.ruleConfig.relevance.relatedColumn = ''
+          this.form.ruleConfig.relevance.relatedColumnComment = ''
+        }
+      })
+    },
+    relatedColumnSelectChanged(val) {
+      const column = this.relatedColumnOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleConfig.relevance.relatedColumn = column.columnName
+      this.form.ruleConfig.relevance.relatedColumnComment = column.columnComment
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          this.form.ruleTableId = 'all'
+          this.form.ruleTable = '全表'
+          addCheckRule(this.form).then(response => {
+            if (response.success) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(() => {
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    },
+    handleZzStatusRadioChange(value) {
+      // 在这里执行其他需要的操作
+      if (value === '1') {
+        this.form.ruleConfig.regular.regular = '^[1-9][0-9]{10}$'
+      } else if (value === '2') {
+        this.form.ruleConfig.regular.regular = '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+</style>

src/views/quality/checkrelevancerule/CheckRelevanceRuleDetail.vue

@@ -0,0 +1,285 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" label-width="80px" disabled>
+        <el-form-item label="规则名称">
+          <el-input v-model="form.ruleName" />
+        </el-form-item>
+        <el-form-item label="核查类型">
+          <el-select v-model="form.ruleItemId">
+            <el-option
+              v-for="item in ruleItemOptions"
+              :key="item.id"
+              :label="item.itemExplain"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="规则级别">-->
+<!--          <el-select v-model="form.ruleLevelId">-->
+<!--            <el-option-->
+<!--              v-for="item in ruleLevelOptions"-->
+<!--              :key="item.id"-->
+<!--              :label="item.name"-->
+<!--              :value="item.id"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+        <el-form-item label="数据源">
+          <el-select v-model="form.ruleSourceId">
+            <el-option
+              v-for="source in sourceOptions"
+              :key="source.id"
+              :label="source.sourceName"
+              :value="source.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据表">
+          <el-select v-model="form.ruleTableId">
+            <el-option
+              v-for="table in tableOptions"
+              :key="table.id"
+              :label="table.tableName"
+              :value="table.id"
+            >
+              <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="核查字段">
+          <el-select v-model="form.ruleColumnId">
+            <el-option
+              v-for="column in columnOptions"
+              :key="column.id"
+              :label="column.columnName"
+              :value="column.id"
+            >
+              <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-divider content-position="left">核查配置</el-divider>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'timeliness_key'">
+          <el-col :span="24">
+            <el-form-item label="判定阀值">
+              <el-input-number v-model="form.ruleConfig.timeliness.threshold" :controls="false" :min="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'consistent_key'">
+          <el-col :span="12">
+            <el-form-item label="标准字典类别">
+              <el-select v-model="form.ruleConfig.consistent.gbTypeId" placeholder="请选择">
+                <el-option
+                  v-for="item in dictTypeOptions"
+                  :key="item.id"
+                  :label="item.gbTypeName"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="标准字典字段">
+              <el-select v-model="form.ruleConfig.consistent.bindGbColumn" placeholder="请选择">
+                <el-option
+                  v-for="item in gbColumnOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'relevance_key'">
+          <el-col :span="12">
+            <el-form-item label="关联表">
+              <el-select v-model="form.ruleConfig.relevance.relatedTableId" placeholder="请选择">
+                <el-option
+                  v-for="table in tableOptions"
+                  :key="table.id"
+                  :label="table.tableName"
+                  :value="table.id"
+                >
+                  <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="关联字段">
+              <el-select v-model="form.ruleConfig.relevance.relatedColumnId" placeholder="请选择">
+                <el-option
+                  v-for="column in relatedColumnOptions"
+                  :key="column.id"
+                  :label="column.columnName"
+                  :value="column.id"
+                >
+                  <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'accuracy_key_length'">
+          <el-col :span="24">
+            <el-form-item label="最大长度">
+              <el-input-number v-model="form.ruleConfig.accuracy.maxLength" :controls="false" :min="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+          <el-col :span="24">
+            <el-form-item label="正则表达">
+              <el-input v-model="form.ruleConfig.regular.regular" placeholder="请输入正则规则" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item label="状态">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.id"
+              :label="dict.itemText"
+            >{{ dict.itemValue }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" type="textarea" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { listRuleLevel, listRuleItem, getCheckRule } from '@/api/quality/checkrule'
+import { listDataSource } from '@/api/metadata/datasource'
+import { listDataTable } from '@/api/metadata/datatable'
+import { listDataColumn } from '@/api/metadata/datacolumn'
+import { listDataDictType } from '@/api/standard/datadict'
+
+export default {
+  name: 'CheckRelevanceRuleDetail',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '核查规则详情',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 表单参数
+      form: {},
+      // 状态数据字典
+      statusOptions: [],
+      // 规则级别数据字典
+      ruleLevelOptions: [],
+      // 核查类型数据字典
+      ruleItemOptions: [],
+      sourceOptions: [],
+      tableOptions: [],
+      columnOptions: [],
+      dictTypeOptions: [],
+      gbColumnOptions: [
+        { value: 'gb_code', label: '标准编码' },
+        { value: 'gb_name', label: '标准名称' }
+      ],
+      relatedColumnOptions: []
+    }
+  },
+  created() {
+    console.log('id:' + this.data.id)
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    listDataDictType().then(response => {
+      if (response.success) {
+        this.dictTypeOptions = response.data
+      }
+    })
+    this.getRuleLevelList()
+    this.getDataSourceList()
+  },
+  mounted() {
+    this.getCheckRule(this.data.id)
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    async getCheckRule(id) {
+      this.form = await getCheckRule(id).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      })
+      this.ruleItemOptions = await listRuleItem({ ruleTypeId: this.form.ruleTypeId }).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      })
+      this.tableOptions = await listDataTable({ sourceId: this.form.ruleSourceId }).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      }) || []
+      this.columnOptions = await listDataColumn({ sourceId: this.form.ruleSourceId, tableId: this.form.ruleTableId }).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      }) || []
+      if (this.form.ruleConfig.ruleItemCode === 'relevance_key') {
+        listDataColumn({ sourceId: this.form.ruleSourceId, tableId: this.form.ruleConfig.relevance.relatedTableId }).then(response => {
+          if (response.success) {
+            this.relatedColumnOptions = response.data
+          }
+        })
+      }
+    },
+    getRuleLevelList() {
+      listRuleLevel().then(response => {
+        if (response.success) {
+          this.ruleLevelOptions = response.data
+        }
+      })
+    },
+    getDataSourceList() {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+</style>

src/views/quality/checkrelevancerule/CheckRelevanceRuleEdit.vue

@@ -0,0 +1,436 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <div slot="header" class="clearfix">
+      <span>{{ title }}</span>
+      <el-button-group style="float: right;">
+        <el-button v-hasPerm="['quality:rule:edit']" type="primary" size="mini" icon="el-icon-finished" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled" @click="submitForm">{{ loadingOptions.loadingText }}</el-button>
+        <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+      </el-button-group>
+    </div>
+    <div class="body-wrapper">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="规则名称" prop="ruleName">
+          <el-input v-model="form.ruleName" placeholder="请输入规则名称" />
+        </el-form-item>
+        <el-form-item label="核查类型" prop="ruleItemId">
+          <el-select v-model="form.ruleItemId" placeholder="请选择核查类型" @change="ruleItemSelectChanged">
+            <el-option
+              v-for="item in ruleItemOptions"
+              :key="item.id"
+              :label="item.itemExplain"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+<!--        <el-form-item label="规则级别" prop="ruleLevelId">-->
+<!--          <el-select v-model="form.ruleLevelId" placeholder="请选择规则级别">-->
+<!--            <el-option-->
+<!--              v-for="item in ruleLevelOptions"-->
+<!--              :key="item.id"-->
+<!--              :label="item.name"-->
+<!--              :value="item.id"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+        <el-form-item label="数据源" prop="ruleSourceId">
+          <el-select v-model="form.ruleSourceId" placeholder="请选择数据源" @change="sourceSelectChanged">
+            <el-option
+              v-for="source in sourceOptions"
+              :key="source.id"
+              :label="source.sourceName"
+              :value="source.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据表" prop="ruleTableId">
+          <el-select v-model="form.ruleTableId" placeholder="请选择数据表" @change="tableSelectChanged">
+            <el-option
+              v-for="table in tableOptions"
+              :key="table.id"
+              :label="table.tableName"
+              :value="table.id"
+            >
+              <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="核查字段" prop="ruleColumnId">
+          <el-select v-model="form.ruleColumnId" placeholder="请选择核查字段" @change="columnSelectChanged">
+            <el-option
+              v-for="column in columnOptions"
+              :key="column.id"
+              :label="column.columnName"
+              :value="column.id"
+            >
+              <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-divider content-position="left">核查配置</el-divider>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'timeliness_key'">
+          <el-col :span="24">
+            <el-form-item label="判定阀值">
+              <el-input-number v-model="form.ruleConfig.timeliness.threshold" :controls="false" :min="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'consistent_key'">
+          <el-col :span="12">
+            <el-form-item label="标准字典类别">
+              <el-select v-model="form.ruleConfig.consistent.gbTypeId" placeholder="请选择" @change="dictTypeSelectChanged">
+                <el-option
+                  v-for="item in dictTypeOptions"
+                  :key="item.id"
+                  :label="item.gbTypeName"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="标准字典字段">
+              <el-select v-model="form.ruleConfig.consistent.bindGbColumn" placeholder="请选择">
+                <el-option
+                  v-for="item in gbColumnOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'relevance_key'">
+          <el-col :span="12">
+            <el-form-item label="关联表">
+              <el-select v-model="form.ruleConfig.relevance.relatedTableId" placeholder="请选择" @change="relatedTableSelectChanged">
+                <el-option
+                  v-for="table in tableOptions"
+                  :key="table.id"
+                  :label="table.tableName"
+                  :value="table.id"
+                >
+                  <span style="float: left">{{ table.tableName + '(' + table.tableComment + ')' }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="关联字段">
+              <el-select v-model="form.ruleConfig.relevance.relatedColumnId" placeholder="请选择" @change="relatedColumnSelectChanged">
+                <el-option
+                  v-for="column in relatedColumnOptions"
+                  :key="column.id"
+                  :label="column.columnName"
+                  :value="column.id"
+                >
+                  <span style="float: left">{{ column.columnName + '(' + column.columnComment + ')' }}</span>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'accuracy_key_length'">
+          <el-col :span="24">
+            <el-form-item label="最大长度">
+              <el-input-number v-model="form.ruleConfig.accuracy.maxLength" :controls="false" :min="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+          <el-col :span="24">
+            <el-form-item label="正则表达">
+              <el-input v-model="form.ruleConfig.regular.regular" placeholder="请输入正则规则" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row v-if="form.ruleConfig.ruleItemCode === 'regular_key'">
+          <el-form-item label="常用正则">
+            <el-radio-group v-model="form.zzStatus" @change="handleZzStatusRadioChange">
+              <el-radio label="1">手机号码</el-radio>
+              <el-radio label="2">邮箱</el-radio>
+              <el-radio label="3">整数</el-radio>
+              <el-radio label="4">负数</el-radio>
+              <el-radio label="5">身份证</el-radio>
+              <el-radio label="6">日期格式yyyy-mm-dd</el-radio>
+              <el-radio label="7">IP</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-row>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio
+              v-for="dict in statusOptions"
+              :key="dict.id"
+              :label="dict.itemText"
+            >{{ dict.itemValue }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { listRuleLevel, listRuleItem, getCheckRule, updateCheckRule } from '@/api/quality/checkrule'
+import { listDataSource } from '@/api/metadata/datasource'
+import { listDataTable } from '@/api/metadata/datatable'
+import { listDataColumn } from '@/api/metadata/datacolumn'
+import { listDataDictType } from '@/api/standard/datadict'
+
+export default {
+  name: 'CheckRelevanceRuleEdit',
+  props: {
+    data: {
+      type: Object,
+      default: function() {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      title: '核查规则编辑',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 保存按钮
+      loadingOptions: {
+        loading: false,
+        loadingText: '保存',
+        isDisabled: false
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        ruleName: [
+          { required: true, message: '规则名称不能为空', trigger: 'blur' }
+        ],
+        ruleItemId: [
+          { required: true, message: '核查类型不能为空', trigger: 'change' }
+        ],
+        ruleSourceId: [
+          { required: true, message: '数据源不能为空', trigger: 'change' }
+        ],
+        ruleTableId: [
+          { required: true, message: '数据表不能为空', trigger: 'change' }
+        ],
+        ruleColumnId: [
+          { required: true, message: '核查字段不能为空', trigger: 'change' }
+        ]
+      },
+      // 状态数据字典
+      statusOptions: [],
+      // 规则级别数据字典
+      ruleLevelOptions: [],
+      // 核查类型数据字典
+      ruleItemOptions: [],
+      sourceOptions: [],
+      tableOptions: [],
+      columnOptions: [],
+      dictTypeOptions: [],
+      gbColumnOptions: [
+        { value: 'gb_code', label: '标准编码' },
+        { value: 'gb_name', label: '标准名称' }
+      ],
+      relatedColumnOptions: []
+    }
+  },
+  created() {
+    console.log('id:' + this.data.id)
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    listDataDictType().then(response => {
+      if (response.success) {
+        this.dictTypeOptions = response.data
+      }
+    })
+    this.getRuleLevelList()
+    this.getDataSourceList()
+  },
+  mounted() {
+    this.getCheckRule(this.data.id)
+  },
+  methods: {
+    showCard() {
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 获取详情 */
+    async getCheckRule(id) {
+      this.form = await getCheckRule(id).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      })
+      this.ruleItemOptions = await listRuleItem({ ruleTypeId: this.form.ruleTypeId }).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      })
+      this.tableOptions = await listDataTable({ sourceId: this.form.ruleSourceId }).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      })
+      this.columnOptions = await listDataColumn({ sourceId: this.form.ruleSourceId, tableId: this.form.ruleTableId }).then(response => {
+        if (response.success) {
+          return response.data
+        }
+      })
+      if (this.form.ruleConfig.ruleItemCode === 'relevance_key') {
+        listDataColumn({ sourceId: this.form.ruleSourceId, tableId: this.form.ruleConfig.relevance.relatedTableId }).then(response => {
+          if (response.success) {
+            this.relatedColumnOptions = response.data
+          }
+        })
+      }
+    },
+    getRuleLevelList() {
+      listRuleLevel().then(response => {
+        if (response.success) {
+          this.ruleLevelOptions = response.data
+        }
+      })
+    },
+    getDataSourceList() {
+      listDataSource().then(response => {
+        if (response.success) {
+          this.sourceOptions = response.data
+        }
+      })
+    },
+    ruleItemSelectChanged(val) {
+      const item = this.ruleItemOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleConfig.ruleItemCode = item.itemCode
+    },
+    sourceSelectChanged(val) {
+      listDataTable({ sourceId: val }).then(response => {
+        if (response.success) {
+          this.tableOptions = response.data
+          this.columnOptions = []
+          const source = this.sourceOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.ruleSource = source.sourceName
+          this.form.ruleDbType = source.dbType
+          this.form.ruleTableId = ''
+          this.form.ruleTable = ''
+          this.form.ruleTableComment = ''
+          this.form.ruleColumnId = ''
+          this.form.ruleColumn = ''
+          this.form.ruleColumnComment = ''
+        }
+      })
+    },
+    tableSelectChanged(val) {
+      listDataColumn({ sourceId: this.form.ruleSourceId, tableId: val }).then(response => {
+        if (response.success) {
+          this.columnOptions = response.data
+          const table = this.tableOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.ruleTable = table.tableName
+          this.form.ruleTableComment = table.tableComment
+          this.form.ruleColumnId = ''
+          this.form.ruleColumn = ''
+          this.form.ruleColumnComment = ''
+        }
+      })
+    },
+    columnSelectChanged(val) {
+      const column = this.columnOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleColumn = column.columnName
+      this.form.ruleColumnComment = column.columnComment
+      this.$forceUpdate()
+    },
+    dictTypeSelectChanged(val) {
+      const item = this.dictTypeOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleConfig.consistent.gbTypeCode = item.gbTypeCode
+      this.form.ruleConfig.consistent.gbTypeName = item.gbTypeName
+    },
+    relatedTableSelectChanged(val) {
+      listDataColumn({ sourceId: this.form.ruleSourceId, tableId: val }).then(response => {
+        if (response.success) {
+          this.relatedColumnOptions = response.data
+          const table = this.tableOptions.find(function(item) {
+            return item.id === val
+          })
+          this.form.ruleConfig.relevance.relatedTable = table.tableName
+          this.form.ruleConfig.relevance.relatedTableComment = table.tableComment
+          this.form.ruleConfig.relevance.relatedColumnId = ''
+          this.form.ruleConfig.relevance.relatedColumn = ''
+          this.form.ruleConfig.relevance.relatedColumnComment = ''
+        }
+      })
+    },
+    relatedColumnSelectChanged(val) {
+      const column = this.relatedColumnOptions.find(function(item) {
+        return item.id === val
+      })
+      this.form.ruleConfig.relevance.relatedColumn = column.columnName
+      this.form.ruleConfig.relevance.relatedColumnComment = column.columnComment
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.loadingOptions.loading = true
+          this.loadingOptions.loadingText = '保存中...'
+          this.loadingOptions.isDisabled = true
+          updateCheckRule(this.form).then(response => {
+            if (response.success) {
+              this.$message.success('保存成功')
+              setTimeout(() => {
+                // 2秒后跳转列表页
+                this.$emit('showCard', this.showOptions)
+              }, 2000)
+            } else {
+              this.$message.error('保存失败')
+              this.loadingOptions.loading = false
+              this.loadingOptions.loadingText = '保存'
+              this.loadingOptions.isDisabled = false
+            }
+          }).catch(() => {
+            this.loadingOptions.loading = false
+            this.loadingOptions.loadingText = '保存'
+            this.loadingOptions.isDisabled = false
+          })
+        }
+      })
+    },
+    handleZzStatusRadioChange(value) {
+      // 在这里执行其他需要的操作
+      if (value === '1') {
+        this.form.ruleConfig.regular.regular = '^[1-9][0-9]{10}$'
+      } else if (value === '2') {
+        this.form.ruleConfig.regular.regular = '^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+</style>

src/views/quality/checkrelevancerule/CheckRelevanceRuleList.vue

@@ -0,0 +1,434 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <el-card class="box-card tree-wrapper" shadow="always">
+        <div class="body-wrapper">
+          <el-tree
+            ref="ruleType"
+            :data="ruleTypeOptions"
+            node-key="id"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+            default-expand-all
+            highlight-current
+            :expand-on-click-node="false"
+            @node-click="handleNodeClick"
+          >
+            <template slot-scope="{ node }">
+              <span class="custom-tree-node">
+                <span><i v-if="node.level === 1" class="iconfont icon-zuzhi tree-folder" />{{ node.label }}</span>
+              </span>
+            </template>
+          </el-tree>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col :span="18">
+      <el-card class="box-card" shadow="always">
+        <el-form ref="queryForm" :model="queryParams" :inline="true">
+          <el-form-item label="项目" prop="projectId">
+            <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
+              <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="数据源" prop="ruleName">
+            <el-input
+              v-model="queryParams.ruleSource"
+              placeholder="请输入数据源"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="数据表" prop="ruleName">
+            <el-input
+              v-model="queryParams.ruleTable"
+              placeholder="请输入数据表"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+
+          <el-form-item label="用例名称" prop="ruleName">
+            <el-input
+              v-model="queryParams.ruleName"
+              placeholder="请输入用例名称"
+              clearable
+              size="small"
+              @keyup.enter.native="handleQuery"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <el-row type="flex" justify="space-between">
+          <el-col :span="12">
+            <el-button-group>
+              <el-button
+                type="primary"
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+              >新增</el-button>
+            </el-button-group>
+          </el-col>
+          <el-col :span="12">
+            <div class="right-toolbar">
+              <el-tooltip content="密度" effect="dark" placement="top">
+                <el-dropdown trigger="click" @command="handleCommand">
+                  <el-button circle size="mini">
+                    <svg-icon class-name="size-icon" icon-class="colum-height" />
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="medium">正常</el-dropdown-item>
+                    <el-dropdown-item command="small">中等</el-dropdown-item>
+                    <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </el-tooltip>
+              <el-tooltip content="刷新" effect="dark" placement="top">
+                <el-button circle size="mini" @click="handleRefresh">
+                  <svg-icon class-name="size-icon" icon-class="shuaxin" />
+                </el-button>
+              </el-tooltip>
+              <el-tooltip content="列设置" effect="dark" placement="top">
+                <el-popover placement="bottom" width="100" trigger="click">
+                  <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                    <el-checkbox
+                      v-for="(item, index) in tableColumns"
+                      :key="index"
+                      :label="item.prop"
+                    >{{ item.label }}</el-checkbox>
+                  </el-checkbox-group>
+                  <span slot="reference">
+                    <el-button circle size="mini">
+                      <svg-icon class-name="size-icon" icon-class="shezhi" />
+                    </el-button>
+                  </span>
+                </el-popover>
+              </el-tooltip>
+            </div>
+          </el-col>
+        </el-row>
+
+        <el-table
+          v-loading="loading"
+          :data="tableDataList"
+          border
+          tooltip-effect="dark"
+          :size="tableSize"
+          :height="tableHeight"
+          style="width: 100%;margin: 15px 0;"
+        >
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="序号" width="55" align="center">
+            <template slot-scope="scope">
+              <span>{{ scope.$index +1 }}</span>
+            </template>
+          </el-table-column>
+          <template v-for="(item, index) in tableColumns">
+            <el-table-column
+              v-if="item.show"
+              :key="index"
+              :prop="item.prop"
+              :label="item.label"
+              :formatter="item.formatter"
+              :width="item.width"
+              align="center"
+              show-overflow-tooltip
+            />
+          </template>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-edit-outline"
+                @click="handleEdit(scope.row)"
+              >修改</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-view"
+                @click="handleDetail(scope.row)"
+              >详情</el-button>
+              <el-button
+                size="mini"
+                type="text"
+                icon="el-icon-delete"
+                @click="handleDelete(scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <el-pagination
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :current-page.sync="queryParams.pageNum"
+          :page-size.sync="queryParams.pageSize"
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import { listRuleType, pageCheckRule, delCheckRule } from '@/api/quality/checkrule'
+
+export default {
+  name: 'CheckRelevanceRuleList',
+  data() {
+    return {
+      tableHeight: document.body.offsetHeight - 310 + 'px',
+      // 展示切换
+      showOptions: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      },
+      // 遮罩层
+      loading: true,
+      // 表格头
+      tableColumns: [
+        { prop: 'ruleSource', label: '数据源', show: true },
+       /* { prop: 'ruleTable', label: '数据表', show: true, formatter: this.ruleTableFormatter },
+        { prop: 'ruleColumn', label: '检测字段', show: true, formatter: this.ruleColumnFormatter },*/
+        { prop: 'ruleName', label: '用例名称', show: true },
+        { prop: 'ruleType', label: '用例类型', show: true },
+        // { prop: 'ruleLevel', label: '用例级别', width: 100, show: true },
+        {
+          prop: 'status',
+          label: '状态',
+          show: true,
+          width: 80,
+          formatter: this.statusFormatter
+        },
+        { prop: 'createTime', label: '创建时间', show: true }
+      ],
+      projectsOptions: [
+        { id: '1111', projectName: '演示项目' }
+      ],
+      // 默认选择中表格头
+      checkedTableColumns: [],
+      tableSize: 'medium',
+      // 状态数据字典
+      statusOptions: [],
+      // 表格数据
+      tableDataList: [],
+      // 总数据条数
+      total: 0,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 20,
+        projectId: '1111',
+        ruleTypeId: '',
+        ruleName: '',
+        ruleType: 'gl'
+      },
+      // 左侧树
+      ruleTypeOptions: [],
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  created() {
+    this.getDicts('sys_common_status').then(response => {
+      if (response.success) {
+        this.statusOptions = response.data
+      }
+    })
+    this.getTree()
+    this.getList()
+  },
+  mounted() {
+    this.initCols()
+  },
+  methods: {
+    getTree() {
+      listRuleType().then(response => {
+        if (response.success) {
+          const { data } = response
+          const tree = {}
+          tree.name = '用例类型'
+          const children = []
+          data.forEach(e => {
+            if (e.code === 'relevance') {
+              children.push(e)
+            }
+          })
+          tree.children = children
+          this.ruleTypeOptions = []
+          this.ruleTypeOptions.push(tree)
+        }
+      })
+    },
+    /** 节点单击事件 */
+    handleNodeClick(data) {
+      if (data.id) {
+        this.queryParams.ruleTypeId = data.id
+        this.getList()
+      }
+    },
+    /** 查询数据源列表 */
+    getList() {
+      this.loading = true
+      pageCheckRule(this.queryParams).then(response => {
+        this.loading = false
+        if (response.success) {
+          const { data } = response
+          this.tableDataList = data.data
+          this.total = data.total
+        }
+      })
+    },
+    initCols() {
+      this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+    },
+    handleCheckedColsChange(val) {
+      this.tableColumns.forEach(col => {
+        if (!this.checkedTableColumns.includes(col.prop)) {
+          col.show = false
+        } else {
+          col.show = true
+        }
+      })
+    },
+    handleCommand(command) {
+      this.tableSize = command
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 20,
+        ruleTypeId: '',
+        ruleName: '',
+        ruleType: 'gl'
+      }
+      this.handleQuery()
+    },
+    /** 刷新列表 */
+    handleRefresh() {
+      this.getList()
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.showOptions.data = {}
+      if (!this.queryParams.ruleTypeId) {
+        this.$message.warning('请先选择核查用例类型')
+        return
+      }
+      this.showOptions.data.ruleTypeId = this.queryParams.ruleTypeId
+      this.showOptions.showList = false
+      this.showOptions.showAdd = true
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 修改按钮操作 */
+    handleEdit(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = true
+      this.showOptions.showDetail = false
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 详情按钮操作 */
+    handleDetail(row) {
+      this.showOptions.data.id = row.id
+      this.showOptions.showList = false
+      this.showOptions.showAdd = false
+      this.showOptions.showEdit = false
+      this.showOptions.showDetail = true
+      this.$emit('showCard', this.showOptions)
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        delCheckRule(row.id).then(response => {
+          if (response.success) {
+            this.$message.success('删除成功')
+            this.getList()
+          }
+        })
+      }).catch(() => {
+      })
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`)
+      this.queryParams.pageNum = 1
+      this.queryParams.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`)
+      this.queryParams.pageNum = val
+      this.getList()
+    },
+    statusFormatter(row, column, cellValue, index) {
+      const dictLabel = this.selectDictLabel(this.statusOptions, cellValue)
+      if (cellValue === '1') {
+        return <el-tag type='success'>{dictLabel}</el-tag>
+      } else {
+        return <el-tag type='warning'>{dictLabel}</el-tag>
+      }
+    },
+    ruleTableFormatter(row, column, cellValue, index) {
+      return row.ruleTableComment ? row.ruleTable + '(' + row.ruleTableComment + ')' : row.ruleTable
+    },
+    ruleColumnFormatter(row, column, cellValue, index) {
+      return row.ruleColumnComment ? row.ruleColumn + '(' + row.ruleColumnComment + ')' : row.ruleColumn
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .right-toolbar {
+    float: right;
+  }
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 100px);
+  }
+  .tree-wrapper {
+    overflow-y: auto;
+    .body-wrapper {
+      margin: -10px;
+      ::v-deep .custom-tree-node {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-size: 14px;
+        .tree-folder {
+          margin-right: 5px;
+          color: #f6cf07;
+        }
+      }
+    }
+  }
+</style>

src/views/quality/checkrelevancerule/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container">
+    <transition name="el-zoom-in-center">
+      <check-rule-list v-if="options.showList" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <check-rule-add v-if="options.showAdd" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-top">
+      <check-rule-edit v-if="options.showEdit" :data="options.data" @showCard="showCard" />
+    </transition>
+    <transition name="el-zoom-in-bottom">
+      <check-rule-detail v-if="options.showDetail" :data="options.data" @showCard="showCard" />
+    </transition>
+  </div>
+</template>
+
+<script>
+import CheckRuleList from './CheckRelevanceRuleList'
+import CheckRuleAdd from './CheckRelevanceRuleAdd'
+import CheckRuleEdit from './CheckRelevanceRuleEdit'
+import CheckRuleDetail from './CheckRelevanceRuleDetail'
+
+export default {
+  name: 'CheckRelevanceRule',
+  components: { CheckRuleList, CheckRuleAdd, CheckRuleEdit, CheckRuleDetail },
+  data() {
+    return {
+      options: {
+        data: {},
+        showList: true,
+        showAdd: false,
+        showEdit: false,
+        showDetail: false
+      }
+    }
+  },
+  methods: {
+    showCard(data) {
+      Object.assign(this.options, data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/quality/checkreport/CheckReportList.vue

@@ -0,0 +1,281 @@
+<template>
+  <el-card class="box-card" shadow="always">
+    <el-form ref="queryForm" :model="queryParams" :inline="true">
+      <el-form-item label="项目" prop="projectId">
+        <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
+          <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间">
+        <el-date-picker
+          v-model="queryParams.checkDate"
+          type="date"
+          :clearable="false"
+          format="yyyy-MM-dd"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOption"
+          placeholder="选择日期"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row type="flex" justify="space-between">
+      <el-col :span="12">
+      </el-col>
+      <el-col :span="12">
+        <div class="right-toolbar">
+          <el-tooltip content="密度" effect="dark" placement="top">
+            <el-dropdown trigger="click" @command="handleCommand">
+              <el-button circle size="mini">
+                <i class="el-icon-s-grid"></i>
+              </el-button>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item command="medium">正常</el-dropdown-item>
+                <el-dropdown-item command="small">中等</el-dropdown-item>
+                <el-dropdown-item command="mini">紧凑</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-tooltip>
+          <el-tooltip content="刷新" effect="dark" placement="top">
+            <el-button circle size="mini" @click="handleRefresh">
+              <i class="el-icon-refresh"></i>
+            </el-button>
+          </el-tooltip>
+          <el-tooltip content="列设置" effect="dark" placement="top">
+            <el-popover placement="bottom" width="100" trigger="click">
+              <el-checkbox-group v-model="checkedTableColumns" @change="handleCheckedColsChange">
+                <el-checkbox
+                  v-for="(item, index) in tableColumns"
+                  :key="index"
+                  :label="item.prop"
+                >{{ item.label }}</el-checkbox>
+              </el-checkbox-group>
+              <span slot="reference">
+                <el-button circle size="mini">
+                  <i class="el-icon-setting"></i>
+                </el-button>
+              </span>
+            </el-popover>
+          </el-tooltip>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      :data="tableDataList"
+      border
+      tooltip-effect="dark"
+      :height="tableHeight"
+      :size="tableSize"
+      style="width: 100%;margin: 15px 0;"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" width="55" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.$index +1 }}</span>
+        </template>
+      </el-table-column>
+      <template v-for="(item, index) in tableColumns">
+        <el-table-column
+          v-if="item.show"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :formatter="item.formatter"
+          align="center"
+          show-overflow-tooltip
+        />
+      </template>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-view"
+            @click="handleReport(scope.row)"
+          >查看报告</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      style="margin-bottom: 50px"
+      :page-sizes="[10, 20, 50, 100]"
+      layout="total, sizes, prev, pager, next, jumper"
+      :current-page.sync="queryParams.pageNum"
+      :page-size.sync="queryParams.pageSize"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </el-card>
+</template>
+
+<script>
+  import { pageCheckReport } from '@/api/quality/checkreport'
+  import moment from 'moment'
+  export default {
+    name: 'CheckReportList',
+    data() {
+      return {
+        tableHeight: document.body.offsetHeight - 330 + 'px',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true
+        },
+        // 遮罩层
+        loading: true,
+        // 表格头
+        tableColumns: [
+          {
+            prop: 'checkReportType',
+            label: '报告类型',
+            show: true,
+            formatter: this.checkReportTypeFormatter
+          },
+          { prop: 'checkDate', label: '检测时间', show: true },
+          {
+            prop: 'checkResult',
+            label: '检测结果',
+            show: true,
+            formatter: this.checkResultFormatter
+          },
+          { prop: 'checkTotalCount', label: '检测数量', show: true },
+          { prop: 'checkErrorCount', label: '不合规数量', show: true },
+          { prop: 'checkTimeConsuming', label: '耗时(毫秒)', show: true }
+        ],
+        projectsOptions: [
+          { id: '1111', projectName: '演示项目' }
+        ],
+        // 默认选择中表格头
+        checkedTableColumns: [],
+        tableSize: 'medium',
+        // 状态数据字典
+        statusOptions: [],
+        // 数据集表格数据
+        tableDataList: [],
+        // 总数据条数
+        total: 0,
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 20,
+          projectId: '1111',
+          checkDate: moment(moment().add(0, 'days').startOf('day').valueOf()).format('YYYY-MM-DD')
+        },
+        pickerOption: {
+          disabledDate(date) {
+            return date.getTime() > Date.now()
+          }
+        }
+      }
+    },
+    created() {
+      this.getList()
+    },
+    methods: {
+      initCols() {
+        this.checkedTableColumns = this.tableColumns.map(col => col.prop)
+      },
+      handleCheckedColsChange(val) {
+        this.tableColumns.forEach(col => {
+          if (!this.checkedTableColumns.includes(col.prop)) {
+            col.show = false
+          } else {
+            col.show = true
+          }
+        })
+      },
+      handleCommand(command) {
+        this.tableSize = command
+      },
+      getList() {
+        this.loading = true
+        pageCheckReport(this.queryParams).then(response => {
+          this.loading = false
+          if (response.success) {
+            console.log('response',response)
+            const { data } = response
+            this.tableDataList = data.data
+            this.total = data.total
+          }
+        })
+      },
+      handleReport(row) {
+        this.showOptions.data = row
+        this.showOptions.showList = false
+        if (row.checkReportType === 'relevance') {
+          // 关联符合性
+          this.showOptions.showDetail_relevance = true
+        } else if (row.checkReportType === 'content') {
+          // 内容符合性
+          this.showOptions.showDetail_content = true
+        } else {
+          // 结构符合性
+          this.showOptions.showDetail = true
+        }
+        this.$emit('showCard', this.showOptions)
+      },
+      handleSizeChange(val) {
+        console.log(`每页 ${val} 条`)
+        this.queryParams.pageNum = 1
+        this.queryParams.pageSize = val
+        this.getList()
+      },
+      handleCurrentChange(val) {
+        console.log(`当前页: ${val}`)
+        this.queryParams.pageNum = val
+        this.getList()
+      },
+      checkReportTypeFormatter(row, column, cellValue, index) {
+        if (cellValue === 'structure') {
+          return '结构符合性检测报告'
+        } else if (cellValue === 'content') {
+          return '内容符合性检测报告'
+        } else {
+          return '关联符合性检测报告'
+        }
+      },
+      checkResultFormatter(row, column, cellValue, index) {
+        if (cellValue === '1') {
+          return <el-tag type='success'> 成功</el-tag>
+        } else {
+          return <el-tag type='warning'> 失败</el-tag>
+        }
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1
+        this.getList()
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 20,
+          sourceName: ''
+        }
+        this.handleQuery()
+      },
+      /** 刷新列表 */
+      handleRefresh() {
+        this.getList()
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .right-toolbar {
+    float: right;
+  }
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 170px);
+  }
+</style>

src/views/quality/checkreport/CheckReportStructure.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="app-container">
+    <div class="hasTagsView">
+      <div class="app-main">
+
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <div style="float: right;">
+              <el-button type="primary" size="mini" icon="el-icon-download" @click="exportWord">导出</el-button>
+              <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+            </div>
+          </div><!--header-->
+
+
+
+          <h4 class="ftitle">结构符合性检测结果报告</h4><!--ftitle 一级标题-->
+
+          <div class="stitle">检测指标统计分析</div><!--stitle 二级标题-->
+          <div class="test-list">
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon1.svg"><span class="tit">检测表总数</span></div>
+<!--              <div class="figure">{{ data.checkTotalCount_new }}</div>-->
+              <div class="figure" >{{ checkTotalCount_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon2.svg"><span class="tit">检测总耗时(毫秒)</span></div>
+<!--              <div class="figure">{{ data.checkTimeConsuming_new }}</div>-->
+              <div class="figure">{{ checkTimeConsuming_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon3.svg"><span class="tit">不合规总数</span></div>
+<!--              <div class="figure">{{ data.checkErrorCount_new }}</div>-->
+              <div class="figure">{{ checkErrorCount_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon4.svg"><span class="tit">不合规率</span></div>
+              <div class="figure">{{ (checkErrorCount_new / checkTotalCount_new * 100).toFixed(2) + '%' }}</div>
+<!--              <div class="figure">{{ data.checkTotalCount_new }}</div>-->
+
+            </div>
+          </div><!--test-list-->
+
+          <div class="stitle">不合规统计分析</div><!--stitle 二级标题-->
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <div class="ttitle">按数据源统计不合规数量</div><!--ttitle 三级标题-->
+              <el-table :data="reportTableData1" border  style="width: 100%" class="btable"><!--加上btable-->
+                <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+                <el-table-column prop="ruleLevelName" label="数据源版本" align="center" />
+                <el-table-column prop="tableSum" label="检测表数" align="center" />
+                <el-table-column prop="tableTime" label="耗时（毫秒）" align="center" />
+                <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                  <template slot-scope="scope">
+                    <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="12">
+              <div class="ttitle">按用例类型统计不合规数量</div><!--ttitle 三级标题-->
+              <el-table :data="reportTableData2" border  style="width: 100%" class="btable"><!--加上btable-->
+<!--                <el-table-column prop="ta1" label="数据源">数据平台</el-table-column>-->
+                <el-table-column prop="ruleName" label="用例类型"></el-table-column>
+                <el-table-column prop="checkErrorCount" label="不合规数">
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+
+          <div class="stitle">用例类型统计分析</div><!--stitle 二级标题-->
+
+          <div class="dbox">
+            <div class="ttitle">表字段标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="table_key" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_table_key" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueTableName" label="实际表名" align="center" />
+                  <el-table-column prop="standardTableName" label="标准表名" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+          <div class="dbox">
+            <div class="ttitle">长度标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="length_key" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_length_key" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardLength" label="标准长度" align="center" />
+                  <el-table-column prop="trueLength" label="实际长度" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+          <div class="dbox">
+            <div class="ttitle">空值标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="null_key" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_null_key" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardNull" label="标准字段是否空值" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="trueNull" label="实际字段是否空值" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+          <div class="dbox">
+            <div class="ttitle">主键标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="pk_key" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_pk_key" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardPk" label="标准字段是否主键" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="truePk" label="实际字段是否主键" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+
+          <div class="dbox">
+            <div class="ttitle">外键标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="fk_key" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_fk_key" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardFk" label="标准字段是否外键" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="trueFk" label="实际字段是否外键" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+
+        </el-card><!--el-card-->
+
+      </div><!--app-main-->
+    </div><!--hasTagsView-->
+  </div>
+</template>
+
+<script>
+  import { getReportBySource, getReportByType, getReportDetail } from '@/api/quality/checkreport'
+  import moment from 'moment'
+  import dataJson from './Data.json'
+  export default {
+    name: 'CheckReportStructure',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        queryParams: {
+          checkDate: ''
+        },
+        pickerOption: {
+          disabledDate(date) {
+            return date.getTime() > Date.now()
+          }
+        },
+        date: '',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showDetail: false
+        },
+        spanArr1: [],
+        position1: 0,
+        reportTableData1: [],
+        spanArr2: [],
+        position2: 0,
+        reportTableData2: [],
+        // 唯一性核查数据
+        uniqueTableData: [],
+        // 完整性核查数据
+        integrityTableData: [],
+        // 准确性核查数据
+        accuracyTableData: [],
+        // 一致性核查数据
+        consistentTableData: [],
+        // 关联性核查数据
+        relevanceTableData: [],
+        // 及时性核查数据
+        timelinessTableData: [],
+
+        // 表字段标准检测
+        table_key: [],
+        no_table_key: [],
+        // 长度标准检测
+        length_key: [],
+        no_length_key: [],
+        // 空值标准检测
+        null_key: [],
+        no_null_key: [],
+        // 主键标准检测
+        pk_key: [],
+        no_pk_key: [],
+        // 外键标准检测
+        fk_key: [],
+        no_fk_key: [],
+        // 完整性标准检测
+        integrity: [],
+        no_integrity: [],
+        // 准确性标准检测
+        accuracy: [],
+        no_accuracy: [],
+        // 一致性标准检测
+        consistent: [],
+        no_consistent: [],
+        // 正则表达式标准检测
+        regular: [],
+        no_regular: [],
+        // 检测表总数
+        checkTotalCount: null,
+        // 检测总耗时
+        checkTimeConsuming: null,
+        // 不合规总数
+        checkErrorCount: null,
+
+        // 检测表总数
+        checkTotalCount_new: null,
+        // 检测总耗时
+        checkTimeConsuming_new: null,
+        // 不合规总数
+        checkErrorCount_new: null,
+
+        like: true,
+        value1: 4154.564,
+        totalTables: 1314,
+        title: '增长人数'
+      }
+    },
+    created() {
+      this.queryParams.checkDate = moment(this.data.checkDate).format('YYYY-MM-DD')
+      this.handleQuery()
+    },
+    mounted () {
+      // 表字段标准检测
+      this.table_key = dataJson.caseType.table_key
+      this.no_table_key = dataJson.caseType.no_table_key
+        // 长度标准检测
+      this.length_key = dataJson.caseType.length_key
+      this.no_length_key = dataJson.caseType.no_length_key
+        // 空值标准检测
+      this.null_key = dataJson.caseType.null_key
+      this.no_null_key = dataJson.caseType.no_null_key
+        // 主键标准检测
+      this.pk_key = dataJson.caseType.pk_key
+      this.no_pk_key = dataJson.caseType.no_pk_key
+        // 外键标准检测
+      this.fk_key = dataJson.caseType.fk_key
+      this.no_fk_key = dataJson.caseType.no_fk_key
+        // 完整性标准检测
+      this.integrity = dataJson.caseType.integrity
+      this.no_integrity = dataJson.caseType.no_integrity
+        // 准确性标准检测
+      this.accuracy = dataJson.caseType.accuracy
+      this.no_accuracy = dataJson.caseType.no_accuracy
+        // 一致性标准检测
+      this.consistent = dataJson.caseType.consistent
+      this.no_consistent = dataJson.caseType.no_consistent
+        // 正则表达式标准检测
+      this.regular = dataJson.caseType.regular
+      this.no_regular = dataJson.caseType.no_regular
+
+      // 初始化按数据源统计不合规数量
+      this.spanArr1 = []
+      this.spanArr2 = []
+      this.reportTableData1 = dataJson.dataReport.reportTableData1
+      this.reportTableData2 = dataJson.dataReport.reportTableData2
+      this.rowspan1()
+      this.rowspan2()
+
+      this.checkTotalCount_new = dataJson.checkTotalCount
+      this.checkTimeConsuming_new = dataJson.checkTimeConsuming
+      this.checkErrorCount_new = dataJson.checkErrorCount
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      handleQuery() {
+        this.spanArr1 = []
+        this.spanArr2 = []
+        // this.getReportData1()
+        // this.getReportData2()
+        // this.getReportData3()
+        // this.date = moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
+      },
+      // getReportData1() {
+      //   getReportBySource({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData1 = response.data
+      //       console.log('reportTableData1==', this.reportTableData1)
+      //       this.rowspan1()
+      //     }
+      //   })
+      // },
+      // getReportData2() {
+      //   getReportByType({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData2 = response.data
+      //       console.log('this.reportTableData2===', this.reportTableData2)
+      //       this.rowspan2()
+      //     }
+      //   })
+      // },
+      rowspan1() {
+        this.reportTableData1.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr1.push(1)
+            this.position1 = 0
+          } else {
+            if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
+              this.spanArr1[this.position1] += 1
+              this.spanArr1.push(0)
+            } else {
+              this.spanArr1.push(1)
+              this.position1 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr1[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      rowspan2() {
+        this.reportTableData2.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr2.push(1)
+            this.position2 = 0
+          } else {
+            if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
+              this.spanArr2[this.position2] += 1
+              this.spanArr2.push(0)
+            } else {
+              this.spanArr2.push(1)
+              this.position2 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr2[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      colorFormat(level) {
+        if (level === '低') {
+          return '#409eff'
+        } else if (level === '中') {
+          return '#e6a23c'
+        } else {
+          return '#f56c6c'
+        }
+      },
+      cellFormat(percentage) {
+        return `${percentage}`
+      },
+      typeFormat(level) {
+        if (level === '低') {
+          return 'primary'
+        } else if (level === '中') {
+          return 'warning'
+        } else {
+          return 'danger'
+        }
+      },
+      getReportData3() {
+        getReportDetail({ checkDate: this.queryParams.checkDate }).then(response => {
+          if (response.success) {
+            this.uniqueTableData = response.data.unique
+            this.integrityTableData = response.data.integrity
+            this.accuracyTableData = response.data.accuracy
+            this.consistentTableData = response.data.consistent
+            this.relevanceTableData = response.data.relevance
+            this.timelinessTableData = response.data.timeliness
+          }
+        })
+      },
+      exportWord() {
+        const filePath = './static/your-word-document.docx'
+        const link = document.createElement('a')
+        link.href = filePath
+        link.download = '测结果报告.docx'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .form-inline {
+    ::v-deep .el-form-item {
+      margin-bottom: 0px;
+    }
+  }
+  ::v-deep .el-badge__content {
+    margin-top: 10px;
+    right: 0px;
+  }
+  ::v-deep .el-table__header th {
+    background-color: #f5f5f5 !important;
+  }
+</style>

src/views/quality/checkreport/CheckReportStructure_bak.vue

@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" shadow="always">
+      <div slot="header" class="clearfix">
+        <el-button-group style="float: right;">
+          <el-button type="primary" size="mini" icon="el-icon-download">导出</el-button>
+          <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+        </el-button-group>
+      </div>
+      <div class="body-wrapper">
+        <h4 style="text-align: center;">{{ date }}{{ data.checkReportType === 'structure' ? '结构符合性' : '内容符合性' }}检测结果报告</h4>
+        <el-divider content-position="left"><h3>检测指标统计分析</h3></el-divider>
+        <el-row :gutter="20">
+          <div>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div>
+                  <el-statistic
+                    group-separator=","
+                    :precision="0"
+                    :value="data.checkTotalCount"
+                    title="检测表总数"
+                  ></el-statistic>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div>
+                  <el-statistic title="检测总耗时（毫秒）">
+                    <template slot="formatter">
+                      {{ data.checkTimeConsuming }}
+                    </template>
+                  </el-statistic>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div>
+                  <el-statistic
+                    group-separator=","
+                    :precision="0"
+                    decimal-separator="."
+                    :value="data.checkErrorCount"
+                    title="不合规总数"
+                  >
+                    <template slot="prefix">
+                      <i class="el-icon-s-flag" style="color: red"></i>
+                    </template>
+                  </el-statistic>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div>
+                  <el-statistic title="不合规率">
+                    <template slot="prefix">
+                      <span class="like">
+                        <i class="el-icon-star-on" style="color:red"></i>
+                      </span>
+                    </template>
+                    <template slot="formatter">
+                      {{ (data.checkErrorCount / data.checkTotalCount * 100) + '%' }}
+                    </template>
+                  </el-statistic>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-row>
+        <el-divider content-position="left"><h3>不合规统计分析</h3></el-divider>
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <h5>按数据源统计不合规数量</h5>
+            <el-table
+              :data="reportTableData1"
+              :span-method="objectSpanMethod1"
+              border
+              default-expand-all
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleLevelName" label="规则级别" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                <template slot-scope="scope">
+                  <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="10" :offset="4">
+            <h5>按用例类型统计不合规数量</h5>
+            <el-table
+              :data="reportTableData2"
+              :span-method="objectSpanMethod2"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleTypeName" label="用例类型" align="center" />
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                <template slot-scope="scope">
+                  <el-badge :value="scope.row.ruleLevelName" :type="typeFormat(scope.row.ruleLevelName)">
+                    {{ scope.row.checkErrorCount }}
+                  </el-badge>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-divider content-position="left"><h3>用例类型统计分析</h3></el-divider>
+        <el-row>
+          <el-col :span="24">
+            <h5>唯一性分析</h5>
+            <el-table
+              :data="uniqueTableData"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="规则名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleTableName" label="数据表(英文)" align="center" />
+              <el-table-column prop="ruleTableComment" label="数据表(中文)" align="center" />
+              <el-table-column prop="ruleColumnName" label="核查字段(英文)" align="center" />
+              <el-table-column prop="ruleColumnComment" label="核查字段(中文)" align="center" />
+              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>完整性分析</h5>
+            <el-table
+              :data="integrityTableData"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="规则名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleTableName" label="数据表(英文)" align="center" />
+              <el-table-column prop="ruleTableComment" label="数据表(中文)" align="center" />
+              <el-table-column prop="ruleColumnName" label="核查字段(英文)" align="center" />
+              <el-table-column prop="ruleColumnComment" label="核查字段(中文)" align="center" />
+              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>一致性分析</h5>
+            <el-table
+              :data="consistentTableData"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="规则名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleTableName" label="数据表(英文)" align="center" />
+              <el-table-column prop="ruleTableComment" label="数据表(中文)" align="center" />
+              <el-table-column prop="ruleColumnName" label="核查字段(英文)" align="center" />
+              <el-table-column prop="ruleColumnComment" label="核查字段(中文)" align="center" />
+              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>关联性分析</h5>
+            <el-table
+              :data="relevanceTableData"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="规则名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleTableName" label="数据表(英文)" align="center" />
+              <el-table-column prop="ruleTableComment" label="数据表(中文)" align="center" />
+              <el-table-column prop="ruleColumnName" label="核查字段(英文)" align="center" />
+              <el-table-column prop="ruleColumnComment" label="核查字段(中文)" align="center" />
+              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>及时性分析</h5>
+            <el-table
+              :data="timelinessTableData"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="规则名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleTableName" label="数据表(英文)" align="center" />
+              <el-table-column prop="ruleTableComment" label="数据表(中文)" align="center" />
+              <el-table-column prop="ruleColumnName" label="核查字段(英文)" align="center" />
+              <el-table-column prop="ruleColumnComment" label="核查字段(中文)" align="center" />
+              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>准确性分析</h5>
+            <el-table
+              :data="accuracyTableData"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="规则名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleTableName" label="数据表(英文)" align="center" />
+              <el-table-column prop="ruleTableComment" label="数据表(中文)" align="center" />
+              <el-table-column prop="ruleColumnName" label="核查字段(英文)" align="center" />
+              <el-table-column prop="ruleColumnComment" label="核查字段(中文)" align="center" />
+              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { getReportBySource, getReportByType, getReportDetail } from '@/api/quality/checkreport'
+  import moment from 'moment'
+
+  export default {
+    name: 'CheckReportStructure',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        queryParams: {
+          checkDate: ''
+        },
+        pickerOption: {
+          disabledDate(date) {
+            return date.getTime() > Date.now()
+          }
+        },
+        date: '',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showDetail: false
+        },
+        spanArr1: [],
+        position1: 0,
+        reportTableData1: [],
+        spanArr2: [],
+        position2: 0,
+        reportTableData2: [],
+        // 唯一性核查数据
+        uniqueTableData: [],
+        // 完整性核查数据
+        integrityTableData: [],
+        // 准确性核查数据
+        accuracyTableData: [],
+        // 一致性核查数据
+        consistentTableData: [],
+        // 关联性核查数据
+        relevanceTableData: [],
+        // 及时性核查数据
+        timelinessTableData: [],
+        like: true,
+        value1: 4154.564,
+        totalTables: 1314,
+        title: '增长人数'
+      }
+    },
+    created() {
+      this.queryParams.checkDate = moment(this.data.checkDate).format('YYYY-MM-DD')
+      this.handleQuery()
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      handleQuery() {
+        this.spanArr1 = []
+        this.spanArr2 = []
+        this.getReportData1()
+        this.getReportData2()
+        this.getReportData3()
+        this.date = moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
+      },
+      getReportData1() {
+        getReportBySource({ checkDate: this.queryParams.checkDate }).then(response => {
+          if (response.success) {
+            this.reportTableData1 = response.data
+            this.rowspan1()
+          }
+        })
+      },
+      getReportData2() {
+        getReportByType({ checkDate: this.queryParams.checkDate }).then(response => {
+          if (response.success) {
+            this.reportTableData2 = response.data
+            this.rowspan2()
+          }
+        })
+      },
+      rowspan1() {
+        this.reportTableData1.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr1.push(1)
+            this.position1 = 0
+          } else {
+            if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
+              this.spanArr1[this.position1] += 1
+              this.spanArr1.push(0)
+            } else {
+              this.spanArr1.push(1)
+              this.position1 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr1[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      rowspan2() {
+        this.reportTableData2.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr2.push(1)
+            this.position2 = 0
+          } else {
+            if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
+              this.spanArr2[this.position2] += 1
+              this.spanArr2.push(0)
+            } else {
+              this.spanArr2.push(1)
+              this.position2 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr2[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      colorFormat(level) {
+        if (level === '低') {
+          return '#409eff'
+        } else if (level === '中') {
+          return '#e6a23c'
+        } else {
+          return '#f56c6c'
+        }
+      },
+      cellFormat(percentage) {
+        return `${percentage}`
+      },
+      typeFormat(level) {
+        if (level === '低') {
+          return 'primary'
+        } else if (level === '中') {
+          return 'warning'
+        } else {
+          return 'danger'
+        }
+      },
+      getReportData3() {
+        getReportDetail({ checkDate: this.queryParams.checkDate }).then(response => {
+          if (response.success) {
+            this.uniqueTableData = response.data.unique
+            this.integrityTableData = response.data.integrity
+            this.accuracyTableData = response.data.accuracy
+            this.consistentTableData = response.data.consistent
+            this.relevanceTableData = response.data.relevance
+            this.timelinessTableData = response.data.timeliness
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .form-inline {
+    ::v-deep .el-form-item {
+      margin-bottom: 0px;
+    }
+  }
+  ::v-deep .el-badge__content {
+    margin-top: 10px;
+    right: 0px;
+  }
+  ::v-deep .el-table__header th {
+    background-color: #f5f5f5 !important;
+  }
+</style>

src/views/quality/checkreport/CheckReportStructure_bak1.vue

@@ -0,0 +1,750 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" shadow="always">
+      <div slot="header" class="clearfix">
+        <div style="float: right;">
+          <el-button type="primary" size="mini" icon="el-icon-download" @click="exportWord">导出</el-button>
+          <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+        </div>
+
+      </div>
+      <div class="body-wrapper">
+        <h4 style="text-align: center;">{{ date }}{{ data.checkReportType === 'structure' ? '结构符合性' : '内容符合性' }}检测结果报告</h4>
+        <el-divider content-position="left"><h3>检测指标统计分析</h3></el-divider>
+        <el-row :gutter="20">
+          <div>
+            <el-row :gutter="20">
+              <el-col :span="6">
+                <div>
+                  <el-statistic
+                    group-separator=","
+                    :precision="0"
+                    :value="data.checkTotalCount"
+                    title="检测表总数"
+                  ></el-statistic>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div>
+                  <el-statistic title="检测总耗时（毫秒）">
+                    <template slot="formatter">
+                      {{ data.checkTimeConsuming }}
+                    </template>
+                  </el-statistic>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div>
+                  <el-statistic
+                    group-separator=","
+                    :precision="0"
+                    decimal-separator="."
+                    :value="data.checkErrorCount"
+                    title="不合规总数"
+                  >
+                    <template slot="prefix">
+                      <i class="el-icon-s-flag" style="color: red"></i>
+                    </template>
+                  </el-statistic>
+                </div>
+              </el-col>
+              <el-col :span="6">
+                <div>
+                  <el-statistic title="不合规率">
+                    <template slot="prefix">
+                      <span class="like">
+                        <i class="el-icon-star-on" style="color:red"></i>
+                      </span>
+                    </template>
+                    <template slot="formatter">
+                      {{ (data.checkErrorCount / data.checkTotalCount * 100) + '%' }}
+                    </template>
+                  </el-statistic>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-row>
+        <el-divider content-position="left"><h3>不合规统计分析</h3></el-divider>
+        <el-row :gutter="20">
+          <el-col :span="10">
+            <h5>按数据源统计不合规数量</h5>
+            <el-table
+              :data="reportTableData1"
+              :span-method="objectSpanMethod1"
+              border
+              default-expand-all
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="ruleLevelName" label="规则级别" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                <template slot-scope="scope">
+                  <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+          <el-col :span="10" :offset="4">
+            <h5>按用例类型统计不合规数量</h5>
+            <el-table
+              :data="reportTableData2"
+              :span-method="objectSpanMethod2"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleTypeName" label="用例类型" align="center" />
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                <template slot-scope="scope">
+                  <el-badge :value="scope.row.ruleLevelName" :type="typeFormat(scope.row.ruleLevelName)">
+                    {{ scope.row.checkErrorCount }}
+                  </el-badge>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-row>
+        <el-divider content-position="left"><h3>用例类型统计分析</h3></el-divider>
+        <el-row>
+          <el-col :span="24">
+            <h5>表字段标准检测</h5>
+            <el-table
+              :data="table_key"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_table_key"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueTableName" label="实际表名" align="center" />
+                  <el-table-column prop="standardTableName" label="标准表名" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>长度标准检测</h5>
+            <el-table
+              :data="length_key"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_length_key"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardLength" label="标准长度" align="center" />
+                  <el-table-column prop="trueLength" label="实际长度" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>空值标准检测</h5>
+            <el-table
+              :data="null_key"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_null_key"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardNull" label="标准字段是否空值" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="trueNull" label="实际字段是否空值" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>主键标准检测</h5>
+            <el-table
+              :data="pk_key"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_pk_key"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardPk" label="标准字段是否主键" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="truePk" label="实际字段是否主键" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>外键标准检测</h5>
+            <el-table
+              :data="fk_key"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_fk_key"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardFk" label="标准字段是否外键" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="trueFk" label="实际字段是否外键" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>完整性标准检测</h5>
+            <el-table
+              :data="integrity"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_integrity"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>准确性标准检测</h5>
+            <el-table
+              :data="accuracy"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_accuracy"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>一致性标准检测</h5>
+            <el-table
+              :data="consistent"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_consistent"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <h5>正则表达式标准检测</h5>
+            <el-table
+              :data="regular"
+              border
+              tooltip-effect="dark"
+              :max-height="250"
+              style="width: 100%; margin: 15px 0;"
+            >
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="版本" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse accordion>
+              <el-collapse-item>
+                <template slot="title">
+                  <i class="el-icon-document"></i>&nbsp;不合规明细
+                </template>
+                <el-table
+                  :data="no_regular"
+                  border
+                  tooltip-effect="dark"
+                  :max-height="250"
+                  style="width: 100%; margin: 15px 0;"
+                >
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="dataColumn" label="字段值" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import { getReportBySource, getReportByType, getReportDetail } from '@/api/quality/checkreport'
+  import moment from 'moment'
+  import dataJson from './Data.json'
+  export default {
+    name: 'CheckReportStructure',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        queryParams: {
+          checkDate: ''
+        },
+        pickerOption: {
+          disabledDate(date) {
+            return date.getTime() > Date.now()
+          }
+        },
+        date: '',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showDetail: false
+        },
+        spanArr1: [],
+        position1: 0,
+        reportTableData1: [],
+        spanArr2: [],
+        position2: 0,
+        reportTableData2: [],
+        // 唯一性核查数据
+        uniqueTableData: [],
+        // 完整性核查数据
+        integrityTableData: [],
+        // 准确性核查数据
+        accuracyTableData: [],
+        // 一致性核查数据
+        consistentTableData: [],
+        // 关联性核查数据
+        relevanceTableData: [],
+        // 及时性核查数据
+        timelinessTableData: [],
+
+        // 表字段标准检测
+        table_key: [],
+        no_table_key: [],
+        // 长度标准检测
+        length_key: [],
+        no_length_key: [],
+        // 空值标准检测
+        null_key: [],
+        no_null_key: [],
+        // 主键标准检测
+        pk_key: [],
+        no_pk_key: [],
+        // 外键标准检测
+        fk_key: [],
+        no_fk_key: [],
+        // 完整性标准检测
+        integrity: [],
+        no_integrity: [],
+        // 准确性标准检测
+        accuracy: [],
+        no_accuracy: [],
+        // 一致性标准检测
+        consistent: [],
+        no_consistent: [],
+        // 正则表达式标准检测
+        regular: [],
+        no_regular: [],
+        // 检测表总数
+        checkTotalCount: null,
+        // 检测总耗时
+        checkTimeConsuming: null,
+        // 不合规总数
+        checkErrorCount: null,
+
+        like: true,
+        value1: 4154.564,
+        totalTables: 1314,
+        title: '增长人数'
+      }
+    },
+    created() {
+      this.queryParams.checkDate = moment(this.data.checkDate).format('YYYY-MM-DD')
+      this.handleQuery()
+    },
+    mounted () {
+      // 表字段标准检测
+      this.table_key = dataJson.caseType.table_key
+      this.no_table_key = dataJson.caseType.no_table_key
+        // 长度标准检测
+      this.length_key = dataJson.caseType.length_key
+      this.no_length_key = dataJson.caseType.no_length_key
+        // 空值标准检测
+      this.null_key = dataJson.caseType.null_key
+      this.no_null_key = dataJson.caseType.no_null_key
+        // 主键标准检测
+      this.pk_key = dataJson.caseType.pk_key
+      this.no_pk_key = dataJson.caseType.no_pk_key
+        // 外键标准检测
+      this.fk_key = dataJson.caseType.fk_key
+      this.no_fk_key = dataJson.caseType.no_fk_key
+        // 完整性标准检测
+      this.integrity = dataJson.caseType.integrity
+      this.no_integrity = dataJson.caseType.no_integrity
+        // 准确性标准检测
+      this.accuracy = dataJson.caseType.accuracy
+      this.no_accuracy = dataJson.caseType.no_accuracy
+        // 一致性标准检测
+      this.consistent = dataJson.caseType.consistent
+      this.no_consistent = dataJson.caseType.no_consistent
+        // 正则表达式标准检测
+      this.regular = dataJson.caseType.regular
+      this.no_regular = dataJson.caseType.no_regular
+
+      // 初始化按数据源统计不合规数量
+      this.spanArr1 = []
+      this.spanArr2 = []
+      this.reportTableData1 = dataJson.dataReport.reportTableData1
+      this.reportTableData2 = dataJson.dataReport.reportTableData2
+      this.rowspan1()
+      this.rowspan2()
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      handleQuery() {
+        this.spanArr1 = []
+        this.spanArr2 = []
+        // this.getReportData1()
+        this.getReportData2()
+        this.getReportData3()
+        this.date = moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
+      },
+      // getReportData1() {
+      //   getReportBySource({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData1 = response.data
+      //       console.log('reportTableData1==', this.reportTableData1)
+      //       this.rowspan1()
+      //     }
+      //   })
+      // },
+      // getReportData2() {
+      //   getReportByType({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData2 = response.data
+      //       console.log('this.reportTableData2===', this.reportTableData2)
+      //       this.rowspan2()
+      //     }
+      //   })
+      // },
+      rowspan1() {
+        this.reportTableData1.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr1.push(1)
+            this.position1 = 0
+          } else {
+            if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
+              this.spanArr1[this.position1] += 1
+              this.spanArr1.push(0)
+            } else {
+              this.spanArr1.push(1)
+              this.position1 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr1[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      rowspan2() {
+        this.reportTableData2.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr2.push(1)
+            this.position2 = 0
+          } else {
+            if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
+              this.spanArr2[this.position2] += 1
+              this.spanArr2.push(0)
+            } else {
+              this.spanArr2.push(1)
+              this.position2 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr2[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      colorFormat(level) {
+        if (level === '低') {
+          return '#409eff'
+        } else if (level === '中') {
+          return '#e6a23c'
+        } else {
+          return '#f56c6c'
+        }
+      },
+      cellFormat(percentage) {
+        return `${percentage}`
+      },
+      typeFormat(level) {
+        if (level === '低') {
+          return 'primary'
+        } else if (level === '中') {
+          return 'warning'
+        } else {
+          return 'danger'
+        }
+      },
+      getReportData3() {
+        getReportDetail({ checkDate: this.queryParams.checkDate }).then(response => {
+          if (response.success) {
+            this.uniqueTableData = response.data.unique
+            this.integrityTableData = response.data.integrity
+            this.accuracyTableData = response.data.accuracy
+            this.consistentTableData = response.data.consistent
+            this.relevanceTableData = response.data.relevance
+            this.timelinessTableData = response.data.timeliness
+          }
+        })
+      },
+      exportWord() {
+        const filePath = './static/your-word-document.docx'
+        const link = document.createElement('a')
+        link.href = filePath
+        link.download = '测结果报告.docx'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .form-inline {
+    ::v-deep .el-form-item {
+      margin-bottom: 0px;
+    }
+  }
+  ::v-deep .el-badge__content {
+    margin-top: 10px;
+    right: 0px;
+  }
+  ::v-deep .el-table__header th {
+    background-color: #f5f5f5 !important;
+  }
+</style>

src/views/quality/checkreport/CheckReportStructure_content.vue

@@ -0,0 +1,465 @@
+<template>
+  <div class="app-container">
+    <div class="hasTagsView">
+      <div class="app-main">
+
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <div style="float: right;">
+              <el-button type="primary" size="mini" icon="el-icon-download" @click="exportWord">导出</el-button>
+              <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+            </div>
+          </div><!--header-->
+          <h4 class="ftitle">内容符合性检测结果报告</h4><!--ftitle 一级标题-->
+
+          <div class="stitle">检测指标统计分析</div><!--stitle 二级标题-->
+          <div class="test-list">
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon1.svg"><span class="tit">检测内容条数</span></div>
+<!--              <div class="figure">{{ data.checkTotalCount_new }}</div>-->
+              <div class="figure" >{{ checkTotalCount_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon2.svg"><span class="tit">检测总耗时(毫秒)</span></div>
+<!--              <div class="figure">{{ data.checkTimeConsuming_new }}</div>-->
+              <div class="figure">{{ checkTimeConsuming_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon3.svg"><span class="tit">不合规总数</span></div>
+<!--              <div class="figure">{{ data.checkErrorCount_new }}</div>-->
+              <div class="figure">{{ checkErrorCount_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon4.svg"><span class="tit">不合规率</span></div>
+              <div class="figure">{{ (checkErrorCount_new / checkTotalCount_new * 100).toFixed(2) + '%' }}</div>
+<!--              <div class="figure">{{ data.checkTotalCount_new }}</div>-->
+
+            </div>
+          </div><!--test-list-->
+
+          <div class="stitle">不合规统计分析</div><!--stitle 二级标题-->
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <div class="ttitle">按数据源统计不合规数量</div><!--ttitle 三级标题-->
+              <el-table :data="reportTableData1" border  style="width: 100%" class="btable"><!--加上btable-->
+                <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+                <el-table-column prop="ruleLevelName" label="数据源版本" align="center" />
+                <el-table-column prop="tableSum" label="检测条数" align="center" />
+                <el-table-column prop="tableTime" label="总耗时（毫秒）" align="center" />
+                <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                  <template slot-scope="scope">
+                    <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="12">
+              <div class="ttitle">按用例类型统计不合规数量</div><!--ttitle 三级标题-->
+              <el-table :data="reportTableData2" border  style="width: 100%" class="btable"><!--加上btable-->
+<!--                <el-table-column prop="ta1" label="数据源">数据平台</el-table-column>-->
+                <el-table-column prop="ruleName" label="用例类型"></el-table-column>
+                <el-table-column prop="checkErrorCount" label="不合规数">
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+
+          <div class="stitle">用例类型统计分析</div><!--stitle 二级标题-->
+          <div class="dbox" >
+            <div class="ttitle">完整性标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="integrity" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_integrity" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="tableErrorCount" label="不合规数" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+          <div class="dbox" >
+            <div class="ttitle">准确性标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="accuracy" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_accuracy" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="tableErrorCount" label="不合规数" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+          <div class="dbox"  >
+            <div class="ttitle">一致性标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="consistent" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_consistent" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="tableErrorCount" label="不合规数" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+          <div class="dbox"  >
+            <div class="ttitle">正则表达式标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="regular" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_regular" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="trueColumn" label="字段名称" align="center" />
+                  <el-table-column prop="tableErrorCount" label="不合规数" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+
+        </el-card><!--el-card-->
+
+      </div><!--app-main-->
+    </div><!--hasTagsView-->
+  </div>
+</template>
+
+<script>
+  // import { getReportBySource, getReportByType, C } from '@/api/quality/checkreport'
+  import moment from 'moment'
+  import dataJson from './Data_content.json'
+  export default {
+    name: 'CheckReportStructureontent',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        queryParams: {
+          checkDate: ''
+        },
+        pickerOption: {
+          disabledDate(date) {
+            return date.getTime() > Date.now()
+          }
+        },
+        date: '',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showDetail_content: false
+        },
+        spanArr1: [],
+        position1: 0,
+        reportTableData1: [],
+        spanArr2: [],
+        position2: 0,
+        reportTableData2: [],
+        // 唯一性核查数据
+        uniqueTableData: [],
+        // 完整性核查数据
+        integrityTableData: [],
+        // 准确性核查数据
+        accuracyTableData: [],
+        // 一致性核查数据
+        consistentTableData: [],
+        // 关联性核查数据
+        relevanceTableData: [],
+        // 及时性核查数据
+        timelinessTableData: [],
+
+        // 表字段标准检测
+        table_key: [],
+        no_table_key: [],
+        // 长度标准检测
+        length_key: [],
+        no_length_key: [],
+        // 空值标准检测
+        null_key: [],
+        no_null_key: [],
+        // 主键标准检测
+        pk_key: [],
+        no_pk_key: [],
+        // 外键标准检测
+        fk_key: [],
+        no_fk_key: [],
+        // 完整性标准检测
+        integrity: [],
+        no_integrity: [],
+        // 准确性标准检测
+        accuracy: [],
+        no_accuracy: [],
+        // 一致性标准检测
+        consistent: [],
+        no_consistent: [],
+        // 正则表达式标准检测
+        regular: [],
+        no_regular: [],
+        // 检测表总数
+        checkTotalCount: null,
+        // 检测总耗时
+        checkTimeConsuming: null,
+        // 不合规总数
+        checkErrorCount: null,
+
+        // 检测表总数
+        checkTotalCount_new: null,
+        // 检测总耗时
+        checkTimeConsuming_new: null,
+        // 不合规总数
+        checkErrorCount_new: null,
+
+        like: true,
+        value1: 4154.564,
+        totalTables: 1314,
+        title: '增长人数'
+      }
+    },
+    created() {
+      this.queryParams.checkDate = moment(this.data.checkDate).format('YYYY-MM-DD')
+      this.handleQuery()
+    },
+    mounted () {
+      // 表字段标准检测
+      this.table_key = dataJson.caseType.table_key
+      this.no_table_key = dataJson.caseType.no_table_key
+        // 长度标准检测
+      this.length_key = dataJson.caseType.length_key
+      this.no_length_key = dataJson.caseType.no_length_key
+        // 空值标准检测
+      this.null_key = dataJson.caseType.null_key
+      this.no_null_key = dataJson.caseType.no_null_key
+        // 主键标准检测
+      this.pk_key = dataJson.caseType.pk_key
+      this.no_pk_key = dataJson.caseType.no_pk_key
+        // 外键标准检测
+      this.fk_key = dataJson.caseType.fk_key
+      this.no_fk_key = dataJson.caseType.no_fk_key
+        // 完整性标准检测
+      this.integrity = dataJson.caseType.integrity
+      this.no_integrity = dataJson.caseType.no_integrity
+        // 准确性标准检测
+      this.accuracy = dataJson.caseType.accuracy
+      this.no_accuracy = dataJson.caseType.no_accuracy
+        // 一致性标准检测
+      this.consistent = dataJson.caseType.consistent
+      this.no_consistent = dataJson.caseType.no_consistent
+        // 正则表达式标准检测
+      this.regular = dataJson.caseType.regular
+      this.no_regular = dataJson.caseType.no_regular
+
+      // 初始化按数据源统计不合规数量
+      this.spanArr1 = []
+      this.spanArr2 = []
+      this.reportTableData1 = dataJson.dataReport.reportTableData1
+      this.reportTableData2 = dataJson.dataReport.reportTableData2
+      this.rowspan1()
+      this.rowspan2()
+
+      this.checkTotalCount_new = dataJson.checkTotalCount
+      this.checkTimeConsuming_new = dataJson.checkTimeConsuming
+      this.checkErrorCount_new = dataJson.checkErrorCount
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      handleQuery() {
+        this.spanArr1 = []
+        this.spanArr2 = []
+        // this.getReportData1()
+        // this.getReportData2()
+        // this.getReportData3()
+        // this.date = moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
+      },
+      // getReportData1() {
+      //   getReportBySource({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData1 = response.data
+      //       console.log('reportTableData1==', this.reportTableData1)
+      //       this.rowspan1()
+      //     }
+      //   })
+      // },
+      // getReportData2() {
+      //   getReportByType({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData2 = response.data
+      //       console.log('this.reportTableData2===', this.reportTableData2)
+      //       this.rowspan2()
+      //     }
+      //   })
+      // },
+      rowspan1() {
+        this.reportTableData1.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr1.push(1)
+            this.position1 = 0
+          } else {
+            if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
+              this.spanArr1[this.position1] += 1
+              this.spanArr1.push(0)
+            } else {
+              this.spanArr1.push(1)
+              this.position1 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr1[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      rowspan2() {
+        this.reportTableData2.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr2.push(1)
+            this.position2 = 0
+          } else {
+            if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
+              this.spanArr2[this.position2] += 1
+              this.spanArr2.push(0)
+            } else {
+              this.spanArr2.push(1)
+              this.position2 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr2[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      colorFormat(level) {
+        if (level === '低') {
+          return '#409eff'
+        } else if (level === '中') {
+          return '#e6a23c'
+        } else {
+          return '#f56c6c'
+        }
+      },
+      cellFormat(percentage) {
+        return `${percentage}`
+      },
+      typeFormat(level) {
+        if (level === '低') {
+          return 'primary'
+        } else if (level === '中') {
+          return 'warning'
+        } else {
+          return 'danger'
+        }
+      },
+      // getReportData3() {
+      //   getReportDetail({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.uniqueTableData = response.data.unique
+      //       this.integrityTableData = response.data.integrity
+      //       this.accuracyTableData = response.data.accuracy
+      //       this.consistentTableData = response.data.consistent
+      //       this.relevanceTableData = response.data.relevance
+      //       this.timelinessTableData = response.data.timeliness
+      //     }
+      //   })
+      // },
+      exportWord() {
+        const filePath = './static/your-word-document.docx'
+        const link = document.createElement('a')
+        link.href = filePath
+        link.download = '测结果报告.docx'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .form-inline {
+    ::v-deep .el-form-item {
+      margin-bottom: 0px;
+    }
+  }
+  ::v-deep .el-badge__content {
+    margin-top: 10px;
+    right: 0px;
+  }
+  ::v-deep .el-table__header th {
+    background-color: #f5f5f5 !important;
+  }
+</style>

src/views/quality/checkreport/CheckReportStructure_relevance.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="app-container">
+    <div class="hasTagsView">
+      <div class="app-main">
+
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <div style="float: right;">
+              <el-button type="primary" size="mini" icon="el-icon-download" @click="exportWord">导出</el-button>
+              <el-button size="mini" icon="el-icon-back" @click="showCard">返回</el-button>
+            </div>
+          </div><!--header-->
+
+
+
+          <h4 class="ftitle">关联符合性检测结果报告</h4><!--ftitle 一级标题-->
+
+          <div class="stitle">检测指标统计分析</div><!--stitle 二级标题-->
+          <div class="test-list">
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon1.svg"><span class="tit">检测表总数</span></div>
+<!--              <div class="figure">{{ data.checkTotalCount_new }}</div>-->
+              <div class="figure" >{{ checkTotalCount_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon2.svg"><span class="tit">检测总耗时(毫秒)</span></div>
+<!--              <div class="figure">{{ data.checkTimeConsuming_new }}</div>-->
+              <div class="figure">{{ checkTimeConsuming_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon3.svg"><span class="tit">不合规总数</span></div>
+<!--              <div class="figure">{{ data.checkErrorCount_new }}</div>-->
+              <div class="figure">{{ checkErrorCount_new }}</div>
+
+            </div>
+            <div class="list">
+              <div class="title"><img src="../../../assets/images/j-icon4.svg"><span class="tit">不合规率</span></div>
+              <div class="figure">{{ (checkErrorCount_new / checkTotalCount_new * 100).toFixed(2) + '%' }}</div>
+<!--              <div class="figure">{{ data.checkTotalCount_new }}</div>-->
+
+            </div>
+          </div><!--test-list-->
+
+          <div class="stitle">不合规统计分析</div><!--stitle 二级标题-->
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <div class="ttitle">按数据源统计不合规数量</div><!--ttitle 三级标题-->
+              <el-table :data="reportTableData1" border  style="width: 100%" class="btable"><!--加上btable-->
+                <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+                <el-table-column prop="ruleLevelName" label="数据源版本" align="center" />
+                <el-table-column prop="tableSum" label="检测表数" align="center" />
+                <el-table-column prop="tableTime" label="耗时（毫秒）" align="center" />
+                <el-table-column prop="checkErrorCount" label="不合规数" align="center">
+                  <template slot-scope="scope">
+                    <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.ruleLevelName)" :format="cellFormat" />
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-col>
+            <el-col :span="12">
+              <div class="ttitle">按用例类型统计不合规数量</div><!--ttitle 三级标题-->
+              <el-table :data="reportTableData2" border  style="width: 100%" class="btable"><!--加上btable-->
+<!--                <el-table-column prop="ta1" label="数据源">数据平台</el-table-column>-->
+                <el-table-column prop="ruleName" label="用例类型"></el-table-column>
+                <el-table-column prop="checkErrorCount" label="不合规数">
+                </el-table-column>
+              </el-table>
+            </el-col>
+          </el-row>
+
+          <div class="stitle">用例类型统计分析</div><!--stitle 二级标题-->
+          <div class="dbox">
+            <div class="ttitle">关联性标准检测用例</div><!--ttitle 三级标题-->
+            <el-table :data="relevancData" border  style="width: 100%">
+              <el-table-column prop="ruleName" label="用例名称" align="center" />
+              <el-table-column prop="ruleSourceName" label="数据源" align="center" />
+              <el-table-column prop="version" label="数据源版本" align="center" />
+              <el-table-column prop="checkTotalTime" label="耗时（毫秒）" align="center" />
+              <el-table-column prop="checkTotalCount" label="检测数" align="center" />
+              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
+            </el-table>
+            <el-collapse @change="handleChange" class="ncoll"><!--加上ncoll-->
+              <el-collapse-item name="1">
+                <template slot="title"><span class="tit">不合规明细</span></template>
+                <el-table :data="no_relevancData" border  style="width: 100%">
+                  <el-table-column prop="caseName" label="用例名称" align="center" />
+                  <el-table-column prop="source" label="数据源" align="center" />
+                  <el-table-column prop="tableName" label="数据表" align="center" />
+                  <el-table-column prop="standardColumn" label="标准字段" align="center" />
+                  <el-table-column prop="standardPk" label="标准字段是否主键" align="center" />
+                  <el-table-column prop="standardFk" label="标准字段是否外键" align="center" />
+                  <el-table-column prop="trueColumn" label="实际字段" align="center" />
+                  <el-table-column prop="truePk" label="实际字段是否主键" align="center" />
+                  <el-table-column prop="trueFk" label="实际字段是否外键" align="center" />
+                  <el-table-column prop="notDetail" label="不合规原因" align="center" width="200px" />
+                </el-table>
+              </el-collapse-item>
+            </el-collapse>
+          </div><!--dbox-->
+        </el-card><!--el-card-->
+
+      </div><!--app-main-->
+    </div><!--hasTagsView-->
+  </div>
+</template>
+
+<script>
+  // import { getReportBySource, getReportByType, getReportDetail } from '@/api/quality/checkreport'
+  import moment from 'moment'
+  import dataJson from './Data_relevance.json'
+  export default {
+    name: 'CheckReportStructureRelevance',
+    props: {
+      data: {
+        type: Object,
+        default: function() {
+          return {}
+        }
+      }
+    },
+    data() {
+      return {
+        queryParams: {
+          checkDate: ''
+        },
+        pickerOption: {
+          disabledDate(date) {
+            return date.getTime() > Date.now()
+          }
+        },
+        date: '',
+        // 展示切换
+        showOptions: {
+          data: {},
+          showList: true,
+          showDetail_relevance: false
+        },
+        spanArr1: [],
+        position1: 0,
+        reportTableData1: [],
+        spanArr2: [],
+        position2: 0,
+        reportTableData2: [],
+        // 唯一性核查数据
+        uniqueTableData: [],
+        // 完整性核查数据
+        integrityTableData: [],
+        // 准确性核查数据
+        accuracyTableData: [],
+        // 一致性核查数据
+        consistentTableData: [],
+        // 关联性核查数据
+        relevanceTableData: [],
+        // 及时性核查数据
+        timelinessTableData: [],
+
+        // 表字段标准检测
+        table_key: [],
+        no_table_key: [],
+        // 长度标准检测
+        length_key: [],
+        no_length_key: [],
+        // 空值标准检测
+        null_key: [],
+        no_null_key: [],
+        // 主键标准检测
+        pk_key: [],
+        no_pk_key: [],
+        // 外键标准检测
+        fk_key: [],
+        no_fk_key: [],
+        // 完整性标准检测
+        integrity: [],
+        no_integrity: [],
+        // 准确性标准检测
+        accuracy: [],
+        no_accuracy: [],
+        // 一致性标准检测
+        consistent: [],
+        no_consistent: [],
+        // 正则表达式标准检测
+        regular: [],
+        no_regular: [],
+        // 关联符合性校验
+        relevancData: [],
+        no_relevanceData: [],
+        // 检测表总数
+        checkTotalCount: null,
+        // 检测总耗时
+        checkTimeConsuming: null,
+        // 不合规总数
+        checkErrorCount: null,
+
+        // 检测表总数
+        checkTotalCount_new: null,
+        // 检测总耗时
+        checkTimeConsuming_new: null,
+        // 不合规总数
+        checkErrorCount_new: null,
+
+        like: true,
+        value1: 4154.564,
+        totalTables: 1314,
+        title: '增长人数'
+      }
+    },
+    created() {
+      this.queryParams.checkDate = moment(this.data.checkDate).format('YYYY-MM-DD')
+      this.handleQuery()
+    },
+    mounted () {
+      // 表字段标准检测
+      this.table_key = dataJson.caseType.table_key
+      this.no_table_key = dataJson.caseType.no_table_key
+        // 长度标准检测
+      this.length_key = dataJson.caseType.length_key
+      this.no_length_key = dataJson.caseType.no_length_key
+        // 空值标准检测
+      this.null_key = dataJson.caseType.null_key
+      this.no_null_key = dataJson.caseType.no_null_key
+        // 主键标准检测
+      this.pk_key = dataJson.caseType.pk_key
+      this.no_pk_key = dataJson.caseType.no_pk_key
+        // 外键标准检测
+      this.fk_key = dataJson.caseType.fk_key
+      this.no_fk_key = dataJson.caseType.no_fk_key
+        // 完整性标准检测
+      this.integrity = dataJson.caseType.integrity
+      this.no_integrity = dataJson.caseType.no_integrity
+        // 准确性标准检测
+      this.accuracy = dataJson.caseType.accuracy
+      this.no_accuracy = dataJson.caseType.no_accuracy
+        // 一致性标准检测
+      this.consistent = dataJson.caseType.consistent
+      this.no_consistent = dataJson.caseType.no_consistent
+        // 正则表达式标准检测
+      this.regular = dataJson.caseType.regular
+      this.no_regular = dataJson.caseType.no_regular
+
+      this.relevancData = dataJson.caseType.relevancData
+      this.no_relevancData = dataJson.caseType.no_relevancData
+
+      // 初始化按数据源统计不合规数量
+      this.spanArr1 = []
+      this.spanArr2 = []
+      this.reportTableData1 = dataJson.dataReport.reportTableData1
+      this.reportTableData2 = dataJson.dataReport.reportTableData2
+      this.rowspan1()
+      this.rowspan2()
+
+      this.checkTotalCount_new = dataJson.checkTotalCount
+      this.checkTimeConsuming_new = dataJson.checkTimeConsuming
+      this.checkErrorCount_new = dataJson.checkErrorCount
+    },
+    methods: {
+      showCard() {
+        this.$emit('showCard', this.showOptions)
+      },
+      handleQuery() {
+        this.spanArr1 = []
+        this.spanArr2 = []
+        // this.getReportData1()
+        // this.getReportData2()
+        // this.getReportData3()
+        // this.date = moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
+      },
+      // getReportData1() {
+      //   getReportBySource({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData1 = response.data
+      //       console.log('reportTableData1==', this.reportTableData1)
+      //       this.rowspan1()
+      //     }
+      //   })
+      // },
+      // getReportData2() {
+      //   getReportByType({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.reportTableData2 = response.data
+      //       console.log('this.reportTableData2===', this.reportTableData2)
+      //       this.rowspan2()
+      //     }
+      //   })
+      // },
+      rowspan1() {
+        this.reportTableData1.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr1.push(1)
+            this.position1 = 0
+          } else {
+            if (this.reportTableData1[index].ruleSourceId === this.reportTableData1[index - 1].ruleSourceId) {
+              this.spanArr1[this.position1] += 1
+              this.spanArr1.push(0)
+            } else {
+              this.spanArr1.push(1)
+              this.position1 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr1[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      rowspan2() {
+        this.reportTableData2.forEach((item, index) => {
+          if (index === 0) {
+            this.spanArr2.push(1)
+            this.position2 = 0
+          } else {
+            if (this.reportTableData2[index].ruleTypeId === this.reportTableData2[index - 1].ruleTypeId) {
+              this.spanArr2[this.position2] += 1
+              this.spanArr2.push(0)
+            } else {
+              this.spanArr2.push(1)
+              this.position2 = index
+            }
+          }
+        })
+      },
+      objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
+        if (columnIndex === 0) {
+          const _row = this.spanArr2[rowIndex]
+          const _col = _row > 0 ? 1 : 0
+          return {
+            rowspan: _row,
+            colspan: _col
+          }
+        }
+      },
+      colorFormat(level) {
+        if (level === '低') {
+          return '#409eff'
+        } else if (level === '中') {
+          return '#e6a23c'
+        } else {
+          return '#f56c6c'
+        }
+      },
+      cellFormat(percentage) {
+        return `${percentage}`
+      },
+      typeFormat(level) {
+        if (level === '低') {
+          return 'primary'
+        } else if (level === '中') {
+          return 'warning'
+        } else {
+          return 'danger'
+        }
+      },
+      // getReportData3() {
+      //   getReportDetail({ checkDate: this.queryParams.checkDate }).then(response => {
+      //     if (response.success) {
+      //       this.uniqueTableData = response.data.unique
+      //       this.integrityTableData = response.data.integrity
+      //       this.accuracyTableData = response.data.accuracy
+      //       this.consistentTableData = response.data.consistent
+      //       this.relevanceTableData = response.data.relevance
+      //       this.timelinessTableData = response.data.timeliness
+      //     }
+      //   })
+      // },
+      exportWord() {
+        const filePath = './static/your-word-document.docx'
+        const link = document.createElement('a')
+        link.href = filePath
+        link.download = '测结果报告.docx'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-card ::v-deep .el-card__body {
+    height: calc(100vh - 230px);
+    overflow-y: auto;
+  }
+  .form-inline {
+    ::v-deep .el-form-item {
+      margin-bottom: 0px;
+    }
+  }
+  ::v-deep .el-badge__content {
+    margin-top: 10px;
+    right: 0px;
+  }
+  ::v-deep .el-table__header th {
+    background-color: #f5f5f5 !important;
+  }
+</style>