650 lines
16 KiB
JavaScript
650 lines
16 KiB
JavaScript
|
|
||
|
|
// 在岗率数据配置
|
||
|
|
let guardData = [
|
||
|
|
{
|
||
|
|
value: 20,
|
||
|
|
name: '合格率',
|
||
|
|
title: {
|
||
|
|
color: '#12CDA2',
|
||
|
|
offsetCenter: ['0%', '20%'],
|
||
|
|
fontSize: 0.6316 * basePx
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
offsetCenter: ['0%', '-10%'],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
];
|
||
|
|
let guardOption = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
id: '在岗率',
|
||
|
|
radius: '99%',
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 90,
|
||
|
|
endAngle: -270,
|
||
|
|
pointer: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
overlap: false,
|
||
|
|
roundCap: false,
|
||
|
|
clip: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 1.0526 * basePx,
|
||
|
|
color: [[1, '#071646']],
|
||
|
|
shadowColor: '#1C466C',
|
||
|
|
shadowBlur: 2,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#0FD09C',
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
distance: 0,
|
||
|
|
length: 0.5263 * basePx
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: guardData,
|
||
|
|
detail: {
|
||
|
|
offsetCenter: ['0%', '120%'],
|
||
|
|
fontSize: 1.0526 * basePx,
|
||
|
|
color: '#12CDA2',
|
||
|
|
formatter: '{value}{a|%}',
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: 0.4211 * basePx,
|
||
|
|
color: '#1AB1FF'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// 风险管控
|
||
|
|
let riskData = [
|
||
|
|
{ value: 3, name: '四级/重大风险', label: { color: '#FF7473' }, itemStyle: { color: '#FF7473' }, labelLine: { lineStyle: { color: '#FF7473' } } },
|
||
|
|
{ value: 4, name: '一级/低风险', label: { color: '#5C5AFF' }, itemStyle: { color: '#5C5AFF' }, labelLine: { lineStyle: { color: '#5C5AFF' } } },
|
||
|
|
{ value: 1, name: '三级/较大风险', label: { color: '#FFA502' }, itemStyle: { color: '#FFA502' }, labelLine: { lineStyle: { color: '#FFA502' } } },
|
||
|
|
{ value: 7, name: '二级/一般风险', label: { color: '#E7EA2E' }, itemStyle: { color: '#E7EA2E' }, labelLine: { lineStyle: { color: '#E7EA2E' } } },
|
||
|
|
]
|
||
|
|
let riskOption = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['20%', '70%'],
|
||
|
|
center: ['50%', '50%'],
|
||
|
|
label: {
|
||
|
|
formatter: '{b}\n{c}'
|
||
|
|
},
|
||
|
|
data: riskData.sort(function (a, b) {
|
||
|
|
return a.value - b.value;
|
||
|
|
}),
|
||
|
|
roseType: 'radius',
|
||
|
|
|
||
|
|
animationType: 'scale',
|
||
|
|
animationEasing: 'elasticOut',
|
||
|
|
animationDelay: function (idx) {
|
||
|
|
return Math.random() * 200;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// 作业许可统计
|
||
|
|
let dataAxis = ['[动火]', '[临电]', '[高处]', '[动土]', '[断路]', '[吊装]', '[受限]'];
|
||
|
|
let data = [220, 182, 191, 234, 290, 330, 3101];
|
||
|
|
let yMax = 500;
|
||
|
|
let dataShadow = [];
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
dataShadow.push(yMax);
|
||
|
|
}
|
||
|
|
let jobOption = {
|
||
|
|
grid: {
|
||
|
|
top: 1.3158 * basePx,
|
||
|
|
left: 3.6842 * basePx,
|
||
|
|
height: '85%',
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
show: false,
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
data: dataAxis,
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
triggerEvent: true,
|
||
|
|
axisLabel: {
|
||
|
|
color: '#7ECEF7',
|
||
|
|
width: 2.6316 * basePx,
|
||
|
|
overflow: 'truncate',
|
||
|
|
align: 'right',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
data: data,
|
||
|
|
position: 'left',
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
inside: true,
|
||
|
|
fontSize: 0.5263 * basePx,
|
||
|
|
color: '#ffffff'
|
||
|
|
},
|
||
|
|
z: 0.5263 * basePx
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'bar',
|
||
|
|
showBackground: true,
|
||
|
|
backgroundStyle: {
|
||
|
|
color: '#091F60',
|
||
|
|
borderRadius: 0.2632 * basePx,
|
||
|
|
},
|
||
|
|
barWidth: 0.5263 * basePx,
|
||
|
|
itemStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||
|
|
{ offset: 0, color: '#12CDA2' },
|
||
|
|
{ offset: 1, color: '#091F60' }
|
||
|
|
]),
|
||
|
|
barBorderRadius: [0.2632 * basePx, 0.2632 * basePx, 0.2632 * basePx, 0.2632 * basePx]
|
||
|
|
},
|
||
|
|
data: data
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// 安全隐患分析
|
||
|
|
let xdata = ['临时用电', 'xxxx', '文明施工', '脚手架', '高处作业', '其他']
|
||
|
|
let data1 = [100, 1000, 80, 916, 700, 600, 30]
|
||
|
|
let safetyAnalysisOption = {
|
||
|
|
grid: {
|
||
|
|
left: 2.1053 * basePx,
|
||
|
|
right: '3%',
|
||
|
|
bottom: 1.0526 * basePx,
|
||
|
|
top: '15%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
data: xdata,
|
||
|
|
triggerEvent: true,
|
||
|
|
axisTick: {
|
||
|
|
// 刻度线
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: true,
|
||
|
|
rotate: -30,
|
||
|
|
interval: 0,
|
||
|
|
width: 3.1579 * basePx,
|
||
|
|
overflow: 'truncate',
|
||
|
|
textStyle: {
|
||
|
|
color: '#00BEFF',
|
||
|
|
fontSize: 0.6316 * basePx
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
splitLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: '#0D3C65'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
// y轴线
|
||
|
|
show: true,
|
||
|
|
textStyle: {
|
||
|
|
color: '#00BEFF',
|
||
|
|
fontSize: 0.6316 * basePx
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: 'hill',
|
||
|
|
type: 'pictorialBar',
|
||
|
|
barWidth: 1.5789 * basePx,
|
||
|
|
symbol:
|
||
|
|
'triangle',
|
||
|
|
itemStyle: {
|
||
|
|
normal: {
|
||
|
|
// 渐变色
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: '#00FEFF'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: '#4390FA'
|
||
|
|
}
|
||
|
|
])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data: data1,
|
||
|
|
z: 10
|
||
|
|
},
|
||
|
|
]
|
||
|
|
}
|
||
|
|
|
||
|
|
// 质量统计
|
||
|
|
|
||
|
|
const quality1Data = [
|
||
|
|
{
|
||
|
|
value: 37.5,
|
||
|
|
name: '整改率',
|
||
|
|
title: {
|
||
|
|
color: '#1AB1FF',
|
||
|
|
offsetCenter: ['0%', '125%'],
|
||
|
|
fontSize: 0.6316 * basePx
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
offsetCenter: ['0%', '10%'],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
];
|
||
|
|
let quality1ption = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
id: '整改率',
|
||
|
|
radius: '75%',
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 90,
|
||
|
|
endAngle: -270,
|
||
|
|
pointer: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
overlap: false,
|
||
|
|
roundCap: false,
|
||
|
|
clip: false,
|
||
|
|
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 0.5263 * basePx,
|
||
|
|
color: [[1, '#0F2164']]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#FFB260',
|
||
|
|
borderRadius: 0
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
distance: 0,
|
||
|
|
length: 0.5263 * basePx
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: quality1Data,
|
||
|
|
detail: {
|
||
|
|
fontSize: 0.7368 * basePx,
|
||
|
|
color: '#FFB260',
|
||
|
|
formatter: '{value}{a|%}',
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: 0.4211 * basePx,
|
||
|
|
color: '#1AB1FF'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
const quality2Data = [
|
||
|
|
{
|
||
|
|
value: 98.2,
|
||
|
|
name: '合格率',
|
||
|
|
title: {
|
||
|
|
color: '#1AB1FF',
|
||
|
|
offsetCenter: ['0%', '125%'],
|
||
|
|
fontSize: 0.6316 * basePx
|
||
|
|
},
|
||
|
|
detail: {
|
||
|
|
valueAnimation: true,
|
||
|
|
offsetCenter: ['0%', '10%'],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
];
|
||
|
|
let quality2ption = {
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
id: '合格率',
|
||
|
|
radius: '70%',
|
||
|
|
type: 'gauge',
|
||
|
|
startAngle: 90,
|
||
|
|
endAngle: -270,
|
||
|
|
pointer: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
progress: {
|
||
|
|
show: true,
|
||
|
|
overlap: false,
|
||
|
|
roundCap: false,
|
||
|
|
clip: false,
|
||
|
|
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
width: 0.5263 * basePx,
|
||
|
|
color: [[1, '#0F2164']]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: '#12CDA2',
|
||
|
|
borderRadius: 0
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: false,
|
||
|
|
distance: 0,
|
||
|
|
length: 0.5263 * basePx
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
data: quality2Data,
|
||
|
|
detail: {
|
||
|
|
fontSize: 0.7368 * basePx,
|
||
|
|
color: '#12CDA2',
|
||
|
|
formatter: '{value}{a|%}',
|
||
|
|
rich: {
|
||
|
|
a: {
|
||
|
|
fontSize: 0.4211 * basePx,
|
||
|
|
color: '#1AB1FF'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// 地图
|
||
|
|
let chinaData = [
|
||
|
|
{
|
||
|
|
name: 'xxxx项目',
|
||
|
|
value: [117.27, 31.86, {value: 55}],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'xxxxx项目',
|
||
|
|
value: [116.40, 39.90, {value: 222}],
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'xxxxxx项目',
|
||
|
|
value: [106.55, 29.56, {value: 111}],
|
||
|
|
}
|
||
|
|
]
|
||
|
|
let chinaOption = {
|
||
|
|
tooltip: { show: false, },
|
||
|
|
geo: [
|
||
|
|
{
|
||
|
|
// 地理坐标系组件
|
||
|
|
map: "china",
|
||
|
|
roam: false, // 可以缩放和平移
|
||
|
|
aspectScale: 0.75, // 比例
|
||
|
|
top: 6.3158 * basePx,
|
||
|
|
zlevel: 1,
|
||
|
|
zoom: 1.4,
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
backgroundColor: "#031849",
|
||
|
|
borderColor: 'none',
|
||
|
|
formatter: function(h){
|
||
|
|
console.log(h)
|
||
|
|
let name = h.data.name;
|
||
|
|
let data = h.data.value;
|
||
|
|
return `${name}: ${data[2].value}`
|
||
|
|
},
|
||
|
|
},
|
||
|
|
regions: [
|
||
|
|
{
|
||
|
|
name: "南海诸岛",
|
||
|
|
itemStyle: {
|
||
|
|
// 隐藏地图
|
||
|
|
normal: {
|
||
|
|
opacity: 0, // 为 0 时不绘制该图形
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false // 隐藏文字
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
itemStyle: {
|
||
|
|
// 图形上的地图区域
|
||
|
|
normal: {
|
||
|
|
areaColor: "#1B3885",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
emphasis: {
|
||
|
|
disabled: true,
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 地理坐标系组件
|
||
|
|
map: "china",
|
||
|
|
roam: false, // 可以缩放和平移
|
||
|
|
aspectScale: 0.75, // 比例
|
||
|
|
top: 6.3158 * basePx,
|
||
|
|
zlevel: 10,
|
||
|
|
zoom: 1.4,
|
||
|
|
regions: [
|
||
|
|
{
|
||
|
|
name: "南海诸岛",
|
||
|
|
itemStyle: {
|
||
|
|
// 隐藏地图
|
||
|
|
normal: {
|
||
|
|
opacity: 0, // 为 0 时不绘制该图形
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false // 隐藏文字
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
itemStyle: {
|
||
|
|
// 图形上的地图区域
|
||
|
|
normal: {
|
||
|
|
borderWidth: 0.1053 * basePx,
|
||
|
|
areaColor: "#214DA9",
|
||
|
|
borderColor: "#2FA1D7",
|
||
|
|
// shadowBlur: 20,
|
||
|
|
// shadowOffsetY:10,
|
||
|
|
// shadowOffsetX:10,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
disabled: true,
|
||
|
|
itemStyle: {
|
||
|
|
areaColor: 'red',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [{
|
||
|
|
id: 'isSkip',
|
||
|
|
type: 'effectScatter',
|
||
|
|
coordinateSystem: 'geo',
|
||
|
|
symbolSize: 1.0526 * basePx,
|
||
|
|
zlevel: 100,
|
||
|
|
selectedMode: true,
|
||
|
|
select: {
|
||
|
|
disabled: true,
|
||
|
|
label: true,
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: "#FDFF04"
|
||
|
|
},
|
||
|
|
rippleEffect: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data: chinaData,
|
||
|
|
}],
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let wordOption = {
|
||
|
|
tooltip: { show: false, },
|
||
|
|
geo: [
|
||
|
|
{
|
||
|
|
// 地理坐标系组件
|
||
|
|
map: "word",
|
||
|
|
roam: false, // 可以缩放和平移
|
||
|
|
aspectScale: 0.75, // 比例
|
||
|
|
top: 6.3158 * basePx,
|
||
|
|
zlevel: 1,
|
||
|
|
zoom: 1.4,
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
backgroundColor: "#031849",
|
||
|
|
borderColor: 'none'
|
||
|
|
// formatter: function (h){
|
||
|
|
// let str = `<a style="color: red;"> 1111</a>`
|
||
|
|
// return str
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
regions: [
|
||
|
|
{
|
||
|
|
name: "南海诸岛",
|
||
|
|
itemStyle: {
|
||
|
|
// 隐藏地图
|
||
|
|
normal: {
|
||
|
|
opacity: 0, // 为 0 时不绘制该图形
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false // 隐藏文字
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
itemStyle: {
|
||
|
|
// 图形上的地图区域
|
||
|
|
normal: {
|
||
|
|
areaColor: "#1B3885",
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
emphasis: {
|
||
|
|
disabled: true,
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
{
|
||
|
|
// 地理坐标系组件
|
||
|
|
map: "word",
|
||
|
|
roam: false, // 可以缩放和平移
|
||
|
|
aspectScale: 0.75, // 比例
|
||
|
|
top: 6.3158 * basePx,
|
||
|
|
zlevel: 10,
|
||
|
|
zoom: 1.4,
|
||
|
|
regions: [
|
||
|
|
{
|
||
|
|
name: "南海诸岛",
|
||
|
|
itemStyle: {
|
||
|
|
// 隐藏地图
|
||
|
|
normal: {
|
||
|
|
opacity: 0, // 为 0 时不绘制该图形
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false // 隐藏文字
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
itemStyle: {
|
||
|
|
// 图形上的地图区域
|
||
|
|
normal: {
|
||
|
|
borderWidth: 0.1053 * basePx,
|
||
|
|
areaColor: "#214DA9",
|
||
|
|
borderColor: "#2FA1D7",
|
||
|
|
// shadowBlur: 20,
|
||
|
|
// shadowOffsetY:10,
|
||
|
|
// shadowOffsetX:10,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
disabled: true,
|
||
|
|
itemStyle: {
|
||
|
|
areaColor: 'red',
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [{
|
||
|
|
id: 'isSkip',
|
||
|
|
type: 'effectScatter',
|
||
|
|
coordinateSystem: 'geo',
|
||
|
|
symbolSize: 1.0526 * basePx,
|
||
|
|
zlevel: 100,
|
||
|
|
selectedMode: true,
|
||
|
|
select: {
|
||
|
|
disabled: true,
|
||
|
|
label: true,
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
color: "#FDFF04"
|
||
|
|
},
|
||
|
|
rippleEffect: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data: chinaData,
|
||
|
|
}],
|
||
|
|
|
||
|
|
}
|