yxt_group
/
supervise
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善问题

master
yunuo970428 2 years ago
parent
1321500912
commit
cf6ff75624
2 changed files with 30 additions and 349 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      supervise-message-ui/src/router/index.js
  2. 346
      supervise-message-ui/src/views/index.vue

33
supervise-message-ui/src/router/index.js
View File

@ -22,14 +22,31 @@ export const constantRoutes = [
{
path: '/',
redirect: 'index'
}, {
path: '/login',
component: () => import('@/views/login/login.vue')
}, {
path: '/home',
component: () => import('@/views/Home/Home.vue'),
name: 'home'
},
// {
// path: '/login',
// component: () => import('@/views/login/login.vue')
// }, {
// path: '/home',
// component: () => import('@/views/Home/Home.vue'),
// name: 'home'
//
// },
{
path: '/index',
component: Layout,
redirect: '/index',
children: [{
path: '/index',
component: () =>
import('@/views/index.vue'),
name: 'index',
meta: {
title: '主页',
noCache: true,
affix: true
}
}]
},
{
path: '/message',

346
supervise-message-ui/src/views/index.vue
View File

@ -1,289 +1,17 @@
<template>
<div class="index" style="height: calc(100vh - 200px);overflow-x: hidden;overflow-y: auto;">
<div class="index_top">
<div style="flex: 1;">
<span class="index_top_text" @click="show">数据总览</span>
<el-date-picker v-model="params.date" type="date" clearable value-format="yyyy-MM-dd" placeholder="选择日期" />
</div>
</div>
<div class="index_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">未读消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in newMessageList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1 ;-webkit-box-orient: vertical;"
>{{
item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<div style="display: flex;flex-direction: row; justify-content: space-between; align-items: center;">
<span style="font-weight: 600;">已读消息</span>
<span style="color: #4386FF; font-size: 13px; text-decoration: underline;">查看更多</span>
</div>
<div v-for="(item, index) in larmCenterList" :key="index" style="margin-top: 20px;">
<div
style="display: flex;flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px;"
@click="companyInfo(item.sid)"
>
<span
style="font-size: 16px;color: #444;overflow: hidden;margin-right:20px;flex: 1;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1 ;
-webkit-box-orient: vertical;"
>{{ item.name }}</span>
<span style="font-size: 13px;color: #999;">{{ item.date }}</span>
</div>
</div>
</div>
</div>
<div class="index_content">
<div class="index_content_bottom">
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">消息回复</span>
<div id="main1" ref="main1" class="middle" />
</div>
<div style="flex: 0.1;" />
<div class="item_border" style="display: flex;flex-direction: column; padding: 20px 20px; flex: 1;">
<span style="font-weight: 600;">消息状态</span>
<div id="main2" ref="main2" class="middle" />
</div>
</div>
</div>
<div class="imgDemo">
</div>
</template>
</div>
<script>
import * as echarts from 'echarts'
import {
login1
} from '@/api/system/user/login.js'
export default {
name: '',
data() {
return {
token: '',
params: {
date: null
},
info: {
date: '',
notice: '通知：请于2023年3月3日16点向***3189帐户回款1231234元。[点击回款]'
},
newMessageList: [{
sid: '1',
name: '[消息]您的订单已经审核完毕等待放款。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级风险，请及时做出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2023年3月3日16点向***3189帐户回款231234元。',
date: '2023-01-01'
}],
larmCenterList: [{
sid: '1',
name: '仓库于2023年3月3日产生1级风险。',
date: '2023-01-01'
}, {
sid: '2',
name: '[通知]通知仓库商品产生1级出回复。',
date: '2023-01-01'
}, {
sid: '3',
name: '[消息]您的订单由于商品不存在被退回。',
date: '2023-01-01'
}, {
sid: '4',
name: '[消息]请于2**3189帐户回款231234元。',
date: '2023-01-01'
}
]
token:''
}
},
mounted() {
this.drawLine1()
this.drawLine2()
},
methods: {
show() {
this.drawLine1()
this.drawLine2()
},
drawLine1() {
// let mychart = echarts.init(this.$refs.main1)
var myChart = echarts.init(document.getElementById('main1'))
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: {
// 数据视图
show: true,
readOnly: true
},
magicType: {
// 切换图形
show: false,
type: ['line', 'bar']
},
// 还原
restore: {
show: false
},
// 下载
saveAsImage: {
show: false
}
}
},
grid: {
height: 220
},
legend: {
data: ['回复率']
},
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
axisPointer: {
type: 'shadow'
}
}],
yAxis: [{
type: 'value',
name: '速度/秒',
min: 1,
max: 120,
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '回复速度',
type: 'bar',
tooltip: {
valueFormatter: function(value) {
return value + ' 秒'
}
},
data: [
60, 50, 40, 50, 54, 62, 45
]
}
]
})
},
// 饼状图图初始化
drawLine2() {
// 基于准备好的dom，初始化echarts实例
// let mychart = echarts.init(this.$refs.main2)
var myChart = echarts.init(document.getElementById('main2'))
// 绘制图表
// console.log('option', obj)
myChart.setOption({
legend: {
top: 'bottom'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
// 数据图标
dataView: {
show: false,
readOnly: false
},
// 刷新图标
restore: {
show: true
},
// 下载图标
saveAsImage: {
show: true
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
series: [{
name: '消息状态',
type: 'pie',
radius: [20, 100],
center: ['50%', '40%'],
roseType: 'area',
itemStyle: {
borderRadius: 6
},
data: [
{
'value': 907,
'name': '已读'
},
{
'value': 907,
'name': '未读'
}
]
}]
})
}
methods:{
}
}
</script>
@ -292,72 +20,8 @@ export default {
.imgDemo {
width: 100%;
height: 100%;
background: radial-gradient(#fff, #f5f7f4, #fff);
background: radial-gradient(#fff,#f5f7f4, #fff);
}
.middle {
justify-content: center;
width: 100%;
height: 300px;
}
.index {
padding: 40px 80px;
background: #FFFFFF;
.index_top {
display: flex;
flex-direction: row;
align-items: center;
.index_top_text {
font-size: 25px;
font-weight: bold;
color: #000;
margin-right: 20px;
}
.index_top_right {
font-size: 14px;
font-weight: bold;
color: #FF5046;
}
}
.index_content {
display: flex;
flex-direction: column;
margin-top: 30px;
.index_content_top {
display: flex;
flex-direction: row;
}
.index_content_bottom {
display: flex;
flex-direction: row;
margin-top: 30px;
}
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
.index_bottom {
margin-top: 20px;
display: flex;
.item_border {
border-radius: 10px;
border: 1px solid #cddbf7;
}
}
canvas {
}
canvas {}
</style>

Write Preview
Loading…
Cancel
Save