add 选瓦

wujian

2024-07-10 59e2283a10aee45e6a98e34b432ba345095116db

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

@@ -2,78 +2,11 @@
  <div class="app-container">
    <div style="width: 100%">
      <el-card class="box-card" >
        <el-form :model="from" ref="queryForm" :inline="true" >
          <el-form-item label="箱体码:" prop="scanObject1" >
            <el-input
              style="width: 350px"
              v-model="from.scanObject1"
              placeholder="请输入箱体码"
              clearable
              @keyup.enter.native="handleQuery"
              @input="handleQuery"
            />
          </el-form-item>
          <el-form-item label="曲轴码:" prop="scanObject2" >
            <el-input
              style="width: 350px"
              v-model="from.scanObject2"
              placeholder="请输入曲轴码"
              clearable
              @keyup.enter.native="handleQuery"
              @input="handleQuery"
            />
          </el-form-item>
        </el-form>
        <el-form :model="from" ref="queryForm" :inline="true" >
          <el-form-item  label="机型:" prop="productSeries" >
            <el-select v-model="from.productSeries" placeholder="" clearable   style="width: 105px">
              <el-option

                v-for="dict in dict.type.productseries"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                @keyup.enter.native="handleQuery"
              />
            </el-select>
          </el-form-item>
<!--          <el-form-item  label="轴名称:" prop="axisName" >-->
<!--            <el-select v-model="from.axisName" placeholder="" clearable style="width: 125px">-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.axisname"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--                @keyup.enter.native="handleQuery"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item  label="颈名称:" prop="neckName" >-->
<!--            <el-select v-model="from.neckName" placeholder="" clearable style="width: 125px">-->
<!--              <el-option-->
<!--                v-for="dict in dict.type.neckname"-->
<!--                :key="dict.value"-->
<!--                :label="dict.label"-->
<!--                :value="dict.value"-->
<!--                @keyup.enter.native="handleQuery"-->
<!--              />-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item  label="瓦名称:" prop="tileName" >
            <el-select v-model="from.tileName" placeholder="" clearable style="width: 125px" >
              <el-option
                v-for="dict in dict.type.tilename"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
                @keyup.enter.native="handleQuery"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-refresh" @click="handleQuery">查询</el-button>
        </el-form>
        <div slot="header" style="text-align: center">
          <span style="font-weight: bold; font-size: 30px; text-align: center">曲轴配瓦</span>
        </div>
      </el-card>
      <el-col :span="24" >
      <el-col :span="14" >
        <el-card class="bottom-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-tickets"></i>
@@ -89,18 +22,18 @@
            <el-descriptions-item label="曲轴码">
              <span>{{queryParams.scanObject2}}</span>
            </el-descriptions-item>
<!--            <el-descriptions-item label="轴名称">-->
<!--              <span>{{queryParams.axisName}}</span>-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="颈名称">-->
<!--              <span>{{queryParams.neckName}}</span>-->
<!--            </el-descriptions-item>-->
            <!--            <el-descriptions-item label="轴名称">-->
            <!--              <span>{{queryParams.axisName}}</span>-->
            <!--            </el-descriptions-item>-->
            <!--            <el-descriptions-item label="颈名称">-->
            <!--              <span>{{queryParams.neckName}}</span>-->
            <!--            </el-descriptions-item>-->
            <el-descriptions-item label="瓦名称">
              <span>{{queryParams.tileName}}</span>
            </el-descriptions-item>
<!--            <el-descriptions-item label="重量">-->
<!--              <span>{{queryParams.weight}}</span>-->
<!--            </el-descriptions-item>-->
            <!--            <el-descriptions-item label="重量">-->
            <!--              <span>{{queryParams.weight}}</span>-->
            <!--            </el-descriptions-item>-->
            <el-descriptions-item label="配瓦颜色">
              <span v-for="(word, index) in queryParams.words" :key="index" :style="{ backgroundColor: queryParams.colors[index],fontSize: '30px',}">{{ word }}</span>
            </el-descriptions-item>
