sgxt_web/src/views/home/model/bkcz.vue

<template>
  <div class="comom-title">
    <div class="title">预警处置统计</div>
  </div>
  <div class="comom-cnt" style="border-right: 1px solid #ebebeb;width: 100%;" v-loading="list.YjczDate.loading">
    <BarHatEcharts  echartsId="qylxEcharts" :data="list.YjczDate" :chartLeft="{categoryAxis: '10%'}" autoTooltip="true"></BarHatEcharts>
  </div>
</template>

<script setup>
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import BarHatEcharts from "@/views/home/echarts/barHatEcharts.vue";
import { onMounted, reactive } from "vue";
const list = reactive({
  YjczDate: {
    loading: false,
    xDate: [],
    list: [],
  },
});
const getYjczDate = () => {
  list.YjczDate.loading = true;
  qcckGet({}, '/mosty-gsxt/tbYjxx/getYjCzztTj').then(res => {
    list.YjczDate.loading = false;
    list.YjczDate.xDate = res.map(item => item.zdmc);
    list.YjczDate.list = [
      {
        name: '总数',
        value: res.map(item => item.count),
        color: ['rgba(0,244,255,1)', 'rgba(0,77,167,1)'],
        hatColor: '#087df9'
      }]
  })
};
onMounted(() => {
  getYjczDate()
});

// const tabHeightFn = () => {
//   pageData.tableHeight =  document.getElementById('qcbk').offsetHeight - 12;
//   window.onresize = function () {
//     tabHeightFn();
//   };
// };

</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);
}
</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>