ISMS-Visualization-BJGD-TKT/src/views/components/dialog/RiskTipDialog.vue

<template>
  <vue-drag-resize
    id="drag"
    class="drag-container"
    :isActive="true"
    w="auto"
    h="auto"
    :x="left"
    :y="top"
    :z="zIndex"
    :isResizable="false"
    :parent-limitation="true"
    v-if="dialogConfig.show"
    @clicked="setZIndex(dialogConfig.dialogId)"
  >
    <div
      class="slot-container"
      :style="{ width: width + 'rem', height: height + 'rem' }"
    >
      <div class="bg-container">
        <!-- 拼接背景图案 -->
        <img
          class="leftTop"
          :src="require('@/assets/imgs/dialog/base/pop_bg1@2x.png')"
          alt=""
        />
        <img
          class="rightTop"
          :src="require('@/assets/imgs/dialog/base/pop_bg2@2x.png')"
          alt=""
        />
        <img
          class="leftBottom"
          :src="require('@/assets/imgs/dialog/base/pop_bg4@2x.png')"
          alt=""
        />
        <img
          class="rightBottom"
          :src="require('@/assets/imgs/dialog/base/pop_bg3@2x.png')"
          alt=""
        />
        <img
          class="bottomCenter"
          :src="require('@/assets/imgs/dialog/base/img_guang@2x.png')"
          alt=""
        />
        <div
          class="topBorder"
          :style="{
            width:
              width - (2.182292 - 0.041667) - (0.317708 - 0.041667) + 'rem',
            right: 0.317708 - 0.041667 + 'rem',
          }"
        ></div>
        <div
          class="rightBorder"
          :style="{
            height:
              height - (0.4375 - 0.239583) - (0.390625 - 0.177083) + 'rem',
            top: 0.4375 - 0.239583 + 'rem',
          }"
        ></div>
        <div
          class="bottomBorder"
          :style="{
            width:
              width - (0.317708 - 0.041667) - (0.317708 - 0.041667) + 'rem',
            right: 0.317708 - 0.041667 + 'rem',
          }"
        ></div>
        <div
          class="leftBorder"
          :style="{
            height:
              height - (0.4375 - 0.239583) - (0.390625 - 0.177083) + 'rem',
            top: 0.4375 - 0.239583 + 'rem',
          }"
        ></div>
        <div
          class="center-bg"
          :style="{
            width:
              width - (0.260417 - 0.041667) - (0.260417 - 0.041667) + 'rem',
            height:
              height - (0.4375 - 0.239583) - (0.390625 - 0.177083) + 'rem',
            top: 0.4375 - 0.239583 + 'rem',
            right: 0.260417 - 0.041667 + 'rem',
          }"
        ></div>
      </div>
      <div class="dialog-content">
        <!-- 弹窗标题 -->
        <div class="title-box">
          <div class="dialog-title">{{ dialogConfig.title }}</div>
          <div class="dialog-close" @click="handleClose">
            <img
              :src="require('@/assets/imgs/dialog/icon_guanbi2@2x.png')"
              alt=""
            />
          </div>
        </div>
        <div class="main-content" style="height: calc(100% - 55px)">
          <!-- 弹窗内容插槽 -->
          <el-form
            ref="form"
            :model="dialogConfig.data"
            size="small"
            label-width="80px"
            inline
          >
            <!-- <el-form-item label="事件类型" prop="TypeId">
              <el-input v-model="dialogConfig.data.TypeId" size="small" style="width: 180px" disabled />
            </el-form-item>
            <el-form-item label="事件等级" prop="Level">
              <el-input v-model="dialogConfig.data.Level" size="small" style="width: 180px" disabled />
            </el-form-item> -->
            <el-form-item label="事件时间" prop="EventTime">
              <el-input
                v-model="eventTime"
                size="small"
                style="width: 360px"
                disabled
              />
            </el-form-item>
            <!-- <el-form-item label="切换方式" prop="TriggerType">
              <el-input v-model="dialogConfig.data.TriggerType" size="small" style="width: 180px" disabled />
            </el-form-item> -->
            <el-form-item label="事件内容" prop="Content">
              <el-input
                v-model="dialogConfig.data.content"
                type="textarea"
                rows="5"
                size="small"
                style="width: 360px"
                disabled
              />
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button class="btn-cancel" size="mini" @click="handleClose"
              >取消</el-button
            >
            <el-button class="btn-handle" size="mini" @click="handleDeal"
              >确认</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </vue-drag-resize>
</template>

