mt-qj-wms-ui/src/views/energy/ammonia-analysis.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-19 10:55:33
 * @LastEditors: gtz
 * @LastEditTime: 2021-12-01 09:18:32
 * @Description:
-->
<template>
  <div class="chart-container">
    <el-row>
      <el-col :span="4">
        <div class="kiln-electric-treebox">
          <el-tree :data="yaoluList" @node-click="handleNode" />
        </div>
      </el-col>
      <el-col :span="20">
        <el-row style="margin: 20px 0" :gutter="20">
          <el-col style="margin: 20px 0">
            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
              <el-checkbox-button label="折线" />
              <el-checkbox-button label="柱状" />
            </el-checkbox-group>
            <el-row style="float: right">
              <el-radio-group v-model="eleType" @change="changeEleType">
                <el-radio-button label="日"></el-radio-button>
                <el-radio-button label="周"></el-radio-button>
                <el-radio-button label="月"></el-radio-button>
                <el-radio-button label="年"></el-radio-button>
              </el-radio-group>
              <el-date-picker
                v-model="date"
                :type="datePickerType[eleType].type"
                :format="datePickerType[eleType].format"
                :placeholder="'选择' + datePickerType[eleType].placeholder"
              />
            </el-row>
          </el-col>
          <el-col style="height: 500px">
            <chart height="100%" width="100%" :title="eleType" :showId="showId" :titleHeader="yaoluName" titleFooter="氮气用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Chart from '@/components/Charts/MixChart'
import ringChart from '@/components/Charts/RingChart'
import lineChart from '@/components/Charts/LineChart.1'

// 日发电数据
const eleDayList = [
  { time: '01:00', value: 22 },
  { time: '02:00', value: 12 },
  { time: '03:00', value: 32 },
  { time: '04:00', value: 52 },
  { time: '05:00', value: 22 },
  { time: '06:00', value: 12 },
  { time: '07:00', value: 42 },
  { time: '08:00', value: 32 },
  { time: '09:00', value: 22 },
  { time: '10:00', value: 12 },
  { time: '11:00', value: 12 },
  { time: '12:00', value: 52 },
  { time: '13:00', value: 62 },
  { time: '14:00', value: 62 },
  { time: '15:00', value: 32 },
  { time: '16:00', value: 22 },
  { time: '17:00', value: 12 },
  { time: '18:00', value: 2 },
  { time: '19:00', value: 92 },
  { time: '20:00', value: 12 },
  { time: '21:00', value: 52 },
  { time: '22:00', value: 26 },
  { time: '23:00', value: 21 },
  { time: '24:00', value: 28 }
]

// 前日发电数据
const lastEleDayList = [
  { time: '01:00', value: 22 },
  { time: '02:00', value: 62 },
  { time: '03:00', value: 23 },
  { time: '04:00', value: 25 },
  { time: '05:00', value: 72 },
  { time: '06:00', value: 21 },
  { time: '07:00', value: 24 },
  { time: '08:00', value: 23 },
  { time: '09:00', value: 20 },
  { time: '10:00', value: 14 },
  { time: '11:00', value: 18 },
  { time: '12:00', value: 72 },
  { time: '13:00', value: 22 },
  { time: '14:00', value: 12 },
  { time: '15:00', value: 62 },
  { time: '16:00', value: 72 },
  { time: '17:00', value: 22 },
  { time: '18:00', value: 46 },
  { time: '19:00', value: 52 },
  { time: '20:00', value: 22 },
  { time: '21:00', value: 25 },
  { time: '22:00', value: 62 },
  { time: '23:00', value: 12 },
  { time: '24:00', value: 82 }
]

// 周发电数据
const eleWeekList = [
  { time: '周日', value: 22 },
  { time: '周一', value: 12 },
  { time: '周二', value: 32 },
  { time: '周三', value: 52 },
  { time: '周四', value: 22 },
  { time: '周五', value: 12 },
  { time: '周六', value: 42 }
]

// 上周发电数据
const lastEleWeekList = [
  { time: '周日', value: 111 },
  { time: '周一', value: 72 },
  { time: '周二', value: 312 },
  { time: '周三', value: 52 },
  { time: '周四', value: 82 },
  { time: '周五', value: 152 },
  { time: '周六', value: 52 }
]

// 月发电数据
const eleMonthList = [
  { time: '1日', value: 12 },
  { time: '2日', value: 12 },
  { time: '3日', value: 32 },
  { time: '4日', value: 52 },
  { time: '5日', value: 22 },
  { time: '6日', value: 12 },
  { time: '7日', value: 42 },
  { time: '8日', value: 32 },
  { time: '9日', value: 75 },
  { time: '10日', value: 124 },
  { time: '11日', value: 234 },
  { time: '12日', value: 542 },
  { time: '13日', value: 644 },
  { time: '14日', value: 62 },
  { time: '15日', value: 32 },
  { time: '16日', value: 565 },
  { time: '17日', value: 12 },
  { time: '18日', value: 2 },
  { time: '19日', value: 92 },
  { time: '20日', value: 12 },
  { time: '21日', value: 52 },
  { time: '22日', value: 176 },
  { time: '23日', value: 21 },
  { time: '24日', value: 64 },
  { time: '25日', value: 92 },
  { time: '26日', value: 124 },
  { time: '27日', value: 44 },
  { time: '28日', value: 226 },
  { time: '29日', value: 17 },
  { time: '30日', value: 28 }
]

