调整摄像机接入页面

zhangzengfei

2020-07-30 d6bf6c38fe15510aac8e56569ca0450fb8656c89

 src/pages/cameraAccess/components/localSeparate.vue

File was renamed from src/components/camera/localSeparate.vue
@@ -1,729 +1,729 @@
<template>

  <div class="s-linkage-rules">

    <div class="top">

      <p style="text-align:left;margin-bottom: 14px;">

        <b style="font-size: 14px;line-height: 18px;">已选算法</b>

        <!-- 新增任务 -->

        <el-dropdown trigger="click" size="small" placement="bottom" @command="taskAdd">

          <el-tooltip effect="dark" content="选择算法" placement="bottom" popper-class="atooltip">

            <span :class="currentCarmeras.cameraId?'add-btn':'nocamera-css'" style="margin-right: 28px;">

              <i class="iconfont iconxuanzeziyuan" style="font-size:16px"></i>

            </span>

          </el-tooltip>

          <el-dropdown-menu v-if="currentCarmeras.cameraId" slot="dropdown" style="left:315px !important;">

            <el-dropdown-item

              v-for="(item, index) in sepTasks"

              :key="index"

              :command="item"

              :divided="index > 0"

            >

              <span

                style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 170px;display: block;"

                :title="item.task.taskname"

              >

                <el-icon

                  class="iconfont iconxingzhuangcopy"

                  style="color: #3D68E1;margin-right: 12px;"

                ></el-icon>

                {{item.task.taskname}}

              </span>

            </el-dropdown-item>

          </el-dropdown-menu>

        </el-dropdown>

      </p>

      
      <swiper :options="swiperTaskOption" class="swiper-box-container">

        <span class="task-tip" v-show="currentCarmeras.selectTask.length == 0 ">暂无算法,请选择算法</span>



        <swiper-slide v-for="(item, index) in currentCarmeras.selectTask" :key="index">

          <div

            class="item-card"

            :style="`${isActiveTask(index) ? 'border-color:#ff7733' : ''}`"

            @click="item.isEdit ? '': showRuleList(item.task.taskid, index)"

          >

            <p style="text-align: right; width:100%; height:25px;">

              <el-tooltip content="未配置规则" placement="top" popper-class="atooltip">

                <i

                  class="el-icon-warning-outline"

                  style="font-size:16px; color:orange; position:relative; top:-9px; left: 8px;"

                  v-show="!item.hasRule"

                ></i>

              </el-tooltip>

              <el-dropdown size="small" placement="bottom" @command="updateTaskStatus($event,item)">

                <span class="el-dropdown-link">

                  <i

                    class="iconfont iconbianji1"

                    style="font-size: 28px;float:right; margin:0px 5px "

                  ></i>

                </span>

                <el-dropdown-menu slot="dropdown" style="margin-top:-3px;width:60px">

                  <el-dropdown-item divided :command="0">编辑</el-dropdown-item>

                  <el-dropdown-item style="color:red;" :command="2">删除</el-dropdown-item>

                </el-dropdown-menu>

              </el-dropdown>

            </p>

            <el-icon

              class="iconfont iconxingzhuangcopy"

              :style="item.task.enable ? 'color: #0066EB;font-size: 35.5px;' : 'font-size: 35.5px;'"

            ></el-icon>

            <p

              v-if="!item.isEdit"

              :style="item.task.enable ? 'color: #0066EB;padding-top: 20px;' : 'padding-top: 20px;'"

            >

              <b>{{ item.task.taskname }}</b>

            </p>

            <el-input

              size="small"

              style="padding-top: 25px;z-index: 9999;"

              v-if="item.isEdit"

              v-model="item.task.taskname"

              :maxlength="15"

              v-focus

              @blur="updateTaskName(item)"

            ></el-input>

          </div>

        </swiper-slide>

      </swiper>



      <div class="pre-border" v-show="currentCarmeras.selectTask.length > 4 ">

        <div class="icon-btn" slot="button-prev">

          <i class="iconfont iconzuo"></i>

        </div>

      </div>

      <div class="next-border" v-show="currentCarmeras.selectTask.length > 4 ">

        <div class="icon-btn" slot="button-next">

          <i class="iconfont iconyou1"></i>

        </div>

      </div>



      <!-- 系统信息 -->

      <div class="top-right">

        <sysinfo v-if="showSysInfo" :showRealPoll="false" :ShowLocalVedio="true"

         style="margin-left: 25px;margin-top: -10px;" />

      </div>

    </div>



    <div class="bottom">

      <div style="width: calc(100% + 100px);height: 10px;background-color: #E9EBF2;position:relative;left:-40px"></div>

      <div class="bottom-right">

        <div class="draw-and-time-box">

          <div class="draw-box">

            <div class="draw-box-title">

              <b style="font-size: 14px">绘制区域</b>

              <span

                class="el-dropdown-link"

                @click="drawBaseImg"

                style="position: relative;top: 5px; cursor:pointer"

              >

                <i class="iconfont iconbianji1" style="font-size: 28px; "></i>

              </span>

              <el-button class="btn-css" type="primary"

                :disabled="currentCarmeras.rules.length===0"

                @click="ToAll" 
                size="mini">应用到全部</el-button>

            </div>

            <div class="img-box">



              <!-- swiper 展示 -->

              <swiper

                ref="localVideoSwiper"

                :options="swiperOption"

                @slideChange="swiperSlideChange"

                class="swiper-box-container2"

              >

                <swiper-slide v-for="(data, index) in swipercanvasData" :key="index">

                  <b class="video-title" style="font-size:14px;margin-top:-10px">{{ data.name }}</b>

                  <polygon-canvas

                    ref="canvas"

                    v-loading="loading"

                    element-loading-text="刷新中，请稍等..."

                    element-loading-spinner="el-loading-spinner-div"

                    element-loading-background="rgba(0, 0, 0, 0.8)"

                    :isShowDrawArrow="false"

                    :isLink="false"

                    :disabled="false"

                    :snapshot_url="data.baseImg"

                    :canvasDataShow="data.canvasData"

                    :currentCameraId="data.cameraId"

                    :loading="data.loading"

                    @changeLoading="changeLoading"

                    @fromCanvas="getCanvasData"

                  ></polygon-canvas>

                </swiper-slide>

              </swiper>

              <div class="swiper-local-prev" v-show="swipercanvasData.length>1">

                <div class="icon-btn" slot="button-prev">

                  <i class="iconfont iconzuo"></i>

                </div>

              </div>

              <div class="swiper-local-next" v-show="swipercanvasData.length>1">

                <div class="icon-btn" slot="button-next">

                  <i class="iconfont iconyou1"></i>

                </div>

              </div>

            </div>

          </div>

          <div style="float:left;width:calc(10% - 90px);height:100%;"></div>

          <div class="time-box" style="width:calc(90% + 90px - 576px);overflow-x:auto;overflow-y:hidden">

            <p style="text-align:left;padding: 10px;box-sizing: border-box">

              <b style="font-size: 14px">布防时间</b>

            </p>

            <time-slider ref="timeSlider" :type="'link'" />

          </div>

        </div>

        <!-- 任务规则 -->

        <rule-editor

          ref="ruleEditor"

          :Carmeras="Carmeras"

          :isLinkRule="false"

          :tableRuleList="currentCarmeras.rules"

          :activeTaskIndex="activeTaskIndex"

          :onSubmitRule="submitRule"

          @changeTask="changeTask"

          @delete-rule="showRuleList(activeTaskId, activeTaskIndex)"

        ></rule-editor>

      </div>

    </div>

  </div>

