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-12-05 16:27:28
 * @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="taskId">
        <el-autocomplete v-model="queryParams.taskId" :fetch-suggestions="querySearchAsync" placeholder="请输入任务id"
          @select="handleSelect"></el-autocomplete>
      </el-form-item>
      <el-form-item label="车牌号码" prop="plateNo">
        <el-input v-model="queryParams.plateNo" placeholder="请输入车牌号码" clearable=""></el-input>
      </el-form-item>
      <el-form-item label="巡检路段" prop="segmentId">
        <el-select v-model="queryParams.segmentId" 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" :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="segmentCode">
      </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="plateNo">
      </el-table-column>
      <el-table-column label="任务id" align="center" prop="extId" />
      <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-view" @click="viewDefect(scope.row)">查看
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-refresh-right" @click="handleRetrace(scope.row)">回顾
          </el-button>
          <el-button style="margin-left: 0.5rem;" size="mini" type="text" icon="el-icon-download"
            @click="handelExpport(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="80rem" append-to-body :close-on-click-modal="false"
      destroy-on-close @close="viewCancel">
      <task-view v-if="viewVisible" @cancel="viewCancel" :dialogItem="dialogItem"
        :defectCascaderList="defectCascaderList"></task-view>
      <!-- <task-retrace
        v-if="viewVisible"
        @cancel="viewCancel"
        :dialogItem="dialogItem"
      ></task-retrace> -->
    </el-dialog>

    <!-- 回顾巡检任务弹窗 -->
    <el-dialog title="回顾任务" fullscreen :visible.sync="retraceVisible" width="80rem" append-to-body
      :close-on-click-modal="false" destroy-on-close @close="retraceCancel" class="retrace-dialog">
      <task-retrace v-if="retraceVisible" @cancel="retraceCancel" :dialogItem="dialogItem"></task-retrace>
    </el-dialog>

    <!-- 导出数据弹窗 -->
    <el-dialog title="导出" :visible.sync="exportVisible" width="30rem" append-to-body :close-on-click-modal="false"
      destroy-on-close @close="exportCancel">
      <template>
        <div style="font-size: 1.5rem;">
          导出是否附带图片
        </div>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(true)">确 定</el-button>
          <el-button @click="submitForm(false)">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Loading } from "element-ui";
import TaskRetrace from "./components/task-retrace.vue";
import TaskView from "./components/task-view.vue";
import {
  getTaskTable,
  getSegment,
  getRoadType,
  getTaskIdList,
  getDefectList,
  exportDefectData,
} from "@/api/xj/task";

