|
|
@@ -1,51 +1,39 @@
|
|
|
<template>
|
|
|
<div class="dashboard-container">
|
|
|
+ <Spin class="w-full h-full" v-if="!isDataLoaded"></Spin>
|
|
|
<div class="content-area" v-if="isDataLoaded">
|
|
|
<!-- 顶部信息卡片 -->
|
|
|
<div class="top-info">
|
|
|
<!-- {{ mineStore.getRoot }} -->
|
|
|
<div class="info-card">
|
|
|
- <div class="card-title">
|
|
|
- <div class="info-details">
|
|
|
- <div class="label">{{ mineStore.getRoot?.departName }}</div>
|
|
|
- <!-- <div class="tag" :style="{ backgroundColor: getAlarmColor(mineStore.alarmLevel), color: '#fff' }">{{ getRiskText(mineStore.alarmLevel) }}</div> -->
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <a-button class="btn" @click="handleGoToPageQuery('/basicinfo/access-statistics')">接入详情</a-button>
|
|
|
- </div>
|
|
|
- <div class="info-border">
|
|
|
- <div class="info-border-icon"></div>
|
|
|
- <div class="info-border-line"></div>
|
|
|
- <div class="info-border-icon"></div>
|
|
|
- </div>
|
|
|
+ <div class="card-title">
|
|
|
+ <div class="info-details">
|
|
|
+ <div class="label">{{ mineStore.getRoot?.departName }}</div>
|
|
|
+ <!-- <div class="tag" :style="{ backgroundColor: getAlarmColor(mineStore.alarmLevel), color: '#fff' }">{{ getRiskText(mineStore.alarmLevel) }}</div> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-button class="btn" @click="handleGoToPageQuery('/basicinfo/access-statistics')">接入详情</a-button>
|
|
|
+ </div>
|
|
|
+ <div class="info-border">
|
|
|
+ <div class="info-border-icon"></div>
|
|
|
+ <div class="info-border-line"></div>
|
|
|
+ <div class="info-border-icon"></div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="card-details">
|
|
|
- <div v-for="value in accessStatics" :key="value.id" class="card-item">
|
|
|
- <div class="item-cont">
|
|
|
- 组织机构：{{ value.name }}
|
|
|
- </div>
|
|
|
- <div class="item-cont">
|
|
|
- 应接入：{{ value.yjNum }}
|
|
|
- </div>
|
|
|
- <div class="item-cont">
|
|
|
- 在线：{{ value.yjNum }}
|
|
|
- </div>
|
|
|
- <div class="item-cont">
|
|
|
- 中断：{{ value.yjNum }}
|
|
|
- </div>
|
|
|
- <div class="item-cont">
|
|
|
- 未接入：{{ value.yjNum }}
|
|
|
- </div>
|
|
|
- <div class="item-cont">
|
|
|
- 接入密闭数：{{ value.yjNum }}
|
|
|
- </div>
|
|
|
- <div class="bg-line">
|
|
|
- </div>
|
|
|
- <div class="bg-icon"></div>
|
|
|
- </div>
|
|
|
+ <div class="card-details">
|
|
|
+ <div v-for="value in accessStatics" :key="value.id" class="card-item">
|
|
|
+ <div class="item-cont"> 组织机构：{{ value.name }} </div>
|
|
|
+ <div class="item-cont"> 应接入：{{ value.yjNum }} </div>
|
|
|
+ <div class="item-cont"> 在线：{{ value.yjNum }} </div>
|
|
|
+ <div class="item-cont"> 中断：{{ value.yjNum }} </div>
|
|
|
+ <div class="item-cont"> 未接入：{{ value.yjNum }} </div>
|
|
|
+ <div class="item-cont"> 接入密闭数：{{ value.yjNum }} </div>
|
|
|
+ <div class="bg-line"> </div>
|
|
|
+ <div class="bg-icon"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 预警统计 -->
|
|
|
@@ -97,69 +85,55 @@
|
|
|
<div class="details-header">
|
|
|
<div class="title">预警数据详情</div>
|
|
|
<div class="btn-group">
|
|
|
- <button class="btn" @click="handleShowDetail({deptId:mineStore.getRootId})">展开详情</button>
|
|
|
+ <button class="btn" @click="handleShowDetail({ deptId: mineStore.getRootId })">展开详情</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="details-content">
|
|
|
- <div
|
|
|
- v-for="(item, index) in mineData?.records"
|
|
|
- :key="index"
|
|
|
- class="warning-item"
|
|
|
- >
|
|
|
+ <div v-for="(item, index) in mineData?.records" :key="index" class="warning-item">
|
|
|
<div class="item-header">
|
|
|
<div class="header-left">
|
|
|
<div class="icon"></div>
|
|
|
<div class="name">煤矿名称: {{ item.mineName }}</div>
|
|
|
- <div
|
|
|
- class="risk-level"
|
|
|
- :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }"
|
|
|
- >
|
|
|
+ <div class="risk-level" :style="{ backgroundColor: getAlarmColor(item.alarmLevel), color: '#fff' }">
|
|
|
{{ getRiskText(item.alarmLevel) }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <a-button
|
|
|
- class="expand-btn"
|
|
|
- @click="handleShowDetail(item)"
|
|
|
- >
|
|
|
+ <a-button class="expand-btn" @click="handleShowDetail(item)">
|
|
|
详情
|
|
|
<div class="arrow-icon-wrapper">
|
|
|
- <div class="arrow-icon" ></div>
|
|
|
+ <div class="arrow-icon"></div>
|
|
|
</div>
|
|
|
</a-button>
|
|
|
</div>
|
|
|
<div class="item-body">
|
|
|
<div class="data-row">
|
|
|
- <div
|
|
|
- v-for="(col, colIndex) in dataColumns"
|
|
|
- :key="colIndex"
|
|
|
+ <div
|
|
|
+ v-for="(col, colIndex) in dataColumns"
|
|
|
+ :key="colIndex"
|
|
|
class="data-col"
|
|
|
:class="{
|
|
|
- 'col-first-row': colIndex < 5,
|
|
|
+ 'col-first-row': colIndex < 5,
|
|
|
'col-second-row': colIndex >= 5,
|
|
|
- 'col-span-3': colIndex === 5
|
|
|
+ 'col-span-3': colIndex === 5,
|
|
|
}"
|
|
|
>
|
|
|
- <div class="col-icon">
|
|
|
- <div class="icon-item" :class="`alarm-icon-${(colIndex % 8) + 1}`"></div>
|
|
|
- </div>
|
|
|
- <div class="col-cont">
|
|
|
- <div class="col-title">{{ col.label }}</div>
|
|
|
- <div
|
|
|
- class="col-value"
|
|
|
- :style="{ color: getColValueColor(col, item) }"
|
|
|
- >
|
|
|
- <span
|
|
|
- v-if="col.showPoint"
|
|
|
- class="status-dot"
|
|
|
- :style="{
|
|
|
- backgroundColor: getColValueColor(col, item),
|
|
|
- boxShadow: `0 0 10px ${getColValueColor(col, item)}`
|
|
|
- }"
|
|
|
- ></span>
|
|
|
- {{ getColDisplayText(col, item) }}
|
|
|
+ <div class="col-icon">
|
|
|
+ <div class="icon-item" :class="`alarm-icon-${(colIndex % 8) + 1}`"></div>
|
|
|
+ </div>
|
|
|
+ <div class="col-cont">
|
|
|
+ <div class="col-title">{{ col.label }}</div>
|
|
|
+ <div class="col-value" :style="{ color: getColValueColor(col, item) }">
|
|
|
+ <span
|
|
|
+ v-if="col.showPoint"
|
|
|
+ class="status-dot"
|
|
|
+ :style="{
|
|
|
+ backgroundColor: getColValueColor(col, item),
|
|
|
+ boxShadow: `0 0 10px ${getColValueColor(col, item)}`,
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ {{ getColDisplayText(col, item) }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -181,34 +155,35 @@
|
|
|
<!-- 左侧饼图区域 -->
|
|
|
<div class="chart-item pie-chart">
|
|
|
<div class="chart-title">预测预报类型统计</div>
|
|
|
- <Pie :chart-data="alarmType"></Pie>
|
|
|
+ <div class="flex w-full h-full items-center">
|
|
|
+ <div class="flex-basis-300px flex-shrink-0">
|
|
|
+ <Pie :option="pieOption" :chart-data="alarmType" height="390px"></Pie>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-around items-center flex-wrap h-300px">
|
|
|
+ <div v-for="item in alarmType" :key="item.key" class="pie-legends">
|
|
|
+ <div class="pie-legends-title">{{ item.name }}</div>
|
|
|
+ <div class="pie-legends-value">{{ item.value }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 右侧柱状图区域 -->
|
|
|
<div class="chart-item bar-chart">
|
|
|
<div class="chart-title">重点矿井报警次数统计</div>
|
|
|
- <Bar :chart-data="historyAlarmNum"></Bar>
|
|
|
+ <Bar :chart-data="historyAlarmNum" :option="barOption" height="390px"></Bar>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 实时数据表格 -->
|
|
|
- <BasicModal
|
|
|
- v-model:open="isDetailModalVisible"
|
|
|
- title="实时数据详情"
|
|
|
- width="70%"
|
|
|
- centered
|
|
|
- :footer="null"
|
|
|
- @cancel="handleModalClose"
|
|
|
- >
|
|
|
+ <BasicModal v-model:open="isDetailModalVisible" title="实时数据详情" width="70%" centered :footer="null" @cancel="handleModalClose">
|
|
|
<BasicTable @register="registerRealtimeTable" />
|
|
|
-
|
|
|
</BasicModal>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
|
- import { useRouter, useRoute } from 'vue-router';
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
import { onMounted, ref } from 'vue';
|
|
|
import { getAlarmType, getGoafAccessCount, getHistoryAlarmNum, getMineData, getRealAlarmNum, getGoafData } from '../overhaul.api';
|
|
|
import { columns } from '../overhaul.data';
|
|
|
@@ -220,7 +195,12 @@
|
|
|
import { StatusColorEnum } from '/@/enums/jeecgEnum';
|
|
|
import { BasicTable } from '/@/components/Table';
|
|
|
import { BasicModal } from '/@/components/Modal';
|
|
|
- // 处理矿名选择器相关的逻辑
|
|
|
+ import { Spin } from 'ant-design-vue';
|
|
|
+ import { EChartsOption, graphic } from 'echarts';
|
|
|
+ import { computed } from 'vue';
|
|
|
+ import { get } from 'lodash-es';
|
|
|
+
|
|
|
+ // 处理矿名选择器相关的逻辑
|
|
|
const isDetailModalVisible = ref(false);
|
|
|
const currentDeptId = ref<string | number>('');
|
|
|
|
|
|
@@ -234,15 +214,15 @@
|
|
|
}
|
|
|
return getGoafData(params);
|
|
|
};
|
|
|
- // 注册实时数据表格
|
|
|
+ // 注册实时数据表格
|
|
|
const { tableContext: ctxRealtime, onExportXls: onExportXlsTime } = useListPage({
|
|
|
tableProps: {
|
|
|
api: getDynamicTableData,
|
|
|
columns,
|
|
|
showIndexColumn: false,
|
|
|
- scroll: { x: 'max-content', y: 500 },
|
|
|
- useSearchForm: false, // 隐藏搜索表单
|
|
|
- showActionButtonGroup: false,
|
|
|
+ scroll: { x: 'max-content', y: 500 },
|
|
|
+ useSearchForm: false, // 隐藏搜索表单
|
|
|
+ // showActionButtonGroup: false,
|
|
|
},
|
|
|
|
|
|
pagination: false,
|
|
|
@@ -261,7 +241,7 @@
|
|
|
currentDeptId.value = item.deptId;
|
|
|
// 显示弹框
|
|
|
isDetailModalVisible.value = true;
|
|
|
-
|
|
|
+
|
|
|
// 关键：手动触发表格刷新，因为 api 依赖的 ref 变化可能不会自动触发 BasicTable 的内部重载
|
|
|
// 使用 nextTick 确保 DOM 更新后再重载，或者直接在 modal 的 open 事件中处理
|
|
|
setTimeout(() => {
|
|
|
@@ -285,13 +265,13 @@
|
|
|
|
|
|
const dataColumns = [
|
|
|
{ label: '瓦斯等级', key: 'gasLevelName', type: 'alarm', showPoint: true },
|
|
|
- { label: '煤层自燃倾向性', key: 'coalSeamLevel', type: 'text' },
|
|
|
- { label: '联网', key: 'status', colorKey: 'status', type: 'status',showPoint: true },
|
|
|
- { label: '永久密闭数量', key: 'goafNum', type: 'text' },
|
|
|
- { label: '报警数量', key: 'alarmCount', type: 'custom' },
|
|
|
- { label: '报警原因', key: 'alarmReasons', type: 'custom' },
|
|
|
+ { label: '煤层自燃倾向性', key: 'coalSeamLevel', type: 'text' },
|
|
|
+ { label: '联网', key: 'status', colorKey: 'status', type: 'status', showPoint: true },
|
|
|
+ { label: '永久密闭数量', key: 'goafNum', type: 'text' },
|
|
|
+ { label: '报警数量', key: 'alarmCount', type: 'custom' },
|
|
|
+ { label: '报警原因', key: 'alarmReasons', type: 'custom' },
|
|
|
{ label: '开始时间', key: 'earliestTime', type: 'text' },
|
|
|
- { label: '最新监测时间', key: 'latestReadTime',type: 'text' },
|
|
|
+ { label: '最新监测时间', key: 'latestReadTime', type: 'text' },
|
|
|
];
|
|
|
const alartTypeColumns = [
|
|
|
'fireAlarm',
|
|
|
@@ -324,6 +304,7 @@
|
|
|
endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
|
});
|
|
|
alarmType.value = result.map((e) => ({
|
|
|
+ key: e.alarm_type,
|
|
|
name: e.name,
|
|
|
value: e.num,
|
|
|
}));
|
|
|
@@ -349,7 +330,7 @@
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 风险等级映射配置
|
|
|
*/
|
|
|
const RISK_LEVEL_MAP: Record<string, { text: string; color: string }> = {
|
|
|
@@ -359,7 +340,7 @@
|
|
|
'1': { text: '低风险', color: StatusColorEnum.blue },
|
|
|
'0': { text: '无风险', color: '#333' }, // 假设 0 为无风险或默认
|
|
|
};
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 获取报警颜色
|
|
|
* @param level 报警级别 '1', '2', '3', '4'
|
|
|
*/
|
|
|
@@ -367,7 +348,7 @@
|
|
|
if (!level && level !== 0) return '#333'; // 默认颜色
|
|
|
return RISK_LEVEL_MAP[String(level)]?.color;
|
|
|
};
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 获取风险等级对应的文本
|
|
|
* @param level 报警级别 '1', '2', '3', '4'
|
|
|
*/
|
|
|
@@ -376,29 +357,29 @@
|
|
|
return RISK_LEVEL_MAP[String(level)]?.text || '未知';
|
|
|
};
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 通用页面跳转方法
|
|
|
* @param record 当前行数据
|
|
|
* @param path 目标路径
|
|
|
*/
|
|
|
function handleGoToPageQuery(path: string) {
|
|
|
-
|
|
|
- router.push({
|
|
|
- path,
|
|
|
- }).catch(err => {
|
|
|
- console.error('跳转失败:', err);
|
|
|
- });
|
|
|
+ router
|
|
|
+ .push({
|
|
|
+ path,
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error('跳转失败:', err);
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 获取列显示的颜色
|
|
|
*/
|
|
|
const getColValueColor = (col: any, item: any) => {
|
|
|
-
|
|
|
if (col.key === 'gasLevelName') {
|
|
|
const val = getDataValue(item, col.key);
|
|
|
if (!val || val === '-') return '#000';
|
|
|
-
|
|
|
+
|
|
|
const strVal = String(val);
|
|
|
if (strVal.includes('突出')) {
|
|
|
return StatusColorEnum.red; // 红色
|
|
|
@@ -413,17 +394,17 @@
|
|
|
if (col.type === 'alarm' && col.colorKey) {
|
|
|
return getAlarmColor(getDataValue(item, col.colorKey));
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 如果是设备状态类型，使用状态颜色逻辑
|
|
|
if (col.type === 'status') {
|
|
|
return getlinkStatusInfo(getDataValue(item, col.key)).color;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
// 默认黑色
|
|
|
return '#000';
|
|
|
};
|
|
|
|
|
|
- /**
|
|
|
+ /**
|
|
|
* 根据点分字符串路径获取对象值 (例如: 'fireAlarm.alarmName')
|
|
|
* @param item 数据对象
|
|
|
* @param path 路径字符串
|
|
|
@@ -451,7 +432,7 @@
|
|
|
*/
|
|
|
const getColDisplayText = (col: any, item: any) => {
|
|
|
const rawValue = getDataValue(item, col.key);
|
|
|
-
|
|
|
+
|
|
|
if (col.type === 'status') {
|
|
|
return getlinkStatusInfo(rawValue).text;
|
|
|
}
|
|
|
@@ -477,7 +458,6 @@
|
|
|
return '-';
|
|
|
}
|
|
|
|
|
|
-
|
|
|
// 默认直接返回原始值或经过 getDataValue 处理后的值
|
|
|
return rawValue;
|
|
|
};
|
|
|
@@ -487,16 +467,176 @@
|
|
|
isChartVisible.value = !isChartVisible.value;
|
|
|
};
|
|
|
|
|
|
+ const pieOption: EChartsOption = {
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ // 关键: radius 数组，第一个值是内径（留白），第二个是外径（扇区范围）
|
|
|
+ radius: ['54%', '70%'],
|
|
|
+ color: ['#0070ff', '#0bc9d6', '#00c31a', '#ffa200', '#d2c629', '#8a53c1'],
|
|
|
+ colorBy: 'data',
|
|
|
+ // 其他饼图样式配置（可选）
|
|
|
+ label: { show: false },
|
|
|
+ // padAngle: 4,
|
|
|
+ itemStyle: { borderColor: '#fff', borderWidth: 2 },
|
|
|
+ minAngle: 5,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 关键: graphic 配置，用于在中心添加图片
|
|
|
+ graphic: {
|
|
|
+ elements: [
|
|
|
+ {
|
|
|
+ type: 'image', // 类型为图片
|
|
|
+ // left: 'center' 和 top: 'center' 使图片居中于图表容器
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ style: {
|
|
|
+ // 图片路径或 base64
|
|
|
+ image: '/src/assets/images/overHaul/rootPage/pie-chart-center.png',
|
|
|
+ width: 260, // 图片宽度，单位px
|
|
|
+ height: 260, // 图片高度，单位px
|
|
|
+ },
|
|
|
+ // 可选：设置 z 层级确保不被扇区遮盖
|
|
|
+ // z: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'image', // 类型为图片
|
|
|
+ // left: 'center' 和 top: 'center' 使图片居中于图表容器
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ style: {
|
|
|
+ // 图片路径或 base64
|
|
|
+ image: '/src/assets/images/overHaul/rootPage/alarm-icon-9.svg',
|
|
|
+ width: 80, // 图片宽度，单位px
|
|
|
+ height: 80, // 图片高度，单位px
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const barConfig = {
|
|
|
+ halfWidth: 12,
|
|
|
+ offsetY: 6,
|
|
|
+ };
|
|
|
+ // ========== 左侧面 ==========
|
|
|
+ const CubeLeft = graphic.extendShape({
|
|
|
+ shape: { x: 0, y: 0 },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const { halfWidth, offsetY } = barConfig;
|
|
|
+ const xAxisPoint = shape.xAxisPoint;
|
|
|
+
|
|
|
+ const c0 = [shape.x, shape.y];
|
|
|
+ const c1 = [shape.x - halfWidth, shape.y - offsetY];
|
|
|
+ const c2 = [xAxisPoint[0] - halfWidth, xAxisPoint[1]];
|
|
|
+ const c3 = [xAxisPoint[0], xAxisPoint[1] + offsetY];
|
|
|
+ ctx.moveTo(c0[0], c0[1])!.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ const CubeRight = graphic.extendShape({
|
|
|
+ shape: { x: 0, y: 0 },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const { halfWidth, offsetY } = barConfig;
|
|
|
+ const xAxisPoint = shape.xAxisPoint;
|
|
|
+
|
|
|
+ const c0 = [shape.x, shape.y];
|
|
|
+ const c1 = [xAxisPoint[0], xAxisPoint[1] + offsetY];
|
|
|
+ const c2 = [xAxisPoint[0] + halfWidth, xAxisPoint[1]];
|
|
|
+ const c3 = [shape.x + halfWidth, shape.y - offsetY];
|
|
|
+ ctx.moveTo(c0[0], c0[1])!.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
|
|
+ },
|
|
|
+ });
|
|
|
|
|
|
- onMounted(async() => {
|
|
|
- console.log(mineStore.getRoot)
|
|
|
- await Promise.all([
|
|
|
- fetchAccessStatics(),
|
|
|
- fetchRealtimeWarning(),
|
|
|
- fetchAlarmType(),
|
|
|
- fetchHistoryAlarmNum(),
|
|
|
- fetchMineData(),
|
|
|
- ]);
|
|
|
+ // ========== 顶面 ==========
|
|
|
+ const CubeTop = graphic.extendShape({
|
|
|
+ shape: { x: 0, y: 0 },
|
|
|
+ buildPath: function (ctx, shape) {
|
|
|
+ const { halfWidth, offsetY } = barConfig;
|
|
|
+
|
|
|
+ const c0 = [shape.x, shape.y];
|
|
|
+ const c1 = [shape.x - halfWidth, shape.y - offsetY];
|
|
|
+ const c2 = [shape.x, shape.y - 2 * offsetY];
|
|
|
+ const c3 = [shape.x + halfWidth, shape.y - offsetY];
|
|
|
+ ctx.moveTo(c0[0], c0[1])!.lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
|
|
|
+ },
|
|
|
+ });
|
|
|
+
|
|
|
+ // 注册形状
|
|
|
+ graphic.registerShape('CubeLeft', CubeLeft);
|
|
|
+ graphic.registerShape('CubeRight', CubeRight);
|
|
|
+ graphic.registerShape('CubeTop', CubeTop);
|
|
|
+
|
|
|
+ const barOption: EChartsOption = {
|
|
|
+ grid: {
|
|
|
+ left: '10%',
|
|
|
+ right: '10%',
|
|
|
+ bottom: '10%',
|
|
|
+ top: '10%',
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ axisLabel: {
|
|
|
+ // rotate: 30, // 名称过长时旋转
|
|
|
+ interval: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '报警数量',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'custom',
|
|
|
+ renderItem: function (params, api) {
|
|
|
+ // 获取当前柱子的数值和位置
|
|
|
+ const value = api.value(1);
|
|
|
+ const point = api.coord([api.value(0), value]);
|
|
|
+ const basePoint = api.coord([api.value(0), 0]);
|
|
|
+
|
|
|
+ // 统一柱子颜色（渐变）
|
|
|
+ return {
|
|
|
+ type: 'group',
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ type: 'CubeLeft',
|
|
|
+ shape: { x: point[0], y: point[1], xAxisPoint: basePoint },
|
|
|
+ style: {
|
|
|
+ fill: new graphic.LinearGradient(0, 0, 1, 1, [
|
|
|
+ { offset: 0, color: '#004dbb' },
|
|
|
+ { offset: 1, color: '#157cfe' },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'CubeRight',
|
|
|
+ shape: { x: point[0], y: point[1], xAxisPoint: basePoint },
|
|
|
+ style: {
|
|
|
+ fill: new graphic.LinearGradient(1, 0, 0, 0, [
|
|
|
+ { offset: 0, color: '#004dbb' },
|
|
|
+ { offset: 1, color: '#157cfe' },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'CubeTop',
|
|
|
+ shape: { x: point[0], y: point[1] },
|
|
|
+ style: {
|
|
|
+ fill: new graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
+ { offset: 0, color: '#004dbb' },
|
|
|
+ { offset: 1, color: '#157cfe' },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(async () => {
|
|
|
+ await Promise.all([fetchAccessStatics(), fetchRealtimeWarning(), fetchAlarmType(), fetchHistoryAlarmNum(), fetchMineData()]);
|
|
|
isDataLoaded.value = true;
|
|
|
});
|
|
|
</script>
|
|
|
@@ -561,7 +701,6 @@
|
|
|
background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100%;
|
|
|
-
|
|
|
}
|
|
|
.info-border-line {
|
|
|
width: 1px;
|
|
|
@@ -575,7 +714,7 @@
|
|
|
flex-direction: column;
|
|
|
justify-content: space-between;
|
|
|
padding: 8px 0;
|
|
|
-
|
|
|
+
|
|
|
.label {
|
|
|
font-size: 16px;
|
|
|
color: #000;
|
|
|
@@ -629,7 +768,6 @@
|
|
|
width: 100%;
|
|
|
height: 1px;
|
|
|
border-top: 2px dotted #397af3;
|
|
|
-
|
|
|
}
|
|
|
|
|
|
.bg-icon {
|
|
|
@@ -642,441 +780,510 @@
|
|
|
background-size: 100%;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-/* // 预警统计样式 */
|
|
|
-.warning-statistics {
|
|
|
- background-color: #ffffff;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 4px;
|
|
|
+ /* // 预警统计样式 */
|
|
|
+ .warning-statistics {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
|
|
|
- .statistics-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ .statistics-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
|
|
|
- .btn-group {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- }
|
|
|
+ .btn-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
|
|
|
- .btn {
|
|
|
- color: #2b6ff0;
|
|
|
- padding: 6px 12px;
|
|
|
- border: 1px solid #2b6ff0;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #E9F0FE;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ .btn {
|
|
|
+ color: #2b6ff0;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border: 1px solid #2b6ff0;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #e9f0fe;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
|
|
|
- .btn:hover {
|
|
|
- background-color: #f5f5f5;
|
|
|
- }
|
|
|
+ .btn:hover {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
|
|
|
- .statistics-content {
|
|
|
- display: flex;
|
|
|
- gap: 50px;
|
|
|
- }
|
|
|
+ .statistics-content {
|
|
|
+ display: flex;
|
|
|
+ gap: 50px;
|
|
|
+ }
|
|
|
|
|
|
- .stat-item {
|
|
|
- flex: 1;
|
|
|
- padding: 16px 50px 10px 90px;
|
|
|
- text-align: left;
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100%;
|
|
|
+ .stat-item {
|
|
|
+ flex: 1;
|
|
|
+ padding: 16px 50px 10px 90px;
|
|
|
+ text-align: left;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
|
|
|
- .icon {
|
|
|
- position: absolute;
|
|
|
- top: 15px;
|
|
|
- left: 20px;
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ top: 15px;
|
|
|
+ left: 20px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ .text-sub {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #989587;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-top {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ width: 40px;
|
|
|
+ height: 20px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ margin-top: -5px;
|
|
|
+ }
|
|
|
}
|
|
|
- .text {
|
|
|
- font-size: 16px;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- .text-sub {
|
|
|
- font-size: 12px;
|
|
|
- color: #989587;
|
|
|
+
|
|
|
+ .stat-item.high-risk {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
|
|
|
+ .icon-top {
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/over-limit-icon.svg');
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ color: #ff0000;
|
|
|
}
|
|
|
}
|
|
|
- .count {
|
|
|
- font-size: 24px;
|
|
|
- font-weight: bold;
|
|
|
+
|
|
|
+ .stat-item.medium-risk {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
|
|
|
+ .icon-top {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ color: #ff7700;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .icon-top{
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon1.svg');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100%;;
|
|
|
+ .stat-item.normal-risk {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
|
|
|
+ .icon-top {
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/data-break-icon.svg');
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ color: #d5c702;
|
|
|
+ }
|
|
|
}
|
|
|
- .icon-bottom{
|
|
|
- width: 40px;
|
|
|
- height: 20px;
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- margin-top: -5px;
|
|
|
+
|
|
|
+ .stat-item.low-risk {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
|
|
|
+ .icon-top {
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/data-quality-icon.svg');
|
|
|
+ }
|
|
|
+ .icon-bottom {
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
|
|
|
+ }
|
|
|
+ .count {
|
|
|
+ color: #0070ff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .stat-item.high-risk {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/high-risk-bg.png');
|
|
|
- .icon-top {
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/over-limit-icon.svg');
|
|
|
- }
|
|
|
- .icon-bottom {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/high-risk-icon2.png');
|
|
|
+ /* // 预警详情样式 */
|
|
|
+ .warning-details {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .details-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- .count {
|
|
|
- color: #FF0000;
|
|
|
+
|
|
|
+ .btn-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 8px;
|
|
|
}
|
|
|
}
|
|
|
+ .details-content {
|
|
|
+ height: 450px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ scroll-snap-type: y mandatory;
|
|
|
+ }
|
|
|
|
|
|
- .stat-item.medium-risk {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-bg.png');
|
|
|
- .icon-top {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon1.svg');
|
|
|
- }
|
|
|
- .icon-bottom {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/medium-risk-icon2.png');
|
|
|
+ .warning-item {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background-color: rgba(218, 234, 251, 0.5);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 16px;
|
|
|
+ scroll-snap-align: start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ border-bottom: 1px solid rgba(43, 111, 240, 0.2);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
}
|
|
|
- .count {
|
|
|
- color: #FF7700;
|
|
|
+ .name {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin: 0 15px 0px 5px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .stat-item.normal-risk {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-bg.png');
|
|
|
- .icon-top {
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/data-break-icon.svg');
|
|
|
+ .risk-level {
|
|
|
+ width: fit-content;
|
|
|
+ height: 24px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #ff6b6b;
|
|
|
+ color: white;
|
|
|
}
|
|
|
- .icon-bottom {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/normal-risk-icon2.png');
|
|
|
+
|
|
|
+ .header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
- .count {
|
|
|
- color: #D5C702;
|
|
|
+
|
|
|
+ .expand-btn {
|
|
|
+ color: #2b6ff0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border: 1px solid #2b6ff0;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #e9f0fe;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .stat-item.low-risk {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/low-risk-bg.png');
|
|
|
- .icon-top {
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/data-quality-icon.svg');
|
|
|
+ .expand-btn:hover {
|
|
|
+ color: #1a5cc8;
|
|
|
}
|
|
|
- .icon-bottom {
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/low-risk-icon2.png');
|
|
|
+
|
|
|
+ .arrow-icon-wrapper {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
- .count {
|
|
|
- color: #0070FF;
|
|
|
+
|
|
|
+ .arrow-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/icon-details.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ transition: transform 0.3s ease;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
-}
|
|
|
-
|
|
|
-/* // 预警详情样式 */
|
|
|
-.warning-details {
|
|
|
- background-color: #ffffff;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 4px;
|
|
|
-}
|
|
|
-
|
|
|
-.details-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 16px;
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
+ .arrow-icon.rotate {
|
|
|
+ transform: translate(-50%, -50%) rotate(180deg);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.btn-group {
|
|
|
display: flex;
|
|
|
gap: 8px;
|
|
|
}
|
|
|
-}
|
|
|
-.details-content {
|
|
|
- height: 450px;
|
|
|
- overflow-y: scroll;
|
|
|
- scroll-snap-type: y mandatory;
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-.warning-item {
|
|
|
- margin-bottom: 20px;
|
|
|
- background-color: rgba(218, 234, 251, 0.5);
|
|
|
- border-radius: 8px;
|
|
|
- padding: 16px;
|
|
|
- scroll-snap-align: start;
|
|
|
-}
|
|
|
-
|
|
|
-.item-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding-bottom: 10px;
|
|
|
- margin-bottom: 16px;
|
|
|
- border-bottom: 1px solid rgba(43, 111, 240, 0.2);
|
|
|
-
|
|
|
- .icon {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- background-image: url('/@/assets/images/overHaul/leafPage/info-card-icon1.svg');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- margin: 0 15px 0px 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .risk-level {
|
|
|
- width: fit-content;
|
|
|
- height: 24px;
|
|
|
- padding: 2px 8px;
|
|
|
- border-radius: 15px;
|
|
|
- font-size: 12px;
|
|
|
- background-color: #ff6b6b;
|
|
|
- color: white;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .header-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
|
|
|
- .expand-btn {
|
|
|
+ .btn {
|
|
|
color: #2b6ff0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
padding: 6px 12px;
|
|
|
border: 1px solid #2b6ff0;
|
|
|
border-radius: 4px;
|
|
|
- background-color: #E9F0FE;
|
|
|
+ background-color: #e9f0fe;
|
|
|
cursor: pointer;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- .expand-btn:hover {
|
|
|
- color: #1a5cc8;
|
|
|
+ .data-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
- .arrow-icon-wrapper {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow-icon {
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/icon-details.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- transition: transform 0.3s ease;
|
|
|
- }
|
|
|
-
|
|
|
- .arrow-icon.rotate {
|
|
|
- transform: translate(-50%, -50%) rotate(180deg);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.btn-group {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.btn {
|
|
|
- color: #2b6ff0;
|
|
|
- padding: 6px 12px;
|
|
|
- border: 1px solid #2b6ff0;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #E9F0FE;
|
|
|
- cursor: pointer;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.data-row {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(5, 1fr);
|
|
|
- gap: 12px;
|
|
|
- margin-bottom: 8px;
|
|
|
-}
|
|
|
-
|
|
|
-.data-col {
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- align-items: start;
|
|
|
- justify-content: center ;
|
|
|
- padding: 0 16px 0 30px;
|
|
|
- border-radius: 4px;
|
|
|
- font-size: 12px;
|
|
|
-
|
|
|
- .col-icon {
|
|
|
- width: 50px;
|
|
|
+ .data-col {
|
|
|
+ width: 100%;
|
|
|
height: 50px;
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-bg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- align-items: center;
|
|
|
+ position: relative;
|
|
|
display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: start;
|
|
|
justify-content: center;
|
|
|
+ padding: 0 16px 0 30px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
|
|
|
- .icon-item {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
|
|
|
+ .col-icon {
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-bg.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- .alarm-icon-1 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
|
|
|
- }
|
|
|
- .alarm-icon-2 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-2.svg');
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .icon-item {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .alarm-icon-1 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-1.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-2 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-2.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-3 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-3.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-4 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-4.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-5 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-5.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-6 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-6.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-7 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-7.svg');
|
|
|
+ }
|
|
|
+ .alarm-icon-8 {
|
|
|
+ background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-8.svg');
|
|
|
+ }
|
|
|
}
|
|
|
- .alarm-icon-3 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-3.svg');
|
|
|
+ .col-cont {
|
|
|
+ width: calc(100% - 50px);
|
|
|
+ height: 50px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/alarm-content-bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 0 20px;
|
|
|
}
|
|
|
- .alarm-icon-4 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-4.svg');
|
|
|
+
|
|
|
+ .col-title {
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
- .alarm-icon-5 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-5.svg');
|
|
|
+ .col-value {
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+ .status-dot {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
}
|
|
|
- .alarm-icon-6 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-6.svg');
|
|
|
+
|
|
|
+ .col-first-row {
|
|
|
+ grid-column: span 1;
|
|
|
}
|
|
|
- .alarm-icon-7 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-7.svg');
|
|
|
+ .col-second-row:nth-child(6) {
|
|
|
+ grid-column: 1 / span 3; // 占据第 1 到第 3 列
|
|
|
}
|
|
|
- .alarm-icon-8 {
|
|
|
- background-image: url('@/assets/images/overHaul/rootPage/alarm-icon-8.svg');
|
|
|
+
|
|
|
+ .col-second-row:nth-child(7) {
|
|
|
+ grid-column: span 1; // 占据第 4 列
|
|
|
}
|
|
|
- }
|
|
|
- .col-cont {
|
|
|
- width: calc(100% - 50px);
|
|
|
- height: 50px;
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/alarm-content-bg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding: 0 20px;
|
|
|
- }
|
|
|
|
|
|
- .col-title {
|
|
|
- color: #000;
|
|
|
- font-size: 14px;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- .col-value {
|
|
|
- color: #000;
|
|
|
- font-size: 14px;
|
|
|
-
|
|
|
- .status-dot {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- border-radius: 50%;
|
|
|
- display: inline-block;
|
|
|
+ .col-second-row:nth-child(8) {
|
|
|
+ grid-column: span 1; // 占据第 5 列
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .col-first-row {
|
|
|
- grid-column: span 1;
|
|
|
- }
|
|
|
- .col-second-row:nth-child(6) {
|
|
|
- grid-column: 1 / span 3; // 占据第 1 到第 3 列
|
|
|
- }
|
|
|
+ .half-year-statistics {
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-radius: 4px;
|
|
|
|
|
|
- .col-second-row:nth-child(7) {
|
|
|
- grid-column: span 1; // 占据第 4 列
|
|
|
- }
|
|
|
+ .statistics-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .col-second-row:nth-child(8) {
|
|
|
- grid-column: span 1; // 占据第 5 列
|
|
|
- }
|
|
|
-}
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
|
|
|
-.half-year-statistics {
|
|
|
- background-color: #ffffff;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 10px 12px;
|
|
|
- border-radius: 4px;
|
|
|
+ .statistics-content {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px; // 图表之间的间距
|
|
|
+ }
|
|
|
|
|
|
- .statistics-header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
+ .chart-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: 440px;
|
|
|
+ background-color: #ecf4fd;
|
|
|
+ /* align-items: center; */
|
|
|
+ /* display: flex; */
|
|
|
+ /* flex-direction: column; */
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- }
|
|
|
+ .chart-title {
|
|
|
+ min-width: 400px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ padding-bottom: 3px;
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/chart-title-bg.png');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: bottom center;
|
|
|
+ }
|
|
|
|
|
|
- .statistics-content {
|
|
|
- display: flex;
|
|
|
- gap: 20px; // 图表之间的间距
|
|
|
- }
|
|
|
+ .pie-legends {
|
|
|
+ height: 80px;
|
|
|
+ width: 200px;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: url('/@/assets/images/overHaul/rootPage/border-top.png');
|
|
|
+ background-position: top center;
|
|
|
|
|
|
- .chart-item {
|
|
|
- flex: 1;
|
|
|
- min-width: 0;
|
|
|
- padding: 10px;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #ecf4fd;
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
+ &-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ &-value {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
|
|
|
- .chart-title {
|
|
|
- min-width: 400px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
- background-image: url('/@/assets/images/overHaul/rootPage/chart-title-bg.png');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-
|
|
|
+ &:nth-child(1) {
|
|
|
+ .pie-legends-title {
|
|
|
+ border-left: 3px solid #0070ff;
|
|
|
+ }
|
|
|
+ .pie-legends-value {
|
|
|
+ color: #0070ff;
|
|
|
+ border-left: 3px solid #0070ff55;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ .pie-legends-title {
|
|
|
+ border-left: 3px solid #0bc9d6;
|
|
|
+ }
|
|
|
+ .pie-legends-value {
|
|
|
+ color: #0bc9d6;
|
|
|
+ border-left: 3px solid #0bc9d655;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ .pie-legends-title {
|
|
|
+ border-left: 3px solid #00c31a;
|
|
|
+ }
|
|
|
+ .pie-legends-value {
|
|
|
+ color: #00c31a;
|
|
|
+ border-left: 3px solid #00c31a55;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ .pie-legends-title {
|
|
|
+ border-left: 3px solid #ffa200;
|
|
|
+ }
|
|
|
+ .pie-legends-value {
|
|
|
+ color: #ffa200;
|
|
|
+ border-left: 3px solid #ffa20055;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(5) {
|
|
|
+ .pie-legends-title {
|
|
|
+ border-left: 3px solid #d2c629;
|
|
|
+ }
|
|
|
+ .pie-legends-value {
|
|
|
+ color: #d2c629;
|
|
|
+ border-left: 3px solid #d2c62955;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(6) {
|
|
|
+ .pie-legends-title {
|
|
|
+ border-left: 3px solid #8a53c1;
|
|
|
+ }
|
|
|
+ .pie-legends-value {
|
|
|
+ color: #8a53c1;
|
|
|
+ border-left: 3px solid #8a53c155;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
</style>
|
