指标体系、数据管理

src/types/components.d.ts

@@ -25,7 +25,7 @@ declare module 'vue' {
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
@@ -40,6 +40,7 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -52,14 +53,19 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
+    ElTimeline: typeof import('element-plus/es')['ElTimeline']
+    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     ExcelEditor: typeof import('./../components/ExcelEditor/index.vue')['default']
     FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
     FooterSection: typeof import('./../components/FooterSection/index.vue')['default']

src/views/comprehensiveGuarantee/MaterialReserveManagement/InboundDetails.vue

@@ -1,148 +1,235 @@
+<!--库存明细-->
+<!--企业画像-->
 <template>
-  <div class="common-dialog">
-    <div class="common-dialog-content">
-      <div class="common-dialog-title-box">
-        <h3 class="common-dialog-title">查看详情</h3>
-      </div>
-      <div class="common-dialog-box">
-        <el-form ref="eventFormRef" :model="formData" :rules="rules" label-width="120px">
-          <el-form-item label="仓库编号：" prop="warehouse_number">
-            <el-input v-model="formData.warehouse_number" placeholder="请输入仓库编号" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="采购单号：" prop="purchase_order_id">
-            <el-input v-model="formData.purchase_order_id" placeholder="请输入采购单号" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="是否捐赠（是、否）：" prop="is_donation">
-            <el-select v-model="formData.is_donation" placeholder="请选择是否捐赠">
-              <el-option label="是" value="是"></el-option>
-              <el-option label="否" value="否"></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="运单号：" prop="tracking_number">
-            <el-input v-model="formData.tracking_number" placeholder="请输入运单号" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="捐赠人联系电话：" prop="donor_phone">
-            <el-input v-model="formData.donor_phone" placeholder="请输入捐赠人联系电话" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="捐赠人姓名：" prop="donor_name">
-            <el-input v-model="formData.donor_name" placeholder="请输入捐赠人姓名" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="审核人：" prop="auditor">
-            <el-input v-model="formData.auditor" placeholder="请输入审核人" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="企业名称：" prop="company_name">
-            <el-input v-model="formData.company_name" placeholder="请输入企业名称" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="企业编号：" prop="company_id">
-            <el-input v-model="formData.company_id" placeholder="请输入企业编号" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="分级信息：" prop="grade_info">
-            <el-input v-model="formData.grade_info" placeholder="请输入分级信息" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="类型(1_调拨入库、2_归还入库、3_回收入库)：" prop="type">
-            <el-select v-model="formData.type" placeholder="请选择类型">
-              <el-option label="调拨入库" value="1"></el-option>
-              <el-option label="归还入库" value="2"></el-option>
-              <el-option label="回收入库" value="3"></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="供应商名称：" prop="supplier_name">
-            <el-input v-model="formData.supplier_name" placeholder="请输入供应商名称" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="创建时间：" prop="create_time">
-            <el-date-picker v-model="formData.create_time" type="datetime" placeholder="请选择创建时间" style="width: 468px;"></el-date-picker>
-          </el-form-item>
-
-          <el-form-item label="备注：" prop="remarks">
-            <el-input v-model="formData.remarks" placeholder="请输入备注" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="供应商编号：" prop="supplier_id">
-            <el-input v-model="formData.supplier_id" placeholder="请输入供应商编号" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="完成时间：" prop="completion_time">
-            <el-date-picker v-model="formData.completion_time" type="datetime" placeholder="请选择完成时间" style="width: 468px;"></el-date-picker>
-          </el-form-item>
-
-          <el-form-item label="计划完成时间：" prop="planned_completion_time">
-            <el-date-picker v-model="formData.planned_completion_time" type="datetime" placeholder="请选择计划完成时间" style="width: 468px;"></el-date-picker>
-          </el-form-item>
-
-          <el-form-item label="仓库名称：" prop="warehouse_name">
-            <el-input v-model="formData.warehouse_name" placeholder="请输入仓库名称" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="库房名称：" prop="storage_room_name">
-            <el-input v-model="formData.storage_room_name" placeholder="请输入库房名称" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="入库单号：" prop="inbound_order_id">
-            <el-input v-model="formData.inbound_order_id" placeholder="请输入入库单号" style="width: 468px;" />
-          </el-form-item>
-
-          <el-form-item label="新增时间：" prop="add_time">
-            <el-date-picker v-model="formData.add_time" type="datetime" placeholder="请选择新增时间" style="width: 468px;"></el-date-picker>
-          </el-form-item>
-        </el-form>
-        <div class="common-dialog-footer">
-          <el-button type="primary" @click="closeDialog">返回</el-button>
-        </div>
+  <div>
+    <div v-show="!BussinessAddState.show && !BussinessEditState.show" class="app-container">
+      <div>
+        <transition name="fade">
+          <div v-show="showSearch" class="mb-[10px]">
+            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+              <el-form-item :span="5" label="商品信息：" prop="area_code" label-width="auto">
+                <el-input v-model="queryParams.keyword1" placeholder="请输入物资ID" clearable @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item :span="5" label="出入库单号：" prop="keyword" label-width="auto">
+                <el-input v-model="queryParams.keyword2" placeholder="请输入出入库单号" clearable @keyup.enter="handleQuery" />
+              </el-form-item>
+              <el-form-item :span="5" prop="keyword" label-width="auto">
+                <el-select v-model="queryParams.type" placeholder="全部" clearable>
+                  <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              </el-form-item>
+              <el-form-item>
+                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+              </el-form-item>
+            </el-form>
+            <!--            <el-row :gutter="10" class="mb8">-->
+            <!--              <el-col :span="1.5">-->
+            <!--                <el-button type="primary" icon="Plus" @click="handleAdd">新建</el-button>-->
+            <!--              </el-col>-->
+            <!--              <el-col :span="1.5">-->
+            <!--                <el-button type="danger" plain :disabled="multiple" icon="Delete" @click="handleDelete(selectedRow)"> 删除 </el-button>-->
+            <!--              </el-col>-->
+            <!--            </el-row>-->
+          </div>
+        </transition>
+        <el-table
+          ref="multipleTable"
+          v-loading="loading"
+          :data="tableData"
+          border
+          :max-height="maxHeight"
+          style="width: 96%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" align="center" fixed />
+          <el-table-column label="商品信息" align="center" prop="goods_information" fixed show-overflow-tooltip />
+          <el-table-column label="出入库单号" align="center" prop="odd_numbers" show-overflow-tooltip />
+          <el-table-column label="入库/出库" align="center" prop="type" show-overflow-tooltip />
+          <el-table-column label="变动库存" align="center" prop="change_inventory" show-overflow-tooltip />
+          <el-table-column label="剩余库存" align="center" prop="remaining_inventory" show-overflow-tooltip />
+          <el-table-column label="创建时间" align="center" prop="created_time" show-overflow-tooltip />
+          <!--          <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width">-->
+          <!--            <template #default="scope">-->
+          <!--              <el-button type="text" class="common-btn-text-primary" @click="handleedit(scope.row)">编辑</el-button>-->
+          <!--              <el-button type="text" class="common-btn-text-primary" @click="handleDelete(scope.row)">移除</el-button>-->
+          <!--            </template>-->
+          <!--          </el-table-column>-->
+        </el-table>
+        <pagination v-show="total > 0" v-model:page="queryParams.page" v-model:limit="queryParams.pageSize" :total="total" @pagination="tableData" />
       </div>
     </div>
+    <BussinessAdd v-if="BussinessAddState.show" @close="handleCancel" />
+    <BussinessEdit v-if="BussinessEditState.show" :event-id="BussinessEditState.eventId" @close="handleCancel" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
-
-const emits = defineEmits(['close']);
-const props = defineProps<{
-  eventId: string | number;
-}>();
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { companyDelete, getCompanyList } from '@/api/riskPrevention/BusinessPortraits';
+import BussinessAdd from '@/views/riskPrevention/SafetyProductionManagement/BussinessAdd.vue';
+// import BussinessEdit from "./BussinessEdit.vue";
+import { to } from 'await-to-js';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const showSearch = ref(true);
+// const tableData = ref();
+const multiple = ref(true);
+const ids = ref<Array<number | string>>([]);
+const single = ref(true);
+// 定义响应式变量
+const loading = ref(false);
+const maxHeight = ref(window.innerHeight * 0.8);
+const total = ref();
+// 处理窗口大小变化
+const handleResize = () => {
+  maxHeight.value = window.innerHeight * 0.8;
+};
+const initFormData = reactive({
+  goods_information: '',
+  odd_numbers: '',
+  type: '',
+  change_inventory: '',
+  remaining_inventory: '',
+  created_time: ''
+});
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    page: '1',
+    pageSize: '10',
+    type: '',
+    keycode1: '',
+    keyword2: ''
+  },
+  selectedRow: null,
+  selectedRowKeys: []
+});
+const tableData = ref([
+  {
+    'goods_information': '苹果 iPhone 13 Pro Max 256GB 石墨色',
+    'odd_numbers': 'WH20230401001',
+    'type': '入库',
+    'change_inventory': 50,
+    'remaining_inventory': 200,
+    'created_time': '2023-04-01T10:30:00Z'
+  },
+  {
+    'goods_information': '华为 MateBook X Pro 笔记本电脑',
+    'odd_numbers': 'WH20230401002',
+    'type': '出库',
+    'change_inventory': -10,
+    'remaining_inventory': 190,
+    'created_time': '2023-04-01T11:15:00Z'
+  },
+  {
+    'goods_information': '小米 Redmi Note 11 Pro+ 5G 手机',
+    'odd_numbers': 'WH20230401003',
+    'type': '入库',
+    'change_inventory': 30,
+    'remaining_inventory': 150,
+    'created_time': '2023-04-01T13:45:00Z'
+  },
+  {
+    'goods_information': '三星 Galaxy S22 Ultra 5G 手机',
+    'odd_numbers': 'WH20230401004',
+    'type': '出库',
+    'change_inventory': -5,
+    'remaining_inventory': 55,
+    'created_time': '2023-04-01T15:00:00Z'
+  },
+  {
+    'goods_information': '戴尔 XPS 13 9310 笔记本电脑',
+    'odd_numbers': 'WH20230402001',
+    'type': '入库',
+    'change_inventory': 15,
+    'remaining_inventory': 30,
+    'created_time': '2023-04-02T09:00:00Z'
+  }
+]);
+
+const { queryParams, form } = toRefs(data);
+
+const type = [
+  { value: '', label: '全部' },
+  { value: '0', label: '出库' },
+  { value: '1', label: '入库' }
+];
+
+const handleQuery = () => {
+  queryParams.value.page = 1;
+  // fetchWorkrData();
+};
+const resetQuery = () => {
+  queryParams.value = { page: 1, pageSize: 10, area_code: '', keycode: '' };
+  handleQuery();
+};
+const BussinessAddState = reactive({
+  show: false // 初始化show为false
+});
 
