消息通知

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="overflow: hidden;">
+  <div style="overflow: auto;">
     <div style="z-index: 1; position: relative;">
       <router-view/>
     </div>

src/api/module/gateway.ts

@@ -0,0 +1,22 @@
+import { handle } from '../index'
+
+const suffix = 'api-gateway'
+
+export const noticeMorePage = (params: any) => handle({
+  url: `/${suffix}/gateway/api-tymh/notice/more`,
+  method: 'get',
+  params
+})
+
+export const noticeMoreInfo = (params: any) => handle({
+  url: `/${suffix}/gateway/api-tymh/notice/more/${params}`,
+  method: 'get',
+})
+
+export const noticeMoreInfoDownload = (params: any) => handle({
+  url: `/${suffix}/gateway/api-tymh/download/notice/attr/${params}`,
+  method: 'get',
+  config: {
+    responseType: 'blob'
+  }
+})

src/api/request.ts

@@ -2,7 +2,7 @@ import axios from 'axios'
 import { ElMessage } from "element-plus";
 
 const instance = axios.create({
-  timeout: 10000
+  timeout: 40000
 })
 // 添加请求拦截器
 instance.interceptors.request.use((config: any) => {
@@ -16,7 +16,13 @@ instance.interceptors.request.use((config: any) => {
 instance.interceptors.response.use((response: any) => {
   // 对响应数据做点什么
   if (response.status === 200) {
-    return response.data
+    if (response.data?.code === 402 || response.data?.code === 401 ) {
+      ElMessage.warning(response.data.msg)
+      localStorage.removeItem('sc_token')
+      location.reload()
+    } else {
+      return response.data
+    }
   }
 }, (error: any) => {
   ElMessage.error(error)
@@ -29,11 +35,23 @@ export const get = ({url, params, config = {}}: { [index: string]: any }) => {
   return new Promise((resolve, reject) => {
     let paramUrl = url
     if (params) {
-      paramUrl += `?${params}`
+      if (typeof params === 'object') {
+        let str = ''
+        Object.entries(params).map(([k, v]: any, i) => {
+          if (i > 0) {
+            str += '&'
+          }
+          str += `${k}=${encodeURIComponent(v)}`
+        })
+        paramUrl += `?${str}`
+      } else {
+        paramUrl += `?${params}`
+      }
     }
     instance.get(paramUrl, {
       headers: {
-        sessionToken: localStorage.getItem('sc_token')
+        sessionToken: localStorage.getItem('sc_token'),
+        Authorization: localStorage.getItem('sc_token')
       },
       ...config
     }).then((res: any) => {
@@ -48,7 +66,8 @@ export const post = ({url, params, config = {}}: { [index: string]: any }) => {
   return new Promise((resolve, reject) => {
     instance.post(url, params, {
       headers: {
-        sessionToken: localStorage.getItem('sc_token')
+        sessionToken: localStorage.getItem('sc_token'),
+        Authorization: localStorage.getItem('sc_token'),
       },
       ...config
     }).then((res: any) => {

src/router/index.ts

@@ -21,8 +21,12 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-    store.dispatch('app/LOAD_USER_INFO').then(() => {
+    if (localStorage.getItem('sc_token')) {
+        store.dispatch('app/LOAD_USER_INFO').then(() => {
+            next()
+        })
+    } else {
         next()
-    })
+    }
 })
 export default router;

src/utils/util.ts

@@ -77,3 +77,16 @@ export const copy = (value: string) => {
   document.body.removeChild(str)
   console.log(value)
 }
+
+export const download = (fileName: string, data: BlobPart) => {
+  const blob = new Blob([data]);
+  const url = window.URL.createObjectURL(blob);
+  const aLink = document.createElement("a");
+  aLink.style.display = "none";
+  aLink.href = url;
+  aLink.setAttribute("download", fileName);
+  document.body.appendChild(aLink);
+  aLink.click();
+  document.body.removeChild(aLink); // 下载完成移除元素
+  window.URL.revokeObjectURL(url); // 释放掉blob对象
+}

src/views/pc/index.vue

@@ -34,8 +34,8 @@
       <el-dropdown v-if="$store.getters['app/isLogin']">
         <div class="pc-info-user">
           <img src="../common/img/info-user-icon.png" style="margin-right: 8px"/>
-          <span style="margin-right: 4px">{{$store.state.app.userInfo.displayName}}</span>
-          <span style="margin-right: 6px">{{$store.state.app.userInfo.organizations[0].organizationName}}</span>
+          <span style="margin-right: 4px">{{$store.state.app.userInfo?.displayName}}</span>
+          <span style="margin-right: 6px">{{$store.state.app.userInfo?.organizations[0].organizationName}}</span>
           <img src="../common/img/info-user-icon-suffix.png"/>
         </div>
         <template #dropdown>

src/views/screen/index.vue

@@ -30,15 +30,15 @@
           </template>
         </el-input>
       </div>
-      <div class="screen-info-message __hover">
+      <div class="screen-info-message __hover" @click="showMessage = !showMessage">
         <img src="../common/img/info-message-icon.png"/>
       </div>
       <div class="screen-info-download __hover">下载</div>
       <el-dropdown v-if="$store.getters['app/isLogin']">
         <div class="screen-info-user">
           <img src="../common/img/info-user-icon.png" style="margin-right: 8px"/>
-          <span style="margin-right: 4px">{{$store.state.app.userInfo.displayName}}</span>
-          <span style="margin-right: 6px">{{$store.state.app.userInfo.organizations[0].organizationName}}</span>
+          <span style="margin-right: 4px">{{$store.state.app.userInfo?.displayName}}</span>
+          <span style="margin-right: 6px">{{$store.state.app.userInfo?.organizations[0].organizationName}}</span>
           <img src="../common/img/info-user-icon-suffix.png"/>
         </div>
         <template #dropdown>
@@ -93,6 +93,7 @@
         </div>
       </template>
     </div>
+    <MessageCom v-model:show="showMessage" class="screen-message"/>
   </div>
 </template>
 
@@ -111,10 +112,11 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {bgImgMapper, infoMapper, logoIcon} from '../common/static'
+import MessageCom from './message/index.vue'
 
 export default defineComponent({
   name: 'App',
-  components: {},
+  components: {MessageCom},
   setup() {
     const store = useStore()
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
@@ -128,7 +130,8 @@ export default defineComponent({
       infoIndex: -1,
       InfoMapper: infoMapper,
       infoInput: '',
-      LogoIcon: logoIcon
+      LogoIcon: logoIcon,
+      showMessage: false
     });
     const switchInfo = (ind) => {
       if (ind === state.infoIndex) {
@@ -192,13 +195,13 @@ export default defineComponent({
     line-height: 1;
     text-align: justify;
     // 部署start
-    width: 100%;
-    height: 100vh;
+    //width: 100%;
+    //height: 100vh;
     // 部署end
     // 本地start
-    //width: 3840px;
-    //height: 100vh;
-    //overflow: auto;
+    width: 3840px;
+    height: 100vh;
+    overflow: auto;
     // 本地end
     position: relative;
     .screen-bg {
@@ -244,6 +247,7 @@ export default defineComponent({
         }
       }
     }
+    $screenInfoHeight: 70px;
     .screen-info {
       z-index: 2;
       position: absolute;
@@ -251,8 +255,8 @@ export default defineComponent({
       top: 0;
       color: #ffffff;
       background-image: url("../common/img/info-bg.png");
-      height: 70px;
-      width: 1366px;
+      padding-left: 300px;
+      height: $screenInfoHeight;
       display: flex;
       align-items: center;
       .screen-info-block {
@@ -335,10 +339,11 @@ export default defineComponent({
         color: #82D6FF;
       }
     }
+    $screenHrefHeight: 207px;
     .screen-href {
       opacity: 0.8;
       width: 100%;
-      height: 207px;
+      height: $screenHrefHeight;
       z-index: 2;
       position: absolute;
       bottom: 0;
@@ -496,5 +501,9 @@ export default defineComponent({
         }
       }
     }
+    .screen-message {
+      height: calc(100% - #{$screenInfoHeight} - #{$screenHrefHeight});
+      top: $screenInfoHeight;
+    }
   }
 </style>

src/views/screen/message/index.vue

@@ -0,0 +1,362 @@
+<template>
+  <div v-if="isInit" class="message-main animate__animated" ref="ref_message" v-loading="loadingPage" element-loading-background="rgba(0, 0, 0, 0.7)">
+    <div class="ma-head">
+      <div class="mah-block"/>
+      <span class="mah-title">通知公告</span>
+      <span class="mah-title-en">INFORM</span>
+      <span class="mah-back __hover" @click="$emit('update:show', false)">返回 》</span>
+    </div>
+    <div class="ma-content" ref="ref_messagePage">
+      <template v-for="(item, index) in queryResult.data">
+        <div class="mac-item" :class="{active: currentId === item.id}" @click="onMessageInfo(item)">
+          <div class="mac-item-index">{{index + 1}}</div>
+          <div class="mac-item-title">{{item.title}}</div>
+          <div class="mac-item-time">{{$util.YMD(item.createTime)}}</div>
+        </div>
+        <div class="mac-item-line"/>
+      </template>
+    </div>
+    <div class="message-info" v-if="showInfo">
+      <div class="mi-content" v-loading="loadingInfo">
+        <div class="mic-title">{{messageInfo.title}}</div>
+        <div class="mic-time">{{messageInfo.createTime}}</div>
+        <div class="mic-line"/>
+        <div class="mic-html" v-html="messageInfo.content"/>
+      </div>
+      <div class="mi-buttons">
+        <div class="__hover download" @click="onMessageDownload" v-if="messageInfo.attachmentName">下载附件</div>
+        <div class="__hover back" @click="onMessageBack">返回</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {noticeMoreInfoDownload} from "@/api/module/gateway";
+import {download} from "@/utils/util";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    show: {
+      required: true
+    }
+  },
+  setup(props) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const ref_message = ref()
+    const ref_messagePage = ref()
+    const state = reactive({
+      isInit: false,
+      queryParams: {
+        page: 1,
+        pageSize: 20
+      },
+      queryResult: {
+        data: [],
+        total: 0,
+        totalPage: 0
+      },
+      currentId: null,
+      loadingPage: true,
+      loadingInfo: false,
+      messageInfo: {},
+      showInfo: false
+    })
+    watch(() => props.show, (n) => {
+      state.isInit = true
+      nextTick(() => {
+        if (n) {
+          ref_message.value.classList.remove('animate__fadeOutRight')
+          ref_message.value.classList.add('animate__fadeInRight')
+        } else {
+          ref_message.value.classList.remove('animate__fadeInRight')
+          ref_message.value.classList.add('animate__fadeOutRight')
+        }
+      })
+    })
+    watch(() => state.isInit, () => {
+      nextTick(() => {
+        ref_messagePage.value.onscroll = () => {
+          const scrollHeight = ref_messagePage.value.scrollHeight;
+          const scrollTop = ref_messagePage.value.scrollTop;
+          const clientHeight = ref_messagePage.value.clientHeight;
+          if (scrollHeight - clientHeight == scrollTop) {
+            if (state.queryParams.page < state.queryResult.totalPage) {
+              state.queryParams.page++
+              initData()
+            }
+          }
+        }
+      })
+    })
+    const initData = () => {
+      state.loadingPage = true
+      that.$api.noticeMorePage(state.queryParams).then((res: { data: {
+          totalPage: number; dataList: never[]; totalCount: number;
+        }; }) => {
+        state.queryResult.data = [...state.queryResult.data, ...res.data.dataList]
+        state.queryResult.totalPage = res.data.totalPage
+        state.loadingPage = false
+      }).catch(() => {
+        state.loadingPage = false
+      })
+    }
+    const onMessageInfo = (val: { id: null; }) => {
+      state.showInfo = true
+      state.currentId = val.id
+      state.loadingInfo = true
+      that.$api.noticeMoreInfo(state.currentId).then((res: { code: number; data: {}; }) => {
+        if (res.code === 0) {
+          state.messageInfo = res.data
+        }
+        state.loadingInfo = false
+      }).catch(() => {
+        state.loadingInfo = false
+      })
+    }
+    const onMessageBack = () => {
+      state.showInfo = false
+      state.currentId = null
+      state.messageInfo = {}
+    }
+    const onMessageDownload = () => {
+      that.$api.noticeMoreInfoDownload(state.messageInfo.id).then(res => {
+        that.$util.download(state.messageInfo.attachmentName, res)
+      })
+    }
+    onMounted(() => {
+      initData()
+    })
+    return {
+      ...toRefs(state),
+      ref_message,
+      ref_messagePage,
+      onMessageInfo,
+      onMessageBack,
+      onMessageDownload
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.message-main {
+  z-index: 2;
+  position: absolute;
+  right: 0;
+  width: 549px;
+  height: 100%;
+  background: #31538C;
+  box-sizing: border-box;
+  padding-top: 30px;
+  $mainPL: 26px;
+  $mainPR: 22px;
+  display: flex;
+  flex-direction: column;
+  .ma-head {
+    margin: 0 $mainPR 0 $mainPL;
+    display: flex;
+    align-items: center;
+    padding-bottom: 9px;
+    border-bottom: 1px solid #0B3672;
+    .mah-block {
+      width: 5px;
+      height: 25px;
+      background: #82D6FF;
+    }
+    .mah-title {
+      margin-left: 11px;
+      font-size: 24px;
+      font-family: FZLanTingHeiS-DB-GB;
+      font-weight: 400;
+      color: #32DCFB;
+    }
+    .mah-title-en {
+      margin-left: 8px;
+      font-size: 16px;
+      font-family: FZLanTingHeiS-DB-GB;
+      font-weight: 400;
+      color: rgba(255, 255, 255, 0.2);
+    }
+    .mah-back {
+      margin-left: auto;
+      font-size: 16px;
+      font-family: FZLanTingHeiS-DB-GB;
+      font-weight: 400;
+      color: #32DCFB;
+    }
+  }
+  .ma-content {
+    flex: 1;
+    overflow-y: auto;
+    .mac-item {
+      margin: 12px 0;
+      padding: 0 $mainPR 0 $mainPL;
+      height: 46px;
+      display: flex;
+      align-items: center;
+      .mac-item-index {
+        padding: 4px 6px;
+        background: #0B3672;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        font-family: FZLanTingHeiS-DB-GB;
+        font-weight: 400;
+        color: #FFFFFF;
+      }
+      .mac-item-title {
+        flex: 1;
+        margin-left: 10px;
+        margin-right: 40px;
+        font-size: 20px;
+        font-family: FZLanTingHeiS-DB-GB;
+        font-weight: 400;
+        color: #FFFFFF;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .mac-item-time {
+        margin-left: auto;
+        font-size: 16px;
+        font-family: FZLanTingHeiS-DB-GB;
+        font-weight: 400;
+        color: #C9C9C9;
+      }
+      &:nth-child(1) {
+        .mac-item-index {
+          background-color: #FF8363;
+        }
+      }
+      &:nth-child(3) {
+        .mac-item-index {
+          background-color: #63B841;
+        }
+      }
+      &:nth-child(5) {
+        .mac-item-index {
+          background-color: #4481FE;
+        }
+      }
+      &.active {
+        background-color: #5A75A3;
+        position: relative;
+        //&:before {
+        //  position: absolute;
+        //  content: '';
+        //  left: 0;
+        //  border-top: 10px solid transparent;
+        //  border-bottom: 10px solid transparent;
+        //  border-right: 10px solid #5A75A3;
+        //  transform: translateX(-10px);
+        //}
+      }
+      &:hover {
+        cursor: pointer;
+        background-color: #5A75A3;
+      }
+    }
+    .mac-item-line {
+      margin: 0 $mainPR 0 $mainPL;
+      border-bottom: 1px dashed #C9C9C9;
+    }
+  }
+}
+.message-info {
+  position: absolute;
+  right: 549px;
+  height: calc(100% - 60px);
+  width: 1373px;
+  background-color: #ffffff;
+  box-sizing: border-box;
+  padding: 58px 0 22px;
+  display: flex;
+  flex-direction: column;
+  .mi-content {
+    width: 100%;
+    height: calc(100% - 20px - 56px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .mic-title {
+      font-size: 38px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #333333;
+      width: 100%;
+      text-align: center;
+    }
+    .mic-time {
+      margin-top: 16px;
+      font-size: 20px;
+      font-family: SimSun;
+      font-weight: 400;
+      color: #666666;
+    }
+    .mic-line {
+      margin-top: 16px;
+      width: calc(100% - 120px);
+      height: 1px;
+      background: #DCDCDC;
+    }
+    .mic-html {
+      flex: 1;
+      margin-top: 28px;
+      width: 100%;
+      padding: 0 180px;
+      overflow-y: auto;
+      box-sizing: border-box;
+    }
+  }
+  .mi-buttons {
+    margin-top: 20px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    >div {
+      width: 150px;
+      height: 56px;
+      font-size: 20px;
+      font-family: FZLanTingHeiS-DB-GB;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      border-radius: 3px;
+    }
+    .download {
+      background: #4481FE;
+      color: #FFFFFF;
+      margin-right: 20px;
+    }
+    .back {
+      background: rgba(68,129,254,0.2);
+      border: 1px solid #4481FE;
+      color: #4481FE;
+    }
+  }
+}
+</style>

vite.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
     host: '0.0.0.0',
     strictPort: false,
     proxy: {
-      '/api': {
+      '/api/': {
         // target: 'http://localhost:8080/',
         target: 'http://127.0.0.1:3333/',
         // target: 'http://192.168.1.110:8080/',
@@ -28,6 +28,15 @@ export default defineConfig({
           return path.replace(/^\/api/, '')
         }
       },
+      '/api-gateway/': {
+        // target: 'http://localhost:8080/',
+        target: 'http://127.0.0.1:4444/',
+        // target: 'http://192.168.1.110:8080/',
+        changeOrigin: true,
+        rewrite: path => {
+          return path.replace(/^\/api-gateway/, '')
+        }
+      },
     }
   },
   build: {