|
@@ -1,277 +1,265 @@
|
|
|
<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>{{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>
|
|
|
+ <!-- 顶部路由 -->
|
|
|
+ <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>{{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="value<=99">{{value}}</span>
|
|
|
- <span class="span2-num" style="line-height:10px" v-else>...</span>
|
|
|
- </span>
|
|
|
- <span>
|
|
|
- <img class="img3" src="../assets/imgs/clock.png" alt />
|
|
|
- <span class="span3">{{times}}</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='value<=99'>{{value}}</span>
|
|
|
+ <span class='span2-num' style='line-height:10px' v-else>...</span>
|
|
|
+ </span>
|
|
|
+ <span>
|
|
|
+ <img class='img3' src='../assets/imgs/clock.png' alt />
|
|
|
+ <span class='span3'>{{times}}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { formatTime } from "@/utils/format.js";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import moment from "moment";
|
|
|
+import { formatTime } from '@/utils/format.js'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import moment from 'moment'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- state: "",
|
|
|
- list: [
|
|
|
- { name: "首页", state: false, route: "first" },
|
|
|
- { 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())}`,
|
|
|
- value: 190,
|
|
|
- // 路由词典
|
|
|
- dict: {
|
|
|
- first: 1,
|
|
|
- overview: 2,
|
|
|
- floorFunc: 3,
|
|
|
- equipment: 4,
|
|
|
- other: 5,
|
|
|
- analysis: 6
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["plazas", "plazaId"])
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route: "handleRoute"
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.currentTime();
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- window.vm = this;
|
|
|
- this.handleRoute(this.$route);
|
|
|
- },
|
|
|
- methods: {
|
|
|
- currentTime() {
|
|
|
- this.times = moment().format("YYYY.MM.DD HH:mm");
|
|
|
- setTimeout(this.currentTime, 1000);
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ state: '',
|
|
|
+ list: [
|
|
|
+ { name: '首页', state: false, route: 'first' },
|
|
|
+ { 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())}`,
|
|
|
+ value: 190,
|
|
|
+ // 路由词典
|
|
|
+ dict: {
|
|
|
+ first: 1,
|
|
|
+ overview: 2,
|
|
|
+ floorFunc: 3,
|
|
|
+ equipment: 4,
|
|
|
+ other: 5,
|
|
|
+ analysis: 6
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
- handleRoute(newRouter) {
|
|
|
- if (!newRouter) {
|
|
|
- return false;
|
|
|
- }
|
|
|
- const { path } = newRouter;
|
|
|
- let router = path.split("home/")[1];
|
|
|
- this.modelNum(this.dict[router]);
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazas', 'plazaId'])
|
|
|
},
|
|
|
- formatter(str, arrv) {
|
|
|
- if (str && arrv) {
|
|
|
- const Objs = arrv.find(e => e && e.plazaid == str);
|
|
|
- return Objs ? Objs.plazaname : "--";
|
|
|
- } else {
|
|
|
- return "";
|
|
|
- }
|
|
|
+ watch: {
|
|
|
+ $route: 'handleRoute'
|
|
|
},
|
|
|
- modelNum(val) {
|
|
|
- this.list = this.list.map((item, index) => {
|
|
|
- if (val == index + 1) {
|
|
|
- item.state = true;
|
|
|
- } else {
|
|
|
- item.state = false;
|
|
|
- }
|
|
|
- return item;
|
|
|
- });
|
|
|
+ created() {
|
|
|
+ this.currentTime()
|
|
|
},
|
|
|
- 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}` });
|
|
|
+ mounted() {
|
|
|
+ window.vm = this
|
|
|
+ this.handleRoute(this.$route)
|
|
|
},
|
|
|
+ methods: {
|
|
|
+ //入草稿箱
|
|
|
+ toDrafts() {
|
|
|
+ const { conf } = window.__systemConf,
|
|
|
+ { editerUrl } = conf
|
|
|
+ let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`
|
|
|
+ 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`, true)
|
|
|
}
|
|
|
- },
|
|
|
- //入草稿箱
|
|
|
- toDrafts() {
|
|
|
- const { conf } = window.__systemConf,
|
|
|
- { editerUrl } = conf;
|
|
|
- let data = `projectId=${this.plazaId}&fmapID=${this.fmapID}`;
|
|
|
- let url = editerUrl + "drafts?" + encodeURIComponent(data);
|
|
|
- window.open(url, true);
|
|
|
}
|
|
|
- },
|
|
|
- components: {}
|
|
|
-};
|
|
|
+}
|
|
|
</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;
|
|
|
+ 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: 80px;
|
|
|
- height: 48px;
|
|
|
- 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%
|
|
|
- );
|
|
|
+ & > div:nth-of-type(2) {
|
|
|
+ & > div {
|
|
|
+ line-height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ //background: url('../assets/images/topbar1.png') no-repeat;
|
|
|
+ float: left;
|
|
|
+ width: 80px;
|
|
|
+ height: 48px;
|
|
|
+ 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;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- .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;
|
|
|
}
|
|
|
- }
|
|
|
- .span1,
|
|
|
- .span2 {
|
|
|
- padding: 0 6px 0 3px;
|
|
|
- }
|
|
|
|
|
|
- .span3 {
|
|
|
- padding-left: 3px;
|
|
|
- }
|
|
|
+ .span3 {
|
|
|
+ padding-left: 3px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
.menu {
|
|
|
- .el-badge__content.is-fixed {
|
|
|
- top: 10px;
|
|
|
- }
|
|
|
+ .el-badge__content.is-fixed {
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|