运维大屏

.eslintrc.js

@@ -13,5 +13,6 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+  },
+  ignorePatterns: ['src/assets/**'] // 忽略 assets 下所有文件
 }

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "start": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
     "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint --no-fix",
     "development": "node ./upload/development.js",
     "development120": "node ./upload/development120.js",
     "production": "node ./upload/production.js"

src/assets/font/iconfont.css

@@ -1,8 +1,8 @@
-@font-face {font-family: "icon_transport";
-  src: url('iconfont.eot?t=1592895040969'); /* IE9 */
-  src: url('iconfont.woff?t=1592895040969') format('woff'),
-  url('iconfont.ttf?t=1592895040969') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1592895040969#icon_transport') format('svg'); /* iOS 4.1- */
+@font-face {
+  font-family: "icon_transport"; /* Project id 4543613 */
+  src: url('iconfont.woff2?t=1750225745603') format('woff2'),
+       url('iconfont.woff?t=1750225745603') format('woff'),
+       url('iconfont.ttf?t=1750225745603') format('truetype');
 }
 
 .icon_transport {
@@ -13,236 +13,320 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.transport-laba1:before {
-  content: "\e681";
+.transport-tianjiahover:before {
+  content: "\e675";
 }
 
-.transport-erweima:before {
-  content: "\e606";
+.transport-renwuguanli:before {
+  content: "\e688";
 }
 
-.transport-chaoshi:before {
-  content: "\e63b";
+.transport-wendangguanli:before {
+  content: "\ea41";
 }
 
-.transport-guanbi1:before {
-  content: "\e658";
+.transport-xiaoxi:before {
+  content: "\e617";
 }
 
-.transport-lingdang:before {
-  content: "\e60d";
+.transport-bg-add:before {
+  content: "\e671";
 }
 
-.transport-peijianlunyitubiao:before {
-  content: "\e655";
+.transport-dabao:before {
+  content: "\e674";
 }
 
-.transport-ccgl-kuneizhuanyi-1:before {
-  content: "\e6e5";
+.transport-peihuguanli:before {
+  content: "\e670";
 }
 
-.transport-qita1:before {
-  content: "\e663";
+.transport-shujushengchengguize:before {
+  content: "\e6e1";
 }
 
-.transport--:before {
-  content: "\e60b";
+.transport-fanhui:before {
+  content: "\e67a";
 }
 
-.transport-yaopin:before {
-  content: "\e604";
+.transport-top1:before {
+  content: "\e66c";
 }
 
-.transport-biaobencaiji:before {
-  content: "\e6ea";
+.transport-top2:before {
+  content: "\e6b1";
 }
 
-.transport-icon_liucheng:before {
-  content: "\e636";
+.transport-top31:before {
+  content: "\e66e";
 }
 
-.transport-zhengchang:before {
-  content: "\e63e";
+.transport-top5:before {
+  content: "\e66f";
 }
 
-.transport-yichang:before {
-  content: "\e63a";
+.transport-top4:before {
+  content: "\e661";
 }
 
-.transport-qita:before {
-  content: "\e60f";
+.transport-top3:before {
+  content: "\e667";
 }
 
-.transport-shuyeguanli:before {
-  content: "\e678";
+.transport-top:before {
+  content: "\e66a";
 }
 
-.transport-yidonghuliicon_biaobenliuqu:before {
-  content: "\e61b";
+.transport-tongji-2:before {
+  content: "\e66d";
 }
 
-.transport-saoma:before {
-  content: "\e660";
+.transport-jiantou_zuoyouqiehuan:before {
+  content: "\eb0d";
 }
 
-.transport-shezhi:before {
-  content: "\e62f";
+.transport-gengduo:before {
+  content: "\e665";
 }
 
-.transport-required:before {
-  content: "\e603";
+.transport-jiaobiao:before {
+  content: "\e65e";
 }
 
-.transport-yunzhuanzhentongjiicon-:before {
-  content: "\e61a";
+.transport-xiajiantou:before {
+  content: "\e65d";
 }
 
-.transport-tag27fuben:before {
-  content: "\e614";
+.transport-hushi1:before {
+  content: "\e65c";
 }
 
-.transport-qidian:before {
-  content: "\e6e7";
+.transport-xiangyou1:before {
+  content: "\e65a";
 }
 
-.transport-search:before {
-  content: "\e651";
+.transport-yaopinshuju:before {
+  content: "\e65b";
 }
 
-.transport-shouye10:before {
-  content: "\e63f";
+.transport-biaobenxinxi:before {
+  content: "\e666";
 }
 
-.transport-shouye9:before {
-  content: "\e629";
+.transport-baoxiu:before {
+  content: "\e6cd";
 }
 
-.transport-luyin:before {
-  content: "\e6c5";
+.transport-RectangleCopy:before {
+  content: "\e6ae";
 }
 
-.transport-xiala2:before {
-  content: "\e669";
+.transport-hushizhihanghuligongzuo:before {
+  content: "\e7ba";
 }
 
-.transport-wenhao:before {
-  content: "\e7d2";
+.transport-peizhi1:before {
+  content: "\e6bb";
 }
 
-.transport-keshidaozhen:before {
-  content: "\ead2";
+.transport-shaixuan:before {
+  content: "\e659";
 }
 
-.transport-yi-peisong:before {
-  content: "\e647";
+.transport-shangban:before {
+  content: "\e695";
 }
 
-.transport-wei-peisong:before {
-  content: "\e662";
+.transport-tiaodu-fill:before {
+  content: "\e6b5";
 }
 
-.transport-shujuyuanzongshu:before {
-  content: "\e650";
+.transport-hushi:before {
+  content: "\e657";
 }
 
-.transport-tongji:before {
-  content: "\e6db";
+.transport-xiazai:before {
+  content: "\e62b";
 }
 
-.transport-shouye8:before {
-  content: "\e621";
+.transport-tuli:before {
+  content: "\e656";
 }
 
-.transport-icon3:before {
-  content: "\e654";
+.transport-shenti:before {
+  content: "\e649";
 }
 
-.transport-tongjibaobiao:before {
-  content: "\e677";
+.transport-a-iconPark-shopping-cart-addCopy:before {
+  content: "\e64c";
 }
 
-.transport-chuangwei:before {
-  content: "\e64a";
+.transport-icon_biaoben:before {
+  content: "\e64d";
 }
 
-.transport-paixu-shang:before {
-  content: "\eeeb";
+.transport-tianjia:before {
+  content: "\e717";
 }
 
-.transport-paixu-xia:before {
-  content: "\eeec";
+.transport-bar-code:before {
+  content: "\e952";
 }
 
-.transport-paixujiantoushang:before {
-  content: "\e7fe";
+.transport-a-11111:before {
+  content: "\e62a";
 }
 
-.transport-paixujiantouxia:before {
-  content: "\e7ff";
+.transport-shixian:before {
+  content: "\e887";
 }
 
-.transport-webicon19:before {
-  content: "\e67d";
+.transport-shimang1:before {
+  content: "\e7bd";
 }
 
-.transport-webicon206:before {
-  content: "\e684";
+.transport-yuyinbofang:before {
+  content: "\e636";
 }
 
-.transport-xiangyou:before {
-  content: "\e637";
+.transport-laidian:before {
+  content: "\e89d";
 }
 
-.transport-xiangzuo2:before {
-  content: "\e6b0";
+.transport-tonghuazhong:before {
+  content: "\e679";
 }
 
-.transport-shiwujiaoxing:before {
+.transport-peisongchenggong:before {
+  content: "\e623";
+}
+
+.transport-required:before {
+  content: "\e606";
+}
+
+.transport-disanfang:before {
+  content: "\e76e";
+}
+
+.transport-shijianpeizhi5:before {
+  content: "\e645";
+}
+
+.transport-shibai1:before {
   content: "\e635";
 }
 
-.transport-xialajiantou:before {
-  content: "\e638";
+.transport-kuaisubaoxiu:before {
+  content: "\e689";
 }
 
-.transport-fuxuankuang:before {
-  content: "\e639";
+.transport-bg-question:before {
+  content: "\e648";
 }
 
-.transport-fuxuankuang-:before {
-  content: "\e646";
+.transport-guanbi2:before {
+  content: "\e610";
 }
 
-.transport-xiangzuo1:before {
-  content: "\e673";
+.transport-guanbi3:before {
+  content: "\e622";
 }
 
-.transport-xiaoxi:before {
-  content: "\e617";
+.transport-Icon-tongjifenxi:before {
+  content: "\e611";
 }
 
-.transport-shangla-:before {
-  content: "\e628";
+.transport-zichan:before {
+  content: "\e630";
 }
 
-.transport-shuangjiantouxiangyou-:before {
-  content: "\e71e";
+.transport-kongzhi:before {
+  content: "\e653";
 }
 
-.transport-shibai:before {
-  content: "\e626";
+.transport-jiandantongji:before {
+  content: "\e690";
 }
 
-.transport-duigou:before {
+.transport-peizhizhongxin:before {
+  content: "\e6af";
+}
+
+.transport-24gf-tags:before {
+  content: "\e885";
+}
+
+.transport-weibiaoti2010104:before {
+  content: "\e644";
+}
+
+.transport-shanchu1:before {
+  content: "\e74b";
+}
+
+.transport-shuye:before {
+  content: "\e627";
+}
+
+.transport-shuye1:before {
+  content: "\e62c";
+}
+
+.transport-xunjian:before {
+  content: "\e6c6";
+}
+
+.transport-dingdanliebiao:before {
+  content: "\e719";
+}
+
+.transport-rili:before {
+  content: "\e64b";
+}
+
+.transport-keshijieshao:before {
+  content: "\e600";
+}
+
+.transport-xiala11:before {
+  content: "\e66b";
+}
+
+.transport-shouye:before {
+  content: "\e605";
+}
+
+.transport-liebiao1:before {
+  content: "\e632";
+}
+
+.transport-tongjifenxi:before {
+  content: "\e712";
+}
+
+.transport-xiangzuo:before {
   content: "\e602";
 }
 
-.transport-shouye7:before {
-  content: "\e619";
+.transport-haoping:before {
+  content: "\e612";
 }
 
-.transport-xiala2-01:before {
-  content: "\e62e";
+.transport-gengduoda:before {
+  content: "\e634";
+}
+
+.transport-shouye1:before {
+  content: "\e62d";
+}
+
+.transport-haoping1:before {
+  content: "\e640";
+}
+
+.transport-guanbi:before {
+  content: "\e60c";
 }
 
 .transport-xiala:before {
@@ -285,51 +369,335 @@
   content: "\e668";
 }
 
-.transport-xiangzuo:before {
-  content: "\e601";
+.transport-shouye7:before {
+  content: "\e619";
 }
 
-.transport-haoping:before {
-  content: "\e612";
+.transport-xiala2-01:before {
+  content: "\e62e";
 }
 
-.transport-gengduoda:before {
-  content: "\e633";
+.transport-shibai:before {
+  content: "\e626";
 }
 
-.transport-shouye1:before {
-  content: "\e62d";
+.transport-duigou:before {
+  content: "\e603";
 }
 
-.transport-haoping1:before {
-  content: "\e640";
+.transport-shuangjiantouxiangyou-:before {
+  content: "\e71e";
 }
 
-.transport-guanbi:before {
-  content: "\e60c";
+.transport-shangla-:before {
+  content: "\e628";
+}
+
+.transport-xiangzuo1:before {
+  content: "\e673";
+}
+
+.transport-fuxuankuang:before {
+  content: "\e639";
+}
+
+.transport-fuxuankuang-:before {
+  content: "\e646";
+}
+
+.transport-xialajiantou:before {
+  content: "\e638";
+}
+
+.transport-shiwujiaoxing:before {
+  content: "\e637";
+}
+
+.transport-xiangyou:before {
+  content: "\e63a";
+}
+
+.transport-xiangzuo2:before {
+  content: "\e6b0";
+}
+
+.transport-webicon19:before {
+  content: "\e67d";
+}
+
+.transport-webicon206:before {
+  content: "\e684";
+}
+
+.transport-paixujiantoushang:before {
+  content: "\e7fe";
+}
+
+.transport-paixujiantouxia:before {
+  content: "\e7ff";
+}
+
+.transport-paixu-shang:before {
+  content: "\eeeb";
+}
+
+.transport-paixu-xia:before {
+  content: "\eeec";
+}
+
+.transport-shouye8:before {
+  content: "\e621";
+}
+
+.transport-icon3:before {
+  content: "\e654";
+}
+
+.transport-tongjibaobiao:before {
+  content: "\e677";
+}
+
+.transport-chuangwei:before {
+  content: "\e64a";
+}
+
+.transport-tongji:before {
+  content: "\e6db";
+}
+
+.transport-yi-peisong:before {
+  content: "\e647";
+}
+
+.transport-wei-peisong:before {
+  content: "\e663";
+}
+
+.transport-shujuyuanzongshu:before {
+  content: "\e650";
+}
+
+.transport-keshidaozhen:before {
+  content: "\ead2";
+}
+
+.transport-shouye9:before {
+  content: "\e629";
+}
+
+.transport-luyin:before {
+  content: "\e6c5";
+}
+
+.transport-xiala2:before {
+  content: "\e669";
+}
+
+.transport-wenhao:before {
+  content: "\e7d2";
+}
+
+.transport-shouye10:before {
+  content: "\e63f";
+}
+
+.transport-shezhi:before {
+  content: "\e62f";
+}
+
+.transport-yunzhuanzhentongjiicon-:before {
+  content: "\e61b";
+}
+
+.transport-tag27fuben:before {
+  content: "\e614";
+}
+
+.transport-qidian:before {
+  content: "\e6e7";
+}
+
+.transport-search:before {
+  content: "\e651";
+}
+
+.transport-qita:before {
+  content: "\e60f";
+}
+
+.transport-shuyeguanli:before {
+  content: "\e678";
+}
+
+.transport-yidonghuliicon_biaobenliuqu:before {
+  content: "\e61d";
+}
+
+.transport-zhengchang:before {
+  content: "\e63e";
+}
+
+.transport-yichang:before {
+  content: "\e63b";
+}
+
+.transport-icon_liucheng:before {
+  content: "\e63c";
+}
+
+.transport-peijianlunyitubiao:before {
+  content: "\e655";
+}
+
+.transport-ccgl-kuneizhuanyi-1:before {
+  content: "\e6e5";
+}
+
+.transport-qita1:before {
+  content: "\e664";
+}
+
+.transport--:before {
+  content: "\e60b";
+}
+
+.transport-yaopin:before {
+  content: "\e607";
+}
+
+.transport-biaobencaiji:before {
+  content: "\e6ea";
+}
+
+.transport-erweima:before {
+  content: "\e608";
+}
+
+.transport-chaoshi:before {
+  content: "\e63d";
+}
+
+.transport-guanbi1:before {
+  content: "\e658";
+}
+
+.transport-lingdang:before {
+  content: "\e60d";
+}
+
+.transport-laba1:before {
+  content: "\e681";
+}
+
+.transport-iconfontcrmtubiao68:before {
+  content: "\e61f";
+}
+
+.transport-qiehuan:before {
+  content: "\e641";
+}
+
+.transport-duigou1:before {
+  content: "\e618";
+}
+
+.transport-shishijiankong_lunxun:before {
+  content: "\e643";
+}
+
+.transport-zhongdianguanzhu:before {
+  content: "\e609";
+}
+
+.transport-lajitong:before {
+  content: "\e631";
+}
+
+.transport-tubiao_wei:before {
+  content: "\e6b4";
+}
+
+.transport-zhong:before {
+  content: "\e69f";
+}
+
+.transport-1_round_solid:before {
+  content: "\e64e";
+}
+
+.transport-2_round_solid:before {
+  content: "\e64f";
+}
+
+.transport-3_round_solid:before {
+  content: "\e652";
+}
+
+.transport-zhong1:before {
+  content: "\e61e";
+}
+
+.transport-te1:before {
+  content: "\e739";
+}
+
+.transport-wei:before {
+  content: "\e620";
+}
+
+.transport-Bduanshuzi:before {
+  content: "\e624";
+}
+
+.transport-Bduanshuzi1:before {
+  content: "\e625";
+}
+
+.transport-Bduanshuzi11:before {
+  content: "\e60e";
+}
+
+.transport-zu1468:before {
+  content: "\e6b6";
+}
+
+.transport-arrow-right-full:before {
+  content: "\ea66";
+}
+
+.transport-gengduoda-copy:before {
+  content: "\eeed";
 }
 
 .transport-sousuo:before {
-  content: "\e634";
+  content: "\e633";
+}
+
+.transport-tongji6:before {
+  content: "\e6d1";
+}
+
+.transport-liebiao:before {
+  content: "\e61a";
 }
 
 .transport-xiala1:before {
-  content: "\e66b";
+  content: "\e662";
 }
 
-.transport-shouye:before {
-  content: "\e605";
+.transport-saoma:before {
+  content: "\e660";
 }
 
-.transport-liebiao:before {
-  content: "\e632";
+.transport-yifeiguanli:before {
+  content: "\e60a";
 }
 
-.transport-tongjifenxi:before {
-  content: "\e712";
+.transport-a-ziyuan7:before {
+  content: "\e604";
 }
 
-.transport-keshijieshao:before {
-  content: "\e600";
+.transport-a-ziyuan3:before {
+  content: "\e601";
 }
 

src/assets/less/style.less

@@ -17,7 +17,6 @@ html {
 
 body {
   font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
-  line-height: 1.2em;
   margin: 0;
   padding: 0;
 }

src/components/AppCumulative.vue

@@ -1,60 +1,15 @@
 <template>
   <div class="app-header__contentNews">
     <div class="app-header__contentNewsItem">
-      <strong>累计 | </strong>工单数：
-      <em>{{allData[0]|formatNum}}</em>
-    </div>
-    <div class="app-header__contentNewsItem">
-      标本送检：
-      <em>{{allData[1]|formatNum}}</em>
-    </div>
-    <div class="app-header__contentNewsItem">
-      患者陪检：
-      <em>{{allData[2]|formatNum}}</em>
+
     </div>
   </div>
 </template>
 
 <script>
-import { post, timer1 } from './../http/http'
 export default {
   name: 'AppCumulative',
-  inject: ['hospitalId'],
-  data () {
-    return {
-      allData: [], // 数据
-      timer: null// 轮询定时器
-    }
-  },
-  filters: {
-    formatNum (v) {
-      v = v ? v.toString() : ''
-      return v > 100000 ? v.slice(0, v.length - 4) + '万' : v
-    }
-  },
-  methods: {
-    // 获取今日新冠送检，今日标本运输数，今日患者陪检
-    async getTodayData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const result = await post(`/largeScreen/getData/getOrderTotal/${this.hospitalId}`, { srartTime, endTime })
-      this.allData = result.list[0]
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        this.getTodayData()
-      }, timer1)
-    }
-  },
-  mounted () {
-    this.getTodayData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
+  inject: ['parentDutyId', 'hosId', 'dutyId']
 }
 </script>
 

src/components/AppHeader.vue

@@ -7,7 +7,6 @@
       <div class="app-header__main--leftBottom"></div>
       <div class="app-header__main--rightBottom"></div>
       <h1 class="app-header__title">
-        <img class="app-header__logo" :src="faviconUrl" />
         {{logoTitle}}
       </h1>
     </div>
@@ -16,7 +15,7 @@
       <!-- 累计工单数，标本送检，患者陪检 -->
       <div class="app-header__contentToday">
         <!-- 今日工单数，标本送检，陪检人次 -->
-        <AppToday></AppToday>
+        <AppToday :faviconUrl="faviconUrl"></AppToday>
         <!-- /今日工单数，标本送检，陪检人次 -->
       </div>
       <!-- /累计工单数，标本送检，患者陪检 -->
@@ -26,7 +25,7 @@
         </div>
         <!-- 时间 -->
         <div class="app-header__contentTime">
-          {{ time | weekFormat }}<time>{{ time | timeFormat }}</time>
+          {{ time | dateFormat }}<time>{{ time | weekFormat }}</time><time>{{ time | timeFormat }}</time>
         </div>
         <!-- /时间 -->
       </div>
@@ -54,6 +53,22 @@ export default {
     }
   },
   filters: {
+    // 格式化日期
+    dateFormat (time) {
+      const newDate = new Date(time)
+      const years = newDate
+        .getFullYear()
+        .toString()
+        .padStart(2, '0')
+      const months = (newDate.getMonth() + 1)
+        .toString()
+        .padStart(2, '0')
+      const days = newDate
+        .getDay()
+        .toString()
+        .padStart(2, '0')
+      return `${years}年${months}月${days}日`
+    },
     // 格式化时间
     timeFormat (time) {
       const newDate = new Date(time)
@@ -69,7 +84,7 @@ export default {
         .getSeconds()
         .toString()
         .padStart(2, '0')
-      return `${hours}：${minutes}：${seconds}`
+      return `${hours}:${minutes}:${seconds}`
     },
     // 获得当前的星期
     weekFormat (time) {
@@ -125,40 +140,35 @@ export default {
 <style lang="less">
 .app-header {
   position: relative;
-  height: 1.375rem;
-  padding-top: 0.2rem;
+  height: 1.175rem;
   // 边框线
   .app-header__main {
     width: 5.15rem;
     height: 0.675rem;
     margin: 0 auto;
-    border-bottom: 1px solid #68ffff;
+    border-bottom: 2px solid #15B2EC;
     position: relative;
     .app-header__title {
       display: flex;
       justify-content: center;
       align-items: center;
-      .app-header__logo {
-        max-width: 0.6125rem;
-        max-height: 0.6125rem;
-        margin-right: 0.1rem;
-      }
+      font-weight: bold;
     }
     .app-header__main--left {
       position: absolute;
-      width: calc(50vw - 3.17rem);
-      height: 1px;
-      background-image: linear-gradient(#30c8ff, #68f8ff);
-      top: 1px;
-      left: calc(2.81rem - 50vw);
+      width: calc(50vw - 2.81rem);
+      height: 2px;
+      background-color: #15B2EC;
+      top: 2px;
+      left: calc(2.45rem - 50vw);
     }
     .app-header__main--right {
       position: absolute;
-      width: calc(50vw - 3.17rem);
-      height: 1px;
-      background-image: linear-gradient(#68f8ff, #30c8ff);
-      top: 1px;
-      right: calc(2.81rem - 50vw);
+      width: calc(50vw - 2.81rem);
+      height: 2px;
+      background-color: #15B2EC;
+      top: 2px;
+      right: calc(2.45rem - 50vw);
     }
     .app-header__main--leftBottom {
       position: absolute;
@@ -168,7 +178,7 @@ export default {
       height: 0.075rem;
       background-color: rgba(253, 255, 250, 0.2);
       transform: skewX(45deg);
-      border-top: 1px solid #489ec9;
+      border-top: 2px solid #309BC5;
     }
     .app-header__main--rightBottom {
       position: absolute;
@@ -178,26 +188,26 @@ export default {
       height: 0.075rem;
       background-color: rgba(253, 255, 250, 0.2);
       transform: skewX(-45deg);
-      border-top: 1px solid #489ec9;
+      border-top: 2px solid #309BC5;
     }
     &::before {
       content: "";
       position: absolute;
-      left: -0.61rem;
-      bottom: 0.21rem;
-      width: 0.75rem;
+      left: -0.6rem;
+      bottom: 0.2rem;
+      width: 0.74rem;
       height: 0.125rem;
-      border-top: 1px solid #5ceef9;
+      border-top: 2px solid #15B2EC;
       transform: rotate(60deg);
     }
     &::after {
       content: "";
       position: absolute;
-      right: -0.61rem;
-      bottom: 0.21rem;
-      width: 0.75rem;
+      right: -0.6rem;
+      bottom: 0.2rem;
+      width: 0.74rem;
       height: 0.125rem;
-      border-top: 1px solid #5ceef9;
+      border-top: 2px solid #15B2EC;
       transform: rotate(-60deg);
     }
     .app-header__title {
@@ -209,6 +219,7 @@ export default {
       display: flex;
       justify-content: center;
       align-items: center;
+      letter-spacing: .025rem;
     }
   }
   // 头部内容
@@ -247,7 +258,7 @@ export default {
       justify-content: space-between;
       .app-header__contentTime {
         color: #fff;
-        font-size: 0.26rem;
+        font-size: .325rem;
         time {
           margin-left: 0.1rem;
         }

src/components/AppToday.vue

@@ -1,56 +1,27 @@
 <template>
   <div class="app-header__contentNews">
     <div class="app-header__contentNewsItem">
-      <strong>今日</strong>工单数：
-      <em>{{allData[0]}}</em>
-    </div>
-    <div class="app-header__contentNewsItem">
-      <strong>今日</strong>标本送检：
-      <em>{{allData[1]}}</em>
-    </div>
-    <div class="app-header__contentNewsItem">
-      <strong>今日</strong>陪检人次：
-      <em>{{allData[2]}}</em>
+      <img class="app-header__logo" :src="faviconUrl" />
     </div>
   </div>
 </template>
 
 <script>
-import { post, timer1 } from './../http/http'
 export default {
   name: 'AppToday',
-  inject: ['hospitalId'],
-  data () {
-    return {
-      allData: [], // 数据
-      timer: null// 轮询定时器
-    }
-  },
-  methods: {
-    // 获取今日新冠送检，今日标本运输数，今日患者陪检
-    async getTodayData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const result = await post(`/largeScreen/getData/getTodayTitleNew/${this.hospitalId}`, { srartTime, endTime })
-      this.allData = result.list[0]
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        this.getTodayData()
-      }, timer1)
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  props: {
+    faviconUrl: {
+      type: String,
+      default: ''
     }
-  },
-  mounted () {
-    this.getTodayData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
   }
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
+.app-header__logo {
+  max-width: .7rem;
+  max-height: .7rem;
+}
 </style>

src/components/BusinessTypeRatio.vue

@@ -1,298 +0,0 @@
-<template>
-  <div class="business-type-ratio" ref="BusinessTypeRatio"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-import { post, timer10 } from './../http/http'
-export default {
-  name: 'BusinessTypeRatio',
-  inject: ['hospitalId'],
-  data () {
-    return {
-      timer: null,
-      myChart: null,
-      associationTypeProportion: [],
-      associationTypeProportionNum: [],
-      associationTypeProportionName: [],
-      associationTypeProportionAll: []
-    }
-  },
-  methods: {
-    // 画图
-    draw () {
-      const that = this
-      this.myChart = echarts.init(this.$refs.BusinessTypeRatio)
-      const option = {
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        grid: {
-          show: false,
-          top: '5%',
-          left: '5%',
-          right: '5%',
-          bottom: '0%'
-        },
-        // legend: {
-        //   left: '20%',
-        //   orient: 'horizontal',
-        //   itemWidth: 8,
-        //   itemHeight: 8,
-        //   icon: 'rect',
-        //   bottom: '0%',
-        //   data: this.associationTypeProportionName,
-        //   textStyle: {
-        //     color: '#fff'
-        //   },
-        //   formatter (name) {
-        //     const arr = that.associationTypeProportionAll.filter(item => item[0] === name)
-        //     return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
-        //   }
-        // },
-        legend: [
-          {
-            right: '55%',
-            orient: 'horizontal',
-            itemWidth: 8,
-            itemHeight: 8,
-            icon: 'rect',
-            bottom: '20%',
-            data: this.associationTypeProportionName.slice(
-              0,
-              Math.ceil(this.associationTypeProportionName.length / 2)
-            ),
-            textStyle: {
-              color: '#fff'
-            },
-            formatter (name) {
-              const arr = that.associationTypeProportionAll.filter(
-                (item) => item[0] === name
-              )
-              return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
-            }
-          },
-          {
-            left: '55%',
-            orient: 'horizontal',
-            itemWidth: 8,
-            itemHeight: 8,
-            icon: 'rect',
-            bottom: '24%',
-            data: this.associationTypeProportionName.slice(
-              Math.ceil(this.associationTypeProportionName.length / 2),
-              this.associationTypeProportionName.length
-            ),
-            textStyle: {
-              color: '#fff'
-            },
-            formatter (name) {
-              const arr = that.associationTypeProportionAll.filter(
-                (item) => item[0] === name
-              )
-              return `${name} ${arr[0][1]}单 ${arr[0][2]}%`
-            }
-          }
-        ],
-        color: [
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#c27073' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(194, 112, 115, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#c2ab70' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(194, 171, 112, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#70c2ab' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(112, 194, 171, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#70c282' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(112, 194, 130, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#9cc270' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(156, 194, 112, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#709cc2' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(112, 156, 194, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          },
-          {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: '#c270b0' // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: 'rgba(194, 112, 176, 0.5)' // 100% 处的颜色
-              }
-            ],
-            global: false // 缺省为 false
-          }
-        ],
-        series: [
-          {
-            name: '数据统计',
-            type: 'pie',
-            center: ['50%', '35%'],
-            roseType: 'radius',
-            label: {
-              normal: {
-                show: false
-              },
-              emphasis: {
-                show: false
-              }
-            },
-            lableLine: {
-              normal: {
-                show: false
-              },
-              emphasis: {
-                show: true
-              }
-            },
-            data: this.associationTypeProportion
-          }
-        ]
-      }
-      this.myChart.setOption(option)
-    },
-    // 获取数据
-    async getData () {
-      const srartTime = this.$moment()
-        .subtract(29, 'days')
-        .format('YYYY-MM-DD') // 近三十天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const result = await post(
-        `/largeScreen/getData/associationTypeProportion/${this.hospitalId}`,
-        { srartTime, endTime }
-      )
-      this.associationTypeProportionNum = []
-      this.associationTypeProportionName = []
-      this.associationTypeProportion = []
-      this.associationTypeProportionAll = result.associationTypeProportion
-      result.associationTypeProportion.forEach((item) => {
-        this.associationTypeProportionNum.push(item[1]) // 获取到的数据
-        this.associationTypeProportionName.push(item[0]) // 获取到的名称
-        this.associationTypeProportion.push({ value: item[1], name: item[0] }) // 获取到的名称
-      })
-      this.draw()
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        this.getData()
-      }, timer10)
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
-}
-</script>
-
-<style lang="less">
-.business-type-ratio {
-  height: 7rem;
-  margin: 0 auto;
-}
-</style>

src/components/CategoryProportion.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="points-ranking__wrap">
+    <div class="points-ranking" ref="CategoryProportion"></div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'CategoryProportion',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      sign: 'lastWeek',
+      timer: null,
+      myChart: null,
+      gradeRankingList: []
+    }
+  },
+  methods: {
+    // 画图
+    draw () {
+      this.myChart = echarts.init(this.$refs.CategoryProportion)
+      const option = {
+        color: ['#33CC85', '#72C0DD', '#FAC958', '#546FC6'], // 颜色数组
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: 16,
+          left: 8,
+          textStyle: {
+            color: '#fff', // 全局文字颜色
+            fontSize: 14
+          }
+        },
+        grid: {
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0
+        },
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            center: ['50%', '58%'],
+            radius: ['35%', '50%'],
+            avoidLabelOverlap: true,
+            label: {
+              show: true,
+              color: 'rgba(255, 255, 255, 0.85)',
+              formatter: (params) => {
+                return `${params.name}:${params.value}\n${params.percent}%`
+              },
+              textStyle: {
+                lineHeight: 14
+              }
+            },
+            labelLine: {
+              show: true,
+              lineStyle: {
+                color: '#265A8A'
+              }
+            },
+            data: this.gradeRankingList
+          }
+        ]
+      }
+      this.myChart.setOption(option)
+    },
+    // 获取数据
+    async getData () {
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmCategoryProportion'
+        }
+      )
+      result.data = result.data || []
+      this.gradeRankingList = result.data.map(v => ({
+        name: v.category || '',
+        value: v.sum || 0,
+        percent: v.percent || 0
+      }))
+      this.draw()
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
+        this.getData()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.points-ranking__wrap {
+  height: 3.7rem;
+  overflow: hidden;
+  position: relative;
+  .points-ranking {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

src/components/DeliveryRate.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="delivery-rate">
-    <!-- <div class="delivery-rate__item" v-for="(workOrderOnTime,k) in workOrderOnTimes" :key="k" v-show="currentDictionary == k"> -->
-    <div class="delivery-rate__item">
-      <DeliveryRateLine :workOrderOnTime="workOrderOnTimes[currentDictionary]"></DeliveryRateLine>
-    </div>
-  </div>
-</template>
-
-<script>
-import DeliveryRateLine from './DeliveryRateLine.vue'
-import { post, timer11 } from './../http/http'
-export default {
-  name: 'DeliveryRate',
-  inject: ['hospitalId'],
-  props: {
-    // 当前tab索引
-    currentDictionary: {
-      type: Number,
-      default: 0
-    }
-  },
-  data () {
-    return {
-      timer: null,
-      timer1: null,
-      dictionary: [], // 字典数据
-      workOrderOnTimes: {}// 各类型数据汇总
-    }
-  },
-  methods: {
-    // tab轮询
-    autoNext () {
-      const ids = []
-      const len = this.dictionary.length
-      this.dictionary.forEach(item => {
-        ids.push(item[0])
-      })
-      let index = ids.indexOf(this.currentDictionary)
-      index++
-      if (index === len) {
-        index = 0
-      }
-      this.$emit('changeCurrentDictionary', this.dictionary[index][0])
-      clearTimeout(this.timer1)
-      this.timer1 = setTimeout(() => {
-        this.autoNext()
-      }, 10000)
-    },
-    // 获取字典数据
-    async getDictionary () {
-      const result = await post(
-        `/largeScreen/getData/getDictionary/${this.hospitalId}`,
-        { key: 'association_types' }
-      )
-      this.dictionary = result.dictionary.filter(v => v[0] === 255 || v[0] === 256 || v[0] === 257 || v[0] === 258 || v[0] === 259 || v[0] === 260)
-      this.$emit('dictionaryHandle', JSON.stringify(this.dictionary))
-      this.dictionary.forEach(item => {
-        this.getData(item[0])
-      })
-      this.polling()
-    },
-    // 获取数据
-    async getData (id) {
-      const srartTime = this.$moment()
-        .subtract(29, 'days')
-        .format('YYYY-MM-DD') // 近三十天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const result = await post(
-        `/largeScreen/getData/workOrderOnTime/${this.hospitalId}`,
-        { srartTime, endTime, associationId: id }
-      )
-      this.$set(this.workOrderOnTimes, id, result.workOrderOnTime)
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      clearTimeout(this.timer1)
-      this.timer = setTimeout(() => {
-        this.getDictionary()
-      }, timer11)
-      this.timer1 = setTimeout(() => {
-        this.autoNext()
-      }, 10000)
-    }
-  },
-  components: {
-    DeliveryRateLine
-  },
-  mounted () {
-    this.getDictionary()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
-}
-</script>
-
-<style lang="less">
-.delivery-rate {
-  height: 1.9375rem;
-  overflow: hidden;
-}
-</style>

src/components/DeliveryRateLine.vue

@@ -1,140 +0,0 @@
-<template>
-    <div class="delivery-rate-line" ref="DeliveryRateLine" v-if="workOrderOnTime.length>0"></div>
-</template>
-
-<script>
-import echarts from 'echarts'
-export default {
-  name: 'DeliveryRateLine',
-  data () {
-    return {
-      myChart: null,
-      workOrderOnTimeNum: [],
-      workOrderOnTimeName: []
-    }
-  },
-  props: {
-    workOrderOnTime: {
-      type: Array,
-      default: () => []
-    }
-  },
-  methods: {
-    // 画图
-    draw () {
-      this.myChart = echarts.init(this.$refs.DeliveryRateLine)
-      const option = {
-        title: {
-          text: '按时送达率（%）',
-          left: 15,
-          textStyle: {
-            color: '#d4d6d7',
-            fontSize: 12
-          }
-        },
-        xAxis: {
-          type: 'category',
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#d4d6d7', // 更改坐标轴文字颜色
-              fontSize: 12 // 更改坐标轴文字大小
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#709cc2' // 更改坐标轴颜色
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          data: this.workOrderOnTimeName
-        },
-        yAxis: {
-          type: 'value',
-          max: 1,
-          min: 0,
-          interval: 0.25,
-          axisLabel: {
-            formatter (value) {
-              return value * 100
-            },
-            show: true,
-            textStyle: {
-              color: '#d4d6d7', // 更改坐标轴文字颜色
-              fontSize: 12 // 更改坐标轴文字大小
-            }
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#709cc2' // 更改坐标轴颜色
-            }
-          },
-          axisTick: {
-            show: false
-          },
-          splitLine: {
-            // 网格线
-            lineStyle: {
-              color: ['rgba(255,255,255,0.1)'],
-              type: 'dashed' // 设置网格线类型 dotted：虚线   solid:实线
-            },
-            show: true // 隐藏或显示
-          }
-        },
-        grid: {
-          top: '20%',
-          bottom: '25%',
-          left: '5%',
-          right: '2%',
-          borderColor: 'rgba(255,255,255,0.1)'
-        },
-        series: [
-          {
-            data: this.workOrderOnTimeNum,
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: 4,
-            label: {
-              show: true,
-              position: 'top',
-              textStyle: '#fff',
-              formatter (params) {
-                return (params.value * 100).toFixed(2) + '%'
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#70c282', // 折点颜色
-                lineStyle: {
-                  color: '#70c282' // 折线颜色
-                }
-              }
-            }
-          }
-        ]
-      }
-      this.myChart.setOption(option)
-    }
-  },
-  updated () {
-    this.workOrderOnTimeNum = []
-    this.workOrderOnTimeName = []
-    if (this.workOrderOnTime.length > 0) {
-      this.workOrderOnTime.forEach(item => {
-        this.workOrderOnTimeNum.push(item[1] / 100)
-        this.workOrderOnTimeName.push(item[0])
-      })
-      this.draw()
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.delivery-rate-line {
-  height: 1.9375rem;
-  margin: 0.2rem auto 0;
-}
-</style>

src/components/OnTimeArrivalRate.vue

@@ -1,48 +1,48 @@
 <template>
-  <div class="on-time-arrival-rate__wrap">
-    <div class="on-time-arrival-rate" ref="OnTimeArrivalRate"></div>
+  <div class="points-ranking__wrap">
+    <div class="points-ranking" ref="DeptPrice"></div>
   </div>
 </template>
 
 <script>
 import echarts from 'echarts'
-import { post, timer9 } from './../http/http'
+import { post, timerCommon } from './../http/http'
 export default {
-  name: 'OnTimeArrivalRate',
-  inject: ['hospitalId'],
+  name: 'DeptPrice',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
+      sign: 'lastWeek',
       timer: null,
       myChart: null,
-      userOnTimeRankingListNum: [],
-      userOnTimeRankingListName: []
+      gradeRankingListNum: [],
+      gradeRankingListName: []
     }
   },
   methods: {
     // 画图
     draw () {
-      this.myChart = echarts.init(this.$refs.OnTimeArrivalRate)
+      this.myChart = echarts.init(this.$refs.DeptPrice)
       var colorArray = [
         {
-          top: '#c2ab70', // 第一
-          bottom: 'rgba(194, 171, 112, 0.5)',
-          borderColor: '#c2ab70'
+          top: '#6B97BD', // 第一
+          bottom: '#364C5F'
         },
         {
-          top: '#70c282', // 第二
-          bottom: 'rgba(112, 194, 130, 0.5)'
+          top: '#6B97BD', // 第二
+          bottom: '#364C5F'
         },
         {
-          top: '#709cc2', // 第三
-          bottom: 'rgba(112, 156, 194, 0.5)'
+          top: '#6AB87D', // 第三
+          bottom: '#3D7057'
         },
         {
-          top: '#709cc2', // 第四
-          bottom: 'rgba(112, 156, 194, 0.5)'
+          top: '#A09163', // 第四
+          bottom: '#504932'
         },
         {
-          top: '#709cc2', // 第五
-          bottom: 'rgba(112, 156, 194, 0.5)'
+          top: '#6B97BD', // 第五
+          bottom: '#364C5F'
         }
       ]
       const option = {
@@ -51,19 +51,15 @@ export default {
           formatter: '{b}:{c}'
         },
         grid: {
-          left: '5%',
-          top: '12%',
-          right: '1%',
-          bottom: '8%',
+          left: 28,
+          top: 0,
+          bottom: 10,
           containLabel: true
         },
         xAxis: {
           type: 'value',
           show: false,
           position: 'top',
-          max: function (value) {
-            return value.max * 1.1
-          },
           axisTick: {
             show: false
           },
@@ -90,13 +86,17 @@ export default {
               show: false
             },
             inverse: 'true', // 排序
+            axisLabel: {
+              margin: 16,
+              color: 'rgba(255,255,255,0.85)'
+            },
             axisLine: {
               show: false,
               lineStyle: {
                 color: '#fff'
               }
             },
-            data: this.userOnTimeRankingListName
+            data: this.gradeRankingListName
           }
         ],
         series: [
@@ -106,10 +106,9 @@ export default {
             label: {
               normal: {
                 show: true,
-                position: [360, 0],
-                formatter (params) {
-                  return params.value + '%'
-                },
+                // position: [300, 0],
+                position: 'right',
+                formatter: '{c}',
                 textStyle: {
                   color: '#fff'
                 }
@@ -182,7 +181,7 @@ export default {
             barGap: '0%',
             barCategoryGap: '70%',
             barWidth: 8,
-            data: this.userOnTimeRankingListNum.sort((a, b) => b - a)
+            data: this.gradeRankingListNum
           }
         ]
       }
@@ -190,23 +189,39 @@ export default {
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment()
-        .subtract(29, 'days')
-        .format('YYYY-MM-DD') // 近三十天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
       const result = await post(
-        `/largeScreen/getData/userOnTimeRankingList/${this.hospitalId}`,
-        { srartTime, endTime }
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmDeptPrice'
+        }
       )
-      this.userOnTimeRankingListNum = []
-      this.userOnTimeRankingListName = []
-      if (result.userOnTimeRankingList.length > 5) {
-        result.userOnTimeRankingList = result.userOnTimeRankingList.slice(0, 5)
+      this.gradeRankingListNum = []
+      this.gradeRankingListName = []
+      if (result.data.length > 5) {
+        result.data = result.data.slice(0, 5)
+      }
+      if (result.data.length > 0) {
+        result.data.forEach(item => {
+          this.gradeRankingListNum.push(item.price || 0) // 获取到的数据
+          this.gradeRankingListName.push(item.name || '') // 获取到的名称
+        })
       }
-      result.userOnTimeRankingList.forEach(item => {
-        this.userOnTimeRankingListNum.push(item[0]) // 获取到的数据
-        this.userOnTimeRankingListName.push(item[1]) // 获取到的名称
-      })
       this.draw()
       this.polling()
     },
@@ -214,8 +229,13 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
         this.getData()
-      }, timer9)
+      }, timerCommon)
     }
   },
   mounted () {
@@ -227,17 +247,17 @@ export default {
 }
 </script>
 
-<style lang="less">
-.on-time-arrival-rate__wrap {
-  // height: 2.7125rem;
-  height: 2.3875rem;
+<style lang="less" scoped>
+.points-ranking__wrap {
+  height: 3.7rem;
   overflow: hidden;
-  .on-time-arrival-rate {
+  position: relative;
+  .points-ranking {
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
-    top: -0.175rem;
+    top: 0;
   }
 }
 </style>

src/components/ErrorWorkOrder.vue

@@ -1,204 +0,0 @@
-<template>
-  <div class="error-work-order__wrap">
-    <div class="error-work-order__inner">
-      <div class="error-work-order--bg">
-        <div class="error-work-order-item--bg" v-for="item in 5" :key="item"></div>
-      </div>
-      <div class="error-work-order" :class="{marquee_top:animate}">
-        <div
-          class="error-work-order__item"
-          v-for="item in todayAbnormityWorkOrderList"
-          :key="item.id"
-        >
-          <strong
-            class="error-work-order__status"
-            :class="[item[0] === 1?'error-work-order__status--error':'error-work-order__status--timeout']"
-          >
-            <i class="error-work-order__icon"></i>
-            {{item[0] === 1?'异常':'超时'}}
-          </strong>
-          <div class="error-work-order__id">{{item[1]}}</div>
-          <div class="error-work-order__name">{{item[2]}}</div>
-          <div class="error-work-order__group">{{item[3]}}</div>
-          <div class="error-work-order__type">{{item[4]}}</div>
-          <div class="error-work-order__level">{{item[5]}}</div>
-          <div class="error-work-order__date">{{item[6]|formatTime(that)}}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { post, timer7 } from './../http/http'
-export default {
-  name: 'ErrorWorkOrder',
-  inject: ['hospitalId'],
-  data () {
-    return {
-      that: this,
-      animate: false,
-      timer: null,
-      timer1: null,
-      todayAbnormityWorkOrder: [], // 今日工单异常情况
-      todayAbnormityWorkOrderList: [] // 列表
-    }
-  },
-  filters: {
-    // 格式化日期
-    formatTime (value, that) {
-      return that.$moment(value).format('YYYYMMDD HH:mm')
-    }
-  },
-  methods: {
-    // 无限滚动
-    scrollInfinite () {
-      if (this.todayAbnormityWorkOrderList.length <= 5) {
-        return
-      }
-      clearTimeout(this.timer1)
-      this.timer1 = setTimeout(() => {
-        this.showMarquee()
-        this.scrollInfinite()
-      }, 2000)
-    },
-    // 处理数组方法
-    showMarquee () {
-      this.animate = true
-      this.todayAbnormityWorkOrderList.push(
-        this.todayAbnormityWorkOrderList[0]
-      )
-      setTimeout(() => {
-        this.todayAbnormityWorkOrderList.shift()
-        this.animate = false
-      }, 1000)
-    },
-    // 获取数据
-    async getData () {
-      const result = await post(
-        `/largeScreen/getData/todayAbnormityWorkOrder/${this.hospitalId}`
-      )
-      this.todayAbnormityWorkOrder = []
-      this.todayAbnormityWorkOrderList = []
-      this.todayAbnormityWorkOrder = result.todayAbnormityWorkOrder[0]
-      this.todayAbnormityWorkOrderList = result.todayAbnormityWorkOrderList
-      this.$emit(
-        'todayAbnormityWorkOrderHandle',
-        JSON.stringify(this.todayAbnormityWorkOrder)
-      )
-      this.polling()
-      this.scrollInfinite()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        this.getData()
-      }, timer7)
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-    clearTimeout(this.timer1)
-  }
-}
-</script>
-
-<style lang="less">
-.error-work-order__wrap {
-  height: 2.3125rem;
-  padding-bottom: 0.2rem;
-  background: linear-gradient(
-      96deg,
-      rgba(255, 255, 255, 0.05) 0%,
-      rgba(255, 255, 255, 0) 70%
-    )
-    left bottom no-repeat;
-  background-size: 100% 0.2rem;
-  margin-bottom: 0.4375rem;
-  .error-work-order__inner {
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    .error-work-order--bg {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      .error-work-order-item--bg {
-        height: 0.425rem;
-        &:nth-of-type(even) {
-          background: linear-gradient(
-            96deg,
-            rgba(255, 255, 255, 0.05) 0%,
-            rgba(255, 255, 255, 0) 70%
-          );
-        }
-      }
-    }
-    .error-work-order {
-      &.marquee_top {
-        transition: all 1s;
-        transform: translateY(-0.425rem);
-      }
-      .error-work-order__item {
-        height: 0.425rem;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 0.175rem;
-        padding-left: 0.3rem;
-        padding-right: 0.3rem;
-        .error-work-order__id,
-        .error-work-order__group,
-        .error-work-order__type,
-        .error-work-order__date{
-          width: 1.6rem;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .error-work-order__name{
-          width: 2rem;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .error-work-order__level{
-          width: 0.5rem;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        .error-work-order__status {
-          width: 0.55rem;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          &.error-work-order__status--error {
-            color: #c27073;
-            .error-work-order__icon {
-              background-color: #c27073;
-            }
-          }
-          &.error-work-order__status--timeout {
-            color: #c2ab70;
-            .error-work-order__icon {
-              background-color: #c2ab70;
-            }
-          }
-          .error-work-order__icon {
-            width: 0.1rem;
-            height: 0.1rem;
-            border-radius: 50%;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

src/components/GroupPerformance.vue

@@ -1,234 +0,0 @@
-<template>
-  <div class="group-performanceWrap">
-    <div id="group-performance"></div>
-  </div>
-</template>
-
-<script>
-import echarts from 'echarts'
-import { post, timer3 } from './../http/http'
-export default {
-  name: 'GroupPerformance',
-  inject: ['hospitalId'],
-  data () {
-    return {
-      timer: null,
-      groutWorkOrderListNum: [], // 获取到的单数
-      groutWorkOrderListName: [] // 获取到的科室名称
-    }
-  },
-  methods: {
-    // 画图
-    draw () {
-      const myChart = echarts.init(
-        document.getElementById('group-performance')
-      )
-      var colorArray = [
-        {
-          top: '#c2ab70', // 第一
-          bottom: 'rgba(194, 171, 112, 0.5)',
-          borderColor: '#c2ab70'
-        },
-        {
-          top: '#70c282', // 第二
-          bottom: 'rgba(112, 194, 130, 0.5)'
-        },
-        {
-          top: '#709cc2', // 第三
-          bottom: 'rgba(112, 156, 194, 0.5)'
-        },
-        {
-          top: '#709cc2', // 第四
-          bottom: 'rgba(112, 156, 194, 0.5)'
-        },
-        {
-          top: '#709cc2', // 第五
-          bottom: 'rgba(112, 156, 194, 0.5)'
-        }
-      ]
-      const option = {
-        tooltip: {
-          show: false,
-          formatter: '{b}:{c}'
-        },
-        grid: {
-          left: '0%',
-          top: '0%',
-          right: '5%',
-          bottom: '5%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'value',
-          show: false,
-          position: 'top',
-          max: function (value) {
-            return value.max * 1.5
-          },
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#fff'
-            }
-          },
-          splitLine: {
-            show: false
-          }
-        },
-        yAxis: [
-          {
-            type: 'category',
-            axisTick: {
-              show: false,
-              alignWithLabel: false,
-              length: 5
-            },
-            splitLine: {
-              // 网格线
-              show: false
-            },
-            inverse: 'true', // 排序
-            axisLine: {
-              show: false,
-              lineStyle: {
-                color: '#fff'
-              }
-            },
-            data: this.groutWorkOrderListName
-          }
-        ],
-        series: [
-          {
-            name: 'xxx',
-            type: 'bar',
-            label: {
-              normal: {
-                show: true,
-                position: [300, 0],
-                formatter: '{c}单',
-                textStyle: {
-                  color: '#fff'
-                }
-              }
-            },
-            itemStyle: {
-              normal: {
-                show: true,
-                color: function (params) {
-                  const num = colorArray.length
-                  return {
-                    type: 'linear',
-                    colorStops: [
-                      {
-                        offset: 0,
-                        color: colorArray[params.dataIndex % num].bottom
-                      },
-                      {
-                        offset: 1,
-                        color: colorArray[params.dataIndex % num].top
-                      },
-                      {
-                        offset: 0,
-                        color: colorArray[params.dataIndex % num].bottom
-                      },
-                      {
-                        offset: 1,
-                        color: colorArray[params.dataIndex % num].top
-                      },
-                      {
-                        offset: 0,
-                        color: colorArray[params.dataIndex % num].bottom
-                      },
-                      {
-                        offset: 1,
-                        color: colorArray[params.dataIndex % num].top
-                      },
-                      {
-                        offset: 0,
-                        color: colorArray[params.dataIndex % num].bottom
-                      },
-                      {
-                        offset: 1,
-                        color: colorArray[params.dataIndex % num].top
-                      },
-                      {
-                        offset: 0,
-                        color: colorArray[params.dataIndex % num].bottom
-                      },
-                      {
-                        offset: 1,
-                        color: colorArray[params.dataIndex % num].top
-                      },
-                      {
-                        offset: 0,
-                        color: colorArray[params.dataIndex % num].bottom
-                      },
-                      {
-                        offset: 1,
-                        color: colorArray[params.dataIndex % num].top
-                      }
-                    ]
-                  }
-                },
-                barBorderRadius: 70,
-                borderWidth: 0,
-                borderColor: '#333'
-              }
-            },
-            barGap: '0%',
-            barCategoryGap: '70%',
-            barWidth: 8,
-            data: this.groutWorkOrderListNum
-          }
-        ]
-      }
-      myChart.setOption(option)
-    },
-    // 获取数据
-    async getData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const result = await post(
-        `/largeScreen/getData/getDeptOrderTop10/${this.hospitalId}`,
-        { srartTime, endTime }
-      )
-      this.groutWorkOrderListNum = []
-      this.groutWorkOrderListName = []
-      result.list.forEach((item) => {
-        this.groutWorkOrderListNum.push(item[1]) // 获取到的异常单数
-        this.groutWorkOrderListName.push(item[0]) // 获取到的小组名称
-      })
-      this.draw()
-      this.polling()
-    },
-    // 轮询请求
-    polling () {
-      clearTimeout(this.timer)
-      this.timer = setTimeout(() => {
-        this.getData()
-      }, timer3)
-    }
-  },
-  mounted () {
-    this.getData()
-  },
-  beforeDestroy () {
-    clearTimeout(this.timer)
-  }
-}
-</script>
-
-<style lang="less">
-#group-performance {
-  width: 100%;
-  height: 100%;
-}
-.group-performanceWrap {
-  // width: 5.15rem;
-  height: 5.0625rem;
-  margin: 0.2rem auto;
-}
-</style>

src/components/GroupPraise.vue

@@ -1,53 +1,27 @@
 <template>
   <div class="group-praise">
-    <!-- 广播 -->
-    <div class="group-praise__broadcast">
-      <i
-        class="group-praise__broadcast--icon icon_transport transport-laba1"
-      ></i>
-      <div class="group-praise__broadcastListWrap">
-        <ul
-          class="group-praise__broadcastList"
-          :class="{ marquee_top: animate }"
-          :style="{ transform: 'translateY(' + 0.375 * n + 'rem)' }"
-        >
-          <li v-for="(item, i) in evaluateUserList" :key="i">
-            【{{ item[0] }}】配送人员「{{ item[1] }}」 {{ item[2] }}
-          </li>
-        </ul>
-      </div>
-    </div>
     <div class="group-praise__content">
       <div class="group-praise__circle">
-        <header class="group-praise__title">NO.2</header>
-        <div class="group-praise__circleContent" v-if="gradeRankingList[1]">
-          <p class="group-praise__circleName ellipsis">
-            {{ gradeRankingList[1][1] }}
-          </p>
+        <header class="group-praise__title">待接单</header>
+        <div class="group-praise__circleContent">
           <p class="group-praise__circlePercent">
-            {{ gradeRankingList[1][0] }}
+            {{ dataInfo.pending || 0 }}
           </p>
         </div>
       </div>
-      <div class="group-praise__circle--win">
-        <header class="group-praise__title">NO.1</header>
-        <div class="group-praise__circleContent" v-if="gradeRankingList[0]">
-          <p class="group-praise__circleName ellipsis">
-            {{ gradeRankingList[0][1] }}
-          </p>
+      <div class="group-praise__circle">
+        <header class="group-praise__title">处理中</header>
+        <div class="group-praise__circleContent">
           <p class="group-praise__circlePercent">
-            {{ gradeRankingList[0][0] }}
+            {{ dataInfo.handler || 0 }}
           </p>
         </div>
       </div>
       <div class="group-praise__circle">
-        <header class="group-praise__title">NO.3</header>
-        <div class="group-praise__circleContent" v-if="gradeRankingList[2]">
-          <p class="group-praise__circleName ellipsis">
-            {{ gradeRankingList[2][1] }}
-          </p>
+        <header class="group-praise__title">挂起工单</header>
+        <div class="group-praise__circleContent">
           <p class="group-praise__circlePercent">
-            {{ gradeRankingList[2][0] }}
+            {{ dataInfo.overtime || 0 }}
           </p>
         </div>
       </div>
@@ -56,72 +30,45 @@
 </template>
 
 <script>
-import { post, timer2 } from './../http/http'
+import { post, timerCommon } from './../http/http'
 export default {
   name: 'GroupPraise',
-  inject: ['hospitalId'],
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
-      allData: {},
-      fontSize: parseFloat(document.querySelector('html').style.fontSize),
       timer: null,
-      animate: false,
-      timer1: null,
-      n: 0,
-      gradeRankingList: [], // 小组排名(无序)
-      evaluateUserList: [], // 滚动数据
-      disY: 0.375, // 滚动数据偏移量
-      disHeight: 0, // 滚动数据高度
-      isShow: true // 滚动数据显示隐藏
+      dataInfo: {}
     }
   },
   methods: {
-    // 无限滚动
-    scrollInfinite () {
-      clearTimeout(this.timer1)
-      this.timer1 = setTimeout(() => {
-        this.showMarquee()
-        this.scrollInfinite()
-      }, 2000)
-    },
-    // 处理数组方法
-    showMarquee () {
-      this.animate = true
-      this.n--
-      if (this.n === -this.evaluateUserList.length) {
-        this.animate = false
-        this.n = 0
-      }
-    },
-    // 近30天小组好评排行
+    // 工单实时动态
     async getGroupPraise () {
-      const srartTime = this.$moment()
-        .subtract(1, 'days')
-        .format('YYYY-MM-DD') // 昨日
+      const startTime = this.$moment()
+        .startOf('day')
+        .format('YYYY-MM-DD HH:mm:ss') // 今日
       const endTime = this.$moment()
-        .subtract(1, 'days')
-        .format('YYYY-MM-DD') // 昨日
+        .endOf('day')
+        .format('YYYY-MM-DD HH:mm:ss') // 今日
       const result = await post(
-        `/largeScreen/getData/gradeRanking/${this.hospitalId}`,
-        { srartTime, endTime, pageSize: 3 }
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmIncidentCount'
+        }
       )
-      this.gradeRankingList = result.gradeRankingList
-      this.evaluateUserList = result.evaluateUserList
+      this.dataInfo = result.data ? result.data[0] : {}
       this.polling()
-      if (this.evaluateUserList.length > 0) {
-        this.evaluateUserList = [
-          ...this.evaluateUserList,
-          this.evaluateUserList[0]
-        ]
-        this.scrollInfinite()
-      }
     },
     // 轮询请求
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
         this.getGroupPraise()
-      }, timer2)
+      }, timerCommon)
     }
   },
   mounted () {
@@ -129,103 +76,39 @@ export default {
   },
   beforeDestroy () {
     clearTimeout(this.timer)
-    clearTimeout(this.timer1)
   }
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .group-praise {
-  height: 2.7125rem;
-  padding-top: 0.2rem;
-  padding-bottom: 0.375rem;
-  .group-praise__broadcast {
-    height: 0.4rem;
-    background-color: rgba(255, 255, 255, 0.2);
-    border: solid 1px rgba(255, 255, 255, 0.2);
-    display: flex;
-    align-items: center;
-    .group-praise__broadcast--icon {
-      font-size: 0.275rem;
-      color: #2496d2;
-      margin-left: 0.1rem;
-    }
-    .group-praise__broadcastListWrap {
-      flex: 1;
-      height: 0.375rem;
-      line-height: 0.375rem;
-      padding-left: 0.2rem;
-      padding-right: 0.1rem;
-      overflow: hidden;
-      .group-praise__broadcastList {
-        &.marquee_top {
-          transition: all 1s;
-        }
-        li {
-          word-break: break-all;
-        }
-      }
-    }
-  }
+  height: 2.6625rem;
   .group-praise__content {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 .2rem;
+    height: 100%;
     .group-praise__title {
-      color: #c2ab70;
-      font-size: 0.2rem;
-      font-weight: 700;
+      color: #fff;
+      font-size: .2rem;
       text-align: center;
     }
     .group-praise__circleContent {
       color: #fff;
       font-size: 0.175rem;
-      height: 0.875rem;
+      height: .7875rem;
       display: flex;
       align-items: center;
       justify-content: center;
-      flex-direction: column;
-      line-height: 1.3em;
-      text-align: center;
-      .group-praise__circleName {
-        width: 0.725rem;
+      margin-top: .2rem;
+      background: linear-gradient( 90deg, #032430 0%, #023645 13%, #0B4D61 38%, #105A70 61%, #023645 87%, #06252B 100%);
+      .group-praise__circlePercent{
+        font-size: .475rem;
       }
     }
     .group-praise__circle {
-      width: 1.2rem;
-      height: 1.2rem;
-      margin-top: 0.4rem;
-      position: relative;
-      &::after {
-        content: "";
-        opacity: 0.5;
-        width: 100%;
-        height: 100%;
-        background: url("./../assets/img/image_no2.png") no-repeat;
-        background-size: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-      }
-    }
-    .group-praise__circle--win {
-      width: 1.7625rem;
-      height: 1.6875rem;
-      margin: 0.05rem 0.1375rem 0;
-      position: relative;
-      &::after {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        opacity: 0.5;
-        width: 100%;
-        height: 100%;
-        background: url("./../assets/img/image_no1.png") no-repeat;
-        background-size: 100%;
-      }
-      .group-praise__circleContent {
-        margin-top: 0.1rem;
-      }
+      width: 1.425rem;
     }
   }
 }

src/components/OnDutyToday.vue

@@ -1,9 +1,22 @@
 <template>
   <div class="on-duty-today">
-    <div class="on-duty-today__inner" :class="{marquee_top:animate}" :style="{transform:'translateY('+(2.7125*n)+'rem)'}">
-      <div class="on-duty-today__list" v-for="(item1,i) in workList" :key="i">
-        <div class="on-duty-today__item" v-for="(item2,j) in item1" :key="j">
-          <OnDutyTodayPie :workListItem="item2"></OnDutyTodayPie>
+    <div class="on-duty-today__inner">
+      <div class="on-duty-today__list">
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.total || 0}}</div>
+          <div class="on-duty-today__itemBody">总单数</div>
+        </div>
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.price || 0}}</div>
+          <div class="on-duty-today__itemBody">总费用（元）</div>
+        </div>
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.avg_response | formatHourMinute}}</div>
+          <div class="on-duty-today__itemBody">平均接单时间</div>
+        </div>
+        <div class="on-duty-today__item">
+          <div class="on-duty-today__itemHeader">{{todayBeOnDuty.avg_handle | formatHourMinute}}</div>
+          <div class="on-duty-today__itemBody">平均解决时间</div>
         </div>
       </div>
     </div>
@@ -11,76 +24,56 @@
 </template>
 
 <script>
-import OnDutyTodayPie from './OnDutyTodayPie.vue'
-import { post, timer5 } from './../http/http'
+import { post, timerCommon } from './../http/http'
 export default {
   name: 'OnDutyToday',
-  inject: ['hospitalId'],
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
+      sign: 'lastWeek',
       timer: null,
-      timer1: null,
-      animate: false,
-      n: 0,
-      todayBeOnDuty: [], // 头部总当班人数
-      workList: [] // 当班人数（工作中，空闲中）
+      todayBeOnDuty: {} // 头部总当班人数
     }
   },
-  components: {
-    OnDutyTodayPie
-  },
   methods: {
-    // 无限滚动
-    scrollInfinite () {
-      clearTimeout(this.timer1)
-      this.timer1 = setTimeout(() => {
-        this.showMarquee()
-        this.scrollInfinite()
-      }, 5000)
-    },
-    // 处理数组方法
-    showMarquee () {
-      this.animate = true
-      this.n--
-      if (this.n === -(this.workList.length)) {
-        this.animate = false
-        this.n = 0
-      }
-    },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD')
-      const endTime = this.$moment().format('YYYY-MM-DD')
-      const postData = { srartTime, endTime }
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
       const result = await post(
-        `/largeScreen/getData/staffWorkingCondition/${this.hospitalId}`, postData
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmSummary'
+        }
       )
-      this.todayBeOnDuty = []
-      this.workList = []
-      this.todayBeOnDuty = result.todayBeOnDuty[0]
-      const len = Math.ceil(result.workList.length / 3)
-      for (let i = 0; i < len; i++) {
-        let list = [
-          result.workList[0 + 3 * i],
-          result.workList[1 + 3 * i],
-          result.workList[2 + 3 * i]
-        ]
-        list = list.filter((item) => item !== undefined)
-        this.workList.push(list)
-      }
-      this.$emit('todayBeOnDutyHandle', JSON.stringify(this.todayBeOnDuty))
+      this.todayBeOnDuty = result.data ? result.data[0] : {}
       this.polling()
-      if (this.workList.length > 0) {
-        this.workList = [...this.workList, this.workList[0]]
-        this.scrollInfinite()
-      }
     },
     // 轮询请求
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
         this.getData()
-      }, timer5)
+      }, timerCommon)
     }
   },
   mounted () {
@@ -95,27 +88,34 @@ export default {
 <style lang="less">
 .on-duty-today {
   overflow: hidden;
-  height: 2.7125rem;
+  height: 2.6625rem;
   .on-duty-today__inner {
-    // display: flex;
-    // flex-wrap: wrap;
-    // width: 1000%;
-    &.marquee_top {
-      transition: all 1s;
-      // transform: translateY(-2.7125rem);
-    }
+    height: 100%;
     .on-duty-today__list {
-      width: 11.7rem;
       display: flex;
       justify-content: space-between;
-      height: 2.7125rem;
+      height: 100%;
       .on-duty-today__item {
-        margin-top: 0.2rem;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-right: .4rem;
         &:first-child {
-          margin-left: 0.3rem;
+          margin-left: .4rem;
         }
         &:last-child {
-          margin-right: 0.3rem;
+          margin-right: .4rem;
+        }
+        .on-duty-today__itemHeader{
+          font-size: .65rem;
+          color: #00D5EA;
+          font-weight: bold;
+        }
+        .on-duty-today__itemBody{
+          font-size: .2rem;
+          color: #FFFFFF;
+          margin-top: .1rem;
         }
       }
     }

src/components/OnDutyTodayPie.vue

@@ -1,355 +0,0 @@
-<template>
-  <div class="on-duty-today-pie__wrap">
-    <div class="on-duty-today-pie" ref="pie"></div>
-    <div class="on-duty-today-pie__tips">
-      <ul class="on-duty-today-pie__list">
-        <li class="on-duty-today-pie__item">
-          <i class="on-duty-today-pie__item--green"></i>已完成
-          <em>{{ workListItem[1] }}</em>
-        </li>
-        <li class="on-duty-today-pie__item">
-          <i class="on-duty-today-pie__item--red"></i>执行中
-          <em>{{ workListItem[2] }}</em>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import echarts from 'echarts'
-export default {
-  name: 'OnDutyTodayPie',
-  data () {
-    return {
-      // timer: null,
-      myChart: null
-    }
-  },
-  props: {
-    workListItem: {
-      type: Array,
-      default: () => []
-    }
-  },
-  watch: {
-    workListItem () {
-      this.draw()
-    }
-  },
-  methods: {
-    // 画图
-    draw () {
-      this.myChart = echarts.init(this.$refs.pie)
-      const workListItem = this.workListItem
-      const option = {
-        title: {
-          text: workListItem[0],
-          textStyle: {
-            color: '#fff',
-            fontSize: 14,
-            fontWeight: 'normal'
-          },
-          left: 'center',
-          top: -5
-        },
-        color: ['#237189', '#1d3e5b'],
-        series: [
-          {
-            type: 'pie',
-            top: 15,
-            center: ['50%', '55%'],
-            zlevel: 1,
-            silent: true,
-            radius: ['83%', '84%'],
-            hoverAnimation: false,
-            label: {
-              normal: {
-                show: false
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: this._pie3()
-          },
-          {
-            type: 'pie',
-            top: 15,
-            center: ['50%', '55%'],
-            zlevel: 2,
-            silent: true,
-            radius: ['76%', '77%'],
-            startAngle: 90,
-            hoverAnimation: false,
-            label: {
-              normal: {
-                show: false
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: this._pie2()
-          },
-          {
-            type: 'pie',
-            top: 15,
-            center: ['50%', '55%'],
-            zlevel: 3,
-            silent: true,
-            radius: ['72%', '70%'],
-            label: {
-              normal: {
-                show: false
-              }
-            },
-            labelLine: {
-              normal: {
-                show: false
-              }
-            },
-            data: [1]
-          },
-          {
-            type: 'pie',
-            top: 15,
-            center: ['50%', '55%'],
-            zlevel: 4,
-            silent: true,
-            radius: ['46%', '66%'],
-            startAngle: 180,
-            hoverAnimation: false,
-            // label: {
-            //   show: true,
-            //   formatter () {
-            //     const num = [workListItem[1], workListItem[0]]
-            //     return `当班人数\n${num[0]}/${num[1]}`
-            //   },
-            //   fontSize: 14,
-            //   lineHeight: 30,
-            //   color: '#d4d6d7',
-            //   position: 'center'
-            // },
-            data: this._pie4()
-          }
-        ]
-      }
-      this.myChart.setOption(option)
-    },
-    _pie1 () {
-      const dataArr = []
-      for (var i = 0; i < 8; i++) {
-        dataArr.push({
-          name: (i + 1).toString(),
-          value: 20,
-          itemStyle: {
-            normal: {
-              color: 'rgba(88,142,197,0.4)',
-              borderWidth: 0,
-              borderColor: 'rgba(0,0,0,0)'
-            }
-          }
-        })
-      }
-      return dataArr
-    },
-    _pie2 () {
-      const dataArr = []
-      for (var i = 0; i < 16; i++) {
-        if (i % 4 === 0) {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 50,
-            itemStyle: {
-              normal: {
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
-        } else if (i % 4 === 1) {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 2,
-            itemStyle: {
-              normal: {
-                color: 'rgba(88,142,197,0)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
-        } else if (i % 4 === 2) {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 20,
-            itemStyle: {
-              normal: {
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
-        } else {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 2,
-            itemStyle: {
-              normal: {
-                color: 'rgba(88,142,197,0)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
-        }
-      }
-      return dataArr
-    },
-    _pie3 () {
-      const dataArr = []
-      for (var i = 0; i < 100; i++) {
-        if (i % 2 === 0) {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 25,
-            itemStyle: {
-              normal: {
-                color: '#30586a',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
-        } else {
-          dataArr.push({
-            name: (i + 1).toString(),
-            value: 20,
-            itemStyle: {
-              normal: {
-                color: 'rgba(0,0,0,0)',
-                borderWidth: 0,
-                borderColor: 'rgba(0,0,0,0)'
-              }
-            }
-          })
-        }
-      }
-      return dataArr
-    },
-    _pie4 () {
-      const dataArr = []
-      const arr = ['已完成', '执行中']
-      const color = ['#70c282', '#c27073']
-      const num = [this.workListItem[1], this.workListItem[2]]
-      for (var i = 0; i < arr.length; i++) {
-        dataArr.push({
-          name: arr[i],
-          value: num[i],
-          itemStyle: {
-            normal: {
-              color: color[i],
-              borderWidth: 0,
-              borderColor: 'rgba(0,0,0,0)'
-            }
-          }
-        })
-        if (i === 0) {
-          dataArr[0].label = {
-            show: true,
-            formatter () {
-              return `工单总数\n${num[0] + num[1]}`
-            },
-            fontSize: 14,
-            lineHeight: 30,
-            color: '#d4d6d7',
-            position: 'center',
-            padding: [35, 0, 0, 0]
-          }
-        }
-        if (i === 1) {
-          dataArr[1].label = {
-            show: false,
-            formatter () {
-              return ''
-            },
-            fontSize: 0,
-            lineHeight: 0,
-            color: '#d4d6d7',
-            position: 'center'
-          }
-        }
-      }
-      return dataArr
-    }
-    // 动画
-    // doing () {
-    //   clearTimeout(this.timer)
-    //   const option = this.myChart.getOption()
-    //   option.series[1].startAngle = option.series[1].startAngle - 1
-    //   this.myChart.setOption(option)
-    //   this.timer = setTimeout(() => {
-    //     this.doing()
-    //   }, 16)
-    // }
-  },
-  mounted () {
-    this.draw()
-    // this.doing()
-  }
-  // beforeDestroy () {
-  //   clearTimeout(this.timer)
-  // }
-}
-</script>
-
-<style lang="less">
-.on-duty-today-pie__wrap {
-  // width: 2.5rem;
-  width: 3rem;
-  .on-duty-today-pie {
-    // width: 1.8rem;
-    width: 2.6rem;
-    // height: 2.125rem;
-    height: 2rem;
-    margin: 0 auto;
-  }
-  .on-duty-today-pie__tips {
-    .on-duty-today-pie__list {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      .on-duty-today-pie__item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: #d4d6d7;
-        font-size: 0.15rem;
-        em {
-          font-size: 0.2rem;
-          margin-left: 0.1rem;
-        }
-        .on-duty-today-pie__item--red {
-          width: 0.1rem;
-          height: 0.1rem;
-          background-color: #c27073;
-          border-radius: 0.025rem;
-          margin-right: 0.075rem;
-        }
-        .on-duty-today-pie__item--green {
-          width: 0.1rem;
-          height: 0.1rem;
-          background-color: #70c282;
-          border-radius: 0.025rem;
-          margin-right: 0.075rem;
-        }
-      }
-    }
-  }
-}
-</style>

src/components/PointsRanking.vue

@@ -6,12 +6,13 @@
 
 <script>
 import echarts from 'echarts'
-import { post, timer8 } from './../http/http'
+import { post, timerCommon } from './../http/http'
 export default {
   name: 'PointsRanking',
-  inject: ['hospitalId'],
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
+      sign: 'lastWeek',
       timer: null,
       myChart: null,
       gradeRankingListNum: [],
@@ -24,25 +25,24 @@ export default {
       this.myChart = echarts.init(this.$refs.PointsRanking)
       var colorArray = [
         {
-          top: '#c2ab70', // 第一
-          bottom: 'rgba(194, 171, 112, 0.5)',
-          borderColor: '#c2ab70'
+          top: '#6B97BD', // 第一
+          bottom: '#364C5F'
         },
         {
-          top: '#70c282', // 第二
-          bottom: 'rgba(112, 194, 130, 0.5)'
+          top: '#6B97BD', // 第二
+          bottom: '#364C5F'
         },
         {
-          top: '#709cc2', // 第三
-          bottom: 'rgba(112, 156, 194, 0.5)'
+          top: '#6AB87D', // 第三
+          bottom: '#3D7057'
         },
         {
-          top: '#709cc2', // 第四
-          bottom: 'rgba(112, 156, 194, 0.5)'
+          top: '#A09163', // 第四
+          bottom: '#504932'
         },
         {
-          top: '#709cc2', // 第五
-          bottom: 'rgba(112, 156, 194, 0.5)'
+          top: '#6B97BD', // 第五
+          bottom: '#364C5F'
         }
       ]
       const option = {
@@ -51,19 +51,15 @@ export default {
           formatter: '{b}:{c}'
         },
         grid: {
-          left: '5%',
-          top: '12%',
-          right: '1%',
-          bottom: '8%',
+          left: 28,
+          top: 0,
+          bottom: 10,
           containLabel: true
         },
         xAxis: {
           type: 'value',
           show: false,
           position: 'top',
-          max: function (value) {
-            return value.max * 1.5
-          },
           axisTick: {
             show: false
           },
@@ -90,6 +86,10 @@ export default {
               show: false
             },
             inverse: 'true', // 排序
+            axisLabel: {
+              margin: 16,
+              color: 'rgba(255,255,255,0.85)'
+            },
             axisLine: {
               show: false,
               lineStyle: {
@@ -106,7 +106,8 @@ export default {
             label: {
               normal: {
                 show: true,
-                position: [350, 0],
+                // position: [300, 0],
+                position: 'right',
                 formatter: '{c}',
                 textStyle: {
                   color: '#fff'
@@ -188,23 +189,37 @@ export default {
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment()
-        .subtract(29, 'days')
-        .format('YYYY-MM-DD') // 近三十天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
       const result = await post(
-        `/largeScreen/getData/gradeRankingList/${this.hospitalId}`,
-        { srartTime, endTime }
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmDeptOrder'
+        }
       )
       this.gradeRankingListNum = []
       this.gradeRankingListName = []
-      if (result.gradeRankingList.length > 5) {
-        result.gradeRankingList = result.gradeRankingList.slice(0, 5)
+      if (result.data.length > 5) {
+        result.data = result.data.slice(0, 5)
       }
-      if (result.gradeRankingList.length > 0) {
-        result.gradeRankingList.forEach(item => {
-          this.gradeRankingListNum.push(item[2]) // 获取到的数据
-          this.gradeRankingListName.push(item[1]) // 获取到的名称
+      if (result.data.length > 0) {
+        result.data.forEach(item => {
+          this.gradeRankingListNum.push(item.total || 0) // 获取到的数据
+          this.gradeRankingListName.push(item.name || '') // 获取到的名称
         })
       }
       this.draw()
@@ -214,8 +229,13 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
         this.getData()
-      }, timer8)
+      }, timerCommon)
     }
   },
   mounted () {
@@ -227,16 +247,17 @@ export default {
 }
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 .points-ranking__wrap {
-  height: 2.7125rem;
+  height: 3.7rem;
   overflow: hidden;
+  position: relative;
   .points-ranking {
     width: 100%;
-    height: 3.25rem;
+    height: 100%;
     position: absolute;
     left: 0;
-    top: -0.175rem;
+    top: 0;
   }
 }
 </style>

src/components/PriceProportion.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="points-ranking__wrap">
+    <div class="points-ranking" ref="CategoryProportion"></div>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'CategoryProportion',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      total: 0,
+      sign: 'lastWeek',
+      timer: null,
+      myChart: null,
+      gradeRankingList: []
+    }
+  },
+  methods: {
+    // 画图
+    draw () {
+      this.myChart = echarts.init(this.$refs.CategoryProportion)
+      const option = {
+        color: ['#006FFF', '#00D5EA'], // 颜色数组
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: 16,
+          left: 8,
+          textStyle: {
+            color: '#fff', // 全局文字颜色
+            fontSize: 14
+          }
+        },
+        grid: {
+          left: 0,
+          top: 0,
+          bottom: 0,
+          right: 0
+        },
+        graphic: [{
+          type: 'text',
+          left: 'center',
+          top: '50%',
+          style: {
+            text: `总费用\n${this.total}元`, // 换行显示
+            textAlign: 'center',
+            textVerticalAlign: 'middle',
+            fill: '#949494', // 文字颜色
+            fontSize: 20
+          }
+        }],
+        series: [
+          {
+            name: '',
+            type: 'pie',
+            center: ['50%', '58%'],
+            radius: ['35%', '50%'],
+            avoidLabelOverlap: true,
+            label: {
+              show: true,
+              color: 'rgba(255, 255, 255, 0.85)',
+              formatter: (params) => {
+                return `${params.name}\n${params.value}元`
+              },
+              textStyle: {
+                lineHeight: 14
+              }
+            },
+            labelLine: {
+              show: true,
+              lineStyle: {
+                color: '#265A8A'
+              }
+            },
+            data: this.gradeRankingList
+          }
+        ]
+      }
+      this.myChart.setOption(option)
+    },
+    // 获取数据
+    async getData () {
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmPriceProportion'
+        }
+      )
+      result.data = result.data || []
+      if (result.data.length) {
+        this.gradeRankingList = [
+          { name: '总工时', value: result.data[0].sum_price || 0, percent: result.data[0].sumPercent || '0%' },
+          { name: '总耗材', value: result.data[0].work_price || 0, percent: result.data[0].workPercent || '0%' }
+        ]
+        this.total = this.gradeRankingList.reduce((pre, cur) => pre + cur.value, 0)
+      } else {
+        this.gradeRankingList = []
+        this.total = 0
+      }
+      this.draw()
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
+        this.getData()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.points-ranking__wrap {
+  height: 3.7rem;
+  overflow: hidden;
+  position: relative;
+  .points-ranking {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}
+</style>

src/components/TimeUtilization.vue

@@ -4,12 +4,13 @@
 
 <script>
 import echarts from 'echarts'
-import { post, timer4 } from './../http/http'
+import { post, timerCommon } from './../http/http'
 export default {
   name: 'TimeUtilization',
-  inject: ['hospitalId'],
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
+      sign: 'lastWeek',
       timer: null,
       myChart: null,
       groupWorkRatioName: [],
@@ -22,19 +23,10 @@ export default {
       this.myChart = echarts.init(this.$refs.TimeUtilization)
 
       const option = {
-        title: {
-          text: '工单数量（单）',
-          top: 5,
-          left: 15,
-          textStyle: {
-            color: '#d4d6d7',
-            fontSize: 12
-          }
-        },
         grid: {
-          left: '10%',
-          top: '20%',
-          bottom: '20%',
+          left: '5%',
+          top: '10%',
+          bottom: '10%',
           right: '5%'
         },
         xAxis: {
@@ -106,7 +98,7 @@ export default {
             symbol:
               'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
             label: {
-              show: false,
+              show: true,
               position: 'top',
               distance: 0,
               color: '#70c2ab',
@@ -124,11 +116,11 @@ export default {
                   colorStops: [
                     {
                       offset: 0,
-                      color: 'rgba(112,194,130, .8)' //  0%  处的颜色
+                      color: '#00D5EA' //  0%  处的颜色
                     },
                     {
                       offset: 1,
-                      color: 'rgba(112,194,130, .1)' //  100%  处的颜色
+                      color: '#00D5EA' //  100%  处的颜色
                     }
                   ],
                   global: false //  缺省为  false
@@ -147,17 +139,34 @@ export default {
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
       const result = await post(
-        `/largeScreen/getData/getTasktypeTop5/${this.hospitalId}`,
-        { srartTime, endTime }
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmBuilding'
+        }
       )
       this.groupWorkRatioNum = []
       this.groupWorkRatioName = []
-      result.list.forEach(item => {
-        this.groupWorkRatioNum.push(item[1]) // 获取到的数据
-        this.groupWorkRatioName.push(item[0]) // 获取到的名称
+      result.data = result.data || []
+      result.data.forEach(item => {
+        this.groupWorkRatioNum.push(item.total || 0) // 获取到的数据
+        this.groupWorkRatioName.push(item.name || '') // 获取到的名称
       })
       console.log(this.groupWorkRatioName)
       this.draw()
@@ -167,8 +176,13 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
         this.getData()
-      }, timer4)
+      }, timerCommon)
     }
   },
   mounted () {
@@ -182,7 +196,7 @@ export default {
 
 <style lang="less">
 .time-utilization {
-  height: 2.1375rem;
+  height: 3.7rem;
   margin: 0 auto;
 }
 </style>

src/components/TodayWorkOrder.vue

@@ -4,18 +4,16 @@
 
 <script>
 import echarts from 'echarts'
-import { post, timer6 } from './../http/http'
+import { post, timerCommon } from './../http/http'
 export default {
   name: 'TodayWorkOrder',
-  inject: ['hospitalId'],
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
   data () {
     return {
+      sign: 'price',
       timer: null,
       myChart: null,
-      todayWorkOrder: [], // 当日工单趋势图
-      todayGroupWorkOrderNum1: [], // 当日工单趋势图,图表数据,工单趋势
-      todayGroupWorkOrderNum2: [], // 当日工单趋势图,图表数据,执行中趋势
-      todayGroupWorkOrderNum3: [], // 当日工单趋势图,图表数据,超时工单趋势
+      todayGroupWorkOrderNum1: [], // 当日工单趋势图,图表数据
       todayGroupWorkOrderTimes: [] // 当日工单趋势图,图表数据,时间点
     }
   },
@@ -25,14 +23,7 @@ export default {
       this.myChart = echarts.init(this.$refs.TodayWorkOrder)
 
       const option = {
-        color: ['#49b856', '#c27073', '#c2ab70'],
-        legend: {
-          data: ['工单趋势', '执行中趋势', '超时工单趋势'],
-          textStyle: {
-            color: '#d4d6d7', // 更改坐标轴文字颜色
-            fontSize: 12 // 更改坐标轴文字大小
-          }
-        },
+        color: ['rgba(64, 93, 249, 1)'],
         tooltip: {
           trigger: 'axis',
           axisPointer: {
@@ -43,10 +34,10 @@ export default {
           }
         },
         grid: {
-          left: '2%',
-          top: '13%',
-          bottom: '10%',
-          right: '2%',
+          left: '20',
+          top: '30',
+          bottom: '20',
+          right: '40',
           containLabel: true
         },
         xAxis: [
@@ -100,36 +91,12 @@ export default {
             //   position: 'top'
             // },
             areaStyle: {
-              color: '#49b856'
+              color: 'rgba(64, 93, 249, 0.20)'
             },
             emphasis: {
               focus: 'series'
             },
             data: this.todayGroupWorkOrderNum1
-          },
-          {
-            name: '执行中趋势',
-            smooth: true,
-            type: 'line',
-            areaStyle: {
-              color: '#c27073'
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.todayGroupWorkOrderNum2
-          },
-          {
-            name: '超时工单趋势',
-            smooth: true,
-            type: 'line',
-            areaStyle: {
-              color: '#c2ab70'
-            },
-            emphasis: {
-              focus: 'series'
-            },
-            data: this.todayGroupWorkOrderNum3
           }
         ]
       }
@@ -137,26 +104,32 @@ export default {
     },
     // 获取数据
     async getData () {
-      const srartTime = this.$moment().format('YYYY-MM-DD') // 今天
-      const endTime = this.$moment().format('YYYY-MM-DD') // 今天
+      this.$emit('signEmit', this.sign)
+      const startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      const endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+
       const result = await post(
-        `/largeScreen/getData/getTendencyList/${this.hospitalId}`,
-        { srartTime, endTime }
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmReqCount'
+        }
       )
-      this.todayWorkOrder = []
       this.todayGroupWorkOrderNum1 = []
-      this.todayGroupWorkOrderNum2 = []
-      this.todayGroupWorkOrderNum3 = []
       this.todayGroupWorkOrderTimes = []
-      this.todayWorkOrder = result.todayWorkOrder[0]
-      this.$emit('todayWorkOrderHandle', JSON.stringify(this.todayWorkOrder))
-      result.list.forEach(item => {
-        this.todayGroupWorkOrderTimes.push(
-          this.$moment(item[0]).format('HH') + ':00'
-        ) // 获取到的数据,时间点
-        this.todayGroupWorkOrderNum1.push(item[1]) // 获取到的数据,工单趋势
-        this.todayGroupWorkOrderNum2.push(item[2]) // 获取到的数据,执行中趋势
-        this.todayGroupWorkOrderNum3.push(item[3]) // 获取到的数据,超时工单趋势
+      result.data = result.data || []
+      result.data.forEach(item => {
+        this.todayGroupWorkOrderTimes.push(item.date || '') // 获取到的数据,时间点
+
+        if (this.sign === 'price') {
+          this.todayGroupWorkOrderNum1.push(item.price || 0) // 获取到的数据
+        } else if (this.sign === 'order') {
+          this.todayGroupWorkOrderNum1.push(item.total || 0) // 获取到的数据
+        }
       })
       this.draw()
       this.polling()
@@ -165,8 +138,13 @@ export default {
     polling () {
       clearTimeout(this.timer)
       this.timer = setTimeout(() => {
+        if (this.sign === 'price') {
+          this.sign = 'order'
+        } else if (this.sign === 'order') {
+          this.sign = 'price'
+        }
         this.getData()
-      }, timer6)
+      }, timerCommon)
     }
   },
   mounted () {
@@ -180,7 +158,7 @@ export default {
 
 <style lang="less">
 .today-work-order {
-  height: 2.3875rem;
+  height: 3.7rem;
   margin: 0 auto;
 }
 </style>

src/components/UserPrice.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="group-praise">
+    <div class="group-praise__content">
+      <div class="group-praise__circle">
+        <header class="group-praise__title">
+          <svg class="icon svg-icon" aria-hidden="true">
+            <use xlink:href="#transport-top1"></use>
+          </svg>
+        </header>
+        <div class="group-praise__circleContent">
+          {{ dataInfo[1] ? dataInfo[1].name : '' }}
+        </div>
+        <div class="group-praise__circleContent">
+          {{ dataInfo[1] ? (dataInfo[1].price || 0) + '元' : '' }}
+        </div>
+      </div>
+
+      <div class="group-praise__circle">
+        <header class="group-praise__title">
+          <svg class="icon svg-icon" aria-hidden="true">
+            <use xlink:href="#transport-top31"></use>
+          </svg>
+        </header>
+        <div class="group-praise__circleContent">
+          {{ dataInfo[0] ? dataInfo[0].name : '' }}
+        </div>
+        <div class="group-praise__circleContent">
+          {{ dataInfo[0] ? (dataInfo[0].price || 0) + '元' : '' }}
+        </div>
+      </div>
+
+      <div class="group-praise__circle">
+        <header class="group-praise__title">
+          <svg class="icon svg-icon" aria-hidden="true">
+            <use xlink:href="#transport-top5"></use>
+          </svg>
+        </header>
+        <div class="group-praise__circleContent">
+          {{ dataInfo[2] ? dataInfo[2].name : '' }}
+        </div>
+        <div class="group-praise__circleContent">
+          {{ dataInfo[2] ? (dataInfo[2].price || 0) + '元' : '' }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { post, timerCommon } from './../http/http'
+export default {
+  name: 'UserPrice',
+  inject: ['parentDutyId', 'hosId', 'dutyId'],
+  data () {
+    return {
+      sign: 'lastWeek',
+      timer: null,
+      dataInfo: []
+    }
+  },
+  methods: {
+    // 获取数据
+    async getData () {
+      this.$emit('signEmit', this.sign)
+      let startTime
+      let endTime
+
+      if (this.sign === 'lastWeek') {
+        startTime = this.$moment().subtract(1, 'week').startOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
+      } else if (this.sign === 'lastMonth') {
+        startTime = this.$moment().subtract(1, 'month').startOf('month').format('YYYY-MM-DD HH:mm:ss')
+        endTime = this.$moment().subtract(1, 'month').endOf('month').format('YYYY-MM-DD HH:mm:ss')
+      }
+      const result = await post(
+        '/itsm/report/index',
+        {
+          parentDutyId: this.parentDutyId,
+          hosId: this.hosId,
+          dutyId: this.dutyId,
+          startDate: startTime,
+          endDate: endTime,
+          type: 'itsmUserPrice'
+        }
+      )
+      const dataInfo = result.data || []
+      dataInfo.sort((a, b) => b.price - a.price)
+      this.dataInfo = dataInfo
+      this.polling()
+    },
+    // 轮询请求
+    polling () {
+      clearTimeout(this.timer)
+      this.timer = setTimeout(() => {
+        if (this.sign === 'lastWeek') {
+          this.sign = 'lastMonth'
+        } else if (this.sign === 'lastMonth') {
+          this.sign = 'lastWeek'
+        }
+        this.getData()
+      }, timerCommon)
+    }
+  },
+  mounted () {
+    this.getData()
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.group-praise {
+  height: 2.6625rem;
+  .group-praise__content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 .2rem;
+    height: 100%;
+    .group-praise__title {
+      color: #fff;
+      font-size: .2rem;
+      text-align: center;
+      .svg-icon{
+        width: .8rem;
+        height: .8rem;
+      }
+    }
+    .group-praise__circleContent {
+      color: #fff;
+      font-size: .3rem;
+      margin-top: .1rem;
+      text-align: center;
+      height: .375rem;
+    }
+    .group-praise__circle {
+      width: 1.425rem;
+    }
+  }
+}
+</style>

src/http/http.js

@@ -4,17 +4,7 @@ const protocolName = document.location.protocol// http协议
 const path = process.env.NODE_ENV === 'production' ? protocolName + '//' + domainName + '/service' : '/service'
 axios.defaults.baseURL = path
 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
-export const timer1 = 30000// AppToday
-export const timer2 = 300000// GroupPraise
-export const timer3 = 300000// GroupPerformance
-export const timer4 = 300000// TimeUtilization
-export const timer5 = 30000// OnDutyToday
-export const timer6 = 30000// TodayWorkOrder
-export const timer7 = 30000// ErrorWorkOrder
-export const timer8 = 300000// PointsRanking
-export const timer9 = 300000// OnTimeArrivalRate
-export const timer10 = 300000// BusinessTypeRatio
-export const timer11 = 300000// DeliveryRate
+export const timerCommon = 15000
 // post请求
 export function post (url, data = {}) {
   url = path + url

src/main.js

@@ -7,12 +7,21 @@ import moment from 'moment'
 // 适配flex
 import '@/assets/js/flexible.js'
 
+// iconfont
+import '@/assets/font/iconfont.js'
+
 // 引入全局css
 import './assets/less/style.less'
 
 Vue.use(fullScreenContainer)
 Vue.prototype.$moment = moment
 
+// 分钟转为时分
+Vue.filter('formatHourMinute', (value) => {
+  if (!value) return '0分'
+  return moment.utc(value * 60 * 1000).format('HH时mm分')
+})
+
 Vue.config.productionTip = false
 console.info('v2.4.7')
 

src/router/index.js

@@ -4,7 +4,7 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [{
-  path: '/:id',
+  path: '/:queryType/:hosId?/:dutyId?',
   name: 'index',
   meta: {
     title: '大屏端'

src/views/AppIndex.vue

@@ -7,82 +7,102 @@
         <!-- 主体 -->
         <main class="app-index__main">
           <aside class="app-index__left">
-            <!-- 昨日积分前三人员 -->
+            <!-- 工单实时动态 -->
             <div class="app-item">
-              <h2 class="app-item__header">昨日积分前三人员</h2>
-              <GroupPraise></GroupPraise>
+              <h2 class="app-item__header app-item__header--big">工单实时动态</h2>
+              <GroupPraise class="app-item__body"></GroupPraise>
             </div>
-            <!-- 科室当日建单TOP10 -->
+            <!-- 科室维修量TOP5 -->
             <div class="app-item">
-              <h2 class="app-item__header">科室当日建单TOP10</h2>
-              <GroupPerformance></GroupPerformance>
-            </div>
-            <!-- 当日任务类型TOP5 -->
-            <div class="app-item">
-              <h2 class="app-item__header">当日任务类型TOP5</h2>
-              <TimeUtilization></TimeUtilization>
+              <h2 class="app-item__header app-item__header--big">
+                科室维修量TOP5
+                <ul class="app-item__headerData">
+                  <li class="app-item__headerDataItem" :class="{ active: pointsRankingSign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: pointsRankingSign == 'lastMonth' }">上月</li>
+                </ul>
+              </h2>
+              <PointsRanking class="app-item__body" @signEmit="pointsRankingSign = $event"></PointsRanking>
             </div>
-          </aside>
-          <article class="app-index__center">
-            <!-- 今日各人员工作情况 -->
+            <!-- 科室费用TOP5 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                今日各人员工作情况
+                科室费用TOP5
                 <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem">总当班人数<em>{{todayBeOnDuty[0]}}/{{todayBeOnDuty[1]}}</em></li>
+                  <li class="app-item__headerDataItem" :class="{ active: deptPriceSign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: deptPriceSign == 'lastMonth' }">上月</li>
                 </ul>
               </h2>
-              <OnDutyToday @todayBeOnDutyHandle="todayBeOnDutyHandle"></OnDutyToday>
+              <DeptPrice class="app-item__body" @signEmit="deptPriceSign = $event"></DeptPrice>
             </div>
-            <!-- 当日工单趋势图 -->
+          </aside>
+          <article class="app-index__center">
+            <!-- 上周/上月汇总数据 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                当日工单趋势图
+                上周汇总数据
                 <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem">执行中<em>{{todayWorkOrder[0]}}</em></li>
-                  <li class="app-item__headerDataItem">已超时<em>{{todayWorkOrder[1]}}</em></li>
-                  <li class="app-item__headerDataItem">已完成<em>{{todayWorkOrder[2]}}</em></li>
+                  <li class="app-item__headerDataItem" :class="{ active: onDutyTodaySign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: onDutyTodaySign == 'lastMonth' }">上月</li>
                 </ul>
               </h2>
-              <TodayWorkOrder @todayWorkOrderHandle = "todayWorkOrderHandle"></TodayWorkOrder>
+              <OnDutyToday class="app-item__body" @signEmit="onDutyTodaySign = $event"></OnDutyToday>
             </div>
-            <!-- 今日工单异常情况 -->
+            <!-- 报修数量趋势图 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                今日工单异常情况
+                报修数量趋势图
                 <ul class="app-item__headerData">
-                  <li class="app-item__headerDataItem app-item__headerDataItem--error">异常<em>{{todayAbnormityWorkOrder[0]}}</em></li>
-                  <li class="app-item__headerDataItem app-item__headerDataItem--timeout">超时<em>{{todayAbnormityWorkOrder[1]}}</em></li>
+                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'price' }">费用</li>
+                  <li class="app-item__headerDataItem" :class="{ active: todayWorkOrderSign == 'order' }">工单</li>
                 </ul>
               </h2>
-              <ErrorWorkOrder @todayAbnormityWorkOrderHandle="todayAbnormityWorkOrderHandle"></ErrorWorkOrder>
+              <TodayWorkOrder class="app-item__body" @signEmit="todayWorkOrderSign = $event"></TodayWorkOrder>
             </div>
-            <!-- 近三十天各类型工单按时送达率趋势 -->
+            <!-- 楼栋故障分布 -->
             <div class="app-item">
               <h2 class="app-item__header app-item__header--big">
-                近三十天各类型工单按时送达率趋势
+                楼栋故障分布
                 <ul class="app-item__headerData">
-                  <li @click="currentDictionary = item[0]" v-for="item in dictionary" :key="item[0]" class="app-item__headerDataItem app-item__headerDataItem--normal" :class="{'app-item__headerDataItem--active':currentDictionary === item[0]}"><span>{{item[1]}}</span></li>
+                  <li class="app-item__headerDataItem" :class="{ active: timeUtilizationSign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: timeUtilizationSign == 'lastMonth' }">上月</li>
                 </ul>
               </h2>
-              <DeliveryRate @changeCurrentDictionary="changeCurrentDictionary" @dictionaryHandle="dictionaryHandle" :currentDictionary="currentDictionary"></DeliveryRate>
+              <TimeUtilization class="app-item__body" @signEmit="timeUtilizationSign = $event"></TimeUtilization>
             </div>
           </article>
           <aside class="app-index__right">
-            <!-- 近三十天人员积分排行榜 -->
+            <!-- 维修人员费用Top3 -->
             <div class="app-item">
-              <h2 class="app-item__header">近三十天人员积分排行榜</h2>
-              <PointsRanking></PointsRanking>
+              <h2 class="app-item__header app-item__header--big">
+                维修人员费用TOP3
+                <ul class="app-item__headerData">
+                  <li class="app-item__headerDataItem" :class="{ active: userPriceSign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: userPriceSign == 'lastMonth' }">上月</li>
+                </ul>
+              </h2>
+              <UserPrice class="app-item__body" @signEmit="userPriceSign = $event"></UserPrice>
             </div>
-            <!-- 近三十天人员按时到达率排行榜 -->
+            <!-- 故障现象占比 -->
             <div class="app-item">
-              <h2 class="app-item__header">近三十天人员按时到达率排行榜</h2>
-              <OnTimeArrivalRate></OnTimeArrivalRate>
+              <h2 class="app-item__header app-item__header--big">
+                故障现象占比
+                <ul class="app-item__headerData">
+                  <li class="app-item__headerDataItem" :class="{ active: categoryProportionSign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: categoryProportionSign == 'lastMonth' }">上月</li>
+                </ul>
+              </h2>
+              <CategoryProportion class="app-item__body" @signEmit="categoryProportionSign = $event"></CategoryProportion>
             </div>
-            <!-- 近三十天各业务类型占比 -->
+            <!-- 费用占比 -->
             <div class="app-item">
-              <h2 class="app-item__header">近三十天各业务类型占比</h2>
-              <BusinessTypeRatio></BusinessTypeRatio>
+              <h2 class="app-item__header app-item__header--big">
+                费用占比
+                <ul class="app-item__headerData">
+                  <li class="app-item__headerDataItem" :class="{ active: priceProportionSign == 'lastWeek' }">上周</li>
+                  <li class="app-item__headerDataItem" :class="{ active: priceProportionSign == 'lastMonth' }">上月</li>
+                </ul>
+              </h2>
+              <PriceProportion class="app-item__body" @signEmit="priceProportionSign = $event"></PriceProportion>
             </div>
           </aside>
         </main>
@@ -94,128 +114,131 @@
 <script>
 import AppHeader from '../components/AppHeader.vue'
 import GroupPraise from '../components/GroupPraise.vue'
-import GroupPerformance from '../components/GroupPerformance.vue'
 import OnDutyToday from '../components/OnDutyToday.vue'
 import TodayWorkOrder from '../components/TodayWorkOrder.vue'
 import PointsRanking from '../components/PointsRanking.vue'
-import BusinessTypeRatio from '../components/BusinessTypeRatio.vue'
-import ErrorWorkOrder from '../components/ErrorWorkOrder.vue'
-import DeliveryRate from '../components/DeliveryRate.vue'
+import DeptPrice from '../components/DeptPrice.vue'
 import TimeUtilization from '../components/TimeUtilization.vue'
-import OnTimeArrivalRate from '../components/OnTimeArrivalRate.vue'
+import UserPrice from '../components/UserPrice.vue'
+import CategoryProportion from '../components/CategoryProportion.vue'
+import PriceProportion from '../components/PriceProportion.vue'
 export default {
   name: 'AppIndex',
   components: {
     AppHeader, // 头部
-    GroupPraise, // 昨日积分前三人员
-    GroupPerformance, // 科室当日建单TOP10
-    OnDutyToday, // 今日各人员工作情况
-    TodayWorkOrder, // 当日工单趋势图
-    PointsRanking, // 近三十天人员积分排行榜
-    BusinessTypeRatio, // 近三十天各业务类型占比
-    ErrorWorkOrder, // 今日工单异常情况
-    DeliveryRate, // 近三十天各类型工单按时送达率趋势
-    TimeUtilization, // 当日任务类型TOP5
-    OnTimeArrivalRate// 近三十天人员按时到达率排行榜
+    GroupPraise, // 工单实时动态
+    OnDutyToday, // 上周汇总数据
+    TodayWorkOrder, // 报修数量趋势图
+    PointsRanking, // 科室维修量TOP5
+    DeptPrice, // 科室费用TOP5
+    TimeUtilization, // 楼栋故障分布
+    UserPrice, // 维修人员费用TOP5
+    CategoryProportion, // 故障现象占比
+    PriceProportion // 费用占比
   },
   data () {
     return {
-      todayBeOnDuty: [], // 今日各人员工作情况
-      todayWorkOrder: [], // 当日工单趋势图
-      todayAbnormityWorkOrder: [], // 今日工单异常情况
-      dictionary: [], // 近三十天各类型工单按时送达率趋势
-      currentDictionary: -1// 近三十天各类型工单按时送达率趋势(id)
+      pointsRankingSign: 'lastWeek',
+      deptPriceSign: 'lastWeek',
+      onDutyTodaySign: 'lastWeek',
+      todayWorkOrderSign: 'price',
+      timeUtilizationSign: 'lastWeek',
+      userPriceSign: 'lastWeek',
+      categoryProportionSign: 'lastWeek',
+      priceProportionSign: 'lastWeek'
+
     }
   },
   methods: {
-    // 今日各人员工作情况
-    todayBeOnDutyHandle (value) {
-      this.todayBeOnDuty = JSON.parse(value)
-    },
-    // 当日工单趋势图
-    todayWorkOrderHandle (value) {
-      this.todayWorkOrder = JSON.parse(value)
-    },
-    // 今日工单异常情况
-    todayAbnormityWorkOrderHandle (value) {
-      this.todayAbnormityWorkOrder = JSON.parse(value)
-    },
-    // 近三十天各类型工单按时送达率趋势
-    dictionaryHandle (value) {
-      this.dictionary = JSON.parse(value)
-      this.currentDictionary = this.dictionary[0][0]
-      this.dictionary.forEach(item => {
-        if (item[0] === 255) {
-          item[1] = '转运'
-        } else if (item[0] === 256) {
-          item[1] = '标本'
-        } else if (item[0] === 257) {
-          item[1] = '药品'
-        } else if (item[0] === 258) {
-          item[1] = '静配'
-        } else if (item[0] === 259) {
-          item[1] = '其他'
-        } else if (item[0] === 260) {
-          item[1] = '陪检'
-        } else if (item[0] === 380) {
-          item[1] = '轮巡'
-        }
-      })
-    },
-    // 近三十天各类型工单按时送达率趋势---修改索引
-    changeCurrentDictionary (value) {
-      this.currentDictionary = value
-    }
+
   },
   provide () {
+    console.log('params', this.$route.params)
+    let hosId, dutyId, parentDutyId
+    if (this.$route.params.queryType === '1') {
+      hosId = undefined
+      dutyId = undefined
+      parentDutyId = undefined
+    } else if (this.$route.params.queryType === '2') {
+      hosId = +this.$route.params.hosId
+      dutyId = undefined
+      parentDutyId = undefined
+    } else if (this.$route.params.queryType === '3') {
+      hosId = undefined
+      dutyId = +this.$route.params.dutyId
+      parentDutyId = undefined
+    } else if (this.$route.params.queryType === '4') {
+      hosId = undefined
+      dutyId = undefined
+      parentDutyId = +this.$route.params.dutyId
+    }
+    console.log(parentDutyId, hosId, dutyId)
     return {
-      hospitalId: this.$route.params.id
+      parentDutyId,
+      hosId,
+      dutyId
     }
   },
   mounted () {
-    // setTimeout(() => {
-    //   this.loading = false
-    // }, 1000)
+
   }
 }
 </script>
 <style lang="less">
 .app-index {
   color: #fff;
-  background-color: #000;
+  background-color: #062B4D;
   width: 100vw;
   height: 100vh;
   .bg {
     padding: 0.2rem;
-    background-image: url("../assets/img/bg.jpg");
-    background-size: cover;
-    background-position: center center;
   }
   // 各模块公共头部
   .app-item {
     position: relative;
+    margin-top: .1rem;
+    border: 1px solid #265A8A;
+    border-radius: .1rem;
+    overflow: hidden;
+    &:first-of-type{
+      margin-top: 0;
+    }
     .app-item__header {
-      height: 0.3375rem;
-      font-size: 0.25rem;
+      height: .525rem;
+      font-size: .325rem;
       color: #fff;
-      background: url("./../assets/img/image_title01.png") left bottom no-repeat;
-      background-size: 100%;
+      background: linear-gradient( 90deg, #485E8D 0%, #1E3C64 61%, #071F34 100%);
       display: flex;
       justify-content: space-between;
+      align-items: center;
+      line-height: 1;
+      padding: 0 .125rem 0 .2rem;
       &.app-item__header--big{
-        background: url("./../assets/img/image_title02.png") left bottom no-repeat;
-        background-size: 100%;
         .app-item__headerData{
           display: flex;
           justify-content: space-between;
           align-content: center;
           font-size: .2rem;
           color: #fff;
-          margin-right: 1.6625rem;
-          margin-top: .05rem;
           .app-item__headerDataItem{
-            margin-left: .3rem;
+            // cursor: pointer;
+            margin-left: .0625rem;
             position: relative;
+            color: #C8C8C8;
+            font-size: .15rem;
+            width: .525rem;
+            height: .3rem;
+            border-radius: .1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            &.active{
+              border: 1px solid #265A8A;
+              background-color: #14334F;
+            }
+            &:first-of-type{
+              margin-left: 0;
+            }
             &.app-item__headerDataItem--normal span{
               color: rgba(255, 255, 255, 0.6);
               cursor: pointer;
@@ -247,17 +270,19 @@ export default {
     }
   }
   // 主体
-  .app-index__main {
+  .app-index__main{
     display: flex;
     justify-content: space-between;
     .app-index__left {
-      width: 24.3%;
+      width: 6.125rem;
+      margin-right: .1rem;
     }
     .app-index__center {
-      width: 49.5%;
+      flex: 1;
+      margin-right: .1rem;
     }
     .app-index__right {
-      width: 24.3%;
+      width: 5.15rem;
     }
   }
 }