menuList.vue 12 KB

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