From 377d4c4027610c69ccc9e1af913bab579a4d5e17 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期六, 30 七月 2022 14:16:50 +0800
Subject: [PATCH] 1.仓库管理看板静态页面初步实现2.采购订单看板静态页面初步实现
---
src/permission.js | 2
/dev/null | 42 -
src/views/kb/kbCommon.css | 13
src/views/test/printMe.vue | 0
src/views/kb/cgdd.vue | 534 ++++++++++++++++++++
src/views/kb/ckgl.vue | 597 ++++++++++++++++++++++
src/assets/images/pic01.png | 0
src/views/kb/zhkb.vue | 111 ++-
src/router/index.js | 12
src/utils/myEcharts.js | 216 ++++++++
10 files changed, 1,431 insertions(+), 96 deletions(-)
diff --git a/src/assets/images/pic01.png b/src/assets/images/pic01.png
new file mode 100644
index 0000000..128fe8a
--- /dev/null
+++ b/src/assets/images/pic01.png
Binary files differ
diff --git a/src/permission.js b/src/permission.js
index 5c62eb9..f34e5ac 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -8,7 +8,7 @@
NProgress.configure({ showSpinner: false }) // NProgress Configuration
-const whiteList = ['/login', '/zhkb'] // no redirect whitelist
+const whiteList = ['/login', '/zhkb', '/ckgl', '/cgdd'] // 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 7aa2c43..829ea53 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,9 +38,15 @@
path: '/zhkb',
component: () => import('@/views/kb/zhkb'),
hidden: true
- }, {
- path: '/kb2',
- component: () => import('@/views/kb/index2'),
+ },
+ {
+ path: '/ckgl',
+ component: () => import('@/views/kb/ckgl'),
+ hidden: true
+ },
+ {
+ path: '/cgdd',
+ component: () => import('@/views/kb/cgdd'),
hidden: true
},
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index a68e0d0..b38af77 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -406,7 +406,7 @@
},
rich: {
lg: {
- // backgroundColor: '#339911',
+ // backgroundColor: '#339911',
color: '#fff',
borderRadius: 15,
// padding: 5,
@@ -463,7 +463,7 @@
formatter: '{c}',
fontSize: 14,
color: '#fff'
- // formatter: '{c}%',
+ // formatter: '{c}%',
}
}
}
@@ -472,3 +472,215 @@
return option
}
+
+// 浠撳簱绠＄悊鐪嬫澘鍥�
+export function bar03(titleText) {
+ const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
+ const zzx1 = ['800', '900', '700', '300', '500', '800', '700']
+ const wgx1 = ['700', '600', '500', '400', '300', '333', '222']
+ const option = {
+ backgroundColor: 'transparent',
+ tooltip: {
+ show: false,
+ trigger: 'axis',
+ axisPointer: { // 鍧愭爣杞存寚绀哄櫒锛屽潗鏍囪酱瑙﹀彂鏈夋晥
+ type: 'shadow' // 榛樿涓虹洿绾匡紝鍙�変负锛�'line' | 'shadow'
+ },
+ formatter: function(e) {
+ if (e.length > 1) {
+ var S = e[1].data - e[0].data
+ return e[0].axisValue + ':<br>宸=褰撳墠锛嶅勾鍒�<br>=' + S
+ } else if (e.length = 1) {
+ return e[0].axisValue + ':<br>' + e[0].seriesName + '=' + e[0].data
+ }
+ }
+ },
+ title: {
+ text: titleText,
+ x: '70%',
+ y: '2%',
+ textStyle: {
+ color: '#fff',
+ fontSize: '22'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+ }
+ },
+ grid: {
+ left: '4%',
+ right: '4%',
+ bottom: '4%',
+ top: '15%',
+ containLabel: true
+ },
+ legend: {
+ data: ['title1', 'title2'],
+ left: 220,
+ top: 10,
+ textStyle: {
+ color: '#00ffff',
+ fontSize: 14
+ },
+ itemWidth: 12,
+ itemHeight: 10,
+ itemGap: 35,
+ color: '#242424'
+ },
+ xAxis: {
+ type: 'category',
+ data: ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�'],
+ axisLine: {
+ lineStyle: {
+ show: true,
+ lineStyle: {
+ color: '#6A989E'
+ }
+ }
+ },
+ axisLabel: {
+ // interval: 0,
+ // rotate: 40,
+ textStyle: {
+ fontFamily: 'Microsoft YaHei',
+ color: '#fff', // x杞撮鑹�
+ fontWeight: 'normal',
+ fontSize: '14',
+ lineHeight: 22
+ }
+ }
+ // splitLine:{
+ // show:true,
+ // lineStyle: {
+ // type: 'dashed',
+ // color: 'rgba(135,140,147,0.8)'
+ // }
+ // },
+ },
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺锛堝崟浣嶏細涓級',
+ nameTextStyle: {
+ color: '#ffffff'
+ },
+ axisLine: {
+ show: false,
+ lineStyle: {
+ type: 'dashed',
+ color: 'rgba(135,140,147,0.8)'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(135,140,147,1)' // 宸︿晶鏄剧ず绾�
+ }
+ },
+ axisLabel: {
+ formatter: '{value}',
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ series: [
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [-18, -4],
+ symbolPosition: 'end',
+ z: 12,
+ color: '#3440FF',
+ data: zzx1
+ },
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [18, -4],
+ // symbolOffset: [20, -5],
+ symbolPosition: 'end',
+ z: 12,
+ color: '#FF1155',
+ data: wgx1
+ },
+ {
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ symbolOffset: [-18, 4],
+ z: 12,
+ color: 'rgba(126,192,238,0.6)',
+ data: zzx1
+ },
+ {
+ name: '',
+ type: 'pictorialBar',
+ symbol: path,
+ symbolSize: [30, 8],
+ // symbolOffset: [20, 4],
+ symbolOffset: [18, 4],
+ color: '#FFC0CB',
+ z: 12,
+ data: wgx1
+ }, {
+ name: 'title1',
+ type: 'bar',
+ barWidth: '30',
+ itemStyle: {
+ normal: {
+ opacity: 0.7,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'blue'
+ }, {
+ offset: 1,
+ color: '#7EC0EE'
+ }]),
+ barBorderRadius: 0
+ }
+
+ },
+ label: {
+ show: true,
+ // position: ['-18','-18'],
+ position: 'top',
+ color: '#00f8ff',
+ fontSize: 12
+ },
+ data: zzx1
+ },
+ {
+ name: 'title2',
+ type: 'bar',
+ barWidth: '30',
+ itemStyle: {
+ normal: {
+ opacity: 0.7,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: '#FF2246'
+ }, {
+ offset: 1,
+ color: '#FFC0CB'
+
+ }]),
+ barBorderRadius: 0
+ }
+
+ },
+ label: {
+ show: true,
+ // position: ['18','-18'],
+ position: 'top',
+ color: '#00f8ff',
+ fontSize: 12
+ },
+ data: wgx1
+ }
+ ]
+ }
+
+ return option
+}
diff --git a/src/views/kb/cgdd.vue b/src/views/kb/cgdd.vue
new file mode 100644
index 0000000..73b36d9
--- /dev/null
+++ b/src/views/kb/cgdd.vue
@@ -0,0 +1,534 @@
+<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>
+
+ <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">12</div>
+ <div class="text">褰撴棩鍏ュ簱鏁�</div>
+ </div>
+ <div class="content01">
+ <div class="pic01" />
+ <div class="number">90200</div>
+ <div class="text">褰撴湀鍏ュ簱鎬绘暟</div>
+ </div>
+ <div class="content01">
+ <div class="pic01" />
+ <div class="number">12%</div>
+ <div class="text">褰撴湀寤舵湡鍗犳瘮</div>
+ </div>
+
+ </div>
+ </div>
+ <!-- 2-->
+ <div class="kb_left_bottom kb_pd10">
+ <div class="kb_left_bottom_content">
+ <div class="content_head">鎴戞槸鏍囬</div>
+ <el-table
+ :data="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="610"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="53"
+ />
+ <el-table-column
+ prop="jgzt"
+ label="鍔犲伐鐘舵��"
+ width="85"
+ />
+ <el-table-column
+ prop="pfsj"
+ label="娲惧彂鏃堕棿"
+ width="86"
+ />
+ <el-table-column
+ prop="xsddh"
+ label="閿�鍞鍗曞彿"
+ width="150"
+ />
+ <el-table-column
+ prop="jgdh"
+ label="鍔犲伐鍗曞彿"
+ />
+ <el-table-column
+ prop="cpmc"
+ label="浜у搧鍚嶇О"
+ width="105"
+ />
+ <el-table-column
+ prop="gg"
+ label="瑙勬牸"
+ width="60"
+ />
+ <el-table-column
+ prop="dw"
+ label="鍗曚綅"
+ width="60"
+ />
+ <el-table-column
+ prop="rwsl"
+ label="浠诲姟鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="wgsl"
+ label="瀹屽伐鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="blsl"
+ label="涓嶈壇鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="wcl"
+ label="瀹屾垚鐜�"
+ width="70"
+ />
+ <el-table-column
+ prop="yjks"
+ label="棰勮寮�濮�"
+ width="86"
+ />
+ <el-table-column
+ prop="yjjs"
+ label="棰勮缁撴潫"
+ width="86"
+ />
+ </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">渚涘簲鍟嗗欢鏈熶氦璐ф帓琛�</div>
+ <div class="content_body">
+ <el-table
+ :data="tableDataRank"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="888"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="70"
+ />
+ <el-table-column
+ prop="cj"
+ label="杞﹂棿"
+ width="100"
+ />
+ <el-table-column
+ prop="cx"
+ label="浜х嚎"
+ width="100"
+ />
+ <el-table-column
+ prop="cp"
+ label="浜у搧"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="100"
+ />
+ </el-table>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import './kbCommon.css'
+import { bar03, loadEcharts } from '@/utils/myEcharts'
+
+export default {
+ name: 'Index2',
+ data() {
+ return {
+ headTime: '',
+ leftTopDataAll: [
+ // { id: 1, name: '閿傜數浜х嚎', value: 1000, children: [] },
+ { id: 2, name: '鍖呰浜х嚎1', value: 1200, children: [] },
+ { id: 3, name: '鍖呰浜х嚎2', value: 1300, children: [] },
+ { id: 4, name: '鍖呰浜х嚎3', value: 1300, children: [] },
+ { id: 5, name: '鍖呰浜х嚎4', value: 1300, children: [] },
+ { id: 6, name: '鍖呰浜х嚎5', value: 1300, children: [] }
+ ],
+ leftTopDataAllLength: 0,
+ leftTopDataCurrentNumber: 0,
+ 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'
+ }
+ ],
+ tableDataRank: [// 鎺掕
+ { xh: 'NO.1', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.2', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.3', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.4', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.5', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.6', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.7', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
+ ]
+
+ }
+ },
+
+ created() {
+ setInterval(this.getNowTime, 1000)
+ },
+ mounted() {
+ this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)
+ this.leftTopDataAllLength = this.leftTopDataAll.length
+
+ // this.handleData()
+ // setInterval(this.handleData, 2000)
+
+ this.getEcharts()
+ },
+ methods: {
+ // 澶勭悊鏁版嵁
+ 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) {
+ this.leftTopDataCurrentNumber = 0
+ } else {
+ this.leftTopDataCurrentNumber = this.leftTopDataCurrentNumber + 2
+ }
+ },
+
+ // 鑾峰彇echarts
+ getEcharts() {
+ loadEcharts('bar03', bar03('鏈懆鍏ュ簱閲忔眹鎬�'))
+ loadEcharts('bar04', bar03('鏈懆鍑鸿揣閲忔眹鎬�'))
+ },
+
+ // 鑾峰彇褰撳墠鏃堕棿
+ 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: '#fff',
+ borderRight: '1px solid rgba(255,255,255,0.6)'
+ }
+ },
+ cellStyle() {
+ return {
+ padding: '5px 0',
+ textAlign: 'center',
+ backgroundColor: '#000',
+ color: '#fff',
+ borderRight: '1px solid rgba(255,255,255,0.6)'
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+
+.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;
+
+ .kb_left_top_block {
+ width: 100%;
+ height: 267px;
+ display: flex;
+ //border: 1px solid rgba(255, 255, 255, 0.6);
+ justify-content: space-around;
+
+ .content01 {
+ margin: auto;
+ position: relative;
+ width: 202px;
+ text-align: center;
+
+ .pic01 {
+ height: 145px;
+ background: url("../../assets/images/pic01.png");
+ }
+
+ .number {
+ margin-top: -50px;
+ font-size: 18px;
+ }
+
+ .text{
+ margin-top: 50px;
+ }
+ }
+ }
+
+ }
+
+ .kb_left_bottom {
+ height: 645px;
+
+ .kb_left_bottom_content {
+ height: 610px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+
+ .content_head {
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-align: center;
+ font-size: 26px;
+ }
+ }
+ }
+ }
+
+ .kb_right {
+ width: 575px;
+ height: 100%;
+
+ .kb_right_top {
+ height: 964px;
+ width: 100%;
+
+ .kb_right_top_content {
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .content_head {
+ font-size: 26px;
+ height: 55px;
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-align: center;
+ }
+ }
+ }
+
+ }
+}
+
+::v-deep .el-table__body-wrapper {
+ background-color: #000;
+}
+</style>
diff --git a/src/views/kb/ckgl.vue b/src/views/kb/ckgl.vue
new file mode 100644
index 0000000..a8ec8de
--- /dev/null
+++ b/src/views/kb/ckgl.vue
@@ -0,0 +1,597 @@
+<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 kb_pd10">
+ <div class="kb_left_top_block">
+ <div class="headTitle">褰撴棩寰呭叆搴撹鍗�</div>
+ <div class="content">
+ <el-table
+ :data="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="214"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="53"
+ />
+ <el-table-column
+ prop="jgzt"
+ label="鍔犲伐鐘舵��"
+ width="85"
+ />
+ <el-table-column
+ prop="pfsj"
+ label="娲惧彂鏃堕棿"
+ width="86"
+ />
+ <el-table-column
+ prop="xsddh"
+ label="閿�鍞鍗曞彿"
+ width="150"
+ />
+ <el-table-column
+ prop="jgdh"
+ label="鍔犲伐鍗曞彿"
+ />
+ <el-table-column
+ prop="cpmc"
+ label="浜у搧鍚嶇О"
+ width="105"
+ />
+ <el-table-column
+ prop="gg"
+ label="瑙勬牸"
+ width="60"
+ />
+ <el-table-column
+ prop="dw"
+ label="鍗曚綅"
+ width="60"
+ />
+ <el-table-column
+ prop="rwsl"
+ label="浠诲姟鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="wgsl"
+ label="瀹屽伐鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="blsl"
+ label="涓嶈壇鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="wcl"
+ label="瀹屾垚鐜�"
+ width="70"
+ />
+ <el-table-column
+ prop="yjks"
+ label="棰勮寮�濮�"
+ width="86"
+ />
+ <el-table-column
+ prop="yjjs"
+ label="棰勮缁撴潫"
+ width="86"
+ />
+ </el-table>
+ </div>
+ </div>
+ <div class="kb_left_top_block">
+ <div class="headTitle">鎴愬搧鍑哄簱鍗�</div>
+ <div class="content">
+ <el-table
+ :data="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="214"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="53"
+ />
+ <el-table-column
+ prop="jgzt"
+ label="鍔犲伐鐘舵��"
+ width="85"
+ />
+ <el-table-column
+ prop="pfsj"
+ label="娲惧彂鏃堕棿"
+ width="86"
+ />
+ <el-table-column
+ prop="xsddh"
+ label="閿�鍞鍗曞彿"
+ width="150"
+ />
+ <el-table-column
+ prop="jgdh"
+ label="鍔犲伐鍗曞彿"
+ />
+ <el-table-column
+ prop="cpmc"
+ label="浜у搧鍚嶇О"
+ width="105"
+ />
+ <el-table-column
+ prop="gg"
+ label="瑙勬牸"
+ width="60"
+ />
+ <el-table-column
+ prop="dw"
+ label="鍗曚綅"
+ width="60"
+ />
+ <el-table-column
+ prop="rwsl"
+ label="浠诲姟鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="wgsl"
+ label="瀹屽伐鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="blsl"
+ label="涓嶈壇鏁伴噺"
+ width="90"
+ />
+ <el-table-column
+ prop="wcl"
+ label="瀹屾垚鐜�"
+ width="70"
+ />
+ <el-table-column
+ prop="yjks"
+ label="棰勮寮�濮�"
+ width="86"
+ />
+ <el-table-column
+ prop="yjjs"
+ label="棰勮缁撴潫"
+ width="86"
+ />
+ </el-table>
+ </div>
+ </div>
+ </div>
+ <!-- 2-->
+ <div class="kb_left_bottom kb_pd10">
+ <div class="kb_left_bottom_content">
+ <div class="content01">
+ <div id="bar03" style="width: 100%;height:100%" />
+ </div>
+ <div class="content01">
+ <div id="bar04" style="width: 100%;height:100%" />
+ </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">搴撳瓨鎺掕</div>
+ <div class="content_body">
+ <el-table
+ :data="tableDataRank"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ height="888"
+ >
+ <el-table-column
+ prop="xh"
+ label="搴忓彿"
+ width="70"
+ />
+ <el-table-column
+ prop="cj"
+ label="杞﹂棿"
+ width="100"
+ />
+ <el-table-column
+ prop="cx"
+ label="浜х嚎"
+ width="100"
+ />
+ <el-table-column
+ prop="cp"
+ label="浜у搧"
+ />
+ <el-table-column
+ prop="sl"
+ label="鏁伴噺"
+ width="100"
+ />
+ </el-table>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import './kbCommon.css'
+import { bar03, loadEcharts } from '@/utils/myEcharts'
+
+export default {
+ name: 'Index2',
+ data() {
+ return {
+ headTime: '',
+ leftTopDataAll: [
+ // { id: 1, name: '閿傜數浜х嚎', value: 1000, children: [] },
+ { id: 2, name: '鍖呰浜х嚎1', value: 1200, children: [] },
+ { id: 3, name: '鍖呰浜х嚎2', value: 1300, children: [] },
+ { id: 4, name: '鍖呰浜х嚎3', value: 1300, children: [] },
+ { id: 5, name: '鍖呰浜х嚎4', value: 1300, children: [] },
+ { id: 6, name: '鍖呰浜х嚎5', value: 1300, children: [] }
+ ],
+ leftTopDataAllLength: 0,
+ leftTopDataCurrentNumber: 0,
+ 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'
+ }
+ ],
+ tableDataRank: [// 鎺掕
+ { xh: 'NO.1', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.2', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.3', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.4', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.5', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.6', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.7', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
+ ]
+
+ }
+ },
+
+ created() {
+ setInterval(this.getNowTime, 1000)
+ },
+ mounted() {
+ this.leftTopData = this.leftTopDataAll.slice(this.leftTopDataCurrentNumber, this.leftTopDataCurrentNumber + 2)
+ this.leftTopDataAllLength = this.leftTopDataAll.length
+
+ // this.handleData()
+ // setInterval(this.handleData, 2000)
+
+ this.getEcharts()
+ },
+ methods: {
+ // 澶勭悊鏁版嵁
+ 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) {
+ this.leftTopDataCurrentNumber = 0
+ } else {
+ this.leftTopDataCurrentNumber = this.leftTopDataCurrentNumber + 2
+ }
+ },
+
+ // 鑾峰彇echarts
+ getEcharts() {
+ loadEcharts('bar03', bar03('鏈懆鍏ュ簱閲忔眹鎬�'))
+ loadEcharts('bar04', bar03('鏈懆鍑鸿揣閲忔眹鎬�'))
+ },
+
+ // 鑾峰彇褰撳墠鏃堕棿
+ 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: '#fff',
+ borderRight: '1px solid rgba(255,255,255,0.6)'
+ }
+ },
+ cellStyle() {
+ return {
+ padding: '8px 0',
+ textAlign: 'center',
+ backgroundColor: '#000',
+ color: '#fff',
+ borderRight: '1px solid rgba(255,255,255,0.6)'
+ }
+ }
+ }
+}
+</script>
+
+<style scoped lang="scss">
+
+.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: 595px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+
+ .kb_left_top_block {
+ width: 100%;
+ height: 267px;
+ display: flex;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ flex-direction: column;
+
+ .headTitle{
+ line-height: 54px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-align: center;
+ font-size: 26px;
+
+ }
+
+ .content{
+
+ }
+ }
+
+ }
+
+ .kb_left_bottom {
+ height: 395px;
+
+ .kb_left_bottom_content {
+ height: 360px;
+ display: flex;
+ justify-content:space-between ;
+
+ .content01{
+ width: 48%;
+ height: 100%;
+ border: 1px solid rgba(255,255,255,0.6);
+ }
+ }
+ }
+ }
+
+ .kb_right {
+ width: 575px;
+ height: 100%;
+
+ .kb_right_top {
+ height: 964px;
+ width: 100%;
+
+ .kb_right_top_content {
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .content_head {
+ font-size: 26px;
+ height: 55px;
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-align: center;
+ }
+ }
+ }
+
+ }
+}
+
+::v-deep .el-table__body-wrapper{
+ background-color: #000;
+}
+</style>
diff --git a/src/views/kb/index2.vue b/src/views/kb/index2.vue
deleted file mode 100644
index a12667a..0000000
--- a/src/views/kb/index2.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
- <div>
- <div class="kb_dashboard">
- <div class="kb_header flex_c_c">鏂板嚡杩暟瀛楄溅闂寸湅鏉�</div>
- <div class="kb_content">
- <div class="kb_left flex_c_s">
- <div class="kb_block">1</div>
- <div class="kb_block">2</div>
- </div>
- <div class="kb_center">3</div>
- <div class="kb_right flex_c_s">
- <div class="kb_block">1</div>
- <div class="kb_block">2</div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import './kbCommon.css'
-export default {
- name: 'Index2',
- data() {
- return {
-
- }
- },
- created() {
-
- },
- mounted() {
- },
- methods: {
-
- }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/kb/kbCommon.css b/src/views/kb/kbCommon.css
index d135d8c..3737f17 100644
--- a/src/views/kb/kbCommon.css
+++ b/src/views/kb/kbCommon.css
@@ -68,3 +68,16 @@
.kb_mt10{
margin-top: 10px;
}
+
+
+
+/*
+瀹氫箟婊氬姩鏉￠珮瀹藉強鑳屾櫙
+楂樺鍒嗗埆瀵瑰簲妯珫婊氬姩鏉＄殑灏哄
+*/
+::-webkit-scrollbar {
+ width: 0;
+}
+
+/*scrollbar END*/
+
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index 4216a3b..ecea0d2 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -16,12 +16,6 @@
<!-- 1-->
<div class="kb_left_top_title01">鐢熶骇浜х嚎锛�</div>
<div class="kb_left_top kb_pd10">
- <!-- <div v-for="item in leftTopData" :key="item.id">-->
- <!-- <div class="kb_block ">-->
- <!-- <div>{{ item.name }}</div>-->
- <!-- <div style="margin-top: 10px">{{ item.value }}</div>-->
- <!-- </div>-->
- <!-- </div>-->
<div class="kb_left_top_block">
<div class="kb_block01 kb_pd10">
<div>
@@ -507,36 +501,21 @@
</div>
</div>
- <!-- <div class="kb_block03_02_content flex_c_c">-->
- <!-- <div class="content02">-->
- <!-- <div class="circle" />-->
- <!-- <div class="line" />-->
- <!-- </div>-->
- <!-- </div>-->
-
- <!-- <div class="kb_block03_02_content flex_c_c">-->
- <!-- <div class="content03">-->
- <!-- <!– <div class="circle" :class="circleMarginLeft" />–>-->
- <!-- <div class="circle" style="background-color: #fff" />-->
- <!-- <!– <div class="line" :class="lineWidth" />–>-->
- <!-- <div class="line" />-->
- <!-- </div>-->
- <!-- </div>-->
-
</div>
</div>
</div>
</div>
<!-- 2-->
- <div class="kb_left_top_title02">鍦ㄥ埗璁㈠崟锛�</div>
<div class="kb_left_bottom kb_pd10">
<div class="kb_left_bottom_content">
+ <div class="content_head">鍦ㄥ埗璁㈠崟</div>
<el-table
:data="tableData"
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
+ height="310"
>
<el-table-column
prop="xh"
@@ -617,15 +596,17 @@
<div class="content_head">褰撴棩杞﹂棿浜х嚎浜у搧鏁伴噺鎺掕</div>
<div class="content_body">
<el-table
+ ref="tableDataRank"
:data="tableDataRank"
style="width: 100%;"
:header-cell-style="headerCellStyle"
:cell-style="cellStyle"
+ height="400"
>
<el-table-column
prop="xh"
label="搴忓彿"
- width="70"
+ width="75"
/>
<el-table-column
prop="cj"
@@ -851,7 +832,19 @@
{ xh: 'NO.5', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
{ xh: 'NO.6', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
{ xh: 'NO.7', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
- { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
+ { xh: 'NO.8', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.9', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.10', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.11', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.12', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.13', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.14', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.15', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.16', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.17', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.18', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.19', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 },
+ { xh: 'NO.20', cj: '閿傜數杞﹂棿', cx: '閿傜數1绾�', cp: 'F09閿傜數', sl: 1000 }
]
}
@@ -868,8 +861,10 @@
// setInterval(this.handleData, 2000)
this.getEcharts()
+ // this.gettableDataRankRoll()
},
methods: {
+
// 澶勭悊鏁版嵁
handleData() {
console.log(this.leftTopDataCurrentNumber)
@@ -882,11 +877,25 @@
}
},
+ // 浜х嚎浜у搧鏁伴噺鎺掕婊氬姩鏁堟灉
+ 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)
+ },
// 鑾峰彇echarts
getEcharts() {
loadEcharts('bar02', bar02())
},
-
// 鑾峰彇褰撳墠鏃堕棿
getNowTime() {
const dt = new Date()
@@ -904,10 +913,9 @@
this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
},
headerCellStyle() {
- // return { backgroundColor: 'transparent', padding: '0', textAlign: 'center' }
return {
backgroundColor: '#000',
- padding: '17px 0',
+ padding: '10px 0',
textAlign: 'center',
color: '#fff',
borderRight: '1px solid rgba(255,255,255,0.6)'
@@ -944,12 +952,7 @@
.kb_left_top_title01 {
position: absolute;
top: -3px;
- left:15px;
- }
- .kb_left_top_title02{
- position: absolute;
- top: 483px;
- left:15px;
+ left: 15px;
}
.kb_left_top {
@@ -962,36 +965,35 @@
width: 100%;
height: 100px;
display: flex;
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
.kb_block01 {
width: 171px;
display: flex;
align-items: center;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.kb_block02 {
width: 304px;
display: flex;
align-items: center;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
}
.kb_block03 {
width: 843px;
display: flex;
flex-direction: column;
- //text-align: center;
.kb_block03_content {
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
width: 200px;
height: 50px;
.content01 {
width: 50px;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
display: flex;
align-items: center;
justify-content: center;
@@ -999,7 +1001,7 @@
.content02 {
width: 50px;
- border-right: 1px solid rgba(255,255,255,0.6);
+ border-right: 1px solid rgba(255, 255, 255, 0.6);
.content02_1 {
display: flex;
@@ -1016,7 +1018,7 @@
}
.borderTop {
- border-top: 1px solid rgba(255,255,255,0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.6);
}
}
}
@@ -1069,8 +1071,17 @@
height: 495px;
.kb_left_bottom_content {
- border: 1px solid rgba(255,255,255,0.6);
height: 460px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+
+ .content_head {
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+ text-align: center;
+ font-size: 26px;
+ }
}
}
}
@@ -1084,16 +1095,16 @@
width: 100%;
.kb_right_top_content {
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
height: 100%;
display: flex;
flex-direction: column;
.content_head {
font-size: 26px;
- height: 76px;
- line-height: 76px;
- border-bottom: 1px solid rgba(255,255,255,0.6);
+ height: 55px;
+ line-height: 55px;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.6);
text-align: center;
}
}
@@ -1104,7 +1115,7 @@
margin-top: 8px;
.kb_right_bottom_content {
- border: 1px solid rgba(255,255,255,0.6);
+ border: 1px solid rgba(255, 255, 255, 0.6);
width: 100%;
height: 100%;
}
@@ -1112,4 +1123,8 @@
}
}
+::v-deep .el-table__body-wrapper {
+ background-color: #000;
+}
+
</style>
diff --git a/src/views/kb/printMe.vue b/src/views/test/printMe.vue
similarity index 100%
rename from src/views/kb/printMe.vue
rename to src/views/test/printMe.vue
--
Gitblit v1.9.3