111111

src/components/DashboardLayout/BottomMenu.tsx

@@ -35,11 +35,13 @@ const BottomMenu: React.FC<{
   const navigate = useNavigate();
 
   const menuClicked = (id: string) => {
-    const menuItem = menu.find(m => m.id == id);
+    console.log(id);
-    const url = getMenuUrl(menuItem);
+    if(parseFloat(id)<3){
-
+      const menuItem = menu.find(m => m.id == id);
-    if (url) {
+      const url = getMenuUrl(menuItem);
-      navigate(url);
+      if (url) {
+        navigate(url);
+      }
     }
   }
 

src/views/Sygl/index.less

@@ -46,8 +46,8 @@
   .tqyb-box1{
     width: 100%;
     height: 26vh;
-    background: url("../../../public/assets/jwnqsl.png") 0 0 no-repeat;
+    //background: url("../../../public/assets/jwnqsl.png") 0 0 no-repeat;
-    background-size: contain;
+    //background-size: contain;
   }
   .tqyb-box2{
      width: 100%;

src/views/Sygl/index.tsx

@@ -8,6 +8,8 @@ const SyglPage: React.FC = () => {
 
   const [echartsOptionGxnl, setEchartsOptionGxnl] = useState({});
 
+  const [qslEchart, setQslEchart] = useState({});
+
   useEffect(()=>{
     var echartData = [
       {
@@ -247,6 +249,159 @@ const SyglPage: React.FC = () => {
       series: pieSeries
     };
     setEchartsOptionGxnl(optionGxnl);
+
+    const data0 = [1, 1, 1, 1, 1];
+    const qslOption = {
+      tooltip: {
+        // 在鼠标悬停时触发显示
+        trigger: 'axis',
+      },
+      textStyle: {
+        color: "#C9C9C9",
+      },
+      legend: {
+        data: ['取水量'],
+        type: "scroll",
+        orient: 'vertical',
+        selectedMode: false,
+        right: "40%",
+        top: "2%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 12,
+        },
+      },
+      grid: {
+        containLabel: true,
+        left: "3%",
+        top: "20%",
+        bottom: "0%",
+        right: "0%",
+      },
+      xAxis: {
+        type: "category",
+        data: [
+          "2018",
+          "2019",
+          "2020",
+          "2021",
+          "2022",
+        ],
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#ffffff",
+            opacity: 0.9,
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          margin: 20, //刻度标签与轴线之间的距离。
+          textStyle: {
+            fontFamily: "Microsoft YaHei",
+            color: "#FFF",
+          },
+          fontSize: 12,
+          fontStyle: "bold"
+        },
+      },
+      yAxis: {
+        name: "(m³)",
+        max: 500,
+        min: 0,
+        nameTextStyle: {
+          color: '#fff',
+          opacity: 0.9
+        },
+        type: "value",
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#ffffff",
+            opacity: 0.9,
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(255,255,255,0.3)',
+          }
+        },
+        axisLabel: {
+          textStyle: {
+            fontFamily: "Microsoft YaHei",
+            color: "#FFF",
+          },
+          fontSize: 12,
+        },
+      },
+      series: [
+        {
+          type: "bar",
+          data: [250, 370, 370, 370, 370],
+          name:"取水量",
+          barMaxWidth: "auto",
+          barWidth: 30,
+          itemStyle: {
+            color: {
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              type: "linear",
+              global: false,
+              colorStops: [{
+                offset: 0,
+                color: "#00A9FF",
+              },
+                {
+                  offset: 1,
+                  color: "#66DDFF",
+                },
+              ],
+            },
+          },
+        },
+        // color: [, "#018bc1", "#96e092", "#DE9FB1", "#f06e90", "#f89e92",],
+        {//一蓝底
+          data: data0,
+          type: "pictorialBar",
+          barMaxWidth: "20",
+          symbol: "diamond",
+          color: "#66DDFF",
+          symbolOffset: ['0', "50%"],
+          symbolSize: [30, 10],
+          zlevel: 2,
+          tooltip: {
+            show: false // 不显示数据2的tooltip
+          }
+        },
+        {//一蓝盖
+          data: [250, 370, 370, 370, 370],
+          type: "pictorialBar",
+          barMaxWidth: "20",
+          symbol: "diamond",
+          symbolPosition: "end",
+          color: "#77C9FF",
+          symbolOffset: ['0', "-45%"],
+          symbolSize: [30, 10],
+          zlevel: 2,
+          tooltip: {
+            show: false // 不显示数据2的tooltip
+          }
+        },
+
+      ],
+
+      markArea: {
+        silent: true,
+
+      },
+
+    };
+    setQslEchart(qslOption);
   },[])
 
   return (
@@ -269,6 +424,10 @@ const SyglPage: React.FC = () => {
           </div>
           <div className="tqyb-box1">
             {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
+            <ReactEcharts
+              option={qslEchart}
+              style={{width: "100%", height: 'calc( 100% - 10px )'}}
+            />
           </div>
         </div>
         <div className='box'>

src/views/Zhsy/index.tsx

@@ -130,6 +130,9 @@ const SyglPage: React.FC = () => {
           symbolOffset: ['0', "50%"],
           symbolSize: [30, 10],
           zlevel: 2,
+          tooltip: {
+            show: false // 不显示数据2的tooltip
+          }
         },
         {//一蓝盖
           data: [1796, 717, 2500, 9445, 11345],
@@ -141,6 +144,9 @@ const SyglPage: React.FC = () => {
           symbolOffset: ['0', "-45%"],
           symbolSize: [30, 10],
           zlevel: 2,
+          tooltip: {
+            show: false // 不显示数据2的tooltip
+          }
         },
 
       ],