123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <template>
- <div class="bomb">
- <div class="bomb-left">
- <div class="bomb-left1">当前策略</div>
- <div class="bomb-left2">应执行时间 13:00-13:20</div>
- <div class="bomb-left3">策略可靠度</div>
- <div id='circleEcharts' style="width:104px;height:104px"></div>
- </div>
- <div class="bomb-right">
- <water-unit></water-unit>
- <div class="bomb-right-center">
- <span>数据传输情况</span>
- <span class="bomb-span1">实际冷量 <span class="bomb-span3">2800</span>KW</span>
- <span class="bomb-span2">未来一小时预测冷量 <span class="bomb-span3">3400</span> KW</span>
- </div>
- <div class="bomb-right-bottom">
- <el-input placeholder="你可以在此处填写备注信息"> </el-input>
- </div>
- </div>
- </div>
- </template>
- <script>
- import echarts from 'echarts'
- import waterUnit from './waterUnit'
- export default {
- data(){
- return{
-
- }
- },
- components:{waterUnit},
- methods:{
- drawCircle(){
- var circleEcharts = echarts.init(document.getElementById("circleEcharts"))
- let option = {
- tooltip: {
- trigger: 'item',
- formatter: '{a} <br/>{b}: {c} ({d}%)'
- },
- series: [
- {
- name: '访问来源',
- type: 'pie',
- radius: ['50%', '70%'],
- avoidLabelOverlap: false,
- label: {
- normal: {
- show: false,
- position: 'center'
- },
- emphasis: {
- show: true,
- textStyle: {
- fontSize: '30',
- fontWeight: 'bold'
- }
- }
- },
- labelLine: {
- normal: {
- show: false
- }
- },
- data: [
- {value: 79, name: '直接访问'},
- {value: 21, name: '邮件营销'}
- ]
- }
- ]
- };
- circleEcharts.setOption(option)
- }
- },
- mounted(){
- this.drawCircle()
- }
- }
- </script>
- <style lang='scss' scoped>
- .bomb{
- width:100%;
- height:300px;
- margin-top: 10px;
- display: flex;
- .bomb-left{
- width:240px;
- padding-left:30px;
- .bomb-left1{
- font-size:16px;
- margin:38px 0 16px 0
- }
- .bomb-left2{
- color: #646C73;
- font-size: 14px;
- margin-bottom:16px;
- }
- .bomb-left3{
- color:#646C73;
- font-size: 14px;
- margin-bottom:22px;
- }
- }
- .bomb-right{
- .bomb-right-center{
- color:#646C73;
- font-size:14px;
- margin:20px 0;
- .bomb-span1{
- margin-left:88px;
- }
- .bomb-span2{
- margin-left:44px;
- }
- .bomb-span3{
- font-size: 18px;
- color: #1F2429;
- }
- }
- .bomb-right-bottom{
- margin-top: 16px;
- }
- }
- }
- </style>
|