|
|
@@ -0,0 +1,505 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="接地线无杆(新）"></u-navbar>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <view class="picture">
|
|
|
+ <img src="../../../assets/img/equipent.png" alt="">
|
|
|
+ <view class="amount">
|
|
|
+ <text>1</text>/
|
|
|
+ <text>5</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 信息 -->
|
|
|
+ <view class="main">
|
|
|
+ <view class="title">
|
|
|
+ 接地线无杆(新）
|
|
|
+ </view>
|
|
|
+ <!-- 标签 -->
|
|
|
+ <view class="tabs ">
|
|
|
+ <u-tabs bar-width="120" inactive-color="#999999" active-color="#000000" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 设备信息 -->
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon"><img src="../../../assets/img/riLine-robot-line@1x.png" alt=""></view>
|
|
|
+ <view class="text">
|
|
|
+ 设备信息
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 规格
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 220kV
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 购置时间
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2022.5
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 数量
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 48
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 设备状况
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 合格
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 单位
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 根
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 试验时间
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2022.05.19
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 制造厂家
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 鸿瑞电力工程有限公司
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 试验周期
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 1年
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 单价
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 无
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 存放地点 -->
|
|
|
+ <view class="content">
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon"><img src="../../../assets/img/riLine-robot-line@1x.png" alt=""></view>
|
|
|
+ <view class="text">
|
|
|
+ 存放地点
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details">
|
|
|
+ <view class="location">
|
|
|
+ 荆力总包仓库A区C货架2-12
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 巡检记录 -->
|
|
|
+ <view class="content">
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon"><img src="../../../assets/img/riLine-device-recover-line@1x.png" alt=""></view>
|
|
|
+ <view class="text">
|
|
|
+ 巡检记录
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="all">
|
|
|
+ 全部记录<u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 提示 -->
|
|
|
+ <view class="hint">
|
|
|
+ <u-alert-tips icon="bell-fill" show-icon="true" type="warning" :title="title" :description="description"></u-alert-tips>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="inspection-contents">
|
|
|
+ <view class="inspection-title">
|
|
|
+ <view class="text">
|
|
|
+ 巡检内容名称
|
|
|
+ </view>
|
|
|
+ <view class="state">
|
|
|
+ 合格
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="inspection-infos">
|
|
|
+ <view class="inspection-personnel">
|
|
|
+ <view class="inspection-name">
|
|
|
+ 巡检人：
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 孙斌
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="inspection-date">
|
|
|
+ 2023/03/15 09:45:21
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 出入库记录 -->
|
|
|
+ <view class="content">
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon"><img src="../../../assets/img/riLine-todo-line@1x.png" alt=""></view>
|
|
|
+ <view class="text">
|
|
|
+ 出入库记录
|
|
|
+ </view>
|
|
|
+ <view class="all">
|
|
|
+ 全部记录<u-icon name="arrow-right"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="records">
|
|
|
+ <view class="records-title">
|
|
|
+ 洪湖华电光伏线路
|
|
|
+ </view>
|
|
|
+ <view class="records-infos">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 借用数量：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 4
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 借出时间：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2023.2.13
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 借用人：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 丁文
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 归还时间：
|
|
|
+ </view>
|
|
|
+ <view class="item-value highlight">
|
|
|
+ 未归还
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="records">
|
|
|
+ <view class="records-title">
|
|
|
+ 仙桃华润恒升线路
|
|
|
+ </view>
|
|
|
+ <view class="records-infos">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 借用数量：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 4
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 借出时间：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2023.2.13
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 借用人：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 丁文
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 归还时间：
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2023.4.1
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ description: '下次巡检时间：2023/03/30',
|
|
|
+ list: [{
|
|
|
+ name: '设备信息'
|
|
|
+ }, {
|
|
|
+ name: '设备位置'
|
|
|
+ }, {
|
|
|
+ name: '巡检记录',
|
|
|
+ },{
|
|
|
+ name:'出入库记录'
|
|
|
+ }],
|
|
|
+ current: 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ change(index) {
|
|
|
+ this.current = index;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ padding-bottom:100px;
|
|
|
+ }
|
|
|
+ /deep/.u-line-1{
|
|
|
+ overflow: inherit;
|
|
|
+ }
|
|
|
+ // 图片
|
|
|
+ .picture{
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .amount{
|
|
|
+ width: 108rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(0, 0, 0, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Arial;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 48rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 信息
|
|
|
+ .main{
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ margin-top:-24rpx;
|
|
|
+ z-index: 999;
|
|
|
+ position: relative;
|
|
|
+ .title{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ padding:0 32rpx;
|
|
|
+ }
|
|
|
+ // 标签
|
|
|
+ .tabs{
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ /deep/.u-tab-bar{
|
|
|
+ background-color: #2A8EFB !important;
|
|
|
+ bottom:-8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .content{
|
|
|
+
|
|
|
+ border-top: 1px solid #B7BDBF;
|
|
|
+ .infos{
|
|
|
+ padding: 32rpx;
|
|
|
+ }
|
|
|
+ .name{
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ .icon{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ line-height: 50rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .all{
|
|
|
+ margin-left: auto;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ // 提示
|
|
|
+ .hint{
|
|
|
+ /deep/.u-alert-desc{
|
|
|
+ color: rgba(255, 121, 0, 1);
|
|
|
+ font-size: 28rpx
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .details{
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(245, 246, 249, 1);
|
|
|
+ padding: 24rpx 24rpx 8rpx 24rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ width: 45%;
|
|
|
+ .item-title{
|
|
|
+ width: 96rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 375px) {
|
|
|
+ .item-title{
|
|
|
+ width: 120rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 300px) {
|
|
|
+ .item-title{
|
|
|
+ width: 130rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-value{
|
|
|
+ flex: 1;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ margin-left: 16rpx;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .location{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ padding-bottom: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .inspection-contents{
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(245, 246, 249, 1);
|
|
|
+ padding: 24rpx ;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ .inspection-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: bold;
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ .state{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 48rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ color: rgba(0, 185, 98, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-family: Microsoft Yahei;
|
|
|
+ border: 1px solid rgba(141, 217, 181, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .inspection-infos{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ line-height: 36rpx;
|
|
|
+ .inspection-personnel{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+
|
|
|
+ };
|
|
|
+ .date{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ // 出入库记录
|
|
|
+ .records{
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(245, 246, 249, 1);
|
|
|
+ padding: 24rpx 24rpx 8rpx 24rpx ;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ .records-title{
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .records-infos{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ .item{
|
|
|
+ font-size: 24rpx;
|
|
|
+ width: 230rpx;
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .highlight{
|
|
|
+ color:#E60012
|
|
|
+ }
|
|
|
+</style>
|
zhengkaixin
