|
|
@@ -0,0 +1,454 @@
|
|
|
+<!-- 化学品信息(扫码进入) -->
|
|
|
+<template>
|
|
|
+ <view id="chemicalsInfo">
|
|
|
+ <view class="info-data-box">
|
|
|
+ <img class="logo-img" :src="circularLogo">
|
|
|
+ <view class="title-box">
|
|
|
+ <view class="title-one-box">
|
|
|
+ <view>{{newData.data1}}</view>
|
|
|
+ <view>{{newData.data2?'管控':'非管控'}}</view>
|
|
|
+ <view>{{newData.data3}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="title-two-box">编号：{{newData.data4}}</view>
|
|
|
+ <view class="title-three-box">余量：{{newData.data5}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="table-button-max-box">
|
|
|
+ <view class="table-button-box" @click='tableButtonCheck(1)'
|
|
|
+ :class="pageType==1?'checkClass':''">
|
|
|
+ <view>基本信息</view>
|
|
|
+ <view></view>
|
|
|
+ </view>
|
|
|
+ <view class="table-button-box" @click='tableButtonCheck(2)'
|
|
|
+ :class="pageType==2?'checkClass':''">
|
|
|
+ <view>使用记录</view>
|
|
|
+ <view></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <view class="info-max-big-box" v-if="pageType == 1">
|
|
|
+ <view class="info-big-box">
|
|
|
+ <view class="info-box">
|
|
|
+ <view>C A S</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data6}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>别名</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data7}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>类别</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data8}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>规格</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data9}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>归属人</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data10}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view style="width:120rpx;">存储位置</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data11}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-big-box">
|
|
|
+ <view class="info-box">
|
|
|
+ <view>学院</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data12}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>楼栋</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data13}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>实验室</view>
|
|
|
+ <view>:</view>
|
|
|
+ <view>{{newData.data14}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 使用记录 -->
|
|
|
+ <scroll-view class="info-list-box" v-if="pageType == 2" scroll-y @scrolltolower="scrollGet">
|
|
|
+ <view class="for-max-big-box" v-for="(item,index) in dataList" :key="index">
|
|
|
+ <view class="for-title-box">
|
|
|
+ <view class="time-box">{{item.for0}}</view>
|
|
|
+ <view class="position-top-right" :class="item.for9?'colorA':'colorB'">{{item.for9?'领用':'归还'}}</view>
|
|
|
+ <view class="border-box"></view>
|
|
|
+ <view class="position-left"></view>
|
|
|
+ <view class="position-right"></view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-box" v-if="item.for9">
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view>领用人</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for1}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view>领用量</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for2}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view style="width:120rpx;">双人认证</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for3}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-box" v-if="!item.for9">
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view>归还人</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for4}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view>使用量</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for5}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view>余量</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for6}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="for-info-min-box">
|
|
|
+ <view style="width:120rpx;">双人认证</view>
|
|
|
+ <view>：</view>
|
|
|
+ <view>{{item.for7}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="null-box" v-if="!dataList[0]">
|
|
|
+ <img :src="imagesUrl('commonality/chemicalsInfoNull.png')">
|
|
|
+ <view>暂无数据</view>
|
|
|
+ </view>
|
|
|
+ <view class="get-null-box">仅展示最近三个月使用记录</view>
|
|
|
+ <view class="get-null-box" v-if="getDataType">暂无更多数据</view>
|
|
|
+ </scroll-view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ circularLogo: uni.getStorageSync('circularLogo'),
|
|
|
+ newData:{
|
|
|
+ data1:'化学品名称',
|
|
|
+ data2:'1',
|
|
|
+ data3:'使用中',
|
|
|
+ data4:'123456789',
|
|
|
+ data5:'450ml',
|
|
|
+ data6:'123456789',
|
|
|
+ data7:'别名名称',
|
|
|
+ data8:'普通危化品',
|
|
|
+ data9:'450ml/瓶',
|
|
|
+ data10:'课题组',
|
|
|
+ data11:'化学品柜-柜门-柜层',
|
|
|
+ data12:'学院名称',
|
|
|
+ data13:'校区-楼栋',
|
|
|
+ data14:'实验室名称-(房间号)',
|
|
|
+ },
|
|
|
+ pageType:1,
|
|
|
+ //使用记录 相关
|
|
|
+ queryParams: {
|
|
|
+ page: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ dataList: [
|
|
|
+ {
|
|
|
+ for0:'2024-03-03 10:33',
|
|
|
+ for1:'黄老师',
|
|
|
+ for2:'300ml',
|
|
|
+ for3:'李腾腾 杨森',
|
|
|
+ for4:'黄老师',
|
|
|
+ for5:'300ml',
|
|
|
+ for6:'100ml',
|
|
|
+ for7:'李腾腾 杨森',
|
|
|
+ for9:true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ for0:'2024-03-03 10:33',
|
|
|
+ for1:'黄老师',
|
|
|
+ for2:'300ml',
|
|
|
+ for3:'李腾腾 杨森',
|
|
|
+ for4:'黄老师',
|
|
|
+ for5:'300ml',
|
|
|
+ for6:'100ml',
|
|
|
+ for7:'李腾腾 杨森',
|
|
|
+ for9:false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ getDataType: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tableButtonCheck(type){
|
|
|
+ if(this.pageType != type){
|
|
|
+ this.$set(this,'pageType',type);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //滚动事件
|
|
|
+ scrollGet() {
|
|
|
+ let self = this;
|
|
|
+ if (self.total / self.queryParams.pageSize <= self.queryParams.page) {
|
|
|
+ this.$set(this, 'getDataType', true);
|
|
|
+ } else {
|
|
|
+ this.queryParams.page += 1;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getList();
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getList(){
|
|
|
+ // let self = this;
|
|
|
+ // const {
|
|
|
+ // data
|
|
|
+ // } = await systemNoticeGetNoticeList(this.queryParams);
|
|
|
+ // if (data.code == 200) {
|
|
|
+ // if (self.queryParams.page == 1) {
|
|
|
+ // this.$set(this,'dataList',data.data.records);
|
|
|
+ // this.$set(this,'total',data.data.total);
|
|
|
+ // if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
|
|
|
+ // this.$set(this, 'getDataType', true);
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // this.$set(this,'dataList',[...this.dataList, ...data.data.records]);
|
|
|
+ // this.$set(this,'total',data.data.total);
|
|
|
+ // if (data.data.total / self.queryParams.pageSize <= self.queryParams.page) {
|
|
|
+ // this.$set(this, 'getDataType', true);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="stylus" scoped>
|
|
|
+ #chemicalsInfo {
|
|
|
+ height: 100%;
|
|
|
+ display flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .info-data-box{
|
|
|
+ display: flex;
|
|
|
+ background-color: #fff;
|
|
|
+ .logo-img{
|
|
|
+ width:120rpx;
|
|
|
+ height:120rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin:40rpx 40rpx 40rpx 30rpx;
|
|
|
+ }
|
|
|
+ .title-box{
|
|
|
+ .title-one-box{
|
|
|
+ display: flex;
|
|
|
+ view:nth-child(1){
|
|
|
+ font-size:30rpx;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ view:nth-child(2){
|
|
|
+
|
|
|
+ }
|
|
|
+ view:nth-child(3){
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title-two-box{
|
|
|
+
|
|
|
+ }
|
|
|
+ .title-three-box{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-button-max-box{
|
|
|
+ display: flex;
|
|
|
+ height:100rpx;
|
|
|
+ .table-button-box{
|
|
|
+ height:75rpx;
|
|
|
+ width:120rpx;
|
|
|
+ margin:25rpx 30rpx 0 30rpx;
|
|
|
+ view:nth-child(1){
|
|
|
+ font-size:30rpx;
|
|
|
+ line-height:50rpx;
|
|
|
+ height:50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .checkClass{
|
|
|
+ view:nth-child(1){
|
|
|
+ color:#0183FA;
|
|
|
+ }
|
|
|
+ view:nth-child(2){
|
|
|
+ height:4rpx;
|
|
|
+ width:90rpx;
|
|
|
+ margin:0 15rpx;
|
|
|
+ background-color:#0183FA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-max-big-box{
|
|
|
+ margin:0 30rpx 0;
|
|
|
+ .info-big-box{
|
|
|
+ background-color:#fff;
|
|
|
+ margin-bottom:20rpx;
|
|
|
+ border-radius:20rpx;
|
|
|
+ .info-box:nth-child(1){
|
|
|
+ border-top:none;
|
|
|
+ }
|
|
|
+ .info-box{
|
|
|
+ display: flex;
|
|
|
+ border-top:1rpx solid #E0E0E0;
|
|
|
+ margin:0 30rpx;
|
|
|
+ view{
|
|
|
+ height:80rpx;
|
|
|
+ line-height:80rpx;
|
|
|
+ font-size:28rpx;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ view:nth-child(1){
|
|
|
+ width:90rpx;
|
|
|
+ text-align: justify;
|
|
|
+ word-break: break-all;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
+ view:nth-child(2){
|
|
|
+ margin-left:5rpx;
|
|
|
+ }
|
|
|
+ view:nth-child(3){
|
|
|
+ flex:1;
|
|
|
+ text-align: right
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-list-box{
|
|
|
+ flex: 1;
|
|
|
+ overflow: scroll;
|
|
|
+ .for-max-big-box{
|
|
|
+ background-color: #fff;
|
|
|
+ margin:0 30rpx 20rpx 30rpx;
|
|
|
+ border-radius:10rpx;
|
|
|
+ .for-title-box{
|
|
|
+ height:118rpx;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .time-box{
|
|
|
+ height:100rpx;
|
|
|
+ line-height:93rpx;
|
|
|
+ font-size:28rpx;
|
|
|
+ color:#333;
|
|
|
+ padding-left:30rpx;
|
|
|
+ }
|
|
|
+ .position-top-right{
|
|
|
+ position: absolute;
|
|
|
+ top:0;
|
|
|
+ right:0;
|
|
|
+ width:100rpx;
|
|
|
+ height:36rpx;
|
|
|
+ line-height:36rpx;
|
|
|
+ font-size:24rpx;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 0rpx 10rpx 0rpx 6rpx;
|
|
|
+ }
|
|
|
+ .colorA{
|
|
|
+ color:#0183FA;
|
|
|
+ background: rgba(1,131,250,0.2);
|
|
|
+ }
|
|
|
+ .colorB{
|
|
|
+ color:#07BC11;
|
|
|
+ background: rgba(7,188,17,0.2);
|
|
|
+ }
|
|
|
+ .border-box{
|
|
|
+ border-top:1rpx dashed #F5F5F5;
|
|
|
+ height:18rpx;
|
|
|
+ }
|
|
|
+ .position-left{
|
|
|
+ width:30rpx;
|
|
|
+ height:30rpx;
|
|
|
+ z-index:1;
|
|
|
+ position:absolute;
|
|
|
+ bottom:3rpx;
|
|
|
+ left:-15rpx;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border-radius:50%;
|
|
|
+ }
|
|
|
+ .position-right{
|
|
|
+ width:30rpx;
|
|
|
+ height:30rpx;
|
|
|
+ z-index:1;
|
|
|
+ position:absolute;
|
|
|
+ bottom:3rpx;
|
|
|
+ right:-15rpx;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border-radius:50%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-info-box{
|
|
|
+ .for-info-min-box{
|
|
|
+ display: flex;
|
|
|
+ padding:0 30rpx;
|
|
|
+ view{
|
|
|
+ height:80rpx;
|
|
|
+ line-height:80rpx;
|
|
|
+ font-size:28rpx;
|
|
|
+ color:#333;
|
|
|
+ }
|
|
|
+ view:nth-child(1){
|
|
|
+ width:90rpx;
|
|
|
+ text-align: justify;
|
|
|
+ word-break: break-all;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
+ view:nth-child(2){
|
|
|
+ margin-left:5rpx;
|
|
|
+ }
|
|
|
+ view:nth-child(3){
|
|
|
+ flex:1;
|
|
|
+ text-align: right
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .null-box{
|
|
|
+ img{
|
|
|
+ width:300rpx;
|
|
|
+ height:300rpx;
|
|
|
+ margin:150rpx 225rpx 0;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ view{
|
|
|
+ color:#999;
|
|
|
+ font-size:28rpx;
|
|
|
+ line-height:40rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin-top:15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .get-null-box {
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ color: #999;
|
|
|
+ text-align center
|
|
|
+ padding-bottom:200rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
dedsudiyu