生物安防80%

package-lock.json

@@ -2440,6 +2440,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.nlark.com/babel-eslint/download/babel-eslint-10.1.0.tgz",
@@ -3479,6 +3487,38 @@
         }
       }
     },
+    "compression-webpack-plugin": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/compression-webpack-plugin/-/compression-webpack-plugin-9.0.0.tgz",
+      "integrity": "sha512-V2KmQqaUkErPT+ZcUGHa8zWpIw1oTYaC7wjGewJm053GWAoY04GfU5B/NZ/JSz1eFp9MggMdLQpEHe1TJAQY1A==",
+      "dev": true,
+      "requires": {
+        "schema-utils": "^3.1.0",
+        "serialize-javascript": "^6.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        },
+        "serialize-javascript": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.0.tgz",
+          "integrity": "sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        }
+      }
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npm.taobao.org/concat-map/download/concat-map-0.0.1.tgz",
@@ -3560,6 +3600,15 @@
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=",
       "dev": true
     },
+    "copy-anything": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
+      "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.12.0"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.nlark.com/copy-concurrently/download/copy-concurrently-1.0.5.tgz",
@@ -4502,6 +4551,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.5.tgz",
+      "integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
+      "requires": {
+        "ssr-window": "^2.0.0"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz?cache=0&sync_timestamp=1627591659555&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdomain-browser%2Fdownload%2Fdomain-browser-1.2.0.tgz",
@@ -4596,6 +4653,14 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -5508,8 +5573,7 @@
     "follow-redirects": {
       "version": "1.14.4",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz?cache=0&sync_timestamp=1631622129411&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.4.tgz",
-      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k=",
-      "dev": true
+      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k="
     },
     "for-in": {
       "version": "1.0.2",
@@ -6250,6 +6314,13 @@
       "integrity": "sha1-dQ49tYYgh7RzfrrIIH/9HvJ7Jfw=",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.nlark.com/import-cwd/download/import-cwd-2.1.0.tgz",
@@ -6867,6 +6938,12 @@
         "call-bind": "^1.0.0"
       }
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/is-windows/download/is-windows-1.0.2.tgz",
@@ -7036,6 +7113,12 @@
       "integrity": "sha1-B8BQNKbDSfoG4k+jWqdttFgM5N0=",
       "dev": true
     },
+    "klona": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.4.tgz",
+      "integrity": "sha512-ZRbnvdg/NxqzC7L9Uyqzf4psi1OM4Cuc+sJAkQPjO6XkQIJTNbfK2Rsmbw8fx1p2mkZdp2FZYo2+LwXYY/uwIA==",
+      "dev": true
+    },
     "launch-editor": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/launch-editor/download/launch-editor-2.2.1.tgz",
@@ -7055,6 +7138,73 @@
         "launch-editor": "^2.2.1"
       }
     },
+    "less": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.2.tgz",
+      "integrity": "sha512-EoQp/Et7OSOVu0aJknJOtlXZsnr8XE8KwuzTHOLeVSEx8pVWUICc8Q0VYRHgzyjX78nMEyC/oztWFbgyhtNfDA==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^2.5.2",
+        "parse-node-version": "^1.0.1",
+        "source-map": "~0.6.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "make-dir": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+          "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pify": "^4.0.1",
+            "semver": "^5.6.0"
+          }
+        },
+        "mime": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+          "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+          "dev": true,
+          "optional": true
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true,
+          "optional": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true,
+          "optional": true
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==",
+          "dev": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-10.2.0.tgz",
+      "integrity": "sha512-AV5KHWvCezW27GT90WATaDnfXBv99llDbtaj4bshq6DvAihMdNjaPDcUMa6EXKLRF+P2opFenJp89BXg91XLYg==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4"
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.nlark.com/levn/download/levn-0.3.0.tgz",
@@ -7626,6 +7776,30 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "needle": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
+      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npm.taobao.org/negotiator/download/negotiator-0.6.2.tgz",
@@ -7786,8 +7960,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.nlark.com/object-assign/download/object-assign-4.1.1.tgz?cache=0&sync_timestamp=1618847240432&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fobject-assign%2Fdownload%2Fobject-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -8136,6 +8309,12 @@
         "lines-and-columns": "^1.1.6"
       }
     },
