大屏2引入大屏1的消息

src/views/screen_2/index.vue

@@ -278,7 +278,7 @@ import {
   getCurrentInstance
 } from 'vue'
 import {useStore} from 'vuex'
-import MessageCom from './message/index.vue'
+import MessageCom from '../screen/message/index.vue'
 import CountTo from '@/components/vue-count-to/vue-countTo.vue';
 import KedaCom from '@/components/keda/keda-com.vue';
 import axios from "axios";

src/views/screen_2/message/index.vue

@@ -1,371 +0,0 @@
-<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" v-loading="loadingDownload">下载附件</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'
-
-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,
-      loadingDownload: 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 = () => {
-      state.loadingDownload = true
-      that.$api.noticeMoreInfoDownload(state.messageInfo.id).then(res => {
-        state.loadingDownload = false
-      }).catch(() => {
-        state.loadingDownload = false
-      })
-    }
-    onMounted(() => {
-      if (store.getters['app/isLogin']) {
-        initData()
-      }
-    })
-    return {
-      ...toRefs(state),
-      ref_message,
-      ref_messagePage,
-      onMessageInfo,
-      onMessageBack,
-      onMessageDownload
-    }
-  },
-})
-</script>
-
-<style scoped lang="scss">
-$messageWidth: 990px;
-.message-main {
-  z-index: 2;
-  position: absolute;
-  right: 0;
-  width: $messageWidth;
-  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: $messageWidth;
-  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;
-      font-size: 20px;
-      font-weight: 400;
-      color: #333333;
-      line-height: 32px;
-    }
-  }
-  .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>