新增首页，跳转隐藏其中4个页面top栏3个按钮

liuyg

2021-05-07 284d43e9564aa8920bd04aa5c485a43c427bd173

新增首页，跳转隐藏其中4个页面top栏3个按钮

 public/img/anjian.jpg

 public/img/bjkeji.jpg

 public/img/fangyi.jpg

 public/img/tiwen.jpg

 public/img/tongji.jpg

 public/img/yijianbaoj.jpg

 src/page/crumbsL/crumbsL.vue

@@ -21,7 +21,9 @@
        :key="item.path"
      >
      <div class="aaa" v-show="breadListLast.length != index + 1">
        <a href="javascript:;" @click="$router.push({ path: item.path})">{{ item.name }}</a>&nbsp/&nbsp
          <a href="javascript:;" @click="$router.push({ path: item.path })"
            >{{ item.name }} </a
          >&nbsp/&nbsp
      </div>
      <div class="bbb" v-show="breadListLast.length == index + 1">
        <div>{{ item.name }}</div>
@@ -86,15 +88,31 @@
          p = path.split("/").pop(),
          n = this.$route.name,
          s = this.$store.state.common.liuState;
        var showDataL =
          n == "首页"
            ? false
            : n == "健康码管理"
            ? false
            : n == "包裹管理"
            ? false
            : n == "体温管理"
            ? false
            : n == "研判洞察"
            ? false
            : true;
        this.$store.commit("SET_SHOWDATAL", showDataL);

        // console.log("path:" + p);
        // console.log("name:" + n);
        // console.log("showDataL:" + showDataL);
        // console.log("state:  ", s);
        // console.log(this.sOld,s);
        if (this.sOld != s) {
          //一级菜单
          this.breadListLast = [];
          this.breadListLast.push({
            name: n == "首页" ? "数据模式" : n,
            // name: n == "首页" ? "数据模式" : n,
            name: n,
            path: path,
          });
          // console.log(p, n, "写入一级面包屑");
@@ -108,9 +126,9 @@
          //判断是否有重复项，有则删除其后路由↓
          var ourP = this.breadListLast;
          for (var os in ourP) {
            if (n == "首页") {
              n = "数据模式";
            }
            // if (n == "首页") {
            //   n = "数据模式";
            // }
            if (ourP[os].name == n && os != ourP.length - 1) {
              this.breadListLast.splice(
                +os + 1,
@@ -124,7 +142,6 @@
        this.sOld = s;
        // window.localStorage.crumbsl = this.breadListLast;
        localStorage.setItem("crumbsl", JSON.stringify(this.breadListLast));

      }
    },
    loadChange2(states) {
@@ -312,7 +329,6 @@
        this.isrf = false;
         console.log("页面被刷新,但后台没有数据");
      }
     
    }
    this.loadChange("moun");
  },
@@ -320,7 +336,7 @@
</script>
<style lang="scss" scoped>
.breadEval {
  color: rgba($color: #000000, $alpha: .7);
  color: rgba($color: #000000, $alpha: 0.7);
  position: relative;
  top: -10px;
  font-size: 14px;

 src/page/index/top/index.vue

@@ -11,8 +11,8 @@
      </div>
    </div>
    <div class="top-bar__title">
      <div class="top-bar__item top-bar__item--show" v-if="showMenu">
        <top-menu ref="topMenu"></top-menu>
        <div class="top-bar__item top-bar__item--show">
          <top-menu ref="topMenu" v-if="showMenu"></top-menu>
      </div>
      <!--去除顶部搜索栏-->
      <!--      <span class="top-bar__item"-->
@@ -140,7 +140,7 @@
import topLang from "./top-lang";

//面包屑
import crumbsL from '../../crumbsL/crumbsL'
import crumbsL from "../../crumbsL/crumbsL";

export default {
  components: {
@@ -153,7 +153,7 @@
    topNotice,
    topLang,
    //面包屑
    crumbsL
    crumbsL,
  },
  name: "top",
  data() {
@@ -172,7 +172,7 @@
      showFullScren: (state) => state.common.showFullScren,
      showCollapse: (state) => state.common.showCollapse,
      showSearch: (state) => state.common.showSearch,
      showMenu: (state) => state.common.showMenu,
      showMenu: (state) => state.dataL.showdataL,
      showColor: (state) => state.common.showColor,
    }),
    ...mapGetters([

 src/page/index/top/top-menu.vue

@@ -48,7 +48,7 @@
      dataItem: {
        name: "数据模式",
        source: "el-icon-s-data",
        path: "/wel/index",
        path: "/welcomeData/data",
      },
      mapItem: {
        name: "地图模式",

 src/router/views/index.js

@@ -11,7 +11,7 @@
            i18n: 'dashboard'
        },
        component: () =>
            import( /* webpackChunkName: "views" */ '@/views/supervisoryConsole/data')
            import( /* webpackChunkName: "views" */ '@/views/dataL/homeL')
    }]
},

@@ -416,6 +416,20 @@
            import( /* webpackChunkName: "views" */ '@/views/report/announcementReport')
    }]
},
// {
//     path: '/dataL',
//     redirect: '/dataL/homeL',
//     component: Layout,
//     children: [{
//         path: 'homeL',
//         name: '首页',
//         meta: {
//             i18n: 'report'
//         },
//         component: () =>
//             import( /* webpackChunkName: "views" */ '@/views/dataL/homeL')
//     }]
// },




 src/store/modules/dataL.js

