-
admin
2024-05-08 4a5f2a21686b42761cccb4c64a6fcaaf778f071a
提交 | 用户 | 时间
2c7661 1 <template>
A 2   <div class="app-container">
3    <el-row :gutter="5">
4      <el-col :span="7">
5        <el-card shadow="never">
6          <span class="head-font">工位编号 : {{headContent.processesCode}}</span>
7        </el-card>
8      </el-col>
9      <el-col :span="7">
10        <el-card shadow="never">
11          <span class="head-font">工位名称 : {{headContent.processesName}}</span>
12        </el-card>
13      </el-col>
14      <el-col :span="10">
15        <el-card shadow="never">
16          <span class="head-font">产品序列号 : {{headContent.sfcCode}}</span>
17 <!--         <el-input v-model="content" style="float: right;width: 150px;" placeholder="请输入内容"></el-input>-->
18 <!--         <el-button @click="scanCompleted" style="float: right" type="primary">扫码完成</el-button>-->
19          <el-button type="primary" style="float: right" icon="el-icon-search" size="mini" @click="serialLink">串口连接</el-button>
20          <el-button @click="clearClick" style="float: right" type="danger" size="mini">清除</el-button>
21        </el-card>
22      </el-col>
23
24    </el-row>
25    <el-row :gutter="5" style="margin-top: 5px">
26      <el-col :span="24">
27        <el-tabs type="border-card"  style="height: 600px" v-model="activeName" @tab-click="changeMenu">
28          <el-tab-pane name="first">
29            <span slot="label"> <a class="el-icon-date"></a>首页</span>
30            <el-col :span="24">
31              <el-table height="500" :cell-style="rowStyle" :data="formulaChildList">
32                <el-table-column label="排序" width="60" align="center" type="index">
33                </el-table-column>
34                <el-table-column label="操作内容" :show-overflow-tooltip='true' align="center" prop="operationSteps">
35                </el-table-column>
36                <el-table-column label="产品编号" align="center" prop="productCode">
37                </el-table-column>
38                <el-table-column label="物料编码" align="center" prop="materialCode">
39                </el-table-column>
40                <el-table-column label="采集值" align="center" prop="collectData">
41                </el-table-column>
42                <el-table-column label="结果" align="center" prop="results">
43                </el-table-column>
44              </el-table>
45            </el-col>
46          </el-tab-pane>
47        </el-tabs>
48      </el-col>
49    </el-row>
50     <el-dialog v-dialogpop-up :title="title" :visible.sync="open1" width="1000" append-to-body>
51       <el-row
52         type="flex"
53         class="row-bg"
54         justify="center"
55         v-show="portsList.length === 0"
56       >
57         <el-col :span="7">
58           <div style="margin-top: 400px">
59           <span style="display: block">
60             仅支持Chrome 89+或者Edge 89+浏览器(安全上下文(HTTPS)中可用)
61           </span>
62             <el-button type="primary" @click="obtainAuthorization">授权</el-button>
63           </div>
64         </el-col>
65       </el-row>
66       <el-form
67         v-show="portsList.length > 0"
68         ref="form1"
69         :model="form1"
70         label-width="100px">
71         <el-row>
72           <el-col :span="24"
73           ><div>
74             <el-form-item label="串口">
75               <el-select
76                 v-model="form1.port"
77                 filterable
78                 placeholder="请选择串口"
79                 :disabled="isDisable"
80               >
81                 <el-option
82                   v-for="item in portsList"
83                   :key="item.value"
84                   :label="item.label"
85                   :value="item.value"
86                 >
87                 </el-option>
88               </el-select>
89             </el-form-item>
90             <el-form-item label="波特率">
91               <el-autocomplete
92                 popper-class="my-autocomplete"
93                 v-model="form1.baudRate"
94                 :fetch-suggestions="querySearch"
95                 placeholder="请输入波特率"
96                 :disabled="isDisable"
97               >
98                 <i class="el-icon-edit el-input__icon" slot="suffix"> </i>
99                 <template slot-scope="{ item }">
100                   <div class="name">{{ item.value }}</div>
101                   <span class="addr">{{ item.address }}</span>
102                 </template>
103               </el-autocomplete>
104             </el-form-item>
105             <el-form-item label="数据位">
106               <el-select
107                 v-model="form1.dataBits"
108                 placeholder="请选择数据位"
109                 :disabled="isDisable"
110               >
111                 <el-option label="7" value="7"></el-option>
112                 <el-option label="8" value="8"></el-option>
113               </el-select>
114             </el-form-item>
115             <el-form-item label="停止位">
116               <el-select
117                 v-model="form1.stopBits"
118                 placeholder="请选择停止位"
119                 :disabled="isDisable"
120               >
121                 <el-option label="1" value="1"></el-option>
122                 <el-option label="2" value="2"></el-option>
123               </el-select>
124             </el-form-item>
125
126             <el-form-item label="校验位">
127               <el-select
128                 v-model="form1.parity"
129                 placeholder="请选择校验位"
130                 :disabled="isDisable"
131               >
132                 <el-option label="None" value="none"></el-option>
133                 <el-option label="Even" value="even"></el-option>
134                 <el-option label="Odd" value="odd"></el-option>
135               </el-select>
136             </el-form-item>
137
138             <el-form-item label="流控制">
139               <el-select
140                 v-model="form1.flowControl"
141                 placeholder="请选择流控制"
142                 :disabled="isDisable"
143               >
144                 <el-option label="None" value="none"></el-option>
145                 <el-option label="HardWare" value="hardware"></el-option>
146               </el-select>
147             </el-form-item>
148             <el-form-item label="显示历史">
149               <el-switch
150                 v-model="form1.isShowHistory"
151                 @change="loadHistory"
152               ></el-switch>
153               <el-button
154                 type="danger"
155                 icon="el-icon-delete"
156                 circle
157                 title="清空历史"
158                 @click="clearHistory"
159               ></el-button>
160             </el-form-item>
161             <el-form-item label="发送区设置" v-show="isShowSendArea">
162               <el-form-item label="发送格式">
163                 <el-radio-group v-model="form1.type">
164                   <el-radio label="1">ASCII</el-radio>
165                   <el-radio label="2">HEX</el-radio>
166                 </el-radio-group>
167               </el-form-item>
168               <el-form-item label="发送信息">
169                 <el-input type="textarea" v-model="form1.sendMsg"></el-input>
170               </el-form-item>
171               <el-button type="primary" @click="sendCommon">发送</el-button>
172             </el-form-item>
173
174             <el-form-item>
175               <el-button :type="btnType" @click="connectBtn">{{
176                   btnText
177                 }}</el-button>
178               <el-button type="info" @click="obtainAuthorization"
179               >新增授权</el-button
180               >
181             </el-form-item>
182           </div>
183           </el-col>
184         </el-row>
185       </el-form>
186     </el-dialog>
187   </div>
188 </template>
189 <script>
190 import {listWorkReport} from "@/api/main/om/workReport/workReport";
191 import {listStationConf,getIpv4} from "@/api/main/sc/stationConf";
192 import {
193   listFormulaChild,
194   noPageListFormulaChild,
195   releaseCheck,
196   updateResults,
197   updateTighteningFormula,
198   workpieceRelease, yzUpdateResults, yzUpdateTighteningFormula
199 } from "@/api/main/bs/formulaChild/formulaChild";
200 import MySerialPort from "@/utils/MySerialPort";
201 import USBDevice from "@/utils/usb.json";
202 import {listProductionOrde} from "@/api/main/om/productionOrde/productionOrde";
203 import {addPassingStationCollection} from "@/api/main/da/passingStationCollection/passingStationCollection";
204 import {
205   addBasicParameters,
206   addParamCollection,
207   addTighteningParameters,
208   saveCampaignTimeParameters,
4a5f2a 209   replaceAssemblyCode, yzAddBasicParameters,
2c7661 210 } from "@/api/main/da/paramCollection/paramCollection";
A 211
212 export default {
213   name: "stationTerminal",
214   data() {
215     return {
216       showInput: true,
217       serialPortContent: '',
218       // 查询参数
219       formulaChildParams: {
220         pageNum: 1,
221         pageSize: 10,
222         productCode: null,
223         processesCode: null,
224       },
225       // 配方配置子信息表格数据
226       formulaChildList: [],
227       ipAddress: '',
228       imgSrc: '',
229       headContent: {
230         processesCode: 'OP1010',
231         processesName: '贴标机-贴码',
232         sfcCode: '',
233         yzSfcCode: '',
234       },
235       workpieceInformation: {
236         workOrderNo: null,
237         productCode: null,
238         productModel: null,
239         productName: null,
240         beat: null,
241       },
242       // 查询参数
243       queryParams: {
244         pageNum: 1,
245         pageSize: 10,
246         sfcCode: null,
247       },
248       // 查询参数
249       StationConfQueryParams: {
250         pageNum: 1,
251         pageSize: 10,
252         ipAddress: null,
253       },
254       cakeLamp: {
255         plcState: 1, //plc
256         scannerState: 1, //扫码枪
257         InPlace: 0, //工件到位
258         scanFinish: 0,
259         startWork: 0,
260         release: 0 //允许放行
261       },
262       content: '',
263       activeName: 'first',
4a5f2a 264       url: "ws://192.168.2.76:8080/websocket/message/",
2c7661 265       message: "",
A 266       text_content: "",
267       ws: null,
268       inputValue: '9',
269
270       open1: false,
271       input: "",
272       keepReading: true,
273       form1: {
274         baudRate: "115200",
275         dataBits: "8",
276         stopBits: "1",
277         parity: "none",
278         flowControl: "none",
279         desc: "",
280         type: "1",
281         isShowHistory: false,
282       },
283       btnType: "primary",
284       btnText: "连接串口",
285       restaurants: [],
286       portsList: [],
287       isShowSendArea: false,
288       readType: 1,
289       title: "",
290
291       passingStationForm: {},
292       originalArray: [],
293     }
294   },
295   beforeDestroy() {
296     this.exit();
297   },
298   created() {
299     this.initStation();
300     // this.getStationConfList();
301     // setTimeout(() => {
302     //   this.connectWebsocket();
303     // }, 3000);
304   },
305   mounted() {
306     if ("serial" in navigator) {
307       this.myserialport = new MySerialPort();
308       this.getPorts();
309       navigator.serial.addEventListener("connect", (e) => {
310         this.$message.success("设备已连接");
311         this.getPorts();
312       });
313       navigator.serial.addEventListener("disconnect", (e) => {
314         this.$message.error("设备已断开");
315       });
316       this.restaurants = this.loadAll();
317     } else {
318       this.$message.error(
319         "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
320       );
321     }
322   },
323   computed: {
324     isDisable() {
325       return this.btnType === "danger";
326     },
327   },
328   methods: {
329     serialLink() {
330       this.open1 = true
331     },
332     bindYzSfc(){
333       if(this.headContent.sfcCode!==""&&this.headContent.yzSfcCode!==""){
334         let param = {
335           sfcCode: this.headContent.sfcCode,
336           locationCode: this.headContent.processesCode,
337           yzSfcCode: this.headContent.yzSfcCode
338         }
339         this.$message('可以绑定!');
340         replaceAssemblyCode(param).then(response => {
341
342         });
343       }
344     },
4a5f2a 345
2c7661 346     Release(){
A 347       // this.$message('portsList!'+this.portsList.length);
348       if(this.btnType === "danger"){
349         this.$message('连接了!');
350
351       }else {
352         this.$message('mei连接了!');
353
354       }
355
356     },
357     serialPortMethod(value){
358       let formulaChildParams = {
359         scanBarcode: value,
360         sfcBarcode: this.headContent.sfcCode,
361         workOrderNo: this.workpieceInformation.workOrderNo,
362         productCode: "1P102S",
363         locationCode: this.headContent.processesCode,
364         collectionTime: new Date()
365       }
366       yzUpdateResults(formulaChildParams).then(response => {
367         this.getListFormulaChild()
368       });
369     },
370     rowStyle({ row }) {
371       if (row.results === 'OK') {
372         return 'background-color: PaleGreen';
373       } else if (row.results === 'NG') {
374         return 'background-color: LightSalmon';
375       }
376       return '';
377     },
378     /** 查询配方配置子信息列表 */
379     getListFormulaChild() {
380       this.formulaChildParams.productCode = "1P102S"
381       this.formulaChildParams.processesCode = this.headContent.processesCode
382       console.log(this.formulaChildParams)
383       noPageListFormulaChild(this.formulaChildParams).then(response => {
384         this.formulaChildList = response.rows;
385       });
386     },
387     endClear(){
388
389     },
390     changeMenu(tab, event) {
391       console.log(tab, event);
392     },
393     clearClick(){
394       this.$message('这是一条清除消息提示');
395       this.headContent.sfcCode = null
396     },
397     scanCompleted(){
398       this.$message('扫码完成'+this.content);
399       this.headContent.sfcCode = this.content
400       this.queryParams.sfcCode = this.content
401       this.getList()
402       this.getListFormulaChild()
403       this.cakeLamp.scanFinish = 1
404       this.cakeLamp.startWork = 1
405
406     },
407     /** 查询工单列表 */
408     async getList() {
409       this.getListFormulaChild()
4a5f2a 410       this.addOverStationCollection()
2c7661 411     },
A 412
413     /** 入站增加过站采集记录 **/
414     addOverStationCollection(){
415       this.passingStationForm = {
416         id: null,
4a5f2a 417         // workOrderNo: this.workpieceInformation.workOrderNo,
A 418         productCode: "1P102S",
2c7661 419         locationCode: this.headContent.processesCode,
4a5f2a 420         // model: this.workpieceInformation.productModel,
2c7661 421         productBarcode: this.headContent.sfcCode,
A 422         sfcCode: this.headContent.sfcCode,
423         inboundTime: new Date()
424       }
425       addPassingStationCollection(this.passingStationForm).then(response => {});
4a5f2a 426       yzAddBasicParameters(this.passingStationForm).then(response => {});
2c7661 427     },
A 428     exit() {
429       if (this.ws) {
430         this.ws.close();
431         this.ws = null;
432       }
433     },
434     send() {
435       if (this.ws) {
436         this.ws.send(this.message);
437       } else {
438         alert("未连接到服务器");
439       }
440     },
441
442     initStation: async function () {
443       await getIpv4().then(response => {
444         this.StationConfQueryParams.ipAddress = response.msg
445         console.log('查询到本工位IP为' + this.StationConfQueryParams.ipAddress)
446       });
447       await listStationConf(this.StationConfQueryParams).then(response => {
448         let rows = response.rows[0]
449         if (response.rows.length === 0) {
450           this.$message('该工位没有配置IP,请联系管理员配置IP');
451           return
452         }
453         this.headContent.processesName = rows.processesName
454         this.headContent.processesCode = rows.processesCode
455         console.log('设置工位编码' + this.headContent.processesCode)
456
457       });
458       this.conCom()
459       console.log('websocket连接工位为' + this.headContent.processesCode)
460       const wsuri = this.url + this.headContent.processesCode;
461       this.ws = new WebSocket(wsuri);
462       const self = this;
463       this.ws.onopen = function (event) {
464         this.$message('websocket连接成功!');
465       };
466       this.ws.onmessage = function (event) {
467         if (event.data === "IN") {
468           self.cakeLamp.InPlace = 1;
469         } else if (event.data === "IN0") {
470           self.cakeLamp.InPlace = 0;
471         } else if (event.data === "OUT") {
472           console.log("out")
473
474           const param = {
475             workOrderNo: self.workpieceInformation.workOrderNo,
476             productCode: "1P102S",
477             locationCode: self.headContent.processesCode,
478             productBarcode: self.headContent.sfcCode,
479           }
480           // saveCampaignTimeParameters(param).then(response => {});
481           // self.cakeLamp.release = 1;
482           workpieceRelease(param).then(response => {});
483           self.formulaChildList = [];
484           self.headContent.sfcCode = '';
485           console.log(self.formulaChildList)
486         } else if (event.data === "END") {
487           // const param = {
488           //   workOrderNo: self.workpieceInformation.workOrderNo,
489           //   productCode: self.workpieceInformation.productCode,
490           //   locationCode: self.headContent.processesCode,
491           //   productBarcode: self.headContent.sfcCode,
492           // }
493           // saveCampaignTimeParameters(param).then(response => {});
494           // self.endClear()
495           // workpieceRelease(param).then(response => {});
496         } else if (event.data.includes("[")) {
497           let formulaChilds = "";
498           self.formulaChildList.sort((a, b) => a.stepSort - b.stepSort);
499           self.formulaChildList
500             .filter((formulaChild) => formulaChild.operationType === '1');
501           for (let i = 0; i < self.formulaChildList.length; i++) {
502             let formulaChild = self.formulaChildList[i];
503             let results = formulaChild.results;
504             if (results === '' || results === null || results === 'NG') {
505               formulaChilds = formulaChild;
506               break;
507             }
508           }
509           const param = {
510             tightenTheArray: event.data,
511             paramCode: formulaChilds.paramCode,
4a5f2a 512             // workOrderNo: self.workpieceInformation.workOrderNo,
A 513             productCode: "1P102S",
2c7661 514             locationCode: self.headContent.processesCode,
A 515             productBarcode: self.headContent.sfcCode,
516           }
517           addTighteningParameters(param).then(response => {});
518           yzUpdateTighteningFormula(param).then(response => {
519             console.log(response.msg)
520             if(response.msg === "1"){
521                 self.getListFormulaChild()
522
523             }else {
524               const param = {
525                 workOrderNo: self.workpieceInformation.workOrderNo,
526                 productCode: "1P102S",
527                 locationCode: self.headContent.processesCode,
528                 productBarcode: self.headContent.sfcCode,
529               }
530               saveCampaignTimeParameters(param).then(response => {});
531               workpieceRelease(param).then(response => {});
532               self.formulaChildList = [];
533               self.headContent.sfcCode = '';
534             }
535           });
536         }
537       };
538     },
539
540
541
542     //接受数据的回调
543     callBack(value) {
544       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
545       else {
546         const scanValue = this.myserialport.hex2atostr(value).replace(/[\r\n]/g, '');
547         console.log("串口收到数据-------------------"+scanValue)
548
549         if(this.headContent.sfcCode !== ''){
550           this.$message('扫描物料编码'+scanValue);
551           console.log(scanValue)
552           this.serialPortMethod(scanValue)
553         } else {
554           this.headContent.sfcCode = scanValue;
555           this.getList()
556         }
557
558       }
559     },
560     clearHistory() {
561       this.form1.desc = "";
562       this.myserialport.state.readValue = [];
563     },
564     loadHistory() {
565       if (this.form1.isShowHistory) this.form1.desc = this.readLi().join("");
566       else {
567         let temp = this.readLi();
568         if (temp.length > 0) this.form1.desc = temp[temp.length - 1].join("");
569       }
570     },
571     readLi() {
572       let readType = this.readType;
573       return this.myserialport.state.readValue.map((items, index) => {
574         const item = items.value;
575         const type = items.type; // 1接收,2发送
576         let body = [];
577         if (item !== undefined) {
578           let strArr = [];
579           for (let hex of Array.from(item)) {
580             strArr.push(hex.toString(16).toLocaleUpperCase());
581           }
582           if (strArr.includes("D") && strArr.includes("A")) {
583             if (strArr.indexOf("A") - strArr.indexOf("D") === 1) {
584               strArr.splice(strArr.indexOf("D"), 1);
585               strArr.splice(strArr.indexOf("A"), 1, <br key={0} />);
586             }
587           }
588           strArr = strArr.map((item) => {
589             if (typeof item === "string") {
590               if (readType === 1) {
591                 return this.myserialport.hex2a(parseInt(item, 16));
592               } else if (readType === 2) {
593                 return item + " ";
594               }
595             }
596             return item;
597           });
598           if (typeof strArr[strArr.length - 1] === "string") {
599             strArr.push("\r\n");
600           }
601           body.push(strArr.join(""));
602         }
603         return body;
604       });
605     },
606     conCom(){
607       try {
608         this.myserialport.state.baudRate = this.form1.baudRate;
609         this.myserialport.state.dataBits = this.form1.dataBits;
610         this.myserialport.state.stopBits = this.form1.stopBits;
611         this.myserialport.state.parity = this.form1.parity;
612         this.myserialport.state.flowControl = this.form1.flowControl;
613         this.myserialport.openPort(0, true, this.callBack);
614         console.log(this.form1.port)
615       } catch (error) {
616         this.$message.error("串口连接失败!请检查串口是否已被占用");
617       }
618       if (this.myserialport.state.isOpen) {
619         this.$message.success("串口连接成功");
620       }
621     },
622     //连接
623     async connectBtn() {
624       if (this.btnType === "primary") {
625         try {
626           this.myserialport.state.baudRate = this.form1.baudRate;
627           this.myserialport.state.dataBits = this.form1.dataBits;
628           this.myserialport.state.stopBits = this.form1.stopBits;
629           this.myserialport.state.parity = this.form1.parity;
630           this.myserialport.state.flowControl = this.form1.flowControl;
631           await this.myserialport.openPort(this.form1.port, true, this.callBack);
632           console.log(this.form1.port)
633         } catch (error) {
634           this.$message.error("串口连接失败!请检查串口是否已被占用");
635         }
636         if (this.myserialport.state.isOpen) {
637           this.$message.success("串口连接成功");
638           this.open1 = false
639           this.btnType = "danger";
640           this.btnText = "关闭串口";
641         }
642       } else {
643         this.myserialport.openPort(this.form1.port, false, this.callBack);
644         this.$message.success("串口关闭成功");
645         this.btnType = "primary";
646         this.btnText = "连接串口";
647       }
648     },
649     //授权
650     async obtainAuthorization() {
651       if ("serial" in navigator) {
652         console.log("The Web Serial API is supported.");
653         if (!this.myserialport) this.myserialport = new MySerialPort();
654         try {
655           await this.myserialport.handleRequestPort();
656           this.$message.success("串口授权成功");
657           this.getPortInfo(this.myserialport.state.ports);
658         } catch (error) {
659           this.$message.warning("未选择新串口授权!");
660         }
661       } else {
662         this.$message.error(
663           "当前为HTTP模式或者浏览器版本过低,不支持网页连接串口"
664         );
665       }
666     },
667     //串口列表初始化
668     getPortInfo(portList) {
669       this.portsList = [];
670       portList.map((port, index) => {
671         const { usbProductId, usbVendorId } = port.getInfo();
672         if (usbProductId === undefined || usbVendorId === undefined) {
673           this.portsList.push({ label: "未知设备" + index, value: index });
674         } else {
675           const usbVendor = USBDevice.filter(
676             (item) => parseInt(item.vendor, 16) === usbVendorId
677           );
678           let usbProduct = [];
679           if (usbVendor.length === 1) {
680             usbProduct = usbVendor[0].devices.filter(
681               (item) => parseInt(item.devid, 16) === usbProductId
682             );
683           }
684           this.portsList.push({ label: usbProduct[0].devname, value: index });
685         }
686       });
687     },
688     // 发送
689     async sendCommon() {
690       if (this.myserialport.state.isOpen) {
691         if (this.form1.sendMsg.length !== 0) {
692           const writeType = this.form1.type;
693           let value = this.form1.sendMsg;
694           let arr = [];
695           if (writeType === 1) {
696             // ASCII
697             for (let i = 0; i < value.length; i++) {
698               arr.push(this.myserialport.a2hex(value[i]));
699             }
700           } else if (writeType === 2) {
701             // HEX
702             if (/^[0-9A-Fa-f]+$/.test(value) && value.length % 2 === 0) {
703               for (let i = 0; i < value.length; i = i + 2) {
704                 arr.push(parseInt(value.substring(i, i + 2), 16));
705               }
706             } else {
707               this.$message.error("格式错误");
708               return;
709             }
710           }
711           this.myserialport.writeText(arr);
712         } else {
713           this.$message.warning("请输入发送的信息");
714         }
715       } else {
716         this.$message.warning("串口处于关闭状态,请连接串口");
717       }
718     },
719     async getPorts() {
720       await this.myserialport.getPorts();
721       this.getPortInfo(this.myserialport.state.ports);
722     },
723     querySearch(queryString, cb) {
724       var restaurants = this.restaurants;
725       var results = queryString
726         ? restaurants.filter(this.createFilter(queryString))
727         : restaurants;
728       // 调用 callback 返回建议列表的数据
729       cb(results);
730     },
731     createFilter(queryString) {
732       return (restaurant) => {
733         return (
734           restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
735           0
736         );
737       };
738     },
739     loadAll() {
740       return [
741         { value: "110" },
742         { value: "300" },
743         { value: "600" },
744         { value: "1200" },
745         { value: "2400" },
746         { value: "4800" },
747         { value: "7200" },
748         { value: "9600" },
749         { value: "14400" },
750         { value: "19200" },
751         { value: "28800" },
752         { value: "38400" },
753         { value: "56000" },
754         { value: "57600" },
755         { value: "76800" },
756         { value: "115200" },
757         { value: "230400" },
758         { value: "460800" },
759       ];
760     },
761   }
762 }
763
764 </script>
765 <style scoped>
766 .bottom-card{
767   height: 600px;
768 }
769 .circle-button{
770   height: 30px;
771   width: 30px;
772 }
773 .circle-red {
774   background-color: #e01a4f;
775 }
776 .circle-green {
777   background-color: green;
778 }
779 .circle-green-animate {
780   background-color: green;
781   animation: circle-green-animate 2s infinite;
782 }
783   @keyframes circle-green-animate {
784     50% {
785       opacity: 0.6;
786     }
787     0% {
788       opacity: 0.2;
789     }
790   }
791 .head-font{
792   /*font-weight: bold;*/
793   /*font-size: 25px;*/
794 }
795 span{
796   font-size: 15px;
797 }
798 .el-table .warning-row {
799   background: oldlace;
800 }
801
802 .el-table .success-row {
803   background: #f0f9eb;
804 }
805 </style>
806