dbd-meeting-html/src/views/admin/repair/RepairStatistics.vue

<template>
  <div class="container">

    <div class="topHeadView">
      <div class="itemView">
        <div class="imgView"></div>
        <div class="label">待派单</div>
        <div class="num">{{ adminStatsCount.wait }}</div>
      </div>
      <div class="itemView">
        <div class="imgView"></div>
        <div class="label">重派单</div>
        <div class="num">{{ adminStatsCount.anew }}</div>
      </div>
      <div class="itemView">
        <div class="imgView"></div>
        <div class="label">未查看通知</div>
        <div class="num">{{ adminStatsCount.newnotice }}</div>
      </div>
      <div class="itemView">
        <div class="imgView"></div>
        <div class="label">已查看通知</div>
        <div class="num">{{ adminStatsCount.oldnotice }}</div>
      </div>
    </div>

    <div class="caseStatisticsView">
      <div class="headView">
        <div class="titleView">工单统计</div>
        <div class="typeView">
          <div :class="type=='month' ? 'activity' : ''" class="type " @click="repairCount">本月</div>
          <div :class="type=='year' ? 'activity' : ''" class="type" @click="getYearCount">本年</div>
        </div>
      </div>

      <div class="contentView">
        <div class="itemView">
          <div class="label">维修工单</div>
          <div class="value">{{ repairStatsCount.zs }}</div>
        </div>
        <div class="itemView">
          <div class="label">待维修工单</div>
          <div class="value">{{ repairStatsCount.wait }}</div>
        </div>
        <div class="itemView">
          <div class="label">超时量</div>
          <div class="value">{{ repairStatsCount.timeout }}</div>
        </div>
        <div class="itemView">
          <div class="label">差评量</div>
          <div class="value">{{ repairStatsCount.l }}</div>
        </div>
        <div class="itemView">
          <div class="label">中评量</div>
          <div class="value">{{ repairStatsCount.m }}</div>
        </div>
        <div class="itemView">
          <div class="label">好评量</div>
          <div class="value">{{ repairStatsCount.h }}</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 :value="floor.type" @select="selectFloor" style="width: 120px;margin-right: 10px">
              <a-select-option value="month">按月</a-select-option>
              <a-select-option value="year">按年</a-select-option>
            </a-select>
            <a-date-picker
              v-if="floor.type == 'year' || floor.type == ''"
              format="YYYY"
              mode="year"
              :value="floor.time"
              placeholder="选择年份"
              :open="floor.open"
              @openChange="openChange"
              @panelChange="panelChange"
            >
            </a-date-picker>
            <a-month-picker v-if='floor.type =="month"' @change="clickFloor" :value="floor.time"
                            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 :value="fault.type" @select="selectFault" style="width: 120px;margin-right: 10px">
                <a-select-option value="month">按月</a-select-option>
                <a-select-option value="year">按年</a-select-option>
              </a-select>
              <a-date-picker
                v-if="fault.type == 'year' || fault.type == ''"
                format="YYYY"
                mode="year"
                :value="fault.time"
                placeholder="选择年份"
                :open="fault.open"
                @openChange="openFaultChange"
                @panelChange="panelFaultChange"
              >
              </a-date-picker>
              <a-month-picker v-if='fault.type =="month"' @change="clickFault" :value="fault.time"
                              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 :value="faultType.type" @select="selectFaultType" style="width: 120px;margin-right: 10px">
                <a-select-option value="month">按月</a-select-option>
                <a-select-option value="year">按年</a-select-option>
              </a-select>
              <a-date-picker
                v-if="faultType.type == 'year' || faultType.type == ''"
                format="YYYY"
                mode="year"
                :value="faultType.time"
                placeholder="选择年份"
                :open="faultType.open"
                @openChange="openFaultTypeChange"
                @panelChange="panelFaultTypeChange"
              >
              </a-date-picker>
              <a-month-picker v-if='faultType.type =="month"' @change="clickFaultType" :value="faultType.time"
                              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 :value="deviceType.type" @select="selectDeviceType" style="width: 120px;margin-right: 10px">
            <a-select-option value="month">按月</a-select-option>
            <a-select-option value="year">按年</a-select-option>
          </a-select>
          <a-date-picker
            v-if="deviceType.type == 'year' || deviceType.type == ''"
            format="YYYY"
            mode="year"
            :value="deviceType.time"
            placeholder="选择年份"
            :open="deviceType.open"
            @openChange="openDeviceTypeChange"
            @panelChange="panelDeviceTypeChange"
          >
          </a-date-picker>
          <a-month-picker v-if='deviceType.type =="month"' @change="clickDeviceType" :value="deviceType.time"
                          placeholder="请选择月" />
        </div>
      </div>
      <div class="contentView">
        <a-table
          style="width: 100%"
          :columns="columns"
          :data-source="loadData"
          showPagination="true"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"

        >
        </a-table>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import {
  repairAdminStats,
  repairStats,
  floorStats,
  deviceTypeStats,
  selectDeviceStats,
  selectFailureStats
} from '@/api/admin/repair/repairStats'

