This commit is contained in:
lll
parent
0acead08f6
commit
d966b29bf9
|
|
@ -121,10 +121,17 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
sendMessageToCSharp(name) {
|
sendMessageToCSharp(name) {
|
||||||
window.vuplex.postMessage({
|
if (name == "生产工艺") {
|
||||||
type: "Tog",
|
window.vuplex.postMessage({
|
||||||
message: `${name}_true`,
|
type: "video",
|
||||||
});
|
message: `${name}_true`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.vuplex.postMessage({
|
||||||
|
type: "Tog",
|
||||||
|
message: `${name}_true`,
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
go1() {
|
go1() {
|
||||||
this.flag1 = false;
|
this.flag1 = false;
|
||||||
|
|
|
||||||
|
|
@ -255,6 +255,20 @@
|
||||||
<img src="../../assets/img/小标题栏.png" class="img" />
|
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||||
<p>设备异常统计</p>
|
<p>设备异常统计</p>
|
||||||
</div>
|
</div>
|
||||||
|
<ul class="legend">
|
||||||
|
<li>
|
||||||
|
<div class="rect" style="background-color: #49e339"></div>
|
||||||
|
<div class="txt">正常</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="rect" style="background-color: #fff045"></div>
|
||||||
|
<div class="txt">预警</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="rect" style="background-color: #ff7f21"></div>
|
||||||
|
<div class="txt">故障</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
<div id="charts"></div>
|
<div id="charts"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="gjlb">
|
<div class="gjlb">
|
||||||
|
|
@ -384,76 +398,6 @@ export default {
|
||||||
date4: "王五",
|
date4: "王五",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
option: {
|
|
||||||
legend: {
|
|
||||||
data: ["正常", "预警", "故障"],
|
|
||||||
x: "center",
|
|
||||||
y: "top",
|
|
||||||
itemGap: 100,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: "16px",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: "category",
|
|
||||||
data: [
|
|
||||||
"2023-02-12",
|
|
||||||
"2023-03-12",
|
|
||||||
"2023-04-12",
|
|
||||||
"2023-05-12",
|
|
||||||
"2023-06-12",
|
|
||||||
],
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 20,
|
|
||||||
},
|
|
||||||
interval: 0, //代表显示所有x轴标签显示
|
|
||||||
},
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: "value",
|
|
||||||
min: 0,
|
|
||||||
max: 0.3,
|
|
||||||
interval: 0.05, // 指定刻度间隔
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
textStyle: {
|
|
||||||
color: "#fff",
|
|
||||||
fontSize: 10,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
// 让图表占满容器
|
|
||||||
top: "5%",
|
|
||||||
left: "8%",
|
|
||||||
right: "5%",
|
|
||||||
bottom: "8%",
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: "故障",
|
|
||||||
type: "bar",
|
|
||||||
stack: "total",
|
|
||||||
data: [0.08, 0.08, 0.06, 0.12, 0.09],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "预警",
|
|
||||||
stack: "total",
|
|
||||||
type: "bar",
|
|
||||||
data: [0.06, 0.07, 0.03, 0.06, 0.04],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "正常",
|
|
||||||
type: "bar",
|
|
||||||
stack: "total",
|
|
||||||
data: [0.13, 0.12, 0.08, 0.14, 0.12],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -473,11 +417,133 @@ export default {
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
defineEcharts() {
|
defineEcharts() {
|
||||||
|
var data = [
|
||||||
|
{
|
||||||
|
category: "2023-02-12",
|
||||||
|
markPoints: [
|
||||||
|
{ value: 0.13, color: "#92F469" },
|
||||||
|
{ value: 0.08, color: "#F39A44" },
|
||||||
|
{ value: 0.06, color: "#D9D539" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "2023-03-12",
|
||||||
|
markPoints: [
|
||||||
|
{ value: 0.11, color: "#92F469" },
|
||||||
|
{ value: 0.08, color: "#F39A44" },
|
||||||
|
{ value: 0.15, color: "#D9D539" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "2023-04-12",
|
||||||
|
markPoints: [
|
||||||
|
{ value: 0.08, color: "#92F469" },
|
||||||
|
{ value: 0.06, color: "#F39A44" },
|
||||||
|
{ value: 0.03, color: "#D9D539" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "2023-05-12",
|
||||||
|
markPoints: [
|
||||||
|
{ value: 0.14, color: "#92F469" },
|
||||||
|
{ value: 0.13, color: "#F39A44" },
|
||||||
|
{ value: 0.06, color: "#D9D539" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: "2023-06-12",
|
||||||
|
markPoints: [
|
||||||
|
{ value: 0.13, color: "#92F469" },
|
||||||
|
{ value: 0.14, color: "#F39A44" },
|
||||||
|
{ value: 0.04, color: "#D9D539" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
//拿到最大值用来渲染柱子高度
|
||||||
|
var newData = data.map((item) => {
|
||||||
|
// 找到 markPoints 数组中最大值的对象
|
||||||
|
let maxMarkPoint = item.markPoints.reduce((max, current) =>
|
||||||
|
max.value > current.value ? max : current
|
||||||
|
);
|
||||||
|
// 返回包含最大值和对应颜色的新对象
|
||||||
|
return {
|
||||||
|
maxValue: maxMarkPoint.value,
|
||||||
|
maxColor: maxMarkPoint.color,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// 将数据转换成 echarts 需要的格式
|
||||||
|
var seriesData = newData.map((item) => ({
|
||||||
|
value: item.maxValue,
|
||||||
|
itemStyle: {
|
||||||
|
color: item.maxColor, // 将颜色应用于每个柱子
|
||||||
|
opacity: 0.3,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
// 配置项
|
||||||
|
var option = {
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
data: data.map((item) => item.category),
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: "#fff",
|
||||||
|
fontSize: 20,
|
||||||
|
},
|
||||||
|
interval: 0, //代表显示所有x轴标签显示
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
// 让图表占满容器
|
||||||
|
top: "5%",
|
||||||
|
left: "8%",
|
||||||
|
right: "5%",
|
||||||
|
bottom: "8%",
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "bar",
|
||||||
|
data: seriesData,
|
||||||
|
barWidth: 60, // 柱子宽度
|
||||||
|
markPoint: {
|
||||||
|
symbol: "roundRect", // 标记点的形状，这里使用矩形
|
||||||
|
symbolSize: [60, 25], // 矩形的大小
|
||||||
|
symbolOffset: [0, 15], // 矩形的偏移，使其在柱子中间
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data.flatMap((item) =>
|
||||||
|
item.markPoints.map((point) => ({
|
||||||
|
name: item.category,
|
||||||
|
value: point.value,
|
||||||
|
xAxis: item.category,
|
||||||
|
yAxis: point.value,
|
||||||
|
itemStyle: {
|
||||||
|
color: point.color, // 为每个点设置不同的颜色
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
// 获取容器实例;
|
// 获取容器实例;
|
||||||
var chartDom = document.getElementById("charts");
|
var chartDom = document.getElementById("charts");
|
||||||
// 赋值并初始化ecahrts;
|
// 赋值并初始化ecahrts;
|
||||||
var myChart = this.$echarts.init(chartDom);
|
var myChart = this.$echarts.init(chartDom);
|
||||||
myChart.setOption(this.option);
|
myChart.setOption(option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
|
|
@ -495,7 +561,8 @@ export default {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
|
background-image: url(../../assets/img/左遮罩.png),
|
||||||
|
url(../../assets/img/右遮罩.png);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.a {
|
.a {
|
||||||
|
|
@ -943,6 +1010,26 @@ export default {
|
||||||
width: 1155px;
|
width: 1155px;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
li {
|
||||||
|
display: flex;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #fff;
|
||||||
|
align-items: center;
|
||||||
|
margin: 10px;
|
||||||
|
.rect {
|
||||||
|
width: 30px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.gjlb {
|
.gjlb {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue