123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- <template>
- <!-- 顶部路由 -->
- <div class='menu'>
- <div class='home' @click='$emit("update:modelNum", 0)'>
- <div class='downright'></div>
- <div class='home-box'>
- <img src='@/assets/imgs/logo.png' alt />
- <span>大连高新万达广场</span>
- <!-- <span v-if='plazas'>{{plazas.length>0?formatter(plazaId,plazas):'--'}}</span> -->
- </div>
- </div>
- <div>
- <div
- v-for='(item, index) in list'
- :key='index'
- :class='{ "is-active": item.state }'
- @click='clickEventAcitve(item, index)'
- >{{ item.name }}</div>
- </div>
- <div class='home-right'>
- <span @click='dumpLegend'>
- <img class='img1' src='../assets/imgs/scj.png' alt />
- <span class='span1'>图例库</span>
- </span>
- <span @click='toDrafts' class='span-out'>
- <img class='img2' src='../assets/imgs/cgx.png' alt />
- <span class='span2'>草稿箱</span>
- <span class='span2-num' v-if='draftNum && draftNum <= 99'>{{draftNum}}</span>
- <span class='span2-num' style='line-height:10px' v-else-if='draftNum && draftNum > 99'>...</span>
- </span>
- <span>
- <img class='img3' src='../assets/imgs/clock.png' alt />
- <span class='span3'>{{times}}</span>
- </span>
- </div>
- </div>
- </template>
- <script>
- import { formatTime } from '@/utils/format.js'
- import { mapGetters } from 'vuex'
- import moment from 'moment'
- import { queryDraftNum } from '../../src/api/public'
- export default {
- data() {
- return {
- state: '',
- list: [
- { name: '首页', state: false, route: 'homepage' },
- { name: '项目概况', state: false, route: 'overview' },
- { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
- { name: '设备设施', state: false, route: 'equipment' }, //设备设施
- { name: '其他事项', state: false, route: 'other' }, //其他
- { name: '分析|报表', state: false, route: 'analysis' }
- ],
- times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
- new Date().getHours()
- )}:${formatTime(new Date().getMinutes())}`,
- draftNum: null, //草稿箱数量
- interval: 10 * 60 * 1000, //定时器时长,默认 10分钟
- timer: null, //保存定时器
- // 路由词典
- dict: {
- homepage: 1,
- overview: 2,
- floorFunc: 3,
- equipment: 4,
- other: 5,
- analysis: 6
- }
- }
- },
- computed: {
- ...mapGetters(['plazas', 'plazaId', 'fmapID'])
- },
- watch: {
- $route: 'handleRoute'
- },
- created() {
- this.currentTime()
- },
- mounted() {
- this.handleRoute(this.$route)
- // console.log(this.fmapID)
- // 定时查询草稿箱数量
- this.getDraftNum() //首次查询
- this.timer = setInterval(() => {
- this.getDraftNum()
- }, this.interval)
- // 页面销毁前,清除定时器
- this.$once('hook:beforeDestroy', () => {
- clearInterval(this.timer)
- })
- },
- methods: {
- /**
- * @name getDraftNum
- * @description 查询草稿箱数量
- */
- async getDraftNum() {
- let res = null,
- data = {
- Distinct: true,
- Filters: `projectId='${this.plazaId}';isPub=false`,
- PageNumber: 1,
- PageSize: 500,
- Projection: ['floorId']
- }
- try {
- // 调用接口
- // res = await queryDraftNum(data)
- } catch (error) {
- console.error(error)
- }
- if (!res) {
- this.draftNum = null
- return false
- }
- // 草稿箱总条数使用 res.Total, 不使用 Content数组的长度
- this.draftNum = res.Total || null
- },
- //入草稿箱
- toDrafts() {
- const { conf } = window.__systemConf,
- { editerUrl } = conf
- let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}&token=${this.$store.state.ssoToken}`
- let url = editerUrl + 'drafts?' + encodeURIComponent(data)
- window.open(url, true)
- },
- currentTime() {
- this.times = moment().format('YYYY.MM.DD HH:mm')
- setTimeout(this.currentTime, 1000)
- },
- handleRoute(newRouter) {
- if (!newRouter) {
- return false
- }
- const { path } = newRouter
- let router = path.split('home/')[1]
- this.modelNum(this.dict[router])
- },
- formatter(str, arrv) {
- if (str && arrv) {
- const Objs = arrv.find(e => e && e.plazaid == str)
- return Objs ? Objs.plazaname : '--'
- } else {
- return ''
- }
- },
- modelNum(val) {
- this.list = this.list.map((item, index) => {
- if (val == index + 1) {
- item.state = true
- } else {
- item.state = false
- }
- return item
- })
- },
- clickEventAcitve(item) {
- if (item.name == '楼层功能') {
- this.$cookie.set('categoryId', 'LCGN', 3)
- } else {
- this.$cookie.set('categoryId', 'GDXT', 3)
- }
- this.list.forEach(ele => {
- ele.state = false
- })
- item.state = true
- this.state = item.state
- this.$router.push({ path: `/home/${item.route}` })
- },
- dumpLegend() {
- const { conf } = window.__systemConf,
- { wandaBmGuideUrl } = conf
- window.open(`${wandaBmGuideUrl}home/legendLibrary?token=${this.$store.state.ssoToken}`, true)
- }
- }
- }
- </script>
- <style scoped lang="less">
- .menu {
- height: 48px;
- min-width: 1366px;
- color: #1f2429;
- font-size: 16px;
- background: rgba(255, 255, 255, 1);
- box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
- // overflow: hidden;
- .home {
- width: 265px;
- height: 48px;
- // line-height: 48px;
- text-align: center;
- cursor: pointer;
- color: #ffffff;
- float: left;
- margin-right: 83px;
- // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- position: relative;
- .downright {
- position: absolute;
- width: 0;
- height: 0;
- border-left: 20px solid transparent;
- border-bottom: 48px solid #fff;
- right: 0px;
- top: 0;
- }
- .home-box {
- height: 100%;
- display: flex;
- align-items: center;
- img {
- width: 28px;
- height: 28px;
- margin-left: 20px;
- margin-right: 24px;
- margin-top: -3px;
- }
- span {
- font-size: 20px;
- font-family: MicrosoftYaHei;
- height: 27px;
- line-height: 27px;
- margin-top: -4px;
- &:after {
- content: '|';
- position: absolute;
- left: 60px;
- }
- }
- }
- }
- & > div:nth-of-type(2) {
- & > div {
- line-height: 48px;
- text-align: center;
- //background: url('../assets/images/topbar1.png') no-repeat;
- float: left;
- width: 88px;
- height: 48px;
- margin: 0 8px;
- cursor: pointer;
- transition: all 0.2s;
- }
- .is-active {
- color: #025baa;
- font-weight: bolder;
- border-bottom: 2px solid #025baa;
- background: linear-gradient(180deg, rgba(2, 91, 170, 0) 0%, rgba(2, 91, 170, 0.2) 100%);
- }
- }
- .home-right {
- float: right;
- margin-right: 20px;
- line-height: 48px;
- color: #646c73;
- font-size: 14px;
- cursor: pointer;
- display: flex;
- align-content: center;
- img {
- margin-top: -2px;
- }
- .span-out {
- position: relative;
- margin: 0 16px;
- .span2-num {
- position: absolute;
- right: -5px;
- top: 5px;
- display: inline-block;
- width: 18px;
- height: 18px;
- background: red;
- border-radius: 90px;
- font-size: 12px;
- text-align: center;
- line-height: 18px;
- color: #ffffff;
- }
- }
- }
- .span1,
- .span2 {
- padding: 0 6px 0 3px;
- }
- .span3 {
- padding-left: 3px;
- }
- }
- </style>
- <style lang="less">
- .menu {
- .el-badge__content.is-fixed {
- top: 10px;
- }
- }
- </style>
|