弹窗

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

@@ -0,0 +1,361 @@
+<script>
+import { getLshz } from "@/api/detail.js";
+import punishmentMixin from "@/mixin/unit.js";
+import { area } from "@/api/area";
+import moment from "moment";
+export default {
+  name: "QhyyModalContent",
+  mixins: [punishmentMixin],
+  data() {
+    return {
+      options: [],
+      fxdjList: [],
+      tableData: [],
+      unitList: [],
+      zqsj: null,
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+        zqdd: null,
+        qx: null,
+        rysws: null,
+        qhyy1: null,
+        zqsj: null,
+      },
+      total: 0,
+      search: "",
+    };
+  },
+  props: {
+    qy: String,
+    default: Object,
+  },
+  watch: {
+    default: {
+      handler() {
+        const params = JSON.parse(JSON.stringify(this.params));
+        params.zqdd = this.default.gcjzmc;
+        this.params = params;
+        this.funList();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  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;
+      }
+      getLshz({
+        ...this.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,
+        sfzddw: null,
+        zqdd: null,
+        dwmc: null,
+        rzxs: null,
+      };
+      this.funList();
+    },
+  },
+  created() {
+    // console.log(this.default);
+    const params = JSON.parse(JSON.stringify(this.params));
+    params.zqdd = this.default.gcjzmc;
+    this.params = params;
+
+    // 查询区域
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+    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>
+            <div class="inp">
+              <el-input
+                v-model="params.zqdd"
+                placeholder="建筑名称(模糊)"
+              ></el-input>
+            </div>
+          </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>
+          </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-form-item>
+          <!-- 起火原因 -->
+          <el-form-item>
+            <el-select v-model="params.qhyy1" placeholder="起火原因">
+              <el-option
+                :value="item.value"
+                :label="item.label"
+                v-for="(item, index) in qhyyList"
+                :key="index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </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">
+      <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"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="zqsj"
+        label="起火时间"
+        show-overflow-tooltip
+        min-width="120"
+      >
+      </el-table-column>
+      <el-table-column prop="srs" label="亡人数（人）" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column props="rysws" label="伤人数（人）" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="zjccss"
+        label="直接经济损失（万元）"
+        show-overflow-tooltip
+        min-width="150"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="qhyy1"
+        label="起火原因"
+        show-overflow-tooltip
+        align="center"
+        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) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.31) 100%
+    );
+    color: #fff;
+  }
+  ::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/Risklevel.vue

@@ -14,7 +14,11 @@
       </div>
     </div>
     <div class="row">
-      <div style="font-size: 18px; cursor: pointer" class="label" @click="openModal('whYhModal')">
+      <div
+        style="font-size: 18px; cursor: pointer"
+        class="label"
+        @click="openModal('whYhModal')"
+      >
         存在隐患数:
       </div>
       <div class="level-btn2">{{ yhList.length }} <span>个</span></div>
@@ -81,7 +85,7 @@
         </ul>
       </div>
     </div>
-    <div class="hzs">
+    <div class="hzs" @click="openModal('qhyyModal')">
       历史火灾数: <span class="hzs-cnt">{{ hzs.length }}</span> 起
     </div>
   </div>
