imcs_yj_fe/imcs-ui/src/views/zuihou/machiningClient/touchScreen/Index.vue

<template>
  <div
    id="playerMap"
    ref="playerMap"
    class="app-container yunMapDiv"
    style="height: 200%"
  >
    <!-- 全屏 -->
    <el-row :gutter="20" class="rowCls">
      <div class="headerBg">
        <h2>现场工控端</h2>
        <div class="battonDiv">
          <el-tooltip
            v-if="!isFullSreen"
            class="item"
            effect="dark"
            :content="$t('largeScreen.common.screening')"
            placement="top-start"
          >
            <a @click="fullPing()"><i class="el-icon-full-screen"></i></a>
          </el-tooltip>
          <el-tooltip
            v-else
            class="item"
            effect="dark"
            :content="$t('largeScreen.common.cancel')"
            placement="top-start"
          >
            <a @click="exitFullPing()"><i class="el-icon-switch-button"></i></a>
          </el-tooltip>
        </div>
      </div>
      <!--
		<el-image
	      	style="width: 100%; height: 100%"
	      	:src="url"
	      	fit="fill"
	    ></el-image> -->
    </el-row>

    <!-- 区域模块 -->
    <div style="text-align: left; margin-left: 5%">
      <!-- 搜索-部分 -->
      <div class="defaultRow noBorder">
        <el-select
          v-model="opValue"
          :span="2"
          @change="selectChange"
          :placeholder="$t('common.pleaseSelect')"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>

        <span :span="2" style="margin-left: 2%">
          <el-button
            plain
            type="primary"
            icon="el-icon-view"
            size="medium"
            @click="readView"
          >
            读RFID
          </el-button>
        </span>
        <span :span="2" style="margin-right: 5%; float: right">
          <el-button
            plain
            type="primary"
            icon="el-icon-view"
            size="medium"
            @click="navigator"
          >
            我的班表
          </el-button>
        </span>
      </div>

      <el-tabs style="text-align: left; margin-top: 25px">
        <el-tab-pane label="未完成">
          <span class="tabTitle" slot="label"
            ><el-badge :value="taskCount" class="badge"
              ><i class="el-icon-date"></i> 未完成</el-badge
            >
          </span>
          <el-col
            :span="index == 0 ? 12 : 8"
            :gutter="24"
            v-for="(item, index) in taskData.slice(0, 3)"
            :key="item.id"
            :offset="index == 0 ? 0 : 1"
            v-show="item.status < 2 ? true : false"
            :style="
              index == 0
                ? 'zoom:1;min-width:300px;'
                : 'zoom:0.6;min-width:180px;'
            "
          >
            <el-card :gutter="24" class="box-card" style="margin: 5px" >
              <div class="card_content" >
                <div class="block card_header" @click="view(item)">
                  <el-image
                    style="
                      width: 90px;
                      height: 80px;
                      max-width: 200%;
                      max-height: 200%;
                    "
                    :src="resolveLogo('status' + (index + 1) + '.png')"
                    fit="fill"                    
                  >
                  </el-image>
                  <span>{{ item.taskName }}</span>
                  <div class="itemNo">任务编号: {{ item.no }}</div>
                </div>
                <el-form style="margin-top: 10px">
                  <el-form-item label="零件名称:">
                    <span>{{ item.name }}</span>
                  </el-form-item>
                  <el-form-item label="工序号:">
                    <span>{{ item.taskNo }}</span>
                  </el-form-item>
                  <el-form-item label="托盘编号:">
                    <span>{{ item.trayNo }}</span>
                  </el-form-item>
                  <el-form-item label="额定时间:">
                    <span>{{ item.time }}分钟</span>
                    <div class="timeprogress">
                      <el-progress
                        :text-inside="true"
                        :stroke-width="15"
                        :percentage="setPercentage(item.time, item.left)"
                        color="#FF3366"
                        :format="setItemText(item.time, item.left)"
                      ></el-progress>
                    </div>
                  </el-form-item>
                  <el-form-item>
                    <span style="margin: 2% 0; float: right">
                      <el-button
                        plain
                        type="primary"
                        icon="el-icon-view"
                        size="medium"
                        :disabled="index == 0 ? false : true"
                        @click.native="finishTask(item)"
                      >
                        完成
                      </el-button>
                    </span>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="已完成">
          <span class="tabTitle" slot="label">
            <i class="el-icon-date"></i> 已完成
          </span>
          <div class="tableTransparent">
            <el-table
              :data="finishData"              
              border
			        style="height:100%;min-height:80px;"
              :header-cell-style="{ background: '#1890ff', color: '#fff' }"
            >
              <el-table-column
                :label="$t('common.serialNo')"
                width="55px"
                align="center"
              >
                <template slot-scope="scope">
                  <div>
                    {{
                      scope.$index +
                      (queryParams.current - 1) * queryParams.size +
                      1
                    }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="零件名称" align="center">
              </el-table-column>
              <el-table-column prop="taskNo" label="工序号" width="80" align="center">
              </el-table-column>
              <el-table-column prop="taskName" label="工序名称" align="center">
              </el-table-column>
              <el-table-column prop="planTime" label="额定时间" width="100" align="center">
              </el-table-column>
              <el-table-column prop="activeTime" label="实际时间" width="100" align="center">
              </el-table-column>
              <el-table-column prop="startTime" label="开始时间" width="150" align="center">
              </el-table-column>
              <el-table-column prop="endTime" label="结束时间" width="150" align="center">
              </el-table-column>
              <el-table-column prop="overTime" label="是否超时" width="100" align="center">
				  <template slot-scope="scope">
                      {{ scope.overTime ? "是" : "否" }}
                 </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 【查看】组件 -->
    <task-view
      ref="view"
      :dialog-visible="tenantViewVisible"
      @get-data="showRFID"
      @close="viewClose"
    />

    <!-- 【查看】组件 -->
      <task-view1
	      	ref="view1"
	      	:dialog-visible="view1Visible"
	      	@close="viewClose"
	    />
	    <task-view2
	      	ref="view2"
	      	:dialog-visible="view2Visible"
	      	@close="viewClose"
	    />

      <!-- 【查看】组件 -->
	    <task-view3
	      	ref="view3"
	      	:dialog-visible="view3Visible"
	      	@close="viewClose"
	    />
  </div>
</template>


<script>
// 【查看】组件
import TaskView from "./components/View";
import TaskView1 from "./components/View1";
import TaskView2 from "./components/View2";
import TaskView3 from "./components/View3";
import { fullScreen, exitFullScreen, initQueryParams } from "@/utils/commons";
import stationMgrApi from "@/api/machiningClient/stationMgr";
export default {
  name: "TouchScreen",
  components: { TaskView,TaskView1,TaskView2,TaskView3 },
  props: {},
  data() {
    return {
      queryParams: initQueryParams({}),
      options: [
        { name: "上下料站1", value: 1 },
        { name: "上下料站2", value: 2 },
        { name: "上下料站2", value: 3 },
        { name: "上下料站4", value: 4 },
      ],
      opValue: 1,
      taskCount: 6,
      taskData: [
        {
          id: 1,
          taskName: "上料",
          no: "12235566",
          name: "框体",
          taskNo: "OP10",
          trayNo: "TP7788",
          time: 15,
          left: 2,
          status: 1,
          content: "完成装夹，rfid读写",
          step: 1,
        },
        {
          id: 2,
          taskName: "翻面",
          no: "12235566",
          name: "框体",
          taskNo: "OP50",
          trayNo: "TP7788",
          time: 25,
          left: 6,
          status: 1,
          content: "",
          step: 2,
        },
        {
          id: 3,
          taskName: "下料",
          no: "12235566",
          name: "框体",
          taskNo: "OP90",
          trayNo: "TP7788",
          time: 5,
          left: 1,
          status: 0,
          content: "",
          step: 3,
        },
        {
          id: 4,
          taskName: "下料",
          no: "12235566",
          name: "框体",
          taskNo: "OP90",
          trayNo: "TP7788",
          time: 5,
          left: 1,
          status: 0,
          content: "",
          step: 3
        },
      ],
      finishData: [],
      current: 1,
      confirmDisabled: true,
      tenantViewVisible: false,
      view1Visible: false,
      view2Visible: false,
      view3Visible: false,
      isFullSreen: false, // 默认不全屏
    };
  },
  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
  created() {
    this.fetch();
  },
  computed: {
    currentUser() {
      return this.$store.state.account.user;
    },
  },
  mounted() {},
  methods: {
    // 全屏
    fullPing() {
      this.$nextTick(() => {
        // 显示【退出全屏】
        this.isFullSreen = true;
        // 如果是退出全屏
        let $playerMap = this.$refs.playerMap;
        if ($playerMap) {
          fullScreen($playerMap);
        }
      });
    },

    // 退出全屏
    exitFullPing() {
      this.$nextTick(() => {
        // 显示【全屏】
        this.isFullSreen = false;
        // 如果是全屏
        exitFullScreen(document.getElementById("playerMap"));
      });
    },
    selectChange(value) {
      console.log(value);
    },
    fetch() {
      stationMgrApi
        .getStation({ userId: this.$store.state.account.user.id })
        .then((res) => {
          res = res.data;
          if (res.isSuccess) {
            if (res.data.length > 0) {
              this.options = res.data;
            }
          }
        });
    },
    readView() {
      //this.tenantViewVisible = true
      this.$refs.view.read(null);
    },
    showRFID(code) {
      console.log(code);
    },
    resolveLogo(logo) {
      return require(`@/assets/yunMap/${logo}`);
    },
    view (item) {
        let that = this;
        let current = that.options.filter(function (c, i, a) {
          if (c.value == that.opValue) {
             return c
          }
        })
        item.procedurePosition = current[0].name;
        let index = item.step;
        if(index % 3 == 1){
           this.$refs.view1.setTenant(item)
           this.view1Visible = true
        }else if(index % 3 == 2){
           this.$refs.view2.setTenant(item)
           this.view2Visible = true
        }else if(index % 3 == 0){
           this.$refs.view3.setTenant(item)
           this.view3Visible = true
        }
	  },
    viewClose() {
      this.view1Visible = false
      this.view2Visible = false
      this.view3Visible = false      
    },
    setPercentage(time, left) {
      return this.formatGap(time, left)[0] > 100
        ? 100
        : this.formatGap(time, left)[0];
    },
    // 设置进度文本内容
    setItemText(time, left) {
      return () => {
        return this.formatGap(time, left)[1];
      };
    },
    //时间差转换
    formatGap(time, left) {
      return [Number(parseInt((100 * left) / time)), "剩余" + left + "分钟"];
    },
    finishTask(item) {
      item.status = 1;
      this.taskCount = this.taskCount - 1;
      let planTime = Math.ceil(Math.random() * 30);
      let activeTime = Math.ceil(Math.random() * 30);
      let currentTime = new Date();	 
      //let currentTime2 = new Date(currentTime.valueOf() + activeTime * 60);    
	  currentTime.setMinutes(currentTime.getMinutes() + activeTime);  
      let finishParams = {
        planTime: planTime,
        activeTime: activeTime,
        startTime: this.getFullTime(new Date()),
        endTime: this.getFullTime(currentTime),
        overTime: planTime < activeTime ? true : false,
      };
      let result = Object.assign(item, finishParams);
      this.finishData.push(result);
      console.log(this.finishData);
      this.taskData.shift();
    },
    getFullTime(date) {      
      var yy = date.getFullYear(); //年
      var mm = date.getMonth() + 1; //月
      var dd = date.getDate(); //日
      var hh = date.getHours(); //时
      var ii = date.getMinutes(); //分
      var ss = date.getSeconds(); //秒
      var clock = yy + "-";
      if (mm < 10) clock += "0";
      clock += mm + "-";
      if (dd < 10) clock += "0";
      clock += dd + " ";
      if (hh < 10) clock += "0";
      clock += hh + ":";
      if (ii < 10) clock += "0";
      clock += ii + ":";
      if (ss < 10) clock += "0";
      clock += ss;
	  return clock;
    },
    navigator() {
      this.$router.push("/classScheduleMgr/classScheduleMgr");
    },
  },
};
</script>


<style lang="scss" scoped>
.tabDiv {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .battonDiv {
    z-index: 9;
  }
}
.tabTitle {
  font-size: 24px;
  height: 24px;
  line-height: 24px;
}
.card_content {
  padding: 8px;
  width: 100%;
  text-align: left;
  color: #fff;
}
.card_header {
  position: relative;
  border-bottom: 1px solid #fff;
  margin: 10px 0;
}
.indexNo {
  position: absolute;
  top: 25%;
  left: 9%;
  font-size: 24px;
  line-height: 24px;
  height: 24px;
  color: #fff;
  z-index: 999;
}
.indexNo2 {
  position: absolute;
  top: 25%;
  left: 6%;
  font-size: 24px;
  line-height: 24px;
  height: 24px;
  color: #fff;
  z-index: 999;
}
.itemNo {
  font-size: 12px;
  line-height: 12px;
  height: 12px;
  text-align: right;
  color: #fff;
  margin-left: 20%;
  margin-bottom: 10px;
}
.timeprogress >>> .el-progress-bar__outer {
  background-color: #1890ff;
}
.timeprogress .el-progress-bar__inner {
  text-align: center;
}
.el-form-item >>> .el-form-item__label {
  color: #fff;
}
.el-form-item {
  margin-bottom: 0;
}

.tabTitle >>> .el-badge {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
}
.badge {
  margin-top: 10px;
  margin-right: 20px;
}

.tableTransparent >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
</style>