jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/index.vue

<template>
  <div class='CommandDispatch' :style="{ '--row': row }">
    <component :is="key" v-for="(_, key) in gridAreaMap" :key="key" :ref="key" :style="{ gridArea: gridAreaMap[key] }"
      @fullHeight="opacityKey => handleFullHeight(key, opacityKey)" />
  </div>
</template>

<script>
import request from "@/utils/request";

const files = require.context('./Cards', true, /[^/]+\/index\.vue$/);

const components = files.keys().reduce((components, key) => {
  components[key.match(/[^/]+/g)[1]] = files(key).default;

  return components;
}, {});

const originGridArea = {
  EventInformation: "1 / 1 / span 9 / 1",
  DispatchLiaison: "10 / 1 / span 7 / 2",
  DisposalPlan: "17 / 1 / span 9 / 2",
  CrowdnessIndicatorRankings: "1 / 2 / span 11 / 2",
  DisposalProcess: "12 / 2 / span 14 / 2",
  RealTimeVideo: "1 / 3 / span 6 / 3",
  ReleaseInformation: "7 / 3 / span 14 / 3",
  TrafficControl: "21 / 3 / span 5 / 3",
}

export default {
  name: 'CommandDispatch',
  components: {
    ...components,
  },
  props: {
    detailId: {
      type: [String, Number],
      default: 2
    }
  },
  provide() {
    return {
      provideData: this.provideData,
    }
  },
  data() {
    return {
      gridAreaMap: {
        ...originGridArea
      },
      row: 24,
      provideData: {
        detail: null
      }
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      request({
        url: `/dc/system/event/${this.detailId}`,
        method: "GET",
      })
        .then((result) => {
          if (result.code != 200) return;

          this.provideData.detail = result.data
        })
        .catch((err) => { });
    },
    handleFullHeight(key, opacityKey) {
      if (this.gridAreaMap[key] !== originGridArea[key]) {
        this.gridAreaMap[key] = originGridArea[key];
        if (this.$refs[opacityKey]?.[0]) {
          this.$refs[opacityKey][0].$el.style.opacity = 1;
          this.$refs[opacityKey][0].$el.style.pointerEvents = "auto";
        };
      } else {
        let index = 0;
        if (this.$refs[opacityKey]?.[0]) {
          this.$refs[opacityKey][0].$el.style.opacity = 0;
          this.$refs[opacityKey][0].$el.style.pointerEvents = "none";
        };

        this.gridAreaMap[key] = originGridArea[key].replace(/[0-9]+/g, (num) => {
          try {
            return { 0: '1', 2: this.row + 1 }[index] || num;
          } catch (error) {

          } finally {
            index++;
          }
        });
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.CommandDispatch {
  padding: 24px 12px 21px 12px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(var(--row), 1fr);
  gap: 18px;

  >div {
    transition: all .18s linear;
  }

  ::v-deep {
    .title-button {
      border-radius: 65px;
      font-size: 12px;
    }

    .special-button {
      border-radius: 3px !important;
      padding: 3px;
      height: 26px;
    }
  }
}
</style>