modified: package.json

	new file:   src/assets/images/bg_tools/bg_gear.png
	new file:   src/assets/images/bg_tools/bg_wrench.png
	new file:   src/assets/images/bg_tools/bottom.png
	new file:   src/assets/images/bg_tools/item1.png
	new file:   src/assets/images/bg_tools/item2.png
	new file:   src/assets/images/bg_tools/item3.png
	new file:   src/assets/images/bg_tools/item4.png
	new file:   src/assets/images/bg_tools/line1.png
	new file:   src/assets/images/bg_tools/line2.png
	new file:   src/assets/images/bg_tools/main.png
	new file:   src/assets/images/login-background.png
	modified:   src/main.js
	modified:   src/router/index.js
	modified:   src/utils/index.js
	modified:   src/views/DetailView.vue
	new file:   src/views/HelloView.vue
	modified:   src/views/HomeView.vue
	new file:   src/views/components/bgTools.vue

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@vant/touch-emulator": "^1.4.0",
     "@vant/use": "^1.6.0",
+    "animate.css": "^4.1.1",
     "axios": "^1.6.8",
     "clipboard": "^2.0.11",
     "element-plus": "^2.7.2",

src/main.js

@@ -7,6 +7,7 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus' // 引入element-plus
 import 'element-plus/dist/index.css' // 引入element-plus的样式
+import 'animate.css'
 import '@vant/touch-emulator' // 在桌面端自动将 mouse 事件转换成对应的 touch 事件
 
 const app = createApp(App)

src/router/index.js

