This commit is contained in:
hzz 2024-11-20 17:02:49 +08:00
parent dfbd2b6fb8
commit 849a38795c
5 changed files with 235 additions and 33 deletions

View File

@ -17,3 +17,16 @@ export function getTopData(query) {
params: query
})
}
/**
* @param {Object} query
* @param {'water_pressure'|'TVOC_CH2O'|'temp_humi'|'Smoke'|'noise'|'Methane'|'hydraulic_pressure'|'FIRE'|'dust'|'Current'} query.type 传感器类型
* @param {number} query.deptId 部门id
*/
export function getSensorDateHourByType(query) {
return request({
url: '/screen/goaSenso/getSensorDateHourByType',
method: 'get',
params: query
})
}

View File

@ -0,0 +1,168 @@
<template>
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
</template>
<script setup>
import { computed } from 'vue';
const prop = defineProps({
data: {
type: Object,
default: () => {
return {};
}
}
});
const options = computed(() => {
return {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: '#00c6ff',
borderWidth: 2,
textStyle: {
color: '#fff',
fontSize: 14
},
formatter: function (params) {
let tooltipText = '';
let xAxisValue = params[0].name;
params.forEach((item) => {
tooltipText += `<div style="padding: 2px 0;"><strong>${item.seriesName}:</strong> ${item.value}</div>`;
});
return `${xAxisValue}<br>${tooltipText}`;
},
padding: 10,
extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
},
xAxis: {
type: 'category',
data: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5'],
axisLabel: {
color: "#ffffff",
},
axisLine: {
lineStyle: {
color: '#0091ea'
}
},
axisTick: {
show: false
}
},
yAxis: [{
name:'次',
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: '#1e90ff',
type: 'dashed'
}
},
axisLabel: {
color: "#ffffff"
},
axisLine: {
lineStyle: {
color: '#0091ea'
}
},
axisTick: {
show: false
}
}, {
name:'kWh',
type: 'value',
splitLine: {
show: false,
lineStyle: {
color: '#1e90ff',
type: 'dashed'
}
},
axisLabel: {
color: "#ffffff"
},
axisLine: {
lineStyle: {
color: '#0091ea'
}
},
axisTick: {
show: false
}
}],
series: [
{
name: '开关次数',
data: [106, 90, 25, 0, 35],
type: 'bar',
barWidth: '20',
barCategoryGap: '10%',
showBackground: true,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: '#00c6ff' },
{ offset: 1, color: '#0072ff' }
]
},
borderRadius: [60, 60, 60, 60],
stroke: '#00c6ff',
lineWidth: 2
},
label: {
show: true,
position: 'top',
color: '#ffffff'
},
backgroundStyle: {
borderRadius: [60, 60, 60, 60],
}
},
{
name: '用电量',
data: [210, 30, 110, 80, 120],
yAxisIndex: 1,
type: 'bar',
barWidth: '20',
barCategoryGap: '10%',
showBackground: true,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [
{ offset: 0, color: '#00c6ff' },
{ offset: 1, color: '#0072ff' }
]
},
borderRadius: [60, 60, 60, 60],
stroke: '#00c6ff',
lineWidth: 2
},
label: {
show: true,
position: 'top',
color: '#ffffff'
},
backgroundStyle: {
borderRadius: [60, 60, 60, 60],
}
},
],
};;
});
</script>
<style lang="scss" scoped></style>

View File

