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>
        <el-popover
          placement="right"
          :width="260"
          trigger="contextmenu"
          v-if="product"
          ref="popover2"
        >
          <template #reference>
            <div class="item">
              <div class="icon">
                <img
                  style="width: 100%"
                  src="@/assets/images/bg14.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" @click="goToLabView">管理员身份运行</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>
        <el-popover
          placement="right"
          :width="260"
          trigger="contextmenu"
          ref="popover2"
          v-if="installationStep === 11"
        >
          <template #reference>
            <div class="item">
              <div class="icon">
                <img
                  style="width: 100%"
                  src="@/assets/images/ideaicon.png"
                  alt=""
                  srcset=""
                />
              </div>
              <div class="file-name" style="text-align: center">
                IntelliJ IDEA 2020.1 x64
              </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" @click="goToLabIdea">管理员身份运行</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"
            placeholder="软件安全管家"
          ></el-input>
        </div>
        <div class="unit">
          <span>单位：</span
          ><el-input
            style="width: 280px; margin-left: 30px"
            placeholder="中国大陆"
          ></el-input>
        </div>
      </div>
      <div class="step3" v-show="installationStep === 3">
        <div class="title">序列号</div>
        <div class="tip">请输入以下产品序列号</div>
        <div class="serial">
          <div class="name">序列号：</div>
          <el-form label-width="400px" style="max-width: 720">
            <el-form-item
              label="LabVIEW 2014（基本版 / 完整版 / 专业版）："
              label-width="307px"
            >
              <el-input style="width: 300px; margin-left: 95px" />
            </el-form-item>
            <el-form-item
              label="应用程序生成器 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白："
            >
              <el-input style="width: 300px" />
            </el-form-item>
            <el-form-item
              label="Report Generation 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白："
            >
              <el-input style="width: 300px" />
            </el-form-item>
            <el-form-item
              label="atabase 工具包 - 用于 LabVIEW 2014，如激活 LabVIEW 专业版则保留空白）："
            >
              <el-input style="width: 300px" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="step4" v-show="installationStep === 4">
        <div class="title">目标目录</div>
        <div class="tip">选择主安装目录</div>
        <div class="item">选择 NI 软件的安装文件夹</div>
        <el-select
          disabled
          placeholder="C:\Users\LabVIEW Chinese\2014"
          style="width: 300px; margin-top: 10px"
        />
        <el-button disabled style="margin-left: 5px; margin-top: 10px"
          >浏览</el-button
        >
        <div class="item">选择NI LabVIEW 2014的安装文件夹</div>
        <el-select
          disabled
          placeholder="C:\Users\LabVIEW Chinese\2014"
          style="width: 300px; margin-top: 10px"
        />
        <el-button disabled style="margin-left: 5px; margin-top: 10px"
          >浏览</el-button
        >
      </div>
      <div class="step5" v-show="installationStep === 5">
        <div class="title">组件</div>
        <div class="tip">选择需要安装的组件</div>
        <div class="headers">
          <div class="header">
            <div class="item">NI LabVIEW 2014</div>
            <div class="item">Database Connectivity工具包</div>
            <div class="item">Report Generation工具包</div>
            <div class="item">V Package Manager 2014</div>
            <div class="item">附加组件</div>
            <div class="item">HI Measurement & Automation Explorer</div>
            <div class="item">设备驱动程序</div>
          </div>
          <div class="image-container">
            <p style="margin-bottom: 20px">测量和仪器的图形化编程</p>
            <img src="@/assets/images/bg13.png" alt="" />
            <p style="margin-top: 20px">该组件将安装至本地硬盘</p>
          </div>
        </div>
        <div class="name">选择NI LabVIEW 2014的安装文件夹</div>
        <el-select
          disabled
          placeholder="C:\Users\LabVIEW Chinese\2014"
          style="width: 300px; margin-top: 10px"
        />
        <el-button disabled style="margin-left: 5px; margin-top: 10px"
          >浏览</el-button
        >
      </div>
      <div class="step6" v-show="installationStep === 6">
        <div class="title">产品通知</div>
        <div class="tip">请查看所选配置的相关信息。</div>
        <div class="item">
          警告：可能已启用Windows防火墙默认状态下，Windows操作系统启用防火墙。首次打开LabVIEW时，可能会弹出一个对话框，要求您选择是否从网络接收信息。建议选择“解除阻止”，以使用LabVIEW的所有网络功能。详细信息请访问ni.com/info，并输入信息代码expm69查询。
          <br />产品注意事项 <br />安装该产品之前，必须安装Microsoft Office
          XP或更高版本。“Report Generation工具包-用于Microsoft
          Office”提供的一组VI可用于创建和编辑Microsoft Word和Microsoft
          Excel格式的报表。通过报表生成工具，用户可使用Word、Excel或自定义模板创建风格一致的专业报表；减少报表显示、打印或保存前编程的工作量。还可以在*.rd文档和Excel工作表中执行Visual
          Basic宏，实现自定义的功能。更多关于Report
          Generation工具包的信息，请访问ni.com/info并输入信息代码report。
          <br />正在安装自等社过猪保要票影的前我地,是器得品和更新。如执行搜索，则gational
          Instruments将在遵循保密协议的前提下，使用您的搜索查询来改进搜索结果和相关性。
        </div>
      </div>
      <div class="step6" v-show="installationStep === 7">
        <div class="title">产品通知</div>
        <div class="tip">请查看所选配置的相关信息。</div>
        <div class="item">
          安装须知：本协议具合同效力。在你方下载软件和/或完成软件安装过程之前，请仔细阅读本协议。一旦你方下载和/或点击相应的按钮，从而完成软件安装过程，即表示你方同意本协议条款并愿意受本协议的约束。若你方不愿意成为本协议的当事方，并不接受本协议所有条款和条件的约束，请点击相应的按钮取消安装过程，即不要安装或使用软件，并在收到软件之日起三十(30)日内将软件(及所有随附书面材料及其包装)退还至获取该软件的地点，所有退还事宜都应遵守退还发生时适用的NI退还政策。.com/info，并输入信息代码expm69查询。
          <br>定义 在本协议中，下列术语的含义如下本National Instruments许可适用于软件LabVIEW 204
        </div>
        <div class="radio-container">
          <el-radio-group v-model="radio1">
            <el-radio value="接受" size="large">我接受上述2条许可协议。</el-radio>
            <el-radio value="不接受" size="large">我不接受某些许可协议。</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="step8" v-show="installationStep === 8">
        <p class="name">总进度</p>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="100"
          style="margin-bottom: 25px"
        />
        <p class="name">复制新文件</p>
        <el-progress :percentage="100" status="success" :stroke-width="20" />
      </div>
      <div class="step8" v-show="installationStep === 9">
        <p class="name">总进度</p>
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="100"
          style="margin-bottom: 25px"
        />
        <p class="name">复制新文件</p>
        <el-progress :percentage="100" status="success" :stroke-width="20" />
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-show="installationStep === 11"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >稍后重启(A)</el-button
        >
        <el-button
          v-show="installationStep === 11"
          type="primary"
          @click="Completed"
          style="background-color: #0052d9; color: #fff; border: 0"
        >
          关闭计算机(S)
        </el-button>
        <el-button
          v-show="installationStep === 11"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >重新启动(R)</el-button
        >
        <el-button
          v-show="installationStep === 5"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >恢复默认设置</el-button
        >
        <el-button
          v-show="installationStep === 5"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >磁盘占用</el-button
        >
        <el-button
          v-show="installationStep === 6||installationStep === 7||installationStep === 8||installationStep === 9"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >保存文件</el-button
        >
        <el-button
          v-if="installationStep === 11 ==false"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >上一步</el-button
        >
        <el-button
          v-if="installationStep === 11 ==false"
          type="primary"
          @click="setInstallationStep"
          style="background-color: #0052d9; color: #fff; border: 0"
        >
          下一步
        </el-button>
        <el-button
          v-if="installationStep === 11 ==false"
          type="primary"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
        >
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="Popup"
    width="650px"
    height="500px"
    top="10%"
    style="left: 5%; padding: 0"
  >
    <template #header>
      <div class="dialog-header">安装LabVIEW硬件支持</div>
    </template>
    <div class="installation-box">
      <div v-show="installationStep === 8">
        <div
          style="
            margin-top: 8px;
            margin-bottom: 80px;
            font-size: 16px;
            line-height: 1.6;
            letter-spacing: 0.5px;
            font-weight: bold;
          "
        >
          如需使LabVIEW支持硬件设备，必须安装相应的设备驱动程序即便以前版本的LabVIEW已经安装相应设备驱动程序，仍需。需为当前版本的LabVIEW重新安装。
        </div>
        <div class="item">如所需文件处于其他位置，请在下面输入相应路径。</div>
        <el-select
          disabled
          placeholder="C:\Users\LabVIEW Chinese\2014"
          style="width: 300px; margin-top: 10px; margin-left: 15px"
        />
        <el-button disabled style="margin-left: 5px; margin-top: 10px"
          >浏览</el-button
        >
      </div>
      <div
        class="step9"
        v-show="installationStep === 9"
        style="height: 250px; font-weight: bold; font-size: 16px"
      >
        安装完成!
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-show="installationStep === 8"
          size="large"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >安装支持</el-button
        >
        <el-button
          v-show="installationStep === 8"
          type="primary"
          size="large"
          @click="setInstallationStep"
          style="background-color: #0052d9; color: #fff; border: 0"
        >
          不需要支持
        </el-button>
        <el-button
          v-show="installationStep === 9"
          size="large"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
          >上一步</el-button
        >
        <el-button
          v-show="installationStep === 9"
          type="primary"
          size="large"
          @click="Installation = false"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
        >
          下一步
        </el-button>
        <el-button
          v-show="installationStep === 9"
          size="large"
          @click="Completed"
          style="background-color: #0052d9; color: #fff; border: 0"
          >完成</el-button
        >
      </div>
    </template>
  </el-dialog>
  <el-dialog
    v-model="isShowIdea"
    width="1000px"
    height="500px"
    top="10%"
    style="left: 5%; padding: 0"
  >
    <template #header>
      <div class="dialog-header">INTELIJ IDEA SETUP</div>
    </template>
    <div class="idea-box">
      <div class="left"></div>
      <div class="right">
        <div v-if="installationStep === 10">
          <div class="title">Welcome to IntelliJ lDEA Setup</div>
          <div class="description">
            Setup wil guide you through the installation of Inteli] IDEA. It is
            recommended that you dose all other applications befonestarting
            Setup, This will make it possible to update relevantsystem fles
            wthout having to reboot your computer.<br /> Click Nedt to cantinue.
          </div>
        </div>
        <div v-if="installationStep === 11">
          <div class="title"> Completing inteliJ lDEA Setup </div>
          <div class="description">
           lrtel lDEA has been instdlled on your comgarier.Chdk nnish to dose setmp R.n intt3 boEA
          </div>
        </div>
      </div>
      <!-- <div
        class="step9"
      
        style="height: 250px; font-weight: bold; font-size: 16px"
      >
        安装完成!
      </div> -->
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          v-show="installationStep === 10"
          type="primary"
          size="large"
          @click="setInstallationStep"
          style="background-color: #f3f3f3; color: #000000; border-color: #ccc"
        >
          下一步
        </el-button>
        <el-button
          v-show="installationStep === 11"
          size="large"
          @click="insatIdea"
          style="background-color: #0052d9; color: #fff; border: 0"
          >完成</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { setStepEvent } from "@/utils/setStep";
