mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-06-21 12:39:36 +08:00
451 lines
9.4 KiB
Vue
451 lines
9.4 KiB
Vue
<template>
|
||
<div class='container'>
|
||
|
||
<div class='topHeadView'>
|
||
<div class='itemView' v-for='item in 4'>
|
||
<div class='imgView'></div>
|
||
<div class='label'>待派单</div>
|
||
<div class='num'>10</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='caseStatisticsView'>
|
||
<div class='headView'>
|
||
<div class='titleView'>工单统计</div>
|
||
<div class='typeView'>
|
||
<div class='type activity'>本周</div>
|
||
<div class='type'>本月</div>
|
||
<div class='type'>本年</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='contentView'>
|
||
<div class='itemView' v-for='item in 6'>
|
||
<div class='label'>维修工单</div>
|
||
<div class='value'>100</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='statusView'>
|
||
<div class='caseStatusView'>
|
||
<div class='headView'>
|
||
<div class='titleView'>工单完成情况</div>
|
||
<div class='typeView'>
|
||
<div class='type activity'>本周</div>
|
||
<div class='type'>本年</div>
|
||
</div>
|
||
</div>
|
||
<div class='contentView'>
|
||
<div class='circularView'>
|
||
<div id='echart1' style='width: 400px; height: 300px'></div>
|
||
</div>
|
||
<div class='centerLine'></div>
|
||
<div class='circularView'>
|
||
<div id='echart2' style='width: 400px; height: 300px'></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class='evaluateView'>
|
||
<div class='headView'>
|
||
<div class='titleView'>评价情况</div>
|
||
</div>
|
||
<div class='contentView'>
|
||
<div id='echart3' style='width: 400px; height: 300px'></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class='faultView'>
|
||
<div class='floorView'>
|
||
<div class='headView'>
|
||
<div class='titleView'>工单完成情况</div>
|
||
<div class='conditionView'>
|
||
<a-select default-value='week' style='width: 120px;margin-right: 10px'>
|
||
<a-select-option value='week'>
|
||
按周
|
||
</a-select-option>
|
||
<a-select-option value='month'>
|
||
按月
|
||
</a-select-option>
|
||
<a-select-option value='year'>
|
||
按年
|
||
</a-select-option>
|
||
</a-select>
|
||
<a-date-picker placeholder='请选择时间' />
|
||
</div>
|
||
</div>
|
||
<div class='contentView'>
|
||
<div id='echart4' style='width: 550px; height: 550px'></div>
|
||
</div>
|
||
</div>
|
||
<div class='rightView'>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from 'echarts'
|
||
|
||
export default {
|
||
name: 'RepairStatistics',
|
||
mounted() {
|
||
this.createEchartCake('echart1')
|
||
this.createEchartCake('echart2')
|
||
this.createEchartCake('echart3')
|
||
this.createEchartLine('echart4')
|
||
},
|
||
methods: {
|
||
createEchartCake(id) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart = echarts.init(document.getElementById(id))
|
||
// 指定图表的配置项和数据
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
bottom: 10,
|
||
left: 'right',
|
||
orient: 'vertical'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['40%', '70%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 2,
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 40,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 1048, name: 'Search ' },
|
||
{ value: 735, name: 'Direct' },
|
||
{ value: 580, name: 'Email' },
|
||
{ value: 484, name: 'Union ' },
|
||
{ value: 300, name: 'Video ' }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
},
|
||
createEchartLine(id) {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
let myChart = echarts.init(document.getElementById(id))
|
||
let option = {
|
||
title: {
|
||
text: 'World Population'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
},
|
||
legend: {},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'value',
|
||
boundaryGap: [0, 0.01]
|
||
},
|
||
yAxis: {
|
||
type: 'category',
|
||
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
|
||
},
|
||
series: [
|
||
{
|
||
name: '2011',
|
||
type: 'bar',
|
||
data: [18203, 23489, 29034, 104970, 131744, 630230]
|
||
},
|
||
{
|
||
name: '2012',
|
||
type: 'bar',
|
||
data: [19325, 23438, 31000, 121594, 134141, 681807]
|
||
}
|
||
]
|
||
}
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
* {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
word-break: break-all;
|
||
line-height: 1;
|
||
}
|
||
|
||
.topHeadView {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 40px 0;
|
||
background: #4093f7;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.topHeadView .itemView {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.topHeadView .itemView .imgView {
|
||
width: 80px;
|
||
height: 80px;
|
||
background: white;
|
||
border-radius: 80px;
|
||
}
|
||
|
||
.topHeadView .itemView .label {
|
||
margin-top: 10px;
|
||
color: white;
|
||
}
|
||
|
||
|
||
.topHeadView .itemView .num {
|
||
position: absolute;
|
||
left: calc(100% + 10px);
|
||
top: 50%;
|
||
transform: translateY(-100%);
|
||
width: 90px;
|
||
color: white;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.caseStatisticsView {
|
||
margin-top: 10px;
|
||
padding: 0 20px;
|
||
border-radius: 10px;
|
||
background: white;
|
||
}
|
||
|
||
.caseStatisticsView .headView {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.caseStatisticsView .headView .titleView {
|
||
font-size: 14px;
|
||
color: #4093f7;
|
||
font-weight: bold;
|
||
padding: 14px 30px;
|
||
border-bottom: 2px solid #4093f7;
|
||
}
|
||
|
||
|
||
.caseStatisticsView .headView .typeView {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.caseStatisticsView .headView .typeView .type {
|
||
margin-right: 40px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.caseStatisticsView .headView .typeView .activity {
|
||
color: #4093f7;
|
||
}
|
||
|
||
.caseStatisticsView .contentView {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 30px 50px;
|
||
}
|
||
|
||
|
||
.caseStatisticsView .contentView .itemView {
|
||
flex: 1;
|
||
border: 1px solid #4093f7;
|
||
border-radius: 4px;
|
||
padding: 14px 20px;
|
||
margin-left: 20px;
|
||
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.caseStatisticsView .contentView .itemView:first-of-type {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.caseStatisticsView .contentView .itemView .label {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
color: #4093f7;
|
||
}
|
||
|
||
.caseStatisticsView .contentView .itemView .value {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.statusView {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.statusView .caseStatusView, .statusView .evaluateView {
|
||
background: white;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
|
||
.statusView .caseStatusView {
|
||
flex: 2;
|
||
}
|
||
|
||
.statusView .evaluateView {
|
||
flex: 1;
|
||
margin-left: 6px;
|
||
}
|
||
|
||
|
||
.statusView .caseStatusView .headView, .statusView .evaluateView .headView {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
padding: 0 20px;
|
||
height: 40px;
|
||
}
|
||
|
||
.statusView .caseStatusView .headView .titleView, .statusView .evaluateView .headView .titleView {
|
||
font-size: 14px;
|
||
color: gray;
|
||
}
|
||
|
||
|
||
.statusView .caseStatusView .headView .typeView {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.statusView .caseStatusView .headView .typeView .type {
|
||
font-size: 12px;
|
||
color: #4093f7;
|
||
margin-left: 20px;
|
||
padding: 4px 8px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.statusView .caseStatusView .headView .typeView .type.activity {
|
||
border: 1px solid #4093f7;
|
||
}
|
||
|
||
.statusView .caseStatusView .contentView {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.statusView .caseStatusView .contentView .circularView {
|
||
flex: 1;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.statusView .caseStatusView .contentView .centerLine {
|
||
width: 1px;
|
||
height: 200px;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.statusView .evaluateView .contentView {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
|
||
.faultView {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.faultView .floorView {
|
||
background: white;
|
||
border-radius: 10px;
|
||
width: 600px;
|
||
}
|
||
|
||
|
||
.faultView .floorView .headView {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
padding: 0 20px;
|
||
height: 40px;
|
||
}
|
||
|
||
.faultView .floorView .headView .titleView {
|
||
font-size: 14px;
|
||
color: gray;
|
||
}
|
||
|
||
|
||
.faultView .floorView .headView .conditionView {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.faultView .floorView .contentView {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 700px;
|
||
}
|
||
|
||
</style> |