U 修改登录页面 添加用户列表页

whychw

2021-04-27 4160bb727b3520df4d08535b7b774067823b38e9

U 修改登录页面 添加用户列表页

 package-lock.json

@@ -1695,6 +1695,16 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
          "integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "cacache": {
          "version": "13.0.1",
          "resolved": "https://registry.npm.taobao.org/cacache/download/cacache-13.0.1.tgz?cache=0&sync_timestamp=1594429684526&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcacache%2Fdownload%2Fcacache-13.0.1.tgz",
@@ -1721,6 +1731,53 @@
            "unique-filename": "^1.1.1"
          }
        },
        "chalk": {
          "version": "4.1.1",
          "resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.1.tgz?cache=0&sync_timestamp=1618995384030&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.1.tgz",
          "integrity": "sha1-yAs/qyi/Y3HmhjMl7uZ+YYt35q0=",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
          "integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
          "integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1618559697170&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
          "integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
          "integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "source-map": {
          "version": "0.6.1",
          "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
@@ -1735,6 +1792,16 @@
          "requires": {
            "figgy-pudding": "^3.5.1",
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1618846892710&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
          "integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "terser-webpack-plugin": {
@@ -1752,6 +1819,18 @@
            "source-map": "^0.6.1",
            "terser": "^4.6.12",
            "webpack-sources": "^1.4.3"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.2.0",
          "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-16.2.0.tgz?cache=0&sync_timestamp=1616797064978&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-16.2.0.tgz",
          "integrity": "sha1-BGpTMI3Ufljv4g3ewe3sAnzjtG4=",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -10514,87 +10593,6 @@
          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
          "dev": true
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.2.0",
      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.2.0.tgz",
      "integrity": "sha512-TitGhqSQ61RJljMmhIGvfWzJ2zk9m1Qug049Ugml6QP3t0e95o0XJjk29roNEiPKJQBEi8Ord5hFuSuELzSp8Q==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.0",
          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },

 public/theme/normal.css

@@ -258,4 +258,8 @@
    -o-object-fit: contain;
    -webkit-object-fit: contain;
    object-fit: contain;
}

.table-cell .el-select {
    display: block;
}

 src/App.vue

@@ -1,5 +1,5 @@
<template>
  <div id="app">
  <div id="app" class="el-science-blue">
    <router-view></router-view>
  </div>
