zhgkpt-datav/app/src/views/Detail/components/YhModalContent.vue

<script>
import { ylycyhzzqdTc } from "@/api/risk.js";
import punishmentMixin from "@/mixin/unit.js";
import { area } from "@/api/area";
import moment from "moment";
export default {
  name: "YhModalContent",
  mixins: [punishmentMixin],
  data() {
    return {
      options: [],
      fxdjList: [],
      tableData: [],
      unitList: [],
      zqsj: null,
      params: {
        pageSize: 10,
        pageNum: 1,
        qx: null,
        zdqx: null,
        yhxm: null,
        pcqk: null,
        yhjd: null,
        zgsx: null,
        fxdjYs: null,
      },
      total: 0,
      search: "",
      zdqxOptions: ["用电用气", "消防设施", "生命通道", "消防管理"],
      yhxmOptions: [
        "室外消火栓系统",
        "存在违规设置突出外墙防护网现象",
        "无维保单位",
        "存在电动自行车违规停放充电现象",
        "消防车通道存在堵塞、占用情况",
        "火灾自动报警系统",
        "室内消火栓系统",
        "无管理主体",
        "存在可燃雨棚",
        "气体灭火系统",
        "建筑内疏散通道、安全出口被堵塞、占用或封闭",
        "其他",
        "自动喷水灭火系统",
        "消防车道、消防车救援场地未设置标志标牌、施划标线",
        "机械防、排烟系统",
        "防火卷帘",
        "搭建易燃可燃彩钢板房",
        "建筑外墙保温材料",
        "电梯线路私接乱拉",
        "配建车库违规改变使用功能",
        "消防控制室值班人员配备不到位",
        "违规设置群租房",
        "电缆井内电气线路敷设不规范",
        "防火封堵被破坏",
        "无",
        "违规储存、经营、使用易燃易爆危险品",
        "影响灭火救援的装饰、广告牌",
        "人员密集场所室内采易燃可燃材料装修",
        "燃气管线用具敷设安装不规范",
        "住宅部分与非住宅部分共用疏散楼梯建",
        "违规使用瓶装液化石油气",
        "避难层（间）被占用或擅自改变用途",
      ],
      pcqkOptions: ["存在", "不存在"],
      zgjdOptions: ["待计划整改", "已计划待整改", "已整改"],
      zgqxOptions: [
        "15日到期整改",
        "30日到期整改",
        "60日到期整改",
        "限期2023年底整改",
        "限期2024年底整改",
        "限期2025年底整改",
      ],
    };
  },
  props: {
    qy: String,
    default: Object
  },
  watch: {
    default: {
      handler() {
        let params = {};
        if (this.default) {
          Object.assign(params, this.default);
        } else {
          params = {};
        }

        this.params = params;
        this.funList();
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    funList() {
      const params = {};
      if (this.params.zdqx) {
        params.zdqx = this.params.zdqx.join(",");
      }
      if (this.params.yhxm) {
        params.yhxm = this.params.yhxm.join(",");
      } else {
        params.yhxm = null;
      }
      if (this.params.zgjd) {
        params.zgjd = this.params.zgjd.join(",");
      }
      console.log(this.params);
      if (this.params.zgsxStr) {
        // 计算
        let endTime = null;
        if (this.params.zgsxStr === "15日到期整改") {
          endTime = moment().add(15, "d").format("yyyy-MM-DD");
        } else if (this.params.zgsxStr === "30日到期整改") {
          endTime = moment().add(30, "d").format("yyyy-MM-DD");
        } else if (this.params.zgsxStr === "60日到期整改") {
          endTime = moment().add(60, "d").format("yyyy-MM-DD");
        } else if (this.params.zgsxStr === "限期2023年底整改") {
          endTime = "2023-12-31";
        } else if (this.params.zgsxStr === "限期2024年底整改") {
          endTime = "2024-12-31";
        } else if (this.params.zgsxStr === "限期2025年底整改") {
          endTime = "2025-12-31";
        }

        params.zgsx = moment().format("yyyy-MM-DD") + "," + endTime;
      }
      if (this.params.fxdjYs) {
        params.fxdjYs = this.params.fxdjYs;
      } else {
        params.fxdjYs = null;
      }
      if (this.params.gcjzmc) {
        params.gcjzmc = this.params.gcjzmc;
      } else {
        params.gcjzmc = null;
      }
      if (this.params.qx) {
        params.qx = this.params.qx;
      } else {
        params.qx = null;
      }
      if (params.yhxm === "") {
        params.yhxm = null;
      }
      if (params.zdqx === "") {
        params.zdqx = null;
      }
      if (params.zgjd === "") {
        params.zgjd = null;
      }

      params.pageNum = this.params.pageNum;
      params.pageSize = this.params.pageSize;

      console.log(this.params);
      console.log(params);
      ylycyhzzqdTc(params).then((res) => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.funList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.funList();
    },
    resetForm() {
      this.params = {
        pageSize: 10,
        pageNum: 1,
        qx: null,
        zdqx: null,
        yhxm: null,
        pcqk: null,
        yhjd: null,
        zgsx: null,
        gcjzmc: null,
      };
      this.funList();
    },
  },
  created() {
    // 查询区域
    area({
      pageNum: 1,
      pageSize: 100,
    }).then((res) => {
      this.options = res.data.rows;

      // console.log(this.default);
      let params = {};
      if (this.default) {
        Object.assign(params, this.default);
      }
      this.params = params;
      this.funList();
    });
  },
};
</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="maintenance-supervision">
      <div class="maintenance-supervision_header">
        <el-form class="form" v-model="params">
          <!-- 区县 -->
          <el-form-item>
            <el-select v-model="params.qx" placeholder="请选择">
              <el-option
                :value="item.areaTitle"
                :label="item.areaTitle"
                v-for="(item, index) in options"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 重点情形 -->
          <el-form-item>
            <el-select
              v-model="params.zdqx"
              placeholder="重点情形"
              multiple
              collapse-tags
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, i) in zdqxOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 隐患项目 -->
          <el-form-item>
            <el-select
              v-model="params.yhxm"
              placeholder="隐患项目"
              multiple
              collapse-tags
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, i) in yhxmOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 排查情况 -->
          <el-form-item>
            <el-select v-model="params.pcqk" placeholder="排查情况">
              <el-option
                :label="item"
                :value="item"
                v-for="(item, i) in pcqkOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 整改进度 -->
          <el-form-item>
            <el-select
              v-model="params.zgjd"
              placeholder="整改进度"
              multiple
              collapse-tags
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, i) in zgjdOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 整改期限 -->
          <el-form-item>
            <el-select v-model="params.zgsxStr" placeholder="整改期限">
              <el-option
                :label="item"
                :value="item"
                v-for="(item, i) in zgqxOptions"
                :key="i"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 风险等级 -->
          <el-form-item>
            <el-select v-model="params.fxdjYs" placeholder="风险等级">
              <el-option
                :value="item.value"
                :label="item.lable"
                v-for="(item, index) in fxdjLlst"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 建筑名称 -->
          <el-form-item>
            <div class="inp" style="margin-left: 0">
              <el-input
                v-model="params.gcjzmc"
                placeholder="建筑名称"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="funList">搜索</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <basic-table :data="tableData" style="text-align: center">
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column label="区县" width="100" prop="qx"></el-table-column>
      <el-table-column
        prop="gcjzmc"
        label="建筑名称"
        min-width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="zdqx"
        label="重点情形"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        label="风险等级"
        prop="fxdjYs"
        width="180"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="隐患数" show-overflow-tooltip>
        <template> 1 </template>
      </el-table-column>
      <el-table-column
        prop="yhxm"
        label="隐患项目"
        show-overflow-tooltip
        min-width="150"
      >
      </el-table-column>
      <el-table-column prop="pcqk" label="排查情况" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="yhjd" label="整改进度" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="jtqk"
        label="具体问题"
        show-overflow-tooltip
        min-width="150"
      >
      </el-table-column>
      <el-table-column
        prop="zgcs"
        label="整改措施"
        show-overflow-tooltip
        min-width="150"
      >
      </el-table-column>
      <el-table-column
        prop="zgzrdw"
        label="整改单位"
        show-overflow-tooltip
        min-width="150"
      >
      </el-table-column>
      <el-table-column
        prop="zgzrr"
        label="整改责任人"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="zgsx"
        label="整改时限"
        show-overflow-tooltip
        min-width="120"
      >
      </el-table-column>
      <el-table-column
        prop="zgzjwy"
        label="整改资金"
        show-overflow-tooltip
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="djsj"
        label="登记时间"
        show-overflow-tooltip
        min-width="120"
      >
      </el-table-column>
      <el-table-column
        prop="sftxdw"
        label="是否提醒单位"
        show-overflow-tooltip
        min-width="120"
      >
      </el-table-column>
      <el-table-column
        prop="sfts"
        label="是否推送乡镇街道、公安派出所或者行业部门"
        show-overflow-tooltip
        min-width="200"
      >
      </el-table-column>
      <el-table-column
        prop="yhfj"
        label="隐患附件"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          <a
            :href="scope.row.yhfj"
            target="_blank"
            style="color: #ffffff"
            v-if="scope.row.yhfj"
            >下载</a
          >
        </template>
      </el-table-column>
    </basic-table>
    <br />
    <basic-pagination
      layout="total,->,prev, pager, next, sizes,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params.pageSize"
      :current-page="params.PageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="less">
