|
|
@@ -1,31 +1,19 @@
|
|
|
<template>
|
|
|
<div class="title-text">{{ selectData.strinstallpos || selectData.strname }} </div>
|
|
|
<div class="pressure-monitor">
|
|
|
- <a-button
|
|
|
- preIcon="ant-design:rollback-outlined"
|
|
|
- type="text"
|
|
|
- size="small"
|
|
|
- style="position: absolute; left: 15px; top: 65px; color: #fff; z-index: 9999"
|
|
|
- @click="getBack"
|
|
|
- >
|
|
|
+ <a-button preIcon="ant-design:rollback-outlined" type="text" size="small"
|
|
|
+ style="position: absolute; left: 15px; top: 65px; color: #fff; z-index: 9999" @click="getBack">
|
|
|
返回
|
|
|
</a-button>
|
|
|
<div class="table-container">
|
|
|
- <MonitorTable
|
|
|
- ref="MonitorDataTable"
|
|
|
- class="monitor-table"
|
|
|
- :dataSource="dataSource"
|
|
|
- :columnsType="deviceType"
|
|
|
- @selectRow="getSelectRow"
|
|
|
- :scroll="{ y: scroll.y - 40 }"
|
|
|
- design-scope="gate-monitor"
|
|
|
- title="支架监测"
|
|
|
- :isShowPagination="false"
|
|
|
- >
|
|
|
+ <MonitorTable ref="MonitorDataTable" class="monitor-table" :dataSource="dataSource" :columnsType="deviceType"
|
|
|
+ @selectRow="getSelectRow" :scroll="{ y: scroll.y - 40 }" design-scope="gate-monitor" title="支架监测"
|
|
|
+ :isShowPagination="false">
|
|
|
<template #filterCell="{ column, record }">
|
|
|
- <a-tag v-if="column.dataIndex === 'warnFlag'" :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
|
|
|
- {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测' }}</a-tag
|
|
|
- >
|
|
|
+ <a-tag v-if="column.dataIndex === 'warnFlag'"
|
|
|
+ :color="record.warnFlag == 0 ? 'green' : record.warnFlag == 1 ? '#FF5812' : 'gray'">
|
|
|
+ {{ record.warnFlag == 0 ? '正常' : record.warnFlag == 1 ? '报警' : record.warnFlag == 2 ? '断开' : '未监测'
|
|
|
+ }}</a-tag>
|
|
|
<template v-else-if="column.dataIndex === 'warnLevel'">
|
|
|
<a-tag v-if="record.warnLevel == '101'" color="green">低风险</a-tag>
|
|
|
<a-tag v-else-if="record.warnLevel == '102'" color="#FF5812">一般风险</a-tag>
|
|
|
@@ -73,58 +61,66 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, computed, reactive, onUnmounted } from 'vue';
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import { list } from './main.api';
|
|
|
- import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
- import { DoubleLeftOutlined } from '@ant-design/icons-vue';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
- import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+import { ref, onMounted, computed, reactive, onUnmounted } from 'vue';
|
|
|
+import * as echarts from 'echarts';
|
|
|
+import { list } from './main.api';
|
|
|
+import MonitorTable from '../comment/MonitorTable.vue';
|
|
|
+import { DoubleLeftOutlined } from '@ant-design/icons-vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { usePermission } from '/@/hooks/web/usePermission';
|
|
|
+import { useGlobSetting } from '/@/hooks/setting';
|
|
|
+import ceshi from './ceshi.json'
|
|
|
|
|
|
- const { hasPermission } = usePermission();
|
|
|
- const router = useRouter();
|
|
|
- const chartEl = ref<HTMLElement>();
|
|
|
- const currentTime = computed(() => new Date().toLocaleString());
|
|
|
- const scroll = reactive({
|
|
|
- y: 230,
|
|
|
- });
|
|
|
- const deviceType = ref('Minepressure');
|
|
|
- const dataSource = ref<Array<any>>([]);
|
|
|
- const IdList = ref<Array<{ deviceId: string; strname: string }>>([]);
|
|
|
- const chartData = ref<Array<any>>([]);
|
|
|
- const chartDataShow = ref<Array<any>>([]);
|
|
|
- const selectRowIndex = ref(-1); // 选中行
|
|
|
- const selectData = ref<any>({});
|
|
|
- const colorRanges = [
|
|
|
- { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
|
|
|
- { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
|
|
|
- { min: 252, max: 375, color: '#91cc75', label: '正常' },
|
|
|
- { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
|
|
|
- { min: 425, max: 475, color: '#ee6666', label: '强来压' },
|
|
|
- { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
|
|
|
- ];
|
|
|
- const dataRanges = [
|
|
|
- { min: -Infinity, max: 0, color: '#999', label: '<0' },
|
|
|
- { min: 0, max: 252, color: '#5470c6', label: '0-252' },
|
|
|
- { min: 252, max: 375, color: '#91cc75', label: '252-375' },
|
|
|
- { min: 375, max: 425, color: '#fac858', label: '375-425' },
|
|
|
- { min: 425, max: 475, color: '#ee6666', label: '425-475' },
|
|
|
- { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
|
|
|
- ];
|
|
|
+const { hasPermission } = usePermission();
|
|
|
+const router = useRouter();
|
|
|
+const chartEl = ref<HTMLElement>();
|
|
|
+const currentTime = computed(() => new Date().toLocaleString());
|
|
|
+const scroll = reactive({
|
|
|
+ y: 230,
|
|
|
+});
|
|
|
+const deviceType = ref('Minepressure_monitor');
|
|
|
+const dataSource = ref<Array<any>>([]);
|
|
|
+const IdList = ref<Array<{ deviceId: string; strname: string }>>([]);
|
|
|
+const chartData = ref<Array<any>>([]);
|
|
|
+const chartDataShow = ref<Array<any>>([]);
|
|
|
+const selectRowIndex = ref(-1); // 选中行
|
|
|
+const selectData = ref<any>({});
|
|
|
+const colorRanges = [
|
|
|
+ { min: -Infinity, max: 0, color: '#999999', label: '异常数据' },
|
|
|
+ { min: 0, max: 252, color: '#5470c6', label: '初撑力不足' },
|
|
|
+ { min: 252, max: 375, color: '#91cc75', label: '正常' },
|
|
|
+ { min: 375, max: 425, color: '#fac858', label: '轻微来压' },
|
|
|
+ { min: 425, max: 475, color: '#ee6666', label: '强来压' },
|
|
|
+ { min: 475, max: Infinity, color: '#fc8452', label: '剧烈来压' },
|
|
|
+];
|
|
|
+const dataRanges = [
|
|
|
+ { min: -Infinity, max: 0, color: '#999', label: '<0' },
|
|
|
+ { min: 0, max: 252, color: '#5470c6', label: '0-252' },
|
|
|
+ { min: 252, max: 375, color: '#91cc75', label: '252-375' },
|
|
|
+ { min: 375, max: 425, color: '#fac858', label: '375-425' },
|
|
|
+ { min: 425, max: 475, color: '#ee6666', label: '425-475' },
|
|
|
+ { min: 475, max: Infinity, color: '#fc8452', label: '>475' },
|
|
|
+];
|
|
|
|
|
|
- const legendData = colorRanges.map((item) => ({
|
|
|
- color: item.color,
|
|
|
- label: item.label,
|
|
|
- }));
|
|
|
+const legendData = colorRanges.map((item) => ({
|
|
|
+ color: item.color,
|
|
|
+ label: item.label,
|
|
|
+}));
|
|
|
|
|
|
- let timer: null | NodeJS.Timeout = undefined;
|
|
|
+let timer: null | NodeJS.Timeout = undefined;
|
|
|
|
|
|
- async function getDataSource(flag?) {
|
|
|
- if (timer) timer = null;
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- let res = await list({ devicetype: 'Minepressure', pagetype: 'normal' });
|
|
|
+async function getDataSource(flag?) {
|
|
|
+ if (timer) timer = null;
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ let res
|
|
|
+ const { sysOrgCode } = useGlobSetting();
|
|
|
+ if (sysOrgCode == 'A02A02') {
|
|
|
+ res=ceshi
|
|
|
+ } else {
|
|
|
+ res = await list({ devicetype: 'Minepressure', pagetype: 'normal' });
|
|
|
+ }
|
|
|
const dataArr = res.msgTxt[0].datalist || [];
|
|
|
dataSource.value = [];
|
|
|
IdList.value = [];
|
|
|
@@ -144,252 +140,259 @@
|
|
|
if (timer) {
|
|
|
getDataSource();
|
|
|
}
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
- // 切换检测数据
|
|
|
- async function getSelectRow(selectRow, index) {
|
|
|
- if (!selectRow) return;
|
|
|
- selectRowIndex.value = index;
|
|
|
- chartDataShow.value = chartData.value[index];
|
|
|
- initChart();
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
}
|
|
|
- function initChart() {
|
|
|
- if (!chartEl.value) return;
|
|
|
- const chart = echarts.init(chartEl.value);
|
|
|
- const data = chartDataShow.value;
|
|
|
+}
|
|
|
+// 切换检测数据
|
|
|
+async function getSelectRow(selectRow, index) {
|
|
|
+ if (!selectRow) return;
|
|
|
+ selectRowIndex.value = index;
|
|
|
+ chartDataShow.value = chartData.value[index];
|
|
|
+ initChart();
|
|
|
+}
|
|
|
+function initChart() {
|
|
|
+ if (!chartEl.value) return;
|
|
|
+ const chart = echarts.init(chartEl.value);
|
|
|
+ const data = chartDataShow.value;
|
|
|
|
|
|
- const option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- formatter: (params: any) => {
|
|
|
- const value = params[0].value;
|
|
|
- const range = colorRanges.find((r) => value >= r.min && value < r.max);
|
|
|
- return `${params[0].dataIndex + 1}#<br/>
|
|
|
+ const option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: (params: any) => {
|
|
|
+ const value = params[0].value;
|
|
|
+ const range = colorRanges.find((r) => value >= r.min && value < r.max);
|
|
|
+ return `${params[0].dataIndex + 1}#<br/>
|
|
|
值: ${value}bar<br/>
|
|
|
状态: ${range?.label || '未知'}`;
|
|
|
- },
|
|
|
},
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: 'inside',
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- xAxisIndex: [0],
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'slider',
|
|
|
- start: 0,
|
|
|
- end: 100,
|
|
|
- xAxisIndex: [0],
|
|
|
- bottom: 10,
|
|
|
- height: 10,
|
|
|
- },
|
|
|
- ],
|
|
|
- xAxis: {
|
|
|
- type: 'category',
|
|
|
- data: data.map((_, i) => `${i + 1}#`),
|
|
|
- axisLabel: {
|
|
|
- interval: 1,
|
|
|
- rotate: 45,
|
|
|
- color: '#0ff', // 标签颜色
|
|
|
- },
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ type: 'inside',
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ xAxisIndex: [0],
|
|
|
},
|
|
|
- yAxis: {
|
|
|
- type: 'value',
|
|
|
- name: '矿压值(bar)',
|
|
|
- min: -50,
|
|
|
- max: 600,
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle: {
|
|
|
- color: '#eeeeee55', // 设置Y轴颜色
|
|
|
- },
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- margin: 15, // 控制刻度标签与轴线之间的距离
|
|
|
- fontSize: 12, // 标签字体大小
|
|
|
- color: '#0ff', // 标签颜色
|
|
|
- },
|
|
|
- nameTextStyle: {
|
|
|
- color: '#0ff',
|
|
|
+ {
|
|
|
+ type: 'slider',
|
|
|
+ start: 0,
|
|
|
+ end: 100,
|
|
|
+ xAxisIndex: [0],
|
|
|
+ bottom: 10,
|
|
|
+ height: 10,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: data.map((_, i) => `${i + 1}#`),
|
|
|
+ axisLabel: {
|
|
|
+ interval: 1,
|
|
|
+ rotate: 45,
|
|
|
+ color: '#0ff', // 标签颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ name: '矿压值(bar)',
|
|
|
+ min: -50,
|
|
|
+ max: 600,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#eeeeee55', // 设置Y轴颜色
|
|
|
},
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: data.map((value) => ({
|
|
|
- value,
|
|
|
- itemStyle: {
|
|
|
- color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
|
|
|
- },
|
|
|
- })),
|
|
|
- type: 'bar',
|
|
|
- barWidth: '60%',
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'top',
|
|
|
- formatter: '{c}',
|
|
|
- color: '#fff',
|
|
|
- textShadowColor: '#333', // 阴影颜色
|
|
|
- textShadowBlur: 0, // 阴影模糊半径
|
|
|
-
|
|
|
- textBorderColor: '#333', // 描边颜色
|
|
|
- textBorderWidth: 1, // 描边宽度
|
|
|
+ axisLabel: {
|
|
|
+ margin: 15, // 控制刻度标签与轴线之间的距离
|
|
|
+ fontSize: 12, // 标签字体大小
|
|
|
+ color: '#0ff', // 标签颜色
|
|
|
+ },
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#0ff',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: data.map((value) => ({
|
|
|
+ value,
|
|
|
+ itemStyle: {
|
|
|
+ color: colorRanges.find((r) => value >= r.min && value < r.max)?.color,
|
|
|
},
|
|
|
+ })),
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '60%',
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'top',
|
|
|
+ formatter: '{c}',
|
|
|
+ color: '#fff',
|
|
|
+ textShadowColor: '#333', // 阴影颜色
|
|
|
+ textShadowBlur: 0, // 阴影模糊半径
|
|
|
+
|
|
|
+ textBorderColor: '#333', // 描边颜色
|
|
|
+ textBorderWidth: 1, // 描边宽度
|
|
|
},
|
|
|
- ],
|
|
|
- grid: {
|
|
|
- left: '10',
|
|
|
- right: '15',
|
|
|
- bottom: '20',
|
|
|
- top: '50',
|
|
|
- containLabel: true,
|
|
|
},
|
|
|
- };
|
|
|
- chart.setOption(option);
|
|
|
- window.addEventListener('resize', () => chart.resize());
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ left: '10',
|
|
|
+ right: '15',
|
|
|
+ bottom: '20',
|
|
|
+ top: '50',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ window.addEventListener('resize', () => chart.resize());
|
|
|
+}
|
|
|
+function getBack() {
|
|
|
+ router.push('/monitorChannel/monitor-alarm-home');
|
|
|
+}
|
|
|
+onMounted(async () => {
|
|
|
+ timer = null;
|
|
|
+ await getDataSource(1);
|
|
|
+ initChart();
|
|
|
+});
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearInterval(timer);
|
|
|
}
|
|
|
- function getBack() {
|
|
|
- router.push('/monitorChannel/monitor-alarm-home');
|
|
|
- }
|
|
|
- onMounted(async () => {
|
|
|
- timer = null;
|
|
|
- await getDataSource(1);
|
|
|
- initChart();
|
|
|
- });
|
|
|
- onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearInterval(timer);
|
|
|
- }
|
|
|
- timer = undefined;
|
|
|
- });
|
|
|
+ timer = undefined;
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .title-text {
|
|
|
- position: absolute;
|
|
|
- color: #fff;
|
|
|
- width: 100%;
|
|
|
- height: 32px;
|
|
|
- text-align: center;
|
|
|
- top: 52px;
|
|
|
- z-index: 9999;
|
|
|
- }
|
|
|
- .pressure-monitor {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- padding: 10px 10px 15px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
+.title-text {
|
|
|
+ position: absolute;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ top: 52px;
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
|
|
|
- .time-display {
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
+.pressure-monitor {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 10px 10px 15px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
|
|
|
- .table-container {
|
|
|
- width: 100%;
|
|
|
- height: 250px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 15px 20px;
|
|
|
- margin-top: 80px;
|
|
|
- border-bottom: 1px solid var(--vent-table-thead-border);
|
|
|
- background-color: #ffffff08;
|
|
|
- }
|
|
|
+.time-display {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
|
|
|
- .chart-box {
|
|
|
- margin-top: 10px;
|
|
|
- border: 1px solid var(--vent-btn-primary-border-color);
|
|
|
- position: relative;
|
|
|
- .icon {
|
|
|
- width: 100%;
|
|
|
- color: var(--vent-table-thead-border);
|
|
|
- font-size: 12px;
|
|
|
- transform: rotate(-90deg);
|
|
|
- position: absolute;
|
|
|
- top: -12px;
|
|
|
- }
|
|
|
- .chart-container {
|
|
|
- width: 100%;
|
|
|
- height: 400px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
- .info-panel {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: 1fr 1fr;
|
|
|
- gap: 20px;
|
|
|
- padding: 20px 20px 10px 20px;
|
|
|
- }
|
|
|
- background-color: #ffffff08;
|
|
|
- }
|
|
|
- .chart {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+.table-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 250px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 15px 20px;
|
|
|
+ margin-top: 80px;
|
|
|
+ border-bottom: 1px solid var(--vent-table-thead-border);
|
|
|
+ background-color: #ffffff08;
|
|
|
+}
|
|
|
|
|
|
- .legend-section,
|
|
|
- .range-section {
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+.chart-box {
|
|
|
+ margin-top: 10px;
|
|
|
+ border: 1px solid var(--vent-btn-primary-border-color);
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 100%;
|
|
|
+ color: var(--vent-table-thead-border);
|
|
|
+ font-size: 12px;
|
|
|
+ transform: rotate(-90deg);
|
|
|
+ position: absolute;
|
|
|
+ top: -12px;
|
|
|
}
|
|
|
|
|
|
- h3 {
|
|
|
+ .chart-container {
|
|
|
width: 100%;
|
|
|
- color: #fff;
|
|
|
- margin-top: 0;
|
|
|
- margin-bottom: 15px;
|
|
|
- font-size: 16px;
|
|
|
- padding-bottom: 8px;
|
|
|
- border-bottom: 1px solid var(--vent-btn-primary-border-color);
|
|
|
- position: relative;
|
|
|
- display: inline-block;
|
|
|
- padding-left: 20px;
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 4px;
|
|
|
- height: 12px;
|
|
|
- top: 6px;
|
|
|
- left: 10px;
|
|
|
- background: #45d3fd;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
+ height: 400px;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 5px;
|
|
|
}
|
|
|
|
|
|
- .legend-grid,
|
|
|
- .range-grid {
|
|
|
+ .info-panel {
|
|
|
display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
- gap: 12px;
|
|
|
- padding-left: 40px;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px 20px 10px 20px;
|
|
|
}
|
|
|
|
|
|
- .legend-item,
|
|
|
- .range-item {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+ background-color: #ffffff08;
|
|
|
+}
|
|
|
+
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
|
|
|
- .color-indicator {
|
|
|
- display: inline-block;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
+.legend-section,
|
|
|
+.range-section {
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+h3 {
|
|
|
+ width: 100%;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding-bottom: 8px;
|
|
|
+ border-bottom: 1px solid var(--vent-btn-primary-border-color);
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 12px;
|
|
|
+ top: 6px;
|
|
|
+ left: 10px;
|
|
|
+ background: #45d3fd;
|
|
|
border-radius: 4px;
|
|
|
- margin-right: 8px;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .legend-text,
|
|
|
- .range-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
+.legend-grid,
|
|
|
+.range-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ padding-left: 40px;
|
|
|
+}
|
|
|
|
|
|
- .range-text {
|
|
|
- font-family: monospace;
|
|
|
- }
|
|
|
+.legend-item,
|
|
|
+.range-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.color-indicator {
|
|
|
+ display: inline-block;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.legend-text,
|
|
|
+.range-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.range-text {
|
|
|
+ font-family: monospace;
|
|
|
+}
|
|
|
</style>
|
