You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
895 lines
25 KiB
HTML
895 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
|
|
name="viewport">
|
|
<title>箱壳成型数据监控平台</title>
|
|
<meta content="箱壳成型数据监控平台" name="description">
|
|
<link href="../../static/css/board/box.css" rel="stylesheet" th:href="@{/css/board/box.css}"/>
|
|
<link href="../../static/css/main-style.css" rel="stylesheet" th:href="@{/css/main-style.css}"/>
|
|
<link href="../../static/css/materialdesignicons.min.css" rel="stylesheet"
|
|
th:href="@{/css/materialdesignicons.min.css}"/>
|
|
<link href="../../static/css/autoscroll-table.css" rel="stylesheet" th:href="@{/css/autoscroll-table.css}">
|
|
<!-- 360浏览器急速模式 -->
|
|
<meta content="webkit" name="renderer">
|
|
<!-- 避免IE使用兼容模式 -->
|
|
<meta content="IE=edge" http-equiv="X-UA-Compatible">
|
|
|
|
<style>
|
|
|
|
.hide-scrollbar .autoscroll-table td:nth-child(6n + 2) {
|
|
text-align: left;
|
|
}
|
|
|
|
.mid {
|
|
background: url(../img/mid.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 45%;
|
|
left: 4%;
|
|
width: 91%;
|
|
height: 20%;
|
|
}
|
|
|
|
#top-right {
|
|
position: absolute;
|
|
width: 23.8%;
|
|
height: 21%;
|
|
top: 14.85%;
|
|
left: 73%;
|
|
}
|
|
|
|
#mid-left {
|
|
position: absolute;
|
|
width: 23.8%;
|
|
height: 21%;
|
|
top: 44.2%;
|
|
left: 3.3%;
|
|
}
|
|
|
|
#mid-mid {
|
|
position: absolute;
|
|
width: 43.3%;
|
|
height: 21%;
|
|
top: 44.2%;
|
|
left: 28.2%;
|
|
}
|
|
|
|
#mid-right {
|
|
position: absolute;
|
|
width: 23.8%;
|
|
height: 21%;
|
|
top: 44.2%;
|
|
left: 73%;
|
|
}
|
|
|
|
#bottom-left {
|
|
position: absolute;
|
|
width: 23.8%;
|
|
height: 21%;
|
|
top: 74%;
|
|
left: 3.3%;
|
|
}
|
|
|
|
#bottom-mid {
|
|
position: absolute;
|
|
width: 43.3%;
|
|
height: 21%;
|
|
top: 74%;
|
|
left: 28.2%;
|
|
}
|
|
|
|
#bottom-right {
|
|
outline: #00a65a 0px solid;
|
|
position: absolute;
|
|
width: 23.8%;
|
|
height: 20.4%;
|
|
top: 74%;
|
|
left: 73%;
|
|
}
|
|
|
|
#oee {
|
|
position: absolute;
|
|
top: 14%;
|
|
left: 32.8%;
|
|
font-size: 22%;
|
|
color: #56B2F5;
|
|
text-shadow: 0 0 2px #56B2F5;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
#production {
|
|
position: absolute;
|
|
top: 14%;
|
|
left: 54%;
|
|
font-size: 22%;
|
|
color: #57F4AD;
|
|
text-shadow: 0 0 2px #57F4AD;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
#expected-pace {
|
|
position: absolute;
|
|
top: 26.6%;
|
|
left: 32.8%;
|
|
font-size: 22%;
|
|
color: #CCF456;
|
|
text-shadow: 0 0 2px #CCF456;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
#actual-pace {
|
|
position: absolute;
|
|
top: 26.6%;
|
|
left: 54%;
|
|
font-size: 22%;
|
|
color: #F58756;
|
|
text-shadow: 0 0 2px #F58756;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.status-table * {
|
|
|
|
}
|
|
|
|
.status-table td {
|
|
padding: 1.6% 0;
|
|
}
|
|
|
|
.status-table_item {
|
|
color: #0E72BE;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.status-table_content {
|
|
color: #8DA9C1;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
#energy-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#relay-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#power-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#contactor-chart {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#info-1 {
|
|
width: 13%;
|
|
height: 5.6%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 10%;
|
|
letter-spacing: 1px;
|
|
font-size: 12%;
|
|
}
|
|
|
|
#info-2 {
|
|
/*width: 13%;*/
|
|
/*height: 5.6%;*/
|
|
/*position: absolute;*/
|
|
/*top: 10%;*/
|
|
/*left: 10%;*/
|
|
/*letter-spacing: 1px;*/
|
|
/*font-size: 12%;*/
|
|
width: 15%;
|
|
height: 5.6%;
|
|
position: absolute;
|
|
top: 10.2%;
|
|
left: 10.4%;
|
|
letter-spacing: 1px;
|
|
font-size: 12%;
|
|
}
|
|
|
|
#info-3 {
|
|
width: 13%;
|
|
height: 5.6%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 20.2%;
|
|
letter-spacing: 1px;
|
|
font-size: 12%;
|
|
}
|
|
|
|
#info-4 {
|
|
width: 13%;
|
|
height: 5.6%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 34.6%;
|
|
letter-spacing: 1px;
|
|
font-size: 12%;
|
|
color: #FFC700;
|
|
}
|
|
|
|
#info-5 {
|
|
width: 13%;
|
|
height: 5.6%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 59.3%;
|
|
letter-spacing: 1px;
|
|
font-size: 12%;
|
|
color: #00FF37;
|
|
}
|
|
|
|
#info-6 {
|
|
width: 13%;
|
|
height: 5.6%;
|
|
position: absolute;
|
|
top: 10%;
|
|
left: 83.5%;
|
|
letter-spacing: 1px;
|
|
font-size: 12%;
|
|
color: #FE0000;
|
|
}
|
|
|
|
#plan-work-order {
|
|
position: absolute;
|
|
width: 46%;
|
|
height: 18%;
|
|
top: 23.3%;
|
|
left: 3.4%;
|
|
/*font-size: 12%;*/
|
|
}
|
|
|
|
#stocking-stat {
|
|
position: absolute;
|
|
width: 46%;
|
|
height: 18%;
|
|
top: 23.3%;
|
|
left: 50.8%;
|
|
font-size: 12%;
|
|
}
|
|
|
|
#stocking-stat_left {
|
|
width: 49%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
#stocking-stat_right {
|
|
width: 49%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
#plan-table {
|
|
position: absolute;
|
|
width: 93%;
|
|
height: 21%;
|
|
top: 44.2%;
|
|
left: 3.5%;
|
|
}
|
|
|
|
#inner-bile-by-type {
|
|
position: absolute;
|
|
width: 45.5%;
|
|
height: 21%;
|
|
top: 74%;
|
|
left: 3.5%;
|
|
}
|
|
|
|
#inner-bile-by-hour {
|
|
position: absolute;
|
|
width: 45.5%;
|
|
height: 21%;
|
|
top: 74%;
|
|
left: 50.8%;
|
|
}
|
|
|
|
.display-blocks {
|
|
text-align: center;
|
|
font-size: 16% !important;
|
|
}
|
|
|
|
.display-blocks span {
|
|
margin-top: 5%;
|
|
margin-right: 16%;
|
|
}
|
|
|
|
.display-blocks span:last-child {
|
|
margin-right: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="UShellMetalPlateScada" style="display:flex;">
|
|
<script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
|
|
<th:block th:include="include :: footer"/>
|
|
<th:block th:include="include :: echarts-js"/>
|
|
<script src="../../static/js/date-time-common.js" th:src="@{/js/date-time-common.js}"></script>
|
|
<script src="../../static/js/autoscroll-table.js" th:src="@{/js/autoscroll-table.js}"></script>
|
|
<script src="../../static/js/cron.min.js" th:src="@{/js/cron.min.js}"></script>
|
|
|
|
<div id="plan-work-order"></div>
|
|
<div id="mid-left">
|
|
<div id="energy-chart"></div>
|
|
</div>
|
|
<div id="mid-mid">
|
|
<div id="relay-chart"></div>
|
|
</div>
|
|
<div id="bottom-left">
|
|
<div id="power-chart"></div>
|
|
</div>
|
|
<div id="bottom-mid">
|
|
<div id="contactor-chart"></div>
|
|
</div>
|
|
|
|
<!--<div id="info-1">朱峰</div>-->
|
|
<div class="info-2" id="info-2">
|
|
<span style="margin-right: 13%;">箱</span>
|
|
<span style="margin-right: 13%;">壳</span>
|
|
<span style="margin-right: 13%;">成</span>
|
|
<span style="margin-right: 9%;">型</span>
|
|
</div>
|
|
<!--<div id="info-3"></div>-->
|
|
<div class="display-blocks" id="info-4">
|
|
<span>0</span>
|
|
<span>0</span>
|
|
<span>0</span>
|
|
<span>0</span>
|
|
</div>
|
|
<div class="display-blocks" id="info-5">
|
|
<span>0</span>
|
|
<span>0</span>
|
|
<span>0</span>
|
|
<span>0</span>
|
|
</div>
|
|
<div class="display-blocks" id="info-6">
|
|
<span>0</span>
|
|
<span>0</span>
|
|
<span>0</span>
|
|
<span>0</span>
|
|
</div>
|
|
|
|
<div id="stocking-stat">
|
|
</div>
|
|
|
|
<!--<div id="plan-table"></div>-->
|
|
|
|
<div id="inner-bile-by-type"></div>
|
|
<div id="inner-bile-by-hour"></div>
|
|
<div class="mid"></div>
|
|
<div class="occupancy" id="occupancy"></div>
|
|
|
|
<script src="../../static/js/update-split-blocks.js" th:src="@{/js/update-split-blocks.js}"></script>
|
|
<script src="../../static/js/auto-update.js" th:src="@{/js/auto-update.js}"></script>
|
|
<script src="../../static/js/data-merger.js" th:src="@{/js/data-merger.js}"></script>
|
|
<script>
|
|
const occupancy = (val1 = 0, val2 = 0) => {
|
|
const html = `内胆库存占用率：${val1}% 箱壳库存占用率：${val2}%`
|
|
$('#occupancy').html(html)
|
|
}
|
|
const planWorkOrderColumns = [
|
|
"序号", "型号", "计划数量", "完成数量", "生产进度", "开始时间",
|
|
]
|
|
const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%', '40%', '10%', '10%', '10%', '20%']})
|
|
// const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], {
|
|
// width: ['15%', '5%', null, null, null, null, null, null, null, null, null, null, null, null, null, null, "5%", "5%", "5%"],
|
|
// caption: "生产计划统计",
|
|
// scrollInfo: demo
|
|
// })
|
|
|
|
const inventoryInfoDataMerger = new DataMerger({
|
|
defaultValue: 0,
|
|
})
|
|
|
|
function updateInventoryInfo(columns, data, name) {
|
|
inventoryStocking.setOption({
|
|
xAxis: {
|
|
data: columns,
|
|
},
|
|
series: [
|
|
{
|
|
name: name,
|
|
data: data,
|
|
},
|
|
// {
|
|
// name: '库存_',
|
|
// data: data['seriesInfo'],
|
|
// }
|
|
]
|
|
})
|
|
}
|
|
|
|
const rowName1 = '内胆集存库'
|
|
const rowName2 = '箱壳集存库'
|
|
$(() => {
|
|
|
|
function flash() {
|
|
location.reload()
|
|
}
|
|
|
|
setCronTak(flash, "30 30,35 7,19 * * * *");
|
|
|
|
let url = '/broad/box'
|
|
//生产计划工单
|
|
autoUpdate(url + "/getProductPlanInfo ", INTERVAL, data => {
|
|
planWorkOrderTable.loadData(data.map((value, index) => [index + 1, value.name, value.plan_number, value.actual_number, `${value.rate}%`, value.day]), Object.keys(planWorkOrderColumns))
|
|
})
|
|
autoUpdate(url + "/selectStockOccupancy ", INTERVAL, data => {
|
|
occupancy(data.find(val => val.name == 'S001').rate, data.find(val => val.name == 'S002').rate)
|
|
})
|
|
|
|
autoUpdate(url + '/selectStock/S001', INTERVAL, data => {
|
|
inventoryInfoDataMerger.merge(
|
|
data['xAxisInfo'].map(value => getSC(value)),
|
|
data['seriesInfo'],
|
|
rowName1,
|
|
)
|
|
|
|
updateInventoryInfo(
|
|
inventoryInfoDataMerger.getColumnNames(),
|
|
inventoryInfoDataMerger.getData()[rowName1],
|
|
rowName1,
|
|
)
|
|
})
|
|
|
|
autoUpdate(url + '/selectStock/S002', INTERVAL, data => {
|
|
inventoryInfoDataMerger.merge(
|
|
data['xAxisInfo'].map(value => getSC(value)),
|
|
data['seriesInfo'],
|
|
rowName2,
|
|
)
|
|
|
|
updateInventoryInfo(
|
|
inventoryInfoDataMerger.getColumnNames(),
|
|
inventoryInfoDataMerger.getData()[rowName2],
|
|
rowName2,
|
|
)
|
|
})
|
|
|
|
autoUpdate('/broad/box/selectOutputByType', INTERVAL, data => {
|
|
statByType.setOption({
|
|
xAxis: {
|
|
data: data.map(value => value.name),
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
data: data.map(value => value.qty),
|
|
},
|
|
]
|
|
})
|
|
})
|
|
|
|
autoUpdate('/broad/box/selectOutputByTime', INTERVAL, data => {
|
|
statByHour.setOption({
|
|
xAxis: {
|
|
data: data.map(value => value.name),
|
|
},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
data: data.map(value => value.qty),
|
|
},
|
|
]
|
|
})
|
|
})
|
|
|
|
// autoUpdate('/system/UShellMes/getPlanStats', INTERVAL, data => {
|
|
// planTable.loadData(data, null, {
|
|
// includeHead: true,
|
|
// });
|
|
// })
|
|
})
|
|
|
|
const shiftBlocks = []
|
|
const planBlocks = []
|
|
const actualBlocks = []
|
|
const deltaBlocks = []
|
|
|
|
for (let i = 1; i <= 4; i++) {
|
|
// shiftBlocks.push(`#info-2 :nth-child(${i})`)
|
|
planBlocks.push(`#info-4 :nth-child(${i})`)
|
|
actualBlocks.push(`#info-5 :nth-child(${i})`)
|
|
deltaBlocks.push(`#info-6 :nth-child(${i})`)
|
|
}
|
|
|
|
/*班组统计*/
|
|
autoUpdate('/broad/box/planCompletion', INTERVAL, data => {
|
|
console.log(data)
|
|
// updateSplitBlocks(data.plan_shift, shiftBlocks)
|
|
updateSplitBlocks(data.find(val => val.name == '计划数量').qty, planBlocks)
|
|
updateSplitBlocks(data.find(val => val.name == '实际产量').qty, actualBlocks)
|
|
updateSplitBlocks(data.find(val => val.name == '计划数量').qty - data.find(val => val.name == '实际产量').qty, deltaBlocks)
|
|
})
|
|
|
|
const inventoryStocking = echarts.init(document.getElementById("stocking-stat"))
|
|
const statByType = echarts.init(document.getElementById("inner-bile-by-type"))
|
|
const statByHour = echarts.init(document.getElementById("inner-bile-by-hour"))
|
|
|
|
// const data1 = [25, 22, 11, 23, 19, 10]
|
|
|
|
inventoryStocking.setOption({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
//formatter: '{b1}: {c1}',
|
|
},
|
|
legend: {
|
|
show: true,
|
|
top: 0,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
}
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true,
|
|
interval: 0,
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
// fontSize:0.6 * vw,
|
|
interval: 0,
|
|
// rotate:30,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#A8AFE3',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#A4AEE6',
|
|
width: 1,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
fontSize: 11,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#A8AFE3',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#A4AEE6',
|
|
width: 1,
|
|
},
|
|
},
|
|
// interval: 10,
|
|
min: 0,
|
|
// max: 30,
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '内胆集存库',
|
|
type: 'bar',
|
|
barWidth: '20rem',
|
|
itemStyle: {
|
|
color: {
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
type: 'linear',
|
|
global: false,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: 'rgb(21, 148, 244)',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: 'rgb(13, 48, 243)',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#6ACCFE',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '箱壳集存库',
|
|
type: 'bar',
|
|
barWidth: '20rem',
|
|
itemStyle: {
|
|
color: {
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
type: 'linear',
|
|
global: false,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#0DCEB1',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#14A15A',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#02FEA9',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
grid: {
|
|
left: 10,
|
|
top: 35,
|
|
right: 10,
|
|
bottom: 3,
|
|
containLabel: true,
|
|
}
|
|
})
|
|
|
|
// const data3 = [19, 25, 13, 0, 0, 0, 0, 0, 0, 0]
|
|
statByType.setOption({
|
|
color: ['#47C39F'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
//formatter: '{b1}: {c1}',
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
interval: 0,
|
|
// rotate:30,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#A8AFE3',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#A4AEE6',
|
|
width: 1,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
fontSize: 11,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#A8AFE3',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#A4AEE6',
|
|
width: 1,
|
|
},
|
|
},
|
|
// interval: 10,
|
|
min: 0,
|
|
// max: 30,
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barWidth: '20rem',
|
|
itemStyle: {
|
|
color: {
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
type: 'linear',
|
|
global: false,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#0DCEB1',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#14A15A',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#02FEA9',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
grid: {
|
|
left: 10,
|
|
top: 20,
|
|
right: 10,
|
|
bottom: 5,
|
|
containLabel: true,
|
|
}
|
|
})
|
|
|
|
// const data4 = [0, 0, 0, 0, 27, 25, 11, 0, 0, 0]
|
|
statByHour.setOption({
|
|
color: ['#47C39F'],
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|
},
|
|
//formatter: '{b1}: {c1}',
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
alignWithLabel: true
|
|
},
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
interval: 0,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#A8AFE3',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#A4AEE6',
|
|
width: 1,
|
|
},
|
|
},
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
axisLabel: {
|
|
color: '#ffffff',
|
|
fontSize: 11,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: '#A8AFE3',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#A4AEE6',
|
|
width: 1,
|
|
},
|
|
},
|
|
// interval: 10,
|
|
min: 0,
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
barWidth: '20rem',
|
|
// data: data4,
|
|
itemStyle: {
|
|
color: {
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
type: 'linear',
|
|
global: false,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: '#B8D188',
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: '#918745',
|
|
},
|
|
],
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#02FEA9',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
grid: {
|
|
left: 10,
|
|
top: 20,
|
|
right: 10,
|
|
bottom: 5,
|
|
containLabel: true,
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
function resize() {
|
|
planWorkOrderTable.resize()
|
|
inventoryStocking.resize()
|
|
// planTable.resize()
|
|
statByType.resize()
|
|
statByHour.resize()
|
|
}
|
|
|
|
window.onresize = resize
|
|
$(() => {
|
|
resize()
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |