【编号:16727】数据看板3

FTT.Board.VueUI/src/router/index.js

@@ -21,6 +21,9 @@ import ViewXY from '../views/board/workShopList/kanbanViewXY.vue'
 import Efficiency from '../views/board/workShopList/dynamicEfficiency.vue'
 import DataShow from '../views/board/workShopList/dataShow.vue'
 import SearchSOP from '../views/board/workShopList/searchSOP.vue'
+import ViewSC from '../views/board/workShopList/ViewSC.vue'
+import ViewSC2 from '../views/board/workShopList/ViewSC2.vue'
+import ViewSC3 from '../views/board/workShopList/ViewSC3.vue'
 import login from '../views/machine/login.vue'
 import processSheet from '../views/machine/processSheet.vue'
 
@@ -196,6 +199,30 @@ export default new Router({
       },
       component: SearchSOP
     },
+    {
+      path: '/ViewSC',
+      name: 'ViewSC',
+      meta: {
+        title: '生产数据'
+      },
+      component: ViewSC
+    },
+    {
+      path: '/ViewSC2',
+      name: 'ViewSC2',
+      meta: {
+        title: '生产数据2'
+      },
+      component: ViewSC2
+    },  
+    {
+      path: '/ViewSC3',
+      name: 'ViewSC3',
+      meta: {
+        title: '生产数据3'
+      },
+      component: ViewSC3
+    },
     {
       path: '/login',
       name: 'login',

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

+<template>
+  <div class="con">
+    <div class="left">
+      <img class="img" src="./logo1.png" />
+      <ViewSCCom
+        :ID="FactoryWorkShopTeamID1"
+        style="margin-right: -1px"
+      ></ViewSCCom>
+    </div>
+    <div class="right">
+      <ViewSCCom :ID="FactoryWorkShopTeamID2"></ViewSCCom>
+      <div class="date">
+        <div>{{ formattedDate.split(" ")[0] }}</div>
+        <div style="text-align: center;">{{ formattedDate.split(" ")[1] }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+import qs from "qs";
+import Axios from "@/function/axios.js";
+import ViewSCCom from "./ViewSCCom3.vue";
+export default {
+  components: { ViewSCCom },
+  data() {
+    return {
+      FactoryWorkShopTeamID1: "",
+      FactoryWorkShopTeamID2: "",
+      date: new Date(),
+      datetimer: null,
+      formattedDate: "",
+    };
+  },
+
+  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;
+    var that = this;
+    this.datetimer = setInterval(function () {
+      that.date = new Date();
+      that.getformattedDate();
+    }, 500);
+  },
+  beforeRouteLeave(to, form, next) {
+    window.clearInterval(this.datetimer);
+    next();
+  },
+  methods: {
+    getformattedDate() {
+      var date = this.date;
+      var year = date.getFullYear();
+      var month = (date.getMonth() + 1).toString().padStart(2, "0");
+      var day = date.getDate().toString().padStart(2, "0");
+      var hours = date.getHours().toString().padStart(2, "0");
+      var minutes = date.getMinutes().toString().padStart(2, "0");
+      var seconds = date.getSeconds().toString().padStart(2, "0");
+      this.formattedDate =
+        year +
+        "-" +
+        month +
+        "-" +
+        day +
+        " " +
+        hours +
+        ":" +
+        minutes +
+        ":" +
+        seconds;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.con {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  color: black;
+  // background-image: url('./back.jpg');
+  background: url("./back.jpg") no-repeat center 0;
+  /* 缩放背景图 */
+  background-size: cover;
+  .img {
+    position: absolute;
+    height: 5vh;
+    top: 5px;
+  }
+  .date {
+    position: absolute;
+    top: calc(3vh - 20px);
+    font-size: 20px;
+    right: 15px;
+  }
+}
+
+.left,
+.right {
+  // width: 49%;
+  flex: 1;
+}
+</style>
\ No newline at end of file

FTT.Board.VueUI/src/views/board/workShopList/ViewSCCom3.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 && 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.getData(this.pageSize);
+    this.timer = window.setInterval(() => {
+      this.getData(this.pageSize);
+    }, this.time);
+  },
+  beforeRouteLeave(to, form, next) {
+    window.clearInterval(this.timer);
+    next();
+  },
+  methods: {
+    getData(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.timeData = res.TimeYieldDetails;
+        this.QIData = res.QIDetails;
+        this.statisObj = res.Statisticss;
+        this.total = res.ProOrderTotal;
+        this.orderData = res.ProOrders;
+        if (res.ProOrders.length == 0 || res.ProOrders.length < size) {
+          this.pageIndex = 1;
+        } else {
+          this.pageIndex++;
+        }
+      });
+    },
+  },
+};
+</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;
+    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;
+}
+/deep/.el-table,
+/deep/.el-table__expanded-cell {
+  background-color: transparent !important;
+}
+/deep/.el-table th,
+/deep/.el-table tr {
+  background-color: transparent !important;
+}
+</style>
\ No newline at end of file