tqxz-sn-message-platform/src/components/pageStructure/main.vue

<template>
  <div style="height: 100%">
    <div class="flex flex-col justify-center items-center">
      <el-text style="font-size: 2.4rem" class="mx-1 font-bold" size="large">
        卫星通信服务平台
      </el-text>
    </div>
    <el-menu
      class="flex flex-wrap font-bold"
      :default-active="activeIndex"
      @select="handleSelect"
    >
      <el-menu-item
        index="1"
        :style="activeIndex == '1' ? activeStyle : indexStyle"
        class="border-x-4 border-slate-300"
      >
        查看消息
      </el-menu-item>
      <el-menu-item
        index="2"
        :style="activeIndex == '2' ? activeStyle : indexStyle"
        class="border-r-4 border-slate-300"
      >
        汉字编码
      </el-menu-item>
      <el-menu-item
        index="3"
        :style="activeIndex == '3' ? activeStyle : indexStyle"
        class="border-r-4 border-slate-300"
      >
        异或校验
      </el-menu-item>
      <el-menu-item
        v-if="manager"
        index="4"
        :style="activeIndex == '4' ? activeStyle : indexStyle"
        class="border-r-4 border-slate-300"
      >
        单位管理
      </el-menu-item>
    </el-menu>
    <el-card>
      <div v-show="activeIndex === '1'">
        <div>
          <el-button type="primary">
            <a href="https://prediction.guodiangaoke.com/#/" target="_blank">星历预测系统</a>
          </el-button>
        </div>
        <br />
        <ShortMsg :textColor="color" :socketMsg="message" :socketCreatedAt="created_at" />
        <br />
        <HistoryMsg ref="historyMsgRef" />
      </div>
      <div v-show="activeIndex === '2'">
        <el-button
          style="font-weight: bold"
          type="primary"
          @click="showModel"
          class="mr-4"
        >
          转换模式
        </el-button>
        <CodeHelp />
        <Encode v-if="showCode" />
        <Decode v-if="!showCode" />
      </div>
      <div v-show="activeIndex === '3'">
        <CalculationXOR />
      </div>
      <div v-show="activeIndex === '4'">
        <el-menu
          class="flex flex-wrap font-bold"
          :default-active="subActiveIndex"
          @select="handleSubSelect"
        >
          <el-menu-item
            index="1"
            :style="subActiveIndex == '1' ? activeStyle : indexStyle"
            class="border-x-4 border-slate-300"
          >
            SN号码管理
          </el-menu-item>
          <el-menu-item
            index="2"
            :style="subActiveIndex == '2' ? activeStyle : indexStyle"
            class="border-r-4 border-slate-300"
          >
            用户管理
          </el-menu-item>
          <el-menu-item
            index="3"
            :style="subActiveIndex == '3' ? activeStyle : indexStyle"
            class="border-r-4 border-slate-300"
          >
            绑定记录
          </el-menu-item>
          <el-menu-item
            v-if="manager"
            index="4"
            :style="subActiveIndex == '4' ? activeStyle : indexStyle"
            class="border-r-4 border-slate-300"
          >
            绑定用户
          </el-menu-item>
        </el-menu>
        <div v-show="subActiveIndex === '1'">
          <SNManager ref="snManagerRef" />
        </div>
        <div v-show="subActiveIndex === '2'">
          <BsideManager ref="bsideManagerRef" />
        </div>
        <div v-show="subActiveIndex === '3'">
          <Record ref="recordRef" />
        </div>
        <div v-show="subActiveIndex === '4'">
          <BindSN ref="bindSNRef" />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";

import ShortMsg from "../operate/shortMsg.vue";
import HistoryMsg from "../features/historyMsg.vue";
import CodeHelp from "../transcoding/codeHelp.vue";
import Encode from "../transcoding/encode.vue";
import Decode from "../transcoding/decode.vue";
import CalculationXOR from "../calculationXOR/calculationXOR.vue";
import SNManager from "../features/snManager.vue";
import BsideManager from "../features/bsideManager.vue";
import Record from "../features/record.vue";
import BindSN from "../features/bindSN.vue";

import historyMsgActiveStore from "../../stores/historyMsg";
import shortMsgActiveStore from "../../stores/shortMsg";

const historyMsgActive = historyMsgActiveStore();
const shortMsgActive = shortMsgActiveStore();

const activeIndex = ref("1");
const subActiveIndex = ref("1");
const indexStyle = "background-color: rgb(241 245 249);";
const activeStyle = "background-color: rgb(207 250 254);";
const manager = ref(false);
const color = ref();
const message = ref();
const created_at = ref();
const showCode = ref(true);
const historyMsgRef = ref(null);
const snManagerRef = ref(null);
const bsideManagerRef = ref(null);
const recordRef = ref(null);
const bindSNRef = ref(null);

const handleSelect = (key, keyPath) => {
  activeIndex.value = key;
};

const handleSubSelect = (key, keyPath) => {
  subActiveIndex.value = key;
};

const showModel = () => {
  showCode.value = !showCode.value;
};

const historyMsg = () => {
  historyMsgRef.value.historyMsg();
};

defineExpose({ manager, color, message, created_at, historyMsg });

watch(activeIndex, (value) => {
  historyMsgActive.activeIndex = value;
});

watch(subActiveIndex, (value) => {
  historyMsgActive.subActiveIndex = value;
});

onMounted(() => {
  activeIndex.value = historyMsgActive.activeIndex;
  subActiveIndex.value = historyMsgActive.subActiveIndex;
  message.value = shortMsgActive.message;
  created_at.value = shortMsgActive.created_at;
});
</script>

<style scoped></style>