ccm

hb_client/package.json

@@ -64,9 +64,9 @@
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
     "mockjs": "^1.1.0",
-    "node-sass": "^4.13.1",
+    "node-sass": "^6.0.1",
     "runjs": "^4.3.2",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^10.0.1",
     "script-ext-html-webpack-plugin": "^2.1.5",
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",

hb_client/src/App.vue

@@ -69,4 +69,27 @@ export default {
   #loginFaceWrap .el-dialog{
     width: 780px!important;height: 720px!important;
   }
+  .el-table th.el-table__cell{
+    background-color: rgb(246,247,252);
+  }
+
+
+  .el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar{
+    width: 5px!important;
+    background: #eee!important;
+}
+
+.el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3)!important;
+    border-radius: 3px!important;
+}
+
+.el-table__body-wrapper.is-scrolling-none::-webkit-scrollbar-thumb {
+    border-radius: 3px!important;
+    height: 100px!important;
+    background-color: #ccc!important;
+}
+.ganttLeftMenu .el-table .el-table__row--level-0 .cell{
+  font-weight: bold!important;;
+}
 </style>

hb_client/src/assets/scss/style.scss

@@ -16,7 +16,7 @@ html {
 body {
   font-family: Arial, Helvetica, sans-serif;
   //line-height: 1.2em;
-  background-color: #f1f1f1;
+  background-color: #e9ecf5;
   margin: 0;
   padding: 0;
 }

hb_client/src/components/Gantt/dashGantt.vue

@@ -40,6 +40,7 @@
       <leftMenu
         :list="list"
         ref="leftMenu"
+        class="ganttLeftMenu"
         :BGScrollTop.sync="BGScrollTop"
         @TableScrollTop="TableScrollTop"
         @handlerRowClick="handlerRowClick"
@@ -1400,7 +1401,7 @@
   .searchWrap{
     position: absolute;
     z-index: 2000;
-    top: -35px;
+    top: -40px;
     right: 10px;
     display: flex;
   }
@@ -1415,4 +1416,21 @@
     height: 30px!important;
     line-height: 30px!important;
   }
+
+
+  ::-webkit-scrollbar {
+    width: 5px;
+    background: #eee;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    height: 100px;
+    background-color: #ccc;
+}
 </style>

hb_client/src/layout/components/Navbar.vue

@@ -6,9 +6,57 @@
 
     <div class="right-menu">
       <template>
+        <!-- 待办 -->
         <el-badge :value="count.total_count" class="item right-menu-item navbarBadge" @click.native="gotoTicketPage">
-          <el-icon class="el-icon-s-management" style="font-size: 25px;color: #409EFF;padding-top: 12px;cursor: pointer;"></el-icon>
+          <el-icon class="el-icon-s-management elIconStyle"></el-icon>
         </el-badge>
+        <!-- 提醒 -->
+        <el-badge value="···" class="item right-menu-item navbarBadge" @click.native="showTheWarning">
+          <el-icon class="el-icon-chat-dot-round elIconStyle" style="color: #ffcc40;"></el-icon>
+        </el-badge>
+        <div @click="closeWarning" class="warningWrap" v-if="warningShow">
+          <div @click.stop="handleClidk" class="warningContainer">
+            <div class="titleWrap">警告列表
+              <el-select
+                v-model="activeName"
+                placeholder="提醒类别"
+                clearable
+                style="width: 150px;position: absolute;right: 20px;"
+                class="filter-item"
+                @change="handleFilter(activeName)"
+              >
+                <el-option
+                  v-for="item in optionsList"
+                  :key="item"
+                  :label="item"
+                  :value="item"
+                />
+              </el-select>
+            </div>
+            <div class="listWrap">
+              <div style="height:70vh;overflow-y:scroll ;">
+                <div class="listItemWrap" v-for="item in warningList">
+                  <div class="listItem">
+                    <span v-if="activeName=='库存警告'"> {{item.name}}({{item.unit}})</span>
+                    <span v-if="activeName=='临近交货'"> {{item.name}}{{item.number}}</span>
+                    <span v-if="activeName=='过期提醒'"> {{item.name}}({{item.unit}})</span>
+                    <span v-if="activeName=='设备检测'"> {{item.name}}({{item.number}})</span>
+                    <span v-if="activeName=='任务到期'"> {{item.name}}{{item.number}}</span>
+                    
+                    <span class="warningType" v-if="activeName=='库存警告'">低于安全库存</span>
+                    <span class="warningType" v-else-if="activeName=='临近交货'">临近交货日期</span>
+                    <span class="warningType" v-else-if="activeName=='过期提醒'">已过期</span>
+                    <span class="warningType" v-if="item.warningType==1&&activeName=='设备检测'">接近校准日期</span>
+                    <span class="warningType" v-if="item.warningType==2&&activeName=='设备检测'">已过校准日期</span>
+                    <span class="warningType" v-if="item.warningType==1&&activeName=='任务到期'">接近截止日期</span>
+                    <span class="warningType" v-if="item.warningType==2&&activeName=='任务到期'">已过截止日期</span>
+                  </div>  
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
         <search id="header-search" class="right-menu-item" />
         <el-tooltip content="全局组件大小" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