<script>
import { mapGetters } from "vuex";
import { eliminateRisk } from "@/API/risk.js";
import { dealAlarm } from "@/API/alarm";
import Dayjs from "dayjs";
export default {
  name: "RiskTipDialog",
  props: {
    dialogConfig: {
      type: Object,
      default: () => {
        return {
          dialogId: "",
          show: false, //是否显示
          title: "新窗口-请指定URL",
          width: 960, //px宽度
          height: 540, //px高度
          left: 0, //
          top: 0, //
          bottom: 0, //
          right: 0, //
          center: true, //是否居中定位
          data: {},
          zIndex: 5,
        };
      },
    },
  },
  data() {
    return {
      width: 0,
      height: 0,
      top: 0,
      left: 0,
      animationName: "yel",
      animationStyle: `@keyframes yel{
          0% {
            box-shadow: 0 0 0px #ffffff;
          }
          50% {
            box-shadow: #F8E71C 0px 0px 100px;
          }
          100% {
            box-shadow: 0 0 0px #ffffff;
          }
        }`,
      shadowColors: {
        ["306001"]: { name: "重大级别", color: "#FF3636", anmationName: "red" },
        ["306002"]: { name: "较大级别", color: "#FF9F00", anmationName: "ora" },
        ["306003"]: { name: "一般级别", color: "#F8E71C", anmationName: "yel" },
        ["306004"]: { name: "低级别", color: "#53A3FF", anmationName: "blue" },
        ["024001"]: { name: "一级", color: "#FF3636", anmationName: "red" },
        ["024002"]: { name: "二级", color: "#FF9F00", anmationName: "ora" },
        ["024003"]: { name: "三级", color: "#53A3FF", anmationName: "blue" },
      },
    };
  },
  watch: {
    "dialogConfig.show"(newVal) {
      console.log(newVal);
      // 弹窗打开关闭时，更新全局变量
      console.log("将要移除" + this.dialogConfig.dialogId);
      this.$store.dispatch("dialog/removeRiskDialog", this.dialogConfig);
    },
  },
  created() {
    this.pxToRem();
    setTimeout(() => {
      this.updateShadow();
    }, 200);
  },
  mounted() {
    window.addEventListener("resize", this.pxToRem);
  },
  computed: {
    ...mapGetters(["riskDialogs", "alarmAudio"]),
    zIndex() {
      const config = this.riskDialogs.find(
        (e) => e.dialogId === this.dialogConfig?.dialogId
      );
      return config?.zIndex || 1;
    },
    eventTime() {
      return Dayjs(this.dialogConfig.data?.eventTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    },
  },
  methods: {
    // 将传入的px值转换为rem值
    pxToRem() {
      // 当前窗口大小px值
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      // console.log("client", width, height);
      // 当前1rem的值
      let rem = width / 10;
      // console.log(rem);
      // 通过默认 1rem=192 计算得出当前窗口大小rem值
      this.width = this.dialogConfig.width / 192;
      this.height = this.dialogConfig.height / 192;
      // console.log("dialog", this.width, this.height);
      // 通过当前的1rem值计算出窗口初始的定位px值
      if (this.dialogConfig.center) {
        this.left = (width - this.width * rem) / 2;
        this.top = (height - this.height * rem) / 2;
      } else {
        if (this.dialogConfig.bottom) {
          this.top =
            height -
            ((this.dialogConfig.bottom + this.dialogConfig.height) / 192) * rem;
        } else {
          this.top = (this.dialogConfig.top / 192) * rem;
        }
        if (this.dialogConfig.right) {
          this.left =
            width -
            ((this.dialogConfig.right + this.dialogConfig.width) / 192) * rem;
        } else {
          this.left = (this.dialogConfig.left / 192) * rem;
        }
      }
      // console.log('pos', this.left, this.top)
      // console.log(this.top);
    },
    handleClose() {
      this.dialogConfig.show = false;
      //this.$store.dispatch('home/setNavActive', this.dialogConfig.title)
      this.$store.dispatch("globalConfig/setAlarmAudio", {
        show: false,
        alarmType: "all",
      });
    },
    async handleDeal() {
      try {
        const { code, msg } = await eliminateRisk([this.dialogConfig.data.id]);
        // this.$message({
        //   type: code == 20000 ? "success" : "danger",
        //   message: msg,
        // });
        this.$store.dispatch("globalConfig/setDrawRiskTime", Dayjs(new Date()));
        this.handleClose();
      } catch (error) {
        console.log(error);
      }
    },
    setZIndex(val) {
      // 点击时根据id,动态改变zindex值
      this.$store.dispatch("dialog/setDialogZIndex", val);
    },
    updateShadow() {
      if (this.alarmAudio.show && this.dialogConfig.data && this.dialogConfig.data.level) {
        this.anmationName =
          this.shadowColors[this.dialogConfig.data.level].anmationName;
        this.animationStyle = `@keyframes ${this.anmationName}{
          0% {
            box-shadow: 0 0 0px #ffffff;
          }
          50% {
            box-shadow:${
              this.shadowColors[this.dialogConfig.data.level].color
            } 0px 0px 100px;
          }
          100% {
            box-shadow: 0 0 0px #ffffff;
          }
        }`;
        document.styleSheets[0].insertRule(this.animationStyle, 0);
        document.getElementById("drag").style.animation =
          this.anmationName + " 1s infinite";
        // console.log("Animation", this.animationStyle, this.animationName);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.drag-container {
  box-shadow: 0 0 0px rgba(255, 255, 255, 0), 0 0 0px rgba(255, 255, 255, 0);
  animation: glow 2s infinite;
  pointer-events: auto;
  .slot-container {
    position: relative;
    .bg-container {
      width: 100%;
      height: 100%;
      position: absolute;
      // (0.317708-0.041667)
      img {
        position: absolute;
        &.leftTop {
          width: 2.182292rem /* 419/192 */;
          height: 0.4375rem /* 84/192 */;
          top: -0.239583rem /* 46/192 */;
          left: -0.041667rem /* 8/192 */;
        }
        &.rightTop {
          width: 0.317708rem /* 61/192 */;
          height: 0.4375rem /* 84/192 */;
          top: -0.239583rem /* 46/192 */;
          right: -0.041667rem /* 8/192 */;
        }
        &.leftBottom {
          width: 0.317708rem /* 61/192 */;
          height: 0.390625rem /* 75/192 */;
          bottom: -0.177083rem /* 34/192 */;
          left: -0.041667rem /* 8/192 */;
        }
        &.rightBottom {
          width: 0.317708rem /* 61/192 */;
          height: 0.390625rem /* 75/192 */;
          bottom: -0.177083rem /* 34/192 */;
          right: -0.041667rem /* 8/192 */;
        }
        &.bottomCenter {
          width: 1.442708rem /* 277/192 */;
          height: 0.359375rem /* 69/192 */;
          bottom: -0.177083rem /* 34/192 */;
          left: 50%;
          transform: translate(-50%, 0);
        }
      }
      .topBorder {
        // width: 100%;
        height: 0.4375rem /* 84/192 */;
        position: absolute;
        top: -0.239583rem /* 46/192 */;
        background-image: url(~@/assets/imgs/dialog/base/pop_bg5@2x.png);
        background-repeat: repeat-x;
        background-size: contain;
      }
      .bottomBorder {
        // width: 100%;
        height: 0.390625rem /* 75/192 */;
        position: absolute;
        bottom: -0.177083rem /* 34/192 */;
        background-image: url(~@/assets/imgs/dialog/base/pop_bg6@2x.png);
        background-repeat: repeat-x;
        background-size: contain;
      }
      .leftBorder {
        width: 0.260417rem /* 50/192 */;
        // height: 0.390625rem /* 75/192 */;
        position: absolute;
        left: -0.041667rem /* 8/192 */;
        background-image: url(~@/assets/imgs/dialog/base/pop_bg7@2x.png);
        background-repeat: repeat-y;
        background-size: contain;
      }
      .rightBorder {
        width: 0.260417rem /* 50/192 */;
        // height: 0.390625rem /* 75/192 */;
        position: absolute;
        right: -0.041667rem /* 8/192 */;
        background-image: url(~@/assets/imgs/dialog/base/pop_bg8@2x.png);
        background-repeat: repeat-y;
        background-size: contain;
      }
      .center-bg {
        position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        background-image: url(~@/assets/imgs/dialog/base/pop_bg9@2x.png);
        background-repeat: repeat;
        background-size: contain;
      }
    }
    .dialog-content {
      width: 100%;
      height: 100%;
      position: absolute;
      padding: 0 0.104167rem /* 20/192 */;
      .title-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 0.166667rem /* 32/192 */;
        line-height: 0.166667rem /* 32/192 */;
        color: #fff;
        .dialog-title {
          font-size: 0.09375rem /* 18/192 */;
          margin-top: -0.083333rem /* 16/192 */;
        }
        .dialog-close {
          width: 0.09375rem /* 18/192 */;
          height: 0.09375rem /* 18/192 */;
          position: absolute;
          top: 0.020833rem /* 4/192 */;
          right: 0.052083rem /* 10/192 */;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .main-content {
        padding-top: 10px;
        ::v-deep .el-form-item__label {
          color: #fff;
        }
        .btn-box {
          width: 100%;
          height: 40px;
          text-align: center;
          position: absolute;
          bottom: 30px;
          left: 50%;
          transform: translate(-50%, 0);
          .el-button {
            width: 100px;
            height: 32px;
            box-sizing: border-box;
            margin-top: 0.015625rem /* 3/192 */;
            color: #fff;
            padding: 0;
            border-color: #5bd6ff;
            // border-radius: 0;
            &:hover {
              border-color: #ccc;
            }
          }
          .btn-handle.el-button {
            background: rgba(0, 159, 221, 0.8);
          }
          .btn-cancel.el-button {
            background: rgba(7, 51, 121, 0.1);
          }
        }
      }
    }
    .contentiframe {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
    }
  }
}
.vdr.active:before {
  outline: 0;
}
</style>