gx232

chenyc

2025-04-14 1910a33a6d7d65e861ad2c8219735801de15419b

gx232

 src/views/deviceWindoes2.vue

@@ -584,7 +584,154 @@
                </div>
            </el-row>
        </div>
        <template v-if="!ispaiban">
          <div  class="chongjian" style="height: 50%;">
            <el-row :gutter="20" style="height: 100%; padding: 20px;">
              <el-col :span="7" style="height: 100%;">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #FFEDD2;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">抗凝剂</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="scrollable-container"  style="height: 100%;">
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.抗凝剂" :key="index">
                              {{item}}
                            </li>

                          </ul>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="container-weiqiandao" >
                  <div class="item-weiqiandao" style="background: #E5EEFF;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">透析方案</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="container-body-text" style="color: #3A75B8;">
                        <template v-for="(item,index) in 当前客户耗材集合.透析模式" :key="index">
                          <span> {{item}}</span><template v-if="当前客户耗材集合.透析模式.length>index+1">,</template>
                        </template>
                        
                      </div>
                    </div>
                  </div>
                  <div class="item-weiqiandao" style="background: #D9F0E2;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">一次性血液透析体外循环管路</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                        <div class="scrollable-container"  style="height: 100%;color: #3AB859;">
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.管路" :key="index">
                              {{item}}
                            </li>
                          
                          </ul>
                        </div>
                    </div>
                  </div>
                  <div class="item-weiqiandao" style="background: #F9DEDE;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">一次性使用透析护理包</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="scrollable-container"  style="height: 100%;color: #902D2D;">
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.护理包" :key="index">
                              {{item}}
                            </li>
                          
                          </ul>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="7" style="height: 100%;">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #EFE5FF;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">一次性使用内瘘穿刺针</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div class="scrollable-container"  style="height: 100%;color: #A78718;">
                          <ul>
                            <li v-for="(item,index) in 当前客户耗材集合.穿刺针" :key="index">
                              {{item}}
                            </li>
                          
                          </ul>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div  class="mowei" style="height: 39%;">
            <el-row :gutter="20" style="height: 100%;padding:10px 20px 20px 20px;">
              <el-col :span="12" style="height: 100%">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #F6F5FA;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">血液透析器</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div  style="height: 100%;color: #333333;font-weight: 600;">
                          <div>
                            <span v-for="(item,index) in 当前客户耗材集合.透析器" :key="index" style="margin-right: 10px">
                              {{item}}<template v-if="当前客户耗材集合.透析器.length>index+1">,</template>
                            </span>
                          
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div  class="container-weiqiandao" style="height: 100%">
                  <div class="item-weiqiandao" style="background: #F6F5FA;border-radius: 8px;height: 100%;">
                    <div class="container-cord" style="height: 30px;">
                      <img style="width: 25px;" referrerpolicy="no-referrer" :src="tsl"
                      />
                      <span class="text-group_3">血液透析滤过器</span>
                    </div>
                    <div class="grid-container" style="height: calc(100% - 30px);width: 100%;">
                      <div style="height: 100%;color: #333333;font-weight: 600;">
                        <div>
                            <span v-for="(item,index) in 当前客户耗材集合.滤过器" :key="index" style="margin-right: 10px">
                              {{item}}<template v-if="当前客户耗材集合.滤过器.length>index+1">,</template>
                            </span>
                          
                          </div>
                        </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        <template v-else>
        <div  style="height: 89%;width: 100%;background: #FEF0E1;;border-radius: 8px; font-size: 100px;">
              <div style="height: 100%;">
                <div class="container-cord" style="height: 100%;padding-left: 20PX;">
@@ -597,6 +744,8 @@
                
              </div>
            </div>
        </template>
       
      </div>
      <el-dialog
      :show-close="false"
@@ -651,6 +800,7 @@
  const { proxy } = getCurrentInstance() as any;
  // 在需要使用的组件中引入
  import { ChatDotSquare } from '@element-plus/icons-vue';
  const ispaiban=ref(false)
  import { ElMessage } from "element-plus";
  // 连接服务器
  const source = ref<EventSourcePolyfill | null>(null);
@@ -669,6 +819,7 @@
    dbp:'111',
    zuihouTime:new Date()
  })
  const 当前客户耗材集合=ref({})
  const deviceData = ref({
    iot_传输时间: "2025-01-10 19:15:24",
    iot_当前脱水量: 2.04,
@@ -1093,6 +1244,9 @@
                      }else{
                        deviceData.value.设备名称=dataBody.IOT信息.床号
                        deviceData.value.患者姓名=''
                        if(dataBody?.使用耗材字典){
                          当前客户耗材集合.value=dataBody?.使用耗材字典
                        }
                      }
                      
                      deviceData.value.设备变化=Date.now() + 'DEV'
@@ -1721,7 +1875,7 @@
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 20px; /* 调整这个值来设置间隔 */
    gap: 10px; /* 调整这个值来设置间隔 */
}

.item-weiqiandao {
@@ -1759,5 +1913,23 @@
    
    
  }
  /* 设置你的div占据整个高度，并在需要时显示滚动条 */
.scrollable-container {
  height: 100%;
  overflow-y: auto; /* 当内容超出容器高度时，垂直方向上显示滚动条 */
}

/* 可选：给ul设置一些样式 */
.scrollable-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.scrollable-container li {
  padding: 4px;
  font-weight: 600;
  // border-bottom: 1px solid #ddd;
}
  
  </style>