This commit is contained in:
lll
parent
0acead08f6
commit
d966b29bf9
|
|
@ -121,10 +121,17 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
sendMessageToCSharp(name) {
|
||||
window.vuplex.postMessage({
|
||||
type: "Tog",
|
||||
message: `${name}_true`,
|
||||
});
|
||||
if (name == "生产工艺") {
|
||||
window.vuplex.postMessage({
|
||||
type: "video",
|
||||
message: `${name}_true`,
|
||||
});
|
||||
} else {
|
||||
window.vuplex.postMessage({
|
||||
type: "Tog",
|
||||
message: `${name}_true`,
|
||||
});
|
||||
}
|
||||
},
|
||||
go1() {
|
||||
this.flag1 = false;
|
||||
|
|
|
|||
|
|
@ -255,6 +255,20 @@
|
|||
<img src="../../assets/img/小标题栏.png" class="img" />
|
||||
<p>设备异常统计</p>
|
||||
</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>
|
||||
<div class="gjlb">
|
||||
|
|
@ -384,76 +398,6 @@ export default {
|
|||
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: {
|
||||
|
|
@ -473,11 +417,133 @@ export default {
|
|||
return "";
|
||||
},
|
||||
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");
|
||||
// 赋值并初始化ecahrts;
|
||||
var myChart = this.$echarts.init(chartDom);
|
||||
myChart.setOption(this.option);
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
created() {},
|
||||
|
|
@ -495,7 +561,8 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
|
||||
.a {
|
||||
|
|
@ -943,6 +1010,26 @@ export default {
|
|||
width: 1155px;
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue