nubomed-ui 1.0.2 → 1.0.3

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

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

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

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

@@ -0,0 +1,205 @@
+: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

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

@@ -0,0 +1,104 @@
+: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);
+      }
+    }
+  }
+}