<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<title>设备运行切片</title>
|
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
|
<script src="../../layuiadmin/layui/layui.js"></script>
|
<script src="../../layuiadmin/layui/layui.js"></script>
|
<script src="../../layuiadmin/Scripts/json2.js"></script>
|
<script src="../../layuiadmin/Scripts/jquery-1.4.1.js"></script>
|
<script src="../../layuiadmin/layui/layui1.js"></script>
|
<script src="../../layuiadmin/echarts.min.js"></script>
|
<script src="../../layuiadmin/dayjs.min.js"></script>
|
<link href="../../layuiadmin/layui/css/ReportPlatform.css" rel="stylesheet" />
|
<script src="../../layuiadmin/Scripts/webConfig.js"></script>
|
<style>
|
/*树状图点击高亮变色*/
|
.layui-tree-set-active>.layui-tree-entry .layui-tree-main {
|
background: #aef0f7;
|
}
|
|
.cnt {
|
border: 1px solid #5FB878;
|
height: 50px;
|
border-radius: 5px;
|
/*background: -webkit-gradient(linear, 0% 0%, 0% 50%,from(#262525), to(#262525));*/
|
/*谷歌*/
|
}
|
|
.bottomright {
|
cursor: pointer;
|
/*鼠标变成手指样式*/
|
transition: all 0.1s;
|
/*所有属性变化在0.6秒内执行动画*/
|
}
|
|
.bottomright:hover {
|
transform: scale(1.3);
|
/*鼠标放上之后元素变成1.4倍大小*/
|
}
|
|
.imgtitle {
|
width: 70%;
|
height: 50px;
|
text-align: center;
|
display: block;
|
font-size: 15px;
|
float: left;
|
line-height: 50px;
|
}
|
|
.cns {
|
border: 1px solid #5FB878;
|
height: 130px;
|
border-radius: 5px;
|
}
|
|
.cns p {
|
font-size: 12px;
|
line-height: 18px;
|
margin: 0 5px;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.check1 {
|
cursor: pointer;
|
/*鼠标变成手指样式*/
|
-webkit-transition: border linear .1s, -webkit-box-shadow linear .5s;
|
border-color: rgba(0, 148, 255, .75);
|
-webkit-box-shadow: 0 0 18px rgba(0, 148, 255);
|
}
|
|
.prs {
|
font-family: "微软雅黑";
|
font-weight: bold;
|
line-height: 30px;
|
margin: 0 0px 0px 10px;
|
float: left;
|
}
|
|
.layui-progress {
|
width: 45%;
|
float: left;
|
top: 6px;
|
}
|
|
.tr1-1,
|
.tr1-2,
|
.tr1-3,
|
.tr1-4 {
|
margin-left: 3%;
|
margin-top: 4%;
|
height: 310px;
|
border: 1px solid rgb(0 0 0 / 10%);
|
width: 95%;
|
}
|
|
.btnM {
|
width: 30%;
|
height: 50px;
|
line-height: 50px;
|
float: left;
|
text-align: right;
|
}
|
|
.layui-icon {
|
font-size: 20px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div class="layui-fluid">
|
<div class="layui-col-md12">
|
<div class="layui-card" style="padding: 1px">
|
<div class="layui-card-body" style="padding: 1px;">
|
<form class="layui-form" action="" lay-filter="component-form-group">
|
<div class="layui-row">
|
<div class="layui-col-xs2 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<div id="TreeTable" class="demo-tree demo-tree-box"
|
style="height: 600px; overflow: scroll;"></div>
|
</div>
|
<div class="layui-col-xs10 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<div class="layui-form-item" style="display: flex; justify-content: space-around;">
|
<div class="layui-inline">
|
<label class="layui-form-label">日期范围</label>
|
<div class="layui-inline" id="ID-laydate-range">
|
<div class="layui-input-inline">
|
<input type="text" autocomplete="off" id="ID-laydate-start-date"
|
class="layui-input" placeholder="开始日期">
|
</div>
|
<div class="layui-form-mid">-</div>
|
<div class="layui-input-inline">
|
<input type="text" autocomplete="off" id="ID-laydate-end-date"
|
class="layui-input" placeholder="结束日期">
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-btn-group layui-inline" id="modeBtnGroup">
|
<button type="button" class="layui-btn" data-mode="day">单日数据</button>
|
<button type="button" class="layui-btn layui-btn-primary layui-border"
|
data-mode="history">历史数据</button>
|
</div>
|
</div>
|
<div id="chartContainer" style="height:600px;display:block;overflow-y:auto;">
|
</div>
|
</div>
|
<!-- <div class="layui-col-xs1 layui-inline" style="border: solid 1.5px #e0d6d64d;">
|
<fieldset style="border: 1px solid #eee; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%); height: 585px;">
|
<legend style="color: #5FB878">操作台</legend>
|
<div class="content4">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="PowerOn(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-pause imgicon"></span>
|
</div>
|
<span class="imgtitle">开机</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="PowerOff(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-logout imgicon"></span>
|
</div>
|
<span class="imgtitle">停机</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="DotCheck(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-list imgicon"></span>
|
</div>
|
<span class="imgtitle">点检记录</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="FaultRegistration(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-list imgicon"></span>
|
</div>
|
<span class="imgtitle">故障登记</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="Maintenance(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-form imgicon"></span>
|
</div>
|
<span class="imgtitle">维修</span>
|
</div>
|
</div>
|
</div>
|
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="Resume(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-table imgicon"></span>
|
</div>
|
<span class="imgtitle">履历</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="Process(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-file imgicon"></span>
|
</div>
|
<span class="imgtitle">工艺</span>
|
</div>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 " onclick="HStatus(event,this)">
|
<div class="cnt bottomright">
|
<div class="btnM">
|
<span class="layui-icon layui-icon-set imgicon"></span>
|
</div>
|
<span class="imgtitle">状态</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div> -->
|
</div>
|
<div class="layui-row">
|
<!-- <div class="layui-col-xs3 layui-inline">
|
<div class="tr1-1" id="mychart11"> </div>
|
</div>
|
<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-2" id="mychart22"> </div>
|
</div>
|
<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-3" id="mychart3"> </div>
|
</div>
|
<div class="layui-col-xs3 layui-inline">
|
<div class="tr1-4" id="mychart4"> </div>
|
</div> -->
|
</div>
|
</form>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
<script>
|
var wktag = 0;
|
var HEquipID = 0;//设备id
|
var HEquipNumber = "";//设备编码
|
var HEquipName = "";//设备名称
|
var HSourceID = "";//产线id
|
var HDeptID = "";
|
var pieData = []; // 饼图数据集合
|
var timelineData = []; //时序图数据集合
|
layui.config({
|
base: '../../layuiadmin/' //静态资源所在路径
|
}).extend({
|
index: 'lib/index', //主入口模块
|
}).use(['index', 'form', 'table', 'element', 'laypage', 'laydate', 'tree', 'util'], function () {
|
//#region 公用变量
|
var $ = layui.$
|
, admin = layui.admin
|
, layer = layui.layer
|
, table = layui.table
|
, form = layui.form
|
, element = layui.element
|
, laypage = layui.laypage
|
, laydate = layui.laydate
|
, tree = layui.tree
|
, util = layui.util
|
//#endregion
|
|
//#region 进入页面即加载
|
|
//初始化界面
|
set_ClearBill();
|
|
//#endregion
|
|
//#region 触发事件：包括form.on(){}格式的所有点击事件、选择事件等
|
|
|
//#endregion
|
|
|
//#region 本页面被调用的所有方法
|
|
//#region 初始化界面
|
function set_ClearBill() {
|
Init_dateRange()
|
|
// var mychart11 = echarts.init(document.getElementById('mychart11'));
|
// var mychart22 = echarts.init(document.getElementById('mychart22'));
|
// var mychart3 = echarts.init(document.getElementById('mychart3'));
|
// var mychart4 = echarts.init(document.getElementById('mychart4'));
|
// get_Histogram1(mychart11, '');//柱状图1
|
// get_LineChart(mychart22, '');//折线
|
// get_Statistics(mychart3, '');//饼图
|
// get_Histogram4(mychart4, '');//柱状图4
|
|
//查询
|
get_Display_Tree();
|
}
|
//#endregion
|
|
//#region 初始化日期选择器
|
function Init_dateRange() {
|
$("#ID-laydate-start-date").val(util.toDateString(new Date(), 'yyyy-MM-dd'))
|
$("#ID-laydate-end-date").val(util.toDateString(new Date(), 'yyyy-MM-dd'))
|
|
var laydate = layui.laydate;
|
// 日期范围 - 左右面板独立选择模式
|
laydate.render({
|
elem: '#ID-laydate-range',
|
range: ['#ID-laydate-start-date', '#ID-laydate-end-date']
|
});
|
// 日期范围 - 左右面板联动选择模式
|
laydate.render({
|
elem: '#ID-laydate-rangeLinked',
|
range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
|
rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
|
});
|
}
|
//#endregion
|
|
//查询部门 设备对应的报表
|
function Check() {
|
var HBeginDate = $("#ID-laydate-start-date").val()
|
var HEndDate = $("#ID-laydate-end-date").val()
|
|
$.ajax({
|
url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList_DAQ',
|
type: "GET",
|
async: false,
|
data: { "HDeptID": HDeptID, "HEquipID": HEquipID, HBeginDate: HBeginDate, HEndDate: HEndDate, "user": sessionStorage["HUserName"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (res) {
|
data = res.data
|
|
if (data.length < 1) {
|
return
|
}
|
|
pieData = data
|
}
|
})
|
|
$.ajax({
|
url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipStatusReportList2_DAQ',
|
type: "GET",
|
async: false,
|
data: { "HDeptID": HDeptID, "HEquipID": HEquipID, HBeginDate: HBeginDate, HEndDate: HEndDate, "user": sessionStorage["HUserName"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (res) {
|
data = res.data
|
|
if (data.length < 1) {
|
return
|
}
|
console.log(timelineData)
|
timelineData = data
|
}
|
})
|
|
drawCharts()
|
|
|
//wktag = 0;
|
//$("#btomleft").html("");
|
//$.ajax({
|
// url: GetWEBURL() + '/Sc_HEquipStateDistribution/Sc_HEquipStateDistribution_Souce',
|
// type: "GET",
|
// data: { "HDeptID": HDeptID, "user": sessionStorage["HUserName"], "OrganizationID": sessionStorage["OrganizationID"] },
|
// dataType: "json",//数据类型可以为 text xml json script jsonp
|
// success: function (data) {
|
//
|
// var LoadData1 = data.data.h_p_sc_HDeptSouceMOList;
|
// if (LoadData1.length > 0) //工单列表数据
|
// {
|
//
|
// for (var i = 0; i < LoadData1.length; i++) {
|
// var html1 = '';
|
// html1 += '<div class="layui-col-sm12 layui-col-md2" style="margin: 6px;width: 180px;">';
|
// html1 += '<div class="cns" id="bs' + (i + 1) + '" onclick="CheckBtom(this,' + (i + 1) + ')">';
|
// html1 += '<dl>';
|
// html1 += '<dd class="tcenter">';
|
// html1 += '<h1 style="display:none;"><span>生产订单号主ID：</span><span id="df' + (i + 1) + '">' + LoadData1[i].生产订单主内码 + '</span></h1>';
|
// html1 += '<h1 style="display:none;"><span>生产订单子ID：</span><span id="ds' + (i + 1) + '">' + LoadData1[i].生产订单子内码 + '</span></h1>';
|
// html1 += '<h1 style="display:none;"><span>产线ID：</span><span id="cs' + (i + 1) + '">' + LoadData1[i].HSourceID + '</span></h1>';
|
// html1 += '<h1 style="display:none;"><span>设备ID：</span><span id="sb' + (i + 1) + '">' + LoadData1[i].设备id + '</span></h1>';
|
//
|
// html1 += '<p><span>设备编码：</span><span id="sbbm' + (i + 1) + '">' + LoadData1[i].设备编码 + '</span></p>';
|
// html1 += '<p><span>设备名称：</span><span id="sbmc' + (i + 1) + '">' + LoadData1[i].设备名称 + '</span></p>';
|
// html1 += '<p><span>产线：</span><span id="cxmc' + (i + 1) + '">' + LoadData1[i].产线 + '</span></p>';
|
// html1 += '<p><span>当前订单：</span><span id="gd' + (i + 1) + '">' + LoadData1[i].生产订单 + '</span></p>';
|
// html1 += '<p><span>订单数量：</span><span id="ddqty' + (i + 1) + '">' + LoadData1[i].任务单数量 + '</span></p>';
|
// html1 += '<p><span>完成数量：</span><span id="wcqty' + (i + 1) + '">' + LoadData1[i].流转卡数量 + '</span></p>';
|
// switch (LoadData1[i].设备状态) {
|
// case "空闲":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border6"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// case "开机":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border4"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// case "停机":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border3"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// case "生产":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border2"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// case "维修中":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border5"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// case "故障":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border1"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// case "维修完成":
|
// html1 += '<p><span>当前状态：</span><span class="gj_icon color_border7"></span><span>' + LoadData1[i].设备状态 + '</span></p>';
|
// break;
|
// default:
|
// }
|
// html1 += '</dd>';
|
// html1 += '</dl>';
|
// html1 += '</div>';
|
// html1 += '</div>';
|
// $("#btomleft").append(html1);
|
// }
|
// }
|
// },
|
// error: function (err) {
|
// layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
// return false;
|
// }
|
//});
|
}
|
|
|
//#region 绘制图表
|
function drawCharts() {
|
var $container = $("#chartContainer");
|
$container.empty();
|
|
var data = pieData
|
console.log(pieChart)
|
var data1 = timelineData
|
|
for (var i = 0; i < data.length; i++) {
|
var hmainid = data[i].hmainid;
|
var equipName = data[i].设备名称;
|
var dateStr = data[i].所属日期.split('T')[0];
|
|
// 时间字段
|
var runTime = data[i].运行时间 || 0; // 运行
|
var stopTime = data[i].停机时间 || 0; // 停机
|
var alarmTime = data[i].告警时间 || 0; // 告警
|
var offTime = data[i].关机时间 || 0; // 关机
|
var total = runTime + stopTime + alarmTime + offTime;
|
|
// ==============================================
|
// 1. 创建每个设备的图表外壳（左右布局：饼图 + 时序图）
|
// ==============================================
|
var itemHtml = `
|
<div style="width:100%; height:200px; margin-bottom:20px; border:1px solid #eee; padding:15px; border-radius:8px;">
|
<div style="display: inline-block; height:20%; display:flex; gap:20px;">
|
<div style="width:40%;">${dateStr} ${equipName}</div>
|
<div style="width:60%; display: flex; justify-content: right; align-items: center; gap: 8px;">
|
<div style="width: 18px; height: 18px; background-color: #73cc3f; display: inline-block"></div>
|
<div style="padding-left: 4px ;display: inline-block">运行(${runTime}H)</div>
|
<div style="width: 18px; height: 18px; background-color: #f2a439; display: inline-block"></div>
|
<div style="padding-left: 4px ;display: inline-block">停机(${stopTime}H)</div>
|
<div style="width: 18px; height: 18px; background-color: #ff796a; display: inline-block"></div>
|
<div style="padding-left: 4px ;display: inline-block">告警(${alarmTime}H)</div>
|
<div style="width: 18px; height: 18px; background-color: #9b9a9b; display: inline-block"></div>
|
<div style="padding-left: 4px ;display: inline-block">关机(${offTime}H)</div>
|
</div>
|
</div>
|
<div style="display: inline-block; height:80%; display:flex; gap:20px;">
|
<div id="chart_pie_${hmainid}_${i}" style="width:25%; height:100%;"></div>
|
<div id="chart_time_${hmainid}_${i}" style="width:70%; height:100%;"></div>
|
</div>
|
</div>`;
|
$container.append(itemHtml);
|
|
// ==============================================
|
// 2. 左侧环形饼图（运行/停机/告警/关机 占比）
|
// ==============================================
|
var pieChart = echarts.init(document.getElementById(`chart_pie_${hmainid}_${i}`));
|
pieChart.setOption({
|
// title: { text: `${dateStr} ${equipName}`, left: 'center', textStyle: { fontSize: 16 } },
|
tooltip: {
|
trigger: 'item', formatter: '{b}: {c}H ({d}%)', textStyle: {
|
lineHeight: 22 // 文字间距更大
|
},
|
},
|
legend: {
|
orient: 'vertical', right: '2%', top: 'middle', textStyle: { fontSize: 13 }
|
, formatter: function (name, value) {
|
var getRate = function () {
|
if (name == '运行') {
|
return (runTime / total * 100.0).toFixed(2)
|
}
|
if (name == '停机') {
|
return (stopTime / total * 100.0).toFixed(2)
|
}
|
if (name == '告警') {
|
return (alarmTime / total * 100.0).toFixed(2)
|
}
|
if (name == '关机') {
|
return (offTime / total * 100.0).toFixed(2)
|
}
|
}()
|
return name + '率(' + getRate
|
+ '%)'
|
}
|
},
|
series: [{
|
type: 'pie',
|
radius: ['42%', '70%'],
|
center: ['25%', '50%'],
|
itemStyle: { borderRadius: 4, borderColor: '#fff', borderWidth: 2 },
|
label: { show: false },
|
data: [
|
{ value: runTime, name: '运行', itemStyle: { color: '#73cc3f' } },
|
{ value: stopTime, name: '停机', itemStyle: { color: '#f2a439' } },
|
{ value: alarmTime, name: '告警', itemStyle: { color: '#ff796a' } },
|
{ value: offTime, name: '关机', itemStyle: { color: '#9b9a9b' } }
|
]
|
}]
|
});
|
|
// ==============================================
|
// 3. 右侧 24小时 设备运行时序图
|
// ==============================================
|
var timeChart = echarts.init(document.getElementById(`chart_time_${hmainid}_${i}`));
|
// 你的原始数据
|
var data1Instance = data1["2026-04-16"]
|
|
var startTime = dayjs("2026-04-16 00:00:00").valueOf();
|
var endTime = dayjs("2026-04-16 23:59:59").valueOf();
|
var categories = [data1Instance[0]["生产资源"]];
|
var types = [
|
{ name: '正常运行', color: '#73cc3f' },
|
{ name: '离线', color: '#9b9a9b' },
|
{ name: '待机', color: '#f2a439' },
|
];
|
|
var getColor = function (name) {
|
for (var i = 0; i < types.length; i++) {
|
if (name == types[i].name) {
|
return types[i].color
|
}
|
}
|
}
|
|
chartDataTimeline = []
|
for (var cursor = 0; cursor < data1Instance.length; cursor++) {
|
chartDataTimeline.push({
|
"name": data1Instance[cursor]["HResult"],
|
"value": [
|
0,
|
dayjs(data1Instance[cursor]["时间"]).valueOf(),
|
dayjs(data1Instance[cursor]["时间"]).add(5, 'm').valueOf(),
|
300000
|
],
|
"itemStyle": {
|
"normal": {
|
"color": getColor(data1Instance[cursor]["HResult"])
|
}
|
}
|
})
|
}
|
timeChart.setOption({
|
tooltip: {
|
formatter: function (params) {
|
return params.marker + params.name;
|
}
|
},
|
grid: {
|
top: 0,
|
bottom: 0,
|
left: 20, // 给Y轴文字留一点位置
|
right: 20,
|
containLabel: true
|
},
|
xAxis: {
|
type: 'time',
|
min: startTime, // 开始时间戳
|
max: endTime, // 结束时间戳
|
minInterval: 7200000, // 间隔两小时
|
scale: true,
|
axisLabel: {
|
formatter: function (val) {
|
return echarts.format.formatTime('hh:mm', val);
|
}
|
},
|
axisLine: {
|
show: false // 隐藏 x 轴轴线
|
}
|
},
|
yAxis: {
|
data: categories,
|
axisLine: {
|
show: false // 隐藏 y 轴轴线
|
},
|
name: "",
|
axisLabel: { show: false }, // 隐藏Y轴标签
|
},
|
series: [
|
{
|
type: 'custom',
|
renderItem: renderItem,
|
itemStyle: {
|
opacity: 0.8
|
},
|
encode: {
|
x: [1, 2],
|
y: 0
|
},
|
data: chartDataTimeline
|
}
|
]
|
})
|
}
|
}
|
//#endregion
|
|
// 树状图查询
|
function get_Display_Tree() {
|
var sWhere = " AND HUSEORGID=" + sessionStorage["OrganizationID"];
|
var ajaxLoad = layer.load();
|
$.ajax({
|
url: GetWEBURL() + '/DAQ_EquipRunningSlice/GetHEquipTreeList_DAQ',
|
data: { "sWhere": "" },
|
type: "GET",
|
success: function (data1) {
|
if (data1.count == 1) {
|
layer.close(ajaxLoad);
|
var data = data1.data;
|
MenuMain(data);
|
} else {
|
layer.close(ajaxLoad);
|
layer.alert(data1.code + data1.Message, { icon: 5 });
|
}
|
}, error: function () {
|
layer.close(ajaxLoad);
|
layer.alert("接口请求失败!", { icon: 5 });
|
}
|
});
|
}
|
|
//遍历生成主菜单
|
function MenuMain(data) {
|
var liStr = '[';
|
//遍历生成主菜单
|
HDeptID = data[0].id
|
for (var i = 0; i < data.length; i++) {
|
// 判断是否存在子菜单
|
if (data[i].children != null && data[i].children.length > 0) {
|
liStr += '{"title": "' + data[i].id + "-" + data[i].title + '", "id": "' + data[i].id + '","spread":true, "children":[ ';
|
// 遍历获取子菜单
|
for (var k = 0; k < data[i].children.length; k++) {
|
liStr += getChildMenu(data[i].children[k], 0, data[i].id);
|
}
|
liStr = liStr.substring(0, liStr.length - 1);
|
liStr += ']},';
|
} else {
|
liStr += '{"title": "' + data[i].id + "-" + data[i].title + '", "id": "' + data[i].id + '"},';
|
}
|
};
|
liStr = liStr.substring(0, liStr.length - 1);
|
liStr += "]";
|
var treeTable = JSON.parse(liStr);
|
tree.render({
|
elem: '#TreeTable' //默认是点击节点可进行收缩
|
, data: treeTable
|
, click: function (obj) {
|
//高亮变色
|
$(".layui-tree-set").removeClass('layui-tree-set-active');
|
obj.elem.addClass('layui-tree-set-active');
|
|
var data = obj.data; //获取当前点击的节点数据
|
HDeptID = 0;
|
HEquipID = 0;
|
if (data.HPID) {
|
// 有PID 判定为子节点
|
HDeptID = data.HPID || 0
|
HEquipID = data.id
|
} else {
|
HDeptID = data.id || 0
|
}
|
|
|
|
Check();
|
}
|
});
|
}
|
|
// 递归生成子菜单
|
function getChildMenu(subMenu, num, parentID) {
|
num++;
|
var subStr = '';
|
if (subMenu.children != null && subMenu.children.length > 0) {
|
subStr += '{"title": "' + subMenu.id + "-" + subMenu.title + '", "id": "' + subMenu.id + '", "HPID": "' + parentID + '","children":[';
|
for (var j = 0; j < subMenu.children.length; j++) {
|
subStr += getChildMenu(subMenu.children[j], num, parentID);
|
if (j + 1 == subMenu.children.length) {
|
subStr = subStr.substring(0, subStr.length - 1);
|
}
|
}
|
subStr += ']},';
|
} else {
|
subStr += '{"title": "' + subMenu.id + "-" + subMenu.title + '", "id": "' + subMenu.id + '","HPID": "' + parentID + '"},';
|
}
|
return subStr;
|
}
|
|
|
$('#modeBtnGroup').on('click', 'button', function (e) {
|
console.log("点击成功！event =", e); // event 事件拿到
|
|
var $btn = $(this);
|
var $btnGroup = $btn.closest('div');
|
$btnGroup.find('button').addClass("layui-btn-primary").addClass("layui-border")
|
$btn.removeClass("layui-btn-primary").removeClass("layui-border")
|
var mode = $btn.data('mode'); // day / history
|
|
|
//通过mode判断执行哪个查询，如果是day，则查询的时候，开始日期和结束日期都是当天(与日期范围无关),如果是history，则按照日期范围和历史数据进行筛选
|
});
|
|
});
|
//#endregion
|
|
//工单列表选中
|
function CheckBtom(obj, i) {
|
workcode = $("#gd" + i + "").html(); //通过样式ID获取html内容(工单号)
|
HICMOInterID = $("#df" + i + "").html(); //生产订单主内码
|
HICMOEntryID = $("#ds" + i + "").html(); //生产订单子内码
|
HEquipID = $("#sb" + i + "").html(); //设备id
|
HEquipNumber = $("#sbbm" + i + "").html(); //设备编码
|
HEquipName = $("#sbmc" + i + "").html(); //设备名称
|
HSourceID = $("#cs" + i + "").html(); //产线id
|
|
$('.cns').removeClass('check1'); //删除不同父级clss样式相同的所有元素
|
$("#bs" + i + "").addClass('check1'); // 添加当前元素的样式
|
if (HEquipID != "" && HEquipID != null) {
|
wktag = 1;
|
}
|
sWhere = {
|
HDeptID: HDeptID
|
, HSourceID: HSourceID
|
}
|
|
/* 点击 设备 开启设备详情弹窗，设备状态详情页面
|
*详情页面：日期过滤、设备运行分析、警报（可以先取值为最近的安灯管理）取值用 设备运行状态表 Sb_EquipRunningStatus(设备当前状态效率分析)
|
*/
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '设备详情',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: './DAQ_EvidenceEquipmentCockpitDetail.html?HEquipID=' + HEquipID,
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
|
},
|
});
|
// FourReport(JSON.stringify(sWhere));
|
}
|
|
//查询 部门+产线 4个图表 赋值
|
function FourReport(sWhere) {
|
$.ajax({
|
url: GetWEBURL() + '/Sc_HEquipStateDistribution/Get_EquipStateDistribution_FourReport',
|
type: "GET",
|
data: { "sWhere": sWhere, "user": sessionStorage["HUserName"], "OrganizationID": sessionStorage["OrganizationID"] },
|
dataType: "json",//数据类型可以为 text xml json script jsonp
|
success: function (data) {
|
var chartData = data.data.h_p_Sc_FourStateDistributionReport;
|
var chartData1 = data.data.h_p_Sc_FourStateDistributionReport1;
|
var chartData2 = data.data.h_p_Sc_FourStateDistributionReport2;
|
var chartData3 = data.data.h_p_Sc_FourStateDistributionReport3;
|
var mychart11 = echarts.init(document.getElementById('mychart11'));
|
var mychart22 = echarts.init(document.getElementById('mychart22'));
|
var mychart3 = echarts.init(document.getElementById('mychart3'));
|
var mychart4 = echarts.init(document.getElementById('mychart4'));
|
|
get_Histogram1(mychart11, chartData);
|
get_LineChart(mychart22, chartData1);
|
get_Statistics(mychart3, chartData2);
|
get_Histogram4(mychart4, chartData3);
|
|
},
|
error: function (err) {
|
layer.alert(err.Message, { time: 1 * 2000, icon: 5 });
|
return false;
|
}
|
});
|
}
|
|
//柱状图
|
function get_Histogram1(mychart11, chartData) {
|
// 默认的option结构
|
var option = {
|
title: {
|
text: '近七天产能', // 默认标题为空
|
left: 'center',
|
top: '10%', // 调整标题位置，放到最上面
|
textStyle: {
|
fontSize: 18,
|
color: '#ff0000'
|
}
|
},
|
grid: {
|
top: '25%', // 调整grid的top值，给标题留出空间
|
bottom: '20%',
|
left: '10%',
|
right: '10%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [] // 默认x轴数据为空
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [], // 默认series数据为空
|
type: 'bar'
|
}
|
]
|
};
|
|
// 如果有数据，更新option的内容
|
if (chartData && chartData.length > 0) {
|
option.title.text = '近七天产能'; // 正常数据时没有标题
|
option.xAxis.data = chartData.map(item => item.日期); // 设置x轴数据
|
option.series[0].data = chartData.map(item => item['生产总数']); // 设置y轴数据
|
|
option.series[0].label = {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
};
|
|
option.series[0].itemStyle = {
|
normal: {
|
color: '#15b1fa',
|
label: {
|
show: true // 在柱状图上显示数据
|
}
|
}
|
};
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
option.title.text = '暂无数据';
|
}
|
|
// 更新图表
|
mychart11.setOption(option);
|
}
|
|
//柱状图2
|
function get_LineChart(mychart22, chartData1) {
|
// 默认的option结构
|
var option = {
|
title: {
|
text: '维修', // 默认标题为空
|
left: 'center',
|
top: '10%', // 调整标题位置，放到最上面
|
textStyle: {
|
fontSize: 18,
|
color: '#ff0000'
|
}
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#15b1fa',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 1;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
grid: {
|
top: '25%', // 调整grid的top值，给标题留出空间
|
bottom: '20%',
|
left: '10%',
|
right: '10%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [] // 默认x轴数据为空
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [], // 默认series数据为空
|
type: 'bar'
|
}
|
]
|
};
|
|
|
|
// 如果有数据，更新option的内容
|
if (chartData1 && chartData1.length > 0) {
|
option.title.text = '不良原因'; // 正常数据时没有标题
|
option.xAxis.data = chartData1.map(item => item.不良原因); // 设置x轴数据
|
option.series[0].data = chartData1.map(item => item['数量']); // 设置y轴数据
|
|
option.series[0].label = {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
};
|
|
option.series[0].itemStyle = {
|
normal: {
|
color: '#15b1fa',
|
label: {
|
show: true // 在柱状图上显示数据
|
}
|
}
|
};
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
option.title.text = '暂无数据';
|
}
|
|
// 更新图表
|
mychart22.setOption(option);
|
}
|
|
//饼图
|
function get_Statistics(mychart3, chartData2) {
|
// 如果 chartData2 为空，提供一个“无数据”提示
|
if (chartData2.length === 0) {
|
mychart3.setOption({
|
title: {
|
text: '暂无数据',
|
left: 'center',
|
top: '10%',
|
textStyle: {
|
color: 'red', // 设置标题颜色为红色
|
fontSize: 18,
|
fontWeight: 'bold'
|
}
|
},
|
series: [], // 清空数据
|
graphic: [] // 清空图形中的文本
|
});
|
return;
|
}
|
|
// 状态颜色映射
|
const statusColorMap = {
|
'开机': '#28a745', // 绿色
|
'故障': '#ff63a5', // 桃红色
|
'停机': '#f0ad4e', // 黄色
|
'未知': '#6c757d' // 灰色
|
};
|
|
// 计算开机率
|
const totalDevices = chartData2.reduce((sum, item) => sum + item.数量, 0);
|
const onlineDevices = chartData2.find(item => item.状态 === '开机')?.数量 || 0;
|
const onlineRate = totalDevices === 0 ? 0 : (onlineDevices / totalDevices * 100).toFixed(2);
|
|
// 动态生成饼图数据，并根据状态设置颜色
|
var data = chartData2.map(function (item) {
|
// 获取当前状态的颜色，默认为灰色
|
var color = statusColorMap[item.状态] || statusColorMap['未知'];
|
|
return {
|
value: item.数量,
|
name: item.状态,
|
itemStyle: {
|
color: color // 为每个状态设置对应的颜色
|
}
|
};
|
});
|
|
// 图表的配置项
|
var option = {
|
title: {
|
text: '设备状态分析对比',
|
left: 'center',
|
top: '10%', // 将标题放置到顶部
|
textStyle: {
|
color: 'red', // 设置标题字体颜色为红色
|
fontSize: 18,
|
fontWeight: 'bold'
|
}
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'vertical',
|
left: 'left'
|
},
|
series: [
|
{
|
name: '设备状态',
|
type: 'pie',
|
radius: '50%',
|
data: data, // 使用动态生成的数据
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
}
|
}
|
],
|
graphic: [{
|
type: 'text',
|
left: 'center',
|
top: '85%', // 调整文本位置，让其稍微更往下
|
style: {
|
text: `开机率: ${onlineRate}%`, // 显示开机率
|
font: '16px Arial',
|
fill: '#00aaff' // 使用浅蓝色显示开机率
|
}
|
}]
|
};
|
|
// 设置图表的配置项
|
mychart3.setOption(option);
|
}
|
|
//柱状图4
|
function get_Histogram4(mychart4, chartData3) {
|
// 默认的option结构
|
var option = {
|
title: {
|
text: '维修', // 默认标题为空
|
left: 'center',
|
top: '10%', // 调整标题位置，放到最上面
|
textStyle: {
|
fontSize: 18,
|
color: '#ff0000'
|
}
|
},
|
axisLabel: {
|
show: true,
|
interval: 0,
|
color: '#15b1fa',
|
formatter: function (value) {
|
var ret = "";//拼接加\n返回的类目项
|
var maxLength = 1;//每项显示文字个数
|
var valLength = value.length;//X轴类目项的文字个数
|
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
|
if (rowN > 1)//如果类目项的文字大于3,
|
{
|
for (var i = 0; i < rowN; i++) {
|
var temp = "";//每次截取的字符串
|
var start = i * maxLength;//开始截取的位置
|
var end = start + maxLength;//结束截取的位置
|
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
|
temp = value.substring(start, end) + "\n";
|
ret += temp; //凭借最终的字符串
|
}
|
return ret;
|
}
|
else {
|
return value;
|
}
|
}
|
},
|
grid: {
|
top: '25%', // 调整grid的top值，给标题留出空间
|
bottom: '20%',
|
left: '10%',
|
right: '10%'
|
},
|
xAxis: {
|
type: 'category',
|
data: [] // 默认x轴数据为空
|
},
|
yAxis: {
|
type: 'value'
|
},
|
series: [
|
{
|
data: [], // 默认series数据为空
|
type: 'bar'
|
}
|
]
|
};
|
|
// 如果有数据，更新option的内容
|
if (chartData3 && chartData3.length > 0) {
|
option.title.text = '维修'; // 正常数据时没有标题
|
option.xAxis.data = chartData3.map(item => item.维修项目); // 设置x轴数据
|
option.series[0].data = chartData3.map(item => item['维修次数']); // 设置y轴数据
|
|
option.series[0].label = {
|
normal: {
|
show: true,
|
position: 'top',
|
formatter: function (params) {
|
return echarts.format.addCommas(params.value);
|
}
|
}
|
};
|
|
option.series[0].itemStyle = {
|
normal: {
|
color: '#15b1fa',
|
label: {
|
show: true // 在柱状图上显示数据
|
}
|
}
|
};
|
} else {
|
// 没有数据时，显示"暂无数据"提示
|
option.title.text = '暂无数据';
|
}
|
|
// 更新图表
|
mychart4.setOption(option);
|
}
|
|
|
|
//#region 操作台按钮点击事件
|
|
//开机按钮点击事件
|
function PowerOn(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增开机单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/设备开机单/Sb_EquipBeginBill.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//停机按钮点击事件
|
function PowerOff(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增停机单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/设备停机单/Sb_EquipStopBill.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//点检记录按钮点击事件
|
function DotCheck(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备月点检记录',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../车间管理/启动点检单/Sc_WorkDotCheckBillList_Day.html?OperationType=设备&linterid=' + HEquipID + '',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID,
|
"HEquipType": "设备"
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
|
},
|
});
|
}
|
|
//故障登记按钮点击事件
|
function FaultRegistration(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增故障登记单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/Sb_Add_EqpConkBookBillList.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//维修记录按钮点击事件
|
function Maintenance(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '新增维修记录单',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/Sb_Add_EqpMaintenanceBillList.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//履历按钮点击事件
|
function Resume(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备履历',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../设备管理/设备报表/Sb_EquipResumeCheckQuery.html?OperationType=1&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID,
|
"HEquipNumber": HEquipNumber,
|
"HEquipName": HEquipName
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
},
|
});
|
}
|
|
//工艺按钮点击事件
|
function Process(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备工艺参数',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../生产管理/订单状态分布/Sc_EquipmentProcessList.html?OperationType=4&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipID": HEquipID,
|
"HICMOInterID": HICMOInterID,
|
"HICMOEntryID": HICMOEntryID
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
|
},
|
});
|
}
|
|
//状态按钮点击事件
|
function HStatus(event, obj) {
|
if (wktag == 0) {
|
layer.alert("请选择对应设备", { icon: 5 });
|
return false;
|
}
|
layer.open({
|
type: 2,
|
skin: 'layui-layer-rim', //加上边框
|
title: '查看设备OEE',
|
closeBtn: 1,
|
shift: 2,
|
area: ['100%', '100%'],
|
maxmin: true,
|
content: '../../生产管理/订单状态分布/Sc_OEEStatusReport.html?OperationType=4&linterid=0&HSouceBillType=',
|
end: function () {
|
|
},
|
success: function (dom, index) {
|
var data = [];
|
data.push({
|
"HEquipNumber": HEquipNumber
|
});
|
|
//通过索引获取到当前iframe弹出层
|
var iframe = window['layui-layer-iframe' + index];
|
//调用iframe弹出层内的方法
|
iframe.edit(data);
|
|
},
|
});
|
}
|
|
function renderItem(params, api) {
|
var categoryIndex = api.value(0);
|
var start = api.coord([api.value(1), categoryIndex]);
|
var end = api.coord([api.value(2), categoryIndex]);
|
var height = api.size([0, 1])[1] * 0.6;
|
var rectShape = echarts.graphic.clipRectByRect(
|
{
|
x: start[0],
|
y: start[1] - height / 2,
|
width: end[0] - start[0],
|
height: height
|
},
|
{
|
x: params.coordSys.x,
|
y: params.coordSys.y,
|
width: params.coordSys.width,
|
height: params.coordSys.height
|
}
|
);
|
return (
|
rectShape && {
|
type: 'rect',
|
transition: ['shape'],
|
shape: rectShape,
|
style: api.style()
|
}
|
);
|
}
|
//#endregion
|
</script>
|
|
</html>
|
