增加moment；新增模板；修改表格样式

package.json

@@ -29,6 +29,7 @@
     "jquery": "^3.7.1",
     "js-cookie": "2.2.0",
     "mitt": "^3.0.1",
+    "moment": "^2.30.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",

src/views/home/newfile.vue

@@ -2,7 +2,10 @@
     <!-- 新建 -->
     <div class="demo-collapse">
     <el-collapse  class="custom-collapse" v-model="activeNames" @change="handleChange">
-      <el-collapse-item title="新建工程" name="1">
+      <el-collapse-item name="1">
+        <template #title>
+          <span style="font-size: 14px;">新建工程</span>
+        </template>
         <div class="collapse-list" >
             <div class="list" @click="newclick()">
                 <el-image :src="s0" fit="contain" ></el-image>
@@ -10,33 +13,56 @@
         </div>
     
       </el-collapse-item>
-      <el-collapse-item title="函数优化模板" name="2">
+      <el-collapse-item name="2">
+        <template #title>
+          <span style="font-size: 14px;">函数优化模板</span>
+        </template>
         <div class="collapse-list">
-         <div v-for="(item, index) in collapselist" :key="index"  @click="clickimg(item,'2',index)">
-            <div class="list"   >
-                <el-image :src="item.image" fit="contain"  ></el-image>  
+         <div v-for="(item, index) in collapselist_1" :key="index"  @click="clickimg(item,'2',index)"
+         @mouseenter="handleMouseEnter(index, '2')"
+         @mouseleave="handleMouseLeave('2')"
+         class="showImgDiv">
+            <div class="list">
+                <el-image :src="item.image" fit="contain"  ></el-image>
+                 <!-- 鼠标悬停时显示的图片容器 -->
+                <div v-if="hoveredIndexes['2'] === index && !!item.image2" class="hoveredImageContainer">
+                  <el-image :src="item.image2  || ''" fit="contain" class="hoveredImage"></el-image>
+                </div>
             </div>
-            <p style="text-align: center;">{{item.name}}</p>
+            <p class="modelStyle">{{item.name}}</p>
           </div>
         </div>
       </el-collapse-item>
-      <el-collapse-item title="翼型优化模板" name="3">
+      <el-collapse-item name="3">
+        <template #title>
+          <span style="font-size: 14px;">翼型优化模板</span>
+        </template>
         <div class="collapse-list">
-         <div v-for="(item, index) in collapselist" :key="index"  @click="clickimg(item,'2',index)">
-            <div class="list"   >
-                <el-image :src="item.image" fit="contain"  ></el-image>  
+         <div v-for="(item, index) in collapselist_2" :key="index"  @click="clickimg(item,'3',index)"
+            @mouseenter="handleMouseEnter(index, '3')"
+            @mouseleave="handleMouseLeave('3')"
+            class="showImgDiv">
+            <div class="list">
+                <el-image :src="item.image" fit="contain"></el-image>
+                <!-- 鼠标悬停时显示的图片容器 -->
+                <div v-show="hoveredIndexes['3'] === index && !!item.image2" class="hoveredImageContainer">
+                  <el-image :src="item.image2  || ''" fit="contain" class="hoveredImage"></el-image>
+                </div>
             </div>
-            <p style="text-align: center;">{{item.name}}</p>
+            <p class="modelStyle">{{item.name}}</p>
           </div>
         </div>
       </el-collapse-item>
-      <el-collapse-item title="机翼优化模板" name="4">
+      <el-collapse-item name="4">
+        <template #title>
+          <span style="font-size: 14px;">机翼优化模板</span>
+        </template>
         <div class="collapse-list">
-         <div v-for="(item, index) in collapselist" :key="index"  @click="clickimg(item,'2',index)">
+         <div v-for="(item, index) in collapselist_3" :key="index"  @click="clickimg(item,'4',index)">
             <div class="list"   >
-                <el-image :src="item.image" fit="contain"  ></el-image>  
+                <el-image :src="item.image" fit="contain"  ></el-image>
             </div>
-            <p style="text-align: center;">{{item.name}}</p>
+            <p class="modelStyle">{{item.name}}</p>
           </div>
         </div>
       </el-collapse-item>
@@ -81,7 +107,7 @@ import open2 from "@/assets/img/open2.png";
 import open3 from "@/assets/img/open3.png";
 let router = useRouter();
 let eldialog=ref(false);
-const activeNames = ref(['1','2']);
+const activeNames = ref(['1','2', '3', '4']);
 let mid=ref('');
 let modelflow=ref();
 let gcid=ref('');//工程模版
