diff --git a/src/assets/icons/svg/fenchen.svg b/src/assets/icons/svg/fenchen.svg
new file mode 100644
index 0000000..031acd3
--- /dev/null
+++ b/src/assets/icons/svg/fenchen.svg
@@ -0,0 +1 @@
+<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"><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>
\ No newline at end of file
diff --git a/src/assets/images/box-title.png b/src/assets/images/box-title.png
new file mode 100644
index 0000000..cb13ce0
Binary files /dev/null and b/src/assets/images/box-title.png differ
diff --git a/src/main.js b/src/main.js
index 6dfac31..6940670 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,38 @@ import store from './store'
 import router from './router'
 import directive from './directive' // directive
 
+
+import VECharts from 'vue-echarts'
+import * as echarts from 'echarts/core'
+// 手动引入 ECharts 各模块来减小打包体积
+import {
+  CanvasRenderer
+} from 'echarts/renderers'
+import {
+  PieChart,LineChart,BarChart,CustomChart,GaugeChart
+} from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  ToolboxComponent 
+} from 'echarts/components'
+echarts.use([
+  CanvasRenderer,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  ToolboxComponent,
+  PieChart,
+  LineChart,
+  BarChart,
+  CustomChart,
+  GaugeChart
+]);
+
+
 // 注册指令
 import plugins from './plugins' // plugins
 import { download } from '@/utils/request'
@@ -48,6 +80,7 @@ import BaseDialog from '@/components/BaseDialog'
 const app = createApp(App)
 
 // 全局方法挂载
+app.config.globalProperties.$echarts = echarts
 app.config.globalProperties.useDict = useDict
 app.config.globalProperties.download = download
 app.config.globalProperties.parseTime = parseTime
@@ -67,6 +100,8 @@ app.component('ImagePreview', ImagePreview)
 app.component('RightToolbar', RightToolbar)
 app.component('Editor', Editor)
 app.component('BaseDialog', BaseDialog)
+// 全局注册组件（也可以使用局部注册）
+app.component('v-chart', VECharts)
 
 app.use(router)
 app.use(store)
diff --git a/src/views/screen/R_D_Environment/component/ThreeBG.vue b/src/views/screen/R_D_Environment/component/ThreeBG.vue
index 0812f9a..6971d44 100644
--- a/src/views/screen/R_D_Environment/component/ThreeBG.vue
+++ b/src/views/screen/R_D_Environment/component/ThreeBG.vue
@@ -18,12 +18,12 @@ const init = () => {
     // scene.background = new THREE.Color(null);//0x100c2a
     // scene.background.setAlpha(0);
     camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 2000);
-    camera.position.set(0, 300, 200);
+    camera.position.set(40, 300, 200);
 
     renderer = new THREE.WebGLRenderer({
-    antialias: true,
-    alpha: true
-});
+        antialias: true,
+        alpha: true
+    });
     renderer.setSize(width, height);
     threeContainer.value.appendChild(renderer.domElement);
 
