sgxt_web/src/views/backOfficeSystem/IntelligentControl/warningControl/components/yjComponents.vue

<template>
  <div class="systemBox">
    <!-- 左边列表 -->
    <div class="leftList">
      <div class="hed flex just-between align center">
        <span class="f14">预警列表</span>
        <span style="color: #00b7ff" class="pointer" @click="seeMoreFn">查看更多》</span>
      </div>
      <div class="ml10 mr10 mt10">
        <el-input v-model="searchForm.keyword" placeholder="姓名、证件号码搜索">
          <template #append><el-icon>
              <Search />
            </el-icon></template>
        </el-input>
      </div>
      <ul class="listContent noScollLine mt10">
        <li v-for="(item, index) in personList" :key="index">
          <YjItem :item="item" type="yj"></YjItem>
        </li>
      </ul>
    </div>
    <!-- 右边模块 -->
    <div class="rightList">
      <!-- 第一部门 -->
      <div class="model-commom">
        <div class="hed flex align-center">区域统计</div>
        <div class="comm-cnt">
          <BarHatEcharts echartsId="qylxEcharts" :data="list.QylxDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">人员类型统计</div>
        <div class="comm-cnt">
          <BarHatEcharts echartsId="rylxEcharts" :data="list.RylxDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第三部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">感知源统计</div>
        <div class="comm-cnt">
          <BarHatEcharts echartsId="gzyEcharts" :data="list.GzyDate"></BarHatEcharts>
        </div>
      </div>
      <!-- 第四部分 -->
      <div class="model-commom mt10">
        <div class="hed flex align-center">预警等级统计</div>
        <div class="comm-cnt">
          <WarningCount></WarningCount>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import YjItem from "./yjItem.vue";
import WarningCount from "./WarningCount.vue";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter()
const searchForm = ref({
  keyword: ""
});
const list = reactive({
  GzyDate: {
    xDate: ['巴宜区', '工布江达县', '波密县', '朗县', '墨脱县', '察隅县', '米林县'],
    list: [
      { name: "总数", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
      { name: "已处置", value: [10, 20, 30, 40, 50, 60, 70], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
    ],
  },
  RylxDate: {
    xDate: ['类型1', '类型2', '类型3', '类型4', '类型5', '类型6'],
    list: [
      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
    ],
  },
  QylxDate: {
    xDate: ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6'],
    list: [
      { name: "总数", value: [10, 20, 30, 40, 50, 60], color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'], hatColor: '#087df9' },
      { name: "已处置", value: [10, 20, 30, 40, 50, 60], color: ['rgba(24, 232, 229, 1)', 'rgba(3, 110, 83, 1)'], hatColor: '#00FFFF' },
    ],
  },
})
const personList = ref([
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "10",
    yjbq: "吸贩毒",
    age: 20,
    yy: "2023-01-01 12:00:00"
  },
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "40",
    age: 20,
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  },
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    age: 20,
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "20",
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  },
  {
    name: "张三",
    idCard: "330102199001011234",
    gender: "男",
    age: 20,
    sspcs: "xxx上城区派出所",
    address: "xxxx上城区",
    yjjb: "30",
    yjbq: "吸贩毒",
    yy: "2023-01-01 12:00:00"
  }
]);
const seeMoreFn = () => {
  router.push('/ControlApproval')
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

.systemBox {
  position: relative;
  left: -20px;
  top: 0;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  background: #e9edf6;

  .leftList {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 427px;
    height: calc(100% - 20px);
    border-radius: 6px 6px 6px 6px;
    background: rgba(0, 29, 75, 0.4);
    z-index: 9;

    .listContent {
      height: calc(100% - 96px);
      overflow: hidden;
      overflow-y: auto;
      padding: 10px 10px 0;
      box-sizing: border-box;
    }

    ::v-deep .el-input__inner {
      background: rgba(0, 22, 83, 0.4);
      border: 1px solid #0072ff;
    }

    ::v-deep .el-input-group__append {
      background: #0386fb;
      color: #fff;
      border: 1px solid #0072ff;
    }
  }

  .rightList {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 427px;
    height: calc(100% - 20px);
    z-index: 9;

    .model-commom {
      height: calc((100% / 4) - 10px);
    }

    .comm-cnt {
      height: calc(100% - 40px);
      background: rgba(0, 29, 75, 0.6);
    }
  }

  .hed {
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    background: linear-gradient(90deg,
        #124cb3 0%,
        rgba(18, 76, 179, 0.23) 77%,
        rgba(18, 76, 179, 0) 100%);
  }
}
</style>