web/apsDashboard-1.git

			@@ -7,793 +7,390 @@
			<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="left-box" v-if="!inDetail">
			<div class="nav-box">
			<div class="nav-box-menu">
			<div
			class="width-new-line task-list"
			v-show="activeName === 'myAlgorithm'"
			v-for="(name, index) in menuArr"
			:key="index"
			class="menu-item"
			:class="activeName == name ? 'menu-item-actiove' : ''"
			@click="pickMenu(name)"
			>
			<p class="src-title">算法软件</p>
			<div class="flex-list">
			<!-- <div class="wrap-box" v-for="item in ungradeList" :key="'upgrade'+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>
			<div class="mask">
			<div class="info-onmask">
			<div>当前版本:{{item.version}}</div>
			<div>最新版本:{{item.remoteVersion}}</div>
			</div>
			<div class="mask-btn">
			<el-button
			type="warning"
			class="bot-btn"
			size="small"
			@click="donwload(item)"
			>升级</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>{{ item.sdk_name }}</span>
			</div>
			</div>
			</div>
			</div>
			</div>-->
			<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>
			<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)"
			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>
			<!-- </draggable> -->
			<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">
			<el-button
			type="primary"
			class="bot-btn"
			@click="donwload(item)"
			>安装</el-button
			>
			</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>
			<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')"
			v-if="!item.isDefault"
			>
			查看详情
			</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
			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">
			<el-button
			size="small"
			type="primary"
			class="bot-btn"
			@click="downloadApp(item)"
			>安装</el-button
			>
			</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>
			{{ name }}
			<sup v-if="index == 3 && updateNum != 0">{{ updateNum }}</sup>
			</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">
			<p class="src-title">算法软件</p>
			<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
			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"
			@click="actSdkOrApp(item, 'app')"
			>
			<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,'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-drawer
			title="下载"
			:visible.sync="actDrawerShow"
			:direction="direction"
			</div>
			<div class="nav-box-search">
			<span class="icon iconfont all-scene"></span>
			<el-input
			placeholder="搜索"
			v-model="inputText"
			@change="searchAll"
			class="input-with-select"
			>
			<div class="drawer-content">
			<div class="current-step">
			<el-steps
			align-center
			:active="actStep"
			finish-status="success"
			>
			<el-step title="添加激活码"></el-step>
			<el-step title="激活成功"></el-step>
			</el-steps>
			</div>

			<div v-if="actStep == 0">
			<div class="act-code">
			<p>使用激活码将新的算法添加到您的账户</p>
			<el-input
			v-model="activeCode"
			placeholder="00000-00000-00000-00000-00000"
			@blur="getCodeDetail"
			></el-input>
			</div>
			<div class="text-right">
			<el-button type="primary" @click="actived"
			>激活</el-button
			>
			</div>
			</div>
			<div v-else-if="actStep == 1">
			<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>
			<!-- <li>
			<label>设备ID:</label>
			<span>3342-235f-ret55-fdsg</span>
			</li>-->
			</ul>
			<div class="text-right">
			<el-button type="primary" @click="checkMyAlgorith"
			>确定</el-button
			>
			<p class="tip">提示：请在“我的算法”中查看并安装算法</p>
			</div>
			</div>
			</div>
			</el-drawer>
			</el-tab-pane>
			<el-tab-pane name="update">
			<span slot="label">
			<el-badge class="update-badge" :value="updateNum"
			>更新</el-badge
			<i class="el-icon-search" slot="prepend"></i>
			<el-select
			v-model="select"
			slot="append"
			placeholder="选择场景"
			:popper-append-to-body="false"
			>
			</span>
			<div class="task-list">
			<div class="flex-title">
			<p class="src-title">算法软件</p>
			<el-option label="铁路场景" value="1">
			<span class="icon iconfont"></span>
			<span>铁路场景</span>
			</el-option>
			<el-option label="安全场景" value="2">
			<span class="icon iconfont"></span>
			<span>安全场景</span>
			</el-option>
			<el-option label="通用场景" value="3">
			<span class="icon iconfont"></span>
			<span>通用场景</span>
			</el-option>
			<el-option label="校园园区" value="4">
			<span class="icon iconfont"></span>
			<span>校园园区</span>
			</el-option>
			</el-select>
			</el-input>
			</div>

			<div class="bg-img-wrap">
			<img src="/images/appCenter/Group-112.png" alt="" />
			</div>
			</div>
			<div class="quick-path" v-if="showQuickPath">
			<div class="left-items">
			<div
			class="quick-item"
			v-for="(item, index) in recomandUpdateList"
			:key="index"
			@click="checkDetail(item, 'inactive', item.sdk_name)"
			>
			<div class="icon-img">
			<span class="icon iconfont" v-if="item.isUpgrade"
			></span
			>
			<img
			v-if="item.iconBlob"
			:src="
			item.iconBlob.indexOf(',') > 0
			? item.iconBlob
			: `data:image/png;base64,${item.iconBlob}`
			"
			alt
			/>
			<img v-else :src="item.icon" alt />
			</div>
			<div class="desc">
			<el-tooltip
			:content="item.sdk_name \|\| item.name"
			effect="light"
			>
			<div class="desc-1">{{ item.sdk_name \|\| item.name }}</div>
			</el-tooltip>
			<div class="desc-2">版本 {{ item.version }}</div>
			</div>
			<div class="right-icon">
			<el-tooltip effect="dark" content="下载" placement="bottom">
			<span class="icon iconfont"></span>
			</el-tooltip>
			</div>
			</div>
			</div>

			<!-- <div class="down-all-btn">
			<el-button plain size="small" @click="batchUpdate('both')" round
			>全部更新</el-button
			>
			</div> -->
			</div>

			<div class="main-content">
			<!-- <div class="main-title">应用中心</div> -->
			<div class="tab-btns" v-if="activeName != '离线升级/安装'">
			<div class="group-left">
			<div
			class="tab"
			@click="pickTab('sdk')"
			:class="activeTab == 'sdk' ? 'tab-active' : ''"
			>
			算法软件
			</div>
			<div
			class="tab"
			@click="pickTab('app')"
			:class="activeTab == 'app' ? 'tab-active' : ''"
			>
			应用软件
			</div>
			</div>

			<div
			class="batch-update"
			v-if="activeName == '更新' && tempList.length"
			>
			<el-button
			size="small"
			type="primary"
			round
			@click="batchUpdate"
			>全部更新</el-button
			>
			</div>
			</div>
			<div
			class="front-page-items"
			v-if="activeName != '离线升级/安装'"
			>
			<div
			class="front-page-item"
			v-for="(item, index) in tempList"
			:key="index"
			@click="checkDetail(item, null, item.sdk_name)"
			:class="{
			disabled: activeName == '应用中心' && !item.canUpOrIns,
			}"
			>
			<div class="icon-img">
			<span class="icon iconfont" v-if="item.isUpgrade"
			></span
			>
			<img
			v-if="item.iconBlob"
			:src="
			item.iconBlob.indexOf(',') > 0
			? item.iconBlob
			: `data:image/png;base64,${item.iconBlob}`
			"
			alt
			/>
			<img v-else :src="item.icon" alt />
			</div>
			<div class="desc">
			<el-tooltip
			:content="item.sdk_name \|\| item.name"
			effect="light"
			>
			<div class="desc-1">{{ item.sdk_name \|\| item.name }}</div>
			</el-tooltip>
			<div class="desc-2">版本 {{ item.version }}</div>
			</div>
			<div class="right-btn">
			<el-button
			@click="batchUpdate('sdk')"
			size="mini"
			size="small"
			type="primary"
			>更新全部</el-button
			class="other-btn"
			round
			@click="checkDetail(item, null, item.sdk_name)"
			v-if="activeName == '应用中心' && item.price > 0"
			>激活</el-button
			>
			</div>
			<div class="flex-list">
			<div v-if="!hasNewVersionSdk.length" class="empty-tip">
			暂无数据，请稍后重试...
			</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>
			<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)"
			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')"
			size="small"
			type="primary"
			size="mini"
			>更新全部</el-button
			class="update-btn"
			round
			@click.stop="actived(item)"
			v-if="activeName == '应用中心' && item.price == 0"
			>安装</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"
			<el-button
			size="small"
			type="primary"
			class="check-btn"
			round
			v-if="
			activeName == '已激活' &&
			((activeTab == 'sdk' && !item.isUpgrade) \|\|
			(activeTab == 'app' &&
			!item.isUpgrade &&
			!item.isDefault))
			"
			>查看</el-button
			>
			<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>
			<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>
			<el-button
			size="small"
			type="primary"
			class="check-btn"
			round
			v-if="
			activeName == '已激活' &&
			activeTab == 'app' &&
			item.isDefault &&
			!item.isUpgrade
			"
			>查看</el-button
			>
			<el-button
			size="small"
			type="primary"
			class="other-btn"
			round
			v-if="
			activeName == '已激活' &&
			activeTab == 'app' &&
			item.isDefault &&
			item.isUpgrade
			"
			>升级</el-button
			>
			<el-button
			size="small"
			type="primary"
			class="update-btn"
			round
			@click.stop="donwloadSDK(item)"
			v-if="
			(activeName == '更新' \|\| activeName == '已激活') &&
			activeTab == 'sdk' &&
			item.isUpgrade &&
			!item.upgradeLoading
			"
			>更新</el-button
			>
			<span
			class="icon iconfont rocket-icon"
			v-if="
			activeName == '更新' &&
			item.isUpgrade &&
			item.upgradeLoading &&
			rocketIf
			"
			></span
			>
			<span
			class="icon iconfont rocket-icon"
			v-if="
			activeName == '更新' &&
			item.isUpgrade &&
			item.upgradeLoading &&
			!rocketIf
			"
			></span
			>
			<el-button
			size="small"
			type="primary"
			class="update-btn"
			round
			@click.stop="downloadApp(item, 'upgrade')"
			v-if="
			(activeName == '更新' \|\| activeName == '已激活') &&
			activeTab == 'app' &&
			item.isUpgrade &&
			!item.upgradeLoading
			"
			>更新</el-button
			>

			<div class="status">
			{{ item.progressMsg }}
			</div>
			</div>
			</div>
			</el-tab-pane>
			</el-tabs>

			<div
			class="front-page-item item-dimmed"
			v-for="(item, index) in tempDarkList"
			:key="index"
			@click="checkDetail(item, 'activeNotInstall', item.sdk_name)"
			>
			<div class="icon-img">
			<img
			v-if="item.iconBlob"
			:src="
			item.iconBlob.indexOf(',') > 0
			? item.iconBlob
			: `data:image/png;base64,${item.iconBlob}`
			"
			alt
			/>
			<img v-else :src="item.icon" alt />
			</div>
			<div class="desc">
			<el-tooltip
			:content="item.sdk_name \|\| item.name"
			effect="light"
			>
			<div class="desc-1">{{ item.sdk_name \|\| item.name }}</div>
			</el-tooltip>
			<div class="desc-2">版本 {{ item.version }}</div>
			</div>
			<div class="right-btn">
			<el-button
			size="small"
			type="primary"
			class="other-btn"
			round
			v-if="activeTab == 'sdk' && !item.upgradeLoading"
			@click.stop="donwloadSDK(item)"
			>安装</el-button
			>
			<el-button
			size="small"
			type="primary"
			class="other-btn"
			round
			v-if="activeTab == 'app' && !item.upgradeLoading"
			@click.stop="downloadApp(item)"
			>安装</el-button
			>
			<div class="spin-icon">
			<span
			class="icon iconfont anz-font"
			v-if="item.upgradeLoading"
			></span
			>
			</div>
			<div class="status">
			{{ item.progressMsg }}
			</div>
			</div>
			</div>
			</div>

			<div class="upload-pkg" v-if="activeName == '离线升级/安装'">
			<div class="upload-head">
			<div class="left">
			<span class="icon iconfont"></span>
			<span class="txt">上传安装软件</span>
			</div>
			</div>

			<FileUploader
			class="upload-demo"
			single
			tip
			:sourceType="3"
			:isDrag="true"
			:attrs="{ accept: '.zip,.tar,.gz,.tar.gz' }"
			tipWords="点击上传"
			uploadPlaceholder="算法软件"
			url="/data/api-v/sdk/upload"
			@complete="onFileUpload"
			@file-added="onFileAdded"
			/>
			</div>
			</div>
			</div>

			<detailPage
			:detailProductID="detailProductID"
			:detailType="detailType"
			:detailPrice="detailPrice"
			:isSdk="isSdk"
			v-if="inDetail"
			@flushSdk="getAllSdk"
			@flushApp="getAllApps"
			@goback="goback"
			></detailPage>
			</div>
			</div>
			</div>

			<el-dialog
			title="安装包信息"
			:visible.sync="installDialogVisible"
			@@ -840,245 +437,6 @@
			<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><</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="'/httpImage/' + item.url"
			class="cursor-pointer"
			preview
			/>
			<video
			v-if="item.type == 'video'"
			:src="'/httpImage/' + 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="curCheckTarget.iconBlob"
			class="baseImg"
			:src="
			curCheckTarget.iconBlob.indexOf(',') > 0
			? curCheckTarget.iconBlob
			: `data:image/png;base64,${curCheckTarget.iconBlob}`
			"
			alt
			/>
			</div>
			<div class="right-desc">
			<div class="name">{{ productDetail.productName }}</div>
			<div class="tags">
			<!-- <span
			class="tag"
			v-for="(id, index) in curCheckTarget.productLabelId"
			:key="index+'i'"
			>{{showNameById(id)}}</span> -->
			<el-tag type="info" color="#fff" v-if="!isSDKDialog">应用</el-tag>
			<el-tag type="info" color="#fff" v-if="isSDKDialog">算法</el-tag>
			<el-tag type="info" color="#fff" >软件</el-tag>
			</div>
			<div class="btns">
			<el-button size="medium" type="warning" v-if="needToUpgradeInWin" @click="upgradeSDKinWin" >{{
			isUpgrading ? "升级中.." : "升级"
			}}</el-button>
			<el-button size="medium" type="primary" v-if="isActive" @click="unloadSDKinWin">卸载</el-button>
			<el-button size="medium" type="primary" v-if="!isActive" @click="showInputCode=!showInputCode">下载激活</el-button>
			<el-button size="medium" type="success" v-if="!isSDKDialog">打开</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">功能特点</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 === ""
			? "该检索采用大数据架构，分布式数据处理，可支持海量数据复杂检索毫秒级返回，设计有智能检索框，搜索内容将根据TF/IDF算法计算所得得分，该算法通过此内容匹配程度，词频数，词长占比等，计算出同所搜内容的符合度，返回符合度最高的数据，若符合度一致，将返回据今最近的数据"
			: 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">
			{{ item.name === "" ? "暂无数据" : item.name }}
			</div>
			</div>
			<div class="look-button">
			<el-button type="primary" size="small" @click="checkInWindow(item)">查看</el-button>
			</div>
			</div>
			</div>
			</div>
			</div>
			</div>
			</el-dialog>
			<el-dialog
			title="激活成功！"
			:visible.sync="showActivateSuccess"
			width="30%"
			: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>
			@@ -1088,6 +446,7 @@
			installSdk,
			getInstallInfo,
			removeSdk,
			uploadSDK,
			} from "./api";
			import {
			getApps,
			@@ -1099,38 +458,19 @@
			getUnActivedApp,
			actApp,
			} from "@/api/app";

			import FileUploader from "@/components/subComponents/FileUpload/index";
			import { getUrlKey } from "@/api/utils";
			import FileUploader from "../FileUpload/index";
			import detailPage from "./detail";
			export default {
			name: "algorithmManage",
			props: {},
			components: {
			FileUploader,
			detailPage,
			},
			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") &&
			@@ -1139,41 +479,46 @@
			let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
			return loginName === "superadmin" \|\| loginName === "basic";
			}

			return false;
			},
			},
			data() {
			return {
			sdkList: [],
			installedList: [],
			recomandUpdateList: [],
			hasNewVersionSdk: [],
			activeTab: "sdk",
			hasNewVersionApp: [],
			tempDarkList: [],
			notInstalledList: [],
			showUpload: false,
			detailType: "",
			detailProductID: "",
			detailPrice: "",
			buttonAuthority: sessionStorage.getItem("buttonAuthoritys") \|\| [],
			activeName: "myAlgorithm",
			activeName: "应用中心",
			patchUpdateStatus: "",
			downloadItem: "",
			downloading: false,
			direction: "rtl",
			actDrawerShow: false,
			actStep: 0,
			showActivateSuccess:false,
			showQuickPath: true,
			showActivateSuccess: false,
			activeCode: "",
			isInstall: false,
			installDialogVisible: false,
			installPackage: {},
			installAppPackage: null,
			installSdkPackage: null,
			isActive:true,
			installPercentage: 0,
			isActive: true,
			isDefaultApp: false,
			unActivedSDKList: [],
			unActivedAppList: [],
			// dialogTitle: "",
			isSDKDialog:true,
			//actSdkId: '',
			inDetail: false,
			isSDKDialog: true,
			actType: "",
			actId: "",
			inputText: "",
			tempList: [],
			select: "",
			activedSdkOrApp: {
			activateCode: "",
			productName: "",
			@@ -1182,26 +527,26 @@
			licence: "",
			devIds: "",
			},
			// unloadLoading: false,
			// installLoading: false,
			installedApps: [],
			storeApps: [],
			installFile: {},
			freshTimer: null,
			appUpgreading: true,
			sdkUpgreading: true,
			appUpgreading: false,
			sdkUpgreading: false,
			autoRefresh: true,
			curCheckTarget: {},
			productDetailVisible: false,
			isUpgrading: false,
			productDetail: {},
			otherProducts: [],
			backStack: [],
			toUpdateArr1: [],
			forwardStack: [],
			backDisable:true,
			forwardDisable:true,
			showInputCode:false,
			needToUpgradeInWin:false,
			rocketIf: false,
			backDisable: true,
			forwardDisable: true,
			showInputCode: false,
			needToUpgradeInWin: false,
			showInstallNotActive: false,
			menuArr: ["应用中心", "已激活", "离线升级/安装", "更新"],
			};
			},
			directives: {
			@@ -1212,203 +557,173 @@
			},
			},
			mounted() {
			// 获取所有应用
			var name = getUrlKey("activeName");
			if (name) {
			this.pickMenu(name);
			}
			this.autoRefreshAppAndSdkState();

			this.getUnActivedList();
			this.getUnActivedList(1);
			this.getUnActivedAppList();
			},
			beforeDestroy() {
			this.autoRefresh = false;
			},
			methods: {
			isShow(authority) {
			return (
			this.isAdmin \|\| this.buttonAuthority.indexOf("," + authority + ",") > -1
			);
			searchAll() {
			this.getAllApps();
			this.getAllSdk();
			this.getUnActivedList(1);
			this.getUnActivedAppList();
			},
			batchUpdate(type) {
			if (type == "sdk") {
			this.hasNewVersionSdk.forEach((sdk) => {
			this.donwload(sdk);
			});
			goback() {
			this.inDetail = false;
			},
			batchUpdate(s) {
			if (s == "both") {
			this.batchUpdateSDK();
			this.batchUpdateApp();
			} else if (this.activeTab == "sdk") {
			this.batchUpdateSDK();
			} else {
			this.hasNewVersionApp.forEach((app) => {
			this.downloadApp(app, "upgrade");
			});
			this.batchUpdateApp();
			}
			},
			closeDial(){
			this.productDetailVisible = false
			this.productDetail = {}
			this.otherProducts = []
			},
			checkDetail(item,type) {
			if (type =='inactive') {
			this.isActive =false
			this.showInputCode = false
			}else{
			this.showInputCode = false
			this.isActive =true
			}
			this.needToUpgradeInWin = item.isUpgrade?true:false
			this.resetStack()
			this.curCheckTarget = item;
			if (item.sdk_type===undefined) {
			this.isSDKDialog=false
			}else{
			this.isSDKDialog=true
			}
			// debugger
			this.productDetailVisible = true;
			let _this = this;
			getAppDetail({ id: item.id }).then((res) => {
			_this.productDetail = res.data.detail;
			_this.otherProducts = res.data.randoms;

			batchUpdateSDK() {
			this.hasNewVersionSdk.forEach((sdk) => {
			this.donwloadSDK(sdk);
			});
			},
			resetStack(){
			this.forwardStack = []
			this.backStack = []
			this.backDisable = true
			this.forwardDisable = true

			},
			checkInWindow(item){
			this.backStack.push(this.productDetail)
			// debugger
			this.backDisable = false
			this.curCheckTarget = item;
			// this.productDetailVisible = true;
			let _this = this;
			getAppDetail({ id: item.id }).then((res) => {
			_this.productDetail = res.data.detail;
			// debugger
			this.actId = _this.productDetail.productBaseId
			let flag=false
			const allNeedToNew = [...this.hasNewVersionSdk,...hasNewVersionApp]
			for (let i = 0; i < allNeedToNew.length; i++) {
			const item = allNeedToNew[i];
			if (item.id == _this.productDetail.productBaseId) {
			flag=true
			}
			}
			this.needToUpgradeInWin = true
			_this.otherProducts = res.data.randoms;
			batchUpdateApp() {
			this.hasNewVersionApp.forEach((app) => {
			this.downloadApp(app, "upgrade");
			});
			},

			backwards(){
			if (this.backStack.length ==0) {
			this.backDisable = true
			// forwardDisable:false,
			return
			}
			console.log(this.backStack);

			this.forwardStack.push(this.productDetail)
			this.productDetail = this.backStack.pop()
			this.forwardDisable=false
			if (this.backStack.length ==0) {
			this.backDisable = true

			pickMenu(name) {
			this.activeName = name;
			this.activeTab = "sdk";
			this.showQuickPath = true;
			switch (name) {
			case "应用中心":
			this.tempList = this.unActivedSDKList;
			this.tempDarkList = [];
			break;
			case "已激活":
			this.tempList = this.installedList;
			this.tempDarkList = this.notInstalledList;
			break;
			case "更新":
			this.showQuickPath = false;
			this.tempList = this.hasNewVersionSdk;
			this.tempDarkList = [];
			break;
			default:
			this.tempList = [];
			this.tempDarkList = [];
			break;
			}
			},
			forwards(){
			if(this.forwardStack.length==0){
			this.forwardDisable=true
			return
			pickTab(val) {
			if (val) {
			this.activeTab = val;
			}
			console.log(this.backStack);
			if (this.activeName == "应用中心") {
			this.tempList =
			this.activeTab == "sdk"
			? this.unActivedSDKList
			: this.unActivedAppList;
			this.tempDarkList = [];
			} else if (this.activeName == "已激活") {
			this.tempList =
			this.activeTab == "sdk" ? this.installedList : this.installedApps;
			this.tempDarkList =
			this.activeTab == "sdk" ? this.notInstalledList : this.storeApps;
			} else if (this.activeName == "更新") {
			this.tempList =
			this.activeTab == "sdk"
			? this.hasNewVersionSdk
			: this.hasNewVersionApp;

			this.backStack.push(this.productDetail)
			this.backDisable=false
			this.productDetail=this.forwardStack.pop()
			if (this.forwardStack.length==0) {
			this.forwardDisable=true
			this.tempDarkList = [];
			}

			},
			//离线安装
			checkDetail(item, typ, sdkName) {
			/* if (!item.canUpOrIns && typ == "Appcenter") {
			return false;
			} */
			this.isSdk = Boolean(sdkName);
			this.inDetail = true;
			this.detailProductID = item.id;
			this.detailPrice = item.price;
			if (typ) {
			this.detailType = typ;
			} else {
			this.detailType = this.activeName == "应用中心" ? "inactive" : "active";
			}
			},
			checkIsDefOrNot(id) {
			this.isDefaultApp = id.length <= 10;
			},
			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: '安装成功,将跳转至"已激活"中查看',
			});
			this.$message.success('安装成功,将跳转至"已激活"中查看');
			setTimeout(() => {
			this.getAllSdk();
			window.parent.postMessage(
			{
			msg: "AppUpdate",
			},
			"*"
			);
			this.activeName = "myAlgorithm";
			window.parent.postMessage({ msg: "AppUpdate" }, "*");
			this.activeName = "已激活";
			}, 3000);
			}
			})
			.catch((e) => {
			console.log(e);
			this.isInstall = false;
			this.$message({
			type: "error",
			message: e.data,
			});
			this.$message.error(e.msg);
			});
			},

			downloadApp(app, action) {
			if (action == "upgrade") {
			app.upgradeLoading = true;
			} else {
			app.installLoading = true;
			}
			let _this = this;
			let timer = null;
			app.upgradeLoading = true;
			timer = setInterval(() => {
			this.rocketIf = !this.rocketIf;
			}, 350);

			let _this = this;
			installApp({ path: app.id })
			.then((res) => {
			if (res && res.success) {
			_this.$notify.success("安装应用成功");
			clearInterval(timer);
			app.upgradeLoading = false;
			setTimeout(() => {
			if (action == "upgrade") {
			app.upgradeLoading = false;
			// _this.$notify({
			// type: 'success',
			// message: '升级成功'
			// });
			} else {
			app.installLoading = false;
			// _this.$notify({
			// type: 'success',
			// message: '安装成功'
			// });
			}
			// _this.getAllApps();
			window.parent.postMessage(
			{
			msg: "AppUpdate",
			},
			"*"
			);
			window.parent.postMessage({ msg: "AppUpdate" }, "*");
			}, 3000);
			} else {
			}
			})
			.catch((e) => {
			console.log(e);
			if (action == "upgrade") {
			app.upgradeLoading = false;
			} else {
			app.installLoading = false;
			}
			_this.$notify.warning(e.msg);
			clearInterval(timer);
			app.upgradeLoading = false;
			});

			// 开启自动刷新
			this.appUpgreading = true;
			},
			@@ -1416,7 +731,7 @@
			let iArry = [];
			let sArry = [];
			let nArry = [];
			let rsp = await getApps();
			let rsp = await getApps({ appName: this.inputText });
			if (rsp && rsp.success) {
			// 遍历app的过程重置
			this.appUpgreading = false;
			@@ -1426,11 +741,19 @@
			{ unloadLoading: false, upgradeLoading: false },
			item
			);
			if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
			if (
			obj.progressMsg !== "" &&
			obj.progressMsg !== "已安装" &&
			obj.progressMsg != "100%"
			) {
			obj.upgradeLoading = true;

			this.appUpgreading = true;
			}

			if (obj.upgradeDone) {
			this.$notify.success(1 ? "算法安装成功" : "算法升级成功");
			}

			item.installed ? iArry.push(obj) : sArry.push(obj);
			item.isUpgrade && nArry.push(obj);
			});
			@@ -1439,55 +762,27 @@
			this.storeApps = sArry;
			this.hasNewVersionApp = nArry;
			},

			//卸载应用
			unLoad(app) {
			unloadApp(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",
			},
			"*"
			);
			window.parent.postMessage({ msg: "AppUpdate" }, "*");
			_this.$notify.success("卸载应用成功");
			}
			})
			.catch((e) => {
			console.log(e);
			app.unloadLoading = false;
			});
			})
			.catch((e) => {
			console.log(e);
			});
			},
			// actSdk (id) {
			// this.actSdkId = id;
			// this.actDrawerShow = true;
			// this.actStep = 0;
			// this.activeCode = '';
			// this.activedSdkOrApp = this.newActInfo()
			// },
			actSdkOrApp(item, type = "sdk") {
			this.checkDetail(item, 'inactive')
			this.actType = type;
			// debugger
			this.actId = item.id;
			// this.actDrawerShow = true;
			this.actStep = 0;
			this.activeCode = "";
			this.activedSdkOrApp = this.newActInfo();
			},

			cancelActivate(){
			this.showInputCode= false
			.catch((e) => {});
			},
			newActInfo() {
			return {
			@@ -1499,73 +794,77 @@
			devIds: "",
			};
			},
			getUnActivedList() {
			getUnActivedSdk().then((res) => {
			getUnActivedList(v) {
			getUnActivedSdk({ sdkName: this.inputText }).then((res) => {
			if (res.code == 200) {
			this.unActivedSDKList = res.data;
			const len = this.unActivedSDKList.length;
			const set = new Set();
			if (len <= 3) {
			this.recomandUpdateList = [...this.unActivedSDKList];
			} else {
			for (let i = 0; i < 3; i++) {
			const pickI = Math.floor(Math.random() * len);
			if (set.has(pickI)) {
			i--;
			continue;
			}
			set.add(pickI);
			this.recomandUpdateList.push(this.unActivedSDKList[pickI]);
			}
			}
			v == 1 ? (this.tempList = res.data) : null;
			}
			});
			},
			getUnActivedAppList() {
			getUnActivedApp().then((res) => {
			getUnActivedApp({ appName: this.inputText }).then((res) => {
			if (res.code == 200) {
			this.unActivedAppList = res.data;
			this.pickTab();
			}
			});
			},
			actived() {
			actived(item) {
			if (!item.canUpOrIns) {
			return false;
			}

			let _this = this;
			if (this.actType == "sdk") {
			//激活算法
			actPageAlg(this.actId, this.activeCode)
			if (this.activeTab == "sdk") {
			actPageAlg(item.id, "")
			.then((res) => {
			if (res.data.isSuccess) {
			this.productDetailVisible = false
			this.productDetailVisible = false;
			_this.activedSdkOrApp = res.data.successMsg;
			this.showActivateSuccess=true
			this.showActivateSuccess = true;
			_this.actStep++;
			_this.getUnActivedList();
			_this.getUnActivedList(1);
			_this.getAllSdk();
			} else {
			_this.$notify({
			type: "error",
			message: res.data.failMsg.failMsg,
			});
			_this.$notify.error(res.data.failMsg.failMsg);
			}
			})
			.catch((e) => {
			console.log(e);
			});
			} else if (this.actType == "app") {
			.catch((e) => {});
			} else if (this.activeTab == "app") {
			//激活应用
			actApp(this.actId, this.activeCode)
			actApp(item.id, "")
			.then((res) => {
			if (res.data.isSuccess) {
			this.productDetailVisible = false
			this.productDetailVisible = false;
			_this.activedSdkOrApp = res.data.successMsg;
			this.showActivateSuccess=true
			this.showActivateSuccess = true;
			_this.actStep++;
			_this.getUnActivedAppList();
			_this.getAllApps();
			} else {
			_this.$notify({
			type: "error",
			message: res.data.failMsg.failMsg,
			});
			_this.$notify.error(res.data.failMsg.failMsg);
			}
			})
			.catch((e) => {
			console.log(e);
			});
			.catch((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;
			@@ -1592,26 +891,22 @@
			installContent: res.data.sdks[0].installContent,
			};
			}
			} else {
			this.$message.error(res.msg);
			}
			})
			.catch((e) => {
			this.$message({
			type: "error",
			message: e.data,
			});
			this.$message.error(e.msg);
			});
			},


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

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

			@@ -1620,140 +915,84 @@
			{ unloadLoading: false, upgradeLoading: false },
			item
			);
			if (obj.progressMsg !== "" && obj.progressMsg !== "已安装") {
			if (
			obj.progressMsg !== "" &&
			obj.progressMsg !== "已安装" &&
			obj.progressMsg !== "100%"
			) {
			obj.upgradeLoading = true;

			this.sdkUpgreading = true;
			}

			//算法软件已安装其中包含待升级未安装
			item.installed ? installedList.push(obj) : unInstalledList.push(obj);
			item.isUpgrade ? hasNewVersionList.push(obj): null
			item.isUpgrade ? hasNewVersionList.push(obj) : null;
			});
			}
			this.installedList = installedList;
			this.notInstalledList = unInstalledList;
			this.toUpdateArr1 = this.installedList.slice(0, 10);
			this.hasNewVersionSdk = hasNewVersionList;
			this.pickTab();
			},
			unloadSDKinWin(){
			let _this = this;
			this.$confirm("确定要卸载该算法么？", "提示").then(()=>{
			_this.productDetailVisible = false
			removeSdk({sdkId:this.productDetail.productBaseId}).then((res)=>{
			_this.getAllSdk();
			window.parent.postMessage(
			{
			msg: "AppUpdate",
			},
			"*"
			);
			}).catch((err)=>{
			console.log(err);
			})
			}).catch(()=>{

			})
			},
			//卸载算法
			unLoadSdk(sdk) {
			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.success("卸载完成");
			_this.getAllSdk();
			window.parent.postMessage(
			{
			msg: "AppUpdate",
			},
			"*"
			);
			window.parent.postMessage({ msg: "AppUpdate" }, "*");
			}
			})
			.catch((e) => {
			console.log(e);
			sdk.unloadLoading = false;
			});
			})
			.catch((e) => {
			console.log(e);
			});
			.catch((e) => {});
			},
			upgradeSDKinWin(){

			this.isUpgrading = !this.isUpgrading;

			downloadSdk({path:this.productDetail.productBaseId}).then((res)=>{
			this.$notify({
			title: "成功",
			message: "升级完成",
			type: "success",
			});
			this.isUpgrading = !this.isUpgrading;
			}).catch((err)=>{
			this.$notify({
			title: "升级失败",
			message: err.data,
			type: "warning",
			});
			this.isUpgrading = !this.isUpgrading;
			})
			this.sdkUpgreading = true;
			},

			donwload(item) {
			donwloadSDK(item) {
			let timer = null;
			item.upgradeLoading = true;
			//this.downloading = true;
			timer = setInterval(() => {
			this.rocketIf = !this.rocketIf;
			}, 350);
			this.downloadItem = item.id;

			downloadSdk({ path: item.id })
			.then((rsp) => {
			// this.$notify({
			// type: "success",
			// message: "算法已安装"
			// });
			clearInterval(timer);
			item.upgradeLoading = false;
			//this.downloading = false;
			this.downloadItem = "";

			window.parent.postMessage({ msg: "AppUpdate" }, "*");
			})
			.catch((err) => {
			this.$notify({
			type: "warning",
			message: err.data,
			});
			this.$notify.warning(err.data);
			item.upgradeLoading = false;
			//this.downloading = false;
			this.downloadItem = "";
			});
			// 开启自动刷新
			this.sdkUpgreading = true;
			},
			inputBlur(item) {
			// console.log(item, '修改名称')
			this.$set(item, "isEdit", false);
			},
			handleTabClick() {},
			autoRefreshAppAndSdkState() {
			// 关闭后退出
			this.getAllApps();
			this.getAllSdk();
			if (!this.autoRefresh) {
			return;
			}

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

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

			let _this = this;
			setTimeout(() => {
			_this.autoRefreshAppAndSdkState();
			}, 500);
			if (this.appUpgreading) {
			this.getAllApps();
			}
			if (this.sdkUpgreading) {
			this.getAllSdk();
			}
			}, 1000);
			},
			},
			};
			@@ -1761,359 +1000,13 @@
			<style lang="scss">
			.s-task-manage {
			width: 100% !important;
			min-width: 754px !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: 14px;
			}
			.el-dialog {
			width: 55%;
			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: 10px 5px;
			.button-group{
			position: absolute;
			top: 3px;

			left:6px;
			left: 10px;
			.el-button--small {
			padding: 6px 12px;
			}
			button{
			// margin-right: 6px;
			// background-color: #ecf5ff;
			font-size: 18px;
			line-height: 12px;
			}
			}
			}

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

			// margin-top: 15px;
			video {

			margin: 0px auto;
			margin-top: 25px;

			width: 443px;
			height: 277px;
			// background: aquamarine;
			}
			img{
			max-width: 500px;
			margin-top: 21px;

			}
			}
			}
			.top-right {
			float: left;
			width: 43%;
			margin: 0 0.5%;
			// background-color: lightgoldenrodyellow;
			height: 350px;
			background-color: rgba(253, 253, 253, 1);
			position: relative;
			border-radius: 2px;
			overflow: hidden;
			.summary {
			height: 135px;
			margin: 5px 5px 0 5px;

			.icon {
			margin: 0 5px;
			margin-top: 5px;
			float: left;
			.baseImg{
			max-width: 120px;
			max-height: 120px;
			}
			}

			.right-desc {
			float: left;
			position: absolute;
			left: 145px;
			.name {
			font-size: 30px;
			// font-weight: bold;
			margin-bottom: 5px;
			}
			.tags {
			margin-bottom: 10px;
			.el-tag {
			margin-right: 10px;
			}
			}
			}

			}
			.jihuo-input{
			margin-left: 10px;
			margin-bottom: 10px;
			.el-input{
			float: left;
			width: 64%;
			margin-right: 10px;
			}
			el-button{
			float: left;
			}
			}
			.product-intruduction {
			height: 200px;
			// background-color: lightgrey;
			.part-title {
			display: block;
			line-height: 20px;

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


			.single-desc {
			margin-bottom: 10px;
			}
			}
			}
			}
			}
			.box-bottom {
			margin-top: 10px;
			height: 260px;
			.bot-left {
			width: 49%;
			height: 260px;
			background-color: rgba(253, 253, 253, 1);
			margin: 0 0.5%;
			border-radius: 2px;
			float: left;
			// background-color: lightblue;
			.part-title {
			display: block;
			line-height: 35px;
			font-size: 16px;
			margin-left: 24px;
			// height: 30px;
			border-bottom: 3px solid #3d68e1;
			width: fit-content;
			margin-bottom: 8px;
			height: 35px;
			}
			.list-zone {
			overflow: auto;
			height: 225px;
			padding: 0 12px;

			.list-item {
			.desc {
			background-color: rgba(242, 242, 242, 1.3);
			margin: 4px 12px 0 12px;

			}
			margin-bottom: 12px;
			}
			}
			}
			.bot-right {
			height: 260px;
			float: left;
			background-color: rgba(253, 253, 253, 1);
			width: 49%;
			// background-color: lightgoldenrodyellow;
			margin: 0 0.5%;
			border-radius: 2px;

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

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

			.el-tag {
			float: right;
			margin: 8px;
			}
			.icon {
			// width: 100%;
			// height: 68px;
			// width: 68px;
			// position: absolute;
			// margin: 0 auto;
			margin: 0 auto;
			// top: 21%;
			// left: 26%;
			img {
			// display: block;
			max-width: 60px;
			max-height: 60px;
			position: absolute;
			top: 20%;
			left: 26%;
			}
			.icon-name {
			text-align: center;
			position: absolute;
			top: 61%;
			left: 7%;
			width: 110px;
			}
			}
			.look-button {
			position: absolute;
			left: 28%;
			top: 75%;
			}
			}
			}
			}
			}
			}
			}
			}
			.flex-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			}

			.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 {
			@@ -2127,7 +1020,7 @@
			.progress-bar {
			width: 70%;
			height: 17px;
			border-radius: 3px;
			border-radius: 3pxd;
			background-color: rgb(227, 229, 231);
			position: absolute;
			top: 50%;
			@@ -2146,27 +1039,11 @@
			}
			}
			}
			.el-tab-pane {
			height: auto !important;
			}
			.el-tabs--border-card > .el-tabs__content {
			padding: 0 !important;
			overflow: auto !important;
			}
			.el-tabs__content {
			padding: 0 !important;
			overflow: auto !important;
			}
			//height: calc(100% - 10px);
			// .super {
			// .right-box {
			// width: 58% !important;
			// }
			// }

			.super {
			width: 100%;
			height: 100%;
			// caret-color: rgba(0, 0, 0, 0);
			.title {
			margin-bottom: 10px;
			line-height: 30px;
			@@ -2175,181 +1052,476 @@
			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: #fdfdfd;
			padding: 20px;
			box-sizing: border-box;

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

			.el-button + .el-button {
			margin-left: 0 !important;
			}
			}
			}
			}
			}
			.store-list,
			.app-list {
			.nav-box {
			height: 200px;
			display: flex;
			flex-wrap: wrap;
			.wrap-box {
			width: 16.6%;
			margin-bottom: 30px;
			.list-choose-item-left {
			width: 80%;
			height: auto;
			margin: auto;
			margin-bottom: 30px;
			max-width: 200px;
			}
			.inner {
			width: 80%;
			box-sizing: border-box;
			position: relative;
			justify-content: space-between;
			padding: 35px 60px;
			position: relative;
			.nav-box-menu {
			width: 200px;
			height: 200px;
			z-index: 99;
			.menu-item {
			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%);
			line-height: 50px;
			height: 50px;
			letter-spacing: 0.5px;
			color: #828282;
			padding-left: 20px;
			border-left: 3px solid #f3f6fc;
			cursor: pointer;
			caret-color: transparent;
			sup {
			background-color: #f52323;
			font-size: 12px;
			color: #fff;
			height: 18px;
			line-height: 18px;
			padding: 0 3.5px;
			border-radius: 50%;
			}
			}
			.menu-item:hover {
			font-weight: 600;
			color: #333;
			transition: all 0.15s;
			}
			.menu-item-actiove {
			border-left: 3px solid #23d7ee;
			font-weight: 700;
			font-size: 16px;
			color: #333;
			}
			}
			.nav-box-search {
			z-index: 99;
			position: relative;
			.all-scene {
			position: absolute;
			z-index: 100;
			right: 64px;

			top: 10px;
			font-size: 12px;
			}
			.el-input {
			position: relative;
			font-size: 12px;
			border: 2px solid #f2f2f7;
			border-radius: 20px;
			.el-input__inner {
			border: none;
			height: 30px;
			line-height: 30px;
			padding: 0 12px;
			}
			.el-input-group__prepend {
			border-right: 0;
			border: none;
			border-radius: 20px;
			background: #fff;
			padding: 0 0 0 15px;

			i {
			font-weight: 600;
			color: #333;
			font-size: 16px;
			}
			}
			.alg-name {
			height: 36px;
			text-align: center;
			line-height: 36px;
			.el-input-group--append .el-input__inner,
			.el-input-group__prepend {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border: none;
			}
			.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;
			.el-input-group__append {
			border-left: 0;
			border: none;
			border-radius: 20px;
			width: 52px;
			background: linear-gradient(
			180deg,
			#ecfcfe 0%,
			#ebf4fd 47.92%,
			#f4f4fe 100%
			);
			.el-input--suffix {
			border: none;
			.el-input__icon {
			line-height: 30px;
			}
			.el-input__inner {
			font-size: 12px;
			font-weight: bold;
			letter-spacing: 0.5px;
			padding: 0 0px 0 30px;
			color: #474747;
			}
			.el-input__suffix {
			display: none;
			}
			}
			.el-input__inner::placeholder {
			color: rgb(71, 71, 71);
			}
			.el-select-dropdown {
			min-width: 120px !important;
			left: -26px !important;
			background: rgba(236, 245, 253, 0.6);
			border-radius: 2px;
			border: none;
			.el-select-dropdown__item {
			height: 22px;
			line-height: 22px;
			font-size: 12px;
			letter-spacing: 0.4px;
			color: #333333;
			.icon {
			margin-right: 5px;
			font-size: 15px;
			}
			}
			.el-select-dropdown__item.hover,
			.el-select-dropdown__item:hover {
			background-color: #ebf4fd;
			font-weight: 600;
			}
			}
			}
			&:hover {
			.mask {
			display: block;
			}
			.el-input-group__prepend .el-select {
			display: inline-block;
			margin: -10px -20px;
			border: none;
			border-radius: 20px;
			background: linear-gradient(
			180deg,
			#ecfcfe 0%,
			#ebf4fd 47.92%,
			#f4f4fe 100%
			);
			}
			}
			}
			.bg-img-wrap {
			position: absolute;
			z-index: 1;
			right: 0;
			top: 41px;
			height: 229px;
			img {
			height: 100%;
			}
			}
			}
			.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;
			.quick-path {
			position: relative;
			height: 200px;
			margin: 0 60px;
			z-index: 99;
			background: linear-gradient(
			180deg,
			#ecfcfe 0%,
			#ebf4fd 47.92%,
			#f4f4fe 100%
			);
			border-radius: 4px;
			height: 75px;
			display: flex;
			align-items: center;
			.left-items {
			display: flex;
			}
			.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;
			.quick-item {
			display: flex;
			cursor: pointer;
			padding: 2px 20px;
			height: 52px;
			box-sizing: border-box;

			.icon-img {
			width: 48px;
			height: 48px;
			position: relative;
			.icon {
			position: absolute;
			right: -7px;
			top: -7px;
			font-size: 13px;
			}
			img {
			width: 48px;
			height: 48px;
			}
			}
			.desc {
			box-sizing: border-box;
			padding: 0 12px;
			color: #828282;
			width: 140px;
			.desc-1 {
			font-size: 14px;
			font-weight: bold;
			line-height: 26px;
			height: 26px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			}
			.desc-2 {
			font-size: 12px;
			}
			}
			.right-icon {
			padding: 2px 0;

			.icon {
			font-size: 21px;
			}
			}
			}
			.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;
			.quick-item:not(:last-child) {
			border-right: 1px solid #e0e0e0;
			}
			.down-all-btn {
			position: absolute;
			right: 30px;
			.el-button {
			width: 78px;
			font-size: 12px;
			font-weight: 600;
			padding: 3px 10px;
			border: 1px solid #eef0f7;
			}
			}
			}
			.main-content {
			padding: 35px 82px;
			z-index: 99;
			.main-title {
			line-height: 25px;
			font-size: 16px;
			font-weight: 600;
			margin-bottom: 10px;
			}
			.tab-btns {
			display: flex;
			justify-content: space-between;
			.group-left {
			display: flex;
			.tab {
			font-size: 14px;
			margin-right: 25px;
			line-height: 28px;
			cursor: pointer;
			color: #828282;
			}
			label {
			display: inline-block;
			width: 90px;
			padding-left: 14px;
			.tab-active {
			border-bottom: 2px solid #23d7ee;
			color: #333333;
			font-weight: bold;
			}
			}
			}
			.text-right {
			padding-right: 30px;
			text-align: right;
			.tip {
			color: #999;
			line-height: 38px;

			.batch-update {
			display: flex;
			align-items: center;
			.el-button {
			padding: 3px 12px;
			background-color: #1dd4ec !important;
			border-color: #1dd4ec !important;
			border-radius: 22px;
			}
			.el-button--primary:hover {
			background: #089fb3 !important;
			border-color: #089fb3 !important;
			}
			}
			}
			}
			.tab-content {
			padding: 30px 20px;
			.front-page-items {
			padding-top: 25px;
			.front-page-item {
			float: left;
			display: flex;
			margin: 0 5px;
			margin-bottom: 15px;
			box-sizing: border-box;
			width: 274px;

			justify-content: center;
			cursor: pointer;

			padding: 10px 0;
			height: 76px;
			border-radius: 4px;

			/* &.disabled {
			cursor: default;
			} */

			.icon-img {
			width: 58px;
			height: 58px;
			position: relative;
			.icon {
			position: absolute;
			right: -9px;
			top: -9px;
			font-size: 16px;
			}
			img {
			width: 58px;
			height: 58px;
			border-radius: 10px;
			}
			}
			.desc {
			box-sizing: border-box;
			padding: 0 12px;
			width: 147px;

			.desc-1 {
			font-size: 14px;
			font-weight: bold;
			color: #4f4f4f;
			line-height: 28px;
			height: 28px;
			letter-spacing: 0.1px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			}
			.desc-2 {
			color: #828282;
			font-size: 12px;
			}
			}
			.right-btn {
			padding: 2px 0;
			width: 50px;
			text-align: center;
			position: relative;
			.check-btn {
			background-color: #ffffff !important;
			border-color: #bdbdbd !important;
			color: #333333;
			}
			.update-btn {
			border-color: #23d7ee !important;
			background-color: rgba(29, 212, 236, 0.1) !important;
			color: #4f4f4f;
			}
			.other-btn {
			background-color: #1dd4ec !important;
			border-color: #1dd4ec !important;
			color: #ffffff;
			}
			@keyframes spin {
			from {
			transform: rotate(0deg);
			}
			to {
			transform: rotate(360deg);
			}
			}
			.anz-font {
			font-size: 28px;
			color: #333;
			}

			.spin-icon {
			animation: spin 0.8s linear infinite;
			}
			.status {
			font-size: 12px;
			color: #828282;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			min-width: 100px;
			text-align: end;
			position: absolute;
			right: 0;
			width: 120px;
			margin-top: 2px;
			}
			.rocket-icon {
			font-size: 20px;
			}
			.el-button {
			padding: 3px 12px;
			border-radius: 22px;
			font-weight: bold;
			letter-spacing: 0.5px;
			}
			}
			}
			.front-page-item:hover {
			background-color: #f2f2f7;
			}
			.item-dimmed {
			color: gray;
			filter: grayscale(100%);
			}
			}
			.front-page-items:after {
			content: "";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
			}
			.upload-pkg {
			.upload-head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
			display: flex;
			align-items: center;
			.iconfont {
			font-size: 18px;
			margin-right: 6px;
			}
			.txt {
			font-size: 16px;
			}
			}
			.right {
			.icon {
			margin-right: 11px;
			font-size: 17px;
			cursor: pointer;
			}
			}
			}
			}
			.upload-demo {
			margin: 30px 0px;
			.drag-txt {
			width: 340px;
			height: 45px;
			border: 1px dashed #bdbdbd;
			display: flex;
			margin-top: 30px;
			align-items: center;
			justify-content: center;
			color: #828282;
			font-size: 14px;
			}
			.txt-btn {
			width: 78px;
			margin-top: 18px;
			height: 19px;
			background: #23d7ee;
			border-radius: 22px;
			color: #ffffff;
			font-weight: bold;
			font-size: 12px;
			}
			}
			}
			}
			.mask {
			@@ -2387,301 +1559,13 @@
			}
			}

			.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: darkgray;
			background-color: #ddd;
			}
			.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: 36px;
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.05em;
			color: #3e4664;
			// 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%;
			// 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);
			svg {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			}
			.baseImg {
			width: 56%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			max-width: 106px;
			max-height: 106px;
			}
			}
			.willUpGrade {
			.iconupdate {
			color: #01e667;
			position: absolute;
			top: 5px;
			right: 5px;
			font-weight: 550;
			font-size: 26px;
			}
			}
			&.uninstall {
			.svg-wrap {
			background-color: #ddd;
			}
			.alg-name {
			color: darkgray;
			}
			}
			}
			.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;
			@@ -2691,80 +1575,16 @@
			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;
			}
			}
			}
			}
			.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;
			}
			}

			@media screen and (max-width: 800px) {
			.quick-path .left-items .quick-item:last-child {
			display: none !important;
			}
			.quick-path .left-items .quick-item:nth-child(2) {
			border: none !important;
			}
			}
			</style>