fix 1126

cloudroam

2024-11-26 e6421c4ece90615aa0333ec58a723979c978a62b

 src/views/screen1/components/chart-itm.vue

@@ -7,11 +7,19 @@
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot yellow"></div>
        <div class="chart-status-desc">>警告设备</div>
        <div class="chart-status-desc">警告设备</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot red"></div>
        <div class="chart-status-desc">异常设备</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot blue"></div>
        <div class="chart-status-desc">从有到无</div>
      </div>
      <div class="flex1 flex tooltip">
        <div class="chart-status-dot purple"></div>
        <div class="chart-status-desc">从无到有</div>
      </div>
    </div>
    <div class="sub-div"></div>
@@ -45,14 +53,16 @@
  methods: {
    initChart() {
      var value = 0.56;
      var v1 = 0, v2 = 0, v3 = 0;
      var v1 = 0, v2 = 0, v3 = 0,v4 = 0,v5 = 0;
      for (var item of this.areas) {
        v1 += parseInt(item.areaStatic.normal || 0)
        v2 += parseInt(item.areaStatic.warn || 0)
        v3 += parseInt(item.areaStatic.alarm || 0)
        v1 += parseInt(item.areaStatic.normal || 0);
        v2 += parseInt(item.areaStatic.warn || 0);
        v3 += parseInt(item.areaStatic.alarm || 0);
        v4 += parseInt(item.areaStatic.beNothing || 0);
        v5 += parseInt(item.areaStatic.beSomething || 0);
      }
      this.total = v1 + v2 + v3
      // console.log('v1', v1, v2, v3)
      this.total = v1 + v2 + v3 + v4 + v5
      console.log('v1', v1, 'v2', v2, 'v3', v3, 'v4', v4, 'v5', v5);

      this.option = {
        tooltip: {
@@ -63,11 +73,12 @@
          {
            // name: 'Access From',
            type: "pie",
            silent: "ture",
            minAngle: 0, // 最小角度设置为0.01度
            silent: true,
            radius: ["55%", "68%"],
            center: ["50%", "55%"],
            // radius: "75%",
            avoidLabelOverlap: false,
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
@@ -79,6 +90,11 @@
              align: "left",
              color: "rgba(108, 153, 190, 1)",

              labelLine: {
                show: true,
                length: 5, // 引导线长度
                length2: 10 // 第二段引导线长度
              },
              // rich: {
              //   time: {
              //     fontSize: 10,
@@ -95,7 +111,13 @@
                fontWeight: "bold",
              },
            },

            // data: [
            //   { value: v1, itemStyle: { normal: this.getGradient("rgba(150, 222, 194, 1)", "rgba(6, 188, 117, 1)") } },
            //   { value: v2, itemStyle: { normal: this.getGradient("rgba(236, 197, 13, 1)", "rgba(221, 175, 1, 1)") } },
            //   { value: v3, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
            //   { value: v4, itemStyle: { normal: this.getGradient("rgba(249, 109, 0, 1)", "rgba(241, 76, 3, 1)") } },
            //   { value: v5, itemStyle: { normal: this.getGradient("rgba(128, 0, 128, 1)", "rgba(241, 76, 3, 1)") } }
            // ]
            data: [
              {
                value: v1,
@@ -134,7 +156,7 @@
                },
              },
              {
                value: v3,
                value: parseInt(v3),
                // name: "异常连接数",
                itemStyle: {
                  normal: {
@@ -146,6 +168,40 @@
                      {
                        offset: 0,
                        color: "rgba(241, 76, 3, 1)",
                      },
                    ]),
                  },
                },
              },
              {
                value:  parseInt(v4),
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                      {
                        offset: 1,
                        color: "rgba(52, 90, 255, 1)",
                      },
                      {
                        offset: 0,
                        color: "rgba(52, 90, 255, 1)",
                      },
                    ]),
                  },
                },
              },
              {
                value:  parseInt(v5),
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0.2, 1, 0.3, 0, [
                      {
                        offset: 1,
                        color: "rgba(128, 0, 128, 1)",
                      },
                      {
                        offset: 0,
                        color: "rgba(128, 0, 128, 1)",
                      },
                    ]),
                  },
@@ -175,13 +231,13 @@
  position: relative;

  .tooltips {
    width: 21rem;
    width: 100%;
    height: 2.25rem;
    background: #e3edf8;
    border-radius: 1.42rem;
    position: absolute;
    bottom: -3rem;
    left: calc((100% - 21rem) / 2);
    //left: calc((100% - 21rem) / 2);

    .tooltip {
      margin: 0 auto;
@@ -208,6 +264,13 @@
        background: rgba(223, 177, 2, 1);
      }

      .chart-status-dot.blue {
        background: rgba(52, 90, 255, 1);
      }

      .chart-status-dot.purple {
        background: rgba(128, 0, 128, 1);
      }
      .chart-status-desc {
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;