123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- <template>
- <div class="an-content">
- <div class="an-box">
- <div class="an-box-1">
- <span class="span2">数据传输情况</span>
- <el-tag
- v-for="item in items"
- :key="item.label"
- :type="item.type"
- closable
- effect="dark">
- {{ item.label }}
- </el-tag>
- </div>
- <div class="an-box-1">
- <span class="span2">实际冷量</span> 2800kw <span class="span1"><span class="span2">未来1小时预测冷量 </span>3400 kw</span>
- </div>
- </div>
- <div class="an-center">
- <bom-box></bom-box>
- </div>
- <div class="an-bottom">
- <div id="leftLine" style="width:574px;height:350px;margin-right:;24px;">
- </div>
- <div id="rightLine" style="width:573px;height:350px;"></div>
- </div>
- </div>
-
- </template>
- <script>
- import echarts from 'echarts'
- import bomBox from './bomBox'
- export default {
- data(){
- return{
- items: [
- { type: 'success', label: '能耗' },
- { type: 'success', label: '环境' },
- { type: 'danger', label: 'BA' },
-
- ]
- }
- },
- components:{bomBox},
- methods:{
- drawLeft(){
- var leftLine = echarts.init(document.getElementById('leftLine'))
- let option = {
- tooltip: {
- trigger: 'axis'
- },
- legend: {
- data: ['室外温度', '室内平均温度', '室内最高温度']
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
-
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name: '室外温度',
- type: 'line',
- stack: '总量',
- data: [120, 132, 101, 134, 90, 230, 210,112,150,]
- },
- {
- name: '室内平均温度',
- type: 'line',
- stack: '总量',
- data: [220, 182, 191, 234, 290, 330, 310,220,280]
- },
- {
- name: '室内最高温度',
- type: 'line',
- stack: '总量',
- data: [150, 232, 201, 154, 190, 330, 410,300,340]
- },
-
- ]
- };
- leftLine.setOption(option)
- },
- drawRight(){
- var rightLine = echarts.init(document.getElementById('rightLine'))
- rightLine.setOption({
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- animation: false,
- label: {
- backgroundColor: '#ccc',
- borderColor: '#aaa',
- borderWidth: 1,
- shadowBlur: 0,
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- color: '#222'
- }
- },
- formatter: function (params) {
- return params[2].name + '<br />' + params[2].value;
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00','24:00'],
-
- },
- yAxis: {
-
-
- splitNumber: 3,
- splitLine: {
- show: false
- }
- },
- series: [{
- name: 'L',
- type: 'line',
- data: [20,30,40,50,60,50,40,30,20],
- lineStyle: {
- opacity: 0
- },
- stack: 'confidence-band',
- symbol: 'none'
- }, {
- name: 'U',
- type: 'line',
- data: [20,30,50,60,50,40,30,20,40],
- lineStyle: {
- opacity: 0
- },
- areaStyle: {
- color: '#ccc'
- },
- stack: 'confidence-band',
- symbol: 'none'
- }, {
- type: 'line',
- data: [20,30,40,50,60,40,30,20,50],
- hoverAnimation: false,
- symbolSize: 6,
- itemStyle: {
- color: '#c23531'
- },
- showSymbol: false
- }]
- });
- },
- },
- mounted(){
- this.drawLeft()
- this.drawRight()
- }
- }
- </script>
- <style lang='scss' scoped>
- .an-content{
- .an-box{
- display:flex;
- justify-content:space-between;
- margin-top: 20px;
- .an-box-1{
- min-width:544px;
- border:1px dashed #ccc;
- padding-top: 30px;
- padding-left: 24px;
- padding-bottom:30px;
- background: #F8F9FA;
- margin-right: 12px;
- .span2{
- color: #646C73;
- margin-right: 10px;
- }
- .span1{
- margin-left:64px;
- }
- }
- }
- .an-center{
- display: none;
- }
- .an-bottom{
- margin-top: 45px;
- display: flex;
- }
- }
- </style>
- <style lang="scss" scoped>
- .an-content{
- .el-tag{
- margin-right: 10px;
- }
- }
- </style>
|