+    "parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true
+    },
     "parse5": {
       "version": "5.1.1",
       "resolved": "https://registry.nlark.com/parse5/download/parse5-5.1.1.tgz",
@@ -10281,6 +10460,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-2.0.0.tgz",
+      "integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.nlark.com/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
@@ -10515,6 +10699,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-5.4.5.tgz",
+      "integrity": "sha512-7QjA0XpdOmiMoClfaZ2lYN6ICHcMm72LXiY+NF4fQLFidigameaofvpjEEiTQuw3xm5eksG5hzkaRsjQX57vtA==",
+      "requires": {
+        "dom7": "^2.1.5",
+        "ssr-window": "^2.0.0"
+      }
+    },
     "table": {
       "version": "5.4.6",
       "resolved": "https://registry.npmmirror.com/table/download/table-5.4.6.tgz?cache=0&sync_timestamp=1633019463271&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Ftable%2Fdownload%2Ftable-5.4.6.tgz",
@@ -11258,6 +11451,31 @@
       "resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz?cache=0&sync_timestamp=1633712555314&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue%2Fdownload%2Fvue-2.6.14.tgz",
       "integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      },
+      "dependencies": {
+        "ssr-window": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+          "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+        },
+        "swiper": {
+          "version": "4.5.1",
+          "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+          "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+          "requires": {
+            "dom7": "^2.1.3",
+            "ssr-window": "^1.0.1"
+          }
+        }
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.11.0",
       "resolved": "https://registry.npmmirror.com/vue-eslint-parser/download/vue-eslint-parser-7.11.0.tgz",
@@ -12243,6 +12461,11 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
     }
   }
 }

package.json

@@ -8,9 +8,13 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.4",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "lib-flexible": "^0.3.2",
+    "swiper": "^5.4.5",
     "vue": "^2.6.11",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },
@@ -21,8 +25,11 @@
     "@vue/cli-plugin-vuex": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
+    "compression-webpack-plugin": "^9.0.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
+    "less": "^4.1.1",
+    "less-loader": "^10.0.1",
     "px2rem-loader": "^0.1.9",
     "vue-template-compiler": "^2.6.11"
   },

src/assets/BioSafety/u1717.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="327px" height="26px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="13" x2="327" y2="13" id="LinearGradient481">
+      <stop id="Stop482" stop-color="#031133" offset="0" />
+      <stop id="Stop483" stop-color="#66ffff" offset="1" />
+    </linearGradient>
+    <mask fill="white" id="clip484">
+      <path d="M 316.213541666667 0.8125  L 0 0.8125  L 0 25.59375  L 316.213541666667 25.59375  L 326.432291666667 14.625  L 316.213541666667 0.8125  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -76 -117 )">
+    <path d="M 316.213541666667 0.8125  L 0 0.8125  L 0 25.59375  L 316.213541666667 25.59375  L 326.432291666667 14.625  L 316.213541666667 0.8125  Z " fill-rule="nonzero" fill="#031032" stroke="none" transform="matrix(1 0 0 1 76 117 )" />
+    <path d="M 316.213541666667 0.8125  L 0 0.8125  L 0 25.59375  L 316.213541666667 25.59375  L 326.432291666667 14.625  L 316.213541666667 0.8125  Z " stroke-width="2" stroke="url(#LinearGradient481)" fill="none" transform="matrix(1 0 0 1 76 117 )" mask="url(#clip484)" />
+  </g>
+</svg>

src/assets/BioSafety/u1718.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="331px" height="26px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="13" x2="331" y2="13" id="LinearGradient485">
+      <stop id="Stop486" stop-color="#66ffff" offset="0" />
+      <stop id="Stop487" stop-color="#031133" offset="0.99" />
+      <stop id="Stop488" stop-color="#031133" offset="1" />
+    </linearGradient>
+    <mask fill="white" id="clip489">
+      <path d="M 10.9184027777778 0.8125  L 331 0.8125  L 331 25.59375  L 10.9184027777778 25.59375  L 0.574652777777794 14.625  L 10.9184027777778 0.8125  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -521 -118 )">
+    <path d="M 10.9184027777778 0.8125  L 331 0.8125  L 331 25.59375  L 10.9184027777778 25.59375  L 0.574652777777794 14.625  L 10.9184027777778 0.8125  Z " fill-rule="nonzero" fill="#031032" stroke="none" transform="matrix(1 0 0 1 521 118 )" />
+    <path d="M 10.9184027777778 0.8125  L 331 0.8125  L 331 25.59375  L 10.9184027777778 25.59375  L 0.574652777777794 14.625  L 10.9184027777778 0.8125  Z " stroke-width="2" stroke="url(#LinearGradient485)" fill="none" transform="matrix(1 0 0 1 521 118 )" mask="url(#clip489)" />
+  </g>
+</svg>

