.
This commit is contained in:
Iruka
parent
cef307048e
commit
a3c9f1ce94
269
pages/index.vue
269
pages/index.vue
@ -13,6 +13,7 @@
|
|||||||
</uni-nav-bar>
|
</uni-nav-bar>
|
||||||
<custom-select-land ref="refLand" :data="landList" @select=""></custom-select-land>
|
<custom-select-land ref="refLand" :data="landList" @select=""></custom-select-land>
|
||||||
<view class="content">
|
<view class="content">
|
||||||
|
<!-- 顶部搜索框 -->
|
||||||
<view class="header-section">
|
<view class="header-section">
|
||||||
<u-row justify="space-between" gutter="10">
|
<u-row justify="space-between" gutter="10">
|
||||||
<u-col span="8">
|
<u-col span="8">
|
||||||
@ -28,6 +29,7 @@
|
|||||||
</u-row>
|
</u-row>
|
||||||
</view>
|
</view>
|
||||||
<view class="content-section">
|
<view class="content-section">
|
||||||
|
<!-- 统计吸顶效果 -->
|
||||||
<view v-if="isSticky" class="grey-box ceiling"
|
<view v-if="isSticky" class="grey-box ceiling"
|
||||||
:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: 50px']">
|
:style="[isSticky ? 'position: sticky;':'','z-index: 10','top: 50px']">
|
||||||
<u-grid :border="false" col="4">
|
<u-grid :border="false" col="4">
|
||||||
@ -81,7 +83,9 @@
|
|||||||
</u-grid-item>
|
</u-grid-item>
|
||||||
</u-grid>
|
</u-grid>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 列表 -->
|
||||||
<view class="grey-box" style="border-radius: 0 0 15px 15px;">
|
<view class="grey-box" style="border-radius: 0 0 15px 15px;">
|
||||||
|
<!-- 基站 -->
|
||||||
<view class="card">
|
<view class="card">
|
||||||
<u-collapse accordion>
|
<u-collapse accordion>
|
||||||
<u-collapse-item>
|
<u-collapse-item>
|
||||||
@ -174,6 +178,7 @@
|
|||||||
|
|
||||||
</u-collapse>
|
</u-collapse>
|
||||||
</view>
|
</view>
|
||||||
|
<!-- 阀门列表 -->
|
||||||
<view class="card">
|
<view class="card">
|
||||||
<u-collapse accordion>
|
<u-collapse accordion>
|
||||||
<u-collapse-item>
|
<u-collapse-item>
|
||||||
@ -186,6 +191,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<view class="u-collapse-content">
|
<view class="u-collapse-content">
|
||||||
|
<!-- 蝶阀 -->
|
||||||
<u-row>
|
<u-row>
|
||||||
<u-col span="4">
|
<u-col span="4">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
@ -205,6 +211,7 @@
|
|||||||
activeColor="#39ac4f"></u-switch>
|
activeColor="#39ac4f"></u-switch>
|
||||||
</u-col>
|
</u-col>
|
||||||
</u-row>
|
</u-row>
|
||||||
|
<!-- 阀门 -->
|
||||||
<view class="card-grey">
|
<view class="card-grey">
|
||||||
<view class="card-title">
|
<view class="card-title">
|
||||||
<u-row>
|
<u-row>
|
||||||
@ -233,7 +240,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="control">
|
<view class="control">
|
||||||
<u-row>
|
<u-row>
|
||||||
<u-col span="3" style=" align-items: flex-end;">
|
<u-col span="3" style=" align-items: flex-end;" @click="showAnglePopupel">
|
||||||
<view class="buttons">
|
<view class="buttons">
|
||||||
<view class="btn fixed active">
|
<view class="btn fixed active">
|
||||||
<text>①</text>
|
<text>①</text>
|
||||||
@ -241,60 +248,10 @@
|
|||||||
<view class="iconfont icon-suoding icon"></view>
|
<view class="iconfont icon-suoding icon"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-line-progress height="8" :showText="false" :percentage="60" activeColor="#74ffd4"
|
<u-line-progress height="8" :showText="false" :percentage="60"
|
||||||
inactiveColor="#c7c7c7" style="width: 75px;margin-top: 5px;"
|
activeColor="#74ffd4" inactiveColor="#c7c7c7"
|
||||||
@click="show = true">
|
style="width: 75px;margin-top: 5px;">
|
||||||
</u-line-progress>
|
</u-line-progress>
|
||||||
<view>
|
|
||||||
<u-popup :show="show" :mode="mode">
|
|
||||||
<view class="dialog-container">
|
|
||||||
<view class="dialog-title">
|
|
||||||
<view>1-2</view>
|
|
||||||
<view>①开</view>
|
|
||||||
<view class="close-btn">
|
|
||||||
<u-icon name="close" color="#333"
|
|
||||||
size="20"></u-icon>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="dialog-body">
|
|
||||||
<view class="grid">
|
|
||||||
<view class="grid-time">
|
|
||||||
<view>-</view>
|
|
||||||
</view>
|
|
||||||
<view class="grid-time">
|
|
||||||
<view class="logs-data-box">
|
|
||||||
<view class="content" style="height: 100%;">
|
|
||||||
<view>
|
|
||||||
<view style="text-align: center;">
|
|
||||||
52%</view>
|
|
||||||
<view style="width: 100%;">
|
|
||||||
<u-slider :value="value"
|
|
||||||
height="100" blockSize="28"
|
|
||||||
min="0" max="100"
|
|
||||||
activeColor="#15d99b"
|
|
||||||
:step="step"
|
|
||||||
:showValue="false"
|
|
||||||
@changing="changing"
|
|
||||||
@change="change"></u-slider>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="grid-time">
|
|
||||||
<view>+</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="buttons">
|
|
||||||
<u-button type="success" size="large"
|
|
||||||
text="确定"></u-button>
|
|
||||||
<u-button type="info" size="large"
|
|
||||||
text="取消"></u-button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</u-popup>
|
|
||||||
</view>
|
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="6">
|
<u-col span="6">
|
||||||
<view class="valve">
|
<view class="valve">
|
||||||
@ -341,7 +298,7 @@
|
|||||||
<view class="card-title">
|
<view class="card-title">
|
||||||
<u-row>
|
<u-row>
|
||||||
<u-col span="2">
|
<u-col span="2">
|
||||||
<view><text class="font-green">●</text>1-1</view>
|
<view><text class="font-green">●</text>1-2</view>
|
||||||
</u-col>
|
</u-col>
|
||||||
<u-col span="5">
|
<u-col span="5">
|
||||||
<view class="fixed">
|
<view class="fixed">
|
||||||
@ -420,6 +377,12 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<view>
|
||||||
|
<!-- 角度 -->
|
||||||
|
<angle-progress-bar ref="angleBarRef" mode="bottom" @close="" @confirm="swiperConfirm" />
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -432,6 +395,7 @@
|
|||||||
show: false,
|
show: false,
|
||||||
landList: [1, 2, 3],
|
landList: [1, 2, 3],
|
||||||
value: false,
|
value: false,
|
||||||
|
sliderValue: 1,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
@ -465,6 +429,15 @@
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
toQRCode() {},
|
toQRCode() {},
|
||||||
|
showAnglePopupel() {
|
||||||
|
this.$refs.angleBarRef.show("1-1", "①开", 10, {
|
||||||
|
// item: e.row,
|
||||||
|
// index: e.index,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
swiperConfirm(e) {
|
||||||
|
console.error("swiperConfirm:", e);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -829,113 +802,115 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* 弹出进度条 */
|
/* 弹出进度条 */
|
||||||
.dialog-container {
|
// .dialog-container {
|
||||||
min-width: 300px;
|
// min-width: 300px;
|
||||||
|
|
||||||
.dialog-title {
|
// .dialog-title {
|
||||||
position: relative;
|
// position: relative;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
height: 34px;
|
// height: 34px;
|
||||||
line-height: 34px;
|
// line-height: 34px;
|
||||||
border-bottom: 1px solid #ddd;
|
// border-bottom: 1px solid #ddd;
|
||||||
|
|
||||||
&>uni-view {
|
// &>uni-view {
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
font-size: 16px;
|
// font-size: 16px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
&>uni-view:nth-child(2) {
|
// &>uni-view:nth-child(2) {
|
||||||
font-size: 14px;
|
// font-size: 14px;
|
||||||
color: #5bc724;
|
// color: #5bc724;
|
||||||
margin-left: 10px;
|
// margin-left: 10px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.close-btn {
|
// .close-btn {
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 50%;
|
// top: 50%;
|
||||||
right: 10px;
|
// right: 10px;
|
||||||
transform: translateY(-50%);
|
// transform: translateY(-50%);
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
}
|
// }
|
||||||
movable-area {
|
|
||||||
|
|
||||||
height: 30rpx;
|
|
||||||
width: 210px;
|
|
||||||
margin: auto;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #D8D8D8;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
movable-view {
|
// movable-area {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
width: 10px;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #15d99b;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
::v-deep .uni-slider-handle-wrapper {
|
// height: 30rpx;
|
||||||
height: 30px !important;
|
// width: 210px;
|
||||||
}
|
// margin: auto;
|
||||||
|
// border-radius: 5px;
|
||||||
|
// background-color: #D8D8D8;
|
||||||
|
// overflow: hidden;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// movable-view {
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
|
||||||
|
// width: 10px;
|
||||||
|
// height: 100%;
|
||||||
|
// background-color: #15d99b;
|
||||||
|
// color: #fff;
|
||||||
|
// text-align: center;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// ::v-deep .uni-slider-handle-wrapper {
|
||||||
|
// height: 30px !important;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
::v-deep .uni-slider-thumb {
|
// ::v-deep .uni-slider-thumb {
|
||||||
width: 24px !important;
|
// width: 24px !important;
|
||||||
height: 24px !important;
|
// height: 24px !important;
|
||||||
box-shadow: 0 0 0px 4px #74ffd4 !important;
|
// box-shadow: 0 0 0px 4px #74ffd4 !important;
|
||||||
margin-top: -12px !important;
|
// margin-top: -12px !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::v-deep uni-slider {
|
// ::v-deep uni-slider {
|
||||||
margin: 10px 18px 0 18px !important;
|
// margin: 10px 18px 0 18px !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
::v-deep uni-slider .uni-slider-tap-area {
|
// ::v-deep uni-slider .uni-slider-tap-area {
|
||||||
padding: 0 !important;
|
// padding: 0 !important;
|
||||||
}
|
// }
|
||||||
.dialog-body {
|
|
||||||
.grid {
|
|
||||||
margin: 20px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 0.5fr 2fr 0.5fr;
|
|
||||||
|
|
||||||
.grid-time:first-child,
|
// .dialog-body {
|
||||||
.grid-time:last-child {
|
// .grid {
|
||||||
display: grid;
|
// margin: 20px;
|
||||||
justify-items: end;
|
// display: grid;
|
||||||
align-items: end;
|
// grid-template-columns: 0.5fr 2fr 0.5fr;
|
||||||
|
|
||||||
&>uni-view {
|
// .grid-time:first-child,
|
||||||
width: 35px;
|
// .grid-time:last-child {
|
||||||
height: 30px;
|
// display: grid;
|
||||||
background-color: #eaecf0;
|
// justify-items: end;
|
||||||
text-align: center;
|
// align-items: end;
|
||||||
font-size: 30px;
|
|
||||||
line-height: 26px;
|
|
||||||
color: #564556;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-time:last-child {
|
// &>uni-view {
|
||||||
justify-items: left;
|
// width: 35px;
|
||||||
|
// height: 30px;
|
||||||
|
// background-color: #eaecf0;
|
||||||
|
// text-align: center;
|
||||||
|
// font-size: 30px;
|
||||||
|
// line-height: 26px;
|
||||||
|
// color: #564556;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
}
|
// .grid-time:last-child {
|
||||||
}
|
// justify-items: left;
|
||||||
|
|
||||||
.buttons {
|
// }
|
||||||
margin: 40px 10px 10px;
|
// }
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
// .buttons {
|
||||||
|
// margin: 40px 10px 10px;
|
||||||
}
|
// display: flex;
|
||||||
}
|
// justify-content: center;
|
||||||
}
|
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user