1.金华智研院看板开发100%

小小儁爺

2024-07-02 56ba7c96dd7054e5d544a9ffbe80593107ecb855

1.金华智研院看板开发100%

 package.json

@@ -24,6 +24,7 @@
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-count-to": "^1.0.13",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
  },

 src/assets/images/map.png

 src/utils/myEcharts.js

@@ -4501,3 +4501,761 @@

  return option
}

export function echart06() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '10%',
      top: '20%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        // max: 1000,
        splitNumber: 4,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [

      {
        name: ' ',
        type: 'line',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,

        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [500, 800, 100, 900, 1000, 800]
      }

    ]
  }

  return option
}

export function echart07() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '35%',
      bottom: '0%',
      containLabel: true
    },
    title: {
      text: '整厂终检率',
      x: '40%',
      y: '18%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 45, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        max: 100,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value} %',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [

      {
        name: ' ',
        type: 'line',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,

        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [99, 98, 100, 96, 100, 97]
      }

    ]
  }

  return option
}

export function echart08() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '35%',
      bottom: '0%',
      containLabel: true
    },
    title: {
      text: '缺陷分类比例',
      x: '40%',
      y: '18%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 45, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['压铸', '成型', '抛光', '点焊', '烤漆', '电镀']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        max: 100,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value} %',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [
      {
        name: ' ',
        type: 'bar',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,
        barWidth: 10,
        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [55, 68, 60, 86, 40, 37]
      }

    ]
  }

  return option
}

export function echart09() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '35%',
      bottom: '0%',
      containLabel: true
    },
    title: {
      text: '虚拟测量',
      x: '45%',
      y: '18%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 45, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['Pro01', 'Pro02', 'Pro03', 'Pro04', 'Pro05', 'Pro06']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        // min: 0,
        max: 3000,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [

      {
        name: ' ',
        type: 'line',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,

        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [2000, 2298, 2800, 0, 2200, 1600]
      }

    ]
  }

  return option
}

export function echart10() {
  var fontColor = '#30eee9'
  const option = {
    backgroundColor: 'transparent',
    grid: {
      left: '5%',
      right: '5%',
      top: '30%',
      bottom: '5%',
      containLabel: true
    },
    title: {
      text: '压力监控',
      x: '46%',
      y: '12%',
      textStyle: {
        // color: '#fff',
        color: '#00ffff',
        fontSize: '14',
        fontWeight: 'bolder'
      }

    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          rotate: 90, // 旋转 45 度
          color: fontColor
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#397cbc'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#195384'
          }
        },
        data: ['13:35', '13:40', '13:45', '13:50', '13:55', '14:00', '14:05', '14:10', '14:15', '14:20', '14:25', '14:30', '14:35', '14:40']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: ' ',
        min: -20,
        max: 20,
        splitNumber: 2,
        axisLabel: {
          formatter: '{value}',
          textStyle: {
            color: '#2ad1d2'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#27b4c2'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#11366e'
          }
        }
      }

    ],
    series: [
      {
        name: ' ',
        type: 'bar',
        // stack: '总量',
        // symbol: 'circle',
        // symbolSize: 8,
        barWidth: 10,
        itemStyle: {
          normal: {
            color: '#00d4c7',
            lineStyle: {
              color: '#00d4c7',
              width: 1
            },
            areaStyle: {
              // color: '#94C9EC'
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: 'rgba(7,44,90,0.3)'
              }, {
                offset: 1,
                color: 'rgba(0,212,199,0.9)'
              }])
            }
          }
        },
        data: [-10, -20, 5, 10, -5, 20, 10, -10, -20, -10, 5, 10, 20, 10]
      }

    ]
  }

  return option
}

