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

<template>
  <div class="page-container">
    <el-row type="flex" justify="space-between" :gutter="10">
      <el-col :span="19">
        <div class="evaluate">
          <div class="title">
            <div class="name">年满意度评价</div>
            <div class="select">
              <el-select v-model="year" class="year-sel border" placeholder="请选择年份" @change="changeYear">
                <el-option
                  v-for="item in yearList"
                  :key="item"
                  :label="item+'年'"
                  :value="item"
                />
              </el-select>
            </div>
          </div>
          <div class="statistics">
            <div class="number">
              <div class="total">
                <span>评分</span>
                <span class="score">{{ yearOverview.score }}</span>
                <span class="unit">分</span>
              </div>
              <div class="other">
                <div class="item">
                  <div class="score small">{{ yearOverview.recordQty }}<span class="unit">次</span></div>
                  <div class="name">评价次数</div>
                </div>
                <div class="item">
                  <div class="score small">{{ yearOverview.groupQty }}<span class="unit">个</span></div>
                  <div class="name">科室</div>
                </div>
                <div class="item">
                  <div class="score small">{{ yearOverview.doctorQty }}<span class="unit">人</span></div>
                  <div class="name">医务人员</div>
                </div>
              </div>
            </div>
            <div class="chart-container">
              <FullYearChart :values="showYearScore(yearOverview.monthScoreCounter)" />
            </div>
          </div>
        </div>

        <div class="evaluate month">
          <div class="title">
            <div class="name">月满意度评价</div>
            <div class="select">
              <el-select v-model="year" placeholder="请选择年份" class="year-sel" @change="changeYear">
                <el-option
                  v-for="item in yearList"
                  :key="item"
                  :label="item+'年'"
                  :value="item"
                />
              </el-select>
              <el-select v-model="month" placeholder="请选择月份" class="month-sel" @change="changeMonth">
                <el-option
                  v-for="item in 12"
                  :key="item"
                  :label="item+'月'"
                  :value="item"
                />
              </el-select>
            </div>
          </div>
          <div class="statistics">
            <div class="number">
              <div class="total">
                <span>评分</span>
                <span class="score">{{ yearOverview.score }}</span>
                <span class="unit">分</span>
              </div>
              <div class="other">
                <div class="item">
                  <div class="score small">{{ yearOverview.recordQty }}<span class="unit">次</span></div>
                  <div class="name">评价次数</div>
                </div>
                <div class="item">
                  <div class="score small">{{ yearOverview.groupQty }}<span class="unit">个</span></div>
                  <div class="name">科室</div>
                </div>
                <div class="item">
                  <div class="score small">{{ yearOverview.doctorQty }}<span class="unit">人</span></div>
                  <div class="name">医务人员</div>
                </div>
              </div>
            </div>
            <div class="chart-container">
              <FullYearChart :values="showYearScore(yearOverview.monthScoreCounter)" />
            </div>
          </div>
        </div>

        <el-row v-if="false" style="margin-top:10px">
          <el-col 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="panorama-scoreIcon-container">
                  <div class="item">
                    <div class="score small">{{ checklist.score }}</div>
                    <div class="name">评分</div>
                  </div>
                  <div class="item">
                    <div class="score small">{{ checklist.targetQty }}</div>
                    <div class="name">总人次</div>
                  </div>
                  <div class="item">
                    <div class="score small">{{ checklist.recordQty }}</div>
                    <div class="name">评价数</div>
                  </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>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row style="margin-top:10px" type="flex" justify="space-between" :gutter="10">
          <el-col :span="12">
            <div class="rank-list">
              <div class="item-title">
                <div class="name">科室-英雄榜</div>
                <div class="more" @click="handleMoreAssess('/hos/satisfy/statis/grid')">更多</div>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height: calc(100vh - 646px)">
                  <GroupScoreRank :data="groupDataList" />
                </vuescroll>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="rank-list">
              <div class="item-title">
                <div class="name">医生-英雄榜</div>
                <div class="more" @click="handleMoreAssess('/hos/satisfy/statis/doctor')">更多</div>
              </div>
              <el-row>
                <vuescroll :ops="ops" style="height: calc(100vh - 646px)">
                  <DoctorScoreRank :data="doctorDataList" />
                </vuescroll>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="5">
        <div class="todayNews">
          <div class="head">
            <div class="item-title">
              <div class="name">今日动态</div>
              <div class="more" @click="handleMoreAssess('/hos/satisfy/data')">更多</div>
            </div>
            <div class="statistics">
              <div class="item">
                <img class="icon" src="./images/notice.png" alt="总次数">
                <div class="cont">
                  <div class="top">
                    <span class="number">{{ todayOverview.recordQty }}</span>
                    <span class="unit">次</span>
                  </div>
                  <div class="name">总次数</div>
                </div>
              </div>
              <div class="item">
                <img class="icon" src="./images/satisfy.png" alt="评分">
                <div class="cont">
                  <div class="top">
                    <span class="number">{{ todayOverview.score }}</span>
                    <span class="unit">分</span>
                  </div>
                  <div class="name">评分</div>
                </div>
              </div>
              <div class="item clearfix">
                <img class="icon" src="./images/doctor.png" alt="医生">
                <div class="cont">
                  <div class="top">
                    <span class="number">{{ todayOverview.doctorQty }}</span>
                    <span class="unit">人</span>
                  </div>
                  <div class="name">医生</div>
                </div>
              </div>
              <div class="item">
                <img class="icon" src="./images/office.png" alt="科室">
                <div class="cont">
                  <div class="top">
                    <span class="number">{{ todayOverview.gridQty }}</span>
                    <span class="unit">个</span>
                  </div>
                  <div class="name">科室</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <RecentRecord more="/hos/satisfy/news/index" height="calc(100vh - 330px)" :data="todayOverview.data" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { gridByList, groupByList, doctorByList } 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 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,
    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: [],
        day: undefined,
        targetQty: 0,
        recordQty: 0,
        score: 0,
        doctorQty: 0,
        doctorRank: [],
        doctorRecordQty: 0,
        doctorScore: 0,
        gridQty: 0,
        gridRecordQty: 0,
        gridScore: 0,
        gridRank: [],
        groupRank: []
      },
      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.getGridByList()
      this.getDoctorByList()
      this.getGroupByList()
    },

    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 = []
        }
      })
    },
    getGridByList() {
      gridByList(this.conditions).then((resp) => {
        const { data } = resp
        this.gridDataList = data
      })
    },

    getGroupByList() {
      groupByList(this.conditions).then((resp) => {
        const { data } = resp
        this.groupDataList = data
      })
    },

    getDoctorByList() {
      doctorByList(this.conditions).then((resp) => {
        const { data } = resp
        this.doctorDataList = data
      })
    },

    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(url) {
      this.$router.push({
        path: url
      })
    },

    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()
    },

    linkTo(url) {
      if (url) {
        this.$router.push(url)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  padding: 10px;
  color: #FFF;
  position: relative;
  .evaluate{
    height: 242px;
    padding: 20px;
    background-color: #1F3C51;
    border: 5px;
    border-top: 5px solid rgba(31, 60, 81, 1);
    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
    &.month{
      margin-top: 10px;
    }
    .title{
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      position: relative;
      margin-top: -8px;
      .name{
        font-size: 16px;
        font-weight: 700;
        line-height: 16px;
        color: #fff;
        background-image:linear-gradient(180deg, #FFFFFF 0%, #98A8B7 100%);
        background-clip:text;
        -webkit-text-fill-color:transparent;
      }
      .select{
        // position: absolute;
        // right: 0;
        // top: -10px;
        &::v-deep{
          .el-select {
            width: 75px;
            height: 26px;
            line-height: 1;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.12);
            display: inline-block;
            font-size: 14px;
            border: 0;
            &.year-sel{
              border-radius: 20px 0 0 20px;
            }
            &.month-sel{
              width: 50px;
              border-radius: 0 20px 20px 0;
            }
            &.border{
              border-radius: 20px;
            }
            .el-input--medium .el-input__inner,.el-input{
              height: 100%;
              line-height: inherit;
              border: 0;
              border-radius:inherit;
              padding: 0;
              .el-input__icon{
                line-height: 1;
              }
            }
            .el-input__suffix{
              right: 1px;
            }
          }
          input{
            border-radius:inherit;
            background: rgba(255, 255, 255, 0.12);
            box-sizing: border-box;
            text-indent: 5px;
          }
        }
      }
    }
    .statistics{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .number{
        width: 342px;
        .total{
            height: 68px;
            font-size: 14px;
            font-weight: 400;
            line-height: 14px;
            color: #fff;
            padding-left: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
          .score{
            font-size: 48px;
            font-weight: 700;
            line-height: 48px;
            padding: 0 8px 0 20px;
          }
          .unit{
            color: rgba(134, 144, 156, 1);
          }
        }
        .other{
          display: flex;
          align-items: center;
          padding-left: 24px;
          margin-top: 24px;
          .item{
            width: 33.33%;
            .score{
              color: #fff;
              font-size: 24px;
              font-weight: 700;
              .unit{
                font-size: 12px;
                font-weight: 400;
                color: #86909C;
                padding-left: 2px;
              }
            }
            .name{
              font-size: 14px;
              line-height: 1;
              padding-top: 8px;
            }
          }
        }
      }
      .chart-container{
        flex: 1;
        height: 178px;
        padding-left: 20px;
      }
    }
  }
  .todayNews{
    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
    .head{
      padding: 20px;
      .statistics{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 42px;
        .item{
          width: 50%;
          display: flex;
          align-items: center;
          &:nth-child(n+3){
            padding-top: 32px;
          }
        .icon{
          display: block;
          width: 56px;
          margin-right: 16px;
        }
        .top{
          .number{
              font-size: 24px;
              line-height: 24px;
              font-weight: 700;
          }
          .unit{
                font-size: 12px;
                font-weight: 400;
                color: #86909C;
                padding-left: 2px;
              }
        }
        .name{
            font-size: 14px;
            line-height: 14px;
            padding-top: 8px;
        }
      }
      }
    }
  }
  .rank-list{
    padding: 20px;
    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
  }
  .item-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
    .more{
      font-size: 14px;
      line-height: 14px;
      color: #C1C6C8;
      position: relative;
      padding-right: 10px;
      background: url(./images/more.png) no-repeat center right;
      background-size: 5px 8px;
      cursor: pointer;
    }
  }
}
</style>