|
@@ -1,27 +1,23 @@
|
|
<template>
|
|
<template>
|
|
<!-- 支架压力柱状图 -->
|
|
<!-- 支架压力柱状图 -->
|
|
- <div
|
|
|
|
- ref="bar"
|
|
|
|
- style="height: 240px; width: 800px; margin-top: 30px;margin-left:40px"
|
|
|
|
- ></div>
|
|
|
|
|
|
+ <div ref="bar" style="height: 240px; width: 800px; margin-top: 30px; margin-left: 40px"></div>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
/**
|
|
/**
|
|
- * @module mining/Monitor/Bars
|
|
|
|
- * @desc 支架压力监控
|
|
|
|
- * @vue-data {Object} myChart - 小车运行速度
|
|
|
|
- * @vue-data {Array} zhijiaId - 支架编号
|
|
|
|
- * @vue-computed {Array} barData - 支架压力数值
|
|
|
|
- */
|
|
|
|
-
|
|
|
|
|
|
+ * @module mining/Monitor/Bars
|
|
|
|
+ * @desc 支架压力监控
|
|
|
|
+ * @vue-data {Object} myChart - 小车运行速度
|
|
|
|
+ * @vue-data {Array} zhijiaId - 支架编号
|
|
|
|
+ * @vue-computed {Array} barData - 支架压力数值
|
|
|
|
+ */
|
|
export default {
|
|
export default {
|
|
name: "Bars",
|
|
name: "Bars",
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
myChart: null,
|
|
myChart: null,
|
|
zhijiaId: [],
|
|
zhijiaId: [],
|
|
- barData: [],
|
|
|
|
|
|
+ barData: []
|
|
};
|
|
};
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
@@ -32,23 +28,23 @@ export default {
|
|
padding: [0, 44],
|
|
padding: [0, 44],
|
|
textStyle: {
|
|
textStyle: {
|
|
fontWeight: "normal", //标题颜色
|
|
fontWeight: "normal", //标题颜色
|
|
- color: "#4ADEFE",
|
|
|
|
- },
|
|
|
|
|
|
+ color: "#4ADEFE"
|
|
|
|
+ }
|
|
},
|
|
},
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
axisPointer: {
|
|
- type: "shadow",
|
|
|
|
|
|
+ type: "shadow"
|
|
},
|
|
},
|
|
formatter: (params) => {
|
|
formatter: (params) => {
|
|
- if (params[0].data > 39) {
|
|
|
|
|
|
+ if (params[0].data > 38) {
|
|
return params[0].marker + "压力过高:" + params[0].data;
|
|
return params[0].marker + "压力过高:" + params[0].data;
|
|
- } else if (params[0].data < 26) {
|
|
|
|
|
|
+ } else if (params[0].data < 32) {
|
|
return params[0].marker + "压力过低:" + params[0].data;
|
|
return params[0].marker + "压力过低:" + params[0].data;
|
|
} else {
|
|
} else {
|
|
return params[0].marker + "压力正常:" + params[0].data;
|
|
return params[0].marker + "压力正常:" + params[0].data;
|
|
}
|
|
}
|
|
- },
|
|
|
|
|
|
+ }
|
|
},
|
|
},
|
|
color: ["#FF6666", "#99CC66", "#FFFF66"],
|
|
color: ["#FF6666", "#99CC66", "#FFFF66"],
|
|
legend: {
|
|
legend: {
|
|
@@ -57,45 +53,47 @@ export default {
|
|
padding: [25, 20],
|
|
padding: [25, 20],
|
|
icon: "rect",
|
|
icon: "rect",
|
|
textStyle: {
|
|
textStyle: {
|
|
- color: "#fff",
|
|
|
|
|
|
+ color: "#fff"
|
|
},
|
|
},
|
|
- data: ["压力超限", "压力正常", "压力过低"],
|
|
|
|
|
|
+ data: ["压力超限", "压力正常", "压力过低"]
|
|
},
|
|
},
|
|
grid: {
|
|
grid: {
|
|
- top:"22%",
|
|
|
|
|
|
+ top: "22%",
|
|
left: "3%",
|
|
left: "3%",
|
|
right: "4%",
|
|
right: "4%",
|
|
bottom: "3%",
|
|
bottom: "3%",
|
|
- containLabel: true,
|
|
|
|
|
|
+ containLabel: true
|
|
},
|
|
},
|
|
xAxis: [
|
|
xAxis: [
|
|
{
|
|
{
|
|
type: "category",
|
|
type: "category",
|
|
axisLabel: {
|
|
axisLabel: {
|
|
color: "#fff",
|
|
color: "#fff",
|
|
- fontSize: 11,
|
|
|
|
|
|
+ fontSize: 11
|
|
},
|
|
},
|
|
axisLine: {
|
|
axisLine: {
|
|
- show: true,
|
|
|
|
|
|
+ show: true
|
|
},
|
|
},
|
|
- data: this.zhijiaId,
|
|
|
|
- },
|
|
|
|
|
|
+ data: this.zhijiaId
|
|
|
|
+ }
|
|
],
|
|
],
|
|
yAxis: [
|
|
yAxis: [
|
|
{
|
|
{
|
|
type: "value",
|
|
type: "value",
|
|
axisLabel: {
|
|
axisLabel: {
|
|
- color: "#fff",
|
|
|
|
|
|
+ color: "#fff"
|
|
// fontSize: 11,
|
|
// fontSize: 11,
|
|
},
|
|
},
|
|
|
|
+ min: 30,
|
|
|
|
+ max: 40,
|
|
splitLine: {
|
|
splitLine: {
|
|
show: true,
|
|
show: true,
|
|
lineStyle: {
|
|
lineStyle: {
|
|
type: "dotted",
|
|
type: "dotted",
|
|
- color: "#fff",
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
|
|
+ color: "#fff"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
],
|
|
],
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
@@ -104,19 +102,19 @@ export default {
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
color: function (params) {
|
|
color: function (params) {
|
|
- if (params.data > 39) {
|
|
|
|
|
|
+ if (params.data > 38) {
|
|
return "#FF6666";
|
|
return "#FF6666";
|
|
- } else if (params.data < 26) {
|
|
|
|
|
|
+ } else if (params.data < 32) {
|
|
return "#FFFF66";
|
|
return "#FFFF66";
|
|
} else {
|
|
} else {
|
|
return "#99CC66";
|
|
return "#99CC66";
|
|
}
|
|
}
|
|
- },
|
|
|
|
- },
|
|
|
|
|
|
+ }
|
|
|
|
+ }
|
|
},
|
|
},
|
|
// barWidth: "10",
|
|
// barWidth: "10",
|
|
barCategoryGap: "5%",
|
|
barCategoryGap: "5%",
|
|
- data: this.barData,
|
|
|
|
|
|
+ data: this.barData
|
|
},
|
|
},
|
|
{
|
|
{
|
|
//这两组数据用来模拟markLine线段开关,data可以为空
|
|
//这两组数据用来模拟markLine线段开关,data可以为空
|
|
@@ -130,12 +128,12 @@ export default {
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
show: true,
|
|
show: true,
|
|
- color: "#FF6666",
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
|
|
+ color: "#FF6666"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
},
|
|
},
|
|
{
|
|
{
|
|
//这两组数据用来模拟markLine线段开关,data可以为空
|
|
//这两组数据用来模拟markLine线段开关,data可以为空
|
|
@@ -145,35 +143,38 @@ export default {
|
|
data: [
|
|
data: [
|
|
{
|
|
{
|
|
name: "压力正常",
|
|
name: "压力正常",
|
|
- yAxis: "24",
|
|
|
|
|
|
+ yAxis: "32",
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
show: true,
|
|
show: true,
|
|
- color: "#FFFF66",
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
- },
|
|
|
|
|
|
+ color: "#FFFF66"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: "压力过低",
|
|
name: "压力过低",
|
|
type: "line",
|
|
type: "line",
|
|
itemStyle: {
|
|
itemStyle: {
|
|
normal: {
|
|
normal: {
|
|
- color: "#FFFF66",
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- ],
|
|
|
|
|
|
+ color: "#FFFF66"
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
};
|
|
};
|
|
|
|
|
|
this.myChart = this.$echarts.init(this.$refs.bar);
|
|
this.myChart = this.$echarts.init(this.$refs.bar);
|
|
// 获取数据
|
|
// 获取数据
|
|
this.myChart.setOption(option);
|
|
this.myChart.setOption(option);
|
|
- this.timer = setInterval(() => {
|
|
|
|
- this.getData();
|
|
|
|
- }, 3000);
|
|
|
|
|
|
+
|
|
|
|
+ this.websocket = new WebSocket(`ws://localhost:8081/hbase/ws/belt/1070`);
|
|
|
|
+ this.initWebSocket();
|
|
|
|
+ // this.timer = setInterval(() => {
|
|
|
|
+ // this.getData();
|
|
|
|
+ // }, 3000);
|
|
},
|
|
},
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
@@ -184,34 +185,86 @@ export default {
|
|
this.barData.push(parseInt(Math.random() * (40 - 25 + 1) + 25, 10));
|
|
this.barData.push(parseInt(Math.random() * (40 - 25 + 1) + 25, 10));
|
|
|
|
|
|
console.log(this.barData);
|
|
console.log(this.barData);
|
|
|
|
+ console.log(this.zhijiaId);
|
|
this.myChart.setOption({
|
|
this.myChart.setOption({
|
|
xAxis: [
|
|
xAxis: [
|
|
{
|
|
{
|
|
- data: this.zhijiaId,
|
|
|
|
- },
|
|
|
|
|
|
+ data: this.zhijiaId
|
|
|
|
+ }
|
|
],
|
|
],
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
- data: this.barData,
|
|
|
|
- },
|
|
|
|
|
|
+ data: this.barData
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ addData(temps) {
|
|
|
|
+ this.barData = [];
|
|
|
|
+ for (let temp of temps) {
|
|
|
|
+ let arr = [];
|
|
|
|
+ for (let data in temp) {
|
|
|
|
+ if (data.includes("after")) {
|
|
|
|
+ arr.push([data, temp[data]]);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ let newArr = arr
|
|
|
|
+ .sort((a, b) => Number(a[0].substring(0, 3)) - Number(b[0].substring(0, 3)))
|
|
|
|
+ .map((temp) => temp[1]);
|
|
|
|
+ this.barData = [...this.barData, ...newArr];
|
|
|
|
+ }
|
|
|
|
+ console.log("@@", this.barData);
|
|
|
|
+ this.myChart.setOption({
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ data: this.zhijiaId
|
|
|
|
+ }
|
|
],
|
|
],
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ data: this.barData
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
});
|
|
});
|
|
},
|
|
},
|
|
|
|
+ initWebSocket() {
|
|
|
|
+ // 连接错误
|
|
|
|
+ this.websocket.onerror = () => {
|
|
|
|
+ console.log("WebSocket连接发生错误 状态码:" + this.websocket.readyState);
|
|
|
|
+ };
|
|
|
|
+ // 连接成功
|
|
|
|
+ this.websocket.onopen = () => {
|
|
|
|
+ console.log("WebSocket连接成功 状态码:" + this.websocket.readyState);
|
|
|
|
+ };
|
|
|
|
+ // 收到消息的回调
|
|
|
|
+ this.websocket.onmessage = (event) => {
|
|
|
|
+ if (JSON.parse(event.data).length) {
|
|
|
|
+ this.addData(JSON.parse(event.data));
|
|
|
|
+ }
|
|
|
|
+ };
|
|
|
|
+ // 连接关闭的回调
|
|
|
|
+ this.websocket.onclose = () => {
|
|
|
|
+ console.log("WebSocket连接关闭 状态码:" + this.websocket.readyState);
|
|
|
|
+ };
|
|
|
|
+ // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
|
|
|
|
+ this.$once("hook:beforeDestroy", () => {
|
|
|
|
+ console.log("关闭websocket连接");
|
|
|
|
+ this.websocket.close();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- // this.getData();
|
|
|
|
- var index = 190;
|
|
|
|
- for (var i = 0; i < 190; i++) {
|
|
|
|
- this.zhijiaId.push(index--);
|
|
|
|
- var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
|
|
|
|
- this.barData.push(data);
|
|
|
|
|
|
+ for (let i = 1; i <= 200; i++) {
|
|
|
|
+ this.zhijiaId.push(i);
|
|
|
|
+ // var data = parseInt(Math.random() * (40 - 25 + 1) + 25, 10);
|
|
|
|
+ // this.barData.push(data);
|
|
}
|
|
}
|
|
console.log(this.zhijiaId);
|
|
console.log(this.zhijiaId);
|
|
},
|
|
},
|
|
|
|
|
|
destroyed() {
|
|
destroyed() {
|
|
clearInterval(this.timer);
|
|
clearInterval(this.timer);
|
|
- },
|
|
|
|
|
|
+ }
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|