@@ -49,16 +97,26 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from 'vuex';
-import Breadcrumb from '@/components/Breadcrumb'
+import {getMaterialList} from "@/api/mtm";
-import Hamburger from '@/components/Hamburger'
+import {getOrderList} from "@/api/sam";
-import SizeSelect from '@/components/SizeSelect'
+import {getmaterialbatchList} from "@/api/inm";
-import Search from '@/components/HeaderSearch'
+import {getProductionplanList} from "@/api/pm";
+import {getpEquipmentList} from "@/api/equipment";
+import Breadcrumb from '@/components/Breadcrumb';
+import Hamburger from '@/components/Hamburger';
+import SizeSelect from '@/components/SizeSelect';
+import Search from '@/components/HeaderSearch';
 
 export default {
   data(){
     return{
-      // name:''
+      warningTotal:0,
+      warningList:[],
+      warningShow:false,
+      warningPageSize:500,
+      activeName:'库存警告',
+      optionsList:['库存警告','临近交货','过期提醒','设备检测','任务到期']
     }
   },
   components: {
@@ -84,6 +142,122 @@ export default {
         this.$router.push({name:'ticket',params:{}})
       }
     },
+    handleClidk(){},
+    showTheWarning(){
+      let that = this;
+      that.warningShow = true;
+      getMaterialList({page: 1, page_size: that.warningPageSize, tag: 'low_inm'}).then((response) => {
+        if (response.data) {
+          that.warningList = response.data.results;
+          that.warningTotal = response.data.count;
+        }
+      });
+    },
+    closeWarning(){
+      this.warningShow = false;
+    },
+    handleFilter(activeName) {
+        let that = this;
+        console.log(activeName)
+        if (activeName === '库存警告') {
+          getMaterialList({page: 1, page_size: that.warningPageSize, tag: 'low_inm'}).then((response) => {
+            if (response.data) {
+              debugger;
+              that.warningList = response.data.results;
+              that.warningTotal = response.data.count;
+            }
+          });
+        } else if (activeName === '临近交货') {
+          getOrderList({page: 1, page_size: that.warningPageSize, tag: 'near_delivery'}).then((response) => {
+            if (response.data) {
+              debugger;
+              that.warningList = response.data.results;
+              that.warningTotal = response.data.count;
+            }
+          });
+        } else if (activeName === '过期提醒') {
+          getmaterialbatchList({page: 1, page_size: that.warningPageSize, tag: 'expired'}).then((response) => {
+            if (response.data) {
+              let warningList = response.data.results;
+              let arr = [];
+              warningList.forEach(item => {
+                let obj = new Object();
+                obj.name = item.material_.name;
+                obj.unit = item.material_.unit;
+                obj.number = item.material_.number;
+                obj.id = item.id;
+                obj.expiration_date = item.expiration_date;
+                arr.push(obj)
+              });
+              that.warningList = arr;
+              that.warningTotal = response.data.count;
+            }
+          });
+        } else if (activeName === '设备检测') {
+          that.warningPageSize = 100;
+          let warningList = [];
+          getpEquipmentList({page: 0, tag: 'near_done'}).then((response) => {
+            if (response.data) {
+              let results = response.data;
+              if (results.length > 0) {
+                results.forEach(item => {
+                  let obj = new Object();
+                  obj = item;
+                  obj.warningType = 1;
+                  warningList.push(obj);
+                });
+              }
+              getpEquipmentList({page: 0, tag: 'out_done'}).then((res) => {
+                if (response.data) {
+                  let resData = res.data;
+                  if (resData.length > 0) {
+                    resData.forEach(item => {
+                      let obj1 = new Object();
+                      obj1 = item;
+                      obj1.warningType = 2;
+                      warningList.push(obj1);
+                    });
+                  }
+                  that.warningList = warningList;
+                  that.warningTotal = warningList.length;
+                }
+              });
+            }
+          });
+        } else if (activeName === '任务到期') {
+          that.warningPageSize = 100;
+          let warningList = [];
+          getProductionplanList({page: 0, tag: 'near_done'}).then((response) => {
+            if (response.data) {
+              let results = response.data;
+              if (results.length > 0) {
+                results.forEach(item => {
+                  let obj = new Object();
+                  obj = item;
+                  obj.warningType = 1;
+                  warningList.push(obj);
+                });
+              }
+              getProductionplanList({page: 0, tag: 'out_done'}).then((res) => {
+                if (response.data) {
+                  let resData = res.data;
+                  if (resData.length > 0) {
+                    resData.forEach(item => {
+                      let obj1 = new Object();
+                      obj1 = item;
+                      obj1.warningType = 2;
+                      warningList.push(obj1);
+                    });
+                  }
+                  that.warningList = warningList;
+                  that.warningTotal = warningList.length;
+                }
+              });
+            }
+          });
+        }
+      },
+
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
@@ -96,6 +270,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.elIconStyle{
+  font-size: 25px;
+  color: #409EFF;
+  padding-top: 12px;
+  cursor: pointer;
+}
 .navbar {
   height: 50px;
   overflow: hidden;
@@ -171,5 +351,64 @@ export default {
       }
     }
   }
