add 追溯报表

wujian

2024-01-31 c74dcb8dca7b9e3eded0d20299f19a26a6b70974

 jcdm-ui/src/views/main/cfkb/Instructions/index.vue

@@ -2,28 +2,32 @@
  <div class="app-container">
    <el-row :gutter="3">
      <el-col :span="6">
        <el-card shadow="always">
          CFMOTO
        <el-card shadow="always" class="boxSize">
          <div class="centerImg">
            <img style="width: 140px;height: 30px;" src="@/assets/logo/jcdm2.png" alt="dark">
<!--            <span class="nextLine" style="font-weight: bold">{{currentTime}}</span>-->
          </div>

        </el-card>
      </el-col>
      <el-col :span="3">
        <el-card shadow="always">
          {{productCode}}
        <el-card shadow="always" class="boxSize">
          <span class="centerText" style="height: 60px">{{locationCode}}</span>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card shadow="always">
          装副轴,拨叉
        <el-card shadow="always" class="boxSize">
          <span class="centerText" >{{locationName}}</span>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="3" style="margin-top: 5px">
      <el-col :span="6">
        <div style="height: 600px;overflow: auto;">
          <div  class="container" style="height: 50px;background-color: #00afff;margin-bottom: 10px">
            <span class="centered">居中文本</span>
        <div style="height: 550px;overflow: auto;">
          <div  class="container" style="height: 50px;background-color: #00afff;margin-bottom: 5px">
            <span class="centered">作业流程</span>
          </div>
          <div v-for="(item,index) in tableData" :key="item.sort" class="outerDiv" :id="'outerDiv'+index">
          <div v-for="(item,index) in tableData" :key="item.index" class="outerDiv" :id="'outerDiv'+index">
            <div class="innerDiv1">
              <div class="innerDiv2">
                <span class="content_left">{{ index+1 }}</span>
@@ -34,55 +38,84 @@
        </div>
      </el-col>
      <el-col :span="18">
        <el-col :span="20">
          <el-card style="height: 600px" shadow="always">
            <el-row style="height: 100px">
              {{address}}
        <el-col :span="18">
          <el-card style="height: 550px" shadow="always">
            <el-row style="height: 60px">
              <span style="color: #31b431;font-size: 20px;font-weight: bold">{{address}}</span>
            </el-row>
            <el-row style="height: 400px">
              <el-image style="height: 390px;width: 960px" :src="src"></el-image>
            <el-row style="height: 420px">
              <div class="centerImg">
                <el-image style="height: 400px;width: 400px;" :src="src"></el-image>
              </div>

<!--              {{src}}-->
            </el-row>
            <el-row style="height: 100px">
              <el-button type="primary" @click="backClick()" style="float: left" icon="el-icon-arrow-left">上一步</el-button>
              <el-button type="primary" @click="nextStep()" style="float: right">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            <el-row style="height: 100%;width: 100%">
              <el-button type="primary" @click="backClick()" style="height: 50%; width: 20%; font-size: 20%; float: left" icon="el-icon-d-arrow-left">上一步</el-button>
              <el-button type="primary" @click="nextStep()" style="height: 50%; width: 20%; font-size: 20%; float: right">下一步<i class="el-icon-d-arrow-right"></i></el-button>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card style="height: 600px" shadow="always">
            <el-row style="height: 100px;margin-top: 100px">
              <el-button type="primary" @click="processDocuments()" style="float: left" icon="el-icon-folder-opened">工艺文件</el-button>
        <el-col :span="6">
          <el-card style="height: 550px;width: 100%" shadow="always">
            <el-row >
              <div class="centerImg" style="height: 30%; margin-top: 60%">
                <el-button type="primary" @click="processDocuments()" style="height: 40%; width: 90%; font-size: 70%; float: left" icon="el-icon-folder-opened">工艺文件</el-button>
              </div>

            </el-row>
            <el-row style="height: 50px;margin-top: 5px">
              <el-button type="primary" @click="changeProducts('2V91')" style="width: 100px" icon="el-icon-s-unfold">2V91</el-button>
            <el-row style="height: 30%;margin-top: 40%" class="centerImg">
              <el-button type="info" @click="changeProducts('2V91')" :class="{ 'active': isClickd === '2V91' }" style="height: 40%; width: 80%; font-size: 70%; float: left" icon="el-icon-s-unfold">2V91</el-button>
            </el-row>
            <el-row style="height: 50px;">
              <el-button type="primary" @click="changeProducts('191')" style="width: 100px" icon="el-icon-s-unfold">191</el-button>
            <el-row style="height: 30%;margin-top: 5%" class="centerImg">
              <el-button type="info" @click="changeProducts('191')" :class="{ 'active': isClickd === '191' }" style="height: 40%; width: 80%; font-size: 70%; float: left" icon="el-icon-s-unfold">191</el-button>
            </el-row>
            <el-row style="height: 50px;">
              <el-button type="primary" @click="changeProducts('0JWF')" style="width: 100px" icon="el-icon-s-unfold">0JWF</el-button>
            <el-row style="height: 30%;margin-top: 5%" class="centerImg">
              <el-button type="info" @click="changeProducts('0JWF')" :class="{ 'active': isClickd === '0JWF' }" style="height: 40%; width: 80%; font-size: 70%; float: left" icon="el-icon-s-unfold">0JWF</el-button>
            </el-row>
          </el-card>
        </el-col>

      </el-col>
    </el-row>
    <div>
      <el-dialog
        title="工艺文件"
        :visible.sync="dialogVisible"
        width="70%"
        @close="closeMethod"

      >
        <div><el-image style="height: 1090px;width: 960px;margin-left: 33px" :src="mainProcessSrc"></el-image></div>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false" style="margin-right: 80px">确 定</el-button>
  </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
