From 29cb0b5b6db39f426ea0ea792d08f325cff395fc Mon Sep 17 00:00:00 2001
From: zpzgiser <45806316+zpzgiser@users.noreply.github.com>
Date: Sat, 17 Jul 2021 01:45:51 +0800
Subject: [PATCH] 首页内容部分更改，加保安单位经营情况研判模块页面
---
package-lock.json | 23
public/img/bajgxt/u235.png | 0
public/img/bajgxt/u4.png | 0
public/img/bajgxt/u256.png | 0
src/views/securityUnitOperation/economicAnalysis.vue | 7
public/img/bajgxt/u230.png | 0
src/views/home/index.scss | 655 ++++++++++--------
src/views/securityUnitOperation/securityEchart.js | 215 ++++++
public/img/bajgxt/u251.png | 0
src/views/home/index.vue | 876 +++++++++++++------------
package.json | 7
src/views/home/indexEchart.js | 10
src/views/securityUnitOperation/economicTable.vue | 7
src/views/securityUnitOperation/operationAnalysis.vue | 208 +++++
src/views/securityUnitOperation/operationTable.vue | 77 ++
15 files changed, 1,344 insertions(+), 741 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 9834b0f..8d9d4bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1012,7 +1012,7 @@
},
"@mapbox/jsonlint-lines-primitives": {
"version": "2.0.2",
- "resolved": "https://registry.npm.taobao.org/@mapbox/jsonlint-lines-primitives/download/@mapbox/jsonlint-lines-primitives-2.0.2.tgz",
+ "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
"integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ="
},
"@mapbox/mapbox-gl-style-spec": {
@@ -1032,12 +1032,12 @@
},
"@mapbox/point-geometry": {
"version": "0.1.0",
- "resolved": "https://registry.npm.taobao.org/@mapbox/point-geometry/download/@mapbox/point-geometry-0.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
"integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI="
},
"@mapbox/unitbezier": {
"version": "0.0.0",
- "resolved": "https://registry.npm.taobao.org/@mapbox/unitbezier/download/@mapbox/unitbezier-0.0.0.tgz",
+ "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
"integrity": "sha1-FWUb1VOme4WB+zmIEMmK2Go0Uk4="
},
"@mrmlnc/readdir-enhanced": {
@@ -5246,7 +5246,7 @@
},
"csscolorparser": {
"version": "1.0.3",
- "resolved": "https://registry.npm.taobao.org/csscolorparser/download/csscolorparser-1.0.3.tgz",
+ "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
"integrity": "sha1-s085HupNqPPpgjHizNjfnAQfFxs="
},
"cssesc": {
@@ -6801,6 +6801,11 @@
}
}
}
+ },
+ "file-saver": {
+ "version": "2.0.5",
+ "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+ "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
},
"filesize": {
"version": "3.6.1",
@@ -11679,7 +11684,7 @@
},
"rw": {
"version": "1.3.3",
- "resolved": "https://registry.npm.taobao.org/rw/download/rw-1.3.3.tgz",
+ "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
"integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q="
},
"rx-lite": {
@@ -12349,12 +12354,12 @@
},
"sort-asc": {
"version": "0.1.0",
- "resolved": "https://registry.npm.taobao.org/sort-asc/download/sort-asc-0.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/sort-asc/-/sort-asc-0.1.0.tgz",
"integrity": "sha1-q3md9h/HPqCVbHnEtTHtHp53J+k="
},
"sort-desc": {
"version": "0.1.1",
- "resolved": "https://registry.npm.taobao.org/sort-desc/download/sort-desc-0.1.1.tgz",
+ "resolved": "https://registry.npmjs.org/sort-desc/-/sort-desc-0.1.1.tgz",
"integrity": "sha1-GYuMDN6wlcRjNBhh45JdTuNZqe4="
},
"sort-keys": {
@@ -12368,7 +12373,7 @@
},
"sort-object": {
"version": "0.3.2",
- "resolved": "https://registry.npm.taobao.org/sort-object/download/sort-object-0.3.2.tgz",
+ "resolved": "https://registry.npmjs.org/sort-object/-/sort-object-0.3.2.tgz",
"integrity": "sha1-mODRme3kDgfGGoRAPGHWw7KQ+eI=",
"requires": {
"sort-asc": "^0.1.0",
@@ -13970,7 +13975,7 @@
},
"webfont-matcher": {
"version": "1.1.0",
- "resolved": "https://registry.npm.taobao.org/webfont-matcher/download/webfont-matcher-1.1.0.tgz",
+ "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
"integrity": "sha1-mM6VCXsp4x++czBT4Q5XFkLRxsc="
},
"webpack": {
diff --git a/package.json b/package.json
index da5b6d0..c6e557a 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"test:e2e": "vue-cli-service test:e2e"
},
"dependencies": {
+ "@supermap/iclient-ol": "^10.1.2",
"avue-plugin-ueditor": "^0.1.4",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
@@ -18,6 +19,7 @@
"crypto-js": "^4.0.0",
"echarts": "^5.1.2",
"element-ui": "^2.15.1",
+ "file-saver": "^2.0.5",
"js-base64": "^2.5.1",
"js-cookie": "^2.2.0",
"js-md5": "^0.7.3",
@@ -25,15 +27,14 @@
"node-gyp": "^5.0.6",
"nprogress": "^0.2.0",
"ol": "^6.5.0",
+ "olcs": "^2.12.0",
"portfinder": "^1.0.23",
"script-loader": "^0.7.2",
"vue": "^2.6.10",
"vue-axios": "^2.1.2",
"vue-i18n": "^8.7.0",
"vue-router": "^3.0.1",
- "vuex": "^3.1.1",
- "@supermap/iclient-ol": "^10.1.2",
- "olcs": "^2.12.0"
+ "vuex": "^3.1.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.1.1",
diff --git a/public/img/bajgxt/u230.png b/public/img/bajgxt/u230.png
new file mode 100644
index 0000000..6f4cd70
--- /dev/null
+++ b/public/img/bajgxt/u230.png
Binary files differ
diff --git a/public/img/bajgxt/u235.png b/public/img/bajgxt/u235.png
new file mode 100644
index 0000000..9c7a5d2
--- /dev/null
+++ b/public/img/bajgxt/u235.png
Binary files differ
diff --git a/public/img/bajgxt/u251.png b/public/img/bajgxt/u251.png
new file mode 100644
index 0000000..58b2332
--- /dev/null
+++ b/public/img/bajgxt/u251.png
Binary files differ
diff --git a/public/img/bajgxt/u256.png b/public/img/bajgxt/u256.png
new file mode 100644
index 0000000..6181aa4
--- /dev/null
+++ b/public/img/bajgxt/u256.png
Binary files differ
diff --git a/public/img/bajgxt/u4.png b/public/img/bajgxt/u4.png
new file mode 100644
index 0000000..649c474
--- /dev/null
+++ b/public/img/bajgxt/u4.png
Binary files differ
diff --git a/src/views/home/index.scss b/src/views/home/index.scss
index 7728c52..64302d2 100644
--- a/src/views/home/index.scss
+++ b/src/views/home/index.scss
@@ -4,334 +4,383 @@
// width: 1920px;
// height: 1080px;
background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
- background-size: cover;
-}
-.head-title {
- background: url("../../../public/img/bajgxt/title2.png") no-repeat;
- background-size: cover;
- width: 100%;
- text-align: center;
- position: relative;
- span {
- font-family: "Arial Normal", "Arial", sans-serif;
- font-size: 36px;
- color: #ffffff;
- text-align: center;
- line-height: 77px;
- }
- img {
- position: absolute;
- margin-top: 22px;
- margin-left: 29%;
- }
-}
-.side {
- width: 440px;
- height: 100%;
-}
-.content {
- margin: 5px 20px 20px 20px;
- // height: calc(100% - 77px);
- // width: 100%;
- height: calc(100% - 102px);
- width: calc(100% - 40px);
- display: flex;
- .left,
- .right {
- @extend .side;
- }
- .middle {
- width: calc(100% - 930px);
- height: 100%;
- margin: 0px 25px;
- position: relative;
- }
-}
-.leftimg {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: contain;
- width: 100%;
- height: 260px;
-}
-.echartClass {
- height: 100%;
- width: 100%;
- height: calc(100% - 90px);
-}
-.left {
- .left1 {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: contain;
- width: 440px;
- height: 533px;
- #left1Echart {
- @extend .echartClass;
- }
- }
- .left2 {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: 440px 392px;
- height: 392px;
- width: 440px;
- margin-top: 25px;
- #left2Echart {
- @extend .echartClass;
- }
- }
-}
-.right {
- .right1 {
- background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
- background-size: 440px 251px;
- width: 440px;
- height: 251px;
- position: relative;
- #right1Echart {
- @extend .echartClass;
- }
- }
- .right2 {
- background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
- background-size: 440px 251px;
- width: 440px;
- height: 251px;
- margin-top: 30px;
- position: relative;
- #right2Echart {
- @extend .echartClass;
- }
- }
- .right3 {
- background: url("../../../public/img/bajgxt/left1.png") no-repeat;
- background-size: 440px 392px;
- height: 392px;
- width: 440px;
- margin-top: 25px;
- #right3Echart {
- @extend .echartClass;
- }
- }
-}
-.title-pane {
- display: inline-flex;
- height: 55px;
- img {
- width: 30px;
- height: 30px;
- margin: 15px 10px 0px 10px;
- }
- span {
- line-height: 68px;
- color: #fff;
- font-size: 20px;
- }
-}
-.title-pane1 {
- display: inline-flex;
- height: 44px;
- img {
- width: 30px;
- height: 30px;
- margin: 10px 10px 0px 10px;
- }
- span {
- line-height: 55px;
- color: #fff;
- font-size: 20px;
- }
-}
+ background-size: 100% 100%;
-.middle {
- .mapimg {
- background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
+ .head-title {
+ background: url("../../../public/img/bajgxt/title2.png") no-repeat;
background-size: 100% 100%;
- height: 543px;
width: 100%;
- #map {
- width: calc(100% - 40px);
- height: calc(100% - 40px);
- margin: 0px 20px;
- top: 20px;
+ height: 77px;
+ text-align: center;
+ position: relative;
+ span {
+ font-family: "Arial Normal", "Arial", sans-serif;
+ font-size: 36px;
+ color: #ffffff;
+ text-align: center;
+ line-height: 77px;
+ }
+ span:nth-child(2) {
+ position: absolute;
+ margin-top: 22px;
+ margin-left: 26%;
+ font-size: 22px;
+ cursor: pointer;
+ &:hover {
+ color: #90cef0;
+ }
+ }
+ img {
+ position: absolute;
+ margin-top: 22px;
+ margin-left: 29%;
+ }
+ }
+ .side {
+ width: 27%;
+ height: 100%;
+ }
+ .content {
+ margin: 5px 20px 20px 20px;
+ // height: calc(100% - 77px);
+ // width: 100%;
+ height: calc(100% - 102px);
+ width: calc(100% - 40px);
+ display: flex;
+ .left,
+ .right {
+ @extend .side;
+ }
+ .middle {
+ width: calc(46% - 50px);
+ height: 100%;
+ margin: 0px 25px;
position: relative;
}
}
-
- .table {
- margin-top: 25px;
+ .leftimg {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ background-size: contain;
width: 100%;
- height: 392px;
- background: url("../../../public/img/bajgxt/table.png") no-repeat;
- background-size: 100% 100%;
- position: relative;
- .table-title {
- background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
+ height: 260px;
+ }
+ .echartClass {
+ height: 100%;
+ width: 100%;
+ height: calc(100% - 70px);
+ }
+ .left {
+ .left1 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: 60%;
+ width: 100%;
background-size: 100% 100%;
- position: absolute;
- width: 267px;
- margin-top: -13px;
- height: 50px;
- margin-left: 39%;
+ #left1Echart {
+ @extend .echartClass;
+ }
+ }
+ .left2 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ #left2Echart {
+ @extend .echartClass;
+ }
+ }
+ }
+ .right {
+ .right1 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ position: relative;
+ #right1Echart {
+ @extend .echartClass;
+ }
+ }
+ .right2 {
+ background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 28%;
+ margin-top: 30px;
+ position: relative;
+ #right2Echart {
+ @extend .echartClass;
+ }
+ }
+ .right3 {
+ background: url("../../../public/img/bajgxt/left1.png") no-repeat;
+ height: calc(40% - 25px);
+ width: 100%;
+ background-size: 100% 100%;
+ margin-top: 25px;
+ #right3Echart {
+ @extend .echartClass;
+ }
+ }
+ }
+ .title-pane {
+ display: inline-flex;
+ height: 55px;
+ img {
+ width: 30px;
+ height: 30px;
+ margin: 15px 10px 0px 10px;
+ }
+ span {
+ line-height: 68px;
color: #fff;
font-size: 20px;
- text-align: center;
- line-height: 54px;
}
- .lefttop {
- background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
+ }
+ .title-pane1 {
+ display: inline-flex;
+ height: 44px;
+ img {
+ width: 30px;
+ height: 30px;
+ margin: 10px 10px 0px 10px;
+ }
+ span {
+ line-height: 55px;
+ color: #fff;
+ font-size: 20px;
+ }
+ }
+
+ .middle {
+ .mapimg {
+ background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: -6px;
- margin-top: -7px;
+ height: 60%;
+ width: 100%;
+ #map {
+ width: calc(100% - 40px);
+ height: calc(100% - 40px);
+ margin: 0px 20px;
+ top: 20px;
+ position: relative;
+ }
}
- .leftbottom {
- background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
+
+ .table {
+ margin-top: 25px;
+ height: calc(40% - 25px);
+ width: 100%;
+ background: url("../../../public/img/bajgxt/table.png") no-repeat;
background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: -6px;
- margin-top: 340px;
- }
- .righttop {
- background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
- background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: calc(100% - 39px);
- margin-top: -7px;
- }
- .rightbottom {
- background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
- background-size: 100% 100%;
- width: 44px;
- height: 56px;
- position: absolute;
- margin-left: calc(100% - 39px);
- margin-top: 340px;
+ position: relative;
+ .table-title {
+ background: url("../../../public/img/bajgxt/tabletitle.png") no-repeat;
+ background-size: 100% 100%;
+ position: absolute;
+ width: 267px;
+ margin-top: -13px;
+ height: 50px;
+ margin-left: calc(50% - 135.5px);
+ color: #fff;
+ font-size: 20px;
+ text-align: center;
+ line-height: 54px;
+ }
+ .lefttop {
+ background: url("../../../public/img/bajgxt/lefttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: -6px;
+ margin-top: -7px;
+ }
+ .leftbottom {
+ background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: -6px;
+ margin-top: calc(40% - 88px);
+ }
+ .righttop {
+ background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: calc(100% - 39px);
+ margin-top: -7px;
+ }
+ .rightbottom {
+ background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
+ background-size: 100% 100%;
+ width: 44px;
+ height: 56px;
+ position: absolute;
+ margin-left: calc(100% - 39px);
+ margin-top: calc(40% - 88px);
+ }
}
}
-}
-.el-table {
- width: calc(100% - 40px);
- height: calc(100% - 70px);
- margin: 0px 20px 15px;
- top: 60px;
-}
-/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
- background: #18458f;
-}
-/deep/ .el-table--enable-row-transition .el-table__body td,
-/deep/ .el-table th,
-.el-table tr {
- background: #3457b1;
-}
-/deep/ .el-table .cell {
- color: #fff;
-}
-/deep/ .el-table td,
-.el-table th.is-leaf {
- border-bottom-color: transparent;
-}
-/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
- background-color: #b0caf3;
-}
-/deep/ .el-input__inner {
- height: 27px;
- color: #fff;
- font-size: 14px;
- background-color: transparent;
- border-color: transparent;
- border-radius: 2px;
-}
-/deep/ .el-input {
- width: 94px;
-}
-/deep/ .el-select {
- line-height: 55px;
- position: absolute;
- right: 14px;
-}
-/deep/ .el-input__icon {
- line-height: 56px;
-}
-/deep/ .el-select:hover .el-input__inner,
-/deep/ .el-select .el-input.is-focus .el-input__inner {
- border: none;
-}
-/deep/ .el-table,
-/deep/ .el-table__expanded-cell,
-/deep/ .el-table--border::after,
-/deep/ .el-table--group::after,
-/deep/ .el-table::before {
- background-color: transparent;
-}
-.card-text {
- height: 30px;
- padding: 8px 10px;
- color: #fff;
- font-size: 14px;
- text-align: center;
- span:nth-child(2) {
- color: red;
- font-size: 21px;
- margin: 0px 10px;
- font-weight: bold;
+ .el-table {
+ width: calc(100% - 40px);
+ height: calc(100% - 70px);
+ margin: 0px 20px 15px;
+ top: 60px;
}
- span:nth-child(4) {
- margin-left: 15px;
+ /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
+ background: #18458f;
}
- span:nth-child(5) {
- margin: 0px 10px;
- color: red;
- font-size: 20px;
+ /deep/ .el-table--enable-row-transition .el-table__body td,
+ /deep/ .el-table th,
+ .el-table tr {
+ background: #3457b1;
}
-}
-.mapBtn,
-.mapBtn:nth-child(2),
-.mapBtn:nth-child(3) {
- position: absolute;
- z-index: 99;
- color: #fff;
- background: #4162a2;
- margin-top: 38px;
- margin-left: 85%;
- border-radius: 11px;
- height: 43px;
- display: inline-flex;
- width: 107px;
- cursor: pointer;
- img {
- margin: 8px 3px 8px 5px;
- height: 28px;
- width: 30px;
+ /deep/ .el-table .cell {
+ color: #fff;
}
- .text {
- width: 100px;
+ /deep/ .el-table td,
+ .el-table th.is-leaf {
+ border-bottom-color: transparent;
+ }
+ /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
+ background-color: #b0caf3;
+ }
+ /deep/ .el-input__inner {
+ height: 27px;
+ color: #fff !important;
+ font-size: 14px;
+ background-color: transparent !important;
+ border-color: transparent !important;
+ border-radius: 2px;
+ }
+ /deep/ .el-input {
+ width: 94px;
+ }
+ /deep/ .el-select {
+ line-height: 55px;
+ position: absolute;
+ right: 14px;
+ }
+ /deep/ .el-input__icon {
+ line-height: 56px;
+ }
+ /deep/ .el-select:hover .el-input__inner,
+ /deep/ .el-select .el-input.is-focus .el-input__inner {
+ border: none;
+ }
+ /deep/ .el-table,
+ /deep/ .el-table__expanded-cell,
+ /deep/ .el-table--border::after,
+ /deep/ .el-table--group::after,
+ /deep/ .el-table::before {
+ background-color: transparent;
+ }
+ .card-text {
+ height: 30px;
+ padding: 8px 10px;
+ color: #fff;
+ font-size: 14px;
text-align: center;
- margin: 3px;
- span:nth-child(1) {
- width: 100%;
- display: block;
- font-size: 10px;
- }
span:nth-child(2) {
- width: 100%;
- display: block;
color: red;
- font-size: 17px;
+ font-size: 21px;
+ margin: 0px 10px;
font-weight: bold;
}
+ span:nth-child(4) {
+ margin-left: 15px;
+ }
+ span:nth-child(5) {
+ margin: 0px 10px;
+ color: red;
+ font-size: 20px;
+ }
}
- &:hover {
- box-shadow: 0px 0px 10px #568df3;
+ .right-content {
+ height: calc(100% - 44px);
+ width: 100%;
}
-}
-.mapBtn:nth-child(2) {
- margin-top: 100px;
-}
-.mapBtn:nth-child(3) {
- margin-top: 160px;
+ .card-list {
+ margin: 20px 60px;
+ display: flex;
+ height: 55px;
+ line-height: 55px;
+ img:first-child {
+ height: 55px;
+ }
+ img:nth-child(2) {
+ position: absolute;
+ margin-left: 13px;
+ width: 35px;
+ height: 35px;
+ margin-top: 9px;
+ }
+ span:nth-child(3) {
+ color: red;
+ font-size: 30px;
+ display: block;
+ width: 71px;
+ margin: 0px 20px;
+ }
+ span:nth-child(4) {
+ color: #7ff3f4;
+ font-size: 18px;
+ display: block;
+ width: 129px;
+ }
+ }
+ .mapBtn,
+ .mapBtn:nth-child(2),
+ .mapBtn:nth-child(3) {
+ position: absolute;
+ z-index: 99;
+ color: #fff;
+ background: #4162a2;
+ margin-top: 38px;
+ margin-left: calc(100% - 140px);
+ border-radius: 11px;
+ height: 43px;
+ display: inline-flex;
+ width: 107px;
+ cursor: pointer;
+ img {
+ margin: 8px 3px 8px 5px;
+ height: 28px;
+ width: 30px;
+ }
+ .text {
+ width: 100px;
+ text-align: center;
+ margin: 3px;
+ span:nth-child(1) {
+ width: 100%;
+ display: block;
+ font-size: 10px;
+ }
+ span:nth-child(2) {
+ width: 100%;
+ display: block;
+ color: red;
+ font-size: 17px;
+ font-weight: bold;
+ }
+ }
+ &:hover {
+ box-shadow: 0px 0px 10px #568df3;
+ }
+ }
+ .mapBtn:nth-child(2) {
+ margin-top: 100px;
+ }
+ .mapBtn:nth-child(3) {
+ margin-top: 160px;
+ }
+ /deep/ .el-table__body-wrapper {
+ overflow: auto;
+ height: 100%;
+ }
}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 3ed6435..083b542 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,155 +1,189 @@
<template>
- <div class="bajgxt-home">
- <div class="head-title">
- <span>保安监管系统可视化平台</span>
- <img src="../../../public/img/bajgxt/linkimg.png"
+ <div class="bajgxt-home">
+ <div class="head-title">
+ <span>保安监管系统可视化平台</span>
+ <!-- <img src="../../../public/img/bajgxt/linkimg.png"
@click.stop="goSystemHome"
- title="进入系统" />
- </div>
- <div class="content">
- <div class="left">
- <div class="left1">
- <div class="title-pane">
- <img src="../../../public/img/bajgxt/icon1.png" />
- <span>业务对象统计--单位</span>
- </div>
- <div id="left1Echart"></div>
- </div>
- <div class="left2">
- <div class="title-pane1">
- <img src="../../../public/img/bajgxt/icon1.png" />
- <span>保安员持证情况</span>
- </div>
- <div id="left2Echart"></div>
- </div>
- </div>
- <div class="middle">
- <div class="mapimg">
- <!-- <div></div> -->
- <div class="mapBtn"
- @click="getTableData('car')">
- <img src="../../../public/img/bajgxt/car.png"
- alt="" />
- <div class="text">
- <span>押运车辆</span>
- <span>700</span>
- </div>
- </div>
- <div class="mapBtn"
- @click="getTableData('peo')">
- <img src="../../../public/img/bajgxt/peo.png"
- alt="" />
- <div class="text">
- <span>保安员</span>
- <span>700</span>
- </div>
- </div>
- <div class="mapBtn"
- @click="getTableData('gun')">
- <img src="../../../public/img/bajgxt/gun.png"
- alt="" />
- <div class="text">
- <span>枪支</span>
- <span>700</span>
- </div>
- </div>
- <div id="map"></div>
- </div>
- <div class="table">
- <div class="table-title">武装押运实时定位</div>
- <div class="lefttop"></div>
- <div class="leftbottom"></div>
- <div class="righttop"></div>
- <div class="rightbottom"></div>
- <el-table :data="tableData"
- stripe>
- <el-table-column type="index"
- label="序号"
- width="50">
- </el-table-column>
- <el-table-column v-if="curTableType === 'car'"
- prop="carNum"
- label="押运车辆车牌号"
- width="180">
- </el-table-column>
- <el-table-column v-if="curTableType === 'peo'"
- prop="name"
- label="押运人员名称"
- width="180">
- </el-table-column>
- <el-table-column v-if="curTableType === 'gun'"
- prop="number"
- label="枪支编号"
- width="180">
- </el-table-column>
- <el-table-column prop="location"
- label="实时位置">
- </el-table-column>
- <el-table-column prop="company"
- label="所属公司"> </el-table-column>
- <el-table-column v-if="curTableType === 'car'"
- prop="linkman"
- label="联系人">
- </el-table-column>
- <el-table-column v-if="curTableType === 'gun'"
- prop="linkman"
- label="负责人">
- </el-table-column>
- <el-table-column prop="tel"
- label="联系电话"> </el-table-column>
- <el-table-column v-if="curTableType === 'peo'"
- prop="bz"
- label="备注">
- </el-table-column>
- </el-table>
- </div>
- </div>
- <div class="right">
- <div class="right1">
- <div class="title-pane1">
- <img src="../../../public/img/bajgxt/icon2.png" />
- <span>保安员预警统计</span>
- <el-select v-model="value1">
- <el-option v-for="item in options1"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="card-text">
- <span>现实表现差</span><span>902,432</span><span>起</span><span>审查情况</span><span>22222</span><span>起</span>
- </div>
- <div id="right1Echart"></div>
- </div>
- <div class="right2">
- <div class="title-pane1">
- <img src="../../../public/img/bajgxt/icon2.png" />
- <span>保安公司预警统计</span>
- <el-select v-model="value2"
- placeholder="请选择">
- <el-option v-for="item in options2"
- :key="item.value"
- :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- <div class="card-text">
- <span>未缴纳社保情况</span><span>902,432</span><span>起</span><span>未持证情况</span><span>22222</span><span>起</span>
- </div>
- <div id="right2Echart"></div>
- </div>
- <div class="right3">
- <div class="title-pane1">
- <img src="../../../public/img/bajgxt/icon3.png" />
- <span>分局预警占比情况</span>
- </div>
- <div id="right3Echart"></div>
- </div>
- </div>
- </div>
+ title="进入系统" /> -->
+ <span @click.stop="goSystemHome">进入系统</span>
</div>
+ <div class="content">
+ <div class="left">
+ <div class="left1">
+ <div class="title-pane">
+ <img src="../../../public/img/bajgxt/icon1.png" />
+ <span>业务对象统计--单位</span>
+ </div>
+ <div id="left1Echart"></div>
+ </div>
+ <div class="left2">
+ <div class="title-pane1">
+ <img src="../../../public/img/bajgxt/icon1.png" />
+ <span>保安员持证情况</span>
+ </div>
+ <div id="left2Echart"></div>
+ </div>
+ </div>
+ <div class="middle">
+ <div class="mapimg">
+ <!-- <div></div> -->
+ <div class="mapBtn" @click="getTableData('car')">
+ <img src="../../../public/img/bajgxt/car.png" alt="" />
+ <div class="text">
+ <span>押运车辆</span>
+ <span>700</span>
+ </div>
+ </div>
+ <div class="mapBtn" @click="getTableData('peo')">
+ <img src="../../../public/img/bajgxt/peo.png" alt="" />
+ <div class="text">
+ <span>保安员</span>
+ <span>700</span>
+ </div>
+ </div>
+ <div class="mapBtn" @click="getTableData('gun')">
+ <img src="../../../public/img/bajgxt/gun.png" alt="" />
+ <div class="text">
+ <span>枪支</span>
+ <span>700</span>
+ </div>
+ </div>
+ <div id="map"></div>
+ </div>
+ <div class="table">
+ <div class="table-title">武装押运实时定位</div>
+ <div class="lefttop"></div>
+ <div class="leftbottom"></div>
+ <div class="righttop"></div>
+ <div class="rightbottom"></div>
+ <el-table :data="tableData" stripe>
+ <el-table-column type="index" label="序号" width="50">
+ </el-table-column>
+ <el-table-column
+ v-if="curTableType === 'car'"
+ prop="carNum"
+ label="押运车辆车牌号"
+ width="180"
+ >
+ </el-table-column>
+ <el-table-column
+ v-if="curTableType === 'peo'"
+ prop="name"
+ label="押运人员名称"
+ width="180"
+ >
+ </el-table-column>
+ <el-table-column
+ v-if="curTableType === 'gun'"
+ prop="number"
+ label="枪支编号"
+ width="180"
+ >
+ </el-table-column>
+ <el-table-column prop="location" label="实时位置">
+ </el-table-column>
+ <el-table-column prop="company" label="所属公司"> </el-table-column>
+ <el-table-column
+ v-if="curTableType === 'car'"
+ prop="linkman"
+ label="联系人"
+ >
+ </el-table-column>
+ <el-table-column
+ v-if="curTableType === 'gun'"
+ prop="linkman"
+ label="负责人"
+ >
+ </el-table-column>
+ <el-table-column prop="tel" label="联系电话"> </el-table-column>
+ <el-table-column
+ v-if="curTableType === 'peo'"
+ prop="bz"
+ label="备注"
+ >
+ </el-table-column>
+ </el-table>
+ </div>
+ </div>
+ <div class="right">
+ <div class="right1">
+ <div class="title-pane1">
+ <img src="../../../public/img/bajgxt/icon2.png" />
+ <span>保安员预警统计</span>
+ <el-select v-model="value1">
+ <el-option
+ v-for="item in options1"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </div>
+ <div class="right-content">
+ <div class="card-list">
+ <img src="../../../public/img/bajgxt/u4.png" />
+ <img src="../../../public/img/bajgxt/u256.png" />
+ <span>45</span>
+ <span>现实表现差</span>
+ </div>
+ <div class="card-list">
+ <img src="../../../public/img/bajgxt/u4.png" />
+ <img src="../../../public/img/bajgxt/u230.png" />
+ <span>76</span>
+ <span>资格审查</span>
+ </div>
+ </div>
+ <!-- <div class="card-text"> -->
+ <!-- <span>现实表现差</span><span>902,432</span><span>起</span
+ ><span>审查情况</span><span>22222</span><span>起</span> -->
+ <!-- </div> -->
+ <!-- <div id="right1Echart"></div> -->
+ </div>
+ <div class="right2">
+ <div class="title-pane1">
+ <img src="../../../public/img/bajgxt/icon2.png" />
+ <span>保安公司预警统计</span>
+ <el-select v-model="value2" placeholder="请选择">
+ <el-option
+ v-for="item in options2"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </div>
+ <div class="right-content">
+ <div class="card-list">
+ <img src="../../../public/img/bajgxt/u4.png" />
+ <img src="../../../public/img/bajgxt/u235.png" />
+ <span>21</span>
+ <span>未缴纳社保</span>
+ </div>
+ <div class="card-list">
+ <img src="../../../public/img/bajgxt/u4.png" />
+ <img src="../../../public/img/bajgxt/u251.png" />
+ <span>26</span>
+ <span>未持证</span>
+ </div>
+ </div>
+ <!-- <div class="card-text"> -->
+ <!-- <span>未缴纳社保情况</span><span>902,432</span><span>起</span
+ ><span>未持证情况</span><span>22222</span><span>起</span> -->
+ <!-- </div> -->
+ <!-- <div id="right2Echart"></div> -->
+ </div>
+ <div class="right3">
+ <div class="title-pane1">
+ <img src="../../../public/img/bajgxt/icon3.png" />
+ <span>分局预警占比情况</span>
+ </div>
+ <div id="right3Echart"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
@@ -169,289 +203,289 @@
import axios from "../../router/axios";
import { securityTotal, holderNum, securityPer } from "../../api/index/index";
export default {
- data () {
- return {
- map: null,
- curTableType: "car",
- tableData: [],
- value1: "1",
- options1: [
- {
- value: "1",
- label: "南昌市"
- },
- {
- value: "2",
- label: "赣州市"
- }
- ],
- value2: "1",
- options2: [
- {
- value: "1",
- label: "南昌市"
- },
- {
- value: "2",
- label: "赣州市"
- }
- ]
- };
- },
- methods: {
- initEchart () {
- securityTotal().then(res => {
- if (res.data.code == 200) {
- let securityData = res.data.data;
- let left1Echart = echarts.init(
- document.getElementById("left1Echart")
- );
- left1Echart.setOption(optionJs.left1Data(securityData));
- } else {
- this.$message.error(res.msg);
- }
- });
-
- holderNum().then(res => {
- if (res.data.code === 200) {
- let data = res.data.data;
- let left2Echart = echarts.init(
- document.getElementById("left2Echart")
- );
- left2Echart.setOption(optionJs.left2Data(data));
- } else {
- this.$message.error(res.msg);
- }
- });
- // securityPer().then(res => {
- // if (res.data.code === 200) {
- // let data = res.data.data;
- let data = [];
- let right1Echart = echarts.init(document.getElementById("right1Echart"));
- right1Echart.setOption(optionJs.right1Data(data));
- // }
- // });
-
- let right2Echart = echarts.init(document.getElementById("right2Echart"));
- right2Echart.setOption(optionJs.right2Data(data));
- let right3Echart = echarts.init(document.getElementById("right3Echart"));
- right3Echart.setOption(optionJs.right3Data(data));
+ data() {
+ return {
+ map: null,
+ curTableType: "car",
+ tableData: [],
+ value1: "1",
+ options1: [
+ {
+ value: "1",
+ label: "南昌市"
},
-
- getTableData (type) {
- this.curTableType = type;
- if (type === "car") {
- this.tableData = [
- {
- carNum: "111111111111",
- location: "红谷滩",
- company: "公司",
- linkman: "小李",
- tel: "13999999999"
- },
- {
- carNum: "111111111111",
- location: "红谷滩",
- company: "公司",
- linkman: "小李",
- tel: "13999999999"
- },
- {
- carNum: "111111111111",
- location: "红谷滩",
- company: "公司",
- linkman: "小李",
- tel: "13999999999"
- },
- {
- carNum: "111111111111",
- location: "红谷滩",
- company: "公司",
- linkman: "小李",
- tel: "13999999999"
- },
- {
- carNum: "111111111111",
- location: "红谷滩",
- company: "公司",
- linkman: "小李",
- tel: "13999999999"
- }
- ];
- } else if (type === "peo") {
- this.tableData = [
- {
- name: "小张",
- location: "红谷滩",
- company: "公司",
- tel: "13999999999",
- bz: "zzz"
- },
- {
- name: "小张",
- location: "红谷滩",
- company: "公司",
- tel: "13999999999",
- bz: "zzz"
- },
- {
- name: "小张",
- location: "红谷滩",
- company: "公司",
- tel: "13999999999",
- bz: "zzz"
- },
- {
- name: "小张",
- location: "红谷滩",
- company: "公司",
- tel: "13999999999",
- bz: "zzz"
- },
- {
- name: "小张",
- location: "红谷滩",
- company: "公司",
- tel: "13999999999",
- bz: "zzz"
- },
- {
- name: "小张",
- location: "红谷滩",
- company: "公司",
- tel: "13999999999",
- bz: "zzz"
- }
- ];
- } else if (type === "gun") {
- this.tableData = [
- {
- number: "Q1111",
- location: "红谷滩",
- company: "公司",
- linkman: "张强",
- tel: "13999999999"
- },
- {
- number: "Q1111",
- location: "红谷滩",
- company: "公司",
- linkman: "张强",
- tel: "13999999999"
- },
- {
- number: "Q1111",
- location: "红谷滩",
- company: "公司",
- linkman: "张强",
- tel: "13999999999"
- },
- {
- number: "Q1111",
- location: "红谷滩",
- company: "公司",
- linkman: "张强",
- tel: "13999999999"
- },
- {
- number: "Q1111",
- location: "红谷滩",
- company: "公司",
- linkman: "张强",
- tel: "13999999999"
- },
- {
- number: "Q1111",
- location: "红谷滩",
- company: "公司",
- linkman: "张强",
- tel: "13999999999"
- }
- ];
- }
- },
-
- initMap () {
- this.map = new Map({
- target: "map", // 对应页面里 id 为 map 的元素
- layers: [
- // 图层
- new Tile({
- source: new OSM() // 图层数据源
- })
- ],
- view: new View({
- // 地图视图
- projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
- center: [115.892151, 28.676493], //坐标 厦门
- // minZoom: 10, // 地图缩放最小级别
- zoom: 11 //地图缩放级别
- })
- });
- var image = new Circle({
- radius: 5,
- fill: new Fill({
- color: "rgba(255, 0, 0, 1)"
- }),
- stroke: new Stroke({ color: "red", width: 1 })
- });
-
- var styles = {
- Point: new Style({
- image: image
- })
- };
- axios.get("./nc.json").then(res => {
- let data = res.data.features;
- let vectorSource = new VectorSource({
- features: new GeoJSON().readFeatures(data)
- });
- let vectorLayer = new VectorLayer({
- source: vectorSource,
- style: styles
- });
- this.map.addLayer(vectorLayer);
- });
- // var center = new transform(
- // [104.06667, 30.66667],
- // "EPSG:4326",
- // "EPSG:3857"
- // );
- // this.map = new Map({
- // view: new View({
- // center: center,
- // zoom: 4
- // }),
- // target: "map"
- // });
- // var offlineMapLayer = new TileLayer({
- // source: new XYZ({
- // url: "./offlineMapTiles/{z}/{x}/{y}.png"
- // })
- // });
- // this.map.addLayer(offlineMapLayer);
- },
-
- goSystemHome () {
- this.$router.push({ path: '/register/index' });
+ {
+ value: "2",
+ label: "赣州市"
}
+ ],
+ value2: "1",
+ options2: [
+ {
+ value: "1",
+ label: "南昌市"
+ },
+ {
+ value: "2",
+ label: "赣州市"
+ }
+ ]
+ };
+ },
+ methods: {
+ initEchart() {
+ securityTotal().then(res => {
+ if (res.data.code == 200) {
+ let securityData = res.data.data;
+ let left1Echart = echarts.init(
+ document.getElementById("left1Echart")
+ );
+ left1Echart.setOption(optionJs.left1Data(securityData));
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+
+ holderNum().then(res => {
+ if (res.data.code === 200) {
+ let data = res.data.data;
+ let left2Echart = echarts.init(
+ document.getElementById("left2Echart")
+ );
+ left2Echart.setOption(optionJs.left2Data(data));
+ } else {
+ this.$message.error(res.msg);
+ }
+ });
+ // securityPer().then(res => {
+ // if (res.data.code === 200) {
+ // let data = res.data.data;
+ let data = [];
+ // let right1Echart = echarts.init(document.getElementById("right1Echart"));
+ // right1Echart.setOption(optionJs.right1Data(data));
+ // }
+ // });
+
+ // let right2Echart = echarts.init(document.getElementById("right2Echart"));
+ // right2Echart.setOption(optionJs.right2Data(data));
+ let right3Echart = echarts.init(document.getElementById("right3Echart"));
+ right3Echart.setOption(optionJs.right3Data(data));
},
- mounted () {
- this.initEchart();
- this.getTableData("car");
- this.initMap();
+
+ getTableData(type) {
+ this.curTableType = type;
+ if (type === "car") {
+ this.tableData = [
+ {
+ carNum: "111111111111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "小李",
+ tel: "13999999999"
+ },
+ {
+ carNum: "111111111111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "小李",
+ tel: "13999999999"
+ },
+ {
+ carNum: "111111111111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "小李",
+ tel: "13999999999"
+ },
+ {
+ carNum: "111111111111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "小李",
+ tel: "13999999999"
+ },
+ {
+ carNum: "111111111111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "小李",
+ tel: "13999999999"
+ }
+ ];
+ } else if (type === "peo") {
+ this.tableData = [
+ {
+ name: "小张",
+ location: "红谷滩",
+ company: "公司",
+ tel: "13999999999",
+ bz: "zzz"
+ },
+ {
+ name: "小张",
+ location: "红谷滩",
+ company: "公司",
+ tel: "13999999999",
+ bz: "zzz"
+ },
+ {
+ name: "小张",
+ location: "红谷滩",
+ company: "公司",
+ tel: "13999999999",
+ bz: "zzz"
+ },
+ {
+ name: "小张",
+ location: "红谷滩",
+ company: "公司",
+ tel: "13999999999",
+ bz: "zzz"
+ },
+ {
+ name: "小张",
+ location: "红谷滩",
+ company: "公司",
+ tel: "13999999999",
+ bz: "zzz"
+ },
+ {
+ name: "小张",
+ location: "红谷滩",
+ company: "公司",
+ tel: "13999999999",
+ bz: "zzz"
+ }
+ ];
+ } else if (type === "gun") {
+ this.tableData = [
+ {
+ number: "Q1111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "张强",
+ tel: "13999999999"
+ },
+ {
+ number: "Q1111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "张强",
+ tel: "13999999999"
+ },
+ {
+ number: "Q1111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "张强",
+ tel: "13999999999"
+ },
+ {
+ number: "Q1111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "张强",
+ tel: "13999999999"
+ },
+ {
+ number: "Q1111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "张强",
+ tel: "13999999999"
+ },
+ {
+ number: "Q1111",
+ location: "红谷滩",
+ company: "公司",
+ linkman: "张强",
+ tel: "13999999999"
+ }
+ ];
+ }
+ },
+
+ initMap() {
+ this.map = new Map({
+ target: "map", // 对应页面里 id 为 map 的元素
+ layers: [
+ // 图层
+ new Tile({
+ source: new OSM() // 图层数据源
+ })
+ ],
+ view: new View({
+ // 地图视图
+ projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
+ center: [115.892151, 28.676493], //坐标 厦门
+ // minZoom: 10, // 地图缩放最小级别
+ zoom: 11 //地图缩放级别
+ })
+ });
+ var image = new Circle({
+ radius: 5,
+ fill: new Fill({
+ color: "rgba(255, 0, 0, 1)"
+ }),
+ stroke: new Stroke({ color: "red", width: 1 })
+ });
+
+ var styles = {
+ Point: new Style({
+ image: image
+ })
+ };
+ axios.get("./nc.json").then(res => {
+ let data = res.data.features;
+ let vectorSource = new VectorSource({
+ features: new GeoJSON().readFeatures(data)
+ });
+ let vectorLayer = new VectorLayer({
+ source: vectorSource,
+ style: styles
+ });
+ this.map.addLayer(vectorLayer);
+ });
+ // var center = new transform(
+ // [104.06667, 30.66667],
+ // "EPSG:4326",
+ // "EPSG:3857"
+ // );
+ // this.map = new Map({
+ // view: new View({
+ // center: center,
+ // zoom: 4
+ // }),
+ // target: "map"
+ // });
+ // var offlineMapLayer = new TileLayer({
+ // source: new XYZ({
+ // url: "./offlineMapTiles/{z}/{x}/{y}.png"
+ // })
+ // });
+ // this.map.addLayer(offlineMapLayer);
+ },
+
+ goSystemHome() {
+ this.$router.push({ path: "/register/index" });
}
+ },
+ mounted() {
+ this.initEchart();
+ this.getTableData("car");
+ this.initMap();
+ }
};
</script>
<style lang="scss" scoped>
-@import './index.scss';
+@import "./index.scss";
/deep/ .el-select-dropdown {
- border: 1px solid #9199ab;
- background-color: #022c53;
+ border: 1px solid #9199ab;
+ background-color: #022c53;
}
/deep/ .el-select-dropdown__item.hover,
/deep/ .el-select-dropdown__item:hover {
- background-color: #03203e;
+ background-color: #03203e;
}
</style>
diff --git a/src/views/home/indexEchart.js b/src/views/home/indexEchart.js
index 6713d35..321e9fe 100644
--- a/src/views/home/indexEchart.js
+++ b/src/views/home/indexEchart.js
@@ -31,7 +31,7 @@
],
legend: {
data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
- bottom: "8%",
+ bottom: "1%",
itemWidth: 20,
textStyle: {
color: "#fff"
@@ -40,7 +40,7 @@
grid: {
left: "5%",
right: "6%",
- bottom: "18%",
+ bottom: "10%",
containLabel: true
},
xAxis: {
@@ -140,7 +140,7 @@
],
legend: {
data: ["持证人数", "未持证人数"],
- bottom: "8%",
+ bottom: "1%",
itemWidth: 20,
textStyle: {
color: "#fff"
@@ -149,7 +149,7 @@
grid: {
left: "5%",
right: "6%",
- bottom: "18%",
+ bottom: "15%",
containLabel: true
},
xAxis: {
@@ -467,7 +467,7 @@
},
grid: {
top: "16%",
- bottom: "54%",
+ bottom: "55%",
left: "50%",
containLabel: false
},
diff --git a/src/views/securityUnitOperation/economicAnalysis.vue b/src/views/securityUnitOperation/economicAnalysis.vue
new file mode 100644
index 0000000..8e8da32
--- /dev/null
+++ b/src/views/securityUnitOperation/economicAnalysis.vue
@@ -0,0 +1,7 @@
+/*
+ * @Author: mikey.zhaopeng
+ * @Date: 2021-07-17 00:19:50
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2021-07-17 00:20:31
+ * @description:公司经济情况智能分析详情
+ */
\ No newline at end of file
diff --git a/src/views/securityUnitOperation/economicTable.vue b/src/views/securityUnitOperation/economicTable.vue
new file mode 100644
index 0000000..5012b55
--- /dev/null
+++ b/src/views/securityUnitOperation/economicTable.vue
@@ -0,0 +1,7 @@
+/*
+ * @Author: mikey.zhaopeng
+ * @Date: 2021-07-17 00:19:50
+ * @Last Modified by: mikey.zhaopeng
+ * @Last Modified time: 2021-07-17 00:20:33
+ * @description:公司经济情况智能分析统计
+ */
diff --git a/src/views/securityUnitOperation/operationAnalysis.vue b/src/views/securityUnitOperation/operationAnalysis.vue
new file mode 100644
index 0000000..8e8743e
--- /dev/null
+++ b/src/views/securityUnitOperation/operationAnalysis.vue
@@ -0,0 +1,208 @@
+<template>
+ <div class="page1">
+ <el-row>
+ <el-col :span="24">
+ <div class="rowContent first-menu">
+ <div class="rowTitle">
+ <span>数据概览</span>
+ <el-button>进入数据统计表</el-button>
+ <el-select class="select1" v-model="value1" placeholder="请选择">
+ <el-option
+ v-for="item in options1"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ <el-select class="select2" v-model="value2" placeholder="请选择">
+ <el-option
+ v-for="item in options2"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ >
+ </el-option>
+ </el-select>
+ </div>
+
+ <div style="display: flex ;margin-top: 15px;">
+ <div class="box-card">
+ <span>总保安数</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ <div class="box-card">
+ <span>正常保安员</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ <div class="box-card">
+ <span>持证保安员</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ <div class="box-card">
+ <span>过考保安员</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ <div class="box-card">
+ <span>服务客户</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ <div class="box-card">
+ <span>缴纳社保</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ <div class="box-card">
+ <span>保安派遣</span>
+ <span>500</span>
+ <span>较上月上涨2%</span>
+ </div>
+ </div>
+ </div>
+ </el-col>
+ </el-row>
+ <el-row :gutter="20">
+ <el-col :span="16">
+ <div class="rowContent" id="middleEchart1"></div>
+ </el-col>
+ <el-col :span="8">
+ <div class="rowContent" id="middleEchart2"></div>
+ </el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="24">
+ <div class="rowContent">
+ <div id="bottomEchart"></div>
+ </div>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import echartJs from "./securityEchart.js";
+export default {
+ data() {
+ return {
+ value1: "1",
+ value2: "1",
+ options1: [
+ {
+ value: "1",
+ label: "南昌市"
+ }
+ ],
+ options2: [
+ {
+ value: "1",
+ label: "保安公司"
+ }
+ ]
+ };
+ },
+ methods: {
+ setEchart() {
+ let data = [];
+ let bottomEchart = echarts.init(document.getElementById("bottomEchart"));
+ bottomEchart.setOption(echartJs.bottomOption(data));
+ let middleEchart1 = echarts.init(
+ document.getElementById("middleEchart1")
+ );
+ middleEchart1.setOption(echartJs.middleOption1(data));
+ let middleEchart2 = echarts.init(
+ document.getElementById("middleEchart2")
+ );
+ middleEchart2.setOption(echartJs.middleOption2(data));
+ }
+ },
+ mounted() {
+ this.setEchart();
+ }
+};
+</script>
+<style lang="scss" scoped>
+.page1 {
+ height: 100%;
+ width: 100%;
+ /* background: #003688; */
+}
+#bottomEchart,
+#middleEchart1,
+#middleEchart2 {
+ height: 100%;
+ width: 100%;
+}
+.rowContent {
+ height: 20%;
+ background: rgba(255, 255, 255, 0.1);
+ box-shadow: 0px 0px 1px #fff;
+}
+.first-menu {
+ padding: 5px 20px 20px 20px;
+ height: calc(100% - 25px) !important;
+}
+.el-row:first-child {
+ height: calc(40% - 80px);
+ margin-bottom: 20px;
+}
+.el-row:nth-child(2) {
+ margin-bottom: 20px;
+}
+.el-row:nth-child(2),
+.el-row:nth-child(3) {
+ height: 30%;
+}
+.el-col,
+.rowContent {
+ height: 100%;
+}
+.box-card {
+ width: 150px;
+ background: #00aaf1;
+ height: 135px;
+ text-align: center;
+ margin-right: 66px;
+ box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
+ line-height: 40px;
+}
+.box-card span {
+ display: block;
+ width: 100%;
+ color: #fff;
+}
+.box-card span:nth-child(2) {
+ color: #06ffff;
+ font-size: 34px;
+}
+.rowTitle {
+ height: 40px;
+ display: flex;
+ span {
+ color: #fff;
+ font-size: 25px;
+ font-weight: 600;
+ margin-right: 20px;
+ }
+ .select1 {
+ position: absolute;
+ right: 140px;
+ }
+ .select2 {
+ position: absolute;
+ right: 0px;
+ }
+ .el-button {
+ position: absolute;
+ right: 300px;
+ }
+ /deep/ .el-input__inner {
+ width: 120px;
+ }
+}
+</style>
diff --git a/src/views/securityUnitOperation/operationTable.vue b/src/views/securityUnitOperation/operationTable.vue
new file mode 100644
index 0000000..9664a60
--- /dev/null
+++ b/src/views/securityUnitOperation/operationTable.vue
@@ -0,0 +1,77 @@
+<template>
+ <div class="table">
+ <div class="about">
+ <el-button @click="downExcel">下载</el-button>
+ <el-table id="table" :data="tableData" stripe style="width: 100%">
+ <el-table-column prop="date" label="日期" width="180">
+ </el-table-column>
+ <el-table-column prop="name" label="姓名" width="180">
+ </el-table-column>
+ <el-table-column prop="address" label="地址"> </el-table-column>
+ </el-table>
+ <el-pagination background layout="prev, pager, next" :total="1000">
+ </el-pagination>
+ </div>
+ </div>
+</template>
+<script>
+import FileSaver from "file-saver";
+import XLSX from "xlsx";
+export default {
+ data() {
+ return {
+ tableData: [
+ {
+ date: "2016-05-02",
+ name: "王小虎",
+ address: "上海市普陀区金沙江路 1518 弄"
+ },
+ {
+ date: "2016-05-04",
+ name: "王小虎",
+ address: "上海市普陀区金沙江路 1517 弄"
+ },
+ {
+ date: "2016-05-01",
+ name: "王小虎",
+ address: "上海市普陀区金沙江路 1519 弄"
+ },
+ {
+ date: "2016-05-03",
+ name: "王小虎",
+ address: "上海市普陀区金沙江路 1516 弄"
+ }
+ ]
+ };
+ },
+ methods: {
+ downExcel() {
+ let et = XLSX.utils.table_to_book(document.getElementById("table"));
+ let etout = XLSX.write(et, {
+ bookType: "xlsx",
+ bookSST: true,
+ type: "array"
+ });
+ try {
+ FileSaver.saveAs(
+ new Blob([etout], {
+ type: "application/octet-stream"
+ }),
+ `表.xlsx`
+ ); //导出的文件名
+ } catch (e) {
+ console.log(e, etout);
+ }
+ return etout;
+ }
+ },
+ mounted() {}
+};
+</script>
+<style>
+.table {
+ height: 100%;
+ width: 1005;
+ display: none;
+}
+</style>
diff --git a/src/views/securityUnitOperation/securityEchart.js b/src/views/securityUnitOperation/securityEchart.js
new file mode 100644
index 0000000..1dfe7d4
--- /dev/null
+++ b/src/views/securityUnitOperation/securityEchart.js
@@ -0,0 +1,215 @@
+function bottomOption(data) {
+ let option = {
+ title: {
+ text: "公司运营趋势",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ xAxis: {
+ type: "category",
+ axisLabel: {
+ color: "#fff"
+ },
+ boundaryGap: false,
+ data: [
+ "一月",
+ "二月",
+ "三月",
+ "四月",
+ "五月",
+ "六月",
+ "七月",
+ "八月",
+ "九月",
+ "十月",
+ "十一月",
+ "十二月"
+ ]
+ },
+ yAxis: {
+ type: "value",
+ axisLabel: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ data: [820, 932, 901, 934, 1290, 1330, 1320, 132, 1111, 321, 342, 134],
+ type: "line",
+ smooth: true,
+ areaStyle: {}
+ }
+ ]
+ };
+ return option;
+}
+function middleOption1(data) {
+ let option = {
+ title: {
+ text: "公司保安类数据对比",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ tooltip: {
+ trigger: "axis"
+ },
+ legend: {
+ data: [
+ "总保安数",
+ "正常保安数",
+ "持证保安数",
+ "过考保安数",
+ "缴纳社保保安数",
+ "缴纳社保数"
+ ],
+ bottom: "2%",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "15%",
+ containLabel: true
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ axisLabel: {
+ color: "#fff"
+ },
+ data: [
+ "一月",
+ "二月",
+ "三月",
+ "四月",
+ "五月",
+ "六月",
+ "七月",
+ "八月",
+ "九月",
+ "十月",
+ "十一月",
+ "十二月"
+ ]
+ },
+ yAxis: {
+ type: "value",
+ axisLabel: {
+ color: "#fff"
+ }
+ },
+ series: [
+ {
+ name: "总保安数",
+ type: "line",
+ stack: "总量",
+ data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
+ },
+ {
+ name: "正常保安数",
+ type: "line",
+ stack: "总量",
+ data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
+ },
+ {
+ name: "持证保安数",
+ type: "line",
+ stack: "总量",
+ data: [150, 232, 201, 154, 190, 330, 410, 132, 111, 222, 132, 43]
+ },
+ {
+ name: "过考保安数",
+ type: "line",
+ stack: "总量",
+ data: [320, 332, 301, 334, 390, 330, 320, 233, 123, 432, 122, 11]
+ },
+ {
+ name: "缴纳社保保安数",
+ type: "line",
+ stack: "总量",
+ data: [120, 132, 101, 134, 120, 130, 132, 222, 111, 123, 341, 123]
+ },
+ {
+ name: "缴纳社保数",
+ type: "line",
+ stack: "总量",
+ data: [120, 132, 101, 134, 1210, 130, 120, 22, 123, 33, 21, 13]
+ }
+ ]
+ };
+ return option;
+}
+function middleOption2(data) {
+ let option = {
+ title: {
+ text: "服务客户",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow"
+ }
+ },
+ legend: {
+ data: ["客户数"],
+ bottom: "5%",
+ textStyle: {
+ color: "#fff"
+ }
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "7%",
+ containLabel: true
+ },
+ xAxis: {
+ type: "value",
+ boundaryGap: [0, 0.01],
+ axisLabel: {
+ color: "#fff"
+ }
+ },
+ yAxis: {
+ type: "category",
+ axisLabel: {
+ color: "#fff"
+ },
+ data: [
+ "一月",
+ "二月",
+ "三月",
+ "四月",
+ "五月",
+ "六月",
+ "七月",
+ "八月",
+ "九月",
+ "十月",
+ "十一月",
+ "十二月"
+ ]
+ },
+ series: [
+ {
+ name: "2011年",
+ type: "bar",
+ data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
+ }
+ ]
+ };
+ return option;
+}
+
+export default {
+ bottomOption,
+ middleOption1,
+ middleOption2
+};
--
Gitblit v1.9.3