@@ -103,7 +107,14 @@ export default {
   components: {},
   methods: {
     openModal(name) {
-      this.$emit("openModal", { name });
+      if (name === "qhyyModal") {
+        this.$emit("openModal", {
+          name,
+          params: { gcjzmc: this.detail.gcjzmc },
+        });
+      } else {
+        this.$emit("openModal", { name });
+      }
     },
     rowClickHandler() {
       this.$router.push(`/h5?id=${"72042"}`);
@@ -313,6 +324,7 @@ export default {
   padding-left: 44px;
 }
 .hzs {
+  cursor: pointer;
   height: 30px;
   line-height: 24px;
   position: absolute;

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

@@ -177,8 +177,24 @@ export default {
   props: ["detail"],
   methods: {
     clickItem(idx) {
-      this[`pieActive${idx}`] = !this[`pieActive${idx}`];
-      this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
+      // this[`pieActive${idx}`] = !this[`pieActive${idx}`];
+      // this.$refs.monitor.legendToggleSelect(this.ctx[idx - 1]);
+      let sblx = "";
+      if (idx === 1) {
+        sblx = "生命通道监测";
+      } else if (idx === 2) {
+        sblx = "电气火灾终端";
+      } else if (idx === 3) {
+        sblx = "水压监测终端";
+      } else if (idx === 4) {
+        sblx = "火灾报警";
+      } else if (idx === 5) {
+        sblx = "消防控制室监控";
+      }
+      this.$emit("openModal", {
+        name: "zhxfModal",
+        params: { sblx, gcjzmc: this.detail.gcjzmc },
+      });
     },
     getCaremarList() {
       getDeviceList({

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

@@ -0,0 +1,361 @@
+<script>
+import { getYh } from "@/api/detail.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,
+        zqdd: null,
+        qx: null,
+        rysws: null,
+        qhyy1: null,
+        zqsj: null,
+      },
+      total: 0,
+      search: "",
+    };
+  },
+  props: {
+    qy: String,
+    default: Object,
+  },
+  watch: {
+    default: {
+      handler() {
+        const params = JSON.parse(JSON.stringify(this.params));
+        params.zqdd = this.default.gcjzmc;
+        this.params = params;
+        this.funList();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  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;
+      }
+      getYh({
+        ...this.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,
+        sfzddw: null,
+        zqdd: null,
+        dwmc: null,
+        rzxs: null,
+      };
+      this.funList();
+    },
+  },
+  created() {
+    // console.log(this.default);
+    const params = JSON.parse(JSON.stringify(this.params));
+    params.zqdd = this.default.gcjzmc;
+    this.params = params;
+
+    // 查询区域
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+    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>
+            <div class="inp">
+              <el-input
+                v-model="params.zqdd"
+                placeholder="建筑名称(模糊)"
+              ></el-input>
+            </div>
+          </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>
+          </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-form-item>
+          <!-- 起火原因 -->
+          <el-form-item>
+            <el-select v-model="params.qhyy1" placeholder="起火原因">
+              <el-option
+                :value="item.value"
+                :label="item.label"
+                v-for="(item, index) in qhyyList"
+                :key="index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </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">
+      <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"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="zqsj"
+        label="起火时间"
+        show-overflow-tooltip
+        min-width="120"
+      >
+      </el-table-column>
+      <el-table-column label="亡人数（人）" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column label="伤人数（人）" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="zjccss"
+        label="直接经济损失（万元）"
+        show-overflow-tooltip
+         min-width="150"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="qhyy1"
+        label="起火原因"
+        show-overflow-tooltip
+        align="center"
+        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) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.31) 100%
+    );
+    color: #fff;
+  }
+  ::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/ZhxfModalContent.vue

@@ -0,0 +1,362 @@
+<script>
+import { getLshz } from "@/api/detail.js";
+import punishmentMixin from "@/mixin/unit.js";
+import { area } from "@/api/area";
+import moment from "moment";
+export default {
+  name: "QhyyModalContent",
+  mixins: [punishmentMixin],
+  data() {
+    return {
+      options: [],
+      fxdjList: [],
+      tableData: [],
+      unitList: [],
+      zqsj: null,
+      params: {
+        pageSize: 10,
+        pageNum: 1,
+        qx: null,
+        sblx: null,
+        zt: null,
+        gcjzmc: null
+      },
+      total: 0,
+      search: "",
+    };
+  },
+  props: {
+    qy: String,
+    default: Object,
+  },
+  watch: {
+    default: {
+      handler() {
+        const params = JSON.parse(JSON.stringify(this.params));
+        params.sblx = this.default.sblx;
+        params.gcjzmc = this.default.gcjzmc;
+        this.params = params;
+        this.funList();
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  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;
+      }
+      getLshz({
+        ...this.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,
+        sblx: null,
+        zt: null,
+        gcjzmc: null
+      };
+      this.funList();
+    },
+  },
+  created() {
+    // console.log(this.default);
+    const params = JSON.parse(JSON.stringify(this.params));
+    params.sblx = this.default.sblx;
+    params.gcjzmc = this.default.gcjzmc;
+    this.params = params;
+
+    // 查询区域
+    area({
+      pageNum: 1,
+      pageSize: 100,
+    }).then((res) => {
+      this.options = res.data.rows;
+    });
+    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>
+            <div class="inp">
+              <el-input
+                v-model="params.zqdd"
+                placeholder="建筑名称(模糊)"
+              ></el-input>
+            </div>
+          </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>
+          </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-form-item>
+          <!-- 起火原因 -->
+          <el-form-item>
+            <el-select v-model="params.qhyy1" placeholder="起火原因">
+              <el-option
+                :value="item.value"
+                :label="item.label"
+                v-for="(item, index) in qhyyList"
+                :key="index"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </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">
+      <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"
+        show-overflow-tooltip
+      >
+      </el-table-column>
+      <el-table-column
+        prop="zqsj"
+        label="起火时间"
+        show-overflow-tooltip
+        min-width="120"
+      >
+      </el-table-column>
+      <el-table-column prop="srs" label="亡人数（人）" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column props="rysws" label="伤人数（人）" show-overflow-tooltip>
+      </el-table-column>
+      <el-table-column
+        prop="zjccss"
+        label="直接经济损失（万元）"
+        show-overflow-tooltip
+        min-width="150"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="qhyy1"
+        label="起火原因"
+        show-overflow-tooltip
+        align="center"
+        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) {
+    border: none;
+    background: linear-gradient(
+      360deg,
+      rgba(0, 148, 255, 0.5) 0%,
+      rgba(0, 148, 255, 0.31) 100%
+    );
+    color: #fff;
+  }
+  ::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/index.vue

@@ -58,7 +58,7 @@
     </div>
     <div>
       <border-panel height="521px" style="margin-bottom: 6px" title="智慧消防">
-        <VideoInfo :detail="detail" v-if="detail" />
+        <VideoInfo :detail="detail" v-if="detail" @openModal="openModal" />
       </border-panel>
       <border-panel
         height="425px"
@@ -88,6 +88,16 @@
     <basic-modal top="120px" ref="whYhModal" name="隐患">
       <img src="../../assets/images/dd-exp-yh.png" />
     </basic-modal>
+
+    <!-- 历史火灾 -->
+    <basic-modal top="120px" ref="qhyyModal" name="历史火灾">
+      <QhyyModalContent :default="params.qhyyModal" />
+    </basic-modal>
+
+    <!-- 智慧消防 -->
+    <basic-modal top="120px" ref="zhxfModal" name="智慧消防">
+      <ZhxfModalContent :default="params.qhyyModal" />
+    </basic-modal>
   </div>
 </template>
 <script>
@@ -102,6 +112,8 @@ import { getBuildDetail } from "@/api/detail.js";
 import Map from "@/components/Map.vue";
 import GldwModalContent from "./components/GldwModalContent.vue";
 import BasicInfoModalContent from "../Home/components/BasicInfoModalContent.vue";
+import QhyyModalContent from "./components/QhyyModalContent.vue";
+import ZhxfModalContent from "./components/ZhxfModalContent.vue";
 export default {
   name: "BasicInfoPage",
   components: {
@@ -115,6 +127,8 @@ export default {
     Map,
     GldwModalContent,
     BasicInfoModalContent,
+    QhyyModalContent,
+    ZhxfModalContent,
   },
   data() {
     return {
@@ -124,6 +138,7 @@ export default {
       mapData: null,
       params: {
         gldwModal: null,
+        qhyyModal: null,
       },
     };
   },

package.json

@@ -33,6 +33,7 @@
     "echarts": "^5.4.2",
     "echarts-gl": "^2.0.9",
     "element-ui": "^2.15.9",
+    "moment": "^2.29.4",
     "vue": "^2.7.8"
   }
 }