驾驶舱
This commit is contained in:
lll
parent
03c6446208
commit
a7b110d6e8
|
|
@ -10,6 +10,7 @@ export default {
|
|||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
components: {},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue