diff --git a/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js index 1bc1528..b0522dd 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js @@ -8,7 +8,6 @@ export const initEcharts1 = (mainRef, chartInstance, data) => { const names = data.map(item => item.NAME); const option = { - color: ["#1A64F8"], tooltip: { trigger: "axis", axisPointer: { diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js index fbecd1d..ae0bcdf 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js +++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js @@ -39,7 +39,6 @@ export const initEcharts2 = (mainRef, chartInstance, data) => { const names = data.map(item => item.name); const option = { - color: ["#1A64F8"], tooltip: { trigger: "axis", axisPointer: { diff --git a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/echarts.js new file mode 100644 index 0000000..f3eaf9a --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/echarts.js @@ -0,0 +1,131 @@ +import * as echarts from "echarts"; + +export const initEcharts1 = (mainRef, chartInstance, data) => { + chartInstance.current = echarts.init(mainRef.current); + + const waitStartData = data.map(item => Number.parseInt(item.WAIT_START)); + const inProgressData = data.map(item => Number.parseInt(item.IN_PROGRESS)); + const names = data.map(item => item.NAME); + + const option = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + }, + legend: { + data: ["待开工项目数", "进行中项目数"], + top: "0%", + right: "0%", + textStyle: { + color: "#fff", + fontSize: 14, + }, + itemWidth: 12, + itemHeight: 10, + }, + dataZoom: [ + { + type: "slider", + height: 6, + bottom: "7%", + show: true, + start: 0, + end: 50, + handleSize: 5, + handleStyle: { + color: "#DCE2E8", + }, + xAxisIndex: [0], + filterMode: "filter", + showDetail: false, + }, + ], + grid: { + left: "10%", + right: "5%", + top: "10%", + bottom: "20%", + }, + xAxis: [ + { + type: "category", + data: names, + axisTick: { + alignWithLabel: true, + }, + axisLabel: { + color: "#fff", + }, + }, + ], + yAxis: { + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + }, + }, + }, + series: [ + { + name: "待开工项目数", + type: "bar", + backgroundStyle: { + color: "rgba(216, 229, 247, 0.55)", + borderRadius: [8, 8, 0, 0], + }, + itemStyle: { + borderRadius: [12, 12, 0, 0], + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: "rgba(0,168,255,0.7)", + }, + { + offset: 0, + color: "#00A8FF", + }, + ]), + }, + barWidth: "10", + data: waitStartData, + }, + { + name: "进行中项目数", + type: "bar", + backgroundStyle: { + color: "rgba(216, 229, 247, 0.55)", + borderRadius: [8, 8, 0, 0], + }, + itemStyle: { + borderRadius: [12, 12, 0, 0], + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 1, + color: "rgba(255,198,124,0.7)", + }, + { + offset: 0, + color: "#FFC67C", + }, + ]), + }, + barWidth: "10", + data: inProgressData, + }, + ], + }; + + chartInstance.current.setOption(option); +}; diff --git a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.js b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.js new file mode 100644 index 0000000..c26e627 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.js @@ -0,0 +1,122 @@ +import { useMount } from "ahooks"; +import { useRef, useState } from "react"; +import CountUp from "react-countup"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import AliPlayer from "zy-react-library/components/Video/AliPlayer"; +import icon1 from "~/assets/images/map_bi/content/ico19.png"; +import Title from "~/pages/Container/Map/components/Content/branchOffice/Title"; +import { initEcharts1 } from "./echarts"; +import "./index.less"; + +function ZhongDian() { + const [block1List, setBlock1List] = useState([ + { label: "项目总数", value: 34, icon: icon1 }, + { label: "待开工项目数", value: 34, icon: icon1 }, + { label: "进行中项目数", value: 34, icon: icon1 }, + ]); + const [block3List, setBlock3List] = useState([ + { projectName: "北京地铁17号线工程", contractor: "中建一局", inspections: 25, hazards: 3, penaltyAmount: 15000 }, + { projectName: "上海浦东国际机场扩建", contractor: "中铁建工", inspections: 32, hazards: 5, penaltyAmount: 25000 }, + { projectName: "广州南沙大桥建设", contractor: "中交一航", inspections: 18, hazards: 2, penaltyAmount: 12000 }, + { projectName: "深圳国际会展中心", contractor: "中建三局", inspections: 45, hazards: 8, penaltyAmount: 35000 }, + { projectName: "杭州亚运会场馆改造", contractor: "中国建筑", inspections: 28, hazards: 4, penaltyAmount: 18000 }, + { projectName: "成都天府国际机场", contractor: "中冶集团", inspections: 38, hazards: 6, penaltyAmount: 28000 }, + { projectName: "武汉长江隧道工程", contractor: "中电建", inspections: 22, hazards: 1, penaltyAmount: 8000 }, + { projectName: "西安高新区基础设施", contractor: "中石化建设", inspections: 41, hazards: 7, penaltyAmount: 32000 }, + { projectName: "南京长江大桥维修", contractor: "中国化学", inspections: 15, hazards: 2, penaltyAmount: 10000 }, + { projectName: "重庆轨道交通5号线", contractor: "中国铁建", inspections: 35, hazards: 4, penaltyAmount: 20000 }, + ]); + + const chartInstance = useRef(null); + const main1Ref = useRef(null); + + useMount(() => { + initEcharts1(main1Ref, chartInstance, [ + { NAME: "中建一局", WAIT_START: "12", IN_PROGRESS: "8" }, + { NAME: "中铁建工", WAIT_START: "15", IN_PROGRESS: "10" }, + { NAME: "中交一航", WAIT_START: "8", IN_PROGRESS: "12" }, + { NAME: "中建三局", WAIT_START: "20", IN_PROGRESS: "15" }, + { NAME: "中国建筑", WAIT_START: "5", IN_PROGRESS: "7" }, + { NAME: "中冶集团", WAIT_START: "18", IN_PROGRESS: "14" }, + { NAME: "中电建", WAIT_START: "10", IN_PROGRESS: "9" }, + { NAME: "中石化建设", WAIT_START: "22", IN_PROGRESS: "18" }, + { NAME: "中国化学", WAIT_START: "7", IN_PROGRESS: "5" }, + { NAME: "中国铁建", WAIT_START: "16", IN_PROGRESS: "13" }, + ]); + + return () => { + if (chartInstance.current) { + chartInstance.current.dispose(); + chartInstance.current = null; + } + }; + }); + + return ( +
+
+ + <div className="options"> + <div className="items"> + { + block1List.map((item, index) => ( + <div className="item" key={index}> + <div className="img"> + <img src={item.icon} alt="" /> + </div> + <div className="info"> + <div className="label">{item.label}</div> + <div className="value"> + <CountUp end={+item.value}></CountUp> + </div> + </div> + </div> + )) + } + </div> + </div> + </div> + <div className="block2"> + <Title title="承包项目情况" /> + <div className="options"> + <div ref={main1Ref} style={{ width: "100%", height: "260px" }} /> + </div> + </div> + <div className="block3"> + <Title title="项目进行情况" /> + <div className="options"> + <div className="table"> + <div className="tr"> + <div className="td">项目名称</div> + <div className="td">承包单位</div> + <div className="td">被检查数</div> + <div className="td">检查发现隐患数</div> + <div className="td">被处罚金额</div> + </div> + <div className="scroll"> + <SeamlessScroll list={block3List} step={0.5}> + {block3List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.projectName}</div> + <div className="td">{item.contractor}</div> + <div className="td">{item.inspections}</div> + <div className="td">{item.hazards}</div> + <div className="td">{item.penaltyAmount}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + <div className="block4"> + <Title title="移动监控情况" /> + <div className="options"> + <AliPlayer source="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" height="150px" isLive /> + </div> + </div> + </div> + ); +} + +export default ZhongDian; diff --git a/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.less b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.less new file mode 100644 index 0000000..5708c54 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/ZhongDian/index.less @@ -0,0 +1,109 @@ +.branch_office_zhongdian { + .block1 { + background-color: rgba(12, 28, 88, 0.4); + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + + .items { + display: flex; + align-items: center; + justify-content: space-around; + + .item { + text-align: center; + color: #fff; + + .img { + margin-bottom: 10px; + + img { + width: 65px; + height: 45px; + } + } + + .info { + .label { + font-size: 14px; + } + + .value { + font-size: 18px; + } + } + } + } + } + } + + .block2 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + } + } + + .block3 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + + .table { + margin-top: 5px; + + .scroll { + height: 155px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1.5fr 1fr; + background-color: rgba(17, 51, 112, 0.8); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + } + } + } + } + } + + .block4 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .options { + padding: 10px 15px; + border: 1px solid; + border-image: linear-gradient(to bottom, + rgba(58, 122, 149, 0), + rgba(58, 122, 149, 1)) 1; + border-top: none; + } + } +} diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index f110526..099f6eb 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/src/pages/Container/Map/components/Content/index.js @@ -12,6 +12,7 @@ import BranchQiXiang from "~/pages/Container/Map/components/Content/branchOffice import BranchRenYuan from "~/pages/Container/Map/components/Content/branchOffice/RenYuan"; import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian"; import BranchXiaoFang from "~/pages/Container/Map/components/Content/branchOffice/XiaoFang"; +import BranchZhongDian from "~/pages/Container/Map/components/Content/branchOffice/ZhongDian"; import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo"; import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi"; import PortIndex from "~/pages/Container/Map/components/Content/port/Index"; @@ -64,6 +65,8 @@ function Content() { return <BranchRenYuan />; if (bottomUtilsCurrentType === "weather") return <BranchQiXiang />; + if (bottomUtilsCurrentType === "project") + return <BranchZhongDian />; }; const renderBranchOfficeContentRight = () => { diff --git a/src/pages/Container/Map/components/Content/port/FengBi/echarts.js b/src/pages/Container/Map/components/Content/port/FengBi/echarts.js index 1bc1528..b0522dd 100644 --- a/src/pages/Container/Map/components/Content/port/FengBi/echarts.js +++ b/src/pages/Container/Map/components/Content/port/FengBi/echarts.js @@ -8,7 +8,6 @@ export const initEcharts1 = (mainRef, chartInstance, data) => { const names = data.map(item => item.NAME); const option = { - color: ["#1A64F8"], tooltip: { trigger: "axis", axisPointer: {