.maintenance-supervision {
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    width: 200px !important;
    border: none;
    background: linear-gradient(
      360deg,
      rgba(0, 148, 255, 0.5) 0%,
      rgba(0, 148, 255, 0.31) 100%
    );
    color: #fff;
    height: 30px !important;
  }
  ::v-deep(.el-button) {
    border: none;
    background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
    color: #fff;
  }
  .maintenance-supervision_header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // border-bottom: 1px solid #154956;
    padding-bottom: 10px;
    font-size: 12px;
    color: rgb(79, 149, 186);
    // .select-item{
    //   margin-right: 20px;
    // }
  }
  .btn-item {
    margin-bottom: 10px;
  }

  .warp {
    height: 520px;
    margin: 0 auto;
    overflow: hidden;
    .item {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      cursor: pointer;
    }
  }
  /deep/.el-input__inner {
    background-color: #184254;
    width: 150px;
    height: 30px;
    margin-bottom: 5px;
  }
  /deep/.el-button {
    width: 100px;
    height: 32px;
    font-size: 14px;
    line-height: 2px;
    // margin: 0 20px 0 30px;
    color: #fff;
    border-radius: 5px;
    border: none;
  }
  /deep/.el-button:hover {
    color: rgb(80, 147, 224);
  }
  /deep/.select_btn {
    position: absolute;
    top: 225px;
    right: 320px;
    //下拉框
  }
  /deep/.el-input {
    width: 200px;
    // margin-left: 20px;
  }
  .header {
    color: #fff;
    height: 33px !important;
    line-height: 33px !important;
    background-color: rgba(0, 163, 255, 0.3) !important;
    color: #61dbff;
    margin-top: 15px;
    margin-bottom: 6px;
  }

  .row,
  li,
  a {
    display: block;
    height: 39px;
    line-height: 39px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    background-color: rgba(0, 0, 0, 0.2);
    .time,
    .num,
    .person,
    .result {
      flex: 0.33;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .num {
      flex: 0.15;
    }
  }
  .inp {
    margin-left: 20px;
  }
}
.unit-bulid {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 18px;
}
.unit-num {
  width: 200px;
  height: 109px;
  border: 1px solid #0463a7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  line-height: 59px;
}
.form {
  flex-grow: 1;
  flex-wrap: wrap;
  width: 80%;
  display: flex;
}
::v-deep(.el-range-separator) {
  line-height: 24px !important;
  color: #ffffff !important;
}
::v-deep(.el-date-editor .el-range-input) {
  color: #ffffff !important;
}
::v-deep(.el-date-editor .el-range__icon) {
  line-height: 24px !important;
}
::v-deep(.el-date-editor .el-range__close-icon) {
  line-height: 24px !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: #2f7df2;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: #2f7df2 !important;
}

.el-select-dropdown__item.hover span {
  color: #ffffff !important;
}

/** 滚动条 */
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar,
::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}

::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 4px;
  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  background: rgba(0, 213, 255, 0.73);
  opacity: 0.7;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  border-radius: 3px;
  background: rgba(0, 213, 255, 0.3);
  opacity: 0.7;
}

::v-deep(.el-select__tags) {
  max-width: 200px !important;
  height: 30px;
  overflow: hidden;
  .el-tag {
    max-width: 120px !important;
  }
}
</style>