修改首页的电源品牌展示样式

longyvfengyun

2024-09-10 5272b59a402773d8f9d15d6229de2e4a22663106

修改首页的电源品牌展示样式

 src/components/myCharts/PieChart.vue

@@ -1,5 +1,6 @@
<script>
import BaseChart from "./BaseChart";

export default {
  name: "PieChart",
  extends: BaseChart,
@@ -17,27 +18,29 @@
        color: this.getColor(opt),
        title: this.getTitle(opt),
        tooltip: {
          trigger: 'item',
          trigger: "item",
          confine: true,
          formatter: '{a} <br/>{b} : {c} ({d}%)'
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
        },
        series: this.getSeries(opt)
        series: this.getSeries(opt),
      };
    },
    getColor(opt) {     // 配置自定义颜色
    getColor(opt) {
      // 配置自定义颜色
      // 未配置自定义颜色
      if(!opt || !opt.color) {
        return []
      if (!opt || !opt.color) {
        return [];
      }

      return opt.color;
    },
    getTitle(opt) {     // 配置标题
    getTitle(opt) {
      // 配置标题
      // 未配置标题
      if(!opt || !opt.title) {
      if (!opt || !opt.title) {
        return {
          show: false,
        };
@@ -46,42 +49,42 @@
      // 返回标题
      return opt.title;
    },
    getSeries(opt) {    // 设置series
    getSeries(opt) {
      // 设置series
      // 未配置series
      if(!opt || !opt.series) {
      if (!opt || !opt.series) {
        return [];
      }

      // 设置配置项
      let series = opt.series.map(item=>{
        item.type='pie';
      return opt.series.map((item) => {
        item.type = "pie";
        item.radius = "55%";
        item.center = ['50%', '50%'];
        item.center = ["50%", "50%"];
        item.emphasis = {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        };
        return item;
      });
      return series;
    },
  },
  mounted() {
    this.setData({
      title: {
        show: false,
        text: '数据初始化',
        text: "数据初始化",
      },
      series:[{
        name: '初始化',
        data:[
          {value: 0, name: '初始化数据'}
        ]
      }]
      series: [
        {
          name: "初始化",
          data: [{ value: 0, name: "初始化数据" }],
        },
      ],
    });
  }
}
  },
};
</script>

 src/components/myCharts/PieRoseChart.vue

New file
@@ -0,0 +1,89 @@
<script>
import BaseChart from "./BaseChart";
export default {
  name: "PieRoseChart",
  extends: BaseChart,
  data() {
    return {};
  },
  methods: {
    setData(data) {
      let option = this.getOption(data);
      this.setOption(option);
    },
    getOption(opt) {
      return {
        animation: false,
        color: this.getColor(opt),
        title: this.getTitle(opt),
        tooltip: {
          trigger: "item",
          confine: true,
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
        },
        series: this.getSeries(opt),
      };
    },
    getColor(opt) {
      // 配置自定义颜色
      // 未配置自定义颜色
      if (!opt || !opt.color) {
        return [];
      }

      return opt.color;
    },
    getTitle(opt) {
      // 配置标题
      // 未配置标题
      if (!opt || !opt.title) {
        return {
          show: false,
        };
      }

      // 返回标题
      return opt.title;
    },
    getSeries(opt) {
      // 设置series
      // 未配置series
      if (!opt || !opt.series) {
        return [];
      }

      // 设置配置项
      return opt.series.map((item) => {
        item.type = "pie";
        item.radius = ["50%", "90%"];
        item.center = ["50%", "50%"];
        item.roseType = "area";
        item.itemStyle = {
          borderRadius: 8,
        };
        item.emphasis = {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        };
        return item;
      });
    },
  },
  mounted() {
    this.setData({
      series: [
        {
          name: "初始化",
          data: [{ value: 40, name: "初始化数据" }],
        },
      ],
    });
  },
};
</script>

 src/views/home/home-ynkm.vue

@@ -162,7 +162,8 @@
      <div class="row" v-show="isShowPower">
        <card>
          <big-screen-card title="电源品牌">
            <pie3d ref="powerChart"></pie3d>
            <!--            <pie3d ref="powerChart"></pie3d>-->
            <power-pie-chart ref="powerChart"></power-pie-chart>
          </big-screen-card>
        </card>
      </div>
@@ -231,6 +232,7 @@
import LedNum from "@/components/ledNum";
import pieChart from "./components/pieCharts";
import BarChartAlarm from "./components/batt-chart-alarm";
import PowerPieChart from "@/components/myCharts/PieRoseChart.vue";

import createWs from "@/assets/js/websocket";
import { sethoubeiTime, formatSeconds } from "@/assets/js/tools";
@@ -308,6 +310,7 @@
    pieChart,
    BarChartAlarm,
    bar3d,
    PowerPieChart,
  },
  methods: {
    alarmTypeChangede(value) {
@@ -454,6 +457,34 @@
        res.sData = arr;
        res.sData.push({ name, value });
      }
      let total_datas = 0;
      res.sData.map((item) => {
        total_datas += item.value;
      });
      const option = {
        title: {
          show: true,
          text: "总数",
          subtext: total_datas,
          textStyle: {
            color: "#f2f2f2",
            fontSize: 20,
            align: "center",
          },
          subtextStyle: {
            fontSize: 18,
            color: ["#ff9d19"],
          },
          x: "center",
          y: "center",
        },
        series: [
          {
            name: "电源品牌",
            data: res.sData,
          },
        ],
      };

      // 存在电源品牌显示电源品牌图形
      if (total) {
@@ -467,7 +498,7 @@
        this.$refs.chart_alarm?.resize();
        this.$refs.alarmPieChart?.resize();
      });
      this.$refs.powerChart.setData(res);
      this.$refs.powerChart.setData(option);
    },
    updateTestData(obj) {
      const { month, year, quarter } = obj.data2;
@@ -631,8 +662,8 @@

      // 电源品牌
      this.$refs.powerChart.getChart().on("click", (params) => {
        let producer = [params.seriesName];
        if ("其他" == params.seriesName) {
        let producer = [params.name];
        if ("其他" == params.name) {
          producer = this.otherPwrProd;
        }
        this.goToPowerMagerPage(producer);