<template>
|
<div class="AlgManage">
|
<!-- 左侧算法中心 -->
|
<div class="leftMenu">
|
<div class="title">算法中心</div>
|
|
<!-- 收费算法列表 -->
|
<div class="label">收费算法</div>
|
<div class="payList scroll">
|
<div class="algCard" v-for="(item, index) in payAlg" :key="index">
|
<img :src="item.logoUrl" alt="" draggable="false" />
|
<div class="name">{{ item.productName }}</div>
|
<span class="button pay" @click="toDetail(item.productName)"
|
>购买</span
|
>
|
</div>
|
</div>
|
|
<!-- 免费算法列表 -->
|
<div class="label freeLabel">
|
免费算法 <span class="des">从此处拖拽算法图标安装到设备</span>
|
</div>
|
<div class="freeList scroll">
|
<div
|
class="algCard"
|
v-for="(item, index) in freeAlg"
|
:key="index"
|
@dragend="dragAlg = null"
|
>
|
<img
|
:src="item.logoUrl"
|
alt=""
|
draggable="true"
|
@dragstart="dragStart(item)"
|
/>
|
<div class="name">{{ item.productName }}</div>
|
<span class="button detail" @click="toDetail(item.productName)"
|
>查看详情</span
|
>
|
</div>
|
</div>
|
</div>
|
|
<!-- 右侧算法管理 -->
|
<div class="rightList">
|
<div class="title">算法管理</div>
|
<div class="button update" @click="updateAll">全部更新</div>
|
|
<!-- 设备 -->
|
<div class="equipment" v-for="(item, index) in equipmentArr" :key="index">
|
<div class="name">{{ item.devName }}</div>
|
<!-- 算法列表 -->
|
<div class="algList">
|
<!-- 算法card -->
|
<Card
|
v-for="(alg, index) in item.sdkList"
|
:key="index"
|
:alg="alg"
|
:devId="item.devId"
|
@unInstall="item.sdkList.splice(index, 1)"
|
></Card>
|
<!-- 拖拽存放box -->
|
<div
|
class="dropBox"
|
v-if="dragAlg"
|
@dragover="dragover($event)"
|
@drop="drop(item.sdkList, item.devId)"
|
>
|
请拖动到此处
|
</div>
|
<!-- 空算法情况 -->
|
<div
|
class="empty"
|
v-if="item.sdkList && item.sdkList.length === 0 && !dragAlg"
|
>
|
<img src="/images/hashrate/sdkEmpty.png" alt="" />
|
<div class="des">
|
暂未安装算法，从左侧算法中心算法到此处，即可安装
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 配置提示 -->
|
<div class="settingBox" v-if="showSettingBox">
|
<div class="title">配置提示</div>
|
<div class="control">
|
<div class="label">启用算法仓管理</div>
|
<el-switch v-model="setting" active-color="#D4E3FA" :width="44">
|
</el-switch>
|
</div>
|
<div class="des">启用后算法管理页面配置生效，否则不生效</div>
|
<div class="btns">
|
<div class="confirm button" @click="closeSettingBox">确定</div>
|
</div>
|
</div>
|
|
<div class="setBtn iconfont" @click="showSettingBox = true">
|
 配置提示