src/assets/BioSafety/u1719.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="119px" height="26px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="13" x2="119" y2="13" id="LinearGradient490">
+      <stop id="Stop491" stop-color="#66ffff" offset="0" />
+      <stop id="Stop492" stop-color="#66ffff" offset="0.21" />
+      <stop id="Stop493" stop-color="#ffffff" offset="0.5" />
+      <stop id="Stop494" stop-color="#66ffff" offset="0.77" />
+      <stop id="Stop495" stop-color="#66ffff" offset="1" />
+    </linearGradient>
+    <mask fill="white" id="clip496">
+      <path d="M 108.106796116505 0.714285714285666  L 8.0873786407767 0.714285714285666  L 0.165048543689349 14.4285714285714  L 8.0873786407767 25.8571428571429  L 109.757281553398 25.8571428571429  L 118.009708737864 14.4285714285714  L 108.106796116505 0.714285714285666  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -403 -118 )">
+    <path d="M 108.106796116505 0.714285714285666  L 8.0873786407767 0.714285714285666  L 0.165048543689349 14.4285714285714  L 8.0873786407767 25.8571428571429  L 109.757281553398 25.8571428571429  L 118.009708737864 14.4285714285714  L 108.106796116505 0.714285714285666  Z " fill-rule="nonzero" fill="#04051a" stroke="none" transform="matrix(1 0 0 1 403 118 )" />
+    <path d="M 108.106796116505 0.714285714285666  L 8.0873786407767 0.714285714285666  L 0.165048543689349 14.4285714285714  L 8.0873786407767 25.8571428571429  L 109.757281553398 25.8571428571429  L 118.009708737864 14.4285714285714  L 108.106796116505 0.714285714285666  Z " stroke-width="2" stroke="url(#LinearGradient490)" fill="none" transform="matrix(1 0 0 1 403 118 )" mask="url(#clip496)" />
+  </g>
+</svg>

src/assets/BioSafety/u1745.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="192px" height="22px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="11" x2="192" y2="11" id="LinearGradient541">
+      <stop id="Stop542" stop-color="#031133" offset="0" />
+      <stop id="Stop543" stop-color="#66ffff" offset="1" />
+    </linearGradient>
+    <mask fill="white" id="clip544">
+      <path d="M 185.666666666667 0.6875  L 0 0.6875  L 0 21.65625  L 185.666666666667 21.65625  L 191.666666666667 12.375  L 185.666666666667 0.6875  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -869 -117 )">
+    <path d="M 185.666666666667 0.6875  L 0 0.6875  L 0 21.65625  L 185.666666666667 21.65625  L 191.666666666667 12.375  L 185.666666666667 0.6875  Z " fill-rule="nonzero" fill="#031032" stroke="none" transform="matrix(1 0 0 1 869 117 )" />
+    <path d="M 185.666666666667 0.6875  L 0 0.6875  L 0 21.65625  L 185.666666666667 21.65625  L 191.666666666667 12.375  L 185.666666666667 0.6875  Z " stroke-width="2" stroke="url(#LinearGradient541)" fill="none" transform="matrix(1 0 0 1 869 117 )" mask="url(#clip544)" />
+  </g>
+</svg>

src/assets/BioSafety/u1746.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="169px" height="22px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="11" x2="169" y2="11" id="LinearGradient545">
+      <stop id="Stop546" stop-color="#66ffff" offset="0" />
+      <stop id="Stop547" stop-color="#031133" offset="0.99" />
+      <stop id="Stop548" stop-color="#031133" offset="1" />
+    </linearGradient>
+    <mask fill="white" id="clip549">
+      <path d="M 5.57465277777779 0.6875  L 169 0.6875  L 169 21.65625  L 5.57465277777779 21.65625  L 0.293402777777786 12.375  L 5.57465277777779 0.6875  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1165 -117 )">
+    <path d="M 5.57465277777779 0.6875  L 169 0.6875  L 169 21.65625  L 5.57465277777779 21.65625  L 0.293402777777786 12.375  L 5.57465277777779 0.6875  Z " fill-rule="nonzero" fill="#031032" stroke="none" transform="matrix(1 0 0 1 1165 117 )" />
+    <path d="M 5.57465277777779 0.6875  L 169 0.6875  L 169 21.65625  L 5.57465277777779 21.65625  L 0.293402777777786 12.375  L 5.57465277777779 0.6875  Z " stroke-width="2" stroke="url(#LinearGradient545)" fill="none" transform="matrix(1 0 0 1 1165 117 )" mask="url(#clip549)" />
+  </g>
+</svg>

