<template>
  <div class="comom-title">
  <div class="title">布控预警级别统计<span class="switchover" @click.stop="reversalPush">切换</span></div>
  </div>
  <div class="comom-cnt" style="border-right: 1px solid #ebebeb;width: 100%;" v-loading="loadingyj">
    <DbarEcharts echartsId="bar3DYkChart" :data="cnList"></DbarEcharts>
  </div>
</template>

<script setup>
import DbarEcharts from "@/views/home/echarts/3DbarEcharts.vue";
import { qcckGet } from "@/api/qcckApi.js";
import { onMounted,ref,defineEmits ,reactive} from "vue";
const emit = defineEmits(["changeModel"])
const loadingyj = ref(false)
let cnList = reactive({
  list: [
    { label:'一级',val:0,type:'01' },
    { label:'二级',val:0,type:'02' },
    { label:'三级',val:0,type:'03' },
    { label:'四级',val:0,type:'04' },
  ],
  topColor:'#1bd6c2',
  colors: ["#28EEBF","#0DBAC5"],
}) 
onMounted(() => {
  getYjczDate()
});

const getYjczDate = () => {
  loadingyj.value = true;
  qcckGet({}, '/mosty-gsxt/tbYjxx/bdbkYjxxTj').then(res => {
    loadingyj.value = false;
    let list = res || []
    cnList.list.forEach(item => {
      let obj = list.find(v => v.yj_jb == item.type)
      item.val = obj?.count || 0
    })
  })
};

const reversalPush = () => {
  emit('changeModel')
}



</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
::v-deeep .comom-title{
  background: url("~@/assets/images/bg18.png") no-repeat center center;
  background-size: 100% 100%;
}
::v-deeep .comom-cnt{
  background: url("~@/assets/images/bg18.png") no-repeat center center;
  background-size: 100% 100%;
}

::v-deep .el-table td.el-table__cell{
  color: #ffffff;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
  background: rgba(0,61,130,0.75);
}
.switchover{
  cursor: pointer;
  font-size: 14px;
  margin-left: 20px;
  color: rgb(255, 146, 4);
}
</style>
<style lang="scss">
.zdy_bkcz_table td.el-table__cell {
    color: #ffffff !important;
}
.zdy_bkcz_table th.el-table__cell {
    color: #ffffff !important;
    font-size: 15px;
}

</style>
