submit

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <el-scrollbar wrap-class="scrollbar-wrapper">
+      routes:{{ openeds }}
       <el-menu
         :default-active="activeMenu"
         :collapse="isCollapse"
@@ -9,6 +10,7 @@
         :unique-opened="false"
         :active-text-color="variables.menuActiveText"
         :collapse-transition="false"
+        :default-openeds="openeds"
         mode="vertical"
       >
         <sidebar-item
@@ -23,10 +25,10 @@
 </template>
 
 <script>
+import { openeds } from '@/settings'
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-
 export default {
   name: 'SidebarIndex',
   components: { SidebarItem },
@@ -46,6 +48,10 @@ export default {
       }
       return path
     },
+    openeds() {
+      return openeds ? this.permission_routes.filter(item => !item.hidden)
+        .map(item => item.path) : []
+    },
     showLogo() {
       return this.$store.state.settings.sidebarLogo
     },

src/router/modules/csat.js

@@ -28,7 +28,7 @@ const csatRouter = [
         path: '/hos/satisfy/monitor/overview',
         component: () => import('@/views/hos/panorama'),
         name: 'hos_satisfy_panorama',
-        meta: { title: '实时监测', noCache: true, icon: 'icon-common_safety', permit: 'hos_satisfy_panorama' }
+        meta: { title: '数字全景', noCache: true, icon: 'icon-common_safety', permit: 'hos_satisfy_panorama' }
       }
     ]
   },

src/settings.js

