修改产品

components.d.ts

@@ -12,7 +12,6 @@ declare module 'vue' {
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElPagination: typeof import('element-plus/es')['ElPagination']

src/router/routes.ts

@@ -100,6 +100,11 @@ const routes: RouteRecordRaw[] = [
         name:'solutionDetail',
         component:()=>import('@/views/SolutionDetailPage/index.vue'),
       },
+      {
+        path:'rjindex',
+        name:'rjindex',
+        component:()=>import('@/views/SolutionDetailPage/rjindex.vue'),
+      },
     ]
   }
 ]

src/views/ProductPage/index.vue

@@ -5,38 +5,41 @@
     <div class="hidden w-1500 m-auto mb-50 PingFang lg:flex">
       <div class="w-250 ElMenu">
         <el-menu :unique-opened="true" :default-active="'4'">
-          <el-menu-item index="4" @click="menuItemClick(productList[1])">
+          <el-menu-item index="4" @click="menuItemClick(productList[1], 1)">
             <template #title>软件产品</template>
           </el-menu-item>
           <el-sub-menu :index="'1' + ''">
             <template #title>硬件产品</template>
-            <el-menu-item
-              v-for="(subItem, subIndex) in productList[0]"
-              :key="subIndex"
-              :index="subItem.id"
-              @click="menuItemClick([subItem])"
-              v-show="subItem.productType.length == 3"
-            >
+            <el-menu-item v-for="(subItem, subIndex) in productList[0]" :key="subIndex" :index="subItem.id"
+              @click="menuItemClick([subItem], 2)" v-show="subItem.productType.length == 3">
               {{ subItem?.title }}
             </el-menu-item>
           </el-sub-menu>
         </el-menu>
       </div>
 
+      <!-- 软件详细内容 -->
+      <div class="flex-1 flex pl-50 justify-start flex-wrap" v-show="RJDis === 1">
+        <div v-for="(item, index) in currentShowSolution" :key="index"
+          class="flex flex-col items-center w-382 h-342 bg-#F6FAFF mb-20 mr-10">
+          <img :src="item.img" class="h-220 mt-30 w-100%" loading="lazy" />
+          <p class="color-#1D324D my-12">{{ item?.title }}</p>
+          <div class="w-94 h-34 bg-#1962EC mb-18 text-center color-#fff leading-34 cursor-pointer"
+          @click="toKnowMore(item.id,item.DoxcName)">
+            了解详情
+          </div>
+        </div>
+      </div>
+
       <!-- 详细内容 -->
-      <div class="flex-1 flex pl-50 justify-start flex-wrap">
-        <div
-          v-for="(item, index) in productShow"
-          :key="index"
+      <div class="flex-1 flex pl-50 justify-start flex-wrap" v-show="RJDis === 2">
+        <div v-for="(item, index) in productShow" :key="index"
           class="flex flex-col items-center w-382 h-342 bg-#F6FAFF mb-20 mr-10"
-          v-show="item.productType.length != 3 && currentIndex == item.productType"
-        >
+          v-show="item.productType.length != 3 && currentIndex == item.productType">
           <img :src="$URL + item?.pathFiles[0]?.filePath" class="h-220 mt-30" loading="lazy" />
           <p class="color-#1D324D my-12">{{ item?.title }}</p>
-          <div
-            class="w-94 h-34 bg-#1962EC mb-18 text-center color-#fff leading-34 cursor-pointer"
-            @click="detailsClick(item)"
-          >
+          <div class="w-94 h-34 bg-#1962EC mb-18 text-center color-#fff leading-34 cursor-pointer"
+            @click="detailsClick(item)">
             了解详情
           </div>
         </div>
@@ -46,18 +49,12 @@
     <!-- 移动端 -->
     <div class="lg:hidden">
       <subTitle :title="route?.query?.name ? route?.query?.name : '硬件产品'"></subTitle>
-      <div
-        v-for="(item, index) in route.query.name === '软件产品' ? productList[1] : productList[0]"
-        :key="index"
-        class="flex flex-col items-center h-342 bg-#F6FAFF mb-20"
-        v-show="item.productType.length != 3"
-      >
+      <div v-for="(item, index) in route.query.name === '软件产品' ? productList[1] : productList[0]" :key="index"
+        class="flex flex-col items-center h-342 bg-#F6FAFF mb-20" v-show="item.productType.length != 3">
         <img :src="$URL + item?.pathFiles[0]?.filePath" class="h-220 mt-30" loading="lazy" />
         <p class="color-#1D324D my-12">{{ item?.title }}</p>
-        <div
-          class="w-94 h-34 bg-#1962EC mb-18 text-center color-#fff leading-34 cursor-pointer"
-          @click="detailsClick(item)"
-        >
+        <div class="w-94 h-34 bg-#1962EC mb-18 text-center color-#fff leading-34 cursor-pointer"
+          @click="detailsClick(item)">
           了解详情
         </div>
       </div>
@@ -75,32 +72,87 @@ import type { HardwareProduct } from '@/views/ProductPage/type'
 
 const route: any = useRoute()
 const router: any = useRouter()
