Compare commits
No commits in common. "377ef2be6bec3d70777de9e47fa1392f84e919e0" and "f0d611ca0e15d82d451f216b34196d24b82989ab" have entirely different histories.
377ef2be6b
...
f0d611ca0e
|
|
@ -121,17 +121,10 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
sendMessageToCSharp(name) {
|
sendMessageToCSharp(name) {
|
||||||
if (name == "生产工艺") {
|
window.vuplex.postMessage({
|
||||||
window.vuplex.postMessage({
|
type: "Tog",
|
||||||
type: "video",
|
message: `${name}_true`,
|
||||||
message: `${name}_true`,
|
});
|
||||||
});
|
|
||||||
} else {
|
|
||||||
window.vuplex.postMessage({
|
|
||||||
type: "Tog",
|
|
||||||
message: `${name}_true`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
go1() {
|
go1() {
|
||||||
this.flag1 = false;
|
this.flag1 = false;
|
||||||
|
|
|
||||||
|
|
@ -255,20 +255,6 @@
|
||||||
<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">
|
||||||
|
|
@ -398,6 +384,76 @@ 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: {
|
||||||
|
|
@ -417,133 +473,11 @@ 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(option);
|
myChart.setOption(this.option);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {},
|
created() {},
|
||||||
|
|
@ -561,8 +495,7 @@ 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),
|
background-image: url(../../assets/img/左遮罩.png), url(../../assets/img/右遮罩.png);
|
||||||
url(../../assets/img/右遮罩.png);
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.a {
|
.a {
|
||||||
|
|
@ -1010,26 +943,6 @@ 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