cartask.vue

<template>
  <div style="overflow:hidden">
    <el-row :gutter="6">
      <el-col :span="4">
        <div class="left-box">
          <div class="left-header">任务列表</div>
          <div class="deploy-list" v-for="(item, index) in taskList.list_data" :key="index" @click="selectTask(item, index)" :class="{activetask:index==curTaskIndex}">
            <i :class="{'el-icon-fa-pause':item.enabled,'el-icon-fa-play':!item.enabled,iceon:true,'taskstatus':true}" @click="setTaskStatus($event, item)"></i>
            <span class="deploy-name">{{item.name}}</span>
            <i class="el-icon-fa-edit icon" @click="editTask($event, item)"></i>
            <i class="el-icon-fa-trash pl10 icon" @click="deleteTask($event, item)"></i>
          </div>
          <el-button type="primary" class="task-btn" @click="newtask">新建布控任务</el-button>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="right-box">
          <div class="right-content" v-if="taskDetail">
            <el-row class="mt20">
              <p class="right-title">布控类型</p>
              <el-col class="dbname-box">
                <i class="el-icon-document icon"></i>
                <span class="dbname">{{formatCate(taskDetail.cate)}}</span>
              </el-col>
            </el-row>
            <el-row class="itemplate-box">
              <p class="right-title">布控库</p>
              <el-col class="dbname-box" :xl="6" :lg="6" v-for="item in taskDetail.task_info.libs" :key="item.code">
                <i class="el-icon-fa-folder-open icon"></i>
                <span class="dbname">{{formatDbName(item)}}</span>
              </el-col>
            </el-row>
            <el-row class="itemplate-box" v-show="taskDetail.cate =='find_illegal_oper'">
              <p class="right-title">捕获阀值</p>
              <el-col :lg="24" class="deploy-time">
                <span>{{taskDetail.task_info.capture_count_thresh}}次</span><span style="paddingLeft:5%">* 车辆在任意单个视频通道内出现达到<span style="padding:0 10px;textDecoration:underline">{{taskDetail.task_info.capture_count_thresh}}</span>次后加入对应车库</span>
              </el-col>
            </el-row>
            <el-row class="itemplate-box">
              <p class="right-title">运行时间</p>
              <el-col :lg="6" v-for="(item, index) in taskDetail.task_info.periods" :key="index" class="deploy-time">
                <i class="el-icon-time"></i>
                {{showLocalTime(item[0])}} - {{showLocalTime(item[1])}}
              </el-col>
            </el-row>
            <el-row class="itemplate-box">
              <p class="right-title">运行设备</p>
              <el-col :lg="12" v-for="item in taskDetail.task_info.vchans" :key="item" class="deploy-vchan">
                <i class="el-icon-fa-desktop icon"></i>
                <span>{{formatVchanName(item)}}</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-dialog :title="this.editstatus?'编辑布控任务':'新建布控任务'" :visible.sync="taskVisible">
        <div class="header" style="overflow:hidden">
          <el-form :model="taskForm" ref="taskRuleForm" :rules="taskRules" label-width="100px" class="demo-dynamic">
            <el-form-item label="任务名称"  prop="name">
              <el-col :span="8">
                <el-input v-model="taskForm.name" placeholder="请输入布控任务名称"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="布控库">
              <el-col :span="8">
                <el-select v-model="taskForm.task_info.libs" multiple placeholder="请选择布控库">
                   <el-option v-for="item in dbdata" :key="item.cate" :label="item.name" :value="item.lib"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="布控类型" prop="cate">
              <el-col :span="8">
                <el-select v-model="taskForm.cate" placeholder="请选择布控类型" :disabled='this.editstatus'>
                  <el-option :label="item.name" :value="item.cate" v-for="item in cate" :key="item.cate"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="捕获阀值" v-show="taskForm.cate =='find_illegal_oper'">
              <el-col :span="8">
                  <el-input-number v-model="taskForm.task_info.capture_count_thresh"></el-input-number><span class="pl10 stay">次</span>
              </el-col>
            </el-form-item>
            <el-form-item  v-for="(item, index) in taskForm.task_info.periods" :key="index" label="运行时间"  prop="periods" >
              <el-col :span="19">
                <el-col :span="10" style="margin-bottom:10px;">
                  <el-time-picker is-range v-model="taskForm.task_info.periods[index]" placeholder="选择时间范围" value-format="HH:mm:ss" style="width:100%"></el-time-picker>
                </el-col>
                <el-col :span="1" :offset="1" v-show="index!=0">
                  <div class="el-icon-minus add-task" @click="deleteTimer(index)"></div>
                </el-col>
                <el-col :span="2" v-show="index==taskForm.task_info.periods.length-1" :class="{pl30:index==0}">
                  <div class="el-icon-plus add-task" @click="addTimer"></div>
                </el-col>
              </el-col>
            </el-form-item>
             <!--短息/彩信-->
            <el-col :span="18">
              <el-form-item label="信息推送">
               <el-switch
                  class="mt10 ml20"
                  width="50"
                  style="display: block"
                  v-model="taskForm.task_info.sms.if_send"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="开启"
                  inactive-text="关闭">
              </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="推送方式" v-show="taskForm.task_info.sms.if_send">
                <el-col :span="10">
                  <el-select v-model="taskForm.task_info.sms.use_mms" placeholder="请选择布周期">
                    <el-option label="短信推送" :value="false"></el-option>
                    <el-option label="彩信推送" :value="true"></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <!--/短息/彩信-->
            <!--短信或彩信发送人员-->
            <el-col :span="24" style="overflow:hidden">
              <el-form-item label="信息发送至"  v-show="taskForm.task_info.sms.if_send">
                <el-col :span="10">
                <el-select v-model="taskForm.task_info.sms.users" filterable multiple placeholder="请选择">
                  <el-option
                    v-for="item in smslistData"
                    :key="item.user_unid"
                    :label="item.name"
                    :value="item.user_unid">
                  </el-option>
                </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <!--/短信或彩信发送人员-->
            <el-col :span="24">
              <div style="overflow:hidden">
                <el-col :span="10" :offset="2">
                  <el-input v-model="devLike" placeholder="请输入设备名称"></el-input>
                </el-col>
                <el-col :span="5" :offset="1">
                  <el-button type="primary" @click="checkdev">查询</el-button>
                </el-col>
              </div>
              <div class="mt10">
                <el-form-item label="运行设备"  prop="taskdev">
                  <div  class="dev-box">
                      <el-checkbox-group v-model="taskForm.task_info.vchans">
                        <el-col :span="12" v-for="item in vchansList" :key="item.unid">
                          <el-checkbox :label="item.vchan_refid" class="dev-check">{{item.vchan_name}}</el-checkbox>
                        </el-col>
                      </el-checkbox-group>
                  </div>
                </el-form-item>
              </div>
            </el-col>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="taskVisible = false">取 消</el-button>
          <el-button type="primary" @click="addtask('taskRuleForm')">确 定</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      const _this= this;
      const validateperiods = (rule, value, callback) => {
          _this.taskForm.task_info.periods.forEach((ev) => {
            if(ev == ''){
              callback(new Error(rule.message));
                return;
            } else {
             callback()
            }
          });
        }
      const validatortaskdev =  (rule, value, callback) => {
          if(_this.taskForm.task_info.vchans.length < 1){
              callback(new Error(rule.message));
                    return ;
          }else {
           callback()
          }
        }
      return {
        count:'',
        vdev: "",
        devLike:"",
        curTaskIndex:0,
        vchansList:[],
        allvchanData:[],
        smslistData:[],
        taskDetail:"",
        editstatus:'',//编辑状态
        editunid:'',//编辑id
        taskList: {
          list_data:[]
        },
        cate:[],
        taskVisible: false,
        activeName: "first",
        begintime: "2018.01.01 12:03:00",
        endtime: "2018.01.01 12:03:00",
        vlue3: "",
        dbdata: [],
        taskForm: {
          cate: "", //必填，任务类型
          type:  "traffic",
          name: "", //必填，任务名称
          task_info: {
            //必填，任务详细配置信息
            enabled: true,
            periods: [
              //必填，一天内的布控时间段，24小时制，起始时间必须按照从小到大排列，结束时间必须大于起始时间，后一个时间段的起始时间必须大于前一个时间段的结束时间。
              ['00:00:00', '23:59:59']
            ],
            use_all_vchans: false, //是否对所有视频通道布控，不出现为false，如果为true，则vchans无效。
            vchans: [], //目标视频通道的refid列表
            libs: [], //目标库列表
            sms: {
              //短信配置
              if_send: false ,//是否发送短信，默认false
              use_mms: false,
              users:[]
            },
            capture_count_thresh:0
          }
        },
        taskRules:{
          name:[
             { required: true, message: '请输入任务名称', trigger: 'blur' },
          ],
          cate:[
                { required: true, message: '请选择布控类型', trigger: 'blur' },
              ],
          periods:[
            { required: true, validator: validateperiods, message: '时间范围不能为空！', trigger: 'blur' }
          ],
          taskdev:[
             { required: true, validator: validatortaskdev, message: '运行设备设置不能为空！', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      /**@augments
       * 触发新建任务
       */
      newtask() {
        this.clearForm()
        this.editstatus = 0
        this.taskVisible = true;
      },
       /**@augments
       * 清空表单
       */
      clearForm(params) {
        this.taskForm = {
          cate: "",
          type:  "traffic",
          name: "",
          task_info: {
            enabled: true,
            periods: [
              ['00:00:00', '23:59:59']
            ],
            use_all_vchans: false,
            vchans: [],
            libs: [],
            sms: {
              if_send: false ,//是否发送短信，默认false
              use_mms: false,
              users:[]
            },
            capture_count_thresh:0
          }
        }
      },
      /**@augments
       * 获取任务列表
       */
      getTaskList() {
        return new Promise((resolve, reject) => {
          this.axios
            .get(this.IP + "/api/v1/alarm/monitor_tasks", {
              params: {
                limit:20,
                offset:0,
                type:'traffic'
              }
            })
            .then(response => {
              this.taskList = response.data;
              resolve(response.data);
            });
        });
      },

      /**@augments
       * 开启或关闭任务
       */
      setTaskStatus(event,data) {
        event.cancelBubble = true;
        this.editstatus = 1;
        let url = this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid;
        this.getTaskDetail(data.unid,(response)=>{
          this.taskDetail.enabled = !this.taskDetail.enabled;
          this.addtaskapi(url, this.taskDetail).then((response) => {
            this.getTaskList();
          });
        });
      },

      /**@augments
       * 当前选中的任务
       */
      selectTask(data, index) {
        this.curTaskIndex = index;
        this.getTaskDetail(data.unid);
      },

      /**@augments
       * 获取任务详情
       */
      getTaskDetail(unid, callback) {
          this.axios.get(this.IP + "/api/v1/alarm/monitor_tasks/" + unid).then(response => {
          this.taskDetail = response.data;
          console.log(this.taskDetail)
          if(callback)callback(response);
          });
      },

      /**@augments
       * 添加任务操作
       */
      addtask(formName) {
        const _vthis = this;
        let url = this.IP + "/api/v1/alarm/monitor_tasks";

        if (this.editstatus == 1){
          url = this.IP + "/api/v1/alarm/monitor_tasks/" + this.editunid;
        }
        this.taskForm.task_info.periods.forEach((e) => {
          e[0] = this.setUtcTime(e[0])
          e[1] = this.setUtcTime(e[1])
        });

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addtaskapi(url, this.taskForm).then(response => {
              this.$refs[formName].resetFields();
              this.taskVisible = false;
              if (!this.editstatus) {
                this.curTaskIndex = 0
              }
              let unid = response.data.unid || this.editunid
              this.editstatus = 0
              this.getTaskList().then(response => {
                this.getTaskDetail(unid);
              });
            })
          } else {
            return false;
          }
        });
      },
      /**@augments
      *添加任务 API
       */
      addtaskapi (url, data) {
        return new Promise((resolve, reject) => {
          this.axios.post(url , data).then (response => {
            resolve(response)
          })
        })
      },

      /**@augments
       * 编辑任务
       */
      editTask(event, data) {
        this.clearForm()

        this.axios
          .get(this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid)
          .then(response => {
            this.taskForm = response.data;
            this.editstatus = 1;
            this.editunid = response.data.unid;
            this.taskForm.task_info.periods.forEach((e) => {
              e[0] = this.showLocalTime(e[0]);
              e[1] = this.showLocalTime(e[1]);
            });
            this.taskVisible = true;
          });
      },

      /**@augments
       * 删除任务
       */
      deleteTask(event, data) {
        event.cancelBubble = true;
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.axios
              .delete(this.IP + "/api/v1/alarm/monitor_tasks/" + data.unid)
              .then(response => {
                let type,msg
               if (response.data.ecode == 200) {
                   type = 'success'
                   msg = '删除成功！'
                   this.getTaskList().then(response => {
                    this.getTaskDetail(response.list_data[0].unid);
                  });
               }else {
                   type = 'error'
                   msg = '删除失败！'
               }
                this.$message({
                  type: type,
                  message: msg
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      },
      /**@augments
       * 添加时间
       */
      addTimer() {
        this.taskForm.task_info.periods.push(['00:00:00', '23:59:59']);
      },
      /**@augments
       * 删除时间
       */
      deleteTimer(index) {
        this.taskForm.task_info.periods.splice(index, 1);
      },

      /**@augments
       * 筛选设备
       */
      checkdev() {
         const searchData = [];
        if (this.devLike != '') {
          for (let i = 0; i < this.allvchanData.length; i++) {
            if (this.allvchanData[i].vchan_name.indexOf(this.devLike) > -1) {
              searchData.push(this.allvchanData[i]);
            }
          }
          this.vchansList = searchData;
        } else {
          this.vchansList = this.allvchanData;
        }
      },

      /**@augments
       * 格式化库名
       */
      formatDbName(data) {
        let dbname = '';
        this.dbdata.forEach((ev) => {
          if(ev.lib == data) {
            dbname = ev.name;
          }
        });
         return dbname
      },
      formatCate(data) {
        let str = '未知';
        this.cate.forEach((el) => {
          if (el.cate==data) {
            str = el.name
          }
        })
        return str
      },
      /**@augments
       * 格式化设备名称
       */
      formatVchanName(data) {
        let vchanName = '未知';
        this.allvchanData.forEach((ev) => {
          if(ev.vchan_refid == data) {
            vchanName = ev.vchan_name;
          }
        });
        return vchanName;
      },
      /**@augments
       * 获取短信推送名单
       */
      getSmsList(){
        this.axios.get(IP + "/api/v1/auth/users", {
          params: {
            limit: 10000,
            offset: 0,
            user_type: "user",
            norm_type: "login"
          }
        }).then((response) => {
          this.smslistData = response.data.list_data;
        });
      },
    },
    created() {
      this.getSmsList();
      /**@augments
       * 获取任务列表并初始化首个任务
       */
      this.getTaskList().then(response => {
        this.getTaskDetail(response.list_data[0].unid);
      });
      /**@augments
       * 获取库信息
       */
      this.faceapi.getCarDbData().then(response => {
        this.dbdata = response.list_data
      });

      /**@augments
       * 获取设备信息
       */
      this.faceapi.getVchanList().then(response => {
        this.vchansList = response.list_data;
        this.allvchanData = response.list_data;
      });
       /**@augments
       * 获取布控类别
       */
      this.faceapi.getMonitor().then(response=>{
        this.cate = response
        console.log('cate',this.cate)
      })
    }
  };

</script>
<style lang="stylus" scoped>
  .left-box {
    height: 750px;
    box-shadow:0px 0px 7px 2px #2bc7ef inset;
    overflow: hidden;
    color: #fff;
    position: relative;

    .task-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  input {
     background #393e52!important
  }
  .right-box {
    box-shadow:0px 0px 7px 2px #2bc7ef inset;
    height: 750px;
    overflow: hidden;
    p {
      text-align left
    }
  }

  .left-header {
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #2A2C3B;
    color: #9E9FA5;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }

  .deploy-list {
    height: 50px;
    line-height: 50px;
    padding-left: 15px;

    .icon {
      font-size: 16px !important;
      cursor: pointer;
    }
  }

  .deploy-name {
    padding-left: 15px;
    display: inline-block;
    width: 60%;
  }
  .deploy-name:hover {
    text-decoration underline;
    cursor default
  }
  .right-title {
    font-size: 18px;
    color: #9E9FA5;
    font-weight: 600;
  }

  .right-content {
    width: 96%;
    margin: 0px auto;
    text-align left
  }
  .itemplate-box {
    margin-bottom 20px

  }
  .dbname-box {
    .icon {
      font-size: 40px !important;
      color: #fff;
      vertical-align: top;
    }

    .dbname {
      color: #ffffff;
      font-size: 18px;
      display: inline-block;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
  }

  .deploy-time {
    color: #fff;
  }

  .deploy-vchan {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;

    .icon {
      font-size: 20px !important;
    }
  }

  .add-task {
    cursor: pointer;
  }

  .dev-check {
    width: 100%;
    color: #fff;
    text-align left
  }

  .el-form-item__content {
    margin-left: 10px !important;
    overflow: hidden;
  }

  .dev-box {
    height: 200px;
    overflow: auto;
  }

  .plr10 {
    padding: 0 10px;
  }

  .mb10 {
    margin-bootm: 10px;
  }

  .pl30 {
    padding-left: 30px;
  }
   .activetask {
    background rgba(43,199,239,0.8)
  }
  .taskstatus{
    cursor pointer
  }
</style>