@@ -33,13 +33,13 @@ const init = () => {
         materials.preload();
         objLoader.setMaterials(materials);
         objLoader.load('/src/assets/obj/goats_R&D.obj', function (obj) {
-            var scale = 0.06 / obj.scale.x;
+            var scale = 0.07 / obj.scale.x;
             obj.scale.set(scale, scale, scale);
             model = obj;
             const box = new THREE.Box3().setFromObject(model);
             const size = box.getSize(new THREE.Vector3())
             // console.log(size,'-----');
-            obj.position.set(-size.x * 0.5, -size.y * 0.5, -size.z * 0.5);
+            obj.position.set(-size.x * 0.5, -size.y * 0.1, -size.z * 0.5);
             obj.children.forEach((child) => {
                 const c = child;
                 const cm = c.material;
diff --git a/src/views/screen/R_D_Environment/component/humiture_line.vue b/src/views/screen/R_D_Environment/component/humiture_line.vue
new file mode 100644
index 0000000..b3459e5
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/humiture_line.vue
@@ -0,0 +1,64 @@
+<template>
+    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
+                series: [{
+                    type: '温度',
+                    value: [20, 22, 23, 24, 25, 26, 27]
+                }, {
+                    type: '湿度',
+                    value: [30, 32, 33, 34, 35, 36, 37]
+                }]
+            };
+        }
+    }
+});
+
+const options = computed(() => {
+    let seriesData = [];
+    prop.data.series.forEach(res => {
+        seriesData.push({
+            name: res.type,
+            type: 'line',
+            showSymbol: false,
+            data: prop.data.date.map((key, value) => [key, res.value[value]]),
+            smooth: true,
+        })
+    })
+
+    return {
+        backgroundColor: 'transparent',
+        tooltip: {
+            trigger: 'axis',
+        },
+        
+        grid: {
+            top: "15%",
+            left: "5%",
+            right: "5%",
+            bottom: "5%",
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'time',
+            splitLine: {
+                show: false
+            }
+        },
+        yAxis: {
+            type: 'value',
+        },
+        series: seriesData
+    };
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/screen/R_D_Environment/component/humiture_real.vue b/src/views/screen/R_D_Environment/component/humiture_real.vue
new file mode 100644
index 0000000..cb9f446
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/humiture_real.vue
@@ -0,0 +1,201 @@
+<template>
+    <v-chart :option="options" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const prop = defineProps({
+    value: {
+        type: Object,
+        default: () => {
+            return {
+                Humiture: [{
+                    "devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
+                    "name": "服装军团",
+                    "temp": "18.2",
+                    "humidity": "32.2",
+                    "status": true
+                }],
+                top: { temp: 0, humidity: 0 },
+                bottom: { temp: 0, humidity: 0 }
+            };
+        }
+    }
+});
+
+const options = computed(() => {
+
+    //x轴数据
+    let x = [];
+    //y轴数据
+    let y = { temp: [], humidity: [] };
+
+    prop.value.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: '6%'
+        },
+        grid: {
+            top: "15%",
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+        },
+        color: ["#4992FF", "#7CFFB2", "#FF6E76"],
+        xAxis: {
+            type: "category",
+            data: x,
+            axisLabel: {
+                interval: 0
+            }
+        },
+        yAxis: {
+            name: "温度(°C)/湿度(%RH)",
+            type: "value",
+            boundaryGap: [0, 0.01],
+            axisLabel: {
+                formatter: "{value}",
+            },
+        },
+        series: [
+            {
+                //name: `${'温度'}(°C)(${t('messages.fanwei')}：${value.bottom.temp}°C - ${value.top.temp}°C)`,
+                type: "bar",
+                data: y.temp,
+                barWidth: '30%',
+                itemStyle: {
+                    color: function (params) {
+                        var index_color = params.value;
+                        if (
+                            index_color <= prop.value.bottom.temp ||
+                            index_color >= prop.value.top.temp
+                        ) {
+                            return "#FF6E76";
+                        } else {
+                            return "#4992FF";
+                        }
+                    },
+                },
+                label: {
+                    formatter: "{c} °C",
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "rgb(255,255,255,0.9)",
+                    },
+                },
+                markLine: {
+                    // 设置最大值和最小值
+                    silent: true, //基线显示 隐藏
+                    symbol: "none", // 不显示箭头和圆点
+                    data: [
+                        {
+                            name: '温度',
+                            yAxis: prop.value.bottom.temp,
+                            label: {
+                                formatter: `温度下限值： ${prop.value.bottom.temp} °C`,
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "yellow", // 这儿设置安全基线颜色
+                            },
+                        },
+                        {
+                            name: '温度',
+                            yAxis: prop.value.top.temp,
+                            label: {
+                                formatter: `温度上限值：${prop.value.top.temp} °C`,
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "yellow", // 这儿设置安全基线颜色
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                //name: `${t('messages.HumidityRange')}(%RH)(${t('messages.fanwei')}：${value.bottom.humidity}%RH - ${value.top.humidity}%RH)`,
+                name: `湿度(%RH)(范围：${prop.value.bottom.humidity}%RH - ${prop.value.top.humidity}%RH)`,
+                type: "bar",
+                data: y.humidity,
+                barWidth: '30%',
+                itemStyle: {
+                    color: function (params) {
+                        var index_color = params.value;
+
+                        if (
+                            index_color <= prop.value.bottom.humidity ||
+                            index_color >= prop.value.top.humidity
+                        ) {
+                            return "#FF6E76";
+                        } else {
+                            return "#7CFFB2";
+                        }
+                    },
+                },
+                label: {
+                    formatter: "{c} %RH",
+                    show: true,
+                    position: "top",
+                    textStyle: {
+                        color: "rgb(255,255,255,0.9)",
+                    },
+                },
+                markLine: {
+                    // 设置最大值和最小值
+                    silent: true, //基线显示 隐藏
+                    symbol: "none", // 不显示箭头和圆点
+                    data: [
+                        {
+                            name: "湿度",
+                            yAxis: prop.value.bottom.humidity,
+                            label: {
+                                // formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_down')}：` + value.bottom.humidity + "%RH",
+                                formatter: `湿度下限值：` + prop.value.bottom.humidity + "%RH",
+
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "red", // 这儿设置安全基线颜色
+                            },
+                        },
+                        {
+                            name: "湿度",
+                            yAxis: prop.value.top.humidity,
+                            label: {
+                                // formatter: `${t('messages.HumidityRange')}${t('messages.TemperatureRange_up')}：` + value.top.humidity + "%RH",
+                                formatter: `湿度上限值：` + prop.value.top.humidity + "%RH",
+                                position: "middle",
+                            },
+                            lineStyle: {
+                                color: "red", // 这儿设置安全基线颜色
+                            },
+                        },
+                    ],
+                },
+            },
+            {
+                name: '超标(温湿度未达正常值均为超标)',
+                type: "bar",
+                color: '#FF6E76'
+            }
+        ],
+    };
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/screen/R_D_Environment/component/item.vue b/src/views/screen/R_D_Environment/component/item.vue
new file mode 100644
index 0000000..57c2fca
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/item.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="item-container">
+    <div class="box-title">{{ prop.title }}</div>
+    <div class="content">
+      <slot></slot>      
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+const prop = defineProps({
+  title: {
+    type: String,
+    default: '标题'
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.item-container {
+  width: 100%;
+  height: 100%;
+  .box-title {
+    width: 100%;
+    height: 41px;
+    box-sizing: border-box;
+    padding-left: 25px;
+    font-size: 20px;
+    line-height: 40px;
+    color: #fff;
+    background: url('/src/assets/images/box-title.png') no-repeat center center / 100% 100%;
+  }
+  .content {
+    width: 100%;
+    height: calc(100% - 41px);
+  }
+}
+</style>
diff --git a/src/views/screen/R_D_Environment/component/lineChart.vue b/src/views/screen/R_D_Environment/component/lineChart.vue
new file mode 100644
index 0000000..90538ee
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/lineChart.vue
@@ -0,0 +1,61 @@
+<template>
+    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {};
+        }
+    }
+});
+
+const options = computed(() => {
+    return {
+  tooltip: {
+    trigger: "axis",
+    formatter: function (params) {
+      let tooltipText = '';
+      let xAxisValue = params[0].name; // 获取 x 轴的值
+      params.forEach((item) => {
+        tooltipText += `${item.marker}${item.seriesName}: ${item.value} kWh<br>`;
+      });
+      return `${xAxisValue}<br>${tooltipText}`;
+    }
+  },
+  xAxis: {
+    type: 'category',
+    data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
+  },
+  yAxis: {
+    type: 'value',
+  },
+  series: [
+    {
+      name: "耗电量",
+      data: [820, 932, 901, 934, 1290, 1330, 1320],
+      type: 'line',
+      smooth: true,
+      areaStyle: {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: 'rgba(0, 198, 255, 0.5)' },
+            { offset: 1, color: 'rgba(0, 114, 255, 0.01)' }
+          ]
+        }
+      },
+    }
+  ]
+};
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/screen/R_D_Environment/component/pm.vue b/src/views/screen/R_D_Environment/component/pm.vue
new file mode 100644
index 0000000..d211496
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/pm.vue
@@ -0,0 +1,175 @@
+<template>
+    <v-chart :option="options" theme="dark" style="width: 100%;height: 100%;" />
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const prop = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                date: ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07'],
+                series: [{
+                    type: '温度',
+                    value: [20, 22, 23, 24, 25, 26, 27]
+                }, {
+                    type: '湿度',
+                    value: [30, 32, 33, 34, 35, 36, 37]
+                }]
+            };
+        }
+    }
+});
+
+const options = computed(() => {
+    return {
+        grid: {
+            // 让图表占满容器
+            top: "0px",
+            left: "0px",
+            right: "0px",
+            bottom: "0px",
+        },
+        backgroundColor: "transparent",
+        series: [
+            {
+                type: "gauge",
+                center: ["50%", "90%"],
+                startAngle: 190,
+                endAngle: -10,
+                radius: "50%",
+                min: 0,
+                max: 100,
+                splitNumber: 10,
+                pointer: {
+                    icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+                    length: "12%",
+                    width: 10,
+                    offsetCenter: [0, "-40%"],
+                    itemStyle: {
+                        color: "inherit",
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        width: 8,
+                        color: [
+                            [0.35, "#7CFFB2"],
+                            [0.75, "#FDDD60"],
+                            [1, "#FF6E76"],
+                        ],
+                    },
+                },
+                axisTick: {
+                    distance: 0,
+                    splitNumber: 5,
+                    lineStyle: {
+                        width: 2,
+                        color: "#999",
+                    },
+                },
+                splitLine: {
+                    distance: 5,
+                    length: 8,
+                    lineStyle: {
+                        width: 3,
+                        color: "#999",
+                    },
+                },
+                axisLabel: {
+                    distance: 12,
+                    color: "#999",
+                    fontSize: 10,
+                },
+                anchor: {
+                    show: false,
+                },
+                detail: {
+                    valueAnimation: true,
+                    width: "60%",
+                    lineHeight: 20,
+                    borderRadius: 8,
+                    offsetCenter: [0, "20%"],
+                    fontSize: 15,
+                    fontWeight: "bolder",
+                    formatter: "{value} μg/m3",
+                    color: "inherit",
+                },
+                title: {
+                    // show: false,
+                    offsetCenter: [0, "-20%"],
+                },
+                data: [
+                    {
+                        value: 80,
+                        name: "PM2.5",
+                    },
+                ],
+            },
+            {
+                type: "gauge",
+                center: ["50%", "55%"],
+                startAngle: 200,
+                endAngle: -20,
+                min: 0,
+                max: 200,
+                axisLine: {
+                    lineStyle: {
+                        width: 10,
+                        color: [
+                            [0.35, "#7CFFB2"],
+                            [0.75, "#FDDD60"],
+                            [1, "#FF6E76"],
+                        ],
+                    },
+                },
+                pointer: {
+                    itemStyle: {
+                        color: "inherit",
+                    },
+                },
+                axisTick: {
+                    distance: -10,
+                    length: 6,
+                    lineStyle: {
+                        color: "#fff",
+                        width: 2,
+                    },
+                },
+                splitLine: {
+                    distance: -10,
+                    length: 10,
+                    lineStyle: {
+                        color: "#fff",
+                        width: 4,
+                    },
+                },
+                axisLabel: {
+                    color: "inherit",
+                    distance: 20,
+                    fontSize: 10,
+                },
+                detail: {
+                    valueAnimation: true,
+                    offsetCenter: [0, "20%"],
+                    fontSize: 20,
+                    formatter: "{value} μg/m3",
+                    color: "inherit",
+                },
+                title: {
+                    offsetCenter: [0, "-50%"],
+                },
+                data: [
+                    {
+                        value: 60,
+                        name: "PM10",
+                    },
+                ],
+            },
+        ],
+    };
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/screen/R_D_Environment/component/proge.vue b/src/views/screen/R_D_Environment/component/proge.vue
new file mode 100644
index 0000000..a1ae62c
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/proge.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class=""></div>
+</template>
+
+<script setup>
+
+const bodyMax = 150;
+const labelSetting = {
+  show: true,
+  position: 'top',
+  offset: [0, -20],
+  formatter: function (param) {
+    return ((param.value / bodyMax) * 100).toFixed(0) + '%';
+  },
+  fontSize: 18,
+  fontFamily: 'Arial'
+};
+const markLineSetting = {
+  symbol: 'none',
+  lineStyle: {
+    opacity: 0.3
+  },
+  data: [
+    {
+      type: 'max',
+      label: {
+        formatter: 'max: {c}'
+      }
+    },
+    {
+      type: 'min',
+      label: {
+        formatter: 'min: {c}'
+      }
+    }
+  ]
+};
+option = {
+  tooltip: {
+  },
+  xAxis: {
+    data: ['a', 'b'],
+    axisTick: { show: false },
+    axisLine: { show: false },
+    axisLabel: { show: false }
+  },
+  yAxis: {
+    max: bodyMax,
+    offset: 20,
+    splitLine: { show: false },
+  },
+  grid: {
+    top: 'center',
+    height: 230
+  },
+  markLine: {
+    z: -100
+  },
+  series: [
+    {
+      name: 'typeA',
+      type: 'pictorialBar',
+      symbolClip: true,
+      symbolBoundingData: bodyMax,
+            symbolRepeat: true, //图形是否重复
+            symbolSize: [25, 6], //图形元素的尺寸
+      data: [
+        {
+          value: 80,
+        },
+        {
+          value: 60,
+        }
+      ],
+      z: 10
+    },
+    {
+      name: 'full',
+      type: 'pictorialBar',
+      symbolBoundingData: bodyMax,
+      label: labelSetting,
+      animationDuration: 0,
+            symbolRepeat: true, //图形是否重复
+            symbolSize: [25, 6], //图形元素的尺寸
+      itemStyle: {
+        color: '#ccc'
+      },
+      data: [
+        {
+          value: 100,
+        },{
+          value: 100,
+        }
+        
+      ]
+    }
+  ]
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/screen/R_D_Environment/component/svgFenchen.vue b/src/views/screen/R_D_Environment/component/svgFenchen.vue
new file mode 100644
index 0000000..9ae1eaa
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgFenchen.vue
@@ -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 = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/component/svgJiaquan.vue b/src/views/screen/R_D_Environment/component/svgJiaquan.vue
new file mode 100644
index 0000000..4018945
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgJiaquan.vue
@@ -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 = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/component/svgShidu.vue b/src/views/screen/R_D_Environment/component/svgShidu.vue
new file mode 100644
index 0000000..71956bf
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgShidu.vue
@@ -0,0 +1,37 @@
+<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 { fill } from 'three/src/extras/TextureUtils.js';
+import { ref, onMounted } from 'vue';
+const prop = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/component/svgTVOC.vue b/src/views/screen/R_D_Environment/component/svgTVOC.vue
new file mode 100644
index 0000000..57d14bd
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgTVOC.vue
@@ -0,0 +1,37 @@
+<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 { fill } from 'three/src/extras/TextureUtils.js';
+import { ref, onMounted } from 'vue';
+const prop = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/component/svgWendu.vue b/src/views/screen/R_D_Environment/component/svgWendu.vue
new file mode 100644
index 0000000..63fe219
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgWendu.vue
@@ -0,0 +1,37 @@
+<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 { fill } from 'three/src/extras/TextureUtils.js';
+import { ref, onMounted } from 'vue';
+const prop = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/component/svgYanwu.vue b/src/views/screen/R_D_Environment/component/svgYanwu.vue
new file mode 100644
index 0000000..2116339
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgYanwu.vue
@@ -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 = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/component/svgZaosheng.vue b/src/views/screen/R_D_Environment/component/svgZaosheng.vue
new file mode 100644
index 0000000..f887821
--- /dev/null
+++ b/src/views/screen/R_D_Environment/component/svgZaosheng.vue
@@ -0,0 +1,40 @@
+<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 { fill } from 'three/src/extras/TextureUtils.js';
+import { ref, onMounted } from 'vue';
+const prop = ref({
+    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>
diff --git a/src/views/screen/R_D_Environment/index.vue b/src/views/screen/R_D_Environment/index.vue
index 924bbf0..72119fb 100644
--- a/src/views/screen/R_D_Environment/index.vue
+++ b/src/views/screen/R_D_Environment/index.vue
@@ -1,14 +1,127 @@
 <template>
   <div class="container">
-    <!-- <img id="bg-img" class="img " :src="gitBG"> -->
-    <ThreeBG style="position: absolute;left: 0;top: 0;" />
+    <div class="abs-header">研发中心环境实时监测系统</div>
+    <div class="l-box">
+      <div class="lbox1">
+        <ItemVue title="温湿度">
+          <Humiture />
+        </ItemVue>
+      </div>
+      <div class="lbox1">
+        <ItemVue title="粉尘">
+          <PmVue />
+        </ItemVue>
+      </div>
+      <div class="lbox1">
+        <ItemVue title="温湿度">
+          <LineChart />
+        </ItemVue>
+      </div>
+    </div>
+    <div class="ct-box">
+      <div class="ct-sensor">
+        <div class="sensor-item" v-for="item in sensor_list">
+          <!-- <svg-icon ref="fenchen" icon-class="fenchen" :color="'#469DE9'" class="sensor-icon" /> -->
+          <component  style="width: 75px;height: 75px;margin-top: 10px;" color="#469DE9" :is="item.component" :value="item.value" :unit="item.unit" />
+        </div>
+      </div>
+
+    </div>
+    <div class="cb-box">
+      <div class="cbox">
+        <ItemVue title="温湿度">
+          <LineChart />
+        </ItemVue>
+      </div>
+      <div class="cbox">
+        <ItemVue title="温湿度">
+          <LineChart />
+        </ItemVue>
+      </div>
+    </div>
+    <div class="r-box">
+      <div class="rbox-item">
+        <ItemVue title="温湿度">
+          <LineChart />
+        </ItemVue>
+      </div>
+      <div class="rbox-item">
+        <ItemVue title="温湿度">
+        </ItemVue>
+      </div>
+      <div class="rbox-item">
+        <ItemVue title="温湿度">
+        </ItemVue>
+      </div>
+    </div>
+    
+    <!-- <ThreeBG /> -->
   </div>
 </template>
 
 <script setup>
-import { onMounted } from 'vue';
-import gitBG from '@/assets/images/gif-bg.gif';
-import ThreeBG from './component/ThreeBG.vue';
+import { ref,reactive, onMounted } from 'vue';
+import ThreeBG from './component/threeBG.vue';
+import ItemVue from './component/item.vue';
+import Humiture from './component/humiture_line.vue';
+import PmVue from './component/pm.vue';
+import LineChart from './component/lineChart.vue';
+import SvgFenchen from './component/svgFenchen.vue';
+import SvgJiaquan from './component/svgJiaquan.vue';
+import SvgZaosheng from './component/svgZaosheng.vue';
+import SvgTVOC from './component/svgTVOC.vue';
+import SvgShidu from './component/svgShidu.vue';
+import SvgWendu from './component/svgWendu.vue';
+import SvgYanwu from './component/svgYanwu.vue';
+import { color } from 'echarts';
+
+
+let sensor_list = reactive([
+  {
+    name:'温度',
+    component:SvgWendu,
+    value: 20,
+    unit: '℃'
+  },
+  {
+    name:'湿度',
+    component:SvgShidu,
+    value: 20,
+    unit: '%'
+  },
+  {
+    name:'甲醛',
+    component:SvgJiaquan,
+    value: 20,
+    unit: 'mg/m³'
+  },
+  {
+    name:'TVOC',
+    component:SvgTVOC,
+    value: 20,
+    unit: 'mg/m³'
+  },
+  {
+    name:'噪声',
+    component:SvgZaosheng,
+    value: 20,
+    unit: 'dB'
+  },
+  {
+    name:'烟雾',
+    component:SvgYanwu,
+    value: 20,
+    unit: 'mg/m³'
+  }
+])
+
+
+
+
+
+onMounted(() => {
+  
+});
 </script>
 
 <style lang="scss" scoped>
@@ -26,13 +139,84 @@ import ThreeBG from './component/ThreeBG.vue';
   /* 或者其他你需要的大小设置 */
   background-position: center;
 
-  .bg-img {
+  .abs-header {
     width: 100%;
-    height: 100%;
+    height: 80px;
     position: absolute;
+    top: 28px;
     left: 0;
-    top: 0;
-    z-index: -1;
+    right: 0;
+    text-align: center;
+    font-size: 36px;
+    font-weight: 700;
+    color: #00c6ff;
+  }
+
+  .l-box {
+    position: absolute;
+    top: 100px;
+    left: 33px;
+    width: 410px;
+    height: 950px;
+
+    .lbox1 {
+      width: 100%;
+      height: 316px;
+    }
+  }
+  .ct-box {
+    position: absolute;
+    top: 100px;
+    left: 445px;
+    width: 1026px;
+    height: 180px;
+    display: flex;
+    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%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .sensor-icon {
+          width: 75px;
+          height: 75px;
+        }
+      }
+    }
+  }
+  .cb-box {
+    position: absolute;
+    bottom: 30px;
+    left: 445px;
+    width: 1026px;
+    height: 316px;
+    display: flex;
+    justify-content: space-between;
+    .cbox {
+      width: 50%;
+      height: 100%;
+
+    }
+  }
+  .r-box {
+    position: absolute;
+    top: 100px;
+    right: 38px;
+    width: 410px;
+    height: 950px;
+    
+    .rbox-item {
+      width: 100%;
+      height: 316px;
+
+    }
   }
 }
 </style>