| | |
| | | |
| | | <!-- 收费算法列表 --> |
| | | <div class="label">收费算法</div> |
| | | <div class="payList"> |
| | | <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> |
| | |
| | | </div> |
| | | |
| | | <!-- 免费算法列表 --> |
| | | <div class="label"> |
| | | <div class="label freeLabel"> |
| | | 免费算法 <span class="des">从此处拖拽算法图标安装到设备</span> |
| | | </div> |
| | | <div class="freeList"> |
| | |
| | | <!-- 右侧算法管理 --> |
| | | <div class="rightList"> |
| | | <div class="title">算法管理</div> |
| | | <div class="button update">全部更新</div> |
| | | <div class="button update" @click="updateAll">全部更新</div> |
| | | |
| | | <!-- 设备 --> |
| | | <div class="equipment" v-for="(item, index) in equipmentArr" :key="index"> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="name">{{ item.devName }}</div> |
| | | <!-- 算法列表 --> |
| | | <div class="algList"> |
| | | <!-- 算法card --> |
| | | <Card |
| | | v-for="(alg, index) in item.algs" |
| | | 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.algs)" |
| | | @drop="drop(item.sdkList, item.devId)" |
| | | > |
| | | 请拖动到此处 |
| | | </div> |
| | | <!-- 空算法情况 --> |
| | | <div class="empty" v-if="item.algs.length === 0 && !dragAlg"> |
| | | <div |
| | | class="empty" |
| | | v-if="item.sdkList && item.sdkList.length === 0 && !dragAlg" |
| | | > |
| | | <img src="/images/hashrate/算法管理空页面.png" alt="" /> |
| | | <div class="des"> |
| | | 暂未安装算法,从左侧算法中心拖到算法到此处,即可安装 |
| | |
| | | |
| | | <script> |
| | | import Card from "./components/AlgCard"; |
| | | |
| | | import { |
| | | getAllCenterProduct, |
| | | getSdkConfigInfo, |
| | | saveSdkConfig, |
| | | findAllSdk, |
| | | downloadOrUpgrade, |
| | | unInstall, |
| | | unInstallAll, |
| | | } from "@/api/algorithm"; |
| | | export default { |
| | | components: { |
| | |
| | | setting: false, |
| | | payAlg: [], |
| | | freeAlg: [], |
| | | equipmentArr: [ |
| | | { |
| | | name: "设备1", |
| | | algs: [ |
| | | { |
| | | img: "/images/index/1仰卧检测.png", |
| | | name: "仰卧检测", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/11滞留.png", |
| | | name: "滞留", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/15戴口罩.png", |
| | | name: "戴口罩", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.2", |
| | | hasNewVersion: true, |
| | | }, |
| | | { |
| | | img: "/images/index/1仰卧检测.png", |
| | | name: "仰卧检测", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/11滞留.png", |
| | | name: "滞留", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/15戴口罩.png", |
| | | name: "戴口罩", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.2", |
| | | hasNewVersion: true, |
| | | }, |
| | | { |
| | | img: "/images/index/1仰卧检测.png", |
| | | name: "仰卧检测", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/11滞留.png", |
| | | name: "滞留", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/15戴口罩.png", |
| | | name: "戴口罩", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.2", |
| | | hasNewVersion: true, |
| | | }, |
| | | { |
| | | img: "/images/index/1仰卧检测.png", |
| | | name: "仰卧检测", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/11滞留.png", |
| | | name: "滞留", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/15戴口罩.png", |
| | | name: "戴口罩", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.2", |
| | | hasNewVersion: true, |
| | | }, |
| | | { |
| | | img: "/images/index/1仰卧检测.png", |
| | | name: "仰卧检测", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/11滞留.png", |
| | | name: "滞留", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/15戴口罩.png", |
| | | name: "戴口罩", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.2", |
| | | hasNewVersion: true, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | name: "设备2", |
| | | algs: [ |
| | | { |
| | | img: "/images/index/1仰卧检测.png", |
| | | name: "仰卧检测", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/11滞留.png", |
| | | name: "滞留", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | }, |
| | | { |
| | | img: "/images/index/15戴口罩.png", |
| | | name: "戴口罩", |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.2", |
| | | hasNewVersion: true, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | name: "设备3", |
| | | algs: [], |
| | | }, |
| | | ], |
| | | equipmentArr: [], |
| | | dragAlg: null, |
| | | }; |
| | | }, |
| | |
| | | variable: "sdkManageConfig", |
| | | }); |
| | | if (res && res.success) { |
| | | if (res.data.value === "") { |
| | | 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: 100000, |
| | | size: 1000000, |
| | | inputText: "", |
| | | archType: "", |
| | | gpuType: "", |
| | | productType: 3, |
| | | publishStatus: 1, |
| | | productLabelId: "d0aabaee-8edd-492d-8f43-6b0e0bb6e2dd", |
| | | }); |
| | | |
| | | if (res && res.success) { |
| | | res.data.list.forEach((item) => { |
| | | if (item.productName == "趴伏") { |
| | | console.log(item); |
| | | } |
| | | |
| | | item.logoUrl = "/httpImage/" + item.logoUrl; |
| | | if (item.priceBase === 0) { |
| | | this.freeAlg.push(item); |
| | |
| | | //获取右侧设备列表 |
| | | async getEquipment() { |
| | | const res = await findAllSdk(); |
| | | if (res && res.success) { |
| | | this.equipmentArr = res.data; |
| | | } |
| | | }, |
| | | //拖拽开始 |
| | | dragStart(alg) { |
| | |
| | | dragover(e) { |
| | | e.preventDefault(); |
| | | }, |
| | | drop(algArr) { |
| | | async drop(algArr, devId) { |
| | | algArr.push({ |
| | | img: this.dragAlg.img, |
| | | name: this.dragAlg.name, |
| | | version: "v1.0.0", |
| | | newVersion: "v1.0.0", |
| | | hasNewVersion: false, |
| | | iconBlob: this.dragAlg.logoUrl, |
| | | sdk_name: this.dragAlg.productName, |
| | | }); |
| | | |
| | | const res = await downloadOrUpgrade({ |
| | | nodeId: devId, |
| | | path: this.dragAlg.productBaseId, |
| | | userId: JSON.parse(sessionStorage.getItem("userInfo")).id, |
| | | }); |
| | | if (res && res.success) { |
| | | this.$notify({ |
| | | type: "success", |
| | | message: "操作成功,请稍后", |
| | | }); |
| | | } |
| | | |
| | | this.dragAlg = null; |
| | | }, |
| | | async closeSettingBox() { |
| | |
| | | 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: "操作成功", |
| | | }); |
| | | } |
| | | }, |
| | | }, |
| | |
| | | } |
| | | } |
| | | |
| | | .freeLabel { |
| | | margin-top: 20px; |
| | | } |
| | | |
| | | .payList, |
| | | .freeList { |
| | | max-height: 320px; |
| | | overflow: auto; |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | |
| | |
| | | box-sizing: border-box; |
| | | margin-right: 10px; |
| | | margin-bottom: 16px; |
| | | width: 95px; |
| | | width: 90px; |
| | | height: 144px; |
| | | border: 1px solid #e9ebee; |
| | | border-radius: 5px; |
| | |
| | | |
| | | .mask { |
| | | position: absolute; |
| | | top: 0; |
| | | top: 62px; |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |