|
|
@@ -1,21 +1,10 @@
|
|
|
<template>
|
|
|
- <BasicModal
|
|
|
- v-bind="$attrs"
|
|
|
- @register="register"
|
|
|
- :title="`束管监测详情 ${currentTime}`"
|
|
|
- width="1200px"
|
|
|
- @ok="handleOk"
|
|
|
- @cancel="handleCancel"
|
|
|
- wrapClassName="bundle-modal"
|
|
|
- >
|
|
|
+ <BasicModal v-bind="$attrs" @register="register" :title="`束管监测详情 ${currentTime}`" width="1200px" @ok="handleOk"
|
|
|
+ @cancel="handleCancel" wrapClassName="bundle-modal">
|
|
|
<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>
|
|
|
@@ -28,7 +17,8 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">一氧化碳</div>
|
|
|
- <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-' }} <span>ppm</span> </div>
|
|
|
+ <div class="value">{{ posMonitor.coval !== undefined && posMonitor.coval !== null ? posMonitor.coval : '-'
|
|
|
+ }} <span>ppm</span> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item">
|
|
|
@@ -37,7 +27,8 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">二氧化碳</div>
|
|
|
- <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val : '-' }} <span>%</span></div>
|
|
|
+ <div class="value">{{ posMonitor.co2val !== undefined && posMonitor.co2val !== null ? posMonitor.co2val :
|
|
|
+ '-' }} <span>%</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item">
|
|
|
@@ -46,7 +37,8 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">甲烷</div>
|
|
|
- <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval : '-' }} <span>%</span></div>
|
|
|
+ <div class="value">{{ posMonitor.gasval !== undefined && posMonitor.gasval !== null ? posMonitor.gasval :
|
|
|
+ '-' }} <span>%</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item">
|
|
|
@@ -55,7 +47,8 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">乙烯</div>
|
|
|
- <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val : '-' }} <span>ppm</span></div>
|
|
|
+ <div class="value">{{ posMonitor.ch2val !== undefined && posMonitor.ch2val !== null ? posMonitor.ch2val :
|
|
|
+ '-' }} <span>ppm</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item">
|
|
|
@@ -64,7 +57,8 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">乙炔</div>
|
|
|
- <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-' }} <span>ppm</span></div>
|
|
|
+ <div class="value">{{ posMonitor.chval !== undefined && posMonitor.chval !== null ? posMonitor.chval : '-'
|
|
|
+ }} <span>ppm</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item">
|
|
|
@@ -73,7 +67,8 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">氧气</div>
|
|
|
- <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-' }} <span>%</span></div>
|
|
|
+ <div class="value">{{ posMonitor.o2val !== undefined && posMonitor.o2val !== null ? posMonitor.o2val : '-'
|
|
|
+ }} <span>%</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item warning-box">
|
|
|
@@ -82,7 +77,20 @@
|
|
|
</div>
|
|
|
<div class="item-container">
|
|
|
<div class="title">风险等级</div>
|
|
|
- <div class="warning-value">{{ posMonitor['warnLevel_str'] ? posMonitor['warnLevel_str'] : '-' }}</div>
|
|
|
+ <div :class="{
|
|
|
+ value1: posMonitor['internalFireWarnLevel'] == '1',
|
|
|
+ value2: posMonitor['internalFireWarnLevel'] == '2',
|
|
|
+ value3: posMonitor['internalFireWarnLevel'] == '3',
|
|
|
+ value4: posMonitor['internalFireWarnLevel'] == '4',
|
|
|
+ value5: posMonitor['internalFireWarnLevel'] == '5',
|
|
|
+ value6: posMonitor['internalFireWarnLevel'] == '6',
|
|
|
+ }">{{ posMonitor['internalFireWarnLevel'] == '1' ? '正常' : posMonitor['internalFireWarnLevel'] == '2' ?
|
|
|
+ '低风险' :
|
|
|
+ posMonitor['internalFireWarnLevel'] == '3' ? '一般风险' : posMonitor['internalFireWarnLevel'] == '4' ?
|
|
|
+ '较高风险' :
|
|
|
+ posMonitor['internalFireWarnLevel'] == '5' ? '高风险' : posMonitor['internalFireWarnLevel'] == '6' ? '报警' :
|
|
|
+ '-'
|
|
|
+ }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="top-item warning-box">
|
|
|
@@ -96,20 +104,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right-bottom">
|
|
|
- <span class="base-title"
|
|
|
- >设备监测曲线 <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' : '' }}</span></span
|
|
|
- >
|
|
|
+ <span class="base-title">设备监测曲线 <span style="color: red">{{ posMonitor['netStatus'] != 1 ? '(设备未连接)' :
|
|
|
+ '' }}</span></span>
|
|
|
<div class="echarts-box">
|
|
|
- <BarAndLine
|
|
|
- class="echarts-line"
|
|
|
- :xAxisPropType="xAxisPropType"
|
|
|
- :dataSource="historyList"
|
|
|
- height="100%"
|
|
|
- width="65%"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- :option="echatsOption"
|
|
|
- chartsType="listMonitor"
|
|
|
- />
|
|
|
+ <BarAndLine class="echarts-line" :xAxisPropType="xAxisPropType" :dataSource="historyList" height="100%"
|
|
|
+ width="65%" :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
|
|
|
|
|
|
<!-- 爆炸三角形 -->
|
|
|
<div style="width: 35%; height: 100%; margin: 0px auto">
|
|
|
@@ -122,397 +121,426 @@
|
|
|
</BasicModal>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
|
|
|
- import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import blastDelta from './blastDelta.vue';
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- import dayjs from 'dayjs';
|
|
|
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
- import { chartsColumnList } from '../device.data';
|
|
|
- import { listdays, getHistoryData } from '../device.api';
|
|
|
-
|
|
|
- export default defineComponent({
|
|
|
- components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
|
|
|
- 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 historyList = ref<any[]>([]);
|
|
|
- const posList = ref<any[]>([]);
|
|
|
- const posMonitor = shallowRef({});
|
|
|
-
|
|
|
- const echatsOption = {
|
|
|
- grid: {
|
|
|
- top: '29%',
|
|
|
- left: '3',
|
|
|
- right: '45',
|
|
|
- bottom: '3%',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
|
|
|
- const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
|
|
|
- const xAxisPropType = ref('ttime');
|
|
|
- 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) {
|
|
|
+import { defineComponent, ref, watch, shallowRef, onMounted } from 'vue';
|
|
|
+import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+import blastDelta from './blastDelta.vue';
|
|
|
+import { SvgIcon } from '/@/components/Icon';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+import { chartsColumnList } from '../device.data';
|
|
|
+import { listdays, getHistoryData } from '../device.api';
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ components: { BasicModal, BarAndLine, SvgIcon, blastDelta },
|
|
|
+ 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 historyList = ref<any[]>([]);
|
|
|
+ const posList = ref<any[]>([]);
|
|
|
+ const posMonitor = shallowRef({});
|
|
|
+
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '29%',
|
|
|
+ left: '3',
|
|
|
+ right: '45',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
|
|
|
+ const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
|
|
|
+ const xAxisPropType = ref('ttime');
|
|
|
+ const [register, { setModalProps, closeModal }] = useModalInner();
|
|
|
+
|
|
|
+ function handleVisibleChange(visible) {
|
|
|
+ if (visible) {
|
|
|
loading.value = true;
|
|
|
setModalProps({ loading: true, confirmLoading: true });
|
|
|
+
|
|
|
setTimeout(() => {
|
|
|
loading.value = false;
|
|
|
- activeDeviceID.value = id;
|
|
|
setModalProps({ loading: false, confirmLoading: false });
|
|
|
- }, 300);
|
|
|
- getListdays();
|
|
|
+ }, 1000);
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- function handleOk(e) {
|
|
|
- e.preventDefault();
|
|
|
- closeModal();
|
|
|
- }
|
|
|
+ // 选择监测
|
|
|
+ function selectDevice(id) {
|
|
|
+ loading.value = true;
|
|
|
+ setModalProps({ loading: true, confirmLoading: true });
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ activeDeviceID.value = id;
|
|
|
+ setModalProps({ loading: false, confirmLoading: false });
|
|
|
+ }, 300);
|
|
|
+ getListdays();
|
|
|
+ }
|
|
|
|
|
|
- function handleCancel(e) {
|
|
|
- e.preventDefault();
|
|
|
- closeModal();
|
|
|
- }
|
|
|
+ function handleOk(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleCancel(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
|
|
|
- //获取历史数据
|
|
|
- async function getListdays() {
|
|
|
- if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
|
|
|
- xAxisPropType.value = 'ttime';
|
|
|
- const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
|
|
|
- const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
- const pageNo = 1;
|
|
|
- const pageSize = 100;
|
|
|
- const skip = 8;
|
|
|
- const strtype = posMonitor.value.deviceType;
|
|
|
- let res = await listdays({
|
|
|
- ttime_begin,
|
|
|
- ttime_end,
|
|
|
- pageNo,
|
|
|
- pageSize,
|
|
|
- skip,
|
|
|
- strtype,
|
|
|
- column: 'createTime',
|
|
|
- gdeviceid: activeDeviceID.value,
|
|
|
+ //获取历史数据
|
|
|
+ async function getListdays() {
|
|
|
+ if (posMonitor.value.stationtype && posMonitor.value.stationtype != 'redis') {
|
|
|
+ xAxisPropType.value = 'ttime';
|
|
|
+ const ttime_begin = dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ const ttime_end = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
|
|
+ const pageNo = 1;
|
|
|
+ const pageSize = 100;
|
|
|
+ const skip = 8;
|
|
|
+ const strtype = posMonitor.value.deviceType;
|
|
|
+ let res = await listdays({
|
|
|
+ ttime_begin,
|
|
|
+ ttime_end,
|
|
|
+ pageNo,
|
|
|
+ pageSize,
|
|
|
+ skip,
|
|
|
+ strtype,
|
|
|
+ column: 'createTime',
|
|
|
+ gdeviceid: activeDeviceID.value,
|
|
|
+ });
|
|
|
+ console.log(res, '束管历史数据');
|
|
|
+ let data = res.datalist.records;
|
|
|
+ if (data.length != 0) {
|
|
|
+ data.forEach((el) => {
|
|
|
+ Object.assign(el, el.readData);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ historyList.value = data;
|
|
|
+ } else {
|
|
|
+ const params = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 100,
|
|
|
+ startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ deviceId: activeDeviceID.value,
|
|
|
+ interval: '1h',
|
|
|
+ isEmployee: true,
|
|
|
+ };
|
|
|
+ xAxisPropType.value = 'time';
|
|
|
+ const result = await getHistoryData({ ...params });
|
|
|
+ if (result['records'].length != 0) {
|
|
|
+ result['records'].forEach((el) => {
|
|
|
+ el.ch2val = el.C2H4;
|
|
|
+ el.chval = el.C2H2;
|
|
|
+ el.co2val = el.CO2;
|
|
|
+ el.coval = el.CO;
|
|
|
+ el.gasval = el.CH4;
|
|
|
+ el.o2val = el.O2;
|
|
|
});
|
|
|
- console.log(res, '束管历史数据');
|
|
|
- let data = res.datalist.records;
|
|
|
- if (data.length != 0) {
|
|
|
- data.forEach((el) => {
|
|
|
- Object.assign(el, el.readData);
|
|
|
- });
|
|
|
- }
|
|
|
- historyList.value = data;
|
|
|
- } else {
|
|
|
- const params = {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 100,
|
|
|
- startTime: dayjs(new Date().getTime() - 3 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- endTime: dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
- deviceId: activeDeviceID.value,
|
|
|
- interval: '1h',
|
|
|
- isEmployee: true,
|
|
|
- };
|
|
|
- xAxisPropType.value = 'time';
|
|
|
- const result = await getHistoryData({ ...params });
|
|
|
- if (result['records'].length != 0) {
|
|
|
- result['records'].forEach((el) => {
|
|
|
- el.ch2val = el.C2H4;
|
|
|
- el.chval = el.C2H2;
|
|
|
- el.co2val = el.CO2;
|
|
|
- el.coval = el.CO;
|
|
|
- el.gasval = el.CH4;
|
|
|
- el.o2val = el.O2;
|
|
|
- });
|
|
|
- }
|
|
|
- historyList.value = result['records'];
|
|
|
}
|
|
|
+ historyList.value = result['records'];
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- watch(
|
|
|
- [() => props.dataSource, () => props.activeID],
|
|
|
- ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
|
|
|
- // if (newActiveID != oldActiveID) {
|
|
|
- // activeDeviceID.value = newActiveID as string;
|
|
|
- // }
|
|
|
- activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
|
|
|
- deviceList.value = newDataSource?.filter((item: any, index) => {
|
|
|
- if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
|
|
|
- // activeDeviceID.value = item.deviceID;
|
|
|
- posMonitor.value = Object.assign(item, item.readData);
|
|
|
- }
|
|
|
- item.readTime = item.readTime?.substring(11);
|
|
|
- return item;
|
|
|
- });
|
|
|
- debugger;
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
- );
|
|
|
- onMounted(() => {
|
|
|
- getListdays();
|
|
|
- });
|
|
|
- return {
|
|
|
- register,
|
|
|
- model: modelRef,
|
|
|
- currentTime,
|
|
|
- handleVisibleChange,
|
|
|
- selectDevice,
|
|
|
- handleOk,
|
|
|
- handleCancel,
|
|
|
- deviceList,
|
|
|
- historyList,
|
|
|
- activeDeviceID,
|
|
|
- posMonitor,
|
|
|
- echatsOption,
|
|
|
- posList,
|
|
|
- chartsColumns,
|
|
|
- xAxisPropType,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
+ watch(
|
|
|
+ [() => props.dataSource, () => props.activeID],
|
|
|
+ ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
|
|
|
+ // if (newActiveID != oldActiveID) {
|
|
|
+ // activeDeviceID.value = newActiveID as string;
|
|
|
+ // }
|
|
|
+ activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
|
|
|
+ deviceList.value = newDataSource?.filter((item: any, index) => {
|
|
|
+ if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
|
|
|
+ // activeDeviceID.value = item.deviceID;
|
|
|
+ posMonitor.value = Object.assign(item, item.readData);
|
|
|
+ }
|
|
|
+ item.readTime = item.readTime?.substring(11);
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+ onMounted(() => {
|
|
|
+ getListdays();
|
|
|
+ });
|
|
|
+ return {
|
|
|
+ register,
|
|
|
+ model: modelRef,
|
|
|
+ currentTime,
|
|
|
+ handleVisibleChange,
|
|
|
+ selectDevice,
|
|
|
+ handleOk,
|
|
|
+ handleCancel,
|
|
|
+ deviceList,
|
|
|
+ historyList,
|
|
|
+ activeDeviceID,
|
|
|
+ posMonitor,
|
|
|
+ echatsOption,
|
|
|
+ posList,
|
|
|
+ chartsColumns,
|
|
|
+ xAxisPropType,
|
|
|
+ };
|
|
|
+ },
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
- .bundle-modal {
|
|
|
- .zxm-modal {
|
|
|
- top: 30px !important;
|
|
|
- }
|
|
|
+.bundle-modal {
|
|
|
+ .zxm-modal {
|
|
|
+ top: 30px !important;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
|
|
|
|
|
<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;
|
|
|
+
|
|
|
+ .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;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- .right-top {
|
|
|
+ .top-item {
|
|
|
+ width: 220px;
|
|
|
+ height: 100px;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-bottom: 10px;
|
|
|
+ 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: 20px;
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #fdb146;
|
|
|
+ }
|
|
|
|
|
|
- .top-item {
|
|
|
- width: 220px;
|
|
|
- height: 100px;
|
|
|
+ .item-container {
|
|
|
+ width: 110px;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
+ flex-direction: column;
|
|
|
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: 20px;
|
|
|
- margin: 10px 0;
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-right: 10px;
|
|
|
- margin-top: 5px;
|
|
|
- color: #fdb146;
|
|
|
- }
|
|
|
|
|
|
- .item-container {
|
|
|
- width: 110px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
+ div {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
- div {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
|
|
|
- .title {
|
|
|
+ .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;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
+ color: aliceblue;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .warning-box {
|
|
|
- padding-top: 0px;
|
|
|
+ .warning-box {
|
|
|
+ padding-top: 0px;
|
|
|
|
|
|
- .icon {
|
|
|
- margin-top: 20px;
|
|
|
+ .icon {
|
|
|
+ margin-top: 20px;
|
|
|
|
|
|
- :deep(.icon-style) {
|
|
|
- width: auto;
|
|
|
- color: #fdb146;
|
|
|
- }
|
|
|
+ :deep(.icon-style) {
|
|
|
+ width: auto;
|
|
|
+ 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;
|
|
|
+ .value1 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgb(145, 230, 9) !important;
|
|
|
+ }
|
|
|
|
|
|
- .table-box {
|
|
|
- position: relative;
|
|
|
- width: 500px;
|
|
|
- height: 250px;
|
|
|
+ .value2 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: rgb(0, 242, 255) !important;
|
|
|
}
|
|
|
|
|
|
- .warning-box {
|
|
|
- width: calc(100% - 520px);
|
|
|
+ .value3 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ffff35 !important;
|
|
|
+ }
|
|
|
|
|
|
- .warning-container {
|
|
|
- width: 100%;
|
|
|
- height: convert;
|
|
|
- background: #009acd00;
|
|
|
+ .value4 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ffbe69 !important;
|
|
|
+ }
|
|
|
|
|
|
- :deep(.dv-scroll-board) {
|
|
|
- .row-item {
|
|
|
- height: 40px !important;
|
|
|
- line-height: 40px !important;
|
|
|
- }
|
|
|
+ .value5 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ff6f00 !important;
|
|
|
+ }
|
|
|
|
|
|
- .header-item {
|
|
|
- border-top: 1px solid #91e9fe !important;
|
|
|
- border-bottom: 1px solid #91e9fe !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .value6 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ff0000 !important;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-center {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .table-box {
|
|
|
+ position: relative;
|
|
|
+ width: 500px;
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
|
|
|
- .right-bottom {
|
|
|
- margin-top: 20px;
|
|
|
+ .warning-box {
|
|
|
+ width: calc(100% - 520px);
|
|
|
|
|
|
- .echarts-box {
|
|
|
+ .warning-container {
|
|
|
width: 100%;
|
|
|
- height: 320px;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ height: convert;
|
|
|
+ background: #009acd00;
|
|
|
|
|
|
- .echarts-line {
|
|
|
- width: calc(100% + 80px);
|
|
|
- position: absolute;
|
|
|
+ :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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- :deep(.zxm-table-body) {
|
|
|
- border: 1px solid rgba(57, 232, 255, 0.2) !important;
|
|
|
+ .right-bottom {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .echarts-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 320px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
|
|
|
- .zxm-table-tbody > tr > td {
|
|
|
- border: none !important;
|
|
|
+ .echarts-line {
|
|
|
+ width: calc(100% + 80px);
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- :deep(.zxm-table-cell) {
|
|
|
- border-right: none !important;
|
|
|
+:deep(.zxm-table-body) {
|
|
|
+ border: 1px solid rgba(57, 232, 255, 0.2) !important;
|
|
|
+
|
|
|
+ .zxm-table-tbody>tr>td {
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+:deep(.zxm-table-cell) {
|
|
|
+ border-right: none !important;
|
|
|
+}
|
|
|
</style>
|
