447 lines
12 KiB
Vue
447 lines
12 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 style="color: red; display: flex">
|
|
<div>{{ clgrade }} {{ resultObj.YXDBWG }}</div>
|
|
|
|
|
<div>{{ zzgrade }} {{ resultObj.YXCHWG }}</div>
|
|
|
|
|
<div>{{ jtgrade }} {{ resultObj.WXDBWG }}</div>
|
|
|
|
|
<div>{{ qxgrade }} {{ resultObj.WXCHWG }}</div>
|
|
|
|
|
<div>{{ clgrade }} {{ resultObj.YXDBWG }}</div>
|
|
|
|
|
<div>{{ yxgrade }} {{ resultObj.SerialServerYX }}</div>
|
|
|
|
|
<div>{{ wxgrade }} {{ resultObj.SerialServerWX }}</div>
|
|
</div> -->
|
|
</div>
|
|
<div class="bottom">
|
|
<div class="topBox">
|
|
<div v-if="gradeObj.lan_box1 && resultObj.YXDBWG">
|
|
<span>25</span>
|
|
<p>产量</p>
|
|
</div>
|
|
<div v-if="gradeObj.lan_box2 && resultObj.YXCHWG">
|
|
<span>2130</span>
|
|
<p>主轴转速</p>
|
|
</div>
|
|
<div v-if="gradeObj.wlan_box1 && resultObj.WXDBWG">
|
|
<span>1</span>
|
|
<p>急停状态</p>
|
|
</div>
|
|
<div v-if="gradeObj.wlan_box2 && resultObj.WXCHWG">
|
|
<span>1090</span>
|
|
<p>切削速度</p>
|
|
</div>
|
|
<div v-if="gradeObj.ck_yx && resultObj.SerialServerYX">
|
|
<span>21</span>
|
|
<p>负载电流</p>
|
|
</div>
|
|
<div v-if="gradeObj.ck_wx && resultObj.SerialServerWX">
|
|
<span>19</span>
|
|
<p>额定电流</p>
|
|
</div>
|
|
</div>
|
|
<div class="productChart">
|
|
<p>
|
|
<span>产量数据监控</span>
|
|
</p>
|
|
<div
|
|
id="productChart"
|
|
style="width: 410px; height: 256px"
|
|
v-show="gradeObj.lan_box1 && resultObj.YXDBWG"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="loadChart">
|
|
<p>
|
|
<span>负载电流监控</span>
|
|
</p>
|
|
<div
|
|
id="loadChart"
|
|
v-show="gradeObj.ck_yx && resultObj.SerialServerYX"
|
|
></div>
|
|
</div>
|
|
<div class="chartsDiv">
|
|
<div class="mainshaftChart">
|
|
<p>
|
|
<span>主轴转速监控</span>
|
|
</p>
|
|
<div
|
|
id="mainshaftChart"
|
|
v-show="gradeObj.lan_box2 && resultObj.YXCHWG"
|
|
></div>
|
|
</div>
|
|
<div class="two">
|
|
<p>
|
|
<span>急停状态监控</span>
|
|
</p>
|
|
<div id="two" v-show="gradeObj.wlan_box1 && resultObj.WXDBWG"></div>
|
|
</div>
|
|
<div class="one">
|
|
<p>
|
|
<span>切削速度监控</span>
|
|
</p>
|
|
<div id="one" v-show="gradeObj.wlan_box2 && resultObj.WXCHWG"></div>
|
|
</div>
|
|
<div class="ratedChart">
|
|
<p>
|
|
<span>额定电流监控</span>
|
|
</p>
|
|
<div
|
|
id="ratedChart"
|
|
v-show="gradeObj.ck_wx && resultObj.SerialServerWX"
|
|
></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";
|
|
import { getGrade } from "../api/user";
|
|
export default {
|
|
data() {
|
|
return {
|
|
productChartOption: {},
|
|
mainshaftChartOption: {},
|
|
loadChartChartOption: {},
|
|
ratedChartOption: {},
|
|
CuttingSpeedChartOption: {},
|
|
stopChartOption: {},
|
|
data: "",
|
|
time: "",
|
|
timer: null,
|
|
user_id: "",
|
|
resultObj: {},
|
|
clgrade: "",
|
|
jtgrade: "",
|
|
zzgrade: "",
|
|
qxgrade: "",
|
|
yxgrade: "",
|
|
wxgrade: "",
|
|
gradeObj: {},
|
|
};
|
|
},
|
|
created() {
|
|
// DB网关有线-产量
|
|
// DB网关无线-急停状态
|
|
// 斥候网关有线-主轴转速
|
|
// 斥候网关无线-切削速度
|
|
// 上面四个要求设备连线、设备配置信息、设备上云配置信息都对才展示数据
|
|
// 有线串口 - 负载电流;
|
|
// 无线串口 - 额定电流;
|
|
// 这两个只要设备连线和设备配置信息对就展示数据;
|
|
|
|
|
|
},
|
|
// http://localhost:8080/#/cockpit?USER202311150117464304%7CYXDBWG,True%3BYXCHWG,True%3BWXDBWG,True%3BWXCHWG,True%3BSerialServerYX,True%3BSerialServerWX,True%3B
|
|
methods: {
|
|
//获取三维数据
|
|
toObj(data) {
|
|
const str = data;
|
|
// 将字符串按分号分割成数组
|
|
var pairs = str.split(";");
|
|
// 创建一个对象来存储键值对
|
|
var resultObject = {};
|
|
// 遍历数组中的每一项
|
|
for (var i = 0; i < pairs.length; i++) {
|
|
// 将每一项按逗号分割成键值对
|
|
var keyValue = pairs[i].split(",");
|
|
// 如果该项包含有效的键值对，将其添加到结果对象中
|
|
if (keyValue.length === 2) {
|
|
var key = keyValue[0];
|
|
var value = keyValue[1];
|
|
console.log(value, "value");
|
|
// 将字符串"True"或"False"转换为相应的布尔值
|
|
value = value == "True" ? true : false;
|
|
resultObject[key] = value;
|
|
}
|
|
}
|
|
this.resultObj = resultObject;
|
|
|
|
this.getGrade();
|
|
//alert(JSON.stringify(this.resultObj), "三维");
|
|
},
|
|
//根据屏幕自适应图表字体
|
|
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();
|
|
});
|
|
},
|
|
|
|
//获取全部分数
|
|
async getGrade() {
|
|
let { data } = await getGrade({
|
|
user_id: this.user_id,
|
|
});
|
|
this.gradeObj = data.data;
|
|
// alert(JSON.stringify(data), "接口");
|
|
// alert(this.user_id);
|
|
if (data.data) {
|
|
this.getLoadEcharts("loadChart", this.loadChartChartOption);
|
|
this.getLoadEcharts("ratedChart", this.ratedChartOption);
|
|
this.getLoadEcharts("productChart", this.productChartOption);
|
|
this.getLoadEcharts("mainshaftChart", this.mainshaftChartOption);
|
|
this.getLoadEcharts("two", this.stopChartOption);
|
|
this.getLoadEcharts("one", this.CuttingSpeedChartOption);
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
//实时更新日期数据
|
|
this.timer = setInterval(() => {
|
|
this.time = this.$moment().format("HH:mm:ss");
|
|
this.data = this.$moment().format("YYYY.MM.DD");
|
|
}, 100);
|
|
|
|
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;
|
|
this.user_id = decodeURIComponent(window.location.href)
|
|
.split("?")[1]
|
|
.split("|")[0];
|
|
// this.user_id = "USER202311150117464304";
|
|
if (
|
|
decodeURIComponent(window.location.href).split("?")[1].split("|")[1] !=
|
|
undefined
|
|
) {
|
|
this.toObj(
|
|
decodeURIComponent(window.location.href).split("?")[1].split("|")[1]
|
|
);
|
|
}
|
|
console.log(productChart,'xxxxxx');
|
|
},
|
|
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");
|
|
}
|
|
|
|
#one,
|
|
#two,
|
|
#mainshaftChart,
|
|
#loadChart,
|
|
#productChart,
|
|
#ratedChart {
|
|
width: 410px;
|
|
height: 256px;
|
|
}
|
|
|
|
.container {
|
|
font-family: "SourceHanSansSC-regular";
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
background-size: cover;
|
|
/* 图像大小适应容器 */
|
|
background-repeat: no-repeat;
|
|
/* 防止图像平铺 */
|
|
background-color: transparent;
|
|
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;
|
|
}
|
|
|
|
.loadChart {
|
|
position: absolute;
|
|
right: 45px;
|
|
top: 180px;
|
|
}
|
|
|
|
.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>
|