Browse Source

上湾光钎测温修改

lxh 2 months ago
parent
commit
9fb87a4138

+ 4 - 4
.env.development

@@ -6,8 +6,8 @@ VITE_PUBLIC_PATH = /
 
 # 跨域代理,您可以配置多个 ,请注意,没有换行符
 #VITE_PROXY = [["/jeecgboot","http://localhost:8080/jeecg-boot"],["/upload","http://localhost:3300/upload"]]
-# VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"]]
-VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
+VITE_PROXY = [["/jeecgsystem","http://182.92.126.35:9999"],["/upload","http://182.92.126.35:9999/upload"],["/documents", "http://182.92.126.35:9050"],["/modelreq", "http://182.92.126.35:9999"],["/webRtc", "http://182.92.126.35:8051"]]
+# VITE_PROXY = [["/jeecgsystem","http://192.168.183.88:9999"],["/upload","http://192.168.183.88:9999/upload"],["/documents", "http://192.168.183.88:9050"],["/modelreq", "http://192.168.183.88:9999"],["/webRtc", "http://192.168.183.88:8051"]]
 # VITE_PROXY = [["/jeecgsystem","http://10.10.150.72:9999"],["/upload","http://localhost:3300/upload"],["/documents", "http://10.10.150.72:9050"],["/modelreq", "http://10.10.150.72:9999"],["/webRtc", "http://192.168.183.216:8051"]]
 #VITE_PROXY = [["/jeecgsystem","http://192.168.1.8:9999"],["/upload","http://localhost:3300/upload"]]
 
@@ -30,6 +30,6 @@ VITE_GLOB_API_URL_PREFIX=
 #微前端qiankun应用,命名必须以VITE_APP_SUB_开头,jeecg-app-1为子应用的项目名称,也是子应用的路由父路径
 #VITE_APP_SUB_APP = [["micro-need-air", "//10.10.150.72:8099/"], ["micro-vent-3dModal", "//localhost:8091/"], ["micro-fire-front", "//localhost:8090/"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.88:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
-# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
+# VITE_APP_SUB_APP = [["micro-vent-3dModal", "//192.168.183.154:8091/", "micro-vent-3dModal"], ["micro-need-air", "//192.168.183.88:8093/", "micro-need-air"], ["micro-fire-front", "//localhost:8097/", "fire-Micro"]]
+VITE_APP_SUB_APP = [["micro-vent-3dModal", "//182.92.126.35:8091/", "micro-vent-3dModal"], ["micro-need-air", "//182.92.126.35:8099/", "micro-need-air"], ["micro-fire-front", "//182.92.126.35:8097/", "fire-Micro"]]
 # VITE_APP_SUB_APP = [["micro-vent-3dModal", "//localhost:8091/"], ["micro-need-air", "//localhost:8099/"], ["micro-fire-front", "//localhost:8090/"]]

+ 2 - 1
src/views/vent/monitorManager/deviceMonitor/components/device/device.data.ts

@@ -66,7 +66,8 @@ export function getMonitorComponent() {
       FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal-Gx.vue'));
       break;
     default:
-      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
+      FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.sw.vue'));
+      // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal-Gx.vue'));
     // FiberModal = defineAsyncComponent(() => import('./modal/fiber.modal.cct.vue'));
   }

+ 384 - 0
src/views/vent/monitorManager/deviceMonitor/components/device/modal/fiber.modal.sw.vue

@@ -0,0 +1,384 @@
+<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>
+            </div>
+            <div class="modal-right">
+                <div class="right-top">
+                    <div class="top-item">
+                        <div class="icon">
+                            <SvgIcon class="icon-style max-temperature" size="38" name="max-temperature" />
+                        </div>
+                        <div class="item-container">
+                            <div class="title">最高温度</div>
+                            <div class="value">{{ posMonitor.fmax || '--' }} <span>℃</span> </div>
+                        </div>
+                    </div>
+                    <div class="top-item">
+                        <div class="icon">
+                            <SvgIcon class="icon-style min-temperature" size="38" name="min-temperature" />
+                        </div>
+                        <div class="item-container">
+                            <div class="title">最低温度</div>
+                            <div class="value">{{ posMonitor.fmin || '--' }} <span>℃</span></div>
+                        </div>
+                    </div>
+                    <div class="top-item">
+                        <div class="icon">
+                            <SvgIcon class="icon-style aveg-temperature" size="38" name="aveg-temperature" />
+                        </div>
+                        <div class="item-container">
+                            <div class="title">平均温度</div>
+                            <div class="value">{{ posMonitor.favg || '--' }} <span>℃</span></div>
+                        </div>
+                    </div>
+                    <div class="top-item warning-box">
+                        <div class="icon">
+                            <SvgIcon class="icon-style" size="38" name="risk-level" />
+                        </div>
+                        <div class="item-container">
+                            <div class="title">风险等级</div>
+                            <div class="warning-value">低风险</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="right-bottom">
+                    <span class="base-title">测点监测曲线</span>
+                    <div class="echarts-box">
+                        <BarAndLine xAxisPropType="pos" :dataSource="posList" height="100%"
+                            :chartsColumns="chartsColumns" :option="echatsOption" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </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';
+
+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<any>('');
+        const deviceList = ref<any[]>([]);
+        // const posList = reactive<any[]>([]);
+        const posList = ref<any[]>([]);
+        const posMonitor = shallowRef({});
+
+        const echatsOption = {
+            grid: {
+                top: '10%',
+                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 [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 });
+            }, 300);
+        }
+
+        function handleOk(e) {
+            e.preventDefault();
+            closeModal();
+        }
+
+        function handleCancel(e) {
+            e.preventDefault();
+            closeModal();
+        }
+
+        watch([() => props.dataSource, () => props.activeID], ([newDataSource, newActiveID], [oldDataSource, oldActiveID]) => {
+            console.log(newDataSource, 'newDataSource--------------');
+            deviceList.value = newDataSource as any[];
+            activeDeviceID.value = activeDeviceID.value ? activeDeviceID.value : newActiveID;
+            newDataSource?.forEach((item: any, index) => {
+                if ((!activeDeviceID.value && index == 0) || item.deviceID === activeDeviceID.value) {
+                    posMonitor.value = item.readData;
+                    posList.value = JSON.parse(item.readData.fibreTemperature)
+                }
+            });
+        });
+
+        return {
+            register,
+            model: modelRef,
+            currentTime,
+            handleVisibleChange,
+            selectDevice,
+            handleOk,
+            handleCancel,
+            deviceList,
+            activeDeviceID,
+            posMonitor,
+            echatsOption,
+            chartsColumns,
+            posList
+        };
+    },
+});
+</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;
+            }
+
+            &::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;
+            }
+        }
+
+        .right-top {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            margin-bottom: 10px;
+
+            .top-item {
+                width: 200px;
+                height: 80px;
+                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;
+                }
+
+                .item-container {
+                    width: 100px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+
+                    div {
+                        text-align: center;
+                    }
+
+                    .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;
+                        }
+                    }
+                }
+            }
+
+            .warning-box {
+                padding-top: 0px;
+
+                .icon {
+                    margin-top: 20px;
+
+                    .icon-style {
+                        color: #fdb146;
+                    }
+                }
+
+                .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;
+        //     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;
+        //         }
+        //       }
+        //     }
+        //   }
+        // }
+
+        .right-bottom {
+            margin-top: 20px;
+            height: calc(100% - 100px);
+
+            .echarts-box {
+                width: 100%;
+                height: calc(100% - 32px);
+            }
+        }
+    }
+}
+
+: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>