From 59e2283a10aee45e6a98e34b432ba345095116db Mon Sep 17 00:00:00 2001 From: wujian <14790700720@163.com> Date: 星期三, 10 七月 2024 16:36:42 +0800 Subject: [PATCH] add 选瓦 --- jcdm-ui/src/views/main/cfkb/crankshaft/index.vue | 291 ++++++++++++++++++++++++++++----------------------------- 1 files changed, 144 insertions(+), 147 deletions(-) diff --git a/jcdm-ui/src/views/main/cfkb/crankshaft/index.vue b/jcdm-ui/src/views/main/cfkb/crankshaft/index.vue index 6f14c6b..97960b6 100644 --- a/jcdm-ui/src/views/main/cfkb/crankshaft/index.vue +++ b/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 () { //鍒ゆ柇褰撳墠娴忚鍣ㄦ槸鍚︽敮鎸乄ebSocket 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; } -- Gitblit v1.9.3