zhny_ui/ems-ui/src/views/largeScreen/device/right.vue

<template>
  <div>
    <CusModule title="告警信息">
      <BaseChart height="200px" width="100%" :option="pieOptions" />
      <div class="custom-table">
        <el-table :data="tableData" class="customer-table" style="width: 100%" height="650">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="type" label="报警类型" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.type == '预警'" type="info">预警</el-tag>
              <el-tag v-else-if="row.type == '一般'">一般</el-tag>
              <el-tag v-else-if="row.type == '严重'" type="warning">严重</el-tag>
              <el-tag v-else-if="row.type == '紧急'" type="danger">紧急</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="报警内容" align="center" />
          <el-table-column prop="time" label="处理时间" align="center" />
        </el-table>
        <el-pagination :current-page="page.pageIndex" :page-size="100" :small="'small'" :background="true"
          layout="total,  prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </CusModule>
  </div>
</template>
<script>
import CusModule from '../components/CusModule.vue';
import BaseChart from '@/components/BaseChart/index.vue'
import {mapState} from 'vuex';
export default {
  name: 'DeviceRight',
  data () {
    return {
      pieData: [],
      tableData: [
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "紧急",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "电梯报警",
          type: "严重",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "路灯报警",
          type: "一般",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "空调报警",
          type: "一般",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "一般",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "预警",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "预警",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "预警",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "预警",
        },
        {
          code: "12321",
          time: "2023/02/23 12:02",
          content: "变压器报警",
          type: "预警",
        },
      ],
      page: {
        pageIndex: 1,
        pageNun: 10
      }

    }
  },
  components: {
    CusModule,
    BaseChart,
  },
  computed: {
    ...mapState('userState', ['areaType']),
    pieOptions () {
      return this.getPie3D(this.pieData, 0)// 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
    }
  },
  watch: {
    areaType () {
      this.getPieData()
    }
  },
  mounted () {
    this.getPieData()
  },
  methods: {
    handleSizeChange () {

    },
    handleCurrentChange () {

    },
    getPieData () {
      const pieData = [
        {
          name: '紧急',
          value: Math.floor(Math.random() * 100),
          itemStyle: {
            color: '#FF4949'
          },
        },
        {
          name: '严重',
          value: Math.floor(Math.random() * 100),
          itemStyle: {
            color: '#FFBD1F'
          },
        },
        {
          name: '一般',
          value: Math.floor(Math.random() * 100),
          itemStyle: {
            color: '#1990FF'
          },
        },
        {
          name: '预警',
          value: Math.floor(Math.random() * 100),
          itemStyle: {
            color: '#A1A2A7'
          },
        }]
      let totalValue = pieData.reduce((acc, cur) => acc + cur.value, 0);
      this.pieData = pieData.map(item => ({
        ...item,
        proportion: ((item.value / totalValue) * 100).toFixed(2)
      }))
    },
    getParametricEquation (startRatio, endRatio, isSelected, isHovered, k, h) {
      const midRatio = (startRatio + endRatio) / 2;
      const startRadian = startRatio * Math.PI * 2;
      const endRadian = endRatio * Math.PI * 2;
      const midRadian = midRatio * Math.PI * 2;
      // 如果只有一个扇形，则不实现选中效果。
      if (startRatio === 0 && endRatio === 1) {
        isSelected = false;
      }
      k = typeof k !== 'undefined' ? k : 1 / 3;
      const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
      // 鼠标滑过时外环放大大小
      const hoverRate = isHovered ? 1.05 : 1;
      // 返回曲面参数方程
      return {
        u: {
          min: -Math.PI,
          max: Math.PI * 3,
          step: Math.PI / 32,
        },

        v: {
          min: 0,
          max: Math.PI * 2,
          step: Math.PI / 20,
        },

        x (u, v) {
          if (u < startRadian) {
            return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
          }
          if (u > endRadian) {
            return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
          }
          return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        y (u, v) {
          if (u < startRadian) {
            return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
          }
          if (u > endRadian) {
            return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
          }
          return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
        },

        z (u, v) {
          if (u < -Math.PI * 0.5) {
            return Math.sin(u);
          }
          if (u > Math.PI * 2.5) {
            return Math.sin(u) * h * 0.1;
          }
          // 当前图形的高度是Z根据h（每个value的值决定的）
          return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
        },
      };
    },
    getPie3D (pieData, internalDiameterRatio) {
      const series = [];
      let sumValue = 0;
      let startValue = 0;
      let endValue = 0;
      const legendData = [];
      const k =
        typeof internalDiameterRatio !== 'undefined'
          ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
          : 1 / 3;
      for (let i = 0; i < pieData.length; i += 1) {
        sumValue += pieData[i].value;
        const seriesItem = {
          name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
          type: 'surface',
          parametric: true,
          wireframe: {
            show: false,
          },
          pieData: pieData[i],
          pieStatus: {
            selected: false,
            hovered: false,
            k,
          },
        };
        if (typeof pieData[i].itemStyle !== 'undefined') {
          const {itemStyle} = pieData[i];
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.color !== 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
          // eslint-disable-next-line no-unused-expressions
          typeof pieData[i].itemStyle.opacity !== 'undefined'
            ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
            : null;

          seriesItem.itemStyle = itemStyle;
        }
        series.push(seriesItem);
      }
      for (let i = 0; i < series.length; i += 1) {
        endValue = startValue + series[i].pieData.value;
        series[i].pieData.startRatio = startValue / sumValue;
        series[i].pieData.endRatio = endValue / sumValue;
        series[i].parametricEquation = this.getParametricEquation(
          series[i].pieData.startRatio,
          series[i].pieData.endRatio,
          false,
          false,
          k,
          10//在此处传入饼图初始高度h
        );
        startValue = endValue;
        legendData.push(series[i].name);
      }
      // 准备待返回的配置项，把准备好的series 传入。
      const option = {
        legend: {
          orient: "vertical",
          right: '8%',
          top: '22%',
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
          icon: 'circle',
          formatter: (name) => {
            if (this.pieData.length) {
              const item = this.pieData.filter((item) => item.name === name)[0];
              let str = `${name}(${item.value}) ${item.proportion}%`
              return str
            }
          },
        },
        tooltip: {
          formatter: (params) => {
            let str = `${params.marker}${params.seriesName}：${this.pieData[params.seriesIndex].value}` + '个，占比：' + `${this.pieData[params.seriesIndex].proportion}` + '%'
            return str;

          },
        },
        xAxis3D: {
          min: -1,
          max: 1,
        },
        yAxis3D: {
          min: -1,
          max: 1,
        },
        zAxis3D: {
          min: -1,
          max: 1,
        },
        grid3D: {
          show: false,
          boxHeight: 25,//修改立体饼图的高度
          top: '-10%',
          left: '-20%',
          viewControl: {
            // 3d效果可以放大、旋转等，
            alpha: 35,//饼图翻转的程度
            beta: 30,
            rotateSensitivity: 1,
            zoomSensitivity: 0,
            panSensitivity: 0,
            autoRotate: true,//是否自动旋转
            distance: 300,//距离越小看到的饼图越大
          },
        },
        series,
      };
      return option;
    }
  }
}
</script>
<style lang='scss' scoped>
@import url("../index.scss");


