Skip to content

F
FleetTruckView
Commit ab20be46 authored by 高晓帆's avatar 高晓帆
Browse files
Options

人在环路异常提

parent 95ea31d5
Show whitespace changes
Inline Side-by-side
Showing with 5306 additions and 180 deletions
.history/src/views/Main_20240103193135.vue 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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 0 → 100644
View file @ ab20be46
<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>
Truckmonitorview.zip
View file @ ab20be46
No preview for this file type
src/views/Main.vue
View file @ ab20be46
...@@ -2,268 +2,356 @@ ...@@ -2,268 +2,356 @@
<div class="main"> <div class="main">
<page-header class="page-header"></page-header> <page-header class="page-header"></page-header>
<div class="page-main"> <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">
<div class="container-message" v-show="isShowBasic"> <div class="container-message" v-show="isShowBasic">
<basic-message v-if="basciName === 'basic_message'" @handleClose="handleClose" @showModal="showModal"></basic-message> <basic-message
<basic-information v-else @handleClose="handleClose"></basic-information> 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> <information-msg class="information-msg"></information-msg>
</div> </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="" /> <img src="/image/basic-message-icon.png" alt="" />
</div> </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>
</div> </div>
<Modal v-model="isShow" <Modal
v-model="isShow"
:mask-closable="false" :mask-closable="false"
:footer-hide="true" :footer-hide="true"
:title="title" :title="title"
:closable="isCloseable" :closable="isCloseable"
:width="modalWidth" :width="modalWidth"
@on-visible-change="modeChange"> @on-visible-change="modeChange"
<component :is="currentTag" :is-show="isShow" @handleSend="handleSend" @closeModal="closeModal"></component> >
<component
:is="currentTag"
:is-show="isShow"
@handleSend="handleSend"
@closeModal="closeModal"
></component>
</Modal> </Modal>
<Modal v-model="isShowTip" <Modal
v-model="isShowTip"
:mask-closable="false" :mask-closable="false"
:mask="false" :mask="false"
:footer-hide="isFooterHide"> :footer-hide="isFooterHide"
>
<p>{{ vehicleTip }}</p> <p>{{ vehicleTip }}</p>
<p>{{ remaintime }}</p> <p>{{ remaintime }}</p>
<template #footer> <template #footer>
<Button type="info" class="footer" @click="doClose">确定</Button> <Button type="info" class="footer" @click="doClose">确定</Button>
</template> </template>
</Modal> </Modal>
<Modal v-model="isShowBoxCheck" <Modal
v-model="isShowBoxCheck"
title="确认信息" title="确认信息"
class="box-check" class="box-check"
:closable="false" :closable="false"
:mask-closable="false" :mask-closable="false"
@on-ok="handleBoxCheck(1)" >
@on-cancel="handleBoxCheck(0)"> <div style="display: flex; flex-direction: column">
<span>{{ checkMsg.msg }}</span> <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> </Modal>
</div> </div>
</template> </template>
<script setup> <script setup>
import { onBeforeMount, ref, getCurrentInstance, computed, watch, toRefs, reactive, onBeforeUnmount, shallowRef } from 'vue' import {
import { useVehicleStore } from '../store/VehicleStore'; onBeforeMount,
import { storeToRefs } from 'pinia'; ref,
import { Message } from 'view-ui-plus'; getCurrentInstance,
import PageHeader from './PageHeader.vue' computed,
import SideBar from './SideBar.vue'; watch,
import BasicMessage from './BasicMessage.vue'; toRefs,
import BasicInformation from './BasicInformation.vue'; reactive,
import InformationMsg from './InformationMsg.vue'; onBeforeUnmount,
import AlarmModal from './AlarmModal.vue' shallowRef,
import ModeSwitch from './ModeSwitch.vue' } from "vue";
import LogModal from './LogModal.vue' import { useVehicleStore } from "../store/VehicleStore";
import SetView from './SetView.vue' import { storeToRefs } from "pinia";
import Logout from './Logout.vue' import { Message } from "view-ui-plus";
import MapContainer from './MapContainer.vue' 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 let tipTimer = null;
const isShowBasic = ref(true) const isShowBasic = ref(true);
const currentName = ref('basic_message') const currentName = ref("basic_message");
const basciName = ref('basic_message') const basciName = ref("basic_message");
const isShow = ref(false) const isShow = ref(false);
const isShowTip = ref(false) const isShowTip = ref(false);
const isShowBoxCheck = ref(false) const isShowBoxCheck = ref(false);
const title = ref('') const title = ref("");
const isCloseable = ref(true) const isCloseable = ref(true);
const currentTag = shallowRef('') const currentTag = shallowRef("");
const sideBarDom = ref(null) const sideBarDom = ref(null);
const vehicleTip = ref('') const vehicleTip = ref("");
const remaintime = ref('') const remaintime = ref("");
const isFooterHide = ref(true) const isFooterHide = ref(true);
const reloadData = ref(false) const reloadData = ref(false);
const boxCheckMsg = reactive({ const boxCheckMsg = reactive({
checkMsg: {} checkMsg: {},
}) optionModel: "",
const { checkMsg } = toRefs(boxCheckMsg) });
const instance = getCurrentInstance() const { checkMsg, optionModel } = toRefs(boxCheckMsg);
const { appContext } = instance const instance = getCurrentInstance();
const { $indexRoot } = appContext.config.globalProperties const { appContext } = instance;
const vehicleStore = useVehicleStore() const { $indexRoot } = appContext.config.globalProperties;
const vehicleStoreToRefs = storeToRefs(vehicleStore) const vehicleStore = useVehicleStore();
const { tipInfo, infoPop } = vehicleStoreToRefs const vehicleStoreToRefs = storeToRefs(vehicleStore);
const { tipInfo, infoPop } = vehicleStoreToRefs;
onBeforeMount(() => { onBeforeMount(() => {
window.addEventListener('beforeunload', () => { window.addEventListener("beforeunload", () => {
handleSubscribe() handleSubscribe();
}) });
// // 发送同步地图版本号信息 // // 发送同步地图版本号信息
// if (!$indexRoot.sock) { // if (!$indexRoot.sock) {
// $indexRoot.init() // $indexRoot.init()
// } // }
}) });
function handleSubscribe() { function handleSubscribe() {
reloadData.value = true reloadData.value = true;
$indexRoot.destroyData() $indexRoot.destroyData();
} }
const modalWidth = computed(() => { const modalWidth = computed(() => {
if (currentName.value === 'log' || currentName.value === 'set') return '70%' if (currentName.value === "log" || currentName.value === "set") return "70%";
return '520px' return "520px";
}) });
function handleSend(msg) { function handleSend(msg) {
if ($indexRoot.sock) { if ($indexRoot.sock) {
console.log('发送信息', msg) console.log("发送信息", msg);
$indexRoot.sock.send(JSON.stringify(msg)) $indexRoot.sock.send(JSON.stringify(msg));
} else { } else {
$indexRoot.init().then(socket => { $indexRoot.init().then((socket) => {
console.log('发送信息', msg) console.log("发送信息", msg);
socket.send(JSON.stringify(msg)) socket.send(JSON.stringify(msg));
}) });
}
} }
}
function doModeSwitch() { function doModeSwitch() {
isCloseable.value = false isCloseable.value = false;
title.value = '确认信息' title.value = "确认信息";
isShow.value = true isShow.value = true;
currentTag.value = ModeSwitch currentTag.value = ModeSwitch;
} }
function handleModal(name) { function handleModal(name) {
title.value = name === 'log' ? '日志获取' : '设置' title.value = name === "log" ? "日志获取" : "设置";
currentTag.value = name === 'log' ? LogModal : SetView currentTag.value = name === "log" ? LogModal : SetView;
isCloseable.value = true isCloseable.value = true;
isShow.value = true isShow.value = true;
} }
function handleLogout() { function handleLogout() {
title.value = '' title.value = "";
currentTag.value = Logout currentTag.value = Logout;
isCloseable.value = true isCloseable.value = true;
isShow.value = true isShow.value = true;
} }
function changeTab(name) { function changeTab(name) {
console.log(name) console.log(name);
currentName.value = name currentName.value = name;
switch(name) { switch (name) {
case 'mode_switch': case "mode_switch":
doModeSwitch() doModeSwitch();
break break;
case 'mode_information': case "mode_information":
case 'basic_message': case "basic_message":
basciName.value = name basciName.value = name;
break break;
case 'log': case "log":
case 'set': case "set":
handleModal(name) handleModal(name);
break break;
case 'logout': case "logout":
handleLogout() handleLogout();
break break;
}
} }
}
function handleClose() { function handleClose() {
isShowBasic.value = false isShowBasic.value = false;
} }
function handleShowBasic() { function handleShowBasic() {
isShowBasic.value = true isShowBasic.value = true;
} }
function closeModal() { function closeModal() {
isShow.value = false isShow.value = false;
} }
function modeChange(visible) { function modeChange(visible) {
if (!visible) { if (!visible) {
let sideBar = sideBarDom.value let sideBar = sideBarDom.value;
sideBar.changeMode() sideBar.changeMode();
}
} }
}
function showModal() { function showModal() {
isShow.value = true isShow.value = true;
currentTag.value = AlarmModal currentTag.value = AlarmModal;
title.value = '车辆故障码' title.value = "车辆故障码";
isCloseable.value = true isCloseable.value = true;
} }
function doClose() { function doClose() {
isShowTip.value = false isShowTip.value = false;
if (tipTimer) { if (tipTimer) {
clearTimeout(tipTimer) clearTimeout(tipTimer);
tipTimer = null tipTimer = null;
}
} }
}
function handleShowBoxCheck(list) { function handleShowBoxCheck(list) {
let data = list[0] let data = list[0];
if (!data) return if (!data) return;
boxCheckMsg.checkMsg = data if (data.option&&data.option.length > 0) {
isShowBoxCheck.value = true 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({ handleSend({
type: '/info/popupack', type: "/info/popupack",
msg: { msg: {
type, type,
value, value,
accept accept: option&&option.length > 0 ? optionModel.value : accept,
} },
}) });
vehicleStore.splitInfoPop() vehicleStore.splitInfoPop();
} }
watch(tipInfo, (msg) => { watch(
if (!msg) return tipInfo,
(msg) => {
if (!msg) return;
const {type, value, remaintime: vehicleRemainTime, isFirst} = msg const { type, value, remaintime: vehicleRemainTime, isFirst } = msg;
if (type === 1) { if (type === 1) {
isShowTip.value = true isShowTip.value = true;
vehicleTip.value = value vehicleTip.value = value;
isFooterHide.value = false isFooterHide.value = false;
tipTimer = setTimeout(() => { tipTimer = setTimeout(() => {
doClose() doClose();
}, 5 * 1000) }, 5 * 1000);
} else if (type === 2) { } else if (type === 2) {
Message.info({ Message.info({
content: value, content: value,
duration: 10, duration: 10,
closable: true closable: true,
}) });
} else { } else {
isFooterHide.value = true isFooterHide.value = true;
if (isFirst === 1) { if (isFirst === 1) {
isShowTip.value = true isShowTip.value = true;
} }
vehicleTip.value = value vehicleTip.value = value;
remaintime.value = vehicleRemainTime remaintime.value = vehicleRemainTime;
if (vehicleRemainTime < 1) { if (vehicleRemainTime < 1) {
isShowTip.value = false isShowTip.value = false;
} }
} }
vehicleStore.setData('tipInfo', null) vehicleStore.setData("tipInfo", null);
}, { },
deep: true {
}) deep: true,
}
);
watch(infoPop, (list) => { watch(
infoPop,
(list) => {
if (list.length) { if (list.length) {
handleShowBoxCheck(list) handleShowBoxCheck(list);
} else { } else {
isShowBoxCheck.value = false isShowBoxCheck.value = false;
}
},
{
deep: true,
} }
}, { );
deep: true
})
onBeforeUnmount(() => { onBeforeUnmount(() => {
$indexRoot.destroyData() $indexRoot.destroyData();
window.removeEventListener('beforeunload', handleSubscribe()) window.removeEventListener("beforeunload", handleSubscribe());
}) });
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
...@@ -278,7 +366,7 @@ ...@@ -278,7 +366,7 @@
// align-items: flex-end; // align-items: flex-end;
} }
.page-main { .page-main {
background: url('/image/background.png') no-repeat; background: url("/image/background.png") no-repeat;
background-size: cover; background-size: cover;
flex: auto; flex: auto;
display: flex; display: flex;
...@@ -310,8 +398,8 @@ ...@@ -310,8 +398,8 @@
z-index: 9999; z-index: 9999;
top: 5vh; top: 5vh;
left: 1vw; left: 1vw;
background: #4A75A9; background: #4a75a9;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
border-radius: 10px; border-radius: 10px;
opacity: 1; opacity: 1;
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment