Merge branch 'master' of http://39.97.59.228:8013/hrx/mky-vent-base

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: 57px" />
+        <FileSearchOutlined style="font-size: 20px; color: #fff;" />
       </div>
     </div>
     <div v-if="isShowWeatherBroad" class="broadcast" ref="VoiceBroadcastRef" id="VoiceBroadcast">
@@ -17,36 +17,21 @@
       </div>
       <div class="broadcast-context">
         <div class="context-tab">
-          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 0 }" @click="toSelectList(0)"> 温度</div>
-          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 1 }" @click="toSelectList(1)"> 气压</div>
-          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 2 }" @click="toSelectList(2)"> 风力</div>
+          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 0 }" @click="toSelectList(0)">
+            温度</div>
+          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 1 }" @click="toSelectList(1)">
+            气压</div>
+          <div class="context-tab-item" :class="{ 'context-tab-item-active': activeKey == 2 }" @click="toSelectList(2)">
+            风力</div>
         </div>
         <div class="context-box">
           <div class="echarts-box">
-            <BarAndLine
-              v-if="activeKey == 0"
-              xAxisPropType="fxTime"
-              height="240px"
-              :dataSource="monitorData"
-              :chartsColumns="ChartsColumnsWD"
-              :option="Option"
-            />
-            <BarAndLine
-              v-if="activeKey == 1"
-              xAxisPropType="fxTime"
-              height="240px"
-              :dataSource="monitorData"
-              :chartsColumns="ChartsColumnsQY"
-              :option="Option"
-            />
-            <BarAndLine
-              v-if="activeKey == 2"
-              xAxisPropType="fxTime"
-              height="240px"
-              :dataSource="monitorData"
-              :chartsColumns="ChartsColumnsFL"
-              :option="Option"
-            />
+            <BarAndLine v-if="activeKey == 0" xAxisPropType="fxTime" height="240px" :dataSource="monitorData"
+              :chartsColumns="ChartsColumnsWD" :option="Option" />
+            <BarAndLine v-if="activeKey == 1" xAxisPropType="fxTime" height="240px" :dataSource="monitorData"
+              :chartsColumns="ChartsColumnsQY" :option="Option" />
+            <BarAndLine v-if="activeKey == 2" xAxisPropType="fxTime" height="240px" :dataSource="monitorData"
+              :chartsColumns="ChartsColumnsFL" :option="Option" />
           </div>
         </div>
       </div>
@@ -199,26 +184,31 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
 .unit {
-  font-size: 15px;
-  line-height: 52px;
+  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: 16px;
+  // margin-top: 14px;
   margin-right: 10px;
 }
+
 .broadcast {
   width: 500px;
   height: 350px;
@@ -239,60 +229,55 @@ export default defineComponent({
     :deep(.ant-badge:not(.ant-badge-status)) {
       margin-right: 40px !important;
     }
+
     display: flex;
     align-items: center;
-    justify-content: center;
-    .message-title {
-      font-size: 16px;
+    padding-top: 10px;
+
+    .badge-title {
+      display: inline-block;
+      width: 62px;
+      line-height: 32px;
+      background-color: #2174f0;
+      border-radius: 26px;
+      text-align: center;
       color: #fff;
-      font-weight: 600;
-      line-height: 50px;
-      flex: 1;
-    }
-    .badge-box {
-      display: flex;
-      align-items: center;
-      padding-top: 10px;
-      .badge-title {
-        display: inline-block;
-        width: 62px;
-        line-height: 32px;
-        background-color: #2174f0;
-        border-radius: 26px;
-        text-align: center;
-        color: #fff;
-        padding-bottom: 2px;
-      }
+      padding-bottom: 2px;
     }
   }
+}
 
-  .broadcast-context {
-    .context-tab {
-      display: flex;
-      .context-tab-item {
-        line-height: 24px;
-        background: url('../../../../assets/images/tab-1.png') no-repeat center;
-        border-radius: 24px;
-        text-align: center;
-        color: #fff;
-        cursor: pointer;
-        font-size: 14px;
-        width: 80px;
-      }
-      .context-tab-item-active {
-        background: url('../../../../assets/images/tab-2.png') no-repeat center;
-      }
+.broadcast-context {
+  .context-tab {
+    display: flex;
+
+    .context-tab-item {
+      line-height: 24px;
+      background: url('../../../../assets/images/tab-1.png') no-repeat center;
+      border-radius: 24px;
+      text-align: center;
+      color: #fff;
+      cursor: pointer;
+      font-size: 14px;
+      width: 80px;
+    }
+
+    .context-tab-item-active {
+      background: url('../../../../assets/images/tab-2.png') no-repeat center;
     }
-    .context-box {
+  }
+
+  .context-box {
+    width: 100%;
+    height: calc(100% - 32px);
+
+    .echarts-box {
       width: 100%;
-      height: calc(100% - 32px);
-      .echarts-box {
-        width: 100%;
-        height: 500px;
-      }
+      height: 500px;
     }
   }
 }
+
 :deep(.zxm-badge-count) {
   width: 0px;
   height: 0px;

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' }">
@@ -476,15 +489,27 @@ const layoutConfig = computed(() => {
   overflow-x: hidden;
 }
 
-.content__background {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
+  .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: 0px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
 
 .image__background {
   width: 35%;

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;