zhgkpt-datav/app/src/views/Home/components/BasicInfoModalContent.vue

<script>
import { getJdjcUnit, getGcjztjUnit } from "@/api/index.js";
import { area } from "@/api/area";
import punishmentMixin from "@/mixin/unit.js";
export default {
  name: "BasicInfoModalContent",
  mixins: [punishmentMixin],
  data() {
    return {
      options: [],
      fxdjList: [],
      tableData: [],
      unitList: [],
      value: "全市",
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      search: "",
      // Unittype: "", // 建筑分类
      // year: "", // 年代
      // hnum: "", //高度
      // management: "", //管理形式
      // subject: "", //管理主体
      // maintenance: "", //维保形式
      // risklevel: "", //风险等级
    };
  },
  props: {
    qy: String,
    typeName:String,
    fxdjs:String
  },
  watch: {
    qy: {
      handler(val) {
        this.value = val;
        this.funUnitList();
        this.handUnitList();
      },
      immediate: true,
      deep: true,
    },
    typeName: {
      handler(val) {
        this.params.dl = val;
        this.funUnitList();
      },
      immediate: true,
      deep: true,
    },
    fxdjs: {
      handler(val) {
        this.params.fxdj = val;
        this.funUnitList();
      },
      immediate: true,
      deep: true,
    },
    value: {
      handler() {
        this.handUnitList();
      },
    },
  },
  methods: {
    rowClickHandler(val) {
      // this.$router.push(`/detail?id=${val.id}`);
      window.location.href = `/detail?id=${val.id}`;
    },
    secrhList(title){
      if(title=='高层建筑总数（栋）'){
        this.funUnitList()
      }
      if(title=='超高层建筑总数（栋）'){
        this.params.gd='100米以上'
        this.funUnitList()
      }
      if(title=='2000年底前老旧住宅建筑总数（栋）'){
        this.params.jcnd='2000年前'
        this.params.dl='居民建筑'
        this.funUnitList()
      }
      if(title=='2000年底前老旧商业混合体建筑总数（栋）'){
        this.params.jcnd='2000年前'
        this.params.dl='公共建筑'
        this.funUnitList()
      }
      if(title=='公共建筑总数（栋）'){
        this.params.dl='公共建筑'
        this.funUnitList()
      }
      if(title=='工业建筑总数（栋）'){
        this.params.dl='公业建筑'
        this.funUnitList()
      }
    },
    funUnitList() {
      getJdjcUnit({
        ...this.params,
        qx: this.value === "重庆市" ? "" : this.value,
        gcjzmc: this.search,
      }).then((res) => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      this.funUnitList();
    },
    handleCurrentChange(val) {
      this.params.pageNum = val;
      this.funUnitList();
    },
    handUnitList() {
      getGcjztjUnit({
        ...this.params,
        qy: this.value === "重庆市" ? "" : this.value,
      }).then((res) => {
        const list = res.data.rows[0];
        this.unitList = [
          {
            title: "高层建筑总数（栋）",
            unitNum: list.ggjz + list.gyjz + list.zzjz,
          },
          {
            title: "超高层建筑总数（栋）",
            unitNum: list.cggjz,
          },
          {
            title: "2000年底前老旧住宅建筑总数（栋）",
            unitNum: list.ljzzgc,
          },
          {
            title: "2000年底前老旧商业混合体建筑总数（栋）",
            unitNum: list.ljgcszhht,
          },
          {
            title: "公共建筑总数（栋）",
            unitNum: list.ggjz,
          },
          {
            title: "工业建筑总数（栋）",
            unitNum: list.gyjz,
          },
        ];
      });
    },
    resetForm() {
      this.value = "";
      this.search = "";
      (this.params = {
        pageSize: 10,
        pageNum: 1,
      }),
        this.funUnitList();
    },
  },
  created() {
    this.funUnitList();
    this.handUnitList();
    area({
      pageNum: 1,
      pageSize: 100,
    }).then((res) => {
      this.options = res.data.rows;
    });
  },
};
</script>

<template>
  <div>
    <!-- 建筑数 -->
    <div class="unit-bulid">
      <div class="unit-num" v-for="(item, index) in unitList" :key="index" @click="secrhList(item.title)" style="cursor: pointer;">
        <span style="display: inline-block; margin: 10px 5px 15px 5px; height: 40px;">{{ item.title }}</span>
        <!-- <span class="build-num">{{ item.unitNum }}</span> -->
        <LinearText
          style="display: inline-block"
          :text="item.unitNum"
          fontSize="40px"
        ></LinearText>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="maintenance-supervision">
      <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 class="inp">
          <el-input v-model="search" placeholder="请输入建筑名称"></el-input>
        </div>
        <!-- 建筑分类 -->
        <div>
          <el-select v-model="params.dl" placeholder="建筑分类">
            <el-option
              :value="item.value"
              :label="item.label"
              v-for="(item, index) in TypeList"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 年代 -->
        <div>
          <el-select v-model="params.jcnd" placeholder="年代">
            <el-option
              :value="item.value"
              :label="item.lable"
              v-for="(item, index) in yearList"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 高度 -->
        <div>
          <el-select v-model="params.gd" placeholder="高度">
            <el-option
              :value="item.value"
              :label="item.lable"
              v-for="(item, index) in higthList"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 管理形式 -->
        <div>
          <el-select v-model="params.xfaqglxs" placeholder="管理形式">
            <el-option
              :value="item.value"
              :label="item.lable"
              v-for="(item, index) in mentList"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 管理主体 -->
        <!-- <div>
          <el-select v-model="params.glzthztjzd" placeholder="管理主体">
            <el-option
              :value="item.value"
              :label="item.lable"
              v-for="(item, index) in glList"
              :key="index"
            >
            </el-option>
          </el-select>
        </div> -->
        <!-- 维保形式 -->
        <div>
          <el-select v-model="params.sfywbdw" placeholder="维保形式">
            <el-option
              :value="item.value"
              :label="item.lable"
              v-for="(item, index) in wbList"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 风险等级 -->
        <div>
          <el-select v-model="params.fxdj" placeholder="风险等级">
            <el-option
              :value="item.value"
              :label="item.lable"
              v-for="(item, index) in fxdjLlst"
              :key="index"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="btn-item">
        <el-button @click="funUnitList">搜索</el-button>
        <el-button @click="resetForm">重置</el-button>
      </div>
    </div>

    <basic-table
      :data="tableData"
      @row-click="rowClickHandler"
      style="text-align: center"
    >
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="qx" label="区域" width="180" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="gcjzmc" label="建筑名称" show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="xxdz"
        label="地址"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <!-- 新增 -->
      <el-table-column
        prop="jzdx"
        label="建筑定性"
        width="140"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column prop="dl" label="建筑分类" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="jznsygn" label="使用功能" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="gd" label="高度（米）"> </el-table-column>
      <el-table-column prop="jzmj" label="建筑面积" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="jcnd" label="建筑年代"> </el-table-column>
      <el-table-column prop="gd" label="隐患数"> </el-table-column>
      <el-table-column prop="fxdj" label="风险等级" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="wlw" label="物联网"> </el-table-column>
    </basic-table>
    <!-- 分页 -->
    <br />
      <basic-pagination
        layout="total,->,prev, pager, next, sizes,jumper"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="params.pageSize"
        :current-page="params.PageNum"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  </div>
</template>

<style scoped lang="less">
.maintenance-supervision {
  // padding: 10px 10px 0px 20px;
  ::v-deep(.el-input__inner) {
    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;
    }
  }
  /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;
}
.custom-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
}
</style>