<script>
// import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
import { area } from "@/api/area";
import punishmentMixin from "@/mixin/unit.js";
import {
  fxdjTc,
  xfssyhTc,
  smtdyhTc,
  ydyqyhTc,
  xfglyhTc,
  zgtjTc,
} from "@/api/risk";
export default {
  name: "fxyjCont",
  mixins: [punishmentMixin],
  props: {
    idx: Number,
    qx: String,
  },
  data() {
    return {
      options: [],
      fxdjList: [],
      tableData: [],
      yhList: [],
      smtdList: [],
      unitList: [],
      ydyqList: [],
      czyhList: [],
      zgtjTcList: [],
      value: "",
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      params1: {
        pageSize: 10,
        pageNum: 1,
      },
      params2: {
        pageSize: 10,
        pageNum: 1,
      },
      params3: {
        pageSize: 10,
        pageNum: 1,
      },
      params4: {
        pageSize: 10,
        pageNum: 1,
      },
      params5: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      showFlag: 1,
    };
  },
  watch: {
    idx: {
      handler(val) {
        this.showFlag = val;
      },
      immediate: true,
      deep: true,
    },
    qx: {
      handler(val) {
        this.value = val;
        this.search();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    switchTo(key, val, keys = null, values = null, page = 'yhModal') {
      const params = {};
      params[key] = val;
      console.log(keys);
      console.log(values);
      if (keys != null && keys.length > 0) {
        keys.forEach((p, i) => {
          params[p] = values[i];
        });
      }
      console.log(params);
      params.page = page;
      this.$emit("switchTo", params);
    },
    search() {
      if (this.showFlag === 1) {
        this.funUnitList();
      }
      if (this.showFlag === 2) {
        this.funYhList();
      }
      if (this.showFlag === 3) {
        this.funSmtdList();
      }
      if (this.showFlag === 4) {
        this.funYdyqList();
      }
      if (this.showFlag === 5) {
        this.funYzyhList();
      }
      if (this.showFlag === 6) {
        this.funZgtjList();
      }
    },
    // 风险预警
    funUnitList() {
      fxdjTc({
        ...this.params,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    // 隐患
    funYhList() {
      xfssyhTc({
        ...this.params1,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.yhList = res.data.rows;
        this.total1 = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.funUnitList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.funUnitList();
    },
    resetForm() {
      this.value = "";
      this.params = {
        pageSize: 10,
        pageNum: 1,
      };
      this.params1 = {
        pageSize: 10,
        pageNum: 1,
      };
      this.params2 = {
        pageSize: 10,
        pageNum: 1,
      };
      this.params3 = {
        pageSize: 10,
        pageNum: 1,
      };
      this.params4 = {
        pageSize: 10,
        pageNum: 1,
      };
      this.params5 = {
        pageSize: 10,
        pageNum: 1,
      };
      this.funUnitList();
      this.funYhList();
      this.funSmtdList();
      this.funYdyqList();
      this.funYzyhList();
      this.funZgtjList();
    },
    changeList(val) {
      this.showFlag = val;
      this.search();
    },
    addClass(i) {
      return this.showFlag === i ? "active" : "tab-item";
    },
    // 设施隐患
    handleSizeChange1(val) {
      this.params1.pageSize = val;
      this.funYhList();
    },
    handleCurrentChange1(val) {
      this.params1.pageNum = val;
      this.funYhList();
    },
    // 生命通道
    funSmtdList() {
      smtdyhTc({
        ...this.params2,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.smtdList = res.data.rows;
        this.total2 = res.data.total;
      });
    },
    handleSizeChange2(val) {
      this.params2.pageSize = val;
      this.funSmtdList();
    },
    handleCurrentChange2(val) {
      this.params2.pageNum = val;
      this.funSmtdList();
    },
    // 用电用气
    funYdyqList() {
      ydyqyhTc({
        ...this.params3,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.ydyqList = res.data.rows;
        this.total3 = res.data.total;
      });
    },
    handleSizeChange3(val) {
      this.params3.pageSize = val;
      this.funYdyqList();
    },
    handleCurrentChange3(val) {
      this.params3.pageNum = val;
      this.funYdyqList();
    },
    // 存在隐患
    funYzyhList() {
      xfglyhTc({
        ...this.params4,
        qx: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.czyhList = res.data.rows;
        this.total4 = res.data.total;
      });
    },
    handleSizeChange4(val) {
      this.params4.pageSize = val;
      this.funYzyhList();
    },
    handleCurrentChange4(val) {
      this.params4.pageNum = val;
      this.funYzyhList();
    },
    // 整改统计
    funZgtjList() {
      zgtjTc({
        ...this.params5,
        qy: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        this.zgtjTcList = res.data.rows;
        this.total5 = res.data.total;
      });
    },
    handleSizeChange4(val) {
      this.params4.pageSize = val;
      this.funYzyhList();
    },
    handleCurrentChange4(val) {
      this.params4.pageNum = val;
      this.funYzyhList();
    },
  },
  created() {
    this.funUnitList();
    this.funYhList();
    this.funSmtdList();
    this.funYdyqList();
    this.funYzyhList();
    this.funZgtjList();
    area({
      pageNum: 1,
      pageSize: 100,
    }).then((res) => {
      this.options = res.data.rows;
    });
  },
};
</script>

<template>
  <div>
    <!-- 搜索 -->
    <div class="maintenance-supervision">
      <div class="tab">
        <span class="tab-item" @click="changeList(1)" :class="addClass(1)"
          >风险等级</span
        >
        <span class="tab-item" @click="changeList(2)" :class="addClass(2)"
          >消防设施隐患</span
        >
        <span class="tab-item" @click="changeList(3)" :class="addClass(3)"
          >生命通道隐患</span
        >
        <span class="tab-item" @click="changeList(4)" :class="addClass(4)"
          >用电用气隐患</span
        >
        <span class="tab-item" @click="changeList(5)" :class="addClass(5)"
          >消防管理隐患</span
        >
        <span class="tab-item" @click="changeList(6)" :class="addClass(6)"
          >隐患整改</span
        >
      </div>
      <div class="maintenance-supervision_header">
        <div class="select-item">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              :value="item.areaTitle"
              :label="item.areaTitle"
              v-for="(item, index) in options"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="btn-item">
        <el-button @click="search">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </div>
    <div v-if="showFlag === 1">
      <basic-table :data="tableData" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="switchTo('qy', scope.row.qx, 'baseModal')">{{ scope.row.qx }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="zdfx"
          label="重大风险（栋）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="switchTo('fxdj', '重大风险', ['qy'], [scope.row.qx], 'baseModal')"
            >
              {{ scope.row.zdfx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="jdfx"
          label="较大风险（栋）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="switchTo('fxdj', '较大风险', ['qy'], [scope.row.qx], 'baseModal')"
            >
              {{ scope.row.jdfx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="ybfx"
          label="一般风险（栋）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="switchTo('fxdj', '一般风险', ['qy'], [scope.row.qx], 'baseModal')"
            >
              {{ scope.row.ybfx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dfx" label="低风险（栋）" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="switchTo('fxdj', '低风险', ['qy'], [scope.row.qx], 'baseModal')">
              {{ scope.row.dfx }}
            </div>
          </template>
        </el-table-column>
      </basic-table>
    </div>
    <div v-if="showFlag === 2">
      <basic-table :data="yhList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="switchTo('qx', scope.row.qx)">{{ scope.row.qx }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="hzzdbjxt"
          label="火灾自动报警系统（个）"
          width="190px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['火灾自动报警系统'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.hzzdbjxt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="jxfpyxt"
          width="190px"
          label="机械防、排烟系统（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['机械防、排烟系统'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.jxfpyxt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="snxhsxt"
          label="室内消火栓系统（个）"
          width="190px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['室内消火栓系统'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.snxhsxt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="zdpsmhxt"
          label="自动喷水灭火系统（个）"
          width="190px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['自动喷水灭火系统'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.zdpsmhxt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="qtmhxt"
          label="气体灭火系统（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['气体灭火系统'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.qtmhxt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="swxhsxt"
          label="室外消火栓（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['室外消火栓'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.swxhsxt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="fhjl"
          label="防火卷帘（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['防火卷帘'],
                  ['zdqx', 'qx'],
                  [['消防设施'], scope.row.qx]
                )
              "
            >
              {{ scope.row.fhjl }}
            </div>
          </template>
        </el-table-column>
      </basic-table>
    </div>
    <div v-if="showFlag === 3">
      <basic-table :data="smtdList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="switchTo('qx', scope.row.qx)">{{ scope.row.qx }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="xfctdczdszyqk"
          label="消防车通道存在堵塞、占用情况（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['消防车通道存在堵塞、占用情况'],
                  ['zdqx', 'qx'],
                  [['生命通道'], scope.row.qx]
                )
              "
            >
              {{ scope.row.xfctdczdszyqk }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="xfcdxfcjycdwszbzbpshbx"
          width="440px"
          label="消防车道、消防车救援场地未设置标志标牌、施划标线（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['消防车道、消防车救援场地未设置标志标牌、施划标线'],
                  ['zdqx', 'qx'],
                  [['生命通道'], scope.row.qx]
                )
              "
            >
              {{ scope.row.xfcdxfcjycdwszbzbpshbx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="pjckwggbsygn"
          label="配建车库违规改变使用功能（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['配建车库违规改变使用功能'],
                  ['zdqx', 'qx'],
                  [['生命通道'], scope.row.qx]
                )
              "
            >
              {{ scope.row.pjckwggbsygn }}
            </div>
          </template>
        </el-table-column>
      </basic-table>
    </div>
    <div v-if="showFlag === 4">
      <basic-table :data="ydyqList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="switchTo('qx', scope.row.qx)">{{ scope.row.qx }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="dtxlsjll"
          label="电梯线路私接乱拉（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['电梯线路私接乱拉'],
                  ['zdqx', 'qx'],
                  [['用电用气'], scope.row.qx]
                )
              "
            >
              {{ scope.row.dtxlsjll }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="dljndqxlfsbgf"
          label="电缆井内电气线路敷设不规范（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['电缆井内电气线路敷设不规范'],
                  ['zdqx', 'qx'],
                  [['用电用气'], scope.row.qx]
                )
              "
            >
              {{ scope.row.dljndqxlfsbgf }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="czddzxcwgtfcdxx"
          label="存在电动自行车违规停放充电现象（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['存在电动自行车违规停放充电现象'],
                  ['zdqx', 'qx'],
                  [['用电用气'], scope.row.qx]
                )
              "
            >
              {{ scope.row.czddzxcwgtfcdxx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="fhfdbph"
          label="防火封堵被破坏（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['防火封堵被破坏'],
                  ['zdqx', 'qx'],
                  [['用电用气'], scope.row.qx]
                )
              "
            >
              {{ scope.row.fhfdbph }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wgsypzyhsyq"
          label="违规使用瓶装液化石油气（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['违规使用瓶装液化石油气'],
                  ['zdqx', 'qx'],
                  [['用电用气'], scope.row.qx]
                )
              "
            >
              {{ scope.row.wgsypzyhsyq }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rqgxyjfsazbgf"
          label="燃气管线用具敷设安装不规范（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['燃气管线用具敷设安装不规范'],
                  ['zdqx', 'qx'],
                  [['用电用气'], scope.row.qx]
                )
              "
            >
              {{ scope.row.rqgxyjfsazbgf }}
            </div>
          </template>
        </el-table-column>
      </basic-table>
    </div>
    <div v-if="showFlag === 5">
      <basic-table :data="czyhList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qx" label="区县" show-overflow-tooltip>
          <template slot-scope="scope">
            <div @click="switchTo('qx', scope.row.qx)">{{ scope.row.qx }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="jznsstdaqckbdszyfb"
          label="建筑内疏散通道、安全出口被堵塞、占用或封闭（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['建筑内疏散通道、安全出口被堵塞、占用或封闭'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.jznsstdaqckbdszyfb }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="czkryp"
          label="存在可燃雨棚（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['存在可燃雨棚'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.czkryp }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rymjcssncyrkrclzx"
          label="人员密集场所室内采易燃可燃材料装修（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['人员密集场所室内采易燃可燃材料装修'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.rymjcssncyrkrclzx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="wglzt" label="无管理主体" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['无管理主体'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.wglzt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="wwgdw" label="无维保单位" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['无维保单位'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.wwgdw }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="czwgsztcwqfhwxx"
          label="存在违规设置突出外墙防护网现象"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['存在违规设置突出外墙防护网现象'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.czwgsztcwqfhwxx }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="xfkzszbrypbbdw"
          label="消防控制室值班人员配备不到位"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['消防控制室值班人员配备不到位'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.xfkzszbrypbbdw }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wgszqzf"
          label="违规设置群租房"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['违规设置群租房'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.wgszqzf }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="zzbfyfzzbfgyssltj"
          label="住宅部分与非住宅部分共用疏散楼梯建"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['住宅部分与非住宅部分共用疏散楼梯建'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.zzbfyfzzbfgyssltj }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="djyrkrcgbf"
          label="搭建易燃可燃彩钢板房"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['搭建易燃可燃彩钢板房'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.djyrkrcgbf }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="yxmhjydzsggp"
          label="影响灭火救援的装饰、广告牌"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['影响灭火救援的装饰、广告牌'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.yxmhjydzsggp }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="wgccjysyyrybwxp"
          label="违规储存、经营、使用易燃易爆危险品"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['违规储存、经营、使用易燃易爆危险品'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.wgccjysyyrybwxp }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="jzwqbwcl"
          label="建筑外墙保温材料"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['建筑外墙保温材料'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.jzwqbwcl }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="bzyhszgbyt"
          label="避难层（间）被占用或擅自改变用途"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['避难层（间）被占用或擅自改变用途'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.bzyhszgbyt }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="qt" label="其他" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'yhxm',
                  ['其他'],
                  ['zdqx', 'qx'],
                  [['消防管理'], scope.row.qx]
                )
              "
            >
              {{ scope.row.qt }}
            </div>
          </template>
        </el-table-column>
      </basic-table>
    </div>
    <div v-if="showFlag === 6">
      <basic-table :data="zgtjTcList" style="text-align: center">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="qy" label="区县" show-overflow-tooltip>
          <template slot-scope="scope">
            <div
              @click="switchTo('qx', scope.row.qy.replace('全市', '重庆市'))"
            >
              {{ scope.row.qy }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rdq15"
          label="15日到期隐患数（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'zgsxStr',
                  ['15日到期整改'],
                  ['qx'],
                  [scope.row.qy.replace('全市', '重庆市')]
                )
              "
            >
              {{ scope.row.rdq15 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rdq30"
          label="30日到期隐患数（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'zgsxStr',
                  ['30日到期整改'],
                  ['qx'],
                  [scope.row.qy.replace('全市', '重庆市')]
                )
              "
            >
              {{ scope.row.rdq30 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="rdq60"
          label="60日到期隐患数（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'zgsxStr',
                  ['60日到期整改'],
                  ['qx'],
                  [scope.row.qy.replace('全市', '重庆市')]
                )
              "
            >
              {{ scope.row.rdq60 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nzgsl2023"
          label="限期2023年底整改数量（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'zgsxStr',
                  ['限期2023年底整改'],
                  ['qx'],
                  [scope.row.qy.replace('全市', '重庆市')]
                )
              "
            >
              {{ scope.row.nzgsl2023 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nzgsl2024"
          label="限期2024年底整改数量（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'zgsxStr',
                  ['限期2024年底整改'],
                  ['qx'],
                  [scope.row.qy.replace('全市', '重庆市')]
                )
              "
            >
              {{ scope.row.nzgsl2024 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nzgsl2025"
          label="限期2025年底整改数量（个）"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div
              @click="
                switchTo(
                  'zgsxStr',
                  ['限期2025年底整改'],
                  ['qx'],
                  [scope.row.qy.replace('全市', '重庆市')]
                )
              "
            >
              {{ scope.row.nzgsl2025 }}
            </div>
          </template>
        </el-table-column>
      </basic-table>
    </div>
    <br />
    <!-- 风险等级 -->
    <basic-pagination
    v-show="showFlag === 1"
      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"
    />
    <!-- 消防设施隐患 -->
    <basic-pagination
    v-show="showFlag === 2"
      layout="total,->,prev, pager, next, sizes,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params1.pageSize"
      :current-page="params1.PageNum"
      :total="total1"
      @size-change="handleSizeChange1"
      @current-change="handleCurrentChange1"
    />
    <!--生命通道 -->
    <basic-pagination
    v-show="showFlag === 3"
      layout="total,->,prev, pager, next, sizes,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params2.pageSize"
      :current-page="params2.PageNum"
      :total="total2"
      @size-change="handleSizeChange2"
      @current-change="handleCurrentChange2"
    />
    <!--用电用气 -->
    <basic-pagination
    v-show="showFlag === 4"
      layout="total,->,prev, pager, next, sizes,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params3.pageSize"
      :current-page="params3.PageNum"
      :total="total3"
      @size-change="handleSizeChange3"
      @current-change="handleCurrentChange3"
    />
    <!--消防管理隐患 -->
    <basic-pagination
      v-show="showFlag === 5"
      layout="total,->,prev, pager, next, sizes,jumper"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="params4.pageSize"
      :current-page="params4.PageNum"
      :total="total4"
      @size-change="handleSizeChange4"
      @current-change="handleCurrentChange4"
    />
  </div>
</template>

<style scoped lang="less">
.maintenance-supervision {
  display: flex;
  align-items: center;
  cursor: pointer;
  // 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-around;
    // 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;
    }
     &:hover {
        overflow: auto;
      }
  }

  /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;
    margin-left: 20px;
  }

  /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;
}

.tab {
  display: flex;
}

.active {
  background: #0463a7 !important;
}

.tab-item {
  display: inline-block;
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-right: 15px;
  margin-bottom: 15px;
}
</style>
