shuili-vue/src/views/dyke/engineeringCondition/dykeCompare/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('embankmentName')">
        <template slot="label"> 堤防名称 </template>
        {{ this.form.embankmentName }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('adcd')">
        <template slot="label"> 行政区划 </template>
        {{ formatAdcd(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('adcdStart')">
        <template slot="label"> 起点行政区划 </template>
        {{ this.form.adcdStart }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('embankmentCode')">
        <template slot="label"> 堤防编码 </template>
        {{ this.form.embankmentCode }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('plotEmbankments')">
        <template slot="label"> 标绘堤防 </template>
        {{ this.form.plotEmbankments }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('adcdEnd')">
        <template slot="label"> 终点行政区划 </template>
        {{ this.form.adcdEnd }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('startingStationNumber')">
        <template slot="label"> 起点桩号 </template>
        {{ this.form.startingStationNumber }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('endStationNumber')">
        <template slot="label"> 终点桩号 </template>
        {{ this.form.endStationNumber }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('embankmentType')">
        <template slot="label"> 堤防类型 </template>
        {{ endStationNumberFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('riverLocation')">
        <template slot="label"> 所在河流 </template>
        {{ this.form.riverLocation }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('riversideClassification')"
      >
        <template slot="label"> 河流岸别 </template>
        {{ riversideClassificationFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('lakeName')">
        <template slot="label"> 所在湖泊名称 </template>
        {{ this.form.lakeName }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('coastlineName')">
        <template slot="label"> 所在海岸名称 </template>
        {{ this.form.coastlineName }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('isFloodStorageDetention')"
      >
        <template slot="label"> 是否为蓄滞洪区堤防 </template>
        {{ isFloodStorageDetentionFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('storageDetentionAreaName')"
      >
        <template slot="label"> 所在蓄滞洪区名称 </template>
        {{ this.form.storageDetentionAreaName }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('areaStartingStationNumber')"
      >
        <template slot="label"> 堤防蓄滞洪区段起点桩号 </template>
        {{ this.form.areaStartingStationNumber }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('areaEndStationNumber')">
        <template slot="label"> 堤防蓄滞洪区段终点桩号 </template>
        {{ this.form.areaEndStationNumber }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('totalLengthFloodStorage')"
      >
        <template slot="label"> 堤防蓄滞洪区段总长度(m) </template>
        {{ this.form.totalLengthFloodStorage }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('floodStorageDetentionAreasExplanation')"
      >
        <template slot="label"> 蓄滞洪区特殊情况说明 </template>
        {{ this.form.floodStorageDetentionAreasExplanation }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('crossBorderSituation')">
        <template slot="label"> 堤防跨界情况 </template>
        {{ crossBorderSituationFormat(this.form) }}
      </el-descriptions-item>

      <el-descriptions-item :contentClassName="isDiff('embankmentTyper')">
        <template slot="label"> 堤防型式 </template>
        {{ embankmentTyperFormat(this.form.embankmentTyper) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('completionTime')">
        <template slot="label"> 建成时间 </template>
        {{ this.form.completionTime }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('recentComplianceReinforcementStatus')"
      >
        <template slot="label"> 最近达标加固完工状态 </template>
        {{ this.form.recentComplianceReinforcementStatus }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('recentComplianceReinforcementTime')"
      >
        <template slot="label"> 最近达标加固完成时间 </template>
        {{ this.form.recentComplianceReinforcementTime }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('engineeringTasks')">
        <template slot="label"> 工程任务 </template>
        {{ engineeringTasksFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('embankmentLevel')">
        <template slot="label"> 堤防级别 </template>
        {{ embankmentLevelFormat(this.form) }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('designFloodControl')">
        <template slot="label"> 设计防洪 </template>
        {{ this.form.designFloodControl }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('embankmentLength')">
        <template slot="label"> 堤防长度(m) </template>
        {{ this.form.embankmentLength }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('planningFloodControl')">
        <template slot="label"> 规划防洪 </template>
        {{ this.form.planningFloodControl }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('embankmentLengthPlanningStandards')"
      >
        <template slot="label"> 达到规划标准的堤防长度(m) </template>
        {{ this.form.embankmentLengthPlanningStandards }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('populationProtection')">
        <template slot="label"> 保护人口 </template>
        {{ this.form.populationProtection }}
      </el-descriptions-item>
      <el-descriptions-item :contentClassName="isDiff('protectingFarmland')">
        <template slot="label"> 保护农田 </template>
        {{ this.form.protectingFarmland }}
      </el-descriptions-item>
      <el-descriptions-item
        :contentClassName="isDiff('criticalInfrastructure')"
      >
        <template slot="label"> 重要基础设施 </template>
        {{ this.form.criticalInfrastructure }}
      </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 { getDikeCompare } from "@/api/yg/dikeCompare";
import { regionData, codeToText, TextToCode } from "element-china-area-data";

export default {
  props: ["baseData"],
  inject: ["getDiff", "granParentEle"],
  data() {
    return {
      histroy: "当前版本",
      sumData: [],
      form: {},
      // 堤防类型字典
      embankmentTypeOptions: [],
      // 河流岸别字典
      riversideClassificationOptions: [],
      // 是否为蓄滞洪区堤防字典
      isFloodStorageDetentionOptions: [],
      // 堤防跨界情况字典
      crossBorderSituationOptions: [],
      // 堤防型式字典
      embankmentTyperOptions: [],
      // 最近达标加固完工状态字典
      recentComplianceReinforcementStatusOptions: [],
      // 工程任务字典
      engineeringTasksOptions: [],
      // 堤防级别字典
      embankmentLevelOptions: [],
      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);
    }

    getDikeCompare(this.$route.query.embankmentCode).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("embankment_type").then((response) => {
      this.embankmentTypeOptions = response.data;
    });
    this.getDicts("riverside_classification").then((response) => {
      this.riversideClassificationOptions = response.data;
    });
    this.getDicts("whether").then((response) => {
      this.isFloodStorageDetentionOptions = response.data;
    });
    this.getDicts("cross_border_situation").then((response) => {
      this.crossBorderSituationOptions = response.data;
    });
    this.getDicts("embankment_form").then((response) => {
      this.embankmentTyperOptions = response.data;
    });
    this.getDicts("reach_the_standard").then((response) => {
      this.recentComplianceReinforcementStatusOptions = response.data;
    });
    this.getDicts("project_task").then((response) => {
      this.engineeringTasksOptions = response.data;
    });
    this.getDicts("embankment_level").then((response) => {
      this.embankmentLevelOptions = 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: {
    formatAdcd(row) {
      if (row.adcd) {
        let provinceCode = row.adcd.slice(0, 2);
        let cityCode = row.adcd.slice(2, 4);
        let areaCode = row.adcd.slice(4, 6);
        if (areaCode != "00") {
          return (
            codeToText[provinceCode] +
            "-" +
            codeToText[provinceCode + cityCode] +
            "-" +
            codeToText[provinceCode + cityCode + areaCode]
          );
        } else if (cityCode != "00") {
          return (
            codeToText[provinceCode] + "-" + codeToText[provinceCode + cityCode]
          );
        } else {
          return codeToText[provinceCode];
        }
      }
    },
    isDiff(name) {
      return this.diffPart.some((item) => item === name) ? "diffEle" : "";
    },
    chooseEdition(data) {
      this.form = data;
    },
    // 堤防类型字典翻译
    endStationNumberFormat(row, column) {
      return this.selectDictLabel(
        this.embankmentTypeOptions,
        row.embankmentType
      );
    },
    // 河流岸别字典翻译
    riversideClassificationFormat(row, column) {
      return this.selectDictLabel(
        this.riversideClassificationOptions,
        row.riversideClassification
      );
    },
    // 是否为蓄滞洪区堤防字典翻译
    isFloodStorageDetentionFormat(row, column) {
      return this.selectDictLabel(
        this.isFloodStorageDetentionOptions,
        row.isFloodStorageDetention
      );
    },
    // 堤防跨界情况字典翻译
    crossBorderSituationFormat(row, column) {
      return this.selectDictLabel(
        this.crossBorderSituationOptions,
        row.crossBorderSituation
      );
    },
    // 堤防型式字典翻译
    embankmentTyperFormat(data) {
      let res = "";
      let arr = data ? JSON.parse(data) : [];
      // console.log("XXXXXXXXXXXXXXXXXXXXXX", data);
      if (arr) {
        arr.forEach((item) => {
          res =
            res + "+" + this.selectDictLabel(this.embankmentTyperOptions, item);
        });
        return res.slice(1);
      }
    },
    // 工程任务字典翻译
    engineeringTasksFormat(row, column) {
      return this.selectDictLabel(
        this.engineeringTasksOptions,
        row.engineeringTasks
      );
    },
    // 堤防级别字典翻译
    embankmentLevelFormat(row, column) {
      return this.selectDictLabel(
        this.embankmentLevelOptions,
        row.embankmentLevel
      );
    },
  },
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.diffEle {
  color: #f13939;
  // background: skyblue;
}
</style>