src/views/set.vue

@@ -282,42 +282,123 @@
                  style="width: 100%"
                >
                  <el-option label="modbusTCP" value="modbusTCP"></el-option>
                  <el-option label="serial" value="serial"></el-option>
                  <el-option label="串口" value="serial"></el-option>
                  <el-option label="modbusRTU" value="modbusRTU"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="波特率"
                prop="baudRate"
                v-if="form.method == 'serial'"
                class="form-item float_right"
              >
                <el-input
                  v-model="form.baudRate"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="串口名称"
                prop="serialName"
                v-if="form.method == 'serial'"
                class="form-item float_right"
              >
                <el-input
                  v-model="form.serialName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="PLC地址"
                v-if="form.method == 'modbusTCP'"
                prop="address"
                class="form-item float_right"
              >
                <el-input
                  v-model="form.address"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <template v-if="form.method === 'modbusTCP'">
                <el-form-item
                  label="PLC地址"
                  prop="address"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.address"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="端口号"
                  prop="port"
                  class="form-item float_right"
                >
                  <el-input
                    v-model.number="form.port"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>

              <template v-if="form.method === 'serial'">
                <el-form-item
                  label="波特率"
                  prop="baudRate"

                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.baudRate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="串口名称"
                  prop="serialName"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.serialName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>

              <template v-if="form.method === 'modbusRTU'">
                <el-form-item
                  label="数据位"
                  prop="dataBit"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.dataBit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="停止位"
                  prop="stopBit"
                  class="form-item float_right"
                >
                  <el-input
                    type="number"
                    min="1"
                    v-model="form.stopBit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item label="校验方式" prop="parity" class="form-item">
                  <el-select
                    v-model="form.parity"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="奇校验" :value="1"></el-option>
                    <el-option label="偶校验" :value="2"></el-option>
                    <el-option label="无校验" :value="3"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item
                  label="波特率"
                  prop="baudRate"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.baudRate"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>

                <el-form-item
                  label="串口名称"
                  prop="serialName"
                  class="form-item float_right"
                >
                  <el-input
                    v-model="form.serialName"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </template>


              <!-- <el-form-item label="端口名称" prop="portName" class="form-item2">
                <el-select
                  v-model="form.portName"
@@ -333,17 +414,6 @@
                  ></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item
                label="端口号"
                prop="port"
                v-if="form.method == 'modbusTCP'"
                class="form-item float_right"
              >
                <el-input
                  v-model.number="form.port"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </div>
            <!-- <el-button
              style="margin-bottom: 10px; float: right"
@@ -511,8 +581,13 @@
        portName: "",
        port: "",
        address: "",
        baudRate:'',
        // 波特率默认9600
        baudRate: 0,
        serialName:'',
        dataBit: 0,
        stopBit: 0,
        // 校验方式 1奇校验2偶校验3无校验
        parity: 3,
      },

      rules: {
@@ -657,6 +732,14 @@
      getPlc().then((res) => {
        if (res.code == 200) {
          this.form = JSON.parse(JSON.stringify(res.data));
          this.form = {
            ...this.form,
            dataBit: this.form?.dataBit || 0,
            stopBit: this.form?.stopBit || 0,
            parity: this.form?.parity || 3,
            baudRate: this.form?.baudRate || 0,
          }
          console.log('f',this.form)
          this.pclList = res.data.details
            ? JSON.parse(JSON.stringify(res.data.details))
            : [];
@@ -907,7 +990,32 @@

    saveThree() {
      let params = JSON.parse(JSON.stringify(this.form));
      params.details = this.pclList;
      params = {
        ...params,
        details : this.pclList,
        dataBit: +params.dataBit,
        stopBit: +params.stopBit,
        parity: +params.parity,
        baudRate: +params.baudRate
      }

      if (params.method === 'modbusRTU'){
        if (!params.dataBit){
          this.$message.error("数据位不能为 0")
          return
        }

        if (!params.stopBit){
          this.$message.error("停止位不能为 0")
          return
        }

        if (!params.baudRate){
          this.$message.error("波特率不能为 0")
          return
        }
      }

      setPlc(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("PLC配置成功！");

 src/views/visualization.vue

@@ -53,7 +53,7 @@
        >
        <template v-if="taskData">
          <div class="gong-date">
            工序运行时间：{{ getFormatTime(taskData.Procedure.startTime) }}
            工序运行时间：{{ getTaskRunningTime(taskData.Procedure.realStartTime,taskData.Procedure.realEndTime) }}
          </div>
          <div class="statelist">
            <span class="title-item"
@@ -902,7 +902,7 @@
              }
            }
            this.resResult[i]=res;
            console.log( this.resResult[i],'===res111')
            // console.log( this.resResult[i],'===res111')
          })
        }
      }
@@ -1058,23 +1058,55 @@
      let now = new Date();
      this.formatTime2 = this.getDateObj(now, "yyyy年MM月dd日");
    },
    getFormatTime(date){
      const getCha=()=>{
        let now=new Date().getTime()
        let String=now-date*1000;
        let seconds=Math.floor(String/1000)
        let minutes=Math.floor(seconds/60)

        let days=Math.floor(String/1000/60/60/24)
        let hours=Math.floor(minutes/60)-days*24
        let m=minutes-days*24*60-hours*60
        return days+'天'+hours+'时'+m+'分'
    /**
     * 计算时间段, 注意参数要求时间戳为 JS Date 的13位时间戳
     * @param {number} startTime
     * @param {number} endTime
     * @return {string}
     */
    calcRunningDuration(startTime,endTime){
      let timeDuration=endTime-startTime;
      if (timeDuration<0){
        return '0天0时0分'
      }
      let d= getCha()

      let seconds=Math.floor(timeDuration/1000)
      let minutes=Math.floor(seconds/60)

      let days=Math.floor(timeDuration/1000/60/60/24)
      let hours=Math.floor(minutes/60)-days*24
      let m=minutes-days*24*60-hours*60
      return `${days}天${hours}时${m}分`
    },

    /**
     * 工序运行时间
     * 根据接口返回 realStartTime realEndTime 判断如何展示
     * 如果 realEndTime 为 0 则 用当前时间 - realStartTime
     * 如果 存在 realEndTime, 则 realEndTime - realStartTime
     * 注意 realStartTime realEndTime 是接口返回的10位时间戳
     * @param realStartTime
     * @param realEndTime
     * @return {string}
     */
    getTaskRunningTime(realStartTime,realEndTime){
      const getInfo = ()=>{
        if (!realStartTime && !realEndTime){
          return '--'
        }
        if(!realEndTime){
          const now = Math.floor(new Date().getTime()/1000) * 1000
          return this.calcRunningDuration(realStartTime*1000,now)
        }

        return this.calcRunningDuration(realStartTime*1000,realEndTime*1000)
      }

      let result = getInfo()
      setInterval(() => {
       d= getCha();
        result = getInfo();
      }, 6000);
      return date?d:'--';
      return result;
    },
    setInterCard(value, name, i) {
      if (this.TasksCopy[i].Procedure.procedure[value]!=null) {