ccm

2023-02-17 11:43:26 +08:00 · 2023-02-17 11:43:26 +08:00 · ee2fed53fb
parent 15b0f41f20
commit ee2fed53fb
9 changed files with 608 additions and 292 deletions
--- a/hb_client/package.json
+++ b/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",
--- a/hb_client/src/App.vue
+++ b/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>
--- a/hb_client/src/assets/scss/style.scss
+++ b/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;
 }
--- a/hb_client/src/components/Gantt/dashGantt.vue
+++ b/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>
--- a/hb_client/src/layout/components/Navbar.vue
+++ b/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 Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import SizeSelect from '@/components/SizeSelect'
-import Search from '@/components/HeaderSearch'
+import { mapGetters } from 'vuex';
+import {getMaterialList} from "@/api/mtm";
+import {getOrderList} from "@/api/sam";
+import {getmaterialbatchList} from "@/api/inm";
+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>
--- a/hb_client/src/layout/components/Sidebar/Logo.vue
+++ b/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'
    }
  }
--- a/hb_client/src/router/index.js
+++ b/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',
--- a/hb_client/src/styles/index.scss
+++ b/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 {
--- a/hb_client/src/views/dashboard/index.vue
+++ b/hb_client/src/views/dashboard/index.vue
@ -1,22 +1,17 @@
 <template>
  <div class="dashboard-container">
    <div class="dashboardTopCard">
-      <div class="CardTitleWrap">
-        <span class="verticalLine"></span>
-        <span class="dashboardCardTitle">数据统计</span>
-      </div>
-      <div style="padding: 20px;overflow: hidden;">
-        <div class="cardsWrap" @click="toDetail('1')">
+      <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">
-      <div class="dashboardCardPadding">
-        <div style="width: 65%;float: left;">
-          <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>
+    <el-row :gutter="20">
+      <el-col :span="16">
+        <div id="dashboardMiddle" class="dashboardMiddle">
          <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"
-              small
-              :data="equipmentList"
-              fit
-              stripe
-              size="mini"
-              :height="cardTabelHeight"
-              pager-count="3"
-              style="border-top: 1px solid #f5f5f5;"
-            >
-              <el-table-column label="序号" type="index" width="50">
-              </el-table-column>
-              <el-table-column label="设备编号" prop="number">
-              </el-table-column>
-              <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column label="设备状态" prop="material_">
-                <!--type=1生产设备-->
-                <template slot-scope="scope">
-                  <div v-if="scope.row.type===2">
-                    <el-tag v-if="scope.row.state===40" type="danger">
-                      禁用
-                    </el-tag>
-                    <el-tag v-else type="success">
-                      合格
-                    </el-tag>
-                  </div>
-                  <div v-else>
-                    <el-tag v-if="scope.row.state===10" type="success">
-                      {{ state_[scope.row.state] }}
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.state===20">
-                      {{ state_[scope.row.state] }}
-                    </el-tag>
-                    <el-tag v-else-if="scope.row.state===30" type="warning">
-                      {{ state_[scope.row.state] }}
-                    </el-tag>
-                    <el-tag v-else type="danger">
-                      {{ state_[scope.row.state] }}
-                    </el-tag>
-                  </div>
-                </template>
-              </el-table-column>
-            </el-table>
+                v-loading="listLoadingEm"
+                small
+                :data="equipmentList"
+                fit
+                size="mini"
+                :height="ganttHeight"
+                pager-count="3"
+                style="border-top: 1px solid #f5f5f5;"
+              >
+                <el-table-column label="序号" type="index" width="50">
+                </el-table-column>
+                <el-table-column label="设备编号" prop="number">
+                </el-table-column>
+                <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
+                </el-table-column>
+                <el-table-column label="设备状态" prop="material_">
+                  <!--type=1生产设备-->
+                  <template slot-scope="scope">
+                    <div v-if="scope.row.type===2">
+                      <el-tag v-if="scope.row.state===40" type="danger">
+                        禁用
+                      </el-tag>
+                      <el-tag v-else type="success">
+                        合格
+                      </el-tag>
+                    </div>
+                    <div v-else>
+                      <el-tag v-if="scope.row.state===10" type="success">
+                        {{ state_[scope.row.state] }}
+                      </el-tag>
+                      <el-tag v-else-if="scope.row.state===20">
+                        {{ state_[scope.row.state] }}
+                      </el-tag>
+                      <el-tag v-else-if="scope.row.state===30" type="warning">
+                        {{ state_[scope.row.state] }}
+                      </el-tag>
+                      <el-tag v-else type="danger">
+                        {{ state_[scope.row.state] }}
+                      </el-tag>
+                    </div>
+                  </template>
+                </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
-            class="dashboardCardPadding"
-            @mouseenter="stopScroll()"
-            @mouseleave="toScroll()"
-          >
-            <el-table
-              v-loading="listLoadingUser"
-              :data="userList"
-              fit
-              stripe
-              size="mini"
-              :height="cardTabelHeight"
-              style="border-top: 1px solid #f5f5f5;"
+          <div style="display: flex;">
+            <div
+              style="width:55%"
+              @mouseenter="stopScroll()"
+              @mouseleave="toScroll()"
            >
-              <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>
-        </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-table
+                v-loading="listLoadingUser"
+                :data="userList"
+                fit
+                size="mini"
+                :height="cardTabelHeight"
+                style="border-top: 1px solid #f5f5f5;"
              >
-              </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() {
-        this.ScrollUp();
-      },
+      // getNoticeData() {
+      //   this.ScrollUp();
+      // },

-      ScrollUp() {
-        let that = this;
-        that.intNum = setInterval(() => {
-          if (that.warningList.length > 3) {
-            that.animate = true;
-            setTimeout(() => {
-              that.warningList.push(that.warningList[0]);
-              that.warningList.shift();
-              that.animate = false;
-            }, 3000)
-          }
-        }, 3000);
-      },
+      // ScrollUp() {
+      //   let that = this;
+      //   that.intNum = setInterval(() => {
+      //     if (that.warningList.length > 3) {
+      //       that.animate = true;
+      //       setTimeout(() => {
+      //         that.warningList.push(that.warningList[0]);
+      //         that.warningList.shift();
+      //         that.animate = false;
+      //       }, 3000)
+      //     }
+      //   }, 3000);
+      // },

      //鼠标移上去停止
      Stop() {
@ -652,10 +646,10 @@
        this.chartColumn.setOption({
          // title: { text: '成品率' },
          grid: {
-            top: '10%',
-            left: '3%',
-            right: '5%',
-            bottom: '1%',
+            top: '20%',
+            left: '10%',
+            right: '10%',
+            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);
-      this.cardTabelHeight = domHeight - 37;
-      this.ganttHeight = domHeight + 35;
+      let domHeight = ((hei - heig - 240) / 2);
+      this.cardTabelHeight = domHeight;
+      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;
-    -moz-border-radius: 5px;
-    border-radius: 5px;
-    margin-bottom: 5px;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px;
+    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>