卫星通信服务平台

src/components/pageStructure/main.vue

@@ -0,0 +1,193 @@
+<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>