From ec25f869fa5febe6f8bb030284518cc135a21987 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期二, 14 三月 2023 10:04:15 +0800
Subject: [PATCH] 1.看板样式修改
---
src/views/kb/zpcj.vue | 1069 ++++++--------
src/views/zzmx/chda.vue | 40
src/permission.js | 2
/dev/null | 1248 -----------------
src/views/kb/kbCommon.css | 57
src/views/jcsz/wldw.vue | 12
src/views/wlgl/ckdy.vue | 12
src/router/index.js | 24
src/utils/myEcharts.js | 1020 ++++++++++++++
src/views/kb/jgcj.vue | 660 +++++++++
10 files changed, 2,198 insertions(+), 1,946 deletions(-)
diff --git a/src/permission.js b/src/permission.js
index fd74217..b3b68b0 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', '/bzcj', '/dccj', '/zpcj', '/back'] // no redirect whitelist
+const whiteList = ['/login', '/jgcj','/zpcj'] // 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 3e3bdc9..ae3d440 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -35,33 +35,13 @@
* 鐪嬫澘閮ㄥ垎璺敱
* */
{
- path: '/zhkb',
- component: () => import('@/views/kb/zhkb'),
- hidden: true
- },
- {
- path: '/ckgl',
- component: () => import('@/views/kb/ckgl'),
- hidden: true
- },
- {
- path: '/cgdd',
- component: () => import('@/views/kb/cgdd'),
+ path: '/jgcj',
+ component: () => import('@/views/kb/jgcj'),
hidden: true
},
{
path: '/zpcj',
component: () => import('@/views/kb/zpcj'),
- hidden: true
- },
- {
- path: '/dccj',
- component: () => import('@/views/kb/dccj'),
- hidden: true
- },
- {
- path: '/bzcj',
- component: () => import('@/views/kb/bzcj'),
hidden: true
},
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index ac3560d..39b9c28 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -26,6 +26,9 @@
return myChart
}
+const colorX = '#c7e7ff'
+const colorY = '#7696c5'
+
// 绯荤粺棣栭〉鍥�
export function barTop(data, colorArr) {
var salvProName = ['x']
@@ -98,19 +101,19 @@
data: salvProValue
},
- {
- name: '鑳屾櫙',
- type: 'bar',
- barWidth: 15,
- barGap: '-100%',
- data: Value,
- itemStyle: {
- normal: {
- color: `rgba(${color[1]},0.8)`,
- barBorderRadius: 30
+ {
+ name: '鑳屾櫙',
+ type: 'bar',
+ barWidth: 15,
+ barGap: '-100%',
+ data: Value,
+ itemStyle: {
+ normal: {
+ color: `rgba(${color[1]},0.8)`,
+ barBorderRadius: 30
+ }
}
}
- }
]
}
@@ -372,6 +375,7 @@
// const myColor = ['#7af5f5', '#00FFFF', '#00FFFF', '#00FFFF', '#00FFFF']
const myColor = ['rgba(122,245,245,1)', 'rgba(122,245,245,0.95)', 'rgba(122,245,245,0.9)', 'rgba(122,245,245,0.85)', 'rgba(122,245,245,0.8)']
const option = {
+ animation: false,
backgroundColor: 'transparent',
title: {
show: false,
@@ -390,12 +394,13 @@
}
},
grid: {
- left: '10%',
- right: '5%',
+ left: '5%',
+ right: '10%',
bottom: '0%',
top: '10%',
containLabel: true
},
+ // animation: false, // 鍙栨秷鍔ㄧ敾
xAxis: {
show: false
},
@@ -418,7 +423,7 @@
color: function(value, index) {
return value === '0' ? 'transparent' : '#fff'
},
- fontSize: 18,
+ fontSize: 20,
// formatter: function(value, index) {
// return [
// '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
@@ -491,7 +496,7 @@
show: true,
position: 'right',
formatter: '{c}',
- fontSize: 14,
+ fontSize: 20,
color: '#fff'
// formatter: '{c}%',
}
@@ -788,3 +793,988 @@
}
return option
}
+
+// 鐪嬫澘澶撮儴鑳屾櫙鏉�
+export function kbTop() {
+ var getXY = ['瀛﹀墠鏁欒偛绯�'] // 鏁版嵁鐐瑰悕绉�
+ var getRS = [255] // 瀛︾敓婊℃剰搴�
+
+ var max = Math.ceil(255 / 10) * 10
+
+ const option = {
+ animation: false,
+ backgroundColor: 'transparent',
+ grid: {
+ left: '0%',
+ right: '0%',
+ bottom: '0%',
+ top: '0%'
+ // containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'value',
+ show: false,
+ axisLabel: {
+ margin: 5,
+ color: '#666666',
+ textStyle: {
+ fontSize: '13'
+ }
+ },
+ min: 0,
+ max: max, // 璁＄畻鏈�澶у��
+ interval: max / 5, // 骞冲潎鍒嗕负5浠�
+ splitNumber: 5,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#D1D1D1'
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#333333'
+ }
+ },
+ axisTick: {
+ show: false
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'category',
+ inverse: true,
+ show: false,
+ axisLabel: {
+ textStyle: {
+ color: '#6F84BD',
+ fontSize: '13'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#333333'
+ }
+ },
+ data: getXY
+ }
+ ],
+ series: [
+ {
+ name: '鍊�',
+ type: 'bar',
+ zlevel: 1,
+ xAxisIndex: 0,
+ label: {
+ show: false,
+ position: 'right',
+ color: '#6F84BD',
+ fontSize: 14,
+ offset: [10, 0]
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: [10, 10, 10, 10],
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
+ offset: 0,
+ color: '#91ddec' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#09d8f2' // 100% 澶勭殑棰滆壊
+ }], false)
+ }
+ },
+ barWidth: 15,
+ data: getRS
+ }
+ ]
+ }
+
+ return option
+}
+
+// 杞﹂棿璐ㄩ噺宸︿笅鍛ㄤ笉鑹�
+export function line02(dataX, dataY) {
+ return {
+ animation: false,
+ backgroundColor: 'transparent',
+ tooltip: {},
+ // title: {
+ // show: false,
+ // text: '璁㈠崟瀹屾垚鎬绘暟',
+ // left: '50%',
+ // top: '5%',
+ // textAlign: 'center',
+ // textStyle: {
+ // // color: '#fff',
+ // color: '#00ffff',
+ // fontSize: '20',
+ // fontWeight: 'bolder'
+ // }
+ // },
+ grid: {
+ left: '0%',
+ right: '2%',
+ bottom: '5%',
+ top: '8%',
+ containLabel: true
+ },
+ legend: {
+ show: false,
+ itemGap: 50,
+ data: ['娉ㄥ唽鎬婚噺', '鏈�鏂版敞鍐岄噺'],
+ textStyle: {
+ color: '#f9f9f9',
+ borderColor: '#fff'
+ }
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: true,
+ axisLabel: {
+ interval: 0,
+ formatter: '{value}',
+ fontSize: 18,
+ margin: 20,
+ textStyle: {
+ color: colorX
+ }
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#032c58'
+ }
+ },
+ axisTick: {
+ show: false
+ },
+ data: dataX
+ }],
+ yAxis: [
+ {
+ // max: 800,
+ boundaryGap: false,
+ splitNumber: 4,
+ type: 'value',
+ axisLabel: {
+ textStyle: {
+ fontSize: 18,
+ 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
+ }
+ }
+ ],
+ 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: {
+ color: '#fff',
+ fontSize: 16
+ }
+ },
+ 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: dataY
+ // 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)]
+ }
+ // {
+ // name: '鏈�鏂版敞鍐岄噺',
+ // type: 'bar',
+ // barWidth: 20,
+ // tooltip: {
+ // show: false
+ // },
+ // label: {
+ // show: true,
+ // position: 'top',
+ // textStyle: {
+ // color: '#fff',
+ // }
+ // },
+ // 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: [200, 382, 102, 267, 186, 315, 316]
+ // }
+ ]
+ }
+}
+
+// 杞﹂棿璐ㄩ噺鍙充笂 鏃ヤ笉鑹�
+export function bar04(resValueArr) {
+ // let data = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))//鏇挎崲鏁扮粍瀵硅薄涓殑閿悕
+
+ const data = [
+ {
+ name: '瑁呴厤涓�绾�',
+ value: resValueArr.find(i => i.eqp_name === '瑁呴厤涓�绾�') ? resValueArr.find(i => i.eqp_name === '瑁呴厤涓�绾�').cont : 0
+ },
+ {
+ name: '瑁呴厤浜岀嚎',
+ value: resValueArr.find(i => i.eqp_name === '瑁呴厤浜岀嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤浜岀嚎').cont : 0
+ },
+ {
+ name: '瑁呴厤涓夌嚎',
+ value: resValueArr.find(i => i.eqp_name === '瑁呴厤涓夌嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤涓夌嚎').cont : 0
+ },
+ {
+ name: '瑁呴厤鍥涚嚎',
+ value: resValueArr.find(i => i.eqp_name === '瑁呴厤鍥涚嚎') ? resValueArr.find(i => i.eqp_name === '瑁呴厤鍥涚嚎').cont : 0
+ }
+ ]
+ const getSymbolData = (data) => {
+ const arr = []
+ for (var i = 0; i < data.length; i++) {
+ arr.push({
+ value: data[i].value,
+ symbolPosition: 'end'
+ })
+ }
+ return arr
+ }
+
+ const option = {
+ animation: false,
+ backgroundColor: 'transparent',
+ grid: {
+ top: '0%',
+ bottom: 0,
+ right: '4%',
+ left: -20,
+ containLabel: true
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [{
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: data.map(r => r.name),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+
+ axisLabel: {
+ show: true,
+ interval: 0,
+ color: '#fff',
+ align: 'left',
+ margin: 60,
+ formatter: function(value, index) {
+ return '{title|' + value + '}'
+ },
+ rich: {
+ title: {
+ width: 50,
+ align: 'right',
+ fontSize: 20
+ }
+ }
+ }
+ }, {
+ triggerEvent: true,
+ show: true,
+ inverse: true,
+ data: data.map(r => r.name),
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ interval: 0,
+ shadowOffsetX: '-20px',
+ color: ['#fff'],
+ align: 'left',
+ verticalAlign: 'center',
+ lineHeight: 40,
+ fontSize: 20,
+ formatter: function(value, index) {
+ return data[index].value + ''
+ }
+
+ }
+ }],
+ series: [
+ {
+ name: 'XXX',
+ type: 'pictorialBar',
+ symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
+ // symbolSize: [50, 50],
+ symbolSize: function(params) {
+ return params === 0 ? [0, 0] : [50, 50]
+ },
+ symbolOffset: [20, 0],
+ z: 12,
+ itemStyle: {
+ normal: {
+ color: '#fff'
+ }
+ },
+ data: getSymbolData(data)
+ },
+ {
+ name: '鏉�',
+ type: 'bar',
+ showBackground: true,
+ // barBorderRadius: 30,
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 10,
+ // align: left,
+ itemStyle: {
+ normal: {
+ color: 'rgba(41, 162, 245, 1)',
+ barBorderRadius: 10
+ }
+ // color: '#A71A2B',
+ // barBorderRadius: 4,
+ }
+ // label: {
+ // normal: {
+ // color: '#fff',
+ // show: true,
+ // position: ["-80px", 0],
+ // textStyle: {
+ // fontSize: 16
+ // },
+ // formatter: function(a, b) {
+ // return a.name
+ // }
+ // }
+ // }
+ }]
+ }
+
+ return option
+}
+
+// 杞﹂棿璐ㄩ噺鍙充笅 鍛ㄤ笉鑹�
+export function pie02(resValueArr) {
+ const bgColor = 'transparent'
+ const title = '鎬讳笉鑹暟'
+ const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
+ const echartData = resValueArr.map(({ eqp_name, cont }) => ({ name: eqp_name, value: cont }))// 鏇挎崲鏁扮粍瀵硅薄涓殑閿悕
+ const formatNumber = function(num) {
+ const reg = /(?=(\B)(\d{3})+$)/g
+ return num.toString().replace(reg, ',')
+ }
+ const total = echartData.reduce((a, b) => {
+ return a + b.value * 1
+ }, 0)
+
+ const option = {
+ animation: false,
+ backgroundColor: bgColor,
+ color: color,
+ // tooltip: {
+ // trigger: 'item'
+ // },
+ title: [{
+ text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
+ top: 'center',
+ left: 'center',
+ textStyle: {
+ rich: {
+ name: {
+ fontSize: 22,
+ fontWeight: 'normal',
+ color: '#fff',
+ padding: [10, 0]
+ },
+ val: {
+ fontSize: 22,
+ fontWeight: 'bold',
+ color: '#fff'
+ }
+ }
+ }
+ }
+ // {
+ // text: '鍗曚綅锛氫釜',
+ // top: 20,
+ // left: 20,
+ // textStyle: {
+ // fontSize: 14,
+ // color: '#666666',
+ // fontWeight: 400
+ // }
+ // }
+ ],
+ // legend: {
+ // orient: 'vertical',
+ // icon: 'rect',
+ // x: '80%',
+ // y: 'center',
+ // itemWidth: 12,
+ // itemHeight: 12,
+ // align: 'left',
+ // textStyle: {
+ // rich: {
+ // name: {
+ // fontSize: 12
+ // },
+ // value: {
+ // fontSize: 16,
+ // padding: [0, 5, 0, 15]
+ // },
+ // unit: {
+ // fontSize: 12
+ // }
+ // }
+ // },
+ // formatter: function(name) {
+ // let res = echartData.filter(v => v.name === name);
+ // res = res[0] || {};
+ // let unit = res.unit || '';
+ // return '{name|' + name + '} {value|' + res.value + '}{unit|' + unit + '}'
+ // }
+ // // data: legendName
+ // },
+ series: [
+ {
+ type: 'pie',
+ radius: ['35%', '50%'],
+ center: ['50%', '50%'],
+ data: echartData,
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ borderColor: bgColor,
+ borderWidth: 2
+ }
+ },
+ labelLine: {
+ normal: {
+ // showAbove: false,
+ length: 20,
+ length2: 35,
+ lineStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ label: {
+ normal: {
+ formatter: params => {
+ return (
+ '{icon|鈼弣{name|' + params.name + '}{value|' +
+ formatNumber(params.value) + '}'
+ )
+ },
+ padding: [0, -50, 25, -50],
+ rich: {
+ icon: {
+ fontSize: 18,
+ color: 'red'
+ },
+ name: {
+ fontSize: 18,
+ padding: [0, 10, 0, 4],
+ color: '#fff'
+ },
+ value: {
+ fontSize: 18,
+ fontWeight: 'bold',
+ color: '#fff'
+ }
+ }
+ }
+ }
+ }]
+ }
+ return option
+}
+
+// 杞﹂棿鐢熶骇 鐢熶骇淇℃伅 鐢熶骇杩涘害 杩涘害鏉�
+export function progress(param1, param2) {
+// param1 鎶ュ伐鏁伴噺
+ // param2 浠诲姟鏁伴噺
+
+ // 鎷垮埌鏁版嵁涔嬪悗闇�瑕佽绠楀嚭鐩稿闀垮害 param2鐨勭浉瀵归暱搴︿负100
+ let relativeValue = ''// 鐩稿鍊� 缁胯壊鑳屾櫙
+
+ relativeValue = (param1 / param2) * 100
+ // 鐧惧垎姣旀暟鍊肩殑浣嶇疆
+ var position = 'right'
+ // if (param1 >= 50) {
+ // position = 'inside';
+ // } else if (param1 < 50) {
+ // position = 'right';
+ // }
+
+ var option = {
+ animation: false,
+ // animation: false, // 鍙栨秷鍔ㄧ敾
+ // animationDuration: 5000,
+ grid: {
+ top: 'center',
+ left: '0%',
+ right: '0%',
+ // height: '%',
+ // containLabel: false
+ containLabel: true
+
+ },
+ xAxis: {
+ type: 'value',
+ axisLabel: {
+ show: false
+ },
+ max: 100,
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: [{
+ type: 'category',
+ data: [],
+ axisLabel: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ z: 10
+ }, {
+ type: 'category',
+ axisLabel: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ data: []
+ }],
+ series: [{
+ name: '',
+ type: 'bar',
+ barWidth: '100%',
+ // barMaxWidth: '100%',
+ label: {
+ normal: {
+ show: true,
+ // position: ['24', '38%'],
+ position: (param1.toString() + param2.toString()).length <= 6 ? ['24', '38%'] : 'insideLeft',
+ // formatter: '{c} %',
+ formatter: param1 + '/' + param2,
+ textStyle: {
+ color: '#FFFFFF',
+ fontWeight: 'bold',
+ fontFamily: 'Microsoft YaHei',
+ fontSize: 18
+ }
+ }
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5,
+ shadowBlur: 10,
+ shadowColor: '#111',
+ color: '#2FD04F'
+ }
+ },
+ // data: [param1],
+ data: [relativeValue],
+ z: 10
+ }, {
+ type: 'bar',
+ barWidth: '100%',
+ yAxisIndex: 1,
+ silent: true,
+ // barMaxWidth: '100%',
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5,
+ color: '#42475B'
+ }
+ },
+ // data: [param2]
+ data: [100]
+ }]
+ }
+
+ return option
+}
+
+// 閲囪喘璁㈠崟
+export function cgddchart(data1, data2, data3) {
+ // 寰楀埌鏈�澶у�� 5鐨勫�嶆暟
+
+ let max = Math.max(Math.max(data1, data2), data3) + 5
+ if (max % 5 !== 0) {
+ max = 5 - max % 5 + max
+ }
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ formatter: '{a} <br/>{c} {b}'
+ },
+ series: [
+ {
+ name: '鏈湀閲囪喘璁㈠崟鏁�',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['17%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontFamily: 'Microsoft YaHei',
+ fontColor: '#FFF',
+ color: '#FFF',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ fontFamily: 'digital',
+ fontSize: 26,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+
+ formatter: function(value) {
+ return value
+ }
+ },
+ data: [{
+ value: data1,
+ name: '鏈湀閲囪喘璁㈠崟鏁�'
+ }]
+ },
+ {
+ name: '鏈湀鍒拌揣鍗曟暟',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['50%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontColor: '#FFF',
+ color: '#FFF',
+ fontFamily: 'Microsoft YaHei',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ // borderWidth: 1,
+ textBorderColor: '#000',
+ textBorderWidth: 1,
+ textShadowBlur: 1,
+ textShadowColor: colorY,
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 0,
+ paddingTop: 10,
+ fontFamily: 'digital',
+ fontSize: 20,
+ width: 30,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+ formatter: function(value) {
+ // console.info(value)
+ // return (value * 10 + '%')
+ return value
+ }
+ },
+ data: [{
+ value: data2,
+ name: '鏈湀鍒拌揣鍗曟暟'
+ }]
+ },
+ {
+ name: '鏈湀閲囪喘鍏ュ簱鍗曟暟',
+ type: 'gauge',
+ color: ['#f00'],
+ min: 0,
+ max: max,
+ splitNumber: 5,
+ radius: '70%',
+ center: ['83%', '48%'],
+ axisLine: { // 鍧愭爣杞寸嚎
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ width: 10,
+ color: [
+ [0.4, '#09d8f2'],
+ [1, '#00FFFFF']
+ ]
+ },
+ backgroundColor: 'none'
+ },
+ tooltip: {
+ show: false
+ },
+ axisTick: { // 鍧愭爣杞村皬鏍囪
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle鎺у埗绾挎潯鏍峰紡
+ color: 'auto'
+ }
+ },
+ splitLine: { // 鍒嗛殧绾�
+ length: 10, // 灞炴�ength鎺у埗绾块暱
+ lineStyle: { // 灞炴�ineStyle锛堣瑙乴ineStyle锛夋帶鍒剁嚎鏉℃牱寮�
+ color: colorY
+ }
+ },
+ axisLabel: {
+ borderRadius: 1,
+ // color: 'rgba(255,255,255,0.7)',
+ color: '#00FFFF',
+ padding: 1,
+ fontSize: 18
+ },
+ title: {
+ // 鍏朵綑灞炴�ч粯璁や娇鐢ㄥ叏灞�鏂囨湰鏍峰紡锛岃瑙乀EXTSTYLE
+ // fontWeight: 'bolder',
+ fontSize: 22,
+ fontColor: '#FFF',
+ color: '#FFF',
+ fontFamily: 'Microsoft YaHei',
+ paddingTop: 20,
+ offsetCenter: [0, '120%']
+ // fontStyle: 'italic'
+ },
+ itemStyle: {
+ // color: '#1092ff'
+ color: '#09d8f2'
+ },
+ detail: {
+ shadowOffsetX: 0,
+ shadowOffsetY: 0,
+ // borderWidth: 1,
+ textBorderColor: '#000',
+ textBorderWidth: 1,
+ textShadowBlur: 1,
+ textShadowColor: colorY,
+ textShadowOffsetX: 0,
+ textShadowOffsetY: 0,
+ paddingTop: 10,
+ fontFamily: 'digital',
+ fontSize: 20,
+ width: 30,
+ color: '#fff',
+ rich: {},
+ offsetCenter: [0, '90%'],
+ formatter: function(value) {
+ return value
+ }
+ },
+ data: [{
+ value: data3,
+ name: `鏈湀閲囪喘鍏ュ簱鍗曟暟`
+ }]
+ }
+
+ ]
+ }
+ return option
+}
diff --git a/src/views/jcsz/wldw.vue b/src/views/jcsz/wldw.vue
index 58da740..6ef62aa 100644
--- a/src/views/jcsz/wldw.vue
+++ b/src/views/jcsz/wldw.vue
@@ -5,12 +5,12 @@
<div class="bodyTopButtonGroup" style="justify-content: space-between">
<el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
<div style="display: flex">
- <el-button
- v-waves
- icon="el-icon-refresh-right"
- @click="syncSeaveSearchPartner"
- >鍚屾寰�鏉ュ崟浣�
- </el-button>
+<!-- <el-button-->
+<!-- v-waves-->
+<!-- icon="el-icon-refresh-right"-->
+<!-- @click="syncSeaveSearchPartner"-->
+<!-- >鍚屾寰�鏉ュ崟浣�-->
+<!-- </el-button>-->
<el-button v-waves icon="el-icon-download" @click="upload">瀵煎叆</el-button>
</div>
</div>
diff --git a/src/views/kb/bzcj.vue b/src/views/kb/bzcj.vue
deleted file mode 100644
index cdb18ff..0000000
--- a/src/views/kb/bzcj.vue
+++ /dev/null
@@ -1,843 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 鍖呰杞﹂棿鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
- <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_mt5">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ 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>
- </div>
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <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="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <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="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- 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="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- lineContent: [],
- lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: ['CJ003'], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } 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) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- // await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
- },
- // 浜х嚎鍔犲伐涓换鍔�
- 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
- this.ShopSearchLineTask = 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(this.ShopSearchLineTask)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
- if (this.tableData.length > 10) {
- clearInterval(this.TableDataRollTask)
- this.getTableDataRoll()
- }
- })
- }
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- getNowTime() {
- const dt = new Date()
- const wk = dt.getDay()
- const y = dt.getFullYear()
- const m = (dt.getMonth() + 1 + '').padStart(2, '0')
- const d = (dt.getDate() + '').padStart(2, '0')
-
- const hh = (dt.getHours() + '').padStart(2, '0')
- const mm = (dt.getMinutes() + '').padStart(2, '0')
- const ss = (dt.getSeconds() + '').padStart(2, '0')
- const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
- const week = weeks[wk]
-
- this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
- },
- headerCellStyle() {
- return {
- backgroundColor: 'rgb(30 ,33, 46)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- 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;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-}
-</style>
diff --git a/src/views/kb/cgdd.vue b/src/views/kb/cgdd.vue
deleted file mode 100644
index 3c48a08..0000000
--- a/src/views/kb/cgdd.vue
+++ /dev/null
@@ -1,594 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c" style="letter-spacing: 3px;margin-left: 1px;">
- 閲囪喘璺熻釜鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- style="top:100px"
- :speed="180"
- />
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top_block kb_pd10">
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseArrivalOrderCont }}</div>
- <div class="text">鏈湀閲囪喘璁㈠崟鏁�</div>
- </div>
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthPurchaseOrderCont }}</div>
- <div class="text">鏈湀鍒拌揣鍗曟暟</div>
- </div>
- <div class="content01">
- <div class="pic01" />
- <div class="number">{{ purchaseLeftTopData.ThisMonthWareHouseOrderCont }}</div>
- <div class="text">鏈湀閲囪喘鍏ュ簱鍗曟暟</div>
- <!-- <div id="pie01" ref="pie01" class="pie01" />-->
- <!-- <div class="text" style="margin-top: -10px">褰撴湀寤舵湡鍗犳瘮</div>-->
- </div>
-
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">閲囪喘鍒拌揣璺熻釜 <div style="margin-left: 30px">{{ number1 }} 鍗�</div></div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="588"
- >
- <!-- <el-table-column-->
- <!-- prop="RowNum"-->
- <!-- label="搴忓彿"-->
- <!-- width="53"-->
- <!-- />-->
-
- <el-table-column
- prop="PurchaseOrder"
- label="閲囪喘璁㈠崟"
- width="203"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.PurchaseOrder }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="suppername"
- label="渚涘簲鍟�"
- width="163"
- >
- <template slot-scope="{row}">
- <div v-if="row.suppername" class="ellipsis">{{ row.suppername }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <el-table-column
- prop="username"
- label="閲囪喘鍛�"
- width="78"
- >
- <template slot-scope="{row}">
- <div v-if="row.username">{{ row.username }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="partcode"-->
- <!-- label="浜у搧缂栫爜"-->
- <!-- width="108"-->
- <!-- />-->
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="175"
- >
- <template slot-scope="{row}">
- <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="partspec"-->
- <!-- label="瑙勬牸鍨嬪彿"-->
- <!-- width="130"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="quantity"
- label="璁㈠崟鏁伴噺"
- width="94"
- >
- <template slot-scope="{row}">
- <div v-if="row.quantity">{{ parseFloat(row.quantity) }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="checktype"
- label="妫�楠岀姸鎬�"
- width="94"
- >
- <template slot-scope="{row}">
- <div v-if="row.checktype===null">鏈楠�</div>
- <div v-else>宸叉楠�</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="checkuser"
- label="妫�楠屼汉鍛�"
- width="94"
- />
- <el-table-column
- prop="quantity1"
- label="宸叉敹鏁伴噺"
- width="94"
- >
- <template slot-scope="{row}">
- <div v-if="row.quantity1">{{ parseFloat(row.quantity1) }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <el-table-column
- label="鏈敹鏁伴噺"
- width="94"
- >
- <template slot-scope="{row}">
- <div v-if="row.quantity- row.quantity1">{{ parseFloat(row.quantity- row.quantity1) }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="acceptDate"
- label="棰勮浜ゆ湡"
- width="115"
- >
- <template slot-scope="{row}">
- <div v-if="row.acceptDate">{{ row.acceptDate.substring(0, 10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="warning"
- label="寤舵湡澶╂暟"
- width="114"
- >
- <template slot-scope="{row}">
- <div v-if="parseFloat(row.warning)<0" style="color: red">{{ Math.abs(parseFloat(row.warning)) }}</div>
- <div v-else-if="row.warning===null||row.warning===''||row.warning===0">0</div>
- <div v-else-if="parseFloat(row.warning)>3">{{ row.warning }}</div>
- <div v-else-if="parseFloat(row.warning)>0&&parseFloat(row.warning)<=3" style="color:yellow;">{{ row.warning }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">渚涘簲鍟嗗欢鏈熶氦璐ф帓琛�</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- :row-class-name="tableRowClassName"
- height="865"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="70"
- >
- <template slot-scope="{row}">
- <div>NO.{{ row.index }}</div>
- <!-- <div>NO.100</div>-->
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="cj"-->
- <!-- label="杞﹂棿"-->
- <!-- width="100"-->
- <!-- />-->
- <el-table-column
- prop="suppercode"
- label="渚涘簲鍟嗙紪鐮�"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.suppercode" class="ellipsis">{{ row.suppercode }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <el-table-column
- prop="suppername"
- width="283"
- label="渚涘簲鍟嗗悕绉�"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.suppername }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="cont"
- label="娆℃暟"
- width="50"
- />
- </el-table>
- </div>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts, pie01 } from '@/utils/myEcharts'
-import * as echarts from 'echarts'
-import { PurchaseLeftBottom, PurchaseLeftTop, PurchaseRight } from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- purchaseLeftTopData: [],
- tableData: [],
- tableDataRank: [],
-
- number1: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- PurchaseLeftTop: null,
- PurchaseLeftBottom: null,
- PurchaseRight: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getPurchaseLeftTop()
- this.getPurchaseLeftBottom()
- this.getPurchaseRight()
-
- // this.getMarqueeTipsContent()
- } 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) {
- this.getPurchaseLeftTop()
- this.getPurchaseLeftBottom()
- this.getPurchaseRight()
- // this.getMarqueeTipsContent()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.PurchaseLeftTop)
- clearInterval(this.PurchaseLeftBottom)
- clearInterval(this.PurchaseRight)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
-
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- // this.MarqueeTipsContent = '鍚勪綅鍛樺伐浠細鏍规嵁涓婄骇鐨勯�氱煡锛岀粨鍚堟垜浼佸疄闄呮儏鍐碉紝鐜板皢20xx骞寸殑鍏冩棪鏀惧亣閫氱煡濡備笅锛氫竴銆�1鏈�1鏃ヨ嚦1鏈�3鏃ユ斁鍋囪皟浼戯紝鍏�3澶┿��1鏈�4鏃ユ寮忎笂鐝�備簩銆佽妭鍋囨棩鏈熼棿锛屽悇鐝粍瑕佷弗鏍艰惤瀹炰笂绾х殑閲嶈鎸囩ず绮剧锛屾寜鐓т笂绾х殑鍏蜂綋瑕佹眰锛岃鐪熸姄濂借惤瀹炶妭鏃ユ湡闂村�肩彮澶囧嫟宸ヤ綔锛岀‘淇濊妭鏃ユ湡闂翠紒涓氬悇椤瑰伐浣滄甯歌繍杞�倄x浼佷笟20xx骞�12鏈�28鏃�'
- // const spance = ' '.padStart(this.MarqueeTipsContent.length * 2, ' ')
- // this.MarqueeTipsContent = this.MarqueeTipsContent + spance
- // this.speed = this.MarqueeTipsContent.length / 10
- },
- getPurchaseLeftTop() {
- PurchaseLeftTop().then(res => {
- this.purchaseLeftTopData = res.data[0]
- // console.log(this.purchaseLeftTopData)
- })
- this.PurchaseLeftTop = setInterval(() => {
- PurchaseLeftTop().then(res => {
- this.purchaseLeftTopData = res.data[0]
- })
- }, 1000 * 6)
- },
- getPurchaseLeftBottom() {
- PurchaseLeftBottom().then(res => {
- this.tableData = res.data
- this.number1 = this.tableData.length
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.PurchaseLeftBottom = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- PurchaseLeftBottom().then(res => {
- this.tableData = res.data
- this.number1 = this.tableData.length
- if (this.tableData.length > 14) {
- clearInterval(this.PurchaseLeftBottom)
- this.getPurchaseLeftBottom()
- }
- })
- }
- }, this.tableData.length <= 14 ? 1000 * 3 : 100)
- })
- },
- getPurchaseRight() {
- PurchaseRight().then(res => {
- this.tableDataRank = res.data
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.PurchaseRight = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- PurchaseRight().then(res => {
- this.tableDataRank = res.data
- if (this.tableDataRank.length > 21) {
- clearInterval(this.PurchaseRight)
- this.getPurchaseRight()
- }
- })
- }
- }, this.tableDataRank.length <= 21 ? 1000 * 3 : 100)
- })
- },
-
- tableRowClassName({ row, rowIndex }) {
- // 鎶婃瘡涓�琛岀殑绱㈠紩鏀捐繘row
- row.index = rowIndex + 1
- },
- // 鑾峰彇echarts
- // getEcharts() {
- // loadEcharts('pie01', pie01())
- //
- // // setInterval(() => {
- // // loadEcharts('pie01', pie01())
- // // }, 5000)
- // },
-
- // 鑾峰彇褰撳墠鏃堕棿
- getNowTime() {
- const dt = new Date()
- const wk = dt.getDay()
- const y = dt.getFullYear()
- const m = (dt.getMonth() + 1 + '').padStart(2, '0')
- const d = (dt.getDate() + '').padStart(2, '0')
-
- const hh = (dt.getHours() + '').padStart(2, '0')
- const mm = (dt.getMinutes() + '').padStart(2, '0')
- const ss = (dt.getSeconds() + '').padStart(2, '0')
- const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
- const week = weeks[wk]
-
- this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
- },
- headerCellStyle() {
- return {
- backgroundColor: 'rgb(30 ,33, 46)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
- }
-}
-</script>
-
-<style scoped lang="scss">
-//$kbBorderColor: #09d8f2;
-$kbBorderColor: rgba(9,216,242,0.4);
-
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- background-color: #000;
- letter-spacing: 2px;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top {
- height: 345px;
- display: flex;
- flex-direction: column;
- //justify-content: space-around;
- justify-content: flex-end;
-
- .kb_left_top_block {
- width: 100%;
- height: 237px;
- display: flex;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- justify-content: space-around;
- background-color: rgba(30, 33, 46,0.6);
-
- .content01 {
- margin: auto;
- position: relative;
- width: 202px;
- text-align: center;
-
- .pic01 {
- height: 145px;
- background: url("../../assets/images/pic01.png");
- }
-
- //.pie01{
- // height: 200px;
- // width: 200px;
- // margin-top: -30px;
- //}
-
- .number {
- margin-top: -50px;
- font-size: 18px;
- font-size: 20px;
- }
-
- .text{
- margin-top: 50px;
- font-size: 20px;
- }
- }
- }
-
- }
-
- .kb_left_bottom {
- height: 645px;
-
- .kb_left_bottom_content {
- height: 610px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- color: #00ffff;
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- height: 906px;
- margin-top: 58px;
- width: 100%;
-
- .kb_right_top_content {
- height: 100%;
- display: flex;
- flex-direction: column;
-
- .content_head {
- color: #00ffff;
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-</style>
diff --git a/src/views/kb/ckgl.vue b/src/views/kb/ckgl.vue
deleted file mode 100644
index 3d04319..0000000
--- a/src/views/kb/ckgl.vue
+++ /dev/null
@@ -1,630 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 浠撳簱绠＄悊鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- style="top:90px"
- :speed="180"
- />
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top_block" style="margin-top: 10px">
- <div class="headTitle kb_title_text">浜у搧寰呭叆搴� <div style="margin-left: 30px">{{ number1 }} 鍗�</div></div>
- <div class="content">
- <el-table
- ref="tableDataTopRef"
- :data="tableDataTop"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="400"
- >
- <el-table-column
- prop="voucherdate"
- label="鍗曟嵁鏃ユ湡"
- width="140"
- >
- <template slot-scope="{row}">
- <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
- <div v-else />
- </template>
- </el-table-column>
- <el-table-column
- prop="wo"
- label="鍗曟嵁缂栧彿"
- width="189"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wo }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wkshp_name"
- label="鐢熶骇杞﹂棿"
- width="105"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wkshp_name }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="200"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <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_name"
- label="浜у搧鍚嶇О"
- width="180"
- >
- <template slot-scope="{row}">
- <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="stck_name"
- label="棰勫叆浠撳簱"
- width="100"
- >
- <template slot-scope="{row}">
- <div v-if="row.stck_name" class="ellipsis">{{ row.stck_name }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="quantity"
- label="鏁伴噺"
- width="63"
- />
- <el-table-column
- prop="totalStockInQuantity"
- label="宸插叆搴撴暟閲�"
- width="100"
- >
- <template slot-scope="{row}">
- <div v-if="row.totalStockInQuantity">{{ row.totalStockInQuantity }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="uomname"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <!-- <el-table-column-->
- <!-- prop="preStartDate"-->
- <!-- label="棰勮寮�宸�"-->
- <!-- width="100"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.preStartDate">{{ row.preStartDate.substring(0, 10) }}</div>-->
- <!-- <div v-else />-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="preFinishDate"
- label="棰勮鍏ュ簱"
- width="140"
- >
- <template slot-scope="{row}">
- <div v-if="row.preFinishDate">{{ row.preFinishDate.substring(0, 10) }}</div>
- <div v-else />
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- <div class="kb_left_top_block" style="margin-top: 25px">
- <div class="headTitle kb_title_text">浜у搧寰呭彂璐� <div style="margin-left: 30px">{{ number2 }} 鍗�</div></div>
- <div class="content">
- <el-table
- ref="tableDataBottomRef"
- :data="tableDataBottom"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="voucherdate"
- label="鍗曟嵁鏃ユ湡"
- width="140"
- >
- <template slot-scope="{row}">
- <div v-if="row.voucherdate" class="ellipsis">{{ row.voucherdate.substring(0, 10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo"
- label="鍗曟嵁缂栧彿"
- width="228"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.wo }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="customename"
- label="瀹㈡埛"
- width="345"
- >
- <template slot-scope="{row}">
- <div v-if="row.customename" class="ellipsis">{{ row.customename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="username"-->
- <!-- label="涓氬姟鍛�"-->
- <!-- width="65"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.username" class="ellipsis">{{ row.username }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="SourceVoucherCode"-->
- <!-- label="鏉ユ簮鍗曞彿"-->
- <!-- width="185"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.SourceVoucherCode" class="ellipsis">{{ row.SourceVoucherCode }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="materiel_code"-->
- <!-- label="浜у搧缂栧彿"-->
- <!-- width="96"-->
- <!-- />-->
- <el-table-column
- prop="materiel_name"
- label="浜у搧鍚嶇О"
- width="200"
- >
- <template slot-scope="{row}">
- <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="quantity"
- label="鏁伴噺"
- width="130"
- >
- <template slot-scope="{row}">
- <div class="ellipsis">{{ row.quantity }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOutQuantity"
- label="宸插彂璐ф暟閲�"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOutQuantity" class="ellipsis">{{ row.saleOutQuantity }}</div>
- <div v-else>0</div>
- </template>
- </el-table-column>
- <!-- <el-table-column-->
- <!-- prop="priuserdefnvc1"-->
- <!-- label="妫�楠屾柟寮�"-->
- <!-- width="110"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.priuserdefnvc1">{{ row.priuserdefnvc1 }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="priuserdefnvc2"-->
- <!-- label="妫�楠屼汉鍛�"-->
- <!-- width="110"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.priuserdefnvc2">{{ row.priuserdefnvc2 }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <el-table-column
- prop="deliveryDate"
- label="棰勮浜よ揣鏃ユ湡"
- width="180"
- >
- <template slot-scope="{row}">
- <div v-if="row.deliveryDate">{{ row.deliveryDate.substring(0,10) }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text" style="margin-top: 30px;">鍗婃垚鍝併�佷骇鍝佸簱瀛橀噺鎺掕Top5</div>
- <div class="content_body" style="height:402px;">
- <div id="bar03" style="width: 100%;height:100%" />
- </div>
- <!-- <div class="content_head kb_title_text" style="margin-top: 12px">鍗婃垚鍝佸簱瀛橀噺鎺掕Top5</div>-->
- <div class="content_head kb_title_text" style="margin-top: 12px">鍘熸潗鏂欏簱瀛橀噺鎺掕Top5</div>
- <div class="content_body">
- <div id="bar04" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- WareHouseRightBottomData,
- WareHouseRightTopData,
- WareHouseTopBottomData,
- WareHouseTopLeftData
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
- tableDataTop: [],
- tableDataBottom: [],
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- tableTopTask: null,
- tableBottomTask: null,
- echartsRightTop: null,
- echartsRightBottom: null
-
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getWareHouseTopLeftData()
- this.getWareHouseTopBottomData()
- this.getEcharts()
- // this.getMarqueeTipsContent()
- } 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) {
- this.getWareHouseTopLeftData()
- this.getWareHouseTopBottomData()
- this.getEcharts()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.tableTopTask)
- clearInterval(this.tableBottomTask)
- clearInterval(this.echartsRightTop)
- clearInterval(this.echartsRightBottom)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
-
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- // this.MarqueeTipsContent = '鍚勪綅鍛樺伐浠細鏍规嵁涓婄骇鐨勯�氱煡锛岀粨鍚堟垜浼佸疄闄呮儏鍐碉紝鐜板皢20xx骞寸殑鍏冩棪鏀惧亣閫氱煡濡備笅锛氫竴銆�1鏈�1鏃ヨ嚦1鏈�3鏃ユ斁鍋囪皟浼戯紝鍏�3澶┿��1鏈�4鏃ユ寮忎笂鐝�備簩銆佽妭鍋囨棩鏈熼棿锛屽悇鐝粍瑕佷弗鏍艰惤瀹炰笂绾х殑閲嶈鎸囩ず绮剧锛屾寜鐓т笂绾х殑鍏蜂綋瑕佹眰锛岃鐪熸姄濂借惤瀹炶妭鏃ユ湡闂村�肩彮澶囧嫟宸ヤ綔锛岀‘淇濊妭鏃ユ湡闂翠紒涓氬悇椤瑰伐浣滄甯歌繍杞�倄x浼佷笟20xx骞�12鏈�28鏃�'
- // const spance = ' '.padStart(this.MarqueeTipsContent.length * 2, ' ')
- // this.MarqueeTipsContent = this.MarqueeTipsContent + spance
- // this.speed = this.MarqueeTipsContent.length / 10
- },
- // 鑾峰彇宸︿笂table鏁版嵁
- getWareHouseTopLeftData() {
- WareHouseTopLeftData().then(res => {
- this.tableDataTop = res.data
- this.number1 = this.tableDataTop.length
- const divData = this.$refs.tableDataTopRef.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.tableTopTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- WareHouseTopLeftData().then(res => {
- this.tableDataTop = res.data
- this.number1 = this.tableDataTop.length
- if (this.tableDataTop.length > 9) {
- clearInterval(this.tableTopTask)
- this.getWareHouseTopLeftData()
- }
- })
- }
- }, this.tableDataTop.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇宸︿笅table鏁版嵁
- getWareHouseTopBottomData() {
- WareHouseTopBottomData().then(res => {
- this.tableDataBottom = res.data
- this.number2 = this.tableDataBottom.length
- const divData = this.$refs.tableDataBottomRef.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- // const task = setInterval(() => {
- this.tableBottomTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- WareHouseTopBottomData().then(res => {
- this.tableDataBottom = res.data
- this.number2 = this.tableDataBottom.length
- if (this.tableDataBottom.length > 10) {
- clearInterval(this.tableBottomTask)
- this.getWareHouseTopBottomData()
- }
- })
- }
- }, this.tableDataBottom.length <= 10 ? 1000 * 3 : 100)
- })
- },
-
- // 鑾峰彇echarts
- getEcharts() {
- WareHouseRightTopData().then(res => {
- loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
-
- WareHouseRightBottomData().then(res => {
- loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
-
- this.echartsRightTop = setInterval(() => {
- WareHouseRightTopData().then(res => {
- loadEcharts('bar03', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
- }, 1000 * 15)
-
- this.echartsRightBottom = setInterval(() => {
- WareHouseRightBottomData().then(res => {
- loadEcharts('bar04', bar02(res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.CanuseBaseQuantity), res.data.filter(i => i.CanuseBaseQuantity > 0).map(i => i.materiel_name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- getNowTime() {
- const dt = new Date()
- const wk = dt.getDay()
- const y = dt.getFullYear()
- const m = (dt.getMonth() + 1 + '').padStart(2, '0')
- const d = (dt.getDate() + '').padStart(2, '0')
-
- const hh = (dt.getHours() + '').padStart(2, '0')
- const mm = (dt.getMinutes() + '').padStart(2, '0')
- const ss = (dt.getSeconds() + '').padStart(2, '0')
- const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
- const week = weeks[wk]
-
- this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
- },
- headerCellStyle() {
- return {
- backgroundColor: 'rgb(30 ,33, 46)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
- }
-}
-</script>
-
-<style scoped lang="scss">
-//$kbBorderColor: #09d8f2;
-$kbBorderColor: rgba(9,216,242,0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- background-color: #000;
- letter-spacing: 2px;
-
- .kb_left {
- width: 1380px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top {
- height:880px;
- margin-top: 40px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
-
- .kb_left_top_block {
- width: 100%;
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .headTitle {
- //line-height: 54px;
- //border-bottom: 1px solid rgba(255, 255, 255, 0.6);
- //text-align: center;
- //font-size: 26px;
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- display: flex;
- color: #00ffff;
-
- }
-
- .content {
- border: 1px solid $kbBorderColor;
- }
- }
-
- }
-
- }
-
- .kb_right {
- width: 540px;
- height: 100%;
-
- .kb_right_top {
- height: 972px;
- width: 100%;
-
- .kb_right_top_content {
- height: 100%;
- display: flex;
- flex-direction: column;
-
- .content_head {
- line-height: 20px;
- //font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- height: 443px;
- border: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
-
- }
- }
- }
-
- }
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- //font-size: 16px;
- font-size: 18px;
-}
-</style>
diff --git a/src/views/kb/dccj.vue b/src/views/kb/dccj.vue
deleted file mode 100644
index 047a598..0000000
--- a/src/views/kb/dccj.vue
+++ /dev/null
@@ -1,843 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 鐢垫睜杞﹂棿鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
- <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_mt5">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ 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>
- </div>
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <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="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <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="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- 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="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- lineContent: [],
- lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: ['CJ002'], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } 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) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- // await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
- },
- // 浜х嚎鍔犲伐涓换鍔�
- 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
- this.ShopSearchLineTask = 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(this.ShopSearchLineTask)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
- if (this.tableData.length > 10) {
- clearInterval(this.TableDataRollTask)
- this.getTableDataRoll()
- }
- })
- }
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- getNowTime() {
- const dt = new Date()
- const wk = dt.getDay()
- const y = dt.getFullYear()
- const m = (dt.getMonth() + 1 + '').padStart(2, '0')
- const d = (dt.getDate() + '').padStart(2, '0')
-
- const hh = (dt.getHours() + '').padStart(2, '0')
- const mm = (dt.getMinutes() + '').padStart(2, '0')
- const ss = (dt.getSeconds() + '').padStart(2, '0')
- const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
- const week = weeks[wk]
-
- this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
- },
- headerCellStyle() {
- return {
- backgroundColor: 'rgb(30 ,33, 46)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- 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;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-}
-</style>
diff --git a/src/views/kb/jgcj.vue b/src/views/kb/jgcj.vue
new file mode 100644
index 0000000..e8947d8
--- /dev/null
+++ b/src/views/kb/jgcj.vue
@@ -0,0 +1,660 @@
+<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_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>
+ <div class="kb_headTime">
+ <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 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>
+ </div>
+ </div>
+
+ </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" 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"
+ />
+
+ <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-->
+
+ <!-- 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>
+ </div>
+ <!-- 鍙宠竟-->
+ <div style="width: 450px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="drwg" 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>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="top5" class="svg_class"/>
+ 涓�鍛ㄤ笉鑹疶op5
+ </div>
+ <div class="lineContent horn">
+ <div id="bar01" class="flex_c_c" style="width: 100%;height:100%"/>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import './kbCommon.css'
+import {bar02, kbTop, loadEcharts} from '@/utils/myEcharts'
+import {
+ LineSearchBottomLeftData,
+ LineSearchBottomRightData,
+ LineSearchTopLeftData,
+ LineSearchTopRightData,
+ ShopSearch
+} from '@/api/dzkb'
+import {parseTime} from '@/utils'
+
+export default {
+ name: 'Cjsc',
+ data() {
+ return {
+ headTime: '',
+ tableDataRightTop: [],
+ tableDataRightTopTemp: [],
+ tableDataLeftBottom: [],
+ tableDataLeftBottomTemp: [],
+ lineContent3: [],
+ ShopArr: ['101'], // 杞﹂棿缂栫爜鏁扮粍 //閲戝伐杞﹂棿
+
+ starsCount: 800, // 鏄熸槦鏁伴噺
+ distance: 900 // 闂磋窛
+
+ }
+ },
+ created() {
+ setInterval(this.getNowTime, 1000)
+
+ // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
+ setInterval(() => {
+ window.location.reload()
+ }, 1000 * 60 * 120)
+ },
+ mounted() {
+ this.getTopBar()
+
+ this.getShopSearch()
+ this.setStarsRef()
+ },
+ methods: {
+ 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()
+ // }
+ // }
+ // 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)
+ if (nowLoop === loop) {
+ clearInterval(timer)
+ this.getLeftBottomData()
+ }
+
+ nowLoop++
+ }, 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))
+ })
+
+ 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))
+ })
+ }, 1000 * 10)
+ },
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
+ },
+ // 鑾峰彇褰撳墠鏃堕棿
+ getNowTime() {
+ const dt = new Date()
+ const wk = dt.getDay()
+ const y = dt.getFullYear()
+ const m = (dt.getMonth() + 1 + '').padStart(2, '0')
+ const d = (dt.getDate() + '').padStart(2, '0')
+
+ const hh = (dt.getHours() + '').padStart(2, '0')
+ const mm = (dt.getMinutes() + '').padStart(2, '0')
+ const ss = (dt.getSeconds() + '').padStart(2, '0')
+ const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
+ const week = weeks[wk]
+
+ this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
+ },
+ headerCellStyle() {
+ return {
+ backgroundColor: '#000',
+ padding: '10px 0',
+ textAlign: 'center',
+ color: '#07acc2',
+ border: 'none',
+ fontSize: '18px'
+ }
+ },
+ cellStyle() {
+ return {
+ padding: '7px 0',
+ textAlign: 'center',
+ backgroundColor: '#000',
+ color: '#fff',
+ border: 'none',
+ fontSize: '18px'
+ }
+ }
+ }
+
+}
+</script>
+
+<style lang="scss" scoped>
+$main_color: #09d8f2;
+$color01: #00FFFF;
+
+.tableData {
+ background: #000;
+}
+
+.el-table::before {
+ height: 0;
+}
+
+.el-table__empty-text {
+ color: $main_color;
+}
+
+.kb_left_top_block {
+ width: 100%;
+ height: 143px;
+ display: flex;
+ font-size: 16px;
+ border-bottom: 1px solid $main_color;
+ justify-content: flex-start;
+
+ .kb_block02 {
+ width: 304px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid $main_color;
+ }
+
+ .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;
+}
+
+.circleYellow {
+ width: 26px;
+ height: 26px;
+ background-color: rgb(255 255 0);
+ 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;
+}
+</style>
diff --git a/src/views/kb/kbCommon.css b/src/views/kb/kbCommon.css
index 1e65115..c6b66c0 100644
--- a/src/views/kb/kbCommon.css
+++ b/src/views/kb/kbCommon.css
@@ -10,6 +10,8 @@
color: #fff;
background-size: 1920px 1080px;
/*background: url("../../assets/images/kb_bg.png") no-repeat;*/
+
+ overflow: hidden;
}
.kb_header {
@@ -67,6 +69,12 @@
justify-content: space-evenly;
/*align-content: center;*/
}
+.flex_c_b {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-content: space-between;
+}
.flex_e_c {
display: flex;
@@ -88,8 +96,8 @@
margin-top: 10px;
}
-.kb_mt5 {
- margin-top: 5px;
+.kb_mt10 {
+ margin-top: 10px;
}
/*鍏憡鏍峰紡*/
.MarqueeTipsContentClass {
@@ -114,3 +122,48 @@
/*}*/
/*scrollbar END*/
+
+
+.smallTitle{
+ height: 35px;
+ display: flex;
+ color: #00ffff;
+ font-size: 26px;
+ /*align-content: flex-start;*/
+}
+
+.svg_class{
+ margin-right: 10px;
+ font-size: 28px;
+}
+
+
+
+.lineContent {
+ height: 435px;
+ border: 1px solid #09d8f2;
+ border-radius: 5px;
+ padding: 2px;
+ box-shadow: #00FFFF 0 0 10px;
+}
+
+.lineContentCenter {
+ height: 935px;
+ border: 1px solid #09d8f2;
+ border-radius: 5px;
+ padding: 2px;
+ box-shadow: #00FFFF 0 0 10px;
+}
+
+.horn {
+ background: linear-gradient(#00FFFF, #00FFFF) left top,
+ linear-gradient(#00FFFF, #00FFFF) left top,
+ linear-gradient(#00FFFF, #00FFFF) right top,
+ linear-gradient(#00FFFF, #00FFFF) right top,
+ linear-gradient(#00FFFF, #00FFFF) left bottom,
+ linear-gradient(#00FFFF, #00FFFF) left bottom,
+ linear-gradient(#00FFFF, #00FFFF) right bottom,
+ linear-gradient(#00FFFF, #00FFFF) right bottom;
+ background-repeat: no-repeat;
+ background-size: 2px 20px, 20px 2px;
+}
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
deleted file mode 100644
index 1e27266..0000000
--- a/src/views/kb/zhkb.vue
+++ /dev/null
@@ -1,843 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 杞﹂棿缁煎悎鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
- <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_mt5">
- 鍔犲伐鍗曞彿:{{ item.workcode }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ item.partname }}
- </div>
- <div class="kb_mt5">
- 浠诲姟鏁伴噺:{{ 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>
- </div>
- </div>
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <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="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <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="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- 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="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
-} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
-
-export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
- data() {
- return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
- headTime: '',
-
- lineContent: [],
- lineContent3: [],
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
-
- ShopArr: [], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
-
- // 涓ゅ皬鏃剁湅鏉垮埛鏂颁竴娆�
- setInterval(() => {
- window.location.reload()
- }, 1000 * 60 * 120)
- },
- mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
- },
- methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } 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) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
- })
- },
- // 鑾峰彇杞﹂棿缂栫爜
- async getShopSearch() {
- const res1 = await ShopSearch()
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
- },
- // 浜х嚎鍔犲伐涓换鍔�
- 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
- this.ShopSearchLineTask = 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(this.ShopSearchLineTask)
- this.getShopSearchLine()
- }
- this.lineContent3 = this.lineContent.slice(start, start + 3)
- start = start + 3
- }, 1000 * 3)
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
- if (this.tableData.length > 10) {
- clearInterval(this.TableDataRollTask)
- this.getTableDataRoll()
- }
- })
- }
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- getNowTime() {
- const dt = new Date()
- const wk = dt.getDay()
- const y = dt.getFullYear()
- const m = (dt.getMonth() + 1 + '').padStart(2, '0')
- const d = (dt.getDate() + '').padStart(2, '0')
-
- const hh = (dt.getHours() + '').padStart(2, '0')
- const mm = (dt.getMinutes() + '').padStart(2, '0')
- const ss = (dt.getSeconds() + '').padStart(2, '0')
- const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
- const week = weeks[wk]
-
- this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
- },
- headerCellStyle() {
- return {
- backgroundColor: 'rgb(30 ,33, 46)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- 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;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
-}
-
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-}
-</style>
diff --git a/src/views/kb/zhkb_back.vue b/src/views/kb/zhkb_back.vue
deleted file mode 100644
index d24b679..0000000
--- a/src/views/kb/zhkb_back.vue
+++ /dev/null
@@ -1,1248 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header">
- <div class="flex_c_c kb_header_text">
- 澶у矝杞﹂棿缁煎悎鐪嬫澘
- </div>
- <div class="kb_headerPic" />
- <div class="kb_headTime">
- <span>{{ headTime }}</span>
- </div>
- </div>
-
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- </div>
-
- <div class="kb_left_top kb_pd10">
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent01.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent01.children !== undefined ? lineContent01.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent01.linename }}</div>-->
- <!-- <div v-if="lineContent01.children!==undefined" class="kb_mt10">{{ lineContent01.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent01.children !== undefined ? lineContent01.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent01.children !== undefined ? lineContent01.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent01.children !== undefined ? lineContent01.children.partname : '' }}
- </div>
-
- <div v-if="lineContent01.children&&lineContent01.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent01.children? parseFloat(lineContent01.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent01.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent01.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent01.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent01.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <!-- 234-->
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent02.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent02.children !== undefined ? lineContent02.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent02.linename }}</div>-->
- <!-- <div v-if="lineContent02.children!==undefined" class="kb_mt10">{{ lineContent02.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent02.children !== undefined ? lineContent02.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent02.children !== undefined ? lineContent02.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent02.children !== undefined ? lineContent02.children.partname : '' }}
- </div>
- <div v-if="lineContent02.children&&lineContent02.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent02.children ? parseFloat(lineContent02.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent02.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent02.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent02.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent02.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent03.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent03.children !== undefined ? lineContent03.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent03.linename }}</div>-->
- <!-- <div v-if="lineContent03.children!==undefined" class="kb_mt10">{{ lineContent03.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent03.children !== undefined ? lineContent03.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent03.children !== undefined ? lineContent03.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent03.children !== undefined ? lineContent03.children.partname : '' }}
- </div>
- <div v-if="lineContent03.children&&lineContent03.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent03.children ? parseFloat(lineContent03.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent03.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent03.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent03.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent03.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- <div class="kb_left_top_block">
- <div class="kb_block01 kb_pd10">
- <div>
- <div>浜х嚎鍚嶇О:{{ lineContent04.linename }}</div>
- <div class="kb_mt10">浜х嚎鎬婚噺:{{
- lineContent04.children !== undefined ? lineContent04.lineworkcont : ''
- }}
- </div>
- </div>
- <div>
- <!-- <div>{{ lineContent04.linename }}</div>-->
- <!-- <div v-if="lineContent04.children!==undefined" class="kb_mt10">{{ lineContent04.lineworkcont }}</div>-->
- </div>
- </div>
- <div class="kb_block02 kb_pd10">
- <div>
- <div>閿�鍞崟鍙�:{{ lineContent04.children !== undefined ? lineContent04.children.saleordercode : '' }}</div>
- <div class="kb_mt5">
- 鍔犲伐鍗曞彿:{{ lineContent04.children !== undefined ? lineContent04.children.workcode : '' }}
- </div>
- <div class="kb_mt5">
- 浜у搧鍚嶇О:{{ lineContent04.children !== undefined ? lineContent04.children.partname : '' }}
- </div>
- <div v-if="lineContent04.children&&lineContent04.children.length===0" class="kb_mt5">
- 浠诲姟鏁伴噺:
- </div>
- <div v-else class="kb_mt5">
- 浠诲姟鏁伴噺:{{ lineContent04.children ? parseFloat(lineContent04.children.qty) : '' }}
- </div>
- </div>
-
- </div>
- <div class="kb_block03 kb_pd10 ">
- <div v-if="lineContent04.children!==undefined" class="flex_s_c">
- <div
- v-for="item in lineContent04.children.children"
- :key="item.stepseq"
- class="kb_block03_content flex_c_c"
- >
- <div>
- <div class="content01">{{ item.stepname }}</div>
- </div>
- <div class="content02Parent">
- <div class="content02">
- <div class="content02_1 ">浠诲姟</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.planqty) }}</div>
- </div>
- <div class="content02">
- <div class="content02_1 ">鍚堟牸</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.goodqty) }}</div>
- </div>
- <div class="content02" style="border-right: 0">
- <div class="content02_1 ">涓嶈壇</div>
- <div class="content02_2 borderTop ">{{ parseFloat(item.ngqty) }}</div>
- </div>
- </div>
- </div>
- </div>
- <div v-if="lineContent04.children!==undefined" class="kb_block03_02 flex_s_c">
- <div
- v-for="item in lineContent04.children.children"
- :key="item.stepseq"
- class="kb_block03_02_content flex_c_c"
- >
- <div class="flex_c_c content01">
- <div
- v-if="item.status==='START'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: blue;"
- />
- <div
- v-else-if="item.status==='ALLO'&&(parseFloat(item.ngqty)===0||item.ngqty==='')&&(parseFloat(item.goodqty)===0||item.goodqty==='')"
- class="circle"
- style="background-color: rgb(255 255 255)"
- />
- <div
- v-else-if="parseFloat(item.ngqty)+parseFloat(item.goodqty)>=parseFloat(item.planqty)"
- class="circle"
- />
- <div v-else class="circleYellow" />
- </div>
- </div>
- </div>
-
- </div>
- </div>
-
- </div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟</div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="40"
- />
- <el-table-column
- prop="status"
- label="鍔犲伐鐘舵��"
- width="70"
- >
- <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="95"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="158"
- >
- <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="170"
- />
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="145"
- />
- <el-table-column
- prop="partspec"
- label="瑙勬牸"
- width="130"
- >
- <template slot-scope="{row}">
- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="name"
- label="鍗曚綅"
- width="50"
- />
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="70"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="70"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="70"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="50"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="95"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="105"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
- </div>
- </div>
- </div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="426"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- />
- <el-table-column
- prop="partname"
- width="138"
- label="浜у搧"
- />
- <el-table-column
- prop="good_qty"
- label="鏁伴噺"
- width="100"
- />
- </el-table>
- </div>
- </div>
- </div>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
- 涓�鍛ㄤ笉鑹疶op5
- </div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
-import {
- LineSearchBottomLeftData,
- LineSearchBottomRightData,
- LineSearchTopLeftData,
- LineSearchTopRightData,
- ShopSearchLine
-} from '@/api/dzkb'
-
-export default {
- name: 'Index2',
- data() {
- return {
- headTime: '',
-
- lineArr: [],
- // lineContent01: {},
- lineContent01: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent02: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent03: {
- linename: '',
- lineworkcont: '',
- children: undefined
- },
- lineContent04: {
- linename: '',
- lineworkcont: '',
- children: undefined
- // children: {
- // workcode: '',
- // partname: '',
- // qty: 0,
- // saleordercode: '',
- // children: [
- // {
- // stepseq: '',
- // stepname: '',
- // planqty: 0,
- // goodqty: '',
- // ngqty: ''
- // }
- // ]
- // }
- },
-
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: []
-
- }
- },
-
- created() {
- setInterval(this.getNowTime, 1000)
- },
- mounted() {
- this.getValue()
- },
- methods: {
- async getValue() {
- await this.getShopSearchLine()
- await this.getLineSearchTopLeftData()
-
- this.getEcharts()
- this.getTableDataRoll()
- this.getTableDataRankRoll()
- },
- // 鐢熶骇浜х嚎
- async getShopSearchLine() {
- const { data: res } = await ShopSearchLine({ shopcode: 'CJ001' })
- this.lineArr = res
- },
-
- getLineSearchTopLeftData() {
- this.lineArr.forEach((item, index) => {
- if (index <= 3) {
- this.handleEveryLine(item, index)
- this.lineCodeArr.push(item.code)
- }
- })
- },
- // 澶勭悊姣忎竴鏉′骇绾�
- async handleEveryLine(item, index) {
- const res = await LineSearchTopLeftData([item])
-
- let res1, res2, res3, res4
- if (res.data[0].linecode === this.lineCodeArr[0]) {
- res1 = res
- }
- if (res.data[0].linecode === this.lineCodeArr[1]) {
- res2 = res
- }
- if (res.data[0].linecode === this.lineCodeArr[2]) {
- res3 = res
- }
- if (res.data[0].linecode === this.lineCodeArr[3]) {
- res4 = res
- }
-
- let flag1 = true
- let flag2 = true
- let flag3 = true
- let flag4 = true
- if (index === 0) {
- let count = 0
- if (flag1) {
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res.data[0].children[count] : []
- }
- flag1 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res1.data[0].children[count] : []
- }
- }
- console.log(res1.data[0].children === null, 999)
- if (res1.data[0].children === null) {
- res1.data[0].children = []
- }
- if (this.lineContent01.children === undefined || res1.data[0].children.length >= 0) {
- LineSearchTopLeftData([item]).then(res => {
- res1 = res
- })
- }
- if (res1.data[0].children.length === count++) {
- count = 0
- this.lineContent01 = {
- linename: res1.data[0].linename,
- lineworkcont: res1.data[0].lineworkcont,
- children: res1.data[0].children ? res1.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 1) {
- let count = 0
- if (flag2) {
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- flag2 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- }
- if (res2.data[0].children === null) {
- res2.data[0].children = []
- }
- if (this.lineContent02.children === undefined || res2.data[0].children.length >= 0) {
- LineSearchTopLeftData([item]).then(res => {
- res2 = res
- })
- }
- if (res2.data[0].children.length === count++) {
- count = 0
- this.lineContent02 = {
- linename: res2.data[0].linename,
- lineworkcont: res2.data[0].lineworkcont,
- children: res2.data[0].children ? res2.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 2) {
- let count = 0
- if (flag3) {
- this.lineContent03 = {
- linename: res3.data[0].linename,
- lineworkcont: res3.data[0].lineworkcont,
- children: res3.data[0].children ? res3.data[0].children[count] : []
- }
- flag3 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent03 = {
- linename: res3.data[0].linename,
- lineworkcont: res3.data[0].lineworkcont,
- children: res3.data[0].children ? res3.data[0].children[count] : []
- }
- }
-
- if (res3.data[0].children === null) {
- res3.data[0].children = []
- }
-
- if (this.lineContent03.children === undefined || res3.data[0].children.length >= 0) {
- LineSearchTopLeftData([item]).then(res => {
- res3 = res
- })
- }
-
- if (res3.data[0].children.length === count++) {
- count = 0
- this.lineContent03 = {
- linename: res3.data[0].linename,
- lineworkcont: res3.data[0].lineworkcont,
- children: res3.data[0].children ? res3.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- } else if (index === 3) {
- let count = 0
- if (flag4) {
- this.lineContent04 = {
- linename: res4.data[0].linename,
- lineworkcont: res4.data[0].lineworkcont,
- children: res4.data[0].children ? res4.data[0].children[count] : []
- }
- flag4 = false
- }
- setInterval(() => {
- if (count > 0) {
- this.lineContent04 = {
- linename: res4.data[0].linename,
- lineworkcont: res4.data[0].lineworkcont,
- children: res4.data[0].children ? res4.data[0].children[count] : []
- }
- }
-
- if (res4.data[0].children === null) {
- res4.data[0].children = []
- }
-
- if (res4.data[0].children.length === count || this.lineContent04.children === undefined) {
- LineSearchTopLeftData([item]).then(res => {
- res4 = res
- })
- }
-
- if (res4.data[0].children.length === count++) {
- count = 0
- this.lineContent04 = {
- linename: res4.data[0].linename,
- lineworkcont: res4.data[0].lineworkcont,
- children: res4.data[0].children ? res4.data[0].children[count] : []
- }
- }
- }, 1000 * 3)
- }
- },
-
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData().then(res => {
- this.tableData = res.data
-
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- const task = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData().then(res => {
- this.tableData = res.data
- if (this.tableData.length > 10) {
- clearInterval(task)
- this.getTableDataRoll()
- }
- })
- }
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
- LineSearchTopRightData().then(res => {
- this.tableDataRank = res.data
-
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- const task = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData().then(res => {
- this.tableDataRank = res.data
-
- if (this.tableDataRank.length > 10) {
- clearInterval(task)
- this.getTableDataRankRoll()
- }
- })
- }
- }, this.tableDataRank.length <= 10 ? 1000 * 3 : 100)
- })
- },
- // 鑾峰彇echarts
- getEcharts() {
- LineSearchBottomRightData().then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
-
- setInterval(() => {
- LineSearchBottomRightData().then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
- })
- }, 1000 * 15)
- },
- // 鑾峰彇褰撳墠鏃堕棿
- getNowTime() {
- const dt = new Date()
- const wk = dt.getDay()
- const y = dt.getFullYear()
- const m = (dt.getMonth() + 1 + '').padStart(2, '0')
- const d = (dt.getDate() + '').padStart(2, '0')
-
- const hh = (dt.getHours() + '').padStart(2, '0')
- const mm = (dt.getMinutes() + '').padStart(2, '0')
- const ss = (dt.getSeconds() + '').padStart(2, '0')
- const weeks = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�']
- const week = weeks[wk]
-
- this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
- },
- headerCellStyle() {
- return {
- backgroundColor: 'rgb(30 ,33, 46)',
- padding: '10px 0',
- textAlign: 'center',
- color: '#07acc2',
- border: 'none'
- }
- },
- cellStyle() {
- return {
- padding: '8px 0',
- textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
- color: '#fff',
- border: 'none'
- }
- }
-
- }
-}
-</script>
-
-<style scoped lang="scss">
-//$kbBorderColor: #3A0088;
-//$kbBorderColor: #09d8f2;
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- //background-color: #000;
- letter-spacing: 2px;
- //color: #d8d7d9;
- color: #fff;
-
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 10px;
- left: 15px;
- font-size: 18px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 30px;
-
- .kb_left_top_block {
- margin-top: 10px;
- width: 100%;
- height: 100px;
- display: flex;
- border-radius: 5px;
- font-size: 14px;
- //border: 1px solid rgba(255, 255, 255, 0.6);
- border: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block01 {
- width: 171px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
- border-bottom-left-radius: 5px;
- border-top-left-radius: 5px;
-
- }
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- background-color: $kbBackgroundColor;
- }
-
- .kb_block03 {
- width: 843px;
- display: flex;
- flex-direction: column;
- font-size: 12px;
- background-color: $kbBackgroundColor;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 152px;
- height: 50px;
- margin-right: 15px;
- //margin-right: 20px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- //width: 50px;
- width: 100%;
- height: 20px;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 50px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 50%;
- }
-
- .content02_2 {
- height: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- display: flex;
-
- .kb_block03_02_content {
- width: 152px;
- margin-right: 15px;
-
- .content01 {
- .circle {
- width: 26px;
- height: 26px;
- background-color: #00ff8b;
- border-radius: 50%;
- }
-
- }
-
- }
- }
-
- }
-
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
- //border: 1px solid $kbBorderColor;
-
- .content_head {
- ////font-size: 26px;
- //font-size: 18px;
- //height: 55px;
- //line-height: 55px;
- ////border-bottom: 1px solid $kbBorderColor;
- ////text-align: center;
- //padding-left: 10px;
-
- font-size: 18px;
- line-height: 20px;
- //padding-left: 10px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- //border: 1px solid $kbBorderColor;
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- font-size: 18px;
- line-height: 20px;
- //padding-left: 10px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- //border-radius: 5px;
- }
- }
- }
-
- .kb_right_bottom {
- height: 481px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- font-size: 18px;
- margin-bottom: 10px;
- margin-top: -10px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 440px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- //height: 100%;
- }
- }
- }
-}
-
-::v-deep .el-table::before {
- height: 0;
-}
-
-::v-deep .el-table__body-wrapper {
- //background-color: #044563;
- background-color: rgba(30, 33, 46);
-}
-
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
-}
-
-::v-deep .cell {
- padding: 0 !important;
-}
-
-//
-///* 瀹氫箟keyframes鍔ㄧ敾锛屽懡鍚嶄负blink*/
-//@keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-///*娣诲姞鍏煎鎬у墠缂�*/
-//@-webkit-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-o-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-moz-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-//@-ms-keyframes blink {
-// 0% {
-// opacity: 1
-// }
-// 100% {
-// opacity: 0
-// }
-//}
-//
-.circleYellow {
- width: 26px;
- height: 26px;
- background-color: rgb(255 255 0);
- border-radius: 50%;
-
- //animation: blink 2s linear infinite;
- //-webkit-animation: blink 2s linear infinite;
- //-moz-animation: blink 2s linear infinite;
- //-ms-animation: blink 2s linear infinite;
- //-o-animation: blink 2s linear infinite;
-}
-</style>
diff --git a/src/views/kb/zpcj.vue b/src/views/kb/zpcj.vue
index 91b0a6f..73f10ad 100644
--- a/src/views/kb/zpcj.vue
+++ b/src/views/kb/zpcj.vue
@@ -1,44 +1,41 @@
<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_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>
- <div class="kb_headerPic" />
<div class="kb_headTime">
<span>{{ headTime }}</span>
</div>
</div>
- <MarqueeTips
- :content="MarqueeTipsContent"
- class="MarqueeTipsContentClass"
- :speed="180"
- />
- <!-- :speed="speed"-->
- <div class="kb_content">
- <div class="kb_left">
- <!-- 1-->
- <div class="kb_left_top_title01 kb_title_text">
- <!-- <div class="PG01" />-->
- <!-- <svg-icon icon-class="sccx" />-->
- 浜х嚎鍔犲伐涓换鍔�
- <div style="margin-left: 30px">{{ number1 }} 鍗�</div>
- </div>
-
- <div class="kb_left_top kb_pd10">
- <div class="kb_left_top02">
+ <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 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_mt5">
+ <div>閿�鍞鍗�:{{ item.saleordercode }}</div>
+ <div class="kb_mt10">
鍔犲伐鍗曞彿:{{ item.workcode }}
</div>
- <div class="kb_mt5">
+ <div class="kb_mt10">
浜у搧鍚嶇О:{{ item.partname }}
</div>
- <div class="kb_mt5">
+ <div class="kb_mt10">
浠诲姟鏁伴噺:{{ parseFloat(item.qty) }}
</div>
</div>
@@ -90,7 +87,7 @@
v-else-if="parseFloat(it.ngqty)+parseFloat(it.goodqty)>=parseFloat(it.planqty)"
class="circle"
/>
- <div v-else class="circleYellow" />
+ <div v-else class="circleYellow"/>
</div>
</div>
</div>
@@ -98,205 +95,179 @@
</div>
</div>
</div>
+
</div>
- <!-- 2-->
- <div class="kb_left_bottom kb_pd10">
- <div class="kb_left_bottom_content">
- <div class="content_head kb_title_text">浜х嚎鍔犲伐浠诲姟
- <div style="margin-left: 30px">{{ number2 }} 鍗�</div>
- </div>
- <div class="content_body">
- <el-table
- ref="tableData"
- :data="tableData"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="440"
- >
- <el-table-column
- prop="RowNum"
- label="搴忓彿"
- width="50"
- />
- <!-- label="鍔犲伐鐘舵��"-->
- <el-table-column
- prop="status"
- label="鐘舵��"
- width="65"
- >
- <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="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.lm_date.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="saleOrderCode"
- label="閿�鍞鍗曞彿"
- width="178"
- >
- <template slot-scope="{row}">
- <div v-if="row.saleOrderCode" class="ellipsis">{{ row.saleOrderCode }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="wo_code"
- label="鍔犲伐鍗曞彿"
- width="205"
- >
- <template slot-scope="{row}">
- <div v-if="row.wo_code" class="ellipsis">{{ row.wo_code }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- label="浜у搧鍚嶇О"
- width="150"
- >
- <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="partspec"-->
- <!-- label="瑙勬牸"-->
- <!-- width="125"-->
- <!-- >-->
- <!-- <template slot-scope="{row}">-->
- <!-- <div v-if="row.partspec" class="ellipsis">{{ row.partspec }}</div>-->
- <!-- <div v-else>/</div>-->
- <!-- </template>-->
- <!-- </el-table-column>-->
- <!-- <el-table-column-->
- <!-- prop="name"-->
- <!-- label="鍗曚綅"-->
- <!-- width="50"-->
- <!-- />-->
- <el-table-column
- prop="plan_qty"
- label="浠诲姟鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="good_qty"
- label="瀹屽伐鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="ng_qty"
- label="涓嶈壇鏁伴噺"
- width="85"
- />
- <el-table-column
- prop="wcl"
- label="瀹屾垚鐜�"
- width="60"
- >
- <template slot-scope="{row}">
- <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planenddate"
- label="棰勮寮�濮�"
- width="115"
- >
- <template slot-scope="{row}">
- <div>{{ row.planenddate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="planstartdate"
- label="棰勮缁撴潫"
- width="125"
- >
- <template slot-scope="{row}">
- <div>{{ row.planstartdate.substring(0, 10) }}</div>
- </template>
- </el-table-column>
- </el-table>
- </div>
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="cxmc" 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"
+ />
+
+ <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-->
+
+ <!-- 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>
</div>
- <div class="kb_right kb_pd10">
- <div class="kb_right_top kb_pd10">
- <div class="kb_right_top_content">
- <div class="content_head kb_title_text">褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕</div>
- <div class="content_body">
- <el-table
- ref="tableDataRank"
- :data="tableDataRank"
- class="tableDataRank"
- style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
- height="396"
- >
- <el-table-column
- type="index"
- label="搴忓彿"
- width="55"
- />
- <el-table-column
- prop="wkshname"
- label="杞﹂棿锛堜緵鏂癸級"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshname" class="ellipsis">{{ row.wkshname }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="linename"
- label="浜х嚎"
- width="120"
- >
- <template slot-scope="{row}">
- <div v-if="row.linename" class="ellipsis">{{ row.linename }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
- <el-table-column
- prop="partname"
- width="138"
- 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="100"
- />
- </el-table>
- </div>
+ <!-- 鍙宠竟-->
+ <div style="width: 450px;height: 969px;" class="flex_c_b">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="drwg" 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>
- <div class="kb_right_bottom kb_pd10">
- <div class="kb_right_bottom_content_title kb_title_text">
+ <div>
+ <div class="smallTitle">
+ <svg-icon icon-class="top5" class="svg_class"/>
涓�鍛ㄤ笉鑹疶op5
</div>
- <div class="kb_right_bottom_content">
- <div id="bar02" style="width: 100%;height:100%" />
+ <div class="lineContent horn">
+ <div id="bar01" class="flex_c_c" style="width: 100%;height:100%"/>
</div>
+
</div>
</div>
</div>
@@ -306,52 +277,33 @@
<script>
import './kbCommon.css'
-import { bar02, loadEcharts } from '@/utils/myEcharts'
+import {bar02, kbTop, loadEcharts} from '@/utils/myEcharts'
import {
LineSearchBottomLeftData,
LineSearchBottomRightData,
LineSearchTopLeftData,
- LineSearchTopRightData, ShopSearch, WkspReportNotice
+ LineSearchTopRightData,
+ ShopSearch
} from '@/api/dzkb'
-import MarqueeTips from 'vue-marquee-tips'
+import {parseTime} from '@/utils'
export default {
- name: 'Index2',
- components: {
- MarqueeTips
- },
+ name: 'Cjsc',
data() {
return {
-
- onLine: navigator.onLine, // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
-
headTime: '',
-
- lineContent: [],
+ tableDataRightTop: [],
+ tableDataRightTopTemp: [],
+ tableDataLeftBottom: [],
+ tableDataLeftBottomTemp: [],
lineContent3: [],
+ ShopArr: ['102'], // 杞﹂棿缂栫爜鏁扮粍 瑁呴厤杞﹂棿
- leftTopData: [],
- tableData: [],
- tableDataRank: [],
- lineCodeArr: [],
+ starsCount: 800, // 鏄熸槦鏁伴噺
+ distance: 900 // 闂磋窛
- ShopArr: ['CJ001'], // 杞﹂棿缂栫爜鏁扮粍
-
- number1: '',
- number2: '',
-
- MarqueeTipsContent: '', // 鍏憡
- speed: 100, // 鍏憡鎾斁鐨勯�熷害
-
- MarqueeTipsTask: null,
- ShopSearchTask: null,
- ShopSearchLineTask: null,
- TableDataRollTask: null,
- TableDataRankRollTask: null,
- EchartsTask: null
}
},
-
created() {
setInterval(this.getNowTime, 1000)
@@ -361,116 +313,70 @@
}, 1000 * 60 * 120)
},
mounted() {
- // 鐩戝惉缃戠粶鏄惁鍦ㄧ嚎
- window.addEventListener('online', this.updateOnlineStatus)
- window.addEventListener('offline', this.updateOnlineStatus)
- this.updateOnlineStatus({ type: this.onLine ? 'online' : 'offline', isFirst: true })
- },
- beforeDestroy() {
- window.removeEventListener('online', this.updateOnlineStatus)
- window.removeEventListener('offline', this.updateOnlineStatus)
+ this.getTopBar()
+
+ this.getShopSearch()
+ this.setStarsRef()
},
methods: {
- // 鏇存柊缃戠粶鐘舵��
- updateOnlineStatus(e) {
- if (e.isFirst) {
- this.getValue()// 鑾峰彇鍊�
- } 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) {
- this.getValue()
- loading.close()
- this.$message.success('缃戠粶杩炴帴鎴愬姛锛�')
- } else {
- clearInterval(this.MarqueeTipsTask)
- clearInterval(this.ShopSearchTask)
- clearInterval(this.ShopSearchLineTask)
- clearInterval(this.TableDataRollTask)
- clearInterval(this.TableDataRankRollTask)
- clearInterval(this.EchartsTask)
- this.$message.error('缃戠粶鎺夌嚎锛岃鍏虫敞缃戠粶鐘舵�侊紒')
- }
- }
- },
- // 鑾峰彇鍊�
- async getValue() {
- // await this.getShopSearch()
- await this.getShopSearchLine()
-
- await this.getEcharts()
- await this.getTableDataRoll()
- await this.getTableDataRankRoll()
- await this.getMarqueeTipsContent()
- await this.getMarqueeTipsContent()
- },
- // 鑾峰彇鍏憡
- getMarqueeTipsContent() {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res => {
- let contentAll = ''
- res.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
-
- this.MarqueeTipsTask = setInterval(() => {
- WkspReportNotice({ shopcode: this.ShopArr.join(',') }).then(res1 => {
- let contentAll = ''
- res1.data.forEach(item => {
- contentAll += item.contents + ' '.padStart(item.contents.toString().length * 2, ' ')
- })
- this.MarqueeTipsContent = contentAll
- this.speed = this.MarqueeTipsContent.length / 10
- })
- // }, this.speed * 1000)
- }, 1000 * 60 * 5)
+ 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)
- })
- }
- setInterval(() => {
- this.ShopSearchTask = ShopSearch().then(res1 => {
- if (res1.code === '200') {
- this.ShopArr = []
- res1.data.forEach(item => {
- this.ShopArr.push(item.org_code)
- })
- }
- })
- }, 1000 * 30)
+ // 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()
+ // }
+ // }
+ // 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 => {
+ 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
- this.ShopSearchLineTask = setInterval(() => {
+ const timer = setInterval(() => {
if (Math.floor(start / 3) === count && count !== 0) {
start = 0
- LineSearchTopLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
+ LineSearchTopLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
this.lineContent = res.data
length = this.lineContent.length
count = Math.ceil(length / 3) // 闇�瑕佽疆鎾殑缁勬暟 3涓负涓�缁�
@@ -479,80 +385,85 @@
this.number1 = this.lineContent.length
})
} else if (count === 0) {
- clearInterval(this.ShopSearchLineTask)
+ clearInterval(timer)
this.getShopSearchLine()
}
this.lineContent3 = this.lineContent.slice(start, start + 3)
start = start + 3
- }, 1000 * 3)
+ }, 1000 * 10)
},
- // 浜х嚎鍔犲伐浠诲姟
- getTableDataRoll() {
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
+ // 鑾峰彇鍙充笂鏁版嵁 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
+ getRightRightData() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
- const divData = this.$refs.tableData.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 1
- // divData.scrollTop += divData.scrollHeight / this.tableData.length
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableData = res.data
- this.number2 = this.tableData.length
- if (this.tableData.length > 10) {
- clearInterval(this.TableDataRollTask)
- this.getTableDataRoll()
- }
- })
+ 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()
}
- }, this.tableData.length <= 10 ? 1000 * 3 : 100)
+
+ nowLoop++
+ }, 1000 * 10)
})
},
- // 褰撴棩瀹屽伐浜у搧鏁伴噺鎺掕
- getTableDataRankRoll() {
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
+ // 浜х嚎鍔犲伐浠诲姟 宸︿笅鏁版嵁
+ getLeftBottomData() {
+ let startValue = 0 // 鍒濆鍊�
+ const scale = 10// 鍒诲害
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- this.TableDataRankRollTask = setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- // divData.scrollTop += divData.scrollHeight / this.tableDataRank.length
- divData.scrollTop += 1
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- LineSearchTopRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- this.tableDataRank = res.data
+ LineSearchBottomLeftData({shopcode: this.ShopArr.join(',')}).then(res => {
+ this.tableDataLeftBottomTemp = res.data
+ this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale)
- if (this.tableDataRank.length > 9) {
- clearInterval(this.TableDataRankRollTask)
- this.getTableDataRankRoll()
- }
- })
+ 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)
+ if (nowLoop === loop) {
+ clearInterval(timer)
+ this.getLeftBottomData()
}
- }, this.tableDataRank.length <= 9 ? 1000 * 3 : 100)
+
+ nowLoop++
+ }, 1000 * 10)
})
},
- // 鑾峰彇echarts
+
getEcharts() {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
+ 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))
})
- this.EchartsTask = setInterval(() => {
- LineSearchBottomRightData({ shopcode: this.ShopArr.join(',') }).then(res => {
- loadEcharts('bar02', bar02(res.data.map(i => i.cont), res.data.map(i => i.name)))
+ 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))
})
- }, 1000 * 15)
+ }, 1000 * 10)
+ },
+ // 鑾峰彇topEcharts
+ getTopBar() {
+ loadEcharts('topBarLeft', kbTop())
+ loadEcharts('topBarRight', kbTop())
},
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
@@ -572,266 +483,136 @@
},
headerCellStyle() {
return {
- backgroundColor: 'rgb(30 ,33, 46)',
+ backgroundColor: '#000',
padding: '10px 0',
textAlign: 'center',
color: '#07acc2',
- border: 'none'
+ border: 'none',
+ fontSize: '18px'
}
},
cellStyle() {
return {
- padding: '8px 0',
+ padding: '7px 0',
textAlign: 'center',
- backgroundColor: 'rgba(30, 33, 46 )',
- // backgroundColor: 'transparent',
+ backgroundColor: '#000',
color: '#fff',
- border: 'none'
+ border: 'none',
+ fontSize: '18px'
}
}
-
}
+
}
</script>
-<style scoped lang="scss">
-$kbBorderColor: rgba(9, 216, 242, 0.4);
-$kbBackgroundColor: rgba(30, 33, 46, 0.6);
-.kb_content {
- display: flex;
- position: relative;
- height: 990px;
- width: 100%;
- letter-spacing: 2px;
- color: #fff;
+<style lang="scss" scoped>
+$main_color: #09d8f2;
+$color01: #00FFFF;
- .kb_left {
- width: 1345px;
- height: 100%;
- padding-left: 5px;
-
- .kb_left_top_title01 {
- position: absolute;
- top: 37px;
- left: 15px;
- display: flex;
- color: #00ffff;
-
- .PG01 {
- background: url("../../assets/images/GP_1.png") no-repeat;
- width: 28px;
- height: 12px;
- margin-top: 4px;
- margin-right: 10px;
- }
- }
-
- .kb_left_top {
- height: 495px;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- padding-top: 70px;
-
- .kb_left_top02 {
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- border: 1px solid $kbBorderColor;
- height: 400px;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
-
- .kb_left_top_block {
- width: 100%;
- height: 133px;
- display: flex;
- font-size: 17px;
- border-bottom: 1px solid $kbBorderColor;
- justify-content: flex-start;
-
- .kb_block02 {
- width: 304px;
- display: flex;
- align-items: center;
- border-right: 1px solid $kbBorderColor;
- }
-
- .kb_block03 {
- width: 1020px;
- font-size: 17px;
- display: flex;
- flex-direction: column;
- //font-size: 12px;
- border-radius: 5px;
-
- .kb_block03_content {
- border: 1px solid $kbBorderColor;
- width: 180px;
- height: 80px;
- margin-right: 15px;
- display: flex;
- flex-direction: column;
-
- .content01 {
- height: 30px;
- width: 100%;
- border-bottom: 1px solid $kbBorderColor;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .content02Parent {
- display: flex;
-
- .content02 {
- width: 60px;
- border-right: 1px solid $kbBorderColor;
-
- .content02_1 {
- display: flex;
- align-items: center;
- justify-content: center;
- //height: 50%;
- height: 25px;
- }
-
- .content02_2 {
- height: 25px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
-
- .borderTop {
- border-top: 1px solid $kbBorderColor;
- }
- }
- }
-
- }
- }
-
- .kb_block03_02 {
- margin-top: 7px;
- 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;
- }
- }
- }
-
- .kb_left_bottom {
- height: 495px;
-
- .kb_left_bottom_content {
- height: 460px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- display: flex;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
-
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
- }
-
- .kb_right {
- width: 575px;
- height: 100%;
-
- .kb_right_top {
- margin-top: 30px;
- margin-bottom: -30px;
- height: 476px;
- width: 100%;
-
- .kb_right_top_content {
- height: 430px;
- display: flex;
- flex-direction: column;
-
- .content_head {
- //font-size: 18px;
- line-height: 20px;
- margin-bottom: 10px;
- margin-top: -10px;
- color: #00ffff;
- }
-
- .content_body {
- border: 1px solid $kbBorderColor;
- }
- }
- }
-
- .kb_right_bottom {
- height: 482px;
- margin-top: 8px;
-
- .kb_right_bottom_content_title {
- color: #00ffff;
- margin-bottom: 5px;
- margin-top: -12px;
- }
-
- .kb_right_bottom_content {
- border: 1px solid $kbBorderColor;
- height: 441px;
- width: 100%;
- border-radius: 5px;
- background-color: $kbBackgroundColor;
- }
- }
- }
+.tableData {
+ background: #000;
}
-::v-deep .el-table::before {
+.el-table::before {
height: 0;
}
-::v-deep .el-table__body-wrapper {
- background-color: rgba(30, 33, 46);
+.el-table__empty-text {
+ color: $main_color;
}
-::v-deep .el-table__body-wrapper::-webkit-scrollbar {
- /* width: 0;瀹藉害涓�0鏆楄棌 */
- width: 0;
+.kb_left_top_block {
+ width: 100%;
+ height: 143px;
+ display: flex;
+ font-size: 16px;
+ border-bottom: 1px solid $main_color;
+ justify-content: flex-start;
+
+ .kb_block02 {
+ width: 304px;
+ display: flex;
+ align-items: center;
+ border-right: 1px solid $main_color;
+ }
+
+ .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%;
+ }
+ }
+ }
+ }
}
-::v-deep .cell {
- padding: 0 !important;
- font-size: 18px;
+.kb_left_top_block:nth-child(3n) {
+ border-bottom: none !important;
}
.circleYellow {
@@ -840,4 +621,40 @@
background-color: rgb(255 255 0);
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;
+}
</style>
diff --git a/src/views/wlgl/ckdy.vue b/src/views/wlgl/ckdy.vue
index d3642d2..a457ecb 100644
--- a/src/views/wlgl/ckdy.vue
+++ b/src/views/wlgl/ckdy.vue
@@ -5,12 +5,12 @@
<div class="bodyTopButtonGroup" style="justify-content: space-between">
<el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
<div style="display: flex">
- <el-button
- v-waves
- icon="el-icon-refresh-right"
- @click="syncSeaveSearchWhareHouseLocation"
- >鍚屾浠撳簱/搴撲綅
- </el-button>
+<!-- <el-button-->
+<!-- v-waves-->
+<!-- icon="el-icon-refresh-right"-->
+<!-- @click="syncSeaveSearchWhareHouseLocation"-->
+<!-- >鍚屾浠撳簱/搴撲綅-->
+<!-- </el-button>-->
<el-button v-waves icon="el-icon-download" @click="upload">瀵煎叆</el-button>
</div>
diff --git a/src/views/zzmx/chda.vue b/src/views/zzmx/chda.vue
index 70b7f0a..0266620 100644
--- a/src/views/zzmx/chda.vue
+++ b/src/views/zzmx/chda.vue
@@ -6,26 +6,26 @@
<el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">鏂板</el-button>
<!-- <el-button v-waves type="primary" icon="el-icon-office-building" @click="office">鍗曚綅</el-button>-->
- <div style="display: flex">
- <el-button
- v-waves
- icon="el-icon-refresh-right"
- @click="syncSeaveSearchUnit"
- >鍚屾璁￠噺鍗曚綅
- </el-button>
- <el-button
- v-waves
- icon="el-icon-refresh-right"
- @click="syncInventoryFileSelect"
- >鍚屾瀛樿揣妗ｆ
- </el-button>
- <el-button
- v-waves
- icon="el-icon-refresh-right"
- @click="syncStockTypeSelect"
- >鍚屾瀛樿揣绫诲瀷
- </el-button>
- </div>
+<!-- <div style="display: flex">-->
+<!-- <el-button-->
+<!-- v-waves-->
+<!-- icon="el-icon-refresh-right"-->
+<!-- @click="syncSeaveSearchUnit"-->
+<!-- >鍚屾璁￠噺鍗曚綅-->
+<!-- </el-button>-->
+<!-- <el-button-->
+<!-- v-waves-->
+<!-- icon="el-icon-refresh-right"-->
+<!-- @click="syncInventoryFileSelect"-->
+<!-- >鍚屾瀛樿揣妗ｆ-->
+<!-- </el-button>-->
+<!-- <el-button-->
+<!-- v-waves-->
+<!-- icon="el-icon-refresh-right"-->
+<!-- @click="syncStockTypeSelect"-->
+<!-- >鍚屾瀛樿揣绫诲瀷-->
+<!-- </el-button>-->
+<!-- </div>-->
<!-- <el-button v-waves type="primary" icon="el-icon-upload2" @click="upload">瀵煎叆</el-button>-->
</div>
--
Gitblit v1.9.3