diff --git a/angular.json b/angular.json
index 7eb0d98..9c85385 100644
--- a/angular.json
+++ b/angular.json
@@ -31,6 +31,16 @@
                 "glob": "**/*",
                 "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                 "output": "/assets/"
+              },
+              {
+                "glob": "abp.signalr.js",
+                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
+                "output": "/assets/abp"
+              },
+              {
+                "glob": "abp.signalr-client.js",
+                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
+                "output": "/assets/abp"
               }
             ],
             "styles": [
@@ -40,7 +50,9 @@
               "src/theme.less"
             ],
             "scripts": [
-              "./node_modules/swiper/js/swiper.min.js"
+              "./node_modules/swiper/js/swiper.min.js",
+              "node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
+              "node_modules/abp-web-resources/Abp/Framework/scripts/abp.js"
             ]
           },
           "configurations": {
@@ -101,12 +113,25 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              {
+                "glob": "abp.signalr.js",
+                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
+                "output": "/assets/abp"
+              },
+              {
+                "glob": "abp.signalr-client.js",
+                "input": "node_modules/abp-web-resources/Abp/Framework/scripts/libs",
+                "output": "/assets/abp"
+              }
             ],
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/@aspnet/signalr/dist/browser/signalr.min.js",
+              "node_modules/abp-web-resources/Abp/Framework/scripts/abp.js"
+            ]
           }
         },
         "lint": {
diff --git a/package-lock.json b/package-lock.json
index 0732f81..1382c9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -479,6 +479,16 @@
         "@ant-design/colors": "^3.1.0"
       }
     },
+    "@aspnet/signalr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.nlark.com/@aspnet/signalr/download/@aspnet/signalr-1.1.4.tgz",
+      "integrity": "sha1-QXz4CPQHSorsRdJ/A8S4352Wuws=",
+      "requires": {
+        "eventsource": "^1.0.7",
+        "request": "^2.88.0",
+        "ws": "^6.0.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.5.5",
       "resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.5.5.tgz",
@@ -4224,9 +4234,9 @@
       }
     },
     "@types/bytebuffer": {
-      "version": "5.0.40",
-      "resolved": "https://registry.npm.taobao.org/@types/bytebuffer/download/@types/bytebuffer-5.0.40.tgz",
-      "integrity": "sha1-1vqsQNz7Cc2FbNxMAdNpC6U20+4=",
+      "version": "5.0.42",
+      "resolved": "https://registry.npmmirror.com/@types/bytebuffer/download/@types/bytebuffer-5.0.42.tgz",
+      "integrity": "sha1-HGAqd5QtNMXAh5rXXFjV2MB9+zs=",
       "requires": {
         "@types/long": "*",
         "@types/node": "*"
@@ -4570,6 +4580,26 @@
         "through": ">=2.2.7 <3"
       }
     },
