| | |
| | | <div class="overview-next"> |
| | | <div class="next-num"> |
| | | <div class="total"> |
| | | <div class="value">88</div> |
| | | <div class="value">{{ total }}</div> |
| | | <div class="name">机巢总数</div> |
| | | </div> |
| | | <div class="status"> |
| | | <div v-for="item in list"> |
| | | <div v-for="item in listNum"> |
| | | <div :style="{ color: item.color }" class="value">{{ item.value }}</div> |
| | | <div class="name">{{ item.name }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="search-box"> |
| | | <el-input v-model="searchText" placeholder="请输入搜索内容" class="input-with-select"> |
| | | <el-input v-model="searchText" placeholder="请输入机巢名称" class="input-with-select"> |
| | | <template #append> |
| | | <el-button :icon="Search" /> |
| | | <el-button :icon="Search" @click="searchNickName"/> |
| | | </template> |
| | | </el-input> |
| | | </div> |
| | |
| | | <div class="name">机巢名称</div> |
| | | <div class="status">机巢状态</div> |
| | | </div> |
| | | <div class="table-item" v-for="item in tableList"> |
| | | <div class="name"> |
| | | <img class="yjzx-img" width="10" height="10" src="@/assets/images/home/homeLeft/table-zx.png" alt="" /> |
| | | <img width="13" height="15" src="@/assets/images/home/homeLeft/table-icon.png" alt="" /> |
| | | {{ item.name }} |
| | | <div class="table-body" v-if="tableList.length > 0" |
| | | infinite-scroll-distance="6" |
| | | v-infinite-scroll="loadMore" |
| | | :infinite-scroll-disabled="busy" |
| | | infinite-scroll-immediate="true"> |
| | | <div class="table-item" v-for="item in tableList"> |
| | | <div class="name"> |
| | | <!-- <img class="yjzx-img" width="10" height="10" src="@/assets/images/home/homeLeft/table-zx.png" alt="" /> --> |
| | | <img width="13" height="15" src="@/assets/images/home/homeLeft/table-icon.png" alt="" /> |
| | | {{ item.nickname }} |
| | | </div> |
| | | <div class="status" :class="item.status==='WORKING'?'atcive':''" @click="signMachineNestClick"> |
| | | {{ item.status==='OFFLINE'?'离线中':(item.status==='WORKING'?'作业中':'空闲中') }} |
| | | </div> |
| | | </div> |
| | | <div class="status" @click="signMachineNestClick">{{ item.status }}</div> |
| | | </div> |
| | | <el-empty class="custom-empty" v-else> |
| | | <template #description> |
| | | <span class="custom-text">暂无数据</span> |
| | | </template> |
| | | </el-empty> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import { getDeviceInfoNum } from '@/api/home/machineNest.js' |
| | | import { getDeviceInfoNum, selectDevicePage } from '@/api/home/machineNest.js' |
| | | import { useStore } from 'vuex'; |
| | | const searchText = ref('') |
| | | const list = ref([ |
| | | |
| | | const store = useStore(); |
| | | |
| | | // 统计机巢总数 |
| | | let total = ref(0); |
| | | // 机巢统计 |
| | | let listNum = ref([ |
| | | { name: '执行中', value: 89, color: '#FFA768' }, |
| | | { name: '在线', value: 100, color: '#8EFFAC' }, |
| | | { name: '离线', value: 66, color: '#FFFFFF' }, |
| | | { name: '异常', value: 10, color: '#FF8E8E' }, |
| | | // { name: '异常', value: 10, color: '#FF8E8E' }, |
| | | ]); |
| | | |
| | | const tableList = ref([ |
| | | { name: '小兰工业园3号', status: '预计执行' }, |
| | | { name: '小兰工业园3号', status: '正在执行' }, |
| | | { name: '小兰工业园3号', status: '预计执行' }, |
| | | { name: '小兰工业园3号', status: '预计执行' }, |
| | | ]); |
| | | |
| | | // 获取机巢列表 |
| | | const getList = () => { |
| | | getDeviceInfoNum().then((res) => { |
| | | console.log(res); |
| | | if (res.data.code !== 0) return; |
| | | let result = res.data.data; |
| | | listNum.value[0].value = result.ex_num; |
| | | listNum.value[1].value = result.leisure_num; |
| | | listNum.value[2].value = result.offline_num; |
| | | total.value = result.device_num; |
| | | }); |
| | | } |
| | | const store = useStore(); |
| | | |
| | | const isMore = ref(true); |
| | | // 控制加载状态 |
| | | const busy = ref(false); |
| | | // 机巢搜索名称 |
| | | const searchText = ref('') |
| | | // 分页参数 |
| | | const pageParams = ref({ |
| | | current: 1, |
| | | size: 5, |
| | | total: 0 |
| | | }); |
| | | // 机巢列表 |
| | | const tableList = ref([]); |
| | | // 机巢列表数据 |
| | | const getTableList = () => { |
| | | const params = { |
| | | nickname: searchText.value, |
| | | is_execute: false, |
| | | type: 1, |
| | | current: pageParams.value.current, |
| | | size: pageParams.value.size |
| | | }; |
| | | selectDevicePage(params).then((res) => { |
| | | // if (res.data.code !== 0) return; |
| | | if (res.data.data.records.length === 0) return (isMore.value = false); |
| | | pageParams.value.current += 1; |
| | | tableList.value = [...tableList.value, ...res.data.data.records]; |
| | | busy.value = false; |
| | | }); |
| | | } |
| | | |
| | | // 加载更多数据 |
| | | const loadMore = async () => { |
| | | busy.value = true; |
| | | if (!isMore.value) return; |
| | | getTableList(); |
| | | }; |
| | | |
| | | // 搜索数据 |
| | | const searchNickName = () => { |
| | | pageParams.value.current = 1; |
| | | tableList.value = []; |
| | | isMore.value = true |
| | | getTableList(); |
| | | } |
| | | |
| | | // 单个机巢详情 |
| | | const signMachineNestClick = () => { |
| | |
| | | |
| | | onMounted(() => { |
| | | getList(); |
| | | getTableList(); |
| | | }); |
| | | </script> |
| | | <style scoped lang="scss"> |
| | |
| | | margin: 16px; |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | height: 220px; |
| | | .table-header, |
| | | .table-item { |
| | | display: flex; |
| | |
| | | height: 36px; |
| | | line-height: 36px; |
| | | padding: 0 20px; |
| | | } |
| | | .table-header { |
| | | background: linear-gradient( 90deg, rgba(12,45,92,1) 0%, #0C3B78 50%, rgba(12,45,92,1) 100%), linear-gradient( 90deg, rgba(12,45,92,1) 0%, rgba(12,45,92,1) 50%, rgba(12,45,92,1) 100%); |
| | | border-radius: 0px 0px 0px 0px; |
| | | // border: 1px solid; |
| | | } |
| | | .table-body { |
| | | height: 190px; |
| | | overflow: auto; |
| | | &::-webkit-scrollbar { |
| | | width: 0; |
| | | display: none; |
| | | } |
| | | -ms-overflow-style: none; /* IE and Edge */ |
| | | scrollbar-width: none; /* Firefox */ |
| | | } |
| | | .table-item { |
| | | position: relative; |
| | |
| | | } |
| | | .atcive { |
| | | color: #04f020; |
| | | background: linear-gradient( 90deg, rgba(12,45,92,1) 0%, #154671 50%, rgba(12,45,92,1) 100%), linear-gradient( 90deg, rgba(12,45,92,1) 0%, rgba(12,45,92,1) 50%, rgba(12,45,92,1) 100%); |
| | | } |
| | | } |
| | | .custom-empty { |
| | | margin: 16px 0; |
| | | padding: 0; |
| | | :deep(.el-empty__image) { |
| | | width: 100px; |
| | | height: 100px; |
| | | } |
| | | } |
| | | } |