数据分析-
This commit is contained in:
parent
018f52c49e
commit
c3aa3d859f
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,322 @@
|
|||
let table, layer, form;
|
||||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
|
||||
layui.use(["layer", "table", "form"], function () {
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
form = layui.form;
|
||||
|
||||
getEnvironmental();
|
||||
|
||||
getSafetyAlert();
|
||||
});
|
||||
|
||||
function getEnvironmental() {
|
||||
let yList = [32, 58, 64, 164, 99];
|
||||
let xData = ['学前', '小学', '初中', '高中', 'qq'];
|
||||
initEnvironmental(yList, xData)
|
||||
}
|
||||
|
||||
function initEnvironmental(yList, xData) {
|
||||
let barWidth = 60;
|
||||
let colors = []
|
||||
for (let i = 0; i < xData.length; i++) {
|
||||
colors.push({
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1CFFF4' // 最左边
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1CFFF4' // 左边的右边 颜色
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1CFFF4' // 右边的左边 颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1CFFF4'
|
||||
}]
|
||||
})
|
||||
}
|
||||
const myChart = echarts.init(document.getElementById("environmental"));
|
||||
const option = {
|
||||
//提示框
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: "{b} : {c}",
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
/**区域位置*/
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
top: '30%',
|
||||
bottom: '30%',
|
||||
},
|
||||
//X轴
|
||||
xAxis: {
|
||||
data: xData,
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,1)',
|
||||
shadowColor: 'rgba(255,255,255,1)',
|
||||
shadowOffsetX: '20',
|
||||
},
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolOffset: [0, 25]
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 15,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#075858'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
margin: 8,
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex % 7];
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: [barWidth / 2, -(barWidth + 20)],
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontStyle: 'bold',
|
||||
align: 'center',
|
||||
},
|
||||
data: yList
|
||||
},
|
||||
{
|
||||
z: 2,
|
||||
type: 'pictorialBar',
|
||||
data: yList,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [barWidth, barWidth * 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex % 7];
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 3,
|
||||
type: 'pictorialBar',
|
||||
symbolPosition: 'end',
|
||||
data: yList,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [barWidth, barWidth * 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex % 7].colorStops[0].color;
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getSafetyAlert() {
|
||||
let yList = [32, 58, 64, 164, 99];
|
||||
let xData = ['学前', '小学', '初中', '高中', 'qq'];
|
||||
initSafetyAlert(yList, xData)
|
||||
}
|
||||
|
||||
function initSafetyAlert(yList, xData) {
|
||||
let barWidth = 60;
|
||||
let colors = []
|
||||
for (let i = 0; i < xData.length; i++) {
|
||||
colors.push({
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1CFFF4' // 最左边
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1CFFF4' // 左边的右边 颜色
|
||||
}, {
|
||||
offset: 0.5,
|
||||
color: '#1CFFF4' // 右边的左边 颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#1CFFF4'
|
||||
}]
|
||||
})
|
||||
}
|
||||
const myChart = echarts.init(document.getElementById("safetyAlert"));
|
||||
const option = {
|
||||
//提示框
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: "{b} : {c}",
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
/**区域位置*/
|
||||
grid: {
|
||||
left: '8%',
|
||||
right: '3%',
|
||||
top: '30%',
|
||||
bottom: '30%',
|
||||
},
|
||||
//X轴
|
||||
xAxis: {
|
||||
data: xData,
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,1)',
|
||||
shadowColor: 'rgba(255,255,255,1)',
|
||||
shadowOffsetX: '20',
|
||||
},
|
||||
symbol: ['none', 'arrow'],
|
||||
symbolOffset: [0, 25]
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 30,
|
||||
fontSize: 15,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#075858'
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#FFFFFF',
|
||||
margin: 8,
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex % 7];
|
||||
}
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: [barWidth / 2, -(barWidth + 20)],
|
||||
color: '#ffffff',
|
||||
fontSize: 14,
|
||||
fontStyle: 'bold',
|
||||
align: 'center',
|
||||
},
|
||||
data: yList
|
||||
},
|
||||
{
|
||||
z: 2,
|
||||
type: 'pictorialBar',
|
||||
data: yList,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '50%'],
|
||||
symbolSize: [barWidth, barWidth * 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex % 7];
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 3,
|
||||
type: 'pictorialBar',
|
||||
symbolPosition: 'end',
|
||||
data: yList,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [barWidth, barWidth * 0.5],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 0,
|
||||
color: function (params) {
|
||||
return colors[params.dataIndex % 7].colorStops[0].color;
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,972 @@
|
|||
let table, layer, form;
|
||||
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';
|
||||
|
||||
layui.use(["layer", "table", "form"], function () {
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
form = layui.form;
|
||||
|
||||
getProjectProgress();
|
||||
|
||||
getProjectCost();
|
||||
|
||||
getPprojectRisk();
|
||||
|
||||
//土建专业
|
||||
getCivilEngineering();
|
||||
|
||||
//电气专业
|
||||
getElectrical();
|
||||
|
||||
//项目成本
|
||||
getItemCost();
|
||||
|
||||
//总风险数量
|
||||
getTotalRisk();
|
||||
});
|
||||
|
||||
function getProjectProgress() {
|
||||
initProjectProgress()
|
||||
}
|
||||
|
||||
function initProjectProgress() {
|
||||
const myChart = echarts.init(document.getElementById("projectProgress"));
|
||||
const option = {
|
||||
title: {
|
||||
text: '当前工程进度',
|
||||
left: '48%',
|
||||
top: '30%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 15,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
graphic: {
|
||||
type: 'text',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: '70%',
|
||||
textAlign: 'center',
|
||||
fill: '#79FFFF',
|
||||
fontSize: 24,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['25%', '50%'],
|
||||
center: ['30%', '50%'],
|
||||
startAngle: 90,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "#3BE6E6"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
], false),
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(8, 220, 224, 0.1)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getProjectCost() {
|
||||
initProjectCost();
|
||||
}
|
||||
|
||||
function initProjectCost() {
|
||||
const myChart = echarts.init(document.getElementById("projectCost"));
|
||||
const option = {
|
||||
title: {
|
||||
text: '当前成本投入',
|
||||
left: '48%',
|
||||
top: '30%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 15,
|
||||
fontWeight: 'normal',
|
||||
}
|
||||
},
|
||||
graphic: {
|
||||
type: 'text',
|
||||
left: '50%',
|
||||
top: '50%',
|
||||
style: {
|
||||
text: '70%',
|
||||
textAlign: 'center',
|
||||
fill: '#79FFFF',
|
||||
fontSize: 24,
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['25%', '50%'],
|
||||
center: ['30%', '50%'],
|
||||
startAngle: 90,
|
||||
hoverAnimation: false,
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "#3BE6E6"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
], false),
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(8, 220, 224, 0.1)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getPprojectRisk() {
|
||||
initProjectRisk();
|
||||
}
|
||||
|
||||
function initProjectRisk() {
|
||||
const myChart = echarts.init(document.getElementById("projectRisk"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}kWh ({d}%)",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
borderColor: "#08DCE0",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
right: "10%",
|
||||
itemGap: 12,
|
||||
itemWidth: 20,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
name: {
|
||||
width: 80,
|
||||
color: "#fff",
|
||||
},
|
||||
value: {
|
||||
width: 60,
|
||||
align: "right",
|
||||
color: "#79FFFF",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name) => {
|
||||
const data = option.series[0].data
|
||||
const item = data.find((d) => d.name === name)
|
||||
const percent = item ? item.value : 0
|
||||
return `{name|${name}} {value|${percent}%}`
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "用电统计",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [0, '70%'],
|
||||
center: ["25%", "45%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: "rgba(0, 0, 0, 0.3)",
|
||||
borderWidth: 2,
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 20,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(8, 220, 224, 0.8)",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 60,
|
||||
name: "二级风险",
|
||||
itemStyle: {
|
||||
color: '#75F7EC',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
name: "三级风险",
|
||||
itemStyle: {
|
||||
color: '#75F791',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 26,
|
||||
name: "四级风险",
|
||||
itemStyle: {
|
||||
color: '#00C3F2',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 14,
|
||||
name: "五级风险",
|
||||
itemStyle: {
|
||||
color: '#EB846A',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getCivilEngineering() {
|
||||
let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
|
||||
let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
|
||||
let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
|
||||
initCivilEngineering( xLabel,expenditureData,incomeData);
|
||||
}
|
||||
|
||||
function initCivilEngineering( xLabel,expenditureData,incomeData) {
|
||||
|
||||
const leftChart = echarts.init(document.getElementById("civilEngineering"));
|
||||
const option = {
|
||||
title: {
|
||||
text: '土建专业',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
left: 5,
|
||||
top: 5
|
||||
},
|
||||
tooltip: {
|
||||
show:true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
borderColor: 'rgba(255,255,255,.3)',
|
||||
backgroundColor: 'rgba(19,51,55,.6)',
|
||||
textStyle: {
|
||||
color: 'white', //设置文字颜色
|
||||
},
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
},
|
||||
legend: {
|
||||
show:true,
|
||||
top:'5%',
|
||||
right:'4%',
|
||||
textStyle:{
|
||||
color:'#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '6%',
|
||||
right: '4%',
|
||||
bottom: '20%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5A6E71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
data: xLabel,
|
||||
},
|
||||
],
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
splitNumber: 10,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
padding: 16
|
||||
},
|
||||
formatter: function(value) {
|
||||
if (value === 0) {
|
||||
return value
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
name: '计划',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "#00FEFC",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#00FEFC",
|
||||
borderWidth: 2
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(18,86,100,0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,81, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,63, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: expenditureData
|
||||
}, {
|
||||
name: '实现',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "rgba(25,196,134, 1)",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(25,196,134, 1)",
|
||||
borderWidth: 2
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(17,95,82, 0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,67, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,54, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: incomeData
|
||||
}]
|
||||
};
|
||||
|
||||
leftChart.setOption(option);
|
||||
// 响应式调整
|
||||
window.addEventListener("resize", function () {
|
||||
leftChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getElectrical() {
|
||||
let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
|
||||
let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
|
||||
let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
|
||||
initElectrical( xLabel,expenditureData,incomeData);
|
||||
}
|
||||
|
||||
function initElectrical( xLabel,expenditureData,incomeData) {
|
||||
const leftChart = echarts.init(document.getElementById("electrical"));
|
||||
const option = {
|
||||
title: {
|
||||
text: '电气专业',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
left: 5,
|
||||
top: 5
|
||||
},
|
||||
tooltip: {
|
||||
show:true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
borderColor: 'rgba(255,255,255,.3)',
|
||||
backgroundColor: 'rgba(19,51,55,.6)',
|
||||
textStyle: {
|
||||
color: 'white', //设置文字颜色
|
||||
},
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
},
|
||||
legend: {
|
||||
show:true,
|
||||
top:'5%',
|
||||
right:'4%',
|
||||
textStyle:{
|
||||
color:'#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '6%',
|
||||
right: '4%',
|
||||
bottom: '20%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5A6E71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
data: xLabel,
|
||||
},
|
||||
],
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
splitNumber: 10,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
padding: 16
|
||||
},
|
||||
formatter: function(value) {
|
||||
if (value === 0) {
|
||||
return value
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
name: '计划',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "#00FEFC",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#00FEFC",
|
||||
borderWidth: 2
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(18,86,100,0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,81, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,63, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: expenditureData
|
||||
}, {
|
||||
name: '实现',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "rgba(25,196,134, 1)",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(25,196,134, 1)",
|
||||
borderWidth: 2
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(17,95,82, 0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,67, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,54, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: incomeData
|
||||
}]
|
||||
};
|
||||
|
||||
leftChart.setOption(option);
|
||||
// 响应式调整
|
||||
window.addEventListener("resize", function () {
|
||||
leftChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getItemCost(){
|
||||
let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
|
||||
let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
|
||||
let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
|
||||
initItemCost(xLabel,expenditureData,incomeData)
|
||||
}
|
||||
|
||||
function initItemCost(xLabel,expenditureData,incomeData){
|
||||
const leftChart = echarts.init(document.getElementById("itemCost"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
show:true,
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
borderColor: 'rgba(255,255,255,.3)',
|
||||
backgroundColor: 'rgba(19,51,55,.6)',
|
||||
textStyle: {
|
||||
color: 'white', //设置文字颜色
|
||||
},
|
||||
borderWidth: 1,
|
||||
padding: 10,
|
||||
},
|
||||
legend: {
|
||||
show:true,
|
||||
top:'15%',
|
||||
right:'4%',
|
||||
textStyle:{
|
||||
color:'#ffffff'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '30%',
|
||||
left: '5%',
|
||||
right: '4%',
|
||||
bottom: '20%'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#5A6E71',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: fontColor,
|
||||
fontSize: fontSize,
|
||||
fontFamily: fontFamily
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#233653',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
},
|
||||
data: xLabel,
|
||||
},
|
||||
],
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
splitNumber: 10,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
padding: 16
|
||||
},
|
||||
formatter: function(value) {
|
||||
if (value === 0) {
|
||||
return value
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
}],
|
||||
series: [{
|
||||
name: '计划',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "#00FEFC",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "#00FEFC",
|
||||
borderWidth: 2
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(18,86,100,0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,81, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,63, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: expenditureData
|
||||
}, {
|
||||
name: '实现',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 2,
|
||||
color: "rgba(25,196,134, 1)",
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: "rgba(25,196,134, 1)",
|
||||
borderWidth: 2
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
show: true
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: "rgba(17,95,82, 0.6)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(16,72,67, 0.7)"
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(15,55,54, 0.8)',
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
data: incomeData
|
||||
}]
|
||||
};
|
||||
|
||||
leftChart.setOption(option);
|
||||
// 响应式调整
|
||||
window.addEventListener("resize", function () {
|
||||
leftChart.resize();
|
||||
});
|
||||
}
|
||||
|
||||
function getTotalRisk(){
|
||||
initTotalRisk()
|
||||
}
|
||||
|
||||
function initTotalRisk(){
|
||||
const myChart = echarts.init(document.getElementById("totalRisk"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: "{b}: {c}kWh ({d}%)",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.8)",
|
||||
borderColor: "#08DCE0",
|
||||
borderWidth: 1,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
right: "5%",
|
||||
top: "15%",
|
||||
itemGap: 22,
|
||||
itemWidth: 20,
|
||||
itemHeight: 8,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 14,
|
||||
rich: {
|
||||
name: {
|
||||
width: 60,
|
||||
color: "#fff",
|
||||
},
|
||||
value: {
|
||||
width: 60,
|
||||
align: "right",
|
||||
color: "#79FFFF",
|
||||
fontSize: 16,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
},
|
||||
formatter: (name) => {
|
||||
const data = option.series[0].data
|
||||
const item = data.find((d) => d.name === name)
|
||||
const percent = item ? item.value : 0
|
||||
return `{name|${name}} {value|${percent}%}`
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "用电统计",
|
||||
type: "pie",
|
||||
roseType: "radius",
|
||||
radius: [0, '70%'],
|
||||
center: ["15%", "45%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
borderColor: "rgba(0, 0, 0, 0.3)",
|
||||
borderWidth: 2,
|
||||
shadowBlur: 10,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
shadowBlur: 20,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(8, 220, 224, 0.8)",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 60,
|
||||
name: "二级风险",
|
||||
itemStyle: {
|
||||
color: '#75F7EC',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
name: "三级风险",
|
||||
itemStyle: {
|
||||
color: '#75F791',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 26,
|
||||
name: "四级风险",
|
||||
itemStyle: {
|
||||
color: '#00C3F2',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 14,
|
||||
name: "五级风险",
|
||||
itemStyle: {
|
||||
color: '#EB846A',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
}
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)">
|
||||
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)" style="background-color: #207E75;">
|
||||
<i class="layui-icon layui-icon-query"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,363 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>工地整体效能分析</title>
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/dataAnalysis/commonStyle.css">
|
||||
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
||||
<link rel="stylesheet" href="../../css/coreTable.css"/>
|
||||
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
<script src="../../js/publics/echarts.js"></script>
|
||||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../js/publics/aescbc.js"></script>
|
||||
<script src="../../js/publics/sm3.js"></script>
|
||||
<script src="../../api/commonRequest.js"></script>
|
||||
<script src="../../plugin/watermark.js"></script>
|
||||
<style>
|
||||
#proQuality {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.environmental-analysis {
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
margin-top: 1%;
|
||||
background: url("../../img/dataAnalysisOctober/environmentalAnalysis.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quality-analysis {
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
margin-top: 1%;
|
||||
background: url("../../img/dataAnalysisOctober/qualityAnalysis.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.safety-alert {
|
||||
height: 30%;
|
||||
width: 100%;
|
||||
margin-top: 1%;
|
||||
background: url("../../img/dataAnalysisOctober/safetyAlert.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bottom-boxs {
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
margin-top: 1%;
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
background: url("../../img/dataAnalysisOctober/progress.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.cost {
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
margin-left: 1%;
|
||||
background: url("../../img/dataAnalysisOctober/cost.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.factor {
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
margin-left: 1%;
|
||||
background: url("../../img/dataAnalysisOctober/factor.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.equipment-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.equipment-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.equipment-card-label {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.equipment-card-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #79FFFF;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.builder {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/builder.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#environmental {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.quality-analysis-box {
|
||||
width: 23%;
|
||||
height: 100%;
|
||||
margin-left: 2%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.total-rate{
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/totalRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.accepted-items-rate{
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/acceptedItemsRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.acceptance-items-rate{
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/acceptanceItemsRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.first-rate{
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/firstRate.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
#safetyAlert{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.safety {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/safety.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="proQuality">
|
||||
<div style="height: 6%;width: 100%;">
|
||||
<form class="layui-form basic-form" onclick="return false;" onsubmit="return false;">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" id="name" class="layui-input" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-inline">
|
||||
<button type="button" class="layui-btn layui-btn-normal" onclick="query(1)"
|
||||
style="background-color: #207E75;">
|
||||
<i class="layui-icon layui-icon-query"></i>查询
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="environmental-analysis">
|
||||
<div style="height: 90%;width: 15%;margin-top: 3%;">
|
||||
<div style="height: 40%;width: 100%;">
|
||||
<div class="equipment-card">
|
||||
<div class="builder"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">计划施工</div>
|
||||
<div class="equipment-card-value">100<span style="font-size: 12px; margin-left: 2px;">天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 40%;width: 100%;">
|
||||
<div class="equipment-card">
|
||||
<div class="builder"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">有效施工</div>
|
||||
<div class="equipment-card-value">80<span style="font-size: 12px; margin-left: 2px;">天</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%;width: 85%">
|
||||
<div id="environmental"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quality-analysis">
|
||||
<div style="margin-top: 3%;height: 58%;width: 98%;margin-left: 1%;display: flex">
|
||||
<div class="quality-analysis-box" style="margin-left: 1%">
|
||||
<div class="equipment-card">
|
||||
<div class="total-rate"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">总验收项</div>
|
||||
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quality-analysis-box">
|
||||
<div class="equipment-card">
|
||||
<div class="accepted-items-rate"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">已验收项</div>
|
||||
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quality-analysis-box">
|
||||
<div class="equipment-card">
|
||||
<div class="acceptance-items-rate"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">验收率</div>
|
||||
<div class="equipment-card-value">88<span style="font-size: 12px; margin-left: 2px;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quality-analysis-box">
|
||||
<div class="equipment-card">
|
||||
<div class="first-rate"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">主设备试验调试一次通过率</div>
|
||||
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="safety-alert">
|
||||
<div style="height: 90%;width: 15%;margin-top: 3%;">
|
||||
<div style="height: 80%;width: 100%;">
|
||||
<div class="equipment-card" style="flex-direction: column">
|
||||
<div class="safety"></div>
|
||||
<div class="equipment-card-content" style="align-items: center;">
|
||||
<div class="equipment-card-label">安全事故发生率</div>
|
||||
<div class="equipment-card-value">2<span style="font-size: 12px; margin-left: 2px;">%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="height: 100%;width: 85%">
|
||||
<div id="safetyAlert"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom-boxs">
|
||||
<div class="progress">
|
||||
<div style="height: 100%;width: 30%;">
|
||||
<div class="equipment-card" >
|
||||
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
|
||||
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;">2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
|
||||
<div class="equipment-card-label">当前进度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%;width: 30%;">
|
||||
<div class="equipment-card" >
|
||||
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
|
||||
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;">2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
|
||||
<div class="equipment-card-label">计划进度</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%;width: 30%;">
|
||||
<div class="equipment-card" >
|
||||
<div class="equipment-card-content" style="text-align: center;margin-top: 20%;">
|
||||
<div class="equipment-card-value" style="font-size: 22px;margin-bottom: 10px;"><span style="font-size: 12px;color: #fff;font-weight: 100">延期</span>2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
|
||||
<div class="equipment-card-label">进度偏差</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cost">
|
||||
|
||||
<div style="height: 100%;width: 30%;">
|
||||
<div class="equipment-card" >
|
||||
<div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
|
||||
<div class="equipment-card-label">计划成本</div>
|
||||
<div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;">3000<span style="font-size: 12px; margin-left: 2px;">万元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%;width: 30%;">
|
||||
<div class="equipment-card" >
|
||||
<div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
|
||||
<div class="equipment-card-label">实际成本</div>
|
||||
<div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;">2980<span style="font-size: 12px; margin-left: 2px;">万元</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 100%;width: 30%;">
|
||||
<div class="equipment-card" >
|
||||
<div class="equipment-card-content" style="text-align: center;margin-top: 10%;">
|
||||
<div class="equipment-card-label">缩减成本</div>
|
||||
<div class="equipment-card-value" style="font-size: 22px;margin-top: 15px;">2<span style="font-size: 12px; margin-left: 2px;">%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="factor"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../js/pages/dataAnalysisOctober/overallEfficiency.js" type="text/javascript"></script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,296 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>工程管理分析</title>
|
||||
<link rel="stylesheet" href="../../css/font.css">
|
||||
<link rel="stylesheet" href="../../plugin/layui-v2.9.7/layui/css/layui.css">
|
||||
<link rel="stylesheet" href="../../css/dataAnalysis/dataAnalysis.css">
|
||||
<link rel="stylesheet" href="../../css/shuiYin/shuiYin.css">
|
||||
<link rel="stylesheet" href="../../css/coreTable.css"/>
|
||||
<link rel="stylesheet" href="../../css/accessMge/accessMge.css">
|
||||
<script src="../../js/publics/sm4.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/jquery-3.6.0.min.js" type="text/javascript"></script>
|
||||
<script src="../../js/publics/public.js"></script>
|
||||
<script src="../../plugin/scroll/jquery.nicescroll.min.js"></script>
|
||||
<script src="../../js/publics/4.3.0/echarts.min.js"></script>
|
||||
<script src="../../plugin/layui-v2.9.7/layui/layui.js"></script>
|
||||
<script src="../../js/publics/aescbc.js"></script>
|
||||
<script src="../../js/publics/sm3.js"></script>
|
||||
<script src="../../api/commonRequest.js"></script>
|
||||
<style>
|
||||
#proQuality {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.top-box{
|
||||
width: 100%;
|
||||
height: 48%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: url("../../img/dataAnalysisOctober/electricityStatistics.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
.center-box{
|
||||
margin-top: 1%;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
background: url("../../img/dataAnalysisOctober/projectCost.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
.bottom-box{
|
||||
margin-top: 1%;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
background: url("../../img/dataAnalysisOctober/projectRisk.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.top-box-box{
|
||||
width: 95%;
|
||||
height: 72%;
|
||||
margin-top: 5%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top-box-box-left{
|
||||
width: 33%;
|
||||
height: 100%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8, 220, 224, 0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.top-box-box-right{
|
||||
margin-left: 1%;
|
||||
width: 69%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.top-box-box-right-top{
|
||||
height: 48%;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.top-box-box-right-bottom{
|
||||
margin-top: 1%;
|
||||
height: 48%;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.bottom-box-box{
|
||||
width: 98%;
|
||||
margin-left: 1%;
|
||||
height: 60%;
|
||||
margin-top: 3%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bottom-box-box-left{
|
||||
margin-left: 1%;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
.bottom-box-box-right{
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
margin-left:1%;
|
||||
box-shadow: 0px 0px 4px 0px rgba(8,220,224,0.8);
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
}
|
||||
|
||||
#project{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#projectProgress{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#projectCost {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#projectRisk{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
.chart-title {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
left: 5%;
|
||||
}
|
||||
.big-number {
|
||||
font-size: 22px;
|
||||
color: #79FFFF;
|
||||
font-weight: bold;
|
||||
line-height: 20px;
|
||||
}
|
||||
#civilEngineering{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#electrical{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#itemCost{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#totalRisk{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.equipment-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.accountTerminatedRisk {
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/accountTerminatedRisk.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.risk{
|
||||
width: 55px;
|
||||
height: 60px;
|
||||
flex-shrink: 0;
|
||||
background: url("../../img/dataAnalysisOctober/risk.png") no-repeat 0 0 / 100% 100%;
|
||||
background-position: center center !important;
|
||||
}
|
||||
|
||||
.equipment-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.equipment-card-label {
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.equipment-card-value {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #79FFFF;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="proQuality">
|
||||
<div class="top-box">
|
||||
<div class="top-box-box">
|
||||
<div class="top-box-box-left">
|
||||
<div id="project">
|
||||
<div id="projectProgress"></div>
|
||||
<div id="projectCost"></div>
|
||||
</div>
|
||||
|
||||
<div id="projectRisk">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="chart-title">
|
||||
<div>今日风险数量</div>
|
||||
<div class="big-number">60</div>
|
||||
<div>个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-box-box-right">
|
||||
<div class="top-box-box-right-top">
|
||||
<div id="civilEngineering"></div>
|
||||
</div>
|
||||
<div class="top-box-box-right-bottom">
|
||||
<div id="electrical"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-box">
|
||||
<div id="itemCost"></div>
|
||||
</div>
|
||||
<div class="bottom-box">
|
||||
<div class="bottom-box-box">
|
||||
<div class="bottom-box-box-left">
|
||||
<div id="totalRisk"></div>
|
||||
<div class="chart-title" style="top: 95%; left: 3%;">
|
||||
<div>今日风险数量</div>
|
||||
<div class="big-number">60</div>
|
||||
<div>个</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-box-right">
|
||||
<div class="equipment-card">
|
||||
<div class="accountTerminatedRisk"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">已消号风险</div>
|
||||
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-box-right">
|
||||
<div class="equipment-card">
|
||||
<div class="risk"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">剩余风险</div>
|
||||
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-box-box-right">
|
||||
<div class="equipment-card">
|
||||
<div class="risk"></div>
|
||||
<div class="equipment-card-content">
|
||||
<div class="equipment-card-label">剩余二级及以上风险</div>
|
||||
<div class="equipment-card-value">18<span style="font-size: 12px; margin-left: 2px;">台</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script src="../../js/pages/dataAnalysisOctober/projectManagement.js" type="text/javascript"></script>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue