新增页面——温湿度检测1

src/pages/smartinspection/components/Inspectiontaskplan/InspectionTaskPlan.less

@@ -103,6 +103,41 @@
   width: 88px;
   height: 36px;
 }
+
+.tabButton {
+  width: 200px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: none;
+  color: black;
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 24px;
+  font-weight: 400;
+  transition: all 0.3s;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  box-shadow: 2px 6px 6.7px 0px rgba(212, 220, 231, 0.3);
+  transform: translateY(0);
+}
+
+.tabButton:hover {
+  transform: translateY(-5px);
+  box-shadow: 3px 8px 12px 0px rgba(212, 220, 231, 0.5);
+}
+
+.tabButton.active {
+  color: white;
+}
+
+.tabButton.inactive {
+  color: black;
+}
+
 .resetBtn{
   background-size:cover;
   background-position:center;

src/pages/smartinspection/components/Inspectiontaskplan/SmartInspectionPlan.js

@@ -5,7 +5,11 @@ import { Title } from "@/pages/inspectiontasks/InspectionTasks";
 import btnImg1 from '@/assets/img/planBtn1.png'
 import btnImg2 from '@/assets/img/planBtn2.png'
 import btnImg3 from '@/assets/img/planBtn3.png'
-import menuInactiveBg from '@/assets/img/3de08b72a292633bddad28950ba6c6d7fa084a23.png'
+import menuInactiveBg1 from '@/assets/img/d368476fbf3b6a5e808b0274d96e1809d945da24.png' // 温度异常检测未激活背景图
+import menuInactiveBg2 from '@/assets/img/3de08b72a292633bddad28950ba6c6d7fa084a23.png' // 温湿度检测未激活背景图
+import menuInactiveBg3 from '@/assets/img/90501c706560228b7b68e4c8f4c9924c490578ad.png' // 跑冒滴漏检测未激活背景图
+import menuInactiveBg4 from '@/assets/img/a4a0367e2a7e14611cc75be2e1a2d51127a4d390.png' // 仪器仪表采集未激活背景图
+import menuInactiveBg5 from '@/assets/img/f729103541513c2e864c1f8a710db1d80125f3e7.png' // 环境监测未激活背景图
 import activeBgImage from '@/assets/img/de55b2b9c8dab34462ff1b044a5a5c9668b11aa4.png'
 import thermalImage from '@/assets/img/03ba6681098742e33bea38c40e3c23f16847dc1f.png'
 
@@ -1558,7 +1562,7 @@ const SmartInspectionContent = () => {
                 return (
                     <div style={{ padding: 20 }}>
                         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
-                            <h2 style={{ margin: 0, color: '#1890ff' }}>实时监测区</h2>
+                            <h2 style={{ margin: 0, color: 'black' }}>| 实时监测区</h2>
                             {/* <div style={{ display: 'flex', gap: 10 }}>
                                 <button style={{
                                     backgroundColor: '#52c41a',
@@ -1851,8 +1855,8 @@ const SmartInspectionContent = () => {
                             startAngle: 180,
                             endAngle: 0,
                             min: 0,
-                            max: 100,
-                            splitNumber: 10,
+                            max: 120,
+                            splitNumber: 6,
                             itemStyle: {
                                 color: 'rgba(4, 95, 94, 0.5)',
                                 shadowColor: 'rgba(4, 95, 94, 0.7)',
@@ -1956,8 +1960,8 @@ const SmartInspectionContent = () => {
                             startAngle: 180,
                             endAngle: 0,
                             min: 0,
-                            max: 100,
-                            splitNumber: 10,
+                            max: 120,
+                            splitNumber: 6,
                             itemStyle: {
                                 color: 'rgba(4, 95, 94, 0.5)',
                                 shadowColor: 'rgba(4, 95, 94, 0.7)',
@@ -2064,13 +2068,14 @@ const SmartInspectionContent = () => {
                                 // border: '1px solid #f0f0f0',
                                 // borderRadius: 8,
                                 // padding: 16,
-                                width: '40%',
+                                width: '35%',
                                 // backgroundColor: '#fafafa'
                                 gap: 20
                             }}>
                                 <div className={styles.dashboardContainer} style={{ width: '100%', height: 700 }}>
                                     <h3 style={{ margin: '16px', fontSize: 16 }}>实时仪表盘</h3>
                                     {/* 温度仪表盘 - 使用React兼容的ECharts组件 */}
+                                    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
                                         <div style={{ marginBottom: 0 }}>
                                             <EChartsGauge id="temperatureGauge" option={temperatureOption} width={450} height={350} />
                                         </div>
@@ -2080,6 +2085,7 @@ const SmartInspectionContent = () => {
                                             <EChartsGauge id="humidityGauge" option={humidityOption} width={450} height={350} />
                                         </div>
                                     </div>
+                                </div>
 
                                 <div className={styles.thresholdConfigContainer} style={{ marginTop: 20, padding: 16 }}>
                                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@@ -2094,7 +2100,7 @@ const SmartInspectionContent = () => {
                                                 value="5°C"
                                                 style={{
                                                     padding: '4px 8px',
-                                                    border: '1px solid #d9d9d9',
+                                                    border: '1px solid rgba(44, 158, 157, 1)',
                                                     borderRadius: 4,
                                                     width: '100%'
                                                 }}
@@ -2107,7 +2113,7 @@ const SmartInspectionContent = () => {
                                                 value="30°C"
                                                 style={{
                                                     padding: '4px 8px',
-                                                    border: '1px solid #d9d9d9',
+                                                    border: '1px solid rgba(44, 158, 157, 1)',
                                                     borderRadius: 4,
                                                     width: '100%'
                                                 }}
@@ -2120,7 +2126,7 @@ const SmartInspectionContent = () => {
                                                 value="90%RH"
                                                 style={{
                                                     padding: '4px 8px',
-                                                    border: '1px solid #d9d9d9',
+                                                    border: '1px solid rgba(44, 158, 157, 1)',
                                                     borderRadius: 4,
                                                     width: '100%'
                                                 }}
@@ -2238,7 +2244,7 @@ const SmartInspectionContent = () => {
     };
 
     return (
-        <div style={{ minHeight: '98vh', backgroundColor: '#fff', borderRadius: 10 }}>
+        <div style={{ minHeight: '98vh', backgroundColor: '#fff', borderRadius: 10, marginBottom: 20 }}>
             <div style={{
                 display: 'flex',
                 justifyContent: 'space-between',
@@ -2272,25 +2278,14 @@ const SmartInspectionContent = () => {
                                 <li key={tab} style={{ marginBottom: 22 }}>
                                     <button
                                         onClick={() => handleTabClick(tab)}
+                                        className={`${styles.tabButton} ${activeTab === tab ? styles.active : styles.inactive}`}
                                         style={{
-                                            width: 200,
-                                            height: 80,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            textAlign: 'center',
-                                            border: 'none',
-                                            // backgroundColor: activeTab === tab ? '#1890ff' : 'transparent',
-                                            color: activeTab === tab ? 'white' : 'black',
-                                            cursor: 'pointer',
-                                            borderRadius: 4,
-                                            fontSize: 24,
-                                            fontWeight: 400,
-                                            transition: 'all 0.3s',
-                                            backgroundImage: activeTab === tab ? `url(${activeBgImage})` : `url(${menuInactiveBg})`,
-                                            backgroundSize: 'cover',
-                                            backgroundPosition: 'center',
-                                            backgroundRepeat: 'no-repeat'
+                                            backgroundImage: activeTab === tab ? `url(${activeBgImage})` :
+                                                tab === '温度异常检测' ? `url(${menuInactiveBg1})` :
+                                                    tab === '温湿度检测' ? `url(${menuInactiveBg2})` :
+                                                        tab === '跑冒滴漏检测' ? `url(${menuInactiveBg3})` :
+                                                            tab === '仪器仪表采集' ? `url(${menuInactiveBg4})` :
+                                                                tab === '环境监测' ? `url(${menuInactiveBg5})` : `url(${menuInactiveBg2})`
                                         }}
                                     >
                                         {tab}