<template>
|
<div class="s-task-manage">
|
<div style="height:100%;">
|
<div class="flex-box task-manage">
|
<div class="installModel" v-if="isInstall">
|
<div class="progress-bar">
|
<div class="inner-bar"></div>
|
</div>
|
</div>
|
<!-- 超级管理员可见 -->
|
<div class="super">
|
<div class="left-box">
|
<!-- <div class="title">
|
<label>算法库</label>
|
</div>-->
|
<el-tabs
|
v-model="activeName"
|
type="border-card"
|
@tab-click="handleTabClick"
|
style="height: calc(100% - 20px);"
|
>
|
<el-tab-pane label="已安装" name="myAlgorithm">
|
<div class="width-new-line task-list" v-show="activeName === 'myAlgorithm'">
|
<p class="src-title">算法软件</p>
|
<div class="flex-list">
|
<div class="wrap-box" v-for="item in 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}">
|
<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>
|
|
<!-- <div class="list-complete-item-handle"> -->
|
<!-- <div class="svg-wrap" :class="{willUpGrade:item.isUpgrade}"> -->
|
<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">
|
<div class="mask flex-center" v-if="!item.isEdit">
|
<div class="info-onmask">
|
<div>当前版本:{{item.version}}</div>
|
</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">
|
<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.unloadLoading?'卸载中':'升级中'"
|
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="info-onmask">
|
<div>当前版本:{{item.version}}</div>
|
<div v-if="item.remoteVersion">最新版本:{{item.remoteVersion}}</div>
|
</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.installLoading?'安装中':'升级中'"
|
element-loading-background="rgba(0,0,0,.8)"
|
>
|
<div class="mask">
|
<el-button
|
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>
|
</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>
|
<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.id,'app')">
|
<span
|
class="iconfont iconyunxiazai"
|
style="color:#ff6a00;font-size:20px;position:absolute;top:45%;left:45%"
|
></span>
|
</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 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-tabs>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
title="安装包信息"
|
:visible.sync="installDialogVisible"
|
width="40%"
|
:close-on-click-modal="false"
|
>
|
<div class="installInfo">
|
<template v-if="installAppPackage != null">
|
<div>
|
<div>
|
<span>安装包名称：</span>
|
<span>{{installAppPackage.productName}}</span>
|
</div>
|
<div>
|
<span>安装版本：</span>
|
<span>{{installAppPackage.version}}</span>
|
</div>
|
<div>
|
<span>更新内容：</span>
|
<span>{{installAppPackage.installContent}}</span>
|
</div>
|
</div>
|
</template>
|
<template v-if="installSdkPackage != null">
|
<div>
|
<div>
|
<span>安装包名称：</span>
|
<span>{{installSdkPackage.productName}}</span>
|
</div>
|
<div>
|
<span>安装版本：</span>
|
<span>{{installSdkPackage.version}}</span>
|
</div>
|
<div>
|
<span>更新内容：</span>
|
<span>{{installSdkPackage.installContent}}</span>
|
</div>
|
</div>
|
</template>
|
<p>确定安装？</p>
|
</div>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="installDialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="offlineInstall">安 装</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
|
import {
|
findAllSdk,
|
findAll,
|
addTaskSdk,
|
delTaskSdk,
|
deleteTask,
|
updateTaskStatus,
|
updateTaskName,
|
getSdkArgs,
|
saveTaskSdkRule,
|
addTask,
|
getRulesByTaskSdk,
|
deleteTaskSdkRule,
|
findByType,
|
getTagList,
|
downloadSdk,
|
installSdk,
|
getInstallInfo
|
} from "./api";
|
import { getApps, installApp, removeApp, getUnActivedSdk, actPageAlg, getUnActivedApp, actApp } from "@/api/app";
|
|
import FileUploader from "@/components/subComponents/FileUpload/index";
|
import TaskManage from "@/Pool/TaskMange";
|
import VideoManageData from "@/Pool/VideoManageData";
|
export default {
|
name: "algorithmManage",
|
props: {},
|
components: {
|
FileUploader
|
},
|
computed: {
|
notInstalledList () {
|
return this.TaskMange.list1.filter(sdk => {
|
return sdk.installed === false;
|
});
|
},
|
installedList () {
|
return this.TaskMange.list1.filter(sdk => {
|
return sdk.installed === true;
|
});
|
},
|
ungradeList () {
|
// 升级处理会导致重复的key,需要修改
|
//return [];
|
return this.TaskMange.list1.filter(sdk => {
|
return sdk.isUpgrade === true;
|
});
|
},
|
isAdmin () {
|
if (
|
sessionStorage.getItem("userInfo") &&
|
sessionStorage.getItem("userInfo") !== ""
|
) {
|
let loginName = JSON.parse(sessionStorage.getItem("userInfo")).username;
|
return loginName === "superadmin" || loginName === "basic";
|
}
|
|
return false;
|
},
|
},
|
data () {
|
return {
|
TaskMange: new TaskManage,
|
VideoManageData: new VideoManageData,
|
buttonAuthority: sessionStorage.getItem("buttonAuthoritys") || [],
|
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,
|
installDialogVisible: false,
|
installPackage: {},
|
installAppPackage: null,
|
installSdkPackage: null,
|
installPercentage: 0,
|
unActivedSDKList: [],
|
unActivedAppList: [],
|
//actSdkId: '',
|
actType: '',
|
actId: '',
|
activedSdkOrApp: {
|
activateCode: '',
|
productName: '',
|
setting: '',
|
expireTime: '',
|
licence: '',
|
devIds: ''
|
},
|
// unloadLoading: false,
|
// installLoading: false,
|
installedApps: [],
|
storeApps: [],
|
installFile: {}
|
}
|
},
|
watch: {
|
list2: {
|
handler (newVal, oldVal) {
|
// window.console.log(newVal, oldVal, '监听list2')
|
if (newVal !== oldVal) {
|
// window.console.log(newVal, '监听list2')
|
newVal.map((i, index) => {
|
i.child.map(j => {
|
this.$set(j, "parentId", i.id);
|
});
|
});
|
}
|
},
|
deep: true
|
}
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector("input").focus();
|
}
|
}
|
},
|
mounted () {
|
this.getAllApps();
|
this.findAllSdk();
|
this.findByType();
|
this.getBaseList();
|
this.findAll();
|
this.getUnActivedList();
|
this.getUnActivedAppList();
|
// this.TaskMange.findAllSdk();
|
// this.TaskMange.findByType();
|
this.VideoManageData.init();
|
},
|
methods: {
|
isShow (authority) {
|
return this.isAdmin || this.buttonAuthority.indexOf("," + authority + ",") > -1
|
},
|
//离线安装
|
offlineInstall () {
|
this.installDialogVisible = false;
|
this.isInstall = true;
|
//安装
|
installSdk(this.installFile).then(res => {
|
debugger
|
if (res.success) {
|
this.isInstall = false;
|
this.$message({
|
type: 'success',
|
message: '安装成功,将跳转至我的算法中查看'
|
});
|
setTimeout(() => {
|
this.findAllSdk();
|
this.getAllApps();
|
window.parent.postMessage({
|
msg: "AppUpdate"
|
}, '*')
|
this.activeName = 'myAlgorithm';
|
}, 3000);
|
}
|
|
}).catch(e => {
|
console.log(e)
|
this.isInstall = false;
|
this.$message({
|
type: 'error',
|
message: e.data
|
});
|
})
|
},
|
downloadApp (app, action) {
|
if (action == 'upgrade') {
|
app.upgradeLoading = true;
|
} else {
|
app.installLoading = true;
|
}
|
let _this = this;
|
|
installApp({ path: app.id }).then(res => {
|
if (res && res.success) {
|
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"
|
}, '*')
|
}, 3000);
|
}
|
}).catch(e => {
|
console.log(e);
|
if (action == 'upgrade') {
|
app.upgradeLoading = false;
|
} else {
|
app.installLoading = false;
|
}
|
})
|
},
|
getAllApps () {
|
let _this = this;
|
_this.installedApps = [];
|
_this.storeApps = [];
|
getApps().then(res => {
|
if (res && res.success) {
|
//_this.storeApps = res.data;
|
res.data.forEach(item => {
|
if (item.installed) {
|
let obj = Object.assign({ unloadLoading: false, upgradeLoading: false }, item)
|
_this.installedApps.push(obj)
|
} else {
|
let obj = Object.assign({ installLoading: false, upgradeLoading: false }, item)
|
_this.storeApps.push(obj)
|
}
|
});
|
console.log('_this.installedApps', _this.installedApps);
|
console.log('_this.storeApps', _this.storeApps);
|
}
|
})
|
},
|
//卸载应用
|
unLoad (app) {
|
app.unloadLoading = true;
|
let _this = this;
|
removeApp({ appId: app.id }).then(res => {
|
|
if (res && res.success) {
|
setTimeout(() => {
|
app.unloadLoading = false;
|
_this.getAllApps();
|
window.parent.postMessage({
|
msg: "AppUpdate"
|
}, '*')
|
}, 3000);
|
}
|
}).catch(e => {
|
console.log(e);
|
app.unloadLoading = false;
|
})
|
|
},
|
// actSdk (id) {
|
// this.actSdkId = id;
|
// this.actDrawerShow = true;
|
// this.actStep = 0;
|
// this.activeCode = '';
|
// this.activedSdkOrApp = this.newActInfo()
|
// },
|
actSdkOrApp (id, type = 'sdk') {
|
this.actType = type;
|
this.actId = id;
|
this.actDrawerShow = true;
|
this.actStep = 0;
|
this.activeCode = '';
|
this.activedSdkOrApp = this.newActInfo()
|
},
|
newActInfo () {
|
return {
|
activateCode: '',
|
productName: '',
|
setting: '',
|
expireTime: '',
|
licence: '',
|
devIds: ''
|
}
|
},
|
getUnActivedList () {
|
getUnActivedSdk().then(res => {
|
if (res.code == 200) {
|
this.unActivedSDKList = res.data;
|
}
|
})
|
|
},
|
getUnActivedAppList () {
|
getUnActivedApp().then(res => {
|
if (res.code == 200) {
|
this.unActivedAppList = res.data;
|
}
|
});
|
},
|
|
installFormat (percentage) {
|
return percentage === 100 ? '安装成功' : `${percentage}%`;
|
},
|
actived () {
|
let _this = this;
|
if (this.actType == 'sdk') {
|
//激活算法
|
actPageAlg(this.actId, this.activeCode).then(res => {
|
if (res.data.isSuccess) {
|
_this.activedSdkOrApp = res.data.successMsg;
|
_this.actStep++;
|
_this.getUnActivedList();
|
_this.findAllSdk();
|
} else {
|
_this.$notify({
|
type: 'error',
|
message: res.data.failMsg.failMsg
|
});
|
}
|
}).catch(e => {
|
console.log(e)
|
});
|
} else if (this.actType == 'app') {
|
//激活应用
|
actApp(this.actId, this.activeCode).then(res => {
|
if (res.data.isSuccess) {
|
_this.activedSdkOrApp = res.data.successMsg;
|
_this.actStep++;
|
_this.getUnActivedAppList();
|
_this.getAllApps();
|
} else {
|
_this.$notify({
|
type: 'error',
|
message: res.data.failMsg.failMsg
|
});
|
}
|
}).catch(e => {
|
console.log(e)
|
});
|
}
|
},
|
getCodeDetail () { },
|
checkMyAlgorith () {
|
this.actDrawerShow = false;
|
this.activeName = "myAlgorithm";
|
},
|
onFileUpload (file) {
|
//this.patchUpdateStatus = `<span style="color:green">上传成功, 点击升级按钮开始安装</span>`;
|
this.patchFile = { ...file };
|
this.fileAdded = true;
|
const h = this.$createElement;
|
//上传完成获取安装信息
|
let _this = this;
|
getInstallInfo(file).then(res => {
|
_this.installFile = file;
|
if (res.success) {
|
_this.installDialogVisible = true;
|
debugger
|
if (res.data.apps.length > 0) {
|
_this.installAppPackage = {
|
appId: res.data.apps[0].appId,
|
version: res.data.apps[0].version,
|
productName: res.data.productName,
|
installContent: res.data.apps[0].installContent
|
}
|
}
|
if (res.data.sdks.length > 0) {
|
_this.installSdkPackage = {
|
appId: res.data.sdks[0].sdkId,
|
version: res.data.sdks[0].version,
|
productName: res.data.productName,
|
installContent: res.data.sdks[0].installContent
|
}
|
}
|
|
// this.$confirm('', '算法信息', {
|
// message: `<div class="installInfo">
|
// <div><span>算法名称：</span><span>${file.filename}</span></div>
|
// <div><span>安装版本：</span><span></span></div>
|
// <div><span>更新内容：</span><span></span></div>
|
// <p>确定安装此算法？</p>
|
// </div>`,
|
// confirmButtonText: '安装',
|
// cancelButtonText: '取消',
|
// dangerouslyUseHTMLString: true,
|
// type: ''
|
// }).then(() => {
|
// this.isInstall = true;
|
// //安装
|
// installSdk(file).then(res => {
|
// debugger
|
// if (res.success) {
|
// this.isInstall = false;
|
// //this.$refs['progressBar'].style.width = 100%
|
// //this.installPercentage = 100%
|
// this.$message({
|
// type: 'success',
|
// message: '安装成功,将跳转至我的算法中查看'
|
// });
|
// setTimeout(() => {
|
// this.findAllSdk();
|
// this.activeName = 'myAlgorithm';
|
// }, 3000)
|
// }
|
|
// }).catch(e => {
|
// console.log(e)
|
// this.isInstall = false;
|
// this.$message({
|
// type: 'error',
|
// message: e.data
|
// });
|
// })
|
// }).catch(() => {
|
// console.log('取消安装');
|
|
// })
|
}
|
}).catch(e => {
|
this.$message({
|
type: 'error',
|
message: e.data
|
});
|
})
|
// this.$msgbox({
|
// title: '算法信息',
|
// message: h('div', null, [
|
// h('span', null, '算法名称： '),
|
// h('i', { style: 'color: teal' }, file.filename)
|
// ]),
|
// showCancelButton: true,
|
// confirmButtonText: '确定',
|
// cancelButtonText: '取消',
|
// beforeClose: (action, instance, done) => {
|
// if (action === 'confirm') {
|
// instance.confirmButtonLoading = true;
|
// instance.confirmButtonText = '执行中...';
|
// setTimeout(() => {
|
// done();
|
// setTimeout(() => {
|
// instance.confirmButtonLoading = false;
|
// }, 300);
|
// }, 3000);
|
// } else {
|
// done();
|
// }
|
// }
|
// }).then(action => {
|
// this.$message({
|
// type: 'info',
|
// message: 'action: ' + action
|
// });
|
// });
|
|
|
|
},
|
|
onFileAdded (f) {
|
;
|
this.patchUpdateStatus = "";
|
},
|
// 校验输入的是否是数字
|
valiNum (value) {
|
if (value) {
|
let re = /[^\-?\d.]*$/;
|
if (!re.test(value)) {
|
// this.$toast({
|
// type: "warning",
|
// message: "请输入数字！"
|
// });
|
this.$notify({
|
title: "提示",
|
message: "请输入数字！",
|
type: "warning"
|
});
|
}
|
}
|
},
|
// 左边拖动模块得拖动结束后的触发函数
|
endLeft (env) {
|
this.dragging = false;
|
let taskId = env.to.id;
|
let sdkId = this.TaskMange.list1[env.oldIndex].id;
|
if (!taskId.length || !sdkId.length) {
|
return;
|
}
|
// 获取到该任务所在的元素
|
let task = this.TaskMange.list2.find(i => {
|
return i.id === taskId;
|
});
|
let arr = task.child.filter(i => {
|
return i.id === sdkId;
|
});
|
// window.console.log(task, "拖进来的任务信息", sdkId, arr);
|
if (arr && arr.length >= 2) {
|
// this.$toast({
|
// type: "warning",
|
// message: "该算法已存在！"
|
// });
|
this.$notify({
|
title: "提示",
|
message: "该算法已存在！",
|
type: "warning"
|
});
|
task.child.splice(env.newIndex, 1);
|
return true;
|
}
|
let list = task.child.map((i, index) => {
|
let obj = {};
|
obj.sdkId = i.id;
|
obj.sort = index + 1;
|
return obj;
|
});
|
let json = {
|
taskId: taskId,
|
sdks: list
|
};
|
this.addTaskSdk(json);
|
},
|
// 右边拖动模块开始拖动触发函数
|
startRight (env) {
|
this.$nextTick(() => {
|
this.dragging = true;
|
});
|
// window.window.console.log(env, "right start");
|
},
|
// 右边拖动模块拖动结束触发函数
|
endRight (env) {
|
// window.window.console.log(env, "right end");
|
},
|
clickSet (data) {
|
if (data.isSetting) {
|
data.isSetting = false;
|
} else {
|
data.isSetting = true;
|
}
|
},
|
clickDel (data, Index) {
|
this.$confirm("提示：删除后，此任务在摄像机中的应用失效，是否删除？", {
|
center: true,
|
showConfirmButton: true,
|
showCancelButton: true,
|
confirmButtonClass: "comfirm-class-sure",
|
cancelButtonClass: "comfirm-class-cancle"
|
})
|
.then(() => {
|
this.deleteTask(data);
|
})
|
.catch(err => { });
|
},
|
clickSetAlgo (row, data) {
|
// window.console.log(row, data, "编辑任务中某一个算法");
|
if (row.isShowSetAlgo && data.id === this.TaskMange.currentAlgoId) {
|
row.isShowSetAlgo = false;
|
data.isSelect = false;
|
return false;
|
}
|
if (data.id !== this.TaskMange.currentAlgoId) {
|
let isEdit = false;
|
if (this.argsList && this.argsList.length !== 0) {
|
this.TaskMange.argsList.map((i, index) => {
|
if (i.value2 !== this.argsList[index].value2) {
|
isEdit = true;
|
}
|
if (i.value3 !== this.argsList[index].value3) {
|
isEdit = true;
|
}
|
});
|
}
|
if (isEdit) {
|
this.$notify({
|
title: "提示",
|
message: "请先保存未保存的配置！",
|
type: "warning"
|
});
|
return false;
|
} else {
|
let task = this.TaskMange.list2.find(element => {
|
return element.isShowSetAlgo;
|
});
|
// console.log(task, '是否有已经打开编辑的')
|
if (task !== undefined) {
|
this.$set(task, "isShowSetAlgo", false);
|
task.child.map(i => {
|
this.$set(i, "isSelect", false);
|
});
|
}
|
}
|
}
|
this.TaskMange.currentAlgoId = data.id;
|
this.TaskMange.currentTaskId = row.id;
|
let task = this.TaskMange.list2.find(element => {
|
return element.isShowSetAlgo;
|
});
|
if (task === undefined) {
|
this.getSdkArgs(data).then(() => {
|
this.getRulesByTaskSdk(row.id, data.id);
|
});
|
if (row.isShowSetAlgo) {
|
row.isShowSetAlgo = false;
|
} else {
|
row.isShowSetAlgo = true;
|
data.isSelect = true;
|
}
|
} else {
|
// this.$toast({
|
// type: "warning",
|
// message: "请先保存未保存的配置！"
|
// });
|
// this.$notify({
|
// title: "提示",
|
// message: "请先保存未保存的配置！",
|
// type: "warning"
|
// });
|
}
|
},
|
async getRulesByTaskSdk (taskId, sdkId) {
|
let res = await getRulesByTaskSdk({
|
taskId: taskId,
|
sdkId: sdkId
|
});
|
if (res && res.success) {
|
if (res.data.rules && res.data.rules.length !== 0) {
|
this.TaskMange.argsList = res.data.rules.map((i, index) => {
|
let sdk = res.data.argList.find(j => {
|
return j.alias === i.sdk_arg_alias;
|
});
|
let obj = JSON.parse(JSON.stringify(this.TaskMange.baseObject));
|
obj.value1 = i.sdk_arg_alias ? i.sdk_arg_alias : "";
|
obj.value2 = i.operator ? i.operator : "";
|
obj.value3 = i.sdk_arg_value ? i.sdk_arg_value : "";
|
obj.unit = sdk.unit ? sdk.unit : "";
|
obj.id = i.Id ? i.Id : "";
|
obj.algoId = sdkId;
|
return obj;
|
});
|
} else {
|
this.TaskMange.argsList = res.data.argList.map(i => {
|
let obj = JSON.parse(JSON.stringify(this.TaskMange.baseObject));
|
obj.value1 = i.alias ? i.alias : "";
|
obj.value2 = i.default_operator ? i.default_operator : "";
|
obj.value3 = i.default_value ? i.default_value : "";
|
obj.unit = i.unit ? i.unit : "";
|
obj.id = "";
|
obj.algoId = sdkId;
|
return obj;
|
});
|
}
|
// window.console.log(res, '查找算法规则', this.argsList)
|
this.argsList = JSON.parse(JSON.stringify(this.TaskMange.argsList));
|
}
|
},
|
async findAllSdk () {
|
let res = await findAllSdk();
|
if (res && res.success) {
|
this.TaskMange.list1 = res.data.map((i, index) => {
|
this.$set(i, "isEdit", false);
|
//mock 未安装/待升级
|
// if (index == 1 || index == 2) {
|
// this.$set(i, "isUpgrade", true);
|
// }
|
// if (index == 3 || index == 4) {
|
// this.$set(i, "installed", false);
|
// }
|
//mock end
|
return i;
|
});
|
}
|
},
|
addTask () {
|
let obj = {
|
id: "",
|
name: "任务" + this.TaskMange.list2.length,
|
child: [],
|
isSetting: false,
|
isShowSetAlgo: false
|
};
|
// window.console.log(this.TaskMange.list2, "addTask");
|
this.TaskMange.list2.push(obj);
|
this.addTaskAsync(obj.name);
|
this.$nextTick(() => {
|
let taskArea = document.getElementById("taskArea");
|
taskArea.scrollTop = taskArea.scrollHeight;
|
});
|
},
|
async findAll () {
|
let res = await findAll();
|
if (res && res.success) {
|
if (res.data && res.data.length !== 0) {
|
let list = res.data.map(i => {
|
let obj = {};
|
obj.id = i.task.taskid;
|
obj.name = i.task.taskname;
|
obj.enable = i.task.enable;
|
obj.is_alarm = i.task.is_alarm;
|
obj.child = [];
|
if (i.sdks && i.sdks.length !== 0) {
|
obj.child = i.sdks.map(j => {
|
let t = {};
|
t.id = j.id;
|
t.ipc_id = j.ipc_id;
|
if (i.sdks.length == 1) {
|
t.sdk_name = i.task.taskname;
|
// console.log("单个sdk算法：",t.sdk_name)
|
} else {
|
t.sdk_name = j.sdk_name;
|
// console.log("多个sdk算法：",t.sdk_name)
|
}
|
t.icon = j.icon;
|
t.enable = j.enable;
|
t.isSelect = false;
|
return t;
|
});
|
}
|
obj.isSetting = false;
|
obj.isShowSetAlgo = false;
|
return obj;
|
});
|
this.TaskMange.list2 = list;
|
}
|
}
|
},
|
clickDelSdk (task, sdk) {
|
this.$confirm(
|
"提示：删除后，此算法在本任务中移除，同时在摄像机中的应用失效，是否删除？",
|
{
|
center: true,
|
showConfirmButton: true,
|
showCancelButton: true,
|
confirmButtonClass: "comfirm-class-sure",
|
cancelButtonClass: "comfirm-class-cancle"
|
}
|
)
|
.then(() => {
|
this.delTaskSdk(task, sdk);
|
})
|
.catch(err => { });
|
},
|
selectChange (event, type, data) {
|
if (type === "options1") {
|
// window.window.console.log(type, data, "选择下拉框");
|
data.options1.map(i => {
|
if (i.value === data.value1) {
|
this.$set(data, "unit", i.unit ? i.unit : "");
|
}
|
});
|
}
|
},
|
// 删除任务算法
|
async delTaskSdk (task, sdk) {
|
let json = {
|
taskId: task.id,
|
sdkId: sdk.id
|
};
|
let res = await delTaskSdk(json);
|
if (res && res.success) {
|
// this.$toast({
|
// type: "success",
|
// message: "删除任务算法成功!"
|
// });
|
this.$notify({
|
title: "成功",
|
message: "删除任务算法成功!",
|
type: "success"
|
});
|
this.findAll();
|
}
|
},
|
// 删除任务
|
async deleteTask (data, index) {
|
// window.console.log(data, "deleteTask");
|
let res = await deleteTask({ taskId: data.id });
|
// this.$toast({
|
// type: res.success ? "success" : "error",
|
// message: res.msg
|
// });
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error"
|
});
|
if (data.id && res.success) {
|
this.findAll();
|
}
|
},
|
// 更新任务状态
|
async updateTaskStatus (data) {
|
// window.console.log(data, '更新任务状态')
|
let json = {
|
taskId: data.id,
|
enable: data.enable
|
};
|
let res = await updateTaskStatus(json);
|
// this.$toast({
|
// type: res.success ? "success" : "error",
|
// message: res.msg
|
// });
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error"
|
});
|
},
|
// 更新任务名称
|
async updateTaskName (data) {
|
let json = {
|
taskId: data.id,
|
taskName: data.name
|
};
|
let res = await updateTaskName(json);
|
// this.$toast({
|
// type: res.success ? "success" : "error",
|
// message: res.msg
|
// });
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error"
|
});
|
if (res && res.success) {
|
this.$set(data, "isSetting", false);
|
}
|
},
|
// 获取底库数据
|
async getBaseList () {
|
// let res = await getTagList();
|
// if (res && res.success) {
|
// let filter = res.data.filter(i => {
|
// return i.status === 0;
|
// });
|
// let list = filter.map(i => {
|
// let obj = {};
|
// obj.id = i.key;
|
// obj.name = i.title;
|
// obj.value = i.value;
|
// return obj;
|
// });
|
// list.unshift({
|
// id: "",
|
// name: "全部底库",
|
// value: ""
|
// })
|
|
// // this.TaskMange.baseObject.options3 = [...all, ...list];
|
// this.TaskMange.baseObject.options3 = [...list];
|
// }
|
|
this.TaskMange.baseObject.options3 = [
|
{ id: true, name: true, value: true },
|
{ id: false, name: false, value: false }
|
];
|
},
|
// 获取算法参数
|
async getSdkArgs (data) {
|
let res = await getSdkArgs({
|
sdkId: data.id,
|
scope: "TASKRULE"
|
});
|
if (res && res.success) {
|
// window.console.log(res, "查询算法参数");
|
let list = res.data.map(i => {
|
let obj = {};
|
obj.name = i.name;
|
obj.id = i.alias;
|
obj.value = i.alias;
|
obj.unit = i.unit;
|
obj.must = i.must;
|
obj.range = i.range;
|
obj.sort = i.sort;
|
return obj;
|
});
|
this.TaskMange.baseObject.options1 = [...list];
|
}
|
},
|
// 查询字典
|
async findByType () {
|
let res = await findByType();
|
if (res && res.success) {
|
let list = res.data.RULECOMPUTEBETWEEN.map(i => {
|
let obj = {};
|
obj.name = i.name;
|
obj.value = i.value;
|
return obj;
|
});
|
this.TaskMange.baseObject.options2 = [...list];
|
}
|
},
|
// 算法配置，新建
|
add () {
|
this.TaskMange.argsList.push(
|
JSON.parse(JSON.stringify(this.TaskMange.baseObject))
|
);
|
},
|
// 算法配置 删除
|
delRule (index) {
|
this.TaskMange.argsList.splice(index, 1);
|
},
|
// 算法参数保存
|
async save () {
|
let list = this.TaskMange.argsList.map(i => {
|
let obj = {};
|
obj.id = i.id;
|
obj.operator = i.value2;
|
obj.sdk_arg_alias = i.value1;
|
obj.sdk_arg_value = i.value3;
|
return obj;
|
});
|
let json = {
|
rules: list,
|
sdkId: this.TaskMange.currentAlgoId,
|
taskId: this.TaskMange.currentTaskId
|
};
|
let res = await saveTaskSdkRule(json);
|
this.$notify({
|
title: "提示",
|
type: res.success ? "success" : "error",
|
message: res.msg
|
});
|
if (res && res.success) {
|
let task = this.TaskMange.list2.find(i => {
|
return i.id === this.TaskMange.currentTaskId;
|
});
|
if (task) {
|
this.$set(task, "isShowSetAlgo", false);
|
this.TaskMange.argsList = [];
|
task.child.map(i => {
|
this.$set(i, "isSelect", false);
|
});
|
}
|
}
|
},
|
getDefault () {
|
this.deleteTaskSdkRule(
|
this.TaskMange.currentTaskId,
|
this.TaskMange.currentAlgoId
|
).then(() => {
|
this.getRulesByTaskSdk(
|
this.TaskMange.currentTaskId,
|
this.TaskMange.currentAlgoId
|
);
|
});
|
},
|
async deleteTaskSdkRule (taskId, sdkId) {
|
let json = {
|
taskId: taskId,
|
sdkId: sdkId
|
};
|
let res = await deleteTaskSdkRule(json);
|
// this.$toast({
|
// type: res.success ? "success" : "error",
|
// message: res.msg
|
// });
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error"
|
});
|
if (res && res.success) {
|
// window.console.log(res, "恢复默认值");
|
}
|
},
|
// 给任务添加算法
|
async addTaskSdk (data) {
|
let res = await addTaskSdk(data);
|
if (res && res.success) {
|
// window.console.log(res, 'res')
|
this.findAll();
|
}
|
},
|
// 新添加任务
|
async addTaskAsync (name) {
|
let res = await addTask({ taskname: name });
|
// this.$toast({
|
// type: res.success ? "success" : "error",
|
// message: res.msg
|
// });
|
// window.console.log(res, "addTaskAsync");
|
this.$notify({
|
title: res.success ? "成功" : "失败",
|
message: res.msg,
|
type: res.success ? "success" : "error"
|
});
|
if (res && res.success) {
|
this.findAll();
|
}
|
},
|
cancle (row) {
|
if (row.isShowSetAlgo) {
|
row.isShowSetAlgo = false;
|
}
|
this.TaskMange.argsList = [];
|
this.TaskMange.currentAlgoId = "";
|
row.child.map(i => {
|
this.$set(i, "isSelect", false);
|
});
|
},
|
cancleTask (row) {
|
if (row.isSetting) {
|
row.isSetting = false;
|
}
|
},
|
commandAlgo (command, row, item) {
|
if (command === 1) {
|
// console.log('设置算法')
|
this.clickSetAlgo(row, item);
|
}
|
if (command === 2) {
|
// console.log('删除算法')
|
this.clickDelSdk(row, item);
|
}
|
},
|
commandTask (command, row) {
|
if (command === 1) {
|
//编辑任务
|
this.clickSet(row);
|
}
|
},
|
donwload (item) {
|
this.downloading = true;
|
this.downloadItem = item.id;
|
|
downloadSdk({ path: item.id })
|
.then(rsp => {
|
this.$notify({
|
type: "success",
|
message: "算法已安装"
|
});
|
this.downloading = false;
|
this.downloadItem = "";
|
this.findAllSdk();
|
})
|
.catch(err => {
|
this.$notify({
|
type: "warning",
|
message: err.data
|
});
|
|
this.downloading = false;
|
this.downloadItem = "";
|
});
|
},
|
commandAlgLib (item) {
|
this.$set(item, "isEdit", true);
|
},
|
inputBlur (item) {
|
// console.log(item, '修改名称')
|
this.$set(item, "isEdit", false);
|
},
|
|
cleanTemplateForm () {
|
this.appSceneForm.name = "";
|
this.appSceneForm.desc = "";
|
this.appSceneForm.rules = "";
|
this.appSceneForm.txt = "";
|
|
this.$refs.ruleEditor.cleanRule();
|
},
|
handleTabClick () {
|
|
},
|
handleCreateScene () {
|
this.sceneDialogVisible = true;
|
this.dialogTitle = '创建场景模板';
|
|
this.sceneSdks = this.TaskMange.list1.filter(sdk => {
|
return sdk.installed === true;
|
});
|
this.sceneRuleList = "";
|
|
this.$nextTick(() => {
|
this.cleanTemplateForm();
|
});
|
},
|
handleDialogClose () {
|
this.sceneDialogVisible = false;
|
},
|
handleEditScene (item) {
|
this.appSceneForm.name = item.name;
|
this.appSceneForm.desc = item.desc;
|
|
this.sceneSdks = item.sdks;
|
this.sceneRuleList = item.rules;
|
this.sceneDialogVisible = true;
|
this.dialogTitle = '编辑场景模板';
|
},
|
|
|
}
|
};
|
</script>
|
<style lang="scss">
|
.s-task-manage {
|
width: 100% !important;
|
height: 100%;
|
box-sizing: border-box;
|
text-align: left;
|
min-width: 1106px;
|
// background-color: #f2f6fc;
|
.s-video-manage-breadcrumb {
|
height: 5%;
|
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;
|
}
|
.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;
|
}
|
.task-manage {
|
height: 100%;
|
.installModel {
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.7);
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 100;
|
.progress-bar {
|
width: 70%;
|
height: 17px;
|
border-radius: 3px;
|
background-color: rgb(227, 229, 231);
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
background: url('/images/algo/green.gif');
|
overflow: hidden;
|
transform: translate(-50%, -50%);
|
.inner-bar {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 0;
|
height: 100%;
|
transition: width 3s;
|
background-color: #3d68e1;
|
}
|
}
|
}
|
.el-tab-pane {
|
height: auto !important;
|
}
|
.el-tabs--border-card > .el-tabs__content {
|
padding: 0 !important;
|
overflow: auto !important;
|
}
|
.el-tabs__content {
|
padding: 0 !important;
|
overflow: auto !important;
|
}
|
//height: calc(100% - 10px);
|
// .super {
|
// .right-box {
|
// width: 58% !important;
|
// }
|
// }
|
.edit-rules-box {
|
padding: 0 2px 0 13px;
|
}
|
.common {
|
.rigth-box {
|
width: 90% !important;
|
}
|
}
|
.super,
|
.common {
|
width: 100%;
|
height: 100%;
|
.title {
|
margin-bottom: 10px;
|
line-height: 30px;
|
font-family: PingFangSC-Medium;
|
font-size: 16px;
|
color: #222222;
|
}
|
.left-box {
|
// width: 41%;
|
height: 100%;
|
box-sizing: border-box;
|
// float: left;
|
.el-drawer__header {
|
border-bottom: 2px solid #eee;
|
padding-bottom: 10px;
|
font-size: 16px;
|
margin-bottom: 0px;
|
span {
|
outline: none !important;
|
}
|
}
|
.action-bar {
|
margin-bottom: 30px;
|
.el-input {
|
width: 100%;
|
}
|
}
|
.task-list {
|
background: #fdfdfd;
|
padding: 20px;
|
box-sizing: border-box;
|
|
.flex-list {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
.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;
|
}
|
}
|
}
|
}
|
}
|
.appScenarios-list {
|
display: flex;
|
flex-wrap: wrap;
|
.wrap-box {
|
width: 16.6%;
|
margin-bottom: 30px;
|
.inner {
|
width: 80%;
|
|
box-sizing: border-box;
|
position: relative;
|
font-size: 14px;
|
padding: 20px 0 50px;
|
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;
|
&:hover {
|
.mask {
|
display: block;
|
}
|
}
|
.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;
|
.el-button + .el-button {
|
margin-left: 0 !important;
|
}
|
.tool {
|
position: absolute;
|
top: 49%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
i {
|
font-size: 50px;
|
}
|
i:nth-of-type(1) {
|
margin-right: 30px;
|
}
|
i:nth-of-type(2) {
|
color: red;
|
}
|
}
|
}
|
.scenario-icon {
|
display: flex;
|
width: 100%;
|
height: 100%;
|
margin: auto;
|
justify-content: center;
|
align-content: center;
|
align-items: center;
|
.single,
|
.double,
|
.third,
|
.four {
|
width: 80%;
|
padding-top: 80%;
|
position: relative;
|
margin: auto;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: center;
|
.svg-wrap {
|
width: 50%;
|
position: absolute;
|
height: 0;
|
padding-top: 50%;
|
text-align: center;
|
box-shadow: 0 0 3px 2px rgb(247, 247, 247) inset;
|
svg {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.baseImg {
|
position: absolute !important;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
}
|
.single {
|
margin: auto;
|
.svg-wrap {
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
box-shadow: none;
|
}
|
}
|
.double {
|
.svg-wrap:nth-of-type(1) {
|
top: 50%;
|
transform: translateY(-50%);
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(2) {
|
top: 50%;
|
transform: translateY(-50%);
|
right: 0;
|
}
|
}
|
.third {
|
.svg-wrap:nth-of-type(1) {
|
top: 0;
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(2) {
|
top: 0;
|
right: 0;
|
}
|
.svg-wrap:nth-of-type(3) {
|
top: 50%;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
}
|
.four {
|
.svg-wrap:nth-of-type(1) {
|
top: 0;
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(2) {
|
top: 0;
|
right: 0;
|
}
|
.svg-wrap:nth-of-type(3) {
|
top: 50%;
|
left: 0;
|
}
|
.svg-wrap:nth-of-type(4) {
|
top: 50%;
|
right: 0;
|
}
|
}
|
}
|
.scenario-name {
|
width: 100%;
|
height: 36px;
|
line-height: 36px;
|
text-align: center;
|
position: absolute;
|
bottom: 10px;
|
left: 0;
|
}
|
}
|
}
|
}
|
.store-list,
|
.app-list {
|
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;
|
font-size: 14px;
|
padding-bottom: 10px;
|
transition: all 1s;
|
background: #ffffff;
|
border: 1px solid #e2e2e2;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
margin: auto;
|
.alg-icon {
|
position: relative;
|
width: 80%;
|
margin: auto;
|
padding-top: 80%;
|
svg {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
}
|
}
|
.alg-name {
|
height: 36px;
|
text-align: center;
|
line-height: 36px;
|
}
|
.mask {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.65);
|
backdrop-filter: blur(1px) brightness(100%);
|
text-align: center;
|
z-index: 1;
|
border-radius: 3px;
|
display: none;
|
svg {
|
position: absolute;
|
top: 49%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
z-index: 33;
|
}
|
}
|
&:hover {
|
.mask {
|
display: block;
|
}
|
}
|
}
|
}
|
}
|
.drawer-content {
|
font-family: 'PingFangSC-Regular';
|
.el-step__title.is-process {
|
border-color: #3d68e1 !important;
|
color: #3d68e1 !important;
|
font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif;
|
}
|
.el-step__head.is-process {
|
border-color: #3d68e1 !important;
|
color: #3d68e1 !important;
|
font-family: Tahoma, Helvetica, Arial, '\5B8B\4F53', sans-serif;
|
}
|
.el-input {
|
width: 100%;
|
margin-bottom: 30px;
|
}
|
.current-step {
|
margin: 40px 30px 30px;
|
}
|
.act-code {
|
padding: 0 30px;
|
p {
|
font-size: 15px;
|
margin-bottom: 16px;
|
}
|
}
|
.desc {
|
padding: 0 30px;
|
margin-bottom: 30px;
|
li {
|
border-bottom: 1px solid #eee;
|
height: 45px;
|
line-height: 45px;
|
font-size: 14px;
|
&:last-child {
|
border-bottom: none;
|
}
|
label {
|
display: inline-block;
|
width: 90px;
|
padding-left: 14px;
|
font-weight: bold;
|
}
|
}
|
}
|
.text-right {
|
padding-right: 30px;
|
text-align: right;
|
.tip {
|
color: #999;
|
line-height: 38px;
|
}
|
}
|
}
|
.tab-content {
|
padding: 30px 20px;
|
}
|
}
|
|
.right-box {
|
height: 100%;
|
padding: 10px 10px;
|
box-sizing: border-box;
|
float: left;
|
.task-manage-table {
|
height: calc(100% - 30px);
|
margin-top: 5px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
}
|
// .task-manage-table::-webkit-scrollbar {
|
// width: 0 !important ;
|
// }
|
}
|
.mask {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.65);
|
backdrop-filter: blur(1px) brightness(100%);
|
text-align: center;
|
z-index: 1;
|
border-radius: 3px;
|
display: none;
|
.info-onmask {
|
color: #8ecaff;
|
}
|
.mask-btn {
|
width: 100%;
|
display: flex;
|
}
|
i {
|
color: #fff;
|
position: relative;
|
top: 40%;
|
display: contents;
|
}
|
i:hover {
|
color: rgba(255, 255, 255, 0.685);
|
}
|
}
|
|
.text-css {
|
width: 100%;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
.move-hear {
|
margin: 10px 0 0 0;
|
font-size: 5rem;
|
}
|
.list-choose-item {
|
cursor: pointer;
|
position: relative;
|
font-size: 14px;
|
display: inline-block;
|
@media screen and(min-width: 1640px) {
|
margin: 30px 20px 20px 20px;
|
}
|
@media screen and(min-width: 1460px) and(max-width: 1640px) {
|
margin: 30px 20px 20px 10px;
|
}
|
@media screen and(max-width: 1460px) {
|
margin: 30px 10px 20px 10px;
|
}
|
min-width: 126px;
|
height: 120px;
|
transition: all 1s;
|
background: #fff;
|
border: 1px solid #e2e2e2;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
border-radius: 4px;
|
}
|
.list-choose-item:hover {
|
.mask {
|
display: block;
|
}
|
}
|
|
.alg-shadow {
|
-webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
|
-moz-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
|
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
|
}
|
.select-color {
|
margin-top: 16px;
|
text-align: center;
|
line-height: 28px;
|
// background-color: #3498DB;
|
}
|
.list-choose-item-left {
|
cursor: pointer;
|
position: relative;
|
font-size: 14px;
|
|
transition: all 1s;
|
background: #ffffff;
|
border-radius: 4px;
|
p {
|
display: none;
|
text-align: right;
|
width: 100%;
|
position: absolute;
|
right: 10px;
|
top: 5px;
|
}
|
.click-download {
|
position: absolute;
|
left: 80%;
|
top: 5%;
|
}
|
}
|
.list-choose-item-left:hover {
|
.mask {
|
display: flex;
|
align-items: flex-end;
|
flex-wrap: wrap;
|
justify-content: center;
|
top: 0;
|
.bot-btn {
|
flex: 1;
|
}
|
&.flex-center {
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
}
|
.list-choose-item-left-uninstal {
|
color: 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%;
|
}
|
}
|
.task-name {
|
text-align: center;
|
margin-top: 16px;
|
line-height: 28px;
|
font-family: PingFangSC-Regular;
|
font-size: 13px;
|
color: #222222;
|
text-align: center;
|
// background-color: #ecf5ff;
|
}
|
.unit-class {
|
margin-left: 10px;
|
text-align: center;
|
line-height: 38px;
|
}
|
.el-input {
|
position: relative;
|
font-size: 14px;
|
display: inline-block;
|
width: 80%;
|
}
|
.list-complete-item-handle {
|
height: 100%;
|
//padding-bottom: 10px;
|
text-align: center;
|
.svg-wrap {
|
//width: 80%;
|
width: 100%;
|
margin: auto;
|
padding-top: 80%;
|
padding-top: 100%;
|
position: relative;
|
box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
|
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;
|
border-color: #eaeaea;
|
font-family: PingFangSC-Medium;
|
font-size: 13px;
|
color: #222222;
|
margin-right: 12px;
|
}
|
.click-changeImg {
|
cursor: pointer;
|
display: none;
|
background: rgba(0, 0, 0, 0.35);
|
width: 74px;
|
line-height: 20px;
|
color: rgb(255, 255, 255);
|
font-size: 14px;
|
opacity: 1;
|
border-radius: 6px;
|
}
|
|
.task-name-google {
|
position: relative;
|
top: 30px;
|
width: 126px;
|
height: 120px;
|
border: 1px solid #fff;
|
background: #fff;
|
border-radius: 4px;
|
cursor: pointer;
|
.set-task {
|
display: none;
|
cursor: pointer;
|
}
|
|
.el-switch__core {
|
width: 27px !important;
|
height: 14px;
|
}
|
.el-switch__core:after {
|
width: 10px;
|
height: 10px;
|
}
|
.el-switch.is-checked .el-switch__core::after {
|
left: 100%;
|
margin-left: -11px;
|
}
|
}
|
.task-name-google:hover {
|
.mask {
|
display: block;
|
}
|
}
|
}
|
}
|
</style>
|
|
