|
|
@@ -92,7 +92,7 @@
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center">
|
|
|
- <span class="text-base font-medium" style="color: #b6c8da">设备类别TOP5数量</span>
|
|
|
+ <span class="text-base font-medium" style="color: #b6c8da">项目部设备数量统计</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div ref="topContainer" class="h-[320px]"></div>
|
|
|
@@ -366,6 +366,10 @@ const getStats = () => {
|
|
|
IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
|
|
|
fill.value = res.totalList[0] || []
|
|
|
})
|
|
|
+ IotStatApi.getProject('ry').then((res) => {
|
|
|
+ typeData.value = res;
|
|
|
+ initProjectCharts()
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
const initDrillingWorkloadChart = () => {
|
|
|
@@ -549,133 +553,55 @@ const topContainer = ref(null)
|
|
|
let topInstance = null
|
|
|
// 响应式容器尺寸
|
|
|
const { width, height } = useElementSize(topContainer)
|
|
|
-// 处理数据（排序+限制5条）
|
|
|
-const processedData = () => {
|
|
|
- const data = IotStatApi.getDeviceTypeCount()
|
|
|
- backendData.value = data
|
|
|
- return [...backendData.value].sort((a, b) => a.value - b.value)
|
|
|
-}
|
|
|
|
|
|
-const fetchTop = () => {
|
|
|
- IotStatApi.getDeviceTypeCount().then((res) => {
|
|
|
- backendData.value = res
|
|
|
- })
|
|
|
-}
|
|
|
-// 初始化图表配置
|
|
|
-const getTopOption = () => {
|
|
|
- // backendData.value = data
|
|
|
- const data = backendData.value.sort((a, b) => a.value - b.value)
|
|
|
- return {
|
|
|
+const initProjectCharts = () => {
|
|
|
+ const chart = echarts.init(topContainer.value);
|
|
|
+ chart.setOption({
|
|
|
tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- axisPointer: { type: 'shadow' },
|
|
|
- formatter: (params) => {
|
|
|
- const item = params[0]
|
|
|
- return `${item.name}<br/>${item.marker} ${item.value.toLocaleString()}`
|
|
|
- }
|
|
|
- },
|
|
|
- grid: {
|
|
|
- height: '200px',
|
|
|
- left: '6%',
|
|
|
- right: '6%',
|
|
|
- bottom: '18%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: 'value',
|
|
|
- axisLabel: {
|
|
|
- color: '#B6C8DA',
|
|
|
- formatter: (value) => {
|
|
|
- if (value >= 10000) return `${(value / 10000).toFixed(1)}万`
|
|
|
- return value.toLocaleString()
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#B6C8DA' // X轴线白色半透明
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: true, // 显示水平网格线（默认显示）
|
|
|
- lineStyle: {
|
|
|
- // 水平网格线颜色（可设置为纯色或带透明度的颜色）
|
|
|
- color: '#457794', // 浅灰色半透明
|
|
|
- // 可选：设置线条类型（实线/虚线/点线）
|
|
|
- type: 'dashed'
|
|
|
- }
|
|
|
- }
|
|
|
+ trigger: 'item'
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data.map((item) => item.category),
|
|
|
- axisTick: { show: false },
|
|
|
- axisLabel: { color: '#B6C8DA' },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- color: '#B6C8DA' // X轴线白色半透明
|
|
|
- }
|
|
|
+ legend: {
|
|
|
+ // top: '5%',
|
|
|
+ // right: '10%',
|
|
|
+ // align: 'center',
|
|
|
+ orient: 'horizontal', // 水平排列图例项
|
|
|
+ bottom: '0%', // 放置在底部
|
|
|
+ icon: 'circle',
|
|
|
+ textStyle: {
|
|
|
+ color:'#B6C8DA'
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
- type: 'bar',
|
|
|
- data: data.map((item) => item.value),
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
|
|
- { offset: 0, color: '#83bff6' },
|
|
|
- { offset: 0.7, color: '#188df0' },
|
|
|
- { offset: 1, color: '#188df0' }
|
|
|
- ]),
|
|
|
- borderRadius: [0, 8, 8, 0]
|
|
|
- },
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['0%', '70%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ center: ['50%', '45%'],
|
|
|
label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- formatter: '{@value}',
|
|
|
- color: '#B6C8DA',
|
|
|
- fontWeight: 'bold'
|
|
|
+ show: false,
|
|
|
+ position: 'outside',
|
|
|
+ color:'#B6C8DA'
|
|
|
},
|
|
|
emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ fontSize: 15,
|
|
|
+ fontWeight: 'bold'
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: typeData.value
|
|
|
}
|
|
|
- ]
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 初始化图表
|
|
|
-const initTopChart = async () => {
|
|
|
- await IotStatApi.getDeviceTypeCount('ry').then((res) => {
|
|
|
- backendData.value = res
|
|
|
- })
|
|
|
- if (!topContainer.value) return
|
|
|
- topInstance = echarts.init(topContainer.value)
|
|
|
- updateTopChart()
|
|
|
-}
|
|
|
-
|
|
|
-// 更新图表
|
|
|
-const updateTopChart = () => {
|
|
|
- if (!topInstance) return
|
|
|
- topInstance.setOption(getTopOption())
|
|
|
+ ]})
|
|
|
}
|
|
|
|
|
|
// 自适应调整
|
|
|
watch([width, height], () => {
|
|
|
topInstance?.resize()
|
|
|
})
|
|
|
-
|
|
|
-// 监听数据变化
|
|
|
-watch(
|
|
|
- backendData,
|
|
|
- () => {
|
|
|
- updateTopChart()
|
|
|
- },
|
|
|
- { deep: true }
|
|
|
-)
|
|
|
-
|
|
|
const activeDom = ref(null)
|
|
|
let activeInstance = null
|
|
|
|
|
|
@@ -1056,25 +982,22 @@ onBeforeUnmount(() => {
|
|
|
padding: 20px;
|
|
|
}
|
|
|
|
|
|
-// 统计卡片区域样式
|
|
|
.summary {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
-// 图表卡片样式优化，增强与背景的对比
|
|
|
::v-deep .chart-card {
|
|
|
- background-color: rgba(0, 0, 0, 0.3); // 半透明白色卡片
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 8px;
|
|
|
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); // 轻微阴影增强层次感
|
|
|
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
|
|
|
transition: all 0.3s ease;
|
|
|
border: none;
|
|
|
|
|
|
&:hover {
|
|
|
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); // 悬停时增强阴影
|
|
|
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 安全生产天数卡片样式
|
|
|
.safety-days-card {
|
|
|
.safety-days-content {
|
|
|
display: flex;
|
|
|
@@ -1113,15 +1036,13 @@ onBeforeUnmount(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-// 响应式调整
|
|
|
@media (max-width: 768px) {
|
|
|
.page-container {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
}
|
|
|
-// 去除卡片头部的下边框
|
|
|
::v-deep .el-card__header {
|
|
|
border-bottom: none !important;
|
|
|
- padding-bottom: 0; // 可选：调整底部内边距
|
|
|
+ padding-bottom: 0;
|
|
|
}
|
|
|
</style>
|
