<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-20 09:31:30
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-04-08 10:00:21
 * @FilePath: /test-ranqi/src/views/Ind/components/Left.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="right">
    <img class="imgr" :src="d" alt="" />
    <div class="t1">
      <Title text="工业用户统计" />
      <div class="chars-box">
        <UserTypeBarChartGy />
      </div>
      <!-- <div class="t1box">
        <div class="b1">
          <img class="img1" src="@/assets/bigwindowImg/indImg/rimga.png" alt="" />
          <div>事件概况</div>
          <img class="shu" src="@/assets/bigwindowImg/indImg/shu.png" alt="" />
        </div>
        <div class="b2">
          <div class="b2t1">{{ eventInfo.title }}</div>
          <div class="b2t2">
            <div class="dz">地址：</div>
            <div>{{ eventInfo.address }}</div>
          </div>
        </div>
        <div class="b3" @click="toEvent">
          <img class="img1" src="@/assets/bigwindowImg/indImg/rimgb.png" alt="" />
          <div>点击定位</div>
        </div>
      </div> -->
    </div>

    <div class="t2">
      <Title text="居民用户统计" />
      <div class="chars-box">
        <UserTypeBarChartVue />
      </div>
    </div>

    <div class="t3">
      <Title text="设备生命周期" />
      <div class="tab-box">
        <Table />
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/views/bigWindow/PubCom/title.vue";

import d from "@/assets/bigwindowImg/index/rt.png";
import UserTypeBarChartVue from "./UserTypeBarChart.vue";
import UserTypeBarChartGy from "./UserTypeBarChartGy.vue";
import Table from "@/views/bigWindow/Ind/components/DeviceScrollTable.vue";
import { listResponse } from "@/api/emergency/response";

export default {
  name: "",
  components: {
    Title,
    UserTypeBarChartVue,
    UserTypeBarChartGy,
    Table,
  },
  data() {
    return {
      d,
      queryParams: {
        pageNum: 1,
        pageSize: 1,
        responseStatus: 0,
      },
      eventInfo: {
        title: "暂无事件",
        address: "无",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listResponse(this.queryParams).then((res) => {
        if (res.code == 200 && res.rows) {
          //this.eventList = res.rows;
          this.eventInfo = res.rows[0];
        }
      });
    },
    toEvent() {
      this.$router.push("/urgent/emergency");
    },
  },
};
</script>
<style lang="scss" scoped>
.right {
  // width: 20%;
  width: 434px;

  position: absolute;
  top: 102px;
  bottom: 50px;
  // background: url("~@/assets/bigwindowImg/index/r.png") no-repeat center;
  // background-size: 100% 100%;
  // background: red;
  // border: 1px solid red;
  right: 10px;
  z-index: 9999;

  .imgr {
    position: absolute;
    right: 0;
    top: -88px;
  }
}
.t1box {
  width: 100%;
  // height: 120px;
  background: url("~@/assets/bigwindowImg/indImg/t1boxbg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  box-sizing: border-box;
  padding: 20px 0;
  margin-top: 20px;
  margin-bottom: 40px;
  .b1 {
    // display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding-top: 10px;
    position: relative;
    width: 95px;

    .img1 {
      margin-bottom: 2px;
    }
    .shu {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .b2 {
    width: 240px;
    color: #fff;
    padding-left: 15px;
    .b2t1 {
      color: #ff6464;
      font-size: 20px;
      margin-bottom: 4px;
    }
    .b2t2 {
      display: flex;
      font-size: 16px;
      .dz {
        width: 90px;
      }
    }
  }
  .b3 {
    // padding-left:5px;
    color: #fff;
    padding-top: 25px;
    text-align: center;
    cursor: pointer;
  }
}
.t2,
.t1 {
  margin-bottom: 20px;
  box-sizing: border-box;

  .chars-box {
    margin-top: 20px;
    box-sizing: border-box;
  }
}
.t3 {
  display: flex;
  flex-direction: column;
  height: 210px;


  .tab-box {
    margin-top: 20px;
    flex: 1;
    // background: red;
    overflow: hidden;
  }
}
</style>
