bomBox.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <div class="bomb">
  3. <div class="bomb-left">
  4. <div class="bomb-left1">当前策略</div>
  5. <div class="bomb-left2">应执行时间 13:00-13:20</div>
  6. <div class="bomb-left3">策略可靠度</div>
  7. <div id='circleEcharts' style="width:104px;height:104px"></div>
  8. </div>
  9. <div class="bomb-right">
  10. <water-unit></water-unit>
  11. <div class="bomb-right-center">
  12. <span>数据传输情况</span>
  13. <span class="bomb-span1">实际冷量 <span class="bomb-span3">2800</span>KW</span>
  14. <span class="bomb-span2">未来一小时预测冷量 <span class="bomb-span3">3400</span> KW</span>
  15. </div>
  16. <div class="bomb-right-bottom">
  17. <el-input placeholder="你可以在此处填写备注信息"> </el-input>
  18. </div>
  19. </div>
  20. </div>
  21. </template>
  22. <script>
  23. import echarts from 'echarts'
  24. import waterUnit from './waterUnit'
  25. export default {
  26. data(){
  27. return{
  28. }
  29. },
  30. components:{waterUnit},
  31. methods:{
  32. drawCircle(){
  33. var circleEcharts = echarts.init(document.getElementById("circleEcharts"))
  34. let option = {
  35. tooltip: {
  36. trigger: 'item',
  37. formatter: '{a} <br/>{b}: {c} ({d}%)'
  38. },
  39. series: [
  40. {
  41. name: '访问来源',
  42. type: 'pie',
  43. radius: ['50%', '70%'],
  44. avoidLabelOverlap: false,
  45. label: {
  46. normal: {
  47. show: false,
  48. position: 'center'
  49. },
  50. emphasis: {
  51. show: true,
  52. textStyle: {
  53. fontSize: '30',
  54. fontWeight: 'bold'
  55. }
  56. }
  57. },
  58. labelLine: {
  59. normal: {
  60. show: false
  61. }
  62. },
  63. data: [
  64. {value: 79, name: '直接访问'},
  65. {value: 21, name: '邮件营销'}
  66. ]
  67. }
  68. ]
  69. };
  70. circleEcharts.setOption(option)
  71. }
  72. },
  73. mounted(){
  74. this.drawCircle()
  75. }
  76. }
  77. </script>
  78. <style lang='scss' scoped>
  79. .bomb{
  80. width:100%;
  81. height:300px;
  82. margin-top: 10px;
  83. display: flex;
  84. .bomb-left{
  85. width:240px;
  86. padding-left:30px;
  87. .bomb-left1{
  88. font-size:16px;
  89. margin:38px 0 16px 0
  90. }
  91. .bomb-left2{
  92. color: #646C73;
  93. font-size: 14px;
  94. margin-bottom:16px;
  95. }
  96. .bomb-left3{
  97. color:#646C73;
  98. font-size: 14px;
  99. margin-bottom:22px;
  100. }
  101. }
  102. .bomb-right{
  103. .bomb-right-center{
  104. color:#646C73;
  105. font-size:14px;
  106. margin:20px 0;
  107. .bomb-span1{
  108. margin-left:88px;
  109. }
  110. .bomb-span2{
  111. margin-left:44px;
  112. }
  113. .bomb-span3{
  114. font-size: 18px;
  115. color: #1F2429;
  116. }
  117. }
  118. .bomb-right-bottom{
  119. margin-top: 16px;
  120. }
  121. }
  122. }
  123. </style>