Yangwl
/
LJ-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

设备产量看板-增加班次查询

Browse Source
yangwl
LAPTOP-R6EHHS26\86155 1 year ago
parent 55ffe9f104
commit 19634920f6
2 changed files with 262 additions and 732 deletions
Show Stats Download Patch File Download Diff File

8
src/api/kanban/dailyoutput.js
Unescape Escape View File

@ -16,3 +16,11 @@ export function getMesBoardEquProductionToday(data) {
data: data
});
}
// 获取班次
export function getBoardShifts(data) {
return request({
url: '/mes/wcsInterface/getBoardShifts',
method: 'post',
data: data
});
}

758
src/views/kanban/dailyoutput/index.vue
Unescape Escape View File

@ -19,7 +19,11 @@
<div class="content-top">
<div class="factory">
<div class="selectborder">
<select v-model="selectxt" @change="selectline(selectxt)">
<select
v-model="selectxt"
class="select1"
@change="selectline(selectxt)"
>
<option
:key="index"
:value="x.parentName"
@ -30,6 +34,22 @@
<!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
</select>
</div>
<div class="selectborder selectborder1">
<select
v-model="selectxtclasses"
class="select1"
@change="selectline2(selectxtclasses)"
>
<option
:key="index"
:value="x.shiftId"
v-for="(x, index) in classesList"
>
{{ x.shiftDesc }}
</option>
<!-- <option :key="index" :value="x.seriesName" v-for="(x, index) in ceshib">{{ x.seriesName }}</option> -->
</select>
</div>
</div>
<div class="timebox">
<div class="time">
@ -162,6 +182,7 @@
import {
getBoardFactory,
getMesBoardEquProductionToday,
getBoardShifts,
} from "@/api/kanban/dailyoutput";
import * as echarts from "echarts";
import moment from "moment";
@ -177,7 +198,9 @@ export default {
return {
gettimedata: "",
selectxt: null,
selectxtclasses: null,
getLineList: [],
classesList: [],
number1: 0,
number2: 0,
number3: 0,
@ -203,9 +226,9 @@ export default {
};
},
created() {},
destroyed(){
clearInterval(this.time1)
this.time1 = null
destroyed() {
clearInterval(this.time1);
this.time1 = null;
},
mounted() {
// this.datetime = moment().subtract(2, "day").format("yyyy-MM-DD");
@ -224,19 +247,26 @@ export default {
}, 1000);
},
selectFactorylist() {
const _this = this;
getBoardFactory({
factory: null,
}).then((response) => {
if (response.data) {
this.getLineList = response.data;
this.selectxt = this.getLineList[0].parentName;
this.initChart1();
this.time1 = setInterval(() => {
this.initChart1();
_this.getLineList = response.data;
_this.selectxt = _this.getLineList[0].parentName;
getBoardShifts({
factory: _this.selectxt,
}).then((response) => {
if (response.data) {
console.log(response.data);
_this.classesList = response.data;
_this.selectxtclasses = _this.classesList[0].shiftId;
_this.initChart1();
_this.time1 = setInterval(() => {
_this.initChart1();
}, 1000 * 60 * 1);
// this.initChart2();
// this.initChart3();
// this.initChart4();
}
});
}
});
},
@ -346,6 +376,7 @@ export default {
myChart1.setOption(option1);
getMesBoardEquProductionToday({
factory: _this.selectxt,
shiftId: _this.selectxtclasses,
ymd: _this.datetime,
equTypeCode: "equ_type_cxj",
}).then((response) => {
@ -578,6 +609,7 @@ export default {
myChart2.setOption(option2);
getMesBoardEquProductionToday({
factory: _this.selectxt,
shiftId: _this.selectxtclasses,
ymd: _this.datetime,
equTypeCode: "equ_type_hf",
}).then((response) => {
@ -770,6 +802,7 @@ export default {
myChart3.setOption(option3);
getMesBoardEquProductionToday({
factory: _this.selectxt,
shiftId: _this.selectxtclasses,
ymd: _this.datetime,
equTypeCode: "equ_type_spj",
}).then((response) => {
@ -963,6 +996,7 @@ export default {
myChart4.setOption(option4);
getMesBoardEquProductionToday({
factory: _this.selectxt,
shiftId: _this.selectxtclasses,
ymd: _this.datetime,
equTypeCode: "equ_type_lg",
}).then((response) => {
@ -1052,613 +1086,54 @@ export default {
}
});
},
initChart2() {
selectline() {
const _this = this;
var myChart2 = echarts.init(document.querySelector("#echart2"));
var option2 = {
grid: {
left: "70",
right: "7%",
top: "5%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: "axis",
show: true,
axisPointer: {
type: "none",
},
formatter: function (e) {
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
},
},
xAxis: {
name: "辆",
// max: total,
splitLine: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
axisTick: {
show: true,
},
},
yAxis: [
{
type: "category",
inverse: false,
data: [],
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
],
series: [
{
type: "pictorialBar",
symbol: "rect",
// symbolRepeat: "fixed",
// symbolMargin: "2",
// symbolClip: true,
// symbolSize: [5, 20],
barWidth: 20,
data: [],
label: {
normal: {
formatter: "{b}",
textStyle: {
color: "#D0DEEE",
fontSize: 14,
},
position: "left",
distance: 10, //
show: true,
},
},
z: 10,
},
{
type: "bar",
itemStyle: {
color: "#141A27",
},
label: {
normal: {
formatter: "{b}",
textStyle: {
color: "#D0DEEE",
fontSize: 14,
},
position: "right",
distance: 10, //
show: true,
},
},
data: [], // value鍊<EFBFBD>
tooltip: {
show: false,
},
barWidth: 30,
},
],
};
myChart2.setOption(option2);
getMesBoardEquProductionToday({
this.optionDatalist1 = [];
this.optionDatalist2 = [];
this.optionDatalist3 = [];
this.optionDatalist4 = [];
getBoardShifts({
factory: _this.selectxt,
ymd: _this.datetime,
equTypeCode: "equ_type_cxj",
}).then((response) => {
if (response) {
if (response.data) {
let numberlist = [];
let dataoption = [];
let totalArr = [];
_this.optionDatalist2 = [];
_this.number2 = response.data.totalNum[0].totalNum;
response.data.everyNum.forEach((item) => {
let a = {};
a.name = item.equName;
a.value = item.totalNum;
a.code = item.equCode;
_this.optionDatalist2.push(a);
dataoption.push(a);
numberlist.push(item.totalNum);
});
dataoption.sort((a, b) => {
return a.value - b.value;
});
let max = Math.max(...numberlist);
max = max + 100;
dataoption.forEach((item) => {
totalArr.push(max);
});
option2 = {
yAxis: [
{
data: dataoption,
},
],
series: [
{
data: dataoption,
itemStyle: {
normal: {
color: function (params) {
var index_num = params.value;
for (var i = 0; i < dataoption.length; i++) {
//判断数据是否大于1
if (index_num > 1131) {
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
//return colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#FFB742" },
{ offset: 1, color: "#FFB742" },
]
);
} else {
//var colorList = ['blue'];
//return colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#005954" },
{ offset: 1, color: "#66E1DF" },
]
);
console.log(response.data);
_this.classesList = response.data;
_this.selectxtclasses = _this.classesList[0].shiftId;
_this.initChart1();
}
}
},
},
});
},
selectline2() {
this.initChart1();
},
{
data: totalArr,
//左侧第一个选择类型下拉框 回调函数
},
],
};
myChart2.setOption(option2);
}
}
});
},
initChart3() {
const _this = this;
var myChart3 = echarts.init(document.querySelector("#echart3"));
var option3 = {
grid: {
left: "70",
right: "7%",
top: "5%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: "axis",
show: true,
axisPointer: {
type: "none",
},
formatter: function (e) {
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
},
},
xAxis: {
name: "辆",
// max: total,
splitLine: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
axisTick: {
show: true,
},
},
yAxis: [
{
type: "category",
inverse: false,
data: [],
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
],
series: [
{
type: "pictorialBar",
symbol: "rect",
// symbolRepeat: "fixed",
// symbolMargin: "2",
// symbolClip: true,
// symbolSize: [5, 20],
barWidth: 20,
data: [],
label: {
normal: {
formatter: "{b}",
textStyle: {
color: "#D0DEEE",
fontSize: 14,
},
position: "left",
distance: 10, //
show: true,
},
},
z: 10,
},
{
type: "bar",
itemStyle: {
color: "#141A27",
},
label: {
normal: {
formatter: "{b}",
textStyle: {
color: "#D0DEEE",
fontSize: 14,
},
position: "right",
distance: 10, //
show: true,
},
},
data: [], // value鍊<EFBFBD>
tooltip: {
show: false,
},
barWidth: 30,
},
],
};
myChart3.setOption(option3);
getMesBoardEquProductionToday({
factory: _this.selectxt,
ymd: _this.datetime,
equTypeCode: "equ_type_cxj",
}).then((response) => {
if (response) {
if (response.data) {
let numberlist = [];
let dataoption = [];
let totalArr = [];
_this.optionDatalist3 = [];
_this.number3 = response.data.totalNum[0].totalNum;
response.data.everyNum.forEach((item) => {
let a = {};
a.name = item.equName;
a.value = item.totalNum;
a.code = item.equCode;
_this.optionDatalist3.push(a);
dataoption.push(a);
numberlist.push(item.totalNum);
});
dataoption.sort((a, b) => {
return a.value - b.value;
});
let max = Math.max(...numberlist);
max = max + 100;
dataoption.forEach((item) => {
totalArr.push(max);
});
option3 = {
yAxis: [
{
data: dataoption,
},
],
series: [
{
data: dataoption,
itemStyle: {
normal: {
color: function (params) {
var index_num = params.value;
for (var i = 0; i < dataoption.length; i++) {
//判断数据是否大于1
if (index_num > 1131) {
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
//return colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#FFB742" },
{ offset: 1, color: "#FFB742" },
]
);
} else {
//var colorList = ['blue'];
//return colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#005954" },
{ offset: 1, color: "#66E1DF" },
]
);
}
}
},
},
},
},
{
data: totalArr,
},
],
};
myChart3.setOption(option3);
}
}
});
},
initChart4() {
const _this = this;
var myChart4 = echarts.init(document.querySelector("#echart4"));
var option4 = {
grid: {
left: "70",
right: "7%",
top: "5%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: "axis",
show: true,
axisPointer: {
type: "none",
},
formatter: function (e) {
return `${e[0].data.name}\n${e[0].marker}${e[0].data.value}`;
},
},
xAxis: {
name: "辆",
// max: total,
splitLine: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
axisTick: {
show: true,
},
},
yAxis: [
{
type: "category",
inverse: false,
data: [],
axisLine: {
show: true,
},
axisTick: {
show: false,
},
axisLabel: {
show: false,
},
},
],
series: [
{
type: "pictorialBar",
symbol: "rect",
// symbolRepeat: "fixed",
// symbolMargin: "2",
// symbolClip: true,
// symbolSize: [5, 20],
barWidth: 20,
data: [],
label: {
normal: {
formatter: "{b}",
textStyle: {
color: "#D0DEEE",
fontSize: 14,
},
position: "left",
distance: 10, //
show: true,
},
},
z: 10,
},
{
type: "bar",
itemStyle: {
color: "#141A27",
},
label: {
normal: {
formatter: "{b}",
textStyle: {
color: "#D0DEEE",
fontSize: 14,
},
position: "right",
distance: 10, //
show: true,
},
},
data: [], // value鍊<EFBFBD>
tooltip: {
show: false,
},
barWidth: 30,
},
],
};
myChart4.setOption(option4);
getMesBoardEquProductionToday({
factory: _this.selectxt,
ymd: _this.datetime,
equTypeCode: "equ_type_cxj",
}).then((response) => {
if (response) {
if (response.data) {
let numberlist = [];
let dataoption = [];
let totalArr = [];
_this.optionDatalist4 = [];
_this.number4 = response.data.totalNum[0].totalNum;
response.data.everyNum.forEach((item) => {
let a = {};
a.name = item.equName;
a.value = item.totalNum;
a.code = item.equCode;
_this.optionDatalist4.push(a);
dataoption.push(a);
numberlist.push(item.totalNum);
});
dataoption.sort((a, b) => {
return a.value - b.value;
});
let max = Math.max(...numberlist);
max = max + 100;
dataoption.forEach((item) => {
totalArr.push(max);
});
option4 = {
yAxis: [
{
data: dataoption,
},
],
series: [
{
data: dataoption,
itemStyle: {
normal: {
color: function (params) {
var index_num = params.value;
for (var i = 0; i < dataoption.length; i++) {
//判断数据是否大于1
if (index_num > 1131) {
//var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
//return colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#FFB742" },
{ offset: 1, color: "#FFB742" },
]
);
} else {
//var colorList = ['blue'];
//return colorList[params.dataIndex];
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{ offset: 0, color: "#005954" },
{ offset: 1, color: "#66E1DF" },
]
);
}
}
},
},
},
},
{
data: totalArr,
},
],
};
myChart4.setOption(option4);
}
}
});
},
selectline() {
this.initChart1();
// this.initChart2();
// this.initChart3();
// this.initChart4();
},
//左侧第一个选择类型下拉框 回调函数
},
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px 24px;
}
.home {
width: 100%;
height: 100vh;
background: url("../../../assets/images/bg-body.png") no-repeat;
background-size: 100% 100%;
background-color: #050711;
.head {
width: 100%;
height: 74px;
position: relative;
.head-content {
height: 74px;
background-image: url("../../../assets/images/bg-head.png");
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
.title {
font-size: 42px;
font-weight: 400;
color: #ffffff;
};
</script>
<style lang="scss" scoped>
.app-container {
padding: 0px 24px;
}
.home {
width: 100%;
height: 100vh;
background: url("../../../assets/images/bg-body.png") no-repeat;
background-size: 100% 100%;
background-color: #050711;
.head {
width: 100%;
height: 74px;
position: relative;
.head-content {
height: 74px;
background-image: url("../../../assets/images/bg-head.png");
background-repeat: no-repeat;
background-size: 100% 100%;
text-align: center;
.title {
font-size: 42px;
font-weight: 400;
color: #ffffff;
}
}
.head-logo {
@ -1763,15 +1238,31 @@ export default {
// left: 24px;
// }
}
.factory {
display: flex;
// justify-content: space-around;
}
.selectborder {
margin: auto;
width: 354px;
height: 50px;
background-color: transparent;
border-radius: 4px;
// border: 2px solid #27408c;
position: relative;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-around;
width: 310px;
margin-left: 50px;
}
.selectborder1 {
background-color: transparent;
border-radius: 4px;
// border: 2px solid #27408c;
position: relative;
display: flex;
align-items: center;
justify-content: space-around;
width: 88px;
margin-left: 25px;
}
.selectborder select {
/*清除select的边框样式*/
@ -1786,7 +1277,7 @@ export default {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 28px;
font-size: 25px;
font-weight: 400;
color: #ffffff;
line-height: 42px;
@ -1805,7 +1296,26 @@ export default {
-moz-appearance: none;
appearance: none;
padding-left: 20px;
font-size: 28px;
font-size: 25px;
font-weight: 500;
color: #3fa2ff;
border-radius: 0%;
}
.selectborder1 option {
/*清除select的边框样式*/
border: none;
/*清除select聚焦时候的边框颜色*/
outline: none;
background-color: transparent;
/*将select的宽高等于div的宽高*/
width: 200px;
height: 50px;
/*隐藏select的下拉图标*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-left: 20px;
font-size: 25px;
font-weight: 500;
color: #3fa2ff;
border-radius: 0%;
@ -1817,7 +1327,19 @@ export default {
background: url(../../../assets/images/xiala.png) no-repeat center;
/*通过定位将图标放在合适的位置*/
position: absolute;
right: 15px;
right: 0px;
top: 25%;
/*给自定义的图标实现点击下来功能*/
pointer-events: none;
}
.selectborder1:after {
content: "";
width: 24px;
height: 24px;
background: url(../../../assets/images/xiala.png) no-repeat center;
/*通过定位将图标放在合适的位置*/
position: absolute;
right: 0px;
top: 25%;
/*给自定义的图标实现点击下来功能*/
pointer-events: none;

Write Preview
Loading…
Cancel
Save