修复算法配置的字段内容

zhangzengfei

2022-08-23 e37e45cfe1123928dba5d9c5a427b0ee497b7ad6

 src/views/hashrate/AlgManage/index.vue

@@ -6,19 +6,19 @@

      <!-- 收费算法列表 -->
      <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.img" alt="" draggable="false" />
          <div class="name">{{ item.name }}</div>
          <span class="button pay">购买</span>
          <img :src="item.logoUrl" alt="" draggable="false" />
          <div class="name">{{ item.productName }}</div>
          <span class="button pay" @click="toDetail(item.id)">购买</span>
        </div>
      </div>

      <!-- 免费算法列表 -->
      <div class="label">
        免费算法 <span class="des">从此处拖拽算法图标安装到设备</span>
      <div class="label freeLabel">
        本地算法 <span class="des">从此处拖拽算法图标安装到设备</span>
      </div>
      <div class="freeList">
      <div class="freeList scroll">
        <div
          class="algCard"
          v-for="(item, index) in freeAlg"
@@ -26,13 +26,13 @@
          @dragend="dragAlg = null"
        >
          <img
            :src="item.img"
            :src="item.logoUrl"
            alt=""
            draggable="true"
            @dragstart="dragStart(item)"
          />
          <div class="name">{{ item.name }}</div>
          <span class="button detail">查看详情</span>
          <div class="name">{{ item.productName }}</div>
          <span class="button detail" @click="toDetail(item.id)">查看详情</span>
        </div>
      </div>
    </div>
@@ -40,33 +40,38 @@
    <!-- 右侧算法管理 -->
    <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.sdkList1"
            :key="index"
            :alg="alg"
            :devId="item.devId"
            @unInstall="item.sdkList1.splice(index, 1)"
          ></Card>
          <!-- 拖拽存放box -->
          <div
            class="dropBox"
            v-if="dragAlg"
            @dragover="dragover($event)"
            @drop="drop(item.algs)"
            @drop="drop(item.sdkList1, item.devId)"
          >
            请拖动到此处
          </div>
          <!-- 空算法情况 -->
          <div class="empty" v-if="item.algs.length === 0 && !dragAlg">
            <img src="/images/hashrate/算法管理空页面.png" alt="" />
          <div
            class="empty"
            v-if="item.sdkList1 && item.sdkList1.length === 0 && !dragAlg"
          >
            <img src="/images/hashrate/sdkEmpty.png" alt="" />
            <div class="des">
              暂未安装算法，从左侧算法中心拖到算法到此处，即可安装
              暂未安装算法，从左侧算法中心算法到此处，即可安装
            </div>
          </div>
        </div>
@@ -78,16 +83,19 @@
      <div class="title">配置提示</div>
      <div class="control">
        <div class="label">启用算法仓管理</div>
        <el-switch v-model="setting" active-color="#D4E3FA" :width="56">
        <el-switch v-model="setting" active-color="#D4E3FA" :width="44">
        </el-switch>
      </div>
      <div class="des">启用后算法管理页面配置生效，否则不生效</div>
      <div class="btns">
        <div class="cancel button" @click="closeSettingBox">取消</div>
        <div class="confirm button" @click="closeSettingBox">确定</div>
      </div>
      <span class="iconfont close" @click="closeSettingBox">&#xe60f;</span>
    </div>

    <div class="setBtn iconfont" @click="showSettingBox = true">
      &#xe652; 配置提示
    </div>

    <!-- 遮罩层 -->
    <div class="mask" v-if="showSettingBox"></div>
  </div>
@@ -95,208 +103,102 @@

<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: true,
      setting: true,
      payAlg: [
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
      ],
      freeAlg: [
        {
          img: "/images/index/1仰卧检测.png",
          name: "仰卧检测",
        },
        {
          img: "/images/index/11滞留.png",
          name: "滞留",
        },
        {
          img: "/images/index/15戴口罩.png",
          name: "戴口罩",
        },
      ],
      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: [],
        },
      ],
      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.indexOf("/files") != 0
          ) {
            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) {
            let sdkList1 = [];
            item.sdkList.forEach((sdk) => {
              if (sdk.installed) {
                sdkList1.push(sdk);
              }
            });
            item.sdkList1 = sdkList1;
            this.equipmentArr.push(item);
          }
        });
      }
    },
    //拖拽开始
    dragStart(alg) {
      this.dragAlg = alg;
@@ -306,18 +208,84 @@
    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,
      });

      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;
    },
    closeSettingBox() {
      this.showSettingBox = false;
    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.sdkList1.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(id) {
      this.$router.push({
        path: "/productDetail",
        query: {
          id: id,
        },
      });
    },
  },
};
@@ -327,6 +295,20 @@
.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;
@@ -358,8 +340,14 @@
      }
    }

    .freeLabel {
      margin-top: 20px;
    }

    .payList,
    .freeList {
      max-height: 320px;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;

@@ -367,7 +355,7 @@
        box-sizing: border-box;
        margin-right: 10px;
        margin-bottom: 16px;
        width: 95px;
        width: 90px;
        height: 144px;
        border: 1px solid #e9ebee;
        border-radius: 5px;
@@ -434,15 +422,15 @@

    .update {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 140px;
      height: 40px;
      top: 6px;
      right: 165px;
      width: 112px;
      height: 32px;
      background: #0065ff;
      color: #fff;
      font-size: 14px;
      /* font-size: 15px; */
      font-weight: 700;
      line-height: 40px;
      line-height: 33px;
      text-align: center;
    }

@@ -490,10 +478,10 @@
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-top: -112px;
    margin-top: -108px;
    margin-left: -180px;
    width: 360px;
    height: 224px;
    height: 216px;
    background-color: #fff;

    .title {
@@ -519,20 +507,30 @@

      .el-switch ::v-deep {
        height: 24px;

        .el-switch__core {
          border-radius: 16px;
          height: 24px;

          &::after {
            top: 3px;
            background: #0065ff;
          }
          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;
@@ -544,22 +542,15 @@
      bottom: 20px;
      right: 20px;
      text-align: center;
      line-height: 40px;

      .cancel {
        margin-right: 10px;
        width: 104px;
        height: 40px;
        border: 1px solid #0065ff;
        color: #0065ff;
      }
      line-height: 32px;

      .confirm {
        width: 104px;
        height: 40px;
        width: 60px;
        height: 32px;
        border: 1px solid #0065ff;
        background-color: #0065ff;
        color: #fff;
        border-radius: 3px;
      }
    }

@@ -575,7 +566,7 @@

  .mask {
    position: absolute;
    top: 0;
    top: 62px;
    left: 0;
    right: 0;
    bottom: 0;