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/kbCommon.css | 8
src/api/dzkb.js | 43 +++
src/views/kb/cgdd.vue | 23 +
src/views/kb/zhkb.vue | 470 +++++++++++++++++++++---------------------
src/utils/myEcharts.js | 81 +++++++
src/assets/images/kb_bg.png | 0
src/assets/images/kb_title.png | 0
7 files changed, 379 insertions(+), 246 deletions(-)
diff --git a/src/api/dzkb.js b/src/api/dzkb.js
new file mode 100644
index 0000000..f24a1f0
--- /dev/null
+++ b/src/api/dzkb.js
@@ -0,0 +1,43 @@
+import request from '@/utils/request'
+
+// 澶у矝杞﹂棿缁煎悎鐪嬫澘,鐢熶骇杞﹂棿鏌ユ壘浜х嚎鎺ュ彛
+export function ShopSearchLine(data) {
+ return request({
+ url: 'KanBanManagerent/ShopSearchLine',
+ method: 'get',
+ params: data
+ })
+}
+
+// 澶у矝杞﹂棿缁煎悎鐪嬫澘,宸︿笂浜х嚎鍔犲伐浠诲姟鎺ュ彛
+export function LineSearchTopLeftData(data) {
+ return request({
+ url: 'KanBanManagerent/LineSearchTopLeftData',
+ method: 'post',
+ data
+ })
+}
+
+// 澶у矝杞﹂棿缁煎悎鐪嬫澘,宸︿笅鍒楄〃鎺ュ彛
+export function LineSearchBottomLeftData() {
+ return request({
+ url: 'KanBanManagerent/LineSearchBottomLeftData',
+ method: 'get'
+ })
+}
+
+// 澶у矝杞﹂棿缁煎悎鐪嬫澘,鍙充笂top鎺掕鎺ュ彛
+export function LineSearchTopRightData() {
+ return request({
+ url: 'KanBanManagerent/LineSearchTopRightData',
+ method: 'get'
+ })
+}
+
+// 澶у矝杞﹂棿缁煎悎鐪嬫澘,鍙充笅top鎺掕鎺ュ彛
+export function LineSearchBottomRightData() {
+ return request({
+ url: 'KanBanManagerent/LineSearchBottomRightData',
+ method: 'get'
+ })
+}
diff --git a/src/assets/images/kb_bg.png b/src/assets/images/kb_bg.png
new file mode 100644
index 0000000..e30bce8
--- /dev/null
+++ b/src/assets/images/kb_bg.png
Binary files differ
diff --git a/src/assets/images/kb_title.png b/src/assets/images/kb_title.png
new file mode 100644
index 0000000..31438c5
--- /dev/null
+++ b/src/assets/images/kb_title.png
Binary files differ
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index b38af77..7cb86ad 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -350,10 +350,13 @@
}
// 缁煎悎鐪嬫澘鍥�
-export function bar02() {
- const data = [70, 60, 50, 40, 30]
+export function bar02(val) {
+ // console.log(val)
+ // const data = [70, 60, 50, 40, 30]
+ // const titlename = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
+ const data = val.map(i => i.cont)
+ const titlename = val.map(i => i.checkitem_name)
- const titlename = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
const valdata = [683, 500, 400, 300, 200]
const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
const option = {
@@ -684,3 +687,75 @@
return option
}
+
+// 閲囪喘璁㈠崟鍥�
+export function pie01() {
+ const option = {
+ backgroundColor: 'transparent',
+ title: {
+ text: '60.21%',
+ x: 'center',
+ y: 'center',
+ textStyle: {
+ fontWeight: 'normal',
+ color: '#fff',
+ fontSize: 18
+ }
+ },
+ color: ['rgba(176, 212, 251, 1)'],
+ legend: {
+ show: false,
+ itemGap: 12,
+ data: ['01', '02']
+ },
+
+ series: [
+ {
+ name: 'Line 1',
+ type: 'pie',
+ clockWise: true,
+ radius: ['50%', '66%'],
+ itemStyle: {
+ normal: {
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ },
+ hoverAnimation: false,
+ data: [
+ {
+ value: 80,
+ name: '01',
+ itemStyle: {
+ normal: {
+ color: { // 瀹屾垚鐨勫渾鐜殑棰滆壊
+ colorStops: [{
+ offset: 0,
+ color: '#24d3ff' // 0% 澶勭殑棰滆壊
+ }, {
+ offset: 1,
+ color: '#5580fe' // 100% 澶勭殑棰滆壊
+ }]
+ },
+ label: {
+ show: false
+ },
+ labelLine: {
+ show: false
+ }
+ }
+ }
+ },
+ {
+ name: '02',
+ value: 20
+ }
+ ]
+ }]
+ }
+ return option
+}
diff --git a/src/views/kb/cgdd.vue b/src/views/kb/cgdd.vue
index 81b3a0e..51f2207 100644
--- a/src/views/kb/cgdd.vue
+++ b/src/views/kb/cgdd.vue
@@ -27,9 +27,10 @@
<div class="text">褰撴湀鍏ュ簱鎬绘暟</div>
</div>
<div class="content01">
- <div class="pic01" />
- <div class="number">12%</div>
- <div class="text">褰撴湀寤舵湡鍗犳瘮</div>
+ <!-- <div class="pic01" />-->
+ <!-- <div class="number">12%</div>-->
+ <div id="pie01" ref="pie01" class="pie01" />
+ <div class="text" style="margin-top: -10px">褰撴湀寤舵湡鍗犳瘮</div>
</div>
</div>
@@ -170,7 +171,8 @@
<script>
import './kbCommon.css'
-import { bar03, loadEcharts } from '@/utils/myEcharts'
+import { loadEcharts, pie01 } from '@/utils/myEcharts'
+import * as echarts from 'echarts'
export default {
name: 'Index2',
@@ -391,8 +393,11 @@
// 鑾峰彇echarts
getEcharts() {
- loadEcharts('bar03', bar03('鏈懆鍏ュ簱閲忔眹鎬�'))
- loadEcharts('bar04', bar03('鏈懆鍑鸿揣閲忔眹鎬�'))
+ loadEcharts('pie01', pie01())
+
+ // setInterval(() => {
+ // loadEcharts('pie01', pie01())
+ // }, 5000)
},
// 鑾峰彇褰撳墠鏃堕棿
@@ -472,6 +477,12 @@
background: url("../../assets/images/pic01.png");
}
+ .pie01{
+ height: 200px;
+ width: 200px;
+ margin-top: -30px;
+ }
+
.number {
margin-top: -50px;
font-size: 18px;
diff --git a/src/views/kb/kbCommon.css b/src/views/kb/kbCommon.css
index e47e923..6a24be6 100644
--- a/src/views/kb/kbCommon.css
+++ b/src/views/kb/kbCommon.css
@@ -2,14 +2,16 @@
width: 1920px;
height: 1080px;
position: relative;
+ /*background-color: #17678c;*/
background-color: #000;
font-size: 16px;
font-family: Microsoft YaHei;
color: #fff;
+ background-size: 1920px 1080px;
+ /*background: url("../../assets/images/kb_bg.png") no-repeat;*/
}
.kb_header {
- /*background-color: #000;*/
/*background-color: #123;*/
height: 90px;
line-height: 90px;
@@ -24,12 +26,14 @@
.kb_headerPic {
position: absolute;
top: 39px;
+ /*top: 0px;*/
width: 1808px;
+ /*height: 90px;*/
height: 12px;
/*background-size: 100% 100%;*/
+ /*background: url("../../assets/images/kb_title.png") no-repeat;*/
background: url("../../assets/images/kb_headtitle2.png") no-repeat;
margin-left: 56px;
- /*margin-left: 40px;*/
}
.kb_headTime {
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