首页布局调整

hb_client/package.json

@@ -28,6 +28,7 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^6.4.6",
     "js-cookie": "^3.0.0",
+    "mammoth": "^1.4.19",
     "normalize.css": "^8.0.1",
     "nprogress": "0.2.0",
     "path-to-regexp": "^6.2.0",
@@ -37,7 +38,7 @@
     "vue-quill-editor": "^3.0.6",
     "vue-router": "^3.5.2",
     "vuex": "^3.6.2",
-    "webpack-dev-server": "^4.2.0",
+    "webpack-dev-server": "^4.7.3",
     "xlsx": "^0.17.1"
   },
   "devDependencies": {

hb_client/src/views/dashboard/index.vue

@@ -4,7 +4,7 @@
       <div class="CardTitleWrap">
         <span class="verticalLine"></span><span class="dashboardCardTitle">数据统计</span>
       </div>
-      <div style="padding: 20px;overflow: hidden;">
+      <div style="padding: 20px 20px 55px 20px;overflow: hidden;">
         <div class="cardsWrap" @click="toDetail('1')">
           <div class="svgIconWrap">
             <svg-icon
@@ -146,48 +146,63 @@
           <div class="dashboardCardHand">
             <div class="CardTitleWrap">
               <span class="verticalLine"></span><span class="dashboardCardTitle">生产设备</span>
-              <!--<span class="stockMore" @click="stockMore">更多>></span>-->
             </div>
             <div class="block">
               <el-pagination
-                :current-page.sync="stockPage"
+                :current-page.sync="equipmentPage"
-                :page-size="stockPageSize"
+                :page-size="equipmentPageSize"
                 layout="prev, pager, next, jumper"
-                :total="stockTotal"
+                :total="equipmentTotal"
-                @size-change="handleStockSizeChange"
+                @current-change="handleEquipmentCurrentChange"
-                @current-change="handleStockCurrentChange"
               >
               </el-pagination>
             </div>
           </div>
           <div class="dashboardCardPadding">
             <el-table
-              v-loading="listLoadingStock"
+              small
-              :data="stockList"
+              v-loading="listLoadingEm"
+              :data="equipmentList"
               fit stripe
               size="mini"
               :height="cardTabelHeight"
+              pager-count="3"
               style="border-top: 1px solid #f5f5f5;"
             >
-              <el-table-column label="物料编号" prop="material_">
+              <el-table-column label="序号" type="index" width="50">
-                <template slot-scope="scope">{{ scope.row.material_.number }}</template>
               </el-table-column>
-              <el-table-column label="物料名称" prop="material_" show-overflow-tooltip>
+              <el-table-column label="设备编号" prop="number">
-                <template slot-scope="scope">{{ scope.row.material_.name }}</template>
               </el-table-column>
-              <el-table-column label="规格型号" prop="material_" show-overflow-tooltip>
+              <el-table-column label="设备名称" prop="name" show-overflow-tooltip>
-                <template slot-scope="scope">{{ scope.row.material_.specification }}</template>
               </el-table-column>
-              <el-table-column label="物料类型" prop="material_">
+              <el-table-column label="规格型号" prop="model" show-overflow-tooltip>
-                <template slot-scope="scope">{{options[scope.row.material_.type]}}</template>
               </el-table-column>
-              <el-table-column label="单位" prop="material_">
+              <el-table-column label="设备状态" prop="material_">
-                <template slot-scope="scope">{{scope.row.material_.unit}}</template>
+                <!--type=1生产设备-->
-              </el-table-column>
+                <template slot-scope="scope">
-              <el-table-column label="库存" prop="count">
+                  <div v-if="scope.row.type===1">
-              </el-table-column>
+                    <el-tag v-if="scope.row.state===40" type="danger">
-              <el-table-column label="仓库" prop="warehouse_">
+                      禁用
-                <template slot-scope="scope">{{ scope.row.warehouse_.name }}</template>
+                    </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>
@@ -198,48 +213,48 @@
           <div class="dashboardCardHand">
             <div class="CardTitleWrap">
               <span class="verticalLine"></span><span class="dashboardCardTitle">人员到岗</span>
-              <!--<span class="stockMore" @click="stockMore">更多>></span>-->
             </div>
             <div class="block">
               <el-pagination
-                :current-page.sync="stockPage"
+                small
-                :page-size="stockPageSize"
+                pager-count="3"
+                :current-page.sync="userPage"
+                :page-size="userPageSize"
                 layout="prev, pager, next, jumper"
-                :total="stockTotal"
+                :total="userTotal"
-                @size-change="handleStockSizeChange"
+                @current-change="handleUserCurrentChange"
-                @current-change="handleStockCurrentChange"
               >
               </el-pagination>
             </div>
           </div>
-          <div class="dashboardCardPadding">
+          <div
+            class="dashboardCardPadding"
+            @mouseenter="stopScroll()"
+            @mouseleave="toScroll()"
+          >
             <el-table
-              v-loading="listLoadingStock"
+              v-loading="listLoadingUser"
-              :data="stockList"
+              :data="userList"
               fit stripe
               size="mini"
               :height="cardTabelHeight"
               style="border-top: 1px solid #f5f5f5;"
             >
-              <el-table-column label="物料编号" prop="material_">
+              <el-table-column label="id" prop="id" width="50">
-                <template slot-scope="scope">{{ scope.row.material_.number }}</template>
               </el-table-column>
-              <el-table-column label="物料名称" prop="material_" show-overflow-tooltip>
+              <el-table-column label="人员名称" prop="name" show-overflow-tooltip>
-                <template slot-scope="scope">{{ scope.row.material_.name }}</template>
               </el-table-column>
-              <el-table-column label="规格型号" prop="material_" show-overflow-tooltip>
+              <el-table-column label="到岗情况" prop="dept_name">
-                <template slot-scope="scope">{{ scope.row.material_.specification }}</template>
+                <template slot-scope="scope">
+                  <el-tag v-if="scope.row.dept===1" type="success">
+                    未到
+                  </el-tag>
+                  <el-tag v-else type="danger">
+                    到岗
+                  </el-tag>
+                </template>
               </el-table-column>
-              <el-table-column label="物料类型" prop="material_">
+              <el-table-column label="部门" prop="dept_name">
-                <template slot-scope="scope">{{options[scope.row.material_.type]}}</template>
-              </el-table-column>
-              <el-table-column label="单位" prop="material_">
-                <template slot-scope="scope">{{scope.row.material_.unit}}</template>
-              </el-table-column>
-              <el-table-column label="库存" prop="count">
-              </el-table-column>
-              <el-table-column label="仓库" prop="warehouse_">
-                <template slot-scope="scope">{{ scope.row.warehouse_.name }}</template>
               </el-table-column>
             </el-table>
           </div>
@@ -253,6 +268,8 @@
             </div>
             <div class="block">
               <el-pagination
+                small
+                pager-count="3"
                 :current-page.sync="remindPage"
                 :page-size="remindPageSize"
                 layout="prev, pager, next, jumper"
@@ -267,7 +284,8 @@
             <el-tabs type="card" :style="{height:cardTabelHeight+'px'}" v-model="activeName"
                      @tab-click="activeNameClick">
               <el-tab-pane label="库存警告" name="库存警告">
-                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
+                <ul :style="{height:cardTabelHeight-47+'px'}" class="lists" :class="{anim:animate}" @mouseenter="Stop()"
+                    @mouseleave="Up()">
                   <li v-for="item in list" :key="item.id" class="listItem">
                     <div class="itemText">
                       <span>{{item.name}}</span><span style="float: right">2021-12-30</span>
@@ -314,13 +332,15 @@
 <script>
   import echarts from 'echarts'
   import {mapGetters} from 'vuex';
+  import {getUserList} from "@/api/user";
   import {getPlanGantt} from "@/api/srm";
   import {getProcessYield} from "@/api/srm";
   import {getMaterialList} from "@/api/mtm";
-  import {getInventoryList} from "@/api/inm";
+  // import {getInventoryList} from "@/api/inm";
   import {getProductionplanList} from "@/api/pm";
   import {getmaterialbatchList} from "@/api/inm";
   import gantt from "@/components/Gantt/dashGantt";
+  import {getpEquipmentList} from "@/api/equipment";
   import {getContractList, getOrderList} from "@/api/sam";
 
   export default {
@@ -330,27 +350,32 @@
       return {
         animate: false,
         intNum: null,
+        intNumUser: null,
+        animateUser: false,
         chartColumn: null,
         week: null,
         currentTime: null,
         currentYear: null,
         currentMonth: null,
         currentDay: null,
-        stockPage: 1,
+        userPage: 1,
-        stockPageSize: 10,
+        userPageSize: 10,
-        stockTotal: 100,
+        userTotal: 0,
+        equipmentPage: 1,
+        equipmentPageSize: 10,
+        equipmentTotal: 0,
         remindPage: 1,
         remindPageSize: 20,
-        remindTotal: 100,
+        remindTotal: 0,
         tableIndex: null,
         chartIndex: null,
         tableDate: '2021-12',
         chartDate: [],
         proList: [],
-        planList: [],
+        userList: [],
-        stockList: [],
         remindList: [],
         warningList: [],
+        equipmentList: [],
         list: [
           {id: 1, name: 'HIehd91', card: '3337', sco: 'REF-32'},
           {id: 2, name: 'HIehd92', card: '3337', sco: 'REF-32'},
@@ -360,6 +385,12 @@
           {id: 6, name: 'HIehd96', card: '3337', sco: 'REF-32'},
           {id: 7, name: 'HIehd97', card: '3337', sco: 'REF-32'},
         ],
+        state_: {
+          10: '完好',
+          20: '限用',
+          30: '在修',
+          40: '禁用',
+        },
         options: {
           "1": '成品',
           "2": '半成品',
@@ -382,7 +413,8 @@
         rderTotalCount: null,//累计交付产品总数
         derTotalCount: null,//累计不合格产品总数
         listLoadingPlan: false,
-        listLoadingStock: false,
+        listLoadingEm: false,
+        listLoadingUser: false,
         cardTabelHeight: null,
         ganttHeight: 0,
       }
@@ -394,13 +426,10 @@
         'count'
       ])
     },
