diff --git a/src/api/kanban/dailyoutput.js b/src/api/kanban/dailyoutput.js index 0ad62c0..2eb6ebf 100644 --- a/src/api/kanban/dailyoutput.js +++ b/src/api/kanban/dailyoutput.js @@ -16,3 +16,11 @@ export function getMesBoardEquProductionToday(data) { data: data }); } +// 获取班次 +export function getBoardShifts(data) { + return request({ + url: '/mes/wcsInterface/getBoardShifts', + method: 'post', + data: data + }); +} diff --git a/src/views/kanban/dailyoutput/index.vue b/src/views/kanban/dailyoutput/index.vue index 36a72cb..04ab31b 100644 --- a/src/views/kanban/dailyoutput/index.vue +++ b/src/views/kanban/dailyoutput/index.vue @@ -1,160 +1,180 @@ @@ -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(); - }, 1000 * 60 * 1); - // this.initChart2(); - // this.initChart3(); - // this.initChart4(); + _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); + } + }); } }); }, @@ -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,584 +1086,25 @@ export default { } }); }, - initChart2() { - 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鍊� - tooltip: { - show: false, - }, - barWidth: 30, - }, - ], - }; - myChart2.setOption(option2); - 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.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" }, - ] - ); - } - } - }, - }, - }, - }, - { - 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鍊� - 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() { + selectline() { 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鍊� - tooltip: { - show: false, - }, - barWidth: 30, - }, - ], - }; - myChart4.setOption(option4); - 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.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); - } + if (response.data) { + console.log(response.data); + _this.classesList = response.data; + _this.selectxtclasses = _this.classesList[0].shiftId; + _this.initChart1(); } }); }, - selectline() { + selectline2() { this.initChart1(); - // this.initChart2(); - // this.initChart3(); - // this.initChart4(); }, //左侧第一个选择类型下拉框 回调函数 }, @@ -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;