|
@@ -1,116 +1,116 @@
|
|
|
<template>
|
|
|
- <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"
|
|
|
- >
|
|
|
- <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
|
|
|
- </div>
|
|
|
+ <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"
|
|
|
+ >
|
|
|
+ <span class="" @click="selectDevice(device.deviceID)">{{ device.strinstallpos }}</span>
|
|
|
</div>
|
|
|
- <div class="modal-right">
|
|
|
- <span class="base-title">基本信息</span>
|
|
|
- <div class="base-box">
|
|
|
- <!-- <div class="base-item">
|
|
|
+ </div>
|
|
|
+ <div class="modal-right">
|
|
|
+ <span class="base-title">基本信息</span>
|
|
|
+ <div class="base-box">
|
|
|
+ <!-- <div class="base-item">
|
|
|
<span class="title">所属区域:</span>
|
|
|
<span class="value">{{ posMonitor['beltName'] ? posMonitor['beltName'] : '-' }}</span>
|
|
|
</div> -->
|
|
|
- <div class="base-item">
|
|
|
- <span class="title">当前安装位置:</span>
|
|
|
- <span class="value">{{ posMonitor['strinstallpos'] ? posMonitor['strinstallpos'] : '-' }}</span>
|
|
|
- </div>
|
|
|
- <div class="base-item">
|
|
|
- <span class="title">停采线距离:</span>
|
|
|
- <span class="value">{{ posMonitor['initStopLine'] ? posMonitor['initStopLine'] : '-' }}</span>
|
|
|
- </div>
|
|
|
- <!-- <div class="base-item">
|
|
|
+ <div class="base-item">
|
|
|
+ <span class="title">当前安装位置:</span>
|
|
|
+ <span class="value">{{ posMonitor['strinstallpos'] ? posMonitor['strinstallpos'] : '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="base-item">
|
|
|
+ <span class="title">停采线距离:</span>
|
|
|
+ <span class="value">{{ posMonitor['initStopLine'] ? posMonitor['initStopLine'] : '-' }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="base-item">
|
|
|
<span class="title">监测区域范围:</span>
|
|
|
<span class="value"
|
|
|
>{{ posMonitor['startArea'] ? posMonitor['startArea'] : '-' }}m - {{ posMonitor['engArea'] ? posMonitor['engArea'] : '-' }}m</span
|
|
|
>
|
|
|
</div> -->
|
|
|
- <!-- <div class="base-item">
|
|
|
+ <!-- <div class="base-item">
|
|
|
<span class="title">开启温度:</span>
|
|
|
<span class="value"
|
|
|
>{{ posMonitor['tempStart'] !== undefined && posMonitor['tempStart'] !== null ? posMonitor['tempStart'] : '-' }}℃</span
|
|
|
>
|
|
|
</div> -->
|
|
|
- <!-- <div class="base-item">
|
|
|
+ <!-- <div class="base-item">
|
|
|
<span class="title">关闭温度:</span>
|
|
|
<span class="value">{{ posMonitor['tempStop'] !== undefined && posMonitor['tempStop'] !== null ? posMonitor['tempStop'] : '-' }}℃</span>
|
|
|
</div> -->
|
|
|
+ </div>
|
|
|
+ <span class="base-title">实时监测参数</span>
|
|
|
+ <div class="right-top">
|
|
|
+ <!-- 温度 -->
|
|
|
+ <div class="top-item">
|
|
|
+ <div class="icon">
|
|
|
+ <SvgIcon class="icon-style aveg-temperature" size="40" name="aveg-temperature" />
|
|
|
+ </div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="title">温度值</div>
|
|
|
+ <div class="value"
|
|
|
+ >{{ posMonitor['tempValue'] !== undefined && posMonitor['tempValue'] !== null ? posMonitor['tempValue'] : '-' }} <span>℃</span></div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <span class="base-title">实时监测参数</span>
|
|
|
- <div class="right-top">
|
|
|
- <!-- 温度 -->
|
|
|
- <div class="top-item">
|
|
|
- <div class="icon">
|
|
|
- <SvgIcon class="icon-style aveg-temperature" size="40" name="aveg-temperature" />
|
|
|
- </div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="title">温度值</div>
|
|
|
- <div class="value"
|
|
|
- >{{ posMonitor['tempValue'] !== undefined && posMonitor['tempValue'] !== null ? posMonitor['tempValue'] : '-' }} <span>℃</span></div
|
|
|
- >
|
|
|
- </div>
|
|
|
+ <div class="top-item">
|
|
|
+ <div class="icon">
|
|
|
+ <!-- <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" /> -->
|
|
|
+ <SvgIcon class="icon-style" name="pressure" size="40" />
|
|
|
</div>
|
|
|
- <div class="top-item">
|
|
|
- <div class="icon">
|
|
|
- <!-- <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" /> -->
|
|
|
- <SvgIcon class="icon-style" name="pressure" size="40" />
|
|
|
- </div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="title">设备电量值</div>
|
|
|
- <div class="value"
|
|
|
- >{{ posMonitor['quantity'] !== undefined && posMonitor['quantity'] !== null ? posMonitor['quantity'] : '-' }} <span>W</span>
|
|
|
- </div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="title">设备电量值</div>
|
|
|
+ <div class="value"
|
|
|
+ >{{ posMonitor['quantity'] !== undefined && posMonitor['quantity'] !== null ? posMonitor['quantity'] : '-' }} <span>W</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="top-item">
|
|
|
- <div class="icon">
|
|
|
- <!-- <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" /> -->
|
|
|
- <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 30px; margin-top: 10px" />
|
|
|
- </div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="title">一氧化碳值</div>
|
|
|
- <div class="value"
|
|
|
- >{{ posMonitor['coValue'] !== undefined && posMonitor['coValue'] !== null ? posMonitor['coValue'] : '-' }} <span>ppm</span></div
|
|
|
- >
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-item">
|
|
|
+ <div class="icon">
|
|
|
+ <!-- <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" /> -->
|
|
|
+ <SvgIcon class="icon-style" name="coval" style="width: 62px; height: 30px; margin-top: 10px" />
|
|
|
</div>
|
|
|
- <div class="top-item">
|
|
|
- <div class="icon">
|
|
|
- <SvgIcon class="icon-style" name="o2val" style="width: 46px; height: 42px; " />
|
|
|
- </div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="title">氧气值</div>
|
|
|
- <div class="value"
|
|
|
- >{{ posMonitor['o2Value'] !== undefined && posMonitor['o2Value'] !== null ? posMonitor['o2Value'] : '-' }} <span>%</span></div
|
|
|
- >
|
|
|
- </div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="title">一氧化碳值</div>
|
|
|
+ <div class="value"
|
|
|
+ >{{ posMonitor['coValue'] !== undefined && posMonitor['coValue'] !== null ? posMonitor['coValue'] : '-' }} <span>ppm</span></div
|
|
|
+ >
|
|
|
</div>
|
|
|
- <div class="top-item warning-box">
|
|
|
- <div class="icon">
|
|
|
- <SvgIcon class="icon-style" size="38" name="risk-level" style="margin-top: 6px" />
|
|
|
- </div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="title">通信状态</div>
|
|
|
- <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-item">
|
|
|
+ <div class="icon">
|
|
|
+ <SvgIcon class="icon-style" name="o2val" style="width: 46px; height: 42px" />
|
|
|
</div>
|
|
|
- <div class="top-item warning-box">
|
|
|
- <div class="icon">
|
|
|
- <SvgIcon class="icon-style" size="38" name="risk-level" style="margin-top: 6px" />
|
|
|
- </div>
|
|
|
- <div class="item-container">
|
|
|
- <div class="title">报警状态</div>
|
|
|
- <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
|
|
|
- </div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="title">氧气值</div>
|
|
|
+ <div class="value"
|
|
|
+ >{{ posMonitor['o2Value'] !== undefined && posMonitor['o2Value'] !== null ? posMonitor['o2Value'] : '-' }} <span>%</span></div
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-item warning-box">
|
|
|
+ <div class="icon">
|
|
|
+ <SvgIcon class="icon-style" size="38" name="risk-level" style="margin-top: 6px" />
|
|
|
+ </div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="title">通信状态</div>
|
|
|
+ <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="top-item warning-box">
|
|
|
+ <div class="icon">
|
|
|
+ <SvgIcon class="icon-style" size="38" name="risk-level" style="margin-top: 6px" />
|
|
|
+ </div>
|
|
|
+ <div class="item-container">
|
|
|
+ <div class="title">报警状态</div>
|
|
|
+ <div class="warning-value">{{ posMonitor['devicesSTAT'] == 0 ? '关闭' : posMonitor['devicesSTAT'] == 1 ? '开启' : '离线' }}</div>
|
|
|
</div>
|
|
|
- <!-- <div class="top-item item-data">
|
|
|
+ </div>
|
|
|
+ <!-- <div class="top-item item-data">
|
|
|
<div class="icon">
|
|
|
<SvgIcon class="icon-style" name="temp" style="width: 62px; height: 38px; margin-top: 10px" />
|
|
|
</div>
|
|
@@ -232,421 +232,419 @@
|
|
|
>报警阈值:<span class="rang-data">{{ posMonitor['PressureWarn'] ? posMonitor['PressureWarn'] : '-' }}</span></div
|
|
|
>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
- <div class="right-bottom">
|
|
|
- <span class="base-title">设备监测</span>
|
|
|
- <!-- <a-table size="small" :columns="ballvalveColumns" :data-source="historyList" :pagination="false" :scroll="{ y: 300 }" /> -->
|
|
|
- <div class="echarts-box">
|
|
|
- <BarAndLine
|
|
|
- class="echarts-line"
|
|
|
- xAxisPropType="time"
|
|
|
- :dataSource="historyList"
|
|
|
- height="100%"
|
|
|
- width="100%"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- :option="echatsOption"
|
|
|
- chartsType="listMonitor"
|
|
|
- />
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-bottom">
|
|
|
+ <span class="base-title">设备监测</span>
|
|
|
+ <!-- <a-table size="small" :columns="ballvalveColumns" :data-source="historyList" :pagination="false" :scroll="{ y: 300 }" /> -->
|
|
|
+ <div class="echarts-box">
|
|
|
+ <BarAndLine
|
|
|
+ class="echarts-line"
|
|
|
+ xAxisPropType="time"
|
|
|
+ :dataSource="historyList"
|
|
|
+ height="100%"
|
|
|
+ width="100%"
|
|
|
+ :chartsColumns="chartsColumns"
|
|
|
+ :option="echatsOption"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </BasicModal>
|
|
|
- </template>
|
|
|
- <script lang="ts">
|
|
|
- import { defineComponent, ref, watch, shallowRef } from 'vue';
|
|
|
- import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
- import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
- import { SvgIcon } from '/@/components/Icon';
|
|
|
- import { chartsColumnListBall } from '../device.data';
|
|
|
- import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
- import dayjs from 'dayjs';
|
|
|
- import { ballvalveColumns } from '../device.data';
|
|
|
- import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
-
|
|
|
- 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 historyList = ref<any[]>([]);
|
|
|
- const posList = ref<any[]>([]);
|
|
|
- const posMonitor = shallowRef({});
|
|
|
- const chartsColumnArr = getTableHeaderColumns('firemon_normal_chart');
|
|
|
- const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnListBall;
|
|
|
- const echatsOption = {
|
|
|
- grid: {
|
|
|
- top: '20%',
|
|
|
- left: '10',
|
|
|
- right: '65',
|
|
|
- bottom: '0',
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- toolbox: {
|
|
|
- feature: {},
|
|
|
- },
|
|
|
- };
|
|
|
-
|
|
|
- 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) {
|
|
|
+ </div>
|
|
|
+ </BasicModal>
|
|
|
+</template>
|
|
|
+<script lang="ts">
|
|
|
+ import { defineComponent, ref, watch, shallowRef } from 'vue';
|
|
|
+ import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
+ import BarAndLine from '/@/components/chart/BarAndLine.vue';
|
|
|
+ import { SvgIcon } from '/@/components/Icon';
|
|
|
+ import { chartsColumnListBall } from '../device.data';
|
|
|
+ import { Decoration7 as DvDecoration7, ScrollBoard as DvScrollBoard } from '@kjgl77/datav-vue3';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
+ import { ballvalveColumns } from '../device.data';
|
|
|
+ import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
|
|
|
+
|
|
|
+ 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 historyList = ref<any[]>([]);
|
|
|
+ const posList = ref<any[]>([]);
|
|
|
+ const posMonitor = shallowRef({});
|
|
|
+ const chartsColumnArr = getTableHeaderColumns('firemon_normal_chart');
|
|
|
+ const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnListBall;
|
|
|
+ const echatsOption = {
|
|
|
+ grid: {
|
|
|
+ top: '20%',
|
|
|
+ left: '10',
|
|
|
+ right: '65',
|
|
|
+ bottom: '0',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {},
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ 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);
|
|
|
+ }, 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);
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleOk(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleCancel(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ closeModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ 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);
|
|
|
+ historyList.value = item['history'];
|
|
|
+ }
|
|
|
+ item.readTime = item.readTime?.substring(11);
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ return {
|
|
|
+ register,
|
|
|
+ model: modelRef,
|
|
|
+ currentTime,
|
|
|
+ handleVisibleChange,
|
|
|
+ selectDevice,
|
|
|
+ handleOk,
|
|
|
+ handleCancel,
|
|
|
+ ballvalveColumns,
|
|
|
+ deviceList,
|
|
|
+ historyList,
|
|
|
+ activeDeviceID,
|
|
|
+ posMonitor,
|
|
|
+ echatsOption,
|
|
|
+ chartsColumnListBall,
|
|
|
+ chartsColumns,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
+</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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link-item {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 30px;
|
|
|
+ padding-left: 30px;
|
|
|
+
|
|
|
+ span:hover {
|
|
|
+ color: #89ffff;
|
|
|
}
|
|
|
-
|
|
|
- function handleCancel(e) {
|
|
|
- e.preventDefault();
|
|
|
- closeModal();
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ top: 12px;
|
|
|
+ left: 10px;
|
|
|
+ transform: rotateZ(45deg) skew(10deg, 10deg);
|
|
|
+ background: #45d3fd;
|
|
|
}
|
|
|
-
|
|
|
- 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);
|
|
|
- historyList.value = item['history'];
|
|
|
- }
|
|
|
- item.readTime = item.readTime?.substring(11);
|
|
|
- return item;
|
|
|
- });
|
|
|
- });
|
|
|
-
|
|
|
- return {
|
|
|
- register,
|
|
|
- model: modelRef,
|
|
|
- currentTime,
|
|
|
- handleVisibleChange,
|
|
|
- selectDevice,
|
|
|
- handleOk,
|
|
|
- handleCancel,
|
|
|
- ballvalveColumns,
|
|
|
- deviceList,
|
|
|
- historyList,
|
|
|
- activeDeviceID,
|
|
|
- posMonitor,
|
|
|
- echatsOption,
|
|
|
- chartsColumnListBall,
|
|
|
- chartsColumns,
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
- </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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
}
|
|
|
-
|
|
|
- .link-item {
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-box {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100px;
|
|
|
+ height: 65px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border: 1px solid rgba(25, 237, 255, 0.4);
|
|
|
+ box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
|
|
|
+ background: rgba(0, 0, 0, 0.06666666666666667);
|
|
|
+ padding: 15px 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .base-item {
|
|
|
+ width: 33%;
|
|
|
line-height: 30px;
|
|
|
- padding-left: 30px;
|
|
|
-
|
|
|
- span:hover {
|
|
|
- color: #89ffff;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- display: block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- top: 12px;
|
|
|
- left: 10px;
|
|
|
- transform: rotateZ(45deg) skew(10deg, 10deg);
|
|
|
- background: #45d3fd;
|
|
|
+ .title {
|
|
|
+ width: 120px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
+ .value {
|
|
|
+ width: 150px;
|
|
|
+ text-overflow: ellipsis;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .base-box {
|
|
|
- width: 100%;
|
|
|
- // height: 100px;
|
|
|
- height: 65px;
|
|
|
- font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-top {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .top-item {
|
|
|
+ width: 220px;
|
|
|
+ height: 100px;
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
border: 1px solid rgba(25, 237, 255, 0.4);
|
|
|
- box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.3);
|
|
|
+ box-shadow: inset 0 0 10px rgba(0, 197, 255, 0.6);
|
|
|
background: rgba(0, 0, 0, 0.06666666666666667);
|
|
|
- padding: 15px 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
- .base-item {
|
|
|
- width: 33%;
|
|
|
- line-height: 30px;
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 120px;
|
|
|
- }
|
|
|
- .value {
|
|
|
- width: 150px;
|
|
|
- text-overflow: ellipsis;
|
|
|
- }
|
|
|
+ padding-top: 20px;
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #fdb146;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .right-top {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-bottom: 10px;
|
|
|
- .top-item {
|
|
|
- width: 220px;
|
|
|
- height: 100px;
|
|
|
+
|
|
|
+ .item-container {
|
|
|
+ width: 100px;
|
|
|
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;
|
|
|
+
|
|
|
+ div {
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
-
|
|
|
- .item-container {
|
|
|
- width: 100px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- div {
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
-
|
|
|
- .title {
|
|
|
+
|
|
|
+ .title {
|
|
|
+ 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;
|
|
|
}
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- .alarm-value {
|
|
|
- text-shadow: 0 0 25px #fe1500;
|
|
|
- background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
|
|
|
- -webkit-background-clip: text;
|
|
|
- background-clip: text;
|
|
|
- -webkit-text-fill-color: transparent;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .alarm-value {
|
|
|
+ text-shadow: 0 0 25px #fe1500;
|
|
|
+ background: linear-gradient(0deg, #fd4545, #fd5e45, #dd7461, #dd6161);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
}
|
|
|
- .item-data {
|
|
|
- position: relative;
|
|
|
- height: 120px;
|
|
|
- padding-top: 0;
|
|
|
- .icon {
|
|
|
- position: absolute;
|
|
|
- left: 20px;
|
|
|
- top: 25px;
|
|
|
- // margin-right: 30px;
|
|
|
- // margin-top: 25px;
|
|
|
+ }
|
|
|
+ .item-data {
|
|
|
+ position: relative;
|
|
|
+ height: 120px;
|
|
|
+ padding-top: 0;
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ top: 25px;
|
|
|
+ // margin-right: 30px;
|
|
|
+ // margin-top: 25px;
|
|
|
+ }
|
|
|
+ .item-container {
|
|
|
+ width: 140px;
|
|
|
+ position: absolute;
|
|
|
+ padding-top: 15px;
|
|
|
+ justify-content: flex-start;
|
|
|
+ right: 0;
|
|
|
+ .value {
|
|
|
+ top: 0px;
|
|
|
}
|
|
|
- .item-container {
|
|
|
- width: 140px;
|
|
|
- position: absolute;
|
|
|
- padding-top: 15px;
|
|
|
- justify-content: flex-start;
|
|
|
- right: 0;
|
|
|
- .value {
|
|
|
- top: 0px;
|
|
|
- }
|
|
|
- .state-close {
|
|
|
- color: #b9b9b9;
|
|
|
- }
|
|
|
- .state-open {
|
|
|
- color: #00ff88;
|
|
|
- }
|
|
|
- .state-offline {
|
|
|
- color: #ffd000;
|
|
|
- }
|
|
|
+ .state-close {
|
|
|
+ color: #b9b9b9;
|
|
|
}
|
|
|
- .rang {
|
|
|
- position: absolute;
|
|
|
- color: #ff8331;
|
|
|
- bottom: 10px;
|
|
|
- right: 20px;
|
|
|
- .rang-data {
|
|
|
- padding: 0 5px;
|
|
|
- }
|
|
|
+ .state-open {
|
|
|
+ color: #00ff88;
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .warning-box {
|
|
|
- padding-top: 0px;
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-top: 20px;
|
|
|
-
|
|
|
- :deep(.icon-style) {
|
|
|
- width: auto;
|
|
|
- color: #fdb146;
|
|
|
- }
|
|
|
+ .state-offline {
|
|
|
+ color: #ffd000;
|
|
|
}
|
|
|
-
|
|
|
- .warning-value {
|
|
|
- font-size: 18px;
|
|
|
- color: #61ddb1;
|
|
|
+ }
|
|
|
+ .rang {
|
|
|
+ position: absolute;
|
|
|
+ color: #ff8331;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 20px;
|
|
|
+ .rang-data {
|
|
|
+ padding: 0 5px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .right-center {
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- .table-box {
|
|
|
- position: relative;
|
|
|
- width: 500px;
|
|
|
- height: 250px;
|
|
|
- }
|
|
|
-
|
|
|
- .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: 35px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .header-item {
|
|
|
- border-top: 1px solid #91e9fe !important;
|
|
|
- border-bottom: 1px solid #91e9fe !important;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .warning-box {
|
|
|
+ padding-top: 0px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ :deep(.icon-style) {
|
|
|
+ width: auto;
|
|
|
+ color: #fdb146;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .warning-value {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #61ddb1;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .right-bottom {
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .echarts-box {
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-center {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .table-box {
|
|
|
+ position: relative;
|
|
|
+ width: 500px;
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .warning-box {
|
|
|
+ width: calc(100% - 520px);
|
|
|
+
|
|
|
+ .warning-container {
|
|
|
width: 100%;
|
|
|
- height: 180px;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .echarts-line {
|
|
|
- width: calc(100% + 80px);
|
|
|
- position: absolute;
|
|
|
+ height: convert;
|
|
|
+ background: #009acd00;
|
|
|
+
|
|
|
+ :deep(.dv-scroll-board) {
|
|
|
+ .row-item {
|
|
|
+ height: 40px !important;
|
|
|
+ line-height: 35px !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;
|
|
|
-
|
|
|
- .zxm-table-tbody > tr > td {
|
|
|
- border: none !important;
|
|
|
+
|
|
|
+ .right-bottom {
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .echarts-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 180px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .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;
|
|
|
}
|
|
|
- </style>
|
|
|
-
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.zxm-table-cell) {
|
|
|
+ border-right: none !important;
|
|
|
+ }
|
|
|
+</style>
|