86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<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>
|