独墅湖高教创新区危化品智慧管控平台(新危化品)
马宇豪
2025-04-22 91f2640c8919e7cbe41c8c437e4f7fd60345e062
src/views/hazardousChemicals/bigScreen/components/leftBottom.vue
@@ -1,19 +1,57 @@
<template>
  <div class="charts-container">
    <div id="dangerPie"></div>
    <el-radio-group v-model="data.state" size="small" class="state-button" @change="getTopList">
      <el-radio-button :label="1">已处理</el-radio-button>
      <el-radio-button :label="0">未处理</el-radio-button>
    </el-radio-group>
    <div id="dangerBar"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
import {onMounted, reactive} from "vue";
import {getAvoidInfoPage} from "@/api/hazardousChemicals/avoid";
import {ElMessage} from "element-plus";
import {getTaBooWarning} from "@/api/monitor/screenCharts";
onMounted(()=>{
  initDangerPie()
  initDangerBar()
  getListPage()
  getTopList()
})
const initDangerPie =()=>{
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 9999,
    warningType: '',
    companyId: null
  },
  state: 1
})
const getListPage = async () => {
  const res = await getAvoidInfoPage(data.queryParams)
  if(res.code == 200){
    let data = []
    if(res.data && Array.isArray(res.data.list) && res.data.list.length>0){
      data[0] = {
        name: '未处理',
        value: res.data.list.filter(i=>i.state == 0).length
      }
      data[1] = {
        name: '已处理',
        value: res.data.list.filter(i=>i.state == 1).length
      }
      initDangerPie(data)
    }else{
      initDangerPie([])
    }
  }else{
    ElMessage.warning(res.message)
  }
}
const initDangerPie =(data)=>{
  var chartDom = document.getElementById('dangerPie');
  var myChart = echarts.init(chartDom);
  var option;
@@ -42,10 +80,7 @@
          show: true
        },
        color: ['#1890FF','#FACC14'],
        data: [
          { value: 1048, name: '未整改' },
          { value: 735, name: '已整改' }
        ],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
@@ -59,7 +94,19 @@
  option && myChart.setOption(option);
}
const initDangerBar =()=>{
const getTopList=async ()=>{
  const res = await getTaBooWarning(data.state)
  if (res.code == 200) {
      if(res.data && Array.isArray(res.data) && res.data.length>0){
        initDangerBar(res.data.reverse())
      }
  } else {
    ElMessage.warning(res.message)
  }
}
const initDangerBar =(data)=>{
  var chartDom = document.getElementById('dangerBar');
  var myChart = echarts.init(chartDom);
  var option;
@@ -83,16 +130,6 @@
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      },
      {
        text: '已整改/未整改',
        right: '0',
        top: '0%',
        textStyle: {
          fontSize: 12,
          color: 'rgba(255,255,255,.6)',
          fontWeight: 'normal'
        }
      }
    ],
    xAxis: {
@@ -108,7 +145,7 @@
      }
    },
    yAxis: {
      data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
      data: data.map(i=>i.companyName),
      axisLine: {
        show: false
      },
@@ -124,7 +161,7 @@
        name: '2011',
        type: 'bar',
        barWidth: '15',
        data: [203, 489, 134, 970, 744, 230]
        data: data.map(i=>i.count)
      }
    ]
  };
@@ -146,6 +183,25 @@
  display: flex;
  flex-direction: column;
}
:deep(.el-radio-group.state-button){
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: right;
  margin-bottom: -20px;
  position: relative;
  z-index: 9999;
}
:deep(.el-radio-button--small .el-radio-button__inner){
  height: 20px;
  line-height: 10px;
  background: rgba(0,0,0,0);
  border: 1px solid #11FEEE;
}
:deep(.el-radio-button__original-radio:checked+.el-radio-button__inner){
  color: #02CDE6
}
  #dangerPie{
    width: 100%;
    flex: 1;
@@ -155,4 +211,4 @@
    width: 100%;
    flex: 2;
  }
</style>
</style>