From 2bf7aff3435c9abcb38b9ced5b6fa56957aeae89 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 13 九月 2023 15:59:56 +0800
Subject: [PATCH] 1 车间质量、仓库管理、及五个车间看板 递交
---
src/views/kanbanManager/ckgl.vue | 174 +---
src/permission.js | 2
src/views/kanbanManager/all.vue | 12
src/views/kanbanManager/cjzl.vue | 389 +++++++----
src/api/kanbanManager.js | 15
src/views/kanbanManager/kbCommon.css | 18
src/views/kanbanManager/zhkb.vue | 420 ++++++++----
src/assets/images/background001.jpg | 0
src/router/index.js | 4
src/utils/myEcharts.js | 868 ++------------------------
10 files changed, 699 insertions(+), 1,203 deletions(-)
diff --git a/src/api/kanbanManager.js b/src/api/kanbanManager.js
index e7aa43b..cee6a12 100644
--- a/src/api/kanbanManager.js
+++ b/src/api/kanbanManager.js
@@ -7,6 +7,7 @@
method: 'get'
})
}
+
// 澶у矝杞﹂棿缁煎悎鐪嬫澘,宸︿笂浜х嚎鍔犲伐浠诲姟鎺ュ彛
export function LineSearchTopLeftData(data) {
return request({
@@ -100,6 +101,7 @@
method: 'get'
})
}
+
// 澶у矝浠撳簱鐪嬫澘,鍙充笂鎴愬搧搴撱�佸崐鎴愬搧搴搕op5搴撳瓨鎺掕
export function WareHouseRightTopData() {
return request({
@@ -107,6 +109,7 @@
method: 'get'
})
}
+
// 澶у矝浠撳簱鐪嬫澘,鍙充笅鍘熸枡搴撳簱top5搴撳瓨鎺掕
export function WareHouseRightBottomData() {
return request({
@@ -114,6 +117,7 @@
method: 'get'
})
}
+
// 杞﹂棿鐪嬫澘鍏憡
export function WkspReportNotice(data) {
return request({
@@ -138,6 +142,7 @@
params: data
})
}
+
export function QCBadCenterRightWeek(data) {
return request({
url: 'KanBanManagerent/QCBadCenterRightWeek',
@@ -145,6 +150,15 @@
params: data
})
}
+
+export function QCBadBottomWeek(data) {
+ return request({
+ url: 'KanBanManagerent/QCBadBottomWeek',
+ method: 'get',
+ params: data
+ })
+}
+
export function BadWeekDistriBute(data) {
return request({
url: 'KanBanManagerent/BadWeekDistriBute',
@@ -152,6 +166,7 @@
params: data
})
}
+
export function BadContManger(data) {
return request({
url: 'KanBanManagerent/BadContManger',
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/permission.js b/src/permission.js
index 35d150e..3360d07 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@
NProgress.configure({ showSpinner: false }) // NProgress Configuration
-const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/cjzl', '/back'] // no redirect whitelist
+const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd', '/cjzl', '/all', '/back'] // no redirect whitelist
router.beforeEach(async(to, from, next) => {
// start progress bar
diff --git a/src/router/index.js b/src/router/index.js
index c055ed8..735e607 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,6 +51,10 @@
path: '/cjzl',
component: () => import('@/views/kanbanManager/cjzl'),
hidden: true
+ }, {
+ path: '/all',
+ component: () => import('@/views/kanbanManager/all'),
+ hidden: true
},
{
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index 19e7769..a74f8ef 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -1745,7 +1745,7 @@
textBorderColor: '#000',
textBorderWidth: 1,
textShadowBlur: 1,
- textShadowColor: colorY,
+ textShadowColor: colorX,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
paddingTop: 10,
@@ -1797,7 +1797,7 @@
splitLine: { // 鍒嗛殧绾�
length: 10, // 灞炴�ength鎺у埗绾块暱
lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
- color: colorY
+ color: colorX
}
},
axisLabel: {
@@ -1829,7 +1829,7 @@
textBorderColor: '#000',
textBorderWidth: 1,
textShadowBlur: 1,
- textShadowColor: colorY,
+ textShadowColor: colorX,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
paddingTop: 10,
@@ -1856,52 +1856,16 @@
// 杞﹂棿璐ㄩ噺
export function cjzl01(scaleData) {
- console.log(scaleData, 3)
- // var scaleData = [
- // {
- // 'name': '姣涘埡',
- // 'value': 30
- // },
- // {
- // 'name': '鑹插樊',
- // 'value': 20
- // },
- // {
- // 'name': '鎶涘厜',
- // 'value': 10
- // },
- // {
- // 'name': '鎵撶（',
- // 'value': 5
- // },
- // {
- // 'name': '鎶樺集銆佸帇閾搞�佹墦瀛�',
- // 'value': 10
- // }
- // ]
var rich = {
white: {
color: colorX,
align: 'center',
- padding: [3, 0]
- // fontSize: 16
- }
- }
- var placeHolderStyle = {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- color: 'rgba(0, 0, 0, 0)',
- borderColor: 'rgba(0, 0, 0, 0)',
- borderWidth: 0
+ padding: [3, 0],
+ fontSize: 20
}
}
var data = []
- var color = ['#00ffff', '#ff3000', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+ var color = ['#00ffff', '#ff5b00', '#006ced', '#ffe000', '#ffa800', '#ff3000']
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
@@ -1915,11 +1879,6 @@
}
}
}
- // {
- // value: 2,
- // name: '',
- // itemStyle: placeHolderStyle
- // }
)
}
var seriesObj = [{
@@ -1935,6 +1894,7 @@
show: true,
position: 'outside',
color: colorX,
+ fontSize: 20,
formatter: function(params) {
if (params.name !== '') {
return params.name + '\n{white|' + params.value + '}'
@@ -1995,25 +1955,13 @@
white: {
color: '#ddd',
align: 'center',
- padding: [5, 0]
+ padding: [5, 0],
+ fontSize: 20
}
}
- var placeHolderStyle = {
- normal: {
- label: {
- show: false
- },
- labelLine: {
- show: false
- },
- color: 'rgba(0, 0, 0, 0)',
- borderColor: 'rgba(0, 0, 0, 0)',
- borderWidth: 0
- }
- }
var data = []
- var color = ['#00ffff', '#ff3000', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
+ var color = ['#00ffff', '#ff3000', '#ffe000', '#ffa800', '#ff5b00']
for (var i = 0; i < scaleData.length; i++) {
data.push({
value: scaleData[i].value,
@@ -2027,11 +1975,6 @@
}
}
}
- // {
- // value: 4,
- // name: '',
- // itemStyle: placeHolderStyle
- // }
)
}
var seriesObj = [{
@@ -2044,9 +1987,9 @@
itemStyle: {
normal: {
label: {
+ fontSize: 20,
show: true,
position: 'outside',
- // color: '#ddd',
color: colorX,
formatter: function(params) {
// var percent = 0
@@ -2065,7 +2008,7 @@
},
labelLine: {
length: 10,
- length2: 10,
+ length2: 20,
show: true,
color: '#00ffff'
}
@@ -2085,6 +2028,7 @@
top: '45%',
textAlign: 'center',
textStyle: {
+ // color: colorX,
color: '#00ffff',
fontSize: '20',
fontWeight: 'bolder'
@@ -2110,332 +2054,10 @@
return option
}
-// export function cjzl03() {
-// // mock鏁版嵁
-// const dataArr = {
-// xdata: ['9鏈�4鍙�', '9鏈�5鍙�', '9鏈�6鍙�', '9鏈�7鍙�', '9鏈�8鍙�', '9鏈�9鍙�', '9鏈�10鍙�'],
-// vaccination: [1000, 1300, 1200, 800, 600, 700, 900],
-// unvaccinated: [700, 800, 900, 500, 300, 400, 500],
-// unvaccinatedTwo: [400, 300, 500, 200, 100, 100, 300],
-// rateDataOne: [98, 96, 97, 92, 94, 95, 100],
-// rateDataTwo: [3, 4, 5, 1, 3, 2, 3]
-// }
-//
-// // tooltip
-// const tooltip = {
-// trigger: 'axis',
-// textStyle: { fontSize: '100%' },
-// formatter: params => {
-// const rander = params.map(item => item.seriesType !== 'pictorialBar' ? `<div>${item.seriesName}: ${item.seriesType !== 'line' ? item.value : item.value + '%'}</div>` : '').join('')
-// return `
-// <div>${params[0].axisValue}</div>
-// ${rander}
-// `
-// }
-// }
-// const legend = {
-// data: ['浠诲姟鏁�', '鍚堟牸鏁�', '涓嶈壇鏁�', '鍚堟牸鐜�', '涓嶈壇鐜�'],
-// textStyle: { fontSize: 14, color: '#fff' },
-// itemWidth: 25,
-// itemHeight: 15,
-// itemGap: 15,
-// bottom: '5%',
-// selectedMode: false
-// }
-// const grid = {
-// left: '2%',
-// right: '2%',
-// bottom: '20%',
-// top: '10%',
-// containLabel: true
-// }
-// // xAxis
-// const xAxis = {
-// // axisTick: { show: true },
-// // axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' }},
-// // axisLabel: { textStyle: { fontSize: 12, color: '#fff' }},
-//
-// type: 'category',
-// boundaryGap: true,
-// axisLabel: {
-// interval: 0,
-// formatter: '{value}',
-// fontSize: 14,
-// // margin: 20,
-// textStyle: {
-// color: colorX
-// }
-// },
-// axisLine: {
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// splitLine: {
-// show: false,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// },
-//
-// data: dataArr.xdata
-// }
-//
-// // yAxis
-// const yAxis = [{
-// // max: 800,
-// boundaryGap: false,
-// splitNumber: 4,
-// type: 'value',
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// }
-// },
-// // name: '鍗�',
-// // nameTextStyle: {
-// // color: colorY,
-// // fontSize: 14,
-// // lineHeight: 20
-// // },
-// splitLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: true
-// }
-// // axisTick: { show: false },
-// // axisLine: { show: false },
-// // splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' }},
-// // axisLabel: { textStyle: { fontSize: 16, color: '#fff' }}
-// }, {
-// show: true,
-// max: 100,
-// splitLine: { show: false },
-// axisLine: { show: false },
-// axisTick: { show: false },
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// },
-// formatter: params => {
-// return `${params}%`
-// }
-// }
-// }]
-//
-// // series
-// const series = [{
-// z: 1,
-// name: '涓婇儴1',
-// type: 'pictorialBar',
-// symbolPosition: 'end',
-// data: dataArr.vaccination,
-// symbol: 'diamond',
-// symbolOffset: ['-50%', '-50%'],
-// symbolSize: [29, 19],
-// itemStyle: {
-// borderColor: '#2fffa4',
-// color: '#2fffa4'
-// }
-// },
-// {
-// z: 1,
-// type: 'bar',
-// name: '浠诲姟鏁�',
-// barWidth: 30,
-// barGap: '-50%',
-// data: dataArr.vaccination,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0, x2: 1, y: 0, y2: 0,
-// colorStops: [
-// { offset: 0, color: 'rgba(29, 245, 160, .7)' },
-// { offset: 0.5, color: 'rgba(29, 245, 160, .7)' },
-// { offset: 0.5, color: 'rgba(29, 245, 160, .3)' },
-// { offset: 1, color: 'rgba(29, 245, 160, .3)' }
-// ]
-// }
-// }
-// }, {
-// z: 2,
-// name: '涓婇儴1',
-// type: 'pictorialBar',
-// symbolPosition: 'end',
-// data: dataArr.unvaccinated,
-// symbol: 'diamond',
-// symbolOffset: [0, '-50%'],
-// symbolSize: [29, 19],
-// itemStyle: {
-// borderColor: '#32ffee',
-// color: '#32ffee'
-// }
-// },
-// {
-// z: 2,
-// type: 'bar',
-// name: '鍚堟牸鏁�',
-// barWidth: 30,
-// data: dataArr.unvaccinated,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0, x2: 1, y: 0, y2: 0,
-// colorStops: [
-// { offset: 0, color: 'rgba(50, 255, 238, .7)' },
-// { offset: 0.5, color: 'rgba(50, 255, 238, .7)' },
-// { offset: 0.5, color: 'rgba(50, 255, 238, .3)' },
-// { offset: 1, color: 'rgba(50, 255, 238, .3)' }
-// ]
-// }
-// }
-// }, {
-// z: 3,
-// name: '涓婇儴1',
-// type: 'pictorialBar',
-// symbolPosition: 'end',
-// data: dataArr.unvaccinatedTwo,
-// symbol: 'diamond',
-// symbolOffset: ['50%', '-50%'],
-// symbolSize: [29, 19],
-// itemStyle: {
-// borderColor: '#ffd11a',
-// color: '#ffd11a'
-// }
-// }, {
-// z: 3,
-// type: 'bar',
-// name: '涓嶈壇鏁�',
-// barWidth: 30,
-// data: dataArr.unvaccinatedTwo,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0, x2: 1, y: 0, y2: 0,
-// colorStops: [
-// { offset: 0, color: 'rgba(255, 209, 26, .7)' },
-// { offset: 0.5, color: 'rgba(255, 209, 26, .7)' },
-// { offset: 0.5, color: 'rgba(255, 209, 26, .3)' },
-// { offset: 1, color: 'rgba(255, 209, 26, .3)' }
-// ]
-// }
-// }
-// }, {
-// z: 9,
-// yAxisIndex: 1,
-// name: '鍚堟牸鐜�', type: 'line',
-// // symbol: 'emptyCircle',
-// symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
-// symbolSize: [10, 10],
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5' }],
-// global: false // 缂虹渷涓� false
-// },
-// lineStyle: {
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: '#32ffee' }, { offset: 1, color: '#8afff5' }],
-// global: false // 缂虹渷涓� false
-// }
-// },
-// // 淇敼鐨勬槸绾夸笅鍖哄煙鐨勯鑹�
-// areaStyle: {
-// color: new echarts.graphic.LinearGradient(
-// // 鍙�/涓�/宸�/涓�
-// 0, 0, 0, 1, [
-// { offset: 0, color: 'rgba(50, 255, 238, .1)' },
-// { offset: 1, color: 'transparent' }
-// ])
-// },
-// label: {
-// show: true,
-// position: 'insideBottomLeft',
-// formatter: params => {
-// return `${params.value}%`
-// },
-// textStyle: { fontSize: 14, color: '#32ffee' }
-// },
-// data: dataArr.rateDataOne
-// }, {
-// z: 9,
-// yAxisIndex: 1,
-// name: '涓嶈壇鐜�', type: 'line',
-// symbol: `path://M9.312,4.594 C12.074,4.594 14.313,6.832 14.313,9.594 C14.313,12.355 12.074,14.594 9.312,14.594 C6.551,14.594 4.312,12.355 4.312,9.594 C4.312,6.832 6.551,4.594 9.312,4.594 Z`,
-// // symbol: 'emptyCircle',
-// symbolSize: [10, 10],
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: colorX }, { offset: 1, color: '#fff5cc' }],
-// global: false // 缂虹渷涓� false
-// },
-// lineStyle: {
-// color: {
-// type: 'linear', x: 1, y: 0, x2: 0, y2: 0,
-// // 0% 澶勭殑棰滆壊 // 100% 澶勭殑棰滆壊
-// colorStops: [{ offset: 0, color: colorX }, { offset: 1, color: '#fff5cc' }],
-// global: false // 缂虹渷涓� false
-// }
-// },
-// // 淇敼鐨勬槸绾夸笅鍖哄煙鐨勯鑹�
-// areaStyle: {
-// color: new echarts.graphic.LinearGradient(
-// // 鍙�/涓�/宸�/涓�
-// 0, 0, 0, 1, [
-// { offset: 0, color: 'rgba(255, 209, 26, .2)' },
-// { offset: 1, color: 'transparent' }
-// ])
-// },
-// label: {
-// show: true,
-// position: 'insideBottomRight',
-// formatter: params => {
-// return `${params.value}%`
-// },
-// // textStyle: { fontSize: 14, color: '#ffd11a' }
-// textStyle: { fontSize: 14, color: colorX }
-// },
-// data: dataArr.rateDataTwo
-// }]
-// // const option = { tooltip, xAxis, yAxis, series, grid, legend, backgroundColor: 'rgba(0, 0, 0, .7)' }
-// const option = { xAxis, yAxis, series, grid, legend, backgroundColor: 'transparent' }
-// return option
-// }
-
-export function cjzl04() {
+export function cjzl03(xData, legendData, yData) { // 宸︿晶
return {
backgroundColor: 'transparent',
tooltip: {},
- // title: {
- // text: '璁㈠崟瀹屾垚鎬绘暟',
- // left: '50%',
- // top: '5%',
- // textAlign: 'center',
- // textStyle: {
- // // color: '#fff',
- // color: '#00ffff',
- // fontSize: '20',
- // fontWeight: 'bolder'
- // }
- // },
grid: {
left: '2%',
right: '2%',
@@ -2444,15 +2066,8 @@
containLabel: true
},
legend: {
- // show: true,
- // itemGap: 20,
- // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
- // textStyle: {
- // color: '#f9f9f9',
- // borderColor: '#fff'
- // }
- data: ['绮惧伐杞﹂棿', '瑁呴厤杞﹂棿', '鏈哄姞宸ヨ溅闂�', '鎶涘厜杞﹂棿', '鎵撶（杞﹂棿'],
- textStyle: { fontSize: 14, color: '#fff' },
+ data: legendData,
+ textStyle: { fontSize: 16, color: '#fff' },
itemWidth: 25,
itemHeight: 10,
itemGap: 15,
@@ -2465,7 +2080,7 @@
axisLabel: {
interval: 0,
formatter: '{value}',
- fontSize: 14,
+ fontSize: 16,
margin: 20,
textStyle: {
color: colorX
@@ -2485,7 +2100,7 @@
axisTick: {
show: false
},
- data: ['9鏈�4鍙�', '9鏈�5鍙�', '9鏈�6鍙�', '9鏈�7鍙�', '9鏈�8鍙�', '9鏈�9鍙�', '9鏈�10鍙�']
+ data: xData
}],
yAxis: [
{
@@ -2495,8 +2110,8 @@
type: 'value',
axisLabel: {
textStyle: {
- fontSize: 14,
- color: colorY
+ fontSize: 16,
+ color: colorX
}
},
// name: '鍗�',
@@ -2524,7 +2139,7 @@
],
series: [
{
- name: '绮惧伐杞﹂棿',
+ name: legendData[0],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2533,9 +2148,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: `rgb(71, 226, 194)` // 绾挎潯棰滆壊
+ color: '#00ffff' // 绾挎潯棰滆壊
},
- borderColor: `rgb(71, 226, 194)`
+ borderColor: '#00ffff'
},
// label: {
// show: true,
@@ -2546,7 +2161,7 @@
// },
itemStyle: {
normal: {
- color: `rgb(71, 226, 194)`
+ color: '#00ffff'
}
},
tooltip: {
@@ -2568,11 +2183,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [393, 438, 485, 631, 689, 824, 987]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[0]
},
{
- name: '瑁呴厤杞﹂棿',
+ name: legendData[1],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2581,9 +2195,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: '#32ffee' // 绾挎潯棰滆壊
+ color: '#ff3000' // 绾挎潯棰滆壊
},
- borderColor: '#32ffee'
+ borderColor: '#ff3000'
},
// label: {
// show: true,
@@ -2594,7 +2208,7 @@
// },
itemStyle: {
normal: {
- color: '#32ffee'
+ color: '#ff3000'
}
},
tooltip: {
@@ -2616,11 +2230,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- // data: [393, 438, 485, 631, 689, 824, 987]
- data: [10, 102, 30, 203, 40, 20, 405]
+ data: yData[1]
},
{
- name: '鏈哄姞宸ヨ溅闂�',
+ name: legendData[2],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2629,9 +2242,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: '#ffd11a' // 绾挎潯棰滆壊
+ color: '#ffe000' // 绾挎潯棰滆壊
},
- borderColor: '#ffd11a'
+ borderColor: '#ffe000'
},
// label: {
// show: true,
@@ -2642,7 +2255,7 @@
// },
itemStyle: {
normal: {
- color: '#ffd11a'
+ color: '#ffe000'
}
},
tooltip: {
@@ -2664,11 +2277,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [93, 48, 45, 61, 89, 84, 97]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[2]
},
{
- name: '鎶涘厜杞﹂棿',
+ name: legendData[3],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2677,9 +2289,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: `rgb(254, 94, 94)` // 绾挎潯棰滆壊
+ color: '#ffa800' // 绾挎潯棰滆壊
},
- borderColor: `rgb(254, 94, 94)`
+ borderColor: '#ffa800'
},
// label: {
// show: true,
@@ -2690,7 +2302,7 @@
// },
itemStyle: {
normal: {
- color: `rgb(254, 94, 94)`
+ color: '#ffa800'
}
},
tooltip: {
@@ -2712,11 +2324,10 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [33, 438, 48, 63, 69, 82, 487]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[3]
},
{
- name: '鎵撶（杞﹂棿',
+ name: legendData[4],
type: 'line',
// smooth: true, //鏄惁骞虫粦鏇茬嚎鏄剧ず
// symbol:'circle', // 榛樿鏄┖蹇冨渾锛堜腑闂存槸鐧借壊鐨勶級锛屾敼鎴愬疄蹇冨渾
@@ -2725,9 +2336,9 @@
symbolSize: 6,
lineStyle: {
normal: {
- color: `rgb(255, 221, 97)` // 绾挎潯棰滆壊
+ color: '#ff5b00' // 绾挎潯棰滆壊
},
- borderColor: `rgb(255, 221, 97)`
+ borderColor: '#ff5b00'
},
// label: {
// show: true,
@@ -2738,7 +2349,7 @@
// },
itemStyle: {
normal: {
- color: `rgb(255, 221, 97)`
+ color: '#ff5b00'
}
},
tooltip: {
@@ -2760,325 +2371,18 @@
// shadowBlur: 20 // shadowBlur璁惧浘褰㈤槾褰辩殑妯＄硦澶у皬銆傞厤鍚坰hadowColor,shadowOffsetX/Y, 璁剧疆鍥惧舰鐨勯槾褰辨晥鏋溿��
// }
// },
- data: [93, 38, 85, 666, 555, 444, 333]
- // data: [600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100), 600 + Math.floor(Math.random() * 100)]
+ data: yData[4]
}
-
]
}
}
-// export function cjzl03() {
-// const option = {
-// backgroundColor: 'transparent',
-// grid: {
-// left: '2%',
-// top: '10%',
-// right: '2%',
-// bottom: '20%',
-// containLabel: true
-// },
-// legend: {
-// // show: true,
-// // itemGap: 20,
-// // data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
-// // textStyle: {
-// // color: '#f9f9f9',
-// // borderColor: '#fff'
-// // }
-// data: ['瀹屾垚鏁�', '瀹屾垚鐜�'],
-// textStyle: { fontSize: 14, color: '#fff' },
-// itemWidth: 25,
-// itemHeight: 10,
-// itemGap: 15,
-// bottom: '5%',
-// selectedMode: false
-// },
-// // tooltip: {
-// // show: true,
-// // trigger: 'axis', // axis , item
-// // backgroundColor: 'RGBA(0, 0, 0, 0.3)',
-// // borderColor: 'rgba(0, 151, 251, 0.6)',
-// // borderWidth: 1,
-// // borderRadius: 0,
-// // textStyle: {
-// // color: '#BCE9FC',
-// // fontSize: 14,
-// // align: 'left'
-// // },
-// // // formatter:'{b0}<br />{a0}:{c0}<br />{a1}:{c4}%'
-// //
-// // // formatter: '{b0}<br/>' +
-// // // '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(255,224,144)"></span>鎻愬嚭鍐嶅妫�瀵熷缓璁暟:{c0}<br/>' +
-// // // '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgb(72,226,198)"></span>閲囩撼鐜�:{c4}%<br/>'
-// //
-// // formatter: function(params) {
-// // var res = '' + params[0].name
-// // var valueMap = new Map()
-// // for (var i = 0, l = params.length; i < l; i++) {
-// // if (params[i].value !== '-') {
-// // valueMap.set(params[i].seriesName, params[i])
-// // }
-// // }
-// // valueMap.forEach((value, key) => {
-// // if (value.seriesName === '鎻愬嚭鍐嶅妫�瀵熷缓璁暟') {
-// // res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
-// // } else if (value.seriesName === '閲囩撼鐜�' && value.value !== '-') {
-// // res += '<br/>' + value.marker + value.seriesName + ' : ' + value.value
-// // }
-// // })
-// // return res
-// // }
-// //
-// // },
-// xAxis: {
-// type: 'category',
-// boundaryGap: true,
-// axisLabel: {
-// interval: 0,
-// formatter: '{value}',
-// fontSize: 14,
-// margin: 20,
-// textStyle: {
-// color: colorX
-// }
-// },
-// axisLine: {
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// splitLine: {
-// show: false,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// },
-// data: ['绮惧伐杞﹂棿', '鏈哄姞宸ヨ溅闂�', '杞﹁埞杞﹂棿', '绮楄溅杞﹂棿', '杞﹁埞杞﹂棿']
-// },
-// yAxis: [
-// {
-// boundaryGap: false,
-// // splitNumber: 4,
-// type: 'value',
-// // max: 100,
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// }
-// },
-// nameTextStyle: {
-// color: '#fff',
-// fontSize: 14,
-// lineHeight: 40
-// },
-// splitLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisLine: {
-// show: true,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// }
-// },
-// {
-// boundaryGap: false,
-// splitNumber: 4,
-// type: 'value',
-// axisLabel: {
-// textStyle: {
-// fontSize: 14,
-// color: colorY
-// }
-// },
-// nameTextStyle: {
-// color: '#fff',
-// fontSize: 14,
-// lineHeight: 40
-// },
-// splitLine: {
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisLine: {
-// show: false,
-// lineStyle: {
-// color: '#032c58'
-// }
-// },
-// axisTick: {
-// show: false
-// }
-// }
-// ],
-// series: [
-// {
-// name: '瀹屾垚鏁�',
-// type: 'bar',
-// yAxisIndex: 0,
-// showSymbol: true,
-// showAllSymbol: true,
-// symbolSize: 4,
-// barWidth: 14,
-// zlevel: 1,
-// itemStyle: {
-// color: {
-// type: 'linear',
-// x: 0,
-// y: 0,
-// x2: 0,
-// y2: 1,
-// colorStops: [{
-// offset: 0,
-// color: `rgba(255,224,144,1)` // 0% 澶勭殑棰滆壊
-// }, {
-// offset: 1,
-// color: `rgba(72,226,198,1)` // 100% 澶勭殑棰滆壊
-// }]
-// }
-// },
-// label: {
-// show: false,
-// position: 'top',
-// distance: 10,
-// fontSize: 16,
-// fontFamily: 'DIN',
-// color: '#ffffff',
-// zlevel: 4,
-// z: 10,
-// formatter: '{c}%'
-// },
-// data: [560, 760, 850, 490, 380]
-// },
-// {
-// // 鍊煎垎闅�
-// type: 'pictorialBar',
-// itemStyle: {
-// normal: {
-// color: '#0F375F'
-// }
-// },
-// symbolRepeat: 'fixed',
-// symbolMargin: 3,
-// symbol: 'rect',
-// symbolClip: true,
-// symbolSize: [14, 3],
-// symbolPosition: 'start',
-// symbolOffset: [0, -1],
-// // symbolBoundingData: this.total,
-// // data: [100, 100, 100, 100, 100],
-// data: [1000, 1000, 1000, 1000, 1000],
-// width: 25,
-// z: 0,
-// zlevel: 2
-// },
-// {
-// // 杈呭姪鑳屾櫙鍥惧舰
-// name: '浠诲姟鏁�',
-// type: 'bar', // pictorialBar
-// barWidth: '14',
-// barGap: '-100%',
-// itemStyle: {
-// normal: {
-// borderWidth: 0,
-// // color: 'rgba(146,158,48,0)'
-// color: 'rgba(146,158,48,0)'
-// },
-// barBorderRadius: 10
-// },
-// data: [800, 900, 1000, 600, 700],
-// z: 0,
-// zlevel: 0
-// },
-// {
-// name: '瀹屾垚鐜�',
-// type: 'line',
-// yAxisIndex: 1,
-// showSymbol: true,
-// showAllSymbol: true,
-// symbolSize: 6,
-// barWidth: 14,
-// zlevel: 3,
-// lineStyle: {
-// normal: {
-// width: 2,
-// color: `rgba(72,226,198)`
-// }
-// },
-// areaStyle: {
-// normal: {
-// color: {
-// type: 'linear',
-// x: 0,
-// y: 0,
-// x2: 0,
-// y2: 1,
-// colorStops: [
-// {
-// offset: 0,
-// color: `rgba(72,226,198, 0.3)`// 0% 澶勭殑棰滆壊
-// },
-// {
-// offset: 1,
-// color: `rgba(72,226,198, 0.2)` // 100% 澶勭殑棰滆壊
-// }
-// ],
-// globalCoord: false // 缂虹渷涓� false
-// } // 娓愬彉棰滆壊
-// }
-// },
-// itemStyle: {
-// normal: {
-// color: {
-// type: 'linear',
-// x: 0,
-// y: 0,
-// x2: 0,
-// y2: 1,
-// colorStops: [
-// {
-// offset: 0,
-// color: `rgba(72,226,198, 1)`// 0% 澶勭殑棰滆壊
-// },
-// {
-// offset: 1,
-// color: `rgba(72,226,198, 0.2)` // 100% 澶勭殑棰滆壊
-// }
-// ],
-// globalCoord: false // 缂虹渷涓� false
-// } // 娓愬彉棰滆壊
-// }
-// },
-// data: [70, 80, 90, 20, 30]
-// }
-// ]
-// }
-// return option
-// }
-
-export function cjzl03() {
- const data1 = [300, 100, 200, 200, 100]
- const data2 = [300, 200, 300, 300, 400]
-
- // let percent=[]
-
+export function cjzl04(xData, data1, data2, data3) { // 鍙充晶
const option = {
backgroundColor: 'transparent',
grid: {
left: '2%',
- top: '10%',
+ top: '12%',
right: '2%',
bottom: '20%',
containLabel: true
@@ -3092,7 +2396,7 @@
// borderColor: '#fff'
// }
data: ['瀹屾垚鏁�', '浠诲姟鏁�', '瀹屾垚鐜�'],
- textStyle: { fontSize: 14, color: '#fff' },
+ textStyle: { fontSize: 16, color: '#fff' },
itemWidth: 25,
itemHeight: 10,
itemGap: 15,
@@ -3105,7 +2409,7 @@
axisLabel: {
interval: 0,
formatter: '{value}',
- fontSize: 14,
+ fontSize: 16,
margin: 20,
textStyle: {
color: colorX
@@ -3125,7 +2429,7 @@
axisTick: {
show: false
},
- data: ['绮惧伐杞﹂棿', '鏈哄姞宸ヨ溅闂�', '瑁呴厤杞﹂棿', '绮楄溅杞﹂棿', '鍖呰杞﹂棿']
+ data: xData
},
yAxis: [
{
@@ -3135,8 +2439,8 @@
// max: 100,
axisLabel: {
textStyle: {
- fontSize: 14,
- color: colorY
+ fontSize: 16,
+ color: colorX
}
},
nameTextStyle: {
@@ -3167,13 +2471,13 @@
type: 'value',
axisLabel: {
textStyle: {
- fontSize: 14,
- color: colorY
+ fontSize: 16,
+ color: colorX
}
},
nameTextStyle: {
color: '#fff',
- fontSize: 14,
+ fontSize: 16,
lineHeight: 40
},
splitLine: {
@@ -3195,69 +2499,42 @@
],
series: [
{ // 涓変釜鏈�搴曚笅鐨勫渾鐗�
- 'name': '',
+ 'name': '瀹屾垚鏁�',
'type': 'pictorialBar',
'symbolSize': [45, 25],
'symbolOffset': [0, 10],
'z': 12,
+ color: `rgb(37,196,238)`,
itemStyle: {
opacity: 1,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#00EC28' // 0% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#5DF076'// 100% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
}], false)
}
- // color: function(params) {
- // var a = params.name.slice(0, 2)
- // if (a === '绮惧伐') {
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: '#FF9A22' // 0% 澶勭殑棰滆壊
- // }, {
- // offset: 1,
- // color: '#FFD56E'// 100% 澶勭殑棰滆壊
- // }], false)
- // } else if (a === '鏈哄姞' || a === '绮楄溅') {
- // return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: '#00EC28' // 0% 澶勭殑棰滆壊
- // }, {
- // offset: 1,
- // color: '#5DF076'// 100% 澶勭殑棰滆壊
- // }], false)
- // } else if (a === '瑁呴厤' || a === '鍖呰') {
- // 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: '瀹屾垚鏁�',
+ name: '',
type: 'bar',
barWidth: 45,
barGap: '-100%',
itemStyle: { // lenged鏂囨湰
- opacity: 0.7,
+ opacity: 1,
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#00EC28' // 0% 澶勭殑棰滆壊
+ color: `rgb(35,131,180)` // 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#5DF076'// 100% 澶勭殑棰滆壊
+ color: `rgb(35,131,180)`// 100% 澶勭殑棰滆壊
}], false)
}
},
@@ -3276,10 +2553,8 @@
normal: {
show: true,
position: 'left',
-
- fontSize: 14,
+ fontSize: 16,
color: colorX,
- // offset: [-50, 15],
zIndex: 10
}
},
@@ -3311,10 +2586,10 @@
color: function(params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
- color: '#00EC28' // 0% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)` // 0% 澶勭殑棰滆壊
}, {
offset: 1,
- color: '#5DF076'// 100% 澶勭殑棰滆壊
+ color: `rgb(37,196,238)`// 100% 澶勭殑棰滆壊
}], false)
}
},
@@ -3336,8 +2611,7 @@
normal: {
show: true,
position: 'top',
-
- fontSize: 14,
+ fontSize: 16,
color: colorX,
offset: [0, -5]
}
@@ -3357,7 +2631,7 @@
lineStyle: {
normal: {
width: 2,
- color: `rgba(72, 226, 198)`
+ color: `rgb(108,237,100)`
}
},
// areaStyle: {
@@ -3393,11 +2667,11 @@
colorStops: [
{
offset: 0,
- color: `rgba(72, 226, 198, 1)`// 0% 澶勭殑棰滆壊
+ color: `rgb(108,237,100)`// 0% 澶勭殑棰滆壊
},
{
offset: 1,
- color: `rgba(72, 226, 198, 0.2)` // 100% 澶勭殑棰滆壊
+ color: `rgb(108,237,100)` // 100% 澶勭殑棰滆壊
}
],
globalCoord: false // 缂虹渷涓� false
@@ -3416,7 +2690,7 @@
// offset: [0, -5]
}
},
- data: [100, 50, 66.7, 66.7, 25]
+ data: data3
}
]
}
diff --git a/src/views/kanbanManager/all.vue b/src/views/kanbanManager/all.vue
new file mode 100644
index 0000000..56cb20f
--- /dev/null
+++ b/src/views/kanbanManager/all.vue
@@ -0,0 +1,12 @@
+<!--鎬荤殑缁煎悎鐪嬫澘-->
+<template />
+
+<script>
+export default {
+ name: 'All'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/kanbanManager/cjzl.vue b/src/views/kanbanManager/cjzl.vue
index 999e3f1..05bc4f2 100644
--- a/src/views/kanbanManager/cjzl.vue
+++ b/src/views/kanbanManager/cjzl.vue
@@ -2,35 +2,32 @@
<div>
<div class="kb_dashboard" style="display:flex;flex-direction: column;justify-content: space-between">
- <!-- 鏄熺┖鑳屾櫙-->
- <!-- <div ref="starsRef" class="stars">-->
- <!-- <div v-for="(item, index) in starsCount" :key="index" class="star" />-->
- <!-- </div>-->
+ <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=" padding:5px 20px 20px 20px;height: 980px;flex-direction: column;justify-content: space-between">
+ <div
+ style=" padding:5px 20px 20px 20px;z-index:2;height: 950px;flex-direction: column;justify-content: space-between;"
+ >
<!-- 涓婇潰閮ㄥ垎-->
- <div>
+ <div style="">
<div class="smallTitle">
<svg-icon icon-class="blcs" class="svg_class" />
- 鏃ヤ笉鑹鏁�
+ 鍛ㄤ笉鑹鏁�
</div>
<div class="lineContent horn" style="height: 250px;display: flex;justify-content: space-between">
- <div id="cjzl01" class="flex_c_c" style="width: 300px;height:100%" />
+ <div id="cjzl01" class="flex_c_c" style="width: 300px;height:100%;" />
<div id="cjzl02_1" class="flex_c_c" style="width: 300px;height:100%" />
<div id="cjzl02_2" class="flex_c_c" style="width: 300px;height:100%" />
<div id="cjzl02_3" class="flex_c_c" style="width: 300px;height:100%" />
@@ -46,7 +43,7 @@
鍛ㄤ笉鑹暟
</div>
<div class="lineContent horn" style="height: 250px;display: flex;justify-content: space-between">
- <div id="cjzl04" class="flex_c_c" style="width: 920px;height:100%" />
+ <div id="cjzl03" class="flex_c_c" style="width: 920px;height:100%" />
</div>
</div>
<div>
@@ -55,7 +52,7 @@
鍛ㄥ畬鎴愭暟锛堢巼锛�
</div>
<div class="lineContent horn" style="height: 250px;display: flex;justify-content: space-between">
- <div id="cjzl03" class="flex_c_c" style="width: 920px;height:100%" />
+ <div id="cjzl04" class="flex_c_c" style="width: 920px;height:100%" />
</div>
</div>
@@ -66,7 +63,7 @@
<svg-icon icon-class="cjrw" class="svg_class" />
杞﹂棿浠诲姟瀹屾垚鎯呭喌
</div>
- <div class="lineContent horn" style="height: 310px;display: flex;justify-content: space-between">
+ <div class="lineContent horn" style="height: 280px;display: flex;justify-content: space-between">
<el-table
ref="tableDataRightTopRef"
:data="tableDataRightTop"
@@ -74,6 +71,7 @@
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
+ height="275"
>
<!-- height=""-->
<el-table-column
@@ -82,39 +80,43 @@
width="60"
/>
<el-table-column
- prop="cjmc"
+ prop="wkshp_name"
width="220"
label="杞﹂棿鍚嶇О"
/>
<el-table-column
- prop="gdh"
+ prop="wo_code"
width="280"
label="宸ュ崟鍙�"
/>
<el-table-column
- prop="cpmc"
+ prop="partname"
width="280"
label="浜у搧鍚嶇О"
/>
<el-table-column
- prop="cpgg"
+ prop="partspec"
width="280"
label="浜у搧瑙勬牸"
- />
+ >
+ <template slot-scope="{row}">
+ {{ row.partspec ? row.partspec : '/' }}
+ </template>
+ </el-table-column>
<el-table-column
- prop="rwsl"
+ prop="plan_qty"
width="220"
label="浠诲姟鏁�"
/>
<el-table-column
- prop="hgsl"
+ prop="good_qty"
width="220"
label="鍚堟牸鏁伴噺"
/>
<el-table-column
- prop="blsl"
+ prop="radio"
width="314"
- label="涓嶈壇鏁伴噺"
+ label="瀹屾垚鐜�(%)"
/>
</el-table>
</div>
@@ -126,25 +128,21 @@
<script>
import './kbCommon.css'
-import { cjzl01, cjzl02, cjzl03, cjzl04, kbTop, loadEcharts } from '@/utils/myEcharts'
-import { QCBadCenterLeftWeek, QCBadCenterRightWeek, QCBadTop, ShopSearch } from '@/api/kanbanManager'
+import { cjzl01, cjzl02, cjzl04, cjzl03, loadEcharts } from '@/utils/myEcharts'
+import {
+ QCBadBottomWeek,
+ QCBadCenterLeftWeek,
+ QCBadCenterRightWeek,
+ QCBadTop,
+ ShopSearch
+} from '@/api/kanbanManager'
export default {
name: 'Cjsc',
data() {
return {
headTime: '',
- tableDataRightTop: [
- { cjmc: '绮惧伐杞﹂棿', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '瑁呴厤杞﹂棿', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '绮惧伐杞﹂棿', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '瑁呴厤杞﹂棿', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '鏈哄姞宸ヨ溅闂�', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�#30', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '鏈哄姞宸ヨ溅闂�', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�#30', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '鏈哄姞宸ヨ溅闂�', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�#30', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '鏈哄姞宸ヨ溅闂�', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�#30', rwsl: '1000', hgsl: '900', blsl: '100' },
- { cjmc: '鏈哄姞宸ヨ溅闂�', gdh: 'MO2023-09-12', cpmc: '鐢垫睜鍖�1', cpgg: '23娆炬墜鍔ㄧ簿妯�#30', rwsl: '1000', hgsl: '900', blsl: '100' }
- ],
+ tableDataRightTop: [],
wkshopArr: [],
cjzl01Data: [],
@@ -158,30 +156,35 @@
cjzl02_4Data: [],
cjzl02_5Title: '',
cjzl02_5Data: [],
- starsCount: 800, // 鏄熸槦鏁伴噺
- distance: 900 // 闂磋窛
+ cjzl03_xData: [],
+ cjzl03_yData: [],
+ legendData: [],
+ cjzl04Data: []
}
},
created() {
setInterval(this.getNowTime, 1000)
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ // // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
setInterval(() => {
window.location.reload()
}, 1000 * 60 * 120)
},
mounted() {
- this.getTopBar()
-
this.getAllApi()
-
- // this.setStarsRef()
},
methods: {
async getAllApi() {
const { data: res } = await ShopSearch()
this.wkshopArr = res
- const temp = ['001', 'CJ001', '006', 'ZS001', '002']
+ // const temp = ['001', 'CJ001', '006', 'ZS001', '002']
+ 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 { data: res2 } = await QCBadTop({ wkshopcode: temp.join(',') })
for (const res2Key in res2) {
if (res2Key === 'ALL') {
@@ -238,46 +241,199 @@
})
}
}
-
- const { data: res3 } = await QCBadCenterLeftWeek({ wkshopcode: temp.join(',') })
- console.log(res3) // 杩欎釜鏄庡ぉ鍐�
-
- const { data: res4 } = await QCBadCenterRightWeek({ wkshopcode: temp.join(',') })
- console.log(res4)
-
- this.getEcharts()
- },
- 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})`
- })
- },
- // 鑾峰彇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))
+ setInterval(() => {
+ QCBadTop({ wkshopcode: temp.join(',') }).then(res2 => {
+ for (const res2Key in res2.data) {
+ if (res2Key === 'ALL') {
+ this.cjzl01Data = res2.data[res2Key].map(i => {
+ return {
+ name: i.name,
+ value: i.cont
+ }
+ })
+ }
+ if (res2Key === temp[0]) {
+ this.cjzl02_1Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
+ this.cjzl02_1Data = res2.data[res2Key].map(i => {
+ return {
+ name: i.name,
+ value: i.cont
+ }
+ })
+ }
+ if (res2Key === temp[1]) {
+ this.cjzl02_2Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
+ this.cjzl02_2Data = res2.data[res2Key].map(i => {
+ return {
+ name: i.name,
+ value: i.cont
+ }
+ })
+ }
+ if (res2Key === temp[2]) {
+ this.cjzl02_3Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
+ this.cjzl02_3Data = res2.data[res2Key].map(i => {
+ return {
+ name: i.name,
+ value: i.cont
+ }
+ })
+ }
+ if (res2Key === temp[3]) {
+ this.cjzl02_4Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
+ this.cjzl02_4Data = res2.data[res2Key].map(i => {
+ return {
+ name: i.name,
+ value: i.cont
+ }
+ })
+ }
+ if (res2Key === temp[4]) {
+ this.cjzl02_5Title = this.wkshopArr.find(i => i.org_code === res2Key).org_name
+ this.cjzl02_5Data = res2.data[res2Key].map(i => {
+ return {
+ name: i.name,
+ value: i.cont
+ }
+ })
+ }
+ }
+ })
+ 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))
+ }, 1000 * 30)
- loadEcharts('cjzl03', cjzl03())
- loadEcharts('cjzl04', cjzl04())
+ const { data: res3 } = await QCBadCenterLeftWeek({ wkshopcode: temp.join(',') })// 宸︿晶
+ for (const res3Key in res3) {
+ if (res3Key === temp[0]) {
+ this.cjzl03_xData = res3[res3Key].map(i => i.click_date)
+
+ this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[1]) {
+ this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[2]) {
+ this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[3]) {
+ this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[4]) {
+ this.cjzl03_yData.push(res3[res3Key].map(i => i.count))
+ }
+ }
+ loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData))// 宸︿晶
+ setInterval(() => {
+ QCBadCenterLeftWeek({ wkshopcode: temp.join(',') }).then(res3 => {
+ this.cjzl03_xData = []
+ this.cjzl03_yData = []
+ for (const res3Key in res3.data) {
+ if (res3Key === temp[0]) {
+ this.cjzl03_xData = res3.data[res3Key].map(i => i.click_date)
+
+ this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[1]) {
+ this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[2]) {
+ this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[3]) {
+ this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
+ }
+ if (res3Key === temp[4]) {
+ this.cjzl03_yData.push(res3.data[res3Key].map(i => i.count))
+ }
+ }
+ loadEcharts('cjzl03', cjzl03(this.cjzl03_xData, this.legendData, this.cjzl03_yData))// 宸︿晶
+ })
+ }, 1000 * 40)
+
+ const { data: res4 } = await QCBadCenterRightWeek({ wkshopcode: temp.join(',') }) // 鍙充晶
+ let a = []
+ let b = []
+ let c = []
+ for (const res4Key in res4) {
+ a.push(res4[res4Key].length > 0 ? res4[res4Key][0].good_qty : 0)
+ b.push(res4[res4Key].length > 0 ? res4[res4Key][0].plan_qty : 0)
+ c.push(res4[res4Key].length > 0 ? res4[res4Key][0].radio : 0)
+ }
+ this.cjzl04Data.push(a, b, c)
+ loadEcharts('cjzl04', cjzl04(this.legendData, this.cjzl04Data[0], this.cjzl04Data[1], this.cjzl04Data[2]))// 鍙充晶
+
+ setInterval(() => {
+ QCBadCenterRightWeek({ wkshopcode: temp.join(',') }).then(res4 => {
+ a = []
+ b = []
+ c = []
+ this.cjzl04Data = []
+ for (const res4Key in res4.data) {
+ a.push(res4.data[res4Key].length > 0 ? res4.data[res4Key][0].good_qty : 0)
+ b.push(res4.data[res4Key].length > 0 ? res4.data[res4Key][0].plan_qty : 0)
+ c.push(res4.data[res4Key].length > 0 ? res4.data[res4Key][0].radio : 0)
+ }
+ this.cjzl04Data.push(a, b, c)
+ loadEcharts('cjzl04', cjzl04(this.legendData, this.cjzl04Data[0], this.cjzl04Data[1], this.cjzl04Data[2]))// 鍙充晶
+ })
+ }, 1000 * 50)
+
+ this.$nextTick(() => {
+ this.getQCBadBottomWeek()
+ })
+
+ // await this.getEcharts()
},
- // 鑾峰彇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))// 宸︿晶
+ },
+
+ getQCBadBottomWeek() {
+ const data = {
+ wkshopcode: this.wkshopArr.map(i => i.org_code).join(',')
+ }
+ QCBadBottomWeek(data).then(res => {
+ this.tableDataRightTop = res.data
+
+ const divData = this.$refs.tableDataRightTopRef.bodyWrapper
+ const temp = setInterval(() => {
+ // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ divData.scrollTop += 1
+ if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ // 閲嶇疆table璺濈椤堕儴璺濈
+ divData.scrollTop = 0
+ QCBadBottomWeek(data).then(res => {
+ this.tableDataRightTop = res.data
+ if (this.tableDataRightTop.length > 7) {
+ clearInterval(temp)
+ this.getQCBadBottomWeek()
+ }
+ })
+ }
+ }, this.tableDataRightTop.length <= 7 ? 1000 * 10 : 300)
+ })
},
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
@@ -297,46 +453,25 @@
},
headerCellStyle() {
return {
- // backgroundColor: 'rgb(30 ,33, 46)',
- backgroundColor: '#000',
+ backgroundColor: 'transparent ',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
- border: 'none'
+ border: 'none',
+ fontSize: '20px'
}
},
cellStyle() {
return {
padding: '7px 0',
textAlign: 'center',
- // backgroundColor: 'rgba(30, 33, 46)',
- backgroundColor: '#000',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- },
- headerCellStyleCenter() {
- return {
- // backgroundColor: 'rgb(30 ,33, 46)',
- backgroundColor: '#000',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none',
- fontSize: '20px'
- }
- },
- cellStyleCenter() {
- return {
- padding: '7.5px 0',
- textAlign: 'center',
- backgroundColor: '#000',
- color: '#fff',
+ backgroundColor: 'transparent ',
+ color: '#c7e7ff',
border: 'none',
fontSize: '20px'
}
}
+
}
}
@@ -346,7 +481,7 @@
$main_color: #09d8f2;
$color01: #00FFFF;
.tableData {
- background: #000;
+ background: transparent;
}
.el-table::before {
@@ -363,39 +498,15 @@
}
}
-</style>
-
-<!--鏄熺┖-->
-<style lang="css" scoped>
-@keyframes rotate {
- 0% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
- }
- 100% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
- }
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+ /* width: 0;瀹藉害涓�0鏆楄棌 */
+ width: 0;
+ background: transparent;
}
-.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;
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+ background-color: transparent;
}
</style>
diff --git a/src/views/kanbanManager/ckgl.vue b/src/views/kanbanManager/ckgl.vue
index 1b94f5f..6a07f52 100644
--- a/src/views/kanbanManager/ckgl.vue
+++ b/src/views/kanbanManager/ckgl.vue
@@ -2,34 +2,29 @@
<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_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;height: 980px">
- <div style="width: 1350px; " class="flex_c_b">
+
+ <div style="display: flex;justify-content: space-between;padding:0 20px 20px 20px;height: 950px">
+ <div style="width: 1350px;z-index: 2;margin-top: 50px;" class="flex_c_b">
<div style="height: 470px;">
<div class="smallTitle">
<svg-icon icon-class="cpdrk" class="svg_class" />
鐢熶骇寰呭叆搴�
</div>
- <div class="lineContent horn" style="height: 435px">
+ <div class="lineContent horn" style="height: 410px">
<el-table
ref="tableDataTopRef"
:data="tableDataTop"
@@ -37,7 +32,7 @@
class="tableData"
:header-cell-style="headerCellStyleCenter"
:cell-style="cellStyleCenter"
- height="430"
+ height="405"
>
<el-table-column
prop="voucherdate"
@@ -77,15 +72,15 @@
<div v-else>/</div>
</template>
</el-table-column>
- <el-table-column
- prop="materiel_code"
- label="浜у搧缂栧彿"
- width="136"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.materiel_code }}</div>
- </template>
- </el-table-column>
+ <!-- <el-table-column-->
+ <!-- prop="materiel_code"-->
+ <!-- label="浜у搧缂栧彿"-->
+ <!-- width="136"-->
+ <!-- >-->
+ <!-- <template slot-scope="{row}">-->
+ <!-- <div class="ellipsis">{{ row.materiel_code }}</div>-->
+ <!-- </template>-->
+ <!-- </el-table-column>-->
<el-table-column
prop="materiel_name"
label="浜у搧鍚嶇О"
@@ -95,16 +90,16 @@
<div class="ellipsis">{{ row.materiel_name }}</div>
</template>
</el-table-column>
- <!-- <el-table-column-->
- <!-- prop="specification"-->
- <!-- label="瑙勬牸鍨嬪彿"-->
- <!-- width="128"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
+ <el-table-column
+ prop="specification"
+ label="瑙勬牸鍨嬪彿"
+ width="136"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="stck_name"
label="棰勫叆浠撳簱"
@@ -158,12 +153,12 @@
</el-table>
</div>
</div>
- <div style="height: 470px;">
+ <div style="height: 470px;margin-top: 30px;">
<div class="smallTitle">
<svg-icon icon-class="cpdfh" class="svg_class" />
浜у搧寰呭彂璐�
</div>
- <div class="lineContent horn" style="height: 435px">
+ <div class="lineContent horn" style="height: 410px">
<el-table
ref="tableDataBottomRef"
:data="tableDataBottom"
@@ -171,11 +166,11 @@
class="tableData"
:header-cell-style="headerCellStyleCenter"
:cell-style="cellStyleCenter"
- height="430"
+ height="405"
>
<el-table-column
prop="voucherdate"
- label="鍗曟嵁鏃ユ湡"
+ label="閿�鍞鍗曞彿"
width="131"
>
<template slot-scope="{row}">
@@ -195,7 +190,7 @@
<el-table-column
prop="customename"
label="瀹㈡埛"
- width="388"
+ width="288"
>
<template slot-scope="{row}">
<div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
@@ -236,16 +231,16 @@
<div v-if="row.materiel_name" class="ellipsis">{{ row.materiel_name }}</div>
</template>
</el-table-column>
- <!-- <el-table-column-->
- <!-- prop="specification"-->
- <!-- label="瑙勬牸鍨嬪彿"-->
- <!-- width="100"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
+ <el-table-column
+ prop="specification"
+ label="瑙勬牸鍨嬪彿"
+ width="100"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.specification" class="ellipsis">{{ row.specification }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
<el-table-column
prop="quantity"
label="鏁伴噺"
@@ -300,23 +295,23 @@
</div>
</div>
- <div style="width: 500px;" class="flex_c_b">
+ <div style="width: 500px;z-index: 2;margin-top: 50px;" class="flex_c_b">
<div style="height: 470px;">
<div class="smallTitle">
<svg-icon icon-class="ph" class="svg_class" />
鍗婃垚鍝併�佷骇鍝佸簱瀛橀噺鎺掕Top5
</div>
- <div class="lineContent horn" style="height: 435px">
+ <div class="lineContent horn" style="height: 410px">
<div id="bar03" style="width: 100%;height:100%; " />
<!--/* <div id="bar03" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />*/-->
</div>
</div>
- <div style="height: 470px;">
+ <div style="height: 470px;margin-top: 30px;">
<div class="smallTitle">
<svg-icon icon-class="ph" class="svg_class" />
鍘熸潗鏂欏簱瀛橀噺鎺掕Top5
</div>
- <div class="lineContent horn" style="height: 435px">
+ <div class="lineContent horn" style="height: 410px">
<div id="bar04" style="width: 100%;height:100%;" />
<!-- <div id="bar04" style="width: 100%;height:100%;margin-left: -25px;margin-top: -10px" />-->
</div>
@@ -377,12 +372,9 @@
window.addEventListener('offline', this.updateOnlineStatus)
this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- this.getTopBar()
-
this.getWareHouseTopLeftData()
this.getWareHouseTopBottomData()
this.getEcharts()
- this.setStarsRef()
},
beforeDestroy() {
window.removeEventListener('online', this.updateOnlineStatus)
@@ -411,24 +403,7 @@
}
}
},
- 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})`
- })
- },
- // 鑾峰彇topEcharts
- getTopBar() {
- loadEcharts('topBarLeft', kbTop())
- loadEcharts('topBarRight', kbTop())
- },
+
// 鑾峰彇宸︿笂table鏁版嵁
getWareHouseTopLeftData() {
WareHouseTopLeftData().then(res => {
@@ -525,8 +500,7 @@
},
headerCellStyleCenter() {
return {
- // backgroundColor: 'rgb(30 ,33, 46)',
- backgroundColor: '#000',
+ backgroundColor: 'transparent ',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
@@ -538,8 +512,8 @@
return {
padding: '7.5px 0',
textAlign: 'center',
- backgroundColor: '#000',
- color: '#fff',
+ backgroundColor: 'transparent ',
+ color: '#c7e7ff',
border: 'none',
fontSize: '18px'
}
@@ -553,9 +527,13 @@
$main_color:#09d8f2;
$color01: #00FFFF;
.tableData{
- background: #000;
+ background: transparent;
}
-
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+ background-color: transparent;
+}
.el-table__empty-text{
color: $main_color;
}
@@ -576,37 +554,3 @@
}
</style>
-<!--鏄熺┖-->
-<style lang="css" scoped>
-@keyframes rotate {
- 0% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
- }
- 100% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
- }
-}
-
-.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;
-}
-</style>
diff --git a/src/views/kanbanManager/kbCommon.css b/src/views/kanbanManager/kbCommon.css
index f7c4ad6..86780ad 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;
@@ -27,7 +34,7 @@
font-weight: bolder;
}
-.kb_title_text{
+.kb_title_text {
font-weight: bolder;
font-size: 24px;
}
@@ -69,6 +76,7 @@
justify-content: space-evenly;
/*align-content: center;*/
}
+
.flex_c_b {
display: flex;
flex-direction: column;
@@ -99,6 +107,7 @@
.kb_mt10 {
margin-top: 10px;
}
+
/*鍏憡鏍峰紡*/
.MarqueeTipsContentClass {
color: #00ffff;
@@ -108,7 +117,7 @@
font-size: 32px;
z-index: 2;
position: absolute;
- top:80px;
+ top: 80px;
}
/*
@@ -124,7 +133,7 @@
/*scrollbar END*/
-.smallTitle{
+.smallTitle {
height: 35px;
display: flex;
color: #00ffff;
@@ -132,11 +141,10 @@
/*align-content: flex-start;*/
}
-.svg_class{
+.svg_class {
margin-right: 10px;
font-size: 28px;
}
-
.lineContent {
diff --git a/src/views/kanbanManager/zhkb.vue b/src/views/kanbanManager/zhkb.vue
index ff39bfe..0c712da 100644
--- a/src/views/kanbanManager/zhkb.vue
+++ b/src/views/kanbanManager/zhkb.vue
@@ -1,29 +1,26 @@
<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_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;" :style="{left:ShopArr[0]==='202'?'780px':'800px'}">
+ <span>{{ title }}鏁板瓧鍖栫湅鏉�</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="display: flex;justify-content: space-between;padding:0 20px 20px 20px;">
<!-- 宸﹁竟-->
- <div style="width: 1400px ;height: 969px;" class="flex_c_b">
+ <div style="width: 1400px ;height: 950px;z-index: 2;margin-top:50px;justify-content:flex-start" class="flex_c_b">
<div>
<div class="smallTitle">
<svg-icon icon-class="cxjg" class="svg_class" />
@@ -102,12 +99,12 @@
</div>
</div>
- <div>
+ <div style="margin-top: 20px;">
<div class="smallTitle">
<svg-icon icon-class="cxmc" class="svg_class" />
浜х嚎鍔犲伐浠诲姟
</div>
- <div class="lineContent horn">
+ <div class="lineContent horn" style="height: 400px;">
<el-table
ref="tableDataLeftBottomRef"
:data="tableDataLeftBottom"
@@ -115,7 +112,7 @@
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
- height="428"
+ height="390"
>
<el-table-column
prop="RowNum"
@@ -171,21 +168,21 @@
<el-table-column
prop="plan_qty"
label="浠诲姟鏁伴噺"
- width="105"
+ width="106"
/>
<el-table-column
prop="good_qty"
label="瀹屽伐鏁伴噺"
- width="105"
+ width="106"
/>
<el-table-column
prop="ng_qty"
label="涓嶈壇鏁伴噺"
- width="105"
+ width="106"
/>
<el-table-column
label="瀹屾垚鐜�"
- width="105"
+ width="106"
>
<template slot-scope="{row}">
<div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
@@ -215,7 +212,7 @@
</div>
</div>
<!-- 鍙宠竟-->
- <div style="width: 450px;height: 969px;" class="flex_c_b">
+ <div style="width: 450px;height: 950px;z-index: 2;margin-top:50px;justify-content:flex-start" class="flex_c_b">
<div>
<div class="smallTitle">
<svg-icon icon-class="drwg" class="svg_class" />
@@ -264,12 +261,12 @@
</div>
</div>
- <div>
+ <div style="margin-top: 20px;">
<div class="smallTitle">
<svg-icon icon-class="top5" class="svg_class" />
涓�鍛ㄤ笉鑹疶op5
</div>
- <div class="lineContent horn">
+ <div class="lineContent horn" style="height: 400px;">
<div id="bar01" class="flex_c_c" style="width: 100%;height:100%" />
</div>
@@ -306,14 +303,26 @@
lineContent3: [],
ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
- starsCount: 800, // 鏄熸槦鏁伴噺
- distance: 900 // 闂磋窛
-
+ codeArr: [
+ { code: '202', name: '鏈哄姞宸ヨ溅闂�' },
+ { code: '205', name: '鍖呰杞﹂棿' },
+ { code: '204', name: '鍠锋秱杞﹂棿' },
+ { code: '203', name: '鎶涘厜杞﹂棿' },
+ { code: '201', name: '鍘嬮摳杞﹂棿' }
+ ],
+ title: '杞﹂棿缁煎悎'
}
},
created() {
setInterval(this.getNowTime, 1000)
+ // this.getShopSearch()
+ let code = ''
+ if (window.location.hash.indexOf('?') !== -1) {
+ code = window.location.hash.split('?')[1].split('=')[1]
+ this.title = this.codeArr.find(i => i.code === code).name
+ this.ShopArr = [code]
+ }
// 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
setInterval(() => {
window.location.reload()
@@ -324,17 +333,19 @@
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()
+ this.getAllApi()
},
beforeDestroy() {
window.removeEventListener('online', this.updateOnlineStatus)
window.removeEventListener('offline', this.updateOnlineStatus)
},
methods: {
+ getAllApi() {
+ this.getShopSearchLine()
+ this.getLineSearchTopRightData()
+ this.getLeftBottomData()
+ this.getEcharts()
+ },
// 鏇存柊缃戠粶鐘舵��
updateOnlineStatus(e) {
if (e.isFirst) {
@@ -357,50 +368,155 @@
}
}
},
- 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)
- })
+ // 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.getLineSearchTopRightData()
+ // this.getLeftBottomData()
+ // this.getEcharts()
+ // }
+ // }
+ // 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 // 璋冪敤鎺ュ彛杩斿洖鐨勬暟鎹�
+ this.number1 = this.lineContent.length // 浜х嚎鍔犲伐涓换鍔� 鍗曟暟
- if (this.ShopArr.length > 0) {
- this.getShopSearchLine()
- this.getRightRightData()
- this.getLeftBottomData()
- this.getEcharts()
- }
- }
- 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)
+ const newData = []
+ if (this.lineContent.length > 0) {
+ this.lineContent.forEach(item => {
+ if (item.children.length > 5) {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(0, 5)
+ })
+
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(5)
+ })
+ } else {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children
})
}
})
- }, 1000 * 60)
- }
+
+ // console.log(newData.length, 9777)
+ }
+
+ this.lineContent = newData
+ length = this.lineContent.length
+ count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
+ this.lineContent3 = this.lineContent.slice(0, 3)
+ })
+
+ let start = 0
+ this.ShopSearchLineTask = setInterval(() => {
+ if (Math.floor(start / 3) === count && count !== 0) {
+ start = 0
+ LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.lineContent = res.data // 璋冪敤鎺ュ彛杩斿洖鐨勬暟鎹�
+ this.number1 = this.lineContent.length // 浜х嚎鍔犲伐涓换鍔� 鍗曟暟
+
+ const newData = []
+ if (this.lineContent.length > 0) {
+ this.lineContent.forEach(item => {
+ if (item.children.length > 5) {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(0, 5)
+ }
+ )
+
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children.slice(5)
+ })
+ } else {
+ newData.push({
+ workcode: item.workcode,
+ partname: item.partname,
+ partnumber: item.partnumber,
+ partspec: item.partspec,
+ qty: item.qty,
+ saleordercode: item.saleordercode,
+ uom: item.uom,
+ children: item.children
+ })
+ }
+ })
+ }
+
+ this.lineContent = newData
+ length = this.lineContent.length
+ count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
+ this.lineContent3 = this.lineContent.slice(0, 3)
+ })
+ } else if (count === 0) {
+ clearInterval(this.ShopSearchLineTask)
+ this.getShopSearchLine()
+ }
+
+ this.lineContent3 = this.lineContent.slice(start, start + 3)
+ start = start + 3
+ }, 1000 * 10)
},
- // 浜х嚎鍔犲伐涓换鍔�
- getShopSearchLine() {
+ // 浜х嚎鍔犲伐涓换鍔�(澶囦唤 鍘熷厛鐨勬柟娉�)
+ getShopSearchLineBack() {
let length, count
LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
this.lineContent = res.data
@@ -432,54 +548,96 @@
},
// 鑾峰彇鍙充笂鏁版嵁 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getRightRightData() {
- let startValue = 0 // 鍒濆鍊�
- const scale = 10// 鍒诲害
-
+ getLineSearchTopRightData() {
LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRightTopTemp = res.data
+ this.tableDataRightTop = res.data
+ const divData = this.$refs.tableDataRightTopRef.bodyWrapper
- this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
+ const temp = setInterval(() => {
+ divData.scrollTop += 1
- const loop = Math.floor(this.tableDataRightTopTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
- let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+ if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ divData.scrollTop = 0
+ LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.tableDataRightTop = res.data
- const timer = setInterval(() => {
- startValue = startValue + scale
- this.tableDataRightTop = this.tableDataRightTopTemp.slice(startValue, startValue + scale)
- if (nowLoop === loop) {
- clearInterval(timer)
- this.getRightRightData()
+ if (this.tableDataRightTop.length > 10) {
+ clearInterval(temp)
+ this.getLineSearchTopRightData()
+ }
+ })
}
-
- nowLoop++
- }, 1000 * 10)
+ }, this.tableDataRightTop.length <= 10 ? 1000 * 15 : 300)
})
+
+ // 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.getLineSearchTopRightData()
+ // }
+ //
+ // 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)
+ this.tableDataLeftBottom = res.data
- const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// 闇�瑕佸惊鐜殑娆℃暟
- let nowLoop = 0// 褰撳墠寰幆鐨勬鏁�
+ const divData = this.$refs.tableDataLeftBottomRef.bodyWrapper
+ this.TableDataRollTask = setInterval(() => {
+ // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ divData.scrollTop += 1
+ if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ divData.scrollTop = 0
+ LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ this.tableDataLeftBottom = res.data
- const timer = setInterval(() => {
- startValue = startValue + scale
- this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
- nowLoop++ // 鏀惧湪杩欓噷鍙互浜嗭紝灏辩瓑寰呴浂鐐瑰嚑绉�
- if (nowLoop === loop) {
- clearInterval(timer)
- this.getLeftBottomData()
+ if (this.tableDataLeftBottom.length > 10) {
+ clearInterval(this.TableDataRollTask)
+ this.getLeftBottomData()
+ }
+ })
}
-
- // nowLoop++ //涔嬪墠鏀惧湪杩欓噷閫昏緫涓嶅锛岀浉宸簡涓�娆＄殑寰幆锛岀浉褰撲簬澶氱瓑寰呬簡10绉�
- }, 1000 * 10)
+ }, this.tableDataLeftBottom.length <= 10 ? 1000 * 15 : 200)
})
+
+ // 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() {
@@ -499,11 +657,6 @@
})
}, 1000 * 10)
},
- // 鑾峰彇topEcharts
- getTopBar() {
- loadEcharts('topBarLeft', kbTop())
- loadEcharts('topBarRight', kbTop())
- },
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
const dt = new Date()
@@ -522,7 +675,7 @@
},
headerCellStyle() {
return {
- backgroundColor: '#000',
+ backgroundColor: 'transparent ',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
@@ -534,8 +687,8 @@
return {
padding: '7px 0',
textAlign: 'center',
- backgroundColor: '#000',
- color: '#fff',
+ backgroundColor: 'transparent ',
+ color: '#c7e7ff',
border: 'none',
fontSize: '18px'
}
@@ -549,8 +702,14 @@
$main_color: #09d8f2;
$color01: #00FFFF;
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+ background-color: transparent;
+}
+
.tableData {
- background: #000;
+ background: transparent;
}
.el-table::before {
@@ -661,39 +820,8 @@
border-radius: 50%;
}
-</style>
-
-<!--鏄熺┖-->
-<style lang="css" scoped>
-@keyframes rotate {
- 0% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
- }
- 100% {
- transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
- }
-}
-
-.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;
+::v-deep .el-table__body-wrapper::-webkit-scrollbar {
+ /* width: 0;瀹藉害涓�0鏆楄棌 */
+ width: 0;
}
</style>
--
Gitblit v1.9.3