123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <template>
- <div class="legend">
- <div v-for="(item,index) in legendObj" :key="index" v-show="(item.name!='平均温度')||avgTemp">
- <span :style="{background:index==legendObj.length-1?'':item.color,border:item.color=='#ffffff'?'':`2px solid ${item.color}`}" :class="{'dotLine':dotLine}"></span>{{numType?item.numName:item.name}}
- </div>
- </div>
- </template>
- <script>
- export default {
- props:{
- lineShow:{
- type:Boolean,
- default:false
- },
- numType:{
- type:Boolean,
- default:true
- },
- dotLine:{
- type:Boolean,
- default:false
- },
- avgTemp:{
- type:Boolean,
- default:true
- },
- legendType:{
- type:String,
- default:'Tdb'
- }
- },
- data(){
- return {
- legendObj:[
- {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
- {name:"达标占比",numName:"达标",color:"#ffffff"},
- {name:"偏热占比",numName:"偏热",color:"#F9908B"},
- {name:"平均温度",numName:"平均温度",color:"#ffffff"},
- ],
- legendMap:{
- Tdb:[
- {name:"偏冷占比",numName:"偏冷",color:"#0091FF"},
- {name:"达标占比",numName:"达标",color:"#ffffff"},
- {name:"偏热占比",numName:"偏热",color:"#F9908B"},
- {name:"平均温度",numName:"平均温度",color:"#ffffff"},
- ],
- 'CO2':[
- {name:"正常",color:"#ffffff"},
- {name:"超标",color:"#DCAA04"},
- {name:"平均值",color:"#3EA832"},
- ],
- 'HCHO':[
- {name:"正常",color:"#ffffff"},
- {name:"超标",color:"#C6322B"},
- {name:"平均值",color:"#3EA832"},
- ],
- 'RH':[
- {name:"正常",color:"#ffffff"},
- {name:"偏干",color:"#F58300"},
- {name:"偏湿",color:"#0091FF"},
- {name:"平均值",color:"#3EA832"},
- ],
- 'PM2d5':[
- {name:"正常",color:"#ffffff"},
- {name:"超标",color:"#DCAA04"},
- {name:"平均值",color:"#3EA832"},
- ],
- }
- }
- },
- mounted(){
- this.legendObj=this.legendMap[this.legendType];
- },
- watch:{
- legendType(n,o){
- this.legendType=n;
- this.legendObj=this.legendMap[this.legendType];
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .legend{
- display: inline-block;
- color: #848484;
- &>div{
- display: inline-block;
- margin-right: 16px;
- &>span{
- display: inline-block;
- vertical-align: middle;
- margin-right: 4px;
- width:12px;
- height:12px;
- border:1px solid rgba(214,218,223,1);
- }
- }
- &>div:last-child{
- position: relative;
- z-index: 2;
- &>span{
- width:8px;
- height:8px;
- border-radius: 50%;
- position: relative;
- background: #ffffff;
- border:2px solid #0091ff;
- }
- &>span.dotLine::after{
- content: '';
- box-sizing: content-box;
- top: 1px;
- left:-4px;
- z-index: -1;
- background: #0091ff;
- position: absolute;
- display: inline-block;
- width: 12px;
- height: 2px;
- }
- }
- }
- </style>
|