scd_tools_ui/src/pages/mission/components/HistoryMis.vue

<template>
    <div style="margin-left: 20px;" v-loading="loading">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
            <div style="margin-right: 20px;">
                <span>名称：</span>
                <el-input v-model="names" style="width: 200px;" placeholder="请输入名称"></el-input>
            </div>
            <div style="margin-right: 20px;">
                <span>时间：</span>
                <el-date-picker v-model="getTime" @change="timeChange" type="datetimerange" start-placeholder="开始时间"
                    end-placeholder="结束时间" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
                    time-format="A hh:mm:ss" />
            </div>
            <div>
                <el-button @click="searchMis" type="primary">查询</el-button>
                <el-button @click="record">重置</el-button>
            </div>
        </div>
        <div style="position: relative;">
            <el-table :data="tableData" style="width: 98%;height: calc(100vh - 340px);" stripe>
                <el-table-column fixed label="序号" width="150">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="任务名称" width="200" />
                <el-table-column label="状态" width="120">
                    <template #default="scoped">
                        {{ filterState(scoped.row.state) }}
                    </template>
                </el-table-column>
                <el-table-column prop="ct" label="创建时间" width="200" />
                <el-table-column prop="start_time" label="开始检测时间" sortable width="200">
                    <template #default="scoped">
                        <span>{{ scoped.row.start_time == '1970-01-01 00:00:00' ? '暂无检测时间' : scoped.row.start_time
                            }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="scd_name" label="SCD名称" width="auto" />
                <el-table-column prop="station_name" label="变电站" width="120" />
                <el-table-column prop="username" label="创建人" width="120" />
                <el-table-column prop="voltage_name" label="电压等级" width="120" />
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scoped">
                        <!-- <el-popconfirm title="你确定删除吗？" @confirm="sureDelMis">
                            <template #reference> -->
                        <el-button v-if="scoped.row.state == '2' || scoped.row.state == '3'" link type="primary" size="small"
                            @click="relady(scoped.row)">重新检测</el-button>
                        <el-button v-if="scoped.row.state != '1'" link type="danger" size="small"
                            @click="delMis(scoped.row)">删除</el-button>
                        <!-- <el-button v-if="scoped.row.state == '2'" link type="primary" size="small"
                            @click="relady(scoped.row)">重新检测</el-button>
                        <el-button v-if="scoped.row.state != '1'" link type="danger" size="small"
                            @click="delMis(scoped.row)">删除</el-button> -->
                        <!-- </template>
    </el-popconfirm> -->
                    </template>
                </el-table-column>
            </el-table>
            <PageNation :totals="totals" :pageNum="pageNum" :pageSize="pageSize" @pageBack="pageBack"
                @currentBack="currentBack">
            </PageNation>
        </div>
        <DelHistory v-if="delModal" :delModal="delModal" :delId="delId" :reload="reload" @delBack="delBack">
        </DelHistory>
    </div>
</template>

<script>
import { ref, onMounted, watch, toRefs } from 'vue';
import moment from 'moment';
import PageNation from './PageNation.vue';
import DelHistory from '../modalComp/DelHistory.vue';
import task from '@/api/task';
import { ElMessage } from 'element-plus';
export default {
    setup() {
        let tableData = ref([])//表格内容
        let pageNum = ref(1)//页码
        let pageSize = ref(10)//页数
        let totals = ref(0)//总数
        let getTime = ref('')//时间选择器
        let startTime = ref("")//开始时间
        let endTime = ref("")//结束时间
        let names = ref('')//根据名称
        let delId = ref(0)//需要删除的id
        let delModal = ref(false)//删除模态框状态
        let loading = ref(false)
        function reload() {
            loading.value = true
            task.getTask({ pageno: 1, pagesize: 10 }).then(res => {
                if (res.code == 0) {
                    tableData.value = res.data
                    totals.value = res.count
                    loading.value = false
                }
            })
        }
        function record() {
            names.value = ''
            startTime.value = ''
            endTime.value = ''
            getTime.value = ''
            pageNum.value = 1
            task.getTask({ pageno: 1, pagesize: 10 }).then(res => {
                tableData.value = res.data
                totals.value = res.count
            })
        }
        function filterState(num) {
            if (num == 0) {
                return "未检测"
            } else if (num == 1) {
                return "检测中"
            } else if (num == 2) {
                return "检测结束"
            } else if (num == 3) {
                return "检测中断"
            }
        }
        function searchMis() {
            task.getTask({
                pageno: 1,
                pagesize: 10,
                name: names.value,
                start_time: startTime.value,
                end_time: endTime.value
            }).then(res => {
                tableData.value = res.data
                totals.value = res.count
            })
        }
        function timeChange(e) {
            if (e == null) {
                return
            } else {
                let a = moment(e[0]).format("YYYY-MM-DD")//开始时间
                let b = moment(e[1]).format("YYYY-MM-DD")//结束时间
                startTime.value = a
                endTime.value = b
            }
        }
        function delMis(e) {
            delId.value = e.id
            delModal.value = true
        }
        function relady(row) {
            task.reladyTask({
                id: row.id
            }).then(res => {
                if (res.code == 0) {
                    ElMessage({
                        message: "任务已重置",
                        type: "success"
                    })
                    reload()
                } else {
                    ElMessage({
                        message: res.msg,
                        type: "error"
                    })
                }
            })
        }
        function sureDelMis() {

        }
        function pageBack(data) {
            tableData.value = data
        }
        function delBack(data) {
            delModal.value = data
        }
        function currentBack(data) {
            pageNum.value = data
        }
        onMounted(() => {
            reload()
        })
        return {
            reload,//初始化组件
            tableData,//表格数据
            filterState,//筛选状态
            totals,
            pageNum,
            pageSize,
            pageBack,//分页组件返回数据
            getTime,
            names,
            searchMis,//查询按钮
            timeChange,//时间选择器change事件
            startTime,//开始时间
            endTime,//结束时间
            delMis,//删除任务
            sureDelMis,//确认删除
            delModal,//删除模态框的状态
            delBack,//DelHistory.vue返回模态框状态
            delId,
            record,
            totals,//总条数
            relady,//重新检测
            loading,
            currentBack,
        }
    },
    components: {
        PageNation,
        DelHistory,
    }
}
</script>

<style lang="scss" scoped></style>