From dc5199737e9dbb5f8a0996a6ae5674bfb69e62ad Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期六, 06 一月 2024 23:41:19 +0800
Subject: [PATCH] 修改厂房地图
---
src/container/Map/index.vue | 251 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 247 insertions(+), 4 deletions(-)
diff --git a/src/container/Map/index.vue b/src/container/Map/index.vue
index 9c81612..7efca02 100644
--- a/src/container/Map/index.vue
+++ b/src/container/Map/index.vue
@@ -1,21 +1,264 @@
<!--
* @Date: 2024-01-05 22:26:22
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-05 23:14:40
+ * @LastEditTime: 2024-01-06 23:10:19
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
-->
<template>
- <div style="color: red">杞﹂棿鍦板浘</div>
+ <div class="workshop">
+ <Map v-if="status===0 || status === 1" :status="status" :currentMap="currentMap" :name="plantName" :id="id" @out="out" />
+ <div v-else class="preview">
+ <div class="left">
+ <div @click="editMap" class="edit-btn">
+ 杩涘叆缂栬緫鐘舵��
+ </div>
+ <el-select clearable class="left-select" v-model="id" placeholder="璇烽�夋嫨">
+ <el-option
+ v-for="item in mapList"
+ :key="item.id"
+ :label="item.name"
+ :value="item.id">
+ </el-option>
+ </el-select>
+ <div class="left-item left-1">
+ <div>44%</div>
+ <div>寮�鏈虹巼</div>
+ </div>
+ <div class="left-item left-2">
+ <div>44%</div>
+ <div>鏁呴殰鐜�</div>
+ </div>
+ <div class="left-item left-3">
+ <div>44%</div>
+ <div>鍒囧墛鐜�</div>
+ </div>
+ <div class="left-item left-4">
+ <div>44%</div>
+ <div>浜岀彮寮�宸ョ巼</div>
+ </div>
+ <div class="left-item left-5">
+ <div>44%</div>
+ <div>涓夌彮寮�宸ョ巼</div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="top">
+ <div class="top-item top-1">
+ <div>16</div>
+ <div>鍋滄満鐘舵��</div>
+ </div>
+ <div class="top-item top-2">
+ <div>16</div>
+ <div>鍋滄満鐘舵��</div>
+ </div>
+ <div class="top-item top-3">
+ <div>16</div>
+ <div>鍋滄満鐘舵��</div>
+ </div>
+ <div class="top-item top-4">
+ <div>16</div>
+ <div>鍋滄満鐘舵��</div>
+ </div>
+ <div class="top-item top-5">
+ <div>16</div>
+ <div>鍋滄満鐘舵��</div>
+ </div>
+ </div>
+ <div class="preview-map">
+ <Map :status="2" :currentMap="currentMap" @out="out" />
+ </div>
+ </div>
+ </div>
+ </div>
</template>
<script>
+ import Map from './Map.vue'
export default {
+ components: {
+ Map
+ },
+ watch: {
+ id (val) {
+ if (!val) {
+ this.currentMap = ''
+ this.plantName = ''
+ return
+ }
+ this.currentMap = JSON.parse(this.mapList.find(item => item.id ===this.id).gridSetting)
+ this.plantName = this.mapList.find(item => item.id ===this.id).name
+ }
+ },
+ data () {
+ return {
+ id: '',
+ currentMap: [],
+ plantName: '',
+ mapList: [],
+ status: 0, // 0 鏂板 1缂栬緫 2鏌ョ湅
+ }
+ },
methods: {
getMapList() {
- this.$http.post('/')
+ this.$http.get('/plant/list').then(res => {
+ this.mapList = res.data.filter (v => v.gridSetting && v.gridSetting!='{}')
+ if (this.mapList.length === 0) {
+ this.status = 0
+ } else {
+ this.status = 2
+ }
+ })
+ },
+ editMap () {
+ if (this.id) {
+ this.status = 1
+ } else {
+ this.status = 0
+ }
+ },
+ out () {
+ this.status = 2
+ this.getMapList()
}
},
mounted () {
this.getMapList()
}
}
-</script>
\ No newline at end of file
+</script>
+<style lang="scss">
+ .left-select {
+ .el-input__inner {
+ background: #435F9E;
+ color: #C6DCE0;
+ border: none;
+ }
+ }
+
+</style>
+<style lang="scss" scoped>
+ .workshop {
+ width: 100%;
+ height: 100%;
+ .preview {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ .left {
+ flex: 0 0 auto;
+ width: 194px;
+ height: 100%;
+ margin-left: 20px;
+ background: url('./img//left_icon.png') 100% center no-repeat;
+ .edit-btn {
+ margin-top: 20px;
+ color: #C6DCE0;
+ text-align: center;
+ line-height: 38px;
+ width: 150px;
+ height: 38px;
+ background: url('./img//btn.png') 100% center no-repeat;
+ background-size: contain;
+ font-size: 16px;
+ cursor: pointer;
+ }
+ .left-select {
+ margin-top: 20px;
+ width: 150px;
+ }
+ .left-item:first-child {
+ margin-top: 138px;
+ }
+ .left-item {
+ margin-top: 20px;
+ width: 138px;
+ height: 138px;
+ background: url('./img/left_1.png') 0 0 no-repeat;
+ background-size: contain;
+ color: #D6EEEF;
+ position: relative;
+ & > div:first-child {
+ font-size: 23px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%,-50%);
+ }
+ & > div:last-child {
+ font-size: 12px;
+ position: absolute;
+ left: 50%;
+ bottom: 25px;
+ transform: translate(-50%,-50%);
+ }
+ }
+ .left-2 {
+ background-image: url('./img/left_2.png');
+ }
+ .left-3 {
+ background-image: url('./img/left_3.png');
+ }
+ .left-4 {
+ background-image: url('./img/left_4.png');
+ }
+ .left-5 {
+ background-image: url('./img/left_5.png');
+ }
+ }
+ .right {
+ padding-top: 30px;
+ flex: 1 1 auto;
+ .top {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .top-item {
+ font-size: 29px;
+ color: #F7F8FA;
+ div:first-child {
+ width: 99px;
+ height: 99px;
+ text-align: center;
+ line-height: 99px;
+ background: url('./img/1.png') 0 0 no-repeat;
+ background-size: contain;
+ color: #D6EEEF;
+ }
+ div:last-child {
+ margin-top: 20px;
+ font-size: 24px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 500;
+ color: #E4FFFE;
+ line-height: 29px;
+ text-shadow: 0px 1px 4px rgba(122,255,248,0.5);
+ }
+ }
+ .top-2 {
+ div:first-child {
+ background-image: url('./img/2.png')
+ }
+
+ }
+ .top-3 {
+ div:first-child {
+ background-image: url('./img/3.png')
+ }
+ }
+ .top-4 {
+ div:first-child {
+ background-image: url('./img/4.png')
+ }
+ }
+ .top-5 {
+ div:first-child {
+ background-image: url('./img/5.png')
+ }
+ }
+ .top-item ~.top-item {
+ margin-left: 100px;
+ }
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3