基于vue的数据大屏.zip

<template> <div class="container screen-container"> <div class="border bg-shadow" v-corner="'absolute'"></div> <div class="left"> <div class="logo"> <img src="./assets/img/screenLogo.png" alt=""> </div> <div class="header">科技云平台</div> <div class="left-content"> <div class="left-content-top"> <div class="data-wrap bg-shadow" v-corner> <ul> <li> <span class="label">全国三恒总面积</span> <span class="data"> <strong v-for="(item,idx) in allAreaList" :key="idx">{{item}}</strong> <i class="unit"> 平方</i> </span> </li> <li> <span class="label">三恒在线面积</span> <span class="data"> <strong v-for="(item,idx) in onlineAreaList" :key="idx">{{item}}</strong> <i class="unit"> 平方</i> </span> </li> <li> <span class="label">异常报警</span> <span class="data"> <strong v-for="(item,idx) in alarmCountList" :key="idx">{{item}}</strong> <i class="unit"> 项</i> </span> </li> </ul> <div class="legend-wrap"> <p class="count">今日新增上线项目数量：<span>{{areaInfo.todayCount==null?'--':areaInfo.todayCount}}</span></p> <div class="legend"> <span ><i :style="'backgroundColor:' + colorList[0]"></i >在线</span > <span ><i :style="'backgroundColor:' + colorList[1]"></i >离线</span > <span ><i :style="'backgroundColor:' + colorList[2]"></i >异常报警</span > </div> </div> </div> <div class="map-wrap bg-shadow" v-corner> <!-- <div v-show="chooseName != '全国'" class="back" @click="goBack"> 返回 </div> --> <div class="select-area"> <el-select v-model="chooseName" @change="provinceChange" filterable class="select-province" popper-class="select-province-popper" placeholder="请选择" size="mini" > <el-option label="全国" value="全国"></el-option> <el-option v-for="item in mapData" :label="item.name" :value="item.name" :key="item.name" ></el-option> </el-select> </div> <div id="map"></div> <!-- 耗电量统计--> <div class="power-consumption bg-shadow"> <p class="title">耗电量统计</p> <ul> <li id="villa"></li> <li id="apartment"></li> </ul> </div> <!-- 系统运行状况--> <div class="system-runStatus"> <ul> <li> <span class="data">{{projectCountInfo.allProjectCount==null?'--':projectCountInfo.allProjectCount}}</span> <span class="label">总项目数量</span> </li> <li> <span class="data">{{projectCountInfo.allOnlineProjectCount==null?'--':projectCountInfo.allOnlineProjectCount}}</span> <span class="label">在线项目数量</span> </li> <li> <span class="data">{{projectCountInfo.allOffLineProjectCount==null?'--':projectCountInfo.allOffLineProjectCount}}</span> <span class="label">离线项目数量</span> </li> </ul> </div> </div> </div> <div class="left-content-bottom bg-shadow" v-corner> <ul> <li class="chart"> <p class="title">系统运行压力监测点状图</p> <div id="pressure-monitor"></div> </li> <li class="chart"> <p class="title">室内舒适度统计</p> <div id="indoor-comfort"></div> </li> <li class="table"> <p class="title">异常报警信息栏</p> <div id="alarm"> <ul class="item"> <li v-for="(item, index) in alarmList" :key="index" :title="item.projectName+'：'+item.cause+' '+ item.time+(item.status==0?'未恢复':'已恢复')" > <span :class="item.status===0?'not-recovered':'restored'">{{ item.status === 0 ? '未恢复' : '已恢复' }}</span> <span>{{ item.projectName + '：' }}</span> <span>{{ item.cause }}</span> <span style="margin-left:10px">{{ item.time }}</span> </li> </ul> </div> </li> </ul> </div> </div> </div> <div class="right"> <div class="header">{{ curDate }}</div> <div class="project-category"> <!-- <p class="title">系统运行状况</p> --> <ul> <li class="bg-shadow" v-corner> <div class="category"> <span v-for="(item,idx) in '商用项目'" :key="idx">{{item}}</span> </div> <div class="data-wrap"> <span class="label">昨日每平方用电费用</span> <span class="data"> <strong v-for="(item,idx) in '0.29'" :key="idx">{{item}}</strong> <i>元</i> </span> </div> <div class="data-wrap"> <span class="label">电费单价</span> <span class="data"> <strong v-for="(item,idx) in '1.1'" :key="idx">{{item}}</strong> <i>元/kw/h</i> </span> </div> </li> <li class="bg-shadow" v-corner> <div class="category"> <span v-for="(item,idx) in '住宅项目'" :key="idx">{{item}}</span> </div> <div class="data-wrap"> <span class="label">昨日每平方用电费用</span> <span class="data"> <strong v-for="(item,idx) in '0.17'" :key="idx">{{item}}</strong> <i>元</i> </span> </div> <div class="data-wrap"> <span class="label">电费单价</span> <span class="data"> <strong v-for="(item,idx) in '0.58'" :key="idx">{{item}}</strong> <i>元/kw/h</i> </span> </div> </li> </ul> <p></p> <p> </p> </div> <div class="air-index bg-shadow" v-corner> <p class="title">在线项目室内环境空气指标概况</p> <ul> <li id="temperature"></li> <li id="humidity"></li> <li id="PM"></li> <li id="CO2"></li> <li id="TVOC"></li> <li class="air-quality"> <p class="title">室外空气质量 <span style="float:right;padding-right:10px">{{airQualityData.city}}</span></p> <div class="bubble"> <p class="tem data-wrap"> <span class="label">温度</span> <span class="data">{{airQualityData.temp==null ? '--':airQualityData.temp}} <i class="unit">℃</i></span> </p>