chengdandan
/
InternetCompetition
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

驾驶舱

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

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

15
src/router/index.js
View File

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

132
src/views/Cockpit.vue
View File

@ -1,11 +1,5 @@
<template> <template>
<div class="container"> <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"> <div class="title">
<img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" /> <img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
<span class="date">{{ data }}</span> <span class="date">{{ data }}</span>
@ -44,35 +38,38 @@
</p> </p>
<div id="productChart"></div> <div id="productChart"></div>
</div> </div>
<div class="mainshaftChart">
<p>
<span>主轴转换监控</span>
</p>
<div id="mainshaftChart"></div>
</div>
<div class="loadChart"> <div class="loadChart">
<p> <p>
<span>负载电流监控</span> <span>负载电流监控</span>
</p> </p>
<div id="loadChart"></div> <div id="loadChart"></div>
</div> </div>
<div class="ratedChart"> <div class="chartsDiv">
<p> <div class="mainshaftChart">
<span>额定电流监控</span> <p>
</p> <span>主轴转换监控</span>
<div id="ratedChart"></div> </p>
</div> <div id="mainshaftChart"></div>
<div class="two"> </div>
<p> <div class="two">
<span>急停状态监控</span> <p>
</p> <span>急停状态监控</span>
<div id="two"></div> </p>
</div> <div id="two"></div>
<div class="one"> </div>
<p> <div class="one">
<span>切削速度监控</span> <p>
</p> <span>切削速度监控</span>
<div id="one"></div> </p>
<div id="one"></div>
</div>
<div class="ratedChart">
<p>
<span>额定电流监控</span>
</p>
<div id="ratedChart"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -170,41 +167,11 @@ export default {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #fff; 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-size: cover; /* 图像大小适应容器 */
background-repeat: no-repeat; /* 防止图像平铺 */ background-repeat: no-repeat; /* 防止图像平铺 */
background-position: center; /* 图像在容器中居中 */ 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 { .title {
height: 11%; height: 11%;
display: flex; display: flex;
@ -279,30 +246,35 @@ export default {
margin-left: 45px; margin-left: 45px;
position: relative; position: relative;
} }
.mainshaftChart { // .mainshaftChart {
margin-left: 45px; // margin-left: 45px;
margin-top: 45px; // margin-top: 45px;
position: relative; // position: relative;
} // }
.loadChart { .loadChart {
position: absolute; position: absolute;
right: 45px; right: 45px;
top: 180px; top: 180px;
} }
.ratedChart { // .ratedChart {
position: absolute; // position: absolute;
right: 45px; // right: 45px;
top: 533px; // top: 533px;
} // }
.one { // .one {
position: absolute; // position: absolute;
right: 560px; // right: 560px;
top: 533px; // top: 533px;
} // }
.two { // .two {
position: absolute; // position: absolute;
left: 560px; // left: 560px;
top: 533px; // top: 533px;
// }
.chartsDiv {
display: flex;
justify-content: space-between;
margin: 45px;
} }
.one, .one,
.two, .two,