import { formatDate } from "@/utils";
import { useRouter, useRoute } from "vue-router";
import { onMounted } from "vue";
type Falg = boolean;
type Step = number;
const falg = ref<Falg>(Boolean(localStorage.getItem("falg")) || false);
const product = ref<Falg>(Boolean(localStorage.getItem("product")) || false);
const step = ref<Step>(0);
const popover1 = ref<any>(null);
const popover2 = ref<any>(null);
const radio1 = ref<any>('接受')
const dialogVisible = ref<Falg>(false);
const Installation = ref<Falg>(false);
const Popup = ref<Falg>(false);
const installationStep = ref<Step>(
  Number(localStorage.getItem("installationStep")) || 1
);
const route = useRoute();
const router = useRouter();
const isShowIdea = ref<Boolean>(false);
console.log(route);
onMounted(() => {
  if (route.query.idea) {
  isShowIdea.value = true;
  installationStep.value = 10
}
})

const checkList = ref<Step[]>([1, 2]);
const unpack = (): void => {
  falg.value = true;
  localStorage.setItem("falg", "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++;
  localStorage.setItem("installationStep", installationStep.value.toString());
  if (installationStep.value == 8) {
    Popup.value = true;
  }
  if (installationStep.value == 9) {
    Installation.value = false;
    Popup.value = true;
  }
  if(installationStep.value == 11){
    // Installation.value = true
    Popup.value = false
  }
};
const Completed = (): void => {
  Popup.value = false;
  product.value = true;
  localStorage.setItem("product", "true");
};

// 前往labView
const goToLabView = async () => {
  await setStepEvent(1, formatDate(new Date()));
  router.push("/program");
};
const goToLabIdea = async () => {
  await setStepEvent(7,formatDate(new Date()))

  router.push('/compiler')
}
const insatIdea = () => {
  isShowIdea.value = false
  setStepEvent(6,formatDate(new Date()))
}
</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: 500px;
      height: 500px;
      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;
    }
  }
  .step3 {
    // width: 540px;
    // height: 500px;
    // border-radius: 5px;
    // background-color: #fff;
    .title {
      font-size: 25px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .tip {
      margin-top: 20px;
      font-size: 15px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .serial {
      margin-top: 40px;
      .name {
        font-size: 15px;
        font-weight: bold; /* 设置文字加粗 */
        margin-left: 400px;
        margin-bottom: 15px;
      }
      :deep(.el-form-item__label) {
        text-align: left; /* 设置label左对齐 */
        line-height: 20px;
      }
    }
  }
  .step4 {
    .title {
      font-size: 25px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .tip {
      margin-top: 20px;
      font-size: 15px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .item {
      margin-top: 50px;
    }
    .item:before {
      content: "• "; /* 在内容前添加一个小点和空格 */
      color: rgb(0, 0, 0); /* 设置小点的颜色 */
      font-size: 15px; /* 设置小点的大小 */
      margin-right: 5px; /* 设置小点和文本之间的间距 */
    }
  }
  .step5 {
    .title {
      font-size: 25px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .tip {
      margin-top: 20px;
      font-size: 15px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .headers {
      display: flex; /* 使用Flexbox布局 */
      justify-content: space-between; /* 让子元素在容器中左右对齐 */
    }
    .header {
      display: flex; /* 使用Flexbox布局 */
      flex-direction: column; /* 设置子元素竖向排列 */
      align-items: flex-start; /* 对齐方式，让子元素的起始位置对齐 */
      width: auto;
    }
    .item {
      margin-top: 20px;
      margin-left: 30px;
      font-size: 13px;
    }
    .item:before {
      content: "▸ "; /* 在内容前添加一个小点和空格 */
      color: rgb(0, 0, 0); /* 设置小点的颜色 */
      font-size: 13px; /* 设置小点的大小 */
      margin-right: 5px; /* 设置小点和文本之间的间距 */
    }
    .image-container {
      background-color: #ebebeb;
      width: 300px; /* 或者根据需要调整宽度 */
      margin-left: auto; /* 推动到右侧 */
      padding: 10px;
      display: flex; /* 启用Flexbox布局 */
      flex-direction: column; /* 设置子元素竖向排列 */
      justify-content: center; /* 垂直居中 */
      align-items: center; /* 水平居中 */
    }
    .name {
      margin-top: 40px;
    }
    .name:before {
      content: "• "; /* 在内容前添加一个小点和空格 */
      color: rgb(0, 0, 0); /* 设置小点的颜色 */
      font-size: 15px; /* 设置小点的大小 */
      margin-right: 5px; /* 设置小点和文本之间的间距 */
    }
  }
  .step6 {
    .title {
      font-size: 15px;
      font-weight: bold; /* 设置文字加粗 */
      color: #f2994a;
      margin-bottom: 10px;
    }
    .item {
      margin-top: 40px;
      line-height: 1.6; /* 设置行高 */
      letter-spacing: 0.5px; /* 设置字母间距 */
    }
  }
  .step7 {
    padding: 50px;
    // width: 600px;
    .name {
      margin-bottom: 8px;
      font-size: 15px;
      font-weight: bold; /* 设置文字加粗 */
    }
    .item:before {
      content: "• "; /* 在内容前添加一个小点和空格 */
      color: rgb(0, 0, 0); /* 设置小点的颜色 */
      font-size: 15px; /* 设置小点的大小 */
      margin-right: 5px; /* 设置小点和文本之间的间距 */
    }
  }
}
.idea-box {
  width: 1000px;
  height: 400px;
  display: flex;
  .left {
    width: 234px;
    height: 100%;
    background: url("../../assets/images/idealeftbgc.png");
  }
  .right{
    flex: 1;
    margin-left: 30px;
    .title{
      font-size: 32px;
      color: #585858;
    }
    .description{
      margin-top: 50px;
      line-height: 24px;
      font-weight: 600;
    }
  }
}
.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>