update

Reviewed-on: #12

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: 2022-03-05 16:16:24
  * @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.1.7:8080',
         changeOrigin: true,
         pathRewrite: {
           '^/proxyApi': '/api'
@@ -31,7 +31,7 @@ module.exports = {
     },
 
     // Various Dev Server settings
-    host: 'localhost', // can be overwritten by process.env.HOST
+    host: '0.0.0.0', // can be overwritten by process.env.HOST
     port: 8001, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: true,
     errorOverlay: true,

package-lock.json

@@ -5572,8 +5572,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5988,8 +5987,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6045,7 +6043,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6089,14 +6086,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -10381,6 +10376,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.1.tgz",
+      "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "gulp-replace": "0.6.1",
     "gulp-shell": "0.6.5",
     "lodash": "4.17.5",
+    "moment": "^2.29.1",
     "node-sass": "^4.14.1",
     "npm": "^6.9.0",
     "sass-loader": "6.0.6",

src/assets/scss/_base.scss

@@ -23,6 +23,13 @@ img {
   vertical-align: middle;
 }
 
+/* El-Message
+------------------------------ */
+.el-message {
+  .el-message__content {
+    font-size: 24px;
+  }
+}
 
 /* Utils
 ------------------------------ */
@@ -122,9 +129,13 @@ img {
   right: 0;
   left: 0;
   z-index: 1030;
-  height: 50px;
+  height: 64px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
   background-color: $navbar--background-color;
+  
+  &-icon {
+    font-size: 18px;
+  }
 
   &--inverse {
     .site-navbar__body {
@@ -158,17 +169,17 @@ img {
   &__header {
     position: relative;
     float: left;
-    width: 230px;
-    height: 50px;
+    width: 336px;
+    height: 64px;
     overflow: hidden;
   }
   &__brand {
     display: table-cell;
     vertical-align: middle;
-    width: 230px;
-    height: 50px;
+    width: 336px;
+    height: 64px;
     margin: 0;
-    line-height: 50px;
+    line-height: 64px;
     font-size: 20px;
     text-align: center;
     text-transform: uppercase;
@@ -188,6 +199,13 @@ img {
     &-mini {
       display: none;
     }
+    &-lg {
+      text-align: left;
+      text-indent: 15px;
+      font-weight: normal;
+      font-size: 16px;
+      cursor: pointer;
+    }
   }
   &__switch {
     font-size: 18px;
@@ -210,7 +228,7 @@ img {
   }
   &__body {
     position: relative;
-    margin-left: 230px;
+    margin-left: 336px;
     padding-right: 15px;
     background-color: #fff;
   }
@@ -228,8 +246,8 @@ img {
     }
     .el-menu-item,
     .el-submenu > .el-submenu__title {
-      height: 50px;
-      line-height: 50px;
+      height: 64px;
+      line-height: 64px;
     }
     .el-submenu > .el-menu {
       top: 55px;
@@ -249,13 +267,18 @@ img {
 ------------------------------ */
 .site-sidebar {
   position: fixed;
-  top: 50px;
+  top: 64px;
   left: 0;
   bottom: 0;
   z-index: 1020;
-  width: 230px;
+  width: 336px;
   overflow: hidden;
 
+  .el-menu-item, .el-submenu__title {
+    height: 48px;
+    line-height: 48px;
+  }
+
   &--dark,
   &--dark-popper {
     background-color: $sidebar--background-color-dark;
@@ -264,33 +287,33 @@ img {
       background-color: $sidebar--background-color-dark;
       .el-menu-item,
       .el-submenu > .el-submenu__title {
-        color: $sidebar--color-text-dark;
+        color: #fff;
         &:focus,
         &:hover {
-          color: mix(#fff, $sidebar--color-text-dark, 50%);
-          background-color: mix(#fff, $sidebar--background-color-dark, 2.5%);
+          color: #fff;
+          background-color: #2863af;
         }
       }
       .el-menu,
       .el-submenu.is-opened {
-        background-color: mix(#000, $sidebar--background-color-dark, 15%);
+        background-color: #0b253f;
       }
       .el-menu-item.is-active,
       .el-submenu.is-active > .el-submenu__title {
-        color: mix(#fff, $sidebar--color-text-dark, 80%);
+        color: #fff;
       }
     }
   }
   &__inner {
     position: relative;
     z-index: 1;
-    width: 250px;
+    width: 356px;
     height: 100%;
     padding-bottom: 15px;
     overflow-y: scroll;
   }
   &__menu.el-menu {
-    width: 230px;
+    width: 336px;
     border-right: 0;
   }
   &__menu-icon {
@@ -310,8 +333,8 @@ img {
 
   &__wrapper {
     position: relative;
-    padding-top: 50px;
-    margin-left: 230px;
+    padding-top: 64px;
+    margin-left: 336px;
     min-height: 100%;
     background: $content--background-color;
   }
@@ -321,8 +344,8 @@ img {
   > .el-tabs {
     > .el-tabs__header {
       position: fixed;
-      top: 50px;
-      left: 230px;
+      top: 64px;
+      left: 336px;
       right: 0;
       z-index: 930;
       padding: 0 55px 0 15px;
@@ -338,7 +361,7 @@ img {
     > .el-tabs__content {
       > .site-tabs__tools {
         position: fixed;
-        top: 50px;
+        top: 64px;
         right: 0;
         z-index: 931;
         height: 40px;
@@ -365,5 +388,91 @@ img {
   background-color: #fff;
   border-radius: 15px;
   padding: 20px;
-  min-height: calc(100vh - 145px);
+  min-height: calc(100vh - 159px);
+}
+
+.base-container{
+  border-radius: 25px;
+  h3 {
+    margin: 0;
+    font-size: 16px;
+  }
+  .base-container-titleline{
+    position: absolute;
+    width: 4px;
+    height: 16px;
+    background: #3E6AF7;
+    border-radius: 2px;
+    left: -8px;
+    top: 1px
+  }
+  .el-tabs--border-card{
+    border: 0;
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+  }
+  .el-tabs__header {
+    border-bottom: 0;
+    background: #fff;
+  }
+  .el-tabs__item{
+    border: 0 !important;
+  }
+  .el-tabs__nav-prev, .el-tabs__nav-next{
+    width: 56px;
+    font-size: 40px;
+  }
+  .el-tabs__nav-next{
+    text-align: right;
+  }
+  .el-tabs__nav-wrap.is-scrollable{
+    padding: 0 56px;
+  }
+  .el-tabs__nav-scroll{
+    padding: 10px;
+  }
+  .el-tabs__nav{
+    .el-tabs__item, .is-active {
+      color: #000000 !important;
+    }
+    .is-active{
+      box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.12);
+      border-radius: 8px;
+    }
+  }
+}
+
+.el-radio-group{
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+}
+
+.el-radio-button__orig-radio:checked+.el-radio-button__inner{
+  border-radius: 4px;
+}
+
+.el-radio-button__inner{
+  border: 0 !important;
+}
+
+.chart-container{
+  .kiln-electric-treebox{
+    width: 100%;
+    border: 1px solid #eeeeee;
+    border-radius: 0 15px 15px 0;
+    overflow: hidden;
+    position: relative;
+    right: 20px;
+    padding: 10px 0;
+    background: #fff;
+    .el-tree-node{
+      height: 56px;
+      .el-tree-node__content{
+        height: 56px;
+        line-height: 56px;
+      }
+      .el-tree-node__content:hover {
+        background: #CEE3FF;
+      }
+    }
+  }
 }

src/assets/scss/_variables.scss

@@ -1,12 +1,13 @@
 // 站点主色
 // tips: 要达到整站主题修改效果, 请确保[$--color-primary]站点主色与[/src/element-ui-theme/index.js]文件中[import './element-[#17B3A3]/index.css']当前主题色一致
 $--color-primary: #3E8EF7;
+$--color-bar: #001529;
 
 // Navbar
-$navbar--background-color: $--color-primary;
+$navbar--background-color: $--color-bar;
 
 // Sidebar
-$sidebar--background-color-dark: #263238;
+$sidebar--background-color-dark: $--color-bar;
 $sidebar--color-text-dark: #8a979e;
 
 // Content

src/components/Charts/LineChart.new.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="mod-demo-echarts">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <div :id="'J_chartLineBox' + id" class="chart-box"></div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  import * as echarts from 'echarts'
+  export default {
+    props: {
+      id: {
+        type: Number,
+        default: 1
+      },
+      showId: {
+        type: Number,
+        default: 0
+      },
+      name: {
+        type: String,
+        default: ''
+      },
+      dataList: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      },
+      lastDataList: {
+        type: Array,
+        default: () => {
+          return []
+        }
+      }
+    },
+    data () {
+      return {
+        chartLine: null
+      }
+    },
+    watch: {
+      showId: function (v) {
+        if (v === this.id) {
+          this.initChartLine()
+        }
+      }
+    },
+    mounted () {
+      this.initChartLine()
+    },
+    activated () {
+      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
+      if (this.chartLine) {
+        this.chartLine.resize()
+      }
+    },
+    methods: {
+      // 折线图
+      initChartLine () {
+        if (this.chartLine) {
+          this.chartLine.dispose()
+        }
+        var option = {
+          title: {
+            text: this.name
+          },
+          tooltip: {
+            trigger: 'axis'
+          },
+          legend: {
+            data: [ '当前', '上一个单位' ]
+          },
+          grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+          },
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: this.dataList.map(item => {
+              return item.time
+            })
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              name: '当前',
+              type: 'line',
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            },
+            {
+              name: '上一个单位',
+              type: 'line',
+              data: this.lastDataList.map(item => {
+                return item.value
+              })
+            }
+          ]
+        }
+        this.chartLine = echarts.init(document.getElementById('J_chartLineBox' + this.id))
+        this.chartLine.setOption(option)
+        window.addEventListener('resize', () => {
+          this.chartLine.resize()
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .mod-demo-echarts {
+    > .el-alert {
+      margin-bottom: 10px;
+    }
+    > .el-row {
+      margin-top: -10px;
+      margin-bottom: -10px;
+      .el-col {
+        padding-top: 10px;
+        padding-bottom: 10px;
+      }
+    }
+    .chart-box {
+      min-height: 300px;
+    }
+  }
+</style>

src/components/Charts/MixChart.new.vue

@@ -0,0 +1,355 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+import moment from 'moment'
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    id: {
+      type: String,
+      default: 'MixChart'
+    },
+    showId: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    },
+    title: {
+      type: String,
+      default: 'Mix-Chart'
+    },
+    titleFooter: {
+      type: String,
+      default: ''
+    },
+    titleHeader: {
+      type: String,
+      default: ''
+    },
+    dataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    lastDataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    chartType: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      chart: null,
+      series: []
+    }
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  watch: {
+    dataList: {
+      handler (val) {
+        if (val) {
+          this.series = []
+          if (this.chartType.indexOf('柱状') >= 0) {
+            this.series.push({
+              name: this.title + 'bar',
+              type: 'bar',
+              barMaxWidth: 35,
+              barGap: '10%',
+              color: '#5AD8A6',
+              colorBy: 'data',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          if (this.chartType.indexOf('折线') >= 0) {
+            this.series.push({
+              name: this.title + 'line',
+              type: 'line',
+              symbolSize: 10,
+              symbol: 'circle',
+              colorBy: 'data',
+              color: '#5B8FF9',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          this.initChart()
+        }
+      },
+      deep: true
+    },
+    showId: {
+      handler () {
+        this.initChart()
+      }
+    },
+    chartType: {
+      handler (val) {
+        console.log(val)
+        if (val.length) {
+          this.series = []
+          if (val.indexOf('柱状') >= 0) {
+            this.series.push({
+              name: this.title + 'bar',
+              type: 'bar',
+              barMaxWidth: 35,
+              barGap: '10%',
+              color: '#5AD8A6',
+              colorBy: 'data',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          if (val.indexOf('折线') >= 0) {
+            this.series.push({
+              name: this.title + 'line',
+              type: 'line',
+              symbolSize: 10,
+              symbol: 'circle',
+              color: '#5B8FF9',
+              colorBy: 'data',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
+                }
+              },
+              data: this.dataList.map(item => {
+                return item.value
+              })
+            })
+          }
+          this.initChart()
+        }
+      },
+      deep: true
+    }
+  },
+  mounted () {
+    this.series = []
+    if (this.chartType.indexOf('柱状') >= 0) {
+      this.series.push({
+        name: this.title + 'bar',
+        type: 'bar',
+        barMaxWidth: 35,
+        barGap: '10%',
+        color: '#5AD8A6',
+        colorBy: 'data',
+        label: {
+          show: true,
+          position: 'top',
+          formatter (p) {
+            return p.value > 0 ? p.value : ''
+          }
+        },
+        data: this.dataList.map(item => {
+          return item.value
+        })
+      })
+    }
+    if (this.chartType.indexOf('折线') >= 0) {
+      this.series.push({
+        name: this.title + 'line',
+        type: 'line',
+        symbolSize: 10,
+        symbol: 'circle',
+        color: '#5B8FF9',
+        colorBy: 'data',
+        label: {
+          show: true,
+          position: 'top',
+          formatter (p) {
+            return p.value > 0 ? p.value : ''
+          }
+        },
+        data: this.dataList.map(item => {
+          return item.value
+        })
+      })
+    }
+    this.initChart()
+  },
+  methods: {
+    initChart () {
+      if (this.chart) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(document.getElementById(this.id))
+      const xData = this.dataList.map(item => {
+        return moment(item.time).format('M-D HH:mm')
+      })
+      this.chart.setOption({
+        title: {
+          text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
+          x: '10',
+          top: '10',
+          fontSize: '18',
+          subtextStyle: {
+            color: '#90979c',
+            fontSize: '16'
+          }
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          borderWidth: 0,
+          top: 100,
+          bottom: 100,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: 20,
+          top: 55,
+          textStyle: {
+            color: '#90979c'
+          },
+          data: this.series.map(item => {
+            console.log(item)
+            return this.title + item.type
+          })
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#90979c'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0,
+              rotate: 45
+            },
+            data: xData
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            // splitLine: {
+            //   show: false
+            // },
+            axisLine: {
+              lineStyle: {
+                color: '#90979c'
+              }
+            },
+            axisTick: {
+              show: false
+            },
+            axisLabel: {
+              interval: 0
+            },
+            splitArea: {
+              show: false
+            }
+          }
+        ],
+        dataZoom: [
+          {
+            show: true,
+            height: 30,
+            xAxisIndex: [0],
+            bottom: 10,
+            start: 0,
+            end: 100,
+            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
+            handleSize: '110%',
+            handleStyle: {
+              color: '#d3dee5'
+            },
+            textStyle: {
+              color: '#fff'
+            },
+            borderColor: '#90979c'
+          },
+          {
+            type: 'inside',
+            show: true,
+            height: 15,
+            start: 1,
+            end: 35
+          }
+        ],
+        series: this.series
+      })
+    }
+  }
+}
+</script>

src/components/Charts/MixChart.vue

@@ -84,19 +84,12 @@ export default {
               type: 'bar',
               barMaxWidth: 35,
               barGap: '10%',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(255,144,128,1)',
-                  label: {
-                    show: true,
-                    textStyle: {
-                      color: '#fff'
-                    },
-                    position: 'insideTop',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5AD8A6',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.dataList.map(item => {
@@ -108,19 +101,12 @@ export default {
               type: 'bar',
               barMaxWidth: 35,
               barGap: '10%',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(0,191,183,1)',
-                  label: {
-                    show: true,
-                    textStyle: {
-                      color: '#fff'
-                    },
-                    position: 'insideTop',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5B8FF9',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.lastDataList.map(item => {
@@ -134,17 +120,12 @@ export default {
               type: 'line',
               symbolSize: 10,
               symbol: 'circle',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(255,144,128,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5B8FF9',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.dataList.map(item => {
@@ -156,17 +137,12 @@ export default {
               type: 'line',
               symbolSize: 10,
               symbol: 'circle',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(0,191,183,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5AD8A6',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.lastDataList.map(item => {
@@ -195,19 +171,12 @@ export default {
               type: 'bar',
               barMaxWidth: 35,
               barGap: '10%',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(255,144,128,1)',
-                  label: {
-                    show: true,
-                    textStyle: {
-                      color: '#fff'
-                    },
-                    position: 'insideTop',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5B8FF9',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.dataList.map(item => {
@@ -219,19 +188,12 @@ export default {
               type: 'bar',
               barMaxWidth: 35,
               barGap: '10%',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(0,191,183,1)',
-                  label: {
-                    show: true,
-                    textStyle: {
-                      color: '#fff'
-                    },
-                    position: 'insideTop',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5AD8A6',
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.lastDataList.map(item => {
@@ -245,17 +207,13 @@ export default {
               type: 'line',
               symbolSize: 10,
               symbol: 'circle',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(255,144,128,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5B8FF9',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.dataList.map(item => {
@@ -267,17 +225,13 @@ export default {
               type: 'line',
               symbolSize: 10,
               symbol: 'circle',
-              itemStyle: {
-                normal: {
-                  color: 'rgba(0,191,183,1)',
-                  barBorderRadius: 0,
-                  label: {
-                    show: true,
-                    position: 'top',
-                    formatter (p) {
-                      return p.value > 0 ? p.value : ''
-                    }
-                  }
+              color: '#5AD8A6',
+              barBorderRadius: 0,
+              label: {
+                show: true,
+                position: 'top',
+                formatter (p) {
+                  return p.value > 0 ? p.value : ''
                 }
               },
               data: this.lastDataList.map(item => {
@@ -301,15 +255,11 @@ export default {
         return item.time
       })
       this.chart.setOption({
-        backgroundColor: '#344b58',
         title: {
           text: this.title === 'Mix-Chart' ? 'Mix-Chart' : this.titleHeader + this.title + this.titleFooter,
-          x: '20',
-          top: '20',
-          textStyle: {
-            color: '#fff',
-            fontSize: '22'
-          },
+          x: '10',
+          top: '10',
+          fontSize: '18',
           subtextStyle: {
             color: '#90979c',
             fontSize: '16'
@@ -327,15 +277,15 @@ export default {
           left: '5%',
           right: '5%',
           borderWidth: 0,
-          top: 150,
-          bottom: 95,
+          top: 100,
+          bottom: 70,
           textStyle: {
             color: '#fff'
           }
         },
         legend: {
-          x: '5%',
-          top: '10%',
+          x: 20,
+          top: 55,
           textStyle: {
             color: '#90979c'
           },
@@ -370,9 +320,9 @@ export default {
         yAxis: [
           {
             type: 'value',
-            splitLine: {
-              show: false
-            },
+            // splitLine: {
+            //   show: false
+            // },
             axisLine: {
               lineStyle: {
                 color: '#90979c'
@@ -394,7 +344,7 @@ export default {
             show: true,
             height: 30,
             xAxisIndex: [0],
-            bottom: 30,
+            bottom: 10,
             start: 0,
             end: 100,
             handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',

src/components/Charts/RingChart.vue

@@ -2,9 +2,9 @@
  * @Author: gtz
  * @Date: 2021-11-22 19:03:01
  * @LastEditors: gtz
- * @LastEditTime: 2021-11-30 10:36:52
+ * @LastEditTime: 2021-12-16 19:25:02
  * @Description: file content
- * @FilePath: \mt-qj-wms-ui\src\components\Charts\ringChart.vue
+ * @FilePath: \mt-qj-wms-ui\src\components\Charts\RingChart.vue
 -->
 <template>
   <div class="mod-demo-echarts">
@@ -54,7 +54,7 @@
           series: [
             {
               type: 'pie',
-              radius: ['40%', '70%'],
+              radius: ['55%', '90%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
@@ -77,7 +77,7 @@
                   name: this.name,
                   itemStyle: {
                     normal: {
-                      color: 'rgba(0, 191, 183, 1)'
+                      color: '#5A55D8'
                     }
                   }
                 },

src/icons/svg/icon-stop.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1646463566954" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2063" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 967.111111c-250.311111 0-455.111111-204.8-455.111111-455.111111s204.8-455.111111 455.111111-455.111111 455.111111 204.8 455.111111 455.111111-204.8 455.111111-455.111111 455.111111z m0-56.888889c221.866667 0 398.222222-176.355556 398.222222-398.222222s-176.355556-398.222222-398.222222-398.222222-398.222222 176.355556-398.222222 398.222222 176.355556 398.222222 398.222222 398.222222z" fill="#ff0000" p-id="2064"></path><path d="M341.333333 341.333333h341.333334v341.333334H341.333333z" fill="#ff0000" p-id="2065"></path></svg>

src/icons/svg/icon-丙烷.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>丙烷</title>
+    <desc>Created with Sketch.</desc>
+    <g id="丙烷" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-7" fill-rule="nonzero">
+            <rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
+            <g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#1EECE3" opacity="0.103932">
+                <path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
+            </g>
+        </g>
+        <g id="量杯,测验,化学" transform="translate(6.000000, 6.857687)" fill-rule="nonzero">
+            <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="11.1619524" height="11.1619524"></rect>
+            <path d="M11.118351,0 L0.378241942,0 C0.273598638,0 0.179855679,0.0425113422 0.11118351,0.110093476 C0.0425113422,0.178765644 0,0.273598638 0,0.378241942 C0,0.548287311 0.122083855,0.694351923 0.28885912,0.721602783 C1.11510521,0.858947119 1.74405506,1.5772798 1.74405506,2.44167709 L1.74405506,9.76670836 C1.74405506,10.5373627 2.36864478,11.1619524 3.13929912,11.1619524 L9.41789735,11.1619524 C10.1885517,11.1619524 10.8131414,10.5373627 10.8131414,9.76670836 L10.8131414,0.741223402 C10.8131414,0.717242645 10.832762,0.697622026 10.8567428,0.697622026 L11.118351,0.697622026 C11.1423318,0.697622026 11.1619524,0.678001406 11.1619524,0.654020649 L11.1619524,0.0436013766 C11.1619524,0.0196206195 11.1423318,0 11.118351,0 Z M9.06908634,9.72310698 C9.06908634,9.74708774 9.04946572,9.76670836 9.02548496,9.76670836 L6.32219961,9.76670836 C6.29821885,9.76670836 6.27859823,9.74708774 6.27859823,9.72310698 L6.27859823,9.11268771 C6.27859823,9.08870696 6.29821885,9.06908634 6.32219961,9.06908634 L9.02548496,9.06908634 C9.04946572,9.06908634 9.06908634,9.08870696 9.06908634,9.11268771 L9.06908634,9.72310698 Z M9.06908634,8.32786293 C9.06908634,8.35184369 9.04946572,8.37146431 9.02548496,8.37146431 L6.32219961,8.37146431 C6.29821885,8.37146431 6.27859823,8.35184369 6.27859823,8.32786293 L6.27859823,7.71744366 C6.27859823,7.6934629 6.29821885,7.67384228 6.32219961,7.67384228 L9.02548496,7.67384228 C9.04946572,7.67384228 9.06908634,7.6934629 9.06908634,7.71744366 L9.06908634,8.32786293 Z M9.06908634,6.93261888 C9.06908634,6.95659964 9.04946572,6.97622026 9.02548496,6.97622026 L6.32219961,6.97622026 C6.29821885,6.97622026 6.27859823,6.95659964 6.27859823,6.93261888 L6.27859823,6.32219961 C6.27859823,6.29821885 6.29821885,6.27859823 6.32219961,6.27859823 L9.02548496,6.27859823 C9.04946572,6.27859823 9.06908634,6.29821885 9.06908634,6.32219961 L9.06908634,6.93261888 Z M9.06908634,5.53737483 C9.06908634,5.56135559 9.04946572,5.58097621 9.02548496,5.58097621 L6.32219961,5.58097621 C6.29821885,5.58097621 6.27859823,5.56135559 6.27859823,5.53737483 L6.27859823,4.92695556 C6.27859823,4.9029748 6.29821885,4.88335418 6.32219961,4.88335418 L9.02548496,4.88335418 C9.04946572,4.88335418 9.06908634,4.9029748 9.06908634,4.92695556 L9.06908634,5.53737483 Z M9.06908634,4.14213078 C9.06908634,4.16611154 9.04946572,4.18573215 9.02548496,4.18573215 L6.32219961,4.18573215 C6.29821885,4.18573215 6.27859823,4.16611154 6.27859823,4.14213078 L6.27859823,3.53171151 C6.27859823,3.50773075 6.29821885,3.48811013 6.32219961,3.48811013 L9.02548496,3.48811013 C9.04946572,3.48811013 9.06908634,3.50773075 9.06908634,3.53171151 L9.06908634,4.14213078 Z M9.06908634,2.74688673 C9.06908634,2.77086748 9.04946572,2.7904881 9.02548496,2.7904881 L6.32219961,2.7904881 C6.29821885,2.7904881 6.27859823,2.77086748 6.27859823,2.74688673 L6.27859823,2.13646745 C6.27859823,2.1124867 6.29821885,2.09286608 6.32219961,2.09286608 L9.02548496,2.09286608 C9.04946572,2.09286608 9.06908634,2.1124867 9.06908634,2.13646745 L9.06908634,2.74688673 Z" id="形状" fill="#1EECE3"></path>
+        </g>
+        <rect id="矩形备份-5" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
+    </g>
+</svg>

src/icons/svg/icon-侧边收纳.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>outdent</title>
+    <title></title>
     <desc>Created with Sketch.</desc>
     <g id="登录页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.649999976">
         <g id="进工业炉加工_录入托盘标识卡信息" transform="translate(-370.000000, -23.000000)" fill="#000000" fill-rule="nonzero">

src/icons/svg/icon-出库.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>出库on</title>
+    <title>出库</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <linearGradient x1="50%" y1="-35.9917859%" x2="50%" y2="100%" id="linearGradient-1">

src/icons/svg/icon-总电流.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>编组 13</title>
+    <title>总电流</title>
     <desc>Created with Sketch.</desc>
     <g id="登录页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="能源管理/用能源分析" transform="translate(-385.000000, -370.000000)" fill-rule="nonzero">

src/icons/svg/icon-总电量.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>编组 7</title>
+    <title>总电量</title>
     <desc>Created with Sketch.</desc>
     <g id="登录页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="能源管理/用能源分析" transform="translate(-385.000000, -239.000000)">

src/icons/svg/icon-新建.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>Shape</title>
+    <title>新建</title>
     <desc>Created with Sketch.</desc>
     <g id="登录页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="进工业炉加工_录入托盘标识卡信息" transform="translate(-1840.000000, -90.000000)" fill="#FFFFFF">

src/icons/svg/icon-日历.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>编组</title>
+    <title>日历</title>
     <desc>Created with Sketch.</desc>
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.5">
         <g id="select/时间_开始" transform="translate(-194.000000, -9.000000)" fill="#000000">

src/icons/svg/icon-氨气.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>氨气</title>
+    <desc>Created with Sketch.</desc>
+    <g id="氨气" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-7" fill-rule="nonzero">
+            <rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
+            <g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#F78C3E" opacity="0.103932">
+                <path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
+            </g>
+        </g>
+        <path d="M8.47864897,13.2624837 L8.47864897,8.27462828 L9.82447696,8.27462828 L9.82447696,15.5586831 L8.15335406,15.5586831 L6.35466452,10.4560177 L6.35466452,15.5586831 L5.00883654,15.5586831 L5.00883654,8.27462828 L6.6927161,8.27462828 L8.47864897,13.2624837 L8.47864897,13.2624837 Z M12.3375396,8.27462828 L12.3375396,11.0619592 L14.0533109,11.0619592 L14.0533109,8.27462828 L15.5203272,8.27462828 L15.5203272,15.5586831 L14.0533109,15.5586831 L14.0533109,12.3248689 L12.3375396,12.3248689 L12.3375396,15.5586831 L10.8705234,15.5586831 L10.8705234,8.27462828 L12.3375396,8.27462828 Z M17.1468017,14.8443099 C17.2231917,14.9919573 17.383765,15.0760671 17.5486366,15.0547949 C17.6414477,15.059803 17.7339169,15.0399882 17.8165266,14.9973899 C17.8805964,14.9613281 17.9335448,14.9083798 17.9696065,14.8443099 C18.0080986,14.770947 18.0319297,14.6907878 18.0397682,14.6083116 C18.0452758,14.5148438 18.0452758,14.4211328 18.0397682,14.327665 C18.0477582,14.2300271 18.0477582,14.1318997 18.0397682,14.0342618 C18.0270964,13.9490998 17.9989971,13.8669634 17.9568499,13.7918852 C17.9139897,13.7193845 17.8522673,13.6598666 17.7782566,13.6196702 C17.6830775,13.5733322 17.5778617,13.5514123 17.4720966,13.5558869 L17.1659367,13.5558869 L17.1659367,12.9563237 L17.4657183,12.9563237 C17.6299477,12.9591253 17.7831692,12.8740022 17.8675532,12.7330821 C17.9092916,12.6640348 17.9394553,12.5886254 17.9568499,12.5098405 C17.9666461,12.4208125 17.9666461,12.3309786 17.9568499,12.2419506 C17.9713278,12.0811721 17.9332812,11.9200337 17.8484182,11.7827107 C17.764924,11.6886038 17.6421748,11.639032 17.516745,11.6487657 C17.4349853,11.6450257 17.3536582,11.6626099 17.2807467,11.6997924 C17.2179579,11.7354128 17.1669626,11.7886253 17.1340451,11.8528724 C17.0994817,11.9250792 17.0778915,12.0028039 17.0702617,12.0824923 C17.0645331,12.1802095 17.0645331,12.2781784 17.0702617,12.3758955 L16.228322,12.3758955 C16.1989795,12.0098702 16.3211906,11.6478487 16.5663735,11.3744975 C16.8390373,11.1374533 17.1945595,11.0181814 17.555015,11.0428242 C17.8968552,11.0223443 18.2351536,11.1215785 18.5117647,11.3234708 C18.7566926,11.5473503 18.8842593,11.8726452 18.8561946,12.2036806 C18.8598804,12.4300282 18.7954342,12.6522563 18.671223,12.8415138 C18.5515295,13.0109051 18.370981,13.1274617 18.1673348,13.1668087 C18.4224681,13.184668 18.6565528,13.3154238 18.805168,13.5239953 C18.9358564,13.7386968 19.0002065,13.9872213 18.9901396,14.2383684 C18.9894581,14.3973997 18.9701924,14.5558064 18.9327346,14.7103649 C18.8942531,14.8726863 18.8177358,15.0235346 18.709493,15.1504698 C18.5845102,15.2924102 18.4269091,15.4018554 18.2502531,15.4693864 C18.0074026,15.5582526 17.7496802,15.5994016 17.4912316,15.5905747 C17.1278237,15.6172659 16.7703482,15.4872748 16.5089686,15.2333881 C16.276196,14.9486332 16.1599621,14.5862569 16.1836736,14.2192334 L17.0638834,14.2192334 C17.0468888,14.4311146 17.0751536,14.6441874 17.1468017,14.8443099 L17.1468017,14.8443099 Z" id="形状" fill="#F78C3E" fill-rule="nonzero"></path>
+        <rect id="矩形备份-2" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
+    </g>
+</svg>

src/icons/svg/icon-氮气.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>氮气</title>
+    <desc>Created with Sketch.</desc>
+    <g id="氮气" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-7" fill-rule="nonzero">
+            <rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
+            <g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#F74D3E" opacity="0.103932">
+                <path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
+            </g>
+        </g>
+        <path d="M11.1315545,7.41029124 L12.7765769,7.41029124 L12.7765769,16.3136828 L10.7339424,16.3136828 L8.53538163,10.0766309 L8.53538163,16.3136828 L6.89035919,16.3136828 L6.89035919,7.41029124 L8.94858632,7.41029124 L11.1315545,13.5070095 L11.1315545,7.41029124 Z M13.6253742,16.5897088 C13.6253742,16.3497576 13.6521255,16.1114278 13.7064388,15.8763406 C13.7566759,15.6561581 13.8357193,15.4435589 13.9415261,15.244037 C14.0533476,15.0362427 14.1864686,14.8406363 14.3387424,14.6603721 C14.512298,14.4538586 14.6991434,14.2588895 14.8980879,14.0767072 L15.3682624,13.6389585 C15.4797402,13.5425181 15.582795,13.4367514 15.6763078,13.3228067 C15.7484553,13.2336357 15.808443,13.1363582 15.8546498,13.0309743 C15.9003471,12.9307635 15.9304197,12.8241424 15.9438209,12.7148225 C15.9519273,12.5851192 15.9519273,12.4554158 15.9438209,12.3257125 C15.9865668,12.1524649 15.946538,11.9691889 15.8354529,11.8295391 C15.7243679,11.6898893 15.5547919,11.6096621 15.3763689,11.6123443 C15.1412866,11.5888427 14.9192968,11.7246872 14.8332363,11.9447091 C14.7845947,12.0580584 14.7544871,12.1784889 14.7440653,12.3013932 L14.7440653,12.7310354 L13.6253742,12.7310354 L13.6253742,12.5364804 C13.5955408,12.084481 13.75061,11.6397543 14.0550164,11.304299 C14.4310414,10.9864937 14.9183231,10.8318474 15.4087947,10.8746568 C15.8773033,10.8368024 16.3422378,10.9820944 16.7058278,11.2799796 C17.0016873,11.5907953 17.1544691,12.0109454 17.1273635,12.4392029 C17.1281724,12.6106323 17.1118788,12.7817149 17.0787248,12.9499097 C17.0464558,13.1070449 16.9947156,13.2595423 16.9247021,13.4038713 C16.8502985,13.5575683 16.7577673,13.7018081 16.6490826,13.8335135 C16.5214749,13.9836804 16.3833143,14.1245501 16.2356533,14.2550492 L15.5871368,14.854927 C15.4335539,14.988679 15.2973803,15.1411934 15.1818139,15.3088886 C15.0991397,15.427719 15.0361811,15.5591109 14.9953654,15.6979985 L17.1597894,15.6979985 L17.1597894,16.5897088 L13.6253742,16.5897088 L13.6253742,16.5897088 Z" id="形状" fill="#F74D3E" fill-rule="nonzero"></path>
+        <rect id="矩形备份-3" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
+    </g>
+</svg>

src/icons/svg/icon-用户名更多.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="11px" height="6px" viewBox="0 0 11 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>箭头 右</title>
+    <title>更多</title>
     <desc>Created with Sketch.</desc>
     <g id="登录页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="进工业炉加工_录入托盘标识卡信息" transform="translate(-1882.000000, -29.000000)" fill="#000000" fill-rule="nonzero">

src/icons/svg/icon-甲醇.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>甲醇</title>
+    <desc>Created with Sketch.</desc>
+    <g id="甲醇" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-7" fill-rule="nonzero">
+            <rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
+            <g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#403EF7" opacity="0.103932">
+                <path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
+            </g>
+        </g>
+        <path d="M15.8788756,7.64322117 L8.09994157,7.64322117 C7.76411233,7.64322117 7.48266603,7.92465454 7.48266603,8.26049671 L7.48266603,10.1471005 L7.01407272,10.1471005 L7.01407272,10.7179209 L7.48266603,10.7179209 L7.48266603,13.7275278 L7.01407272,13.7275278 L7.01407272,14.2852217 L7.48266603,14.2852217 L7.48266603,17.2827245 C7.48266603,17.6185796 7.76411233,17.9 8.09994157,17.9 L15.8788756,17.9 C16.2237837,17.9 16.5052171,17.6185666 16.5052171,17.2827245 L16.5052171,14.3103776 L16.9859273,14.3103776 L16.9859273,13.7275278 L16.5052171,13.7275278 L16.5052171,10.7179209 L16.9859273,10.7179209 L16.9859273,10.1898278 L16.5052171,10.1898278 L16.5052171,8.26049671 C16.5052171,7.92462867 16.2237708,7.64322117 15.8788756,7.64322117 Z M7.48266603,10.7221735 L16.5052171,10.7221735 L16.5052171,11.2864268 L7.48266603,11.2864268 L7.48266603,10.7221735 Z M7.48266603,14.3064604 L16.5052171,14.3064604 L16.5052171,14.8707137 L7.48266603,14.8707137 L7.48266603,14.3064604 Z M8.65345779,6.1 L11.0043918,6.1 L11.0043918,7.08939456 L8.65345779,7.08939456 L8.65345779,6.1 Z" id="形状" fill="#403EF7" fill-rule="nonzero"></path>
+        <rect id="矩形备份-4" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
+    </g>
+</svg>

src/icons/svg/icon-电压.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
+    <title>电压</title>
+    <desc>Created with Sketch.</desc>
+    <g id="电压" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组-7" fill-rule="nonzero">
+            <rect id="矩形" fill="#000000" opacity="0" x="0.48" y="0.48" width="23.04" height="23.04"></rect>
+            <g id="编组-5" transform="translate(0.920000, 0.920000)" fill="#AD3EF7" opacity="0.103932">
+                <path d="M11.08,0.08 C5.01103448,0.08 0.08,5.01103448 0.08,11.08 C0.08,17.1489655 5.01103448,22.08 11.08,22.08 C17.1489655,22.08 22.08,17.1489655 22.08,11.08 C22.08,5.01103448 17.1489655,0.08 11.08,0.08 Z" id="形状"></path>
+            </g>
+        </g>
+        <path d="M13.8144243,17.0071735 L17.6684529,6.79683636 C17.7417306,6.60270457 17.6437589,6.38592638 17.4496271,6.31264873 C17.3921764,6.29096319 17.3302861,6.28368982 17.2693731,6.29146524 L17.1656733,6.3047023 C16.8422285,6.346038 16.5592242,6.54244031 16.4073797,6.83100291 C13.5269108,12.3049943 11.997501,15.2202924 11.8191502,15.5768973 C11.6358627,15.9433728 11.9086355,15.530083 12.6374685,14.3370278 L12.6374685,14.3370278 C9.96162253,9.69646748 8.35052735,7.0886171 7.80418295,6.5134767 C7.80418295,6.5134767 7.80418295,6.5134767 7.80418295,6.5134767 C7.51163552,6.20551007 7.0248227,6.19301034 6.71685607,6.48555776 C6.49255614,6.69862749 6.41775315,7.02535035 6.52704811,7.31477009 L10.1855757,17.0071735 C10.470523,17.762074 11.1931111,18.2616747 12,18.2616747 C12.8068889,18.2616747 13.529477,17.762074 13.8144243,17.0071735 Z" id="V" fill="#F73EE2" fill-rule="nonzero"></path>
+        <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="23" height="22.92"></rect>
+    </g>
+</svg>

src/icons/svg/icon-维护开始.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>编组 33</title>
+    <title>维护开始</title>
     <desc>Created with Sketch.</desc>
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="icon/界面内/维护开始" transform="translate(-1.000000, -1.000000)">

src/icons/svg/icon-维护结束.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="15px" height="14px" viewBox="0 0 15 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>编组 32</title>
+    <title>维护结束</title>
     <desc>Created with Sketch.</desc>
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="icon/界面内/维护结束" transform="translate(-1.000000, -1.000000)">

src/icons/svg/icon-编辑.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>常用购票人／编辑32</title>
+    <title>修改</title>
     <desc>Created with Sketch.</desc>
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="icon/界面内/编辑" transform="translate(-1.000000, -1.000000)" fill-rule="nonzero">

src/icons/svg/icon-设置.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>3.1 设置</title>
+    <title>设置</title>
     <desc>Created with Sketch.</desc>
     <g id="登录页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="进工业炉加工_录入托盘标识卡信息" transform="translate(-1744.000000, -22.000000)" fill="#000000" fill-rule="nonzero">

src/icons/svg/icon-详情.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>详情备份</title>
+    <title>详情</title>
     <desc>Created with Sketch.</desc>
     <g id="组件" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="icon/界面内/详情" transform="translate(-1.000000, -2.000000)" fill-rule="nonzero">

src/icons/svg/icon-进工业炉加工.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>生产和加工情况</title>
+    <title>进工业炉加工</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">

src/icons/svg/icon-追加加工.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 60 (88103) - https://sketch.com -->
-    <title>编组 15</title>
+    <title>追加加工</title>
     <desc>Created with Sketch.</desc>
     <defs>
         <linearGradient x1="50%" y1="0.100295608%" x2="50%" y2="100%" id="linearGradient-1">

src/router/index.js

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-09 16:23:55
+ * @LastEditTime: 2022-03-05 16:05:35
  * @Description:
  */
 /**
@@ -40,6 +40,7 @@ const mainRoutes = {
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
     { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页', isTab: true } },
     { path: '/orderProcess', component: _import('common/order-process'), name: 'orderProcess', meta: { title: '订单加工', isTab: true } },
+    { path: '/orderAuto', component: _import('common/order-auto'), name: 'orderAuto', meta: { title: '自动任务', isTab: true } },
     { path: '/exWarehouse', component: _import('common/ex-warehouse'), name: 'exWarehouse', meta: { title: '货物出库', isTab: true } },
     { path: '/addProcess', component: _import('common/add-process'), name: 'addProcess', meta: { title: '追加加工', isTab: true } },
     { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题', isTab: true } },
@@ -61,16 +62,21 @@ const mainRoutes = {
     { path: '/report-order-history-task', component: _import('report/components/order-history-task'), name: 'report-order-history-task', meta: { title: '订单历史任务详情', isTab: true } },
     { path: '/report-task-history', component: _import('report/task-history'), name: 'report-task-history', meta: { title: '执行任务历史列表', isTab: true } },
     { path: '/report-task-history-detail', component: _import('report/components/task-history-detail'), name: 'report-task-history-detail', meta: { title: '执行任务历史详情', isTab: true } },
-    { path: '/energy-sulfur-dioxide', component: _import('energy/sulfur-dioxide'), name: 'energy-sulfur-dioxide', meta: { title: '二氧化硫流量分析', isTab: true } },
-    { path: '/energy-electric', component: _import('energy/electric'), name: 'energy-electric', meta: { title: '用电能源分析' } },
-    { 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-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-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 } },
-    { path: '/energy-kiln-speed', component: _import('energy/kiln-speed'), name: 'energy-kiln-speed', meta: { title: '窑炉速度参数', isTab: true } }
+    { path: '/report-task-ele', component: _import('report/components/task-ele'), name: 'report-task-ele', meta: { title: '任务能源消耗' } }
+    // { path: '/energy-sulfur-dioxide', component: _import('energy/sulfur-dioxide'), name: 'energy-sulfur-dioxide', meta: { title: '二氧化硫流量分析', isTab: true } },
+    // { 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 } },
+    // { path: '/energy-kiln-speed', component: _import('energy/kiln-speed'), name: 'energy-kiln-speed', meta: { title: '窑炉速度参数', isTab: true } }
   ],
   beforeEnter (to, from, next) {
     let token = Vue.cookie.get('token')

src/views/basic/carInfo.vue

@@ -22,6 +22,9 @@
           <icon-svg class="iconClass" name="新建"></icon-svg>
           新增
         </el-button>
+        <el-button size="small" type="success" @click="resetCarStatus()">
+          重置车辆状态
+        </el-button>
       </el-form-item>
     </el-form>
     <el-table
@@ -160,6 +163,32 @@
           this.$refs.addOrUpdate.init(id)
         })
       },
+      // 重置车辆状态
+      resetCarStatus () {
+        this.$confirm(`确定重置车辆状态?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/vehicle/resetStatus'),
+            method: 'post'
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getDataList()
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }).catch(() => {})
+      },
       // 删除
       deleteHandle (id) {
         this.$confirm(`确定对[id=${id}]进行删除操作?`, '提示', {

src/views/basic/components/processInfo-add.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-18 14:16:25
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-13 17:05:54
+ * @LastEditTime: 2022-03-05 12:03:46
  * @Description:
 -->
 <template>
@@ -14,13 +14,13 @@
       <el-form-item label="工艺编码" prop="code">
         <el-input v-model="dataForm.code" placeholder="工艺编码"></el-input>
       </el-form-item>
-      <el-form-item label="工艺号" prop="alarmClass">
-        <el-input v-model="dataForm.alarmClass" placeholder="工艺号"></el-input>
+      <el-form-item label="工艺号" prop="craftCode">
+        <el-input v-model="dataForm.craftCode" placeholder="工艺号"></el-input>
       </el-form-item>
-      <el-form-item label="对应PLC值" prop="alarmInfo">
-        <el-input v-model="dataForm.alarmInfo" placeholder="对应PLC值"></el-input>
+      <el-form-item label="对应PLC值" prop="plcValue">
+        <el-input v-model="dataForm.plcValue" placeholder="对应PLC值"></el-input>
       </el-form-item>
-      <el-form-item label="当前状态" prop="alarmInfo"
+      <!-- <el-form-item label="当前状态" prop="alarmInfo"
         ><el-switch
           v-model="dataForm.alarmInfo"
           active-color="#13ce66"
@@ -29,9 +29,9 @@
           inactive-value="0"
         >
         </el-switch>
-      </el-form-item>
-      <el-form-item label="说明" prop="remark">
-        <el-input v-model="dataForm.remark" placeholder="说明"></el-input>
+      </el-form-item> -->
+      <el-form-item label="说明" prop="content">
+        <el-input v-model="dataForm.content" placeholder="说明"></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -49,15 +49,18 @@
         dataForm: {
           id: '',
           code: '',
-          alarmClass: '',
-          alarmInfo: '',
-          remark: ''
+          content: '',
+          plcValue: '',
+          craftCode: ''
         },
         dataRule: {
           code: [
             { required: true, message: '工艺编码不能为空', trigger: 'blur' }
           ],
-          alarmInfo: [
+          craftCode: [
+            { required: true, message: '工艺号不能为空', trigger: 'blur' }
+          ],
+          plcValue: [
             { required: true, message: '对应PLC值不能为空', trigger: 'blur' }
           ]
         },
@@ -73,7 +76,7 @@
           this.formLoading = true
           if (this.dataForm.id) {
             this.$http({
-              url: this.$http.adornUrl(`/alarmBase/get`),
+              url: this.$http.adornUrl(`/craftInfo/get`),
               method: 'post',
               data: this.$http.adornData({id})
             }).then(({data}) => {
@@ -86,7 +89,7 @@
             })
           } else {
             this.$http({
-              url: this.$http.adornUrl(`/alarmBase/codeGenerator`),
+              url: this.$http.adornUrl(`/craftInfo/codeGenerator`),
               method: 'post',
               data: this.$http.adornData()
             }).then(({data}) => {
@@ -105,13 +108,14 @@
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
             this.$http({
-              url: this.$http.adornUrl(`/alarmBase/${!this.dataForm.id ? 'add' : 'update'}`),
+              url: this.$http.adornUrl(`/craftInfo/${!this.dataForm.id ? 'add' : 'update'}`),
               method: 'post',
               data: this.$http.adornData({
                 'id': this.dataForm.id || undefined,
                 'code': this.dataForm.code,
-                'alarmClass': this.dataForm.alarmClass,
-                'alarmInfo': this.dataForm.alarmInfo
+                'content': this.dataForm.content,
+                'plcValue': this.dataForm.plcValue,
+                'craftCode': this.dataForm.craftCode
               })
             }).then(({data}) => {
               if (data && data.code === 0) {

src/views/basic/processInfo.vue

@@ -44,7 +44,7 @@
         label="添加时间">
       </el-table-column> -->
       <el-table-column
-        prop="alarmClass"
+        prop="craftCode"
         label="工艺号">
       </el-table-column>
       <el-table-column
@@ -52,15 +52,15 @@
         label="工艺编码">
       </el-table-column>
       <el-table-column
-        prop="alarmInfo"
+        prop="plcValue"
         label="对应PLC值">
       </el-table-column>
-      <el-table-column
+      <!-- <el-table-column
         prop="alarmInfo"
         label="状态">
-      </el-table-column>
+      </el-table-column> -->
       <el-table-column
-        prop="alarmInfo"
+        prop="content"
         label="说明">
       </el-table-column>
       <el-table-column
@@ -124,7 +124,7 @@
       getDataList () {
         this.dataListLoading = true
         this.$http({
-          url: this.$http.adornUrl('/alarmBase/page'),
+          url: this.$http.adornUrl('/craftInfo/page'),
           method: 'post',
           data: this.$http.adornData({
             'current': this.pageIndex,
@@ -168,7 +168,7 @@
           type: 'warning'
         }).then(() => {
           this.$http({
-            url: this.$http.adornUrl('/alarmBase/delete'),
+            url: this.$http.adornUrl('/craftInfo/delete'),
             method: 'post',
             data: this.$http.adornData({id})
           }).then(({data}) => {

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

@@ -1,8 +1,8 @@
 <!--
  * @Author: zwq
  * @Date: 2021-11-17 15:49:18
- * @LastEditors: zwq
- * @LastEditTime: 2021-11-17 15:58:31
+ * @LastEditors: gtz
+ * @LastEditTime: 2021-12-21 10:23:09
  * @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,29 +23,71 @@
         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="productName"
+        header-align="center"
+        align="center"
+        label="产品名称">
+      </el-table-column>
+      <el-table-column
+        prop="orderNo"
+        header-align="center"
+        align="center"
+        label="订单号">
+      </el-table-column>
+      <el-table-column
+        prop="taskCode"
+        header-align="center"
+        align="center"
+        label="任务编码">
+      </el-table-column>
+      <el-table-column
+        prop="currTaskId"
+        header-align="center"
+        align="center"
+        label="当前任务ID">
+      </el-table-column>
+      <el-table-column
+        prop="materialDes"
+        header-align="center"
+        align="center"
+        label="物料牌号">
+      </el-table-column>
+      <el-table-column
+        prop="craftIll"
+        header-align="center"
+        align="center"
+        label="工艺要求">
+      <el-table-column
+        prop="quantity"
         header-align="center"
         align="center"
         label="数量">
       </el-table-column>
+      <el-table-column
+        prop="weight"
+        header-align="center"
+        align="center"
+        label="重量">
+      </el-table-column>
       <el-table-column
         prop="unit"
         header-align="center"
         align="center"
         label="单位">
       </el-table-column>
+      </el-table-column>
     </el-table>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
@@ -56,24 +100,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}`),
-              method: 'get',
-              params: this.$http.adornParams()
+              url: this.$http.adornUrl(`/outStock/get`),
+              method: 'post',
+              data: this.$http.adornData({ id })
             }).then(({data}) => {
               if (data && data.code === 0) {
-                this.dataForm.paramKey = data.config.paramKey
-                this.dataForm.paramValue = data.config.paramValue
-                this.dataForm.remark = data.config.remark
+                this.dataList = data.data
+              } else {
+                this.$message.error(data.msg)
               }
+              this.formLoading = false
             })
           }
         })

src/views/common/ex-warehouse.vue

@@ -2,49 +2,50 @@
  * @Author: zwq
  * @Date: 2021-11-15 15:17:30
  * @LastEditors: zwq
- * @LastEditTime: 2021-11-17 16:07:04
+ * @LastEditTime: 2022-03-18 15:00:32
  * @Description:
 -->
 <template>
-  <div>
-    <div class="mainDiv" style="margin:10px 0 100px">
-      <div class="flexDiv">
-        <div
-          class="wareBox"
-          :class="[
-            count > Math.round(Math.random() * 10) ? 'enableBox' : 'disableBox',
-            { active: count === isActive }
-          ]"
-          @click="selectBox(count)"
-          v-for="count in 10"
-          v-bind:key="count"
-        >
-          <div class="plat">库位{{ count }}</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">
-      <div class="flexDiv">
-        <div class="wareBox end-plat" @click="selectPlat(count)" v-for="count in 4" v-bind:key="count">
-          <div class="plat">提升台{{ count }}</div>
-        </div>
-      </div>
-    </div>
+  <div v-loading="dataListLoading">
+    <el-card class="base-container" style="min-height: 300px">
+      <el-card
+        class="wareBox"
+        shadow="hover"
+        :class="[
+          item.empty ? 'disableBox' : 'enableBox',
+          { active: item.locationId === isActive }
+        ]"
+        :disabled="item.empty"
+        @click.native="item.empty ? '' : selectBox(item.locationId)"
+        v-for="item in warehouseList"
+        :key="item.locationId"
+      >
+        <div class="plat">{{ item.locationName }}</div>
+        <el-button
+          v-if="!item.empty"
+          @click.stop="showDetail(item.locationId)"
+          class="wareBox-button"
+          type="text"
+          size="mini"
+          icon="el-icon-search"
+          circle
+        />
+      </el-card>
+    </el-card>
+    <el-card class="base-container" style="margin-top: 20px; min-height: 200px">
+      <el-row :gutter="30" style="padding: 20px;">
+        <el-col class="footer-item-container" :offset="3" :span="6">
+          <el-card class="footer-item-box base-container" @click.native="selectPlat(1)">
+            <div class="plat" style="font-size: 24px">出口液压台1</div>
+          </el-card>
+        </el-col>
+        <el-col class="footer-item-container" :offset="6" :span="6">
+          <el-card class="footer-item-box base-container" @click.native="selectPlat(2)">
+            <div class="plat" style="font-size: 24px">出口液压台2</div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
     <ex-warehouse-info
       v-if="ExWarehouseInfoVisible"
       ref="ExWarehouseInfoRef"
@@ -59,31 +60,71 @@ export default {
   data () {
     return {
       isActive: '',
-      ExWarehouseInfoVisible: false
+      ExWarehouseInfoVisible: false,
+      dataListLoading: false,
+      warehouseList: []
     }
   },
   components: {
     ExWarehouseInfo
   },
-  created () {},
+  created () {
+    this.getWarehouseList()
+  },
   methods: {
-    selectBox (count) {
-      this.isActive = count
+    getWarehouseList () {
+      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) {
+      if (this.isActive === id) {
+        this.isActive = null
+      } else {
+        this.isActive = id
+      }
+    },
+    showDetail (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({
-            type: 'success',
-            message: '出库成功!'
+          this.$http({
+            url: this.$http.adornUrl('/outStock/runOutTask'),
+            method: 'post',
+            data: this.$http.adornData({
+              code: 'YYT00' + count,
+              localtionId: this.isActive
+            })
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                type: 'success',
+                message: '出库成功!'
+              })
+              this.isActive = null
+              this.getWarehouseList()
+            } else {
+              this.$message.error(data.msg)
+            }
+            this.dataListLoading = false
           })
         }).catch(() => {
           this.$message({
@@ -102,45 +143,28 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .mainDiv {
   border: 2px solid rgb(145, 174, 255);
   padding: 20px 0;
 }
-.flexDiv {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: space-around;
-  justify-content: space-around;
-}
-/* 边框特效 */
-.wareBox:hover {
-  background: linear-gradient(to left, deepskyblue, deepskyblue) left top
-      no-repeat,
-    linear-gradient(to bottom, deepskyblue, deepskyblue) left top no-repeat,
-    linear-gradient(to left, deepskyblue, deepskyblue) right top no-repeat,
-    linear-gradient(to bottom, deepskyblue, deepskyblue) right top no-repeat,
-    linear-gradient(to left, deepskyblue, deepskyblue) left bottom no-repeat,
-    linear-gradient(to bottom, deepskyblue, deepskyblue) left bottom no-repeat,
-    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat,
-    linear-gradient(to left, deepskyblue, deepskyblue) right bottom no-repeat;
-  background-size: 5px 30px, 30px 5px;
-  color: black;
-  border-radius: 5px;
-  background-color: rgb(190, 224, 241);
-}
+
 .wareBox {
   cursor: pointer;
+  display: inline-block;
   margin: 10px;
-  height: 100px;
-  padding: 10px;
-  line-height: 90px;
+  width: 104px;
+  height: 112px;
+  line-height: 72px;
   text-align: center;
-  border: 2px solid #cdcdc5;
-  border-radius: 5px;
-}
-.plat {
-  min-width: 80px;
+  padding: 0;
+  position: relative;
+  .wareBox-button {
+    position: absolute;
+    bottom: 0;
+    margin-left: -22px;
+    font-size: 18px;
+  }
 }
 .line {
   margin: 20px 0;
@@ -150,16 +174,38 @@ export default {
   border-right: 200px solid #ddd;
 }
 .enableBox {
-  background: rgb(0, 189, 16);
+  background: #aaccFF;
 }
 .disableBox {
-  background: #ddd;
+  background: #F4F4F4;
   cursor: not-allowed;
 }
 .end-plat {
   background-color: rgb(195, 246, 255);
 }
+.plat {
+  font-size: 16px;
+}
 .active {
-  border: 2px solid red;
+  border: 2px solid #F56C6C;
+}
+.footer-item-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .footer-item-box{
+    width: 100%;
+    height: 200px;
+    padding: 0 !important;
+    cursor: pointer;
+    line-height: 160px;
+    text-align: center;
+    background-image: url('../../assets/img/1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    background-color: transparent;
+    border-radius: 25px;
+    margin-bottom: 20px;
+  }
 }
 </style>

src/views/common/home.vue

@@ -100,7 +100,7 @@
         <template slot-scope="scope">
           <span>{{
             scope.row.taskType === 0
-              ? "缓存到窑炉加工"
+              ? "炉子加工"
               : scope.row.taskType === 1
               ? "出炉到缓存"
               : scope.row.taskType === 2

src/views/common/order-auto-add.vue

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog
+    :title="!row ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" v-loading="formLoading" :rules="dataRule" ref="dataForm" label-width="80px">
+      <el-form-item label="标识卡号" prop="idenCardNum">
+        <el-input v-model="dataForm.idenCardNum" @change="setIdenCardNum" ref="idenCardNum" placeholder="标识卡号"></el-input>
+      </el-form-item>
+      <el-form-item label="客户名称" prop="customerName">
+        <el-input v-model="dataForm.customerName" disabled placeholder="客户名称"></el-input>
+      </el-form-item>
+      <el-form-item label="材料牌号" prop="materialDes">
+        <el-input v-model="dataForm.materialDes" disabled placeholder="材料牌号"></el-input>
+      </el-form-item>
+      <el-form-item label="订单号" prop="orderNo">
+        <el-input v-model="dataForm.orderNo" disabled placeholder="订单号"></el-input>
+      </el-form-item>
+      <el-form-item label="产品名称" prop="productName">
+        <el-input v-model="dataForm.productName" disabled placeholder="产品名称"></el-input>
+      </el-form-item>
+      <el-form-item label="数量" prop="quantity">
+        <el-input v-model="dataForm.quantity" placeholder="数量"></el-input>
+      </el-form-item>
+      <el-form-item label="单位" prop="unit">
+        <el-input v-model="dataForm.unit" disabled placeholder="单位"></el-input>
+      </el-form-item>
+      <el-form-item label="重量" prop="weight">
+        <el-input v-model="dataForm.weight" placeholder="重量"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        visible: false,
+        dataForm: {
+          idenCardNum: null,
+          customerName: null,
+          materialDes: null,
+          orderNo: null,
+          productName: null,
+          quantity: null,
+          unit: null,
+          weight: null
+        },
+        dataRule: {
+          idenCardNum: [
+            { required: true, message: '标识卡号不能为空', trigger: 'blur' }
+          ],
+          quantity: [
+            { required: true, message: '数量不能为空', trigger: 'blur' }
+          ],
+          weight: [
+            { required: true, message: '重量不能为空', trigger: 'blur' }
+          ]
+        },
+        formLoading: false,
+        row: null,
+        editIndex: null
+      }
+    },
+    methods: {
+      init (row, idx) {
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+          if (row) {
+            this.row = row
+            this.dataForm = row
+            this.editIndex = idx
+          }
+          this.$refs['idenCardNum'].focus()
+        })
+      },
+      setIdenCardNum () {
+        this.formLoading = true
+        if (this.dataForm.idenCardNum) {
+          this.$http({
+            url: this.$http.adornUrl(`/orderInfo/getTaskInfoByIdenCardNum`),
+            method: 'get',
+            params: this.$http.adornParams({
+              'idenCardNum': this.dataForm.idenCardNum
+            })
+          }).then(({data}) => {
+            console.log(data)
+            if (data && data.code === 0) {
+              this.dataForm = data.data
+              this.dataForm.targetQuantity = data.data.quantity
+              this.dataForm.targetWeight = data.data.weight
+              this.dataForm.weight = null
+              this.dataForm.quantity = null
+            } else {
+              this.$message.warning(data.msg)
+            }
+            this.formLoading = false
+          })
+        } else {
+          this.$message.warning('请输入标识卡号')
+        }
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            if (this.editIndex) {
+              const taskList = JSON.parse(sessionStorage.getItem('autoTaskList'))
+              taskList.splice(this.editIndex, 1, this.dataForm)
+              sessionStorage.setItem('autoTaskList', JSON.stringify(taskList))
+            } else if (sessionStorage.getItem('autoTaskList')) {
+              const taskList = JSON.parse(sessionStorage.getItem('autoTaskList'))
+              taskList.push(this.dataForm)
+              sessionStorage.setItem('autoTaskList', JSON.stringify(taskList))
+            } else {
+              const arr = [this.dataForm]
+              sessionStorage.setItem('autoTaskList', JSON.stringify(arr))
+            }
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>

src/views/common/order-auto-submit.vue

@@ -0,0 +1,268 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-04 10:22:13
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-03-05 12:09:38
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\views\common\order-auto-submit.vue
+-->
+
+<template>
+  <el-dialog
+    :title="!row ? '新增' : '修改'"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <el-form :model="dataForm" v-loading="formLoading" :rules="dataRule" ref="dataForm" label-width="120px">
+      <el-form-item label="自动任务类型" prop="autoTaskType">
+        <el-select v-model="dataForm.autoTaskType" clearable @change="changeAutoTaskType">
+          <el-option :value="1" label="淡化炉加工"></el-option>
+          <el-option :value="2" label="多功能炉加工"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="加工类型" prop="processType">
+        <el-select v-model="dataForm.processType" clearable>
+          <el-option :value="0" label="初始加工" />
+          <el-option :value="1" label="复加工" />
+        </el-select>
+      </el-form-item>
+      <el-form-item v-if="dataForm.autoTaskType === 2" label="开始加工炉">
+        <el-form-item label="加工起点" prop="startPosition" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.startPosition" :disabled="!(dataForm.autoTaskType)">
+            <el-option value="YYT003" label="入口液压台3"></el-option>
+            <el-option value="YYT004" label="入口液压台4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="加工炉" prop="firstPosition" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.firstPosition" :disabled="!(dataForm.autoTaskType)">
+            <el-option v-for="item in kilnList" :key="item.id" :value="item.id + ',' + item.code" :label="item.kilnName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工艺" prop="firstProcess" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.firstProcess" :disabled="!(dataForm.autoTaskType)">
+            <el-option v-for="item in processList" :key="item.id" :value="item.code" :label="item.craftCode" />
+          </el-select>
+        </el-form-item>
+      </el-form-item>
+      <el-form-item label="清洗炉">
+        <el-form-item label="加工起点" v-if="dataForm.autoTaskType !== 2" prop="startPosition" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.startPosition" :disabled="!(dataForm.autoTaskType)">
+            <el-option value="YYT003" label="入口液压台3"></el-option>
+            <el-option value="YYT004" label="入口液压台4"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="加工炉" prop="secPosition" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.secPosition" :disabled="!(dataForm.autoTaskType)">
+            <el-option v-for="item in kilnList" :key="item.id" :value="item.id + ',' + item.code" :label="item.kilnName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工艺" prop="secProcess" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.secProcess" :disabled="!(dataForm.autoTaskType)">
+            <el-option v-for="item in processList" :key="item.id" :value="item.code" :label="item.craftCode" />
+          </el-select>
+        </el-form-item>
+      </el-form-item>
+      <el-form-item label="结束加工炉">
+        <el-form-item label="加工炉" prop="thirdPosition" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.thirdPosition" :disabled="!(dataForm.autoTaskType)">
+            <el-option v-for="item in kilnList" :key="item.id" :value="item.id + ',' + item.code" :label="item.kilnName" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="工艺" prop="thirdProcess" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.thirdProcess" :disabled="!(dataForm.autoTaskType)">
+            <el-option v-for="item in processList" :key="item.id" :value="item.code" :label="item.craftCode" />
+          </el-select>
+        </el-form-item>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      kilnList: {
+        type: Array,
+        default: () => []
+      },
+      processList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        visible: false,
+        dataForm: {
+          autoTaskType: null,
+          processType: null,
+          startPosition: null,
+          firstPosition: null,
+          firstProcess: null,
+          secPosition: null,
+          secProcess: null,
+          thirdPosition: null,
+          thirdProcess: null
+        },
+        dataRule: {
+          autoTaskType: [
+            { required: true, message: '自动任务类型不能为空', trigger: 'blur' }
+          ],
+          processType: [
+            { required: true, message: '加工类型不能为空', trigger: 'blur' }
+          ],
+          startPosition: [
+            { required: true, message: '加工起点不能为空', trigger: 'blur' }
+          ],
+          firstPosition: [
+            { required: true, message: '加工炉不能为空', trigger: 'blur' }
+          ],
+          firstProcess: [
+            { required: true, message: '工艺不能为空', trigger: 'blur' }
+          ],
+          secPosition: [
+            { required: true, message: '加工炉不能为空', trigger: 'blur' }
+          ],
+          secProcess: [
+            { required: true, message: '工艺不能为空', trigger: 'blur' }
+          ],
+          thirdPosition: [
+            { required: true, message: '加工炉不能为空', trigger: 'blur' }
+          ],
+          thirdProcess: [
+            { required: true, message: '工艺不能为空', trigger: 'blur' }
+          ]
+        },
+        dataList: [],
+        formLoading: false,
+        row: null,
+        editIndex: null
+      }
+    },
+    methods: {
+      init (list) {
+        this.dataList = list
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+        })
+      },
+      changeAutoTaskType () {
+        this.dataForm.startPosition = null
+        this.dataForm.firstPosition = null
+        this.dataForm.firstProcess = null
+        this.dataForm.secPosition = null
+        this.dataForm.secProcess = null
+        this.dataForm.thirdPosition = null
+        this.dataForm.thirdProcess = null
+      },
+      setIdenCardNum () {
+        this.formLoading = true
+        if (this.dataForm.idenCardNum) {
+          this.$http({
+            url: this.$http.adornUrl(`/orderInfo/getTaskInfoByIdenCardNum`),
+            method: 'get',
+            params: this.$http.adornParams({
+              'idenCardNum': this.dataForm.idenCardNum
+            })
+          }).then(({data}) => {
+            console.log(data)
+            if (data && data.code === 0) {
+              this.dataForm = data.data
+              this.dataForm.targetQuantity = data.data.quantity
+              this.dataForm.targetWeight = data.data.weight
+              this.dataForm.weight = null
+              this.dataForm.quantity = null
+            } else {
+              this.$message.warning(data.msg)
+            }
+            this.formLoading = false
+          })
+        } else {
+          this.$message.warning('请输入标识卡号')
+        }
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            const requestData = {
+              taskCreateParamList: []
+            }
+            if (this.dataForm.autoTaskType === 1) {
+              requestData.taskCreateParamList.push({
+                autoTaskStep: 1,
+                autoTaskType: this.dataForm.autoTaskType,
+                craftCode: this.dataForm.secProcess,
+                detParams: this.dataList,
+                kilnId: this.dataForm.secPosition.split(',')[0],
+                processType: this.dataForm.processType,
+                startPosition: this.dataForm.startPosition,
+                targetPosition: this.dataForm.secPosition.split(',')[1]
+              })
+              requestData.taskCreateParamList.push({
+                autoTaskStep: 2,
+                autoTaskType: this.dataForm.autoTaskType,
+                craftCode: this.dataForm.thirdProcess,
+                detParams: this.dataList,
+                kilnId: this.dataForm.thirdPosition.split(',')[0],
+                processType: this.dataForm.processType,
+                startPosition: this.dataForm.secPosition.split(',')[1],
+                targetPosition: this.dataForm.thirdPosition.split(',')[1]
+              })
+            } else if (this.dataForm.autoTaskType === 2) {
+              requestData.taskCreateParamList.push({
+                autoTaskStep: 1,
+                autoTaskType: this.dataForm.autoTaskType,
+                craftCode: this.dataForm.secProcess,
+                detParams: this.dataList,
+                kilnId: this.dataForm.firstPosition.split(',')[0],
+                processType: this.dataForm.processType,
+                startPosition: this.dataForm.startPosition,
+                targetPosition: this.dataForm.firstPosition.split(',')[1]
+              })
+              requestData.taskCreateParamList.push({
+                autoTaskStep: 2,
+                autoTaskType: this.dataForm.autoTaskType,
+                craftCode: this.dataForm.secProcess,
+                detParams: this.dataList,
+                kilnId: this.dataForm.secPosition.split(',')[0],
+                processType: this.dataForm.processType,
+                startPosition: this.dataForm.firstPosition.split(',')[1],
+                targetPosition: this.dataForm.secPosition.split(',')[1]
+              })
+              requestData.taskCreateParamList.push({
+                autoTaskStep: 3,
+                autoTaskType: this.dataForm.autoTaskType,
+                craftCode: this.dataForm.thirdProcess,
+                detParams: this.dataList,
+                kilnId: this.dataForm.thirdPosition.split(',')[0],
+                processType: this.dataForm.processType,
+                startPosition: this.dataForm.secPosition.split(',')[1],
+                targetPosition: this.dataForm.thirdPosition.split(',')[1]
+              })
+            }
+            this.$http({
+              url: this.$http.adornUrl(`/currTask/createAutoTask`),
+              method: 'post',
+              data: this.$http.adornData(requestData)
+            }).then(({data}) => {
+              console.log(data)
+              if (data && data.code === 0) {
+                this.$message.success('任务提交成功')
+                this.dataList = []
+                sessionStorage.setItem('autoTaskList', '')
+                this.$emit('refreshDataList')
+              } else {
+                this.$message.warning(data.msg)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>

src/views/common/order-auto.vue

@@ -0,0 +1,348 @@
+<template>
+  <div class="mod-config">
+    <div class="auto-session">
+      <el-row style="margin: 10px 0; font-weight: bold">
+        未下发自动任务
+      </el-row>
+      <el-form :inline="true" style="display: flex; align-items: center; justify-content: right;">
+        <el-form-item style="flex: 1;float: left">
+          <el-button size="small" type="primary" @click="addOrUpdateHandle()">
+            <icon-svg class="iconClass" name="新建"></icon-svg>
+            新增
+          </el-button>
+        </el-form-item>
+        <el-form-item style="margin-left:1%">
+          <el-button type="primary" size="small" @click="handleSubmit()">提交任务</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        :data="dataList"
+        :stripe="true"
+        :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+        style="width: 100%;">
+        <el-table-column
+          type="index"
+          header-align="center"
+          align="center"
+          label="序号"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="idenCardNum"
+          label="标识卡">
+        </el-table-column>
+        <el-table-column
+          prop="customerName"
+          label="客户名称">
+        </el-table-column>
+        <el-table-column
+          prop="orderNo"
+          label="订单号">
+        </el-table-column>
+        <el-table-column
+          prop="productName"
+          label="产品名称">
+        </el-table-column>
+        <el-table-column
+          prop="materialDes"
+          label="材料号牌">
+        </el-table-column>
+        <el-table-column
+          prop="finishQuantity"
+          label="已完成数">
+          <template slot-scope="scope">
+            {{ `${scope.row.finishQuantity}/${scope.row.targetQuantity}` }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="quantity"
+          label="数量">
+        </el-table-column>
+        <el-table-column
+          prop="weight"
+          label="重量">
+        </el-table-column>
+        <el-table-column
+          prop="unit"
+          label="单位">
+        </el-table-column>
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row, scope.$index)">
+              <el-tooltip class="item" effect="dark" content="修改" placement="top">
+                <icon-svg class="iconClass" name="编辑"></icon-svg>
+              </el-tooltip>
+            </el-button>
+            <el-button type="text" style="color:red" size="small" @click="deleteHandle(scope.$index)">
+              <el-tooltip class="item" effect="dark" content="删除" placement="top">
+                <icon-svg class="iconClass" name="删除"></icon-svg>
+              </el-tooltip>
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="auto-undo">
+      <el-row style="margin: 10px 0; font-weight: bold">
+        未完成自动任务
+      </el-row>
+      <el-table
+        :data="autoList"
+        :stripe="true"
+        :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+        v-loading="dataListLoading"
+        style="width: 100%;">
+        <el-table-column
+          type="index"
+          header-align="center"
+          align="center"
+          label="序号"
+          width="50">
+        </el-table-column>
+        <el-table-column
+          prop="processFlowType"
+          label="自动任务类型">
+          <template slot-scope="scope">
+            {{ scope.row.processFlowType === 1 ? '淡化炉加工' : scope.row.processFlowType === 2 ? '多功能炉加工' : '' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="状态">
+          <template slot-scope="scope">
+            {{ scope.row.status === 0 ? '未开始' : scope.row.status === 1 ? '执行中' : scope.row.status === 2 ? '完成' : scope.row.status === 3 ? '终止' : '' }}
+          </template>
+        </el-table-column>
+        <!-- <el-table-column
+          label="详情">
+          <template slot-scope="scope">
+            <el-button type="text" @click="handleAutoDetail(scope.row.id)">详情</el-button>
+          </template>
+        </el-table-column> -->
+        <el-table-column
+          fixed="right"
+          header-align="center"
+          align="center"
+          label="操作">
+          <template slot-scope="scope">
+            <el-button type="text" style="color:red" size="small" @click="stopHandle(scope.row.id)">
+              <el-tooltip class="item" effect="dark" content="停止" placement="top">
+                <icon-svg class="iconClass" name="stop"></icon-svg>
+              </el-tooltip>
+            </el-button>
+          </template>
+        </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>
+    </div>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
+    <process-point v-if="processPointVisible" ref="processPoint" @refreshPoint="setPoint" />
+    <submit-form v-if="submitFormVisible" ref="submitForm" :kilnList="eqList" :processList="processList" @refreshDataList="getDataList" />
+    <auto-detail v-if="autoDetailVisible" ref="autoDetail" />
+  </div>
+</template>
+
+<script>
+  import AddOrUpdate from './order-auto-add'
+  import SubmitForm from './order-auto-submit'
+  import ProcessPoint from './order-process-point'
+  import AutoDetail from './order-auto-detail'
+  export default {
+    data () {
+      return {
+        startPosition: '',
+        kilnId: '',
+        targetPosition: '',
+        dataList: [],
+        autoList: [],
+        pageIndex: 1,
+        pageSize: 10,
+        totalPage: 0,
+        dataListLoading: false,
+        processType: null,
+        addOrUpdateVisible: false,
+        processPointVisible: false,
+        submitFormVisible: false,
+        autoDetailVisible: false,
+        eqList: [],
+        processList: []
+      }
+    },
+    components: {
+      AddOrUpdate,
+      ProcessPoint,
+      SubmitForm,
+      AutoDetail
+    },
+    activated () {
+      this.getDictList()
+      this.getDataList()
+      this.getAutoDataList()
+    },
+    methods: {
+      // 获取窑炉、工艺列表
+      getDictList () {
+        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.eqList = data.data.records
+          } else {
+            this.eqList = []
+          }
+        })
+        this.$http({
+          url: this.$http.adornUrl('/craftInfo/page'),
+          method: 'post',
+          data: this.$http.adornData({
+            current: 1,
+            size: 999
+          })
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.processList = data.data.records
+          } else {
+            this.processList = []
+          }
+        })
+      },
+      // 每页数
+      sizeChangeHandle (val) {
+        this.pageSize = val
+        this.pageIndex = 1
+        this.getAutoDataList()
+      },
+      // 当前页
+      currentChangeHandle (val) {
+        this.pageIndex = val
+        this.getAutoDataList()
+      },
+      // 获取数据列表
+      getDataList () {
+        this.dataList = sessionStorage.getItem('autoTaskList') ? JSON.parse(sessionStorage.getItem('autoTaskList')) : []
+        // if (data && data.code === 0) {
+        //   this.dataList = data.data.records
+        // } else {
+        //   this.dataList = []
+        // }
+      },
+      // 获取已下发自动任务
+      getAutoDataList () {
+        this.dataListLoading = true
+        this.$http({
+          url: this.$http.adornUrl('/autoTask/page'),
+          method: 'post',
+          data: this.$http.adornData({
+            'current': this.pageIndex,
+            'size': this.pageSize
+          })
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.autoList = data.data.records
+            this.totalPage = data.data.total
+          } else {
+            this.autoList = []
+            this.totalPage = 0
+          }
+          this.dataListLoading = false
+        })
+      },
+      // 新增 / 修改
+      addOrUpdateHandle (row, idx) {
+        this.addOrUpdateVisible = true
+        this.$nextTick(() => {
+          this.$refs.addOrUpdate.init(row, idx)
+        })
+      },
+      // 获取点位
+      getPoint (pointType) {
+        this.processPointVisible = true
+        this.$nextTick(() => {
+          this.$refs.processPoint.init(pointType)
+        })
+      },
+      setPoint (count, pointType) {
+        if (!pointType) {
+          this.startPosition = count
+        } else {
+          this.kilnId = count
+          this.targetPosition = count
+        }
+      },
+      // 弹出提交任务弹窗
+      handleSubmit () {
+        if (this.dataList.length) {
+          this.submitFormVisible = true
+          this.$nextTick(() => {
+            this.$refs.submitForm.init(this.dataList)
+          })
+        } else {
+          this.$message.warning('请至少添加一条任务！')
+        }
+      },
+      handleAutoDetail (id) {
+        this.autoDetailVisible = true
+        this.$nextTick(() => {
+          this.$refs.autoDetail.init(id)
+        })
+      },
+      // 删除
+      deleteHandle (idx) {
+        console.log(idx)
+        this.$confirm(`确定对第${idx + 1}项进行删除操作?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.dataList.splice(idx, 1)
+          sessionStorage.setItem('autoTaskList', JSON.stringify(this.dataList))
+        }).catch(() => {})
+      },
+      // 终止自动任务
+      stopHandle (id) {
+        this.$confirm(`确定对[id=${id}]进行停止操作?`, '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/autoTask/stop'),
+            method: 'post',
+            data: this.$http.adornData({id})
+          }).then(({data}) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.getDataList()
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }).catch(() => {})
+      }
+    }
+  }
+</script>

src/views/common/order-process-point.vue

@@ -12,7 +12,7 @@
     :visible.sync="visible"
   >
     <div class="wareBox" v-for="count in 4" v-bind:key="count" @click="setPoint(count)">
-      <div class="plat">提升平台{{count}}</div>
+      <div class="plat">液压台{{count}}</div>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">取消</el-button>
@@ -39,7 +39,7 @@ export default {
     setPoint (count) {
       console.log(count, this.pointType)
       this.visible = false
-      this.$emit('refreshPoint', count, this.pointType)
+      this.$emit('refreshPoint', 'YYT00' + count, this.pointType)
     }
   }
 }

src/views/common/order-process.vue

@@ -15,10 +15,8 @@
       </el-form-item>
       <el-form-item style="margin-left:1%">
         <el-select v-model="startPosition" size="small" placeholder="任务起点位置" clearable>
-          <el-option :value="1" label="提升平台1" />
-          <el-option :value="2" label="提升平台2" />
-          <el-option :value="3" label="提升平台3" />
-          <el-option :value="4" label="提升平台4" />
+          <el-option value="YYT003" label="入口液压台3" />
+          <el-option value="YYT004" label="入口液压台4" />
         </el-select>
         <!-- <el-button style="margin-left:10px" type="primary" @click="getPoint(0)">{{startPosition}}</el-button> -->
       </el-form-item>
@@ -199,7 +197,7 @@
             message: '请选择窑炉',
             type: 'warning'
           })
-        } else if (!this.processType) {
+        } else if (!this.processType && this.processType !== 0) {
           this.$message.warning('请选择加工类型')
         } else {
           this.$confirm(`确定提交任务?`, '提示', {
@@ -208,7 +206,7 @@
             type: 'warning'
           }).then(() => {
             this.$http({
-              url: this.$http.adornUrl(`currTask/createProcessTask`),
+              url: this.$http.adornUrl(`/currTask/createProcessTask`),
               method: 'post',
               data: this.$http.adornData({
                 craftCode: '',

src/views/common/testdata.js

@@ -0,0 +1,135 @@
+/*
+ * @Author: gtz
+ * @Date: 2022-03-04 14:09:53
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-03-04 14:15:15
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\views\common\testdata.js
+ */
+export default {
+  "taskCreateParamList": [
+    {
+      "autoTaskStep": 0,
+      "autoTaskType": 0,
+      "craftCode": "",
+      "detParams": [
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        },
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        },
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        }
+      ],
+      "kilnId": 1,
+      "processType": 0,
+      "startPosition": "",
+      "targetPosition": ""
+    },
+    {
+      "autoTaskStep": 1,
+      "autoTaskType": 0,
+      "craftCode": "",
+      "detParams": [
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        },
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        },
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        }
+      ],
+      "kilnId": 1,
+      "processType": 0,
+      "startPosition": "",
+      "targetPosition": ""
+    },
+    {
+      "autoTaskStep": 2,
+      "autoTaskType": 0,
+      "craftCode": "",
+      "detParams": [
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        },
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        },
+        {
+          "customerName": "",
+          "idenCardNum": "",
+          "materialDes": "",
+          "orderNo": "",
+          "productName": "",
+          "quantity": 0,
+          "unit": "",
+          "weight": 0
+        }
+      ],
+      "kilnId": 1,
+      "processType": 0,
+      "startPosition": "",
+      "targetPosition": ""
+    }
+  ]
+}

src/views/energy/ammonia-analysis.vue

@@ -2,43 +2,42 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:18:32
+ * @LastEditTime: 2021-12-16 15:39:28
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
-        <el-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+      <el-col :span="22">
+        <el-card class="base-container" style="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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -699,21 +698,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
 }
 </style>

src/views/energy/ammonia.vue

@@ -2,58 +2,64 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:17:51
+ * @LastEditTime: 2021-12-16 20:13:35
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="22">
         <el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col>
-              <h3>氨气流量分析</h3>
-            </el-col>
-          </el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col style="width: 400px">
-              <el-card>
-                <p style="font-size: 18px">氨气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
-                <p>昨日氨气流量(立方米)：1145</p>
-              </el-card>
-            </el-col>
-          </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-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+        <el-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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -714,21 +720,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
 }
 </style>

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">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-      <el-form-item>
-        <el-radio-group 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 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;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="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>

src/views/energy/electric.vue

@@ -2,60 +2,74 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:15:35
+ * @LastEditTime: 2021-12-16 19:57:51
  * @Description:
 -->
 <template>
   <div class="chart-container">
-    <el-row>
-      <el-row style="margin: 20px 0" :gutter="20">
-        <el-col>
-          <h3>用电分析</h3>
-        </el-col>
-      </el-row>
-      <el-row style="margin: 20px 0" :gutter="20">
-        <el-col style="width: 300px">
-          <el-card>
-            <p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
-            <p>昨日用电量(KW)：1145</p>
-          </el-card>
-        </el-col>
-        <el-col style="width: 300px">
-          <el-card>
-            <p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p>
-            <p>昨日用电流（A）：1145</p>
-          </el-card>
-        </el-col>
-      </el-row>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card class="base-container" style="height: 344px">
+          <el-row style="position: relative;">
+            <div class="base-container-titleline"></div>
+            <h3>用电分析</h3>
+          </el-row>
+          <el-row>
+            <el-col style="padding: 24px 0;border-bottom: 1px solid #EBEEF5">
+              <p
+                :title="'总电量（KW）：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>
+                总电量（KW）：<strong style="font-size: 32px; color: #3E6AF7">123,109</strong>
+              </p>
+              <p style="font-size: 14px; text-indent: 20px;">昨日用电量(KW)：1145</p>
+            </el-col>
+            <el-col style="padding: 24px 0;">
+              <p
+                :title="'总电流（A）：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>
+                总电流（A）：<strong style="font-size: 32px; color: #73DEB3">123,109</strong>
+              </p>
+              <p style="font-size: 14px; text-indent: 20px;">昨日用电流（A）：1145</p>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="16">
+        <el-card class="base-container" style="height: 344px; position: relative;">
+          <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-row style="height: 300px">
+            <chart height="100%" width="100%" :title="eleType" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
+          </el-row>
+        </el-card>
+      </el-col>
     </el-row>
-    <el-row style="margin: 20px 0" :gutter="20">
-      <el-col style="margin: 20px 0">
-        <el-checkbox-group :min="1" v-model="chartType" style="float: left">
-          <el-checkbox-button label="折线" />
-          <el-checkbox-button label="柱状" />
-        </el-checkbox-group>
-        <el-row style="float: right">
-          <el-radio-group v-model="eleType" @change="changeEleType">
-            <el-radio-button label="日"></el-radio-button>
-            <el-radio-button label="周"></el-radio-button>
-            <el-radio-button label="月"></el-radio-button>
-            <el-radio-button label="年"></el-radio-button>
-          </el-radio-group>
-          <el-date-picker
-            v-model="date"
-            :type="datePickerType[eleType].type"
-            :format="datePickerType[eleType].format"
-            :placeholder="'选择' + datePickerType[eleType].placeholder"
-          />
-        </el-row>
-      </el-col>
-      <el-col style="height: 500px">
-        <chart height="100%" width="100%" :title="eleType" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
-      </el-col>
+    <el-card class="base-container" style="margin-top: 20px; min-height: 540px">
       <el-col style="margin: 20px 0">
         <el-tabs type="border-card">
           <el-tab-pane v-for="item in yaoluList" :key="item.id">
-            <el-row style="width: 200px; height: 120px" slot="label" @click.native="handleTab(item.id)">
+            <el-row style="width: 174px; height: 110px; text-align: right" slot="label" @click.native="handleTab(item.id)">
               <el-col :span="12">
                 <el-row style="margin-top: 24px; line-height: 24px; height: 24px; font-size: 16px; font-weight: bold">
                   {{ item.name }}(KW)
@@ -72,26 +86,25 @@
               </el-col>
             </el-row>
             <el-row style="height: 300px">
-              <el-col style="margin: 20px 0">
-                <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+              <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-row style="float: right">
-                  <el-radio-group v-model="eleType" @change="changeEleType">
-                    <el-radio-button label="日"></el-radio-button>
-                    <el-radio-button label="周"></el-radio-button>
-                    <el-radio-button label="月"></el-radio-button>
-                    <el-radio-button label="年"></el-radio-button>
-                  </el-radio-group>
-                  <el-date-picker
-                    v-model="date"
-                    :type="datePickerType[eleType].type"
-                    :format="datePickerType[eleType].format"
-                    :placeholder="'选择' + datePickerType[eleType].placeholder"
-                  />
-                </el-row>
-              </el-col>
+                <el-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%" :id="item.id" :showId="showId" :title="eleType" :titleHeader="item.name" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
               </el-col>
@@ -99,7 +112,7 @@
           </el-tab-pane>
         </el-tabs>
       </el-col>
-    </el-row>
+    </el-card>
   </div>
 </template>
 
@@ -752,15 +765,17 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
+  min-height: calc(100vh - 138px);
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.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/kiln-electric.vue

@@ -2,110 +2,124 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:16:16
+ * @LastEditTime: 2021-12-16 19:58:14
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
-        <el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col>
-              <h3>用电分析</h3>
-            </el-col>
-          </el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col style="width: 300px">
-              <el-card>
-                <p style="font-size: 18px">总电量（KW）：<strong style="font-size: 22px">123,109</strong></p>
-                <p>昨日用电量(KW)：1145</p>
-              </el-card>
-            </el-col>
-            <el-col style="width: 300px">
-              <el-card>
-                <p style="font-size: 18px">总电流（A）：<strong style="font-size: 22px">123,109</strong></p>
-                <p>昨日用电流（A）：1145</p>
-              </el-card>
-            </el-col>
-          </el-row>
+      <el-col :span="22">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-card class="base-container" style="height: 344px">
+              <el-row style="position: relative;">
+                <div class="base-container-titleline"></div>
+                <h3>用电分析</h3>
+              </el-row>
+              <el-row>
+                <el-col style="padding: 24px 0;border-bottom: 1px solid #EBEEF5">
+                  <p
+                    :title="'总电量（KW）：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>
+                    总电量（KW）：<strong style="font-size: 32px; color: #3E6AF7">123,109</strong>
+                  </p>
+                  <p style="font-size: 14px; text-indent: 20px;">昨日用电量(KW)：1145</p>
+                </el-col>
+                <el-col style="padding: 24px 0;">
+                  <p
+                    :title="'总电流（A）：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>
+                    总电流（A）：<strong style="font-size: 32px; color: #73DEB3">123,109</strong>
+                  </p>
+                  <p style="font-size: 14px; text-indent: 20px;">昨日用电流（A）：1145</p>
+                </el-col>
+              </el-row>
+            </el-card>
+          </el-col>
+          <el-col :span="16">
+            <el-card class="base-container" style="height: 344px; position: relative;">
+              <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: 300px">
+                <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
+              </el-col>
+            </el-card>
+          </el-col>
         </el-row>
-        <el-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+        <el-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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
-          <el-col style="height: 500px">
-            <chart height="100%" width="100%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="用电量（KW）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
-          </el-col>
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
-              <el-checkbox-button label="折线" />
-              <el-checkbox-button label="柱状" />
-            </el-checkbox-group>
-            <el-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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%" :id="1" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电流趋势（A）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
           </el-col>
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+        </el-card>
+        <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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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%" :id="2" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="电压趋势（V）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
           </el-col>
-        </el-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -771,21 +785,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
 }
 </style>

src/views/energy/kiln-speed.vue

@@ -2,50 +2,49 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 10:54:45
+ * @LastEditTime: 2021-12-16 15:41:00
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
-        <el-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+      <el-col :span="22">
+        <el-card class="base-container" style="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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="速度参数（转/s）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
           </el-col>
-        </el-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import Chart from '@/components/Charts/MixChart.1'
+import Chart from '@/components/Charts/MixChart'
 import ringChart from '@/components/Charts/RingChart'
 import lineChart from '@/components/Charts/LineChart.1'
 
@@ -699,21 +698,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.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: gtz
+ * @LastEditTime: 2021-12-17 17:16:10
+ * @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: #403ef7">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/nitrogen.vue

@@ -2,58 +2,64 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:17:20
+ * @LastEditTime: 2021-12-16 20:53:52
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="22">
         <el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col>
-              <h3>氮气流量分析</h3>
-            </el-col>
-          </el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col style="width: 400px">
-              <el-card>
-                <p style="font-size: 18px">氮气流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
-                <p>昨日氮气流量(立方米)：1145</p>
-              </el-card>
-            </el-col>
-          </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: #f74d3e">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-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+        <el-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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="氮气使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
           </el-col>
-        </el-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -714,21 +720,17 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
 }
 </style>

src/views/energy/process-temperature.vue

@@ -2,43 +2,42 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:18:17
+ * @LastEditTime: 2021-12-16 20:15:11
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
-        <el-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+      <el-col :span="22">
+        <el-card class="base-container" style="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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -699,21 +698,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.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: gtz
+ * @LastEditTime: 2021-12-17 17:16:51
+ * @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: #1eece3">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/sulfur-dioxide.vue

@@ -2,58 +2,64 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:17:03
+ * @LastEditTime: 2021-12-16 20:14:17
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
+      <el-col :span="22">
         <el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col>
-              <h3>二氧化硫流量分析</h3>
-            </el-col>
-          </el-row>
-          <el-row style="margin: 20px 0" :gutter="20">
-            <el-col style="width: 400px">
-              <el-card>
-                <p style="font-size: 18px">二氧化硫流量（立方米）：<strong style="font-size: 22px">123,109</strong></p>
-                <p>昨日二氧化硫流量(立方米)：1145</p>
-              </el-card>
-            </el-col>
-          </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: #f73e98">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-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+        <el-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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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%" :showId="showId" :title="eleType" :titleHeader="yaoluName" titleFooter="二氧化硫使用量（㎡）" :dataList="dataList" :lastDataList="lastDataList" :chartType="chartType" />
           </el-col>
-        </el-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -714,21 +720,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.chart-container {
+  .el-tabs__item{
+    height: 120px;
+  }
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    line-height: 120px;
+  }
 }
 </style>

src/views/energy/sump-temperature.vue

@@ -2,43 +2,42 @@
  * @Author: zwq
  * @Date: 2021-11-19 10:55:33
  * @LastEditors: gtz
- * @LastEditTime: 2021-12-01 09:18:38
+ * @LastEditTime: 2021-12-17 18:20:17
  * @Description:
 -->
 <template>
   <div class="chart-container">
     <el-row>
-      <el-col :span="4">
+      <el-col :span="2">
         <div class="kiln-electric-treebox">
           <el-tree :data="yaoluList" @node-click="handleNode" />
         </div>
       </el-col>
-      <el-col :span="20">
-        <el-row style="margin: 20px 0" :gutter="20">
-          <el-col style="margin: 20px 0">
-            <el-checkbox-group :min="1" v-model="chartType" style="float: left">
+      <el-col :span="22">
+        <el-card class="base-container" style="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-row style="float: right">
-              <el-radio-group v-model="eleType" @change="changeEleType">
-                <el-radio-button label="日"></el-radio-button>
-                <el-radio-button label="周"></el-radio-button>
-                <el-radio-button label="月"></el-radio-button>
-                <el-radio-button label="年"></el-radio-button>
-              </el-radio-group>
-              <el-date-picker
-                v-model="date"
-                :type="datePickerType[eleType].type"
-                :format="datePickerType[eleType].format"
-                :placeholder="'选择' + datePickerType[eleType].placeholder"
-              />
-            </el-row>
-          </el-col>
+            <el-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-row>
+        </el-card>
       </el-col>
     </el-row>
   </div>
@@ -699,21 +698,18 @@ export default {
 .chart-container {
   position: relative;
   width: 100%;
-  min-height: calc(100vh - 124px);
-  .kiln-electric-treebox {
-    width: 100%;
-    border: 1px solid #eeeeee;
-    border-radius: 5px;
-    padding: 10px;
-  }
+  min-height: calc(100vh - 138px);
+  
 }
 </style>
 
 <style lang="scss">
-.el-tabs__item{
-  height: 120px;
-}
-.el-tabs__nav-next, .el-tabs__nav-prev {
-  line-height: 120px;
+.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-content.vue

@@ -59,7 +59,10 @@
         set (val) { this.$store.commit('common/updateMenuActiveName', val) }
       },
       mainTabs: {
-        get () { return this.$store.state.common.mainTabs },
+        get () {
+          console.log(this.$store.state.common.mainTabs)
+          return this.$store.state.common.mainTabs
+        },
         set (val) { this.$store.commit('common/updateMainTabs', val) }
       },
       mainTabsActiveName: {

src/views/main-navbar.vue

@@ -2,7 +2,7 @@
   <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
     <div class="site-navbar__header">
       <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
-        <a class="site-navbar__brand-lg" href="javascript:;">求精WMS调度管理系统</a>
+        <p class="site-navbar__brand-lg">求精WMS调度管理系统</p>
         <a class="site-navbar__brand-mini" href="javascript:;">求精</a>
       </h1>
     </div>
@@ -11,7 +11,7 @@
         class="site-navbar__menu"
         mode="horizontal">
         <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
-          <icon-svg name="zhedie"></icon-svg>
+          <icon-svg name="侧边收纳" class="site-navbar-icon"></icon-svg>
         </el-menu-item>
       </el-menu>
       <el-menu
@@ -19,8 +19,8 @@
         mode="horizontal">
         <el-menu-item index="1" @click="$router.push({ name: 'theme' })">
           <template slot="title">
-            <el-badge value="new">
-              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
+            <el-badge>
+              <icon-svg name="shezhi" class="site-navbar-icon"></icon-svg>
             </el-badge>
           </template>
         </el-menu-item>

src/views/main-sidebar.vue

@@ -11,13 +11,20 @@
           <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">首页</span>
         </el-menu-item>
-        <el-submenu index="home">
+        <el-submenu index="task">
           <template slot="title">
             <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title"
               >任务管理</span
             >
           </template>
+          <el-menu-item
+            index="orderProcess"
+            @click="$router.push({ name: 'orderAuto' })"
+          >
+            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">自动任务</span>
+          </el-menu-item>
           <el-menu-item
             index="orderProcess"
             @click="$router.push({ name: 'orderProcess' })"
@@ -124,7 +131,7 @@
             <span slot="title">当前执行任务</span>
           </el-menu-item>
         </el-submenu>
-        <el-submenu index="energy">
+        <!-- <el-submenu index="energy">
           <template slot="title">
             <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>
             <span>能源管理</span>
@@ -161,6 +168,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 +216,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
@@ -244,7 +285,7 @@
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">窑炉速度参数</span>
           </el-menu-item>
-        </el-submenu>
+        </el-submenu> -->
         <el-submenu index="report">
           <template slot="title">
             <icon-svg name="config" class="site-sidebar__menu-icon"></icon-svg>

src/views/main.vue

@@ -2,7 +2,7 @@
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
  * @LastEditors: zwq
- * @LastEditTime: 2021-12-06 16:47:31
+ * @LastEditTime: 2022-03-18 14:48:46
  * @Description:
 -->
 <template>
@@ -39,7 +39,11 @@
     },
     data () {
       return {
-        loading: false
+        loading: false,
+        websock: '',
+        url: '',
+        id: 1,
+        heart: null
       }
     },
     components: {
@@ -65,11 +69,16 @@
       }
     },
     created () {
+      this.url = window.SITE_CONFIG.baseWsUrl
       this.getUserInfo()
+      this.initWebSocket()
     },
     mounted () {
       this.resetDocumentClientHeight()
     },
+    destroyed () {
+      clearInterval(this.heart)
+    },
     methods: {
       // 重置窗口可视高度
       resetDocumentClientHeight () {
@@ -91,6 +100,38 @@
         //     this.userName = data.user.username
         //   }
         // })
+      },
+      initWebSocket () { // 初始化weosocket
+        const path = `${this.url}qj/websocket/${this.id}`
+        this.websock = new WebSocket(path)
+        this.websock.onmessage = this.websocketonmessage
+        this.websock.onopen = this.websocketonopen
+        this.websock.onerror = this.websocketonerror
+        this.websock.onclose = this.websocketclose
+      },
+      websocketonopen () { // 连接建立之后建立心跳
+        this.heartFun()
+      },
+      heartFun () { // 心跳函数
+        this.heart = setInterval(() => {
+          this.websocketsend('1')
+        }, 30000)
+      },
+      websocketonerror () { // 连接建立失败重连
+        this.initWebSocket()
+      },
+      websocketonmessage (e) { // 数据接收
+        this.$notify.info({
+          title: '提示',
+          message: e.data,
+          duration: 15000
+        })
+      },
+      websocketsend (msg) { // 数据发送
+        this.websock.send(msg)
+      },
+      websocketclose (e) {  // 关闭
+        console.log('断开连接', e)
       }
     }
   }

src/views/order/components/current-order-task.vue

@@ -44,6 +44,9 @@
         prop="taskType"
         label="任务类型"
       >
+        <template slot-scope="scope">
+          {{ scope.row.taskType >= 0 ? taskTypeList[scope.row.taskType] : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="remark"
@@ -102,7 +105,11 @@ export default {
       pageIndex: 1,
       pageSize: 10,
       totalPage: 0,
-      dataListLoading: false
+      dataListLoading: false,
+      taskTypeList: {
+        0: '初始加工',
+        1: '复加工'
+      }
     }
   },
   activated () {

src/views/order/current-task.vue

@@ -37,6 +37,9 @@
       <el-table-column
         prop="createTime"
         label="发起时间">
+        <template slot-scope="scope">
+          {{ scope.row.createTime ? moment(scope.row.createTime).format('YYYY-MM-D HH:mm:ss') : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="taskSource"
@@ -55,7 +58,7 @@
         <template slot-scope="scope">
           <span>{{
             scope.row.taskType === 0
-              ? "缓存到窑炉加工"
+              ? "炉子加工"
               : scope.row.taskType === 1
               ? "出炉到缓存"
               : scope.row.taskType === 2
@@ -83,7 +86,7 @@
         width="80"
         label="详情">
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="Detail(scope.row.id)">详情</el-button>
+          <el-button v-if="scope.row.status === 0" type="text" size="small" @click="Detail(scope.row.id)">详情</el-button>
         </template>
       </el-table-column>
       <el-table-column
@@ -98,7 +101,7 @@
               <icon-svg class="iconClass" name="维护开始"></icon-svg>
             </el-tooltip>
           </el-button>
-          <el-button type="text" style="color:red" size="small" @click="deleteHandle(scope.row.sheetNo)">
+          <el-button type="text" v-if="!(scope.row.isAuto)" style="color:red" size="small" @click="deleteHandle(scope.row.sheetNo)">
             <el-tooltip class="item" effect="dark" content="删除" placement="top">
               <icon-svg class="iconClass" name="删除"></icon-svg>
             </el-tooltip>
@@ -119,6 +122,7 @@
 </template>
 
 <script>
+  import moment from 'moment'
   // 任务状态列表
   const statusList = {
     0: '等待执行',
@@ -138,7 +142,8 @@
         pageSize: 10,
         totalPage: 0,
         dataListLoading: false,
-        statusList
+        statusList,
+        moment
       }
     },
     activated () {
@@ -186,7 +191,25 @@
       },
       // 执行
       addOrUpdateHandle (id) {
-        console.log('执行')
+        this.$http({
+          url: this.$http.adornUrl('/currTask/runTask'),
+          method: 'post',
+          data: this.$http.adornData({ id })
+            // params: this.$http.adornParams({ id }, false)
+        }).then(({data}) => {
+          if (data && data.code === 0) {
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.getDataList()
+              }
+            })
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
       },
       // 删除
       deleteHandle (sheetNo) {

src/views/report/car-alarm.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="mod-log">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+  <div class="mod-config">
+    <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"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in carList"
+            :key="item.id"
+            :label="item.vehicleName"
+            :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,27 @@
         width="50">
       </el-table-column>
       <el-table-column
-        prop="username"
-        header-align="center"
-        align="center"
+        prop="equipmentName"
         label="车辆名称">
       </el-table-column>
       <el-table-column
-        prop="operation"
-        header-align="center"
-        align="center"
+        prop="taskCode"
+        label="任务编码"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
         label="报警时间">
+        <template slot-scope="scope">
+          {{ scope.row.createTime ? moment(scope.row.createTime).format('YYYY-MM-D HH:mm:ss') : '' }}
+        </template>
       </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"
-        header-align="center"
-        align="center"
+        prop="alarmInfo"
         label="报警内容">
       </el-table-column>
     </el-table>
@@ -77,12 +78,13 @@
 </template>
 
 <script>
+  import moment from 'moment'
+
   export default {
     data () {
       return {
         dataForm: {
-          key: '',
-          time: []
+          equipmentId: null
         },
         dataList: [],
         options: [],
@@ -90,28 +92,50 @@
         pageSize: 10,
         totalPage: 0,
         dataListLoading: false,
-        selectionDataList: []
+        selectionDataList: [],
+        carList: [],
+        moment
       }
     },
     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'),
-          method: 'get',
-          params: this.$http.adornParams({
-            'page': this.pageIndex,
-            'limit': this.pageSize,
-            'key': this.dataForm.key
+          url: this.$http.adornUrl('/alarmInfo/page'),
+          method: 'post',
+          data: this.$http.adornData({
+            current: this.pageIndex,
+            size: this.pageSize,
+            type: 1,
+            equipmentId: this.dataForm.equipmentId
           })
         }).then(({data}) => {
           if (data && data.code === 0) {
-            this.dataList = data.page.list
-            this.totalPage = data.page.totalCount
+            this.dataList = data.data.records
+            this.totalPage = data.data.total
           } else {
             this.dataList = []
             this.totalPage = 0

src/views/report/components/task-ele.vue

@@ -0,0 +1,143 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-05 16:06:02
+ * @LastEditors: gtz
+ * @LastEditTime: 2022-03-05 17:59:47
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\views\report\components\task-ele.vue
+-->
+<template>
+  <div class="chart-container">
+    <el-row :gutter="20">
+      <el-col :span="12" v-for="(item, index) in dataList.ele" v-if="item.length" :key="'ele' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeEle[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'ele' + index" :dataList="item" :chartType="chartTypeEle[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-for="(item, index) in dataList.gas" v-if="item.length" :key="'gas' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeGas[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'gas' + index" :dataList="item" :chartType="chartTypeGas[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-for="(item, index) in dataList.rot" v-if="item.length" :key="'rot' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeRot[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'rot' + index" :dataList="item" :chartType="chartTypeRot[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12" v-for="(item, index) in dataList.temp" v-if="item.length" :key="'temp' + index">
+        <el-card class="base-container" style="height: 444px; position: relative; margin: 10px 0">
+          <el-row style="position: absolute; z-index: 10; right: 20px">
+            <el-checkbox-group size="small" :min="1" v-model="chartTypeTemp[index]" style="float: left">
+              <el-checkbox-button label="折线" />
+              <el-checkbox-button label="柱状" />
+            </el-checkbox-group>
+          </el-row>
+          <el-row style="height: 400px">
+            <chart height="100%" width="100%" :title="item[0].name" :id="'temp' + index" :dataList="item" :chartType="chartTypeTemp[index]" />
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import Chart from '@/components/Charts/MixChart.new'
+import lineChart from '@/components/Charts/LineChart.new'
+
+export default {
+  name: 'electric',
+  components: { Chart, lineChart },
+  data () {
+    return {
+      dataList: {
+        ele: [],
+        gas: [],
+        rot: [],
+        temp: []
+      },
+      chartTypeEle: [],
+      chartTypeGas: [],
+      chartTypeRot: [],
+      chartTypeTemp: [],
+      showId: 0
+    }
+  },
+  activated () {
+    this.getEleList()
+  },
+  mounted () {},
+  methods: {
+    // 获取能源信息
+    getEleList () {
+      this.$http({
+        url: this.$http.adornUrl('/electric/energyList'),
+        method: 'post',
+        data: this.$http.adornData({
+          'taskId': this.$route.query.taskId
+        })
+      }).then(({data}) => {
+        if (data.code === 0 && data.data) {
+          console.log(JSON.parse(data.data))
+          this.dataList = JSON.parse(data.data)
+          this.dataList.ele.map(item => {
+            this.chartTypeEle.push(['柱状'])
+          })
+          this.dataList.gas.map(item => {
+            this.chartTypeGas.push(['柱状'])
+          })
+          this.dataList.rot.map(item => {
+            this.chartTypeRot.push(['柱状'])
+          })
+          this.dataList.temp.map(item => {
+            this.chartTypeTemp.push(['柱状'])
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style 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/report/kiln-alarm.vue

@@ -1,23 +1,20 @@
 <template>
-  <div class="mod-log">
-    <el-form
-      :inline="true"
-      :model="dataForm"
-      @keyup.enter.native="getDataList()"
-    >
+  <div class="mod-config">
+    <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"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
+            v-for="item in kilnList"
+            :key="item.id"
+            :label="item.kilnName"
+            :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,30 @@
       >
       </el-table-column>
       <el-table-column
-        prop="username"
-        header-align="center"
-        align="center"
+        prop="equipmentName"
         label="窑炉名称"
       >
       </el-table-column>
       <el-table-column
-        prop="operation"
-        header-align="center"
-        align="center"
+        prop="taskCode"
+        label="任务编码"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
         label="报警时间"
       >
+        <template slot-scope="scope">
+          {{ scope.row.createTime ? moment(scope.row.createTime).format('YYYY-MM-D HH:mm:ss') : '' }}
+        </template>
       </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"
-        header-align="center"
-        align="center"
+        prop="alarmInfo"
         label="报警内容"
       >
       </el-table-column>
@@ -88,12 +86,13 @@
 </template>
 
 <script>
+import moment from 'moment'
+
 export default {
   data () {
     return {
       dataForm: {
-        key: '',
-        time: []
+        equipmentId: null
       },
       dataList: [],
       options: [],
@@ -101,28 +100,50 @@ export default {
       pageSize: 10,
       totalPage: 0,
       dataListLoading: false,
-      selectionDataList: []
+      selectionDataList: [],
+      kilnList: [],
+      moment
     }
   },
   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'),
-        method: 'get',
-        params: this.$http.adornParams({
-          page: this.pageIndex,
-          limit: this.pageSize,
-          key: this.dataForm.key
+        url: this.$http.adornUrl('/alarmInfo/page'),
+        method: 'post',
+        data: this.$http.adornData({
+          current: this.pageIndex,
+          size: this.pageSize,
+          type: 0,
+          equipmentId: this.dataForm.equipmentId
         })
       }).then(({ data }) => {
         if (data && data.code === 0) {
-          this.dataList = data.page.list
-          this.totalPage = data.page.totalCount
+          this.dataList = data.data.records
+          this.totalPage = data.data.total
         } else {
           this.dataList = []
           this.totalPage = 0

src/views/report/order-history.vue

@@ -43,6 +43,9 @@
       <el-table-column
         prop="createTime"
         label="获取时间">
+        <template slot-scope="scope">
+          {{ scope.row.createTime ? moment(scope.row.createTime).format('YYYY-MM-D HH:mm:ss') : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="idenCardNum"
@@ -132,6 +135,7 @@
 </template>
 
 <script>
+  import moment from 'moment'
   import orderDetail from './components/order-history-detail'
   // 任务状态列表
   const statusList = {
@@ -163,7 +167,8 @@
         dataListLoading: false,
         orderDetailVisible: false,
         statusList,
-        orderVoidList
+        orderVoidList,
+        moment
       }
     },
     components: {

src/views/report/task-history.vue

@@ -62,6 +62,9 @@
         prop="createTime"
         label="发起时间"
       >
+        <template slot-scope="scope">
+          {{ scope.row.createTime ? moment(scope.row.createTime).format('YYYY-MM-D HH:mm:ss') : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="taskSource"
@@ -83,7 +86,7 @@
         <template slot-scope="scope">
           <span>{{
             scope.row.taskType === 0
-              ? "缓存到窑炉加工"
+              ? "炉子加工"
               : scope.row.taskType === 1
               ? "出炉到缓存"
               : scope.row.taskType === 2
@@ -107,6 +110,16 @@
         label="车辆名称"
       >
       </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="80"
+        label="能耗情况">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="eleHandle(scope.row.id)">详情</el-button>
+        </template>
+      </el-table-column>
       <el-table-column
         fixed="right"
         header-align="center"
@@ -135,6 +148,7 @@
 </template>
 
 <script>
+import moment from 'moment'
 // 任务状态列表
 const statusList = {
   0: '等待执行',
@@ -157,7 +171,8 @@ export default {
       totalPage: 0,
       dataListLoading: false,
       orderDetailVisible: false,
-      statusList
+      statusList,
+      moment
     }
   },
   activated () {
@@ -208,6 +223,12 @@ export default {
     },
     LocationBtn (id) {
       this.$router.push({ name: 'report-task-history-detail', query: { id } })
+    },
+    eleHandle (taskId) {
+      this.$router.push({
+        name: 'report-task-ele',
+        query: { taskId }
+      })
     }
   }
 }

static/config/index-prod.js

@@ -14,6 +14,8 @@
 
   // api接口请求地址
   window.SITE_CONFIG['baseUrl'] = '/api';
+  // WS请求地址
+  window.SITE_CONFIG['baseWsUrl'] = 'ws://192.168.6.66:8080/'
 
   // cdn地址 = 域名 + 版本号
   window.SITE_CONFIG['domain']  = './'; // 域名

static/config/index-qa.js

@@ -6,6 +6,8 @@
 
   // api接口请求地址
   window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';
+  // WS请求地址
+  window.SITE_CONFIG['baseWsUrl'] = 'ws://192.168.1.7:8080/'
 
   // cdn地址 = 域名 + 版本号
   window.SITE_CONFIG['domain']  = './'; // 域名

static/config/index-uat.js

@@ -6,6 +6,8 @@
 
   // api接口请求地址
   window.SITE_CONFIG['baseUrl'] = 'http://localhost:8080/renren-fast';
+  // WS请求地址
+  window.SITE_CONFIG['baseWsUrl'] = 'ws://192.168.1.7:8080/'
 
   // cdn地址 = 域名 + 版本号
   window.SITE_CONFIG['domain']  = './'; // 域名

static/config/index.js

@@ -12,7 +12,9 @@
   window.SITE_CONFIG = {}
 
   // api接口请求地址
-  window.SITE_CONFIG['baseUrl'] = 'http://192.168.0.134:8080/'
+  window.SITE_CONFIG['baseUrl'] = 'http://192.168.1.7:8080/'
+  // WS请求地址
+  window.SITE_CONFIG['baseWsUrl'] = 'ws://192.168.1.7:8080/'
 
   // cdn地址 = 域名 + 版本号
   window.SITE_CONFIG['domain'] = './' // 域名