独栋弹窗

app/src/views/Detail/components/MaintenanceModalContent.vue

@@ -0,0 +1,446 @@
+<script>
+import { getZcqk, getJdjc, getWgpc, getWbqk } from "@/api/iot.js";
+import punishmentMixin from "@/mixin/unit.js";
+import moment from "moment";
+export default {
+  name: "MaintenanceModalContent",
+  mixins: [punishmentMixin],
+  data() {
+    return {
+      options: [],
+      fxdjList: [],
+      tableData: [],
+      unitList: [],
+      zqsj: null,
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+        jzid: null,
+      },
+      total: 0,
+      search: "",
+      checked: 0,
+    };
+  },
+  props: {
+    qy: String,
+    default: Object,
+  },
+  watch: {
+    default: {
+      handler() {
+        console.log(this.default);
+        const params = JSON.parse(JSON.stringify(this.params));
+        params.jzid = this.default.jzid;
+        this.checked = this.default.checked;
+        this.params = params;
+        this.funList();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  methods: {
+    change(idx) {
+      this.checked = idx;
+      this.funList();
+    },
+    funList() {
+      const params = JSON.parse(JSON.stringify(this.params));
+      let func = null;
+      if (this.checked === 0) {
+        func = getZcqk;
+      } else if (this.checked === 1) {
+        func = getJdjc;
+      } else if (this.checked === 2) {
+        func = getWgpc;
+      } else if (this.checked === 3) {
+        func = getWbqk;
+      }
+      func(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,
+        scrj: null,
+      };
+      this.funList();
+    },
+  },
+  created() {
+    console.log(this.default);
+    const params = JSON.parse(JSON.stringify(this.params));
+    params.jzid = this.default.jzid;
+    this.checked = this.default.checked;
+    this.params = params;
+
+    this.funList();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <!-- 搜索 -->
+    <div class="maintenance-supervision">
+      <div class="maintenance-supervision_header">
+        <el-form class="form" v-model="params">
+          <div class="maintenance-supervision_header">
+            <button-group @change="change" :defaultValue="checked">
+              <button-group-item> 自查情况 </button-group-item>
+              <button-group-item> 监督检查 </button-group-item>
+              <button-group-item> 网格排查 </button-group-item>
+              <button-group-item> 维保情况 </button-group-item>
+            </button-group>
+          </div>
+        </el-form>
+        <div class="btn-item">
+          <el-button @click="funList">搜索</el-button>
+          <el-button @click="resetForm">重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 自查情况 -->
+    <basic-table
+      :data="tableData"
+      style="text-align: center"
+      v-if="checked === 0"
+    >
+      <el-table-column type="index" label="序号" width="60"> </el-table-column>
+      <el-table-column
+        label="巡查日期"
+        width="100"
+        prop="createDate"
+      ></el-table-column>
+      <el-table-column
+        prop="type"
+        label="巡查类型"
+        min-width="180"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="userName"
+        label="巡查人"
+        show-overflow-tooltip
+        min-width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="taskFlag"
+        label="巡查结果"
+        show-overflow-tooltip
+        min-width="100"
+      >
+        <template slot-scope="scope">
+          <span v-if="scope.row.taskFlag === 2" style="color: #23f59d"
+            >正常</span
+          >
+          <span v-if="scope.row.taskFlag === 1" style="color: #df575b"
+            >异常</span
+          >
+          <span v-if="scope.row.taskFlag === 0" style="color: #df575b"
+            >未检</span
+          >
+        </template>
+      </el-table-column>
+    </basic-table>
+
+    <!-- 监督检查 -->
+    <basic-table
+      :data="tableData"
+      style="text-align: center"
+      v-if="checked === 1"
+    >
+      <el-table-column type="index" label="序号" width="60"> </el-table-column>
+      <el-table-column
+        label="检查日期"
+        width="100"
+        prop="startTime"
+      ></el-table-column>
+      <el-table-column
+        prop="jcdw"
+        label="检查单位"
+        min-width="180"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="bjcdwmc"
+        label="检查对象"
+        show-overflow-tooltip
+        min-width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="jclx"
+        label="检查类型"
+        show-overflow-tooltip
+        min-width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="jcjg"
+        label="检查结果"
+        show-overflow-tooltip
+        min-width="100"
+      >
+        <template slot-scope="scope">
+          <span v-if="scope.row.taskFlag === 2" style="color: #23f59d"
+            >正常</span
+          >
+          <span v-if="scope.row.taskFlag === 1" style="color: #df575b"
+            >异常</span
+          >
+          <span v-if="scope.row.taskFlag === 0" style="color: #df575b"
+            >未检</span
+          >
+        </template>
+      </el-table-column>
+    </basic-table>
+
+    <!-- 网格排查 -->
+    <basic-table
+      :data="tableData"
+      style="text-align: center"
+      v-if="checked === 2"
+    >
+      <el-table-column type="index" label="序号" width="60"> </el-table-column>
+      <el-table-column
+        label="检查日期"
+        width="100"
+        prop="djsj"
+      ></el-table-column>
+      <el-table-column
+        prop="zgzrdw"
+        label="排查单位"
+        min-width="180"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="zgzrr"
+        label="排查人员"
+        show-overflow-tooltip
+        min-width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="sl"
+        label="发现隐患数"
+        show-overflow-tooltip
+        min-width="100"
+      >
+        <template>{{ 1 }}</template>
+      </el-table-column>
+    </basic-table>
+
+    <!-- 维保情况 -->
+    <basic-table
+      :data="tableData"
+      style="text-align: center"
+      v-if="checked === 3"
+    >
+      <el-table-column type="index" label="序号" width="60"> </el-table-column>
+      <el-table-column
+        label="维保日期"
+        width="100"
+        prop="wbsj"
+      ></el-table-column>
+      <el-table-column
+        prop="wbzq"
+        label="维保周期"
+        min-width="180"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="xcjcr"
+        label="现场检查人"
+        show-overflow-tooltip
+        min-width="100"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="zyzt"
+        label="维保结果"
+        show-overflow-tooltip
+        min-width="100"
+      ></el-table-column>
+    </basic-table>
+
+    <br />
+    <basic-pagination
+      layout="->,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: 150px;
+    // 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;
+  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;
+}
+</style>

app/src/views/Detail/components/MaintenanceSupervision.vue

@@ -4,98 +4,96 @@
       <button-group @change="change">
         <button-group-item> 自查情况 </button-group-item>
         <button-group-item> 监督检查 </button-group-item>
-        <button-group-item> 网络排查 </button-group-item>
+        <button-group-item> 网格排查 </button-group-item>
         <button-group-item> 维保情况 </button-group-item>
       </button-group>
     </div>
     <div v-if="checked === 0">
-      <div class="row header">
+      <div class="row header" @click="openModal(0)">
         <span class="time">巡查日期</span>
         <span class="person">巡查人</span>
         <span class="result">检查结果</span>
       </div>
-      <VueSeamlessScroll :data="list1" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list1" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person">{{ item[1] }}</span>
-            <span
-              class="result"
-              :style="{
-                color: resultType(item[2]),
-              }"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
+      <ul class="item" @click="openModal(0)">
+        <li class="row" v-for="(item, index) in list1" :key="index">
+          <span class="time" :tilte="item[0]">{{ item[0] }}</span>
+          <span class="person" :tilte="item[1]">{{ item[1] }}</span>
+          <span
+            class="result"
+            :style="{
+              color: resultType(item[2]),
+            }"
+             :tilte="item[2]"
+            >{{ item[2] }}</span
+          >
+        </li>
+      </ul>
     </div>
 
     <div v-if="checked === 1">
-      <div class="row header">
+      <div class="row header" @click="openModal(1)">
         <span class="time">检查日期</span>
+         <span class="person">检查单位</span>
         <span class="person">检查对象</span>
         <span class="result">检查结果</span>
       </div>
-      <VueSeamlessScroll :data="list2" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list2" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person">{{ item[1] }}</span>
-            <span
-              class="result"
-              :style="{
-                color: resultType(item[2]),
-              }"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
+      <ul class="item" @click="openModal(1)">
+        <li class="row" v-for="(item, index) in list2" :key="index">
+          <span class="time" :tilte="item[0]">{{ item[0] }}</span>
+          <span class="time" :tilte="item[1]">{{ item[1] }}</span>
+          <span class="person" :tilte="item[2]">{{ item[2] }}</span>
+          <span
+            class="result"
+            :style="{
+              color: resultType(item[3]),
+            }"
+             :tilte="item[3]"
+            >{{ item[3] }}</span
+          >
+        </li>
+      </ul>
     </div>
     <div v-if="checked === 2">
