389 lines
9.0 KiB
Vue
389 lines
9.0 KiB
Vue
<script lang="ts" setup>
|
|
import { SelectData } from '@idux/components/select/src/types'
|
|
import { useFormGroup } from '@idux/cdk'
|
|
import { TableColumn } from '@idux/components/table'
|
|
import { TablePagination } from '@idux/components/table/src/types'
|
|
import CreateTsp from '@/pages/tsp/create-tsp.vue'
|
|
import TspApi from '@/pages/tsp/tsp-api.ts'
|
|
import { ref } from 'vue'
|
|
|
|
const createTsp = ref<InstanceType<typeof CreateTsp> | null>(null)
|
|
const dataSource: SelectData[] = [
|
|
{key: '', label: '所有'},
|
|
{key: 'ZhengChang', label: '正常运营'},
|
|
{key: 'FenZhengChang', label: '非正常运营'},
|
|
]
|
|
|
|
const pagination = reactive<TablePagination>({
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
size: 'sm',
|
|
showTotal: true,
|
|
onChange(pageIndex: number, pageSize: number) {
|
|
console.log('------', pageIndex, pageSize)
|
|
pagination.pageIndex = pageIndex
|
|
pagination.pageSize = pageSize
|
|
}
|
|
})
|
|
|
|
const formGroup = useFormGroup<TspTypes.SearchParam>({
|
|
pointName: [ '' ],
|
|
status: [ '' ],
|
|
})
|
|
const datasource = ref<TspTypes.TspData[]>()
|
|
const columns: TableColumn[] = [
|
|
{
|
|
title: '名称',
|
|
dataKey: 'pointName',
|
|
customCell: 'pointName'
|
|
},
|
|
{
|
|
title: '所属街道',
|
|
dataKey: 'streetName',
|
|
},
|
|
{
|
|
title: '所属小区',
|
|
dataKey: 'microdistrict',
|
|
},
|
|
{
|
|
title: '所属物业',
|
|
dataKey: 'propertyManagement'
|
|
},
|
|
{
|
|
title: '运营状态',
|
|
dataKey: 'statusTxt',
|
|
customCell: 'status',
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
customCell: 'action',
|
|
}
|
|
]
|
|
const tableSpin = ref(false)
|
|
const statisticsResult = reactive<TspTypes.StatisticsResult>({
|
|
totalCount: 0,
|
|
totalCountGrowthRate: 0,
|
|
onlineCount: 0,
|
|
onlineCountGrowthRate: 0,
|
|
offlineCount: 0,
|
|
offlineCountGrowthRate: 0,
|
|
})
|
|
|
|
function searchHandler() {
|
|
tableSpin.value = true
|
|
TspApi.paging({
|
|
...formGroup.getValue(),
|
|
current: pagination.pageIndex ?? 1,
|
|
size: pagination.pageSize ?? 10,
|
|
})
|
|
.then(res => {
|
|
pagination.pageIndex = res.data.current
|
|
pagination.pageSize = res.data.size
|
|
pagination.total = res.data.total
|
|
datasource.value = res.data.records
|
|
})
|
|
.finally(() => {
|
|
tableSpin.value = false
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
searchHandler()
|
|
TspApi.statistics()
|
|
.then(res => {
|
|
Object.assign(statisticsResult, res.data)
|
|
})
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="tsp">
|
|
<div class="title">临时收纳点管理</div>
|
|
<div class="desc">管理和监控所有临时垃圾收纳点的运营状态</div>
|
|
<IxSpace class="statistics-card" justify="space-between" size="1.5rem">
|
|
<IxCard>
|
|
<div>
|
|
<div>收纳点总数</div>
|
|
<div>{{ statisticsResult.totalCount }}</div>
|
|
<div><i class="iconfont icon-arrow-up"></i>较上月增长 {{ statisticsResult.totalCountGrowthRate }}%</div>
|
|
</div>
|
|
<Iconfont name="map-pin" wrapper/>
|
|
</IxCard>
|
|
<IxCard>
|
|
<div>
|
|
<div>正常运营数量</div>
|
|
<div>{{ statisticsResult.onlineCount }}</div>
|
|
<div><i class="iconfont icon-arrow-up"></i>较上月增长 {{ statisticsResult.onlineCountGrowthRate }}%</div>
|
|
</div>
|
|
<Iconfont name="check-circle-fill" wrapper/>
|
|
</IxCard>
|
|
<IxCard>
|
|
<div>
|
|
<div>非正常运营数量</div>
|
|
<div>{{ statisticsResult.offlineCount }}</div>
|
|
<div><i class="iconfont icon-arrow-up"></i>较上月增长 {{ statisticsResult.offlineCountGrowthRate }}%</div>
|
|
</div>
|
|
<Iconfont name="exclamationcircle-f" wrapper/>
|
|
</IxCard>
|
|
</IxSpace>
|
|
<IxCard class="table-card">
|
|
<template #header>
|
|
<div class="table-tool">
|
|
<div>收纳点列表</div>
|
|
<IxForm :control="formGroup" class="search-form" layout="inline" @submit.prevent="searchHandler">
|
|
<IxTooltip placement="top" title="输入内容回车搜索">
|
|
<IxFormItem messageTooltip>
|
|
<IxInput clearable control="pointName" placeholder="请输入收纳点名称" @clear="searchHandler"/>
|
|
</IxFormItem>
|
|
</IxTooltip>
|
|
<IxFormItem messageTooltip>
|
|
<IxSelect :dataSource="dataSource" control="status" @change="searchHandler"/>
|
|
</IxFormItem>
|
|
<IxFormItem messageTooltip>
|
|
<IxButton icon="search" mode="primary" type="submit"/>
|
|
</IxFormItem>
|
|
</IxForm>
|
|
<IxButton icon="plus" mode="primary" @click="createTsp?.open()">添加收纳点</IxButton>
|
|
</div>
|
|
</template>
|
|
<IxTable :columns="columns"
|
|
:dataSource="datasource"
|
|
:pagination="pagination" :spin="tableSpin" autoHeight class="data-table" getKey="id">
|
|
<template #pointName="{record}">
|
|
<Iconfont name="mapmarker" wrapper/>
|
|
<span>{{ record.pointName }}</span>
|
|
</template>
|
|
<template #action>
|
|
<IxButton class="video-btn" icon="eye" mode="text">查看监控</IxButton>
|
|
</template>
|
|
<template #status="{record}">
|
|
<IxTag v-if="record.status === 'ZhengChang'" status="success">{{ record.statusTxt }}</IxTag>
|
|
<IxTag v-else status="error">{{ record.statusTxt }}</IxTag>
|
|
</template>
|
|
</IxTable>
|
|
</IxCard>
|
|
<CreateTsp ref="createTsp"/>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="stylus" scoped>
|
|
.tsp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.title {
|
|
font-size: 1.75rem;
|
|
font-weight bold
|
|
color #1F2937
|
|
}
|
|
|
|
.desc {
|
|
color #687280
|
|
margin-top 1rem
|
|
}
|
|
|
|
.statistics-card {
|
|
width 100%;
|
|
margin 1rem 0
|
|
|
|
& > :deep(.ix-space-item) {
|
|
flex 1
|
|
|
|
.ix-card-body {
|
|
height 10rem
|
|
display flex
|
|
justify-content space-between
|
|
|
|
& > div:first-child {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
div:nth-child(1) {
|
|
color #6B7280
|
|
font-size 1.17rem
|
|
}
|
|
|
|
div:nth-child(2) {
|
|
color #1D2129
|
|
font-size 2.5rem
|
|
font-weight 700
|
|
}
|
|
|
|
|
|
div:nth-child(3) {
|
|
font-size 1rem
|
|
|
|
i {
|
|
margin-right 0.5rem
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div:nth-child(2) i {
|
|
display: block
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
& > :deep(.ix-space-item:nth-child(1)) {
|
|
|
|
.ix-card-body {
|
|
|
|
& > div:nth-child(1) > div:nth-child(3) {
|
|
color: #00B42A
|
|
}
|
|
|
|
& > div:nth-child(2) {
|
|
color: #165DFF;
|
|
border-radius: 100%;
|
|
background-color: #165DFF1A;
|
|
width: 3.3rem;
|
|
height: 3.3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
& > :deep(.ix-space-item:nth-child(2)) {
|
|
|
|
.ix-card-body {
|
|
|
|
& > div:nth-child(1) > div:nth-child(3) {
|
|
color: #00B42A
|
|
}
|
|
|
|
& > div:nth-child(2) {
|
|
color: #00B42A;
|
|
border-radius: 100%;
|
|
background-color: #00B42A1A;
|
|
width: 3.3rem;
|
|
height: 3.3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > :deep(.ix-space-item:nth-child(3)) {
|
|
|
|
.ix-card-body {
|
|
|
|
& > div:nth-child(1) > div:nth-child(3) {
|
|
color: #F53F3F
|
|
}
|
|
|
|
& > div:nth-child(2) {
|
|
color: #F53F3F;
|
|
border-radius: 100%;
|
|
background-color: #F53F3F1A;
|
|
width: 3.3rem;
|
|
height: 3.3rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.table-card {
|
|
display flex
|
|
flex-direction column
|
|
flex 1
|
|
padding 0 1rem
|
|
|
|
.table-tool {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items center
|
|
padding 1rem
|
|
border-bottom 1px solid #E5E7EB
|
|
|
|
& > div:nth-child(1) {
|
|
flex 2
|
|
color #1D2129
|
|
font-weight 600
|
|
font-size 1.25rem
|
|
}
|
|
|
|
& > form:nth-child(2) {
|
|
flex 1
|
|
}
|
|
|
|
.search-form {
|
|
:deep(.ix-form-item):nth-child(1) {
|
|
flex 5
|
|
}
|
|
|
|
:deep(.ix-form-item):nth-child(2) {
|
|
flex 2
|
|
}
|
|
|
|
:deep(.ix-form-item):nth-child(3) {
|
|
flex 1
|
|
}
|
|
|
|
:deep(.ix-button ) {
|
|
flex 1
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
& > :deep(.ix-card-body) {
|
|
flex 1
|
|
padding 0
|
|
}
|
|
|
|
.data-table {
|
|
:deep(.ix-table-thead .ix-table-cell) {
|
|
color: #6B7280
|
|
background-color: #F9FAFB
|
|
font-weight 500
|
|
}
|
|
|
|
:deep(.ix-table-thead th:not(:last-child))::before {
|
|
width 0;
|
|
}
|
|
|
|
.iconfont-wrapper {
|
|
color: #165DFF;
|
|
border-radius: 100%;
|
|
background-color: #165DFF1A;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 0.5rem
|
|
|
|
i {
|
|
display: block
|
|
}
|
|
}
|
|
|
|
.video-btn {
|
|
color var(--ix-button-primary-bg-color)
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|