Merge branch 'dev' of http://git.feashow.cn/clay/tunnel-cloud-web into dev
This commit is contained in:
trp
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<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 :class="{'select-active':selectButton===index}">{{ item.name }}</div>
|
||||
</div>
|
||||
@@ -18,17 +18,17 @@ const props = defineProps({
|
||||
default: []
|
||||
},
|
||||
})
|
||||
watch(() => props.list, (now) => {
|
||||
let newArr=[]
|
||||
btnList.value.forEach((btnList) => {
|
||||
now.forEach((item) => {
|
||||
if (btnList.route==item) {
|
||||
newArr.push(btnList)
|
||||
}
|
||||
})
|
||||
})
|
||||
btnList.value=newArr
|
||||
}, {deep: true});
|
||||
// watch(() => props.list, (now) => {
|
||||
// let newArr=[]
|
||||
// btnList.value.forEach((btnList) => {
|
||||
// now.forEach((item) => {
|
||||
// if (btnList.route==item) {
|
||||
// newArr.push(btnList)
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
// btnList.value=newArr
|
||||
// }, {deep: true});
|
||||
const emit = defineEmits(["update:modelValue", "select"]);
|
||||
const btnList = ref([
|
||||
{
|
||||
@@ -56,6 +56,7 @@ const btnList = ref([
|
||||
// name: '模拟仿真'
|
||||
// },
|
||||
])
|
||||
const newList=ref([])
|
||||
const selectButton = ref(props.modelValue);
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(`../../assets/images/topAndDown/${name}`, import.meta.url).href
|
||||
|
||||
@@ -16,8 +16,8 @@
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{
|
||||
item.label
|
||||
}}
|
||||
item.label
|
||||
}}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
@@ -36,21 +36,21 @@
|
||||
<preview-scene id="tunnel-box" :isedit="false" :tunnelId="tunnelId" :key="tunnelId"></preview-scene>
|
||||
<div class="left">
|
||||
<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"
|
||||
:transducer-data="largeScreenData" />
|
||||
: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>
|
||||
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
|
||||
<div v-else class="shrink-left" @click="closeLeft"></div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<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">
|
||||
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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" />
|
||||
:close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" :win-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"/>
|
||||
</el-drawer>
|
||||
<div v-if="drawerRight" class="right-arrow" @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 BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
|
||||
import ManageBtn from "@/components/manageBtn/index.vue";
|
||||
import { dateFormat } from "@/utils/date.js";
|
||||
import { getToken } from "@/utils/auth";
|
||||
import { useAuthStore } from "@/store/userstore.js";
|
||||
import { getLargeScreen, getLargeScreenInfo, getTunnelBySiteId } from "@/api/largeScreen";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { getUserInfo } from "@/api/login";
|
||||
import { initSceneData } from "@/api/tunnelScene";
|
||||
import { getSiteDetail } from "../../api/site";
|
||||
import {dateFormat} from "@/utils/date.js";
|
||||
import {getToken} from "@/utils/auth";
|
||||
import {useAuthStore} from "@/store/userstore.js";
|
||||
import {getLargeScreen, getLargeScreenInfo, getTunnelBySiteId} from "@/api/largeScreen";
|
||||
import {ElMessage, ElMessageBox} from "element-plus";
|
||||
import {getUserInfo} from "@/api/login";
|
||||
import {initSceneData} from "@/api/tunnelScene";
|
||||
import {getSiteDetail} from "../../api/site";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const router = useRouter();
|
||||
@@ -106,6 +106,32 @@ const tunnelLength = ref(0);
|
||||
const constructionLength = ref(0);
|
||||
const routeList = ref([]);
|
||||
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");
|
||||
let token = getToken();
|
||||
let send = {
|
||||
@@ -126,165 +152,174 @@ onMounted(() => {
|
||||
});
|
||||
const getUser = () => {
|
||||
getUserInfo().then(res => {
|
||||
showMenu.value=true
|
||||
currentUser.value = res.data.user.userName
|
||||
currentUserId.value = res.data.user.userId
|
||||
})
|
||||
}
|
||||
const getDefaultSite = (siteId) => {
|
||||
// console.log('siteList.value',siteList.value)
|
||||
// getSiteDetail(siteId).then((res) => {
|
||||
// console.log('res',res)
|
||||
// });
|
||||
}
|
||||
const getOtherInfo = () => {
|
||||
getLargeScreenInfo().then((res) => {
|
||||
// console.log('siteList.value',siteList.value)
|
||||
// getSiteDetail(siteId).then((res) => {
|
||||
// console.log('res',res)
|
||||
// });
|
||||
}
|
||||
const getOtherInfo = () => {
|
||||
getLargeScreenInfo().then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
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
|
||||
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
|
||||
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
|
||||
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
|
||||
}
|
||||
});
|
||||
};
|
||||
const getScreenInfo = (id) => {
|
||||
if (id) {
|
||||
tunnelId.value = id
|
||||
getLargeScreen(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
routeList.value = res.data.routeList
|
||||
siteList.value = res.data.siteOption
|
||||
currentSiteId.value = res.data.siteOption[res.data.siteOption.length - 1].value
|
||||
currentSite.value = res.data.siteOption[res.data.siteOption.length - 1].label
|
||||
getTunnel(res.data.siteOption[res.data.siteOption.length - 1].value)
|
||||
largeScreenData.value = res.data;
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
}
|
||||
});
|
||||
initSceneData(id).then((res) => {
|
||||
tunnelLength.value = res.data.tunnelLength
|
||||
constructionLength.value = res.data.constructionLength
|
||||
})
|
||||
}
|
||||
};
|
||||
//根据站点id获取隧道信息
|
||||
const getTunnel = (id) => {
|
||||
getTunnelBySiteId(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
tunnelList.value = res.data
|
||||
getScreenInfo(res.data[0]?.value)
|
||||
}
|
||||
});
|
||||
}
|
||||
const changeTunnel = (e) => {
|
||||
let newObj = {}
|
||||
tunnelList.value.forEach((item, index) => {
|
||||
if (index === e) {
|
||||
newObj = item
|
||||
}
|
||||
})
|
||||
getScreenInfo(newObj.value)
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
}
|
||||
const manageSelect = (index) => {
|
||||
console.log("首页点击-", index);
|
||||
if (index == '站点管理') {
|
||||
if (currentUserId.value) {
|
||||
router.push("/site/" + currentUserId.value);
|
||||
}
|
||||
} else if (index == '隧道管理') {
|
||||
if (currentSiteId.value && currentUserId.value) {
|
||||
router.push("/tunnel/" + currentSiteId.value + '/i/' + currentUserId.value);
|
||||
}
|
||||
} else if (index == '用户管理') {
|
||||
if (currentSiteId.value) {
|
||||
router.push("/user/" + currentSiteId.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
const handleChangeSite = (item) => {
|
||||
currentSite.value = item.label
|
||||
currentSiteId.value = item.value
|
||||
getTunnel(item.value)
|
||||
showFan.value = false
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
}
|
||||
const closeLeft = () => {
|
||||
drawerLeft.value = !drawerLeft.value;
|
||||
};
|
||||
const closeRight = () => {
|
||||
drawerRight.value = !drawerRight.value;
|
||||
};
|
||||
const handleLogout = () => {
|
||||
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
authStore.userLogout();
|
||||
router.push("/login");
|
||||
})
|
||||
};
|
||||
const previousBtn = () => {
|
||||
tunnelBtn.value.prev();
|
||||
};
|
||||
const nextBtn = () => {
|
||||
tunnelBtn.value.next();
|
||||
};
|
||||
|
||||
const initWebSocket = () => {
|
||||
// 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}`;
|
||||
console.log(wsUrl);
|
||||
socket = new WebSocket(wsUrl);
|
||||
//连接发生错误的回调方法
|
||||
socket.onerror = function () {
|
||||
console.log("ws连接发生错误");
|
||||
};
|
||||
const getScreenInfo = (id) => {
|
||||
if (id) {
|
||||
tunnelId.value = id
|
||||
getLargeScreen(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
largeScreenData.value = res.data;
|
||||
} else {
|
||||
ElMessage.warning(res.msg)
|
||||
//连接成功建立的回调方法
|
||||
socket.onopen = function () {
|
||||
console.log("ws连接成功");
|
||||
};
|
||||
//接收到消息的回调方法
|
||||
socket.onmessage = function (event) {
|
||||
console.log("服务器返回的信息: ", JSON.parse(event.data));
|
||||
const type = JSON.parse(event.data).type;
|
||||
const data = JSON.parse(event.data).data;
|
||||
if (type === "equipment") {
|
||||
data.forEach((item) => {
|
||||
if (item.typeKey === "frequency") {
|
||||
socketData.leftData = data;
|
||||
} else if (item.typeKey === "windPressure") {
|
||||
socketData.windPressure = data;
|
||||
} else if (item.typeKey === "sensor") {
|
||||
socketData.sensor = data;
|
||||
}
|
||||
});
|
||||
initSceneData(id).then((res) => {
|
||||
tunnelLength.value = res.data.tunnelLength
|
||||
constructionLength.value = res.data.constructionLength
|
||||
})
|
||||
}
|
||||
};
|
||||
//根据站点id获取隧道信息
|
||||
const getTunnel = (id) => {
|
||||
getTunnelBySiteId(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
tunnelList.value = res.data
|
||||
getScreenInfo(res.data[0]?.value)
|
||||
}
|
||||
});
|
||||
}
|
||||
const changeTunnel = (e) => {
|
||||
let newObj = {}
|
||||
tunnelList.value.forEach((item, index) => {
|
||||
if (index === e) {
|
||||
newObj = item
|
||||
}
|
||||
})
|
||||
getScreenInfo(newObj.value)
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
}
|
||||
const manageSelect = (index) => {
|
||||
console.log("首页点击-", index);
|
||||
if (index == '站点管理') {
|
||||
if (currentUserId.value) {
|
||||
router.push("/site/" + currentUserId.value);
|
||||
}
|
||||
} else if (index == '隧道管理') {
|
||||
if (currentSiteId.value && currentUserId.value) {
|
||||
router.push("/tunnel/" + currentSiteId.value + '/i/' + currentUserId.value);
|
||||
}
|
||||
} else if (index == '用户管理') {
|
||||
if (currentSiteId.value) {
|
||||
router.push("/user/" + currentSiteId.value);
|
||||
}
|
||||
}
|
||||
//连接关闭的回调方法
|
||||
socket.onclose = function () {
|
||||
console.log("ws连接关闭");
|
||||
// initWebSocket()
|
||||
};
|
||||
const handleChangeSite = (item) => {
|
||||
currentSite.value = item.label
|
||||
currentSiteId.value = item.value
|
||||
getTunnel(item.value)
|
||||
showFan.value=false
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
}
|
||||
const closeLeft = () => {
|
||||
drawerLeft.value = !drawerLeft.value;
|
||||
};
|
||||
const closeRight = () => {
|
||||
drawerRight.value = !drawerRight.value;
|
||||
};
|
||||
const handleLogout = () => {
|
||||
ElMessageBox.confirm(`确认退出登录吗`, '系统提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
authStore.userLogout();
|
||||
router.push("/login");
|
||||
})
|
||||
};
|
||||
const previousBtn = () => {
|
||||
tunnelBtn.value.prev();
|
||||
};
|
||||
const nextBtn = () => {
|
||||
tunnelBtn.value.next();
|
||||
};
|
||||
|
||||
const initWebSocket = () => {
|
||||
// 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}`;
|
||||
console.log(wsUrl);
|
||||
socket = new WebSocket(wsUrl);
|
||||
//连接发生错误的回调方法
|
||||
socket.onerror = function () {
|
||||
console.log("ws连接发生错误");
|
||||
};
|
||||
//连接成功建立的回调方法
|
||||
socket.onopen = function () {
|
||||
console.log("ws连接成功");
|
||||
};
|
||||
//接收到消息的回调方法
|
||||
socket.onmessage = function (event) {
|
||||
console.log("服务器返回的信息: ", JSON.parse(event.data));
|
||||
const type = JSON.parse(event.data).type;
|
||||
const data = JSON.parse(event.data).data;
|
||||
if (type === "equipment") {
|
||||
data.forEach((item) => {
|
||||
if (item.typeKey === "frequency") {
|
||||
socketData.leftData = data;
|
||||
} else if (item.typeKey === "windPressure") {
|
||||
socketData.windPressure = data;
|
||||
} else if (item.typeKey === "sensor") {
|
||||
socketData.sensor = data;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
//连接关闭的回调方法
|
||||
socket.onclose = function () {
|
||||
console.log("ws连接关闭");
|
||||
// initWebSocket()
|
||||
};
|
||||
setInterval(() => {
|
||||
socket.send(JSON.stringify(send));
|
||||
}, 30000);
|
||||
};
|
||||
const closeSocket = () => {
|
||||
socket.close();
|
||||
};
|
||||
initWebSocket();
|
||||
setInterval(() => {
|
||||
socket.send(JSON.stringify(send));
|
||||
}, 30000);
|
||||
};
|
||||
const closeSocket = () => {
|
||||
socket.close();
|
||||
};
|
||||
initWebSocket();
|
||||
|
||||
|
||||
watch(
|
||||
watch(
|
||||
() => tunnelId.value,
|
||||
(now) => {
|
||||
tunnelId.value = now
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
{deep: true}
|
||||
)
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-dropdown__popper.el-popper {
|
||||
|
||||
Reference in New Issue
Block a user