virtualSimulation/src/views/largeDataScreen/home.vue

<template>
  <div class="container">
    <div class="main">
      <div class="app-list">
        <el-popover
          placement="right"
          :width="260"
          trigger="contextmenu"
          ref="popover1"
        >
          <template #reference>
            <div class="item">
              <div class="icon">
                <img
                  style="width: 100%"
                  src="@/assets/images/zip.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="file-name">LabVIEW2014压缩包</div>
            </div>
          </template>
          <div class="setting-list">
            <div class="item">
              <div class="icon">
                <!-- <img src="@/assets/images/home.png" alt="" /> -->
              </div>
              <div class="name" style="font-weight: 700">打开</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">管理员身份运行</div>
            </div>
            <div class="item" @click="unpack">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">解压到当前文件夹</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">解压到...</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">解压到"LabVIEW2024 (64位)\"</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">其他压缩命令</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">Edit width Notepad++</div>
            </div>
          </div>
        </el-popover>
        <el-popover
          placement="right"
          :width="260"
          trigger="contextmenu"
          v-if="falg"
          ref="popover2"
        >
          <template #reference>
            <div class="item">
              <div class="icon">
                <img
                  style="width: 100%"
                  src="@/assets/images/filesGroup.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="file-name">文件夹</div>
            </div>
          </template>
          <div class="setting-list">
            <div class="item" @click="openSrttingDialog">
              <div class="icon">
                <!-- <img src="@/assets/images/home.png" alt="" /> -->
              </div>
              <div class="name" style="font-weight: 700">打开</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">管理员身份运行</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">解压到当前文件夹</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">解压到...</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">解压到"LabVIEW2024 (64位)\"</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">其他压缩命令</div>
            </div>
            <div class="item">
              <div class="icon">
                <img src="@/assets/images/home.png" alt="" />
              </div>
              <div class="name">Edit width Notepad++</div>
            </div>
          </div>
        </el-popover>
      </div>
      <div class="openFilesGroupDialg">
        <div class="step1" v-show="step === 1">
          <div class="title">LabVIEW 2014 (Chinese)</div>
          <div class="description">
            <p>
              This self - extracting archive will create an installation image
              on your hard drive and launch the installation.
            </p>
            <p style="margin-top: 20px">
              After installation completes, you may delete the installation
              image to recover disk space. You should not delete the
              installation image if you wish to be able to modify or repair the
              installation in the future.
            </p>
          </div>
          <div class="footer">
            <div class="submit" @click="setStep(2)">确认</div>
            <div class="close">取消</div>
          </div>
        </div>
        <div class="step2" v-show="step === 2">
          <div class="title">WinZip Self - Extractor - 2014LV - WinChn.exe</div>
          <div class="setting-box">
            <div class="left">
              <div class="description">
                To unzip all files in 2014LV - WinChn.exe to the specified
                folder press the Unzip button.
              </div>
              <div class="tips">Unzip to folder:</div>
              <div class="selectUrl">
                <el-input
                  value="C:\User\LabVIEW Chinses\2014"
                  :disabled="true"
                ></el-input>
                <el-button>Browse</el-button>
              </div>
              <div class="click-select">
                <el-checkbox-group v-model="checkList">
                  <!-- works when >=2.6.0, recommended ✔️ value not work when <2.6.0 ❌ -->
                  <div>
                    <el-checkbox
                      label="Alibaba PuHuiTi 2.0-55 Regular"
                      :value="1"
                    />
                  </div>
                  <!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
                  <el-checkbox
                    label="When done unzipping open:.\steup.exe"
                    :value="2"
                  />
                </el-checkbox-group>
              </div>
            </div>
            <div class="right">
              <div
                class="item"
                style="color: #fff; background-color: #005fb8"
                @click="dialogVisible = true"
              >
                Unizip
              </div>
              <div class="item">Run WinZIP</div>
              <div class="item">Close</div>
              <div class="item">About</div>
              <div class="item">Help</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="WinZip Slf - Extractor"
    width="360"
    top="15%"
  >
    <span>962 file (s) unzipped successfully</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="setStep(0)"
          style="background-color: #005fb8; color: #fff"
          >确认</el-button
        >
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="Installation"
    title="LabVIEW 2014"
    width="760"
    style="padding: 0"
  >
    <template #header>
      <div class="dialog-header">LabVIEW 2014</div>
    </template>
    <div class="installation-box">
      <div class="step1" v-show="installationStep === 1">
        <div class="title">LabVIEW 2014</div>
        <div class="description">
          <div class="item">
            LabVIEW 2014 运行本次安装之前请退出所有其它程序。
          </div>
          <div class="item">使用病毒扫描工具可能提高安装速度。</div>
          <div class="item">使用本程序时需遵守附带的许可协议。</div>
          <div class="item">
            Corporation 是 Microsoft Silverlight 的授权分销商。
          </div>
          <div class="item">©1986–2014 National Instruments. 版权所有。</div>
        </div>
      </div>
      <div class="step2" v-show="installationStep === 2">
        <div class="title">用户信息</div>
        <div class="tip">请输入以下信息</div>
        <div class="name">
          <span>全名：</span><el-input style="width: 280px;margin-left: 30px;"></el-input>
        </div>
        <div class="unit">
          <span>单位：</span><el-input style="width: 280px;margin-left: 30px;"></el-input>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #fff; border-color: #ccc"
          >上一步</el-button
        >
        <el-button
          type="primary"
          @click="setInstallationStep"
          style="background-color: #0052d9; color: #fff; border: 0"
        >
          下一步
        </el-button>
        <el-button
          type="primary"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #fff; border-color: #ccc"
        >
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
type Falg = boolean;
type Step = number;
const falg = ref<Falg>(false);
const step = ref<Step>(0);
const popover1 = ref<any>(null);
const popover2 = ref<any>(null);
const dialogVisible = ref<Falg>(false);
const Installation = ref<Falg>(true);
const installationStep = ref<Step>(1);
const checkList = ref<Step[]>([1, 2]);
const unpack = (): void => {
  falg.value = true;
  console.log(falg);
  popover1.value.hide();
};
const setStep = (index: number): void => {
  step.value = index;
  if (index === 0) {
    dialogVisible.value = false;
    setTimeout(() => {
      Installation.value = true;
    }, 500);
  }
};
const openSrttingDialog = (): void => {
  console.log(1);

  step.value = 1;
  popover2.value.hide();
};
const setInstallationStep = (): void => {
  installationStep.value++;
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;

  display: flex;
  justify-content: center;
  margin-top: 120px;
  .main {
    position: relative;
    width: 1442px;
    height: 753px;
    // background-color: pink;
    .app-list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      .item {
        width: 205px;
        height: 232px;
        // background: #ffffff;
        margin-right: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        &:hover {
          border: 1px solid #41d3ff;
        }
        .icon {
          width: 103px;
          height: 103px;
        }
        .file-name {
          font-size: 24px;
          margin-top: 20px;
          color: #fff;
          line-height: 32px;
          padding: 0 10px;
        }
        &:nth-child(6n) {
          margin-right: 0;
        }
      }
    }
    .openFilesGroupDialg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      background-color: #fff;
      border-radius: 5px;
      .step1 {
        width: 540px;
        height: 282px;
        .title {
          font-size: 18px;
          font-weight: 700;
          padding: 20px;
        }
        .description {
          font-size: 14px;
          line-height: 20px;
          color: rgba(0, 0, 0, 0.6);
          margin-top: 20px;
          padding: 0 20px;
        }
        .footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          background-color: #f5f4f4;
          height: 80px;
          padding: 20px;

          div {
            width: 242px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            font-size: 14px;
            border-radius: 5px;
            cursor: pointer;
          }
          .submit {
            background-color: #005fb8;
            color: #fff;
          }
          .close {
            border: 1px solid #ccc;
          }
        }
      }
      .step2 {
        width: 540px;
        height: 380px;
        border-radius: 5px;
        background-color: #f3f3f3;
        .title {
          background-color: #fff;
          height: 60px;
          font-size: 18px;
          line-height: 60px;
          padding: 0 20px;
        }
        .setting-box {
          width: 100%;
          height: calc(540px - 60px);
          padding: 20px;
          display: flex;
          .left {
            flex: 1;
            .description {
              font-size: 14px;
              line-height: 20px;
              color: rgba(0, 0, 0, 0.6);
              margin-top: 20px;
            }
            .tips {
              font-size: 14px;
              line-height: 20px;
              color: rgba(0, 0, 0, 0.6);
              margin-top: 20px;
            }
            .selectUrl {
              display: flex;
              margin-top: 10px;
            }
            .click-select {
              margin-top: 20px;
            }
          }
          .right {
            width: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .item {
              width: 96px;
              height: 32px;
              text-align: center;
              line-height: 32px;
              margin-bottom: 10px;
              border-radius: 5px;
              border: 1px solid #ccc;
              font-size: 14px;
              font-weight: 200;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  // background: url("@/assets/images/bg2.png") no-repeat;
}
.setting-list {
  width: 100%;
  height: 100%;
  .item {
    display: flex;
    align-items: center;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    &:hover {
      background-color: #c9c9c9;
    }
    .icon {
      width: 22px;
      height: 22px;
      img {
        width: 100%;
      }
    }
    .name {
      margin-left: 10px;
    }
  }
}
.installation-box {
  padding: 20px;
  .step1 {
    .title {
      font-size: 36px;
      color: #f2994a;
      font-weight: 700;
      margin-top: 20px;
    }

    .description {
      margin-top: 50px;
      font-size: 14px;
      line-height: 30px;
      color: rgba(0, 0, 0, 0.6);
      margin-bottom: 30px;
      .item {
        position: relative;
        margin-left: 20px;
        &::before {
          content: " ";
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: -15px;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: rgba(0, 0, 0, 0.6);
        }
      }
    }
  }
  .step2 {
    min-height: 230px;
    .title {
      font-size: 24px;
      color: #585858;
      font-weight: 700;
      margin-top: 10px;
    }
    .tip {
      font-size: 16px;
      line-height: 30px;
      color: #585858;

      margin-top: 10px;
    }
    .name,
    .unit {
      padding-left: 37px;
      margin-top: 25px;

    }

  }
}
.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #ccc;
  font-size: 16px;
  font-weight: 700;
}
.dialog-footer {
  height: 88px;
  background-color: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0 20px;
}
:deep(.el-input__inner) {
  color: rgba(0, 0, 0, 0.6);
}
</style>