-// 模拟的数据
-const formData = ref({
-  warehouse_number: 'WH001', // 仓库编号
-  purchase_order_id: 'PO123456', // 采购单号
-  is_donation: '否', // 是否捐赠（是、否）
-  tracking_number: 'TN789012', // 运单号
-  donor_phone: '13800138000', // 捐赠人联系电话
-  donor_name: '张三', // 捐赠人姓名
-  auditor: '李四', // 审核人
-  company_name: '某某企业有限公司', // 企业名称
-  company_id: 'ENT001', // 企业编号
-  grade_info: 'A级', // 分级信息
-  type: '1', // 类型(1_调拨入库、2_归还入库、3_回收入库)
-  supplier_name: '供应商甲', // 供应商名称
-  create_time: '2023-10-01T08:00:00Z', // 创建时间（ISO 8601格式）
-  remarks: '这是备注信息', // 备注
-  supplier_id: 'SPL001', // 供应商编号
-  completion_time: '2023-10-05T16:00:00Z', // 完成时间
-  planned_completion_time: '2023-10-04T16:00:00Z', // 计划完成时间
-  warehouse_name: '一号仓库', // 仓库名称
-  storage_room_name: 'A区库房', // 库房名称
-  inbound_order_id: 'IO765432', // 入库单号
-  add_time: '2023-09-30T10:00:00Z' // 新增时间
+const BussinessEditState = reactive({
+  show: false
 });
 
-const closeDialog = () => {
-  emits('close');
+const handleAdd = () => {
+  BussinessAddState.show = true;
+};
+
+const handleDelete = async (row) => {
+  let id = [];
+  if (row) {
+    id = [row.id];
+  } else {
+    id = ids.value;
+  }
+  const [err] = await to(proxy?.$modal.confirm('是否确认删除选择的数据项？') as any);
+  if (!err) {
+    await companyDelete(id);
+    proxy.$modal.msgSuccess('删除成功');
+    fetchWorkrData();
+  }
+};
+const handleedit = (row) => {
+  BussinessEditState.eventId = row.id + '';
+  BussinessEditState.show = true;
+};
+
+const handleCancel = () => {
+  BussinessAddState.show = false;
+  BussinessEditState.show = false;
+};
+
+const fetchWorkrData = () => {
+  // loading.value = true;
+  // getCompanyList(queryParams.value)
+  //   .then((res) => {
+  //     tableData.value = res.data;
+  //     total.value = res.total;
+  //   })
+  //   .finally(() => {
+  //     loading.value = false;
+  //   });
 };
-</script>
 
-<style scoped></style>
+const handleSelectionChange = (selection) => {
+  ids.value = selection.map((item) => item.id);
+  selectedRow.value = selection.length === 1 ? selection[0] : null;
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+  fetchWorkrData();
+});
 
+// 在组件卸载前移除窗口大小变化监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
 
+<style lang="scss" scoped></style>

src/views/dataManagement/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="container">
+    <div class="search-bar">
+      <transition name="fade">
+        <div v-show="showSearch" class="mb-[10px]">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-row gutter="{20}">
+              <el-col :span="5">
+                <el-form-item style="width: 2000px" label="选择数据：" prop="planType" label-width="auto">
+                  <el-select v-model="queryParams.data" placeholder="选择数据">
+                    <el-option v-for="item in type" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12" class="info-col">
+                <div class="info">
+                  <span>数据更新：{{ dataUpdateTime }}</span>
+                  <span class="spacer">数源单位：{{ dataSourceUnit }}</span>
+                </div>
+              </el-col>
+            </el-row>
+          </el-form>
+        </div>
+      </transition>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery">录入</el-button>
+        <input ref="excelFileInput" type="file" style="display: none" accept=".xlsx, .xls" @change="handleExcelUpload" />
+        <el-button class="spacer" type="primary" icon="el-icon-upload2" @click="triggerExcelUpload">批量导入</el-button>
+      </el-form-item>
+    </div>
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column type="selection" width="55"></el-table-column>
+      <el-table-column prop="id" label="id" width="50"></el-table-column>
+      <el-table-column prop="name" label="工程名称"></el-table-column>
+      <el-table-column prop="unit" label="建设单位"></el-table-column>
+      <el-table-column prop="maintainUnit" label="维护单位"></el-table-column>
+      <el-table-column prop="engineer" label="人防专业监理工程师"></el-table-column>
+      <el-table-column prop="location" label="建设地点"></el-table-column>
+      <el-table-column prop="operation" label="操作方式"></el-table-column>
+      <el-table-column prop="plannedArea" label="应建人防地下室面积（㎡）"></el-table-column>
+      <el-table-column prop="actualArea" label="实建人防地下室面积（㎡）"></el-table-column>
+      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-text v-hasPermi="['system:menu:View']" class="common-btn-text-primary" @click="viewDetails(scope.row)">查看</el-text>
+          <el-text v-hasPermi="['system:menu:edit']" class="common-btn-text-primary" @click="editItem(scope.row)">修改</el-text>
+          <el-text v-hasPermi="['system:menu:remove']" class="common-btn-text-danger" @click="removeItem(scope.row)">删除</el-text>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="pagination">
+      <el-pagination
+        background
+        layout="prev, pager, next, jumper"
+        :total="total"
+        :page-size="pageSize"
+        :class="paginationRight"
+        @current-change="handlePageChange"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ElFormItem } from 'element-plus';
+
+const queryParams = ref({
+  search: ''
+});
+
+const type = [{ value: '', label: '在建工地' }];
+const showSearch = ref(true);
+const excelFileInput = ref(null);
+
+const triggerExcelUpload = () => {
+  // 触发文件输入的点击事件
+  excelFileInput.value.click();
+};
+
+const tableData = ref([
+  {
+    id: 1,
+    name: '光华北路人防工程',
+    unit: '茂名市应急管理局',
+    maintainUnit: '茂名市应急管理局',
+    engineer: '',
+    location: '茂名市茂南区光华北路668号',
+    operation: '',
+    plannedArea: 122,
+    actualArea: 123,
+    updateTime: '2023/12/12 12:13'
+  },
+  {
+    id: 2,
+    name: '光华北路人防工程2',
+    unit: '茂名市应急管理局',
+    maintainUnit: '茂名市应急管理局',
+    engineer: '',
+    location: '茂名市茂南区光华北路668号',
+    operation: '',
+    plannedArea: 122,
+    actualArea: 123,
+    updateTime: '2023/12/12 12:13'
+  },
+  {
+    id: 3,
+    name: '光华北路人防工程3',
+    unit: '茂名市应急管理局',
+    maintainUnit: '茂名市应急管理局',
+    engineer: '',
+    location: '茂名市茂南区光华北路668号',
+    operation: '',
+    plannedArea: 122,
+    actualArea: 123,
+    updateTime: '2023/12/12 12:13'
+  }
+]);
+
+const total = ref(30); // 总条目数
+const pageSize = ref(10); // 每页显示条目数
+
+const dataUpdateTime = ref('2023/12/12 12:13');
+const dataSourceUnit = ref('茂名市应急管理局');
+
+const handleQuery = () => {
+  console.log('搜索', queryParams.value);
+};
+
+const handleExcelUpload = (event) => {
+  const files = event.target.files;
+  if (files.length) {
+    const file = files[0];
+    // 这里可以添加前端的文件验证逻辑，比如文件类型和大小
+
+    // 假设有一个后端API处理Excel文件上传
+    const formData = new FormData();
+    formData.append('file', file);
+
+    // 发送请求到后端API
+    fetch('YOUR_BACKEND_API_URL', {
+      // 替换为你的后端API URL
+      method: 'POST',
+      body: formData
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('文件上传成功', data);
+        // 处理上传成功的逻辑
+      })
+      .catch((error) => {
+        console.error('文件上传失败', error);
+        // 处理上传失败的逻辑
+      });
+  }
+};
+
+const viewDetails = (item) => {
+  console.log('查看详情', item);
+};
+
+const editItem = (item) => {
+  console.log('修改', item);
+};
+
+const removeItem = (item) => {
+  console.log('移除', item);
+};
+
+const handlePageChange = (page) => {
+  console.log('当前页码', page);
+};
+</script>
+
+<style scoped>
+.container {
+  max-width: 2200px;
+  margin: 0 auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.info {
+  display: flex;
+  align-items: center;
+}
+
+.spacer {
+  margin-left: 50px;
+}
+</style>

src/views/riskPrevention/SafetyProductionManagement/IndexSystem.vue

@@ -1,11 +1,95 @@
+<template>
+  <div class="container">
+    <div class="search-bar">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item>
+          <el-input v-model="queryParams.search" placeholder="请输入模型名称"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="card-container">
+      <div v-for="(item, index) in cards" :key="index" class="card">
+        <div class="icon-placeholder">icon</div>
+        <div class="card-title">{{ item.title }}</div>
+        <el-button type="primary" @click="viewDetails(item)">查看详情</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
+import { ref } from 'vue';
+
+const queryParams = ref({
+  search: ''
+});
+
+const cards = ref([
+  { title: '安全生产综合指数风险评估模型' },
+  { title: '风险指数风险评估模型' },
+  { title: '强度评估模型' },
+  { title: '减灾能力评估模型' }
+]);
+
+const handleQuery = () => {
+  console.log('搜索', queryParams.value.search);
+};
 
+const resetQuery = () => {
+  queryParams.value.search = '';
+};
+
+const viewDetails = (item: any) => {
+  console.log('查看详情', item);
+};
 </script>
 
-<template>
-<!--指数体系-->
-</template>
+<style scoped>
+.container {
+  max-width: 2200px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
+.card-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.card {
+  width: 23%;
+  background-color: #f5f5f5;
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 20px;
+  text-align: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
 
-<style scoped lang="scss">
+.icon-placeholder {
+  background-color: #e0e0e0;
+  width: 50px;
+  height: 50px;
+  margin: 0 auto 10px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
 
+.card-title {
+  margin-bottom: 10px;
+}
 </style>