+let RJDis: any = 1;
+import sumUsingNumberOne from '@/assets/rjImg/one.png';
+import sumUsingNumberTwo from '@/assets/rjImg/two.png';
+import sumUsingNumberFour from '@/assets/rjImg/four.png';
+import sumUsingNumberFive from '@/assets/rjImg/five.png';
+import sumUsingNumberSix from '@/assets/rjImg/six.png';
+const currentShowSolution = [{
+  id: 1,
+  DoxcName: "one",
+  title: "可视化数字李生平台",
+  dateTime: '2024-05-27',
+  img:sumUsingNumberOne
+}, {
+  id: 2,
+  DoxcName: "two",
+  title: "水库雨水情测报与大坝安全监测平台",
+  dateTime: '2024-05-24',
+  img:sumUsingNumberTwo
+}, {
+  id: 3,
+  DoxcName: "three",
+  title: "物联网平台",
+  dateTime: '2024-05-20',
+  img:sumUsingNumberTwo
+}, {
+  id: 4,
+  DoxcName: "four",
+  title: "智慧档案库可视化平台",
+  dateTime: '2024-05-24',
+  img:sumUsingNumberFour
+}, {
+  id: 5,
+  DoxcName: "five",
+  title: "智慧环保监测管理平台",
+  dateTime: '2024-05-16',
+  img:sumUsingNumberFive
+}, {
+  id: 6,
+  DoxcName: "six",
+  title: "自然灾害应急能力提升平台",
+  dateTime: '2024-05-16',
+  img:sumUsingNumberSix
+}]
 
+
+const toKnowMore = (id: number,DoxcName:string) => {
+  router.push({
+    path: 'rjindex',
+    query: {
+      id,
+      DoxcName,
+    }
+  });
+};
 //软硬件合并数据数组
 const productList: any = ref([[], []])
 
 const productSubItem: any = ref([])
 
-const menuItemClick = (e: any) => {
+const menuItemClick = (e: any, index: any) => {
+  RJDis = index;
+  console.log(RJDis)
   //如果是软件产品则任何一项productType为0
-  if(e[0].productType == 'null' || e[0].productType == null){
+  if (e[0].productType == 'null' || e[0].productType == null) {
     currentIndex.value = 'null'
     return
   }
   currentIndex.value = e[0].productType.split('-')[1]
   // productSubItem.value = e
 }
-const defaultActive = computed(()=>{
-  return productList.value[0].filter((item:any)=>{
+const defaultActive = computed(() => {
+  return productList.value[0].filter((item: any) => {
     return item.productType.length == 1
   })[0]
 })
 
-const productShow = computed(()=>{
-  if(currentIndex.value == 'null'){
+const productShow = computed(() => {
+  if (currentIndex.value == 'null') {
     return productList.value[1];
   }
-  return productList.value[0].filter((item:any)=>{
+  return productList.value[0].filter((item: any) => {
     return item.productType.length == 1
   })
 })

src/views/SolutionDetailPage/rjindex.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+
+import { onMounted, onUnmounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+// import { getModuleById } from '@/api'
+// import type { FileListType, GetByIdResponse } from '@/views/SolutionDetailPage/type'
+// import { $URL } from '@/setter'
+
+const route = useRoute()
+const router = useRouter()
+const currentPageSolutionId = ref<string>(<string>route.query.id);
+const FiName = ref<string>(<string>route.query.DoxcName);
+// const fileList = ref<FileListType>([]);
+
+
+import jsPreviewDocx from "@js-preview/docx";
+import "@js-preview/docx/lib/index.css";
+const docx = ref("/static/RJWordData/"+ FiName.value + ".docx");
+
+console.log(currentPageSolutionId,FiName)
+onMounted(() => { // setup下先再获取到dom节点之后再进行挂载
+  const myDocxPreviewer = jsPreviewDocx.init(<HTMLElement> document.getElementById("docx"));
+  //传递要预览的文件地址即可
+  myDocxPreviewer
+    .preview(
+      docx.value
+    )
+    .then((res) => {
+      console.log("预览完成");
+    })
+    .catch((e) => {
+      console.log("预览失败", e);
+    });
+});
+// switch (currentPageSolutionId.value) {
+//   case '1':
+//     console.log('第一个')
+//     break;
+//   case '2':
+//     console.log('第2个')
+//     break;
+//   case '3':
+//     console.log('第3个')
+//     break;
+//   case '4':
+//     console.log('第4个')
+//     break;
+//   case '5':
+//     console.log('第5个')
+//     break;
+//   case '6':
+//     console.log('第6个')
+//     break;
+//   case '7':
+//     console.log('第7个')
+//     break;
+// }
+
+// const getSolutionDetailImages = async () => {
+//   const res: GetByIdResponse = await getModuleById(currentPageSolutionId.value)
+//   console.log(res.data.pathFileList);
+//   if (res.success) {
+//     fileList.value = res.data.pathFileList;
+//   }
+// }
+
+onUnmounted(() => {
+  history.go(0);
+})
+
+
+
+// getSolutionDetailImages()
+</script>
+
+<template>
+  <MainTitle title="软件产品" titleLetter="NEWS_COLUMN"></MainTitle>
+  <div class="w-100% lg:w-1000 m-auto pt-20 text-14 PingFang_Medium pl-20 mb-50">
+    您当前的位置：<span class="cursor-pointer hover:color-#3F88FF" @click="router.push('/product')">产品中心</span>> >> <span
+      class="text-#3F88FF">软件产品</span>
+  </div>
+  <!-- <div> -->
+  <div id="docx"></div>
+  <!-- <vue-office-docx :src="docx" style="height: 100vh;" @rendered="renderedHandler" @error="errorHandler" /> -->
+  <!-- </div> -->
+  <!-- <div class="solutionDetailContainer lg:w-1000 w-100% m-auto">
+    <div v-for="(item, index) in fileList" :key="index" class="w-100vw mt--2 mb--2">
+      <img v-lazy="$URL + item.fileUrl" class="lg:w-1000 w-100vw">
+    </div>
+  </div> -->
+</template>
+
+<style scoped lang="scss"></style>