完善大屏

zhangzengfei

2022-08-16 ece5b7b7d24f85a3253cf722291e69ca7a406192

 src/views/dataView/index.vue

@@ -36,40 +36,22 @@
        </div>
        <div class="device-count">
          <img src="/images/data-v/d-total.png" alt="" />
          <div
            style="position: absolute;
    top: 43%;
    left: 36%;
    font-size: 26px;
    color: #d9d6d6;"
          >
            设备总量
          </div>
          <div
            style="position: absolute;
    top: 59%;
    left: 45%;
    font-size: 26px;
    color: #ffffff;"
          >
            6
          <div class="device-total">
            <p>设备总量</p>
            <p style="color:#FFF">6</p>
          </div>

          <div
            class="online"
            style="position: absolute;
    right: 23%;
    top: 17%;"
          >
          <div class="device-online">
            <img src="/images/data-v/online.png" alt="" />

            <p style="margin-top: 10px;">在线</p>
            <p style="color:#FFF">6</p>
          </div>
          <div
            class="offline"
            style="position: absolute;
    right: 23%;
    top: 58%;"
          >
          <div class="device-offline">
            <img src="/images/data-v/offline.png" alt="" />

            <p style="margin-top: 10px;">离线</p>
            <p style="color:#FFF">0</p>
          </div>
        </div>
      </div>
@@ -100,6 +82,36 @@
      lineChart: {},
      pieChart: {},
      barChart: {},
      top10: [
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        },
        {
          name: "人事",
          value: 230
        }
      ],
      lineChartOption: {
        grid: {
          left: "3%",
@@ -287,8 +299,12 @@
        ]
      },
      pieChartOption: {
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "bottom"
          top: "70%",
          bottom: "center"
        },
        color: [
          "rgb(54, 60, 231)",
@@ -302,16 +318,21 @@
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [20, 160],
            center: ["50%", "50%"],
            roseType: "area",
            radius: [60, 80],
            center: ["50%", "40%"],
            // roseType: "area",
            itemStyle: {
              borderRadius: 8
              borderRadius: 10
            },
            label: {
              show: false
            },
            data: [23, 55, 11, 33, 22, 66]
            data: [
              { value: 22, name: "a" },
              { value: 22, name: "b" },
              { value: 33, name: "c" },
              { value: 35, name: "d" }
            ]
          }
        ]
      }
@@ -575,4 +596,33 @@
  margin-top: 35px;
  margin-left: 68px;
}
.device-total {
  position: absolute;
  top: 43%;
  left: 36%;
  font-size: 26px;
  color: rgb(217, 214, 214);
  text-align: center;
}
.device-online {
  position: absolute;
  width: 30%;
  top: 22%;
  right: 4%;
  color: rgb(217, 214, 214);
}

.device-online img,
.device-offline img {
  float: left;
  margin-right: 10px;
}

.device-offline {
  position: absolute;
  width: 30%;
  top: 57%;
  right: 4%;
  color: rgb(217, 214, 214);
}
</style>