处理图片显示问题

zhanghua

2025-04-14 829f5116884f98643ffc5b2a548a600d40c0cedb

 src/views/operate/management/myIndex/index.vue

@@ -1,6 +1,16 @@
<template>
  <div class="userList">
    <header>
      <div class="search">
        <el-form :inline="true" :model="seachData">
          <el-form-item label="事件编号">
            <el-input v-model="seachData.code" placeholder="事件编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getUserList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="problem">
        <div class="problem-title">问题类型</div>
        <el-radio-group v-model="myproblem" @change="changeMyProblem">
@@ -20,21 +30,12 @@
    <main>
      <div class="mainContent">
        <!-- 数据展示 -->
        <el-table
          border
          stripe
          ref="multipleTable"
          :header-cell-style="{
            background: '#F5F5F5',
            'font-weight': '650',
            'line-height': '45px',
          }"
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          @selection-change="tableChange"
        >
          <el-table-column type="selection" min-width="5"> </el-table-column>
        <el-table border stripe ref="multipleTable" :header-cell-style="{
          background: '#F5F5F5',
          'font-weight': '650',
          'line-height': '45px',
        }" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="tableChange">
          <el-table-column type="selection" min-width="5"></el-table-column>
          <el-table-column prop="code" label="事件编号" min-width="18">
            <template slot-scope="scope">
              <el-link @click="JumpView(scope.row)">{{
@@ -49,29 +50,17 @@
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :prop="myproblem === 1 ? 'category' : 'category'"
            :label="myproblem === 1 ? '大类名称' : '违建类别'"
            :min-width="myproblem === 1 ? '10' : '20'"
          >
          <el-table-column :prop="myproblem === 1 ? 'category' : 'category'" :label="myproblem === 1 ? '大类名称' : '违建类别'"
            :min-width="myproblem === 1 ? '10' : '20'">
          </el-table-column>
          <el-table-column
            :prop="myproblem === 1 ? 'type' : 'site'"
            :label="myproblem === 1 ? '小类名称' : '违建地点'"
            min-width="10"
          >
          <el-table-column :prop="myproblem === 1 ? 'type' : 'site'" :label="myproblem === 1 ? '小类名称' : '违建地点'"
            min-width="10">
          </el-table-column>
          <el-table-column
            :prop="myproblem === 1 ? 'actionCause' : 'communityId'"
            :label="myproblem === 1 ? '案由' : '所属社区'"
            min-width="10"
          >
          <el-table-column :prop="myproblem === 1 ? 'actionCause' : 'communityId'"
            :label="myproblem === 1 ? '案由' : '所属社区'" min-width="10">
          </el-table-column>
          <el-table-column
            :prop="myproblem === 1 ? 'site' : ''"
            :label="myproblem === 1 ? '报警点位' : '违法建筑长、宽、高'"
            :min-width="myproblem === 1 ? '10' : '20'"
          >
          <el-table-column :prop="myproblem === 1 ? 'site' : ''" :label="myproblem === 1 ? '报警点位' : '违法建筑长、宽、高'"
            :min-width="myproblem === 1 ? '10' : '20'">
            <template slot-scope="scope">
              <div v-if="myproblem === 2">
                <span>{{
@@ -88,38 +77,23 @@
              <div v-else>{{ scope.row.site }}</div>
            </template>
          </el-table-column>
          <el-table-column
            :prop="myproblem === 1 ? 'street' : 'buildingArea'"
            :label="myproblem === 1 ? '所属区域' : '违法建筑面积'"
            min-width="10"
          >
          <el-table-column :prop="myproblem === 1 ? 'street' : 'buildingArea'"
            :label="myproblem === 1 ? '所属区域' : '违法建筑面积'" min-width="10">
          </el-table-column>
          <el-table-column
            prop="alarmTime"
            label="报警时间"
            min-width="15"
            v-if="myproblem === 1"
          >
          <el-table-column prop="alarmTime" label="报警时间" min-width="15" v-if="myproblem === 1">
            <template slot-scope="scope">
              <span>{{ filterTime(scope.row.alarmTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :prop="myproblem === 1 ? 'continueTime' : 'materials'"
            :label="myproblem === 1 ? '持续时间' : '违法建筑材料'"
            min-width="15"
          >
          <el-table-column :prop="myproblem === 1 ? 'continueTime' : 'materials'"
            :label="myproblem === 1 ? '持续时间' : '违法建筑材料'" min-width="15">
          </el-table-column>
          <el-table-column prop="operation" label="操作" min-width="15">
            <template slot-scope="scope">
              <div class="btn">
                <!-- v-if="instatus===7 ? true : false" -->
                <span @click="handleExamine(scope.row)" v-if="instatus === 7"
                  >审核</span
                >
                <span @click="handleClosure(scope.row)" v-if="instatus === 8"
                  >结案</span
                >
                <span style=" color: #2f54eb;" @click="handleExamine(scope.row)" v-if="instatus === 7">审核</span>
                <span @click="handleClosure(scope.row)" v-if="instatus === 8">结案</span>
                <span class="line" v-if="instatus !== 9">|</span>
                <span @click="JumpView(scope.row)">查看</span>
              </div>
@@ -127,82 +101,48 @@
          </el-table-column>
        </el-table>
        <!-- 审核页面 -->
        <el-dialog
          :visible.sync="dialogExamine"
          width="60%"
          title="基础信息(人工)"
          v-if="dialogExamine"
          :before-close="handleClose"
        >
          <MyExamine
            :info="info"
            v-if="myproblem === 1"
            @closeDialog="closeDialog"
          ></MyExamine>
          <MyIllExamine
            :info="info"
            v-else
            @closeDialog="closeDialog"
          ></MyIllExamine>
        <el-dialog :visible.sync="dialogExamine" width="60%" title="基础信息(人工)" v-if="dialogExamine"
          :before-close="handleClose">
          <MyExamine :info="info" v-if="myproblem === 1" @closeDialog="closeDialog"></MyExamine>
          <MyIllExamine :info="info" v-else @closeDialog="closeDialog"></MyIllExamine>
        </el-dialog>
        <!-- 结案页面 -->
        <el-dialog
          :visible.sync="dialogClosure"
          width="60%"
          title="基础信息(人工)"
          v-if="dialogClosure"
          :before-close="handleClose"
        >
          <MyClosure
            :info="info"
            v-if="myproblem === 1"
            @closeDialog="closeDialog"
          ></MyClosure>
          <MyIllClosure
            :info="info"
            v-else
            @closeDialog="closeDialog"
          ></MyIllClosure>
        <el-dialog :visible.sync="dialogClosure" width="60%" title="基础信息(人工)" v-if="dialogClosure"
          :before-close="handleClose">
          <MyClosure :info="info" v-if="myproblem === 1" @closeDialog="closeDialog"></MyClosure>
          <MyIllClosure :info="info" v-else @closeDialog="closeDialog"></MyIllClosure>
        </el-dialog>
        <!-- 详情页面 -->
        <el-dialog
          :visible.sync="dialogView"
          width="60%"
          title="基础信息(人工)"
          v-if="dialogView"
          :before-close="handleNoClose"
        >
          <MyDetail
            :info="info"
            v-if="myproblem === 1"
            :mycode="code"
          ></MyDetail>
        <el-dialog :visible.sync="dialogView" width="60%" title="基础信息(人工)" v-if="dialogView"
          :before-close="handleNoClose">
          <MyDetail :info="info" v-if="myproblem === 1" :mycode="code"></MyDetail>
          <MyIllDetail :info="info" v-else :mycode="code"></MyIllDetail>
        </el-dialog>
        <!-- tools -->
        <!-- <div class="tools">
                    <div class="funs">
                        <div class="funsItem funs-sp">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem funs-sp">
                            <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange" disabled>
        <div class="tools">
          <div class="funs">
            <div class="funsItem funs-sp">
              <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
            </div>
            <div class="funsItem funs-sp">
              <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
            </div>
            <div class="funsItem">
              <el-button type="primary" @click="mulCheck()">批量通过</el-button>
              <!-- <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="pagination">
                        <el-pagination background :current-page="currentPage" layout="prev, pager, next"
                            :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage"
                            @prev-click="handlePrev" @next-click="handleNext">
                        </el-pagination>
                    </div>
                </div> -->
                            </el-select> -->
            </div>
          </div>
          <div class="pagination">
            <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
              :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
              @next-click="handleNext">
            </el-pagination>
          </div>
        </div>
      </div>
    </main>
  </div>
@@ -226,6 +166,9 @@
  },
  data() {
    return {
      seachData: {
        code: "",
      },
      tableData: [],
      dialogExamine: false,
      dialogClosure: false,
@@ -246,16 +189,8 @@
        },
        {
          value: 1,
          label: "批量启用",
        },
        {
          value: 2,
          label: "批量禁用",
        },
        {
          value: 3,
          label: "批量删除",
        },
          label: "批量审核",
        }
      ],
      tempList: [],
      typeList: [
@@ -280,28 +215,42 @@
    this.getUserList();
  },
  methods: {
    // 批量删除
    mulDelete(idArr) {
    // 批量审核
    checkData(idArr) {
      var url = ""
      if (this.instatus === 8) {
        url = "sccg/base_case/end_case_batch"
      }
      if (this.instatus === 7) {
        url = "sccg/check_handle/check_batch"
      }
      if(url.length>0){
      this.$axios({
        method: "delete",
        url: "sccg/violations/batch_delete?ids=" + idArr,
      }).then((res) => {
        this.getUserList();
        this.$message({
          message: res.message,
          type: res.code === 200 ? "success" : "warning",
        });
      });
    },
    // 执行下拉框操作
    selectChange(list) {
      if (this.tempList.length !== 0) {
        if (list === 3) {
          this.preMyIdx = list;
          this.mulDelete(this.tempList);
        method: 'post',
        url: url,
        data: {
          ids: idArr
        }
      })
        .then(res => {
          if (res.code === 200) {

            this.currentPage = 0;
            this.getUserList();
            this.$message({
              message: res.message,
              type: res.code === 200 ? "success" : "warning",
            });
          }
        });
      }
    },

    // 执行下拉框操作
    mulCheck() {
      if (this.tempList.length !== 0) {
        this.checkData(this.tempList);
      } else {
        this.myIdx = this.preMyIdx;
        this.$message({
          type: "warning",
          message: "您还没选中任何数据",
@@ -312,7 +261,7 @@
    tableChange(list) {
      this.tempList = [];
      list.forEach((item) => {
        this.tempList.push(item.code);
        this.tempList.push(item.id);
      });
      this.all = list.length === this.tableData.length;
    },
@@ -342,14 +291,21 @@
            this.getUserList();
          });
        })
        .catch((_) => {});
        .catch((_) => { });
    },
    // 获取用户列表
    getUserList() {
      const { currentPage, pageSize, instatus, myproblem } = this;
      if (this.seachData.code.length > 0) {
        this.instatus = -1
      }
      else if(this.instatus == -1){
        this.instatus = 7
      }
      const { currentPage, pageSize, instatus, myproblem, seachData } = this;

      this.$axios({
        method: "get",
        url: `sccg/base_case/query?state=${instatus}&current=${currentPage}&size=${pageSize}&type=${myproblem}`,
        url: `sccg/base_case/query?state=${instatus}&current=${currentPage}&size=${pageSize}&type=${myproblem}&code=${seachData.code}`,
      }).then((res) => {
        this.totalNum = res.data.total;
        this.tableData = res.data.records;
@@ -384,7 +340,7 @@
          this.dialogExamine = false;
          done();
        })
        .catch((_) => {});
        .catch((_) => { });
    },
    handleNoClose(done) {
      done();
@@ -439,10 +395,14 @@
    },
    // 问题类型
    changeMyProblem(val) {
      this.seachData.code = '';
      this.currentPage = 0;
      this.getUserList();
    },
    // 审核状态
    changeInStatus(val) {
      this.seachData.code = '';
      this.currentPage = 0;
      this.getUserList();
    },
    filterTime(time) {
@@ -452,11 +412,16 @@
};
</script>
<style lang="scss" scoped>
.search {
  line-height: 20px;
}

.userList {
  text-align: left;
  padding: 10px 20px;
  padding: 5px 10px;
  // color: #4b9bb7;
  border: 1px solid #ccc;

  header {
    // background-color: #09152f;
    //padding: 10px 20px;
@@ -465,7 +430,7 @@
    .status {
      display: flex;
      align-items: center;
      line-height: 40px;
      line-height: 30px;
    }

    .problem-title,
@@ -476,30 +441,40 @@

  &::v-deep .el-input__inner {
    // background-color: #09152f;
    border: 1px solid #17324c;
    // border: 1px solid #17324c;
    line-height: 30px;
  }

  &::v-deep .el-form-item {
    margin-bottom: 5px;
  }

  main {
    // background-color: #09152f;
    margin-top: 20px;
    margin-top: 10px;
    padding-bottom: 50px;

    .btn span:hover {
      cursor: pointer;
    }

    .tools {
      display: flex;
      justify-content: space-between;
      align-items: center;
      //padding: 0 20px;

      //padding: 0 20px;
      .funs {
        display: flex;

        .funs-first {
          margin-left: 0 !important;
        }

        .funs-sp {
          border: 1px solid #dcdfe6;
        }

        .funsItem {
          line-height: 28px;
          display: flex;
@@ -538,19 +513,7 @@
        line-height: 50px;
        justify-content: center;

        .el-pagination {
          &::v-deep li,
          &::v-deep .btn-prev,
          &::v-deep .btn-next {
            background-color: #071f39;
            color: #4b9bb7;
          }

          &::v-deep .active {
            background-color: #409eff;
            color: #fff;
          }
        }
        .el-pagination {}
      }
    }

@@ -562,9 +525,6 @@
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        .el-checkbox {
          display: none;
        }
      }

      // &::v-deep .el-table__empty-block {
@@ -581,7 +541,9 @@
        .line {
          padding: 0 5px;
        }

        color: var(--operation-color);

        span:hover {
          cursor: pointer;
        }
@@ -631,11 +593,11 @@
  }

  &::v-deep .el-dialog__header,
    // &::v-deep .el-dialog__body {
    //     background-color: #06122c;
    // }
  // &::v-deep .el-dialog__body {
  //     background-color: #06122c;
  // }

    &::v-deep .el-dialog__header {
  &::v-deep .el-dialog__header {
    display: flex;
    align-items: center;
    background-color: #fff;