123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356 |
- <template>
- <div id='app'>
- <div :id='`fengMap${id}`' class='fengMap'></div>
- <router-view />
- </div>
- </template>
- <script>
- import { mapGetters, mapActions, mapMutations } from 'vuex'
- import { SFengParser } from '@saga-web/feng-map'
- import { setFloor } from '@/api/public.js'
- window.fengmapData = null
- export default {
- data() {
- return {
- view: '',
- scene: '',
- id: '2',
- canvasID: '',
- key: '23f30a832a862c58637a4aadbf50a566',
- appName: '万达可视化系统',
- mapServerURL: `http://map.wanda.cn/editor`,
- mapthemeUrl: `http://map.wanda.cn/editor/webtheme`,
- isMounted: false,
- plazaIds: '',
- }
- },
- /**
- * 刷新保存vuex信息
- */
- created() {
- let beforeunload = JSON.parse(localStorage.getItem('beforeunload'))
- // 删除 store中的ssoToken
- if (beforeunload) {
- delete beforeunload.ssoToken
- delete beforeunload.plazaId
- delete beforeunload.isPreview
- }
- let plazaId = localStorage.getItem('PLAZAID')
- let isPreview = sessionStorage.getItem('SETISPREVIEW')
- this.$store.replaceState(Object.assign(this.$store.state, beforeunload, { plazaId, isPreview }))
- // 刷新时,将haveFengMap 置为false,解决设备设施页面,刷新时不出新楼层图的问题
- this.SETHAVEFENGMAP(false)
- localStorage.removeItem('beforeunload')
- window.addEventListener('beforeunload', () => {
- let state = JSON.stringify(this.$store.state)
- localStorage.setItem('beforeunload', state)
- })
- },
- mounted() {
- this.isMounted = true
- this.plazaIds = localStorage.getItem('PLAZAID')
- },
- computed: {
- ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'accessLevel']),
- },
- methods: {
- ...mapActions(['getfmapID']),
- ...mapMutations(['SETHAVEFENGMAP']),
- getFengMap() {
- this.getfmapID().then(() => {
- this.getMap()
- })
- },
- getMap() {
- //如果项目为 南昌八一路 长春重庆路 青岛台东路 则不走楼层缓存接口
- // if(this.plazaIds == "1001064" || this.plazaIds == "1001065" || this.plazaIds == "1001066"){
- // let arr = ["b2","b1","f1","f2","f3","f4","f5","f6","g80"];
- // setFloor({ plazaId: this.plazaIds }, arr)
- // .then(res => {
- // console.log("缓存楼层", res);
- // })
- // .catch(error => {
- // console.log("缓存楼层", error);
- // });
- // return
- // }
- window.fengmapData = new SFengParser(
- `fengMap${this.id}`,
- `${this.mapServerURL}/fmap/${this.fmapID}`,
- this.key,
- this.appName,
- null,
- this.mapthemeUrl
- )
- if (this.fmapID.includes('null')) {
- this.SETHAVEFENGMAP(0)
- }
- window.fengmapData.loadMap(this.fmapID, (a, b) => {
- const dataArr = b.map((item) => {
- return item.gname
- })
- // 获取主题数据
- window.fengmapData.loadTheme(`${this.mapServerURL}/webtheme/${this.fmapID}/${this.fmapID}.theme`).then((res) => {
- this.SETHAVEFENGMAP(1)
- })
- // 缓存楼层数据
- if (dataArr.length) {
- //如果项目为 南昌八一路 长春重庆路 青岛台东路 则不走楼层缓存接口
- // if(this.plazaIds == "1001064" || this.plazaIds == "1001065" || this.plazaIds == "1001066"){
- // let arr = ["b2","b1","f1","f2","f3","f4","f5","f6","g80"];
- // setFloor({ plazaId: this.plazaIds }, arr)
- // .then(res => {
- // console.log("缓存楼层", res);
- // })
- // .catch(error => {
- // console.log("缓存楼层", error);
- // });
- // return
- // }
- setFloor({ plazaId: this.plazaIds }, dataArr)
- .then((res) => {
- console.log('缓存楼层', res)
- })
- .catch((error) => {
- console.log('缓存楼层', error)
- })
- }
- })
- },
- },
- watch: {
- plazaId(plazaId) {
- let plazaid = this.$route.query.plazaId ? this.$route.query.plazaId : plazaId
- console.log('获取到id', plazaid)
- window.fengmapData = null
- // 当获取到到项目id,请求底图
- if (plazaid) {
- // 请求该项目下的楼层数据
- this.getFengMap()
- } else {
- window.fengmapData = null
- }
- },
- isMounted(isMounted) {
- if (isMounted && this.plazaIds) {
- this.getFengMap()
- }
- },
- },
- }
- </script>
- <style lang="less">
- body,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- hr,
- p,
- blockquote,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- pre,
- form,
- fieldset,
- legend,
- button,
- input,
- textarea,
- th,
- td {
- margin: 0;
- padding: 0;
- }
- body,
- button,
- input,
- select,
- textarea {
- font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-size: 100%;
- }
- address,
- cite,
- dfn,
- var,
- em,
- i,
- u {
- font-style: normal;
- }
- ol,
- ul {
- list-style: none;
- }
- a {
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
- }
- img {
- border: none;
- vertical-align: middle;
- }
- :focus {
- outline: 0;
- }
- button,
- input,
- select,
- textarea {
- font-size: 100%;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- /* 滚动条样式 */
- body ::-webkit-scrollbar {
- width: 5px;
- height: 8px;
- }
- body ::-webkit-scrollbar-track {
- background-color: rgba(0, 0, 0, 0);
- border-radius: 3px;
- }
- body ::-webkit-scrollbar-thumb {
- border-radius: 3px;
- background: #e6e6e6;
- border: 1px solid #e6e6e6;
- }
- body ::-webkit-scrollbar-thumb:vertical:hover {
- background: #e6e6e6;
- border: 1px solid #e6e6e6;
- }
- #app {
- //meri-design组件select的字体颜色
- /deep/ .p-select-fakePlaceholder {
- span {
- span {
- color: #606266 !important;
- font-size: 13px;
- font-weight: normal;
- }
- }
- }
- //element 分页组件背景色
- /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- }
- //element button
- /deep/ .el-button--primary,
- .p-button-primary {
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- }
- }
- .clearfix::after {
- content: '.';
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
- .clearfix {
- zoom: 1;
- }
- .left {
- float: left;
- }
- .right {
- float: right;
- }
- html,
- body {
- width: 100%;
- height: 100%;
- // min-width: 1920px;
- // background: url('./assets/images/back.jpg') no-repeat;
- }
- #app {
- height: calc(100% - 26px) !important;
- width: 100%;
- position: relative;
- .fengMap {
- position: fixed;
- width: 100px;
- height: 100px;
- z-index: -1;
- opacity: 0;
- }
- }
- // element表头背景颜色修改
- .core-device-report,
- .specification-update-record {
- .el-table thead th {
- background-color: #f8f9fa;
- }
- .el-pagination.is-background .el-pager li:not(.disabled).active {
- background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
- }
- }
- // 说明书更新记录 element 时间控件样式重写
- .specification-update-record,
- .core-device-report {
- .el-input__inner {
- height: 32px;
- line-height: 32px;
- }
- .el-date-editor .el-range__icon,
- .el-date-editor .el-range-separator {
- line-height: 26px;
- width: 8%;
- }
- }
- .el-dialog__header {
- border-bottom: 1px solid rgba(239, 240, 241, 1);
- }
- .gantt-chart .el-dialog__title {
- font-weight: 500;
- }
- .img-detail-container {
- .el-dialog__body {
- padding-top: 0;
- padding-bottom: 0;
- padding-right: 0;
- }
- }
- .el-tooltip__popper {
- max-width: 600px !important;
- line-height: 20px !important;
- }
- </style>
|