@@ -9,11 +9,15 @@

    state: {
        dataLa: null,
        showdataL: false,
    },
    mutations: {
        SET_DATAL: (state, dataLa) => {
            state.dataLa = dataLa;
        },
        SET_SHOWDATAL: (state, isit) => {
            state.showdataL = isit;
        },
    }
}
export default dataL;

 src/views/dataL/homeL.vue

New file
@@ -0,0 +1,130 @@
<template>
  <div id="homeL">
    <div class="homeL-up">
      <span class="h1">物联网安保云服务平台</span>
      <span class="h2">IoT security cloud service platform</span>
    </div>
    <div class="homeL-bar">
      <div class="down1" @click="down1"><span>一键报警</span></div>
      <div class="down2" @click="down2"><span>防疫健康码</span></div>
      <div class="down3" @click="down3"><span>安检包裹</span></div>
      <div class="down4" @click="down4"><span>体温检测</span></div>
      <div class="down5" @click="down5"><span>统计分析</span></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
    };
  },
  methods: {
    down1() {
      this.$router.push({ path: "/welcomeData/data" });
    },
    down2() {
      this.$router.push({ path: "/healthcode/healthcode" });

    },
    down3() {
      this.$router.push({ path: "/parcel/parcel" });
    },
    down4() {
      this.$router.push({ path: "/animalHeat/animalHeat" });
    },
    down5() {
      this.$router.push({ path: "/home/index" });
    },
  },
  mouted() {},
};
</script>

<style lang="scss">
#homeL {
  width: 100%;
  height: 100%;
  //   border: 1px solid #000;
  .homeL-up {
    width: 100%;
    height: 70%;
    // border: 1px solid rgb(39, 164, 185);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-image: url("../../../public/img/bjkeji.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    color: #fff;

    .h1 {
      font-size: 50px;
    }
    .h2 {
      font-size: 14px;
    }
  }
  .homeL-bar {
    width: 100%;
    height: 30%;
    position: relative;
    top: 2.5px;
    // border: 1px solid rgb(51, 22, 180);
    display: flex;
    align-items: center;
    justify-content: center;
    div {
      width: 20%;
      height: 100%;
      //   border: 1px solid rgb(180, 22, 75);
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        width: 20%;
        height: 97%;
      }
      span {
        position: relative;
        top: -30px;
        left: -50px;
        font-weight: 600;
        font-size: 30px;
        color: #fff;
        display: inline-block;
        // border: 1px solid rgb(180, 22, 75);
      }
    }
    .down1 {
      background-image: url("../../../public/img/yijianbaoj.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .down2 {
      background-image: url("../../../public/img/fangyi.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .down3 {
      background-image: url("../../../public/img/anjian.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .down4 {
      background-image: url("../../../public/img/tiwen.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .down5 {
      background-image: url("../../../public/img/tongji.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>