|
|
@@ -1,10 +1,13 @@
|
|
|
<template>
|
|
|
- <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情 ${currentTime}`" width="1200px" @ok="handleOk"
|
|
|
- @cancel="handleCancel">
|
|
|
+ <BasicModal v-bind="$attrs" @register="register" :title="`光纤测温详情 ${currentTime}`" width="1200px" @ok="handleOk" @cancel="handleCancel">
|
|
|
<div class="fiber-modal">
|
|
|
<div class="modal-left">
|
|
|
- <div v-for="device in deviceList" class="link-item"
|
|
|
- :class="{ 'active-device-title': device.deviceID === activeDeviceID }" :key="device.deviceID">
|
|
|
+ <div
|
|
|
+ v-for="device in deviceList"
|
|
|
+ class="link-item"
|
|
|
+ :class="{ 'active-device-title': device.deviceID === activeDeviceID }"
|
|
|
+ :key="device.deviceID"
|
|
|
+ >
|
|
|
<span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -16,7 +19,7 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">最高温度</div>
|
|
|
- <div class="value">{{ formatNum(maxTemp) || '--' }} <span>℃</span> </div>
|
|
|
+ <div class="value">{{ formatNum(maxValue) || '--' }} <span>℃</span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item warning-box">
|
|
|
@@ -38,8 +41,7 @@
|
|
|
<div class="right-bottom">
|
|
|
<span class="base-title">测点监测曲线</span>
|
|
|
<div class="echarts-box">
|
|
|
- <BarAndLine xAxisPropType="Section_Position" :dataSource="posList1" height="100%"
|
|
|
- :chartsColumns="chartsColumns" :option="echatsOption" />
|
|
|
+ <BarAndLine xAxisPropType="Section_Position" :dataSource="posList1" height="100%" :chartsColumns="chartsColumns" :option="echatsOption" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,417 +49,417 @@
|
|
|
</BasicModal>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
|
|
|
-import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
-import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
-import { SvgIcon } from '/@/components/Icon';
|
|
|
-import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
-import dayjs from 'dayjs';
|
|
|
-import { formatNum } from '/@/utils/ventutil';
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
|
|
|
- props: {
|
|
|
- dataSource: { type: Array },
|
|
|
- activeID: { type: String },
|
|
|
- },
|
|
|
- setup(props) {
|
|
|
- const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
|
|
- const modelRef = ref({});
|
|
|
- const loading = ref(true);
|
|
|
- const activeDeviceID = ref('');
|
|
|
- const deviceList = ref<any[]>([]);
|
|
|
- const posList = reactive<any[]>([]);
|
|
|
- const posList1 = reactive<any[]>([]);
|
|
|
- //风险等级
|
|
|
- const warnLevels = ref('');
|
|
|
- //最高温度
|
|
|
- const maxTemp = ref(0);
|
|
|
-
|
|
|
- const echatsOption = {
|
|
|
- grid: {
|
|
|
- top: '20%',
|
|
|
- left: '2px',
|
|
|
- right: '10px',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- const chartsColumns = [
|
|
|
- {
|
|
|
- legend: '最高温度',
|
|
|
- seriesName: '(℃)',
|
|
|
- ymax: 100,
|
|
|
- yname: '℃',
|
|
|
- linetype: 'line',
|
|
|
- yaxispos: 'left',
|
|
|
- color: '#FDB146',
|
|
|
- sort: 1,
|
|
|
- xRotate: 0,
|
|
|
- dataIndex: 'value',
|
|
|
- },
|
|
|
- ];
|
|
|
- const columns = [
|
|
|
- {
|
|
|
- title: '位置',
|
|
|
- dataIndex: 'position',
|
|
|
- width: 60,
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '最高温度(℃)',
|
|
|
- dataIndex: 'Section_MaxTemp',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '对应米数(m)',
|
|
|
- dataIndex: 'Section_MaxTempPos',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '起点',
|
|
|
- dataIndex: 'Section_BeginPosition',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '终点',
|
|
|
- dataIndex: 'Section_EndPosition',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '报警温度(℃)',
|
|
|
- dataIndex: 'Section_AlarmTemp',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '报警状态',
|
|
|
- dataIndex: 'isWarn',
|
|
|
- align: 'center',
|
|
|
- },
|
|
|
- ];
|
|
|
-
|
|
|
- const [register, { setModalProps, closeModal }] = useModalInner();
|
|
|
-
|
|
|
- function handleVisibleChange(visible) {
|
|
|
- if (visible) {
|
|
|
+ import { defineComponent, ref, watch, shallowRef, reactive } from 'vue';
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+ import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { formatNum } from '/@/utils/ventutil';
|
|
|
+
|
|
|
+ export default defineComponent({
|
|
|
+ components: { BasicModal, BarAndLine, SvgIcon, DvScrollBoard, DvDecoration7 },
|
|
|
+ props: {
|
|
|
+ dataSource: { type: Array },
|
|
|
+ activeID: { type: String },
|
|
|
+ },
|
|
|
+ setup(props) {
|
|
|
+ const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'));
|
|
|
+ const modelRef = ref({});
|
|
|
+ const loading = ref(true);
|
|
|
+ const activeDeviceID = ref('');
|
|
|
+ const deviceList = ref<any[]>([]);
|
|
|
+ const posList = reactive<any[]>([]);
|
|
|
+ const posList1 = reactive<any[]>([]);
|
|
|
+ //风险等级
|
|
|
+ const warnLevels = ref('');
|
|
|
+ //最高温度
|
|
|
+ const maxValue = ref(0);
|
|
|
+
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '20%',
|
|
|
+ left: '2px',
|
|
|
+ right: '10px',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const chartsColumns = [
|
|
|
+ {
|
|
|
+ legend: '最高温度',
|
|
|
+ seriesName: '(℃)',
|
|
|
+ ymax: 100,
|
|
|
+ yname: '℃',
|
|
|
+ linetype: 'line',
|
|
|
+ yaxispos: 'left',
|
|
|
+ color: '#FDB146',
|
|
|
+ sort: 1,
|
|
|
+ xRotate: 0,
|
|
|
+ dataIndex: 'value',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '位置',
|
|
|
+ dataIndex: 'position',
|
|
|
+ width: 60,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '最高温度(℃)',
|
|
|
+ dataIndex: 'Section_MaxTemp',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '对应米数(m)',
|
|
|
+ dataIndex: 'Section_MaxTempPos',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '起点',
|
|
|
+ dataIndex: 'Section_BeginPosition',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '终点',
|
|
|
+ dataIndex: 'Section_EndPosition',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报警温度(℃)',
|
|
|
+ dataIndex: 'Section_AlarmTemp',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '报警状态',
|
|
|
+ dataIndex: 'isWarn',
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ const [register, { setModalProps, closeModal }] = useModalInner();
|
|
|
+
|
|
|
+ function handleVisibleChange(visible) {
|
|
|
+ if (visible) {
|
|
|
+ loading.value = true;
|
|
|
+ setModalProps({ loading: true, confirmLoading: true });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ setModalProps({ loading: false, confirmLoading: false });
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选择监测
|
|
|
+ function selectDevice(id) {
|
|
|
loading.value = true;
|
|
|
setModalProps({ loading: true, confirmLoading: true });
|
|
|
-
|
|
|
setTimeout(() => {
|
|
|
loading.value = false;
|
|
|
+ activeDeviceID.value = id;
|
|
|
setModalProps({ loading: false, confirmLoading: false });
|
|
|
- }, 1000);
|
|
|
+ }, 300);
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- // 选择监测
|
|
|
- function selectDevice(id) {
|
|
|
- loading.value = true;
|
|
|
- setModalProps({ loading: true, confirmLoading: true });
|
|
|
- setTimeout(() => {
|
|
|
- loading.value = false;
|
|
|
- activeDeviceID.value = id;
|
|
|
- setModalProps({ loading: false, confirmLoading: false });
|
|
|
- }, 300);
|
|
|
- }
|
|
|
|
|
|
- function handleOk(e) {
|
|
|
- e.preventDefault();
|
|
|
- closeModal();
|
|
|
- }
|
|
|
-
|
|
|
- function handleCancel(e) {
|
|
|
- e.preventDefault();
|
|
|
- closeModal();
|
|
|
- }
|
|
|
+ function handleOk(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
|
|
|
- watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
|
|
|
- deviceList.value = newDataSource as any[];
|
|
|
- if (newActiveID != oldActiveID) {
|
|
|
- activeDeviceID.value = newActiveID as string;
|
|
|
+ function handleCancel(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ closeModal();
|
|
|
}
|
|
|
- // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
|
|
|
- maxTemp.value = 0;
|
|
|
- newDataSource?.forEach((item: any, index) => {
|
|
|
- if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
|
|
|
- posList.length = 0;
|
|
|
- posList1.length = 0;
|
|
|
- const indexSet = new Set();
|
|
|
- for (let i = 0; i < Object.keys(item.readData).length; i++) {
|
|
|
- if (Object.keys(item.readData)[i].indexOf('Section') != -1) {
|
|
|
- indexSet.add(Object.keys(item.readData)[i].split('_')[0].slice(7));
|
|
|
- }
|
|
|
- }
|
|
|
- const indexValues = Array.from(indexSet).sort((a, b) => Number(a) - Number(b));
|
|
|
- for (let i = 0; i < indexValues.length; i++) {
|
|
|
- const index = indexValues[i];
|
|
|
- if (item.readData[`Section${index}_BeginPosition`] && item.readData[`Section${index}_EndPosition`]) {
|
|
|
- let isWarn;
|
|
|
- if (parseFloat(item.readData[`Section${index}_AlarmTemp`]) > 1) {
|
|
|
- isWarn =
|
|
|
- parseFloat(item.readData[`Section${index}_AlarmTemp`]) - parseFloat(item.readData[`Section${index}_MaxTemp`]) > 0
|
|
|
- ? '报警'
|
|
|
- : '正常';
|
|
|
- } else {
|
|
|
- isWarn = parseFloat(item.readData[`Section${index}_AlarmTemp`]) == 0 ? '正常' : '报警';
|
|
|
- }
|
|
|
|
|
|
- posList.push({
|
|
|
- position: `测点${index}`,
|
|
|
- Section_MaxTemp: item.readData[`Section${index}_MaxTemp`],
|
|
|
- Section_MaxTempPos: item.readData[`Section${index}_MaxTempPos`],
|
|
|
- Section_BeginPosition: item.readData[`Section${index}_BeginPosition`],
|
|
|
- Section_EndPosition: item.readData[`Section${index}_EndPosition`],
|
|
|
- Section_AlarmTemp: item.readData[`Section${index}_AlarmTemp`],
|
|
|
- isWarn: isWarn,
|
|
|
- });
|
|
|
- posList1.push({
|
|
|
- Section_Position: `${item.readData[`Section${index}_BeginPosition`]}-${item.readData[`Section${index}_EndPosition`]}m`,
|
|
|
- value: item.readData[`Section${index}_MaxTemp`],
|
|
|
- });
|
|
|
- if (parseFloat(item.readData[`Section${index}_MaxTemp`]) > maxTemp.value) {
|
|
|
- maxTemp.value = item.readData[`Section${index}_MaxTemp`];
|
|
|
+ watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
|
|
|
+ deviceList.value = newDataSource as any[];
|
|
|
+ if (newActiveID != oldActiveID) {
|
|
|
+ activeDeviceID.value = newActiveID as string;
|
|
|
+ }
|
|
|
+ // activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
|
|
|
+ maxValue.value = 0;
|
|
|
+ newDataSource?.forEach((item: any, index) => {
|
|
|
+ if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
|
|
|
+ posList.length = 0;
|
|
|
+ posList1.length = 0;
|
|
|
+ const indexSet = new Set();
|
|
|
+ for (let i = 0; i < Object.keys(item.readData).length; i++) {
|
|
|
+ if (Object.keys(item.readData)[i].indexOf('Section') != -1) {
|
|
|
+ indexSet.add(Object.keys(item.readData)[i].split('_')[0].slice(7));
|
|
|
}
|
|
|
}
|
|
|
+ const indexValues = Array.from(indexSet).sort((a, b) => Number(a) - Number(b));
|
|
|
+ for (let i = 0; i < indexValues.length; i++) {
|
|
|
+ const index = indexValues[i];
|
|
|
+ if (item.readData[`Section${index}_BeginPosition`] && item.readData[`Section${index}_EndPosition`]) {
|
|
|
+ let isWarn;
|
|
|
+ if (parseFloat(item.readData[`Section${index}_AlarmTemp`]) > 1) {
|
|
|
+ isWarn =
|
|
|
+ parseFloat(item.readData[`Section${index}_AlarmTemp`]) - parseFloat(item.readData[`Section${index}_MaxTemp`]) > 0
|
|
|
+ ? '报警'
|
|
|
+ : '正常';
|
|
|
+ } else {
|
|
|
+ isWarn = parseFloat(item.readData[`Section${index}_AlarmTemp`]) == 0 ? '正常' : '报警';
|
|
|
+ }
|
|
|
+
|
|
|
+ posList.push({
|
|
|
+ position: `测点${index}`,
|
|
|
+ Section_MaxTemp: item.readData[`Section${index}_MaxTemp`],
|
|
|
+ Section_MaxTempPos: item.readData[`Section${index}_MaxTempPos`],
|
|
|
+ Section_BeginPosition: item.readData[`Section${index}_BeginPosition`],
|
|
|
+ Section_EndPosition: item.readData[`Section${index}_EndPosition`],
|
|
|
+ Section_AlarmTemp: item.readData[`Section${index}_AlarmTemp`],
|
|
|
+ isWarn: isWarn,
|
|
|
+ });
|
|
|
+ posList1.push({
|
|
|
+ Section_Position: `${item.readData[`Section${index}_BeginPosition`]}-${item.readData[`Section${index}_EndPosition`]}m`,
|
|
|
+ value: item.readData[`Section${index}_MaxTemp`],
|
|
|
+ });
|
|
|
+ if (parseFloat(item.readData[`Section${index}_MaxTemp`]) > maxValue.value) {
|
|
|
+ maxValue.value = item.readData[`Section${index}_MaxTemp`];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ warnLevels.value = posList.find((v) => v.isWarn == '报警') ? '报警' : '正常';
|
|
|
}
|
|
|
- warnLevels.value = posList.find((v) => v.isWarn == '报警') ? '报警' : '正常';
|
|
|
- }
|
|
|
+ });
|
|
|
});
|
|
|
- });
|
|
|
-
|
|
|
- return {
|
|
|
- register,
|
|
|
- model: modelRef,
|
|
|
- currentTime,
|
|
|
- handleVisibleChange,
|
|
|
- selectDevice,
|
|
|
- handleOk,
|
|
|
- handleCancel,
|
|
|
- deviceList,
|
|
|
- activeDeviceID,
|
|
|
- echatsOption,
|
|
|
- posList,
|
|
|
- posList1,
|
|
|
- chartsColumns,
|
|
|
- columns,
|
|
|
- warnLevels,
|
|
|
- maxTemp,
|
|
|
- formatNum,
|
|
|
- // warningConfig,
|
|
|
- };
|
|
|
- },
|
|
|
-});
|
|
|
+
|
|
|
+ return {
|
|
|
+ register,
|
|
|
+ model: modelRef,
|
|
|
+ currentTime,
|
|
|
+ handleVisibleChange,
|
|
|
+ selectDevice,
|
|
|
+ handleOk,
|
|
|
+ handleCancel,
|
|
|
+ deviceList,
|
|
|
+ activeDeviceID,
|
|
|
+ echatsOption,
|
|
|
+ posList,
|
|
|
+ posList1,
|
|
|
+ chartsColumns,
|
|
|
+ columns,
|
|
|
+ warnLevels,
|
|
|
+ maxValue,
|
|
|
+ formatNum,
|
|
|
+ // warningConfig,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.fiber-modal {
|
|
|
- width: 100%;
|
|
|
- height: 650px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .modal-left {
|
|
|
- width: 200px;
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
- background: #ffffff11;
|
|
|
- padding: 5px;
|
|
|
- border-radius: 5px;
|
|
|
-
|
|
|
- .active-device-title {
|
|
|
- color: aqua;
|
|
|
- }
|
|
|
+ .fiber-modal {
|
|
|
+ width: 100%;
|
|
|
+ height: 650px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .modal-left {
|
|
|
+ width: 200px;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #ffffff11;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .active-device-title {
|
|
|
+ color: aqua;
|
|
|
+ }
|
|
|
|
|
|
- .link-item {
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
- line-height: 30px;
|
|
|
- padding-left: 30px;
|
|
|
+ .link-item {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-left: 30px;
|
|
|
|
|
|
- span:hover {
|
|
|
- color: #89ffff;
|
|
|
- }
|
|
|
+ span:hover {
|
|
|
+ color: #89ffff;
|
|
|
+ }
|
|
|
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- top: 12px;
|
|
|
- left: 10px;
|
|
|
- transform: rotateZ(45deg) skew(10deg, 10deg);
|
|
|
- background: #45d3fd;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: 12px;
|
|
|
+ left: 10px;
|
|
|
+ transform: rotateZ(45deg) skew(10deg, 10deg);
|
|
|
+ background: #45d3fd;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .modal-right {
|
|
|
- width: calc(100% - 220px);
|
|
|
- overflow-y: auto;
|
|
|
-
|
|
|
- .base-title {
|
|
|
- line-height: 32px;
|
|
|
- position: relative;
|
|
|
- padding-left: 20px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 4px;
|
|
|
- height: 12px;
|
|
|
- top: 4px;
|
|
|
- left: 10px;
|
|
|
- background: #45d3fd;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .modal-right {
|
|
|
+ width: calc(100% - 220px);
|
|
|
+ overflow-y: auto;
|
|
|
|
|
|
- .right-top {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .base-title {
|
|
|
+ line-height: 32px;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 20px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 4px;
|
|
|
+ height: 12px;
|
|
|
+ top: 4px;
|
|
|
+ left: 10px;
|
|
|
+ background: #45d3fd;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .top-item {
|
|
|
- // width: 200px;
|
|
|
- width: 49%;
|
|
|
- height: 80px;
|
|
|
+ .right-top {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
- border: 1px solid rgba(25, 237, 255, 0.4);
|
|
|
- box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
|
|
|
- background: rgba(0, 0, 0, 0.06666666666666667);
|
|
|
- padding-top: 16px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-right: 10px;
|
|
|
- margin-top: 5px;
|
|
|
- color: #fdb146;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .item-container {
|
|
|
- width: 100px;
|
|
|
+ .top-item {
|
|
|
+ // width: 200px;
|
|
|
+ width: 49%;
|
|
|
+ height: 80px;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ flex-direction: row;
|
|
|
justify-content: center;
|
|
|
-
|
|
|
- div {
|
|
|
- text-align: center;
|
|
|
+ border: 1px solid rgba(25, 237, 255, 0.4);
|
|
|
+ box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
|
|
|
+ background: rgba(0, 0, 0, 0.06666666666666667);
|
|
|
+ padding-top: 16px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #fdb146;
|
|
|
}
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
+ .item-container {
|
|
|
+ width: 100px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ div {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- .value {
|
|
|
- text-shadow: 0 0 25px #00fbfe;
|
|
|
- background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
|
|
|
- font-style: normal;
|
|
|
- background-size: cover;
|
|
|
- font-family: electronicFont;
|
|
|
- font-size: 30px;
|
|
|
- -webkit-background-clip: text;
|
|
|
- background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- position: relative;
|
|
|
- top: -8px;
|
|
|
-
|
|
|
- span {
|
|
|
- font-family: Arial, Helvetica, sans-serif;
|
|
|
+ .title {
|
|
|
font-size: 18px;
|
|
|
- color: aliceblue;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ text-shadow: 0 0 25px #00fbfe;
|
|
|
+ background: linear-gradient(0deg, #45d3fd, #45d3fd, #61ddb1, #61ddb1);
|
|
|
+ font-style: normal;
|
|
|
+ background-size: cover;
|
|
|
+ font-family: electronicFont;
|
|
|
+ font-size: 30px;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ position: relative;
|
|
|
+ top: -8px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: Arial, Helvetica, sans-serif;
|
|
|
+ font-size: 18px;
|
|
|
+ color: aliceblue;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .warning-box {
|
|
|
- padding-top: 0px;
|
|
|
+ .warning-box {
|
|
|
+ padding-top: 0px;
|
|
|
|
|
|
- .icon {
|
|
|
- margin-top: 20px;
|
|
|
+ .icon {
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- .icon-style {
|
|
|
- color: #fdb146;
|
|
|
+ .icon-style {
|
|
|
+ color: #fdb146;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .warning-value {
|
|
|
- font-size: 18px;
|
|
|
- color: #61ddb1;
|
|
|
+ .warning-value {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #61ddb1;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .right-center {
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
|
|
|
- .table-box {
|
|
|
- position: relative;
|
|
|
- // width: 500px;
|
|
|
- width: 100%;
|
|
|
- height: 250px;
|
|
|
-
|
|
|
- :deep(.zxm-table-wrapper) {
|
|
|
- height: 220px !important;
|
|
|
- background: #ffffff05 !important;
|
|
|
- border-bottom: 1px solid #91e9fe80 !important;
|
|
|
+ .right-center {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .table-box {
|
|
|
+ position: relative;
|
|
|
+ // width: 500px;
|
|
|
+ width: 100%;
|
|
|
+ height: 250px;
|
|
|
+
|
|
|
+ :deep(.zxm-table-wrapper) {
|
|
|
+ height: 220px !important;
|
|
|
+ background: #ffffff05 !important;
|
|
|
+ border-bottom: 1px solid #91e9fe80 !important;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- // .warning-box {
|
|
|
- // width: calc(100% - 520px);
|
|
|
-
|
|
|
- // .warning-container {
|
|
|
- // width: 100%;
|
|
|
- // height: convert;
|
|
|
- // background: #009acd00;
|
|
|
-
|
|
|
- // :deep(.dv-scroll-board) {
|
|
|
- // .row-item {
|
|
|
- // height: 40px !important;
|
|
|
- // line-height: 40px !important;
|
|
|
- // }
|
|
|
-
|
|
|
- // .header-item {
|
|
|
- // border-top: 1px solid #91e9fe !important;
|
|
|
- // border-bottom: 1px solid #91e9fe !important;
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- // }
|
|
|
- }
|
|
|
+ // .warning-box {
|
|
|
+ // width: calc(100% - 520px);
|
|
|
+
|
|
|
+ // .warning-container {
|
|
|
+ // width: 100%;
|
|
|
+ // height: convert;
|
|
|
+ // background: #009acd00;
|
|
|
+
|
|
|
+ // :deep(.dv-scroll-board) {
|
|
|
+ // .row-item {
|
|
|
+ // height: 40px !important;
|
|
|
+ // line-height: 40px !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .header-item {
|
|
|
+ // border-top: 1px solid #91e9fe !important;
|
|
|
+ // border-bottom: 1px solid #91e9fe !important;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ }
|
|
|
|
|
|
- .right-bottom {
|
|
|
- margin-top: 20px;
|
|
|
+ .right-bottom {
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- .echarts-box {
|
|
|
- width: 100%;
|
|
|
- height: 230px;
|
|
|
+ .echarts-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 230px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.zxm-table-body) {
|
|
|
- border: 1px solid rgba(57, 232, 255, 0.2) !important;
|
|
|
+ :deep(.zxm-table-body) {
|
|
|
+ border: 1px solid rgba(57, 232, 255, 0.2) !important;
|
|
|
|
|
|
- .zxm-table-tbody>tr>td {
|
|
|
- border: none !important;
|
|
|
+ .zxm-table-tbody > tr > td {
|
|
|
+ border: none !important;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-:deep(.zxm-table-cell) {
|
|
|
- border-right: none !important;
|
|
|
-}
|
|
|
+ :deep(.zxm-table-cell) {
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
</style>
|
hongrunxia