From 91f2640c8919e7cbe41c8c437e4f7fd60345e062 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期二, 22 四月 2025 10:47:00 +0800
Subject: [PATCH] 修改大屏
---
src/views/hazardousChemicals/bigScreen/components/leftBottom.vue | 102 +++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 79 insertions(+), 23 deletions(-)
diff --git a/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue b/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue
index de6ee03..b7f6789 100644
--- a/src/views/hazardousChemicals/bigScreen/components/leftBottom.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.2