<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-20 09:31:30
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-01-07 10:56:45
 * @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="t1box">
        <div class="b1">
          <img class="img1" src="@/assets/indImg/rimga.png" alt="" />
          <div>事件概况</div>
          <img class="shu" src="@/assets/indImg/shu.png" alt="" />
        </div>
        <div class="b2">
          <div class="b2t1">发生泄露报警</div>
          <div class="b2t2">
            <div class="dz">地址：</div>
            <div>河北省石家庄市平山西柏坡经济开发区经开路1号</div>
          </div>
        </div>
        <div class="b3">
          <img class="img1" src="@/assets/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/PubCom/title.vue";

import d from "@/assets/index/rt.png";
import UserTypeBarChartVue from "./UserTypeBarChart.vue";
import Table from "@/views/Ind/components/DeviceScrollTable.vue"


export default {
  name: "",
  components: {
    Title,
    UserTypeBarChartVue,
    Table

  },
  data() {
    return {
      d,
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.right {
  // width: 20%;
  width: 434px;

  position: absolute;
  top: 102px;
  bottom: 50px;
  // background: url("~@/assets/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/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;
  }
}
.t2 {
  margin-bottom: 20px;
  .chars-box {
    margin-top: 20px;
  }
}
.t3 {
  display: flex;
  flex-direction:column;
  height: 210px;

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

}
</style>
