6.0首页修改-提交

src/layouts/default/header/components/weatherBroadcast.vue

@@ -5,10 +5,10 @@
     <a-badge :count="10">
       <a href="#" class="head-example"></a>
     </a-badge> -->
-      <div style="display: flex; flex-direction: row" class="btn-header">
+      <div style="display: flex; flex-direction: row;align-items: center;" class="btn-header">
         <img :src="parseWeatherData(weatherObj.text)" class="weather-icon" />
         <span class="unit">{{ weatherObj.pressure }}&nbsp;hPa</span>
-        <FileSearchOutlined style="font-size: 18px; color: #fff; line-height: 50px" />
+        <FileSearchOutlined style="font-size: 20px; color: #fff;" />
       </div>
     </div>
     <div v-if="isShowWeatherBroad" class="broadcast" ref="VoiceBroadcastRef" id="VoiceBroadcast">
@@ -199,24 +199,25 @@
 </script>
 <style lang="less" scoped>
   .unit {
-    font-size: 15px;
-    line-height: 47px;
+    font-size: 14px;
+    // line-height: 47px;
     color: #fff;
     padding-right: 10px;
   }
   .btn {
-    line-height: 30px;
+    // line-height: 30px;
     cursor: pointer;
     display: flex;
+    align-items: center;
   }
   .btn-header {
-    height: 50px;
+    height: 48px;
     margin-right: 20px;
   }
   .weather-icon {
     width: 20px;
     height: 20px;
-    margin-top: 14px;
+    // margin-top: 14px;
     margin-right: 10px;
   }
   .broadcast {

src/layouts/default/header/index.vue

@@ -55,7 +55,7 @@
       <LoginSelect ref="loginSelectRef" @success="loginSelectOk" /> -->
     </div>
   </Header>
-  <div :class="`${prefixCls}-action`" style="position: fixed; top: 30px; right: 20px; z-index: 999999">
+  <div :class="`${prefixCls}-action`" style="position: fixed; top: 25px; right: 20px; z-index: 999999">
     <div class="right-position">
       <!-- 公司端不显示语音播报功能 weatherBroadcast.vue-->
       <a-radio-group v-if="hasPermission('show:modalChange')" v-model:value="programModalType" @change="changeModalType" style="display: flex">
@@ -363,4 +363,9 @@
     color: transparent;
     font-weight: 600;
   }
+  .right-position{
+    display: flex;
+    align-items: center;
+    height: 48px;
+  }
 </style>

src/views/vent/home/configurable/components/MonitorBar.vue

@@ -31,144 +31,169 @@
   </a-row>
 </template>
 <script lang="ts" setup>
-  import { computed } from 'vue';
-  import { getFormattedText } from '../hooks/helper';
-  import { useGlobSetting } from '/@/hooks/setting';
+import { computed } from 'vue';
+import { getFormattedText } from '../hooks/helper';
+import { useGlobSetting } from '/@/hooks/setting';
 
-  const props = defineProps<{
-    isDataRealTime: boolean;
-    data: any;
-  }>();
+const props = defineProps<{
+  isDataRealTime: boolean;
+  data: any;
+}>();
 
-  const { sysOrgCode } = useGlobSetting();
+const { sysOrgCode } = useGlobSetting();
 