// 上月发电数据
const lastEleMonthList = [
  { time: '1日', value: 22 },
  { time: '2日', value: 236 },
  { time: '3日', value: 32 },
  { time: '4日', value: 312 },
  { time: '5日', value: 22 },
  { time: '6日', value: 12 },
  { time: '7日', value: 42 },
  { time: '8日', value: 32 },
  { time: '9日', value: 22 },
  { time: '10日', value: 84 },
  { time: '11日', value: 25 },
  { time: '12日', value: 52 },
  { time: '13日', value: 122 },
  { time: '14日', value: 62 },
  { time: '15日', value: 32 },
  { time: '16日', value: 22 },
  { time: '17日', value: 12 },
  { time: '18日', value: 2 },
  { time: '19日', value: 92 },
  { time: '20日', value: 12 },
  { time: '21日', value: 52 },
  { time: '22日', value: 26 },
  { time: '23日', value: 81 },
  { time: '24日', value: 28 },
  { time: '25日', value: 52 },
  { time: '26日', value: 12 },
  { time: '27日', value: 47 },
  { time: '28日', value: 12 },
  { time: '29日', value: 21 },
  { time: '30日', value: 28 }
]

// 年发电数据
const eleYearList = [
  { time: '1月', value: 256 },
  { time: '2月', value: 12 },
  { time: '3月', value: 32 },
  { time: '4月', value: 52 },
  { time: '5月', value: 22 },
  { time: '6月', value: 12 },
  { time: '7月', value: 42 },
  { time: '8月', value: 32 },
  { time: '9月', value: 22 },
  { time: '10月', value: 12 },
  { time: '11月', value: 12 },
  { time: '12月', value: 52 }
]

// 去年发电数据
const lastEleYearList = [
  { time: '1月', value: 22 },
  { time: '2月', value: 12 },
  { time: '3月', value: 42 },
  { time: '4月', value: 52 },
  { time: '5月', value: 224 },
  { time: '6月', value: 12 },
  { time: '7月', value: 42 },
  { time: '8月', value: 32 },
  { time: '9月', value: 44 },
  { time: '10月', value: 12 },
  { time: '11月', value: 168 },
  { time: '12月', value: 51 }
]

// 日期类型
const datePickerType = {
  '日': {
    type: 'date',
    format: '',
    placeholder: '日期'
  },
  '周': {
    type: 'week',
    format: 'yyyy 第 WW 周',
    placeholder: '周'
  },
  '月': {
    type: 'month',
    format: '',
    placeholder: '月'
  },
  '年': {
    type: 'year',
    format: '',
    placeholder: '年'
  }
}

// 窑炉列表
const yaoluList = [
  {
    id: 1,
    label: '窑炉1',
    value: 63,
    percent: 11,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 2,
    label: '窑炉2',
    value: 44,
    percent: 8,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 3,
    label: '窑炉3',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 4,
    label: '窑炉4',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 5,
    label: '窑炉5',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 6,
    label: '窑炉6',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 7,
    label: '窑炉7',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 8,
    label: '窑炉8',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 9,
    label: '窑炉9',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 10,
    label: '窑炉10',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  },
  {
    id: 11,
    label: '窑炉11',
    value: 56,
    percent: 9,
    data: [
      { time: '0:00', value: 24 },
      { time: '2:00', value: 43 },
      { time: '4:00', value: 33 },
      { time: '6:00', value: 25 },
      { time: '8:00', value: 44 },
      { time: '10:00', value: 46 },
      { time: '12:00', value: 16 },
      { time: '14:00', value: 47 },
      { time: '16:00', value: 86 },
      { time: '18:00', value: 22 },
      { time: '20:00', value: 25 },
      { time: '22:00', value: 27 }
    ],
    lastData: [
      { time: '0:00', value: 54 },
      { time: '2:00', value: 13 },
      { time: '4:00', value: 63 },
      { time: '6:00', value: 85 },
      { time: '8:00', value: 14 },
      { time: '10:00', value: 26 },
      { time: '12:00', value: 56 },
      { time: '14:00', value: 37 },
      { time: '16:00', value: 36 },
      { time: '18:00', value: 12 },
      { time: '20:00', value: 35 },
      { time: '22:00', value: 17 }
    ]
  }
]

export default {
  name: 'ammonia-analysis',
  components: { Chart, ringChart, lineChart },
  data () {
    return {
      eleDayList,
      eleWeekList,
      eleMonthList,
      eleYearList,
      lastEleDayList,
      lastEleWeekList,
      lastEleMonthList,
      lastEleYearList,
      datePickerType,
      yaoluList,
      date: new Date(),
      dataList: [],
      lastDataList: [],
      chartType: ['柱状'],
      eleType: '年',
      showId: 0,
      yaoluIndex: 0,
      yaoluName: ''
    }
  },
  mounted () {
    this.dataList = this.eleYearList
    this.lastDataList = this.lastEleYearList
    this.showId = this.yaoluList[0].id
    this.yaoluName = this.yaoluList[0].label
  },
  methods: {
    changeEleType (v) {
      switch (v) {
        case '日':
          this.dataList = this.eleDayList
          this.lastDataList = this.lastEleDayList
          this.date = new Date()
          break
        case '周':
          this.dataList = this.eleWeekList
          this.lastDataList = this.lastEleWeekList
          this.date = new Date()
          break
        case '月':
          this.dataList = this.eleMonthList
          this.lastDataList = this.lastEleMonthList
          this.date = new Date()
          break
        case '年':
          this.dataList = this.eleYearList
          this.lastDataList = this.lastEleYearList
          this.date = new Date()
          break
      }
    },
    handleNode (obj, node, e) {
      if (!(obj.children)) {
        this.showId = obj.id
        this.yaoluName = obj.label
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 124px);
  .kiln-electric-treebox {
    width: 100%;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    padding: 10px;
  }
}
</style>

<style lang="scss">
.el-tabs__item{
  height: 120px;
}
.el-tabs__nav-next, .el-tabs__nav-prev {
  line-height: 120px;
}
</style>