xps-web-csat/src/views/hos/panorama/index.vue

<template>
  <div class="page-container">
    <el-row class="top-panel">
      <el-col :span="16">
        <div class="group-box-head-container year">
          <el-select v-model="year" placeholder="请选择年份" class="el-select-text" @change="changeYear">
            <el-option
              v-for="item in yearList"
              :key="item"
              :label="item+'年'"
              :value="item"
            />
          </el-select>
          <el-select v-model="month" placeholder="请选择月份" class="el-select-text" @change="changeMonth">
            <el-option
              v-for="item in 12"
              :key="item"
              :label="item+'月'"
              :value="item"
            />
          </el-select>
          <div class="group-box-head">年满意度评价</div>
        </div>
        <el-row>
          <el-col :span="24">
            <div class="group-box border">
              <div class="group-content">
                <div class="group-content-item">
                  <div class="panorama-scoreIcon-container">
                    <div class="item">
                      <p class="score small">{{ yearOverview.score }}</p>
                      <p class="name">总评分</p>
                    </div>
                  </div>
                  <div class="chart-container">
                    <FullYearChart :values="showYearScore(yearOverview.monthScoreCounter)" />
                  </div>
                  <div class="panorama-scoreIcon-container">
                    <div class="item">
                      <p class="score small">{{ yearOverview.recordQty }}</p>
                      <p class="name">评价次数</p>
                    </div>
                    <div class="item">
                      <p class="score small">{{ yearOverview.groupQty }}</p>
                      <p class="name">科室</p>
                    </div>
                    <div class="item">
                      <p class="score small">{{ yearOverview.doctorQty }}</p>
                      <p class="name">医务人员</p>
                    </div>
                    <div class="item">
                      <p class="score small">{{ yearOverview.gridQty }}</p>
                      <p class="name">场所</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px">
          <el-col :span="18" class="group-box-month">
            <div class="group-box-head-container"><div class="group-box-head">月满意度评价</div></div>
            <div class="monthOverview-container">
              <div v-for="(monthItem,mIndex) in monthOverview" :key="mIndex" class="group-box border">
                <div class="group-title">
                  <div>{{ monthItem.score }}</div>
                  <div>{{ monthItem.groupName }}</div>
                </div>
                <div class="group-content">
                  <div v-for="(checklist,cklIndex) in monthItem.checklistList" :key="cklIndex" class="group-content-item block">
                    <div class="checklist-title">{{ checklist.checklistTitle }}</div>
                    <div class="checklist-content flex-start">
                      <div class="chart-container">
                        <monthChart :id="'monthChart-'+cklIndex" :key="'checklist-'+cklIndex" :keys="monthScoreKeys" :values="formatCheckListValues(checklist.dayScoreList)" :axis-label="false" />
                      </div>
                      <div class="panorama-scoreIcon-container">
                        <div class="item">
                          <p class="score small">{{ checklist.score }}</p>
                          <p class="name">得分</p>
                        </div>
                        <div class="item">
                          <p class="score small">{{ checklist.targetQty }}</p>
                          <p class="name">总人次</p>
                        </div>
                        <div class="item">
                          <p class="score small">{{ checklist.recordQty }}</p>
                          <p class="name">评价数</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="group-box">
              <div class="group-title">
                <span>科室-英雄榜</span>
                <el-link @click="handleMoreAssess()">详情</el-link>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height: 188px">
                  <GroupScoreRank :data="groupDataList" />
                </vuescroll>
              </el-row>
            </div>
            <div class="group-box" style="margin:5px 0">
              <div class="group-title">
                <span>医生-英雄榜</span>
                <el-link @click="handleMoreAssess()">详情</el-link>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height:188px">
                  <DoctorScoreRank :data="doctorDataList" />
                </vuescroll>
              </el-row>
            </div>
            <div class="group-box">
              <div class="group-title">
                <span>场所-英雄榜</span>
                <el-link @click="handleMoreAssess()">详情</el-link>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height: 188px">
                  <GridScoreRank ref="GridScoreRank" :data="gridDataList" />
                </vuescroll>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8">
        <div class="group-box-head" style="padding:10px 0">今日评价次数</div>
        <div class="group-box max">
          <div class="group-content">
            <div class="panorama-scoreIcon-container">
              <div class="item">
                <p class="score">{{ parseFloat(todayOverview.score)!==0?parseFloat(todayOverview.score).toFixed(1):0 }}</p>
                <p class="name">总评分</p>
              </div>

              <div class="item">
                <p class="score">{{ parseFloat(todayOverview.recordQty)!==0?parseFloat(todayOverview.recordQty).toFixed(1):0 }}</p>
                <p class="name">评价次数</p>
              </div>
            </div>
          </div>
        </div>
        <el-row style="margin-top:5px">
          <el-col :span="12">
            <div class="group-box">
              <div class="group-title">
                <span>科室-今日排行</span>
                <el-link @click="handleMoreAssess()">详情</el-link>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height: 188px">
                  <GroupScoreRank ref="GroupScoreRank" :data="todayOverview.groupRank" http />
                </vuescroll>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="group-box max">
              <div class="group-title">
                <span>医生-今日排行</span>
                <el-link @click="handleMoreAssess()">详情</el-link>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height:188px">
                  <DoctorScoreRank :data="todayOverview.doctorRank" http />
                </vuescroll>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top:10px">
          <el-col :span="12">
            <div class="group-box">
              <div class="group-title">
                <span>场所-今日排行</span>
                <el-link @click="handleMoreAssess()">详情</el-link>
              </div>
              <vuescroll :ops="ops" style="height: calc(100vh - 495px)">
                <GridScoreRank :data="todayOverview.gridRank" http />
              </vuescroll>
            </div>
          </el-col>
          <el-col :span="12">
            <RecentRecord more="/hos/satisfy/news/index" height="calc(100vh - 452px)" :data="todayOverview.data" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { gridScoreByList, groupScoreByList, doctorScoreByList } from '@/api/hos/satisfyStatisApi'
