327 lines
8.2 KiB
Vue
327 lines
8.2 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="title">
|
|
<img src="../assets/image/工业互联网驾驶舱文字_03.png" alt="" />
|
|
<span class="date">{{ data }}</span>
|
|
<span class="time">{{ time }}</span>
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="topBox">
|
|
<div>
|
|
<span>25</span>
|
|
<p>产量</p>
|
|
</div>
|
|
<div>
|
|
<span>2130</span>
|
|
<p>主轴转速</p>
|
|
</div>
|
|
<div>
|
|
<span>1</span>
|
|
<p>急停状态</p>
|
|
</div>
|
|
<div>
|
|
<span>1090</span>
|
|
<p>切削速度</p>
|
|
</div>
|
|
<div>
|
|
<span>21</span>
|
|
<p>负载电流</p>
|
|
</div>
|
|
<div>
|
|
<span>19</span>
|
|
<p>额定电流</p>
|
|
</div>
|
|
</div>
|
|
<div class="productChart">
|
|
<p>
|
|
<span>产量数据监控</span>
|
|
</p>
|
|
<div id="productChart"></div>
|
|
</div>
|
|
|
|
<div class="loadChart">
|
|
<p>
|
|
<span>负载电流监控</span>
|
|
</p>
|
|
<div id="loadChart"></div>
|
|
</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>
|
|
</template>
|
|
<script>
|
|
import * as echarts from "echarts";
|
|
import "../util/rem";
|
|
import {
|
|
productChart,
|
|
mainshaftChart,
|
|
loadChartChart,
|
|
ratedChart,
|
|
CuttingSpeedChart,
|
|
stopChart,
|
|
} from "../util/chartConfig";
|
|
export default {
|
|
data() {
|
|
return {
|
|
productChartOption: {},
|
|
mainshaftChartOption: {},
|
|
loadChartChartOption: {},
|
|
ratedChartOption: {},
|
|
CuttingSpeedChartOption: {},
|
|
stopChartOption: {},
|
|
data: "",
|
|
time: "",
|
|
timer: null,
|
|
};
|
|
},
|
|
created() {
|
|
this.time = this.$moment().format("HH:mm:ss");
|
|
this.productChartOption = productChart;
|
|
this.mainshaftChartOption = mainshaftChart;
|
|
this.loadChartChartOption = loadChartChart;
|
|
this.ratedChartOption = ratedChart;
|
|
this.CuttingSpeedChartOption = CuttingSpeedChart;
|
|
this.stopChartOption = stopChart;
|
|
},
|
|
methods: {
|
|
//根据屏幕自适应图表字体
|
|
fontSize(res) {
|
|
const clientWidth =
|
|
window.innerWidth ||
|
|
document.documentElement.clientWidth ||
|
|
document.body.clientWidth;
|
|
if (!clientWidth) return;
|
|
let fontSize = clientWidth / 1920;
|
|
return res * fontSize;
|
|
},
|
|
//加载图表的方法
|
|
getLoadEcharts(dom, option) {
|
|
var myChart = echarts.init(document.getElementById(dom), null, {
|
|
devicePixelRatio: 10, // 设置为2或更高的值
|
|
});
|
|
option.xAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
|
|
option.yAxis.axisLabel.textStyle.fontSize = this.fontSize(10);
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
},
|
|
},
|
|
mounted() {
|
|
this.getLoadEcharts("productChart", this.productChartOption);
|
|
this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
|
|
this.getLoadEcharts("loadChart", this.loadChartChartOption);
|
|
this.getLoadEcharts("ratedChart", this.ratedChartOption);
|
|
this.getLoadEcharts("one", this.CuttingSpeedChartOption);
|
|
this.getLoadEcharts("two", this.stopChartOption);
|
|
//实时更新日期数据
|
|
this.timer = setInterval(() => {
|
|
this.time = this.$moment().format("HH:mm:ss");
|
|
this.data = this.$moment().format("YYYY.MM.DD");
|
|
}, 100);
|
|
},
|
|
beforeDestory() {
|
|
// 清除定时器以防止内存泄漏
|
|
clearInterval(this.timer);
|
|
},
|
|
beforeDestoryed() {
|
|
// 组件销毁前移除监听,防止内存泄露
|
|
window.removeEventListener("resize");
|
|
},
|
|
};
|
|
</script>
|
|
<style scope lang="less">
|
|
@font-face {
|
|
font-family: myFont;
|
|
src: url("../assets/fonts/YouSheBiaoTiHei-2.ttf");
|
|
}
|
|
|
|
.container {
|
|
font-family: "SourceHanSansSC-regular";
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
// background-image: url("../assets/image/图片 2 Copy@1x.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
|
|
.title {
|
|
height: 11%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 48px;
|
|
color: #fff;
|
|
font-family: "SourceHanSansSC-regular";
|
|
background-image: url("../assets/image/head.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
img {
|
|
width: 20vw;
|
|
margin-top: -15px;
|
|
}
|
|
.date {
|
|
position: absolute;
|
|
font-size: 15px;
|
|
font-family: "myFont";
|
|
left: 10px;
|
|
top: 10px;
|
|
color: #5e7dd5;
|
|
}
|
|
.time {
|
|
position: absolute;
|
|
font-size: 24px;
|
|
font-family: "myFont";
|
|
left: 10px;
|
|
top: 20px;
|
|
}
|
|
}
|
|
.bottom {
|
|
height: calc(100vh - 11%);
|
|
padding-top: 19px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
.topBox {
|
|
width: 75%;
|
|
height: 114px;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
span {
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 48px;
|
|
font-family: "myFont";
|
|
background-image: url("../assets/image/正方形_03.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
display: block;
|
|
width: 106px;
|
|
height: 59px;
|
|
text-align: center;
|
|
}
|
|
p {
|
|
color: rgba(239, 239, 239, 1);
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
}
|
|
.productChart {
|
|
margin-top: 45px;
|
|
margin-left: 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;
|
|
// }
|
|
.chartsDiv {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 45px;
|
|
}
|
|
.one,
|
|
.two,
|
|
.ratedChart,
|
|
.loadChart,
|
|
.mainshaftChart,
|
|
.productChart {
|
|
background-image: url("../assets/image/背景_03.png");
|
|
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
width: 414px;
|
|
height: 308px;
|
|
overflow: hidden;
|
|
p {
|
|
height: 43px;
|
|
width: 100%;
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
position: relative;
|
|
|
|
span {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
position: absolute;
|
|
left: 150px;
|
|
top: 3px;
|
|
font-family: "myFont";
|
|
}
|
|
}
|
|
div {
|
|
height: 265px;
|
|
#productChart {
|
|
transform: scale(0.85);
|
|
transform-origin: 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#loadChart div:nth-child(2) {
|
|
width: 100px;
|
|
height: 20px;
|
|
background-color: #fff !important;
|
|
}
|
|
}
|
|
</style>
|