应用中心 2023-9-12

haoxuan

2023-09-12 8d270834a630785732829f6cb8af6c1e30fd7f43

应用中心 2023-9-12

 public/apps.json

@@ -2,6 +2,29 @@
  "code": 200,
  "data": [
    {
      "id": "7dea48a4-8294-4914-85d8-c2bbd4caf553",
      "name": "应用中心",
      "package": "algorithmManage",
      "type": "2",
      "url": "/view/ai/",
      "title": "应用中心",
      "width": 1243,
      "height": 670,
      "iconBlob": "",
      "icon": "../../images/app-mid/algorithm-store.png",
      "version": "1.0.0",
      "create_time": "2020-10-09 14:00:02",
      "create_by": "",
      "update_time": "",
      "update_by": "",
      "isDelete": 0,
      "isDefault": true,
      "remoteVersion": "",
      "installed": true,
      "isUpgrade": false,
      "progressMsg": ""
    },
    {
      "id": "850b5e86-dbcf-40f2-8511-745a4d06ec84",
      "name": "日志管理",
      "package": "syslog",

 src/pages/ai/index/App.vue

New file
@@ -0,0 +1,2662 @@
<template>
  <div class="s-task-manage">
    <div style="height: 100%">
      <div class="flex-box task-manage">
        <div class="installModel" v-if="isInstall">
          <div class="progress-bar">
            <div class="inner-bar"></div>
          </div>
        </div>
        <!-- 超级管理员可见 -->
        <div class="super">
          <div class="left-box">
            <!-- <div class="title">
          <label>算法库</label>
            </div>-->
            <el-tabs
              v-model="activeName"
              type="border-card"
              @tab-click="handleTabClick"
              style="height: calc(100% - 20px)"
            >
              <el-tab-pane label="已激活" name="myAlgorithm">
                <div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'">
                  <p class="src-title">算法软件</p>
                  <div class="flex-list">
                    <div class="wrap-box" v-for="item in installedList" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div
                            class="svg-wrap"
                            :class="{ willUpGrade: item.isUpgrade }"
                            v-loading="item.upgradeLoading"
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <!-- <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">
                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
                              <div class="left-top">
                                <div>当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <div class="info-onmask" @click="checkDetail(item, 'active')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                  @click="unLoadSdk(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >卸载</el-button>
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="donwload(item, 0)"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
                                >升级</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">
                                {{
                                item.sdk_name
                                }}
                              </span>

                              <el-input
                                size="small"
                                v-model="item.sdk_name"
                                v-if="item.isEdit"
                                v-focus
                                :maxlength="15"
                                @blur="inputBlur(item)"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="wrap-box" v-for="item in notInstalledList" :key="item.id">
                      <div
                        class="list-choose-item-left list-choose-item-left-uninstal"
                        v-loading="downloading && downloadItem == item.id"
                      >
                        <div class="mask">
                          <div class="left-top">
                            <div v-if="item.installed">当前版本:{{ item.version }}</div>
                            <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                          </div>
                          <div
                            class="info-onmask"
                            @click="checkDetail(item, 'activeNotInstall')"
                          >查看详情</div>
                          <div class="mask-btn">
                            <el-button @click="donwload(item,1)" type="primary" class="bot-btn">安装</el-button>
                          </div>
                        </div>
                        <div class="click-download" title="下载">
                          <span class="iconfont iconxiazai1"></span>
                        </div>
                        <div class="list-complete-item-handle">
                          <div
                            class="svg-wrap"
                            v-loading="
                              item.installLoading || item.upgradeLoading
                            "
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span class="list-choose-item-left-uninstal">
                                {{
                                item.sdk_name
                                }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="src-title">应用软件</p>
                  <div class="flex-list">
                    <div class="wrap-box" v-for="item in installedApps" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div
                            class="svg-wrap"
                            :class="{ willUpGrade: item.isUpgrade }"
                            v-loading="
                              item.unloadLoading || item.upgradeLoading
                            "
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <!-- <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">

                            <div class="mask">
                              <div class="left-top">
                                <div>当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <!-- v-if="!item.isDefault" -->
                              <div class="info-onmask" @click="checkDetail(item,'active')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                  v-show="!item.isDefault"
                                  @click="unLoad(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >卸载</el-button>
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="downloadApp(item, 'upgrade')"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
                                >升级</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name" style="color:grey;">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
                                v-model="item.sdk_name"
                                v-if="item.isEdit"
                                v-focus
                                :maxlength="15"
                                @blur="inputBlur(item)"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="wrap-box" v-for="item in storeApps" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle uninstall">
                          <div
                            class="svg-wrap"
                            v-loading="
                              item.installLoading || item.upgradeLoading
                            "
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <div class="mask">
                               <div class="left-top">
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <!-- v-if="!item.isDefault" -->
                              <div class="info-onmask" @click="checkDetail(item,'activeNotInstall')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                @click="downloadApp(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >安装</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
                                v-model="item.name"
                                v-if="item.isEdit"
                                v-focus
                                :maxlength="15"
                                @blur="inputBlur(item)"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>

              <el-tab-pane
                label="离线升级/安装"
                name="upgradeOrInstallation"
                v-if="isShow('algorithmManage:insOffLine')"
              >
                <div class="tab-content">
                  <div class="action-bar">
                    <file-uploader
                      single
                      tip
                      tipWords="上传算法"
                      uploadPlaceholder="上传安装软件"
                      url="/data/api-v/sdk/upload"
                      @complete="onFileUpload"
                      @file-added="onFileAdded"
                    />
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="应用中心" name="algorithmMall" v-if="isShow('algorithmManage:buy')">
                <div class="tab-content">
                  <div class="flex-title">
                    <p class="src-title">算法软件</p>
                  </div>
                  <div class="store-list flex-list">
                    <div class="wrap-box" v-for="item in unActivedSDKList" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div class="alg-icon svg-wrap">
                            <!-- <div class="mask" @click="actSdkOrApp(item.id)">
                              <span
                                class="iconfont iconyunxiazai"
                                style="
                                  color: #ff6a00;
                                  font-size: 20px;
                                  position: absolute;
                                  top: 45%;
                                  left: 45%;
                                "
                              ></span>
                            </div>-->
                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
                              <div class="left-top">
                                <div>当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <div class="info-onmask" @click="actSdkOrApp(item)">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                  @click="actSdkOrApp(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >激活</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">
                                {{
                                item.sdk_name
                                }}
                              </span>
                              <el-input
                                size="small"
                                v-model="item.sdk_name"
                                v-if="item.isEdit"
                                v-focus
                                :maxlength="15"
                                @blur="inputBlur(item)"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <p class="src-title">应用软件</p>
                  <div class="app-list flex-list">
                    <div v-if="!unActivedAppList.length" class="empty-tip">暂无数据</div>
                    <div class="wrap-box" v-for="item in unActivedAppList" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div class="alg-icon svg-wrap">
                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
                              <div class="left-top">
                                <div>当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <div class="info-onmask" @click="actSdkOrApp(item,'app')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                  @click="actSdkOrApp(item, 'app')"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >激活</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
                                v-model="item.name"
                                v-if="item.isEdit"
                                v-focus
                                :maxlength="15"
                                @blur="inputBlur(item)"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!--  -->
              </el-tab-pane>
              <el-tab-pane name="update">
                <span slot="label">
                  <el-badge class="update-badge" :value="updateNum" :hidden="updateNum==0">更新</el-badge>
                </span>
                <div class="task-list">
                  <div class="flex-title">
                    <p class="src-title">算法软件</p>
                    <el-button @click="batchUpdate('sdk')" size="mini" type="primary">更新全部</el-button>
                  </div>
                  <div class="flex-list">
                    <div
                      v-if="hasNewVersionSdk.length==0"
                      class="empty-tip"
                    >{{errMsg?errMsg:"暂无数据"}}</div>
                    <div class="wrap-box" v-for="item in hasNewVersionSdk" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div
                            class="svg-wrap"
                            :class="{ willUpGrade: item.isUpgrade }"
                            v-loading="item.upgradeLoading"
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <!-- <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">

                            <div class="mask" v-if="!item.isDefault || item.isUpgrade">
                              <div class="left-top">
                                <div>当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <div class="info-onmask" @click="checkDetail(item,'active')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                  @click="unLoadSdk(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >卸载</el-button>
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="donwload(item, 0)"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
                                >升级</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">
                                {{
                                item.sdk_name
                                }}
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="flex-title">
                    <p class="src-title">应用软件</p>
                    <el-button @click="batchUpdate('app')" type="primary" size="mini">更新全部</el-button>
                  </div>
                  <div class="flex-list">
                    <div v-if="!hasNewVersionApp.length" class="empty-tip">暂无数据</div>
                    <div class="wrap-box" v-for="item in hasNewVersionApp" :key="item.id">
                      <div class="list-choose-item-left">
                        <div class="list-complete-item-handle">
                          <div
                            class="svg-wrap"
                            :class="{ willUpGrade: item.isUpgrade }"
                            v-loading="
                              item.unloadLoading || item.upgradeLoading
                            "
                            :element-loading-text="item.progressMsg"
                            element-loading-background="rgba(0,0,0,.8)"
                          >
                            <!-- <i class="iconfont iconupdate" v-if="item.isUpgrade"></i> -->
                            <img class="update-icon" v-if="item.isUpgrade" src="../../../assets/img/更新提示.png" alt="">

                            <div class="mask">
                              <div class="left-top">
                                <div>当前版本:{{ item.version }}</div>
                                <div v-if="item.remoteVersion">最新版本:{{ item.remoteVersion }}</div>
                              </div>
                              <div class="info-onmask" @click="checkDetail(item,'active')">查看详情</div>
                              <div class="mask-btn">
                                <el-button
                                  v-if="!item.isDefault"
                                  @click="unLoad(item)"
                                  type="primary"
                                  size="small"
                                  class="bot-btn"
                                >卸载</el-button>
                                <el-button
                                  v-if="item.isUpgrade"
                                  @click="downloadApp(item, 'upgrade')"
                                  type="warning"
                                  size="small"
                                  class="bot-btn"
                                >升级</el-button>
                              </div>
                            </div>
                            <img
                              v-if="item.iconBlob"
                              class="baseImg"
                              :src="
                                item.iconBlob.indexOf(',') > 0
                                  ? item.iconBlob
                                  : `data:image/png;base64,${item.iconBlob}`
                              "
                              alt
                            />
                            <img v-else class="baseImg" :src="item.icon" alt />
                          </div>
                          <div class="alg-name">
                            <div style="padding: 0px 10px 0px 10px">
                              <span v-if="!item.isEdit">{{ item.name }}</span>
                              <el-input
                                size="small"
                                v-model="item.sdk_name"
                                v-if="item.isEdit"
                                v-focus
                                :maxlength="15"
                                @blur="inputBlur(item)"
                              ></el-input>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="安装包信息"
      :visible.sync="installDialogVisible"
      width="40%"
      :close-on-click-modal="false"
    >
      <div class="installInfo">
        <template v-if="installAppPackage != null">
          <div>
            <div>
              <span>安装包名称：</span>
              <span>{{ installAppPackage.productName }}</span>
            </div>
            <div>
              <span>安装版本：</span>
              <span>{{ installAppPackage.version }}</span>
            </div>
            <div>
              <span>更新内容：</span>
              <span>{{ installAppPackage.installContent }}</span>
            </div>
          </div>
        </template>
        <template v-if="installSdkPackage != null">
          <div>
            <div>
              <span>安装包名称：</span>
              <span>{{ installSdkPackage.productName }}</span>
            </div>
            <div>
              <span>安装版本：</span>
              <span>{{ installSdkPackage.version }}</span>
            </div>
            <div>
              <span>更新内容：</span>
              <span>{{ installSdkPackage.installContent }}</span>
            </div>
          </div>
        </template>
        <p>确定安装？</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="installDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="offlineInstall">安 装</el-button>
      </div>
    </el-dialog>
    <!-- <div class="dialog-content" v-if="productDetailVisible" > -->
    <el-dialog class="product-detail-dialog" :visible="productDetailVisible" @close="closeDial">
      <!-- <el-button-group> -->
      <div class="button-group" v-show="!backDisable||!forwardDisable">
        <el-button size="small" @click="backwards" :disabled="backDisable">
          <span>&#60;</span>
        </el-button>
        <!-- <el-button type="primary" size="small" icon="el-icon-arrow-left"></el-button> -->
        <el-button size="small" @click="forwards" :disabled="forwardDisable">></el-button>
        <!-- <el-button type="primary" size="small"><i class="el-icon-arrow-right el-icon--right"></i></el-button> -->
      </div>
      <!-- </el-button-group> -->
      <div class="dialog-title" slot="title">{{isSDKDialog?"算法详情":"应用详情"}}</div>
      <div class="dialog-content">
        <div class="box-top">
          <div class="top-left">
            <div class="banner">
              <el-carousel
                ref="carousel"
                :autoplay="false"
                indicator-position="none"
                :arrow="
                  productDetail.pics !== undefined
                    ? productDetail.pics.length > 1
                      ? 'always'
                      : 'never'
                    : 'never'
                "
                @change="changeHandle"
              >
                <!-- :arrow="productDetail.pics.length > 1 ? 'always' : 'never'" -->
                <el-carousel-item v-for="(item, index) in productDetail.pics" :key="index">
                  <div class="imgwrap">
                    <img
                      v-if="item.type != 'video'"
                      :src="item.url"
                      class="cursor-pointer"
                      preview
                    />
                    <video v-if="item.type == 'video'" :src="item.url" controls></video>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div class="top-right">
            <!-- <div class="title">{{curCheckTarget.sdk_name}}</div> -->
            <div class="summary">
              <div class="icon">
                <img
                  v-if="productDetail.iconBlob"
                  class="baseImg"
                  :src="
                    productDetail.iconBlob.indexOf(',') > 0
                      ? productDetail.iconBlob
                      : `data:image/png;base64,${productDetail.iconBlob}`
                  "
                  alt
                />
              </div>
              <div class="right-desc">
                <div class="name">
                  <el-tooltip
                    class
                    effect="dark"
                    :content="productDetail.productName"
                    placement="right-start"
                  >
                    <span>{{ productDetail.productName }}</span>
                  </el-tooltip>
                </div>
                <div class="tags">
                  <el-tag type="info" size="small" color="#fff" v-if="!isSDKDialog">应用</el-tag>
                  <el-tag type="info" size="small" color="#fff" v-if="isSDKDialog">算法</el-tag>
                </div>
                <div class="btns">
                  <el-button
                    size="small"
                    type="warning"
                    v-if="needToUpgradeInWin||productDetail.isUpgrade"
                    @click="upgradeSDKinWin"
                  >
                    {{
                    isUpgrading ? "升级中.." : "升级"
                    }}
                  </el-button>
                  <el-button
                    size="small"
                    type="primary"
                    v-if="isActive&&!isDefaultApp"
                    @click="unloadSDKinWin"
                  >卸载</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    v-if="!isActive&&!showInstallNotActive"
                    @click="showInputCode=!showInputCode"
                  >激活</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    v-if="!isActive&&showInstallNotActive"
                    @click="downloadSdkInSide"
                  >{{isUpgrading?"安装中..":"安装"}}</el-button>
                  <el-button
                    size="small"
                    type="success"
                    v-if="!isSDKDialog&&isActive"
                    @click="openApp"
                  >打开</el-button>
                </div>
              </div>
            </div>
            <div class="jihuo-input" v-if="showInputCode">
              <el-input
                size="small"
                v-model="activeCode"
                placeholder="00000-00000-00000-00000-00000"
                @blur="getCodeDetail"
              ></el-input>
              <el-button type="primary" size="small" @click="actived">激活</el-button>
              <el-button type="primary" size="small" @click="cancelActivate">取消</el-button>
            </div>
            <div class="product-intruduction">
              <div class="part-title" v-if="!showInputCode">简介</div>
              <div class="text">
                <div class="single-desc">
                  <div>版本：</div>
                  <div>
                    {{
                    productDetail.productVersion === ""
                    ? "暂无"
                    : productDetail.productVersion
                    }}
                  </div>
                </div>
                <div class="single-desc">
                  <div>概述：</div>
                  <div>
                    {{
                    productDetail.description === ""
                    ? "暂无"
                    : productDetail.description
                    }}
                  </div>
                </div>
                <div class="single-desc">
                  <div>详述：</div>
                  <div>
                    {{
                    productDetail.summary === ""
                    ? "暂无"
                    : productDetail.summary
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box-bottom">
          <div class="bot-left">
            <div class="part-title">{{ isSDKDialog ? "应用场景" : "功能特点" }}</div>
            <div class="list-zone">
              <div class="list-item" v-for="(item, index) in productDetail.funcInfo" :key="index">
                <el-tag
                  type
                  size="small"
                  effect="dark"
                >{{ item.title === "" ? "暂无数据" : item.title }}</el-tag>
                <div class="desc">
                  {{
                  item.desc === ""
                  ? "暂无数据"
                  : item.desc
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="bot-right">
            <div class="part-title">推荐算法</div>
            <div class="item-zone">
              <div class="item" v-for="(item, index) in otherProducts" :key="index">
                <el-tag type="info" color="inherit" size="small">
                  {{
                  item.productTypeName === ""
                  ? "暂无数据"
                  : item.productTypeName
                  }}
                </el-tag>
                <div class="icon">
                  <img
                    v-if="item.iconBlob"
                    class="baseImg"
                    :src="
                      item.iconBlob.indexOf(',') > 0
                        ? item.iconBlob
                        : `data:image/png;base64,${item.iconBlob}`
                    "
                    alt
                  />

                  <div class="icon-name">
                    <el-tooltip
                      class
                      effect="dark"
                      :content="item.name === '' ? '暂无数据':item.name"
                      placement="top-start"
                    >
                      <span>{{ item.name === "" ? "暂无数据" : item.name }}</span>
                    </el-tooltip>
                  </div>
                </div>
                <div class="look-button">
                  <el-button type="primary" size="mini" @click="checkInWindow(item)">查看</el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="showActivateSuccess"
      title="激活成功！"
      width="30%"
      class="active-Dial"
      :before-close="handleClose"
    >
      <div class="dialog-active">
        <ul class="desc">
          <li>
            <label>激活码:</label>
            <span>{{ activedSdkOrApp.activateCode }}</span>
          </li>
          <li>
            <label>产品名称:</label>
            <span>{{ activedSdkOrApp.productName }}</span>
          </li>
          <li>
            <label>配置详情:</label>
            <span>{{ activedSdkOrApp.setting }}</span>
          </li>
          <li>
            <label>服务到期日:</label>
            <span>{{ activedSdkOrApp.expireTime }}</span>
          </li>
          <li>
            <label>许可证:</label>
            <span>{{ activedSdkOrApp.licence }}</span>
          </li>
        </ul>
        <div class="text-right">
          <el-button type="primary" @click="checkMyAlgorith">确定</el-button>
          <p class="tip">提示：请在“已激活”中查看并安装算法</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  findAllSdk,
  downloadSdk,
  installSdk,
  getInstallInfo,
  removeSdk,
} from "./api";
import {
  getApps,
  installApp,
  getAppDetail,
  removeApp,
  getUnActivedSdk,
  actPageAlg,
  getUnActivedApp,
  actApp,
} from "@/api/app";

import bus from "@/plugin/bus";
import FileUploader from "@/components/subComponents/FileUpload/index";
export default {
  name: "algorithmManage",
  props: {},
  components: {
    FileUploader,
  },
  computed: {
    updateNum() {
      return this.hasNewVersionApp.length + this.hasNewVersionSdk.length;
    },
    // notInstalledList () {
    //   return this.sdkList.filter(sdk => {
    //     return sdk.installed === false;
    //   });
    // },
    // installedList () {
    //   return this.sdkList.filter(sdk => {
    //     return sdk.installed === true && !sdk.isUpgrade;
    //   });
    // },
    // ungradeList () {
    //   // 升级处理会导致重复的key,需要修改
    //   let arr = this.sdkList.filter(sdk => {
    //     return sdk.isUpgrade === true;
    //   });
    //   arr.forEach(sdk => {
    //     sdk.upgradeLoading = false;
    //   });
    //   return arr;
    // },
    isAdmin() {
      if (
        sessionStorage.getItem("userInfo") &&
        sessionStorage.getItem("userInfo") !== ""
      ) {
        let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
        return loginName === "superadmin" || loginName === "basic";
      }

      return false;
    },
  },
  data() {
    return {
      sdkList: [],
      installedList: [],
      hasNewVersionSdk: [],
      hasNewVersionApp: [],
      notInstalledList: [],
      buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
      activeName: "myAlgorithm",
      patchUpdateStatus: "",
      downloadItem: "",
      downloading: false,
      direction: "rtl",
      actStep: 0,
      showActivateSuccess: false,
      activeCode: "",
      isInstall: false,
      installDialogVisible: false,
      installPackage: {},
      installAppPackage: null,
      installSdkPackage: null,
      isActive: true,
      isDefaultApp: false,
      installPercentage: 0,
      unActivedSDKList: [],
      unActivedAppList: [],
      isSDKDialog: true,
      //actSdkId: '',
      actType: "",
      actId: "",
      activedSdkOrApp: {
        activateCode: "",
        productName: "",
        setting: "",
        expireTime: "",
        licence: "",
        devIds: "",
      },
      // unloadLoading: false,
      // installLoading: false,
      installedApps: [],
      storeApps: [],
      installFile: {},
      freshTimer: null,
      appUpgreading: true,
      sdkUpgreading: true,
      autoRefresh: true,
      curCheckTarget: {},
      productDetailVisible: false,
      isUpgrading: false,
      productDetail: {},
      otherProducts: [],
      backStack: [],
      forwardStack: [],
      backDisable: true,
      forwardDisable: true,
      showInputCode: false,
      needToUpgradeInWin: false,
      errMsg: "",
      showInstallNotActive: false
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus();
      },
    },
  },

  mounted() {
    // 获取所有应用
    this.autoRefreshAppAndSdkState();

    this.getUnActivedList();
    this.getUnActivedAppList();
  },
  beforeDestroy() {
    this.autoRefresh = false;
  },
  methods: {
    isShow(authority) {
      return (
        this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
      );
    },
    batchUpdate(type) {
      if (type == "sdk") {
        this.hasNewVersionSdk.forEach((sdk) => {
          this.donwload(sdk, 0);
        });
      } else {
        this.hasNewVersionApp.forEach((app) => {
          this.downloadApp(app, "upgrade");
        });
      }
    },
    closeDial() {
      this.productDetailVisible = false
      this.productDetail = {}
      this.otherProducts = []
    },
    checkDetail(item, type) {
      if (type == 'inactive') {
        this.isActive = false
        this.showInstallNotActive = false
        this.showInputCode = false
      } else if (type == 'active') {
        this.showInputCode = false
        this.showInstallNotActive = false
        this.isActive = true
      } else if (type == 'activeNotInstall') {
        this.showInputCode = false
        this.isActive = false
        this.showInstallNotActive = true
      }
      this.checkIsDefOrNot(item.id)
      this.needToUpgradeInWin = item.isUpgrade ? true : false
      this.resetStack()
      if (item.sdk_type === undefined) {
        this.isSDKDialog = false
      } else {
        this.isSDKDialog = true
      }
      this.productDetailVisible = true;
      let _this = this;
      getAppDetail({ id: item.id }).then((res) => {
        _this.productDetail = res.data.detail;
        _this.productDetail.isUpgrade = item.isUpgrade;
        _this.productDetail.iconBlob = item.iconBlob;

        _this.otherProducts = res.data.randoms;
      });
    },
    resetStack() {
      this.forwardStack = []
      this.backStack = []
      this.backDisable = true
      this.forwardDisable = true

    },
    checkInWindow(item) {
      this.backStack.push([this.productDetail, this.otherProducts])
      this.backDisable = false
      this.checkIsDefOrNot(item.id)

      let _this = this;
      getAppDetail({ id: item.id }).then((res) => {
        _this.productDetail = res.data.detail;
        _this.productDetail.iconBlob = item.iconBlob
        this.actId = _this.productDetail.productBaseId
        let flag = false
        const allNeedToNew = [...this.hasNewVersionSdk, ...this.hasNewVersionApp]
        for (let i = 0; i < allNeedToNew.length; i++) {
          const item = allNeedToNew[i];
          if (item.id == _this.productDetail.productBaseId) {
            flag = true
          }
        }
        this.needToUpgradeInWin = flag
        _this.productDetail.isUpgrade = flag

        _this.otherProducts = res.data.randoms;
      });
    },
    checkIsDefOrNot(id) {
      if (id.length > 10) {
        this.isDefaultApp = false
      } else {
        this.isDefaultApp = true
      }
    },
    backwards() {
      if (this.backStack.length == 0) {
        this.backDisable = true
        return
      }

      this.forwardStack.push([this.productDetail, this.otherProducts])
      let item = this.backStack.pop()
      this.productDetail = item[0]
      this.checkIsDefOrNot(this.productDetail.productBaseId)
      this.otherProducts = item[1]
      this.forwardDisable = false
      if (this.backStack.length == 0) {
        this.backDisable = true

      }
    },
    forwards() {
      if (this.forwardStack.length == 0) {
        this.forwardDisable = true
        return
      }

      this.backStack.push([this.productDetail, this.otherProducts])
      this.backDisable = false
      let item = this.forwardStack.pop()

      this.productDetail = item[0]
      this.otherProducts = item[1]
      if (this.forwardStack.length == 0) {
        this.forwardDisable = true
      }

    },
    //离线安装
    offlineInstall() {
      this.installDialogVisible = false;
      this.isInstall = true;
      //安装
      installSdk(this.installFile)
        .then((res) => {
          if (res.success) {
            this.isInstall = false;
            this.$message({
              type: "success",
              message: '安装成功,将跳转至"已激活"中查看',
            });
            setTimeout(() => {
              this.getAllSdk();
              window.parent.postMessage(
                {
                  msg: "AppUpdate",
                },
                "*"
              );
              this.activeName = "myAlgorithm";
            }, 3000);
          }
        })
        .catch((e) => {
          this.isInstall = false;
          this.$message({
            type: "error",
            message: e.data,
          });
        });
    },

    downloadApp(app, action) {
      if (action == "upgrade") {
        app.upgradeLoading = true;
      } else {
        app.installLoading = true;
      }
      let _this = this;

      installApp({ path: app.id })
        .then((res) => {
          if (res && res.success) {
            _this.$notify({
              title: "成功",
              message: "安装应用成功",
              type: "success",
            });
            setTimeout(() => {
              if (action == "upgrade") {
                app.upgradeLoading = false;
              } else {
                app.installLoading = false;
              }
              // _this.getAllApps();
              window.parent.postMessage(
                {
                  msg: "AppUpdate",
                },
                "*"
              );
            }, 3000);
          } else {
          }
        })
        .catch((e) => {
          _this.$notify({
            title: "安装失败",
            message: e.data,
            type: "warning",
          });
          if (action == "upgrade") {
            app.upgradeLoading = false;
          } else {
            app.installLoading = false;
          }
        });

      // 开启自动刷新
      this.appUpgreading = true;
    },
    async getAllApps() {
      let iArry = [];
      let sArry = [];
      let nArry = [];
      let rsp = await getApps();
      if (rsp && rsp.success) {
        // 遍历app的过程重置
        this.appUpgreading = false;

        rsp.data.forEach((item) => {
          let obj = Object.assign(
            { unloadLoading: false, upgradeLoading: false },
            item
          );
          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
            obj.upgradeLoading = true;

            this.appUpgreading = true;
          }
          item.installed ? iArry.push(obj) : sArry.push(obj);
          item.isUpgrade && nArry.push(obj);
        });
      }
      this.installedApps = iArry;
      this.storeApps = sArry;
      this.hasNewVersionApp = nArry;
    },

    //卸载
    unLoad(app) {
      let _this = this;
      this.$confirm("确定要卸载该应用吗?", "提示")
        .then(() => {
          _this.productDetailVisible = false

          app.unloadLoading = true;
          removeApp({ appId: app.id })
            .then((res) => {
              if (res && res.success) {
                app.unloadLoading = false;
                _this.getAllApps();
                window.parent.postMessage(
                  {
                    msg: "AppUpdate",
                  },
                  "*"
                );
                _this.$notify({
                  title: "成功",
                  message: "卸载应用成功",
                  type: "success",
                });
              }
            })
            .catch((e) => {
              console.log(e);
              app.unloadLoading = false;
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },

    actSdkOrApp(item, type = "sdk") {
      this.checkDetail(item, "inactive");
      this.actType = type;
      this.actId = item.id;
      this.actStep = 0;
      this.activeCode = "";
      this.activedSdkOrApp = this.newActInfo();
    },

    cancelActivate() {
      this.showInputCode = false
      this.activeCode = ""
    },
    newActInfo() {
      return {
        activateCode: "",
        productName: "",
        setting: "",
        expireTime: "",
        licence: "",
        devIds: "",
      };
    },
    getUnActivedList() {
      getUnActivedSdk().then((res) => {
        if (res.code == 200) {
          this.unActivedSDKList = res.data;
        }
      });
    },
    getUnActivedAppList() {
      getUnActivedApp().then((res) => {
        if (res.code == 200) {
          this.unActivedAppList = res.data;
        }
      });
    },
    actived() {
      let _this = this;
      if (this.activeCode.trim() == "") {
        this.$notify({
          type: "error",
          message: "激活码不能为空",
        });
        return;
      }
      if (this.actType == "sdk") {
        //激活算法
        actPageAlg(this.actId, this.activeCode)
          .then((res) => {
            if (res.data.isSuccess) {
              this.productDetailVisible = false;
              _this.activedSdkOrApp = res.data.successMsg;
              this.showActivateSuccess = true
              _this.actStep++;
              _this.getUnActivedList();
              _this.getAllSdk();
            } else {
              _this.$notify({
                type: "error",
                message: res.data.failMsg.failMsg,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      } else if (this.actType == "app") {
        //激活应用
        actApp(this.actId, this.activeCode)
          .then((res) => {
            if (res.data.isSuccess) {
              this.productDetailVisible = false;
              _this.activedSdkOrApp = res.data.successMsg;
              this.showActivateSuccess = true
              _this.actStep++;
              _this.getUnActivedAppList();
              _this.getAllApps();
            } else {
              _this.$notify({
                type: "error",
                message: res.data.failMsg.failMsg,
              });
            }
          })
          .catch((e) => {
            console.log(e);
          });
      }
    },
    getCodeDetail() { },
    checkMyAlgorith() {
      this.showActivateSuccess = false;
      this.activeName = "myAlgorithm";
    },
    onFileUpload(file) {
      //this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始安装</span>`;
      this.patchFile = { ...file };
      this.fileAdded = true;
      const h = this.$createElement;
      //上传完成获取安装信息
      let _this = this;
      getInstallInfo(file)
        .then((res) => {
          _this.installFile = file;
          if (res.success) {
            _this.installDialogVisible = true;
            if (res.data.apps.length > 0) {
              _this.installAppPackage = {
                appId: res.data.apps[0].appId,
                version: res.data.apps[0].version,
                productName: res.data.productName,
                installContent: res.data.apps[0].installContent,
              };
            }
            if (res.data.sdks.length > 0) {
              _this.installSdkPackage = {
                appId: res.data.sdks[0].sdkId,
                version: res.data.sdks[0].version,
                productName: res.data.productName,
                installContent: res.data.sdks[0].installContent,
              };
            }
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: e.data,
          });
        });
    },
    openApp() {
      let message = 'toOpenApp?' + this.productDetail.productBaseId;
      window.parent.postMessage({
        msg: message
      }, "*")
    },

    onFileAdded(f) {
      this.patchUpdateStatus = "";
    },

    async getAllSdk() {
      let installedList = [];
      let unInstalledList = [];
      let hasNewVersionList = [];
      let res = await findAllSdk();
      if (res && res.success) {
        this.sdkUpgreading = false;

        res.data.forEach((item) => {
          let obj = Object.assign(
            { unloadLoading: false, upgradeLoading: false },
            item
          );
          if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
            obj.upgradeLoading = true;

            this.sdkUpgreading = true;
          }

          //算法软件 已安装其中包含待升级 未安装
          item.installed ? installedList.push(obj) : unInstalledList.push(obj);
          item.isUpgrade ? hasNewVersionList.push(obj) : null
        });
      }
      this.installedList = installedList;
      this.notInstalledList = unInstalledList;
      this.hasNewVersionSdk = hasNewVersionList;
    },
    unloadSDKinWin() {

      let appToUnload
      let sdkToUnload
      if (this.productDetail.productTypeName == "应用") {
        appToUnload = this.installedApps.find((item) => {
          return item.id == this.productDetail.productBaseId
        })
        this.unLoad(appToUnload)
      } else {
        sdkToUnload = this.installedList.find((item) => {
          return item.id == this.productDetail.productBaseId
        })
        this.unLoadSdk(sdkToUnload)
      }
    },
    //卸载算法
    unLoadSdk(sdk) {
      let _this = this;
      this.$confirm("确定要卸载该算法吗?", "提示")
        .then(() => {
          _this.productDetailVisible = false
          sdk.unloadLoading = true;
          removeSdk({ sdkId: sdk.id })
            .then((res) => {
              if (res && res.success) {
                sdk.unloadLoading = false;
                this.$notify({
                  title: "成功",
                  message: "卸载完成",
                  type: "success",
                });
                _this.getAllSdk();
                window.parent.postMessage(
                  {
                    msg: "AppUpdate",
                  },
                  "*"
                );
              }
            })
            .catch((e) => {
              console.log(e);
              sdk.unloadLoading = false;
            });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    upgradeSDKinWin() {
      this.isUpgrading = !this.isUpgrading;

      let _this = this;
      if (this.productDetail.productTypeName == "应用") {
        installApp({ path: this.productDetail.productBaseId })
          .then((res) => {
            if (res && res.success) {
              this.$notify({
                title: "成功",
                message: "升级完成",
                type: "success",
              });
              this.needToUpgradeInWin = false
              this.productDetail.isUpgrade = false
              this.isUpgrading = !this.isUpgrading;

            }
          })
          .catch((e) => {
            _this.$notify({
              title: "升级失败",
              message: e.data,
              type: "warning",
            });
            this.isUpgrading = !this.isUpgrading;
          });

        // 开启自动刷新
        this.appUpgreading = true;
      } else {
        downloadSdk({ path: this.productDetail.productBaseId }).then((res) => {
          this.needToUpgradeInWin = false
          this.productDetail.isUpgrade = false
          this.isUpgrading = !this.isUpgrading;
          this.$notify({
            title: "成功",
            message: "升级完成",
            type: "success",
          });
        }).catch((err) => {
          this.$notify({
            title: "升级失败",
            message: err.data,
            type: "warning",
          });
          this.isUpgrading = !this.isUpgrading;
        })
        this.sdkUpgreading = true;
      }



    },
    downloadSdkInSide() {
      this.downloadItem = this.productDetail.productBaseId;
      this.isUpgrading = true;
      downloadSdk({ path: this.productDetail.productBaseId })
        .then((rsp) => {
          this.productDetailVisible = false;
          this.downloadItem = "";
          this.$notify({
            type: "success",
            message: "算法已安装",
          });
          this.isUpgrading = false
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: err.data,
          });
          this.downloadItem = "";
          this.isUpgrading = false
        });
      // 开启自动刷新
      this.sdkUpgreading = true;
    },
    donwload(item, typ) {
      item.upgradeLoading = true;
      this.downloadItem = item.id;

      downloadSdk({ path: item.id })
        .then((rsp) => {
          item.upgradeLoading = false;
          //this.downloading = false;
          this.downloadItem = "";
          this.$notify({
            type: "success",
            message: typ == 1 ? "算法安装成功" : "算法升级成功"
          });
        })
        .catch((err) => {
          this.$notify({
            type: "warning",
            message: err.data,
          });
          item.upgradeLoading = false;
          //this.downloading = false;
          this.downloadItem = "";
        });
      // 开启自动刷新
      this.sdkUpgreading = true;
    },
    inputBlur(item) {
      this.$set(item, "isEdit", false);
    },
    handleTabClick() { },
    autoRefreshAppAndSdkState() {
      // 关闭后退出
      if (!this.autoRefresh) {
        return;
      }

      if (this.appUpgreading) {
        this.getAllApps();
      }

      if (this.sdkUpgreading) {
        this.getAllSdk();
      }

      let _this = this;
      setTimeout(() => {
        _this.autoRefreshAppAndSdkState();
      }, 500);
    },
  },
};
</script>
<style lang="scss">
.s-task-manage {
  width: 100% !important;
  height: 100%;
  box-sizing: border-box;
  text-align: left;
  min-width: 1106px;

  .el-tabs {
    height: calc(100% - 50px);
    // margin-top: 5px !important;
  }
  .el-tabs--border-card > .el-tabs__header {
    border: none;
  }
  .el-tabs__item.is-top {
    height: 50px;
    padding: 5px 50px !important;
    font-size: 15px;
    border: none !important;
  }
  .el-tabs__item.is-top.is-active {
    font-weight: bold;
  }
  .el-tabs__content {
    width: 100%;
    height: calc(100% - 34px);
    box-sizing: border-box;
  }
  .el-tab-pane {
    width: 100%;
    height: 100%;
  }
  .product-detail-dialog {
    .dialog-title {
      font-size: 13px;
    }
    .el-dialog {
      width: 50%;
      min-width: 920px;
      position: relative;
    }
    .el-dialog__header {
      text-align: center;
      padding: 6px;

      .el-dialog__headerbtn {
        position: absolute;
        top: 5px;

        right: 20px;
        padding: 0;
        background: transparent;
        outline: none;
        cursor: pointer;
        font-size: 20px;
      }
    }
    .el-dialog__body {
      background-color: rgba(222, 225, 230, 1);
      padding: 8px 3px;
      .button-group {
        position: absolute;
        top: 3px;

        left: 6px;
        left: 10px;
        .el-button--small {
          padding: 5px 12px;
        }
        button {
          font-size: 18px;
          line-height: 12px;
        }
      }
    }

    .dialog-content {
      .box-top {
        height: 330px;
        .top-left {
          float: left;
          width: 55%;
          background-color: rgba(253, 253, 253, 1);
          margin: 0 0.5%;
          height: 330px;
          border-radius: 2px;
          .banner {
            text-align: center;
            margin-top: 3px;
            video {
              margin: 0px auto;
              margin-top: 23px;

              width: 443px;
              height: 277px;
            }
            img {
              max-width: 90%;
              margin-top: 28px;
            }
          }
        }
        .top-right {
          float: left;
          width: 43%;
          margin: 0 0.5%;
          height: 330px;
          background-color: rgba(253, 253, 253, 1);
          position: relative;
          border-radius: 2px;
          overflow: hidden;
          .summary {
            height: 120px;
            margin: 5px 5px 0 5px;
            .icon {
              margin: 0 10px;
              margin-top: 8px;
              float: left;
              .baseImg {
                max-width: 106px;
                max-height: 106px;
              }
            }

            .right-desc {
              float: left;
              position: absolute;
              left: 140px;
              .name {
                font-size: 28px;

                margin-bottom: 5px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 250px;
              }
              .tags {
                margin-bottom: 10px;
                .el-tag {
                  margin-right: 10px;
                }
              }
            }
          }
          .jihuo-input {
            margin-left: 10px;
            margin-bottom: 10px;
            .el-input {
              float: left;
              width: 63%;
              margin-bottom: 8px;
              margin-right: 10px;
            }
            el-button {
              float: left;
            }
          }
          .product-intruduction {
            height: 200px;
            margin-top: 3px;

            .part-title {
              display: block;
              line-height: 20px;

              font-size: 16px;
              margin-left: 24px;
              border-bottom: 3px solid #3d68e1;
              width: fit-content;
              height: 26px;
              margin-bottom: 8px;
            }
            .text {
              height: 156px;
              overflow: auto;
              padding: 0 15px 0px 15px;

              .single-desc {
                margin-bottom: 10px;
                font-size: 13px;
              }
            }
          }
        }
      }
      .box-bottom {
        margin-top: 8px;

        height: 240px;
        .bot-left {
          width: 49%;
          height: 240px;
          background-color: rgba(253, 253, 253, 1);
          margin: 0 0.5%;
          border-radius: 2px;
          float: left;
          .part-title {
            display: block;
            line-height: 35px;
            font-size: 16px;
            margin-left: 24px;
            border-bottom: 3px solid #3d68e1;
            width: fit-content;
            margin-bottom: 10px;

            height: 33px;
          }
          .list-zone {
            overflow: auto;
            height: 190px;
            padding: 0 20px;
            .list-item {
              .desc {
                background-color: rgba(242, 242, 242, 1.3);
                margin: 5px 12px 0 12px;
                font-size: 12px;
                line-height: 18px;
              }
              margin-bottom: 12px;
            }
          }
        }
        .bot-right {
          height: 240px;
          float: left;
          background-color: rgba(253, 253, 253, 1);
          width: 49%;
          margin: 0 0.5%;
          border-radius: 2px;

          .part-title {
            display: block;
            line-height: 35px;
            font-size: 16px;
            margin-left: 24px;
            border-bottom: 3px solid #3d68e1;
            width: fit-content;
            margin-bottom: 5px;
            height: 33px;
          }
          .item-zone {
            overflow: auto;
            height: 225px;
            padding: 0px 12px;

            .item {
              height: 165px;
              width: 130px;
              float: left;
              border-radius: 10px;
              box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.0666666666666667);
              position: relative;

              .el-tag {
                float: right;
                margin: 8px;
              }
              .icon {
                margin: 0 auto;
                img {
                  max-width: 60px;
                  max-height: 60px;
                  position: absolute;
                  top: 20%;
                  left: 26%;
                }
                .icon-name {
                  text-align: center;
                  position: absolute;
                  top: 61%;
                  left: 12%;
                  width: 100px;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  font-size: 13px;
                }
              }
              .look-button {
                position: absolute;
                left: 30%;

                top: 76%;
              }
            }
          }
        }
      }
    }
  }
}
.flex-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-loading-mask .el-loading-spinner {
  top: 40px !important;
}
.el-loading-mask .el-loading-spinner svg {
  transform: none !important;
  top: 20px !important;
  left: 40% !important;
}
.el-loading-mask .el-loading-spinner p.el-loading-text {
  display: block !important;
  text-align: center !important;
  bottom: 10px !important;
  top: 80px !important;
  right: 0 !important;
  color: #78adf7;
}
.el-loading-mask .el-loading-spinner .path {
  stroke: #78adf7;
}
.installInfo {
  text-indent: 2em;
  font-size: 14px;
  line-height: 26px;
  p {
    text-align: center;
  }
}
.src-title {
  //color: #bfbfbf;
  color: #bbcee8;
  font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC";
  font-weight: 650;
  font-style: normal;
  height: 36px;
  font-size: 15px;
  padding-left: 25px;
}
.update-badge .el-badge__content.is-fixed {
  top: 10px;
  right: 4px;
}
.empty-tip {
  padding-left: 25px;
  color: #ccc;
}
.task-manage {
  height: 100%;
  .installModel {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .progress-bar {
      width: 70%;
      height: 17px;
      border-radius: 3px;
      background-color: rgb(227, 229, 231);
      position: absolute;
      top: 50%;
      left: 50%;
      background: url("/images/algo/green.gif");
      overflow: hidden;
      transform: translate(-50%, -50%);
      .inner-bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        transition: width 3s;
        background-color: #3d68e1;
      }
    }
  }
  .el-tab-pane {
    height: auto !important;
  }
  .el-tabs--border-card > .el-tabs__content {
    padding: 0 !important;
    overflow: auto !important;
    background-color: #fff;
  }
  .el-tabs__content {
    padding: 0 !important;
    overflow: auto !important;
  }
  //height: calc(100% - 10px);
  // .super {
  //   .right-box {
  //     width: 58% !important;
  //   }
  // }

  .super {
    width: 100%;
    height: 100%;
    .title {
      margin-bottom: 10px;
      line-height: 30px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #222222;
    }
    .left-box {
      // width: 41%;
      height: 100%;
      box-sizing: border-box;
      // float: left;
      .el-drawer__header {
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
        font-size: 16px;
        margin-bottom: 0px;
        span {
          outline: none !important;
        }
      }
      .action-bar {
        margin-bottom: 30px;
        .el-input {
          width: 100%;
        }
      }
      .task-list {
        // background: #1c364a;
        background: #fff;
        padding: 20px;
        box-sizing: border-box;

        .flex-list {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          min-height: 200px;
          .wrap-box {
            width: 11%;
          }
          .list-choose-item-left {
            width: 80%;
            height: auto;
            margin: auto;
            margin-bottom: 30px;
            max-width: 150px;
            .mask {
              width: 100%;

              .el-button + .el-button {
                margin-left: 0 !important;
              }
            }
          }
        }
      }
      .store-list,
      .app-list {
        display: flex;
        flex-wrap: wrap;
        .wrap-box {
          width: 11%;
          margin-bottom: 30px;
          .list-choose-item-left {
            width: 80%;
            height: auto;
            margin: auto;
            margin-bottom: 30px;
            max-width: 150px;
          }
          .inner {
            width: 80%;
            box-sizing: border-box;
            position: relative;
            font-size: 14px;
            padding-bottom: 10px;
            transition: all 1s;
            background: #ffffff;
            border: 1px solid #e2e2e2;
            box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
            border-radius: 4px;
            margin: auto;
            .alg-icon {
              position: relative;
              width: 80%;
              margin: auto;
              padding-top: 80%;
              svg {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
              }
            }
            .alg-name {
              height: 20px;
              text-align: center;
              line-height: 20px;
            }
            .mask {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.65);
              backdrop-filter: blur(1px) brightness(100%);
              text-align: center;
              z-index: 1;
              border-radius: 3px;
              display: none;
              svg {
                position: absolute;
                top: 49%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 33;
              }
            }
            &:hover {
              .mask {
                display: block;
              }
            }
          }
        }
      }
      .drawer-content {
        font-family: "PingFangSC-Regular";
        .el-step__title.is-process {
          border-color: #3d68e1 !important;
          color: #3d68e1 !important;
          font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif;
        }
        .el-step__head.is-process {
          border-color: #3d68e1 !important;
          color: #3d68e1 !important;
          font-family: Tahoma, Helvetica, Arial, "\5B8B\4F53", sans-serif;
        }
        .el-input {
          width: 100%;
          margin-bottom: 30px;
        }
        .current-step {
          margin: 40px 30px 30px;
        }
        .act-code {
          padding: 0 30px;
          p {
            font-size: 15px;
            margin-bottom: 16px;
          }
        }
        .desc {
          padding: 0 30px;
          margin-bottom: 30px;
          li {
            border-bottom: 1px solid #eee;
            height: 45px;
            line-height: 45px;
            font-size: 14px;
            &:last-child {
              border-bottom: none;
            }
            label {
              display: inline-block;
              width: 90px;
              padding-left: 14px;
              font-weight: bold;
            }
          }
        }
        .text-right {
          padding-right: 30px;
          text-align: right;
          .tip {
            color: #999;
            line-height: 38px;
          }
        }
      }
      .tab-content {
        padding: 20px 20px;
      }
    }
    .mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(1px) brightness(100%);
      text-align: center;
      z-index: 1;
      border-radius: 3px;
      display: none;
      .info-onmask {
        color: #fff;
      }
      .left-top {
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 12px;
        color: #90d6ff;
      }
      .mask-btn {
        width: 100%;
        display: flex;
      }
      i {
        color: #fff;
        position: relative;
        top: 40%;
        display: contents;
      }
      i:hover {
        color: rgba(255, 255, 255, 0.685);
      }
    }

    .text-css {
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .move-hear {
      margin: 10px 0 0 0;
      font-size: 5rem;
    }
    .list-choose-item {
      cursor: pointer;
      position: relative;
      font-size: 14px;
      display: inline-block;
      @media screen and(min-width: 1640px) {
        margin: 30px 20px 20px 20px;
      }
      @media screen and(min-width: 1460px) and(max-width: 1640px) {
        margin: 30px 20px 20px 10px;
      }
      @media screen and(max-width: 1460px) {
        margin: 30px 10px 20px 10px;
      }
      min-width: 126px;
      height: 120px;
      transition: all 1s;
      background: #fff;
      border: 1px solid #e2e2e2;
      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
      border-radius: 4px;
    }
    .list-choose-item:hover {
      .mask {
        display: block;
      }
    }

    .alg-shadow {
      -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
      box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
    }
    .select-color {
      margin-top: 16px;
      text-align: center;
      line-height: 28px;
      // background-color: #3498DB;
    }
    .list-choose-item-left {
      cursor: pointer;
      position: relative;
      font-size: 14px;

      transition: all 1s;
      // background: #ffffff;
      border-radius: 4px;
      p {
        display: none;
        text-align: right;
        width: 100%;
        position: absolute;
        right: 10px;
        top: 5px;
      }
      .click-download {
        position: absolute;
        left: 80%;
        top: 5%;
      }
    }
    .list-choose-item-left:hover {
      .mask {
        display: flex;
        align-items: flex-end;
        flex-wrap: wrap;
        justify-content: center;
        top: 0;

        .bot-btn {
          flex: 1;
        }
        &.flex-center {
          align-items: center;
          justify-content: center;
        }
      }
    }
    .list-choose-item-left-uninstal {
      color: gray;
      filter: grayscale(100%);
    }
    .list-complete-item.sortable-chosen {
      background: #4ab7bd;
    }
    .list-choose-item.sortable-ghost {
      background: #30b08f;
    }
    .width-new-line {
      word-wrap: break-word;
      word-break: break-all;
    }
    .dndList-list {
      max-width: 40%;
    }
    .dic-border {
      width: 98%;
      min-height: 170px;
      background: #fff;
      padding: 10px 10px 10px 20px;
    }
    .min-h {
      min-height: 130px;
    }
    .parent-div {
      border-right: 1px solid rgba(24, 28, 33, 0.5);
      max-width: 140px;
      position: relative;
    }
    .list-choose-header {
      position: relative;
      width: 74px;
      height: 74px;
      background-image: linear-gradient(-137deg, #7076f2 0%, #3d63e1 100%);
      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
      border-radius: 37px;
      margin: 10px 25px;
    }

    .task-name-div {
      font-family: PingFangSC-Medium;
      font-size: 15px;
      color: #4b68e6;
      text-align: center;
      margin-top: 6px;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .border-dash {
      height: 30px;
      width: 96%;
      margin-bottom: 10px;
      border: 1px dashed rgba(24, 28, 33, 0.5);
    }
    .i-setting {
      position: absolute;
      font-size: 28px;
      margin-top: -25px;
      margin-left: -30px;
    }
    .i-delete {
      position: absolute;
      font-size: 28px;
      margin-top: -25px;
      margin-left: -8px;
      color: red;
    }
    .i-bell {
      float: left;
      position: relative;
      left: 10px;
      top: 10px;
      font-size: 24px;
      color: red;
    }
    .task-msg {
      padding-left: 10px;
    }
    .b-top {
      width: 100%;
      padding-top: 10px;
    }
    .b-bottom {
      width: 100%;
      border-bottom: 1px solid rgba(24, 28, 33, 0.5);
    }
    .i-set-right {
      position: absolute;
      left: 80px;
      top: -11px;
      font-size: 24px;
    }
    .i-remove-right {
      position: absolute;
      right: -1px;
      top: -11px;
      font-size: 24px;
      color: red;
    }
    .alg-t {
      line-height: 31px;
      font-family: PingFangSC-Medium;
      font-size: 14px;
      color: #222222;
    }
    .alg-name {
      //margin-top: 12px;
      line-height: 20px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      letter-spacing: 0.05em;
      color: #333;
      // background-color: #ecf5ff;
      .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 100%;
      }
    }
    .unit-class {
      margin-left: 10px;
      text-align: center;
      line-height: 38px;
    }
    .el-input {
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 80%;
    }
    .list-complete-item-handle {
      height: 100%;
      //padding-bottom: 10px;
      text-align: center;
      .svg-wrap {
        //width: 80%;
        width: 100%;
        margin: auto;
        padding-top: 80%;
        padding-top: 100%;
        position: relative;
        box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
        border-radius: 25px;
        svg {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
        .baseImg {
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          max-height: 150px;
          // max-width: 106px;
          // max-height: 106px;
        }
      }
      .willUpGrade {
        .update-icon {
           position: absolute;
          top: -8px;
          right: -8px;
          z-index: 999;

        }
        .iconupdate {
          color: #01e667;
          position: absolute;
          top: 5px;
          right: 5px;
          font-weight: 550;
          font-size: 26px;
          z-index: 999;
        }
      }
      &.uninstall {
        .svg-wrap {
          filter: grayscale(100%);
        }
        .alg-name {
          color: grey;
        }
      }
    }
    .dragAreaR {
      height: 100%;
    }
    .drag-info {
      min-width: 126px;
      height: 120px;
      border: 1px dashed #3d68e1;
      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
      // box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3);
      border-radius: 4px;
      margin: 30px 10px 20px 10px;
    }
    .drag-info-text {
      letter-spacing: 3px;
      line-height: 20px;
      width: 80px;
      height: 42px;
      font-family: PingFangSC-Regular;
      font-size: 13px;
      color: #3d68e1;
      text-align: center;
    }
    .task-edit {
      font-size: 26px;
      position: relative;
      bottom: -6px;
    }
    .el-button--cancle {
      background: #eaeaea;
      border-radius: 2px;
      border-color: #eaeaea;
      font-family: PingFangSC-Medium;
      font-size: 13px;
      color: #222222;
      margin-right: 12px;
    }
    .click-changeImg {
      cursor: pointer;
      display: none;
      background: rgba(0, 0, 0, 0.35);
      width: 74px;
      line-height: 20px;
      color: rgb(255, 255, 255);
      font-size: 14px;
      opacity: 1;
      border-radius: 6px;
    }

    .task-name-google {
      position: relative;
      top: 30px;
      width: 126px;
      height: 120px;
      border: 1px solid #fff;
      background: #fff;
      border-radius: 4px;
      cursor: pointer;
      .set-task {
        display: none;
        cursor: pointer;
      }

      .el-switch__core {
        width: 27px !important;
        height: 14px;
      }
      .el-switch__core:after {
        width: 10px;
        height: 10px;
      }
      .el-switch.is-checked .el-switch__core::after {
        left: 100%;
        margin-left: -11px;
      }
    }
    .task-name-google:hover {
      .mask {
        display: block;
      }
    }
  }
}
.active-Dial {
  .el-dialog {
    min-width: 400px;
  }

  .dialog-active {
    .desc {
      padding: 0 30px;
      margin-bottom: 30px;
      li {
        border-bottom: 1px solid #eee;
        height: 45px;
        line-height: 45px;
        font-size: 14px;
        &:last-child {
          border-bottom: none;
        }
        label {
          display: inline-block;
          width: 90px;
          padding-left: 14px;
          font-weight: bold;
        }
      }
    }
    .text-right {
      padding-right: 30px;
      text-align: right;
      .tip {
        color: #999;
        line-height: 38px;
      }
    }
  }
}
</style>


 src/pages/ai/index/api.ts

New file
@@ -0,0 +1,161 @@
import request from '@/scripts/httpRequest'
import qs from "qs";

// 查询所有算法
export const findAllSdk = (query: any) => {
  return request({
    url: "/data/api-v/sdk/findAllSdk",
    method: "get",
    params: query
  });
};

// 查找所有任务，包含任务信息和对应的算法信息
export const findAll = (query: any) => {
  return request({
    url: "/data/api-v/task/findAll",
    method: "get",
    params: query
  });
};

// 给任务添加算法
export const addTaskSdk = (query: any) => {
  return request({
    url: "/data/api-v/task/addTaskSdk",
    method: "post",
    data: query
  })
}

// 给任务删除算法
export const delTaskSdk = (query: any) => {
  return request({
    url: "/data/api-v/task/delTaskSdk",
    method: 'get',
    params: query
  })
}

// 删除任务
export const deleteTask = (query: any) => {
  return request({
    url: '/data/api-v/task/delete',
    method: 'get',
    params: query
  })
}

// 更新任务状态
export const updateTaskStatus = (query: any) => {
  return request({
    url: '/data/api-v/task/updateTaskStatus',
    method: 'post',
    data: query
  })
}

// 更新任务名称
export const updateTaskName = (query: any) => {
  return request({
    url: '/data/api-v/task/updateTaskName',
    method: 'post',
    data: qs.stringify(query)
  })
}

// 获取算法参数
export const getSdkArgs = (query: any) => {
  return request({
    url: '/data/api-v/sdkArg/getSdkArgs',
    method: 'get',
    params: query
  })
}

// 算法参数保存
export const saveTaskSdkRule = (query: any) => {
  return request({
    url: '/data/api-v/task/saveTaskSdkRule',
    method: 'post',
    data: query
  })
}

// 添加任务
export const addTask = (query: any) => {
  return request({
    url: '/data/api-v/task/addTask',
    method: 'post',
    data: query
  })
}

// 查询算法规则
export const getRulesByTaskSdk = (query: any) => {
  return request({
    url: '/data/api-v/task/getRulesByTaskSdk',
    method: 'get',
    params: query
  })
}

// 恢复默认
export const deleteTaskSdkRule = (query: any) => {
  return request({
    url: '/data/api-v/task/deleteTaskSdkRule',
    method: 'post',
    data: qs.stringify(query)
  })
}

// 根据类型查找字典
export const findByType = (query: any) => {
  return request({
    url: '/data/api-v/dictionary/findByType',
    method: "get",
    params: query
  })
}

// 查询检索标签
export const getTagList = (query: any) => {
  return request({
    url: '/data/api-v/es/tagList',
    method: 'post',
    data: query
  })
}
//安装算法
export const downloadSdk = (query: any) => {
  return request({
    url: '/data/api-v/sdk/sdkDownload',
    method: 'get',
    params: query
  })
}
//上传完成获取安装信息
export const getInstallInfo = (data: any) => {
  return request({
    url: '/data/api-v/sdk/showInstallInfo',
    method: 'post',
    params: data
  })
}
//安装已上传的算法接口
export const installSdk = (file: any) => {
  return request({
    url: '/data/api-v/sdk/install',
    method: 'post',
    params: file
  })
}

//卸载已安装算法
export const removeSdk = (sdk: any) => {
  return request({
    url: '/data/api-v/sdk/unInstall',
    method: 'post',
    data: sdk
  })
}

 src/pages/ai/index/main.ts

New file
@@ -0,0 +1,12 @@
import Vue from 'vue';
import App from './App.vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/element-variables.scss";
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

 src/pages/ai/index/mixins.ts