完成页面样式

src/api/modules/wca/mockData.ts

@@ -0,0 +1,17 @@
+import tableData from '@/assets/mock/tableData.json'
+
+export const getdataManageListApi = () => {
+  return tableData.dataManageList
+}
+
+export const getmodelManageListApi = () => {
+  return tableData.modelManageList
+}
+
+export const getimgDataApi = () => {
+  return tableData.imgData
+}
+
+// export const getTransferImgList2 = () => {
+//   return tableData.transferImgList2
+// }

src/assets/mock/tableData.json

@@ -0,0 +1,137 @@
+{
+  "dataManageList": [
+    {
+      "dataName": "xx电视机",
+      "type": "电视机",
+      "status": "Y",
+      "createTime": "2024-05-06 10:22:09",
+      "brand-model": "xx品牌xx型号"
+    },
+    {
+      "dataName": "xx电脑",
+      "type": "电脑",
+      "status": "Y",
+      "createTime": "2024-05-09 12:33:28",
+      "brand-model": "xx品牌xx型号"
+    },
+    {
+      "dataName": "xx冰箱",
+      "type": "冰箱",
+      "status": "N",
+      "createTime": "暂无",
+      "brand-model": "暂无"
+    },
+    {
+      "dataName": "zz",
+      "type": "电脑",
+      "status": "Y",
+      "createTime": "2023-05-09 14:02:11",
+      "brand-model": "xx品牌xx型号"
+    },
+    {
+      "dataName": "mm电视机",
+      "type": "电视机",
+      "status": "N",
+      "createTime": "暂无",
+      "brand-model": "暂无"
+    },
+    {
+      "dataName": "xx洗衣机",
+      "type": "洗衣机",
+      "status": "Y",
+      "createTime": "2023-05-13 17:22:09",
+      "brand-model": "xx品牌xx型号"
+    },
+    {
+      "dataName": "xx洗衣机",
+      "type": "洗衣机",
+      "status": "N",
+      "createTime": "暂无",
+      "brand-model": "暂无"
+    }
+  ],
+  "modelManageList": [
+    {
+      "name": "xx模型",
+      "url": "public/model/xx",
+      "type": "xx类型",
+      "modelParams": "模型参数1、模型参数2....",
+      "dataParams": "数据参数1、数据参数2...."
+    },
+    {
+      "name": "eee模型",
+      "url": "public/model/eee",
+      "type": "xx类型",
+      "modelParams": "参数1、参数2....",
+      "dataParams": "参数1、参数2...."
+    }
+  ],
+  "imgData": [
+    {
+      "view": "主视图",
+      "url": "computer.png"
+    },
+    {
+      "view": "后视图",
+      "url": "computer.png"
+    },
+    {
+      "view": "左视图",
+      "url": "computer.png"
+    },
+    {
+      "view": "右视图",
+      "url": "computer.png"
+    },
+    {
+      "view": "俯视图",
+      "url": "computer.png"
+    },
+    {
+      "view": "仰视图",
+      "url": "computer.png"
+    }
+  ],
+  "transferImgList2": [
+    {
+      "label": "originalImage/0000001_02999_d_0000005.jpg",
+      "key": "111"
+    },
+    {
+      "label": "originalImage/0000001_03499_d_0000006.jpg",
+      "key": "112"
+    },
+    {
+      "label": "originalImage/0000001_03999_d_0000007.jpg",
+      "key": "113"
+    },
+    {
+      "label": "originalImage/0000001_04527_d_0000008.jpg",
+      "key": "114"
+    },
+    {
+      "label": "originalImage/0000001_05249_d_0000009.jpg",
+      "key": "115"
+    },
+    {
+      "label": "originalImage/0000001_05499_d_0000010.jpg",
+      "key": "116"
+    },
+    {
+      "label": "originalImage/0000001_05999_d_0000011.jpg",
+      "key": "117"
+    },
+    {
+      "label": "originalImage/0000001_07999_d_0000012.jpg",
+      "key": "118"
+    },
+    {
+      "label": "originalImage/0000001_08414_d_0000013.jpg",
+      "key": "119"
+    },
+    {
+      "label": "originalImage/0000021_00000_d_0000001.jpg",
+      "key": "120"
+    }
+  ]
+}