@@ -108,14 +41,40 @@
          <el-divider></el-divider>
        </el-card>
      </el-col>
      <el-col :span="10" >
        <div id="block"  >
          <!-- 变量赋值 :src="imageUrl"  -->
          <!-- 直接读取文件路径 :src="require('@/assets/images/profile.jpg')" -->
          <el-image id="imageRef" fit="contain" :src="require('@/assets/images/463XT.png')" style="width:480px;height:390px;"
                    @click="clickMarkPoint($event)"></el-image>
          <div1 class="marker" id="marker5" style="width: 20px; height: 20px; backgroundColor: red; right: 88px; bottom: 132px; position: relative; border-radius: 50%;"
          >
            <span><font style="color:yellow;text-align:center">5</font></span>
          </div1>
          <div2 class="marker" id="marker4" style="width: 20px; height: 20px; background-color: red; right: 173px; bottom: 132px; position: relative; border-radius: 50%;">
            <span><font style="color:yellow;text-align:center">4</font></span>
          </div2>
          <div3 class="marker" id="marker3" style="width: 20px; height: 20px; background-color: red; right: 260px; bottom: 132px; position: relative; border-radius: 50%;">
            <span><font style="color:yellow;text-align:center">3</font></span>
          </div3>
          <div4 class="marker" id="marker2" style="width: 20px; height: 20px; background-color: red; right: 345px; bottom: 132px; position: relative; border-radius: 50%;">
            <span><font style="color:yellow;text-align:center">2</font></span>
          </div4>
          <div5 class="marker" id="marker1" style="width: 20px; height: 20px; background-color: red; right: 435px; bottom: 132px; position: relative; border-radius: 50%;">
            <span><font style="color:yellow;text-align:center">1</font></span>
          </div5>
        </div>

      </el-col>
    </div>
  </div>
