vue2-client 1.12.15 → 1.12.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.12.15",
+  "version": "1.12.16",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XCardSet/XCardSet.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="card-box">
+  <div class="card-box" v-if="!configurationParameters.drawerMode">
     <div
       class="section-tab"
-      v-bind:innerText="configurationParameters"
+      :innerText="configurationParameters"
       contenteditable="true"
       :style="{ backgroundColor: configurationParameters.tabBackgroundColor }">
       <a-icon :type="configurationParameters.icon" style="margin-left: 2%;font-size: medium;"/>
@@ -32,6 +32,47 @@
       </div>
     </div>
   </div>
+  <div v-else class="card-box">
+    <div
+      class="section-tab"
+      :innerText="configurationParameters"
+      contenteditable="true"
+      :style="{ backgroundColor: configurationParameters.tabBackgroundColor }">
+      <a-icon :type="configurationParameters.icon" style="margin-left: 2%;font-size: medium;"/>
+      {{ configurationParameters.tab }}
+    </div>
+    <a-collapse accordion class="accordion" :activeKey="activeKey" @change="switchDrawers">
+      <a-collapse-panel
+        v-for="(time, rowId) in times"
+        :header="time"
+        :style="{backgroundColor:rowId === rowIndex ? configurationParameters.tabBackgroundColor : '#fff'}"
+        :key="rowId" >
+        <div class="patient-overview">
+          <div
+            class="overview-section"
+            v-for="(item,index) in data"
+            :key="index"
+            :style="{borderBottom: index === data.length - 1 ? 'none' : '1px solid #ddd'}">
+            <div class="section-header" :style="{ backgroundColor: item.backgroundColor, color: item.fontColor }">
+              {{ item.titleName }}({{ item.messageNumber }})
+            </div>
+            <div class="patient-list-container">
+              <div class="patient-list">
+                <div
+                  v-for="(patient, i) in item.showData"
+                  :key="i"
+                  class="patient-item"
+                  :title="`${patient.room_number} - ${patient.patient_name}`">
+                  <span class="card_data" :style="{ color: item.fontColor }">{{ patient.room_number }}</span>
+                  <span class="card_data" >{{ patient.patient_name }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
 </template>
 
 <script>
@@ -39,22 +80,29 @@
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
 
 export default {
-  name: 'XCardSet',
+  name: 'CardComponent',
   data () {
     return {
       tab: 'container',
       data: [
         { room_number: '', patient_name: '' }
       ],
+      activeKey: '0',
+      times: [],
+      DateTimes: [],
+      rowIndex: 0,
       /* 配置参数(titleName：行标题名，dataSource：数据源，parameter：参数，fontColor：文字颜色，backgroundColor：背景颜色，
-     pageSize：分页数量，tabBackgroundColor：标签背景颜色，isPrimarySource：是否取mainDataSource中的元素) */
+     pageSize：分页数量，tabBackgroundColor：标签背景颜色，isPrimarySource：是否取mainDataSource中的元素)， drawerMode：是否选用抽屉模式
+     times：如果选用抽屉 */
       configurationParameters: {
+        drawerMode: false,
         tab: '',
         icon: '',
         tabBackgroundColor: '',
         mainDataSource: '',
         serverName: '',
         parameter: { pageSize: 8 },
+        times: 4,
         configurationData: [
           {
             titleName: '',
@@ -80,28 +128,79 @@ export default {
     async getData (data) {
       this.data = []
       getConfigByName(data, 'af-his', res => {
-        this.configurationParameters = res
-        console.log(this.configurationParameters)
-        runLogic(res.mainDataSource, res.parameter, 'af-his').then(result => {
-          for (let i = 0; i < res.configurationData.length; i++) {
-            const ConfigureDisplayData = {
-              titleName: res.configurationData[i].titleName,
-              fontColor: res.configurationData[i].fontColor,
-              backgroundColor: res.configurationData[i].backgroundColor,
-              messageNumber: result[res.configurationData[i].dataSource + 'Total'][0].total,
-              showData: []
-            }
-            this.data.push(ConfigureDisplayData)
-            this.data[i].showData = result[res.configurationData[i].dataSource]
+        if (!res.drawerMode) {
+          this.renderDeck(res)
+        } else { this.renderData(res) }
+      })
+    },
+    // 渲染卡片组数据
+    async renderDeck (res, times) {
+      this.configurationParameters = await res
+      if (res.drawerMode) {
+        res.parameter.times = await times
+      }
+      runLogic(res.mainDataSource, res.parameter).then(result => {
+        for (let i = 0; i < res.configurationData.length; i++) {
+          const ConfigureDisplayData = {
+            titleName: res.configurationData[i].titleName,
+            fontColor: res.configurationData[i].fontColor,
+            backgroundColor: res.configurationData[i].backgroundColor,
+            messageNumber: result[res.configurationData[i].dataSource + 'Total'][0].total,
+            showData: []
           }
-        })
+          this.data.push(ConfigureDisplayData)
+          this.data[i].showData = result[res.configurationData[i].dataSource]
+        }
       })
+    },
+    formatTime (date) {
+      const year = date.getFullYear()
+      const month = String(date.getMonth() + 1).padStart(2, '0')
+      const day = String(date.getDate()).padStart(2, '0')
+      const hours = String(date.getHours()).padStart(2, '0')
+      return `${year}-${month}-${day} ${hours}:00`
+    },
+    getTimes (n) {
+      const times = []
+      const now = new Date()
+      for (let i = 0; i <= n; i++) {
+        const time = new Date(now.getTime() + i * 60 * 60 * 1000)
+        times.push(this.formatTime(time))
+      }
+      return times
+    },
+    formatTimeToHHMM (timeString) {
+      const date = new Date(timeString)
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      return `${hours}:${minutes}`
+    },
+    // 获取数据并渲染数据
+    renderData (data) {
+      this.times = []
+      this.DateTimes = []
+      const time = this.getTimes(data.times)
+      for (let i = 0; i < data.times; i++) {
+        const startTime = this.formatTimeToHHMM(time[i])
+        const endTime = this.formatTimeToHHMM(time[i + 1])
+        this.times.push(`${startTime} ~ ${endTime}`)
+        this.DateTimes.push(`${time[i]} and ${time[i + 1]}`)
+      }
+      this.renderDeck(data, `${time[0]} and ${time[1]}`)
+    },
+    // 切换抽屉
+    switchDrawers (activeKey) {
+      if (activeKey !== undefined) {
+        console.log('Active Header:', this.DateTimes[activeKey])
+        this.data = []
+        this.renderDeck(this.configurationParameters, this.DateTimes[activeKey])
+        this.rowIndex = activeKey
+      }
     }
   },
   watch: {
     queryParamsName: {
       handler (newValue) {
-        console.log(newValue)
         this.getData(newValue)
       },
       deep: true
@@ -111,6 +210,9 @@ export default {
 </script>
 
 <style scoped>
+.accordion{
+  width: 100%;
+}
 .patient-overview {
   width: 100%;
   padding: 0.5%;
@@ -136,7 +238,7 @@ export default {
   width: 100%;
   padding-left: 1%;
 }
-.overview-section {
+.overview-section{
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
@@ -188,7 +290,7 @@ export default {
   flex-direction: row;
   height: 100%;
 }
-.card_data {
+.card_data{
   display: inline-block;
   max-width: 5ch; /* 最多显示 3 个字符 */
   white-space: nowrap;

package/src/base-client/components/common/XCollapse/XCollapse.vue

@@ -1,145 +1,145 @@
-<template>
-  <div>
-    <a-collapse
-      :activeKey="activeKey"
-      @change="handleChange"
-    >
-      <a-collapse-panel
-        v-for="(panel, panelIndex) in config.showData"
-        :key="panelIndex.toString()"
-        :show-arrow="false"
-      >
-        <template #header>
-          <div class="header-content">
-            <span
-              class="header-text"
-              :style="config.titleStyle"
-            >
-              {{ panel.title }}
-            </span>
-            <span
-              v-for="(item, headerIndex) in panel.title2 || []"
-              :key="headerIndex"
-              class="info-item"
-              :style="config.title2Style"
-            >
-              <span>{{ item.key }}:</span>
-              <span>{{ item.value }}</span>
-            </span>
-            <span
-              class="time-item"
-              :style="config.title3Style"
-            >
-              {{ panel.title3 }}
-            </span>
-          </div>
-        </template>
-        <!-- 根据类型显示不同内容 -->
-        <template v-if="panel.type === 'picture'">
-          <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
-        </template>
-        <template v-else-if="panel.type === 'cover'">
-          <x-report
-            :use-oss-for-img="false"
-            :config-name="panel.configName"
-            server-name="af-his"
-            :show-img-in-cell="true"
-            :display-only="true"
-            :edit-mode="false"
-            :show-save-button="false"
-            :no-padding="true"
-            :dont-format="true">
-          </x-report>
-        </template>
-      </a-collapse-panel>
-    </a-collapse>
-  </div>
-</template>
-
-<script>
-import XReport from '@vue2-client/base-client/components/common/XReportGrid'
-import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
-
-export default {
-  name: 'XCollapse',
-  components: {
-    XReport
-  },
-  data () {
-    return {
-      activeKey: [],
-      config: {}
-    }
-  },
-  props: {
-    // json名
-    queryParamsName: {
-      type: Object,
-      default: 'zsftestConfig'
-    },
-  },
-  created () {
-    this.getData(this.queryParamsName)
-  },
-  methods: {
-    async getData (config) {
-      getConfigByName(config, 'af-his', res => {
-        this.config = res
-        runLogic(res.mainLogic, {}, 'af-his').then(result => {
-          console.log(result)
-          this.config.showData = result
-          this.activeKey = this.config.showData.map((_, panelIndex) => panelIndex.toString())
-        })
-      })
-    },
-    handleChange (keys) {
-      this.activeKey = keys
-    },
-  },
-  watch: {
-    queryParamsName: {
-      handler (newValue) {
-        console.log(newValue)
-        this.getData(newValue)
-      },
-      deep: true
-    }
-  }
-}
-</script>
-
-<style scoped>
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 24px;
-}
-
-.header-text {
-  margin-right: 16px;
-  font-size: 16px;
-  font-weight: 800; /* 默认加粗 */
-}
-
-.info-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #888888;
-}
-
-.time-item {
-  margin-left: auto;
-  text-align: right;
-}
-
-/* 覆盖 ant-design-vue 的默认样式 */
-:deep(.ant-collapse-header) {
-  align-items: center !important;
-}
-
-:deep(.ant-collapse-header-text) {
-  flex: 1;
-}
-</style>
+<template>
+  <div>
+    <a-collapse
+      :activeKey="activeKey"
+      @change="handleChange"
+    >
+      <a-collapse-panel
+        v-for="(panel, panelIndex) in config.showData"
+        :key="panelIndex.toString()"
+        :show-arrow="false"
+      >
+        <template #header>
+          <div class="header-content">
+            <span
+              class="header-text"
+              :style="config.titleStyle"
+            >
+              {{ panel.title }}
+            </span>
+            <span
+              v-for="(item, headerIndex) in panel.title2 || []"
+              :key="headerIndex"
+              class="info-item"
+              :style="config.title2Style"
+            >
+              <span>{{ item.key }}:</span>
+              <span>{{ item.value }}</span>
+            </span>
+            <span
+              class="time-item"
+              :style="config.title3Style"
+            >
+              {{ panel.title3 }}
+            </span>
+          </div>
+        </template>
+        <!-- 根据类型显示不同内容 -->
+        <template v-if="panel.type === 'picture'">
+          <img :src="panel.configName" alt="图片" style="width: 100%; max-width: 500px;"/>
+        </template>
+        <template v-else-if="panel.type === 'cover'">
+          <x-report
+            :use-oss-for-img="false"
+            :config-name="panel.configName"
+            server-name="af-his"
+            :show-img-in-cell="true"
+            :display-only="true"
+            :edit-mode="false"
+            :show-save-button="false"
+            :no-padding="true"
+            :dont-format="true">
+          </x-report>
+        </template>
+      </a-collapse-panel>
+    </a-collapse>
+  </div>
+</template>
+
+<script>
+import XReport from '@vue2-client/base-client/components/common/XReportGrid'
+import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+
+export default {
+  name: 'XCollapse',
+  components: {
+    XReport
+  },
+  data () {
+    return {
+      activeKey: [],
+      config: {}
+    }
+  },
+  props: {
+    // json名
+    queryParamsName: {
+      type: Object,
+      default: 'zsftestConfig'
+    },
+  },
+  created () {
+    this.getData(this.queryParamsName)
+  },
+  methods: {
+    async getData (config) {
+      getConfigByName(config, 'af-his', res => {
+        this.config = res
+        runLogic(res.mainLogic, {}, 'af-his').then(result => {
+          console.log(result)
+          this.config.showData = result
+          this.activeKey = this.config.showData.map((_, panelIndex) => panelIndex.toString())
+        })
+      })
+    },
+    handleChange (keys) {
+      this.activeKey = keys
+    },
+  },
+  watch: {
+    queryParamsName: {
+      handler (newValue) {
+        console.log(newValue)
+        this.getData(newValue)
+      },
+      deep: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
+
+.header-text {
+  margin-right: 16px;
+  font-size: 16px;
+  font-weight: 800; /* 默认加粗 */
+}
+
+.info-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #888888;
+}
+
+.time-item {
+  margin-left: auto;
+  text-align: right;
+}
+
+/* 覆盖 ant-design-vue 的默认样式 */
+:deep(.ant-collapse-header) {
+  align-items: center !important;
+}
+
+:deep(.ant-collapse-header-text) {
+  flex: 1;
+}
+</style>

package/src/base-client/components/common/XCollapse/XCollapseDemo.vue

@@ -0,0 +1,15 @@
+<template>
+  <x-collapse query-params-name="zsftestConfig" />
+</template>
+
+<script>
+import XCollapse from '@vue2-client/base-client/components/common/XCollapse/XCollapse.vue'
+export default {
+  name: 'Demo',
+  components: { XCollapse }
+}
+</script>
+
+<style scoped>
+
+</style>