@ -9,14 +9,8 @@ const prop = defineProps({
type: Object,
default: () => {
return {
date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
series: [{
type: '温度',
value: [20, 22, 23, 24, 25, 26, 27]
}, {
type: '湿度',
value: [30, 32, 33, 34, 35, 36, 37]
}]
pm25: 0,
pm10: 0,
};
}
}
@ -102,7 +96,7 @@ const options = computed(() => {
},
data: [
{
value: 80,
value: prop.data.pm25,
name: "PM2.5",
},
],
@ -162,7 +156,7 @@ const options = computed(() => {
},
data: [
{
value: 60,
value: prop.data.pm10,
name: "PM10",
},
],

View File

@ -100,22 +100,11 @@ const options = computed(() => {
itemStyle: {
color: '#ccc'
},
data: [
{
value: 100,
}, {
value: 100,
}, {
value: 100,
}, {
value: 100,
}, {
value: 100,
}, {
data: prop.data.map(item => {
return {
value: 100,
}
]
})
}
]
}

View File

@ -3,18 +3,18 @@
<div class="abs-header">研发中心环境实时监测系统</div>
<div class="l-box">
<div class="lbox1">
<ItemVue title="温湿度">
<ItemVue title="温湿度监测">
<Humiture />
</ItemVue>
</div>
<div class="lbox1">
<ItemVue title="粉尘">
<PmVue />
<ItemVue title="粉尘监测">
<PmVue :data="dustData" />
</ItemVue>
</div>
<div class="lbox1">
<ItemVue title="温湿度">
<LineChart />
<ItemVue title="智能控制系统">
<BarChart />
</ItemVue>
</div>
</div>
@ -22,7 +22,7 @@
<div class="ct-sensor">
<div class="sensor-item" v-for="item in sensor_list"> <!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
<component style="width: 75px;height: 75px;margin-top: 10px;" :is="item.component"
:value="item.value" :color="item.status == 'true'?'#469DE9':'gray'" :unit="item.unit" /><!-- -->
:value="item.value" :color="checkCb(item)" :unit="item.unit" /><!-- item.status == 'true'?'#469DE9':'gray' -->
<div style="margin: 10px 0">{{ item.value + item.unit }}</div>
<div>{{ item.name }}</div>
@ -32,12 +32,12 @@
</div>
<div class="cb-box">
<div class="cbox">
<ItemVue title="温湿度">
<ItemVue title="甲醛监测">
<LineChart />
</ItemVue>
</div>
<div class="cbox">
<ItemVue title="温湿度">
<ItemVue title="TVOC监测">
<LineChart />
</ItemVue>
</div>
@ -72,6 +72,7 @@ import ItemVue from './component/item.vue';
import Humiture from './component/humiture_line.vue';
import PmVue from './component/pm.vue';
import LineChart from './component/lineChart.vue';
import BarChart from './component/barChart.vue';
import ProgeChart from './component/proge.vue';
import SvgFenchen from './component/svgFenchen.vue';
import SvgPm25 from './component/svgPm25.vue';
@ -82,7 +83,7 @@ import SvgTVOC from './component/svgTVOC.vue';
import SvgShidu from './component/svgShidu.vue';
import SvgWendu from './component/svgWendu.vue';
import SvgYanwu from './component/svgYanwu.vue';
import { getNoiseData,getTopData } from '@/api/screen/R_D_Environment';
import { getNoiseData,getTopData,getSensorDateHourByType } from '@/api/screen/R_D_Environment';
let noiseDataList = ref([
{
@ -102,6 +103,7 @@ let sensor_list = reactive([
value: 20,
unit: '℃',
type: 'AirTemp_Reg',
limit: 30,
status: "true"
},
{
@ -111,6 +113,7 @@ let sensor_list = reactive([
value: 20,
unit: '%',
type: 'AirHumi_Reg',
limit: 30,
status: "true"
},
{
@ -120,6 +123,7 @@ let sensor_list = reactive([
value: 20,
unit: 'mg/m³',
type: 'CH2O',
limit: 30,
status: "true"
},
{
@ -129,6 +133,7 @@ let sensor_list = reactive([
value: 20,
unit: 'mg/m³',
type: 'TVOC',
limit: 30,
status: "true"
},
{
@ -138,6 +143,7 @@ let sensor_list = reactive([
value: 20,
unit: 'mg/m³',
type:'HIGH_PM25_Reg',
limit: 30,
status: "true"
},
{
@ -147,6 +153,7 @@ let sensor_list = reactive([
value: 20,
unit: 'mg/m³',
type:'HIGH_PM10_Reg',
limit: 30,
status: "true"
},
{
@ -156,6 +163,7 @@ let sensor_list = reactive([
value: 20,
unit: 'dB',
type:'Noise_Reg',
limit: 30,
status: "true"
},
{
@ -165,9 +173,24 @@ let sensor_list = reactive([
value: 20,
unit: 'mg/m³',
type:'Smoke_Reg',
limit: 30,
status: "true"
}
])
let dustData = reactive({
pm25: 0,
pm10: 0,
})
//
function checkCb(item) {
if (item.status === 'false') {
return 'gray'
}else if (item.value > item.limit) {
return '#FF0000'
} else {
return '#469DE9'
}
}
//
@ -187,12 +210,27 @@ function getTopDataList() {
sensor_list[index].value = item.data
sensor_list[index].id = item.id
sensor_list[index].status = item.status
sensor_list[index].limit = item.limit
if (item.type === 'HIGH_PM25_Reg') {
dustData.pm25 = item.data
} else if (item.type === 'HIGH_PM10_Reg') {
dustData.pm10 = item.data
}
})
}
})
}
//
function getSensorData(type) {
let query = {
type,
deptId: '100'
}
getSensorDateHourByType(query)
}
onMounted(() => {