</template>



<script>

import {

  getLinkRules,

  saveLinkRule,

  deleteCameraRules,

  
  fetchCameraRulesByTask,

  deleteCameraTask,

  saveCameraRules,

  updateCameraTask,

  updateRuleDefence,

  updateAlarmLevel,

  addCameraTask

} from "@/api/camera";

import VideoRuleData from "@/Pool/VideoRuleData";

import { savePolygon } from "@/api/polygon";

import { ruleApply2All } from "@/api/localVedio";



import polygonCanvas from "@/components/canvas";

import RuleEditor from "./RuleEditor";

import TimeSlider from "./TimeSlider";

import Sysinfo from "./SystemInfo"



export default {

  components: {

    TimeSlider,

    polygonCanvas,

    RuleEditor,

    Sysinfo

  },

  data() {

    return {

      loading: false,

      Carmeras: [],

      currentCarmeras: {

        selectTask: [],

        rules: [],

        polygonData: [],

        cameraId: "",

        canvasData: {},

        baseImg: "",

        cameraName: "",

        camearInfo: {},

        loading: false,

        analytics: false,

        dealWay: false,

        runServerName: "",

      },

      tasksTable: [],

      swipercanvasData: [],

      seqNumber: 0,

      tableRuleList: [],

      swiperIndex: 0,

      swiperOption: {

        grabCursor: true,

        pagination: {

          el: ".swiper-pagination",

          clickable: true

        },

        navigation: {

          nextEl: ".swiper-local-next",

          prevEl: ".swiper-local-prev"

        }

      },

      swiperTaskOption: {

        slidesPerView: 4,

        spaceBetween: 10,

        pagination: {

          el: ".swiper-pagination",

          clickable: true

        },

        navigation: {

          nextEl: ".next-border",

          prevEl: ".pre-border"

        }

      },

      activeTaskIndex: 0,

      activeTaskId: "",

      showSysInfo: false

    };

  },

  watch: {

    Carmeras: {

      handler(newVal, oldVal) {

        this.showTasks();

        this.setSwiperData();

      },

      deep: true

    }

  },

  computed: {

    sepTasks() {

      let list =this.VideoManageData.SepTasks.map(i=>{

        i.isEdit = false

        return i

      })

      return list;

    }

  },

  methods: {

    drawBaseImg() {

      console.log(this.$refs,this.$refs.localVideoSwiper.canvas,'drawBaseImg')

      this.$refs.canvas[this.swiperIndex].showModal();

    },

    swiperSlideChange() {

      this.swiperIndex = this.$refs.localVideoSwiper.swiper.activeIndex;

      // console.log(this.swiperIndex,'切换本地视频')

      this.currentCarmeras = this.Carmeras[this.swiperIndex];

      this.showTasks();

    },

    initCameraData() {

      this.Carmeras = [];

      this.loading = false;

      this.showSysInfo = true

      // console.log(this.TreeDataPool.checkedLocalVedio,'this.TreeDataPool.checkedLocalVedio')

      this.TreeDataPool.checkedLocalVedio.forEach(camera => {

        this.Carmeras.push(new VideoRuleData(camera.id));

      });

      if(this.Carmeras.length !== 0){

        this.currentCarmeras = this.Carmeras[this.swiperIndex];

        if(this.currentCarmeras.selectTask.length !== 0){

          this.activeTaskId = this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid

        }

        // console.log(this.Carmeras,'this.Carmeras',this.currentCarmeras)

        this.showRules();

      }

    },

    isSelectTask(item) {

      for (let i = 0; i < this.tasksTable.length; i++) {

        if (this.tasksTable.taskid === item.taskid) {

          return true;

        }

      }

    },

    showTasks() {

      let tasks = [];

      if (this.Carmeras[this.swiperIndex]) {

        this.tasksTable = this.Carmeras[this.swiperIndex].selectTask.forEach(

          t => {

            tasks.push(t.task);

          }

        );

        this.tasksTable = tasks;

      } else {

        this.tasksTable = [];

      }

      console.log(this.tasksTable,'this.tasksTable')

      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;

    },

    setSwiperData() {

      let swipers = [];

      let carmeras = this.Carmeras;

      console.log(carmeras,'carmeras')

      for (let i = 0; i < carmeras.length; i++) {

        swipers = swipers.concat({

          cameraId: carmeras[i].cameraId,

          // name: carmeras[i].camearInfo.name,

          name: "215摄像机__4823148102934521.mp4",

          // baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined ,

          baseImg: "httpImage/192.168.5.23:6086/681,2c7b272064d78f",

          canvasData: carmeras[i].canvasData,

          loading: carmeras[i].loading,

        });

      }

      this.swipercanvasData = swipers;

      console.log(this.swipercanvasData,'setSwiperData')

    },

    getCanvasData(data) { 
      let polyon = { ...data };

      polyon.camera_id = this.currentCarmeras.cameraId;

      savePolygon(polyon).then(rsp => {

        this.currentCarmeras.getPolygon();

      });

    },

    showRules() {

      this.tableRuleList = [];

      this.$refs.ruleEditor.cleanRule();

      if (this.currentCarmeras.selectTask[0] && this.currentCarmeras.selectTask[0].task) {

          this.showRuleList(this.currentCarmeras.selectTask[0].task.taskid, 0);

        } else {

          this.tableRuleList = [];

        }

    },

    submitRule(groupRule) {

      let ids = this.TreeDataPool.checkedLocalVedio.map(i=>{

        return i.id

      })

      console.log(ids,'已选的视频')

      const payload = {

        // camera_ids: [this.currentCarmeras.cameraId],

        camera_ids: ids,

        group_id: groupRule.group_id,

        group_rule: groupRule.rules,

        group_text: groupRule.group_text,

        set_type: "batchTask",

        task_id: this.activeTaskId ? this.activeTaskId : this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid

      };

      console.log(this.activeTaskId,'submitRule',this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid)

      saveCameraRules(payload).then(rsp => {

        if (rsp && rsp.success) {

          this.$refs.ruleEditor.cleanRule();

          this.showRuleList(this.activeTaskId, this.activeTaskIndex);

          this.$notify({

            type: "success",

            message: "任务保存成功！"

          });

        }

      });

    },

    changeLoading(params){

      this.loading = params

    },

    taskAdd(item) {

      console.log(this.tasksTable,'taskAdd')

      for (let i = 0; i < this.tasksTable.length; i++) {

        if (this.currentCarmeras.selectTask[i].task.taskid === item.task.taskid) {

          this.$notify({

            showClose: true,

            message: "请勿重复添加任务！",

            type: "warning"

          });

          return;

        }

      }

      addCameraTask({

        cameraId: this.currentCarmeras.cameraId,

        taskId: item.task.taskid

      }).then(() => {

        // 更新树状态

        this.TreeDataPool.fetchTreeData();

      });



      // 新添加任务默认关闭

      this.currentCarmeras.selectTask.push(item);

      // 添加并初始化规则显示

      this.activeTaskIndex = this.currentCarmeras.selectTask.length - 1;

      this.activeTaskId = item.task.taskid;

      this.tableRuleList = [];

      // 清空编辑规则

      this.$refs.ruleEditor.cleanRule();

    },

    isActiveTask(index) {

      return this.activeTaskIndex === index;

    },

    updateTaskStatus(action, item) {

      console.log(action, item, 'updateTaskStatus')

      //修改名称

      if (action == "0") {

        this.$set(item, 'isEdit', true)

        this.$forceUpdate()

        console.log(item, 'updateTaskStatus')

      }

      // 删除

      if (action == "2") {

        this.taskDelete(this.activeTaskIndex);

      }

    },

    // 更新任务名称

    async updateTaskName(data) {

      console.log(data, 'updateTaskName')

      let json = {

        taskId: data.task.taskid,

        taskName: data.task.taskname

      };

      let res = await updateTaskName(json);



      this.$notify({

        title: res.success ? "成功" : "失败",

        message: res.msg,

        type: res.success ? "success" : "error"

      });

      if (res && res.success) {

        this.$set(data, "isEdit", false);

        this.currentCarmeras.getCameraTask()

        this.$forceUpdate()

      }

    },

    taskDelete(index) {

      this.$confirm("提示：删除后，此摄像机中此算法涉及的所有规则将一起删除，是否删除？", {

        center: true,

        cancelButtonClass: "comfirm-class-cancle",

        confirmButtonClass: "comfirm-class-sure"

      })

        .then(() => {

          deleteCameraTask(

            this.currentCarmeras.cameraId,

            this.currentCarmeras.selectTask[index].task.taskid

          ).then(res => {

            if (res && res.success) {

              this.currentCarmeras.selectTask.splice(index, 1);



              if (this.currentCarmeras.selectTask.length > 0) {

                this.showRuleList(this.currentCarmeras.selectTask[0].task.taskid, 0);

              } else {

                this.TreeDataPool.fetchTreeData();

              }

              this.$notify({

                type: "success",

                message: "删除摄像机任务成功"

              });

            } else {

              this.$notify({

                type: "error",

                message: "删除失败！"

              });

            }

          });

        })

        .catch(() => {

          // console.log("取消删除");

        });

    },

    showRuleList(task, index) {

      this.activeTaskId = task;

      this.activeTaskIndex = index;

      // 清空编辑

      this.currentCarmeras.getCameraTask();

      
    },

    changeTask(taskid){

      console.log("任务id",taskid)

      this.activeTaskId = taskid

      this.currentCarmeras.selectTask.forEach((el,index) => {

        console.log("panklei",el,index)

        if (el.task.taskid === taskid) {

          console.log("激活id",index)

          this.activeTaskIndex = index

          this.$refs.ruleEditor.sdksOption = this.currentCarmeras.selectTask[

            this.activeTaskIndex

          ].sdks;

        }

      })

    },

    async ToAll(){

      // console.log(this.currentCarmeras.cameraId, '当前选中文件id')

      let res = await ruleApply2All({

        camera_id: this.currentCarmeras.cameraId

      })

      // console.log(res,'应用到全部')

      if(res && res.success){

        this.$notify({

          type:"success",

          message:"应用到全部成功!"

        })

        this.TreeDataPool.findAllFile({});

      }

    }

  },

  destroyed() {

    this.Carmeras = [];

    this.currentCarmeras = {

      selectTask: [],

      rules: [],

      polygonData: [],

      cameraId: "",

      canvasData: {},

      baseImg: "",

      cameraName: "",

      camearInfo: {},

      loading: false,

      analytics: false,

      dealWay: false,

      runServerName: "",

    };

    this.tasksTable = [];

    this.tableRuleList = [];

  },

};