|
</div>
|
|
<!-- 遮罩层 -->
|
<div class="mask" v-if="showSettingBox"></div>
|
</div>
|
</template>
|
|
<script>
|
import Card from "./components/AlgCard";
|
|
import {
|
getAllCenterProduct,
|
getSdkConfigInfo,
|
saveSdkConfig,
|
findAllSdk,
|
downloadOrUpgrade,
|
unInstallAll,
|
} from "@/api/algorithm";
|
export default {
|
components: {
|
Card,
|
},
|
created() {
|
this.getConfig();
|
this.getProduct();
|
this.getEquipment();
|
},
|
data() {
|
return {
|
showSettingBox: false,
|
setting: false,
|
payAlg: [],
|
freeAlg: [],
|
equipmentArr: [],
|
dragAlg: null,
|
};
|
},
|
methods: {
|
//获取算法管理设置
|
async getConfig() {
|
let user = JSON.parse(sessionStorage.getItem("userInfo"));
|
const res = await getSdkConfigInfo({
|
userId: user.id,
|
variable: "sdkManageConfig",
|
});
|
if (res && res.success) {
|
if (!res.data.value || res.data.value == "off") {
|
this.showSettingBox = true;
|
} else {
|
this.setting = res.data.value === "on" ? true : false;
|
}
|
}
|
},
|
|
//获取左侧产品列表
|
async getProduct() {
|
const res = await getAllCenterProduct({
|
page: 1,
|
size: 1000000,
|
inputText: "",
|
productType: 3,
|
publishStatus: 1,
|
});
|
|
if (res && res.success) {
|
res.data.list.forEach((item) => {
|
if (item.productName == "趴伏") {
|
console.log(item);
|
}
|
|
if (
|
item.logoUrl.indexOf("http://apps.smartai.com/httpImage/") === -1
|
) {
|
item.logoUrl = "/httpImage/" + item.logoUrl;
|
}
|
|
if (item.priceBase === 0) {
|
this.freeAlg.push(item);
|
} else {
|
this.payAlg.push(item);
|
}
|
});
|
}
|
},
|
|
//获取右侧设备列表
|
async getEquipment() {
|
const res = await findAllSdk();
|
if (res && res.success) {
|
this.equipmentArr = [];
|
res.data.forEach((item, index) => {
|
if (item.sdkList) {
|
this.equipmentArr.push(item);
|
}
|
});
|
}
|
},
|
//拖拽开始
|
dragStart(alg) {
|
this.dragAlg = alg;
|
console.log(this.dragAlg);
|
},
|
//阻止默认行为,允许存放拖拽
|
dragover(e) {
|
e.preventDefault();
|
},
|
async drop(algArr, devId) {
|
algArr.push({
|
iconBlob: this.dragAlg.logoUrl,
|
sdk_name: this.dragAlg.productName,
|
});
|
|
try {
|
const res = await downloadOrUpgrade({
|
nodeId: devId,
|
path: this.dragAlg.productBaseId,
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
|
inputText: this.dragAlg.productName,
|
});
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "操作成功,请稍后",
|
});
|
}
|
} catch (err) {
|
algArr.pop();
|
}
|
|
this.dragAlg = null;
|
},
|
async closeSettingBox() {
|
let user = JSON.parse(sessionStorage.getItem("userInfo"));
|
const res = await saveSdkConfig({
|
userId: user.id,
|
variable: "sdkManageConfig",
|
value: this.setting ? "on" : "off",
|
}).catch(() => {
|
this.$notify.error({
|
message: "配置失败",
|
});
|
});
|
if (res && res.success) {
|
this.$notify.success({
|
message: "配置成功",
|
});
|
if (this.setting) {
|
this.showSettingBox = false;
|
}
|
}
|
},
|
async updateAll() {
|
let devArr = [];
|
this.equipmentArr.forEach((dev) => {
|
let devObj = {};
|
let sdkIds = [];
|
devObj.devId = dev.devId;
|
dev.sdkList.forEach((sdk) => {
|
if (sdk.isUpgrade) {
|
sdkIds.push(sdk.id);
|
}
|
});
|
devObj.sdkIds = sdkIds;
|
devArr.push(devObj);
|
});
|
|
const res = await unInstallAll({
|
userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
|
devSdkIds: devArr,
|
});
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: res.msg,
|
});
|
}
|
},
|
toDetail(productName) {
|
this.$router.push({
|
path: "/productDetail",
|
query: {
|
name: productName,
|
},
|
});
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.AlgManage {
|
display: flex;
|
margin-bottom: 60px;
|
|
.setBtn {
|
position: absolute;
|
top: 161px;
|
right: 44px;
|
width: 112px;
|
height: 32px;
|
line-height: 32px;
|
border-radius: 3px;
|
border: 1px solid #0064ff;
|
color: #0064ff;
|
text-align: center;
|
cursor: pointer;
|
}
|
|
.leftMenu {
|
align-self: stretch;
|
box-sizing: border-box;
|
padding: 20px;
|
margin-right: 24px;
|
width: 450px;
|
background-color: #fff;
|
|
.title {
|
margin-bottom: 30px;
|
padding-left: 10px;
|
height: 20px;
|
line-height: 20px;
|
border-left: 4px solid #0065ff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.label {
|
margin-bottom: 20px;
|
font-size: 14px;
|
font-weight: 700;
|
|
.des {
|
margin-left: 10px;
|
font-size: 12px;
|
color: #0065ff;
|
}
|
}
|
|
.freeLabel {
|
margin-top: 20px;
|
}
|
|
.payList,
|
.freeList {
|
max-height: 320px;
|
overflow: auto;
|
display: flex;
|
flex-wrap: wrap;
|
|
.algCard {
|
box-sizing: border-box;
|
margin-right: 10px;
|
margin-bottom: 16px;
|
width: 90px;
|
height: 144px;
|
border: 1px solid #e9ebee;
|
border-radius: 5px;
|
text-align: center;
|
|
&:nth-child(4n) {
|
margin-right: 0px;
|
}
|
|
&:hover {
|
box-shadow: 0px 2px 16px rgba(0, 43, 106, 0.25);
|
}
|
|
img {
|
margin-top: 10px;
|
margin-bottom: 4px;
|
width: 56px;
|
height: 56px;
|
cursor: pointer;
|
}
|
|
.name {
|
height: 32px;
|
font-size: 12px;
|
}
|
|
.pay {
|
display: inline-block;
|
padding: 3px 8px;
|
border: 1px solid #ff6a00;
|
border-radius: 5px;
|
font-size: 12px;
|
color: #ff6a00;
|
}
|
|
.detail {
|
display: inline-block;
|
padding: 3px 8px;
|
border: 1px solid #0065ff;
|
border-radius: 5px;
|
font-size: 12px;
|
color: #0065ff;
|
}
|
}
|
}
|
}
|
|
.rightList {
|
position: relative;
|
box-sizing: border-box;
|
padding: 20px;
|
flex: 1;
|
background-color: #fff;
|
|
.title {
|
margin-bottom: 30px;
|
padding-left: 10px;
|
height: 20px;
|
line-height: 20px;
|
border-left: 4px solid #0065ff;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.update {
|
position: absolute;
|
top: 20px;
|
right: 20px;
|
width: 140px;
|
height: 40px;
|
background: #0065ff;
|
color: #fff;
|
font-size: 14px;
|
font-weight: 700;
|
line-height: 40px;
|
text-align: center;
|
}
|
|
.name {
|
margin-bottom: 20px;
|
font-size: 14px;
|
font-weight: 700;
|
}
|
|
.algList {
|
display: flex;
|
flex-wrap: wrap;
|
|
.dropBox {
|
margin-bottom: 20px;
|
width: 142px;
|
height: 142px;
|
background: rgba(240, 245, 250, 0.5);
|
border: 1px dashed #c0c5cc;
|
border-radius: 5px;
|
line-height: 142px;
|
font-size: 14px;
|
font-weight: 400;
|
text-align: center;
|
}
|
|
.empty {
|
width: 100%;
|
color: #666;
|
font-weight: 700;
|
text-align: center;
|
img {
|
margin-top: 20px;
|
margin-bottom: 10px;
|
width: 250px;
|
height: 150px;
|
}
|
}
|
}
|
}
|
|
.settingBox {
|
box-sizing: border-box;
|
position: fixed;
|
z-index: 2;
|
top: 50%;
|
left: 50%;
|
margin-top: -108px;
|
margin-left: -180px;
|
width: 360px;
|
height: 216px;
|
background-color: #fff;
|
|
.title {
|
padding-left: 20px;
|
height: 62px;
|
font-size: 16px;
|
font-weight: 700;
|
line-height: 62px;
|
border-bottom: 1px solid #e9ebee;
|
}
|
|
.control {
|
margin-top: 20px;
|
margin-left: 20px;
|
display: flex;
|
|
.label {
|
margin-right: 20px;
|
margin-bottom: 12px;
|
font-size: 14px;
|
color: #666;
|
}
|
|
.el-switch ::v-deep {
|
height: 24px;
|
.el-switch__core {
|
height: 24px;
|
border-radius: 16px;
|
}
|
.el-switch__core::after {
|
width: 20px;
|
height: 20px;
|
background-color: #999999;
|
}
|
}
|
.el-switch.is-checked ::v-deep {
|
.el-switch__core {
|
background-color: #d4e3fa;
|
border-color: #d4e3fa;
|
}
|
.el-switch__core::after {
|
margin-left: -22px;
|
background-color: #0065ff;
|
}
|
}
|
}
|
|
.des {
|
margin-top: 10px;
|
margin-left: 20px;
|
font-size: 12px;
|
color: #0065ff;
|
}
|
|
.btns {
|
position: absolute;
|
display: flex;
|
bottom: 20px;
|
right: 20px;
|
text-align: center;
|
line-height: 32px;
|
|
.confirm {
|
width: 60px;
|
height: 32px;
|
border: 1px solid #0065ff;
|
background-color: #0065ff;
|
color: #fff;
|
border-radius: 3px;
|
}
|
}
|
|
.close {
|
top: 20px;
|
right: 20px;
|
position: absolute;
|
color: #666;
|
font-size: 12px;
|
cursor: pointer;
|
}
|
}
|
|
.mask {
|
position: absolute;
|
top: 62px;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #000000;
|
opacity: 0.2;
|
z-index: 1;
|
}
|
}
|
</style>
|
