添加时间筛选

zhanghua

2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3

 src/views/operate/workOrder/index.vue

@@ -4,32 +4,22 @@
        <header>
            <div class="headerContent">
                <div class="search">
                    <span>姓名:</span>
                    <el-input
                        placeholder="请输入姓名"
                        v-model="context"
                    ></el-input>
                    <span>姓名：</span>
                    <el-input placeholder="请输入姓名" v-model="context"></el-input>
                    <span style="margin-left: 10px;">报警时间：</span>
                    <el-date-picker v-model="alarmTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>

                    <!-- 按钮区域 -->
                    <div class="main-btns">
                        <div class="main-btns-left">
                            <!--            <el-button icon="el-icon-download">下载图片</el-button>-->
                            <el-button
                                icon="el-icon-folder"
                                @click="exportTableData"
                                >导出</el-button
                            >
                        </div>
                        <div class="main-btns-right">
                            <el-button
                                icon="el-icon-search"
                                @click="setTableData"
                                >查询</el-button
                            >
                            <el-button
                                icon="el-icon-delete-solid"
                                @click="handleReset"
                                >重置</el-button
                            >
                            <el-button icon="el-icon-folder" @click="exportTableData">导出</el-button>
                        <!-- </div>
                        <div class="main-btns-right"> -->
                            <el-button icon="el-icon-search" @click="setTableData">查询</el-button>
                            <el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button>
                        </div>
                    </div>
                </div>
@@ -38,49 +28,23 @@
        <main>
            <div class="main-content">
                <!-- 数据展示 -->
                <el-table
                    border
                    stripe
                    ref="multipleTable"
                    :header-cell-style="{
                        background: '#F5F5F5',
                        'font-weight': '650',
                        'line-height': '45px'
                    }"
                    :row-class-name="tableRowClassName"
                    :data="list"
                    style="width: 100%"
                >
                <el-table border stripe ref="multipleTable" :header-cell-style="{
                    background: '#F5F5F5',
                    'font-weight': '650',
                    'line-height': '45px'
                }" :row-class-name="tableRowClassName" :data="list" style="width: 100%">
                    <el-table-column label="序号" type="index" width="80px">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" min-width="8">
                    </el-table-column>
                    <el-table-column
                        prop="taskCount"
                        label="任务总数"
                        min-width="10"
                    >
                    <el-table-column prop="taskCount" label="任务总数" min-width="10">
                    </el-table-column>
                    <el-table-column
                        prop="finishCount"
                        label="已完成数量"
                        min-width="10"
                    >
                    <el-table-column prop="finishCount" label="已完成数量" min-width="10">
                    </el-table-column>
                    <el-table-column
                        prop="notFinishCount"
                        label="未完成数量"
                        min-width="10"
                    >
                    <el-table-column prop="notFinishCount" label="未完成数量" min-width="10">
                    </el-table-column>
                    <el-table-column
                        prop="finishRadio"
                        label="完成率"
                        min-width="10"
                    >
                        <template slot-scope="{ row }"
                            >{{ fun(row.finishRadio * 100) }}%</template
                        >
                    <el-table-column prop="finishRadio" label="完成率" min-width="10">
                        <template slot-scope="{ row }">{{ fun(row.finishRadio * 100) }}%</template>
                    </el-table-column>
                </el-table>
            </div>
@@ -89,16 +53,9 @@
            <div class="tools">
                <div class="funs"></div>
                <div class="pagination">
                    <el-pagination
                        background
                        :current-page="currentPage"
                        layout="prev, pager, next"
                        :total="totalNum"
                        :page-size="pageSize"
                        @current-change="changeCurrentPage"
                        @prev-click="handlePrev"
                        @next-click="handleNext"
                    >
                    <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
                        :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
                        @next-click="handleNext">
                    </el-pagination>
                </div>
            </div>
@@ -114,10 +71,38 @@
    data() {
        return {
            context: "",
            alarmTime: [],
            list: [],
            totalNum: 0,
            pageSize: 10,
            currentPage: 1,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        };
    },
    created() {
@@ -131,6 +116,8 @@
                currentPage,
                pageSize,
                keyword: context,
                startTime: this.alarmTime[0],
                endTime: this.alarmTime[1],
            }).then((res) => {
                this.list = res.records;
                this.totalNum = res.total;
@@ -140,6 +127,8 @@
            const { context } = this;
            basecase.exportWorkOrder({
                keyword: context,
                startTime: this.alarmTime[0],
                endTime: this.alarmTime[1],
            }).then((res) => {
                this.$message.success('操作成功');
                let time = new Date()
@@ -166,6 +155,7 @@
            this.currentPage = 1;
            this.pageSize = 10;
            this.context = "";
            this.alarmTime = ["", ""];
            this.setTableData()
        },
        // 设置表格斑马纹
@@ -207,6 +197,7 @@
    padding: 10px 20px;
    // color: #4b9bb7;
    border: 1px solid #ccc;

    .headerTitle {
        line-height: 40px;
    }
@@ -217,7 +208,7 @@
        .headerContent {
            padding: 0;
            display: flex;
            line-height: 100px;
            line-height: 40px;
            justify-content: space-between;
            align-items: center;

@@ -226,7 +217,7 @@
                justify-content: flex-start;

                span {
                    flex: 1;
                    text-align: right;
                }

                .el-input {