From ce5b5da03e4f3b33412221e5f3c51863b63b4c11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LAPTOP-S9HJSOEB=5C=E6=98=8A=E5=A4=A9?=
 <wang.haotian@hzleaper.com>
Date: Mon, 4 Mar 2024 09:58:44 +0800
Subject: [PATCH] =?UTF-8?q?1.=E6=94=BE=E5=A4=A7=E7=9B=98=E7=82=B9=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=202.3d=E7=AB=8B=E4=BD=93=E4=BF=A1=E6=81=AF=E6=94=BE?=
 =?UTF-8?q?=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                             |   2 +
 src/api/http/http-api.js                 |   7 +-
 src/views/3DPointCloud/pointCloud.vue    | 153 +++++
 src/views/checkManage/checkOperation.vue | 699 +++++++++++++----------
 4 files changed, 559 insertions(+), 302 deletions(-)
 create mode 100644 src/views/3DPointCloud/pointCloud.vue

diff --git a/package.json b/package.json
index d239376..2e8b6dc 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
     "axios": "^0.19.2",
     "bootstrap": "^5.1.3",
     "core-js": "^3.6.5",
+    "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.6",
     "path-to-regexp": "^6.2.0",
     "style-loader": "^2.0.0",
diff --git a/src/api/http/http-api.js b/src/api/http/http-api.js
index 489fe2b..2880d41 100644
--- a/src/api/http/http-api.js
+++ b/src/api/http/http-api.js
@@ -152,11 +152,10 @@ export default  {
         name: '分类列表',
         method: 'POST'
     },
