vue2-client 1.14.66 → 1.14.68

package/src/base-client/components/TreeList/TreeList.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="tree-container">
+    <div class="tree-list">
+      <tree-node 
+        v-for="node in treeData" 
+        :key="node.id"
+        :node="node"
+        @toggle="toggleNode"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import TreeNode from './TreeNode.vue'
+
+export default {
+  name: 'TreeList',
+  components: {
+    TreeNode
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          id: '1',
+          title: '体征',
+          expanded: false,
+          children: [
+            {
+              id: '1-1',
+              title: '一般情况'
+            },
+            {
+              id: '1-2',
+              title: '皮肤粘膜'
+            },
+            {
+              id: '1-3',
+              title: '头颈',
+              expanded: false,
+              children: [
+                {
+                  id: '1-3-1',
+                  title: '头部'
+                },
+                {
+                  id: '1-3-2',
+                  title: '颈部'
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    toggleNode(node) {
+      node.expanded = !node.expanded
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-container {
+  width: 240px;
+  height: 400px;
+  border: 1px solid #e8e8e8;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+/* 自定义滚动条样式 */
+.tree-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.tree-container::-webkit-scrollbar-thumb {
+  background-color: #ccc;
+  border-radius: 3px;
+}
+
+.tree-container::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+.tree-list {
+  font-size: 14px;
+}
+</style> 

package/src/base-client/components/TreeList/TreeNode.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="tree-node">
+    <div class="node-content" @click="handleClick">
+      <span v-if="hasChildren" class="toggle-icon">
+        {{ node.expanded ? '-' : '+' }}
+      </span>
+      <span class="node-title">{{ node.title }}</span>
+    </div>
+    <div v-if="hasChildren && node.expanded" class="node-children">
+      <tree-node
+        v-for="child in node.children"
+        :key="child.id"
+        :node="child"
+        @toggle="$emit('toggle', $event)"
+        :level="level + 1"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreeNode',
+  props: {
+    node: {
+      type: Object,
+      required: true
+    },
+    level: {
+      type: Number,
+      default: 0
+    }
+  },
+  computed: {
+    hasChildren() {
+      return this.node.children && this.node.children.length > 0
+    }
+  },
+  methods: {
+    handleClick() {
+      if (this.hasChildren) {
+        this.$emit('toggle', this.node)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tree-node {
+  margin: 2px 0;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px 0;
+  user-select: none;
+}
+
+.toggle-icon {
+  width: 16px;
+  text-align: center;
+  font-size: 14px;
+  color: #666;
+  margin-right: 4px;
+  cursor: pointer;
+}
+
+.node-title {
+  flex: 1;
+  cursor: default;
+}
+
+.node-content:hover {
+  background-color: #f5f5f5;
+}
+
+.node-children {
+  padding-left: 20px;
+}
+</style> 

package/src/base-client/components/common/AmapMarker/index.js

@@ -1,3 +1,3 @@
-import AmapPointRendering from './AmapPointRendering'
-
-export default AmapPointRendering
+import AmapPointRendering from './AmapPointRendering'
+
+export default AmapPointRendering

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

@@ -0,0 +1,191 @@
+<template>
+  <a-row
+    class="title_box"
+    :style="{backgroundColor: requiredParameters.backgroundColor,height:requiredParameters.height}"
+    type="flex"
+    v-model="requiredParameters">
+    <a-col class="title_col_left" :flex="3">
+      <div class="title_img_box">
+        <img src="../img/header10086.png" class="title_img" alt="">
+      </div>
+      <div class="title_name">{{ requiredParameters.title }}</div>
+    </a-col>
+    <a-col class="title_col_right" id="titleSelect" :flex="3" style="padding-right: 3%" v-model="dateData">
+      <div class="title_date_box">
+        <div class="title_data">{{ dateData.date }}</div>
+        <div class="title_week">{{ dateData.dayOfWeek }}</div>
+      </div>
+      <div class="title_time">{{ dateData.time }}</div>
+      <div style="font-size: x-large;margin-left: 1%">|</div>
+      <div class="title_refresh" @click="refreshTitle"><a-icon type="undo" style="font-size: x-large;"/></div>
+      <div class="title_refresh_box">
+        <div class="title_refresh_time">{{ dateData.refreshTime }}</div>
+        <div class="latest_update_time">最新更新时间</div>
+      </div>
+    </a-col>
+  </a-row>
+</template>
+
+<script>
+
+export default {
+  name: 'TitleComponent',
+  components: {},
+  data () {
+    return {
+      dateData: {
+        date: '',
+        dayOfWeek: '',
+        time: '',
+        refreshTime: ''
+      },
+      timer: null
+    }
+  },
+  props: {
+    requiredParameters: {
+      type: Object,
+      default: () => ({
+        title: '',
+        backgroundColor: '',
+        height: ''
+      }),
+    }
+  },
+  created () {
+    this.updateDateData()
+    this.startTimer()
+  },
+  beforeDestroy () {
+    this.stopTimer()
+  },
+  methods: {
+    // 刷新页面
+    refreshTitle () {
+      this.$forceUpdate()
+      const now = new Date()
+      this.dateData.refreshTime = now.toLocaleTimeString()
+      this.$emit('refreshTitle')
+    },
+    updateDateData () {
+      const now = new Date()
+      const options = { weekday: 'long' }
+      this.dateData.date = this.formatDate(now)
+      this.dateData.time = this.formatTime(now)
+      this.dateData.dayOfWeek = now.toLocaleDateString(undefined, options)
+      this.dateData.refreshTime = now.toLocaleTimeString()
+    },
+    formatDate (date) {
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      return `${month}月${day}日`
+    },
+    formatTime (date) {
+      const hours = String(date.getHours()).padStart(2, '0')
+      const minutes = String(date.getMinutes()).padStart(2, '0')
+      return `${hours}:${minutes}`
+    },
+    startTimer () {
+      this.timer = setInterval(() => {
+        const now = new Date()
+        this.dateData.time = this.formatTime(now)
+      }, 10000) // 每秒更新一次
+    },
+    stopTimer () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title_box {
+  width: 100%;
+  min-height:42px;
+}
+.title_col_left {
+  height: 100%;
+  color: white;
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+.title_col_right {
+  height: 100%;
+  color: white;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-end;
+}
+.title_img_box {
+  height: 80%;
+  width: auto;
+  margin-left: 1%;
+  border-radius: 50%;
+  background-color: #35baf6;
+}
+.title_img{
+  width: 100%;
+  height: 100%;
+}
+.title_name {
+  font-size: medium !important;
+  font-weight: bold;
+  margin-left: 1%;
+}
+.title_date_box{
+  width: 20%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.title_data{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: smaller;
+}
+.title_week{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: smaller;
+}
+.title_time{
+  font-size: x-large;
+}
+.title_refresh{
+  margin-left: 1%;
+  height: 100%;
+  align-content: center;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  width: 7%;
+  justify-content: center;
+  min-width: 31px;
+}
+.title_refresh:hover{
+  background-color: rgb(31, 138, 137);
+}
+.title_refresh:active{
+  background-color: rgb(26, 129, 128);
+}
+.title_refresh_box{
+  margin-right: 1%;
+}
+.latest_update_time{
+  font-size: x-small;
+}
+.title_refresh_time{
+  display: flex;
+  font-size: x-small;
+  align-content: center;
+  justify-content: center;
+}
+</style>

package/src/base-client/components/common/XDetailsView/index.js

@@ -1,3 +1,3 @@
-import XDetailsView from './XDetailsView'
-
-export default XDetailsView
+import XDetailsView from './XDetailsView'
+
+export default XDetailsView

package/src/base-client/components/common/XFormGroupDetails/index.js

@@ -1,3 +1,3 @@
-import XFormGroupDetails from './XFormGroupDetails'
-
-export default XFormGroupDetails
+import XFormGroupDetails from './XFormGroupDetails'
+
+export default XFormGroupDetails

package/src/base-client/components/his/XList/XList.vue

@@ -1,28 +1,55 @@
 <template>
   <div class="list-wrapper">
     <a-list size="large" :data-source="data" itemLayout="horizontal" class="list-container" ref="listRef">
-      <a-list-item slot="renderItem" slot-scope="item, index" class="list-item" @click="handleClick(index)">
-        <i
-          v-if="icon"
-          class="icon-menu"
-          :style="getIconStyle(item)"
-        ></i>
-        <span
-          class="item-text">
-          {{ item.number }} {{ item.name }}
-        </span>
-
-        <div v-if="button" class="button-group">
-          <a-button
-            v-for="(name, idx) in buttonNames"
-            :key="idx"
-            type="link"
-            :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
-            @click.stop="click(index, idx)"
+      <a-list-item
+        slot="renderItem"
+        slot-scope="item, index"
+        class="list-item"
+        @click="handleClick(index)"
+        @mouseenter="enableHoverOptions && handleMouseEnter(index)"
+        @mouseleave="handleMouseLeave"
+        :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }"
+      >
+          <i
+            v-if="icon"
+            class="icon-menu"
+            :style="getIconStyle(item)"
+          ></i>
+          <span
+            class="item-text">
+            {{ item.number }} {{ item.name }}
+          </span>
+
+          <div v-if="button" class="button-group">
+            <a-button
+              v-for="(name, idx) in buttonNames"
+              :key="idx"
+              type="link"
+              :class="['confirm-btn', buttonMode ? 'hover-btn' : '']"
+              @click.stop="click(index, idx)"
+            >
+              <span :class="{ 'hover-active': enableHoverOptions && hoveredIndex === index }">{{ name }}</span>
+            </a-button>
+          </div>
+
+          <!-- 悬浮选项框 -->
+          <div
+            v-show="enableHoverOptions && hoveredIndex === index"
+            class="hover-options"
+            @mouseenter="handleOptionsEnter"
+            @mouseleave="handleOptionsLeave"
           >
-            {{ name }}
-          </a-button>
-        </div>
+            <div class="hover-options-content">
+              <div
+                v-for="(item, idx) in select_options"
+                :key="idx"
+                class="option-item"
+                @click="handleOptionClick(index, item)"
+              >
+                {{ item }}
+              </div>
+            </div>
+          </div>
       </a-list-item>
     </a-list>
   </div>
@@ -42,6 +69,10 @@ export default {
     fixedQueryForm: {
       type: Object,
       default: { condition: '1=1' }
+    },
+    enableHoverOptions: {
+      type: Boolean,
+      default: true
     }
   },
   inject: ['getComponentByName'],
@@ -51,7 +82,12 @@ export default {
       button: false,
       icon: false,
       buttonNames: [],
-      buttonMode: false
+      buttonMode: false,
+      hoveredIndex: -1,
+      isOptionsHovered: false,
+      hoverTimer: null,
+      leaveTimer: null,
+      select_options: []
     }
   },
   created () {
@@ -65,6 +101,10 @@ export default {
         that.icon = res.icon
         that.buttonNames = res.buttonNames || []
         that.buttonMode = res.buttonMode || false
+        this.enableHoverOptions = res.enableHoverOptions || false
+        if (this.enableHoverOptions) {
+          this.select_options = res.select_options
+        }
         runLogic(res.data, param, 'af-his').then(ress => {
           that.data = ress
         })
@@ -88,6 +128,42 @@ export default {
       runLogic(this.queryParamsName, par, 'af-his').then(res => {
         this.data = res.data
       })
+    },
+    handleMouseEnter (index) {
+      this.clearAllTimers()
+      this.hoveredIndex = index
+      this.isOptionsHovered = true
+    },
+    handleMouseLeave () {
+      this.clearAllTimers()
+      this.leaveTimer = setTimeout(() => {
+        this.isOptionsHovered = false
+        this.hoveredIndex = -1
+      }, 100)
+    },
+    handleOptionsEnter () {
+      this.clearAllTimers()
+      this.isOptionsHovered = true
+    },
+    handleOptionsLeave () {
+      this.clearAllTimers()
+      this.leaveTimer = setTimeout(() => {
+        this.isOptionsHovered = false
+        this.hoveredIndex = -1
+      }, 100)
+    },
+    clearAllTimers () {
+      if (this.hoverTimer) {
+        clearTimeout(this.hoverTimer)
+        this.hoverTimer = null
+      }
+      if (this.leaveTimer) {
+        clearTimeout(this.leaveTimer)
+        this.leaveTimer = null
+      }
+    },
+    handleOptionClick (index, action) {
+      this.$emit('optionClick', { data: this.data[index], action })
     }
   },
   watch: {
@@ -97,6 +173,9 @@ export default {
         this.refreshList(val)
       }
     }
+  },
+  beforeDestroy () {
+    this.clearAllTimers()
   }
 }
 </script>
@@ -124,6 +203,8 @@ export default {
   border: 1px solid #D9D9D9;
   box-sizing: border-box;
   margin-bottom: 8px !important;
+  position: relative;
+  transition: background-color 0.3s ease;
 }
 
 .icon-menu {
@@ -170,4 +251,56 @@ export default {
 .list-wrapper::-webkit-scrollbar-track {
   background-color: #f0f0f0;
 }
+
+.hover-active {
+  color: white;
+}
+
+.list-item.hover-active {
+  background-color: rgb(0, 87, 254) !important;
+  color: white;
+  border: 1px solid black;
+}
+
+.hover-options {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  margin-top: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+
+.hover-options-content {
+  padding: 4px 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.option-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: #333;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.option-item:hover {
+  background-color: #f5f5f5;
+  color: #1890ff;
+}
+
+.option-item:active {
+  background-color: #e6f7ff;
+}
 </style>