vue-mes
查看 | 历史 | 提交 | 提交对比
懒羊羊
2024-01-26 49138a936668c30fbb4063e5d0bb518a400e6c39
提交 | 用户 | 时间
b0742c 1 <template>
C 2   <div class="app-container">
589dc7 3    <el-row :gutter="5">
懒 4      <el-col :span="6">
49ac5c 5        <el-card shadow="never">
懒 6          <span class="head-font">工位编号 : {{headContent.processesCode}}</span>
589dc7 7        </el-card>
懒 8      </el-col>
9      <el-col :span="6">
49ac5c 10        <el-card shadow="never">
懒 11          <span class="head-font">工位名称 : {{headContent.processesName}}</span>
589dc7 12        </el-card>
懒 13      </el-col>
8586e1 14      <el-col :span="12">
49ac5c 15        <el-card shadow="never">
懒 16          <span class="head-font">总成编码 : {{headContent.sfcCode}}</span>
5a6d6b 17          <el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input>
49ac5c 18          <el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button>
懒 19          <el-button @click="clearClick" style="float: right" type="danger">清除</el-button>
589dc7 20        </el-card>
懒 21      </el-col>
8586e1 22
589dc7 23    </el-row>
懒 24    <el-row :gutter="5" style="margin-top: 5px">
25      <el-col :span="6" >
26        <el-card class="bottom-card">
27          <div slot="header" class="clearfix">
49ac5c 28            <i class="el-icon-tickets"></i>
懒 29            <span style="font-weight: bold">当前工件信息</span>
589dc7 30          </div>
49ac5c 31          <el-descriptions :column="1" :label-style="{'font-size': '15px'}" border :content-style="{'min-width': '150px'}">
懒 32            <el-descriptions-item label="工单编号">
33                <span>{{workpieceInformation.workOrderCode}}</span>
589dc7 34            </el-descriptions-item>
49ac5c 35            <el-descriptions-item label="产品编号">
懒 36              <span>{{workpieceInformation.productCode}}</span>
589dc7 37            </el-descriptions-item>
49ac5c 38            <el-descriptions-item label="产品型号">
懒 39              <span>{{workpieceInformation.productModel}}</span>
589dc7 40            </el-descriptions-item>
49ac5c 41            <el-descriptions-item label="产品名称">
懒 42              <span>{{workpieceInformation.productName}}</span>
589dc7 43            </el-descriptions-item>
49ac5c 44            <el-descriptions-item label="节拍">
懒 45              <span>{{workpieceInformation.beat}}</span>
589dc7 46            </el-descriptions-item>
懒 47          </el-descriptions>
48          <el-divider></el-divider>
49          <el-row>
50            <el-col :span="12">
49ac5c 51              <el-button class="circle-button" :class="cakeLamp.plcState ? 'circle-green-animate':'circle-red'" circle></el-button>
懒 52              <span style="display: none">{{cakeLamp.plcState}}</span>
8586e1 53              <span>&nbsp;PLC状态</span>
589dc7 54            </el-col>
懒 55            <el-col :span="12">
49ac5c 56              <el-button class="circle-button" :class="cakeLamp.scannerState ? 'circle-green-animate':'circle-red'" circle></el-button>
懒 57              <span style="display: none">{{cakeLamp.scannerState}}</span>
8586e1 58              <span>&nbsp;扫码枪状态</span>
589dc7 59            </el-col>
懒 60          </el-row>
61          <el-row style="margin-top: 20px">
62            <el-col :span="12">
49ac5c 63              <el-button class="circle-button" :class="cakeLamp.InPlace ? 'circle-green':'circle-red'" circle></el-button>
懒 64              <span style="display: none">{{cakeLamp.InPlace}}</span>
8586e1 65              <span>&nbsp;工件到位</span>
589dc7 66            </el-col>
懒 67            <el-col :span="12">
49ac5c 68              <el-button class="circle-button" :class="cakeLamp.scanFinish ? 'circle-green':'circle-red'" circle></el-button>
懒 69              <span style="display: none">{{cakeLamp.scanFinish}}</span>
8586e1 70              <span>&nbsp;扫码完成</span>
589dc7 71            </el-col>
懒 72          </el-row>
73          <el-row style="margin-top: 20px">
74            <el-col :span="12">
49ac5c 75              <el-button class="circle-button" :class="cakeLamp.startWork ? 'circle-green':'circle-red'" circle></el-button>
懒 76              <span style="display: none">{{cakeLamp.startWork}}</span>
8586e1 77              <span>&nbsp;开始作业</span>
589dc7 78            </el-col>
懒 79            <el-col :span="12">
49ac5c 80              <el-button class="circle-button" :class="cakeLamp.release ? 'circle-green':'circle-red'" circle></el-button>
懒 81              <span style="display: none">{{cakeLamp.release}}</span>
8586e1 82              <span>&nbsp;允许放行</span>
589dc7 83            </el-col>
49138a 84
懒 85          </el-row>
86          <el-row style="margin-top: 20px">
87            <el-col :span="12">
88              <el-input v-model="serialPortContent" style="width: 150px;" placeholder="请输入内容"></el-input>
89
90            </el-col>
91            <el-col :span="12">
92              <el-button @click="serialPortMethod" type="primary">串口获取数据</el-button>
93
94            </el-col>
589dc7 95          </el-row>
懒 96        </el-card>
b0742c 97
589dc7 98      </el-col>
懒 99      <el-col :span="18">
5a6d6b 100        <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
懒 101          <el-tab-pane name="first">
589dc7 102            <span slot="label"> <a class="el-icon-date"></a>首页</span>
懒 103            <el-col :span="8">
d3409e 104              <el-table :data="formulaChildList">
懒 105                <el-table-column label="排序" width="60" align="center" prop="stepSort">
106                </el-table-column>
107                <el-table-column label="操作内容" :show-overflow-tooltip='true' align="center" prop="operationSteps">
108                </el-table-column>
589dc7 109              </el-table>
懒 110            </el-col>
111            <el-col :span="16">
112              <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image>
113            </el-col>
114          </el-tab-pane>
5a6d6b 115          <el-tab-pane name="second">
589dc7 116            <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
5a6d6b 117            <el-empty>
589dc7 118              <span slot="description">暂无数据</span>
懒 119            </el-empty>
120          </el-tab-pane>
5a6d6b 121          <el-tab-pane name="third">
懒 122            <span slot="label"> <b class="el-icon-date"></b>采集清单</span>
123            <el-empty>
589dc7 124              <span slot="description">暂无数据</span>
懒 125            </el-empty>
126          </el-tab-pane>
5a6d6b 127          <el-tab-pane name="fourth">
懒 128            <span slot="label"> <b class="el-icon-date"></b>安灯状态</span>
129            <el-empty>
589dc7 130              <span slot="description">暂无数据</span>
懒 131            </el-empty>
132          </el-tab-pane>
5a6d6b 133          <el-tab-pane name="fifth">
懒 134            <span slot="label"> <b class="el-icon-date"></b>工艺配方</span>
135            <el-empty>
589dc7 136              <span slot="description">暂无数据</span>
懒 137            </el-empty>
138          </el-tab-pane>
139        </el-tabs>
140      </el-col>
141    </el-row>
b0742c 142   </div>
C 143 </template>
144 <script>
49ac5c 145 import {listWorkReport} from "@/api/main/om/workReport/workReport";
懒 146 import {listStationConf,getIpv4} from "@/api/main/sc/stationConf";
d3409e 147 import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
49ac5c 148
b0742c 149 export default {
49ac5c 150   name: "stationTerminal",
b0742c 151   data() {
C 152     return {
49138a 153       serialPortContent: '',
d3409e 154       // 查询参数
懒 155       formulaChildParams: {
156         pageNum: 1,
157         pageSize: 10,
158         productCode: null,
159       },
160       // 配方配置子信息表格数据
161       formulaChildList: [],
49ac5c 162       ipAddress: '',
589dc7 163       imgSrc: '',
49ac5c 164       headContent: {
懒 165         processesCode: 'OP1010',
166         processesName: '贴标机-贴码',
167         sfcCode: '1000000000000001',
168       },
169       workpieceInformation: {
170         workOrderCode: null,
171         productCode: null,
172         productModel: null,
173         productName: null,
174         beat: null,
175       },
176       // 查询参数
177       queryParams: {
178         pageNum: 1,
179         pageSize: 10,
180         sfcCode: null,
181       },
5f3a2e 182       // 查询参数
懒 183       StationConfQueryParams: {
184         pageNum: 1,
185         pageSize: 10,
186         ipAddress: null,
187       },
49ac5c 188       cakeLamp: {
懒 189         plcState: 1, //plc
190         scannerState: 1, //扫码枪
191         InPlace: 0, //工件到位
192         scanFinish: 0,
193         startWork: 0,
194         release: 0 //允许放行
5a6d6b 195       },
懒 196       content: '',
5f3a2e 197       activeName: 'first',
49138a 198       url: "ws://192.168.10.184:8080/websocket/message/",
5f3a2e 199       message: "",
懒 200       text_content: "",
201       ws: null,
d3409e 202       inputValue: '9'
b0742c 203     }
5f3a2e 204   },
懒 205   beforeDestroy() {
206     this.exit();
b0742c 207   },
49ac5c 208   created() {
5f3a2e 209     this.initStation();
懒 210     // this.getStationConfList();
211     // setTimeout(() => {
212     //   this.connectWebsocket();
213     // }, 3000);
214   },
215   mounted() {
216
49ac5c 217   },
懒 218   methods: {
49138a 219     serialPortMethod(){
懒 220
221     },
d3409e 222     /** 查询配方配置子信息列表 */
懒 223     getListFormulaChild() {
224       this.formulaChildParams.productCode = this.workpieceInformation.productCode
225       listFormulaChild(this.formulaChildParams).then(response => {
226         this.formulaChildList = response.rows;
227       });
228     },
5a6d6b 229     changeMenu(tab, event) {
懒 230       console.log(tab, event);
231     },
49ac5c 232     clearClick(){
懒 233       this.$message('这是一条清除消息提示');
234       this.headContent.sfcCode = null
235     },
236     scanCompleted(){
5a6d6b 237       this.$message('扫码完成'+this.content);
懒 238       this.headContent.sfcCode = this.content
239       this.queryParams.sfcCode = this.content
49ac5c 240       this.getList()
49138a 241       // this.getListFormulaChild()
49ac5c 242       this.cakeLamp.scanFinish = 1
49138a 243       this.cakeLamp.startWork = 1
懒 244
49ac5c 245     },
懒 246     /** 查询报工记录 表列表 */
49138a 247     async getList() {
懒 248       await listWorkReport(this.queryParams).then(response => {
49ac5c 249         let rowsData = response.rows[0];
懒 250         this.workpieceInformation.workOrderCode = rowsData.workOrderCode;
251         this.workpieceInformation.productCode = rowsData.productCode;
252         this.workpieceInformation.productModel = rowsData.productModel;
253         this.workpieceInformation.productName = rowsData.productName;
254         this.timer = setInterval(() => {
255           this.workpieceInformation.beat++;
256         }, 1000);
257       });
49138a 258       this.getListFormulaChild()
懒 259
49ac5c 260     },
懒 261     allowRelease(){
262       clearInterval(this.timer);
263       this.$message('保存节拍为'+this.workpieceInformation.beat+'秒');
264     },
265     /** 查询工位终端配置列表 */
49138a 266     // async getStationConfList() {
懒 267     //   await getIpv4().then(response => {
268     //     this.StationConfQueryParams.ipAddress = response.msg
269     //     console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress)
270     //   });
271     //   listStationConf(this.StationConfQueryParams).then(response => {
272     //     let rows = response.rows[0]
273     //     if(response.rows.length===0){
274     //       this.$message('该工位没有配置IP，请联系管理员配置IP');
275     //       return
276     //     }
277     //     this.headContent.processesName = rows.processesName
278     //     this.headContent.processesCode = rows.processesCode
279     //     console.log('设置工位编码'+this.headContent.processesCode)
280     //
281     //   });
282     // },
283     // connectWebsocket() {
284     //   console.log('websocket连接工位为'+this.headContent.processesCode)
285     //   const wsuri = this.url + this.headContent.processesCode;
286     //   this.ws = new WebSocket(wsuri);
287     //   const self = this;
288     //   this.ws.onopen = function (event) {
289     //     // self.text_content = self.text_content + "已经打开连接!" + "\n";
290     //     this.$message('websocket连接成功！');
291     //   };
292     //   this.ws.onmessage = function (event) {
293     //     self.text_content = event.data + "\n";
294     //     console.log(event.data)
295     //     if(event.data === "IN"){
296     //       self.cakeLamp.InPlace = "1"
297     //     }else if(event.data === "OUT"){
298     //       self.cakeLamp.outRsSign = "1"
299     //     }
300     //   };
301     // },
5f3a2e 302     exit() {
懒 303       if (this.ws) {
304         this.ws.close();
305         this.ws = null;
306       }
307     },
308     send() {
309       if (this.ws) {
310         this.ws.send(this.message);
311       } else {
312         alert("未连接到服务器");
313       }
314     },
315     async initStation(){
316       await getIpv4().then(response => {
317         this.StationConfQueryParams.ipAddress = response.msg
318         console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress)
319       });
320       await listStationConf(this.StationConfQueryParams).then(response => {
321         let rows = response.rows[0]
322         if(response.rows.length===0){
323           this.$message('该工位没有配置IP，请联系管理员配置IP');
324           return
325         }
326         this.headContent.processesName = rows.processesName
327         this.headContent.processesCode = rows.processesCode
328         console.log('设置工位编码'+this.headContent.processesCode)
329
330       });
331       console.log('websocket连接工位为'+this.headContent.processesCode)
332       const wsuri = this.url + this.headContent.processesCode;
333       this.ws = new WebSocket(wsuri);
334       const self = this;
335       this.ws.onopen = function (event) {
336         this.$message('websocket连接成功！');
337       };
338       this.ws.onmessage = function (event) {
339         self.text_content = event.data + "\n";
340         console.log(event.data)
49138a 341         if(event.data === "IN"){
懒 342           self.cakeLamp.InPlace = 1
343         }else if(event.data === "OUT"){
344           self.cakeLamp.release = 1
345           setTimeout(() => {
346             this.resetting()
347           }, 2000); // 延时2秒触发
5f3a2e 348         }
懒 349       };
49138a 350     },
懒 351     resetting() {
352       this.cakeLamp = {
353         InPlace: 0,
354         release: 0,
355         startWork: 0,
356         scanFinish: 0,
357       }
5f3a2e 358     }
49ac5c 359   }
b0742c 360 }
C 361
362 </script>
589dc7 363 <style scoped>
懒 364 .bottom-card{
365   height: 600px;
b0742c 366 }
589dc7 367 .circle-button{
8586e1 368   height: 30px;
A 369   width: 30px;
370 }
49ac5c 371 .circle-red {
懒 372   background-color: #e01a4f;
373 }
374 .circle-green {
375   background-color: green;
376 }
377 .circle-green-animate {
378   background-color: green;
379   animation: circle-green-animate 2s infinite;
380 }
381   @keyframes circle-green-animate {
382     50% {
383       opacity: 0.6;
384     }
385     0% {
386       opacity: 0.2;
387     }
388   }
389 .head-font{
390   font-weight: bold;
391   font-size: 25px;
392 }
8586e1 393 span{
A 394   font-size: 15px;
b0742c 395 }
C 396 </style>
5a6d6b 397