首页内容部分更改，加保安单位经营情况研判模块页面

zpzgiser

2021-07-17 29cb0b5b6db39f426ea0ea792d08f325cff395fc

首页内容部分更改，加保安单位经营情况研判模块页面

 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": {

 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",

 public/img/bajgxt/u230.png

 public/img/bajgxt/u235.png

 public/img/bajgxt/u251.png

 public/img/bajgxt/u256.png

 public/img/bajgxt/u4.png

 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%;
  }
}

 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>

 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
    },

 src/views/securityUnitOperation/economicAnalysis.vue

New file
@@ -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:公司经济情况智能分析详情
 */

 src/views/securityUnitOperation/economicTable.vue

New file
@@ -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:公司经济情况智能分析统计
 */

 src/views/securityUnitOperation/operationAnalysis.vue

New file
@@ -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>

 src/views/securityUnitOperation/operationTable.vue

New file
@@ -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>

 src/views/securityUnitOperation/securityEchart.js

New file
@@ -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
};