+    "abp-ng2-module": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmmirror.com/abp-ng2-module/download/abp-ng2-module-6.4.0.tgz",
+      "integrity": "sha1-uksbvh4YcXACBRkB9iTLCtP3Li4=",
+      "requires": {
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.3.1.tgz",
+          "integrity": "sha1-6KM1rdXOrlGqJh0ypJAVjvBC7wE="
+        }
+      }
+    },
+    "abp-web-resources": {
+      "version": "5.4.0",
+      "resolved": "https://registry.nlark.com/abp-web-resources/download/abp-web-resources-5.4.0.tgz",
+      "integrity": "sha1-6gnxcC2lImm2MCAlfc/I/nJsK2E="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npm.taobao.org/accepts/download/accepts-1.3.7.tgz",
@@ -4630,7 +4660,6 @@
       "version": "6.10.2",
       "resolved": "https://registry.npm.taobao.org/ajv/download/ajv-6.10.2.tgz",
       "integrity": "sha1-086gTWsBeyiUrWkED+yLYj60vVI=",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^2.0.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4845,7 +4874,7 @@
     },
     "ascli": {
       "version": "1.0.1",
-      "resolved": "https://registry.npm.taobao.org/ascli/download/ascli-1.0.1.tgz",
+      "resolved": "https://registry.nlark.com/ascli/download/ascli-1.0.1.tgz",
       "integrity": "sha1-vPpZdKYvGOgcq660lzKrSoj5Brw=",
       "requires": {
         "colour": "~0.7.1",
@@ -4856,7 +4885,6 @@
       "version": "0.2.4",
       "resolved": "https://registry.npm.taobao.org/asn1/download/asn1-0.2.4.tgz",
       "integrity": "sha1-jSR136tVO7M+d7VOWeiAu4ziMTY=",
-      "dev": true,
       "requires": {
         "safer-buffer": "~2.1.0"
       }
@@ -4902,8 +4930,7 @@
     "assert-plus": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/assert-plus/download/assert-plus-1.0.0.tgz",
-      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-      "dev": true
+      "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
     "assign-symbols": {
       "version": "1.0.0",
@@ -4935,14 +4962,12 @@
     "async-limiter": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz?cache=0&sync_timestamp=1574271725892&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-limiter%2Fdownload%2Fasync-limiter-1.0.1.tgz",
-      "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
-      "dev": true
+      "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0="
     },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -4968,14 +4993,12 @@
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npm.taobao.org/aws-sign2/download/aws-sign2-0.7.0.tgz",
-      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=",
-      "dev": true
+      "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg="
     },
     "aws4": {
       "version": "1.9.0",
       "resolved": "https://registry.npm.taobao.org/aws4/download/aws4-1.9.0.tgz?cache=0&sync_timestamp=1574808901079&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.9.0.tgz",
-      "integrity": "sha1-JDkOatYThrCnRyZXVNKhchnehiw=",
-      "dev": true
+      "integrity": "sha1-JDkOatYThrCnRyZXVNKhchnehiw="
     },
     "axobject-query": {
       "version": "2.0.2",
@@ -5164,7 +5187,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/bcrypt-pbkdf/download/bcrypt-pbkdf-1.0.2.tgz",
       "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=",
-      "dev": true,
       "requires": {
         "tweetnacl": "^0.14.3"
       }
@@ -5494,7 +5516,7 @@
       "dependencies": {
         "long": {
           "version": "3.2.0",
-          "resolved": "https://registry.npm.taobao.org/long/download/long-3.2.0.tgz",
+          "resolved": "https://registry.npmmirror.com/long/download/long-3.2.0.tgz?cache=0&sync_timestamp=1635674102680&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Flong%2Fdownload%2Flong-3.2.0.tgz",
           "integrity": "sha1-2CG3E4yhy1gcFymQ7xTbIAtcR0s="
         }
       }
@@ -5616,8 +5638,7 @@
     "caseless": {
       "version": "0.12.0",
       "resolved": "https://registry.npm.taobao.org/caseless/download/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw="
     },
     "cesium": {
       "version": "1.66.0",
@@ -5915,14 +5936,13 @@
     },
     "colour": {
       "version": "0.7.1",
-      "resolved": "https://registry.npm.taobao.org/colour/download/colour-0.7.1.tgz",
+      "resolved": "https://registry.nlark.com/colour/download/colour-0.7.1.tgz",
       "integrity": "sha1-nLFpkX7F0SwHNtPoaFdG3xyt93g="
     },
     "combined-stream": {
       "version": "1.0.8",
       "resolved": "https://registry.npm.taobao.org/combined-stream/download/combined-stream-1.0.8.tgz",
       "integrity": "sha1-w9RaizT9cwYxoRCoolIGgrMdWn8=",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -6251,8 +6271,7 @@
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
     },
     "cosmiconfig": {
       "version": "5.2.1",
@@ -6660,7 +6679,6 @@
       "version": "1.14.1",
       "resolved": "https://registry.npm.taobao.org/dashdash/download/dashdash-1.14.1.tgz",
       "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -6847,8 +6865,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/delayed-stream/download/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "density-clustering": {
       "version": "1.3.0",
@@ -7099,7 +7116,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/ecc-jsbn/download/ecc-jsbn-0.1.2.tgz",
       "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=",
-      "dev": true,
       "requires": {
         "jsbn": "~0.1.0",
         "safer-buffer": "^2.1.0"
@@ -7455,7 +7471,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npm.taobao.org/eventsource/download/eventsource-1.0.7.tgz",
       "integrity": "sha1-j7xyyT/NNAiAkLwKTmT0tc7m2NA=",
-      "dev": true,
       "requires": {
         "original": "^1.0.0"
       }
@@ -7611,8 +7626,7 @@
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npm.taobao.org/extend/download/extend-3.0.2.tgz",
-      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo=",
-      "dev": true
+      "integrity": "sha1-+LETa0Bx+9jrFAr/hYsQGewpFfo="
     },
     "extend-shallow": {
       "version": "3.0.2",
@@ -7714,20 +7728,17 @@
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npm.taobao.org/extsprintf/download/extsprintf-1.3.0.tgz",
-      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
-      "dev": true
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-2.0.1.tgz",
-      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
-      "dev": true
+      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/fast-json-stable-stringify/download/fast-json-stable-stringify-2.0.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-json-stable-stringify%2Fdownload%2Ffast-json-stable-stringify-2.0.0.tgz",
-      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=",
-      "dev": true
+      "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -7984,14 +7995,12 @@
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npm.taobao.org/forever-agent/download/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
     },
     "form-data": {
       "version": "2.3.3",
       "resolved": "https://registry.npm.taobao.org/form-data/download/form-data-2.3.3.tgz",
       "integrity": "sha1-3M5SwF9kTymManq5Nr1yTO/786Y=",
-      "dev": true,
       "requires": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.6",
@@ -8142,7 +8151,6 @@
       "version": "0.1.7",
       "resolved": "https://registry.npm.taobao.org/getpass/download/getpass-0.1.7.tgz",
       "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0"
       }
@@ -8218,7 +8226,7 @@
     },
     "grpc": {
       "version": "1.24.2",
-      "resolved": "https://registry.npm.taobao.org/grpc/download/grpc-1.24.2.tgz",
+      "resolved": "https://registry.npmmirror.com/grpc/download/grpc-1.24.2.tgz",
       "integrity": "sha1-dtBHv6ewW2B8u+OruZBl3O/gwJk=",
       "requires": {
         "@types/bytebuffer": "^5.0.40",
@@ -8263,7 +8271,7 @@
         },
         "camelcase": {
           "version": "2.1.1",
-          "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-2.1.1.tgz",
+          "resolved": "https://registry.npmmirror.com/camelcase/download/camelcase-2.1.1.tgz?cache=0&sync_timestamp=1636945122112&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fcamelcase%2Fdownload%2Fcamelcase-2.1.1.tgz",
           "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
         },
         "chownr": {
@@ -8272,7 +8280,7 @@
         },
         "cliui": {
           "version": "3.2.0",
-          "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-3.2.0.tgz?cache=0&sync_timestamp=1573943458671&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-3.2.0.tgz",
+          "resolved": "https://registry.nlark.com/cliui/download/cliui-3.2.0.tgz",
           "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
           "requires": {
             "string-width": "^1.0.1",
@@ -8388,7 +8396,7 @@
         },
         "invert-kv": {
           "version": "1.0.0",
-          "resolved": "https://registry.npm.taobao.org/invert-kv/download/invert-kv-1.0.0.tgz",
+          "resolved": "https://registry.nlark.com/invert-kv/download/invert-kv-1.0.0.tgz?cache=0&sync_timestamp=1630996775723&other_urls=https%3A%2F%2Fregistry.nlark.com%2Finvert-kv%2Fdownload%2Finvert-kv-1.0.0.tgz",
           "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
         },
         "is-fullwidth-code-point": {
@@ -8529,7 +8537,7 @@
         },
         "os-locale": {
           "version": "1.4.0",
-          "resolved": "https://registry.npm.taobao.org/os-locale/download/os-locale-1.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fos-locale%2Fdownload%2Fos-locale-1.4.0.tgz",
+          "resolved": "https://registry.npmmirror.com/os-locale/download/os-locale-1.4.0.tgz?cache=0&sync_timestamp=1633618260196&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fos-locale%2Fdownload%2Fos-locale-1.4.0.tgz",
           "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
           "requires": {
             "lcid": "^1.0.0"
@@ -8557,7 +8565,7 @@
         },
         "protobufjs": {
           "version": "5.0.3",
-          "resolved": "https://registry.npm.taobao.org/protobufjs/download/protobufjs-5.0.3.tgz",
+          "resolved": "https://registry.nlark.com/protobufjs/download/protobufjs-5.0.3.tgz",
           "integrity": "sha1-5N/p+2fJCyYw0VhoJJvMSWFGehc=",
           "requires": {
             "ascli": "~1",
@@ -8676,9 +8684,9 @@
           "bundled": true
         },
         "y18n": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-3.2.1.tgz",
-          "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+          "version": "3.2.2",
+          "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-3.2.2.tgz?cache=0&sync_timestamp=1617822642544&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fy18n%2Fdownload%2Fy18n-3.2.2.tgz",
+          "integrity": "sha1-hckBvWRwznH8S7cjrSCbcPfyhpY="
         },
         "yallist": {
           "version": "3.1.1",
@@ -8686,7 +8694,7 @@
         },
         "yargs": {
           "version": "3.32.0",
-          "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-3.32.0.tgz?cache=0&sync_timestamp=1577940861093&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fyargs%2Fdownload%2Fyargs-3.32.0.tgz",
+          "resolved": "https://registry.npmmirror.com/yargs/download/yargs-3.32.0.tgz",
           "integrity": "sha1-AwiOnr+edWtpdRYR0qXvWRSCyZU=",
           "requires": {
             "camelcase": "^2.0.1",
@@ -8729,14 +8737,12 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npm.taobao.org/har-schema/download/har-schema-2.0.0.tgz",
-      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=",
-      "dev": true
+      "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI="
     },
     "har-validator": {
       "version": "5.1.3",
       "resolved": "https://registry.npm.taobao.org/har-validator/download/har-validator-5.1.3.tgz",
       "integrity": "sha1-HvievT5JllV2de7ZiTEQ3DUPoIA=",
-      "dev": true,
       "requires": {
         "ajv": "^6.5.5",
         "har-schema": "^2.0.0"
@@ -9019,7 +9025,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/http-signature/download/http-signature-1.2.0.tgz?cache=0&sync_timestamp=1572997209501&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhttp-signature%2Fdownload%2Fhttp-signature-1.2.0.tgz",
       "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "jsprim": "^1.2.2",
@@ -9582,8 +9587,7 @@
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/is-typedarray/download/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
     },
     "is-windows": {
       "version": "1.0.2",
@@ -9641,8 +9645,7 @@
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npm.taobao.org/isstream/download/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
     "istanbul-api": {
       "version": "2.1.6",
@@ -9873,8 +9876,7 @@
     "jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npm.taobao.org/jsbn/download/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM="
     },
     "jsesc": {
       "version": "2.5.2",
@@ -9891,20 +9893,17 @@
     "json-schema": {
       "version": "0.2.3",
       "resolved": "https://registry.npm.taobao.org/json-schema/download/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
     },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npm.taobao.org/json-schema-traverse/download/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA=",
-      "dev": true
+      "integrity": "sha1-afaofZUTq4u4/mO9sJecRI5oRmA="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
       "resolved": "https://registry.npm.taobao.org/json-stringify-safe/download/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
     "json3": {
       "version": "3.3.3",
@@ -9940,7 +9939,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npm.taobao.org/jsprim/download/jsprim-1.4.1.tgz",
       "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
-      "dev": true,
       "requires": {
         "assert-plus": "1.0.0",
         "extsprintf": "1.3.0",
@@ -10877,7 +10875,7 @@
     },
     "lodash.clone": {
       "version": "4.5.0",
-      "resolved": "https://registry.npm.taobao.org/lodash.clone/download/lodash.clone-4.5.0.tgz",
+      "resolved": "https://registry.nlark.com/lodash.clone/download/lodash.clone-4.5.0.tgz",
       "integrity": "sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y="
     },
     "lodash.clonedeep": {
@@ -11276,14 +11274,12 @@
     "mime-db": {
       "version": "1.42.0",
       "resolved": "https://registry.npm.taobao.org/mime-db/download/mime-db-1.42.0.tgz",
-      "integrity": "sha1-PiUpB7THrbkGWXtLZWNics+ee6w=",
-      "dev": true
+      "integrity": "sha1-PiUpB7THrbkGWXtLZWNics+ee6w="
     },
     "mime-types": {
       "version": "2.1.25",
       "resolved": "https://registry.npm.taobao.org/mime-types/download/mime-types-2.1.25.tgz?cache=0&sync_timestamp=1573568362177&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmime-types%2Fdownload%2Fmime-types-2.1.25.tgz",
       "integrity": "sha1-OXctRmIfk+KoCoVsU7hqYhVqZDc=",
-      "dev": true,
       "requires": {
         "mime-db": "1.42.0"
       }
@@ -11862,8 +11858,7 @@
     "oauth-sign": {
       "version": "0.9.0",
       "resolved": "https://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.9.0.tgz",
-      "integrity": "sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU=",
-      "dev": true
+      "integrity": "sha1-R6ewFrqmi1+g7PPe4IqFxnmsZFU="
     },
     "object-assign": {
       "version": "4.1.1",
@@ -12058,7 +12053,7 @@
     },
     "optjs": {
       "version": "3.2.2",
-      "resolved": "https://registry.npm.taobao.org/optjs/download/optjs-3.2.2.tgz",
+      "resolved": "https://registry.nlark.com/optjs/download/optjs-3.2.2.tgz",
       "integrity": "sha1-aabOicRCpEQDFBrS+bNwvVu29O4="
     },
     "ora": {
@@ -12097,7 +12092,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/original/download/original-1.0.2.tgz",
       "integrity": "sha1-5EKmHP/hxf0gpl8yYcJmY7MD8l8=",
-      "dev": true,
       "requires": {
         "url-parse": "^1.4.3"
       }
@@ -12457,8 +12451,7 @@
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/performance-now/download/performance-now-2.1.0.tgz",
-      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
       "version": "2.2.1",
@@ -13374,8 +13367,7 @@
     "psl": {
       "version": "1.7.0",
       "resolved": "https://registry.npm.taobao.org/psl/download/psl-1.7.0.tgz",
-      "integrity": "sha1-8cTEeo75cWfepda79IFtc26ISjw=",
-      "dev": true
+      "integrity": "sha1-8cTEeo75cWfepda79IFtc26ISjw="
     },
     "public-encrypt": {
       "version": "4.0.3",
@@ -13427,8 +13419,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-2.1.1.tgz",
-      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew=",
-      "dev": true
+      "integrity": "sha1-tYsBCsQMIsVldhbI0sLALHv0eew="
     },
     "q": {
       "version": "1.4.1",
@@ -13445,8 +13436,7 @@
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
-      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
-      "dev": true
+      "integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY="
     },
     "query-string": {
       "version": "4.3.4",
@@ -13473,8 +13463,7 @@
     "querystringify": {
       "version": "2.1.1",
       "resolved": "https://registry.npm.taobao.org/querystringify/download/querystringify-2.1.1.tgz",
-      "integrity": "sha1-YOWl/WSn+L+k0qsu1v30yFutFU4=",
-      "dev": true
+      "integrity": "sha1-YOWl/WSn+L+k0qsu1v30yFutFU4="
     },
     "quickselect": {
       "version": "2.0.0",
@@ -13746,7 +13735,6 @@
       "version": "2.88.0",
       "resolved": "https://registry.npm.taobao.org/request/download/request-2.88.0.tgz",
       "integrity": "sha1-nC/KT301tZLv5Xx/ClXoEFIST+8=",
-      "dev": true,
       "requires": {
         "aws-sign2": "~0.7.0",
         "aws4": "^1.8.0",
@@ -13785,8 +13773,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resize-observer-polyfill": {
       "version": "1.5.1",
@@ -14846,7 +14833,6 @@
       "version": "1.16.1",
       "resolved": "https://registry.npm.taobao.org/sshpk/download/sshpk-1.16.1.tgz",
       "integrity": "sha1-+2YcC+8ps520B2nuOfpwCT1vaHc=",
-      "dev": true,
       "requires": {
         "asn1": "~0.2.3",
         "assert-plus": "^1.0.0",
@@ -15516,7 +15502,6 @@
       "version": "2.4.3",
       "resolved": "https://registry.npm.taobao.org/tough-cookie/download/tough-cookie-2.4.3.tgz",
       "integrity": "sha1-U/Nto/R3g7CSWvoG/587FlKA94E=",
-      "dev": true,
       "requires": {
         "psl": "^1.1.24",
         "punycode": "^1.4.1"
@@ -15525,8 +15510,7 @@
         "punycode": {
           "version": "1.4.1",
           "resolved": "https://registry.npm.taobao.org/punycode/download/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
         }
       }
     },
@@ -15605,7 +15589,6 @@
       "version": "0.6.0",
       "resolved": "https://registry.npm.taobao.org/tunnel-agent/download/tunnel-agent-0.6.0.tgz",
       "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
       "requires": {
         "safe-buffer": "^5.0.1"
       }
@@ -15618,8 +15601,7 @@
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npm.taobao.org/tweetnacl/download/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
     },
     "two-product": {
       "version": "1.0.2",
@@ -15850,7 +15832,6 @@
       "version": "4.2.2",
       "resolved": "https://registry.npm.taobao.org/uri-js/download/uri-js-4.2.2.tgz",
       "integrity": "sha1-lMVA4f93KVbiKZUHwBCupsiDjrA=",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
@@ -15883,7 +15864,6 @@
       "version": "1.4.7",
       "resolved": "https://registry.npm.taobao.org/url-parse/download/url-parse-1.4.7.tgz",
       "integrity": "sha1-qKg1NejACjFuQDpdtKwbm4U64ng=",
-      "dev": true,
       "requires": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -15997,8 +15977,7 @@
     "uuid": {
       "version": "3.3.3",
       "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.3.3.tgz",
-      "integrity": "sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=",
-      "dev": true
+      "integrity": "sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
@@ -16035,7 +16014,6 @@
       "version": "1.10.0",
       "resolved": "https://registry.npm.taobao.org/verror/download/verror-1.10.0.tgz",
       "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
-      "dev": true,
       "requires": {
         "assert-plus": "^1.0.0",
         "core-util-is": "1.0.2",
@@ -17849,7 +17827,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npm.taobao.org/ws/download/ws-6.2.1.tgz",
       "integrity": "sha1-RC/fCkftZPWbal2P8TD0dI7VJPs=",
-      "dev": true,
       "requires": {
         "async-limiter": "~1.0.0"
       }
diff --git a/package.json b/package.json
index 0eef8fd..bdebe94 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@angular/platform-browser": "~9.0.0",
     "@angular/platform-browser-dynamic": "~9.0.0",
     "@angular/router": "~9.0.0",
+    "@aspnet/signalr": "^1.1.4",
     "@babylonjs/core": "^4.2.0",
     "@babylonjs/gui": "^4.2.0",
     "@babylonjs/inspector": "^4.2.0",
@@ -31,6 +32,8 @@
     "@types/earcut": "^2.1.1",
     "@types/react-dom": "^17.0.10",
     "@types/swiper": "^5.2.1",
+    "abp-ng2-module": "^6.4.0",
+    "abp-web-resources": "^5.4.0",
     "angular-calendar": "^0.28.2",
     "bson-objectid": "^1.3.1",
     "cesium": "^1.64.0",
@@ -39,6 +42,7 @@
     "earcut": "^2.2.3",
     "echarts": "^4.9.0",
     "firebase": "^7.6.2",
+    "grpc": "^1.24.2",
     "install": "^0.13.0",
     "js-base64": "^3.7.2",
     "linqjs": "^1.0.2",
diff --git a/proxy.config.json b/proxy.config.json
index fc43b3f..c51ed6d 100644
--- a/proxy.config.json
+++ b/proxy.config.json
@@ -3,5 +3,11 @@
       "target": "http://39.106.78.171:8906",
       "secure": false,
       "changeOrigin": true
-    }
+    },
+    "/signalr": {
+      "target": "http://39.106.78.171:8906",
+      "secure": false,
+      "ws": true,
+      "logLevel": "debug"
+  }
 }
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 16b76c5..33e9d51 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -6,6 +6,10 @@ import { NavChangeService } from 'src/app/service/navChange.service';
 import { CacheTokenService } from '../../service/cache-token.service' //引入服务
 import { CookieService } from 'ngx-cookie-service';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { SignalRAspNetCoreHelper } from '../../../shared/helpers/SignalRAspNetCoreHelper';
+
+
+
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
@@ -83,6 +87,12 @@ export class HomeComponent implements OnInit {
       this.surname = JSON.parse(sessionStorage.getItem('userdata')).name
       this.userName = JSON.parse(sessionStorage.getItem('userdata')).userName
     }
+
+    SignalRAspNetCoreHelper.initSignalR();
+    abp.event.on('abp.notifications.received', function (userNotification) {
+      console.log('abp.notifications.received成功收到了哈哈哈', userNotification);
+    });
+
   }
 
 
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index 590ab74..1fc96cf 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -107,7 +107,7 @@ export class LoginComponent implements OnInit {
         sessionStorage.setItem("token", data.result.accessToken);
         this.cookieService.set("token", data.result.accessToken, null, '/');
         this.cookieService.set("refreshToken", data.result.encryptedAccessToken, null, '/');
-        this.encryptedAccessToken = data.result.encryptedAccessToken
+        sessionStorage.setItem("encryptedAccessToken",data.result.encryptedAccessToken);
         console.log('token', data)
         this.http.get('/api/services/app/Session/GetCurrentLoginInformations').subscribe((data: any) => {
           sessionStorage.setItem('userdata', JSON.stringify(data.result.user))
@@ -131,56 +131,9 @@ export class LoginComponent implements OnInit {
           }
           this.message.create('success', `登陆成功`);
 
-          function loadScript(url, callback) {
-            var s: any = document.createElement('script');
-            s.type = 'text/javascript';
-            if (s.readyState) {
-              s.onreadystatechange = function () {  //兼容IE
-                if (s.readyState == 'complete' || s.readyState == 'loaded') {
-                  callback();
-                }
-              }
-            } else {
-              s.onload = function () {  //safari chrome opera firefox
-                callback();
-              }
-            }
-
-            s.src = url;
-            document.head.appendChild(s);
-          }
+          
           let _this = this;
-          loadScript('./assets/js/abp.signalr-client.js', () => {
-            abp.signalr = {
-              autoConnect: true,
-              connect: undefined,
-              hubs: undefined,
-              qs: "enc_auth_token" + "=" + encodeURIComponent(_this.encryptedAccessToken),
-              remoteServiceBaseUrl: "http://39.106.78.171:8906",
-              url: '/signalr'
-            };
-
-            //手动实现hub
-            //this.hubConnection = new signalR.HubConnectionBuilder()
-            //    .withUrl('/signalr-violation',
-            //        {
-            //            accessTokenFactory: ()=>this.token
-            //        }
-            //    )
-            //    .build();
-            ////服务器回调方法
-            //this.hubConnection.on('SendViolation', (data) => {
-            //    console.log("SendViolation", data);
-            //    _this.messages.push("SendViolation:"+JSON.stringify(data));
-            //});
-            //this.hubConnection.start();
-
-            //abp封装的hub
-            abp.event.on('abp.notifications.received', function (userNotification) {
-              _this.messages.push("abp.notifications.received:" + JSON.stringify(userNotification));
-              console.log('abp.notifications.received成功收到了哈哈哈', userNotification);
-            });
-          })
+          
 
         }, err => {
           this.isLoading = false;
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
index 4cb90ea..eb1904f 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
@@ -31,7 +31,7 @@
             </div>
         </div>
         <div style="width: 100%;height: 100%;" *ngIf="data.type == 0 && selectedType == 'video'" class="vediobox">
-            <video  controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
+            <video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
         </div>
         <div *ngIf="data.type != 0" class="oilbox">
             <div class="leftbox">
@@ -40,38 +40,161 @@
                         事前准备
                     </div>
                     <div class="content">
-
+                        <div class="imglist1">
+                            <div class="imgbox">
+                                <div class="img">
+                                    <img src="../../../../assets/images/bgImg.png" alt="">
+                                </div>
+                                <span class="name">油罐车朝向检察</span>
+                            </div>
+                            <div class="imgbox">
+                                <div class="img">
+                                    <img src="../../../../assets/images/bgImg.png" alt="">
+                                </div>
+                                <span class="name">卸油效率检查</span>
+                            </div>
+                            <div class="imgbox">
+                                <div class="img">
+                                    <img src="../../../../assets/images/bgImg.png" alt="">
+                                </div>
+                                <span class="name">设置隔离检查</span>
+                            </div>
+                            <div class="imgbox">
+                                <div class="img">
+                                    <img src="../../../../assets/images/bgImg.png" alt="">
+                                </div>
+                                <span class="name">轮胎固定检察</span>
+                            </div>
+                            <div class="imgbox">
+                                <div class="img">
+                                    <img src="../../../../assets/images/bgImg.png" alt="">
+                                </div>
+                                <span class="name">放置灭火器检察</span>
+                            </div>
+                        </div>
+                        <div class="line">
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                            <div></div>
+                        </div>
+                        <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
+                        <div class="imglist2">
+                            <div class="imgbox">
+                                <div class="img">
+                                    <img src="../../../../assets/images/bgImg.png" alt="">
+                                </div>
+                                <span class="name">静电接地检查15分钟</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
+
                 <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
                 <div class="leftbottom">
                     <div class="title">
                         事中操作
                     </div>
                     <div class="content">
+                        <div class="colimglist">
+                            <div class="colimglist1">
+                                <div class="imgbox">
+                                    <div class="img">
+                                        <img src="../../../../assets/images/bgImg.png" alt="">
+                                    </div>
+                                    <span class="name">卸油车取样</span>
+                                </div>
+                                <div class="imgbox" style="margin-top: 12px;">
+                                    <div class="img">
+                                        <img src="../../../../assets/images/bgImg.png" alt="">
+                                    </div>
+                                    <span class="name">连接卸油管</span>
+                                </div>
+                            </div>
+                            <div class="colline">
 
+                            </div>
+                        </div>
+                        <img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
+                        <div class="imgbox">
+                            <div class="img">
+                                <img src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                            <span class="name">1.第三方确认检查</span>
+                        </div>
+                        <img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
+                        <div class="imgbox">
+                            <div class="img">
+                                <img src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                            <span class="name">2.拆除卸油管</span>
+                        </div>
+                        <img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
+                        <div class="imgbox">
+                            <div class="img">
+                                <img src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                            <span class="name">3.作业现场清理</span>
+                        </div>
+                        <img style="height: 42px;" src="../../../../assets/images/right3.png" alt="">
+                        <div class="imgbox">
+                            <div class="img">
+                                <img src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                            <span class="name">车辆出场</span>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="rightbox">
                 <div class="righttop">
                     <div class="imgbox">
-                        <div class="img">
-                            <img src="" alt="">
+                        <div class="img selectedimg" >
+                            <img [src]="'' ? '' : '../../../../assets/images/nopng.png'" alt="">
                         </div>
                         <span class="name">车辆进场</span>
                     </div>
                 </div>
                 <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
                 <div class="rightbottom">
-                    <div class="title">
+                    <div class="title" style="text-align: center;">
                         卸油过程全程监测
                     </div>
                     <div class="content">
-
+                        <div class="imgbox">
+                            <span class="name">卸油全程监卸</span>
+                            <div class="img errimg">
+                                <img src="../../../../assets/images/bgImg.png" alt="">
+                                <img class="err" src="../../../../assets/images/err.png" alt="">
+                            </div>
+                        </div>
+                        <div class="imgbox">
+                            <span class="name">卸油员及司押人员服装</span>
+                            <div class="img">
+                                <img (click)="lookImg()" src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                        </div>
+                        <div class="imgbox">
+                            <span class="name">登车防护检查</span>
+                            <div class="img">
+                                <img (click)="lookImg()" src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                        </div>
+                        <div class="imgbox">
+                            <span class="name">油品泄漏检查</span>
+                            <div class="img">
+                                <img src="../../../../assets/images/bgImg.png" alt="">
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <img class="longleft1" src="../../../../assets/images/longleft.png" style="width: 82px;" alt="">
+    <img class="longleft2" src="../../../../assets/images/longleft.png" alt="">
+</div>
+
+<div id="viewerjs" style="display:none">
+
 </div>
\ No newline at end of file
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
index 5ae2ace..ddc01e7 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
@@ -5,6 +5,7 @@
   display: flex;
   flex-direction: column;
   background-image: linear-gradient(#003B6E, #000D21);
+  position: relative;
 }
 
 .titlebox {
@@ -113,6 +114,8 @@
     display: flex;
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
+    padding: 18px 20px;
 
     .title {
       width: 100%;
@@ -132,6 +135,8 @@
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
+      margin-right: 70px;
+
       .lefttop,
       .leftbottom {
         width: 840px;
@@ -147,6 +152,76 @@
           background: #001d3c;
         }
       }
+
+      .lefttop {
+
+        .content {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          align-items: center;
+
+          .imglist1 {
+            width: 100%;
+            display: flex;
+            justify-content: space-around;
+          }
+
+          .line {
+            width: 80%;
+            display: flex;
+            margin-top: 6px;
+
+            div {
+              flex: 1;
+              height: 6px;
+              border-right: 1px solid #91CCFF;
+              border-bottom: 1px solid #91CCFF;
+            }
+
+            div:nth-child(1) {
+              border-left: 1px solid #91CCFF;
+            }
+          }
+
+          .imglist2 {
+            margin-top: -6px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+          }
+        }
+      }
+
+      .leftbottom {
+        .content {
+          .colimglist {
+            display: flex;
+            align-items: center;
+
+            .colimglist1 {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+            }
+
+            .colline {
+              height: 120px;
+              width: 6px;
+              border-right: 1px solid #91CCFF;
+              border-top: 1px solid #91CCFF;
+              border-bottom: 1px solid #91CCFF;
+              margin-left: 8px;
+            }
+          }
+
+          display: flex;
+          width: 100%;
+          justify-content: space-around;
+          align-items: center;
+        }
+
+      }
     }
 
     .rightbox {
@@ -155,14 +230,22 @@
       flex-direction: column;
       justify-content: space-between;
       align-items: center;
+
       .rightbottom {
         width: 160px;
         height: 490px;
         display: flex;
         flex-direction: column;
+        border: 1px solid rgba(54, 162, 255, 0.47);
+
         .content {
+          padding: 6px;
           flex: 1;
           background: #001d3c;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          // align-items:;
         }
       }
     }
@@ -176,14 +259,44 @@
       .img {
         width: 96px;
         height: 64px;
-
+        box-shadow: 0px 0px 6px #36A2FF;
+        border: 1px solid #C4E2FC;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
         img {
           width: 100%;
           height: 100%;
+          cursor: pointer;
+        }
+        .err{
+          width: 24px;
+          height: 24px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%,-50%);
+        }
+      }
+
+      .selectedimg {
+        box-shadow: 0px 0px 8px #FF4B65;
+        border: 1px solid #FF4B65;
+        background: #3f213b;
+        img{
+          width: 24px;
+          height: 24px;
         }
       }
+      .errimg{
+        box-shadow: 0px 0px 8px #FF4B65;
+        border: 1px solid #FF4B65;
+      }
 
       .name {
+        margin-top: 3px;
         color: #FFFFFF;
         font-size: 14px;
       }
@@ -191,3 +304,20 @@
     }
   }
 }
+
+
+.longleft1,
+.longleft2 {
+  position: absolute;
+}
+
+.longleft1 {
+  right: 213px;
+  top: 102px;
+}
+
+.longleft2 {
+  right: 250px;
+  bottom: 137px;
+  width: 100px;
+}
diff --git a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
index 6c60adf..7e7a19b 100644
--- a/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
+++ b/src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit,Input } from '@angular/core';
-
+import { Component, OnInit, Input } from '@angular/core';
+import Viewer from 'viewerjs'
 @Component({
   selector: 'app-get-out-of-line-details',
   templateUrl: './get-out-of-line-details.component.html',
@@ -7,13 +7,13 @@ import { Component, OnInit,Input } from '@angular/core';
 })
 export class GetOutOfLineDetailsComponent implements OnInit {
 
-  @Input() data:any
+  @Input() data: any
 
   constructor() { }
 
 
-  imgUrl:string
-  vedioUrl:string
+  imgUrl: string
+  vedioUrl: string
   ngOnInit(): void {
     this.data.type = 1
     this.imgUrl = this.data.violateImage
@@ -21,8 +21,26 @@ export class GetOutOfLineDetailsComponent implements OnInit {
   }
 
 
-  selectedType:string = 'img'
-  contentType(type){
+  selectedType: string = 'img'
+  contentType(type) {
     this.selectedType = type
   }
+  lookImg() {
+    let dom = document.getElementById(`viewerjs`)
+    let pObjs = dom.childNodes;
+    let node = document.createElement("img")
+    node.style.display = "none";
+    node.src = "../../../../assets/images/bgImg.png";
+    node.id = 'img'
+    dom.appendChild(node)
+    setTimeout(() => {
+      let viewer = new Viewer(document.getElementById(`viewerjs`), {
+        hidden: () => {
+          dom.removeChild(pObjs[0]);
+          viewer.destroy();
+        }
+      });
+      node.click();
+    }, 0);
+  }
 }
diff --git a/src/assets/images/err.png b/src/assets/images/err.png
new file mode 100644
index 0000000..22b94df
Binary files /dev/null and b/src/assets/images/err.png differ
diff --git a/src/assets/images/longleft.png b/src/assets/images/longleft.png
new file mode 100644
index 0000000..847e141
Binary files /dev/null and b/src/assets/images/longleft.png differ
diff --git a/src/assets/images/nopng.png b/src/assets/images/nopng.png
new file mode 100644
index 0000000..20296b6
Binary files /dev/null and b/src/assets/images/nopng.png differ
diff --git a/src/shared/helpers/SignalRAspNetCoreHelper.ts b/src/shared/helpers/SignalRAspNetCoreHelper.ts
new file mode 100644
index 0000000..269f3f2
--- /dev/null
+++ b/src/shared/helpers/SignalRAspNetCoreHelper.ts
@@ -0,0 +1,25 @@
+
+export class SignalRAspNetCoreHelper {
+    static initSignalR(callback?: () => void): void {
+        const encryptedAuthToken = sessionStorage.getItem("encryptedAccessToken");
+        let url = "http://39.106.78.171:8906";
+        abp.signalr = {
+            autoConnect: true,
+            connect: undefined,
+            hubs: undefined,
+            qs: "enc_auth_token" + '=' + encodeURIComponent(encryptedAuthToken),
+            remoteServiceBaseUrl: url,
+            startConnection: undefined,
+            url: '/signalr'
+        };
+
+        const script = document.createElement('script');
+        if (callback) {
+            script.onload = () => {
+                callback();
+            };
+        }
+        script.src =  '/assets/js/abp.signalr-client.js';
+        document.head.appendChild(script);
+    }
+}
diff --git a/src/typings.d.ts b/src/typings.d.ts
new file mode 100644
index 0000000..46cf49d
--- /dev/null
+++ b/src/typings.d.ts
@@ -0,0 +1,17 @@
+///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/abp.d.ts"/>
+///<reference path="../node_modules/abp-web-resources/Abp/Framework/scripts/libs/abp.signalr.d.ts"/>
+///<reference path="../node_modules/moment/moment.d.ts"/>
+
+// Typings reference file, see links for more information
+// https://github.com/typings/typings
+// https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html
+
+declare var System: any;
+declare var Push: any;
+
+declare namespace abp {
+  namespace ui {
+    function setBusy(elm?: any, text?: any, delay?: any): void;
+    function clearBusy(elm?: any, delay?: any): void;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index 3919d68..b5f130c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,11 +18,21 @@
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "paths": {
+      "@abp/*": [ "../node_modules/abp-ng2-module/dist/src/*" ],
+      "@app/*": [ "./app/*" ],
+      "@shared/*": [ "./shared/*" ],
+      "@node_modules/*": [ "../node_modules/*" ]
+    }
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     "enableIvy": false
-  }
+  },
+  "include": [
+    "src/**/*.d.ts",
+    "typings.d.ts"
+  ]
 }
diff --git a/yarn.lock b/yarn.lock
index a07d032..3baaeb1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -223,6 +223,15 @@
   resolved "https://registry.npmmirror.com/@angular/router/download/@angular/router-9.0.7.tgz?cache=0&sync_timestamp=1634753064604&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40angular%2Frouter%2Fdownload%2F%40angular%2Frouter-9.0.7.tgz#0296d11a17a6b94c0463c9b166dc4244b8fea5e5"
   integrity sha1-ApbRGhemuUwEY8mxZtxCRLj+peU=
 
+"@aspnet/signalr@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@aspnet/signalr/-/signalr-1.1.4.tgz#417cf808f4074a8aec45d27f03c4b8df9d96bb0b"
+  integrity sha512-Jp9nPc8hmmhbG9OKiHe2fOKskBHfg+3Y9foSKHxjgGtyI743hXjGFv3uFlUg503K9f8Ilu63gQt3fDkLICBRyg==
+  dependencies:
+    eventsource "^1.0.7"
+    request "^2.88.0"
+    ws "^6.0.0"
+
 "@ant-design/colors@^3.1.0":
   version "3.2.2"
   resolved "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.2.2.tgz#5ad43d619e911f3488ebac303d606e66a8423903"