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

小小儁爺

2024-07-02 56ba7c96dd7054e5d544a9ffbe80593107ecb855

 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;
@@ -323,31 +735,31 @@
  background: url("../../assets/images/box03.png");
}

.text1{
.text1 {
  position: absolute;
  bottom: 10px;
  left: 72px;
}

.text2{
.text2 {
  position: absolute;
  bottom: 10px;
  left: 210px;
}

.text3{
.text3 {
  position: absolute;
  bottom: 10px;
  left: 336px;
}

.text4{
.text4 {
  position: absolute;
  top: 50px;
  left: 223px;
}

.text5{
.text5 {
  position: absolute;
  top: 50px;
  left: 346px;