export function echart11() {
  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 + 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: {
      x: '55%',
      y: '10%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 16,
        color: 'rgba(255,255,255,.7)'
      }
    },
    grid: {
      left: '2%',
      top: '30%',
      right: '2%',
      bottom: '0%',
      containLabel: true
    },
    yAxis: {
      // max: Math.ceil(Math.max(...data1) * 1.2),
      // max: 100,
      type: 'value',
      position: 'left',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4E84AC'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}',
        color: '#00FFFF',
        fontSize: 14
      },
      splitLine: {
        show: false
      }
    },
    xAxis: {
      type: 'category',
      nameTextStyle: {
        fontSize: 16,
        color: '#7dd6ea'
      },
      axisLabel: {
        show: true,
        interval: 0,
        // margin: 20,
        textStyle: {
          color: colorX,
          fontSize: 16
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#4E84AC'
          // width: 3
        }
      },
      data: ['钢材改制', '冷墩', '热墩', '热处理', '达克罗', '镀锌']
    },
    series: [
      {
        name: '计划产量',
        type: 'bar',
        barWidth: 15,
        barGap: '30%',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(0,234,255, 1)'
              },
              {
                offset: 1,
                color: 'rgba(0,234,255, .1)'
              }
            ])
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     fontSize: 36,
        //     color: '#00EAFF'
        //   },
        //   formatter: function(params) {
        //     return params.value + '%'
        //   }
        // },
        data: data1,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 15,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: 'start',
        symbolOffset: [-10, 0],
        data: data1,
        width: 2,
        z: 0,
        zlevel: 1
      },
      {
        name: '实际产量',
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgba(252,160,0, 1)'
              },
              {
                offset: 1,
                color: 'rgba(252,160,0, .1)'
              }
            ])
          }
        },
        // label: {
        //   show: true,
        //   position: 'top',
        //   textStyle: {
        //     fontSize: 16,
        //     color: '#FFA200'
        //   },
        //   formatter: function(params) {
        //     return params.value + '%'
        //   }
        // },
        data: data2,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: 'pictorialBar',
        itemStyle: {
          normal: {
            color: '#0F375F'
          }
        },
        symbolRepeat: 'fixed',
        symbolMargin: 15,
        symbol: 'rect',
        symbolClip: true,
        symbolSize: [15, 2],
        symbolPosition: 'start',
        symbolOffset: [10, 0],
        data: data2,
        width: 2,
        z: 0,
        zlevel: 1
      }
    ]
  }
  return option
}

 src/views/kb/xkd.vue

@@ -19,8 +19,8 @@
            <div class="box03" />
            <div class="text2">累计拦截</div>
            <div class="text3">累计阻止</div>
            <div class="text4">874次</div>
            <div class="text5">874次</div>
            <div class="text4">{{ number5 }}次</div>
            <div class="text5">{{ number5 }}次</div>
          </dv-border-box-12>
          <dv-border-box-12 class="block02 block">
            <div class="block_title">自动缺陷分类系统</div>
