| | |
| | | <!-- |
| | | * @Date: 2024-01-05 23:47:53 |
| | | * @LastEditors: Sneed |
| | | * @LastEditTime: 2024-01-12 22:28:57 |
| | | * @LastEditTime: 2024-01-14 15:07:18 |
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue |
| | | --> |
| | | <template> |
| | |
| | | <div class="plant-name" v-if="status===2">{{plantName}}</div> |
| | | <el-input class="plant-name" v-if="status!==2" v-model="plantName" placeholder="请输入厂名"/> |
| | | </div> |
| | | <div class="table" > |
| | | <div class="table" :class="$route.name ==='preview' ? 'active' : ''" > |
| | | <div class="table-action" :style="position" v-show="showAction && status !== 2"> |
| | | <div @click="merge">合并</div> |
| | | <div @click="split">拆分</div> |
| | | <div @click="sign(1)">过道</div> |
| | | <div @click="sign(2)">机床</div> |
| | | <div @click="sign(0)">取消</div> |
| | | <div @click="edit" v-if="showEdit">修改机床</div> |
| | | <!-- <div>增加行</div> --> |
| | | <!-- <div>删除行</div> --> |
| | | <!-- <div>增加列</div> --> |
| | |
| | | :class="{'active': (range.x !=='' && v.rowIndex >=range.x && v.rowIndex<=range.x1 && v.colIndex>=range.y && v.colIndex<=range.y1),aisle: v.type ===1}" @mousedown="e => onMousedown(e, v)" @mousemove="e => onMouseMove(e, v)" v-for="v in item" |
| | | :rowspan="v.rowspan" :colspan="v.colspan" :key="v.rowIndex + '-' + v.colIndex"> |
| | | <img @click="addDevice($event,v)" @mousedown="e => e.stopPropagation()" v-if="v.type ===2 && status!==2 && !v.id" src="./img/+.png" alt=""> |
| | | <div v-show="v.id" class="machine"> |
| | | <!-- <div v-show="v.id" class="machine"> |
| | | <p>YKX123123213</p> |
| | | <div> |
| | | <div class="img"> |
| | |
| | | </li> |
| | | </ul> |
| | | </div> |
| | | </div> |
| | | |
| | | </div> --> |
| | | <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"></Device> |
| | | </td> |
| | | <!-- <td></td> --> |
| | | </tr> |
| | | <!-- <tr> |
| | | <td></td> |
| | | </tr> --> |
| | | </table> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <addMachine :id="id" @setmachineId="setmachineId" v-else @close="close"/> |
| | | <addMachine :id="id" :machineid="machineid" @setmachineId="setmachineId" v-else @close="close"/> |
| | | </div> |
| | | |
| | | </template> |
| | |
| | | } |
| | | import mixins from '@/mixins/index' |
| | | import AddMachine from './addMachine.vue' |
| | | import Device from '../workshop/device.vue' |
| | | import {mapGetters} from 'vuex' |
| | | export default { |
| | | mixins: [mixins], |
| | | components: { |
| | | AddMachine |
| | | AddMachine, |
| | | Device |
| | | }, |
| | | props: { |
| | | status: { |
| | |
| | | }, |
| | | id: { |
| | | type: [Number,String] |
| | | } |
| | | }, |
| | | computed: { |
| | | showEdit() { |
| | | try { |
| | | const { x, x1, y, y1 } = this.range |
| | | if (this.range && x && x1 && y && y1) { |
| | | let start = this.map[x][y] |
| | | return this.map[x][y].id && (start.rowIndex + start.rowspan -1) === x1 && (start.colIndex + start.colspan -1) === y1 |
| | | } |
| | | } catch (error) { |
| | | return false |
| | | } |
| | | }, |
| | | machineid () { |
| | | try { |
| | | const { x, x1, y, y1 } = this.range |
| | | if (this.range && x && x1 && y && y1) { |
| | | let start = this.map[x][y] |
| | | if (this.map[x][y].id && (start.rowIndex + start.rowspan -1) === x1 && (start.colIndex + start.colspan -1) === y1) { |
| | | return start.id |
| | | } else { |
| | | return '' |
| | | } |
| | | } |
| | | } catch (error) { |
| | | return '' |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | if (this.currentMap.length > 0) this.map = this.currentMap |
| | | this.rows = this.currentMap.length; |
| | | this.cols = this.currentMap[0].length; |
| | | if (this.$route.name === 'preview') { |
| | | this.$nextTick(() => { |
| | | let {width} = document.querySelector('.table div').getBoundingClientRect() |
| | | console.log(document.querySelector('.table div').getBoundingClientRect()) |
| | | // document.querySelector('.table').scrollLeft |
| | | // document.querySelector('.table').scrollTo({left: }) |
| | | }) |
| | | } |
| | | |
| | | }, |
| | | immediate: true |
| | | }, |
| | |
| | | try { |
| | | this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20 |
| | | } catch (error) { |
| | | |
| | | } |
| | | |
| | | console.log(this.$route.name) |
| | | }, |
| | | beforeUpdate() { |
| | | try { |
| | |
| | | }, |
| | | contextmenu(e) { |
| | | console.log(e) |
| | | if(this.status ===2) return |
| | | if(this.status ===2) return |
| | | if (!this.range.x) return |
| | | // if (this.range.x !=='') return |
| | | e.preventDefault() |
| | | e.stopPropagation() |
| | |
| | | close () { |
| | | this.addStatus = false |
| | | }, |
| | | edit (e) { |
| | | if(this.status ===2) return |
| | | e.stopPropagation() |
| | | this.addStatus = true |
| | | }, |
| | | setmachineId (id) { |
| | | console.log(id) |
| | | if (!id) return |
| | |
| | | } |
| | | </script> |
| | | <style lang="scss" scoped> |
| | | |
| | | @keyframes move { |
| | | 0% { |
| | | // left: 100%; |
| | | // transform: translate(0,0); |
| | | // scrollTop: 0 |
| | | } |
| | | 100% { |
| | | // left: 100%; |
| | | // transform: translate(-100%,0); |
| | | // scrollTop: 100% |
| | | } |
| | | } |
| | | .map { |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | } |
| | | } |
| | | |
| | | .table.active { |
| | | // position: relative; |
| | | // left: 100%; |
| | | // animation: move 6s infinite alternate; |
| | | } |
| | | .table { |
| | | // margin-top: 10px; |
| | | // display: flex; |
| | |
| | | height: 100%; |
| | | position: relative; |
| | | overflow-x: scroll; |
| | | |
| | | .table-action { |
| | | position: absolute; |
| | | z-index: 999; |
| | |
| | | // table-layout: fixed; |
| | | // word-wrap: break-word; |
| | | overflow: hidden; |
| | | border-radius: 10px; |
| | | // box-sizing: border-box; |
| | | td { |
| | | // width: 50px; |