From 2de07c83c773369169ae852becd4ff0f4e7b19d9 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Thu, 8 Jan 2026 15:58:52 +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/bg4.png | Bin 0 -> 1842 bytes src/assets/images/map_bi/content/bg5.png | Bin 0 -> 1842 bytes .../branchOffice/IndexRight/echarts.js | 186 ++++++++++++++++++ .../Content/branchOffice/IndexRight/index.js | 153 +++++++++++++- .../branchOffice/IndexRight/index.less | 129 ++++++++++++ 5 files changed, 467 insertions(+), 1 deletion(-) create mode 100644 src/assets/images/map_bi/content/bg4.png create mode 100644 src/assets/images/map_bi/content/bg5.png create mode 100644 src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js create mode 100644 src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.less diff --git a/src/assets/images/map_bi/content/bg4.png b/src/assets/images/map_bi/content/bg4.png new file mode 100644 index 0000000000000000000000000000000000000000..28c14fe1a0bcc884a3dae8578be715bf74785920 GIT binary patch literal 1842 zcmaJ?2~ZPP7>Cs&K1pHLDmY3oY8DV_;*tUgOvnKfl8)kB6A$dy<&tZM83KWR2%+VH z?}JK~BmhE84+Ei$FuH=p4h6zF3|3eOo5T462xhV(AZ7%_3Zb*YxNIgjI2ibFfuuLR zQpJ^uVm|mHcRWx{5IQad8I4AUF@%BX(;yay!-1H=P;fAvM9}d}l#rX~DDF3)AcAp) zUZW#47z#KP<;$?;1P>%5eV+oN8xXZkU=y~Na2t1 z{--dWl&OOuDU4&w^$N0aDnExS9apG_jmq4iE|*RpS7G3pA(_ zGvY!09EpT0MsY%pDqyjQ2a+lbjYi3h;IM?z?1*R)pT%dfVwfCOj6e`36vZ&v0zr5< zbAT(t6w479B?h?4kKC9cxsGu_bfjkytk)P|WsDv}fc~_(nxSJ64ypHns~kEO(U4q- z3~W?_ zWh`t%X@V9|cD_U%=VRk`7=sZM-n=hbuHH7dJr7{B(%$PTZp9cc!Y-uq=$S614#L#e5p#~wM> z6GsjF15H;V4TgtnqEgK**{E06vCg~u65k%VXP^|1qvdR%(^2=d0fSw6|OL_+JjNm+RN>a9UY9{=xpQ_ldbLR9SZ0;qt5MAnlejM`ZJh6148# z0_tI8Wp{hpMemlK>&|{vO7}W1?mg9fJH2sk!2W5uJ*TXTnkJfOKXRLB1hR`E-=NY( zVY(MFO$cUhwA;@#RLzsXH8ts}pXENyde=NT->I+QVc)q4g|#D^ZSl7=UKTVqXyT5c z*K_iF7&T7|;OTyB(}lH`r3*=$7v7?Dm~4o)xNHwOiYXvZiLlVz{=V zuk}!?zi*TJIN?pBnI>&AmzDU*G&c{@>(^edi*CD<8xfy==G2TSF3v6$TeIHY?ER(w zbZhIc$72@9&8NN@BcQsyuPfkBnKI1TWp*q@KSje4bn!i;x z?fa|KU{B4Z_BiRe+^V{9G!s&^VV5uTaAo1W1JVFX{n*{l!F4k$&|7gvduZ#N6}7!H zs~X2!s39&DY+gzP4bBS>0IZkVGc1oW+%`Pl>CT$qd#{o-_t6P|l)s$Zl{zV-H-zkI zXzRCACvR!FwYCQIZCJc|Y{F)R@z00FL)9}9+pd{N>S zJ?MkMOmUKgMfDTwd^l{8+aV5pebFu*fVj*^fkHu}L&4-Gf46 zalCvf^?(|4XzEE^Id3jJ9WKaP z{^6SwRzYn#W6*J`v(9e#X;+>=GJ2|~23;qQ0I8d1@oqi3qO01BJ$UzeuWNw$FJ+3YgL7Y` zE-m!T9TntnT;f-+8fm?cy0S3JkTtboWT3J(K-UxHTAl6x)Hf>{ zm!vlr<650l=a{#5EnjD->1W0-jsos9m4|tz$;%U zp{!9JXx@r(G;^_B&cy_n2ixxa*jhC7uYil?KM-T2VB3?;*$2D)64!Q*)_pLyxEgD1 zNUU*a+*jM@;%<4nMltf5?fr*%eP(BD9d7x7iu(Ev!}&aKaH#0F9Ut^K6w=cdE)#{- zZgZ>Jggbko)%n6#XN#JxZeA-hJ7Fs>*k7x^8s)ljbYDboz!R`}=jrm* z=EgGGWuHTBwhcG?GM@4D58f_)$v?afe%#j+@??0*Fw4$C)2+^Wo|LRM%*z^lB)k&O z;0Nma)X%KAXNqxkIQT(Da&0lQ=%Rf}{&TKgqmE75YNx@WrZ~L|y5E@}r+ly}bC=rY zUH9R`_R&tMnvL`lk5cNK?aoz1$CbF`!iz7bI;JWvTkq1x4jSAaKPt-{I{jXour)_? z9@W814#?grDzo!f7H8yp>u)NjzJ-Zon@xW)u5Tcxa7A?5UqZ9;&Hw-a literal 0 HcmV?d00001 diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js new file mode 100644 index 0000000..1dbf4ae --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js @@ -0,0 +1,186 @@ +import * as echarts from "echarts"; + +export const initEcharts1 = (main1Ref, chartInstance, data) => { + chartInstance.current = echarts.init(main1Ref.current); + + const option = { + color: ["#F1C416", "#0AFCFF"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + label: { + backgroundColor: "#6a7985", + }, + }, + }, + grid: { + left: "1%", + right: "4%", + bottom: "6%", + top: 30, + padding: "0 0 10 0", + containLabel: true, + }, + legend: { + right: 10, + top: 0, + itemGap: 16, + itemWidth: 18, + itemHeight: 10, + textStyle: { + color: "#fff", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 12, + }, + }, + dataZoom: [ + { + type: "slider", + height: 6, + bottom: 0, + show: true, + start: 0, + end: 50, + handleSize: 3, + handleStyle: { + color: "#DCE2E8", + }, + xAxisIndex: [0], + filterMode: "filter", + showDetail: false, + }, + ], + xAxis: [ + { + type: "category", + boundaryGap: true, + data: data.map(item => item.name), + axisLabel: { + interval: 0, + margin: 15, + textStyle: { + color: "#fff", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 12, + }, + }, + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#fff", + opacity: 0.2, + }, + }, + splitLine: { + show: false, + }, + }, + ], + yAxis: [ + { + type: "value", + splitNumber: 5, + axisLabel: { + textStyle: { + color: "#fff", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 12, + }, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: ["#fff"], + opacity: 0.06, + }, + }, + }, + ], + series: [ + { + name: "单位人员数", + type: "pictorialBar", + symbol: "roundRect", + symbolOffset: [-5, 0], + symbolMargin: "1", + barWidth: "10%", + barMaxWidth: "20%", + animationDelay: (dataIndex, params) => { + return params.index * 50; + }, + itemStyle: { + normal: { + color: (params) => { + return new echarts.graphic.LinearGradient(0, 0, 1, 1, [ + { + offset: 0, + color: "#F1C416", + }, + { + offset: 1, + color: "#FF2F01", + }, + ]); + }, + }, + }, + z: 1, + barGap: 0, + symbolRepeat: true, + symbolSize: [14, 5], + data: data.map(item => item.unitCount), + animationEasing: "elasticOut", + stack: "2", + }, + { + name: "相关方人员数", + type: "pictorialBar", + symbol: "roundRect", + barWidth: "10%", + symbolOffset: [5, 0], + barMaxWidth: "20%", + symbolMargin: "1", + animationDelay: (dataIndex, params) => { + return params.index * 50; + }, + itemStyle: { + normal: { + color: (params) => { + return new echarts.graphic.LinearGradient(0, 0, 1, 1, [ + { + offset: 0, + color: "#0AFCFF", + }, + { + offset: 1, + color: "#0CA1FE", + }, + ]); + }, + }, + }, + z: 1, + barGap: 0, + symbolRepeat: true, + symbolSize: [14, 5], + data: data.map(item => item.personnelCount), + animationEasing: "elasticOut", + stack: "1", + }, + ], + }; + + chartInstance.current.setOption(option); +}; diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js index 2d80263..e002648 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js @@ -1,6 +1,157 @@ +import { useMount } from "ahooks"; +import { useRef, useState } from "react"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import bg4 from "~/assets/images/map_bi/content/bg4.png"; +import bg5 from "~/assets/images/map_bi/content/bg5.png"; +import Title from "~/pages/Container/Map/components/Content/branchOffice/Title"; +import { initEcharts1 } from "./echarts"; +import "./index.less"; + function IndexRight() { + const [block1List, setBlock1List] = useState([ + { title: "口门进出统计", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 }, + { title: "进入申请待审批", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 }, + { title: "封闭区域人员情况", label1: "区域数", label2: "人数", count1: 123, count2: 123, bgImg: bg5 }, + { title: "封闭区域作业情况", label1: "区域数", label2: "作业数", count1: 123, count2: 123, bgImg: bg5 }, + ]); + const [block3List, setBlock3List] = useState([ + { name: "A区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:00:00", status: "1" }, + { name: "B区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:05:00", status: "2" }, + { name: "C区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:10:00", status: "1" }, + { name: "D区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:15:00", status: "2" }, + { name: "E区", requiredDevices: "视频遮挡", anchoredDevices: "2024-01-01 10:20:00", status: "1" }, + { name: "F区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:25:00", status: "2" }, + { name: "G区", requiredDevices: "紧急按钮", anchoredDevices: "2024-01-01 10:30:00", status: "1" }, + { name: "H区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:35:00", status: "2" }, + { name: "I区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:40:00", status: "1" }, + { name: "J区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:45:00", status: "2" }, + ]); + const [block4List, setBlock4List] = useState([ + { department: "技术部", threeOrMoreWork: 12, dangerousWork: 8, newWork: 5 }, + { department: "生产部", threeOrMoreWork: 15, dangerousWork: 10, newWork: 3 }, + { department: "安全部", threeOrMoreWork: 5, dangerousWork: 12, newWork: 2 }, + { department: "质检部", threeOrMoreWork: 8, dangerousWork: 6, newWork: 4 }, + { department: "设备部", threeOrMoreWork: 10, dangerousWork: 15, newWork: 7 }, + { department: "维修部", threeOrMoreWork: 18, dangerousWork: 9, newWork: 6 }, + { department: "仓储部", threeOrMoreWork: 7, dangerousWork: 5, newWork: 3 }, + { department: "物流部", threeOrMoreWork: 9, dangerousWork: 4, newWork: 2 }, + { department: "人事部", threeOrMoreWork: 3, dangerousWork: 2, newWork: 1 }, + { department: "财务部", threeOrMoreWork: 2, dangerousWork: 1, newWork: 0 }, + ]); + + const chartInstance = useRef(null); + const main1Ref = useRef(null); + + useMount(() => { + initEcharts1(main1Ref, chartInstance, [ + { name: "技术部1", unitCount: 95, personnelCount: 92 }, + { name: "技术部2", unitCount: 95, personnelCount: 92 }, + { name: "技术部3", unitCount: 95, personnelCount: 92 }, + { name: "技术部4", unitCount: 95, personnelCount: 92 }, + { name: "技术部5", unitCount: 95, personnelCount: 92 }, + { name: "技术部6", unitCount: 95, personnelCount: 92 }, + { name: "技术部7", unitCount: 95, personnelCount: 92 }, + { name: "技术部8", unitCount: 95, personnelCount: 92 }, + { name: "技术部9", unitCount: 95, personnelCount: 92 }, + { name: "技术部0", unitCount: 95, personnelCount: 92 }, + ]); + + 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} style={{ backgroundImage: `url(${item.bgImg})` }}> + <div className="title">{item.title}</div> + <div className="info"> + <div> + {item.label1} + ： + {item.count1} + </div> + <div> + {item.label2} + ： + {item.count2} + </div> + </div> + </div> + )) + } + </div> + </div> + </div> + <div className="block2"> + <Title title="封闭区域人员状态" /> + <div className="options"> + <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "200px" }} /> + </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> + <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.requiredDevices}</div> + <div className="td">{item.anchoredDevices}</div> + <div className="td" style={{ color: item.status === "1" ? "#f18308" : "#60b321" }}> + {item.status === "1" && "待处置"} + {item.status === "2" && "已处置"} + </div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + <div className="block4"> + <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> + <div className="scroll"> + <SeamlessScroll list={block4List} step={0.5}> + {block4List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.department}</div> + <div className="td">{item.threeOrMoreWork}</div> + <div className="td">{item.dangerousWork}</div> + <div className="td">{item.newWork}</div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + </div> ); } diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.less b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.less new file mode 100644 index 0000000..b7f939a --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.less @@ -0,0 +1,129 @@ +.branch_office_index_right { + .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 { + color: #fff; + font-size: 12px; + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: space-between; + gap: 10px 20px; + + .item { + width: calc(50% - 10px); + padding: 5px 20px; + + .title { + font-weight: bold; + text-align: center; + } + + .info { + margin-top: 10px; + display: flex; + align-items: center; + justify-content: space-between; + } + } + } + } + } + + .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: 165px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: 1.5fr 1fr 2fr 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; + + .table { + margin-top: 5px; + + .scroll { + height: 165px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + background-color: rgba(17, 51, 112, 0.8); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + } + } + } + } + } +}