<template>
|
<view @click="navigatorPage" class="item">
|
<view class="top">
|
<view class="left df res_nm">
|
<text>{{item.reservoir.res_nm}}</text>
|
</view>
|
<view class="right df oth_reg_cd">
|
<text>{{item.reservoir.oth_reg_cd}}</text>
|
</view>
|
</view>
|
|
<view class="middle">
|
<view class="left">
|
<image lazy-load class="img"
|
:src="item.reservoir.current_site_image&&item.reservoir.current_site_image.url !=''?item.reservoir.current_site_image.url:'https://sk.hubeishuiyi.cn/business/img/emptyImg.514374af.png'">
|
</image>
|
|
</view>
|
<view class="right">
|
<view class="info">
|
<view class="header df location">
|
<text>{{isNullRegion(item.reservoir)}}</text>
|
</view>
|
<view class="content">
|
<view class="custom-slot">
|
<slot name="custom">
|
|
|
</slot>
|
</view>
|
<view class="content-item df">
|
<view class="label">
|
<text>当前水位:</text>
|
</view>
|
<view class="value" :style="{color:item.reservoir.over_z>0?'#FF1818':''}">
|
<text> {{isNull(item.reservoir.rz)}}m</text>
|
<text v-if="item.reservoir.powerIconShow" class="iconfont"
|
:class="item.reservoir.iconClass"></text>
|
</view>
|
</view>
|
|
<view class="content-item df">
|
<view class="label" style="margin-left: 20rpx;">
|
<text>昨日雨量:</text>
|
</view>
|
<view class="value">
|
<text>{{isNull(item.reservoir.ytr_drp)}}mm</text>
|
</view>
|
</view>
|
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="bottom">
|
<view class="btn-group">
|
<view @click="collect(item.reservoir)" style="margin-right: 20rpx;" v-if="item.reservoir.isCollect == 2"
|
class="btn">
|
<view class="icon">
|
<u-icon name="star" color='#1180ff'></u-icon>
|
</view>
|
<view>
|
<text class="text btn">收藏</text>
|
</view>
|
</view>
|
<view @click="collect(item.reservoir)" style="margin-right: 20rpx;" v-if="item.reservoir.isCollect == 1"
|
class="btn">
|
<view class="icon">
|
<u-icon name="star-fill" color='#1180ff'></u-icon>
|
</view>
|
<view>
|
<text class="text btn">取消收藏</text>
|
</view>
|
</view>
|
<view class="btn">
|
<view class="icon">
|
<image class="img-icon"
|
src="@/subPackage/realtimeMonitor/static/img/realtimeMonitiorImg/navigator.png">
|
</image>
|
</view>
|
<view @click="locationNav(item.reservoir)">
|
<text class="text btn">定位</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
</view>
|
</template>
|
|
<script>
|
import tabInfo from "@/subPackage/dbSafety/components/tabInfo.vue"
|
import store from "@/store/index.js"
|
import {
|
getMyCollect,
|
updateCollect
|
} from "@/api/system/user"
|
export default {
|
props: {
|
item: {
|
type: Object,
|
default: () => {}
|
},
|
type: {
|
type: String,
|
required: true
|
}
|
},
|
components: {
|
tabInfo
|
},
|
data() {
|
return {
|
|
}
|
},
|
|
computed: {
|
isNull() {
|
return (prop) => {
|
if (prop === 0 || prop) {
|
return prop
|
} else {
|
return "--"
|
}
|
}
|
},
|
isNullRegion() {
|
return (item => {
|
let region = []
|
if (item.city_nm) {
|
region.push(item.city_nm)
|
}
|
if (item.county_nm) {
|
region.push(item.county_nm)
|
}
|
if (item.town_nm) {
|
region.push(item.town_nm)
|
}
|
return region.join("-")
|
})
|
},
|
},
|
|
created() {
|
|
},
|
mounted() {
|
|
},
|
onLoad(option) {
|
|
},
|
onShow() {
|
|
},
|
methods: {
|
navigatorPage() {
|
let data = JSON.stringify(this.item)
|
this.$u.func.globalNavigator("/subPackage/dbSafety/daba?data=" + data + "&type=" + this.type)
|
},
|
|
collect(item) {
|
let params = {
|
userId: this.userInfo.user_id,
|
resId: item.res_cd,
|
status: item.isCollect == 1 ? 2 : 1
|
}
|
updateCollect(params).then(res => {
|
//提示
|
if (params.status == 1) {
|
this.$u.func.showToast("收藏成功")
|
} else {
|
this.$u.func.showToast("取消成功")
|
}
|
let data = res.data
|
if (JSON.stringify(data) == "{}") {
|
data = ""
|
}
|
this.userInfo.detail.collect = data
|
store.commit("SET_USER_INFO", this.userInfo)
|
this.reservoirInCollect(item)
|
})
|
},
|
|
reservoirInCollect(reservoir) {
|
let collectResIds = this.userInfo.detail.collect
|
reservoir.isCollect = collectResIds.indexOf(reservoir.res_cd) > -1 ? 1 : 2
|
},
|
|
locationNav(item) {
|
uni.openLocation({
|
latitude: item.res_lat,
|
longitude: item.res_lon,
|
scale: 15,
|
name: item.res_nm
|
});
|
},
|
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.item {
|
padding: 10rpx 20rpx;
|
|
.top {
|
display: flex;
|
justify-content: space-between;
|
padding: 16rpx 0;
|
|
.res_nm {
|
color: #333333;
|
font-family: PingFang-SC-Heavy;
|
font-size: 35rpx;
|
}
|
|
.oth_reg_cd {
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #BBBBBB;
|
align-items: center;
|
}
|
|
}
|
|
.middle {
|
display: flex;
|
justify-content: space-between;
|
height: 264rpx;
|
|
.left {
|
width: 35%;
|
|
.img {
|
width: 100%;
|
height: 100%;
|
position: static;
|
|
::v-deep img {
|
position: static;
|
}
|
}
|
}
|
|
.right {
|
width: 70%;
|
font-size: 24rpx;
|
line-height: 30rpx;
|
// margin-left: 20rpx;
|
|
.info {
|
|
.header {
|
justify-content: flex-end;
|
}
|
|
.location {
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #BBBBBB;
|
}
|
|
.content {
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
align-items: center;
|
|
.custom-slot {
|
width: 100%;
|
}
|
|
.content-item:nth-child(2n+1) {
|
// flex: 2;
|
}
|
|
.content-item:nth-child(2n) {
|
// flex: 2;
|
margin-left: 26rpx;
|
}
|
|
.content-item {
|
display: flex;
|
align-items: center;
|
// flex: 2;
|
min-width: 160rpx;
|
height: 40rpx;
|
}
|
}
|
|
}
|
}
|
}
|
|
.bottom {
|
height: 50rpx;
|
display: flex;
|
justify-content: flex-end;
|
|
.left {
|
align-items: center;
|
height: 50rpx;
|
}
|
|
.time {
|
// width: 238rpx;
|
flex: 1; // height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: #BBBBBB;
|
line-height: 28rpx;
|
}
|
|
.btn-group {
|
display: flex;
|
align-items: center;
|
|
.btn {
|
display: flex;
|
align-items: center;
|
|
.img-icon {
|
height: 22rpx;
|
width: 22rpx;
|
position: static;
|
|
::v-deep img {
|
position: static;
|
}
|
}
|
|
.text {
|
// width: 48rpx;
|
height: 22rpx;
|
font-size: 24rpx;
|
font-family: PingFang SC;
|
font-weight: bold;
|
color: #333333;
|
line-height: 28rpx;
|
}
|
|
}
|
}
|
}
|
}
|
|
// text {
|
// font-size: 24rpx;
|
// font-family: PingFang SC;
|
// // font-weight: bold;
|
// color: #333333;
|
// }
|
/deep/ .u-icon__icon {
|
position: static;
|
}
|
|
.df {
|
display: flex;
|
}
|
</style>
|
