analysis/src/views/anomaly/index.vue

<template>
    <div class="hc-layout-box anonaly-page">
        <hc-card :scrollbar="false" action-size="lg">
            <template #extra>
                <el-select
                    v-model="searchForm.key1"
                    placeholder="异常类型"
                    class="w-60"
                >
                    <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <el-select
                    v-model="searchForm.key2"
                    placeholder="异常等级"
                    class="ml-2 w-60"
                >
                    <el-option
                        v-for="item in levelOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                <el-select
                    v-model="searchForm.key3"
                    placeholder="是否撤销"
                    class="ml-2 w-60"
                >
                    <el-option
                        label="是"
                        :value="1"
                    />
                    <el-option
                        label="否"
                        :value="2"
                    />
                </el-select>
                <el-input v-model="searchForm.queryValue" placeholder="请输入" clearable class="ml-2 w-60" />
                <el-button color=" #6DC2FF" type="primary" class="ml-2">
                    <hc-icon name="search" class="text-white" />
                    <span class="text-white">搜索</span>
                </el-button>
                <el-button color=" #6DC2FF" type="info" class="ml-2" :disabled="tableCheckedKeys.length === 0" @click="exportClick">
                    <hc-icon name="download" class="text-white" />
                    <span class="text-white">批量导出</span>
                </el-button>
            </template>
            <hc-table 
                :column="tableColumn"
                :datas="tableData" 
                :cell-style="tableCellStyle"
                :index-style="{ fixed: true, width: 60 }"
                is-check :check-style="{ fixed: true, width: 29 }" @selection-change="tableSelectionChange" 
            >
                <template #action="{ row }">
                    <el-link type="danger" @click="cancleClick(row)">   <hc-icon name="arrow-go-back" />撤销</el-link>
                    <el-link type="success" @click="exportClick(row)">  <hc-icon name="download" />导出</el-link>
                </template>
            </hc-table>
            <template #action>
                <HcPages :pages="searchForm" @change="pageChange" />
            </template>
        </hc-card>
        <!-- 撤销弹窗 -->
        <hc-dialog v-model="cancelModal" title="撤销">
            <el-alert title="请选择撤销结束时间" type="warning" show-icon class="mb-4" :closable="false" />
            <el-date-picker
                v-model="cancelTime"
                type="date"
                placeholder="撤销结束时间"
            />
        </hc-dialog>
        <!-- 导出弹窗 -->
        <hc-dialog v-model="exportModal" title="导出">
            <el-alert title="确定导出项目预警数据?" type="warning" show-icon class="export mb-4" :closable="false" />
        </hc-dialog>
    </div>
</template>

<script setup>
   import { ref, watch } from 'vue'
   //搜索表单
const searchForm = ref({
    queryValue: null, current: 1, size: 20, total: 0, key1:'', key2:'', key3:'',
})
const typeOptions = ref([
    {
        value: '1',
        label: '项目进度异常',
    },
    {
        value: '2',
        label: '项目投资异常',
    },
])
const levelOptions = ref([
    {
        value: '1',
        label: '三级',
    },
    {
        value: '2',
        label: '二级',
    },
])
const tableColumn = [
       { key: 'key1', name: '项目名称', align:'center' },
       { key: 'key2', name: '异常类型', align:'center' },
       { key: 'key3', name: '季度', align:'center' },
       { key: 'key4', name: '异常时间', align:'center' },
       { key: 'key5', name: '异常等级', width:80, align:'center' },
       { key: 'key6', name: '是否撤销', align:'center' },
       { key: 'key7', name: '撤销开始时间', align:'center' },
       { key: 'key8', name: '撤销结束时间', align:'center' },
       { key: 'action', name: '操作', fixed:'right', align: 'center' },
   ]
const tableData = ref([
    { key1: '成渝高速', key2: '项目进度异常', key3: '第一季度', key4:'2021-3-1 14:31', key5:'三级异常', key6:'否', key7:'' },
    { key1: '成渝高速', key2: '项目进度异常', key3: '第一季度', key4:'2021-3-1 14:31', key5:'一级异常', key6:'否', key7:'' },
    { key1: '成渝铁路重庆站至江津段改造', key2: '项目进度异常', key3: '第一季度', key4:'2021-3-1 14:31', key5:'二级异常', key6:'否', key7:'' },
])
//设置单元格的样式
const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
    if (column.property === 'key5' && row.key5 === '二级异常') {
        return {
            backgroundColor: '#FFBE00',
            color: 'white',
        }
    } else if (column.property === 'key5' && row.key5 === '三级异常') {
        return {
            backgroundColor: '#FF0001',
            color: 'white',
        }
    }
}
const getTableData = ()=>{
    
}
//分页被点击
const pageChange = ({ current, size }) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}
const tableCheckedKeys = ref([])
 //多选事件
const tableSelectionChange = (rows) => {
    tableCheckedKeys.value = rows
}
const cancelModal = ref(false)
const cancleClick = (row)=>{
    cancelModal.value = true
}
const cancelTime = ref('')
const exportModal = ref(false)
const exportClick = (row)=>{
    exportModal.value = true
}
</script>

<style lang='scss' scoped>
.hc-layout-box{
    position: relative;
    height: 100%;
    width: 100%;
}
</style>

<style>
.anonaly-page .el-table {
   color:black
}
</style>