<template>
|
<div class="guide-index">
|
<el-tabs class="tab-menu" v-model="actCardTab">
|
<el-tab-pane label="数据统计分析" name="dataStatistic"></el-tab-pane>
|
<el-tab-pane label="任务统计分析" name="taskStatistic"></el-tab-pane>
|
</el-tabs>
|
<div class="tab-content">
|
<div class="card-view">
|
<el-card>
|
<div class="title">
|
<span class="lt">本周隐患数量</span>
|
<span class="rgt">
|
<i class="el-icon-warning-outline"></i>
|
</span>
|
</div>
|
<div class="val">265</div>
|
<div class="trend week-day-ratio">
|
<div class="week-ratio">
|
<span>周同比</span>
|
<span class="triangle green"></span>
|
<span>12%</span>
|
</div>
|
<div class="day-ratio">
|
<span>日环比</span>
|
<span class="triangle red"></span>
|
<span>11%</span>
|
</div>
|
</div>
|
<div class="devide"></div>
|
<div class="detail">
|
<div class="name">日均隐患事件</div>
|
<div class="specific">28</div>
|
</div>
|
</el-card>
|
<el-card>
|
<div class="title">
|
<span class="lt">本周分析车次量</span>
|
<span class="rgt">
|
<i class="el-icon-warning-outline"></i>
|
</span>
|
</div>
|
<div class="val">8846</div>
|
<div class="trend"></div>
|
<div class="devide"></div>
|
<div class="detail">
|
<div class="name">日均分析量</div>
|
<div class="specific">128</div>
|
</div>
|
</el-card>
|
<el-card>
|
<div class="title">
|
<span class="lt">转储总量</span>
|
<span class="rgt">
|
<i class="el-icon-warning-outline"></i>
|
</span>
|
</div>
|
<div class="val">8846</div>
|
<div class="trend"></div>
|
<div class="devide"></div>
|
<div class="detail">
|
<div class="name">转换率</div>
|
<div class="specific">60%</div>
|
</div>
|
</el-card>
|
<el-card>
|
<div class="title">
|
<span class="lt">任务完成比例</span>
|
<span class="rgt">
|
<i class="el-icon-warning-outline"></i>
|
</span>
|
</div>
|
<div class="val">78%</div>
|
<div class="trend"></div>
|
<div class="devide"></div>
|
<div class="detail week-day-ratio">
|
<div class="week-ratio">
|
<span>周同比</span>
|
<span class="triangle green"></span>
|
<span>12%</span>
|
</div>
|
<div class="day-ratio">
|
<span>日环比</span>
|
<span class="triangle red"></span>
|
<span>11%</span>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
<div class="part">
|
<div class="header-width-tab">
|
<el-tabs class="tab-menu" v-model="hidDangerTab">
|
<el-tab-pane label="隐患事件统计" name="hidDanderStatistic"></el-tab-pane>
|
<el-tab-pane label="隐患事件趋势" name="hidDanderTrend"></el-tab-pane>
|
</el-tabs>
|
<div class="rt">
|
<time-shortcut @actPickerChange="timeShortChange"></time-shortcut>
|
<el-date-picker
|
v-model="searchTime"
|
type="datetimerange"
|
size="small"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
></el-date-picker>
|
</div>
|
</div>
|
<div class="statics">
|
<div class="lt">
|
<el-radio-group v-model="actHidDanderChart" size="mini">
|
<el-radio-button label="bar">柱状图</el-radio-button>
|
<el-radio-button label="pie">饼图</el-radio-button>
|
</el-radio-group>
|
<Bar :options="optionsOfHidDangerBar" v-show="actHidDanderChart=='bar'"></Bar>
|
<Pie :options="optionsOfHidDangerPie" v-show="actHidDanderChart=='pie'"></Pie>
|
</div>
|
<div class="rt">
|
<div class="header">
|
<span class="title">部门隐患数量排名</span>
|
<el-select v-if="hidDangerTab=='hidDanderStatistic'" size="small">
|
<el-option>中铁一局</el-option>
|
</el-select>
|
</div>
|
<div class="rank-list">
|
<div class="rank-item">
|
<span class="rank-index">1</span>
|
<span class="name">机辆分公司</span>
|
<span class="val">323,234</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="statics">
|
<div class="lt">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">乘务员违规统计</span>
|
<time-shortcut @actPickerChange="irregularStatistic"></time-shortcut>
|
</div>
|
<div class="chart-area flex-box">
|
<div class="lt">
|
<div class="chart-theme">乘务员总人数</div>
|
<div class="sum">
|
<span class="val">8846</span>
|
<span class="ratio">17.1%</span>
|
</div>
|
<Line :options="optionsOfIrregularSum"></Line>
|
</div>
|
<div class="gt">
|
<div class="chart-theme">人均违规次数</div>
|
<div class="sum">
|
<span class="val">8846</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import timeShortcut from './timeShortcut';
|
import Bar from './charts/bar';
|
import Pie from './charts/pie';
|
import Line from './charts/line';
|
export default {
|
components: { timeShortcut, Bar, Pie, Line },
|
data () {
|
return {
|
actCardTab: 'dataStatistic',
|
hidDangerTab: 'hidDanderStatistic',
|
searchTime: [],
|
actHidDanderChart: 'bar',
|
optionsOfHidDangerBar: {
|
color: ['#9ed2f5'],
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
},
|
grid: {
|
left: '3%',
|
right: '4%',
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
|
axisTick: {
|
alignWithLabel: true
|
}
|
}
|
],
|
yAxis: [
|
{ type: 'value' }
|
],
|
series: [
|
{
|
name: '数量',
|
type: 'bar',
|
barWidth: '24%',
|
data: [270, 500, 300, 430, 620, 540]
|
}
|
]
|
},
|
optionsOfHidDangerPie: {
|
tooltip: {
|
trigger: 'item',
|
formatter: '{a}<br/>{b}:{c} ({d}%)'
|
},
|
legend: {
|
orient: 'vertical',
|
right: 10,
|
y: 'center',
|
data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答']
|
},
|
series: [
|
{
|
name: '异常事件',
|
type: 'pie',
|
color: ['#3aa0ff', '#36cbcb', '#4dcb73', '#fad337', '#f2637b', '#975fe4'],
|
radius: ['70%', '90%'],
|
//center: ['40%','60%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: '30',
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 270, name: '未鸣笛' },
|
{ value: 500, name: '未手比' },
|
{ value: 300, name: '未呼唤' },
|
{ value: 430, name: '运行中睡觉' },
|
{ value: 620, name: '未检查' },
|
{ value: 540, name: '未应答' },
|
]
|
}
|
]
|
},
|
optionsOfIrregularSum: {
|
animation: false,
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
xAxis: {
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
label: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
label: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
|
}
|
]
|
}
|
}
|
},
|
methods: {
|
timeShortChange (time) {
|
|
},
|
irregularStatistic (time) {
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.guide-index {
|
.triangle {
|
width: 0;
|
height: 0;
|
border: 6px solid #ccc;
|
&.green {
|
border-color: #64de27;
|
border-top-color: transparent;
|
border-left-color: transparent;
|
border-right-color: transparent;
|
}
|
&.red {
|
border-color: #f5222d;
|
border-bottom-color: transparent;
|
border-left-color: transparent;
|
border-right-color: transparent;
|
}
|
}
|
.tab-menu {
|
.el-tabs__item {
|
padding: 0 30px !important;
|
height: 60px;
|
line-height: 60px;
|
}
|
}
|
.tab-content {
|
padding: 20px;
|
.card-view {
|
display: flex;
|
margin-right: -20px;
|
.el-card {
|
flex: 1;
|
margin-right: 20px;
|
text-align: left;
|
.el-card__body {
|
padding-bottom: 13px;
|
}
|
.title {
|
color: #999;
|
font-size: 14px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.val {
|
font-size: 30px;
|
color: #000;
|
margin: 10px 0 14px;
|
}
|
.trend {
|
height: 40px;
|
color: #999;
|
}
|
.week-day-ratio {
|
display: flex;
|
align-items: center;
|
.week-ratio,
|
.day-ratio {
|
display: flex;
|
align-items: center;
|
}
|
}
|
.devide {
|
height: 1px;
|
background-color: #eee;
|
margin: 10px 0;
|
}
|
.detail {
|
display: flex;
|
}
|
}
|
}
|
.part {
|
padding: 10px 0;
|
.header-width-tab {
|
display: flex;
|
justify-content: space-between;
|
.rt {
|
display: flex;
|
padding-top: 20px;
|
}
|
}
|
.statics {
|
display: flex;
|
padding: 0 10px;
|
min-height: 400px;
|
.lt {
|
text-align: left;
|
flex: 1;
|
padding-right: 20px;
|
}
|
.rt {
|
text-align: left;
|
width: 400px;
|
.header {
|
display: flex;
|
.title {
|
font-size: 16px;
|
margin-right: 20px;
|
font-weight: bold;
|
}
|
}
|
.rank-list {
|
padding: 10px 0;
|
.rank-item {
|
height: 36px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
color: #666;
|
.rank-index {
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
background: #eee;
|
color: #666;
|
border-radius: 50%;
|
text-align: center;
|
}
|
.name {
|
width: 200px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
