mky-vent-base/src/views/vent/gas/gasAnalysis/index.vue

<template>
    <div class="gasReport">
        <customHeader>瓦斯巡检业务分析</customHeader>
        <div class="report-container">
            <div class="search-area">
                <a-row>
                    <a-col :span="4">
                        <div class="area-item">
                            <div class="item-text">时间：</div>
                            <a-date-picker style="width:240px" v-model:value="searchTime" :showTime="false"
                                valueFormat="YYYY-MM-DD" placeholder="请选择时间" />
                        </div>
                    </a-col>
                    <a-col :span="20">
                        <a-button type="primary" preIcon="ant-design:search-outlined" @click="getSearch">查询</a-button>
                        <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
                        <a-button type="primary" preIcon="ant-design:download-outlined">导出</a-button>
                    </a-col>
                </a-row>
            </div>
            <div class="table-area">
                <a-table :columns="columns"
                    :row-selection="{ selectedRowKeys: selectedRowKey, type: 'radio', onChange: onSelectChange }"
                    size="small" :data-source="tableData" :scroll="{ y: 470 }" class="tableW" :pagination="pagination">
                    <template #bodyCell="{ column, text }">
                        <template v-if="column.dataIndex == 'bc'">
                            <div>夜班</div>
                            <div style="padding: 32px 0px;">早班</div>
                            <div>中班</div>
                        </template>
                        <template v-if="column.dataIndex == 'insType'">
                            <div>
                                <div>一次巡检</div>
                                <div>二次巡检</div>
                            </div>
                            <div style="padding: 10px 0px;">
                                <div>一次巡检</div>
                                <div>二次巡检</div>
                            </div>
                            <div>
                                <div>一次巡检</div>
                                <div>二次巡检</div>
                            </div>
                        </template>
                        <template
                            v-if="column.dataIndex == 'xjzs' || column.dataIndex == 'yxjs' || column.dataIndex == 'wxjs' || column.dataIndex == 'ljv' || column.dataIndex == 'ljxq'">
                            <div>
                                <div>{{ text[0] }}</div>
                                <div>{{ text[1] }}</div>
                            </div>
                            <div style="padding: 10px 0px;">
                                <div>{{ text[2] }}</div>
                                <div>{{ text[3] }}</div>
                            </div>
                            <div>
                                <div>{{ text[4] }}</div>
                                <div>{{ text[5] }}</div>
                            </div>
                        </template>
                        <template v-if="column.dataIndex == 'bzljv'">
                            <div>{{ text[0] }}</div>
                            <div style="padding: 32px 0px;">{{ text[1] }}</div>
                            <div>{{ text[2] }}</div>
                        </template>
                    </template>
                </a-table>
            </div>
            <div class="echart-area">
                <div class="left-echart-area">
                    <echartBox :legendV="legendData" :xData="xData" :yData1="yDataY" :yData2="yDataN"
                        :datazoomShow="false">
                    </echartBox>
                </div>
                <div class="right-echart-area">
                    <echartBox :legendV="legendData1" :xData="xData1" :yData1="yDataL" :datazoomShow="true"
                        :typeV="typeV">
                    </echartBox>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue';
import customHeader from '/@/components/vent/customHeader.vue';
import echartBox from './components/echartBox.vue'
import dayjs from 'dayjs';
import { columns, pagination, } from './gasAnalysis.data'
import { gasReportLogList } from './gasAnalysis.api'


