update

gaosp

2024-01-13 c936d0112f5c4a2cab145161937eada674939372

update

 src/container/Map/Map.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-05 23:47:53
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-12 22:28:57
 * @LastEditTime: 2024-01-13 23:22:52
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/Map/Map.vue
-->
<template>
@@ -37,7 +37,7 @@
                            :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">
                                <!-- <div  v-show="v.id" class="machine">
                                    <p>YKX123123213</p>
                                    <div>
                                        <div class="img">
@@ -67,8 +67,8 @@
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                </div> -->
                                <Device v-if="v.id" :id="v.id" style="width: 100%;height: 100%;"></Device>
                            </td>
                            <!-- <td></td> -->
                        </tr>
@@ -93,11 +93,13 @@
}
import mixins  from '@/mixins/index'
import AddMachine from './addMachine.vue'
import Device from '../workshop/device.vue'
import  {mapGetters} from 'vuex'
export default {
    mixins: [mixins],
    components: {
        AddMachine
        AddMachine,
        Device
    },
    props: {
        status: {
@@ -439,6 +441,7 @@
        // table-layout: fixed;
        // word-wrap: break-word;
        overflow: hidden;
        border-radius: 10px;
        // box-sizing: border-box;
        td {
            // width: 50px;

 src/container/Map/index.vue

@@ -1,158 +1,165 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 22:19:48
 * @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 && id" :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">
            <LeftStatus class="left" :info="info">
                <template>
                    <div @click="editMap" class="edit-btn">
                        {{id ? '进入编辑状态' : '新增'}}
                        {{ 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 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"/>
                <Status v-show="id" :info="info" />
                <div class="preview-map">
                    <Map v-if="id" :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';
    import Status from '@/components/newComp/Status'
    import LeftStatus from './LeftStatus.vue'
    import { getRequest, getUrl } from '@/api/Api'
    export default {
        components: {
            Map,
            Status,
            LeftStatus
        },
        watch: {
            id (val) {
                if (!val) {
                    this.currentMap = ''
                    this.plantName = ''
                    return
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
            }
            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) {

            }
            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.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) {
                    
                }
                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', {}).then(res => {
                    this.mapList = res.data.filter (v => v.gridSetting && v.gridSetting!='{}')
                    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.status = 1
                } else {
                    this.status = 0
                    this.id = this.mapList[0].id
                } catch (error) {
                    console.error(error)
                }
            },
            out () {
                this.status = 2
                this.getMapList()
            },
            })
        },
        mounted () {
        editMap() {
            if (this.id) {
                this.status = 1
            } else {
                this.status = 0
            }
        },
        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;
            .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;
                }
            flex-direction: column;

            .preview-map {
                margin-top: 20px;
                flex: 1 1 auto;
                overflow: hidden;
            }
        }
    }
}
</style>

 src/container/home/index.vue

@@ -4,7 +4,7 @@
            <div class="menu-container">
                <ul class="">
                    <!-- <li :class="activeId ==='1' ? 'active' : ''" @click="navigateTo('1')">状态监控</li> -->
                    <li :class="activeId ==='0' ? 'active' : ''" @click="navigateTo('0')">大屏展示</li>
                    <li :class="activeId ==='preview' ? 'active' : ''" @click="navigateTo('preview')">大屏展示</li>
                    <li :class="activeId ==='2' ? 'active' : ''" @click="navigateTo('2')">
                        <span>
                            è½¦é—´åœ°å›¾
@@ -95,6 +95,7 @@
                7: 'component',
                ledger: 'ledger',
                deviceType: 'deviceType',
                preview: 'preview'
            }
            
            if (['3','4','5','8'].includes(name)) {

 src/container/preview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,152 @@
<!--
 * @Date: 2024-01-05 22:26:22
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 23:03:31
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/preview/index.vue
-->
<template>
    <div class="workshop">
        <div class="preview">
            <LeftStatus class="left" :info="info">
                <template>
                    <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">
                <Status v-show="id" :info="info"/>
                <div class="preview-map">
                    <Map v-if="id" :status="2" :currentMap="currentMap"  @out="out" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Map from '../Map/Map.vue';
    import Status from '@/components/newComp/Status'
    import LeftStatus from '../Map/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
                }
                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) {
                    
                }
                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() {
                try {
                    this.mapList = this.workshopList.filter (v => v.gridSetting && v.gridSetting!='{}')
                    if (this.mapList.length === 0) {
                        this.status = 0
                    }
                    this.id =this.mapList[0].id
                } catch (error) {
                    console.error(error)
                }
            },
            out () {
                this.status = 2
                this.getMapList()
            },
        },
        mounted () {
            this.getMapList()
        }
    }
</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;
            .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;
                }
            }
        }
    }
</style>

 src/container/workshop/device.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-13 20:46:33
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 21:37:22
 * @LastEditTime: 2024-01-13 22:39:16
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/device.vue
-->
<template>
@@ -45,10 +45,11 @@
<script>
import { getRequest,getUrl } from '@/api/Api'
export default {
    props: ['item'],
    props: ['id'],
    data () {
        return {
            care: false,
            item: {}
        }
    },
    methods: {
@@ -57,6 +58,9 @@
            getRequest('machineConcern',{concern: val ? 1 : 0,id: this.item.id}).then(res => {
                console.log(res)
            })
        },
        getInfo () {
            this.item = {}
        }
    },
}

 src/container/workshop/index.vue

@@ -1,7 +1,7 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-13 22:21:35
 * @LastEditTime: 2024-01-13 22:38:31
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/index.vue
-->
<template>
@@ -28,7 +28,7 @@
                </Status>
                <div class="list-box">
                    <div class="list">
                        <Item v-for="item in list" :item="item" :key="item.id"></Item>
                        <Item v-for="item in list" :id="item.id" :key="item.id"></Item>
                    </div>
                </div>


 src/router/index.js

@@ -68,6 +68,11 @@
        name: 'deviceType',

        component: () => import('@/container/deviceType/index')

      },

      {

        path: 'preview',

        name: 'preview',

        component: () => import('@/container/preview/index')

      },

    ]

  },

  {


 src/store/modules/user.js

@@ -87,10 +87,10 @@
          if (data.result === 'SUCCESS') {

            commit('SET_USER_INFO',data.data)

            this.dispatch('GetPlanList')

              resolve({ code: 1, data: data })

            resolve({ code: 1, result: 'SUCCESS',data: data })

          }else {

            removeToken()

            resolve({ code: 0, msg: '由于您长时间没有操作，请重新登录！' })

            resolve({ code: 0,result: 'SUCCESS', msg: '由于您长时间没有操作，请重新登录！' })

          }

        }).catch(() => {

          removeToken()

@@ -100,11 +100,16 @@
      })

    },

    GetPlanList ({ commit, store }) {

      return getPlanList().then(data => {

        if (data.result === 'SUCCESS') {

          commit('SET_WORKSHOP_LIST', data.data || [])

        }

        return data

      return new Promise((resolve,reject) => {

        getPlanList().then(data => {

          if (data.result === 'SUCCESS') {

            commit('SET_WORKSHOP_LIST', data.data || [])

            resolve({ code: 1,result: 'SUCCESS',data: data })

          }

        })

        .catch(() => {

          reject(error)

        })

      })

    },

    // ç™»å‡º