dbd-meeting-html/src/views/admin/repair/RepairStatistics.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: 600px'></div>
        </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>

<script>
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', {
      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, legend) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: legend,
        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)
    },
    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)
    }
  }
}
</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: flex-start;
  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;
}

.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>