@@ -6,6 +6,11 @@ const router = createRouter({
   routes: [
     {
       path: '/',
+      name: 'hello',
+      component: () => import('../views/HelloView.vue')
+    },
+    {
+      path: '/home',
       name: 'home',
       component: HomeView
     },

src/utils/index.js

@@ -10,16 +10,17 @@ export const isMobile = () => {
 export const getFillNums = (selectorName, list, width) => {
   return new Promise((resolve) => {
     const target = document.querySelector(selectorName)
-    if(!target) {
+    if (!target) {
       // 如果节点还没有挂载，100ms后再尝试
-      setTimeout(()=>{
+      setTimeout(() => {
         return getFillNums(selectorName, list, width)
-      },100)
-    }else {
+      }, 100)
+    } else {
       const clientWidth = target.clientWidth
       // 每行最多有几个
       const rowMaxNum = Math.floor(clientWidth / width)
-      resolve (list.length % rowMaxNum === 0 ? 0 : rowMaxNum - (list.length % rowMaxNum))
+      console.log(rowMaxNum)
+      resolve(list.length % rowMaxNum === 0 ? 0 : rowMaxNum - (list.length % rowMaxNum))
     }
   })
 }

src/views/DetailView.vue

@@ -60,7 +60,7 @@
             >
               {{ breadTitle }}
             </div>
-            <template v-if="wlList.length > 0">
+            <!-- <template v-if="wlList.length > 0">
               <div class="font-['PingFang-SC'] text-sm font-normal mt-10 flex">
                 <div>物料名称：</div>
                 <div class="font-['PingFang-SC'] text-sm font-normal">{{ selectMaterialName }}</div>
@@ -89,7 +89,69 @@
                   @click="codeCopy"
                 />
               </div>
-            </template>
+            </template> -->
+
+            <div class="my-8" v-if="wlList.length > 0">
+              <!-- 搜索表单 -->
+              <el-form :model="queryParams" ref="searchFormRef" :inline="true" v-show="showSearch">
+                <el-form-item label="物料编码" prop="materialNo">
+                  <el-input
+                    v-model="queryParams.materialNo"
+                    placeholder="请输入物料编码"
+                    clearable
+                    style="width: 200px"
+                    @keyup.enter="handleQuery"
+                  />
+                </el-form-item>
+                <el-form-item label="物料名称" prop="materialName">
+                  <el-input
+                    v-model="queryParams.materialName"
+                    placeholder="请输入物料名称"
+                    clearable
+                    style="width: 200px"
+                    @keyup.enter="handleQuery"
+                  />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="handleQuery">搜索</el-button>
+                  <el-button @click="resetQuery">重置</el-button>
+                </el-form-item>
+              </el-form>
+
+              <!-- 是否展示搜索图标 -->
+              <van-icon class="float-right" name="search" @click="toggleSearch()" />
+
+              <!-- 表格 -->
+              <el-table :data="wlList">
+                <el-table-column label="物料编码" align="center" prop="materialNo">
+                  <template #default="scope">
+                    <div class="flex items-center justify-center">
+                      <div>{{ scope.row.materialNo }}</div>
+                      <van-icon
+                        v-show="selectWlCode"
+                        name="description-o"
+                        class="text-[#004EA2] description-o ml-1 cursor-pointer"
+                        @click="codeCopy(scope.row.materialNo)"
+                      />
+                    </div>
+                  </template>
+                </el-table-column>
+                <el-table-column label="物料名称" align="center" prop="materialName" />
+                <el-table-column label="规格" align="center" prop="specifications" />
+              </el-table>
+              <div class="w-full mt-2">
+                <el-pagination
+                  class="float-right"
+                  v-if="total > 0"
+                  :current-page="pageNum"
+                  :page-size="20"
+                  :pager-count="5"
+                  layout="prev, pager, next"
+                  :total="1000"
+                  @current-change="handleCurrentChange"
+                />
+              </div>
+            </div>
 
             <div class="font-['PingFang-SC'] text-sm font-normal mt-10">
               <div>附件：</div>
@@ -143,6 +205,16 @@ const sytPath = ref('')
 const devPath = import.meta.env.VITE_APP_BASE_API
 const breadTitle = ref('')
 const typeOptions1Ref = ref([])
+
+// 物料搜索相关参数
+const queryParams = ref({
+  materialNo: '',
+  materialName: ''
+})
+const showSearch = ref(false)
+const pageNum = ref(1)
+const total = ref(10)
+
 const init = () => {
   detailList({ id: queryId.value }).then((res) => {
     const toolDetails = res.data.toolDetails || []
@@ -179,14 +251,16 @@ const changeImg = ({ id, filePath }) => {
   sytPath.value = filePath
 }
 
-const codeCopy = async () => {
+const codeCopy = async (val) => {
+  // console.log(val)
   const clipboard = new Clipboard('.description-o', {
-    text: () => selectWlCode.value
+    text: () => val
   })
   // 添加成功事件处理函数
   clipboard.on('success', (e) => {
     e.clearSelection()
     ElMessage.success('复制成功')
+    clipboard.destroy()
   })
   // 添加失败事件处理函数
   clipboard.on('error', () => {
@@ -195,11 +269,11 @@ const codeCopy = async () => {
   })
 }
 
-const changeWlCode = ({ id, materialNo, materialName }) => {
-  wlSelectId.value = id
-  selectWlCode.value = materialNo
-  selectMaterialName.value = materialName
-}
+// const changeWlCode = ({ id, materialNo, materialName }) => {
+//   wlSelectId.value = id
+//   selectWlCode.value = materialNo
+//   selectMaterialName.value = materialName
+// }
 //  informationType 物料  wl  点击切换 物料编码 materialNo
 //  informationType 示意图 syt 左侧图
 const fileDownload = ({ fileName, filePath }) => {
@@ -216,7 +290,37 @@ const fileDownload = ({ fileName, filePath }) => {
 }
 
 const handleReturn = (typeItem) => {
-  router.push({ path: '/', query: { id: typeItem.id } })
+  router.push({ path: '/home', query: { id: typeItem.id } })
+}
+
+// 搜索物料
+const handleQuery = () => {
+  const params = {
+    materialNo: queryParams.value.materialNo || '',
+    materialName: queryParams.value.materialName || '',
+    // 看看有没有分页
+    pageNum: pageNum.value,
+    pageSize: 5
+  }
+  console.log('搜索物料', params)
+  // getList(params)
+}
+const searchFormRef = ref(null)
+// 重置
+const resetQuery = () => {
+  searchFormRef.value.resetForm('searchFormRef')
+  handleQuery()
+}
+
+// 切换分页
+const handleCurrentChange = (val) => {
+  console.log(val)
+  pageNum.value = val
+}
+
+// 显示搜索框
+const toggleSearch = () => {
+  showSearch.value = !showSearch.value
 }
 </script>
 

src/views/HelloView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div
+    class="w-full h-screen bg-white font-['PingFang-SC'] bg-[url('/src/assets/images/login-background.png')] overflow-hidden"
+  >
+    <div class="fixed left-1/2 top-1/2 bgTools -translate-x-1/2 -translate-y-1/2">
+      <bgTools />
+    </div>
+  </div>
+</template>
+
+<script setup name="HelloView">
+import bgTools from './components/bgTools.vue'
+</script>
+
+<style lang="scss" scoped></style>

src/views/HomeView.vue

@@ -119,7 +119,7 @@
           <el-image class="tool-img" :src="`${devPath + item.picturePath}`" fit="contain">
             <template #error>
               <div class="w-full h-full flex items-center justify-center">
-                <van-icon name="photo-fail" color="#dcdee0" size="32"/>
+                <van-icon name="photo-fail" color="#dcdee0" size="32" />
               </div>
             </template>
           </el-image>
@@ -164,7 +164,8 @@ const device = computed(() => {
 })
 // 搜索内容
 const searchValueRef = ref('')
-const totalPage = ref(20)
+const pageNum = ref(1)
+const pageSize = ref(20)
 // 热门工具列表
 const hotToolsRef = ref(hotToolsList)
 
@@ -185,20 +186,23 @@ const onLoad = (value) => {
     level: '3',
     parentId: value,
     toolName: searchValueRef.value,
-    pageSize: totalPage.value,
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
     delFlag: 0
   }).then((res) => {
-    toolsListRef.value = res.rows
+    toolsListRef.value = toolsListRef.value.concat(res.rows)
     //  加载状态结束
     loadingRef.value = false
-    if (totalPage.value >= res.total) {
-      finished.value = true
-    } else {
-      totalPage.value += 20
-    }
-    getFillNums('.tool-card-content', toolsListRef.value, 220).then(nums=>{
-      noneCardNum.value = nums
-    })
+
+    pageNum.value += 1
+    if (res.rows.length < pageSize.value) finished.value = true
+
+    getFillNums('.tool-card-content', toolsListRef.value, device.value === 'pc' ? 220 : 165).then(
+      (nums) => {
+        console.log('getFillNums', nums)
+        noneCardNum.value = nums
+      }
+    )
   })
 }
 const init = () => {

src/views/components/bgTools.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="tools" :style="{ transform: `scale(${scaleVal})` }">
+    <img class="bg_bottom" src="@/assets/images/bg_tools/bottom.png" alt="" />
+    <img class="bg_main" src="@/assets/images/bg_tools/main.png" alt="" />
+    <img class="bg_line1" src="@/assets/images/bg_tools/line1.png" alt="" />
+    <img class="bg_line2" src="@/assets/images/bg_tools/line2.png" alt="" />
+    <img class="bg_item1" src="@/assets/images/bg_tools/item1.png" alt="" />
+    <img class="bg_item2" src="@/assets/images/bg_tools/item2.png" alt="" />
+    <img class="bg_item3" src="@/assets/images/bg_tools/item3.png" alt="" />
+    <img class="bg_item4" src="@/assets/images/bg_tools/item4.png" alt="" />
+    <img class="bg_gear" src="@/assets/images/bg_tools/bg_gear.png" alt="" />
+    <img class="bg_wrench" src="@/assets/images/bg_tools/bg_wrench.png" alt="" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+
+const { width } = useWindowSize()
+const scaleVal = ref(1)
+watch(
+  width,
+  (value) => {
+    scaleVal.value = value / 1900 < 0.32 ? 0.32 : value / 1900
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.tools {
+  width: 1124px;
+  height: 1080px;
+  position: relative;
+  .bg_123 {
+    width: 100%;
+    height: 100%;
+  }
+  .bg_main {
+    position: absolute;
+    left: 264px;
+    top: 160px;
+    animation: slide-top-down 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate infinite;
+    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_bottom {
+    position: absolute;
+    left: 189px;
+    top: 366px;
+    animation: scale_bottom 8s linear infinite;
+    // animation: heartBeat;
+    // animation-duration: 6s;
+    // animation-iteration-count: infinite;
+  }
+  .bg_line1 {
+    position: absolute;
+    left: 210px;
+    top: 320px;
+    animation: slide-top-down2 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) -4s alternate infinite;
+    filter: drop-shadow(4px -4px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_line2 {
+    position: absolute;
+    left: 530px;
+    top: 243px;
+    animation: slide-top-down3 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) -4s alternate infinite;
+    filter: drop-shadow(4px -4px 12px rgba(232, 233, 235, 0.6));
+  }
+  .bg_item1 {
+    position: absolute;
+    left: 642px;
+    top: 580px;
+    animation: bounceInDown;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-delay: -0.5s;
+    filter: drop-shadow(4px -4px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_item2 {
+    position: absolute;
+    left: 840px;
+    top: 80px;
+    animation: bounceInDown;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-delay: -1s;
+    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_item3 {
+    position: absolute;
+    left: 538px;
+    top: 752px;
+    animation: bounceInDown;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-delay: -1.5s;
+    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_item4 {
+    position: absolute;
+    left: 251px;
+    top: 124px;
+    animation: bounceInDown;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-delay: -2s;
+    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_gear {
+    width: 28%;
+    height: 28%;
+    position: absolute;
+    right: 80px;
+    bottom: 280px;
+    animation: swing;
+    animation-duration: 12s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    transform-origin: 45.5% 44%;
+    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
+  }
+  .bg_wrench {
+    width: 48%;
+    height: 48%;
+    position: absolute;
+    left: 24px;
+    bottom: 100px;
+    animation: swing;
+    animation-duration: 12s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    filter: drop-shadow(0px 0px 12px rgba(18, 108, 242, 0.6));
+  }
+}
+@keyframes slide-top-down {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(100px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+@keyframes slide-top-down2 {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(80px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+@keyframes slide-top-down3 {
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(120px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+@keyframes scale_bottom {
+  0% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(0.85);
+  }
+  20% {
+    transform: scale(0.95);
+  }
+  28% {
+    transform: scale(1.08);
+  }
+  32% {
+    transform: scale(0.95);
+  }
+  36% {
+    transform: scale(1.05);
+  }
+  40% {
+    transform: scale(1.1);
+  }
+  45% {
+    transform: scale(1.15);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  55% {
+    transform: scale(1.15);
+  }
+  60% {
+    transform: scale(1.1);
+  }
+  65% {
+    transform: scale(1);
+  }
+  70% {
+    transform: scale(1.05);
+  }
+  80% {
+    transform: scale(0.9);
+  }
+  90% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>