| | |
| | | |
| | | <!-- 店铺列表 --> |
| | | <div class="shop-list"> |
| | | <el-table :data="pagedShopList" style="width: 100%"> |
| | | <el-table :data="filteredShopList" style="width: 100%" max-height="600px"> |
| | | <el-table-column prop="shopName" label="店铺名称" /> |
| | | <el-table-column prop="district" label="所在区县" width="120" /> |
| | | <el-table-column prop="town" label="所在街镇" width="150" /> |
| | |
| | | v-model:page-size="pageSize" |
| | | :page-sizes="[10, 20, 50, 100]" |
| | | layout="total, sizes, prev, pager, next, jumper" |
| | | :total="filteredShopList.length" |
| | | :total="total" |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | /> |
| | |
| | | label: '餐饮', |
| | | value: '1', |
| | | }, |
| | | time: dayjs('2023-08-01').date(1).toDate(), |
| | | time: dayjs('2025-08-01').date(1).toDate(), |
| | | }) |
| | | // 状态 |
| | | const drawerVisible = ref(false) |
| | |
| | | // 分页相关 |
| | | const currentPage = ref(1) |
| | | const pageSize = ref(10) |
| | | const total = ref(0) |
| | | // 环信码图片URL |
| | | const codeImageUrl = ref('') |
| | | |
| | |
| | | redCount: 20, |
| | | redPercentage: 10.5, |
| | | }) |
| | | |
| | | // 店铺名称列表 |
| | | const shopNames = [ |
| | | '付小姐在成都', |
| | | '吉刻联盟', |
| | | '家在塔啦', |
| | | '狼来了', |
| | | '乐凯撒星游店', |
| | | '馨远美食小镇(哈尼美食广场)', |
| | | '棒约翰', |
| | | '弄堂咪道', |
| | | '杨记齐齐哈尔烤肉', |
| | | '上海稔传餐饮管理有限公司(人生一串)', |
| | | '缘家', |
| | | '泉盛餐饮(上海)有限公司(食其家)', |
| | | '丰茂烤串', |
| | | '上海泰煌餐饮管理有限公司(泰煌鸡)', |
| | | '徐汇区辰熙餐馆(小铁君串烧居酒屋)', |
| | | ] |
| | | |
| | | // 徐汇区街镇列表 |
| | | const xuhuiTowns = [ |
| | | '天平路街道', |
| | | '湖南路街道', |
| | | '斜土路街道', |
| | | '枫林路街道', |
| | | '长桥街道', |
| | | '田林街道', |
| | | '虹梅路街道', |
| | | '康健新村街道', |
| | | '徐家汇街道', |
| | | '凌云路街道', |
| | | '龙华街道', |
| | | '漕河泾街道', |
| | | '华泾镇', |
| | | ] |
| | | |
| | | function onSearch() { |
| | | const f = formSearch.value |
| | |
| | | |
| | | userApi.fetchUser(currentPage.value, pageSize.value, area).then((res) => { |
| | | if (res) { |
| | | res.data |
| | | res.head.totalCount |
| | | |
| | | total.value = res.head.totalCount |
| | | shopList.value = res.data.map((item, index) => { |
| | | const { score, code } = generateRandomScore() |
| | | return { |
| | |
| | | }) |
| | | } |
| | | |
| | | // 生成2023年8月内的随机时间 |
| | | // 生成2025年8月内的随机时间 |
| | | function generateRandomDate() { |
| | | const year = 2023 |
| | | const year = 2025 |
| | | const month = 7 // 0-11,8月是7 |
| | | const day = Math.floor(Math.random() * 31) + 1 // 1-31 |
| | | const hour = Math.floor(Math.random() * 24) // 0-23 |
| | |
| | | |
| | | const date = new Date(year, month, day, hour, minute) |
| | | return date.toISOString().slice(0, 16).replace('T', ' ') |
| | | } |
| | | |
| | | // 随机选择数组元素 |
| | | function getRandomElement(array) { |
| | | return array[Math.floor(Math.random() * array.length)] |
| | | } |
| | | |
| | | // 生成随机评分和对应环信码等级 |
| | |
| | | } |
| | | |
| | | // 店铺数据 |
| | | const shopList = ref([ |
| | | { |
| | | id: 1, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'green', |
| | | score: 90, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '净化器运行时长不足', |
| | | score: 90, |
| | | handled: true, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 2, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'yellow', |
| | | score: 75, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '投诉次数较多', |
| | | score: 80, |
| | | handled: false, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 3, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'red', |
| | | score: 60, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '排放浓度超标', |
| | | score: 65, |
| | | handled: false, |
| | | }, |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '清洗频次不足', |
| | | score: 62, |
| | | handled: false, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 4, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'green', |
| | | score: 92, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [], |
| | | }, |
| | | { |
| | | id: 5, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'yellow', |
| | | score: 78, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '风机联动率低', |
| | | score: 75, |
| | | handled: true, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 6, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'green', |
| | | score: 90, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [], |
| | | }, |
| | | { |
| | | id: 7, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'red', |
| | | score: 55, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '未安装油烟净化设备', |
| | | score: 60, |
| | | handled: false, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 8, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'yellow', |
| | | score: 72, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '净化器清洗不及时', |
| | | score: 75, |
| | | handled: true, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | id: 9, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'green', |
| | | score: 93, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [], |
| | | }, |
| | | { |
| | | id: 10, |
| | | shopName: getRandomElement(shopNames), |
| | | district: '徐汇区', |
| | | town: getRandomElement(xuhuiTowns), |
| | | code: 'yellow', |
| | | score: 76, |
| | | trend: generateRandomTrend(), |
| | | lastUpdate: generateRandomDate(), |
| | | warnings: [ |
| | | { |
| | | time: generateRandomDate(), |
| | | content: '排放浓度接近标准限值', |
| | | score: 78, |
| | | handled: true, |
| | | }, |
| | | ], |
| | | }, |
| | | ]) |
| | | const shopList = ref([]) |
| | | |
| | | // 过滤后的店铺列表 |
| | | const filteredShopList = computed(() => { |
| | |
| | | return shopList.value |
| | | } |
| | | return shopList.value.filter((shop) => shop.code === filterCode.value) |
| | | }) |
| | | |
| | | // 分页后的店铺列表 |
| | | const pagedShopList = computed(() => { |
| | | const start = (currentPage.value - 1) * pageSize.value |
| | | const end = start + pageSize.value |
| | | return filteredShopList.value.slice(start, end) |
| | | }) |
| | | |
| | | // 生命周期 |
| | |
| | | function handleSizeChange(size) { |
| | | pageSize.value = size |
| | | currentPage.value = 1 |
| | | onSearch() |
| | | } |
| | | |
| | | function handleCurrentChange(current) { |
| | | currentPage.value = current |
| | | onSearch() |
| | | } |
| | | |
| | | function getCodeType(code) { |
| | |
| | | |
| | | .card-content { |
| | | text-align: center; |
| | | padding: 20px 0; |
| | | padding: 0px 0; |
| | | } |
| | | |
| | | .card-title { |