leave-school-vue/src/views/statistical/deptsectionrep/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select clearable class="filter-item" v-model="listQuery.pcmc" placeholder="批次名称">
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select clearable @change="initZyList" class="filter-item" v-model="listQuery.yx" placeholder="所在院系">
            <el-option v-for="item in  yxList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select clearable class="filter-item" v-model="listQuery.zy" placeholder="专业">
            <el-option v-for="item in  zyList" :key="item.id" :label="item.zymc" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select clearable class="filter-item" v-model="listQuery.bm" placeholder="部门">
            <el-option v-for="item in  bmList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">查询</el-button>
          <el-button class="filter-item" style="margin-left: 10px;" @click="handleReset" type="primary" icon="el-icon-edit">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <el-col :span="24">
      <el-card>
        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
      </el-card>
    </el-col>
    <el-dialog title="详情" :visible.sync="dialogFormVisible" width="80%" top="2vh">
      <audit-student-list :tableheight="tableheight" :queryparam="queryparam"></audit-student-list>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from '@/api/nodereport-api'
import { getDeptList, getSectionList } from '@/api/department-api'
import { getZyListByYx } from '@/api/major-api'
import waves from '@/directive/waves' // 水波纹指令
import { resetForm } from '@/utils'
import { crudPageList } from '@/utils/crud'
import mixindata from '@/utils/crud'
import AuditStudentList from '@/components/AuditStudentList'

export default {
  name: 'class',
  components: { AuditStudentList },
  directives: {
    waves
  },
  mixins: [mixindata],
  data() {
    return {
      tableheight: 500,
      pcmcList: [],
      yxList: [],
      zyList: [],
      bmList: [],
      queryparam: {}
    }
  },
  created() {
    this.listQuery = this.$route.params
    this.initYxList()
    this.initZyList()
    this.initBmList()
    this.handlePageList()
    this.tableheight = window.innerHeight - 320
  },
  methods: {
    drawLine() {
      this.$nextTick(function() {
        const xdata = []
        const xiddata = []
        const tgdata = []
        const btgdata = []
        const dshdata = []
        for (const item of this.items) {
          xdata.push(item.hjmc)
          xiddata.push(item.hjid)
          tgdata.push(item.shtg)
          btgdata.push(item.shbtg)
          dshdata.push(item.dsh)
        }
        // 基于准备好的dom，初始化echarts实例
        const myChart = window.echarts.init(document.getElementById('myChart'))
        // 绘制图表
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            data: xdata,
            xiddata: xiddata
          },
          yAxis: {
            type: 'value'
          },
          legend: {
            data: ['通过', '不通过', '待审核']
          },
          series: [
            {
              name: '通过',
              type: 'bar',
              data: tgdata,
              shzt: 1
            },
            {
              name: '不通过',
              type: 'bar',
              data: btgdata,
              shzt: 2
            },
            {
              name: '待审核',
              type: 'bar',
              data: dshdata,
              shzt: 3
            }]
        }
        myChart.setOption(option)
        const that = this
        myChart.on('click', function(params) {
          const hjid = option.xAxis.xiddata[params.dataIndex]
          const shzt = option.series[params.seriesIndex].shzt
          that.showDetail(hjid, shzt)
        })
      })
    },
    initYxList() {
      getDeptList().then(response => {
        this.yxList = response.items
      })
    },
    initZyList() {
      getZyListByYx({ yx: this.listQuery.yx }).then(response => {
        this.zyList = response.items
      })
    },
    initBmList() {
      getSectionList().then(response => {
        this.bmList = response.items
      })
    },
    handlePageList() {
      crudPageList(this, getList, this.drawLine)
    },
    handleReset() {
      resetForm(this.listQuery)
    },
    handleFilter() {
      this.listQuery.pageIndex = 1
      this.handlePageList()
    },
    showDetail(hjid, shzt) {
      this.listQuery['hjid'] = hjid
      this.listQuery['shzt'] = shzt
      this.queryparam = Object.assign({}, this.listQuery)
      this.dialogFormVisible = true
    }
  }
}
</script>
<style scoped>
.app-container a {
    color: #00a4f4;
    text-decoration: none;
}
.el-card {
  margin: 5px;
}
</style>