feat:新增首页点击材料和事项预览，修改获取站点信息

sample-form-client-ui/admin/src/App.vue

@@ -11,6 +11,29 @@ export default {
     return {
       routeQuery: "",
       devicenum: "",
+      // serveinfo: {
+      //   deviceInfo: {
+      //     enabled: 1,
+      //     productId: 1,
+      //     productName: "排队机",
+      //     siteCode: "",
+      //     siteId: 2,
+      //     siteName: "",
+      //     source: 1,
+      //   },
+      //   rabbmitInfo: {
+      //     downTopicFilter: "/down/00-F1-F5-12-3F-64",
+      //     exchangeName: "phxt.pdj",
+      //     host: "192.168.0.98",
+      //     messageTtl: "86400000",
+      //     password: "admin@2020",
+      //     port: 5672,
+      //     uploadTopicFilter: "/upload/00-F1-F5-12-3F-64",
+      //     username: "taxi_mq",
+      //     virtualHost: "/test",
+      //   },
+      //   serviceInfo: { homeUrl: "", serverUrl: "http://192.168.0.98:8090" },
+      // },
     };
   },
   created() {
@@ -96,25 +119,30 @@ export default {
       });
       return q;
     },
+    getInfo(info = {}) {
+      let { serveinfo, devicenum } = info;
+      let { deviceInfo, rabbmitInfo, serviceInfo } = serveinfo;
+      let { serverUrl } = serviceInfo;
+      let { siteId } = deviceInfo;
+      this.devicenum = devicenum;
+      local.setLocal("baseURL", serverUrl);
+      local.setLocal("siteId", siteId);
+      local.setLocal("devicenum", this.devicenum);
+      if (serveinfo) {
+        // **正式环境请打开下面内容**
+        rabbmitInfo && this.clientMp(rabbmitInfo);
+      }
+    },
     loadconfig() {
       this.routeQuery = this.urlGet();
       if (JSON.stringify(this.routeQuery) !== "{}") {
-        let serveinfo = this.routeQuery["serveinfo"]
-          ? JSON.parse(this.UrlDecode(this.routeQuery["serveinfo"]))
-          : {};
-        let serverUrl =
-          this.routeQuery["serverUrl"] || "http://192.168.0.98:11078";
-        this.devicenum = this.routeQuery["devicenum"] || "90-2B-34-BF-1B-48";
-        if (serveinfo) {
-          // **正式环境请打开下面内容**
-          // serveinfo["rabbmitInfo"] && this.clientMp(serveinfo["rabbmitInfo"]);
-          if (!serveinfo["serviceInfo"]["serverUrl"]) {
-            serverUrl = "http://192.168.0.98:11078";
-          }
-        }
-        local.setLocal("baseURL", serverUrl);
-        // this.SET_devicenum(this.devicenum);
-        // this.getIndexSetinfo();
+        this.getInfo(this.routeQuery);
+      } else if (JSON.stringify(this.$route.query) !== "{}") {
+        this.getInfo(this.$route.query);
+      } else {
+        local.setLocal("baseURL", "http://192.168.0.98:11078");
+        local.setLocal("siteId", 3);
+        local.setLocal("devicenum", "90-2B-34-BF-1B-48");
       }
     },
   },
