From f466ae4fdc645c66c9f25e2e4598b9809e2b41af Mon Sep 17 00:00:00 2001 From: yangys <y_ys79@sina.com> Date: 星期六, 13 一月 2024 22:56:49 +0800 Subject: [PATCH] Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front --- src/container/Map/Map.vue | 231 +++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 142 insertions(+), 89 deletions(-) diff --git a/src/container/Map/Map.vue b/src/container/Map/Map.vue index 504988e..2e0d004 100644 --- a/src/container/Map/Map.vue +++ b/src/container/Map/Map.vue @@ -1,7 +1,7 @@ <!-- * @Date: 2024-01-05 23:47:53 * @LastEditors: Sneed - * @LastEditTime: 2024-01-12 00:35:17 + * @LastEditTime: 2024-01-12 22:28:57 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue --> <template> @@ -28,77 +28,58 @@ <!-- <div>澧炲姞鍒�</div> --> <!-- <div>鍒犻櫎鍒�</div> --> </div> - <table> - <tr v-for="(item, index) in map" :key="index"> - <td v-if="v.rowspan !==0 && v.colspan!==0" - :width="v.type ===1 ? '20px' : v.colspan * 400 + 'px'" - :height="v.type ===1 ? '20px' : v.rowspan * 100+ 'px'" - :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" src="./img/+.png" alt=""> - </td> - <!-- <td></td> --> - </tr> - <!-- <tr> - <td></td> - </tr> --> - </table> + <div :style="{width: (cols * height + 'px'),height: rows * height + 'px'}"> + <table > + <tr v-for="(item, index) in map" :key="index"> + <td v-if="v.rowspan !==0 && v.colspan!==0" + :width="v.colspan* height + 'px'" + :height="v.rowspan* height + 'px'" + :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"> + <p>YKX123123213</p> + <div> + <div class="img"> + <img src="./img/machine.png" alt=""> + </div> + <ul> + <li> + <img src="./img/sd.png" alt=""> + <div> + <p>0.00%</p> + <p>鑳藉姏鍒╃敤鐜�</p> + </div> + </li> + <li> + <img src="./img/sd.png" alt=""> + <div> + <p>0.00%</p> + <p>鑳藉姏鍒╃敤鐜�</p> + </div> + </li> + <li> + <img src="./img/sd.png" alt=""> + <div> + <p>0.00%</p> + <p>鑳藉姏鍒╃敤鐜�</p> + </div> + </li> + </ul> + </div> + </div> + + </td> + <!-- <td></td> --> + </tr> + <!-- <tr> + <td></td> + </tr> --> + </table> + </div> </div> </div> - <div class="map-add" v-else> - <div class="map-add-item"> - <span>缁熶竴缂栧彿</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>璁惧鍚嶇О</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>璁惧鍨嬪彿</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>璁惧瑙勬牸</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>浣跨敤鍗曚綅</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>淇濆吇鑰�</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>淇濆吇鍛ㄦ湡</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>淇濆吇绫诲瀷</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>鏄惁鍚堟牸</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>璁″垝寮�濮嬫椂闂�</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>璁″垝瀹屾垚鏃堕棿</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-item"> - <span>淇濆吇鍐呭涓庡瓨鍦ㄩ棶棰�</span> - <el-input class="value"></el-input> - </div> - <div class="map-add-footer"> - <el-button size="mini" @click="close">鍏抽棴</el-button> - <el-button type="primary" size="mini" @click="saveDevice">淇濆瓨</el-button> - </div> - </div> + <addMachine :id="id" @setmachineId="setmachineId" v-else @close="close"/> </div> </template> @@ -130,13 +111,14 @@ type: String, }, id: { - type: Number + type: [Number,String] } }, data() { return { + height: 0, plantName: '', - rows: 10, + rows: 20, cols: 50, map: null, // 鍦板浘鏁版嵁 addStatus: false, @@ -192,11 +174,16 @@ }, currentMap: { handler () { + if (!this.currentMap || this.currentMap.length === 0) return if (this.currentMap.length > 0) this.map = this.currentMap - + this.rows = this.currentMap.length; + this.cols = this.currentMap[0].length; }, immediate: true }, + map () { + this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20 + } }, mounted() { this.$el.querySelector('table').addEventListener('contextmenu', this.contextmenu) @@ -204,11 +191,12 @@ if(this.status ===2) return this.tdMounseDown = false }) - if (this.id) { - // this.getmachineList() - this.rows = this.currentMap.length - this.cols = this.currentMap[0].length + try { + this.height = (document.querySelector('.table').getBoundingClientRect().height - 30) / 20 + } catch (error) { + } + }, beforeUpdate() { try { @@ -390,7 +378,8 @@ .map-container { width: 100%; height: 100%; - overflow: auto; + padding: 20px; + overflow: hidden; position: relative; display: flex; flex-direction: column; @@ -398,7 +387,7 @@ } .table-tool { - padding: 10px 0; + padding-bottom: 50px; display: flex; justify-content: flex-start; @@ -424,13 +413,12 @@ .table { // margin-top: 10px; - display: flex; - justify-content: flex-start; - overflow-y: scroll; + // display: flex; + // justify-content: flex-start; width: 100%; - padding: 20px; height: 100%; position: relative; + overflow-x: scroll; .table-action { position: absolute; z-index: 999; @@ -446,14 +434,12 @@ } table { - width: 2000px; - height: 100%; - + width: 100%; border-collapse: collapse; // table-layout: fixed; - word-wrap: break-word; + // word-wrap: break-word; overflow: hidden; - + // box-sizing: border-box; td { // width: 50px; // height: 50px; @@ -461,11 +447,78 @@ border: 1px solid #1662DB; vertical-align: middle; text-align: center; - img { + & > img { width: 20px; height: 20px; cursor: pointer; } + .machine { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + & > p { + margin-top: 20px; + color: #E9FFFF; + text-shadow: 0px 1px 11px #549BD4; + background: linear-gradient(180deg, #9AFEFE 0%, #4B78CD 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + text-align: center; + } + & > div { + flex: 1 1 auto; + margin-top: 20px; + display: flex; + align-items: center; + margin-bottom: 20px; + + overflow: hidden; + .img { + width: 50%; + height: 100%; + margin-left: 20px; + border: 1px solid #444C55; + border-radius: 10px; + position: relative; + img { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 80%; + } + } + ul { + flex: 1 1 auto; + height: 100%; + margin-left: 20px; + list-style: none; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + li { + width: 100%; + display: flex; + font-size: 12px; + align-items: center; + & > div { + margin-left: 20px;; + } + p { + color: #E9FFFF; + text-shadow: 0px 1px 11px #549BD4; + } + img { + width: 40px; + height: 40px; + } + } + } + } + + } } td.active { background: #68D9FF!important; -- Gitblit v1.9.3