From 214b5bfb7000137184b0cfd4295658331b0ffba1 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Fri, 9 Jan 2026 09:10:49 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/map_bi/content/ico15.png | Bin 0 -> 1444 bytes src/assets/images/map_bi/content/ico16.png | Bin 0 -> 1474 bytes src/assets/images/map_bi/content/ico17.png | Bin 0 -> 1555 bytes src/assets/images/map_bi/content/ico18.png | Bin 0 -> 1402 bytes .../Content/branchOffice/MenJin/echarts.js | 132 +++++++++++++ .../Content/branchOffice/MenJin/index.js | 174 ++++++++++++++++++ .../Content/branchOffice/MenJin/index.less | 168 +++++++++++++++++ .../Content/branchOffice/Title/index.js | 1 + .../Content/branchOffice/Title/index.less | 4 + .../Container/Map/components/Content/index.js | 3 + .../popup/components/BranchOffice.js | 2 +- .../Map/components/popup/components/Port.js | 2 +- .../components/popup/components/index.less | 6 +- 13 files changed, 487 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/map_bi/content/ico15.png create mode 100644 src/assets/images/map_bi/content/ico16.png create mode 100644 src/assets/images/map_bi/content/ico17.png create mode 100644 src/assets/images/map_bi/content/ico18.png create mode 100644 src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js create mode 100644 src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js create mode 100644 src/pages/Container/Map/components/Content/branchOffice/MenJin/index.less 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 0000000000000000000000000000000000000000..60aa36b4636b9c1ae56289c2d6c708781b376960 GIT binary patch literal 1444 zcmeAS@N?(olHy`uVBq!ia0vp^%0Mi~!3HFk*)G=tQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?{;ELn2Bde0{8v^K*7iAWdWaj57fJ{tG z$}cUkRRX#c;)UD-xUqS~&|m@vn0`fKfxe-h0mw@*g}%P{mFDKcRTq~8r6Sym)!^cg z%7Rq=pw#00(xPNw#HA^NtSYc_E=o--$uA1Y&(DE{Vn9ZINq%ugeu09sGbq$76*R&# z^HTE5i#5S|e0{Av^NLFn^O93NU2K(rrs!p6rdTN@Uj$6r4yPUg^B9we zr;B4q#jQ8jy){@0W!OLbuh=5f5+(BVfrhwhf7nAMKNn41_D*K+%FENPDOVqCJQ1te z|47Mm(&T_iGIORdYi^C|Z@wXU|6=|1`{&mD?2k<5ult&rmj2BC_w4_F;*~unx%|0k zQ97Z`*Tzu&-Gj=F%QXrVj_psLZ!_cIvgR4$`T?xByHaXgG8CV+vAznKET}5vex^U; z+wt_X9!x)9CuF<%cWhvODzI&NN7Ahxx#HK%tfDvcUg|6tcw|~=f53J}hU8B6TZiL} zm2UBSs4+|J=W!e#PQ7O~0}y?T9&GV{stVu5gahb-wh-P{m1t6(!C_Jk6|8 z3A}lhr?o$*6|=tla^C)p)#q&+WLsUTe5E@!2!xbzuE~j9an(!hLPPx2$39vnhbRAU z$bECfYhT|L$pB{V2Q3j54SFY9gr41UdRO=?G-S?X^)rTjehTN)wKwqa8t}>8XnrHl zTa|Aw-`K4vp7!(<^UmGdU-`PcHhtOYm(i3JwOF}rS+jZa$t%wGa}JtB^r|XLdAY^$ zeL1LQ!Q(&0?&ODzd+rkrRD>P9IpjOnd_7|-d*lpHf0j{+<^^s}8UBRd&-RG>SqklB zF|T$=un(VtDnm{ Hr-UW|tGNhp literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9ab2752f1385af40e9b6ba76a2a590f66ea3938c GIT binary patch literal 1474 zcmeAS@N?(olHy`uVBq!ia0vp^%0Mi~!3HFk*)G=tQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?{;ELn2Bde0{8v^K*7iAWdWaj57fJ{tG z$}cUkRRX#c;)UD-xUqS~&|m@vn0`fKfxe-h0mw@*g}%P{mFDKcRTq~8r6Sym)!^cg z%7Rq=pw#00(xPNw#HA^NtSYc_E=o--$uA1Y&(DE{Vn9ZINq%ugeu09sGbq$76*R&# z^HTE5i#5S|e0{Av^NLFn^O93NU2K(rrs!p6rdT<-85kK@xEi`R8W|fJx*1p+xi~vp zxLKGwo4c4h8JfcMy5uL9=BDPA!1Sgd^cvyR3rY^T1wfl!Qj0RnQd8WD@^cly-nPob z=@u6^oaRCGrr>sq0ZzU8K*#8VA{QyLVM4$Z1Y*LIE|3FH{Hb}s6kh~P+NRqSfw_yx z$kW9!q~g|_>;4`hfied^)-Ef3ts*4X#i8o_L10Ov66?Yh3pCjNX}Y$)Nnm-D`0_&P z>TV?wj%%Jv79Xk#_#RLZEt1G-<08`5p~SK5nd9}+U;8RH@0nXxUbgV&%x3!^8#d?P zfAjC#_j`LPm3a<-s8sz_Bgf^hIyqm?Mv6QB;Zvz2^}pWf=G-WqCAV+(44>;6KiKr| z%d7}7w@VA1Im3U7wMmNZP4#38vvRIY^NbChElky)ey|Te&OYPty6BT99?D<8_x_}2 zSL>ANW{00lQDD(qz;%0uyTjJM(KCaeYb76(oEF&my@IjQw>;^1kmN+|{TDmaS2#X7 z`15 z*$rV7!vEsxE$Itw?Haz5 zPiX!!XbD`qmpycb>*{O&yx03k*l*>3TDSPbq>i1vQ#@I6S8ZBk_N30cnpNuRs_bKe zYEK#s**g&Px7Cv-qOE089&#^8}C@RP0W7Vy(#jl zD#^T)gkPzJEi|n^uItyA_4iU}23P;q@9e8KeYEAdpZZ_GU43Ti+*v2)hiblm*_k5H tT+!+ONs!aDO6i)w^YgbfAN4aZGf1&_rJF6?&I~G5Jzf1=);T3K0RU{GCj9^a literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9d53e3c566eca5a65d07d791d6435b2185a34716 GIT binary patch literal 1555 zcmeAS@N?(olHy`uVBq!ia0vp^%0Mi~!3HFk*)G=tQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?{;ELn2Bde0{8v^K*7iAWdWaj57fJ{tG z$}cUkRRX#c;)UD-xUqS~&|m@vn0`fKfxe-h0mw@*g}%P{mFDKcRTq~8r6Sym)!^cg z%7Rq=pw#00(xPNw#HA^NtSYc_E=o--$uA1Y&(DE{Vn9ZINq%ugeu09sGbq$76*R&# z^HTE5i#5S|e0{Av^NLFn^O93NU2K(rrs!p6rdYX{7&w|5n3}ja8W|fJx*0fHnmIaI z8X1~985=ko8k)lNy5uL9=BDPA!1Sgd^qS(-3rY^T1wfl!Qj0RnQd8WD@^cly-nPob z?G_`P=0WwQ;C72KPQCg-$LND17b&t~LckORV#1RykONQrsd>N@Uj$6r%U?X}Wnf@x z_H=O!skpUgy1$1=pv>|6%Y+iwDtaiovX*jQXE|%4)%EY8YL7w|=da?91KkTZ&2Y=v z_~zi(NhL2HES#`m@?T3A7u}6rPP22jG+tfko%{Cei-4%zm!I!UwqZ-ZDVhH4VEg@j z=AWbYz5jmi_ul(IOnimQZp}P+Qem0!tB2-C6m2eDoh4*8`+VPwgdC%`mr;){+Q{s_ ze)rcEVZ-HY%gU0~y7o+JJiFLdw|-4mWa3pt^&_1z2WJIxpDj}g&bz9({^uXnJ!M&-!U~9LIPCPaYH~sjk{09v%H9 zR9S7o^O;8`-w(1)nfPVPK1kcw+pxV=<%)dLq%6JTVU$+WPL|X)FJ3k2-rA&~e33u&SHx1~iHTvh z0lc9B%g%%ucOKdtvO}@0c1@qPidzkP;sSZKX%f?)l@^44}ryu8@dpwwvE;*xn!{N2B4+PD-S)jVNStxOS zklvAA)t2<6PqTLLIH_|#pZbq!UdPI}zNf#)hqSppkX|7aRw+93Z@|JY!ZS1G?kTog zsmix#d!=I9+=c(0w;w)rLrPP~vHGr9a@nUmr&|hEeG9ttx=u>{+RPoFbI~fYXxl;e zr!)5)&Qo4-PuFnq1wNzQa*jv-=V#T`Ph8rk=p=c#?$b6lHK9!(sx*X6=eVUD>iTcb a$i`s2xI)6<;n!SHG41K<=d#Wzp$PzC235EK literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..89116b07a78cb926f45a7cfb9661f50902b46980 GIT binary patch literal 1402 zcmeAS@N?(olHy`uVBq!ia0vp^%0Mi~!3HFk*)G=tQj#UE5hcO-X(i=}MX3yqDfvmM z3ZA)%>8U}fi7AzZCsS=07?{;ELn2Bde0{8v^K*7iAWdWaj57fJ{tG z$}cUkRRX#c;)UD-xUqS~&|m@vn0`fKfxe-h0mw@*g}%P{mFDKcRTq~8r6Sym)!^cg z%7Rq=pw#00(xPNw#HA^NtSYc_E=o--$uA1Y&(DE{Vn9ZINq%ugeu09sGbq$76*R&# z^HTE5i#5S|e0{Av^NLFn^O93NU2K(rrs!p6rdYWenmQU8x*54R8W|fJx*1qF8XLQs z7@N4bxjLCU8JolOy5uL9=BDPA!1Sgd^cv&T3rY^T1wfl!Qj0RnQd8WD@^cly-nPob z?G^)^=0WwQ;C724PQCg-$LND17b&t~LckORV#1RykONQrsd>N@Uj$6rJDblXGB7Z{ z@^otWRcJ zLiPfd4F)02u9GKToV1Z8pFOqVuVe1p7lpDnO|JIHoc{WiVNO?WeAAh)a@#w8oQUWN zXHrk-N@-A(4@7w-0zGcChG}Fela@fpf=H?Et<_pZ0Z@_t{UH&+CnoM z9>j@!on>ULvRgA@bLa=g8A{&|cq#3|Zo*GKZ zvOX)`EnB6r=ekx%>Z3&p!t1q)#aJcxukvA@aQvrvs5JC+^>bP0l+XkK3?}?P literal 0 HcmV?d00001 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%;