+}
+  .warningWrap{
+    position: fixed;
+    top:0;
+    right:0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1000;
+    background-color: rgba(255, 255, 255, .1);
+  }
+  .warningContainer{
+    position: absolute;
+    top:10vh;
+    right: 30px;
+    width: 20vw;
+    height: 80vh;
+    background-color: #fefefe;
+    box-shadow: 0 0 10px 10px rgba(0, 0, 0, .1);
+    border-radius: 15px;
+  }
+  .titleWrap{
+    border-bottom: 1px solid #666666;
+    padding: 5px 20px;
+    position: relative;
+  }
+  .listWrap{
+    padding: 20px 2px 20px 0;
+  }
+  .listItemWrap{
+    
+    font-size: 14px;
+    padding: 0 20px
+  }
+  .listItem{
+    display:flex;
+    justify-content:space-between;
+    border-bottom: 1px dashed #b3b3b3;
+  }
+  .warningType{
+    color:#e6a23c ;
+  }
+  .hotWarning{
+    color:#f56c6c ;
+  }
+
+::-webkit-scrollbar {
+    width: 5px;
+    background: #eee;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
+    border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 3px;
+    height: 100px;
+    background-color: #ccc;
 }
 </style>

hb_client/src/layout/components/Sidebar/Logo.vue

@@ -24,7 +24,8 @@ export default {
   },
   data() {
     return {
-      title: '航玻生产管理系统',
+      // title: '航玻生产管理系统',
+      title: '玻璃生加工生产管理系统',
       logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
     }
   }

hb_client/src/router/index.js

