<template>
<div class="sub-trend-block">
<div>
<div class="subTitle">数据统计</div>
<div class="sub-trend-radio">
<el-radio v-model="analysisType" label="today">今日</el-radio>
<el-radio v-model="analysisType" label="week">最近7日</el-radio>
<el-radio v-model="analysisType" label="month">最近30日</el-radio>
</div>
<div class="sub-trend-timepicker">
<el-date-picker
v-model="dateRange"
:picker-options="{'firstDayOfWeek': 1}"
popper-class="test_class"
size="small"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeDatePicker"/>
</div>
</div>
<div class="chart-container">
<div ref="chart" class="chart-body" />
</div>
</div>
<!-- <el-row :gutter="20" style="padding: 20px;">-->
<!-- <el-col :span="24">-->
<!-- <div class="subTitle">数据统计</div>-->
<!-- </el-col>-->
<!-- <el-col :span="24">-->
<!-- <div class="panelCorners">-->
<!-- <div style="padding: 15px; text-align: left; display: inline-block;">-->
<!-- <el-radio-group v-model="analysisType" size="small" @change="changeTimeTerm()">-->
<!-- <el-radio-button label="today">今日</el-radio-button>-->
<!-- <el-radio-button label="week">最近7日</el-radio-button>-->
<!-- <el-radio-button label="month">最近30日</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- <el-date-picker-->
<!-- v-model="dateRange"-->
<!-- :picker-options="{'firstDayOfWeek': 1}"-->
<!-- size="small"-->
<!-- type="daterange"-->
<!-- range-separator="至"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- @change="changeDatePicker"/>-->
<!-- </div>-->
<!-- <div class="chart-container">-->
<!-- <div ref="chart" class="chart-body" />-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
</template>
<script>
import echarts from 'echarts'
import request from '@/utils/request'
import { formatToString, getDate } from '@/utils/calendarUtil'
export default {
name: 'TrendPanel',
data() {
return {
dateShortcuts: {
today: '', // 今日日期字符串
lastWeek: '', // 7日前日期字符串
lastMonth: '' // 30日前日期字符串
},
analysisType: 'today', // 数据统计区间快捷键
dayDiff: '0', // 日期差，用于显示图表的tooltip；7天以内
dateRange: '', // 时间范围
xDatas: [], // 横轴
collectDatas: [], // 采集统计数据
checkDatas: [] // 识别统计数据
}
},
watch: {
analysisType() {
this.changeTimeTerm()
}
},
mounted() {
this.initDateShortcuts()
},
methods: {
initDateShortcuts() {
const now = new Date()
this.dateShortcuts.today = formatToString(now, 'DATE')
this.dateShortcuts.lastWeek = getDate(-6, 'DATE')
this.dateShortcuts.lastMonth = getDate(-29, 'DATE')
this.changeTimeTerm()
},
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption({
grid: { // 画布属性
left: '50px',
top: '10px'
},
legend: { // 图例属性
bottom: 0, // 右上方显示
icon: 'rect', // 方块样式
textStyle: { // 字体大小和颜色
color: '#FFFFFF',
fontSize: 18,
fontFamily: 'Microsoft YaHei'
},
data: ['识别人数', '采集人数']
},
tooltip: { // 提示框属性
trigger: 'axis', // 坐标轴触发
backgroundColor: '#0094FF', // 提示框背景色
axisPointer: {
type: 'line',
lineStyle: {
color: '#FFFF00',
width: 2
}
}
},
xAxis: [
{
type: 'category',
data: this.xDatas,
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
// rotate: 90,
fontSize: 10,
color: '#fff'
}
}
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: '#fff'
}
},
axisLabel: {
fontSize: 10,
color: '#fff'
},
splitLine: {
show: false
}
}
],
color: [
'#016FE2', '#02FEFF',
'#0067a6', '#c4b4e4',
'#d87a80', '#9cbbff', '#d9d0c7',
'#87a997', '#d49ea2', '#5b4947',
'#7ba3a8', '#19d4ae', '#ffb980'
],
series: [
{
name: '识别人数',
type: 'line',
data: this.checkDatas,
animationDelay: function(idx) {
return idx * 10
}
},
{
name: '采集人数',
type: 'line',
data: this.collectDatas,
animationDelay: function(idx) {
return idx * 10
}
}
],
animationEasing: 'elasticOut',
animationDelayUpdate: function(idx) {
return idx * 5
}
})
this.chart.resize()
},
// 切换时间快捷键
changeTimeTerm() {
if (this.analysisType === 'today') {
this.dateRange = [this.dateShortcuts.today, this.dateShortcuts.today]
} else if (this.analysisType === 'week') {
this.dateRange = [this.dateShortcuts.lastWeek, this.dateShortcuts.today]
} else if (this.analysisType === 'month') {
this.dateRange = [this.dateShortcuts.lastMonth, this.dateShortcuts.today]
}
this.queryDataAnalysis()
},
// 自定义选择时间段
changeDatePicker() {
const start = formatToString(this.dateRange[0].valueOf(), 'DATE')
const end = formatToString(this.dateRange[1].valueOf(), 'DATE')
if (end !== this.dateShortcuts.today) {
this.analysisType = 'other'
} else {
if (start === this.dateShortcuts.today) {
this.analysisType = 'today'
} else if (start === this.dateShortcuts.lastWeek) {
this.analysisType = 'week'
} else if (start === this.dateShortcuts.lastMonth) {
this.analysisType = 'month'
} else {
this.analysisType = 'other'
}
}
this.queryDataAnalysis()
},
// 向后台查询数据统计结果
queryDataAnalysis() {
request({
url: '/bigScreen/getDataAnalysis',
method: 'post',
params: {
analysisType: this.analysisType,
startDate: formatToString(this.dateRange[0].valueOf(), 'DATE'),
endDate: formatToString(this.dateRange[1].valueOf(), 'DATE')
}
}).then(response => {
console.log(response)
if (response.code === 200) {
// 查询有新结果时清除原有的列表
this.xDatas = []
this.collectDatas = []
this.checkDatas = []
if (response.data.length > 0) {
response.data.forEach(item => {
this.xDatas.push(item.analysisDate)
this.collectDatas.push(item.colNum)
this.checkDatas.push(item.recNum)
})
}
this.initChart()
}
})
}
}
}
</script>
<style scoped>
.sub-trend-block {
border: 2px solid #3370E3;
background-color: rgba(41, 85, 252, 0.2);
margin: 20px 20px 0px 20px;
width: calc(100vw - 40px);
height: 320px;
}
.subTitle {
font-weight: bold;
font-family: '微软雅黑',serif;
color: #fff;
font-size: 24px;
padding: 10px 10px 10px 30px;
background: url("images/sub-title-background.png") no-repeat;
float: left;
width: 400px;
}
.sub-trend-radio {
padding: 10px 0 5px 0;
text-align: left;
float: left;
}
.sub-trend-radio >>> .el-radio__label {
color: #FFFFFF;
}
.sub-trend-timepicker {
padding: 5px;
margin-left: 50px;
text-align: left;
float: left;
}
.sub-trend-timepicker >>> .el-input__inner {
background: none;
border-radius: 0px;
border: 1px solid #3370E3;
}
.sub-trend-timepicker >>> .el-date-editor .el-range-input {
background: none;
color: #FFFFFF;
font-size: 18px;
}
.sub-trend-timepicker >>> .el-range-separator {
color: #FFFFFF;
font-size: 18px;
}
.chart-container{
text-align: center;
display: block;
margin-top: 60px;
}
.chart-body {
min-height: 240px;
width: calc(100vw - 40px);
/*margin-right: auto;*/
/*margin-left: auto;*/
}
@media(max-width: 1440px) {
.sub-trend-block {
margin: 15px 18px 0px 18px;
width: calc(100vw - 36px);
height: 285px;
}
.subTitle {
font-size: 20px;
padding: 9px 9px 9px 24px;
}
.chart-container{
text-align: center;
display: block;
margin-top: 42px;
}
.chart-body {
min-height: 235px;
width: calc(100vw - 36px);
}
}
@media(max-width: 1366px) {
.sub-trend-block {
margin: 12px 16px 0px 16px;
width: calc(100vw - 32px);
height: 240px;
}
.subTitle {
font-size: 16px;
padding: 8px 8px 8px 20px;
}
.sub-trend-timepicker {
padding: 2px;
margin-left: 30px;
}
.sub-trend-timepicker >>> .el-date-editor .el-range-input {
background: none;
color: #FFFFFF;
font-size: 14px;
}
.sub-trend-timepicker >>> .el-range-separator {
color: #FFFFFF;
font-size: 14px;
}
.chart-container{
text-align: center;
display: block;
margin-top: 36px;
}
.chart-body {
min-height: 180px;
width: calc(100vw - 32px);
}
}
</style>
<style rel="stylesheet/scss" lang="scss" >
.test_class{
border: 0px;
border-radius: 0px;
.el-picker-panel__body-wrapper{
.el-picker-panel__body{
color: #FFFFFF;
background-color: #016FE2; /* 整体背景色 */
border-radius: 0px;
.el-date-table th {
color: #FFFFFF;
}
.el-picker-panel__icon-btn {
color: #FFFFFF;
}
.el-date-table td.start-date span, .el-date-table td.end-date span {
background-color: #02FEFF;
color: #333333;
}
.el-date-table td.in-range div {
/*background-color: #016FE2; !* 选中背景色 *!*/
background-color: #3695FF; /* 选中背景色 */
}
.el-date-table td div {
padding: 0px;
}
.el-date-table td span {
width: 30px;
height: 30px;
line-height: 30px;
}
.el-date-table td.today span {
color: #333333;
font-size: 1.2em;
}
}
}
}
</style>
