修改内网统计、联系我们

src/military/qz2022.js

@@ -37,7 +37,11 @@ const Apply = Loadable({
 const Chat = Loadable({
   loader: () => import('./qz2022/chat'),
   loading: Loading,
-})
+});
+const Contact = Loadable({
+  loader: () => import('./qz2022/contact'),
+  loading: Loading,
+});
 const Statistics = Loadable({
   loader: () => import('./qz2022/statistics'),
   loading: Loading,
@@ -145,6 +149,12 @@ const Qz2022 = (props) => {
                 () => (<Chat {...props} />)
               }
             ></Route>
+            {/* 联系我们 */}
+            <Route path="/competition/qz2022/contact"
+              render={
+                () => (<Contact {...props} />)
+              }
+            ></Route>
             {/* 数据统计 */}
             <Route path="/competition/qz2022/statistics"
               render={

src/military/qz2022/api.js

@@ -27,6 +27,14 @@ export async function enrollCompetition(data){
   });
 }
 
+// 统计启智2022 竞赛
+export async function stattistics(data){
+  return fetch({
+    url: `${current_main_site_url}/api/competition_infos/qz2022/statistics.json`,
+    method: 'get',
+  });
+}
+
 // 竞赛提交作品
 export async function uploadCompetition(data){
   return fetch({

src/military/qz2022/contact/index.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import contactPng from "../image/contact.png";
+import btn from "../image/btn-right.png";
+import './index.scss';
+import '../../index.scss';
+
+function Contact({ form, showNotification, match, history }) {
+
+
+  return (
+    <div className="contact qz_main clearfix">
+      <div className="contact-top">
+        <img className="contact-png" src={contactPng} ></img>
+        <div className="contact-tit">联系我们</div>
+      </div>
+      <div className="contact-words">
+        <div className="contact-content">
+          <p>主办方：JWJWJW联合参谋部、科学技术委员会</p>
+          <p>协办方：军事科学院、航天科技集团</p>
+        </div>
+        <div className="contact-content">
+          <p>地址：北京市海淀区西三环北路72号</p>
+          <p>Email：osredm@163.com</p>
+          <p>电话：+86-010-66357650</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default Contact;

src/military/qz2022/contact/index.scss

@@ -0,0 +1,31 @@
+.contact {
+  margin: 3rem auto;
+  padding: 1rem 1.5rem;
+  background: #fff;
+  .contact-top{
+    position: relative;
+  }
+  .contact-png{
+    width: 100%;
+  }
+
+  .contact-tit{
+    position: absolute;
+    top:40%;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-size: 1.25rem;
+    font-weight: 700;
+  }
+  .contact-words {
+    padding: 1.5rem;
+  }
+ 
+  .contact-content {
+    text-align: center;
+    font-size: 1rem;
+    line-height: 2rem;
+    margin-bottom: 1rem;
+  }
+}

src/military/qz2022/statistics/EchartBar/index.jsx

@@ -14,8 +14,9 @@ if (clientWidth < 1000) {
 }
 let fontSizeTitle = 1.25 * fontSizeText;
 
+const colorArr = ['#3b7afe', '#fccb42', '#9b80f5']
 
-export default ({ id,className, title, xData, yData }) => {
+export default ({ id, className, title, legendArr, xData, yData }) => {
 
   useEffect(() => {
     let newEchartBar = document.getElementById(id) && echarts.init(document.getElementById(id));
@@ -25,9 +26,9 @@ export default ({ id,className, title, xData, yData }) => {
     let option = {
       grid: {
         left: "3%",
-        top: "15%",
+        top: "12%",
         right: "8%",
-        bottom: 0,
+        bottom: '5%',
         containLabel: true
       },
       title: {
@@ -41,29 +42,44 @@ export default ({ id,className, title, xData, yData }) => {
       tooltip: {
         trigger: "axis",
         axisPointer: {
-          type: "shadow",
+          // type: "shadow",
+          // textStyle: {
+          //   color: "#fff"
+          // }
+          type: 'line',
+          lineStyle:{
+            type:'dotted'
+          },
+        },
+        backgroundColor: 'rgba(255,255,255,0.8)',
         textStyle: {
-            color: "#fff"
+          color: "#333"
         }
       },
+      legend: {
+        data: legendArr,
+        top: '2%',
+        right: "8%",
+        fontSize: fontSizeText,
       },
       xAxis: [{
         type: "category",
+        name: '分赛区',
         data: xData,
-        axisPointer: {
+        // axisPointer: {
-          type: "shadow"
+        //   type: "shadow"
-        },
+        // },
         axisLabel: {
           textStyle: {
             color: textColor,
             fontSize: .75 * fontSizeText
           },
           interval: 0,
-          rotate: 40
+          // rotate: 40
         },
         axisLine: {
           lineStyle: {
-            color: normalColor
+            color: textColor
           }
         },
         axisTick: {
@@ -75,6 +91,7 @@ export default ({ id,className, title, xData, yData }) => {
       }],
       yAxis: [{
         type: "value",
+        name: '报名数',
         minInterval: 1,
         nameTextStyle: {
           color: textColor,
@@ -97,14 +114,19 @@ export default ({ id,className, title, xData, yData }) => {
         },
         splitLine: {
           lineStyle: {
-            color: normalColor
+            color: normalColor,
+            type: 'dotted',
           }
         },
       }],
-      series: [{
+      series: []
+    };
+    yData.forEach((data, i) => {
+      option.series.push({
+        name: legendArr[i],
         type: "bar",
-        data: yData,
+        data: data,
-        barWidth: "60%",
+        barWidth: "20%",
         itemStyle: {
           normal: {
             color: {
@@ -115,38 +137,34 @@ export default ({ id,className, title, xData, yData }) => {
               y2: 1,
               colorStops: [{
                 offset: 0,
-                color: "#deeefe"
+                color: colorArr[i],
               },
               {
                 offset: 1,
-                color: "#2c8bff"
+                color: colorArr[i]
+                // color: '#7988a5'
               }
               ],
               globalCoord: false
             }
           }
         },
-        label: {
+        // label: {
-          show: true,
+        //   show: true,
-          // position: ['-20%', -1.2 * fontSizeText],
+        //   position: "top",
-          position: "top",
+        //   color: '#fff',
-          // color: "#2c8bff",
+        //   fontSize: fontSizeText,
-          color: '#555',
+        //   formatter: function (params) {
-          fontSize: fontSizeText,
+        //     return params.value || ''
-          formatter: function (params) {
+        //   },
-              // var percent = 0;
+        // }
-              // percent = ((params.value / allStaff.num) * 100).toFixed(0);
+      });
-              return params.value || ''
+    });
-              // + '\n' + percent + '%';
-          },
-      }
-      }]
-    };
     newEchartBar && newEchartBar.setOption(option);
   }, [id, title, xData, yData])
 
   return (
-    <div  id={id} key={id} className={className} style={{minHeight:"20vh"}}>
+    <div id={id} key={id} className={className} style={{ minHeight: "20vh" }}>
     </div>
   )
 }

src/military/qz2022/statistics/EchartPie/index.jsx

@@ -12,77 +12,42 @@ if (clientWidth < 1000) {
 } else if (clientWidth > 3000) {
   fontSizeText = 18 + (clientWidth - 3000) / 2000;
 }
-let fontSizeTitle = 1.25 * fontSizeText;
-
-
-export default ({ id,className, title, xData, yData }) => {
 
+export default ({ id, className, title, dataList }) => {
   useEffect(() => {
     let newEchartBar = document.getElementById(id) && echarts.init(document.getElementById(id));
-    let textColor = "#7988a5";
-    let normalColor = "#e8e8ed";
 
     let option = {
-      color: ["#FC4567", "#2F8DF4", "#C25EC4"],
+      color: ["#fccb42", "#3b7afe", "#9b80f5"],
       title: {
         text: "",
-        // left: "center",
-        // top: "50%",
-        // textStyle: {
-        //   fontSize: 22,
-        //   color: textColor,
-        //   fontWeight: "normal",
-        // },
       },
       tooltip: {
         trigger: "item",
       },
       legend: {
-        orient: "vertical",
+        icon: 'circle',
-        right: 20,
+        data: dataList.map((item) => item.name),
-        top: 20,
+        bottom: 1.5 * fontSizeText,
+        fontSize: fontSizeText,
+        itemGap: 20,
+        itemWidth: 8,
       },
       series: [
         {
           type: "pie",
           roseType: "radius",
           radius: ["30%", "60%"],
-          data: [
+          data: dataList,
-            {
-              value: 220,
-              name: "战略方向",
-            },
-            {
-              value: 120,
-              name: "前沿技术",
-            },
-            {
-              value: 189,
-              name: "作战领域",
-            },
-          ],
           label: {
-            normal: {
+            formatter: function (params) {
-              formatter: "{font|{c}}\n{hr|}\n{font|{d}%}",
+              return params.name + '\n\n' + `${params.value} ${params.percent}%`;
-              rich: {
-                font: {
-                  fontSize: 20,
-                  padding: [5, 0],
-                  color: "#fff",
-                },
-                hr: {
-                  height: 0,
-                  borderWidth: 1,
-                  width: "100%",
-                  borderColor: "#fff",
-                },
-              },
             },
+            color:'#000'
           },
           labelLine: {
-            lineStyle: {
+            length: 10,
-              color: "#fff",
+            length2: 60,
-            },
           },
           emphasis: {
             itemStyle: {
@@ -95,10 +60,10 @@ export default ({ id,className, title, xData, yData }) => {
       ],
     };
     newEchartBar && newEchartBar.setOption(option);
-  }, [id, title, xData, yData])
+  }, [id, title, dataList])
 
   return (
-    <div  id={id} key={id} className={className} style={{minHeight:"20vh"}}>
+    <div id={id} key={id} className={className} style={{ minHeight: "20vh" }}>
     </div>
   )
 }

src/military/qz2022/statistics/index.jsx

@@ -1,33 +1,118 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { stattistics } from '../api';
 import './index.scss';
 import '../../index.scss';
-// import EchartBar from './EchartBar';
+import statisticsSum from '../image/statistics-sum.png';
+import statisticsWork from '../image/statistics-work.png';
 import EchartPie from './EchartPie';
+import EchartBar from './EchartBar';
+
+const initPieArr = [
+  {
+    value: 220,
+    name: "战略方向",
+  },
+  {
+    value: 120,
+    name: "前沿技术",
+  },
+  {
+    value: 189,
+    name: "作战领域",
+  },
+];
+
+const initLegendArr = ["战略方向", "前沿技术", "作战领域"];
 
 
-function Statistics({ form, showNotification, match, history }) {
+function Statistics({ showNotification, match, history }) {
+
+  const [pieArr, setPieArr] = useState(initPieArr);
+
+  const [barXData, setBarXData] = useState(['LJLJLJ', 'HJHJHJ', 'KJKJKJ', 'HJJHJJHJJ', 'ZLZYBD', '联勤保障', 'WJWJWJ']);
+  const [legendArr, setLegendArr] = useState(initLegendArr);
+  const [barYData, setBarYData] = useState([[3, 2, 3, 4, 2, 4, 7, 5], [3, 2, 3, 4, 7, 2, 4, 5], [3, 2, 2, 3, 4, 2, 4, 5]]);
+
+  useEffect(() => {
+    stattistics().then(res => {
+      if (res && Array.isArray(res.data)) {
+
+        let pieArrList = [];
+        let xData = [];
+        let yData1 = [], yData2 = [], yData3 = [];
+        let barYDataArr = [];
+        res.data.forEach(i => {
+          i[0]&&xData.push(i[0].split('分赛区')[0]);
+          yData1.push(i[1]);
+          yData2.push(i[2]);
+          yData3.push(i[3]);
+        });
+
+        setLegendArr(res.competition_subs);
+        setBarXData(xData);
+
+        barYDataArr[0] = yData1;
+        barYDataArr[1] = yData2;
+        barYDataArr[2] = yData3;
+        // setBarYData(barYData);
+
+        let yData = [];
+        yData.push(yData1.reduce((pre, current) => { return pre + current }, 0));
+        yData.push(yData2.reduce((pre, current) => { return pre + current }, 0));
+        yData.push(yData3.reduce((pre, current) => { return pre + current }, 0));
+        res.competition_subs.forEach((item, index) => {
+          pieArrList.push({
+            name: item,
+            value: yData[index],
+          })
+        });
+        setPieArr(pieArrList);
+      }
+    });
+  }, []);
+
 
   return (
     <div className="statistics qz_main ">
       <div className="statistics-words">
         <div className="num-item sum">
-          <div className="num-data">竞赛总报名数</div>
+          <img src={statisticsSum} ></img>
+          <div className="item-content">
+            <div className="num-data">12121+</div>
             <div className="num-tit">竞赛总报名数</div>
           </div>
         </div>
-      {/* <div className="echart"> */}
+
+        <div className="num-item work">
+          <img src={statisticsWork} ></img>
+          <div className="item-content">
+            <div className="num-data">1221+</div>
+            <div className="num-tit">竞赛总作品提交数</div>
+          </div>
+        </div>
+      </div>
+
+      {/* 外网 */}
+      {/* <div className="right-echart outside">
+        <h3 className="type-name">综合赛区报名数</h3>
         <EchartPie
           id="network"
           className="echart-box"
+          dataList={pieArr}
         />
-        {/* <EchartBar
+      </div> */}
+
+      {/* 内网 */}
+      <div className="right-echart">
+        <EchartBar
           id="newAddedProjects"
           className="echart-box"
-          title="新项目统计"
+          title=""
-          xData={monthArr}
+          legendArr={legendArr}
-          yData={newAddedProjects}
+          xData={barXData}
-        /> */}
+          yData={barYData}
-      {/* </div> */}
+        />
+      </div>
     </div>
   )
 }

src/military/qz2022/statistics/index.scss

@@ -1,11 +1,69 @@
 .statistics {
   display: flex;
+  margin: 3rem auto;
 
   .statistics-words {
-    width: 16.25%;
+    width: 30%;
     margin-right: 1rem;
   }
+
+  .num-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 12.25rem;
+    background-color: #ffffff;
+
+    &.sum {
+      border: 2px solid #2e5bfe;
+      box-shadow: 0px 3px 12px #ecf0ff;
+      margin-bottom: 1rem;
+
+      .num-data {
+        color: #2e5bfe;
+      }
+    }
+
+    img {
+      width: 5.125rem;
+      margin-right: 1.75rem;
+    }
+
+    .num-data {
+      font-weight: 700;
+      font-size: 3rem;
+      line-height: 1.4em;
+      border-bottom: 1px solid #d7dbe1;
+    }
+
+    .num-tit {
+      color: #090909;
+    }
+  }
+
+  .right-echart {
+    flex: auto;
+    background: #fff;
+
     .echart-box {
-    width: 50vw;
+      width: 100%;
+      height: 100%;
+    }
+
+    &.outside {
+      padding: 0 1.75rem 0 1.25rem;
+
+      .echart-box {
+        height: calc(100% - 3.5rem);
+      }
+    }
+  }
+
+  .type-name {
+    color: #333333;
+    font-size: 1rem;
+    line-height: 3.5rem;
+    border-bottom: 1px solid rgba(153, 153, 153, 0.2);
+    box-sizing: border-box;
   }
 }