Skip to content

T
template_vue
Commit fb68d5ff authored by 杨硕's avatar 杨硕
Browse files
Options

添加控制台

parent 4481a194
Show whitespace changes
Inline Side-by-side
Showing with 753 additions and 0 deletions
src/views/controlPlatform/control.vue 0 → 100644
View file @ fb68d5ff
<template>
<div class="controlPlatform">
<div class="controlPlatform-top">
<el-card>
<el-row>
<el-col :span="6">
<div>
<div class="topTitle">本月注册用户量</div>
<div class="TopBody">
<div>
<img class="span_image" src="@/assets/image/controlIcon.png">
</div>
<div>20</div>
</div>
<div class="TopFooter">
<div style="display: inline-block">月</div>
<div style="display: inline-block">
<img style="color: red" class="arrows" src="@/assets/image/controlUp.png">
</div>
<div style="color: #DC1919; display: inline-block">20%</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div>
<div class="topTitle">本月实名用户量（新增）</div>
<div class="TopBody">
<div>
<img class="span_image" src="@/assets/image/controlIcon2.png">
</div>
<div>10</div>
</div>
<div class="TopFooter">
<div style="display: inline-block">月</div>
<div style="display: inline-block">
<img style="color: red" class="arrows" src="@/assets/image/controlUp.png">
</div>
<div style="color: #DC1919; display: inline-block">3%</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div>
<div class="topTitle">本月用户量（新增）</div>
<div class="TopBody">
<div>
<img class="span_image" src="@/assets/image/controlIcon3.png">
</div>
<div>10</div>
</div>
<div class="TopFooter">
<div style="display: inline-block">月</div>
<div style="display: inline-block">
<img style="color: red" class="arrows" src="@/assets/image/controlUp.png">
</div>
<div style="color: #DC1919;display: inline-block">3%</div>
</div>
</div>
</el-col>
<el-col :span="6">
<div>
<div class="topTitle">本月申请量（新增）</div>
<div class="TopBody">
<div>
<img class="span_image" src="@/assets/image/controlIcon4.png">
</div>
<div>2</div>
</div>
<div class="TopFooter">
<div style="display: inline-block">月</div>
<div style="display: inline-block">
<img style="color: red" class="arrows" src="@/assets/image/controlUp.png">
</div>
<div style="color: #DC1919;display: inline-block">1%</div>
</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div class="controlPlatform-body">
<el-row :gutter="10" style="margin-bottom: 10px">
<el-col :span="16">
<el-card>
<el-row>
<el-col :span="12">
<div class="controlSpan_middle">数据统计</div>
</el-col>
<el-col :span="12">
<!-- <div style="float: right">-->
<!-- <el-button style="padding-right: 0;padding-top: 0; color: #666" type="text" @click="$router.push({path:'/dataStatistics/createCaseStatistics'})">查看更多-->
<!-- <i class="el-icon-arrow-right" />-->
<!-- </el-button>-->
<!-- </div>-->
</el-col>
</el-row>
<el-divider class="controlDivider" />
<div>
<el-row>
<!-- <el-col :span="6">-->
<!--&lt;!&ndash; <el-select v-model="caseType" placeholder="请选择" @change="handleGetStatisticsData">&ndash;&gt;-->
<!--&lt;!&ndash; <el-option&ndash;&gt;-->
<!--&lt;!&ndash; v-for="item in options"&ndash;&gt;-->
<!--&lt;!&ndash; :key="item.value"&ndash;&gt;-->
<!--&lt;!&ndash; :label="item.label"&ndash;&gt;-->
<!--&lt;!&ndash; :value="item.value"&ndash;&gt;-->
<!--&lt;!&ndash; />&ndash;&gt;-->
<!--&lt;!&ndash; </el-select>&ndash;&gt;-->
<!-- </el-col>-->
<el-col :span="24">
<div style="float: right">
<el-radio-group v-model="range" @change="handleGetStatisticsData">
<el-radio :label="0">日</el-radio>
<el-radio :label="1">周</el-radio>
<el-radio :label="2">月</el-radio>
<el-radio :label="3">季</el-radio>
<el-radio :label="4">年</el-radio>
</el-radio-group>
</div>
</el-col>
</el-row>
</div>
<div id="echarts-data" class="span_1">
<div id="dataCharts_data" ref="chart_data" style="height: 40vh" />
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card>
<el-row>
<el-col :span="12">
<div class="controlSpan_middle">留言</div>
</el-col>
<!-- <el-col :span="12">-->
<!-- <div style="float: right">-->
<!-- <el-button style="padding-right: 0;padding-top: 0; color: #666" type="text" @click="$router.push({path:'/sf/lawer/LeaveMessage/index'})">查看更多-->
<!-- <i class="el-icon-arrow-right" />-->
<!-- </el-button>-->
<!-- </div>-->
<!-- </el-col>-->
</el-row>
<el-divider class="controlDivider" />
<el-row>
<div style="float: right">
<el-button size="mini" :class="isShow ? 'active' : 'btn1'" @click="leaveMessageBtnMonth">本月</el-button>
<el-button size="mini" :class="isShow2 ? 'active' : 'btn1'" style="margin-left: 3px!important;" @click="leaveMessageBtnYear">本年</el-button>
</div>
</el-row>
<div id="echarts-leaveMessage" class="span_1">
<div id="dataCharts_leaveMessage" ref="chart_leaveMessage" style="height: 40vh" />
</div>
</el-card>
</el-col>
</el-row>
</div>
<div class="controlPlatform-footer">
<el-row :gutter="10">
<el-col :span="10">
<el-card style="height: 393px">
<div style="display: flex;justify-content: space-between">
<div class="controlSpan_middle">
访客数据（今日）
</div>
<div>
当前院内访客: <span style="color: #333333;font-size: 16px;font-weight: bold">20</span>人
</div>
</div>
<el-divider class="chosenOne-divider" />
<div id="echarts-visitor" class="span_1" style="margin-top: -20px">
<div id="dataCharts_visitor" ref="chart_data" style="height: 350px" />
</div>
</el-card>
</el-col>
<el-col :span="14">
<el-card style="min-height: 393px">
<el-row>
<el-col :span="12">
<div class="end_title">留言</div>
</el-col>
<!-- <el-col :span="12">-->
<!-- <div style="float: right">-->
<!-- <el-button style="padding-right: 0; color: #666" type="text" @click="$router.push({path:'/sf/lawer/LeaveMessage/index'})">查看更多-->
<!-- <i class="el-icon-arrow-right" />-->
<!-- </el-button>-->
<!-- </div>-->
<!-- </el-col>-->
</el-row>
<el-divider class="controlDivider" />
<div class="end_table">
<el-table
class="table-list"
:data="tableList"
>
<el-table-column type="index" label="序号" width="55" />
<el-table-column label="留言人" prop="userName" />
<el-table-column label="标题" prop="leaveTitle" />
<el-table-column label="留言时间" prop="leaveDate" />
<el-table-column
label="操作"
width="150"
>
<template slot-scope="scope">
<el-button style="padding: 0!important;" type="text" size="small">查看</el-button>
<el-button style="padding: 0!important;margin-left: 13px;" type="text" size="small">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
// import { controlData } from './apis'
// import { judgeLeaveMessage } from '@/views/judgeMessageManage/apis'
export default {
name: 'Control',
data() {
return {
isShow: true,
isShow2: false,
judgeMessageData: 0,
dateLists: ['2023-07-20', '2023-07-21', '2023-07-22', '2023-07-23', '2023-07-24', '2023-07-25', '2023-07-26'],
commitLists: ['7', '16', '4', '11', '13', '19', '12'],
passLists: ['3', '2', '0', '2', '7', '3', '1'],
caseType: 1,
range: 0,
JudgeMessageForm: {
gx: '',
gx_reploy: '',
jy: '',
jy_reploy: '',
qz: '',
qz_reploy: '',
ts: '',
ts_reploy: '',
zx: '',
zx_reploy: ''
},
causeForm: {
sum: '',
percent: '',
direction: ''
},
visitorDate: {
inCount: '',
nowInCount: '',
outCount: ''
},
userForm: {
authChangeNum: '',
authChange: '',
authCount: '',
lawyerChangeNum: '',
lawyerChange: '',
lawyerCount: '',
registerChangeNum: '',
registerChange: '',
registerCount: ''
},
number: '-50.00',
tableList: [
{
userName: '张三',
leaveTitle: '留言',
leaveDate: '2023-07-12'
},
{
userName: '张三',
leaveTitle: '留言',
leaveDate: '2023-07-12'
},
{
userName: '张三',
leaveTitle: '留言',
leaveDate: '2023-07-12'
}
],
options: [
{ value: 1, label: '审判立案' },
{ value: 2, label: '执行立案' },
{ value: 3, label: '保全立案' },
{ value: 4, label: '调解立案' },
{ value: 5, label: '信访立案' }
]
}
},
mounted() {
this.handleGetCauseNum()
this.handleGetJudgeMessage()
this.handGetUserNum()
//
this.getVisitorDate()
this.handleGetJudgeMessageData()
this.handleGetStatisticsData()
// 通过监听内容部分的宽度让图表resize
var elementResizeDetectorMaker = require('element-resize-detector')
var erd = elementResizeDetectorMaker()
var that = this
erd.listenTo(document.getElementById('echarts-data'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_data')).resize()
})
})
erd.listenTo(document.getElementById('echarts-leaveMessage'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_leaveMessage')).resize()
})
})
erd.listenTo(document.getElementById('echarts-visitor'), function(element) {
var width = element.offsetWidth
var height = element.offsetHeight
self.tableHeight = height // 将监听到的宽高进行赋值
self.tableWidth = width
that.$nextTick(function() {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
echarts.init(document.getElementById('dataCharts_visitor')).resize()
})
})
},
methods: {
handleClick(row) {
this.$router.push({
path: '/sf/message/messageBack',
query: {
form: JSON.parse(JSON.stringify(row)),
businessId: row.businessId,
leaveStatus: row.leaveStatus
}
})
},
/** 法官留言删除接口*/
del(row) {
this.$confirm(`您确定要删除“${row.leaveTitle}”司法案件？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
judgeLeaveMessage.del(row.businessId).then(res => {
if (res.code === 200) {
this.$message.success('删除成功')
this.handleGetJudgeMessage()
} else {
this.$message.error(res.msg || '网络异常，请稍后重试')
}
})
})
},
/** 本月按钮*/
leaveMessageBtnMonth() {
this.isShow = true
this.isShow2 = false
this.judgeMessageData = 0
this.handleGetJudgeMessageData()
},
/** 本年按钮*/
leaveMessageBtnYear() {
this.isShow = false
this.isShow2 = true
this.judgeMessageData = 1
this.handleGetJudgeMessageData()
},
/** 获取统计数据图*/
handleGetStatisticsData() {
// const row = {
// range: this.range,
// caseType: this.caseType
// }
// console.log(row)
// console.log('12312312312312')
// controlData.getStatisticsData(row).then(res => {
// this.statisticsDataLists = Object.values(res.data)
// const dateList = []
// const commitList = []
// const passList = []
// this.statisticsDataLists.forEach(item => {
// dateList.push(item.date)
// commitList.push(item.commit)
// passList.push(item.pass)
// })
// this.dateLists = dateList
// this.commitLists = commitList
// this.passLists = passList
if (this.range === 0) {
this.dateLists = ['2023-07-20', '2023-07-21', '2023-07-22', '2023-07-23', '2023-07-24', '2023-07-25', '2023-07-26']
}
if (this.range === 1) {
this.dateLists = ['2023-26', '2023-27', '2023-28', '2023-29', '2023-30']
this.commitLists = ['7', '16', '4', '11', '13']
this.passLists = ['3', '2', '0', '2', '7']
}
if (this.range === 2) {
this.dateLists = ['2023-03', '2023-04', '2023-05', '2023-06', '2023-07']
this.commitLists = ['7', '16', '4', '11', '13']
this.passLists = ['3', '2', '0', '2', '7']
}
if (this.range === 3) {
this.dateLists = ['2022-11', '2022-12', '2023-1', '2023-2', '2023-3']
this.commitLists = ['7', '16', '4', '11', '13']
this.passLists = ['3', '2', '0', '2', '7']
}
if (this.range === 4) {
this.dateLists = ['2019', '2020', '2021', '2022', '2023']
this.commitLists = ['7', '16', '4', '11', '13']
this.passLists = ['3', '2', '0', '2', '7']
}
this.getRegistrationTime()
// })
},
/** 法官留言数据图*/
handleGetJudgeMessageData() {
// controlData.getJudgeMessageData(this.judgeMessageData).then(res => {
// this.JudgeMessageForm = res.data
this.dataChartsLeaveMessage()
// })
},
/** 访客数据图*/
getVisitorDate() {
// controlData.getVisitor().then(res => {
// this.visitorDate = res.data
this.getVisitorData()
// })
},
/** 获取立案数量*/
handleGetCauseNum() {
// controlData.getCauseNum().then(res => {
// this.causeForm.sum = res.data.sum
// this.causeForm.direction = res.data.direction
// this.causeForm.percent = res.data.percent
// })
},
/** 获取用户数量*/
handGetUserNum() {
// controlData.getUserNum().then(res => {
// this.userForm.authCount = res.data.authCount
// this.userForm.lawyerCount = res.data.lawyerCount
// this.userForm.authCount = res.data.authCount
// this.userForm.registerCount = res.data.registerCount
// this.userForm.lawyerChange = res.data.lawyerChange
// this.userForm.registerChange = res.data.registerChange
// if (res.data.authChange === '--') {
// this.userForm.authChangeNum = res.data.authChange
// } else {
// this.userForm.authChangeNum = Math.abs(res.data.authChange).toFixed(2)
// }
// if (res.data.lawyerChange === '--') {
// this.userForm.lawyerChangeNum = res.data.lawyerChange
// } else {
// this.userForm.lawyerChangeNum = Math.abs(res.data.lawyerChange).toFixed(2)
// }
// if (res.data.registerChange === '--') {
// this.userForm.registerChangeNum = res.data.registerChange
// } else {
// this.userForm.registerChangeNum = Math.abs(res.data.registerChange).toFixed(2)
// }
// })
},
/** 获取法官留言List*/
handleGetJudgeMessage() {
// const row = {
// leaveStatus: 0
// }
// controlData.getJudgeMessage(row).then(res => {
// this.tableList = res.rows.slice(0, 5)
// })
},
/** 数据统计*/
getRegistrationTime() {
const myChartRegistrationTime = echarts.init(document.getElementById('dataCharts_data'))
var optionRegistrationTime = {
tooltip: {
trigger: 'item'
},
legend: {
x: 'center',
y: 'bottom',
data: ['申请量', '审核通过量'],
// 图例之间的间距
itemGap: 20,
// 图标高度
itemHeight: 12,
textStyle: {
// 字体大小
fontSize: 13
}
},
xAxis: {
type: 'category',
data: this.dateLists
},
yAxis: {
type: 'value'
},
series: [{
name: '立案申请量',
data: this.commitLists,
type: 'line'
},
{
name: '审核通过量',
data: this.passLists,
type: 'line'
}
]
}
myChartRegistrationTime.setOption(optionRegistrationTime)
},
/** 法官留言(雷达图)
* */
dataChartsLeaveMessage() {
if (this.judgeMessageData === 0) {
const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
const optionAverage = {
tooltip: {
trigger: 'axis'
},
legend: {
x: 'center',
y: 'bottom',
data: ['本月留言量', '本月回复量'],
// 图例之间的间距
itemGap: 20,
// 图标高度
itemHeight: 12,
textStyle: {
// 字体大小
fontSize: 13
}
},
radar: {
// shape: 'circle',
radius: '53%',
indicator: [
{ name: '咨询', min: 0 },
{ name: '感谢', min: 0 },
{ name: '求助', min: 0 },
{ name: '投诉', min: 0 },
{ name: '谏言', min: 0 }
],
name: {
textStyle: {
color: '#333',
fontSize: '14px'
}
}
},
color: ['#46BCF3', '#C760F2'],
series: [{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: [
{
value: ['14', '38', '15', '36', '12'],
name: '本月留言量',
areaStyle: {
color: '#46BCF3'
}
},
{
value: ['10', '20', '5', '13', '8'],
name: '本月回复量'
}
]
}]
}
myChartAverage.setOption(optionAverage)
}
if (this.judgeMessageData === 1) {
const myChartAverage = echarts.init(document.getElementById('dataCharts_leaveMessage'))
const optionAverage = {
tooltip: {
trigger: 'axis'
},
legend: {
x: 'center',
y: 'bottom',
data: ['本年留言量', '本年回复量'],
// 图例之间的间距
itemGap: 20,
// 图标高度
itemHeight: 12,
textStyle: {
// 字体大小
fontSize: 13
}
},
radar: {
// shape: 'circle',
radius: '53%',
indicator: [
{ name: '咨询', min: 0 },
{ name: '感谢', min: 0 },
{ name: '求助', min: 0 },
{ name: '投诉', min: 0 },
{ name: '谏言', min: 0 }
],
name: {
textStyle: {
color: '#333',
fontSize: '14px'
}
}
},
color: ['#46BCF3', '#C760F2'],
series: [{
type: 'radar',
tooltip: {
trigger: 'item'
},
data: [
{
value: ['97', '93', '84', '98', '44'],
name: '本年留言量',
areaStyle: {
color: '#46BCF3'
}
},
{
value: ['70', '83', '65', '90', '32'],
name: '本年回复量'
}
]
}]
}
myChartAverage.setOption(optionAverage)
}
},
/** 访客数据(饼状图)
* */
getVisitorData() {
const myChartGender = echarts.init(document.getElementById('dataCharts_visitor'))
const optionEnter = {
tooltip: {
trigger: 'item'
},
color: ['#46BCF3', '#C760F2'],
grid: {
top: 0,
bottom: 20,
left: 20,
right: 20,
containLabel: true
},
legend: {
left: 'center',
bottom: 18,
// 图例之间的间距
itemGap: 20,
// 图标高度
itemHeight: 12,
textStyle: {
// 字体大小
fontSize: 13
}
},
series: [
{
type: 'pie',
radius: '50%',
data: [
{ value: '10', name: '离院' },
{ value: '30', name: '来访' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
}
myChartGender.setOption(optionEnter)
}
}
}
</script>
<style lang="scss">
.app-main .container{
background-color: #F4F4F4;
}
.controlPlatform{
.controlDivider{
margin-top: 10px!important;
}
.controlPlatform-footer{
.end_title{
font-size: 16px;
font-weight: bold;
color: #333;
}
}
.controlSpan_middle{
font-size: 16px;
font-weight: bold;
color: #333;
}
.chosenOne-divider {
margin-bottom: 0;
}
.controlPlatform-top{
margin-top: 10px;
.arrows{
width: 5.67px;
height: 18.04px;
}
.TopBody{
display: flex;
margin-top: 20px;
}
.TopFooter{
margin-top: 20px;
}
}
.controlPlatform-body{
margin-top: 10px;
.btn1{
background-color: white;
color: black;
}
.active{
background-color: #666;
color: white;
}
.el-card__body{
min-height: 445px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment