shuili-vue/src/views/sluice/engineeringCondition/sluiceCompare/components/basePage.vue

<template>
  <div>
    <el-select
      v-model="histroy"
      placeholder="请选择版本"
      style="margin-bottom: 10px; width: 250px"
    >
      <el-option
        v-for="(sub, index) in sumData"
        :key="sub.id"
        :label="
          sub.recordLoseEfficacyTime
            ? '版本' + index + ' - ' + sub.recordLoseEfficacyTime
            : '当前版本'
        "
        :value="sub.id"
        @click.native="chooseEdition(sub)"
      ></el-option>
    </el-select>
    <el-descriptions
      class="margin-top"
      :column="2"
      border
      :labelStyle="{
        'text-align': 'left',
        width: '120px',
        height: '50px',
      }"
      :contentStyle="{}"
      ref="descriptions"
    >
      <el-descriptions-item :contentClassName="isDiff('sluiceName')">
        <template slot="label"> 水闸名称 </template>
        {{ this.form.sluiceName }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('adcd')">
        <template slot="label"> 行政区划 </template>
        {{ this.form.adcd }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('sluiceCode')">
        <template slot="label"> 水闸编码 </template>
        {{ this.form.sluiceCode }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('location')">
        <template slot="label"> 所在位置 </template>
        {{ locationFormat(this.form.location) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('plottingSluice')">
        <template slot="label"> 标绘水闸 </template>
        {{ this.form.plottingSluice }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('acceptanceStatus')">
        <template slot="label"> 验收情况 </template>
        {{ acceptanceStatusFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('completionTime')">
        <template slot="label"> 建成时间 </template>
        {{ this.form.completionTime }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('completionAcceptanceTime')"
      >
        <template slot="label"> 竣工验收时间 </template>
        {{ this.form.completionAcceptanceTime }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('riskEliminationStatus')">
        <template slot="label"> 除险加固情况 </template>
        {{ riskEliminationStatusFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('recentCompletionTime')">
        <template slot="label"> 最近除险加固完工时间 </template>
        {{ this.form.recentCompletionTime }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('isHubProject')">
        <template slot="label"> 是否为枢纽工程 </template>
        {{ isHubProjectFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('hubBuildings')">
        <template slot="label"> 枢纽建筑物 </template>
        {{ hubBuildingsFormat(this.form.hubBuildings) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('isGateStation')">
        <template slot="label"> 是否为闸站工程 </template>
        {{ isGateStationFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('isSetGateProject')">
        <template slot="label"> 是否为套闸工程 </template>
        {{ isSetGateProjectFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('auxiliaryGateHoles')">
        <template slot="label"> 副闸闸孔数量（孔） </template>
        {{ this.form.auxiliaryGateHoles }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('auxiliaryGateHolesWidth')"
      >
        <template slot="label"> 副闸闸孔总净宽（m） </template>
        {{ this.form.auxiliaryGateHolesWidth }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('sluiceType')">
        <template slot="label"> 水闸类型 </template>
        {{ sluiceTypeFormat(this.form.sluiceType) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('designGateFlow')">
        <template slot="label"> 设计过闸流量 </template>
        {{ this.form.designGateFlow }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('verifiedGateFlow')">
        <template slot="label"> 校核过闸流量 </template>
        {{ this.form.verifiedGateFlow }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('projectScale')">
        <template slot="label"> 工程规模 </template>
        {{ projectScaleFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('buildingLevel')">
        <template slot="label"> 建筑物级别 </template>
        {{ buildingLevelFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('designStandards')">
        <template slot="label"> 设计标准[重现期] </template>
        {{ this.form.designStandards }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('verificationStandards')">
        <template slot="label"> 校核标准[重现期] </template>
        {{ this.form.verificationStandards }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('historicalMaximumGate')">
        <template slot="label"> 历史最大过闸流量(m³/s) </template>
        {{ this.form.historicalMaximumGate }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('historicalMaximumDate')">
        <template slot="label"> 历史最大过闸流量日期 </template>
        {{ this.form.historicalMaximumDate }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('designSeismicIntensity')"
      >
        <template slot="label"> 设计地震烈度 </template>
        {{ this.form.designSeismicIntensity }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('gateHolesNumber')">
        <template slot="label"> 闸孔数量 </template>
        {{ this.form.gateHolesNumber }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('gateHoleWidth')">
        <template slot="label"> 闸孔总净宽(m) </template>
        {{ this.form.gateHoleWidth }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('hoistsNumber')">
        <template slot="label"> 启闭机数量 </template>
        {{ this.form.hoistsNumber }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('observationProject')">
        <template slot="label"> 观测项目 </template>
        {{ observationProjectFormat(this.form.observationProject) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('lockChamberStructure')">
        <template slot="label"> 闸室结构 </template>
        {{ lockChamberStructureFormat(this.form.lockChamberStructure) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('gateType')">
        <template slot="label"> 闸门型式 </template>
        {{ gateTypeFormat(this.form.gateType) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('machineForm')">
        <template slot="label"> 启闭机形式 </template>
        {{ machineFormFormat(this.form.machineForm) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('energyDissipationMethod')"
      >
        <template slot="label"> 消能方式 </template>
        {{ energyDissipationMethodFormat(this.form.energyDissipationMethod) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('automationControl')">
        <template slot="label"> 自动化控制 </template>
        {{ automationControlFormat(this.form.automationControl) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('relation')">
        <template slot="label"> 关联字段1 </template>
        {{ this.form.relation }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
import { getSluiceCompare } from "@/api/yg/sluiceCompare";
export default {
  props: ["baseData"],
  inject: ["getDiff", "granParentEle"],
  data() {
    return {
      histroy: "当前版本",
      sumData: [],
      form: {},
      // 所在位置字典
      locationOptions: [],
      // 验收情况字典
      acceptanceStatusOptions: [],
      // 除险加固情况字典
      riskEliminationStatusOptions: [],
      // 是否为枢纽工程字典
      isHubProjectOptions: [],
      // 是否为闸站工程字典
      isGateStationOptions: [],
      // 是否为套闸工程字典
      isSetGateProjectOptions: [],
      // 水闸类型字典
      sluiceTypeOptions: [],
      // 工程规模字典
      projectScaleOptions: [],
      // 建筑物级别字典
      buildingLevelOptions: [],
      // 闸门型式字典
      gateTypeOptions: [],
      // 观测项目字典
      observationProjectOptions: [],
      // 闸室结构字典
      lockChamberStructureOptions: [],
      // 启闭机形式字典
      machineFormOptions: [],
      // 消能方式字典
      energyDissipationMethodOptions: [],
      // 自动化控制字典
      automationControlOptions: [],
      // 枢纽建筑物字典
      hubBuildingsOptions: [],
      diffPart: [],
    };
  },
  created() {
    if (this.baseData.id) {
      console.log("this.baseData in basePage", this.baseData);
      this.form = this.baseData;
      this.histroy = this.form.id;
      this.diffPart = this.getDiff("basePage");
      console.log("this.diffPart in basePage", this.diffPart);
    }

    getSluiceCompare(this.$route.query.sluiceCode).then((res) => {
      this.sumData = res.data.jbxx;
      console.log("this.sumData in basePage", this.sumData);
      // res.data.jbxx.map((item) => {
      //   if (!item.recordLoseEfficacyTime) this.baseData = item;
      // });
      // res.data.gcgl.map((item) => {
      //   if (!item.recordLoseEfficacyTime) this.projectManagementData = item;
      // });
    });

    this.getDicts("location").then((response) => {
      this.locationOptions = response.data;
    });
    this.getDicts("completion_acceptance_status").then((response) => {
      this.acceptanceStatusOptions = response.data;
    });
    this.getDicts("reinforcement_situation").then((response) => {
      this.riskEliminationStatusOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isHubProjectOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isGateStationOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isSetGateProjectOptions = response.data;
    });
    this.getDicts("sluice_type").then((response) => {
      this.sluiceTypeOptions = response.data;
    });
    this.getDicts("engineering_scale").then((response) => {
      this.projectScaleOptions = response.data;
    });
    this.getDicts("building_level").then((response) => {
      this.buildingLevelOptions = response.data;
    });
    this.getDicts("gate_type").then((response) => {
      this.gateTypeOptions = response.data;
    });
    this.getDicts("observation_project").then((response) => {
      this.observationProjectOptions = response.data;
    });
    this.getDicts("Lock_chamber_structure").then((response) => {
      this.lockChamberStructureOptions = response.data;
    });
    this.getDicts("machine_form").then((response) => {
      this.machineFormOptions = response.data;
    });
    this.getDicts("energy_dissipation_method").then((response) => {
      this.energyDissipationMethodOptions = response.data;
    });
    this.getDicts("automation_control").then((response) => {
      this.automationControlOptions = response.data;
    });
    this.getDicts("Hub_buildings").then((response) => {
      this.hubBuildingsOptions = response.data;
    });
  },
  mounted() {
    // console.log(55555555555, this.$refs.descriptions);
  },
  watch: {
    baseData: function (n, o) {
      this.baseData = n;
      this.form = this.baseData;
      this.histroy = this.form.id;
      // this.diffPart = this.getDiff();
      // setTimeout(() => {
      //   this.diffPart = this.getDiff();
      // }, 10);

      // 异步,待数据更新完时执行
      this.$nextTick(() => {
        // console.log(99999999999, this.granParentEle);
        this.diffPart = this.getDiff("basePage");
      });
    },
    histroy: function (n, o) {
      // this.$nextTick(() => {
      //   this.diffPart = this.getDiff();
      // });
      setTimeout(() => {
        // this.diffPart = this.getDiff();
        const childrenEles = Object.keys(this.granParentEle);
        for (let index = 0; index < childrenEles.length; index++) {
          // console.log(33333333, childrenEles[index]);
          this.granParentEle[childrenEles[index]].$refs.basePage.diffPart =
            this.granParentEle[childrenEles[index]].$refs.basePage.getDiff(
              "basePage"
            );
        }
      }, 10);
    },
  },
  methods: {
    isDiff(name) {
      return this.diffPart.some((item) => item === name) ? "diffEle" : "";
    },
    chooseEdition(data) {
      this.form = data;
    },
    // 所在位置字典翻译
    locationFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      // console.log("XXXXXXXXXXXXXXXXXXXXXX", data);
      if (arr) {
        arr.forEach((item) => {
          res = res + "+" + this.selectDictLabel(this.locationOptions, item);
        });
        return res.slice(1);
      }
    },
    // 验收情况字典翻译
    acceptanceStatusFormat(row, column) {
      return this.selectDictLabel(
        this.acceptanceStatusOptions,
        row.acceptanceStatus
      );
    },
    // 除险加固情况字典翻译
    riskEliminationStatusFormat(row, column) {
      return this.selectDictLabel(
        this.riskEliminationStatusOptions,
        row.riskEliminationStatus
      );
    },
    // 是否为枢纽工程字典翻译
    isHubProjectFormat(row, column) {
      return this.selectDictLabel(this.isHubProjectOptions, row.isHubProject);
    },
    // 枢纽建筑物字典翻译
    hubBuildingsFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res =
            res + "+" + this.selectDictLabel(this.hubBuildingsOptions, item);
        });
        return res.slice(1);
      }
    },
    // 是否为闸站工程字典翻译
    isGateStationFormat(row, column) {
      return this.selectDictLabel(this.isGateStationOptions, row.isGateStation);
    },
    // 是否为套闸工程字典翻译
    isSetGateProjectFormat(row, column) {
      return this.selectDictLabel(
        this.isSetGateProjectOptions,
        row.isSetGateProject
      );
    },
    // 水闸类型字典翻译
    sluiceTypeFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res = res + "+" + this.selectDictLabel(this.sluiceTypeOptions, item);
        });
        return res.slice(1);
      }
    },
    // 工程规模字典翻译
    projectScaleFormat(row, column) {
      return this.selectDictLabel(this.projectScaleOptions, row.projectScale);
    },
    // 建筑物级别字典翻译
    buildingLevelFormat(row, column) {
      return this.selectDictLabel(this.buildingLevelOptions, row.buildingLevel);
    },
    // 闸门型式字典翻译
    gateTypeFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res = res + "+" + this.selectDictLabel(this.gateTypeOptions, item);
        });
        return res.slice(1);
      }
    },
    // 观测项目字典翻译
    observationProjectFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res =
            res +
            "+" +
            this.selectDictLabel(this.observationProjectOptions, item);
        });
        return res.slice(1);
      }
    },
    // 闸室结构字典翻译
    lockChamberStructureFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res =
            res +
            "+" +
            this.selectDictLabel(this.lockChamberStructureOptions, item);
        });
        return res.slice(1);
      }
    },

    // 启闭机形式字典翻译
    machineFormFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res = res + "+" + this.selectDictLabel(this.machineFormOptions, item);
        });
        return res.slice(1);
      }
    },
    // 消能方式字典翻译
    energyDissipationMethodFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res =
            res +
            "+" +
            this.selectDictLabel(this.energyDissipationMethodOptions, item);
        });
        return res.slice(1);
      }
    },
    // 自动化控制字典翻译
    automationControlFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      if (arr) {
        arr.forEach((item) => {
          res =
            res +
            "+" +
            this.selectDictLabel(this.automationControlOptions, item);
        });
        return res.slice(1);
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.diffEle {
  color: #f13939;
  // background: skyblue;
}
</style>