nubomed-ui 1.0.2 → 1.0.3

package/src/packages/components/Menu/index.vue

@@ -0,0 +1,211 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-06-29 14:51:21
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-07-25 17:35:09
+ * @Description: 菜单导航栏
+-->
+<template>
+  <div :class="classes">
+    <!-- 侧边栏 -->
+    <template v-if="position === 'left'">
+      <slot name="header"></slot>
+      <div v-if="title" :class="bem('title')">{{ title }}</div>
+      <ul v-for="(list, g) in leftMenus" :key="g" :class="bem('group')">
+        <li
+          v-for="(item, index) in list"
+          :key="index"
+          :class="itemClass(item, index)"
+          @click="handleChange(item, index)"
+        >
+          <nb-icon v-if="item.icon" :icon="item.icon" :class="bem('item__icon')" />
+          <div :class="bem('item__text')">
+            <nb-badge :value="item.badge" :hidden="!item.badge">{{ item.text }}</nb-badge>
+          </div>
+          <span v-if="item.hasOwnProperty('count')" :class="bem('item__count')">{{ item.count }}</span>
+          <nb-icon v-if="item.showArrow" icon="arrow-right" :class="bem('item__arrow')" />
+        </li>
+      </ul>
+    </template>
+
+    <!-- 底部导航 -->
+    <template v-if="position === 'footer'">
+      <div v-for="(item, index) in data" :key="index" :class="itemClass(item, index)">
+        <div :class="bem('item__text')" @click="handleChange(item, index)">
+          <span
+            >{{ item.text }}<i v-if="getBadge(item.badge)">{{ getBadge(item.badge) }}</i></span
+          >
+        </div>
+        <nb-icon v-if="index < data.length - 1" :class="bem('item__arrow')" icon="caret-right" />
+      </div>
+    </template>
+
+    <!-- 标题栏 -->
+    <template v-if="position === 'header'">
+      <div v-if="showBack" :class="bem('back')" @click="handleBack">
+        <nb-icon icon="back" />
+        <span :class="bem('back__text')">{{ backText }}</span>
+      </div>
+      <slot name="left" />
+      <ul v-if="data.length" :class="bem('menus')">
+        <li v-for="(item, index) in data" :key="index" :class="itemClass(item, index)">
+          <div :class="bem('item__text')" @click="handleChange(item, index)">
+            <span>{{ item.text }}</span>
+          </div>
+        </li>
+      </ul>
+      <!-- 标题，支持插槽 -->
+      <div v-if="title || $slots.title" :class="bem('title')">
+        <slot name="title">{{ title }}</slot>
+      </div>
+
+      <slot name="right" />
+
+      <div v-if="showLogout" :class="bem('logout')" @click="handleLogout">
+        <nb-icon icon="logout" />
+        <span :class="bem('logout__text')"
+          >退出
+          <template v-if="logoutTime > -1">({{ logoutTime }}s)</template>
+        </span>
+      </div>
+    </template>
+
+    <!-- 宫格菜单 -->
+    <template v-if="position === 'grid'">
+      <div v-for="(item, index) in data" :key="index" class="nb-menu__item" @click.stop="handleClickGrid(item)">
+        <nb-badge :value="getBadge(item.badge)">
+          <nb-icon :icon="item.icon" class="nb-menu__item__icon" />
+        </nb-badge>
+        <div>
+          <div class="nb-menu__item__name">{{ item.name }}</div>
+          <div class="nb-menu__item__desc">{{ item.desc }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import { createNamespace } from '../../../utils/create.js'
+
+const [name, bem] = createNamespace('menu')
+
+// 定义名称
+defineOptions({
+  name: 'nbMenu'
+})
+
+// 定义props
+const props = defineProps({
+  // 位置，left-左侧菜单，footer-底部导航，header-头部导航，grid-宫格菜单
+  position: {
+    type: String,
+    required: true
+  },
+  // 标题
+  title: String,
+  // 值
+  data: {
+    type: Array,
+    required: true,
+    default: () => {
+      return []
+    }
+  },
+  // 当前选择的菜单，对应data里的value值
+  active: {
+    type: [String, Number],
+    default: '',
+    required: true
+  },
+  // header - 是否显示返回
+  showBack: {
+    type: Boolean,
+    default: true
+  },
+  // header - 返回文字
+  backText: {
+    type: String,
+    default: '返回'
+  },
+  // header - 是否显示退出
+  showLogout: {
+    type: Boolean,
+    default: true
+  },
+  // header - 退出倒计时(大于-1才显示)
+  logoutTime: {
+    type: Number,
+    default: -1
+  }
+})
+
+// 定义emits
+const emits = defineEmits(['change', 'back', 'logout', 'clickGrid'])
+
+// 菜单集合
+const leftMenus = computed(() => {
+  if (props.position === 'left') {
+    if (Array.isArray(props.data[0])) {
+      return props.data
+    } else {
+      return [props.data]
+    }
+  }
+  return []
+})
+
+// 样式
+const classes = bem([props.position, props.position === 'grid' ? `grid--${props.data.length}` : ''])
+
+// 菜单项样式
+const itemClass = (item) => {
+  return bem('item', {
+    active: props.active === item.value,
+    abnormal: props.active === item.value && item.abnormal,
+    disabled: item.disabled,
+    import: item.import
+  })
+}
+
+// 角标数量
+const getBadge = (badge) => {
+  if (typeof badge === 'number') {
+    if (Number(badge) > 99) {
+      return '99+'
+    }
+    if (Number(badge) > 0) {
+      return badge
+    }
+  } else {
+    return badge
+  }
+}
+
+// 切换菜单
+const handleChange = (item) => {
+  if (item.disabled) {
+    return
+  }
+  emits('change', item)
+}
+
+// header - 返回
+const handleBack = () => {
+  emits('back')
+}
+
+// header - 退出
+const handleLogout = () => {
+  emits('logout')
+}
+
+// grid - 点击菜单
+const handleClickGrid = (item) => {
+  emits('clickGrid', item)
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>

package/src/packages/components/OpenCabinetBall/CabinetStatus.vue

@@ -0,0 +1,94 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-06 15:17:06
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-07 08:58:25
+ * @Description: 柜子状态
+-->
+<template>
+  <div v-show="lockStatus === 0 || lockStatus === 2 || !connectionStatus" :class="['nb-ocb__status', classes]">
+    <!-- 已关：显示锁图标 -->
+    <nb-icon v-if="lockStatus === 0" icon="lock" />
+    <!-- 开锁中 -->
+    <span v-if="lockStatus === 2">加载中…</span>
+    <!-- 未连接 -->
+    <nb-icon v-if="!connectionStatus" icon="connect-error" />
+  </div>
+</template>
+<script setup>
+import { computed } from 'vue'
+
+// 定义props
+const props = defineProps({
+  // 锁状态：0-关，1-开，2-开锁中
+  lockStatus: {
+    type: Number,
+    default: 0
+  },
+  // 连接状态，true-已连接，false-未连接
+  connectionStatus: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const classes = computed(() => {
+  if (props.lockStatus === 0) {
+    return 'nb-ocb__status--lock'
+  }
+  if (props.lockStatus === 2) {
+    return 'nb-ocb__status--loading'
+  }
+  if (!props.connectionStatus) {
+    return 'nb-ocb__status--unconnected'
+  }
+  return ''
+})
+</script>
+
+<style lang="scss">
+// ocb 即 open cabinet ball
+.nb-ocb__status {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--lock {
+    background-color: rgba(#181d41, 0.5);
+    .svg-icon {
+      width: 36px;
+      height: 36px;
+      color: #fff;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &--loading {
+    background-color: rgba(#f4f6f9, 0.8);
+    color: var(--nb-theme-color);
+    font-size: 18px;
+    line-height: 27px;
+  }
+
+  &--unconnected {
+    background-color: rgba(#f4f6f9, 0.8);
+    .svg-icon {
+      width: 40px;
+      height: 40px;
+      color: var(--nb-abnormal-color);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+</style>

package/src/packages/components/OpenCabinetBall/index.scss

@@ -0,0 +1,204 @@
+.nb-open-cabinet {
+  &__hide {
+    width: 120px;
+    height: 120px;
+    background: linear-gradient(180deg, #3385e6 0%, #0066e0 100%);
+    box-shadow: 0px 2px 14px 0px rgba(24, 29, 65, 0.16), inset 0px 0px 8px 0px rgba(0, 66, 144, 0.18);
+    border: 4px solid #e8f3ff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    color: #ffff;
+    box-sizing: border-box;
+    overflow: hidden;
+    cursor: pointer;
+    .svg-icon {
+      width: 48px;
+      height: 48px;
+    }
+    p {
+      font-size: 24px;
+      line-height: 36px;
+      text-align: center;
+    }
+  }
+  &__show {
+    max-width: 846px;
+    min-height: 256px;
+    width: fit-content;
+    background: #ffffff;
+    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.2);
+    border-radius: 80px 16px 16px 16px;
+    display: flex;
+    &__all {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 30px 15px 28px 30px;
+      box-sizing: border-box;
+      &__open {
+        width: 120px;
+        height: 120px;
+        background: linear-gradient(180deg, #3385e6 0%, #0066e0 100%);
+        box-shadow: 0px 2px 14px 0px rgba(24, 29, 65, 0.16), inset 0px 0px 8px 0px rgba(0, 66, 144, 0.18);
+        border: 4px solid #e8f3ff;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        line-height: 36px;
+        color: #ffffff;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+      &__toggle {
+        display: flex;
+        align-items: center;
+        color: var(--nb-theme-color);
+        cursor: pointer;
+        .svg-icon {
+          width: 32px;
+          height: 32px;
+        }
+        span {
+          font-size: 24px;
+          line-height: 36px;
+        }
+      }
+    }
+    &__list {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 30px 17px 0 0;
+      box-sizing: border-box;
+      &__item {
+        width: 166px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 30px;
+      }
+      &__cover {
+        width: 100px;
+        height: 150px;
+        border-radius: 9px;
+        overflow: hidden;
+        position: relative;
+        background-color: #f4f6f9;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+        &__all {
+          height: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+        }
+        &__top {
+          height: 74px;
+          width: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        &__bottom {
+          height: 74px;
+          width: 100%;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+        }
+        &__line {
+          width: 100%;
+          height: 2px;
+          background-color: #ffff;
+          position: absolute;
+          left: 0;
+          top: 74px;
+        }
+        &__left {
+          width: 48px;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+        &__right {
+          width: 48px;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+        &__line2 {
+          width: 2px;
+          height: 100%;
+          background-color: #ffff;
+          position: absolute;
+          left: 48px;
+          top: 0;
+        }
+      }
+      &__name {
+        width: 100%;
+        height: 36px;
+        font-size: 24px;
+        line-height: 36px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        margin-top: 17px;
+        color: var(--nb-font-color-7);
+        text-align: center;
+      }
+      &--lock,
+      &--unconnected,
+      &--loading {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      &--lock {
+        background: #181d41;
+        opacity: 0.5;
+
+        .svg-icon {
+          width: 36px;
+          height: 36px;
+          color: #ffffff;
+        }
+      }
+      &--unconnected {
+        background: #f4f6f9;
+        opacity: 0.8;
+        .svg-icon {
+          width: 36px;
+          height: 36px;
+          color: var(--nb-abnormal-color);
+        }
+      }
+      &--loading {
+        background: #f4f6f9;
+        opacity: 0.8;
+        font-size: 18px;
+        line-height: 27px;
+        word-wrap: break-word;
+        writing-mode: vertical-lr;
+        color: var(--nb-theme-color);
+      }
+    }
+  }
+}

package/src/packages/components/OpenCabinetBall/index.vue

@@ -0,0 +1,113 @@
+<!--
+ * @Author: chenghuan.dong
+ * @Date: 2023-07-19 14:49:23
+ * @LastEditors: chenghuan.dong
+ * @LastEditTime: 2023-08-07 09:03:32
+ * @Description: 开柜浮球
+-->
+<template>
+  <div v-show="!toggle" class="nb-open-cabinet__hide" @click.stop="handleOpen">
+    <nb-icon icon="door-opened" />
+    <p>开柜</p>
+  </div>
+  <div v-show="toggle" class="nb-open-cabinet__show">
+    <div class="nb-open-cabinet__show__all">
+      <div class="nb-open-cabinet__show__all__open" @click.stop="handleOpenAll">全部<br />开柜</div>
+      <div class="nb-open-cabinet__show__all__toggle" @click.stop="handleHide">
+        <nb-icon icon="caret-right" />
+        <span>收起</span>
+      </div>
+    </div>
+    <ul class="nb-open-cabinet__show__list">
+      <li v-for="(item, index) in terList" :key="index" class="nb-open-cabinet__show__list__item">
+        <div class="nb-open-cabinet__show__list__cover">
+          <img :src="item.terModelPic" />
+          <!-- 上下柜 -->
+          <template v-if="item.sTerModelCodeType === 2">
+            <div class="nb-open-cabinet__show__list__cover__top" @click.stop="handleOpenDoor(item, 0)">
+              <cabinet-status :lock-status="item.lockStatus[0]" :connection-status="item.connectionStatus[0]" />
+            </div>
+            <div class="nb-open-cabinet__show__list__cover__line" />
+            <div class="nb-open-cabinet__show__list__cover__bottom" @click.stop="handleOpenDoor(item, 1)">
+              <cabinet-status :lock-status="item.lockStatus[1]" :connection-status="item.connectionStatus[1]" />
+            </div>
+          </template>
+          <!-- 左右柜 -->
+          <template v-else-if="item.sTerModelCodeType === 3">
+            <div class="nb-open-cabinet__show__list__cover__left" @click.stop="handleOpenDoor(item, 0)">
+              <cabinet-status :lock-status="item.lockStatus[0]" :connection-status="item.connectionStatus[0]" />
+            </div>
+            <div class="nb-open-cabinet__show__list__cover__line2" />
+            <div class="nb-open-cabinet__show__list__cover__right" @click.stop="handleOpenDoor(item, 1)">
+              <cabinet-status :lock-status="item.lockStatus[1]" :connection-status="item.connectionStatus[1]" />
+            </div>
+          </template>
+          <!-- 一体柜 -->
+          <template v-else>
+            <div class="nb-open-cabinet__show__list__cover__all" @click.stop="handleOpenDoor(item, 0)">
+              <cabinet-status :lock-status="item.lockStatus[0]" :connection-status="item.connectionStatus[0]" />
+            </div>
+          </template>
+        </div>
+        <p class="nb-open-cabinet__show__list__name">{{ item.sTerDesc }}</p>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { createNamespace } from '../../../utils/create.js'
+import CabinetStatus from './CabinetStatus.vue'
+
+const [name, bem] = createNamespace('open-cabinet-ball')
+
+// 定义名称
+defineOptions({
+  name: 'nbOpenCabinetBall'
+})
+
+// 定义props
+const props = defineProps({
+  // 终端列表
+  terList: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  // 默认是否展开
+  defaultToggle: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 定义emits
+const emits = defineEmits(['openAll', 'open'])
+const toggle = ref(props.defaultToggle) // 是否展开
+
+// 展开
+const handleOpen = () => {
+  toggle.value = true
+}
+
+// 收起
+const handleHide = () => {
+  toggle.value = false
+}
+
+// 全部开柜
+const handleOpenAll = () => {
+  emits('openAll', props.terList)
+}
+
+// 开柜
+const handleOpenDoor = (item, index) => {
+  emits('open', item, index)
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>