vue-mes
查看 | 历史 | 提交 | 提交对比
懒羊羊
2024-01-25 9e8be0743750e799004afa803e7c47ac87dbd0ad
提交 | 用户 | 时间
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>
懒 84          </el-row>
85        </el-card>
b0742c 86
589dc7 87      </el-col>
懒 88      <el-col :span="18">
5a6d6b 89        <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
懒 90          <el-tab-pane name="first">
589dc7 91            <span slot="label"> <a class="el-icon-date"></a>首页</span>
懒 92            <el-col :span="8">
d3409e 93              <el-table :data="formulaChildList">
懒 94                <el-table-column label="排序" width="60" align="center" prop="stepSort">
95                </el-table-column>
96                <el-table-column label="操作内容" :show-overflow-tooltip='true' align="center" prop="operationSteps">
97                </el-table-column>
589dc7 98              </el-table>
懒 99            </el-col>
100            <el-col :span="16">
101              <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image>
102            </el-col>
103          </el-tab-pane>
5a6d6b 104          <el-tab-pane name="second">
589dc7 105            <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
5a6d6b 106            <el-empty>
589dc7 107              <span slot="description">暂无数据</span>
懒 108            </el-empty>
109          </el-tab-pane>
5a6d6b 110          <el-tab-pane name="third">
懒 111            <span slot="label"> <b class="el-icon-date"></b>采集清单</span>
112            <el-empty>
589dc7 113              <span slot="description">暂无数据</span>
懒 114            </el-empty>
115          </el-tab-pane>
5a6d6b 116          <el-tab-pane name="fourth">
懒 117            <span slot="label"> <b class="el-icon-date"></b>安灯状态</span>
118            <el-empty>
589dc7 119              <span slot="description">暂无数据</span>
懒 120            </el-empty>
121          </el-tab-pane>
5a6d6b 122          <el-tab-pane name="fifth">
懒 123            <span slot="label"> <b class="el-icon-date"></b>工艺配方</span>
124            <el-empty>
589dc7 125              <span slot="description">暂无数据</span>
懒 126            </el-empty>
127          </el-tab-pane>
128        </el-tabs>
129      </el-col>
130    </el-row>
b0742c 131   </div>
C 132 </template>
133 <script>
49ac5c 134 import {listWorkReport} from "@/api/main/om/workReport/workReport";
懒 135 import {listStationConf,getIpv4} from "@/api/main/sc/stationConf";
d3409e 136 import {listFormulaChild} from "@/api/main/bs/formulaChild/formulaChild";
49ac5c 137
b0742c 138 export default {
49ac5c 139   name: "stationTerminal",
b0742c 140   data() {
C 141     return {
d3409e 142       // 查询参数
懒 143       formulaChildParams: {
144         pageNum: 1,
145         pageSize: 10,
146         productCode: null,
147       },
148       // 配方配置子信息表格数据
149       formulaChildList: [],
49ac5c 150       ipAddress: '',
589dc7 151       imgSrc: '',
49ac5c 152       headContent: {
懒 153         processesCode: 'OP1010',
154         processesName: '贴标机-贴码',
155         sfcCode: '1000000000000001',
156       },
157       workpieceInformation: {
158         workOrderCode: null,
159         productCode: null,
160         productModel: null,
161         productName: null,
162         beat: null,
163       },
164       // 查询参数
165       queryParams: {
166         pageNum: 1,
167         pageSize: 10,
168         sfcCode: null,
169       },
5f3a2e 170       // 查询参数
懒 171       StationConfQueryParams: {
172         pageNum: 1,
173         pageSize: 10,
174         ipAddress: null,
175       },
49ac5c 176       cakeLamp: {
懒 177         plcState: 1, //plc
178         scannerState: 1, //扫码枪
179         InPlace: 0, //工件到位
180         scanFinish: 0,
181         startWork: 0,
182         release: 0 //允许放行
5a6d6b 183       },
懒 184       content: '',
5f3a2e 185       activeName: 'first',
9e8be0 186       url: "ws://192.168.10.196:8080/websocket/message/",
5f3a2e 187       message: "",
懒 188       text_content: "",
189       ws: null,
d3409e 190       inputValue: '9'
b0742c 191     }
5f3a2e 192   },
懒 193   beforeDestroy() {
194     this.exit();
b0742c 195   },
49ac5c 196   created() {
5f3a2e 197     this.initStation();
懒 198     // this.getStationConfList();
199     // setTimeout(() => {
200     //   this.connectWebsocket();
201     // }, 3000);
202   },
203   mounted() {
204
49ac5c 205   },
懒 206   methods: {
d3409e 207     /** 查询配方配置子信息列表 */
懒 208     getListFormulaChild() {
209       this.formulaChildParams.productCode = this.workpieceInformation.productCode
210       listFormulaChild(this.formulaChildParams).then(response => {
211         console.log(this.formulaChildList)
212         this.formulaChildList = response.rows;
213       });
214     },
5a6d6b 215     changeMenu(tab, event) {
懒 216       console.log(tab, event);
217     },
49ac5c 218     clearClick(){
懒 219       this.$message('这是一条清除消息提示');
220       this.headContent.sfcCode = null
221     },
222     scanCompleted(){
5a6d6b 223       this.$message('扫码完成'+this.content);
懒 224       this.headContent.sfcCode = this.content
225       this.queryParams.sfcCode = this.content
49ac5c 226       this.getList()
d3409e 227       this.getListFormulaChild()
49ac5c 228       this.cakeLamp.scanFinish = 1
懒 229     },
230     /** 查询报工记录 表列表 */
231     getList() {
232       listWorkReport(this.queryParams).then(response => {
233         let rowsData = response.rows[0];
234         this.workpieceInformation.workOrderCode = rowsData.workOrderCode;
235         this.workpieceInformation.productCode = rowsData.productCode;
236         this.workpieceInformation.productModel = rowsData.productModel;
237         this.workpieceInformation.productName = rowsData.productName;
238         this.timer = setInterval(() => {
239           this.workpieceInformation.beat++;
240         }, 1000);
241       });
242     },
243     allowRelease(){
244       clearInterval(this.timer);
245       this.$message('保存节拍为'+this.workpieceInformation.beat+'秒');
246     },
247     /** 查询工位终端配置列表 */
5f3a2e 248     async getStationConfList() {
懒 249       await getIpv4().then(response => {
250         this.StationConfQueryParams.ipAddress = response.msg
251         console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress)
49ac5c 252       });
5f3a2e 253       listStationConf(this.StationConfQueryParams).then(response => {
49ac5c 254         let rows = response.rows[0]
5a6d6b 255         if(response.rows.length===0){
5f3a2e 256           this.$message('该工位没有配置IP，请联系管理员配置IP');
5a6d6b 257           return
懒 258         }
49ac5c 259         this.headContent.processesName = rows.processesName
懒 260         this.headContent.processesCode = rows.processesCode
5f3a2e 261         console.log('设置工位编码'+this.headContent.processesCode)
懒 262
49ac5c 263       });
懒 264     },
5f3a2e 265     connectWebsocket() {
懒 266       console.log('websocket连接工位为'+this.headContent.processesCode)
267       const wsuri = this.url + this.headContent.processesCode;
268       this.ws = new WebSocket(wsuri);
269       const self = this;
270       this.ws.onopen = function (event) {
271         // self.text_content = self.text_content + "已经打开连接!" + "\n";
272         this.$message('websocket连接成功！');
273       };
274       this.ws.onmessage = function (event) {
275         self.text_content = event.data + "\n";
276         console.log(event.data)
277         if(event.data === "1"){
278           self.cakeLamp.InPlace = "1"
279         }
280       };
281     },
282     exit() {
283       if (this.ws) {
284         this.ws.close();
285         this.ws = null;
286       }
287     },
288     send() {
289       if (this.ws) {
290         this.ws.send(this.message);
291       } else {
292         alert("未连接到服务器");
293       }
294     },
295     async initStation(){
296       await getIpv4().then(response => {
297         this.StationConfQueryParams.ipAddress = response.msg
298         console.log('查询到本工位IP为'+this.StationConfQueryParams.ipAddress)
299       });
300       await listStationConf(this.StationConfQueryParams).then(response => {
301         let rows = response.rows[0]
302         if(response.rows.length===0){
303           this.$message('该工位没有配置IP，请联系管理员配置IP');
304           return
305         }
306         this.headContent.processesName = rows.processesName
307         this.headContent.processesCode = rows.processesCode
308         console.log('设置工位编码'+this.headContent.processesCode)
309
310       });
311       console.log('websocket连接工位为'+this.headContent.processesCode)
312       const wsuri = this.url + this.headContent.processesCode;
313       this.ws = new WebSocket(wsuri);
314       const self = this;
315       this.ws.onopen = function (event) {
316         // self.text_content = self.text_content + "已经打开连接!" + "\n";
317         this.$message('websocket连接成功！');
318       };
319       this.ws.onmessage = function (event) {
320         self.text_content = event.data + "\n";
321         console.log(event.data)
322         if(event.data === "1"){
323           self.cakeLamp.InPlace = "1"
324         }
325       };
326     }
49ac5c 327   }
b0742c 328 }
C 329
330 </script>
589dc7 331 <style scoped>
懒 332 .bottom-card{
333   height: 600px;
b0742c 334 }
589dc7 335 .circle-button{
8586e1 336   height: 30px;
A 337   width: 30px;
338 }
49ac5c 339 .circle-red {
懒 340   background-color: #e01a4f;
341 }
342 .circle-green {
343   background-color: green;
344 }
345 .circle-green-animate {
346   background-color: green;
347   animation: circle-green-animate 2s infinite;
348 }
349   @keyframes circle-green-animate {
350     50% {
351       opacity: 0.6;
352     }
353     0% {
354       opacity: 0.2;
355     }
356   }
357 .head-font{
358   font-weight: bold;
359   font-size: 25px;
360 }
8586e1 361 span{
A 362   font-size: 15px;
b0742c 363 }
C 364 </style>
5a6d6b 365