日志、可视化

dev_2022-04-07
yujialong 3 years ago
parent a749baf513
commit 23f2121f9a
  1. BIN
      src/assets/img/log-bg.png
  2. 168
      src/layouts/header/index.vue
  3. 172
      src/layouts/home/index.vue
  4. 8
      src/pages/account/login/index.vue
  5. 12
      src/pages/screen/list/index.vue
  6. 2
      src/setting.js

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 75 KiB

@ -46,33 +46,6 @@
<el-button size="small" type="primary" @click="editPassword"> </el-button>
</span>
</el-dialog>
<div class="log-mask" v-if="logVisible"></div>
<div class="log-dia" v-if="logVisible">
<img class="bg1" src="@/assets/img/log-bg.png" alt="">
<img class="bg2" src="@/assets/img/log-bg1.png" alt="">
<p class="log-title">更新日志</p>
<div class="log-wrap">
<div class="logs">
<div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
<h6>{{ item.versionName }}</h6>
<img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
<ul class="detail">
<li v-for="(item, i) in item.logContents" :key="i">
<p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
<div class="val">
<p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}{{ item }}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="more-wrap">
<p>更多功能介绍点击 <span class="more" @click="logAll = !logAll">了解更多</span></p>
<el-button class="know" type="primary" size="small" @click="logVisible = false">知道了</el-button>
</div>
</div>
</div>
</div>
</template>
<script>
@ -94,27 +67,7 @@ export default {
password: '',
newPassword: '',
reNewPassword: ''
},
logVisible: false,
list: [],
logAll: false,
funcList: [
{
id: 0,
name: '新功能',
icon: 'func'
},
{
id: 1,
name: '修复',
icon: 'bug'
},
{
id: 2,
name: '优化',
icon: 'optimize'
}
]
};
},
components: { navbar },
@ -141,42 +94,15 @@ export default {
userName
})
}
this.logView || this.getLogStatus() // logViewfalse
// ,
setTimeout(() => {
this.token && !this.isCustomer && this.getUserInfo()
}, 1000)
},
methods: {
...mapMutations('user', [
'SET_LOG'
]),
...mapActions('user', [
'setInfo', 'logout', 'setManager', 'setCustomer'
]),
//
getLog() {
this.$get(`${this.api.platformLogList}?platformId=${Setting.platformId}&port=1&versionName=`).then(({ logList }) => {
logList.map((e, i) => {
e.logContents.map(n => {
n.content = n.content.split('\n')
})
})
this.list = logList
}).catch(res => {})
},
//
getLogStatus() {
this.token && this.$get(this.api.logNotification, {
platformId: Setting.platformId
}).then(({ notification }) => {
this.SET_LOG() // true
if (notification) {
this.logVisible = true // true
this.getLog()
}
}).catch(res => {})
},
//
getUserInfo() {
this.$get(this.api.userInfo).then(res => {
@ -367,98 +293,4 @@ $height: 64px;
}
}
}
.log-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .4);
}
/deep/.log-dia {
position: absolute;
top: calc((100vh - 500px) / 2);
left: 50%;
width: 500px;
transform: translateX(-50%);
background-color: #fff;
border-radius: 6px;
.bg1 {
width: 100%;
height: 200px;
}
.bg2 {
position: absolute;
top: -150px;
left: 0;
max-width: 100%;
}
.log-title {
position: absolute;
top: 90px;
left: 130px;
font-size: 40px;
color: #fff;
font-weight: 600;
}
.log-wrap {
padding-bottom: 30px;
}
.logs {
max-height: 300px;
padding: 0 60px;
margin: 30px 0;
overflow: auto;
}
h6 {
margin-bottom: 15px;
font-size: 18px;
color: #333;
line-height: 1;
}
.more-wrap {
padding: 0 60px;
font-size: 14px;
color: #333;
}
.more {
font-size: 14px;
color: $main-color;
cursor: pointer;
&:hover {
opacity: .9;
}
}
.know {
margin-top: 15px;
}
.cover {
max-width: 400px;
margin: 10px 0 20px;
}
.detail {
li {
margin-bottom: 20px;
}
.name {
display: flex;
align-items: center;
margin-bottom: 5px;
font-size: 14px;
img {
width: 20px;
margin-right: 8px;
}
}
.val {
font-size: 15px;
line-height: 1.8;
white-space: pre-wrap;
p {
position: relative;
color: #505050;
}
}
}
}
</style>

