|  |  |  | 
|---|
|  |  |  | <meta charset="UTF-8"> | 
|---|
|  |  |  | <title>穿梭车监控管理</title> | 
|---|
|  |  |  | <link rel="stylesheet" href="../static/vue/element/element.css"> | 
|---|
|  |  |  | <link rel="stylesheet" href="../static/css/car_vue.css"> | 
|---|
|  |  |  | <script src="../static/vue/js/vue.min.js"></script> | 
|---|
|  |  |  | <script src="../static/vue/element/element.js"></script> | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | body { | 
|---|
|  |  |  | background-color: #6CA7A8; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .el-row { | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  | &:last-child { | 
|---|
|  |  |  | margin-bottom: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | &:last-child { | 
|---|
|  |  |  | margin-bottom: 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .el-col { | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | 
|---|
|  |  |  | background: #067af8; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .bg-purple-light { | 
|---|
|  |  |  | background: #e5e9f2; | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .grid-content { | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | min-height: 360px; | 
|---|
|  |  |  | min-height: 230px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .grid-content-bottom { | 
|---|
|  |  |  | border-radius: 4px; | 
|---|
|  |  |  | min-height: 176px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .row-bg { | 
|---|
|  |  |  | padding: 10px 0; | 
|---|
|  |  |  | 
|---|
|  |  |  | </head> | 
|---|
|  |  |  | <body> | 
|---|
|  |  |  | <div id="container"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <!--第一部分--> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <!--            <el-col :span="1"><div class="grid-content bg-purple"></div></el-col>--> | 
|---|
|  |  |  | <el-col :span="22" style="float: right"><div class="grid-content bg-purple-light"></div></el-col> | 
|---|
|  |  |  | <el-col :span="22" style="float: right" class="grid-content bg-purple-light"> | 
|---|
|  |  |  | <el-col :span="5" class="grid-content bg-purple-light"> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="8" :offset="8" class="title">穿梭车位置</el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="20" :offset="2" class="title"> | 
|---|
|  |  |  | <lable>1#</lable> | 
|---|
|  |  |  | <el-dropdown trigger="click" :hide-on-click="false"> | 
|---|
|  |  |  | <el-button class="bg-orgin" @click="changePosition($event,1)">修改位置</el-button> | 
|---|
|  |  |  | <el-dropdown-menu> | 
|---|
|  |  |  | <el-dropdown-item><span>1</span><input type="text"></el-dropdown-item> | 
|---|
|  |  |  | <el-dropdown-item>2</el-dropdown-item> | 
|---|
|  |  |  | <el-dropdown-item>3</el-dropdown-item> | 
|---|
|  |  |  | </el-dropdown-menu> | 
|---|
|  |  |  | </el-dropdown> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-button>所属堆垛机</el-button> | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="20" :offset="2" class="title"> | 
|---|
|  |  |  | <lable>2#</lable> | 
|---|
|  |  |  | <el-button @click="changePosition($event,2)">修改位置</el-button> | 
|---|
|  |  |  | <el-button>所属堆垛机</el-button> | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="20" :offset="2" class="title"> | 
|---|
|  |  |  | <lable>3#</lable> | 
|---|
|  |  |  | <el-button @click="changePosition($event,3)">修改位置</el-button> | 
|---|
|  |  |  | <el-button>所属堆垛机</el-button> | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | <el-col :span="19" class="grid-content bg-purple-dark"> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | </el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="22" class="grid-content bg-purple-light" style="float: right"></el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="22" class="grid-content bg-purple-light" style="float: right"></el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | <el-row> | 
|---|
|  |  |  | <el-col :span="22" class="grid-content-bottom bg-purple-light" style="float: right"></el-col> | 
|---|
|  |  |  | </el-row> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | </html> | 
|---|
|  |  |  | 
|---|
|  |  |  | el: '#container', | 
|---|
|  |  |  | data: { | 
|---|
|  |  |  | message: 'btn' | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | changePosition(e,id) { | 
|---|
|  |  |  | e.target.blur(); | 
|---|
|  |  |  | if(e.target.nodeName == "SPAN") { | 
|---|
|  |  |  | e.target.parentNode.blur(); // 强制失焦 | 
|---|
|  |  |  | } | 
|---|
|  |  |  | console.log(id) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | </script> | 
|---|