update

Reviewed-on: #10

config/index.js

@@ -2,7 +2,7 @@
  * @Author: gtz
  * @Date: 2021-11-19 10:10:51
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-15 17:19:13
+ * @LastEditTime: 2021-12-17 14:40:57
  * @Description: file content
  * @FilePath: \mt-qj-wms-ui\config\index.js
  */
@@ -22,7 +22,7 @@ module.exports = {
     // 代理列表, 是否开启代理通过[./dev.env.js]配置
     proxyTable: devEnv.OPEN_PROXY === false ? {} : {
       '/proxyApi': {
-        target: 'http://192.168.0.183:8080',
+        target: 'http://192.168.0.189:8080',
         changeOrigin: true,
         pathRewrite: {
           '^/proxyApi': '/api'

src/router/index.js

@@ -1,8 +1,8 @@
 /*
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
- * @LastEditors: gtz
+ * @LastEditors: zwq
- * @LastEditTime: 2021-12-16 10:25:29
+ * @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 } },

src/views/common/ex-warehouse-info.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2021-11-17 15:49:18
- * @LastEditors: zwq
+ * @LastEditors: gtz
- * @LastEditTime: 2021-11-17 15:58:31
+ * @LastEditTime: 2021-12-17 17:02:25
  * @Description:
 -->
 <template>
@@ -11,7 +11,9 @@
     :visible.sync="visible">
     <el-table
       :data="dataList"
-      border
+      v-loading="formLoading"
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
       style="width: 100%;">
       <el-table-column
         type="index"
@@ -21,19 +23,19 @@
         width="50">
       </el-table-column>
       <el-table-column
-        prop="id"
+        prop="idenCardNum"
         header-align="center"
         align="center"
         label="标识卡">
       </el-table-column>
       <el-table-column
-        prop="id1"
+        prop="customer"
         header-align="center"
         align="center"
         label="客户信息">
       </el-table-column>
       <el-table-column
-        prop="number"
+        prop="quantity"
         header-align="center"
         align="center"
         label="数量">
@@ -56,24 +58,27 @@
     data () {
       return {
         visible: false,
-        dataList: []
+        dataList: [],
+        formLoading: false
       }
     },
     methods: {
       init (id) {
         this.visible = true
+        this.formLoading = true
         this.$nextTick(() => {
           if (id) {
             this.$http({
-              url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
+              url: this.$http.adornUrl(`/outStock/get`),
-              method: 'get',
+              method: 'post',
-              params: this.$http.adornParams()
+              data: this.$http.adornData({ id })
             }).then(({data}) => {
               if (data && data.code === 0) {
-                this.dataForm.paramKey = data.config.paramKey
+                this.dataForm = data.data
-                this.dataForm.paramValue = data.config.paramValue
+              } else {
-                this.dataForm.remark = data.config.remark
+                this.$message.error(data.msg)
               }
+              this.formLoading = false
             })
           }
         })

src/views/common/ex-warehouse.vue

@@ -1,41 +1,25 @@
 <!--
  * @Author: zwq
  * @Date: 2021-11-15 15:17:30
- * @LastEditors: zwq
+ * @LastEditors: gtz
- * @LastEditTime: 2021-11-17 16:07:04
+ * @LastEditTime: 2021-12-17 17:05:22
  * @Description:
 -->
 <template>
-  <div>
+  <div v-loading="dataListLoading">
     <div class="mainDiv" style="margin:10px 0 100px">
-      <div class="flexDiv">
+      <div
-        <div
           class="wareBox"
           :class="[
-            count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
+            item.empty === 1 ? 'enableBox' : 'disableBox',
-            { active: count === isActive }
+            { active: item.locationId === isActive }
           ]"
-          @click="selectBox(count)"
+          @click="selectBox(item.locationId)"
-          v-for="count in 10"
+          v-for="item in warehouseList"
-          v-bind:key="count"
+          :key="item.locationId"
         >
-          <div class="plat">库位{{ count }}</div>
+          <div class="plat">{{ item.locationName }}</div>
         </div>
-      </div>
-      <div class="flexDiv">
-        <div
-          class="wareBox"
-          :class="[
-            count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
-            { active: count + 10 === isActive }
-          ]"
-          @click="selectBox(count + 10)"
-          v-for="count in 10"
-          v-bind:key="count"
-        >
-          <div class="plat">库位{{ count + 10 }}</div>
-        </div>
-      </div>
     </div>
     <div class="line"></div>
     <div class="mainDiv" style="margin:100px 0 10px">
@@ -59,31 +43,66 @@ export default {
   data () {
     return {
       isActive: '',
-      ExWarehouseInfoVisible: false
+      ExWarehouseInfoVisible: false,
+      dataListLoading: false,
+      warehouseList: []
     }
   },
   components: {
     ExWarehouseInfo
   },
-  created () {},
+  created () {
+    this.getWarehouseList()
+  },
   methods: {
-    selectBox (count) {
+    getWarehouseList () {
-      this.isActive = count
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/outStock/list'),
+        method: 'post'
+      }).then(({data}) => {
+        if (data && data.code === 0) {
+          this.warehouseList = data.data
+        } else {
+          this.warehouseList = []
+        }
+        this.dataListLoading = false
+      })
+    },
+    selectBox (id) {
+      this.isActive = id
       this.ExWarehouseInfoVisible = true
       this.$nextTick(() => {
-        this.$refs.ExWarehouseInfoRef.init()
+        this.$refs.ExWarehouseInfoRef.init(id)
       })
     },
     selectPlat (count) {
       if (this.isActive) {
-        this.$confirm(`确认从库位${this.isActive}出库至提升台${count}?`, '提示', {
+        this.$confirm(`确认从库位id为[${this.isActive}]出库至提升台${count}?`, '提示', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'info '
         }).then(() => {
-          this.$message({
+          this.$http({
-            type: 'success',
+            url: this.$http.adornUrl('/outStock/runOutTask'),
-            message: '出库成功!'
+            method: 'post',
+            data: this.$http.adornData({
+              code: count,
+              localtionId: this.isActive
+            })
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                type: 'success',
+                message: '出库成功!',
+                onClose: () => {
+                  this.getWarehouseList()
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+            this.dataListLoading = false
           })
         }).catch(() => {
           this.$message({
@@ -132,6 +151,7 @@ export default {
 .wareBox {
   cursor: pointer;
   margin: 10px;
+  width: 100px;
   height: 100px;
   padding: 10px;
   line-height: 90px;

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 16:10:47
+ * @Description:
+-->
 <template>
-  <div class="mod-config">
+  <div class="chart-container">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-row>
-      <el-form-item>
+      <el-col :span="2">
-        <el-radio-group size="small" v-model="dataForm.type" @change="changeType">
+        <div class="kiln-electric-treebox">
-          <el-radio-button label="日" />
+          <el-tree
-          <el-radio-button label="周" />
+            :data="yaoluList"
-          <el-radio-button label="月" />
+            @node-click="handleNode"
-          <el-radio-button label="年" />
+            :highlight-current="true"
-        </el-radio-group>
+          />
-      </el-form-item>
+        </div>
-      <el-form-item size="small" label="选择时间">
+      </el-col>
-        <el-date-picker
+      <el-col :span="22">
-          v-model="dataForm.date"
+        <el-card class="base-container" style="min-height: 540px">
-          :type="datePickerType[dataForm.type].type"
+          <el-row style="z-index: 10;float:right;margin-right:20px">
-          :format="datePickerType[dataForm.type].format"
+            <el-radio-group
-          :placeholder="'选择' + datePickerType[dataForm.type].placeholder"
+              style="margin: 0 20px; position:relative; bottom: 2px"
-        />
+              size="small"
-      </el-form-item>
+              v-model="eleType"
-      <el-form-item>
+              @change="changeEleType"
-        <el-button @click="getDataList()">查询</el-button>
+            >
-      </el-form-item>
+              <el-radio-button label="日"></el-radio-button>
-    </el-form>
+              <el-radio-button label="周"></el-radio-button>
-    <el-table
+              <el-radio-button label="月"></el-radio-button>
-      :data="dataList"
+              <el-radio-button label="年"></el-radio-button>
-      border
+            </el-radio-group>
-      v-loading="dataListLoading"
+            <el-date-picker
-      style="width: 100%;">
+              size="small"
-      <el-table-column
+              v-model="date"
-        prop="time"
+              :type="datePickerType[eleType].type"
-        header-align="center"
+              :format="datePickerType[eleType].format"
-        align="center"
+              :placeholder="'选择' + datePickerType[eleType].placeholder"
-        label="时间"
+            />
-      />
+            <el-button size="small" @click="getDataList()">
-      <el-table-column
+              <icon-svg class="iconClass" name="sousuo"></icon-svg>
-        v-for="item in yaoluList"
+              查询
-        :prop="item.id"
+            </el-button>
-        header-align="center"
+          </el-row>
-        align="center"
+          <el-col style="height: 600px">
-        :label="item.name"
+            <el-table
-        :key="item.id"
+              :data="dataList"
-      />
+              :stripe="true"
-    </el-table>
+              :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: {
+      datePickerType,
-        type: '日',
+      yaoluList,
-        date: new Date()
+      date: new Date(),
-      },
+      eleType: '年',
+      showId: 0,
+      yaoluIndex: 0,
+      yaoluName: '',
       dataList: [],
       pageIndex: 1,
       pageSize: 10,
       totalPage: 0,
-      dataListLoading: false,
+      dataListLoading: false
-      orderDetailVisible: false,
-      yaoluList,
-      datePickerType
     }
   },
-  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) => {
+      this.$http({
-        if (index === 0) {
+        url: this.$http.adornUrl('/vehicle/page'),
-          item.data.map(i => {
+        method: 'post',
-            this.dataList.push({
+        data: this.$http.adornData({
-              time: i.time,
+          'current': this.pageIndex,
-              [item.id]: i.value
+          '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 = []
-            this.dataList[idx][item.id] = i.value
+          this.totalPage = 0
-          })
         }
+        this.dataListLoading = false
       })
-      this.dataListLoading = false
     },
-    // 切换查询类型
+    changeEleType (v) {
-    changeType (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>

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 16:01:13
+ * @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;float:right;margin-right:20px">
+            <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>

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>

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>

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 16:11: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"
+            :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;float:right;margin-right:20px">
+            <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>

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

src/views/report/car-alarm.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="mod-log">
+  <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
-        <el-select v-model="dataForm.key" filterable placeholder="车辆名称">
+        <el-select size="small" v-model="dataForm.equipmentId" clearable filterable placeholder="车辆名称">
           <el-option
-            v-for="item in options"
+            v-for="item in carList"
-            :key="item.value"
+            :key="item.id"
-            :label="item.label"
+            :label="item.vehicleName"
-            :value="item.value"
+            :value="item.id"
           >
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item>
+      <!-- <el-form-item>
         <el-date-picker
           v-model="dataForm.time"
           value-format="yyyy-MM-dd"
@@ -22,14 +22,15 @@
           end-placeholder="结束日期"
         >
         </el-date-picker>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button @click="getDataList()">查询</el-button>
       </el-form-item>
     </el-form>
     <el-table
       :data="dataList"
-      border
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
       v-loading="dataListLoading"
       style="width: 100%">
       <el-table-column
@@ -40,27 +41,19 @@
         width="50">
       </el-table-column>
       <el-table-column
-        prop="username"
+        prop="equipmentName"
-        header-align="center"
-        align="center"
         label="车辆名称">
       </el-table-column>
       <el-table-column
-        prop="operation"
+        prop="createTime"
-        header-align="center"
-        align="center"
         label="报警时间">
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         prop="time"
-        header-align="center"
-        align="center"
         label="报警级别">
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
-        prop="ip"
+        prop="alarmInfo"
-        header-align="center"
-        align="center"
         label="报警内容">
       </el-table-column>
     </el-table>
@@ -81,8 +74,7 @@
     data () {
       return {
         dataForm: {
-          key: '',
+          equipmentId: null
-          time: []
         },
         dataList: [],
         options: [],
@@ -90,28 +82,49 @@
         pageSize: 10,
         totalPage: 0,
         dataListLoading: false,
-        selectionDataList: []
+        selectionDataList: [],
+        carList: []
       }
     },
     created () {
-      this.getDataList()
+      this.getCarList()
     },
     methods: {
+      // 获取车辆列表
+      getCarList () {
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/vehicle/page'),
+          method: 'post',
+          data: this.$http.adornData({
+            current: 1,
+            size: 999
+          })
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.carList = data.data.records
+            this.getDataList()
+          } else {
+            this.carList = []
+          }
+        })
+      },
       // 获取数据列表
       getDataList () {
         this.dataListLoading = true
         this.$http({
-          url: this.$http.adornUrl('/sys/log/list'),
+          url: this.$http.adornUrl('/alarmInfo/page'),
-          method: 'get',
+          method: 'post',
-          params: this.$http.adornParams({
+          data: this.$http.adornData({
-            'page': this.pageIndex,
+            current: this.pageIndex,
-            'limit': this.pageSize,
+            size: this.pageSize,
-            'key': this.dataForm.key
+            type: 1,
+            equipmentId: this.dataForm.equipmentId
           })
         }).then(({data}) => {
           if (data && data.code === 0) {
-            this.dataList = data.page.list
+            this.dataList = data.data.records
-            this.totalPage = data.page.totalCount
+            this.totalPage = data.data.total
           } else {
             this.dataList = []
             this.totalPage = 0

src/views/report/kiln-alarm.vue

@@ -1,23 +1,20 @@
 <template>
-  <div class="mod-log">
+  <div class="mod-config">
-    <el-form
+    <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-      :inline="true"
-      :model="dataForm"
-      @keyup.enter.native="getDataList()"
-    >
       <el-form-item>
-        <el-select v-model="dataForm.key" filterable placeholder="窑炉名称">
+        <el-select size="small" v-model="dataForm.equipmentId" clearable filterable placeholder="窑炉名称">
           <el-option
-            v-for="item in options"
+            v-for="item in kilnList"
-            :key="item.value"
+            :key="item.id"
-            :label="item.label"
+            :label="item.kilnName"
-            :value="item.value"
+            :value="item.id"
           >
           </el-option>
         </el-select>
       </el-form-item>
-      <el-form-item>
+      <!-- <el-form-item>
         <el-date-picker
+          size="small"
           v-model="dataForm.time"
           value-format="yyyy-MM-dd"
           type="daterange"
@@ -26,14 +23,15 @@
           end-placeholder="结束日期"
         >
         </el-date-picker>
-      </el-form-item>
+      </el-form-item> -->
       <el-form-item>
         <el-button @click="getDataList()">查询</el-button>
       </el-form-item>
     </el-form>
     <el-table
       :data="dataList"
-      border
+      :stripe="true"
+      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
       v-loading="dataListLoading"
       style="width: 100%"
     >
@@ -46,30 +44,22 @@
       >
       </el-table-column>
       <el-table-column
-        prop="username"
+        prop="equipmentName"
-        header-align="center"
-        align="center"
         label="窑炉名称"
       >
       </el-table-column>
       <el-table-column
-        prop="operation"
+        prop="createTime"
-        header-align="center"
-        align="center"
         label="报警时间"
       >
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         prop="time"
-        header-align="center"
-        align="center"
         label="报警级别"
-      >
+      > -->
       </el-table-column>
       <el-table-column
-        prop="ip"
+        prop="alarmInfo"
-        header-align="center"
-        align="center"
         label="报警内容"
       >
       </el-table-column>
@@ -92,8 +82,7 @@ export default {
   data () {
     return {
       dataForm: {
-        key: '',
+        equipmentId: null
-        time: []
       },
       dataList: [],
       options: [],
@@ -101,28 +90,49 @@ export default {
       pageSize: 10,
       totalPage: 0,
       dataListLoading: false,
-      selectionDataList: []
+      selectionDataList: [],
+      kilnList: []
     }
   },
   created () {
-    this.getDataList()
+    this.getKilnList()
   },
   methods: {
+    // 获取窑炉列表
+    getKilnList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/kilnInfo/page'),
+        method: 'post',
+        data: this.$http.adornData({
+          current: 1,
+          size: 999
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.kilnList = data.data.records
+          this.getDataList()
+        } else {
+          this.kilnList = []
+        }
+      })
+    },
     // 获取数据列表
     getDataList () {
       this.dataListLoading = true
       this.$http({
-        url: this.$http.adornUrl('/sys/log/list'),
+        url: this.$http.adornUrl('/alarmInfo/page'),
-        method: 'get',
+        method: 'post',
-        params: this.$http.adornParams({
+        data: this.$http.adornData({
-          page: this.pageIndex,
+          current: this.pageIndex,
-          limit: this.pageSize,
+          size: this.pageSize,
-          key: this.dataForm.key
+          type: 0,
+          equipmentId: this.dataForm.equipmentId
         })
       }).then(({ data }) => {
         if (data && data.code === 0) {
-          this.dataList = data.page.list
+          this.dataList = data.data.records
-          this.totalPage = data.page.totalCount
+          this.totalPage = data.data.total
         } else {
           this.dataList = []
           this.totalPage = 0