</script>

<style lang="scss">

.s-linkage-rules {

  width: 100%;

  height: 100%;

  position: relative;

  .top {

    width: 100%;

    height: 174px;

    border-bottom: 1px solid #ccc;

    position: relative;

    
    .top-right {

      float: right;

      width: 58%;

      height: 124px;

    }



    .pre-border {

      left: 0px;

      top: 40%;

    }

    .next-border {

      left: 40%;

      top: 40%;

    }

  }

  .bottom {

    width: 100%;

    height: calc(100% - 174px);

    position: absolute;

    top: 174px;

    //left: -38px;

    .bottom-side {

      height: 100%;

      width: 250px;

      float: left;

      overflow: auto;

      border-right: 1px solid #ccc;

      border-bottom: 1px solid #ccc;

      padding: 10px;

      box-sizing: border-box;

      .selectTask {

        margin: 10px auto;

        width: 140px;

        padding: 10px;

        box-sizing: border-box;

        border: 1px solid #ccc;

        position: relative;

        .selectTaskDelete {

          position: absolute;

          right: 10px;

          font-size: 18px;

          cursor: pointer;

        }

      }

    }

    .bottom-right {

      width: calc(100% + 30px);

      height: 100%;

      float: left;

      overflow: auto;

      padding: 10px 38px;

      box-sizing: border-box;

      .draw-and-time-box {

        height: 430px;

        width: 100%;

        padding-bottom: 5px;

        .draw-box,

        .time-box {

          float: left;

          width: 50%;

          height: 100%;

          .img-box {

            height: calc(100% - 32px);

            width: 100%;

            box-sizing: border-box;

            display: flex;

            position: relative;

            overflow: hidden;

            .refresh-btn {

              position: absolute;

              right: 10px;

              top: 10px;

            }

            img {

              width: 90%;

              padding: 5px;

              box-sizing: border-box;

            }

            .swiper-box-container2 {

              max-width: 690px;

            }

          }

        }

        .draw-box {

          width: 576px;

        }

        .draw-box-title {

          text-align: left;

          margin-top: -3px;

          .btn-css {

            position: relative;

            left: 556px;

            margin-bottom: 1px;

          }

        }

      }

    }

  }



  .add-btn {

    color: #3d68e1;

    margin-left: 10px;

    font-size: 14px;

    cursor: pointer;

  }

  .add-btn:hover {

    color: #2249b4;

  }

  .nocamera-css {

    cursor: not-allowed;

    color: #3d68e1;

    margin-left: 10px;

    font-size: 14px;

  }

  .task-tip {

    font-family: PingFangSC-Regular;

    font-size: 12px;

    color: #cccccc;

    margin-top: 10%;

    margin-left: 38%;

  }

}



