首页大屏幕

This commit is contained in:
2023-12-08 18:33:21 +08:00
parent 20de71f91a
commit 5baefadb6b
7 changed files with 347 additions and 194 deletions
+111 -83
View File
@@ -314,94 +314,122 @@
function initCircle() {
// 一个环形
var circleOneOption = {
drawing_elem: 'circleId',
bordercolor: '#12cda2',
borderwidth: 1,
percentfontsize: 22,
unitfontsize: 18,
lineWidth: 16,
addLeft: 4,
percentfontcolor: "#12cda2",
unitfontcolor: '#12cda2',
forecolor: '#12cda2',
unitadd: 1,
title: '在岗率',
titlefontcolor: '#12cda2',
titlefontsize: 9,
}
var $itemPW = $('.sd-section .sd-user-calc');
var itemPW = $itemPW.width()
var $itemPPW = $('.sd-section .sd-user-calc .sd-user-calc-left');
var itemPPW = $itemPPW.width()
var itemPPWPadding = ($itemPPW.innerWidth() - itemPPW) / 2
var itemPPWW = $('.sd-section .sd-user-calc .sd-user-calc-left .sd-user-calc-item').eq(0).innerWidth()
// 通过改变差值来决定圈的宽度,itemWMin为最新值
var itemW = (itemPW - itemPPWPadding - itemPPWW) / 3 * 2;
var itemWMin = 120
if (itemW > itemWMin) {
$('#circleId').attr('width', itemW).attr('height', itemW);
circleOneOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
circleOneOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
circleOneOption.titlefontsize = 16
}
console.log(itemPW, itemW, circleOneOption)
drawCircle(circleOneOption);
// 两个环形
var circleTwoOption = {
//var circleOneOption = {
// drawing_elem: 'circleId',
// bordercolor: '#12cda2',
// borderwidth: 1,
// percentfontsize: 22,
// unitfontsize: 18,
// lineWidth: 16,
// addLeft: 4,
// percentfontcolor: "#12cda2",
// unitfontcolor: '#12cda2',
// forecolor: '#12cda2',
// unitadd: 1,
// title: '在岗率',
// titlefontcolor: '#12cda2',
// titlefontsize: 9,
//}
//var $itemPW = $('.sd-section .sd-user-calc');
//var itemPW = $itemPW.width()
//var $itemPPW = $('.sd-section .sd-user-calc .sd-user-calc-left');
//var itemPPW = $itemPPW.width()
//var itemPPWPadding = ($itemPPW.innerWidth() - itemPPW) / 2
//var itemPPWW = $('.sd-section .sd-user-calc .sd-user-calc-left .sd-user-calc-item').eq(0).innerWidth()
//// 通过改变差值来决定圈的宽度,itemWMin为最新值
//var itemW = (itemPW - itemPPWPadding - itemPPWW) / 3 * 2;
//var itemWMin = 120
//if (itemW > itemWMin) {
// $('#circleId').attr('width', itemW).attr('height', itemW);
// circleOneOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
// circleOneOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
// circleOneOption.titlefontsize = 16
//}
//console.log(itemPW, itemW, circleOneOption)
//drawCircle(circleOneOption);
//// 两个环形
//var circleTwoOption = {
// drawing_elem: 'circleId1',
// percentfontsize: 22,
// unitfontsize: 18,
// lineWidth: 10,
// addLeft: 4,
// percentfontcolor: "#ffb260",
// bgcolor: '#0F2164',
// forecolor: '#ffb260',
// unitfontcolor: '#1ab1ff',
// lineGap: 'round',
// unitadd: -1,
//}
//var $itemInner = $('.sd-section5-inner')
//var $itemInnerTop = $('.sd-section5-inner .sd-quality')
//var heightTemp = $itemInner.height() - $itemInnerTop.height()
//var $itemTW = $('.sd-quality-circles');
//var itemTW = ($itemTW.width() / 2 / 3 * 2).toFixed() - 20
//var itemTH = $itemTW.height()
//console.log(itemTW, heightTemp)
//if (itemTW > heightTemp) {
// itemTW = heightTemp
//}
//// 通过改变差值来决定圈的宽度
//var itemW = itemTW
//var itemWMin = 100
//if (itemW > itemWMin) {
// $('#circleId1').attr('width', itemW).attr('height', itemW);
// circleTwoOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
// circleTwoOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
//}
//var circleThreeOption = {
// drawing_elem: 'circleId2',
// percentfontsize: 22,
// unitfontsize: 18,
// lineWidth: 10,
// addLeft: 4,
// percentfontcolor: "#12cda2",
// bgcolor: '#0F2164',
// forecolor: '#12cda2',
// unitfontcolor: '#1ab1ff',
// lineGap: 'round',
// unitadd: -1,
//}
//if (itemW > itemWMin) {
// $('#circleId2').attr('width', itemW).attr('height', itemW);
// circleThreeOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
// circleThreeOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
//}
//console.log(itemTW, itemTH, itemW, circleThreeOption)
//drawCircle(circleTwoOption);
//drawCircle(circleThreeOption);
drawCircle({
drawing_elem: 'circleId1',
percentfontsize: 22,
unitfontsize: 18,
lineWidth: 10,
addLeft: 4,
percentfontcolor: "#ffb260",
bgcolor: '#0F2164',
forecolor: '#ffb260',
unitfontcolor: '#1ab1ff',
percentfontcolor: "#ce8306",
unitfontcolor: "#ce8306",
unitfontsize: 11,
lineGap: 'round',
unitadd: -1,
}
var $itemInner = $('.sd-section5-inner')
var $itemInnerTop = $('.sd-section5-inner .sd-quality')
var heightTemp = $itemInner.height() - $itemInnerTop.height()
var $itemTW = $('.sd-quality-circles');
var itemTW = ($itemTW.width() / 2 / 3 * 2).toFixed() - 20
var itemTH = $itemTW.height()
console.log(itemTW, heightTemp)
if (itemTW > heightTemp) {
itemTW = heightTemp
}
// 通过改变差值来决定圈的宽度
var itemW = itemTW
var itemWMin = 100
if (itemW > itemWMin) {
$('#circleId1').attr('width', itemW).attr('height', itemW);
circleTwoOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
circleTwoOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
}
var circleThreeOption = {
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "#03344C" }],
forecolor: [{ step: 0, color: "#ce8306" }, { step: 0.4, color: "#ce8306" }, { step: 1, color: "rgba(255,166,0,0.05)" }],
rad: Math.PI * 2 * (3 / 4) / 100,
radStart: Math.PI * (3 / 4),
radEnd: Math.PI * (2 + (1 / 4)),
radDrawStart: Math.PI * (3 / 4),
unitadd: 1,
});
drawCircle({
drawing_elem: 'circleId2',
percentfontsize: 22,
unitfontsize: 18,
lineWidth: 10,
addLeft: 4,
percentfontcolor: "#12cda2",
bgcolor: '#0F2164',
forecolor: '#12cda2',
unitfontcolor: '#1ab1ff',
unitfontcolor: "#12cda2",
unitfontsize: 11,
lineGap: 'round',
unitadd: -1,
}
if (itemW > itemWMin) {
$('#circleId2').attr('width', itemW).attr('height', itemW);
circleThreeOption.percentfontsize = (itemW * 22 / itemWMin).toFixed() - 0
circleThreeOption.unitfontsize = (itemW * 18 / itemWMin).toFixed() - 0
}
console.log(itemTW, itemTH, itemW, circleThreeOption)
drawCircle(circleTwoOption);
drawCircle(circleThreeOption);
bgcolor: [{ step: 0, color: "#03344C" }, { step: 1, color: "rgba(3,52,76,0.5)" }],
forecolor: [{ step: 0, color: "#12cda2" }, { step: 0.4, color: "#12cda2" }, { step: 1, color: "rgba(21,237,187,0.05)" }],
rad: Math.PI * 2 * (3 / 4) / 100,
radStart: Math.PI * (3 / 4),
radEnd: Math.PI * (2 + (1 / 4)),
radDrawStart: Math.PI * (3 / 4),
unitadd: 1,
});
}
// 地图点