update
This commit is contained in:
hzz
parent
dfbd2b6fb8
commit
849a38795c
@ -16,4 +16,17 @@ export function getTopData(query) {
|
||||
method: 'get',
|
||||
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
|
||||
})
|
||||
}
|
||||
168
src/views/screen/R_D_Environment/component/barChart.vue
Normal file
168
src/views/screen/R_D_Environment/component/barChart.vue
Normal 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>
|
||||
@ -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",
|
||||
},
|
||||
],
|
||||
|
||||
@ -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,
|
||||
}
|
||||
|
||||
]
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -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(() => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user