-    watch:{
+    watch: {
-      "$route":{
+      "$route": {
-        handler(route){
+        handler(route) {
-          debugger;
+          if (route.name === 'dashboard') {
-          let that = this;
-          if(route.name==='dashboard'){
-            location. reload();
             // that.handlerCheckList(this.list);
           }
         }
@@ -503,6 +532,77 @@
           }
         });
       },
+      //设备列表
+      getEquipmentList() {
+        let that = this;
+        this.listLoadingEm = true;
+        getpEquipmentList({page: that.equipmentPage, page_size: that.equipmentPageSize}).then((response) => {
+          if (response.data) {
+            that.equipmentList = response.data.results;
+            that.equipmentTotal = response.data.count;
+          }
+          that.listLoadingEm = false;
+        });
+      },
+      //设备分页跳转
+      handleEquipmentCurrentChange(val) {
+        let that = this;
+        that.listLoadingEm = true;
+        that.equipmentPage = val;
+        getpEquipmentList({page: val, page_size: that.equipmentPageSize}).then((response) => {
+          if (response.data) {
+            that.equipmentList = response.data.results;
+            that.equipmentTotal = response.data.count;
+          }
+          that.listLoadingEm = false;
+        });
+      },
+      //用户列表
+      getUserList() {
+        let that = this;
+        that.listLoadingUser = true;
+        getUserList({page: that.userPage, page_size: that.userPageSize}).then((response) => {
+          if (response.data) {
+            that.userList = response.data.results;
+            that.userTotal = response.data.count;
+            that.userScroll();
+          }
+          that.listLoadingUser = false;
+        });
+      },
+      //用户分页跳转
+      handleUserCurrentChange(val) {
+        let that = this;
+        that.listLoadingUser = true;
+        that.userPage = val;
+        getUserList({page: val, page_size: that.userPageSize}).then((response) => {
+          if (response.data) {
+            that.userList = response.data.results;
+            that.userTotal = response.data.count;
+            that.userScroll();
+          }
+          that.listLoadingUser = false;
+        });
+      },
+      userScroll() {
+        let that = this;
+        that.intNumUser = setInterval(() => {
+          that.animateUser = true;
+          setTimeout(() => {
+            that.userList.push(that.userList[0]);
+            that.userList.shift();
+            that.animateUser = false;
+          }, 500)
+        }, 1000);
+      },
+      //鼠标移上去停止
+      stopScroll() {
+        clearInterval(this.intNumUser);
+      },
+      toScroll() {
+        this.userScroll();
+      },
+      //去往工作流页面
       gotoTicketPage() {
         let path = this.$route.path;
         if (path === '/workflow/ticket') {
@@ -512,7 +612,7 @@
         }
       },
       //任务排期列表
-      getPlanList() {
+      /*getPlanList() {
         let that = this;
         this.listLoadingPlan = true;
         getProductionplanList({page: 0}).then((response) => {
@@ -521,9 +621,9 @@
           }
           this.listLoadingPlan = false;
         });
-      },
+      },*/
       //库存列表
-      getStockList() {
+      /*getStockList() {
         let that = this;
         this.listLoadingStock = true;
         getInventoryList({page: this.stockPage, page_size: this.stockPageSize}).then((response) => {
@@ -534,15 +634,21 @@
           this.listLoadingStock = false;
         });
       },
+      //更多库存
+      stockMore() {
+        this.$router.push({name: 'warehouse', params: {}})
+      },
+       //库存pageSize改变
+      // @size-change="handleStockSizeChange"
+      handleEquipmentSizeChange(val) {
+        this.stockPageSize = val;
+        this.stockPage = 1;
+      },
+      */
       //图标渲染
       drawChart() {
         let that = this;
-        debugger;
-        console.log(document.getElementById('chartColumn'));
-        debugger;
         this.chartColumn = echarts.init(document.getElementById('chartColumn'));
-        console.log(this.chartColumn );
-
         this.chartColumn.setOption({
           // title: { text: '成品率' },
           grid: {
@@ -652,9 +758,7 @@
           }]
         });
       },
-      stockMore() {
+
-        this.$router.push({name: 'warehouse', params: {}})
-      },
       toDetail(index) {
         if (index === '1') {
           this.$router.push({name: 'contract', params: {page: 1, page_size: 20}})
@@ -719,7 +823,6 @@
               this.drawChart();
             }
           });
-
         }
         //根据时间和类型获取数据
       },
@@ -752,24 +855,6 @@
           });
         }
       },
-      //库存
-      handleStockSizeChange(val) {
-        this.stockPageSize = val;
-        this.stockPage = 1;
-      },
-      //库存
-      handleStockCurrentChange(val) {
-        let that = this;
-        this.listLoading = true;
-        this.stockPage = val;
-        getInventoryList({page: val, page_size: this.stockPageSize}).then((response) => {
-          if (response.data) {
-            that.stockList = response.data.results;
-            that.stockTotal = response.data.count;
-          }
-          this.listLoading = false;
-        });
-      },
       //提示
       activeNameClick(tab) {
         let that = this;
@@ -876,18 +961,18 @@
         })
       },
     },
-
     mounted() {
       let hei = document.getElementsByClassName('app-main')[0].clientHeight;
       let heig = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
-      this.cardTabelHeight = ((hei - heig - 140) / 2);
+      let domHeight = ((hei - heig - 140) / 2);
-      this.ganttHeight = this.cardTabelHeight - 45;
+      this.cardTabelHeight = domHeight-35;
-      document.getElementById('chartColumn').style.height = this.cardTabelHeight - 35 + 'px';
+      this.ganttHeight = domHeight - 10;
-      this.getPlanList();
+      document.getElementById('chartColumn').style.height = domHeight + 'px';
-      this.getStockList();
+      this.getUserList();//用户列表
-      this.getGanttData();
+      this.getEquipmentList();//设备列表
-      this.getStatisticsData();
+      this.getGanttData();//甘特图数据
-      this.getNoticeData();
+      this.getStatisticsData();//统计数据
+      this.getNoticeData();//提醒列表
     },
   }
 </script>