import {getMainProductProcess, getProductProcess} from "@/api/main/bs/formulaChild/formulaChild";
import {listStationConf,getIp} from "@/api/main/sc/stationConf";

export default {
  name: "index",
  data() {
    return {
      dialogVisible: false,
      mainProcessSrc: '',
      mainProcess: [],
      isClickd: '', // 初始化为未点击状态
      locationCode: "未配置",
      locationName: "未配置工位",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productCode: null,
      },
      currentTime:'',
      productCode: '2V91',
      tableData: [{
        img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594',
@@ -130,7 +163,7 @@
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      address: '',
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      // src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      // src: 'file:///D:/img/qt.jpg'

      intervalId: null,
@@ -141,20 +174,68 @@
    this.tableData = []
  },
  mounted() {
    this.changeProducts(this.productCode)
    this.getStationConf()
    // this.changeProducts(this.productCode)
    // this.changeProducts("2V91")
    this.getNowTime()
    // this.autoShow()
  },
  // computed: {
  //   currentTime:
  // },
  methods: {
    /** 查询工位终端配置列表 */
    getStationConf() {
      getIp().then(response => {
        let queryParams = {
          ipAddress: response.msg,
        }
        listStationConf(queryParams).then(response => {
          this.locationName = response.rows[0].processesName
          this.locationCode = response.rows[0].processesCode
          console.log('llllll',this.locationCode)
          this.changeProducts("2V91")
        });

      });

    },
    closeMethod(){
      this.mainProcessSrc = ''
    },
    //获取当前时间
    getNowTime () {
      let speed = 1000
      let that = this
      let theNowTime = function () {
        that.currentTime = that.timeNumber()
      }
      setInterval(theNowTime, speed)
    },
    timeNumber () {
      let today = new Date()
      let date = today.getFullYear() + '-' + this.twoDigits(today.getMonth() + 1) + '-' + this.twoDigits(today.getDate())
      let time = this.twoDigits(today.getHours()) + ':' + this.twoDigits(today.getMinutes()) + ':' + this.twoDigits(today.getSeconds())
      return date + '  ' + time
    },
    twoDigits (val) {
      if (val < 10) return '0' + val
      return val
    },
    // 定时触发
    autoShow() {
      const _this = this
      this.intervalId = setInterval(() => {
        _this.setBg()
      }, 2000)
      }, 10000)
    },
    setImg(index) {
      this.address = this.tableData[index].address
      this.src = this.tableData[index].img
    },
    cleanImg(){
      this.address = ''
      this.src = ''
    },
    setBg() {
      if (document.getElementById('outerDiv' + (this.tableData.length - 1)).style.background === 'yellow') {
@@ -168,7 +249,7 @@
      for (let i = 0; i < this.tableData.length - 1; i++) {
        if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
          this.setImg(i+1)
          document.getElementById('outerDiv' + i).style.background = 'green'
          document.getElementById('outerDiv' + i).style.background = 'lightgreen'
          document.getElementById('outerDiv' + (i+1)).style.background = 'yellow'
          return;
        }
@@ -178,7 +259,7 @@
      for (let i = 0; i < this.tableData.length; i++) {
        if (document.getElementById('outerDiv' + i).style.background === 'yellow') {
          this.setImg(i + index)
          document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'green'
          document.getElementById('outerDiv' + i).style.background = index < 0 ? 'white' : 'lightgreen'
          document.getElementById('outerDiv' + (i + index)).style.background = 'yellow'
          return;
        }
@@ -191,21 +272,37 @@
      this.getUpOrDown(1)
    },
    processDocuments(){

      getMainProductProcess(this.queryParams).then(res => {
        this.mainProcess = res.rows
        if (res.rows!=null && res.rows.length>0){
          this.mainProcessSrc = res.rows[0].img
        }
      })
      this.dialogVisible = true
    },
    changeProducts(val){


      console.log("------更换图片",val)
      console.log("------目录==============",this.tableData)
      console.log("locationCode",this.locationCode)
      this.productCode = val
      const _this = this

      this.isClickd = val; // 切换isClicked的值
      /** 查询配方配置子信息列表 */
      this.queryParams.productCode = val;
      listFormulaChild(this.queryParams).then(response => {
        // this.tableData = [];
      this.queryParams.processesCode = this.locationCode
      getProductProcess(this.queryParams).then(response => {
        this.tableData = [];
        this.cleanImg()
        this.tableData = response.rows;
        this.$nextTick(() => {
          clearInterval(this.intervalId);
          document.getElementById('outerDiv0').style.background = 'yellow'
          for (let i = 1; i < this.tableData.length; i++){
            document.getElementById('outerDiv' + i).style.background =  'white'
          }
          this.setImg(0)
          this.autoShow()
        })
@@ -220,10 +317,10 @@
<style scoped>
.outerDiv {
  width: fit-content;
  min-width: 100%;
  min-width: 102%;
  /*width: 300px;*/
  height: 50px;
  margin-bottom: 10px;
  height: 30px;
  margin-bottom: 5px;
}

.innerDiv1 {
@@ -251,6 +348,7 @@
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 20px;
}
.container {
  display: flex;
@@ -261,6 +359,41 @@

.centered {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 20px;
}
.centerText{
  color: black;
  font-weight: bold;
  font-size: 20px;
  display: flex;
  justify-content: center;
  margin-top: 5px
}
.active {
  background-color: #31b431; /* 点击后的背景色 */
}
::v-deep .el-dialog {
  height: 90%;
  overflow-y: auto;
}
::v-deep .el-dialog__footer{
  margin-top: 10px;
}
::v-deep .el-card .is-always-shadow{
  height: 60px;
}
.boxSize{
  height: 60px;
}
.nextLine{
  display: block;
}
.centerImg{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>