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-06 17:19:25
 * @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="病害数" align="defectCount" prop="plateNo">
      </el-table-column>
      <el-table-column label="新增病害数" align="newDefectCount" 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",
            type: "application/zip",
          });
          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>