Merge branch 'master' of http://www.beijingsoft.cn:9090/r/mdc-front

yangys

2024-01-13 f466ae4fdc645c66c9f25e2e4598b9809e2b41af

 src/container/workshop/index.vue

@@ -1,11 +1,152 @@
<!--
 * @Date: 2024-01-06 17:40:19
 * @LastEditors: Sneed
 * @LastEditTime: 2024-01-06 17:49:41
 * @LastEditTime: 2024-01-13 22:21:35
 * @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/container/workshop/index.vue
-->
<template>
    <div style="color: red">
        车间列表
    <div class="workshop">
        <div class="nav">车间列表 / {{ this.$route.query.name }}</div>
        <div class="workshop-box">
            <LeftStatus :info="info" />
            <div class="right">
                <Status class="right-status" :info="info" style="justify-content: flex-start;">
                    <template slot="before">
                        <div style="margin-right: 200px;">
                            <el-button type="primary" size="mini" :class="concernFlag === 0 ? 'active' : ''"
                                @click="query(0)">全部</el-button>
                            <el-button type="primary" size="mini" :class="concernFlag === 1 ? 'active' : ''"
                                @click="query(1)">关注</el-button>
                            <!-- <el-button type="primary" size="mini" style="margin-right: auto;">我的关注</el-button> -->
                        </div>
                    </template>
                    <template slot="after">
                        <div style="margin-left: auto;margin-right: 20px;">
                            <el-input v-model="searchWord" placeholder="请输入关键词"></el-input>
                        </div>
                    </template>
                </Status>
                <div class="list-box">
                    <div class="list">
                        <Item v-for="item in list" :item="item" :key="item.id"></Item>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
</template>
<script>
import LeftStatus from '../Map/LeftStatus.vue';
import Status from '@/components/newComp/Status';
import { getRequest, getUrl } from '@/api/Api'
import Item from './device.vue'
export default {
    components: {
        LeftStatus,
        Status,
        Item
    },
    data() {
        return {
            concernFlag: 0,
            searchWord: '',
            list: [],
            info: {
                runRate: '',
                cutRate: '',
                alarmRate: '',
                threeShiftRate: '',
                twoShiftRate: '',
                run: '',
                alarm: '',
                stop: '',
                idle: '',
            }
        }
    },
    watch: {
        '$route.params.id'() {
            this.query()
        }
    },
    mounted() {
        this.query()
    },
    methods: {
        query(flag) {
            if (flag !== undefined) {
                this.concernFlag = flag
            }
            getRequest('machineList', {
                plantId: this.$route.params.id,
                concernFlag: this.concernFlag,
            }).then(res => {
                console.log(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
                }
            })
        }
    },
}
</script>
<style lang="scss" scoped>
.workshop {
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #FFF;
    display: flex;
    flex-direction: column;

    .nav {
        padding: 10px 30px;
        font-size: 14px;
    }

    .workshop-box {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
        display: flex;

        .right {
            width: 100%;
            height: 100%;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            .right-status {
                margin-bottom: 20px;
            }
            .list-box {
                width: 100%;
                height: 100%;
                overflow: auto;
                flex: 1 1 auto;
                // border: 1px solid red;
                padding: 20px;
                .list {
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    &>div {
                        margin: 10px;
                    }
                }
                
            }
        }

    }
}</style>