xjsaas-ui/src/views/xj/inspection/task-management/index.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-14 09:48:43
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-14 10:54:23
 * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
 * @Description: 巡检管理-巡检任务
-->

<template>
  <div class="app-container">
    <!-- 搜索表单 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="100px"
    >
      <el-form-item label="任务id" prop="id">
        <el-autocomplete
          v-model="queryParams.id"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入任务id"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="车牌号码" prop="carName">
        <el-select
          v-model="queryParams.carName"
          placeholder="请选择车牌号码"
          clearable
        >
          <el-option
            v-for="item in carNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="巡检路段" prop="segmentName">
        <el-select
          v-model="queryParams.segmentName"
          placeholder="请选择巡检路段"
          clearable
        >
          <el-option
            v-for="item in segmentList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="巡检时间" prop="dateTime">
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          clearable
        />
      </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>
    <!-- 列表 -->
    <el-table
      ref="roadTable"
      v-loading="loading"
      :data="roadList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="巡检路段" align="center" prop="segmentName" />
      <el-table-column label="巡检路段编码" align="center" prop="segmentId">
      </el-table-column>
      <el-table-column label="巡检开始时间" align="center" prop="startTime">
        <template slot-scope="scope">
          <span>{{
            scope.row.startTime
              ? new Date(scope.row.startTime).toLocaleString()
              : ""
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="巡检起点" align="center" prop="stakeStart" />
      <el-table-column label="巡检终点" align="center" prop="stakeEnd" />
      <el-table-column label="车牌号码" align="center" prop="media">
      </el-table-column>
      <el-table-column label="任务id" align="center" prop="id" />

      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-flag"
            @click="viewDefect(scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-part">
      <el-pagination
        background
        :current-page.sync="pagination.page"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="pagination.size"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
      >
      </el-pagination>
    </div>
    <!-- 查看弹窗 -->
    <el-dialog
      title="路径查看"
      :visible.sync="viewVisible"
      width="90rem"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      @close="viewCancel"
    >
      <task-view @cancel="viewCancel" :dialogItem="dialogItem"></task-view>
    </el-dialog>
  </div>
</template>
      
<script>
import TaskView from "./components/task-view.vue";
import { getTaskTable, getSegment, getRoadType } from "@/api/xj/task";

export default {
  components: { TaskView },
  data() {
    return {
      // 查询表单
      queryParams: {
        // 任务id
        id: "",
        // 车牌号码
        carName: "",
        // 巡检路段
        segmentName: "",
      },
      // 巡检时间
      dateTime: [],
      // 传查询接口表单
      searchForm: {},
      // 巡检路段下拉
      segmentList: [],
      // 车牌号码下拉
      carNameList: [],
      // 路产类型下拉
      roadType: [],
      // 列表数据绑定
      roadList: [],
      // 列表加载状态
      loading: false,
      // 列表已选数组
      checkIds: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 传弹窗的数据
      dialogItem: {},
      // 查看弹窗显隐控制
      viewVisible: false,
    };
  },
  created() {
    this.getTaskList();
    this.getSegmentList();
    this.getRoadTypeList();
  },
  methods: {
    /* 任务id远程搜索 结果 */
    querySearchAsync(item, cb) {},
    /* 任务id选择事件 */
    handleSelect() {},
    /* 获取巡检路段下拉数据 */
    getSegmentList() {
      getSegment().then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data;
        }
      });
    },
    /* 获取路产类型下拉数据 */
    getRoadTypeList() {
      getRoadType().then(({ code, data }) => {
        if (code === 200) {
          this.roadType = data;
        }
      });
    },
    /* 点击搜索事件 */
    handleQuery() {
      const phonereg = /^K\d{4}\+\d{3}$/;
      if (this.queryParams.stakeStart) {
        if (phonereg.test(this.queryParams.stakeStart)) {
          this.pagination.page = 1;
          this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
          this.getTaskList();
        } else {
          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
        }
      } else if (this.queryParams.stakeEnd) {
        if (phonereg.test(this.queryParams.stakeEnd)) {
          this.pagination.page = 1;

          this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
          this.getTaskList();
        } else {
          this.$modal.msgWarning("请按照格式填写公里桩进行修改");
        }
      } else {
        this.pagination.page = 1;

        this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
        this.getTaskList();
      }
    },
    /* 点击重置事件 */
    resetQuery() {
      this.searchForm = {};
      this.queryParams = {
        segmentName: "",
        defectType: "",
        dataStatus: "",
        inspectDirection: "",
        defectType3: "",
        stakeStart: "",
        stakeEnd: "",
        state: "",
        id: "",
      };
      this.dateTime = [];
      this.getTaskList();
    },
    /* 获取列表数据 */
    getTaskList() {
      const params = {
        ...this.pagination,
        ...this.searchForm,
        startTime: this.dateTime ? this.dateTime[0] : "",
        endTime: this.dateTime ? this.dateTime[1] : "",
      };
      getTaskTable(params).then(({ code, rows, total }) => {
        if (code === 200) {
          this.roadList = rows;
          this.tableTotal = total;
        }
      });
    },
    /* 列表选择改变事件 */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /* 点击路径事件 */
    viewDefect(item) {
      this.viewVisible = true;
      this.dialogItem = item;
    },
    /* 切换分页 */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getTaskList();
    },
    /* 切换每条/页 */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getTaskList();
    },
    /* 关闭查看弹窗 */
    viewCancel() {
      this.viewVisible = false;
      this.dialogItem = {};
    },
  },
};
</script>
      
      <style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.mb8 {
  margin-bottom: 8px;
}

.small-padding {
  padding: 0 5px;
}

.fixed-width {
  width: 120px;
}

/* 分页样式 */
.pagination-part {
  width: 100%;
  display: flex;
  padding-top: 1rem;
  justify-content: flex-end;
}

/* 新增弹窗/编辑弹窗 */
.addForm {
  .el-select,
  .el-cascader {
    width: 100%;
  }
}
/* 新增地图框样式 */
.no-hand-cursor {
  cursor: default !important;
  width: 100%;
  height: 20rem;
}

/* 上传文件列表样式 */
::v-deep .el-upload-list {
  img {
    width: auto;
  }
}

/* 查看弹窗-图片框样式 */
.view-carousel {
  height: 15rem;
  // .el-carousel__item{
  //   height: 12rem;

  img {
    max-height: 15rem;
    max-width: 25rem;
  }
}
</style>