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 0000000..28c14fe Binary files /dev/null and b/src/assets/images/map_bi/content/bg4.png differ diff --git a/src/assets/images/map_bi/content/bg5.png b/src/assets/images/map_bi/content/bg5.png new file mode 100644 index 0000000..4ffa53c Binary files /dev/null and b/src/assets/images/map_bi/content/bg5.png differ 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; + } + } + } + } + } +}