<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" v-if="isSuperUser">
|
<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'">
|
<div class="flex-list">
|
<!-- <draggable
|
:list="installedList"
|
:group="{ name: 'article', pull: 'clone', put: false }"
|
:sort="false"
|
@start="startRight"
|
@end="endLeft"
|
style="display:inline"
|
>-->
|
|
<div class="wrap-box" v-for="item in ungradeList" :key="item.id">
|
<div class="list-choose-item-left">
|
<div class="mask">
|
<el-button type="primary" class="bot-btn" @click="donwload(item)">升级</el-button>
|
</div>
|
|
<div class="list-complete-item-handle">
|
<div class="svg-wrap">
|
<svg class="icon" aria-hidden="true" style="font-size:7rem;">
|
<use :xlink:href="`#${item.icon}`" />
|
</svg>
|
</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="mask" v-if="!item.isEdit">
|
<el-button
|
@click="commandAlgLib(item)"
|
type="primary"
|
class="bot-btn"
|
>编辑名称</el-button>
|
</div>
|
<div class="list-complete-item-handle">
|
<!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->
|
<div class="svg-wrap">
|
<svg class="icon" aria-hidden="true" style="font-size:7rem;">
|
<use :xlink:href="`#${item.icon}`" />
|
</svg>
|
</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">
|
<!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->
|
<div class="svg-wrap">
|
<svg class="icon" aria-hidden="true" style="font-size:7rem;">
|
<use :xlink:href="`#${item.icon}`" />
|
</svg>
|
</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>
|
<!-- 未下载 -->
|
</div>
|
</el-tab-pane>
|
|
<el-tab-pane
|
label="离线升级/安装"
|
name="upgradeOrInstallation"
|
v-show="activeName==='upgradeOrInstallation'"
|
>
|
<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-show="activeName==='algorithmMall'">
|
<div class="tab-content">
|
<div class="store-list">
|
<div class="wrap-box">
|
<div class="inner">
|
<div class="mask" @click="actDrawerShow=true">
|
<svg class="icon" aria-hidden="true" style="font-size:2rem;">
|
<use xlink:href="#iconyunxiazai" />
|
</svg>
|
</div>
|
<div class="alg-icon">
|
<svg class="icon" aria-hidden="true" style="font-size:7rem;">
|
<use xlink:href="#iconrenyuanyidong" />
|
</svg>
|
</div>
|
<div class="alg-name">name</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-drawer title="下载" :visible.sync="actDrawerShow" :direction="direction">
|
<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>YUAAA-AAAEU-QJQE3-ZRRXD-K9MWR</span>
|
</li>
|
<li>
|
<label>产品名称:</label>
|
<span>人员跟踪SDK</span>
|
</li>
|
<li>
|
<label>配置详情:</label>
|
<span>无</span>
|
</li>
|
<li>
|
<label>服务到期日:</label>
|
<span>2021-03-04</span>
|
</li>
|
<li>
|
<label>许可证:</label>
|
<span>本设备</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-tabs>
|
</div>
|
|
<!-- 算法管理 -->
|
<!-- <div class="right-box" style="width:58%">
|
<div class="title">
|
<label>算法管理</label>
|
<el-button size="small" type="primary" @click="addTask" style="float:right">添加任务</el-button>
|
</div>
|
<div id="taskArea" class="width-new-line task-manage-table">
|
<div
|
v-for="(row, Index) in TaskMange.list2"
|
:key="Index"
|
class="dic-border mb10 width-new-line"
|
>
|
<div class="flex-box" style="height:100%;">
|
<div class="task-name-google">
|
<div class="mask" v-if="!row.isSetting">
|
<el-tooltip
|
content="编辑名称"
|
transition="none"
|
placement="left"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconbianji1"
|
style="font-size:30px; left:14px; top:30px;"
|
@click="clickSet(row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
content="删除任务"
|
transition="none"
|
placement="right"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconshanchu4"
|
style="font-size:30px; color:red; top:30px; left:28px;"
|
@click="clickDel(row, Index)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
:content="`${row.enable ? '关闭任务' : '开启任务'}`"
|
placement="left"
|
popper-class="atooltip"
|
transition="none"
|
style="left: -45px; top: 65px;"
|
>
|
<el-switch
|
:active-value="true"
|
:inactive-value="false"
|
v-model="row.enable"
|
@change="updateTaskStatus(row)"
|
></el-switch>
|
</el-tooltip>
|
<el-tooltip
|
content="修改图标"
|
transition="none"
|
placement="right"
|
popper-class="atooltip"
|
>
|
<i class="iconfont icontupian1" style="font-size:12px; left:-20px; top:65px;"></i>
|
</el-tooltip>
|
</div>
|
<div class="list-choose-header flex-center">
|
<span class="iconfont iconrenwu" style="font-size:3rem;color:#fff;"></span>
|
</div>
|
<div class="task-name-div">
|
<span :title="row.name" v-if="!row.isSetting">{{ row.name }}</span>
|
<el-input
|
size="small"
|
v-model="row.name"
|
v-if="row.isSetting"
|
v-focus
|
:maxlength="15"
|
style="width:120px"
|
@blur="updateTaskName(row)"
|
></el-input>
|
</div>
|
</div>
|
|
<div id="child" class="overflow-x">
|
<draggable
|
:id="row.id"
|
:list="row.child"
|
group="article"
|
filter=".mask"
|
class="dragAreaR flex-box"
|
@start="startRight"
|
@end="endLeft"
|
>
|
<div
|
v-for="(item, index) in row.child"
|
:key="index"
|
:title="item.sdk_name"
|
:class="
|
item.isSelect
|
? 'list-choose-item alg-shadow'
|
: 'list-choose-item'
|
"
|
>
|
<div class="mask">
|
<el-tooltip
|
content="设置"
|
transition="none"
|
placement="top"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconshezhi"
|
style="font-size:15px; top:43px;"
|
@click="clickSetAlgo(row, item)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
content="删除算法"
|
transition="none"
|
placement="top"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconshanchu4"
|
style="font-size: 30px; color:red; left:12px;"
|
@click="clickDelSdk(row, item)"
|
></i>
|
</el-tooltip>
|
</div>
|
<div class style="height:100%;padding: 20px 10px 10px 10px;">
|
<div class="flex-center" style>
|
<span
|
:class="`iconfont ${item.icon}`"
|
style="font-size:3rem;margin-left:5px;"
|
></span>
|
</div>
|
<div
|
:class="item.isSelect?'select-color text-css':'task-name text-css'"
|
style
|
>{{ item.sdk_name }}</div>
|
</div>
|
</div>
|
<div style class="tc drag-info flex-center">
|
<div class="drag-info-text">
|
<span>拖动算法图标到这里</span>
|
</div>
|
</div>
|
</draggable>
|
</div>
|
</div>
|
|
<div class v-if="row.isShowSetAlgo">
|
<div class="b-top">
|
<div class="flex-box mt10">
|
<span class="alg-t ml10 mr10 fb">算法配置</span>
|
</div>
|
<div style="border: 1px solid #EBEBEB;"></div>
|
<div>
|
<div class="p5">
|
<div v-for="(temp, index) in TaskMange.argsList" :key="index" class="p5 ml50">
|
<el-row :gutter="2">
|
<el-col :span="4">
|
<el-select
|
v-model="temp.value1"
|
placeholder="请选择"
|
width="200px"
|
disabled
|
@change="selectChange($event, 'options1', temp)"
|
>
|
<el-option
|
v-for="item in temp.options1"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="4">
|
<el-select
|
v-model="temp.value2"
|
placeholder="请选择"
|
@change="selectChange($event, 'options2', temp)"
|
>
|
<el-option
|
v-for="item in temp.options2"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="12">
|
<div v-if="temp.value2 === 'is'">
|
<el-select
|
v-model="temp.value3"
|
placeholder="请选择"
|
@change="selectChange($event, 'options3', temp)"
|
>
|
<el-option
|
v-for="item in temp.options3"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
<div v-else class="flex-row-left">
|
<div>
|
<el-input
|
v-model="temp.value3"
|
placeholder="请输入"
|
@blur="valiNum(temp.value3)"
|
></el-input>
|
</div>
|
<div v-if="temp.unit" class="unit-class">
|
<span>(单位：{{ temp.unit }})</span>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-right" style="margin: 0px 25px 5px 0px;">
|
<a
|
style="font-family: PingFangSC-Medium;line-height: 32px;
|
font-size: 13px;text-decoration:underline;
|
color: #3D68E1;margin-right: 28px;"
|
@click="getDefault"
|
>恢复默认值</a>
|
<el-button type="info" size="small" class="mb10" @click="cancle(row)">取消</el-button>
|
<el-button type="primary" size="small" class="mr50 mb10" @click="save">保存</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>-->
|
</div>
|
<!-- 一般用户可见 -->
|
<div class="common" v-if="!isSuperUser">
|
<!-- 算法管理 -->
|
<!-- <div class="right-box" style="width:84%;margin:auto 8%">
|
<div class="title">
|
<label>算法管理</label>
|
<el-button
|
size="small"
|
type="primary"
|
@click="addTask"
|
style="float:right"
|
v-show="isSuperUser"
|
>添加任务</el-button>
|
</div>
|
<div id="taskArea" class="width-new-line task-manage-table">
|
<div
|
v-for="(row, Index) in TaskMange.list2"
|
:key="Index"
|
class="dic-border mb10 width-new-line"
|
>
|
<div class="flex-box" style="height:100%;">
|
<div class="task-name-google">
|
<div class="mask" v-if="row.isSetting">
|
<el-tooltip
|
content="编辑名称"
|
transition="none"
|
placement="left"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconbianji1"
|
style="font-size:30px; left:14px; top:30px;"
|
@click="clickSet(row)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
content="删除任务"
|
transition="none"
|
placement="right"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconshanchu4"
|
style="font-size:30px; color:red; top:30px; left:28px;"
|
@click="clickDel(row, Index)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
:content="`${row.enable ? '关闭任务' : '开启任务'}`"
|
placement="left"
|
popper-class="atooltip"
|
transition="none"
|
style="left: -45px; top: 65px;"
|
>
|
<el-switch
|
:active-value="true"
|
:inactive-value="false"
|
v-model="row.enable"
|
@change="updateTaskStatus(row)"
|
></el-switch>
|
</el-tooltip>
|
<el-tooltip
|
content="修改图标"
|
transition="none"
|
placement="right"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont icontupian1"
|
style="font-size:12px; left:-20px; top:65px;"
|
></i>
|
</el-tooltip>
|
</div>
|
<div class="list-choose-header flex-center">
|
<span class="iconfont iconrenwu" style="font-size:3rem;color:#fff;"></span>
|
</div>
|
<div class="task-name-div">
|
<span :title="row.name" v-if="!row.isSetting">{{ row.name }}</span>
|
<el-input
|
size="small"
|
v-model="row.name"
|
v-if="row.isSetting"
|
v-focus
|
:maxlength="15"
|
style="width:120px"
|
@blur="updateTaskName(row)"
|
></el-input>
|
</div>
|
</div>
|
|
<div id="child" class="overflow-x">
|
<div
|
:id="row.id"
|
:list="row.child"
|
group="article"
|
filter=".child"
|
class="dragAreaR flex-box"
|
@start="startRight"
|
@end="endLeft"
|
>
|
<div
|
v-for="(item, index) in row.child"
|
:key="index"
|
:title="item.sdk_name"
|
:class="
|
item.isSelect
|
? 'list-choose-item alg-shadow'
|
: 'list-choose-item'
|
"
|
>
|
<div class="mask">
|
<el-tooltip
|
content="设置"
|
transition="none"
|
placement="top"
|
popper-class="atooltip"
|
>
|
<i
|
class="iconfont iconshezhi"
|
style="font-size:15px; top:43px;"
|
@click="clickSetAlgo(row, item)"
|
></i>
|
</el-tooltip>
|
<el-tooltip
|
content="删除算法"
|
transition="none"
|
placement="top"
|
popper-class="atooltip"
|
v-show="isSuperUser"
|
>
|
<i
|
class="iconfont iconshanchu4"
|
style="font-size: 30px; color:red; left:12px;"
|
@click="clickDelSdk(row, item)"
|
></i>
|
</el-tooltip>
|
</div>
|
<div class style="height:100%;padding: 20px 10px 10px 10px;">
|
<div class="flex-center" style>
|
<span
|
:class="`iconfont ${item.icon}`"
|
style="font-size:3rem;margin-left:5px;"
|
></span>
|
</div>
|
<div
|
:class="item.isSelect?'select-color text-css':'task-name text-css'"
|
style
|
>{{ item.sdk_name }}</div>
|
</div>
|
</div>
|
<div style class="tc drag-info flex-center" v-show="isSuperUser">
|
<div class="drag-info-text">
|
<span>拖动算法图标到这里</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class v-if="row.isShowSetAlgo">
|
<div class="b-top">
|
<div class="flex-box mt10">
|
<span class="alg-t ml10 mr10 fb">算法配置</span>
|
</div>
|
<div style="border: 1px solid #EBEBEB;"></div>
|
<div>
|
<div class="p5">
|
<div
|
v-for="(temp, index) in TaskMange.argsList"
|
:key="index"
|
class="p5 ml50"
|
>
|
<el-row :gutter="2">
|
<el-col :span="4">
|
<el-select
|
v-model="temp.value1"
|
placeholder="请选择"
|
width="200px"
|
disabled
|
@change="selectChange($event, 'options1', temp)"
|
>
|
<el-option
|
v-for="item in temp.options1"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="4">
|
<el-select
|
v-model="temp.value2"
|
placeholder="请选择"
|
disabled
|
@change="selectChange($event, 'options2', temp)"
|
>
|
<el-option
|
v-for="item in temp.options2"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-col>
|
<el-col :span="12">
|
<div v-if="temp.value2 === 'is'">
|
<el-select
|
v-model="temp.value3"
|
placeholder="请选择"
|
@change="selectChange($event, 'options3', temp)"
|
>
|
<el-option
|
v-for="item in temp.options3"
|
:key="item.id"
|
:label="item.name"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
<div v-else class="flex-row-left">
|
<div>
|
<el-input
|
v-model="temp.value3"
|
placeholder="请输入"
|
:disabled="temp.value1 !== 'score'"
|
@blur="valiNum(temp.value3)"
|
></el-input>
|
</div>
|
<div v-if="temp.unit" class="unit-class">
|
<span>(单位：{{ temp.unit }})</span>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
<div class="flex-row-right" style="margin: 0px 25px 5px 0px;">
|
<a
|
style="font-family: PingFangSC-Medium;line-height: 32px;
|
font-size: 13px;text-decoration:underline;
|
color: #3D68E1;margin-right: 28px;"
|
@click="getDefault"
|
v-show="isSuperUser"
|
>恢复默认值</a>
|
<el-button type="info" size="small" class="mb10" @click="cancle(row)">取消</el-button>
|
<el-button type="primary" size="small" class="mr50 mb10" @click="save">保存</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
|
import {
|
findAllSdk,
|
findAll,
|
addTaskSdk,
|
delTaskSdk,
|
deleteTask,
|
updateTaskStatus,
|
updateTaskName,
|
getSdkArgs,
|
saveTaskSdkRule,
|
addTask,
|
getRulesByTaskSdk,
|
deleteTaskSdkRule,
|
findByType,
|
getTagList,
|
downloadSdk,
|
installSdk
|
} from "./api";
|
import FileUploader from "@/components/subComponents/FileUpload/index";
|
|
export default {
|
name: "algorithmManage",
|
props: {},
|
components: {
|
FileUploader
|
},
|
|
data() {
|
return {
|
activeName: "myAlgorithm",
|
patchUpdateStatus: "",
|
dragging: false,
|
list1: [
|
{
|
sdk_name: "人脸提取"
|
}
|
],
|
list2: [
|
{
|
id: "001",
|
name: "任务1",
|
child: [
|
{
|
id: "1",
|
sdk_name: "人脸检测",
|
isSelect: false
|
},
|
{
|
id: "2",
|
sdk_name: "人脸对比",
|
isSelect: false
|
}
|
],
|
isSetting: false,
|
isShowSetAlgo: false
|
}
|
],
|
argsList: [],
|
baseObject: {
|
id: "",
|
algoId: "",
|
options1: [],
|
options2: [],
|
options3: [],
|
value1: "",
|
value2: "",
|
value3: "",
|
unit: ""
|
},
|
currentAlgoId: "",
|
currentTaskId: "",
|
isSuperUser: false,
|
downloadItem: "",
|
downloading: false,
|
sceneDialogVisible: false,
|
dialogTitle: '',
|
direction: "rtl",
|
actDrawerShow: false,
|
actStep: 0,
|
activeCode: "",
|
sceneTemplates: [],
|
appSceneForm: {
|
id: "",
|
name: "",
|
desc: "",
|
rules: "",
|
txt: ""
|
},
|
sceneSdks: [],
|
sceneRuleList: "",
|
isInstall: false,
|
installPercentage: 0
|
}
|
},
|
methods: {},
|
mounted() {}
|
};
|
</script>
|
<style lang="scss">
|
.s-task-manage {
|
width: 100% !important;
|
height: 100%;
|
|
box-sizing: border-box;
|
background-color: rgb(233, 235, 242);
|
padding: 10px;
|
text-align: left;
|
// background-color: #f2f6fc;
|
.s-video-manage-breadcrumb {
|
height: 5%;
|
-webkit-box-sizing: border-box;
|
border: 1px solid #e4e7ed;
|
background-color: rgb(255, 255, 255);
|
-webkit-box-shadow: #e4e7ed 0px 0px 9px inset;
|
box-shadow: #e4e7ed 0px 0px 9px inset;
|
border-radius: 5px;
|
}
|
.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%;
|
}
|
}
|
.el-breadcrumb__inner {
|
font-weight: bold;
|
color: #606266;
|
cursor: pointer;
|
}
|
</style>
|
