diff --git a/src/views/admin/repair/RepairStatistics.vue b/src/views/admin/repair/RepairStatistics.vue
index e9056e2..1df2b6a 100644
--- a/src/views/admin/repair/RepairStatistics.vue
+++ b/src/views/admin/repair/RepairStatistics.vue
@@ -60,18 +60,12 @@
-
工单完成情况
+
楼层负责人情况
-
- 按周
-
-
- 按月
-
-
- 按年
-
+ 按周
+ 按月
+ 按年
@@ -81,10 +75,58 @@
+
@@ -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;
+}
+
\ No newline at end of file