@@ -30,9 +30,104 @@
            <div class="block_title">缺陷分类统计</div>
            <div id="echart03" style="width: 100%;height: 100%;" />
          </dv-border-box-12>

        </div>
        <div class="center content_block" />
        <div class="center content_block">
          <div class="center01">
            <div class="block04">
              <dv-border-box-10 style="width: 100%;height: 100%;">
                <div style="color: #c7e7ff">总上线时长(H)</div>
                <div style="font-size: 18px;font-weight: bolder">
                  <countTo :start-val="0" :end-val="number1" :duration="3000" />
                </div>
              </dv-border-box-10>
            </div>
            <div class="block04">
              <dv-border-box-10 style="width: 100%;height: 100%;">
                <div style="color: #c7e7ff">总访问量(PV)</div>
                <div style="font-size: 18px;font-weight: bolder">
                  <countTo :start-val="0" :end-val="number2" :duration="3000" />
                </div>
              </dv-border-box-10>
            </div>
            <div class="block04">
              <dv-border-box-10 style="width: 100%;height: 100%;">
                <div style="color: #c7e7ff">总数据量(TB)</div>
                <div style="font-size: 18px;font-weight: bolder">
                  <countTo :start-val="0" :end-val="number3" :duration="3000" />
                </div>
              </dv-border-box-10>
            </div>
            <div class="block04">
              <dv-border-box-10 style="width: 100%;height: 100%;">
                <div style="color: #c7e7ff">系统吞吐量(次/s)</div>
                <div style="font-size: 18px;font-weight: bolder">
                  <countTo :start-val="0" :end-val="number4" :duration="3000" />
                </div>
              </dv-border-box-10>
            </div>
            <div class="block04">
              <dv-border-box-10 style="width: 100%;height: 100%;">
                <div id="echart06" style="width: 100%;height: 100%" />
              </dv-border-box-10>
            </div>
          </div>
          <div class="center02">
            <div class="center02_left">
              <div class="img001" />
            </div>
            <div class="center02_right">
              <dv-decoration-7 style="width:100%;height:30px;padding: 0 20px">永康市(浙)</dv-decoration-7>
              <div style="width: 100%;height: 270px;">
                <dv-border-box-1>
                  <dv-scroll-board :config="config4" style="padding: 30px;width:100%;height:210px;margin-top: -60px;" />
                </dv-border-box-1>
              </div>
            </div>
          </div>
          <div class="center03">
            <dv-border-box-12 class="block">
              <div class="block_title">设备管理层</div>
              <div style="display: flex;flex-direction: column;width: 100%;">
                <div style="display: flex;justify-content: space-evenly;height: 275px;width: 100%;margin-top: 30px;">
                  <div
                    style="display:flex;flex-direction: column;width: 52%;justify-content: center;align-items: center"
                  >
                    <div style="height: 30px;font-weight: bolder">智能工厂设备监控中心</div>
                    <div style="height: 240px;">
                      <dv-scroll-board :config="config5" style="padding: 0px;width:240px;height:100%;margin-top: 0px;" />
                    </div>
                  </div>
                  <div
                    style="display:flex;flex-direction: column;width: 46%;justify-content: center;align-items: center"
                  >
                    <div style="height: 30px;">实时数量</div>
                    <div style="height: 240px;">
                      <dv-scroll-board :config="config6" style="padding: 0px;width:210px;height:100%;margin-top: 0px;" />
                    </div>
                  </div>
                </div>
                <!--                <div style="height: 155px;">123</div>-->
              </div>
            </dv-border-box-12>
            <dv-border-box-12 class="block">
              <div class="block_title">生产管理层</div>
              <div style="display: flex;flex-direction: column;width: 100%;">
                <div id="echart11" style="height: 165px;width: 100%;" />
                <div id="echart10" style="height: 165px;width: 100%;" />
              </div>
            </dv-border-box-12>
          </div>
          <div class="center04">
            <dv-border-box-12 class="block">
              <div class="block_title">品质管理层</div>
              <div class="center04_block">
                <div id="echart07" style="width: 240px;height: 100%;" />
                <div id="echart08" style="width: 240px;height: 100%;" />
                <div id="echart09" style="width: 480px;height: 100%;" />
              </div>
            </dv-border-box-12>
          </div>
        </div>
        <div class="right content_block">
          <dv-border-box-12 class="block01 block">
            <div class="block_title">平台功能使用率</div>
@@ -42,13 +137,21 @@
            <div class="block_title">用户类型</div>
            <div id="echart05" style="width: 100%;height: 100%;margin-top: 30px" />
          </dv-border-box-12>
          <dv-border-box-12 class="block02 block">
            <div class="block_title">成本效益分析</div>
            <div>内容区</div>
          </dv-border-box-12>
          <dv-border-box-12 class="block01 block">
            <div class="block_title">成本效益分析</div>
            <div>内容区</div>
          <dv-border-box-12 class="block03 block">
            <div class="block03_top">
              <div class="block03_top_left">
                <div class="block03_top_title">设备警报</div>
                <dv-scroll-board :config="config1" style="width:100%;height:80%" />
              </div>
              <div class="block03_top_right">
                <div class="block03_top_title">安全警报</div>
                <dv-scroll-board :config="config2" style="width:100%;height:80%" />
              </div>
            </div>
            <div class="block03_bottom">
              <div class="block03_bottom_title">环境检测数据异常</div>
              <dv-scroll-board :config="config3" style="width:100%;height:80%" />
            </div>
          </dv-border-box-12>
        </div>
      </div>
@@ -61,25 +164,175 @@
<script>
import * as echarts from 'echarts'
import '@/utils/world'
import { echart01, echart02, echart03, echart04, echart05, loadEcharts } from '@/utils/myEcharts'
import {
  echart01,
  echart02,
  echart03,
  echart04,
  echart05,
  echart06,
  echart07,
  echart08, echart09, echart10, echart11,
  loadEcharts
} from '@/utils/myEcharts'
import '@/utils/echarts-liquidfill.min.js'
import countTo from 'vue-count-to'