export default {
  name: 'RepairStatistics',
  data () {
    return {
      type: '',
      adminStatsCount: [],
      repairStatsCount: [],
      finishCount: [],
      timeout: [],
      deviceTypeCount: [],
      pj: [],
      floorStatsCount: [],
      // 查询参数
      queryParam: {},
      selectedRowKeys: [],
      selectedRows: [],
      faultStatsCount: [],
      selectFaultStatsCount: [],
      deviceType: {
        type: '',
        time: '',
        open: false
      },
      fault: {
        type: '',
        time: '',
        open: false
      },
      yearShowOne: false,
      //
      floor: {
        type: '',
        time: '',
        open: false
      },
      faultType: {
        type: '',
        time: '',
        open: false
      },
      // 表头
      columns: [
        {
          title: '类型',
          dataIndex: 'typename'
        },
        {
          title: '保修次数',
          dataIndex: 'zs'
        },
        {
          title: '维修次数',
          dataIndex: 'closed'
        },
        {
          title: '损坏最多品牌',
          dataIndex: 'brand'
        },
        {
          title: '维修完成率',
          dataIndex: 'wcl'
        },
        {
          title: '好评率',
          dataIndex: 'hl'
        },
        {
          title: '中评率',
          dataIndex: 'ml'
        },
        {
          title: '差评率',
          dataIndex: 'll'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: []
    }
  },
  mounted () {
    this.adminStats()
    this.repairCount()
    this.getfloorStats()
    this.deviceStats()
    this.faultStats()
    this.selectFailureStats()

  },
  methods: {
    // 使用openChange事件控制日期下拉面板显示与收起
    openChange (open) {
      this.floor.open = open
    },
    // 使用panelChange事件控制选中年份的方法
    panelChange (value) {
      // 接收panelChange返回的值
      this.floor.time = value
      const date1 = new Date(this.floor.time).getFullYear()
      floorStats({ date: date1 }).then(res => {
        this.createEchartLine('echart4', res.data)
      })
      this.floor.open = false
    },
    // 选择-楼层负责人情况
    selectFloor (value, option) {
      this.floor.type = value
    },
    clickFloor (a, c) {
      this.floor.time = c
      console.log(c)
      floorStats({ date: c }).then(res => {
        this.createEchartLine('echart4', res.data)
      })
    },

    // 故障统计 使用openChange事件控制日期下拉面板显示与收起
    openFaultChange (open) {
      this.fault.open = open
    },
    // 使用panelChange事件控制选中年份的方法
    panelFaultChange (value) {
      // 接收panelChange返回的值
      this.fault.time = value
      const date1 = new Date(this.fault.time).getFullYear()
      selectDeviceStats({ date: date1 }).then(res => {
        this.faultStatsCount = res.data
        this.createColumnEcharrt('echart5', res.data)
      })
      this.fault.open = false
    },
    // 选择-楼层负责人情况
    selectFault (value, option) {
      this.fault.type = value
    },
    clickFault (a, c) {
      this.fault.time = c
      selectDeviceStats({ date: c }).then(res => {
        this.faultStatsCount = res.data
        this.createColumnEcharrt('echart5', res.data)
      })
    },

    // 故障类型 使用openChange事件控制日期下拉面板显示与收起
    openFaultTypeChange (open) {
      this.faultType.open = open
    },
    // 使用panelChange事件控制选中年份的方法
    panelFaultTypeChange (value) {
      // 接收panelChange返回的值
      this.faultType.time = value
      const date1 = new Date(this.faultType.time).getFullYear()
      selectFailureStats({ date: date1 }).then(res => {
        console.log(res)
        this.selectFaultStatsCount = res.data
        this.createEchartCake('echart6', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.selectFaultStatsCount)
      })
      this.faultType.open = false

    },
    // 选择-楼层负责人情况
    selectFaultType (value, option) {
      this.faultType.type = value
    },
    clickFaultType (a, c) {
      this.faultType.time = c
      selectFailureStats({ date: c }).then(res => {
        console.log(res)
        this.selectFaultStatsCount = res.data
        this.createEchartCake('echart6', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.selectFaultStatsCount)
      })
    },


    // 使用openChange事件控制日期下拉面板显示与收起
    openDeviceTypeChange (open) {
      this.deviceType.open = open
    },
    // 使用panelChange事件控制选中年份的方法
    panelDeviceTypeChange (value) {
      // 接收panelChange返回的值
      this.deviceType.time = value
      this.deviceType.open = false
      const date1 = new Date(this.deviceType.time).getFullYear()
      deviceTypeStats({ date: date1 }).then(res => {
        this.loadData = res.rows
      })
    },
    // 选择-楼层负责人情况
    selectDeviceType (value, option) {
      this.deviceType.type = value
    },
    clickDeviceType (a, c) {
      console.log(c)
      this.deviceType.time = c
      deviceTypeStats({ date: c }).then(res => {
        this.loadData = res.rows
      })
    },

    adminStats () {
      repairAdminStats().then(res => {
        this.adminStatsCount = res.repairAdminStats
      })
    },
    deviceStats () {
      let date = this.formatDate()
      deviceTypeStats({ date: date }).then(res => {
        this.loadData = res.rows
      })
    },
    faultStats () {
      let date = this.formatDate()

      selectDeviceStats({ date: date }).then(res => {
        this.faultStatsCount = res.data
        this.createColumnEcharrt('echart5', res.data)
      })
    },
    selectFailureStats () {
      let date = this.formatDate()

      selectFailureStats({ date: date }).then(res => {
        console.log(res)
        this.selectFaultStatsCount = res.data
        this.createEchartCake('echart6', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.selectFaultStatsCount)
      })
    },
    getYearCount () {
      this.type = 'year'
      repairStats().then(res => {
        this.repairStatsCount = res.currentYear.stats
        this.finishCount = res.currentYear.wc
        this.timeout = res.currentYear.timeout
        this.pj = res.currentYear.pj
        this.createEchartCake('echart1', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.finishCount)
        this.createEchartCake('echart2', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.timeout)
        this.createEchartCake('echart3', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.pj)
      })
    },
    repairCount () {
      repairStats().then(res => {
        this.type = 'month'

        console.log(res.currentMonth.wc)
        this.repairStatsCount = res.currentMonth.stats
        this.finishCount = res.currentMonth.wc
        this.timeout = res.currentMonth.timeout
        this.pj = res.currentMonth.pj
        this.createEchartCake('echart1', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.finishCount)
        this.createEchartCake('echart2', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.timeout)
        this.createEchartCake('echart3', {
          bottom: 10,
          left: 'right',
          orient: 'vertical'
        }, this.pj)
      })
    },
    // 楼层负责人情况
    getfloorStats () {
      let date = this.formatDate()
      floorStats({ date: date }).then(res => {
        this.createEchartLine('echart4', res.data)
      })
    },
    formatDate () {
      let date = new Date()
      let myyear = date.getFullYear()
      let mymonth = date.getMonth() + 1
      mymonth < 10 ? mymonth = '0' + mymonth : mymonth
      return `${myyear}-${mymonth}`
    },

    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    createEchartCake (id, legend, data) {
      console.log(data)
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: legend,
        series: [
          {
            name: '完成率',
            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: data
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    ,
    createEchartLine (id, data) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id))
      let option = {
        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: data.y
        },
        series: [
          {
            name: '故障数量',
            type: 'bar',
            data: data.total
          },
          {
            name: '数量类型',
            type: 'bar',
            data: data.finish
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
    ,
    createColumnEcharrt (id, data) {
      data.x = data.x.map(item => {
        if (item && item.length > 4) {
          item = item.substring(0, 4) + '..'
        }
        return item
      })

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById(id))
      // There should not be negative values in rawData
      const rawData = [
        data.total,
        data.finish
      ]
      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 = [
        '未完成',
        '已完成'
      ].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: data.x
        },
        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>