fix

.history/public/config_20231230185155.json

+{
+    "SERVICE_IP": "192.168.109.70:1234",
+    "LOG_SERVE_IP":"192.168.93.87:8020",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.4"
+}
\ No newline at end of file

.history/public/config_20240103183851.json

+{
+    "SERVICE_IP": "172.16.0.121:1234",
+    "LOG_SERVE_IP":"192.168.93.87:8020",
+    "MAP_CENTER": [39.74441007068,111.24544532751],
+    "version": "1.1.4"
+}
\ No newline at end of file

.history/src/views/Main_20240103184447.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"
+    >
+      <span>{{ checkMsg.msg }}</span>
+      <Radio-group v-model="disabledGroup">
+        <Radio label="金斑蝶" disabled></Radio>
+        <Radio label="爪哇犀牛"></Radio>
+        <Radio label="印度黑羚"></Radio>
+      </Radio-group>
+      <template #footer>
+        <Button type="info" class="footer" @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button type="info" class="footer" @click="handleBoxCheck(0)"
+          >取消</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(true);
+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;
+
+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;
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let { type, value } = boxCheckMsg.checkMsg;
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      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_20240103184455.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"
+    >
+      <span>{{ checkMsg.msg }}</span>
+      <Radio-group>
+        <Radio label="金斑蝶" disabled></Radio>
+        <Radio label="爪哇犀牛"></Radio>
+        <Radio label="印度黑羚"></Radio>
+      </Radio-group>
+      <template #footer>
+        <Button type="info" class="footer" @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button type="info" class="footer" @click="handleBoxCheck(0)"
+          >取消</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(true);
+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;
+
+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;
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let { type, value } = boxCheckMsg.checkMsg;
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      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_20240103184513.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"
+    >
+      <span>{{ checkMsg.msg }}</span>
+      <Radio-group vertical>
+        <Radio label="金斑蝶" disabled></Radio>
+        <Radio label="爪哇犀牛"></Radio>
+        <Radio label="印度黑羚"></Radio>
+      </Radio-group>
+      <template #footer>
+        <Button type="info" class="footer" @click="handleBoxCheck(1)"
+          >确定</Button
+        >
+        <Button type="info" class="footer" @click="handleBoxCheck(0)"
+          >取消</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(true);
+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;
+
+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;
+  boxCheckMsg.checkMsg = data;
+  isShowBoxCheck.value = true;
+}
+
+function handleBoxCheck(accept) {
+  let { type, value } = boxCheckMsg.checkMsg;
+  handleSend({
+    type: "/info/popupack",
+    msg: {
+      type,
+      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>