.swiper-local-prev,

.swiper-local-next {

  width: 40px;

  height: 40px;

  position: absolute;

  background: #8888;

  top: 48%;

  z-index: 99;

  border-radius: 4em;

  outline: none;

  .icon-btn {

    color: rgb(255, 255, 255);

    text-align: center;

    line-height: 38px;

    cursor: pointer;

  }

}

.swiper-local-prev {

  left: 2px;

}

.swiper-local-prev:hover {

  background: #666;

}

.swiper-local-next {

  right: 3px;

}

.swiper-local-next:hover {

  background: #666;

}

.task-tip {

  font-family: PingFangSC-Regular;

  font-size: 12px;

  color: #cccccc;

  margin-top: 10%;

  margin-left: 38%;

}

</style>

<template>
  <div class="s-linkage-rules">
    <div class="top">
      <p style="text-align:left;margin-bottom: 14px;">
        <b style="font-size: 14px;line-height: 18px;">已选算法</b>
        <!-- 新增任务 -->
        <el-dropdown trigger="click" size="small" placement="bottom" @command="taskAdd">
          <el-tooltip effect="dark" content="选择算法" placement="bottom" popper-class="atooltip">
            <span :class="currentCarmeras.cameraId?'add-btn':'nocamera-css'" style="margin-right: 28px;">
              <i class="iconfont iconxuanzeziyuan" style="font-size:16px"></i>
            </span>
          </el-tooltip>
          <el-dropdown-menu v-if="currentCarmeras.cameraId" slot="dropdown" style="left:315px !important;">
            <el-dropdown-item
              v-for="(item, index) in sepTasks"
              :key="index"
              :command="item"
              :divided="index > 0"
            >
              <span
                style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 170px;display: block;"
                :title="item.task.taskname"
              >
                <el-icon
                  class="iconfont iconxingzhuangcopy"
                  style="color: #3D68E1;margin-right: 12px;"
                ></el-icon>
                {{item.task.taskname}}
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </p>
      
      <swiper :options="swiperTaskOption" class="swiper-box-container">
        <span class="task-tip" v-show="currentCarmeras.selectTask.length == 0 ">暂无算法,请选择算法</span>

        <swiper-slide v-for="(item, index) in currentCarmeras.selectTask" :key="index">
          <div
            class="item-card"
            :style="`${isActiveTask(index) ? 'border-color:#ff7733' : ''}`"
            @click="item.isEdit ? '': showRuleList(item.task.taskid, index)"
          >
            <p style="text-align: right; width:100%; height:25px;">
              <el-tooltip content="未配置规则" placement="top" popper-class="atooltip">
                <i
                  class="el-icon-warning-outline"
                  style="font-size:16px; color:orange; position:relative; top:-9px; left: 8px;"
                  v-show="!item.hasRule"
                ></i>
              </el-tooltip>
              <el-dropdown size="small" placement="bottom" @command="updateTaskStatus($event,item)">
                <span class="el-dropdown-link">
                  <i
                    class="iconfont iconbianji1"
                    style="font-size: 28px;float:right; margin:0px 5px "
                  ></i>
                </span>
                <el-dropdown-menu slot="dropdown" style="margin-top:-3px;width:60px">
                  <el-dropdown-item divided :command="0">编辑</el-dropdown-item>
                  <el-dropdown-item style="color:red;" :command="2">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </p>
            <el-icon
              class="iconfont iconxingzhuangcopy"
              :style="item.task.enable ? 'color: #0066EB;font-size: 35.5px;' : 'font-size: 35.5px;'"
            ></el-icon>
            <p
              v-if="!item.isEdit"
              :style="item.task.enable ? 'color: #0066EB;padding-top: 20px;' : 'padding-top: 20px;'"
            >
              <b>{{ item.task.taskname }}</b>
            </p>
            <el-input
              size="small"
              style="padding-top: 25px;z-index: 9999;"
              v-if="item.isEdit"
              v-model="item.task.taskname"
              :maxlength="15"
              v-focus
              @blur="updateTaskName(item)"
            ></el-input>
          </div>
        </swiper-slide>
      </swiper>

      <div class="pre-border" v-show="currentCarmeras.selectTask.length > 4 ">
        <div class="icon-btn" slot="button-prev">
          <i class="iconfont iconzuo"></i>
        </div>
      </div>
      <div class="next-border" v-show="currentCarmeras.selectTask.length > 4 ">
        <div class="icon-btn" slot="button-next">
          <i class="iconfont iconyou1"></i>
        </div>
      </div>

      <!-- 系统信息 -->
      <div class="top-right">
        <sysinfo v-if="showSysInfo" :showRealPoll="false" :ShowLocalVedio="true"
         style="margin-left: 25px;margin-top: -10px;" />
      </div>
    </div>

    <div class="bottom">
      <div style="width: calc(100% + 100px);height: 10px;background-color: #E9EBF2;position:relative;left:-40px"></div>
      <div class="bottom-right">
        <div class="draw-and-time-box">
          <div class="draw-box">
            <div class="draw-box-title">
              <b style="font-size: 14px">绘制区域</b>
              <span
                class="el-dropdown-link"
                @click="drawBaseImg"
                style="position: relative;top: 5px; cursor:pointer"
              >
                <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
              </span>
              <el-button class="btn-css" type="primary"
                :disabled="currentCarmeras.rules.length===0"
                @click="ToAll" 
                size="mini">应用到全部</el-button>
            </div>
            <div class="img-box">

              <!-- swiper 展示 -->
              <swiper
                ref="localVideoSwiper"
                :options="swiperOption"
                @slideChange="swiperSlideChange"
                class="swiper-box-container2"
              >
                <swiper-slide v-for="(data, index) in swipercanvasData" :key="index">
                  <b class="video-title" style="font-size:14px;margin-top:-10px">{{ data.name }}</b>
                  <polygon-canvas
                    ref="canvas"
                    v-loading="loading"
                    element-loading-text="刷新中，请稍等..."
                    element-loading-spinner="el-loading-spinner-div"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :isShowDrawArrow="false"
                    :isLink="false"
                    :disabled="false"
                    :snapshot_url="data.baseImg"
                    :canvasDataShow="data.canvasData"
                    :currentCameraId="data.cameraId"
                    :loading="data.loading"
                    @changeLoading="changeLoading"
                    @fromCanvas="getCanvasData"
                  ></polygon-canvas>
                </swiper-slide>
              </swiper>
              <div class="swiper-local-prev" v-show="swipercanvasData.length>1">
                <div class="icon-btn" slot="button-prev">
                  <i class="iconfont iconzuo"></i>
                </div>
              </div>
              <div class="swiper-local-next" v-show="swipercanvasData.length>1">
                <div class="icon-btn" slot="button-next">
                  <i class="iconfont iconyou1"></i>
                </div>
              </div>
            </div>
          </div>
          <div style="float:left;width:calc(10% - 90px);height:100%;"></div>
          <div class="time-box" style="width:calc(90% + 90px - 576px);overflow-x:auto;overflow-y:hidden">
            <p style="text-align:left;padding: 10px;box-sizing: border-box">
              <b style="font-size: 14px">布防时间</b>
            </p>
            <time-slider ref="timeSlider" :type="'link'" />
          </div>
        </div>
        <!-- 任务规则 -->
        <rule-editor
          ref="ruleEditor"
          :Carmeras="Carmeras"
          :isLinkRule="false"
          :tableRuleList="currentCarmeras.rules"
          :activeTaskIndex="activeTaskIndex"
          :onSubmitRule="submitRule"
          @changeTask="changeTask"
          @delete-rule="showRuleList(activeTaskId, activeTaskIndex)"
        ></rule-editor>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLinkRules,
  saveLinkRule,
  deleteCameraRules,
  
  fetchCameraRulesByTask,
  deleteCameraTask,
  saveCameraRules,
  updateCameraTask,
  updateRuleDefence,
  updateAlarmLevel,
  addCameraTask
} from "@/api/camera";
import VideoRuleData from "@/Pool/VideoRuleData";
import { savePolygon } from "@/api/polygon";
import { ruleApply2All } from "@/api/localVedio";

