大屏

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/bigScreen'), hidden: true, name: 'bigScreen', meta: { title: '大屏' } }
+  { path: '/bigScreen', component: _import('common/bigScreen2'), 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/bigScreen'), name: 'home', meta: { title: '首页' } },
+    { path: '/home', component: _import('common/bigScreen2'), 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/bigScreen1.vue

@@ -1,473 +0,0 @@
-<template>
-  <div class='mod-demo-echarts' >
-        <el-card class="titleClass">
-        <el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
-        <el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
-        <el-tag class="tagClass" type='warning' color="#E9EAEF" effect="dark">任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : '入库'}}&emsp;</el-tag>
-        </el-card>
-    <hr />
-    <el-row :gutter='20'>
-      <el-col :span='11' :offset='1'>
-        <div id='J_chartPieBox' class='chart-box'></div>
-      </el-col>
-      <el-col :span='11'>
-        <div id='J_chartScatterBox' class='chart-box'></div>
-      </el-col>
-    </el-row>
-    <el-row :gutter='20'>
-      <el-col :span='6' :offset='1'>
-        <div id='J_category' class='chart-box'></div>
-      </el-col>
-      <el-col :span='16'>
-        <div id='J_axis' class='chart-box'></div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import echarts from 'echarts'
-export default {
-  data () {
-    return {
-      chartCate: null,
-      chartAxis: null,
-      chartBar: null,
-      chartPie: null,
-      firstPointList: [],
-      secondPointList: [],
-      sTaskInfo: {},
-      coverList: [],
-      smallList: []
-    }
-  },
-  mounted () {
-    this.init()
-  },
-  computed: {
-    documentClientHeight: {
-      get () { return this.$store.state.common.documentClientHeight }
-    }
-  },
-  activated () {
-    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
-    if (this.chartPie) {
-      this.chartPie.resize()
-    }
-    if (this.chartScatter) {
-      this.chartScatter.resize()
-    }
-  },
-  methods: {
-    init () {
-      this.$http({
-        url: this.$http.adornUrl('/generator/screen/countModel'),
-        method: 'get'
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          this.secondPointList = data.data
-          this.initChartScatter()
-        } else {
-          this.secondPointList = []
-        }
-      })
-      this.$http({
-        url: this.$http.adornUrl('/generator/screen/countPosition'),
-        method: 'get'
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          this.firstPointList = data.data
-          this.initChartPie()
-        } else {
-          this.firstPointList = []
-        }
-      })
-      this.$http({
-        url: this.$http.adornUrl('/generator/screen/coverAndBase'),
-        method: 'get'
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          this.coverList = data.data
-          this.initCate()
-        } else {
-          this.coverList = []
-        }
-      })
-      this.$http({
-        url: this.$http.adornUrl('/generator/screen/smallModel'),
-        method: 'get'
-      }).then(({ data }) => {
-        if (data && data.code === 0) {
-          let arr1 = []
-          let arr2 = []
-          let arr3 = []
-          data.data.forEach(item => {
-            arr1.push(item.categoryName)
-            arr2.push(item.quantity)
-            arr3.push(item.position)
-          })
-          let obj = {
-            categoryName: arr1,
-            quantity: arr2,
-            position: arr3
-          }
-          this.smallList = obj
-          this.initAxis()
-        } else {
-          this.smallList = []
-        }
-      })
-      this.$http({
-        url: this.$http.adornUrl('/generator/mtcctaskruninfodet/taskruninfodetlist'),
-        method: 'post'
-      }).then(({data}) => {
-        if (data && data.code === 0) {
-          this.sTaskInfo = data.list[0]
-        }
-      })
-    },
-    // 饼状图
-    initChartPie () {
-      var option = {
-        backgroundColor: '#0079BA',
-        title: {
-          text: `库位使用情况:共${this.firstPointList.all}`,
-          left: 'center',
-          top: 20,
-          textStyle: {
-            color: '#ccc'
-          }
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b} : {c} ({d}%)'
-        },
-        visualMap: {
-          show: false,
-          min: 80,
-          max: 600,
-          inRange: {
-            colorLightness: [0, 1]
-          }
-        },
-        series: [
-          {
-            name: '库位数',
-            type: 'pie',
-            radius: '55%',
-            center: ['50%', '50%'],
-            data: [
-              { value: this.firstPointList.isOccupy, name: `已占用库位${this.firstPointList.isOccupy}` },
-              { value: this.firstPointList.notOccupy, name: `未占用库位${this.firstPointList.notOccupy}` }
-            ].sort(function (a, b) {
-              return a.value - b.value
-            }),
-            roseType: 'radius',
-            label: {
-              normal: {
-                textStyle: {
-                  color: 'rgba(255, 255, 255)'
-                }
-              }
-            },
-            labelLine: {
-              normal: {
-                lineStyle: {
-                  color: 'rgba(255, 255, 255, 0.3)'
-                },
-                smooth: 0.2,
-                length: 10,
-                length2: 20
-              }
-            },
-            itemStyle: {
-              normal: {
-                color: '#c23531',
-                shadowBlur: 200,
-                shadowColor: 'rgba(0, 0, 0, 0.5)'
-              }
-            },
-            animationType: 'scale',
-            animationEasing: 'elasticOut',
-            animationDelay: function (idx) {
-              return Math.random() * 200
-            }
-          }
-        ]
-      }
-      this.chartPie = echarts.init(document.getElementById('J_chartPieBox'))
-      this.chartPie.setOption(option)
-      window.addEventListener('resize', () => {
-        this.chartPie.resize()
-      })
-    },
-    initChartScatter () {
-      var option = {
-        backgroundColor: '#0079BA',
-        title: {
-          text: '大系列库位数量情况',
-          left: 'center',
-          top: 20,
-          textStyle: {
-            color: '#ccc'
-          }
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} ({d}%)'
-        },
-        legend: {
-          orient: 'vertical',
-          left: 10,
-          data: [
-            '成品',
-            '半成品',
-            '原材料'
-          ]
-        },
-        series: [
-          {
-            name: '库位数',
-            type: 'pie',
-            radius: [0, '28%'],
-            label: {
-              position: 'inner',
-              color: 'red',
-              fontSize: 22
-            },
-            labelLine: {
-              show: false
-            },
-            data: [
-              { value: this.secondPointList.countPositionFinishedProduct, name: `成品${this.secondPointList.countPositionFinishedProduct}` },
-              { value: this.secondPointList.countPositionSemiFinishedProduct, name: `半成品${this.secondPointList.countPositionSemiFinishedProduct}` },
-              { value: this.secondPointList.countPositionRawMaterials, name: `原材料${this.secondPointList.countPositionRawMaterials}` }
-            ]
-          },
-          {
-            name: '数量',
-            type: 'pie',
-            radius: ['50%', '75%'],
-            label: {
-              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
-              backgroundColor: '#eee',
-              borderColor: '#aaa',
-              borderWidth: 1,
-              borderRadius: 4,
-              // shadowBlur:3,
-              // shadowOffsetX: 2,
-              // shadowOffsetY: 2,
-              // shadowColor: '#999',
-              // padding: [0, 7],
-              rich: {
-                a: {
-                  color: '#999',
-                  lineHeight: 22,
-                  align: 'center'
-                },
-                abg: {
-                  backgroundColor: '#333',
-                  width: '100%',
-                  align: 'right',
-                  height: 22,
-                  borderRadius: [4, 4, 0, 0]
-                },
-                hr: {
-                  borderColor: '#aaa',
-                  width: '100%',
-                  borderWidth: 0.5,
-                  height: 0
-                },
-                b: {
-                  fontSize: 16,
-                  lineHeight: 33
-                },
-                per: {
-                  color: '#eee',
-                  backgroundColor: '#334455',
-                  padding: [2, 4],
-                  borderRadius: 2
-                }
-              }
-            },
-            data: [
-              { value: this.secondPointList.countQuantityFinishedProduct, name: `成品${this.secondPointList.countQuantityFinishedProduct}` },
-              { value: this.secondPointList.countQuantitySemiFinishedProduct, name: `半成品${this.secondPointList.countQuantitySemiFinishedProduct}` },
-              { value: this.secondPointList.countQuantityRawMaterials, name: `原材料${this.secondPointList.countQuantityRawMaterials}` }
-            ]
-          }
-        ]
-      }
-      this.chartBar = echarts.init(
-        document.getElementById('J_chartScatterBox')
-      )
-      this.chartBar.setOption(option)
-      window.addEventListener('resize', () => {
-        this.chartBar.resize()
-      })
-    },
-    initCate () {
-      var option = {
-        color: ['#17B3A3'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        title: {
-          text: '盒底盒盖库位数量情况',
-          left: 'center',
-          top: 20,
-          textStyle: {
-            color: '#ccc'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          nameTextStyle: {
-            color: '#FFFFFF',
-            fontSize: '20'
-          },
-          data: ['盒底', '盒盖']
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            interval: 0,
-            rotate: 40
-          }
-        },
-        series: [
-          {
-            type: 'bar',
-            name: '数量',
-            stack: '总量',
-            label: {
-              show: true,
-              position: 'inside'
-            },
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
-            },
-            data: [this.coverList.baseQuantity, this.coverList.coverQuantity]
-          },
-          {
-            type: 'bar',
-            name: '库位数量',
-            stack: '总量',
-            label: {
-              show: true,
-              position: 'inside'
-            },
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
-            },
-            data: [this.coverList.basePosition, this.coverList.coverPosition]
-          }
-        ]
-      }
-      this.chartCate = echarts.init(document.getElementById('J_category'))
-      this.chartCate.setOption(option)
-      window.addEventListener('resize', () => {
-        this.chartCate.resize()
-      })
-    },
-    initAxis () {
-      var option = {
-        color: ['#FFCD42'],
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
-            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
-          }
-        },
-        title: {
-          text: '小系列库位数量情况',
-          left: 'center',
-          top: 20,
-          textStyle: {
-            color: '#ccc'
-          }
-        },
-        xAxis: {
-          type: 'category',
-          data: this.smallList.categoryName
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            interval: 0,
-            rotate: 40
-          }
-        },
-        series: [
-          {
-            data: this.smallList.quantity,
-            type: 'bar',
-            name: '数量',
-            stack: '总量',
-            label: {
-              show: true,
-              position: 'inside'
-            },
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
-            }
-          },
-          {
-            type: 'bar',
-            name: '库位数量',
-            stack: '总量',
-            label: {
-              show: true,
-              position: 'inside'
-            },
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(220, 220, 220, 0.8)'
-            },
-            data: this.smallList.position
-          }]
-      }
-      this.chartAxis = echarts.init(document.getElementById('J_axis'))
-      this.chartAxis.setOption(option)
-      window.addEventListener('resize', () => {
-        this.chartAxis.resize()
-      })
-    }
-  }
-}
-</script>
-
-<style lang='scss'>
-.mod-demo-echarts {
-  background-color: #0079ba;
-  > .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: 600px;
-  }
-}
-.tagClass{
-  height: 6%;
-  font-size: 30px;
-}
-.titleClass{
-  width: 70%;
-  margin-left: 15%;
-  background: #B8D4E9;
-}
-</style>

