odjbin/tunnel-cloud-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

唐润平：上线版,功能为待完善

Browse Source
This commit is contained in:
trp
2023-12-14 10:26:29 +08:00
parent e95c24befe
commit fb9dfb37a2
21 changed files with 701 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/views/tunnel/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div>
<div id="main">
<div class="box-top">
<manage-btn v-model="selectIndex" @select="manageSelect"/>
<manage-btn v-model="selectIndex" @select="manageSelect" />
<div class="tunnel-title"></div>
<manage-length class="tunnel-length"></manage-length>
<div class="top-right">
@@ -16,30 +16,56 @@
</div>
</div>
</div>
<tunnel-scene id="tunnel-box"/>
<tunnel-scene id="tunnel-box" />
<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">
<fan-info v-if="showFan" :list="socketData.leftData" :fan-data="largeScreenData"/>
<transducer-list :list="socketData.leftData" :transducer-data="largeScreenData"/>
<used-ele :list="socketData.leftData" :ele-data="largeScreenData"/>
<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"
>
<fan-info
v-if="showFan"
:list="socketData.leftData"
:fan-data="largeScreenData"
/>
<transducer-list
:list="socketData.leftData"
:transducer-data="largeScreenData"
/>
<used-ele :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"
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"/>
<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"
/>
</el-drawer>
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
<div v-else class="shrink-right" @click="closeRight"></div>
@@ -68,98 +94,103 @@ import AirInfo from "@/components/content/airInfo/AirInfo.vue";
import BadGasInfo from "@/components/content/badGasInfo/BadGasInfo.vue";
import ManageBtn from "@/components/manageBtn/index.vue";
import ManageLength from "@/components/manageLength/index.vue";
import {dateFormat} from "@/utils/date.js";
import {onMounted} from "vue";
import {getToken} from "@/utils/auth";
import {useAuthStore} from '@/store/userstore.js'
import {getLargeScreen} from "@/api/largeScreen";
import { dateFormat } from "@/utils/date.js";
import { onMounted } from "vue";
import { getToken } from "@/utils/auth";
import { useAuthStore } from "@/store/userstore.js";
import { getLargeScreen } from "@/api/largeScreen";
const authStore = useAuthStore()
const router = useRouter()
const selectIndex = ref(1)
const showFan = ref(false)
const drawerLeft = ref(true)
const drawerRight = ref(true)
const currentSite = ref('松江站')
const currentUser = ref('admin')
const currentDate = ref(dateFormat())
const tunnelBtn = ref()
const authStore = useAuthStore();
const router = useRouter();
const selectIndex = ref(1);
const showFan = ref(false);
const drawerLeft = ref(true);
const drawerRight = ref(true);
const currentSite = ref("松江站");
const currentUser = ref("admin");
const currentDate = ref(dateFormat());
const tunnelBtn = ref();
const tunnelList = ref([
{
value: 0,
name: '一号隧道'
}, {
name: "一号隧道",
},
{
value: 1,
name: '二号隧道'
}, {
name: "二号隧道",
},
{
value: 2,
name: '三号隧道'
}, {
name: "三号隧道",
},
{
value: 3,
name: '四号隧道'
}, {
name: "四号隧道",
},
{
value: 4,
name: '五号隧道'
}, {
name: "五号隧道",
},
{
value: 5,
name: '六号隧道'
}
])
let socket = reactive('')
const serialNumber = ref('SC00DY00GH00ELBT')
name: "六号隧道",
},
]);
let socket = reactive("");
const serialNumber = ref("SC00DY00GH00ELBT");
let token = getToken();
let send = {
type: "ping"
}
const largeScreenData = ref(null)
type: "ping",
};
const largeScreenData = ref(null);
const socketData = reactive({
leftData: [],
windPressure: [],
sensor: [],
})
});
onMounted(() => {
nextTick(() => {
showFan.value = true
})
getScreenInfo()
})
showFan.value = true;
});
getScreenInfo();
});
const getScreenInfo = async () => {
await getLargeScreen(1).then(res => {
await getLargeScreen(1).then((res) => {
if (res?.code === 1000) {
largeScreenData.value = res.data
largeScreenData.value = res.data;
}
})
}
});
};
const manageSelect = (index) => {
console.log('首页点击-', index)
console.log("首页点击-", index);
if (index === 0) {
router.push('/site')
router.push("/site");
}
};
const closeLeft = () => {
drawerLeft.value = !drawerLeft.value
}
drawerLeft.value = !drawerLeft.value;
};
const closeRight = () => {
drawerRight.value = !drawerRight.value
}
drawerRight.value = !drawerRight.value;
};
const handleLogout = () => {
authStore.userLogout()
router.push('/login')
}
authStore.userLogout();
router.push("/login");
};
const previousBtn = () => {
tunnelBtn.value.prev()
}
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)
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连接发生错误");
@@ -167,37 +198,45 @@ const initWebSocket = () => {
//连接成功建立的回调方法
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') {
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
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)
}
socket.send(JSON.stringify(send));
}, 30000);
};
const closeSocket = () => {
socket.close();
}
initWebSocket()
};
initWebSocket();
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
#main {
height: 100%;
width: 100%;
#tunnel-box {
height: 100%;
}
}
</style>