factory_web/src/views/bigScreen/enpComponents/smarg_trans.vue

<template>
    <el-container>
        <el-header class="searchWrap">
            <div class="left-panel">
                <el-select v-model="query.mgroup" placeholder="工段 " @change="handleQuery" clearable>
                    <el-option v-for="item in mgroupOptions" :key="item" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </div>
            <div class="right-panel">
                <!-- <div class="typebox">
                    <span style="color:red;">
                        <img style="height: 16px; weight: 16px;"
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAQCAYAAAAbBi9cAAABgElEQVQ4T52TzS4DURiG3++0op0REgtiU2emKsSmSz8XwB2oK1BXgCtQV4ArUFeAC/Cz7I7QzkxtJBYSkhmVtOeTM6Hamv6Z7XneZ97v/BD6fK401xEHrLJ/2QulXosMxJ5so6SZlBNkCWh043uK3LSxTUzHOszEeasSnAwtepybHB9pfD6AMB2KGC/12GgmU359j5J1beRK84AE9lpDrFCwPH9/YJEzk5gVCXEPokRbiLmmamrBfq5VO2WRjTzbPAWQ07B0/JDxbJO/w0Xp+Ft9Ra5MLhOJaxBCwR8Rg5nVquV93LbKOhuRZxlXIFr5gSIa6Z2/kW6wps/gh2sTuTK5SUIUW/8UKdIGpXKW93H2R+RKJEgYdwDJQUQAe6yCRctDTfPNRq5t7hJQ6Pdk2q4DsGc5/mFTVE5jKq5MffkmOkXdRgs5xltd+PNzFbyEjaq2ccSgfFSbnqJwJD6edYIdqqbGlhBXJQbFhxnrd5O5jrrI6uM+B9HGfyTNDPPFF8KilQlAZVW/AAAAAElFTkSuQmCC" />
                        产治未同步</span>
                </div> -->
                <div class="typebox">
                    <div class="greenb radio"></div>
                    <div class="green">设备正常</div>
                </div>
                <div class="typebox">
                    <div class="orangeb radio"></div>
                    <div class="orange">设备待机</div>
                </div>
                <div class="typebox">
                    <div class="grayb radio"></div>
                    <div class="gray">设备离线</div>
                </div>
                <div class="typebox">
                    <div class="redb radio"></div>
                    <div class="red">设备故障</div>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" :params="params" hidePagination
                hideDo :query="query">
                <el-table-column prop="number" label="污染源编号" />
                <el-table-column prop="name" label="污染源名称" />
                <el-table-column prop="mgroup_name" label="所在工段" />
                <el-table-column label="生产设备">
                    <template #default="scope">
                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                            <div v-if="item.type == 10">
                                <span>{{ item.name }} |
                                    待机 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_standby
                                        }}</span> h
                                </span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="治理设备">
                    <template #default="scope">
                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                            <div v-if="item.type == 30">
                                <span>{{ item.name }} |
                                    待机 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_standby
                                        }}</span> h
                                </span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="监测设备">
                    <template #default="scope">
                        <div v-for="item in scope.row.equip_data" v-bind:key="item.id">
                            <div v-if="item.type == 20">
                                <span>{{ item.name }} |
                                    待机 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_standby
                                        }}</span> h
                                </span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
</template>
<script>
export default {
    data() {
        return {
            apiObj: null,
            params: { type: 20, has_equipdata: 'yes', cate: 'mtrans' },
            query: {},
            mgroupOptions: []
        }
    },
    mounted() {
        this.apiObj = this.$API.enp.drain.list
        this.getMgroup()
    },
    methods: {
        getMgroup() {
            this.$API.mtm.mgroup.list.req({ page: 0 }).then(res => {
                this.mgroupOptions = res
            })
        }
    }
}
</script>
<style scoped>
.typebox {
    font-size: 14px;
    font-weight: 400;
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.red {
    color: red;
}

.redb {
    background: red;
}

.green {
    color: #00d614;
}

.greenb {
    background: #00d614;
}

.orange {
    color: #ff9600
}

.orangeb {
    background: #ff9600
}

.gray {
    color: #cbcbcb;
}

.grayb {
    background: #cbcbcb
}
</style>