mky-vent-base/src/views/vent/monitorManager/comment/warnAnalysis.vue

<template>
    <div class="warnAnalysis">
        <div class="warn-search">
            <a-row>
                <a-col :span="4">
                    <span class="search-label">查询设备：</span>
                    <a-select v-model:value="dataTypeName" style="width: 220px" placeholder="请选择查询设备">
                        <a-select-option v-for="item in deviceOptions" :key="item" :value="item.value">{{ item.label
                            }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col :span="4">
                    <span class="search-label">开始时间：</span>
                    <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"
                        v-model:value="startTime" style="width: 220px" />
                </a-col>
                <a-col :span="4">
                    <span class="search-label">结束时间：</span>
                    <a-date-picker show-time valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"
                        v-model:value="endTime" style="width: 220px" />
                </a-col>
                <a-col :span="4">
                    <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left:15px"
                        @click="getSearch">查询</a-button>
                </a-col>
            </a-row>
        </div>
        <div class="warn-tag" v-if="typeList.length!=0">
            <div :class="activeIndex == index ? 'tag-item-Y' : 'tag-item-N'" v-for="(item, index) in typeList"
                :key="index" @click="typeClick(index)">
                <div class="item-value">{{ item.label }}</div>
                <div class="item-label">{{ item.value }}</div>
            </div>
        </div>
        <div class="warn-content">
            <a-table :columns="analysisColumns" :data-source="tableData" size="small" :scroll="{ y: 500 }"
                class="tableW" :pagination="pagination" @change="changePaper">
                <template #bodyCell="{ column, text }"></template>

            </a-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { analysisColumns } from './comment.data'
import { defHttp } from '/@/utils/http/axios';
import dayjs from 'dayjs';
import { message } from 'ant-design-vue';

let props = defineProps({
    deviceType: {
        type: String,
        required: true,
    },
})
const getAlarmHistoryDataCount = (params) => defHttp.post({ url: '/ventanaly-device/monitor/history/getAlarmHistoryDataCount', params })
const getDeviceListApi = (params) => defHttp.post({ url: '/monitor/device', params });
let dataTypeName = ref('')
let startTime = ref(dayjs().add(-1, 'day').format('YYYY-MM-DD HH:mm:ss'))
let endTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
//设备下拉选项列表
let deviceOptions = ref<any[]>([])
let typeList = ref<any[]>([])
let activeIndex = ref(0)
let pagination = reactive({
    current: 1, // 当前页码
    pageSize: 10, // 每页显示条数
    total: 0, // 总条目数，后端返回
    // showTotal: (total, range) => `${range[0]}-${range[1]} 条，总共 ${total} 条`, // 分页右下角显示信息
    showSizeChanger: true, // 是否可改变每页显示条数
    pageSizeOptions: ['10', '20', '50'], // 可选的每页显示条数
});
let tableData = ref<any[]>([])

//查询
async function getSearch() {
    if (dataTypeName.value) {
        let res = await getAlarmHistoryDataCount({
            "pageNo": pagination.current,
            "pageSize": pagination.pageSize,
            "startTime": startTime.value,
            "endTime": endTime.value,
            "dataTypeName": dataTypeName.value
        })
        let data = res.result
        typeList.value = Object.keys(data.exceptionType).map(el => {
            return {
                label: el,
                value: data.exceptionType[el].count || 0
            }
        })
        tableData.value = data.exceptionType[typeList.value[activeIndex.value].label]['records']
        pagination.total = typeList.value[activeIndex.value].value
    } else {
        message.warning('请选择设备类型!')
    }
}
//选项切换
function typeClick(index) {
    activeIndex.value = index
    pagination.current = 1
    getSearch()
}
//分页切换
function changePaper(val) {
    pagination.current = val.current
    pagination.pageSize = val.pageSize
    getSearch()
}
async function getDeviceList() {
    if (props.deviceType.split('_')[1] && props.deviceType.split('_')[1] === 'history') return;
    let result
    const res = await getDeviceListApi({ devicetype: props.deviceType, pageSize: 10000 });
    if (res['records'] && res['records'].length > 0) {
        result = res['records'];
    } else if (res['msgTxt'] && res['msgTxt'][0] && res['msgTxt'][0]['datalist']) {
        result = res['msgTxt'][0]['datalist'];
    }
    if (result) {

        deviceOptions.value = result.map((item) => {
            return {
                label: item['strinstallpos'],
                value: item['id'] || item['deviceID'],
            };

        });
    }

}

onMounted(() => {
    getDeviceList()
    // getSearch()
})
</script>

<style lang="less" scoped>
.warnAnalysis {
    position: relative;
    width: 100%;
    height: 100%;

    .warn-search {
        display: flex;
        align-items: center;
        height: 30px;
        margin: 15px;

        .search-label {
            width: 75px;
            font-size: 14px;
            color: #fff;
        }
    }

    .warn-tag {
        height: 130px;
        margin: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tag-item-N {
            position: relative;
            width: 215px;
            height: 128px;
            background: url('../../../../assets/images/choice-N.png') no-repeat center;
            background-size: 100%;
        }

        .tag-item-Y {
            position: relative;
            width: 215px;
            height: 128px;
            background: url('../../../../assets/images/choice-Y.png') no-repeat center;
            background-size: 100%;
        }

        .item-label {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            top: 80px;
            color: #3df6ff;
            // font-size: 18px;
            font-family: 'douyuFont';
        }

        .item-value {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0%);
            top: 25px;
            font-size: 18px;
            color: #fff;
        }
    }

    .warn-content {
        margin: 15px;
    }

    .zxm-row {
        width: 100%;
    }
}

::v-deep .zxm-tag {
    font-size: 14px;
    padding: 0px 20px;
    line-height: 28px;
    background: linear-gradient(#2cd1ff55, #1eb0ff55);
    border-color: #74e9fe;
    color: #fff;
}
</style>