<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" v-if="actCardTab=='dataStatistic'">
|
<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">{{$numberFormat(8846)}}</div>
|
<div class="trend">
|
<line-chart :options="optionsOfWeekAnalyze" style="height:50px"></line-chart>
|
</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="searchHidDanderTime"
|
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" v-for="(rankItem,index) in rankList" :key="rankItem.id">
|
<span
|
class="rank-index"
|
:class="{'first':index==0,'second':index==1,'third':index==2}"
|
>{{index+1}}</span>
|
<span class="name">{{rankItem.name}}</span>
|
<span class="val">{{rankItem.val}}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="statics flex-box">
|
<div class="lt">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">乘务员违规统计</span>
|
<time-shortcut @actPickerChange="irregularMenStatistic"></time-shortcut>
|
</div>
|
<div class="statics-content">
|
<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-chart :options="optionsOfIrregularSum" style="height:70px"></line-chart>
|
</div>
|
<div class="gt">
|
<div class="chart-theme">人均违规次数</div>
|
<div class="sum">
|
<span class="val">8846</span>
|
</div>
|
<line-chart :options="optionsOfIrregularPer" style="height:70px"></line-chart>
|
</div>
|
</div>
|
<el-table class="thbg" :data="irregularTableData">
|
<el-table-column label="排名"></el-table-column>
|
<el-table-column label="姓名"></el-table-column>
|
<el-table-column label="违规次数"></el-table-column>
|
<el-table-column label="周涨幅"></el-table-column>
|
</el-table>
|
<el-pagination
|
@size-change="handleTableSizeChange"
|
@current-change="renderIrregularMenTable"
|
:current-page.sync="PageIndex"
|
:page-size="PageSize"
|
:page-sizes="pageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="tableTotal"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
<div class="rt">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">重点地段违规事件统计</span>
|
<time-shortcut @actPickerChange="irregularEventStatistic"></time-shortcut>
|
</div>
|
<div class="statics-content">
|
<el-radio-group
|
v-model="irregularEventType"
|
@change="checkIrregularEventType"
|
size="small"
|
>
|
<el-radio-button label="fhdd">防护地段</el-radio-button>
|
<el-radio-button label="jcz">进出站</el-radio-button>
|
<el-radio-button label="gfx">过分相</el-radio-button>
|
<el-radio-button label="hc">会车</el-radio-button>
|
<el-radio-button label="lsmx">临时慢性</el-radio-button>
|
</el-radio-group>
|
<!-- <Pie :options="optionsOfIrregularEventPie"></Pie> -->
|
<Pie :options="optionsOfHidDangerPie" style="padding-top:20px;"></Pie>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="part">
|
<div class="tab-swiper">
|
<swipe-tabs @checkTab="checkTabInSwipe"></swipe-tabs>
|
</div>
|
<div class="tab-detail">
|
<dataset-chart style="width:100%"></dataset-chart>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="tab-content" v-if="actCardTab=='taskStatistic'">
|
<div class="general-view">
|
<div class="indicator">
|
<div class="icon">
|
<i class="iconfont iconrenwuzhipai" style="color:#3399ff"></i>
|
</div>
|
<div class="content">
|
<div class="indicator-title">本周任务指派量</div>
|
<div class="indicator-val">8000</div>
|
</div>
|
</div>
|
<div class="indicator">
|
<div class="icon">
|
<i class="iconfont iconfenxi" style="color:#4c76ff"></i>
|
</div>
|
<div class="content">
|
<div class="indicator-title">分析量</div>
|
<div class="indicator-val">8000</div>
|
</div>
|
</div>
|
<div class="indicator lastOne">
|
<div class="icon">
|
<i class="iconfont iconweigui" style="color:#fdd476"></i>
|
</div>
|
<div class="content">
|
<div class="indicator-title">违规量</div>
|
<div class="indicator-val">8000</div>
|
</div>
|
</div>
|
</div>
|
<div class="part">
|
<div class="statics flex-box">
|
<div class="lt">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">任务指派统计</span>
|
</div>
|
<div class="statics-content">
|
<div class="flex-end">
|
<time-shortcut @actPickerChange="taskAssignStatics"></time-shortcut>
|
<el-date-picker
|
v-model="searchTaskAssignTime"
|
type="datetimerange"
|
size="small"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
></el-date-picker>
|
</div>
|
<line-chart :options="optionsOfTaskAssign" style="height: 300px;"></line-chart>
|
</div>
|
</div>
|
</div>
|
<div class="rt">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">部门指派任务占比</span>
|
<time-shortcut @actPickerChange="partAssignstatics"></time-shortcut>
|
</div>
|
<div class="statics-content">
|
<Pie :options="optionsOfHidDangerPie"></Pie>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="statics">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">任务分析统计</span>
|
</div>
|
<div class="statics-content">
|
<div class="flex-end">
|
<time-shortcut @actPickerChange="taskAnalyzeStatics"></time-shortcut>
|
<el-date-picker
|
v-model="searchTaskAnalyzeTime"
|
type="datetimerange"
|
size="small"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
align="right"
|
></el-date-picker>
|
</div>
|
<Bar :options="optionsOfTaskAnalyzeBar" style="height: 300px;"></Bar>
|
</div>
|
</div>
|
</div>
|
<div class="statics">
|
<div class="statics-part">
|
<div class="statics-header">
|
<span class="title">任务分析情况</span>
|
<time-shortcut @actPickerChange="taskAnalyzeCase"></time-shortcut>
|
</div>
|
<div class="statics-content">
|
<div class="table-area">
|
<el-table class="thbg" :data="taskAnalyzeCaseTableData">
|
<el-table-column type="index" label="序号"></el-table-column>
|
<el-table-column prop="name" label="姓名"></el-table-column>
|
<el-table-column prop="rwl" label="任务量"></el-table-column>
|
<el-table-column prop="fxl" label="分析量"></el-table-column>
|
<el-table-column prop="pdwgl" label="判定违规量"></el-table-column>
|
<el-table-column prop="pdwglv" label="判定违规率"></el-table-column>
|
<el-table-column prop="wcl" label="完成率"></el-table-column>
|
</el-table>
|
</div>
|
|
<div class="flex-end">
|
<!-- <el-pagination
|
@size-change="handleTableSizeChange"
|
@current-change="renderIrregularMenTable"
|
:current-page.sync="PageIndex"
|
:page-size="PageSize"
|
:page-sizes="pageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="tableTotal"
|
></el-pagination> -->
|
<el-pagination
|
@size-change="handleTableSizeChange"
|
@current-change="renderIrregularMenTable"
|
:current-page.sync="PageIndex"
|
:page-size="PageSize"
|
:page-sizes="pageSizes"
|
layout="total,sizes, prev, pager, next"
|
:total="taskAnalyzeCaseTableData.length"
|
></el-pagination>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import timeShortcut from './timeShortcut';
|
import Bar from './charts/bar';
|
import Pie from './charts/pie';
|
import LineChart from './charts/line';
|
import SwipeTabs from './swipeTabs';
|
import DatasetChart from './charts/dataset';
|
export default {
|
components: { timeShortcut, Bar, Pie, LineChart, SwipeTabs, DatasetChart },
|
mounted () {
|
let tempArr = [{
|
"text": "Same but with checkboxes",
|
"children": [
|
{
|
"text": "initially selected",
|
"selected": true
|
}
|
]
|
}];
|
for (var i = 0; i < 20; i++) {
|
tempArr[0].children.push({
|
"text": "initially open",
|
"icon": "fa fa-folder icon-state-default",
|
"opened": true,
|
"children": [
|
{
|
"text": "Another node"
|
}
|
]
|
})
|
}
|
tempArr.forEach(node => {
|
//if(node.children.length)
|
|
})
|
this.jsTreeNodes = tempArr
|
},
|
data () {
|
return {
|
actCardTab: 'dataStatistic',
|
hidDangerTab: 'hidDanderStatistic',
|
optionsOfWeekAnalyze: {
|
animation: false,
|
grid: {
|
top: 0,
|
left: 0,
|
right: 0,
|
bottom: 10,
|
//containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
xAxis: {
|
show: false,
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
label: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
show: false,
|
label: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
smooth: true,
|
areaStyle: {
|
opacity: 0.7
|
},
|
color: '#975fe3'
|
}
|
]
|
},
|
searchHidDanderTime: [],
|
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
|
},
|
// axisLine: {
|
// lineStyle: {
|
// color: '#ccc'
|
// }
|
// },
|
// nameTextStyle: {
|
// color: "#333"
|
// }
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLine: {
|
show: false
|
}
|
}
|
],
|
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',
|
formatter: '{b}\n{c} '
|
},
|
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: '未应答' },
|
]
|
}
|
]
|
},
|
rankList: [{
|
id: 'jl',
|
name: '机辆分公司',
|
val: 324456
|
}, {
|
id: 'jg',
|
name: '京高铁路',
|
val: 328356
|
}, {
|
id: 'ztyj',
|
name: '中铁一局',
|
val: 4563356
|
}, {
|
id: 'ztsj',
|
name: '中铁三局',
|
val: 4563856
|
}],
|
optionsOfIrregularSum: {
|
animation: false,
|
grid: {
|
top: 0,
|
left: 0,
|
bottom: 10,
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
xAxis: {
|
show: false,
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
label: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
show: false,
|
boundaryGap: [0, '30%'],
|
label: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
smooth: true,
|
areaStyle: {
|
opacity: 0.3
|
},
|
color: '#5dbafd'
|
}
|
]
|
},
|
optionsOfIrregularPer: {
|
animation: false,
|
grid: {
|
top: 0,
|
left: 0,
|
bottom: 10,
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'cross',
|
label: {
|
backgroundColor: '#6a7985'
|
}
|
}
|
},
|
xAxis: {
|
show: false,
|
type: 'category',
|
boundaryGap: false,
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
label: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
show: false,
|
label: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
smooth: true,
|
areaStyle: {
|
opacity: 0.3
|
},
|
color: '#8adee6'
|
}
|
]
|
},
|
irregularTableData: [],
|
PageIndex: 1,
|
PageSize: 5,
|
pageSizes: [5, 10],
|
tableTotal: 0,
|
irregularEventType: 'fhdd',
|
optionsOfIrregularEventPie: {
|
|
},
|
searchTaskAssignTime: [],
|
optionsOfTaskAssign: {
|
grid: {
|
top: 40,
|
left: 10,
|
right: 10,
|
containLabel: true,
|
},
|
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',
|
axisLine: {
|
show: false
|
},
|
label: {
|
show: false
|
}
|
},
|
series: [
|
{
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
type: 'line',
|
smooth: true,
|
areaStyle: {
|
opacity: 0.3
|
},
|
color: '#5dbafd'
|
}
|
]
|
},
|
searchTaskAnalyzeTime: [],
|
optionsOfTaskAnalyzeBar: {
|
color: ['#fbd438', '#4fcb74'],
|
dataset: {
|
source: [
|
['mon', 70, 30],
|
['tue', 30, 50],
|
['wed', 30, 60],
|
['thu', 40, 50],
|
['fri', 20, 30],
|
['sat', 30, 20],
|
['sun', 20, 40],
|
]
|
},
|
legend: {
|
left: 0
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
//type: 'shadow'
|
},
|
},
|
grid: {
|
left: 10,
|
right: 10,
|
bottom: '3%',
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
//data: ['未鸣笛', '未手比', '未呼唤', '运行中睡觉', '未检查', '未应答'],
|
axisTick: {
|
alignWithLabel: true
|
},
|
// axisLine: {
|
// lineStyle: {
|
// color: '#ccc'
|
// }
|
// },
|
// nameTextStyle: {
|
// color: "#333"
|
// }
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLine: {
|
show: false
|
}
|
}
|
],
|
series: [
|
{
|
name: '有异常',
|
type: 'bar',
|
stack: '异常',
|
barWidth: 20,
|
//data: [270, 500, 300, 430, 620, 540]
|
},
|
{
|
name: '无异常',
|
type: 'bar',
|
stack: '异常',
|
barWidth: 20,
|
//data: [270, 500, 300, 430, 620, 540]
|
}
|
]
|
},
|
taskAnalyzeCaseTableData: [
|
{ name: '李斯', rwl: 233, fxl: 214, pdwgl: 1354, pdwglv: '7%', wcl: '30%' },
|
{ name: '王五', rwl: 263, fxl: 234, pdwgl: 64, pdwglv: '8%', wcl: '100%' },
|
{ name: '天天', rwl: 213, fxl: 204, pdwgl: 654, pdwglv: '78%', wcl: '100%' },
|
{ name: '赵丽', rwl: 233, fxl: 204, pdwgl: 454, pdwglv: '79%', wcl: '100%' },
|
{ name: '王冕', rwl: 253, fxl: 244, pdwgl: 454, pdwglv: '87%', wcl: '100%' }],
|
jsTreeNodes: [],
|
}
|
},
|
methods: {
|
checkTabInSwipe (tab) {
|
debugger
|
},
|
checkIrregularEventType (type) {
|
debugger
|
},
|
taskAnalyzeCase (time) {
|
|
},
|
taskAnalyzeStatics (time) {
|
|
},
|
partAssignstatics (time) {
|
|
},
|
taskAssignStatics (time) {
|
|
},
|
renderIrregularMenTable () {
|
|
},
|
handleTableSizeChange () {
|
|
},
|
timeShortChange (time) {
|
|
},
|
irregularMenStatistic (time) {
|
|
},
|
irregularEventStatistic (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;
|
& > span {
|
margin-right: 6px;
|
}
|
.triangle.green {
|
margin-top: -6px;
|
}
|
.triangle.red {
|
margin-top: 6px;
|
}
|
}
|
}
|
.devide {
|
height: 1px;
|
background-color: #eee;
|
margin: 10px 0;
|
}
|
.detail {
|
display: flex;
|
align-items: center;
|
color: #777;
|
.name {
|
margin-right: 20px;
|
}
|
}
|
}
|
}
|
.part {
|
padding: 20px 0;
|
margin-bottom: 20px;
|
.header-width-tab {
|
display: flex;
|
justify-content: space-between;
|
.rt {
|
display: flex;
|
padding-top: 20px;
|
}
|
}
|
.statics {
|
display: flex;
|
padding: 0 10px;
|
min-height: 400px;
|
margin-bottom: 30px;
|
.statics-header {
|
height: 50px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1px solid #eee;
|
// padding-bottom: 10px;
|
margin-bottom: 20px;
|
.title {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
}
|
.statics-part {
|
flex: 1;
|
.statics-content {
|
padding: 0 20px;
|
.chart-area {
|
.chart-theme {
|
font-size: 14px;
|
color: #999;
|
}
|
.sum {
|
padding: 14px 0 10px;
|
.val {
|
font-size: 24px;
|
padding-left: 10px;
|
margin-right: 20px;
|
}
|
.ratio {
|
font-size: 14px;
|
color: #999;
|
}
|
}
|
}
|
}
|
}
|
.lt {
|
text-align: left;
|
flex: 1;
|
padding-right: 40px;
|
}
|
.rt {
|
text-align: left;
|
width: 400px;
|
.header {
|
display: flex;
|
.title {
|
font-size: 16px;
|
margin-right: 20px;
|
font-weight: bold;
|
}
|
}
|
.rank-list {
|
padding: 10px 0;
|
max-height: 380px;
|
overflow-y: auto;
|
.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;
|
&.first {
|
background-color: red;
|
color: #fff;
|
}
|
&.second {
|
background-color: rgb(248, 126, 45);
|
color: #fff;
|
}
|
&.third {
|
background-color: #0b3c29;
|
color: #fff;
|
}
|
}
|
.name {
|
width: 200px;
|
}
|
.val {
|
width: 100px;
|
}
|
}
|
}
|
}
|
}
|
.flex-box {
|
.lt,
|
.rt,
|
.gt {
|
flex: 1;
|
width: auto;
|
//padding: 0 20px;
|
}
|
}
|
.tab-swiper {
|
width: calc(100vw - 340px);
|
margin-bottom: 20px;
|
}
|
}
|
.general-view {
|
display: flex;
|
padding: 20px 50px;
|
.indicator {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
&:not(.lastOne):after {
|
content: '';
|
width: 1px;
|
height: 57px;
|
background: #e9e9e9;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
.icon .iconfont {
|
font-size: 40px;
|
margin-right: 24px;
|
}
|
.indicator-title {
|
font-size: 14px;
|
color: #999;
|
margin-bottom: 15px;
|
}
|
.indicator-val {
|
font-size: 24px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