-  const config = computed(() => {
-    if (sysOrgCode === 'huainanzhangji') {
-      return [
-        {
-          label: '总回风量(m³/min)',
-          value: '${midinfo[0].sysdata.zonghuifeng}',
-        },
-        {
-          label: '总进风量(m³/min)',
-          value: '${midinfo[0].sysdata.zongjinfeng}',
-        },
-        {
-          label: '有效风量率(%)',
-          value: '${midinfo[0].sysinfo.useM3Perent}',
-        },
-      ];
-    }
-    if (props.isDataRealTime) {
-      return [
-        {
-          label: '总回风量(m³/min)',
-          value: '${midinfo[0].sysdata.zonghuifeng}',
-        },
-        {
-          label: '总进风量(m³/min)',
-          value: '${midinfo[0].sysdata.zongjinfeng}',
-        },
-        {
-          label: '计划风量(m³/min)',
-          value: '${midinfo[0].sysdata.xufengliang}',
-        },
-        {
-          label: '通风巷道长度(m)',
-          // value: '223196',
-          value: '${midinfo[0].sysinfo.totallength}',
-        },
-        {
-          label: '有效风量率(%)',
-          value: '${midinfo[0].sysinfo.useM3Perent}',
-        },
-      ];
-    } else {
-      return [
-        {
-          label: '总回风量(m³/min)',
-          value: '${midinfo[0].sysinfo.info.totalRetM3}',
-        },
-        {
-          label: '总进风量(m³/min)',
-          value: '${midinfo[0].sysinfo.info.totalIntM3}',
-        },
-        {
-          label: '计划风量(m³/min)',
-          value: '${midinfo[0].sysinfo.info.totalPlanM3}',
-        },
-        {
-          label: '通风巷道长度(万m)',
-          value: '${midinfo[0].sysinfo.info.flength}',
-        },
-        {
-          label: '有效风量率(%)',
-          value: '${midinfo[0].sysinfo.info.useM3Perent}',
-        },
-      ];
-    }
-  });
+const config = computed(() => {
+  if (sysOrgCode === 'huainanzhangji') {
+    return [
+      {
+        label: '总回风量(m³/min)',
+        value: '${midinfo[0].sysdata.zonghuifeng}',
+      },
+      {
+        label: '总进风量(m³/min)',
+        value: '${midinfo[0].sysdata.zongjinfeng}',
+      },
+      {
+        label: '有效风量率(%)',
+        value: '${midinfo[0].sysinfo.useM3Perent}',
+      },
+    ];
+  }
+  if (props.isDataRealTime) {
+    return [
+      {
+        label: '总回风量(m³/min)',
+        value: '${midinfo[0].sysdata.zonghuifeng}',
+      },
+      {
+        label: '总进风量(m³/min)',
+        value: '${midinfo[0].sysdata.zongjinfeng}',
+      },
+      {
+        label: '计划风量(m³/min)',
+        value: '${midinfo[0].sysdata.xufengliang}',
+      },
+      {
+        label: '通风巷道长度(m)',
+        // value: '223196',
+        value: '${midinfo[0].sysinfo.totallength}',
+      },
+      {
+        label: '有效风量率(%)',
+        value: '${midinfo[0].sysinfo.useM3Perent}',
+      },
+    ];
+  } else {
+    return [
+      {
+        label: '总回风量(m³/min)',
+        value: '${midinfo[0].sysinfo.info.totalRetM3}',
+      },
+      {
+        label: '总进风量(m³/min)',
+        value: '${midinfo[0].sysinfo.info.totalIntM3}',
+      },
+      {
+        label: '计划风量(m³/min)',
+        value: '${midinfo[0].sysinfo.info.totalPlanM3}',
+      },
+      {
+        label: '通风巷道长度(万m)',
+        value: '${midinfo[0].sysinfo.info.flength}',
+      },
+      {
+        label: '有效风量率(%)',
+        value: '${midinfo[0].sysinfo.info.useM3Perent}',
+      },
+    ];
+  }
+});
 
