EquipmentTimeErrorVerification.vue

<template>
    <a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '100px' } }">
        <a-form-item label="集团：" style="padding: 5px 0">
            <a-select v-model:value="queryForm.account_id"
                      style="width: 280px"
                      mode="multiple"
                      :maxTagCount="1"
                      @change="onAccountChange"
                      :options="accountList"
                      optionFilterProp="label"
                      show-search
            >
            </a-select>
        </a-form-item>
        <a-form-item label="广场：" style="padding: 5px 0">
            <a-select v-model:value="queryForm.plaza_id"
                      style="width: 280px"
                      mode="multiple"
                      :maxTagCount="1"
                      @change="onPlazaChange"
                      :options="plazaList"
                      optionFilterProp="label"
                      show-search
            >
            </a-select>
        </a-form-item>
        <a-form-item label="日期:" style="padding: 5px 0">
            <a-date-picker v-model:value="queryForm.countDate" style="width: 280px"/>
        </a-form-item>
        <a-form-item style="padding: 5px 0">
            <a-button type="primary" @click="search">查询</a-button>
        </a-form-item>
    </a-form>
    <a-table :dataSource="dataList" v-loading="isLoading" :columns="[
          {
                title: '集团名称',
                dataIndex: 'accountname',
                align:'center',
                slots: {
                    customRender: 'accountname',
                },
          },
          {
                title: '商场名称',
                dataIndex: 'mallname',
                align:'center',
          },
          {
                title: '监控点名称',
                dataIndex: 'gatename',
                align:'center',
          },
           {
                title: '设备号',
                dataIndex: 'serialnum',
                align:'center',
          },
           {
                title: 'IP',
                dataIndex: 'local_ip',
                align:'center',
          },
          {
                title: 'mac地址',
                dataIndex: 'mac',
                align:'center',
          },
           {
                title: '发送的错误的数据日期',
                dataIndex: 'errordate',
                align:'center',
          },
          {
                title: '发送条数',
                dataIndex: 'rowcount',
                align:'center',
          },
          {
                title: '统计日期',
                dataIndex: 'countdate',
                align:'center',
          }
        ]" :pagination="false">

    </a-table>
    <a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
        :show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']"
        @change="onPageNumChange" @showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper
        style="text-align:center" />
</template>
<script>
import moment from 'moment'
import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
import {isArray} from '@/PublicUtil/Judgment'
import {defineComponent, ref,toRaw,reactive } from 'vue'
import {filterEmptyValueInObject,formatDate} from '@/PublicUtil/PublicUtil'
import equipmentTimeErrorVerificationApi from '@/views/EquipmentTimeErrorVerification/EquipmentTimeErrorVerificationApi'

export default defineComponent({
    setup() {
        const pageNum = ref(1)
        const pageSize = ref(10)
        const total = ref()
        const dataList = ref([])
        const isLoading = ref(false)
        const accountList = ref([])
        const plazaList = ref([])
        const queryForm = reactive(
            {
                account_id: [],
                plaza_id: [],
                countDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD')
            }
        )
        const searchCondition = ref({})
        if(window.localStorage.getItem('searchCondition')){
            searchCondition.value = JSON.parse(window.localStorage.getItem('searchCondition'));
            queryForm.account_id = searchCondition.value.zone_id;
            queryForm.plaza_id = searchCondition.value.plaza_id;
        }
        const getAccountList = function() {
            queryForm.accountIds = []
            accountList.value = []
            clusterResultApi.getAccountList().then(
                (r) => {
                    if (isArray(r))
                    {
                        for (const item of r)
                        {
                            accountList.value.push(
                                {
                                    value: item.id,
                                    label: item.name,
                                }
                            )
                        }
        				if(accountList.value.length){
                            if(searchCondition.value.account_id && searchCondition.value.account_id.length>0){
                                queryForm.account_id = searchCondition.value.account_id
                            }else{
                                queryForm.account_id.push(accountList.value[0].value)
                            }
        					getPlazaList()
        				}
                    }
                }
            )
        }
        const onAccountChange = function() {
            getPlazaList(1)
        }
        
        const getPlazaList = function(val) {
            queryForm.plaza_id = []
            plazaList.value = []
            if(!queryForm.account_id.toString()){
                return
            }
            clusterResultApi.getPlazaList(
                {
                    account_id: queryForm.account_id.toString()
                }
            ).then(
                (r) => {
                    if (isArray(r))
                    {
                        for (const item of r)
                        {
                            plazaList.value.push(
                                {
                                    value: item.id,
                                    label: item.name,
                                }
                            )
                        }
        				if(plazaList.value.length>0){
        					if(!val&&searchCondition.value.plaza_id && searchCondition.value.plaza_id.length>0){
        					    queryForm.plaza_id = searchCondition.value.plaza_id
        					}else{
        					    queryForm.plaza_id.push(plazaList.value[0].value)
        					}
        					confirmSearch()
        				}
                    }
                }
            )
        }
        const onPlazaChange = function() {
            confirmSearch()
        }
        const onPageNumChange = function(num) {
            pageNum.value = num
            confirmSearch()
        }
        const onPageSizeChange = function(current, size) {
            pageNum.value = 1
            pageSize.value = size
            confirmSearch()
        }
        const confirmSearch = function(){
            isLoading.value = true
            const rawData = toRaw(queryForm)
            const data = filterEmptyValueInObject({
                page: pageNum.value - 1,
                pageSize: pageSize.value,
                countDate:formatDate(rawData.countDate),
                accountIds:rawData.account_id.toString(),
                mallIds:rawData.plaza_id.toString(),
            })
            dataList.value = [],total.value = 0
            equipmentTimeErrorVerificationApi.getList(data).then(
                (r) => {
                    isLoading.value = false
                    if(r.msg_code==200){
                        dataList.value = r.data.devices
                        total.value = r.data.pageNum
                    }
                }
            )
        }
        const search = function(){
            pageNum.value = 1
            pageSize.value = 10
            confirmSearch()
        }
        const __main = function() {
            getAccountList()
        }

        __main()
        return {
            accountList,
            onAccountChange,
            plazaList,
            onPlazaChange,
            queryForm,
            pageNum,
            pageSize,
            total,
            isLoading,
            dataList,
            onPageNumChange,
            onPageSizeChange,
            confirmSearch,
            search
        }
    },
})
</script>