424 lines
12 KiB
JavaScript
424 lines
12 KiB
JavaScript
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();
|
|
});
|
|
|
|
initData();
|
|
|
|
function initData() {
|
|
const url = commonUrl + "screen/proSafety/selectOverallEfficiencyData";
|
|
|
|
let encryptStr = encryptCBC(
|
|
JSON.stringify({
|
|
startTime: "2025-10-10",
|
|
endTime: "2025-10-17",
|
|
})
|
|
);
|
|
|
|
ajaxRequest(
|
|
url,
|
|
"get",
|
|
{
|
|
startTime: "2025-10-10",
|
|
endTime: "2025-10-17",
|
|
},
|
|
true,
|
|
function () {},
|
|
function (result) {
|
|
console.log(result, "数据");
|
|
|
|
const data = result.data;
|
|
let weather = "";
|
|
let safetyAlert = "";
|
|
for (const key in data) {
|
|
switch (key) {
|
|
case "计划施工天数":
|
|
$("#planWorkDay").text(data[key] + "天");
|
|
break;
|
|
case "有效施工天数":
|
|
$("#effectiveWorkDay").text(data[key] + "天");
|
|
break;
|
|
case "总验收项":
|
|
$("#totalItems").text(data[key] + "个");
|
|
break;
|
|
case "已验收项":
|
|
$("#acceptedItems").text(data[key] + "个");
|
|
break;
|
|
case "验收率":
|
|
$("#acceptanceItemsRate").text(data[key] + "%");
|
|
break;
|
|
case "主设备试验调试一次通过率":
|
|
$("#firstRate").text(data[key] + "%");
|
|
break;
|
|
|
|
case "当前进度":
|
|
$("#currentProgress").text(data[key]);
|
|
break;
|
|
case "计划进度":
|
|
$("#planProgress").text(data[key]);
|
|
break;
|
|
case "进度偏差":
|
|
$("#delayProgress").text(data[key]);
|
|
break;
|
|
|
|
case "计划成本":
|
|
$("#planCost").text(data[key] + "万元");
|
|
break;
|
|
case "实际成本":
|
|
$("#actualCost").text(data[key] + "万元");
|
|
break;
|
|
case "缩减成本":
|
|
$("#reduceCost").text(data[key]);
|
|
break;
|
|
case "天气":
|
|
weather = data[key];
|
|
initEnvironmental(weather);
|
|
break;
|
|
case "安全预警":
|
|
safetyAlert = data[key];
|
|
initSafetyAlert(safetyAlert);
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
function (xhr) {
|
|
// error(xhr);
|
|
}
|
|
);
|
|
}
|
|
|
|
function getEnvironmental() {
|
|
let yList = [32, 58, 64, 164, 99];
|
|
let xData = ["学前", "小学", "初中", "高中", "qq"];
|
|
initEnvironmental(yList, xData);
|
|
}
|
|
|
|
function initEnvironmental(data) {
|
|
const xData = data.map((item) => item.weather);
|
|
const yList = data.map((item) => item.day);
|
|
|
|
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(data) {
|
|
const xData = data.map((item) => item.name);
|
|
const yList = data.map((item) => item.num);
|
|
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();
|
|
});
|
|
}
|