src/routers/modules/routerData.json

@@ -7,7 +7,7 @@
       "component": "index",
       "hidden": false,
       "meta": {
-        "icon": "",
+        "icon": "el-icon-s-data",
         "title": "首页",
         "link": "",
         "full": false,
@@ -15,6 +15,72 @@
         "noCache": true
       }
     },
+    {
+      "path": "/basicManage",
+      "hidden": false,
+      "children": [
+        {
+          "path": "/basicManage/dataManage",
+          "name": "dataManage",
+          "component": "wca/basicManage/dataManage/index",
+          "meta": {
+            "title": "数据管理",
+            "icon": "el-icon-date",
+            "link": "",
+            "full": false,
+            "affix": false,
+            "noCache": true
+          }
+        },
+        {
+          "path": "/basicManage/modelManage",
+          "name": "modelManage",
+          "component": "wca/basicManage/modelManage/index",
+          "meta": {
+            "title": "模型管理",
+            "icon": "el-icon-date",
+            "link": "",
+            "full": false,
+            "affix": false,
+            "noCache": true
+          }
+        }
+      ],
+      "meta": {
+        "icon": "el-icon-monitor",
+        "title": "基础管理"
+      }
+    },
+    {
+      "path": "/wca/wcaPage/results",
+      "name": "results",
+      "component": "wca/wcaPage/results",
+      "hidden": true,
+      "meta": {
+        "icon": "",
+        "title": "算法结果",
+        "activeMenu": "/index",
+        "link": "",
+        "full": false,
+        "affix": false,
+        "noCache": false
+      }
+    },
+    {
+      "path": "/wca/wcaPage/assessment",
+      "name": "assessment",
+      "component": "wca/wcaPage/assessment",
+      "hidden": true,
+      "meta": {
+        "icon": "",
+        "title": "估价结果",
+        "activeMenu": "/index",
+        "link": "",
+        "full": false,
+        "affix": false,
+        "noCache": false
+      }
+    },
     {
       "path": "/system/dict-data/index/:dictId",
       "name": "dictData",

src/views/index.vue

@@ -1,136 +1,68 @@
 <template>
   <div class="card content-box">
-    <ProForm :items-options="items" :model="model">
-      <template #username1="{ formModel }">
-        <el-input v-model="formModel.username1" />
-      </template>
-      <template #transfer1="{ formModel }">
-        <el-transfer v-model="formModel.transfer1" :data="dataT" />
+    <ProForm :items-options="items" :model="model" :form-options="_formOptions">
+      <template #image="{}">
+        <div v-for="(item, index) in imgData" :key="index" class="block">
+          <span>{{ item.view }}</span>
+          <el-image class="img" :src="getImageUrl(item.url)" />
+        </div>
       </template>
     </ProForm>
+    <el-button class="btn" type="primary" @click="handleBegin">开始</el-button>
   </div>
 </template>
 
 <script setup lang="ts" name="Index">
+import { useRouter } from 'vue-router'
 import ProForm from '@/components/ProForm/index.vue'
+import { getimgDataApi } from '@/api/modules/wca/mockData'
+const router = useRouter()
+const getImageUrl = name => {
+  return new URL(`../assets/images/${name}`, import.meta.url).href
+}
+const handleBegin = () => {
+  router.push({ path: '/wca/wcaPage/results' })
+}
+const imgData = getimgDataApi()
 let model = {
-  username: 'ssss',
-  username1: '自定义的插槽',
-  sdsds: '1',
-  sdssssds: ['1']
+  selectType: '2',
+  selectFile: '1'
 }
-const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']
-
-const optionsData = Array.from({ length: 1000 }).map((_, idx) => ({
-  value: `Option ${idx + 1}`,
-  label: `${initials[idx % 10]}${idx}`
-}))
-const dataT = [
+const enumData = [
   {
-    key: 1,
-    label: '社么',
-    disabled: false
+    label: '电视',
+    value: '1'
   },
   {
-    key: 2,
-    label: 'wan',
-    disabled: false
+    label: '电脑',
+    value: '2'
   },
   {
-    key: 3,
-    label: '伊尔',
-    disabled: true
-  }
-]
-
-const treeData = [
-  {
-    label: '选项1',
-    value: '1',
-    children: [
-      {
-        label: '选项1-1',
-        value: '1-1'
-      },
-      {
-        label: '选项1-2',
-        value: '1-2'
-      }
-    ]
+    label: '冰箱',
+    value: '3'
   },
   {
-    label: '选项2',
-    value: '2'
+    label: '洗衣机',
+    value: '4'
   }
 ]
-const enumData = [
+const enumData1 = [
   {
-    label: '选项1',
+    label: 'xx电脑',
     value: '1'
   },
   {
-    label: '选项2',
+    label: 'mm电脑',
     value: '2'
-  },
-  {
-    label: '选项3',
-    value: '3'
   }
 ]
+const _formOptions = {
+  hasFooter: false
+}
 let items: ProForm.ItemsOptions[] = [
   {
-    label: '单行输入框',
-    prop: 'username',
-    rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
-    compOptions: {
-      elTagName: 'input',
-      clearable: true,
-      placeholder: '请输入用户名'
-    }
-  },
-  {
-    label: '多行输入框',
-    prop: 'usernames',
-    rules: [{ required: true, message: '请选择步长', trigger: 'blur' }],
-    compOptions: {
-      elTagName: 'input',
-      type: 'textarea',
-      clearable: true,
-      placeholder: '请输入用户名'
-    }
-  },
-  {
-    label: '插槽',
-    prop: 'username1',
-    required: true,
-    tooltip: '这是自定义插槽',
-    compOptions: {
-      elTagName: 'slot',
-      clearable: true,
-      placeholder: '请输入用户名'
-    }
-  },
-  {
-    label: '单选',
-    prop: 'sdsds',
-    required: true,
-    compOptions: {
-      elTagName: 'radio-group',
-      enum: enumData
-    }
-  },
-  {
-    label: '复选',
-    prop: 'sdssssds',
-    required: true,
-    compOptions: {
-      elTagName: 'checkbox-group',
-      enum: enumData
-    }
-  },
-  {
-    label: '下拉',
-    prop: 'select',
+    label: '选择类型',
+    prop: 'selectType',
     required: true,
     compOptions: {
       elTagName: 'select',
@@ -138,105 +70,46 @@ let items: ProForm.ItemsOptions[] = [
     }
   },
   {
-    label: '下拉树',
-    prop: 'treeSelect',
+    label: '选择文件',
+    prop: 'selectFile',
     required: true,
     compOptions: {
-      elTagName: 'tree-select',
-      enum: treeData
+      elTagName: 'select',
+      enum: enumData1
     }
   },
   {
-    label: '虚拟下拉',
-    prop: 'selectV2',
+    label: '图片',
+    prop: 'image',
     required: true,
     compOptions: {
-      elTagName: 'select-v2',
-      enum: optionsData
-    }
-  },
-  {
-    label: '级联',
-    prop: 'jilian',
-    compOptions: {
-      elTagName: 'cascader',
-      enum: treeData,
-      props: {
-        expandTrigger: 'hover' as const
-      }
-    }
-  },
-  {
-    label: '日期',
-    prop: 'datePicker',
-    compOptions: {
-      elTagName: 'date-picker',
-      type: 'date'
-    }
-  },
-  {
-    label: '日期范围',
-    prop: 'datePicker',
-    compOptions: {
-      elTagName: 'date-picker',
-      type: 'daterange',
-      rangeSeparator: 'To',
-      startPlaceholder: 'Start date',
-      endPlaceholder: 'End date'
-    }
-  },
-  {
-    label: '数字框',
-    prop: 'iNumber',
-    compOptions: {
-      elTagName: 'input-number',
-      min: 1
-    }
-  },
-  {
-    label: '评分',
-    prop: 'rate',
-    compOptions: {
-      elTagName: 'rate'
-    }
-  },
-  {
-    label: '滑块',
-    prop: 'slider',
-    compOptions: {
-      elTagName: 'slider',
-      step: 10
-    }
-  },
-  {
-    label: '开关',
-    prop: 'switch',
-    compOptions: {
-      elTagName: 'switch'
-    }
-  },
-  {
-    label: '时间选择器',
-    prop: 'timePicker',
-    compOptions: {
-      elTagName: 'time-picker'
-    }
-  },
-  {
-    label: '时间下拉',
-    prop: 'timeSelect',
-    compOptions: {
-      elTagName: 'time-select'
-    }
-  },
-  {
-    label: '穿梭框',
-    prop: 'transfer1',
-    compOptions: {
-      elTagName: 'slot'
+      elTagName: 'slot',
+      clearable: true
     }
   }
 ]
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.content-box {
+  align-items: start;
+}
+.block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 16%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.img {
+  width: 150px;
+  height: 100%;
+  margin: 10px;
+}
+.btn {
+  align-self: flex-end;
+  margin: 30px 100px 0px 0px;
+}
+</style>

src/views/wca/basicManage/dataManage/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      title="数据列表"
+      row-key="menuId"
+      :columns="columns"
+      :pagination="true"
+      :data="dataManageList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader>
+        <el-button type="primary" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')">新增</el-button>
+      </template>
+      <!-- 菜单图标 -->
+      <template #icon="scope">
+        <el-icon :size="18">
+          <component :is="scope.row.icon"></component>
+        </el-icon>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button type="primary" link :icon="EditPen" v-auth="['system:menu:edit']" @click="openDialog(2, '菜单编辑', scope.row)"> 编辑 </el-button>
+        <el-button type="primary" link :icon="CirclePlus" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')"> 查看 </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['system:menu:remove']" @click="deleteMenu(scope.row)"> 删除 </el-button>
+      </template>
+    </ProTable>
+    <FormDialog ref="formDialogRef" />
+  </div>
+</template>
+
+<script setup lang="tsx" name="dataManage">
+import { ref, reactive } from 'vue'
+import { useHandleData } from '@/hooks/useHandleData'
+import ProTable from '@/components/ProTable/index.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import { Delete, EditPen, CirclePlus } from '@element-plus/icons-vue'
+import { handleTree } from '@/utils/common'
+import { delMenuApi, addMenuApi, updateMenuApi, getMenuApi } from '@/api/modules/system/menu'
+import { getDictsApi } from '@/api/modules/system/dictData'
+import { getdataManageListApi } from '@/api/modules/wca/mockData'
+
+const dataManageList = getdataManageListApi()
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({})
+const menuOptions = ref<any[]>([])
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
+const dataCallback = (res: any) => {
+  const data = handleTree(res, 'menuId')
+  menuOptions.value = []
+  const menu: any = { menuId: 0, menuName: '主类目', children: [] }
+  menu.children = data
+  menuOptions.value.push(menu)
+  setItemsOptions()
+  return data
+}
+
+// 删除用户信息
+const deleteMenu = async (params: any) => {
+  await useHandleData(delMenuApi, params.menuId, `删除【${params.dataName}】菜单`)
+  proTable.value?.getTableList()
+}
+
+const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
+// 打开弹框的功能
+const openDialog = async (type: number, title: string, row?: any) => {
+  let res = { data: {} }
+  if (row?.menuId) {
+    res = await getMenuApi(row?.menuId || null)
+  }
+  const params = {
+    title,
+    width: 720,
+    isEdit: type !== 3,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? {} : res.data,
+    api: type == 1 ? addMenuApi : updateMenuApi,
+    getTableList: proTable.value?.getTableList
+  }
+  formDialogRef.value?.openDialog(params)
+}
+
+// 表格配置项
+const columns = reactive<ColumnProps<any>[]>([
+  {
+    prop: 'dataName',
+    label: '名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'type',
+    label: '所属分类',
+    search: {
+      el: 'select'
+    }
+  },
+  {
+    prop: 'status',
+    label: '已评估',
+    tag: true,
+    enum: () => getDictsApi('sys_yes_no'),
+    search: {
+      el: 'tree-select'
+    },
+    fieldNames: { label: 'dictLabel', value: 'dictValue' }
+  },
+  {
+    prop: 'createTime',
+    label: '评估时间',
+    search: {
+      el: 'date-picker',
+      props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
+    }
+  },
+  {
+    prop: 'brand-model',
+    label: '品牌及型号',
+    search: {
+      el: 'input'
+    }
+  },
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+])
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '数据名称',
+      prop: 'dataName',
+      span: 12,
+      rules: [{ required: true, message: '数据名称不能为空', trigger: 'blur' }],
+      compOptions: {
+        elTagName: 'input',
+        placeholder: '请输入菜单名称'
+      }
+    }
+  ]
+}
+</script>

src/views/wca/basicManage/modelManage/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      title="数据列表"
+      row-key="menuId"
+      :columns="columns"
+      :pagination="true"
+      :data="modelManageList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader>
+        <el-button type="primary" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')">新增</el-button>
+      </template>
+      <!-- 菜单图标 -->
+      <template #icon="scope">
+        <el-icon :size="18">
+          <component :is="scope.row.icon"></component>
+        </el-icon>
+      </template>
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button type="primary" link :icon="EditPen" v-auth="['system:menu:edit']" @click="openDialog(2, '菜单编辑', scope.row)"> 编辑 </el-button>
+        <el-button type="primary" link :icon="CirclePlus" v-auth="['system:menu:add']" @click="openDialog(1, '菜单新增')"> 查看 </el-button>
+        <el-button type="primary" link :icon="Delete" v-auth="['system:menu:remove']" @click="deleteMenu(scope.row)"> 删除 </el-button>
+      </template>
+    </ProTable>
+    <FormDialog ref="formDialogRef" />
+  </div>
+</template>
+
+<script setup lang="tsx" name="modelManage">
+import { ref, reactive } from 'vue'
+import { useHandleData } from '@/hooks/useHandleData'
+import ProTable from '@/components/ProTable/index.vue'
+import FormDialog from '@/components/FormDialog/index.vue'
+import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
+import { Delete, EditPen, CirclePlus } from '@element-plus/icons-vue'
+import { handleTree } from '@/utils/common'
+import { delMenuApi, addMenuApi, updateMenuApi, getMenuApi } from '@/api/modules/system/menu'
+import { getmodelManageListApi } from '@/api/modules/wca/mockData'
+
+const modelManageList = getmodelManageListApi()
+// ProTable 实例
+const proTable = ref<ProTableInstance>()
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({})
+const menuOptions = ref<any[]>([])
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，可以在这里进行处理成这些字段
+const dataCallback = (res: any) => {
+  const data = handleTree(res, 'menuId')
+  menuOptions.value = []
+  const menu: any = { menuId: 0, menuName: '主类目', children: [] }
+  menu.children = data
+  menuOptions.value.push(menu)
+  setItemsOptions()
+  return data
+}
+
+// 删除用户信息
+const deleteMenu = async (params: any) => {
+  await useHandleData(delMenuApi, params.menuId, `删除【${params.dataName}】菜单`)
+  proTable.value?.getTableList()
+}
+
+const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
+// 打开弹框的功能
+const openDialog = async (type: number, title: string, row?: any) => {
+  let res = { data: {} }
+  if (row?.menuId) {
+    res = await getMenuApi(row?.menuId || null)
+  }
+  const params = {
+    title,
+    width: 720,
+    isEdit: type !== 3,
+    itemsOptions: itemsOptions,
+    model: type == 1 ? {} : res.data,
+    api: type == 1 ? addMenuApi : updateMenuApi,
+    getTableList: proTable.value?.getTableList
+  }
+  formDialogRef.value?.openDialog(params)
+}
+
+// 表格配置项
+const columns = reactive<ColumnProps<any>[]>([
+  {
+    prop: 'name',
+    label: '模型名称',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'url',
+    label: '模型地址'
+  },
+  {
+    prop: 'type',
+    label: '模型类型',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'modelParams',
+    label: '模型所需参数',
+    search: {
+      el: 'input'
+    }
+  },
+  {
+    prop: 'dataParams',
+    label: '数据所需参数',
+    search: {
+      el: 'input'
+    }
+  },
+  { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
+])
+let itemsOptions: ProForm.ItemsOptions[] = []
+const setItemsOptions = () => {
+  itemsOptions = [
+    {
+      label: '名称',
+      prop: 'dataName',
+      span: 12,
+      rules: [{ required: true, message: '数据名称不能为空', trigger: 'blur' }],
+      compOptions: {
+        elTagName: 'input',
+        placeholder: '请输入菜单名称'
+      }
+    }
+  ]
+}
+</script>

src/views/wca/wcaPage/assessment.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="card content-box">
+    <el-descriptions title="估价结果" :column="3" border>
+      <el-descriptions-item label-align="center" label="名称">xx电脑</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="价格" :span="2" class-name="my-content">3024.14元</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="所属分类">电脑</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="品牌和型号">xx品牌xx型号</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="评估时间">2024-05-14 10:22:09</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="损坏部件">8处</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="成分">铜、铝...</el-descriptions-item>
+    </el-descriptions>
+
+    <el-descriptions title="国际材料价格" :column="2" border>
+      <el-descriptions-item label-align="center" label="铁合金">8285.63 (元/吨)</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="铝合金">20550 (元/吨)</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="铜">81920 (元/吨)</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="银">7312 (元/吨)</el-descriptions-item>
+      <el-descriptions-item label-align="center" label="不锈钢">13750 (元/吨)</el-descriptions-item>
+    </el-descriptions>
+  </div>
+</template>
+
+<script setup lang="ts" name="assessment"></script>
+
+<style scoped lang="scss">
+.content-box {
+  padding-left: 3%;
+}
+:deep(.my-content) {
+  background: var(--el-color-success-light-9);
+}
+</style>

src/views/wca/wcaPage/results.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="card content-box">
+    <ProForm :items-options="items" :model="model" :form-options="_formOptions">
+      <template #image="{}">
+        <div v-for="(item, index) in imgData" :key="index" class="block">
+          <span>{{ item.view }}</span>
+          <el-image class="img" :src="getImageUrl(item.url)" />
+        </div>
+      </template>
+    </ProForm>
+    <div class="result">
+      <div class="before">
+        <ProForm :items-options="beforItems" :model="model" :form-options="_formOptions">
+          <template #image="{}">
+            <div v-for="(item, index) in imgData" :key="index" class="block">
+              <span style="display: block">{{ item.view }}</span>
+              <el-image class="img" :src="getImageUrl(item.url)" />
+            </div>
+          </template>
+        </ProForm>
+      </div>
+      <div class="after">
+        <ProForm :items-options="afterItems" :model="model" :form-options="_formOptions">
+          <template #image="{}">
+            <div v-for="(item, index) in imgData" :key="index" class="block">
+              <span style="display: block">{{ item.view }}</span>
+              <el-image class="img" :src="getImageUrl(item.url)" />
+            </div>
+          </template>
+        </ProForm>
+      </div>
+    </div>
+    <el-button class="btn" type="primary" @click="handleBegin">查看估价结果</el-button>
+  </div>
+</template>
+
+<script setup lang="ts" name="results">
+import { useRouter } from 'vue-router'
+import ProForm from '@/components/ProForm/index.vue'
+import { getimgDataApi } from '@/api/modules/wca/mockData'
+const router = useRouter()
+const getImageUrl = name => {
+  return new URL(`../../../assets/images/${name}`, import.meta.url).href
+}
+const handleBegin = () => {
+  router.push({ path: '/wca/wcaPage/assessment' })
+}
+const imgData = getimgDataApi()
+let model = {
+  blandModel: 'xx品牌xx型号'
+}
+const _formOptions = {
+  hasFooter: false,
+  disabled: true
+}
+let items: ProForm.ItemsOptions[] = [
+  {
+    label: '品牌及型号',
+    prop: 'blandModel',
+    compOptions: {
+      elTagName: 'input'
+    }
+  }
+]
+let beforItems: ProForm.ItemsOptions[] = [
+  {
+    label: '原图片',
+    prop: 'image',
+    compOptions: {
+      elTagName: 'slot',
+      clearable: true
+    }
+  }
+]
+let afterItems: ProForm.ItemsOptions[] = [
+  {
+    label: '处理结果',
+    prop: 'image',
+    compOptions: {
+      elTagName: 'slot',
+      clearable: true
+    }
+  }
+]
+</script>
+
+<style scoped lang="scss">
+.content-box {
+  align-items: start;
+}
+.result {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  .before,
+  .after {
+    width: 45%;
+  }
+}
+.block {
+  // padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  // display: inline-block;
+  width: 50%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.img {
+  width: 80%;
+  height: 80%;
+  margin: 10px;
+}
+.btn {
+  align-self: flex-end;
+  margin-right: 100px;
+}
+</style>