|
@@ -11,21 +11,21 @@
|
|
|
<intrusionAlarm alt="入侵告警信息" @rqgjClick="rqgjClick" />
|
|
|
</el-col>
|
|
|
<el-col class="right">
|
|
|
- <parkingSpace alt="停车位统计"/>
|
|
|
- <conferenceRoomStatistics alt="会议室统计" @postMsg="postMsg"/>
|
|
|
- <cnergyConsumptionStatistics alt="能耗统计"/>
|
|
|
- <restaurant alt="智慧餐饮" @canyinClick="canyinClick" />
|
|
|
+ <parkingSpace alt="停车位统计" :resInfo="data.tingche" />
|
|
|
+ <conferenceRoomStatistics alt="会议室统计" @postMsg="postMsg" :resInfo="data.huiyi"/>
|
|
|
+ <cnergyConsumptionStatistics alt="能耗统计" :resInfo="data.nenghao"/>
|
|
|
+ <restaurant alt="智慧餐饮" @canyinClick="canyinClick" :resInfo="data.canyin"/>
|
|
|
</el-col>
|
|
|
</el-col>
|
|
|
<el-col id="middleWrap" >
|
|
|
- <!-- <iframe style="width:100%;height:100%;border:none;" id="iframe" src='https://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
|
|
|
+ <!-- <iframe style="width:100%;height:100%;border:none;" id="iframe" src='http://www.thingjs.com/s/ef7ee6a73896c01bda77e679?params=105b0f77fd24654d4eebc434e9'></iframe> -->
|
|
|
<iframe style="width:100%;height:100%;border:none;" id="iframe" src='http://10.21.39.6:9000/'></iframe>
|
|
|
</el-col>
|
|
|
<el-col class="rightWrap">
|
|
|
<weather alt="天气"/>
|
|
|
<el-col class="leftR mt16">
|
|
|
- <wenyin alt="文印助手" @postMsg="postMsg"/>
|
|
|
- <iOTNetworkCard alt="文印助手"/>
|
|
|
+ <wenyin alt="文印助手" @postMsg="postMsg" :resInfo="data.wenyin" />
|
|
|
+ <iOTNetworkCard alt="物联网卡" />
|
|
|
</el-col>
|
|
|
<el-col class="rightR mt16 ml16">
|
|
|
<equipmentStatus alt="设备状态" @postMsg2="postMsg2" />
|
|
@@ -36,6 +36,12 @@
|
|
|
</el-row>
|
|
|
<SpringFrame v-if="springFrameState" :resInfo="springFrameItem" @close="SpringFrameClose" />
|
|
|
<div v-if="springFrameState" class="mask"></div>
|
|
|
+ <div id="loader-wrapper2" v-if="sanwei">
|
|
|
+ <div id="loader2"></div>
|
|
|
+ <div class="loader-section section-left"></div>
|
|
|
+ <div class="loader-section section-right"></div>
|
|
|
+ <div class="load_title">三维模型加载中...</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -71,6 +77,7 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ sanwei:true,
|
|
|
springFrameState:false,
|
|
|
springFrameItem:{
|
|
|
video:undefined,
|
|
@@ -84,14 +91,31 @@ export default {
|
|
|
},
|
|
|
Pshow:false,
|
|
|
|
|
|
+
|
|
|
+ //数据
|
|
|
+ data:{
|
|
|
+ tingche:{},
|
|
|
+ huiyi:{},
|
|
|
+ nenghao:{},
|
|
|
+ canyin:{},
|
|
|
+ wenyin:{}
|
|
|
+ }
|
|
|
+
|
|
|
};
|
|
|
},
|
|
|
|
|
|
created(){
|
|
|
setTimeout(() =>{
|
|
|
document.getElementById("middleWrap").style.zIndex= "9"
|
|
|
+ this.sanwei = false
|
|
|
},5000)
|
|
|
-
|
|
|
+ axios({
|
|
|
+ method: 'get',
|
|
|
+ url: 'https://smartpark.caih.com/dxapi/system/config/configKey/large.json.config',
|
|
|
+ timeout: 10000,
|
|
|
+ }).then(res =>{
|
|
|
+ this.data = JSON.parse(res.data.data)
|
|
|
+ })
|
|
|
},
|
|
|
mounted(){
|
|
|
let that = this;
|
|
@@ -341,6 +365,177 @@ export default {
|
|
|
.modular:nth-child(1){
|
|
|
margin-top:0px;
|
|
|
}
|
|
|
+
|
|
|
+#loader-wrapper2 {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 200px;
|
|
|
+ margin:0 calc(50vw - 100px);
|
|
|
+ height: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader2 {
|
|
|
+ display: block;
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ margin: -75px 0 0 -75px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ border-top-color: #FFF;
|
|
|
+ -webkit-animation: spin 2s linear infinite;
|
|
|
+ -ms-animation: spin 2s linear infinite;
|
|
|
+ -moz-animation: spin 2s linear infinite;
|
|
|
+ -o-animation: spin 2s linear infinite;
|
|
|
+ animation: spin 2s linear infinite;
|
|
|
+ z-index: 1001;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader2:before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 5px;
|
|
|
+ right: 5px;
|
|
|
+ bottom: 5px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ border-top-color: #FFF;
|
|
|
+ -webkit-animation: spin 3s linear infinite;
|
|
|
+ -moz-animation: spin 3s linear infinite;
|
|
|
+ -o-animation: spin 3s linear infinite;
|
|
|
+ -ms-animation: spin 3s linear infinite;
|
|
|
+ animation: spin 3s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader2:after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 15px;
|
|
|
+ right: 15px;
|
|
|
+ bottom: 15px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 3px solid transparent;
|
|
|
+ border-top-color: #FFF;
|
|
|
+ -moz-animation: spin 1.5s linear infinite;
|
|
|
+ -o-animation: spin 1.5s linear infinite;
|
|
|
+ -ms-animation: spin 1.5s linear infinite;
|
|
|
+ -webkit-animation: spin 1.5s linear infinite;
|
|
|
+ animation: spin 1.5s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes spin {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: rotate(360deg);
|
|
|
+ -ms-transform: rotate(360deg);
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes spin {
|
|
|
+ 0% {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ -ms-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ -webkit-transform: rotate(360deg);
|
|
|
+ -ms-transform: rotate(360deg);
|
|
|
+ transform: rotate(360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .loader-section {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 51%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ z-index: 0;
|
|
|
+ -webkit-transform: translateX(0);
|
|
|
+ -ms-transform: translateX(0);
|
|
|
+ transform: translateX(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .loader-section.section-left {
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .loader-section.section-right {
|
|
|
+ right: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader-wrapper2 .loader-section.section-left {
|
|
|
+ -webkit-transform: translateX(-100%);
|
|
|
+ -ms-transform: translateX(-100%);
|
|
|
+ transform: translateX(-100%);
|
|
|
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader-wrapper2 .loader-section.section-right {
|
|
|
+ -webkit-transform: translateX(100%);
|
|
|
+ -ms-transform: translateX(100%);
|
|
|
+ transform: translateX(100%);
|
|
|
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader2 {
|
|
|
+ opacity: 0;
|
|
|
+ -webkit-transition: all 0.3s ease-out;
|
|
|
+ transition: all 0.3s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .loaded #loader-wrapper2 {
|
|
|
+ visibility: hidden;
|
|
|
+ -webkit-transform: translateY(-100%);
|
|
|
+ -ms-transform: translateY(-100%);
|
|
|
+ transform: translateY(-100%);
|
|
|
+ -webkit-transition: all 0.3s 1s ease-out;
|
|
|
+ transition: all 0.3s 1s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-js #loader-wrapper2 {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .no-js h1 {
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .load_title {
|
|
|
+ font-family: 'Open Sans';
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 19px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 9999999999999;
|
|
|
+ position: fixed;
|
|
|
+ top: 60%;
|
|
|
+ left:0;
|
|
|
+ opacity: 1;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper2 .load_title span {
|
|
|
+ font-weight: normal;
|
|
|
+ font-style: italic;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #FFF;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
|