src/views/common/bigScreen2.vue

@@ -1,26 +1,65 @@
 <template>
   <div class='mod-demo-echarts' :style="`height: ${winHeight}px`">
-        <el-card class="titleClass">
+    <!-- <div :style="`font-size: ${60 * beilv}px`" style="margin-left:30%;color:white;margin-bottom:10px"><img :height="`${60 * beilv}px`" src="../../assets/img/title.png">&nbsp;奔一电气立体库展示屏</div> -->
-        <el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
+      <!-- <el-card class="titleClass">
-        <el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
-        <el-tag class="tagClass" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
-        <el-tag class="tagClass" type='warning' color="#E9EAEF" effect="dark">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : '入库'}}&emsp;</el-tag>
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`" type='success' color="#E9EAEF" effect="dark">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
+        <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>
       </el-card>
-    <hr />
+    <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-font" :span="11">云 洁 科 技 展示屏</el-col>
+      <el-col class="mod-demo-echarts-title-icon" :span="4">
         <el-row>
-      <el-col :span='11' :offset='1'>
+          <el-col :offset="1" :span="5">
-        <div id='J_chartPieBox' class='chart-box'></div>
+            <img style="width: 100%;" src="../../assets/img/bigLed/icon1.png" alt="">
           </el-col>
-      <el-col :span='11'>
+          <el-col :offset="1" :span="5">
-        <div id='J_chartScatterBox' class='chart-box'></div>
+            <img style="width: 100%;" src="../../assets/img/bigLed/icon2.png" alt="">
+          </el-col>
+          <el-col :offset="1" :span="5">
+            <img style="width: 100%;" src="../../assets/img/bigLed/icon3.png" alt="">
+          </el-col>
+          <el-col :offset="1" :span="5">
+            <img style="width: 100%;" src="../../assets/img/bigLed/icon4.png" alt="">
           </el-col>
         </el-row>
-    <el-row>
-      <el-col :span='6' :offset='1'>
-        <div id='J_category' class='chart-box'></div>
       </el-col>
-      <el-col :span='16'>
+    </el-row>
-        <div id='J_axis' class='chart-box'></div>
+    <el-row class="mod-demo-echarts-secondtitle">
+      <!-- <el-card class="titleClass">
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">一二层空余库位:{{firstPointList.notOccupy12}}</el-tag>
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">三四五六层空余库位:{{firstPointList.notOccupy3456}}</el-tag>
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">七八层空余库位:{{firstPointList.notOccupy78}}</el-tag>
+        <el-tag class="tagClass" :style="`font-size: ${30 * beilv}px`">当前任务编码:{{sTaskInfo.taskDetCode}}&emsp;类型:{{sTaskInfo.taskType === 0 ? '出库' : sTaskInfo.taskType === 1 ?'入库' : '无'}}&emsp;</el-tag>
+      </el-card> -->
+    </el-row>
+    <el-row>
+      <el-col :span='11' style="margin-left:2%">
+        <div class="chart-box chart-box-bg1">
+          <div class="chart-box-title">
+            库位使用情况，共：{{firstPointList.all}}
+          </div>
+          <div id='J_chartPieBox' class='chart-box-pie'></div>
+        </div>
+        <div class="chart-br"></div>
+        <div class="chart-box">
+          <div class="chart-box-title">
+            产品类别库位数量情况(外圈总量，内圈库存)
+          </div>
+          <div id='J_chartScatterBox' class='chart-box-pie'></div>
+        </div>
+      </el-col>
+      <el-col :span='11' :offset='1'>
+        <div class="chart-box chart-box-bg2">
+          <div class="chart-box-title">
+            产品型号库位数量情况
+          </div>
+          <div id='J_category' class='chart-box-bar'></div>
+          <div id='J_axis' class='chart-box-bar'></div>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -28,6 +67,7 @@
 
 <script>
 import echarts from 'echarts'
+const colorOptions = ['#ec6942', '#f4b485', '#88abda']
 export default {
   data () {
     return {
@@ -40,15 +80,34 @@ export default {
       sTaskInfo: {},
       coverList: [],
       smallList: [],
-      winHeight: 0
+      winHeight: 0,
+      beilv: 1
     }
   },
   mounted () {
     this.init()
     this.winHeight = window.innerHeight
+    this.beilv = window.innerWidth / 1920
+    console.log(this.beilv)
     window.addEventListener('resize', () => {
       this.winHeight = window.innerHeight
+      this.beilv = window.innerWidth / 1920
+      this.chartCate.dispose()
+      this.chartAxis.dispose()
+      this.chartBar.dispose()
+      this.chartPie.dispose()
+      this.initChartPie()
+      this.initChartScatter()
+      this.initCate()
+      this.initAxis()
     })
+    setInterval(() => {
+      this.chartCate.dispose()
+      this.chartAxis.dispose()
+      this.chartBar.dispose()
+      this.chartPie.dispose()
+      this.init()
+    }, 60000)
   },
   computed: {
     documentClientHeight: {
@@ -60,14 +119,8 @@ export default {
     if (this.chartPie) {
       this.chartPie.resize()
     }
-    if (this.chartBar) {
+    if (this.chartScatter) {
-      this.chartBar.resize()
+      this.chartScatter.resize()
-    }
-    if (this.chartAxis) {
-      this.chartAxis.resize()
-    }
-    if (this.chartCate) {
-      this.chartCate.resize()
     }
   },
   methods: {
@@ -135,6 +188,9 @@ export default {
       }).then(({data}) => {
         if (data && data.code === 0) {
           this.sTaskInfo = data.list[0]
+          if (!this.sTaskInfo.taskDetCode) {
+            this.sTaskInfo.taskDetCode = ''
+          }
         }
       })
     },
@@ -142,29 +198,40 @@ export default {
     initChartPie () {
       var option = {
         title: {
-          text: `库位使用情况:共${this.firstPointList.all}`,
+          // text: `库位使用情况:共${this.firstPointList.all}`,
           left: 'center',
-          top: 20,
+          top: 20 * this.beilv,
           textStyle: {
-            color: '#fff'
+            color: '#fff',
+            fontSize: 25 * this.beilv
           }
         },
         legend: {
           orient: 'vertical',
-          left: 10,
+          right: 20 * this.beilv,
+          top: 40 * this.beilv,
+          itemWidth: 40 * this.beilv,
+          itemHeight: 40 * this.beilv,
+          itemGap: 80 * this.beilv,
+          icon: 'rect',
           data: [
             '已占用库位',
             '未占用库位'
           ],
           textStyle: {
-            fontSize: 14,
+            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}%)'
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+          textStyle: {
+            fontSize: 20 * this.beilv,
+            lineHeight: 22 * this.beilv
+          }
         },
         visualMap: {
           show: false,
@@ -178,8 +245,8 @@ export default {
           {
             name: '库位数',
             type: 'pie',
-            radius: '65%',
+            radius: '55%',
-            center: ['50%', '50%'],
+            center: ['39%', '50%'],
             data: [
               { value: this.firstPointList.isOccupy, name: `已占用库位` },
               { value: this.firstPointList.notOccupy, name: `未占用库位` }
@@ -189,8 +256,8 @@ export default {
             itemStyle: {
               normal: {
                 label: {
-                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
+                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
-                  backgroundColor: '#eee',
+                  backgroundColor: '#ced0ff',
                   borderColor: '#aaa',
                   borderWidth: 1,
                   borderRadius: 4,
@@ -201,32 +268,41 @@ export default {
                   // padding: [0, 7],
                   rich: {
                     a: {
-                      color: '#999',
+                      color: '#fff',
-                      lineHeight: 22,
+                      lineHeight: 26 * this.beilv,
-                      align: 'center'
+                      backgroundColor: '#8e60f0',
+                      align: 'center',
+                      fontSize: 20 * this.beilv
                     },
                     abg: {
-                      backgroundColor: '#333',
+                      backgroundColor: '#8e60f0',
                       width: '100%',
                       align: 'right',
-                      height: 22,
+                      height: 26 * this.beilv,
-                      borderRadius: [4, 4, 0, 0]
+                      borderRadius: [4, 4, 0, 0],
+                      fontSize: 20 * this.beilv
                     },
                     hr: {
                       borderColor: '#aaa',
                       width: '100%',
-                      borderWidth: 0.5,
+                      borderWidth: 0.5 * this.beilv,
-                      height: 0
+                      height: 0 * this.beilv,
+                      fontSize: 18 * this.beilv
                     },
                     b: {
-                      fontSize: 16,
+                      fontSize: 18 * this.beilv,
-                      lineHeight: 33
+                      lineHeight: 33 * this.beilv,
+                      color: '#8e60f0'
                     },
                     per: {
-                      color: '#eee',
+                      color: '#fff',
-                      backgroundColor: '#334455',
+                      padding: [2 * this.beilv, 4 * this.beilv],
-                      padding: [2, 4],
+                      borderRadius: 2 * this.beilv,
-                      borderRadius: 2
+                      fontSize: 18 * this.beilv
+                    },
+                    c: {
+                      fontSize: 18 * this.beilv,
+                      color: '#8e60f0'
                     }
                   }
                 }
@@ -250,42 +326,55 @@ export default {
     },
     initChartScatter () {
       var option = {
-        backgroundColor: '#0079BA',
+        // backgroundColor: '#0079BA',
+        color: colorOptions,
         title: {
-          text: '大系列库位数量情况(外圈总量，内圈库存)',
+          // text: '大系列库位数量情况(外圈总量，内圈库存)',
           left: 'center',
           top: 0,
           textStyle: {
-            color: '#fff'
+            color: '#fff',
+            fontSize: 25 * this.beilv
           }
         },
         tooltip: {
           trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} ({d}%)'
+          formatter: '{a} <br/>{b}: {c} ({d}%)',
+          textStyle: {
+            fontSize: 20 * this.beilv,
+            lineHeight: 22 * this.beilv
+          }
         },
         legend: {
           orient: 'vertical',
-          left: 10,
+          right: 20 * this.beilv,
+          top: 40 * this.beilv,
+          itemWidth: 40 * this.beilv,
+          itemHeight: 40 * this.beilv,
+          itemGap: 30 * this.beilv,
+          icon: 'rect',
           data: [
             '成品',
             '半成品',
             '原材料'
           ],
           textStyle: {
-            fontSize: 14,
+            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,
+                  fontSize: 12 * this.beilv,
                   formatter: '{b}: {c}'
                 }
               }
@@ -302,12 +391,13 @@ export default {
           {
             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}  {per|{d}%}  ',
+                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}  {per|{d}%}  ',
-                  backgroundColor: '#eee',
+                  backgroundColor: '#ced0ff',
                   borderColor: '#aaa',
                   borderWidth: 1,
                   borderRadius: 4,
@@ -318,32 +408,41 @@ export default {
                   // padding: [0, 7],
                   rich: {
                     a: {
-                      color: '#999',
+                      color: '#fff',
-                      lineHeight: 22,
+                      lineHeight: 26 * this.beilv,
-                      align: 'center'
+                      backgroundColor: '#8e60f0',
+                      align: 'center',
+                      fontSize: 20 * this.beilv
                     },
                     abg: {
-                      backgroundColor: '#333',
+                      backgroundColor: '#8e60f0',
                       width: '100%',
                       align: 'right',
-                      height: 22,
+                      height: 26 * this.beilv,
-                      borderRadius: [4, 4, 0, 0]
+                      borderRadius: [4, 4, 0, 0],
+                      fontSize: 20 * this.beilv
                     },
                     hr: {
                       borderColor: '#aaa',
                       width: '100%',
-                      borderWidth: 0.5,
+                      borderWidth: 0.5 * this.beilv,
-                      height: 0
+                      height: 0 * this.beilv,
+                      fontSize: 18 * this.beilv
                     },
                     b: {
-                      fontSize: 16,
+                      fontSize: 18 * this.beilv,
-                      lineHeight: 33
+                      lineHeight: 33 * this.beilv,
+                      color: '#8e60f0'
                     },
                     per: {
-                      color: '#eee',
+                      color: '#fff',
-                      backgroundColor: '#334455',
+                      padding: [2 * this.beilv, 4 * this.beilv],
-                      padding: [2, 4],
+                      borderRadius: 2 * this.beilv,
-                      borderRadius: 2
+                      fontSize: 18 * this.beilv
+                    },
+                    c: {
+                      fontSize: 18 * this.beilv,
+                      color: '#8e60f0'
                     }
                   }
                 }
@@ -366,6 +465,14 @@ export default {
       })
     },
     initCate () {
+      let [max, beilv] = [0, 0]
+      const kwArr = [this.coverList.basePosition, this.coverList.coverPosition]
+      kwArr.map(item => {
+        if (max < item) {
+          beilv = Math.ceil(item / 50)
+          max = beilv * 50
+        }
+      })
       let option = {
         tooltip: {
           trigger: 'axis',
@@ -373,30 +480,60 @@ export default {
             type: 'cross',
             crossStyle: {
               color: '#999'
+            },
+            label: {
+              textStyle: {
+                fontSize: 16 * this.beilv
               }
             }
           },
+          textStyle: {
+            fontSize: 20 * this.beilv,
+            lineHeight: 22 * this.beilv
+          }
+        },
         legend: {
+          show: true,
+          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: 14,
+            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: ['盒底', '盒盖'],
-            axisPointer: {
+            axisLine: {
-              type: 'shadow'
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
             },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              type: 'shadow',
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
@@ -405,29 +542,61 @@ export default {
             type: 'value',
             name: '数量',
             nameTextStyle: {
-              fontSize: 20,
+              fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           },
           {
             type: 'value',
             name: '库位数量',
             min: 0,
-            max: 50,
+            max,
             nameTextStyle: {
-              fontSize: 20,
+              fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
+        grid: {
+          left: '15%',
+          right: '40%'
+        },
         series: [
           {
             name: '数量',
@@ -436,7 +605,8 @@ export default {
               normal: {
                 label: {
                   show: true,
-                  position: 'inside'
+                  position: 'inside',
+                  fontSize: 18 * this.beilv
                 }
               }
             },
@@ -451,7 +621,8 @@ export default {
               normal: {
                 label: {
                   show: true,
-                  position: 'inside'
+                  position: 'inside',
+                  fontSize: 18 * this.beilv
                 }
               }
             }
@@ -463,8 +634,23 @@ 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]
+      const kwArr = this.smallList.position
+      kwArr.map(item => {
+        if (max < item) {
+          beilv = Math.ceil(item / 50)
+          max = beilv * 50
+        }
+      })
       let option = {
         tooltip: {
           trigger: 'axis',
@@ -472,39 +658,77 @@ export default {
             type: 'cross',
             crossStyle: {
               color: '#999'
+            },
+            label: {
+              textStyle: {
+                fontSize: 16 * this.beilv
               }
             }
           },
+          textStyle: {
+            fontSize: 20 * this.beilv,
+            lineHeight: 22 * this.beilv
+          }
+        },
         legend: {
+          show: false,
           data: [
             '数量',
             '库位数量'
           ],
           textStyle: {
-            fontSize: 14,
+            fontSize: 16 * this.beilv,
             color: '#fff'
           },
-          top: 20
+          top: 27 * this.beilv
         },
         title: {
-          text: '成品小系列库位数量情况',
+          // text: '成品小系列库位数量情况',
           left: 'center',
           top: 0,
           textStyle: {
-            color: '#fff'
+            color: '#fff',
+            fontSize: 25 * this.beilv
           }
         },
+        grid: {
+          top: 60 * this.beilv,
+          left: '15%'
+        },
         color: ['#FFCD42', '#87cefa'],
         xAxis: [
           {
             type: 'category',
             data: this.smallList.categoryName,
-            axisPointer: {
+            axisLine: {
-              type: 'shadow'
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
             },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 18 * this.beilv,
-              color: '#fff'
+              color: '#fff',
+              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'
+              }
             }
           }
         ],
@@ -513,26 +737,54 @@ export default {
             type: 'value',
             name: '数量',
             nameTextStyle: {
-              fontSize: 20,
+              fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 18 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           },
           {
             type: 'value',
             name: '库位数量',
             min: 0,
-            max: 100,
+            max,
             nameTextStyle: {
-              fontSize: 20,
+              fontSize: 20 * this.beilv,
               color: '#fff'
             },
+            axisLine: {
+              lineStyle: {
+                color: '#fff',
+                type: 'dashed'
+              }
+            },
+            axisTick: {
+              show: false
+            },
             axisLabel: {
-              fontSize: 16,
+              fontSize: 16 * this.beilv,
               color: '#fff'
+            },
+            axisPointer: {
+              label: {
+                color: '#666'
+              }
             }
           }
         ],
@@ -544,7 +796,8 @@ export default {
               normal: {
                 label: {
                   show: true,
-                  position: 'top'
+                  position: 'top',
+                  fontSize: 12 * this.beilv
                 }
               }
             },
@@ -559,7 +812,8 @@ export default {
               normal: {
                 label: {
                   show: true,
-                  position: 'top'
+                  position: 'top',
+                  fontSize: 12 * this.beilv
                 }
               }
             }
@@ -579,26 +833,99 @@ export default {
 <style lang='scss'>
 .mod-demo-echarts {
   background-color: #0079ba;
+  background: url('../../assets/img/bigLed/background.png') no-repeat;
+  background-size: 100% 100%;
+  overflow:hidden;
+  padding: 0 5%;
   > .el-alert {
     margin-bottom: 10px;
   }
-  > .el-row {
+  .mod-demo-echarts-title{
-    .el-col {
+    position: relative;
-      padding-top: 10px;
+    top: 2vh;
-      padding-bottom: 10px;
+    width: 100%;
+    height: 13vh;
+    line-height: 13vh;
+    .mod-demo-echarts-title-logo{
+      min-width: 120px;
+      margin-top: 3vh;
+      height: 7vh;
+      background: url('../../assets/img/logo.png') no-repeat;
+      background-size: auto 100%;
+    }
+    .mod-demo-echarts-title-font{
+      font-weight: bold;
+      color: #fff;
+      font-size: 7vh;
+      text-align: center;
+    }
+  }
+  .mod-demo-echarts-secondtitle{
+    margin-bottom: 1vh;
+    width: 100%;
+    height: 12vh;
+    .titleClass{
+      width: 100%;
+      line-height: 12vh;
+      background: transparent;
+      text-align: center;
+      box-shadow: 0 0 0 0 rgba(0,0,0,0);
+      border: 0;
+      .el-card__body{
+        padding: 0;
+      }
+      .tagClass{
+        height: 7vh;
+        line-height: 7vh;
+        background-color: rgba(255, 255, 255, .3) !important;
+        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
+        border: 1px dashed #fff;
+        color: #fff;
+      }
     }
   }
   .chart-box{
-    min-height: 44vh;
+    border-radius: 5px;
+    padding: 20px 5px 10px 5px;
+    border: 2px dashed #fff;
+    position: relative;
+    text-align: center;
+    .chart-box-pie {
+      min-height: 27vh;
+    }
+    .chart-box-bar {
+      min-height: 32vh;
+    }
+    .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, .2);
+      font-size: 2.5vh;
+      color: #fff;
+      font-weight: bold;
+      background-color: #8e60f0;
     }
   }
-.tagClass{
+  // .chart-box-bg1{
-  height: 6%;
+  //   background:  url('../../assets/img/bigLed/round.png') no-repeat;
-  font-size: 30px;
+  //   background-size: 31px 31px;
+  //   background-position: 98% 4%;
+  // }
+  // .chart-box-bg2{
+  //   background:  url('../../assets/img/bigLed/line-round.png') no-repeat;
+  //   background-size: 35px 35px;
+  //   background-position: 98% 2%;
+  // }
+  .chart-br{
+    width: 100%;
+    height: calc(6vh - 35px);
   }
-.titleClass{
-  width: 70%;
-  margin-left: 15%;
-  background: #B8D4E9;
 }
 </style>