<template>
  <div class="comom-title">
    <span class="title">情报来源类型</span>
  </div> 
  <div class="comom-cnt">
    <BarHatEcharts echartsId="qbltBox" :data="list"></BarHatEcharts>
  </div>
</template>

<script setup>
import { qcckPost } from "@/api/qcckApi.js";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
import { onMounted, reactive } from "vue";
const list = reactive({
  xDate: ['110警情','人力情报','系统采集','民警处置单'],
  list:[
    { name: "总数", value: [0,0,0,0,] ,color:['rgba(0,244,255,1)','rgba(0,77,167,1)'] ,hatColor:'#087df9'},
    { name: "已处置", value: [0,0,0,0],color:['rgba(24, 232, 229, 1)','rgba(3, 110, 83, 1)'],hatColor:'#00FFFF'  },
  ],
})
onMounted(() => {
  getCount()
});

const getCount = () =>{
  qcckPost({},'/mosty-gsxt/qbcj/getXscjTjForLylx').then(res=>{
    list.xDate = res ? res.cz.map(v=> v.zdmc):[];
    list.list[0].value = res ? res.zs.map(v=>v.count):[];
    list.list[1].value = res ? res.cz.map(v=>v.count):[];
  })
}

</script>


<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";
.qbltBox {
  height: 100%;
  background: rgba(0,29,75,0.6);
  border-radius: 0 0 4px 4px;
}
</style>