|
|
@@ -88,11 +88,21 @@
|
|
|
<div ref="statusChartRef" class="h-[320px]"></div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
+<!-- <el-col :span="7">-->
|
|
|
+<!-- <el-card class="chart-card" shadow="never">-->
|
|
|
+<!-- <template #header>-->
|
|
|
+<!-- <div class="flex items-center">-->
|
|
|
+<!-- <span class="text-base font-medium" style="color: #b6c8da">项目部设备数量统计</span>-->
|
|
|
+<!-- </div>-->
|
|
|
+<!-- </template>-->
|
|
|
+<!-- <div ref="topContainer" class="h-[320px]"></div>-->
|
|
|
+<!-- </el-card>-->
|
|
|
+<!-- </el-col>-->
|
|
|
<el-col :span="7">
|
|
|
<el-card class="chart-card" shadow="never">
|
|
|
<template #header>
|
|
|
<div class="flex items-center">
|
|
|
- <span class="text-base font-medium" style="color: #b6c8da">项目部设备数量统计</span>
|
|
|
+ <span class="text-base font-medium" style="color: #b6c8da">设备类别TOP5数量</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div ref="topContainer" class="h-[320px]"></div>
|
|
|
@@ -327,10 +337,10 @@ const getStats = () => {
|
|
|
status.value = res
|
|
|
// initCharts()
|
|
|
})
|
|
|
- // IotStatApi.getMaintenanceTodayStatus().then((res) => {
|
|
|
- // todayStatus.value = res
|
|
|
- // initTopChart()
|
|
|
- // })
|
|
|
+ IotStatApi.getMaintenanceTodayStatus().then((res) => {
|
|
|
+ todayStatus.value = res
|
|
|
+ initTopChart()
|
|
|
+ })
|
|
|
|
|
|
IotStatApi.getDeviceStatusCount('ry').then((res) => {
|
|
|
typeData.value = res
|
|
|
@@ -366,10 +376,10 @@ const getStats = () => {
|
|
|
IotStatApi.getDeptStatistics(fillQueryParams).then((res) => {
|
|
|
fill.value = res.totalList[0] || []
|
|
|
})
|
|
|
- IotStatApi.getProject('ry').then((res) => {
|
|
|
- typeData.value = res;
|
|
|
- initProjectCharts()
|
|
|
- })
|
|
|
+ // IotStatApi.getProject('ry').then((res) => {
|
|
|
+ // typeData.value = res;
|
|
|
+ // initProjectCharts()
|
|
|
+ // })
|
|
|
}
|
|
|
|
|
|
const initDrillingWorkloadChart = () => {
|
|
|
@@ -554,6 +564,130 @@ 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
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+watch(
|
|
|
+ backendData,
|
|
|
+ () => {
|
|
|
+ updateTopChart()
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+)
|
|
|
+
|
|
|
+// 初始化图表配置
|
|
|
+const getTopOption = () => {
|
|
|
+ // backendData.value = data
|
|
|
+ const data = backendData.value.sort((a, b) => a.value - b.value)
|
|
|
+ return {
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data.map((item) => item.category),
|
|
|
+ axisTick: { show: false },
|
|
|
+ axisLabel: { color: '#B6C8DA' },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#B6C8DA' // X轴线白色半透明
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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]
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ formatter: '{@value}',
|
|
|
+ color: '#B6C8DA',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化图表
|
|
|
+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())
|
|
|
+}
|
|
|
+
|
|
|
const initProjectCharts = () => {
|
|
|
const chart = echarts.init(topContainer.value);
|
|
|
chart.setOption({
|
