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
          prop="checkingPointName"
          label="巡检点名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="position"
          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
          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="tableBtns">
             
              <div class="operationText styleDom" @click="detailBtn(scope.row)">
                <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">
                <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">
            <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">
            <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="130px"
          class="dialogFormBox"
        >
          <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.checkingPointUserName"
              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>
          <el-form-item label="异常详情">
            <el-input
              style="width: 320px"
              type="textarea"
              v-model="detailData.alarmDetails"
              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="grid-content">
            <div class="label">异常巡检图片</div>
            <div class="value">
              <img
                v-if="imgSrc"
                style="width: 150px; height: 100px"
                :src="$store.state.FILEURL + imgSrc"
                alt=""
              />
            </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:'');
      getCheckPointApi(data).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>