zhgdyun/src/views/projectFront/inspecPoint/selfInspect.vue

<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="巡检点名称">
          <el-input
            placeholder="请输入"
            v-model="searchForm.checkingPointName"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择">
            <el-option label="正常" :value="1"></el-option>
            <el-option label="异常" :value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="巡检时间">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="getTime"
          >
          </el-date-picker>
        </el-form-item>
        <el-button size="medium" type="primary" plain @click="getPointList"
          >查询</el-button
        >
        <el-button size="medium" type="warning" plain @click="toRefresh"
          >刷新</el-button
        >
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <el-table class="tables" :data="tableData">
        <el-table-column
          label="序号"
          align="center"
          type="index"
        ></el-table-column>
        <el-table-column
          prop="routeName"
          label="巡检路线"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="itemName"
          label="任务名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="checkingPointName"
          label="巡检点名称"
          align="center"
        ></el-table-column>
        <el-table-column
          width="200"
          prop="minInspectTime"
          label="最低巡检时长(分钟)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="position"
          label="巡检位置"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="inspectTime"
          label="巡检时长(分钟)"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="checkingPointUserName"
          label="巡检人员"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="noticeUserNames"
          label="巡检记录通知人员"
          align="center"
        ></el-table-column>
        <el-table-column
          width="180"
          prop="createDate"
          label="巡检时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">{{
            scope.row.status == 2 ? "异常" : "正常"
          }}</template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="scope">
            <div class="operation-style">
              <div class="operationText styleDom" @click="detailBtn(scope.row)"
                v-permission="{key: 'selfInspect_detail', menuPath: '/project/inspecPoint/selfInspect'}">
                <i
                  class="el-icon-tickets"
                  style="color: #8dacfa; font-size: 16px; margin-right: 2px"
                ></i>
                <span>详情</span>
              </div>

              <div @click="deleteDev(scope.row)" class="operationText styleDom"
                v-permission="{key: 'selfInspect_delete', menuPath: '/project/inspecPoint/selfInspect'}">
                <img
                  src="@/assets/images/icon-delete.png"
                  width="15px"
                  height="15px"
                />
                <span>删除</span>
              </div>
              <!-- <div
                @click="dispBtn(scope.row.id)"
                class="operationText"
                v-show="scope.row.handleDone == 0 && scope.row.status != 1"
              >
                <span style="background: #5181f6; color: #fff; width: 60px"
                  >待处置</span
                >
              </div> -->
              <div
                @click="closedBtn(scope.row)"
                class="operationText"
                v-show="scope.row.handleDone == 1 && scope.row.status != 1"
              >
                <span style="background: #a2a4af; color: #fff; width: 60px"
                  >已闭合</span
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
    <!-- 处置记录弹框-->
    <el-dialog
      :modal-append-to-body="false"
      @close="close"
      :title="disTitle"
      :visible.sync="recordShow"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          ref="addEditForm"
          :model="addEditForm"
          :rules="addEditRules"
          label-width="120px"
          class="dialogFormBox"
        >
          <el-form-item label="操作人" v-if="disTitle == '处置记录'">
            <el-input v-model="addEditForm.operateName" disabled></el-input>
          </el-form-item>
          <el-form-item label="操作时间" v-if="disTitle == '处置记录'">
            <el-input v-model="addEditForm.operateTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="处置结果" prop="handleResult">
            <el-radio
              v-model="addEditForm.handleResult"
              :label="1"
              :disabled="disTitle == '处置记录'"
              >已处置</el-radio
            >
            <el-radio
              v-model="addEditForm.handleResult"
              :label="2"
              :disabled="disTitle == '处置记录'"
              >误报忽略</el-radio
            >
          </el-form-item>
          <el-form-item
            label="描述"
            prop="description"
            v-if="addEditForm.handleResult == 1"
          >
            <el-input
              :disabled="disTitle == '处置记录'"
              type="textarea"
              :rows="2"
              v-model="addEditForm.description"
              :placeholder="disTitle == '处置记录' ? '' : '请输入'"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="处理图片"
            prop="image"
            v-if="addEditForm.handleResult == 1"
          >
            <el-upload
              :disabled="disTitle == '处置记录'"
              :action="$store.state.UPLOADURL"
              list-type="picture-card"
              multiple
              name="files"
              :limit="1"
              :file-list="fileList"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              icon="el-icon-circle-close"
              size="medium"
              @click="recordShow = false"
              >取消
            </el-button>
            <el-button
              @click="addBtn"
              type="primary"
              icon="el-icon-circle-check"
              size="medium"
              v-if="disTitle == '处置详情' || disTitle == '修改处置记录'"
              >确定
            </el-button>
            <el-button
              v-if="disTitle == '处置记录'"
              type="primary"
              icon="el-icon-edit-outline"
              size="medium"
              @click="editRecord"
              >修改
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 详情弹框-->
    <el-dialog
      :modal-append-to-body="false"
      title="巡检记录详情"
      :visible.sync="detailsShow"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          ref="addEditForm"
          label-width="150px"
          class="dialogFormBox"
        >
        <el-form-item label="巡检路线">
            <el-input
              v-model="detailData.routeName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="任务名称">
            <el-input
              v-model="detailData.itemName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检点名称">
            <el-input
              v-model="detailData.checkingPointUserName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检点位置">
            <el-input v-model="detailData.position" disabled></el-input>
          </el-form-item>
          <el-form-item label="最低巡检时长(分钟)">
            <el-input v-model="detailData.minInspectTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="巡检人员">
            <el-input
              v-model="detailData.checkingPointUserName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检时长(分钟)">
            <el-input v-model="detailData.inspectTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="巡检记录通知人员">
            <el-input v-model="detailData.noticeUserNames" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input :value="getStatusText(detailData.status)" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="巡检时间">
            <el-input v-model="detailData.createDate" disabled></el-input>
          </el-form-item>
          <!-- v-if="detailData.status == 2" -->
          <el-form-item label="巡检详情" >
            <el-input
              style="width: 320px"
              type="textarea"
              v-model="detailData.alarmDetails"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检图片">
            <img
              v-if="imgSrc"
              style="width: 150px; height: 100px"
              :src="$store.state.FILEURL + imgSrc"
              :preview="$store.state.FILEURL + imgSrc"
              alt=""
            />
          </el-form-item>
          <!-- <div class="grid-content" v-if="detailData.status == 2">
            <div class="label">异常巡检图片</div>
            <div class="value">
              <img
                v-if="imgSrc"
                style="width: 150px; height: 100px"
                :src="$store.state.FILEURL + imgSrc"
                alt=""
              />
            </div>
          </div> -->
          <el-form-item
            :label="item.title"
            v-for="(item, index) in templateList"
            :key="index"
          >
            <el-input
              style="width: 320px"
              v-model="item.value"
              disabled
            ></el-input>
          </el-form-item>
          <!-- 动态表单 -->
          <!-- <div
            class="formBox"
            style="padding-left: 10%; padding-bottom: 5%; margin-top: -5%"
          >
            <div
              class="formInput flex"
              v-for="(item, index) in templateList"
              :key="index"
            >
              <input class="fromsTit" v-model="item.title" disabled />
              <el-input
                style="width: 400px !important"
                disabled
                class="inputBox"
                v-model="item.value"
              ></el-input>
            </div>
          </div> -->
          <div class="dialog-footer">
            <el-button @click="detailsShow = false" type="primary" size="medium"
              >关闭
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCheckPointApi,
  editCheckPointApi,
  deleteCheckPointApi,
} from "@/assets/js/api/insect.js";
export default {
  data() {
    return {
      detailData: {},
      timeValue: [],
      devName: "",
      searchForm: {
        checkingPointName: "",
        status: "",
        queryStartTime: "",
        queryEndTime: "",
      },
      queryStr: "",
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      towerList: [],
      addEditForm: {},
      addEditForm: {
        operateName: "", //操作人
        operateTime: "", //操作时间
        handleResult: 1,
        description: "",
        handleDone: 0,
        image: "",
        id: "",
        alarmTime: "",
      },
      fileList: [],
      dialogShow: false, //处置详情弹框
      recordShow: false, //处置记录弹框
      detailsShow: false, //详情弹框
      disTitle: "",
      addEditRules: {
        handleResult: [
          { required: true, message: "必填", trigger: "blur" },
          { required: true, message: "必填", trigger: "change" },
        ],
      },
      templateList: [],
      imgSrc: "",
    };
  },
  mounted() {
    this.getPointList();
  },
  methods: {
    //选择时间时
    getTime() {
      if (this.timeValue) {
        this.searchForm.queryStartTime = this.timeValue[0];
        this.searchForm.queryEndTime = this.timeValue[1];
      } else {
        this.searchForm.queryStartTime = "";
        this.searchForm.queryEndTime = "";
      }
    },

    getStatusText(status) {
      if (status == 1) {
        return "正常";
      } else if (status == 2) {
        return "异常";
      } else if (status == 0) {
        return "未知状态";
      }
    },
    //点击待处置
    dispBtn(val) {
      this.disTitle = "处置详情";
      this.recordShow = true;
      this.addEditForm.id = val;
      // this.addEditForm.handleResult = 1
    },
    //点击已闭合
    closedBtn(obj) {
      console.log("点击已闭合", obj);
      this.recordShow = true;
      this.disTitle = "处置记录";
      this.addEditForm = JSON.parse(JSON.stringify(obj));
      this.fileList = obj.image;
    },
    //点击详情修改
    editRecord() {
      this.disTitle = "修改处置记录";
      this.dialogShow = true;
    },
    processTheFile() {
      //处理el上传的文件格式(结构)
      this.addEditForm.image = [];
      this.fileList.map((item) => {
        if (!item.response) {
          this.addEditForm.image.push(item);
        } else if (item.response) {
          this.addEditForm.image.push({
            name: item.response.data[0].filename,
            url: item.response.data[0].imageUrl,
          });
        }
      });
      this.addEditForm.image = JSON.stringify(this.addEditForm.image);
    },
    deleteDev(val) {
      console.log("删除", val);
      this.$confirm("此操作将永久删除该巡检点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
          };
          deleteCheckPointApi(data).then((res) => {
            if (res.success) {
              this.getPointList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //查看详情
    detailBtn(val) {
      this.detailData = val;
      console.log("查看详情1111", this.detailData);
      this.templateList =
        this.detailData.template != ""
          ? JSON.parse(this.detailData.template)
          : [];
      let imgType =
        this.detailData.alarmImage != null
          ? JSON.parse(this.detailData.alarmImage)
          : "";
      if (imgType && imgType.length > 0) {
        this.imgSrc = imgType[0].url;
      } else {
        this.imgSrc = "";
      }
      this.detailsShow = true;
      this.addEditForm = JSON.parse(JSON.stringify(val));
    },
    //待处置提交
    addBtn() {
      this.processTheFile();
      let params = JSON.parse(JSON.stringify(this.addEditForm));
      params.projectSn = this.$store.state.projectSn;
      params.handleDone = 1;
      this.$refs.addEditForm.validate((valid) => {
        if (valid) {
          if (this.disTitle == "处置详情" || this.disTitle == "修改处置记录") {
            editCheckPointApi(params).then((result) => {
              if (result.success) {
                this.$message.success(result.message);
                this.getPointList();
              }
            });
          }
          this.recordShow = false;
        } else {
          return false;
        }
      });
    },
    close() {
      this.addEditForm = {};
      this.fileList = [];
      this.$nextTick(() => {
        this.$refs.addEditForm.clearValidate();
      });
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPointList();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getPointList();
    },
    inptValue(val) {
      console.log("输入的内容", val);
    },
    // 查询
    getPointList() {
      // let data = new FormData(); //new出来的对象
      // data.append("queryStr", this.queryStr);
      // data.append("projectSn", this.$store.state.projectSn);
      // data.append("pageNo", this.pageNo);
      // data.append("pageSize", this.pageSize);
      // data.append(
      //   "checkingPointName",
      //   this.searchForm.checkingPointName
      //     ? this.searchForm.checkingPointName
      //     : ""
      // );
      // data.append(
      //   "status",
      //   this.searchForm.status ? this.searchForm.status : ""
      // );
      // data.append(
      //   "queryEndTime",
      //   this.searchForm.queryEndTime ? this.searchForm.queryEndTime : ""
      // );
      // data.append(
      //   "queryStartTime",
      //   this.searchForm.queryStartTime ? this.searchForm.queryStartTime : ""
      // );
      let requestData = {
        queryStr: this.queryStr,
        projectSn: this.$store.state.projectSn,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        checkingPointName: this.searchForm.checkingPointName ? this.searchForm.checkingPointName: "",
        status: this.searchForm.status ? this.searchForm.status : "",
        queryEndTime: this.searchForm.queryEndTime ? this.searchForm.queryEndTime : "",
        queryStartTime: this.searchForm.queryStartTime ? this.searchForm.queryStartTime : ""
      }
      getCheckPointApi(requestData).then((res) => {
        console.log("res111111111", res);
        this.tableData = res.result.records;
        this.total = Number(res.result.total);
        res.result.records.map((item) => {
          if (item.image != null) {
            item.image = JSON.parse(item.image);
            if (
              item.image.length !== 0 &&
              !item.image[0].url.includes(this.$store.state.FILEURL)
            ) {
              item.image[0].url = this.$store.state.FILEURL + item.image[0].url;
            }
          } else {
            item.image = [];
          }
        });
      });
    },
    // 刷新
    toRefresh() {
      this.queryStr = "";
      this.searchForm = {};
      this.timeValue = [];
      // data.append("queryEndTime", this.searchForm.queryEndTime);
      // data.append("queryStartTime", this.searchForm.queryStartTime);
      this.getPointList();
    },
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    handleRemove(response, fileList) {
      this.fileList = fileList;
    },
  },
};
</script>

<style lang="less" scoped>
.formInput {
  .fromsTit {
    border: none;
    width: 120px;
    padding: 12px 6px;
    outline: none;
    background: #fff;
    &:focus {
      outline: none;
    }
  }
}
.grid-content {
  overflow: hidden;
  margin-bottom: 10px;
  padding-left: 10%;
  .label {
    margin-bottom: 10px;
  }
  // .value {
  //   float: left;
  //   width: calc(100% - 80px);
  // }
}
</style>