From 3032fc5c1b188a820c7546da5b92a6b8d415f23a Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期一, 01 八月 2022 17:08:49 +0800
Subject: [PATCH] 1.综合看板 对接接口实现部分数据渲染
---
src/views/kb/zhkb.vue | 470 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 235 insertions(+), 235 deletions(-)
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index fe881e8..46f82a0 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -16,6 +16,7 @@
<!-- 1-->
<div class="kb_left_top_title01">鐢熶骇浜х嚎锛�</div>
<div class="kb_left_top kb_pd10">
+ <!-- <div v-for="(item,index) in lineContent" :key="item[index].linecode" class="kb_left_top_block">-->
<div class="kb_left_top_block">
<div class="kb_block01 kb_pd10">
<div>
@@ -23,7 +24,7 @@
<div class="kb_mt10">浜х嚎鎬婚噺:</div>
</div>
<div>
- <div>閿傜數浜х嚎</div>
+ <div>閿傜數涓�绾�</div>
<div class="kb_mt10">300</div>
</div>
</div>
@@ -113,7 +114,8 @@
</div>
<div class="kb_block03_02_content flex_c_c">
<div class="flex_c_c content01">
- <div class="circle" style="background-color: rgb(255 255 0)" />
+ <!-- <div class="circle" style="background-color: rgb(255 255 0)" />-->
+ <div class="circleYellow" style="background-color: rgb(255 255 0)" />
</div>
</div>
<div class="kb_block03_02_content flex_c_c">
@@ -168,7 +170,6 @@
</div>
<div class="kb_block03 kb_pd10 ">
<div class="flex_e_c">
-
<div class="kb_block03_content flex_c_c">
<div class="content01">棰嗘枡</div>
<div class="content02">
@@ -240,7 +241,7 @@
</div>
<div class="kb_block03_02_content flex_c_c">
<div class="flex_c_c content01">
- <div class="circle" style="background-color: rgb(255 255 0)" />
+ <div class="circle" style="background-color: rgb(255 255 255)" />
</div>
</div>
<div class="kb_block03_02_content flex_c_c">
@@ -325,7 +326,7 @@
<div class="content02_2 borderTop ">1</div>
</div>
</div>
- <div class="kb_block03_content flex_c_c">
+ <div v-if="false" class="kb_block03_content flex_c_c">
<div class="content01">棰嗘枡</div>
<div class="content02">
<div class="content02_1 ">浠诲姟</div>
@@ -366,10 +367,11 @@
</div>
<div class="kb_block03_02_content flex_c_c">
<div class="flex_c_c content01">
- <div class="circle" style="background-color: rgb(255 255 0)" />
+ <!-- <div class="circle" style="background-color: rgb(255 255 0)" />-->
+ <div class="circle" />
</div>
</div>
- <div class="kb_block03_02_content flex_c_c">
+ <div v-if="false" class="kb_block03_02_content flex_c_c">
<div class="flex_c_c content01">
<div class="circle" style="background-color: rgb(255 255 255)" />
</div>
@@ -451,7 +453,7 @@
<div class="content02_2 borderTop ">1</div>
</div>
</div>
- <div class="kb_block03_content flex_c_c">
+ <div v-if="false" class="kb_block03_content flex_c_c">
<div class="content01">棰嗘枡</div>
<div class="content02">
<div class="content02_1 ">浠诲姟</div>
@@ -492,10 +494,11 @@
</div>
<div class="kb_block03_02_content flex_c_c">
<div class="flex_c_c content01">
- <div class="circle" style="background-color: rgb(255 255 0)" />
+ <!-- <div class="circle" style="background-color: rgb(255 255 0)" />-->
+ <div class="circleYellow" style="background-color: rgb(255 255 0)" />
</div>
</div>
- <div class="kb_block03_02_content flex_c_c">
+ <div v-if="false" class="kb_block03_02_content flex_c_c">
<div class="flex_c_c content01">
<div class="circle" style="background-color: rgb(255 255 255)" />
</div>
@@ -511,6 +514,7 @@
<div class="kb_left_bottom_content">
<div class="content_head">鍦ㄥ埗璁㈠崟</div>
<el-table
+ ref="tableData"
:data="tableData"
style="width: 100%;"
:header-cell-style="headerCellStyle"
@@ -518,57 +522,66 @@
height="310"
>
<el-table-column
- prop="xh"
+ prop="RowNum"
label="搴忓彿"
width="53"
/>
<el-table-column
- prop="jgzt"
+ prop="status"
label="鍔犲伐鐘舵��"
width="85"
- />
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.status==='ALLO'">ALLO</div>
+ <div v-if="row.status==='START'">寮�濮�</div>
+ </template>
+ </el-table-column>
<el-table-column
- prop="pfsj"
+ prop="lm_date"
label="娲惧彂鏃堕棿"
width="86"
- />
+ >
+ <template slot-scope="{row}">
+ <div>{{ row.lm_date.substring(5,10) }}</div>
+ </template>
+ </el-table-column>
<el-table-column
- prop="xsddh"
+ prop="saleOrderCode"
label="閿�鍞鍗曞彿"
width="150"
/>
<el-table-column
- prop="jgdh"
+ prop="wo_code"
label="鍔犲伐鍗曞彿"
width="207"
/>
<el-table-column
- prop="cpmc"
+ prop="partname"
label="浜у搧鍚嶇О"
width="105"
/>
<el-table-column
- prop="gg"
+ prop="partspec"
label="瑙勬牸"
width="60"
/>
<el-table-column
- prop="dw"
+ prop="name"
label="鍗曚綅"
width="60"
/>
<el-table-column
- prop="rwsl"
+ prop="plan_qty"
label="浠诲姟鏁伴噺"
width="90"
/>
<el-table-column
- prop="wgsl"
+ prop="good_qty"
label="瀹屽伐鏁伴噺"
width="90"
/>
<el-table-column
- prop="blsl"
+ prop="ng_qty"
label="涓嶈壇鏁伴噺"
width="90"
/>
@@ -578,15 +591,23 @@
width="70"
/>
<el-table-column
- prop="yjks"
+ prop="planenddate"
label="棰勮寮�濮�"
width="86"
- />
+ >
+ <template slot-scope="{row}">
+ <div>{{ row.planenddate.substring(5,10) }}</div>
+ </template>
+ </el-table-column>
<el-table-column
- prop="yjjs"
+ prop="planstartdate"
label="棰勮缁撴潫"
width="86"
- />
+ >
+ <template slot-scope="{row}">
+ <div>{{ row.planstartdate.substring(5,10) }}</div>
+ </template>
+ </el-table-column>
</el-table>
</div>
</div>
@@ -599,9 +620,10 @@
<el-table
ref="tableDataRank"
:data="tableDataRank"
+ class="tableDataRank"
style="width: 100%;"
- :header-cell-style="headerCellStyle"
- :cell-style="cellStyle"
+ :header-cell-style="headerCellStyleRank"
+ :cell-style="cellStyleRank"
height="400"
>
<el-table-column
@@ -620,12 +642,12 @@
width="120"
/>
<el-table-column
- prop="cp"
+ prop="partname"
width="138"
label="浜у搧"
/>
<el-table-column
- prop="sl"
+ prop="good_qty"
label="鏁伴噺"
width="100"
/>
@@ -647,12 +669,20 @@
<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: '',
+
leftTopDataAll: [
// { id: 1, name: '閿傜數浜х嚎', value: 1000, children: [] },
{ id: 2, name: '鍖呰浜х嚎1', value: 1200, children: [] },
@@ -663,169 +693,12 @@
],
leftTopDataAllLength: 0,
leftTopDataCurrentNumber: 0,
+
+ lineArr: [],
+ lineContent: [],
+
leftTopData: [],
- tableData: [
- {
- xh: 1,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 2,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 3,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 4,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 5,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 6,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 7,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 8,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 9,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- },
- {
- xh: 10,
- jgzt: '寮�濮�',
- pfsj: '07/29',
- xsddh: '202207290001',
- jgdh: 'MO-2022-07-29-0001',
- cpmc: '浜у搧鍚嶆祴璇�',
- gg: '@20',
- dw: 'PCS',
- rwsl: 2000,
- wgsl: 1900,
- blsl: 100,
- wcl: '99%',
- yjks: '07/21',
- yjjs: '07/29'
- }
- ],
+ tableData: [],
tableDataRank: [// 鎺掕
{ xh: 'NO.1', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
{ xh: 'NO.2', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
@@ -859,17 +732,42 @@
this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)
this.leftTopDataAllLength = this.leftTopDataAll.length
- // this.handleData()
- // setInterval(this.handleData, 2000)
-
- this.getEcharts()
- this.gettableDataRankRoll()
+ this.getValue()
},
methods: {
+ async getValue() {
+ await this.getShopSearchLine()
+ await this.getLineSearchTopLeftData()
- // 澶勭悊鏁版嵁
+ await this.getEcharts()
+ await this.getTableDataRoll()
+ await this.getTableDataRankRoll()
+ },
+ // 鐢熶骇浜х嚎
+ async getShopSearchLine() {
+ const { data: res } = await ShopSearchLine({ shopcode: '0101' })
+ this.lineArr = res
+ },
+ async getLineSearchTopLeftData() {
+ const data = this.lineArr
+ const { data: res } = await LineSearchTopLeftData(data)
+ // this.lineContent = res
+
+ // let count = 0
+ // setInterval(() => {
+ // this.lineContent = {
+ // linename: res[0].linename,
+ // lineworkcont: res[0].lineworkcont,
+ // children: res[0].children[count]
+ // }
+ // count++
+ // if (res[0].children.length === count) {
+ // this.getLineSearchTopLeftData()
+ // }
+ // }, 1000)
+ },
+
handleData() {
- console.log(this.leftTopDataCurrentNumber)
this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)
if (this.leftTopDataCurrentNumber === this.leftTopDataAllLength - 2 || this.leftTopDataCurrentNumber === this.leftTopDataAllLength - 1) {
@@ -879,24 +777,59 @@
}
},
+ // 鍦ㄥ埗璁㈠崟table
+ getTableDataRoll() {
+ LineSearchBottomLeftData().then(res => {
+ this.tableData = res.data
+ })
+ // const divData = this.$refs.tableData.bodyWrapper
+ // // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+ // setInterval(() => {
+ // // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ // divData.scrollTop += 40
+ // // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+ // if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ // // 閲嶇疆table璺濈椤堕儴璺濈
+ // divData.scrollTop = 0
+ // LineSearchBottomLeftData().then(res => {
+ // this.tableData = res.data
+ // })
+ // }
+ // }, 1000)
+ },
// 浜х嚎浜у搧鏁伴噺鎺掕婊氬姩鏁堟灉
- gettableDataRankRoll() {
- const divData = this.$refs.tableDataRank.bodyWrapper
- // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
- setInterval(() => {
- // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
- divData.scrollTop += 40
- // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
- if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
- // 閲嶇疆table璺濈椤堕儴璺濈
- divData.scrollTop = 0
- console.log('璇ヨ姹傛帴鍙ｄ簡锛�')
- }
- }, 2000)
+ getTableDataRankRoll() {
+ LineSearchTopRightData().then(res => {
+ this.tableDataRank = res.data
+ })
+
+ // const divData = this.$refs.tableDataRank.bodyWrapper
+ // // 鎷垮埌鍏冪礌鍚庯紝瀵瑰厓绱犺繘琛屽畾鏃跺鍔犺窛绂婚《閮ㄨ窛绂伙紝瀹炵幇婊氬姩鏁堟灉(姝ら厤缃负姣�100姣绉诲姩1鍍忕礌)
+ // setInterval(() => {
+ // // 鍏冪礌鑷璺濈椤堕儴1鍍忕礌
+ // divData.scrollTop += 40
+ // // 鍒ゆ柇鍏冪礌鏄惁婊氬姩鍒板簳閮�(鍙楂樺害+璺濈椤堕儴=鏁翠釜楂樺害)
+ // if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
+ // // 閲嶇疆table璺濈椤堕儴璺濈
+ // divData.scrollTop = 0
+ // LineSearchTopRightData().then(res => {
+ // console.log('浜嗭紒')
+ // this.tableDataRank = res.data
+ // })
+ // }
+ // }, 2000)
},
// 鑾峰彇echarts
getEcharts() {
- loadEcharts('bar02', bar02())
+ LineSearchBottomRightData().then(res => {
+ loadEcharts('bar02', bar02(res.data))
+ })
+
+ // setInterval(() => {
+ // LineSearchBottomRightData().then(res => {
+ // loadEcharts('bar02', bar02(res.data))
+ // })
+ // }, 1000 * 5)
},
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
@@ -916,6 +849,7 @@
},
headerCellStyle() {
return {
+ // backgroundColor: '#044563',
backgroundColor: '#000',
padding: '10px 0',
textAlign: 'center',
@@ -924,6 +858,26 @@
}
},
cellStyle() {
+ return {
+ padding: '8px 0',
+ textAlign: 'center',
+ backgroundColor: '#000',
+ // backgroundColor: 'transparent',
+ color: '#fff',
+ borderRight: '1px solid rgba(255,255,255,0.6)'
+ }
+ },
+ headerCellStyleRank() {
+ return {
+ // backgroundColor: '#00121c',
+ backgroundColor: '#000',
+ padding: '10px 0',
+ textAlign: 'center',
+ color: '#fff',
+ borderRight: '1px solid rgba(255,255,255,0.6)'
+ }
+ },
+ cellStyleRank() {
return {
padding: '8px 0',
textAlign: 'center',
@@ -943,7 +897,7 @@
position: relative;
height: 990px;
width: 100%;
- background-color: #000;
+ //background-color: #000;
letter-spacing: 2px;
.kb_left {
@@ -1045,26 +999,6 @@
}
}
- .kb_block03_03 {
- //position: absolute;
-
- .kb_block03_03_content {
- width: 200px;
-
- .line {
- width: 50px;
- height: 2px;
- margin-top: 12px;
- background-color: #42b983;
- position: absolute;
- //top: 55px;
- //margin-left: 300px;
- //right: 0;
- //left: 200px;
- }
- }
- }
-
}
}
@@ -1126,6 +1060,12 @@
}
::v-deep .el-table__body-wrapper {
+ //background-color: #044563;
+ background-color: #000;
+}
+
+::v-deep .tableDataRank .el-table__body-wrapper {
+ //background-color: #00121c;
background-color: #000;
}
@@ -1133,4 +1073,64 @@
/* width: 0;瀹藉害涓�0鏆楄棌 */
width: 0;
}
+
+/* 瀹氫箟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>
--
Gitblit v1.9.3