mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-08-08 18:42:42 +08:00
1
This commit is contained in:
SelfRidicule
parent
a631baad5d
commit
9e5663416d
@ -60,18 +60,12 @@
|
|||||||
<div class='faultView'>
|
<div class='faultView'>
|
||||||
<div class='floorView'>
|
<div class='floorView'>
|
||||||
<div class='headView'>
|
<div class='headView'>
|
||||||
<div class='titleView'>工单完成情况</div>
|
<div class='titleView'>楼层负责人情况</div>
|
||||||
<div class='conditionView'>
|
<div class='conditionView'>
|
||||||
<a-select default-value='week' style='width: 120px;margin-right: 10px'>
|
<a-select default-value='week' style='width: 120px;margin-right: 10px'>
|
||||||
<a-select-option value='week'>
|
<a-select-option value='week'>按周</a-select-option>
|
||||||
按周
|
<a-select-option value='month'>按月</a-select-option>
|
||||||
</a-select-option>
|
<a-select-option value='year'>按年</a-select-option>
|
||||||
<a-select-option value='month'>
|
|
||||||
按月
|
|
||||||
</a-select-option>
|
|
||||||
<a-select-option value='year'>
|
|
||||||
按年
|
|
||||||
</a-select-option>
|
|
||||||
</a-select>
|
</a-select>
|
||||||
<a-date-picker placeholder='请选择时间' />
|
<a-date-picker placeholder='请选择时间' />
|
||||||
</div>
|
</div>
|
||||||
@ -81,10 +75,58 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class='rightView'>
|
<div class='rightView'>
|
||||||
|
<div class='blockView'>
|
||||||
|
<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='echart5' style='width: 700px; height: 327px'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class='blockView'>
|
||||||
|
<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='echart6' style='width: 700px; height: 327px'></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class='tableView'>
|
||||||
|
<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'>
|
||||||
|
<a-table :columns="columns" :data-source="loadData">
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -94,14 +136,100 @@ import * as echarts from 'echarts'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'RepairStatistics',
|
name: 'RepairStatistics',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
// 查询参数
|
||||||
|
queryParam: {},
|
||||||
|
// 表头
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: 'Name',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
scopedSlots: { customRender: 'name' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Age',
|
||||||
|
dataIndex: 'age',
|
||||||
|
key: 'age',
|
||||||
|
width: 80,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Address',
|
||||||
|
dataIndex: 'address',
|
||||||
|
key: 'address 1',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Long Column Long Column Long Column',
|
||||||
|
dataIndex: 'address',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Long Column Long Column',
|
||||||
|
dataIndex: 'address',
|
||||||
|
key: 'address 3',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Long Column',
|
||||||
|
dataIndex: 'address',
|
||||||
|
key: 'address 4',
|
||||||
|
ellipsis: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 加载数据方法 必须为 Promise 对象
|
||||||
|
loadData: [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'John Brown',
|
||||||
|
age: 32,
|
||||||
|
address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
|
||||||
|
tags: ['nice', 'developer'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'Jim Green',
|
||||||
|
age: 42,
|
||||||
|
address: 'London No. 2 Lake Park, London No. 2 Lake Park',
|
||||||
|
tags: ['loser'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
name: 'Joe Black',
|
||||||
|
age: 32,
|
||||||
|
address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
|
||||||
|
tags: ['cool', 'teacher'],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.createEchartCake('echart1')
|
this.createEchartCake('echart1', {
|
||||||
this.createEchartCake('echart2')
|
bottom: 10,
|
||||||
this.createEchartCake('echart3')
|
left: 'right',
|
||||||
|
orient: 'vertical'
|
||||||
|
})
|
||||||
|
this.createEchartCake('echart2', {
|
||||||
|
bottom: 10,
|
||||||
|
left: 'right',
|
||||||
|
orient: 'vertical'
|
||||||
|
})
|
||||||
|
this.createEchartCake('echart3', {
|
||||||
|
bottom: 10,
|
||||||
|
left: 'right',
|
||||||
|
orient: 'vertical'
|
||||||
|
})
|
||||||
this.createEchartLine('echart4')
|
this.createEchartLine('echart4')
|
||||||
|
this.createColumnEcharrt('echart5')
|
||||||
|
this.createEchartCake('echart6', {
|
||||||
|
bottom: 'center',
|
||||||
|
right: '10%',
|
||||||
|
orient: 'vertical'
|
||||||
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
createEchartCake(id) {
|
createEchartCake(id, legend) {
|
||||||
// 基于准备好的dom，初始化echarts实例
|
// 基于准备好的dom，初始化echarts实例
|
||||||
let myChart = echarts.init(document.getElementById(id))
|
let myChart = echarts.init(document.getElementById(id))
|
||||||
// 指定图表的配置项和数据
|
// 指定图表的配置项和数据
|
||||||
@ -109,11 +237,7 @@ export default {
|
|||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item'
|
trigger: 'item'
|
||||||
},
|
},
|
||||||
legend: {
|
legend: legend,
|
||||||
bottom: 10,
|
|
||||||
left: 'right',
|
|
||||||
orient: 'vertical'
|
|
||||||
},
|
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: 'Access From',
|
name: 'Access From',
|
||||||
@ -195,6 +319,69 @@ export default {
|
|||||||
}
|
}
|
||||||
// 使用刚指定的配置项和数据显示图表。
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
myChart.setOption(option)
|
myChart.setOption(option)
|
||||||
|
},
|
||||||
|
createColumnEcharrt(id) {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
let myChart = echarts.init(document.getElementById(id))
|
||||||
|
// There should not be negative values in rawData
|
||||||
|
const rawData = [
|
||||||
|
[100, 302, 301, 334, 390, 330, 320],
|
||||||
|
[320, 132, 101, 134, 90, 230, 210],
|
||||||
|
[220, 182, 191, 234, 290, 330, 310],
|
||||||
|
[150, 212, 201, 154, 190, 330, 410],
|
||||||
|
[820, 832, 901, 934, 1290, 1330, 1320]
|
||||||
|
]
|
||||||
|
const totalData = []
|
||||||
|
for (let i = 0; i < rawData[0].length; ++i) {
|
||||||
|
let sum = 0
|
||||||
|
for (let j = 0; j < rawData.length; ++j) {
|
||||||
|
sum += rawData[j][i]
|
||||||
|
}
|
||||||
|
totalData.push(sum)
|
||||||
|
}
|
||||||
|
const grid = {
|
||||||
|
left: 100,
|
||||||
|
right: 100,
|
||||||
|
top: 50,
|
||||||
|
bottom: 50
|
||||||
|
}
|
||||||
|
const series = [
|
||||||
|
'Direct',
|
||||||
|
'Mail Ad',
|
||||||
|
'Affiliate Ad',
|
||||||
|
'Video Ad',
|
||||||
|
'Search Engine'
|
||||||
|
].map((name, sid) => {
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
type: 'bar',
|
||||||
|
stack: 'total',
|
||||||
|
barWidth: '60%',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||||
|
},
|
||||||
|
data: rawData[sid].map((d, did) =>
|
||||||
|
totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
let option = {
|
||||||
|
legend: {
|
||||||
|
selectedMode: false
|
||||||
|
},
|
||||||
|
grid,
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||||
|
},
|
||||||
|
series
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -409,7 +596,7 @@ export default {
|
|||||||
.faultView {
|
.faultView {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: flex-start;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -448,4 +635,80 @@ export default {
|
|||||||
height: 700px;
|
height: 700px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rightView {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightView .blockView {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.rightView .blockView:last-of-type {
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightView .blockView .headView {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightView .blockView .headView .titleView {
|
||||||
|
font-size: 14px;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightView .blockView .headView .conditionView {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.rightView .blockView .contentView {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tableView {
|
||||||
|
background: white;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableView .headView {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableView .headView .titleView {
|
||||||
|
font-size: 14px;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tableView .headView .conditionView {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tableView .contentView {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
x
Reference in New Issue
Block a user