SaaS-lib/hx-ai-intelligent/src/view/monitor/energyMonitor/analysisTable/index.vue

<template>
  <a-table
    row-key="id"
    :columns="columns"
    :data-source="data"
    bordered
    :row-selection="rowSelection">
    <template #bodyCell="{ column, record }">
      <template v-if="column.title === '操作'">
        <a-button type="link" @click="setStandard(record)" v-if="record.id != selectedKey[0]"
          >设为目标值</a-button
        >
      </template>
    </template>
  </a-table>
</template>

<script lang="ts">
  import { defineComponent, ref, inject, watch, onMounted } from 'vue';

  export default defineComponent({
    name: 'AnalysisTable',
    setup() {
      const selectedKey = ref([]);
      const rowSelection = {
        type: 'radio',

        selectedRowKeys: selectedKey,
        // onChange: (selectedRowKeys: string[]) => {
        //   selectedKey.value = selectedRowKeys;
        //   debugger;
        // },
      };
      const columns = [
        {
          title: '设备/节点',
          dataIndex: 'name',
        },
        {
          title: '统计值',
          dataIndex: 'value',
        },
        {
          title: '同比',
          children: [
            {
              title: '△差值',
              dataIndex: 'yoyDiff',
            },
            {
              title: '增长率',
              dataIndex: 'yoyRate',
            },
          ],
        },
        {
          title: '环比',
          children: [
            {
              title: '△差值',
              dataIndex: 'momDiff',
            },
            {
              title: '增长率',
              dataIndex: 'momRate',
            },
          ],
        },
        {
          title: '纵向对比',
          children: [
            {
              title: '△差值',
              dataIndex: 'zongxiangDiff',
            },
            {
              title: '增长率',
              dataIndex: 'zongxiangRate',
            },
          ],
        },

        {
          title: '操作',
          // dataIndex: 'date',
        },
      ];
      let data = ref<any[]>([]);

      interface PageData {
        // 图表 表格数据
        graphTableList: any[];
        // 图表 表格表头
        graphTableColumns: any[];
        // 图表 图表数据
        graphGraphList: any[];
        // 分析 表格数据
        analysisTableList: any[];
        // 分析 图表数据
        analysisGraphList: any[];
      }
      const pageData = inject<PageData>('pageData');

      if (!pageData) {
        throw new Error('pageData is not provided');
      }
      // 监听 pageData 的变化
      watch(
        () => pageData as PageData,
        (_newValue, _oldValue) => {
          // 深度拷贝
          data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
          setStandard(data.value[0]);
        },
        { deep: true },
      );
      onMounted(() => {
        // 深度拷贝
        data.value = JSON.parse(JSON.stringify(pageData.analysisTableList));
        // selectedKey.value = [data.value[0]];
        setStandard(data.value[0]);
      });
      const setStandard = (record: any) => {
        selectedKey.value = [record.id];
        data.value.forEach((item) => {
          // id: 'HLlmTZp8_0805_0001';
          // momDiff: 38.28; 环比差值
          // momRate: '-171.58%'; 环比率
          // momValue: -22.31; 环比值
          // name: '总电表';
          // value: 10.56; 值
          // yoyDiff: 38.28; 同比差值
          // yoyRate: '-138.10%'; 同比率
          // yoyValue: -27.72; 同比值
          if (item.id == record.id) {
            item.zongxiangDiff = '——';
            item.zongxiangRate = '——';
          } else {
            item.zongxiangDiff = (item.value - record.value).toFixed(2);
            item.zongxiangRate = ((item.zongxiangDiff / record.value) * 100).toFixed(2) + '%';
          }
        });
      };
      return {
        data,
        columns,
        rowSelection,
        selectedKey,
        setStandard,
      };
    },
  });
</script>

<style lang="less" scoped></style>