</template>
<script>
import VueQr from 'vue-qr'
import { listTileMatchRules, getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
import { listTileMatchRules,getTileMatchRules, delTileMatchRules, addTileMatchRules, updateTileMatchRules } from "@/api/main/bs/tileMatchRules/tileMatchRules";
import {forceUploadMethod, getUrl} from "@/api/main/bs/orderScheduling/orderScheduling";
import WebSocketReconnect from "@/utils/WebsocketTool";
import {getCheckData} from "../../../../api/main/bs/tileMatchRules/tileMatchRules";
export default {
  name: "index",
  dicts: ['colour_hex','productseries','axisname','neckname','tilename'],
@@ -133,11 +92,12 @@
      from:{
        pageNum: 1,
        pageSize: 10,
        productSeries: '380Y',
        // scanObject1: 'ONYL01FZ0120003023123;1206B0026;D2212BA',
        // scanObject2: 'P0NYK0410001000;T231107031;D2222232;S500003',
        scanObject1: null,
        scanObject2: null,
        productSeries: '',
        scanObject1: '',
        scanObject2: '',
        SNCode: '',
        // scanObject1: null,
        // scanObject2: null,
        axisName: null,
        neckName: null,
        tileName: '主轴瓦',
@@ -177,14 +137,15 @@
  mounted() {
    this.getWebUrl()
  },
  methods:{
    getWebUrl(){
      getUrl().then(res=>{
        this.websocketUrl = res+"OP060"
  methods: {
    getWebUrl() {
      getUrl().then(res => {
        this.websocketUrl = res + "OP060"
        console.log('websocketUrl：', this.websocketUrl)
        this.initWebSocket()
      })
    },
    initWebSocket: function (){
    initWebSocket: function () {
      //判断当前浏览器是否支持WebSocket
      if ('WebSocket' in window) {
        //连接WebSocket节点
@@ -192,13 +153,28 @@
        //接收到消息的回调方法
        this.websocket.socket.onmessage = (event) => {
          let data = event.data;
          if (data != null && data !== ''){
          if (data != null && data !== '') {
            this.result = JSON.parse(data);
            const parts3 = this.result.server_message.split("*");
            if (parts3.length >= 2) {
              this.from.scanObject1=parts3[0];
              this.from.scanObject2=parts3[1];
              this.handleQuery();
              if (parts3[0] === 'clean'){
                this.from.scanObject1 = ''
                this.from.scanObject2 = ''
                this.from.SNCode = ''
                this.queryParams.scanObject1 = ''
                this.queryParams.scanObject2 = ''
                this.queryParams.SNCode = ''
                this.queryParams.productSeries = ''
                this.from.productSeries = ''
                this.queryParams.words = ['------', '------', '------', '------']
                this.queryParams.colors = ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF']
              } else {
                this.from.scanObject1 = parts3[0];
                this.from.scanObject2 = parts3[1];
                this.from.SNCode = parts3[2];
                this.handleQuery();
              }

            }
            // if (this.form.scanObject1 !== null && this.form.scanObject1 !== ''){
            //    this.handleQuery();
@@ -209,13 +185,15 @@
        window.onbeforeunload = function () {
          this.websocket.close()
        }

        //关闭连接
        function closeWebSocket() {
          this.websocket.close()
        }

        //发送消息
        function send() {
          this.websocket.socket.send({ kk: 123 })
          this.websocket.socket.send({kk: 123})
        }
      } else {
        alert('浏览器不支持webSocket')
@@ -223,99 +201,116 @@
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log('111111111')
      this.clear();

      if(this.from.scanObject1 !== null && this.from.scanObject2 !== null
      if (this.from.scanObject1 !== null && this.from.scanObject1 !== ""
        // && this.from.axisName !== null && this.from.axisName !== ""
        // && this.from.neckName !== null && this.from.neckName !== ""
        // && this.from.tileName !== null && this.from.tileName !== ""
        && this.from.productSeries !== null && this.from.productSeries !== "")
      {
        && this.from.scanObject2 !== null && this.from.scanObject2 !== "") {
        console.log('2222222')
        this.axisValueextracted();
        this.neckValueextracted();
        if(this.queryParams.axisValue !== null && this.queryParams.neckValue !== null){
        if (this.queryParams.axisValue !== null && this.queryParams.neckValue !== null) {
          this.insetFromToQueryParams();
          this.getList();
        }
        else{
        } else {
          const h = this.$createElement;
          this.$message({
            message: h('p',null, [
            message: h('p', null, [
              h('span', null, '警告 '),
              h('i', { style: 'color: black' }, '箱体码或曲轴码输入有误'),
              h('i', {style: 'color: black'}, '箱体码或曲轴码输入有误'),
              h()]),
            type: 'error',
            center: true,
            offset:300
            offset: 300
          });
        }
      }
      else{
      } else {
        const h = this.$createElement;
        this.$message({
          message: h('p',null, [
          message: h('p', null, [
            h('span', null, '警告 '),
            h('i', { style: 'color: black' }, '请填写所有搜索条件'),
            h('i', {style: 'color: black'}, '请填写所有搜索条件'),
            h()]),
          type: 'error',
          center: true,
          offset:300
          offset: 300
        });
      }
    },

    // 取箱体码第三段为配瓦值
    axisValueextracted() {
      const parts1 = this.from.scanObject1.split(",");
      if (parts1.length >= 2) {
        //const axisValueextracted = parts1[2].substring(3,4);
        const axisValueextracted = parts1[1];
        return this.queryParams.axisValue= axisValueextracted;
      console.log("33")
      if (this.from.scanObject1.indexOf(";") !== -1) {
        const parts1 = this.from.scanObject1.split(";");
        if (parts1.length >= 3) {
          console.log("44", parts1)
          //const axisValueextracted = parts1[2].substring(3,4);
          const axisValueextracted = parts1[2];
          return this.queryParams.axisValue = axisValueextracted;

        }
      }
    },

    //取曲轴码第三段为配瓦值
    neckValueextracted() {
      const parts2 = this.from.scanObject2.split(";");
      if (parts2.length >= 3) {
        //const neckValueextracted = parts2[2].substring(3,4);
        const neckValueextracted = parts2[2];
        return this.queryParams.neckValue= neckValueextracted;
      console.log('4432')
      console.log('scanObject2', this.from.scanObject2)
      if (this.from.scanObject2.indexOf(";") !== -1) {
        const parts2 = this.from.scanObject2.split(";");
        if (parts2.length >= 3) {
          //const neckValueextracted = parts2[2].substring(3,4);
          const neckValueextracted = parts2[2];
          return this.queryParams.neckValue = neckValueextracted;
        }
      }
    },
    //取配瓦颜色
    getList() {
      let queryParams = {
        productSeries : this.queryParams.productSeries,
        axisName : this.queryParams.axisName,
        neckName : this.queryParams.neckName,
        tileName : this.queryParams.tileName,
        axisValue: this.queryParams.axisValue,
        neckValue: this.queryParams.neckValue,
        SNCode: this.from.SNCode,
        XT: this.from.scanObject1,
        CZ: this.from.scanObject2,
      }
      console.log(queryParams)
      listTileMatchRules(queryParams).then(response => {
        this.queryParams.words= ['------', '------', '------', '------']
        this.queryParams.colors= ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF']
        for (var i=0;i<response.rows.length;i++){
          this.queryParams.colors[i]=response.rows[i].tileColor;
          this.queryParams.words[i]=response.rows[i].tileName;
      console.log('queryParams', queryParams)
      getCheckData(queryParams).then(response => {
        console.log('resssss', response)
        this.queryParams.words = ['------', '------', '------', '------']
        this.queryParams.colors = ['#FFFFFF', '#FFFFFF', '#FFFFFF', '#FFFFFF']
        if (response.code === 200) {
          if (response.data.length > 0) {
            this.queryParams.productSeries = response.data[0].productSeries
          }
          for (var i = 0; i < response.data.length; i++) {
            this.queryParams.colors[i] = response.data[i].tileColor;
            this.queryParams.words[i] = response.data[i].tileName;
          }

          document.getElementById('marker1').style.backgroundColor = this.queryParams.colors[0];
          document.getElementById('marker2').style.backgroundColor = this.queryParams.colors[1];
          document.getElementById('marker3').style.backgroundColor = this.queryParams.colors[2];
          document.getElementById('marker4').style.backgroundColor = this.queryParams.colors[3];
          document.getElementById('marker5').style.backgroundColor = this.queryParams.colors[4];
          console.log('颜色：', response)
        }
        console.log('颜色：',response)

      });
    },
    clear(){
      this.queryParams.axisValue=null;
      this.queryParams.neckValue=null;
    clear() {
      this.queryParams.axisValue = null;
      this.queryParams.neckValue = null;
    },
    insetFromToQueryParams(){
      this.queryParams.productSeries=this.from.productSeries;
      this.queryParams.axisName=this.from.axisName;
      this.queryParams.neckName=this.from.neckName;
      this.queryParams.tileName=this.from.tileName;
      this.queryParams.scanObject1=this.from.scanObject1;
      this.queryParams.scanObject2=this.from.scanObject2;
    insetFromToQueryParams() {
      this.queryParams.productSeries = this.from.productSeries;
      this.queryParams.axisName = this.from.axisName;
      this.queryParams.neckName = this.from.neckName;
      this.queryParams.tileName = this.from.tileName;
      this.queryParams.scanObject1 = this.from.scanObject1;
      this.queryParams.scanObject2 = this.from.scanObject2;
    }

  },
@@ -323,13 +318,15 @@
</script>

<style scoped>
::v-deep .el-form-item__label{
::v-deep .el-form-item__label {
  font-size: large;
}
::v-deep .el-card__body{

::v-deep .el-card__body {
  padding: 15px 20px 0px 20px;
}
::v-deep .el-input .el-input--medium .el-input--suffix{

::v-deep .el-input .el-input--medium .el-input--suffix {
  width: 200px;
}