| | |
| | | <!-- |
| | | * @Date: 2024-01-05 22:26:22 |
| | | * @LastEditors: Sneed |
| | | * @LastEditTime: 2024-01-13 23:14:55 |
| | | * @LastEditTime: 2024-01-16 00:30:16 |
| | | * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue |
| | | --> |
| | | <template> |
| | | <div class="workshop"> |
| | | <Map v-if="status === 0 || status === 1 && id" :status="status" :currentMap="currentMap" :name="plantName" :id="id" |
| | | @out="out" /> |
| | | <div v-else class="preview"> |
| | | <LeftStatus class="left" :info="info"> |
| | | <template> |
| | | <div @click="editMap" class="edit-btn"> |
| | | {{ id ? '进入编辑状态' : '新增' }} |
| | | </div> |
| | | <el-select clearable class="left-select" v-model="id" placeholder="请选择"> |
| | | <Map :id="id" :status="status" :currentMap="currentMap" @out="out" :name="plantName"> |
| | | <template slot="tool"> |
| | | <div class="workshop-tool"> |
| | | <span v-show="id">车间地图:</span> |
| | | <el-select v-show="id" class="wkshoplist" clearable v-model="id" placeholder="请选择"> |
| | | <el-option v-for="item in mapList" :key="item.id" :label="item.name" :value="item.id"> |
| | | </el-option> |
| | | </el-select> |
| | | </template> |
| | | </LeftStatus> |
| | | <div class="right"> |
| | | <Status v-show="id" :info="info" /> |
| | | <div class="preview-map"> |
| | | <Map v-if="id" :status="2" :currentMap="currentMap" @out="out" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </Map> |
| | | </div> |
| | | </template> |
| | | <script> |
| | |
| | | } catch (error) { |
| | | |
| | | } |
| | | getRequest('machineList', { |
| | | plantId: this.id, |
| | | }).then(res => { |
| | | // this.list = res.data.list |
| | | this.info = { |
| | | runRate: res.data.runRate, |
| | | cutRate: res.data.cutRate, |
| | | alarmRate: res.data.alarmRate, |
| | | threeShiftRate: res.data.threeShiftRate, |
| | | twoShiftRate: res.data.twoShiftRate, |
| | | run: res.data.run, |
| | | alarm: res.data.alarm, |
| | | stop: res.data.stop, |
| | | idle: res.data.idle |
| | | } |
| | | }) |
| | | // getRequest('machineList', { |
| | | // plantId: this.id, |
| | | // }).then(res => { |
| | | // // this.list = res.data.list |
| | | // this.info = { |
| | | // runRate: res.data.runRate, |
| | | // cutRate: res.data.cutRate, |
| | | // alarmRate: res.data.alarmRate, |
| | | // threeShiftRate: res.data.threeShiftRate, |
| | | // twoShiftRate: res.data.twoShiftRate, |
| | | // run: res.data.run, |
| | | // alarm: res.data.alarm, |
| | | // stop: res.data.stop, |
| | | // idle: res.data.idle |
| | | // } |
| | | // }) |
| | | } |
| | | }, |
| | | data() { |
| | |
| | | currentMap: [], |
| | | plantName: '', |
| | | mapList: [], |
| | | status: 2, // 0 新增 1编辑 2查看 |
| | | info: { |
| | | runRate: '', |
| | | cutRate: '', |
| | | alarmRate: '', |
| | | threeShiftRate: '', |
| | | twoShiftRate: '', |
| | | run: '', |
| | | alarm: '', |
| | | stop: '', |
| | | idle: '', |
| | | } |
| | | status: 1, // 0 新增 1编辑 2查看 |
| | | } |
| | | }, |
| | | methods: { |
| | |
| | | this.status = 0 |
| | | } |
| | | this.id = this.mapList[0].id |
| | | this.status = 1 |
| | | } catch (error) { |
| | | console.error(error) |
| | | } |
| | | }) |
| | | }, |
| | | editMap() { |
| | | if (this.id) { |
| | | this.status = 1 |
| | | } else { |
| | | this.status = 0 |
| | | } |
| | | addMap() { |
| | | this.status = 0 |
| | | this.id = '' |
| | | }, |
| | | out() { |
| | | this.status = 2 |
| | | this.getMapList() |
| | | }, |
| | | }, |
| | |
| | | .workshop { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | .preview { |
| | | width: 100%; |
| | | height: 100%; |
| | | .workshop-tool { |
| | | // width: 200px; |
| | | display: flex; |
| | | |
| | | .right { |
| | | width: calc(100% - 194px); |
| | | padding-top: 30px; |
| | | flex: 0 1 auto; |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .preview-map { |
| | | margin-top: 20px; |
| | | flex: 1 1 auto; |
| | | overflow: hidden; |
| | | } |
| | | align-items: center; |
| | | span { |
| | | font-size: 12px; |
| | | color: #fff; |
| | | width: 100px; |
| | | } |
| | | .wkshoplist { |
| | | width: 200px; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |