1.看板表头背景替换

loulijun2021

2023-03-16 4213b32f88c3a02e9e550b1a5d748cf134b8010b

 src/views/kb/index.vue

@@ -3,7 +3,8 @@

    <div class="kb_body">
      <div class="kb_background" />
      <div class="kb_head" style="height: 90px">脉链大数据分析平台</div>
      <div class="kb_background2" />
      <div class="kb_head" style="height: 90px;z-index: 3;letter-spacing: 4px">未来工厂分析平台</div>
      <div class="kb_headerPic" />
      <div class="kb_flex" style="height: 660px">
        <div class="kb_flex_column">
@@ -20,17 +21,27 @@
          <div class="kb_center_block">
            <div style="display: flex;justify-content: center">
              <div class="kb_center_block_children">
                <div>{{ value1 }} 亿度</div>
                <!--                <div class="box01" />-->
                <div style="font-size: 18px;">129,768</div>
                <div class="box02" />
                <div>当日总耗电量</div>
                <div>周耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div>{{ value2 }} 亿立方</div>
                <div class="box01" />
                <div>当日总耗气量</div>
                <!--                <div class="box02" />-->
                <div style="font-size: 18px;">228,702</div>
                <div class="box02" />
                <div>月耗能</div>
              </div>
              <div class="kb_center_block_children">
                <div style="font-size: 18px;">337,035</div>
                <div class="box02" />
                <div>季耗能</div>
              </div>

              <!--              <div class="kb_center_block_children">-->
              <!--                <div>{{ value2 }} 亿立方</div>-->
              <!--                <div class="box01" />-->
              <!--                <div>当日总耗气量</div>-->
              <!--                &lt;!&ndash;                <div class="box02" />&ndash;&gt;-->
              <!--              </div>-->
            </div>
          </div>
        </div>
@@ -39,7 +50,8 @@
            <div id="bar3" style="width: 100%;height: 100%" />
          </div>
          <div class="kb_block">
            <div id="custom1" style="width: 100%;height: 100%" />
            <!--            <div id="custom1" style="width: 100%;height: 100%" />-->
            <div id="barline1" style="width: 100%;height: 100%" />
          </div>
        </div>
      </div>
@@ -63,7 +75,7 @@
<script>
import * as echarts from 'echarts'
import '@/utils/world'
import { bar1, bar2, bar3, bar4, line1, loadEcharts, pie1, pie2 } from '@/utils/myEcharts'
import { bar1, bar2, bar3, bar4, barline1, line1, loadEcharts, pie1, pie2 } from '@/utils/myEcharts'

export default {
  name: 'Index',
@@ -75,99 +87,110 @@
      value2: 78792
    }
  },
  created() {
    setInterval(() => {
      location.reload()
    }, 1000 * 60 * 60 * 2)
  },
  mounted() {
    // 加载世界地图
    this.loadArea()
    //  加载所有
    this.loadAll()
    // 加载右中
    this.loadCustom1()
    setInterval(() => {
      this.loadCustom1()
    }, 5000)
    // // 加载右中
    // this.loadCustom1()
    // setInterval(() => {
    //   this.loadCustom1()
    // }, 5000)

    setInterval(() => {
      this.value1 = Math.floor(Math.random() * 10000 + 5000)
      this.value2 = Math.floor(Math.random() * 10000 + 5000)
    }, 3000)
    }, 9000)
  },
  methods: {

    loadAll() {
      // 加载头部饼图
      let pie1data = [
      const pie1data = [
        {
          name: '装备制造',
          value: 54
          name: '采购逾期',
          value: 3
        }, {
          name: '现代材料',
          value: 44
          name: '进料检验',
          value: 95
        }, {
          name: '新太能源',
          value: 35
          name: '当日当成率',
          value: 83
        }, {
          name: '信息技术',
          value: 30
          name: '设备OEE',
          value: 91
        }, {
          name: '商贸物流',
          value: 20
          name: '销售发货',
          value: 100
        }
      ]
      loadEcharts('pie1', pie1(pie1data))

      setInterval(() => {
        pie1data = [
          {
            name: '装备制造',
            value: Math.floor(Math.random() * 10) + 60
          }, {
            name: '现代材料',
            value: Math.floor(Math.random() * 10) + 60
          }, {
            name: '新太能源',
            value: Math.floor(Math.random() * 20) + 40
          }, {
            name: '信息技术',
            value: Math.floor(Math.random() * 20) + 40
          }, {
            name: '商贸物流',
            value: Math.floor(Math.random() * 20) + 40
          }
        ]
        // pie1data = [
        //   {
        //     name: '装备制造',
        //     value: Math.floor(Math.random() * 10) + 60
        //   }, {
        //     name: '现代材料',
        //     value: Math.floor(Math.random() * 10) + 60
        //   }, {
        //     name: '新太能源',
        //     value: Math.floor(Math.random() * 20) + 40
        //   }, {
        //     name: '信息技术',
        //     value: Math.floor(Math.random() * 20) + 40
        //   }, {
        //     name: '商贸物流',
        //     value: Math.floor(Math.random() * 20) + 40
        //   }
        // ]
        loadEcharts('pie1', pie1(pie1data))
      }, 10000)
      }, 20000)

      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)
      }, 15000)

      //  加载左中
      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, 7541, 7000, 6000, 6500]
      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), 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), 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), 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), 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))
      }, 8000)
        // 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))
      }, 18000)

      //  加载右下
      let scaleData1 = [
@@ -209,7 +232,7 @@
          'name': '设备',
          'value': 30
        }, {
          'name': '其它',
          'name': '人员',
          'value': 20
        }