@@ -108,8 +134,23 @@ const newclick = () => {
 
 let collapselist = ref([
   {img:open2},{img:open3},
- 
 ])
+
+let collapselist_1 = ref([]); // 1-函数优化模版
+let collapselist_2 = ref([]); // 2-翼型优化模版
+let collapselist_3 = ref([]); // 3-机翼优化模版
+// 记录当前悬停的项目索引
+const hoveredIndexes = ref({});
+
+// 定义处理鼠标进入的方法
+const handleMouseEnter = (index, section) => {
+  hoveredIndexes.value[section] = index;
+};
+
+// 定义处理鼠标离开的方法
+const handleMouseLeave = (section) => {
+  delete hoveredIndexes.value[section];
+};
 const openclick=()=>{
    // router.replace({ path: key })
 }
@@ -165,13 +206,32 @@ const newbaocun=()=>{
 const modelget=()=>{
   const params = {
         transCode: 'MDO0005',
-        count:5,
+        count:'',
         page:1,
         searchtag:''
     }
     request(params)
         .then((res) => {
-            collapselist.value=res.rows;
+          // 清空原有的数据
+          collapselist_1.value = [];
+          collapselist_2.value = [];
+          collapselist_3.value = [];
+          // 遍历 res.rows 并根据 type 分配到对应的 collapselist
+          res.rows.forEach(item => {
+            switch (item.type) {
+              case 1:
+                collapselist_1.value.push(item);
+                break;
+              case 2:
+                collapselist_2.value.push(item);
+                break;
+              case 3:
+                collapselist_3.value.push(item);
+                break;
+              default:
+                console.log(`Unknown type: ${item.type}`);
+        }
+    });
         })
         .catch((err) => {
             ElMessage.error(err.returnMsg)
@@ -212,39 +272,57 @@ eldialog.value=true;
 .collapse-list{
     display: flex;
     .list{
-        width: 110px;
-        height: 110px;
-        border: 2px solid #71AAFF;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-        margin: 0 5px;
+      width: 110px;
+      height: 110px;
+      border: 2px solid #71AAFF;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      margin: 0 5px;
     }
 }
+.hoveredImageContainer {
+  height: 220px;
+  width: 180px;
+  position: absolute;
+  left: calc(100% + 5px); /* 或者调整到合适的距离 */
+  top: -10px;
+  z-index: 10; /* 确保悬浮图片在其他内容之上 */
+}
+
+.showImgDiv {
+  position: relative; /* 确保 .hoveredImageContainer 相对于 .showImgDiv 定位 */
+}
+.modelStyle{
+  font-family: 'Source Sans-Regular';
+  font-size: 12px;
+  color: #333333;
+  text-align: center;
+}
 </style>
 <style>
 .custom-collapse .el-collapse-item__header {
-    font-family: Inter, Inter;
-font-weight: 500;
-font-size: 16px;
-color: #383838;
-line-height: 24px;
-text-align: left;
-font-style: normal;
-text-transform: none;
+  font-family: 'Source Sans-Regular';
+  font-weight: 500;
+  font-size: 14px;
+  color: #383838;
+  line-height: 24px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 .custom-collapse .el-collapse-item__header {
   align-items: center;
   border: none;
   height: 20px;
-  margin: 4px;
+  margin: 6px 6px 6px 0;
 }
  
 .custom-collapse .el-collapse-item__arrow {
   order: -1; /* 将箭头元素的顺序设置为最前 */
-  margin-right: 10px;
-  margin-left: 10px; /* 根据需要调整箭头与标题的间距 */
+  margin-right: 5px;
+  margin-left: 6px; /* 根据需要调整箭头与标题的间距 */
 }
  .custom-collapse .el-collapse-item__wrap,.custom-collapse{
     border: none;

src/views/home/querylist.vue

@@ -2,42 +2,55 @@
     <!-- 打开查询 -->
     <h3 class="opt_tltie"></h3>
     <div>
-        <div  class="input ">
-            <div  class="text el-input">
-                <input type="text" autocomplete="off" placeholder="请输入项目名称"
-                v-model="gd.searchtag"
-                    class="el-input__inner"></div>
-                    <!-- <button  type="button"
-                class="el-button el-button--primary" style="border-radius: 0px;" @click="searchclick()">
-                <i class="el-icon-search"></i><span>搜索</span></button> -->
-                <el-button type="primary"  class="el-button el-button--primary" style="border-radius: 0px;" @click="searchclick()" :icon="Search">搜索</el-button>
+        <div class="search-container">
+            <el-input
+            v-model="gd.searchtag"
+            placeholder="请输入项目名称"
+            class="search-input"
+            >
+            </el-input>
+            <el-button type="primary" :icon="Search" @click="searchclick()" class="search-button">搜索</el-button>
         </div>
-        <el-table :data="tableData" :max-height="tableHeight"   @row-click="handlerow($event)"
-            :header-cell-style="{ 'background': 'rgba(13, 22, 57, 0) ' }">
+        <el-table :data="tableData" 
+            @row-click="handlerow($event)" 
+            :row-style="{ height: '100px'}"
+            style="width: 100%">
             <el-table-column prop="image" label="图片" >
-            <template #default="scope">
-               <div class="elimagetab"><el-image :src="scope.row.image" fit="contain"></el-image> </div>     
-         </template>
-                        </el-table-column>
+                <template #default="scope">
+                    <div class="elimagetab">
+                        <el-image :src="scope.row.image" fit="contain" style="height: 100%; width: auto;"></el-image>
+                    </div>     
+                </template>
+            </el-table-column>
             <el-table-column prop="name" label="名称" />
             <el-table-column prop="remark" label="描述" />
-            <el-table-column prop="createtime" label="创建时间" />
-            <el-table-column prop="updatetime" label="更新时间" />
-            <el-table-column label="操作"  width="100">
-                          <template #default="scope">
-                            <el-button
-                              size="small"
-                              type="danger"
-                              @click.stop="handdelete(scope.$index, scope.row)"
-                              >删除</el-button
-                            >
-                          </template>
-                        </el-table-column>
+            <el-table-column prop="createtime" label="创建时间">
+                <template #default="scope">
+                    {{ formatDate(scope.row.createtime) }}
+                </template>
+            </el-table-column>
+            <el-table-column prop="updatetime" label="更新时间">
+                <template #default="scope">
+                    {{ formatDate(scope.row.updatetime) }}
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+                <template #default="scope">
+                  <el-button size="small" type="text" icon="el-icon-delete" @click.stop="handdelete(scope.$index, scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
         </el-table>
         <div class="demo-pagination-block pagination" style="margin-top: 20px;">
-            <el-pagination v-model:current-page="gd.currentPage4" v-model:page-size="gd.pageSize4" small background
-                layout="prev, total,pager, next, jumpe," :total="parseInt(gd.total)" class="mt-4"
-                @current-change="handleCurrentChange2" />
+            <el-pagination
+                v-model:current-page="gd.currentPage4"
+                v-model:page-size="gd.pageSize4"
+                small
+                background
+                layout="prev, total, pager, next"
+                :total="parseInt(gd.total)"
+                class="mt-4"
+                @current-change="handleCurrentChange2"
+            />
         </div>
     </div>
 </template>
@@ -47,7 +60,8 @@ import { RouterView, RouterLink,useRouter } from "vue-router"
 import { request, uploadFile } from "@/utils/request";
 import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import { Calendar, Search } from "@element-plus/icons-vue";
-import * as echarts from 'echarts'
+import * as echarts from 'echarts';
+import moment from 'moment';
 let tableData = ref([]);
 let router = useRouter();
 let gd = ref({
@@ -114,8 +128,21 @@ const handlerow=(val)=>{
 console.log(val);
 sessionStorage.setItem("objlist",JSON.stringify(val));
 }
+
+const formatDate = datetime => !datetime ? '' : moment(datetime).format('YYYY-MM-DD HH:mm:ss');
 </script>
 <style lang="scss" scoped>
+.search-container {
+  display: flex;
+  align-items: center;
+}
+.search-input {
+  width: 200px; /* 根据需要调整宽度 */
+}
+.search-button {
+    background-color: #2267B1;
+    margin-left: 5px; /* 调整这个值以去除输入框与按钮之间的间隙 */
+}
  .input {
     width: 25%;
     display: flex;
@@ -177,8 +204,17 @@ sessionStorage.setItem("objlist",JSON.stringify(val));
     border-radius: 4px;
 }
 
-.elimagetab{
-    width: 150px;
+.elimagetab {
+  height: 90px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden; /* 确保内容不会超出容器 */
+}
+
+.elimagetab .el-image {
+  height: 30%; /* 调整这个值以确保图片不会撑开行 */
+  width: auto; /* 自动宽度以保持比例 */
 }
 </style>