web_dist/src/views/operate-monitoring/OperateMonitoringDate.vue

<template>
    <page-layer>
        <template #header>
            <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" :shortcuts="shortcuts"> </el-date-picker>
            <el-divider direction="vertical"></el-divider>
            <el-button icon="Search" type="primary" @click="query">查询</el-button>
        </template>
        <template #main>
            <xc-table :data="returnData" :openPaging="false" :height="48">
                <el-table-column type="index" label="序号" width="100">
                    <template #default="scope">
                        <span class="index_common">{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="result" label="统计结果" width="500" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.reportName }}:
                        <span style="color: #fc0404;">{{ scope.row.overview }}</span>
                        {{ scope.row.unit }}
                    </template>
                </el-table-column>
                <el-table-column prop="timeFine" label="统计日期" width="220">
                    <template #default="scope">
                        <span>{{ kssj }} 至 {{ jssj }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="port" label="操作" width="120">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="reportFirstInfo(scope.row)">详细信息</el-button>
                    </template>
                </el-table-column>
            </xc-table>
        </template>
    </page-layer>
    <el-dialog :title="titleChart" v-model="fstDrawer" fullscreen destroy-on-close>
        <ReportFirstPage :reportFirst="reportFirst" />
    </el-dialog>
</template>
<script setup name="OperateMonitoring">
import PageLayer from '@/layout/PageLayer.vue'
import { shortcuts, clockinShortcuts } from '@/data/shortcuts'
import { formatDate, getDateRangeFormatDate } from '@/utils/date'
import { ref } from '@vue/reactivity'
import router from "@/router"
import { clone } from '@/utils/clone'
import XcTable from "@/components/xiao-chan/xc-table/XcTable"
import { selectReportPortal, selectReportGroup } from '@/api/reports/high-report'
import ReportFirstPage from '@/components/operate-monitoring/ReportFirstPage.vue'

const start = formatDate(clockinShortcuts[1].value[1])
const end = formatDate(clockinShortcuts[1].value[1])
const queryTerm = ref({})
const kssj = ref('')
const jssj = ref('')
onMounted(() => {
    let path = router.currentRoute.value.path
    let _path = interceptStr(path, '/', 2)
    let val = router.options.routes.filter(e => e.path === '/operateMonitoring')[0].children;
    let param = val.filter(f => f.path === _path)[0].params
    queryTerm.value = param
    kssj.value = start
    jssj.value = end
    queryTerm.value.startTime = start;
    queryTerm.value.endTime = end + " 23:59:59";
    dateRange.value = [start, end];
    query();
});
const returnData = ref({
    currentPage: 1,
    pageSize: 30,
    total: 0,
    title: '',
    data: []
});
const dateRange = ref([]);
const query = async () => {
    if (dateRange.value) {
        let dateS = getDateRangeFormatDate(dateRange.value);
        queryTerm.value.startTime = dateS.startTime;
        queryTerm.value.endTime = dateS.endTime;
        kssj.value = formatDate(dateRange.value[0])
        jssj.value = formatDate(dateRange.value[1])
    } else {
        queryTerm.value.startTime = start;
        queryTerm.value.endTime = end;
        ElMessage({
            type: "info",
            message: "默认查询当天的数据",
            duration: 2500,
            showClose: true,
        });
    }
    selectReportPortal(queryTerm.value)
        .then((res) => {
            returnData.value.data = res.data
            returnData.value.title = res.title
        });
};
// ------------------------------详细信息----------------------------------------
const fstDrawer = ref(false)
const reportFirst = ref({})
const titleChart = ref('')
const reportFirstInfo = (row) => {
    const params = {
        startTime: queryTerm.value.startTime,
        endTime: queryTerm.value.endTime,
        reportId: row.reportId,
        reportName: row.reportName,
        reportType: row.reportType,
        displayType: row.displayType,
        menuId: row.menuId,
        levelType: queryTerm.value.levelType,
        type: queryTerm.value.type,
    }
    selectReportGroup(params).then((res) => {
        reportFirst.value = res
        titleChart.value = res.title
        fstDrawer.value = true
        reportFirst.value.row = row
        reportFirst.value.kssj = kssj.value
        reportFirst.value.jssj = jssj.value
        reportFirst.value.params = clone(params)
    })
}

function interceptStr(str, ele, index) {
    let num = str.indexOf(ele) + 1;
    if (index <= 1) {
        str = str.substring(num);
        return str
    };
    str = str.substring(num);
    index--;
    return interceptStr(str, ele, index);
}
</script>
<style scoped>
.index_common {
    text-shadow: none;
    font-size: 10px;
    padding-top: 1px;
    padding-bottom: 3px;
    font-weight: normal;
    line-height: 12px;
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 4em;
    color: #fff;
    background: #1e90ff;
}
</style>