forked from Gitlink/forgeplus-react
看板提交
This commit is contained in:
parent
39cbe4d3c2
commit
2d9118b9bf
|
|
@ -0,0 +1,25 @@
|
|||
import fetch from '../Information/fetch'
|
||||
|
||||
//今日工作态势
|
||||
export function todayWorkSituation() {
|
||||
return fetch({
|
||||
url: `/pms/specialArea/softwareFact/statis/todayWorkSituation`,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
//月、周工作态势
|
||||
export function weekMonthWorkSituation(type) {
|
||||
return fetch({
|
||||
url: `/pms/specialArea/softwareFact/statis/weekMonthWorkSituation?type=${type}`,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
//项目研发状态
|
||||
export function projectSituation() {
|
||||
return fetch({
|
||||
url: `/pms/specialArea/softwareFact/statis/projectSituation`,
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
|
@ -5,39 +5,83 @@ import shidu from "../../img/shidu.png";
|
|||
import ziwaixian from "../../img/ziwaixian.png";
|
||||
|
||||
function CenterPanel(props) {
|
||||
let { timeObj } = props;
|
||||
const [weatherObj, setWetherObj] = useState({});
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
//天气5分钟更新一次
|
||||
getWether();
|
||||
}, 300000);
|
||||
getWether();
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function getWether() {
|
||||
// fxLink 当前数据的响应式页面，便于嵌入网站或应用
|
||||
// now.obsTime 数据观测时间
|
||||
// now.temp 温度，默认单位：摄氏度
|
||||
// now.feelsLike 体感温度，默认单位：摄氏度
|
||||
// now.icon 天气状况的图标代码，另请参考天气图标项目
|
||||
// now.text 天气状况的文字描述，包括阴晴雨雪等天气状态的描述
|
||||
// now.wind360 风向360角度
|
||||
// now.windDir 风向
|
||||
// now.windScale 风力等级
|
||||
// now.windSpeed 风速，公里/小时
|
||||
// now.humidity 相对湿度，百分比数值
|
||||
// now.precip 过去1小时降水量，默认单位：毫米
|
||||
// now.pressure 大气压强，默认单位：百帕
|
||||
// now.vis 能见度，默认单位：公里
|
||||
// now.cloud 云量，百分比数值。可能为空
|
||||
// now.dew 露点温度。可能为空
|
||||
fetch(
|
||||
`https://devapi.qweather.com/v7/weather/now?location=112.87,28.22&key=18a193299e4944a7bf3ccf23b38474c2`
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setWetherObj({
|
||||
text: data.now.text,
|
||||
temp: data.now.temp,
|
||||
windDir: data.now.windDir,
|
||||
humidity: data.now.humidity,
|
||||
});
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
return (
|
||||
<div className="center-panel">
|
||||
<div className="first-section">
|
||||
<div className="content">
|
||||
<img src={duoyun} alt="" srcset="" />
|
||||
<div>多云</div>
|
||||
<div>{weatherObj.text}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="second-section">
|
||||
<div className="content">
|
||||
<img src={shidu} alt="" srcset="" />
|
||||
<div>52℃</div>
|
||||
<div className="content">
|
||||
<img src={ziwaixian} alt="" srcset="" />
|
||||
<div>{weatherObj.temp}℃</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="third-section">
|
||||
<div className="content">
|
||||
<div className="content">
|
||||
<img src={fengsu} alt="" srcset="" />
|
||||
<div>西南风</div>
|
||||
<div>{weatherObj.windDir}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="forth-section">
|
||||
<div className="content">
|
||||
<img src={ziwaixian} alt="" srcset="" />
|
||||
<div>280nm</div>
|
||||
<div className="content">
|
||||
<img src={shidu} alt="" srcset="" />
|
||||
<div>{weatherObj.humidity}%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="center-section">
|
||||
<div>星期四</div>
|
||||
<div>{timeObj.week}</div>
|
||||
<div>
|
||||
<span className="month">03/</span>
|
||||
<span className="date">06</span>
|
||||
<span className="month">{timeObj.month}/</span>
|
||||
<span className="date">{timeObj.day}</span>
|
||||
</div>
|
||||
<div>二月初七</div>
|
||||
<div>{timeObj.lunar}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,41 +1,55 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import right from "../../img/right.png";
|
||||
const firstPanelList = [
|
||||
{ title: "用户需求待评审数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "产品需求待评审数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "最近里程碑倒数天数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "需求纳入计划数", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
let firstPanelList1 = [
|
||||
{ title: "需求待评审数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "任务待完成数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "缺陷待修复数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "测试用例未执行数", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
let firstPanelList2 = [
|
||||
{ title: "本周需求待评审数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "本周任务待完成数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "本周缺陷待修复数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "本周测试用例未执行数", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
|
||||
function FirstPanel (props) {
|
||||
return (
|
||||
<div className="first-panel">
|
||||
<div className="white-panel-out">
|
||||
<div className="white-panel-center">
|
||||
<div className="white-panel-inner">
|
||||
{firstPanelList.map((item, idx) => {
|
||||
return (
|
||||
<div className="panel-item">
|
||||
<div className="panel-item-content">
|
||||
<div className="panel-item-content-left">
|
||||
<img src={right} alt="" srcset="" />
|
||||
<div>{item.title}</div>
|
||||
</div>
|
||||
<div class="panel-item-content-right">
|
||||
<span className="panel-num">{item.num}</span>
|
||||
<span className="panel-unit">{item.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-item-line"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-title">今日产品状态</div>
|
||||
function FirstPanel(props) {
|
||||
const { cardPage } = props;
|
||||
const [firstPanelList, setFirstPanelList] = useState([]);
|
||||
useEffect(() => {
|
||||
let list = cardPage === "1" ? firstPanelList1 : firstPanelList2;
|
||||
setFirstPanelList(list);
|
||||
}, []);
|
||||
return (
|
||||
<div className="first-panel">
|
||||
<div className="white-panel-out">
|
||||
<div className="white-panel-center">
|
||||
<div className="white-panel-inner">
|
||||
{firstPanelList.map((item, idx) => {
|
||||
return (
|
||||
<div className="panel-item">
|
||||
<div className="panel-item-content">
|
||||
<div className="panel-item-content-left">
|
||||
<img src={right} alt="" srcset="" />
|
||||
<div>{item.title}</div>
|
||||
</div>
|
||||
)
|
||||
<div class="panel-item-content-right">
|
||||
<span className="panel-num">{item.num}</span>
|
||||
<span className="panel-unit">{item.unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-item-line"></div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-title">
|
||||
{cardPage === "2" ? "本周完成态势" : "今日项目状态"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FirstPanel
|
||||
export default FirstPanel;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,31 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import right from "../../img/right.png";
|
||||
const forthPanelList = [
|
||||
let forthPanelList1 = [
|
||||
{ title: "昨日新增任务数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "昨日新增缺陷数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "昨日新增需求评审数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "昨日新增缺陷数", num: 8, isNUm: true, unit: "个" },
|
||||
{ title: "昨日新增需求数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "昨日测试执行数", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
|
||||
let forthPanelList2 = [
|
||||
{ title: "本月新增任务数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "本月新增缺陷数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "本月新增需求数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "本月测试执行数", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
function ForthPanel(props) {
|
||||
const { cardPage } = props;
|
||||
const [forthPanelList, setForthPanelList] = useState([]);
|
||||
useEffect(() => {
|
||||
let list = cardPage === "1" ? forthPanelList1 : forthPanelList2;
|
||||
setForthPanelList(list);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="forth-panel">
|
||||
<div className="panel-title">昨日新增工作</div>
|
||||
<div className="panel-title">
|
||||
{cardPage === "2" ? "本月新增工作" : "昨日新增工作"}
|
||||
</div>
|
||||
<div className="white-panel-out">
|
||||
<div className="white-panel-center">
|
||||
<div className="white-panel-inner">
|
||||
|
|
|
|||
|
|
@ -9,44 +9,57 @@ import centerBg from "../../img/center_title_bg.png";
|
|||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Slider from "react-slick";
|
||||
import FirstPanel from "./firstPanel";
|
||||
import SecondPanel from "./secondPanel";
|
||||
import ThirdPanel from "./thirdPanel";
|
||||
import ForthPanel from "./forthPanel";
|
||||
import CenterPanel from "./centerPanel";
|
||||
let focuseWorkList = [
|
||||
{
|
||||
name: "page1",
|
||||
list: [
|
||||
{ num: 1, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 2, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 3, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 4, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 5, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "page2",
|
||||
list: [
|
||||
{ num: 6, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 7, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 8, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 9, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 10, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "page3",
|
||||
list: [
|
||||
{ num: 11, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 12, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 13, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 14, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
{ num: 15, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
],
|
||||
},
|
||||
import RightContent from "./rightContent";
|
||||
import { getLunar } from "../../utils";
|
||||
|
||||
import {
|
||||
getHomePageList,
|
||||
gethomePageDocList,
|
||||
getAllList,
|
||||
getNewsAllList,
|
||||
getVIPLists,
|
||||
getMainInfos,
|
||||
} from "../../../Information/api";
|
||||
// let focuseWorkList = [
|
||||
// {
|
||||
// name: "page1",
|
||||
// list: [
|
||||
// { num: 1, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 2, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 3, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 4, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 5, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: "page2",
|
||||
// list: [
|
||||
// { num: 6, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 7, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 8, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 9, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 10, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// name: "page3",
|
||||
// list: [
|
||||
// { num: 11, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 12, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 13, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 14, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// { num: 15, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
|
||||
const CalendarData = [
|
||||
0x66aaa, 0x4aab5, 0x25d55, 0x52aad, 0x75557, 0x3aaa5, 0xad556, 0x55555,
|
||||
0x5ab6a, 0xb56d5,
|
||||
];
|
||||
|
||||
const monString = "正二三四五六七八九十冬腊";
|
||||
|
||||
const setting = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
|
|
@ -64,20 +77,93 @@ const setting = {
|
|||
};
|
||||
|
||||
function Home(props) {
|
||||
const {} = props;
|
||||
const [currentMonth, setCurrentMonth] = useState("2025年2月");
|
||||
// const [focuseWorkList, setFocuseWorkList] = useState([]);
|
||||
// useEffect(() => {
|
||||
// getWorkList();
|
||||
// }, []);
|
||||
const { newsList } = props;
|
||||
const [currentMonth, setCurrentMonth] = useState("");
|
||||
const [timeObj, setTimeObj] = useState({});
|
||||
const [firstNews, setFirstNews] = useState({});
|
||||
const [focuseWorkList, setFocuseWorkList] = useState([]);
|
||||
|
||||
// const [focuseWorkList, setFocuseWorkList] = useState([]);
|
||||
useEffect(() => {
|
||||
getDay();
|
||||
|
||||
const timer = setInterval(() => {
|
||||
//5分钟更新一次
|
||||
getDay();
|
||||
}, 300000);
|
||||
return () => {
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, []);
|
||||
function getApiData() {
|
||||
//获取接口数据
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (newsList && newsList.length) {
|
||||
// //重点工作
|
||||
let allList = [];
|
||||
newsList.map((item) => {
|
||||
if (item.name === "开源中心要闻") {
|
||||
item.cmsDocList.map((item) => {
|
||||
allList.push(item);
|
||||
});
|
||||
}
|
||||
if (item.name === "开源中心活动") {
|
||||
//要闻
|
||||
setFirstNews(item.cmsDocList[0]);
|
||||
}
|
||||
});
|
||||
allList.map((item, idx) => (item.num = idx + 1));
|
||||
let splitList = []; //五个一组
|
||||
let finalList = [];
|
||||
let allPageNum = (allList.length - (allList.length % 5)) / 5;
|
||||
let num = 0;
|
||||
allList.map((item, idx) => {
|
||||
if (num !== allPageNum) {
|
||||
if (splitList.length < 5) {
|
||||
splitList.push(item);
|
||||
if (splitList.length === 5) {
|
||||
finalList.push(splitList);
|
||||
splitList = [];
|
||||
num += 1;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
splitList.push(item);
|
||||
if (idx === allList.length - 1) {
|
||||
finalList.push(splitList);
|
||||
}
|
||||
}
|
||||
});
|
||||
setFocuseWorkList(finalList);
|
||||
}
|
||||
}, newsList);
|
||||
function getDay() {
|
||||
//获取日期数据
|
||||
const days = [
|
||||
"星期日",
|
||||
"星期一",
|
||||
"星期二",
|
||||
"星期三",
|
||||
"星期四",
|
||||
"星期五",
|
||||
"星期六",
|
||||
];
|
||||
let time = new Date();
|
||||
let year = time.getFullYear();
|
||||
let month = time.getMonth() + 1;
|
||||
let day = time.getDate();
|
||||
let obj = {
|
||||
month: month < 10 ? "0" + month : month.toString(),
|
||||
day: day < 10 ? "0" + day : day.toString(),
|
||||
week: days[time.getDay()],
|
||||
lunar: getLunar(time),
|
||||
};
|
||||
setCurrentMonth(`${year}年${month}月`);
|
||||
setTimeObj(obj);
|
||||
}
|
||||
|
||||
// function getWorkList() {
|
||||
// let workList = [];
|
||||
// }
|
||||
// function getDay(){
|
||||
// let day = '2025年2月'
|
||||
// return day
|
||||
// }
|
||||
return (
|
||||
<div className="home-wrap">
|
||||
<div className="home-left">
|
||||
|
|
@ -85,16 +171,12 @@ function Home(props) {
|
|||
<div class="left-title">要闻概览:</div>
|
||||
<div class="left-subTitle">Overview of important news</div>
|
||||
<div class="news-month">{currentMonth}</div>
|
||||
<div class="news-content-title">
|
||||
IDRL团队/IDRLnet《基于内嵌物理知经.》
|
||||
</div>
|
||||
<div class="news-content-title">{firstNews.name}</div>
|
||||
<img class="news-line" src={newsLine} alt="" srcset="" />
|
||||
<div class="news-pic-wrap">
|
||||
<img class="news-pic" src={bj1} alt="" srcset="" />
|
||||
</div>
|
||||
<div className="news-content">
|
||||
为解决飞行器设计优化过程中物理场快速仿真问题和运行监测阶段物理场精确反演问题，国防科技创新研究院无人系统技术研究中心智能设计与究中心智能设计与
|
||||
<img class="news-pic" src={firstNews.headImg} alt="" srcset="" />
|
||||
</div>
|
||||
<div className="news-content">{firstNews.summary}</div>
|
||||
<div className="point-work">
|
||||
<div className="left-title">重点工作:</div>
|
||||
<div className="left-subTitle">Focus on work</div>
|
||||
|
|
@ -104,14 +186,14 @@ function Home(props) {
|
|||
? focuseWorkList.map((page, idx) => {
|
||||
return (
|
||||
<div className="point-work-page" key={idx}>
|
||||
{page.list.map((item, index) => {
|
||||
{page.map((item, index) => {
|
||||
return (
|
||||
<div className="point-work-item" key={item.num}>
|
||||
<div className="point-work-item-num">
|
||||
{item.num}
|
||||
</div>
|
||||
<div className="point-work-item-content">
|
||||
{item.content}
|
||||
{item.summary}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -137,17 +219,7 @@ function Home(props) {
|
|||
</div>
|
||||
<div className="soft-title">软件工厂工作态势</div>
|
||||
</div>
|
||||
<div className="right-content">
|
||||
<div className="top-section">
|
||||
<FirstPanel />
|
||||
<SecondPanel />
|
||||
</div>
|
||||
<div className="bottom-section">
|
||||
<ThirdPanel />
|
||||
<ForthPanel />
|
||||
</div>
|
||||
<CenterPanel/>
|
||||
</div>
|
||||
<RightContent timeObj={timeObj} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import "slick-carousel/slick/slick.css";
|
||||
import "slick-carousel/slick/slick-theme.css";
|
||||
import Slider from "react-slick";
|
||||
import FirstPanel from "./firstPanel";
|
||||
import SecondPanel from "./secondPanel";
|
||||
import ThirdPanel from "./thirdPanel";
|
||||
import ForthPanel from "./forthPanel";
|
||||
import CenterPanel from "./centerPanel";
|
||||
import {todayWorkSituation,weekMonthWorkSituation} from '../../api'
|
||||
const setting = {
|
||||
dots: false,
|
||||
infinite: true,
|
||||
speed: 2000,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: false,
|
||||
autoplaySpeed: 5000,
|
||||
pauseOnFocus: false,
|
||||
autoplay: true,
|
||||
arrows: false,
|
||||
fade: false,
|
||||
pauseOnHover: false,
|
||||
// prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
|
||||
// nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
|
||||
// afterChange: (index) => setTag(index),
|
||||
};
|
||||
|
||||
function RightContent(props) {
|
||||
const { timeObj } = props;
|
||||
|
||||
useEffect(()=>{
|
||||
getTodayData()
|
||||
getWeekData()
|
||||
getMonthData()
|
||||
},[])
|
||||
|
||||
function getTodayData(){
|
||||
todayWorkSituation()
|
||||
.then(res=>{})
|
||||
}
|
||||
|
||||
function getWeekData(){
|
||||
weekMonthWorkSituation('week')
|
||||
.then(res=>{})
|
||||
}
|
||||
|
||||
function getMonthData(){
|
||||
weekMonthWorkSituation('month')
|
||||
.then(res=>{})
|
||||
}
|
||||
return (
|
||||
<div style={{ width: 1330, height: "100%" }}>
|
||||
<Slider {...setting}>
|
||||
{/* <div key={0}>page1</div>
|
||||
<div key={1}>page2</div>
|
||||
<div key={2}>page3</div> */}
|
||||
<div className="right-content">
|
||||
<div className="top-section">
|
||||
<FirstPanel cardPage="1" />
|
||||
<SecondPanel cardPage="1" />
|
||||
</div>
|
||||
<div className="bottom-section">
|
||||
<ThirdPanel cardPage="1" />
|
||||
<ForthPanel cardPage="1" />
|
||||
</div>
|
||||
<CenterPanel timeObj={timeObj} />
|
||||
</div>
|
||||
<div className="right-content">
|
||||
<div className="top-section">
|
||||
<FirstPanel cardPage="2" />
|
||||
<SecondPanel cardPage="2" />
|
||||
</div>
|
||||
<div className="bottom-section">
|
||||
<ThirdPanel cardPage="2" />
|
||||
<ForthPanel cardPage="2" />
|
||||
</div>
|
||||
<CenterPanel timeObj={timeObj} />
|
||||
</div>
|
||||
</Slider>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightContent;
|
||||
|
|
@ -1,17 +1,32 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import right from "../../img/right.png";
|
||||
|
||||
const secondPanelList = [
|
||||
{ title: "待完成任务数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "待测试数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "Bug待处理数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "待完成迭代数", num: 8, isNUm: true, unit: "个" },
|
||||
let secondPanelList1 = [
|
||||
{ title: "任务最多项目", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "任务最多个人", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "缺陷最多项目", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "缺陷最多个人", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
|
||||
let secondPanelList2 = [
|
||||
{ title: "本周新增任务数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "本周待测试数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "本周Bug待处理数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "本周新增任务最多", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
|
||||
function SecondPanel(props) {
|
||||
const { cardPage } = props;
|
||||
const [secondPanelList, setSecondPanelList] = useState([]);
|
||||
useEffect(() => {
|
||||
let list = cardPage === "1" ? secondPanelList1 : secondPanelList2;
|
||||
setSecondPanelList(list);
|
||||
}, []);
|
||||
return (
|
||||
<div className="second-panel">
|
||||
<div className="panel-title">今日项目状态</div>
|
||||
<div className="panel-title">
|
||||
{cardPage === "2" ? "本周新增态势" : "今日项目状态"}
|
||||
</div>
|
||||
<div className="white-panel-out">
|
||||
<div className="white-panel-center">
|
||||
<div className="white-panel-inner">
|
||||
|
|
|
|||
|
|
@ -1,13 +1,25 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import right from "../../img/right.png";
|
||||
const thirdPanelList = [
|
||||
let thirdPanelList1 = [
|
||||
{ title: "昨日完结任务数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "昨日关闭缺陷数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "昨日需求评审数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "昨日工作之星", num: 8, isNUm: true, unit: "个" },
|
||||
{ title: "昨日最活跃项目", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
|
||||
let thirdPanelList2 = [
|
||||
{ title: "本月完结任务数", num: 50, isNUm: true, unit: "个" },
|
||||
{ title: "本月关闭缺陷数", num: 10, isNUm: true, unit: "个" },
|
||||
{ title: "本月需求评审数", num: 5, isNUm: true, unit: "个" },
|
||||
{ title: "本月最活跃项目", num: 8, isNUm: true, unit: "个" },
|
||||
];
|
||||
function ThirdPanel(props) {
|
||||
const { cardPage } = props;
|
||||
const [thirdPanelList, setThirdPanelList] = useState([]);
|
||||
useEffect(() => {
|
||||
let list = cardPage === "1" ? thirdPanelList1 : thirdPanelList2;
|
||||
setThirdPanelList(list);
|
||||
}, []);
|
||||
return (
|
||||
<div className="third-panel">
|
||||
<div className="white-panel-out">
|
||||
|
|
@ -33,7 +45,9 @@ function ThirdPanel(props) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="panel-title">昨日完结工作</div>
|
||||
<div className="panel-title">
|
||||
{cardPage === "2" ? "本月完结工作" : "昨日完结工作"}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
|
|||
import { Route, Switch } from "react-router-dom";
|
||||
import { withRouter } from "react-router";
|
||||
import centerBg from "../../img/center_title_bg.png";
|
||||
import './index.scss';
|
||||
import ProjectCard from './ProjectCard'
|
||||
import "./index.scss";
|
||||
import ProjectCard from "./ProjectCard";
|
||||
|
||||
function ProjectStatus(props) {
|
||||
const {} = props;
|
||||
|
|
@ -29,16 +29,16 @@ function ProjectStatus(props) {
|
|||
</div>
|
||||
<div class="project-bottom-wrap">
|
||||
<div className="project-list-wrap">
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={false} />
|
||||
<ProjectCard mgRight={true} shadow="shadow-left"/>
|
||||
<ProjectCard mgRight={true} shadow="shadow-center"/>
|
||||
<ProjectCard mgRight={true} shadow="shadow-center"/>
|
||||
<ProjectCard mgRight={true} shadow="shadow-center"/>
|
||||
<ProjectCard mgRight={false} shadow="shadow-right"/>
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={true} />
|
||||
<ProjectCard mgRight={false} />
|
||||
<ProjectCard mgRight={true} shadow="shadow-left" />
|
||||
<ProjectCard mgRight={true} shadow="shadow-center" />
|
||||
<ProjectCard mgRight={true} shadow="shadow-center" />
|
||||
<ProjectCard mgRight={true} shadow="shadow-center" />
|
||||
<ProjectCard mgRight={false} shadow="shadow-right" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.project-wrap {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow-x: scroll;
|
||||
background-image: url(../../img/bj2.png);
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { withRouter } from "react-router";
|
|||
import { ImageLayerOfCommentHOC } from "../../modules/page/layers/ImageLayerOfCommentHOC";
|
||||
import Home from './components/Home/index'
|
||||
import ProjectStatus from './components/ProjectStatus/index'
|
||||
|
||||
import { getNewsAllList, getMainInfos } from '../Information/api';
|
||||
import next from "./img/next.png";
|
||||
import Slider from "react-slick";
|
||||
import './index.scss';
|
||||
|
|
@ -17,21 +17,57 @@ const setting = {
|
|||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
pauseOnDotsHover: true,
|
||||
autoplaySpeed: 2000,
|
||||
pauseOnFocus: false,
|
||||
autoplaySpeed: 15000,
|
||||
// pauseOnFocus: false,
|
||||
autoplay: false,
|
||||
arrows: false,
|
||||
pauseOnHover:false,
|
||||
dotsClass:'fac-dots'
|
||||
// prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
|
||||
// nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
|
||||
// afterChange: (index) => setTag(index),
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
function Index(props){
|
||||
|
||||
const [id,setId] = useState(undefined)
|
||||
const [newsList,setNewsList] = useState([])
|
||||
useEffect(()=>{
|
||||
getId()
|
||||
},[])
|
||||
|
||||
useEffect(()=>{
|
||||
if(id)getNewsList()
|
||||
},[id])
|
||||
|
||||
function getNewsList() {
|
||||
getNewsAllList(id).then(result => {
|
||||
if (result) {
|
||||
let rows = result.data.rows;
|
||||
setNewsList(rows);
|
||||
}
|
||||
}).catch(error => { })
|
||||
}
|
||||
|
||||
function getId(){
|
||||
getMainInfos('xjykyzx').then(result=>{
|
||||
console.log('result', result)
|
||||
if(result){
|
||||
let data = result.data.data;
|
||||
if(data && data.id){
|
||||
setId(data.id);
|
||||
}
|
||||
}
|
||||
}).catch(console.error())
|
||||
}
|
||||
|
||||
return (<div className="softFc-wrap">
|
||||
<Slider {...setting} >
|
||||
<Home newsList={newsList}/>
|
||||
<ProjectStatus/>
|
||||
<Home/>
|
||||
</Slider>
|
||||
</div>)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,43 @@
|
|||
$yellow-color: rgba(246, 216, 176, 1);
|
||||
$blue-color-light: rgba(39, 118, 217, 1);
|
||||
.softFc-wrap {
|
||||
.fac-dots {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height:6px;
|
||||
margin: 0 5px;
|
||||
padding: 0;
|
||||
background-color: #f00;
|
||||
cursor: pointer;
|
||||
button {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 6px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
color: transparent;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.slick-active{
|
||||
background-color: #0f0;
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family: "shuheiTi";
|
||||
src: url("./fonts/AlimamaShuHeiTi-Bold.ttf");
|
||||
|
|
@ -89,8 +126,10 @@ $blue-color-light: rgba(39, 118, 217, 1);
|
|||
.news-line {
|
||||
width: 385px;
|
||||
height: 16px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.news-pic-wrap {
|
||||
margin-top: 5px;
|
||||
width: 379px;
|
||||
height: 205px;
|
||||
background: linear-gradient(
|
||||
|
|
@ -160,6 +199,11 @@ $blue-color-light: rgba(39, 118, 217, 1);
|
|||
padding-left: 5px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -208,6 +252,8 @@ $blue-color-light: rgba(39, 118, 217, 1);
|
|||
}
|
||||
}
|
||||
.right-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 86px;
|
||||
position: relative;
|
||||
.panel-title {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,149 @@
|
|||
/**
|
||||
* 获取某个日期的农历
|
||||
* @parmas {newDate} 日期 年-月-日
|
||||
*/
|
||||
export const getLunar = function (newDate){
|
||||
|
||||
var nyear;
|
||||
var nmonth;
|
||||
var nday = -1;
|
||||
var nwday;
|
||||
var nhrs;
|
||||
var nmin;
|
||||
var nsec;
|
||||
var newDate = newDate;
|
||||
|
||||
var lmonth, lday, lleap; //农历参数
|
||||
|
||||
function Draw() {
|
||||
NewTick();
|
||||
|
||||
//显示时间
|
||||
var s = nyear + '年' + nmonth + '月' + nday + '日 ' + '星期' + cweekday(nwday) + ' ' + shapetime(nhrs, nmin, nsec);
|
||||
s += " 农历" + lmonth + "月" + lday; //农历
|
||||
var lunar_month_day=lmonth + "月" + lday;
|
||||
return lunar_month_day;
|
||||
}
|
||||
|
||||
|
||||
function NewTick() {
|
||||
var noww = newDate ? new Date(newDate) : new Date();
|
||||
if (noww.getDate() != nday) {
|
||||
nyear = noww.getFullYear();
|
||||
nmonth = noww.getMonth() + 1;
|
||||
nwday = noww.getDay();
|
||||
nday = noww.getDate();
|
||||
|
||||
getlunar(); //获取农历
|
||||
}
|
||||
nhrs = noww.getHours();
|
||||
nmin = noww.getMinutes();
|
||||
nsec = noww.getSeconds();
|
||||
}
|
||||
|
||||
|
||||
//辅助函数
|
||||
var hzWeek = new Array("日", "一", "二", "三", "四", "五", "六", "日");
|
||||
function cweekday(wday) {
|
||||
return hzWeek[wday];
|
||||
}
|
||||
function shapetime(vhrs, vmin, vsec) {
|
||||
if (vsec <= 9) vsec = "0" + vsec;
|
||||
if (vmin <= 9) vmin = "0" + vmin;
|
||||
if (vhrs <= 9) vhrs = "0" + vhrs;
|
||||
return vhrs + ":" + vmin + ":" + vsec
|
||||
}
|
||||
|
||||
//农历函数开始
|
||||
var lunarInfo = new Array(0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, 0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, 0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, 0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, 0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, 0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, 0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, 0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, 0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, 0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, //1990
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, 0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, 0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, 0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63);
|
||||
function lYearDays(y) {
|
||||
var i, sum = 348;
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
|
||||
return (sum + leapDays(y));
|
||||
}
|
||||
function leapDays(y) {
|
||||
if (leapMonth(y)) return ((lunarInfo[y - 1900] & 0x10000) ? 30 : 29);
|
||||
else return (0);
|
||||
}
|
||||
function leapMonth(y) {
|
||||
return (lunarInfo[y - 1900] & 0xf);
|
||||
}
|
||||
function monthDays(y, m) {
|
||||
return ((lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29);
|
||||
}
|
||||
function Lunar(y, m, d) {
|
||||
var i, leap = 0,
|
||||
temp = 0;
|
||||
var offset = (Date.UTC(y, m, d) - Date.UTC(1900, 0, 31)) / 86400000;
|
||||
for (i = 1900; i < 2050 && offset > 0; i++) {
|
||||
temp = lYearDays(i);
|
||||
offset -= temp;
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp;
|
||||
i--;
|
||||
}
|
||||
this.year = i;
|
||||
leap = leapMonth(i);
|
||||
this.isLeap = false;
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
if (leap > 0 && i == (leap + 1) && this.isLeap == false) {--i;
|
||||
this.isLeap = true;
|
||||
temp = leapDays(this.year);
|
||||
} else {
|
||||
temp = monthDays(this.year, i);
|
||||
}
|
||||
if (this.isLeap == true && i == (leap + 1)) this.isLeap = false;
|
||||
offset -= temp;
|
||||
}
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) if (this.isLeap) {
|
||||
this.isLeap = false;
|
||||
} else {
|
||||
this.isLeap = true; --i;
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i;
|
||||
}
|
||||
this.month = i;
|
||||
this.day = offset + 1;
|
||||
}
|
||||
var nStr1 = new Array('', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二');
|
||||
var nStr2 = new Array('初', '十', '廿', '卅', '□');
|
||||
function GetcDay(d) {
|
||||
var s;
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '初十';
|
||||
break;
|
||||
case 20:
|
||||
s = '二十';
|
||||
break;
|
||||
case 30:
|
||||
s = '三十';
|
||||
break;
|
||||
default:
|
||||
s = nStr2[Math.floor(d / 10)];
|
||||
s += nStr1[d % 10];
|
||||
break;
|
||||
}
|
||||
return (s);
|
||||
}
|
||||
function GetcMon(m) {
|
||||
if (m == 1) return '正';
|
||||
else return nStr1[m];
|
||||
}
|
||||
function getlunar() {
|
||||
var lObj = new Lunar(nyear, nmonth - 1, nday);
|
||||
lmonth = GetcMon(lObj.month);
|
||||
lday = GetcDay(lObj.day);
|
||||
lleap = lObj.isLeap;
|
||||
if (lleap == 1) {
|
||||
lmonth = "闰" + lmonth;
|
||||
}
|
||||
}
|
||||
//农历函数结束
|
||||
return Draw();
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue