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

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,12 +4,13 @@
  // width: 1920px;
  // height: 1080px;
  background: url("../../../public/img/bajgxt/backimg.png") no-repeat;
  background-size: cover;
}
  background-size: 100% 100%;

.head-title {
  background: url("../../../public/img/bajgxt/title2.png") no-repeat;
  background-size: cover;
    background-size: 100% 100%;
  width: 100%;
    height: 77px;
  text-align: center;
  position: relative;
  span {
@@ -19,6 +20,16 @@
    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;
@@ -26,7 +37,7 @@
  }
}
.side {
  width: 440px;
    width: 27%;
  height: 100%;
}
.content {
@@ -41,7 +52,7 @@
    @extend .side;
  }
  .middle {
    width: calc(100% - 930px);
      width: calc(46% - 50px);
    height: 100%;
    margin: 0px 25px;
    position: relative;
@@ -56,23 +67,23 @@
.echartClass {
  height: 100%;
  width: 100%;
  height: calc(100% - 90px);
    height: calc(100% - 70px);
}
.left {
  .left1 {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: contain;
    width: 440px;
    height: 533px;
      height: 60%;
      width: 100%;
      background-size: 100% 100%;
    #left1Echart {
      @extend .echartClass;
    }
  }
  .left2 {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: 440px 392px;
    height: 392px;
    width: 440px;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
    margin-top: 25px;
    #left2Echart {
      @extend .echartClass;
@@ -82,9 +93,9 @@
.right {
  .right1 {
    background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
    background-size: 440px 251px;
    width: 440px;
    height: 251px;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
    position: relative;
    #right1Echart {
      @extend .echartClass;
@@ -92,9 +103,9 @@
  }
  .right2 {
    background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
    background-size: 440px 251px;
    width: 440px;
    height: 251px;
      background-size: 100% 100%;
      width: 100%;
      height: 28%;
    margin-top: 30px;
    position: relative;
    #right2Echart {
@@ -103,9 +114,9 @@
  }
  .right3 {
    background: url("../../../public/img/bajgxt/left1.png") no-repeat;
    background-size: 440px 392px;
    height: 392px;
    width: 440px;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
    margin-top: 25px;
    #right3Echart {
      @extend .echartClass;
@@ -145,7 +156,7 @@
  .mapimg {
    background: url("../../../public/img/bajgxt/mapimg.png") no-repeat;
    background-size: 100% 100%;
    height: 543px;
      height: 60%;
    width: 100%;
    #map {
      width: calc(100% - 40px);
@@ -158,8 +169,8 @@

  .table {
    margin-top: 25px;
      height: calc(40% - 25px);
    width: 100%;
    height: 392px;
    background: url("../../../public/img/bajgxt/table.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
@@ -170,7 +181,7 @@
      width: 267px;
      margin-top: -13px;
      height: 50px;
      margin-left: 39%;
        margin-left: calc(50% - 135.5px);
      color: #fff;
      font-size: 20px;
      text-align: center;
@@ -192,7 +203,7 @@
      height: 56px;
      position: absolute;
      margin-left: -6px;
      margin-top: 340px;
        margin-top: calc(40% - 88px);
    }
    .righttop {
      background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
@@ -210,7 +221,7 @@
      height: 56px;
      position: absolute;
      margin-left: calc(100% - 39px);
      margin-top: 340px;
        margin-top: calc(40% - 88px);
    }
  }
}
@@ -240,10 +251,10 @@
}
/deep/ .el-input__inner {
  height: 27px;
  color: #fff;
    color: #fff !important;
  font-size: 14px;
  background-color: transparent;
  border-color: transparent;
    background-color: transparent !important;
    border-color: transparent !important;
  border-radius: 2px;
}
/deep/ .el-input {
@@ -289,6 +300,39 @@
    font-size: 20px;
  }
}
  .right-content {
    height: calc(100% - 44px);
    width: 100%;
  }
  .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) {
@@ -297,7 +341,7 @@
  color: #fff;
  background: #4162a2;
  margin-top: 38px;
  margin-left: 85%;
    margin-left: calc(100% - 140px);
  border-radius: 11px;
  height: 43px;
  display: inline-flex;
@@ -335,3 +379,8 @@
.mapBtn:nth-child(3) {
  margin-top: 160px;
}
  /deep/ .el-table__body-wrapper {
    overflow: auto;
    height: 100%;
  }
}

 src/views/home/index.vue

@@ -2,9 +2,10 @@
    <div class="bajgxt-home">
        <div class="head-title">
            <span>保安监管系统可视化平台</span>
            <img src="../../../public/img/bajgxt/linkimg.png"
      <!-- <img src="../../../public/img/bajgxt/linkimg.png"
                 @click.stop="goSystemHome"
                 title="进入系统" />
                 title="进入系统" /> -->
      <span @click.stop="goSystemHome">进入系统</span>
        </div>
        <div class="content">
            <div class="left">
@@ -26,28 +27,22 @@
            <div class="middle">
                <div class="mapimg">
                    <!-- <div></div> -->
                    <div class="mapBtn"
                         @click="getTableData('car')">
                        <img src="../../../public/img/bajgxt/car.png"
                             alt="" />
          <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="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="mapBtn" @click="getTableData('gun')">
            <img src="../../../public/img/bajgxt/gun.png" alt="" />
                        <div class="text">
                            <span>枪支</span>
                            <span>700</span>
@@ -61,45 +56,51 @@
                    <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 :data="tableData" stripe>
            <el-table-column type="index" label="序号" width="50">
                        </el-table-column>
                        <el-table-column v-if="curTableType === 'car'"
            <el-table-column
              v-if="curTableType === 'car'"
                                         prop="carNum"
                                         label="押运车辆车牌号"
                                         width="180">
              width="180"
            >
                        </el-table-column>
                        <el-table-column v-if="curTableType === 'peo'"
            <el-table-column
              v-if="curTableType === 'peo'"
                                         prop="name"
                                         label="押运人员名称"
                                         width="180">
              width="180"
            >
                        </el-table-column>
                        <el-table-column v-if="curTableType === 'gun'"
            <el-table-column
              v-if="curTableType === 'gun'"
                                         prop="number"
                                         label="枪支编号"
                                         width="180">
              width="180"
            >
                        </el-table-column>
                        <el-table-column prop="location"
                                         label="实时位置">
            <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'"
            <el-table-column prop="company" label="所属公司"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'car'"
                                         prop="linkman"
                                         label="联系人">
              label="联系人"
            >
                        </el-table-column>
                        <el-table-column v-if="curTableType === 'gun'"
            <el-table-column
              v-if="curTableType === 'gun'"
                                         prop="linkman"
                                         label="负责人">
              label="负责人"
            >
                        </el-table-column>
                        <el-table-column prop="tel"
                                         label="联系电话"> </el-table-column>
                        <el-table-column v-if="curTableType === 'peo'"
            <el-table-column prop="tel" label="联系电话"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
                                         prop="bz"
                                         label="备注">
              label="备注"
            >
                        </el-table-column>
                    </el-table>
                </div>
@@ -110,35 +111,68 @@
                        <img src="../../../public/img/bajgxt/icon2.png" />
                        <span>保安员预警统计</span>
                        <el-select v-model="value1">
                            <el-option v-for="item in options1"
              <el-option
                v-for="item in options1"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                :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 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 id="right1Echart"></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"
            <el-select v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options2"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                :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 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 id="right2Echart"></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">
@@ -227,13 +261,13 @@
            //   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 right1Echart = echarts.init(document.getElementById("right1Echart"));
      //   right1Echart.setOption(optionJs.right1Data(data));
            //   }
            // });

            let right2Echart = echarts.init(document.getElementById("right2Echart"));
            right2Echart.setOption(optionJs.right2Data(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));
        },
@@ -433,7 +467,7 @@
        },

        goSystemHome () {
            this.$router.push({ path: '/register/index' });
      this.$router.push({ path: "/register/index" });
        }
    },
    mounted () {
@@ -445,7 +479,7 @@
</script>

<style lang="scss" scoped>
@import './index.scss';
@import "./index.scss";
/deep/ .el-select-dropdown {
    border: 1px solid #9199ab;
    background-color: #022c53;

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