</template>
@@ -11,7 +11,16 @@
      }
    },
    mounted() {
      if (sessionStorage.getItem("userName")) {
      let user = {
        name: sessionStorage.getItem("username") || ''
        ,uid: sessionStorage.getItem("uid") || -1
      };


      if (user.uid > -1) {
        // 如果已登录 则从sessionStorage中取数据同步store
        this.$store.dispatch('replaceUserInfo', user);

        this.$router.push({
          path: '/index/topoGraph',
        }).catch(err => {

 src/assets/css/common.css

New file
@@ -0,0 +1,441 @@
/* padding */
.pt4 {
    padding-top: 4px;
}

.pr16 {
    padding-right: 16px;
}

/* wdith */
.w80 {
    width: 80px;
}

.w240 {
    width: 240px;
}

.w260 {
    width: 260px;
}

.w280 {
    width: 260px;
}

.w300 {
    width: 300px;
}

.w320 {
    width: 320px;
}

.w360 {
    width: 360px;
}

.w400 {
    width: 400px;
}

/* height */
.h160 {
    height: 160px;
}

.h400 {
    height: 400px;
}

.h300 {
    height: 300px;
}

.h500 {
    height: 500px;
}

.h520 {
    height: 520px;
}

.h540 {
    height: 540px;
}

.h30-percent {
    height: 30%;
}

.h33-percent {
    height: 33%;
}

.h40-percent {
    height: 40%;
}

.h50-percent {
    height: 50%;
}

.h60-percent {
    height: 60%;
}

.full-height {
    height: 100%;
}

/*padding*/
.padding-box {
    box-sizing: border-box;
}

.padding8000 {
    padding: 8px 0 0 0;
}

.padding0404 {
    padding: 0 4px 0 4px;
}

.padding0880 {
    padding: 0 8px 8px 0;
}

.padding0088 {
    padding: 0 0 8px 8px;
}

.padding0888 {
    padding: 0 8px 8px 8px;
}

.padding0808 {
    padding: 0 8px 0 8px;
}

.padding8800 {
    padding: 8px 8px 0 0;
}

.padding8880 {
    padding: 8px 8px 8px 0;
}

.padding08016 {
    padding: 0 8px 0 16px;
}

.padding816816 {
    padding: 8px 16px 8px 16px;
}

.padding8161616 {
    padding: 8px 16px 16px 16px;
}

.padding16161616 {
    padding: 16px 16px 16px 16px;
}

.padding0800 {
    padding: 0 8px 0 0;
}

.padding16040 {
    padding: 16px 0 4px 0;
}

.padding16000 {
    padding: 16px 0 0 0;
}

.padding016016 {
    padding: 0 16px 0 16px;
}

/*margin*/
.mgr8 {
    margin-left: 8px;
}

.mgr16 {
    margin-left: 16px;
}

.mgb8 {
    margin-bottom: 8px;
}

.mgt16 {
    margin-top: 16px;
}

/* */
.overflow-y {
    overflow-y: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.overflow-hidden {
    overflow: hidden;
}

/* table layout */
.table-layout {
    width: 100%;
    display: table;
}

.table-layout .table-row {
    display: table-row;
}

.table-row .table-cell {
    display: table-cell;
    white-space: nowrap;
    color: #FFE329;
}

.table-cell.text-right {
    text-align: right;
    padding-right: 10px;
}

.filter-box-table {
    box-sizing: border-box;
    border-top: 1px solid #4ba1fa;
    border-right: 1px solid #4ba1fa;
    border-left: 1px solid #4ba1fa;
}

.filter-box-table .table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #4ba1fa;
}

.filter-box-table .table-cell {
    box-sizing: border-box;
    padding-right: 4px;
}

.filter-box-table .table-cell.text-right {
    font-size: 14px;
    padding-left: 8px;
    padding-right: 8px;
}

.filter-flex-header {
    height: 32px;
}

.filter-box-table .el-select {
    width: 100%;
}

/* 电路图 */
.diagram-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.diagram-stc {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.diagram-flush {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    overflow: hidden;
}

.diagram-stc canvas,
.diagram-flush canvas {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    -webkit-object-fit: contain;
    object-fit: contain;
}

.flex-page-content {
    height: 100%;
    box-sizing: border-box;
}

.flex-page-footer {
    padding: 6px 0;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.el-pagination {
    display: inline-block;
}

.el-pagination-btns {
    margin-left: 8px;
    margin-right: 8px;
    display: inline-block;
}

.params-container {
    padding: 8px;
    background-color: #ececec;
}

.form-footer {
    margin-top: 16px;
    margin-bottom: 16px;
    text-align: right;
}

.form-footer .three-btn {
    margin-left: 12px;
}

/* 列表不对齐样式 */
.el-table th {
    display: table-cell !important;
}

.staff .el-form-item__error {
    padding-top: 0;
    top: 88%;
}

.vl-notify-content {}

/*color*/
.font-primary {
    color: #4ba0fa;
}

.font-error {
    color: #f3535f;
}

/*three home*/
.three-home {
    position: relative;
}

.three-home .three-home-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.three-home .tree-home-slot-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.three-home canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.el-science-blue .vdr {
    border: 4px dashed #0b388b;
}

.el-science-blue .handle {
    background: #1f66e7;
}

.el-science-blue .vdr.no-border {
    border: none;
}

.el-science-blue .no-border .handle {
    background: none;
}

/* light */
.hdw-light {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
}

.hdw-light:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -5px;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #4afd88;
    box-shadow: 0 0 6px 6px #4afd8880;
}

.hdw-light.error-light:before {
    background-color: #fd5b67;
    animation: errorLight 1000ms infinite;
    box-shadow: 0 0 6px 6px #fd586480;
}

.hdw-light.gray-light:before {
    background-color: #878787;
    width: 12px;
    height: 12px;
    box-shadow: none;
}

.hdw-light-text {}

@keyframes errorLight {
    0% {
        opacity: 1;
        box-shadow: 0 0 6px 6px #fd586480;
    }

    50% {
        opacity: 0.3;
        box-shadow: 0 0 0 0 #fd586480;
    }

    100% {
        opacity: 1;
        box-shadow: 0 0 6px 6px #fd586480;
    }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

 src/assets/css/science-blue.css

New file
@@ -0,0 +1,920 @@
.el-input__inner,
.el-date-editor .el-range-input,
.el-cascader__dropdown {
    background-color: #0b388b;
    border: 1px solid #4ba0fa;
    color: #FFFFFF;
}

.el-select-dropdown__item,
.el-cascader-menu {
    color: #ffffff;
}

.el-select-dropdown__item.selected,
.el-cascader-node.in-active-path {
    color: #4ba0fa;
}

.el-select-dropdown {
    background-color: #0b388b;
    border-color: #4ba0fa;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #0b388b !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-cascader-node:not(.is-disabled):focus,
.el-cascader-node:not(.is-disabled):hover {
    background-color: #416293;
}

/* .el-science-blue,
.pages-config {
    background: url(./img/science-blue/dw_bg.jpg) no-repeat;
    background-size: 100% 100%;
    color: #FFFFFF;
} */

/* tabs */
.el-science-blue .el-tabs--border-card {
    background: transparent;
    /* border: 2Px solid #143a92; */
    border-color: #00feff;
}

.el-science-blue .el-home-tabs.el-tabs--border-card {
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.el-science-blue .el-tabs--border-card>.el-tabs__header {
    background-color: #0b388a;
}

.el-science-blue .el-tabs--border-card>.el-tabs__header .el-tabs__item {
    color: #00feff;
}

.el-science-blue .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
    background-color: #00feff;
    border-color: #00feff;
    color: #041F6C;
}

.el-science-blue .el-tabs--border-card>.el-tabs__header {
    border-bottom: 1px solid #00feff;
}

.el-science-blue .el-tabs--border-card.top-border>.el-tabs__header {
    border: 1px solid #00feff;
}

/* .el-science-blue .el-tabs--border-card>.el-tabs__header .el-tabs__item:hover {
    color: #041F6C;
} */

.el-science-blue .el-tabs__item.is-left {
    color: #FFFFFF;
}

.el-science-blue .el-tabs__item.is-left.is-active {
    color: #1de6d4;
}

.el-tabs.el-tabs--left .el-tabs__content,
.el-tabs.el-tabs--left .el-tabs__content .el-tab-pane {
    height: 100%;
}

.el-science-blue .tab-menu-left {
    border-right: 1px solid #00feff;
    color: #00feff;
}

.el-science-blue .tab-menu-left:hover {
    cursor: pointer;
    background-color: #00feff;
    color: #041F6C;
}

.el-science-blue .tab-menu-left:active {
    cursor: pointer;
    background-color: #00feff;
    color: #041F6C;
}

.el-science-blue .el-tabs__nav-prev,
.el-science-blue .el-tabs__nav-next {
    color: #FFFFFF;
}

/* drawer */
.el-science-blue .el-drawer {
    padding: 6px;
}

.el-science-blue .el-drawer,
.el-science-blue .el-drawer .el-menu {
    background-color: #021a64;
}

.el-science-blue .el-drawer .el-menu.el-menu--inline {
    background-color: #0b388b;
    border-radius: 8px;
    overflow: hidden;
}

.el-science-blue .menu-content {
    color: #FFFFFF;
}



/* menu */
.el-science-blue .el-menu {
    color: #FFFFFF;
}

.el-science-blue .el-submenu__title [class^=el-icon],
.el-science-blue .submenu__title [class^=el-icon] {
    display: inline-block;
    background-color: #4ba0fa;
    padding: 8px 4px;
    border-radius: 18px;
    color: #0b388b;
    margin-right: 11px;
}

.el-science-blue .el-menu-item {
    color: #00FEFF;
    position: relative;
    transition: none;
    font-weight: bold;
}

.el-science-blue .el-menu-item.is-active .submenu__title [class^=el-icon] {
    background-color: #00FEFF;
}

.el-science-blue .el-menu.el-menu--inline .el-menu-item::before {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00fefe;
    top: 50%;
    left: 30px;
    margin-top: -3px;
}

.el-science-blue .el-submenu__title {
    color: #4ba1fa;
    font-weight: bold;
}

.el-science-blue .el-submenu__title:hover,
.el-science-blue .el-menu-item:hover {
    background-color: #c4eaea;
}

.el-science-blue .el-menu.el-menu--inline .el-menu-item {
    padding-left: 48px !important;
}

.el-science-blue .el-menu.el-menu--inline .el-menu-item.is-active {
    background-color: #00fefe;
    color: #021a64;
}

.el-science-blue .el-menu.el-menu--inline .el-menu-item.is-active::before {
    background-color: #021a64;
}

.el-science-blue .el-menu-item.is-active {
    background-color: #0b388b;
    color: #00fefe;
}

.el-science-blue .el-submenu__title i {
    color: #4ba0fa;
    font-size: 14px;
    font-weight: bold;
}

/* tree */
.el-science-blue .el-tree {
    background: none;
    color: #FFFFFF;
}

.el-science-blue .el-tree .el-tree-node:focus>.el-tree-node__content {
    background: none;
}

.el-science-blue .el-tree .el-tree-node>.el-tree-node__content:hover {
    background-color: #0b388a;
}

.el-science-blue .el-tree .el-tree-node.is-current>.el-tree-node__content {
    background-color: #0b388a;
}

.el-science-blue .params-dialog .el-tree {
    color: #606266;
}

.el-science-blue .params-dialog .el-tree .el-tree-node>.el-tree-node__content:hover {
    color: #FFFFFF;
}

.el-science-blue .params-dialog .el-tree .el-tree-node.is-current>.el-tree-node__content {
    color: #FFFFFF;
}

.el-science-blue .el-tree-node__expand-icon {
    color: #FFFFFF;
}

.el-science-blue .el-tree-node__expand-icon.is-leaf {
    color: transparent;
    cursor: default;
}



/* input */
.el-science-blue .el-input.is-disabled .el-input__inner,
.el-science-blue .el-input__inner {
    background-color: rgba(255, 227, 41, 0.2);
    border-color: rgba(255, 227, 41, 0.2);
    color: #FFE329;
}

.el-science-blue .params-dialog .el-input.is-disabled .el-input__inner,
.el-science-blue .params-dialog .el-input__inner,
.el-science-blue .params-dialog .el-textarea__inner {
    border-color: #DCDFE6;
    color: #042271;
    background-color: #cccccc;
}

.el-science-blue .params-dialog .el-form-item__label {
    color: #042271;
    font-size: 12px;
    font-weight: bold;
}

.el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-science-blue .params-dialog .el-input__inner[readonly=readonly] {
    background-color: #cccccc;
}

.el-science-blue .params-dialog .el-select,
.el-science-blue .params-dialog .el-date-editor.el-input,
.el-science-blue .params-dialog .el-date-editor.el-input__inner {
    width: 100%;
}

.el-science-blue .params-dialog .el-select .el-input__inner[readonly=readonly] {
    background-color: #cccccc;
}

.el-science-blue .params-dialog .el-select .el-input .el-select__caret {
    color: #042271;
}

.el-science-blue .params-dialog .el-form-item--mini.el-form-item,
.el-science-blue .params-dialog .el-form-item--small.el-form-item {
    margin-bottom: 8px;
}

.el-science-blue .params-dialog .three-btn {
    box-shadow: none;
    background-color: #042271;
}

.el-science-blue .params-dialog .three-btn:active {
    box-shadow: none;
    position: relative;
    top: 0px;
}

.el-science-blue .params-dialog .el-select .el-input.is-focus .el-input__inner {
    border-color: #042271;
}

.el-science-blue .el-input__prefix,
.el-input__suffix,
.el-science-blue .el-select .el-input .el-select__caret {
    color: #FFE329;
}

.el-science-blue .el-select:hover .el-input__inner {
    border-color: rgba(255, 227, 41, 0.8);
}

.el-science-blue .el-cascader:not(.is-disabled):hover .el-input__inner {
    cursor: pointer;
    border-color: rgba(255, 227, 41, 0.8);
}

.el-science-blue .el-cascader .el-input .el-input__inner:focus,
.el-science-blue .el-cascader .el-input.is-focus .el-input__inner {
    border-color: rgba(255, 227, 41, 0.8);
}

.el-science-blue .el-select .el-input.is-focus .el-input__inner {
    border-color: rgba(255, 227, 41, 0.8);
}

.el-science-blue .el-input__inner::-webkit-input-placeholder {
    color: #FFE329;
}

.el-science-blue .params-dialog .el-input__inner::-webkit-input-placeholder,
.el-science-blue .params-dialog .el-textarea__inner::-webkit-input-placeholder {
    color: #dddddd;
}

/* bg white */
.el-science-blue .el-select:hover .el-input__inner,
.el-science-blue .bg-white .el-select .el-input.is-focus .el-input__inner {
    border-color: #409EFF;
}

.el-science-blue .bg-white .el-select .el-input .el-select__caret {
    color: #042271;
}

.el-science-blue .bg-white .el-input__inner::-webkit-input-placeholder {
    color: #c0c4cc;
}

/* table */
.el-science-blue .el-table {
    color: #FFFFFF;
}

.el-science-blue .el-table,
.el-science-blue .el-table__expanded-cell,
.el-science-blue .el-table tr {
    background: none;
}

.el-science-blue .el-table th {
    background: none;
    font-size: 14px;
}

.el-science-blue .el-table thead {
    color: #00feff;
    font-weight: bold;
}

.el-science-blue .el-table--enable-row-hover .el-table__body tr:hover>td,
.el-science-blue .el-table__body tr.hover-row>td {
    background-color: #5990c4;
}

.el-science-blue .el-table__fixed-right {
    background-color: #2e347e;
    z-index: 9;
}

.el-science-blue .el-table th.is-leaf {
    border-bottom: none;
}

.el-science-blue .el-table td {
    border-bottom: none;
    background: #293677;
}

.el-science-blue .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: none;
}

.el-science-blue .el-table th>.cell {
    font-weight: bold;
}

.el-science-blue .el-table--border::after,
.el-science-blue .el-table--group::after,
.el-science-blue .el-table::before {
    background-color: transparent;
}

.el-science-blue .el-table__fixed-right::before,
.el-science-blue .el-table__fixed::before {
    background-color: transparent;
}

.el-science-blue .el-table td .el-button--primary {
    border-color: #f69f40;
    background-color: #f69f40;
    color: #041f6e;
}

.el-science-blue .el-table td .el-button--primary:hover {
    border-color: #f68e38;
    background-color: #f68e38;
}

.el-science-blue .el-table td .el-button--danger {
    border-color: #f3535f;
    background-color: #f3535f;
    color: #ffe328;
}

.el-science-blue .el-table td .el-button--danger:hover {
    border-color: #f3435b;
    background-color: #f3435b;
}

.el-science-blue .el-table td .el-button--success {
    border-color: #8fed7d;
    background-color: #8fed7d;
    color: #041f6e;
}

.el-science-blue .el-table td .el-button--success:hover {
    border-color: #6bed6b;
    background-color: #6bed6b;
}

.el-science-blue .el-table.border-table .el-table__body-wrapper {
    box-sizing: border-box;
    border-left: 1Px solid #00fefe;
    border-right: 1Px solid #00fefe;
    border-bottom: 1Px solid #00fefe;
    border-top: 1Px solid #00fefe;
}

.el-science-blue .el-table .table-list-name {
    color: #00fefe;
    border-right: 1px solid #00fefe;
}

.el-science-blue .el-table .table-list-name.white-color {
    color: #fff;
}

.el-science-blue .el-table .table-list-name.no-border {
    border-right: none;
}

.el-science-blue .el-table th.table-list-value {
    color: #00fefe;
}

.el-science-blue .el-table .table-list-value {
    color: #fef200;
}

.el-table--small td.table-list-name,
.el-table--small td.table-list-value {
    padding: 4px 0;
}

/* el-popover */
.el-popover {
    padding: 0;
    background: none;
    border: none;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: rgb(30, 125, 219);
}

.el-select-dropdown.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #FFF;
}

/* dialog */
.el-science-blue .el-dialog__header {
    padding: 8px 16px;
    background-color: #042271;
}

.el-science-blue .el-dialog__title {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

.el-science-blue .el-dialog__headerbtn {
    top: 8px;
}

.el-science-blue .el-dialog__headerbtn .el-dialog__close {
    color: #FFFFFF;
}

.el-science-blue .el-dialog__body {
    padding: 0;
}

/* el-transfer */
.el-science-blue .el-transfer-panel {
    background: #042271;
    border: none;
}

.el-science-blue .el-transfer-panel__header {
    background-color: #0c3688;
    border-bottom: none;

}

.el-science-blue .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label {
    color: #4ba1fa;
}

.el-science-blue .el-transfer-panel__item.el-checkbox {
    color: #FFFFFF;
}

.el-science-blue .el-transfer-panel .el-transfer-panel__header .el-checkbox .el-checkbox__label span {
    color: #FFFFFF;
}

.el-science-blue .el-checkbox__input.is-checked .el-checkbox__inner,
.el-science-blue .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #00feff;
    border-color: #00feff;
}

.el-science-blue .el-checkbox__inner::after {
    border-color: #052270;
}

/* el-pagination */
.el-science-blue .el-pagination__total,
.el-science-blue .el-pagination__jump {
    color: #FFFFFF;
}

.el-science-blue .el-pagination .btn-next,
.el-science-blue .el-pagination .btn-prev {
    background: none;
    color: #3ebdc9;
}

.el-science-blue .el-pager li {
    color: #FFFFFF;
    background: none;
}

.el-science-blue .el-pager li.active {
    color: #409EFF;
}

.el-science-blue .el-pagination .el-input__inner {
    background-color: #0b388b;
    border-color: #4ba0fa;
    color: #FFFFFF;
}

.el-science-blue .el-pagination .el-select .el-input.is-focus .el-input__inner,
.el-science-blue .el-pagination .el-select:hover .el-input__inner {
    border-color: #3eaffa;
}

.el-science-blue .el-pagination .el-select .el-input .el-select__caret {
    color: #4ba0fa;
}

.el-science-blue .el-pagination-btns .el-button--primary {
    background-color: #4ba0fa;
    color: #041f6c;
}

/* el-radio */
.el-science-blue .el-radio__label {
    color: #FFFFFF;
}


.el-science-blue .pifu-list-header {
    background-color: #0c3688;
    color: #00feff;
}

.el-science-blue .flex-layout-body {
    /*TODO*/
    /*background-color: #222767;*/
}

.el-science-blue .page-header-container .flex-layout-body {
    background-color: transparent;
}

.el-science-blue .content-box-title {
    background-image: linear-gradient(to right, #0c3688, #042271);
    background-image: -ms-linear-gradient(to right, #0c3688, #042271);
    background-image: -webkit-linear-gradient(to right, #0c3688, #042271);
    background-image: -moz-linear-gradient(to right, #0c3688, #042271);
    color: #00feff;
}

.el-science-blue .content-box-container.siteList {
    background-color: #042271;
}

.el-science-blue .content-box {
    border: 2px solid #143a92;
}

.el-science-blue .map-container {
    border: 1px solid #143a92;
}

.el-science-blue .pifu-item-img.active .el-image {
    border: 3px solid #00FEFE;
    box-sizing: border-box;
}

.el-science-blue .hdw-badge-btn {
    background-color: #001260;
    border: 1px solid #0090fd;
    color: #FFFFFF;
}

.el-science-blue .hdw-badge-value {
    background-color: #4ba1fa;
    color: #041F6C;
}

.el-science-blue .my-card {
    border: 2px solid #143a92;
    background-color: #042271;
}

.el-science-blue .my-card-header {
    background-image: linear-gradient(to right, #0c3688, #0c368800);
}

.el-science-blue .power-tree-wrapper {
    background-color: #042271;
}

/* .el-science-blue .page-header-left {
    background: url(./img/science-blue/page-header-left-bg.png) 0 0 no-repeat;
    background-size: 150% 94%;
} */

.el-science-blue .page-header-left span {
    color: #00FEFF;
}

.el-science-blue .page-header-left span.sys-version {
    color: #00FEFF;
}

.el-science-blue .flex-layout.noborder {
    border: none;
    border-top: 1px solid #00fefe;
}

.el-science-blue .flex-layout.top-border {
    border: none;
}

.el-science-blue .filter-box-table {
    box-sizing: border-box;
    border-top: 1px solid #4ba1fa;
    border-right: 1px solid #4ba1fa;
    border-left: 1px solid #4ba1fa;
}

.el-science-blue .filter-box-table .table-cell {
    border-bottom: 1px solid #4ba1fa;
}

.el-science-blue .map-icon-details-wrapper {
    border: 2px solid #0b388b;
    /*TODO*/
    background-color: #052272;
    color: #00ffff;
}

.el-science-blue .map-icon-details-title {
    background: #0b388b;
    color: #00ffff;
}

.el-science-blue .transparentBtn {
    background-color: transparent;
    border-color: transparent;
    color: #4ba1fa;
}

.el-science-blue .transparentBtn:hover {
    background-color: transparent;
    border-color: transparent;
    color: #00FEFF;
}

.el-science-blue .statusWarp {
    background-color: #4ba1fa;
}

.el-science-blue .statusWarp.error-state {
    background-color: #ff5503;
}

.el-science-blue .statusWarp.stop-state {
    background-color: #afafaf;
}

.el-science-blue .hdw-avatar-icon {
    background-color: #4ba1fa;
    color: #032c8f;
}

.el-science-blue .hdw-avatar-text {
    color: #4ba1fa;
}

.el-science-blue .header-carve-up {
    background-color: #4ba1fa;
}

.el-science-blue .page-content-tools .hdw-btn {
    background-color: transparent;
    border-color: transparent;
    color: #4ba1fa;
}

.hdw-menu-list {
    border-color: #00feff !important;
}

.hdw-menu-item a {
    background-color: #0b388a !important;
}

.hdw-menu-item a:hover {
    background-color: #1f57c0 !important;
}

.el-picker-panel {
    color: #ffffff !important;
    border: 1px solid #2761b5 !important;
    background: #042271 !important;
}

.el-picker-panel .el-picker-panel__footer {
    background-color: #042271 !important;
    ;
}

.el-picker-panel .el-picker-panel__footer .el-button--default {
    background-color: #00feff !important;
    border-color: #00feff !important;
    color: #032c8f !important;
}

.el-picker-panel .el-picker-panel__footer .el-button--text {
    color: #00feff !important;
}

.el-date-table td.next-month,
.el-date-table td.prev-month {
    color: #4ba1fa !important;
}

.el-date-table th {
    color: #ffffff !important;
    border-bottom: solid 1px #2761b5;
}

.el-date-picker__header-label {
    color: #ffffff !important;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: #042271;
}

.vl-notify.vl-notify-main {
    background-color: #153953 !important;
    border: none !important;
    color: #ffe329 !important;
}

.vl-notify.vl-notify-alert h2.vl-notice-title {
    background-color: #ffe329 !important;
    border-bottom: none !important;
    color: #041f6c !important;
}

.notify-btn {
    color: #041f6c !important;
    background-color: #90ed7d !important;
    border: 1px solid #90ed7d !important;
}

.notify-btn-primary {
    color: #041f6c !important;
    background-color: #f69f41 !important;
    border: 1px solid #f69f41 !important;
}

.el-date-table td.in-range div,
.el-date-table td.in-range div:hover,
.el-date-table.is-week-mode .el-date-table__row.current div,
.el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: #416293;
}

/* el-progress__text */
.el-science-blue .el-progress__text {
    color: #FFFFFF;
}

/* full-screen */
/* .e-chart-root.full-screen .e-chart-container {
    background: url("./img/science-blue/dw_bg.jpg") no-repeat;
} */

.el-date-picker__header .el-picker-panel__icon-btn {
    color: #00fefe;
}

.module-info {
    background: #072886;
}

.table-wrapper {
    /*TODO*/
    background: #052272;
}

/*science box*/
.science-box .box-header {
    color: #FFFD1E;
}

.table-info-list td {
    color: #FFFD1E;
}

/* flex-box */
.flex-box {
    background-image: radial-gradient(#151f4140, #3667ec40);
    ;
}

.flex-box .flex-box-border {
    width: 30px;
    height: 30px;
}

.flex-page-wrapper-border {
    border: 1px solid #143a92;
}

.chart-wrapper:before,
.chart-wrapper:after,
.chart-wrapper-corner {
    width: 16px;
    height: 16px;
}

.border-full {
    border: 1Px solid #00fefe;
}

.border-right {
    border-right: 1Px solid #00fefe;
}

.el-science-blue .time-icon i {
    color: #041F6C;
}

.el-science-blue .term-date {
    background-color: #00FEFF;
    color: #002A70;
}

.el-science-blue .term-date-value {
    background-color: #050D5F;
    color: #FFFFFF;
}

.el-science-blue .el-form-item__label {
    color: #409eff;
}

 src/components/FlexLayout.vue

New file
@@ -0,0 +1,69 @@
<template>
    <div class="flex-layout" :class=getRootClass :style="getRootStyle">
        <div class="flex-layout-header">
            <slot name="header"></slot>
        </div>
        <div class="flex-layout-body" :class="{'no-bg': noBg}">
            <slot></slot>
        </div>
        <div class="flex-layout-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        direction: {
            type: String,
            default: '',
        },
        height: {
            type: String,
            default: "100%",
        },
        noBg: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        getRootClass: function() {
            return {
               'direction-row':  this.direction == 'row'?true: false
            };
        },
        getRootStyle: function() {
            return {
                'height': this.height,
            }
        },
    }
}
</script>

<style scoped>
.flex-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.flex-layout.direction-row {
    flex-direction: row;
}
.flex-layout.full-ht {
    height: 100%;
}

.flex-layout-body {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}
.flex-layout-body.no-bg {
    background-color: #05227200;
}
</style>



 src/components/PageHeader.vue

@@ -6,7 +6,7 @@
                <span class="avatar-icon">
                    <i class="el-icon-s-home"></i>
                </span>
                <span class="avatar-text">退出登录</span>
                <span class="avatar-text" @click="logout">退出登录</span>
            </div>
            <div class="avatar">
                <span class="avatar-icon">
@@ -25,11 +25,14 @@
    export default {
        data() {
            return {
                username: 'superUser'
                username: this.$store.state.user.username
            }
        },
        methods: {

            logout () {
                this.$store.dispatch('setLogin');
                this.$router.push({path: '/login'});
            }
        }
    }
</script>

 src/components/PageMenu.vue

@@ -173,8 +173,8 @@
                    childrens: [{
                        label: "用户管理",
                        icon: "el-icon-s-platform",
                        name: "",
                        src: "",
                        name: "userList",
                        src: "userlist",
                    }, {
                        label: "用户权限",
                        icon: "el-icon-s-platform",

 src/components/pagePanel.vue

New file
@@ -0,0 +1,68 @@
<template>
    <div class="page-panel">
        <div :class="['title', {'border': border}]">
            <div class="title-txt">{{title}}</div>
            <div class="tools">
                <slot name="btnGrp"></slot>
            </div>
        </div>
        <div class="content">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        border: {
            type: Boolean,
            default: false,
        }
        ,title: {
            type: String,
            default: "",
        }
    }
}
</script>

<style scoped>
.page-panel {
    background: #222767;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    font-size: 16px;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}
.title {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}
.title.border {
    border-bottom: 1px #6166ce solid;
}
.tools {
    display: -webkit-flex;
    display: flex;
}
.content {
    flex: 1;
}
.page-panel.page-list-banner .content {
    display: -webkit-flex;
    display: flex;
    padding: 10px 0;
}
.page-panel.page-list-banner .banner-btn-grp {
    display: -webkit-flex;
    display: flex;
}
</style>



 src/main.js

@@ -9,10 +9,16 @@
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './assets/css/basic.css'
import './assets/css/common.css'
import './assets/css/science-blue.css'
import '../public/theme/normal.css'

import '@/assets/js/rem.js'

import FlexLayout from './components/FlexLayout.vue'
// 注册全局自定义组件
Vue.component("FlexLayout", FlexLayout);

Vue.use(ElementUI, {
  zIndex: 99
});

 src/pages/login.vue

@@ -1,38 +1,50 @@
<template>
    <div class="login_container">
        <div class="sliderCon">
            <div class="logo">
                <img src="../assets/images/yuanchang_logo2.png" class="logoImg">
                综合管理平台
            </div>
            <img src="../assets/images/login-img.png" class="picImg">
        </div>
        <div class="login_box">
            <div class="title">用户登录</div>
            <!--  登录表单区 -->
            <el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
                <!-- 用户名 -->
                <el-form-item>
                    <el-input class="input" v-model="loginForm.username" prefix-icon="el-icon-user"
                        @keyup.enter.native.stop="onSubmit"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item>
                    <el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
                        @keyup.enter.native.stop="onSubmit"></el-input>
                </el-form-item>
                <el-form-item class="btns">
                    <el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
                </el-form-item>
                <el-form-item class="text" v-if="status">
                    <p style="color:red">{{ danger }}</p>
                </el-form-item>
            </el-form>
            <div class="_left" :class="{ani: isMounted}">
                <div class="container_3d" ref="container3d"></div>
                <div class="txtwav" ref="txt">集中测控系统</div>
            </div>
            <div class="_right">
                <div class="title">用户登录 / USER LOGIN</div>
                <!--  登录表单区 -->
                <el-form label-width="0px" class="login_from" :model="loginForm" ref="loginFormRef">
                    <!-- 用户名 -->
                    <el-form-item>
                        <el-input class="input" v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"
                            @focus="focus"
                            @keyup.enter.native.stop="onSubmit"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item>
                        <el-input class="input" v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"
                            placeholder="请输入密码"
                            @focus="focus"
                            @keyup.enter.native.stop="onSubmit"></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button :loading="loading" type="primary" @click="onSubmit" class="loginBtn">登录</el-button>
                    </el-form-item>
                    <el-form-item class="text" v-if="status">
                        <p style="color:red">{{ danger }}</p>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- copyright -->
        <div class="copyright">Copyright &copy;迈道施科技 (武汉) 有限公司</div>
    </div>
</template>

<script>
    import * as THREE from 'three';
    import "three/examples/js/controls/OrbitControls"
    import axios from "@/assets/js/axios";
    let scene = null;
    let camera = null;
    let renderer = null;
    let group = null;

    export default {
        components: {},
        data() {
@@ -45,6 +57,7 @@
                    password: "",

                }
                ,isMounted: false
            };
        },
        methods: {
@@ -57,23 +70,197 @@
                    self.loading = false;
                    return false
                }
                if (self.loginForm.username == "admin" || self.loginForm.username == "test") {
                    sessionStorage.setItem("userName", self.loginForm.username);
                    self.$router.push({
                        path: '/index',
                    }).catch(err => {
                        console.log(err);
                let params = {
                    userName: this.loginForm.username,
                    password: this.loginForm.password
                };
                // console.log(params, 'params');
                axios({
                    method: "POST",
                    url: "/login/login",
                    params: params
                }).then((res) => {
                    this.loading = false;
                    res = res.data;
                    console.log(res, 'login res');
                    if (res.code) {
                        // sessionStorage.setItem('userName', this.loginForm.username);
                        this.$store.dispatch('setLogin', {name: res.data.name, uid: res.data.id});
                        this.$router.push({
                            path: '/index'
                        });
                    } else {
                        this.status = true;
                        this.danger = res.msg;
                        // this.$message({
                        //     type: 'success',
                        //     message: res.msg
                        // });
                    }
                }).catch((err) => {
                    this.loading = false;
                    this.$message({
                        type: 'error'
                        ,message: err
                    });
                } else {
                    self.danger = "账号或密码不正确!";
                    self.status = true;
                    self.loading = false;
                });
                // if (self.loginForm.username == "admin" || self.loginForm.username == "test") {
                //     sessionStorage.setItem("userName", self.loginForm.username);
                //     self.$router.push({
                //         path: '/index',
                //     }).catch(err => {
                //         console.log(err);
                //     });
                // } else {
                //     self.danger = "账号或密码不正确!";
                //     self.status = true;
                //     self.loading = false;
                // }
            }
            // 输入框获得焦点时 关闭错误提示
            ,focus () {
                this.status = false;
            }
            ,init3d () {
                let contain = this.$refs.container3d;
                let width = contain.clientWidth;
                let height = contain.clientHeight;
                // console.log(contain, width, height);

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera(
                    50
                    ,width / height
                    ,0.01
                    ,1000
                    );

                camera.position.set(80, 180, 300);

                scene.add(camera);

                // 灯光
                const lights = [];
                lights[0] = new THREE.PointLight(0xffffff, 1, 0);
                lights[1] = new THREE.PointLight(0xffffff, 1, 0);
                lights[2] = new THREE.PointLight(0xffffff, 1, 0);

                lights[0].position.set(0, 200, 0);
                lights[1].position.set(100, 200, 100);
                lights[2].position.set(-100, -200, -100);

                scene.add(lights[0]);
                scene.add(lights[1]);
                scene.add(lights[2]);

                // 几何图形组
                group = new THREE.Group();

                const geometry = new THREE.BufferGeometry();
                geometry.setAttribute('position', new THREE.Float32BufferAttribute( [], 3 ));

                const lineMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 });
                // const meshMaterial = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true });

                group.add(new THREE.LineSegments( geometry, lineMaterial ));

                let data = {
                        radius: 120,
                        detail: 0
                    };

                group.children[0].geometry.dispose();
                group.children[0].geometry = new THREE.WireframeGeometry(new THREE.OctahedronGeometry(
                                data.radius, data.detail
                            ));

                // 获取顶点坐标
                let pos_arr = group.children[0].geometry.attributes.position;
                // console.log(pos_arr);
                
                let points = [];
                for (let i = 0, j = pos_arr.array.length; i < j; i += 3) {
                    // points.push(new THREE.Vector3(pos_arr.array[i], pos_arr.array[i + 1], pos_arr.array[i + 2]))
                    points.push([pos_arr.array[i], pos_arr.array[i + 1], pos_arr.array[i + 2]])
                }
            },
                // 在顶点位置画小球
                points.forEach((v) => {
                    // 小球半径  经纬度切片数
                    var radius = 8, segemnt = 16, rings = 16;
                    
                    // 小球材质
                    var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
                 
                    var sphere = new THREE.Mesh(
                        new THREE.SphereGeometry(radius, segemnt, rings),
                        sphereMaterial
                        );

                    // 设置小球位置
                    sphere.position.set(...v);
                    group.add(sphere);
                });
                // console.log(points, 'points======');
                scene.add( group );

                // renderer = new THREE.WebGLRenderer();
                renderer = new THREE.WebGLRenderer( { antialias: true , alpha: true} );
                renderer.setSize(contain.clientWidth, contain.clientHeight);
                // 好像无效
                // renderer.setClearColor( 0x000000, 0 );  // the default

                const orbit = new THREE.OrbitControls(camera, renderer.domElement);
                orbit.enableZoom = false;

                contain.appendChild(renderer.domElement);

                renderer.render(scene, camera);

                this.render();
            }
            ,render () {
                if (!this.isMounted) {
                    console.log('停止更新');
                    return;
                }
                setTimeout(this.render, 1000 / 60);
                // requestAnimationFrame();

                group.rotation.x += 0.005;
                group.rotation.y += 0.005;

                renderer.render( scene, camera );
            }
            ,resize () {
                let element = this.$refs.container3d;
                let width = element.clientWidth;
                let height = element.clientHeight;
                camera.aspect = width / height;
                camera.updateProjectionMatrix();
                renderer.setSize(width, height);
            }
            ,initTextAni () {
                let $txt = this.$refs.txt;
                let text = $txt.textContent.trim();
                $txt.innerHTML = null;
                for (let t in text) {
                    let span = document.createElement('span');
                    span.innerHTML = text[t] === ' ' ? "&nbsp;" : text[t];
                    $txt.appendChild(span);
                }
            }
        },
        computed: {},
        mounted() {

            this.isMounted = true;
            this.initTextAni();
            this.init3d();
            window.addEventListener('resize', this.resize);
        }
        ,beforeDestroy () {
            this.isMounted = false;
            window.removeEventListener('resize', this.resize);
        }
    };
</script>
@@ -138,47 +325,96 @@
        color: #ff0000;
    }

    .sliderCon {
        margin-top: -6vh;
    }

    .sliderCon .logo {
        display: flex;
        align-items: center;
        font-size: 48px;
        color: #007fe1;
        font-weight: bold;


    }

    .sliderCon .logo .logoImg {
        height: 40px;
        margin-right: 14px;
    }

    .sliderCon .picImg {
        width: 580px;
        margin-top: 12vh;
    }

    /* 登录框 */
    .login_box {
        width: 430px;
        height: 400px;
        background-color: #fff;
        border-radius: 3px;
        padding: 40px 60px;
        /*width: 840px;*/
        height: 450px;
        /*background-color: #fff;*/
        /*border-radius: 3px;*/
        /*padding: 40px 60px;*/
        box-sizing: border-box;
        position: relative;
        /*margin-top: -20%;*/
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
        z-index: 2;
        display: inline-block;
        /*display: -webkit-flex;
        display: flex;*/

    }

    .login_box > div {
        /*flex: 1;*/
        width: 420px;
        height: 100%;
        float: left;
    }

    ._right {
        background: #fff;
        padding: 70px 60px;
        -webkit-box-shadow: 0 0 16px -4px #000;
        box-shadow: 0 0 16px -4px #000;
    }
    ._left {
        background: #2e00b2;
        /*-webkit-transform: translate(100%, 0);
        transform: translate(100%, 0);*/
        /*-webkit-transition: -webkit-transform 1.3s;
        transition: transform 1.3s;*/
        position: relative;
        z-index: -1;
        font-size: 26px;
        color: #fff;
        text-align: center;
    }
    ._left .container_3d {
        width: 100%;
        height: 58%;
    }

    ._left.ani {
        -webkit-animation: trans-left ease-in-out 1.3s both;
        animation: trans-left ease-in-out 1.3s both;
    }

    @-webkit-keyframes trans-left {
        from {
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }
        to {
            -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        }
    }
    @keyframes trans-left {
        from {
            -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
        }
        to {
            -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        }
    }

    .login_box .title {
        font-size: 20px;
        color: #007fe1;
        font-size: 18px;
        /*color: #007fe1;*/
        color: #999;
        font-weight: bold;
        margin-bottom: 30px;
    }

    >>> .el-form-item__content {
        line-height: 50px;
    }
    >>> .el-input__inner {
        height: 50px;
        line-height: 50px;
    }

    /* v图片的盒子 */
@@ -207,7 +443,7 @@
        background-color: #eeeeee;
    }

    .login_box::after {
    /*.login_box::after {
        content: "";
        display: block;
        width: 446px;
@@ -217,7 +453,7 @@
        left: -8px;
        background: rgba(255, 255, 255, 0.4);
        z-index: -1;
    }
    }*/

    /* 登录按钮 */
    .btns {
@@ -228,8 +464,9 @@
        width: 100%;
        display: block;
        text-align: center;
        height: 48px;
        height: 50px;
        margin-top: 10px;
        background: #2e00b2;
    }

    .regBtn {
@@ -237,7 +474,363 @@
        margin-right: 10px;
    }

    @media screen and (max-width: 1680px) {
    .copyright {
        position: fixed;
        bottom: 10%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        text-align: center;
        font-size: 14px;
        color: #ccc;
    }

    >>> :focus-visible {
        outline: none;
    }

    @keyframes flip-wave-0 {
        4% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        8% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+0) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-0;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-1 {
        8% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        12% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+1) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-1;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-2 {
        12% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        16% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+2) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-2;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-3 {
        16% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        20% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+3) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-3;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-4 {
        20% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        24% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+4) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-4;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-5 {
        24% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        28% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+5) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-5;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-6 {
        28% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        32% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+6) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-6;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-7 {
        32% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        36% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+7) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-7;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-8 {
        36% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        40% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+8) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-8;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-9 {
        40% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        44% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+9) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-9;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-10 {
        44% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        48% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+10) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-10;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-11 {
        48% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        52% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+11) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-11;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-12 {
        52% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        56% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+12) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-12;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-13 {
        56% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        60% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+13) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-13;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-14 {
        60% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        64% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+14) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-14;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-15 {
        64% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        68% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+15) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-15;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-16 {
        68% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        72% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+16) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-16;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-17 {
        72% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        76% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+17) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-17;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-18 {
        76% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        80% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+18) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-18;
        animation-iteration-count: infinite;
    }
    @keyframes flip-wave-19 {
        80% {
            transform: translate3d(0, -16px, 0) rotate(720deg);
        }
        85% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
        100% {
            transform: translate3d(0, 0, 0) rotate(720deg);
        }
    }
    .txtwav :nth-child(20n+19) {
        display: inline-block;
        animation-duration: 4s;
        animation-name: flip-wave-19;
        animation-iteration-count: infinite;
    }

    /*@media screen and (max-width: 1680px) {
        .sliderCon .logo {
            font-size: 40px;
        }
@@ -255,5 +848,5 @@
            width: 416px;
            height: 376px;
        }
    }
    }*/
</style>

 src/pages/user/js/api.js

New file
@@ -0,0 +1,87 @@
import axios from "@/assets/js/axios";

/**
 * 根据id查询用户信息
 */
export const getUserInfo = (id) => {
  return axios({
    method: "GET",
    url: "/user/all",
    params: {id}
  });
}

/**
 * 查询所有部门
 */
export const getDepts = () => {
  return axios({
    method: "GET",
    url: "/user/getDepts",
  });
}

/**
 * 查询所有职务
 */
export const getJobs = () => {
  return axios({
    method: "GET",
    url: "/user/getJobs",
  });
}

/**
 * 查询所有用户
 */
export const getAllUser = () => {
  return axios({
    method: "GET",
    url: "/user/all",
  });
}

/**
 * 查询所有用户分页 带搜索 分页
 */
export const searchUser = (params, data) => {
  return axios({
    method: "GET",
    url: "/user/page",
    params,
    data
  });
}

/**
 * 添加用户
 */
export const addUser = (data) => {
  return axios({
    method: "POST",
    url: "/user",
    data
  });
}

/**
 * 编辑用户
 */
export const updateUser = (data) => {
  return axios({
    method: "PUT",
    url: "/user",
    data
  });
}

/**
 * 删除用户
 */
export const delUser = (id) => {
  return axios({
    method: "DELETE",
    url: "/user",
    params: {id}
  });
}

 src/pages/user/list.vue

New file
@@ -0,0 +1,239 @@
<template>
    <div class="container">
        <flex-layout>
            <page-panel class="page-list-banner" title="数据筛选" :border="true" slot="header">
              <template slot="btnGrp">
                <el-button type="primary" @click="resetParams" size="mini">高级筛选</el-button>
              </template>
              <div class="table-layout">
                  <div class="table-row">
                    <!-- 查询条件 -->
                    <div class="table-cell text-right">输入查询</div>
                    <div class="table-cell">
                      <el-input
                        type="text"
                        v-model="keyword"
                         size="small"
                        placeholder="姓名/账号/手机/邮箱"
                        ></el-input>
                    </div>
                    <div class="table-cell text-right">员工职务</div>
                    <div class="table-cell">
                      <el-select size="small" v-model="job">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option
                          v-for="(item, index) in jobs"
                          :key="'job_' + index"
                          :label="item.jobName"
                          :value="item.jobId"></el-option>
                      </el-select>
                    </div>
                    <div class="table-cell text-right">所属部门</div>
                    <div class="table-cell">
                      <el-select size="small" v-model="dept">
                      <el-option label="全部" :value="0"></el-option>
                        <el-option
                          v-for="(item, index) in depts"
                          :key="'dept_' + index"
                          :label="item.deptName"
                          :value="item.deptId"></el-option>
                      </el-select>
                    </div>
                  </div>
              </div>
              <div class="banner-btn-grp">
                <div class="el-pagination-btns">
                    <el-button type="primary" @click="getList" round size="mini" icon="el-icon-search">查询
                    </el-button>
                </div>
                <div class="el-pagination-btns">
                    <el-button type="primary" @click="resetParams" round size="mini" icon="el-icon-refresh-right">重置</el-button>
                </div>
              </div>
            </page-panel>
            <page-panel
              title="数据列表"
              class="flex-page-content">
                <template slot="btnGrp">
                  <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-download">导入</el-button>
                  <el-button type="primary" @click="resetParams" size="mini" icon="el-icon-plus">添加</el-button>
                </template>
                <el-table stripe size="mini" header-row-class-name="header-primary" height="100%"
                    :data="table.datas" v-loading="table.loading" element-loading-background="rgba(0, 0, 0, 0.8)">
                    <!-- <el-table-column type="index" width="50" label="序号"></el-table-column> -->
                    <el-table-column :prop="item.prop" :label="item.label" :min-width="item.minWidth"
                        :resizable="false" align="center" v-for="(item,index) in table.headers" :key="index">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="300" align="center">
                        <template slot-scope="scope">
                          <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                          <el-button size="mini">权限</el-button>
                          <el-button type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </page-panel>
            <div class="flex-page-footer" slot="footer">
                <el-pagination size="mini" :current-page="page.pageCurr" :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="page.pageAll" @current-change="currentChange" @size-change="sizeChange"></el-pagination>
            </div>
        </flex-layout>
    </div>
</template>

<script>
    import pagePanel from '@/components/pagePanel';
    import {
      getDepts
      ,getAllUser
      ,getJobs
      ,searchUser
    } from './js/api';

    export default {
        data () {
            return {
              keyword: ''
              ,jobs: []
              ,depts: []
              ,job: 0
              ,dept: 0
              ,table: {
                headers: [
                  // createTime: null
                  // dept: "财务部"
                  // email: null
                  // id: 1
                  // job: "财务专员"
                  // name: "perry"
                  // password: "1"
                  // phone: "13433233575"
                  // realName: "张三"
                  // salt: null
                  // sex: 1
                  // state: 0
                  {
                    prop: "realName"
                    ,label: "员工姓名"
                    ,minWidth: 200
                  }
                  ,{
                    prop: "sexStr"
                    ,label: "性别"
                    ,minWidth: 120
                  }
                  ,{
                    prop: "dept"
                    ,label: "所属部门"
                    ,minWidth: 120
                  }
                  ,{
                    prop: "job"
                    ,label: "当前职务"
                    ,minWidth: 140
                  }
                  ,{
                    prop: "name"
                    ,label: "登录账号"
                    ,minWidth: 140
                  }
                  ,{
                    prop: "phone"
                    ,label: "手机"
                    ,minWidth: 120
                  }
                  ,{
                    prop: "stateStr"
                    ,label: "启用"
                    ,minWidth: 120
                  }
                ]
                ,datas: []
                ,loading: false
              }
              ,page: {
                pageCurr: 1
                ,pageSize: 10
                ,pageAll: 0
              }
            };
        }
        ,components: {
            pagePanel
        }
        ,methods: {
          // 查询用户列表
          getList () {
            searchUser(params, data).then((res) => {
              res = res.data;
              console.log(res);
              res.forEach((v) => {
                v.sexStr = v.sex ? '男' : '女';
                v.stateStr = !v.state ? '己启用' : '已冻结';
              });
              this.table.datas = res;
            }).catch((err) => {
              this.$message({
                type: 'error'
                ,message: err
              });
            });
          }
          // 查询所有职务
          ,getJobs () {
            getJobs().then((res) => {
              // console.log(res, 'jobs');
              res = res.data;
              this.jobs = res;
            }).catch((err) => {
              console.error(error);
            });
          }
          // 查询所有部门
          ,getDepts () {
            getDepts().then((res) => {
              // console.log(res, 'depts');
              res = res.data;
              this.depts = res;
            }).catch((err) => {
              console.error(error);
            });
          }
          // 重置搜索条件
          ,resetParams () {

          }
          ,edit () {

          }
          ,currentChange (value) {
            this.page.pageCurr = value;
            // this.searchData();
          }
          ,sizeChange (value) {
            this.page.pageCurr = 1;
            this.page.pageSize = value;
            // this.searchData();
          }
        }
        ,mounted () {
          this.getDepts();
          this.getJobs();

          this.getList();
        }
        ,beforeDestroy () {

        }
    };
</script>

<style scoped>
    .container {
      height: 100%;
    }
    .page-list-banner {
      margin-bottom: 10px;
    }
</style>

 src/router/index.js

@@ -10,7 +10,7 @@

/* eslint-disable */
router.beforeEach((to, from, next) => {
  if (to.name != 'login' && !sessionStorage.getItem('userName')) {
  if (to.name != 'login' && sessionStorage.getItem('uid') == -1) {
    next('\login');
  } else {
    next();

 src/router/routes.js

@@ -6,6 +6,7 @@
    name: 'login',
    meta: {},
    component: (resolve) => require(['@/pages/login.vue'], resolve),
    // component: (resolve) => require(['@/pages/login_0.vue'], resolve),
}, {
    path: '/index',
    name: 'index',
@@ -32,5 +33,10 @@
        name: 'dAndlSetSpeed',
        meta: {},
        component: (resolve) => require(['@/pages/test/dAndlSetSpeed.vue'], resolve),
    }, { // 用户
        path: 'userlist',
        name: 'userList',
        meta: {},
        component: (resolve) => require(['@/pages/user/list.vue'], resolve),
    }, ]
}];

 src/store/index.js

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
import user from './user';

Vue.use(Vuex)

@@ -11,5 +12,6 @@
  actions: {
  },
  modules: {
    user
  }
})

 src/store/user.js

New file
@@ -0,0 +1,42 @@
export default {
    state() {
        return {
            username: sessionStorage.getItem("username") || ""
            ,uid: -1
        }
    }
    ,mutations:{
        setLogin (state, user) {
            if(user && user.name.trim()) {
                // 设置session
                sessionStorage.setItem("username", user.name);
                sessionStorage.setItem('uid', user.uid);

                state.username = user.name;
                state.uid = user.uid;
            }else {
                // 设置session
                sessionStorage.setItem("username", "");
                sessionStorage.setItem('uid', -1);
                
                state.username = "";
                state.uid = -1;
            }
        }
        // 页面刷新时 从sessionStorage读取用户信息同步到store中
        ,replaceUserInfo (state, user) {
            state.username = user.name;
            state.uid = user.uid;
        }
    }
    ,actions: {
        setLogin (context, user) {
            context.commit('setLogin', user);
        }
        ,replaceUserInfo (context, user) {
            context.commit('replaceUserInfo', user);
        }
    }
    ,getters: {
    }
};

 vue.config.js

@@ -16,5 +16,6 @@
                ]
            }
        }
        ,sourceMap: true
    },
}