From e2b1ef3845dfe1499f3fd306aa1053c9ed933565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Fri, 22 Dec 2023 23:33:48 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E4=BC=A0=E6=84=9F?=
=?UTF-8?q?=E5=99=A8=E6=95=B0=E6=8D=AE=E7=9B=91=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/content/airInfo/AirInfo.vue | 66 +++++++++++++++-------
src/components/content/usedEle/UsedEle.vue | 22 +++++++-
2 files changed, 67 insertions(+), 21 deletions(-)
diff --git a/src/components/content/airInfo/AirInfo.vue b/src/components/content/airInfo/AirInfo.vue
index 957c3dd..af1d516 100644
--- a/src/components/content/airInfo/AirInfo.vue
+++ b/src/components/content/airInfo/AirInfo.vue
@@ -61,6 +61,7 @@
import ItemInfo from "./childComps/ItemInfo.vue";
import TimeRangeBtn from "@/components/timeRangeBtn/index.vue"
import * as echarts from 'echarts';
+import {getEchartsInfo} from "../../../api/largeScreen";
let myEcharts = reactive({});
let myAirEcharts = reactive({});
@@ -69,6 +70,7 @@ const props = defineProps({
airData: Array
});
const windSpeed = ref('')
+const windSpeedId = ref(0)
const airTitle = ref('')
const airList = ref([])
const timeList = ref(["年", "月", "日"]);
@@ -91,19 +93,39 @@ watch(() => props.airData, (now) => {
getAirInfo(now.sensorList)
}
}, {deep: true});
-const handleOpenChart = () => {
- isWindSpeedVisited.value = true
- nextTick(() => {
- initChart()
+const getChartInfo = (equipmentId) => {
+ getEchartsInfo(equipmentId).then(res => {
+ if (res?.code === 1000) {
+ isWindSpeedVisited.value = true
+ nextTick(() => {
+ initChart(res.data.dates, res.data.values)
+ })
+ }
})
}
-const handleOpenAirChart = (item) => {
- isAirVisited.value = true
- airTitle.value = item.name
- nextTick(() => {
- initAirChart()
+const getGasChartInfo = (equipmentId) => {
+ getEchartsInfo(equipmentId).then(res => {
+ if (res?.code === 1000) {
+ isAirVisited.value = true
+ nextTick(() => {
+ initAirChart(res.data.dates, res.data.values)
+ })
+ }
})
}
+const handleOpenChart = () => {
+ // isWindSpeedVisited.value = true
+ getChartInfo(windSpeedId.value)
+}
+
+const handleOpenAirChart = (item) => {
+ // isAirVisited.value = true
+ airTitle.value = item.name
+ getGasChartInfo(item.equipmentId)
+ // nextTick(() => {
+ // initAirChart()
+ // })
+}
const timeSelect = (index) => {
console.log('选择时间', index)
if (index === 0) {
@@ -146,13 +168,14 @@ const getAirInfo = (now) => {
airObj = changeData(item)
airArr.push(airObj)
} else if (item.equipmentType === "windSpeed") {
+ windSpeedId.value = item.equipmentId
windSpeed.value = item.value
}
})
airArr.push(airArr.shift())
airList.value = airArr
}
-const initChart = () => {
+const initChart = (type, values) => {
//3.初始化container容器
myEcharts = echarts.init(document.getElementById('containerWind'));
//5.传入数据
@@ -190,8 +213,8 @@ const initChart = () => {
let content = `
${params[0].name}
-
进风口: ${params[0].value}
-
出风口: ${params[1].value}
+
进风口: ${params[0].value}
+
出风口: ${params[1].value}
`;
return content;
},
@@ -211,7 +234,8 @@ const initChart = () => {
//X轴
xAxis: {
type: 'category',
- data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+ // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+ data:type,
axisLabel: {
textStyle: {
fontSize: 45,
@@ -232,7 +256,8 @@ const initChart = () => {
//配置项
series: [
{
- data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
+ // data: [3, 85, 47, 92, 17, 76, 69, 25, 56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 31, 49, 81, 63],
+ data:values,
type: 'line',
smooth: true,
symbolSize: 24,
@@ -249,7 +274,7 @@ const initChart = () => {
myEcharts.resize();
}
}
-const initAirChart = () => {
+const initAirChart = (type, values) => {
//3.初始化container容器
myAirEcharts = echarts.init(document.getElementById('containerAir'));
//5.传入数据
@@ -284,7 +309,7 @@ const initAirChart = () => {
let content = `
${params[0].name}
-
${params[0].value}
+
${params[0].value}
`;
return content;
},
@@ -304,7 +329,8 @@ const initAirChart = () => {
//X轴
xAxis: {
type: 'category',
- data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+ // data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
+ data:type,
axisLabel: {
textStyle: {
fontSize: 45,
@@ -325,7 +351,8 @@ const initAirChart = () => {
//配置项
series: [
{
- data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+ // data: [56, 12, 89, 34, 71, 43, 67, 20, 98, 72, 19, 61, 3, 85, 47, 92, 17, 76, 69, 25, 31, 49, 81, 63],
+ data:values,
type: 'line',
smooth: true,
symbolSize: 24,
@@ -385,8 +412,9 @@ const initAirChart = () => {
.input-fan {
//margin: 0 26px;
- > span:last-child {
+ > span:first-child {
margin-left: 25px;
+ margin-right: 25px;
}
}
}
diff --git a/src/components/content/usedEle/UsedEle.vue b/src/components/content/usedEle/UsedEle.vue
index 786026d..22c20ba 100644
--- a/src/components/content/usedEle/UsedEle.vue
+++ b/src/components/content/usedEle/UsedEle.vue
@@ -60,8 +60,9 @@ let myEcharts = reactive({});
const isVisited = ref(false);
const eleData = ref([])
const electricityConsumptionMonthly = ref()
-const monthlySavings = ref(55555)
-const valueA = ref(electricityConsumptionMonthly.value);
+const monthlySavings = ref(5)
+const length = ref(null);
+const valueA = ref();
const valueB = ref(monthlySavings.value);
const bgImage = computed(() =>
isVisited.value
@@ -70,6 +71,7 @@ const bgImage = computed(() =>
);
watch(() => props.eleData, (now) => {
getBasicData(now.frequencyChangerList)
+ // setValue()
}, {deep: true});
watch(() => props.list, (now) => {
eleData.value.forEach(item => {
@@ -84,7 +86,23 @@ watch(() => props.list, (now) => {
}
})
})
+ // setValue()
}, {deep: true});
+onMounted(()=>{
+ // setValue()
+})
+const setValue=()=> {
+ let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
+ console.log('width',electricityConsumptionMonthly.value,width)
+ valueA.value.style.height = `${width}px`;
+ // let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
+ // point.value.style.left = `${flag}px`;
+ // if (width >= flag) {
+ // value.value.style.background = "#F53839";
+ // } else {
+ // value.value.style.background = "#60DDDE";
+ // }
+}
const getBasicData = (data) => {
let tranObj = {}
let tranArr = []