@@ -55,7 +55,7 @@ export const constantRoutes = [
   {
     path: '/index',
     component: () => import('@/views/bigScreen/index'),
-    meta: { title: '大屏', icon: 'bigScreen', affix: true,keepAlive: false , perms: ['bigScreen'] }
+    meta: { title: '数据中心', icon: 'bigScreen', affix: true,keepAlive: false , perms: ['bigScreen'] }
   },
   {
     path: '/changepassword',

hb_client/src/styles/index.scss

@@ -62,7 +62,7 @@ div:focus {
 
 // main-container global css
 .app-container {
-  padding: 2px;
+  padding: 20px 30px;
 }
 
 .el-table--medium td,   .el-table--medium th {

hb_client/src/views/dashboard/index.vue

@@ -1,22 +1,17 @@
 <template>
   <div class="dashboard-container">
     <div class="dashboardTopCard">
-      <div class="CardTitleWrap">
+      <div class="cardsWrap" @click="toDetail('1')">
-        <span class="verticalLine"></span>
-        <span class="dashboardCardTitle">数据统计</span>
-      </div>
-      <div style="padding: 20px;overflow: hidden;">
-        <div class="cardsWrap" @click="toDetail('1')">
           <div class="svgIconWrap">
             <el-icon class="el-icon-s-order svgIcon"></el-icon>
-            <!--<svg-icon class="svgIcon" icon-class="contract"  :className="'svgIcon'"/>-->
           </div>
           <div class="totalCountWrap">
-            <span class="totalCountText">本月合同数</span>
+            
             <div class="totalCountNum">
               <span class="totalCount">{{contractTotalCurrent}}</span>
               <span>个</span>
             </div>
+            <span class="totalCountText">本月合同数</span>
           </div>
         </div>
         <div class="cardsWrap" @click="toDetail('2')">
@@ -29,11 +24,11 @@
             />
           </div>
           <div class="totalCountWrap">
-            <span class="totalCountText">本月生产订单数</span>
             <div class="totalCountNum">
               <span class="totalCount">{{orderTotalCurrent}}</span>
               <span>个</span>
             </div>
+            <span class="totalCountText">本月生产订单数</span>
           </div>
         </div>
         <div class="cardsWrap" @click="toDetail('3')">
@@ -41,11 +36,11 @@
             <el-icon class="el-icon-s-operation svgIcon"></el-icon>
           </div>
           <div class="totalCountWrap">
-            <span class="totalCountText">本月在制任务</span>
             <div class="totalCountNum">
               <span class="totalCount">{{planTotalCurrent}}</span>
               <span>个</span>
             </div>
+            <span class="totalCountText">本月在制任务</span>
           </div>
         </div>
         <div class="cardsWrap" @click="toDetail('4')">
@@ -53,11 +48,11 @@
             <el-icon class="el-icon-s-claim svgIcon"></el-icon>
           </div>
           <div class="totalCountWrap">
-            <span class="totalCountText">本月交付产品</span>
             <div class="totalCountNum">
               <span class="totalCount">{{selledTotalCurrent}}</span>
               <span>个</span>
             </div>
+            <span class="totalCountText">本月交付产品</span>
           </div>
         </div>
         <div class="cardsWrap" @click="toDetail('5')">
@@ -65,124 +60,129 @@
             <el-icon class="el-icon-error svgIcon"></el-icon>
           </div>
           <div class="totalCountWrap">
-            <span class="totalCountText">本月不合格产品</span>
             <div class="totalCountNum">
               <span class="totalCount">{{notokTotalCurrent}}</span>
               <span>个</span>
             </div>
+            <span class="totalCountText">本月不合格产品</span>
           </div>
         </div>
-      </div>
     </div>
-    <div id="dashboardMiddle" class="dashboardMiddle">
+    <el-row :gutter="20">
-      <div class="dashboardCardPadding">
+      <el-col :span="16">
-        <div style="width: 65%;float: left;">
+        <div id="dashboardMiddle" class="dashboardMiddle">
-          <div class="CardTitleWrap">
-            <span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
-          </div>
-          <div>
-            <gantt
-              v-if="proList.length>0"
-              style="position: relative"
-              :proList="proList"
-              :ganttHeight="ganttHeight"
-            ></gantt>
-          </div>
-        </div>
-        <div style="width: 34%;position:relative;float: right">
-          <div class="CardTitleWrap">
-            <span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
-          </div>
-          <div class="dashboardCardHand" style="position: absolute;top: 0;right: 10px;">
-            <el-date-picker
-              v-model="chartDate"
-              type="monthrange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              range-separator="至"
-              format="yyyy 年 MM 月"
-              value-format="yyyy-MM"
-              @change="searchTimeChange('1')"
-            >
-            </el-date-picker>
-          </div>
-          <div id="chartColumn" style="width:100%;" :style="{height:ganttHeight+'px'}"></div>
-        </div>
-      </div>
-    </div>
-    <el-row :gutter="5">
-      <el-col :span="8">
-        <div class="dashboardBottomRow">
-          <div class="dashboardCardHand">
-            <div class="CardTitleWrap" style="border-bottom: 0">
-              <span class="verticalLine"></span><span class="dashboardCardTitle">生产设备</span>
-              <span @click="refreshBottomTabel('1')">
-                <el-icon class="el-icon-refresh refreshIcon"></el-icon>
-              </span>
-            </div>
-            <div class="block">
-              <el-pagination
-                small
-                :pager-count="pageCounts"
-                :current-page.sync="equipmentPage"
-                :page-size="equipmentPageSize"
-                layout="prev, pager, next, jumper"
-                :total="equipmentTotal"
-                @current-change="handleEquipmentCurrentChange"
-              >
-              </el-pagination>
-            </div>
-          </div>
           <div class="dashboardCardPadding">
+            <div class="CardTitleWrap">
+          <span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
+        </div>
+        <div>
+          <gantt
+            v-if="proList.length>0"
+            style="position: relative"
+            :proList="proList"
+            :ganttHeight="ganttHeight"
+          ></gantt>
+        </div>
+          </div>
+        </div>
+        
+      </el-col>
+      <el-col :span="8">
+        <div class="dashboardMiddle">
+          <div class="dashboardCardPadding">
+            <div class="dashboardCardHand">
+              <div class="CardTitleWrap" style="border-bottom: 0">
+                <span class="verticalLine"></span><span class="dashboardCardTitle">生产设备</span>
+                <span @click="refreshBottomTabel('1')">
+                  <el-icon class="el-icon-refresh refreshIcon"></el-icon>
+                </span>
+              </div>
+              <div class="block">
+                <el-pagination
+                  small
+                  :pager-count="pageCounts"
+                  :current-page.sync="equipmentPage"
+                  :page-size="equipmentPageSize"
+                  layout="prev, pager, next, jumper"
+                  :total="equipmentTotal"
+                  @current-change="handleEquipmentCurrentChange"
+                >
+                </el-pagination>
+              </div>
+            </div>
             <el-table
-              v-loading="listLoadingEm"
+                v-loading="listLoadingEm"
-              small
+                small
-              :data="equipmentList"
+                :data="equipmentList"
-              fit
+                fit
-              stripe
+                size="mini"
-              size="mini"
+                :height="ganttHeight"
-              :height="cardTabelHeight"
+                pager-count="3"
-              pager-count="3"
+                style="border-top: 1px solid #f5f5f5;"
-              style="border-top: 1px solid #f5f5f5;"
+              >
-            >
+                <el-table-column label="序号" type="index" width="50">
-              <el-table-column label="序号" type="index" width="50">
+                </el-table-column>
-              </el-table-column>
+                <el-table-column label="设备编号" prop="number">
-              <el-table-column label="设备编号" prop="number">
+                </el-table-column>
-              </el-table-column>
+                <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
-              <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
+                </el-table-column>
-              </el-table-column>
+                <el-table-column label="设备状态" prop="material_">
-              <el-table-column label="设备状态" prop="material_">
+                  <!--type=1生产设备-->
-                <!--type=1生产设备-->
+                  <template slot-scope="scope">
-                <template slot-scope="scope">
+                    <div v-if="scope.row.type===2">
-                  <div v-if="scope.row.type===2">
+                      <el-tag v-if="scope.row.state===40" type="danger">
-                    <el-tag v-if="scope.row.state===40" type="danger">
+                        禁用
-                      禁用
+                      </el-tag>
-                    </el-tag>
+                      <el-tag v-else type="success">
-                    <el-tag v-else type="success">
+                        合格
-                      合格
+                      </el-tag>
-                    </el-tag>
+                    </div>
-                  </div>
+                    <div v-else>
-                  <div v-else>
+                      <el-tag v-if="scope.row.state===10" type="success">
-                    <el-tag v-if="scope.row.state===10" type="success">
+                        {{ state_[scope.row.state] }}
-                      {{ state_[scope.row.state] }}
+                      </el-tag>
-                    </el-tag>
+                      <el-tag v-else-if="scope.row.state===20">
-                    <el-tag v-else-if="scope.row.state===20">
+                        {{ state_[scope.row.state] }}
-                      {{ state_[scope.row.state] }}
+                      </el-tag>
-                    </el-tag>
+                      <el-tag v-else-if="scope.row.state===30" type="warning">
-                    <el-tag v-else-if="scope.row.state===30" type="warning">
+                        {{ state_[scope.row.state] }}
-                      {{ state_[scope.row.state] }}
+                      </el-tag>
-                    </el-tag>
+                      <el-tag v-else type="danger">
-                    <el-tag v-else type="danger">
+                        {{ state_[scope.row.state] }}
-                      {{ state_[scope.row.state] }}
+                      </el-tag>
-                    </el-tag>
+                    </div>
-                  </div>
+                  </template>
-                </template>
+                </el-table-column>
-              </el-table-column>
             </el-table> 
           </div>
         </div>
       </el-col>
-      <el-col :span="8">
+      <!-- <div id="chartColumn" style="width:100%;height: 500px;" :style="{height:ganttHeight+'px'}"></div> -->
+    </el-row>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="dashboardBottomRow">
+          <div class="CardTitleWrap">
+              <span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
+            </div>
+            <div class="dashboardCardHand" id="searchWrap" style="position: absolute;top: 15px;right: 20px;">
+              <el-date-picker
+                v-model="chartDate"
+                type="monthrange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                range-separator="至"
+                format="yyyy 年 MM 月"
+                value-format="yyyy-MM"
+                @change="searchTimeChange('1')"
+              >
+              </el-date-picker>
+            </div>
+            <div id="chartColumn" style="width:100%;" :style="{height:cardTabelHeight+'px'}"></div>
+          
+        </div>
+      </el-col>
+      <el-col :span="12">
         <div class="dashboardBottomRow">
           <div class="dashboardCardHand">
             <div class="CardTitleWrap" style="border-bottom: 0">
@@ -204,131 +204,53 @@
               </el-pagination>
             </div>
           </div>
-          <div
+          <div style="display: flex;">
-            class="dashboardCardPadding"
+            <div
-            @mouseenter="stopScroll()"
+              style="width:55%"
-            @mouseleave="toScroll()"
+              @mouseenter="stopScroll()"
-          >
+              @mouseleave="toScroll()"
-            <el-table
-              v-loading="listLoadingUser"
-              :data="userList"
-              fit
-              stripe
-              size="mini"
-              :height="cardTabelHeight"
-              style="border-top: 1px solid #f5f5f5;"
             >
-              <el-table-column type="index" width="50">
+              <el-table
-              </el-table-column>
+                v-loading="listLoadingUser"
-              <el-table-column label="人员名称" prop="name" show-overflow-tooltip>
+                :data="userList"
-              </el-table-column>
+                fit
-              <el-table-column label="到岗情况" prop="dept_name">
+                size="mini"
-                <template slot-scope="scope">
+                :height="cardTabelHeight"
-                  <el-tag v-if="scope.row.is_atwork" type="success">
+                style="border-top: 1px solid #f5f5f5;"
-                    到岗
-                  </el-tag>
-                  <el-tag v-else type="danger">
-                    未到
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="部门" prop="dept_">
-                <template slot-scope="scope" v-if="scope.row.dept_">{{scope.row.dept_.name}}</template>
-              </el-table-column>
-            </el-table>
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="8">
-        <div class="dashboardBottomRow">
-          <div class="dashboardCardHand">
-            <div class="CardTitleWrap" style="border-bottom: 0">
-              <span class="verticalLine"></span><span class="dashboardCardTitle">提醒</span>
-              <span @click="refreshBottomTabel('3')" style="cursor: pointer">
-                <el-icon class="el-icon-refresh refreshIcon"></el-icon>
-              </span>
-            </div>
-            <div class="block">
-              <el-pagination
-                small
-                :pager-count="pageCounts"
-                :current-page.sync="warningPage"
-                :page-size="warningPageSize"
-                layout="prev, pager, next, jumper"
-                :total="warningTotal"
-                @size-change="handleWarningSizeChange"
-                @current-change="handleWarningCurrentChange"
               >
-              </el-pagination>
+                <el-table-column type="index" width="50">
+                </el-table-column>
+                <el-table-column label="人员名称" prop="name" show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column label="到岗情况" prop="dept_name">
+                  <template slot-scope="scope">
+                    <el-tag v-if="scope.row.is_atwork" type="success">
+                      到岗
+                    </el-tag>
+                    <el-tag v-else type="danger">
+                      未到
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column label="部门" prop="dept_">
+                  <template slot-scope="scope" v-if="scope.row.dept_">{{scope.row.dept_.name}}</template>
+                </el-table-column>
+              </el-table>
             </div>
+            <Echart
+              :options="pieOptions"
+              id="pieChart"
+              :height="pieHeight"
+            ></Echart>
           </div>
-          <div class="dashboardCardPadding">
+          
-            <el-tabs type="card" :style="{height:cardTabelHeight+'px'}" v-model="activeName"
-                     @tab-click="activeNameClick" id="warningTabs">
-              <el-tab-pane label="库存警告" name="库存警告">
-                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
-                    @mouseleave="Up()">
-                  <li class="listItem nearStatus" v-for="(item,$index) in warningList" :key="$index">
-                    <div class="itemText">
-                      <span>{{item.name}}({{item.unit}})</span><span>低于安全库存</span>
-                    </div>
-                  </li>
-                </ul>
-              </el-tab-pane>
-              <el-tab-pane label="临近交货" name="临近交货">
-                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
-                    @mouseleave="Up()">
-                  <li class="listItem nearStatus" v-for="(item,$index) in warningList" :key="$index">
-                    <div class="itemText">
-                      <span>{{item.number}}</span><span>接近交货日期</span>
-                    </div>
-                  </li>
-                </ul>
-              </el-tab-pane>
-              <el-tab-pane label="过期提醒" name="过期提醒">
-                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
-                    @mouseleave="Up()">
-                  <li class="listItem outStatus" v-for="(item,$index) in warningList" :key="$index">
-                    <div class="itemText">
-                      <span>{{item.name}}({{item.unit}})</span><span>已过期</span>
-                    </div>
-                  </li>
-                </ul>
-              </el-tab-pane>
-              <el-tab-pane label="设备检测" name="设备检测">
-                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
-                    @mouseleave="Up()">
-                  <li class="listItem" v-for="(item,$index) in warningList" :key="$index"
-                      :class="{nearStatus:item.warningType===1,outStatus:item.warningType===2}">
-                    <div class="itemText">
-                      <span>{{item.name}}({{item.number}})</span>
-                      <span v-if="item.warningType===1">接近校准日期</span>
-                      <span v-else>已过校准日期</span>
-                    </div>
-                  </li>
-                </ul>
-              </el-tab-pane>
-              <el-tab-pane label="任务到期" name="任务到期">
-                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
-                    @mouseleave="Up()">
-                  <li class="listItem" v-for="(item,$index) in warningList" :key="$index"
-                      :class="{nearStatus:item.warningType===1,outStatus:item.warningType===2}">
-                    <div class="itemText">
-                      <span>{{item.name}}{{item.number}}</span>
-                      <span v-if="item.warningType===1">接近任务截止日期</span>
-                      <span v-else>已过任务截止日期</span>
-                    </div>
-                  </li>
-                </ul>
-              </el-tab-pane>
-            </el-tabs>
-          </div>
         </div>
       </el-col>
     </el-row>
   </div>
 </template>
 <script>
+  import Echart from '@/components/echart';
   import echarts from 'echarts'
   import {mapGetters} from 'vuex';
   import {getEmployee} from "@/api/hrm";
@@ -341,7 +263,7 @@
   import {getContractList, getOrderList} from "@/api/sam";
   import {getToken} from '@/utils/auth' // get token from cookie
   export default {
-    components: {gantt},
+    components: {gantt,Echart},
     name: 'Dashboard',
     data() {
       return {
@@ -414,7 +336,17 @@
         listLoadingEm: false,
         listLoadingUser: false,
         cardTabelHeight: null,
-        ganttHeight: 0,
+        ganttHeight: null,
+        pieHeight:'300px',
+        cdata: {
+            xData: ["已到岗","请假","公出", "未到岗"],
+            seriesData: [
+              {value: 70, name:"已到岗"},
+              {value: 15, name: "请假"},
+              {value: 10, name: "公出"},
+              {value: 5, name: "未到岗"},
+            ]
+          },
       }
     },
     computed: {
@@ -431,9 +363,71 @@
           this.getEquipmentList();//设备列表
           this.getGanttData();//甘特图数据
           this.getStatisticsData();//统计数据
-          this.getNoticeData();//提醒列表
+          // this.getNoticeData();//提醒列表
         }
-      }
+      },
+      cdata: {
+          handler(newData) {
+            this.pieOptions = {
+              color: [
+                "#409eff",
+                "#ffdb5c",
+                "#67c23a",
+                "#f27197"
+              ],
+              legend: {
+                data:newData.xData,
+                top: 'top',
+                left: 'right',
+                orient: "vertical",
+                textStyle: {
+                  color: "#556677", // 文字的颜色。
+                }
+              },
+              tooltip: {
+                trigger: "item",
+                formatter: "{a} <br/>{b} : {c} ({d}%)"
+              },
+              toolbox: {
+                show: true
+              },
+              calculable: true,
+              series: [
+                {
+                  name: '人员到岗率',
+                  type: 'pie',    // 设置图表类型为饼图
+                  radius: ['30%', '50%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
+                  center: ['50%', '45%'], //圆心位置
+                  avoidLabelOverlap: false,
+                  itemStyle: {
+                    borderRadius: 20,
+                    borderColor: '#fff',
+                    borderWidth: 3
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                  label: {
+                    show: false,
+                    position: 'center'
+                  },
+                  emphasis: {
+                    label: {
+                      show: true,
+                      fontSize: 14,
+                      // fontWeight: 'bold'
+                    }
+                  },
+                  data:newData.seriesData
+                }
+              ]
+            }
+          },
+          immediate: true,
+        },
+        immediate: true,
+        deep: true
+      
     },
     methods: {
       setClass: function (check_date) {
@@ -452,23 +446,23 @@
         return obj;
       },
 
-      getNoticeData() {
+      // getNoticeData() {
-        this.ScrollUp();
+      //   this.ScrollUp();
-      },
+      // },
 
-      ScrollUp() {
+      // ScrollUp() {
-        let that = this;
+      //   let that = this;
-        that.intNum = setInterval(() => {
+      //   that.intNum = setInterval(() => {
-          if (that.warningList.length > 3) {
+      //     if (that.warningList.length > 3) {
-            that.animate = true;
+      //       that.animate = true;
-            setTimeout(() => {
+      //       setTimeout(() => {
-              that.warningList.push(that.warningList[0]);
+      //         that.warningList.push(that.warningList[0]);
-              that.warningList.shift();
+      //         that.warningList.shift();
-              that.animate = false;
+      //         that.animate = false;
-            }, 3000)
+      //       }, 3000)
-          }
+      //     }
-        }, 3000);
+      //   }, 3000);
-      },
+      // },
 
       //鼠标移上去停止
       Stop() {
@@ -652,10 +646,10 @@
         this.chartColumn.setOption({
           // title: { text: '成品率' },
           grid: {
-            top: '10%',
+            top: '20%',
-            left: '3%',
+            left: '10%',
-            right: '5%',
+            right: '10%',
-            bottom: '1%',
+            bottom: '10%',
             containLabel: true
           },
           tooltip: {
@@ -683,6 +677,11 @@
             splitLine: {
               show: false, //去掉X轴分割线
             },
+            axisLabel: {//X轴字体倾斜度设置
+                interval: 0,
+                // 倾斜45°
+                rotate:45,//倾斜度 -90 至 90 默认为0
+            },
             data: that.chartData.xAxisData,
           },
           yAxis: {
@@ -707,7 +706,12 @@
             name: '成品率',
             type: 'bar',
             barWidth: 20,
-            data: that.chartData.seriesData,
+            showBackground: true,
+            backgroundStyle: {
+              color: 'rgba(180, 180, 180, 0.2)'
+            },
+            // data: that.chartData.seriesData,
+            data:[90,80,60,80,70,90,100],
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
@@ -719,6 +723,7 @@
             },
             itemStyle: {
               normal: {
+                barBorderRadius:[8,8,0,0],
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: '#adcff3'
@@ -999,17 +1004,15 @@
         let hasToken = getToken();
         if (hasToken) {
           this.timer = window.setInterval(() => {
-            setTimeout(() => {
+            if (that.nowHour > 7 && that.nowHour < 10) {
-              if (that.nowHour > 7 && that.nowHour < 10) {
                 that.getUserList();//用户列表
                 that.getEquipmentList();//设备列表
                 that.getGanttData();//甘特图数据
                 that.getStatisticsData();//统计数据
-                that.getNoticeData();//提醒列表
+                // that.getNoticeData();//提醒列表
               } else {
                 that.refreshDataSlowly();
               }
-            }, 0)
           }, 120000)//2分钟
         }
       },
@@ -1019,17 +1022,15 @@
         let hasToken = getToken();
         if (hasToken) {
           this.timer = window.setInterval(() => {
-            setTimeout(() => {
+            if (that.nowHour > 7 && that.nowHour < 10) {
-              if (that.nowHour > 7 && that.nowHour < 10) {
                 that.refreshDataFrequently();
               } else {
                 that.getUserList();//用户列表
                 that.getEquipmentList();//设备列表
                 that.getGanttData();//甘特图数据
                 that.getStatisticsData();//统计数据
-                that.getNoticeData();//提醒列表
+                // that.getNoticeData();//提醒列表
               }
-            }, 0)
           }, 3600000)//1小时1000*10*60
         }
       },
@@ -1037,15 +1038,16 @@
     mounted() {
       let hei = document.getElementsByClassName('app-main')[0].clientHeight;
       let heig = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
-      let domHeight = ((hei - heig - 140) / 2);
+      let domHeight = ((hei - heig - 240) / 2);
-      this.cardTabelHeight = domHeight - 37;
+      this.cardTabelHeight = domHeight;
-      this.ganttHeight = domHeight + 35;
+      this.pieHeight=domHeight+'px';
+      this.ganttHeight = domHeight;
       document.getElementById('chartColumn').style.height = domHeight + 'px';
       this.getUserList();//用户列表
       this.getEquipmentList();//设备列表
       this.getGanttData();//甘特图数据
       this.getStatisticsData();//统计数据
-      this.getNoticeData();//提醒列表
+      // this.getNoticeData();//提醒列表
       let nowDate = new Date();
       let nowHour = nowDate.getHours();
       this.nowHour = nowHour;
@@ -1054,6 +1056,8 @@
       } else {
         this.refreshDataSlowly();
       }
+      if(this.intNumUser){}else{}
+      if(this.intNumUser){}else{}
     },
     beforeDestroy() {
       window.clearInterval(this.timer);
@@ -1062,40 +1066,65 @@
   }
 </script>
 <style lang="scss" scoped>
+::-webkit-scrollbar {
+    width: 5px!important;
+    background: #eee!important;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3)!important;
+    border-radius: 3px!important;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 3px!important;
+    height: 100px!important;
+    background-color: #ccc!important;
+}
   .el-card.is-always-shadow {
     height: auto !important;
   }
 
   .dashboard-container {
-    margin: 5px 6px;
+    margin: 20px 30px;
   }
 
   .dashboardTopCard, .dashboardMiddle, .dashboardBottomRow {
-    -webkit-border-radius: 5px;
+    -webkit-border-radius: 15px;
-    -moz-border-radius: 5px;
+    -moz-border-radius: 15px;
-    border-radius: 5px;
+    border-radius: 15px;
-    margin-bottom: 5px;
+    margin-bottom: 20px;
     background: #ffffff;
     overflow: hidden;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
   }
-
+  .dashboardTopCard{
+    background: none;
+    box-shadow:none;
+    display: flex;
+    justify-content: space-between;
+  }
   .dashboardBottomRow {
     margin-bottom: 0;
+    position: relative;
+    padding: 20px;
   }
 
   .dashboardCardPadding {
     overflow: hidden;
-    padding: 5px 20px 20px 20px;
+    padding: 20px;
   }
 
   /**/
   .cardsWrap {
     display: flex;
-    width: 20%;
+    width: 18%;
     color: #777777;
     float: left;
     font-size: 14px;
+    border-radius: 15px;
+    padding: 30px 20px 30px 40px;
+    background-color: #ffffff;
   }
 
   .svgIconWrap {
@@ -1302,9 +1331,15 @@
       height: 100% !important;
     }
   }
-
+  #searchWrap .el-range-editor.el-input__inner {
+    height: 30px !important;
+    padding: 0 5px !important;
+}
   #dashboardMiddle .el-range-editor--medium.el-input__inner,
   #dashboardMiddle .el-range-editor.el-input__inner {
     height: 30px !important;
   }
+  #pieChart{
+    width: 45%!important;
+  }
 </style>