页面调整

2023-12-21 16:31:50 +08:00 · 2023-12-21 16:31:50 +08:00 · d8c8f4478d
parent fe9456b4ec
commit d8c8f4478d
12 changed files with 152 additions and 161 deletions
--- a/.env.development
+++ b/.env.development
@ -1 +1 @@
-PUBLIC_URL=/xyt_dam
+PUBLIC_URL=/xf_web
--- a/.env.production
+++ b/.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
--- a/public/assets/syfgrkqk.png
+++ b/public/assets/syfgrkqk.png
--- a/public/assets/sygl-map.png
+++ b/public/assets/sygl-map.png
--- a/public/assets/szjc.png
+++ b/public/assets/szjc.png
--- a/public/assets/zhsy-map.png
+++ b/public/assets/zhsy-map.png
--- a/public/index.html
+++ b/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>

--- a/src/views/AppRouters.tsx
+++ b/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 /> },
--- a/src/views/Sygl/index.less
+++ b/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;
--- a/src/views/Sygl/index.tsx
+++ b/src/views/Sygl/index.tsx
@ -80,173 +80,151 @@ const SyglPage: React.FC = () => {
    };
    setEchartsOption(option);

-    let dashedPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAM8AAAAOBAMAAAB6G1V9AAAAD1BMVEX////Kysrk5OTj4+TJycoJ0iFPAAAAG0lEQVQ4y2MYBaNgGAMTQQVFOiABhlEwCugOAMqzCykGOeENAAAAAElFTkSuQmCC';
-    let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF'];
-    let chartData = [
-      {
-      name: "水库：100个水厂",
-      value: 15,
-      unit: '万吨'
-    },
-      {
-        name: "河流：54个水厂",
-        value: 8,
-        unit: '万吨'
+    const optionGxnl = {
+      grid: {
+        top: "22%",
+        bottom: "27%"
      },
-      {
-        name: "塘坝：29个水厂",
-        value: 15,
-        unit: '万吨'
-      },
-      {
-        name: "溪沟：30个水厂",
-        value: 2,
-        unit: '万吨'
-      }
-    ];
-    let arrName = [];
-    let arrValue = [];
-    let sum = 0;
-    let pieSeries:any = [],
-      lineYAxis:any = [];
-
-    // 数据处理
-    chartData.forEach((v, i) => {
-      arrName.push(v.name);
-      arrValue.push(v.value);
-      sum = sum + v.value;
-    })
-
-    // 图表option整理
-    chartData.forEach((v, i) => {
-      pieSeries.push({
-        name: '学历',
-        type: 'pie',
-        clockWise: false,
-        hoverAnimation: false,
-        radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
-        center: ["30%", "50%"],
-        label: {
-          show: false
-        },
-        data: [{
-          value: v.value,
-          name: v.name
-        }, {
-          value: sum - v.value,
-          name: '',
-          itemStyle: {
-            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]
-            }
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          type: "shadow",
+          label: {
+            show: true
+          }
+        }
+      },
+      legend: {
+        data: ["水源总量", "生产总量", "需水总量"],
+        top: "2%",
+        right: "14%",
+        textStyle: {
+          color: "#fff",
+          fontSize: 14
+        }
+      },
+      xAxis: {
+        data: ["朝阳寺镇", "曲江镇", "忠堡镇", "清坪镇", "活龙坪乡", "小乡村", "高乐山镇", "唐崖镇", "大路坝区", "坪坝营镇", "黄金洞乡"],
+        axisLine: {
+          show: true, //隐藏X轴轴线
+          lineStyle: {
+            color: '#fff',
+            width:2
+          },
+        },
+        axisTick: {
+          show: true //隐藏X轴刻度
+        },
+        axisLabel: {
+          show: true,
+          textStyle: {
+            color: "#fff", //X轴文字颜色
+            fontSize: 13
+          },
+          rotate: 60, // 角度值：Number
+          fontSize: 11, // 顺便调小一点字体大小
+        },
+        splitArea: {
+          show: true,
+          areaStyle: {
+            color: ["rgba(250,250,250,0.1)", "rgba(250,250,250,0)"]
          }
        }
-      });
-    })
-
-    const optionGxnl = {
-      color: color,
-      grid: {
-        top: '15%',
-        bottom: '54%',
-        left: "30%",
-        containLabel: false
      },
      yAxis: [{
-        type: 'category',
-        inverse: true,
-        axisLine: {
+        type: "value",
+        name: "(m³)",
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: 13
+        },
+        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#fff',
+            width:2
+          }
+        },
        axisLabel: {
-          formatter: function(params:any) {
-            let item = chartData[params];
-            console.log(item)
-            //@ts-ignore
-            return '{line|}{circle|●}{name|'+ item.name +'}{value|'+ item.value+'}{unit|万吨}'
-          },
-          interval: 0,
-          inside: true,
+          show: true,
          textStyle: {
            color: "#fff",
-            fontSize: 13,
-            rich: {
-              line: {
-                width: 30,
-                height: 4,
-                backgroundColor: {image: dashedPic}
-              },
-              name: {
-                color: '#fff',
-                fontSize: 13,
-              },
-              bd: {
-                color: '#ccc',
-                padding: [0, 5],
-                fontSize: 13,
-              },
-              percent:{
-                color: '#fff',
-                fontSize: 13,
-              },
-              value: {
-                color: '#fff',
-                fontSize: 13,
-                fontWeight: 500,
-                padding: [0, 0, 0, 10]
-              },
-              unit: {
-                fontSize: 13
-              }
+            fontSize: 13
+          }
+        },
+
+      },
+        {
+          type: "value",
+          name: "(m³)",
+          max:500,
+          nameTextStyle: {
+            color: "#fff",
+            fontSize: 13
+          },
+          position: "right",
+          splitLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#fff",//#8C95A6
+              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
-      }],
-      xAxis: [{
-        show: false
-      }],
-      series: pieSeries
+        {
+          name: "生产总量",
+          type: "bar",
+          barWidth: 10,
+          data: [6200, 5800, 5800, 6200, 6000, 6000, 6000, 5200, 6000, 6000, 6200],
+          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">
-            {/*<img src={`${process.env.PUBLIC_URL}/assets/gxzgxnl.png`} alt=""/>*/}
+          {/*<div className="tqyb-box2">
+            <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'>
--- a/src/views/Zhsy/index.less
+++ b/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 {
--- a/src/views/Zhsy/index.tsx
+++ b/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>