提交

src/router/index.js

@@ -19,7 +19,7 @@ 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: '/bigScreen', component: _import('common/bigScreen2'), hidden: true, name: 'bigScreen', meta: { title: '大屏' } }
+  { path: '/bigScreen', component: _import('common/bigScreen'), hidden: true, name: 'bigScreen', meta: { title: '大屏' } }
 ]
 
 // 主入口路由(需嵌套上左右整体布局)
@@ -34,7 +34,7 @@ const mainRoutes = {
     // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
     // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
-    { path: '/home', component: _import('common/bigScreen2'), name: 'home', meta: { title: '首页' } },
+    { path: '/home', component: _import('common/bigScreen'), name: 'home', meta: { title: '首页' } },
     { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
     { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
     { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }

src/views/common/bigScreen.vue

@@ -1,27 +1,41 @@
 <template>
-  <div class='mod-demo-echarts' :style="`height: ${winHeight}px`">
+  <div class="mod-demo-echarts" :style="`height: ${winHeight}px`">
-    <div :style="`font-size: ${60 * beilv}px`" style="margin-left:30%;color:white;margin-bottom:10px"><img :height="`${60 * beilv}px`" src="../../assets/img/logo.png">&nbsp;云洁科技展示屏</div>
+    <div class="titleHead">
-        <!-- <el-card class="titleClass">
+      <div class="logoHead">云洁科技展示屏</div>
-        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
+    </div>
-        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
+    <el-row style="margin-top:40px">
-        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
+      <el-col :span="11" style="margin-left:2%">
-        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='warning' color="#E9EAEF" effect="dark">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}}&emsp;</el-tag>
+        <div class="chart-box chart-box-bg1">
-        </el-card> -->
+          <div class="chart-box-title">
-    <hr />
+            库位使用情况(共{{ firstPointList.all }}台)
-    <el-row>
+          </div>
-      <el-col :span='11' :offset='1'>
+          <div id="J_chartPieBox" class="chart-box-pie"></div>
-        <div id='J_chartPieBox' class='chart-box'></div>
+        </div>
       </el-col>
-      <el-col :span='11'>
+      <el-col :span="11" :offset="1">
-        <div id='J_chartScatterBox' class='chart-box'></div>
+        <div class="chart-box chart-box-bg2">
+          <div class="chart-box-title">
+            产品类别库位数量情况(外圈总量，内圈库存)
+          </div>
+          <div id="J_chartScatterBox" class="chart-box-pie"></div>
+        </div>
       </el-col>
     </el-row>
-    <el-row>
+    <el-row  style="margin-top:40px">
-      <el-col :span='6' :offset='1'>
+      <el-col>
-        <div id='J_category' class='chart-box'></div>
+        <div class="chart-box chart-box-bg3">
-      </el-col>
+          <div class="chart-box-title">
-      <el-col :span='16'>
+            产品型号库位数量情况
-        <div id='J_axis' class='chart-box'></div>
+          </div>
+          <el-row>
+            <el-col :span="6" :offset="1">
+              <div id="J_category" class="chart-box-bar"></div>
+            </el-col>
+            <el-col :span="17">
+              <div id="J_axis" class="chart-box-bar"></div>
+            </el-col>
+          </el-row>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -29,6 +43,7 @@
 
 <script>
 import echarts from 'echarts'
+const colorOptions = ['#ec6942', '#f4b485', '#88abda']
 export default {
   data () {
     return {
@@ -72,7 +87,9 @@ export default {
   },
   computed: {
     documentClientHeight: {
-      get () { return this.$store.state.common.documentClientHeight }
+      get () {
+        return this.$store.state.common.documentClientHeight
+      }
     }
   },
   activated () {
@@ -144,9 +161,11 @@ export default {
         }
       })
       this.$http({
-        url: this.$http.adornUrl('/generator/mtcctaskruninfodet/taskruninfodetlist'),
+        url: this.$http.adornUrl(
+          '/generator/mtcctaskruninfodet/taskruninfodetlist'
+        ),
         method: 'post'
-      }).then(({data}) => {
+      }).then(({ data }) => {
         if (data && data.code === 0) {
           this.sTaskInfo = data.list[0]
           if (!this.sTaskInfo.taskDetCode) {
@@ -159,7 +178,7 @@ export default {
     initChartPie () {
       var option = {
         title: {
-          text: `库位使用情况:共${this.firstPointList.all}`,
+          // text: `库位使用情况:共${this.firstPointList.all}`,
           left: 'center',
           top: 20 * this.beilv,
           textStyle: {
@@ -169,17 +188,17 @@ export default {
         },
         legend: {
           orient: 'vertical',
-          left: 10 * this.beilv,
+          right: 70 * this.beilv,
-          data: [
+          top: 5 * this.beilv,
-            '已占用库位',
+          icon: 'rect',
-            '未占用库位'
+          data: ['已占用', '未占用'],
-          ],
           textStyle: {
             fontSize: 16 * this.beilv,
-            color: '#fff'
+            color: '#fff',
+            padding: [0, 0, 0, 10 * this.beilv]
           }
         },
-        color: ['#dd6b66', '#c23531'],
+        color: colorOptions,
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b} : {c} ({d}%)',
@@ -200,19 +219,20 @@ export default {
           {
             name: '库位数',
             type: 'pie',
-            radius: '65%',
+            radius: ['40%', '60%'],
-            center: ['50%', '50%'],
+            center: ['39%', '50%'],
             data: [
-              { value: this.firstPointList.isOccupy, name: `已占用库位` },
+              { value: this.firstPointList.isOccupy, name: `已占用` },
-              { value: this.firstPointList.notOccupy, name: `未占用库位` }
+              { value: this.firstPointList.notOccupy, name: `未占用` }
             ].sort(function (a, b) {
               return a.value - b.value
             }),
             itemStyle: {
               normal: {
                 label: {
-                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
+                  formatter:
-                  backgroundColor: '#eee',
+                    '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
+                  backgroundColor: '#ced0ff',
                   borderColor: '#aaa',
                   borderWidth: 1,
                   borderRadius: 4,
@@ -223,16 +243,17 @@ export default {
                   // padding: [0, 7],
                   rich: {
                     a: {
-                      color: '#999',
+                      color: '#fff',
-                      lineHeight: 22 * this.beilv,
+                      lineHeight: 26 * this.beilv,
+                      backgroundColor: '#8e60f0',
                       align: 'center',
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv
                     },
                     abg: {
-                      backgroundColor: '#333',
+                      backgroundColor: '#8e60f0',
                       width: '100%',
                       align: 'right',
-                      height: 22 * this.beilv,
+                      height: 26 * this.beilv,
                       borderRadius: [4, 4, 0, 0],
                       fontSize: 16 * this.beilv
                     },
@@ -241,21 +262,22 @@ export default {
                       width: '100%',
                       borderWidth: 0.5 * this.beilv,
                       height: 0 * this.beilv,
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv
                     },
                     b: {
-                      fontSize: 16 * this.beilv,
+                      fontSize: 18 * this.beilv,
-                      lineHeight: 33 * this.beilv
+                      lineHeight: 33 * this.beilv,
+                      color: '#8e60f0'
                     },
                     per: {
-                      color: '#eee',
+                      color: '#fff',
-                      backgroundColor: '#334455',
                       padding: [2 * this.beilv, 4 * this.beilv],
                       borderRadius: 2 * this.beilv,
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv
                     },
                     c: {
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv,
+                      color: '#8e60f0'
                     }
                   }
                 }
@@ -279,9 +301,10 @@ export default {
     },
     initChartScatter () {
       var option = {
-        backgroundColor: '#0079BA',
+        // backgroundColor: '#0079BA',
+        color: colorOptions,
         title: {
-          text: '库位数量情况(外圈总量，内圈库存)',
+          // text: '大系列库位数量情况(外圈总量，内圈库存)',
           left: 'center',
           top: 0,
           textStyle: {
@@ -299,27 +322,27 @@ export default {
         },
         legend: {
           orient: 'vertical',
-          left: 10 * this.beilv,
+          right: 70 * this.beilv,
-          data: [
+          top: 5 * this.beilv,
-            '成品',
+          icon: 'rect',
-            '半成品',
+          data: ['成品', '半成品', '原材料'],
-            '原材料'
-          ],
           textStyle: {
             fontSize: 16 * this.beilv,
-            color: '#fff'
+            color: '#fff',
+            padding: [0, 0, 0, 10 * this.beilv]
           }
         },
         series: [
           {
             name: '库位数',
             type: 'pie',
-            radius: [0, '40%'],
+            radius: [0, '35%'],
+            center: ['39%', '50%'],
             itemStyle: {
               normal: {
                 label: {
                   position: 'inner',
-                  fontSize: 14 * this.beilv,
+                  fontSize: 12 * this.beilv,
                   formatter: '{b}: {c}'
                 }
               }
@@ -328,20 +351,31 @@ export default {
               show: false
             },
             data: [
-              { value: this.secondPointList.countPositionFinishedProduct, name: `成品` },
+              {
-              { value: this.secondPointList.countPositionSemiFinishedProduct, name: `半成品` },
+                value: this.secondPointList.countPositionFinishedProduct,
-              { value: this.secondPointList.countPositionRawMaterials, name: `原材料` }
+                name: `成品`
+              },
+              {
+                value: this.secondPointList.countPositionSemiFinishedProduct,
+                name: `半成品`
+              },
+              {
+                value: this.secondPointList.countPositionRawMaterials,
+                name: `原材料`
+              }
             ]
           },
           {
             name: '数量',
             type: 'pie',
-            radius: ['50%', '75%'],
+            radius: ['45%', '55%'],
+            center: ['39%', '50%'],
             itemStyle: {
               normal: {
                 label: {
-                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
+                  formatter:
-                  backgroundColor: '#eee',
+                    '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
+                  backgroundColor: '#ced0ff',
                   borderColor: '#aaa',
                   borderWidth: 1,
                   borderRadius: 4,
@@ -352,48 +386,59 @@ export default {
                   // padding: [0, 7],
                   rich: {
                     a: {
-                      color: '#999',
+                      color: '#fff',
-                      lineHeight: 22 * this.beilv,
+                      lineHeight: 26 * this.beilv,
+                      backgroundColor: '#8e60f0',
                       align: 'center',
-                      fontSize: 16 * this.beilv
+                      fontSize: 20 * this.beilv
                     },
                     abg: {
-                      backgroundColor: '#333',
+                      backgroundColor: '#8e60f0',
                       width: '100%',
                       align: 'right',
-                      height: 22 * this.beilv,
+                      height: 26 * this.beilv,
                       borderRadius: [4, 4, 0, 0],
-                      fontSize: 16 * this.beilv
+                      fontSize: 20 * this.beilv
                     },
                     hr: {
                       borderColor: '#aaa',
                       width: '100%',
                       borderWidth: 0.5 * this.beilv,
                       height: 0 * this.beilv,
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv
                     },
                     b: {
-                      fontSize: 16 * this.beilv,
+                      fontSize: 18 * this.beilv,
-                      lineHeight: 33 * this.beilv
+                      lineHeight: 33 * this.beilv,
+                      color: '#8e60f0'
                     },
                     per: {
-                      color: '#eee',
+                      color: '#fff',
-                      backgroundColor: '#334455',
                       padding: [2 * this.beilv, 4 * this.beilv],
                       borderRadius: 2 * this.beilv,
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv
                     },
                     c: {
-                      fontSize: 16 * this.beilv
+                      fontSize: 18 * this.beilv,
+                      color: '#8e60f0'
                     }
                   }
                 }
               }
             },
             data: [
-              { value: this.secondPointList.countQuantityFinishedProduct, name: `成品` },
+              {
-              { value: this.secondPointList.countQuantitySemiFinishedProduct, name: `半成品` },
+                value: this.secondPointList.countQuantityFinishedProduct,
-              { value: this.secondPointList.countQuantityRawMaterials, name: `原材料` }
+                name: `成品`
+              },
+              {
+                value: this.secondPointList.countQuantitySemiFinishedProduct,
+                name: `半成品`
+              },
+              {
+                value: this.secondPointList.countQuantityRawMaterials,
+                name: `原材料`
+              }
             ]
           }
         ]
@@ -435,26 +480,44 @@ export default {
           }
         },
         legend: {
-          data: [
+          show: false,
-            '数量',
+          orient: 'vertical',
-            '库位数量'
+          right: 70 * this.beilv,
-          ],
+          top: 60 * this.beilv,
+          itemWidth: 40 * this.beilv,
+          itemHeight: 40 * this.beilv,
+          itemGap: 80 * this.beilv,
+          icon: 'rect',
+          data: ['数量', '库位数量'],
           textStyle: {
             fontSize: 16 * this.beilv,
-            color: '#fff'
+            color: '#fff',
+            padding: [0, 0, 0, 10 * this.beilv]
           }
         },
-        color: ['#c23531', '#ff7f50'],
+        color: ['#FFCD42', '#87cefa'],
         xAxis: [
           {
             type: 'category',
-            data: ['盒底', '盒盖'],
+            data: ['成品', '半成品'],
-            axisPointer: {
+            axisLine: {
-              type: 'shadow'
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
             },
             axisLabel: {
-              fontSize: 16 * this.beilv,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
@@ -466,9 +529,23 @@ export default {
               fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16 * this.beilv,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           },
           {
@@ -480,14 +557,29 @@ export default {
               fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16 * this.beilv,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
         grid: {
-          left: '15%'
+          left: '15%',
+          right: '40%'
         },
         series: [
           {
@@ -498,7 +590,7 @@ export default {
                 label: {
                   show: true,
                   position: 'inside',
-                  fontSize: 12 * this.beilv
+                  fontSize: 18 * this.beilv
                 }
               }
             },
@@ -514,7 +606,7 @@ export default {
                 label: {
                   show: true,
                   position: 'inside',
-                  fontSize: 12 * this.beilv
+                  fontSize: 18 * this.beilv
                 }
               }
             }
@@ -526,6 +618,13 @@ export default {
       window.addEventListener('resize', () => {
         this.chartCate.resize()
       })
+      this.chartCate.on('legendselectchanged', res => {
+        this.chartAxis.dispatchAction({
+          type: 'legendToggleSelect',
+          // 图例名称
+          name: res.name
+        })
+      })
     },
     initAxis () {
       let [max, beilv] = [0, 0]
@@ -556,18 +655,13 @@ export default {
           }
         },
         legend: {
-          data: [
+          data: ['数量', '库位数量'],
-            '数量',
-            '库位数量'
-          ],
           textStyle: {
-            fontSize: 16 * this.beilv,
             color: '#fff'
-          },
+          }
-          top: 27 * this.beilv
         },
         title: {
-          text: '成品库位数量情况',
+          // text: '成品小系列库位数量情况',
           left: 'center',
           top: 0,
           textStyle: {
@@ -584,13 +678,35 @@ export default {
           {
             type: 'category',
             data: this.smallList.categoryName,
-            axisPointer: {
+            axisLine: {
-              type: 'shadow'
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
             },
             axisLabel: {
-              fontSize: 16 * this.beilv,
+              fontSize: 18 * this.beilv,
               color: '#fff',
-              interval: 0
+              interval: 0,
+              // formatter:function (value,index) {
+              //   debugger
+              //   if (index % 2 != 0) {
+              //     return '\n' + value
+              //   }
+              //   else {
+              //     return value
+              //   }
+              // }
+              rotate: 40
+            },
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
@@ -602,9 +718,23 @@ export default {
               fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16 * this.beilv,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           },
           {
@@ -616,9 +746,23 @@ export default {
               fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
               fontSize: 16 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
@@ -664,36 +808,78 @@ export default {
 }
 </script>
 
-<style lang='scss'>
+<style lang="scss">
 .mod-demo-echarts {
-  background-color: #0079ba;
+  background-color: #010826;
-  overflow:hidden;
+  border: 3px solid #2878ff;
+  background: url("../../assets/img/yj/background.png") no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
   > .el-alert {
     margin-bottom: 10px;
   }
-  > .el-row {
+  .titleHead {
-    .el-col {
+    z-index: 348;
-      padding-top: 10px;
+    height: 11vh;
-      padding-bottom: 10px;
+    position: relative;
-    }
+    text-align: center;
+    color: white;
+    background: url("../../assets/img/yj/banner_top.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .logoHead {
+    font-size: 32px;
+    line-height: 11vh;
+    white-space: nowrap;
+  }
+  .chart-box-bg1 {
+    z-index: 350;
+    background: url("../../assets/img/yj/card_top左.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .chart-box-bg2 {
+    z-index: 350;
+    background: url("../../assets/img/yj/card_top右边.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  .chart-box-bg3 {
+    z-index: 350;
+    background: url("../../assets/img/yj/card_down底色.png") no-repeat;
+    background-size: 100% 100%;
   }
   .chart-box {
-    min-height: 42vh;
+    padding: 20px 5px 10px 5px;
+    position: relative;
+    text-align: center;
+    .chart-box-pie {
+      min-height: 27vh;
+    }
+    .chart-box-bar {
+      min-height: 32vh;
+      z-index: 350;
+      background: url("../../assets/img/yj/card_down_格子左.png") no-repeat;
+      background-size: 100% 100%;
+    }
+    .chart-box-title {
+      display: inline-block;
+      position: relative;
+      top: -4vh;
+      width: auto;
+      height: 4vh;
+      line-height: 4vh;
+      padding: 0 2.5vh;
+      margin: 0 auto;
+      border-radius: 5px;
+      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2);
+      font-size: 2vh;
+      color: #fff;
+      font-weight: bold;
+      background-color: #8e60f0;
+    }
   }
-}
+  .chart-br {
-.titleClass{
+    width: 100%;
-  width: 90%;
+    height: calc(6vh - 35px);
-  margin-left: 5%;
-  height: 6vh;
-  line-height: 7vh;
-  background: #B8D4E9;
-  text-align: center;
-  .el-card__body{
-    padding: 0;
-  }
-  .tagClass{
-    height: 5vh;
-    line-height: 5vh;
   }
 }
 </style>

src/views/common/bigScreen2.vue

@@ -9,8 +9,8 @@
       </el-card>
     <hr /> -->
     <el-row class="mod-demo-echarts-title">
-      <el-col class="mod-demo-echarts-title-logo" :span="1"></el-col>
+      <el-col class="mod-demo-echarts-title-logo" :offset="6" :span="1"></el-col>
-      <el-col class="mod-demo-echarts-title-font" :span="11">云 洁 科 技 展示屏</el-col>
+      <el-col class="mod-demo-echarts-title-font" :span="10">云 洁 科 技 展示屏</el-col>
       <el-col class="mod-demo-echarts-title-icon" :span="4">
         <el-row>
           <el-col :offset="1" :span="5">
@@ -215,8 +215,8 @@ export default {
           itemGap: 80 * this.beilv,
           icon: 'rect',
           data: [
-            '已占用库位',
+            '已占用',
-            '未占用库位'
+            '未占用'
           ],
           textStyle: {
             fontSize: 16 * this.beilv,
@@ -248,8 +248,8 @@ export default {
             radius: '55%',
             center: ['39%', '50%'],
             data: [
-              { value: this.firstPointList.isOccupy, name: `已占用库位` },
+              { value: this.firstPointList.isOccupy, name: `已占用` },
-              { value: this.firstPointList.notOccupy, name: `未占用库位` }
+              { value: this.firstPointList.notOccupy, name: `未占用` }
             ].sort(function (a, b) {
               return a.value - b.value
             }),
@@ -515,7 +515,7 @@ export default {
         xAxis: [
           {
             type: 'category',
-            data: ['盒底', '盒盖'],
+            data: ['成品', '半成品'],
             axisLine: {
               lineStyle: {
                 color: '#fff',
@@ -847,7 +847,7 @@ export default {
     height: 13vh;
     line-height: 13vh;
     .mod-demo-echarts-title-logo{
-      min-width: 120px;
+      min-width: 80px;
       margin-top: 3vh;
       height: 7vh;
       background: url('../../assets/img/logo.png') no-repeat;
@@ -857,7 +857,6 @@ export default {
       font-weight: bold;
       color: #fff;
       font-size: 7vh;
-      text-align: center;
     }
   }
   .mod-demo-echarts-secondtitle{

src/views/common/home.vue

@@ -11,7 +11,7 @@
         @on-node-click="onNodeClick"
       />
     </div>
-    <div class="STaskInfo">
+    <!-- <div class="STaskInfo">
       <div style="padding:15px 5px">
       <label :style="styleSObj" @click="sTaskClick"><b>{{sText}}</b></label>
       <label style="float:right">{{sTaskInfoNum}}条</label>
@@ -44,7 +44,7 @@
         header-align="center" align="center">
       </el-table-column>
     </el-table>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -163,7 +163,7 @@ export default {
     }
   },
   created () {
-    this.showSTaskInfo()
+    // this.showSTaskInfo()
     this.timer()
     // this.init()
   },

src/views/main-navbar.vue

@@ -3,7 +3,7 @@
     <div class="site-navbar__header">
       <div class="site-navbar__brand" @click="$router.push({ name: 'home' })">
           <div class="site-navbar__brand-lg" href="javascript:;">
-            <div style="line-height:18px;font-size:18px"><img src="../assets/img/logo.png" width="40" height="40" style="margin-left:20px;float:left"/>云洁科技  <br><span style="font-size:10px">YUN JIE TECHNOLOGY</span></div>
+            <div style="line-height:18px;font-size:18px"><img src="../assets/img/yj-logo.png" height="55"/></div>
           </div>
         <a class="site-navbar__brand-mini" href="javascript:;"><img src="../assets/img/logo.png" width="40" height="40"/></a>
       </div>

src/views/modules/generator/mtcctaskruninfo.vue

@@ -1,16 +1,22 @@
 <template>
   <div class="mod-config">
-    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+    <el-form
+      :inline="true"
+      :model="dataForm"
+      @keyup.enter.native="getDataList()"
+    >
       <!-- <el-form-item>
         <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
       </el-form-item> -->
       <el-form-item>
         <el-button @click="getDataListShow()">刷新</el-button>
+        <el-button type="success" @click="showTask()">执行演示任务</el-button>
         <el-button
           v-if="isAuth('generator:mtcctaskruninfo:save')"
           type="primary"
           @click="addOrUpdateHandle()"
-        >新增</el-button>
+          >新增</el-button
+        >
         <!-- <el-button type="danger"  @click="resetTask()">重置任务</el-button>
         <el-button type="success"  @click="infoIn()">多物料入库</el-button> -->
         <!-- <el-button
@@ -30,22 +36,79 @@
       style="width: 100%;"
     >
       <!-- <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column> -->
-      <el-table-column type="index" width="50" header-align="center" align="center" label="序号"></el-table-column>
+      <el-table-column
-      <el-table-column prop="createTime" header-align="center" align="center" label="添加时间"></el-table-column>
+        type="index"
-      <el-table-column prop="userName" header-align="center" align="center" label="操作员名称"></el-table-column>
+        width="50"
+        header-align="center"
+        align="center"
+        label="序号"
+      ></el-table-column>
+      <el-table-column
+        prop="createTime"
+        header-align="center"
+        align="center"
+        label="添加时间"
+      ></el-table-column>
+      <el-table-column
+        prop="userName"
+        header-align="center"
+        align="center"
+        label="操作员名称"
+      ></el-table-column>
       <el-table-column header-align="center" align="center" label="任务类型">
         <template slot-scope="scope">
-        {{ scope.row.taskType === 0 ? '出库' : '入库' }}
+          {{ scope.row.taskType === 0 ? "出库" : "入库" }}
         </template>
       </el-table-column>
-      <el-table-column prop="taskCode" header-align="center" align="center" label="任务编码"></el-table-column>
+      <el-table-column
-      <el-table-column prop="startPoint" header-align="center" align="center" label="起点"></el-table-column>
+        prop="taskCode"
-      <el-table-column prop="endPoint" header-align="center" align="center" label="终点"></el-table-column>
+        header-align="center"
-      <el-table-column prop="model" header-align="center" align="center" width="100" label="型号"></el-table-column>
+        align="center"
-      <el-table-column prop="dateNum" header-align="center" align="center" label="批次号"></el-table-column>
+        label="任务编码"
-      <el-table-column prop="num" header-align="center" align="center" label="数量"></el-table-column>
+      ></el-table-column>
-      <el-table-column prop="unit" header-align="center" align="center" label="单位"></el-table-column>
+      <el-table-column
-      <el-table-column prop="remarks" header-align="center" align="center" label="备注"></el-table-column>
+        prop="startPoint"
+        header-align="center"
+        align="center"
+        label="起点"
+      ></el-table-column>
+      <el-table-column
+        prop="endPoint"
+        header-align="center"
+        align="center"
+        label="终点"
+      ></el-table-column>
+      <el-table-column
+        prop="model"
+        header-align="center"
+        align="center"
+        width="100"
+        label="型号"
+      ></el-table-column>
+      <!-- <el-table-column
+        prop="dateNum"
+        header-align="center"
+        align="center"
+        label="批次号"
+      ></el-table-column> -->
+      <el-table-column
+        prop="num"
+        header-align="center"
+        align="center"
+        label="数量"
+      ></el-table-column>
+      <el-table-column
+        prop="unit"
+        header-align="center"
+        align="center"
+        label="单位"
+      ></el-table-column>
+      <el-table-column
+        prop="remarks"
+        header-align="center"
+        align="center"
+        label="备注"
+      ></el-table-column>
       <!-- <el-table-column
         prop="orderNum"
         fixed="right"
@@ -53,14 +116,42 @@
         align="center"
         label="任务顺序"
       ></el-table-column> -->
-      <el-table-column fixed="right" header-align="center" align="center" width="300" label="操作">
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="300"
+        label="操作"
+      >
         <template slot-scope="scope">
           <div v-show="scope.row.status !== 4">
             <!-- <el-button :disabled="scope.$index === 1" type="primary" round size="mini" @click="updateListOrder(scope.row,1,scope.$index)">▲</el-button> -->
-            <el-button type="primary" size="mini" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
+            <el-button
-            <el-button type="danger" size="mini" @click="deleteHandle(scope.row.id)">删除</el-button>
+              type="primary"
+              size="mini"
+              @click="addOrUpdateHandle(scope.row.id)"
+              >修改</el-button
+            >
+            <el-button
+              type="danger"
+              size="mini"
+              @click="deleteHandle(scope.row.id)"
+              >删除</el-button
+            >
             <!-- <el-button type="success" size="mini" @click="infoDetShow(scope.row)">子任务</el-button> -->
-            <el-button type="warning" size="mini" :disabled="scope.row.status !== 0" @click="addList(scope.row)">{{scope.row.status === 0? '执行任务' : scope.row.status === 1? '执行中' : '执行完成'}}</el-button>
+            <el-button
+              type="warning"
+              size="mini"
+              :disabled="scope.row.status !== 0"
+              @click="addList(scope.row)"
+              >{{
+                scope.row.status === 0
+                  ? "执行任务"
+                  : scope.row.status === 1
+                  ? "执行中"
+                  : "执行完成"
+              }}</el-button
+            >
             <!-- <el-button :disabled="scope.$index === dataList.length - 1" type="primary" round size="mini" @click="updateListOrder(scope.row,-1,scope.$index)">▼</el-button> -->
           </div>
           <!-- <div v-show="scope.$index === 0 && scope.row.status === 4">
@@ -73,44 +164,73 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="STaskInfo">
+    <!-- <div class="STaskInfo">
       <div style="padding:15px 5px">
-      <label :style="styleSObj" @click="sTaskClick"><b>{{sText}}</b></label>
+        <label :style="styleSObj" @click="sTaskClick"
-      <label style="float:right">{{sTaskInfoNum}}条</label>
+          ><b>{{ sText }}</b></label
+        >
+        <label style="float:right">{{ sTaskInfoNum }}条</label>
       </div>
-      <el-table
+      <el-table v-if="openSTask" :data="sTaskInfo" border size="mini">
-      v-if="openSTask"
+        <el-table-column
-      :data="sTaskInfo"
+          prop="createTime"
-      border
+          label="创建日期"
-      size=mini>
+          width="150px"
-      <el-table-column
+          header-align="center"
-        prop="createTime"
+          align="center"
-        label="创建日期"
+        >
-        width="150px"
+        </el-table-column>
-        header-align="center" align="center">
+        <el-table-column
-      </el-table-column>
+          prop="taskType"
-      <el-table-column
+          label="任务类型"
-        prop="taskType"
+          width="50px"
-        label="任务类型"
+          header-align="center"
-        width="50px"
+          align="center"
-        header-align="center"
+        >
-        align="center">
+          <template slot-scope="scope">
-      <template slot-scope="scope">
+            {{ scope.row.taskType === 0 ? "出库" : "入库" }}
-        {{ scope.row.taskType === 0 ? '出库' : '入库' }}
+          </template>
-        </template>
+        </el-table-column>
-      </el-table-column>
+        <el-table-column
-      <el-table-column
+          prop="taskDetCode"
-        prop="taskDetCode"
+          label="任务编码"
-        label="任务编码"
+          width="160px"
-        width="160px"
+          header-align="center"
-        header-align="center" align="center">
+          align="center"
-      </el-table-column>
+        >
-    </el-table>
+        </el-table-column>
-    </div>
+      </el-table>
+    </div> -->
+    <el-dialog
+      title="信息"
+      :visible.sync="dialogVisible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      width="30%"
+    >
+      <span>{{taskMsg}}</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button v-show="showTaskBtn" @click="dialogVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
     <!-- 弹窗, 新增 / 修改 -->
-    <add-or-update :inout="inout" v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <add-or-update
-    <info-det v-if="infoDetVisible" ref="infoDet" @infoDetBtn="getDataList"></info-det>
+      :inout="inout"
-    <info-in v-if="infoInVisible" ref="infoInRef" @infoInBtn="getDataList"></info-in>
+      v-if="addOrUpdateVisible"
+      ref="addOrUpdate"
+      @refreshDataList="getDataList"
+    ></add-or-update>
+    <info-det
+      v-if="infoDetVisible"
+      ref="infoDet"
+      @infoDetBtn="getDataList"
+    ></info-det>
+    <info-in
+      v-if="infoInVisible"
+      ref="infoInRef"
+      @infoInBtn="getDataList"
+    ></info-in>
   </div>
 </template>
 
@@ -127,10 +247,13 @@ export default {
       },
       dataList: [],
       btnText: '执行任务',
+      dialogVisible: false,
+      taskMsg: '演示任务正在执行，请勿操作',
+      showTaskBtn: false,
       sTaskInfo: [],
       sTaskInfoNum: 0,
       sText: '等待中的子任务',
-      styleSObj: {marginLeft: '30%', cursor: 'pointer', fontSize: '18px'},
+      styleSObj: { marginLeft: '30%', cursor: 'pointer', fontSize: '18px' },
       openSTask: true,
       dataListLoading: false,
       dataListSelections: [],
@@ -156,7 +279,7 @@ export default {
     }
   },
   created () {
-    this.showSTaskInfo()
+    // this.showSTaskInfo()
     this.timer()
   },
   methods: {
@@ -171,7 +294,7 @@ export default {
         url: this.$http.adornUrl('/generator/mtcctaskruninfo/list'),
         method: 'get',
         params: this.$http.adornParams({
-          'key': this.dataForm.key
+          key: this.dataForm.key
         })
       }).then(({ data }) => {
         if (data && data.code === 0) {
@@ -201,9 +324,7 @@ export default {
       this.$http({
         url: this.$http.adornUrl('/generator/mtcctaskruninfo/sort'),
         method: 'post',
-        data: this.$http.adornData(
+        data: this.$http.adornData(mtCcTaskRunInfoEntities)
-          mtCcTaskRunInfoEntities
-        )
       }).then(({ data }) => {
         if (data.code === 0 && data) {
         } else {
@@ -218,6 +339,23 @@ export default {
         this.$refs.infoDet.init(row, bol)
       })
     },
+    showTask () {
+      this.dialogVisible = true
+      this.taskMsg = '演示任务正在执行，请勿操作'
+      this.showTaskBtn = false
+      this.$http({
+        url: this.$http.adornUrl('/generator/mtcctaskruninfo/runExampleTask'),
+        method: 'post'
+      }).then(({ data }) => {
+        if (data.code === 0 && data) {
+          this.dialogVisible = false
+        } else {
+          this.$message.error(data.msg)
+          this.taskMsg = data.msg
+          this.showTaskBtn = true
+        }
+      })
+    },
     // 多选
     selectionChangeHandle (val) {
       this.dataListSelections = val
@@ -269,9 +407,11 @@ export default {
     },
     showSTaskInfo () {
       this.$http({
-        url: this.$http.adornUrl('/generator/mtcctaskruninfodet/taskruninfodetlist'),
+        url: this.$http.adornUrl(
+          '/generator/mtcctaskruninfodet/taskruninfodetlist'
+        ),
         method: 'post'
-      }).then(({data}) => {
+      }).then(({ data }) => {
         if (data && data.code === 0) {
           this.sTaskInfo = data.list
           this.sTaskInfoNum = this.sTaskInfo.length
@@ -290,9 +430,11 @@ export default {
     },
     addList (row) {
       this.$http({
-        url: this.$http.adornUrl(`/generator/mtcctaskruninfo/runTaskInfo/${row.id}`),
+        url: this.$http.adornUrl(
+          `/generator/mtcctaskruninfo/runTaskInfo/${row.id}`
+        ),
         method: 'post'
-      }).then(({data}) => {
+      }).then(({ data }) => {
         if (data && data.code === 0) {
           this.btnText = '执行中'
           this.getDataList()
@@ -313,7 +455,7 @@ export default {
         url: this.$http.adornUrl('/exit/wait/queue'),
         method: 'post',
         data: this.$http.adornData(id)
-      }).then(({data}) => {
+      }).then(({ data }) => {
         if (data && data.code === 0) {
           this.getDataList()
         }
@@ -324,7 +466,7 @@ export default {
         url: this.$http.adornUrl('/generator/mtcctaskruninfo/resetTask'),
         method: 'post',
         data: this.$http.adornData()
-      }).then(({data}) => {
+      }).then(({ data }) => {
         if (data && data.code === 0) {
           this.getDataListShow()
         }
@@ -335,15 +477,15 @@ export default {
 </script>
 
 <style scoped>
-.STaskInfo{
+.STaskInfo {
-    max-height: 400px;
+  max-height: 400px;
-    overflow: auto;
+  overflow: auto;
-    position: absolute;
+  position: absolute;
-    background: white;
+  background: white;
-    right: 50px;
+  right: 50px;
-    bottom: 30px;
+  bottom: 30px;
-    border-radius: 10px;
+  border-radius: 10px;
-    box-shadow: 0px 0px 10px;
+  box-shadow: 0px 0px 10px;
-    z-index: 9999;
+  z-index: 9999;
-  }
+}
 </style>