diff --git a/src/assets/images/map_bi/content/ico15.png b/src/assets/images/map_bi/content/ico15.png new file mode 100644 index 0000000..60aa36b Binary files /dev/null and b/src/assets/images/map_bi/content/ico15.png differ diff --git a/src/assets/images/map_bi/content/ico16.png b/src/assets/images/map_bi/content/ico16.png new file mode 100644 index 0000000..9ab2752 Binary files /dev/null and b/src/assets/images/map_bi/content/ico16.png differ diff --git a/src/assets/images/map_bi/content/ico17.png b/src/assets/images/map_bi/content/ico17.png new file mode 100644 index 0000000..9d53e3c Binary files /dev/null and b/src/assets/images/map_bi/content/ico17.png differ diff --git a/src/assets/images/map_bi/content/ico18.png b/src/assets/images/map_bi/content/ico18.png new file mode 100644 index 0000000..89116b0 Binary files /dev/null and b/src/assets/images/map_bi/content/ico18.png differ diff --git a/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js new file mode 100644 index 0000000..3d9e96d --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js @@ -0,0 +1,132 @@ +import * as echarts from "echarts"; + +export const initEcharts1 = (main1Ref, chartInstance, data) => { + chartInstance.current = echarts.init(main1Ref.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 = { + color: ["#1A64F8"], + 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/MenJin/index.js b/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js new file mode 100644 index 0000000..d8cce9c --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js @@ -0,0 +1,174 @@ +import { useMount } from "ahooks"; +import { useRef, useState } from "react"; +import CountUp from "react-countup"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import icon1 from "~/assets/images/map_bi/content/ico15.png"; +import icon2 from "~/assets/images/map_bi/content/ico16.png"; +import icon3 from "~/assets/images/map_bi/content/ico17.png"; +import icon4 from "~/assets/images/map_bi/content/ico18.png"; +import icon5 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 MenJin() { + const [block1List, setBlock1List] = useState([ + { label: "封闭区域数", count: 123, icon: icon1 }, + { label: "车行通道数", count: 123, icon: icon2 }, + { label: "人行通道数", count: 123, icon: icon3 }, + { label: "封闭区域当前人数", count: 123, icon: icon4 }, + ]); + const [block2Index, setBlock2Index] = useState(0); + const [block3Index, setBlock3Index] = useState(0); + const [block3List, setBlock3List] = useState([ + { permissionRange: "A区", status: "1", applicant: "张三", approver: "李主管" }, + { permissionRange: "B区", status: "1", applicant: "李四", approver: "王经理" }, + { permissionRange: "C区", status: "1", applicant: "王五", approver: "赵主任" }, + { permissionRange: "D区", status: "0", applicant: "赵六", approver: "钱总监" }, + { permissionRange: "E区", status: "0", applicant: "钱七", approver: "孙部长" }, + { permissionRange: "F区", status: "0", applicant: "孙八", approver: "周经理" }, + { permissionRange: "G区", status: "0", applicant: "周九", approver: "吴主任" }, + { permissionRange: "H区", status: "1", applicant: "吴十", approver: "郑主管" }, + { permissionRange: "I区", status: "0", applicant: "郑一", approver: "王总监" }, + { permissionRange: "J区", status: "1", applicant: "王二", approver: "张部长" }, + ]); + + 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"> + <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="count"> + <CountUp end={+item.count}></CountUp> + </div> + </div> + <div className="corner-img top-left-img"> + <img src={icon5} alt="" /> + </div> + <div className="corner-img top-right-img"> + <img src={icon5} alt="" /> + </div> + <div className="corner-img bottom-left-img"> + <img src={icon5} alt="" /> + </div> + <div className="corner-img bottom-right-img"> + <img src={icon5} alt="" /> + </div> + </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} className="main1_node" 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="table"> + <div className="tr"> + <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.permissionRange}</div> + <div className="td" style={{ color: item.status === "1" ? "#FC6B13" : "#fff" }}>{item.status === "1" ? "临时" : "长期"}</div> + <div className="td">{item.applicant}</div> + <div className="td">{item.approver}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + ); +} + +export default MenJin; diff --git a/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.less b/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.less new file mode 100644 index 0000000..d7a2251 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.less @@ -0,0 +1,168 @@ +.branch_office_menjin { + .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 { + 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; + flex-wrap: wrap; + justify-content: space-between; + gap: 10px 20px; + + .item { + position: relative; + width: calc(50% - 10px); + display: flex; + align-items: center; + color: #fff; + padding: 9px 0 9px 9px; + background-color: rgba(1, 56, 154, 0.26); + border: 1px solid #2091F3; + + .img { + background-color: #102561; + border: 1px solid #19455B; + border-radius: 4px; + padding: 8px; + margin-right: 10px; + + img { + width: 35px; + height: 30px; + } + } + + .info { + .label { + font-weight: bold; + } + + .count { + } + } + + .corner-img { + position: absolute; + width: 12px; + height: 12px; + + &.top-left-img { + top: -10px; + left: -3px; + } + + &.top-right-img { + transform: rotate(90deg); + top: -3px; + right: -10px; + } + + &.bottom-left-img { + transform: rotate(270deg); + bottom: -3px; + left: -10px; + } + + &.bottom-right-img { + transform: rotate(180deg); + bottom: -10px; + right: -3px; + } + } + } + } + } + } + + .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-image: linear-gradient(to bottom, + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0.8)); + margin-top: 10px; + + .tabs { + .tabs-style(); + } + + .table { + padding: 10px; + + .scroll { + height: 300px; + overflow-y: hidden; + + .tr { + &:nth-child(odd) { + background-color: transparent; + } + } + } + + .tr { + display: grid; + grid-template-columns: repeat(4, 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/branchOffice/Title/index.js b/src/pages/Container/Map/components/Content/branchOffice/Title/index.js index 5ed2e10..e1cca96 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/Title/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/Title/index.js @@ -7,6 +7,7 @@ function Title(props) { <div className="basic"> <div className="label">{props.title}</div> </div> + <div className="extra">{props.extra}</div> </div> ); } diff --git a/src/pages/Container/Map/components/Content/branchOffice/Title/index.less b/src/pages/Container/Map/components/Content/branchOffice/Title/index.less index d7d84f5..5ef6d72 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/Title/index.less +++ b/src/pages/Container/Map/components/Content/branchOffice/Title/index.less @@ -18,4 +18,8 @@ padding-left: 25px; } } + + .extra { + margin-right: 5px; + } } diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index bd076c0..f6e0061 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/src/pages/Container/Map/components/Content/index.js @@ -7,6 +7,7 @@ import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUt import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList"; 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"; import BranchWeiXian from "~/pages/Container/Map/components/Content/branchOffice/WeiXian"; import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo"; import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi"; @@ -52,6 +53,8 @@ function Content() { return <BranchOfficeIndexLeft />; if (bottomUtilsCurrentType === "danger") return <BranchWeiXian />; + if (bottomUtilsCurrentType === "door") + return <BranchMenJin />; }; const renderBranchOfficeContentRight = () => { diff --git a/src/pages/Container/Map/components/popup/components/BranchOffice.js b/src/pages/Container/Map/components/popup/components/BranchOffice.js index e7b58bc..ada300d 100644 --- a/src/pages/Container/Map/components/popup/components/BranchOffice.js +++ b/src/pages/Container/Map/components/popup/components/BranchOffice.js @@ -4,7 +4,7 @@ import "./index.less"; const BranchOffice = ({ info, close, enter }) => { return ( - <div className="box"> + <div className="map_content_box"> <div className="box-wrap"> <div className="area"> <div></div> diff --git a/src/pages/Container/Map/components/popup/components/Port.js b/src/pages/Container/Map/components/popup/components/Port.js index 47658a4..f5c8645 100644 --- a/src/pages/Container/Map/components/popup/components/Port.js +++ b/src/pages/Container/Map/components/popup/components/Port.js @@ -4,7 +4,7 @@ import "./index.less"; const Port = ({ info, close, enter }) => { return ( - <div className="box"> + <div className="map_content_box"> <div className="box-wrap"> <div className="area"> <div></div> diff --git a/src/pages/Container/Map/components/popup/components/index.less b/src/pages/Container/Map/components/popup/components/index.less index 478dd42..2146a49 100644 --- a/src/pages/Container/Map/components/popup/components/index.less +++ b/src/pages/Container/Map/components/popup/components/index.less @@ -1,4 +1,4 @@ -.box { +.map_content_box { width: 300px; position: relative; bottom: 0; @@ -13,7 +13,7 @@ border: 1px solid #42698f; background-color: rgb(35 53 93 / 74%); box-shadow: 0 0 10px 2px #000000; - animation: slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; + animation: map_content_box-slide-in-elliptic-bottom-fwd 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both; .area { padding: 5px 10px; @@ -95,7 +95,7 @@ } } -@keyframes slide-in-elliptic-bottom-fwd { +@keyframes map_content_box-slide-in-elliptic-bottom-fwd { 0% { transform: translateY(300px) rotate(10deg) scale(0.3); transform-origin: 50% 100%;