facetask.vue

<template>
  <div style="overflow:hidden">
    <el-row class="nav-bar-two"></el-row>
    <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" :key="item.unid" @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 style="overflow:hidden">
              <p class="right-title">布控类型</p>
              <el-col class="dbname-box">
                <i class="el-icon-document icon"></i>
                <span class="dbname">{{taskDetail.cate | filterDeployType}}</span>
              </el-col>
            </el-row>
            <p class="right-title">布控库</p>
            <el-col class="dbname-box" :xl="6" :lg="6" v-for="item in taskDetail.task_info.crucial_types" :key="item.code">
              <i class="el-icon-fa-folder-open icon"></i>
              <span class="dbname">{{formatDbName(item)}}</span>
            </el-col>
            <!--运行时间-->
            <el-row class="time-box" v-if="taskDetail.cate !='face_stay'"  v-show="taskDetail.task_info.period_type && taskDetail.task_info.period_type != 'none'">
              <p class="right-title">运行时间</p>
              <el-col :lg="10" v-for="(item, index) in taskDetail.task_info.periods" :key="index" class="deploy-time">
                <i class="el-icon-time"></i>
                {{formatShowTImer(item[0])}} - {{formatShowTImer(item[1])}}
              </el-col>
            </el-row>
            <!--/运行时间-->
            <!--非周期任务运行时间-->
            <el-row  class="time-box"  v-show="taskDetail.task_info.period_type && taskDetail.task_info.period_type == 'none'">
              <p class="right-title">运行时间</p>
              <el-col :lg="10" class="deploy-time">
                <i class="el-icon-time"></i>
                {{showLocalTime(taskDetail.task_info.start_dt)}} - {{showLocalTime(taskDetail.task_info.end_dt)}}
              </el-col>
            </el-row>
            <!--/非周期任务运行时间-->
            <!--滞留阈值-->
            <el-row class="time-box" v-show="taskDetail.cate =='face_stay'">
              <p class="right-title">滞留阈值</p>
              <el-col :lg="8"  class="deploy-time">
                <i class="el-icon-time"></i>
                {{stayMsec(taskDetail.task_info.stay_msec)}}
              </el-col>
            </el-row>
            <!--/滞留阈值-->
            <!--布控人员-->
            <el-row class="deploy-vchan-box" v-if="taskDetail.task_info.crucial_faces" v-show="taskDetail.task_info.crucial_faces.length > 0">
              <p class="right-title">布控人员</p>
              <el-col :lg="4" v-for="item in taskDetail.task_info.crucial_faces" :key="item" class="deploy-vchan">
                <i class="el-icon-fa-user icon"></i>
                <span>{{formatFaceName(item)}}</span>
              </el-col>
            </el-row>
            <!--/布控人员-->
            <!--运行设备-->
            <el-row class="deploy-vchan-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="title" :visible.sync="taskVisible" width="50%">
        <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="10">
                <el-input v-model="taskForm.name" placeholder="请输入布控任务名称"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="布控库">
              <el-col :span="10">
                <el-select v-model="taskForm.task_info.crucial_types" multiple placeholder="请选择布控库">
                   <el-option v-for="item in dbdata" :key="item.unid" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="布控类型" prop="cate">
              <el-col :span="10">
                <el-select v-model="taskForm.cate" :disabled="editstate" placeholder="请选择布控类型">
                  <el-option :label="item.name" :value="item.type" v-for="item in cate" :key="item.type"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="任务周期">
              <el-col :span="10">
                <el-select v-model="taskForm.task_info.period_type" placeholder="请选择布周期">
                  <el-option label="周期任务" value="day"></el-option>
                  <el-option label="非周期任务" value="none"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="滞留阈值" v-show="taskForm.cate =='face_stay'">
              <el-col :span="10">
                  <el-input-number v-model="day" :min="0"></el-input-number><span class="pl10 stay">天</span>
                  <el-input-number  v-model="hours" class="mt10" :min="0" :max="24"></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" prop="periods" :key="index" label="运行时间"  v-if="taskForm.cate !='face_stay' && taskForm.task_info.period_type == 'day'">
              <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-form-item label="周期时间"  v-if="taskForm.cate !='face_stay' && taskForm.task_info.period_type != 'day'">
              <el-col :span="19">
                 <el-date-picker
                  v-model="periodtimer"
                  type="datetimerange"
                  value-format ="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-form-item>
            <!---->
            <el-form-item label="执勤人员"  v-if="taskForm.task_info.period_type != 'day'">
              <el-col :span="10">
              <el-select v-model="taskForm.task_info.crucial_faces" filterable multiple placeholder="请选择">
                <el-option
                  v-for="item in whiteList"
                  :key="item.unid"
                  :label="item.name"
                  :value="item.unid">
                </el-option>
              </el-select>
              </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()
          }
        }
      // const validatperiodtimer =(rule, value, callback) => {
      //   console.log(_this.periodtimer)
      //     if(_this.periodtimer.length < 1){
      //         callback(new Error(rule.message));
      //               return;
      //     }else {

      //      callback()
      //     }
      //   }
      return {
        value4:'',
        title:"新建布控任务",
        day:0,
        hours:0,
        vdev: "",
        devLike:"",
        curTaskIndex:0,
        vchansList:[],
        allvchanData:[],
        smslistData:[],
        taskDetail:"",
        editstatus:'',//编辑状态
        editunid:'',//编辑id
        taskList: [],
        cate:[],
        taskVisible: false,
        activeName: "first",
        begintime: "",
        endtime: "",
        value3: "",
        editstate:false,
        dbdata: [],
        whiteList:'',
        periodtimer:[],//开始结束日期
        taskForm: {
          cate: "", //必填，任务类型
          name: "", //必填，任务名称
          enabled: true,//必填，任务详细配置信息
          task_info: {
            periods: [
               ['00:00:00', '23:59:59']
            ],
            use_all_vchans: false, //是否对所有视频通道布控，不出现为false，如果为true，则vchans无效。
            vchans: [], //目标视频通道的refid列表
            crucial_types: [], //目标库列表
            sms: {
              if_send: false ,//是否发送短信，默认false
              use_mms: false,
              users:[]
            },
            stay_msec:'',
            period_type:'day',
            start_dt:'',
            end_dt:'',
            crucial_faces:[]
          }
        },
        taskRules:{
          name:[
             { required: true, message: '请输入任务名称', trigger: 'blur' },
          ],
          // periodtimer:[{
          //   required: true,validator: validatperiodtimer, 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.title = "新建布控任务";
        this.taskVisible = true;
        this.editstate = false;
        this.$refs.taskRuleForm.resetFields();
        this.taskForm.task_info.periods =[['00:00:00', '23:59:59']];
        this.taskForm.task_info.crucial_types = [];
        this.taskForm.task_info.vchans = [];
      },

      /**@augments
       * 获取任务列表
       */
      getTaskList() {
        return new Promise((resolve, reject) => {
          this.axios
            .get(FACEWEB + "/monitor_tasks", {
              params: {
                "is_deleted":false
              }
            })
            .then(response => {
              this.taskList = response.data.list_data;
              resolve(response.data.list_data);
            });
        });
      },

      /**@augments
       * 开启或关闭任务
       */
      setTaskStatus(event,data) {
        event.cancelBubble = true;
        this.editstatus = 1;
        let url = FACEWEB + "/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(FACEWEB + "/monitor_tasks/" + unid).then(response => {
          this.taskDetail = response.data;
          if(callback)callback(response);
          });
      },

      /**@augments
       * 添加任务操作
       */
      addtask(formName) {
        const _vthis = this;
        let url = FACEWEB + "/monitor_tasks/";
        if (this.editstatus == 1){//编辑任务
          url = FACEWEB + "/monitor_tasks/" + this.editunid;
        }
        if(this.taskForm.cate != "face_stay"){
            this.taskForm.task_info.periods.forEach((e,index) => {
              if(e[0] && e[1]) {
                e[0] = this.setUtcTime(e[0]);
                e[1] = this.setUtcTime(e[1]);
              } else {
                e[0] = '';
                e[1] = '';
              }
            });
        } else {
          this.taskForm.task_info.periods = [];
        }
        if(this.taskForm.task_info.period_type == 'none') {
          if(this.periodtimer.length > 0) {
            this.taskForm.task_info.start_dt = this.periodtimer[0];
            this.taskForm.task_info.end_dt = this.periodtimer[1];
          }
        }
        this.$refs["taskRuleForm"].validate((valid) => {
          if (valid) {
            _vthis.taskForm.task_info.stay_msec = _vthis.formatStayTime();
            _vthis.addtaskapi(url, this.taskForm).then(response => {
              _vthis.$refs["taskRuleForm"].resetFields();
              _vthis.taskForm.task_info.periods = [[]]; //清空时间
              _vthis.taskForm.task_info.vchans = [];//清空相机
              _vthis.taskForm.task_info.crucial_types = [];//清空布控库
              this.taskVisible = false;
              this.editstatus = 0
              this.getTaskList();
            })
          } else {
            console.log(valid);
            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.title = "编辑任务";
        this.editstate = true;
        event.cancelBubble = true;
        this.axios
          .get(FACEWEB + "/monitor_tasks/" + data.unid)
          .then(response => {
            debugger
            this.taskForm = response.data;
            this.editstatus = 1;
            this.editunid = response.data.unid;
            if(this.taskForm.task_info.periods.length > 0) {
              this.taskForm.task_info.periods.forEach((e,index) => {
                e[0] = this.showLocalTime(e[0]);
                e[1] = this.showLocalTime(e[1]);
              });
            } else {
              this.taskForm.task_info.periods.push([]);
            }
            let timer= this.taskForm.task_info.stay_msec;
            this.day = parseInt(timer/(24*60*60));
            this.hours = (timer%(24*60*60))/(60*60);
            this.taskVisible = true;
            this.periodtimer = [data.task_info.start_dt,data.task_info.end_dt];
          });
      },

      /**@augments
       * 删除任务
       */
      deleteTask(event, data) {
        event.cancelBubble = true;
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.axios
              .delete(FACEWEB + "/monitor_tasks/" + data.unid)
              .then(response => {
                this.getTaskList();
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              });
          })
          .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
      *格式化滞留阈值以秒给后台
       */
       formatStayTime() {
         return this.day*24*60*60 + this.hours*60*60
       },
       /**@augments
       *格式化滞留阈值以
       *天+小时方式显示
        */
       stayMsec(data){
         let result = '';
         if(data) {
           if(data >= 24*60*60){
              let day = parseInt(data/(24*60*60));
              let hour = (data%(24*60*60))/(60*60);
              result = day + "天" + hour +"小时";
            } else {
              let hour = data/(60*60);
              result = hour + "小时";
            }
         } else {
           result = '';
         }

         return result;
       },
      /**@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
       * 格式化显示时间
       */
      formatShowTImer(data) {
      let date = this.formatPickerTimer(data);
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
      let mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
      let secondes = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();;
      return hours + ":" + mins + ":" + secondes;
      },

      /**@augments
       * 格式化timerpicker 所需时间
       */
      formatPickerTimer(timer) {
        if(timer) {
          let date = new Date();
          let Y = date.getFullYear(),
              M =  date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1,
              D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
              H = Number(timer.split(":")[0]) + 8,
              m = timer.split(":")[1],
              s = timer.split(":")[2];
          return new Date(Y ,M ,D ,H ,m ,s);
        } else {
          return '';
        }
      },
      /**@augments
       * 格式化布控人名
       */
      formatFaceName(data){
        let name = '';
        this.whiteList.forEach(ele => {
          if(ele.unid == data) {
            name = ele.name
          }
        })
          return name
      },
      /**@augments
       * 格式化库名
       */
      formatDbName(data) {
        let dbname = '';
        this.dbdata.forEach((ev) => {
          if(ev.code == data) {
            dbname = ev.name;
          }
        });
         return dbname
      },
      /**@augments
       * 格式化设备名称
       */
      formatVchanName(data) {
        let vchanName = '';
        this.allvchanData.forEach((ev) => {
          if(ev.vchan_refid == data) {
            vchanName = ev.vchan_name;
            return false
          }
        });
        return vchanName;
      },
      getVchanList(){
      this.axios
        .get(IP + "/api/v1/org/vchans/list", {}).then(response => {
          this.vchansList = response.data.list_data;
          this.allvchanData = response.data.list_data;
        });
      },
      /**@augments
      *获取布控名单
      */
      getwhiteList(){
        this.axios
          .get(FACEWEB + "/faces/crucial_faces", {
            params: {
              offset: 0,
              limit: 2000,
              is_crucial: true,
              is_active: true,
              sex: this.facesex,
              name__like: '',
              card_id__like: '',
              crucial_type: 'dl_white',
              resident_unids: '',
            }
          }).then( (response)=> {
            this.whiteList = response.data.list_data;
          });
      },
      /**@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.getwhiteList();
      this.getVchanList();
      this.getSmsList();
      /**@augments
       * 获取任务列表并初始化首个任务
       */
      this.getTaskList().then(response => {
        if(response.length > 0)
          this.getTaskDetail(response[0].unid);
      });
      this.faceapi.getFaceDbData().then(res => {
         this.dbdata = res.list_data;
      });
      this.cate = this.$store.state.alarmtype;
    }
  };

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

  .right-box {
    box-shadow:0px 0px 7px 2px #2bc7ef inset;
    height: 750px;
    overflow: hidden;
  }

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

  .right-title {
    font-size: 18px;
    color: #9E9FA5;
    font-weight: 600;
  }

  .right-content {
    width: 96%;
    margin: 20px auto;
  }

  .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;
    margin-bottom: 20px;
  }

  .time-box {
    margin-top: 80px;
  }

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

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

  .add-task {
    cursor: pointer;
  }

  .dev-check {
    width: 100%;
    margin-left: 0px;
    color: #fff;
  }

  .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
  }
  .stay{
    color: #fff
  }

</style>