@@ -24,7 +24,7 @@ module.exports = {
    * @description Whether show the logo in sidebar
    */
   sidebarLogo: true,
-
+  openeds: true,
   /**
    * @type {string | array} 'production' | ['production', 'development']
    * @description Need show err logs component.
@@ -39,9 +39,9 @@ module.exports = {
   // serverUrl: 'http://192.168.1.214:8080/', // 正式环境
   // serverUrl: 'http://1.15.92.205:8080/', // 正式环境
   serverUrl: 'http://114.116.19.14:8080/', // 正式环境
-  // devServerUrl: 'http://1.15.92.205:8080/', // 开发环境
+  devServerUrl: 'http://1.15.92.205:8001/', // 开发环境
   // devServerUrl: 'http://192.168.3.253:8001/', // 开发环境
-  devServerUrl: 'http://127.0.0.1:8001/', // 开发环境
+  // devServerUrl: 'http://127.0.0.1:8001/', // 开发环境
   /**
   * websocket 地址
   * dev 开发环境

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

@@ -1,8 +1,8 @@
 
 <template>
-  <div class="ArtPanel-group-box" :style="{height:height}">
+  <div class="todaynews-wrap" :style="{height:height}">
     <vuescroll :ops="ops" style="height: calc(100% - 40px)">
-      <div class="vueSeamless-container" style="height: calc(100% - 100px);overflow:hidden">
+      <div class="vueSeamless-container" style="height: calc(100% - 150px);overflow:hidden">
         <vueSeamlessScroll ref="seamlessScroll" :data="data" :class-option="defaultOption">
           <div class="task-management">
             <div
@@ -11,17 +11,20 @@
               class="item"
               :class="data.length<5?'less':''"
             >
-              <div class="icon">
-                <i class="el-icon-user" />
-              </div>
-              <div class="info">
-                <span class="tag ">{{ item.score }}分</span>
-                <h4>{{ item.checklistTitle }}</h4>
-                <p>
-                  <span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.recordTime }}</span>
-                </p>
-                <div v-if="item.personName"><span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.personName }}</span></div>
+              <div class="top">
+                <div class="icon">
+                  <img class="icon-image" src="../images/rank/group.png" alt="">
+                </div>
+                <div class="info">
+                  <div class="positon">
+                    <div class="title">{{ item.checklistTitle }}</div>
+                    <div class="cont">{{ item.recordTime }} </div>
+                  </div>
+                  <div class="score ">{{ item.score }}分</div>
+                  <!-- <div v-if="item.personName"><span style="padding-left:0;color:#c4c1c1;font-size: 10px;">{{ item.personName }}</span></div> -->
+                </div>
               </div>
+              <div class="desc">某某评价内容某某评价内容某某评价内容</div>
             </div>
           </div>
         </vueSeamlessScroll>
@@ -85,7 +88,7 @@ export default {
 }
 </script>
   <style lang="scss" scoped>
-    .ArtPanel-group-box {
+    .todaynews-wrap {
       // width: calc(100% - 15px);
       background-color: #0C3242;
       background: linear-gradient(0deg, #1B3144, #1B3144),linear-gradient(0deg, #1F3C51, #1F3C51);
@@ -112,57 +115,77 @@ export default {
         overflow: auto;
       }
       .task-management{
-      .item{
-          display: flex;
-          justify-content: flex-start;
-          line-height: 1;
-          margin-bottom: 15px;
-          position: relative;
-          cursor: pointer;
-          &.less{
-            height: 80px;
-          }
-          .tag{
-              height: 24px;
-              display: inline-block;
-              position: absolute;
-              right: 0;
-              top: 0;
-              padding: 0px 4px;
-              line-height: 20px;
-              font-size: 20px;
-              color: #fff;
-              font-weight: 600;
-              border-radius: 4px;
-              box-sizing: border-box;
-              white-space: nowrap;
-              font-family: Be Vietnam;
-              // border: 1px solid #d9d0c8;
-              &.none{
-                  background-color: transparent;
-                  border-color: transparent;
-              }
-          }
-          p,h4{
-              margin: 0;
-              font-size: 12px;
-          }
-          p{
-              padding-top: 6px;
-              font-size: 8px;
-              color: #f5f5f5;
-          }
-          h4{
-              .status{
-                  font-size: 12px;
+        .item{
+            display: block;
+            line-height: 1;
+            margin-bottom: 15px;
+            position: relative;
+            cursor: pointer;
+            &.less{
+              min-height: 80px;
+            }
+            .top{
+                display: flex;
+                align-items: center;
+                padding-bottom: 16px;
+                .icon{
+                  width: 56px;
+                  height: 56px;
+                  font-size: 20px;
+                  overflow: hidden;
+                  .icon-image{
+                    display: block;
+                    width: 100%;
+                    height: 100;
+                    border-radius: 50%;
+                  }
+                }
+              .info{
+                  flex: 1;
+                  padding-left: 12px;
+                  position: relative;
+                  display: flex;
+                  align-items: center;
+                  .positon{
+                    flex: 1;
+                    .title{
+                      font-size: 16px;
+                    }
+                    .cont{
+                      color: #C1C6C8;
+                      font-size: 14px;
+                      padding-top: 12px;
+                    }
+                  }
+                  .score{
+                      height: 24px;
+                      display: inline-block;
+                      padding: 0px 4px;
+                      line-height: 20px;
+                      font-size: 20px;
+                      color: #fff;
+                      font-weight: 600;
+                      border-radius: 4px;
+                      box-sizing: border-box;
+                      white-space: nowrap;
+                      font-family: Be Vietnam;
+                      border: 0;
+                      &.none{
+                          background-color: transparent;
+                          border-color: transparent;
+                      }
+                  }
               }
-          }
-          .icon{
-              width: 25px;
-              height: 25px;
-              font-size: 20px;
-          }
-      }
+            }
+            .desc{
+              font-size: 16px;
+              line-height: 16px;
+              display: -webkit-box;
+              -webkit-box-orient:vertical;
+              -webkit-line-clamp:1;
+              overflow:hidden;
+            }
+        }
       }
     }
   </style>

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

@@ -1,667 +0,0 @@
-<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

@@ -6,7 +6,7 @@
           <div class="title">
             <div class="name">年满意度评价</div>
             <div class="select">
-              <el-select v-model="year" placeholder="请选择年份" class="el-select-text" @change="changeYear">
+              <el-select v-model="year" class="year-sel border" placeholder="请选择年份" @change="changeYear">
                 <el-option
                   v-for="item in yearList"
                   :key="item"
@@ -14,14 +14,6 @@
                   :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">
@@ -55,7 +47,7 @@
           <div class="title">
             <div class="name">月满意度评价</div>
             <div class="select">
-              <el-select v-model="year" placeholder="请选择年份" class="el-select-text" @change="changeYear">
+              <el-select v-model="year" placeholder="请选择年份" class="year-sel" @change="changeYear">
                 <el-option
                   v-for="item in yearList"
                   :key="item"
@@ -63,7 +55,7 @@
                   :value="item"
                 />
               </el-select>
-              <el-select v-model="month" placeholder="请选择月份" class="el-select-text" @change="changeMonth">
+              <el-select v-model="month" placeholder="请选择月份" class="month-sel" @change="changeMonth">
                 <el-option
                   v-for="item in 12"
                   :key="item"
@@ -145,7 +137,7 @@
                 <div class="more" @click="handleMoreAssess">更多</div>
               </div>
               <el-row>
-                <vuescroll :ops="ops" style="height: calc(100vh - 670px)">
+                <vuescroll :ops="ops" style="height: calc(100vh - 666px)">
                   <GroupScoreRank :data="groupDataList" />
                 </vuescroll>
               </el-row>
@@ -158,7 +150,7 @@
                 <div class="more" @click="handleMoreAssess">更多</div>
               </div>
               <el-row>
-                <vuescroll :ops="ops" style="height: calc(100vh - 670px)">
+                <vuescroll :ops="ops" style="height: calc(100vh - 666px)">
                   <DoctorScoreRank :data="groupDataList" />doctorDataList
                 </vuescroll>
               </el-row>
@@ -220,7 +212,6 @@ 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'
@@ -232,7 +223,6 @@ export default {
     FullYearChart,
     RecentRecord,
     DoctorScoreRank,
-    // GridScoreRank,
     GroupScoreRank,
     vuescroll
   },
@@ -495,6 +485,47 @@ export default {
         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{
@@ -502,15 +533,16 @@ export default {
       justify-content: space-between;
       align-items: center;
       .number{
-        width: 320px;
+        width: 342px;
         .total{
-           height: 68px;
+            height: 68px;
             font-family: Be Vietnam;
             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;
@@ -523,11 +555,11 @@ export default {
         }
         .other{
           display: flex;
-          justify-content: center;
           align-items: center;
+          padding-left: 24px;
+          margin-top: 24px;
           .item{
             width: 33.33%;
-            text-align: center;
             .score{
               color: #fff;
               font-size: 24px;