<!-- e:\VSprojects\fume-supervision-vue\src\components\monitor\ShopList.vue -->
|
<template>
|
<el-card class="section" shadow="hover">
|
<template #header>
|
<div class="card-header">
|
<span>在线设备和店铺清单</span>
|
</div>
|
</template>
|
<el-row :gutter="20" class="filter-controls">
|
<el-col :span="8">
|
<el-select
|
v-model="localFilter.district"
|
@change="handleFilterChange"
|
placeholder="行政区划"
|
>
|
<el-option label="全部行政区划" value="" />
|
<el-option
|
v-for="district in districts"
|
:key="district"
|
:label="district"
|
:value="district"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="8">
|
<el-select
|
v-model="localFilter.shopType"
|
@change="handleFilterChange"
|
placeholder="店铺类型"
|
>
|
<el-option label="全部店铺类型" value="" />
|
<el-option v-for="type in shopTypes" :key="type" :label="type" :value="type" />
|
</el-select>
|
</el-col>
|
<el-col :span="8">
|
<el-select v-model="localFilter.status" @change="handleFilterChange" placeholder="状态">
|
<el-option label="全部状态" value="" />
|
<el-option label="在线" value="online" />
|
<el-option label="离线" value="offline" />
|
</el-select>
|
</el-col>
|
</el-row>
|
<el-table :data="filteredShops" style="width: 100%" stripe>
|
<el-table-column prop="name" label="店铺名称" />
|
<el-table-column prop="deviceCount" label="设备数量" />
|
<el-table-column prop="status" label="在线情况" />
|
<el-table-column prop="district" label="行政区划" />
|
<el-table-column prop="type" label="店铺类型" />
|
</el-table>
|
</el-card>
|
</template>
|
|
<script>
|
export default {
|
name: 'ShopList',
|
props: {
|
shops: {
|
type: Array,
|
default: () => [],
|
},
|
shopTypes: {
|
type: Array,
|
default: () => ['中餐', '西餐', '快餐', '火锅', '烧烤'],
|
},
|
districts: {
|
type: Array,
|
default: () => ['东城区', '西城区', '朝阳区', '海淀区', '丰台区'],
|
},
|
filter: {
|
type: Object,
|
default: () => ({
|
district: '',
|
shopType: '',
|
status: '',
|
}),
|
},
|
},
|
data() {
|
return {
|
localFilter: { ...this.filter },
|
}
|
},
|
computed: {
|
filteredShops() {
|
return this.shops.filter((shop) => {
|
return (
|
(this.localFilter.district === '' || shop.district === this.localFilter.district) &&
|
(this.localFilter.shopType === '' || shop.type === this.localFilter.shopType) &&
|
(this.localFilter.status === '' || shop.status === this.localFilter.status)
|
)
|
})
|
},
|
},
|
watch: {
|
filter(newVal) {
|
this.localFilter = { ...newVal }
|
},
|
},
|
methods: {
|
handleFilterChange() {
|
this.$emit('filter-change', this.localFilter)
|
},
|
},
|
}
|
</script>
|
|
<style scoped>
|
.section {
|
margin-bottom: 20px;
|
}
|
|
.card-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
|
.filter-controls {
|
margin-bottom: 20px;
|
}
|
</style>
|
