|
@@ -0,0 +1,631 @@
|
|
|
+<template>
|
|
|
+ <div class="menusContainer">
|
|
|
+ <div class="top-search">
|
|
|
+ <div class="title">
|
|
|
+ <section v-if="typeIndex == null">
|
|
|
+ <span>热门服务</span>
|
|
|
+ </section>
|
|
|
+ <section v-else>
|
|
|
+ <div class="tabs">
|
|
|
+ <div class="tab" @click="changeHot">热门服务</div>
|
|
|
+ <div class="tab tab1">{{ trees[typeIndex].name }}</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
+ <div class="search">
|
|
|
+ <div class="input">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="请输入要办理的业务名"
|
|
|
+ @focus="focus"
|
|
|
+ @blur="blur"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="searchBtn btnActive">
|
|
|
+ <img src="@/assets/menu/sou.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top">
|
|
|
+ <div class="menus">
|
|
|
+ <div
|
|
|
+ class="menu btnActive"
|
|
|
+ v-for="(item, index) in formatMap"
|
|
|
+ :key="index"
|
|
|
+ @click="menuEvent(item)"
|
|
|
+ >
|
|
|
+ <img :src="item.menuImg || item.img" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pager" v-if="maxPage > 0">
|
|
|
+ <div
|
|
|
+ class="last btnActive"
|
|
|
+ :class="pageNum === 1 ? 'pager-disable' : ''"
|
|
|
+ @click="pageNum > 1 ? pageNum-- : ''"
|
|
|
+ >
|
|
|
+ <
|
|
|
+ </div>
|
|
|
+ <div class="pages">
|
|
|
+ <div
|
|
|
+ class="doc"
|
|
|
+ :class="index + 1 === pageNum ? 'doc-active' : ''"
|
|
|
+ v-for="(item, index) in maxPage"
|
|
|
+ :key="index"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="next btnActive"
|
|
|
+ :class="pageNum === maxPage ? 'pager-disable' : ''"
|
|
|
+ @click="pageNum < maxPage ? pageNum++ : ''"
|
|
|
+ >
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div class="tip">业务列表 {{ tree }}{{ hot }}</div>
|
|
|
+ <div class="menu-type">
|
|
|
+ <div
|
|
|
+ class="type btnActive"
|
|
|
+ v-for="(item, index) in trees"
|
|
|
+ :key="index"
|
|
|
+ @click="typeEvent(item, index)"
|
|
|
+ >
|
|
|
+ <div class="type-icon">
|
|
|
+ <img :src="index === typeIndex ? item.selectIcon : item.icon" />
|
|
|
+ </div>
|
|
|
+ <div class="type-text">{{ item.name }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { debug } from "@/api/zxbg";
|
|
|
+import { saveLog } from "@/api/index";
|
|
|
+export default {
|
|
|
+ name: "NewsmzcMenuTemplate",
|
|
|
+
|
|
|
+ props: ["treeData", "hotData", "vertexId"],
|
|
|
+
|
|
|
+ computed: {
|
|
|
+ tree() {
|
|
|
+ let treeData = this.treeData;
|
|
|
+ this.treeInit(treeData);
|
|
|
+ return "";
|
|
|
+ },
|
|
|
+
|
|
|
+ hot() {
|
|
|
+ let hotData = this.hotData;
|
|
|
+ this.hotInit(hotData);
|
|
|
+ return "";
|
|
|
+ },
|
|
|
+
|
|
|
+ formatMap() {
|
|
|
+ let nowMenus = this.nowMenus;
|
|
|
+ if (nowMenus && nowMenus.size) {
|
|
|
+ return nowMenus.get(this.pageNum) || [];
|
|
|
+ } else {
|
|
|
+ return [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ maxPage() {
|
|
|
+ let nowMenus = this.nowMenus;
|
|
|
+ if (nowMenus && nowMenus.size) {
|
|
|
+ return nowMenus.size;
|
|
|
+ } else {
|
|
|
+ return 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageNum: 1,
|
|
|
+
|
|
|
+ nowMenus: [],
|
|
|
+ hotMenus: [],
|
|
|
+ trees: [],
|
|
|
+
|
|
|
+ typeIndex: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {},
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ treeInit(treeData) {
|
|
|
+ if (treeData && treeData.children) {
|
|
|
+ let data = [];
|
|
|
+ for (let i = 0; i < treeData.children.length; i++) {
|
|
|
+ const item = treeData.children[i];
|
|
|
+ const dataObj = {
|
|
|
+ name: item.name,
|
|
|
+ icon: item.imgon,
|
|
|
+ selectIcon: item.imgdown,
|
|
|
+ menus: this.customPager(item.children),
|
|
|
+ };
|
|
|
+ data.push(dataObj);
|
|
|
+ }
|
|
|
+ this.trees = data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ hotInit(hotData) {
|
|
|
+ if (hotData && hotData.length > 0) {
|
|
|
+ this.nowMenus = this.hotMenus = this.customPager(hotData);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ customPager(array) {
|
|
|
+ const map = new Map();
|
|
|
+ for (let i = 0; i < array.length; i += 6) {
|
|
|
+ map.set(map.size + 1, array.slice(i, i + 6));
|
|
|
+ }
|
|
|
+ return map;
|
|
|
+ },
|
|
|
+
|
|
|
+ typeEvent(e, i) {
|
|
|
+ this.typeIndex = i;
|
|
|
+ this.nowMenus = e.menus;
|
|
|
+ this.pageReset();
|
|
|
+ },
|
|
|
+
|
|
|
+ changeHot() {
|
|
|
+ this.typeIndex = null;
|
|
|
+ this.nowMenus = this.hotMenus;
|
|
|
+ this.pageReset();
|
|
|
+ },
|
|
|
+
|
|
|
+ pageReset() {
|
|
|
+ this.pageNum = 1;
|
|
|
+ },
|
|
|
+
|
|
|
+ getLoginType(str) {
|
|
|
+ let loginPath = "";
|
|
|
+ let logins = JSON.parse(str);
|
|
|
+ if (logins.length == 1) {
|
|
|
+ if (logins[0] == 0) {
|
|
|
+ // 0 代表免登录
|
|
|
+ } else if (logins[0] == 1) {
|
|
|
+ loginPath = "/phoneLogin";
|
|
|
+ } else if (logins[0] == 2) {
|
|
|
+ loginPath = "/brushCard";
|
|
|
+ } else if (logins[0] == 3) {
|
|
|
+ loginPath = "/brushCard";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ loginPath = "/loginType";
|
|
|
+ }
|
|
|
+ return loginPath;
|
|
|
+ },
|
|
|
+
|
|
|
+ menuEvent(e) {
|
|
|
+ sessionStorage.setItem("yw_info", JSON.stringify(e));
|
|
|
+ if (e.status) {
|
|
|
+ if (e.status == "0") {
|
|
|
+ this.$emit("menuEvent", e);
|
|
|
+ this.saveHotLog(e);
|
|
|
+ } else {
|
|
|
+ this.$msgbox({
|
|
|
+ title: "提示",
|
|
|
+ content: "当前功能不可用!",
|
|
|
+ type: "warning",
|
|
|
+ showCansole: true,
|
|
|
+ })
|
|
|
+ .then(() => {})
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$emit("hotEvent", e);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.saveHotLog(e);
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ saveHotLog(e) {
|
|
|
+ var form = {
|
|
|
+ // 市
|
|
|
+ vertexName: JSON.parse(sessionStorage.getItem("PUBLIC_INFO")).dname,
|
|
|
+ vertexId: this.vertexId,
|
|
|
+ /**
|
|
|
+ * 功能菜单id自己
|
|
|
+ */
|
|
|
+ menuId: e.id,
|
|
|
+ /**
|
|
|
+ * 功能名称自己
|
|
|
+ */
|
|
|
+ menuName: e.name,
|
|
|
+ /**
|
|
|
+ * 终端id
|
|
|
+ */
|
|
|
+ smzcTerminalId: JSON.parse(sessionStorage.getItem("MACHINE_INFO")).id,
|
|
|
+ /**
|
|
|
+ * 热门图片
|
|
|
+ */
|
|
|
+ menuImg: JSON.parse(sessionStorage.getItem("hotImg")),
|
|
|
+ /**
|
|
|
+ * 部门名称
|
|
|
+ */
|
|
|
+ departmentName: "",
|
|
|
+ /**
|
|
|
+ * 前端链接
|
|
|
+ */
|
|
|
+ preUrl: e.path,
|
|
|
+ /**
|
|
|
+ * 接口code
|
|
|
+ */
|
|
|
+ code: "",
|
|
|
+ /**
|
|
|
+ * 后端链接
|
|
|
+ */
|
|
|
+ afUrl: "",
|
|
|
+ /**
|
|
|
+ * 区名
|
|
|
+ */
|
|
|
+ county: JSON.parse(sessionStorage.getItem("PUBLIC_INFO")).qname,
|
|
|
+ };
|
|
|
+ saveLog(form).then((res) => {});
|
|
|
+ },
|
|
|
+
|
|
|
+ focus() {
|
|
|
+ var data = {
|
|
|
+ funcId: "openDwInput",
|
|
|
+ data: {
|
|
|
+ dwFilePath: "D:\\DWIme",
|
|
|
+ defLayout: "Kamfu_hw26",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ this.bringUpKeyboard(data);
|
|
|
+ },
|
|
|
+
|
|
|
+ blur() {
|
|
|
+ var data = {
|
|
|
+ funcId: "closeExe",
|
|
|
+ data: {
|
|
|
+ exeName: "dwime",
|
|
|
+ },
|
|
|
+ };
|
|
|
+ this.bringUpKeyboard(data);
|
|
|
+ },
|
|
|
+
|
|
|
+ bringUpKeyboard(e) {
|
|
|
+ let from = {};
|
|
|
+ from.namespace = "ServiceApp.service";
|
|
|
+ from.serviceId = "SystemService";
|
|
|
+ from.funcId = e.funcId;
|
|
|
+ from.xlh = "";
|
|
|
+ from.data = e.data;
|
|
|
+ from.data = e.data;
|
|
|
+ debug(JSON.stringify(from)).then((response) => {});
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.menusContainer {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .top-search {
|
|
|
+ width: 100%;
|
|
|
+ height: 122px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ margin-top: 60px;
|
|
|
+ width: fit-content;
|
|
|
+ font-family: "苹方简R";
|
|
|
+ color: #000000;
|
|
|
+ letter-spacing: 8.4px;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 22px 0 44px;
|
|
|
+ width: fit-content;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: "苹方简R";
|
|
|
+ color: #ffffff;
|
|
|
+ background: #4d58f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-width: 22px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent transparent transparent #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ right: -44px;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-width: 22px;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: transparent transparent transparent #4d58f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab1 {
|
|
|
+ margin-left: 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1800px) {
|
|
|
+ .title {
|
|
|
+ font-size: 44px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1800px) {
|
|
|
+ .title {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .search {
|
|
|
+ margin-left: 44px;
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ max-width: 500px;
|
|
|
+ background: rgba(0, 0, 0, 0);
|
|
|
+ border: 2px solid #578cff;
|
|
|
+ border-radius: 36px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ width: 0;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ input {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ font-family: "苹方简R";
|
|
|
+ outline: none;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .searchBtn {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1800px) {
|
|
|
+ .search {
|
|
|
+ height: 68px;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ input {
|
|
|
+ padding-left: 60px;
|
|
|
+ padding-right: 60px;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1800px) {
|
|
|
+ .search {
|
|
|
+ height: 45px;
|
|
|
+
|
|
|
+ .input {
|
|
|
+ input {
|
|
|
+ padding-left: 25px;
|
|
|
+ padding-right: 25px;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ padding-top: 28px;
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .menus {
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .menu {
|
|
|
+ margin-left: 21px;
|
|
|
+ width: calc((100% / 3) - 21px);
|
|
|
+ height: calc(50% - 21px);
|
|
|
+ line-height: 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: fill;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu:nth-child(3n-2) {
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pager {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .last,
|
|
|
+ .next {
|
|
|
+ width: 83px;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ font-size: 34px;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: rgb(220, 220, 220);
|
|
|
+ }
|
|
|
+
|
|
|
+ .pager-disable {
|
|
|
+ background: #eeeeee;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pages {
|
|
|
+ margin: 0 60px;
|
|
|
+ width: fit-content;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .doc {
|
|
|
+ margin: 0 7px;
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid #cdcdcd;
|
|
|
+ border-radius: 50%;
|
|
|
+ transition: background 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .doc-active {
|
|
|
+ background: #cdcdcd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 260px;
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ width: 100%;
|
|
|
+ height: 60px;
|
|
|
+ line-height: 60px;
|
|
|
+ font-family: "苹方简R";
|
|
|
+ color: #000000;
|
|
|
+ letter-spacing: 8.4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (min-width: 1800px) {
|
|
|
+ .tip {
|
|
|
+ font-size: 44px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 1800px) {
|
|
|
+ .tip {
|
|
|
+ font-size: 34px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-type {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .type {
|
|
|
+ width: 200px;
|
|
|
+ min-width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .type-icon {
|
|
|
+ width: auto;
|
|
|
+ height: 145px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: auto;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .type-text {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: "苹方简R";
|
|
|
+ color: #000000;
|
|
|
+ line-height: 46px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-type::-webkit-scrollbar-thumb {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ background: #b9cefc;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-type::-webkit-scrollbar-track {
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-type::-webkit-scrollbar {
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|