let searchTime = ref(dayjs().format('YYYY-MM-DD'))//dayjs().format('YYYY-MM-DD HH:mm:ss')
let tableData = ref<any[]>([])
let selectedRowKey = ref<any[]>(['1'])
//柱状图相关数据
let legendData = reactive({
    data: ['已巡检', '未巡检',],
    right: 'center',
    top: 5,
    textStyle: {
        color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
})
let xData = ref<any[]>(['夜班1', '夜班2', '早班1', '早班2', '中班1', '中班2'])
let yDataY = ref<any[]>([])
let yDataN = ref<any[]>([])

//曲线图相关数据
let legendData1 = reactive({
    data: ['日漏检率'],
    right: 'center',
    top: 5,
    textStyle: {
        color: "#fff"
    },
    itemWidth: 12,
    itemHeight: 10,
    // itemGap: 35
})
let xData1 = ref<any[]>(['2024-12-23', '2024-12-24', '2024-12-25', '2024-12-26', '2024-12-27', '2024-12-28', '2024-12-29',])
let yDataL = ref<any[]>([1, 4, 6, 8, 10, 7, 4])
let typeV = ref('line')
//table选中数据切换
let onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log(`当前选中key: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    selectedRowKey.value=selectedRowKeys
    yDataY.value = selectedRows[0].yxjs
    yDataN.value = selectedRows[0].wxjs
}

//瓦斯巡检统计分析查询列表
async function gasReportLogLists() {
    let res = await gasReportLogList({ reportTime: searchTime.value, pageNo: pagination.current, pageSize: pagination.pageSize })
    console.log(res, '瓦斯巡检统计分析列表')

    if (res.code == 200 && res.records.length != 0) {
        pagination.current = 1
        res.records=[
      {totalNight1:1,totalNight2:2,totalEarly1:3,totalEarly2:4,totalNoon1:5,totalNoon2:6,finishNight1:'11',finishNight2:'22',finishEarly1:'33',finishEarly2:'44',finishNoon1:'55',finishNoon2:'66',missNight1:'111',missNight2:'222',missEarly1:'333',missEarly2:'444',missNoon1:'555',missNoon2:'666',lossNight1:'1111',lossNight2:'2222',lossEarly1:'3333',lossEarly2:'4444',lossNoon1:'5555',lossNoon2:'6666',detailsLossNight1:'11111',detailsLossNight2:'22222',detailsLossEarly1:'33333',detailsLossEarly2:'44444',detailsLossNoon1:'55555',detailsLossNoon2:'66666'},
      {totalNight1:1,totalNight2:2,totalEarly1:3,totalEarly2:4,totalNoon1:5,totalNoon2:6,finishNight1:'11',finishNight2:'22',finishEarly1:'33',finishEarly2:'44',finishNoon1:'55',finishNoon2:'66',missNight1:'111',missNight2:'222',missEarly1:'333',missEarly2:'444',missNoon1:'555',missNoon2:'666',lossNight1:'1111',lossNight2:'2222',lossEarly1:'3333',lossEarly2:'4444',lossNoon1:'5555',lossNoon2:'6666',detailsLossNight1:'11111',detailsLossNight2:'22222',detailsLossEarly1:'33333',detailsLossEarly2:'44444',detailsLossNoon1:'55555',detailsLossNoon2:'66666'},
      {totalNight1:1,totalNight2:2,totalEarly1:3,totalEarly2:4,totalNoon1:5,totalNoon2:6,finishNight1:'11',finishNight2:'22',finishEarly1:'33',finishEarly2:'44',finishNoon1:'55',finishNoon2:'66',missNight1:'111',missNight2:'222',missEarly1:'333',missEarly2:'444',missNoon1:'555',missNoon2:'666',lossNight1:'1111',lossNight2:'2222',lossEarly1:'3333',lossEarly2:'4444',lossNoon1:'5555',lossNoon2:'6666',detailsLossNight1:'11111',detailsLossNight2:'22222',detailsLossEarly1:'33333',detailsLossEarly2:'44444',detailsLossNoon1:'55555',detailsLossNoon2:'66666'}
        ]
        tableData.value = res.records.map(el => {
            el.key=new Date().getTime()
            el.bc = '3'
            el.insType = '2'
            el.xjzs = [el.totalNight1 || 0, el.totalNight2 || 0, el.totalEarly1 || 0, el.totalEarly2 || 0, el.totalNoon1 || 0, el.totalNoon2 || 0]
            el.yxjs = [el.finishNight1 || 0, el.finishNight2 || 0, el.finishEarly1 || 0, el.finishEarly2 || 0, el.finishNoon1 || 0, el.finishNoon2 || 0]
            el.wxjs = [el.missNight1 || 0, el.missNight2 || 0, el.missEarly1 || 0, el.missEarly2 || 0, el.missNoon1 || 0, el.missNoon2 || 0]
            el.ljv = [el.lossNight1 || 0, el.lossNight2 || 0, el.lossEarly1 || 0, el.lossEarly2 || 0, el.lossNoon1 || 0, el.lossNoon2 || 0]
            el.ljxq = [el.detailsLossNight1 || 0, el.detailsLossNight2 || 0, el.detailsLossEarly1 || 0, el.detailsLossEarly2 || 0, el.detailsLossNoon1 || 0, el.detailsLossNoon2 || 0]
            el.bzljv = [el.totalLossNight || 0, el.totalLossEarly || 0, el.totalLossNoon || 0]
            return el
        })
        pagination.total = res.total
        xData1.value=res.records.map(v=>v.reportTime)
        yDataL.value=res.records.map(m=>m.totalLossDay)
    }
}
//查询
let getSearch = () => {
    gasReportLogLists()
}
//重置
let getReset = () => {
    searchTime.value = dayjs().format('YYYY-MM-DD')
    gasReportLogLists()
}
onMounted(() => {
    // gasReportLogLists()
})

</script>

<style lang="less" scoped>
.gasReport {
    width: 100%;
    height: 100%;
    padding: 80px 10px 15px 10px;
    box-sizing: border-box;
    position: relative;

    .report-container {
        height: 100%;

        .search-area {
            margin: 20px 0px;

            .area-item {
                display: flex;
                align-items: center;

                .item-text {
                    color: #fff;
                }
            }
        }

        .table-area {
            height: 545px;
        }

        .echart-area {
            height: calc(100% - 617px);
            display: flex;
            justify-content: space-between;

            .left-echart-area,
            .right-echart-area {
                width: calc(50% - 10px);
            }
        }
    }

}

:deep(.zxm-table-thead > tr > th:last-child) {
    border-right: 1px solid #91e9fe !important;
}

:deep(.zxm-picker-input > input) {
    color: #fff;
}

:deep(.zxm-picker) {
    border: 1px solid #3ad8ff77 !important;
    background-color: #ffffff00 !important;
    color: #fff !important;
}
</style>