寒假生活指导13

import { ColorPicker } from 'element-ui';
<template>
  <el-main>
    <h1>碳报告区块链页面</h1>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        prop="reportId"
        label="报告编号"
        width="300"
        fixed
      ></el-table-column>
      <!-- <el-table-column
        prop="submissionDate"
        label="提交日期"
        width="120"
      ></el-table-column> -->
      <el-table-column
        prop="companyName"
        label="企业名称"
        width="300"
      ></el-table-column>
      <el-table-column
        prop="industry"
        label="行业"
        width="300"
      ></el-table-column>
      <!-- <el-table-column
        prop="emissionType"
        label="排放类型"
        width="150"
      ></el-table-column> -->
      <el-table-column
        prop="emissionAmount"
        label="排放量"
        width="120"
      ></el-table-column>
      <!-- <el-table-column
        prop="auditStatus"
        label="审核状态"
        width="100"
      ></el-table-column>
      <el-table-column
        prop="auditDate"
        label="审核日期"
        width="150"
      ></el-table-column> -->
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
          <el-button
            type="text"
            size="small"
            :style="{ color: 'green' }"
            @click="xiazai"
            >追溯</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="报告详情" :visible.sync="dialogVisible" width="30%">
      <p>报告编号：{{ xiangqing.reportId }}</p>
      <p>公司名称：{{ xiangqing.companyName }}</p>
      <p>提交日期：{{ xiangqing.submissionDate }}</p>
      <p>排放物：{{ xiangqing.emissionType }}</p>
      <p>排放量：{{ xiangqing.emissionAmount }}</p>
      <p>CO2 总排放量：5000 t</p>
      <p>CH4 总排放量：200 kg</p>
      <p>NO2 总排放量：200 kg</p>
      <p>给出的建议：{{ xiangqing.reductionEfforts }}</p>
      <p>审核状态：{{ xiangqing.auditStatus }}</p>

      <p v-if="xiangqing.responsiblePersonId">
        负责人ID：{{ xiangqing.responsiblePersonId }}
      </p>

      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>
    <el-dialog title="追溯上一级的报告" :visible.sync="dialogVisibles" width="30%">
      <p>报告编号：{{ xiangqing.reportId }}-tt</p>
      <p>公司名称：{{ xiangqing.companyName }}</p>
      <p>提交日期：{{ xiangqing.submissionDate }}</p>
      <el-button type="primary" @click="dialogVisibles = false">确 定</el-button>
    </el-dialog>
  </el-main>
</template>

  
  <script>
export default {
  methods: {
    xiazai(row) {
        this.shenhee = { ...row };
      console.log(this.shenhee);
      this.dialogVisibles = true;
    },

    handleClick(row) {
      this.xiangqing = { ...row };
      console.log(this.xiangqing);
      this.dialogVisible = true;
    },
  },

  data() {
    return {
      xiangqing: {},
      shenhee:{},
      dialogVisible: false,
      dialogVisibles: false,
      tableData: [
        {
          reportId: "RPT2023-001",
          submissionDate: "2022-01-15",
          companyName: "华能新能源有限公司",
          industry: "电力与能源",
          emissionType: "二氧化碳",
          emissionAmount: "450,000 t",
          reductionEfforts: "采用清洁能源发电，减少燃煤使用",
          auditStatus: "已通过",
          auditDate: "2022-02-28",
        },
        {
          reportId: "RPT2023-002",
          submissionDate: "2022-02-20",
          companyName: "中石化集团",
          industry: "石油化工",
          emissionType: "甲烷、二氧化碳",
          emissionAmount: "300,000 t",
          reductionEfforts: "实施设备升级和节能改造",
          auditStatus: "未通过",
          auditDate: "",
        },
        {
          reportId: "RPT2023-003",
          submissionDate: "2022-03-10",
          companyName: "宝钢股份",
          industry: "钢铁制造",
          emissionType: "二氧化碳、二氧化硫",
          emissionAmount: "600,000 t",
          reductionEfforts: "提高废气回收利用率",
          auditStatus: "待审核",
          auditDate: "预计2022-04-20",
        },
        {
          reportId: "RPT2023-004",
          submissionDate: "2022-04-05",
          companyName: "某汽车制造企业",
          industry: "交通运输设备制造",
          emissionType: "二氧化碳",
          emissionAmount: "150,000 t",
          reductionEfforts: "推广电动汽车生产，减少尾气排放",
          auditStatus: "已通过",
          auditDate: "2022-04-18",
        },
        {
          reportId: "RPT2023-005",
          submissionDate: "2022-05-12",
          companyName: "某建筑公司",
          industry: "建筑业",
          emissionType: "水泥生产相关二氧化碳",
          emissionAmount: "200,000 t",
          reductionEfforts: "采用低碳建筑材料及施工技术",
          auditStatus: "待审核",
          auditDate: "",
        },
        {
          reportId: "RPT2023-006",
          submissionDate: "2022-06-01",
          companyName: "某物流运输公司",
          industry: "交通运输业",
          emissionType: "二氧化碳",
          emissionAmount: "75,000 t",
          reductionEfforts: "优化运输路线，提升燃油效率",
          auditStatus: "已通过",
          auditDate: "2022-06-15",
        },
        {
          reportId: "RPT2023-007",
          submissionDate: "2022-07-07",
          companyName: "某化工厂",
          industry: "化学原料和化学品制造业",
          emissionType: "多种温室气体",
          emissionAmount: "350,000 t",
          reductionEfforts: "改进工艺流程，降低副产品排放",
          auditStatus: "待审核",
          auditDate: "",
        },
        {
          reportId: "RPT2023-008",
          submissionDate: "2022-08-18",
          companyName: "某造纸企业",
          industry: "造纸和纸制品业",
          emissionType: "二氧化碳、甲烷",
          emissionAmount: "120,000 t",
          reductionEfforts: "循环利用水资源，增加生物质能源使用",
          auditStatus: "待审核",
          auditDate: "预计2022-09-05",
        },

      ],
    };
  },
};
</script>

this.xiangqing = { ...row };

获取行的数据写入xiangqing，之后打开dialog显示数据进行回显。

 此页面参考https://jsq.hongyuan3e.com/carbon/webapp/#/carbonTable?checkIdList=%255B2%255D、

进行碳排放计算。