UA ipInput修改

he wei

2023-11-29 baaee5d47dd0e1ec4e9519a4858418cc36bdc0ab

 src/components/instrumentBoard.vue

@@ -4,46 +4,6 @@

var highlight = "#03b7c9";

var demoData = [
  {
    name: "电压",
    value: 220,
    unit: "V",
    pos: ["16.6%", "40%"],
    range: [0, 400],
  },
  { name: "电流", value: 32, unit: "A", pos: ["49.8%", "40%"], range: [0, 60] },
  {
    name: "功率因数",
    value: 0.9,
    pos: ["83%", "40%"],
    range: [0.1, 1.0],
    splitNum: 9,
  },
  // {
  //   name: "有功功率",
  //   value: 6.34,
  //   unit: "kW",
  //   pos: ["16.6%", "75%"],
  //   range: [0, 50],
  // },
  // {
  //   name: "有功电能",
  //   value: 6.28,
  //   unit: "kWh",
  //   pos: ["49.8%", "75%"],
  //   range: [0, 50],
  // },
  // {
  //   name: "电网频率",
  //   value: 50,
  //   unit: "Hz",
  //   pos: ["83%", "75%"],
  //   range: [0, 100],
  // },
];


export default {
  extends: BaseChart,
  props: {
@@ -55,26 +15,22 @@
      type: String,
      default: "",
    },
    r: {
      type: [String, Number],
      required: true,
    }
    range: {
      type: Array,
      default() {
        return [0, 400];
      },
    },
  },
  data() {
    return {
      // r: '33.3%',
      pos: ["50%", "48%"],
      r: "80%",
      r1: "62%",
    };
  },
  computed: {
  },
  watch: {
    r() {
      this.$nextTick(() => {

        this.resize(); 
      });
    }
  },
  computed: {},
  watch: {},
  methods: {
    fullScreen() {
      return false;
@@ -85,174 +41,136 @@
    },

    getOption(data) {
      let xLabel = data.xLabel;
      let sData = data.sData;
      let sName = this.name;

      let maxD = Math.max(...sData);
      if (maxD <= 0) {
        maxD = 1;
      } else {
        maxD = Math.round(maxD * 1.2 * 100) / 100;
      }

      let fillData = sData.map(() => maxD);

      let min = 0;
      let max =
        sData.length == 0
          ? 0
          : function (data) {
              let max = data.max;
              if (max == -Infinity) {
                max = 1;
              }
              // max = Math.max(Math.round((max + max * 0.2) * 100) / 100);
              return max;
            };
      
      let self = this;
      let { pos, range, r, r1, unit, name } = this;
      return {
        grid: {
          left: "1%",
          right: "1%",
          bottom: "2%",
          top: "2%",
          left: 0,
          right: 0,
          bottom: 0,
          top: 0,
          containLabel: true,
        },
        series: (function () {
          var result = [];
        series: [
          // 外围刻度
          {
            type: "gauge",
            center: pos,
            radius: r,

          demoData.forEach(function (item) {
            result.push(
              // 外围刻度
              {
                type: "gauge",
                center: item.pos,
                // radius: "33.33%", // 1行3个
                radius: self.r,
            splitNumber: 5,
            min: range[0],
            max: range[1],
            // startAngle: 225,
            startAngle: 200,
            endAngle: -20,
            axisLine: {
              show: true,
              lineStyle: {
                width: 2,
                shadowBlur: 0,
                color: [[1, highlight]],
              },
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: highlight,
                width: 1,
              },
              length: -5,
              splitNumber: 10,
            },
            splitLine: {
              show: true,
              // show: false,
              // length: -14,
              length: 4,
              lineStyle: {
                color: highlight,
              },
            },
            axisLabel: {
              distance: 5,
              // textStyle: {
              //   color: highlight,
              //   fontSize: "14",
              //   fontWeight: "bold",
              // },
            },
            pointer: {
              show: 0,
            },
            detail: {
              show: 0,
            },
          },

                splitNumber: item.splitNum || 10,
                min: item.range[0],
                max: item.range[1],
                startAngle: 225,
                endAngle: -45,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [[1, highlight]],
                  },
                },
                axisTick: {
                  show: true,
                  lineStyle: {
                    color: highlight,
                    width: 1,
                  },
                  // length: -5,
                  splitNumber: 10,
                },
                splitLine: {
                  // show: true,
                  show: false,
                  // length: -14,
                  lineStyle: {
                    color: highlight,
                  },
                },
                axisLabel: {
                  distance: -20,
                  // textStyle: {
                  //   color: highlight,
                  //   fontSize: "14",
                  //   fontWeight: "bold",
                  // },
                },
                pointer: {
                  show: 0,
                },
                detail: {
                  show: 0,
          // 内侧指针、数值显示
          {
            name: name,
            type: "gauge",
            center: pos,
            radius: r1,
            startAngle: 200,
            endAngle: -25,
            min: range[0],
            max: range[1],
            axisLine: {
              show: true,
              lineStyle: {
                width: 16,
                color: [[1, "rgba(255,255,255,.1)"]],
              },
            },
            axisTick: {
              show: 0,
            },
            splitLine: {
              show: 0,
            },
            axisLabel: {
              show: 0,
            },
            pointer: {
              show: true,
              length: "85%",
              width: 3,
            },
            detail: {
              show: true,
              offsetCenter: [0, "90%"],
              textStyle: {
                fontSize: 16,
                color: "#fff",
              },
              formatter: [
                "{name|" + name + "}",
                "{value} " + (unit || ""),
              ].join("\n"),
              rich: {
                name: {
                  fontSize: 12,
                  lineHeight: 20,
                  color: "#ddd",
                },
              },

              // 内侧指针、数值显示
            },
            itemStyle: {
              normal: {
                color: highlight,
              },
            },
            data: [
              {
                name: item.name,
                type: "gauge",
                center: item.pos,
                radius: "30.33%",
                startAngle: 225,
                endAngle: -45,
                min: item.range[0],
                max: item.range[1],
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 16,
                    color: [[1, "rgba(255,255,255,.1)"]],
                  },
                },
                axisTick: {
                  show: 0,
                },
                splitLine: {
                  show: 0,
                },
                axisLabel: {
                  show: 0,
                },
                pointer: {
                  show: true,
                  length: "105%",
                },
                detail: {
                  show: true,
                  offsetCenter: [0, "200%"],
                  textStyle: {
                    fontSize: 20,
                    color: "#fff",
                  },
                  formatter: [
                    "{value} " + (item.unit || ""),
                    "{name|" + item.name + "}",
                  ].join("\n"),
                  rich: {
                    name: {
                      fontSize: 14,
                      lineHeight: 30,
                      color: "#ddd",
                    },
                  },
                },
                itemStyle: {
                  normal: {
                    color: highlight,
                  },
                },
                data: [
                  {
                    value: item.value,
                  },
                ],
              }
            );
          });

          return result;
        })(),
                value: data,
              },
            ],
          },
        ],
      };
    },
  },
  mounted() {
    
    this.setData({
      xLabel: [],
      sData: [],
    });
    
  },
};
</script>