更新

Reviewed-on: #23

config/index.js

@@ -1,8 +1,8 @@
 /*
  * @Author: gtz
  * @Date: 2021-11-19 10:10:51
- * @LastEditors: gtz
- * @LastEditTime: 2021-12-15 17:19:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-06 15:07:51
  * @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.18:8080',
         changeOrigin: true,
         pathRewrite: {
           '^/proxyApi': '/api'

index.html

@@ -18,7 +18,7 @@
     <script>document.write('<script src="./config/index.js?t=' + new Date().getTime() + '"><\/script>');</script>
   <% }else { %>
     <!-- 开发环境 -->
-    <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico">
+    <link rel="shortcut icon" type="image/x-icon" href="./static/img/top.png">
     <script src="./static/config/index.js"></script>
     <script src="./static/plugins/mock-1.0.0-beta3/mock-min.js"></script>
     <script src="./static/plugins/ueditor-1.4.3.3/ueditor.config.js"></script>

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

@@ -122,9 +122,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 +162,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 +192,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 +221,7 @@ img {
   }
   &__body {
     position: relative;
-    margin-left: 230px;
+    margin-left: 336px;
     padding-right: 15px;
     background-color: #fff;
   }
@@ -228,8 +239,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 +260,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 +280,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 +326,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 +337,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 +354,7 @@ img {
     > .el-tabs__content {
       > .site-tabs__tools {
         position: fixed;
-        top: 50px;
+        top: 64px;
         right: 0;
         z-index: 931;
         height: 40px;
@@ -365,5 +381,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,330 @@
+<template>
+  <div :id="id" :class="className" :style="{ height: height, width: width }" />
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+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.dataList.forEach(item => {
+              this.series.push({
+                name: item[0].code,
+                type: 'line',
+                symbolSize: 5,
+                symbol: 'circle',
+                data: item.map(item1 => {
+                  return item1
+                })
+              })
+            })
+          }
+          this.initChart()
+        }
+      },
+      deep: true
+    },
+    showId: {
+      handler () {
+        this.initChart()
+      }
+    },
+    chartType: {
+      handler (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.dataList.forEach(item => {
+              this.series.push({
+                name: item[0].code,
+                type: 'line',
+                symbolSize: 5,
+                symbol: 'circle',
+                data: item.map(item1 => {
+                  return item1
+                })
+              })
+            })
+          }
+          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.dataList.forEach(item => {
+        this.series.push({
+          name: item[0].code,
+          type: 'line',
+          symbolSize: 5,
+          symbol: 'circle',
+          data: item.map(item1 => {
+            return item1
+          })
+        })
+      })
+    }
+    this.initChart()
+  },
+  methods: {
+    initChart () {
+      if (this.chart) {
+        this.chart.dispose()
+      }
+      this.chart = echarts.init(document.getElementById(this.id))
+      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',
+          confine: true,
+          axisPointer: {
+            textStyle: {
+              color: '#fff'
+            }
+          },
+          formatter: function (params) {
+            let info = params[0].dataIndex + 1 + '<br/>'
+            params.forEach(item => {
+              info += item.marker + item.data.code + '<br/>' + '值: ' + item.value + '<br/>' + '时间: ' + item.data.time.split('T')[0] + ' ' + item.data.time.split('T')[1] + '<br/>'
+            })
+            return info
+          }
+        },
+        grid: {
+          left: '5%',
+          right: '5%',
+          borderWidth: 0,
+          top: 100,
+          bottom: 100,
+          textStyle: {
+            color: '#fff'
+          }
+        },
+        legend: {
+          x: 20,
+          top: 55,
+          textStyle: {
+            color: '#90979c'
+          }
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            axisLine: {
+              lineStyle: {
+                color: '#90979c'
+              }
+            },
+            splitLine: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            splitArea: {
+              show: false
+            },
+            axisLabel: {
+              show: false
+            }
+          }
+        ],
+        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: 20,
+            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: 20
+          }
+        ],
+        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,9 +344,9 @@ export default {
             show: true,
             height: 30,
             xAxisIndex: [0],
-            bottom: 30,
+            bottom: 10,
             start: 0,
-            end: 100,
+            end: 10,
             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: {
@@ -411,8 +361,8 @@ export default {
             type: 'inside',
             show: true,
             height: 15,
-            start: 1,
-            end: 35
+            start: 0,
+            end: 10
           }
         ],
         series: this.series

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)">
@@ -15,4 +15,4 @@
             </g>
         </g>
     </g>
-</svg>
+</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>编组 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

@@ -1,8 +1,8 @@
 /*
  * @Author: zwq
  * @Date: 2021-11-15 08:20:28
- * @LastEditors: gtz
- * @LastEditTime: 2021-12-09 16:23:55
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-11-23 09:42:21
  * @Description:
  */
 /**
@@ -23,7 +23,8 @@ const _import = require('./import-' + process.env.NODE_ENV)
 // 全局路由(无需嵌套上左右整体布局)
 const globalRoutes = [
   { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
-  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
+  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
+  { path: '/board', component: _import('common/board'), name: 'board', meta: { title: '车间生产看板', isTab: false } }
 ]
 
 // 主入口路由(需嵌套上左右整体布局)
@@ -39,7 +40,9 @@ const mainRoutes = {
     // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
     // 提示: 如需要通过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: '/Problem', component: _import('common/Problem'), name: 'Problem', 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 } },
@@ -53,24 +56,32 @@ const mainRoutes = {
     { path: '/basic-alarmInfo', component: _import('basic/alarmInfo'), name: 'basic-alarmInfo', meta: { title: '报警基础信息', isTab: true } },
     { path: '/order-current-order', component: _import('order/current-order'), name: 'order-current-order', meta: { title: '当前订单列表', isTab: true } },
     { path: '/order-current-order-task', component: _import('order/components/current-order-task'), name: 'order-current-order-task', meta: { title: '当前订单任务详情', isTab: true } },
-    { path: '/order-current-task', component: _import('order/current-task'), name: 'order-current-task', meta: { title: '当前执行任务', isTab: true } },
+    { path: '/order-current-task', component: _import('order/current-task'), name: 'order-current-task', meta: { title: '当前任务列表', isTab: true } },
+    { path: '/order-current-task-new', component: _import('order/current-task-new'), name: 'order-current-task-new', meta: { title: '任务列表', isTab: true } },
     { path: '/order-current-task-detail', component: _import('order/components/current-task-detail'), name: 'order-current-task-detail', meta: { title: '当前执行任务详情', isTab: true } },
-    { path: '/report-kiln-alarm', component: _import('report/kiln-alarm'), name: 'report-kiln-alarm', meta: { title: '窑炉报警', isTab: true } },
+    { path: '/report-kiln-alarm', component: _import('report/kiln-alarm'), name: 'report-kiln-alarm', meta: { title: '工业炉报警', isTab: true } },
     { path: '/report-car-alarm', component: _import('report/car-alarm'), name: 'report-car-alarm', meta: { title: '车辆运行报警', isTab: true } },
     { path: '/report-order-history', component: _import('report/order-history'), name: 'report-order-history', meta: { title: '订单历史列表', isTab: true } },
+    { path: '/report-APMS-table', component: _import('report/APMS-table'), name: 'report-APMS-table', meta: { title: 'APMS报工', isTab: true } },
+    { path: '/report-APMS-work', component: _import('report/APMS-work'), name: 'report-APMS-work', meta: { title: 'APMS未出单报工', isTab: true } },
     { 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/utils/validate.js

@@ -1,3 +1,10 @@
+/*
+ * @Author: zwq
+ * @Date: 2021-11-15 08:20:28
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-11-30 15:44:44
+ * @Description:
+ */
 /**
  * 邮箱
  * @param {*} s
@@ -29,3 +36,11 @@ export function isPhone (s) {
 export function isURL (s) {
   return /^http[s]?:\/\/.*/.test(s)
 }
+
+/**
+ * 配炉号
+ * @param {*} s
+ */
+export function isStoveCode (s) {
+  return /^[A-Z]{3}\d{1}\W{1}\d{2}\W{1}\d{10}$/.test(s)
+}

src/views/basic/carInfo.vue

@@ -1,6 +1,12 @@
 <template>
   <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-button size="small" type="primary" style="float:left" @click="open()">
+          <icon-svg class="iconClass" name="system"></icon-svg>
+          重置
+        </el-button>
+      </el-form-item>
       <el-form-item>
         <!-- <el-select size="small" v-model="dataForm.paramKey" filterable placeholder="名称">
           <el-option
@@ -51,6 +57,18 @@
         prop="code"
         label="编码">
       </el-table-column>
+      <el-table-column
+        prop="status"
+        label="状态"
+      >
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.status === 0
+              ? "空闲"
+              : "占用"
+          }}</span>
+        </template>
+      </el-table-column>
       <el-table-column
         prop="vehicleAlias"
         label="缩写">
