diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js index f729119..bd00a88 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js @@ -1,7 +1,7 @@ import * as echarts from "echarts"; -export const initEcharts1 = (main1Ref, chartInstance, data) => { - chartInstance.current = echarts.init(main1Ref.current); +export const initEcharts1 = (mainRef, chartInstance, data) => { + chartInstance.current = echarts.init(mainRef.current); const option = { color: ["#7d4449", "#009944", "#167ce4", "#00ffff"], diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js index fdec04c..2d36939 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js @@ -241,7 +241,7 @@ function IndexLeft() {
<div className="options"> - <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "200px" }} /> + <div ref={main1Ref} style={{ width: "100%", height: "200px" }} /> </div> </div> <div className="block4"> diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js index 1dbf4ae..c8fc37e 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js @@ -1,7 +1,7 @@ import * as echarts from "echarts"; -export const initEcharts1 = (main1Ref, chartInstance, data) => { - chartInstance.current = echarts.init(main1Ref.current); +export const initEcharts1 = (mainRef, chartInstance, data) => { + chartInstance.current = echarts.init(mainRef.current); const option = { color: ["#F1C416", "#0AFCFF"], 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 e002648..891ad5c 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js @@ -95,7 +95,7 @@ function IndexRight() { <div className="block2"> <Title title="封闭区域人员状态" /> <div className="options"> - <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "200px" }} /> + <div ref={main1Ref} style={{ width: "100%", height: "200px" }} /> </div> </div> <div className="block3"> 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 3d9e96d..1bc1528 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js @@ -1,7 +1,7 @@ import * as echarts from "echarts"; -export const initEcharts1 = (main1Ref, chartInstance, data) => { - chartInstance.current = echarts.init(main1Ref.current); +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)); diff --git a/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js b/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js index d8cce9c..5287b5d 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/index.js @@ -126,7 +126,7 @@ function MenJin() { )} /> <div className="options"> - <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} /> + <div ref={main1Ref} style={{ width: "100%", height: "300px" }} /> </div> </div> <div className="block3"> diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js new file mode 100644 index 0000000..fbecd1d --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js @@ -0,0 +1,163 @@ +import * as echarts from "echarts"; + +export const initEcharts1 = (mainRef, chartInstance, data) => { + chartInstance.current = echarts.init(mainRef.current); + + const option = { + tooltip: { + trigger: "item", + }, + legend: { + left: "center", + top: "0", + textStyle: { + color: "#fff", + }, + }, + series: [{ + color: ["#4198AF", "#285DF0", "#EA439D", "#F59FBC", "#FCA158", "#03D4B9", "#9FD224", "#13C871", "#FF611C"], + type: "pie", + radius: [0, "50%"], + center: ["50%", "60%"], + label: { + textStyle: { + color: "#fff", + }, + }, + data, + }], + }; + + chartInstance.current.setOption(option); +}; + +export const initEcharts2 = (mainRef, chartInstance, data) => { + chartInstance.current = echarts.init(mainRef.current); + + const unitPersonnelData = data.map(item => Number.parseInt(item.unitPersonnelCount)); + const relatedPartyPersonnelData = data.map(item => Number.parseInt(item.relatedPartyPersonnelCount)); + 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: "15%", + bottom: "25%", + }, + 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(84,173,147,0.2)", + }, + { + offset: 0, + color: "#54AD93", + }, + ]), + }, + barWidth: "10", + data: unitPersonnelData, + }, + { + 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(72,117,231,0.2)", + }, + { + offset: 0, + color: "#4875E7", + }, + ]), + }, + barWidth: "10", + data: relatedPartyPersonnelData, + }, + ], + }; + + chartInstance.current.setOption(option); +}; diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js new file mode 100644 index 0000000..120ed3f --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.js @@ -0,0 +1,142 @@ +import { useMount } from "ahooks"; +import { useRef, useState } from "react"; +import SeamlessScroll from "zy-react-library/components/SeamlessScroll"; +import Title from "~/pages/Container/Map/components/Content/branchOffice/Title"; +import { initEcharts1, initEcharts2 } from "./echarts"; +import "./index.less"; + +function RenYuan() { + const chart1Instance = useRef(null); + const main1Ref = useRef(null); + const chart2Instance = useRef(null); + const main2Ref = useRef(null); + + const [block3List, setBlock3List] = useState([ + { name: "张三", area: "A区", onlineStatus: 1 }, + { name: "李四", area: "B区", onlineStatus: 1 }, + { name: "王五", area: "C区", onlineStatus: 2 }, + { name: "赵六", area: "D区", onlineStatus: 1 }, + { name: "钱七", area: "E区", onlineStatus: 1 }, + { name: "孙八", area: "F区", onlineStatus: 2 }, + { name: "周九", area: "G区", onlineStatus: 1 }, + { name: "吴十", area: "H区", onlineStatus: 1 }, + { name: "郑一", area: "I区", onlineStatus: 2 }, + { name: "王二", area: "J区", onlineStatus: 1 }, + ]); + const [block4List, setBlock4List] = useState([ + { alarmContent: "SOS紧急告警", personnelInvolved: "张三", dispositionStatus: 1 }, + { alarmContent: "静止/滞留告警", personnelInvolved: "李四", dispositionStatus: 2 }, + { alarmContent: "电子围栏越界", personnelInvolved: "王五", dispositionStatus: 1 }, + { alarmContent: "非授权区域停留", personnelInvolved: "赵六", dispositionStatus: 3 }, + { alarmContent: "设备及信号类告警", personnelInvolved: "钱七", dispositionStatus: 1 }, + { alarmContent: "聚集告警", personnelInvolved: "孙八", dispositionStatus: 2 }, + { alarmContent: "单独作业告警", personnelInvolved: "周九", dispositionStatus: 1 }, + { alarmContent: "超员/缺员告警", personnelInvolved: "吴十", dispositionStatus: 3 }, + { alarmContent: "SOS紧急告警", personnelInvolved: "郑一", dispositionStatus: 1 }, + { alarmContent: "静止/滞留告警", personnelInvolved: "王二", dispositionStatus: 2 }, + ]); + + useMount(() => { + initEcharts1(main1Ref, chart1Instance, [ + { name: "SOS紧急告警", value: "120" }, + { name: "静止/滞留告警", value: "10" }, + { name: "电子围栏越界", value: "10" }, + { name: "非授权区域停留", value: "20" }, + { name: "设备及信号类告警", value: "30" }, + { name: "聚集告警", value: "40" }, + { name: "单独作业告警", value: "50" }, + { name: "超员/缺员告警", value: "60" }, + { name: "已处置报警数/报警数", value: "10" }, + ]); + initEcharts2(main2Ref, chart2Instance, [ + { name: "A区", unitPersonnelCount: 120, relatedPartyPersonnelCount: 85 }, + { name: "B区", unitPersonnelCount: 95, relatedPartyPersonnelCount: 70 }, + { name: "C区", unitPersonnelCount: 80, relatedPartyPersonnelCount: 60 }, + { name: "D区", unitPersonnelCount: 150, relatedPartyPersonnelCount: 110 }, + { name: "E区", unitPersonnelCount: 75, relatedPartyPersonnelCount: 55 }, + { name: "F区", unitPersonnelCount: 110, relatedPartyPersonnelCount: 80 }, + { name: "G区", unitPersonnelCount: 65, relatedPartyPersonnelCount: 45 }, + { name: "H区", unitPersonnelCount: 140, relatedPartyPersonnelCount: 100 }, + { name: "I区", unitPersonnelCount: 90, relatedPartyPersonnelCount: 65 }, + { name: "J区", unitPersonnelCount: 125, relatedPartyPersonnelCount: 90 }, + ]); + + return () => { + if (chart1Instance.current) { + chart1Instance.current.dispose(); + chart1Instance.current = null; + } + if (chart2Instance.current) { + chart2Instance.current.dispose(); + chart2Instance.current = null; + } + }; + }); + + return ( + <div className="branch_office_renyuan"> + <div className="block1"> + <Title title="报警类型" /> + <div className="options"> + <div ref={main1Ref} style={{ width: "100%", height: "250px" }} /> + </div> + </div> + <div className="block2"> + <Title title="封闭区域人员统计情况" /> + <div className="options"> + <div ref={main2Ref} 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> + <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.area}</div> + <div className="td" style={{ color: item.onlineStatus === 1 ? "#1DB924" : "#fff" }}>{item.onlineStatus === 1 ? "在线" : "离线"}</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> + <div className="scroll"> + <SeamlessScroll list={block4List} step={0.5}> + {block4List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.alarmContent}</div> + <div className="td">{item.personnelInvolved}</div> + <div className="td" style={{ color: item.dispositionStatus === 1 ? "#1DB924" : item.dispositionStatus === 2 ? "#FF611C" : "#258FF1" }}> + {item.dispositionStatus === 1 ? "已处置" : item.dispositionStatus === 2 ? "未处置" : "处置中"} + </div> + </div> + ))} + </SeamlessScroll> + </div> + </div> + </div> + </div> + </div> + ); +} + +export default RenYuan; diff --git a/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less new file mode 100644 index 0000000..ce20015 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/RenYuan/index.less @@ -0,0 +1,106 @@ +.branch_office_renyuan { + .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; + } + } + + .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-image: linear-gradient(to bottom, + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0.8)); + 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: 100px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: repeat(3, 1fr); + background-color: rgba(17, 51, 112, 0.8); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + } + } + } + } + } + + .block4 { + background-image: linear-gradient(to bottom, + rgba(0, 0, 0, 0), + rgba(0, 0, 0, 0.8)); + 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: 100px; + overflow-y: hidden; + } + + .tr { + margin-top: 5px; + display: grid; + grid-template-columns: repeat(3, 1fr); + background-color: rgba(17, 51, 112, 0.8); + + .td { + text-align: center; + font-size: 12px; + color: #fff; + padding: 5px; + } + } + } + } + } +} diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index df7cd0e..6fe12ec 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/src/pages/Container/Map/components/Content/index.js @@ -8,6 +8,7 @@ import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/port 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 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 IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo"; @@ -58,6 +59,8 @@ function Content() { return <BranchMenJin />; if (bottomUtilsCurrentType === "fire") return <BranchXiaoFang />; + if (bottomUtilsCurrentType === "people") + return <BranchRenYuan />; }; 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 3d9e96d..1bc1528 100644 --- a/src/pages/Container/Map/components/Content/port/FengBi/echarts.js +++ b/src/pages/Container/Map/components/Content/port/FengBi/echarts.js @@ -1,7 +1,7 @@ import * as echarts from "echarts"; -export const initEcharts1 = (main1Ref, chartInstance, data) => { - chartInstance.current = echarts.init(main1Ref.current); +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)); 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 23e3b8b..219a466 100644 --- a/src/pages/Container/Map/components/Content/port/FengBi/index.js +++ b/src/pages/Container/Map/components/Content/port/FengBi/index.js @@ -134,7 +134,7 @@ function FengBi() { )} /> <div className="options"> - <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} /> + <div ref={main1Ref} style={{ width: "100%", height: "300px" }} /> </div> </div> <div className="block3"> diff --git a/src/pages/Container/Map/components/Content/port/MenJin/echarts.js b/src/pages/Container/Map/components/Content/port/MenJin/echarts.js index f3bb338..b3b88a8 100644 --- a/src/pages/Container/Map/components/Content/port/MenJin/echarts.js +++ b/src/pages/Container/Map/components/Content/port/MenJin/echarts.js @@ -1,7 +1,7 @@ import * as echarts from "echarts"; import { textFormatter } from "~/pages/Container/Map/js/utils"; -export const initEcharts1 = (main1Ref, chartInstance, data) => { +export const initEcharts1 = (mainRef, chartInstance, data) => { const XAxisData = []; const seriesData1 = []; const seriesData2 = []; @@ -12,7 +12,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => { seriesData2.push(Number(e.CAR_OUT) + Number(e.PEOPLE_OUT)); }); - chartInstance.current = echarts.init(main1Ref.current); + chartInstance.current = echarts.init(mainRef.current); const option = { tooltip: { diff --git a/src/pages/Container/Map/components/Content/port/MenJin/index.js b/src/pages/Container/Map/components/Content/port/MenJin/index.js index 484a881..f4b8dcf 100644 --- a/src/pages/Container/Map/components/Content/port/MenJin/index.js +++ b/src/pages/Container/Map/components/Content/port/MenJin/index.js @@ -131,7 +131,7 @@ const MenJin = () => { <div className="block2"> <Title title="进入进出统计" /> <div className="options"> - <div ref={main1Ref} className="main1_node" style={{ width: "100%", height: "300px" }} /> + <div ref={main1Ref} style={{ width: "100%", height: "300px" }} /> </div> </div> diff --git a/src/pages/Container/Map/components/Content/port/MenJin/index.less b/src/pages/Container/Map/components/Content/port/MenJin/index.less index ca83f90..bf06607 100644 --- a/src/pages/Container/Map/components/Content/port/MenJin/index.less +++ b/src/pages/Container/Map/components/Content/port/MenJin/index.less @@ -54,11 +54,6 @@ rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1; border-top: none; - - .main1_node { - width: 100%; - height: 300px; - } } } diff --git a/src/pages/Container/Map/components/Content/port/WeiXian/echarts.js b/src/pages/Container/Map/components/Content/port/WeiXian/echarts.js index 6e06c04..a85afb1 100644 --- a/src/pages/Container/Map/components/Content/port/WeiXian/echarts.js +++ b/src/pages/Container/Map/components/Content/port/WeiXian/echarts.js @@ -1,6 +1,6 @@ import * as echarts from "echarts"; -export const initEcharts1 = (main1Ref, chartInstance, data) => { +export const initEcharts1 = (mainRef, chartInstance, data) => { const colors = [ "29,128,219", "1,245,255", @@ -59,7 +59,7 @@ export const initEcharts1 = (main1Ref, chartInstance, data) => { }); } - chartInstance.current = echarts.init(main1Ref.current); + chartInstance.current = echarts.init(mainRef.current); const option = { tooltip: { diff --git a/src/pages/Container/Map/components/Content/port/WeiXian/index.js b/src/pages/Container/Map/components/Content/port/WeiXian/index.js index 073f08e..7ebf135 100644 --- a/src/pages/Container/Map/components/Content/port/WeiXian/index.js +++ b/src/pages/Container/Map/components/Content/port/WeiXian/index.js @@ -85,7 +85,7 @@ const WeiXian = () => { <div className="block2"> <Title title="安全作业情况统计" /> <div className="content"> - <div ref={main1Ref} className="main_node_echart" style={{ width: "100%", height: "240px" }} /> + <div ref={main1Ref} style={{ width: "100%", height: "240px" }} /> </div> </div>