添加底库管理

zhangzengfei

2020-07-30 844ab0bd95485a8efcb43c74cd832b58b9de14df

 src/pages/algorithmManage/index/App.vue

@@ -63,9 +63,10 @@
                        <div class="list-complete-item-handle">

                          <!-- <span :class="`iconfont ${item.icon}`" style="font-size:3rem;"></span> -->

                          <div class="svg-wrap">

                            <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                            <!-- <svg class="icon" aria-hidden="true" style="font-size:7rem;">

                              <use :xlink:href="`#${item.icon}`" />

                            </svg>

                            </svg> -->

                            <img class="baseImg" :src="`data:image/png;base64,${item.iconBlob}`" alt="">

                          </div>

                          <div class="alg-name">

                            <div style="padding:0px 10px 0px 10px;">

@@ -729,16 +730,38 @@
  installSdk

} from "./api";

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 => {

        debugger

        return sdk.installed === true;

      });

    },

    ungradeList() {

      // 升级处理会导致重复的key,需要修改

      return [];

      return this.TaskMange.list1.filter(sdk => {

        return sdk.isUpgrade === true;

      });

    }

  },

  data() {

    return {

      TaskMange: new TaskManage,

      VideoManageData: new VideoManageData,

      activeName: "myAlgorithm",

      patchUpdateStatus: "",

      dragging: false,

@@ -804,8 +827,818 @@
      installPercentage: 0

    }

  },

  methods: {},

  mounted() {}

  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.findAllSdk();

    this.findByType();

    this.getBaseList();

    this.findAll();

    this.getUser();

    // this.TaskMange.findAllSdk();

    // this.TaskMange.findByType();

    this.VideoManageData.init();

  },

  methods: {

    installFormat(percentage) {

      return percentage === 100 ? '安装成功' : `${percentage}%`;

    },

    actived() {

      //this.activeCode

      this.actStep++

    },

    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;

      // 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

      //     });

      //   });



      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 => {

          if(res.success){

            debugger

            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(() => {

        console.log('取消安装')

      })

      
    },



    onFileAdded(f) {

      debugger;

      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) {

        // debugger

        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);

      }

    },

    getUser() {

      // console.log("登录用户",JSON.parse(sessionStorage.getItem("userInfo")).username)

      if (

        sessionStorage.getItem("userInfo") &&

        (JSON.parse(sessionStorage.getItem("userInfo")).username ==

          "superadmin" ||

          JSON.parse(sessionStorage.getItem("userInfo")).username == "basic")

      ) {

        this.isSuperUser = true;

      } else {

        this.isSuperUser = false;

      }

    },

    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);

    },

    updateTemplates() {

      getAllTemplate().then(rsp => {

        if (rsp && rsp.success) {

          this.sceneTemplates = rsp.data;

          this.sceneTemplates.forEach(element => {

            element.icon = [

              "iconrenlianjiance",

              "icongetijingzhi",

              "iconchouyan-copy",

              "iconrenshukouzhao"

            ];

          });

        }

      });

    },

    cleanTemplateForm() {

      this.appSceneForm.name = "";

      this.appSceneForm.desc = "";

      this.appSceneForm.rules = "";

      this.appSceneForm.txt = "";



      this.$refs.ruleEditor.cleanRule();

    },

    handleTabClick() {

      if (this.activeName == "appScenarios") {

        this.updateTemplates();

      }

    },

    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 = '编辑场景模板';

    },

    handleDelScene(item){

      this.$confirm('此操作将删除该应用场景模板, 是否继续?', '提示', {

        confirmButtonText: '确定',

        cancelButtonText: '取消',

        type: 'warning'

      }).then(() => {

        deleteTemplate(item.id).then(res=>{

          if(res && res.success){

            this.updateTemplates();

            this.$message({

              type: 'success',

              message: '删除成功!'

            });

          }

        })

        
      }).catch(() => {

        console.log('取消删除');

      });

    },

    handleSaveTemplate() {

      let editorResp = this.$refs.ruleEditor.submitRule();

      this.appSceneForm.rules = JSON.stringify(editorResp.rules);

      this.appSceneForm.txt = editorResp.text;



      saveTemplate(this.appSceneForm).then(rsp => {

        if (rsp && rsp.success) {

          this.$notify({

            type: "success",

            message: "模板创建成功"

          });

          this.updateTemplates();

          this.sceneDialogVisible = false;

        }

      });

    }

  }

};

</script>

<style lang="scss">

@@ -820,7 +1653,7 @@
  // background-color: #f2f6fc;

  .s-video-manage-breadcrumb {

    height: 5%;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    border: 1px solid #e4e7ed;

    background-color: rgb(255, 255, 255);

    -webkit-box-shadow: #e4e7ed 0px 0px 9px inset;

@@ -858,4 +1691,805 @@
  color: #606266;

  cursor: pointer;

}







.installInfo{

  text-indent: 2em;

  font-size: 14px;

  color: #777;

  p{

    text-align: center;

    color: #666;

  }

}

.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(../../../assets/gif/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%;

      padding-top: 10px;

      box-sizing: border-box;

      // float: left;



      .action-bar {

        margin-bottom: 30px;

        .el-input {

          width: 100%;

        }

      }

      .task-list {

        background: #fff;

        padding: 30px 20px 20px;

        box-sizing: border-box;

        .flex-list {

          display: flex;

          flex-direction: row;

          flex-wrap: wrap;

          // justify-content: space-around;

          // align-content: space-around;

          // &:after {

          //   content: "";

          //   flex: auto;

          // }

          .wrap-box {

            width: 16.66%;

          }

          .list-choose-item-left {

            // width: 220px;

            // height: 214px;

            width: 80%;

            height: auto;

            margin: auto;

            margin-bottom: 30px;

            // @media screen and(min-width: 1895px) {

            //   //margin: 20px 25px 20px 20px;

            //   width: 230px;

            //   height: 224px;

            // }

            // @media screen and(min-width: 1695px) and(max-width:1895px ) {

            //   margin: 20px 10px 20px 15px;

            // }

            // @media screen and(min-width: 1460px) and(max-width: 1695px) {

            //   margin: 20px 25px 20px 20px;

            // }

            // @media screen and(max-width: 1460px) {

            //   margin: 20px 15px 20px 10px;

            // }

          }

        }

      }

      .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;

              .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 {

        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-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;

          .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;



      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;

      // display: inline-block;

      // @media screen and(min-width: 1895px) {

      //   //margin: 20px 25px 20px 20px;

      //   margin: 20px 30px 20px 20px;

      // }

      // @media screen and(min-width: 1695px) and(max-width:1895px ) {

      //   margin: 20px 10px 20px 15px;

      // }

      // @media screen and(min-width: 1460px) and(max-width: 1695px) {

      //   margin: 20px 25px 20px 20px;

      // }

      // @media screen and(max-width: 1460px) {

      //   margin: 20px 15px 20px 10px;

      // }

      // width: 126px;

      // height: 120px;

      // width: 220px;

      // height: 214px;

      transition: all 1s;

      background: #ffffff;

      border: 1px solid #e2e2e2;

      box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);

      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;

        .bot-btn {

          flex: 1;

        }

      }

    }

    .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: 15px;

      color: #222222;

      // 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%;

        margin: auto;

        padding-top: 80%;

        position: relative;

        svg{

          position: absolute;

          top: 50%;

          left: 50%;

          transform: translate(-50%,-50%);

        }

        .baseImg {

          position: absolute;

          top: 50%;

          left: 50%;

          transform: translate(-50%,-50%);

        }

      }

    }

    .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>