ISMS-Visualization-BJGD-TKT/src/views/components/baseFooter/FooterNavigation.vue

<template>
  <div
    class="footer-navigation-container"
    v-if="$route.name == 'basePage' || $route.name === null"
  >
    <div class="btn-box">
      <div
        class="btn"
        v-for="(item, index) in btnList"
        :key="item.id"
        :style="{
          left: item.left,
          top: (item.level * 7).toString() + 'px',
          backgroundImage: 'url(' + item.icon + ')',
        }"
        @mouseover="mouseover(item)"
        @mouseout="mouseout(item, index)"
        @click="click(item, index)"
      >
        <!-- {{ item.text + item.id }} -->
      </div>
    </div>
    <div class="home-btn-box" @click="toDefaultView"></div>
  </div>
</template>

<script>
import { getFooterNavigationList } from "@/API/visual";
import {
  flyToPerspective,
  setModelShow,
  setDataSourceShow,
  openLayer,
  openDialog,
  setUnderPipeline,
  setUndergroundMode,
  setBuildId,
  setBuildInfoByBuildId,
} from "@/utils/mapUtil.js";

export default {
  name: "FooterNavigation",
  data() {
    return {
      btnSel: -1,
      btnList: [],
      btnList1: [
        {
          id: 1,
          icon: "/imgs/footerNavigation/icon_RY_nor@2x.png",
          iconNor: "/imgs/footerNavigation/icon_RY_nor@2x.png",
          iconSel: "/imgs/footerNavigation/icon_RY_sel@2x.png",
          text: "按钮",
          script: "alert(111)",
          left: "calc(50% - 74px)",
          level: 0,
        },
      ],

      btnPositionList: [
        {
          left: "calc(50% - 74px)",
          level: 0,
        },
        {
          left: "calc(50% + 13px)",
          level: 0,
        },
        {
          left: "calc(50% - 161px)",
          level: 1,
        },
        {
          left: "calc(50% + 100px)",
          level: 1,
        },
        {
          left: "calc(50% - 248px)",
          level: 2,
        },
        {
          left: "calc(50% + 187px)",
          level: 2,
        },
        {
          left: "calc(50% - 335px)",
          level: 3,
        },
        {
          left: "calc(50% + 274px)",
          level: 3,
        },
        {
          left: "calc(50% - 422px)",
          level: 4,
        },
        {
          left: "calc(50% + 361px)",
          level: 4,
        },
        {
          left: "calc(50% - 509px)",
          level: 5,
        },
        {
          left: "calc(50% + 448px)",
          level: 5,
        },
      ],
    };
  },
  watch: {
    $route(to, from) {},
  },
  mounted() {
    if (localStorage.getItem("token") !== null) {
      this.getNavigationList();
    }
  },
  methods: {
    flyToPerspective,
    setModelShow,
    setDataSourceShow,
    openLayer,
    openDialog,
    setUnderPipeline,
    setUndergroundMode,
    setBuildId,
    setBuildInfoByBuildId,
    initMap() {
      this.setBuildId("");
      // this.jumpRoute("/basePage", { buildId: "654044537953460225" });
      // setTimeout(() => {
      //   this.setBuildInfoByBuildId("654044537953460225");
      // }, 500);
    },
    jumpRoute(path, param) {
      if (!path) return;
      let route = { path: path };
      if (param) {
        // if (path === "/page2" && !!param.path) param.path = decodeURIComponent(param.path);
        if (!!param.path) param.path = decodeURIComponent(param.path);

        route["query"] = { ...param };
      }
      this.$router.push(route);
    },
    async getNavigationList() {
      try {
        const p = {};
        const res = await getFooterNavigationList(p);
        // console.log("底部菜单", res.data);
        res.data.content.forEach((item, index) => {
          const btn = {
            id: item.id,
            icon: item.iconNorPath,
            iconNor: item.iconNorPath,
            iconSel: item.iconSelPath,
            text: item.name,
            script: item.script,
            left: this.btnPositionList[index].left,
            level: this.btnPositionList[index].level,
          };
          item.left = this.btnPositionList[index].left;
          item.level = this.btnPositionList[index].level;
          this.btnList.push(btn);
        });
        // this.initMap(); //托克托不需要
        // console.log(this.btnList, "按钮列表");
      } catch (err) {
        console.log(err);
      }
    },

    mouseover(item) {
      item.icon = item.iconSel;
    },
    mouseout(item, index) {
      if (this.btnSel != index) {
        item.icon = item.iconNor;
      }
    },
    click(item, index) {
      try {
        //this.btnSel = index;
        this.btnList.forEach((element, loopIndex) => {
          if (this.btnSel === loopIndex) {
            element.icon = element.iconSel;
          } else {
            element.icon = element.iconNor;
          }
        });
        eval(item.script);
      } catch (error) {
        console.log(error);
      }
    },
    toDefaultView() {
      this.$store.dispatch("globalConfig/setMapMode", {
        value: "3d",
      });
    },
    openFooterDialog(type) {
      if (type) {
        switch (type) {
          case "fbky":
            console.log("防爆扩音");
            this.$store.dispatch("globalConfig/setSoundDialog", {
              show: true,
              dialogMsg: {},
              type: "All",
            });
            break;
          case "crkz":
            console.log("出入控制");
            this.$store.dispatch("globalConfig/setAccessControlDialog", {
              show: true,
              dialogMsg: {},
              type: "All",
            });
            break;
          case "jgyt":
            console.log("激光云台");
            this.$store.dispatch("globalConfig/setJGYTControlDialog", {
              show: true,
              dialogMsg: {},
              type: "All",
            });
            break;
          case "yyth":
            console.log("语音通话");
            this.$store.dispatch("globalConfig/setVoiceCallDialog", {
              show: true,
              dialogMsg: {},
              type: "All",
            });
            break;

          default:
            break;
        }
      }
      // this.getTestList();
    },
  },
};
</script>

<style lang="less" scoped>
.footer-navigation-container {
  border: 0px solid red;
  pointer-events: initial;
  position: absolute;
  z-index: 1800; // loading层是2000 设置高一些，下拉菜单会盖住loading层
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 1020px /* 1858/192 */;
  height: 135px /* 46/192 */;
  .btn-box {
    .btn {
      position: absolute;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: inline-block;
      border: 0px solid rgb(0, 255, 136);
      box-sizing: border-box;
      height: 75px;
      width: 62px;
      cursor: pointer;
    }
  }
  .home-btn-box {
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    // background-image: url("/imgs/footerNavigation/buttn_GKPT.png");
    display: inline-block;
    border: 0px solid rgb(0, 255, 136);
    box-sizing: border-box;
    height: 35px;
    width: 107px;
    left: 456px;
    top: 100px;
    cursor: pointer;
  }
}
</style>