|
@@ -1,102 +1,115 @@
|
|
<template>
|
|
<template>
|
|
- <div id='app'>
|
|
|
|
- <div :id='`fengMap${id}`' class='fengMap'></div>
|
|
|
|
- <router-view />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div id="app">
|
|
|
|
+ <div :id="`fengMap${id}`" class="fengMap"></div>
|
|
|
|
+ <router-view />
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
-import { mapGetters, mapActions, mapMutations } from 'vuex'
|
|
|
|
-import { SFengParser } from '@saga-web/feng-map'
|
|
|
|
-import {setFloor} from "@/api/public.js"
|
|
|
|
-window.fengmapData = null
|
|
|
|
|
|
+import { mapGetters, mapActions, mapMutations } from "vuex";
|
|
|
|
+import { SFengParser } from "@saga-web/feng-map";
|
|
|
|
+import { setFloor } from "@/api/public.js";
|
|
|
|
+window.fengmapData = null;
|
|
export default {
|
|
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() {
|
|
|
|
- this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('beforeunload'))))
|
|
|
|
- // 刷新时,将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');
|
|
|
|
|
|
+ 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() {
|
|
|
|
+ this.$store.replaceState(
|
|
|
|
+ Object.assign(
|
|
|
|
+ this.$store.state,
|
|
|
|
+ JSON.parse(localStorage.getItem("beforeunload"))
|
|
|
|
+ )
|
|
|
|
+ );
|
|
|
|
+ // 刷新时,将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();
|
|
|
|
+ });
|
|
},
|
|
},
|
|
- computed: {
|
|
|
|
- ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'accessLevel'])
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- ...mapActions(['getfmapID']),
|
|
|
|
- ...mapMutations(['SETHAVEFENGMAP']),
|
|
|
|
- getFengMap() {
|
|
|
|
- this.getfmapID().then(() => {
|
|
|
|
- this.getMap()
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- getMap() {
|
|
|
|
- window.fengmapData = new SFengParser(
|
|
|
|
- `fengMap${this.id}`,
|
|
|
|
- `${this.mapServerURL}/fmap/${this.fmapID}`,
|
|
|
|
- this.key,
|
|
|
|
- this.appName,
|
|
|
|
- null,
|
|
|
|
- this.mapthemeUrl
|
|
|
|
- )
|
|
|
|
- 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()
|
|
|
|
- })
|
|
|
|
- // 缓存楼层数据
|
|
|
|
- setFloor({plazaId:this.plazaIds},dataArr).then((res)=>{
|
|
|
|
- console.log('缓存楼层',res)
|
|
|
|
- }).catch((error)=>{
|
|
|
|
- console.log('缓存楼层',error)
|
|
|
|
- })
|
|
|
|
|
|
+ getMap() {
|
|
|
|
+ window.fengmapData = new SFengParser(
|
|
|
|
+ `fengMap${this.id}`,
|
|
|
|
+ `${this.mapServerURL}/fmap/${this.fmapID}`,
|
|
|
|
+ this.key,
|
|
|
|
+ this.appName,
|
|
|
|
+ null,
|
|
|
|
+ this.mapthemeUrl
|
|
|
|
+ );
|
|
|
|
+ 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();
|
|
|
|
+ });
|
|
|
|
+ // 缓存楼层数据
|
|
|
|
+ if (dataArr.length) {
|
|
|
|
+ setFloor({ plazaId: this.plazaIds }, dataArr)
|
|
|
|
+ .then(res => {
|
|
|
|
+ console.log("缓存楼层", res);
|
|
})
|
|
})
|
|
|
|
+ .catch(error => {
|
|
|
|
+ console.log("缓存楼层", error);
|
|
|
|
+ });
|
|
}
|
|
}
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ plazaIds(plazaId) {
|
|
|
|
+ console.log("获取到id", plazaId);
|
|
|
|
+ window.fengmapData = null;
|
|
|
|
+ // 当获取到到项目id,请求底图
|
|
|
|
+ if (plazaId) {
|
|
|
|
+ // 请求该项目下的楼层数据
|
|
|
|
+ this.getFengMap();
|
|
|
|
+ } else {
|
|
|
|
+ window.fengmapData = null;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- watch: {
|
|
|
|
- plazaIds(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()
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+ isMounted(isMounted) {
|
|
|
|
+ if (isMounted && this.plazaIds) {
|
|
|
|
+ this.getFengMap();
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-}
|
|
|
|
|
|
+ }
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
<style lang="less">
|
|
<style lang="less">
|
|
body,
|
|
body,
|
|
@@ -124,8 +137,8 @@ input,
|
|
textarea,
|
|
textarea,
|
|
th,
|
|
th,
|
|
td {
|
|
td {
|
|
- margin: 0;
|
|
|
|
- padding: 0;
|
|
|
|
|
|
+ margin: 0;
|
|
|
|
+ padding: 0;
|
|
}
|
|
}
|
|
|
|
|
|
body,
|
|
body,
|
|
@@ -133,7 +146,7 @@ button,
|
|
input,
|
|
input,
|
|
select,
|
|
select,
|
|
textarea {
|
|
textarea {
|
|
- font: 12px/1.5 Arial, 'Microsoft YaHei', '\65b0\5b8b\4f53';
|
|
|
|
|
|
+ font: 12px/1.5 Arial, "Microsoft YaHei", "\65b0\5b8b\4f53";
|
|
}
|
|
}
|
|
|
|
|
|
h1,
|
|
h1,
|
|
@@ -142,7 +155,7 @@ h3,
|
|
h4,
|
|
h4,
|
|
h5,
|
|
h5,
|
|
h6 {
|
|
h6 {
|
|
- font-size: 100%;
|
|
|
|
|
|
+ font-size: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
address,
|
|
address,
|
|
@@ -152,158 +165,170 @@ var,
|
|
em,
|
|
em,
|
|
i,
|
|
i,
|
|
u {
|
|
u {
|
|
- font-style: normal;
|
|
|
|
|
|
+ font-style: normal;
|
|
}
|
|
}
|
|
|
|
|
|
ol,
|
|
ol,
|
|
ul {
|
|
ul {
|
|
- list-style: none;
|
|
|
|
|
|
+ list-style: none;
|
|
}
|
|
}
|
|
|
|
|
|
a {
|
|
a {
|
|
- text-decoration: none;
|
|
|
|
|
|
+ text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
a:hover {
|
|
a:hover {
|
|
- text-decoration: underline;
|
|
|
|
|
|
+ text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
|
|
img {
|
|
img {
|
|
- border: none;
|
|
|
|
- vertical-align: middle;
|
|
|
|
|
|
+ border: none;
|
|
|
|
+ vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
|
|
:focus {
|
|
:focus {
|
|
- outline: 0;
|
|
|
|
|
|
+ outline: 0;
|
|
}
|
|
}
|
|
|
|
|
|
button,
|
|
button,
|
|
input,
|
|
input,
|
|
select,
|
|
select,
|
|
textarea {
|
|
textarea {
|
|
- font-size: 100%;
|
|
|
|
|
|
+ font-size: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
table {
|
|
table {
|
|
- border-collapse: collapse;
|
|
|
|
- border-spacing: 0;
|
|
|
|
|
|
+ border-collapse: collapse;
|
|
|
|
+ border-spacing: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* 滚动条样式 */
|
|
/* 滚动条样式 */
|
|
|
|
|
|
body ::-webkit-scrollbar {
|
|
body ::-webkit-scrollbar {
|
|
- width: 5px;
|
|
|
|
- height: 8px;
|
|
|
|
|
|
+ width: 5px;
|
|
|
|
+ height: 8px;
|
|
}
|
|
}
|
|
|
|
|
|
body ::-webkit-scrollbar-track {
|
|
body ::-webkit-scrollbar-track {
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
|
- border-radius: 3px;
|
|
|
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
|
+ border-radius: 3px;
|
|
}
|
|
}
|
|
|
|
|
|
body ::-webkit-scrollbar-thumb {
|
|
body ::-webkit-scrollbar-thumb {
|
|
- border-radius: 3px;
|
|
|
|
- background: #e6e6e6;
|
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
|
|
|
+ border-radius: 3px;
|
|
|
|
+ background: #e6e6e6;
|
|
|
|
+ border: 1px solid #e6e6e6;
|
|
}
|
|
}
|
|
|
|
|
|
body ::-webkit-scrollbar-thumb:vertical:hover {
|
|
body ::-webkit-scrollbar-thumb:vertical:hover {
|
|
- background: #e6e6e6;
|
|
|
|
- border: 1px solid #e6e6e6;
|
|
|
|
|
|
+ background: #e6e6e6;
|
|
|
|
+ border: 1px solid #e6e6e6;
|
|
}
|
|
}
|
|
|
|
|
|
#app {
|
|
#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%);
|
|
|
|
|
|
+ //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 {
|
|
.clearfix::after {
|
|
- content: '.';
|
|
|
|
- display: block;
|
|
|
|
- height: 0;
|
|
|
|
- clear: both;
|
|
|
|
- visibility: hidden;
|
|
|
|
|
|
+ content: ".";
|
|
|
|
+ display: block;
|
|
|
|
+ height: 0;
|
|
|
|
+ clear: both;
|
|
|
|
+ visibility: hidden;
|
|
}
|
|
}
|
|
.clearfix {
|
|
.clearfix {
|
|
- zoom: 1;
|
|
|
|
|
|
+ zoom: 1;
|
|
}
|
|
}
|
|
|
|
|
|
.left {
|
|
.left {
|
|
- float: left;
|
|
|
|
|
|
+ float: left;
|
|
}
|
|
}
|
|
|
|
|
|
.right {
|
|
.right {
|
|
- float: right;
|
|
|
|
|
|
+ float: right;
|
|
}
|
|
}
|
|
html,
|
|
html,
|
|
body {
|
|
body {
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- // min-width: 1920px;
|
|
|
|
- // background: url('./assets/images/back.jpg') no-repeat;
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ // min-width: 1920px;
|
|
|
|
+ // background: url('./assets/images/back.jpg') no-repeat;
|
|
}
|
|
}
|
|
#app {
|
|
#app {
|
|
- height: 100%;
|
|
|
|
- width: 100%;
|
|
|
|
- position: relative;
|
|
|
|
- .fengMap {
|
|
|
|
- position: fixed;
|
|
|
|
- width: 100px;
|
|
|
|
- height: 100px;
|
|
|
|
- z-index: -1;
|
|
|
|
- opacity: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ height: 100%;
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ .fengMap {
|
|
|
|
+ position: fixed;
|
|
|
|
+ width: 100px;
|
|
|
|
+ height: 100px;
|
|
|
|
+ z-index: -1;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
// element表头背景颜色修改
|
|
// element表头背景颜色修改
|
|
.core-device-report,
|
|
.core-device-report,
|
|
.specification-update-record {
|
|
.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%);
|
|
|
|
- }
|
|
|
|
|
|
+ .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 时间控件样式重写
|
|
// 说明书更新记录 element 时间控件样式重写
|
|
.specification-update-record,
|
|
.specification-update-record,
|
|
.core-device-report {
|
|
.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-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 {
|
|
.el-dialog__header {
|
|
- border-bottom: 1px solid rgba(239, 240, 241, 1);
|
|
|
|
|
|
+ border-bottom: 1px solid rgba(239, 240, 241, 1);
|
|
}
|
|
}
|
|
.gantt-chart .el-dialog__title {
|
|
.gantt-chart .el-dialog__title {
|
|
- font-weight: 500;
|
|
|
|
|
|
+ font-weight: 500;
|
|
}
|
|
}
|
|
.img-detail-container {
|
|
.img-detail-container {
|
|
- .el-dialog__body {
|
|
|
|
- padding-top: 0;
|
|
|
|
- padding-bottom: 0;
|
|
|
|
- padding-right: 0;
|
|
|
|
- }
|
|
|
|
|
|
+ .el-dialog__body {
|
|
|
|
+ padding-top: 0;
|
|
|
|
+ padding-bottom: 0;
|
|
|
|
+ padding-right: 0;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|