1580 lines
37 KiB
JavaScript
1580 lines
37 KiB
JavaScript
|
var layer;
|
|||
|
|
var urls = window.location.search;
|
|||
|
|
var proId = localStorage.getItem("proId");
|
|||
|
|
var selectLon = localStorage.getItem("selectLon");
|
|||
|
|
var selectLat = localStorage.getItem("selectLat");
|
|||
|
|
var cityName = localStorage.getItem("cityName");
|
|||
|
|
var util;
|
|||
|
|
layui.use(['layer','util'], function() {
|
|||
|
|
|
|||
|
|
$(document).ready(function() {
|
|||
|
|
$(".clickable-text").on("click", function() {
|
|||
|
|
window.location.href = "./home.html";
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
layer = layui.layer;
|
|||
|
|
util = layui.util;
|
|||
|
|
|
|||
|
|
setInterval(function () {
|
|||
|
|
$("#nowTime").text(getNowTime())
|
|||
|
|
},1000);
|
|||
|
|
|
|||
|
|
//工程基本信息
|
|||
|
|
getProjectMessage();
|
|||
|
|
//分公司项目管理资源
|
|||
|
|
getManagementResources();
|
|||
|
|
|
|||
|
|
//产业工人/产业人员
|
|||
|
|
getWorkerIndustry();
|
|||
|
|
|
|||
|
|
//产业工人/自有人员
|
|||
|
|
getWorkerOwn();
|
|||
|
|
|
|||
|
|
|
|||
|
|
//获取项目进度
|
|||
|
|
getProjectProgress();
|
|||
|
|
//获取安全工器具
|
|||
|
|
getToolsMessage();
|
|||
|
|
|
|||
|
|
getSubResource();
|
|||
|
|
// getFoundation();//基础进度
|
|||
|
|
// getTower();//组塔进度
|
|||
|
|
// getLine(); //架线进度
|
|||
|
|
|
|||
|
|
getTowerBasicNum();//地图左下角杆塔数量
|
|||
|
|
$("#returnPage").click(function () {
|
|||
|
|
window.history.go(-1);
|
|||
|
|
});
|
|||
|
|
$("#switchPage").click(function () {
|
|||
|
|
window.location.href="./z_projectList.html";
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
//获取安全工器具数据
|
|||
|
|
function getSubResource() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getSubResource",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {id:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
try {
|
|||
|
|
let obj= data.data;
|
|||
|
|
let subMessage = obj.subMessage;
|
|||
|
|
let subTeam = obj.subTeam;
|
|||
|
|
let subNum = subMessage[0].dataKey; //分包数量
|
|||
|
|
let teamNum = subMessage[0].dataValue; //班组数量
|
|||
|
|
let subName = subMessage[0].dataNum; //承包商名称
|
|||
|
|
$("#sub_team_num").text("分包数量 :"+subNum+" 班组数量 :"+teamNum);
|
|||
|
|
//sub_name
|
|||
|
|
let subNameArray = subName.split(",");
|
|||
|
|
let subNameHtml ='';
|
|||
|
|
let sunLength = subNameArray.length;
|
|||
|
|
let subNameLength = 0;
|
|||
|
|
let tf = false;
|
|||
|
|
for(let i=0;i<sunLength;i++){
|
|||
|
|
// subNameLength += subNameArray[i].length;
|
|||
|
|
// if(subNameLength<35){
|
|||
|
|
// subNameHtml += '<img src="../../img/home/sub.png">';
|
|||
|
|
// subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
|||
|
|
// }else{
|
|||
|
|
// tf = true;
|
|||
|
|
// }
|
|||
|
|
if(sunLength<4){
|
|||
|
|
if(i==2){
|
|||
|
|
subNameHtml +='<br/>';
|
|||
|
|
subNameHtml += '<img src="../../img/home/sub.png">';
|
|||
|
|
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
|||
|
|
}else{
|
|||
|
|
subNameHtml += '<img src="../../img/home/sub.png">';
|
|||
|
|
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
if(i<4){
|
|||
|
|
if(i==2){
|
|||
|
|
subNameHtml +='<br/>';
|
|||
|
|
subNameHtml += '<img src="../../img/home/sub.png">';
|
|||
|
|
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
|||
|
|
}else{
|
|||
|
|
subNameHtml += '<img src="../../img/home/sub.png">';
|
|||
|
|
subNameHtml += '<span class="fonts" style="font-size: 14px;">'+subNameArray[i]+'</span>';
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
tf = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//subNameHtml+='';
|
|||
|
|
}
|
|||
|
|
$("#sub_name").append(subNameHtml);
|
|||
|
|
if(tf){
|
|||
|
|
$("#sub_name").append('<img id="sub_open" src="../../img/home/drop.png" />');
|
|||
|
|
}
|
|||
|
|
tipsClick("sub_open",subNameArray,2);
|
|||
|
|
// 班组详细展示
|
|||
|
|
|
|||
|
|
//alert("subTeam="+subTeam.length);
|
|||
|
|
let baseArray = [];
|
|||
|
|
let towerArray = [];
|
|||
|
|
let lineArray = [];
|
|||
|
|
if(subTeam !=null && subTeam.length > 0){
|
|||
|
|
for(var i=0;i<subTeam.length;i++){
|
|||
|
|
let dataKey = subTeam[i].dataKey;
|
|||
|
|
let dataValue = subTeam[i].dataValue.split(",");
|
|||
|
|
for(var j = 0;j<dataValue.length;j++){
|
|||
|
|
if(dataKey =='1'){
|
|||
|
|
baseArray.push(dataValue[j]);
|
|||
|
|
}else if(dataKey =='2'){
|
|||
|
|
towerArray.push(dataValue[j]);
|
|||
|
|
}else{
|
|||
|
|
lineArray.push(dataValue[j]);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
var html ='';
|
|||
|
|
try{
|
|||
|
|
for(var i=0;i<4;i++){
|
|||
|
|
|
|||
|
|
html += '<tr>';
|
|||
|
|
html += ' <td>';
|
|||
|
|
if(baseArray[i] !=undefined && baseArray[i] !='undefined'){
|
|||
|
|
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;">'+baseArray[i]+'</span>';
|
|||
|
|
if(baseArray.length>4 && i==3){
|
|||
|
|
html += '<img src="../../img/home/drop.png" id="sub_team_base" >';
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;"></span>';
|
|||
|
|
}
|
|||
|
|
html += ' </td>';
|
|||
|
|
html += ' <td>';
|
|||
|
|
if(towerArray[i] !=undefined && towerArray[i] !='undefined'){
|
|||
|
|
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;">'+towerArray[i]+'</span>';
|
|||
|
|
if(towerArray.length>4 && i==3){
|
|||
|
|
html += '<img src="../../img/home/drop.png" id="sub_team_tower">';
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;"></span>';
|
|||
|
|
}
|
|||
|
|
html += ' </td>';
|
|||
|
|
html += ' <td >';
|
|||
|
|
if(lineArray[i] !=undefined && lineArray[i] !='undefined'){
|
|||
|
|
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;">'+lineArray[i]+'</span>';
|
|||
|
|
if(lineArray.length>4 && i==3){
|
|||
|
|
html += '<img src="../../img/home/drop.png" id="sub_team_line">';
|
|||
|
|
}
|
|||
|
|
}else{
|
|||
|
|
html += ' <span class="fonts" style="font-size: 14px;color: #00BFC5;"></span>';
|
|||
|
|
}
|
|||
|
|
html += ' </td>';
|
|||
|
|
html += '</tr>';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}catch(e){
|
|||
|
|
console.log("e")
|
|||
|
|
}
|
|||
|
|
//tools_table
|
|||
|
|
$("#tools_table").append(html);
|
|||
|
|
console.log("baseArray="+baseArray);
|
|||
|
|
console.log("towerArray="+towerArray);
|
|||
|
|
console.log("lineArray="+lineArray);
|
|||
|
|
$("#sub_team_base").click(function () {
|
|||
|
|
tipsClick("sub_team_base",baseArray,1);
|
|||
|
|
});
|
|||
|
|
$("#sub_team_tower").click(function () {
|
|||
|
|
tipsClick("sub_team_tower",towerArray,1);
|
|||
|
|
});
|
|||
|
|
$("#sub_team_line").click(function () {
|
|||
|
|
tipsClick("sub_team_line",lineArray,1);
|
|||
|
|
});
|
|||
|
|
}catch (e) {
|
|||
|
|
console.log(e)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//获取安全工器具数据
|
|||
|
|
function getToolsMessage() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getToolsMessage",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {id:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
let obj= data.data;
|
|||
|
|
var allNum = 0;
|
|||
|
|
if(obj !=null && obj.length>0){
|
|||
|
|
for(var i=0;i<obj.length;i++){
|
|||
|
|
let dataNum = obj[i].dataNum; //机具数量
|
|||
|
|
let dataKey = obj[i].dataKey; //机具类型
|
|||
|
|
let dataValue = obj[i].dataValue; //机具值
|
|||
|
|
let toolsId = obj[i].orgId; //机具id
|
|||
|
|
var numbers = dataNum.split(",").map(Number); // 将字符串按逗号分割成数组，并转换为数字
|
|||
|
|
var sum = numbers.reduce((a, b) => a + b, 0); // 对数组中的数字进行求和
|
|||
|
|
allNum = allNum+sum;
|
|||
|
|
if(toolsId =='20'){ //基础
|
|||
|
|
$("#tools_base_key").text(sum);
|
|||
|
|
$("#tools_base_value").text(dataValue);
|
|||
|
|
}else if(toolsId =='21'){ //杆塔
|
|||
|
|
$("#tools_tower_key").text(sum);
|
|||
|
|
$("#tools_tower_value").text(dataValue);
|
|||
|
|
}else if(toolsId =='22'){ //架线
|
|||
|
|
$("#tools_line_key").text(sum);
|
|||
|
|
$("#tools_line_value").text(dataValue);
|
|||
|
|
}else{
|
|||
|
|
$("#tools_new_key").text(sum);
|
|||
|
|
$("#tools_new_value").text(dataValue);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$("#tools_all_num").text(allNum);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
|
|||
|
|
//产业工人/自有人员
|
|||
|
|
function getProjectProgress() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getProjectProgress",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {id:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
let obj= data.data;
|
|||
|
|
let dataNum = parseInt(obj.dataNum); //杆塔总数
|
|||
|
|
let dataKey = parseInt(obj.dataKey); //完成基础个数
|
|||
|
|
let dataValue = parseInt(obj.dataValue); //完成基础个数
|
|||
|
|
let lineLength = parseFloat(obj.level); //线路长度
|
|||
|
|
let finishLength = parseFloat(obj.orgId); //完成长度
|
|||
|
|
|
|||
|
|
let v_jc = dataNum ==0?0:parseFloat((dataKey/dataNum).toFixed(2));
|
|||
|
|
let v_gt = dataNum ==0?0:parseFloat((dataValue/dataNum).toFixed(2));
|
|||
|
|
let v_jx = lineLength==0?0:parseFloat((finishLength/lineLength).toFixed(2));
|
|||
|
|
// var allPross = ((v_jc+v_gt+v_jx)/3).toFixed(1);
|
|||
|
|
//alert("1111="+(76/3).toFixed(1)+" ,v_jc="+v_jc+" ,v_gt="+v_gt+" ,v_jx="+v_jx);
|
|||
|
|
let is_ok =(parseFloat(v_jc+v_gt+v_jx)*10/3).toFixed(1);
|
|||
|
|
let is_not = 10-is_ok;
|
|||
|
|
|
|||
|
|
$("#is_ok").css("flex",is_ok+"");
|
|||
|
|
$("#is_not").css("flex",is_not+"");
|
|||
|
|
getFoundation((v_jc*100).toFixed(1));//基础进度
|
|||
|
|
getTower((v_gt*100).toFixed(1));//组塔进度
|
|||
|
|
getLine((v_jx*100).toFixed(1)); //架线进度
|
|||
|
|
|
|||
|
|
$("#progress_value").text((is_ok*10)+"%");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getTowerBasicNum(){
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: false, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getTowerBasicNum",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {proId:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data){
|
|||
|
|
var obj = data.obj;
|
|||
|
|
$("#not_finish").text(parseInt(obj.team.basicNotFinishNum));
|
|||
|
|
$("#basic_num").text(parseInt(obj.team.basicFinishNum));
|
|||
|
|
// $("#group_tower_num").text(parseInt(obj.team.towerFinishNum));
|
|||
|
|
},
|
|||
|
|
error:function (XMLHttpRequest, textStatus, errorThrown) {
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//分公司项目管理资源
|
|||
|
|
function getManagementResources() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getManagementResources",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {proId:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
let obj= data.data;
|
|||
|
|
console.log(JSON.stringify(obj))
|
|||
|
|
//团队名称
|
|||
|
|
let proTeamName = obj.proTeamName;
|
|||
|
|
if(proTeamName !=null && proTeamName.length>1){
|
|||
|
|
$("#proTeamName").text(proTeamName[0]);
|
|||
|
|
$("#proTeamName_png").css("display","");
|
|||
|
|
tipsClick('proTeamName_png',proTeamName,2);
|
|||
|
|
}else{
|
|||
|
|
$("#proTeamName").text(proTeamName);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
//电压等级
|
|||
|
|
let volLevel = obj.volLevel;
|
|||
|
|
if(volLevel !=null && volLevel.length>1){
|
|||
|
|
$("#volLevel").text(volLevel[0]);
|
|||
|
|
$("#volLevel_png").css("display","");
|
|||
|
|
tipsClick('volLevel_png',volLevel,2);
|
|||
|
|
}else{
|
|||
|
|
$("#volLevel").text(volLevel);
|
|||
|
|
}
|
|||
|
|
//小队id
|
|||
|
|
let proManaId = obj.proManaId;
|
|||
|
|
//分管领导org_type_leader projectLeader
|
|||
|
|
let projectLeader = obj.projectLeader;
|
|||
|
|
$("#projectLeader").text("");
|
|||
|
|
if(projectLeader !=null && projectLeader.length>2){
|
|||
|
|
$("#projectLeader").text(projectLeader[0]+","+projectLeader[1]);
|
|||
|
|
$("#projectManager_png2").css("display","");
|
|||
|
|
tipsClick('projectManager_png2',projectManager,2);
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
$("#projectLeader").text(projectLeader);
|
|||
|
|
}
|
|||
|
|
//项目经理
|
|||
|
|
let projectManager = obj.projectManager;
|
|||
|
|
$("#projectManager").text("");
|
|||
|
|
if(projectManager !=null && projectManager.length>2){
|
|||
|
|
$("#projectManager").text(projectManager[0]+","+projectManager[1]);
|
|||
|
|
$("#projectManager_png").css("display","");
|
|||
|
|
tipsClick('projectManager_png',projectManager,2);
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
$("#projectManager").text(projectManager);
|
|||
|
|
}
|
|||
|
|
//项目副经理
|
|||
|
|
let projectDeputyManager = obj.projectDeputyManager;
|
|||
|
|
$("#projectDeputyManager").text("");
|
|||
|
|
if(projectDeputyManager !=null && projectDeputyManager.length>2){
|
|||
|
|
$("#projectDeputyManager").text(projectDeputyManager[0]+","+projectDeputyManager[1]);
|
|||
|
|
$("#projectDeputyManager_png").css("display","");
|
|||
|
|
tipsClick('projectDeputyManager_png',projectDeputyManager,2);
|
|||
|
|
}else{
|
|||
|
|
$("#projectDeputyManager").text(projectDeputyManager);
|
|||
|
|
}
|
|||
|
|
//项目总工
|
|||
|
|
let projectChief = obj.projectChief;
|
|||
|
|
$("#projectChief").text("");
|
|||
|
|
if(projectChief !=null && projectChief.length>2){
|
|||
|
|
$("#projectChief").text(projectChief[0]+","+projectChief[1]);
|
|||
|
|
$("#projectChief_png").css("display","");
|
|||
|
|
tipsClick('projectChief_png',projectChief,2);
|
|||
|
|
}else{
|
|||
|
|
$("#projectChief").text(projectChief);
|
|||
|
|
}
|
|||
|
|
//安全员
|
|||
|
|
let safetyOfficer = obj.safetyOfficer;
|
|||
|
|
$("#safetyOfficer").text("");
|
|||
|
|
console.log("安全员="+safetyOfficer.length)
|
|||
|
|
if(safetyOfficer !=null && safetyOfficer.length>2){
|
|||
|
|
$("#safetyOfficer").text(safetyOfficer[0]+","+safetyOfficer[1]);
|
|||
|
|
$("#safetyOfficer_png").css("display","");
|
|||
|
|
tipsClick('safetyOfficer_png',safetyOfficer,2);
|
|||
|
|
}else{
|
|||
|
|
$("#safetyOfficer").text(safetyOfficer);
|
|||
|
|
}
|
|||
|
|
//技术员/质检员
|
|||
|
|
let technician = obj.technician;
|
|||
|
|
$("#technician").text("");
|
|||
|
|
if(technician !=null && technician.length>2){
|
|||
|
|
$("#technician").text(technician[0]+","+technician[1]);
|
|||
|
|
$("#technician_png").css("display","");
|
|||
|
|
tipsClick('technician_png',technician,2);
|
|||
|
|
}else{
|
|||
|
|
$("#technician").text(technician);
|
|||
|
|
}
|
|||
|
|
//协调员
|
|||
|
|
let coordinator = obj.coordinator;
|
|||
|
|
$("#coordinator").text("");
|
|||
|
|
console.log("协调员="+coordinator.length)
|
|||
|
|
if(coordinator !=null && coordinator.length>2){
|
|||
|
|
$("#coordinator").text(coordinator[0]+","+coordinator[1]);
|
|||
|
|
$("#coordinator_png").css("display","");
|
|||
|
|
tipsClick('coordinator_png',coordinator,2);
|
|||
|
|
}else{
|
|||
|
|
$("#coordinator").text(coordinator);
|
|||
|
|
}
|
|||
|
|
//资料员
|
|||
|
|
let ocumenter = obj.ocumenter;
|
|||
|
|
$("#ocumenter").text("");
|
|||
|
|
console.log("资料员="+ocumenter.length)
|
|||
|
|
if(ocumenter !=null && ocumenter.length>1){
|
|||
|
|
$("#ocumenter").text(ocumenter[0]+","+ocumenter[1]);
|
|||
|
|
$("#ocumenter_png").css("display","");
|
|||
|
|
tipsClick('ocumenter_png',ocumenter,2);
|
|||
|
|
}else{
|
|||
|
|
$("#ocumenter").text(ocumenter);
|
|||
|
|
}
|
|||
|
|
//团队数量
|
|||
|
|
let listNum = obj.listNum;
|
|||
|
|
$("#listNum").text(listNum[0]);
|
|||
|
|
//团队人数
|
|||
|
|
let personNum = obj.personNum;
|
|||
|
|
$("#personNum").text(personNum[0]);
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
function tipsClick(id,arrayStr,type) {
|
|||
|
|
var html = '';
|
|||
|
|
for(var i=0;i<arrayStr.length;i++){
|
|||
|
|
if(i == 0){
|
|||
|
|
html += arrayStr[i];
|
|||
|
|
}else{
|
|||
|
|
html += '<br>' + arrayStr[i];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
$("#"+id).click(function () {
|
|||
|
|
layer.tips(html, this, {
|
|||
|
|
tips: [type, 'black']
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取工程基本信息
|
|||
|
|
function getProjectMessage() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getProjectMessage",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {proId:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
let obj= data.data;
|
|||
|
|
let proId =obj.proId;
|
|||
|
|
let orgId =obj.orgId;
|
|||
|
|
let proName =obj.proName;
|
|||
|
|
let volLevel =obj.volLevel;
|
|||
|
|
let lineLength =obj.lineLength;
|
|||
|
|
let startTime =obj.startTime;
|
|||
|
|
let endTime =obj.endTime;
|
|||
|
|
let towerNum =obj.towerNum;
|
|||
|
|
let orgName =obj.orgName;
|
|||
|
|
let volLevelName =obj.volLevelName;
|
|||
|
|
|
|||
|
|
let name =obj.name;
|
|||
|
|
let lon =obj.lon;
|
|||
|
|
let lat =obj.lat;
|
|||
|
|
|
|||
|
|
selectLon = lon;
|
|||
|
|
selectLat = lat;
|
|||
|
|
cityName = name;
|
|||
|
|
// alert("cityName="+cityName+" ,selectLon="+selectLon+" ,selectLat="+selectLat);
|
|||
|
|
localStorage.setItem("selectLon",selectLon);
|
|||
|
|
localStorage.setItem("selectLat",selectLat);
|
|||
|
|
localStorage.setItem("cityName",cityName);
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#proName").text(proName);
|
|||
|
|
$("#volLevelName").text(volLevelName);
|
|||
|
|
$("#startTime").text(startTime);
|
|||
|
|
$("#lineLength").text(lineLength);
|
|||
|
|
$("#endTime").text(endTime);
|
|||
|
|
$("#towerNum").text(towerNum);
|
|||
|
|
$("#orgName").text(orgName);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//产业工人/产业人员
|
|||
|
|
function getWorkerIndustry() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getWorkerIndustry",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {id:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
let obj= data.data;
|
|||
|
|
let dataKey = obj.dataKey;
|
|||
|
|
let dataValue = obj.dataValue;
|
|||
|
|
let dataNum = obj.dataNum;
|
|||
|
|
|
|||
|
|
//$("#industry_dataKey").text(dataKey);
|
|||
|
|
$("#industry_dataKey").text(Number(dataValue)+Number(dataNum));
|
|||
|
|
|
|||
|
|
$("#industry_dataValue").text(dataValue);
|
|||
|
|
$("#industry_dataNum").text(dataNum);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//产业工人/自有人员
|
|||
|
|
function getWorkerOwn() {
|
|||
|
|
$.ajax({
|
|||
|
|
type: 'POST',
|
|||
|
|
async: true, // 默认异步true,false表示同步
|
|||
|
|
url: ctxPath + "/schedule/getWorkerOwn",// 请求地址
|
|||
|
|
dataType: 'json', // 服务器返回数据类型
|
|||
|
|
data: {id:proId}, //获取提交的表单字段
|
|||
|
|
success: function (data) {
|
|||
|
|
let obj= data.data;
|
|||
|
|
let dataKey = obj.dataKey;
|
|||
|
|
let dataValue = obj.dataValue;
|
|||
|
|
let dataNum = obj.dataNum;
|
|||
|
|
|
|||
|
|
//$("#own_dataKey").text(dataKey);
|
|||
|
|
$("#own_dataKey").text(Number(dataValue)+Number(dataNum));
|
|||
|
|
$("#own_dataValue").text(dataValue);
|
|||
|
|
$("#own_dataNum").text(dataNum);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
function getFoundation(v_jc) {
|
|||
|
|
var chartDom = document.getElementById('foundation');
|
|||
|
|
var myChart = echarts.init(chartDom);
|
|||
|
|
let angle = 0; //角度，用来做简单的动画效果的
|
|||
|
|
let num = v_jc;
|
|||
|
|
var timerId;
|
|||
|
|
option = {
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|||
|
|
},
|
|||
|
|
// 标题
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
text: num + '%\n基础进度',
|
|||
|
|
x: 'center',
|
|||
|
|
y: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: '12',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Lato',
|
|||
|
|
foontWeight: '600'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
series: [
|
|||
|
|
//内圆
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '43%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
animation: false,
|
|||
|
|
z: 3,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#032336',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
borderColor: '#3bcbf6',
|
|||
|
|
borderWidth: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [100]
|
|||
|
|
},
|
|||
|
|
//外圆
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '80%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
animation: false,
|
|||
|
|
z: 0,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#001929',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#3bcbf6' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: '#3bcbf6' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#001929' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]),
|
|||
|
|
borderWidth: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [100]
|
|||
|
|
},
|
|||
|
|
// 进度光环
|
|||
|
|
{
|
|||
|
|
name: '外部刻度',
|
|||
|
|
type: 'gauge',
|
|||
|
|
z: 2,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: '60%',
|
|||
|
|
min: 0, //最小刻度
|
|||
|
|
max: 100, //最大刻度
|
|||
|
|
splitNumber: 10, //刻度数量
|
|||
|
|
startAngle: 225,
|
|||
|
|
endAngle: -45,
|
|||
|
|
animation: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 15,
|
|||
|
|
shadowColor: '#83f3f9',
|
|||
|
|
shadowBlur: 6,
|
|||
|
|
color: [[num/100, '#83f3f9']]
|
|||
|
|
}
|
|||
|
|
}, // 仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false
|
|||
|
|
}, //仪表盘详情，用于显示数据
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
} //仪表盘指针。
|
|||
|
|
},
|
|||
|
|
// 进度光环背景
|
|||
|
|
{
|
|||
|
|
name: '外部刻度',
|
|||
|
|
type: 'gauge',
|
|||
|
|
z: 1,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: '61%',
|
|||
|
|
min: 0, //最小刻度
|
|||
|
|
max: 100, //最大刻度
|
|||
|
|
splitNumber: 10, //刻度数量
|
|||
|
|
startAngle: 225,
|
|||
|
|
endAngle: -45,
|
|||
|
|
animation: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 25,
|
|||
|
|
shadowColor: '#386e73',
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
color: [[1, '#032336']]
|
|||
|
|
}
|
|||
|
|
}, // 仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false
|
|||
|
|
}, //仪表盘详情，用于显示数据
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
} //仪表盘指针。
|
|||
|
|
},
|
|||
|
|
// 转动效果
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
|||
|
|
startAngle: ((0 + angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((90 + angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
|||
|
|
startAngle: ((180 + angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((270 + angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
|||
|
|
startAngle: ((270 + -angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((40 + -angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
|||
|
|
startAngle: ((90 + -angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((220 + -angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
let x0 = api.getWidth() / 2
|
|||
|
|
let y0 = api.getHeight() / 2
|
|||
|
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
|||
|
|
let point = getCirlPoint(x0, y0, r, 90 + -angle)
|
|||
|
|
return {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: point.x,
|
|||
|
|
cy: point.y,
|
|||
|
|
r: 4
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB', //粉
|
|||
|
|
fill: '#0CD3DB'
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5', //绿点
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
let x0 = api.getWidth() / 2
|
|||
|
|
let y0 = api.getHeight() / 2
|
|||
|
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
|||
|
|
let point = getCirlPoint(x0, y0, r, 270 + -angle)
|
|||
|
|
return {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: point.x,
|
|||
|
|
cy: point.y,
|
|||
|
|
r: 4
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB', //绿
|
|||
|
|
fill: '#0CD3DB'
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
|||
|
|
function getCirlPoint(x0, y0, r, angle) {
|
|||
|
|
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
|||
|
|
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
|||
|
|
return {
|
|||
|
|
x: x1,
|
|||
|
|
y: y1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function draw() {
|
|||
|
|
angle = angle + 3
|
|||
|
|
myChart.setOption(option, true)
|
|||
|
|
//window.requestAnimationFrame(draw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setInterval(function() {
|
|||
|
|
//用setInterval做动画感觉有问题
|
|||
|
|
draw()
|
|||
|
|
}, 30)
|
|||
|
|
|
|||
|
|
|
|||
|
|
option && myChart.setOption(option);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getTower(v_gt) {
|
|||
|
|
var chartDom1 = document.getElementById('tower');
|
|||
|
|
var myChart1 = echarts.init(chartDom1);
|
|||
|
|
let num = v_gt;
|
|||
|
|
let angle = 0;
|
|||
|
|
option1 = {
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|||
|
|
},
|
|||
|
|
// 标题
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
text: num + '%\n组塔进度',
|
|||
|
|
x: 'center',
|
|||
|
|
y: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: '12',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Lato',
|
|||
|
|
foontWeight: '600'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
series: [
|
|||
|
|
//内圆
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '43%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
animation: false,
|
|||
|
|
z: 3,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#032336',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
borderColor: '#3bcbf6',
|
|||
|
|
borderWidth: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [100]
|
|||
|
|
},
|
|||
|
|
//外圆
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '80%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
animation: false,
|
|||
|
|
z: 0,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#001929',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#3bcbf6' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: '#3bcbf6' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#001929' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]),
|
|||
|
|
borderWidth: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [100]
|
|||
|
|
},
|
|||
|
|
// 进度光环
|
|||
|
|
{
|
|||
|
|
name: '外部刻度',
|
|||
|
|
type: 'gauge',
|
|||
|
|
z: 2,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: '60%',
|
|||
|
|
min: 0, //最小刻度
|
|||
|
|
max: 100, //最大刻度
|
|||
|
|
splitNumber: 10, //刻度数量
|
|||
|
|
startAngle: 225,
|
|||
|
|
endAngle: -45,
|
|||
|
|
animation: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 15,
|
|||
|
|
shadowColor: '#83f3f9',
|
|||
|
|
shadowBlur: 6,
|
|||
|
|
color: [[num/100, '#83f3f9']]
|
|||
|
|
}
|
|||
|
|
}, // 仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false
|
|||
|
|
}, //仪表盘详情，用于显示数据
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
} //仪表盘指针。
|
|||
|
|
},
|
|||
|
|
// 进度光环背景
|
|||
|
|
{
|
|||
|
|
name: '外部刻度',
|
|||
|
|
type: 'gauge',
|
|||
|
|
z: 1,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: '61%',
|
|||
|
|
min: 0, //最小刻度
|
|||
|
|
max: 100, //最大刻度
|
|||
|
|
splitNumber: 10, //刻度数量
|
|||
|
|
startAngle: 225,
|
|||
|
|
endAngle: -45,
|
|||
|
|
animation: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 25,
|
|||
|
|
shadowColor: '#386e73',
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
color: [[1, '#032336']]
|
|||
|
|
}
|
|||
|
|
}, // 仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false
|
|||
|
|
}, //仪表盘详情，用于显示数据
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
} //仪表盘指针。
|
|||
|
|
},
|
|||
|
|
// 转动效果
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
|||
|
|
startAngle: ((0 + angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((90 + angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
|||
|
|
startAngle: ((180 + angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((270 + angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
|||
|
|
startAngle: ((270 + -angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((40 + -angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
|||
|
|
startAngle: ((90 + -angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((220 + -angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
let x0 = api.getWidth() / 2
|
|||
|
|
let y0 = api.getHeight() / 2
|
|||
|
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
|||
|
|
let point = getCirlPoint1(x0, y0, r, 90 + -angle)
|
|||
|
|
return {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: point.x,
|
|||
|
|
cy: point.y,
|
|||
|
|
r: 4
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB', //粉
|
|||
|
|
fill: '#0CD3DB'
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5', //绿点
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
let x0 = api.getWidth() / 2
|
|||
|
|
let y0 = api.getHeight() / 2
|
|||
|
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
|||
|
|
let point = getCirlPoint1(x0, y0, r, 270 + -angle)
|
|||
|
|
return {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: point.x,
|
|||
|
|
cy: point.y,
|
|||
|
|
r: 4
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB', //绿
|
|||
|
|
fill: '#0CD3DB'
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
|||
|
|
function getCirlPoint1(x0, y0, r, angle) {
|
|||
|
|
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
|||
|
|
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
|||
|
|
return {
|
|||
|
|
x: x1,
|
|||
|
|
y: y1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function draw1() {
|
|||
|
|
angle = angle + 3
|
|||
|
|
myChart1.setOption(option1, true)
|
|||
|
|
//window.requestAnimationFrame(draw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setInterval(function() {
|
|||
|
|
//用setInterval做动画感觉有问题
|
|||
|
|
draw1()
|
|||
|
|
}, 30)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getLine(v_jx) {
|
|||
|
|
var chartDom2 = document.getElementById('line');
|
|||
|
|
var myChart2 = echarts.init(chartDom2);
|
|||
|
|
let num = v_jx;
|
|||
|
|
let angle = 0;
|
|||
|
|
option2 = {
|
|||
|
|
tooltip: {
|
|||
|
|
formatter: '{a} <br/>{b} : {c}%'
|
|||
|
|
},
|
|||
|
|
// 标题
|
|||
|
|
title: [
|
|||
|
|
{
|
|||
|
|
text: num + '%\n架线进度',
|
|||
|
|
x: 'center',
|
|||
|
|
y: 'center',
|
|||
|
|
textStyle: {
|
|||
|
|
fontSize: '12',
|
|||
|
|
color: '#fff',
|
|||
|
|
fontFamily: 'Lato',
|
|||
|
|
foontWeight: '600'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
|
|||
|
|
series: [
|
|||
|
|
//内圆
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '43%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
animation: false,
|
|||
|
|
z: 3,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#032336',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
borderColor: '#3bcbf6',
|
|||
|
|
borderWidth: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [100]
|
|||
|
|
},
|
|||
|
|
//外圆
|
|||
|
|
{
|
|||
|
|
type: 'pie',
|
|||
|
|
radius: '80%',
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
animation: false,
|
|||
|
|
z: 0,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#001929',
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|||
|
|
{
|
|||
|
|
offset: 0,
|
|||
|
|
color: '#3bcbf6' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 0.5,
|
|||
|
|
color: '#3bcbf6' // 0% 处的颜色
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
offset: 1,
|
|||
|
|
color: '#001929' // 100% 处的颜色
|
|||
|
|
}
|
|||
|
|
]),
|
|||
|
|
borderWidth: 3
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoverAnimation: false,
|
|||
|
|
label: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
tooltip: {
|
|||
|
|
show: false
|
|||
|
|
},
|
|||
|
|
data: [100]
|
|||
|
|
},
|
|||
|
|
// 进度光环
|
|||
|
|
{
|
|||
|
|
name: '外部刻度',
|
|||
|
|
type: 'gauge',
|
|||
|
|
z: 2,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: '60%',
|
|||
|
|
min: 0, //最小刻度
|
|||
|
|
max: 100, //最大刻度
|
|||
|
|
splitNumber: 10, //刻度数量
|
|||
|
|
startAngle: 225,
|
|||
|
|
endAngle: -45,
|
|||
|
|
animation: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 15,
|
|||
|
|
shadowColor: '#83f3f9',
|
|||
|
|
shadowBlur: 6,
|
|||
|
|
color: [[num/100, '#83f3f9']]
|
|||
|
|
}
|
|||
|
|
}, // 仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false
|
|||
|
|
}, //仪表盘详情，用于显示数据
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
} //仪表盘指针。
|
|||
|
|
},
|
|||
|
|
// 进度光环背景
|
|||
|
|
{
|
|||
|
|
name: '外部刻度',
|
|||
|
|
type: 'gauge',
|
|||
|
|
z: 1,
|
|||
|
|
center: ['50%', '50%'],
|
|||
|
|
radius: '61%',
|
|||
|
|
min: 0, //最小刻度
|
|||
|
|
max: 100, //最大刻度
|
|||
|
|
splitNumber: 10, //刻度数量
|
|||
|
|
startAngle: 225,
|
|||
|
|
endAngle: -45,
|
|||
|
|
animation: true,
|
|||
|
|
axisLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 25,
|
|||
|
|
shadowColor: '#386e73',
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
color: [[1, '#032336']]
|
|||
|
|
}
|
|||
|
|
}, // 仪表盘轴线
|
|||
|
|
axisLabel: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度标签。
|
|||
|
|
axisTick: {
|
|||
|
|
show: false
|
|||
|
|
}, //刻度样式
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}, //分隔线样式
|
|||
|
|
detail: {
|
|||
|
|
show: false
|
|||
|
|
}, //仪表盘详情，用于显示数据
|
|||
|
|
pointer: {
|
|||
|
|
show: false
|
|||
|
|
} //仪表盘指针。
|
|||
|
|
},
|
|||
|
|
// 转动效果
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
|||
|
|
startAngle: ((0 + angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((90 + angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.6,
|
|||
|
|
startAngle: ((180 + angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((270 + angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
|||
|
|
startAngle: ((270 + -angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((40 + -angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
return {
|
|||
|
|
type: 'arc',
|
|||
|
|
shape: {
|
|||
|
|
cx: api.getWidth() / 2,
|
|||
|
|
cy: api.getHeight() / 2,
|
|||
|
|
r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
|
|||
|
|
startAngle: ((90 + -angle) * Math.PI) / 180,
|
|||
|
|
endAngle: ((220 + -angle) * Math.PI) / 180
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB',
|
|||
|
|
fill: 'transparent',
|
|||
|
|
lineWidth: 1.5
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5',
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
let x0 = api.getWidth() / 2
|
|||
|
|
let y0 = api.getHeight() / 2
|
|||
|
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
|||
|
|
let point = getCirlPoint1(x0, y0, r, 90 + -angle)
|
|||
|
|
return {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: point.x,
|
|||
|
|
cy: point.y,
|
|||
|
|
r: 4
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB', //粉
|
|||
|
|
fill: '#0CD3DB'
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'ring5', //绿点
|
|||
|
|
type: 'custom',
|
|||
|
|
coordinateSystem: 'none',
|
|||
|
|
renderItem: function(params, api) {
|
|||
|
|
let x0 = api.getWidth() / 2
|
|||
|
|
let y0 = api.getHeight() / 2
|
|||
|
|
let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65
|
|||
|
|
let point = getCirlPoint1(x0, y0, r, 270 + -angle)
|
|||
|
|
return {
|
|||
|
|
type: 'circle',
|
|||
|
|
shape: {
|
|||
|
|
cx: point.x,
|
|||
|
|
cy: point.y,
|
|||
|
|
r: 4
|
|||
|
|
},
|
|||
|
|
style: {
|
|||
|
|
stroke: '#0CD3DB', //绿
|
|||
|
|
fill: '#0CD3DB'
|
|||
|
|
},
|
|||
|
|
silent: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: [0]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
|
|||
|
|
function getCirlPoint1(x0, y0, r, angle) {
|
|||
|
|
let x1 = x0 + r * Math.cos((angle * Math.PI) / 180)
|
|||
|
|
let y1 = y0 + r * Math.sin((angle * Math.PI) / 180)
|
|||
|
|
return {
|
|||
|
|
x: x1,
|
|||
|
|
y: y1
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function draw2() {
|
|||
|
|
angle = angle + 3
|
|||
|
|
myChart2.setOption(option2, true)
|
|||
|
|
//window.requestAnimationFrame(draw);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setInterval(function() {
|
|||
|
|
//用setInterval做动画感觉有问题
|
|||
|
|
draw2()
|
|||
|
|
}, 30)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function largeMap(){
|
|||
|
|
var index = layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title: false,
|
|||
|
|
content: './map_amplify.html',
|
|||
|
|
area: ['95%', '95%'],
|
|||
|
|
maxmin: false,
|
|||
|
|
});
|
|||
|
|
}
|