@@ -123,10 +151,11 @@ export default {
 
 <style lang="less">
 .app {
-  width: 1920px !important;
-  height: 1080px !important;
+  width: 100%;
+  min-height: 100%;
   background-color: #f5f5f5;
   font-family: Source Han Sans CN;
+  display: flex;
 }
 :root {
   // 标题颜色

sample-form-client-ui/admin/src/components/MateralsList.vue

@@ -18,9 +18,9 @@
       >
         <div
           class="matterDatumList-item flex flexc aic"
-          v-for="v in matterInfo.matterDatumList"
+          v-for="(v, i) in matterInfo.matterDatumList"
           :key="v.id"
-          @click="handleWrite"
+          @click="handleCheck(i)"
         >
           <div class="pic-box">
             <div class="pic-img-box">
@@ -81,12 +81,13 @@ export default {
     },
   },
   methods: {
-    handleWrite() {
+    handleCheck(index) {
       this.$router.push({
         path: "/showMaterials",
         query: {
           matterName: this.matterInfo.matterName,
           matterId: this.matterInfo.id,
+          index,
         },
       });
     },

sample-form-client-ui/admin/src/pages/home/Home.vue

@@ -98,12 +98,12 @@
                 <img v-if="i < 3" :src="checkTopImg(i)" />
                 <span v-else>{{ i + 1 }}.</span>
               </div>
-              <p class="flex1" v-ellipsis>
-                {{ v.materialName }}
+              <p class="flex1" v-ellipsis @click="checkMaterial(i, v)">
+                {{ v.materialName ? v.materialName : v.materiaFullName }}
               </p>
             </div>
           </div>
-          <div v-else class="tac mt50 empty-text">暂无数据</div>
+          <div v-else class="tac empty-text">暂无数据</div>
         </div>
       </div>
       <div class="right flex flexc aic jcb">
@@ -144,14 +144,14 @@
                     <img v-if="i < 3" :src="checkTopImg(i)" />
                     <span v-else>{{ i + 1 }}.</span>
                   </div>
-                  <p class="flex1" v-ellipsis>
-                    {{ v.matterName }}
+                  <p class="flex1" v-ellipsis @click="checkMatter(v)">
+                    {{ v.matterName ? v.matterName : v.matterFullName }}
                   </p>
                 </div>
               </div>
             </vue-seamless-scroll>
           </div>
-          <div v-else class="tac mt50 empty-text">暂无数据</div>
+          <div v-else class="tac empty-text">暂无数据</div>
         </div>
       </div>
     </div>
@@ -177,12 +177,21 @@
         </div>
       </div>
     </div>
+    <!-- 材料列表查看 -->
+    <MateralsList
+      :matterInfo="matterInfo"
+      :visible.sync="visible"
+    ></MateralsList>
   </div>
 </template>
 
 <script>
 import { getHomeInfo } from "@/api";
+import MateralsList from "@/components/MateralsList.vue";
 export default {
+  components: {
+    MateralsList,
+  },
   data() {
     return {
       search: "",
@@ -193,6 +202,8 @@ export default {
       homeInfo: {}, // 首页数据
       datumList: [],
       matterList: [],
+      visible: false,
+      matterInfo: {},
     };
   },
   computed: {
@@ -280,6 +291,21 @@ export default {
     handleClose() {
       this.search = "";
     },
+    // 查看材料列表
+    checkMatter(row) {
+      this.matterInfo = row;
+      this.visible = true;
+    },
+    // 查看材料
+    checkMaterial(index, row) {
+      this.$router.push({
+        path: "/showmaterials",
+        query: {
+          matterId: row.matterId,
+          index,
+        },
+      });
+    },
   },
 };
 </script>
@@ -330,7 +356,7 @@ export default {
 }
 .home {
   width: 100%;
-  height: 100%;
+  height: auto;
   padding-top: 40px;
   background-size: 100% 100%;
 }
@@ -558,6 +584,15 @@ export default {
       border: 3px solid #ffffff;
       border-radius: 16px;
       box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+      position: relative;
+      .empty-text {
+        font-size: 18px;
+        color: #999;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
       .hot-matter-list {
         height: 130px;
         padding: 0px 14px;

sample-form-client-ui/admin/src/pages/layouts/Layouts.vue

@@ -11,6 +11,6 @@ export default {};
 <style lang="less" >
 .layouts {
   width: 100%;
-  height: 100%;
+  height: auto;
 }
 </style>
\ No newline at end of file

sample-form-client-ui/admin/src/pages/showpage/ShowMaterials.vue

@@ -147,6 +147,7 @@ export default {
         };
       });
       this.materailsList = data;
+      this.active = +this.$route.query.index;
     },
 
     // 放大
@@ -172,7 +173,7 @@ export default {
 <style lang="less" scoped>
 .write-page {
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   background-color: #f5f5f5;
   .back-home {
     font-size: 28px;

sample-form-client-ui/admin/src/router/index.js

 import Vue from "vue";
 import VueRouter from "vue-router";
-// import Layouts from "@/pages/layouts/Layouts.vue"
+import Layouts from "@/pages/layouts/Layouts.vue";
 // 解决重复点击同一个路由报错
 const originalPush = VueRouter.prototype.push;
 VueRouter.prototype.push = function (location) {
@@ -22,22 +22,46 @@ const routes = [
   // 快速查看
   {
     path: "/matterList",
-    component: () => import("@/pages/showpage/MatterList.vue"),
+    component: Layouts,
+    children: [
+      {
+        path: "",
+        component: () => import("@/pages/showpage/MatterList.vue"),
+      },
+    ],
   },
   // 快速搜索
   {
     path: "/searchpage",
-    component: () => import("@/pages/searchpage/SearchPage.vue"),
+    component: Layouts,
+    children: [
+      {
+        path: "",
+        component: () => import("@/pages/searchpage/SearchPage.vue"),
+      },
+    ],
   },
   // 事项分类
   {
     path: "/matterify",
-    component: () => import("@/pages/showpage/MatterIfy.vue"),
+    component: Layouts,
+    children: [
+      {
+        path: "",
+        component: () => import("@/pages/showpage/MatterIfy.vue"),
+      },
+    ],
   },
   // 材料展示
   {
     path: "/showmaterials",
-    component: () => import("@/pages/showpage/ShowMaterials.vue"),
+    component: Layouts,
+    children: [
+      {
+        path: "",
+        component: () => import("@/pages/showpage/ShowMaterials.vue"),
+      },
+    ],
   },
 ];