管理中心

ZZJ

2022-03-31 d4e6d812bf1e9fa55ea62745983f0b2a878ed8aa

 src/views/hashrate/AlgManage/index.vue

@@ -8,8 +8,8 @@
      <div class="label">收费算法</div>
      <div class="payList">
        <div class="algCard" v-for="(item, index) in payAlg" :key="index">
          <img :src="item.img" alt="" draggable="false" />
          <div class="name">{{ item.name }}</div>
          <img :src="item.logoUrl" alt="" draggable="false" />
          <div class="name">{{ item.productName }}</div>
          <span class="button pay">购买</span>
        </div>
      </div>
@@ -26,12 +26,12 @@
          @dragend="dragAlg = null"
        >
          <img
            :src="item.img"
            :src="item.logoUrl"
            alt=""
            draggable="true"
            @dragstart="dragStart(item)"
          />
          <div class="name">{{ item.name }}</div>
          <div class="name">{{ item.productName }}</div>
          <span class="button detail">查看详情</span>
        </div>
      </div>
@@ -78,16 +78,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,62 +98,29 @@

<script>
import Card from "./components/AlgCard";
import {
  getAllCenterProduct,
  getSdkConfigInfo,
  saveSdkConfig,
  findAllSdk,
  downloadOrUpgrade,
  unInstall,
} 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: "戴口罩",
        },
      ],
      showSettingBox: false,
      setting: false,
      payAlg: [],
      freeAlg: [],
      equipmentArr: [
        {
          name: "设备1",
@@ -297,6 +267,50 @@
    };
  },
  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 === "") {
          this.showSettingBox = true;
        } else {
          this.setting = res.data.value === "on" ? true : false;
        }
      }
    },

    //获取左侧产品列表
    async getProduct() {
      const res = await getAllCenterProduct({
        page: 1,
        size: 100000,
        inputText: "",
        archType: "",
        gpuType: "",
        publishStatus: 1,
        productLabelId: "d0aabaee-8edd-492d-8f43-6b0e0bb6e2dd",
      });

      if (res && res.success) {
        res.data.list.forEach((item) => {
          item.logoUrl = "/httpImage/" + item.logoUrl;
          if (item.priceBase === 0) {
            this.freeAlg.push(item);
          } else {
            this.payAlg.push(item);
          }
        });
      }
    },

    //获取右侧设备列表
    async getEquipment() {
      const res = await findAllSdk();
    },
    //拖拽开始
    dragStart(alg) {
      this.dragAlg = alg;
@@ -316,8 +330,23 @@
      });
      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: "配置成功",
        });
        this.showSettingBox = false;
      }
    },
  },
};
@@ -327,6 +356,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;
@@ -490,10 +533,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 +562,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 +597,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;
      }
    }