旧版报表、仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

303 lines
10 KiB

var close = new Vue({
el: '#TotalCapacity',
data: {
info: [],
chart_inout: '',
option_inout: {
backgroundColor: "rgba(0,0,100,0.0)",
title: {
text: '',
x: 'center'
},
legend: {
data: ['Line1', 'Line2', 'Line3', 'Line4'],
x: 'center',
top: 15,
textStyle: {//图例文字的样式
color: '#FFFCFF',
fontSize: 20
}
},
toolbox: {
show: true
},
xAxis: {
type: 'category',
axisPointer: {
type: 'shadow'
},
data: ['分选', '串焊', '层叠', '层压','装框','包装'],
axisLabel: {
show: true,
textStyle: {
color: '#FFFCFF', //更改坐标轴文字颜色
fontSize: 20 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//左边线的颜色
width: '2'//坐标线的宽度
}
},
},
yAxis: {
type: 'value',
name: '产量',
nameTextStyle: {
color: "#FFFCFF",
fontSize: 20,
padding: 10
},
scale: true,
axisLabel: {
show: true,
textStyle: {
color: '#FFFCFF', //更改坐标轴文字颜色
fontSize: 20 //更改坐标轴文字大小
}
},
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff',//左边线的颜色
width: '2'//坐标线的宽度
}
},
splitLine: { //网格线
lineStyle: {
type: 'dashed' //设置网格线类型 dotted:虚线 solid:实线
},
show: true //隐藏或显示
}
},
series: [
{
name: 'Line1',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 22
}
}
},
barGap: '10%',
barCategoryGap: '30%',
data: [0, 0, 0, 0, 0, 0]
},
{
name: 'Line2',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 22
}
}
},
itemStyle: {
normal: {
color: '#68EFF5'
}
},
barGap: '10%',
barCategoryGap: '30%',
data: [0, 0, 0, 0, 0, 0]
},
{
name: 'Line3',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 22
}
}
},
itemStyle: {
normal: {
color: '#FAEA88'
}
},
barGap: '10%',
barCategoryGap: '30%',
data: [0, 0, 0, 0, 0, 0]
},
{
name: 'Line4',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 22
}
}
},
itemStyle: {
normal: {
color: '#ff9100'
}
},
barGap: '10%',
barCategoryGap: '30%',
data: [0, 0, 0, 0, 0, 0]
}
]
}
},
mounted() {
var self = this;
self.chart_inout = echarts.init(document.getElementById('total'));
self.chart_inout.clear();
self.chart_inout.setOption(self.option_inout);
setTimeout(function () {
window.onresize = function () {
self.chart_inout.resize();
}
}, 200)
var h = document.documentElement.clientHeight;
console.log(h);
var height = (h - 90);
console.log(height);
$('#total').css("height", height + "px");
self.chart_inout.resize();
$(window).resize(function () {
var h = parseInt($(window).height());
var height = (h - 130);
console.log(height);
$('#total').css("height", height + "px");
self.chart_inout.resize();
})
self.fun_update();
self.fun_time();
setInterval(self.fun_update, 60000);
setInterval(self.fun_time, 1000);
},
methods: {
fun_time: function () {
var self = this;
$("#time").html(self.getTime());
},
getTime: function () { //获取时间
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
//这样写显示时间在1~9会挤占空间;所以要在1~9的数字前补零;
if (hour < 10) {
hour = '0' + hour;
}
if (minute < 10) {
minute = '0' + minute;
}
if (second < 10) {
second = '0' + second;
}
var x = date.getDay();//获取星期
var time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
return time;
},
fun_update: function () {
var self = this;
execute();
async function execute() {
try {
let result = await self.FetchApi("AfterCapacity", {});
result = await result.json();
console.log(result);
var chart_option = self.chart_inout.getOption();
for (var i = 1; i <= 4; i++) {
self.option_inout.series[i - 1].data = [0, 0, 0, 0, 0, 0]
$.each(result, function (ind, row) {
if (row.line_id == i) {
if (row.process_code == '分选') chart_option.series[i - 1].data[0] = row.qty;
if (row.process_code == 'M10') chart_option.series[i - 1].data[1] = row.qty;
if (row.process_code == 'M15') chart_option.series[i - 1].data[2] = row.qty;
if (row.process_code == 'N30') chart_option.series[i - 1].data[3] = row.qty;
if (row.process_code == 'M45') chart_option.series[i - 1].data[4] = row.qty;
if (row.process_code == 'P100') chart_option.series[i - 1].data[5] = row.qty;
}
});
}
self.chart_inout.setOption(chart_option);
}
catch (err) {
console.log(err);
}
}
},
//请求数据方法
requestApi: function (config) {//modulename, funname, para, success, fail) {
fetch("/api/" + config.modulename + "/" + config.funname + "", {
method: "post",
headers: {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify(config.para)
}).then(
(res) => { return res.json() }
).then(
(res) => { config.success(res) }
).catch(
(ex) => { config.fail(ex) }
)
},
FetchApi: function (funname, para) {
return fetch("/api/BeforeCapacity/" + funname + "", {
method: "post",
headers: {
"Accept": "application/json, text/plain, */*",
"Content-Type": "application/json"
},
body: JSON.stringify(para)
})
}
}
})