解决冲突
This commit is contained in:
Hcat1314
@@ -10,16 +10,16 @@
|
||||
<el-button type="primary" @click="handleClear" style="float: right">清除</el-button>
|
||||
<div class="socket-box">
|
||||
<div v-for="item in dataList" ref="child">
|
||||
<div v-if="item.type == 3">
|
||||
<div v-if="item.typeCmd == 3">
|
||||
<span style="color: #007bff">server send:</span>
|
||||
<div>{{ item.cmd }}</div>
|
||||
</div>
|
||||
<div v-if="item.type == 4">
|
||||
<div v-if="item.typeCmd == 4">
|
||||
<span style="color: #28a745"> server receive:</span>
|
||||
|
||||
<div>{{ item.cmd }}</div>
|
||||
</div>
|
||||
<div v-if="item.type == 1">
|
||||
<div v-if="item.typeCmd == 1">
|
||||
<span style="color: red">server send:</span>
|
||||
<div>{{ item.cmd }}</div>
|
||||
</div>
|
||||
@@ -65,16 +65,17 @@ watch(
|
||||
let socket = reactive('')
|
||||
const handleSend = () => {
|
||||
let data = {
|
||||
type: 1,
|
||||
type: "send",
|
||||
typeCmd: 1,
|
||||
cmd: number.value
|
||||
}
|
||||
if(number.value==='')return;
|
||||
if (number.value === '') return;
|
||||
socket.send(JSON.stringify(data))
|
||||
dataList.value.push(data)
|
||||
}
|
||||
const initWebSocket = () => {
|
||||
// let wsUrl = `ws://192.168.31.175:9000/debug/${token}/${serialNumber.value}`
|
||||
let wsUrl = `ws://web-tunnel.feashow.com/api/wstunnel/debug/${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}`
|
||||
console.log(wsUrl)
|
||||
socket = new WebSocket(wsUrl)
|
||||
//连接发生错误的回调方法
|
||||
@@ -94,6 +95,9 @@ const initWebSocket = () => {
|
||||
socket.onclose = function () {
|
||||
console.log("ws连接关闭");
|
||||
}
|
||||
setInterval(() => {
|
||||
socket.send(JSON.stringify(send))
|
||||
}, 30000)
|
||||
}
|
||||
const closeSocket = () => {
|
||||
socket.close();
|
||||
@@ -1,95 +1,112 @@
|
||||
<template>
|
||||
<div class="login-box" id="login-box">
|
||||
<el-form
|
||||
:model="loginForm"
|
||||
ref="formInstance"
|
||||
:rules="rules"
|
||||
label-width="65px"
|
||||
:model="loginForm"
|
||||
ref="formInstance"
|
||||
:rules="rules"
|
||||
label-width="65px"
|
||||
>
|
||||
<h3>FateVerse</h3>
|
||||
<el-form-item prop="username" label="账号">
|
||||
<el-input v-model="loginForm.username" :prefix-icon="User" ></el-input>
|
||||
<el-input v-model="loginForm.username" :prefix-icon="User"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password" label="密码">
|
||||
<el-input v-model="loginForm.password" type="password" :prefix-icon="Lock" ></el-input>
|
||||
<el-input
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
:prefix-icon="Lock"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码" >
|
||||
<el-form-item prop="code" label="验证码">
|
||||
<div class="code">
|
||||
<el-input v-model="loginForm.code" :prefix-icon="key" @keyup.enter.native="handleLogin(formInstance)"></el-input>
|
||||
<img :src="codeImg" alt="" @click="getCode">
|
||||
<el-input
|
||||
v-model="loginForm.code"
|
||||
:prefix-icon="key"
|
||||
@keyup.enter.native="handleLogin(formInstance)"
|
||||
></el-input>
|
||||
<img :src="codeImg" alt="" @click="getCode" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleLogin(formInstance)" type="primary">登录</el-button>
|
||||
<el-button @click="handleLogin(formInstance)" type="primary"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
import { getCodeImg } from '../../api/login';
|
||||
import { useAuthStore } from '@/store/userstore'
|
||||
import { ElLoading } from 'element-plus'
|
||||
import { User,Lock, Key } from '@element-plus/icons-vue'
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
import { useRouter } from "vue-router";
|
||||
import { getCodeImg } from "../../api/login";
|
||||
import { useAuthStore } from "@/store/userstore";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { User, Lock, Key } from "@element-plus/icons-vue";
|
||||
const router = useRouter();
|
||||
const authStore = useAuthStore();
|
||||
const loginForm = reactive({
|
||||
username: 'admin',
|
||||
password: '123456',
|
||||
code: '',
|
||||
uuid: ''
|
||||
})
|
||||
const codeImg = ref('')
|
||||
const formInstance = ref()
|
||||
const rules = reactive({
|
||||
username: [
|
||||
{ required: true, message: '请输入账户名', trigger: 'blur' },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
],
|
||||
code: [
|
||||
{ required: true, message: '请输入验证码', trigger: 'blur' },
|
||||
]
|
||||
})
|
||||
username: "admin",
|
||||
password: "123456",
|
||||
code: "",
|
||||
uuid: "",
|
||||
});
|
||||
const codeImg = ref("");
|
||||
const formInstance = ref();
|
||||
const rules = reactive({
|
||||
username: [{ required: true, message: "请输入账户名", trigger: "blur" }],
|
||||
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
|
||||
code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
|
||||
});
|
||||
|
||||
//获取二维码
|
||||
const getCode = () => {
|
||||
getCodeImg().then(res=>{
|
||||
loginForm.uuid = res.data.uuid
|
||||
codeImg.value = 'data:image/gif;base64,' + res.data.img
|
||||
})
|
||||
}
|
||||
getCodeImg().then((res) => {
|
||||
loginForm.uuid = res.data.uuid;
|
||||
codeImg.value = "data:image/gif;base64," + res.data.img;
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogin = (instance) => {
|
||||
if(!instance) return
|
||||
instance.validate( async (valid, fields)=>{
|
||||
if (!valid) return
|
||||
if (!instance) return;
|
||||
instance.validate(async (valid, fields) => {
|
||||
if (!valid) return;
|
||||
// 发送请求
|
||||
await authStore.userLogin(loginForm).then(res=>{
|
||||
if(res) {
|
||||
ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true})
|
||||
router.push('/')
|
||||
}else {
|
||||
getCode()
|
||||
await authStore.userLogin(loginForm).then((res) => {
|
||||
if (res) {
|
||||
ElLoading.service({
|
||||
text: "正在加载系统资源",
|
||||
background: "#409eff",
|
||||
lock: true,
|
||||
});
|
||||
router.push("/");
|
||||
} else {
|
||||
getCode();
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
getCode()
|
||||
getCode();
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
ElLoading.service({text: '正在加载系统资源',background: '#409eff',lock: true}).close()
|
||||
})
|
||||
ElLoading.service({
|
||||
text: "正在加载系统资源",
|
||||
background: "#409eff",
|
||||
lock: true,
|
||||
}).close();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-box {
|
||||
height: 100%;
|
||||
background-color: #4158D0;
|
||||
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
|
||||
background-color: #4158d0;
|
||||
background-image: linear-gradient(
|
||||
43deg,
|
||||
#4158d0 0%,
|
||||
#c850c0 46%,
|
||||
#ffcc70 100%
|
||||
);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
550
src/views/site/index.vue
Normal file
550
src/views/site/index.vue
Normal file
@@ -0,0 +1,550 @@
|
||||
<template>
|
||||
<div class="site-bgc">
|
||||
<div class="box-top">
|
||||
<div class="back-tunnel" @click="router.push('/')">
|
||||
<div class="back-icon"></div>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
<div class="tunnel-title"></div>
|
||||
<div class="all-del-btn">
|
||||
<div class="all-btn">
|
||||
全选
|
||||
</div>
|
||||
<div class="all-btn del-btn">
|
||||
删除
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<div class="site-box" v-for="item in siteList">
|
||||
<div class="top">
|
||||
<span>站点名称：{{ item.siteName }}</span>
|
||||
<div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
|
||||
</div>
|
||||
<div class="box-center">
|
||||
<div class="left-img"></div>
|
||||
<div class="right-tunnel">
|
||||
<div>隧道数量：{{ item.num }}条</div>
|
||||
<div>
|
||||
<div class="tunnel">
|
||||
<div>{{ item.sortTunnel }}</div>
|
||||
<div class="tunnel-icon"></div>
|
||||
<div>施工长度{{ item.constructionLength }}米</div>
|
||||
<div>实现长度{{ item.implementationLength }}公里</div>
|
||||
</div>
|
||||
<div class="tunnel-add">
|
||||
<div class="add-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="more">
|
||||
更多
|
||||
<div class="icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="edit-btn" @click="isVisited=true">
|
||||
<div class="edit-icon"></div>
|
||||
<div>站点编辑</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="site-box add-box" @click="isVisited=true">
|
||||
<div class="add-icon"></div>
|
||||
<div style="cursor: pointer">添加站点</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="isVisited" width="958px">
|
||||
<div class="siteId">
|
||||
<span>站点id：{{ siteId }}</span>
|
||||
<span>站点管理员id：{{ siteManageId }}</span>
|
||||
</div>
|
||||
<el-form :model="form" :label-position="right" label-width="116px">
|
||||
<el-form-item label="站点地址">
|
||||
<el-input v-model="form.address" placeholder="请输入站点地址"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点名称">
|
||||
<el-input v-model="form.name" placeholder="请输入站点名称"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="站点描述">
|
||||
<el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 3, maxRows: 6 }" placeholder="请输入站点信息"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" placeholder="请输入备注"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="btns">
|
||||
<div class="cancel-btn" @click="isVisited=false">
|
||||
取消
|
||||
</div>
|
||||
<div class="sure-btn">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<div class="pagination">
|
||||
<span>首页</span>
|
||||
<el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
|
||||
<span>尾页</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
const siteList = ref([
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
{
|
||||
siteName: '松江站',
|
||||
num: 1,
|
||||
sortTunnel: '一号隧道',
|
||||
constructionLength: 500,
|
||||
implementationLength: 10
|
||||
},
|
||||
])
|
||||
const siteId = ref('iu78686')
|
||||
const siteManageId = ref('j98h0')
|
||||
const isClick = ref(false);
|
||||
const isVisited = ref(false);
|
||||
const form = ref({
|
||||
address: '',
|
||||
name: '',
|
||||
desc: '',
|
||||
remark: ''
|
||||
});
|
||||
const handleClickSite = () => {
|
||||
isClick.value = !isClick.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.siteId {
|
||||
font-size: 30px;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 48px;
|
||||
|
||||
> span:first-child {
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 80px;
|
||||
|
||||
.cancel-btn {
|
||||
cursor: pointer;
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #08B7B8;
|
||||
line-height: 60px;
|
||||
padding-left: 67px;
|
||||
font-size: 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.sure-btn {
|
||||
cursor: pointer;
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
padding-left: 67px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-size: 26px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
margin-right: 12px;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
:deep(.el-input) {
|
||||
height: 50px;
|
||||
|
||||
.el-input__wrapper {
|
||||
background-color: transparent;
|
||||
border: 1px solid #08B7B8;
|
||||
|
||||
.el-input__inner {
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-textarea__inner) {
|
||||
background-color: transparent;
|
||||
border: 1px solid #08B7B8;
|
||||
//min-height: 50px!important;
|
||||
color: #fff;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
border: 2px solid #05FEFF;
|
||||
background: #0D6578;
|
||||
border-radius: 20px;
|
||||
padding: 30px 40px;
|
||||
box-sizing: border-box;
|
||||
margin: 588px auto 0 auto;
|
||||
|
||||
.el-dialog__header {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.site-bgc {
|
||||
padding: 85px 0 0 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('@/assets/images/site/zdgl_dbj.png');
|
||||
|
||||
.box-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.back-tunnel {
|
||||
cursor: pointer;
|
||||
margin: 0 0 0 70px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
font-size: 28px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.back-icon {
|
||||
margin-right: 20px;
|
||||
margin-left: 33px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
|
||||
.all-del-btn {
|
||||
display: flex;
|
||||
|
||||
.del-btn {
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
background: #08B7B8;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.all-btn {
|
||||
cursor: pointer;
|
||||
padding-left: 56px;
|
||||
width: 168px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 11px;
|
||||
border: 2px solid #08B7B8;
|
||||
color: #FFFFFF;
|
||||
font-size: 28px;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 40px;
|
||||
margin-right: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 100px;
|
||||
padding-right: 100px;
|
||||
justify-content: space-between;
|
||||
|
||||
.add-box {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
font-size: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.add-icon {
|
||||
margin-top: 160px;
|
||||
margin-bottom: 107px;
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||||
}
|
||||
}
|
||||
|
||||
.site-box {
|
||||
margin-top: 122px;
|
||||
//margin-right: 122px;
|
||||
padding: 40px 50px;
|
||||
width: 1158px;
|
||||
height: 718px;
|
||||
background-image: url('@/assets/images/site/zdgl_bj.png');
|
||||
//box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
line-height: 42px;
|
||||
|
||||
> div:last-child {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid #05FEFF;
|
||||
border-radius: 25px;
|
||||
position: relative;
|
||||
|
||||
.clickColor {
|
||||
position: absolute;
|
||||
top: 5.5px;
|
||||
left: 5.5px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #05FEFF;
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-center {
|
||||
display: flex;
|
||||
|
||||
.left-img {
|
||||
margin-top: 50px;
|
||||
margin-right: 60px;
|
||||
width: 480px;
|
||||
height: 350px;
|
||||
background-image: url('@/assets/images/site/zdgl_zd.png');
|
||||
}
|
||||
|
||||
.right-tunnel {
|
||||
position: relative;
|
||||
|
||||
> div:first-child {
|
||||
font-size: 32px;
|
||||
font-family: MicrosoftYaHei;
|
||||
color: #FFFFFF;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
display: flex;
|
||||
margin-top: 29px;
|
||||
|
||||
.tunnel {
|
||||
width: 256px;
|
||||
height: 310px;
|
||||
background: #3FBED1;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
|
||||
> div:first-child {
|
||||
width: 112px;
|
||||
height: 37px;
|
||||
font-size: 28px;
|
||||
line-height: 37px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
> div:nth-child(3) {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
> div:nth-child(3), > div:nth-child(4) {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.tunnel-icon {
|
||||
width: 62px;
|
||||
height: 64px;
|
||||
background: #FFFFFF;
|
||||
margin: 30px 0 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tunnel-add {
|
||||
margin-left: 20px;
|
||||
width: 256px;
|
||||
height: 310px;
|
||||
background: #1891A3;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.add-icon {
|
||||
cursor: pointer;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more {
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-weight: bold;
|
||||
color: #35C5CC;
|
||||
font-size: 28px;
|
||||
|
||||
.icon {
|
||||
margin-left: 19px;
|
||||
transform: rotate(180deg);
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
width: 174px;
|
||||
cursor: pointer;
|
||||
margin-top: 147px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 32px;
|
||||
color: #60DDDE;
|
||||
line-height: 42px;
|
||||
margin-left: 492px;
|
||||
|
||||
.edit-icon {
|
||||
width: 30px;
|
||||
height: 32px;
|
||||
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 120px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #60DDDE;
|
||||
font-size: 32px;
|
||||
|
||||
> span:first-child {
|
||||
margin-right: 60px;
|
||||
}
|
||||
|
||||
> span:last-child {
|
||||
margin-left: 71px;
|
||||
}
|
||||
|
||||
:deep(.btn-prev) {
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
:deep(.btn-next) {
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
:deep(.el-pager li.is-active ) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #60DDDE;
|
||||
border-radius: 50%;
|
||||
color: #071F40;
|
||||
font-size: 32px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
:deep(.el-pager li) {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
:deep(.el-pager li:not(.is-active) ) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid #60DDDE;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
font-size: 32px;
|
||||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||||
font-weight: bold;
|
||||
color: #60DDDE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -20,9 +20,9 @@
|
||||
<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 />
|
||||
<transducer-list />
|
||||
<used-ele />
|
||||
<fan-info v-if="showFan" :list="socketData.frequencyState" />
|
||||
<transducer-list :list="socketData.currentVoltage" :feedback="socketData.frequencyFeedback" />
|
||||
<used-ele :list="socketData.electricityConsumption" />
|
||||
</el-drawer>
|
||||
<div v-if="drawerLeft" class="left-arrow" @click="closeLeft"></div>
|
||||
<div v-else class="shrink-left" @click="closeLeft"></div>
|
||||
@@ -30,9 +30,9 @@
|
||||
<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 />
|
||||
<air-info />
|
||||
<bad-gas-info />
|
||||
<wind-pressure-list v-if="showFan" :list="socketData.windPressure" />
|
||||
<air-info v-if="showFan" :list="socketData.sensor" />
|
||||
<bad-gas-info v-if="showFan" :list="socketData.sensor" />
|
||||
</el-drawer>
|
||||
<div v-if="drawerRight" class="right-arrow" @click="closeRight"></div>
|
||||
<div v-else class="shrink-right" @click="closeRight"></div>
|
||||
@@ -63,8 +63,9 @@ 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 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'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
@@ -100,7 +101,32 @@ const tunnelList = ref([
|
||||
name: '七号隧道'
|
||||
},
|
||||
])
|
||||
const manageSelect = () => {
|
||||
let socket = reactive('')
|
||||
const serialNumber = ref('SC00DY00GH00ELBT')
|
||||
let token = getToken();
|
||||
let send = {
|
||||
type: "ping"
|
||||
}
|
||||
const socketData = reactive({
|
||||
currentVoltage: [],
|
||||
frequencyState: [],
|
||||
frequencyFeedback: [],
|
||||
electricityConsumption: [],
|
||||
windPressure: [],
|
||||
sensor: [],
|
||||
})
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
showFan.value = true
|
||||
})
|
||||
})
|
||||
const manageSelect = (index) => {
|
||||
console.log('首页点击-', index)
|
||||
if (index === 0) {
|
||||
console.log('站点管理=====-----')
|
||||
router.push('/site')
|
||||
}
|
||||
|
||||
// getInfo();
|
||||
};
|
||||
const closeLeft = () => {
|
||||
@@ -118,9 +144,63 @@ const previousBtn = () => {
|
||||
}
|
||||
const nextBtn = () => {
|
||||
tunnelBtn.value.next();
|
||||
// tunnelList.value.push(tunnelList.value.shift())
|
||||
// console.log('tunnelList.value', tunnelList.value)
|
||||
}
|
||||
|
||||
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 === 'currentVoltage') {
|
||||
console.log('电流电压')
|
||||
socketData.currentVoltage = data
|
||||
} else if (item.typeKey === 'frequencyFeedback') {
|
||||
console.log('变频器频率')
|
||||
socketData.frequencyFeedback = data
|
||||
} else if (item.typeKey === 'frequencyState') {
|
||||
console.log('风机状态')
|
||||
socketData.frequencyState = data
|
||||
} else if (item.typeKey === 'electricityConsumption') {
|
||||
console.log('用电量')
|
||||
socketData.electricityConsumption = data
|
||||
} else if (item.typeKey === 'windPressure') {
|
||||
console.log('风压风压')
|
||||
socketData.windPressure = data
|
||||
} else if (item.typeKey === 'sensor') {
|
||||
console.log('传感器==========?')
|
||||
socketData.sensor = data
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
//连接关闭的回调方法
|
||||
socket.onclose = function () {
|
||||
console.log("ws连接关闭");
|
||||
// initWebSocket()
|
||||
}
|
||||
setInterval(() => {
|
||||
socket.send(JSON.stringify(send))
|
||||
}, 30000)
|
||||
}
|
||||
const closeSocket = () => {
|
||||
socket.close();
|
||||
}
|
||||
initWebSocket()
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user