From 1b6e53f30da0c400b3bab5a91ae0e37853c8cd55 Mon Sep 17 00:00:00 2001
From: xy <271556543@qq.com>
Date: Mon, 20 Mar 2023 10:36:58 +0800
Subject: [PATCH] 2023-3-20

---
 src/api/system/ossLogin.js                  |  13 +
 src/layout/components/worker/index.vue      |   2 +-
 src/layout/index.vue                        | 427 +++++++++++---------
 src/store/modules/user.js                   |  16 +-
 src/utils/auth.js                           |   8 +-
 src/views/system/worker.vue                 |  12 +-
 src/views/system/workerComponents/card1.vue |   4 +-
 src/views/system/workerComponents/card4.vue |  10 +-
 8 files changed, 278 insertions(+), 214 deletions(-)
 create mode 100644 src/api/system/ossLogin.js

diff --git a/src/api/system/ossLogin.js b/src/api/system/ossLogin.js
new file mode 100644
index 0000000..70c47d5
--- /dev/null
+++ b/src/api/system/ossLogin.js
@@ -0,0 +1,13 @@
+import request from "@/utils/request";
+import store from '@/store';
+export function ossLogin(){
+  return request({
+    isLoading:false,
+    method:'post',
+    url:'/api/admin/auth/oss-login',
+    data:{
+      id:store.state.user.userId,
+      username:store.state.user.username
+    }
+  })
+}
diff --git a/src/layout/components/worker/index.vue b/src/layout/components/worker/index.vue
index d60db1b..3cec04d 100644
--- a/src/layout/components/worker/index.vue
+++ b/src/layout/components/worker/index.vue
@@ -80,7 +80,7 @@ export default {
       })
       return item
     })
-  }
+  },
 }
 </script>
 
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 00fd01d..dc1faf5 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -2,11 +2,21 @@
   <div :class="classObj" class="app-wrapper">
     <div class="top-head-bar">
       <div class="top-head-bar__logo">
-        <img style="height: 20px;" src="../assets/logo.png" alt="logo">
+        <img style="height: 20px" src="../assets/logo.png" alt="logo" />
       </div>
 
       <ul>
-        <li v-for="item in $store.state.permission.rootMenu" :class="{'li-active':new RegExp(`^${item.path}`).test($route.path) && $route.path !== '/contract/system/menu'}" @click="menuClick(item)">{{ item.name }}</li>
+        <li
+          v-for="item in $store.state.permission.rootMenu"
+          :class="{
+            'li-active':
+              new RegExp(`^${item.path}`).test($route.path) &&
+              $route.path !== '/contract/system/menu',
+          }"
+          @click="menuClick(item)"
+        >
+          {{ item.name }}
+        </li>
       </ul>
 
       <div class="top-head-bar__user">
@@ -17,31 +27,40 @@
           </div>
           <el-dropdown-menu slot="dropdown" class="user-dropdown">
             <router-link to="/">
-              <el-dropdown-item>
-                系统首页
-              </el-dropdown-item>
+              <el-dropdown-item> 系统首页 </el-dropdown-item>
             </router-link>
-            <el-dropdown-item divided>
-              <span style="display:block;">退出</span>
+            <el-dropdown-item divided @click.native="logout">
+              <span style="display: block">退出</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </div>
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
+    <div
+      v-if="device === 'mobile' && sidebar.opened"
+      class="drawer-bg"
+      @click="handleClickOutside"
+    />
 
     <template v-if="$route.path === '/worker'">
-      <el-scrollbar style="padding-top: 50px;height: 100%;">
+      <el-scrollbar style="padding-top: 50px; height: 100%">
         <worker></worker>
       </el-scrollbar>
     </template>
     <template v-else-if="$route.path === '/bookmanage'">
