Vue 大屏数据展示组件库-DataV使用

可用于后台管理项目首页、驾驶舱、可视化大屏等数据图表展示，快速成型网页，比用jquery自己写快多了啦

1官方地址（中文）：DataV

2前期准备：

安装：

cd datav-project

npm install @jiaminghi/data-view

或者

yarn add @jiaminghi/data-view

全局引入：

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

按需引入：

import { borderBox1 } from '@jiaminghi/data-view'

Vue.use(borderBox1)

3示例效果

4示例代码

<template>
  <dv-border-box-3
    backgroundColor="#0a1545"
    style="height: calc(100vh - 40px); padding: 10px"
  >
    <div class="box-header">
      <div class="box-text">
        <div>质量问题类型数量</div>
        <dv-decoration-9
          style="width: 150px; height: 150px; margin: 0 auto" :dur="5">3</dv-decoration-9>
      </div>
      <div class="box-text">
        <div>计划巡检次数</div>
        <dv-decoration-9
          style="width: 150px; height: 150px; margin: 0 auto" :dur="5">10</dv-decoration-9>
      </div>
      <div class="box-text">
        <div>已巡检次数</div>
        <dv-decoration-9
          style="width: 150px; height: 150px; margin: 0 auto" :dur="5">6</dv-decoration-9>
      </div>
      <div class="box-text">
        <div>隐患数量</div>
        <dv-decoration-9
          style="width: 150px; height: 150px; margin: 0 auto" :dur="5">8</dv-decoration-9>
      </div>
      <div class="box-text">
        <div>待整改隐患数量</div>
        <dv-decoration-9
          style="width: 150px; height: 150px; margin: 0 auto" :dur="5">5</dv-decoration-9>
      </div>
    </div>

    <div style="margin: 0 40px">
      <dv-scroll-board :config="table" style="width: 98%; height: 220px" />
    </div>

    <el-container>
      <el-aside width="50%" style="padding: 10px">
        <div class="content-text">隐患类型统计</div>
        <dv-capsule-chart
          :config="config"
          style="width: 500px; height: 25vh; margin: 0 auto"
        />
      </el-aside>
      <el-aside width="50%" style="padding: 10px">
        <div class="content-text">隐患级别统计</div>
        <dv-capsule-chart
          :config="config2"
          style="width: 500px; height: 25vh; margin: 0 auto"
        />
      </el-aside>
    </el-container>
  </dv-border-box-3>
</template>

<script>
export default {
  data() {
    return {
      config: {
        radius: "60%",
        activeRadius: "65%",
        digitalFlopStyle: {
          fontSize: 16,
        },
        data: [
          {
            name: "材料问题",
            value: 3,
          },
          {
            name: "环境问题",
            value: 2,
          },
          {
            name: "施工问题",
            value: 3,
          },
          {
            name: "其他问题",
            value: 0,
          },
        ],
      },
      config2: {
        radius: "60%",
        activeRadius: "65%",
        digitalFlopStyle: {
          fontSize: 16,
        },
        data: [
          {
            name: "一般",
            value: 5,
          },
          {
            name: "严重",
            value: 2,
          },
          {
            name: "非常严重",
            value: 1,
          },
        ],
      },
      table: {
        header: [
          "隐患编号",
          "项目编码",
          "分部名称",
          "分项名称",
          "隐患级别",
          "隐患类型",
          "说明",
        ],
        data: [
          [
            "WT20231011",
            "XM0015562",
            "主体结构",
            "混泥土结构",
            "一般",
            "施工问题",
            "边角未休整",
          ],
          [
            "SS20231012",
            "XM0015563",
            "主体结构",
            "混泥土结构",
            "严重",
            "材料问题",
            "特种钢强度问题",
          ],
          [
            "SS20231013",
            "XM0015563",
            "主体结构",
            "混泥土结构",
            "严重",
            "材料问题",
            "特种钢强度问题",
          ],
          [
            "WT20231014",
            "XM0015562",
            "主体结构",
            "钢筋混泥土结构",
            "一般",
            "施工问题",
            "边角未休整",
          ],
          [
            "WT20231015",
            "XM0015564",
            "主体结构",
            "钢筋混泥土结构",
            "一般",
            "环境问题",
            "雨水浸湿",
          ],
          [
            "AAA2023101",
            "XM0015564",
            "主体结构",
            "钢筋混泥土结构",
            "非常严重",
            "环境问题",
            "雨水浸湿",
          ],
          [
            "WT20231017",
            "XM0015565",
            "主体结构",
            "混泥土结构",
            "一般",
            "材料问题",
            "特种钢强度问题",
          ],
          [
            "WT20231018",
            "XM0015566",
            "主体结构",
            "混泥土结构",
            "一般",
            "施工问题",
            "边角未休整",
          ],
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.box-header {
  padding: 30px;
  color: #ffff;
  display: flex;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
  justify-content: space-around;
  > .box-text {
    height: 270px;
    width: 270px;
    background-color: rgb(29, 46, 117);
    border-radius: 5px;
    text-align: center;
    line-height: 100px;
  }
}
.content-text {
  margin: 6px 30px;
  color: #ffff;
  font-size: 18px;
  font-weight: bold;
}
</style>