export default {
  name: 'Index',
  components: { countTo },
  data() {
    return {
      colorX: '#c7e7ff',
      colorY: '#7696c5'
      colorY: '#7696c5',
      config1: {
        // headerBGC: '#003B51',
        header: ['设备名', '状态', '时间'],
        data: [
          ['注塑机', '<span style="color:red;">异常</span>', '05:19'],
          ['压铸机', '<span style="color:red;">异常</span>', '06:52'],
          ['打磨机', '<span style="color:red;">异常</span>', '08:57'],
          ['抛光机', '<span style="color:red;">异常</span>', '09:09'],
          ['锻造机', '<span style="color:red;">异常</span>', '10:20'],
          ['铸造机', '<span style="color:red;">异常</span>', '11:23'],
          ['注塑机', '<span style="color:red;">异常</span>', '11:29'],
          ['压铸机', '<span style="color:red;">异常</span>', '13:20'],
          ['打磨机', '<span style="color:red;">异常</span>', '15:59'],
          ['抛光机', '<span style="color:red;">异常</span>', '16:20']
        ],
        // index: true,
        // columnWidth: [50],
        align: ['center']
      },

      config2: {
        // headerBGC: '#003B51',
        header: ['警告', '状态', '时间'],
        data: [
          ['注塑机', '<span style="color:red;">异常</span>', '06:29'],
          ['压铸机', '<span style="color:red;">异常</span>', '07:58'],
          ['打磨机', '<span style="color:red;">异常</span>', '09:05'],
          ['抛光机', '<span style="color:red;">异常</span>', '09:09'],
          ['锻造机', '<span style="color:red;">异常</span>', '10:20'],
          ['铸造机', '<span style="color:red;">异常</span>', '12:22'],
          ['注塑机', '<span style="color:red;">异常</span>', '14:29'],
          ['压铸机', '<span style="color:red;">异常</span>', '15:20'],
          ['打磨机', '<span style="color:red;">异常</span>', '15:59'],
          ['抛光机', '<span style="color:red;">异常</span>', '16:20']
        ],
        // index: true,
        // columnWidth: [50],
        align: ['center']
      },

      config3: {
        // headerBGC: '#003B51',
        header: ['环境异常', '状态', '时间'],
        data: [
          ['金工车间温度', '<span style="color:red;">异常</span>', '05:19'],
          ['包装车间湿度', '<span style="color:red;">异常</span>', '06:52'],
          ['包装车间温度', '<span style="color:red;">异常</span>', '08:57'],
          ['金工车间湿度', '<span style="color:red;">异常</span>', '09:09'],
          ['涂装车间湿度', '<span style="color:red;">异常</span>', '10:20'],
          ['焊接车间温度', '<span style="color:red;">异常</span>', '11:23'],
          ['抛光车间温度', '<span style="color:red;">异常</span>', '11:29'],
          ['焊接车间温度', '<span style="color:red;">异常</span>', '13:20'],
          ['抛光车间温度', '<span style="color:red;">异常</span>', '15:59'],
          ['焊接车间温度', '<span style="color:red;">异常</span>', '16:20']
        ],
        // index: true,
        // columnWidth: [50],
        align: ['center']
      },

      config4: {
        // headerBGC: '#003B51',
        // header: ['设备名', '状态', '时间'],
        evenRowBGC: 'transparent',
        oddRowBGC: 'rgba(0,59,81,0.5)',
        data: [
          ['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
          ['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
          ['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
          ['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>'],
          ['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
          ['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
          ['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
          ['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>'],
          ['627', '<span style="color:#7696c5;font-weight: bolder">627TB</span>'],
          ['650', '<span style="color:#7696c5;font-weight: bolder">650TB</span>'],
          ['605', '<span style="color:#7696c5;font-weight: bolder">605TB</span>'],
          ['675', '<span style="color:#7696c5;font-weight: bolder">675TB</span>']
        ],
        // index: true,
        // columnWidth: [50],
        align: ['center']
      },
      config5: {
        // headerBGC: '#003B51',
        header: ['车间名称', '设备编号', '状态'],
        evenRowBGC: 'transparent',
        oddRowBGC: 'rgba(0,59,81,0.5)',
        data: [
          ['金工', '激光切割', '正常'],
          ['金工', '激光切割', '正常'],
          ['抛光', '打磨机01', '正常'],
          ['抛光', '打磨机02', '正常'],
          ['抛光', '抛光机01', '<span style="color:red">异常</span>'],
          ['抛光', '抛光机02', '<span style="color:red">异常</span>'],
          ['金工', '激光切割', '正常'],
          ['金工', '激光切割', '正常']
        ],
        // index: true,
        // columnWidth: [50],
        align: ['center']
      },
      config6: {
        // headerBGC: '#003B51',
        header: ['机械臂编号', '出错提示'],
        evenRowBGC: 'transparent',
        oddRowBGC: 'rgba(0,59,81,0.5)',
        data: [
          ['机械臂A01', '抓取物料失败'],
          ['机械臂A02', '抓取物料失败'],
          ['机械臂A03', '抓取物料失败'],
          ['机械臂A04', '抓取物料失败'],
          ['机械臂A05', '抓取物料失败'],
          ['机械臂B01', '抓取物料失败'],
          ['机械臂B02', '抓取物料失败'],
          ['机械臂B03', '抓取物料失败'],
          ['机械臂B04', '抓取物料失败'],
          ['机械臂B05', '抓取物料失败']

        ],
        // index: true,
        // columnWidth: [50],
        align: ['center']
      },
      number1: 126560,
      number2: 4321,
      number3: 3921,
      number4: 37063,
      number5: 764

    }
  },
  created() {
    setInterval(() => {
      location.reload()
    }, 1000 * 60 * 60 * 2)
    }, 1000 * 60 * 60 * 4)// 每八小时刷新一次
  },
  mounted() {
    this.getEcharts()

    setInterval(() => {
      this.number1 = this.number1 + 100
      this.number2 = this.number2 + 15
      this.number3 = this.number3 + 20
      this.number4 = this.number4 + 50

      this.number5 = this.number5 + Math.floor(Math.random() * 5)
    }, 1000 * 30)
  },
  methods: {
    getEcharts() {
@@ -89,6 +342,31 @@
      loadEcharts('echart03', echart03())
      loadEcharts('echart04', echart04())
      loadEcharts('echart05', echart05())
      loadEcharts('echart06', echart06())
      loadEcharts('echart07', echart07())
      loadEcharts('echart08', echart08())
      loadEcharts('echart09', echart09())
      loadEcharts('echart10', echart10())
      loadEcharts('echart11', echart11())

      setInterval(() => {
        loadEcharts('echart01', echart01())
        this.getLiquidFill()
        loadEcharts('echart02', echart02())
        loadEcharts('echart03', echart03())
      }, 1000 * 60)

      setInterval(() => {
        loadEcharts('echart05', echart05())
        loadEcharts('echart06', echart06())
        loadEcharts('echart07', echart07())
        loadEcharts('echart08', echart08())
      }, 1000 * 60 * 2)
      setInterval(() => {
        loadEcharts('echart09', echart09())
        loadEcharts('echart10', echart10())
        loadEcharts('echart11', echart11())
      }, 1000 * 60 * 3)
    },
    getLiquidFill() {
      const value1 = Math.ceil(Math.random() * 10 + 80)
@@ -276,7 +554,88 @@

.center {
  width: 1000px;
  display: flex;
  flex-direction: column;
}

.center01 {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.center02 {
  height: 320px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.center02_left {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img001 {
  background: url("../../assets/images/map.png") no-repeat;
  background-size: 100% 100%;
  width: 386px;
  height: 311px;
}

.center02_right {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dv-decoration-7 {
  display: flex;
  justify-content: space-between;
  font-weight: bolder;
  letter-spacing: 4px;

}

.center03 {
  height: 330px;
  width: 100%;
  display: flex;
  justify-content: space-between;

  .dv-border-box-12 {
    width: 49%;
  }
}

.center04 {
  height: 160px;
  width: 100%;
  display: flex;
}

.block04 {
  width: 180px;
  height: 100px;

  ::v-deep .border-box-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }
}

.center04_block {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.right {
@@ -303,6 +662,59 @@
  height: 200px;
}

.block03 {
  height: 460px;
  width: 100%;

  ::v-deep .border-box-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.block03_top {
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: space-between;
}

.block03_top_left {
  display: flex;
  flex-direction: column;
  width: 48%;
}

.block03_top_title {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block03_top_right {
  display: flex;
  flex-direction: column;
  width: 48%;
}

.block03_bottom {
  width: 100%;
  height: 220px;
  display: flex;
  flex-direction: column;
}

.block03_bottom_title {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;

}

.block_title {
  background: linear-gradient(to right, #36a5cf, #000013);
  width: 200px;