邓洁 : 隧道接口部分对接
This commit is contained in:
dengj
@@ -1,264 +1,115 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<div class="box-top">
|
||||
<manage-btn v-model="selectIndex" @select="manageSelect" :list="routeList" />
|
||||
<div class="tunnel-title"></div>
|
||||
<manage-length class="tunnel-length"></manage-length>
|
||||
<div class="top-right">
|
||||
<div class="current-site">
|
||||
当前站点：<span>{{ currentSite }}</span>
|
||||
<el-dropdown trigger="click" @command="handleCommand">
|
||||
<div class="toggle"></div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="item in siteList" :key="item.value" :command="item">{{ item.label
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
<div class="current-user">
|
||||
上午好：<span>{{ currentUser }}</span>
|
||||
<span>今天是：{{ currentDate }}</span>
|
||||
<div class="logout" @click="handleLogout"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="box-top">
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="top-right">
|
||||
<div class="del-btn" @click="handleSave">
|
||||
保存
|
||||
</div>
|
||||
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
|
||||
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-box">
|
||||
<el-form :model="form" :label-position="right" label-width="188px">
|
||||
<el-form-item label="隧道名称">
|
||||
<el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="序列号">
|
||||
<el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="隧道长度">
|
||||
<el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="隧道备注">
|
||||
<el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 这里就导入正常的编辑模式，就是我们之前写的部分 -->
|
||||
<tunnel-scene id="tunnel-box" :isedit="true" :tunnelId="tunnelId"/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import TunnelScene from "@/components/content/tunnelScene/TunnelScene.vue";
|
||||
import ManageBtn from "@/components/manageBtn/index.vue";
|
||||
import ManageLength from "@/components/manageLength/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 { ElMessageBox } from "element-plus";
|
||||
import { getUserInfo } from "@/api/login";
|
||||
|
||||
const authStore = useAuthStore();
|
||||
import {getTunnelDetail} from "../../api/tunnelManage";
|
||||
const router = useRouter();
|
||||
const selectIndex = ref(-1);
|
||||
const showFan = ref(false);
|
||||
const drawerLeft = ref(true);
|
||||
const drawerRight = ref(true);
|
||||
const currentSite = ref("");
|
||||
const siteList = ref([])
|
||||
const currentUser = ref("");
|
||||
const currentDate = ref(dateFormat());
|
||||
const tunnelBtn = ref();
|
||||
const tunnelList = ref([]);
|
||||
const tunnelId = ref(0);
|
||||
const routeList = ref([]);
|
||||
let socket = reactive("");
|
||||
const serialNumber = ref("SC00DY00GH00ELBT");
|
||||
let token = getToken();
|
||||
let send = {
|
||||
type: "ping",
|
||||
};
|
||||
const largeScreenData = ref(null);
|
||||
const socketData = reactive({
|
||||
leftData: [],
|
||||
windPressure: [],
|
||||
sensor: [],
|
||||
const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
|
||||
|
||||
const form = ref({
|
||||
tunnelName: '',
|
||||
serialNumber: '',
|
||||
totalLength: '',
|
||||
remarks: ''
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
showFan.value = true;
|
||||
});
|
||||
getUser()
|
||||
getOtherInfo()
|
||||
|
||||
});
|
||||
|
||||
const getUser = () => {
|
||||
getUserInfo().then(res => {
|
||||
currentUser.value = res.data.user.userName
|
||||
})
|
||||
}
|
||||
const getOtherInfo = () => {
|
||||
getLargeScreenInfo().then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
routeList.value = res.data.routeList
|
||||
currentSite.value = res.data.siteOption[0].label
|
||||
siteList.value = res.data.siteOption
|
||||
tunnelId.value = res.data.tunnelOption[0].value
|
||||
getTunnel(res.data.siteOption[0].value)
|
||||
getScreenInfo(tunnelId.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
const getScreenInfo = async (id) => {
|
||||
await getLargeScreen(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
largeScreenData.value = res.data;
|
||||
}
|
||||
});
|
||||
};
|
||||
//根据站点id获取隧道信息
|
||||
const getTunnel = (id) => {
|
||||
getTunnelBySiteId(id).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
tunnelList.value = res.data
|
||||
getScreenInfo(res.data[0].value)
|
||||
}
|
||||
});
|
||||
}
|
||||
const changeTunnel = (e) => {
|
||||
tunnelId.value = 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 === 0) {
|
||||
router.push("/site");
|
||||
} else if (index === 1) {
|
||||
router.push("/tunnel/1");
|
||||
} else if (index === 2) {
|
||||
router.push("/user");
|
||||
const getTunnel = () => {
|
||||
getTunnelDetail(tunnelId).then((res) => {
|
||||
if (res?.code === 1000) {
|
||||
console.log('res',res)
|
||||
form.value=res.data
|
||||
}
|
||||
};
|
||||
const handleCommand = (item) => {
|
||||
console.log('commads', item)
|
||||
currentSite.value = item.label
|
||||
getTunnel(item.value)
|
||||
});
|
||||
}
|
||||
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();
|
||||
getTunnel()
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-dropdown__popper.el-popper {
|
||||
background: transparent;
|
||||
//border: none;
|
||||
border: 1px solid #0E7DAA;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.is-light {
|
||||
background: rgba(7, 35, 72, 0.9);
|
||||
}
|
||||
|
||||
.el-popper {
|
||||
padding: 20px;
|
||||
margin-left: 50px;
|
||||
width: 150px;
|
||||
background: rgba(7, 35, 72, 0.9);
|
||||
|
||||
.el-scrollbar__wrap {
|
||||
.el-dropdown__list {
|
||||
.el-dropdown-menu {
|
||||
background-color: rgba(7, 35, 72, 0.9);
|
||||
border-radius: 10px;
|
||||
padding: 5px;
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
color: #FFFFFF;
|
||||
//border:none;
|
||||
padding: 5px;
|
||||
|
||||
border-bottom: 1px solid #05FEFF;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item.hover,
|
||||
.el-dropdown-menu__item:hover {
|
||||
background-color: transparent !important;
|
||||
color: #F7B500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
#main {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #072348;
|
||||
.del-btn {
|
||||
position: absolute;
|
||||
top: 85px;
|
||||
right: 80px;
|
||||
cursor: pointer;
|
||||
font-size: 42px;
|
||||
width: 180px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
padding-left: 50px;
|
||||
}
|
||||
#tunnel-box {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #072348;
|
||||
|
||||
#tunnel-box {
|
||||
height: 100%;
|
||||
}
|
||||
.edit-box{
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 70px;
|
||||
width: 830px;
|
||||
height: 500px;
|
||||
background-image: url(@/assets/images/transducer/bg.png);
|
||||
padding: 0 30px;
|
||||
box-sizing: border-box;
|
||||
:deep(.el-form-item) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 38px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 12px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 75px;
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: transparent;
|
||||
border: 1px solid #08B7B8;
|
||||
|
||||
.el-input__inner {
|
||||
height: auto;
|
||||
color: #fff;
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user