menuList.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527
  1. <template>
  2. <!-- 顶部路由 -->
  3. <div :class="['menu', showStyle ? 'menu-style' : '']">
  4. <div
  5. :class="['home', showStyle ? 'home-style' : '']"
  6. @click="$emit('update:modelNum', 0)"
  7. >
  8. <div class="downright"></div>
  9. <div class="home-box">
  10. <img v-if="!showStyle" src="@/assets/imgs/logo.png" alt />
  11. <img width="24px" height="24px" v-else src="@/assets/imgs/logo1.png" alt="" />
  12. <span>{{ plazaName || "万达集团" }}</span>
  13. <!-- <span v-if='plazas'>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
  14. </div>
  15. </div>
  16. <div v-if="!showStyle" class="btnlist">
  17. <div
  18. v-for="(item, index) in list"
  19. :key="index"
  20. :class="{ 'is-active': item.state }"
  21. @click="clickEventAcitve(item, index)"
  22. >
  23. {{ item.name }}
  24. </div>
  25. </div>
  26. <div v-else class="btnlist-style">
  27. <div
  28. v-for="(item, index) in list"
  29. :key="index"
  30. :class="{ 'is-active': item.state }"
  31. @click="clickEventAcitve(item, index)"
  32. >
  33. {{ item.name }}
  34. </div>
  35. </div>
  36. <div class="home-right">
  37. <span
  38. @click="dumpLegend"
  39. v-show="permissions ? permissions.includes('GLSMS_SYMBOL_MANAGE') : false"
  40. >
  41. <img class="img1" src="../assets/imgs/scj.png" alt />
  42. <span class="span1" :style="showStyle ? 'color:#fff' : ''">图例库</span>
  43. </span>
  44. <span
  45. @click="toDrafts"
  46. class="span-out"
  47. v-show="permissions ? permissions.includes('GLSMS_PLANARGRAPH_MANAGE') : false"
  48. >
  49. <img class="img2" src="../assets/imgs/cgx.png" alt />
  50. <span class="span2" :style="showStyle ? 'color:#fff' : ''">草稿箱</span>
  51. <span class="span2-num" v-if="draftNum && draftNum <= 99">{{
  52. draftNum
  53. }}</span>
  54. <span
  55. class="span2-num"
  56. style="line-height: 10px"
  57. v-else-if="draftNum && draftNum > 99"
  58. >...</span
  59. >
  60. </span>
  61. <span>
  62. <img class="img3" src="../assets/imgs/clock.png" alt />
  63. <span class="span3" :style="showStyle ? 'color:#fff' : ''">{{
  64. times
  65. }}</span>
  66. </span>
  67. <div class="checkkout" v-show="showStyleBtn">
  68. <img
  69. v-show="showStyle"
  70. @click="checkColor"
  71. src="../assets/images/icons/switch.png"
  72. />
  73. <img
  74. v-show="!showStyle"
  75. @click="checkColor"
  76. src="../assets/images/icons/switch-1.png"
  77. />
  78. <div
  79. class="tip"
  80. :style="{ color: !showStyle ? '#8e9298' : '#69c4df','white-space':'nowrap' }"
  81. @click="checkColor"
  82. >
  83. {{ !showStyle ? "切换驾驶舱" : "切换项目首页" }}
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. </template>
  89. <script>
  90. import { formatTime } from "@/utils/format.js";
  91. import { mapGetters } from "vuex";
  92. import moment from "moment";
  93. import { queryDraftNum } from "../../src/api/public";
  94. import store from "../store";
  95. import bus from "@/utils/bus.js";
  96. export default {
  97. data() {
  98. return {
  99. state: "",
  100. list: [
  101. { name: "首页", state: false, route: "homepage" },
  102. { name: "项目概况", state: false, route: "overview" },
  103. { name: "楼层功能", state: false, route: "floorFunc" }, //楼层功能
  104. { name: "设备设施", state: false, route: "equipment" }, //设备设施
  105. { name: "其他事项", state: false, route: "other" }, //其他
  106. { name: "分析|报表", state: false, route: "analysis" },
  107. ],
  108. times: `${new Date().getFullYear()}.${formatTime(
  109. new Date().getMonth() + 1
  110. )}.${formatTime(new Date().getDate())} ${formatTime(
  111. new Date().getHours()
  112. )}:${formatTime(new Date().getMinutes())}`,
  113. draftNum: null, //草稿箱数量
  114. interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
  115. timer: null, //保存定时器
  116. // 路由词典
  117. dict: {
  118. homepage: 1,
  119. overview: 2,
  120. floorFunc: 3,
  121. equipment: 4,
  122. other: 5,
  123. analysis: 6,
  124. },
  125. // 是否显示暗色样式
  126. showStyle: false,
  127. // 是否展示切换按钮
  128. showStyleBtn: false,
  129. };
  130. },
  131. computed: {
  132. ...mapGetters([
  133. "plazas",
  134. "plazaId",
  135. "fmapID",
  136. "plazaName",
  137. "permissions",
  138. "userInfo",
  139. ]),
  140. },
  141. watch: {
  142. $route: "handleRoute",
  143. },
  144. created() {
  145. this.currentTime();
  146. // 如果为首页显示转换风格按钮
  147. if (this.$route.fullPath == "/home/homepage") {
  148. this.showStyleBtn = true;
  149. }
  150. },
  151. mounted() {
  152. this.handleRoute(this.$route);
  153. // 定时查询草稿箱数量
  154. this.getDraftNum(); //首次查询
  155. this.timer = setInterval(() => {
  156. this.getDraftNum();
  157. }, this.interval);
  158. // 页面销毁前,清除定时器
  159. this.$once("hook:beforeDestroy", () => {
  160. clearInterval(this.timer);
  161. });
  162. },
  163. methods: {
  164. /**
  165. * @name getDraftNum
  166. * @description 查询草稿箱数量
  167. */
  168. async getDraftNum() {
  169. let res = null,
  170. data = {
  171. Distinct: true,
  172. Filters: `projectId='${this.plazaId}';isPub=false`,
  173. PageNumber: 1,
  174. PageSize: 500,
  175. Projection: ["floorId"],
  176. };
  177. try {
  178. // 调用接口
  179. res = await queryDraftNum(data);
  180. } catch (error) {
  181. console.error(error);
  182. }
  183. if (!res) {
  184. this.draftNum = null;
  185. return false;
  186. }
  187. // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
  188. this.draftNum = res.Total || null;
  189. },
  190. //入草稿箱
  191. toDrafts() {
  192. const { conf } = window.__systemConf;
  193. // { editerUrl } = conf;
  194. if (!this.plazaId) {
  195. return;
  196. }
  197. const editerUrl = conf[process.env.NODE_ENV + "_editerUrl"];
  198. let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}&token=${this.$store.state.ssoToken}`;
  199. let url = editerUrl + "drafts?" + encodeURIComponent(data);
  200. window.open(url, "drafts");
  201. },
  202. currentTime() {
  203. this.times = moment().format("YYYY.MM.DD HH:mm");
  204. setTimeout(this.currentTime, 1000);
  205. },
  206. handleRoute(newRouter) {
  207. if (!newRouter) {
  208. return false;
  209. }
  210. const { path } = newRouter;
  211. let router = path.split("home/")[1];
  212. this.modelNum(this.dict[router]);
  213. // 当样式切换时样式设置为初始化
  214. if (router == "homepage") {
  215. this.showStyleBtn = true;
  216. /**
  217. * 使用localStorage中储存的, 当前用户的皮肤模式
  218. */
  219. let skinMode = localStorage.getItem(
  220. `${this.userInfo.username}__skinMode`
  221. );
  222. if (skinMode) {
  223. if (skinMode === "light") {
  224. this.showStyle = false;
  225. // 改变颜色风格
  226. bus.$emit("changeStyleColor", false);
  227. } else {
  228. this.showStyle = true;
  229. // 改变颜色风格
  230. setTimeout(() => {
  231. bus.$emit("changeStyleColor", true);
  232. });
  233. }
  234. }
  235. } else {
  236. this.showStyleBtn = false;
  237. this.showStyle = false;
  238. }
  239. },
  240. formatter(str, arrv) {
  241. if (str && arrv) {
  242. const Objs = arrv.find((e) => e && e.plazaid == str);
  243. return Objs ? Objs.plazaname : "--";
  244. } else {
  245. return "";
  246. }
  247. },
  248. modelNum(val) {
  249. this.list = this.list.map((item, index) => {
  250. if (val == index + 1) {
  251. item.state = true;
  252. } else {
  253. item.state = false;
  254. }
  255. return item;
  256. });
  257. },
  258. clickEventAcitve(item) {
  259. if (item.name == "楼层功能") {
  260. this.$cookie.set("categoryId", "LCGN", 3);
  261. store.commit("SETCATEGORYID", "LCGN");
  262. } else {
  263. this.$cookie.set("categoryId", "GDXT", 3);
  264. store.commit("SETCATEGORYID", "GDXT");
  265. }
  266. this.list.forEach((ele) => {
  267. ele.state = false;
  268. });
  269. item.state = true;
  270. this.state = item.state;
  271. this.$router.push({ path: `/home/${item.route}` });
  272. // 是否显示切换按钮
  273. if (item.route == "homepage") {
  274. this.showStyleBtn = true;
  275. } else {
  276. this.showStyleBtn = false;
  277. this.showStyle = false;
  278. }
  279. },
  280. dumpLegend() {
  281. const { conf } = window.__systemConf;
  282. const wandaBmGuideUrl = conf[process.env.NODE_ENV + "_wandaBmGuideUrl"];
  283. window.open(
  284. `${wandaBmGuideUrl}home/legendLibrary?token=${this.$store.state.ssoToken}`,
  285. "legendLibrary"
  286. );
  287. },
  288. // 切换风格
  289. checkColor() {
  290. this.showStyle = !this.showStyle;
  291. // 改变颜色风格
  292. bus.$emit("changeStyleColor", this.showStyle);
  293. /**
  294. * 皮肤模式切换后,存储用户名,皮肤模式
  295. */
  296. const newV = this.showStyle ? "dark" : "light";
  297. localStorage.setItem(`${this.userInfo.username}__skinMode`, newV);
  298. },
  299. },
  300. };
  301. </script>
  302. <style scoped lang="less">
  303. .menu {
  304. height: 48px;
  305. min-width: 1366px;
  306. color: #1f2429;
  307. font-size: 16px;
  308. background: rgba(255, 255, 255, 1);
  309. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  310. // overflow: hidden;
  311. .home {
  312. min-width: 265px;
  313. max-width: 350px;
  314. height: 48px;
  315. // line-height: 48px;
  316. text-align: center;
  317. cursor: pointer;
  318. color: #ffffff;
  319. float: left;
  320. margin-right: 83px;
  321. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  322. background: linear-gradient(
  323. 180deg,
  324. rgba(54, 156, 247, 1) 0%,
  325. rgba(2, 91, 170, 1) 100%
  326. );
  327. position: relative;
  328. .downright {
  329. position: absolute;
  330. width: 0;
  331. height: 0;
  332. border-left: 20px solid transparent;
  333. border-bottom: 48px solid #fff;
  334. right: 0px;
  335. top: 0;
  336. }
  337. .home-box {
  338. height: 100%;
  339. display: flex;
  340. align-items: center;
  341. img {
  342. width: 28px;
  343. height: 28px;
  344. margin-left: 20px;
  345. margin-right: 24px;
  346. margin-top: -3px;
  347. }
  348. span {
  349. font-size: 20px;
  350. font-family: MicrosoftYaHei;
  351. height: 27px;
  352. line-height: 27px;
  353. margin-top: -4px;
  354. &:after {
  355. content: "|";
  356. position: absolute;
  357. left: 60px;
  358. }
  359. }
  360. }
  361. }
  362. .home-style {
  363. display: flex;
  364. justify-content: space-between;
  365. background: linear-gradient(180deg, #103979 0%, #162653 100%);
  366. margin-right: 0px;
  367. height:76px;
  368. .downright {
  369. position: absolute;
  370. width: 0;
  371. height: 0;
  372. border-left: 40px solid transparent;
  373. border-bottom: 76px solid #0c102c;
  374. right: 0px;
  375. top: 0;
  376. }
  377. span{
  378. font-size: 30px;
  379. }
  380. }
  381. .btnlist {
  382. & > div {
  383. line-height: 48px;
  384. text-align: center;
  385. //background: url('../assets/images/topbar1.png') no-repeat;
  386. float: left;
  387. width: 88px;
  388. height: 48px;
  389. margin: 0 8px;
  390. cursor: pointer;
  391. transition: all 0.2s;
  392. flex: 1;
  393. }
  394. .is-active {
  395. color: #025baa;
  396. font-weight: bolder;
  397. border-bottom: 2px solid #025baa;
  398. background: linear-gradient(
  399. 180deg,
  400. rgba(2, 91, 170, 0) 0%,
  401. rgba(2, 91, 170, 0.2) 100%
  402. );
  403. }
  404. }
  405. .btnlist-style {
  406. display: flex;
  407. align-content: center;
  408. & > div {
  409. line-height: 48px;
  410. background: url("../assets/imgs/btn-rect.png") no-repeat;
  411. float: left;
  412. max-width: 142px;
  413. min-width: 100px;
  414. height: 48px;
  415. margin: 0 8px;
  416. cursor: pointer;
  417. transition: all 0.2s;
  418. color: #fff;
  419. }
  420. .is-active {
  421. color: #95bfff;
  422. font-weight: bolder;
  423. background: url("../assets/imgs/btn-rect-active.png") no-repeat;
  424. }
  425. }
  426. .home-right {
  427. float: right;
  428. margin-right: 40px;
  429. line-height: 48px;
  430. color: #646c73;
  431. font-size: 14px;
  432. cursor: pointer;
  433. display: flex;
  434. align-content: center;
  435. img {
  436. margin-top: -2px;
  437. }
  438. .span-out {
  439. // position: relative;
  440. margin: 0 16px;
  441. .span2-num {
  442. position: absolute;
  443. right: -5px;
  444. top: 5px;
  445. display: inline-block;
  446. width: 18px;
  447. height: 18px;
  448. background: red;
  449. border-radius: 90px;
  450. font-size: 12px;
  451. text-align: center;
  452. line-height: 16px;
  453. color: #ffffff;
  454. }
  455. }
  456. }
  457. .span1,
  458. .span2 {
  459. padding: 0 6px 0 3px;
  460. }
  461. .span3 {
  462. padding-left: 3px;
  463. }
  464. }
  465. .btnlist-style {
  466. display: flex;
  467. align-content: center;
  468. margin-top: 28px;
  469. & > div {
  470. line-height: 48px;
  471. text-align: center;
  472. padding-left: 12px;
  473. box-sizing: border-box;
  474. background: url("../assets/imgs/btn-rect.png") no-repeat;
  475. float: left;
  476. max-width: 142px;
  477. min-width: 100px;
  478. height: 48px;
  479. margin: 0 8px;
  480. cursor: pointer;
  481. transition: all 0.2s;
  482. color: #fff;
  483. }
  484. .is-active {
  485. color: #95bfff;
  486. font-weight: bolder;
  487. background: url("../assets/imgs/btn-rect-active.png") no-repeat;
  488. }
  489. }
  490. .menu-style {
  491. background: #0c102c;
  492. display: flex;
  493. justify-content: space-between;
  494. height: 76px;
  495. .home-right{
  496. margin-top: 28px;
  497. height: 48px;
  498. }
  499. }
  500. .checkkout {
  501. display: flex;
  502. align-items: center;
  503. line-height: 48px;
  504. color: #646c73;
  505. margin-left: 16px;
  506. img {
  507. width: 24px;
  508. height: 24px;
  509. }
  510. }
  511. </style>
  512. <style lang="less">
  513. .menu {
  514. .el-badge__content.is-fixed {
  515. top: 10px;
  516. }
  517. }
  518. </style>