hycw-ui/src/views/distributionnetwork/vehicle-monitoring/components/WorkTrack.vue

<template>
  <el-dialog
    title="作业轨迹"
    :visible.sync="visible"
    width="1200px"
    append-to-body
    @close="handleClose"
  >
    <div class="track-container">
      <el-form size="small" :inline="true">
      		<el-form-item label="车牌号" prop="vehicleNo">
      		  <el-input
      		    v-model="queryParams.vehicleNo"
      		    placeholder="车牌号"
      		  />
      		</el-form-item>
      		<el-form-item label="日期" prop="planDate">
      		  <el-date-picker
      		    v-model="queryParams.planDate"
      		    style="width: 240px; margin-right: 8px"
      		    type="daterange"
      		    range-separator="至"
      		    start-placeholder="开始日期"
      		    end-placeholder="结束日期"
      		    value-format="yyyy-MM-dd"
      		    :clearable="false"
      		  >
      		  </el-date-picker>
      		</el-form-item>
      		<el-form-item>
      		  <el-button
      		    type="primary"
      		    icon="el-icon-search"
      		    size="mini"
      		    @click="handleQuery"
      		    >搜索</el-button
      		  >
      		  <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
      		    >重置</el-button
      		  >
      		</el-form-item>
       </el-form>
			
			<!--div class="mb20">车牌号：{{ vehicleInfo.vehicleNo }}</div-->
      <el-table :data="trackList" border style="width: 100%" v-loading="loading">
        <el-table-column
          prop="weekPlanNo"
          label="周计划编号"
          align="center"
          width="140"
        ></el-table-column>
        <el-table-column
          prop="projNm"
          label="项目名称"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="planNm"
          label="计划名称"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="submitOrgNm"
          label="报送单位名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="mgmtOrgNm"
          label="管理单位名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="ovhaulConstOrgNm"
          label="检修施工单位名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="opMaintOrgNm"
          label="运维单位名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="subsOrLineNm"
          label="变电站/线路名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="opRiskLvlDsc"
          label="作业风险等级"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="elecgdRiskLvlDsc"
          label="电网风险等级"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="voltLvlDsc"
          label="电压等级"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="majorTypDsc"
          label="专业类型"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="opTypDsc"
          label="作业类型"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="workticketTypDsc"
          label="工作票类型"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="poweroffTypDsc"
          label="停电类型"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="isEnergizedOpDsc"
          label="是否带电作业"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="planStartWkTm"
          label="计划开工时间"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="planEndTm"
          label="计划结束时间"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="opContent"
          label="作业内容"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="chgSchemeDsc"
          label="变更方案"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          prop="opAddr"
          label="作业地址"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="cityAdmAddr"
          label="市行政地址"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="countyAdmAddr"
          label="县行政地址"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="detlPos"
          label="详细位置"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="landmarkArchit"
          label="标志性建筑"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="workTeamNm"
          label="工作班组名称"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="workPrincipNm"
          label="工作负责人"
          align="center"
          width="100"
        ></el-table-column>
      </el-table>
	  <pagination
	    v-show="total > 0"
	    :total="total"
	    :page.sync="queryParams.pageNum"
	    :limit.sync="queryParams.pageSize"
	    @pagination="getTrackInfo"
	  />
    </div>
  </el-dialog>
</template>

<script>
import { selectWorkPlanByVchicleNo } from "@/api/powerdistribution/vehicle-monitoring";
import moment from "moment";
export default {
  name: "WorkTrack",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    vehicleInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
	 loading: true,
      trackList: [],
      total: 0,
	  queryParams: {
	    pageNum: 1,
	    pageSize: 10,
	    vehicleNo: "",
	    vehicleGroup: "",
	  		planDate: [
	  		  moment().endOf("day").format("YYYY-MM-DD"),
	  		  moment().endOf("day").format("YYYY-MM-DD"),
	  		],
	  },
      vehicleNo: "",
    };
  },
  watch: {
    visible(val) {
      if (val) {
		  this.queryParams = {
		    pageNum: 1,
		    pageSize: 10,
		    vehicleNo: this.vehicleInfo.vehicleNo,
		    planDate: [
		      this.vehicleInfo.eventStartDate,this.vehicleInfo.occurDate
		    ],
		    // vehicleGroup: this.vehicleInfo.vehicleGroup,
		  };
        this.vehicleNo = this.vehicleInfo.vehicleNo;
        this.getTrackInfo();
      }
    },
  },
  methods: {
    getTrackInfo() {
	  this.loading = true;
      selectWorkPlanByVchicleNo({ ...this.queryParams,
		startDate: this.queryParams.planDate[0],
		endDate: this.queryParams.planDate[1],}).then((response) => {
        this.trackList = response.rows || [];
        this.total = response.total;
		this.loading=false;
      });
    },
	/** 搜索按钮操作 */
	handleQuery() {
	  this.getTrackInfo();
	},
	resetQuery() {
	  this.queryParams = {
	    pageNum: 1,
	    pageSize: 10,
		vehicleNo: this.vehicleInfo.vehicleNo,
	    vehicleGroup: "",
		planDate: [
		 
		],
	  };
	  this.resetForm("queryForm");
	  this.handleQuery();
	},
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.track-container {
  min-height: 400px;
  padding: 10px;

  .mb20 {
    margin-bottom: 20px;
  }

  ::v-deep {
    .el-table {
      margin-bottom: 20px;
    }
  }
}
</style>