xps-web-csat-v5/src/views/hos/overview/index.vue

<template>
  <div class="page-container">
    <!--统计-->
    <el-row class="top-panel">
      <el-col :span="6">
        <div class="group-box">
          <div class="group-title">
            满意医院-{{ year }}年{{ month }}月
            <ScoreIcon :score="score" />
          </div>
          <div class="group-content">
            <div class="scoreIcon-container">
              <div class="scoreIcon scoreIcon-3">{{ parseFloat(score)!==0?parseFloat(score).toFixed(1):0 }}</div>
              <span class="tip">总评分</span>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="group-box">
          <div class="group-title">
            <el-select v-model="year" placeholder="请选择" class="el-select-text" @change="getData">
              <el-option
                v-for="item in yearList"
                :key="item"
                :label="item+'年'"
                :value="item"
              />
            </el-select>
            评分-<span>环比</span>
          </div>
          <div class="group-content">
            <FullYearChart :keys="yearScoreKeys" :values="yearScoreValues" @change="changeFullYearChart" />
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="group-box">
          <div class="group-title">
            历年{{ month }}月评分-<span>同比</span>
          </div>
          <div class="group-content">
            <YoYChart :keys="YoYScoreKeys" :values="YoYScoreValues" />
          </div>
        </div>
      </el-col>
    </el-row>

    <!--数据块-->
    <el-row>
      <el-col :span="6">
        <div>
          <TaskPanel more="/hos/satisfy/task/index" height="calc(100vh - 282px)" :task-cat-id="storyId" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="group-box">
          <div class="group-title">
            满意医院-待改进项目
            <el-link @click="handleMoreAssess()">立即评价</el-link>
          </div>
          <el-row>
            <vuescroll :ops="ops" style="height: calc(100vh - 350px)">
              <ImprovingAdvice :story-id="storyId" />
            </vuescroll>
          </el-row>
        </div>
      </el-col>

      <el-col :span="6">
        <div>
          <ArtPanel more="/hos/satisfy/news/index" height="calc(100vh - 282px)" />
        </div>
      </el-col>
    </el-row>
    <IndexScoreDetail ref="IndexScoreDetail" />
    <AssessDetail ref="AssessDetail" />
  </div>
</template>

