|
|
@@ -1,11 +1,172 @@
|
|
|
<template>
|
|
|
- <div>异常管理</div>
|
|
|
+ <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">
|
|
|
+ <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="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: '项目名称' },
|
|
|
+ { key: 'key2', name: '异常类型' },
|
|
|
+ { key: 'key3', name: '季度' },
|
|
|
+ { key: 'key4', name: '异常时间' },
|
|
|
+ { key: 'key5', name: '异常等级' },
|
|
|
+ { key: 'key6', name: '是否撤销' },
|
|
|
+ { key: 'key7', name: '撤销开始时间' },
|
|
|
+ { key: 'key8', name: '撤销结束时间' },
|
|
|
+ { key: 'action', name: '操作' },
|
|
|
+ ]
|
|
|
+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 scoped lang="scss">
|
|
|
-
|
|
|
+<style lang='scss' scoped>
|
|
|
+.hc-layout-box{
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|
