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

<template>
  <!-- 选择事件，及派发按钮 -->
  <dia-log ref="taskDialog" width="30%" :title="title">
    <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-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="60%" title="选择事件">
      <section>
        <el-table
          class="exporttable"
          :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="date"
            label="事件流水号"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="eventName"
            label="事件名称"
            header-align="center"
          >
          </el-table-column>
          <el-table-column
            prop="eventType"
            header-align="center"
            label="事件类型">
          </el-table-column>
          <el-table-column
            prop="eventAddress"
            header-align="center"
            label="事件地址">
          </el-table-column>
          <el-table-column
            prop="eventDate"
            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, autoSubmit, getBpmOperateVo, distributeSaveData } from "@/api/bigScreenApi/robot.js"
export default {
  components:{diaLog},
  data() {
    return {
      total:20,
      title:"任务派发",
      taskForm:{
        task:"",
      },
      options:[],
      rules:{
        task:[
          {required:true,message:"请选择事件",trigger:"change"}
        ]
      },
      info:null,
      tableData: [{
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
      date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }, {
        date: '20240120084248951',
        eventName: '事件名称',
        eventType: '事件类型',
        eventAddress: '地址',
        eventDate:"2019-04-12"
      }
      ]
    }
  },
  mounted() {
    // this.getViewListPageList();
  },
  methods:{
    open(info){
      this.info = info;
      this.$refs.taskDialog.open();
      // this.getViewListPageList();
    },
    getViewListPageList(){
      let data = {'queryValue' : [], "myInstanceClassify" : "all"}
      ViewListPage({viewCode:'event-all-list',pageNo:"1",pageSize:"50"}, data).then(res => {
        console.log(res,"获取的事件列表");
        if(res.code == 200) {
          res.result.records.forEach(item => {
            let obj = {};
            obj["label"] = item.name;
            obj["value"] = item.id;
            this.options.push(obj);
          })
        }
        
      })

    },
    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("事件触发了");
    },
    // 选择事件按钮
    select(){
      this.$refs.eventDialog.open()
    },
    // 取消按钮
    cancel(refForm){
      this.$refs[refForm].resetFields();
      this.$refs.dialog5.Close();
    },
    // 确定按钮
    confirm(refForm){
      this.$refs[formName].validate((valid) => {
        if(valid){
          let ts = Math.round(new Date().getTime()/1000).toString();
          // console.log(ts,"tstststs");
          // console.log(this.taskForm,"taskForm");
          // getBpmOperateVo({_t:ts,id:this.taskForm.task,idType:"formId",formCode:"event-holder"}).then(res=>{
          //   if(res.code == 200) {
          //     return distributeSaveData()
          //   }
          // })
        }
      })
    },
    // 页码变化事件
    pageChange(pages) {
      console.log(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;
    // 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 {
      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: 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;
      }
    }
    .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);
      }
    }
  }
}
::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 {
    .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>