<script>
import { FullYearChart, YoYChart } from '../components'
import { getStoryOverview } from '@/api/hos/hosStatisApi'
import ArtPanel from '@/views/hos/components/ArtPanel'
import TaskPanel from '@/views/hos/components/TaskPanel'
import { ImprovingAdvice } from '@/views/hos/components'
import { IndexScoreDetail, ScoreIcon } from '@/components'
import { AssessDetail } from '@/views/hos/components'
import vuescroll from 'vuescroll'
export default {
  name: 'SatisfyIndex',
  components: {
    ImprovingAdvice,
    FullYearChart,
    YoYChart,
    ArtPanel,
    TaskPanel,
    IndexScoreDetail,
    ScoreIcon,
    AssessDetail,
    vuescroll
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      path: require('@/assets/images/login/login_number.png'),
      scoreGreenBgImage: require('@/assets/images/common-hospital/common_dial_green.png'),
      scoreRadBgImage: require('@/assets/images/common-hospital/common_dial_red.png'),
      yearList: [],
      year: 2022,
      month: 10,
      storyId: 3,
      score: 0,
      yearScore: [],
      yearScoreKeys: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      yearScoreValues: [],
      monthScore: [],
      YoYScoreKeys: [],
      YoYScoreValues: []
    }
  },
  mounted() {
    const d = new Date()
    this.year = d.getFullYear()
    this.month = d.getMonth() + 1
    this.getData()
    this.initYearList()
  },
  methods: {
    initYearList() {
      const d = new Date()
      var yearList = []
      for (let i = -5; i < 1; i++) {
        yearList.push(d.getFullYear() + i)
      }
      this.yearList = yearList
    },
    handleAssessDetail(row) {
      this.$refs['AssessDetail'].handler(row)
    },
    viewIndexScoreDetail(data) {
      this.$refs['IndexScoreDetail'].handler(data)
    },
    getData() {
      getStoryOverview(this.year, this.month, this.storyId).then((resp) => {
        const { code, msg, data } = resp
        if (code === 200) {
          if (!data) {
            this.score = 0
            this.yearScore = 0
            this.showYearScore({ 'm1': 0, 'm10': 0, 'm11': 0, 'm12': 0, 'm2': 0, 'm3': 0, 'm4': 0, 'm5': 0, 'm6': 0, 'm7': 0, 'm8': 0, 'm9': 0, 'storyId': this.storyId, 'year': this.year })
            this.showMonthScore([])
            return
          }
          this.score = data.score
          this.yearScore = data.yearScore
          if (data.yearScore) {
            this.showYearScore(data.yearScore)
          }
          this.monthScore = data.monthScore
          if (data.monthScore) {
            this.showMonthScore(data.monthScore)
          }
        } else {
          this.$message.error(msg)
        }
      }).catch((error) => {
        console.log(error)
      })
    },

    // 显示月份同比
    showMonthScore(data) {
      const keys = []
      const values = []
      for (let i = 0; i < data.length; i++) {
        keys.push(`${data[i].year}-${data[i].month}`)
        values.push(data[i].hosScore)
      }
      this.YoYScoreKeys = keys
      this.YoYScoreValues = values
    },

    // 显示当年环比
    showYearScore(data) {
      this.yearScoreValues.length = 0
      this.yearScoreValues.push(data.m1)
      this.yearScoreValues.push(data.m2)
      this.yearScoreValues.push(data.m3)
      this.yearScoreValues.push(data.m4)
      this.yearScoreValues.push(data.m5)
      this.yearScoreValues.push(data.m6)
      this.yearScoreValues.push(data.m7)
      this.yearScoreValues.push(data.m8)
      this.yearScoreValues.push(data.m9)
      this.yearScoreValues.push(data.m10)
      this.yearScoreValues.push(data.m11)
      this.yearScoreValues.push(data.m12)
    },

    handleMoreAssess() {
      this.$router.push({
        path: '/hos/satisfy/assess/index'
      })
    },
    changeFullYearChart(params) {
      this.month = params.x
      getStoryOverview(this.year, params.x, this.storyId).then((resp) => {
        const { code, msg, data } = resp
        if (code === 200) {
          if (!data) {
            this.score = 0
            this.yearScore = 0
            this.showYearScore({ 'm1': 0, 'm10': 0, 'm11': 0, 'm12': 0, 'm2': 0, 'm3': 0, 'm4': 0, 'm5': 0, 'm6': 0, 'm7': 0, 'm8': 0, 'm9': 0, 'storyId': this.storyId, 'year': this.year })
            this.showMonthScore([])
            return
          }
          this.score = data.score
          this.yearScore = data.yearScore
          if (data.yearScore) {
            this.showYearScore(data.yearScore)
          }
          this.monthScore = data.monthScore
          if (data.monthScore) {
            this.showMonthScore(data.monthScore)
          }
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  margin: 0px;
  padding: 5px 10px;
  color: #FFF;
  position: relative;

  .page-title {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
  }
  .top-panel{
    margin-bottom:0;
    .group-box{
      border-radius: 0;
      padding: 5px 15px;
      background-color: inherit;
      border-top: 0;
    }
  }
  .group-box {
    width: calc(100% - 15px);
    background-color: #0C3242;
    border-top: 4px solid #1F3C51;
    border-radius: 5px 5px 0 0;
    padding: 15px;
    &-bg {
      background-repeat: no-repeat;
      background-position: right top;
    }
    .group-title {
      font-size: 16px;
      color: #FFF;
      margin-bottom: 15px;
      font-weight: bold;
      span{
        color: #aa9f9f;
      }
      .el-link {
        float: right;
        font-size: 14px;
        color: #C1C6C8;
        -webkit-text-fill-color: #C1C6C8;
      }

      span{
        font-size: 12px;
        font-family: Microsoft YaHei,serif;
        font-weight: 400;
        color: #7C878E;
      }
    }

    .group-content {
      height: 80%;
      overflow: hidden;
    }
  }

  .score-group{
    overflow: hidden;
    &-title{
      font-size: 14px;
      font-family: Microsoft YaHei,serif;
      font-weight: 400;
      color: #C1C6C8;
      text-align: center;
      overflow: hidden;

      p{
        position: relative;
        display: inline-block;

        &:before{
          position: absolute;
          left: -353px;
          top: 50%;
          content: "";
          width: 343px;
          height: 2px;
          background: linear-gradient(-90deg, #233E4F 0%, #193142 100%);
        }

        &:after{
          position: absolute;
          right: -353px;
          top: 50%;
          content: "";
          width: 343px;
          height: 2px;
          background: linear-gradient(90deg, #233E4F 0%, #193142 100%);
        }
      }

    }
  }

  .chart-score-group {
    margin-bottom: 15px;
  }
}
</style>