This commit is contained in:
trp
2023-12-30 13:24:04 +08:00
2 changed files with 204 additions and 168 deletions

View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="manage-btn"> <div class="manage-btn">
<div v-for="(item,index) in btnList" :key="item.name" class="btn-box" @click="select(item,index)"> <div v-for="(item,index) in list" :key="item.name" class="btn-box" @click="select(item,index)">
<div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div> <div :style="{ backgroundImage:'url(' +getImageUrl(item.icon)+')' }"></div>
<div :class="{'select-active':selectButton===index}">{{ item.name }}</div> <div :class="{'select-active':selectButton===index}">{{ item.name }}</div>
</div> </div>
@@ -18,17 +18,17 @@ const props = defineProps({
default: [] default: []
}, },
}) })
watch(() => props.list, (now) => { // watch(() => props.list, (now) => {
let newArr=[] // let newArr=[]
btnList.value.forEach((btnList) => { // btnList.value.forEach((btnList) => {
now.forEach((item) => { // now.forEach((item) => {
if (btnList.route==item) { // if (btnList.route==item) {
newArr.push(btnList) // newArr.push(btnList)
} // }
}) // })
}) // })
btnList.value=newArr // btnList.value=newArr
}, {deep: true}); // }, {deep: true});
const emit = defineEmits(["update:modelValue", "select"]); const emit = defineEmits(["update:modelValue", "select"]);
const btnList = ref([ const btnList = ref([
{ {
@@ -56,6 +56,7 @@ const btnList = ref([
// name: '模拟仿真' // name: '模拟仿真'
// }, // },
]) ])
const newList=ref([])
const selectButton = ref(props.modelValue); const selectButton = ref(props.modelValue);
const getImageUrl = (name) => { const getImageUrl = (name) => {
return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href

View File

@@ -38,9 +38,9 @@
<el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerLeft" direction="ltr" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData" <fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"
:transducer-data="largeScreenData" /> :transducer-data="largeScreenData"/>
<!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />--> <!-- <transducer-list v-if="showFan" :list="socketData.leftData" :transducer-data="largeScreenData" />-->
<used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData" /> <used-ele v-if="showFan" :list="socketData.leftData" :ele-data="largeScreenData"/>
</el-drawer> </el-drawer>
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div> <div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
<div v-else class="shrink-left" @click="closeLeft"></div> <div v-else class="shrink-left" @click="closeLeft"></div>
@@ -48,9 +48,9 @@
<div class="right"> <div class="right">
<el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false" <el-drawer v-model="drawerRight" direction="rtl" modal-class="modal-box" :modal="false" :show-close="false"
:close-on-click-modal="false" :close-on-press-escape="false"> :close-on-click-modal="false" :close-on-press-escape="false">
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData" /> <wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-data="largeScreenData"/>
<air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData" /> <air-info v-if="showFan" :list="socketData.sensor" :air-data="largeScreenData"/>
<bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId" /> <bad-gas-info v-if="showFan" :list="socketData.sensor" :bad-gas-data="largeScreenData" :tunnelId="tunnelId"/>
</el-drawer> </el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div> <div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div> <div v-else class="shrink-right" @click="closeRight"></div>
@@ -77,14 +77,14 @@ import WindPressureList from "@/components/content/windPressure/WindPressureList
import AirInfo from "@/components/content/airInfo/AirInfo.vue"; import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue"; import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue"; import ManageBtn from "@/components/manageBtn/index.vue";
import { dateFormat } from "@/utils/date.js"; import {dateFormat} from "@/utils/date.js";
import { getToken } from "@/utils/auth"; import {getToken} from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js"; import {useAuthStore} from "@/store/userstore.js";
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen"; import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
import { ElMessage, ElMessageBox } from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
import { getUserInfo } from "@/api/login"; import {getUserInfo} from "@/api/login";
import { initSceneData } from "@/api/tunnelScene"; import {initSceneData} from "@/api/tunnelScene";
import { getSiteDetail } from "../../api/site"; import {getSiteDetail} from "../../api/site";
const authStore = useAuthStore(); const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
@@ -106,6 +106,32 @@ const tunnelLength = ref(0);
const constructionLength = ref(0); const constructionLength = ref(0);
const routeList = ref([]); const routeList = ref([]);
let socket = reactive(""); let socket = reactive("");
const btnList = ref([
{
route: '/site',
icon: 'sp_icon_zdgl.png',
name: '站点管理'
},
{
route: '/tunnel',
icon: 'sp_icon_sdgl.png',
name: '隧道管理'
},
{
route: '/user',
icon: 'sp_icon_yhgl.png',
name: '用户管理'
},
// {
// route: '/system',
// icon: 'sp_icon_xtgl.png',
// name: '系统管理'
// },
// {
// icon: 'sp_icon_mngl.png',
// name: '模拟仿真'
// },
])
const serialNumber = ref("SC00DY00GH00ELBT"); const serialNumber = ref("SC00DY00GH00ELBT");
let token = getToken(); let token = getToken();
let send = { let send = {
@@ -126,7 +152,6 @@ onMounted(() => {
}); });
const getUser = () => { const getUser = () => {
getUserInfo().then(res => { getUserInfo().then(res => {
showMenu.value=true
currentUser.value = res.data.user.userName currentUser.value = res.data.user.userName
currentUserId.value = res.data.user.userId currentUserId.value = res.data.user.userId
}) })
@@ -136,19 +161,29 @@ const getDefaultSite = (siteId) => {
// getSiteDetail(siteId).then((res) => { // getSiteDetail(siteId).then((res) => {
// console.log('res',res) // console.log('res',res)
// }); // });
} }
const getOtherInfo = () => { const getOtherInfo = () => {
getLargeScreenInfo().then((res) => { getLargeScreenInfo().then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
routeList.value = res.data.routeList let routeArr = [];
console.log(res.data.routeList,"res.data.routeList")
res.data.routeList.forEach((item, index) => {
for (let btn of btnList.value) {
if (item === btn.route){
routeArr.push(btn)
}
}
})
routeList.value = routeArr
showMenu.value = true
siteList.value = res.data.siteOption siteList.value = res.data.siteOption
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value) getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
} }
}); });
}; };
const getScreenInfo = (id) => { const getScreenInfo = (id) => {
if (id) { if (id) {
tunnelId.value = id tunnelId.value = id
getLargeScreen(id).then((res) => { getLargeScreen(id).then((res) => {
@@ -163,17 +198,17 @@ const getDefaultSite = (siteId) => {
constructionLength.value = res.data.constructionLength constructionLength.value = res.data.constructionLength
}) })
} }
}; };
//根据站点id获取隧道信息 //根据站点id获取隧道信息
const getTunnel = (id) => { const getTunnel = (id) => {
getTunnelBySiteId(id).then((res) => { getTunnelBySiteId(id).then((res) => {
if (res?.code === 1000) { if (res?.code === 1000) {
tunnelList.value = res.data tunnelList.value = res.data
getScreenInfo(res.data[0]?.value) getScreenInfo(res.data[0]?.value)
} }
}); });
} }
const changeTunnel = (e) => { const changeTunnel = (e) => {
let newObj = {} let newObj = {}
tunnelList.value.forEach((item, index) => { tunnelList.value.forEach((item, index) => {
if (index === e) { if (index === e) {
@@ -184,8 +219,8 @@ const getDefaultSite = (siteId) => {
nextTick(() => { nextTick(() => {
showFan.value = true; showFan.value = true;
}); });
} }
const manageSelect = (index) => { const manageSelect = (index) => {
console.log("首页点击-", index); console.log("首页点击-", index);
if (index == '站点管理') { if (index == '站点管理') {
if (currentUserId.value) { if (currentUserId.value) {
@@ -200,23 +235,23 @@ const getDefaultSite = (siteId) => {
router.push("/user/" + currentSiteId.value); router.push("/user/" + currentSiteId.value);
} }
} }
}; };
const handleChangeSite = (item) => { const handleChangeSite = (item) => {
currentSite.value = item.label currentSite.value = item.label
currentSiteId.value = item.value currentSiteId.value = item.value
getTunnel(item.value) getTunnel(item.value)
showFan.value=false showFan.value = false
nextTick(() => { nextTick(() => {
showFan.value = true; showFan.value = true;
}); });
} }
const closeLeft = () => { const closeLeft = () => {
drawerLeft.value = !drawerLeft.value; drawerLeft.value = !drawerLeft.value;
}; };
const closeRight = () => { const closeRight = () => {
drawerRight.value = !drawerRight.value; drawerRight.value = !drawerRight.value;
}; };
const handleLogout = () => { const handleLogout = () => {
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', { ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
@@ -225,15 +260,15 @@ const getDefaultSite = (siteId) => {
authStore.userLogout(); authStore.userLogout();
router.push("/login"); router.push("/login");
}) })
}; };
const previousBtn = () => { const previousBtn = () => {
tunnelBtn.value.prev(); tunnelBtn.value.prev();
}; };
const nextBtn = () => { const nextBtn = () => {
tunnelBtn.value.next(); tunnelBtn.value.next();
}; };
const initWebSocket = () => { const initWebSocket = () => {
// let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}` // let wsUrl = `ws://192.168.31.175:9000/websocket/equipment/${token}/${serialNumber.value}`
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`; let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/websocket/equipment/${token}/${serialNumber.value}`;
console.log(wsUrl); console.log(wsUrl);
@@ -271,20 +306,20 @@ const getDefaultSite = (siteId) => {
setInterval(() => { setInterval(() => {
socket.send(JSON.stringify(send)); socket.send(JSON.stringify(send));
}, 30000); }, 30000);
}; };
const closeSocket = () => { const closeSocket = () => {
socket.close(); socket.close();
}; };
initWebSocket(); initWebSocket();
watch( watch(
() => tunnelId.value, () => tunnelId.value,
(now) => { (now) => {
tunnelId.value = now tunnelId.value = now
}, },
{ deep: true } {deep: true}
) )
</script> </script>
<style lang="scss"> <style lang="scss">
.el-dropdown__popper.el-popper { .el-dropdown__popper.el-popper {