import polygonCanvas from "@/components/canvas";
import RuleEditor from "./RuleEditor";
import TimeSlider from "./TimeSlider";
import Sysinfo from "./SystemInfo"

export default {
  components: {
    TimeSlider,
    polygonCanvas,
    RuleEditor,
    Sysinfo
  },
  data() {
    return {
      loading: false,
      Carmeras: [],
      currentCarmeras: {
        selectTask: [],
        rules: [],
        polygonData: [],
        cameraId: "",
        canvasData: {},
        baseImg: "",
        cameraName: "",
        camearInfo: {},
        loading: false,
        analytics: false,
        dealWay: false,
        runServerName: "",
      },
      tasksTable: [],
      swipercanvasData: [],
      seqNumber: 0,
      tableRuleList: [],
      swiperIndex: 0,
      swiperOption: {
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".swiper-local-next",
          prevEl: ".swiper-local-prev"
        }
      },
      swiperTaskOption: {
        slidesPerView: 4,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        },
        navigation: {
          nextEl: ".next-border",
          prevEl: ".pre-border"
        }
      },
      activeTaskIndex: 0,
      activeTaskId: "",
      showSysInfo: false
    };
  },
  watch: {
    Carmeras: {
      handler(newVal, oldVal) {
        this.showTasks();
        this.setSwiperData();
      },
      deep: true
    }
  },
  computed: {
    sepTasks() {
      let list =this.VideoManageData.SepTasks.map(i=>{
        i.isEdit = false
        return i
      })
      return list;
    }
  },
  methods: {
    drawBaseImg() {
      console.log(this.$refs,this.$refs.localVideoSwiper.canvas,'drawBaseImg')
      this.$refs.canvas[this.swiperIndex].showModal();
    },
    swiperSlideChange() {
      this.swiperIndex = this.$refs.localVideoSwiper.swiper.activeIndex;
      // console.log(this.swiperIndex,'切换本地视频')
      this.currentCarmeras = this.Carmeras[this.swiperIndex];
      this.showTasks();
    },
    initCameraData() {
      this.Carmeras = [];
      this.loading = false;
      this.showSysInfo = true
      // console.log(this.TreeDataPool.checkedLocalVedio,'this.TreeDataPool.checkedLocalVedio')
      this.TreeDataPool.checkedLocalVedio.forEach(camera => {
        this.Carmeras.push(new VideoRuleData(camera.id));
      });
      if(this.Carmeras.length !== 0){
        this.currentCarmeras = this.Carmeras[this.swiperIndex];
        if(this.currentCarmeras.selectTask.length !== 0){
          this.activeTaskId = this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid
        }
        // console.log(this.Carmeras,'this.Carmeras',this.currentCarmeras)
        this.showRules();
      }
    },
    isSelectTask(item) {
      for (let i = 0; i < this.tasksTable.length; i++) {
        if (this.tasksTable.taskid === item.taskid) {
          return true;
        }
      }
    },
    showTasks() {
      let tasks = [];
      if (this.Carmeras[this.swiperIndex]) {
        this.tasksTable = this.Carmeras[this.swiperIndex].selectTask.forEach(
          t => {
            tasks.push(t.task);
          }
        );
        this.tasksTable = tasks;
      } else {
        this.tasksTable = [];
      }
      console.log(this.tasksTable,'this.tasksTable')
      this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
    },
    setSwiperData() {
      let swipers = [];
      let carmeras = this.Carmeras;
      console.log(carmeras,'carmeras')
      for (let i = 0; i < carmeras.length; i++) {
        swipers = swipers.concat({
          cameraId: carmeras[i].cameraId,
          // name: carmeras[i].camearInfo.name,
          name: "215摄像机__4823148102934521.mp4",
          // baseImg: carmeras[i].baseImg ? carmeras[i].baseImg : undefined ,
          baseImg: "httpImage/192.168.5.23:6086/681,2c7b272064d78f",
          canvasData: carmeras[i].canvasData,
          loading: carmeras[i].loading,
        });
      }
      this.swipercanvasData = swipers;
      console.log(this.swipercanvasData,'setSwiperData')
    },
    getCanvasData(data) { 
      let polyon = { ...data };
      polyon.camera_id = this.currentCarmeras.cameraId;
      savePolygon(polyon).then(rsp => {
        this.currentCarmeras.getPolygon();
      });
    },
    showRules() {
      this.tableRuleList = [];
      this.$refs.ruleEditor.cleanRule();
      if (this.currentCarmeras.selectTask[0] && this.currentCarmeras.selectTask[0].task) {
          this.showRuleList(this.currentCarmeras.selectTask[0].task.taskid, 0);
        } else {
          this.tableRuleList = [];
        }
    },
    submitRule(groupRule) {
      let ids = this.TreeDataPool.checkedLocalVedio.map(i=>{
        return i.id
      })
      console.log(ids,'已选的视频')
      const payload = {
        // camera_ids: [this.currentCarmeras.cameraId],
        camera_ids: ids,
        group_id: groupRule.group_id,
        group_rule: groupRule.rules,
        group_text: groupRule.group_text,
        set_type: "batchTask",
        task_id: this.activeTaskId ? this.activeTaskId : this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid
      };
      console.log(this.activeTaskId,'submitRule',this.currentCarmeras.selectTask[this.activeTaskIndex].task.taskid)
      saveCameraRules(payload).then(rsp => {
        if (rsp && rsp.success) {
          this.$refs.ruleEditor.cleanRule();
          this.showRuleList(this.activeTaskId, this.activeTaskIndex);
          this.$notify({
            type: "success",
            message: "任务保存成功！"
          });
        }
      });
    },
    changeLoading(params){
      this.loading = params
    },
    taskAdd(item) {
      console.log(this.tasksTable,'taskAdd')
      for (let i = 0; i < this.tasksTable.length; i++) {
        if (this.currentCarmeras.selectTask[i].task.taskid === item.task.taskid) {
          this.$notify({
            showClose: true,
            message: "请勿重复添加任务！",
            type: "warning"
          });
          return;
        }
      }
      addCameraTask({
        cameraId: this.currentCarmeras.cameraId,
        taskId: item.task.taskid
      }).then(() => {
        // 更新树状态
        this.TreeDataPool.fetchTreeData();
      });

      // 新添加任务默认关闭
      this.currentCarmeras.selectTask.push(item);
      // 添加并初始化规则显示
      this.activeTaskIndex = this.currentCarmeras.selectTask.length - 1;
      this.activeTaskId = item.task.taskid;
      this.tableRuleList = [];
      // 清空编辑规则
      this.$refs.ruleEditor.cleanRule();
    },
    isActiveTask(index) {
      return this.activeTaskIndex === index;
    },
    updateTaskStatus(action, item) {
      console.log(action, item, 'updateTaskStatus')
      //修改名称
      if (action == "0") {
        this.$set(item, 'isEdit', true)
        this.$forceUpdate()
        console.log(item, 'updateTaskStatus')
      }
      // 删除
      if (action == "2") {
        this.taskDelete(this.activeTaskIndex);
      }
    },
    // 更新任务名称
    async updateTaskName(data) {
      console.log(data, 'updateTaskName')
      let json = {
        taskId: data.task.taskid,
        taskName: data.task.taskname
      };
      let res = await updateTaskName(json);

      this.$notify({
        title: res.success ? "成功" : "失败",
        message: res.msg,
        type: res.success ? "success" : "error"
      });
      if (res && res.success) {
        this.$set(data, "isEdit", false);
        this.currentCarmeras.getCameraTask()
        this.$forceUpdate()
      }
    },
    taskDelete(index) {
      this.$confirm("提示：删除后，此摄像机中此算法涉及的所有规则将一起删除，是否删除？", {
        center: true,
        cancelButtonClass: "comfirm-class-cancle",
        confirmButtonClass: "comfirm-class-sure"
      })
        .then(() => {
          deleteCameraTask(
            this.currentCarmeras.cameraId,
            this.currentCarmeras.selectTask[index].task.taskid
          ).then(res => {
            if (res && res.success) {
              this.currentCarmeras.selectTask.splice(index, 1);

              if (this.currentCarmeras.selectTask.length > 0) {
                this.showRuleList(this.currentCarmeras.selectTask[0].task.taskid, 0);
              } else {
                this.TreeDataPool.fetchTreeData();
              }
              this.$notify({
                type: "success",
                message: "删除摄像机任务成功"
              });
            } else {
              this.$notify({
                type: "error",
                message: "删除失败！"
              });
            }
          });
        })
        .catch(() => {
          // console.log("取消删除");
        });
    },
    showRuleList(task, index) {
      this.activeTaskId = task;
      this.activeTaskIndex = index;
      // 清空编辑
      this.currentCarmeras.getCameraTask();
      
    },
    changeTask(taskid){
      console.log("任务id",taskid)
      this.activeTaskId = taskid
      this.currentCarmeras.selectTask.forEach((el,index) => {
        console.log("panklei",el,index)
        if (el.task.taskid === taskid) {
          console.log("激活id",index)
          this.activeTaskIndex = index
          this.$refs.ruleEditor.sdksOption = this.currentCarmeras.selectTask[
            this.activeTaskIndex
          ].sdks;
        }
      })
    },
    async ToAll(){
      // console.log(this.currentCarmeras.cameraId, '当前选中文件id')
      let res = await ruleApply2All({
        camera_id: this.currentCarmeras.cameraId
      })
      // console.log(res,'应用到全部')
      if(res && res.success){
        this.$notify({
          type:"success",
          message:"应用到全部成功!"
        })
        this.TreeDataPool.findAllFile({});
      }
    }
  },
  destroyed() {
    this.Carmeras = [];
    this.currentCarmeras = {
      selectTask: [],
      rules: [],
      polygonData: [],
      cameraId: "",
      canvasData: {},
      baseImg: "",
      cameraName: "",
      camearInfo: {},
      loading: false,
      analytics: false,
      dealWay: false,
      runServerName: "",
    };
    this.tasksTable = [];
    this.tableRuleList = [];
  },
};
</script>
<style lang="scss">
.s-linkage-rules {
  width: 100%;
  height: 100%;
  position: relative;
  .top {
    width: 100%;
    height: 174px;
    border-bottom: 1px solid #ccc;
    position: relative;
    
    .top-right {
      float: right;
      width: 58%;
      height: 124px;
    }

    .pre-border {
      left: 0px;
      top: 40%;
    }
    .next-border {
      left: 40%;
      top: 40%;
    }
  }
  .bottom {
    width: 100%;
    height: calc(100% - 174px);
    position: absolute;
    top: 174px;
    //left: -38px;
    .bottom-side {
      height: 100%;
      width: 250px;
      float: left;
      overflow: auto;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 10px;
      box-sizing: border-box;
      .selectTask {
        margin: 10px auto;
        width: 140px;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        position: relative;
        .selectTaskDelete {
          position: absolute;
          right: 10px;
          font-size: 18px;
          cursor: pointer;
        }
      }
    }
    .bottom-right {
      width: calc(100% + 30px);
      height: 100%;
      float: left;
      overflow: auto;
      padding: 10px 38px;
      box-sizing: border-box;
      .draw-and-time-box {
        height: 430px;
        width: 100%;
        padding-bottom: 5px;
        .draw-box,
        .time-box {
          float: left;
          width: 50%;
          height: 100%;
          .img-box {
            height: calc(100% - 32px);
            width: 100%;
            box-sizing: border-box;
            display: flex;
            position: relative;
            overflow: hidden;
            .refresh-btn {
              position: absolute;
              right: 10px;
              top: 10px;
            }
            img {
              width: 90%;
              padding: 5px;
              box-sizing: border-box;
            }
            .swiper-box-container2 {
              max-width: 690px;
            }
          }
        }
        .draw-box {
          width: 576px;
        }
        .draw-box-title {
          text-align: left;
          margin-top: -3px;
          .btn-css {
            position: relative;
            left: 556px;
            margin-bottom: 1px;
          }
        }
      }
    }
  }

  .add-btn {
    color: #3d68e1;
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
  }
  .add-btn:hover {
    color: #2249b4;
  }
  .nocamera-css {
    cursor: not-allowed;
    color: #3d68e1;
    margin-left: 10px;
    font-size: 14px;
  }
  .task-tip {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #cccccc;
    margin-top: 10%;
    margin-left: 38%;
  }
}

.swiper-local-prev,
.swiper-local-next {
  width: 40px;
  height: 40px;
  position: absolute;
  background: #8888;
  top: 48%;
  z-index: 99;
  border-radius: 4em;
  outline: none;
  .icon-btn {
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: 38px;
    cursor: pointer;
  }
}
.swiper-local-prev {
  left: 2px;
}
.swiper-local-prev:hover {
  background: #666;
}
.swiper-local-next {
  right: 3px;
}
.swiper-local-next:hover {
  background: #666;
}
.task-tip {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #cccccc;
  margin-top: 10%;
  margin-left: 38%;
}
</style>