1.看板需求修改

loulijun2021

2022-09-19 b17c221f7bf6b91b7ef4cf74f637065d271bb8d7

1.看板需求修改

 src/utils/myEcharts.js

@@ -117,7 +117,7 @@
}

export function bar1(data1, data2) {
  const titleText = '车间人员出勤率'
  const titleText = '工厂人员出勤率'
  const path = 'path://M214,1079l8-6h16l8,6-8,6H222Z'
  // const data1 = ['80', '90', '70', '30', '50']
  // const data2 = ['70', '60', '50', '40', '30']
@@ -145,7 +145,7 @@
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      },
      subtextStyle: {
@@ -178,7 +178,7 @@
    xAxis: {
      type: 'category',
      // data: ['车间一', '车间二', '车间三', '车间四', '车间五'],
      data: ['总装车间', '注塑车间', '电机车间', '铝件车间'],
      data: ['浙江皇冠', '永康皇冠', '北辰电机', '恒泰皇冠园林', '迈拓塑业'],
      axisLine: {
        lineStyle: {
          show: true,
@@ -194,7 +194,7 @@
          fontFamily: 'Microsoft YaHei',
          color: colorX, // x轴颜色
          fontWeight: 'normal',
          fontSize: '14',
          fontSize: '12',
          lineHeight: 22
        }
      }
@@ -371,7 +371,7 @@
  return option
}

export function line1(dataY) {
export function line1(dataY, dataY2, dataY3, dataY4, dataY5) {
  const option = {
    backgroundColor: 'transparent',
    grid: {
@@ -382,14 +382,15 @@
      containLabel: true
    },
    title: {
      text: '销售额概览',
      // text: '销售额概览',
      text: '各工厂能耗',
      left: '50%',
      top: '0%',
      textAlign: 'center',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
@@ -411,8 +412,7 @@
      show: false,
      right: 20,
      orient: 'vertical',
      // data: ['今日','昨日']
      data: ['今日']
      data: ['浙江皇冠', '永康皇冠', '北辰电机', '恒泰皇冠园林', '迈拓塑业']
    },
    xAxis: {

@@ -480,14 +480,14 @@
    },
    yAxis:
      {
        name: '万元',
        name: '',
        nameTextStyle: {
          color: colorY,
          fontSize: 14,
          lineHeight: 20
        },
        boundaryGap: false,
        splitNumber: 4,
        splitNumber: 5,
        type: 'value',
        // offset: -30,
        axisLabel: {
@@ -513,69 +513,167 @@
          show: true
        }
      },
    series: [{
      name: '今日',
      type: 'line',
      smooth: true,
      showSymbol: false,
      symbol: 'circle',
      symbolSize: 6,
      // data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
      data: dataY,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(199, 237, 250,0.5)'
          }, {
            offset: 1,
            color: 'rgba(199, 237, 250,0.2)'
          }], false)
        }
      },
      itemStyle: {
        normal: {
    series: [
      {
        name: '浙江皇冠',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['200', '400', '500', '300', '400', '500', '600', '800', '900', '1000', '1100', '1322'],
        data: dataY,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(0,215,236,0.5)'
            }, {
              offset: 1,
              color: 'rgba(0,215,236,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
          // color: '#f7b851'
          color: `rgb(73, 226, 196)`
          //   color: `rgb(73, 226, 196)`
            color: `rgb(0,215,236)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      lineStyle: {
        normal: {
          width: 3
      {
        name: '永康皇冠',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY2,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(60,244,184,0.5)'
            }, {
              offset: 1,
              color: 'rgba(60,244,184,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            color: `rgb(60,244,184)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '北辰电机',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY3,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(55,183,255,0.5)'
            }, {
              offset: 1,
              color: 'rgba(55,183,255,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#58c8da'
            color: `rgb(55,183,255)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '恒泰皇冠园林',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY4,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(26,202,200,0.5)'
            }, {
              offset: 1,
              color: 'rgba(26,202,200,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#58c8da'
            color: `rgb(26,202,200)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      },
      {
        name: '迈拓塑业',
        type: 'line',
        smooth: true,
        showSymbol: false,
        symbol: 'circle',
        symbolSize: 6,
        // data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
        data: dataY5,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(243,94,94,0.5)'
            }, {
              offset: 1,
              color: 'rgba(243,94,94,0.2)'
            }], false)
          }
        },
        itemStyle: {
          normal: {
            // color: '#58c8da'
            color: `rgb(243,94,94)`
          }
        },
        lineStyle: {
          normal: {
            width: 3
          }
        }
      }
    }
      // {
      //     name: '昨日',
      //     type: 'line',
      //     smooth: true,
      //     showSymbol: false,
      //     symbol: 'circle',
      //     symbolSize: 6,
      //     data: ['1200', '1400', '808', '811', '626', '488', '1600', '1100', '500', '300', '1998', '822'],
      //     areaStyle: {
      //         normal: {
      //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      //                 offset: 0,
      //                 color: 'rgba(216, 244, 247,1)'
      //             }, {
      //                 offset: 1,
      //                 color: 'rgba(216, 244, 247,1)'
      //             }], false)
      //         }
      //     },
      //     itemStyle: {
      //         normal: {
      //             color: '#58c8da'
      //         }
      //     },
      //     lineStyle: {
      //         normal: {
      //             width: 3
      //         }
      //     }
      // }

    ]
  }

