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
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)
|
|
})
|
|
}
|
|
|
|
}
|
|
})
|
|
|