From 32ec691abab0c837f34ce2c4908a40a10b9dbec7 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期五, 29 七月 2022 17:20:15 +0800
Subject: [PATCH] 1.优化项目2.综合看板静态页面初步实现
---
src/store/modules/user.js | 22
src/api/user.js | 7
src/views/login/index.vue | 62 ++
src/assets/images/layout_logo.png | 0
src/views/kb/zhkb.vue | 1057 ++++++++++++++++++++++++++++++++++++++++++-
src/utils/myEcharts.js | 133 +++++
src/utils/request.js | 36 +
src/views/kb/kbCommon.css | 40 +
src/assets/images/layout_logo2.png | 0
src/assets/images/kb_headtitle2.png | 0
src/main.js | 14
src/layout/components/Sidebar/index.vue | 19
src/assets/images/kb_headtitle.png | 0
13 files changed, 1,318 insertions(+), 72 deletions(-)
diff --git a/src/api/user.js b/src/api/user.js
index 0a6db30..f0834d2 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -36,3 +36,10 @@
params: data
})
}
+export function ForcedOffline(data) {
+ return request({
+ url: '/Login/ForcedOffline',
+ method: 'post',
+ params: data
+ })
+}
diff --git a/src/assets/images/kb_headtitle.png b/src/assets/images/kb_headtitle.png
new file mode 100644
index 0000000..32a43ad
--- /dev/null
+++ b/src/assets/images/kb_headtitle.png
Binary files differ
diff --git a/src/assets/images/kb_headtitle2.png b/src/assets/images/kb_headtitle2.png
new file mode 100644
index 0000000..94f15e6
--- /dev/null
+++ b/src/assets/images/kb_headtitle2.png
Binary files differ
diff --git a/src/assets/images/layout_logo.png b/src/assets/images/layout_logo.png
new file mode 100644
index 0000000..5f907b2
--- /dev/null
+++ b/src/assets/images/layout_logo.png
Binary files differ
diff --git a/src/assets/images/layout_logo2.png b/src/assets/images/layout_logo2.png
new file mode 100644
index 0000000..c504835
--- /dev/null
+++ b/src/assets/images/layout_logo2.png
Binary files differ
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index c6baec2..f8dfb86 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/src/layout/components/Sidebar/index.vue
@@ -2,7 +2,8 @@
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
- <el-scrollbar wrap-class="scrollbar-wrapper" style="margin-top:56px;height: 85%">
+ <div class="layoutLogo" />
+ <el-scrollbar wrap-class="scrollbar-wrapper" class="scrollbarWrapperClass">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
@@ -82,6 +83,22 @@
</script>
<style lang="scss">
$main_color: #42b983;
+
+.layoutLogo{
+ position: absolute;
+ top: 5px;
+ z-index:10;
+ left: 5px;
+ width: 200px;
+ height: 90px;
+ background:url("../../../assets/images/layout_logo.png") no-repeat;
+}
+
+.scrollbarWrapperClass{
+ margin-top:90px;
+ height: 85%;
+}
+
.el-button--text, .el-button--text.is-disabled, .el-button--text.is-disabled:focus, .el-button--text.is-disabled:hover, .el-button--text:active {
color: white;
font-size: 18px;
diff --git a/src/main.js b/src/main.js
index 563a5c8..1ff9ba2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -57,20 +57,6 @@
import watermark from './utils/watermark.js'
Vue.prototype.$watermark = watermark
-// 鏃堕棿杩囨护鍣�
-Vue.filter('dataFormat', function(originVal) {
- const dt = new Date(originVal)
-
- 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')
-
- return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
-})
new Vue({
el: '#app',
router,
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index c3bb55a..4e23c07 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -35,15 +35,21 @@
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
- login({ username: username.trim(), password: password }).then(response => {
+ login({ username: username.trim(), password: password }).then(res => {
// login({ UserName: '001', PassWord: 123, HOrgName: 1 }).then(response => {
- const { data: res } = response
+ // const { data: res } = response
+ // if (res.code === '200') {
+ setCookie('username', res.data.username)
+ setCookie('admin', res.data.usercode)
+ setCookie('navTabId', res.data.usercode)
+ setCookie('usertype', res.data.usertype)
+ setCookie('userid', res.data.userid)
+ // }
+ // console.log(res.code === '302', 8989)
+ // if (res.code === '302') {
+ setCookie('code', res.code)
+ // }
- setCookie('username', res.username)
- setCookie('admin', res.usercode)
- setCookie('navTabId', res.usercode)
- setCookie('usertype', res.usertype)
- setCookie('userid', res.userid)
// commit('SET_TOKEN', data.token)
// setToken(res)
// commit('SET_TOKEN', res)
@@ -109,11 +115,13 @@
removeToken() // must remove token first
resetRouter()
+ removeCookie('ruleCode')
removeCookie('username')
removeCookie('admin')
removeCookie('navTabId')
removeCookie('usertype')
removeCookie('userid')
+ removeCookie('code')
// reset visited views and cached views
dispatch('tagsView/delAllViews', null, { root: true })
diff --git a/src/utils/myEcharts.js b/src/utils/myEcharts.js
index e67cf75..a68e0d0 100644
--- a/src/utils/myEcharts.js
+++ b/src/utils/myEcharts.js
@@ -116,6 +116,7 @@
return option
}
+
export function bar01(data) {
var dataX = data.map(r => r.key)
var dataY = data.map(r => r.value)
@@ -209,11 +210,11 @@
colorStops: [
{
offset: 0,
- color: `rgba(42,197,137,1)`// 0% 澶勭殑棰滆壊
+ color: `rgba(42, 197, 137, 1)`// 0% 澶勭殑棰滆壊
},
{
offset: 1,
- color: `rgba(187,236,218,1)` // 100% 澶勭殑棰滆壊
+ color: `rgba(187, 236, 218, 1)` // 100% 澶勭殑棰滆壊
}
],
globalCoord: false // 缂虹渷涓� false
@@ -332,13 +333,13 @@
symbolSize: 8,
itemStyle: {
normal: {
- color: `rgba(42,197,137,1)`
+ color: `rgba(42, 197, 137, 1)`
}
},
lineStyle: {
normal: {
width: 2,
- color: `rgba(42,197,137,1)`
+ color: `rgba(42, 197, 137, 1)`
}
},
data: dataY
@@ -347,3 +348,127 @@
return option
}
+
+// 缁煎悎鐪嬫澘鍥�
+export function bar02() {
+ const data = [70, 60, 50, 40, 30]
+
+ const titlename = ['澶栬鍒掍激', '琛ㄩ潰娌规薄', '灏哄', '棰滆壊', '澶у皬']
+ const valdata = [683, 500, 400, 300, 200]
+ const myColor = ['#FF0000', '#FF5511', '#FF8800', '#FFBB00', '#FFFF00']
+ const option = {
+ backgroundColor: 'transparent',
+ title: {
+ text: 'Top5涓嶈壇',
+ x: 'center',
+ y: '4%',
+ textStyle: {
+ color: '#fff',
+ fontSize: '22'
+ },
+ subtextStyle: {
+ color: '#90979c',
+ fontSize: '16'
+
+ }
+ },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '0%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: {
+ show: false
+ },
+ yAxis: [
+ {
+ show: true,
+ data: titlename,
+ inverse: true,
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ color: '#fff',
+ fontSize: 14,
+ formatter: function(value, index) {
+ return [
+ '{lg|' + (index + 1) + '銆� }' + '{title|' + value + '} '
+ ].join('\n')
+ },
+ rich: {
+ lg: {
+ // backgroundColor: '#339911',
+ color: '#fff',
+ borderRadius: 15,
+ // padding: 5,
+ align: 'center',
+ width: 15,
+ height: 15
+ }
+ }
+ }
+ },
+ {
+ show: false,
+ inverse: true,
+ data: valdata,
+ axisLabel: {
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ }
+ },
+ axisLine: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisTick: {
+ show: false
+ }
+
+ }
+ ],
+ series: [
+ {
+ name: '鏉�',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data,
+ barWidth: 22,
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ color: function(params) {
+ // const num = myColor.length
+ // return myColor[params.dataIndex % num]
+ return myColor[params.dataIndex]
+ }
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ position: 'right',
+ formatter: '{c}',
+ fontSize: 14,
+ color: '#fff'
+ // formatter: '{c}%',
+ }
+ }
+ }
+ ]
+ }
+
+ return option
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 0417379..63f4fcd 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,7 +1,7 @@
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
-import { getCookie, getToken } from '@/utils/auth'
+import { getCookie, getToken, removeCookie } from '@/utils/auth'
// create an axios instance
const service = axios.create({
@@ -51,13 +51,24 @@
const res = response.data
// if the custom code is not 20000, it is judged as an error.
- if (res.code === '300') {
+ if (res.code === '300' || res.code === '303') {
Message({
message: res.Message || 'Error',
type: 'error',
duration: 5 * 1000
})
-
+ if (res.code === '303') {
+ removeCookie('ruleCode')
+ removeCookie('username')
+ removeCookie('admin')
+ removeCookie('navTabId')
+ removeCookie('usertype')
+ removeCookie('userid')
+ removeCookie('code')
+ setTimeout(() => {
+ window.location.reload()
+ }, 3000)
+ }
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
@@ -72,7 +83,24 @@
// })
// }
return Promise.reject(new Error(res.message || 'Error'))
- } else {
+ }
+ // else if (res.code === '303') {
+ // console.log(res.code, 888)
+ // Message({
+ // message: res.Message || 'Error',
+ // type: 'error',
+ // duration: 5 * 1000
+ // })
+ // removeCookie('ruleCode')
+ // removeCookie('username')
+ // removeCookie('admin')
+ // removeCookie('navTabId')
+ // removeCookie('usertype')
+ // removeCookie('userid')
+ // removeCookie('code')
+ // this.$router.push({ path: this.redirect || '/' })
+ // }
+ else {
return res
}
},
diff --git a/src/views/kb/kbCommon.css b/src/views/kb/kbCommon.css
index 237f4d0..d135d8c 100644
--- a/src/views/kb/kbCommon.css
+++ b/src/views/kb/kbCommon.css
@@ -3,33 +3,49 @@
height: 1080px;
position: relative;
background-color: #000;
- font-size: 20px;
+ font-size: 16px;
font-family: Microsoft YaHei;
+ color: #fff;
}
.kb_header {
/*background-color: #000;*/
- background-color: #123;
+ /*background-color: #123;*/
height: 90px;
line-height: 90px;
font-size: 40px;
color: #09d8f2;
}
+
+.kb_header_text{
+ letter-spacing: 5px;
+}
+
+.kb_headerPic{
+ position: absolute;
+ top: 39px;
+ width: 1808px;
+ height: 12px;
+ /*background-size: 100% 100%;*/
+ background: url("../../assets/images/kb_headtitle2.png") no-repeat;
+ margin-left: 56px;
+ /*margin-left: 40px;*/
+}
.kb_headTime{
position: absolute;
- left: 100px;
+ right: 10px;
width: 300px;
height: 50px;
z-index: 10;
- top: 20px;
+ top: 30px;
font-size: 22px;
}
.flex_c_c {
- display: flex;
- justify-content: center;
- align-content: center;
+ display: flex ;
+ justify-content: center ;
+ align-content: center ;
}
.flex_c_s {
@@ -39,6 +55,16 @@
/*align-content: center;*/
}
+.flex_e_c{
+ display: flex;
+ justify-content: space-evenly;
+ align-content: center;
+}
+
.kb_pd10{
padding: 10px;
}
+
+.kb_mt10{
+ margin-top: 10px;
+}
diff --git a/src/views/kb/zhkb.vue b/src/views/kb/zhkb.vue
index a07a4fe..4216a3b 100644
--- a/src/views/kb/zhkb.vue
+++ b/src/views/kb/zhkb.vue
@@ -1,31 +1,660 @@
<template>
<div>
<div class="kb_dashboard">
- <div class="kb_header ">
- <div class="flex_c_c">
+ <div class="kb_header">
+ <div class="flex_c_c kb_header_text">
澶у矝杞﹂棿缁煎悎鐪嬫澘
</div>
+ <div class="kb_headerPic" />
<div class="kb_headTime">
- <span>{{ headTime |dataFormat }}</span>
+ <span>{{ headTime }}</span>
</div>
</div>
<div class="kb_content">
<div class="kb_left">
+ <!-- 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 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>
+ <div>浜х嚎鍚嶇О:</div>
+ <div class="kb_mt10">浜х嚎鎬婚噺:</div>
+ </div>
+ <div>
+ <div>閿傜數浜х嚎</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </div>
+ <div class="kb_block02 kb_pd10">
+ <div>
+ <div>鍔犲伐鍗曞彿:</div>
+ <div class="kb_mt10">浜у搧鍚嶇О:</div>
+ <div class="kb_mt10">浠诲姟鏁伴噺:</div>
+ </div>
+ <div>
+ <div>MO-2022-07-29-0001</div>
+ <div class="kb_mt10">F09閿傜數</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </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">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">2000</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 flex_c_c">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div v-if="false" class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 flex_c_c">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="kb_block03_02 flex_e_c">
+
+ <div class="kb_block03_02_content flex_c_c">
+ <div class="flex_c_c content01">
+ <div class="circle" />
+ </div>
+ </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>
+ </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 255)" />
+ </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 class="kb_left_top_block">
+ <div class="kb_block01 kb_pd10">
+ <div>
+ <div>浜х嚎鍚嶇О:</div>
+ <div class="kb_mt10">浜х嚎鎬婚噺:</div>
+ </div>
+ <div>
+ <div>閿傜數浜х嚎</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </div>
+ <div class="kb_block02 kb_pd10">
+ <div>
+ <div>鍔犲伐鍗曞彿:</div>
+ <div class="kb_mt10">浜у搧鍚嶇О:</div>
+ <div class="kb_mt10">浠诲姟鏁伴噺:</div>
+ </div>
+ <div>
+ <div>MO-2022-07-29-0001</div>
+ <div class="kb_mt10">F09閿傜數</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </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">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">2000</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 flex_c_c">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div v-if="false" class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 flex_c_c">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="kb_block03_02 flex_e_c">
+
+ <div class="kb_block03_02_content flex_c_c">
+ <div class="flex_c_c content01">
+ <div class="circle" />
+ </div>
+ </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>
+ </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 255)" />
+ </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 class="kb_left_top_block">
+ <div class="kb_block01 kb_pd10">
+ <div>
+ <div>浜х嚎鍚嶇О:</div>
+ <div class="kb_mt10">浜х嚎鎬婚噺:</div>
+ </div>
+ <div>
+ <div>閿傜數浜х嚎</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </div>
+ <div class="kb_block02 kb_pd10">
+ <div>
+ <div>鍔犲伐鍗曞彿:</div>
+ <div class="kb_mt10">浜у搧鍚嶇О:</div>
+ <div class="kb_mt10">浠诲姟鏁伴噺:</div>
+ </div>
+ <div>
+ <div>MO-2022-07-29-0001</div>
+ <div class="kb_mt10">F09閿傜數</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </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">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">2000</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 flex_c_c">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div v-if="false" class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 flex_c_c">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="kb_block03_02 flex_e_c">
+
+ <div class="kb_block03_02_content flex_c_c">
+ <div class="flex_c_c content01">
+ <div class="circle" />
+ </div>
+ </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>
+ </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 255)" />
+ </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 class="kb_left_top_block">
+ <div class="kb_block01 kb_pd10">
+ <div>
+ <div>浜х嚎鍚嶇О:</div>
+ <div class="kb_mt10">浜х嚎鎬婚噺:</div>
+ </div>
+ <div>
+ <div>閿傜數浜х嚎</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </div>
+ <div class="kb_block02 kb_pd10">
+ <div>
+ <div>鍔犲伐鍗曞彿:</div>
+ <div class="kb_mt10">浜у搧鍚嶇О:</div>
+ <div class="kb_mt10">浠诲姟鏁伴噺:</div>
+ </div>
+ <div>
+ <div>MO-2022-07-29-0001</div>
+ <div class="kb_mt10">F09閿傜數</div>
+ <div class="kb_mt10">300</div>
+ </div>
+ </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">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">2000</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 ">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 flex_c_c">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+ <div v-if="false" class="kb_block03_content flex_c_c">
+ <div class="content01">棰嗘枡</div>
+ <div class="content02">
+ <div class="content02_1 ">浠诲姟</div>
+ <div class="content02_2 borderTop ">200</div>
+ </div>
+ <div class="content02">
+ <div class="content02_1 flex_c_c">鍚堟牸</div>
+ <div class="content02_2 borderTop ">199</div>
+ </div>
+ <div class="content02" style="border-right: 0">
+ <div class="content02_1 ">涓嶈壇</div>
+ <div class="content02_2 borderTop ">1</div>
+ </div>
+ </div>
+
+ </div>
+ <div class="kb_block03_02 flex_e_c">
+
+ <div class="kb_block03_02_content flex_c_c">
+ <div class="flex_c_c content01">
+ <div class="circle" />
+ </div>
+ </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>
+ </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 255)" />
+ </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">
- 2
+ <div class="kb_left_bottom_content">
+ <el-table
+ :data="tableData"
+ style="width: 100%;"
+ :header-cell-style="headerCellStyle"
+ :cell-style="cellStyle"
+ >
+ <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">
- 3
+ <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"
+ >
+ <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 class="kb_right_bottom kb_pd10">
+ <div class="kb_right_bottom_content">
+ <div id="bar02" style="width: 100%;height:100%" />
+ </div>
+ </div>
</div>
</div>
</div>
@@ -34,34 +663,234 @@
<script>
import './kbCommon.css'
+import { bar02, loadEcharts } from '@/utils/myEcharts'
export default {
name: 'Index2',
data() {
return {
- headTime: new Date(),
- leftTopData: [
- { id: 1, name: '閿傜數浜х嚎', value: 1000, children: [] },
- { id: 2, name: '鍖呰浜х嚎', value: 1200, children: [] },
- { id: 3, name: '鍖呰浜х嚎', value: 1300, children: [] }
- ]//
+ 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() {
- // setInterval(this.getNowTime, 500)
- this.handleData()
+ 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('bar02', bar02())
+ },
+
// 鑾峰彇褰撳墠鏃堕棿
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')
@@ -69,8 +898,29 @@
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}`
+ this.headTime = `${y}-${m}-${d} ${hh}:${mm}:${ss} ${week}`
+ },
+ headerCellStyle() {
+ // return { backgroundColor: 'transparent', padding: '0', textAlign: 'center' }
+ return {
+ backgroundColor: '#000',
+ padding: '17px 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)'
+ }
}
}
}
@@ -83,11 +933,24 @@
position: relative;
height: 990px;
width: 100%;
- background-color: #99a9bf;
+ background-color: #000;
+ letter-spacing: 2px;
.kb_left {
- width: 1340px;
+ width: 1345px;
height: 100%;
+ padding-left: 5px;
+
+ .kb_left_top_title01 {
+ position: absolute;
+ top: -3px;
+ left:15px;
+ }
+ .kb_left_top_title02{
+ position: absolute;
+ top: 483px;
+ left:15px;
+ }
.kb_left_top {
height: 495px;
@@ -95,29 +958,157 @@
flex-direction: column;
justify-content: space-around;
- .kb_block{
- width: 150px;
- height: 150px;
- color: #fff;
- letter-spacing:5px;
- background-color: #42b983;
+ .kb_left_top_block {
+ width: 100%;
+ height: 100px;
display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
+ 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);
+ }
+
+ .kb_block02 {
+ width: 304px;
+ display: flex;
+ align-items: center;
+ 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);
+ width: 200px;
+ height: 50px;
+
+ .content01 {
+ width: 50px;
+ border-right: 1px solid rgba(255,255,255,0.6);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .content02 {
+ width: 50px;
+ border-right: 1px solid rgba(255,255,255,0.6);
+
+ .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 rgba(255,255,255,0.6);
+ }
+ }
+ }
+ }
+
+ .kb_block03_02 {
+ margin-top: 7px;
+
+ .kb_block03_02_content {
+ width: 200px;
+
+ .content01 {
+ .circle {
+ width: 26px;
+ height: 26px;
+ background-color: #00ff8b;
+ border-radius: 50%;
+ }
+
+ }
+
+ }
+ }
+
+ .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;
+ }
+ }
+ }
+
}
+
}
.kb_left_bottom {
height: 495px;
- background-color: #20a0ff;
+
+ .kb_left_bottom_content {
+ border: 1px solid rgba(255,255,255,0.6);
+ height: 460px;
+ }
}
}
.kb_right {
- width: 580px;
+ width: 575px;
height: 100%;
- background-color: #42b983;
+
+ .kb_right_top {
+ height: 476px;
+ 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: 76px;
+ line-height: 76px;
+ border-bottom: 1px solid rgba(255,255,255,0.6);
+ text-align: center;
+ }
+ }
+ }
+
+ .kb_right_bottom {
+ height: 481px;
+ margin-top: 8px;
+
+ .kb_right_bottom_content {
+ border: 1px solid rgba(255,255,255,0.6);
+ width: 100%;
+ height: 100%;
+ }
+ }
}
}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 94f903d..0bf205c 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -116,11 +116,32 @@
</el-form>
</div>
+ <el-dialog
+ title="鎻愮ず"
+ :visible.sync="dialogVisible"
+ width="500px"
+ :close-on-click-modal="false"
+ :show-close="false"
+ top="5vh"
+ >
+ <div style="font-size:20px;">
+ <!-- <i class="el-icon-warning-outline" style="color: #ffef00" />-->
+ 褰撳墠璐﹀彿宸茬櫥褰曪紝鏄惁寮哄埗涓嬬嚎!
+ </div>
+ <span slot="footer" class="dialog-footer">
+ <div class="footerButton">
+ <el-button @click="dialogVisibleCancel">鍚�</el-button>
+ <el-button type="primary" @click="dialogVisibleConfirm">鏄�</el-button>
+ </div>
+ </span>
+ </el-dialog>
</div>
</template>
<script>
import { validUsername } from '@/utils/validate'
+import { getCookie, removeCookie, setCookie } from '@/utils/auth'
+import { ForcedOffline } from '@/api/user'
export default {
name: 'Login',
@@ -166,7 +187,8 @@
passwordType: 'password',
redirect: undefined,
focus1: false,
- focus2: false
+ focus2: false,
+ dialogVisible: false
}
},
watch: {
@@ -193,7 +215,12 @@
if (valid) {
this.loading = true
this.$store.dispatch('user/login', this.loginForm).then(() => {
- this.$router.push({ path: this.redirect || '/' })
+ console.log(getCookie('code') === '302')
+ if (getCookie('code') === '302') {
+ this.dialogVisible = true
+ } else {
+ this.$router.push({ path: this.redirect || '/' })
+ }
this.loading = false
}).catch(() => {
this.loading = false
@@ -203,6 +230,34 @@
return false
}
})
+ },
+
+ dialogVisibleCancel() {
+ removeCookie('username')
+ removeCookie('admin')
+ removeCookie('navTabId')
+ removeCookie('usertype')
+ removeCookie('userid')
+ removeCookie('code')
+ this.dialogVisible = false
+ },
+ async dialogVisibleConfirm() {
+ const usercode = getCookie('navTabId')
+ const username = getCookie('admin')
+ const usertype = getCookie('usertype')
+ const userid = getCookie('userid')
+ const data = {
+ usercode,
+ username,
+ usertype,
+ userid
+ }
+ const res = await ForcedOffline(data)
+ if (res.code === '200') {
+ this.$message.success('寮哄埗涓嬬嚎鎴愬姛锛�')
+ this.dialogVisible = false
+ this.$router.push({ path: this.redirect || '/' })
+ }
}
}
}
@@ -393,4 +448,7 @@
-webkit-text-fill-color: #000 !important;
}
}
+::v-deep .el-dialog__title{
+ color: red;
+}
</style>
--
Gitblit v1.9.3