-    //盘点管理输入框搜索时联想用
     getCategoryList: {
-        url: '/category/list',
-        name: '分类列表',
-        method: 'GET'
+        url: '/stock/getCategoryList',
+        name: '品规信息',
+        method: 'POST'
     },
     addCategory: {
         url: '/category',
diff --git a/src/views/3DPointCloud/pointCloud.vue b/src/views/3DPointCloud/pointCloud.vue
new file mode 100644
index 0000000..7adcbfc
--- /dev/null
+++ b/src/views/3DPointCloud/pointCloud.vue
@@ -0,0 +1,153 @@
+<template>
+    <div
+        style="width: 1000px;height:800px;"
+        class="echar"
+        ref="charts"
+        id="main"
+    ></div>
+</template>
+
+<script>
+import * as echarts from "echarts/core";
+import { DatasetComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { Scatter3DChart } from "echarts-gl/charts";
+import { Grid3DComponent } from "echarts-gl/components";
+
+echarts.use([
+    DatasetComponent,
+    Grid3DComponent,
+    Scatter3DChart,
+    CanvasRenderer,
+]);
+export default {
+    props: ["src"],
+    name: "pointCloud",
+    watch: {
+        //监听并接收父组件的visible并赋值给isShow（子组件接收父组件props传过来的值时不能起一样的类名，会报重复定义的错）
+        src: function (newVal) {
+            console.log(newVal);
+            this.srcPath = newVal; //newVal即是visible
+            // newVal && this.showConfirm(); //newVal存在的话执行showConfirm函数
+        },
+    },
+    data() {
+        return {
+            dat: [],
+            option: {},
+            myChart: {},
+            srcPath: "",
+        };
+    },
+    methods: {
+        getData(myChart, option) {
+            let file_url = this.src;
+            console.log(file_url);
+            let xhr = new XMLHttpRequest();
+            xhr.open("get", file_url, true);
+            xhr.onload = function () {
+                if (xhr.status == 200) {
+                    // if (callback) {
+                    // callback();
+                    console.log(xhr.response);
+                    var lines = xhr.response.split("\r\n").slice(12);
+                    console.log(lines);
+                    // 将每行以空格作为分隔符形成二维数组
+                    var dataArray = lines.map(function (line) {
+                        console.log();
+                        var arry = line.trim()
+                            .split(" ")
+                            .map(function (value) {
+                                return 1 * parseFloat(value);
+                            });
+                        if(arry[2]>3000){
+                            console.log(arry);
+                            return "";
+                        }
+                        if(arry[1]>1000 || arry[1]<-1000){
+                            console.log(arry);
+                            return "";
+                        }
+                        if(arry[0]>1000 ||arry[0]<-500){
+                            console.log(arry);
+                            return "";
+                        }
+                        arry[2] = arry[2]-1000;
+                        return arry;
+                    }).filter(item => item !== "");
+                    option.dataset.source = dataArray;
+                    console.log(option);
+                    myChart.setOption(option);
+                }
+            };
+            xhr.send();
+            // 读取文件内容
+        },
+        myEcharts() {
+            // 基于准备好的dom，初始化echarts实例
+            var myChart = echarts.init(document.getElementById("main"));
+
+// x 轴的最小值和最大值
+let minX = Math.min(...data.map(item => item[0]));
+let maxX = Math.max(...data.map(item => item[0]));
+
+// 定义颜色渐变范围
+let colorMin = '#61dfff '; // 最小值的颜色
+let colorMax = '#366fff'; // 最大值的颜色
+            var symbolSize = 1.5;
+            var option = {
+                grid3D: {
+                    viewControl: {
+                        beta: -90,
+                        alpha: 15,
+                        distance: 75,
+                    },
+                },
+                xAxis3D: {
+                    min: 0,
+                    max: 2000,
+                },
+                yAxis3D: {
+                    min: -1000,
+                    max: 1000,
+                },
+                zAxis3D: {
+                    min: -1000,
+                    max: 1000,
+                },
+                dataset: {
+                    dimensions: ["z", "y", "x"],
+                    source: this.dat,
+                },
+                series: [
+
+                    {
+                        itemStyle: {
+    color: function (params) {
+      // 计算当前点在 x 轴上的位置比例
+      let ratio = (params.data[0] - minX) / (maxX - minX);
+      // 根据比例计算对应的颜色
+      let color = echarts.color.gradient(colorMin, colorMax)(ratio);
+
+      return color;
+    }
+  },
+                        type: "scatter3D",
+                        symbolSize: symbolSize,
+                        encode: {
+                            x: "x",
+                            y: "y",
+                            z: "z",
+                        },
+                    },
+                ],
+            };
+
+            this.getData(myChart, option);
+        },
+    },
+    mounted() {
+        this.myEcharts();
+    },
+};
+</script>
\ No newline at end of file
diff --git a/src/views/checkManage/checkOperation.vue b/src/views/checkManage/checkOperation.vue
index 655a5d2..47fd84f 100644
--- a/src/views/checkManage/checkOperation.vue
+++ b/src/views/checkManage/checkOperation.vue
@@ -3,17 +3,20 @@
 
         <div>
             <div class="carousel-page">
-                <div class="carousel-page-content" >
-                    <div class="img-box" style="width: 30%;">
+                <div class="carousel-page-content">
+                    <div
+                        class="img-box"
+                        style="width: 35%;"
+                    >
                         <ul>
                             <li class="img-box-item">
-                                 <span class="img-box-title">
+                                <span class="img-box-title">
                                     位置:
                                 </span>
                                 <span class="img-box-value">
                                     {{streetName}}-{{direction==1?"左":"右"}}-{{side==1?"浅":"深"}}-{{checkObj.column}}列-{{checkObj.row}}层
                                 </span>
-                            </li >
+                            </li>
                             <li class="img-box-item">
                                 <span class="img-box-title">
                                     核对状态:
@@ -22,8 +25,50 @@
                                     {{ statusMap[checkObj.status] }}
                                 </span>
                             </li>
-                            <li class="img-box-item" v-for="item in params" :key="item.label">
-                
+                            <li class="img-box-item">
+                                <span class="img-box-title">
+                                    品规:
+                                </span>
+                                <span class="img-box-value">
+
+                                    <a-select
+                                        ref="select"
+                                        style="width: 100%"
+                                        :placeholder="checkObj.category"
+                                        :defaultValue="checkObj.category"
+                                        @change="handleChangeVlue"
+                                    >
+                                        <a-select-option
+                                            v-for="i in categorys"
+                                            :key="i"
+                                            :value="i"
+                                        >
+                                            {{ i}}
+                                        </a-select-option>
+                                    </a-select>
+                                </span>
+                            </li>
+                            <li class="img-box-item">
+                                <span class="img-box-title">
+                                    个数:
+                                </span>
+                                <span class="img-box-value">
+                                    <a-input-number
+                                        id="inputNumber"
+                                        style="width: 100%"
+                                        v-model="checkObj.count"
+                                        :min="0"
+                                        :max="50"
+                                    />
+
+                                </span>
+                            </li>
+                            <li
+                                class="img-box-item"
+                                v-for="item in params"
+                                :key="item.label"
+                            >
+
                                 <span class="img-box-title">
                                     {{ item.label }}:
                                 </span>
@@ -33,396 +78,454 @@
                             </li>
                         </ul>
                     </div>
-                    <div class="img-box" style="width: 60%;">
-                        <a-carousel autoplay     style="width: 100%;height: 100%;" class="carousel-box" dot-position="right">
-                            
-                         
+                    <div
+                        class="img-box"
+                        style="width: 100%;"
+                    >
+                    <div class="carousel-wrapper">
 
                             <div
                                 v-for="ite in checkPics"
                                 :key="ite"
-                                style="float:left;"
+                                style="float:left;height:100%; width:100% ;display: flex; "
                             >
-                                <img  style="height:100%; width:100% "  :src="ite">
+                                <img
+                                    style="height:100%; width:100% ;"
+                                    :src="ite"
+                                >
                             </div>
-  </a-carousel>
-                       
-                           
+                    </div>
+
                         <p>盘点图</p>
                     </div>
-                    
+
                 </div>
             </div>
-            <div class="bottom-btn" >
-                <a-button class="btn"
-                        type="primary"
-                        style="background:#29c12b;border-color:#29c12b;"
-                        @click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
+            <div class="bottom-btn">
+                <a-button
+                    class="btn"
+                    type="primary"
+                    style="background:#29c12b;border-color:#29c12b;"
+                    @click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
                 >核对正确
                 </a-button>
-                <a-button class="btn"
-                        type="primary"
-                        style="background:#ff0000;border-color:#ff0000;"
-                        @click="checkfalse(checkObj.row,checkObj.column,checkObj.shelveId,index)"
-                >核对错误
+                <a-button
+                    class="btn"
+                    type="primary"
+                    style="background:#29c12b;border-color:#29c12b;"
+                    @click="get3D()"
+                >
+                    <a-modal
+                        width="1005px"
+                        v-model="visible"
+                        title="Basic Modal"
+                        @ok="handleOk"
+                    >
+                        <pointCloud :src="pcd"></pointCloud>
+                    </a-modal>
+
+                    3D图像
                 </a-button>
-		        <a-button class="btn"
-                        type="primary"
-                        style="background:#29c12b;border-color:#29c12b;"
-                        @click="nextOne(checkObj.id)">
-                        下一个盘点
+                <a-button
+                    class="btn"
+                    type="primary"
+                    style="background:#29c12b;border-color:#29c12b;"
+                    @click="nextOne(checkObj.id)"
+                >
+                    下一个盘点
                 </a-button>
             </div>
-            
+
         </div>
-       
 
-        <Model
-            :visible.sync="visible"
-            :modelData.sync="modelData"
-            :index="index"
-            @sure="submit"
-            @close="closeModel"
-        />
     </div>
 </template>
 <script>
-import Model from "./model.vue"
-import {imgUrl} from "@/api/importExcel";
-import { message } from 'ant-design-vue';
+import Model from "./model.vue";
+import { imgUrl } from "@/api/importExcel";
+import { message } from "ant-design-vue";
+import pointCloud from "../3DPointCloud/pointCloud.vue";
+
 export default {
     data() {
         return {
-            checkPics:[],
-            upUrl:"",
+            checkPics: [],
+            upUrl: "",
             checkObj: {},
             row: 1,
+            pcd:"http://127.0.0.1:9007/api/pointFile/3.pcd",
             column: 1,
-            streetName: '',
+            streetName: "",
             visible: false,
-            category: '',
+            category: "",
             count: 0,
             modelData: {},
             index: 0,
-            imgUrl: '',
-            params:[
+            imgUrl: "",
+            categorys: ["3","2"],
+            params: [
                 // {
                 //     label:'盘点批次号',
                 //     key: 'lotnum'
                 // },
-                
-                {
-                    label:'盘点任务号',
-                    key: 'checkNum'
-                },
-                {
-                    label:'托盘码',
-                    key: 'trayCode'
-                },
+
                 {
-                    label:'品规',
-                    key: 'category'
+                    label: "盘点任务号",
+                    key: "checkNum",
                 },
                 {
-                    label:'个数',
-                    key: 'count'
+                    label: "托盘码",
+                    key: "trayCode",
                 },
                 {
-                    label:'盘点时间',
-                    key: 'exportTime'
+                    label: "盘点时间",
+                    key: "exportTime",
                 },
-                
             ],
-            statusMap: {0:"未盘点",1:"盘点异常",2:"核对正确",3:"人工核对正确"}
-            
-        }
+            statusMap: {
+                0: "未盘点",
+                1: "盘点异常",
+                2: "核对正确",
+                3: "人工核对正确",
+            },
+        };
     },
-    beforeRouteLeave(to ,form, next) {
+    beforeRouteLeave(to, form, next) {
         // 修复第二次进入界面不执行created
         this.$destroy();
-        if (to.name == 'checkManage') {
-            to.meta.isUseCache = true;    
-        }else{
+        if (to.name == "checkManage") {
+            to.meta.isUseCache = true;
+        } else {
             to.meta.isUseCache = false;
-        }   
+        }
         next();
     },
     created() {
-        this.imgUrl = imgUrl
-        
+        this.imgUrl = imgUrl;
+
         //this.getStreetList();
-        if (this.$route.query.row && this.$route.query.column && this.$route.query.direction && this.$route.query.side && this.$route.query.streetId) {
-            this.id = this.$route.query.id
-            this.row = this.$route.query.row
-            this.column = this.$route.query.column
-            this.direction = this.$route.query.direction
-            this.side = this.$route.query.side
-            this.streetId = this.$route.query.streetId
-            this.streetName = this.$route.query.name
-            
+        if (
+            this.$route.query.row &&
+            this.$route.query.column &&
+            this.$route.query.direction &&
+            this.$route.query.side &&
+            this.$route.query.streetId
+        ) {
+            this.id = this.$route.query.id;
+            this.row = this.$route.query.row;
+            this.column = this.$route.query.column;
+            this.direction = this.$route.query.direction;
+            this.side = this.$route.query.side;
+            this.streetId = this.$route.query.streetId;
+            this.streetName = this.$route.query.name;
+
             this.getStockInfo(this.row, this.column);
+            this.getCategoryList();
         }
     },
-    mounted() {
-        
-    },
-    destroyed () {
-        
-    },
+    mounted() {},
+    destroyed() {},
     components: {
-        Model
+        Model,
+        pointCloud,
     },
     methods: {
-       
+        handleChangeVlue(value){
+            this.checkObj.category = value
+        },
+        get3D() {
+            this.visible = true;
+        },
+        handleOk() {
+            this.visible = false;
+        },
         //获取复核页面的核对信息
         getStockInfo(row, column) {
-            this.$api.httpApi.getStockInfo({
-                data: {
-                    row: Number(row),
-                    column: Number(column),
-                    direction: this.direction,
-                    side: this.side,
-                    streetId: this.streetId,
-                }
-            }).then(res => {
-                if (res.data) {
-                    this.checkObj = res.data;
-                    var pic = this.checkObj.checkPic;
-                    this.checkPics = pic.toString().split(';')
-                    this.$forceUpdate()
-                    //this.shelveId = res.data.shelveId;
-                    //this.getScanAndCheck();
-                }
-            }).catch(err => {
-                console.log(err)
-            });
+            this.$api.httpApi
+                .getStockInfo({
+                    data: {
+                        row: Number(row),
+                        column: Number(column),
+                        direction: this.direction,
+                        side: this.side,
+                        streetId: this.streetId,
+                    },
+                })
+                .then((res) => {
+                    if (res.data) {
+                        this.checkObj = res.data;
+                        var pic = this.checkObj.checkPic;
+                        this.checkPics = pic.toString().split(";");
+                        this.pcd = res.data.pcd
+                        this.$forceUpdate();
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+        //获取复核页面的核对信息
+        getCategoryList() {
+            this.$api.httpApi
+                .getCategoryList({
+                    data: {},
+                })
+                .then((res) => {
+                    if (res.data) {
+                        this.categorys = res.data;
+                        console.log(this.categorys);
+                        //this.shelveId = res.data.shelveId;
+                        //this.getScanAndCheck();
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
         },
         handleChange(value) {
-            
-            this.select = value
-            this.id = value
-            this.row = 1
-            this.column = 1
-            this.getStockInfo(1, 1)
+            this.select = value;
+            this.id = value;
+            this.row = 1;
+            this.column = 1;
+            this.getStockInfo(1, 1);
         },
-        
-        checkSure(row, column, shelveId, index) {
-            this.$api.httpApi.stockCheckCorrect({
-                data: {
-                    row: Number(row),
-                    column: Number(column),
-                    side: Number(this.side),
-                    streetId: Number(this.streetId),
-                    direction: Number(this.direction),
-                    ok: 1
-                }
-            }).then(res => {
-                if (res.code == 200) {
-                    this.$message.success('操作成功');
-                    this.getStockInfo(this.row,this.column)
-                }
 
-            }).catch(err => {
-
-            });
+        checkSure(row, column, shelveId, index) {
+            this.$api.httpApi
+                .stockCheckCorrect({
+                    data: {
+                        row: Number(row),
+                        column: Number(column),
+                        side: Number(this.side),
+                        streetId: Number(this.streetId),
+                        direction: Number(this.direction),
+                        count: this.checkObj.count,
+                        category: this.checkObj.category,
+                        ok: 1,
+                    },
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("操作成功");
+                        this.getStockInfo(this.row, this.column);
+                    }
+                })
+                .catch((err) => {});
         },
         checkfalse(row, column, shelveId, index) {
-            this.$api.httpApi.stockCheckCorrectErr({
-                data: {
-                    row: Number(row),
-                    column: Number(column),
-                    side: Number(this.side),
-                    streetId: Number(this.streetId),
-                    direction: Number(this.direction),
-                    ok: 0
-                }
-            }).then(res => {
-                if (res.code == 200) {
-                    this.$message.success('操作成功');
-                    this.getStockInfo(this.row,this.column)
-                }
-
-            }).catch(err => {
-
-            });
+            this.$api.httpApi
+                .stockCheckCorrectErr({
+                    data: {
+                        row: Number(row),
+                        column: Number(column),
+                        side: Number(this.side),
+                        streetId: Number(this.streetId),
+                        direction: Number(this.direction),
+                        ok: 0,
+                    },
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("操作成功");
+                        this.getStockInfo(this.row, this.column);
+                    }
+                })
+                .catch((err) => {});
         },
         showModel(checkObj, index) {
-            this.visible = true
-            this.modelData = checkObj
+            this.visible = true;
+            this.modelData = checkObj;
             this.index = index;
         },
         submit(visible, index) {
-            
-            this.visible = visible
-            console.log(index)
+            this.visible = visible;
+            console.log(index);
             // this.next(index);
             this.checkObj.status = 1;
         },
         closeModel(visible, data) {
-            this.visible = visible
-            this.modelData = data
+            this.visible = visible;
+            this.modelData = data;
         },
-        nextOne(id){
-            this.$api.httpApi.nextOne({
-                data: {
-                    id:Number(id)
-                }
-            }).then(res => {
-                if (res.data && res.data != null) {
-                    console.log(res.data)
-                    this.checkObj = res.data;
-                    this.id = res.data.id
-                    this.row = res.data.row
-                    this.column = res.data.column
-                    this.direction = res.data.direction
-                    this.side = res.data.side
-                    this.streetId = res.data.streetId
-                    this.streetName = res.data.streetName
-                    this.checkPics = this.checkObj.checkPic.slpit(';');
-            
-                }else{
-                    message.info('全部盘点已完成')
-                }
-            }).catch(err => {
-                console.log(err)
-            });
-        }
-       
-    }
-}
+        nextOne(id) {
+            this.$api.httpApi
+                .nextOne({
+                    data: {
+                        id: Number(id),
+                    },
+                })
+                .then((res) => {
+                    if (res.data && res.data != null) {
+                        console.log(res.data);
+                        this.checkObj = res.data;
+                        this.id = res.data.id;
+                        this.row = res.data.row;
+                        this.column = res.data.column;
+                        this.direction = res.data.direction;
+                        this.side = res.data.side;
+                        this.streetId = res.data.streetId;
+                        this.streetName = res.data.streetName;
+                        var pic = this.checkObj.checkPic;
+                        this.checkPics = pic.toString().split(";");
+                        
+                        console.log(this.checkPics);
+                        this.$forceUpdate();
+                    } else {
+                        message.info("全部盘点已完成");
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
+    },
+};
 </script>
 <style lang="scss">
 /* For demo */
 
+.carousel-wrapper {
+  overflow: hidden;
+  width: 100%;
+  display: flex;
+}
 
-    .checkOperation {
-            .carousel-page {
-                width: 100%;
-                /*border: solid 1px blue;*/
-                &-title {
-                    color: #009FE3;
-                    font-size: 16px;
-                    margin: 0;
-                    padding: 15px 0 10px 25px;
-                }
+.ant-carousel .slick-list {
+  margin: 0 -8px;
+}
 
-                &-content {
-                    display: flex;
-                    align-items: center;
-                    padding-left: 20px;
+.ant-carousel .slick-slide {
+  padding: 0 8px;
+}
 
-                    .img-box {
-                        display: flex;
-                        padding: 80px;
-                        margin-right: 56px;
-                        align-items: center;
-                        justify-content: center;
-                        flex-direction: column;
-                        font-size: 17px;
-                        height: 900px;
-                        margin-right: 10px;
-                        img {
-                            height: 100%
-                        }
+.checkOperation {
+    .carousel-page {
+        width: 100%;
+        /*border: solid 1px blue;*/
+        &-title {
+            color: #009fe3;
+            font-size: 16px;
+            margin: 0;
+            padding: 15px 0 10px 25px;
+        }
+
+        &-content {
+            display: flex;
+            align-items: center;
+            padding-left: 20px;
+
+            .img-box {
+                display: flex;
+                padding: 50px;
+                margin-right: 56px;
+                align-items: center;
+                justify-content: center;
+                flex-direction: column;
+                font-size: 17px;
+                height: 900px;
+                margin-right: 10px;
+                img {
+                    height: 100%;
+                }
 
-                        p {
-                            height: 25px;
+                p {
+                    height: 25px;
+                }
+                ul {
+                    width: 100%;
+                    height: 100%;
+                    margin-bottom: 0;
+                    padding-inline-start: 0;
+                    .img-box-item {
+                        background-color: #ffaf11;
+                        margin: 10px 0;
+                        padding: 5px;
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: #494e52;
+                        .img-box-title {
+                            width: 30%;
+                            display: inline-block;
                         }
-                        ul {
-                            width: 100% / 4;
-                            height: 100%;
-                            margin-bottom: 0;
-                            padding-inline-start: 0;
-                            .img-box-item {
-                                background-color: #ffaf11;
-                                margin: 10px 0;
-                                padding: 5px;
-                                font-size: 16px;
-                                font-weight: 600;
-                                color: #494e52;
-                                .img-box-title {
-                                    width: 80px;
-                                    display: inline-block;
-                                }
-                                .img-box-value {
-                                    display: inline-block;
-                                    width: calc(100% - 130px);
-                                    overflow: hidden;
-                                    width: 130px;
-                                    position: relative;
-                                    top: 5px;
-                                }
-                            }
+                        .img-box-value {
+                            display: inline-block;
+                            width: calc(100% - 130px);
+                            overflow: hidden;
+                            width: 70%;
+                            position: relative;
+                            top: 5px;
                         }
                     }
                 }
+            }
+        }
 
-                &-footer {
-                    width: calc(100% - 380px);
-                    .info-box {
-                        color: #000000;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
+        &-footer {
+            width: calc(100% - 380px);
+            .info-box {
+                color: #000000;
+                display: flex;
+                align-items: center;
+                justify-content: center;
 
-                        p {
-                            padding: 0 20px;
-                            font-size: 18px;
-                        }
-                    }
+                p {
+                    padding: 0 20px;
+                    font-size: 18px;
+                }
+            }
 
-                    .status {
-                        text-align: center;
-                        font-size: 21px;
-                    }
+            .status {
+                text-align: center;
+                font-size: 21px;
+            }
 
-                    .status-btn {
-                        display: flex;
-                        align-items: flex-start;
-                        justify-content: flex-start;
+            .status-btn {
+                display: flex;
+                align-items: flex-start;
+                justify-content: flex-start;
 
-                        .btn {
-                            padding: 50px;
-                            font-size: 20px;
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            line-height: 0;
-                            margin: 15px 45px;
-                        }
-                    }
+                .btn {
+                    padding: 50px;
+                    font-size: 20px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    line-height: 0;
+                    margin: 15px 45px;
                 }
             }
+        }
+    }
 
-        .bottom-btn {
-            width: 100%;
-            display: flex;
-            align-items: right;
-            justify-content: center;
+    .bottom-btn {
+        width: 100%;
+        display: flex;
+        align-items: right;
+        justify-content: center;
 
-            p {
-                font-size: 18px;
-                padding: 0;
-                margin: 0;
-            }
+        p {
+            font-size: 18px;
+            padding: 0;
+            margin: 0;
+        }
 
-            .btn {
-                margin: 25px;
-            }
+        .btn {
+            margin: 25px;
         }
     }
-    .historyImg {
-        width: 180px;
-        height:auto;
-    }
+}
+.historyImg {
+    width: 180px;
+    height: auto;
+}
 
-    .carousel-box{
+.carousel-box {
     text-align: center;
-  background: #364d79;
-  height: 100%;
-  overflow: hidden;
-  li{
-    background-color: #ffffff;
-  }
+    background: #364d79;
+    height: 100%;
+    overflow: hidden;
+    li {
+        background-color: #ffffff;
+    }
 }
 </style>