文件审批-流程轨迹图片大小修改-提交

src/views/vent/monitorManager/deviceMonitor/components/device/modal/blastDelta.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="blastDelta" >
+        <div class="coord"></div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactice} from 'vue'
+
+
+
+</script>
+
+<style lang="less" scoped>
+.blastDelta {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .coord {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 90%;
+        height: 80%;
+        border-left: 1px solid #0079ff;
+        border-bottom: 1px solid #0079ff;
+        transform: translate(-50%, -50%)
+    }
+}
+</style>

src/views/vent/monitorManager/deviceMonitor/components/device/modal/bundle.modal.vue

@@ -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">
@@ -98,15 +93,12 @@
         <div class="right-bottom">
           <span class="base-title">设备监测曲线</span>
           <div class="echarts-box">
-            <BarAndLine
-              class="echarts-line"
-              xAxisPropType="time"
-              :dataSource="historyList"
-              height="100%"
-              :chartsColumns="chartsColumns"
-              :option="echatsOption"
-              chartsType="listMonitor"
-            />
+            <BarAndLine class="echarts-line" xAxisPropType="time" :dataSource="historyList" height="100%" width="65%"
+              :chartsColumns="chartsColumns" :option="echatsOption" chartsType="listMonitor" />
+            <!-- 爆炸三角形 -->
+            <div style="width:35%;height:100%">
+              <blastDelta></blastDelta>
+            </div>
           </div>
         </div>
       </div>
@@ -114,301 +106,334 @@
   </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 dayjs from 'dayjs';
-  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-  import { chartsColumnList } from '../device.data';
-
-  export default defineComponent({
-    components: { BasicModal, BarAndLine, SvgIcon },
-    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: '25%',
-          left: '5',
-          right: '45',
-          bottom: '3%',
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {},
-        },
-      };
-
-      const chartsColumnArr = getTableHeaderColumns('bundletube_chart');
-      const chartsColumns = chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumnList;
-
-      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);
-        }
-      }
+import { defineComponent, ref, watch, shallowRef } 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';
+
+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;
 
-      // 选择监测
-      function selectDevice(id) {
+    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 handleCancel(e) {
-        e.preventDefault();
-        closeModal();
-      }
+    function handleOk(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;
-        });
+    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,
-        deviceList,
-        historyList,
-        activeDeviceID,
-        posMonitor,
-        echatsOption,
-        posList,
-        chartsColumns,
-      };
-    },
-  });
+    return {
+      register,
+      model: modelRef,
+      currentTime,
+      handleVisibleChange,
+      selectDevice,
+      handleOk,
+      handleCancel,
+      deviceList,
+      historyList,
+      activeDeviceID,
+      posMonitor,
+      echatsOption,
+      posList,
+      chartsColumns,
+    };
+  },
+});
 </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;
+
+      span:hover {
+        color: #89ffff;
       }
-      .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;
-        }
+
+      &::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 {
+    }
+
+    .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;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        margin-bottom: 10px;
-        .top-item {
-          width: 220px;
-          height: 100px;
+        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: 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: 110px;
-            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;
-              }
-            }
+
+          .title {
+            font-size: 18px;
           }
-        }
-        .warning-box {
-          padding-top: 0px;
-          .icon {
-            margin-top: 20px;
-            :deep(.icon-style) {
-              width: auto;
-              color: #fdb146;
+
+          .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-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;
-        }
-        .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 {
+        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: 20px;
-        .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: 320px;
-          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: 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;
-    .zxm-table-tbody > tr > td {
-      border: none !important;
+
+    .right-bottom {
+      margin-top: 20px;
+
+      .echarts-box {
+        width: 100%;
+        height: 320px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+
+        .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>

src/views/vent/performance/comment/HistorySp.vue

@@ -188,12 +188,12 @@ watch(() => props.imgSrc, (newV, oldV) => {
             height: calc(100% - 30px);
 
             img {
-                width: 498px;
-                height: 236px;
+                width: 692px;
+                height: 226px;
                 position: absolute;
                 left: 50%;
-                top: -130px;
-                transform: translate(-72%, 0);
+                top: -108px;
+                transform: translate(-70%, 0);
             }
         }
     }