update
This commit is contained in:
hzz
parent
482f6392a6
commit
87ee53fca4
@ -1,4 +1,4 @@
|
||||
import { createWebHistory, createRouter } from 'vue-router'
|
||||
import { createWebHistory, createRouter,createWebHashHistory } from 'vue-router'
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
import ScaleScreen from '@/layout/scaleScreen'
|
||||
@ -83,6 +83,12 @@ export const constantRoutes = [
|
||||
component: () => import("../views/screen/R_D_Environment/index.vue"),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: "/screen/R_D_Environment1",
|
||||
name: "R_D_Environment1",
|
||||
component: () => import("../views/screen/R_D_Environment1/index.vue"),
|
||||
hidden: true
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -176,7 +182,7 @@ export const dynamicRoutes = [
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
history: createWebHashHistory(),
|
||||
routes: constantRoutes,
|
||||
scrollBehavior(to, from, savedPosition) {
|
||||
if (savedPosition) {
|
||||
|
||||
@ -83,9 +83,16 @@ const options = computed(() => {
|
||||
color: '#33FFFF'
|
||||
},
|
||||
data: seriesData.map((item) => {
|
||||
return {
|
||||
let dataobj = {
|
||||
value: item
|
||||
};
|
||||
}
|
||||
if (item > 100) {
|
||||
dataobj.itemStyle = {
|
||||
color: '#FF0000'
|
||||
}
|
||||
|
||||
}
|
||||
return dataobj
|
||||
}),
|
||||
z: 10
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="abs-header">研发中心环境实时监测系统</div>
|
||||
<div class="abs-header" ref="texstref">研发中心环境实时监测系统</div>
|
||||
<div class="l-box">
|
||||
<div class="lbox1">
|
||||
<ItemVue title="温湿度监测">
|
||||
@ -93,12 +93,60 @@ import { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/
|
||||
let noiseDataList = ref([
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
|
||||
"devName": "噪声监测7",
|
||||
"devName": "办公区7",
|
||||
"label": "noise-7",
|
||||
"place": null,
|
||||
"data": 0,
|
||||
"data": 10,
|
||||
"status": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
|
||||
"devName": "办公区6",
|
||||
"label": "noise-6",
|
||||
"place": null,
|
||||
"data": 20,
|
||||
"status": 0
|
||||
},
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e490",
|
||||
"devName": "办公区5",
|
||||
"label": "noise-5",
|
||||
"place": null,
|
||||
"data": 22,
|
||||
"status": 0
|
||||
},
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
|
||||
"devName": "办公区4",
|
||||
"label": "noise-4",
|
||||
"place": null,
|
||||
"data": 22,
|
||||
"status": 0
|
||||
},
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
|
||||
"devName": "办公区3",
|
||||
"label": "noise-3",
|
||||
"place": null,
|
||||
"data": 21,
|
||||
"status": 0
|
||||
},
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e492",
|
||||
"devName": "办公区2",
|
||||
"label": "noise-2",
|
||||
"place": null,
|
||||
"data": 24,
|
||||
"status": 0
|
||||
},
|
||||
{
|
||||
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e493",
|
||||
"devName": "办公区1",
|
||||
"label": "noise-1",
|
||||
"place": null,
|
||||
"data": 25,
|
||||
"status": 0
|
||||
},
|
||||
])
|
||||
let sensor_list = reactive([
|
||||
{
|
||||
@ -186,7 +234,7 @@ let dustData = reactive({
|
||||
pm25: 0,
|
||||
pm10: 0,
|
||||
})
|
||||
|
||||
let texstref = ref(null)
|
||||
let zd_config = ref({
|
||||
header: ['报警时间', '报警内容', '报警位置'],
|
||||
rowNum: 4,
|
||||
@ -338,12 +386,23 @@ function errWebsocket(val) {
|
||||
// console.log(val);
|
||||
}
|
||||
|
||||
|
||||
let deltaY = ref(0)
|
||||
onMounted(() => {
|
||||
getNoiseDataList()
|
||||
getTopDataList()
|
||||
|
||||
|
||||
//监听滚动事件
|
||||
// window.addEventListener('wheel', function (event) {
|
||||
// deltaY.value += event.deltaY
|
||||
// console.log(event.deltaY,deltaY.value,'event.deltaY');
|
||||
// if (deltaY.value <= -500 &&deltaY.value >= -1000) {
|
||||
// texstref.value.style.display = 'none'
|
||||
// }
|
||||
// if (deltaY.value > -500 && deltaY.value < 0) {
|
||||
// texstref.value.style.display = 'block'
|
||||
|
||||
// }
|
||||
// }, { passive: false });
|
||||
|
||||
connectWebsocket(null, null, getWebsocket, errWebsocket);
|
||||
});
|
||||
|
||||
86
src/views/screen/R_D_Environment1/component/Lr1.vue
Normal file
86
src/views/screen/R_D_Environment1/component/Lr1.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div class="lr-box">
|
||||
<div class="lr-title">{{ props.data.title }}</div>
|
||||
<div class="lr-content">
|
||||
<TempHumiVue />
|
||||
<div class="avg-th">
|
||||
<div class="avg-th-title">当前平均温度</div>
|
||||
<div class="avg-th-value temp-color">{{props.data.temp}}℃</div>
|
||||
</div>
|
||||
<div class="avg-th">
|
||||
<div class="avg-th-title">当前平均湿度</div>
|
||||
<div class="avg-th-value humi-color">{{props.data.humi}}%RH</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TempHumiVue from './temp_humi_icon.vue';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
title: '研发中心四楼',
|
||||
temp: 25.5,
|
||||
humi: 60
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lr-box {
|
||||
width: 100%;
|
||||
height: 134px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.lr-title {
|
||||
width: 100%;
|
||||
height: 34px;
|
||||
box-sizing: border-box;
|
||||
background-image: url('./../image/u803.png');
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
padding-left: 60px;
|
||||
font-size: 25px;
|
||||
color: #2affff;
|
||||
text-align: left;
|
||||
line-height: 34px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.lr-content {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.avg-th {
|
||||
width: 40%;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
.avg-th-title {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.temp-color {
|
||||
color: #2affff;
|
||||
}
|
||||
.humi-color {
|
||||
color: #ffd249;
|
||||
}
|
||||
.avg-th-value {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
240
src/views/screen/R_D_Environment1/component/Lr2.vue
Normal file
240
src/views/screen/R_D_Environment1/component/Lr2.vue
Normal file
@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div class="container2">
|
||||
<div class="title">
|
||||
<img :src="u918" alt="">
|
||||
<span>温湿度监测</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import u918 from './../image/u918.png';
|
||||
|
||||
const prop = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
Humiture: [],
|
||||
bottom: {
|
||||
"temp": -15,
|
||||
"humidity": 15,
|
||||
"name": "温湿度下限值"
|
||||
},
|
||||
top: {
|
||||
"temp": 45,
|
||||
"humidity": 75,
|
||||
"name": "温湿度上限值"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const options = computed(() => {
|
||||
|
||||
let obj = {
|
||||
bottom: prop.data.bottom,
|
||||
top: prop.data.top
|
||||
}
|
||||
//x轴数据
|
||||
let x = [];
|
||||
//y轴数据
|
||||
let y = { temp: [], humidity: [] };
|
||||
prop.data.Humiture.forEach((res) => {
|
||||
x.push(res.name);
|
||||
y.temp.push(res.temp);
|
||||
y.humidity.push(res.humidity);
|
||||
});
|
||||
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
|
||||
},
|
||||
legend: {
|
||||
// bottom: "3%",
|
||||
top: '2%'
|
||||
},
|
||||
backgroundColor: "transparent",
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
color: ["#4992FF", "#7CFFB2", "#FF6E76"],
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: x,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
rotate: 25,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
boundaryGap: [0, 0.01],
|
||||
name:'(°C/%RH)',
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: `温度(°C)`,//(范围：${obj.bottom.temp}°C - ${obj.top.temp}°C)
|
||||
type: "bar",
|
||||
data: y.temp,
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value;
|
||||
if (
|
||||
index_color <= obj.bottom.temp ||
|
||||
index_color >= obj.top.temp
|
||||
) {
|
||||
return "#FF6E76";
|
||||
} else {
|
||||
return "#4992FF";
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: "{c} °C",
|
||||
show: false,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
// 设置最大值和最小值
|
||||
silent: true, //基线显示 隐藏
|
||||
symbol: "none", // 不显示箭头和圆点
|
||||
data: [
|
||||
{
|
||||
name: '温度',
|
||||
yAxis: obj.bottom.temp,
|
||||
label: {
|
||||
formatter: `温度下限值： ${obj.bottom.temp} °C`,
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "yellow", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '温度',
|
||||
yAxis: obj.top.temp,
|
||||
label: {
|
||||
formatter: `温度上限值：${obj.top.temp} °C`,
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "yellow", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: `湿度(%RH)`,//(范围：${obj.bottom.humidity}%RH - ${obj.top.humidity}%RH)
|
||||
type: "bar",
|
||||
data: y.humidity,
|
||||
barWidth: '30%',
|
||||
itemStyle: {
|
||||
color: function (params) {
|
||||
var index_color = params.value;
|
||||
|
||||
if (
|
||||
index_color <= obj.bottom.humidity ||
|
||||
index_color >= obj.top.humidity
|
||||
) {
|
||||
return "#FF6E76";
|
||||
} else {
|
||||
return "#7CFFB2";
|
||||
}
|
||||
},
|
||||
},
|
||||
label: {
|
||||
formatter: "{c} %RH",
|
||||
show: false,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
color: "rgb(255,255,255,0.9)",
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
// 设置最大值和最小值
|
||||
silent: true, //基线显示 隐藏
|
||||
symbol: "none", // 不显示箭头和圆点
|
||||
data: [
|
||||
{
|
||||
name: "湿度",
|
||||
yAxis: obj.bottom.humidity,
|
||||
label: {
|
||||
formatter: `湿度下限值：` + obj.bottom.humidity + "%RH",
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "red", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "湿度",
|
||||
yAxis: obj.top.humidity,
|
||||
label: {
|
||||
formatter: `湿度上限值：` + obj.top.humidity + "%RH",
|
||||
position: "middle",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "red", // 这儿设置安全基线颜色
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '超标',//(温湿度未达正常值均为超标)
|
||||
type: "bar",
|
||||
color: '#FF6E76'
|
||||
}
|
||||
],
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
width: 408px;
|
||||
height: 272px;
|
||||
|
||||
.title {
|
||||
width: 408px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #2affff;
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 237px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
41
src/views/screen/R_D_Environment1/component/Lr3.vue
Normal file
41
src/views/screen/R_D_Environment1/component/Lr3.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="container2">
|
||||
<div class="title">
|
||||
<img :src="u918" alt="">
|
||||
<span>噪音监测</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import u918 from './../image/u918.png';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
width: 408px;
|
||||
height: 278px;
|
||||
|
||||
.title {
|
||||
width: 408px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #2affff;
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 243px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
41
src/views/screen/R_D_Environment1/component/Lr4.vue
Normal file
41
src/views/screen/R_D_Environment1/component/Lr4.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="container2">
|
||||
<div class="title">
|
||||
<img :src="u918" alt="">
|
||||
<span>甲醛/TVOC监测</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import u918 from './../image/u918.png';
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
width: 408px;
|
||||
height: 290px;
|
||||
|
||||
.title {
|
||||
width: 408px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
color: #2affff;
|
||||
font-weight: 700;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 255px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="th-container">
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="65px"
|
||||
xmlns="http://www.w3.org/2000/svg" class="svg1">
|
||||
<g transform="matrix(1 0 0 1 -61 -136 )">
|
||||
<path
|
||||
d="M 35.93451184846136 52.713638939642145 C 36.12334271529104 53.44934915784611 36.689835245706114 53.81720430107527 37.25632784619514 53.81720430107527 L 37.44515871302481 53.81720430107527 C 42.73242270395993 52.89756651125672 46.69787062708731 47.93152235068045 46.69787062708731 42.04584040028562 C 46.69787062708731 41.31013018208166 46.13137802659829 40.758347467237904 45.37605462935354 40.758347467237904 C 44.62073123210878 40.758347467237904 44.05423863161976 41.31013018208166 44.05423863161976 42.04584040028562 C 44.05423863161976 46.64402941763272 41.032944972566796 50.50650821677588 37.06749697936546 51.24221843497984 C 36.31217358212071 51.42614600659442 35.93451184846136 51.97792865318382 35.93451184846136 52.713638939642145 Z M 30.458417060770515 50.138653073546706 C 30.269586193940842 45.54046405619959 28.00361593213264 41.31013018208166 24 38.55121674437164 L 24 8.571024345808132 C 24.226998805760974 3.972835328461022 20.450381679389313 0.29428410093245916 15.729610288943224 0.29428410093245916 C 11.00883889849714 0.29428410093245916 7.232221772125477 3.972835328461021 8 8.571024345808132 L 8 37.815506526167674 C 2.889112115338741 40.574419963877695 0.24548011987118343 45.172608981224805 0.24548011987118343 50.138653073546706 C 0.24548011987118343 58.23146574680779 7.043390905295801 64.85285791540657 15.351948555283874 64.85285798366095 C 23.66050620527195 64.85285805191532 30.45841699069657 58.231465815062165 30.458417060770515 50.138653073546706 Z M 27.62595419847327 50.138653073546706 C 27.62595419847327 56.94397281376008 22.149859410782433 62.27787211756552 15.163117688454198 62.27787211756552 C 8.365206903029577 62.27787211756552 2.700281178435113 56.760045310399875 2.7002812485090626 50.13865307354671 C 2.7002812485090626 45.724391627814185 5.155082377146944 41.677985257056456 9.12053030027433 39.65478210580477 L 9.309361167104004 39.47085453419019 L 9.498192033933682 39.2869269625756 C 9.498192033933682 39.2869269625756 9.498192033933682 39.10299939096102 9.687022900763356 39.10299945921538 C 9.687022900763356 39.10299945921538 9.687022900763356 38.9190718876008 9.875853767593034 38.9190718876008 L 10 38.73514431598622 L 10 8.571024345808132 C 9.875853767593034 5.44425583312332 12.519485763060587 2.8692699670278903 15.729610288943224 2.8692699670278903 C 18.939734814825854 2.8692699670278903 21.583366810293413 5.44425583312332 21.583366810293413 8.571024345808132 L 21.583366810293413 12.801358219926076 L 17.051426286677 12.801358219926076 C 16.296102889432248 12.801358219926076 15.729610288943224 13.353140934769828 15.729610288943224 14.08885115297379 C 15.729610288943224 14.824561371177756 16.296102889432248 15.376344086021506 17.051426286677 15.376344086021506 L 21.583366810293413 15.376344086021506 L 21.583366810293413 21.26202603641633 L 17.051426286677 21.26202603641633 C 16.296102889432248 21.26202603641633 15.729610288943224 21.81380875126008 15.729610288943224 22.549518969464046 C 15.729610288943224 23.285229187668012 16.296102889432248 23.83701190251176 17.051426286677 23.83701190251176 L 21.583366810293413 23.83701190251176 L 21.583366810293413 29.170911138062834 L 17.051426286677 29.170911138062834 C 16.296102889432248 29.170911138062834 15.729610288943224 29.722693852906584 15.729610288943224 30.458404071110547 C 15.729610288943224 31.194114289314516 16.296102889432248 31.745897004158266 17.051426286677 31.745897004158266 L 21.583366810293413 31.745897004158266 L 21.583366810293413 38.73514431598622 C 21.394535943463737 39.10299945921538 21.583366810293413 39.65478210580477 21.96102854395276 39.83870967741935 L 22.149859410782437 40.022637249033934 C 25.548814803494746 42.2297679719002 27.62595419847327 46.09224677104336 27.62595419847327 50.138653073546706 Z "
|
||||
fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 61 136 )" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="27px" height="59px"
|
||||
xmlns="http://www.w3.org/2000/svg" class="svg2">
|
||||
<g transform="matrix(1 0 0 1 -89 -139 )">
|
||||
<path
|
||||
d="M 26.7347368125 38.145126100221894 C 27.11368420312499 34.4702584469767 26.7347368125 32.44908126155695 25.787368406250007 29.876673965652735 C 25.597894710937503 29.876673965652735 25.597894710937503 29.876673965652735 25.787368406250007 29.876673965652735 L 12.524210507812501 3.233883496671594 C 11.576842101562496 1.3964497041420094 9.871578914062505 0.2939894149870526 7.976842101562506 0.2939894149870526 C 6.082105289062507 0.2939894149870526 4.376842101562501 1.396449704142008 3.429473695312507 3.233883496671594 L 0.2084210859375048 9.664901906897187 C -0.17052630468748817 10.216132085567674 0.2084210859375048 11.134848981832468 0.7768421015625062 11.31859230653661 C 1.345263187500006 11.686079092316938 2.2926315937500057 11.31859230653661 2.482105289062502 10.767362196052142 L 5.703157898437499 4.336343785826549 C 6.082105289062497 3.417626889561756 6.840000000000001 2.866396710891267 7.787368406249999 2.866396779077287 C 8.734736812500005 2.866396847263309 9.49263159375 3.4176269577477765 9.871578914062505 4.336343785826549 L 22.9452631875 30.97913425480769 C 23.892631593750007 33.1840548331176 24.271578984374997 35.021488693833206 24.271578914062495 37.96138277551775 C 24.271578914062495 47.88352537791235 16.882105218750006 55.96823425596338 7.787368406249999 55.968234187777355 L 6.082105289062507 55.968234187777355 C 5.324210578125005 55.968234187777355 4.755789492187504 56.335720973557684 4.566315796875003 57.07069447693231 C 4.566315796875003 57.80566798030694 4.945263187500001 58.35689815897744 5.703157898437499 58.5406415518676 C 6.271578984374998 58.5406415518676 7.029473695312502 58.724384944757766 7.5978947109374975 58.724384944757766 C 18.208421015625 58.724384944757766 26.7347368125 49.53721584573779 26.7347368125 38.145126100221894 Z "
|
||||
fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 89 139 )" />
|
||||
</g>
|
||||
</svg>
|
||||
<img :src="u829" width="100" height="50" alt="" class="img1">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import u829 from './../image/u829.png'
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.th-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
.img1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.svg1 {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
left: 23px;
|
||||
}
|
||||
.svg2 {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: 49px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
BIN
src/views/screen/R_D_Environment1/image/u796.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u796.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
BIN
src/views/screen/R_D_Environment1/image/u797.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u797.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/views/screen/R_D_Environment1/image/u798.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u798.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
src/views/screen/R_D_Environment1/image/u799.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u799.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/views/screen/R_D_Environment1/image/u800.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u800.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
src/views/screen/R_D_Environment1/image/u801.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u801.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
BIN
src/views/screen/R_D_Environment1/image/u802.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u802.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
BIN
src/views/screen/R_D_Environment1/image/u803.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u803.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
6
src/views/screen/R_D_Environment1/image/u810.svg
Normal file
6
src/views/screen/R_D_Environment1/image/u810.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="27px" height="59px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -89 -139 )">
|
||||
<path d="M 26.7347368125 38.145126100221894 C 27.11368420312499 34.4702584469767 26.7347368125 32.44908126155695 25.787368406250007 29.876673965652735 C 25.597894710937503 29.876673965652735 25.597894710937503 29.876673965652735 25.787368406250007 29.876673965652735 L 12.524210507812501 3.233883496671594 C 11.576842101562496 1.3964497041420094 9.871578914062505 0.2939894149870526 7.976842101562506 0.2939894149870526 C 6.082105289062507 0.2939894149870526 4.376842101562501 1.396449704142008 3.429473695312507 3.233883496671594 L 0.2084210859375048 9.664901906897187 C -0.17052630468748817 10.216132085567674 0.2084210859375048 11.134848981832468 0.7768421015625062 11.31859230653661 C 1.345263187500006 11.686079092316938 2.2926315937500057 11.31859230653661 2.482105289062502 10.767362196052142 L 5.703157898437499 4.336343785826549 C 6.082105289062497 3.417626889561756 6.840000000000001 2.866396710891267 7.787368406249999 2.866396779077287 C 8.734736812500005 2.866396847263309 9.49263159375 3.4176269577477765 9.871578914062505 4.336343785826549 L 22.9452631875 30.97913425480769 C 23.892631593750007 33.1840548331176 24.271578984374997 35.021488693833206 24.271578914062495 37.96138277551775 C 24.271578914062495 47.88352537791235 16.882105218750006 55.96823425596338 7.787368406249999 55.968234187777355 L 6.082105289062507 55.968234187777355 C 5.324210578125005 55.968234187777355 4.755789492187504 56.335720973557684 4.566315796875003 57.07069447693231 C 4.566315796875003 57.80566798030694 4.945263187500001 58.35689815897744 5.703157898437499 58.5406415518676 C 6.271578984374998 58.5406415518676 7.029473695312502 58.724384944757766 7.5978947109374975 58.724384944757766 C 18.208421015625 58.724384944757766 26.7347368125 49.53721584573779 26.7347368125 38.145126100221894 Z " fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 89 139 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/views/screen/R_D_Environment1/image/u811.svg
Normal file
6
src/views/screen/R_D_Environment1/image/u811.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="47px" height="65px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -61 -136 )">
|
||||
<path d="M 35.93451184846136 52.713638939642145 C 36.12334271529104 53.44934915784611 36.689835245706114 53.81720430107527 37.25632784619514 53.81720430107527 L 37.44515871302481 53.81720430107527 C 42.73242270395993 52.89756651125672 46.69787062708731 47.93152235068045 46.69787062708731 42.04584040028562 C 46.69787062708731 41.31013018208166 46.13137802659829 40.758347467237904 45.37605462935354 40.758347467237904 C 44.62073123210878 40.758347467237904 44.05423863161976 41.31013018208166 44.05423863161976 42.04584040028562 C 44.05423863161976 46.64402941763272 41.032944972566796 50.50650821677588 37.06749697936546 51.24221843497984 C 36.31217358212071 51.42614600659442 35.93451184846136 51.97792865318382 35.93451184846136 52.713638939642145 Z M 30.458417060770515 50.138653073546706 C 30.269586193940842 45.54046405619959 28.00361593213264 41.31013018208166 24 38.55121674437164 L 24 8.571024345808132 C 24.226998805760974 3.972835328461022 20.450381679389313 0.29428410093245916 15.729610288943224 0.29428410093245916 C 11.00883889849714 0.29428410093245916 7.232221772125477 3.972835328461021 8 8.571024345808132 L 8 37.815506526167674 C 2.889112115338741 40.574419963877695 0.24548011987118343 45.172608981224805 0.24548011987118343 50.138653073546706 C 0.24548011987118343 58.23146574680779 7.043390905295801 64.85285791540657 15.351948555283874 64.85285798366095 C 23.66050620527195 64.85285805191532 30.45841699069657 58.231465815062165 30.458417060770515 50.138653073546706 Z M 27.62595419847327 50.138653073546706 C 27.62595419847327 56.94397281376008 22.149859410782433 62.27787211756552 15.163117688454198 62.27787211756552 C 8.365206903029577 62.27787211756552 2.700281178435113 56.760045310399875 2.7002812485090626 50.13865307354671 C 2.7002812485090626 45.724391627814185 5.155082377146944 41.677985257056456 9.12053030027433 39.65478210580477 L 9.309361167104004 39.47085453419019 L 9.498192033933682 39.2869269625756 C 9.498192033933682 39.2869269625756 9.498192033933682 39.10299939096102 9.687022900763356 39.10299945921538 C 9.687022900763356 39.10299945921538 9.687022900763356 38.9190718876008 9.875853767593034 38.9190718876008 L 10 38.73514431598622 L 10 8.571024345808132 C 9.875853767593034 5.44425583312332 12.519485763060587 2.8692699670278903 15.729610288943224 2.8692699670278903 C 18.939734814825854 2.8692699670278903 21.583366810293413 5.44425583312332 21.583366810293413 8.571024345808132 L 21.583366810293413 12.801358219926076 L 17.051426286677 12.801358219926076 C 16.296102889432248 12.801358219926076 15.729610288943224 13.353140934769828 15.729610288943224 14.08885115297379 C 15.729610288943224 14.824561371177756 16.296102889432248 15.376344086021506 17.051426286677 15.376344086021506 L 21.583366810293413 15.376344086021506 L 21.583366810293413 21.26202603641633 L 17.051426286677 21.26202603641633 C 16.296102889432248 21.26202603641633 15.729610288943224 21.81380875126008 15.729610288943224 22.549518969464046 C 15.729610288943224 23.285229187668012 16.296102889432248 23.83701190251176 17.051426286677 23.83701190251176 L 21.583366810293413 23.83701190251176 L 21.583366810293413 29.170911138062834 L 17.051426286677 29.170911138062834 C 16.296102889432248 29.170911138062834 15.729610288943224 29.722693852906584 15.729610288943224 30.458404071110547 C 15.729610288943224 31.194114289314516 16.296102889432248 31.745897004158266 17.051426286677 31.745897004158266 L 21.583366810293413 31.745897004158266 L 21.583366810293413 38.73514431598622 C 21.394535943463737 39.10299945921538 21.583366810293413 39.65478210580477 21.96102854395276 39.83870967741935 L 22.149859410782437 40.022637249033934 C 25.548814803494746 42.2297679719002 27.62595419847327 46.09224677104336 27.62595419847327 50.138653073546706 Z " fill-rule="nonzero" fill="#80ffff" stroke="none" transform="matrix(1 0 0 1 61 136 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/views/screen/R_D_Environment1/image/u829.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u829.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/views/screen/R_D_Environment1/image/u918.png
Normal file
BIN
src/views/screen/R_D_Environment1/image/u918.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
224
src/views/screen/R_D_Environment1/index.vue
Normal file
224
src/views/screen/R_D_Environment1/index.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="title">研发中心环境实时监测系统</div>
|
||||
</div>
|
||||
<div class="left-content left-right" ref="leftContentRef">
|
||||
<Lr1 :data="avg_temp_humi.four" />
|
||||
<Lr2 :data="humi"/>
|
||||
<Lr3 />
|
||||
<Lr4 />
|
||||
</div>
|
||||
<div class="right-content left-right" ref="rightContentRef"></div>
|
||||
<div class="bottom-content" ref="bottomContentRef"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import Lr1 from './component/Lr1.vue';
|
||||
import Lr2 from './component/Lr2.vue';
|
||||
import Lr3 from './component/Lr3.vue';
|
||||
import Lr4 from './component/Lr4.vue';
|
||||
|
||||
let deltaY = ref(0)
|
||||
let avg_temp_humi = reactive({
|
||||
four: {
|
||||
title: '研发中心四楼',
|
||||
temp: 25.5,
|
||||
humi: 60
|
||||
},
|
||||
five: {
|
||||
title: '研发中心五楼',
|
||||
temp: 25.5,
|
||||
humi: 60
|
||||
}
|
||||
})
|
||||
|
||||
let humi = ref({
|
||||
"Humiture": [
|
||||
{
|
||||
"devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "服装军团",
|
||||
"temp": "15.4",
|
||||
"humidity": "14.6",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"devId": "50633690-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "家纺军团",
|
||||
"temp": "16.3",
|
||||
"humidity": "54.1",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"devId": "e07dee00-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "医防军团",
|
||||
"temp": "15.2",
|
||||
"humidity": "12.3",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"devId": "5b01df20-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "配套中心",
|
||||
"temp": "11.4",
|
||||
"humidity": "20",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"devId": "c524cfd0-4bb2-11ee-864d-e941de71fb47",
|
||||
"name": "东气泵房",
|
||||
"temp": "26.9",
|
||||
"humidity": "10",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"devId": "e7868a00-4bb2-11ee-864d-e941de71fb47",
|
||||
"name": "西气泵房",
|
||||
"temp": "34.4",
|
||||
"humidity": "6",
|
||||
"status": true
|
||||
},
|
||||
{
|
||||
"devId": "7cd36740-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "东莞分公司",
|
||||
"temp": "27.7",
|
||||
"humidity": "38.9",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"devId": "c502b660-158f-11ee-b4df-a9653aef169c",
|
||||
"name": "东莞分公司",
|
||||
"temp": "29.5",
|
||||
"humidity": "56.3",
|
||||
"status": false
|
||||
},
|
||||
{
|
||||
"devId": "57d4bbc0-1bc9-11ee-93b4-8d0afc6a8fe9",
|
||||
"name": "微工厂",
|
||||
"temp": "14.7",
|
||||
"humidity": "17.1",
|
||||
"status": false
|
||||
}
|
||||
],
|
||||
"top": {
|
||||
"temp": 45,
|
||||
"humidity": 75,
|
||||
"name": "温湿度上限值"
|
||||
},
|
||||
"bottom": {
|
||||
"temp": -15,
|
||||
"humidity": 15,
|
||||
"name": "温湿度下限值"
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('wheel', function (event) {
|
||||
deltaY.value += event.deltaY
|
||||
if (deltaY.value <= -500 && deltaY.value >= -1000) {
|
||||
|
||||
this.document.querySelector('.left-content').style.transform = 'translateX(-100%)'
|
||||
this.document.querySelector('.right-content').style.transform = 'translateX(100%)'
|
||||
this.document.querySelector('.bottom-content').style.transform = 'translateY(100%)'
|
||||
}
|
||||
if (deltaY.value > -500 && deltaY.value < 0) {
|
||||
this.document.querySelector('.left-content').style.transform = 'translateX(0)'
|
||||
this.document.querySelector('.right-content').style.transform = 'translateX(0)'
|
||||
this.document.querySelector('.bottom-content').style.transform = 'translateY(0)'
|
||||
|
||||
}
|
||||
|
||||
if (deltaY.value >= 0) {
|
||||
deltaY.value = 0
|
||||
}
|
||||
}, { passive: false });
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
position: relative;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
align-items: center;
|
||||
// background-image: url('/src/assets/images/gif-bg.gif');
|
||||
background-repeat: no-repeat;
|
||||
/* 如果你不想让背景平铺 */
|
||||
background-size: cover;
|
||||
/* 或者其他你需要的大小设置 */
|
||||
background-position: center;
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
background-image: url('./image/u796.png');
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
font-size: 36px;
|
||||
color: #2affff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.left-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 557px;
|
||||
height: 1080px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 72px;
|
||||
background-image: url('./image/u801.png'), url('./image/u797.png');
|
||||
background-position: center, 0% 78%;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
padding-left: 30px;
|
||||
transition: transform 1s;
|
||||
}
|
||||
|
||||
.left-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 30px;
|
||||
|
||||
}
|
||||
|
||||
.right-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 557px;
|
||||
height: 1080px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 72px;
|
||||
background-image: url('./image/u800.png'), url('./image/u798.png');
|
||||
background-position: center, 100% 78%;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
padding-right: 38px;
|
||||
transition: transform 1s;
|
||||
}
|
||||
|
||||
.bottom-content {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 236px;
|
||||
background-image: url('./image/u799.png'), url('./image/u802.png');
|
||||
background-position: bottom, 50% 100%;
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
transition: transform 1s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user