Parcourir la source

refactor(GeneralComponents):组件调整

HMY il y a 8 mois
Parent
commit
cda3f30afd

+ 1 - 1
admin/src/main/resources/mapper/hnyzdcs/PipelineInstanceMapper.xml

@@ -86,7 +86,7 @@
             <if test="rotate != null ">and rotate = #{rotate}</if>
             <if test="modelId != null ">and model_id = #{modelId}</if>
             <if test="pipeClass != null  and pipeClass != ''">and pipe_class = #{pipeClass}</if>
-            <if test="remark != null  and remark != ''">and remark like concat('%', #{remark}, '%')</if>
+            <if test="remark != null  and remark != ''">and pi.remark like concat('%', #{remark}, '%')</if>
             <if test="status != null  and status != ''">and status = #{status}</if>
         </where>
     </select>

+ 7 - 6
ui/src/components/GeneralComponents/ArrowComponent.vue

@@ -2,7 +2,7 @@
     <div class="arrow_default" :style="arrowStyle" @click="handleClick">
         <div class="arrow_text" :style="getFontSize" v-if="!iconFirst">{{ props.arrowText }}</div>
         <i class="icon iconfont icon-rightArrow arrow_icon" :style="arrowIconStyle"
-            :class="{ can_click: !!props.specialCondition.linkUrl }"></i>
+            :class="{ can_click: !!props.specialCondition?.linkUrl }"></i>
         <div class="arrow_text" :style="getFontSize" v-if="iconFirst">{{ props.arrowText }}</div>
     </div>
 </template>
@@ -31,12 +31,13 @@ const props = defineProps({
 
 // 箭头容器样式(flex布局)
 const arrowStyle = computed(() => ({
-    display: 'flex',
-    flexDirection: props.specialCondition.flexDir || 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
+  display: 'flex',
+  flexDirection: props.specialCondition?.flexDir ?? 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
 }))
 
+
 // 箭头文字位置
 const iconFirst = computed(() => {
     const val = props.specialCondition?.iconFirst
@@ -49,7 +50,7 @@ const iconFirst = computed(() => {
 // 箭头方向转换
 const arrowIconStyle = computed(() => ({
     fontSize: `${props.iconSize}px`,
-    transform: `rotate(${props.specialCondition.arrowRotate || 0}deg)`,
+    transform: `rotate(${props.specialCondition?.arrowRotate || 0}deg)`,
 }))
 
 // 字体大小

+ 2 - 2
ui/src/components/GeneralComponents/PageIconHNComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="icon_other" :style="{ 'flex-direction': props.specialCondition?.flexDirection || 'row' }">
+    <div class="icon_other" :style="{ 'flex-direction': props.specialCondition?.flexDir || 'row' }">
         <!-- 湖南页面icon图标配置 -->
         <div class="icon_title" v-if="!iconFirst">{{ props.title }}</div>
         <i class="icon iconfont-hnyz-colour" :class="'icon-hnyz-' + iconClass"
@@ -24,7 +24,7 @@ const props = defineProps({
         type: Number,
         default: 100
     },
-    specialCondition: {//特殊条件:iconFirst(true/false), flexDirection('row'/'column')
+    specialCondition: {//特殊条件:iconFirst(true/false), flexDir('row'/'column')
         type: JSON,
         default: () => ({})
     }

+ 1 - 1
ui/src/components/GeneralComponents/PageIconSHComponent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="icon_other" :style="{ 'flex-direction': props.specialCondition?.flexDirection || 'column' }">
+    <div class="icon_other" :style="{ 'flex-direction': props.specialCondition?.flexDir || 'row' }">
         <!-- 上海页面icon图标配置 -->
         <i class="icon iconfont-colour" :class="'icon-' + iconClass"
             :style="{ 'font-size': props.iconSize + 'px' }"></i>

+ 1 - 1
ui/src/components/GeneralComponents/PhSliderComponent.vue

@@ -62,7 +62,7 @@ const marks = computed(() => {
 
 // 动态样式
 const sliderStyle = computed(() => ({
-    '--marks-font-size': `${props.sensorWidth * 1.8}px`,
+    '--marks-font-size': `${props.sensorWidth * 0.9}px`,
     '--runway-width': `${props.sensorWidth}px`,
     '--slider-height': props.sensorHeight ? `${props.sensorHeight}px` : '0.5em',
 }))

+ 26 - 5
ui/src/components/GeneralComponents/WaterLevelMapComponent.vue

@@ -1,12 +1,12 @@
 <template>
-    <dv-water-level-pond :config="waterLevelConfig" v-if="testValue[0] > 0" :style="getWaterLevelStyle" />
+    <dv-water-level-pond :config="waterLevelConfig" :style="getWaterLevelStyle" />
 </template>
 
 <script setup>
 import { computed } from 'vue'
 
 const props = defineProps({
-    testValue: {
+    sensorValue: {
         type: Array,
         default: () => [66],
     },
@@ -20,11 +20,32 @@ const props = defineProps({
     },
 })
 
-// 组装 config
+// 显示用的 sensorValue,保证有默认值
+const displaySensorValue = computed(() => {
+    if (!props.sensorValue || props.sensorValue.length === 0) {
+        return [66];
+    }
+    return props.sensorValue;
+})
+
+// 内部缓存的 sensor 值
+const currentSensorValue = ref(displaySensorValue.value[0]);
+
+// 监听传入值,只有变了才更新 
+watch(
+    () => displaySensorValue.value[0],
+    (newVal) => {
+        if (newVal !== currentSensorValue.value) {
+            currentSensorValue.value = newVal;
+        }
+    }
+);
+
+// 组装 config,只在值变时更新
 const waterLevelConfig = computed(() => ({
-    data: [props.testValue[0]], // 取第一个值
+    data: [currentSensorValue.value],
     waveHeight: 3,
-}))
+}));
 
 // 样式
 const getWaterLevelStyle = computed(() => ({

+ 0 - 9
ui/src/layout/components/Navbar.vue

@@ -7,15 +7,6 @@
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
         <header-search id="header-search" class="right-menu-item" />
-
-        <el-tooltip content="源码地址" effect="dark" placement="bottom">
-          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
-        <el-tooltip content="文档地址" effect="dark" placement="bottom">
-          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
-        </el-tooltip>
-
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
         <el-tooltip content="主题模式" effect="dark" placement="bottom">