From 5b9a1d6cb3a7d59c8f2de83c495bba1a069b2723 Mon Sep 17 00:00:00 2001
From: gaosp <gaosp>
Date: 星期五, 19 一月 2024 00:23:15 +0800
Subject: [PATCH] update
---
src/container/Map/index.vue | 280 +++++++++++++++++++++----------------------------------
1 files changed, 106 insertions(+), 174 deletions(-)
diff --git a/src/container/Map/index.vue b/src/container/Map/index.vue
index 7cca229..f9c000b 100644
--- a/src/container/Map/index.vue
+++ b/src/container/Map/index.vue
@@ -1,203 +1,135 @@
<!--
* @Date: 2024-01-05 22:26:22
* @LastEditors: Sneed
- * @LastEditTime: 2024-01-12 20:23:25
+ * @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">
- <div class="left">
- <div @click="editMap" class="edit-btn">
- {{id ? '杩涘叆缂栬緫鐘舵��' : '鏂板'}}
+ <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>
</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">
- <Status v-show="false"/>
- <div class="preview-map">
- <Map v-if="id" :status="2" :currentMap="currentMap" @out="out" />
- </div>
- </div>
- </div>
+ </template>
+ </Map>
</div>
</template>
<script>
- import Map from './Map.vue'
- import Status from '@/components/newComp/Status'
- export default {
- components: {
- Map,
- Status
- },
- 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
+import Map from './Map.vue';
+import Status from '@/components/newComp/Status'
+import LeftStatus from './LeftStatus.vue'
+import { getRequest, getUrl } from '@/api/Api'
+import { mapGetters } from 'vuex'
+export default {
+ components: {
+ Map,
+ Status,
+ LeftStatus
+ },
+ computed: {
+ ...mapGetters(['workshopList'])
+ },
+ watch: {
+ id(val) {
+ if (!val) {
+ this.currentMap = ''
+ this.plantName = ''
+ return
}
- },
- data () {
- return {
- id: '',
- currentMap: [],
- plantName: '',
- mapList: [],
- status: 0, // 0 鏂板 1缂栬緫 2鏌ョ湅
+ try {
+ this.currentMap = JSON.parse(this.mapList.find(item => item.id === this.id).gridSetting)
+ this.plantName = this.mapList.find(item => item.id === this.id).name
+ } catch (error) {
+
}
- },
- methods: {
- getMapList() {
- this.$store.dispatch('GetPlanList', {}).then(res => {
- this.mapList = res.data.filter (v => v.gridSetting && v.gridSetting!='{}')
+ // 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() {
+ return {
+ id: '',
+ currentMap: [],
+ plantName: '',
+ mapList: [],
+ status: 1, // 0 鏂板 1缂栬緫 2鏌ョ湅
+ }
+ },
+ methods: {
+ getMapList() {
+ // this.$store.dispatch('GetPlanList', {})
+
+ this.$store.dispatch('GetPlanList', {}).then(res => {
+ try {
+ this.mapList = this.workshopList.filter(v => v.gridSetting && v.gridSetting != '{}')
if (this.mapList.length === 0) {
this.status = 0
- } else {
- this.status = 2
}
- })
- },
- editMap () {
- if (this.id) {
+ this.id = this.mapList[0].id
this.status = 1
- } else {
- this.status = 0
+ } catch (error) {
+ console.error(error)
}
- },
- out () {
- this.status = 2
- this.getMapList()
- },
+ })
},
- mounted () {
+ addMap() {
+ this.status = 0
+ this.id = ''
+ },
+ out() {
this.getMapList()
- }
+ },
+ },
+ mounted() {
+ this.getMapList()
}
+}
</script>
<style lang="scss">
- .left-select {
- .el-input__inner {
- background: #435F9E;
- color: #C6DCE0;
- border: none;
- }
+.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 {
- 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;
- }
- }
+.workshop {
+ width: 100%;
+ height: 100%;
+ .workshop-tool {
+ // width: 200px;
+ display: flex;
+ align-items: center;
+ span {
+ font-size: 12px;
+ color: #fff;
+ width: 100px;
+ }
+ .wkshoplist {
+ width: 200px;
+ margin-right: 20px;
}
}
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3