@@ -896,9 +981,11 @@
   .el-card.is-always-shadow {
     height: auto !important;
   }
+
   .dashboard-container {
     margin: 5px 6px;
   }
+
   .dashboardTopCard, .dashboardMiddle, .dashboardBottomRow {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -907,12 +994,15 @@
     background: #ffffff;
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
   }
+
   .dashboardBottomRow {
     margin-bottom: 0;
   }
+
   .dashboardCardPadding {
     padding: 5px 20px 20px 20px;
   }
+
   /**/
   .cardsWrap {
     display: flex;
@@ -921,69 +1011,85 @@
     float: left;
     font-size: 14px;
   }
+
   .svgIconWrap {
     margin-right: 20px;
     width: 50px;
     height: 50px;
     border-radius: 15px;
     text-align: center;
+
     .svgIcon {
       font-size: 24px;
       margin-top: 13px
     }
   }
+
   .cardsWrap:nth-child(1) {
     .svgIconWrap {
       background: #e9f3ff;
+
       .svgIcon {
         color: #409EFF;
       }
     }
   }
+
   .cardsWrap:nth-child(2) {
     .svgIconWrap {
       background: #fff1de;
+
       .svgIcon {
         color: #ffb23f;
       }
     }
   }
+
   .cardsWrap:nth-child(3) {
     .svgIconWrap {
       background: #d9f6d8;
+
       .svgIcon {
         color: #54cb48;
       }
     }
   }
