旧版报表、仓库
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.
 
 
 
 
 

320 lines
11 KiB

var close = new Vue({
el: '#BeforeCapacity',
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: 16
}
},
toolbox: {
show: true
},
xAxis: {
type: 'category',
axisPointer: {
type: 'shadow'
},
data: ['分选', '串焊', '层叠', '层压'],
axisLabel: {
show: true,
textStyle: {
color: '#FFFCFF', //更改坐标轴文字颜色
fontSize: 16 //更改坐标轴文字大小
}
},
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: 20
}
}
},
barGap: '50%',
barCategoryGap: '30%',
data: [0, 0, 0, 0]
},
{
name: 'Line2',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 20
}
}
},
itemStyle: {
normal: {
color: '#68EFF5'
}
},
barGap: '50%',
barCategoryGap: '30%',
data: [0, 0, 0, 0]
},
{
name: 'Line3',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 20
}
}
},
itemStyle: {
normal: {
color: '#FAEA88'
}
},
barGap: '50%',
barCategoryGap: '30%',
data: [0, 0, 0,0]
},
{
name: 'Line4',
type: 'bar',
symbol: 'roundRect',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: { //数值样式
//color: 'black',
fontSize: 20
}
}
},
itemStyle: {
normal: {
color: '#ff9100'
}
},
barGap: '50%',
barCategoryGap: '30%',
data: [0, 0, 0, 0]
}
]
}
},
mounted() {
var self = this;
self.chart_inout = echarts.init(document.getElementById('before'));
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);
$('#before').css("height", height + "px");
self.chart_inout.resize();
$(window).resize(function () {
var h = parseInt($(window).height());
var height = (h - 130);
console.log(height);
$('#before').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("BeforeCapacity", {});
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]
$.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;
}
});
}
self.chart_inout.setOption(chart_option);
}
catch (err) {
console.log(err);
}
}
//$.post("/SQL/GetDataFromSqlTextByDsID",
//{
// datasourceid: "10001",
// sql: sql_update
//}, function (result) {
// var chart_option = chart_inout.getOption();
// for (var i = 1; i <= 3; i++) {
// $.each(result, function (ind, row) {
// if (row.LINE == i) {
// if (row.STEP == '分选') chart_option.series[i - 1].data[0] = row.T;
// if (row.STEP == '串焊') chart_option.series[i - 1].data[1] = row.T;
// if (row.STEP == '层叠') chart_option.series[i - 1].data[2] = row.T;
// if (row.STEP == '层压') chart_option.series[i - 1].data[3] = row.T;
// }
// });
// }
// chart_inout.setOption(chart_option);
//}, 'json');
},
//请求数据方法
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)
})
}
}
})