新增页面

src/views/home.vue

@@ -1,69 +1,152 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-editor-container">
-     
-    </div>
-  </div>
+  <el-row style="background-color: rgb(241, 242, 246);height: calc(100vh - 84px);">
+    <el-row>
+      <el-image :src="Background"></el-image>
+    </el-row>
+    <el-row class="routerCardPar">
+      <template v-for="(system, index) in systemList">
+<!--        <el-card :key="system.id" :body-style="{ padding: '0px' }" class="routerCard"  @click.native="sso(system.systemUrl)">-->
+<!--          <img :src="system.storage.url" class="image">-->
+<!--          <div class="content">-->
+<!--            <span>{{ system.systemName }}</span>-->
+<!--          </div>-->
+<!--        </el-card>-->
+        <el-card :key="system.id" class="routerCard" @click.native="sso(system.systemUrl)">
+          <img :src="system.storage.url"  />
+<!--          <img src="@/assets/images/hyxt.png" />-->
+          <span>{{ system.systemName }}</span>
+        </el-card>
+      </template>
+    </el-row>
+  </el-row>
 </template>
 
 <script>
-const lineChartData = {
-  newVisitis: {
-    expectedData: [100, 120, 161, 134, 105, 160, 165],
-    actualData: [120, 82, 91, 154, 162, 140, 145]
-  },
-  messages: {
-    expectedData: [200, 192, 120, 144, 160, 130, 140],
-    actualData: [180, 160, 151, 106, 145, 150, 130]
-  },
-  purchases: {
-    expectedData: [80, 100, 121, 104, 105, 90, 100],
-    actualData: [120, 90, 100, 138, 142, 130, 130]
-  },
-  shoppings: {
-    expectedData: [130, 140, 141, 142, 145, 150, 160],
-    actualData: [120, 82, 91, 154, 162, 140, 130]
-  }
-}
+  import { encrypt,decrypt } from '@/utils/rsaEncrypt'
+  import { findPassWord } from '@/api/system/user'
+  import { mapGetters } from 'vuex'
+  import crudDmSystem from '@/api/dm/system/dmSystem'
+  import Background from '@/assets/images/bg.png'
+  export default {
+    data() {
+      return {
+        systemList: [],
+        Background: Background
+      }
+    },
+    computed: {
+      ...mapGetters([
+        'user',
+        'baseApi',
+        'userPassword'
+      ])
+    },
+    mounted() {
+      this.queryByUserId(this.user.id)
+    },
+    methods: {
+      queryByUserId(userId) {
+        crudDmSystem.queryByUserId(userId).then(res => {
+          console.log('res', res)
+          this.systemList = res
+        })
+      },
+      // 单点登录
+      sso(url) {
+        findPassWord(this.user.username).then(res => {
+          const username = encrypt(this.user.username)
+          const password = this.userPassword
+          location.href = `${url}/#/sso?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
+        })
 
-export default {
-  name: 'Dashboard',
-  components: {
-    
-  },
-  data() {
-    return {
+      }
     }
-  },
-  methods: {
-   
   }
-}
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .dashboard-editor-container {
-    padding: 32px;
-    background-color: rgb(240, 242, 245);
-    position: relative;
+<style lang="scss" scoped>
+  >>> .el-col:nth-child(5n + 1) {
+    margin-left: 0;
+  }
+  >>> .el-col:nth-child(n + 6) {
+    margin-top: 20px;
+  }
+  .routerCardPar {
+    /*padding: 0 20%;*/
+    width: 900px;
+    margin: 20px auto 0 auto;
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    .routerCard {
+      cursor: pointer;
+      width: 200px;
+      display: inline-block;
+      margin-bottom: 20px;
+      &:not(:nth-child(4n)) {
+        margin-right: 30px;
+      }
 
-    .github-corner {
-      position: absolute;
-      top: 0;
-      border: 0;
-      right: 0;
+      ::v-deep .el-card__body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        img {
+          width: 60px;
+        }
+        span {
+          display: block;
+          margin-top: 15px;
+        }
+      }
     }
+  }
+
+  .content {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
 
-    .chart-wrapper {
-      background: #fff;
-      padding: 16px 16px 0;
-      margin-bottom: 32px;
+    span {
+      font-size: 16px;
+      font-weight: 600;
+      margin-bottom: 15px;
+    }
+    ::v-deep .el-button {
+      width: 60%;
     }
   }
 
-  @media (max-width:1024px) {
-    .chart-wrapper {
-      padding: 8px;
-    }
+  .time {
+    font-size: 13px;
+    color: #999;
+  }
+
+  .bottom {
+    margin-top: 13px;
+    line-height: 12px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
   }
 </style>