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

92 lines
3.8 KiB
Vue

<template>
<el-container>
<el-aside width="69%" style="margin-right:1%;border-right:0">
<el-container>
<el-header class="searchWrap">
<div class="left-panel">
<div class="left-panel">洗车行为统计</div>
</div>
<div class="right-panel">
<el-select v-model="query.station" placeholder="洗车台" @change="handleQuery" clearable>
<el-option v-for="item in stationOptions" :key="item" :label="item.name"
:value="item.id"></el-option>
</el-select>
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" :params="params"
:query="query">
<el-table-column type="index" width="50" />
<el-table-column label="洗车台" prop="station_name" />
<el-table-column label="车辆编号" prop="vehicle_number" />
<el-table-column prop="start_time" label="开始时间" width="180" />
<el-table-column label="洗车时长(s)" prop="duration"></el-table-column>
<el-table-column label="压力" prop="pressure" />
<el-table-column label="流量" prop="flux">
</el-table-column>
</scTable>
</el-main>
</el-container>
</el-aside>
<el-main class="nopadding">
<el-container>
<el-header class="searchWrap">
<div class="left-panel">环卫车智能调度</div>
</el-header>
<el-main class="nopadding">
<scTable style="width: 100%;" size="large" :apiObj="apiObj2" row-key="id" :params="params2"
hidePagination hideDo>
<el-table-column type="index" width="50" />
<el-table-column prop="name" label="环卫车名称" />
<el-table-column prop="type" label="环卫车类型" />
<el-table-column label="今日工作时长">
<template #default="scope">
<span v-if="scope.row.drain_">{{ scope.row.drain_.mgroup_name }}</span>
</template>
</el-table-column>
</scTable>
<!-- <el-container>
<el-header class="">
<div class="left-panel">
<span>厂区环境(PM10):</span>
<span style="color: green"> 36ug/m3</span>
</div>
</el-header>
<el-main class="nopadding">
</el-main>
</el-container> -->
</el-main>
</el-container>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
apiObj: null,
params: {},
apiObj2: null,
params2: {},
stationOptions: [],
query: {}
}
},
mounted() {
this.apiObj = this.$API.enp.carwash;
this.getStations();
},
methods: {
getStations() {
this.$API.em.equipment.list.req({ cate__code: 'wstation', page: 0 }).then(res => {
this.stationOptions = res;
})
},
handleQuery() {
this.$refs.table.queryData(this.query);
},
}
}
</script>