diff --git a/src/pages/Container/Map/components/Content/branchOffice/FengBi/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/FengBi/echarts.js new file mode 100644 index 0000000..b0522dd --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/FengBi/echarts.js @@ -0,0 +1,131 @@ +import * as echarts from "echarts"; + +export const initEcharts1 = (mainRef, chartInstance, data) => { + chartInstance.current = echarts.init(mainRef.current); + + const inData = data.map(item => Number.parseInt(item.IN)); + const outData = data.map(item => Number.parseInt(item.OUT)); + 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(121,103,255,0.7)", + }, + { + offset: 0, + color: "#7967FF", + }, + ]), + }, + barWidth: "10", + data: inData, + }, + { + 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: outData, + }, + ], + }; + + chartInstance.current.setOption(option); +}; diff --git a/src/pages/Container/Map/components/Content/branchOffice/FengBi/index.js b/src/pages/Container/Map/components/Content/branchOffice/FengBi/index.js new file mode 100644 index 0000000..2b5a379 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/FengBi/index.js @@ -0,0 +1,180 @@ +import { useMount } from "ahooks"; +import { useRef, useState } from "react"; +import CountUp from "react-countup"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import icon29 from "~/assets/images/map_bi/content/icon29.png"; +import icon30 from "~/assets/images/map_bi/content/icon30.png"; +import icon32 from "~/assets/images/map_bi/content/icon32.png"; +import Title from "~/pages/Container/Map/components/Content/branchOffice/Title"; +import { initEcharts1 } from "./echarts"; +import "./index.less"; + +const block2OptionsNavList = ["人员", "车辆"]; +const block3OptionsNavList = ["人员", "车辆"]; + +function FengBi() { + const [block1List, setBlock1List] = useState([ + { img: icon29, title: "堆场区", count1: 123, count2: 45 }, + { img: icon30, title: "码头区", count1: 141, count2: 43 }, + ]); + const [block2Index, setBlock2Index] = useState(0); + const [block3Index, setBlock3Index] = useState(0); + const [block3List, setBlock3List] = useState([ + { NAME: "零号门", IN: "0", OUT: "0" }, + { NAME: "一号门", IN: "15", OUT: "12" }, + { NAME: "二号门", IN: "8", OUT: "10" }, + { NAME: "三号门", IN: "22", OUT: "18" }, + { NAME: "四号门", IN: "5", OUT: "7" }, + { NAME: "五号门", IN: "30", OUT: "25" }, + { NAME: "六号门", IN: "12", OUT: "14" }, + { NAME: "七号门", IN: "18", OUT: "16" }, + { NAME: "八号门", IN: "9", OUT: "11" }, + { NAME: "九号门", IN: "25", OUT: "20" }, + ]); + + const chartInstance = useRef(null); + const main1Ref = useRef(null); + + useMount(() => { + initEcharts1(main1Ref, chartInstance, [ + { NAME: "零号门", IN: "0", OUT: "0" }, + { NAME: "一号门", IN: "15", OUT: "12" }, + { NAME: "二号门", IN: "8", OUT: "10" }, + { NAME: "三号门", IN: "22", OUT: "18" }, + { NAME: "四号门", IN: "5", OUT: "7" }, + { NAME: "五号门", IN: "30", OUT: "25" }, + { NAME: "六号门", IN: "12", OUT: "14" }, + { NAME: "七号门", IN: "18", OUT: "16" }, + { NAME: "八号门", IN: "9", OUT: "11" }, + { NAME: "九号门", IN: "25", OUT: "20" }, + ]); + + return () => { + if (chartInstance.current) { + chartInstance.current.dispose(); + chartInstance.current = null; + } + }; + }); + + const block2OptionsClick = (index) => { + if (index === block2Index) + return; + setBlock2Index(index); + }; + + const block3OptionsClick = (index) => { + if (index === block3Index) + return; + setBlock3Index(index); + }; + + return ( +
+
+ + <div className="options"> + { + block1List.map((item, index) => ( + <div className="option" key={index}> + <div className="img"> + <img src={item.img} alt="" /> + </div> + <div className="infos"> + <div className="title">{item.title}</div> + <div className="info"> + <div> + <div className="label">人数</div> + <div className="value"> + <CountUp end={+item.count1}></CountUp> + </div> + </div> + <div> + <div className="label">车辆数</div> + <div className="value"> + <CountUp end={+item.count2}></CountUp> + </div> + </div> + </div> + </div> + <div className="corner-img top-left-img"> + <img src={icon32} alt="" /> + </div> + <div className="corner-img top-right-img"> + <img src={icon32} alt="" /> + </div> + <div className="corner-img bottom-left-img"> + <img src={icon32} alt="" /> + </div> + <div className="corner-img bottom-right-img"> + <img src={icon32} alt="" /> + </div> + </div> + )) + } + </div> + </div> + <div className="block2"> + <Title + title="封闭区域进出情况统计" + extra={( + <div className="tabs"> + {block2OptionsNavList.map((item, index) => ( + <div + key={index} + className={`tab ${index === block2Index ? "active" : ""}`} + onClick={() => block2OptionsClick(index)} + > + {item} + </div> + ))} + </div> + )} + /> + <div className="options"> + <div ref={main1Ref} style={{ width: "100%", height: "300px" }} /> + </div> + </div> + <div className="block3"> + <Title + title="封闭区域进出情况统计" + extra={( + <div className="tabs"> + {block3OptionsNavList.map((item, index) => ( + <div + key={index} + className={`tab ${index === block3Index ? "active" : ""}`} + onClick={() => block3OptionsClick(index)} + > + {item} + </div> + ))} + </div> + )} + /> + <div className="options"> + <div className="table"> + <div className="tr"> + <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.NAME}</div> + <div className="td">{item.IN}</div> + <div className="td">{item.OUT}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + </div> + ); +} + +export default FengBi; diff --git a/src/pages/Container/Map/components/Content/branchOffice/FengBi/index.less b/src/pages/Container/Map/components/Content/branchOffice/FengBi/index.less new file mode 100644 index 0000000..1a10a44 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/FengBi/index.less @@ -0,0 +1,175 @@ +.branch_office_fengbi { + .tabs-style() { + display: flex; + + .tab { + background-color: rgba(36, 115, 239, 0.27); + padding: 2px 12px; + border-radius: 2px; + color: #fff; + font-size: 12px; + border: 1px solid #5d718c; + cursor: pointer; + + &.active { + background-color: #2473ef; + border: 1px solid #2473ef; + } + } + } + + .block1 { + background-color: rgba(12, 28, 88, 0.4); + + .options { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + gap: 10px 6px; + 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; + + + .option { + flex-basis: calc(50% - 10px); + background-color: rgba(1, 56, 154, 0.5); + border: 1px solid rgba(32, 145, 243, 0.36); + padding: 5px; + color: #fff; + display: flex; + align-items: center; + font-size: 12px; + position: relative; + + .img { + img { + width: 57px; + height: 56px; + } + } + + .infos { + margin-left: 20px; + text-align: center; + + .title { + color: #0096FF; + font-size: 14px; + font-weight: bold; + } + + .info { + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + } + } + + .corner-img { + position: absolute; + width: 12px; + height: 12px; + + &.top-left-img { + top: -9px; + left: -4px; + } + + &.top-right-img { + transform: rotate(90deg); + top: -4px; + right: -9px; + } + + &.bottom-left-img { + transform: rotate(270deg); + bottom: -4px; + left: -9px; + } + + &.bottom-right-img { + transform: rotate(180deg); + bottom: -9px; + right: -4px; + } + } + } + } + } + + .block2 { + background-color: rgba(12, 28, 88, 0.4); + margin-top: 10px; + + .tabs { + .tabs-style(); + } + + .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; + + .tabs { + .tabs-style(); + } + + .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 { + .scroll { + height: 350px; + overflow-y: hidden; + + .tr { + &:nth-child(odd) { + background-color: transparent; + } + } + } + + .tr { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + background-color: rgba(42, 86, 158, 0.53); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + + &.green { + color: #7ccf41; + } + + &.yellow { + color: #ffcb05; + } + } + } + } + } + } +} diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index 099f6eb..214c8b2 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/src/pages/Container/Map/components/Content/index.js @@ -5,6 +5,7 @@ import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.pn import collapseMenuBg2 from "~/assets/images/map_bi/content/collapse_menu_bg2.png"; import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList"; import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList"; +import BranchFengBi from "~/pages/Container/Map/components/Content/branchOffice/FengBi"; import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft"; import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight"; import BranchMenJin from "~/pages/Container/Map/components/Content/branchOffice/MenJin"; @@ -67,6 +68,8 @@ function Content() { return <BranchQiXiang />; if (bottomUtilsCurrentType === "project") return <BranchZhongDian />; + if (bottomUtilsCurrentType === "closedArea") + return <BranchFengBi />; }; const renderBranchOfficeContentRight = () => { diff --git a/src/pages/Container/Map/components/Content/port/FengBi/index.js b/src/pages/Container/Map/components/Content/port/FengBi/index.js index 219a466..d6a67c2 100644 --- a/src/pages/Container/Map/components/Content/port/FengBi/index.js +++ b/src/pages/Container/Map/components/Content/port/FengBi/index.js @@ -15,9 +15,9 @@ const block3OptionsNavList = ["人员", "车辆"]; function FengBi() { const [block1List, setBlock1List] = useState([ - { img: icon29, title: "堆场区", count1: 0, count2: 0 }, - { img: icon30, title: "码头区", count1: 0, count2: 0 }, - { img: icon31, title: "翻控区", count1: 0, count2: 0 }, + { img: icon29, title: "堆场区", count1: 123, count2: 45 }, + { img: icon30, title: "码头区", count1: 141, count2: 43 }, + { img: icon31, title: "翻控区", count1: 114, count2: 54 }, ]); const [block2Index, setBlock2Index] = useState(0); const [block3Index, setBlock3Index] = useState(0); @@ -74,7 +74,7 @@ function FengBi() { return ( <div className="port_fengbi"> <div className="block1"> - <Title title="口门统计" /> + <Title title="封闭区域统计" /> <div className="options"> { block1List.map((item, index) => ( @@ -154,22 +154,24 @@ function FengBi() { </div> )} /> - <div className="table"> - <div className="tr"> - <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.NAME}</div> - <div className="td">{item.IN}</div> - <div className="td">{item.OUT}</div> - </div> - ))} - </SeamlessScroll> + <div className="options"> + <div className="table"> + <div className="tr"> + <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.NAME}</div> + <div className="td">{item.IN}</div> + <div className="td">{item.OUT}</div> + </div> + ))} + </SeamlessScroll> + </div> </div> </div> </div> diff --git a/src/pages/Container/Map/components/Content/port/FengBi/index.less b/src/pages/Container/Map/components/Content/port/FengBi/index.less index d8cd74e..4a6da85 100644 --- a/src/pages/Container/Map/components/Content/port/FengBi/index.less +++ b/src/pages/Container/Map/components/Content/port/FengBi/index.less @@ -113,6 +113,15 @@ .tabs { .tabs-style(); } + + .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 { @@ -125,37 +134,44 @@ .tabs-style(); } - .table { - padding: 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; - .scroll { - height: 300px; - overflow-y: hidden; + .table { + .scroll { + height: 300px; + overflow-y: hidden; - .tr { - &:nth-child(odd) { - background-color: transparent; + .tr { + &:nth-child(odd) { + background-color: transparent; + } } } - } - .tr { - display: grid; - grid-template-columns: 2fr 1fr 1fr; - background-color: rgba(42, 86, 158, 0.53); + .tr { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + background-color: rgba(42, 86, 158, 0.53); - .td { - text-align: center; - font-size: 12px; - color: #fff; - padding: 5px; + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; - &.green { - color: #7ccf41; - } + &.green { + color: #7ccf41; + } - &.yellow { - color: #ffcb05; + &.yellow { + color: #ffcb05; + } } } }