nubomed-ui 1.0.3 → 1.0.4

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

@@ -1,211 +0,0 @@
-<!--
- * @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

@@ -1,94 +0,0 @@
-<!--
- * @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

@@ -1,204 +0,0 @@
-.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

@@ -1,113 +0,0 @@
-<!--
- * @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>