页面调整

.env.development

@@ -1 +1 @@
-PUBLIC_URL=/xyt_dam
+PUBLIC_URL=/xf_web

.env.production

@@ -1,2 +1,2 @@
 GENERATE_SOURCEMAP=false
-PUBLIC_URL=http://local.gunshiiot.com:19080/dam
+PUBLIC_URL=https://owrres.oss-cn-shenzhen.aliyuncs.com/xf-web

public/index.html

@@ -22,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title></title>
+  <title>咸丰县农村安全饮水智慧平台</title>
 
 </head>
 

src/views/AppRouters.tsx

@@ -21,7 +21,7 @@ const AppRouters: React.FC = () => {
   }, [dispatch]);
 
   let element = useRoutes([
-    { path: '/', element: <Navigate to="/mgr/sygl" /> },
+    { path: '/', element: <Navigate to="/mgr/zhsy" /> },
     {
       path: '/mgr', element: <DashboardLayout />, children: [
         { path: 'zhsy', element: <ZhsyPage /> },

src/views/Sygl/index.less

@@ -56,7 +56,7 @@
      background-size: cover;
    }
   .tqyb-box3{
-    width: 100%;
+    width: 96%;
     height: 26vh;
     background: url("../../../public/assets/szjc.png") 0 0 no-repeat;
     background-size: cover;

src/views/Sygl/index.tsx

@@ -80,173 +80,151 @@ const SyglPage: React.FC = () => {
     };
     setEchartsOption(option);
 
-    let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
+    const optionGxnl = {
-    let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
+      grid: {
-    let chartData = [
+        top: "22%",
-      {
+        bottom: "27%"
-      name: "水库：100个水厂",
-      value: 15,
-      unit: '万吨'
-    },
-      {
-        name: "河流：54个水厂",
-        value: 8,
-        unit: '万吨'
       },
-      {
+      tooltip: {
-        name: "塘坝：29个水厂",
+        trigger: "axis",
-        value: 15,
+        axisPointer: {
-        unit: '万吨'
+          type: "shadow",
-      },
+          label: {
-      {
+            show: true
-        name: "溪沟：30个水厂",
+          }
-        value: 2,
+        }
-        unit: '万吨'
+      },
-      }
+      legend: {
-    ];
+        data: ["水源总量", "生产总量", "需水总量"],
-    let arrName = [];
+        top: "2%",
-    let arrValue = [];
+        right: "14%",
-    let sum = 0;
+        textStyle: {
-    let pieSeries:any = [],
+          color: "#fff",
-      lineYAxis:any = [];
+          fontSize: 14
-
+        }
-    // 数据处理
+      },
-    chartData.forEach((v, i) => {
+      xAxis: {
-      arrName.push(v.name);
+        data: ["朝阳寺镇", "曲江镇", "忠堡镇", "清坪镇", "活龙坪乡", "小乡村", "高乐山镇", "唐崖镇", "大路坝区", "坪坝营镇", "黄金洞乡"],
-      arrValue.push(v.value);
+        axisLine: {
-      sum = sum + v.value;
+          show: true, //隐藏X轴轴线
-    })
+          lineStyle: {
-
+            color: '#fff',
-    // 图表option整理
+            width:2
-    chartData.forEach((v, i) => {
+          },
-      pieSeries.push({
+        },
-        name: '学历',
+        axisTick: {
-        type: 'pie',
+          show: true //隐藏X轴刻度
-        clockWise: false,
+        },
-        hoverAnimation: false,
+        axisLabel: {
-        radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+          show: true,
-        center: ["30%", "50%"],
+          textStyle: {
-        label: {
+            color: "#fff", //X轴文字颜色
-          show: false
+            fontSize: 13
-        },
+          },
-        data: [{
+          rotate: 60, // 角度值：Number
-          value: v.value,
+          fontSize: 11, // 顺便调小一点字体大小
-          name: v.name
+        },
-        }, {
+        splitArea: {
-          value: sum - v.value,
+          show: true,
-          name: '',
+          areaStyle: {
-          itemStyle: {
+            color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
-            color: "rgba(0,0,0,0)"
-          }
-        }]
-      });
-      pieSeries.push({
-        name: '',
-        type: 'pie',
-        silent: true,
-        z: 1,
-        clockWise: false, //顺时加载
-        hoverAnimation: false, //鼠标移入变大
-        radius: [65 - i * 15 + '%',57 - i * 15 + '%'],
-        center: ["30%", "50%"],
-        label: {
-          show: false
-        },
-        data: [{
-          value: 7.5,
-          itemStyle: {
-            color: "#E3F0FF"
-          }
-        }, {
-          value: 2.5,
-          name: '',
-          itemStyle: {
-            color: "rgba(0,0,0,0)"
-          }
-        }]
-      });
-      //@ts-ignore
-      v.percent = (v.value / sum * 100).toFixed(1) + "%";
-      lineYAxis.push({
-        value: i,
-        textStyle: {
-          rich: {
-            circle: {
-              color: color[i],
-              padding: [0, 5]
-            }
           }
         }
-      });
-    })
-
-    const optionGxnl = {
-      color: color,
-      grid: {
-        top: '15%',
-        bottom: '54%',
-        left: "30%",
-        containLabel: false
       },
       yAxis: [{
-        type: 'category',
+        type: "value",
-        inverse: true,
+        name: "(m³)",
-        axisLine: {
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 13
+        },
+        splitLine: {
           show: false
         },
         axisTick: {
           show: false
         },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff',
+            width:2
+          }
+        },
         axisLabel: {
-          formatter: function(params:any) {
+          show: true,
-            let item = chartData[params];
-            console.log(item)
-            //@ts-ignore
-            return '{line|}{circle|●}{name|'+ item.name +'}{value|'+ item.value+'}{unit|万吨}'
-          },
-          interval: 0,
-          inside: true,
           textStyle: {
             color: "#fff",
-            fontSize: 13,
+            fontSize: 13
-            rich: {
+          }
-              line: {
+        },
-                width: 30,
+
-                height: 4,
+      },
-                backgroundColor: {image: dashedPic}
+        {
-              },
+          type: "value",
-              name: {
+          name: "(m³)",
-                color: '#fff',
+          max:500,
-                fontSize: 13,
+          nameTextStyle: {
-              },
+            color: "#fff",
-              bd: {
+            fontSize: 13
-                color: '#ccc',
+          },
-                padding: [0, 5],
+          position: "right",
-                fontSize: 13,
+          splitLine: {
-              },
+            show: false
-              percent:{
+          },
-                color: '#fff',
+          axisTick: {
-                fontSize: 13,
+            show: false
-              },
+          },
-              value: {
+          axisLine: {
-                color: '#fff',
+            show: false
-                fontSize: 13,
+          },
-                fontWeight: 500,
+          axisLabel: {
-                padding: [0, 0, 0, 10]
+            show: true,
-              },
+            textStyle: {
-              unit: {
+              color: "#fff",//#8C95A6
-                fontSize: 13
+              fontSize: 13
-              }
+            }
+          }
+        }
+      ],
+      series: [
+        {
+          name: "水源总量",
+          type: "bar",
+          barWidth: 10,
+          data: [5800, 5800, 5800, 6400, 6100, 6100, 6100, 5500, 6100, 6100, 6400],
+          itemStyle: {
+            normal: {
+              color: "#006DC2",
+              barBorderRadius: [0, 0, 0, 0]
             }
           },
-          show: true
         },
-        data: lineYAxis
+        {
-      }],
+          name: "生产总量",
-      xAxis: [{
+          type: "bar",
-        show: false
+          barWidth: 10,
-      }],
+          data: [6200, 5800, 5800, 6200, 6000, 6000, 6000, 5200, 6000, 6000, 6200],
-      series: pieSeries
+          itemStyle: {
+            normal: {
+              color: "#18B586",
+              barBorderRadius: [0, 0, 0, 0]
+            }
+          },
+        },
+        {
+          name: "需水总量",
+          type: "line",
+          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+          smooth: false, //平滑曲线显示
+          showSymbol: false,
+          lineStyle: {
+            color: "#FFD700",
+            width:1,
+          },
+          data: [340, 330, 330, 380, 340, 320, 340, 300, 340, 320, 340]
+        }
+      ]
     };
     setEchartsOptionGxnl(optionGxnl);
 
@@ -440,7 +418,7 @@ const SyglPage: React.FC = () => {
         </div>
       </div>
 
-      <div className='center-map'>
+      {/*<div className='center-map'>
         <iframe
           src="http://127.0.0.1:8080/source.html"
           width="100%"
@@ -448,6 +426,10 @@ const SyglPage: React.FC = () => {
           frameBorder={0}//边框设置
           scrolling="no"//滚动设置
         ></iframe>
+      </div>*/}
+
+      <div className='map'>
+        <img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/sygl-map.png`} alt=""/>
       </div>
 
       <div className='right-box'>
@@ -455,8 +437,15 @@ const SyglPage: React.FC = () => {
           <div className='box-title'>
             <div className='title-item'>各乡镇供需能力</div>
           </div>
-          <div className="tqyb-box2">
+          {/*<div className="tqyb-box2">
-            {/*<img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>*/}
+            <img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>
+          </div>*/}
+          <div className="tqyb-box1">
+            {/*<img src={`${process.env.PUBLIC_URL}/assets/jwnqsl.png`} alt=""/>*/}
+            <ReactEcharts
+              option={echartsOptionGxnl}
+              style={{width: "100%", height: 'calc( 100% - 10px )'}}
+            />
           </div>
         </div>
         <div className='box'>

src/views/Zhsy/index.less

@@ -37,12 +37,14 @@
 .title-item {
   margin-right: 20px;
   font-family: 'titleFamily', sans-serif; /* 使用自定义字体 */
+  font-size: 18px;
 }
 
 .title-items {
   margin-right: 20px;
   color: #999;
   font-family: 'titleFamily', sans-serif; /* 使用自定义字体 */
+  font-size: 18px;
 }
 
 .items-active {
@@ -143,7 +145,7 @@
 
 .box3-item-img img {
   width: 50px;
-  margin-right: 10px;
+  margin-right: 5px;
 }
 
 .box3-item-data-top {

src/views/Zhsy/index.tsx

@@ -491,7 +491,7 @@ const SyglPage: React.FC = () => {
       </div>
 
       <div className='map'>
-        <img src={`${process.env.PUBLIC_URL}/assets/map.png`} alt=""/>
+        <img style={{width:"100%",transform:"scale(2.6)",marginTop:"60px"}} src={`${process.env.PUBLIC_URL}/assets/zhsy-map.png`} alt=""/>
       </div>
 
     </div>