@@ -120,6 +138,34 @@
       this.getDataList()
     },
     methods: {
+      open () {
+        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()
+                }
+              })
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消操作'
+          })
+        })
+      },
       // 获取数据列表
       getDataList () {
         this.dataListLoading = true

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/Problem-add.vue

@@ -0,0 +1,96 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-08-11 16:51:45
+ * @Description:
+-->
+<template>
+  <el-dialog title="新增" :visible.sync="visible">
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmit()"
+      label-width="80px"
+    >
+      <el-form-item label="问题" prop="question">
+        <el-input
+          type="textarea"
+          :rows="3"
+          v-model="dataForm.question"
+          placeholder="问题"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="解答" prop="answer">
+        <el-input
+          type="textarea"
+          :rows="5"
+          v-model="dataForm.answer"
+          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: {
+        question: '',
+        answer: ''
+      },
+      dataRule: {
+        question: [
+          { required: true, message: '问题不能为空', trigger: 'blur' }
+        ],
+        answer: [{ required: true, message: '解答不能为空', trigger: 'blur' }]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+      })
+    },
+    // 表单提交
+    dataFormSubmit () {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.$http({
+            url: this.$http.adornUrl('/questionAnswer/add'),
+            method: 'post',
+            data: this.$http.adornData({
+              question: this.dataForm.question,
+              answer: this.dataForm.answer
+            })
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/views/common/Problem.vue

@@ -0,0 +1,106 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-08-11 16:22:07
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-08-11 16:48:39
+ * @Description:
+-->
+<template>
+  <div class="mod-config">
+    <el-form
+      :inline="true"
+      style="display: flex; align-items: center; justify-content: right;"
+      @keyup.enter.native="getDataList()"
+    >
+      <el-form-item>
+        <el-input
+          size="small"
+          v-model="key"
+          placeholder="搜索问题"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="small" @click="getDataList()">
+          <icon-svg class="iconClass" name="sousuo"></icon-svg>
+          查询
+        </el-button>
+        <el-button size="small" type="primary" @click="addOrUpdateHandle()">
+          <icon-svg class="iconClass" name="新建"></icon-svg>
+          新增
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-collapse v-model="activeNames">
+      <el-collapse-item
+        v-for="(item, index) in problemArr"
+        :key="index"
+        :name="index"
+      >
+        <template slot="title">
+          <span style="color:#409EFF">
+            {{ item.question }}<i class="el-icon-question"></i>
+          </span>
+        </template>
+        <div>
+          {{ item.answer }}
+        </div>
+      </el-collapse-item>
+    </el-collapse>
+    <!-- 弹窗, 新增 / 修改 -->
+    <problem-add
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></problem-add>
+  </div>
+</template>
+
+<script>
+import ProblemAdd from './Problem-add'
+export default {
+  data () {
+    return {
+      key: '',
+      addOrUpdateVisible: false,
+      activeNames: [],
+      problemArr: []
+    }
+  },
+  components: {
+    ProblemAdd
+  },
+  created () {
+    this.getDataList()
+  },
+  methods: {
+    getDataList () {
+      this.$http({
+        url: this.$http.adornUrl('/questionAnswer/page'),
+        method: 'post',
+        data: this.$http.adornData({
+          current: 1,
+          size: 200,
+          key: this.key
+          // paramKey: this.dataForm.paramKey
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.problemArr = data.data.records
+        } else {
+          this.problemArr = []
+        }
+      })
+    },
+    // 新增
+    addOrUpdateHandle () {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init()
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

src/views/common/add-process.vue

@@ -13,7 +13,7 @@
         <el-button style="margin-left:10px" type="primary" @click="getPoint(0)">{{startBtnName}}</el-button>
       </el-form-item>
       <el-form-item style="margin-left:2%">
-        窑炉 :
+        工业炉 :
         <el-button style="margin-left:10px" type="primary" @click="getPoint(1)">{{kilnBtnName}}</el-button>
       </el-form-item>
       <el-form-item style="margin-left:10%">
@@ -115,7 +115,7 @@
     data () {
       return {
         startBtnName: '选择起点',
-        kilnBtnName: '选择窑炉',
+        kilnBtnName: '选择工业炉',
         dataList: [],
         processType: 1,
         pageIndex: 1,
@@ -198,9 +198,9 @@
             message: '请选择任务起点',
             type: 'warning'
           })
-        } else if (this.kilnBtnName === '选择窑炉') {
+        } else if (this.kilnBtnName === '选择工业炉') {
           this.$message({
-            message: '请选择窑炉',
+            message: '请选择工业炉',
             type: 'warning'
           })
         }

src/views/common/board-part-table.vue

@@ -0,0 +1,52 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-05 16:11:42
+ * @Description:
+-->
+<template>
+  <div class="main-body">
+    <el-table
+      size='mini'
+      :data="tableData"
+      :header-cell-style="{background:'#082c34',color:'#acb9be',padding:'0px'}"
+      :cell-style="{background:'#04222d',color:'#acb9be',padding:'5px 0px'}"
+      style="width: 100%"
+    >
+      <el-table-column type="index" label="序号" width="30" align="center"> </el-table-column>
+      <el-table-column prop="customer" label="客户名称" align="center"> </el-table-column>
+      <el-table-column prop="orderNo" label="订单编号" align="center"> </el-table-column>
+      <el-table-column prop="quantity" label="数量" width="50" align="center"> </el-table-column>
+      <el-table-column prop="productName" label="产品名称" align="center"> </el-table-column>
+      <el-table-column prop="weight" label="重量" width="50" align="center"> </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'board-part-table',
+  components: {},
+  props: {
+    tableData: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {}
+  },
+  created () {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+.main-body{
+  margin: 5px;
+}
+.main-body /deep/ .cell{
+  padding: 0px;
+}
+</style>

src/views/common/board-part.vue

@@ -0,0 +1,150 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-12 11:31:05
+ * @Description:
+-->
+<template>
+  <div class="container">
+    <div class="title">
+      <div class="tipDiv"></div>
+      加工单信息
+    </div>
+    <div class="main-body">
+      <div class="main-header">
+        <el-row :gutter="8">
+          <el-col :span="8">
+            <div class="front">
+              <img
+                :src="cdnUrl + '/static/img/lu/'+imgUrl+'.png'"
+                style="display:block;margin:auto"
+              />炉号
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <el-row>
+              <div class="mid top-info">
+                {{wbData.taskCode}}
+                <div style="color: #fff;margin: 5px 0;">加工单编号</div>
+              </div>
+            </el-row>
+            <el-row>
+              <div class="mid bottom-info">
+                {{wbData.plcValue}}
+                <div style="color: #fff;margin: 5px 0;">工艺号</div>
+              </div>
+            </el-row>
+          </el-col>
+          <el-col :span="8">
+            <div class="back">
+              <el-progress
+                :percentage="wbData.completeness"
+                :stroke-width="8"
+                :show-text="false"
+              ></el-progress>
+              <div style="margin: 5px 0;">{{ wbData.remainingTime}}</div>
+                <div style="color: #fff;font-size:14px">剩余时间</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="main-table">
+      <div class="tipDiv"></div>
+      标识信息卡
+      </div>
+      <part-table :tableData="wbData.currTaskDetVoList"></part-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import partTable from './board-part-table.vue'
+export default {
+  components: {partTable},
+  props: {
+    wbData: {
+      type: Object,
+      default: () => {}
+    },
+    imgUrl: {
+      type: String,
+      default: 'BMA1'
+    }
+  },
+  data () {
+    return {
+      cdnUrl: ''
+    }
+  },
+  created () {
+    this.cdnUrl = window.SITE_CONFIG.cdnUrl
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container{
+  width: 30%;
+}
+.title {
+  color: #ffffff;
+  font-size: 22px;
+  margin: 8px 0;
+  .tipDiv {
+    border-radius: 3px;
+    width: 8px;
+    height: 22px;
+    margin-right: 20px;
+    background-color: #54fdef;
+    float: left;
+  }
+}
+.main-body{
+  background-color: #04242d;
+.main-header {
+  .front {
+    min-height: 136px;
+    border-radius: 4px;
+    padding: 6px;
+    color: #ffffff;
+    text-align: center;
+    background: linear-gradient(to bottom, #133e46 0%, #04202c 100%);
+  }
+  .mid {
+    min-height: 64px;
+    border-radius: 4px;
+    margin-bottom: 5px;
+    padding: 6px;
+    color: #48dcd1;
+    text-align: center;
+    background: linear-gradient(to bottom, #0b2c36 0%, #04202c 100%);
+  }
+  .back {
+    min-height: 136px;
+    padding: 25px 5px;
+    text-align: center;
+    font-size: 30px;
+    color: #48dcd1;
+  }
+  .back /deep/ .el-progress-bar__inner {
+    background: linear-gradient(to right, #62fbb9 0%, #fdd64a 100%);
+  }
+}
+.main-table{
+  color: #ffffff;
+  margin: 10px;
+  .tipDiv{
+    width: 8px;
+    height: 8px;
+    margin: 3px 10px 3px 0;
+    background-color: #54fdef;
+    float: left;
+  }
+}
+}
+</style>

src/views/common/board.vue

@@ -0,0 +1,103 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-03-07 15:31:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-07-08 08:36:01
+ * @Description:
+-->
+<template>
+  <div class="main-body">
+    <div class="container-title">
+      浙江求精科技车间生产看板
+    </div>
+    <div class="container-body">
+      <board v-for="(item,index) in wbData" :key="index" :wbData="item" :imgUrl="item.kilnCode"></board>
+    </div>
+  </div>
+</template>
+
+<script>
+import board from './board-part'
+export default {
+  name: 'Board',
+  components: { board },
+  data () {
+    return {
+      websock: '',
+      url: '',
+      wbData: []
+    }
+  },
+  created () {
+    this.url = window.SITE_CONFIG.wbUrl
+    this.initWebSocket()
+  },
+  destroyed () {
+    // 页面销毁时关闭ws连接
+    if (this.websock) {
+      this.websock.close() // 关闭websocket
+    }
+  },
+  methods: {
+    initWebSocket () {
+      // 初始化weosocket
+      const path = `ws://${this.url}/qj/websocket/2`
+      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 () {
+      // 连接建立之后执行send方法发送数据
+      this.websocketsend(JSON.stringify('2'))
+    },
+    websocketonerror () {
+      // 连接建立失败重连
+      this.initWebSocket()
+    },
+    websocketonmessage (e) {
+      // 数据接收
+      this.wbData = JSON.parse(e.data)
+      console.log(this.wbData)
+    },
+    websocketsend (val) {
+      // 数据发送
+      this.websock.send(val)
+    },
+    websocketclose (e) {
+      // 关闭
+      console.log('断开连接', e)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main-body {
+  min-height: 100vh;
+  width: 100%;
+  background: url(~@/assets/img/board/1.png) center no-repeat;
+  background-size: cover;
+  overflow: hidden;
+
+  .container-title {
+    width: 100%;
+    height: 80px;
+    background: url(~@/assets/img/board/2.png) no-repeat;
+    background-size: 100% 100%;
+    color: #00fff0;
+    font-size: 28px;
+    line-height: 80px;
+    text-align: center;
+  }
+
+  .container-body {
+    display: flex;
+    margin: auto;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: space-around;
+  }
+}
+</style>

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,19 +23,19 @@
         width="50">
       </el-table-column>
       <el-table-column
-        prop="id"
+        prop="idenCardNum"
         header-align="center"
         align="center"
         label="标识卡">
       </el-table-column>
       <el-table-column
-        prop="id1"
+        prop="customer"
         header-align="center"
         align="center"
         label="客户信息">
       </el-table-column>
       <el-table-column
-        prop="number"
+        prop="quantity"
         header-align="center"
         align="center"
         label="数量">
@@ -56,24 +58,27 @@
     data () {
       return {
         visible: false,
-        dataList: []
+        dataList: [],
+        formLoading: false
       }
     },
     methods: {
       init (id) {
         this.visible = true
+        this.formLoading = true
         this.$nextTick(() => {
           if (id) {
             this.$http({
-              url: this.$http.adornUrl(`/sys/config/info/${this.dataForm.id}`),
-              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,45 @@
  * @Author: zwq
  * @Date: 2021-11-15 15:17:30
  * @LastEditors: zwq
- * @LastEditTime: 2021-11-17 16:07:04
+ * @LastEditTime: 2022-07-13 09:51:46
  * @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" :span="6" v-for="count in 4" :key="count">
+          <el-card class="footer-item-box base-container" @click.native="selectPlat(count)">
+            <div class="plat" style="font-size: 24px">出库液压台{{ count }}</div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
     <ex-warehouse-info
       v-if="ExWarehouseInfoVisible"
       ref="ExWarehouseInfoRef"
@@ -59,31 +55,71 @@ export default {
   data () {
     return {
       isActive: '',
-      ExWarehouseInfoVisible: false
+      ExWarehouseInfoVisible: false,
+      dataListLoading: false,
+      warehouseList: []
     }
   },
   components: {
     ExWarehouseInfo
   },
-  created () {},
+  activated () {
+    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 +138,27 @@ 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;
+    right: 0;
+  }
 }
 .line {
   margin: 20px 0;
@@ -150,16 +168,38 @@ export default {
   border-right: 200px solid #ddd;
 }
 .enableBox {
-  background: rgb(0, 189, 16);
+  background: #EFF3FF;
 }
 .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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :span="8">
+      <el-col :span="12">
         <el-card :style="{height: boxHeight + 'px'}" class="box-card box-card-jg" shadow="hover" @click.native="$router.push({ name: 'orderProcess' })">
           <p class="box-card-header">
             <icon-svg class="iconClass" name="进工业炉加工"></icon-svg>
@@ -10,7 +10,7 @@
           <p class="box-card-footer">Processing</p>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <el-col :span="12">
         <el-card :style="{height: boxHeight + 'px'}" class="box-card box-card-ck" shadow="hover" @click.native="$router.push({ name: 'exWarehouse' })">
           <p class="box-card-header">
             <icon-svg class="iconClass" name="出库"></icon-svg>
@@ -19,7 +19,7 @@
           <p class="box-card-footer">Warehouse</p>
         </el-card>
       </el-col>
-      <el-col :span="8">
+      <!-- <el-col :span="8">
         <el-card :style="{height: boxHeight + 'px'}" class="box-card box-card-zj" shadow="hover" @click.native="$router.push({ name: 'addProcess' })">
           <p class="box-card-header">
             <icon-svg class="iconClass" name="追加加工"></icon-svg>
@@ -27,7 +27,7 @@
           </p>
           <p class="box-card-footer">Append</p>
         </el-card>
-      </el-col>
+      </el-col> -->
     </el-row>
     <el-card class="mod-log">
       <h3>当前任务列表</h3>
@@ -82,7 +82,7 @@
         </el-table-column>
         <el-table-column
           prop="kilnName"
-          label="窑炉"
+          label="工业炉"
         >
         </el-table-column>
         <el-table-column
@@ -100,7 +100,7 @@
         <template slot-scope="scope">
           <span>{{
             scope.row.taskType === 0
-              ? "缓存到窑炉加工"
+              ? "缓存到工业炉加工"
               : scope.row.taskType === 1
               ? "出炉到缓存"
               : scope.row.taskType === 2

src/views/common/login.vue

@@ -84,7 +84,6 @@
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgba(38, 50, 56, .6);
     overflow: hidden;
     &:before {
       position: fixed;
@@ -94,8 +93,8 @@
       width: 100%;
       height: 100%;
       content: "";
-      background-image: url(~@/assets/img/login_bg.jpg);
-      background-size: cover;
+      background-image: url(~@/assets/img/bg.jpeg);
+      background-size: 100% 100%;
     }
     .site-content__wrapper {
       position: absolute;

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

@@ -0,0 +1,208 @@
+<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"
+          :max="dataForm.targetQuantity"
+          @change="changes"
+          type="number"
+          placeholder="数量"
+          style="width:200px"
+        ></el-input>
+        <el-tag>数量最大值:{{dataForm.targetQuantity}}</el-tag>
+      </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"
+          type="number"
+          :max="dataForm.targetWeight"
+          @change="changeWeight"
+          placeholder="重量"
+          style="width:200px"
+        ></el-input>
+        <el-tag>重量最大值:{{dataForm.targetWeight}}</el-tag>
+      </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,
+        targetQuantity: null,
+        quantity: null,
+        unit: null,
+        targetWeight: 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: {
+    changes (value) {
+      if (/[\u4E00-\u9FA5]/g.test(value)) {
+        this.dataForm.quantity = null
+      }
+      if (value > this.dataForm.targetQuantity) {
+        this.dataForm.quantity = null
+      }
+    },
+    changeWeight (value) {
+      if (/[\u4E00-\u9FA5]/g.test(value)) {
+        this.dataForm.weight = null
+      }
+      if (value > this.dataForm.targetWeight) {
+        this.dataForm.weight = null
+      }
+    },
+    init (row, idx) {
+      this.visible = true
+      this.row = null
+      this.editIndex = null
+      this.formLoading = false
+      this.dataForm.targetQuantity = null
+      this.dataForm.targetWeight = null
+      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 }) => {
+          if (data && data.code === 0) {
+            this.dataForm = data.data
+            this.dataForm.targetQuantity = data.data.quantity - data.data.finishQuantity - data.data.waitQuantity
+            this.dataForm.targetWeight = data.data.weight - data.data.finishWeight - data.data.waitWeight
+            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 || this.editIndex === 0) {
+            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)
+            const taskList1 = taskList.reduce((all, next) => all.some((item) => item.idenCardNum === next.idenCardNum) ? all : [...all, next], [])
+            sessionStorage.setItem('autoTaskList', JSON.stringify(taskList1))
+          } 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,303 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-04 10:22:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-08-05 09:05:08
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\views\common\order-auto-submit.vue
+-->
+
+<template>
+  <el-dialog
+    title="提交任务"
+    :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="YYT001" label="液压台1"></el-option>
+            <el-option value="YYT002" label="液压台2"></el-option>
+            <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" @change="handleChange($event,0)" :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) || processDis.firstProcess">
+            <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="dataForm.autoTaskType !== 2?'第一步':'第二步'">
+        <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="YYT001" label="液压台1"></el-option>
+            <el-option value="YYT002" label="液压台2"></el-option>
+            <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" @change="handleChange($event,1)" :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) || processDis.secProcess">
+            <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="dataForm.autoTaskType !== 2?'第二步':'第三步'">
+        <el-form-item label="加工炉" prop="thirdPosition" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.thirdPosition" @change="handleChange($event,2)" :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) || processDis.thirdProcess">
+            <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" :loading="btnLoad"  @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      kilnList: {
+        type: Array,
+        default: () => []
+      },
+      processList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        visible: false,
+        btnLoad: 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' }
+          ],
+          thirdPosition: [
+            { required: true, message: '加工炉不能为空', trigger: 'blur' }
+          ],
+          thirdProcess: [
+            { required: true, message: '工艺不能为空', trigger: 'blur' }
+          ]
+        },
+        dataList: [],
+        formLoading: false,
+        editIndex: null,
+        processDis: {
+          secProcess: false,
+          thirdPosition: false,
+          thirdProcess: false
+        }
+      }
+    },
+    methods: {
+      handleChange (e, step) {
+        const sArr = ['firstProcess', 'secProcess', 'thirdProcess']
+        this.processDis[sArr[step]] = false
+        this.dataForm[sArr[step]] = null
+        this.kilnList.find(item => {
+          if (item.id === e.split(',')[0]) {
+            if (item.type === 4) {
+              this.dataForm[sArr[step]] = 1
+              this.processDis[sArr[step]] = true
+            }
+          }
+        }
+        )
+      },
+      init (list) {
+        this.dataList.splice(0, this.dataList.length)
+        this.dataList = list
+        this.btnLoad = false
+        this.processDis = {
+          secProcess: false,
+          thirdPosition: false,
+          thirdProcess: false
+        }
+        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.firstProcess,
+                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.btnLoad = true
+            this.$http({
+              url: this.$http.adornUrl(`/currTask/createAutoTask`),
+              method: 'post',
+              data: this.$http.adornData(requestData)
+            }).then(({data}) => {
+              if (data && data.code === 0) {
+                this.$message({
+                  message: '操作成功',
+                  type: 'success',
+                  duration: 1500,
+                  onClose: () => {
+                    this.btnLoad = false
+                    this.visible = false
+                    sessionStorage.setItem('autoTaskList', '')
+                    this.$emit('refreshDataList')
+                  }
+                })
+              } else {
+                this.btnLoad = false
+                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" v-if="false">
+      <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-add.vue

@@ -20,13 +20,33 @@
         <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-input
+          v-model="dataForm.quantity"
+          :max="dataForm.targetQuantity"
+          @change="changes"
+          type="number"
+          placeholder="数量"
+          style="width:200px"
+        ></el-input>
+        <el-tag>数量最大值:{{dataForm.targetQuantity}}</el-tag>
       </el-form-item>
       <el-form-item label="单位" prop="unit">
-        <el-input v-model="dataForm.unit" disabled placeholder="单位"></el-input>
+        <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-input
+          v-model="dataForm.weight"
+          type="number"
+          :max="dataForm.targetWeight"
+          @change="changeWeight"
+          placeholder="重量"
+          style="width:200px"
+        ></el-input>
+        <el-tag>重量最大值:{{dataForm.targetWeight}}</el-tag>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
@@ -47,8 +67,10 @@
           materialDes: null,
           orderNo: null,
           productName: null,
+          targetQuantity: null,
           quantity: null,
           unit: null,
+          targetWeight: null,
           weight: null
         },
         dataRule: {
@@ -68,14 +90,35 @@
       }
     },
     methods: {
+      changes (value) {
+        if (/[\u4E00-\u9FA5]/g.test(value)) {
+          this.dataForm.quantity = null
+        }
+        if (value > this.dataForm.targetQuantity) {
+          this.dataForm.quantity = null
+        }
+      },
+      changeWeight (value) {
+        if (/[\u4E00-\u9FA5]/g.test(value)) {
+          this.dataForm.weight = null
+        }
+        if (value > this.dataForm.targetWeight) {
+          this.dataForm.weight = null
+        }
+      },
       init (row, idx) {
         this.visible = true
+        this.row = null
+        this.editIndex = null
+        this.formLoading = false
+        this.dataForm.targetQuantity = null
+        this.dataForm.targetWeight = null
         this.$nextTick(() => {
           this.$refs['dataForm'].resetFields()
           if (row) {
-            this.row = row
-            this.dataForm = row
-            this.editIndex = idx
+            this.row = JSON.parse(JSON.stringify(row))
+            this.dataForm = JSON.parse(JSON.stringify(row))
+            this.editIndex = JSON.parse(JSON.stringify(idx))
           }
           this.$refs['idenCardNum'].focus()
         })
@@ -90,11 +133,10 @@
               '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.targetQuantity = data.data.quantity - data.data.finishQuantity - data.data.waitQuantity
+              this.dataForm.targetWeight = data.data.weight - data.data.finishWeight - data.data.waitWeight
               this.dataForm.weight = null
               this.dataForm.quantity = null
             } else {
@@ -110,14 +152,15 @@
       dataFormSubmit () {
         this.$refs['dataForm'].validate((valid) => {
           if (valid) {
-            if (this.editIndex) {
+            if (this.editIndex || this.editIndex === 0) {
               const taskList = JSON.parse(sessionStorage.getItem('taskList'))
               taskList.splice(this.editIndex, 1, this.dataForm)
               sessionStorage.setItem('taskList', JSON.stringify(taskList))
             } else if (sessionStorage.getItem('taskList')) {
               const taskList = JSON.parse(sessionStorage.getItem('taskList'))
               taskList.push(this.dataForm)
-              sessionStorage.setItem('taskList', JSON.stringify(taskList))
+              const taskList1 = taskList.reduce((all, next) => all.some((item) => item.idenCardNum === next.idenCardNum) ? all : [...all, next], [])
+              sessionStorage.setItem('taskList', JSON.stringify(taskList1))
             } else {
               const arr = [this.dataForm]
               sessionStorage.setItem('taskList', JSON.stringify(arr))

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

@@ -7,12 +7,12 @@
 -->
 <template>
   <el-dialog
-    :title="!pointType ? '选择起点' : '选择窑炉'"
+    :title="!pointType ? '选择起点' : '选择工业炉'"
     :close-on-click-modal="false"
     :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-submit.vue

@@ -0,0 +1,144 @@
+<!--
+ * @Author: gtz
+ * @Date: 2022-03-04 10:22:13
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-08-05 09:29:56
+ * @Description: file content
+ * @FilePath: \mt-qj-wms-ui\src\views\common\order-auto-submit.vue
+-->
+
+<template>
+  <el-dialog
+    title="提交任务"
+    :visible.sync="visible">
+    <el-form :model="dataForm" v-loading="formLoading" :rules="dataRule" ref="dataForm" label-width="120px">
+      <el-form-item label="加工类型" prop="processType">
+        <el-select v-model="dataForm.processType" size="small" placeholder="加工类型" clearable>
+          <el-option :value="0" label="初始加工" />
+          <el-option :value="1" label="复加工" />
+        </el-select>
+      </el-form-item>
+        <el-form-item label="加工起点" prop="startPosition" style="margin-bottom: 24px">
+        <el-select v-model="dataForm.startPosition" size="small" placeholder="任务起点位置" clearable>
+          <el-option value="YYT001" label="液压台1" />
+          <el-option value="YYT002" label="液压台2" />
+          <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>
+        <el-form-item label="加工炉" prop="kilnId" style="margin-bottom: 24px">
+        <el-select v-model="dataForm.kilnId" size="small" @change="handleChange($event)" placeholder="加工炉" clearable>
+          <el-option v-for="item in kilnList" :key="item.id" :value="item.id" :label="item.kilnName" />
+        </el-select>
+        <!-- <el-button style="margin-left:10px" type="primary" @click="getPoint(1)">{{kilnId}}</el-button> -->
+      </el-form-item>
+        <el-form-item label="工艺" prop="craftCode" style="margin-bottom: 24px">
+          <el-select v-model="dataForm.craftCode" placeholder="工艺">
+            <el-option v-for="item in processList" :key="item.id" :value="item.code" :label="item.craftCode" />
+          </el-select>
+        </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="btnLoad"  @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  export default {
+    props: {
+      kilnList: {
+        type: Array,
+        default: () => []
+      },
+      processList: {
+        type: Array,
+        default: () => []
+      }
+    },
+    data () {
+      return {
+        visible: false,
+        btnLoad: false,
+        dataForm: {
+          craftCode: null,
+          processType: null,
+          startPosition: null,
+          kilnId: null
+        },
+        dataRule: {
+          craftCode: [
+            { required: true, message: '工艺不能为空', trigger: 'blur' }
+          ],
+          processType: [
+            { required: true, message: '加工类型不能为空', trigger: 'blur' }
+          ],
+          startPosition: [
+            { required: true, message: '加工起点不能为空', trigger: 'blur' }
+          ],
+          kilnId: [
+            { required: true, message: '工业炉不能为空', trigger: 'blur' }
+          ]
+        },
+        dataList: [],
+        formLoading: false
+      }
+    },
+    methods: {
+      handleChange (e) {
+        this.dataForm.craftCode = null
+        this.kilnList.find(item => {
+          if (item.id === e) {
+            if (item.type === 4) {
+              this.dataForm.craftCode = 1
+            }
+          }
+        }
+        )
+      },
+      init (list) {
+        this.dataList.splice(0, this.dataList.length)
+        this.dataList = list
+        this.btnLoad = false
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs['dataForm'].resetFields()
+        })
+      },
+      // 表单提交
+      dataFormSubmit () {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.btnLoad = true
+            this.$http({
+              url: this.$http.adornUrl(`/currTask/createProcessTask`),
+              method: 'post',
+              data: this.$http.adornData({
+                craftCode: this.dataForm.craftCode,
+                detParams: this.dataList,
+                kilnId: this.dataForm.kilnId,
+                processType: this.dataForm.processType,
+                startPosition: this.dataForm.startPosition,
+                targetPosition: this.dataForm.kilnId
+                // this.targetPosition
+              })
+            }).then(({data}) => {
+              if (data && data.code === 0) {
+                this.$message.success('任务提交成功')
+                this.btnLoad = false
+                this.visible = false
+                sessionStorage.setItem('taskList', '')
+                this.$emit('refreshDataList')
+              } else {
+                this.btnLoad = false
+                this.$message.warning(data.msg)
+              }
+            })
+          }
+        })
+      }
+    }
+  }
+</script>

src/views/common/order-process.vue

@@ -7,27 +7,6 @@
           新增
         </el-button>
       </el-form-item>
-      <el-form-item>
-        <el-select v-model="processType" size="small" placeholder="加工类型" clearable>
-          <el-option :value="0" label="初始加工" />
-          <el-option :value="1" label="复加工" />
-        </el-select>
-      </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-select>
-        <!-- <el-button style="margin-left:10px" type="primary" @click="getPoint(0)">{{startPosition}}</el-button> -->
-      </el-form-item>
-      <el-form-item style="margin-left:1%">
-        <el-select v-model="kilnId" size="small" placeholder="窑炉" clearable>
-          <el-option v-for="item in eqList" :key="item.id" :value="item.id" :label="item.kilnName" />
-        </el-select>
-        <!-- <el-button style="margin-left:10px" type="primary" @click="getPoint(1)">{{kilnId}}</el-button> -->
-      </el-form-item>
       <el-form-item style="margin-left:1%">
         <el-button type="primary" size="small" @click="submitTask()">提交任务</el-button>
       </el-form-item>
@@ -105,36 +84,42 @@
     </el-table>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <submit-form v-if="submitFormVisible" ref="submitForm" :kilnList="eqList" :processList="processList" @refreshDataList="getDataList" />
     <process-point v-if="processPointVisible" ref="processPoint" @refreshPoint="setPoint"></process-point>
   </div>
 </template>
 
 <script>
   import AddOrUpdate from './order-process-add'
+  import SubmitForm from './order-process-submit'
   import ProcessPoint from './order-process-point'
   export default {
     data () {
       return {
         startPosition: '',
         kilnId: '',
+        craftCode: '',
         targetPosition: '',
         dataList: [],
+        submitFormVisible: false,
         processType: null,
         dataListLoading: false,
         addOrUpdateVisible: false,
         processPointVisible: false,
-        eqList: []
+        eqList: [],
+        processList: []
       }
     },
     components: {
       AddOrUpdate,
-      ProcessPoint
+      ProcessPoint,
+      SubmitForm
     },
     activated () {
       this.getEqList()
     },
     methods: {
-      // 获取窑炉列表
+      // 获取工业炉列表
       getEqList () {
         this.$http({
           url: this.$http.adornUrl('/kilnInfo/page'),
@@ -151,6 +136,21 @@
           }
           this.getDataList()
         })
+
+        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 = []
+          }
+        })
       },
       // 获取数据列表
       getDataList () {
@@ -184,55 +184,13 @@
         }
       },
       submitTask () {
-        if (this.dataList.length === 0) {
-          this.$message({
-            message: '任务为空，请新增一条托盘信息',
-            type: 'warning'
+        if (this.dataList.length) {
+          this.submitFormVisible = true
+          this.$nextTick(() => {
+            this.$refs.submitForm.init(this.dataList)
           })
-        } else if (!this.startPosition) {
-          this.$message({
-            message: '请选择任务起点',
-            type: 'warning'
-          })
-        } else if (!this.kilnId) {
-          this.$message({
-            message: '请选择窑炉',
-            type: 'warning'
-          })
-        } else if (!this.processType) {
-          this.$message.warning('请选择加工类型')
         } else {
-          this.$confirm(`确定提交任务?`, '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            this.$http({
-              url: this.$http.adornUrl(`currTask/createProcessTask`),
-              method: 'post',
-              data: this.$http.adornData({
-                craftCode: '',
-                detParams: this.dataList,
-                kilnId: this.kilnId,
-                processType: this.processType,
-                startPosition: this.startPosition,
-                targetPosition: this.kilnId
-                // this.targetPosition
-              })
-            }).then(({data}) => {
-              console.log(data)
-              if (data && data.code === 0) {
-                this.$message.success('任务提交成功')
-                this.dataList = []
-                sessionStorage.setItem('taskList', '')
-                this.startPosition = '选择起点'
-                this.kilnId = '选择窑炉'
-                this.targetPosition = null
-              } else {
-                this.$message.warning(data.msg)
-              }
-            })
-          }).catch(() => {})
+          this.$message.warning('请至少添加一条任务！')
         }
       },
       // 删除

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>
@@ -251,11 +250,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -289,7 +288,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -323,7 +322,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -357,7 +356,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -391,7 +390,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -425,7 +424,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -459,7 +458,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -493,7 +492,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -527,7 +526,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -561,7 +560,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -595,7 +594,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
@@ -266,11 +272,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -304,7 +310,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -338,7 +344,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -372,7 +378,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -406,7 +412,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -440,7 +446,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -474,7 +480,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -508,7 +514,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -542,7 +548,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -576,7 +582,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -610,7 +616,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
 
@@ -310,11 +323,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    name: '窑炉1',
+    name: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -348,7 +361,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    name: '窑炉2',
+    name: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -382,7 +395,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    name: '窑炉3',
+    name: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -416,7 +429,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    name: '窑炉4',
+    name: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -450,7 +463,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    name: '窑炉5',
+    name: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -484,7 +497,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    name: '窑炉6',
+    name: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -518,7 +531,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    name: '窑炉7',
+    name: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -552,7 +565,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    name: '窑炉8',
+    name: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -586,7 +599,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    name: '窑炉9',
+    name: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -620,7 +633,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    name: '窑炉10',
+    name: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -654,7 +667,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    name: '窑炉11',
+    name: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
@@ -318,11 +332,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -356,7 +370,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -390,7 +404,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -424,7 +438,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -458,7 +472,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -492,7 +506,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -526,7 +540,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -560,7 +574,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -594,7 +608,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -628,7 +642,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -662,7 +676,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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'
 
@@ -251,11 +250,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -289,7 +288,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -323,7 +322,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -357,7 +356,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -391,7 +390,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -425,7 +424,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -459,7 +458,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -493,7 +492,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -527,7 +526,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -561,7 +560,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -595,7 +594,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
@@ -266,11 +272,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -304,7 +310,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -338,7 +344,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -372,7 +378,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -406,7 +412,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -440,7 +446,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -474,7 +480,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -508,7 +514,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -542,7 +548,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -576,7 +582,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -610,7 +616,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
@@ -251,11 +250,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -289,7 +288,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -323,7 +322,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -357,7 +356,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -391,7 +390,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -425,7 +424,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -459,7 +458,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -493,7 +492,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -527,7 +526,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -561,7 +560,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -595,7 +594,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
@@ -266,11 +272,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -304,7 +310,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -338,7 +344,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -372,7 +378,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -406,7 +412,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -440,7 +446,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -474,7 +480,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -508,7 +514,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -542,7 +548,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -576,7 +582,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -610,7 +616,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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>
@@ -251,11 +250,11 @@ const datePickerType = {
   }
 }
 
-// 窑炉列表
+// 工业炉列表
 const yaoluList = [
   {
     id: 1,
-    label: '窑炉1',
+    label: '工业炉1',
     value: 63,
     percent: 11,
     data: [
@@ -289,7 +288,7 @@ const yaoluList = [
   },
   {
     id: 2,
-    label: '窑炉2',
+    label: '工业炉2',
     value: 44,
     percent: 8,
     data: [
@@ -323,7 +322,7 @@ const yaoluList = [
   },
   {
     id: 3,
-    label: '窑炉3',
+    label: '工业炉3',
     value: 56,
     percent: 9,
     data: [
@@ -357,7 +356,7 @@ const yaoluList = [
   },
   {
     id: 4,
-    label: '窑炉4',
+    label: '工业炉4',
     value: 56,
     percent: 9,
     data: [
@@ -391,7 +390,7 @@ const yaoluList = [
   },
   {
     id: 5,
-    label: '窑炉5',
+    label: '工业炉5',
     value: 56,
     percent: 9,
     data: [
@@ -425,7 +424,7 @@ const yaoluList = [
   },
   {
     id: 6,
-    label: '窑炉6',
+    label: '工业炉6',
     value: 56,
     percent: 9,
     data: [
@@ -459,7 +458,7 @@ const yaoluList = [
   },
   {
     id: 7,
-    label: '窑炉7',
+    label: '工业炉7',
     value: 56,
     percent: 9,
     data: [
@@ -493,7 +492,7 @@ const yaoluList = [
   },
   {
     id: 8,
-    label: '窑炉8',
+    label: '工业炉8',
     value: 56,
     percent: 9,
     data: [
@@ -527,7 +526,7 @@ const yaoluList = [
   },
   {
     id: 9,
-    label: '窑炉9',
+    label: '工业炉9',
     value: 56,
     percent: 9,
     data: [
@@ -561,7 +560,7 @@ const yaoluList = [
   },
   {
     id: 10,
-    label: '窑炉10',
+    label: '工业炉10',
     value: 56,
     percent: 9,
     data: [
@@ -595,7 +594,7 @@ const yaoluList = [
   },
   {
     id: 11,
-    label: '窑炉11',
+    label: '工业炉11',
     value: 56,
     percent: 9,
     data: [
@@ -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,19 +11,30 @@
           <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">首页</span>
         </el-menu-item>
-        <el-submenu index="home">
+        <el-menu-item index="board" @click="getUrl">
+          <icon-svg name="shanchu" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">车间生产看板</span>
+        </el-menu-item>
+        <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' })"
           >
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
-            <span slot="title">订单加工</span>
+            <span slot="title">单步骤任务</span>
           </el-menu-item>
           <el-menu-item
             index="exWarehouse"
@@ -121,10 +132,17 @@
             @click="$router.push({ name: 'order-current-task' })"
           >
             <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
-            <span slot="title">当前执行任务</span>
+            <span slot="title">当前任务列表</span>
+          </el-menu-item>
+          <el-menu-item
+            index="current-task"
+            @click="$router.push({ name: 'order-current-task-new' })"
+          >
+            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
+            <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>
@@ -141,7 +159,7 @@
             @click="$router.push({ name: 'energy-kiln-electric' })"
           >
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
-            <span slot="title">窑炉用电分析</span>
+            <span slot="title">工业炉用电分析</span>
           </el-menu-item>
           <el-submenu index="kiln-gas">
             <template slot="title">
@@ -149,7 +167,7 @@
                 name="config"
                 class="site-sidebar__menu-icon"
               ></icon-svg>
-              <span>窑炉用气分析</span>
+              <span>工业炉用气分析</span>
             </template>
             <el-menu-item
               index="sulfur-dioxide"
@@ -161,6 +179,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 +227,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
@@ -205,7 +257,7 @@
                 name="tubiao"
                 class="site-sidebar__menu-icon"
               ></icon-svg>
-              <span slot="title">窑炉加工温度</span>
+              <span slot="title">工业炉加工温度</span>
             </el-menu-item>
             <el-menu-item
               index="sump-temperature"
@@ -242,9 +294,9 @@
             @click="$router.push({ name: 'energy-kiln-speed' })"
           >
             <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
-            <span slot="title">窑炉速度参数</span>
+            <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>
@@ -263,7 +315,7 @@
               @click="$router.push({ name: 'report-kiln-alarm' })"
             >
               <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
-              <span slot="title">窑炉报警</span>
+              <span slot="title">工业炉报警</span>
             </el-menu-item>
             <el-menu-item
               index="car-alarm"
@@ -287,7 +339,25 @@
             <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
             <span slot="title">执行任务历史列表</span>
           </el-menu-item>
+          <el-menu-item
+            index="report-APMS-table"
+            @click="$router.push({ name: 'report-APMS-table' })"
+          >
+            <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">APMS报工</span>
+          </el-menu-item>
+          <el-menu-item
+            index="report-APMS-work"
+            @click="$router.push({ name: 'report-APMS-work' })"
+          >
+            <icon-svg name="job" class="site-sidebar__menu-icon"></icon-svg>
+            <span slot="title">APMS未出单报工</span>
+          </el-menu-item>
         </el-submenu>
+        <el-menu-item index="Problem" @click="$router.push({ name: 'Problem' })">
+          <icon-svg name="log" class="site-sidebar__menu-icon"></icon-svg>
+          <span slot="title">常见问题汇总</span>
+        </el-menu-item>
         <!-- <sub-menu
           v-for="menu in menuList"
           :key="menu.menuId"
@@ -367,6 +437,10 @@ export default {
     this.routeHandle(this.$route)
   },
   methods: {
+    getUrl () {
+      let routeData = this.$router.resolve({ path: '/board' })
+      window.open(routeData.href, '_blank')
+    },
     // 路由操作
     routeHandle (route) {
       if (route.meta.isTab) {

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-07-07 10:51:59
  * @Description:
 -->
 <template>
@@ -39,7 +39,9 @@
     },
     data () {
       return {
-        loading: false
+        loading: false,
+        websock: '',
+        url: ''
       }
     },
     components: {
@@ -65,7 +67,9 @@
       }
     },
     created () {
+      this.url = window.SITE_CONFIG.wbUrl
       this.getUserInfo()
+      this.initWebSocket()
     },
     mounted () {
       this.resetDocumentClientHeight()
@@ -91,6 +95,33 @@
         //     this.userName = data.user.username
         //   }
         // })
+      },
+      initWebSocket () { // 初始化weosocket
+        const path = `ws://${this.url}/qj/websocket/1`
+        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 () { // 连接建立之后执行send方法发送数据
+        this.websocketsend(JSON.stringify(1))
+      },
+      websocketonerror () { // 连接建立失败重连
+        this.initWebSocket()
+      },
+      websocketonmessage (e) { // 数据接收
+        this.$notify.info({
+          title: '提示',
+          message: e.data,
+          duration: 15000
+        })
+      },
+      websocketsend (val) { // 数据发送
+        this.websock.send(val)
+      },
+      websocketclose (e) {  // 关闭
+        console.log('断开连接', e)
       }
     }
   }

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

@@ -34,16 +34,25 @@
         prop="abeginTime"
         label="发起时间"
       >
+        <template slot-scope="scope">
+          {{ scope.row.abeginTime ? scope.row.abeginTime.replace('T', ' ') : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="aendTime"
         label="完成时间"
       >
+        <template slot-scope="scope">
+          {{ scope.row.aendTime ? scope.row.aendTime.replace('T', ' ') : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="taskType"
         label="任务类型"
       >
+        <template slot-scope="scope">
+          {{ scope.row.taskType === 0 ? '初始加工' : '复加工' }}
+        </template>
       </el-table-column>
       <el-table-column
         prop="remark"
@@ -60,11 +69,6 @@
         label="目标位置"
       >
       </el-table-column>
-      <el-table-column
-        prop="vehicleName"
-        label="车辆名称"
-      >
-      </el-table-column>
       <el-table-column
         prop="kilnName"
         label="加工炉"

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

@@ -0,0 +1,150 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-09 16:26:17
+ * @Description:
+-->
+<template>
+  <el-dialog title="修改"
+      :before-close="handleClose"
+       :visible.sync="visible">
+    <el-form
+      :model="dataForm"
+      :rules="dataRule"
+      ref="dataForm"
+      @keyup.enter.native="dataFormSubmit()"
+      label-width="80px"
+    >
+      <el-form-item label="加工炉" prop="kilnId">
+        <el-select
+          v-model="dataForm.kilnId"
+          filterable
+          placeholder="请选择加工炉"
+        >
+          <el-option
+            v-for="item in kilnInfoArr"
+            :key="item.id"
+            :label="item.kilnName"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="dataForm.status"
+          filterable
+          placeholder="请选择状态"
+        >
+          <el-option
+            v-for="item in statusList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="btnLoad" @click="dataFormSubmit()">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  props: {
+    kilnInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      btnLoad: false,
+      dataForm: {
+        id: '',
+        kilnId: '',
+        status: ''
+      },
+      statusList: [
+        {
+          value: 0,
+          label: '等待执行'
+        },
+        {
+          value: 1,
+          label: '执行中'
+        },
+        {
+          value: 2,
+          label: '执行完成'
+        }
+      ],
+      dataRule: {
+        kilnId: [
+          { required: true, message: '加工炉不能为空', trigger: 'change' }
+        ],
+        status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    init (id, status, kilnId) {
+      this.btnLoad = false
+      this.dataForm = {
+        id: '',
+        kilnId: '',
+        status: ''
+      }
+      this.dataForm.id = id
+      this.dataForm.status = status
+      this.dataForm.kilnId = kilnId
+      this.visible = true
+    },
+    // 表单提交
+    dataFormSubmit () {
+      this.$refs['dataForm'].validate(valid => {
+        if (valid) {
+          this.btnLoad = true
+          this.$http({
+            url: this.$http.adornUrl('/currTask/updateCurrTaskStatus'),
+            method: 'post',
+            data: this.$http.adornData({
+              id: this.dataForm.id || undefined,
+              kilnId: this.dataForm.kilnId,
+              status: this.dataForm.status
+            })
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.btnLoad = false
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.visible = false
+                  this.$emit('refreshDataList')
+                }
+              })
+            } else {
+              this.btnLoad = false
+              this.$message.error(data.msg)
+            }
+          })
+        }
+      })
+    },
+    handleClose () {
+      this.visible = false
+      this.$refs['dataForm'].resetFields()
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,158 @@
+<!--
+ * @Author: zwq
+ * @Date: 2021-11-18 14:16:25
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-11-21 14:43:03
+ * @Description:
+-->
+<template>
+  <el-dialog title="修改" :before-close="handleClose" :visible.sync="visible">
+    <el-form
+      :rules="dataRule"
+      v-if="showForm"
+      ref="dataForm"
+    >
+      <el-form-item
+        :label="
+          item.idenCardNum + '--' + item.customer + '--' + item.productName
+        "
+        v-for="(item, index) in subList"
+        :key="item.id"
+      >
+        <el-input v-model="item.quantity" placeholder="数量"
+          ><template slot="prepend"
+            >数量:</template
+          ></el-input
+        >
+        <el-input v-model="item.weight" placeholder="重量"
+          ><template slot="prepend"
+            >重量:</template
+          ></el-input
+        >
+        <el-button
+          type="text"
+          style="color:red"
+          size="small"
+          @click="deleteHandle(index)"
+        >
+          <el-tooltip class="item" effect="dark" content="删除" placement="top">
+            <icon-svg class="iconClass" name="删除"></icon-svg>
+          </el-tooltip>
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="btnLoad" @click="dataFormSubmit()"
+        >确定</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      visible: false,
+      btnLoad: false,
+      showForm: false,
+      subList: [],
+      updataList: [],
+      autoExeTaskId: '',
+      dataRule: {}
+    }
+  },
+  methods: {
+    init (allStep, autoExeTaskId, dataList, updataList) {
+      this.btnLoad = false
+      this.showForm = false
+      this.autoExeTaskId = autoExeTaskId
+      this.updataList = updataList
+      const list = JSON.parse(JSON.stringify(dataList))
+      this.subList = list.filter(item => {
+        if (item.allStep === allStep) {
+          this.showForm = true
+          return item
+        }
+      })
+      this.visible = true
+    },
+    // 表单提交
+    dataFormSubmit () {
+      const arr = this.updataList.filter(item => {
+        if (item.autoExeTaskId === this.autoExeTaskId) {
+          item.currTaskDetVoList.forEach(item1 => {
+            const index = this.subList.findIndex(value => { return value.id === item1.id })
+            item1.weight = this.subList[index].weight
+            item1.quantity = this.subList[index].quantity
+          })
+          return item
+        }
+      })
+      if (this.showForm) {
+        this.btnLoad = true
+        this.$http({
+          url: this.$http.adornUrl('/currTask/oneStepToApms'),
+          method: 'post',
+          data: this.$http.adornData(
+            arr[0], false
+          )
+        }).then(({ data }) => {
+          if (data && data.code === 0) {
+            this.btnLoad = false
+            this.$message({
+              message: '操作成功',
+              type: 'success',
+              duration: 1500,
+              onClose: () => {
+                this.visible = false
+                this.$emit('refreshDataList')
+              }
+            })
+          } else {
+            this.btnLoad = false
+            this.$message.error(data.msg)
+          }
+        })
+      }
+      // this.$refs['dataForm'].validate(valid => {
+      //   if (valid) {
+      //     this.btnLoad = true
+      //     this.$http({
+      //       url: this.$http.adornUrl('/currTask/updateCurrTaskStatus'),
+      //       method: 'post',
+      //       data: this.$http.adornData({
+      //         id: this.dataForm.id || undefined,
+      //         kilnId: this.dataForm.kilnId,
+      //         status: this.dataForm.status
+      //       })
+      //     }).then(({ data }) => {
+      //       if (data && data.code === 0) {
+      //         this.btnLoad = false
+      //         this.$message({
+      //           message: '操作成功',
+      //           type: 'success',
+      //           duration: 1500,
+      //           onClose: () => {
+      //             this.visible = false
+      //             this.$emit('refreshDataList')
+      //           }
+      //         })
+      //       } else {
+      //         this.btnLoad = false
+      //         this.$message.error(data.msg)
+      //       }
+      //     })
+      //   }
+      // })
+    },
+    deleteHandle (index) {
+      this.subList.splice(index, 1)
+    },
+    handleClose () {
+      this.visible = false
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,251 @@
+<template>
+  <div style="margin:20px">
+    <el-table
+      :data="dataList"
+      ref="dataList"
+      size="mini"
+      height="250"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        width: '100%'
+      }"
+    >
+      <el-table-column
+        type="index"
+        header-align="center"
+        align="center"
+        label="序号"
+        width="50"
+      >
+      </el-table-column>
+      <el-table-column prop="taskCode" label="任务编码"> </el-table-column>
+      <el-table-column align="center" width="180" prop="stoveCode" label="炉号">
+      </el-table-column>
+      <el-table-column prop="createTime" label="发起时间">
+        <template slot-scope="scope">
+          {{
+            scope.row.createTime ? scope.row.createTime.replace("T", " ") : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="kilnName" label="工业炉">
+        <template slot-scope="scope">
+          <span>{{
+            kilnInfoArr.find(item => {
+              return item.id === scope.row.kilnId;
+            })
+              ? kilnInfoArr.find(item => {
+                  return item.id === scope.row.kilnId;
+                }).kilnName
+              : ""
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="任务状态">
+        <template slot-scope="scope">
+          {{ scope.row.status >= 0 ? statusList[scope.row.status] : "" }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column prop="taskType" label="任务类型">
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.taskType === 0
+              ? "入库到工业炉"
+              : scope.row.taskType === 1
+              ? "入库到缓存"
+              : scope.row.taskType === 2
+              ? "工业炉出库到缓存区"
+              : "缓存区出库"
+          }}</span>
+        </template>
+      </el-table-column> -->
+      <el-table-column prop="isAuto" label="多步骤">
+        <template slot-scope="scope">
+          <span>{{ scope.row.isAuto === 1 ? "是" : "否" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="craftCodeId" label="工艺"> </el-table-column>
+      <el-table-column prop="startPosition" label="开始位置"> </el-table-column>
+      <el-table-column prop="targetPosition" label="目标位置">
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作"
+      >
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="
+              addOrUpdateHandle(
+                scope.row.id,
+                scope.row.status,
+                scope.row.kilnId
+              )
+            "
+          >
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="修改"
+              placement="top"
+            >
+              <icon-svg class="iconClass" name="编辑"></icon-svg>
+            </el-tooltip>
+          </el-button>
+          <el-button
+            type="text"
+            :disabled="scope.row.status === 1"
+            :loading="btnLoading"
+            size="small"
+            @click="runTask(scope.row.id)"
+          >
+            <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.row.id)"
+          >
+            <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>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      :kiln-info-arr="kilnInfoArr"
+      @refreshDataList="reDataList"
+    ></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './current-task-new-add'
+// 任务状态列表
+const statusList = {
+  0: '等待执行',
+  1: '执行中',
+  2: '执行完成'
+}
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    kilnInfoArr: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      statusList,
+      btnLoading: false,
+      addOrUpdateVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate
+  },
+  activated () {},
+  methods: {
+    init () {
+      this.btnLoading = false
+      console.log(1)
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id, status, kilnId) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id, status, kilnId)
+      })
+    },
+    reDataList () {
+      this.$emit('refreshDataList')
+    },
+    // 删除
+    deleteHandle (id) {
+      this.$confirm(`确定对[${id}]进行删除操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.$http({
+            url: this.$http.adornUrl('/currTask/deleteById'),
+            method: 'post',
+            data: this.$http.adornData({ id })
+          }).then(({ data }) => {
+            if (data && data.code === 0) {
+              this.$message({
+                message: '操作成功',
+                type: 'success',
+                duration: 1500,
+                onClose: () => {
+                  this.reDataList()
+                }
+              })
+            } else {
+              this.$message.error(data.msg)
+            }
+          })
+        })
+        .catch(() => {})
+    },
+    // 执行
+    runTask (id) {
+      this.btnLoading = true
+      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.btnLoading = false
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.reDataList()
+            }
+          })
+        } else {
+          this.btnLoading = false
+          this.$message.error(data.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,78 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-09-09 14:35:52
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-09 15:25:54
+ * @Description:
+-->
+<template>
+  <div style="margin:20px">
+    <el-table
+      :data="detDataList"
+      :stripe="true"
+      size="mini"
+      ref="detDataList"
+      height="250"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        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="orderNo" label="订单名"> </el-table-column>
+      <el-table-column prop="customer" label="客户名称"> </el-table-column>
+      <el-table-column prop="productName" label="产品名称"> </el-table-column>
+      <el-table-column prop="productModel" label="产品型号"> </el-table-column>
+      <el-table-column prop="materialDes" label="材料号牌"> </el-table-column>
+      <el-table-column prop="craftIll" width="120" label="生产工艺要求">
+      </el-table-column>
+      <el-table-column prop="unit" label="单位"> </el-table-column>
+      <el-table-column prop="quantity" label="数量"> </el-table-column>
+      <el-table-column prop="weight" label="重量"> </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+// 任务状态列表
+const statusList = {
+  0: '等待执行',
+  1: '执行中',
+  2: '执行完成',
+  3: '追加后完成'
+}
+export default {
+  props: {
+    detDataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      statusList
+    }
+  },
+  components: {
+  },
+  activated () {},
+  methods: {
+    init () {
+      console.log(2)
+    }
+  }
+}
+</script>
+
+<style></style>

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

@@ -0,0 +1,105 @@
+<!--
+ * @Author: zwq
+ * @Date: 2022-09-09 15:19:56
+ * @LastEditors: zwq
+ * @LastEditTime: 2022-09-09 15:26:04
+ * @Description:
+-->
+<template>
+  <div style="margin:20px">
+    <el-table
+      :data="dataList"
+      ref="dataList"
+      size="mini"
+      height="250"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        width: '100%'
+      }"
+    >
+      <el-table-column
+        type="index"
+        header-align="center"
+        align="center"
+        label="序号"
+        width="50"
+      >
+      </el-table-column>
+      <el-table-column prop="inTime" label="入库时间">
+        <template slot-scope="scope">
+          {{
+            scope.row.inTime ? scope.row.inTime.replace("T", " ") : ""
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="kilnName" label="工业炉名称"></el-table-column>
+      <el-table-column prop="locationName" 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="topList(scope.row.id)"
+            >置顶</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+// 任务状态列表
+const statusList = {
+  0: '等待执行',
+  1: '执行中',
+  2: '执行完成',
+  3: '追加后完成'
+}
+export default {
+  props: {
+    dataList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      statusList
+    }
+  },
+  components: {
+  },
+  activated () {},
+  methods: {
+    init () {
+      console.log(3)
+    },
+    topList (id) {
+      this.$http({
+        url: this.$http.adornUrl('/inStockInfo/top'),
+        method: 'post',
+        data: this.$http.adornData({ id })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500
+          })
+        } else {
+          this.$message.error(data.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style></style>

src/views/order/current-order.vue

@@ -2,10 +2,13 @@
   <div class="mod-config">
     <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" ref="dataForm" :rules="dataRule" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
-        <el-input size="small" v-model="dataForm.idenCardNum" placeholder="标识卡号" />
+        <el-input size="small" v-model="dataForm.idenCardNum" clearable placeholder="标识卡号" />
       </el-form-item>
       <el-form-item>
-        <el-input size="small" v-model="dataForm.idenCardNum" placeholder="订单号" />
+        <el-input size="small" v-model="dataForm.orderNo" clearable placeholder="订单号" />
+      </el-form-item>
+      <el-form-item>
+        <el-input size="small" v-model="dataForm.customerName" clearable placeholder="客户名称" />
       </el-form-item>
       <el-form-item>
         <el-button size="small" @click="getDataList()">查询</el-button>
@@ -24,18 +27,10 @@
         label="序号"
         width="50">
       </el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="获取时间">
-      </el-table-column>
       <el-table-column
         prop="idenCardNum"
         label="标识卡号">
       </el-table-column>
-      <el-table-column
-        prop="orderNo"
-        label="订单号">
-      </el-table-column>
       <el-table-column
         prop="status"
         label="任务状态">
@@ -66,13 +61,28 @@
         prop="quantity"
         label="物料数量">
       </el-table-column>
+      <el-table-column
+        prop="targetQuantity"
+        label="剩余数量">
+      </el-table-column>
       <el-table-column
         prop="weight"
         label="物料重量">
       </el-table-column>
       <el-table-column
-        prop="waitWeight"
-        label="实际重量">
+        prop="targetWeight"
+        label="剩余重量">
+      </el-table-column>
+      <el-table-column
+        prop="orderNo"
+        label="订单号">
+      </el-table-column>
+      <el-table-column
+        prop="createTime"
+        label="获取时间">
+        <template slot-scope="scope">
+          {{ scope.row.createTime ? scope.row.createTime.replace('T', ' ') : '' }}
+        </template>
       </el-table-column>
       <el-table-column
         fixed="right"
@@ -146,7 +156,8 @@
       return {
         dataForm: {
           idenCardNum: '',
-          orderNo: ''
+          orderNo: '',
+          customerName: ''
         },
         dataList: [],
         options1: [],
@@ -157,12 +168,6 @@
         dataListLoading: false,
         orderDetailVisible: false,
         dataRule: {
-          idenCardNum: [
-            { required: true, message: '标识卡号不能为空', trigger: 'change' }
-          ],
-          orderNo: [
-            { required: true, message: '订单号不能为空', trigger: 'change' }
-          ]
         },
         statusList,
         orderVoidList
@@ -171,7 +176,7 @@
     components: {
       orderDetail
     },
-    created () {
+    activated () {
       this.getDataList()
     },
     methods: {
@@ -185,11 +190,16 @@
             'current': this.pageIndex,
             'size': this.pageSize,
             'orderNo': this.dataForm.orderNo,
-            'idenCardNum': this.dataForm.idenCardNum
+            'idenCardNum': this.dataForm.idenCardNum,
+            'customerName': this.dataForm.customerName
           })
         }).then(({data}) => {
           if (data && data.code === 0) {
             this.dataList = data.data.records
+            this.dataList.forEach(item => {
+              item.targetQuantity = item.quantity - item.finishQuantity - item.waitQuantity
+              item.targetWeight = item.weight - item.finishWeight - item.waitWeight
+            })
             this.totalPage = data.data.total
           } else {
             this.dataList = []

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

@@ -0,0 +1,196 @@
+<template>
+  <div class="mod-config">
+    <el-table
+      :data="dataList"
+      :row-class-name="tableRowClassName"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        height: '56px'
+      }"
+      v-loading="dataListLoading"
+      style="width: 100%;"
+      ref="dataList"
+    >
+      <el-table-column type="expand">
+        <template slot-scope="props">
+          <div style="height:300px">
+            <el-tabs @tab-click="val => handleClick(val, props.row)">
+              <el-tab-pane label="任务步骤详情">
+                <tab-table1
+                  :data-list="props.row.currTaskVoList"
+                  :kiln-info-arr="kilnInfoArr"
+                  ref="tab1Ref"
+                  @refreshDataList="getDataList"
+                >
+                </tab-table1>
+              </el-tab-pane>
+              <el-tab-pane label="缓存详情">
+                <tab-table3
+                  :data-list="props.row.inStockInfoVoList"
+                  ref="tab3Ref"
+                  @refreshDataList="getDataList"
+                >
+                </tab-table3>
+              </el-tab-pane>
+              <el-tab-pane label="标识卡详情">
+                <tab-table2
+                  :det-data-list="props.row.currTaskDetVoList"
+                  ref="tab2Ref"
+                  @refreshDataList="getDataList"
+                >
+                </tab-table2>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        type="index"
+        header-align="center"
+        align="center"
+        label="序号"
+        width="50"
+      >
+      </el-table-column>
+      <el-table-column prop="status" label="状态">
+        <template slot-scope="scope">
+          <span>{{
+            scope.row.status === 0
+              ? "等待执行"
+              : scope.row.status === 1
+              ? "执行中"
+              : "缓存中"
+          }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="allStep" width="250" label="所有步骤">
+      </el-table-column>
+      <el-table-column prop="nowStep" label="当前步骤"> </el-table-column>
+      <el-table-column prop="isAuto" label="多步骤">
+        <template slot-scope="scope">
+          <span>{{ scope.row.isAuto === 0 ? "否" : "是" }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sheetNo" label="生产单号"> </el-table-column>
+      <el-table-column prop="startPosition" label="开始位置"> </el-table-column>
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        label="添加时间"
+      >
+        <template slot-scope="scope">
+          {{
+            scope.row.createTime ? scope.row.createTime.replace("T", " ") : ""
+          }}
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 弹窗, 新增 / 修改 -->
+    <add-or-update
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+  </div>
+</template>
+
+<script>
+import AddOrUpdate from './components/current-task-new-add'
+import tabTable1 from './components/current-task-new-table1'
+import tabTable2 from './components/current-task-new-table2'
+import tabTable3 from './components/current-task-new-table3'
+export default {
+  data () {
+    return {
+      dataList: [],
+      kilnInfoArr: [],
+      dataListLoading: false,
+      addOrUpdateVisible: false
+    }
+  },
+  components: {
+    AddOrUpdate,
+    tabTable1,
+    tabTable2,
+    tabTable3
+  },
+  activated () {
+    this.getDataList()
+  },
+  created () {
+    this.$http({
+      url: this.$http.adornUrl('/kilnInfo/list'),
+      method: 'post',
+      data: this.$http.adornData({
+        current: 1,
+        size: 500
+      })
+    }).then(({ data }) => {
+      if (data && data.code === 0) {
+        this.kilnInfoArr = data.data
+      } else {
+        this.kilnInfoArr = []
+      }
+    })
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/currTask/currentTaskInfo'),
+        method: 'post',
+        data: this.$http.adornData({
+          current: 1,
+          size: 500
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = data.data
+        } else {
+          this.dataList = []
+        }
+        this.dataListLoading = false
+      })
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.addOrUpdateVisible = true
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.init(id)
+      })
+    },
+    handleClick (tab) {
+      if (tab.index === '0') {
+        this.$nextTick(() => {
+          this.$refs.tab1Ref.init()
+        })
+      } else {
+        this.$nextTick(() => {
+          this.$refs.tab2Ref.init()
+        })
+      }
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      if (row.status === 1) {
+        return 'success-row'
+      } else if (row.status === 2) {
+        return 'warning-row'
+      }
+      return ''
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background-color: oldlace;
+}
+
+.el-table .success-row {
+  background-color: #f0f9eb;
+}
+</style>

src/views/order/current-task.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="mod-config">
-    <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <div style="margin-bottom:10px;float:right">
+      <el-tag type="success">加工中</el-tag>
+      <el-tag type="warning">缓存中</el-tag>
+    </div>
+    <!-- <el-form style="display: flex; align-items: center; justify-content: right;" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
       <el-form-item>
         <el-select size="small" v-model="dataForm.vehicleId" filterable placeholder="车辆名称">
           <el-option
@@ -14,76 +18,87 @@
       </el-form-item>
       <el-form-item>
         <el-button size="small" @click="getDataList()">查询</el-button>
-        <!-- <el-button type="primary" @click="handTask()">手动执行任务</el-button> -->
+        <el-button type="primary" @click="handTask()">手动执行任务</el-button>
       </el-form-item>
-    </el-form>
+    </el-form> -->
     <el-table
       :data="dataList"
-      :stripe="true"
-      :header-cell-style="{background:'#eef1f6',color:'#606266',height: '56px'}"
+      :header-cell-style="{
+        background: '#eef1f6',
+        color: '#606266',
+        height: '56px'
+      }"
+      :row-class-name="tableRowClassName"
       v-loading="dataListLoading"
-      style="width: 100%;">
+      style="width: 100%;"
+    >
       <el-table-column
         type="index"
         header-align="center"
         align="center"
         label="序号"
-        width="50">
+        width="50"
+      >
       </el-table-column>
-      <el-table-column
-        prop="taskCode"
-        label="任务编码">
-      </el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="发起时间">
-      </el-table-column>
-      <el-table-column
-        prop="taskSource"
-        label="任务来源">
-      </el-table-column>
-      <el-table-column
-        prop="status"
-        label="任务状态">
+      <el-table-column prop="taskCode" label="任务编码"> </el-table-column>
+      <el-table-column prop="createTime" label="发起时间">
         <template slot-scope="scope">
-          {{ scope.row.status >= 0 ? statusList[scope.row.status] : '' }}
+          {{
+            scope.row.createTime ? scope.row.createTime.replace("T", " ") : ""
+          }}
         </template>
       </el-table-column>
-      <el-table-column
-        prop="taskType"
-        label="任务类型">
+      <el-table-column prop="status" label="任务状态">
+        <template slot-scope="scope">
+          {{ scope.row.status >= 0 ? statusList[scope.row.status] : "" }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="taskType" label="任务类型">
         <template slot-scope="scope">
           <span>{{
             scope.row.taskType === 0
-              ? "缓存到窑炉加工"
+              ? "入库到工业炉"
               : scope.row.taskType === 1
-              ? "出炉到缓存"
+              ? "入库到缓存"
               : scope.row.taskType === 2
-              ? "缓存出库"
-              : "入库缓存"
+              ? "工业炉出库到缓存区"
+              : "缓存区出库"
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="startPosition"
-        label="开始位置">
+      <el-table-column prop="isAuto" label="多步骤">
+        <template slot-scope="scope">
+          <span>{{ scope.row.isAuto === 1 ? "是" : "否" }}</span>
+        </template>
       </el-table-column>
-      <el-table-column
-        prop="targetPosition"
-        label="目标位置">
-      </el-table-column>
-      <el-table-column
-        prop="vehicleName"
-        label="车辆名称">
+      <el-table-column prop="craftCodeId" label="工艺"> </el-table-column>
+      <el-table-column prop="startPosition" label="开始位置"> </el-table-column>
+      <el-table-column prop="targetPosition" label="目标位置">
       </el-table-column>
       <el-table-column
         fixed="right"
         header-align="center"
         align="center"
         width="80"
-        label="详情">
+        label="置顶"
+      >
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="Detail(scope.row.id)">详情</el-button>
+          <el-button type="text" size="small" @click="topList(scope.row.id)"
+            >置顶</el-button
+          >
+        </template>
+      </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="Detail(scope.row.id)"
+            >详情</el-button
+          >
         </template>
       </el-table-column>
       <el-table-column
@@ -91,15 +106,38 @@
         header-align="center"
         align="center"
         width="120"
-        label="操作">
+        label="操作"
+      >
         <template slot-scope="scope">
-          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">
-            <el-tooltip class="item" effect="dark" content="执行" placement="top">
+          <el-button
+            type="text"
+            :disabled="scope.row.status === 1"
+            :loading="btnLoading"
+            size="small"
+            @click="addOrUpdateHandle(scope.row.id)"
+          >
+            <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.row.sheetNo)">
-            <el-tooltip class="item" effect="dark" content="删除" placement="top">
+          <el-button
+            type="text"
+            :disabled="scope.row.status === 1"
+            style="color:red"
+            size="small"
+            @click="deleteHandle(scope.row.id)"
+          >
+            <el-tooltip
+              class="item"
+              effect="dark"
+              content="删除"
+              placement="top"
+            >
               <icon-svg class="iconClass" name="删除"></icon-svg>
             </el-tooltip>
           </el-button>
@@ -110,96 +148,166 @@
       @size-change="sizeChangeHandle"
       @current-change="currentChangeHandle"
       :current-page="pageIndex"
-      :page-sizes="[10, 20, 50, 100]"
+      :page-sizes="[10, 20, 30, 50, 100]"
       :page-size="pageSize"
       :total="totalPage"
-      layout="total, sizes, prev, pager, next, jumper">
+      layout="total, sizes, prev, pager, next, jumper"
+    >
     </el-pagination>
   </div>
 </template>
 
 <script>
-  // 任务状态列表
-  const statusList = {
-    0: '等待执行',
-    1: '执行中',
-    2: '执行完成',
-    3: '追加后完成'
-  }
-  export default {
-    data () {
-      return {
-        dataForm: {
-          vehicleId: ''
-        },
-        dataList: [],
-        options: [],
-        pageIndex: 1,
-        pageSize: 10,
-        totalPage: 0,
-        dataListLoading: false,
-        statusList
-      }
+// 任务状态列表
+const statusList = {
+  0: '等待执行',
+  1: '执行中',
+  2: '执行完成',
+  3: '追加后完成'
+}
+export default {
+  data () {
+    return {
+      dataForm: {
+        vehicleId: ''
+      },
+      timer: '',
+      dataList: [],
+      options: [],
+      pageIndex: 1,
+      pageSize: 30,
+      totalPage: 0,
+      btnLoading: false,
+      dataListLoading: false,
+      statusList,
+      processList: []
+    }
+  },
+  activated () {
+    this.getDataList()
+    this.timer = setInterval(this.getDataList, 180000)
+    // 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.splice(0, this.processList.length)
+    //   }
+    // })
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.btnLoading = false
+      this.$http({
+        url: this.$http.adornUrl('/currTask/currentTaskNow'),
+        method: 'post',
+        data: this.$http.adornData({
+          current: this.pageIndex,
+          size: this.pageSize,
+          vehicleId: this.dataForm.vehicleId
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          const resData = data.data.records
+          // resData.forEach(item => {
+          //   if (item.craftCodeId) {
+          //     this.processList.find(item1 => {
+          //       if (item1.id === item.craftCodeId) { item.craftName = item1.craftCode }
+          //     })
+          //   }
+          // })
+          this.dataList = resData
+          this.totalPage = data.data.total
+        } else {
+          this.dataList = []
+          this.totalPage = 0
+        }
+        this.dataListLoading = false
+      })
     },
-    activated () {
+    // 每页数
+    sizeChangeHandle (val) {
+      this.pageSize = val
+      this.pageIndex = 1
       this.getDataList()
     },
-    methods: {
-      // 获取数据列表
-      getDataList () {
-        this.dataListLoading = true
-        this.$http({
-          url: this.$http.adornUrl('/currTask/currentTaskNow'),
-          method: 'post',
-          data: this.$http.adornData({
-            'current': this.pageIndex,
-            'size': this.pageSize,
-            'vehicleId': this.dataForm.vehicleId
+    // 当前页
+    currentChangeHandle (val) {
+      this.pageIndex = val
+      this.getDataList()
+    },
+    Detail (id) {
+      this.$router.push({ name: 'order-current-task-detail', query: { id } })
+    },
+    handTask () {
+      this.$router.push({ name: 'orderProcess' })
+    },
+    // 执行
+    addOrUpdateHandle (id) {
+      this.btnLoading = true
+      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.btnLoading = false
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500,
+            onClose: () => {
+              this.getDataList()
+            }
           })
-        }).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
-        })
-      },
-      // 每页数
-      sizeChangeHandle (val) {
-        this.pageSize = val
-        this.pageIndex = 1
-        this.getDataList()
-      },
-      // 当前页
-      currentChangeHandle (val) {
-        this.pageIndex = val
-        this.getDataList()
-      },
-      Detail (id) {
-        this.$router.push({name: 'order-current-task-detail', query: {id}})
-      },
-      handTask () {
-        this.$router.push({name: 'orderProcess'})
-      },
-      // 执行
-      addOrUpdateHandle (id) {
-        console.log('执行')
-      },
-      // 删除
-      deleteHandle (sheetNo) {
-        this.$confirm(`确定对[生产单编号=${sheetNo}]进行删除操作?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+        } else {
+          this.btnLoading = false
+          this.$message.error(data.msg)
+        }
+      })
+    },
+    topList (id) {
+      this.$http({
+        url: this.$http.adornUrl('/currTask/top'),
+        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)
+        }
+      })
+    },
+    // 删除
+    deleteHandle (id) {
+      this.$confirm(`确定对[${id}]进行删除操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
           this.$http({
-            url: this.$http.adornUrl('/currTask/deleteBySheetNo'),
+            url: this.$http.adornUrl('/currTask/deleteById'),
             method: 'post',
-            data: this.$http.adornData(sheetNo)
-          }).then(({data}) => {
+            data: this.$http.adornData({ id })
+          }).then(({ data }) => {
             if (data && data.code === 0) {
               this.$message({
                 message: '操作成功',
@@ -213,8 +321,30 @@
               this.$message.error(data.msg)
             }
           })
-        }).catch(() => {})
+        })
+        .catch(() => {})
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      if (row.status === 1) {
+        return 'success-row'
+      } else if (row.isCache === 1) {
+        return 'warning-row'
       }
+      return ''
     }
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
   }
+}
 </script>
+
+<style>
+.el-table .warning-row {
+  background-color: oldlace;
+}
+
+.el-table .success-row {
+  background-color: #f0f9eb;
+}
+</style>

src/views/report/APMS-table.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="mod-config">
+    <el-table
+      :data="dataList"
+      :span-method="objectSpanMethod"
+      :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="allStep" width="250" label="所有步骤"></el-table-column>
+      <el-table-column prop="idenCardNum" label="标识卡号"> </el-table-column>
+      <el-table-column prop="orderNo" label="订单名"> </el-table-column>
+      <el-table-column prop="customer" label="客户名称"> </el-table-column>
+      <el-table-column prop="productName" label="产品名称"> </el-table-column>
+      <el-table-column prop="productModel" label="产品型号"> </el-table-column>
+      <el-table-column prop="materialDes" label="材料号牌"> </el-table-column>
+      <el-table-column prop="craftIll" width="120" label="生产工艺要求">
+      </el-table-column>
+      <el-table-column prop="unit" label="单位"> </el-table-column>
+      <el-table-column prop="quantity" label="数量"> </el-table-column>
+      <el-table-column prop="weight" label="重量"> </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="150"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.allStep,scope.row.autoExeTaskId)">
+            <el-tooltip class="item" effect="dark" content="修改" placement="top">
+              <icon-svg class="iconClass" name="编辑"></icon-svg>
+            </el-tooltip>
+          </el-button>
+          <el-button type="text" size="small" @click="completeOrder(scope.row.autoExeTaskId)">
+            报工
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <tableEdit
+      v-if="tableEditVisible"
+      ref="tableEdit"
+      @refreshDataList="getDataList"
+    ></tableEdit>
+  </div>
+</template>
+
+<script>
+import tableEdit from './components/APMS-table-edit'
+export default {
+  data () {
+    return {
+      dataList: [],
+      updataList: [],
+      dataListLoading: false,
+      tableEditVisible: false
+    }
+  },
+  components: {
+    tableEdit
+  },
+  activated () {
+    this.getDataList()
+  },
+  created () {
+  },
+  methods: {
+    // 获取数据列表
+    getDataList () {
+      this.dataListLoading = true
+      this.$http({
+        url: this.$http.adornUrl('/currTask/taskInfoNotToApms'),
+        method: 'post',
+        data: this.$http.adornData({
+          current: 1,
+          size: 500
+        })
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.dataList = []
+          this.updataList = JSON.parse(JSON.stringify(data.data))
+          data.data.forEach(item => {
+            if (item.currTaskDetVoList.length > 0) {
+              item.currTaskDetVoList.forEach(item1 => {
+                item1.allStep = item.allStep
+                item1.autoExeTaskId = item.autoExeTaskId
+              })
+            } else {
+              let arr = {'allStep': item.allStep}
+              item.currTaskDetVoList.push(arr)
+            }
+            this.dataList = [...this.dataList, ...item.currTaskDetVoList]
+          })
+          this.setSpan()
+        } else {
+          this.dataList = []
+        }
+        this.dataListLoading = false
+      })
+    },
+    setSpan () {
+      this.dataList.forEach(item => {
+        item.rowspan = 1
+      })
+      // 双层循环
+      for (let i = 0; i < this.dataList.length; i++) {
+        for (let j = i + 1; j < this.dataList.length; j++) {
+          // 此处可根据相同字段进行合并，此处是根据的id
+          if (this.dataList[i].allStep === this.dataList[j].allStep) {
+            this.dataList[i].rowspan++
+            this.dataList[j].rowspan--
+          }
+        }
+        // 这里跳过已经重复的数据
+        i = i + this.dataList[i].rowspan - 1
+      }
+    },
+    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        return {
+          rowspan: row.rowspan,
+          colspan: 1
+        }
+      }
+      if (columnIndex === 12) {
+        return {
+          rowspan: row.rowspan,
+          colspan: 1
+        }
+      }
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (allStep, autoExeTaskId) {
+      this.tableEditVisible = true
+      this.$nextTick(() => {
+        this.$refs.tableEdit.init(allStep, autoExeTaskId, this.dataList, this.updataList)
+      })
+    },
+    handleClick (tab) {
+      if (tab.index === '0') {
+        this.$nextTick(() => {
+          this.$refs.tab1Ref.init()
+        })
+      } else {
+        this.$nextTick(() => {
+          this.$refs.tab2Ref.init()
+        })
+      }
+    },
+    tableRowClassName ({ row, rowIndex }) {
+      if (row.status === 1) {
+        return 'success-row'
+      } else if (row.status === 2) {
+        return 'warning-row'
+      }
+      return ''
+    },
+    completeOrder (autoExeTaskId) {
+      const arr = this.updataList.filter(item => {
+        if (item.autoExeTaskId === autoExeTaskId) {
+          return item
+        }
+      })
+      this.$http({
+        url: this.$http.adornUrl('/currTask/oneStepToApms'),
+        method: 'post',
+        data: this.$http.adornData(
+            arr[0], false
+          )
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          this.$message({
+            message: '操作成功',
+            type: 'success',
+            duration: 1500
+          })
+        } else {
+          this.$message.error(data.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.el-table .warning-row {
+  background-color: oldlace;
+}
+
+.el-table .success-row {
+  background-color: #f0f9eb;
+}
+</style>