-  const computedConfig = computed(() => {
-    const data = props.data;
-    return config.value.map((e, i) => {
-      return {
-        label: getFormattedText(data, e.label),
-        value: getFormattedText(data, e.value),
-        class: `middata${i}`,
-      };
-    });
+const computedConfig = computed(() => {
+  const data = props.data;
+  return config.value.map((e, i) => {
+    return {
+      label: getFormattedText(data, e.label),
+      value: getFormattedText(data, e.value),
+      class: `middata${i}`,
+    };
   });
+});
 </script>
 <style lang="less" scoped>
-  .midback-info {
-    pointer-events: none;
-  }
-  .middata {
-    // margin-top: 7px;
-    padding: 5px 0px 5px 60px;
-    width: 175px;
-    height: 64px;
-    // margin-top: 4px;
-    // margin-left: 10px;
-    // margin-bottom: 5px;
-    background-size: 100% 100%;
-  }
-  .middata0 {
-    background: url('/@/assets/images/home-container/configurable/middata1.png');
-  }
-  .middata1 {
-    background: url('/@/assets/images/home-container/configurable/middata2.png');
-  }
-  .middata2 {
-    background: url('/@/assets/images/home-container/configurable/middata3.png');
-  }
-  .middata3 {
-    background: url('/@/assets/images/home-container/configurable/middata6.png');
+.midback-info {
+  pointer-events: none;
+}
+
+.middata {
+  // margin-top: 7px;
+  padding: 5px 0px 5px 60px;
+  width: 175px;
+  height: 64px;
+  // margin-top: 4px;
+  // margin-left: 10px;
+  // margin-bottom: 5px;
+  background-size: 100% 100%;
+  text-align: center;
+}
+
+.middata0 {
+  .midnumberval {
+    color: #e6ffee;
   }
-  .middata4 {
-    background: url('/@/assets/images/home-container/configurable/middata5.png');
+  background: url('/@/assets/images/home-container/configurable/middata1.png');
+}
+
+.middata1 {
+   .midnumberval {
+    color: #d3f8ff;
   }
-  .middata5 {
-    background: url('/@/assets/images/home-container/configurable/middata4.png');
+  background: url('/@/assets/images/home-container/configurable/middata2.png');
+}
+
+.middata2 {
+   .midnumberval {
+    color: #fffcd5;
   }
-  .midnumberval {
-    z-index: 4;
-    padding-top: -10px;
-    // position: absolute;
-    // top: -6px;
-    text-align: center;
-    font-weight: 600;
-    color: #f6ca0e;
-    font-size: 18px;
-    font-family: 'Microsoft YaHei', Arial;
-    // font-family: 'UnidreamLED';
+  background: url('/@/assets/images/home-container/configurable/middata3.png');
+}
+
+.middata3 {
+   .midnumberval {
+    color: #deeafe;
   }
-  .midback-info {
-    background-image: url('/@/assets/images/home-container/configurable/middata_bg.png');
-    background-size: 100% 100%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+  background: url('/@/assets/images/home-container/configurable/middata6.png');
+}
+
+.middata4 {
+   .midnumberval {
+    color: #f3e3ff;
   }
+  background: url('/@/assets/images/home-container/configurable/middata5.png');
+}
+
+.middata5 {
+  background: url('/@/assets/images/home-container/configurable/middata4.png');
+}
+
+.midnumberval {
+  z-index: 4;
+  padding-top: -10px;
+  // position: absolute;
+  // top: -6px;
+  text-align: center;
+  font-weight: 600;
+  // color: #f6ca0e;
+  font-size: 12px;
+  // font-family: 'Microsoft YaHei', Arial;
+  font-family: 'douyuFont';
+}
+
+.midback-info {
+  background-image: url('/@/assets/images/home-container/configurable/middata_bg.png');
+  background-size: 100% 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
 </style>

src/views/vent/home/configurable/components/content.vue

@@ -5,7 +5,7 @@
     <!-- 背景 -->
     <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
     <video
-      v-if="background.show && background.type === 'video'"
+      v-if="background.show && background.type === 'video' && background.isBoard"
       class="content__background"
       width="100%"
       autoplay
@@ -16,6 +16,19 @@
     >
       <source :src="background.link" />
       Not Supportted Link Or Browser
+    </video>
+     <video
+     v-if="background.show && background.type === 'video' && !background.isBoard"
+      class="content__background_1"
+      width="100%"
+      autoplay
+      loop
+      muted
+      disablepictureinpicture
+      playsinline
+    >
+      <source :src="background.link" />
+      Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
       <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
@@ -473,10 +486,22 @@
   }
 
   .content__background {
+    width: 100%;
+    // height: 100%;
+    height: calc(100% - 65px);
+    position: absolute;
+    top: 65px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+    padding: 5px;
+    box-sizing: border-box;
+  }
+   .content__background_1 {
     width: 100%;
     height: 100%;
     position: absolute;
-    top: 0;
+    top: 0px;
     left: 0;
     z-index: 0;
     object-fit: fill;

src/views/vent/home/configurable/components/detail/TimelineList.vue

@@ -4,7 +4,7 @@
     <div v-for="item in listConfig" :key="item.prop" class="flex items-center timeline-item">
       <div class="timeline-item__icon" :class="`timeline-item__icon_${item.color}`"></div><div class="timeline-item__dot"></div>
       <div class="timeline-item__label">{{ item.label }}</div>
-      <div :class="`timeline-item__value_${item.color}`">
+      <div class="timeline-item__value" :class="`timeline-item__value_${item.color}`">
         {{ item.value }}
       </div>
     </div>
@@ -67,14 +67,14 @@
   .timeline-item__icon {
     width: 33px;
     height: 35px;
-    margin-left: 50px;
+    margin-left: 35px;
     background-repeat: no-repeat;
     background-position: center center;
   }
   .timeline-item__dot {
     width: 10px;
     height: 10px;
-    margin-left: 70px;
+    margin-left: 55px;
     background-color: @vent-gas-primary-bg;
     border-radius: 5px;
     position: relative;
@@ -91,7 +91,10 @@
   }
   .timeline-item__label {
     width: 100px;
-    margin-left: 70px;
+    margin-left: 55px;
+  }
+  .timeline-item__value {
+    margin-left: 55px;
   }
   .timeline-item__value_red {
     color: red;
@@ -119,7 +122,7 @@
     width: 2px;
     height: 180px;
     top: 20px;
-    left: 162px;
+    left: 132px;
     background-image: @vent-configurable-home-timeline;
   }
 </style>

src/views/vent/home/configurable/vent182.vue

@@ -71,8 +71,8 @@
         class="switch-button report-mode right-525px"
         @click="switchDataMode"
       ></div>
-      <div class="switch-button icon-goto2D right-455px" @click="goMicroApp('2.5')"></div>
-      <div class="switch-button icon-goto3D right-515px" @click="goMicroApp('3')"></div>
+      <div class="switch-button icon-goto2D right-421px" @click="goMicroApp('2.5')"></div>
+      <div class="switch-button icon-goto3D right-481px" @click="goMicroApp('3')"></div>
     </template>
   </div>
 </template>
@@ -200,15 +200,17 @@
 
     .top-bg {
       width: 100%;
-      height: 56px;
+      height: 48px;
       background: var(--image-modal-top) no-repeat center;
       position: absolute;
       z-index: 1;
+      background-size: 100% 100%;
       .main-title {
-        height: 56px;
+        height: 48px;
         font-family: 'douyuFont';
         font-size: 20px;
         letter-spacing: 2px;
+        padding-top: 8px;
         display: flex;
         justify-content: center;
         align-items: center;