2021-04-30 10:28:37 +08:00
|
|
|
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainMenu_TestRun.aspx.cs" Inherits="FineUIPro.Web.mainMenu_TestRun" %>
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head id="Head1" runat="server">
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
|
<title>首页</title>
|
|
|
|
|
<link href="../res/index/css/reset.css" rel="stylesheet" />
|
|
|
|
|
<link href="../res/index/css/home.css" rel="stylesheet" />
|
|
|
|
|
<link href="../res/index/css/swiper-3.4.2.min.css" rel="stylesheet" />
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
.top {
|
|
|
|
|
display: flex;
|
|
|
|
|
display: -webkit-flex;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 360px;
|
|
|
|
|
margin-bottom: 5px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.top .item {
|
|
|
|
|
flex: 1;
|
|
|
|
|
width: 50%;
|
|
|
|
|
float: left;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
margin: 0 10px 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bw-b {
|
|
|
|
|
width: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bw-b-bottom-up {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
height: 340px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab-wrap {
|
|
|
|
|
left: auto;
|
|
|
|
|
right: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab .t-item {
|
|
|
|
|
width: auto;
|
|
|
|
|
padding: 5px 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-list {
|
|
|
|
|
height: 100px;
|
|
|
|
|
padding: 15px;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
color: #fff;
|
|
|
|
|
margin: 0 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-list .bl-left {
|
|
|
|
|
float: left;
|
|
|
|
|
margin-right: 30px;
|
|
|
|
|
margin-left: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bottom-list .bl-right {
|
|
|
|
|
float: right;
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tab .t-item {
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
2024-09-11 10:36:09 +08:00
|
|
|
|
|
|
|
|
|
.bw-item-content {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
}
|
2021-04-30 10:28:37 +08:00
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-02-08 18:10:24 +08:00
|
|
|
|
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="wrap">
|
2024-02-08 18:10:24 +08:00
|
|
|
|
<div class="bottom-wrap">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='one' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='three' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom-wrap">
|
|
|
|
|
<div class="top">
|
2024-02-08 18:10:24 +08:00
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='two' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
2024-06-26 01:26:20 +08:00
|
|
|
|
<div class="tab-wrap" style="left: 20px">
|
|
|
|
|
<div class="tab" style="border: 0; box-shadow: none;">
|
2024-09-12 14:14:08 +08:00
|
|
|
|
<div class="t-item" style="font-size: 16px; font-weight: normal; color: #fff" id="tlscNum" runat="server">投料试车进度</div>
|
2024-06-26 01:26:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="1">
|
2024-09-11 10:36:09 +08:00
|
|
|
|
<div class="t-item" style="background-color: #DD226D">未投料</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="spline"></div>
|
2024-12-04 09:08:33 +08:00
|
|
|
|
<div class="t-item" style="background-color: #FFA500">投料中</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="spline"></div>
|
2024-12-04 09:08:33 +08:00
|
|
|
|
<div class="t-item" style="background-color: #57C43C">投料完成</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='four' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-02-08 18:10:24 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-03-11 09:46:11 +08:00
|
|
|
|
<div class="bottom-wrap">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
2024-06-26 01:26:20 +08:00
|
|
|
|
<div class="tab-wrap" style="left: 20px">
|
|
|
|
|
<div class="tab" style="border: 0; box-shadow: none;">
|
2024-09-12 14:14:08 +08:00
|
|
|
|
<div class="t-item" style="font-size: 16px; font-weight: normal; color: #fff" id="syxNum" runat="server">试运行进度</div>
|
2024-06-26 01:26:20 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="1">
|
2024-12-04 09:08:33 +08:00
|
|
|
|
<div class="t-item" style="background-color: #DD226D">未运行</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="spline"></div>
|
2024-12-04 09:08:33 +08:00
|
|
|
|
<div class="t-item" style="background-color: #FFA500">运行中</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="spline"></div>
|
2024-06-26 01:26:20 +08:00
|
|
|
|
<div class="t-item" style="background-color: #57C43C">停车检修</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-03-11 09:46:11 +08:00
|
|
|
|
<div class="bw-item-content">
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div id='five' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
2024-06-26 01:26:20 +08:00
|
|
|
|
<div class="tab-wrap" style="left: 20px">
|
|
|
|
|
<div class="tab" style="border: 0; box-shadow: none;">
|
|
|
|
|
<div class="t-item" style="font-size: 16px; font-weight: normal; color: #fff">性能考核进度</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="1">
|
2024-12-04 09:08:33 +08:00
|
|
|
|
<div class="t-item" style="background-color: #DD226D">考核未开始</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="spline"></div>
|
2024-12-04 09:08:33 +08:00
|
|
|
|
<div class="t-item" style="background-color: #FFA500">考核进行中</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div class="spline"></div>
|
2024-06-26 01:26:20 +08:00
|
|
|
|
<div class="t-item" style="background-color: #57C43C">考核已完成</div>
|
2024-05-07 01:58:42 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-06-26 01:26:20 +08:00
|
|
|
|
<div class="bw-item-content">
|
2024-05-07 01:58:42 +08:00
|
|
|
|
<div id='six' style="width: 100%; height: 100%;"></div>
|
2024-03-11 09:46:11 +08:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-02-08 18:10:24 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<%--<div class="wrap">
|
2021-04-30 10:28:37 +08:00
|
|
|
|
<div class="bottom-wrap">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="1">
|
|
|
|
|
<div class="t-item active">施工分包商</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item ">单位工程</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item">专业</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='one' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="2">
|
|
|
|
|
<div class="t-item active">施工分包商</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item ">单位工程</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item">专业</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='two' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom-wrap">
|
|
|
|
|
<div class="top">
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="3">
|
|
|
|
|
<div class="t-item active">施工分包商</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item ">单位工程</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item">专业</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item">问题类别</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='three' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="item">
|
|
|
|
|
<div class="bw-b-bottom ptop6">
|
|
|
|
|
<div class="bw-b-bottom-up">
|
|
|
|
|
<div class="tab-wrap">
|
|
|
|
|
<div class="tab" data-value="4">
|
|
|
|
|
<div class="t-item active">主项</div>
|
|
|
|
|
<div class="spline"></div>
|
|
|
|
|
<div class="t-item">专业</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bw-item-content">
|
|
|
|
|
<div id='four' style="width: 100%; height: 100%;"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom-wrap">
|
|
|
|
|
<div class="bw-b-bottom-up bottom-list">
|
|
|
|
|
<div class="bl-left">
|
|
|
|
|
<div>质量控制点:总数量200,已完成178,未完成22,完成百分比89%</div>
|
|
|
|
|
<div>质量问题:总数量100,已完成84,未完成16,完成百分比84%</div>
|
|
|
|
|
<div>设计变更:总数量65,已完成52,未完成13,完成百分比80%</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bl-right">
|
|
|
|
|
<div>工程联系单:总数量65,已完成56,未完成9 </div>
|
|
|
|
|
<div>工作联系单:总数量42,已完成35,未完成7 </div>
|
|
|
|
|
<div>施工方案:总数量34,已完成30,未完成4 </div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-02-08 18:10:24 +08:00
|
|
|
|
</div>--%>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
</body>
|
|
|
|
|
<script type="text/javascript" src="../res/index/js/jquery-3.4.1.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../res/index/js/swiper-3.4.2.jquery.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../res/index/js/echarts.min.js"></script>
|
|
|
|
|
<script type="text/javascript">
|
2024-02-08 18:10:24 +08:00
|
|
|
|
var oneArrStr = "<%=oneArrStr%>";
|
|
|
|
|
var oneDataStr = '<%=oneDataStr%>';
|
|
|
|
|
var oneNameData = [];
|
|
|
|
|
var oneArr = JSON.parse(oneArrStr);
|
|
|
|
|
var oneData = JSON.parse(oneDataStr);
|
2024-03-11 09:46:11 +08:00
|
|
|
|
$.each(oneData, function (index, item) {
|
2024-02-08 18:10:24 +08:00
|
|
|
|
var obj = { name: item };
|
|
|
|
|
oneNameData.push(obj);
|
|
|
|
|
});
|
|
|
|
|
//图1
|
|
|
|
|
var bar_data = oneArr;//模拟数据
|
|
|
|
|
var chart = echarts.init(document.getElementById('one'));
|
|
|
|
|
var option = {
|
|
|
|
|
title: {
|
|
|
|
|
text: '预试车进度信息',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontWeight: 'normal',
|
|
|
|
|
fontSize: 16
|
|
|
|
|
},
|
|
|
|
|
show: true
|
|
|
|
|
},
|
|
|
|
|
tooltip: {
|
|
|
|
|
formatter: '{a}:{c}%'//a 是series中每条数据name值,c 是data数值
|
|
|
|
|
},
|
|
|
|
|
grid: {
|
|
|
|
|
left: '3%',
|
2024-02-15 14:53:34 +08:00
|
|
|
|
//right: '30%',
|
|
|
|
|
right: '0%',
|
2024-02-08 18:10:24 +08:00
|
|
|
|
top: '15%',
|
2024-02-15 14:53:34 +08:00
|
|
|
|
bottom: '5%',
|
2024-02-08 18:10:24 +08:00
|
|
|
|
containLabel: true,
|
|
|
|
|
backgroundColor: 'rgba(0,162,233, 0.01)',
|
|
|
|
|
},
|
|
|
|
|
xAxis: [ //横坐标
|
|
|
|
|
{
|
|
|
|
|
type: 'category',
|
2024-02-15 14:53:34 +08:00
|
|
|
|
data: oneData,
|
2024-02-08 18:10:24 +08:00
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#fff",//横坐标线条颜色
|
|
|
|
|
}
|
2024-02-15 14:53:34 +08:00
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
interval: 0,
|
2024-03-11 09:46:11 +08:00
|
|
|
|
formatter: function (value) {
|
|
|
|
|
return value.split("").join("\n");
|
|
|
|
|
}
|
2024-02-08 18:10:24 +08:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
yAxis: [ //纵坐标
|
|
|
|
|
{
|
|
|
|
|
type: 'value',
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: true,
|
|
|
|
|
formatter: '{value}%',//给Y轴数值添加百分号
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: "#fff",//纵坐标线条颜色
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
],
|
2024-02-15 14:53:34 +08:00
|
|
|
|
series: [{
|
|
|
|
|
name: '进度率',
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
data: oneArr,
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
2024-03-11 09:46:11 +08:00
|
|
|
|
position: 'top',
|
|
|
|
|
color: "#00D8FE",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
//interval: 0,
|
|
|
|
|
//rotate: -90,
|
2024-02-15 14:53:34 +08:00
|
|
|
|
formatter: function (params) {
|
|
|
|
|
if (params.value > 0) {
|
|
|
|
|
return params.value + '%';
|
|
|
|
|
} else {
|
|
|
|
|
return ' ';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: function (params) {
|
|
|
|
|
var colorList = ['#0287f8', '#33CCCC', '#58b1fc', '#2fb6f6', '#CC3366', '#00FF99', '#33FFFF', '#669900', '#CC0099', '#FF66FF', '#330099', '#00FFCC', '#FFFF33', '#FF9966', '#FF6633'];
|
|
|
|
|
return colorList[params.dataIndex]
|
2024-02-08 18:10:24 +08:00
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
2024-02-15 14:53:34 +08:00
|
|
|
|
}]
|
2024-02-08 18:10:24 +08:00
|
|
|
|
};
|
|
|
|
|
chart.setOption(option);
|
|
|
|
|
|
2024-03-11 09:46:11 +08:00
|
|
|
|
//图2
|
2024-02-08 18:10:24 +08:00
|
|
|
|
var twoDataStr = '<%=twoDataStr%>';
|
|
|
|
|
var towData = JSON.parse(twoDataStr);
|
|
|
|
|
var data = towData.map((item, index) => item.Rate);
|
|
|
|
|
var chart1 = echarts.init(document.getElementById('two'));
|
|
|
|
|
var barWidth = 20;
|
|
|
|
|
var maxNum = 100;
|
|
|
|
|
option = {
|
|
|
|
|
grid: {
|
|
|
|
|
top: '10%',
|
|
|
|
|
left: '20%',
|
|
|
|
|
right: '10%',
|
|
|
|
|
bottom: '0%',
|
|
|
|
|
},
|
|
|
|
|
title: {
|
|
|
|
|
text: '试车进度信息',
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontWeight: 'normal',
|
|
|
|
|
fontSize: 16
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
data: towData.map((item, index) => item.Name),
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
textStyle: { fontSize: '80%', color: '#02afff' },
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false,
|
|
|
|
|
},
|
|
|
|
|
axisTick: false,
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: barWidth,
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
data: data.map(function (item) {
|
|
|
|
|
return {
|
|
|
|
|
value: item,
|
|
|
|
|
maxNum: maxNum,
|
|
|
|
|
};
|
|
|
|
|
}),
|
|
|
|
|
label: {
|
|
|
|
|
show: true,
|
|
|
|
|
position: 'inside',
|
|
|
|
|
align: 'left',
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
var percent = Number((params.data.value / params.data.maxNum) * 100).toFixed(2) + '%';
|
|
|
|
|
return percent;
|
|
|
|
|
},
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
},
|
|
|
|
|
itemStyle: {
|
2024-03-11 09:46:11 +08:00
|
|
|
|
borderRadius: [10, 10, 10, 10],
|
2024-02-08 18:10:24 +08:00
|
|
|
|
color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
|
|
|
|
|
{ offset: 0, color: '#395CFE' },
|
|
|
|
|
{ offset: 1, color: '#2EC7CF' },
|
|
|
|
|
]),
|
2024-03-11 09:46:11 +08:00
|
|
|
|
barBorderRadius: [10, 10, 10, 10]
|
2024-02-08 18:10:24 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
type: 'bar',
|
|
|
|
|
barWidth: barWidth,
|
|
|
|
|
barGap: '-100%',
|
|
|
|
|
data: data.map(function (item) {
|
|
|
|
|
return {
|
|
|
|
|
realValue: item,
|
|
|
|
|
value: maxNum,
|
|
|
|
|
};
|
|
|
|
|
}),
|
|
|
|
|
//label: {
|
|
|
|
|
// show: true,
|
|
|
|
|
// position: 'right',
|
|
|
|
|
// distance: 80,
|
|
|
|
|
// align: 'right',
|
|
|
|
|
// //formatter: function (params) {
|
|
|
|
|
// // return params.data.realValue + ' 件';
|
|
|
|
|
// //},
|
|
|
|
|
// color: '#02afff',
|
|
|
|
|
// fontSize: 18,
|
|
|
|
|
//},
|
|
|
|
|
itemStyle: {
|
|
|
|
|
borderRadius: 10,
|
|
|
|
|
color: 'rgba(3,169,244, 0.5)',
|
2024-03-11 09:46:11 +08:00
|
|
|
|
barBorderRadius: [10, 10, 10, 10]
|
2024-02-08 18:10:24 +08:00
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
chart1.setOption(option);
|
|
|
|
|
|
2024-03-11 09:46:11 +08:00
|
|
|
|
//图3
|
|
|
|
|
var fourDecisionStr = '<%=fourDecisionStr%>';
|
|
|
|
|
var threeData = JSON.parse(fourDecisionStr);
|
|
|
|
|
var threewidth = Math.floor(100 / threeData.length);
|
|
|
|
|
$.each(threeData, function (index, item) {
|
2024-09-11 10:36:09 +08:00
|
|
|
|
$("#three").append("<div id='three" + index + "' style='width:129px; height:148px; display:inline-block'></div>");
|
2024-03-11 09:46:11 +08:00
|
|
|
|
});
|
|
|
|
|
|
2024-05-07 01:58:42 +08:00
|
|
|
|
//图4
|
|
|
|
|
var fourStr = '<%=feedingRunStr%>';
|
|
|
|
|
var fourData = JSON.parse(fourStr);
|
|
|
|
|
var fourwidth = Math.floor(100 / (fourData.length / 2));
|
|
|
|
|
$.each(fourData, function (index, item) {
|
2024-09-11 10:36:09 +08:00
|
|
|
|
$("#four").append("<div id='four" + index + "' style='width:129px; height:148px; display:inline-block'></div>");
|
2024-05-07 01:58:42 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//图5
|
|
|
|
|
var fiveStr = '<%=productsStr%>';
|
|
|
|
|
var fiveData = JSON.parse(fiveStr);
|
|
|
|
|
var fivewidth = Math.floor(100 / (fiveData.length / 2));
|
2024-12-04 09:08:33 +08:00
|
|
|
|
$.each(fiveData, function (index, item) {
|
2024-09-11 10:36:09 +08:00
|
|
|
|
$("#five").append("<div id='five" + index + "' style='width:129px; height:148px; display:inline-block'></div>");
|
2024-05-07 01:58:42 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//图6
|
|
|
|
|
var sixStr = '<%=runProductionStr%>';
|
|
|
|
|
var sixData = JSON.parse(sixStr);
|
2024-06-26 01:26:20 +08:00
|
|
|
|
//var colorData = ["#988989", "#6D5F5F", "#524747"];
|
|
|
|
|
//if (sixData.States == 2) {
|
|
|
|
|
// colorData = ["#2B1485", "#3E1DC0", "#603FE2"];
|
|
|
|
|
//}
|
|
|
|
|
//if (sixData.States == 3) {
|
|
|
|
|
// colorData = ["#106722", "#20CE43", "#5DE679"];
|
|
|
|
|
//}
|
2024-12-04 09:08:33 +08:00
|
|
|
|
var colorData = ["#DD226D", "#DD226D", "#DD226D", "#DD226D"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
if (sixData.States == 2) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
colorData = ["#FFA500", "#FFA500", "#FFA500", "#FFA500"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
}
|
|
|
|
|
if (sixData.States == 3) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
colorData = ["#57C43C", "#57C43C", "#57C43C", "#57C43C"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
}
|
|
|
|
|
var chart = echarts.init(document.getElementById('six'));
|
|
|
|
|
var value = 100;
|
|
|
|
|
option = {
|
|
|
|
|
backgroundColor: '000',
|
|
|
|
|
title: {
|
|
|
|
|
text: `` + sixData.StatesName,
|
|
|
|
|
subtext: sixData.States == 2 ? (sixData.StartTime + "\n" + sixData.EndTime) : "",
|
|
|
|
|
left: 'center',
|
|
|
|
|
top: '45%', //top待调整
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontFamily: 'DINAlternate-Bold',
|
|
|
|
|
},
|
|
|
|
|
subtextStyle: {
|
|
|
|
|
color: '#ff',
|
|
|
|
|
fontSize: 16,
|
|
|
|
|
fontFamily: 'PingFangSC-Regular',
|
|
|
|
|
top: 'center'
|
|
|
|
|
},
|
|
|
|
|
itemGap: 10 //主副标题间距
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
// 内圆
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['0', '80%'],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
z: 0,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: colorData[0]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.44,
|
|
|
|
|
color: colorData[0]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.73,
|
|
|
|
|
color: colorData[1]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: colorData[2]
|
|
|
|
|
}
|
|
|
|
|
]),
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
position: "center",
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [100],
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
chart.setOption(option);
|
|
|
|
|
|
|
|
|
|
|
2024-03-11 09:46:11 +08:00
|
|
|
|
$(function () {
|
|
|
|
|
$.each(threeData, function (index, item) {
|
|
|
|
|
var chart = echarts.init(document.getElementById('three' + index));
|
|
|
|
|
var value = item.Rate;
|
|
|
|
|
option = {
|
|
|
|
|
backgroundColor: '000',
|
|
|
|
|
title: {
|
|
|
|
|
text: `${value}%`,
|
|
|
|
|
subtext: '三查四定' + item.Name + '类',
|
|
|
|
|
left: 'center',
|
|
|
|
|
top: '45%', //top待调整
|
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
|
|
|
|
fontSize: 20,
|
|
|
|
|
fontFamily: 'DINAlternate-Bold',
|
|
|
|
|
},
|
|
|
|
|
subtextStyle: {
|
|
|
|
|
color: '#ff',
|
2024-05-07 01:58:42 +08:00
|
|
|
|
fontSize: 12,
|
2024-03-11 09:46:11 +08:00
|
|
|
|
fontFamily: 'PingFangSC-Regular',
|
|
|
|
|
top: 'center'
|
|
|
|
|
},
|
|
|
|
|
itemGap: 16 //主副标题间距
|
|
|
|
|
},
|
|
|
|
|
xAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
yAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
// 内圆
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['0', '50%'],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
z: 0,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#1a68c0'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.44,
|
|
|
|
|
color: '#1a68c0'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.73,
|
|
|
|
|
color: '#194c88'
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#162c46'
|
|
|
|
|
}
|
|
|
|
|
]),
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
position: "center",
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [100],
|
|
|
|
|
},
|
|
|
|
|
// 进度圈
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
clockWise: true,
|
|
|
|
|
radius: ["60%", "55%"],
|
|
|
|
|
data: [{
|
|
|
|
|
value: value,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
borderWidth: 2,
|
|
|
|
|
borderColor: {
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#1d87ff' || '#00cefc' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#1d87ff' || '#367bec' // 100% 处的颜色
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
color: { // 完成的圆环的颜色
|
|
|
|
|
colorStops: [{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: '#1d87ff' || '#00cefc' // 0% 处的颜色
|
|
|
|
|
}, {
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: '#1d87ff' || '#367bec' // 100% 处的颜色
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: '',
|
|
|
|
|
value: 100 - value,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
color: 'rgba(0, 0, 0, 0)',
|
|
|
|
|
borderColor: 'rgba(0, 0, 0, 0)',
|
|
|
|
|
borderWidth: 0,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
//刻度尺
|
|
|
|
|
{
|
|
|
|
|
// name: "白色圈刻度",
|
|
|
|
|
type: "gauge",
|
|
|
|
|
radius: "77%",
|
|
|
|
|
startAngle: 225, //刻度起始
|
|
|
|
|
endAngle: -134.8, //刻度结束
|
|
|
|
|
z: 4,
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: true,
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: '#354e6c'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
splitLine: {
|
|
|
|
|
length: 16, //刻度节点线长度
|
|
|
|
|
lineStyle: {
|
|
|
|
|
width: 2,
|
|
|
|
|
color: '#354e6c'
|
|
|
|
|
} //刻度节点线
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: 'rgba(255,255,255,0)',
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
}, //刻度节点文字颜色
|
|
|
|
|
pointer: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
opacity: 0
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
detail: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
data: [{
|
|
|
|
|
value: 0,
|
|
|
|
|
name: ""
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
chart.setOption(option);
|
|
|
|
|
});
|
|
|
|
|
|
2024-05-07 01:58:42 +08:00
|
|
|
|
$.each(fourData, function (index, item) {
|
2024-02-08 18:10:24 +08:00
|
|
|
|
|
2024-06-26 01:26:20 +08:00
|
|
|
|
//var colorData = ["#808080", "#A2945E", "#B3764D", "#482F1F"];
|
|
|
|
|
//if (item.RunType == 2) {
|
|
|
|
|
// colorData = ["#A2945E", "#4444BB", "#D52B6F", "#DD226D"];
|
|
|
|
|
//}
|
|
|
|
|
//if (item.RunType == 3) {
|
|
|
|
|
// colorData = ["#CCCC33", "#8FCC33", "#57C43C", "#22DD48"];
|
|
|
|
|
//}
|
2024-09-11 10:36:09 +08:00
|
|
|
|
var colorData = ["#DD226D", "#DD226D", "#DD226D", "#DD226D"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
if (item.RunType == 2) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
colorData = ["#FFA500", "#FFA500", "#FFA500", "#FFA500"];
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2024-05-07 01:58:42 +08:00
|
|
|
|
if (item.RunType == 3) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
colorData = ["#57C43C", "#57C43C", "#57C43C", "#57C43C"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
}
|
|
|
|
|
var chart = echarts.init(document.getElementById('four' + index));
|
|
|
|
|
var value = 100;
|
2024-09-11 10:36:09 +08:00
|
|
|
|
|
|
|
|
|
//名称
|
|
|
|
|
var sname = item.SystemName;
|
|
|
|
|
var index = sname.indexOf(" ")
|
|
|
|
|
if (index!=-1) {
|
|
|
|
|
sname = sname.substring(0, index) + "\n" + sname.substring(index + 1, sname.length);
|
|
|
|
|
}
|
2024-05-07 01:58:42 +08:00
|
|
|
|
option = {
|
|
|
|
|
backgroundColor: '000',
|
|
|
|
|
title: {
|
2024-09-11 10:36:09 +08:00
|
|
|
|
text: `` + sname,
|
2024-05-07 01:58:42 +08:00
|
|
|
|
subtext: item.RunType == 1 ? "未投料" : item.RunType == 2 ? "投料中" : "投料完成",
|
|
|
|
|
left: 'center',
|
2024-12-04 09:08:33 +08:00
|
|
|
|
top: '35%', //top待调整
|
2021-04-30 10:28:37 +08:00
|
|
|
|
textStyle: {
|
2024-05-07 01:58:42 +08:00
|
|
|
|
color: '#fff',
|
2024-12-04 09:08:33 +08:00
|
|
|
|
fontSize: 13,
|
2024-06-26 01:26:20 +08:00
|
|
|
|
fontFamily: 'Microsoft YaHei',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
subtextStyle: {
|
2024-06-26 01:26:20 +08:00
|
|
|
|
color: '#fff',
|
2024-12-04 09:08:33 +08:00
|
|
|
|
fontSize: 13,
|
2024-06-26 01:26:20 +08:00
|
|
|
|
fontFamily: 'Microsoft YaHei',
|
2024-05-07 01:58:42 +08:00
|
|
|
|
top: 'center'
|
|
|
|
|
},
|
|
|
|
|
itemGap: 10 //主副标题间距
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
xAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
yAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
series: [
|
|
|
|
|
// 内圆
|
|
|
|
|
{
|
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['0', '80%'],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
z: 0,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: colorData[0]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.44,
|
|
|
|
|
color: colorData[1]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.73,
|
|
|
|
|
color: colorData[2]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: colorData[3]
|
|
|
|
|
}
|
|
|
|
|
]),
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
position: "center",
|
2021-04-30 10:28:37 +08:00
|
|
|
|
|
2024-05-07 01:58:42 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [100],
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
};
|
|
|
|
|
chart.setOption(option);
|
|
|
|
|
});
|
2021-04-30 10:28:37 +08:00
|
|
|
|
|
2024-05-07 01:58:42 +08:00
|
|
|
|
$.each(fiveData, function (index, item) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
|
|
|
|
|
var colorData = ["#DD226D", "#DD226D", "#DD226D", "#DD226D"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
if (item.RunType == 2) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
colorData = ["#FFA500", "#FFA500", "#FFA500", "#FFA500"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
}
|
|
|
|
|
if (item.RunType == 3) {
|
2024-12-04 09:08:33 +08:00
|
|
|
|
colorData = ["#57C43C", "#57C43C", "#57C43C", "#57C43C"];
|
2024-05-07 01:58:42 +08:00
|
|
|
|
}
|
|
|
|
|
var chart = echarts.init(document.getElementById('five' + index));
|
|
|
|
|
var value = 100;
|
2024-09-11 10:36:09 +08:00
|
|
|
|
//名称
|
|
|
|
|
var sname = item.SystemName;
|
|
|
|
|
var index = sname.indexOf(" ")
|
|
|
|
|
if (index != -1) {
|
|
|
|
|
sname = sname.substring(0, index) + "\n" + sname.substring(index + 1, sname.length);
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-07 01:58:42 +08:00
|
|
|
|
option = {
|
|
|
|
|
backgroundColor: '000',
|
|
|
|
|
title: {
|
2024-09-11 10:36:09 +08:00
|
|
|
|
text: sname,
|
2024-05-07 01:58:42 +08:00
|
|
|
|
subtext: item.RunType == 1 ? "未运行" : item.RunType == 2 ? "运行中" : "停车检修",
|
|
|
|
|
left: 'center',
|
2024-12-04 09:08:33 +08:00
|
|
|
|
top: '35%', //top待调整
|
2024-05-07 01:58:42 +08:00
|
|
|
|
textStyle: {
|
|
|
|
|
color: '#fff',
|
2024-12-04 09:08:33 +08:00
|
|
|
|
fontSize: 13,
|
2024-06-26 01:26:20 +08:00
|
|
|
|
fontFamily: 'Microsoft YaHei',
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
subtextStyle: {
|
|
|
|
|
color: '#ff',
|
2024-12-04 09:08:33 +08:00
|
|
|
|
fontSize: 13,
|
2024-06-26 01:26:20 +08:00
|
|
|
|
fontFamily: 'Microsoft YaHei',
|
2024-05-07 01:58:42 +08:00
|
|
|
|
top: 'center'
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
itemGap: 10 //主副标题间距
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
xAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
yAxis: {
|
|
|
|
|
splitLine: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
axisLabel: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
},
|
2024-05-07 01:58:42 +08:00
|
|
|
|
axisLine: {
|
|
|
|
|
show: false
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
2024-05-07 01:58:42 +08:00
|
|
|
|
},
|
|
|
|
|
series: [
|
|
|
|
|
// 内圆
|
2021-04-30 10:28:37 +08:00
|
|
|
|
{
|
2024-05-07 01:58:42 +08:00
|
|
|
|
type: 'pie',
|
|
|
|
|
radius: ['0', '80%'],
|
|
|
|
|
center: ['50%', '50%'],
|
|
|
|
|
z: 0,
|
|
|
|
|
itemStyle: {
|
|
|
|
|
normal: {
|
|
|
|
|
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
|
|
|
|
|
{
|
|
|
|
|
offset: 0,
|
|
|
|
|
color: colorData[0]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.44,
|
|
|
|
|
color: colorData[1]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 0.73,
|
|
|
|
|
color: colorData[2]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
offset: 1,
|
|
|
|
|
color: colorData[3]
|
|
|
|
|
}
|
|
|
|
|
]),
|
|
|
|
|
label: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
labelLine: {
|
|
|
|
|
show: false
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
label: {
|
|
|
|
|
normal: {
|
|
|
|
|
position: "center",
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: [100],
|
2021-04-30 10:28:37 +08:00
|
|
|
|
}
|
|
|
|
|
]
|
2024-05-07 01:58:42 +08:00
|
|
|
|
};
|
|
|
|
|
chart.setOption(option);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
});
|
2021-04-30 10:28:37 +08:00
|
|
|
|
|
2024-05-07 01:58:42 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
2021-04-30 10:28:37 +08:00
|
|
|
|
</html>
|
|
|
|
|
|