diff --git a/src/views/bigScreen/index_photon.vue b/src/views/bigScreen/index_photon.vue index 63d5b2e1..f73d30a5 100644 --- a/src/views/bigScreen/index_photon.vue +++ b/src/views/bigScreen/index_photon.vue @@ -7,84 +7,35 @@ -
-
+
+
本周交付数
-
+
本周合格数
-
+
本周合格率
-
+
-
-
+
+
枣庄 {{ currentDay }}{{ currentWeek @@ -95,16 +46,6 @@ />
-
- - AVG合格数 -
- {{ countOk_AVG }} -
-
-
-
+
+
@@ -182,32 +93,14 @@ 10车间
-
+
本周计划完成度
-
+
@@ -483,7 +376,6 @@ export default { }, deptName: "10车间", heightTimer: null, - countOk_AVG: 0, countOk_dept7: 0, countOk_dept10: 0, blockTableHeight: 0, @@ -705,37 +597,7 @@ export default { }); } that.saleOutdept6 = saleOutdept6; - that.getAVGDayData(); - }); - }, - //获取AVG的交付数$合格数 - getAVGDayData() { - let that = this; - this.$API.wpm.otherlog.list - .req({ - product: "AVG", - page: 0, - handle_date__gte: that.start_date, - handle_date__lte: that.end_date, - }) - .then((res) => { - let list = res; - let count_ok = 0, - saleOutAVG = [0, 0, 0, 0, 0, 0, 0], - countOkAVG = [0, 0, 0, 0, 0, 0, 0]; - if (list.length > 0) { - list.forEach((item) => { - count_ok = count_ok + item.count_ok; - let day = item.handle_date.split("-"); - let index = this.weekDateList.indexOf(day[2]); - saleOutAVG[index] = item.count_delivered; - countOkAVG[index] = item.count_ok; - }); - that.saleOutAVG = saleOutAVG; - that.countOkAVG = countOkAVG; - that.countOk_AVG = count_ok; - } - that.getCountDept7(); + that.getCountDept7(); //左1---本周交付数 let chartDom = document.getElementById("line1"); chartDom.style.height = this.blockHeight; @@ -745,9 +607,6 @@ export default { trigger: "axis", axisPointer: { type: "cross", - label: { - backgroundColor: "#6a7985", - }, }, }, legend: { @@ -758,16 +617,12 @@ export default { { backgroundColor: "rgb(1,235,239)", name: "预制棒管", - textStyle: { color: "#fff", }, itemStyle: { color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -781,31 +636,6 @@ export default { ), }, }, - { - name: "AVG", - textStyle: { - color: "#fff", - }, - itemStyle: { - // color:'rgb(1,235,239)', - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgb(1,235,239)", - }, - { - offset: 1, - color: "rgb(5, 158, 163)", - }, - ] - ), - }, - }, ], }, grid: { @@ -857,42 +687,6 @@ export default { { name: "预制棒管", type: "line", - stack: "Total", - smooth: true, - lineStyle: { - width: 1, - color: "rgb(1,235,239)", - }, - - showSymbol: false, - areaStyle: { - opacity: 0.8, - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgba(1,235,239)", - }, - { - offset: 1, - color: "rgb(5, 158, 163)", - }, - ] - ), - }, - emphasis: { - focus: "series", - }, - data: that.saleOutdept6, - }, - { - name: "AVG", - type: "line", - stack: "Total", smooth: true, lineStyle: { width: 1, @@ -902,10 +696,7 @@ export default { areaStyle: { opacity: 0.8, color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -921,11 +712,40 @@ export default { emphasis: { focus: "series", }, - data: that.saleOutAVG, + data: that.saleOutdept6, }, ], }; myChart.setOption(option); + }); + }, + //获取AVG的交付数$合格数 + getAVGDayData() { + let that = this; + this.$API.wpm.otherlog.list + .req({ + product: "AVG", + page: 0, + handle_date__gte: that.start_date, + handle_date__lte: that.end_date, + }) + .then((res) => { + let list = res; + let count_ok = 0, + saleOutAVG = [0, 0, 0, 0, 0, 0, 0], + countOkAVG = [0, 0, 0, 0, 0, 0, 0]; + if (list.length > 0) { + list.forEach((item) => { + count_ok = count_ok + item.count_ok; + let day = item.handle_date.split("-"); + let index = this.weekDateList.indexOf(day[2]); + saleOutAVG[index] = item.count_delivered; + countOkAVG[index] = item.count_ok; + }); + that.saleOutAVG = saleOutAVG; + that.countOkAVG = countOkAVG; + } + }); }, //7车间合格数&&合格率 @@ -993,15 +813,7 @@ export default { that.$API.bi.dataset.exec.req("lineDay", obj).then((res) => { let list = res.data2.ds0; let countOkDept10 = [0, 0, 0, 0, 0, 0, 0], - countRateDept10 = [ - null, - null, - null, - null, - null, - null, - null, - ]; + countRateDept10 = [null,null,null,null,null,null,null,]; let countOk_dept10 = 0; if (list.length > 0) { list.forEach((item) => { @@ -1039,9 +851,7 @@ export default { dept_name: that.deptName, }, }; - that.$API.bi.dataset.exec - .req("productStatistic", obj) - .then((res) => { + that.$API.bi.dataset.exec.req("productStatistic", obj).then((res) => { let list = res.data2.ds0; let PlanRate = [0, 0, 0, 0, 0, 0, 0]; if (list.length > 0) { @@ -1119,23 +929,6 @@ export default { show: false, }, }, - // { - // type: 'value', - // name: '完成度', - // min: 0, - // max: 100, - // interval: 20, - // axisLabel: { - // formatter: '{value} %', - // color: '#ffffff' - // }, - // nameTextStyle: { - // color: '#ffffff' - // }, - // splitLine: { - // show: false, - // }, - // } ], series: [ { @@ -1168,27 +961,6 @@ export default { ), }, }, - // { - // name: '合格率', - // type: 'line', - // yAxisIndex: 1, - // // 255,120,0 - // tooltip: { - // valueFormatter: function (value) { - // return value; - // } - // }, - // symbol: 'circle', - // symbolSize: 8, - // itemStyle: { - // // 设置symbol的颜色 - // color: 'rgb(255,120,0)' - // }, - // lineStyle: { - // color: 'rgb(255,120,0)' - // }, - // data: [63, 80, 71, 82, 60, 70, 85], - // } ], }; line3Chart.setOption(line3option); @@ -1759,31 +1531,6 @@ export default { top: 5, right: 5, data: [ - { - name: "AVG", - textStyle: { - color: "#fff", - }, - itemStyle: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgb(5,245,2)", - }, - { - offset: 1, - color: "rgb(7,137,43)", - }, - ] - ), - }, - }, - { name: "预制管", textStyle: { @@ -1791,10 +1538,7 @@ export default { }, itemStyle: { color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -1814,12 +1558,8 @@ export default { color: "#fff", }, itemStyle: { - // color:'rgb(1,235,239)', color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -1881,12 +1621,8 @@ export default { focus: "series", }, itemStyle: { - // color:'rgb(1,235,239)', color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -1912,10 +1648,7 @@ export default { }, itemStyle: { color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -1930,34 +1663,6 @@ export default { }, data: that.countOkDept10, }, - { - name: "AVG", - type: "bar", - stack: "Ad", - barWidth: 20, - emphasis: { - focus: "series", - }, - itemStyle: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { - offset: 0, - color: "rgb(5,245,2)", - }, - { - offset: 1, - color: "rgb(7,137,43)", - }, - ] - ), - }, - data: that.countOkAVG, - }, ], }; bar1Chart.setOption(bar1option); @@ -1980,10 +1685,7 @@ export default { }, itemStyle: { color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -2004,10 +1706,7 @@ export default { }, itemStyle: { color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -2073,12 +1772,8 @@ export default { symbolSize: 8, //设置折线上圆点大小 symbol: "circle", itemStyle: { - // 设置symbol的颜色 color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -2110,7 +1805,7 @@ export default { color: "yellow", // 100% 处的颜色 }, ], - globalCoord: false, // 缺省为 false + globalCoord: false, }, }, }, @@ -2121,12 +1816,8 @@ export default { symbolSize: 8, //设置折线上圆点大小 symbol: "circle", itemStyle: { - // 设置symbol的颜色 color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, + 0,0,0,1, [ { offset: 0, @@ -2139,7 +1830,7 @@ export default { ] ), }, - smooth: 0.5, // 设置折线弧度 + smooth: 0.5, data: that.countRateDept10, lineStyle: { color: { @@ -2158,7 +1849,7 @@ export default { color: "rgb(5, 158, 163)", // 100% 处的颜色 }, ], - globalCoord: false, // 缺省为 false + globalCoord: false, }, }, }, @@ -2171,11 +1862,12 @@ export default { let pieChart = echarts.init(pieDom); let pieoption = { color: [ - "rgb(3,195,198)", + "rgb(237,224,45)", "rgb(155,248,249)", "rgb(110,181,249)", "rgb(205,248,248)", "rgb(248,189,118)", + "rgb(3,195,198)", ], legend: { bottom: 1, @@ -2197,33 +1889,9 @@ export default { type: "pie", radius: [30, 60], center: ["50%", "45%"], - // roseType: 'area', itemStyle: { borderRadius: 2, }, - // label: { - // fontSize: 12, - // alignTo: 'edge', - // formatter: '{b}\n', - // edgeDistance: 10, - // lineHeight: 20, - // rich: { - // title: { - // fontSize: 12, - // color: '#999', - // lineHeight: 50, - // }, - // } - // }, - // labelLayout: function (params) { - // var isLeft = params.labelRect.x < myChart.getWidth() / 2; - // var points = params.labelLinePoints; - // points[2][0] = isLeft? params.labelRect.x: params.labelRect.x + params.labelRect.width; - // return { - // labelLinePoints: points - // }; - // }, - label: { minMargin: 10, edgeDistance: 10, @@ -2290,6 +1958,38 @@ export default { background: url("/public/img/photon_bg.png") no-repeat; background-size: cover; } +.leftPosition{ + position: absolute; + left: 0; + width: 20%; + z-index: 10 +} +.leftPositionContainer{ + display: flex; + flex-direction: column; + height: 100%; + padding: 0 10px; +} +#line1,#bar1,#line2,#pie,#line3{ + width: 100%; + height: 92%; + background: rgba(9, 31, 43, 0.5); + border-radius: 20px; + margin-top: 5px; +} + +.rightPosition{ + position: absolute; + right: 0; + width: 20%; + z-index: 10; +} +.rightPositionContainer{ + display: flex; + flex-direction: column; + height: 100%; + padding: 0 10px; +} #mainBlock{ padding: 0; overflow: hidden; @@ -2389,7 +2089,27 @@ export default { width: 100%; height: 100%; } - +.modelContainer{ + position: absolute; + width: 100%; + text-align: center; +} +.modeltopTitle{ + margin: 5px 0 50px 0; + color: #fff; + font-size: 12px; + font-weight: bold; +} +.progressNum{ + font-size: 30px; + color: white; + font-weight: bold; +} +.progressText{ + font-size: 18px; + color: white; + margin-top: 10px; +} #renderCanvas { width: 100%; height: 100%;