@ -9,6 +9,31 @@
<el-backtop target=".content"></el-backtop>
<v-footer></v-footer>
</div>
<div class="log-mask" v-if="logVisible"></div>
<div class="log-dia" v-if="logVisible">
<img class="bg1" src="@/assets/img/log-bg.png" alt="">
<img class="bg2" src="@/assets/img/log-bg1.png" alt="">
<p class="log-title">更新日志</p>
<div class="log-wrap">
<div class="logs">
<div class="item" v-for="(item, i) in list" :key="i" v-show="!i || (i && logAll)">
<h6>{{ item.versionName }}</h6>
<img v-if="item.coverUrl" :src="item.coverUrl" alt="" class="cover">
<ul class="detail">
<li v-for="(item, i) in item.logContents" :key="i">
<p class="name"><img :src="require('@/assets/img/' + funcList.find(e => e.id === item.type).icon + '.png')" alt=""> {{ funcList.find(e => e.id === item.type).name }}</p>
<div class="val">
<p v-for="(item, i) in item.content" :key="i">{{ i + 1 }}{{ item }}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="more-wrap">
<el-button class="know" type="primary" size="small" @click="logVisible = false">知道了</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
@ -16,26 +41,77 @@
<script>
import vHead from '../header'
import vFooter from '../footer'
import { mapActions } from 'vuex'
import { mapState, mapMutations, mapActions } from 'vuex'
import Setting from '@/setting'
import util from '@/libs/util'
export default {
data() {
return {
logVisible: false,
list: [],
logAll: false,
funcList: [
{
id: 0,
name: '新功能',
icon: 'func'
},
{
id: 1,
name: '修复',
icon: 'bug'
},
{
id: 2,
name: '优化',
icon: 'optimize'
}
]
};
},
components: {
vHead,
vFooter
},
computed: {
...mapState("user", [
'logView'
])
},
mounted() {
this.autoLogout()
this.logView || this.getLogStatus() // logViewfalse
},
methods: {
...mapMutations("user", [
'SET_LOG'
]),
...mapActions('user', [
'logout'
]),
//
getLog() {
this.$get(`${this.api.platformLogList}?platformId=${Setting.platformId}&port=1&versionName=`).then(({ logList }) => {
logList.map((e, i) => {
e.logContents.map(n => {
n.content = n.content.split('\n')
})
})
this.list = logList
}).catch(res => {})
},
//
getLogStatus() {
util.local.get(Setting.tokenKey) && this.$get(this.api.logNotification, {
platformId: Setting.platformId
}).then(({ notification }) => {
this.SET_LOG() // true
if (notification) {
this.logVisible = true // true
this.getLog()
}
}).catch(res => {})
},
// ,退
autoLogout() {
let lastTime = new Date().getTime()
@ -76,4 +152,96 @@ export default {
padding: 0;
}
}
.log-mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .4);
}
/deep/.log-dia {
z-index: 11;
position: absolute;
top: 250px;
left: 50%;
width: 550px;
transform: translateX(-50%);
background-color: #fff;
border-radius: 6px;
.bg1 {
width: 100%;
height: 140px;
}
.bg2 {
position: absolute;
top: -130px;
left: 48px;
max-width: 100%;
height: 250px;
}
.log-title {
position: absolute;
top: 65px;
left: 0;
width: 100%;
text-align: center;
font-size: 22px;
color: #fff;
font-weight: 600;
}
.log-wrap {
padding-bottom: 30px;
}
.logs {
max-height: 250px;
padding: 0 100px;
margin: 30px 0;
overflow: auto;
}
h6 {
margin-bottom: 15px;
font-size: 16px;
color: #333;
line-height: 1;
}
.more-wrap {
padding: 0 60px;
font-size: 14px;
color: #333;
text-align: center;
}
.know {
margin-top: 15px;
}
.cover {
max-width: 250px;
margin: 10px 0 20px;
}
.detail {
li {
margin-bottom: 20px;
}
.name {
display: flex;
align-items: center;
margin-bottom: 5px;
font-size: 14px;
img {
width: 20px;
margin-right: 8px;
}
}
.val {
font-size: 15px;
line-height: 1.8;
white-space: pre-wrap;
p {
position: relative;
font-size: 13px;
color: #727272;
}
}
}
}
</style>

@ -249,7 +249,8 @@ export default {
//
chooseUser(user) {
user.isEnable && this.$post(`${this.api.getToken}?id=${user.id}`).then(({ data }) => {
this.queryClient(data.token)
this.token = data.token
this.setLogin()
}).catch(res => {})
},
//
@ -294,8 +295,13 @@ export default {
} else if (status == 200) {
//
if (data instanceof Array) {
//
if (data.length === 1) {
this.chooseUser(data[0])
} else {
this.users = data
this.userVisible = true
}
} else {
this.token = data.token
this.setLogin()

@ -648,13 +648,13 @@ export default {
boundaryGap: false,
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
color: "rgba(255,255,255,1)",
fontSize: 12,
},
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,.2)'
color: 'rgba(255,255,255,1)'
}
},
data: data.map(e => e.statistical_time.replace(' 0:00', ''))
@ -680,7 +680,7 @@ export default {
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.6)",
color: "rgba(255,255,255,1)",
fontSize: 12,
},
},
@ -990,9 +990,7 @@ export default {
axisLabel: {
margin: 10,
textStyle: {
fontSize: 12
},
textStyle: {
fontSize: 12,
color: '#fff'
},
formatter: '{value}%'
@ -1112,7 +1110,7 @@ export default {
// 使 -> value: number | Array
formatter: function (val) {
const { data } = val
return data ? (data.name + '利率: ' + data.value + '%') : val.name
return data ? (data.name + '利率: ' + data.value + '%') : ''
}
},
//

@ -25,7 +25,7 @@ const Setting = {
* 正式http://www.dataforward.cn:9000
* */
// apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000' : 'http://39.108.250.202:9000',
apiBaseURL: env === 'development' ? 'http://192.168.31.151:9000/' : `${location.origin}:9000/`,
apiBaseURL: env === 'development' ? 'http://39.108.250.202:9000/' : `${location.origin}:9000/`,
// 加密货币接口地址
cryptoBaseURL: `http://159.138.53.111/`,
// 接口请求返回错误时,弹窗的持续时间,单位:秒

Loading…
Cancel
Save