<script lang="ts" setup name="Statistics">
import { getCurrentInstance, ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, type DateModelType } from 'element-plus'
import groupPng from '@/assets/images/dashboard/group.png'
import devicePng from '@/assets/images/dashboard/device.png'
import productPng from '@/assets/images/dashboard/product.png'
import dataPng from '@/assets/images/dashboard/data.png'
import { getDictByCode } from '@/api/system/dict'
import { getGroupListPage } from '@/api/basic/group'
import { getDeviceListPage } from '@/api/basic/device'
const router = useRouter()
// 每个展示块高度
const blockHeight = ref(300)
// 上面概览数据
const overview = ref({
groupCount: '****',
deviceCount: '****',
productCount: '****',
dataCount: '****',
})
// ---------------------------------分组管理-----------------------------------------------
// 默认查询条件
const groupListQuery = ref({
groupName: '', // 分组名
beginTime: '', // 创建时间-起始
endTime: '', // 创建时间-结束
offset: 1,
limit: 20,
})
const groupList: any = ref([])
const groupColumn: any = [
{ text: '分组名称', value: 'groupName', align: 'center'},
{ text: '分组内设备数量', value: 'deviceCount', align: 'center' },
{ text: '订阅数量', value: 'subscribeCount', align: 'center' },
]
const groupTotal = ref(0)
const groupLoadingTable = ref(false)
// 获取分组数据
function fetchGroupList(isNowPage = false) {
groupLoadingTable.value = true
if (!isNowPage) {
// 是否显示当前页，否则跳转第一页
groupListQuery.value.offset = 1
}
getGroupListPage(groupListQuery.value).then((response) => {
if (response.code === 200) {
groupList.value = response.data.rows
groupTotal.value = parseInt(response.data.total)
// overview.value.groupCount = groupTotal.value + ''
}
groupLoadingTable.value = false
}).catch(() => {
groupLoadingTable.value = false
})
}
// ---------------------------------离线设备-----------------------------------------------
// 默认查询条件
const offlineListQuery = ref({
groupId: '', // 分组
productId: '',
devcode: '',
imei: '',
deviceType: '',
status: '',
endCell: '',
offset: 1,
limit: 20,
})
const offlineList: any = ref([])
const offlineColumn: any = [
{ text: '分组名称', value: 'groupName', align: 'center'},
{ text: '设备编号', value: 'devcode', align: 'center' },
{ text: '最后上传时间', value: 'logtime', align: 'center' },
{ text: '无数据天数', value: 'count', align: 'center', width: '100' },
]
const offlineTotal = ref(0)
const offlineLoadingTable = ref(false)
// 获取离线设备
function fetchOfflineList(isNowPage = false) {
offlineLoadingTable.value = true
if (!isNowPage) {
// 是否显示当前页，否则跳转第一页
offlineListQuery.value.offset = 1
}
getDeviceListPage(offlineListQuery.value).then((response) => {
if (response.code === 200) {
offlineList.value = response.data.rows.map((item: any) => {
return {
...item,
}
})
offlineTotal.value = parseInt(response.data.total)
}
offlineLoadingTable.value = false
}).catch(() => {
offlineLoadingTable.value = false
})
}
// ---------------------------------低电量设备-----------------------------------------------
// 默认查询条件
const lowBatteryListQuery = ref({
groupId: '', // 分组
productId: '',
devcode: '',
imei: '',
deviceType: '',
status: '',
endCell: '10',
beginCell: '0',
offset: 1,
limit: 20,
})
const lowBatteryList: any = ref([])
const lowBatteryColumn: any = [
{ text: '分组名称', value: 'groupName', align: 'center'},
{ text: '设备编号', value: 'devcode', align: 'center' },
{ text: '最后上传时间', value: 'logtime', align: 'center' },
{ text: '电量(%)', value: 'cell', align: 'center', width: '80', styleFilter: (row: any) => { return 'color: red' } },
]
const lowBatteryTotal = ref(0)
const lowBatteryLoadingTable = ref(false)
// 获取低电量数据
function fetchLowBatteryList(isNowPage = false) {
lowBatteryLoadingTable.value = true
if (!isNowPage) {
// 是否显示当前页，否则跳转第一页
lowBatteryListQuery.value.offset = 1
}
getDeviceListPage(lowBatteryListQuery.value).then((response) => {
if (response.code === 200) {
lowBatteryList.value = response.data.rows.map((item: any) => {
return {
...item,
}
})
lowBatteryTotal.value = parseInt(response.data.total)
}
lowBatteryLoadingTable.value = false
}).catch(() => {
lowBatteryLoadingTable.value = false
})
}
// ---------------------------------异常设备-----------------------------------------------
// 默认查询条件
const errorListQuery = ref({
groupId: '', // 分组
productId: '',
devcode: '',
imei: '',
deviceType: '',
status: '',
endCell: '',
offset: 1,
limit: 20,
})
const errorList: any = ref([])
const errorColumn: any = [
{ text: '分组名称', value: 'groupName', align: 'center'},
{ text: '设备编号', value: 'devcode', align: 'center' },
{ text: '报警类型', value: 'count', align: 'center', width: '100' },
{ text: '报警时间', value: 'count', align: 'center' },
]
const errorTotal = ref(0)
const errorLoadingTable = ref(false)
// 获取异常设备
function fetchErrorList(isNowPage = false) {
errorLoadingTable.value = true
if (!isNowPage) {
// 是否显示当前页，否则跳转第一页
errorListQuery.value.offset = 1
}
getDeviceListPage(errorListQuery.value).then((response) => {
if (response.code === 200) {
errorList.value = response.data.rows.map((item: any) => {
return {
...item,
}
})
errorTotal.value = parseInt(response.data.total)
}
errorLoadingTable.value = false
}).catch(() => {
errorLoadingTable.value = false
})
}
// ---------------------------------异常设备-----------------------------------------------
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }, type = '') => {
switch(type) {
case 'group':
if (val && val.size) {
groupListQuery.value.limit = val.size
}
if (val && val.page) {
groupListQuery.value.offset = val.page
}
fetchGroupList(true)
break;
case 'offline':
ElMessage.info('敬请期待')
return
if (val && val.size) {
offlineListQuery.value.limit = val.size
}
if (val && val.page) {
offlineListQuery.value.offset = val.page
}
fetchOfflineList(true)
break;
case 'lowBattery':
if (val && val.size) {
lowBatteryListQuery.value.limit = val.size
}
if (val && val.page) {
lowBatteryListQuery.value.offset = val.page
}
fetchLowBatteryList(true)
break;
case 'error':
ElMessage.info('敬请期待')
return
if (val && val.size) {
errorListQuery.value.limit = val.size
}
if (val && val.page) {
errorListQuery.value.offset = val.page
}
fetchErrorList(true)
break;
}
}
// 处理操作中的按钮
const handleOperateButton = (type = '', row: any) => {
switch(type) {
case 'group':
router.push({
query: {
type: 'detail',
// id: row.id,
id: '1922544288985513986'
},
path: '/basic/group/detail',
})
break
default: // 离线设备、低电量设备、异常设备
router.push({
query: {
type: 'detail',
id: row.id,
},
path: '/basic/device/detail?',
})
break
}
}
// 点击标题跳转页面
const handleClickTitle = (title = '') => {
console.log('点击的title', title);
switch(title) {
case '分组管理':
router.push('/basic/group/list')
break;
case '低电量设备(低于10%)':
router.push({
path: '/basic/device/list',
query: {
fromPage: 'dashboard',
queryType: 'lowBattery'
}
})
break;
}
}
function calcBlockSize() {
// 计算工作台区域高度 - 顶部-面包屑-边距
const bodyHeight = document.body.clientHeight - 50 - 20
blockHeight.value = (bodyHeight - 100) / 2 // 左侧菜单使用
}
window.addEventListener('resize', () => {
calcBlockSize()
})
onBeforeMount(() => {
calcBlockSize()
})
onMounted(() => {
fetchGroupList() // 获取分组表格
fetchLowBatteryList() // 获取低电量设备
// fetchOfflineList() // 获取离线设备
// fetchErrorList() // 获取异常设备
})
</script>
<template>
<app-container style="overflow: hidden;padding-top: 10px;">
<div style="display: flex;height: 90px;text-align: center;width: 100%;justify-content: space-evenly;">
<div class="item">
<el-image :src="groupPng" class="base-map-image" mode="fill" />
<div class="item-text">
<div style="color: #0f67e7;">
分组数量
</div>
<div class="num">
{{ overview.groupCount }}
<!-- <span class="unit">台</span> -->
</div>
</div>
</div>
<div class="item">
<el-image :src="devicePng" class="base-map-image" mode="fill" />
<div class="item-text">
<div style="color: #0f67e7;">
设备数量
</div>
<div class="num">
{{ overview.deviceCount }}
<!-- <span class="unit">台</span> -->
</div>
</div>
</div>
<div class="item">
<el-image :src="productPng" class="base-map-image" mode="fill" />
<div class="item-text">
<div style="color: #0f67e7;">
产品数量
</div>
<div class="num">
{{ overview.productCount }}
<!-- <span class="unit">%</span> -->
</div>
</div>
</div>
<div class="item">
<el-image :src="dataPng" class="base-map-image" mode="fill" />
<div class="item-text">
<div style="color: #0f67e7;">
今日收到数据
</div>
<div class="num">
{{ overview.dataCount }}
<!-- <span class="unit">%</span> -->
</div>
</div>
</div>
</div>
<div class="device-bench">
<el-row :gutter="10">
<el-col :span="12">
<bench-col icon="icon-group1" title="分组管理" :height="blockHeight" @handleClickTitle="handleClickTitle">
<normal-table :data="groupList" :height="blockHeight - 94" :columns="groupColumn" :total="groupTotal" :query="groupListQuery" :list-loading="groupLoadingTable"
@change="(val) => changePage(val, 'group')">
<template #preColumns>
<el-table-column label="序号" width="55" align="center">
<template #default="scope">
{{ (groupListQuery.offset! - 1) * groupListQuery.limit! + scope.$index + 1 }}
</template>
</el-table-column>
</template>
<template #columns>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="{ row }">
<el-button size="small" type="primary" link @click="handleOperateButton('group', row)">
进入分组
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
</bench-col>
</el-col>
<el-col :span="12">
<bench-col icon="icon-offline" title="离线设备" :height="blockHeight" @handleClickTitle="handleClickTitle">
<normal-table :data="offlineList" :height="blockHeight - 94" :columns="offlineColumn" :total="offlineTotal" :query="offlineListQuery" :list-loading="offlineLoadingTable"
@change="(val) => changePage(val, 'offline')">
<template #preColumns>
<el-table-column label="序号" width="55" align="center">
<template #default="scope">
{{ (offlineListQuery.offset! - 1) * offlineListQuery.limit! + scope.$index + 1 }}
</template>
</el-table-column>
</template>
<template #columns>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="{ row }">
<el-button size="small" type="primary" link @click="handleOperateButton('offline', row)">
详情
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
</bench-col>
</el-col>
</el-row>
</div>
<div class="device-bench" style="margin-top: 10px;">
<el-row :gutter="10">
<el-col :span="12">
<bench-col icon="icon-lowBattery" title="低电量设备(低于10%)" :height="blockHeight" @handleClickTitle="handleClickTitle">
<normal-table :data="lowBatteryList" :height="blockHeight - 94" :columns="lowBatteryColumn" :total="lowBatteryTotal" :query="lowBatteryListQuery" :list-loading="lowBatteryLoadingTable"
@change="(val) => changePage(val, 'lowBattery')">
<template #preColumns>
<el-table-column label="序号" width="55" align="center">
<template #default="scope">
{{ (lowBatteryListQuery.offset! - 1) * lowBatteryListQuery.limit! + scope.$index + 1 }}
</template>
</el-table-column>
</template>
<template #columns>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="{ row }">
<el-button size="small" type="primary" link @click="handleOperateButton('lowBattery', row)">
详情
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
</bench-col>
</el-col>
<el-col :span="12">
<bench-col icon="icon-error" title="异常设备" :height="blockHeight" @handleClickTitle="handleClickTitle">
<normal-table :data="errorList" :height="blockHeight - 94" :columns="errorColumn" :total="errorTotal" :query="errorListQuery" :list-loading="errorLoadingTable"
@change="(val) => changePage(val, 'error')">
<template #preColumns>
<el-table-column label="序号" width="55" align="center">
<template #default="scope">
{{ (errorListQuery.offset! - 1) * errorListQuery.limit! + scope.$index + 1 }}
</template>
</el-table-column>
</template>
<template #columns>
<el-table-column fixed="right" label="操作" align="center" width="80">
<template #default="{ row }">
<el-button size="small" type="primary" link @click="handleOperateButton('error', row)">
详情
</el-button>
</template>
</el-table-column>
</template>
</normal-table>
</bench-col>
</el-col>
</el-row>
</div>
</app-container>
</template>
<style lang="scss" scoped>
.device-bench {
width: 100%;
height: 100%;
box-sizing: border-box;
.the-month-total-Data {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 0 20px;
.title {
display: flex;
justify-content: space-between;
font-weight: 500;
margin-bottom: 3px;
}
.content {
width: 100%;
.item {
display: flex;
flex-direction: column;
flex: 1;
margin-right: 10px;
padding: 3px 0;
justify-content: center;
align-items: center;
background-image: linear-gradient(to bottom, #e9f5ff, #3d7eff);
border-radius: 8px;
&:last-child {
margin-right: 0;
}
}
}
}
.my-equipment {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
padding: 20px;
.item {
height: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, #caddff, #3d7eff);
border-radius: 16px;
}
}
}
.item {
width: 300px;
display: flex;
justify-content: left;
align-items: center;
height: 80px;
border-radius: 10px;
border: 2px solid #398bff;
&:hover {
background-color: #e7f1fd;
cursor: pointer;
color: #398bff;
}
}
</style>
<style lang="scss">
.bench-table {
.el-table__header-wrapper {
border-radius: 8px;
}
}
.bench-table-header {
th {
font-weight: normal;
font-size: 14px;
}
}
.bench-table-row {
border-radius: 8px;
}
.num {
text-shadow: 0 0 5px #0f67e7;
color: #0f67e7;
font-size: 30px;
padding-top: 2px;
font-weight: bold;
}
.unit {
color: #0f67e7;
font-size: 14px;
margin-left: 3px;
}
.item-text {
text-shadow: 0 0 2px #0f67e7;
flex: 1;
text-align: center;
font-size: 18px;
}
.base-map-image {
width: 60px;
height: 60px;
margin-left: 20px;
}
</style>
