tj

src/layout/components/Navbar.vue

@@ -25,7 +25,7 @@
           v-for="(tab,index) in sideMenus"
           :key="'sideMenuTab'+index"
           class="item"
-          :class="sideMenuTabIndex===tab.id?'active-'+sideMenuTabIndex:''"
+          :class="sideMenuTabId===tab.id?'active-'+sideMenuTabId:''"
           @click="sideTabChange(tab.id,tab)"
         >
           <i class="iconfont" :class="tab.icon" />
@@ -79,11 +79,11 @@ export default {
   data() {
     return {
       logo: require('@/assets/images/logo/logo_csat.png'),
-      sideMenuTabIndex: 0,
+      sideMenuTabId: 1,
       sideMenus: [],
       sideMenuTabList: [
+        { name: '数字全景', icon: 'icon-common_monitoring', path: '/hos/satisfy/panorama', permit: 'hos_satisfy_panorama', id: 1 },
         { name: '工作总览', icon: 'el-icon-s-platform', path: '/hos/satisfy/overview', permit: 'hos_satisfy_overview', id: 0 },
-        { name: '实时监测', icon: 'icon-common_monitoring', path: '/hos/satisfy/panorama', permit: 'hos_satisfy_panorama', id: 1 },
         { name: '建设计划', icon: 'icon-common_saving', path: '/hos/satisfy/instruction', permit: 'hos_satisfy_instruction', id: 2 },
         { name: '工作动态', icon: 'icon-common_task', path: '/hos/satisfy/task', permit: 'hos_satisfy_task', id: 3 },
         { name: '成果评价', icon: 'icon-common_evaluate', path: '/hos/satisfy/assess', permit: 'hos_satisfy_assess', id: 4 },
@@ -129,12 +129,13 @@ export default {
       this.sideMenus = sideMenuTabList
     },
     initsideTab() {
-      let index = 0
-      if (this.isNotNull(localStorage.getItem('tabIndex'))) {
-        index = parseFloat(localStorage.getItem('tabIndex'))
+      let id = this.sideMenuTabId
+      if (this.isNotNull(localStorage.getItem('csat_tabId'))) {
+        id = parseFloat(localStorage.getItem('csat_tabId'))
       }
-      this.sideTabChange(index, {
-        path: this.$route.fullPath
+      const path = this.sideMenuTabList.filter(item => item.id === id)[0].path
+      this.sideTabChange(id, {
+        path
       })
     },
     toggleSideBar() {
@@ -144,26 +145,25 @@ export default {
       this.$emit('initMessage')
     },
     async logout() {
-      localStorage.clear('permission_routes') // 垃圾数据清除
-      localStorage.clear('tabIndex')
+      localStorage.clear()
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
     },
-    sideTabChange(index, item) {
-      this.sideMenuTabIndex = index
+    sideTabChange(id, item) {
+      this.sideMenuTabId = id
       this.$router.replace({
         path: item.path
       })
-      localStorage.setItem('tabIndex', index)
-      var permission_routes = localStorage.getItem('permission_routes')
+      localStorage.setItem('csat_tabId', id)
+      var permission_routes = localStorage.getItem('csat_permission_routes')
       if (permission_routes) { permission_routes = JSON.parse(permission_routes) } else {
         permission_routes = this.permission_routes
-        localStorage.setItem('permission_routes', JSON.stringify(permission_routes))
+        localStorage.setItem('csat_permission_routes', JSON.stringify(permission_routes))
       }
       // 获取权限路由，根据groupId进行过滤
       const filterRoutes = permission_routes.filter((item) => {
         if (item.groupId) {
-          return item.groupId.includes(index)
+          return item.groupId.includes(id)
         }
         return item
       })

src/settings.js

@@ -40,9 +40,8 @@ module.exports = {
   // serverUrl: 'http://1.15.92.205:8080/', // 正式环境
   serverUrl: 'http://114.116.19.14:8080/', // 正式环境
   // devServerUrl: 'http://1.15.92.205:8080/', // 开发环境
-  devServerUrl: 'http://127.0.0.1:8001/', // 开发环境
-  // serverUrl: 'http://114.116.19.14:8080/', // 正式环境
-  // devServerUrl: 'http://114.116.19.14:8080/', // 开发环境
+  devServerUrl: 'http://192.168.3.253:8001/', // 开发环境
+  // devServerUrl: 'http://127.0.0.1:8001/', // 开发环境
   /**
   * websocket 地址
   * dev 开发环境

src/views/hos/panorama/components/DoctorScoreRank.vue

@@ -12,13 +12,13 @@
               @click="showNewsDetail(item)"
             >
               <div class="icon">
-                <i class="el-icon-s-comment" />
+                <img src="../images//rank/doctor.png" alt="">
               </div>
               <div class="info">
-                <span class="tag ">{{ item.score }}</span>
+                <span class="tag ">{{ item.score }}分</span>
                 <h4>{{ item.recordQty }}</h4>
                 <p>
-                  <span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.doctorName }}</span>
+                  <span style="padding-left:0;color:#c4c1c1;font-size: 14px;">{{ item.groupName }}</span>
                 </p>
               </div>
             </div>
@@ -38,10 +38,6 @@ export default {
     vuescroll
   },
   props: {
-    data: {
-      type: [Array],
-      default: () => []
-    },
     title: {
       type: [String],
       default: '最新动态'
@@ -50,6 +46,10 @@ export default {
       type: [String],
       default: undefined
     },
+    data: {
+      type: [Array],
+      default: () => []
+    },
     height: {
       type: [String],
       default: 'calc(100vh - 85px)'
@@ -96,7 +96,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .ArtPanel-group-box {
-  background-color: #0C3242;
+  background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
   border-radius: 5px 5px 0 0;
   .group-title {
     font-size: 16px;
@@ -124,19 +124,25 @@ export default {
       position: relative;
       cursor: pointer;
       .tag{
-        height: 24px;
+        width: 94px;
+        height: 44px;
         display: inline-block;
         position: absolute;
         right: 0;
         top: 0;
         padding: 0px 4px;
-        line-height: 24px;
-        font-size: 12px;
+        line-height: 44px;
         color: #fff;
-        border-radius: 4px;
+        border-radius: 42px;
         box-sizing: border-box;
         white-space: nowrap;
-        border: 1px solid #d9d0c8;
+        border: 1px solid rgba(29, 232, 245, 0.8);
+        background: rgba(29, 232, 245, 0.12);
+
+        font-family: Be Vietnam;
+        font-size: 20px;
+        font-weight: 600;
+        text-align: center;
         &.none{
           background-color: transparent;
           border-color: transparent;
@@ -144,11 +150,11 @@ export default {
       }
       p,h4{
         margin: 0;
-        font-size: 12px;
+        font-size: 16px;
       }
       p{
-        padding-top: 6px;
-        font-size: 8px;
+        padding-top: 10px;
+        font-size: 14px;
         color: #f5f5f5;
       }
       h4{
@@ -157,9 +163,23 @@ export default {
         }
       }
       .icon{
-        width: 24px;
-        height: 24px;
-        font-size: 22px !important;
+        width: 56px;
+        height: 56px;
+        font-size: 26px;
+        img{
+            display: block;
+            width: 56px;
+            height: 56px;
+            overflow: hidden;
+            border-radius: 50%;
+        }
+        .iconfont{
+          font-size: 22px !important;
+          color: #fff;
+        }
+      }
+      .info{
+        padding-left: 16px;
       }
     }
   }

src/views/hos/panorama/components/FullYearChart.vue

@@ -70,8 +70,8 @@ export default {
         },
         grid: {
           top: '20px',
-          left: '20px',
-          right: '10px',
+          left: '25px',
+          right: '-20px',
           bottom: '20px'
         },
         series: [

src/views/hos/panorama/components/GridScoreRank.vue

@@ -94,7 +94,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .ArtPanel-group-box {
-  background-color: #0C3242;
+  background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
   border-radius: 5px 5px 0 0;
   .group-title {
     font-size: 16px;

src/views/hos/panorama/components/GroupScoreRank.vue

@@ -12,13 +12,13 @@
               @click="showNewsDetail(item)"
             >
               <div class="icon">
-                <i class="iconfont icon-common_organization" />
+                <img src="../images//rank/group.png" alt="">
               </div>
               <div class="info">
-                <span class="tag ">{{ item.score }}</span>
+                <span class="tag ">{{ item.score }}分</span>
                 <h4>{{ item.recordQty }}</h4>
                 <p>
-                  <span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.groupName }}</span>
+                  <span style="padding-left:0;color:#c4c1c1;font-size: 14px;">{{ item.groupName }}</span>
                 </p>
               </div>
             </div>
@@ -96,7 +96,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .ArtPanel-group-box {
-  background-color: #0C3242;
+  background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
   border-radius: 5px 5px 0 0;
   .group-title {
     font-size: 16px;
@@ -124,19 +124,24 @@ export default {
       position: relative;
       cursor: pointer;
       .tag{
-        height: 24px;
+        width: 94px;
+        height: 44px;
         display: inline-block;
         position: absolute;
         right: 0;
         top: 0;
         padding: 0px 4px;
-        line-height: 24px;
-        font-size: 12px;
+        line-height: 44px;
         color: #fff;
-        border-radius: 4px;
+        border-radius: 42px;
         box-sizing: border-box;
         white-space: nowrap;
-        border: 1px solid #d9d0c8;
+        border: 1px solid rgba(24, 144, 255, 0.8);
+        background: linear-gradient(0deg, rgba(24, 144, 255, 0.12), rgba(24, 144, 255, 0.12));
+        font-family: Be Vietnam;
+        font-size: 20px;
+        font-weight: 600;
+        text-align: center;
         &.none{
           background-color: transparent;
           border-color: transparent;
@@ -147,24 +152,34 @@ export default {
         font-size: 12px;
       }
       p{
-        padding-top: 6px;
+        padding-top: 10px;
         font-size: 8px;
         color: #f5f5f5;
       }
       h4{
+        font-size: 16px;
         .status{
           font-size: 12px;
         }
       }
       .icon{
-        width: 45px;
-        height: 45px;
+        width: 56px;
+        height: 56px;
         font-size: 26px;
+        img{
+            display: block;
+            width: 56px;
+            height: 56px;
+            overflow: hidden;
+        }
         .iconfont{
           font-size: 22px !important;
           color: #fff;
         }
       }
+      .info{
+        padding-left: 16px;
+      }
     }
   }
 }

src/views/hos/panorama/components/RecentRecord.vue

@@ -1,9 +1,6 @@
 
 <template>
   <div class="ArtPanel-group-box" :style="{height:height}">
-    <div class="group-title">
-      <span>{{ title }}</span>
-    </div>
     <vuescroll :ops="ops" style="height: calc(100% - 40px)">
       <div class="vueSeamless-container" style="height: calc(100% - 100px);overflow:hidden">
         <vueSeamlessScroll ref="seamlessScroll" :data="data" :class-option="defaultOption">
@@ -18,7 +15,7 @@
                 <i class="el-icon-user" />
               </div>
               <div class="info">
-                <span class="tag ">{{ item.score }}</span>
+                <span class="tag ">{{ item.score }}分</span>
                 <h4>{{ item.checklistTitle }}</h4>
                 <p>
                   <span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.recordTime }}</span>
@@ -64,7 +61,7 @@ export default {
       ops: {
         bar: {
           keepShow: false,
-          background: 'rgba(144, 147, 153, 0.4)',
+          background: 'linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51)',
           onlyShowBarOnScroll: false
         }
       },
@@ -91,6 +88,7 @@ export default {
     .ArtPanel-group-box {
       // width: calc(100% - 15px);
       background-color: #0C3242;
+      background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
       border-radius: 5px 5px 0 0;
       padding:5px 15px;
       .group-title {
@@ -131,13 +129,15 @@ export default {
               right: 0;
               top: 0;
               padding: 0px 4px;
-              line-height: 24px;
-              font-size: 12px;
+              line-height: 20px;
+              font-size: 20px;
               color: #fff;
+              font-weight: 600;
               border-radius: 4px;
               box-sizing: border-box;
               white-space: nowrap;
-              border: 1px solid #d9d0c8;
+              font-family: Be Vietnam;
+              // border: 1px solid #d9d0c8;
               &.none{
                   background-color: transparent;
                   border-color: transparent;

src/views/hos/panorama/components/monthChart.vue

@@ -59,7 +59,7 @@ export default {
             color: '#FFF',
             fontSize: '8px'
           },
-          data: []
+          data: ['1', '3', '6', '9', '12', '15', '18', '21', '24', '27', '30']
         },
         yAxis: {
           type: 'value',

src/views/hos/panorama/index - 副本.vue

@@ -0,0 +1,667 @@
+<template>
+  <div class="page-container">
+    <el-row class="top-panel">
+      <el-col :span="16">
+        <div>
+          <div class="group-box-head-container">
+            <div class="group-box-head">年满意度评价</div>
+            <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>
+          </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>
+        </div>
+        <el-row style="margin-top:24px">
+          <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="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-row>
+        <el-row style="margin-top:24px">
+          <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 :data="groupDataList" />
+                </vuescroll>
+              </el-row>
+            </div>
+          </el-col>
+          <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">
+                  <DoctorScoreRank :data="doctorDataList" />
+                </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 { 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 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.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 { code, msg, data } = resp
+        if (code === 200) {
+          this.gridDataList = data
+        } else {
+          this.$message.error(msg)
+        }
+      })
+    },
+    getGroupByList() {
+      groupByList(this.conditions).then((resp) => {
+        const { code, msg, data } = resp
+        if (code === 200) {
+          this.groupDataList = data
+        } else {
+          this.$message.error(msg)
+        }
+      })
+    },
+    getDoctorByList() {
+      doctorByList(this.conditions).then((resp) => {
+        const { code, msg, data } = resp
+        if (code === 200) {
+          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{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #0C3242;
+    box-sizing: border-box;
+    .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);
+    height: 200px;
+    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: 200px;
+          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>

src/views/hos/panorama/index.vue

@@ -1,65 +1,107 @@
 <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>
+    <el-row type="flex" justify="space-between" :gutter="24">
+      <el-col :span="17">
+        <div class="evaluate">
+          <div class="title">
+            <div class="name">年满意度评价</div>
+            <div class="select">
+              <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>
+          </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>
-          <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 class="evaluate month">
+          <div class="title">
+            <div class="name">月满意度评价</div>
+            <div class="select">
+              <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>
+          </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>
-          </el-col>
-        </el-row>
-        <el-row style="margin-top:10px">
-          <el-col :span="18" class="group-box-month">
+            <div class="chart-container">
+              <FullYearChart :values="showYearScore(yearOverview.monthScoreCounter)" />
+            </div>
+          </div>
+        </div>
+        <el-row v-if="false" style="margin-top:24px">
+          <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">
@@ -67,6 +109,20 @@
                   <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>
@@ -74,124 +130,84 @@
                       <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>
+        </el-row>
+        <el-row style="margin-top:24px" type="flex" justify="space-between" :gutter="12">
+          <el-col :span="12">
+            <div class="rank-list">
+              <div class="item-title">
+                <div class="name">科室-英雄榜</div>
+                <div class="more" @click="handleMoreAssess">更多</div>
               </div>
               <el-row>
-                <vuescroll :ops="ops" style="height: 188px">
+                <vuescroll :ops="ops" style="height: calc(100vh - 670px)">
                   <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>
+          </el-col>
+          <el-col :span="12">
+            <div class="rank-list">
+              <div class="item-title">
+                <div class="name">医生-英雄榜</div>
+                <div class="more" @click="handleMoreAssess">更多</div>
               </div>
               <el-row>
-                <vuescroll :ops="ops" style="height: 188px">
-                  <GridScoreRank ref="GridScoreRank" :data="gridDataList" />
+                <vuescroll :ops="ops" style="height: calc(100vh - 670px)">
+                  <DoctorScoreRank :data="groupDataList" />doctorDataList
                 </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">
+      <el-col :span="7">
+        <div class="todayNews">
+          <div class="head">
+            <div class="item-title">
+              <div class="name">今日动态</div>
+              <div class="more" @click="linkTo('/hos/satisfy/news/index')">更多</div>
+            </div>
+            <div class="statistics">
               <div class="item">
-                <p class="score">{{ parseFloat(todayOverview.score)!==0?parseFloat(todayOverview.score).toFixed(1):0 }}</p>
-                <p class="name">总评分</p>
+                <img class="icon" src="./images/notice.png" alt="总次数">
+                <div class="cont">
+                  <div class="top">
+                    <span class="number">12</span>
+                    <span class="unit">次</span>
+                  </div>
+                  <div class="name">总次数</div>
+                </div>
+              </div>
+              <div class="item">
+                <img class="icon" src="./images/doctor.png" alt="医生">
+                <div class="cont">
+                  <div class="top">
+                    <span class="number">12</span>
+                    <span class="unit">人</span>
+                  </div>
+                  <div class="name">医生</div>
+                </div>
               </div>
-
               <div class="item">
-                <p class="score">{{ parseFloat(todayOverview.recordQty)!==0?parseFloat(todayOverview.recordQty).toFixed(1):0 }}</p>
-                <p class="name">评价次数</p>
+                <img class="icon" src="./images/office.png" alt="科室">
+                <div class="cont">
+                  <div class="top">
+                    <span class="number">12</span>
+                    <span class="unit">个</span>
+                  </div>
+                  <div class="name">科室</div>
+                </div>
               </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>
+        <RecentRecord more="/hos/satisfy/news/index" height="calc(100vh - 260px)" :data="todayOverview.data" />
       </el-col>
     </el-row>
   </div>
@@ -204,7 +220,7 @@ 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 GridScoreRank from '@/views/hos/panorama/components/GridScoreRank'
 import GroupScoreRank from '@/views/hos/panorama/components/GroupScoreRank'
 import vuescroll from 'vuescroll'
 import mqtt from 'mqtt'
@@ -216,7 +232,7 @@ export default {
     FullYearChart,
     RecentRecord,
     DoctorScoreRank,
-    GridScoreRank,
+    // GridScoreRank,
     GroupScoreRank,
     vuescroll
   },
@@ -282,7 +298,7 @@ export default {
       this.initYearList()
       this.monthScoreKeys = this.getmonthScoreKeys()
       this.getData()
-      this.initMqtt()
+      // this.initMqtt()
     },
     initYearList() {
       const d = new Date()
@@ -434,6 +450,11 @@ export default {
     changeMonth() {
       this.monthScoreKeys = this.getmonthScoreKeys(`${this.year}/${this.month}`)
       this.getMonthOverview()
+    },
+    linkTo(url) {
+      if (url) {
+        this.$router.push(url)
+      }
     }
   }
 }
@@ -441,225 +462,156 @@ export default {
 
 <style lang="scss" scoped>
 .page-container {
-  padding: 15px;
+  padding: 24px 30px;
   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%;
+  .evaluate{
+    height: 228px;
+    padding: 20px;
+    background-color: #1F3C51;
+    border: 5px 0px 0px 0px;
+    border-top: 5px solid rgba(31, 60, 81, 1);
+    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
+    &.month{
+      margin-top: 24px;
     }
-    &-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;
+    .title{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      position: relative;
+      margin-top: -8px;
+      .name{
+        font-family: Microsoft YaHei UI;
+        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;
       }
-      .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;
+      .select{
+        position: absolute;
+        right: 0;
+        top: -10px;
       }
     }
-
-    .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;
+    .statistics{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .number{
+        width: 320px;
+        .total{
+           height: 68px;
+            font-family: Be Vietnam;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 14px;
+            color: #fff;
+            padding-left: 20px;
+          .score{
+            font-size: 48px;
+            font-weight: 700;
+            line-height: 48px;
+            padding: 0 8px 0 20px;
+          }
+          .unit{
+            color: rgba(134, 144, 156, 1);
+          }
         }
-        .checklist-content{
+        .other{
+          display: flex;
+          justify-content: center;
           align-items: center;
-        }
-        .chart-container{
-          width: 65%;
-          height: 100px;
-          min-width:300px ;
-          flex: 1;
-        }
-        .panorama-scoreIcon-container{
-
-          height: 100%;
-          padding: 0 10px;
+          .item{
+            width: 33.33%;
+            text-align: center;
+            .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;
+            }
+          }
         }
       }
-    }
-  }
-.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;
-        }
+      .chart-container{
+        flex: 1;
+        height: 160px;
+        padding-left: 20px;
       }
     }
   }
-}
-  .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%);
+  .todayNews{
+    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
+    .head{
+      padding: 20px;
+      .statistics{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-top: 42px;
+        .item{
+          width: 33.33%;
+          display: flex;
+          align-items: center;
+        .icon{
+          display: block;
+          width: 56px;
+          margin-right: 16px;
         }
-
-        &:after{
-          position: absolute;
-          right: -353px;
-          top: 50%;
-          content: "";
-          width: 343px;
-          height: 2px;
-          background: linear-gradient(90deg, #233E4F 0%, #193142 100%);
+        .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;
         }
       }
-
+      }
     }
   }
-
-  .chart-score-group {
-    margin-bottom: 15px;
+  .rank-list{
+    padding: 20px;
+    background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
   }
-}
-.panorama-scoreIcon-container{
-  &{
+  .item-title{
     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;
+    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;
     }
   }
 }