vue-mes
查看 | 历史 | 提交 | 提交对比
hdy
2024-01-08 60ebb5f4610ce79742a3781c71f7eda4043b7fac
提交 | 用户 | 时间
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>
17          <el-input v-model="input" style="float: right;width: 150px;" placeholder="请输入内容"></el-input>
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">
89        <el-tabs type="border-card"  style="height: 600px">
90          <el-tab-pane>
91            <span slot="label"> <a class="el-icon-date"></a>首页</span>
92            <el-col :span="8">
93              <el-table>
8586e1 94                <el-table-column label="序号" align="center" prop="repairIdentification" width="50px"/>
A 95                <el-table-column label="操作内容" align="center" prop="boxCode"  width="300px"/>
589dc7 96              </el-table>
懒 97            </el-col>
98            <el-col :span="16">
99              <el-image style="height: 520px;width: 100%" :src="imgSrc"></el-image>
100            </el-col>
101          </el-tab-pane>
102          <el-tab-pane>
103            <span slot="label"> <b class="el-icon-date"></b>物料BOM</span>
104            <el-empty >
105              <span slot="description">暂无数据</span>
106            </el-empty>
107          </el-tab-pane>
108          <el-tab-pane>
109            <span slot="label"> <c class="el-icon-date"></c>采集清单</span>
110            <el-empty >
111              <span slot="description">暂无数据</span>
112            </el-empty>
113          </el-tab-pane>
114          <el-tab-pane>
115            <span slot="label"> <d class="el-icon-date"></d>安灯状态</span>
116            <el-empty >
117              <span slot="description">暂无数据</span>
118            </el-empty>
119          </el-tab-pane>
120          <el-tab-pane>
121            <span slot="label"> <e class="el-icon-date"></e>工艺配方</span>
122            <el-empty >
123              <span slot="description">暂无数据</span>
124            </el-empty>
125          </el-tab-pane>
126        </el-tabs>
127      </el-col>
128    </el-row>
b0742c 129   </div>
C 130 </template>
131 <script>
49ac5c 132 import {listWorkReport} from "@/api/main/om/workReport/workReport";
懒 133 import {listStationConf,getIpv4} from "@/api/main/sc/stationConf";
134
b0742c 135 export default {
49ac5c 136   name: "stationTerminal",
b0742c 137   data() {
C 138     return {
49ac5c 139       ipAddress: '',
懒 140       input: null,
589dc7 141       imgSrc: '',
49ac5c 142       headContent: {
懒 143         processesCode: 'OP1010',
144         processesName: '贴标机-贴码',
145         sfcCode: '1000000000000001',
146       },
147       workpieceInformation: {
148         workOrderCode: null,
149         productCode: null,
150         productModel: null,
151         productName: null,
152         beat: null,
153       },
154       // 查询参数
155       queryParams: {
156         pageNum: 1,
157         pageSize: 10,
158         sfcCode: null,
159       },
160       cakeLamp: {
161         plcState: 1, //plc
162         scannerState: 1, //扫码枪
163         InPlace: 0, //工件到位
164         scanFinish: 0,
165         startWork: 0,
166         release: 0 //允许放行
167       }
b0742c 168     }
C 169   },
49ac5c 170   created() {
懒 171     this.getIPAddress();
172     this.getStationConfList();
173   },
174   methods: {
175     clearClick(){
176       this.$message('这是一条清除消息提示');
177       this.headContent.sfcCode = null
178     },
179     scanCompleted(){
180       this.$message('扫码完成'+this.input);
181       this.headContent.sfcCode = this.input
182       this.queryParams.sfcCode = this.input
183       this.getList()
184       this.cakeLamp.scanFinish = 1
185     },
186     /** 查询报工记录 表列表 */
187     getList() {
188       listWorkReport(this.queryParams).then(response => {
189         let rowsData = response.rows[0];
190         this.workpieceInformation.workOrderCode = rowsData.workOrderCode;
191         this.workpieceInformation.productCode = rowsData.productCode;
192         this.workpieceInformation.productModel = rowsData.productModel;
193         this.workpieceInformation.productName = rowsData.productName;
194         this.timer = setInterval(() => {
195           this.workpieceInformation.beat++;
196         }, 1000);
197       });
198     },
199     allowRelease(){
200       clearInterval(this.timer);
201       this.$message('保存节拍为'+this.workpieceInformation.beat+'秒');
202     },
203     getIPAddress() {
204       this.ipAddress = window.location.hostname;
205     },
206     /** 查询工位终端配置列表 */
207     getStationConfList() {
208       let queryParams = {
209         ipAddress: null,
210       }
211       getIpv4().then(response => {
212         queryParams.ipAddress = response.msg
213       });
214       listStationConf(queryParams).then(response => {
215         let rows = response.rows[0]
216         this.headContent.processesName = rows.processesName
217         this.headContent.processesCode = rows.processesCode
218       });
219     },
220   }
b0742c 221 }
C 222
223 </script>
589dc7 224 <style scoped>
懒 225 .bottom-card{
226   height: 600px;
b0742c 227 }
589dc7 228 .circle-button{
8586e1 229   height: 30px;
A 230   width: 30px;
231 }
49ac5c 232 .circle-red {
懒 233   background-color: #e01a4f;
234 }
235 .circle-green {
236   background-color: green;
237 }
238 .circle-green-animate {
239   background-color: green;
240   animation: circle-green-animate 2s infinite;
241 }
242   @keyframes circle-green-animate {
243     50% {
244       opacity: 0.6;
245     }
246     0% {
247       opacity: 0.2;
248     }
249   }
250 .head-font{
251   font-weight: bold;
252   font-size: 25px;
253 }
8586e1 254 span{
A 255   font-size: 15px;
b0742c 256 }
C 257 </style>