-      <div class="row header">
+      <div class="row header" @click="openModal(2)">
         <span class="time">检查日期</span>
         <span class="person">排查人员</span>
         <span class="result">发现隐患数</span>
       </div>
-      <VueSeamlessScroll :data="list3" :class-option="classOption" class="warp">
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list3" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person">{{ item[1] }}</span>
-            <span
-              class="result"
-              :style="{
-                color: resultType(item[2]),
-              }"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      </VueSeamlessScroll>
+      <ul class="item" @click="openModal(2)">
+        <li class="row" v-for="(item, index) in list3" :key="index">
+          <span class="time" :tilte="item[0]">{{ item[0] }}</span>
+          <span class="person" :tilte="item[1]">{{ item[1] }}</span>
+          <span
+            class="result"
+            :style="{
+              color: resultType(item[2]),
+            }"
+             :tilte="item[2]"
+            >{{ item[2] }}</span
+          >
+        </li>
+      </ul>
     </div>
     <div v-if="checked === 3">
-      <div class="row header">
+      <div class="row header" @click="openModal(3)">
         <span class="time">维保日期</span>
         <span class="person">现场检查人</span>
         <span class="result">维保结果</span>
       </div>
-      <!-- <VueSeamlessScroll :data="list4" :class-option="classOption" class="warp"> -->
-        <ul class="item">
-          <li class="row" v-for="(item, index) in list4" :key="index">
-            <span class="time">{{ item[0] }}</span>
-            <span class="person">{{ item[1] }}</span>
-            <span
-              class="result"
-              :style="{
-                color: resultType(item[2]),
-              }"
-              >{{ item[2] }}</span
-            >
-          </li>
-        </ul>
-      <!-- </VueSeamlessScroll> -->
+      <ul class="item" @click="openModal(3)">
+        <li class="row" v-for="(item, index) in list4" :key="index">
+          <span class="time" :tilte="item[0]">{{ item[0] }}</span>
+          <span class="person" :tilte="item[1]">{{ item[1] }}</span>
+          <span
+            class="result"
+            :style="{
+              color: resultType(item[2]),
+            }"
+             :tilte="item[2]"
+            >{{ item[2] }}</span
+          >
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -161,6 +159,12 @@ export default {
     },
   },
   methods: {
+    openModal(checked) {
+      this.$emit("openModal", {
+        name: "zcModal",
+        params: { jzid: this.detail.id, checked: checked },
+      });
+    },
     change(idx) {
       this.checked = idx;
       console.log("切换索引", idx);
@@ -206,7 +210,7 @@ export default {
         const list = [];
         if (res.data.rows) {
           res.data.rows.forEach((p) => {
-            list.push([p.finishTime, p.bjcdwmc, p.jcjg]);
+            list.push([p.finishTime, p.jcdw, p.bjcdwmc, p.jcjg]);
           });
         }
         this.list2 = list;
@@ -249,7 +253,7 @@ export default {
         const list = [];
         if (res.data.rows) {
           res.data.rows.forEach((p) => {
-            list.push([p.wbsj, p.xcjcr, p.wbjg]);
+            list.push([p.wbsj, p.xcjcr, p.zyzt]);
           });
         }
 
@@ -308,9 +312,14 @@ export default {
     .person,
     .result {
       flex: 0.33;
+      height: 39px;
+      overflow: hidden;
       display: flex;
       justify-content: center;
       align-items: center;
+      white-space: nowrap;
+      padding: 0 12px;
+      box-sizing: border-box;
     }
   }
 }

app/src/views/Detail/components/Risklevel.vue

@@ -21,7 +21,7 @@
       >
         存在隐患数:
       </div>
-      <div class="level-btn2">{{ yhList.length }} <span>个</span></div>
+      <div class="level-btn2" @click="openModal('yhModal')" style="cursor: pointer">{{ yhList.length }} <span>个</span></div>
     </div>
     <div class="level_bottom">
       <div class="code">
@@ -107,7 +107,7 @@ export default {
   components: {},
   methods: {
     openModal(name) {
-      if (name === "qhyyModal") {
+      if (name === "qhyyModal" || name === "yhModal") {
         this.$emit("openModal", {
           name,
           params: { gcjzmc: this.detail.gcjzmc },

app/src/views/Detail/components/YhModalContent.vue

@@ -16,14 +16,60 @@ export default {
       params: {
         pageSize: 10,
         pageNum: 1,
-        zqdd: null,
         qx: null,
-        rysws: null,
-        qhyy1: null,
-        zqsj: null,
+        zdqx: null,
+        yhxm: null,
+        pcqk: null,
+        yhjd: null,
+        zgsx: null,
       },
       total: 0,
       search: "",
+      zdqxOptions: ["用电用气", "消防设施", "生命通道", "消防管理"],
+      yhxmOptions: [
+        "室外消火栓系统",
+        "存在违规设置突出外墙防护网现象",
+        "无维保单位",
+        "存在电动自行车违规停放充电现象",
+        "消防车通道存在堵塞、占用情况",
+        "火灾自动报警系统",
+        "室内消火栓系统",
+        "无管理主体",
+        "存在可燃雨棚",
+        "气体灭火系统",
+        "建筑内疏散通道、安全出口被堵塞、占用或封闭",
+        "其他",
+        "自动喷水灭火系统",
+        "消防车道、消防车救援场地未设置标志标牌、施划标线",
+        "机械防、排烟系统",
+        "防火卷帘",
+        "搭建易燃可燃彩钢板房",
+        "建筑外墙保温材料",
+        "电梯线路私接乱拉",
+        "配建车库违规改变使用功能",
+        "消防控制室值班人员配备不到位",
+        "违规设置群租房",
+        "电缆井内电气线路敷设不规范",
+        "防火封堵被破坏",
+        "无",
+        "违规储存、经营、使用易燃易爆危险品",
+        "影响灭火救援的装饰、广告牌",
+        "人员密集场所室内采易燃可燃材料装修",
+        "燃气管线用具敷设安装不规范",
+        "住宅部分与非住宅部分共用疏散楼梯建",
+        "违规使用瓶装液化石油气",
+        "避难层（间）被占用或擅自改变用途",
+      ],
+      pcqkOptions: ["存在", "不存在"],
+      zgjdOptions: ["待计划整改", "已计划待整改", "已整改"],
+      zgqxOptions: [
+        "15日到期整改",
+        "30日到期整改",
+        "60日到期整改",
+        "限期2023年底整改",
+        "限期2024年底整改",
+        "限期2025年底整改",
+      ],
     };
   },
   props: {
@@ -34,7 +80,7 @@ export default {
     default: {
       handler() {
         const params = JSON.parse(JSON.stringify(this.params));
-        params.zqdd = this.default.gcjzmc;
+        params.gcjzmc = this.default.gcjzmc;
         this.params = params;
         this.funList();
       },
@@ -44,16 +90,36 @@ export default {
   },
   methods: {
     funList() {
-      if (this.zqsj) {
-        const start = moment(this.zqsj[0]).format("yyyy-MM-DD HH:mm:ss");
-        const end = moment(this.zqsj[1]).format("yyyy-MM-DD HH:mm:ss");
-        this.params.zqsj = start + "|" + end;
-      } else {
-        this.params.zqsj = null;
+      const params = JSON.parse(JSON.stringify(this.params));
+      if (this.params.zdqx) {
+        params.zdqx = this.params.zdqx.join(",");
       }
-      ylycyhzzqdTc({
-        ...this.params,
-      }).then((res) => {
+      if (this.params.yhxm) {
+        params.yhxm = this.params.yhxm.join(",");
+      }
+      if (this.params.zgjd) {
+        params.zgjd = this.params.zgjd.join(",");
+      }
+      if (this.params.zgsx) {
+        // 计算
+        let endTime = null;
+        if (this.params.zgsx === "15日到期整改") {
+          endTime = moment().add(15, "d").format("yyyy-MM-DD HH:mm:ss");
+        } else if (this.params.zgsx === "30日到期整改") {
+          endTime = moment().add(30, "d").format("yyyy-MM-DD HH:mm:ss");
+        } else if (this.params.zgsx === "60日到期整改") {
+          endTime = moment().add(60, "d").format("yyyy-MM-DD HH:mm:ss");
+        } else if (this.params.zgsx === "限期2023年底整改") {
+          endTime = "2023-12-31 23:59:59";
+        } else if (this.params.zgsx === "限期2024年底整改") {
+          endTime = "2024-12-31 23:59:59";
+        } else if (this.params.zgsx === "限期2025年底整改") {
+          endTime = "2025-12-31 23:59:59";
+        }
+
+        params.zgsx = "1970-01-01 00:00:00|" + endTime;
+      }
+      ylycyhzzqdTc(params).then((res) => {
         this.tableData = res.data.rows;
         this.total = res.data.total;
       });
@@ -70,18 +136,21 @@ export default {
       this.params = {
         pageSize: 10,
         pageNum: 1,
-        sfzddw: null,
-        zqdd: null,
-        dwmc: null,
-        rzxs: null,
+        qx: null,
+        zdqx: null,
+        yhxm: null,
+        pcqk: null,
+        yhjd: null,
+        zgsx: null,
+        gcjzmc: null,
       };
       this.funList();
     },
   },
   created() {
-    // console.log(this.default);
+    console.log(this.default);
     const params = JSON.parse(JSON.stringify(this.params));
-    params.zqdd = this.default.gcjzmc;
+    params.gcjzmc = this.default.gcjzmc;
     this.params = params;
 
     // 查询区域
@@ -114,46 +183,70 @@ export default {
               </el-option>
             </el-select>
           </el-form-item>
-          <!-- 建筑名称 -->
+          <!-- 重点情形 -->
           <el-form-item>
-            <div class="inp">
-              <el-input
-                v-model="params.zqdd"
-                placeholder="建筑名称(模糊)"
-              ></el-input>
-            </div>
+            <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.rysws" placeholder="伤亡">
-              <el-option :value="1" label="是"> </el-option>
-              <el-option :value="0" label="否"> </el-option>
+            <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-date-picker
-              v-model="zqsj"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: 380px"
-            >
-            </el-date-picker>
+            <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.qhyy1" placeholder="起火原因">
+            <el-select v-model="params.zgjd" placeholder="整改进度" multiple collapse-tags>
               <el-option
-                :value="item.value"
-                :label="item.label"
-                v-for="(item, index) in qhyyList"
-                :key="index"
-              >
-              </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>
+            <div class="inp">
+              <el-input
+                v-model="params.gcjzmc"
+                placeholder="建筑名称(模糊)"
+              ></el-input>
+            </div>
+          </el-form-item>
         </el-form>
         <div class="btn-item">
           <el-button @click="funList">搜索</el-button>
@@ -166,38 +259,56 @@ export default {
       <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="zqdd"
-        label="高层建筑名称"
-        min-width="230"
+        prop="gcjzmc"
+        label="建筑名称"
+        min-width="180"
         show-overflow-tooltip
       >
       </el-table-column>
       <el-table-column
-        prop="zqsj"
-        label="起火时间"
+        prop="zdqx"
+        label="重点情形"
         show-overflow-tooltip
-        min-width="120"
+        min-width="100"
       >
       </el-table-column>
-      <el-table-column label="亡人数（人）" show-overflow-tooltip>
+      <el-table-column label="隐患数" show-overflow-tooltip>
+        <template> 1 </template>
       </el-table-column>
-      <el-table-column label="伤人数（人）" show-overflow-tooltip>
+      <el-table-column prop="yhxm" label="隐患项目" show-overflow-tooltip min-width="150">
       </el-table-column>
-      <el-table-column
-        prop="zjccss"
-        label="直接经济损失（万元）"
-        show-overflow-tooltip
-        min-width="150"
-      >
+      <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="qhyy1"
-        label="起火原因"
+        prop="sfts"
+        label="是否推送乡镇街道、公安派出所或者行业部门"
         show-overflow-tooltip
-        align="center"
-        min-width="100"
+        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
@@ -216,6 +327,7 @@ export default {
 .maintenance-supervision {
   // padding: 10px 10px 0px 20px;
   ::v-deep(.el-input__inner) {
+    width: 200px !important;
     border: none;
     background: linear-gradient(
       360deg,
@@ -223,6 +335,7 @@ export default {
       rgba(0, 148, 255, 0.31) 100%
     );
     color: #fff;
+    height: 30px !important;
   }
   ::v-deep(.el-button) {
     border: none;
@@ -358,4 +471,38 @@ export default {
 ::v-deep(.el-date-editor .el-range__close-icon) {
   line-height: 24px !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;
+}
+
 </style>

app/src/views/Detail/index.vue

@@ -65,7 +65,7 @@
         style="margin-bottom: 6px"
         title="自查、监督、维保"
       >
-        <maintenance-supervision :detail="detail" v-if="detail" />
+        <maintenance-supervision :detail="detail" v-if="detail" @openModal="openModal" />
       </border-panel>
     </div>
 
@@ -95,7 +95,7 @@
     </basic-modal>
 
     <!-- 隐患 -->
-    <basic-modal top="120px" ref="yhModal" name="历史火灾">
+    <basic-modal top="120px" ref="yhModal" name="“一楼一策”隐患整治清单">
       <YhModalContent :default="params.yhModal" />
     </basic-modal>
 
@@ -103,6 +103,11 @@
     <basic-modal top="120px" ref="zhxfModal" name="智慧消防">
       <ZhxfModalContent :default="params.zhxfModal" />
     </basic-modal>
+
+    <!-- 自查 -->
+    <basic-modal top="120px" ref="zcModal" name="自查、督查、维保信息">
+      <MaintenanceModalContent :default="params.zcModal" />
+    </basic-modal>
   </div>
 </template>
 <script>
@@ -120,6 +125,7 @@ import BasicInfoModalContent from "../Home/components/BasicInfoModalContent.vue"
 import QhyyModalContent from "./components/QhyyModalContent.vue";
 import YhModalContent from "./components/YhModalContent.vue";
 import ZhxfModalContent from "./components/ZhxfModalContent.vue";
+import MaintenanceModalContent from "./components/MaintenanceModalContent.vue";
 export default {
   name: "BasicInfoPage",
   components: {
@@ -136,6 +142,7 @@ export default {
     QhyyModalContent,
     YhModalContent,
     ZhxfModalContent,
+    MaintenanceModalContent,
   },
   data() {
     return {
@@ -148,6 +155,7 @@ export default {
         qhyyModal: null,
         yhModal: null,
         zhxfModal: null,
+        zcModal: null,
       },
     };
   },

components/ButtonGroup/index.vue

@@ -1,5 +1,5 @@
 <script>
-import { defineComponent, h, onMounted } from "vue";
+import { defineComponent, h, onMounted, watch } from "vue";
 
 export default defineComponent({
   name: "ButtonGroup",
@@ -16,6 +16,13 @@ export default defineComponent({
       .default()
       .filter((item) => item.componentOptions?.tag === "button-group-item");
 
+    watch(
+      () => props.defaultValue,
+      () => {
+        setCheckedState(props.defaultValue);
+      }
+    );
+
     function setCheckedState(setIndex) {
       children.forEach((node, index) => {
         if (setIndex !== index) {