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

最新推荐文章于 2024-10-12 11:09:56 发布

原创

最新推荐文章于 2024-10-12 11:09:56 发布

· 1.4k 阅读

12 ·

版权

文章标签：

#前端 #javascript #html

<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>
            <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>
            <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>
      <!-- 中