【编号:16719】成型看板优化

FTT.Board.VueUI/src/views/board/workShopList/ViewSC2.vue

+<template>
+  <div class="con">
+    <div class="left">
+     <ViewSCCom :ID="FactoryWorkShopTeamID1" style="margin-right: -1px;"></ViewSCCom>
+    </div>
+    <div class="right">
+      <ViewSCCom :ID="FactoryWorkShopTeamID2"></ViewSCCom>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import qs from "qs";
+import Axios from "@/function/axios.js";
+import ViewSCCom from "./ViewSCCom.vue";
+export default {
+  components:{ViewSCCom},
+  data() {
+    return {
+      FactoryWorkShopTeamID1: "",
+      FactoryWorkShopTeamID2: "",
+    };
+  },
+
+  created() {
+    // var arr = window.location.href.split("?");
+    // var ss = arr[1].split("&");
+    // this.FactoryWorkShopTeamID1 = ss[0].split("=")[1];
+    // this.FactoryWorkShopTeamID2 = ss[1].split("=")[1];
+
+const queryString = window.location.href.split('?')[1];
+const paramsArray = queryString.split('&');
+const params = paramsArray.reduce((acc, param) => {
+  const [key, value] = param.split('=');
+  acc[key] = value;
+  return acc;
+}, {});
+this.FactoryWorkShopTeamID1 = params.FactoryWorkShopTeamID1;
+this.FactoryWorkShopTeamID2 = params.FactoryWorkShopTeamID2;
+
+
+  },
+
+  methods: {
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.con {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: black;
+}
+
+.left,
+.right {
+  // width: 49%;
+  flex: 1;
+ 
+}
+</style>
\ No newline at end of file

FTT.Board.VueUI/src/views/board/workShopList/ViewSCCom.vue

+<template>
+  <div class="contain">
+    <div
+      class="head"
+      style="border: 1px solid black; margin-bottom: -1px; height: 6vh"
+    >
+      <div class="title">{{ statisObj.Title }}</div>
+    </div>
+    <div class="top">
+      <div class="top_container">
+        <div class="text">
+          <span>今日计划</span><span>{{ statisObj.DayPlanQty }}</span>
+        </div>
+        <div class="text">
+          <span>今日投产</span><span>{{ statisObj.DayPutYield }}</span>
+        </div>
+        <div class="text">
+          <span>不良数</span
+          ><span style="color: red">{{ statisObj.DayInspectionQty }}</span>
+        </div>
+        <div class="text">
+          <span>直通率</span
+          ><span
+            :style="{
+              color:
+                statisObj.DayThroughRate.split('%')[0] >= 90
+                  ? 'green'
+                  : statisObj.DayThroughRate.split('%')[0] >= 80
+                  ? '#FFB222'
+                  : 'red',
+            }"
+            >{{
+              statisObj.DayThroughRate == "" ? "0" : statisObj.DayThroughRate
+            }}</span
+          >
+        </div>
+        <div class="text">
+          <span>今日产量</span><span>{{ statisObj.DayYield }}</span>
+        </div>
+        <div class="text">
+          <span>节拍</span
+          ><span>{{
+            statisObj.DaySwayedTime == "" ? "0" : statisObj.DaySwayedTime
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="tableDiv order" style="height: 25vh">
+      <el-table
+        :data="orderData"
+        :header-cell-style="{ 'text-align': 'center' }"
+        :cell-style="{ 'text-align': 'center' }"
+        class="title_table"
+        style="width: 100%; height: 100%"
+      >
+        <el-table-column prop="IndexNo" label="指令号"> </el-table-column>
+        <el-table-column prop="ColorName" label="颜色"> </el-table-column>
+        <el-table-column prop="RoundNo" label="轮次" width="90">
+        </el-table-column>
+        <el-table-column prop="PlanDate" label="计划日期" width="110">
+        </el-table-column>
+        <el-table-column prop="Qty" label="计划量" width="90">
+        </el-table-column>
+        <el-table-column prop="StockInCount" label="完成量" width="100">
+        </el-table-column>
+        <!-- <el-table-column prop="State" label="状态" width="100">
+          <template slot-scope="scope">
+            <span v-if="scope.row.State&&scope.row.State == '未配送'" style="color: red">{{scope.row.State}}</span>
+            <span v-else>{{ scope.row.State }}</span>
+          </template>
+        </el-table-column> -->
+        <el-table-column prop="State" label="状态" width="100">
+          <template slot-scope="scope">
+            <span
+              v-if="scope.row && scope.row.State === '未配送'"
+              style="color: red"
+              >{{ scope.row.State }}</span
+            >
+            <span v-else-if="scope.row && scope.row.State">{{
+              scope.row.State
+            }}</span>
+            <span v-else></span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="tableDiv" style="height: 30vh; overflow: hidden">
+      <div class="subTitle">不良品明细</div>
+      <div style="display: flex; flex-wrap: wrap; text-align: center">
+        <div
+          style="width: 25%; font-size: 25px;"
+          v-for="(item, index) in QIData"
+          :key="index"
+        >
+          <div
+            style="
+              width: 100%;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              padding: 0px 4px;
+            "
+          >
+            {{ item.QIItemName }}
+          </div>
+          <div style="margin-bottom: 5px">{{ item.Count }}</div>
+        </div>
+      </div>
+
+      <!-- <el-table :data="QIData" style="width: 100%">
+          <el-table-column prop="QIItemName" label="名称"> </el-table-column>
+          <el-table-column prop="Count" label="数量"> </el-table-column>
+        </el-table> -->
+    </div>
+    <div class="tableDiv" style="height: 27vh; border-bottom: 0px">
+      <div class="subTitle">时间段产量</div>
+      <el-table
+        :header-cell-style="{ 'text-align': 'center' }"
+        :cell-style="{ 'text-align': 'center' }"
+        :data="timeData"
+        style="width: 100%"
+      >
+        <el-table-column prop="TimeSlot" label="时间段"> </el-table-column>
+        <el-table-column prop="TimeSpan" label="时间"> </el-table-column>
+        <el-table-column prop="Yield" label="投产量"> </el-table-column>
+        <el-table-column prop="StockInQty" label="入库量"> </el-table-column>
+        <el-table-column prop="SwayedTime" label="节拍"> </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import qs from "qs";
+import Axios from "@/function/axios.js";
+export default {
+  props: ["ID"],
+  data() {
+    return {
+      pageIndex: 1,
+      scrollHeight: "",
+      bodystore: [],
+      orderData: [],
+      QIData: [],
+      timeData: [],
+      statisObj: {
+        DayThroughRate: "0",
+        DaySwayedTime: "0",
+        DayPutYield: 0,
+        DayInspectionQty: 0,
+        DayYield: 0,
+      },
+      time: 0,
+      pageSize: 10,
+    };
+  },
+
+  created() {
+    // var arr = window.location.href.split("?");
+    // var ss = arr[1].split("&");
+    // this.time = ss[2].split("=")[1] * 1000;
+
+    const queryString = window.location.href.split("?")[1];
+    const paramsArray = queryString.split("&");
+    const params = paramsArray.reduce((acc, param) => {
+      const [key, value] = param.split("=");
+      acc[key] = value;
+      return acc;
+    }, {});
+
+    this.time = params.time * 1000;
+
+    if (this.time == 0) {
+      this.time = 2000;
+    }
+  },
+  mounted() {
+    this.getOrderData(this.pageSize);
+    this.getData();
+    this.intervalChangeData();
+    this.intervalFetchData();
+  },
+  beforeRouteLeave(to, form, next) {
+    window.clearInterval(this.timer1);
+    window.clearInterval(this.timer2);
+    window.clearInterval(this.changeTimer);
+    next();
+  },
+  methods: {
+    intervalChangeData() {
+      //数据换行
+      setTimeout(() => {
+        var formatTime = this.time;
+        // var formatTime = (this.time + 3000)/this.pageSize;
+        this.changeTimer = window.setInterval(() => {
+          if (this.bodystore.length == 0) return;
+
+          var rowdata = this.bodystore.shift();
+          this.orderData.push(rowdata);
+          this.orderData.shift(); //移除第一条
+          // 防止出现空白数据
+          if (this.bodystore.length <= this.pageSize && this.total > 0) {
+            this.getOrderData(this.pageSize);
+          }
+        }, formatTime);
+      }, 3000);
+    },
+    intervalFetchData() {
+      //获取数据
+      this.timer1 = window.setInterval(() => {
+        this.getData();
+      }, this.time);
+
+      var formatTime = this.time * this.pageSize - 3000;
+      this.timer2 = window.setInterval(() => {
+        this.getOrderData(this.pageSize);
+      }, formatTime);
+    },
+    _getData(data) {
+      for (let index = 0; index < data.length; index++) {
+        let element = data[index];
+        this.bodystore.push(element);
+      }
+    },
+    getOrderData(size) {
+      var url = "api/FactoryBoardProductData/GetJson";
+      var para = {
+        WorkTeamID: this.ID,
+        PageSize: size,
+        PageIndex: this.pageIndex,
+      };
+      Axios({
+        method: "get",
+        url: url,
+        transformRequest: [
+          function (data) {
+            return qs.stringify(data);
+          },
+        ],
+        params: para,
+      }).then((res) => {
+        this.total = res.ProOrderTotal;
+        if (
+          res.ProOrders.length < this.pageSize ||
+          this.pageIndex == this.total / this.pageSize
+        ) {
+          this.pageIndex = 1;
+        } else {
+          this.pageIndex++;
+        }
+
+        if (this.total > 0) {
+          if (this.orderData.length <= this.pageSize) {
+            this.getOrderData(this.pageSize);
+            res.ProOrders.forEach((item) => {
+              this.orderData.push(item);
+            });
+          } else {
+            this._getData(res.ProOrders);
+          }
+        }
+
+        // if (res.ProOrders.length == 0 || res.ProOrders.length < size) {
+        //   this.orderData = res.ProOrders;
+        //   this.pageIndex = 1;
+        // } else {
+        //   this.pageIndex++;
+        //   this.orderData = res.ProOrders.concat(this.orderData);
+        // }
+      });
+    },
+    getData() {
+      var url = "api/FactoryBoardProductData/GetJson";
+      var para = {
+        WorkTeamID: this.ID,
+      };
+      Axios({
+        method: "get",
+        url: url,
+        transformRequest: [
+          function (data) {
+            return qs.stringify(data);
+          },
+        ],
+        params: para,
+      }).then((res) => {
+        this.timeData = res.TimeYieldDetails;
+        this.QIData = res.QIDetails;
+        this.statisObj = res.Statisticss;
+        this.total = res.ProOrderTotal;
+
+        // if (res.ProOrders.length == 0 || res.ProOrders.length < size) {
+        //   this.orderData = res.ProOrders;
+        //   this.pageIndex = 1;
+        // } else {
+        //   this.pageIndex++;
+        //   this.orderData = res.ProOrders.concat(this.orderData);
+        // }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.head .title {
+  font-size: 45px;
+  text-align: center;
+  min-height: 5vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.top {
+  // border: 1px solid black;
+  // margin-bottom: -1px;
+  height: 10vh;
+  width: 100%;
+  .top_container {
+    text-align: center;
+    // padding: 6px;
+    border: 1px solid black;
+    border-bottom: 0px;
+    height: 100%;
+    display: flex;
+    // justify-content: space-between;
+    align-items: center;
+    justify-content: space-around;
+    .text {
+      font-size: 36px;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}
+
+.el-table td {
+  border-bottom: 0px;
+}
+.tableDiv {
+  border: 1px solid black;
+  margin-top: -1px;
+  .subTitle {
+    font-size: 32px;
+    text-align: center;
+    margin: 5px 0;
+  }
+}
+
+/deep/.el-table.title_table .el-table__header-wrapper {
+  height: 20%;
+}
+/deep/.el-table.title_table table {
+  height: 100%;
+}
+/deep/.el-table.title_table th {
+  height: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0;
+}
+/deep/.el-table.title_table .el-table__body-wrapper {
+  height: 80%;
+}
+/deep/.el-table.title_table .el-table__body-wrapper table {
+  height: 100%;
+}
+/deep/.el-table.title_table
+  .el-table__body-wrapper
+  table
+  tbody
+  tr:nth-child(n + 5) {
+  display: none;
+}
+/deep/.el-table.title_table td {
+  height: 25%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0;
+}
+/deep/.el-table th > .cell,
+/deep/.el-table .cell {
+  font-size: 22px;
+  color: black;
+  padding: 0px;
+}
+
+</style>
\ No newline at end of file

FTT.Board.VueUI/src/views/board/workShopList/index.vue

@@ -22,6 +22,15 @@
           ></el-input>
         </div>
       </div>
+      <div style="width:400px;margin-bottom:20px">
+        <label for="" style="display:inline-block">车间ID2（生产数据2）：</label>
+        <div style="display:inline-block;width:150px">
+          <el-input
+            v-model="FactoryWorkShopTeamID2"
+            placeholder="请输入车间ID"
+          ></el-input>
+        </div>
+      </div>
       <div style="width:400px;margin-bottom:20px">
         <label for="" style="display:inline-block">切换时间：</label>
         <div style="display:inline-block;width:150px">
@@ -35,6 +44,9 @@
       <el-button type="primary" @click="goNextDE()">动态效率</el-button>
       <el-button type="primary" @click="goNextSJ()">数据展示</el-button>
       <el-button type="primary" @click="goNextSOP()">查询SOP</el-button>
+      <el-button type="primary" @click="goNextSC()">生产数据</el-button>
+      <el-button type="primary" @click="goNextSC2()">生产数据2</el-button>
+      <el-button type="primary" @click="goNextSC3()">生产数据3</el-button>
     </el-main>
   </div>
 </template>
@@ -54,6 +66,7 @@ export default {
       ],
       value: "",
       FactoryWorkShopTeamID: "",
+      FactoryWorkShopTeamID2: "",
       time: 0
     };
   },
@@ -150,6 +163,62 @@ export default {
           time: this.time,
         }
       })
+    },
+    goNextSC(){
+      this.$router.push({
+        name: "ViewSC",
+        query: {
+          time: this.time,
+        }
+      })
+    },
+    goNextSC2(){
+      if (!this.FactoryWorkShopTeamID) {
+        this.$message({
+          message: "请输入车间ID",
+          type: "warning"
+        });
+        return;
+      }
+      if (!this.FactoryWorkShopTeamID2) {
+        this.$message({
+          message: "请输入车间ID2",
+          type: "warning"
+        });
+        return;
+      }
+      this.$router.push({
+        name: "ViewSC2",
+        query: {
+          FactoryWorkShopTeamID1: this.FactoryWorkShopTeamID,
+          FactoryWorkShopTeamID2: this.FactoryWorkShopTeamID2,
+          time: this.time
+        }
+      })
+    },
+    goNextSC3(){
+      if (!this.FactoryWorkShopTeamID) {
+        this.$message({
+          message: "请输入车间ID",
+          type: "warning"
+        });
+        return;
+      }
+      if (!this.FactoryWorkShopTeamID2) {
+        this.$message({
+          message: "请输入车间ID2",
+          type: "warning"
+        });
+        return;
+      }
+      this.$router.push({
+        name: "ViewSC3",
+        query: {
+          FactoryWorkShopTeamID1: this.FactoryWorkShopTeamID,
+          FactoryWorkShopTeamID2: this.FactoryWorkShopTeamID2,
+          time: this.time
+        }
+      })
     }
   }
 };