@@ -277,13 +300,13 @@
            'name': '设备',
            'value': b4
          }, {
            'name': '其它',
            'name': '人员',
            'value': b5
          }
        ]
        loadEcharts('pie2', pie2('品质差异比列', scaleData1))
        loadEcharts('pie3', pie2('异常预警比列', scaleData2))
      }, 7000)
      }, 17000)

      let list = [500, 400, 300, 200, 100]
      //  加载左上
@@ -291,20 +314,25 @@
      setInterval(() => {
        list = [Math.floor(Math.random() * 100) + 500, Math.floor(Math.random() * 100) + 400, Math.floor(Math.random() * 100) + 300, Math.floor(Math.random() * 100) + 200, Math.floor(Math.random() * 100) + 100]
        loadEcharts('bar2', bar2(list))
      }, 6000)
      }, 26000)

      //  加载右上
      loadEcharts('bar3', bar3())
      setInterval(() => {
        loadEcharts('bar3', bar3())
      }, 5500)
      }, 22000)
      //  加载中下
      loadEcharts('bar4', bar4())
      setInterval(() => {
        loadEcharts('bar4', bar4())
      }, 6500)
      }, 16500)

      loadEcharts('barline1', barline1())
      setInterval(() => {
        loadEcharts('barline1', barline1())
      }, 17500)
    },
    // 加载右中
    // 加载右中（弃用）
    loadCustom1() {
      const list = [
        {
@@ -594,8 +622,8 @@
          textStyle: {
            // color: '#fff',
            color: '#00ffff',
            fontSize: '18',
            fontWeight: 'lighter'
            fontSize: '20',
            fontWeight: 'bolder'
          }
        },
        grid: {
@@ -631,34 +659,36 @@
            return res
          }
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLabel: {
            interval: 0,
            formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: this.colorX
            }
          },
          axisLine: {
            lineStyle: {
              color: '#032c58'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#032c58'
            }
          },
          axisTick: {
            show: false
          },
          data: xList
        }],
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              interval: 0,
              formatter: '{value}',
              fontSize: 14,
              margin: 20,
              textStyle: {
                color: this.colorX
              }
            },
            axisLine: {
              lineStyle: {
                color: '#032c58'
              }
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: '#032c58'
              }
            },
            axisTick: {
              show: false
            },
            data: xList
          }
        ],
        yAxis: [
          {
            boundaryGap: false,
@@ -670,7 +700,7 @@
                color: this.colorY
              }
            },
            name: '亿（单）',
            name: '万（单）',
            nameTextStyle: {
              color: this.colorY,
              fontSize: 14,
@@ -917,13 +947,23 @@
  bottom: 0;
  width: 1920px;
  height: 887px;
  //background: url('../../assets/images/body.jpg') no-repeat;
  background: url('../../assets/images/body.jpg');
  background: url('../../assets/images/body.jpg') no-repeat;
  //background: url('../../assets/images/body.jpg');
  opacity: 0.4;
  //background: url('../../assets/images/body02.jpg') no-repeat;

}
.kb_background2 {
  position: absolute;
  top: 0;
  width: 1920px;
  height: 887px;
  background: url('../../assets/images/body.jpg') no-repeat;
  //background: url('../../assets/images/body.jpg');
  opacity: 0.4;
  //background: url('../../assets/images/body02.jpg') no-repeat;

}
.kb_flex {
  display: flex;
  justify-content: space-between;
@@ -938,15 +978,18 @@
  margin: auto;
  z-index: 2;
  color: #09d8f2;
  letter-spacing: 2px;
  font-weight: bolder;
}

.kb_headerPic {
  position: absolute;
  top: 39px;
  width: 1808px;
  height: 12px;
  background: url("../../assets/images/kb_headtitle2.png") no-repeat;
  margin-left: 56px;
  top: 0px;
  width: 1885px;
  height: 100px;
  //background: url("../../assets/images/kb_headtitle2.png") no-repeat;
  background: url("../../assets/images/index_head.jpg") no-repeat;
  margin-left: 17.5px;
  z-index: 2;
}

@@ -979,7 +1022,7 @@
.kb_center_block_children {
  height: 120px;
  //border: 1px solid $kbBorderColor;
  width: 360px;
  width: 240px;
  display: flex;
  z-index: 2;
  justify-content: space-around;