| | |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">屏蔽</div> |
| | | <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/FireFighting/xiaofang_ic_guzhang@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">故障</div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/FireFighting/xiaofang_ic_lixian@2x.png" alt=""> |
| | | <img src="@/assets/images/FireFighting/xiaofang_ic_zhengchang@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">正常</div> |
| | | <div class="num num4">{{ dataList4.offlineDeviceNum }}</div> |
| | | </div> |
| | | </div> |
| | | <div class="item"> |
| | | <img src="@/assets/images/FireFighting/xiaofang_ic_pingbi@2x.png" alt=""> |
| | | <div class="content"> |
| | | <div class="name">屏蔽</div> |
| | | <div class="num num5">{{ dataList4.shieldDeviceNum || 0 }}</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | { |
| | | name: '最上层立体圆', |
| | | type: 'pictorialBar', |
| | | symbolSize: [260, 40], |
| | | symbolSize: [170, 40], |
| | | symbolOffset: [0, -20], |
| | | z: 12, |
| | | itemStyle: { |
| | |
| | | { |
| | | name: '中间立体圆', |
| | | type: 'pictorialBar', |
| | | symbolSize: [260, 40], |
| | | symbolSize: [170, 40], |
| | | symbolOffset: [0, -20], |
| | | z: 12, |
| | | itemStyle: { |
| | |
| | | { |
| | | name: '最底部立体圆', |
| | | type: 'pictorialBar', |
| | | symbolSize: [260, 40], |
| | | symbolSize: [170, 40], |
| | | symbolOffset: [0, 20], |
| | | z: 12, |
| | | itemStyle: { |
| | |
| | | label: { |
| | | distance: 15, |
| | | show: true, |
| | | position: data > 58 ? 'inside' : 'top', |
| | | position: data > 52 ? 'inside' : 'top', |
| | | formatter: '{c}' + '%', |
| | | fontSize: 80, |
| | | fontSize: 72, |
| | | color: '#1AFCFF', |
| | | textShadowColor: '#03C7F9', |
| | | textShadowBlur: 30, |
| | |
| | | |
| | | .num3 { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #e9bf43 50%, |
| | | #eb8131 100%); |
| | | #eb8131 0%, |
| | | #d0a72c 50%, |
| | | #e9bf43 100%); |
| | | } |
| | | |
| | | .num4 { |
| | | background-image: -webkit-linear-gradient(top, |
| | | #fff 0%, |
| | | #9e9e9e 50%, |
| | | #9e9e9e 100%); |
| | | #78db91 50%, |
| | | #6de8b0 100%); |
| | | } |
| | | |
| | | .num5 { |
| | |
| | | /* border: 6px solid red; */ |
| | | .liquidle_te { |
| | | font-weight: 500; |
| | | font-size: 16px; |
| | | font-size: 18px; |
| | | position: absolute; |
| | | top: 102px; |
| | | top: 99px; |
| | | left: 0; |
| | | width: 214px; |
| | | width: 192px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | |
| | | .placeT { |
| | | font-size: 12px; |
| | | color: #869CC9; |
| | | margin-top: 4px; |
| | | margin-top: 6px; |
| | | } |
| | | } |
| | | |
| | |
| | | } */ |
| | | |
| | | .liquidlevel { |
| | | width: 300px; |
| | | width: 206px; |
| | | height: 400px; |
| | | transform: scale(0.24); |
| | | transform: scale(0.27); |
| | | color: #fff; |
| | | text-align: center; |
| | | position: relative; |
| | | left: -42px; |
| | | top: -140px; |
| | | left: -8px; |
| | | top: -143px; |
| | | } |
| | | } |
| | | } |