驾驶舱

This commit is contained in:
lll 2023-11-02 14:17:13 +08:00
parent 03c6446208
commit a7b110d6e8
3 changed files with 60 additions and 88 deletions

View File

@ -10,6 +10,7 @@ export default {
data() {
return {};
},
created() {},
methods: {},
components: {},
};

View File

@ -12,7 +12,6 @@ const routes = [
name: "datacollect",
component: () => import("../views/DataCollect.vue"),
},
// 刘龙龙新加的全部路由
//db网关-ip配置-无线网关
{
@ -30,7 +29,7 @@ const routes = [
{
path: "/dbcollectiongate",
name: "dbcollectiongate",
component: () => import("../views/DbCollectiongate.vue")
component: () => import("../views/DbCollectiongate.vue"),
},
// db网关-数据采集配置-网口配置
{
@ -50,12 +49,12 @@ const routes = [
name: "dbcollectdevice",
component: () => import("../views/DbCollectdevice.vue"),
},
// db网关-数据采集配置-采集点配置
{
path: "/dbcollect",
name: "dbcollect",
component: () => import("../views/DbCollection.vue"),
},
// db网关-数据采集配置-采集点配置
{
path: "/dbcollect",
name: "dbcollect",
component: () => import("../views/DbCollection.vue"),
},
//db网关-MQTT上云-MQTT1配置
{
path: "/mqttconfig",

View File

@ -1,11 +1,5 @@
<template>
<div class="container">
<div class="btns">
<div class="btnOne">提交</div>
<div class="btnTwo">网关配置</div>
<div class="btnThree">网关维护</div>
<div class="btnFour">网关监控</div>
</div>
<div class="title">
<img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
<span class="date">{{ data }}</span>
@ -44,35 +38,38 @@
</p>
<div id="productChart"></div>
</div>
<div class="mainshaftChart">
<p>
<span>主轴转换监控</span>
</p>
<div id="mainshaftChart"></div>
</div>
<div class="loadChart">
<p>
<span>负载电流监控</span>
</p>
<div id="loadChart"></div>
</div>
<div class="ratedChart">
<p>
<span>额定电流监控</span>
</p>
<div id="ratedChart"></div>
</div>
<div class="two">
<p>
<span>急停状态监控</span>
</p>
<div id="two"></div>
</div>
<div class="one">
<p>
<span>切削速度监控</span>
</p>
<div id="one"></div>
<div class="chartsDiv">
<div class="mainshaftChart">
<p>
<span>主轴转换监控</span>
</p>
<div id="mainshaftChart"></div>
</div>
<div class="two">
<p>
<span>急停状态监控</span>
</p>
<div id="two"></div>
</div>
<div class="one">
<p>
<span>切削速度监控</span>
</p>
<div id="one"></div>
</div>
<div class="ratedChart">
<p>
<span>额定电流监控</span>
</p>
<div id="ratedChart"></div>
</div>
</div>
</div>
</div>
@ -170,41 +167,11 @@ export default {
width: 100vw;
height: 100vh;
background-color: #fff;
background-image: url("../assets/image/图片 2 Copy@1x.png");
// background-image: url("../assets/image/ 2 Copy@1x.png");
background-size: cover; /* 图像大小适应容器 */
background-repeat: no-repeat; /* 防止图像平铺 */
background-position: center; /* 图像在容器中居中 */
.btns {
div {
width: 146px;
height: 39px;
position: absolute;
background-image: url("../assets/image/未选中-文字背景_06.png");
background-size: cover; /* 图像大小适应容器 */
background-repeat: no-repeat; /* 防止图像平铺 */
background-position: center; /* 图像在容器中居中 */
color: #fff;
font-size: 20px;
text-align: center;
line-height: 39px;
right: 10px;
font-family: "Microsoft Yahei";
}
.btnOne {
top: 80px;
}
.btnTwo {
top: 129px;
}
.btnThree {
top: 178px;
}
.btnFour {
top: 227px;
color: #6b92fd;
background-image: url("../assets/image/选中-文字背景_07.png");
}
}
.title {
height: 11%;
display: flex;
@ -279,30 +246,35 @@ export default {
margin-left: 45px;
position: relative;
}
.mainshaftChart {
margin-left: 45px;
margin-top: 45px;
position: relative;
}
// .mainshaftChart {
// margin-left: 45px;
// margin-top: 45px;
// position: relative;
// }
.loadChart {
position: absolute;
right: 45px;
top: 180px;
}
.ratedChart {
position: absolute;
right: 45px;
top: 533px;
}
.one {
position: absolute;
right: 560px;
top: 533px;
}
.two {
position: absolute;
left: 560px;
top: 533px;
// .ratedChart {
// position: absolute;
// right: 45px;
// top: 533px;
// }
// .one {
// position: absolute;
// right: 560px;
// top: 533px;
// }
// .two {
// position: absolute;
// left: 560px;
// top: 533px;
// }
.chartsDiv {
display: flex;
justify-content: space-between;
margin: 45px;
}
.one,
.two,