1.综合看板数据动态化

loulijun2021

2022-10-07 b4972fd2d422f1a29be5282ab10fad00425931cc

1.综合看板数据动态化

 src/utils/myEcharts.js

@@ -1570,7 +1570,7 @@
export function zhkb01() {
  // const zhkb01name = ['计划完成进度(自产)', '计划完成进度(外购)'] // 名称
  const zhkb01name = ['', ''] // 名称
  const zhkb01Value = [88, 95] // 值
  const zhkb01Value = [Math.ceil(Math.random() * 10 + 90), Math.ceil(Math.random() * 10 + 90)] // 值
  const zhkb01Max = []

  const max = Math.ceil(Math.max(...zhkb01Value.map(r => r)) * 1.1)
@@ -2235,7 +2235,8 @@

export function zhkb04() {
  const myColor = ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3']
  const data = [330, 404, 780, 509, 150]
  // const data = [330, 404, 780, 509, 150]
  const data = [Math.ceil(Math.random() * 100 + 500), Math.ceil(Math.random() * 100 + 600), Math.ceil(Math.random() * 100 + 700), Math.ceil(Math.random() * 400 + 500), Math.ceil(Math.random() * 100 + 200)]
  const option = {
    backgroundColor: 'transparent',
    grid: {
@@ -2397,7 +2398,8 @@
//   var XName = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  var XName = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
  var data1 = [
    [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
    // [123, 121, 123, 321, 222, 111, 234, 121, 123, 321, 222, 321]
    [Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300), Math.ceil(Math.random() * 100 + 100), Math.ceil(Math.random() * 100 + 200), Math.ceil(Math.random() * 100 + 300)]
    // [123, 154, 234, 321, 120, 390, 634],
    // [63, 194, 234, 321, 278, 110, 534],
    // [53, 254, 234, 321, 118, 240, 434],
@@ -3192,7 +3194,8 @@
}

export function zhkb09() {
  const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
  // const dataY = [60, 70, 80, 90, 60, 70, 80, 90, 80, 90, 60, 70, 80, 90]
  const dataY = [(60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 + Math.random() * 10), (90 - Math.random() * 30), (80 - Math.random() * 30), (90 - Math.random() * 30), (60 + Math.random() * 30), (70 + Math.random() * 20), (80 - Math.random() * 10), (90 - Math.random() * 30)]

  const option = {
    backgroundColor: 'transparent',
@@ -3349,8 +3352,10 @@
  const _legendColor = '#8FD8FF'
  const _fontSize = 16
  const _fontColor = '#8FD8FF'
  const data1 = [70, 90, 100, 70, 90, 100]
  const data2 = [80, 60, 80, 50, 90, 60]
  // const data1 = [70, 90, 100, 70, 90, 100]
  // const data2 = [80, 60, 80, 50, 90, 60]
  const data1 = [70 + Math.random() * 20, 90 - Math.random() * 20, 100 - Math.random() * 20, 70 + Math.random() * 20, 90 - Math.random() * 20, 80 - Math.random() * 20]
  const data2 = [80 + Math.random() * 20, 60 + Math.random() * 20, 80 - Math.random() * 20, 50 + Math.random() * 20, 90 - Math.random() * 20, 60 + Math.random() * 20]
  const option = {
    backgroundColor: 'transparent',
    legend: {
@@ -3371,7 +3376,8 @@
      containLabel: true
    },
    yAxis: {
      max: Math.ceil(Math.max(...data1) * 1.2),
      // max: Math.ceil(Math.max(...data1) * 1.2),
      max: 100,
      type: 'value',
      position: 'left',
      axisLine: {
@@ -3631,7 +3637,7 @@
        name: '设备利用率',
        type: 'bar',
        barGap: '70%',
        data: [30, 75, 77, 39, 85],
        data: [Math.ceil(30 + Math.random() * 20), Math.ceil(75 - Math.random() * 20), Math.ceil(77 - Math.random() * 20), Math.ceil(39 + Math.random() * 20), Math.ceil(85 - Math.random() * 20)],
        barWidth: 12,
        itemStyle: {
          normal: {
@@ -3675,7 +3681,7 @@
      {
        name: '设备开机率',
        type: 'bar',
        data: [90, 45, 27, 20, 85],
        data: [Math.ceil(90 - Math.random() * 20), 45 + Math.ceil(Math.random() * 20), Math.ceil(27 + Math.random() * 20), Math.ceil(20 + Math.random() * 60), Math.ceil(85 - Math.random() * 20)],
        barWidth: 12,
        itemStyle: {
          normal: {

 src/views/kb/zhkb.vue

@@ -4,7 +4,7 @@
    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_background2" />
      <div class="kb_head">智能订单看板</div>
      <div class="kb_head">智能工厂综合管理</div>
      <!--      <div class="kb_headerPic" />-->
      <div class="kb_headerPic kb_flex_space_between">
        <div id="zhkbTop01" style="width: 800px;height:36px;" />
@@ -26,9 +26,9 @@
                <div>计划完成进度（外购） 30000吨</div>
              </div>
              <div class="kb_flex_space_between" style="padding: 0 15px;height: 20px;">
                <div style="color:#fff">生产类型</div>
                <div style="color:#fff">生产数量</div>
                <div style="color:#fff">完成进度</div>
                <div :style="{color:colorX}">生产类型</div>
                <div :style="{color:colorX}">生产数量</div>
                <div :style="{color:colorX}">完成进度</div>
              </div>
              <div>
                <div class="kb_flex_space_between">
@@ -66,7 +66,7 @@
                    </div>
                    <div style="margin-left: 30px;">
                      <div>8000吨</div>
                      <div style="color:#fff;">昨日入库数量</div>
                      <div :style="{color:colorX}">昨日入库数量</div>
                    </div>
                  </div>
                </div>
@@ -77,7 +77,7 @@
                    </div>
                    <div style="margin-left: 30px;">
                      <div>10000吨</div>
                      <div style="color:#fff;">昨日出库数量</div>
                      <div :style="{color:colorX}">昨日出库数量</div>
                    </div>
                  </div>
                </div>
@@ -85,7 +85,7 @@
              </div>
              <div style="height: 190px;position: relative" class="kb_flex_space_between">
                <div id="zhkb12" style="width: 190px;padding: 0;" class="kb_block" />
                <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #fff">入库及时率
                <div style="position: absolute;bottom: 40px;left: 55px;width: 100px;height: 30px;color: #c7e7ff">入库及时率
                </div>

                <div
@@ -287,17 +287,17 @@
        loadEcharts('zhkb06', zhkb06())
        loadEcharts('zhkb06_2', zhkb06())
      }, 1000 * 8)
      setInterval(() => {
        loadEcharts('zhkb07_1', zhkb07())
        loadEcharts('zhkb07_2', zhkb07())
        loadEcharts('zhkb07_3', zhkb07())
        loadEcharts('zhkb07_4', zhkb07())
        loadEcharts('zhkb07_5', zhkb07())
        loadEcharts('zhkb07_6', zhkb07())
      }, 1000 * 5)
      // setInterval(() => {
      //   loadEcharts('zhkb07_1', zhkb07())
      //   loadEcharts('zhkb07_2', zhkb07())
      //   loadEcharts('zhkb07_3', zhkb07())
      //   loadEcharts('zhkb07_4', zhkb07())
      //   loadEcharts('zhkb07_5', zhkb07())
      //   loadEcharts('zhkb07_6', zhkb07())
      // }, 1000 * 5)
      setInterval(() => {
        loadEcharts('zhkb08', zhkb08())
      }, 1000 * 6.5)
      }, 1000 * 9.5)
      setInterval(() => {
        loadEcharts('zhkb09', zhkb09())
      }, 1000 * 10.5)
@@ -388,6 +388,7 @@
          {
            // name: 'title',
            type: 'pie',
            silent: true,
            radius: [60, 90],
            center: ['75%', '60%'],
            label: {
@@ -476,6 +477,7 @@
      }
    },
    getzhkb12() {
      const value1 = Math.ceil(Math.random() * 10 + 60)
      const option = {
        backgroundColor: 'transparent',
        grid: {
@@ -486,11 +488,11 @@
          containLabel: true
        },
        title: {
          text: '85%',
          text: value1 + '%',
          x: '36%',
          y: '40%',
          textStyle: {
            color: '#fff',
            color: this.colorX,
            fontSize: 26
          }
        },
@@ -499,7 +501,7 @@
            type: 'liquidFill',
            radius: '80%',
            // data: [0.6],
            data: [0.6, 0.4, 0.2],
            data: [value1 / 100, 0.4, 0.2],
            backgroundStyle: {
              color: {
                type: 'radial',
@@ -798,19 +800,24 @@
    },

    getzhkb02() {
      let a, b, c, d
      a = Math.ceil(Math.random() * 10 + 20)
      b = Math.ceil(Math.random() * 10 + 20)
      c = Math.ceil(Math.random() * 10 + 20)
      d = 100 - a - b - c
      const data = [
        {
          'name': '生产已排满',
          'value': 40
          'value': a
        }, {
          'name': '物料不足',
          'value': 10
          'value': b
        }, {
          'name': '插班',
          'value': 20
          'value': c
        }, {
          'name': '其它',
          'value': 30
          'value': d
        }]

      const colorArr = ['#00FFFF', '#FFFF00', '#00FF00', '#FF00FF']
@@ -831,7 +838,7 @@
          //   color: ['#ff9d19']
          // },
          x: 'center',
          y: '-2%'
          y: '2%'
        },
        grid: {
          left: '0%',
@@ -842,7 +849,7 @@
        },
        legend: {
          orient: 'vertical',
          top: 'middle',
          top: '30%',
          left: '5%',
          textStyle: {
            color: colorArr.map(r => r),
@@ -857,8 +864,9 @@

            left: 150,
            radius: ['40%', '61%'],
            center: ['50%', '50%'],
            center: ['50%', '60%'],
            type: 'pie',
            silent: true,
            label: {
              normal: {
                show: true,
@@ -886,7 +894,7 @@
              normal: {
                show: true,
                length: 30,
                length2: 55
                length2: 30
              },
              emphasis: {
                show: true
@@ -900,8 +908,9 @@
          {
            left: 150,
            radius: ['30%', '34%'],
            center: ['50%', '50%'],
            center: ['50%', '60%'],
            type: 'pie',
            silent: true,
            label: {
              normal: {
                show: false
@@ -929,13 +938,15 @@
                color: '#09d8f2'
              }
            }]
          }, {
          },
          {
            left: 150,
            name: '外边框',
            type: 'pie',
            silent: true,
            clockWise: false, // 顺时加载
            hoverAnimation: false, // 鼠标移入变大
            center: ['50%', '50%'],
            center: ['50%', '60%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
@@ -974,7 +985,7 @@
      })

      let currentIndex = -1 // 当前高亮图形在饼图数据中的下标
      const changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器
      var changePieInterval = setInterval(selectPie, 2000) // 设置自动切换高亮图形的定时器

      function highlightPie() { // 取消所有高亮并高亮当前图形
        // for (var idx in option.series[0].data) {