menuList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. <template>
  2. <!-- 顶部路由 -->
  3. <div class='menu'>
  4. <div class='home' @click='$emit("update:modelNum", 0)'>
  5. <div class='downright'></div>
  6. <div class='home-box'>
  7. <img src='@/assets/imgs/logo.png' alt />
  8. <span>{{plazaName||'万达集团'}}</span>
  9. <!-- <span v-if='plazas'>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
  10. </div>
  11. </div>
  12. <div>
  13. <div
  14. v-for='(item, index) in list'
  15. :key='index'
  16. :class='{ "is-active": item.state,"hide-home-page":item.hideHomePage }'
  17. @click='clickEventAcitve(item, index)'
  18. >{{ item.name }}</div>
  19. </div>
  20. <div class='home-right'>
  21. <span @click='dumpLegend' v-show="permissions ? permissions.includes('GLSMS_SYMBOL_MANAGE'):false">
  22. <img class='img1' src='../assets/imgs/scj.png' alt />
  23. <span class='span1'>图例库</span>
  24. </span>
  25. <span @click='toDrafts' class='span-out' v-show="permissions ? permissions.includes('GLSMS_PLANARGRAPH_MANAGE'):false">
  26. <img class='img2' src='../assets/imgs/cgx.png' alt />
  27. <span class='span2'>草稿箱</span>
  28. <span class='span2-num' v-if='draftNum && draftNum <= 99'>{{draftNum}}</span>
  29. <span class='span2-num' style='line-height:10px' v-else-if='draftNum && draftNum > 99'>...</span>
  30. </span>
  31. <span>
  32. <img class='img3' src='../assets/imgs/clock.png' alt />
  33. <span class='span3'>{{times}}</span>
  34. </span>
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. import { formatTime } from '@/utils/format.js'
  40. import { mapGetters } from 'vuex'
  41. import moment from 'moment'
  42. import { queryDraftNum } from '../../src/api/public'
  43. import store from '../store'
  44. export default {
  45. data() {
  46. return {
  47. state: '',
  48. list: [
  49. // { name: '', state: false, route: 'homepage' },
  50. //TODO: 显示首页 liujiandong用户路由跳转处理
  51. { name: '首页', state: false, route: 'homepage' },
  52. { name: '项目概况', state: false, route: 'overview' },
  53. { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
  54. { name: '设备设施', state: false, route: 'equipment' }, //设备设施
  55. { name: '其他事项', state: false, route: 'other' }, //其他
  56. { name: '分析|报表', state: false, route: 'analysis' }
  57. ],
  58. times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
  59. new Date().getHours()
  60. )}:${formatTime(new Date().getMinutes())}`,
  61. draftNum: null, //草稿箱数量
  62. interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
  63. timer: null, //保存定时器
  64. // 路由词典
  65. dict: {
  66. homepage: 1,
  67. overview: 2,
  68. floorFunc: 3,
  69. equipment: 4,
  70. other: 5,
  71. analysis: 6
  72. }
  73. }
  74. },
  75. computed: {
  76. ...mapGetters(['plazas', 'plazaId', 'fmapID', 'plazaName','permissions'])
  77. },
  78. watch: {
  79. $route: 'handleRoute'
  80. },
  81. created() {
  82. console.log('menulist created,',this.$store.state.userInfo)
  83. // 非liujiandong用户,隐藏首页入口
  84. if(this.$store.state.userInfo.username !== 'liujiandong'){
  85. this.$set(this.list,0,{ name: '', state: false, route: 'homepage', hideHomePage: true })
  86. }
  87. this.currentTime()
  88. },
  89. mounted() {
  90. this.handleRoute(this.$route)
  91. // console.log(this.fmapID)
  92. // 定时查询草稿箱数量
  93. this.getDraftNum() //首次查询
  94. this.timer = setInterval(() => {
  95. this.getDraftNum()
  96. }, this.interval)
  97. // 页面销毁前,清除定时器
  98. this.$once('hook:beforeDestroy', () => {
  99. clearInterval(this.timer)
  100. });
  101. console.log('permissions',this.permissions)
  102. },
  103. methods: {
  104. /**
  105. * @name getDraftNum
  106. * @description 查询草稿箱数量
  107. */
  108. async getDraftNum() {
  109. let res = null,
  110. data = {
  111. Distinct: true,
  112. Filters: `projectId='${this.plazaId}';isPub=false`,
  113. PageNumber: 1,
  114. PageSize: 500,
  115. Projection: ['floorId']
  116. }
  117. try {
  118. // 调用接口
  119. res = await queryDraftNum(data)
  120. } catch (error) {
  121. console.error(error)
  122. }
  123. if (!res) {
  124. this.draftNum = null
  125. return false
  126. }
  127. // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
  128. this.draftNum = res.Total || null
  129. },
  130. //入草稿箱
  131. toDrafts() {
  132. const { conf } = window.__systemConf
  133. // { editerUrl } = conf;
  134. if(!this.plazaId){
  135. return
  136. }
  137. const editerUrl = conf[process.env.NODE_ENV + '_editerUrl']
  138. let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}&token=${this.$store.state.ssoToken}`
  139. let url = editerUrl + 'drafts?' + encodeURIComponent(data)
  140. window.open(url, "drafts")
  141. },
  142. currentTime() {
  143. this.times = moment().format('YYYY.MM.DD HH:mm')
  144. setTimeout(this.currentTime, 1000)
  145. },
  146. handleRoute(newRouter) {
  147. if (!newRouter) {
  148. return false
  149. }
  150. const { path } = newRouter
  151. let router = path.split('home/')[1]
  152. this.modelNum(this.dict[router])
  153. },
  154. formatter(str, arrv) {
  155. if (str && arrv) {
  156. const Objs = arrv.find(e => e && e.plazaid == str)
  157. return Objs ? Objs.plazaname : '--'
  158. } else {
  159. return ''
  160. }
  161. },
  162. modelNum(val) {
  163. this.list = this.list.map((item, index) => {
  164. if (val == index + 1) {
  165. item.state = true
  166. } else {
  167. item.state = false
  168. }
  169. return item
  170. })
  171. },
  172. clickEventAcitve(item) {
  173. if (item.name == '楼层功能') {
  174. this.$cookie.set('categoryId', 'LCGN', 3)
  175. store.commit('SETCATEGORYID', 'LCGN')
  176. } else {
  177. this.$cookie.set('categoryId', 'GDXT', 3)
  178. store.commit('SETCATEGORYID', 'GDXT')
  179. }
  180. this.list.forEach(ele => {
  181. ele.state = false
  182. })
  183. item.state = true
  184. this.state = item.state
  185. this.$router.push({ path: `/home/${item.route}` })
  186. },
  187. dumpLegend() {
  188. const { conf } = window.__systemConf;
  189. const wandaBmGuideUrl = conf[process.env.NODE_ENV + '_wandaBmGuideUrl']
  190. window.open(`${wandaBmGuideUrl}home/legendLibrary?token=${this.$store.state.ssoToken}`, "legendLibrary")
  191. }
  192. }
  193. }
  194. </script>
  195. <style scoped lang="less">
  196. .menu {
  197. height: 48px;
  198. min-width: 1366px;
  199. color: #1f2429;
  200. font-size: 16px;
  201. background: rgba(255, 255, 255, 1);
  202. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  203. // overflow: hidden;
  204. .home {
  205. min-width: 265px;
  206. max-width: 320px;
  207. height: 48px;
  208. // line-height: 48px;
  209. text-align: center;
  210. cursor: pointer;
  211. color: #ffffff;
  212. float: left;
  213. margin-right: 83px;
  214. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  215. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  216. position: relative;
  217. .downright {
  218. position: absolute;
  219. width: 0;
  220. height: 0;
  221. border-left: 20px solid transparent;
  222. border-bottom: 48px solid #fff;
  223. right: 0px;
  224. top: 0;
  225. }
  226. .home-box {
  227. height: 100%;
  228. display: flex;
  229. align-items: center;
  230. img {
  231. width: 28px;
  232. height: 28px;
  233. margin-left: 20px;
  234. margin-right: 24px;
  235. margin-top: -3px;
  236. }
  237. span {
  238. font-size: 20px;
  239. font-family: MicrosoftYaHei;
  240. height: 27px;
  241. line-height: 27px;
  242. margin-top: -4px;
  243. &:after {
  244. content: '|';
  245. position: absolute;
  246. left: 60px;
  247. }
  248. }
  249. }
  250. }
  251. & > div:nth-of-type(2) {
  252. & > div {
  253. line-height: 48px;
  254. text-align: center;
  255. //background: url('../assets/images/topbar1.png') no-repeat;
  256. float: left;
  257. width: 88px;
  258. height: 48px;
  259. margin: 0 8px;
  260. cursor: pointer;
  261. transition: all 0.2s;
  262. // TODO: 取消隐藏 首页菜单,
  263. /* &:first-child {
  264. display: none;
  265. } */
  266. }
  267. // 改为动态根据 : 用户不是liujiandong时,隐藏首页
  268. .hide-home-page{
  269. display: none;
  270. }
  271. .is-active {
  272. color: #025baa;
  273. font-weight: bolder;
  274. border-bottom: 2px solid #025baa;
  275. background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  276. }
  277. }
  278. .home-right {
  279. float: right;
  280. margin-right: 20px;
  281. line-height: 48px;
  282. color: #646c73;
  283. font-size: 14px;
  284. cursor: pointer;
  285. display: flex;
  286. align-content: center;
  287. img {
  288. margin-top: -2px;
  289. }
  290. .span-out {
  291. position: relative;
  292. margin: 0 16px;
  293. .span2-num {
  294. position: absolute;
  295. right: -5px;
  296. top: 5px;
  297. display: inline-block;
  298. width: 18px;
  299. height: 18px;
  300. background: red;
  301. border-radius: 90px;
  302. font-size: 12px;
  303. text-align: center;
  304. line-height: 16px;
  305. color: #ffffff;
  306. }
  307. }
  308. }
  309. .span1,
  310. .span2 {
  311. padding: 0 6px 0 3px;
  312. }
  313. .span3 {
  314. padding-left: 3px;
  315. }
  316. }
  317. </style>
  318. <style lang="less">
  319. .menu {
  320. .el-badge__content.is-fixed {
  321. top: 10px;
  322. }
  323. }
  324. </style>