upp

后台/src/pages/A8Manual/index.tsx

@@ -109,14 +109,23 @@ function A8Manual() {
     (id: number) => {
       setOneId(id);
       const son = leftList.find((v) => v.id === id)?.children;
-      if (son && son.length) setTowId(son[0].id);
-      else
+      if (son && son.length) {
+        if (towId === son[0].id) {
+          const data = {
+            storageId: son[0].id,
+            pageSize: pageSizeRef.current,
+            pageNum: pageNumRef.current,
+          };
+          dispatch(A8API_getList(data));
+        }
+        setTowId(son[0].id);
+      } else
         store.dispatch({
           type: "manual/getList",
           payload: { list: [], total: 0 } as any,
         });
     },
-    [leftList]
+    [dispatch, leftList, towId]
   );
   // 点击第二级的选中
   const clickTowFu = useCallback((id: number) => {

后台/src/pages/Z1Gather/index.tsx

@@ -9,6 +9,8 @@ import http from "@/utils/http";
 function Z1Gather() {
   const timeRef = useRef(-1);
   useEffect(() => {
+    document.title = "2023 Print China_Contact us";
+
     // 修改样式为移动端兼容
     const rootDom: HTMLDivElement = document.querySelector("#root")!;
     rootDom.style.minWidth = "100%";
@@ -55,7 +57,7 @@ function Z1Gather() {
   }, []);
 
   /**
-   * 获取收集问卷列表-导出表格
+   * 获取收集问卷列表
    */
   const API_btnOk = (data: any) => {
     return http.post("show/questionnaire/submit", data);
@@ -92,9 +94,9 @@ function Z1Gather() {
               label="Name"
               name="name"
               rules={[{ required: true, message: "not null!" }]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+              // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
             >
-              <Input maxLength={15} showCount placeholder="please enter" />
+              <Input maxLength={50} showCount placeholder="please enter" />
             </Form.Item>
 
             <Form.Item
@@ -114,9 +116,9 @@ function Z1Gather() {
               label="Company Name"
               name="companyName"
               rules={[{ required: true, message: "not null!" }]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+              // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
             >
-              <Input maxLength={15} showCount placeholder="please enter" />
+              <Input maxLength={50} showCount placeholder="please enter" />
             </Form.Item>
 
             <Form.Item
@@ -129,7 +131,7 @@ function Z1Gather() {
                 //   message: "Invalid input!",
                 // },
               ]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+              // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
             >
               <Input maxLength={50} showCount placeholder="please enter" />
             </Form.Item>
@@ -157,9 +159,9 @@ function Z1Gather() {
                 //   message: "Invalid input!",
                 // },
               ]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+              // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
             >
-              <Input maxLength={11} showCount placeholder="please enter" />
+              <Input maxLength={50} showCount placeholder="please enter" />
             </Form.Item>
 
             <Form.Item
@@ -181,9 +183,9 @@ function Z1Gather() {
               label="Country"
               name="country"
               rules={[{ required: true, message: "not null!" }]}
-              getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
+              // getValueFromEvent={(e) => e.target.value.replace(/\s+/g, "")}
             >
-              <Input maxLength={15} showCount placeholder="please enter" />
+              <Input maxLength={50} showCount placeholder="please enter" />
             </Form.Item>
 
             <Form.Item

定制化热点/src/App.vue

@@ -13,6 +13,7 @@ html,body{
 *{
   margin: 0;
   padding: 0;
+  user-select: none;
 }
 #app {
   width: 100%;

定制化热点/src/views/Device.vue

@@ -1,19 +1,148 @@
 <template>
-  <div class="Device"></div>
+  <div class="Device" :class="{ DeviceNo: noInfo }">
+    <!-- 关闭按钮 -->
+    <div class="close" v-show="!noInfo">
+      <img
+        @click="$emit('closePage')"
+        src="../assets/images/close2.png"
+        alt=""
+      />
+    </div>
+    <div class="main" v-show="!noInfo">
+      <!-- 标题 -->
+      <div class="title">
+        <img src="../assets/images/logo.png" alt="" />
+        <div class="xian"></div>
+      </div>
+      <div class="titleTxt">Equipment</div>
+      <!-- 设备列表 -->
+      <div class="forBox">
+        <div class="noneInfo0" v-show="isAllNoFu">No Information</div>
+        <div class="noneInfo1" v-if="!data.length">No Information</div>
+        <div class="one" v-for="item1 in data" :key="item1.id" v-else>
+          <div
+            class="oneName"
+            v-show="
+              item1.children && item1.children.length && isInfo(item1.children)
+            "
+            :title="item1.name"
+          >
+            {{ item1.name }}
+          </div>
+          <div
+            class="noneInfo2"
+            v-if="!(item1.children && item1.children.length)"
+          >
+            No Information
+          </div>
+          <div
+            class="tow"
+            v-for="item2 in item1.children"
+            :key="item2.id"
+            v-else
+          >
+            <div
+              class="towName"
+              v-show="item2.children && item2.children.length"
+              :title="item2.name"
+            >
+              {{ item2.name }}
+            </div>
+
+            <div
+              class="noneInfo2"
+              v-if="!(item2.children && item2.children.length)"
+            >
+              No Information
+            </div>
+
+            <div
+              class="three"
+              v-for="item3 in item2.children"
+              :key="item3.id"
+              v-else
+              @click="downFu(item3)"
+            >
+              <img src="../assets/images/group.png" alt="" />
+              <div class="threeName" :title="item3.name">{{ item3.name }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- a标签的下载 -->
+    <a :href="doHref" download target="_blank" id="aref" ref="doHref"></a>
+
+    <!-- 没有手册的消息 -->
+    <div class="noInfoBox" :class="{ noInfoBoxAc: noInfo }">
+      <div class="noClose">
+        <img @click="noInfo = false" src="../assets/images/close2.png" alt="" />
+      </div>
+      <div class="noLogo">
+        <img src="../assets/images/logo.png" alt="" />
+      </div>
+      <div class="noTxt1">Lead-Form submitted</div>
+      <div class="noTxt2">Local sales will contact you</div>
+      <div class="noInco">
+        <img src="../assets/images/noInco.png" alt="" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+const baseUrl =
+  process.env.NODE_ENV === "development" ? "https://haidebao.4dage.com" : "";
+
 export default {
   name: "Device",
   components: {},
   data() {
-    return {};
+    return {
+      doHref: "",
+      data: [],
+      noInfo: false,
+      isAllNoFu: true,
+    };
   },
   computed: {},
   watch: {},
-  methods: {},
+  methods: {
+    // 点击下载手册
+    async downFu(item) {
+      // console.log(123, item);
+      if (!item.filePath) return (this.noInfo = true);
+      this.doHref = baseUrl + item.filePath;
+      await this.$http.get(`${baseUrl}/api/show/visit/product/${item.id}`);
+      setTimeout(() => {
+        this.$refs.doHref.click();
+      }, 20);
+    },
+    // 判断类别下面是否有操作手册
+    isInfo(val) {
+      // console.log(val);
+      const flag = val.some((v) => v.children);
+      return flag;
+    },
+  },
   created() {},
-  mounted() {},
+  async mounted() {
+    const res = await (
+      await this.$http.get(`${baseUrl}/api/show/product/getTree`)
+    ).data;
+    // console.log(res);
+    res.data.forEach((v1) => {
+      if (v1.children && v1.children.length) {
+        v1.children.forEach((v2) => {
+          if (v2.children && v2.children.length) {
+            this.isAllNoFu = false;
+          }
+        });
+      }
+    });
+    this.data = res.data;
+    // 获取设备列表
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -24,4 +153,202 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+.Device {
+  .aref {
+    display: none;
+  }
+  position: absolute;
+  overflow-y: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 660px;
+  height: 760px;
+  transform: translate(-50%, -50%);
+  border-top: 10px solid #00a0e6;
+  background-color: #fff;
+  .close {
+    padding: 20px 20px 0 0;
+    height: 50px;
+    text-align: right;
+    & > img {
+      cursor: pointer;
+    }
+  }
+  .main {
+    padding-left: 40px;
+    height: calc(100% - 80px);
+    .title {
+      height: 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      & > img {
+        width: 247px;
+      }
+      .xian {
+        width: 200px;
+        height: 2px;
+        background-color: #1f3e7c;
+        position: relative;
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: -3px;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: #1f3e7c;
+        }
+      }
+    }
+    .titleTxt {
+      font-weight: 700;
+      font-size: 30px;
+      color: #999999;
+      margin: 10px 0 0px;
+    }
+    .forBox {
+      box-sizing: border-box;
+      padding-right: 40px;
+      width: 620px;
+      height: calc(100% - 100px);
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        /*滚动条整体样式*/
+        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        /*滚动条里面小方块*/
+        border-radius: 10px;
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        background: #00a0e6;
+      }
+      &::-webkit-scrollbar-track {
+        /*滚动条里面轨道*/
+        -webkit-box-shadow: inset 0 0 5px transparent;
+        border-radius: 10px;
+        background: transparent;
+      }
+      div {
+        box-sizing: border-box;
+      }
+      .one {
+        margin-top: 15px;
+        .oneName {
+          padding: 0 5px;
+          line-height: 36px;
+          color: #fff;
+          width: 100%;
+          height: 36px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-wrap: break-word;
+          background-image: linear-gradient(
+            to right,
+            #1f3e7c,
+            rgba(31, 62, 124, 0.2)
+          );
+        }
+        .tow {
+          .towName {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            word-wrap: break-word;
+            margin-top: 15px;
+            font-weight: 700;
+            font-size: 20px;
+            color: #1f3e7c;
+          }
+          .three {
+            cursor: pointer;
+            display: flex;
+            height: 40px;
+            align-items: center;
+            & > img {
+              margin-right: 5px;
+            }
+            .threeName {
+              width: calc(100% - 20px);
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              word-wrap: break-word;
+              color: #00a0e6;
+              text-decoration-line: underline;
+            }
+          }
+        }
+      }
+      .noneInfo0 {
+        width: 100%;
+        height: 80%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 700;
+        font-size: 20px;
+        color: #1f3e7c;
+      }
+      .noneInfo1 {
+        display: none;
+      }
+      .noneInfo2 {
+        display: none;
+      }
+    }
+  }
+  .noInfoBox {
+    border-top: 10px solid #00a0e6;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    width: 480px;
+    height: 560px;
+    background-color: #fff;
+    .noClose {
+      cursor: pointer;
+      padding: 20px 20px 0 0;
+      height: 36px;
+      text-align: right;
+    }
+    .noLogo {
+      margin: 20px 0 100px 0;
+      text-align: center;
+    }
+    .noTxt1 {
+      font-weight: 700;
+      color: #1f3e7c;
+      font-size: 30px;
+      margin-bottom: 25px;
+      text-align: center;
+    }
+    .noTxt2 {
+      font-weight: 700;
+      text-align: center;
+      color: #00a0e6;
+      font-size: 30px;
+      margin-bottom: 50px;
+    }
+    .noInco {
+      text-align: center;
+    }
+  }
+  .noInfoBoxAc {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+.DeviceNo {
+  border-top: none;
+  background-color: transparent;
+}
 </style>

定制化热点/src/views/Home.vue

@@ -36,7 +36,7 @@
       <!-- 单图展示 -->
       <div
         class="oneImgBox"
-        v-else-if='images[0]'
+        v-else-if="images[0]"
         :title="imagesDesc[0] ? imagesDesc[0] : '图片'"
       >
         <div class="oneTxt">{{ imagesDesc[0] ? imagesDesc[0] : "图片" }}</div>
@@ -67,7 +67,7 @@
       <!-- 单视频展示 -->
       <div
         class="oneVideoBox"
-        v-else-if='videos[0]'
+        v-else-if="videos[0]"
         @click="videoSrc = videos[0].url"
         :title="videosDesc[0] ? videosDesc[0] : '视频'"
       >
@@ -90,18 +90,23 @@
       </div>
     </div>
     <!-- 点击下载设备出来的盒子 -->
-    <div class="DevieBox" :class="{ DevieBoxShow: devieShow }"></div>
+    <div class="DevieBox" :class="{ DevieBoxShow: devieShow }">
+      <Device @closePage='devieShow=false'/>
+    </div>
   </div>
 </template>
 
 <script>
 import { Swiper, SwiperSlide } from "vue-awesome-swiper";
 import "swiper/css/swiper.css";
+
+import Device from "./Device.vue";
+
 const baseUrl =
   process.env.NODE_ENV === "development" ? "https://haidebao.4dage.com" : "";
 
 export default {
-  components: { Swiper, SwiperSlide },
+  components: { Swiper, SwiperSlide, Device },
   data() {
     return {
       // 下载手册的页面
@@ -116,7 +121,6 @@ export default {
       videos: [],
       videoSrc: "",
       videosDesc: [],
-      baseUrl,
       lookPics: [],
       optionsImg: {
         slidesPerView: 2.5,
@@ -135,7 +139,8 @@ export default {
     devieShowFu() {
       const flag = localStorage.getItem("HDB_WJ");
       if (flag) {
-        console.log("已经提交过问卷了");
+        // console.log("已经提交过问卷了");
+        this.devieShow = true;
       } else {
         // 新窗口打开
         window.open(`${baseUrl}/backstage/#/Zgather`);
@@ -148,25 +153,45 @@ export default {
       dom.show();
     },
     async getData() {
-      // https://www.4dmodel.com/
-      let url = `https://super.4dage.com/data/${
-        this.id
-      }/hot/js/data.js?time=${Math.random()}`;
-      let result = (await this.$http.get(url)).data;
-      const data = result[this.m];
-      if (!data) {
-        return alert("热点解析错误");
+      try {
+        let url = `https://super.4dage.com/data/${
+          this.id
+        }/hot/js/data.js?time=${Math.random()}`;
+        let result = (await this.$http.get(url)).data;
+        const data = result[this.m];
+        if (!data) {
+          return alert("热点解析错误");
+        }
+        // console.log(123,data);
+        this.title = data.title;
+        this.content = data.content;
+        this.images = data.images;
+        this.imagesDesc = data.imagesDesc;
+        this.videos = data.video;
+        this.videosDesc = data.videosDesc;
+
+        // 进入发送接口热点统计+1
+        if (this.isEn) await this.$http.get(`${baseUrl}/api/show/visit/hot`);
+      } catch (err) {
+        console.log(err);
       }
-      // console.log(123,data);
-      this.title = data.title;
-      this.content = data.content;
-      this.images = data.images;
-      this.imagesDesc = data.imagesDesc;
-      this.videos = data.video;
-      this.videosDesc = data.videosDesc;
     },
   },
-  created() {},
+  created() {
+    // 监听本地存储改变
+    window.addEventListener(
+      "storage",
+      () => {
+        const flag = localStorage.getItem("HDB_WJ");
+        if (flag) {
+          // console.log("本地存储发送了改变");
+          this.devieShow = true;
+        }
+        // todo ...
+      },
+      { passive: true }
+    );
+  },
   mounted() {
     this.getData();
   },
@@ -425,6 +450,7 @@ export default {
       }
     }
   }
+
   .DevieBox {
     opacity: 0;
     pointer-events: none;