From 8b3f36f5c9ccae5751bb0bc7207bdf3b406844ff Mon Sep 17 00:00:00 2001 From: dengj <209192278@qq.com> Date: Thu, 14 Dec 2023 11:44:07 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E6=8A=98=E7=BA=BF?= =?UTF-8?q?=E5=9B=BE=E6=B8=B2=E6=9F=93?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../content/badGasInfo/BadGasInfo.vue | 219 +++++++++--------- 1 file changed, 108 insertions(+), 111 deletions(-) diff --git a/src/components/content/badGasInfo/BadGasInfo.vue b/src/components/content/badGasInfo/BadGasInfo.vue index 7d8334b..39cb4f7 100644 --- a/src/components/content/badGasInfo/BadGasInfo.vue +++ b/src/components/content/badGasInfo/BadGasInfo.vue @@ -7,7 +7,7 @@
-
+
@@ -25,108 +25,9 @@ const props = defineProps({ }); const isVisited = ref(false); const badGasList = ref([]) -const chart = ref(null); +const chart = ref(); let myEcharts = reactive({}); -const option = reactive({ - //图例 - legend: { - left: 0, - textStyle:{ - color:'#FFFFFF', - fontSize:28 - }, - // itemWidth: 20, - // itemHeight: 20 - }, - //离容器四侧的距离 - grid: { - left: 45, // 左边距 - // right: 60, // 右边距 - top: 60, // 顶边距 - bottom: 40, // 底边距 - // containLabel: true, - }, - //提示框组件 - tooltip: { - show: true, - trigger: 'axis' - }, - //X轴 - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - axisLabel: { - textStyle: { - fontSize: 24, - color:'#D6F1FA' - }, - }, - }, - //Y轴 - yAxis: { - type: 'value', - - axisLabel: { - textStyle: { - fontSize: 24, - color:'#D6F1FA' - }, - }, - }, - //配置项 - series: [ - { - name: '二氧化碳', - data: [5, 9, 10, 7, 8, 15, 12], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '一氧化碳', - data: [8, 15, 5, 9, 10, 7, 12], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '二氧化氮', - data: [5, 15, 1, 9, 10, 7, 8], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '二氧化硫', - data: [8, 15, 12, 5, 9, 2, 7], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - { - name: '硫化氢', - data: [2, 9, 10, 15, 12, 7, 8,], - type: 'line', - smooth: true, - symbolSize:24, - lineStyle:{ - width:5 - } - }, - ] -}) +// const option = reactive() watch(() => props.list, (now) => { badGasList.value.forEach(item => { @@ -142,12 +43,6 @@ watch(() => props.badGasData, (now) => { getBadGasInfo(now.sensorList) }, {deep: true}); -onMounted(() => { - nextTick(() => { - initChart() - }) -}) - const getBadGasInfo = (now) => { let windPressureObj = {} let windPressureArr = [] @@ -172,16 +67,118 @@ const changeData = (item) => { const handleOpenChart = () => { console.log('有害气体弹窗') isVisited.value = true - initChart() + nextTick(() => { + initChart() + }) + // initChart() } /** * 初始化echarts实例方法 */ const initChart = () => { //3.初始化container容器 - myEcharts = echarts.init(chart.value); + myEcharts = echarts.init(document.getElementById('container')); //5.传入数据 - myEcharts.setOption(option, true); + let option={ + //图例 + legend: { + left: 0, + textStyle:{ + color:'#FFFFFF', + fontSize:28 + }, + // itemWidth: 20, + // itemHeight: 20 + }, + //离容器四侧的距离 + grid: { + left: 45, // 左边距 + // right: 60, // 右边距 + top: 60, // 顶边距 + bottom: 40, // 底边距 + // containLabel: true, + }, + //提示框组件 + tooltip: { + show: true, + trigger: 'axis' + }, + //X轴 + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + axisLabel: { + textStyle: { + fontSize: 24, + color:'#D6F1FA' + }, + }, + }, + //Y轴 + yAxis: { + type: 'value', + axisLabel: { + textStyle: { + fontSize: 24, + color:'#D6F1FA' + }, + }, + }, + //配置项 + series: [ + { + name: '二氧化碳', + data: [5, 9, 10, 7, 8, 15, 12], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '一氧化碳', + data: [8, 15, 5, 9, 10, 7, 12], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '二氧化氮', + data: [5, 15, 1, 9, 10, 7, 8], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '二氧化硫', + data: [8, 15, 12, 5, 9, 2, 7], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + { + name: '硫化氢', + data: [2, 9, 10, 15, 12, 7, 8,], + type: 'line', + smooth: true, + symbolSize:24, + lineStyle:{ + width:5 + } + }, + ] + } + myEcharts.setOption(option); //图表大小自适应窗口大小变化 window.onresize = () => { myEcharts.resize(); From 38c3a34a9c83fb30690e13720581cc6ee61cdd04 Mon Sep 17 00:00:00 2001 From: admin <2077599564@qq.com> Date: Thu, 14 Dec 2023 14:04:03 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E9=82=93=E6=B4=81=20:=20=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/content/fanInfo/FanInfo.vue | 207 ++++-------------- .../content/transducerList/TransducerList.vue | 43 ++-- 2 files changed, 60 insertions(+), 190 deletions(-) diff --git a/src/components/content/fanInfo/FanInfo.vue b/src/components/content/fanInfo/FanInfo.vue index db9aa50..d0d3ab0 100644 --- a/src/components/content/fanInfo/FanInfo.vue +++ b/src/components/content/fanInfo/FanInfo.vue @@ -98,53 +98,53 @@ -
- -
- -
三号风机
- -
-
-
-
- 状态：{{ stateTwo ? '运行' : '故障' }} -
-
-
- 启动 -
-
- 停止 -
-
-
-
-
- - 自动 - 手动 - -
-
- 当前功率 - -
-
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -461,119 +461,6 @@ const handleOnMounted = () => { ], } Echarts_info2.setOption(fan02_option); - //三号风机 - Echarts_info3 = echarts.init(info3.value); - fan03_option = { - series: [ - { - type: "gauge", - startAngle: -120, - endAngle: -420, - pointer: { - show: false, - }, - progress: { - show: true, - overlap: false, - roundCap: true, - clip: false, - itemStyle: { - borderWidth: 10, - borderColor: { - type: "linear", - x: 0, - y: 1, - x2: 0, - y2: 0, - colorStops: [ - { - offset: 0, - color: "#4BB10E", // 0% 处的颜色 - }, - { - offset: 0.25, - color: "#B1AD0E", // 100% 处的颜色 - }, - { - offset: 0.75, - color: "#B1880E", // 100% 处的颜色 - }, - { - offset: 1, - color: "#D77E01", // 100% 处的颜色 - }, - ], - global: false, // 缺省为 false - }, - color: { - type: "linear", - x: 0, - y: 1, - x2: 0, - y2: 0, - colorStops: [ - { - offset: 0, - color: "#4BB10E", // 0% 处的颜色 - }, - { - offset: 0.25, - color: "#B1AD0E", // 100% 处的颜色 - }, - { - offset: 0.75, - color: "#B1880E", // 100% 处的颜色 - }, - { - offset: 1, - color: "#D77E01", // 100% 处的颜色 - }, - ], - global: false, // 缺省为 false - } - }, - }, - max: 1000, - splitLine: { - show: false, - }, - axisTick: { - show: true, - splitNumber: 1, - length: 10, - }, - axisLabel: { - show: false, - }, - data: [ - { - value: powerThree.value, - fontSize: 2100, - detail: { - valueAnimation: true, - offsetCenter: ["0%", "0%"], - fontSize: 40, - color: "white", - }, - }, - ], - axisLine: { - lineStyle: { - width: 3, - color: [[1, "#155F7C"]], - }, - }, - detail: { - width: 100, - height: 14, - fontSize: 26, - color: "inherit", - formatter: "{value}", - }, - }, - ], - } - Echarts_info3.setOption(fan03_option); } const getImageUrl = (name) => { diff --git a/src/components/content/transducerList/TransducerList.vue b/src/components/content/transducerList/TransducerList.vue index 3f50cd0..daf9ac3 100644 --- a/src/components/content/transducerList/TransducerList.vue +++ b/src/components/content/transducerList/TransducerList.vue @@ -1,23 +1,6 @@