export default {
  components: { TaskRetrace, TaskView },
  data() {
    return {
      // 查询表单
      queryParams: {
        // 任务id
        taskId: "",
        // 车牌号码
        plateNo: "",
        // 巡检路段
        segmentId: "",
      },
      // 巡检时间
      dateTime: [],
      // 传查询接口表单
      searchForm: {},
      // 巡检路段下拉
      segmentList: [],
      // 路产类型下拉
      roadType: [],
      // 列表数据绑定
      roadList: [],
      // 列表已选数组
      checkIds: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 分页-列表总数
      tableTotal: 0,
      // 分页-页数页码
      pagination: {
        page: 1,
        size: 10,
      },
      // 传弹窗的数据
      dialogItem: {},
      // 查看弹窗显隐控制
      viewVisible: false,
      // 回顾弹窗显隐控制
      retraceVisible: false,
      // 病害类型下拉
      defectCascaderList: [],

      // 导出弹窗显隐控制
      exportVisible: false,

    };
  },
  created() {
    this.getTaskList();
    this.getSegmentList();
    this.getRoadTypeList();
    this.getDefectCascaderList();
  },
  methods: {
    /**
     * @description: 获取病害类型下拉数据
     * @return {*}
     */
    getDefectCascaderList() {
      getDefectList().then(({ code, data }) => {
        if (code === 200) {
          this.defectCascaderList = data;
        }
      });
    },

    /**
     * @description: 任务id远程搜索 结果
     * @param {*} item
     * @param {*} cb
     * @return {*}
     */
    querySearchAsync(item, cb) {
      getTaskIdList({ name: item }).then(({ data, code }) => {
        if (code === 200) {
          let list = [];
          data.map((item) => {
            list.push({
              value: item.label,
              id: item.value,
            });
          });
          cb(list);
        }
      });
    },

    /**
     * @description: 任务id选择事件
     * @param {*}
     * @return {*}
     */
    handleSelect() { },

    /**
     * @description: 获取巡检路段下拉数据
     * @return {*}
     */
    getSegmentList() {
      getSegment().then(({ code, data }) => {
        if (code === 200) {
          this.segmentList = data;
        }
      });
    },

    /**
     * @description: 获取路产类型下拉数据
     * @return {*}
     */
    getRoadTypeList() {
      getRoadType().then(({ code, data }) => {
        if (code === 200) {
          this.roadType = data;
        }
      });
    },

    /**
     * @description: 点击搜索事件
     * @return {*}
     */
    handleQuery() {
      this.pagination.page = 1;
      this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
      this.getTaskList();
    },

    /**
     * @description: 点击重置事件
     * @return {*}
     */
    resetQuery() {
      this.searchForm = {};
      this.queryParams = {
        taskId: "",
        plateNo: "",
        segmentId: "",
      };
      this.dateTime = [];
      this.getTaskList();
    },

    /**
     * @description: 获取列表数据
     * @return {*}
     */
    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;
        }
      });
    },

    /**
     * @description: 列表选择改变事件
     * @param {*} selection
     * @return {*}
     */
    handleSelectionChange(selection) {
      this.checkIds = selection.map((item) => item.taskId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },

    /**
     * @description: 点击查看新增病害事件
     * @param {*} item
     * @return {*}
     */
    viewDefect(item) {
      this.viewVisible = true;
      this.dialogItem = item;
    },

    /**
     * @description: 点击回顾事件
     * @param {*} item
     * @return {*}
     */
    handleRetrace(item) {
      this.retraceVisible = true;
      this.dialogItem = item;
    },

    /**
     * @description: 点击导出事件
     * @return {*}
     */
    handelExpport(item) {
      this.exportVisible = true;
      this.dialogItem = item;
    },

    /**
     * @description: 导出文件
     * @return {*}
     */
    submitForm(type) {
      this.wordExport(this.dialogItem, type)
    },

    /**
     * @description: 导出文件的方法
     * @param {*} item
     * @return {*}
     */
    wordExport(item, type) {
      Loading.service({ fullscreen: true });
      let loadingInstance = Loading.service({ fullscreen: true });
      exportDefectData({ taskId: item.extId, media: type }).then((res) => {
        const link = document.createElement("a");
        const blob = new Blob([res], {
          type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        // TODO 源文件名问题
        link.download = item.extId;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }).finally(() => {
        this.exportCancel()
        loadingInstance.close();
      })
    },

    /**
     * @description: 切换分页
     * @param {*} arg
     * @return {*}
     */
    handleCurrentChange(arg) {
      this.pagination.page = arg;
      this.getTaskList();
    },

    /**
     * @description: 切换每条/页
     * @param {*} arg
     * @return {*}
     */
    handleSizeChange(arg) {
      this.pagination.size = arg;
      this.getTaskList();
    },

    /**
     * @description: 关闭查看弹窗
     * @return {*}
     */
    viewCancel() {
      this.viewVisible = false;
      this.dialogItem = {};
    },

    /**
     * @description: 关闭回顾弹窗
     * @return {*}
     */
    retraceCancel() {
      this.retraceVisible = false;
      this.dialogItem = {};
    },

    /**
 * @description: 关闭导出弹窗
 * @return {*}
 */
    exportCancel() {
      this.exportVisible = 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;
  }
}

.retrace-dialog {
  ::v-deep .el-dialog__header {
    padding: 10px;
    background-color: #113463;

    span,
    i {
      color: #ffffff;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 0;
    background-color: #2e3a46;
  }
}

/* 页脚 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>