优化bug与添加一键删除按钮

Zhang-Hong-Lin

2 天以前 232cdf071bfe3bd2b77ba05accba89b67fcc1edc

 ÏîÄ¿´úÂë/WCS/WIDESEAWCS_Client/src/views/Home.vue

@@ -1,24 +1,631 @@
<template>
  <div class="title"></div>
  <div id="title">
    <!--上-->
    <div id="akuang">
      <!--å·¦-->
      <div class="xkuang">
        <div class="xian" style="margin-top: 10px">
          <p class="name">入库批次号：</p>
          <div class="zhi">{{ InBatch }}</div>
          <button class="gai" @click="updates(1)">编辑</button>
        </div>
        <div class="xian">
          <p class="name">出库批次号：</p>
          <div class="zhi">{{ OutBatch }}</div>
          <button class="gai" @click="updates(2)">编辑</button>
        </div>
        <div class="xian">
          <p class="name">出库类型：</p>
          <div class="zhi">
            <input type="radio" name="a" id="a" />自产
            <input type="radio" name="a" id="b" />外购
          </div>
          <button class="gai" @click="updates(3)">编辑</button>
        </div>
      </div>
      <!--中-->
      <div class="xkuang">
        <div class="xian" style="margin-top: 10px">
          <p class="name">入库类型：</p>
          <div class="zhi">
            <input type="radio" name="c" id="e" />正常入库
            <input type="radio" name="c" id="f" />直接出库
          </div>
          <button class="gai" @click="updates(5)">编辑</button>
        </div>
        <div class="xian">
          <p class="name">存放位置：</p>
          <div class="zhi">
            <input type="radio" name="d" id="g" />快速出库
            <input type="radio" name="d" id="h" />快速入库
          </div>
          <button class="gai" @click="updates(6)">编辑</button>
        </div>
        <div class="xian">
          <p class="name">是否出库：</p>
          <div class="zhi">
            <input type="radio" name="b" id="c" />是
            <input type="radio" name="b" id="d" />否
          </div>
          <button class="gai" @click="updates(4)">编辑</button>
        </div>
      </div>
      <!--右-->
      <div class="xkuang">
        <div class="xian" style="margin-top: 10px">
          <p class="names">上板数据记录：</p>
          <div class="zhis">{{ data.R_CommonRecorder }}</div>
        </div>
        <div class="xian">
          <p class="names">剔除数据记录：</p>
          <div class="zhis">{{ data.R_SpecialRecorder }}</div>
        </div>
        <div class="xian">
          <p class="names">极板总重量：</p>
          <div class="zhis">{{ data.R_TotalWeight }}</div>
        </div>
      </div>
    </div>
    <!--下-->
    <div id="bkuang" style="border-top: none">
      <div class="skuang">
        <div class="zhuname">天车</div>
        <div class="zhankuang">
          <div class="xname">天车当前运行模式:</div>
          <div class="xzhi">{{ data.R_RunMode }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">天车当前运行状态:</div>
          <div class="xzhi">{{ data.R_RunState }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">天车报警代码:</div>
          <div class="xzhi">{{ data.R_AlarmCode }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">天车任务状态:</div>
          <div class="xzhi">{{ data.R_TaskState }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">天车大车当前位置:</div>
          <div class="xzhi">{{ data.R_CurrentLine }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">天车小车当前位置:</div>
          <div class="xzhi">{{ data.R_CurrentColumn }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">起升当前位置:</div>
          <div class="xzhi">{{ data.R_RiseUp_Position }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">任务号:</div>
          <div class="xzhi">{{ data.R_TaskNumber }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">1号货爪是否有货:</div>
          <div class="xzhi">{{ data.R_Loaded_1 }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">2号货爪是否有货:</div>
          <div class="xzhi">{{ data.R_Loaded_2 }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">重量:</div>
          <div class="xzhi">{{ data.weight }}</div>
        </div>
      </div>
      <div class="skuang">
        <div class="zhuname">规整机</div>
        <div class="zhankuang">
          <div class="xname">规整机投入使用:</div>
          <div class="xzhi">{{ data.R_GZJ_isWork }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">上料模式轨道车:</div>
          <div class="xzhi">{{ data.R_RGVMode }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">上料模式叉车:</div>
          <div class="xzhi">{{ data.R_CCMode }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">东跨架子可取板:</div>
          <div class="xzhi">{{ data.R_DK_isready }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">西跨架子可取板:</div>
          <div class="xzhi">{{ data.R_XK_isready }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">剔除架子可放板:</div>
          <div class="xzhi">{{ data.R_TC_isready }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">剔除上料模式:</div>
          <div class="xzhi">{{ data.R_TCMode }}</div>
        </div>
      </div>
      <div class="skuang">
        <div class="zhuname">整形机</div>
        <div class="zhankuang">
          <div class="xname">整形机投入使用:</div>
          <div class="xzhi">{{ data.R_ZXJ_isWork }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">上料模式轨道车:</div>
          <div class="xzhi">{{ data.R_ZXJ_RGVMode }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">上料模式行车:</div>
          <div class="xzhi">{{ data.R_ZXJ_TCMode }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">剔除位可取板:</div>
          <div class="xzhi">{{ data.R_ZXJ_TC_isready }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">剔除模式行车:</div>
          <div class="xzhi">{{ data.R_TCMode_TC }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">剔除模式叉车:</div>
          <div class="xzhi">{{ data.R_TCMode_CC }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">行车可准备取板:</div>
          <div class="xzhi">{{ data.R_HC_isReady }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">行车可放板:</div>
          <div class="xzhi">{{ data.R_HC_isReadyWork }}</div>
        </div>
        <div class="zhankuang">
          <div class="xname">进料小车安全位:</div>
          <div class="xzhi">{{ data.R_issafe }}</div>
        </div>
      </div>
    </div>
    <div id="ti">
      <div id="guan" @click="guanbi">X</div>
      <div class="dakuang" v-if="xuan == 1">
        <input type="text" id="shu1" />
      </div>
      <div class="dakuang" v-if="xuan == 2">
        <input type="text" id="shu2" />
      </div>
      <div class="dakuang" v-if="xuan == 3">
        <input type="radio" name="aa" id="aa" class="ding" />
        <div class="yan">自产</div>
        <input type="radio" name="aa" id="bb" class="ding" style="margin-left: 40px;" />
        <div class="yan">外购</div>
      </div>
      <div class="dakuang" v-if="xuan == 4">
        <input type="radio" name="bb" id="cc" class="ding" />
        <div class="yan">是</div>
        <input type="radio" name="bb" id="dd" class="ding" style="margin-left: 40px;" />
        <div class="yan">否</div>
      </div>
      <div class="dakuang" v-if="xuan == 5" style="margin-left: -100px;width:300px">
        <input type="radio" name="cc" id="ee" class="ding" />
        <div class="yan">正常入库</div>
        <input type="radio" name="cc" id="ff" class="ding" style="margin-left: 40px;" />
        <div class="yan">直接出库</div>
      </div>
      <div class="dakuang" v-if="xuan == 6" style="margin-left: -100px;width:300px">
        <input type="radio" name="cc" id="gg" class="ding" />
        <div class="yan">快速入库</div>
        <input type="radio" name="cc" id="hh" class="ding" style="margin-left: 40px;" />
        <div class="yan">快速出库</div>
      </div>
      <div id="xiugai" @click="xiugai()">修改</div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ref, reactive, nextTick, computed, watch } from "vue";
import { useStore } from "vuex";
import { onMounted } from "vue";
import axios from "axios";

export default {
  setup() {
  data() {
    return {
      xuan: 0
    };
  },
  methods: {
    updates(x) {
      if (x == 1) {
        document.getElementById("ti").style.display = "block";
        this.xuan = 1;
      } else if (x == 2) {
        document.getElementById("ti").style.display = "block";
        this.xuan = 2;
      } else if (x == 3) {
        document.getElementById("ti").style.display = "block";
        this.xuan = 3;
      } else if (x == 4) {
        document.getElementById("ti").style.display = "block";
        this.xuan = 4;
      } else if (x == 5) {
        document.getElementById("ti").style.display = "block";
        this.xuan = 5;
      } else if (x == 6) {
        document.getElementById("ti").style.display = "block";
        this.xuan = 6;
      }
    },
    xiugai() {
      if (this.xuan == 1) {
        let w = document.getElementById("shu1").value;
        let http = "api/Batch/UpdateInBatch/?batch=" + w;
        let s = {};
        if (w == "" || w == null) {
          alert("请输入");
        } else {
          this.gai(http, s);
        }
      } else if (this.xuan == 2) {
        let w = document.getElementById("shu2").value;
        let http = "api/Batch/UpdateOutBatch/?batch=" + w;
        let s = {};
        if (w == "" || w == null) {
          alert("请输入");
        } else {
          this.gai(http, s);
        }
      } else if (this.xuan == 3) {
        let w = "api/Batch/UpdateOutStorageMode";
        let n = document.getElementById("aa").checked;
        let m = document.getElementById("bb").checked;

        if (n) {
          let http = w + "?isout=0";
          let s = {};
          this.gai(http, s);
        } else if (m) {
          let http = w + "?isout=1";
          let s = {};
          this.gai(http, s);
          alert(n + "" + m);
        } else {
          alert("请选择");
        }
      } else if (this.xuan == 4) {
        let w = "api/OutStock/UpdateIsOutStock";
        let n = document.getElementById("cc").checked;
        let m = document.getElementById("dd").checked;
        if (n) {
          let http = w + "?isout=1";
          let s = {};
          this.gai(http, s);
        } else if (m) {
          let http = w + "?isout=0";
          let s = {};
          this.gai(http, s);
        } else {
          alert("请选择");
        }
      } else if (this.xuan == 5) {
        let w = "api/OutStock/UpdateInOut";
        let n = document.getElementById("ee").checked;
        let m = document.getElementById("ff").checked;
        if (n) {
          let http = w + "?isout=1";
          let s = {};
          this.gai(http, s);
        } else if (m) {
          let http = w + "?isout=2";
          let s = {};
          this.gai(http, s);
        } else {
          alert("请选择");
        }
      } else if (this.xuan == 6) {
        let w = "api/StorageMode/UpdateStoragemode/";
        let n = document.getElementById("gg").checked;
        let m = document.getElementById("hh").checked;
        if (n) {
          let http = w + "?storagemode=2";
          let s = {};
          this.gai(http, s);
        } else if (m) {
          let http = w + "?storagemode=1";
          let s = {};
          this.gai(http, s);
        } else {
          alert("请选择");
        }
      }
    },
    gai(http, s) {
      axios.post(http, s).then(x => {
        document.getElementById("ti").style.display = "none";
        alert("修改成功");
      });
    },
    guanbi() {
      document.getElementById("ti").style.display = "none";
    }
  },
  setup() {
    const store = useStore();
    const data = ref({});

    const InBatch = ref();
    const OutBatch = ref();

    const cha = () => {
      axios.post("api/Batch/getPageData", { rows: 30 }).then(x => {
        InBatch.value = x.data.rows[0].inBatch;
        OutBatch.value = x.data.rows[0].outBatch;
        if (x.data.rows[0].materType == 0) {
          document.getElementById("a").checked = true;
        } else if (x.data.rows[0].materType == 1) {
          document.getElementById("b").checked = true;
        }
      });
      axios.post("api/OutStock/getPageData", { rows: 30 }).then(x => {
        if (x.data.rows[0].isout == 1) {
          document.getElementById("c").checked = true;
        } else if (x.data.rows[0].isout == 0) {
          document.getElementById("d").checked = true;
        }

        if (x.data.rows[0].inOut == 1) {
          document.getElementById("e").checked = true;
        } else if (x.data.rows[0].inOut == 2) {
          document.getElementById("f").checked = true;
        }
      });
      axios.post("api/StorageMode/getPageData", { rows: 30 }).then(x => {
        if (x.data.rows[0].storagemode == 1) {
          document.getElementById("g").checked = true;
        } else if (x.data.rows[0].storagemode == 2) {
          document.getElementById("h").checked = true;
        }
      });
    };

    onMounted(() => {
      nextTick(() => {
        setInterval(() => {
          data.value = store.state.homedata;
          cha();
          let xian = document.getElementsByClassName("xzhi");
          for (let i = 0; i < xian.length; i++) {
            if (xian[i].innerHTML == "true") {
              xian[i].style.color = "green";
            } else if (xian[i].innerHTML == "false") {
              xian[i].style.color = "red";
            }
          }
        }, 3000);
      });
    });
    return {
      data,
      InBatch,
      OutBatch
    };
  }
}
};
</script>

<style scoped>
.title {
  line-height: 70vh;
.zhis {
  width: 45%;
  height: 5vh;
  float: left;
  margin-top: 10px;
  margin-left: -10%;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
  color: orange;
  font-size: 1.1cqw;
  color: white;
}
.names {
  width: 28%;
  height: 5vh;
  float: left;
  margin-top: 10px;
  margin-left: 20%;
  line-height: 60px;
  text-align: right;
  font-size: 1.1cqw;
  color: white;
}
.ding {
  float: left;
  width: 20px;
  height: 20px;
  margin-top: 7px;
}
.yan {
  color: white;
  float: left;
  font-size: 25px;
}
.dakuang {
  width: 250px;
  height: 50px;
  position: absolute;
  top: 150px;
  left: 200px;
}
#xiugai {
  width: 100px;
  height: 30px;
  float: left;
  border-radius: 5px;
  text-align: center;
  line-height: 30px;
  cursor: pointer;
  border: 1px solid white;
  color: white;
  background: rgba(255, 255, 255, 0.5);
  font-size: 25px;
  position: absolute;
  top: 150px;
  left: 450px;
}
#xiugai:hover {
  background: #f60;
}
#shu1,
#shu2 {
  width: 200px;
  height: 30px;
  float: left;
  margin-top: 0px;
  margin-right: 0px;
  border-radius: 5px;
  border: 1px solid white;
}
#guan {
  width: 40px;
  height: 40px;
  float: left;
  font-size: 1.1cqw;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin-left: 560px;
  color: white;
  position: absolute;
}
#ti {
  width: 600px;
  height: 300px;
  position: relative;
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
  top: 230px;
  left: 35%;
  display: none;
  background-image: url("../img/1.png");
  background-repeat: no-repeat;
  background-size: 170%;
  background-position: -220px 0px;
}
.zhuname {
  width: 100%;
  height: 5vh;
  float: left;
  text-align: center;
  line-height: 50px;
  font-weight: 700;
  font-size: 1.1cqw;
  color: white;
}
.xname {
  width: 70%;
  height: 80px;
  float: left;
  line-height: 7vh;
  font-size: 1.1cqw;
  color: white;
}
.xzhi {
  width: 30%;
  height: 7vh;
  float: left;
  line-height: 65px;
  font-size: 1.1cqw;
  color: white;
}
.zhankuang {
  width: 45%;
  height: 7vh;
  margin-top: 10px;
  margin-left: 5%;
  float: left;
}
.gai {
  width: 15%;
  height: 3vh;
  float: left;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 22px;
  margin-left: 1%;
  font-size: 1.1cqw;
}
.gai:hover {
  background-color: #f60;
  color: white;
}
.zhi {
  width: 45%;
  height: 5vh;
  float: left;
  margin-top: 10px;
  margin-left: 1%;
  line-height: 60px;
  text-align: center;
  font-size: 1.1cqw;
  color: white;
}
.name {
  width: 28%;
  height: 5vh;
  float: left;
  margin-top: 10px;
  margin-left: 1%;
  line-height: 60px;
  text-align: right;
  font-size: 1.1cqw;
  color: white;
}
.xian {
  width: 100%;
  height: 9vh;
  float: left;
}
#title {
  float: left;
  width: 95%;
  height: 88vh;
  margin-top: 40px;
  margin-left: 3%;
  background-image: url("../img/1.png");
  background-repeat: no-repeat;
  background-size: 100%;
  container-type: inline-size;
}
#akuang {
  width: 100%;
  height: 33vh;
  float: left;
}
#bkuang {
  width: 100%;
  height: 55vh;
  float: left;
}
.xkuang {
  float: left;
  width: 31%;
  height: 28vh;
  border-top: none;
  border-left: none;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.2);
  margin-left: 1.7%;
  margin-top: 20px;
  border-radius: 10px;
}
.skuang {
  width: 31%;
  height: 55vh;
  float: left;
  border-top: none;
  border-left: none;
  border-bottom: none;
  background: rgba(255, 255, 255, 0.2);
  margin-left: 1.7%;
  border-radius: 10px;
}
</style>