nubomed-ui 1.0.3 → 1.0.4

package/src/packages/components/Statusbar/CabinetList.vue

@@ -1,125 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-06 14:24:44
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-06 20:59:12
- * @Description: 
--->
-<template>
-  <div class="nb-statusbar-popover">
-    <ul class="nb-statusbar-list">
-      <li v-for="(item, index) in data" :key="index" :class="itemClasses(item)">
-        <div
-          class="nb-statusbar-list__item__left"
-          @click="handleClickCabinet(item, 0)"
-        >
-          <img :src="item.terModelPic" alt="" />
-          <!-- 上下柜 -->
-          <template v-if="item.sTerModelCodeType === 2">
-            <div
-              class="nb-statusbar-list__item__left__top"
-              @click.stop="handleClickCabinet(item, 0)"
-            >
-              <CabinetListStatus
-                :lock-status="item.lockStatus[0]"
-                :connection-status="item.connectionStatus[0]"
-              />
-            </div>
-            <div
-              class="nb-statusbar-list__item__left__bottom"
-              @click.stop="handleClickCabinet(item, 1)"
-            >
-              <CabinetListStatus
-                :lock-status="item.lockStatus[1]"
-                :connection-status="item.connectionStatus[1]"
-              />
-            </div>
-          </template>
-          <!-- 左右柜 -->
-          <template v-if="item.sTerModelCodeType === 3">
-            <div
-              class="nb-statusbar-list__item__left__left"
-              @click.stop="handleClickCabinet(item, 0)"
-            >
-              <CabinetListStatus
-                :lock-status="item.lockStatus[0]"
-                :connection-status="item.connectionStatus[0]"
-              />
-            </div>
-            <div
-              class="nb-statusbar-list__item__left__right"
-              @click.stop="handleClickCabinet(item, 1)"
-            >
-              <CabinetListStatus
-                :lock-status="item.lockStatus[1]"
-                :connection-status="item.connectionStatus[1]"
-              />
-            </div>
-          </template>
-          <!-- 一体柜 -->
-          <CabinetListStatus
-            v-else
-            :lock-status="item.lockStatus"
-            :connection-status="item.connectionStatus"
-          />
-        </div>
-        <div class="nb-statusbar-list__item__right">
-          <p class="nb-statusbar-list__item__name">{{ item.sTerDesc }}</p>
-          <!--库存和效期-->
-          <div class="nb-statusbar-list__item__stock">
-            <span>库存 33</span>
-            <span>效期 正常</span>
-          </div>
-          <!-- 温湿度 -->
-          <CabinetListTempHum :data="item.tempHumList" />
-        </div>
-      </li>
-    </ul>
-    <div v-if="showLockAllButton" class="nb-statusbar-button">
-      <nb-button type="primary" size="small" svg-icon="lock">全部开锁</nb-button>
-    </div>
-  </div>
-</template>
-<script setup>
-import CabinetListStatus from "./CabinetListStatus.vue";
-import CabinetListTempHum from "./CabinetListTempHum.vue";
-import { createNamespace } from '../../../utils/create.js';
-
-const [name, bem] = createNamespace("statusbar-list");
-
-// 定义props
-const props = defineProps({
-  // 时间
-  date: {
-    type: String,
-    default: "",
-  },
-  // 统计值集合：二维数组，label-显示的文字，icon-显示的图标，value-显示的值，abnormal-是否异常
-  data: {
-    type: Array,
-    required: true,
-    default: () => {
-      return [];
-    },
-  },
-  // 是否显示全部开锁按钮
-  showLockAllButton: {
-    type: Boolean,
-    default: false
-  }
-});
-
-// 定义emits
-const emits = defineEmits(["change"]);
-
-const itemClasses = (item) => {
-  return bem("item", { disabled: item.connectionStatus.some((x) => !x) });
-};
-const handleClickCabinet = (item, index) => {
-  emits("change", item, index);
-};
-</script>
-
-<style lang="scss">
-@import "./index.scss";
-</style>

package/src/packages/components/Statusbar/CabinetListStatus.vue

