优化代码

zrch-risk-client-39/src/views/metric/MetricReport.api.ts

@@ -20,6 +20,8 @@ enum Api {
 
   batchSaveApproval='/metric/dataApproval/batchSaveApproval',
 
+  queryByMtrcNo = '/metric/metricMonitorSet/queryByMtrcNo',
+
 }
 /**
  * 导出api
@@ -40,8 +42,10 @@ export const list = (params) =>
 export const queryList = (params) =>
   defHttp.get({url: Api.queryList, params});
 
-export const queryAllList = (params) =>
-defHttp.get({url: Api.queryAllList, params});
+export const queryAllList = (params) =>defHttp.get({url: Api.queryAllList, params});
+
+export const queryByMtrcNo = (params) =>defHttp.get({url: Api.queryByMtrcNo, params});
+
 
 /**
  * 删除单个

zrch-risk-client-39/src/views/metric/approval/index.vue

@@ -7,6 +7,30 @@
         </a-card>
       </a-col>
       <a-col :span="19">
+        <!-- 时间搜索表单 -->
+        <div style="margin-bottom: 16px; padding: 12px; background: #f9f9f9; border-radius: 4px;">
+          <a-row :gutter="16" align="middle">
+            <a-col :span="14">
+              <div style="display: flex; align-items: center; gap: 16px;">
+                <div style="display: flex; align-items: center;">
+                  <span style="margin-right: 8px;">开始日期：</span>
+                  <a-date-picker v-model:value="searchForm.stFillTime" style="width: 150px;" />
+                </div>
+                <div style="display: flex; align-items: center;">
+                  <span style="margin-right: 8px;">结束日期：</span>
+                  <a-date-picker v-model:value="searchForm.endFillTime" style="width: 150px;" />
+                </div>
+              </div>
+            </a-col>
+            <a-col :span="10">
+              <a-space :size="5" style="margin-left:0px;">
+                <a-button type="primary" @click="handleSearch">查询</a-button>
+                <a-button @click="resetSearch">重置</a-button>
+              </a-space>
+            </a-col>
+          </a-row>
+        </div>
+        
         <vxe-grid v-bind="gridOptions" ref="tableRef">
           <template #toolbarButtons>
             <div style="margin:2px 20px;size:15px">指标填报列表：</div>
@@ -22,18 +46,31 @@
               <vxe-button mode="text" status="primary" @click="saveApproval(row.reportId,1)">通过</vxe-button>
               <vxe-button mode="text" status="error"  @click="saveApproval(row.reportId,2)">退回</vxe-button>
           </template>
-          
+          <template #mtrcName="{ row }">
+            <a @click="showChartModal(row)" style="color: #409eff; cursor: pointer;">
+              {{ row.mtrcName }}
+            </a>
+          </template>
         </vxe-grid>
       </a-col>
   </a-row>
+  
+  <!-- 图表弹窗组件 -->
+  <MetricChartModal
+    v-model:visible="chartModalVisible"
+    :title="chartModalTitle"
+    :row="currentRow"
+    @cancel="handleModalClose"
+  />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, onMounted,ref } from 'vue'
+import { reactive, onMounted, ref } from 'vue'
 import type { VxeGridProps } from 'vxe-table'
 import { dataApprovalList,batchSaveApproval } from '../MetricReport.api';
 import Left from './left.vue'
+import MetricChartModal from './components/MetricChartModal.vue'
 
 interface RowVO {
   id: number
@@ -46,6 +83,21 @@ interface RowVO {
 
 const tableRef = ref()
 const totalRecords = ref()
+
+// 图表弹窗
+const chartModalVisible = ref(false)
+const chartModalTitle = ref('')
+const currentRow = ref<any>(null)
+
+// 搜索表单
+const searchForm = reactive({
+  stFillTime: null,
+  endFillTime: null
+})
+
+// 左侧筛选条件
+const formData = reactive({})
+
 const gridOptions = reactive<VxeGridProps<RowVO>>({
   border: true,
   showOverflow: true,
@@ -71,7 +123,6 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
         return {
           color: 'red'
         }
-      
       } else if (row.appSta == '未审批') {
         return {
           backgroundColor: ''
@@ -86,7 +137,6 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
         return {
           color: '#FA8C16'
         }
-      
       } else if (row.riskLevel == '高风险') {
         return {
           color: '#CF1322'
@@ -100,7 +150,7 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
     
     { field: 'reportId', title: 'id', visible:false },
     { field: 'mtrcNo', title: '指标编码', sortable: true },
-    { field: 'mtrcName', title: '指标名称', showOverflow: true },
+    { field: 'mtrcName', title: '指标名称', showOverflow: true, slots: { default: 'mtrcName' } },
     { field: 'collFreq', title: '采集频率', },
     { field: 'timeName', title: '填报时间' },
     { field: 'riskLevel', title: '风险等级' },
@@ -122,10 +172,20 @@ const gridOptions = reactive<VxeGridProps<RowVO>>({
   data: []
 })
 
-async function setDataList(params) {
+async function setDataList(params = {}) {
+  // 存储左侧筛选条件
+  Object.assign(formData, params)
+  
+  // 合并时间搜索条件
+  const searchParams = {
+    ...params,
+    stFillTime: searchForm.stFillTime,
+    endFillTime: searchForm.endFillTime
+  }
+  
   gridOptions.loading = true
   try {
-    const res = await dataApprovalList(params);
+    const res = await dataApprovalList(searchParams);
     gridOptions.data = res || []
     totalRecords.value = res.length
   } catch (error) {
@@ -169,10 +229,34 @@ async function getSelectIds() {
   return ids;
 }
 
+// 处理搜索
+const handleSearch = async () => {
+  await setDataList(formData)
+}
+
+// 重置搜索
+const resetSearch = () => {
+  searchForm.stFillTime = null
+  searchForm.endFillTime = null
+  setDataList({})
+}
+
 onMounted(async () => {
   await setDataList({});
 })
 
+// 显示图表弹窗
+const showChartModal = (row) => {
+  currentRow.value = row
+  chartModalTitle.value = `指标详情 - ${row.mtrcName}`
+  chartModalVisible.value = true
+}
+
+// 处理弹窗关闭
+const handleModalClose = () => {
+  chartModalVisible.value = false
+}
+
 defineExpose({
   setDataList,
 })
@@ -211,4 +295,32 @@ defineExpose({
   margin: 0 4px;
 }
 
+:deep(.ant-modal) {
+  top: 20px;
+}
+
+:deep(.ant-modal-content) {
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+
+:deep(.ant-modal-body) {
+  flex: 1;
+  overflow: auto;
+  padding: 24px;
+}
+
+:deep(.ant-tabs-tabpane) {
+  transition: none !important;
+  height: 100%;
+}
+
+:deep(.ant-table-wrapper) {
+  height: 100%;
+}
+
+:deep(.ant-table-body) {
+  overflow-y: auto !important;
+}
 </style>
\ No newline at end of file

zrch-risk-client-39/src/views/metric/approval/left.vue

@@ -122,6 +122,35 @@
           </div>
         </template>
       </vxe-form-item>
+      
+
+      <vxe-form-item title="是否统计" field="metrictype" span="24" :item-render="{}" title-overflow>
+        <template #default="params">
+          <div class="button-group">
+            <vxe-button
+              :mode="params.data.metrictype === undefined ? 'button' : 'text'"
+              :status="params.data.metrictype === undefined ? 'primary' : ''"
+                @click="handleButtonClick('mtrcTp', undefined, params)"
+            >
+              全部
+            </vxe-button>
+            <vxe-button
+              :mode="params.data.mtrcTp === '1' ? 'button' : 'text'"
+              :status="params.data.mtrcTp === '1' ? 'primary' : ''"
+              @click="handleButtonClick('mtrcTp', '1', params)"
+            >
+              统计
+            </vxe-button>
+            <vxe-button
+              :mode="params.data.metrictype === '2' ? 'button' : 'text'"
+              :status="params.data.mtrcTp === '2' ? 'primary' : ''"
+              @click="handleButtonClick('mtrcTp', '2', params)"
+            >
+              不统计
+            </vxe-button>
+          </div>
+        </template>
+      </vxe-form-item>
       <vxe-form-item title="审批状态" field="appSta" span="24" :item-render="{}" title-overflow>
         <template #default="params">
           <div class="button-group">
@@ -132,13 +161,6 @@
             >
               全部
             </vxe-button>
-            <vxe-button
-              :mode="params.data.appSta === '0' ? 'button' : 'text'"
-              :status="params.data.appSta === '0' ? 'primary' : ''"
-              @click="handleButtonClick('appSta', '0', params)"
-            >
-              未审批
-            </vxe-button>
             <vxe-button
               :mode="params.data.appSta === '1' ? 'button' : 'text'"
               :status="params.data.appSta === '1' ? 'primary' : ''"
@@ -179,7 +201,8 @@ interface FormDataVO {
   collMethod:number|undefined
   collFreq:number|undefined
   mtrcCtp:string|undefined
-  appSta:string|undefined
+  appSta:string|undefined,
+  mtrcTp:string|undefined,
 
 }
 
@@ -198,11 +221,14 @@ const formData = ref<FormDataVO>({
   collMethod:undefined,
   collFreq:undefined,
   mtrcCtp:undefined,
-  appSta:undefined
+  appSta:undefined,
+  mtrcTp:undefined,
+
 })
 
 // 处理按钮点击事件
 const handleButtonClick = (field: keyof FormDataVO, value: any, params: any) => {
+  
   // 如果点击已选中的按钮，则取消选择
   if (formData.value[field] === value) {
     formData.value[field] = undefined;