[Wip 0000] 瓦斯首页-抽采泵站监测模块部分公共组件开发

src/views/vent/gas/gasPumpMonitor/components/customBoard.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="board">
+    <div class="board__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="board__value">
+      <slot name="value">
+        <div class="board__value_txt">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+
+  withDefaults(
+    defineProps<{
+      /** label（即上侧）内容，可用slot */
+      label?: string;
+      /** value（即下侧）内容，可用slot */
+      value?: string | number;
+    }>(),
+    {
+      label: '',
+      value: '',
+    }
+  );
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .board {
+    background-image: url('../../../../../assets/images/vent/custom-board.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100% auto;
+    width: 100%;
+    padding: 30px;
+    text-align: center;
+    color: @white;
+  }
+
+  .board__value_txt {
+    font-size: 24px;
+    color: @light-blue;
+    font-style: italic;
+  }
+</style>

src/views/vent/gas/gasPumpMonitor/components/listItem.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="list-item" :class="{ 'list-item__background': hasBackground }">
+    <div class="list-item__label">
+      <slot name="label">
+        {{ label }}
+      </slot>
+    </div>
+    <div class="list-item__value" :class="{ 'list-item__border': hasBorder }">
+      <slot name="value">
+        <div v-if="statusMode" :class="{ 'list-item__actived': matchedStatus.actived, 'list-item__deactived': !matchedStatus.actived }">
+          {{ matchedStatus.label }}
+        </div>
+        <div v-else-if="inputMode">
+          <Input :bordered="false" :value="value" @update:value="$emit('update:value', $event)" />
+        </div>
+        <div v-else class="text-right list-item__text_blue">
+          {{ value }}
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
+  import { Input } from 'ant-design-vue';
+  import { computed } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      /** value（即右侧）部分是否有边框 */
+      hasBorder?: boolean;
+      /** 是否有背景 */
+      hasBackground?: boolean;
+      /** label（即左侧）内容，可用slot */
+      label?: string;
+      /** value（即右侧）内容，可用slot */
+      value?: string;
+      /** 是否是状态灯模式，配合statusConfig使用 */
+      statusMode?: boolean;
+      /** 是否是输入框模式，不与状态灯模式兼容 */
+      inputMode?: boolean;
+      /** 状态灯配置，状态灯模式下，成功匹配的条目将按照配置显示 */
+      statusConfig?: { label: string; value: any; actived: boolean }[];
+    }>(),
+    {
+      hasBorder: false,
+      hasBackground: true,
+      label: '',
+      value: '',
+    }
+  );
+  defineEmits(['update:value']);
+
+  const defaultStatusConfig = {
+    value: undefined,
+    label: '未知',
+    actived: false,
+  };
+  const matchedStatus = computed(() => {
+    if (!props.statusConfig) return defaultStatusConfig;
+    return (
+      props.statusConfig.find((cfg) => {
+        return cfg.value === props.value;
+      }) || defaultStatusConfig
+    );
+  });
+</script>
+
+<style lang="less" scoped>
+  @light-blue: aqua;
+
+  .list-item {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 10px;
+    display: flex;
+  }
+  .list-item__label {
+    flex-grow: 1;
+  }
+  .list-item__value {
+    flex-basis: 150px;
+    padding: 0 10px;
+  }
+
+  .list-item__background {
+    background-image: linear-gradient(to right, #0f73bbd8, #0f73bb62);
+  }
+
+  .list-item__text_blue {
+    color: @light-blue;
+  }
+
+  .list-item__border {
+    border: 1px solid @light-blue;
+    border-radius: 5px;
+  }
+
+  .list-item__actived {
+    padding-left: 35px;
+    background-image: url('../../../../../assets/images/company/home/select-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  .list-item__deactived {
+    padding-left: 35px;
+    background-image: url('../../../../../assets/images/company/home/unselect-bg.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  ::v-deep(.zxm-input) {
+    color: @white;
+  }
+</style>