-      <iframe ref="bookIframe" style="width: 100%;height: 100%;padding-top: 50px;" src="http://localhost:8014/admin/#/">你的浏览器不支持该iframe</iframe>
+      <div style="width: 100%; height: 100%;padding-top: 50px;overflow-x: hidden;">
+        <iframe
+          ref="bookIframe"
+          style="width: calc(100% + 12px); height: 100%;"
+          src="http://localhost:8014/admin/#/"
+          >你的浏览器不支持该iframe</iframe
+        >
+      </div>
     </template>
     <template v-else>
       <sidebar class="sidebar-container" />
       <div class="main-container">
-        <div :class="{'fixed-header':fixedHeader}" v-if="false">
+        <div :class="{ 'fixed-header': fixedHeader }" v-if="false">
           <navbar />
         </div>
         <el-scrollbar style="height: 100%">
@@ -53,231 +72,247 @@
 </template>
 
 <script>
-  import {
+import { ossLogin } from "@/api/system/ossLogin";
+import { Navbar, Sidebar, AppMain } from "./components";
+import ResizeMixin from "./mixin/ResizeHandler";
+import worker from "./components/worker/index.vue";
+export default {
+  name: "Layout",
+  components: {
     Navbar,
     Sidebar,
-    AppMain
-  } from './components'
-  import ResizeMixin from './mixin/ResizeHandler'
-import worker from "./components/worker/index.vue"
-  export default {
-    name: 'Layout',
-    components: {
-      Navbar,
-      Sidebar,
-      AppMain,
-      worker
+    AppMain,
+    worker,
+  },
+  mixins: [ResizeMixin],
+  data() {
+    return {
+      active: 0,
+    };
+  },
+  computed: {
+    sidebar() {
+      return this.$store.state.app.sidebar;
+    },
+    device() {
+      return this.$store.state.app.device;
     },
-    mixins: [ResizeMixin],
-    data(){
+    fixedHeader() {
+      return this.$store.state.settings.fixedHeader;
+    },
+    classObj() {
       return {
-        active:0
-      }
+        hideSidebar: !this.sidebar.opened,
+        openSidebar: this.sidebar.opened,
+        withoutAnimation: this.sidebar.withoutAnimation,
+        mobile: this.device === "mobile",
+      };
     },
-    computed: {
-      sidebar() {
-        return this.$store.state.app.sidebar
-      },
-      device() {
-        return this.$store.state.app.device
-      },
-      fixedHeader() {
-        return this.$store.state.settings.fixedHeader
-      },
-      classObj() {
-        return {
-          hideSidebar: !this.sidebar.opened,
-          openSidebar: this.sidebar.opened,
-          withoutAnimation: this.sidebar.withoutAnimation,
-          mobile: this.device === 'mobile'
-        }
-      }
+  },
+  methods: {
+    async logout() {
+      await this.$store.dispatch("user/logout");
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
     },
-    methods: {
-      handleClickOutside() {
-        this.$store.dispatch('app/closeSideBar', {
-          withoutAnimation: false
-        })
-      },
-
-
-      menuClick(item){
-        this.$router.push(item.path)
-
-        console.log(this.$route.path)
-      }
+    handleClickOutside() {
+      this.$store.dispatch("app/closeSideBar", {
+        withoutAnimation: false,
+      });
     },
-    mounted() {
 
+    menuClick(item) {
+      this.$router.push(item.path);
     },
-  }
+  },
+  mounted() {},
+  watch: {
+    "$route.path": {
+      handler: function (url) {
+        if (url === "/bookmanage") {
+          this.$nextTick(() => {
+            setTimeout(() => {
+              this.$refs["bookIframe"].contentWindow.postMessage(
+                {
+                  key: "login",
+                  data: {
+                    id:this.$store.state.user.userId,
+                    username:this.$store.state.user.username
+                  },
+                },
+                "*"
+              );
+            },500)
+          });
+        }
+      },
+      immediate: true,
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~@/styles/mixin.scss";
-  @import "~@/styles/variables.scss";
-
-  .app-wrapper {
-    @include clearfix;
-    position: relative;
-    height: 100%;
-    width: 100%;
+@import "~@/styles/mixin.scss";
+@import "~@/styles/variables.scss";
 
-    &.mobile.openSidebar {
-      position: fixed;
-      top: 0;
-    }
-  }
-
-  .top-head-bar{
-    background: #338DE3FF;
-    height: 50px;
-    filter: drop-shadow(0 1px 1px #49a0f3);
-    display: grid;
-    grid-template-columns: auto .5fr 6fr .2fr 1fr;
-    grid-template-rows: 50px;
-    grid-template-areas:
-      "logo . menu . user";
+.app-wrapper {
+  @include clearfix;
+  position: relative;
+  height: 100%;
+  width: 100%;
 
-    z-index: 9999;
+  &.mobile.openSidebar {
     position: fixed;
     top: 0;
-    left: 0;
-    right: 0;
+  }
+}
 
-    &__logo{
-      height: 50px;
-      grid-area:logo;
-      display: flex;
-      align-items: center;
+.top-head-bar {
+  background: #338de3ff;
+  height: 50px;
+  filter: drop-shadow(0 1px 1px #49a0f3);
+  display: grid;
+  grid-template-columns: auto 0.5fr 6fr 0.2fr 1fr;
+  grid-template-rows: 50px;
+  grid-template-areas: "logo . menu . user";
 
-      padding:0 20px;
-    }
-    @media screen and (max-width: 1000px){
-      &__logo{
-        display: none;
-      }
-    }
+  z-index: 9999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
 
-    &__user{
-      grid-area: user;
+  &__logo {
+    height: 50px;
+    grid-area: logo;
+    display: flex;
+    align-items: center;
+
+    padding: 0 20px;
+  }
+  @media screen and (max-width: 1000px) {
+    &__logo {
+      display: none;
     }
+  }
 
-    ul{
-      grid-area:menu;
-      height: 100%;
-      display: flex;
-      justify-self: flex-end;
-      align-items: flex-end;
+  &__user {
+    grid-area: user;
+  }
 
-      li{
-        color:#fff;
-        height: 40px;
-        line-height: 40px;
-        list-style: none;
-        transition: all 300ms ease-out;
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        cursor: pointer;
+  ul {
+    grid-area: menu;
+    height: 100%;
+    display: flex;
+    justify-self: flex-end;
+    align-items: flex-end;
 
-        padding: 0 20px;
-        position: relative;
+    li {
+      color: #fff;
+      height: 40px;
+      line-height: 40px;
+      list-style: none;
+      transition: all 300ms ease-out;
+      border-top-right-radius: 6px;
+      border-top-left-radius: 6px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      cursor: pointer;
 
-        &::after{
-          content:"";
-          background: #338DE3FF;
-          height: 3px;
-          width: 0;
-          border-radius: 1px;
-          transition: all 300ms ease-out;
+      padding: 0 20px;
+      position: relative;
 
-          position: absolute;
-          left: 6px;
-          bottom: 2px;
-        }
-        &+li{
-          margin-left: 20px;
-        }
-        &:hover{
-          background: #fff;
-          color:rgb(100,100,100);
+      &::after {
+        content: "";
+        background: #338de3ff;
+        height: 3px;
+        width: 0;
+        border-radius: 1px;
+        transition: all 300ms ease-out;
 
-          &::after{
-            width: calc(100% - 12px);
-          }
-        }
+        position: absolute;
+        left: 6px;
+        bottom: 2px;
+      }
+      & + li {
+        margin-left: 20px;
       }
-      .li-active{
+      &:hover {
         background: #fff;
-        color:rgb(100,100,100);
+        color: rgb(100, 100, 100);
 
-        &::after{
+        &::after {
           width: calc(100% - 12px);
         }
       }
     }
-  }
-  .drawer-bg {
-    background: #000;
-    opacity: 0.3;
-    width: 100%;
-    top: 0;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-  }
+    .li-active {
+      background: #fff;
+      color: rgb(100, 100, 100);
 
-  .fixed-header {
-    position: fixed;
-    top: 0;
-    right: 0;
-    z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
-    transition: width 0.28s;
+      &::after {
+        width: calc(100% - 12px);
+      }
+    }
   }
+}
+.drawer-bg {
+  background: #000;
+  opacity: 0.3;
+  width: 100%;
+  top: 0;
+  height: 100%;
+  position: absolute;
+  z-index: 999;
+}
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 54px)
-  }
+.fixed-header {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 9;
+  width: calc(100% - #{$sideBarWidth});
+  transition: width 0.28s;
+}
 
-  .mobile .fixed-header {
-    width: 100%;
-  }
+.hideSidebar .fixed-header {
+  width: calc(100% - 54px);
+}
 
-  .avatar-container {
-    height: 100%;
-    margin-right: 30px;
+.mobile .fixed-header {
+  width: 100%;
+}
 
-    .avatar-wrapper{
-      height: 100%;
-      display: flex;
-      align-items: center;
-      .user-avatar {
-        cursor: pointer;
-        width: 40px;
-        height: 40px;
-        border-radius: 10px;
-      }
-      &__name{
-        color: #fff;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+.avatar-container {
+  height: 100%;
+  margin-right: 30px;
 
-        padding: 0 6px;
-      }
-      .el-icon-caret-bottom {
-        cursor: pointer;
-        color: #FFF;
-        position: absolute;
-        right: -20px;
-        font-size: 12px;
-      }
+  .avatar-wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    .user-avatar {
+      cursor: pointer;
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
     }
-  }
-
+    &__name {
+      color: #fff;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
 
+      padding: 0 6px;
+    }
+    .el-icon-caret-bottom {
+      cursor: pointer;
+      color: #fff;
+      position: absolute;
+      right: -20px;
+      font-size: 12px;
+    }
+  }
+}
 </style>
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index 7967536..51b0dd2 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -16,7 +16,9 @@ import {
 const getDefaultState = () => {
   return {
     token: getToken(),
+    userId:'',
     name: '',
+    username:'',
     avatar: '',
     roles: []
   }
@@ -34,6 +36,12 @@ const mutations = {
   SET_NAME: (state, name) => {
     state.name = name
   },
+  SET_USERNAME:(state,username) => {
+    state.username = username
+  },
+  SET_USERID:(state,id) => {
+    state.userId = id
+  },
   SET_AVATAR: (state, avatar) => {
     state.avatar = avatar
   },
@@ -58,7 +66,7 @@ const actions = {
       }).then(response => {
 
         //console.log(response)
-        
+
         const {
           data
         } = response;
@@ -111,13 +119,15 @@ const actions = {
         }
         response["roles"] = ["admin"];
         const {
+          id,
           roles,
           name,
+          username,
           avatar
         } = response
 
-
-
+        commit('SET_USERNAME',username)
+        commit('SET_USERID',id)
         commit('SET_ROLES', roles)
         commit('SET_NAME', name)
         commit('SET_AVATAR', avatar)
diff --git a/src/utils/auth.js b/src/utils/auth.js
index a19f6cd..6318e8e 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -1,8 +1,8 @@
 import Cookies from 'js-cookie'
 
-const TokenKey = 'HeTongGuanli_hjjc_token'
+//const TokenKey = 'HeTongGuanli_hjjc_token'
 
-export function getToken() {
+export function getToken(TokenKey = 'hjjc_workerbench_web_token') {
   //return Cookies.get(TokenKey)
 
   if (Cookies.get(TokenKey)) {
@@ -12,12 +12,12 @@ export function getToken() {
   }
 }
 
-export function setToken(token) {
+export function setToken(token,TokenKey = 'hjjc_workerbench_web_token') {
   sessionStorage.setItem(TokenKey, token);
   return Cookies.set(TokenKey, token)
 }
 
-export function removeToken() {
+export function removeToken(TokenKey = 'hjjc_workerbench_web_token') {
   sessionStorage.clear();
   return Cookies.remove(TokenKey)
 
diff --git a/src/views/system/worker.vue b/src/views/system/worker.vue
index bec233a..b1ab30c 100644
--- a/src/views/system/worker.vue
+++ b/src/views/system/worker.vue
@@ -2,7 +2,7 @@
   <div style="padding: 0 10px 20px 10px">
     <el-row :gutter="4">
       <el-col :span="4">
-        <Card style="height: 100%">
+        <Card style="height: 100%;" :style="{'opacity':isDrag ? '0.4' : '1' }">
           <template v-slot:title>
             <p>组件</p>
           </template>
@@ -11,10 +11,11 @@
             :class="{ 'cpn-name__item--disable': statusFormat(item.i) }"
             v-for="item in layout"
             :draggable="!statusFormat(item.i)"
+            @dragstart="isDrag = true"
             @dragend="dragEnd(item, $event)"
           >
             <i class="el-icon-folder-remove"></i>
-            <span>{{ item.i }}</span>
+            <span>{{ item.component.name }}</span>
             <Button
               v-show="statusFormat(item.i)"
               type="error"
@@ -28,7 +29,7 @@
       </el-col>
 
       <el-col :span="20">
-        <Card>
+        <Card >
           <template v-slot:title>
             <div style="display: flex;justify-content: space-between;align-items: center;">
               <p>布局</p>
@@ -109,7 +110,7 @@ export default {
     return {
       layout,
       layoutList: [],
-      isDragEnter: false,
+      isDrag: false,
 
       grid: {
         x: 0,
@@ -119,6 +120,7 @@ export default {
   },
   methods: {
     dragEnd(item, e) {
+      this.isDrag = false
       if (e.clientX >= this.grid.x && e.clientY >= this.grid.y) {
         this.layoutList.push(item);
       }
@@ -205,6 +207,8 @@ export default {
   }
 }
 
+
+
 .fade-in {
   animation: fade-in 800ms cubic-bezier(0.39, 0.575, 0.565, 1) both;
 }
diff --git a/src/views/system/workerComponents/card1.vue b/src/views/system/workerComponents/card1.vue
index ef31408..d7c8566 100644
--- a/src/views/system/workerComponents/card1.vue
+++ b/src/views/system/workerComponents/card1.vue
@@ -5,11 +5,9 @@
       <i class="el-icon-more" style="float: right;font-size: 20px;"></i>
     </div>
 
-    <div>
+    <div style="display: flex;flex-wrap: wrap;align-items: center;justify-content: space-evenly;align-content: center;">
       <el-progress type="circle" :percentage="25"></el-progress>
       <el-progress type="circle" :percentage="100" status="success"></el-progress>
-    </div>
-    <div>
       <el-progress type="circle" :percentage="70" status="warning"></el-progress>
       <el-progress type="circle" :percentage="50" status="exception"></el-progress>
     </div>
diff --git a/src/views/system/workerComponents/card4.vue b/src/views/system/workerComponents/card4.vue
index 198d1ae..fe71321 100644
--- a/src/views/system/workerComponents/card4.vue
+++ b/src/views/system/workerComponents/card4.vue
@@ -1,11 +1,11 @@
 <template>
-  <el-card class="box-card" shadow="hover">
+  <el-card id="line-chart-card" class="box-card" shadow="hover">
     <div slot="header">
       <span style="border-left: 3px solid #338DE3FF;padding-left: 6px;">图表1</span>
       <i class="el-icon-more" style="float: right;font-size: 20px;"></i>
     </div>
 
-    <div id="line-chart" style="width: 100%;height: 200px;">
+    <div id="line-chart" style="width: 100%;">
     </div>
   </el-card>
 </template>
@@ -27,6 +27,7 @@ export default {
   },
   data() {
     return {
+      height:200,
       lineChartOption: {
         tooltip: {
           trigger: 'axis'
@@ -93,12 +94,15 @@ export default {
   },
   methods: {
     initChart(id,options){
+      let cardDom = document.getElementById('line-chart-card');
+      let cardTitleH = 58;
       let dom = document.getElementById(id)
       echarts.init(dom,"macarons").setOption(options)
       const elementResize = ElementResize({
         strategy:'scroll'
       })
-      elementResize.listenTo(dom,ele => {
+      elementResize.listenTo(cardDom,ele => {
+        dom.style.height = cardDom.getBoundingClientRect().height - 40 - cardTitleH + 'px'
         echarts.init(dom).resize();
       })
     }