From dfbd2b6fb885aa7816ac05967636b856ed11ed40 Mon Sep 17 00:00:00 2001 From: hzz Date: Tue, 19 Nov 2024 17:03:39 +0800 Subject: [PATCH] update --- src/api/screen/R_D_Environment.js | 19 ++ src/utils/threejs.ts | 2 + .../component/Popover/index.vue | 2 + .../R_D_Environment/component/Sence.vue | 7 +- .../R_D_Environment/component/proge.vue | 30 +++- .../R_D_Environment/component/svgFenchen.vue | 2 +- .../R_D_Environment/component/svgJiaquan.vue | 2 +- .../R_D_Environment/component/svgPm10.vue | 36 ++++ .../R_D_Environment/component/svgPm25.vue | 36 ++++ .../R_D_Environment/component/svgShidu.vue | 2 +- .../R_D_Environment/component/svgTVOC.vue | 2 +- .../R_D_Environment/component/svgWendu.vue | 2 +- .../R_D_Environment/component/svgYanwu.vue | 2 +- .../R_D_Environment/component/svgZaosheng.vue | 2 +- src/views/screen/R_D_Environment/index.vue | 165 +++++++++++++----- 15 files changed, 251 insertions(+), 60 deletions(-) create mode 100644 src/api/screen/R_D_Environment.js create mode 100644 src/views/screen/R_D_Environment/component/svgPm10.vue create mode 100644 src/views/screen/R_D_Environment/component/svgPm25.vue diff --git a/src/api/screen/R_D_Environment.js b/src/api/screen/R_D_Environment.js new file mode 100644 index 0000000..e38e3b5 --- /dev/null +++ b/src/api/screen/R_D_Environment.js @@ -0,0 +1,19 @@ +import request from '@/utils/request' +//big/getScreen + +// 查询办公室噪声数据 +export function getNoiseData(query) { + return request({ + url: '/screen/goaSensor/getNoiseData', + method: 'get', + params: query + }) +} +// 查询公区传感器数据 +export function getTopData(query) { + return request({ + url: '/screen/goaSensor/getTopData?depts=100', + method: 'get', + params: query + }) +} \ No newline at end of file diff --git a/src/utils/threejs.ts b/src/utils/threejs.ts index 4dc7ade..6302f1b 100644 --- a/src/utils/threejs.ts +++ b/src/utils/threejs.ts @@ -32,6 +32,8 @@ export function findChildren (object3D: Object3D, callback: (obj: Object3D) => b export function checkNameIncludes (obj: Object3D, str: string): boolean { if (obj.name.includes(str)) { + console.log(obj.name); + return true; } else { return false; diff --git a/src/views/screen/R_D_Environment/component/Popover/index.vue b/src/views/screen/R_D_Environment/component/Popover/index.vue index 5ff3b16..eaa8c02 100644 --- a/src/views/screen/R_D_Environment/component/Popover/index.vue +++ b/src/views/screen/R_D_Environment/component/Popover/index.vue @@ -45,9 +45,11 @@ defineExpose({ .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; diff --git a/src/views/screen/R_D_Environment/component/Sence.vue b/src/views/screen/R_D_Environment/component/Sence.vue index 3f4e054..d3d55b3 100644 --- a/src/views/screen/R_D_Environment/component/Sence.vue +++ b/src/views/screen/R_D_Environment/component/Sence.vue @@ -136,13 +136,12 @@ const initModel = () => { const rackList: any[] = []; baseModel.traverse(item => { - console.log(item, 'item'); if (checkIsRack(item)) { rackList.push(item); } }); - console.log(baseModel,rackList, 'rackList------111'); + // console.log(baseModel,rackList, 'rackList------111'); viewer.setRaycasterObjects(rackList); @@ -239,7 +238,7 @@ const onMouseClick = (intersects: THREE.Intersection[]) => { }; function checkIsRack(obj: any): boolean { - return checkNameIncludes(obj, 'rack'); + return checkNameIncludes(obj, 'Door'); } const onMouseMove = (intersects: THREE.Intersection[]) => { @@ -253,7 +252,7 @@ const onMouseMove = (intersects: THREE.Intersection[]) => { let selectedObjectName = ''; const findClickModel = (object: any) => { - if (object.name.includes('rack')) { + if (object.name.includes('Door')) { selectedObjectName = object.name; return; } diff --git a/src/views/screen/R_D_Environment/component/proge.vue b/src/views/screen/R_D_Environment/component/proge.vue index c79207c..a7e9dd0 100644 --- a/src/views/screen/R_D_Environment/component/proge.vue +++ b/src/views/screen/R_D_Environment/component/proge.vue @@ -9,10 +9,15 @@ const prop = defineProps({ data: { type: Object, default: () => { - return { - xData: ['办公室1', '办公室2', '办公室3', '办公室4', '办公室5', '办公室6'], - seriesData: [80, 60, 60, 60, 60, 60] - }; + return [ + { + "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488", + "devName": "噪声监测7", + "label": "noise-7", + "place": null, + "data": 0, + "status": 0 + }] } } }); @@ -23,12 +28,19 @@ const bodyMax = 150; const options = computed(() => { + + let xData = [] + let seriesData = [] + prop.data.forEach((item) => { + xData.push(item.devName); + seriesData.push(item.data); + }); const labelSetting = { show: true, position: 'top', offset: [0, -20], formatter: function (param) { - return prop.data.xData[param.dataIndex] + '\r\n' + prop.data.seriesData[param.dataIndex] + 'dB'; + return xData[param.dataIndex] + '\r\n' + seriesData[param.dataIndex] + 'dB'; }, fontSize: 14, fontFamily: 'Arial', @@ -39,7 +51,7 @@ const options = computed(() => { }, backgroundColor: 'transparent', xAxis: { - data: prop.data.xData, + data: xData, axisTick: { show: false }, axisLine: { show: false }, axisLabel: { show: false } @@ -52,7 +64,9 @@ const options = computed(() => { }, grid: { top: 'center', - height: 230 + height: 230, + left: 0, + right: 0 }, markLine: { z: -100 @@ -68,7 +82,7 @@ const options = computed(() => { itemStyle: { color: '#33FFFF' }, - data: prop.data.seriesData.map((item) => { + data: seriesData.map((item) => { return { value: item }; diff --git a/src/views/screen/R_D_Environment/component/svgFenchen.vue b/src/views/screen/R_D_Environment/component/svgFenchen.vue index 9ae1eaa..2440279 100644 --- a/src/views/screen/R_D_Environment/component/svgFenchen.vue +++ b/src/views/screen/R_D_Environment/component/svgFenchen.vue @@ -12,7 +12,7 @@ diff --git a/src/views/screen/R_D_Environment/component/svgJiaquan.vue b/src/views/screen/R_D_Environment/component/svgJiaquan.vue index 4018945..df05aa3 100644 --- a/src/views/screen/R_D_Environment/component/svgJiaquan.vue +++ b/src/views/screen/R_D_Environment/component/svgJiaquan.vue @@ -12,7 +12,7 @@ diff --git a/src/views/screen/R_D_Environment/component/svgPm10.vue b/src/views/screen/R_D_Environment/component/svgPm10.vue new file mode 100644 index 0000000..0d9e375 --- /dev/null +++ b/src/views/screen/R_D_Environment/component/svgPm10.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/views/screen/R_D_Environment/component/svgPm25.vue b/src/views/screen/R_D_Environment/component/svgPm25.vue new file mode 100644 index 0000000..d0e8095 --- /dev/null +++ b/src/views/screen/R_D_Environment/component/svgPm25.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/views/screen/R_D_Environment/component/svgShidu.vue b/src/views/screen/R_D_Environment/component/svgShidu.vue index bebe1fc..0047519 100644 --- a/src/views/screen/R_D_Environment/component/svgShidu.vue +++ b/src/views/screen/R_D_Environment/component/svgShidu.vue @@ -12,7 +12,7 @@ diff --git a/src/views/screen/R_D_Environment/component/svgTVOC.vue b/src/views/screen/R_D_Environment/component/svgTVOC.vue index 108174b..38d14e0 100644 --- a/src/views/screen/R_D_Environment/component/svgTVOC.vue +++ b/src/views/screen/R_D_Environment/component/svgTVOC.vue @@ -12,7 +12,7 @@ diff --git a/src/views/screen/R_D_Environment/component/svgWendu.vue b/src/views/screen/R_D_Environment/component/svgWendu.vue index d75db82..29a472f 100644 --- a/src/views/screen/R_D_Environment/component/svgWendu.vue +++ b/src/views/screen/R_D_Environment/component/svgWendu.vue @@ -12,7 +12,7 @@ diff --git a/src/views/screen/R_D_Environment/component/svgYanwu.vue b/src/views/screen/R_D_Environment/component/svgYanwu.vue index 2116339..85e7d26 100644 --- a/src/views/screen/R_D_Environment/component/svgYanwu.vue +++ b/src/views/screen/R_D_Environment/component/svgYanwu.vue @@ -9,7 +9,7 @@ diff --git a/src/views/screen/R_D_Environment/component/svgZaosheng.vue b/src/views/screen/R_D_Environment/component/svgZaosheng.vue index 6cc2900..9e6c2de 100644 --- a/src/views/screen/R_D_Environment/component/svgZaosheng.vue +++ b/src/views/screen/R_D_Environment/component/svgZaosheng.vue @@ -15,7 +15,7 @@ diff --git a/src/views/screen/R_D_Environment/index.vue b/src/views/screen/R_D_Environment/index.vue index be8fc42..18e5695 100644 --- a/src/views/screen/R_D_Environment/index.vue +++ b/src/views/screen/R_D_Environment/index.vue @@ -20,9 +20,11 @@
-
- -
{{ item.value + item.unit }}
+
+ + +
{{ item.value + item.unit }}
{{ item.name }}
@@ -48,7 +50,7 @@
- +
@@ -56,14 +58,14 @@
- - - + + + @@ -165,16 +232,22 @@ onMounted(() => { .l-box { position: absolute; top: 100px; - left: 33px; + left: 0px; width: 410px; - height: 950px; + height: 980px; z-index: 2; background: url('/src/assets/images/preview-left.png') center center / 100% 100% no-repeat; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + .lbox1 { width: 100%; height: 316px; } } + .ct-box { position: absolute; top: 100px; @@ -184,12 +257,14 @@ onMounted(() => { display: flex; z-index: 2; justify-content: space-between; + .ct-sensor { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; + .sensor-item { width: 146px; height: 100%; @@ -198,6 +273,7 @@ onMounted(() => { align-items: center; font-size: 14px; color: #fff; + .sensor-icon { width: 75px; height: 75px; @@ -205,31 +281,38 @@ onMounted(() => { } } } + .cb-box { position: absolute; - bottom: 30px; - left: 445px; - width: 1026px; + bottom: 0px; + left: 435px; + width: 1046px; height: 316px; display: flex; z-index: 2; justify-content: space-between; background: url('/src/assets/images/preview-bottom.png') center center / 100% 100% no-repeat; + .cbox { - width: 50%; + width: 48%; height: 100%; } } + .r-box { position: absolute; top: 100px; - right: 38px; - width: 410px; - height: 950px; + right: 0px; + width: 420px; + height: 980px; z-index: 2; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; background: url('/src/assets/images/preview-right.png') center center / 100% 100% no-repeat; - + .rbox-item { width: 100%; height: 316px;