update
This commit is contained in:
hzz
parent
87ee53fca4
commit
e66f93fc5d
@ -1,23 +1,69 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container2">
|
<div class="container2">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img :src="u918" alt="">
|
<img :src="u918" alt="">
|
||||||
<span>噪音监测</span>
|
<span>噪音监测</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<div class="public-box">
|
||||||
|
<svg t="1737006052368" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" p-id="1941" width="48" height="48">
|
||||||
|
<path
|
||||||
|
d="M704 672a32 32 0 0 1-32-32v-256a32 32 0 0 1 64 0v256a32 32 0 0 1-32 32z m96-64a32 32 0 0 1-32-32v-128a32 32 0 0 1 64 0v128a32 32 0 0 1-32 32z m-480 96a32 32 0 0 1-32-32V352a32 32 0 1 1 64 0v320a32 32 0 0 1-32 32z m96 128a32 32 0 0 1-32-32V224a32 32 0 1 1 64 0v576a32 32 0 0 1-32 32z m96-128a32 32 0 0 1-32-32V352a32 32 0 1 1 64 0v320a32 32 0 0 1-32 32z m96-96a32 32 0 0 1-32-32v-128a32 32 0 0 1 64 0v128a32 32 0 0 1-32 32zM224 608a32 32 0 0 1-32-32v-128a32 32 0 1 1 64 0v128a32 32 0 0 1-32 32z"
|
||||||
|
fill="#2affff" p-id="1942"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="text-label">
|
||||||
|
<div class="label-left">{{ prop.public_list.devName }}</div>
|
||||||
|
<div class="label-right"><i class="value">{{ prop.public_list.data }}</i> dB</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Progress v-for="item in prop.office_list" :mdoelValue1="item" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
import u918 from './../image/u918.png';
|
import u918 from './../image/u918.png';
|
||||||
|
import Progress from './Progress.vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
public_list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
|
||||||
|
"devName": "公共区域1",
|
||||||
|
"label": "noise-7",
|
||||||
|
"place": null,
|
||||||
|
"data": 0,
|
||||||
|
"status": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
office_list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
|
||||||
|
"devName": "办公区2",
|
||||||
|
"label": "noise-7",
|
||||||
|
"place": null,
|
||||||
|
"data": 0,
|
||||||
|
"status": 0
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container2 {
|
.container2 {
|
||||||
width: 408px;
|
width: 408px;
|
||||||
height: 278px;
|
height: 310px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 408px;
|
width: 408px;
|
||||||
@ -33,9 +79,36 @@ import u918 from './../image/u918.png';
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 243px;
|
height: 275px;
|
||||||
|
|
||||||
|
.public-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.text-label {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.label-right {
|
||||||
|
color: #2affff;
|
||||||
|
.value {
|
||||||
|
//color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,23 +1,79 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container2">
|
<div class="container2">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<img :src="u918" alt="">
|
<img :src="u918" alt="">
|
||||||
<span>甲醛/TVOC监测</span>
|
<span>甲醛/TVOC监测</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
|
<v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import u918 from './../image/u918.png';
|
import u918 from './../image/u918.png';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
option: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
xData: [],
|
||||||
|
seriesData: [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const options = computed(() => {
|
||||||
|
return {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '3%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '甲醛',
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.3
|
||||||
|
},
|
||||||
|
data: [120, 132, 101, 134, 90, 230, 210]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'TVOC',
|
||||||
|
type: 'line',
|
||||||
|
areaStyle: {
|
||||||
|
opacity: 0.3
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 330, 310]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.container2 {
|
.container2 {
|
||||||
width: 408px;
|
width: 408px;
|
||||||
height: 290px;
|
height: 268px;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 408px;
|
width: 408px;
|
||||||
@ -33,9 +89,10 @@ import u918 from './../image/u918.png';
|
|||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 255px;
|
height: 222px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="popover"
|
||||||
|
:style="{
|
||||||
|
'top': props.top + 'px',
|
||||||
|
'left': props.left + 'px',
|
||||||
|
'display': isShow ? 'inline-block' : 'none'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="popover-title">
|
||||||
|
{{ dataRef.name }}
|
||||||
|
</div>
|
||||||
|
<div class="popover-content">
|
||||||
|
{{ 'content' }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Popover">
|
||||||
|
import { ref } from 'vue';
|
||||||
|
type PropsTypes = {
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<PropsTypes>(), {
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const isShow = ref(false);
|
||||||
|
const dataRef = ref<any>({});
|
||||||
|
|
||||||
|
const setShow = (visible: boolean, data?: any) => {
|
||||||
|
isShow.value = visible;
|
||||||
|
if (data) dataRef.value = data;
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
setShow,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.popover {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(29 78 216 / 0.6);
|
||||||
|
/* background-image: url('/src/assets/images/preview-bottom.png'); */
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 0.2rem;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.popover-title {
|
||||||
|
padding: 12px;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
}
|
||||||
|
.popover-content {
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
64
src/views/screen/R_D_Environment1/component/Progress.vue
Normal file
64
src/views/screen/R_D_Environment1/component/Progress.vue
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<template>
|
||||||
|
<div class="progress-container">
|
||||||
|
<div class="text-label">
|
||||||
|
<div class="label-left">{{ prop.mdoelValue1.devName }}</div>
|
||||||
|
<div class="label-right"><i class="value">{{ prop.mdoelValue1.data }}</i> dB</div>
|
||||||
|
</div>
|
||||||
|
<div class="progress">
|
||||||
|
<el-progress :percentage="percentage" stroke-width="8" :color="checkCb(prop.mdoelValue1)" :show-text="false"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref,computed } from 'vue';
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
mdoelValue1:{
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
devName: '办公区1噪音',
|
||||||
|
data: 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
const percentage = computed(() => {
|
||||||
|
return prop.mdoelValue1.data > 100 ? 100 : prop.mdoelValue1.data;
|
||||||
|
})
|
||||||
|
|
||||||
|
//检测是否超标
|
||||||
|
function checkCb(item) {
|
||||||
|
if (item.data > 85) {
|
||||||
|
return '#FF0000'
|
||||||
|
} else {
|
||||||
|
return '#469DE9'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.progress-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 30px;
|
||||||
|
.text-label {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2affff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.label-right {
|
||||||
|
.value {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
385
src/views/screen/R_D_Environment1/component/Sence.vue
Normal file
385
src/views/screen/R_D_Environment1/component/Sence.vue
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
<template>
|
||||||
|
<div id="three"></div>
|
||||||
|
<Popover ref="popoverRef" :top="popoverTop" :left="popoverLeft" :data="popoverData"></Popover>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup name="Sence">
|
||||||
|
/* eslint-disable */
|
||||||
|
import { ref, onMounted, type Ref } from 'vue';
|
||||||
|
import Viewer, { type Animate } from '@/modules/Viewer';
|
||||||
|
import Floors from '@/modules/Floors';
|
||||||
|
import ModelLoader from '@/modules/ModelLoder';
|
||||||
|
import * as THREE from 'three';
|
||||||
|
import gsap from 'gsap';
|
||||||
|
import Event from '@/modules/Viewer/Events';
|
||||||
|
import BoxHelperWrap from '@/modules/BoxHelperWrap';
|
||||||
|
import { checkNameIncludes, findParent } from '@/utils/threejs';
|
||||||
|
|
||||||
|
import Popover from './Popover/index.vue';
|
||||||
|
|
||||||
|
let viewer: Viewer;
|
||||||
|
let modelLoader: ModelLoader;
|
||||||
|
let boxHelperWrap: BoxHelperWrap;
|
||||||
|
|
||||||
|
const popoverRef: Ref = ref(null);
|
||||||
|
const popoverTop = ref(0);
|
||||||
|
const popoverLeft = ref(0);
|
||||||
|
const popoverData = ref<any>({});
|
||||||
|
|
||||||
|
let office: any = null;
|
||||||
|
let oldOffice: any = null;
|
||||||
|
let dataCenter: any = null;
|
||||||
|
let oldDataCenter: any = null;
|
||||||
|
let modelSelect = ['zuo0', 'zuo1', 'zuo2', 'zuo3', 'zuo4', 'zuo5'];
|
||||||
|
let modelSelectName = '';
|
||||||
|
let modelMoveName = '';
|
||||||
|
let isModelSelectName = false;
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
init();
|
||||||
|
initModel();
|
||||||
|
|
||||||
|
viewer.scene.traverse((item: THREE.Object3D) => {
|
||||||
|
console.log(item, '0000000000');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const init = () => {
|
||||||
|
viewer = new Viewer('three',{width: 1920, height: 1080});
|
||||||
|
// viewer.addAxis();
|
||||||
|
// viewer.addStats();
|
||||||
|
viewer.initRaycaster();
|
||||||
|
|
||||||
|
modelLoader = new ModelLoader(viewer);
|
||||||
|
// const floors = new Floors(viewer);
|
||||||
|
// floors.addGird();
|
||||||
|
|
||||||
|
boxHelperWrap = new BoxHelperWrap(viewer);
|
||||||
|
|
||||||
|
viewer.emitter.on(Event.dblclick.raycaster, (list: THREE.Intersection[]) => {
|
||||||
|
onMouseClick(list);
|
||||||
|
});
|
||||||
|
|
||||||
|
viewer.emitter.on(Event.mousemove.raycaster, (list: THREE.Intersection[]) => {
|
||||||
|
onMouseMove(list);
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const initModel = () => {
|
||||||
|
// modelLoader.loadModelToScene('/models/zuo.glb', baseModel => {
|
||||||
|
// console.log(baseModel, '1111111');
|
||||||
|
|
||||||
|
// baseModel.setScalc(0.01);
|
||||||
|
// const model = baseModel.gltf.scene;
|
||||||
|
// office = baseModel;
|
||||||
|
// office.object.rotation.y = Math.PI;
|
||||||
|
// office.object.position.set(2, 0, 0);
|
||||||
|
// // model.position.set(80, 2, 90);
|
||||||
|
// office.object.children.forEach((item: any) => {
|
||||||
|
// item.name = item.name.replace('zuo', '');
|
||||||
|
// if (item.name === 'ding') {
|
||||||
|
// item.name = 6;
|
||||||
|
// }
|
||||||
|
// item.name--;
|
||||||
|
// });
|
||||||
|
// office.object.children.sort((a: { name: number; }, b: { name: number; }) => a.name - b.name).forEach((v: { name: string; }) => {
|
||||||
|
// v.name = 'zuo' + v.name;
|
||||||
|
// });
|
||||||
|
|
||||||
|
// model.name = '办公楼';
|
||||||
|
// baseModel.openCastShadow();
|
||||||
|
// oldOffice = model.clone();
|
||||||
|
|
||||||
|
// const list: THREE.Object3D<THREE.Event>[] = [];
|
||||||
|
// model.traverse(item => {
|
||||||
|
// list.push(item);
|
||||||
|
// });
|
||||||
|
// viewer.setRaycasterObjects(list);
|
||||||
|
// });
|
||||||
|
|
||||||
|
modelLoader.loadModelToScene('/models/plane.glb', baseModel => {
|
||||||
|
const model = baseModel.gltf.scene;
|
||||||
|
model.scale.set(0.01 * 3, 0.01 * 3, 0.01 * 3)
|
||||||
|
model.name = 'plane';
|
||||||
|
baseModel.openCastShadow();
|
||||||
|
|
||||||
|
const texture = (baseModel.object.children[0] as any).material.map;
|
||||||
|
// console.log(baseModel,baseModel.object.children[0], 'texture-------2222');
|
||||||
|
const fnOnj = planeAnimate(texture);
|
||||||
|
viewer.addAnimate(fnOnj);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
let objUrl = {
|
||||||
|
mtlUrl: '/obj/goats_R&D.mtl',
|
||||||
|
objUrl: '/obj/goats_R&D.obj',
|
||||||
|
}
|
||||||
|
modelLoader.ladObjModelToScene(objUrl, baseModel => {
|
||||||
|
var scale = 0.07 / baseModel.scale.x;
|
||||||
|
baseModel.scale.set(scale, scale, scale);
|
||||||
|
const box = new THREE.Box3().setFromObject(baseModel);
|
||||||
|
const size = box.getSize(new THREE.Vector3())
|
||||||
|
// // console.log(size,'-----');
|
||||||
|
baseModel.position.set(-size.x * 0.5, -size.y * 0.1+2, -size.z * 0.5);
|
||||||
|
// baseModel.children.forEach((child) => {
|
||||||
|
// const c = child;
|
||||||
|
// const cm = c.material;
|
||||||
|
// cm.emissive = cm.color;
|
||||||
|
// cm.emissiveMap = cm.map;
|
||||||
|
// });
|
||||||
|
|
||||||
|
baseModel.name = '再登研发中心';
|
||||||
|
dataCenter = baseModel;
|
||||||
|
oldDataCenter = baseModel.clone();
|
||||||
|
|
||||||
|
const rackList: any[] = [];
|
||||||
|
baseModel.traverse(item => {
|
||||||
|
|
||||||
|
if (checkIsRack(item)) {
|
||||||
|
rackList.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// console.log(baseModel,rackList, 'rackList------111');
|
||||||
|
|
||||||
|
viewer.setRaycasterObjects(rackList);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// modelLoader.loadModelToScene('/models/datacenter.glb', baseModel => {
|
||||||
|
// console.log(baseModel, '1111111');
|
||||||
|
// baseModel.setScalc(0.2);
|
||||||
|
// // baseModel.object.rotation.y = Math.PI / 2;
|
||||||
|
// const model = baseModel.gltf.scene;
|
||||||
|
// model.position.set(0, 0, 0);
|
||||||
|
// model.name = '机房';
|
||||||
|
// baseModel.openCastShadow();
|
||||||
|
|
||||||
|
// dataCenter = baseModel;
|
||||||
|
// oldDataCenter = model.clone();
|
||||||
|
|
||||||
|
// const rackList: any[] = [];
|
||||||
|
// model.traverse(item => {
|
||||||
|
// if (checkIsRack(item)) {
|
||||||
|
// rackList.push(item);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// // console.log(rackList, 'rackList------');
|
||||||
|
|
||||||
|
// viewer.setRaycasterObjects(rackList);
|
||||||
|
|
||||||
|
// });
|
||||||
|
};
|
||||||
|
|
||||||
|
const planeAnimate = (texture: any): Animate => {
|
||||||
|
console.log(texture, 'texture');
|
||||||
|
texture.wrapS = THREE.RepeatWrapping;
|
||||||
|
texture.wrapT = THREE.RepeatWrapping;
|
||||||
|
const animateFn = {
|
||||||
|
fun: () => {
|
||||||
|
const count = texture.repeat.y;
|
||||||
|
if (count <= 10) {
|
||||||
|
texture.repeat.x += 0.01;
|
||||||
|
texture.repeat.y += 0.02;
|
||||||
|
} else {
|
||||||
|
texture.repeat.x = 0;
|
||||||
|
texture.repeat.y = 0;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
content: viewer,
|
||||||
|
};
|
||||||
|
return animateFn;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseClick = (intersects: THREE.Intersection[]) => {
|
||||||
|
if (!intersects.length) return;
|
||||||
|
const selectedObject = intersects[0].object;
|
||||||
|
|
||||||
|
let selectedObjectName = '';
|
||||||
|
const findClickModel = (object: any) => {
|
||||||
|
console.log(object, 'object');
|
||||||
|
if (object.type === 'Group') {
|
||||||
|
selectedObjectName = object.name;
|
||||||
|
}
|
||||||
|
if (object.parent && object.type !== 'Scene') {
|
||||||
|
findClickModel(object.parent);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
findClickModel(selectedObject);
|
||||||
|
console.log(selectedObjectName);
|
||||||
|
|
||||||
|
// if (!selectedObjectName || !selectedObjectName.includes('办公楼')) {
|
||||||
|
// // this.scene.remove(this.label);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const selectedModel = viewer.scene.getObjectByName(selectedObjectName);
|
||||||
|
console.log(selectedObject, 'selectedObject');
|
||||||
|
|
||||||
|
// 点击楼房
|
||||||
|
if (selectedObject.name.includes('zuo')) {
|
||||||
|
|
||||||
|
selectOffice(selectedObject.parent);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 点击其他区域
|
||||||
|
if (!selectedObject.name.includes('zuo')) {
|
||||||
|
if (!isModelSelectName && oldOffice) {
|
||||||
|
let oldmodel = oldOffice.getObjectByName(modelMoveName);
|
||||||
|
office.object.getObjectByName(modelMoveName).traverse(function (child: { isMesh: any; material: any; name: any; }) {
|
||||||
|
if (child.isMesh) {
|
||||||
|
child.material = oldmodel.getObjectByName(child.name).material;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
function checkIsRack(obj: any): boolean {
|
||||||
|
return checkNameIncludes(obj, 'Door');
|
||||||
|
}
|
||||||
|
|
||||||
|
const onMouseMove = (intersects: THREE.Intersection[]) => {
|
||||||
|
if (!intersects.length) {
|
||||||
|
popoverRef.value.setShow(false);
|
||||||
|
boxHelperWrap.setVisible(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const selectedObject = intersects[0].object || {};
|
||||||
|
|
||||||
|
|
||||||
|
let selectedObjectName = '';
|
||||||
|
const findClickModel = (object: any) => {
|
||||||
|
if (object.name.includes('Door')) {
|
||||||
|
selectedObjectName = object.name;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (object.parent) {
|
||||||
|
findClickModel(object.parent);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// const findClickModel = (object: any) => {
|
||||||
|
// if (object.name.includes('zuo')) {
|
||||||
|
// selectedObjectName = object.name;
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// if (object.parent) {
|
||||||
|
// findClickModel(object.parent);
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
findClickModel(selectedObject);
|
||||||
|
|
||||||
|
console.log(selectedObjectName, '--selectedObjectName---');
|
||||||
|
console.log(selectedObject, '------selectedObject---------');
|
||||||
|
const rack = findParent(selectedObject, checkIsRack);
|
||||||
|
console.log(rack, '-------rack---------');
|
||||||
|
if (rack) {
|
||||||
|
|
||||||
|
boxHelperWrap.attach(rack);
|
||||||
|
updateRackInfo(rack.name);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if (!selectedObjectName || !selectedObjectName.includes('办公楼')) {
|
||||||
|
// // 重置模型
|
||||||
|
// // viewer.scene.children[viewer.scene.children.findIndex(o => o.name === '办公楼')] = office.object = oldOffice.clone();
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
modelSelect.forEach((item: any) => {
|
||||||
|
if (item === selectedObject.parent?.name) {
|
||||||
|
modelMoveName = item;
|
||||||
|
if (modelSelectName === modelMoveName) return;
|
||||||
|
office.object.getObjectByName(item).traverse(function (child: { isMesh: any; material: THREE.MeshPhongMaterial; }) {
|
||||||
|
if (child.isMesh) {
|
||||||
|
child.material = new THREE.MeshPhongMaterial({
|
||||||
|
side: THREE.DoubleSide,
|
||||||
|
transparent: true,
|
||||||
|
depthTest: false,
|
||||||
|
depthWrite: true, // 无法被选择，鼠标穿透
|
||||||
|
color: 'yellow',
|
||||||
|
opacity: 0.3,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
if (!isModelSelectName && oldOffice) {
|
||||||
|
let oldmodel = oldOffice.getObjectByName(item);
|
||||||
|
office.object.getObjectByName(item).traverse(function (child: { isMesh: any; material: any; name: any; }) {
|
||||||
|
if (child.isMesh) {
|
||||||
|
child.material = oldmodel.getObjectByName(child.name).material;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateRackInfo = (name: string) => {
|
||||||
|
if (name) {
|
||||||
|
popoverRef.value.setShow(true, { name });
|
||||||
|
const event = viewer.mouseEvent as MouseEvent;
|
||||||
|
popoverTop.value = event.y + 10;
|
||||||
|
popoverLeft.value = event.x + 10;
|
||||||
|
} else {
|
||||||
|
popoverRef.value.setShow(false);
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectOffice = (model: any) => {
|
||||||
|
modelSelectName = model.name;
|
||||||
|
let oldmodel = oldOffice.getObjectByName(modelSelectName);
|
||||||
|
let modelSelectIndex = modelSelect.findIndex(v => v === modelSelectName);
|
||||||
|
office.object.children.forEach((child: any, index: number) => {
|
||||||
|
child.children.forEach((Mesh: any) => {
|
||||||
|
if (child.name === modelSelectName) {
|
||||||
|
child.children.forEach((Mesh: { material: any; name: any; }) => {
|
||||||
|
Mesh.material = oldmodel.getObjectByName(Mesh.name).material;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Mesh.material = new THREE.MeshPhongMaterial({
|
||||||
|
// color: new THREE.Color('#123ca8'),
|
||||||
|
// transparent: true,
|
||||||
|
// opacity: 0.5,
|
||||||
|
// emissiveMap: Mesh.material.map,
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!model.userData.position && index > modelSelectIndex) {
|
||||||
|
gsap.to(child.position, {
|
||||||
|
y: !child.userData.position ? child.position.y + 60 : child.position.y,
|
||||||
|
duration: 2,
|
||||||
|
ease: "power1.inOut",
|
||||||
|
onComplete: () => {
|
||||||
|
child.userData.position = true;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (model.userData.position && index <= modelSelectIndex) {
|
||||||
|
if (child.userData.position) {
|
||||||
|
gsap.to(child.position, {
|
||||||
|
y: oldOffice.getObjectByName(child.name).position.y,
|
||||||
|
duration: 2,
|
||||||
|
ease: "power1.inOut",
|
||||||
|
onComplete: () => {
|
||||||
|
child.userData.position = false;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#three {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sensor-item">
|
||||||
|
<!-- :style="{color:item.status == 'true'?'#469DE9':'gray'}" -->
|
||||||
|
<component style="width: 60px;height: 60px;margin-top: 10px;" :is="componentmap[prop.sensorData.component]"
|
||||||
|
:value="prop.sensorData.list[i].value" :color="checkCb(prop.sensorData.list[i])" :unit="prop.sensorData.unit" />
|
||||||
|
<!-- prop.sensorData.status == 'true'?'#469DE9':'gray' -->
|
||||||
|
|
||||||
|
<div style="margin: 10px 0">{{prop.sensorData.list[i].status=== 'false' ? '——' :prop.sensorData.list[i].value + prop.sensorData.unit }}</div>
|
||||||
|
<div>{{ prop.sensorData.list[i].name }}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang='ts'>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import SvgPm25 from './svgPm25.vue';
|
||||||
|
import SvgPm10 from './svgPm10.vue';
|
||||||
|
import SvgJiaquan from './svgJiaquan.vue';
|
||||||
|
import SvgZaosheng from './svgZaosheng.vue';
|
||||||
|
import SvgTVOC from './svgTVOC.vue';
|
||||||
|
import SvgShidu from './svgShidu.vue';
|
||||||
|
import SvgWendu from './svgWendu.vue';
|
||||||
|
import SvgYanwu from './svgYanwu.vue';
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
sensorData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {
|
||||||
|
return {
|
||||||
|
unit: 'ug/m³',
|
||||||
|
limit: 35,
|
||||||
|
component: 'SvgPm25',
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
name: 'PM2.5',
|
||||||
|
status: 'true',
|
||||||
|
value: 0,
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const i = ref(0)
|
||||||
|
let timer = null
|
||||||
|
const componentmap = {
|
||||||
|
'SvgPm25': SvgPm25,
|
||||||
|
'SvgPm10': SvgPm10,
|
||||||
|
'SvgJiaquan': SvgJiaquan,
|
||||||
|
'SvgZaosheng': SvgZaosheng,
|
||||||
|
'SvgTVOC': SvgTVOC,
|
||||||
|
'SvgShidu': SvgShidu,
|
||||||
|
'SvgWendu': SvgWendu,
|
||||||
|
'SvgYanwu': SvgYanwu
|
||||||
|
}
|
||||||
|
|
||||||
|
//检测是否超标
|
||||||
|
function checkCb(item) {
|
||||||
|
if (item.status === 'false') {
|
||||||
|
return 'gray'
|
||||||
|
} else if (item.value > prop.sensorData.limit) {
|
||||||
|
return '#FF0000'
|
||||||
|
} else {
|
||||||
|
return '#469DE9'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
timer = setInterval(() => {
|
||||||
|
i.value++;
|
||||||
|
if (i.value >= prop.sensorData.list.length) {
|
||||||
|
i.value = 0;
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.sensor-item {
|
||||||
|
width: 120px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
.sensor-icon {
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
37
src/views/screen/R_D_Environment1/component/svgFenchen.vue
Normal file
37
src/views/screen/R_D_Environment1/component/svgFenchen.vue
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730769272802" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="1039" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M378.105721 356.776833a62.282417 62.282417 0 0 0-0.01338-63.076668 62.287282 62.287282 0 0 0-55.100101-30.706985c-33.842635 0.76506-60.877578 28.426402-60.867847 62.273902 0.00973 33.852366 27.053187 61.499113 60.895823 62.245928a62.275119 62.275119 0 0 0 55.085505-30.736177zM751.756435 356.776833a62.27147 62.27147 0 0 0-55.114696-93.783653c-33.842635 0.76506-60.877578 28.426402-60.867848 62.273902 0.00973 33.852366 27.058053 61.499113 60.900688 62.245928a62.275119 62.275119 0 0 0 55.081856-30.736177zM540.953941 325.271948c0-17.199853-13.940139-31.139992-31.138776-31.139993-17.194987 0-31.135127 13.940139-31.135127 31.139993 0 17.193771 13.940139 31.133911 31.135127 31.13391 17.198636 0 31.138776-13.940139 31.138776-31.13391zM323.020216 761.162508a62.279984 62.279984 0 0 0 55.085505-30.731312 62.282417 62.282417 0 0 0-0.01338-63.076667 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867847 62.273903 0.00973 33.848717 27.053187 61.495464 60.895823 62.241062zM696.675795 761.162508a62.27147 62.27147 0 0 0 55.066045-93.807979 62.267821 62.267821 0 0 0-55.100101-30.706986c-33.842635 0.76506-60.877578 28.421537-60.867848 62.273903 0.00973 33.848717 27.058053 61.495464 60.901904 62.241062zM478.680038 698.922662c0 17.194987 13.940139 31.135127 31.135127 31.135127 17.198636 0 31.138776-13.940139 31.138776-31.135127 0-17.201069-13.940139-31.141208-31.138776-31.141208-17.194987 0-31.135127 13.940139-31.135127 31.141208zM665.502963 512.093656c0 17.199853 13.945005 31.139992 31.139992 31.139992 17.199853 0 31.139992-13.940139 31.139992-31.139992 0-17.193771-13.940139-31.133911-31.139992-31.133911-17.196204 0-31.139992 13.940139-31.139992 31.133911zM291.852248 512.093656c0 17.199853 13.940139 31.139992 31.139992 31.139992 17.194987 0 31.135127-13.940139 31.135127-31.139992 0-17.193771-13.940139-31.133911-31.135127-31.133911-17.199853 0-31.139992 13.940139-31.139992 31.133911zM448.952183 512.093656c0.003649 33.852366 27.053187 61.495464 60.895822 62.245928a62.27147 62.27147 0 0 0 55.08064-30.736177 62.273903 62.273903 0 0 0-55.11348-93.78487c-33.838986 0.766276-60.872713 28.422754-60.862982 62.275119z"
|
||||||
|
p-id="1040"></path>
|
||||||
|
<path
|
||||||
|
d="M970.857819 318.763468c-25.181285-59.281778-61.204765-112.580522-107.052389-158.434228-45.863436-45.863436-99.171911-81.883267-158.441526-107.059687a491.752072 491.752072 0 0 0-193.366677-39.291708c-83.403656 0-171.837974 23.574538-249.031147 66.383817-12.851541 7.89629-13.060747 22.976113-9.240314 33.865745 4.075858 5.958707 9.962803 9.099222 17.056328 9.099222 4.884705 0 9.996859-1.525254 14.800071-4.404261l0.437872-0.261507 0.451252-0.246911c72.839996-38.846538 148.71712-58.544693 225.534452-58.544694 249.379012 0 452.256024 202.881878 452.256024 452.253591 0 249.377795-202.877012 452.259673-452.256024 452.259673-249.376579 0-452.253591-202.881878-452.253591-452.259673 0-76.807602 19.694506-152.694457 58.534963-225.516207l0.246911-0.460982 0.266372-0.441521c7.265025-12.110808 1.772165-26.726-7.739387-33.862096-2.365725-1.7673-5.702066-2.038537-7.47423-2.038537-8.798793 0-18.591312 5.578002-23.351953 13.289413-42.808063 77.198038-66.383817 165.632356-66.383818 249.02993a491.870054 491.870054 0 0 0 39.292924 193.370327c25.18615 59.280562 61.195035 112.575657 107.058471 158.437876 45.858571 45.859787 99.163397 81.873537 158.434228 107.056039a491.843295 491.843295 0 0 0 193.36911 39.292924 491.928437 491.928437 0 0 0 193.359379-39.283194c59.273264-25.18615 112.57809-61.196251 158.441526-107.059687 45.858571-45.858571 81.871104-99.16218 107.052389-158.435444 26.07649-61.365319 39.292924-126.433087 39.292925-193.367894s-13.216434-131.995277-39.294141-193.370326z"
|
||||||
|
p-id="1041" class="border"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
36
src/views/screen/R_D_Environment1/component/svgJiaquan.vue
Normal file
36
src/views/screen/R_D_Environment1/component/svgJiaquan.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730777236728" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="1648" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M512 22.26087A488.136348 488.136348 0 0 0 165.709913 165.709913 488.136348 488.136348 0 0 0 22.26087 512a488.136348 488.136348 0 0 0 143.449043 346.290087A488.136348 488.136348 0 0 0 512 1001.73913a488.136348 488.136348 0 0 0 346.290087-143.449043A488.136348 488.136348 0 0 0 1001.73913 512a488.136348 488.136348 0 0 0-143.449043-346.290087A488.136348 488.136348 0 0 0 512 22.26087m0-22.26087c282.779826 0 512 229.220174 512 512S794.779826 1024 512 1024 0 794.779826 0 512 229.220174 0 512 0z"
|
||||||
|
p-id="1649"></path>
|
||||||
|
<path
|
||||||
|
d="M748.477217 625.775304a57.677913 57.677913 0 0 0-35.328 12.198957l-73.928347-42.674087a130.715826 130.715826 0 0 0-80.339479-165.954783v-69.565217a84.057043 84.057043 0 1 0-87.485217-5.075478v74.551652a130.715826 130.715826 0 0 0-80.339478 165.954782l-73.928348 42.674087a57.566609 57.566609 0 1 0 18.18713 23.04l68.140522-39.379478a131.027478 131.027478 0 0 0 223.187478 0l68.140522 39.379478a57.655652 57.655652 0 0 0-4.786087 23.04 58.301217 58.301217 0 1 0 58.434783-58.212174z m-247.874782-258.226087a80.740174 80.740174 0 0 0 29.184 1.424696v53.648696a124.14887 124.14887 0 0 0-29.117218 0v-55.073392z m14.558608 287.47687a102.066087 102.066087 0 1 1 102.110609-102.021565 102.066087 102.066087 0 0 1-102.110609 101.954782z"
|
||||||
|
p-id="1650" class="border"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
36
src/views/screen/R_D_Environment1/component/svgPm10.vue
Normal file
36
src/views/screen/R_D_Environment1/component/svgPm10.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1731979776030" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="15886" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M507.44 955.95a438.912 438.912 0 0 1-172.62-35.08c-52.91-22.48-100.5-54.63-141.43-95.57-40.94-40.94-73.09-88.52-95.57-141.44a439.09 439.09 0 0 1-35.08-172.62c0-74.45 21.05-153.39 59.26-222.31 4.25-6.88 12.99-11.86 20.85-11.86 1.58 0 4.56 0.24 6.67 1.82 8.49 6.37 13.39 19.42 6.91 30.23l-0.24 0.39-0.22 0.41c-34.67 65.01-52.25 132.75-52.25 201.32 0 222.62 181.11 403.73 403.73 403.73s403.73-181.11 403.73-403.73c0-222.61-181.11-403.73-403.73-403.73-68.57 0-136.31 17.58-201.33 52.26l-0.4 0.22-0.39 0.23c-4.29 2.57-8.85 3.93-13.21 3.93-6.33 0-11.59-2.8-15.23-8.12-3.41-9.72-3.22-23.18 8.25-30.23C354.05 87.58 433 66.54 507.45 66.54a438.912 438.912 0 0 1 172.62 35.08c52.91 22.48 100.5 54.63 141.44 95.57 40.93 40.93 73.09 88.51 95.57 141.43 23.28 54.79 35.08 112.87 35.08 172.62s-11.8 117.84-35.08 172.62c-22.48 52.91-54.63 100.5-95.57 141.43-40.94 40.94-88.53 73.09-141.44 95.57a438.83 438.83 0 0 1-172.63 35.09z m0 0"
|
||||||
|
p-id="15887" class="border"></path>
|
||||||
|
<path
|
||||||
|
d="M327.36 460.82c0 22.16 18.05 40.64 39.71 40.64s39.73-18.57 39.73-40.64c3.62-25.85-18.05-40.61-39.73-40.61s-39.71 18.44-39.71 40.61z m377.59-94.43c-14.46 0-25.3 11.09-25.3 22.16 3.62 11.07 14.46 22.16 25.3 22.16 14.43 0 25.27-11.09 25.27-22.16s-10.84-22.16-25.27-22.16z m-110.23 18.29c21.68 0 39.73-18.56 39.73-40.61s-18.06-40.61-39.73-40.61c-21.67 0-39.73 18.57-39.73 40.61-3.6 22.09 14.46 40.54 39.73 40.54v0.07zM429.23 395.7c18.08 0 36.11-14.78 36.11-33.23 0-18.45-14.43-33.21-36.11-33.21-18.06 0-36.11 14.76-36.11 33.23s14.46 33.21 36.11 33.21z m178.99 95.33c0 18.57 14.46 33.23 36.11 33.23 18.05 0 36.11-14.78 36.11-33.23 0-18.45-14.43-33.23-36.11-33.23-17.96 0-36.11 14.76-36.11 33.23z m-89.64-3.02c18.05 0 28.89-14.87 28.89-29.54s-14.43-29.43-28.89-29.43c-18.05 0-28.89 14.64-28.89 29.43 0 14.78 14.45 29.54 28.89 29.54z m178.2 63.15c-3.88 0-7.77 0-9.7 2-77.74 55.51-147.71 15.85-149.66 13.92-145.76-91.25-242.9 5.85-242.9 5.85a10.313 10.313 0 0 0-3.88 7.94c0.47 2.98 1.81 5.75 3.88 7.96 3.9 5.96 11.6 3.97 17.5 0 1.95-3.97 81.62-81.22 209.9-1.97 1.95 1.97 33.05 19.82 77.74 19.82 29.15 0 66.07-7.91 102.99-33.7a14.953 14.953 0 0 0 1.95-17.85 10.057 10.057 0 0 0-7.82-3.97z m-383.26-185a29.21 29.21 0 0 0 20.56-8.77c5.42-5.54 8.41-13 8.33-20.75 0.19-16.14-12.73-29.39-28.87-29.59a29.227 29.227 0 0 0-28.89 29.54 29.22 29.22 0 0 0 8.3 20.77 29.22 29.22 0 0 0 20.57 8.8z m57.14 267.22h-32.77v95.15h22.49v-31.52h10.91c19.7 0 36.9-9.98 36.9-32.65 0.04-23.55-16.95-30.98-37.53-30.98z m-0.49 45.58h-9.79v-27.52h9.17c10.79 0 16.8 3.34 16.8 12.93 0 9.58-5.27 14.59-16.18 14.59z m103.92-4.48c-1.76 5.5-3.27 11.6-5.15 17.41h-0.63c-1.76-5.87-3.27-11.91-5.15-17.41l-14.81-41.1h-24.23v95.15h20.08v-32.61c-0.39-11.05-1.35-22.07-2.88-33.02h0.51l7.52 22.79 12.67 34.81h12.3l12.56-34.81 7.77-22.79h0.51a320.218 320.218 0 0 0-2.88 33.02v32.72h20.38V633.5h-24.27l-14.3 40.98z m101.23-41.1h-16.45a62.13 62.13 0 0 1-23.21 8.59v14.09h17.2v54.14h-19.82v18.45H592V710.2h-16.69v-76.82z m62.66-1.79c-19.68 0-33 16.13-33 48.9 0 32.77 13.32 49.94 33 49.94s33.14-17.15 33.14-49.94c-0.01-32.79-13.42-48.9-33.14-48.9z m0 81.23c-6.64 0-11.9-6.15-11.9-32.28 0-26.13 5.27-31.35 11.9-31.35 6.64 0 12.07 5.38 12.07 31.35 0 25.97-5.41 32.23-12.07 32.23v0.05z m0 0"
|
||||||
|
p-id="15888"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
36
src/views/screen/R_D_Environment1/component/svgPm25.vue
Normal file
36
src/views/screen/R_D_Environment1/component/svgPm25.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1731979377696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="4643" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M510.24 954.86a438.195 438.195 0 0 1-172.33-35.02c-52.82-22.44-100.33-54.54-141.2-95.41-40.87-40.87-72.97-88.37-95.41-141.2A438.195 438.195 0 0 1 66.28 510.9c0-74.33 21.01-153.14 59.16-221.94 4.24-6.87 12.97-11.84 20.81-11.84 1.58 0 4.55 0.24 6.66 1.82 8.48 6.36 13.37 19.39 6.9 30.18l-0.24 0.39-0.22 0.41c-34.62 64.9-52.17 132.53-52.17 200.98 0 222.25 180.81 403.06 403.06 403.06S913.3 733.15 913.3 510.9c0-222.24-180.81-403.06-403.06-403.06-68.46 0-136.08 17.56-201 52.18l-0.4 0.22-0.39 0.23c-4.28 2.57-8.84 3.93-13.19 3.93-6.32 0-11.57-2.8-15.2-8.11-3.4-9.71-3.22-23.14 8.24-30.18 68.8-38.15 147.61-59.16 221.94-59.16a438.16 438.16 0 0 1 172.33 35.02c52.82 22.44 100.33 54.54 141.2 95.41 40.86 40.87 72.97 88.37 95.41 141.2 23.24 54.7 35.02 112.68 35.02 172.33s-11.78 117.64-35.02 172.33c-22.44 52.82-54.54 100.33-95.41 141.2-40.87 40.87-88.38 72.97-141.2 95.41a438.362 438.362 0 0 1-172.33 35.01z m0 0"
|
||||||
|
p-id="4644" class="border"></path>
|
||||||
|
<path
|
||||||
|
d="M314.61 465.3c0 22.12 18.02 40.53 39.63 40.53 21.61 0 39.66-18.51 39.66-40.53 3.61-25.8-18.02-40.54-39.66-40.54-21.64 0.01-39.63 18.33-39.63 40.54z m376.86-94.32c-14.41-0.09-25.13 10.93-25.13 22.03 3.61 11.05 14.41 22.1 25.22 22.1 14.43 0 25.25-11.05 25.25-22.1s-10.91-22.12-25.34-22.12v0.09z m-110 18.25c21.63 0 39.66-18.53 39.66-40.54 0-22-18.02-40.54-39.66-40.54-21.63 0-39.63 18.53-39.63 40.54-3.61 22.01 14.41 40.44 39.63 40.44v0.1z m-165.15 11.05c18.02 0 36.04-14.73 36.04-33.17s-14.43-33.26-36.04-33.26c-18.02 0-36.04 14.75-36.04 33.17 0 18.41 14.41 33.17 36.04 33.17v0.09z m178.63 95.13c0 18.53 14.43 33.17 36.04 33.17 18.02 0 36.04-14.75 36.04-33.17 0-18.41-14.41-33.17-36.04-33.17-17.92-0.04-36.04 14.64-36.04 33.17z m-89.48-3.03c18.02 0 28.84-14.73 28.84-29.49 0-14.76-14.41-29.46-28.84-29.46-18.02 0-28.84 14.73-28.84 29.46s14.43 29.44 28.84 29.44v0.05z m177.87 63.05c-3.87 0-7.76 0-9.68 1.97-77.6 55.41-147.46 15.84-149.38 13.9-145.49-91.12-242.45 5.84-242.45 5.84a10.358 10.358 0 0 0-3.87 7.92c0.47 2.97 1.81 5.73 3.87 7.92 3.89 5.93 11.58 3.96 17.46 0 1.95-3.96 81.46-81.07 209.51-1.97 1.95 1.97 32.98 19.78 77.6 19.78 29.09 0 65.95-7.92 102.82-33.65a14.92 14.92 0 0 0 1.92-17.79 9.92 9.92 0 0 0-7.8-3.96v0.04zM300.8 370.73c16.1-0.18 29.01-13.37 28.84-29.46a29.16 29.16 0 0 0-28.82-29.53c-16.1 0.19-29.01 13.38-28.84 29.49a29.1 29.1 0 0 0 8.29 20.73c5.41 5.52 12.8 8.68 20.53 8.77z m27.15 266.72h-32.68v94.97h22.42v-31.45h10.89c19.66 0 36.83-9.98 36.83-32.59-0.01-23.52-16.91-30.93-37.46-30.93z m-0.51 45.59h-9.75v-27.57h9.15c10.77 0 16.77 3.31 16.77 12.9s-5.26 14.67-16.17 14.67z m103.75-4.64c-1.76 5.49-3.27 11.58-5.14 17.37h-0.6c-1.74-5.88-3.24-11.88-5.12-17.37l-14.78-41.02h-24.11v94.97h19.92v-32.41c-0.39-11.04-1.35-22.05-2.87-32.98h0.51l7.5 22.75 12.65 34.75h12.28l12.53-34.75 7.76-22.75h0.51a316.917 316.917 0 0 0-2.87 32.98v32.57h20.4v-94.97h-24.3l-14.27 40.86z m86.91 36.23c14.29-14.69 28.05-32.71 28.05-49.06 0-18.16-12.51-29.9-30.55-29.9-13.27 0-21.8 4.84-30.95 14.69l12.16 12.28c4.38-4.86 9.26-9.27 15.77-9.27 7.39 0 12.16 4.63 12.16 13.44 0 13.9-15.66 31.04-38.96 52.65v13.02h64.65v-19.16h-17.19c-5.07 0.13-10.13 0.57-15.14 1.31z m60.75-8.57c-5.8-0.36-11.23 2.86-13.69 8.12a14.157 14.157 0 0 0 2.52 15.72 14.158 14.158 0 0 0 15.55 3.42c5.39-2.16 8.92-7.39 8.9-13.21 0.18-3.66-1.15-7.24-3.68-9.9a13.39 13.39 0 0 0-9.7-4.16h0.1z m62.27-35.51c-3.31-0.06-6.6 0.59-9.64 1.92l1.37-16.21h33.19v-18.9h-52.35l-2.32 47.02 9.75 6.51c5.54-3.57 8.04-4.63 13.16-4.63 8.04 0 13.66 5.12 13.66 14.69s-5.63 14.82-14.66 14.82c-7.39 0-13.9-3.96-19.16-9.06l-10.33 14.43a44.022 44.022 0 0 0 32.57 13.18c17.9 0 33.7-12.39 33.7-33.75 0-20.57-13.29-30.02-29.07-30.02h0.13z m0 0"
|
||||||
|
p-id="4645"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
36
src/views/screen/R_D_Environment1/component/svgShidu.vue
Normal file
36
src/views/screen/R_D_Environment1/component/svgShidu.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730777853051" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="2254" id="mx_n_1730777853052" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M511.952979 1023.896979a505.462446 505.462446 0 0 1-198.72418-40.381232c-60.914463-25.881164-115.693372-62.891387-162.824501-110.022515-47.131128-47.131128-84.141351-101.902162-110.022514-162.8245a505.462446 505.462446 0 0 1-40.381233-198.72418c0-85.708713 24.227164-176.592083 68.223569-255.928957 4.891115-7.923448 14.956887-13.657316 23.998754-13.657316 1.8194 0 5.245543 0.275667 7.679287 2.095067 9.774353 7.332734 15.421582 22.352631 7.954953 34.797013l-0.275667 0.456819-0.252038 0.472571C67.412872 355.019318 47.17106 433.009363 47.17106 511.944552c0 256.283385 208.498533 464.781919 464.781919 464.781918s464.781919-208.498533 464.781919-464.781918-208.498533-464.781919-464.781919-464.781919c-78.943064 0-156.925233 20.241811-231.780554 60.166224l-0.464696 0.252039-0.448943 0.26779c-4.938372 2.961448-10.191791 4.52881-15.208925 4.52881-7.293353 0-13.342268-3.229238-17.532401-9.349039-3.922343-11.192068-3.709686-26.692412 9.498686-34.804889 79.328998-43.996404 170.212368-68.223568 255.928957-68.223568a505.430941 505.430941 0 0 1 198.72418 40.381232c60.906587 25.873288 115.693372 62.891387 162.824501 110.022515 47.123252 47.123252 84.141351 101.902162 110.022515 162.824501 26.794802 63.072539 40.381232 129.933526 40.381232 198.72418s-13.58643 135.659517-40.381232 198.72418c-25.881164 60.914463-62.891387 115.693372-110.022515 162.824501-47.131128 47.131128-101.910038 84.141351-162.824501 110.022514a505.525456 505.525456 0 0 1-198.716304 40.373356z"
|
||||||
|
p-id="2255" class="border"></path>
|
||||||
|
<path
|
||||||
|
d="M716.088103 531.012811c-23.57344-52.345167-57.480443-102.288095-93.364371-155.160967-25.014783-36.852699-50.872319-74.949835-73.587254-114.74823l-0.181153-0.322923-38.506698-78.344474a1190.187004 1190.187004 0 0 0-16.587259 32.930355c-7.758048 15.783887-15.783887 32.111232-24.227164 46.855462-23.124497 40.538756-47.942376 79.116341-71.949007 116.425858-30.945555 48.076271-62.930768 97.79079-91.820637 152.514566-28.094374 69.444378-21.454745 144.449347 18.257012 205.867886 41.641423 64.411492 113.488039 104.438295 187.508483 104.438295 1.252314 0 2.496753-0.015752 3.756944-0.039381 75.761083-1.236562 145.024309-41.239737 185.255893-107.005934 38.490946-62.930768 44.256318-138.975394 15.445211-203.410513z m-41.594166 166.19551c-30.709269 58.323196-95.538199 103.595543-157.933386 106.060791h-0.716733c-65.269996-1.559486-126.877564-41.869832-160.90271-100.137895-34.607984-59.284091-34.214175-131.359117-6.395468-188.296103 25.314079-49.493985 83.897189-140.542756 130.122555-203.953971a37.293765 37.293765 0 0 1 61.158625 0.669476c21.375983 30.638384 49.470357 71.61033 66.994882 99.94099 19.462068 31.47326 37.845099 61.198006 50.9117 81.16415l0.3308 0.535581c40.341851 69.365616 49.186814 141.818699 16.429735 204.016981zM501.745435 594.298007c-63.994053 35.198698-126.475878 15.07503-159.390481-1.016029-1.590991 36.56128 7.529639 74.524521 27.133479 108.1086 31.796184 54.463862 85.015608 86.535713 146.032461 88.000685l0.669476-0.007876c50.4155-1.992676 99.232133-29.716869 130.098926-72.413702a416.099181 416.099181 0 0 0 20.604116-37.333147c14.051125-34.584356 16.603011-71.964759 7.742296-109.778353-36.33287-8.616553-101.847028-14.633963-172.890273 24.439822z"
|
||||||
|
p-id="2256"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
36
src/views/screen/R_D_Environment1/component/svgTVOC.vue
Normal file
36
src/views/screen/R_D_Environment1/component/svgTVOC.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730777586016" class="icon" viewBox="0 0 1152 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="1965" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M160 512c0-32-19.2-61.44-48.64-74.24l-10.24-3.84 1.28-11.52c17.92-96 64-183.04 133.12-252.16 90.88-90.88 211.2-140.8 340.48-140.8 176.64 0 337.92 96 422.4 250.88 3.84 6.4 12.8 8.96 19.2 5.12 6.4-3.84 8.96-12.8 5.12-19.2C934.4 102.4 762.88 0 576 0c-69.12 0-135.68 14.08-198.4 39.68-61.44 25.6-115.2 62.72-162.56 110.08-47.36 47.36-83.2 102.4-108.8 162.56-15.36 35.84-25.6 72.96-32 110.08l-1.28 8.96-8.96 2.56c-38.4 7.68-64 40.96-64 78.08 0 43.52 35.84 79.36 79.36 79.36 44.8 0 80.64-35.84 80.64-79.36z m912.64-79.36c-43.52 0-79.36 35.84-79.36 79.36 0 32 19.2 61.44 48.64 74.24l10.24 3.84-2.56 11.52c-17.92 96-64 183.04-133.12 252.16-90.88 90.88-211.2 140.8-340.48 140.8-176.64 0-337.92-96-422.4-250.88-2.56-5.12-7.68-7.68-12.8-7.68-2.56 0-5.12 0-6.4 1.28-3.84 1.28-6.4 5.12-6.4 8.96-1.28 3.84-1.28 7.68 1.28 11.52C217.6 921.6 389.12 1024 576 1024c69.12 0 135.68-14.08 198.4-39.68 61.44-25.6 115.2-62.72 162.56-110.08 47.36-47.36 83.2-102.4 108.8-162.56 15.36-35.84 25.6-72.96 32-110.08l1.28-8.96 8.96-2.56c38.4-7.68 64-40.96 64-78.08 0-43.52-35.84-79.36-79.36-79.36z"
|
||||||
|
p-id="1966" class="border"></path>
|
||||||
|
<path
|
||||||
|
d="M266.24 423.68h-69.12v-21.76h162.56v21.76h-69.12V627.2h-25.6V423.68zM382.72 401.92H409.6l38.4 124.16c7.68 26.88 12.8 47.36 21.76 74.24h1.28c8.96-26.88 14.08-47.36 23.04-74.24l37.12-124.16h25.6L483.84 627.2h-29.44l-71.68-225.28zM569.6 514.56c0-71.68 39.68-115.2 94.72-115.2 56.32 0 94.72 43.52 94.72 115.2s-39.68 117.76-94.72 117.76c-55.04-1.28-94.72-46.08-94.72-117.76z m163.84 0c0-57.6-26.88-93.44-69.12-93.44-40.96 0-69.12 35.84-69.12 93.44s26.88 94.72 69.12 94.72c42.24 0 69.12-37.12 69.12-94.72zM794.88 514.56c0-71.68 42.24-116.48 98.56-116.48 26.88 0 48.64 12.8 61.44 26.88l-14.08 16.64c-11.52-12.8-26.88-21.76-46.08-21.76-43.52 0-72.96 35.84-72.96 93.44s28.16 94.72 71.68 94.72c21.76 0 38.4-8.96 53.76-25.6l14.08 15.36c-17.92 20.48-39.68 32-69.12 32-56.32 1.28-97.28-42.24-97.28-115.2z"
|
||||||
|
p-id="1967"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
36
src/views/screen/R_D_Environment1/component/svgWendu.vue
Normal file
36
src/views/screen/R_D_Environment1/component/svgWendu.vue
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730777903037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="2469" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M511.2 959.1c-59.7 0.1-118.7-11.9-173.6-35.3-53.2-22.6-101.1-54.9-142.3-96.1-41.2-41.2-73.5-89-96.1-142.3a441 441 0 0 1-35.3-173.6c0-74.9 21.2-154.3 59.6-223.6 4.3-6.9 13.1-11.9 21-11.9 1.6 0 4.6 0.2 6.7 1.8 8.5 6.4 13.5 19.5 6.9 30.4l-0.2 0.4-0.2 0.4c-34.9 65.4-52.6 133.5-52.6 202.5 0 223.9 182.2 406.1 406.1 406.1 223.9 0 406.1-182.2 406.1-406.1 0-223.9-182.2-406.1-406.1-406.1-69 0-137.1 17.7-202.5 52.6l-0.4 0.2-0.4 0.2c-4.3 2.6-8.9 4-13.3 4-6.4 0-11.7-2.8-15.3-8.2-3.4-9.8-3.2-23.3 8.3-30.4 69.3-38.4 148.7-59.6 223.6-59.6 59.7-0.1 118.7 11.9 173.6 35.3 53.2 22.6 101.1 54.9 142.3 96.1 41.2 41.2 73.5 89 96.1 142.3 23.4 55.1 35.3 113.5 35.3 173.6s-11.9 118.5-35.3 173.6c-22.6 53.2-54.9 101.1-96.1 142.3-41.2 41.2-89 73.5-142.3 96.1a441 441 0 0 1-173.6 35.3z m0 0"
|
||||||
|
p-id="2470" class="border"></path>
|
||||||
|
<path
|
||||||
|
d="M531.5 583.1l-6-2.7V352.8c0-9.5-12-17.6-26.2-17.6s-26.2 8-26.2 17.6v227.7l-6.1 2.7c-28.8 12.9-47.5 41.9-47.5 73.8 0 44.5 35.8 80.7 79.7 80.7 43.9 0 79.7-36.2 79.7-80.7 0.1-31.9-18.5-61-47.4-73.9z m81.7-48.4l-3.2-3.1V286.8c0-24-12.3-47.2-33.8-63.6-20.7-15.9-48-24.6-76.9-24.6-28.9 0-56.2 8.7-76.9 24.6-21.5 16.5-33.8 39.7-33.8 63.6v244.9l-3.2 3.1c-33.1 31.6-52.1 76.2-52.1 122.3 0 44.9 17.3 87.1 48.6 118.9 31.4 31.8 73 49.2 117.4 49.2 44.3 0 86-17.5 117.4-49.2 31.4-31.8 48.6-74 48.6-118.9 0-46.2-19-90.8-52.1-122.4z m-113.9 263c-76.6 0-138.9-63.1-138.9-140.7 0-42.1 18.3-81.6 50.4-108.4l4.9-4.1V286.8c0-16.5 9.6-32.6 26.3-44.1 15.7-10.8 36.1-16.8 57.4-16.8 21.3 0 41.7 5.9 57.4 16.8 16.7 11.5 26.3 27.5 26.3 44.1v257.7l4.9 4.1c32 26.9 50.4 66.4 50.4 108.4-0.2 77.5-62.5 140.7-139.1 140.7zM642 304.5h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.8-8.7-10.6-8.7H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7z m36.4 20.6H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.9-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 38H642c-5.9 0-10.6 3.9-10.6 8.7s4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.9-4.7-8.7-10.6-8.7z m0 37.9H642c-5.9 0-10.6 3.9-10.6 8.7 0 4.8 4.8 8.7 10.6 8.7h36.4c5.9 0 10.6-3.9 10.6-8.7 0-4.8-4.7-8.7-10.6-8.7z m0 0"
|
||||||
|
p-id="2471"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
34
src/views/screen/R_D_Environment1/component/svgYanwu.vue
Normal file
34
src/views/screen/R_D_Environment1/component/svgYanwu.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730776964174" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="7087" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M631.466667 230.4l-17.066667-8.533333 17.066667-38.4 17.066666 8.533333c76.8 38.4 140.8 98.133333 179.2 174.933333l8.533334 17.066667-38.4 21.333333-8.533334-17.066666c-34.133333-68.266667-89.6-123.733333-157.866666-157.866667z m17.066666 601.6l-17.066666 8.533333-17.066667-38.4 17.066667-8.533333c68.266667-34.133333 123.733333-89.6 162.133333-157.866667l8.533333-17.066666 38.4 21.333333-8.533333 17.066667c-42.666667 76.8-106.666667 136.533333-183.466667 174.933333zM674.133333 170.666667l-17.066666-8.533334 17.066666-38.4 17.066667 8.533334c85.333333 42.666667 157.866667 110.933333 200.533333 196.266666l8.533334 17.066667-38.4 21.333333-8.533334-17.066666c-38.4-81.066667-102.4-140.8-179.2-179.2z m192 490.666666l38.4 21.333334-8.533333 17.066666c-42.666667 85.333333-115.2 153.6-200.533333 196.266667l-17.066667 8.533333-17.066667-38.4 17.066667-8.533333c76.8-38.4 140.8-98.133333 183.466667-174.933333l4.266666-21.333334zM392.533333 793.6l17.066667 8.533333-17.066667 38.4-17.066666-8.533333c-76.8-38.4-140.8-98.133333-179.2-174.933333l-12.8-17.066667 38.4-21.333333 8.533333 17.066666c38.4 68.266667 93.866667 123.733333 162.133333 157.866667z m0-610.133333l17.066667 38.4-17.066667 8.533333c-68.266667 34.133333-123.733333 89.6-162.133333 157.866667l-8.533333 17.066666-38.4-17.066666 8.533333-17.066667c42.666667-81.066667 106.666667-140.8 183.466667-179.2l17.066666-8.533333zM157.866667 366.933333l-38.4-21.333333 8.533333-17.066667c42.666667-85.333333 115.2-153.6 200.533333-196.266666l17.066667-8.533334 17.066667 38.4-12.8 8.533334c-76.8 38.4-145.066667 98.133333-183.466667 174.933333l-8.533333 21.333333z m192 490.666667l17.066666 8.533333-17.066666 38.4-17.066667-8.533333c-85.333333-42.666667-157.866667-110.933333-200.533333-196.266667l-8.533334-17.066666 38.4-21.333334 8.533334 17.066667c38.4 76.8 102.4 140.8 179.2 179.2zM512 981.333333C251.733333 981.333333 42.666667 772.266667 42.666667 512S251.733333 42.666667 512 42.666667s469.333333 213.333333 469.333333 469.333333-213.333333 469.333333-469.333333 469.333333z m0-981.333333C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m426.666667 512c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666667-42.666667 17.066667-42.666667 42.666667-42.666667 42.666667 21.333333 42.666667 42.666667z m-426.666667 85.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333z m0-213.333333c-72.533333 0-128 59.733333-128 128s59.733333 128 128 128 128-59.733333 128-128-59.733333-128-128-128z m0 298.666667c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z m0-384c-119.466667 0-213.333333 93.866667-213.333333 213.333333s93.866667 213.333333 213.333333 213.333333 213.333333-93.866667 213.333333-213.333333-98.133333-213.333333-213.333333-213.333333z"
|
||||||
|
p-id="7088" class="border"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg) ;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
39
src/views/screen/R_D_Environment1/component/svgZaosheng.vue
Normal file
39
src/views/screen/R_D_Environment1/component/svgZaosheng.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<svg t="1730777460223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
p-id="1806" width="256" height="256" :fill="prop.color">
|
||||||
|
<path
|
||||||
|
d="M204.8 869.171l29.491-29.491a431.923 431.923 0 0 1-33.382-31.54l-29.082 29.492q15.975 16.589 32.973 31.54z"
|
||||||
|
p-id="1807"></path>
|
||||||
|
<path
|
||||||
|
d="M512 40.96a471.04 471.04 0 0 0-367.206 765.952l29.286-28.672a430.08 430.08 0 1 1 92.16 87.04l-28.672 29.491A471.04 471.04 0 1 0 512 40.96z"
|
||||||
|
p-id="1808" class="border"></path>
|
||||||
|
<path
|
||||||
|
d="M522.24 634.88v-40.96a81.92 81.92 0 0 0 0-163.84v-40.96a122.88 122.88 0 0 1 0 245.76z m-40.96-350.003a20.48 20.48 0 0 0-4.096 0 86.835 86.835 0 0 0-67.584 24.78l-63.488 63.489H276.48a40.96 40.96 0 0 0-40.96 40.96v204.8a40.96 40.96 0 0 0 40.96 40.96h77.005l55.296 55.296a81.92 81.92 0 0 0 67.379 22.118 20.48 20.48 0 0 0 5.12 0 20.48 20.48 0 0 0 20.48-20.48V305.357a20.48 20.48 0 0 0-20.48-20.48zM460.8 697.549a40.96 40.96 0 0 1-23.142-11.264l-66.15-66.15H358.4v-1.23h-81.92v-204.8h27.648l-1.229 1.23h57.959l76.595-76.596A40.96 40.96 0 0 1 460.8 327.68v369.869z m266.24-201.933H768a20.48 20.48 0 0 1 0 40.96h-40.96a20.48 20.48 0 0 1 0-40.96z m-80.691-153.6l29.491-29.082a20.48 20.48 0 0 1 28.877 28.877l-28.877 29.082a20.48 20.48 0 0 1-28.877-28.877z m36.25 311.091l28.876 28.877a20.48 20.48 0 1 1-28.877 28.877l-28.876-28.877a20.48 20.48 0 1 1 28.876-28.877z"
|
||||||
|
p-id="1809"></path>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
const prop = defineProps({
|
||||||
|
color: '#469DE9'
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
/** .border设置循环旋转动画效果 */
|
||||||
|
.border {
|
||||||
|
animation: rotate 3s linear infinite;
|
||||||
|
transform-origin: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,23 +3,34 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="title">研发中心环境实时监测系统</div>
|
<div class="title">研发中心环境实时监测系统</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="ct-box">
|
||||||
|
<div class="ct-sensor">
|
||||||
|
<SensorNumLoop :sensorData="item" v-for="(item, index) in sensor_list" :key="index" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="left-content left-right" ref="leftContentRef">
|
<div class="left-content left-right" ref="leftContentRef">
|
||||||
<Lr1 :data="avg_temp_humi.four" />
|
<Lr1 :data="avg_temp_humi.four" />
|
||||||
<Lr2 :data="humi"/>
|
<Lr2 :data="humi" />
|
||||||
<Lr3 />
|
<Lr3 :public_list="public_noise" :office_list="office_noise" />
|
||||||
<Lr4 />
|
<Lr4 />
|
||||||
</div>
|
</div>
|
||||||
<div class="right-content left-right" ref="rightContentRef"></div>
|
<div class="right-content left-right" ref="rightContentRef"></div>
|
||||||
<div class="bottom-content" ref="bottomContentRef"></div>
|
<div class="bottom-content" ref="bottomContentRef"></div>
|
||||||
|
|
||||||
|
<!-- <Sence /> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
|
import Sence from './component/Sence.vue';
|
||||||
import Lr1 from './component/Lr1.vue';
|
import Lr1 from './component/Lr1.vue';
|
||||||
import Lr2 from './component/Lr2.vue';
|
import Lr2 from './component/Lr2.vue';
|
||||||
import Lr3 from './component/Lr3.vue';
|
import Lr3 from './component/Lr3.vue';
|
||||||
import Lr4 from './component/Lr4.vue';
|
import Lr4 from './component/Lr4.vue';
|
||||||
|
import SensorNumLoop from './component/SensorNumLoop.vue';
|
||||||
|
import { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/R_D_Environment';
|
||||||
|
|
||||||
|
|
||||||
let deltaY = ref(0)
|
let deltaY = ref(0)
|
||||||
let avg_temp_humi = reactive({
|
let avg_temp_humi = reactive({
|
||||||
@ -34,7 +45,9 @@ let avg_temp_humi = reactive({
|
|||||||
humi: 60
|
humi: 60
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
let noiseDataList = ref()
|
||||||
|
let public_noise = ref({})
|
||||||
|
let office_noise = ref([])
|
||||||
let humi = ref({
|
let humi = ref({
|
||||||
"Humiture": [
|
"Humiture": [
|
||||||
{
|
{
|
||||||
@ -112,18 +125,277 @@ let humi = ref({
|
|||||||
"name": "温湿度下限值"
|
"name": "温湿度下限值"
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
let sensor_list = reactive([
|
||||||
|
{
|
||||||
|
|
||||||
|
component: 'SvgWendu',
|
||||||
|
unit: '℃',
|
||||||
|
type: 'AirTemp_Reg',
|
||||||
|
limit: 40,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: '温度1',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: '温度2',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgShidu',
|
||||||
|
unit: '%RH',
|
||||||
|
type: 'AirHumi_Reg',
|
||||||
|
limit: 90,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: '湿度1',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: '湿度2',
|
||||||
|
value: 100,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgJiaquan',
|
||||||
|
unit: 'mg/m³',
|
||||||
|
type: 'CH2O',
|
||||||
|
limit: 0.08,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: '甲醛1',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: '甲醛2',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgTVOC',
|
||||||
|
unit: 'mg/m³',
|
||||||
|
type: 'TVOC',
|
||||||
|
limit: 0.5,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: 'TVOC1',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: 'TVOC2',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgPm25',
|
||||||
|
unit: 'mg/m³',
|
||||||
|
type: 'HIGH_PM25_Reg',
|
||||||
|
limit: 30,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: 'PM2.51',
|
||||||
|
value: 20,
|
||||||
|
status: "false"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: 'PM2.52',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgPm10',
|
||||||
|
unit: 'mg/m³',
|
||||||
|
type: 'HIGH_PM10_Reg',
|
||||||
|
limit: 30,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: 'PM101',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: 'PM102',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgZaosheng',
|
||||||
|
unit: 'dB',
|
||||||
|
type: 'Noise_Reg',
|
||||||
|
limit: 85,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: '噪音1',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: '噪音2',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'SvgYanwu',
|
||||||
|
unit: 'mg/m³',
|
||||||
|
type: 'Smoke_Reg',
|
||||||
|
limit: 100,
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
|
||||||
|
id: '',
|
||||||
|
name: '烟雾1',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '',
|
||||||
|
name: '烟雾2',
|
||||||
|
value: 20,
|
||||||
|
status: "true"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
function getNoiseDataList() {
|
||||||
|
noiseDataList.value = [
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
|
||||||
|
"devName": "公共区域",
|
||||||
|
"label": "noise-7",
|
||||||
|
"place": null,
|
||||||
|
"data": 19,
|
||||||
|
"status": 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
|
||||||
|
"devName": "办公区6",
|
||||||
|
"label": "noise-6",
|
||||||
|
"place": null,
|
||||||
|
"data": 90,
|
||||||
|
"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
|
||||||
|
},
|
||||||
|
]
|
||||||
|
public_noise.value = noiseDataList.value.find(item => item.devName === '公共区域')
|
||||||
|
office_noise.value = noiseDataList.value.filter(item => item.devName !== '公共区域')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 获取顶部数据
|
||||||
|
// function getTopDataList() {
|
||||||
|
// getTopData().then(res => {
|
||||||
|
// if (res.code === 200) {
|
||||||
|
// res.data.forEach(item => {
|
||||||
|
// let index = sensor_list.findIndex(sensor => sensor.type === item.type)
|
||||||
|
// 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
|
||||||
|
|
||||||
|
// }
|
||||||
|
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
getNoiseDataList()
|
||||||
window.addEventListener('wheel', function (event) {
|
window.addEventListener('wheel', function (event) {
|
||||||
deltaY.value += event.deltaY
|
deltaY.value += event.deltaY
|
||||||
if (deltaY.value <= -500 && deltaY.value >= -1000) {
|
if (deltaY.value <= -500 && deltaY.value >= -1000) {
|
||||||
|
this.document.querySelector('.ct-box').style.transform = 'translateY(-200%) translateX(-50%)'
|
||||||
this.document.querySelector('.left-content').style.transform = 'translateX(-100%)'
|
this.document.querySelector('.left-content').style.transform = 'translateX(-100%)'
|
||||||
this.document.querySelector('.right-content').style.transform = 'translateX(100%)'
|
this.document.querySelector('.right-content').style.transform = 'translateX(100%)'
|
||||||
this.document.querySelector('.bottom-content').style.transform = 'translateY(100%)'
|
this.document.querySelector('.bottom-content').style.transform = 'translateY(100%)'
|
||||||
}
|
}
|
||||||
if (deltaY.value > -500 && deltaY.value < 0) {
|
if (deltaY.value > -500 && deltaY.value < 0) {
|
||||||
|
this.document.querySelector('.ct-box').style.transform = 'translateY(0) translateX(-50%)'
|
||||||
this.document.querySelector('.left-content').style.transform = 'translateX(0)'
|
this.document.querySelector('.left-content').style.transform = 'translateX(0)'
|
||||||
this.document.querySelector('.right-content').style.transform = 'translateX(0)'
|
this.document.querySelector('.right-content').style.transform = 'translateX(0)'
|
||||||
this.document.querySelector('.bottom-content').style.transform = 'translateY(0)'
|
this.document.querySelector('.bottom-content').style.transform = 'translateY(0)'
|
||||||
@ -159,6 +431,7 @@ onMounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 72px;
|
height: 72px;
|
||||||
background-image: url('./image/u796.png');
|
background-image: url('./image/u796.png');
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -171,6 +444,28 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ct-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 825px;
|
||||||
|
height: 180px;
|
||||||
|
display: flex;
|
||||||
|
z-index: 2;
|
||||||
|
justify-content: space-between;
|
||||||
|
transition: transform 1s;
|
||||||
|
|
||||||
|
.ct-sensor {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.left-content {
|
.left-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user