xps-web_qhpt-v5/src/views/hos/statis/year/index.vue

<template>
  <div class="content-container">
    <el-row class="tool-bar">
      <div class="content-title">
        <span> {{ title }} </span>
      </div>
      <div class="select-search">
        <span class="search-label">部门：</span>
        <group-selector />
      </div>
      <div class="right" style="min-width:400px;flex: 1;">
        <el-button class="filter-item" type="primary" icon="el-icon-document" size="mini" @click="handleExport">导出</el-button>
        <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-printer" size="mini" @click="handlePrint">打印</el-button>
      </div>
    </el-row>
    <el-row class="content-body">
      <FullYearChart :keys="yearScoreKeys" :values="yearScoreValues" />
      <vuescroll :ops="ops" style="height: calc(100vh - 250px)">
        <!--年度-->
        <el-table id="print_view" v-loading="listLoading" border :data="yearScoreList">
          <el-table-column type="index" align="center" label="序号" width="200" />

          <el-table-column prop="year" header-align="center" align="center" width="300" label="部门">
            <template v-slot="{row}">
              <span> {{ row.groupName }} </span>
            </template>
          </el-table-column>

          <el-table-column prop="year" header-align="center" align="center" width="300" label="年度">
            <template v-slot="{row}">
              <span> {{ row.year }}年</span>
            </template>
          </el-table-column>

          <el-table-column prop="score" header-align="center" align="center" label="评分">
            <template v-slot="{row}">
              <span> {{ row.score }} </span>
            </template>
          </el-table-column>
        </el-table>
      </vuescroll>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import FullYearChart from '../../components/FullYearChart'
import GroupSelector from '@/components/GroupSelector'
import vuescroll from 'vuescroll'
import { groupYearScoreByList } from '@/api/hos/satisfyStatisApi'
export default {
  name: 'YearSatisIndex',
  components: { vuescroll, GroupSelector, FullYearChart },
  mixins: [],
  props: {},
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      title: '满意度-按年统计',
      listLoading: false,
      yearScoreList: [],
      yearScoreKeys: [],
      yearScoreValues: [],
      conditions: {
        groupId: undefined
      }

    }
  },
  computed: {
    ...mapGetters([
      'userData'
    ])
  },
  mounted() {
    this.getData()
  },
  methods: {

    getData() {
      this.listLoading = true
      groupYearScoreByList(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data } = resp
        if (code === 0) {
          this.yearScoreList = data
          this.showYearScore(data)
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 显示月份同比
    showYearScore(data) {
      var recordQty = []
      var score = []
      var year = []
      var targetQty = []
      for (let i = 0; i < data.length; i++) {
        recordQty.push(`${data[i].recordQty}`)
        score.push(`${data[i].score}`)
        year.push(`${data[i].year}`)
        targetQty.push(`${data[i].targetQty}`)
      }
      console.log({
        targetQty, recordQty, year, score
      })
      this.yearScoreKeys = year
      this.yearScoreValues = score
    },

    // 导出评价记录
    handleExport() {
      if (this.recordList.length <= 0) {
        this.$message.info('数据为空')
        return
      }

      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['科室', '年度', '评价次数', '得分']
        const filterVal = ['groupName', 'year', 'recordQty', 'score']
        const data = this.formatJson(filterVal, this.yearScoreList)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '',
          autoWidth: true,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    },

    handlePrint() {
      let iframe = document.getElementById('print-iframe')
      if (!iframe) {
        var el = document.querySelector('#print_view')
        iframe = document.createElement('IFRAME')
        var doc = null
        iframe.setAttribute('id', 'print-iframe')
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        const styleHtml = 'table{color:#fff;background-color:#0C3444;-webkit-print-color-adjust: exact;}' +
          'td,th{padding:10px;}' +
          'th{background:#306379;-webkit-print-color-adjust: exact;}' +
          'td{background:#0C3444;-webkit-print-color-adjust: exact; }'
        doc.write(`<html><head><style media="print">@media print {${styleHtml}}</style></head><body style="zoom: 60%;">${el.innerHTML}</body></html>`)
        doc.close()
        iframe.contentWindow.focus()
      }
      iframe.contentWindow.print()
      document.body.removeChild(iframe)
      // if (navigator.userAgent.indexOf('MSIE') > 0) {
      //   document.body.removeChild(iframe)
      // }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>

<style lang="scss" scoped>
.content-container {
  padding: 10px;
  margin: 10px;
  overflow: hidden;
  background: #193142;
  height: calc(100vh - 85px);
  p {
    margin: 0;
    line-height: 2em;
    padding: 0;
  }
  .tool-bar {
    display: flex;
    align-items: center;
    overflow: unset;
    .list-group {
      font-size: 14px;
      color: #C1C6C8;
      // overflow: hidden;
      padding:0 20px;
      .list-item {
        float: left;
        margin-right: 20px;
        cursor: pointer;
        &.active {
          color: #FFFFFF;
          border-bottom: 3px solid #08A6DC;
        }
      }
    }
    .search-label {
      text-align: right;
      font-size: 12px;
      font-weight: 400;
      color: #FFFFFF;
      line-height: 1;
      span {
        font-size: 20px;
        font-weight: 400;
        color: #FFFFFF;
      }
    }
  }
}
.select-search{
  margin-left: 6px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>