src/main.js

@@ -4,8 +4,10 @@ import router from './router'
 import store from './store'
 import 'lib-flexible/flexible'
 import './assets/ttf/font.css';
+import echart from 'echarts';
 
 Vue.config.productionTip = false
+Vue.prototype.$echarts = echart
 
 new Vue({
   router,

src/views/BioSafety/BioSafety.vue

@@ -1,13 +1,354 @@
 <template>
-  <div>生物安全</div>
+  <div class="bioSafety">
+    <div class="bio-flex">
+      <div class="bio-flex-left">
+        <div class="bio-title">
+          <div class="bio-title-left"></div>
+          <div class="bio-title-center">门卫管控</div>
+          <div class="bio-title-right"></div>
+        </div>
+        <div class="bio-video">
+          <div class="kuang"></div>
+        </div>
+        <div class="bio-out">
+          <div class="bio-out-center">
+            <div class="out-img"></div>
+            <div style="color: white; font-size: 16px">
+              <p>违规次数</p>
+              <p style="font-size: 22px; font-weight: 600">27</p>
+            </div>
+          </div>
+          <div class="bio-out-center">
+            <div class="out-img"></div>
+            <div style="color: white; font-size: 16px">
+              <p>违规次数</p>
+              <p style="font-size: 22px; font-weight: 600">27</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bio-flex-center">
+        <div class="bio-title">
+          <div class="bio-title-left-1"></div>
+          <div class="bio-title-center-1">车辆管理</div>
+          <div class="bio-title-right-1"></div>
+        </div>
+        <div class="bio-content flex">
+          <div class="bio-content-left">
+            <div class="box">
+              <div class="circle"></div>
+              <div class="price">
+                <strong class="price-size">15.2</strong>
+                <span>分钟</span>
+              </div>
+              <div class="text">平均洗消时长</div>
+            </div>
+            <div class="box">
+              <div class="circle"></div>
+              <div class="price">
+                <strong class="price-size">15.2</strong>
+                <span>分钟</span>
+              </div>
+              <div class="text">平均熏蒸时长</div>
+            </div>
+          </div>
+          <div class="bio-content-right">
+            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+              <swiper-slide v-for="item in 10" :key="item">
+                <div class="case"></div>
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div>
+        <div class="bio-content">
+          <chart-bar></chart-bar>
+        </div>
+      </div>
+      <div class="bio-flex-center">
+        <div class="bio-title">
+          <div class="bio-title-left-1"></div>
+          <div class="bio-title-center-1">门禁管理</div>
+          <div class="bio-title-right-1"></div>
+        </div>
+        <div class="bio-content flex">
+          <div class="bio-content-left">
+            <div class="box">
+              <div class="circle"></div>
+              <div class="price">
+                <strong class="price-size">15.2</strong>
+                <span>人次</span>
+              </div>
+              <div class="text">今日进入人数</div>
+            </div>
+            <div class="box">
+              <div class="circle"></div>
+              <div class="price">
+                <strong class="price-size">15.2</strong>
+                <span>次</span>
+              </div>
+              <div class="text">今日违规次数</div>
+            </div>
+          </div>
+          <div class="bio-content-right">
+            <swiper style="height: 100%;  margin-top: auto; margin-bottom: auto;" class="swiper" :options="swiperOption">
+              <swiper-slide v-for="item in 10" :key="item">
+                <div class="case"></div>
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div>
+        <div class="bio-content">
+          <chart-bar :data="data1"></chart-bar>
+        </div>
+      </div>
+    </div>
+    <div class="bio-flex-1"></div>
+  </div>
 </template>
 
 <script>
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import 'swiper/css/swiper.css'
+import ChartBar from "@/views/BioSafety/chart/ChartBar";
 export default {
-name: "BioSafety"
+  name: "BioSafety",
+  components: {
+    swiper,
+    swiperSlide,
+    ChartBar
+  },
+  data() {
+    return {
+      swiperOption: {
+        direction: 'vertical',
+        slidesPerView: 3,
+        slidesPerColumn: 1,
+        slidesPerGroup: 3,
+        // spaceBetween: 30,
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false
+        },
+        // pagination: {
+        //   el: '.swiper-pagination',
+        //   clickable: true
+        // }
+      },
+      data1: {
+        id: 1,
+        time: ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00'],
+        data: [12, 13, 10, 13, 90, 23, 21],
+        name: '',
+        unit: '人次'
+      }
+    }
+  }
 }
 </script>
 
 <style scoped>
-
+  p{
+    margin: 0;
+  }
+  .swiper-slide {
+    height: 100px;
+  }
+  .bioSafety {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 20px 0 0 0;
+  }
+  .bio-flex {
+    width: 100%;
+    height: 560px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .bio-flex-left {
+    width: 770px;
+    height: 100%;
+    border: 1px solid rgb(121, 121, 121);
+  }
+  .bio-flex-center {
+    width: 465px;
+    height: 100%;
+    border: 1px solid rgb(121, 121, 121);
+  }
+  .bio-title {
+    width: 100%;
+    height: 26px;
+    display: flex;
+  }
+  .bio-video {
+    width: 100%;
+    height: 440px;
+    box-sizing: border-box;
+    padding: 20px;
+  }
+  .kuang {
+    width: 100%;
+    height: 100%;
+    background: url("../../assets/BioSafety/kuang.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .bio-out {
+    width: 100%;
+    height: calc(100% - 440px - 40px);
+    display: flex;
+    justify-content: space-around;
+  }
+  .bio-out-center {
+    width: 280px;
+    height: 100%;
+    background-color: #26688E;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+  }
+  .out-img {
+    width: 54px;
+    height: 54px;
+    background: url("../../assets/BioSafety/u2500.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+  .bio-title-left {
+    width: 325px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1717.svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .bio-title-left:before {
+    content: '';
+    height: 85%;
+    border: 2px solid #66FFFF;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .bio-title-center {
+    width: 120px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
+    background-size: 100% 100%;
+    line-height: 26px;
+    color: white;
+    font-size: 16px;
+  }
+  .bio-title-right {
+    width: 325px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1718.svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .bio-title-right:after {
+    content: '';
+    height: 85%;
+    border: 2px solid #66FFFF;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .bio-title-left-1 {
+    width: 172.5px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1745.svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .bio-title-left-1:before {
+    content: '';
+    height: 85%;
+    border: 2px solid #66FFFF;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .bio-title-center-1 {
+    width: 120px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1719.svg") no-repeat;
+    background-size: 100% 100%;
+    line-height: 26px;
+    color: white;
+    font-size: 16px;
+  }
+  .bio-title-right-1 {
+    width: 172.5px;
+    height: 26px;
+    background: url("../../assets/BioSafety/u1746.svg") no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+  }
+  .bio-title-right-1:after {
+    content: '';
+    height: 85%;
+    border: 2px solid #66FFFF;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+  .bio-content {
+    width: 100%;
+    height: calc((100% - 26px) / 2);
+  }
+  .flex {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 20px 10px;
+  }
+  .bio-content-left {
+    width: 132px;
+    height: 100%;
+  }
+  .bio-content-right {
+    width: calc(100% - 142px);
+    height: 100%;
+    overflow: hidden;
+  }
+  .box {
+    width: 100%;
+    height: 113.5px;
+    position: relative;
+  }
+  .circle {
+    width: 90px;
+    height: 90px;
+    margin: 0 auto;
+    background: url("../../assets/BioSafety/ciru.png") no-repeat;
+    background-size: 100% 100%;
+    transform: rotate(40deg);
+    position: relative;
+  }
+  .price {
+    width: 100%;
+    text-align: center;
+    color: #00D1E5;
+    position: absolute;
+    top: 35px;
+  }
+  .price-size {
+    font-size: 18px;
+  }
+  .text {
+    width: 100%;
+    text-align: center;
+    color: white;
+  }
+  .case {
+    width: 100%;
+    height: 100%;
+    background: url("../../assets/BioSafety/some.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .bio-flex-1 {
+    width: 100%;
+    height: calc(100% - 580px);
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+  }
 </style>

src/views/BioSafety/chart/ChartBar.vue

@@ -0,0 +1,151 @@
+<template>
+  <div :id="'chartBar-' + data.id" style="width: 100%; height: 100%;"></div>
+</template>
+
+<script>
+export default {
+  name: "ChartBar",
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {
+          id: 0,
+          time: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '测试月'],
+          data: [120, 132, 101, 134, 90, 230, 210, 210, 245, 203, 124, 214, 210],
+          name: '默认',
+          unit: '%'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      myChart: null
+    }
+  },
+  methods: {
+    init() {
+      let max = Math.max(...this.data.data);
+      let max1 = max + 30;
+      // 获取当前数组的数量并push 成新数组
+      let data1 = new Array(this.data.data.length).fill(max1);
+      let options = {
+        // title: {
+        //   text: `用水监测`,
+        //   x: "center",
+        //   y: "top",
+        //   textStyle: {
+        //     fontSize: 16,
+        //     color: "#ffffff",
+        //   },
+        // },
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            // 坐标轴指示器，坐标轴触发有效
+            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+          },
+        },
+        grid: {
+          top: "5%",
+          left: "5%",
+          right: "5%",
+          bottom: "2%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          data: this.data.time,
+          axisLabel: {
+            color: "#fff",
+          },
+          nameTextStyle: {
+            color: "#fff",
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#FFF",
+            },
+          },
+        },
+        yAxis: {
+          splitLine: { show: false },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              type: "solid",
+              color: "#fff", //左边线的颜色
+              width: "2", //坐标线的宽度
+            },
+          },
+          axisLabel: {
+            formatter: `{value}${this.data.unit}`,
+            textStyle: {
+              color: "#fff",
+
+              fontSize: 12,
+            },
+          },
+          nameTextStyle: {
+            fontSize: 12,
+          },
+          // axisLabel: {
+          //   textStyle: {
+          //     color: "#fff",
+          //
+          //     fontSize: 12,
+          //   },
+          // },
+        },
+        series: [
+          {
+            type: "pictorialBar",
+            symbol: "rect",
+            itemStyle: {
+              color: "#0369df",
+              barBorderRadius: 3,
+            },
+            label: {
+              show: true, //开启显示
+              position: "top", //在上方显示
+              textStyle: {
+                //数值样式
+                color: "#fff",
+                fontSize: 14,
+              },
+              formatter: "{c}",
+            },
+            symbolRepeat: true,
+            symbolSize: [20, 3],
+            symbolMargin: 3,
+            data: this.data.data,
+          },
+          {
+            type: "pictorialBar",
+            symbol: "rect",
+            itemStyle: {
+              color: "#022a62",
+              barBorderRadius: 3,
+            },
+            symbolRepeat: true,
+            symbolSize: [20, 3],
+            symbolMargin: 3,
+            z: -10,
+            data: data1,
+          },
+        ],
+      }
+      this.myChart.setOption(options)
+    }
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById('chartBar-' + this.data.id));
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

vue.config.js

@@ -1,15 +1,57 @@
+const CompressionWebpackPlugin = require("compression-webpack-plugin");
+const path = require('path')
+const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
 module.exports = {
-    chainWebpack: config => {
-        config.module
-            .rule('css')
-            .test(/\.css$/)
-            .oneOf('vue')
-            .resourceQuery(/\?vue/)
-            .use('px2rem')
-            .loader('px2rem-loader')
-            .options({
-                remUnit: 192   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10
-            })
-            .end()
+  publicPath: './', // 相对于 HTML 页面（目录相同）
+  chainWebpack: config => {
+    config.module
+      .rule('css')
+      .test(/\.css$/)
+      .oneOf('vue')
+      .resourceQuery(/\?vue/)
+      .use('px2rem')
+      .loader('px2rem-loader')
+      .options({
+        remUnit: 192   //代表的是 1rem = ？px  这里假设设计稿是 1920px ，那么这里的比例就是 1/10
+      })
+      .end()
+  },
+  configureWebpack: config => {
+    if(process.env.NODE_ENV === 'production') {
+      config.plugins.push(
+        new CompressionWebpackPlugin({
+          /* [file]被替换为原始资产文件名。
+             [path]替换为原始资产的路径。
+             [dir]替换为原始资产的目录。
+             [name]被替换为原始资产的文件名。
+             [ext]替换为原始资产的扩展名。
+             [query]被查询替换。*/
+          filename: '[path].gz[query]',
+          //压缩算法
+          algorithm: 'gzip',
+          //匹配文件
+          test: productionGzipExtensions,
+          //压缩超过此大小的文件,以字节为单位
+          threshold: 10240,
+          minRatio: 0.8,
+          //删除原始文件只保留压缩后的文件
+          //deleteOriginalAssets: false
+        })
+      )
     }
+    config.resolve.alias = {
+      '@': path.resolve(__dirname, 'src'),
+      'components': '@/components',
+      'views': '@/views',
+      'assets': '@/assets',
+      'utils': '@/utils'
+    }
+  },
+  css: {
+    loaderOptions: {
+      less: {
+        javascriptEnabled: true,
+      }
+    }
+  },
 }