zhouzhendong
/
baoshi-was


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388
							<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{{asset('icon/faviconc.ico')}}" type="image/x-icon"/>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>设备平面</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <link href="{{ mix('css/animation.css') }}" rel="stylesheet">
    <style>
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
        }
        .p1{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .el-center{
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .el-left-bottom{
            position: absolute;
            bottom: 0;
            left: 0;
        }
        .el-right-bottom{
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .re{transform:rotate(-90deg);
            -ms-transform:rotate(-90deg); /* Internet Explorer 9*/
            -moz-transform:rotate(-90deg); /* Firefox */
            -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
            -o-transform:rotate(-90deg); /* Opera */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            font-family: "Microsoft YaHei Light","sans-serif";
        }
    </style>
</head>
<body>
<div class="container-fluid w-100 h-100" id="container" @mousemove="eqMove()" @mouseup="eqUp()">
    <div class="row w-100 h-100">
        <div class="col-2 " style="user-select: none;" id="tool">
            <div class="dropdown">
                <button type="button" class="btn p-0 w-100" id="dropdownMenu"
                        data-toggle="dropdown">
                    <h4 class="text-muted mt-1 p1">@{{ name }}&nbsp;&nbsp;<i class="fa fa-exchange text-info"></i></h4>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
                    <li role="presentation" v-for="warehouse in warehouses" v-if="warehouse.id!==selected">
                        <a role="menuitem" tabindex="-1" style="cursor: pointer" class="ml-3"
                           @click="selectedWarehouse(warehouse)">@{{ warehouse.name }}</a>
                    </li>
                </ul>
            </div>
            <p class="font-weight-bold p-0 mb-0 mt-5">位置</p>
            <div class="row text-muted small">
                <small class="col-6">X</small>
                <small class="col-6">Y</small>
            </div>
            <div class="row m-0 p-0">
                <input type="number" class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.x"
                       @blur="changeNumber('x')"></input>
                <input type="number" class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.y"
                       @blur="changeNumber('y')"></input>
            </div>
            <p class="font-weight-bold p-0 mb-0 mt-3">大小</p>
            <div class="row text-muted small">
                <small class="col-6">高</small>
                <small class="col-6">宽</small>
            </div>
            <div class="row m-0 p-0">
                <input type="number" class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.height" @blur="changeNumber('height')"></input>
                <input type="number" class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.width" @blur="changeNumber('width')"></input>
            </div>
            <p class="font-weight-bold p-0 mb-0 mt-3">其他</p>
            <div class="row text-muted small">
                <small class="col-6">层级</small>
                <small class="col-6">颜色</small>
            </div>
            <div class="row m-0 p-0">
                <input type="number" class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.index" @blur="changeNumber('index')"></input>
                <input class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.color" @blur="changeText('color')"></input>
            </div>
            <div class="row text-muted small">
                <small class="col-6">名称</small>
                <small class="col-6">名称位置</small>
            </div>
            <div class="row m-0 p-0">
                <input class="col-5 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" :value="currentEl.name" @blur="changeText('name')"></input>
                <select class="col-5 offset-1 form-control form-control-sm p-0" :disabled="currentEl.x===undefined" v-model="currentEl.coords">
                    <option value="左上">左上</option>
                    <option value="左下">左下</option>
                    <option value="右上">右上</option>
                    <option value="右下">右下</option>
                    <option value="居中">居中</option>
                    <option value="中上">中上</option>
                </select>
            </div>
            <div class="row text-muted small">
                <small class="col-6">边框</small>
            </div>
            <div class="m-0 small">
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="top" :disabled="currentEl.x===undefined">上
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="bottom" :disabled="currentEl.x===undefined">下
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="left" :disabled="currentEl.x===undefined">左
                    </label>
                </div>
                <div class="form-check">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" v-model="currentEl.border" value="right" :disabled="currentEl.x===undefined">右
                    </label>
                </div>
            </div>
            <p class="font-weight-bold p-0 mb-0 mt-5 h5">全局</p>
            <div class="row text-muted">
                <div class="col-4">缩放</div>
                <div class="input-group input-group-sm col-8 m-0">
                    <input type="number" class="form-control" step="1" v-model="scale"></input>
                    <div class="input-group-append">
                        <span class="input-group-text">%</span>
                    </div>
                </div>
            </div>
            <div class="row mt-3">
                <h5 class="font-weight-bold ml-3">设备</h5>
                <div class="form-check ml-3">
                    <label class="form-check-label">
                        <input type="checkbox" class="form-check-input" v-model="grid">网格
                    </label>
                </div>
            </div>
            <div style="height: 250px;overflow-y: auto;overflow-x: hidden" class="w-100">
                <div class="row" v-for="equipment in equipments" @mousedown="eqDown(equipment)">
                    <div class="col-5">
                        <div style="border: 1px #0070C0 solid" :style="[{backgroundColor:equipment.color},{width:equipment.h+'px'},{height:equipment.w+'px'}]"></div>
                    </div>
                    <div class="col-7 p1">
                        @{{ equipment.describe }}
                    </div>
                </div>
            </div>
            <button class="btn btn-info col-10 text-white" style="position:absolute;bottom: 20px;cursor: pointer">保存更改</button>
        </div>
        <div class="col-10 p-0">
            <div class="w-100 bg-secondary" id="canvasApp" style="height: 100vh;overflow: auto;user-select: none;">
                <div id="canvas" :style="[{width:container.width*(scale/100)+'px'},{height:container.height*(scale/100)+'px'},{transform: 'scale('+(scale/100)+')'}]"
                     style="position: relative;transform-origin: 0 0" class="bg-white"
                 @mousedown="contentOnmousedown" @mousemove="contentOnmousemove" @mouseup="contentOnmouseup">
                    <vue-drag-resize v-for="(element,index) in elements"
                                     @activated="onActivated(element)"
                                     @dragging="onDragging"
                                     @resizing="onResizing"
                                     :style="[{backgroundColor:element.color},
                                element.border.indexOf('left')===-1 ? {borderLeft:'none'} : {},
                                element.border.indexOf('right')===-1 ? {borderRight:'none'} : {},
                                element.border.indexOf('top')===-1 ? {borderTop:'none'} : {},
                                element.border.indexOf('bottom')===-1 ? {borderBottom:'none'} : {}]"
                                     style="border-width:1px;border-color: #000000;border-style: solid"
                                     :key="index" :prevent-active-behavior="isNotEdit"
                                     :parent-limitation="true" :w="element.width" :h="element.height"
                                     :x="element.x" :y="element.y" :z="element.index">
                        <div :class="coordsMapping[element.coords]">@{{ element.name }}</div>
                    </vue-drag-resize>
                    <vue-drag-resize style="border-width:1px;border-color: #0070C0;border-style: dashed;cursor: pointer"
                                     v-for="(element,index) in equipmentElements"
                                     :is-resizable="false" :snap-to-grid="grid" :grid-x="40" :grid-y="30"
                                     :style="[{backgroundColor:element.color}]"
                                     :key="'eq-'+index" :prevent-active-behavior="isNotEdit"
                                     :parent-limitation="true" :w="element.width" :h="element.height"
                                     :x="element.x" :y="element.y" :z="90">
                        <div class="h-100 re w-100 el-center">@{{ element.name }}</div>
                    </vue-drag-resize>
                </div>
            </div>
        </div>
    </div>
    @include("equipment._detailInfo")
    @include("equipment._location")
</div>
</body>
<script src="{{ mix('js/app.js') }}"></script>
<script type="text/javascript">
    var vue = new Vue({
        el:"#container",
        data:{
            warehouses:[{id:1,name:"松江泗砖仓库一层"},{id:2,name:"九干"}], //仓库描述
            selected:"",                                                //当前选中的仓库ID
            container:{width:1950,height:1125},                         //容器初始大小
            name:"",                                                    //当前选中的仓库NAME
            isNotEdit:false,                                            //是否允许编辑
            currentEl:{},                                               //当前选中的元素
            coordsMapping:{                                             //元素信息映射
                "居中":"h-100 w-100 el-center",
                "中上":"text-center",
                "左上":"",
                "左下":"el-left-bottom",
                "右上":"text-right",
                "右下":"el-right-bottom",
            },
            elements:[                                                  //场景元素池
                {
                    x:0,
                    y:0,
                    width:22.5,
                    height:30,
                    name:"test",

                    coords:"居中",
                    border:["left","top","right","bottom"],
                    color:"white",
                    index:1,
                },
            ],
            clientCoords:{},                                            //坐标系记录
            scale:100,                                                  //缩放值
            equipments:[                                                //备选设备池
                {id:1,w:22.5,h:45,color:"RGB(252,228,214)",describe:"4层高位货架，可设八个标准托盘位"},
                {id:2,w:22.5,h:45,color:"RGB(255,255,255)",describe:"5层高位货架，可设十个标准托盘位"},
                {id:3,w:22.5,h:45,color:"RGB(169,208,142)",describe:"叉车通道，可设三个标准托盘位"},
                {id:4,w:22.5,h:45,color:"RGB(221,235,247)",describe:"叉车通道，可设六个标准托盘位"},
                {id:5,w:22.5,h:30,color:"RGB(255,255,0)",describe:"半组货架，可设四层高四个标准托盘位"},
                {id:6,w:22.5,h:30,color:"RGB(189,215,238)",describe:"叉车通道，顶上两个托盘位"},
                {id:7,w:22.5,h:30,color:"RGB(255,255,5)",describe:"半组货架，可设五层高五个标准托盘位"},
            ],
            currentEq:{                                                 //选中的设备
                el:null,
                obj:null,
            },
            equipmentElements:[                                         //设备元素池
            ],
            grid:true,                                                  //设备拖拽是否开启网格
            isLoadLocation:false,                                       //开启加载库位
        },
        mounted() {
            $("#detailInfo").modal("show");
            let record = localStorage.getItem("equipment:warehouse");
            if (record){
                let recordObj = JSON.parse(record);
                this.selected = recordObj.id;
                this.name = recordObj.name;
            }else{
                if (this.warehouses.length>0)this.selectedWarehouse(this.warehouses[0]);
            }
        },
        methods:{
            //备选设备拖拽按下事件
            eqDown(equipment){
                if (this.currentEq.obj!==null)return;
                let div = document.createElement("div");
                div.style.width = equipment.w+'px';
                div.style.height = equipment.h+'px';
                div.style.backgroundColor = equipment.color;
                div.style.zIndex = '999';
                div.style.position = 'fixed';
                div.style.left = event.clientX+'px';
                div.style.top = event.clientY+'px';
                div.style.border = '1px #0070C0 solid';
                div.style.opacity = '0.5';
                document.getElementById("container").append(div);
                this.currentEq.el = div;
                this.currentEq.obj = equipment;
            },
            //备选设备拖拽移动事件
            eqMove(){
                if (this.currentEq.obj===null)return;
                let x = event.clientX;
                let y = event.clientY;
                setTimeout(()=>{
                    this.currentEq.el.style.left = x+'px';
                    this.currentEq.el.style.top = y+'px';
                },10);
            },
            //备选设备拖拽松开事件
            eqUp(){
                if (this.currentEq.obj===null)return;
                this.currentEq.el.remove();
                this.currentEq.el = null;

                let content = document.getElementById("canvasApp");
                let toolWid = document.getElementById("tool").offsetWidth;
                let x = event.clientX-toolWid+content.scrollLeft;
                let y = event.clientY+content.scrollTop;
                if (x>=0 && y>=0){
                    this.equipmentElements.push({
                        x:x, y:y,
                        width:this.currentEq.obj.w,
                        height:this.currentEq.obj.h,
                        name:"test",
                        color:this.currentEq.obj.color,
                    });
                }
                this.currentEq.obj = null;
            },
            //场景拖拽按下事件
            contentOnmousedown(event){
                if (!this.isNotEdit || this.clientCoords.x!==undefined)return;
                this.clientCoords = {
                    x:event.clientX,
                    y:event.clientY
                };
            },
            //场景拖拽移动事件
            contentOnmousemove(event){
                if (this.clientCoords.x===undefined)return;
                let diffX = event.clientX-this.clientCoords.x-2;
                let diffY = event.clientY-this.clientCoords.y-2;
                let content = document.getElementById("canvasApp");
                setTimeout(()=>{
                    content.scrollTo(content.scrollLeft+diffX,content.scrollTop+diffY);
                },10);
            },
            //场景拖拽松开事件
            contentOnmouseup(){
                this.clientCoords = {};
            },
            onActivated(element){
                if (this.isNotEdit)return;
                this.currentEl = element;
            },
            //场景大小调整事件
            onResizing(newRect){
                if (this.isNotEdit)return;
                this.currentEl.width=newRect.width;
                this.currentEl.height=newRect.height;
            },
            //场景拖拽事件
            onDragging(newRect){
                if (this.isNotEdit)return;
                this.currentEl.x=newRect.left;
                this.currentEl.y=newRect.top;
            },
            //仓库切换
            selectedWarehouse(warehouse){
                this.selected = warehouse.id;
                this.name = warehouse.name;
                localStorage.setItem("equipment:warehouse", JSON.stringify(warehouse));
            },
            //文本类属性改变
            changeText(key){
                this.currentEl[key] = event.target.value;
            },
            //数值类属性改变
            changeNumber(key){
                this.currentEl[key] = event.target.value ? parseFloat(event.target.value) : 0;
            },
            //子设备选定时的库位加载
            nextDetail(layer){
                let parentDom = document.getElementById("detailInfo").firstChild.firstChild;
                let childDom = document.getElementById("locationModal").firstChild.firstChild;
                childDom.style.minWidth = parentDom.offsetWidth+'px';
                childDom.style.minHeight = parentDom.offsetHeight+'px';
                $("#locationModal").modal("show");
                this.isLoadLocation = true;
                setTimeout(()=>{
                    this.isLoadLocation = false;
                },2000);
                //开启隐去现DIV动画，加载新DIV，加载数据
                //请求加载
                //关闭动画
            },
        },
    });
</script>
</html>