JiangningUrbanManagePc/src/views/components/personageTask/index.vue

<template>
  <!-- 选择事件，及派发按钮 -->
  <dia-log ref="taskDialog" width="30%" :title="title" @close="close">
    <el-form :inline="true" :model="taskForm" class="demo-form-task" ref="formTask" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>人员名称：</span>
              </div>
            </template>
            <div class="form-div">{{ info ? info.userName : "" }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item>
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>当前地址：</span>
              </div>
            </template>
            <div class="form-div">{{ info ? info.address : "" }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="task">
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>事件派发：</span>
              </div>
            </template>
            <div class="select-input">
              <el-input
                placeholder="请选择事件"
                v-model="taskForm.task"
                clearable>
              </el-input>
              <div class="btn" @click="select">选择</div>
            </div>
            <!-- <el-select v-model="taskForm.task" placeholder="请选择事件">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select> -->

          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="openTime">
            <template slot="label">
              <div class="new-event-form">
                <div class="ball"></div>
                <span>截至时间：</span>
              </div>
            </template>
            <div class="right">
              <el-date-picker
                v-model="taskForm.openTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间"
              >
              </el-date-picker>
              <img class="data_icon" src="@/assets/images/timeIcon.png" alt="" />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="btns">
            <div class="btn" @click="cancel('formTask')">取消</div>
            <div class="btn btnTwo" @click="confirm('formTask')">确定</div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <dia-log ref="eventDialog" width="70%" title="选择事件">
      <section>
        <el-table
          class="exporttable"
          v-loading="TabLoading"
          element-loading-background="rgba(11, 34, 72, 0.8)"
          :data="tableData"
          :row-class-name="tableRowClassName"
          :header-cell-style="tableHeaderCellStyle"
          :row-style="{height: 40 + 'px'}"
          :cell-style="{padding:0+'px'}"
          style="width: 100%">
          <el-table-column
            prop="rand_number"
            label="事件流水号"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="事件名称"
            :show-overflow-tooltip="true"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="type"
            header-align="center"
            :show-overflow-tooltip="true"
            label="事件类型">
          </el-table-column>
          <el-table-column
            prop="address"
            header-align="center"
            :show-overflow-tooltip="true"
            label="事件地址">
          </el-table-column>
          <el-table-column
            prop="open_time"
            header-align="center"
            label="事件发生时间">
          </el-table-column>
          <el-table-column
            prop="status"
            header-align="center"
            label="事件状态">
          </el-table-column>
          <el-table-column
            prop=""
            header-align="center"
            label="操作">
            <template slot-scope="scope">
              <div class="btns">
                <div class="btn" @click="zhipai(scope.row)">指派</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="myPagination">
          <el-pagination
            background
            @current-change="pageChange"
            :page-sizes="[10]"
            :current-page="1"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </section>
    </dia-log>
  </dia-log>
</template>
<script>
import diaLog from "../../components/dialog/index.vue"
import { ViewListPage, formEngineSaveData, auditSubmit } from "@/api/bigScreenApi/robot.js"
import { getUserByImei } from "@/api/bigScreenApi"
export default {
  components:{diaLog},
  data() {
    return {
      total:0,
      title:"任务派发",
      taskForm:{
        task:"",
        openTime:"",
      },
      options:[],
      rules:{
        task:[
          {required:true,message:"请选择事件",trigger:"change"}
        ]
      },
      info:null,
      tableData: [],
      TabLoading:false,
      query:{
        formKey:"event-holder",
        isFlow:"true",
      },
      eventInfo:{},
      phonenumber:"",
    }
  },
  mounted() {
    // this.getViewListPageList();
  },
  methods:{
    open(info){
      this.info = info;
      this.$refs.taskDialog.open();
      console.log(info,"info");
      getUserByImei({imei: info.imei}).then(res=>{
        if(res.code == 200) {
          this.phonenumber = res.data[0].phonenumber;
        }
      })
    },
    getViewListPageList(page){
      this.TabLoading = true;
      let data = {'queryValue' : [{
      "colCode": "status",
      "queryValue": "0"
    }], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
      ViewListPage({viewCode:'event-all-list', pageNo: page || 1, pageSize:10}, data).then(res => {
        if(res.code == 200) {
          this.total = res.result.total;
          this.tableData = res.result.records;
        }
        this.TabLoading = false;
      }).catch(err =>{
        this.TabLoading = false;
      })

    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    },
    tableHeaderCellStyle(){
      return 'font-size: 14px;font-family: "Source Han Sans CN-Regular";font-weight: 400;color: #d3eef2;'
    },
    zhipai(row){
      // console.log("事件触发了");
      this.taskForm.task = row.name
      this.eventInfo = row;
      this.$refs.eventDialog.Close();
    },
    // 选择事件按钮
    select(){
      this.$refs.eventDialog.open()
      this.getViewListPageList();
    },
    close(){
      this.$nextTick(()=>{
        this.$refs['formTask'].resetFields();
      })
    },
    // 取消按钮
    cancel(refForm){
      this.$refs[refForm].resetFields();
      this.$refs.taskDialog.Close();
    },
    // 确定按钮
    confirm(refForm){
      this.$refs[refForm].validate((valid) => {
        if(valid){
          let body = {
            formData:{
              "report-event":{
                id: this.eventInfo.id,                                           // 事件id
                tasks:{
                  taskIsdiscard: "0",
                  taskVoidReason: "",
                  taskType: "2",
                  taskRandNumber:this.getCurrentTime(),                          // 指派时的唯一值年月日时分秒毫秒
                  taskDeadline:this.taskForm.openTime,                           // 截至时间
                  taskStatus: "6",
                  taskName:this.eventInfo.name                                   // 任务名称
                },
                status: "1"
              }
            },
            saveParameter:{},
            docList:[],
          }
          formEngineSaveData(this.query,body).then(res=>{
            if(res.code == 200) {
              auditSubmit({formId:res.result,phone:this.phonenumber,depName:"集团有限公司环卫管理部"}).then(resTwo=>{
                if(resTwo.code == 200) {
                  this.$message({
                    message: "任务派发成功",
                    type: "success"
                  });
                  this.cancel("formTask")
                  this.$refs.taskDialog.Close();
                }
              }).catch(()=>{

              })
            }
          })
        }
      })
    },
    getCurrentTime() {
      var currentDate = new Date();
      var year = currentDate.getFullYear();
      var month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
      var day = ('0' + currentDate.getDate()).slice(-2);
      var hours = ('0' + currentDate.getHours()).slice(-2);
      var minutes = ('0' + currentDate.getMinutes()).slice(-2);
      var seconds = ('0' + currentDate.getSeconds()).slice(-2);
      var milliseconds = ('00' + currentDate.getMilliseconds()).slice(-3);
      return year + month + day + hours + minutes + seconds + milliseconds;
    },
    // 页码变化事件
    pageChange(pages) {
      // console.log(pages);
      this.getViewListPageList(pages);
    }
  },
}
</script>
<style lang="scss" scoped>
::v-deep .demo-form-task {
  .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    .btn {
      width: 91px;
      height: 30px;
      background: rgba(0, 60, 116, 0.6);
      box-shadow: inset 0px 0px 6px 0px #00c2ff;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid rgba(181, 207, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: "Source Han Sans CN-Regular";
      font-weight: 400;
      color: #d3eef2;
      line-height: 20px;
      cursor: pointer;
    }
    .btnTwo {
      margin-left: 15px;
    }
  }
  .el-form-item {
    width: 100%;
    display: flex;
  }
  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    content: ' ';
    width: 0px;
    margin-right: 0px;
  }
  .new-event-form {
    display: flex;
    align-items: center;
    .ball {
      width: 4px;
      height: 4px;
      background: #daebff;
      box-shadow: 0px 0px 10px 5px rgba(0, 119, 255, 0.25),
        0px 0px 5px 0px rgba(229, 241, 255, 0.25);
      border-radius: 20px 20px 20px 20px;
      margin-right: 15px;
    }
    span {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #CCCCCC;
      line-height: 35px;
    }
  }
  .el-form-item__content {
    flex: 1;
    padding-right: 20px;
    // background-image: url("../../../assets/images/timebg.png");
    .form-div {
      font-size: 14px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      color: #CCCCCC;
      line-height: 35px;
    }
    background-size: 100% 100%;
    // width: 250px;
    height: 35px;
    .el-input__prefix {
      display: none;
    }
    // .el-input--medium {
    //   background-color: transparent;
    //   width: 250px;
    // }
    .select-input,.el-date-editor {
      display: flex;
      align-items: center;
      width: 100%;
      .el-input {
        background-color: transparent;
        background-image: url("../../../assets/images/timebg.png");
        background-size: 100% 100%;
        // width: 400px;
        flex: 1;
        height: 35px;
      }
      .el-input__inner {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 35px;
        font-size: 14px;
        font-family: "Source Han Sans CN-Medium";
        font-weight: 500;
        color: #e9f4ff;
      }
      .el-input__inner::placeholder {
        /* 在这里添加你想要修改的 placeholder 样式 */
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
      }
      .btn {
        width: 91px;
        height: 35px;
        margin-left: 20px;
        background: rgba(0, 60, 116, 0.6);
        box-shadow: inset 0px 0px 6px 0px #00c2ff;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid rgba(181, 207, 255, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        line-height: 20px;
        cursor: pointer;
      }
    }
    .el-select {
      background-color: transparent;
      background-image: url("../../../assets/images/timebg.png");
      background-size: 100% 100%;
      width: 400px;
      height: 35px;
      .el-input
        .el-input__suffix
        .el-input__suffix-inner
        .el-icon-arrow-up {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      .el-input
        .el-input__suffix
        .el-input__suffix-inner
        .el-icon-arrow-up::before {
        content: "";
        background: url("~@/assets/images/pull-down.png") center center
          no-repeat;
        background-size: 100% 100%;
        // position: absolute;
        width: 100%;
        height: 22px;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        transform: rotate(180deg);
      }
      .el-input__suffix .el-input__suffix-inner .el-select__caret {
        width: 22px;
      }
      .el-input__suffix {
        margin-right: 5px;
      }
      .el-input__inner {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 35px;
        font-size: 14px;
        font-family: "Source Han Sans CN-Medium";
        font-weight: 500;
        color: #e9f4ff;
      }
      .el-input__inner::placeholder {
        /* 在这里添加你想要修改的 placeholder 样式 */
        font-size: 14px;
        font-family: "Source Han Sans CN-Regular";
        font-weight: 400;
        color: #d3eef2;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
      }
    }
    .right {
      background-image: url("../../../assets/images/timebg.png");
      // width: 350px;
      width: 100%;
      margin-right: 20px;
      box-sizing: border-box;
      height: 35px;
      background-size: 100% 100%;
      position: relative;
      ::v-deep .el-input__prefix {
        display: none;
      }
      .el-date-editor {
        background-color: transparent;
        // width: 350px;
        .el-input__inner {
          background-color: transparent;
          border: none;
          width: 100%;
          height: 35px;
          font-size: 14px;
          font-family: "Source Han Sans CN-Medium";
          font-weight: 500;
          color: #e9f4ff;
          padding: 0px 15px;
        }
        .el-input__inner::placeholder {
          /* 在这里添加你想要修改的 placeholder 样式 */
          font-size: 14px;
          font-family: "Source Han Sans CN-Regular";
          font-weight: 400;
          color: #d3eef2;
          -webkit-background-clip: text;
          -webkit-text-fill-color: rgba(211, 238, 242, 0.2);
        }
      }
      
      .data_icon {
        position: absolute;
        right: 10px;
        top: 8px;
        width: 20px;
      }
    }
  }
}
::v-deep section {
  padding-right: 25px;
  // .exporttable {
  //   border-color: #003C74;
  // }
  .el-table {
    font-size: 14px;
    font-family: "Source Han Sans CN-Regular";
    font-weight: 400;
    color: #d3eef2;
    // line-height: 20px;
  }
  .el-table .warning-row {
    background-color: rgba(187,220,255,0.2);
  }
  .el-table .success-row {
    background-color: rgba(216,216,216,0.05);
  }
  .el-table tbody tr:hover>td { 
    background-color: rgba(6, 16, 33, 0) !important
  }
  // .el-table tbody tr {
  //   pointer-events:none;
  // }

  .el-table, .el-table__expanded-cell{
    background-color: transparent;
  }
  .el-table td.el-table__cell {
    border: none;
  }
  .el-table th.el-table__cell {
    border: none;
  }
  /* 表格内背景颜色 */
  .el-table th,
  .el-table tr,
  .el-table td {
    background-color: transparent;
    text-align: center;
    height: 40px;
  }
  .el-table tr {
    font-size: 14px;
    font-family: "Source Han Sans CN-Regular";
    font-weight: 400;
    color: #d3eef2;
    // line-height: 20px;
  }
  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }
  .btns {
    display: flex;
    justify-content: center;
    .btn {
      width: 91px;
      height: 35px;
      margin: 0 20px;
      background: rgba(0, 60, 116, 0.6);
      box-shadow: inset 0px 0px 6px 0px #00c2ff;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid rgba(181, 207, 255, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: "Source Han Sans CN-Regular";
      font-weight: 400;
      color: #d3eef2;
      line-height: 20px;
      cursor: pointer;
    }
  }
  .myPagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    .el-pagination__total,.el-pagination__jump {
      font-size: 14px;
      font-family: "Source Han Sans CN-Regular";
      font-weight: 400;
      color: #d3eef2;
    }
  }
}
</style>