@@ -677,7 +775,7 @@
      textAlign: 'center',
      textStyle: {
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
@@ -710,7 +808,7 @@
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
@@ -977,7 +1075,7 @@
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },
@@ -1100,19 +1198,23 @@

export function bar4() {
  const data = [{
    name: '总装车间',
    name: '浙江皇冠',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '注塑车间',
    name: '永康皇冠',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '电机车间',
    name: '北辰电机',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '铝件车间',
    name: '恒泰皇冠园林',
    value: Math.floor(Math.random() * 10 + 90)
  },
  {
    name: '迈拓塑业',
    value: Math.floor(Math.random() * 10 + 90)
  }
    //   {
@@ -1151,13 +1253,13 @@
      containLabel: true
    },
    title: {
      text: '车间达成率',
      text: '工厂达成率',
      x: '46%',
      y: '5%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      },
      subtextStyle: {
@@ -1290,7 +1392,7 @@
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '18',
        fontSize: '20',
        fontWeight: 'bolder'
      }
    },

 src/views/kb/index.vue

@@ -21,17 +21,17 @@
          <div class="kb_center_block">
            <div style="display: flex;justify-content: center">
              <div class="kb_center_block_children">
                <div>43,256</div>
                <div style="font-size: 18px;">129,768</div>
                <div class="box02" />
                <div>周耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>72,234</div>
                <div style="font-size: 18px;">228,702</div>
                <div class="box02" />
                <div>月耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>122,345</div>
                <div style="font-size: 18px;">337,035</div>
                <div class="box02" />
                <div>季耗能</div>
              </div>
@@ -149,36 +149,42 @@
        loadEcharts('pie1', pie1(pie1data))
      }, 10000)

      let bar1data1 = ['92', '90', '96', '98', '99']
      let bar1data1 = ['92', '90', '96', '98', '99', '97']
      let bar1data2 = ['70', '60', '50', '40', '30']
      //  加载左下
      loadEcharts('bar1', bar1(bar1data1, bar1data2))
      setInterval(() => {
        // bar1data1 = [1, 2, 3, 4, 5]
        // bar1data2 = [1, 2, 3, 4, 5]
        bar1data1 = [Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92)]
        bar1data1 = [Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92), Math.floor(Math.random() * 8 + 92)]
        bar1data2 = [Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70), Math.floor(Math.random() * 15 + 70)]
        loadEcharts('bar1', bar1(bar1data1, bar1data2))
      }, 9000)

      //  加载左中
      let dataY = ['200', '400', '500', '300', '400', '440', '330', '380', '400', '460', '390', '270']
      loadEcharts('line1', line1(dataY))
      // let dataY = ['200', '400', '500', '300', '400', '440', '330', '380', '400', '460', '390', '270']
      const dataY = [8101, 6382, 7541, 7279, 5288, 7562, 7163, 7541, 4288]
      const dataY2 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
      const dataY3 = [5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000), 5000 + Math.floor(Math.random() * 2000)]
      const dataY4 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
      const dataY5 = [3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000), 3000 + Math.floor(Math.random() * 2000)]
      loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
      setInterval(() => {
        dataY = [
          Math.floor(Math.random() * 100 + 200),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 200),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 400),
          Math.floor(Math.random() * 100 + 300),
          Math.floor(Math.random() * 100 + 200),
          Math.floor(Math.random() * 100 + 400)
        ]
        loadEcharts('line1', line1(dataY))
        // dataY = [
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 400),
        //   Math.floor(Math.random() * 100 + 300),
        //   Math.floor(Math.random() * 100 + 200),
        //   Math.floor(Math.random() * 100 + 400)
        // ]
        loadEcharts('line1', line1(dataY, dataY2, dataY3, dataY4, dataY5))
      }, 8000)

      //  加载右下
@@ -611,7 +617,7 @@
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            fontSize: '18',
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
@@ -968,6 +974,7 @@
  z-index: 2;
  color: #09d8f2;
  letter-spacing: 2px;
  font-weight: bolder;
}

.kb_headerPic {