667 lines
16 KiB
Vue
667 lines
16 KiB
Vue
<style>
|
||
page{
|
||
background: #f9f9f9;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
::v-deep .u-circle-progress{
|
||
// transform: rotate(-90deg);
|
||
}
|
||
.password-edit-box{
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
margin: 0 30rpx;
|
||
margin-top: 30rpx;
|
||
box-shadow: $box-shadow;
|
||
padding: 25rpx;
|
||
.password-edit-txt{
|
||
}
|
||
.password-edit-btn-box{
|
||
text-align: end;
|
||
}
|
||
}
|
||
.u-progress-content{
|
||
// transform: rotate(90deg);
|
||
// margin-right: -40rpx;
|
||
font-family: Source Han Sans CN;
|
||
text-align: center;
|
||
.u-progress-info{
|
||
font-size: 30rpx;
|
||
color: #349BFF;
|
||
// transform: rotate(90deg);
|
||
}
|
||
.item-content-left-txt{
|
||
font-size: 20rpx;
|
||
color: #333333;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
.project{
|
||
width: 100%;
|
||
// height: 100%;
|
||
background-color: #F9F9F9;
|
||
:not(not) {
|
||
box-sizing: border-box;
|
||
}
|
||
.project-header{
|
||
padding: 30rpx;
|
||
width: 100%;
|
||
background: #f9f9f9;
|
||
&-btn{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.map-box{
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 30rpx;
|
||
height: 294rpx;
|
||
.project-map{
|
||
width: 690rpx;
|
||
height: 334rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
&-content{
|
||
padding: $paddingTB 30rpx;
|
||
.project-item{
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0px 6rpx 0px rgba(158,158,158,0.2);
|
||
border-radius: 20rpx;
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
margin-bottom: 20rpx;
|
||
.item-header{
|
||
padding: 20rpx;
|
||
.item-header-top{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.item-header-top-left{
|
||
display: flex;
|
||
align-items: center;
|
||
.diconfont{
|
||
color: #015EEA;
|
||
font-weight: bold;
|
||
margin-right: 10rpx;
|
||
}
|
||
.item-name{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
.item-header-time{
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
.item-header-bottom{
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 10rpx 20rpx;
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
.diconfont{
|
||
font-size: 22rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
.item-content{
|
||
display: flex;
|
||
align-items: center;
|
||
.item-content-left{
|
||
width: 250rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
.item-content-progress-box{
|
||
width: 200rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// height: 100rpx;
|
||
// overflow: hidden;
|
||
|
||
|
||
}
|
||
}
|
||
.item-content-line{
|
||
height: 162rpx;
|
||
width: 2rpx;
|
||
background-color: #eee;
|
||
}
|
||
.item-content-right{
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
.content-item{
|
||
width:50%;
|
||
padding: 0 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 500;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-bottom: 4rpx;
|
||
.item-value{
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.alarm-box{
|
||
border-top: 2rpx solid #eee;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 30rpx;
|
||
.alarm-item{
|
||
text-align: center;
|
||
font-family: Source Han Sans CN;
|
||
.item-value{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
.item-label{
|
||
margin-top: 10rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
.btn-box{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
&-box{
|
||
color: #666;
|
||
&-info{
|
||
font-size: $uni-font-size-sm;
|
||
}
|
||
&-title{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
&-title-icon{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
padding: 20rpx;
|
||
background: #DFEAFF;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.project-box-summary{
|
||
display: flex;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
padding-top: 30rpx;
|
||
padding-bottom: 20rpx;
|
||
color: #000;
|
||
&-item{
|
||
width: 33%;
|
||
display: flex;
|
||
padding-bottom: 10rpx;
|
||
font-size: 25rpx;
|
||
&-label{
|
||
width: 150rpx;
|
||
font-weight: bold;
|
||
}
|
||
&-value{
|
||
color: #FA7B26;
|
||
}
|
||
}
|
||
}
|
||
.electric-box{
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: space-around;
|
||
flex-wrap: wrap;
|
||
color: #000;
|
||
&-item{
|
||
width: 46%;
|
||
margin-bottom: 20rpx;
|
||
font-size: 25rpx;
|
||
border: 1px solid #ccc;
|
||
background-color: #f7f9fd;
|
||
border-radius: 20rpx;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
padding: 10rpx 0;
|
||
&-label{
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
}
|
||
&-value{
|
||
// color: #FA7B26;
|
||
text{
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-left: 3px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.areaPopup-content{
|
||
padding: 40rpx;
|
||
}
|
||
}
|
||
::v-deep .u-btn--primary--plain{
|
||
background-color:#fff !important;
|
||
}
|
||
.slot-content{
|
||
padding: 30rpx;
|
||
font-size: 28rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
</style>
|
||
|
||
<template>
|
||
<view class="project">
|
||
<view class="project-header">
|
||
<view class="map-box">
|
||
<map class="project-map" :scale="11" :latitude="mapLatitude" :longitude="mapLongitude" :markers="mapMarkers"></map>
|
||
</view>
|
||
<u-search style="background: #fff;" placeholder="搜索项目" :show-action="true" v-model="searchValue" @custom="onSearchFn" @search="onSearchFn"></u-search>
|
||
</view>
|
||
<view >
|
||
<u-empty text="项目列表" margin-top="200" mode="list">
|
||
<view slot="bottom">
|
||
<u-button type="primary" @click="loginShow=true">添加项目</u-button>
|
||
</view>
|
||
</u-empty>
|
||
|
||
|
||
</view>
|
||
<u-modal v-model="loginShow" confirm-text="去登录" @confirm="goLogin">
|
||
<view class="slot-content">
|
||
请先登录
|
||
</view>
|
||
</u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {getLenPx} from "@/utils/mapCalculate.js"
|
||
var QQMapWX = require('@/utils/qqmap-wx-jssdk.min');
|
||
// 实例化API核心类
|
||
var qqmapsdk = new QQMapWX({
|
||
key: 'XQTBZ-HP5CG-FRFQN-QCFTJ-LTG76-LSF6G'
|
||
});
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
loginShow:false,
|
||
passwordStatus:false,
|
||
customStyle: {
|
||
color: '#0066CC',
|
||
borderColor:'#0066CC',
|
||
height:'60rpx'
|
||
},
|
||
// 地区选择------------start
|
||
isAllChecked:false,
|
||
isOpenCity:false,
|
||
isOpenCounty:false,
|
||
|
||
areaPopupFlag:false,
|
||
provinceSelectFlag:false,
|
||
citySelectFlag:false,
|
||
countySelectFlag:false,
|
||
|
||
provinceList:null,
|
||
cityList:null,
|
||
countyList:null,
|
||
areaForm:{
|
||
province:"",
|
||
city:"",
|
||
county:""
|
||
},
|
||
// 地区选择------------end
|
||
itemStyle:{
|
||
marginTop:"30rpx",
|
||
border: "1px solid #ccc",
|
||
borderRadius:"20rpx",
|
||
backgroundColor:"#fff",
|
||
padding:"22rpx",
|
||
},
|
||
searchValue:"",
|
||
projectList:null,
|
||
regionalismCode:0,
|
||
mapLatitude:"26.04",
|
||
mapLongitude:"119.21",
|
||
mapMarkers: [],
|
||
opts: {
|
||
color: ["#2897ff"],
|
||
padding: undefined,
|
||
title: {
|
||
name: "80%",
|
||
fontSize: 12,
|
||
color: "#2897ff"
|
||
},
|
||
subtitle: {
|
||
name: "设备在线率",
|
||
fontSize: 10,
|
||
color: "#666666"
|
||
},
|
||
extra: {
|
||
arcbar: {
|
||
type: "default",
|
||
width: 6,
|
||
backgroundColor: "#f3f4f5",
|
||
startAngle: 0.75,
|
||
endAngle: 0.25,
|
||
gap: 2,
|
||
linearType: "none"
|
||
}
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
// this.getUserInfo()
|
||
},
|
||
onShow() {
|
||
if(this.passwordStatus == true){
|
||
// this.getUserInfo()
|
||
}
|
||
// this.mescroll.resetUpScroll()
|
||
},
|
||
methods: {
|
||
goLogin(){
|
||
// 在C页面内 navigateBack，将返回A页面
|
||
uni.navigateBack({
|
||
delta: 1
|
||
});
|
||
},
|
||
getUserInfo() {
|
||
this.$get("/system/user/profile").then((res) => {
|
||
console.log(res, "res");
|
||
if (!res.data) return;
|
||
if(res.data.updateTime == undefined){
|
||
this.passwordStatus = true;
|
||
}else{
|
||
this.passwordStatus = false;
|
||
}
|
||
uni.setStorageSync("tenantInfo", res.data.tenant)
|
||
uni.setStorageSync("userInfo", res.data)
|
||
})
|
||
},
|
||
goPassword(){
|
||
uni.navigateTo({
|
||
url:'/pages/tabBar/my/passwordModify'
|
||
})
|
||
},
|
||
getOnlineRate(item){
|
||
let deviceTotal = item.tenantIndexVo.deviceTotal||0;
|
||
let onlineTotal = item.tenantIndexVo.onlineTotal||0;
|
||
let onlineRate = (onlineTotal/deviceTotal);
|
||
return onlineRate;
|
||
},
|
||
getOnlineRateTxt(item){
|
||
let deviceTotal = item.tenantIndexVo.deviceTotal||0;
|
||
let onlineTotal = item.tenantIndexVo.onlineTotal||0;
|
||
if(deviceTotal === 0 && onlineTotal === 0){
|
||
return '';
|
||
}else{
|
||
let onlineRateTxt = ((onlineTotal/deviceTotal)*100).toFixed(1) + '%';
|
||
return onlineRateTxt;
|
||
}
|
||
},
|
||
restoreDefaultFn(){
|
||
this.regionalismCode = 0;
|
||
this.areaForm = {
|
||
province:"",
|
||
city:"",
|
||
county:""
|
||
}
|
||
this.confirmFindAreaFn();
|
||
},
|
||
goProjectMapFn(){
|
||
console.log("点击地图")
|
||
let projectListStr = this.projectList && this.projectList.length>0?JSON.stringify(this.projectList):"";
|
||
uni.navigateTo({
|
||
url:`/pages/project/projectMap?projectList=${projectListStr}`
|
||
})
|
||
},
|
||
// 提交项目
|
||
confirmFindAreaFn(){
|
||
this.areaPopupFlag = false;
|
||
this.mescroll.resetUpScroll();
|
||
},
|
||
|
||
// 地区选择------------start
|
||
countyConfirmFn(e){
|
||
this.areaForm.county = e[0].label;
|
||
this.regionalismCode = e[0].value;
|
||
},
|
||
cityConfirmFn(e){
|
||
this.areaForm.city = e[0].label;
|
||
this.regionalismCode = e[0].value;
|
||
this.isOpenCounty = true;
|
||
this.countyList = null;
|
||
this.areaForm.county = "";
|
||
},
|
||
provinceConfirmFn(e){
|
||
this.areaForm.province = e[0].label;
|
||
this.regionalismCode = e[0].value;
|
||
this.isOpenCity = true;
|
||
this.isOpenCounty = false;
|
||
this.countyList = null;
|
||
this.cityList = null;
|
||
this.areaForm.city = "";
|
||
this.areaForm.county = "";
|
||
},
|
||
openCountySelectFn(){
|
||
this.countySelectFlag = true;
|
||
// this.countyList = null;
|
||
if(this.regionalismCode===0 || !this.isOpenCounty || (this.countyList && this.countyList.length>0)) return;
|
||
this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
|
||
console.log(res,"res");
|
||
if(res.code == 200){
|
||
this.countyList = res.data.map((item)=>{
|
||
return {
|
||
value: item.regionalismCode,
|
||
label: item.regionalismName
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 打开城市
|
||
openCitySelectFn(){
|
||
this.citySelectFlag = true;
|
||
// this.cityList = null;
|
||
if(this.regionalismCode===0 || !this.isOpenCity || (this.cityList && this.cityList.length>0)) return;
|
||
|
||
this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
|
||
console.log(res,"res");
|
||
if(res.code == 200){
|
||
this.cityList = res.data.map((item)=>{
|
||
return {
|
||
value: item.regionalismCode,
|
||
label: item.regionalismName
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},
|
||
// 打开省
|
||
openProvinceSelectFn(){
|
||
this.provinceSelectFlag = true;
|
||
if(this.provinceList && this.provinceList.length>0) return;
|
||
this.$get(`/system/regionalism/child/${this.regionalismCode}`).then((res)=>{
|
||
console.log(res,"res");
|
||
if(res.code == 200){
|
||
this.provinceList = res.data.map((item)=>{
|
||
return {
|
||
value: item.regionalismCode,
|
||
label: item.regionalismName
|
||
}
|
||
});
|
||
console.log(this.provinceList,"this.provinceList");
|
||
}
|
||
})
|
||
|
||
},
|
||
// 地区选择------------end
|
||
onSearchFn(e){
|
||
this.loginShow=true
|
||
// this.mescroll.resetUpScroll();
|
||
},
|
||
setProjectAddress(){
|
||
this.addressShow = false;
|
||
uni.chooseLocation({
|
||
success: (res) => {
|
||
qqmapsdk.reverseGeocoder({
|
||
location:{
|
||
latitude: res.latitude,
|
||
longitude: res.longitude
|
||
},
|
||
success: (res1) =>{
|
||
console.log("res1",res1.result);
|
||
this.$put("/iot/project",{
|
||
...this.projectList[0],
|
||
projectLat:res.latitude,
|
||
projectLng:res.longitude,
|
||
projectAddress:res.address+res.name,
|
||
regionalismCode:res1.result.ad_info.adcode
|
||
}).then(editres=>{
|
||
console.log("editres",editres)
|
||
this.addressShow = false;
|
||
if(editres.code == 200){
|
||
this.mescroll.resetUpScroll();
|
||
}else{
|
||
this.$refs.uToast.show({
|
||
title: editres.msg,
|
||
type: 'error',
|
||
})
|
||
}
|
||
}).catch(err=>{
|
||
this.$refs.uToast.show({
|
||
title: err.msg,
|
||
type: 'error',
|
||
})
|
||
})
|
||
},
|
||
fail: (err) => {
|
||
console.log(res);
|
||
}
|
||
})
|
||
}
|
||
});
|
||
},
|
||
/*上拉加载的回调*/
|
||
upCallback(page) {
|
||
// let pageNum = page.num; // 页码, 默认从1开始
|
||
// let pageSize = page.size; // 页长, 默认每页10条
|
||
// let obj = {
|
||
// pageSize:pageSize,
|
||
// pageNum:pageNum,
|
||
// // projectName:this.searchValue
|
||
// // projectId:this.projectIdVal,
|
||
// // deviceState:this.screeningValue,
|
||
// }
|
||
// if(this.regionalismCode) obj.regionalismCode = this.regionalismCode;
|
||
// if(this.searchValue) obj.projectName = this.searchValue;
|
||
// this.$get("/app/project/table",obj).then((res)=>{
|
||
// if (res.rows && res.rows.length>0) {
|
||
|
||
// // 接口返回的当前页数据列表 (数组)
|
||
// let curPageData = res.rows;
|
||
// // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
||
// let curPageLen = curPageData.length;
|
||
|
||
// this.mapLatitude = curPageData[0].projectLat;
|
||
// this.mapLongitude = curPageData[0].projectLng;
|
||
// curPageData.forEach((item,index)=>{
|
||
// this.mapMarkers.push({
|
||
// latitude: item.projectLat,
|
||
// longitude: item.projectLng,
|
||
// iconPath: '../../static/images/project/location-blue.png',
|
||
// label:{
|
||
// content:item.projectName,
|
||
// textAlign:'right',
|
||
// color:'#2897ff',
|
||
// anchorX: -(0.5 * getLenPx(item.projectName, 9)),
|
||
// fontSize:9
|
||
// },
|
||
// width:18,
|
||
// height:20
|
||
// })
|
||
// let res = {
|
||
// series: [
|
||
// {
|
||
// name: "正确率",
|
||
// data: this.getOnlineRate(item)
|
||
// }
|
||
// ]
|
||
// };
|
||
// let opts = JSON.parse(JSON.stringify(this.opts));
|
||
// this.opts.title.name = this.getOnlineRateTxt(item)
|
||
// curPageData[index].chartData = JSON.parse(JSON.stringify(res));
|
||
// curPageData[index].opts = JSON.parse(JSON.stringify(this.opts));
|
||
// })
|
||
|
||
// //设置列表数据
|
||
// if(pageNum == 1) this.projectList = []; //如果是第一页需手动置空列表
|
||
// this.projectList = this.projectList.concat(curPageData); //追加新数据
|
||
// this.mescroll.endBySize(curPageLen, res.total); // 推荐
|
||
// // this.mescroll.endByPage(curPageLen, res.data.total)
|
||
// // this.mescroll.endSuccess(curPageData.length);
|
||
// if(res.total >= 1){
|
||
// if(!curPageData[0].projectAddress && pageNum == 1){
|
||
// this.addressShow = true;
|
||
// }else if(!this.projectList[0].projectAddress){
|
||
// this.addressShow = true;
|
||
// }else{
|
||
// this.addressShow = false;
|
||
// }
|
||
// }
|
||
// } else{
|
||
// this.projectList = [];
|
||
// this.mescroll.endErr();
|
||
// this.mescroll.showEmpty();
|
||
// // this.mescroll.endUpScroll(true);
|
||
// }
|
||
// }).catch(()=>{
|
||
// //联网失败, 结束加载
|
||
// this.mescroll.endErr();
|
||
// }).finally(()=>{
|
||
// // this.dropdownIsOpen = false;
|
||
// })
|
||
},
|
||
enterDetailFn(item){
|
||
uni.navigateTo({
|
||
url:`../project/index?projectId=${item.projectId}&projectCode=${item.projectCode}`
|
||
})
|
||
},
|
||
goDeviceList(item){
|
||
uni.navigateTo({
|
||
url:`../project/equipmentStatus/status?projectId=${item.projectId}`
|
||
})
|
||
},
|
||
onCollapseChangeFn(e,x,y){
|
||
console.log(e,"e");
|
||
console.log(x,"x");
|
||
console.log(y,"y")
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|