import { yearOverview, monthOverview, todayOverview } from '@/api/hos/satisfyPanoramaApi'
import monthChart from './components/monthChart'
import FullYearChart from './components/FullYearChart'
import RecentRecord from './components/RecentRecord'
import DoctorScoreRank from '@/views/hos/panorama/components/DoctorScoreRank'
import GridScoreRank from '@/views/hos/panorama/components/GridScoreRank'
import GroupScoreRank from '@/views/hos/panorama/components/GroupScoreRank'
import vuescroll from 'vuescroll'
import mqtt from 'mqtt'
import { mqttUrl } from '@/settings'
export default {
  name: 'SatisfyIndex',
  components: {
    monthChart,
    FullYearChart,
    RecentRecord,
    DoctorScoreRank,
    GridScoreRank,
    GroupScoreRank,
    vuescroll
  },
  data() {
    return {
      ops: {
        bar: {
          keepShow: false,
          background: 'rgba(144, 147, 153, 0.4)',
          onlyShowBarOnScroll: false
        }
      },
      year: '',
      month: '',
      yearList: [],
      yearScoreValues: [10, 20, 30, 40, 50, 60, 50, 30, 35, 20, 55],
      monthScoreKeys: [],
      monthScoreValues: [],
      conditions: {},
      todayOverview: {
        data: [],
        doctorRank: [],
        gridRank: [],
        groupName: '',
        groupRank: [],
        recordQty: 0,
        score: 0
      },
      yearOverview: {
        doctorQty: 0,
        gridQty: 0,
        groupName: '',
        groupQty: 0,
        monthScoreCounter: {},
        recordQty: 0,
        score: 0
      },
      monthOverview: [],
      doctorDataList: [],
      groupDataList: [],
      gridDataList: []
    }
  },
  mounted() {
    this.init()
  },
  destroyed() {
    if (this.client.connected) {
      try {
        this.client.end(false, () => {
          console.log('Successfully disconnected!')
        })
      } catch (error) {
        console.log('Disconnect failed', error.toString())
      }
    }
  },
  methods: {
    init() {
      const d = new Date()
      this.year = d.getFullYear()
      this.month = d.getMonth() + 1
      this.initYearList()
      this.monthScoreKeys = this.getmonthScoreKeys()
      this.getData()
      this.initMqtt()
    },
    initYearList() {
      const d = new Date()
      const yearList = []
      for (let i = -5; i < 1; i++) {
        yearList.push(d.getFullYear() + i)
      }
      this.yearList = yearList
    },
    initMqtt() {
      const self = this
      const options = {
        clean: true,
        connectTimeout: 4000,
        clientId: 'emqx_test',
        username: 'emqx_test',
        password: 'emqx_test'
      }
      const client = mqtt.connect(mqttUrl, options)
      client.on('connect', function() {
        console.log('Connected')
        client.subscribe('topic/#', function(err) {
          if (!err) {
            // client.publish('topic/1', 'Hello mqtt')
          }
        })
      })

      client.on('message', function(topic, message) {
        self.mqttResponse(message)
      })
      this.client = client
    },
    handleAssessDetail(row) {},
    viewIndexScoreDetail(data) {},
    // Get Data
    getData() {
      this.getyearOverview()
      this.getMonthOverview()
      this.getTodayOverview()
      this.getGridScoreByList()
      this.getDoctorScoreByList()
      this.getGroupScoreByList()
    },
    getTodayOverview() {
      todayOverview().then((resp) => {
        const { data } = resp
        if (data) {
          this.todayOverview = data
        } else {
          this.$set(this.todayOverview, { data: [], doctorRank: [], gridRank: [], groupName: '', groupRank: [], recordQty: 0, score: 0 })
        }
      })
    },
    getyearOverview() {
      yearOverview(this.year).then((resp) => {
        const { data } = resp
        if (data) {
          this.yearOverview = data
        } else {
          this.$set(this.yearOverview, { doctorQty: 0, gridQty: 0, groupName: '', groupQty: 0, monthScoreCounter: {}, recordQty: 0, score: 0 })
        }
      })
    },
    getMonthOverview() {
      monthOverview(this.year, this.month).then((resp) => {
        const { data } = resp
        if (data) {
          this.monthOverview = data.data
        } else {
          this.monthOverview = []
        }
      })
    },
    getGridScoreByList() {
      gridScoreByList(this.conditions).then((resp) => {
        const { code, msg, data } = resp
        if (code === 0) {
          this.gridDataList = data
        } else {
          this.$message.error(msg)
        }
      })
    },
    getGroupScoreByList() {
      groupScoreByList(this.conditions).then((resp) => {
        const { code, msg, data } = resp
        if (code === 0) {
          this.groupDataList = data
        } else {
          this.$message.error(msg)
        }
      })
    },
    getDoctorScoreByList() {
      doctorScoreByList(this.conditions).then((resp) => {
        const { code, msg, data } = resp
        if (code === 0) {
          this.doctorDataList = data
        } else {
          this.$message.error(msg)
        }
      })
    },
    getmonthScoreKeys(date = (new Date()), unit = '') {
      var days = []
      if (typeof (date) === 'string') { // 2022/09
        date = new Date(date)
      }
      const y = date.getFullYear()
      const m = date.getMonth()
      const lastDay = new Date(y, m + 1, 0).getDate()
      for (let i = 1; i <= lastDay; i++) {
        days.push(i)
      }
      return days
    },
    showYearScore(data) {
      if (Array.isArray(data)) return data
      var arr = []
      for (let i = 1; i <= 12; i++) {
        arr.push(data[`m${i}`] ? data[`m${i}`] : 0)
      }
      return arr
    },
    handleMoreAssess() {
      this.$router.push({
        path: '/hos/satisfy/assess/index'
      })
    },
    formatCheckListValues(data) {
      if (!data) return []
      const enums = {}
      const len = (this.getmonthScoreKeys(`${this.year}/${this.month}`)).length
      const months = []
      data.forEach(item => { enums[item.day] = item })
      for (let i = 1; i <= len; i++) {
        months[i - 1] = enums[i] ? enums[i].score : 0
      }
      return months
    },
    mqttResponse(message) {
      // console.log('message', message.toString())
      this.getData()
    },
    changeYear(params) {
      this.getyearOverview()
    },
    changeMonth() {
      this.monthScoreKeys = this.getmonthScoreKeys(`${this.year}/${this.month}`)
      this.getMonthOverview()
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 15px;
  color: #FFF;
  position: relative;
  .group-box-head-container{
    padding-right:15px;
    .group-box-head{
      background-color: #0C3242;
      padding:8px 5px;
      font-weight: bold;
      font-size: 18px;
    }
    &.year{
      .group-box-head{
        padding:5px 10px;
      }
    }
  }
  .monthOverview-container{
    width: calc(100% - 15px);
    min-height: calc(100vh - 300px);
    background-color: #0C3242;
    .group-box{
      width: auto;
      box-sizing: border-box;
    }
  }
  .page-title {
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
  }
  .top-panel{
    margin-bottom:0;
    .group-box{
      border-radius: 0;
      padding: 5px 15px;
      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;
    &.max{
      width: 100%;
    }
    &-bg {
      background-repeat: no-repeat;
      background-position: right top;
    }
    &.border{
      border:1px solid #163e5e;
    }
    .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%;
      .group-content-item{
        display: flex;
        justify-content: flex-start;
        align-items:center;
        &.block{
          display: block;
        }
        .checklist-title{
          font-size: 10px;
          color: #d7d1d1;
        }
        .checklist-content{
          align-items: center;
        }
        .chart-container{
          width: 65%;
          height: 100px;
          min-width:300px ;
          flex: 1;
        }
        .panorama-scoreIcon-container{

          height: 100%;
          padding: 0 10px;
        }
      }
    }
  }
.group-box-month{
  .group-box{
    border-top: 0;
    border-bottom: 0;
    &{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 6px 10px;
    }
    &:first-child{
      border-top:1px solid #163e5e;
    }
    &:last-child{
      border-top:1px solid #163e5e;
      border-bottom:1px solid #163e5e;
    }
    .group-content{
      flex: 1;
      .checklist-title{
        padding-left:15px;
      }
      .group-content-item{
        .chart-container{
          width: 75%;
          height: 108px;
        }
      }
    }
  }
}
  .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;
  }
}
.panorama-scoreIcon-container{
  &{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
  }
  .item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 10px;
    &.total{
      border-right: 5px solid #d96c1b;
      padding-right: 20px;
      box-sizing: border-box;
    }
    p{
      line-height: 1;
      margin: 0;
      padding: 0;
    }
    .score{
      font-size: 40px;
      line-height: 1;
      font-weight: 800;
      text-shadow: 2px 2px #bdaaa3;
      &.small{
        font-size: 24px;
      }
    }
    .name{
      font-size: 12px;
      border-top: 1px solid #888686;
      color: #d7d1d1;
      margin-top: 5px;
      padding: 5px 6px 0 6px;
    }
  }
}
</style>