使用@jiaminghi/data-view实现一个数据大屏

<template>
  <div class="content bg">
    <!-- 全局容器 -->
    <!-- <dv-full-screen-container> -->
    <!-- 第二行 -->
    <div class="module-box" style="align-items: start; margin-top: 10px">
      <!-- 左 -->
      <div style="flex: 0 1 30%">
        <dv-decoration-10 style="height: 5px" />
      </div>
      <div style="flex: 0 1 40%">
        <div class="d-flex">
          <dv-decoration-8 style="height: 50px; flex: 1" />
          <div style="flex: 1" class="tc box-middle">
            <dv-decoration-11 style="height: 50px">智慧工厂数据中心</dv-decoration-11>
          </div>
          <dv-decoration-8 :reverse="true" style="height: 50px; flex: 1" />
        </div>
      </div>
      <div style="flex: 0 1 30%">
        <dv-decoration-10 style="height: 5px; transform: rotateY(180deg)" />
      </div>
    </div>
    <!-- 第二行 -->
    <div class="module-box">
      <!-- 左 -->
      <div style="flex: 0 1 25%">
        <dv-border-box-13 style="width: 100%; height: 200px">
          <div style="box-sizing: border-box">
            <div style="height: 30px; padding: 20px 20px 0 20px">
              <div>设备能耗监测</div>
              <div><dv-decoration-3 style="width: 100px; height: 10px" />

</div> <div style="padding: 10px"> <Bar style="width: 100%; height: 130px"></Bar> <!-- <dv-capsule-chart :config="config_bar" style="width: 100%; height: 140px" /> --> </div> </div> </dv-border-box-13> <dv-border-box-1 style="width: 100%; height: 200px"> <div style="box-sizing: border-box"> <div style="height: 30px; padding: 20px 20px 0 20px"> <div>仓库存储量</div> <div><dv-decoration-6 style="width: 100px; height: 10px" />

</div> <div style="padding: 0 10px 10px 10px"> <dv-capsule-chart :config="config_capsule" style="width: 100%; height: 140px" /> </div> </div> </dv-border-box-1> <dv-border-box-2 style="width: 100%; height: 200px"> <div style="padding: 10px 15px 10px 15px"> <div style="line-height: 30px">设备运转负荷率</div> <div> <dv-water-level-pond :config="config_water" style="width: 100%; height: 150px" /> </div> </div> </dv-border-box-2> </div> <!-- 中 --> <div style="flex: 0 1 50%"> <dv-border-box-12 style="width: 100%; height: 600px; padding: 10px; box-sizing: border-box" > <div class="module-box"> <div style="flex: 0 1 25%"> <dv-border-box-9 style="width: 100%; height: 90px"> <div class="tc"> <div style="padding-top: 10px">设备管理</div> <div style="color: #7ec699; font-size: 16px">100%</div> <div style="color: #7ec699; font-size: 16px">100%</div> </div> </dv-border-box-9> </div> <div style="flex: 0 1 25%"> <dv-border-box-9 style="width: 100%; height: 90px"> <div class="tc"> <div style="padding-top: 10px">生产管理</div> <div style="color: #7ec699; font-size: 16px">100%</div> <div style="color: #7ec699; font-size: 16px">100%</div> </div> </dv-border-box-9> </div> <div style="flex: 0 1 25%"> <dv-border-box-9 style="width: 100%; height: 90px"> <div class="tc"> <div style="padding-top: 10px">物流管理</div> <div style="color: #7ec699; font-size: 16px">100%</div> <div style="color: #7ec699; font-size: 16px">100%</div> </div> </dv-border-box-9> </div> <div style="flex: 0 1 25%"> <dv-border-box-9 style="width: 100%; height: 90px"> <div class="tc"> <div style="padding-top: 10px">人员管理</div> <div style="color: #7ec699; font-size: 16px">100%</div> <div style="color: #7ec699; font-size: 16px">100%</div> </div> </dv-border-box-9> </div> </div> <div> <div style="line-height: 50px">设备数据统计</div> <dv-flyline-chart :config="config_flyline" style="width: 100%; height: 460px" /> </div> </dv-border-box-12> </div> <!-- 右 --> <div style="flex: 0 1 25%"> <dv-border-box-1 style="width: 100%; height: 300px"> <div style="box-sizing: border-box"> <div style="height: 30px; padding: 20px 20px 0 20px"> <div>销售额时间抽</div> </div> <div style="padding: 0 10px 10px 10px"> <dv-conical-column-chart :config="config_conical" style="width: 100%; height: 240px" /> </div> </div> </dv-border-box-1> <dv-border-box-8 style="width: 100%; height: 300px"> <div style="box-sizing: border-box; padding: 10px"> <div style="height: 30px"> <div>车间设备能耗排行</div> <div><dv-decoration-3 style="width: 100px; height: 10px" />

</div> <div> <dv-scroll-ranking-board :config="config_ranking" style="width: 100%; height: 250px" /> </div> </div> </dv-border-box-8> </div> </div> <!-- 第三行 --> <div class="module-box"> <div style="flex: 0 1 50%"> <dv-border-box-8 style="width: 100%; height: 200px"> <div style="box-sizing: border-box; padding: 10px"> <div style="height: 30px"> <div>车间产线耗电统计</div> <div><dv-decoration-3 style="width: 100px; height: 10px" />

</div> <div> <LineChart style="width: 100%; height: 170px"></LineChart> </div> </div> </dv-border-box-8> </div> <div style="flex: 0 1 25%"> <dv-border-box-13 style="width: 100%; height: 200px"> <div style="box-sizing: border-box"> <div style="height: 30px; padding: 20px 20px 0 20px"> <div>动态环图</div> <div><dv-decoration-3 style="width: 100px; height: 10px" />