menuList.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  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>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span>
  9. </div>
  10. </div>
  11. <div>
  12. <div
  13. v-for='(item, index) in list'
  14. :key='index'
  15. :class='{ "is-active": item.state }'
  16. @click='clickEventAcitve(item, index)'
  17. >{{ item.name }}</div>
  18. </div>
  19. <div class='home-right'>
  20. <span @click='dumpLegend'>
  21. <img class='img1' src='../assets/imgs/scj.png' alt />
  22. <span class='span1'>图例库</span>
  23. </span>
  24. <span class='span-out'>
  25. <img class='img2' src='../assets/imgs/cgx.png' alt />
  26. <span class='span2'>草稿箱</span>
  27. <span class='span2-num' v-if='value<=99'>{{value}}</span>
  28. <span class='span2-num' style='line-height:10px' v-else>...</span>
  29. </span>
  30. <span>
  31. <img class='img3' src='../assets/imgs/clock.png' alt />
  32. <span class='span3'>{{times}}</span>
  33. </span>
  34. </div>
  35. </div>
  36. </template>
  37. <script>
  38. import { formatTime } from '@/utils/format.js'
  39. import { mapGetters } from 'vuex'
  40. import moment from 'moment'
  41. export default {
  42. data() {
  43. return {
  44. state: '',
  45. list: [
  46. { name: '首页', state: false, route: 'first' },
  47. { name: '项目概况', state: false, route: 'overview' },
  48. { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
  49. { name: '设备设施', state: false, route: 'equipment' }, //设备设施
  50. { name: '其他事项', state: false, route: 'other' }, //其他
  51. { name: '分析 | 报表', state: false, route: 'analysis' }
  52. ],
  53. times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
  54. new Date().getHours()
  55. )}:${formatTime(new Date().getMinutes())}`,
  56. value: 190,
  57. // 路由词典
  58. dict: {
  59. first: 1,
  60. overview: 2,
  61. floorFunc: 3,
  62. equipment: 4,
  63. other: 5,
  64. analysis: 6
  65. }
  66. }
  67. },
  68. computed: {
  69. ...mapGetters(['plazas', 'plazaId'])
  70. },
  71. watch: {
  72. $route: 'handleRoute'
  73. },
  74. created() {
  75. this.currentTime()
  76. },
  77. mounted() {
  78. window.vm = this
  79. this.handleRoute(this.$route)
  80. },
  81. methods: {
  82. currentTime() {
  83. this.times = moment().format('YYYY.MM.DD HH:mm')
  84. setTimeout(this.currentTime, 1000)
  85. },
  86. handleRoute(newRouter) {
  87. if (!newRouter) {
  88. return false
  89. }
  90. const { path } = newRouter
  91. let router = path.split('home/')[1]
  92. this.modelNum(this.dict[router])
  93. },
  94. formatter(str, arrv) {
  95. if (str && arrv) {
  96. const Objs = arrv.find(e => e && e.plazaid == str)
  97. return Objs ? Objs.plazaname : '--'
  98. } else {
  99. return ''
  100. }
  101. },
  102. modelNum(val) {
  103. this.list = this.list.map((item, index) => {
  104. if (val == index + 1) {
  105. item.state = true
  106. } else {
  107. item.state = false
  108. }
  109. return item
  110. })
  111. },
  112. clickEventAcitve(item) {
  113. if (item.name == '楼层功能') {
  114. this.$cookie.set('categoryId', 'LCGN', 3)
  115. } else {
  116. this.$cookie.set('categoryId', 'GDXT', 3)
  117. }
  118. this.list.forEach(ele => {
  119. ele.state = false
  120. })
  121. item.state = true
  122. this.state = item.state
  123. this.$router.push({ path: `/home/${item.route}` })
  124. },
  125. dumpLegend() {
  126. const { conf } = window.__systemConf,
  127. { wandaBmGuideUrl } = conf
  128. window.open(`${wandaBmGuideUrl}/home/legendLibrary`, true)
  129. }
  130. },
  131. components: {}
  132. }
  133. </script>
  134. <style scoped lang="less">
  135. .menu {
  136. height: 48px;
  137. min-width: 1366px;
  138. color: #1f2429;
  139. font-size: 16px;
  140. background: rgba(255, 255, 255, 1);
  141. box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
  142. overflow: hidden;
  143. .home {
  144. width: 265px;
  145. height: 48px;
  146. // line-height: 48px;
  147. text-align: center;
  148. cursor: pointer;
  149. color: #ffffff;
  150. float: left;
  151. margin-right: 83px;
  152. // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  153. background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
  154. position: relative;
  155. .downright {
  156. position: absolute;
  157. width: 0;
  158. height: 0;
  159. border-left: 20px solid transparent;
  160. border-bottom: 48px solid #fff;
  161. right: 0px;
  162. top: 0;
  163. }
  164. .home-box {
  165. height: 100%;
  166. display: flex;
  167. align-items: center;
  168. img {
  169. width: 28px;
  170. height: 28px;
  171. margin-left: 20px;
  172. margin-right: 24px;
  173. margin-top: -3px;
  174. }
  175. span {
  176. font-size: 20px;
  177. font-family: MicrosoftYaHei;
  178. height: 27px;
  179. line-height: 27px;
  180. margin-top: -4px;
  181. &:after {
  182. content: '|';
  183. position: absolute;
  184. left: 60px;
  185. }
  186. }
  187. }
  188. }
  189. & > div:nth-of-type(2) {
  190. & > div {
  191. line-height: 48px;
  192. text-align: center;
  193. //background: url('../assets/images/topbar1.png') no-repeat;
  194. float: left;
  195. width: 80px;
  196. height: 48px;
  197. cursor: pointer;
  198. transition: all 0.2s;
  199. }
  200. .is-active {
  201. color: #025baa;
  202. font-weight: bolder;
  203. border-bottom: 2px solid #025baa;
  204. background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
  205. }
  206. }
  207. .home-right {
  208. float: right;
  209. margin-right: 20px;
  210. line-height: 48px;
  211. color: #646c73;
  212. font-size: 14px;
  213. cursor: pointer;
  214. display: flex;
  215. align-content: center;
  216. img {
  217. margin-top: -2px;
  218. }
  219. .span-out {
  220. position: relative;
  221. margin: 0 16px;
  222. .span2-num {
  223. position: absolute;
  224. right: -5px;
  225. top: 5px;
  226. display: inline-block;
  227. width: 18px;
  228. height: 18px;
  229. background: red;
  230. border-radius: 90px;
  231. font-size: 12px;
  232. text-align: center;
  233. line-height: 18px;
  234. color: #ffffff;
  235. }
  236. }
  237. }
  238. .span1,
  239. .span2 {
  240. padding: 0 6px 0 3px;
  241. }
  242. .span3 {
  243. padding-left: 3px;
  244. }
  245. }
  246. </style>
  247. <style lang="less">
  248. .menu {
  249. .el-badge__content.is-fixed {
  250. top: 10px;
  251. }
  252. }
  253. </style>