@@ -1,75 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-06 15:17:06
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-26 16:28:44
- * @Description: 柜子状态
--->
-<template>
-  <div v-show="lockStatus === 0 || lockStatus === 2 || !connectionStatus" class="nb-statusbar-list__status--mask">
-    <!-- 已关：显示锁图标 -->
-    <nb-icon v-if="lockStatus === 0" icon="lock" class="nb-statusbar-list__status--lock" />
-    <!-- 开锁中 -->
-    <nb-icon v-if="lockStatus === 2" icon="loading" class="nb-statusbar-list__status--loading" />
-    <!-- 未连接 -->
-    <nb-icon v-if="!connectionStatus" icon="connect-error" class="nb-statusbar-list__status--unconnected" />
-  </div>
-</template>
-<script setup>
-// 定义props
-const props = defineProps({
-  // 锁状态：0-关，1-开，2-开锁中
-  lockStatus: {
-    type: Number,
-    default: 0
-  },
-  // 连接状态，true-已连接，false-未连接
-  connectionStatus: {
-    type: Boolean,
-    default: true
-  }
-})
-</script>
-
-<style lang="scss">
-.nb-statusbar-list__status {
-  &--mask {
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    background-color: rgba(#ffffff, 0.6);
-    z-index: 1;
-  }
-
-  &--lock {
-    width: 36px;
-    color: 36px;
-    color: var(--nb-theme-color);
-    position: absolute;
-    right: 0;
-    bottom: 0;
-  }
-
-  &--loading {
-    width: 30px;
-    height: 30px;
-    color: var(--nb-theme-color);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &--unconnected {
-    width: 40px;
-    height: 40px;
-    color: var(--nb-abnormal-color);
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-</style>

package/src/packages/components/Statusbar/CabinetListTempHum.vue

@@ -1,108 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-06 15:17:06
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-06 20:34:54
- * @Description: 柜子的温湿度
--->
-<template>
-  <div v-if="data.length" :class="bem()">
-    <div v-for="(item, index) in data" :key="index" :class="bem('row')">
-      <span
-        v-if="item.label"
-        class="nb-statusbar-list-temp__row__item__label"
-        >{{ item.label }}</span
-      >
-      <span v-if="item.tempShow" :class="itemTempClasses(item)">
-        <nb-icon icon="temperature" />
-        <i>{{ item.temp ?? "--" }}℃</i>
-      </span>
-      <span v-if="item.humShow" :class="itemHumClasses(item)">
-        <nb-icon icon="humidity" />
-        <i>{{ item.hum ?? "--" }}%</i>
-      </span>
-    </div>
-  </div>
-</template>
-<script setup>
-import { createNamespace } from '../../../utils/create.js';
-
-const [name, bem] = createNamespace("statusbar-list-temp");
-// 定义props
-const props = defineProps({
-  // 数据列表
-  data: {
-    type: Array,
-    default: () => {
-      return [];
-    },
-  },
-  // 温度值，不包含单位
-  temp: {
-    type: [Number, String],
-    default: null,
-  },
-  // 温度是否异常
-  tempAbnormal: {
-    type: Boolean,
-    default: false,
-  },
-  // 温度是否显示
-  tempShow: {
-    type: Boolean,
-    default: true,
-  },
-  // 湿度值，不包含单位
-  hum: {
-    type: [Number, String],
-    default: null,
-  },
-  // 湿度是否异常
-  humAbnormal: {
-    type: Boolean,
-    default: false,
-  },
-  // 湿度是否显示
-  humShow: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const itemTempClasses = (item) => {
-  return bem("row__item", { abnormal: item.tempAbnormal });
-};
-const itemHumClasses = (item) => {
-  return bem("row__item", { abnormal: item.humAbnormal });
-};
-</script>
-
-<style lang="scss">
-.nb-statusbar-list-temp {
-  &__row {
-    display: flex;
-    align-items: center;
-    &__item {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      &__label {
-        margin-right: 10px;
-      }
-      .svg-icon {
-        width: 32px;
-        height: 32px;
-      }
-      i {
-        font-style: normal;
-      }
-      &--abnormal i {
-        color: var(--nb-abnormal-color);
-      }
-    }
-  }
-  &__row + &__row {
-    margin-top: 5px;
-  }
-}
-</style>

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

@@ -1,205 +0,0 @@
-:root {
-  --nb-statusbar-height: 56px;
-}
-
-.nb-statusbar {
-  width: 100%;
-  height: var(--nb-statusbar-height);
-  background-color: var(--nb-font-color);
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-position: relative;
-  &__date {
-    padding: 0 32px;
-    font-size: 20px;
-    line-height: 28px;
-    flex: 1;
-  }
-
-  &__summary {
-    height: 100%;
-    padding: 0 32px 0 105px;
-    cursor: pointer;
-    font-size: 20px;
-    line-height: 28px;
-    display: flex;
-    align-items: center;
-
-    &__item {
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      label {
-        margin-right: 5px;
-      }
-
-      i {
-        font-style: normal;
-      }
-
-      .svg-icon {
-        width: 32px;
-        height: 32px;
-        margin-right: 5px;
-      }
-
-      &--abnormal {
-        background-color: var(--nb-abnormal-color);
-        border-radius: 16px;
-        padding: 0 7px;
-        min-width: 64px;
-      }
-    }
-
-    &__item+&__item {
-      margin-left: 20px;
-    }
-
-    &__line {
-      width: 1px;
-      height: 20px;
-      margin: 0 20px;
-      background-color: #ffffff;
-    }
-  }
-}
-
-.nb-statusbar-popover{
-  position: absolute;
-  top: calc(var(--nb-statusbar-height) + 3px);
-  right: 24px;
-  z-index: 3;
-  max-width: 1016px;
-  border-radius: 16px;padding: 20px 0 0 20px;
-  box-sizing: border-box;
-  background-color: #363956;
-}
-.nb-statusbar-button{
-  padding: 4px 20px 24px 20px;text-align: right;
-}
-.nb-statusbar-list {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  font-size: 24px;
-  line-height: 36px;
-  color: #fff;
-
-  &__item {
-    width: 480px;
-    height: 205px;
-    margin: 0 16px 16px 0;
-    background-color: var(--nb-font-color);
-    border-radius: 8px;
-    padding: 20px;
-    overflow: hidden;
-    display: flex;
-    box-sizing: border-box;
-
-    &__left {
-      width: 110px;
-      height: 165px;
-      border-radius: 8px;
-      overflow: hidden;
-      margin-right: 20px;
-      position: relative;
-      background-color: #fff;
-
-      img {
-        width: 100%;
-        height: 100%;
-      }
-
-      &__top {
-        width: 100%;
-        height: 81px;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 2;
-
-        &::after {
-          content: '';
-          position: absolute;
-          z-index: 3;
-          left: 0;
-          right: 0;
-          top: 81px;
-          background-color: var(--nb-font-color);
-          height: 3px;
-        }
-      }
-
-      &__bottom {
-        width: 100%;
-        height: 81px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        z-index: 2;
-      }
-
-      &__left {
-        width: 53px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: 2;
-
-        &::after {
-          content: '';
-          position: absolute;
-          z-index: 2;
-          left: 53px;
-          top: 0;
-          bottom: 0;
-          background-color: var(--nb-font-color);
-          width: 4px;
-        }
-
-        .nb-statusbar-list__status--lock {
-          left: 0;
-          right: inherit;
-        }
-      }
-
-      &__right {
-        width: 53px;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        z-index: 2;
-      }
-    }
-
-    &__right {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      overflow: hidden;
-      max-height: 100%;
-    }
-
-    &__stock {
-      display: flex;
-      align-items: center;
-
-      span {
-        flex: 1;
-        text-align: left;
-      }
-    }
-
-    &--disabled {
-      color: rgba(#ffffff, 0.5);
-    }
-  }
-}

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

@@ -1,83 +0,0 @@
-<!--
- * @Author: chenghuan.dong
- * @Date: 2023-07-06 10:20:14
- * @LastEditors: chenghuan.dong
- * @LastEditTime: 2023-07-25 18:50:10
- * @Description: 状态栏
--->
-<template>
-  <div class="nb-statusbar">
-    <div class="nb-statusbar__date">{{ date }}</div>
-    <!-- 统计 -->
-    <div class="nb-statusbar__summary" @click.stop="handleToggle">
-      <template v-for="(item, index) in data">
-        <template v-for="(item2, index2) in item" :key="index2">
-          <span :class="bem('summary__item', { abnormal: item2.abnormal })">
-            <label v-if="item2.hasOwnProperty('label') && item2.label">{{ item2.label }}</label>
-            <nb-icon v-if="item2.hasOwnProperty('icon') && item2.icon" :icon="item2.icon" />
-            <i>{{ item2.value }}</i>
-          </span>
-          <span v-if="data.length - 1 > index" class="nb-statusbar__summary__line"></span>
-        </template>
-      </template>
-    </div>
-    <!-- 柜子列表 -->
-    <CabinetList v-show="toggle" :data="terList" :showLockAllButton="showLockAllButton" @change="handleClick" />
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-import CabinetList from './CabinetList.vue'
-import { createNamespace } from '../../../utils/create.js'
-
-const [name, bem] = createNamespace('statusbar')
-
-// 定义名称
-defineOptions({
-  name: 'NbStatusbar'
-})
-
-// 定义props
-const props = defineProps({
-  // 时间
-  date: {
-    type: String,
-    default: ''
-  },
-  // 统计值集合：二维数组，label-显示的文字，icon-显示的图标，value-显示的值，abnormal-是否异常
-  data: {
-    type: Array,
-    required: true,
-    default: () => {
-      return []
-    }
-  },
-  // 终端列表
-  terList: {
-    type: Array,
-    default: () => {
-      return []
-    }
-  },
-  // 是否显示全部开锁按钮
-  showLockAllButton: {
-    type: Boolean,
-    default: false
-  }
-})
-// 定义emits
-const emits = defineEmits(['change'])
-
-const toggle = ref(false)
-const handleToggle = () => {
-  toggle.value = !toggle.value
-}
-
-const handleClick = (item, index) => {
-  emits('change', item, index)
-}
-</script>
-
-<style lang="scss">
-@import './index.scss';
-</style>

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

@@ -1,104 +0,0 @@
-:root {
-}
-
-.nb-steps {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  width: 940px;
-  height: 120px;
-  background: #f4f6f9;
-  border-radius: 8px;
-  padding: 25px 20px 20px;
-  overflow: hidden;
-  &__item {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    min-width: 96px;
-    flex: 1;
-    align-items: center;
-    &::after {
-      content: '';
-      height: 2px;
-      background-color: #CAD0E0;
-      position: absolute;
-      top: 15px;
-      left: 50%;
-      right: -50%;
-    }
-    &:last-child::after {
-      display: none;
-    }
-    &__text {
-      font-size: 24px;
-      line-height: 36px;
-      margin-top: 7px;
-      color: var(--nb-font-color-2);
-    }
-    &__icon {
-      position: relative;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    &--process {
-      &::after {
-        margin-left: 16px;
-        margin-right: 12px;
-      }
-      .nb-steps__item__icon {
-        span {
-          width: 32px;
-          height: 32px;
-          background: #ffffff;
-          border: 8px solid #0066e0;
-          box-sizing: border-box;
-          border-radius: 50%;
-        }
-        .svg-icon {
-          display: none;
-        }
-      }
-      .nb-steps__item__text{
-        color: var(--nb-font-color);
-      }
-    }
-    &--wait {
-      &::after {
-        margin-left: 12px;
-      }
-      .nb-steps__item__icon {
-        span {
-          width: 24px;
-          height: 24px;
-          background: #cad0e0;
-          border-radius: 50%;
-        }
-        .svg-icon {
-          display: none;
-        }
-      }
-    }
-    &--finish {
-      &::after {
-        margin-left: 10px;background-color: var(--nb-theme-color);
-      }
-      .nb-steps__item__icon {
-        span {
-          display: none;
-        }
-        .svg-icon {
-          width: 24px;
-          height: 24px;
-          color: var(--nb-theme-color);
-        }
-      }
-      .nb-steps__item__text{
-        color: var(--nb-font-color);
-      }
-    }
-  }
-}