From d966b29bf942e6fd294bf68ed6fb7f6a2567ee86 Mon Sep 17 00:00:00 2001 From: lll Date: Fri, 8 Dec 2023 10:49:00 +0800 Subject: [PATCH] 11 --- src/views/Index.vue | 15 ++- src/views/lll/ZNYW.vue | 231 ++++++++++++++++++++++++++++------------- 2 files changed, 170 insertions(+), 76 deletions(-) diff --git a/src/views/Index.vue b/src/views/Index.vue index 68a6d13..af85d63 100644 --- a/src/views/Index.vue +++ b/src/views/Index.vue @@ -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; diff --git a/src/views/lll/ZNYW.vue b/src/views/lll/ZNYW.vue index b7e11e2..8c2794f 100644 --- a/src/views/lll/ZNYW.vue +++ b/src/views/lll/ZNYW.vue @@ -255,6 +255,20 @@

设备异常统计

+
@@ -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 {