分公司BI
LiuJiaNan
parent
cdc618aa1a
commit
ce096c874f
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
|
|
@ -122,7 +122,7 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
|
||||||
},
|
},
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: (params) => {
|
color: () => {
|
||||||
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
|
import icon3 from "~/assets/images/public/bigScreen/ico21.png";
|
||||||
import icon1 from "~/assets/images/public/bigScreen/img10.png";
|
import icon1 from "~/assets/images/public/bigScreen/img10.png";
|
||||||
import icon2 from "~/assets/images/public/bigScreen/img11.png";
|
import icon2 from "~/assets/images/public/bigScreen/img11.png";
|
||||||
import icon3 from "~/assets/images/public/bigScreen/img11.png";
|
|
||||||
import { getAlertColor, getWeatherIcon } from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
|
import { getAlertColor, getWeatherIcon } from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
|
||||||
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
|
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,923 @@
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
|
||||||
|
export const initEcharts1 = (mainRef, chartInstance, data) => {
|
||||||
|
chartInstance.current = echarts.init(mainRef.current);
|
||||||
|
|
||||||
|
const angle = 0;
|
||||||
|
const outerRidus1 = 0.8;
|
||||||
|
const outerRidus2 = 0.85;
|
||||||
|
|
||||||
|
const colors = {
|
||||||
|
重大风险: "#FF0000",
|
||||||
|
较大风险: "#FF7900",
|
||||||
|
一般风险: "#FEAD00",
|
||||||
|
低风险: "#0078FF",
|
||||||
|
};
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
legend: {
|
||||||
|
data: ["重大风险", "较大风险", "一般风险", "低风险"],
|
||||||
|
orient: "vertical",
|
||||||
|
right: "20px",
|
||||||
|
y: "center",
|
||||||
|
itemGap: 30,
|
||||||
|
formatter: (params) => {
|
||||||
|
let value;
|
||||||
|
let valueStyle;
|
||||||
|
switch (params) {
|
||||||
|
case "重大风险":
|
||||||
|
value = data.majorRiskCount;
|
||||||
|
valueStyle = "major_value";
|
||||||
|
break;
|
||||||
|
case "较大风险":
|
||||||
|
value = data.greaterRiskCount;
|
||||||
|
valueStyle = "greater_value";
|
||||||
|
break;
|
||||||
|
case "一般风险":
|
||||||
|
value = data.generalRiskCount;
|
||||||
|
valueStyle = "general_value";
|
||||||
|
break;
|
||||||
|
case "低风险":
|
||||||
|
value = data.lowRiskCount;
|
||||||
|
valueStyle = "low_value";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
value = 0;
|
||||||
|
valueStyle = "default_value";
|
||||||
|
}
|
||||||
|
|
||||||
|
return `{text|${params}: }{${valueStyle}|${value}}`;
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
major_value: {
|
||||||
|
color: colors["重大风险"],
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
padding: [0, 0, 0, 2],
|
||||||
|
},
|
||||||
|
greater_value: {
|
||||||
|
color: colors["较大风险"],
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
padding: [0, 0, 0, 2],
|
||||||
|
},
|
||||||
|
general_value: {
|
||||||
|
color: colors["一般风险"],
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
padding: [0, 0, 0, 2],
|
||||||
|
},
|
||||||
|
low_value: {
|
||||||
|
color: colors["低风险"],
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
padding: [0, 0, 0, 2],
|
||||||
|
},
|
||||||
|
default_value: {
|
||||||
|
color: "#999",
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: "bold",
|
||||||
|
padding: [0, 0, 0, 2],
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
color: "#000",
|
||||||
|
fontSize: 16,
|
||||||
|
padding: [0, 0, 0, 5],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["75%", "55%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: data.majorRiskCount,
|
||||||
|
name: "重大风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["重大风险"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.greaterRiskCount,
|
||||||
|
name: "较大风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["较大风险"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.generalRiskCount,
|
||||||
|
name: "一般风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["一般风险"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.lowRiskCount,
|
||||||
|
name: "低风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["低风险"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["60%", "40%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
z: 10,
|
||||||
|
label: {
|
||||||
|
position: "center",
|
||||||
|
formatter: () => {
|
||||||
|
return "";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: data.majorRiskCount,
|
||||||
|
name: "重大风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["重大风险"],
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.greaterRiskCount,
|
||||||
|
name: "较大风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["较大风险"],
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.generalRiskCount,
|
||||||
|
name: "一般风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["一般风险"],
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: data.lowRiskCount,
|
||||||
|
name: "低风险",
|
||||||
|
itemStyle: {
|
||||||
|
color: colors["低风险"],
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: pieCenterX,
|
||||||
|
cy: pieCenterY,
|
||||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,
|
||||||
|
startAngle: ((0 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((90 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["重大风险"],
|
||||||
|
fill: "transparent",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
|
||||||
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 0 + angle);
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
cx: point.x,
|
||||||
|
cy: point.y,
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["重大风险"],
|
||||||
|
fill: colors["重大风险"],
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: pieCenterX,
|
||||||
|
cy: pieCenterY,
|
||||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,
|
||||||
|
startAngle: ((180 + angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((270 + angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["较大风险"],
|
||||||
|
fill: "transparent",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
|
||||||
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 180 + angle);
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
cx: point.x,
|
||||||
|
cy: point.y,
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["较大风险"],
|
||||||
|
fill: colors["较大风险"],
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: pieCenterX,
|
||||||
|
cy: pieCenterY,
|
||||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,
|
||||||
|
startAngle: ((250 + -angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((10 + -angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["一般风险"],
|
||||||
|
fill: "transparent",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2;
|
||||||
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 250 + -angle);
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
cx: point.x,
|
||||||
|
cy: point.y,
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["一般风险"],
|
||||||
|
fill: colors["一般风险"],
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: "arc",
|
||||||
|
shape: {
|
||||||
|
cx: pieCenterX,
|
||||||
|
cy: pieCenterY,
|
||||||
|
r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,
|
||||||
|
startAngle: ((70 + -angle) * Math.PI) / 180,
|
||||||
|
endAngle: ((200 + -angle) * Math.PI) / 180,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["低风险"],
|
||||||
|
fill: "transparent",
|
||||||
|
lineWidth: 1.5,
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ring5",
|
||||||
|
type: "custom",
|
||||||
|
coordinateSystem: "none",
|
||||||
|
renderItem(params, api) {
|
||||||
|
const pieCenterX = api.getWidth() * 0.35;
|
||||||
|
const pieCenterY = api.getHeight() * 0.5;
|
||||||
|
const r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2;
|
||||||
|
const point = getCirlPoint(pieCenterX, pieCenterY, r, 70 + -angle);
|
||||||
|
return {
|
||||||
|
type: "circle",
|
||||||
|
shape: {
|
||||||
|
cx: point.x,
|
||||||
|
cy: point.y,
|
||||||
|
r: 4,
|
||||||
|
},
|
||||||
|
style: {
|
||||||
|
stroke: colors["低风险"],
|
||||||
|
fill: colors["低风险"],
|
||||||
|
},
|
||||||
|
silent: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
function getCirlPoint(x0, y0, r, angle) {
|
||||||
|
const x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
|
||||||
|
const y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
|
||||||
|
return {
|
||||||
|
x: x1,
|
||||||
|
y: y1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initEcharts2 = (mainRef, chartInstance, data) => {
|
||||||
|
chartInstance.current = echarts.init(mainRef.current);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
color: ["#F1C416", "#0AFCFF"],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
axisPointer: {
|
||||||
|
type: "shadow",
|
||||||
|
label: {
|
||||||
|
backgroundColor: "#6a7985",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "10%",
|
||||||
|
top: 40,
|
||||||
|
padding: "0 0 10 0",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: 10,
|
||||||
|
top: 10,
|
||||||
|
itemGap: 16,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: "#465683",
|
||||||
|
fontStyle: "normal",
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "slider",
|
||||||
|
height: 6,
|
||||||
|
bottom: "6%",
|
||||||
|
show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 50,
|
||||||
|
handleSize: 3,
|
||||||
|
handleStyle: {
|
||||||
|
color: "#465683",
|
||||||
|
},
|
||||||
|
xAxisIndex: [0],
|
||||||
|
filterMode: "filter",
|
||||||
|
showDetail: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: true,
|
||||||
|
data: data.map(item => item.name),
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
margin: 15,
|
||||||
|
color: "#465683",
|
||||||
|
fontStyle: "normal",
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#465683",
|
||||||
|
opacity: 0.2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
splitNumber: 5,
|
||||||
|
axisLabel: {
|
||||||
|
color: "#465683",
|
||||||
|
fontStyle: "normal",
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: ["#465683"],
|
||||||
|
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: {
|
||||||
|
color: () => {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#FF9600",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#F0E203",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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: {
|
||||||
|
color: () => {
|
||||||
|
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: "#19D4FE",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: "#089FFD",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
z: 1,
|
||||||
|
barGap: 0,
|
||||||
|
symbolRepeat: true,
|
||||||
|
symbolSize: [14, 5],
|
||||||
|
data: data.map(item => item.personnelCount),
|
||||||
|
animationEasing: "elasticOut",
|
||||||
|
stack: "1",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initEcharts3 = (mainRef, chartInstance, data) => {
|
||||||
|
chartInstance.current = echarts.init(mainRef.current);
|
||||||
|
|
||||||
|
const colorList1 = ["#FF6B6B", "", "#FFD93D", "", "#6BCF7F", "", "#4ECDC4", "", "#A084CA", "", "#FF9AA2", ""];
|
||||||
|
const colorList2 = ["rgba(255,107,107, 0.6)", "", "rgba(255,217,61, 0.6)", "", "rgba(107,207,127, 0.6)", "", "rgba(78,205,196, 0.6)", "", "rgba(160,132,202, 0.6)", "", "rgba(255,154,162, 0.6)", ""];
|
||||||
|
|
||||||
|
const optionData = [];
|
||||||
|
data.forEach((item) => {
|
||||||
|
optionData.push({ value: item.value, name: item.name });
|
||||||
|
optionData.push({ name: "", value: 1, itemStyle: { color: "transparent" } });
|
||||||
|
});
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
orient: "vertical",
|
||||||
|
right: "10%",
|
||||||
|
top: "center",
|
||||||
|
textStyle: {
|
||||||
|
color: "#3F4554",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
data: data.map(item => item.name),
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
zlevel: 3,
|
||||||
|
radius: ["30%", "70%"],
|
||||||
|
center: ["25%", "50%"],
|
||||||
|
itemStyle: {
|
||||||
|
color(params) {
|
||||||
|
return colorList1[params.dataIndex];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: optionData,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
zlevel: 1,
|
||||||
|
silent: true,
|
||||||
|
radius: ["73%", "80%"],
|
||||||
|
center: ["25%", "50%"],
|
||||||
|
itemStyle: {
|
||||||
|
color(params) {
|
||||||
|
return colorList2[params.dataIndex];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: optionData,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "pie",
|
||||||
|
radius: ["85%", "86%"],
|
||||||
|
center: ["25%", "50%"],
|
||||||
|
emphasis: {
|
||||||
|
scale: false,
|
||||||
|
},
|
||||||
|
clockwise: false,
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 1,
|
||||||
|
shadowColor: "rgba(15, 79, 150,1)",
|
||||||
|
color: "rgba(23,138,173,1)",
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [0],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initEcharts4 = (mainRef, chartInstance, data) => {
|
||||||
|
chartInstance.current = echarts.init(mainRef.current);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
grid: {
|
||||||
|
containLabel: true,
|
||||||
|
bottom: "5%",
|
||||||
|
left: "-15%",
|
||||||
|
top: "10%",
|
||||||
|
right: "5%",
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "value",
|
||||||
|
max: 100,
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: data.map(item => item.name),
|
||||||
|
inverse: true,
|
||||||
|
position: "left",
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
data: data.map(item => item.value),
|
||||||
|
inverse: true,
|
||||||
|
position: "right",
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
margin: -30,
|
||||||
|
fontSize: 14,
|
||||||
|
align: "top",
|
||||||
|
verticalAlign: "bottom",
|
||||||
|
padding: [0, 0, 10, 0],
|
||||||
|
color: "#465683",
|
||||||
|
formatter(value) {
|
||||||
|
return `${value}%`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
inverse: true,
|
||||||
|
position: "left",
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: data.map(item => item.name),
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
margin: -2,
|
||||||
|
fontSize: 14,
|
||||||
|
align: "top",
|
||||||
|
verticalAlign: "bottom",
|
||||||
|
padding: [0, 0, 10, 0],
|
||||||
|
color: "#465683",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: data.map(item => item.value),
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
||||||
|
{ offset: 0, color: "#0096F8" },
|
||||||
|
{ offset: 1, color: "#1CD0E7" },
|
||||||
|
]),
|
||||||
|
borderRadius: 30,
|
||||||
|
},
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 10,
|
||||||
|
showBackground: true,
|
||||||
|
backgroundStyle: {
|
||||||
|
color: "rgba(255,255,255,0.5)",
|
||||||
|
borderRadius: 30,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const initEcharts5 = (mainRef, chartInstance, data) => {
|
||||||
|
chartInstance.current = echarts.init(mainRef.current);
|
||||||
|
|
||||||
|
const option = {
|
||||||
|
color: ["#007CFA", "#009944"],
|
||||||
|
title: [
|
||||||
|
{
|
||||||
|
text: "同比:下降5%",
|
||||||
|
x: 10,
|
||||||
|
y: 10,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#465683",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "环比:提升6%",
|
||||||
|
x: 150,
|
||||||
|
y: 10,
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: "#465683",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
right: 10,
|
||||||
|
top: 10,
|
||||||
|
itemGap: 16,
|
||||||
|
itemWidth: 18,
|
||||||
|
itemHeight: 10,
|
||||||
|
textStyle: {
|
||||||
|
color: "#465683",
|
||||||
|
fontStyle: "normal",
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: "3%",
|
||||||
|
right: "4%",
|
||||||
|
bottom: "10%",
|
||||||
|
top: 40,
|
||||||
|
padding: "0 0 10 0",
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: "slider",
|
||||||
|
height: 6,
|
||||||
|
bottom: "6%",
|
||||||
|
show: true,
|
||||||
|
start: 0,
|
||||||
|
end: 50,
|
||||||
|
handleSize: 3,
|
||||||
|
handleStyle: {
|
||||||
|
color: "#465683",
|
||||||
|
},
|
||||||
|
xAxisIndex: [0],
|
||||||
|
filterMode: "filter",
|
||||||
|
showDetail: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: "category",
|
||||||
|
boundaryGap: true,
|
||||||
|
data: data.map(item => item.department),
|
||||||
|
axisLabel: {
|
||||||
|
interval: 0,
|
||||||
|
margin: 15,
|
||||||
|
color: "#465683",
|
||||||
|
fontStyle: "normal",
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: "#465683",
|
||||||
|
opacity: 0.2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: "value",
|
||||||
|
splitNumber: 5,
|
||||||
|
axisLabel: {
|
||||||
|
color: "#465683",
|
||||||
|
fontStyle: "normal",
|
||||||
|
fontFamily: "微软雅黑",
|
||||||
|
fontSize: 12,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: ["#465683"],
|
||||||
|
opacity: 0.06,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: "同比",
|
||||||
|
type: "line",
|
||||||
|
data: data.map(item => item.yearOnYear),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "环比",
|
||||||
|
type: "line",
|
||||||
|
data: data.map(item => item.monthOnMonth),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
chartInstance.current.setOption(option);
|
||||||
|
};
|
||||||
|
|
@ -1,12 +1,275 @@
|
||||||
|
import { useEventListener, useMount } from "ahooks";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
|
import { getAlertColor, getWeatherIcon } from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft";
|
||||||
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
|
import Title from "~/pages/Container/WhiteBranchOffice/components/Title";
|
||||||
|
import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
function CenterPanel() {
|
function CenterPanel() {
|
||||||
|
const [weatherData, setWeatherData] = useState({
|
||||||
|
text: "晴天",
|
||||||
|
temp: "36.5",
|
||||||
|
wind_class: "3级",
|
||||||
|
wind_dir: "西南风",
|
||||||
|
wind_angle: 229,
|
||||||
|
prec_1h: 0,
|
||||||
|
});
|
||||||
|
const [alert, setAlert] = useState([]);
|
||||||
|
const [block1_2List, setBlock1_2List] = useState([
|
||||||
|
{ department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
|
||||||
|
{ department: "销售部", requiredDevices: 80, anchoredDevices: 76 },
|
||||||
|
{ department: "市场部", requiredDevices: 60, anchoredDevices: 58 },
|
||||||
|
{ department: "运营部", requiredDevices: 120, anchoredDevices: 115 },
|
||||||
|
{ department: "客服部", requiredDevices: 90, anchoredDevices: 88 },
|
||||||
|
{ department: "财务部", requiredDevices: 30, anchoredDevices: 29 },
|
||||||
|
{ department: "人事部", requiredDevices: 25, anchoredDevices: 24 },
|
||||||
|
{ department: "研发部", requiredDevices: 200, anchoredDevices: 195 },
|
||||||
|
{ department: "质量部", requiredDevices: 45, anchoredDevices: 42 },
|
||||||
|
{ department: "采购部", requiredDevices: 35, anchoredDevices: 33 },
|
||||||
|
]);
|
||||||
|
const [block1_3List, setBlock1_3List] = useState([
|
||||||
|
{ title: "股份", count1: 100, count2: 80 },
|
||||||
|
{ title: "领域", count1: 50, count2: 40 },
|
||||||
|
{ title: "自查", count1: 50, count2: 40 },
|
||||||
|
{ title: "专项", count1: 50, count2: 40 },
|
||||||
|
]);
|
||||||
|
|
||||||
|
const chart1Instance = useRef(null);
|
||||||
|
const main1Ref = useRef(null);
|
||||||
|
const chart2Instance = useRef(null);
|
||||||
|
const main2Ref = useRef(null);
|
||||||
|
const chart3Instance = useRef(null);
|
||||||
|
const main3Ref = useRef(null);
|
||||||
|
const chart4Instance = useRef(null);
|
||||||
|
const main4Ref = useRef(null);
|
||||||
|
const chart5Instance = useRef(null);
|
||||||
|
const main5Ref = useRef(null);
|
||||||
|
|
||||||
|
const getWeatherData = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch("https://api.map.baidu.com/weather/v1/?district_id=130300&data_type=all&ak=dIqOi34IlTg5FkNck1vqoBpLhPAj36S1");
|
||||||
|
const data = await response.json();
|
||||||
|
setWeatherData(data.result.now);
|
||||||
|
setAlert(Array.isArray(data.result.alerts) ? data.result.alerts : []);
|
||||||
|
}
|
||||||
|
catch (error) {
|
||||||
|
console.error("获取天气数据失败:", error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getWeatherData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEventListener("resize", () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (chart1Instance.current) {
|
||||||
|
chart1Instance.current.resize();
|
||||||
|
}
|
||||||
|
if (chart2Instance.current) {
|
||||||
|
chart2Instance.current.resize();
|
||||||
|
}
|
||||||
|
if (chart3Instance.current) {
|
||||||
|
chart3Instance.current.resize();
|
||||||
|
}
|
||||||
|
if (chart4Instance.current) {
|
||||||
|
chart4Instance.current.resize();
|
||||||
|
}
|
||||||
|
if (chart5Instance.current) {
|
||||||
|
chart5Instance.current.resize();
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
useMount(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
initEcharts1(main1Ref, chart1Instance, {
|
||||||
|
majorRiskCount: 1,
|
||||||
|
greaterRiskCount: 2,
|
||||||
|
generalRiskCount: 3,
|
||||||
|
lowRiskCount: 4,
|
||||||
|
});
|
||||||
|
initEcharts2(main2Ref, chart2Instance, [
|
||||||
|
{ 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 },
|
||||||
|
]);
|
||||||
|
initEcharts3(main3Ref, chart3Instance, [
|
||||||
|
{ name: "火灾隐患", value: "15" },
|
||||||
|
{ name: "电气隐患", value: "22" },
|
||||||
|
{ name: "机械伤害隐患", value: "18" },
|
||||||
|
{ name: "高空坠落隐患", value: "12" },
|
||||||
|
{ name: "化学品泄漏隐患", value: "8" },
|
||||||
|
{ name: "粉尘爆炸隐患", value: "5" },
|
||||||
|
]);
|
||||||
|
initEcharts4(main4Ref, chart4Instance, [
|
||||||
|
{ value: 44, name: "风险点检查覆盖率" },
|
||||||
|
{ value: 43, name: "自查清单检查率" },
|
||||||
|
{ value: 41, name: "安全环保检查完成率" },
|
||||||
|
{ value: 40, name: "隐患整改完成率" },
|
||||||
|
]);
|
||||||
|
initEcharts5(main5Ref, chart5Instance, [
|
||||||
|
{ department: "安全部", yearOnYear: 15, monthOnMonth: 8 },
|
||||||
|
{ department: "生产部", yearOnYear: -12, monthOnMonth: 6 },
|
||||||
|
{ department: "设备部", yearOnYear: 10, monthOnMonth: 5 },
|
||||||
|
{ department: "技术部", yearOnYear: 8, monthOnMonth: 3 },
|
||||||
|
{ department: "质检部", yearOnYear: 6, monthOnMonth: 4 },
|
||||||
|
{ department: "物流部", yearOnYear: 5, monthOnMonth: 2 },
|
||||||
|
{ department: "财务部", yearOnYear: 4, monthOnMonth: 1 },
|
||||||
|
{ department: "人力资源部", yearOnYear: 3, monthOnMonth: 1 },
|
||||||
|
{ department: "生产计划部", yearOnYear: 2, monthOnMonth: 1 },
|
||||||
|
{ department: "质量部", yearOnYear: 1, monthOnMonth: 1 },
|
||||||
|
{ department: "设备管理部", yearOnYear: 1, monthOnMonth: 1 },
|
||||||
|
{ department: "设备管理部", yearOnYear: 1, monthOnMonth: 1 },
|
||||||
|
]);
|
||||||
|
}, 0);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (chart1Instance.current) {
|
||||||
|
chart1Instance.current.dispose();
|
||||||
|
chart1Instance.current = null;
|
||||||
|
}
|
||||||
|
if (chart2Instance.current) {
|
||||||
|
chart2Instance.current.dispose();
|
||||||
|
chart2Instance.current = null;
|
||||||
|
}
|
||||||
|
if (chart3Instance.current) {
|
||||||
|
chart3Instance.current.dispose();
|
||||||
|
chart3Instance.current = null;
|
||||||
|
}
|
||||||
|
if (chart4Instance.current) {
|
||||||
|
chart4Instance.current.dispose();
|
||||||
|
chart4Instance.current = null;
|
||||||
|
}
|
||||||
|
if (chart5Instance.current) {
|
||||||
|
chart5Instance.current.dispose();
|
||||||
|
chart5Instance.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="white_branch_office_center_container">
|
<div className="white_branch_office_center_container">
|
||||||
<div className="block1">
|
<div className="block1">
|
||||||
<Title title="企业安全状态信息" />
|
<Title title="企业安全状态信息" />
|
||||||
<div className="container">
|
<div className="container">
|
||||||
|
<div>
|
||||||
|
<div className="block1_1">
|
||||||
|
<div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
|
||||||
|
</div>
|
||||||
|
<div className="block1_2">
|
||||||
|
<div className="alert">
|
||||||
|
<div className="scroll">
|
||||||
|
<SeamlessScroll list={alert} step={0.5} limitScrollNum={2} singleHeight={22}>
|
||||||
|
{
|
||||||
|
alert.map((item, index) => (
|
||||||
|
<div className="item" key={index}>
|
||||||
|
<div className="title" style={{ color: getAlertColor(item.level) === "#fff" ? "#2E75C6" : getAlertColor(item.level) }}>{item.title}</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="weather">
|
||||||
|
<div className="icon">
|
||||||
|
<div className="img">
|
||||||
|
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
||||||
|
</div>
|
||||||
|
<div className="text">{weatherData.text}</div>
|
||||||
|
</div>
|
||||||
|
<div className="items">
|
||||||
|
<div className="item">
|
||||||
|
<div className="info">
|
||||||
|
<div className="label">温度：</div>
|
||||||
|
<div className="value">{`${weatherData.temp}℃`}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="item">
|
||||||
|
<div className="info">
|
||||||
|
<div className="label">风速：</div>
|
||||||
|
<div className="value">{weatherData.wind_class}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="table">
|
||||||
|
<div className="tr">
|
||||||
|
<div className="td">部门名称</div>
|
||||||
|
<div className="td">需锚定设备数</div>
|
||||||
|
<div className="td">已锚定设备数</div>
|
||||||
|
</div>
|
||||||
|
<div className="scroll">
|
||||||
|
<SeamlessScroll list={block1_2List} step={0.5}>
|
||||||
|
{block1_2List.map((item, index) => (
|
||||||
|
<div key={index} className="tr">
|
||||||
|
<div className="td">{item.department}</div>
|
||||||
|
<div className="td">{item.requiredDevices}</div>
|
||||||
|
<div className="td">{item.anchoredDevices}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block1_3">
|
||||||
|
<div className="items">
|
||||||
|
{
|
||||||
|
block1_3List.map((item, index) => (
|
||||||
|
<div key={index} className="item">
|
||||||
|
<div className="title">{item.title}</div>
|
||||||
|
<div className="info">
|
||||||
|
<div>
|
||||||
|
<div className="label">发现数</div>
|
||||||
|
<div className="value" style={{ color: "#2D8EF3" }}>{item.count1}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="label">整改数</div>
|
||||||
|
<div className="value" style={{ color: "#F78F00" }}>{item.count1}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block2">
|
||||||
|
<div className="block2_1">
|
||||||
|
<Title title="发现整改验收情况" />
|
||||||
|
<div className="container">
|
||||||
|
<div ref={main2Ref} style={{ width: "100%", height: "225px" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block2_2">
|
||||||
|
<Title title="隐患类型统计" />
|
||||||
|
<div className="container">
|
||||||
|
<div ref={main3Ref} style={{ width: "100%", height: "225px" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block3">
|
||||||
|
<div className="block3_1">
|
||||||
|
<Title title="隐患排查治理信息" />
|
||||||
|
<div className="container">
|
||||||
|
<div ref={main4Ref} style={{ width: "100%", height: "225px" }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="block3_2">
|
||||||
|
<Title title="隐患治理的环比与同比情况" />
|
||||||
|
<div className="container">
|
||||||
|
<div ref={main5Ref} style={{ width: "100%", height: "225px" }} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,6 @@
|
||||||
.white_branch_office_center_container{
|
@import "../../index.less";
|
||||||
|
|
||||||
|
.white_branch_office_center_container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
.block1 {
|
.block1 {
|
||||||
|
|
@ -7,7 +9,218 @@
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #E0EDFD;
|
background-color: #E0EDFD;
|
||||||
padding: 16px 20px;
|
padding: 16px 11px;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block1_1 {
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block1_2 {
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
|
padding: 10px 11px;
|
||||||
|
|
||||||
|
.weather {
|
||||||
|
display: flex;
|
||||||
|
gap: 40px;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: #2B4977;
|
||||||
|
writing-mode: vertical-lr;
|
||||||
|
letter-spacing: 5px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.items {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px 10px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: calc((100% / 2) - 10px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.info {
|
||||||
|
.label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #2B4977;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 20px;
|
||||||
|
color: #2E75C6;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.alert {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
height: 20px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
.title {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-style(50px, repeat(3, 1fr));
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block1_3 {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
.items {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
gap: 9px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
|
padding: 10px 20px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: #305683;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
&:first-child {
|
||||||
|
margin-right: 30px;
|
||||||
|
position: relative;
|
||||||
|
&::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 60%;
|
||||||
|
background-color: rgba(48, 86, 131, 0.3);
|
||||||
|
top: 20%;
|
||||||
|
left: calc(100% + 30px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #305683;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block2{
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.block2_1{
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block2_2{
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.block3{
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.block3_1{
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
|
}
|
||||||
|
|
||||||
|
.block3_2{
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background-image: linear-gradient(180deg, rgb(217, 239, 253) 0%, rgb(225, 243, 254) 58%, rgb(232, 246, 255) 100%);
|
||||||
|
box-shadow: inset 0 1px 3px 0 rgba(49, 122, 202, 0.48);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -73,7 +73,7 @@
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #E0EDFD;
|
background-color: #E0EDFD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
.table-style(280px, 1.5fr 1fr 1fr 1fr 1.6fr);
|
.table-style(230px, 1.5fr 1fr 1fr 1fr 1.6fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -86,7 +86,7 @@
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #E0EDFD;
|
background-color: #E0EDFD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
.table-style(280px, repeat(5, 1fr));
|
.table-style(230px, repeat(5, 1fr));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #E0EDFD;
|
background-color: #E0EDFD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
.table-style(100px, repeat(4, 1fr));
|
.table-style(70px, repeat(4, 1fr));
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: #3B445C;
|
color: #3B445C;
|
||||||
|
|
@ -133,7 +133,7 @@
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #E0EDFD;
|
background-color: #E0EDFD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
.table-style(100px, repeat(5, 1fr));
|
.table-style(70px, repeat(5, 1fr));
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: #3B445C;
|
color: #3B445C;
|
||||||
|
|
@ -164,7 +164,7 @@
|
||||||
border-top: none;
|
border-top: none;
|
||||||
background-color: #E0EDFD;
|
background-color: #E0EDFD;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
.table-style(120px, 2fr 1fr 1fr 1fr);
|
.table-style(70px, 2fr 1fr 1fr 1fr);
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
color: #3B445C;
|
color: #3B445C;
|
||||||
|
|
|
||||||
|
|
@ -13,10 +13,13 @@ function WhiteBranchOffice() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}>
|
<div className="white_branch_office" style={{ backgroundImage: `url(${bg})` }}>
|
||||||
|
<div className="header"></div>
|
||||||
|
<div className="white_branch_office_container">
|
||||||
<LeftPanel />
|
<LeftPanel />
|
||||||
<CenterPanel />
|
<CenterPanel />
|
||||||
<RightPanel />
|
<RightPanel />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,21 @@
|
||||||
.white_branch_office{
|
.white_branch_office {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.white_branch_office_container {
|
||||||
|
margin-top: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding: 0 9px;
|
padding: 0 9px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-style(@height, @grid-template-columns) {
|
.table-style(@height, @grid-template-columns) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue