<!--
|
* @Description: 导航菜单
|
* @Author: 王旭
|
* @Date: 2022-03-03 17:18:01
|
* @LastEditTime: 2023-06-06 14:47:58
|
* @LastEditors: Andy
|
-->
|
<template>
|
<div class="device-state-panel">
|
<!-- <div class="closeBtn" @click="closeWindow">x</div> -->
|
<div class="block first">
|
<p class="title">
|
<p class="title-des">空间概况</p>
|
</p>
|
<div class="show-wrapper">
|
<div class="data-show">
|
<div class="kjgk"></div>
|
<div class="chart-des">占地面积</div>
|
<div class="position"><span class="num-show">5.3</span><span class="danwei-show">万㎡</span></div>
|
</div>
|
<div class="data-show">
|
<div class="kjgk"></div>
|
<div class="chart-des">规划建筑面积</div>
|
<div class="position"><span class="num-show">16</span><span class="danwei-show">万㎡</span></div>
|
</div>
|
<div class="data-show">
|
<div class="kjgk"></div>
|
<div class="chart-des">建筑面积</div>
|
<div class="position"><span class="num-show">16</span><span class="danwei-show">万㎡</span></div>
|
</div>
|
<div class="data-show">
|
<div class="kjgk"></div>
|
<div class="chart-des">计容面积</div>
|
<div class="position"><span class="num-show">16</span><span class="danwei-show">万㎡</span></div>
|
</div>
|
<div class="data-show">
|
<div class="kjgk"></div>
|
<div class="chart-des">容积率</div>
|
<div class="position"><span class="num-show">3</span></div>
|
</div>
|
<div class="data-show">
|
<div class="kjgk"></div>
|
<div class="chart-des">绿化率</div>
|
<div class="position"><span class="num-show">25%</span></div>
|
</div>
|
</div>
|
</div>
|
<div class="block seconde">
|
<p class="title">
|
<p class="title-des">资源信息</p>
|
</p>
|
<!-- <p class="title">资源信息</p> -->
|
<div class='zyxx'>
|
|
</div>
|
<div class="dingwei d1 dingweihover" @click="showResourceBox(1)"><span
|
class="zyxx-tit">企业办公</span><span> </span><span
|
class='zyxx-num'>25 </span><span>万㎡</span></div>
|
<div class="dingwei d2 dingweihover" @click="showResourceBox(2)"><span
|
class="zyxx-tit">商业</span><span> </span><span class='zyxx-num'>25 </span><span>万㎡</span>
|
</div>
|
<div class="dingwei d3 dingweihover" @click="showResourceBox(3)"><span
|
class="zyxx-tit">公共资源</span><span> </span><span
|
class='zyxx-num'>25 </span><span>万㎡</span></div>
|
<div class="dingwei d4 dingweihover" @click="showResourceBox(4)"><span
|
class="zyxx-tit">公寓</span><span> </span><span
|
class='zyxx-num'>25 </span><span>万㎡</span></div>
|
</div>
|
<div class="block third">
|
<p class="title">
|
<p class="title-des">资源性质占比</p>
|
</p>
|
|
<!-- <p class="title">资源性质占比</p> -->
|
<div class="zyxz-wrap">
|
<div class="zyxz"></div>
|
|
</div>
|
<div class="dingwei1 e1"><span class="zyxz-tit">企业办公</span><span></span><span class='zyxz-num'></span><span
|
class='zyxx-num'>25%</span>
|
<div class="line1"></div>
|
</div>
|
<div class="dingwei1 e2"><span class="zyxz-tit">商业</span><span></span><span class='zyxz-num'></span><span
|
class='zyxx-num'>25%</span>
|
<div class="line3"></div>
|
</div>
|
<div class="dingwei1 e3"><span class="zyxz-tit">公共资源</span><span></span><span class='zyxz-num'></span><span
|
class='zyxx-num'>25%</span></div>
|
<div class="line4"></div>
|
<div class="dingwei1 e4"><span class="zyxz-tit">公寓</span><span></span><span class='zyxz-num'></span><span
|
class='zyxx-num'>25%</span>
|
<div class="line2"></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "devicestate",
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
shangye: {
|
x: 114.3769133512962, y: 22.729581868, z: 82, width: 8, length: 18, height: 0.5
|
},
|
gongyong: {
|
x: 114.37683639, y: 22.7295520, z: 82, width: 8, length: 8, height: 0.8
|
}, bangong: {
|
x: 114.37699380948867, y: 22.72960738602, z: 82, width: 7, length: 20, height: 0.5
|
},
|
gongyu: {
|
x: 114.3767189861877, y: 22.7295169, z: 82, width: 14, length: 18.5, height: 0.5
|
},
|
|
|
};
|
},
|
watch: {},
|
//方法集合
|
methods: {
|
closeWindow() {
|
this.$emit('closeWindow')
|
},
|
showResourceBox(tag) {
|
if (sgworld) {
|
this.RemoveAllShell()
|
if (window.canGL) {
|
debugger
|
switch (tag) {
|
case 1:
|
this.addshell(this.bangong.x, this.bangong.y, this.bangong.z, this.bangong.length, this.bangong.width, this.bangong.height, "GREEN", 1, tag + "_LLL", 70);
|
break;
|
case 2:
|
this.addshell(this.shangye.x, this.shangye.y, this.shangye.z, this.shangye.length, this.shangye.width, this.shangye.height, "GREEN", 1, tag + "_LLL", 70);
|
|
break;
|
case 3:
|
this.addshell(this.gongyong.x, this.gongyong.y, this.gongyong.z, this.gongyong.length, this.gongyong.width, this.gongyong.height, "GREEN", 1, tag + "_LLL", 70);
|
|
break;
|
case 4: this.addshell(this.gongyu.x, this.gongyu.y, this.gongyu.z, this.gongyu.length, this.gongyu.width, this.gongyu.height, "GREEN", 1, tag + "_LLL", 70);
|
|
break;
|
default:
|
break;
|
}
|
}
|
}
|
},
|
RemoveAllShell() {
|
let rE = [];
|
window.Viewer.entities.values.forEach((enitity) => {
|
if (enitity) {
|
rE.push(enitity);
|
}
|
});
|
rE.forEach((e) => {
|
window.Viewer.entities.remove(e);
|
})
|
},
|
|
// 创建方块壳
|
addshell(x, y, z, l, w, h, color, alpha, _name, fromRotationZ) {
|
let pos = Cesium.Cartesian3.fromDegrees(x, y, z);
|
let e = window.Viewer.entities.add({
|
name: _name,
|
position: pos,
|
box: {
|
dimensions: new Cesium.Cartesian3(l, w, h),
|
material: Cesium.Color[color].withAlpha(alpha),
|
outline: false,
|
outlineColor: Cesium.Color.BLACK,
|
},
|
});
|
e.orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
pos,
|
new Cesium.HeadingPitchRoll((Math.PI / 180) * fromRotationZ, 0, 0)
|
);
|
this.flashEntity(e, 3);
|
return e;
|
},
|
//闪烁
|
flashEntity(entity, second) {
|
if (!entity) return;
|
let x = 1;
|
let flog = true;
|
let fs = [];
|
let callback = new Cesium.CallbackProperty(() => {
|
if (flog) {
|
x = x - 0.05;
|
if (x <= 0) {
|
flog = false;
|
}
|
} else {
|
x = x + 0.05;
|
if (x >= 1) {
|
flog = true;
|
}
|
}
|
return x >= 0.5;
|
}, false);
|
if (entity.billboard) {
|
entity.billboard.show = callback;
|
fs.push(entity.billboard);
|
}
|
if (entity.box) {
|
entity.box.show = callback;
|
fs.push(entity.box);
|
}
|
if (entity.corridor) {
|
entity.corridor.show = callback;
|
fs.push(entity.corridor);
|
}
|
if (entity.cylinder) {
|
entity.cylinder.show = callback;
|
fs.push(entity.cylinder);
|
}
|
if (entity.ellipse) {
|
entity.ellipse.show = callback;
|
fs.push(entity.ellipse);
|
}
|
if (entity.ellipsoid) {
|
entity.ellipsoid.show = callback;
|
fs.push(entity.ellipsoid);
|
}
|
if (entity.label) {
|
entity.label.show = callback;
|
fs.push(entity.label);
|
}
|
if (entity.model) {
|
entity.model.show = callback;
|
fs.push(entity.model);
|
}
|
if (entity.path) {
|
entity.path.show = callback;
|
fs.push(entity.path);
|
}
|
if (entity.plane) {
|
entity.plane.show = callback;
|
fs.push(entity.plane);
|
}
|
if (entity.point) {
|
entity.point.show = callback;
|
fs.push(entity.point);
|
}
|
if (entity.polygon) {
|
entity.polygon.show = callback;
|
fs.push(entity.polygon);
|
}
|
if (entity.polyline) {
|
entity.polyline.show = callback;
|
fs.push(entity.polyline);
|
}
|
if (entity.polylineVolume) {
|
entity.polylineVolume.show = callback;
|
fs.push(entity.polylineVolume);
|
}
|
if (entity.rectangle) {
|
entity.rectangle.show = callback;
|
fs.push(entity.rectangle);
|
}
|
if (entity.wall) {
|
entity.wall.show = callback;
|
fs.push(entity.wall);
|
}
|
|
setTimeout(function () {
|
fs.forEach((f) => {
|
f.show = true;
|
});
|
}, second * 1000);
|
},
|
},
|
created() {
|
//当前路由高亮
|
this.pathName = this.$route.path;
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
@font-face {
|
font-family: "SourceHanSansCN-Bold";
|
src: url("../../assets/font/SourceHanSansCN-Bold.otf");
|
font-weight: normal;
|
font-style: normal;
|
}
|
|
@font-face {
|
font-family: "arialbd";
|
src: url("../../assets/font/arialbd.ttf");
|
font-weight: normal;
|
font-style: normal;
|
}
|
|
@font-face {
|
font-family: "SourceHanSansCNRegular";
|
src: url("../../assets/font/SourceHanSansSC-Regular.otf");
|
font-weight: normal;
|
font-style: normal;
|
}
|
|
@font-face {
|
font-family: "arialbd";
|
src: url("../../assets/font/Arial-ItalicMT.otf");
|
font-weight: normal;
|
font-style: normal;
|
}
|
|
@font-face {
|
font-family: "SourceHanSansSC-Medium";
|
src: url("../../assets/font/SourceHanSansSC-Medium.otf");
|
font-weight: normal;
|
font-style: normal;
|
}
|
|
* {
|
font-size: 16px;
|
font-family: SourceHanSansCN-Bold;
|
font-weight: bold;
|
color: #feffff;
|
line-height: 30px;
|
}
|
|
.block {
|
padding-bottom: 38px;
|
}
|
|
.num-show {
|
width: 29px;
|
height: 18px;
|
font-size: 25px;
|
|
font-weight: bold;
|
font-style: italic;
|
color: #ffd427;
|
line-height: 11px;
|
font-family: arialbd;
|
}
|
|
.danwei-show {
|
width: 26px;
|
height: 13px;
|
font-size: 13px;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 22px;
|
}
|
|
.device-state-panel {
|
height: 700px;
|
position: fixed;
|
bottom: 43px;
|
top: 110px;
|
left: 112px;
|
width: 460px;
|
// height: 70px;
|
border: 1px solid #264c67;
|
// background: linear-gradient(0deg, #00193c 0%, #0d364d 100%);
|
z-index: 999;
|
background-image: url("../../assets/img/outerbox.png");
|
padding: 27px;
|
background-size: 100% 100%;
|
}
|
|
.line1 {
|
background: url("../../assets/img/detail_line1.png") no-repeat;
|
position: absolute;
|
top: 20px;
|
left: 20px;
|
|
height: 12px;
|
width: 103px;
|
}
|
|
.line4 {
|
background: url("../../assets/img/detail_line1.png") no-repeat;
|
position: absolute;
|
top: 135px;
|
left: 90px;
|
transform: rotateX(145deg);
|
height: 11px;
|
width: 101px;
|
}
|
|
.line2 {
|
background: url("../../assets/img/detail_line2.png") no-repeat;
|
|
position: absolute;
|
top: 4px;
|
/* left: 20px; */
|
height: 56px;
|
width: 103px;
|
color: white;
|
}
|
|
.line3 {
|
background: url("../../assets/img/detail_line2.png") no-repeat;
|
|
position: absolute;
|
top: -25px;
|
/* left: 20px; */
|
height: 61px;
|
width: 165px;
|
color: white;
|
transform: rotateX(145deg);
|
}
|
|
.title {
|
background-image: url("../../assets/img/tittle.svg");
|
width: 172px;
|
height: 11px;
|
}
|
|
.show-wrapper {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
flex-wrap: wrap;
|
}
|
|
.data-show {
|
position: relative;
|
width: 105px;
|
padding-top: 10px;
|
padding-right: 10px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
.position {
|
position: absolute;
|
right: 29px;
|
top: 28px;
|
min-width: 55px;
|
}
|
|
.title-des {
|
margin-top: -29px;
|
margin-left: 7px;
|
}
|
|
.chart-des {
|
// width: 58px;
|
height: 13px;
|
font-size: 14px;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 22px;
|
}
|
|
.zyxz-tit {
|
width: 57px;
|
height: 13px;
|
font-size: 14px;
|
font-family: SourceHanSansCNRegular;
|
font-weight: 400;
|
color: #f6f6f6;
|
line-height: 16px;
|
}
|
|
.total-num {
|
content: url("../../assets/img/totalNum-bg.svg");
|
width: 98px;
|
height: 48px;
|
}
|
|
.kjgk {
|
background-image: url("../../assets/img/kjgk.png");
|
width: 90px;
|
height: 78px;
|
}
|
|
.seconde {
|
position: relative;
|
height: 200px;
|
margin-bottom: 30px;
|
}
|
|
.third {
|
position: relative;
|
}
|
|
.zyxx {
|
background-image: url("../../assets/img/zyxx.png");
|
width: 240px;
|
height: 225px;
|
position: absolute;
|
top: 23px;
|
left: -59px;
|
}
|
|
.zyxz {
|
// position: absolute;
|
// top: 23px;
|
// left: -59px;
|
}
|
|
.zyxx-tit {
|
display: inline-block;
|
width: 90px;
|
height: 14px;
|
font-size: 14px;
|
font-family: SourceHanSansCNRegular;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 31px;
|
}
|
|
.zyxx-num {
|
width: 41px;
|
height: 18px;
|
font-size: 25px;
|
font-family: Arial;
|
font-weight: bold;
|
font-style: italic;
|
color: #ffd427;
|
line-height: 11px;
|
}
|
|
.dingwei {
|
position: absolute;
|
// top: 23px;
|
left: 190px;
|
}
|
|
.dingweihover:hover {
|
background-color: #ffd42744;
|
cursor: pointer;
|
}
|
|
.d1 {
|
top: 23px;
|
}
|
|
.d2 {
|
top: 85px;
|
}
|
|
.d3 {
|
top: 155px;
|
}
|
|
.d4 {
|
top: 217px;
|
}
|
|
.dingwei1 {
|
position: absolute;
|
display: flex;
|
flex-direction: column-reverse;
|
align-items: center;
|
justify-content: center;
|
// top: 23px;
|
// left: 190px;
|
}
|
|
.e1 {
|
top: 2/3px;
|
top: 23px;
|
left: 54px;
|
}
|
|
.e2 {
|
// top: 85px;
|
top: 22px;
|
left: 312px;
|
}
|
|
.e3 {
|
top: 124px;
|
left: 51px;
|
}
|
|
.e4 {
|
// top: 217px;
|
top: 88px;
|
left: 312px;
|
}
|
|
.zyxz-wrap {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.zyxz {
|
background-image: url("../../assets/img/zyxz.png");
|
width: 162px;
|
height: 161px;
|
}
|
|
// radar-chart-wrap{
|
|
// }
|
.radar-chart {
|
content: url("../../assets/img/组 2568.svg");
|
width: 110px;
|
height: 108px;
|
}
|
.closeBtn{
|
position: absolute;
|
right: 16px;
|
top: 10px;
|
cursor: pointer;
|
}
|
</style>
|
