修改异常管理页面

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240402172355"
+  "value": "20240402173649"
 }

src/router/modules/base.js

@@ -28,7 +28,7 @@ export default [
                 component: () => import('~src/views/anomaly/index.vue'),
             },
             {
-                path: '/anomaly/progress?type=progress',
+                path: '/anomaly/progress',
                 name: 'anomaly-progress',
                 meta: { title: '项目进度异常管理' },
                 component: () => import('~src/views/anomaly/index.vue'),

src/views/anomaly/index.vue

@@ -2,64 +2,35 @@
     <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 v-model="searchForm.key1" class="w-60" placeholder="异常类型">
+                    <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 v-model="searchForm.key2" class="ml-2 w-60" placeholder="异常等级">
+                    <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 v-model="searchForm.key3" class="ml-2 w-60" placeholder="是否撤销">
+                    <el-option :value="1" label="是" />
+                    <el-option :value="2" label="否" />
                 </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" />
+                <el-input v-model="searchForm.queryValue" class="ml-2 w-60" clearable placeholder="请输入" />
+                <el-button class="ml-2" color=" #6DC2FF" type="primary">
+                    <hc-icon class="text-white" name="search" />
                     <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" />
+                <el-button :disabled="tableCheckedKeys.length === 0" class="ml-2" color=" #6DC2FF" type="info" @click="exportClick">
+                    <hc-icon class="text-white" name="download" />
                     <span class="text-white">批量导出</span>
                 </el-button>
             </template>
             <hc-table
-                class="anonaly-page-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"
+                :cell-style="tableCellStyle" :check-style="{ fixed: true, width: 29 }"
+                :column="tableColumn" :datas="tableData" :index-style="{ fixed: true, width: 60 }"
+                class="anonaly-page-table" is-check @selection-change="tableSelectionChange"
             >
                 <template #action="{ row }">
-                    <el-link type="danger" @click="cancleClick(row)">   <hc-icon name="arrow-go-back" />撤销</el-link>
+                    <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> -->
                     <el-link v-yes-com:[exportClick] type="success" yes-com-text="确定导出项目预警数据?">
                         <hc-icon name="download" />
@@ -68,67 +39,94 @@
                 </template>
             </hc-table>
             <template #action>
-                <HcPages :pages="searchForm" @change="pageChange" />
+                <hc-pages :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="撤销结束时间"
-            />
+            <el-alert :closable="false" class="mb-4" show-icon title="请选择撤销结束时间" type="warning" />
+            <el-date-picker v-model="cancelTime" placeholder="撤销结束时间" type="date" />
         </hc-dialog>
         <!-- 导出弹窗 -->
         <hc-dialog v-model="exportModal" title="导出">
-            <el-alert title="确定导出项目预警数据?" type="warning" show-icon class="export mb-4" :closable="false" />
+            <el-alert :closable="false" class="export mb-4" show-icon title="确定导出项目预警数据?" type="warning" />
         </hc-dialog>
     </div>
 </template>
 
 <script setup>
-   import { ref, watch } from 'vue'
-   //搜索表单
+import { onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+const useRoutes = useRoute()
+
+//渲染完成
+onMounted(() => {
+    setPageType(useRoutes.name)
+})
+
+//监听页面类型
+const pageType = ref('')
+watch(() => useRoutes.name, (name) => {
+    setPageType(name)
+})
+
+//设置页面类型
+const setPageType = (name) => {
+    if (name === 'anomaly-invest') {
+        pageType.value = 'invest'
+        console.log('当前为：项目投资异常管理')
+    } else if (name === 'anomaly-progress') {
+        pageType.value = 'progress'
+        console.log('当前为：项目进度异常管理')
+    }
+}
+
+//搜索表单
 const searchForm = ref({
-    queryValue: null, current: 1, size: 20, total: 0, key1:'', key2:'', key3:'',
+    queryValue: null, current: 1, size: 20, total: 0, key1: '', key2: '', key3: '',
 })
-const typeOptions = ref([
-    {
-        value: '1',
-        label: '项目进度异常',
-    },
+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([
     {
-        value: '2',
-        label: '项目投资异常',
+        key1: '成渝高速',
+        key2: '项目进度异常',
+        key3: '第一季度',
+        key4: '2021-3-1 14:31',
+        key5: '三级异常',
+        key6: '否',
+        key7: '',
     },
-])
-const levelOptions = ref([
     {
-        value: '1',
-        label: '三级',
+        key1: '成渝高速',
+        key2: '项目进度异常',
+        key3: '第一季度',
+        key4: '2021-3-1 14:31',
+        key5: '一级异常',
+        key6: '否',
+        key7: '',
     },
     {
-        value: '2',
-        label: '二级',
+        key1: '成渝铁路重庆站至江津段改造',
+        key2: '项目进度异常',
+        key3: '第一季度',
+        key4: '2021-3-1 14:31',
+        key5: '二级异常',
+        key6: '否',
+        key7: '',
     },
 ])
-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 === '二级异常') {
@@ -143,7 +141,7 @@ const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
         }
     }
 }
-const getTableData = ()=>{
+const getTableData = () => {
 
 }
 //分页被点击
@@ -153,12 +151,12 @@ const pageChange = ({ current, size }) => {
     getTableData()
 }
 const tableCheckedKeys = ref([])
- //多选事件
+//多选事件
 const tableSelectionChange = (rows) => {
     tableCheckedKeys.value = rows
 }
 const cancelModal = ref(false)
-const cancleClick = (row)=>{
+const cancleClick = (row) => {
     cancelModal.value = true
 }
 const cancelTime = ref('')
@@ -170,7 +168,7 @@ const exportClick = async (_, resolve) => {
 </script>
 
 <style lang='scss' scoped>
-.hc-layout-box{
+.hc-layout-box {
     position: relative;
     height: 100%;
     width: 100%;