mirror of
https://gitee.com/elegant_wings/dbd-meeting-html.git
synced 2025-08-08 14:12:41 +08:00
1
This commit is contained in:
SelfRidicule
parent
a631baad5d
commit
9e5663416d
@ -60,18 +60,12 @@
|
||||
<div class='faultView'>
|
||||
<div class='floorView'>
|
||||
<div class='headView'>
|
||||
<div class='titleView'>工单完成情况</div>
|
||||
<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-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>
|
||||
@ -81,10 +75,58 @@
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
</template>
|
||||
@ -94,14 +136,100 @@ import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
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() {
|
||||
this.createEchartCake('echart1')
|
||||
this.createEchartCake('echart2')
|
||||
this.createEchartCake('echart3')
|
||||
this.createEchartCake('echart1', {
|
||||
bottom: 10,
|
||||
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.createColumnEcharrt('echart5')
|
||||
this.createEchartCake('echart6', {
|
||||
bottom: 'center',
|
||||
right: '10%',
|
||||
orient: 'vertical'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
createEchartCake(id) {
|
||||
createEchartCake(id, legend) {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
let myChart = echarts.init(document.getElementById(id))
|
||||
// 指定图表的配置项和数据
|
||||
@ -109,11 +237,7 @@ export default {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
bottom: 10,
|
||||
left: 'right',
|
||||
orient: 'vertical'
|
||||
},
|
||||
legend: legend,
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
@ -195,6 +319,69 @@ export default {
|
||||
}
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -448,4 +635,80 @@ export default {
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user