人在环路异常提

.history/src/views/Main_20240103193135.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length>0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+  if (option?.length>0) {
+    let desc = option.find((i) => i.value === optionModel.value).desc;
+    msg = {
+      type,
+      value,
+      option: {
+        value: optionModel.value,
+        desc,
+      },
+    };
+  } else {
+    msg = {
+      type,
+      value,
+      accept,
+    };
+  }
+
+  handleSend({
+    type: "/info/popupack",
+    msg
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file

.history/src/views/Main_20240103193208.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+  if (option?.length > 0) {
+    let desc = option.find((i) => i.value === optionModel.value).desc;
+    msg = {
+      type,
+      value,
+      option: {
+        value: optionModel.value,
+        desc,
+      },
+    };
+  } else {
+    msg = {
+      type,
+      value,
+      accept,
+    };
+  }
+
+  handleSend({
+    type: "/info/popupack",
+    msg,
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112803.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+  if (option?.length > 0) {
+    let desc = option.find((i) => i.value === optionModel.value).desc;
+    msg = {
+      type,
+      value,
+      accept:optionModel.value
+    };
+  } else {
+    msg = {
+      type,
+      value,
+      accept,
+    };
+  }
+
+  handleSend({
+    type: "/info/popupack",
+    msg,
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112808.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+  if (option?.length > 0) {
+    msg = {
+      type,
+      value,
+      accept:optionModel.value
+    };
+  } else {
+    msg = {
+      type,
+      value,
+      accept,
+    };
+  }
+
+  handleSend({
+    type: "/info/popupack",
+    msg,
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112913.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112914.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112915.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112916.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112917.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104112918.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data?.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104115020.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data.option&&data.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option?.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

.history/src/views/Main_20240104115034.vue

+<template>
+  <div class="main">
+    <page-header class="page-header"></page-header>
+    <div class="page-main">
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
+      <div class="container">
+        <div class="container-message" v-show="isShowBasic">
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
+          <information-msg class="information-msg"></information-msg>
+        </div>
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
+          <img src="/image/basic-message-icon.png" alt="" />
+        </div>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
+      </div>
+    </div>
+    <Modal
+      v-model="isShow"
+      :mask-closable="false"
+      :footer-hide="true"
+      :title="title"
+      :closable="isCloseable"
+      :width="modalWidth"
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
+    </Modal>
+    <Modal
+      v-model="isShowTip"
+      :mask-closable="false"
+      :mask="false"
+      :footer-hide="isFooterHide"
+    >
+      <p>{{ vehicleTip }}</p>
+      <p>{{ remaintime }}</p>
+      <template #footer>
+        <Button type="info" class="footer" @click="doClose">确定</Button>
+      </template>
+    </Modal>
+    <Modal
+      v-model="isShowBoxCheck"
+      title="确认信息"
+      class="box-check"
+      :closable="false"
+      :mask-closable="false"
+    >
+      <div style="display: flex; flex-direction: column">
+        <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
+
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
+
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
+  // // 发送同步地图版本号信息
+  // if (!$indexRoot.sock) {
+  //     $indexRoot.init()
+  // }
+});
+
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
+
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
+
+function handleSend(msg) {
+  if ($indexRoot.sock) {
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
+  } else {
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
+  }
+}
+
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
+
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
+
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
+  }
+}
+
+function handleClose() {
+  isShowBasic.value = false;
+}
+
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
+
+function closeModal() {
+  isShow.value = false;
+}
+
+function modeChange(visible) {
+  if (!visible) {
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
+  }
+}
+
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
+
+function doClose() {
+  isShowTip.value = false;
+  if (tipTimer) {
+    clearTimeout(tipTimer);
+    tipTimer = null;
+  }
+}
+
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data.option&&data.option.length > 0) {
+    optionModel.value = data.option[0].value;
+  }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
+
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      value,
+      accept: option&&option.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
+
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
+
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
+    if (type === 1) {
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
+      tipTimer = setTimeout(() => {
+        doClose();
+      }, 5 * 1000);
+    } else if (type === 2) {
+      Message.info({
+        content: value,
+        duration: 10,
+        closable: true,
+      });
+    } else {
+      isFooterHide.value = true;
+      if (isFirst === 1) {
+        isShowTip.value = true;
+      }
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
+      if (vehicleRemainTime < 1) {
+        isShowTip.value = false;
+      }
+    }
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
+
+watch(
+  infoPop,
+  (list) => {
+    if (list.length) {
+      handleShowBoxCheck(list);
+    } else {
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
+  }
+);
+
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
+</script>
+
+<style lang="less" scoped>
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .page-header {
+    flex: 0 0 10vh;
+    min-height: 46px;
+    // align-items: flex-end;
+  }
+  .page-main {
+    background: url("/image/background.png") no-repeat;
+    background-size: cover;
+    flex: auto;
+    display: flex;
+    height: calc(100% - 10vh);
+    .side-bar {
+      flex: 0 0 7vw;
+      min-width: 70px;
+    }
+    .container {
+      flex: auto;
+      display: flex;
+      position: relative;
+      .container-message {
+        flex: 0 0 22vw;
+        min-width: 240px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overflow-x: hidden;
+        .container-basic {
+          flex: auto;
+          height: calc(100% - 150px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+      .container-message-icon {
+        position: absolute;
+        z-index: 9999;
+        top: 5vh;
+        left: 1vw;
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
+        border-radius: 10px;
+        opacity: 1;
+        display: flex;
+        cursor: pointer;
+      }
+      .map {
+        flex: auto;
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

src/views/Main.vue

@@ -2,268 +2,356 @@
   <div class="main">
     <page-header class="page-header"></page-header>
     <div class="page-main">
-            <side-bar class="side-bar" ref="sideBarDom" @changeTab="changeTab"></side-bar>
+      <side-bar
+        class="side-bar"
+        ref="sideBarDom"
+        @changeTab="changeTab"
+      ></side-bar>
       <div class="container">
         <div class="container-message" v-show="isShowBasic">
-                    <basic-message v-if="basciName === 'basic_message'" @handleClose="handleClose" @showModal="showModal"></basic-message>
-                    <basic-information v-else @handleClose="handleClose"></basic-information>
+          <basic-message
+            v-if="basciName === 'basic_message'"
+            @handleClose="handleClose"
+            @showModal="showModal"
+          ></basic-message>
+          <basic-information
+            v-else
+            @handleClose="handleClose"
+          ></basic-information>
           <information-msg class="information-msg"></information-msg>
         </div>
-                <div v-show="!isShowBasic" class="container-message-icon" @click="handleShowBasic">
+        <div
+          v-show="!isShowBasic"
+          class="container-message-icon"
+          @click="handleShowBasic"
+        >
           <img src="/image/basic-message-icon.png" alt="" />
         </div>
-                <map-container class="map" :reloadData="reloadData" :isShowBasic="isShowBasic" @handleSend="handleSend"></map-container>
+        <map-container
+          class="map"
+          :reloadData="reloadData"
+          :isShowBasic="isShowBasic"
+          @handleSend="handleSend"
+        ></map-container>
       </div>
     </div>
-        <Modal v-model="isShow"
+    <Modal
+      v-model="isShow"
       :mask-closable="false"
       :footer-hide="true"
       :title="title"
       :closable="isCloseable"
       :width="modalWidth"
-            @on-visible-change="modeChange">
-            <component :is="currentTag" :is-show="isShow" @handleSend="handleSend" @closeModal="closeModal"></component>
+      @on-visible-change="modeChange"
+    >
+      <component
+        :is="currentTag"
+        :is-show="isShow"
+        @handleSend="handleSend"
+        @closeModal="closeModal"
+      ></component>
     </Modal>
-        <Modal v-model="isShowTip"
+    <Modal
+      v-model="isShowTip"
       :mask-closable="false"
       :mask="false"
-            :footer-hide="isFooterHide">
+      :footer-hide="isFooterHide"
+    >
       <p>{{ vehicleTip }}</p>
       <p>{{ remaintime }}</p>
       <template #footer>
         <Button type="info" class="footer" @click="doClose">确定</Button>
       </template>
     </Modal>
-        <Modal v-model="isShowBoxCheck"
+    <Modal
+      v-model="isShowBoxCheck"
       title="确认信息"
       class="box-check"
       :closable="false"
       :mask-closable="false"
-            @on-ok="handleBoxCheck(1)"
-            @on-cancel="handleBoxCheck(0)">
+    >
+      <div style="display: flex; flex-direction: column">
         <span>{{ checkMsg.msg }}</span>
+        <!-- 增加option选项，默认选择第一个，提交时要把accept替换为option -->
+        <Radio-group v-if="checkMsg.option" vertical v-model="optionModel">
+          <Radio
+            :key="key.value"
+            v-for="key in checkMsg.option"
+            :label="key.value"
+            >{{ key.desc }}</Radio
+          >
+        </Radio-group>
+      </div>
+      <template #footer>
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button
+          v-if="!checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck(0)"
+          >取消</Button
+        >
+        <!-- 增加option选项，该状态只有确定 -->
+        <Button
+          v-if="checkMsg.option"
+          type="info"
+          class="footer"
+          @click="handleBoxCheck()"
+          >确定</Button
+        >
+      </template>
     </Modal>
   </div>
 </template>
 
 <script setup>
-    import { onBeforeMount, ref, getCurrentInstance, computed, watch, toRefs, reactive, onBeforeUnmount, shallowRef } from 'vue'
-    import { useVehicleStore } from '../store/VehicleStore';
-    import { storeToRefs } from 'pinia';
-    import { Message } from 'view-ui-plus';
-    import PageHeader from './PageHeader.vue'
-    import SideBar from './SideBar.vue';
-    import BasicMessage from './BasicMessage.vue';
-    import BasicInformation from './BasicInformation.vue';
-    import InformationMsg from './InformationMsg.vue';
-    import AlarmModal from './AlarmModal.vue'
-    import ModeSwitch from './ModeSwitch.vue'
-    import LogModal from './LogModal.vue'
-    import SetView from './SetView.vue'
-    import Logout from './Logout.vue'
-    import MapContainer from './MapContainer.vue'
+import {
+  onBeforeMount,
+  ref,
+  getCurrentInstance,
+  computed,
+  watch,
+  toRefs,
+  reactive,
+  onBeforeUnmount,
+  shallowRef,
+} from "vue";
+import { useVehicleStore } from "../store/VehicleStore";
+import { storeToRefs } from "pinia";
+import { Message } from "view-ui-plus";
+import PageHeader from "./PageHeader.vue";
+import SideBar from "./SideBar.vue";
+import BasicMessage from "./BasicMessage.vue";
+import BasicInformation from "./BasicInformation.vue";
+import InformationMsg from "./InformationMsg.vue";
+import AlarmModal from "./AlarmModal.vue";
+import ModeSwitch from "./ModeSwitch.vue";
+import LogModal from "./LogModal.vue";
+import SetView from "./SetView.vue";
+import Logout from "./Logout.vue";
+import MapContainer from "./MapContainer.vue";
 
-    let tipTimer = null
-    const isShowBasic = ref(true)
-    const currentName = ref('basic_message')
-    const basciName = ref('basic_message')
-    const isShow = ref(false)
-    const isShowTip = ref(false)
-    const isShowBoxCheck = ref(false)
-    const title = ref('')
-    const isCloseable = ref(true)
-    const currentTag = shallowRef('')
-    const sideBarDom = ref(null)
-    const vehicleTip = ref('')
-    const remaintime = ref('')
-    const isFooterHide = ref(true)
-    const reloadData = ref(false)
-    const boxCheckMsg = reactive({
-        checkMsg: {}
-    })
-    const { checkMsg } = toRefs(boxCheckMsg)
-    const instance = getCurrentInstance()
-    const { appContext } = instance
-    const { $indexRoot } = appContext.config.globalProperties
-    const vehicleStore = useVehicleStore()
-    const vehicleStoreToRefs = storeToRefs(vehicleStore)
-    const { tipInfo, infoPop } = vehicleStoreToRefs
+let tipTimer = null;
+const isShowBasic = ref(true);
+const currentName = ref("basic_message");
+const basciName = ref("basic_message");
+const isShow = ref(false);
+const isShowTip = ref(false);
+const isShowBoxCheck = ref(false);
+const title = ref("");
+const isCloseable = ref(true);
+const currentTag = shallowRef("");
+const sideBarDom = ref(null);
+const vehicleTip = ref("");
+const remaintime = ref("");
+const isFooterHide = ref(true);
+const reloadData = ref(false);
+const boxCheckMsg = reactive({
+  checkMsg: {},
+  optionModel: "",
+});
+const { checkMsg, optionModel } = toRefs(boxCheckMsg);
+const instance = getCurrentInstance();
+const { appContext } = instance;
+const { $indexRoot } = appContext.config.globalProperties;
+const vehicleStore = useVehicleStore();
+const vehicleStoreToRefs = storeToRefs(vehicleStore);
+const { tipInfo, infoPop } = vehicleStoreToRefs;
 
-    onBeforeMount(() => {
-        window.addEventListener('beforeunload', () => {
-            handleSubscribe()
-        })
+onBeforeMount(() => {
+  window.addEventListener("beforeunload", () => {
+    handleSubscribe();
+  });
   // // 发送同步地图版本号信息
   // if (!$indexRoot.sock) {
   //     $indexRoot.init()
   // }
-    })
+});
 
-    function handleSubscribe() {
-        reloadData.value = true
-        $indexRoot.destroyData()
-    }
+function handleSubscribe() {
+  reloadData.value = true;
+  $indexRoot.destroyData();
+}
 
-    const modalWidth = computed(() => {
-        if (currentName.value === 'log' || currentName.value === 'set') return '70%'
-        return '520px'
-    })
+const modalWidth = computed(() => {
+  if (currentName.value === "log" || currentName.value === "set") return "70%";
+  return "520px";
+});
 
-    function handleSend(msg) {
+function handleSend(msg) {
   if ($indexRoot.sock) {
-            console.log('发送信息', msg)
-            $indexRoot.sock.send(JSON.stringify(msg))
+    console.log("发送信息", msg);
+    $indexRoot.sock.send(JSON.stringify(msg));
   } else {
-            $indexRoot.init().then(socket => {
-                console.log('发送信息', msg)
-                socket.send(JSON.stringify(msg))
-            })
-        }
+    $indexRoot.init().then((socket) => {
+      console.log("发送信息", msg);
+      socket.send(JSON.stringify(msg));
+    });
   }
+}
 
-    function doModeSwitch() {
-        isCloseable.value = false
-        title.value = '确认信息'
-        isShow.value = true
-        currentTag.value = ModeSwitch
-    }
+function doModeSwitch() {
+  isCloseable.value = false;
+  title.value = "确认信息";
+  isShow.value = true;
+  currentTag.value = ModeSwitch;
+}
 
-    function handleModal(name) {
-        title.value = name === 'log' ? '日志获取' : '设置'
-        currentTag.value = name === 'log' ? LogModal : SetView
-        isCloseable.value = true
-        isShow.value = true
-    }
+function handleModal(name) {
+  title.value = name === "log" ? "日志获取" : "设置";
+  currentTag.value = name === "log" ? LogModal : SetView;
+  isCloseable.value = true;
+  isShow.value = true;
+}
 
-    function handleLogout() {
-        title.value = ''
-        currentTag.value = Logout
-        isCloseable.value = true
-        isShow.value = true
-    }
+function handleLogout() {
+  title.value = "";
+  currentTag.value = Logout;
+  isCloseable.value = true;
+  isShow.value = true;
+}
 
-    function changeTab(name) {
-        console.log(name)
-        currentName.value = name
-        switch(name) {
-            case 'mode_switch':
-                doModeSwitch()
-                break
-            case 'mode_information':
-            case 'basic_message':
-                basciName.value = name
-                break
-            case 'log':
-            case 'set':
-                handleModal(name)
-                break
-            case 'logout':
-                handleLogout()
-                break
-        }
+function changeTab(name) {
+  console.log(name);
+  currentName.value = name;
+  switch (name) {
+    case "mode_switch":
+      doModeSwitch();
+      break;
+    case "mode_information":
+    case "basic_message":
+      basciName.value = name;
+      break;
+    case "log":
+    case "set":
+      handleModal(name);
+      break;
+    case "logout":
+      handleLogout();
+      break;
   }
+}
 
-    function handleClose() {
-        isShowBasic.value = false
-    }
+function handleClose() {
+  isShowBasic.value = false;
+}
 
-    function handleShowBasic() {
-        isShowBasic.value = true
-    }
+function handleShowBasic() {
+  isShowBasic.value = true;
+}
 
-    function closeModal() {
-        isShow.value = false
-    }
+function closeModal() {
+  isShow.value = false;
+}
 
-    function modeChange(visible) {
+function modeChange(visible) {
   if (!visible) {
-            let sideBar = sideBarDom.value
-            sideBar.changeMode()
-        }
+    let sideBar = sideBarDom.value;
+    sideBar.changeMode();
   }
+}
 
-    function showModal() {
-        isShow.value = true
-        currentTag.value = AlarmModal
-        title.value = '车辆故障码'
-        isCloseable.value = true
-    }
+function showModal() {
+  isShow.value = true;
+  currentTag.value = AlarmModal;
+  title.value = "车辆故障码";
+  isCloseable.value = true;
+}
 
-    function doClose() {
-        isShowTip.value = false
+function doClose() {
+  isShowTip.value = false;
   if (tipTimer) {
-            clearTimeout(tipTimer)
-            tipTimer = null
-        }
+    clearTimeout(tipTimer);
+    tipTimer = null;
   }
+}
 
-    function handleShowBoxCheck(list) {
-        let data = list[0]
-        if (!data) return
-        boxCheckMsg.checkMsg = data
-        isShowBoxCheck.value = true
+function handleShowBoxCheck(list) {
+  let data = list[0];
+  if (!data) return;
+  if (data.option&&data.option.length > 0) {
+    optionModel.value = data.option[0].value;
   }
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let msg = null;
+  let { type, value, option } = boxCheckMsg.checkMsg;
 
-    function handleBoxCheck(accept) {
-        let {type, value} = boxCheckMsg.checkMsg
   handleSend({
-            type: '/info/popupack',
+    type: "/info/popupack",
     msg: {
       type,
       value,
-                accept
-            }
-        })
-        vehicleStore.splitInfoPop()
-    }
+      accept: option&&option.length > 0 ? optionModel.value : accept,
+    },
+  });
+  vehicleStore.splitInfoPop();
+}
 
-    watch(tipInfo, (msg) => {
-        if (!msg) return
+watch(
+  tipInfo,
+  (msg) => {
+    if (!msg) return;
 
-        const {type, value, remaintime: vehicleRemainTime, isFirst} = msg
+    const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
     if (type === 1) {
-            isShowTip.value = true
-            vehicleTip.value = value
-            isFooterHide.value = false
+      isShowTip.value = true;
+      vehicleTip.value = value;
+      isFooterHide.value = false;
       tipTimer = setTimeout(() => {
-                doClose()
-            }, 5 * 1000)
+        doClose();
+      }, 5 * 1000);
     } else if (type === 2) {
       Message.info({
         content: value,
         duration: 10,
-                closable: true
-            })
+        closable: true,
+      });
     } else {
-            isFooterHide.value = true
+      isFooterHide.value = true;
       if (isFirst === 1) {
-                isShowTip.value = true
+        isShowTip.value = true;
       }
-            vehicleTip.value = value
-            remaintime.value = vehicleRemainTime
+      vehicleTip.value = value;
+      remaintime.value = vehicleRemainTime;
       if (vehicleRemainTime < 1) {
-                isShowTip.value = false
+        isShowTip.value = false;
       }
     }
-        vehicleStore.setData('tipInfo', null)
-    }, {
-        deep: true
-    })
+    vehicleStore.setData("tipInfo", null);
+  },
+  {
+    deep: true,
+  }
+);
 
-    watch(infoPop, (list) => {
+watch(
+  infoPop,
+  (list) => {
     if (list.length) {
-            handleShowBoxCheck(list)
+      handleShowBoxCheck(list);
     } else {
-            isShowBoxCheck.value = false
+      isShowBoxCheck.value = false;
+    }
+  },
+  {
+    deep: true,
   }
-    }, {
-        deep: true
-    })
+);
 
-    onBeforeUnmount(() => {
-        $indexRoot.destroyData()
-        window.removeEventListener('beforeunload', handleSubscribe())
-    })
+onBeforeUnmount(() => {
+  $indexRoot.destroyData();
+  window.removeEventListener("beforeunload", handleSubscribe());
+});
 </script>
 
 <style lang="less" scoped>
@@ -278,7 +366,7 @@
     // align-items: flex-end;
   }
   .page-main {
-        background: url('/image/background.png') no-repeat;
+    background: url("/image/background.png") no-repeat;
     background-size: cover;
     flex: auto;
     display: flex;
@@ -310,8 +398,8 @@
         z-index: 9999;
         top: 5vh;
         left: 1vw;
-                background: #4A75A9;
-                box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
+        background: #4a75a9;
+        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
         border-radius: 10px;
         opacity: 1;
         display: flex;