From 35d96759a160ef1573163934652c808c50b6b8a8 Mon Sep 17 00:00:00 2001
From: zwq <zwq229436@163.com>
Date: Fri, 17 Dec 2021 15:29:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                          |   8 +-
 src/views/energy/electric-acquisition.vue    | 502 ++++++-------
 src/views/energy/gas-acquisition.vue         | 272 +++++++
 src/views/energy/methanol.vue                | 737 +++++++++++++++++++
 src/views/energy/propane.vue                 | 737 +++++++++++++++++++
 src/views/energy/temperature-acquisition.vue | 274 +++++++
 src/views/main-sidebar.vue                   |  34 +
 7 files changed, 2289 insertions(+), 275 deletions(-)
 create mode 100644 src/views/energy/gas-acquisition.vue
 create mode 100644 src/views/energy/methanol.vue
 create mode 100644 src/views/energy/propane.vue
 create mode 100644 src/views/energy/temperature-acquisition.vue

diff --git a/src/router/index.js b/src/router/index.js
index 1a516b5..10dff3f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,8 @@
 /*
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
- * @LastEditors: gtz
- * @LastEditTime: 2021-12-16 10:25:29
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-12-17 14:51:08
  * @Description:
  */
 /**
@@ -65,8 +65,12 @@ const mainRoutes = {
     { path: '/energy-electric', component: _import('energy/electric'), name: 'energy-electric', meta: { title: '用电能源分析', isTab: true } },
     { path: '/energy-kiln-electric', component: _import('energy/kiln-electric'), name: 'energy-kiln-electric', meta: { title: '窑炉用电分析', isTab: true } },
     { path: '/energy-ammonia', component: _import('energy/ammonia'), name: 'energy-ammonia', meta: { title: '氨气流量分析', isTab: true } },
+    { path: '/energy-methanol', component: _import('energy/methanol'), name: 'energy-methanol', meta: { title: '甲醇流量分析', isTab: true } },
+    { path: '/energy-propane', component: _import('energy/propane'), name: 'energy-propane', meta: { title: '丙烷流量分析', isTab: true } },
     { path: '/energy-nitrogen', component: _import('energy/nitrogen'), name: 'energy-nitrogen', meta: { title: '氮气流量分析', isTab: true } },
     { path: '/energy-electric-acquisition', component: _import('energy/electric-acquisition'), name: 'energy-electric-acquisition', meta: { title: '电能采集数据', isTab: true } },
+    { path: '/energy-gas-acquisition', component: _import('energy/gas-acquisition'), name: 'energy-gas-acquisition', meta: { title: '用气采集数据', isTab: true } },
+    { path: '/energy-temperature-acquisition', component: _import('energy/temperature-acquisition'), name: 'energy-temperature-acquisition', meta: { title: '温度采集数据', isTab: true } },
     { path: '/energy-process-temperature', component: _import('energy/process-temperature'), name: 'energy-process-temperature', meta: { title: '窑炉加工温度', isTab: true } },
     { path: '/energy-sump-temperature', component: _import('energy/sump-temperature'), name: 'energy-sump-temperature', meta: { title: '油槽温度', isTab: true } },
     { path: '/energy-ammonia-analysis', component: _import('energy/ammonia-analysis'), name: 'energy-ammonia-analysis', meta: { title: '使用氮气分析', isTab: true } },
diff --git a/src/views/energy/electric-acquisition.vue b/src/views/energy/electric-acquisition.vue
index 6d897a9..65a6aef 100644
--- a/src/views/energy/electric-acquisition.vue
+++ b/src/views/energy/electric-acquisition.vue
@@ -1,319 +1,275 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-19 10:55:33
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-12-17 15:27:13
+ * @Description:
+-->
 <template>
-  <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-      <el-form-item>
-        <el-radio-group size="small" v-model="dataForm.type" @change="changeType">
-          <el-radio-button label="日" />
-          <el-radio-button label="周" />
-          <el-radio-button label="月" />
-          <el-radio-button label="年" />
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item size="small" label="选择时间">
-        <el-date-picker
-          v-model="dataForm.date"
-          :type="datePickerType[dataForm.type].type"
-          :format="datePickerType[dataForm.type].format"
-          :placeholder="'选择' + datePickerType[dataForm.type].placeholder"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="getDataList()">查询</el-button>
-      </el-form-item>
-    </el-form>
-    <el-table
-      :data="dataList"
-      border
-      v-loading="dataListLoading"
-      style="width: 100%;">
-      <el-table-column
-        prop="time"
-        header-align="center"
-        align="center"
-        label="时间"
-      />
-      <el-table-column
-        v-for="item in yaoluList"
-        :prop="item.id"
-        header-align="center"
-        align="center"
-        :label="item.name"
-        :key="item.id"
-      />
-    </el-table>
+  <div class="chart-container">
+    <el-row>
+      <el-col :span="2">
+        <div class="kiln-electric-treebox">
+          <el-tree
+            :data="yaoluList"
+            @node-click="handleNode"
+            :highlight-current="true"
+          />
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <el-card class="base-container" style="min-height: 540px">
+          <el-row style="z-index: 10;">
+            <el-radio-group
+              style="margin: 0 20px; position:relative; bottom: 2px"
+              size="small"
+              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
+              size="small"
+              v-model="date"
+              :type="datePickerType[eleType].type"
+              :format="datePickerType[eleType].format"
+              :placeholder="'选择' + datePickerType[eleType].placeholder"
+            />
+            <el-button size="small" @click="getDataList()">
+              <icon-svg class="iconClass" name="sousuo"></icon-svg>
+              查询
+            </el-button>
+          </el-row>
+          <el-col style="height: 600px">
+            <el-table
+              :data="dataList"
+              :stripe="true"
+              :header-cell-style="{
+                background: '#eef1f6',
+                color: '#606266',
+                height: '56px'
+              }"
+              v-loading="dataListLoading"
+              style="width: 100%;padding:20px"
+            >
+              <el-table-column
+                type="index"
+                header-align="center"
+                align="center"
+                label="序号"
+                width="50"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="createTime"
+                header-align="center"
+                align="center"
+                label="采集时间"
+              >
+              </el-table-column>
+              <el-table-column prop="vehicleName" label="A相电压">
+              </el-table-column>
+              <el-table-column prop="code" label="B相电压"> </el-table-column>
+              <el-table-column prop="vehicleAlias" label="C相电压">
+              </el-table-column>
+              <el-table-column prop="anqi" label="A相电流"> </el-table-column>
+              <el-table-column prop="anqi" label="B相电流"> </el-table-column>
+              <el-table-column prop="anqi" label="C相电流"> </el-table-column>
+              <el-table-column prop="anqi" label="功率值"> </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="pageIndex"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="pageSize"
+              :total="totalPage"
+              layout="total, sizes, prev, pager, next, jumper"
+            >
+            </el-pagination>
+          </el-col>
+        </el-card>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-// 窑炉列表
-const yaoluList = [
-  {
-    id: '1',
-    name: '窑炉1',
-    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 }
-    ]
-  },
-  {
-    id: '2',
-    name: '窑炉2',
-    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 }
-    ]
-  },
-  {
-    id: '3',
-    name: '窑炉3',
-    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 }
-    ]
-  },
-  {
-    id: '4',
-    name: '窑炉4',
-    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 }
-    ]
-  },
-  {
-    id: '5',
-    name: '窑炉5',
-    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 }
-    ]
-  },
-  {
-    id: '6',
-    name: '窑炉6',
-    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 }
-    ]
-  },
-  {
-    id: '7',
-    name: '窑炉7',
-    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 }
-    ]
-  },
-  {
-    id: '8',
-    name: '窑炉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 }
-    ]
-  },
-  {
-    id: '9',
-    name: '窑炉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 }
-    ]
-  },
-  {
-    id: '10',
-    name: '窑炉10',
-    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 }
-    ]
-  },
-  {
-    id: '11',
-    name: '窑炉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 }
-    ]
-  }
-]
-
 // 日期类型
 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'
+  },
+  {
+    id: 2,
+    label: '窑炉2'
+  },
+  {
+    id: 3,
+    label: '窑炉3'
+  },
+  {
+    id: 4,
+    label: '窑炉4'
+  },
+  {
+    id: 5,
+    label: '窑炉5'
+  },
+  {
+    id: 6,
+    label: '窑炉6'
+  },
+  {
+    id: 7,
+    label: '窑炉7'
+  },
+  {
+    id: 8,
+    label: '窑炉8'
+  },
+  {
+    id: 9,
+    label: '窑炉9'
+  },
+  {
+    id: 10,
+    label: '窑炉10'
+  },
+  {
+    id: 11,
+    label: '窑炉11'
+  }
+]
+
 export default {
+  name: 'gas-acquisition',
   data () {
     return {
-      dataForm: {
-        type: '日',
-        date: new Date()
-      },
+      datePickerType,
+      yaoluList,
+      date: new Date(),
+      eleType: '年',
+      showId: 0,
+      yaoluIndex: 0,
+      yaoluName: '',
       dataList: [],
       pageIndex: 1,
       pageSize: 10,
       totalPage: 0,
-      dataListLoading: false,
-      orderDetailVisible: false,
-      yaoluList,
-      datePickerType
+      dataListLoading: false
     }
   },
-  created () {
+  mounted () {
+    this.showId = this.yaoluList[0].id
+    this.yaoluName = this.yaoluList[0].label
+  },
+  activated () {
     this.getDataList()
   },
   methods: {
-    // 获取数据列表
+      // 获取数据列表
     getDataList () {
-      this.dataList = []
       this.dataListLoading = true
-      this.yaoluList.map((item, index) => {
-        if (index === 0) {
-          item.data.map(i => {
-            this.dataList.push({
-              time: i.time,
-              [item.id]: i.value
-            })
-          })
+      this.$http({
+        url: this.$http.adornUrl('/vehicle/page'),
+        method: 'post',
+        data: this.$http.adornData({
+          'current': this.pageIndex,
+          'size': this.pageSize
+        })
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.records
+          this.totalPage = data.data.total
         } else {
-          item.data.map((i, idx) => {
-            this.dataList[idx][item.id] = i.value
-          })
+          this.dataList = []
+          this.totalPage = 0
         }
+        this.dataListLoading = false
       })
-      this.dataListLoading = false
     },
-    // 切换查询类型
-    changeType (v) {}
+    changeEleType (v) {
+      switch (v) {
+        case '日':
+          this.date = new Date()
+          break
+        case '周':
+          this.date = new Date()
+          break
+        case '月':
+          this.date = new Date()
+          break
+        case '年':
+          this.date = new Date()
+          break
+      }
+    },
+      // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+      // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    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 - 138px);
+}
+</style>
+
+<style lang="scss">
+.chart-container {
+  .el-tabs__item {
+    height: 120px;
+  }
+  .el-tabs__nav-next,
+  .el-tabs__nav-prev {
+    line-height: 120px;
+  }
+}
+</style>
diff --git a/src/views/energy/gas-acquisition.vue b/src/views/energy/gas-acquisition.vue
new file mode 100644
index 0000000..58c155a
--- /dev/null
+++ b/src/views/energy/gas-acquisition.vue
@@ -0,0 +1,272 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-19 10:55:33
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-12-17 15:24:18
+ * @Description:
+-->
+<template>
+  <div class="chart-container">
+    <el-row>
+      <el-col :span="2">
+        <div class="kiln-electric-treebox">
+          <el-tree
+            :data="yaoluList"
+            @node-click="handleNode"
+            :highlight-current="true"
+          />
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <el-card class="base-container" style="min-height: 540px">
+          <el-row style="z-index: 10;">
+            <el-radio-group
+              style="margin: 0 20px; position:relative; bottom: 2px"
+              size="small"
+              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
+              size="small"
+              v-model="date"
+              :type="datePickerType[eleType].type"
+              :format="datePickerType[eleType].format"
+              :placeholder="'选择' + datePickerType[eleType].placeholder"
+            />
+            <el-button size="small" @click="getDataList()">
+              <icon-svg class="iconClass" name="sousuo"></icon-svg>
+              查询
+            </el-button>
+          </el-row>
+          <el-col style="height: 600px">
+            <el-table
+              :data="dataList"
+              :stripe="true"
+              :header-cell-style="{
+                background: '#eef1f6',
+                color: '#606266',
+                height: '56px'
+              }"
+              v-loading="dataListLoading"
+              style="width: 100%;padding:20px"
+            >
+              <el-table-column
+                type="index"
+                header-align="center"
+                align="center"
+                label="序号"
+                width="50"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="createTime"
+                header-align="center"
+                align="center"
+                label="采集时间"
+              >
+              </el-table-column>
+              <el-table-column prop="vehicleName" label="氮气流量">
+              </el-table-column>
+              <el-table-column prop="code" label="甲醇流量"> </el-table-column>
+              <el-table-column prop="vehicleAlias" label="丙烷流量">
+              </el-table-column>
+              <el-table-column prop="anqi" label="氨气流量"> </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="pageIndex"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="pageSize"
+              :total="totalPage"
+              layout="total, sizes, prev, pager, next, jumper"
+            >
+            </el-pagination>
+          </el-col>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// 日期类型
+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'
+  },
+  {
+    id: 2,
+    label: '窑炉2'
+  },
+  {
+    id: 3,
+    label: '窑炉3'
+  },
+  {
+    id: 4,
+    label: '窑炉4'
+  },
+  {
+    id: 5,
+    label: '窑炉5'
+  },
+  {
+    id: 6,
+    label: '窑炉6'
+  },
+  {
+    id: 7,
+    label: '窑炉7'
+  },
+  {
+    id: 8,
+    label: '窑炉8'
+  },
+  {
+    id: 9,
+    label: '窑炉9'
+  },
+  {
+    id: 10,
+    label: '窑炉10'
+  },
+  {
+    id: 11,
+    label: '窑炉11'
+  }
+]
+
+export default {
+  name: 'gas-acquisition',
+  data () {
+    return {
+      datePickerType,
+      yaoluList,
+      date: new Date(),
+      eleType: '年',
+      showId: 0,
+      yaoluIndex: 0,
+      yaoluName: '',
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false
+    }
+  },
+  mounted () {
+    this.showId = this.yaoluList[0].id
+    this.yaoluName = this.yaoluList[0].label
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+      // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/vehicle/page'),
+        method: 'post',
+        data: this.$http.adornData({
+          'current': this.pageIndex,
+          'size': this.pageSize
+        })
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.records
+          this.totalPage = data.data.total
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    changeEleType (v) {
+      switch (v) {
+        case '日':
+          this.date = new Date()
+          break
+        case '周':
+          this.date = new Date()
+          break
+        case '月':
+          this.date = new Date()
+          break
+        case '年':
+          this.date = new Date()
+          break
+      }
+    },
+      // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+      // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    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 - 138px);
+}
+</style>
+
+<style lang="scss">
+.chart-container {
+  .el-tabs__item {
+    height: 120px;
+  }
+  .el-tabs__nav-next,
+  .el-tabs__nav-prev {
+    line-height: 120px;
+  }
+}
+</style>
diff --git a/src/views/energy/methanol.vue b/src/views/energy/methanol.vue
new file mode 100644
index 0000000..e6d07e3
--- /dev/null
+++ b/src/views/energy/methanol.vue
@@ -0,0 +1,737 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-19 10:55:33
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-12-17 15:08:06
+ * @Description:
+-->
+<template>
+  <div class="chart-container">
+    <el-row>
+      <el-col :span="2">
+        <div class="kiln-electric-treebox">
+          <el-tree :data="yaoluList" @node-click="handleNode" />
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <el-row>
+          <el-col :span="8">
+            <el-card class="base-container" style="height: 214px">
+              <el-row style="position: relative;">
+                <div class="base-container-titleline"></div>
+                <h3>甲醇流量分析</h3>
+              </el-row>
+              <el-row>
+                <el-col style="padding: 24px 0">
+                  <p
+                    :title="'甲醇流量（立方米）：123,109'"
+                    style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
+                  >
+                    <icon-svg style="position: relative; top: 2px" class="iconClass" name="甲醇"></icon-svg>
+                    甲醇流量（立方米）：<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
+                  </p>
+                  <p style="font-size: 14px; text-indent: 20px;">昨日甲醇流量(立方米)：1145</p>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+            <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" 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
+              size="small"
+              v-model="date"
+              :type="datePickerType[eleType].type"
+              :format="datePickerType[eleType].format"
+              :placeholder="'选择' + datePickerType[eleType].placeholder"
+            />
+          </el-row>
+          <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-card>
+      </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: 'methanol',
+  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 - 138px);
+
+}
+</style>
+
+<style lang="scss">
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
+}
+</style>
diff --git a/src/views/energy/propane.vue b/src/views/energy/propane.vue
new file mode 100644
index 0000000..a6bc5ea
--- /dev/null
+++ b/src/views/energy/propane.vue
@@ -0,0 +1,737 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-19 10:55:33
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-12-17 15:08:36
+ * @Description:
+-->
+<template>
+  <div class="chart-container">
+    <el-row>
+      <el-col :span="2">
+        <div class="kiln-electric-treebox">
+          <el-tree :data="yaoluList" @node-click="handleNode" />
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <el-row>
+          <el-col :span="8">
+            <el-card class="base-container" style="height: 214px">
+              <el-row style="position: relative;">
+                <div class="base-container-titleline"></div>
+                <h3>丙烷流量分析</h3>
+              </el-row>
+              <el-row>
+                <el-col style="padding: 24px 0">
+                  <p
+                    :title="'丙烷流量（立方米）：123,109'"
+                    style="font-size: 16px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;"
+                  >
+                    <icon-svg style="position: relative; top: 2px" class="iconClass" name="丙烷"></icon-svg>
+                    丙烷流量（立方米）：<strong style="font-size: 32px; color: #f78c3e">123,109</strong>
+                  </p>
+                  <p style="font-size: 14px; text-indent: 20px;">昨日丙烷流量(立方米)：1145</p>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+        </el-row>
+        <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartType" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+            <el-radio-group style="margin: 0 10px; position:relative; bottom: 2px" size="small" 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
+              size="small"
+              v-model="date"
+              :type="datePickerType[eleType].type"
+              :format="datePickerType[eleType].format"
+              :placeholder="'选择' + datePickerType[eleType].placeholder"
+            />
+          </el-row>
+          <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-card>
+      </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: 'propane',
+  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 - 138px);
+
+}
+</style>
+
+<style lang="scss">
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
+}
+</style>
diff --git a/src/views/energy/temperature-acquisition.vue b/src/views/energy/temperature-acquisition.vue
new file mode 100644
index 0000000..01691a6
--- /dev/null
+++ b/src/views/energy/temperature-acquisition.vue
@@ -0,0 +1,274 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-19 10:55:33
+ * @LastEditors: zwq
+ * @LastEditTime: 2021-12-17 15:25:52
+ * @Description:
+-->
+<template>
+  <div class="chart-container">
+    <el-row>
+      <el-col :span="2">
+        <div class="kiln-electric-treebox">
+          <el-tree
+            :data="yaoluList"
+            @node-click="handleNode"
+            :highlight-current="true"
+          />
+        </div>
+      </el-col>
+      <el-col :span="22">
+        <el-card class="base-container" style="min-height: 540px">
+          <el-row style="z-index: 10;">
+            <el-radio-group
+              style="margin: 0 20px; position:relative; bottom: 2px"
+              size="small"
+              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
+              size="small"
+              v-model="date"
+              :type="datePickerType[eleType].type"
+              :format="datePickerType[eleType].format"
+              :placeholder="'选择' + datePickerType[eleType].placeholder"
+            />
+            <el-button size="small" @click="getDataList()">
+              <icon-svg class="iconClass" name="sousuo"></icon-svg>
+              查询
+            </el-button>
+          </el-row>
+          <el-col style="height: 600px">
+            <el-table
+              :data="dataList"
+              :stripe="true"
+              :header-cell-style="{
+                background: '#eef1f6',
+                color: '#606266',
+                height: '56px'
+              }"
+              v-loading="dataListLoading"
+              style="width: 100%;padding:20px"
+            >
+              <el-table-column
+                type="index"
+                header-align="center"
+                align="center"
+                label="序号"
+                width="50"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="createTime"
+                header-align="center"
+                align="center"
+                label="采集时间"
+              >
+              </el-table-column>
+              <el-table-column prop="vehicleName" label="实际温度">
+              </el-table-column>
+              <el-table-column prop="code" label="设定温度"> </el-table-column>
+              <el-table-column prop="vehicleAlias" label="实际碳势">
+              </el-table-column>
+              <el-table-column prop="anqi" label="设定碳势"> </el-table-column>
+              <el-table-column prop="anqi" label="油槽实际温度"> </el-table-column>
+              <el-table-column prop="anqi" label="油槽设定温度"> </el-table-column>
+            </el-table>
+            <el-pagination
+              @size-change="sizeChangeHandle"
+              @current-change="currentChangeHandle"
+              :current-page="pageIndex"
+              :page-sizes="[10, 20, 50, 100]"
+              :page-size="pageSize"
+              :total="totalPage"
+              layout="total, sizes, prev, pager, next, jumper"
+            >
+            </el-pagination>
+          </el-col>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// 日期类型
+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'
+  },
+  {
+    id: 2,
+    label: '窑炉2'
+  },
+  {
+    id: 3,
+    label: '窑炉3'
+  },
+  {
+    id: 4,
+    label: '窑炉4'
+  },
+  {
+    id: 5,
+    label: '窑炉5'
+  },
+  {
+    id: 6,
+    label: '窑炉6'
+  },
+  {
+    id: 7,
+    label: '窑炉7'
+  },
+  {
+    id: 8,
+    label: '窑炉8'
+  },
+  {
+    id: 9,
+    label: '窑炉9'
+  },
+  {
+    id: 10,
+    label: '窑炉10'
+  },
+  {
+    id: 11,
+    label: '窑炉11'
+  }
+]
+
+export default {
+  name: 'gas-acquisition',
+  data () {
+    return {
+      datePickerType,
+      yaoluList,
+      date: new Date(),
+      eleType: '年',
+      showId: 0,
+      yaoluIndex: 0,
+      yaoluName: '',
+      dataList: [],
+      pageIndex: 1,
+      pageSize: 10,
+      totalPage: 0,
+      dataListLoading: false
+    }
+  },
+  mounted () {
+    this.showId = this.yaoluList[0].id
+    this.yaoluName = this.yaoluList[0].label
+  },
+  activated () {
+    this.getDataList()
+  },
+  methods: {
+      // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/vehicle/page'),
+        method: 'post',
+        data: this.$http.adornData({
+          'current': this.pageIndex,
+          'size': this.pageSize
+        })
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data.records
+          this.totalPage = data.data.total
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
+    },
+    changeEleType (v) {
+      switch (v) {
+        case '日':
+          this.date = new Date()
+          break
+        case '周':
+          this.date = new Date()
+          break
+        case '月':
+          this.date = new Date()
+          break
+        case '年':
+          this.date = new Date()
+          break
+      }
+    },
+      // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
+      this.getDataList()
+    },
+      // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    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 - 138px);
+}
+</style>
+
+<style lang="scss">
+.chart-container {
+  .el-tabs__item {
+    height: 120px;
+  }
+  .el-tabs__nav-next,
+  .el-tabs__nav-prev {
+    line-height: 120px;
+  }
+}
+</style>
diff --git a/src/views/main-sidebar.vue b/src/views/main-sidebar.vue
index 6cfec12..05a8bb0 100644
--- a/src/views/main-sidebar.vue
+++ b/src/views/main-sidebar.vue
@@ -161,6 +161,26 @@
               ></icon-svg>
               <span slot="title">二氧化硫流量分析</span>
             </el-menu-item>
+            <el-menu-item
+              index="methanol"
+              @click="$router.push({ name: 'energy-methanol' })"
+            >
+              <icon-svg
+                name="tubiao"
+                class="site-sidebar__menu-icon"
+              ></icon-svg>
+              <span slot="title">甲醇流量分析</span>
+            </el-menu-item>
+            <el-menu-item
+              index="propane"
+              @click="$router.push({ name: 'energy-propane' })"
+            >
+              <icon-svg
+                name="tubiao"
+                class="site-sidebar__menu-icon"
+              ></icon-svg>
+              <span slot="title">丙烷流量分析</span>
+            </el-menu-item>
             <el-menu-item
               index="ammonia"
               @click="$router.push({ name: 'energy-ammonia' })"
@@ -189,6 +209,20 @@
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">电能采集数据</span>
           </el-menu-item>
+          <el-menu-item
+            index="gas-acquisition"
+            @click="$router.push({ name: 'energy-gas-acquisition' })"
+          >
+            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">用气采集数据</span>
+          </el-menu-item>
+          <el-menu-item
+            index="temperature-acquisition"
+            @click="$router.push({ name: 'energy-temperature-acquisition' })"
+          >
+            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">温度采集数据</span>
+          </el-menu-item>
           <el-submenu index="temperature">
             <template slot="title">
               <icon-svg