.custom-table {
  position: relative;

  /* 去掉table所有边框 */
  ::v-deep.el-table--border th.el-table__cell,
  ::v-deep.el-table td.el-table__cell {
    border-bottom: 1px solid #204D74;
  }

  ::v-deep .el-table th.is-leaf {
    /* 去除上边框 */
    border: none;
  }

  ::v-deep.el-table--border .el-table__cell {
    border-right: none !important;
  }

  ::v-deep.el-table--group,
  .el-table--border {
    border: none !important;
  }

  ::v-deep.el-table::before,
  .el-table--group::after,
  .el-table--border::after {
    background-color: unset !important;
  }

  // 去掉el-table的所有背景颜色以及所有hover的颜色
  ::v-deep.el-table,
  ::v-deep.el-table .el-table__header-wrapper th,
  ::v-deep.el-table--border {
    background-color: transparent;
    color: #07e3f9;
  }

  ::v-deep.el-table tr,
  ::v-deep.el-table__body tr:hover>td {
    background-color: transparent !important;
  }

  ::v-deep .el-table__header-wrapper thead th {
    background: #1B4B6D !important;
    color: #07e3f9;
  }

  ::v-deep .el-table__body-wrapper td {
    color: #B3E3E8;
    background: #0A2431;
  }
}

.el-pagination {
  margin-top: 10px;
}

::v-deep .el-pagination__total,
::v-deep .el-pagination__jump {
  color: #fff;
}
</style>