From d64a1dca101070ce7d5dcbcffc34d0efbd2da841 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 03 十一月 2023 10:46:15 +0800
Subject: [PATCH] 1.综合看板 初始化
---
src/assets/images/box02.png | 0
src/views/kanbanManager/kbCommon.css | 7
src/views/kanbanManager/zhkb.vue | 910 ++++++++++++-------------------
src/assets/images/background001.jpg | 0
src/utils/myEcharts.js | 789 +++++++++++++++++++++++++++
5 files changed, 1,144 insertions(+), 562 deletions(-)
diff --git a/src/assets/images/background001.jpg b/src/assets/images/background001.jpg
new file mode 100644
index 0000000..0b020d1
--- /dev/null
+++ b/src/assets/images/background001.jpg
Binary files differ
diff --git a/src/assets/images/box02.png b/src/assets/images/box02.png
new file mode 100644
index 0000000..c2ef325
--- /dev/null
+++ b/src/assets/images/box02.png
Binary files differ
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index 8add81c..f51fdf6 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1853,3 +1853,792 @@
}
return option
}
+
+export function all01(xData2, yData) {
+ // var xData2 = ['123', '21', '32', '23', '1233']
+ var data1 = yData.map(i => i.quantity)
+ var data2 = yData.map(i => i.plan_qty)
+ var barWidth = 30
+ const option = {
+ backgroundColor: 'transparent',
+ // tooltip: {
+ // trigger: 'item'
+ // },
+ grid: {
+ left: '2%',
+ top: '20%',
+ right: '2%',
+ bottom: '5%',
+ containLabel: true
+ },
+ title: {
+ text: '鍚勮溅闂村綋鏈堣鍗曟暟/鍏ュ簱鏁伴噺',
+ left: '50%',
+ top: '0%',
+ textAlign: 'center',
+ textStyle: {
+ color: 'rgba(0,255,255,0.8)',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ xAxis: {
+ data: xData2,
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ yAxis: {
+ boundaryGap: false,
+ // splitNumber: 4,
+ type: 'value',
+ // max: 100,
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 16,
+ lineHeight: 40
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ },
+ series: [
+ { // 涓婂崐鎴煴瀛�
+ name: '2019',
+ type: 'bar',
+ barWidth: barWidth,
+ barGap: '-100%',
+ z: 0,
+ itemStyle: {
+ color: '#163F7A',
+ opacity: 0.7
+ },
+ data: data2
+ },
+ { // 涓嬪崐鎴煴瀛�
+ name: '2020',
+ type: 'bar',
+ barWidth: barWidth,
+ barGap: '-100%',
+ itemStyle: { // lenged鏂囨湰
+ opacity: 0.7,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#12B9DB' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#6F8EF2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ data: data1
+ },
+ { // 鏇夸唬鏌辩姸鍥� 榛樿涓嶆樉绀洪鑹诧紝鏄渶涓嬫柟鏌卞浘锛堥偖浠惰惀閿�锛夌殑value鍊� - 20
+ type: 'bar',
+ barWidth: barWidth,
+ barGap: '-100%',
+ stack: '骞垮憡',
+ itemStyle: {
+ color: 'transparent'
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'left',
+ fontSize: 16,
+ color: colorX,
+ zIndex: 10
+ }
+ },
+ data: data1
+ },
+ { // 涓婂崐鎴煴瀛愰《閮ㄥ渾鐗�
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [barWidth, 15],
+ 'symbolOffset': [0, -10],
+ 'z': 12,
+ 'symbolPosition': 'end',
+ itemStyle: {
+ color: '#163F7A',
+ opacity: 1
+ },
+ label: {
+ show: true,
+ position: 'top',
+ fontSize: 16,
+ color: '#fff'
+ },
+ 'data': data2
+ },
+ { // 涓嬪崐鎴煴瀛愰《閮ㄥ渾鐗�
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [barWidth, 15],
+ 'symbolOffset': [0, -10],
+ 'z': 12,
+ itemStyle: {
+ opacity: 1,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#12B9DB' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#6F8EF2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // fontSize: 16,
+ // color: '#fff'
+ // // formatter:(item)=>{
+ // // console.log(item)
+ // // return 'ssss'
+ // // }
+ // },
+ 'symbolPosition': 'end',
+ 'data': data1
+ },
+ { // 涓嬪崐鎴煴瀛愬簳閮ㄥ渾鐗�
+ 'name': '',
+ 'type': 'pictorialBar',
+ 'symbolSize': [barWidth, 15],
+ 'symbolOffset': [0, 5],
+ 'z': 12,
+ itemStyle: {
+ opacity: 1,
+ color: function(params) {
+ return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#12B9DB' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#6F8EF2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ 'data': [1, 1, 1, 1, 1]
+ },
+ {
+ name: '绗竴鍦�',
+ type: 'pictorialBar',
+ symbolSize: [47, 16],
+ symbolOffset: [0, 11],
+ z: 11,
+ itemStyle: {
+ normal: {
+ color: 'transparent',
+ borderColor: '#00ffff',
+ borderWidth: 2
+ }
+ },
+ data: [1, 1, 1, 1, 1]
+ },
+ {
+ name: '绗簩鍦�',
+ type: 'pictorialBar',
+ symbolSize: [62, 22],
+ symbolOffset: [0, 17],
+ z: 10,
+ itemStyle: {
+ normal: {
+ color: 'transparent',
+ borderColor: '#00ffff',
+ borderWidth: 2
+ }
+ },
+ data: [1, 1, 1, 1, 1]
+ }
+ ]
+ }
+
+ return option
+}
+
+export function all02(data) {
+ return {
+ backgroundColor: 'transparent',
+ // tooltip: {},
+ title: {
+ text: '姣忔湀璁㈠崟鏁伴噺/鍑哄簱鏁伴噺',
+ left: '50%',
+ top: '0%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ // legend: {
+ // show: false,
+ // itemGap: 50,
+ // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+ // textStyle: {
+ // color: '#f9f9f9',
+ // borderColor: '#fff'
+ // }
+ // },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: data.map(i => i.Month)
+ }],
+ yAxis: [
+ {
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 16,
+ color: colorX
+ }
+ },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ }
+ ],
+ series: [
+ {
+ name: '娉ㄥ唽鎬婚噺',
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#28ffb3' // 绾挎潯棰滆壊
+ },
+ borderColor: '#f0f'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#28ffb3'
+
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ normal: {
+ // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,154,120,1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ], false),
+ shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ }
+ },
+ data: data.map(i => i.quantity)
+ },
+ {
+ name: '鏈�鏂版敞鍐岄噺',
+ type: 'line',
+ barWidth: 20,
+ tooltip: {
+ show: false
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ normal: {
+ // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0,154,120,1)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(0,0,0, 0)'
+ }
+ ], false),
+ shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ }
+ },
+ // itemStyle: {
+ // normal: {
+ // // barBorderRadius: 5,
+ // // color: new echarts.graphic.LinearGradient(
+ // // 0, 0, 0, 1,
+ // // [{
+ // // offset: 0,
+ // // color: '#14c8d4'
+ // // },
+ // // {
+ // // offset: 1,
+ // // color: '#43eec6'
+ // // }
+ // // ]
+ // // )
+ // color: function(params) {
+ // var colorList = ['#0ec1ff', '#10cdff', '#12daff', '#15ebff', '#17f8ff', '#1cfffb', '#1dfff1']
+ // return colorList[params.dataIndex]
+ // }
+ // }
+ // },
+ data: data.map(i => i.ouquantity)
+ }
+ ]
+ }
+}
+
+export function cjzl03(xData, legendData, yData, show) { // 宸︿晶
+ return {
+ backgroundColor: 'transparent',
+ // tooltip: {},
+ title: {
+ show: show,
+ text: '鍚勮溅闂村綋鏈堜笉鑹秼鍔�',
+ left: '50%',
+ top: '3%',
+ textAlign: 'center',
+ textStyle: {
+ // color: '#fff',
+ color: '#00ffff',
+ fontSize: '20',
+ fontWeight: 'bolder'
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '20%',
+ top: '15%',
+ containLabel: true
+ },
+ legend: {
+ data: legendData,
+ textStyle: { fontSize: 16, color: '#fff' },
+ itemWidth: 25,
+ itemHeight: 10,
+ itemGap: 15,
+ bottom: '5%',
+ selectedMode: false
+ },
+ xAxis: [{
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 16,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: xData
+ }],
+ yAxis: [
+ {
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 18,
+ color: colorX
+ }
+ },
+ // name: '鍗�',
+ // nameTextStyle: {
+ // color: colorY,
+ // fontSize: 14,
+ // lineHeight: 20
+ // },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: true
+ }
+ }
+ ],
+ series: [
+ {
+ name: legendData[0],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#00ffff' // 绾挎潯棰滆壊
+ },
+ borderColor: '#00ffff'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#00ffff'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[0]
+ },
+ {
+ name: legendData[1],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ff3000' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ff3000'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ff3000'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[1]
+ },
+ {
+ name: legendData[2],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ffe000' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ffe000'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ffe000'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[2]
+ },
+ {
+ name: legendData[3],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ffa800' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ffa800'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ffa800'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[3]
+ },
+ {
+ name: legendData[4],
+ type: 'line',
+ // smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
+ // symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: '#ff5b00' // 绾挎潯棰滆壊
+ },
+ borderColor: '#ff5b00'
+ },
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 16,
+ color: '#fff'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#ff5b00'
+ }
+ },
+ tooltip: {
+ show: false
+ },
+ // areaStyle: { // 鍖哄煙濉厖鏍峰紡
+ // normal: {
+ // // 绾挎�ф笎鍙橈紝鍓�4涓弬鏁板垎鍒槸x0,y0,x2,y2(鑼冨洿0~1);鐩稿綋浜庡浘褰㈠寘鍥寸洅涓殑鐧惧垎姣斻�傚鏋滄渶鍚庝竴涓弬鏁版槸鈥榯rue鈥欙紝鍒欒鍥涗釜鍊兼槸缁濆鍍忕礌浣嶇疆銆�
+ // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ // offset: 0,
+ // color: 'rgba(0,154,120,1)'
+ // },
+ // {
+ // offset: 1,
+ // color: 'rgba(0,0,0, 0)'
+ // }
+ // ], false),
+ // shadowColor: 'rgba(53,142,215, 0.9)', // 闃村奖棰滆壊
+ // shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
+ // }
+ // },
+ data: yData[4]
+ }
+ ]
+ }
+}
diff --git a/src/views/kanbanManager/kbCommon.css b/src/views/kanbanManager/kbCommon.css
index f7c4ad6..e49808f 100644
--- a/src/views/kanbanManager/kbCommon.css
+++ b/src/views/kanbanManager/kbCommon.css
@@ -14,6 +14,13 @@
overflow: hidden;
}
+.kb_backgroundCustom {
+ position: absolute;
+ width: 1920px;
+ height: 1080px;
+ background: url('../../assets/images/background001.jpg') no-repeat;
+}
+
.kb_header {
/*background-color: #123;*/
height: 90px;
diff --git a/src/views/kanbanManager/zhkb.vue b/src/views/kanbanManager/zhkb.vue
index ff39bfe..892d7e5 100644
--- a/src/views/kanbanManager/zhkb.vue
+++ b/src/views/kanbanManager/zhkb.vue
@@ -1,278 +1,121 @@
<template>
<div>
- <div class="kb_dashboard">
- <!-- 鏄熺┖鑳屾櫙-->
- <div ref="starsRef" class="stars">
- <div v-for="(item, index) in starsCount" :key="index" class="star" />
- </div>
+ <div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">
+
+ <div class="kb_backgroundCustom" />
<div class="kb_header">
- <div class="flex_c_c kb_header_text">
- <div id="topBarLeft" style="width:600px;height:100%" />
- 杞﹂棿缁煎悎鏁板瓧鍖栫湅鏉�
- <div id="topBarRight" style="width:600px;height:100%;transform:rotate(180deg);" />
+ <div class="kb_headTime" style="top: 35px;left: 20px">
+ <span>娴欐睙宸ㄥ姏宸ヨ锤鏈夐檺鍏徃</span>
</div>
- <div class="kb_headTime" style="left: 85px">
- <span>娴欐睙鏂板嚡杩暟瀛楃鎶�鑲′唤鏈夐檺鍏徃</span>
+ <div class="kb_headTime kb_header_text" style="top: 35px;left: 800px">
+ <span>杞﹂棿缁煎悎鏁板瓧鍖栫湅鏉�</span>
</div>
- <div class="kb_headTime">
+ <div class="kb_headTime" style="top: 35px;right: 25px">
<span>{{ headTime }}</span>
</div>
</div>
- <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px">
- <!-- 宸﹁竟-->
- <div style="width: 1400px ;height: 969px;" class="flex_c_b">
- <div>
+ <div
+ style=" padding:5px 20px 20px 20px;z-index:2;height: 940px;flex-direction: column;justify-content: space-between;"
+ >
+ <!-- 涓婅竟-->
+ <div style="display: flex;justify-content: space-between">
+ <div style="width: 1000px;">
<div class="smallTitle">
<svg-icon icon-class="cxjg" class="svg_class" />
- 浜х嚎鍔犲伐涓换鍔�
+ 鐢熶骇璁㈠崟(褰撴湀)
</div>
- <div class="lineContent horn">
- <div v-for="item in lineContent3" :key="item.workcode" class="kb_left_top_block">
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞鍗�:{{ item.saleordercode }}</div>
- <div class="kb_mt10">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt10">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt10">
- 浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
- </div>
- </div>
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="item.children&&item.children.length>0" class="flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ it.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(it.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="item.children&&item.children.length>0" class="kb_block03_02 flex_s_c">
- <div
- v-for="(it,ind) in item.children"
- :key="ind"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="it.status==='START'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="it.status==='ALLO'&&(parseFloat(it.ngqty)===0||it.ngqty==='')&&(parseFloat(it.goodqty)===0||it.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
+ <div class="lineContent horn" style="height: 450px;display: flex;flex-direction: column;justify-content: space-between">
+ <div style="height: 180px;padding: 10px;display: flex;justify-content: space-between">
+ <div v-for="i in LeftTopData01" :key="i.wkshp_code" class="flex_c_s">
+ <div class="all_block01 flex_c_s">
+ <div class="flex_c_c all_block02">{{ i.wkshp_name }}</div>
+ <div class="" style="display: flex;justify-content:space-between">
+ <div class="all_block02 flex_c_c" style="width: 49% ">浠诲姟鏁�</div>
+ <div class="all_block02 flex_c_c" style="width: 49% ">{{ i.plan_qty }}</div>
+ </div>
+ <div class="" style="display: flex;justify-content:space-between">
+ <div class="all_block02 flex_c_c" style="width: 49% ">瀹屽伐鏁�</div>
+ <div class="all_block02 flex_c_c" style="width: 49% ">{{ i.good_qty }}</div>
+ </div>
+ </div>
</div>
+
+ </div>
+ <div style="height: 260px;">
+ <div id="all01" class="flex_c_c" style="width: 100%;height:100%;" />
</div>
</div>
-
</div>
- <div>
+ <div style="width: 850px;">
<div class="smallTitle">
- <svg-icon icon-class="cxmc" class="svg_class" />
- 浜х嚎鍔犲伐浠诲姟
+ <svg-icon icon-class="cggz" class="svg_class" />
+ 閿�鍞鍗�(鏈�/瀛�)
</div>
- <div class="lineContent horn">
- <el-table
- ref="tableDataLeftBottomRef"
- :data="tableDataLeftBottom"
- class="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="428"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="60"
- />
+ <div class="lineContent horn" style="height: 450px;display: flex;flex-direction: column;justify-content: space-between">
+ <div style="height: 180px;padding: 10px;display: flex;justify-content: space-between">
- <el-table-column
- prop="status"
- width="80"
- label="鐘舵��"
- >
- <template slot-scope="{row}">
- <div v-if="row.status==='ALLO'">宸叉淳鍙�</div>
- <div v-if="row.status==='START'">寮�宸�</div>
- <div v-if="row.status==='NEW'">鏂板伐鍗�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="lm_date"
- label="娲惧彂鏃堕棿"
- width="120"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="170"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="190"
- />
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="350"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="105"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="105"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="105"
- />
- <el-table-column
- label="瀹屾垚鐜�"
- width="105"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
+ <div v-for="i in RightTopData01" :key="i.Quarter" class="flex_c_s">
+ <div class="all_block03 flex_c_s">
+ <div class="flex_c_c all_block04">{{ i.Quarter }}</div>
+ <div class="" style="display: flex;justify-content:space-between">
+ <div class="all_block04 flex_c_c" style="width: 49% ">浠诲姟鏁�</div>
+ <div class="all_block04 flex_c_c" style="width: 49% ">{{ i.quantity }}</div>
+ </div>
+ <div class="" style="display: flex;justify-content:space-between">
+ <div class="all_block04 flex_c_c" style="width: 49% ">鍑哄簱鏁�</div>
+ <div class="all_block04 flex_c_c" style="width: 49% ">{{ i.ouquantity }}</div>
+ </div>
+ </div>
+ </div>
- <!-- label="棰勮寮�濮�"-->
- <!-- width="140"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div>{{ row.planstartdate.substring(0, 10) }}</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop=""-->
- <!-- label="棰勮缁撴潫"-->
- <!-- width="140"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div>{{ row.planenddate.substring(0, 10) }}</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- </el-table>
+ </div>
+ <div style="height: 260px;">
+ <div id="all02" class="flex_c_c" style="width: 100%;height:100%;" />
+ </div>
</div>
-
</div>
</div>
- <!-- 鍙宠竟-->
- <div style="width: 450px;height: 969px;" class="flex_c_b">
- <div>
+ <!-- 涓嬭竟-->
+ <div style="display: flex;justify-content: space-between;margin-top: 15px;">
+ <div style="width: 1000px;">
<div class="smallTitle">
- <svg-icon icon-class="drwg" class="svg_class" />
- 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
+ <svg-icon icon-class="blcs" class="svg_class" />
+ 璐ㄩ噺涓嶈壇
</div>
- <div class="lineContent horn">
- <el-table
- ref="tableDataRightTopRef"
- :data="tableDataRightTop"
- class="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="428"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="60"
- />
- <el-table-column
- prop="linename"
- width="125"
- label="浜х嚎"
- />
- <el-table-column
- prop="partname"
- width="160"
- label="浜у搧"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="90"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat(row.good_qty) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
+ <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
+ <div id="cjzl03" class="flex_c_c" style="width: 100%;height:100%" />
+ </div>
</div>
- <div>
+ <div style="width: 850px;">
<div class="smallTitle">
- <svg-icon icon-class="top5" class="svg_class" />
- 涓�鍛ㄤ笉鑹疶op5
+ <svg-icon icon-class="ckkc" class="svg_class" />
+ 浠撳簱搴撳瓨
</div>
- <div class="lineContent horn">
- <div id="bar01" class="flex_c_c" style="width: 100%;height:100%" />
- </div>
+ <div class="lineContent horn" style="height: 380px;display: flex;justify-content: space-between">
+ <div style="display: flex;justify-content: center;position: relative">
+ <div class="kb_center_block_children all_block05">
+ <div style="font-size: 24px;">{{ parseFloat(RightBottom.Y) }}</div>
+ <div class="box02" />
+ <div>鍘熸潗鏂�</div>
+ </div>
+ <div class="kb_center_block_children all_block06">
+ <div style="font-size: 24px;">{{ parseFloat(RightBottom.B) }}</div>
+ <div class="box02" />
+ <div>鍗婃垚鍝�</div>
+ </div>
+ <div class="kb_center_block_children all_block07">
+ <div style="font-size: 24px;">{{ parseFloat(RightBottom.C) }}</div>
+ <div class="box02" />
+ <div>浜ф垚鍝�</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -282,228 +125,210 @@
<script>
import './kbCommon.css'
-import { bar02, kbTop, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData,
- ShopSearch
-} from '@/api/kanbanManager'
-import { parseTime } from '@/utils'
+import { loadEcharts, all01, all02, cjzl03 } from '@/utils/myEcharts'
+// import {
+// QCBadCenterLeftWeek,
+// ShopSearch, WorkShopCompreLeftTop, WorkShopCompreRightBottom, WorkShopCompreRightTop
+//
+// } from '@/api/kanbanManager'
export default {
name: 'Cjsc',
data() {
return {
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
headTime: '',
tableDataRightTop: [],
- tableDataRightTopTemp: [],
- tableDataLeftBottom: [],
- tableDataLeftBottomTemp: [],
- lineContent3: [],
- ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
+ wkshopArr: [],
+ legendData: [],
- starsCount: 800, // 鏄熸槦鏁伴噺
- distance: 900 // 闂磋窛
+ LeftTopData01: [],
+ LeftTopData02: [],
+
+ RightTopData01: [],
+ RightTopData02: [],
+ cjzl03_xData: [],
+ cjzl03_yData: [],
+ RightBottom: {}
}
},
created() {
setInterval(this.getNowTime, 1000)
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ // // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
setInterval(() => {
window.location.reload()
- }, 1000 * 60 * 60 * 10)
+ }, 1000 * 60 * 120)
},
mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
-
- this.getTopBar()
-
- this.getShopSearch()
- this.setStarsRef()
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
+ // this.getAllApi()
},
methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- // console.log('x')
- } else {
- const loading = this.$loading({
- lock: true,
- text: '鏂綉浜嗭紝姝ｅ湪鎷煎懡鑱旂綉涓紝璇锋鏌ョ綉缁滄槸鍚︽甯�...',
- spinner: 'el-icon-loading',
- customClass: 'osloading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- const { type } = e
- this.onLine = type === 'online'
- if (this.onLine) {
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
+ async getAllApi() {
+ const { data: res } = await ShopSearch()
+ this.wkshopArr = res
+ const temp = this.wkshopArr.map(i => i.org_code)
+ // const temp = this.wkshopArr.map(i => i.org_code)
+
+ temp.forEach(i => {
+ const aa = this.wkshopArr.find(j => j.org_code === i).org_name
+ this.legendData.push(aa)
+ })
+ const res2 = await WorkShopCompreLeftTop({ wkshopcode: temp.join(',') })
+ for (const res2Key in res2.data.LeftTop) {
+ const data = {
+ good_qty: 0,
+ plan_qty: 0,
+ wkshp_code: '',
+ wkshp_name: ''
+ }
+ if (temp.includes(res2Key)) {
+ data.good_qty = res2.data.LeftTop[res2Key][0].good_qty
+ data.plan_qty = res2.data.LeftTop[res2Key][0].plan_qty
+ data.wkshp_code = res2.data.LeftTop[res2Key][0].wkshp_code
+ data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name
+ this.LeftTopData01.push(data)
}
}
- },
- setStarsRef() {
- const starNodes = Array.from(this.$refs.starsRef.children)
- starNodes.forEach(item => {
- const speed = 0.2 + Math.random() * 1
- const thisDistance = this.distance + Math.random() * 300
- item.style.transformOrigin = `0 0 ${thisDistance}px`
- item.style.transform = `
- translate3d(0,0,-${thisDistance}px)
- rotateY(${Math.random() * 360}deg)
- rotateX(${Math.random() * -50}deg)
- scale(${speed},${speed})`
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
-
- if (this.ShopArr.length > 0) {
- this.getShopSearchLine()
- this.getRightRightData()
- this.getLeftBottomData()
- this.getEcharts()
+ for (const res2Key in res2.data.LeftBottom) {
+ const data = {
+ quantity: 0,
+ wkshp_code: '',
+ wkshp_name: ''
+ }
+ if (temp.includes(res2Key)) {
+ data.quantity = res2.data.LeftBottom[res2Key][0].quantity
+ data.plan_qty = res2.data.LeftBottom[res2Key][0].plan_qty
+ data.wkshp_code = res2.data.LeftBottom[res2Key][0].wkshp_code
+ data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name
+ this.LeftTopData02.push(data)
}
}
- if (this.ShopArr.length > 0) {
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 60)
- }
- },
- // 浜х嚎鍔犲伐涓换鍔�
- getShopSearchLine() {
- let length, count
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
- this.number1 = this.lineContent.length
- })
-
- let start = 0
- const timer = setInterval(() => {
- if (Math.floor(start / 3) === count && count !== 0) {
- start = 0
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.lineContent = res.data
- length = this.lineContent.length
- count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
- this.lineContent3 = this.lineContent.slice(0, 3)
-
- this.number1 = this.lineContent.length
- })
- } else if (count === 0) {
- clearInterval(timer)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 10)
- },
-
- // 鑾峰彇鍙充笂鏁版嵁 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getRightRightData() {
- let startValue = 0 // 鍒濆鍊�
- const scale = 10// 鍒诲害
-
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRightTopTemp = res.data
-
- this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
-
- const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
- let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
-
- const timer = setInterval(() => {
- startValue = startValue + scale
- this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
- if (nowLoop === loop) {
- clearInterval(timer)
- this.getRightRightData()
- }
-
- nowLoop++
- }, 1000 * 10)
- })
- },
- // 浜х嚎鍔犲伐浠诲姟 宸︿笅鏁版嵁
- getLeftBottomData() {
- let startValue = 0 // 鍒濆鍊�
- const scale = 10// 鍒诲害
-
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataLeftBottomTemp = res.data
- this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
-
- const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
- let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
-
- const timer = setInterval(() => {
- startValue = startValue + scale
- this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
- nowLoop++ // 鏀惧湪杩欓噷鍙互浜嗭紝灏辩瓑寰呴浂鐐瑰嚑绉�
- if (nowLoop === loop) {
- clearInterval(timer)
- this.getLeftBottomData()
- }
-
- // nowLoop++ //涔嬪墠鏀惧湪杩欓噷閫昏緫涓嶅锛岀浉宸簡涓�娆＄殑寰幆锛岀浉褰撲簬澶氱瓑寰呬簡10绉�
- }, 1000 * 10)
- })
- },
-
- getEcharts() {
- let dataArr = [30, 20, 20, 18, 10]
- let titlenameArr = ['棰滆壊', '灏哄', '姘斿懗', '姣涘埡', '瑁傜棔']
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- dataArr = res.data.map(i => i.cont)
- titlenameArr = res.data.map(i => i.name)
- loadEcharts('bar01', bar02(dataArr, titlenameArr))
- })
+ loadEcharts('all01', all01(this.legendData, this.LeftTopData02))
setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- dataArr = res.data.map(i => i.cont)
- titlenameArr = res.data.map(i => i.name)
- loadEcharts('bar01', bar02(dataArr, titlenameArr))
+ WorkShopCompreLeftTop({ wkshopcode: temp.join(',') }).then(res2 => {
+ this.LeftTopData01 = []
+ this.LeftTopData02 = []
+ for (const res2Key in res2.data.LeftTop) {
+ const data = {
+ good_qty: 0,
+ plan_qty: 0,
+ wkshp_code: '',
+ wkshp_name: ''
+ }
+ if (temp.includes(res2Key)) {
+ data.good_qty = res2.data.LeftTop[res2Key][0].good_qty
+ data.plan_qty = res2.data.LeftTop[res2Key][0].plan_qty
+ data.wkshp_code = res2.data.LeftTop[res2Key][0].wkshp_code
+ data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name
+ this.LeftTopData01.push(data)
+ }
+ }
+ for (const res2Key in res2.data.LeftBottom) {
+ const data = {
+ quantity: 0,
+ wkshp_code: '',
+ wkshp_name: ''
+ }
+ if (temp.includes(res2Key)) {
+ data.quantity = res2.data.LeftBottom[res2Key][0].quantity
+ data.plan_qty = res2.data.LeftBottom[res2Key][0].plan_qty
+ data.wkshp_code = res2.data.LeftBottom[res2Key][0].wkshp_code
+ data.wkshp_name = this.wkshopArr.find(i => i.org_code === data.wkshp_code).org_name
+ this.LeftTopData02.push(data)
+ }
+ }
+ loadEcharts('all01', all01(this.legendData, this.LeftTopData02))
})
- }, 1000 * 10)
+ }, 1000 * 30)
+
+ const res3 = await WorkShopCompreRightTop()
+ res3.data.RightTop.forEach(i => {
+ this.RightTopData01.push({
+ Quarter: i.Quarter,
+ quantity: i.quantity,
+ ouquantity: i.ouquantity
+ })
+ })
+ res3.data.RightBottom.forEach(i => {
+ this.RightTopData02.push({
+ Month: i.Month + '鏈�',
+ quantity: i.quantity,
+ ouquantity: i.ouquantity
+ })
+ })
+ loadEcharts('all02', all02(this.RightTopData02))
+ setInterval(() => {
+ WorkShopCompreRightTop().then(res3 => {
+ this.RightTopData01 = []
+ this.RightTopData02 = []
+ res3.data.RightTop.forEach(i => {
+ this.RightTopData01.push({
+ Quarter: i.Quarter,
+ quantity: i.quantity,
+ ouquantity: i.ouquantity
+ })
+ })
+ res3.data.RightBottom.forEach(i => {
+ this.RightTopData02.push({
+ Month: i.Month + '鏈�',
+ quantity: i.quantity,
+ ouquantity: i.ouquantity
+ })
+ })
+ loadEcharts('all02', all02(this.RightTopData02))
+ })
+ }, 1000 * 40)
+
+ const res4 = await QCBadCenterLeftWeek({ wkshopcode: temp.join(',') })
+ this.cjzl03_xData = res4.data[temp[0]].map(i => i.click_date)
+ for (const res4Key in res4.data) {
+ if (temp.includes(res4Key)) {
+ const bb = res4.data[res4Key].map(i => i.count)
+ this.cjzl03_yData.push(bb)
+ }
+ }
+ loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
+ setInterval(() => {
+ QCBadCenterLeftWeek({ wkshopcode: temp.join(',') }).then(res4 => {
+ this.cjzl03_yData = []
+
+ this.cjzl03_xData = res4.data[temp[0]].map(i => i.click_date)
+ for (const res4Key in res4.data) {
+ if (temp.includes(res4Key)) {
+ const bb = res4.data[res4Key].map(i => i.count)
+ this.cjzl03_yData.push(bb)
+ }
+ }
+ loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData, true))
+ })
+ }, 1000 * 50)
+
+ const res5 = await WorkShopCompreRightBottom()
+ this.RightBottom = res5.data
+
+ setInterval(() => {
+ WorkShopCompreRightBottom().then(res5 => {
+ this.RightBottom = res5.data
+ })
+ }, 1000 * 60)
},
- // 鑾峰彇topEcharts
- getTopBar() {
- loadEcharts('topBarLeft', kbTop())
- loadEcharts('topBarRight', kbTop())
+
+ // 鑾峰彇Echarts
+ getEcharts() {
+ // loadEcharts('cjzl01', cjzl01(this.cjzl01Data))
+
+ // loadEcharts('cjzl02_1', cjzl02(this.cjzl02_1Title, this.cjzl02_1Data))
+ // loadEcharts('cjzl02_2', cjzl02(this.cjzl02_2Title, this.cjzl02_2Data))
+ // loadEcharts('cjzl02_3', cjzl02(this.cjzl02_3Title, this.cjzl02_3Data))
+ // loadEcharts('cjzl02_4', cjzl02(this.cjzl02_4Title, this.cjzl02_4Data))
+ // loadEcharts('cjzl02_5', cjzl02(this.cjzl02_5Title, this.cjzl02_5Data))
+
+ // loadEcharts('cjzl04', cjzl04(this.legendData, this.cjzl04Data[0], this.cjzl04Data[1], this.cjzl04Data[2]))// 鍙充晶
+ // loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData))// 宸︿晶
},
+
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
const dt = new Date()
@@ -522,24 +347,25 @@
},
headerCellStyle() {
return {
- backgroundColor: '#000',
+ backgroundColor: 'transparent ',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
border: 'none',
- fontSize: '18px'
+ fontSize: '20px'
}
},
cellStyle() {
return {
padding: '7px 0',
textAlign: 'center',
- backgroundColor: '#000',
- color: '#fff',
+ backgroundColor: 'transparent ',
+ color: '#c7e7ff',
border: 'none',
- fontSize: '18px'
+ fontSize: '20px'
}
}
+
}
}
@@ -548,9 +374,8 @@
<style lang="scss" scoped>
$main_color: #09d8f2;
$color01: #00FFFF;
-
.tableData {
- background: #000;
+ background: transparent;
}
.el-table::before {
@@ -561,139 +386,100 @@
color: $main_color;
}
-.kb_left_top_block {
+.tableDataCell {
+ ::v-deep .cell {
+ padding: 0 2px;
+ }
+}
+
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+ /* width: 0;瀹藉害涓�0鏆楄棌 */
+ width: 0;
+ background: transparent;
+}
+
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+ background-color: transparent;
+}
+
+.all_block01{
+ width:187px;
+ height: 180px;
+}
+.all_block02{
width: 100%;
- height: 143px;
+ height: 49px;
+ background: rgba(9, 216, 242, 0.1);
+}
+
+.all_block03{
+ width:199px;
+ height: 180px;
+}
+.all_block04{
+ width: 100%;
+ height: 49px;
+ background: rgba(9, 216, 242, 0.1);
+}
+
+.kb_center_block_children {
+ height: 180px;
+ //border: 1px solid $kbBorderColor;
+ width: 240px;
display: flex;
- font-size: 16px;
- border-bottom: 1px solid $main_color;
- justify-content: flex-start;
+ z-index: 2;
+ justify-content: space-around;
+ align-items: center;
+ flex-direction: column;
+ margin: 10px;
+ font-size: 22px;
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $main_color;
- }
+ .box02 {
+ background: url("../../assets/images/box02.png") no-repeat;
+ transform: scale(1.5);
+ width: 145px;
+ height: 84px;
- .kb_block03 {
- width: 1020px;
- font-size: 16px;
- display: flex;
- flex-direction: column;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $main_color;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $main_color;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $main_color;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $main_color;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 15px;
- display: flex;
-
- .kb_block03_02_content {
- width: 180px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
- }
- }
}
}
-.kb_left_top_block:nth-child(3n) {
- border-bottom: none !important;
+.all_block05 {
+ position: absolute;
+ animation: upDown 3s ease-in-out infinite;
+ left: 60px;
}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
+.all_block06{
+ position: absolute;
+ animation: upDown2 3s ease-in-out infinite;
+ left: 290px;
}
-
-</style>
-
-<!--鏄熺┖-->
-<style lang="css" scoped>
-@keyframes rotate {
+.all_block07{
+ position: absolute;
+ animation: upDown 3s ease-in-out infinite;
+ left: 520px;
+}
+@keyframes upDown {
0% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+ top: 50px;
+ }
+ 50% {
+ top: 100px;
}
100% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+ top: 50px;
}
}
-
-.stars {
- transform: perspective(500px);
- transform-style: preserve-3d;
- position: absolute;
- perspective-origin: 50% 100%;
- left: 45%;
- animation: rotate 90s infinite linear;
- bottom: 0;
- z-index: 102;
-}
-
-.star {
- width: 2px;
- height: 2px;
- /*background: #f7f7b6;*/
- background: #8edffc;
- position: absolute;
- left: 0;
- top: 0;
- backface-visibility: hidden;
- z-index: 102;
+@keyframes upDown2 {
+ 0% {
+ top: 100px;
+ }
+ 50% {
+ top: 50px;
+ }
+ 100% {
+ top: 100px;
+ }
}
</style>
--
Gitblit v1.9.3