daofu-large-screen/src/views/data-statistics/right-side/components/early-warning.vue

<!-- 预警分析 -->
<template>
  <div class="side-bg">
    <div>
      <TitleC title="预警分析" :swshow="false">
        <el-radio-group
          v-model="recordRadio"
          size="large"
          text-color="#00FFFF"
          @change="recordChange"
        >
          <el-radio-button label="1">重点人员</el-radio-button>
          <el-radio-button label="2">重点场所</el-radio-button>
        </el-radio-group></TitleC
      >
    </div>
    <div class="rP_body">
      <div></div>
      <div v-if="recordRadio == '1'">
        <el-table
          :data="personnelTableData"
          max-height="32vh"
          style="width: 100%"
          show-overflow-tooltip
        >
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            width="100"
          />
          <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="70"
          />
          <el-table-column prop="typesOf" label="类型" align="center" />
          <el-table-column prop="address" label="地址" align="center" />
        </el-table>
        <el-pagination
          background
          small
          v-model:currentPage="personnelCurrentPage"
          v-model:page-size="personnelageSize"
          layout="total, prev, pager, next"
          :total="personnelTotal"
        />
      </div>
      <div v-if="recordRadio == '2'">
        <el-table
          :data="placeTableData"
          max-height="32vh"
          style="width: 100%"
          show-overflow-tooltip
        >
          <el-table-column
            prop="place"
            label="场所"
            align="center"
            width="100"
          />
          <el-table-column prop="classification" label="分类" align="center" />
          <el-table-column prop="address" label="地址" align="center" />
        </el-table>
        <el-pagination
          background
          small
          v-model:currentPage="placeCurrentPage"
          v-model:page-size="placePageSize"
          layout="total, prev, pager, next"
          :total="placeTotal"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watchEffect } from "vue";
export default defineComponent({
  name: "risk-pool",
});
</script>
<script setup lang='ts'>
const recordRadio = ref("1");
//重点人员
const personnelCurrentPage = ref(1);
const personnelageSize = ref(5);
const personnelTotal = ref(10);

const personnelTableData = [
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "防火“六类人员”",
  },
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "防汛隐患点住户",
  },
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "治安类矛盾纠纷重点关注人员",
  },
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "防火“六类人员”",
  },
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "防火“六类人员”",
  },
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "防火“六类人员”",
  },
  {
    name: "某某人",
    address: "某某某地址",
    gender: "男",
    typesOf: "防火“六类人员”",
  },
];
//重点场所
const placeCurrentPage = ref(1);
const placePageSize = ref(5);
const placeTotal = ref(10);
const placeTableData = [
  {
    place: "某某场所",
    classification: "辖区内居民",
    address: "99999999999",
  },
  {
    place: "某某场所",
    classification: "外来户",
    address: "11111111111",
  },
  {
    place: "某某场所",
    classification: "火灾隐患点",
    address: "11111111111",
  },
  {
    place: "某某场所",
    classification: "防汛隐患点",
    address: "11111111111",
  },
  {
    place: "某某场所",
    classification: "火灾隐患点",
    address: "11111111111",
  },
  {
    place: "某某场所",
    classification: "火灾隐患点",
    address: "11111111111",
  },
  {
    place: "某某场所",
    classification: "火灾隐患点",
    address: "11111111111",
  },
];
//切换table
const recordChange = () => {};
</script>

<style lang="scss" scoped>
.side-bg {
  height: 39%;
}
.rP_body {
  > div:nth-child(1) {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  > div:nth-child(2) {
    margin-top: 20px;
  }
}

//单选框样式

::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
  background: #031838;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  background: #031838;
  border-radius: 10px 0 0 10px !important;
}

::v-deep .el-radio-button__inner {
  color: #ffffff;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  background: #031838;
  border-radius: 0 10px 10px 0 !important;
}

// ::v-deep.el-table--striped
//   .el-table__body
//   tr.el-table__row--striped
//   td.el-table__cell {
//   background: #031838 !important;
// }

// ::v-deep .el-table__row--striped {
//   border-radius: 20px !important;
// }

// ::v-deep .el-table {
//   --el-border-color-lighter: #00ffff00;
// }

// ::v-deep.el-table td:last-child {
//   border-radius: 0 30px 30px 0;
// }

// ::v-deep.el-table td:first-child {
//   border-radius: 30px 0 0 30px;
// }
</style>