| | |
| | | <template> |
| | | <div class="top"> |
| | | <div class="topleft"> |
| | | <div |
| | | <!-- <div |
| | | class="topleft1" |
| | | :class="currView == 'chart' ? 'active' : ''" |
| | | @click="OpenInitChart" |
| | | > |
| | | <img src="../../assets/img/Screen/bigST.png" /> |
| | | <span>大屏视图</span> |
| | | </div> |
| | | <div |
| | | </div> --> |
| | | <!-- <div |
| | | class="topleft1" |
| | | @click="OpenProjectree" |
| | | :class="currView == 'tree' ? 'active' : ''" |
| | | > |
| | | <img src="../../assets/img/Screen/ptree.png" /> |
| | | <span>工程项目</span> |
| | | </div> --> |
| | | <div |
| | | class="topleft__curr" |
| | | @click="setMapViewStart()" |
| | | > |
| | | <img src="../../assets/img/Screen/ptree.png" /> |
| | | <span :title="currentProject">{{ currentProject }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="topCenter"> |
| | | <div>管网一张图</div> |
| | | </div> |
| | | <div class="topRight"> |
| | | <div class="topright1 toprightC" @click="ReturnLast"> |
| | | <div |
| | | class="topright1" |
| | | :class="currView == 'chart' ? 'active' : ''" |
| | | @click="OpenInitChart" |
| | | > |
| | | <img src="../../assets/img/Screen/bigST.png" /> |
| | | <span>返回大屏</span> |
| | | </div> |
| | | <div |
| | | class="topright1 toprightC" |
| | | @click="ReturnLast" |
| | | > |
| | | <img src="../../assets/img/Screen/return.png" /> |
| | | <span>返回上级</span> |
| | | </div> |
| | |
| | | tree: false, |
| | | screen: false, |
| | | currView: "chart", |
| | | currentProject: "大屏视图", |
| | | } |
| | | }, |
| | | mounted() {}, |
| | | mounted() { |
| | | this.$bus.$on("changeProject", name => { |
| | | // if (name == '全国项目' || name == '全球项目') { |
| | | // this.OpenProjectree() |
| | | // } |
| | | this.currView = "tree" |
| | | this.currentProject = name |
| | | }) |
| | | }, |
| | | methods: { |
| | | ReturnLast() { |
| | | sessionStorage.setItem("changeSelectStyle", 1) |
| | | this.$router.push("/Synthesis") |
| | | }, |
| | | |
| | |
| | | this.currView = "chart" |
| | | this.screen = true |
| | | this.$parent.$refs.mapleft.OpenLeftInit() |
| | | this.$parent.$refs.mapright.OpenLeftInit() |
| | | this.currentProject = "大屏视图" |
| | | // 回到初始化视角 |
| | | this.setMapViewStart(); |
| | | }, |
| | | |
| | | setMapViewStart() { |
| | | window.viewer.camera.flyTo({ |
| | | destination: new Cesium.Cartesian3.fromDegrees(110, 32, 20000000), |
| | | orientation: { |
| | | heading: Cesium.Math.toRadians(0), |
| | | pitch: Cesium.Math.toRadians(-90), |
| | | }, |
| | | }) |
| | | }, |
| | | //打开工程树 |
| | | OpenProjectree() { |
| | | this.screen = false |
| | | |
| | | this.currView = "tree" |
| | | |
| | | this.$parent.$refs.mapleft.OpenLeftProjectTree() |
| | | this.$parent.$refs.mapright.OpenLeftProjectTree() |
| | | }, |
| | | }, |
| | | } |
| | |
| | | display: flex; |
| | | flex-direction: row; |
| | | align-items: flex-end; |
| | | justify-content: space-around; |
| | | // justify-content: space-around; |
| | | cursor: pointer; |
| | | .topleft__curr { |
| | | // overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | height: 36px; |
| | | border-radius: 4px; |
| | | background-image: url(../../assets/img/Screen/btnbg.png); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: 5%; |
| | | span { |
| | | padding-right: 10px; |
| | | } |
| | | } |
| | | .topleft1 { |
| | | width: 127px; |
| | | height: 36px; |
| | |
| | | background-size: 100% 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: 10%; |
| | | } |
| | | .active { |
| | | background-image: url(../../assets/img/Screen/btnc.png); |
| | |
| | | } |
| | | span { |
| | | color: #b3c8e3; |
| | | font-size: 1rem; |
| | | font-size: 16px; |
| | | letter-spacing: 1px; |
| | | } |
| | | } |
| | |
| | | .topright1 { |
| | | width: 131px; |
| | | height: 40px; |
| | | background-image: url(../../assets/img/Screen/btnc.png); |
| | | background-image: url(../../assets/img/Screen/btnbg.png); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-right: 10%; |
| | | &.active { |
| | | background-image: url(../../assets/img/Screen/btnc.png); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | } |
| | | } |
| | | |
| | | .toprightC { |
| | | width: 131px; |
| | | height: 40px; |
| | |
| | | } |
| | | span { |
| | | color: #b3c8e3; |
| | | font-size: 1rem; |
| | | font-size: 16px; |
| | | letter-spacing: 1px; |
| | | } |
| | | } |