xps-web-csat-v5/src/views/hos/statis/month/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="select-search">
        <span class="search-label">年度：</span>
        <el-select v-model="conditions.year" filterable placeholder="年份" style="width:120px">
          <el-option label="2022年" :value="2022" />
          <el-option label="2023年" :value="2023" />
          <el-option label="2024年" :value="2024" />
          <el-option label="2025年" :value="2025" />
          <el-option label="2026年" :value="2026" />
          <el-option label="2027年" :value="2027" />
        </el-select>
      </div>

      <div class="select-search">
        <span class="search-label">月份：</span>
        <el-select v-model="conditions.month" filterable placeholder="月份" style="width:120px" clearable>
          <el-option label="1月" :value="1" />
          <el-option label="2月" :value="2" />
          <el-option label="3月" :value="3" />
          <el-option label="4月" :value="4" />
          <el-option label="5月" :value="5" />
          <el-option label="6月" :value="6" />
          <el-option label="7月" :value="7" />
          <el-option label="8月" :value="8" />
          <el-option label="9月" :value="9" />
          <el-option label="10月" :value="10" />
          <el-option label="11月" :value="11" />
          <el-option label="12月" :value="12" />
        </el-select>
      </div>

      <div class="right" style="min-width:400px;flex: 1;">
        <el-input v-model="conditions.keywords" class="search-input m-right-15" size="mini" placeholder="请输入内容">
          <el-button slot="append" icon="el-icon-search" size="mini" @click="getData()" />
        </el-input>
        <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">
      <vuescroll :ops="ops" style="height: calc(100vh - 250px)">
        <!--年度-->
        <el-table id="print_view" v-loading="listLoading" border :data="dataList">
          <el-table-column type="index" align="center" label="序号" width="80" />

          <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 }}年-{{ row.month }}月</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-column prop="score" header-align="center" align="center" label="评价目标数目">
            <template v-slot="{row}">
              <span> {{ row.targetQty }} </span>
            </template>
          </el-table-column>

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

<script>
import { mapGetters } from 'vuex'
import GroupSelector from '@/components/GroupSelector'
import vuescroll from 'vuescroll'
import { groupMonthByList } from '@/api/hos/satisfyStatisApi'
export default {
  name: 'MonthSatisIndex',
  components: { vuescroll, GroupSelector },
  mixins: [],
  props: {},
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      title: '满意度-按年月统计',
      listLoading: false,
      dataList: [],
      conditions: {
        groupId: undefined,
        year: undefined,
        month: undefined,
        keywords: undefined
      }

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

    getData() {
      this.listLoading = true
      groupMonthByList(this.conditions).then((resp) => {
        this.listLoading = false
        const { code, msg, data } = resp
        if (code === 200) {
          this.dataList = data
          this.showYearChart(data)
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 显示评分
    showYearChart(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.yearKeys = year
      this.scoreYearValues = score
      this.targetYearValues = targetQty
      this.recordYearValues = recordQty
    },

    // 导出评价记录
    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: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
</style>