~admin/mdc-front.git

			@@ -1,254 +1,165 @@
			<!--
			* @Date: 2024-01-05 22:26:22
			* @LastEditors: Sneed
			* @LastEditTime: 2024-01-06 19:00:32
			* @LastEditTime: 2024-01-13 23:14:55
			* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/index.vue
			-->
			<template>
			<div class="workshop">
			<Map v-if="status===0 \|\| status === 1" :status="status" :currentMap="currentMap" :name="plantName" :id="id" @out="out" />
			<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 v-if="id" @click="editMap" class="edit-btn">
			进入编辑状态
			</div>
			<el-select size="mini" 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>
			<LeftStatus class="left" :info="info">
			<template>
			<div @click="editMap" class="edit-btn">
			{{ id ? '进入编辑状态' : '新增' }}
			</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>
			</template>
			</LeftStatus>
			<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>
			<Status v-show="id" :info="info" />
			<div class="preview-map">
			<Map :status="2" :currentMap="currentMap" @out="out" />
			<Map v-if="id" :status="2" :currentMap="currentMap" @out="out" />
			</div>
			</div>
			</div>
			</div>
			</template>
			<script>
			import Map from './Map.vue'
			export default {
			components: {
			Map
			},
			watch: {
			id () {
			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.$http.get('/plant/list').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: 2, // 0 新增 1编辑 2查看
			info: {
			runRate: '',
			cutRate: '',
			alarmRate: '',
			threeShiftRate: '',
			twoShiftRate: '',
			run: '',
			alarm: '',
			stop: '',
			idle: '',
			}
			}
			},
			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 () {
			console.log('--------')
			this.id = this.mapList[0].id
			} catch (error) {
			console.error(error)
			}
			})
			},
			editMap() {
			if (this.id) {
			this.status = 1
			},
			out () {
			this.status = 2
			} else {
			this.status = 0
			}
			},
			mounted () {
			out() {
			this.status = 2
			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 {
			.workshop {
			width: 100%;
			height: 100%;

			.preview {
			width: 100%;
			height: 100%;
			.preview {
			width: 100%;
			height: 100%;
			display: flex;

			.right {
			width: calc(100% - 194px);
			padding-top: 30px;
			flex: 0 1 auto;
			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;
			}
			.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-direction: column;

			.preview-map {
			margin-top: 20px;
			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;
			}
			}
			overflow: hidden;
			}
			}
			}
			}
			</style>