+
   .cardsWrap:nth-child(4) {
     .svgIconWrap {
       background: #f0e8fd;
+
       .svgIcon {
         color: #a378e4;
       }
     }
   }
+
   .cardsWrap:nth-child(5) {
     .svgIconWrap {
       background: #f7e5ea;
+
       .svgIcon {
         color: #f27197;
       }
     }
   }
+
   .totalCountText {
     height: 20px;
     line-height: 20px
   }
+
   .totalCountNum {
     height: 30px;
   }
+
   .totalCount {
     font-size: 25px;
     font-weight: bold;
     color: #626262;
   }
+
   /**/
   .CardTitleWrap {
     display: flex;
@@ -1000,6 +1106,7 @@
       margin-right: 7px;
       margin-top: 8px;
     }
+
     .dashboardCardTitle {
       height: 34px;
       line-height: 34px;
@@ -1009,6 +1116,7 @@
       vertical-align: middle;
       margin-right: 7px;
     }
+
     .stockMore {
       font-size: 12px;
       font-weight: normal;
@@ -1016,12 +1124,15 @@
       cursor: pointer;
     }
   }
+
   /*成品率筛选条件*/
   .dashboardCardHand {
     display: flex;
     justify-content: space-between;
+
     .dashboardCardFilter {
       display: flex;
+
       .convenientWrap {
         display: flex;
         border: 1px solid #DCDFE6;
@@ -1030,19 +1141,23 @@
         line-height: 30px;
         margin-left: 10px;
         font-size: 12px;
+
         .convenientBtn {
           cursor: pointer;
           width: 50px;
           text-align: center;
           border-right: 1px solid #DCDFE6;
         }
+
         .convenientBtn:last-child {
           border-right: 0;
           border-radius: 0 6px 6px 0;
         }
+
         .convenientBtn:first-child {
           border-radius: 6px 0 0 6px;
         }
+
         .activeIndex {
           color: #ffffff;
           background: #409EFF;
@@ -1050,10 +1165,12 @@
       }
     }
   }
+
   .anim {
     transition: all 0.5s;
     margin-top: -35px; //高度等于行高
   }
+
   .lists {
     height: 100%;
     line-height: 35px;
@@ -1061,22 +1178,27 @@
     overflow-y: scroll;
     padding-right: 40px;
     margin: 0 !important;
+
     .listItem {
       height: 40px;
       line-height: 40px;
       font-size: 16px;
+
       .itemText {
         display: flex;
         justify-content: space-between;
       }
     }
   }
+
   #chartColumn > div {
     height: 100% !important;
+
     canvas {
       height: 100% !important;
     }
   }
+
   #dashboardMiddle .el-range-editor--medium.el-input__inner,
   #dashboardMiddle .el-range-editor.el-input__inner {
     height: 30px !important;