| | |
| | | <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; |
| | |
| | | show: true |
| | | }, |
| | | color: ['#1890FF','#FACC14'], |
| | | data: [ |
| | | { value: 1048, name: '未整改' }, |
| | | { value: 735, name: '已整改' } |
| | | ], |
| | | data: data, |
| | | emphasis: { |
| | | itemStyle: { |
| | | shadowBlur: 10, |
| | |
| | | |
| | | 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; |
| | |
| | | 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: { |
| | |
| | | } |
| | | }, |
| | | yAxis: { |
| | | data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'], |
| | | data: data.map(i=>i.companyName), |
| | | axisLine: { |
| | | show: false |
| | | }, |
| | |
| | | name: '2011', |
| | | type: 'bar', |
| | | barWidth: '15', |
| | | data: [203, 489, 134, 970, 744, 230] |
| | | data: data.map(i=>i.count) |
| | | } |
| | | ] |
| | | }; |
| | |
| | | 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; |
| | |
| | | width: 100%; |
| | | flex: 2; |
| | | } |
| | | </style> |
| | | </style> |