App/app-cannengyun
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
仲么了
2023-11-16 15:13:28 +08:00
commit 6023eac4fe
209 changed files with 34095 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

393
pages/chooseLine/chooseLine.css Normal file
View File

@@ -0,0 +1,393 @@
page{
background: rgba(249,249,249,1);;
}
/* 主体开始 */
/* 分割线 */
.line{
background: #F0F0F0;
height: 20rpx;
}
.line-fine{
background: #F0F0F0;
height: 2rpx;
}
/* 时间开始 */
.time-block{
height: 92rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 40rpx;
background: #FFFFFF 100%;
}
.time-block-left{
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 44rpx;
align-items: center;
}
.calendar-pic{
height: 44rpx;
width: 44rpx;
}
.time-text{
color: #303233;
font-size: 30rpx;
margin-left: 20rpx;
}
.time-block-right{
height: 44rpx;
width: 44rpx;
}
.confirm-button{
height: 92rpx;
width: 100%;
}
/* 时间结束 */
.chooseLine-block{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* 搜索开始 */
.search-block{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 126rpx;
padding: 0 40rpx;
background: #FFFFFF;
}
.search-left{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 60rpx;
width: 580rpx;
background:rgba(249,249,249,1);
border-radius:2px;
}
.search-pic{
width: 28rpx;
height: 28rpx;
margin-left: 20rpx;
}
.search-input{
margin-left: 14rpx;
color: #4A4A4A;
font-size: 28rpx;
}
.search-input-placeholder{
font-size: 28rpx;
color: #999999;
}
.search-text{
color: #3982FC;
font-size: 28rpx;
margin-left: 34rpx;
}
/* 搜索结束 */
/* 排序开始 */
.order-block{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 102rpx;
padding: 0 40rpx;
background: #FFFFFF;
box-sizing: border-box;
}
.order-left{
display: flex;
flex-direction: row;
justify-content: flex-start;
white-space: nowrap;
}
.order-left-text{
color: #333333;
font-size: 30rpx;
}
.order-left-pic{
height: 44rpx;
width: 44rpx;
margin-left: 8rpx;
}
.order-center{
display: flex;
flex-direction: row;
justify-content: flex-start;
white-space: nowrap;
}
.order-center-text{
font-size: 30rpx;
color: #333333;
}
.order-center-text-choose{
font-size: 30rpx;
color: #3982FC;
}
.order-center-pic{
height: 44rpx;
width: 44rpx;
margin-left: 8rpx;
}
.order-right{
display: flex;
flex-direction: row;
justify-content: flex-start;
white-space: nowrap;
}
.order-right-text{
font-size: 30rpx;
color: #333333;
}
.order-right-text-choose{
font-size: 30rpx;
color: #3982FC;
}
.order-right-pic{
height: 44rpx;
width: 44rpx;
margin-left: 8rpx;
}
/* 排序结束 */
/* 选择开始 */
.picker-block{
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.select-block{
display: flex;
flex-direction: row;
justify-content: flex-start;
height: 60rpx;
padding: 0 40rpx;
background: #FFFFFF;
box-sizing: border-box;
width: 100%;
}
.select-province{
font-size: 30rpx;
color: #333333;
display: flex;
flex-direction: row;
justify-content: center;
width: 90rpx;
}
.select-province-text{
width: 90rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.select-company{
font-size: 30rpx;
color: #333333;
display: flex;
flex-direction: row;
justify-content: center;
width: 230rpx;
}
.select-company-text{
width: 230rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.select-substation{
font-size: 30rpx;
color: #333333;
display: flex;
flex-direction: row;
justify-content: center;
width: 230rpx;
}
.select-substation-text{
width: 230rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
.show-line-block{
padding: 0 40rpx;
background: #FFFFFF;
box-sizing: border-box;
}
.left-block{
width:110rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background: #FFFFFF;
}
.province{
height: 96rpx;
width:110rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #333333;
font-size: 28rpx;
}
.province-text{
width:110rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.province-selected{
height: 96rpx;
width:110rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(57,130,252,1);
font-size: 28rpx;
background:rgba(249,249,249,1);
border-left: 4px solid rgba(57,130,252,1);
}
.company-block{
width: 234rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 6rpx;
}
.company{
height: 96rpx;
width:234rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #333333;
font-size: 28rpx;
}
.company-text{
width:234rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.company-selected{
height: 96rpx;
width:234rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(57,130,252,1);
font-size: 28rpx;
}
.substation-block{
width: 234rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 6rpx;
}
.substation{
height: 96rpx;
width:234rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #333333;
font-size: 28rpx;
}
.substation-text{
width:234rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.substation-selected{
height: 96rpx;
width:234rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(57,130,252,1);
font-size: 28rpx;
}
.line-block{
width: 154rpx;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: 6rpx;
}
.line{
height: 96rpx;
width:154rpx;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #333333;
font-size: 28rpx;
}
.line-text{
width:154rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.line-selected{
height: 96rpx;
/* width:154rpx; */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: rgba(57,130,252,1);
font-size: 28rpx;
white-space: nowrap;
}
/* 选择结束 */
/* 模糊查询结果开始 */
.search-result-block{
background: #FFFFFF;
padding: 20rpx 40rpx 0 40rpx;
box-sizing: border-box;
}
.each-block{
color: #999999;
font-size: 24rpx;
margin-bottom: 20rpx;
}
/* 模糊查询结果结束 */
/* 重试页面开始 */
.error-block{
height: 60%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: -10%;
margin-top: 300rpx;
}
.retry_button{
margin-top: 10rpx;
border-radius: 10%;
}
/* 重试页面结束 */
/* 主体结束 */

452
pages/chooseLine/chooseLine.vue Normal file
View File

@@ -0,0 +1,452 @@
<template>
<view>
<back :errorMsg="errorMsg" :showFlag="showFlag" :pageName="pageName" :pageNameFlag='pageNameFlag'></back>
<view class="chooseLine-block" v-if="errorFlag==0">
<!-- <view>
<uni-calendar ref="calendar" :insert="false" @confirm="confirm" :range='true'></uni-calendar>
</view>
<view class="time-block" @click="chooseDate">
<view class="time-block-left">
<image class="calendar-pic" src="/static/pic/calendar.png"></image>
<view class="time-text">
{{startDate}}至{{endDate}}
</view>
</view>
<image src="/static/pic/jump.png" class="time-block-right"></image>
</view>
<view class=".line-fine">
</view>
<view class="time-block">
<view class="time-block-left">
<image class="calendar-pic" src="/static/pic/calendar.png"></image>
<view class="time-text">
监测点
</view>
</view>
</view>
<view class=".line-fine">
</view>
<button class="confirm-button" type="primary">确认查询</button>
<view class=".line-fine">
</view> -->
<view class="search-block">
<view class="search-left">
<image src="/static/pic/search.png" class="search-pic"></image>
<input class="search-input" placeholder="请输入" confirm-type="done" type="text" placeholder-class="search-input-placeholder" @input="inputLine" :value="lineName"/>
</view>
<view class="search-text" @click="queryByName">
搜索
</view>
</view>
<view class="order-block">
<view class="order-left" @click="showProvince">
<view class="order-left-text">
监测点选择
</view>
<image src="/static/pic/pull.png" class="order-left-pic"></image>
</view>
<block v-if="showProvinceFlag==1">
<view class="order-center" @click="changeLineFlag(0)" v-if="lineFlag==1">
<view class="order-center-text-choose">
通讯
</view>
<image src="/static/pic/desc.png" class="order-center-pic"></image>
</view>
<view class="order-center" @click="changeLineFlag(1)" v-else>
<view class="order-center-text">
通讯
</view>
<image src="/static/pic/desc.png" class="order-center-pic"></image>
</view>
<view class="order-right" @click="changeLineFlag(0)" v-if="lineFlag==2">
<view class="order-right-text-choose">
流量
</view>
<image src="/static/pic/desc.png" class="order-right-pic"></image>
</view>
<view class="order-right" @click="changeLineFlag(2)" v-else>
<view class="order-right-text">
流量
</view>
<image src="/static/pic/desc.png" class="order-right-pic"></image>
</view>
</block>
</view>
<view :style="{height:pickerHeight}" class="picker-block" v-if="showProvinceFlag==1">
<view class="select-block">
<picker mode="selector" class="select-province" :range="provinceList" range-key="provinceName" @change="changeProvinceSelectedIndex($event,provinceList[provinceListIndex].provinceIndex)" v-if="provinceList.length>0">
<view class="select-province-text">{{provinceList[provinceListIndex].provinceName}}</view>
</picker>
<image src="/static/pic/pull.png" class="order-left-pic" v-if="provinceList.length>0"></image>
<picker mode="selector" class="select-company" :range="companyList" range-key="gdName" @change="changeCompanySelectedIndex($event,companyList[companyListIndex].gdIndex)" v-if="companyList.length>0">
<view class="select-company-text">{{companyList[companyListIndex].gdName}}</view>
</picker>
<image src="/static/pic/pull.png" class="order-left-pic" v-if="companyList.length>0"></image>
<picker mode="selector" class="select-substation" :range="substationList" range-key="subName" @change="changeSubstationSelectedIndex($event,substationList[substationListIndex].subIndex)" v-if="substationList.length>0">
<view class="select-substation-text">{{substationList[substationListIndex].subName}}</view>
</picker>
<image src="/static/pic/pull.png" class="order-left-pic" v-if="substationList.length>0"></image>
</view>
<scroll-view scroll-y="true" class="search-result-block" :style="{height:pickerHeight}" show-scrollbar="false" v-if="lineList.length>0">
<view v-for="line in lineList" @click="selectLine(line.lineIndex,line)">
<view class="each-block">
{{line.lineName}}
</view>
</view>
</scroll-view>
<!-- 左边导航 -->
<!-- <scroll-view scroll-y="true" class="left-block" :style="{height:pickerHeight}" show-scrollbar="false">
<view :class="provinceSelectedIndex==province.provinceIndex?'province-selected':'province'" v-for="province in provinceList" @click="selectProvince(province.provinceIndex)">
<view class="province-text">
{{province.provinceName}}
</view>
</view>
</scroll-view> -->
<!-- 二级联动供电公司 -->
<!-- <scroll-view scroll-y="true" class="company-block" :style="{height:pickerHeight}" show-scrollbar="false" v-if="companyList">
<view :class="companySelectedIndex==company.gdIndex?'company-selected':'company'" v-for="company in companyList" @click="selectCompany(company.gdIndex)">
<view class="company-text">
{{company.gdName}}
</view>
</view>
</scroll-view> -->
<!-- 三级联动变电站 -->
<!-- <scroll-view scroll-y="true" class="substation-block" :style="{height:pickerHeight}" show-scrollbar="false" v-if="substationList">
<view :class="substationSelectedIndex==substation.subIndex?'substation-selected':'substation'" v-for="substation in substationList" @click="selectSubstation(substation.subIndex)">
<view class="substation-text">
{{substation.subName}}
</view>
</view>
</scroll-view> -->
<!-- 四级联动监测点-->
<!-- <scroll-view scroll-y="true" class="line-block" :style="{height:pickerHeight}" show-scrollbar="false" v-if="lineList">
<view :class="lineSelectedIndex==line.lineIndex?'line-selected':'line'" v-for="line in lineList" @click="selectLine(line.lineIndex,line)">
<view class="line-text">
{{line.lineName}}
</view>
</view>
</scroll-view> -->
</view>
<!-- 模糊搜索结果 -->
<scroll-view class="search-result-block" :style="{height:pickerHeight}" scroll-y="true" v-else>
<view class="" v-if="queryByNameList.length!=0">
<view class="each-block" v-for="result in queryByNameList" @click="selectLine(1,result)">
{{result.lineName}}
</view>
</view>
<view class="each-block" v-else>
{{searchResult}}
</view>
</scroll-view>
</view>
<view class="error-block" v-else>
<view class="error-text">
网络出错请重试
</view>
<button class="retry_button" @click="retry">重试</button>
</view>
</view>
</template>
<script>
import uniCalendar from "../../components/uni-calendar/uni-calendar";
import back from '../../components/back.vue';
export default {
data() {
return {
errorFlag:0,
showFlag:0,
errorMsg:'',
provinceList:[{"provinceName":"省份","provinceIndex":0}],
provinceListIndex:0,
provinceSelectedIndex:0,
companyList:[{"gdName":"供电公司","gdIndex":0}],
companyListIndex:0,
companySelectedIndex:0,
substationList:[{"subName":"变电站","subIndex":0}],
substationListIndex:0,
substationSelectedIndex:0,
lineList:[],
lineSelectedIndex:0,
lineName:'',
showProvinceFlag:1,
lineFlag:0,
pickerHeight:'',
queryByNameList:[],
searchResult:'',
startDate:'',
startDateMills:'',
endDate:'',
endDateMills:'',
pageName:'监测点选择',
pageNameFlag:1
}
},
methods: {
scrollH(){
var that =this;
var sys = uni.getSystemInfoSync();
var winWidth = sys.windowWidth;
var winrate = 750/winWidth;
var winHeight= sys.windowHeight;
that.pickerHeight = parseInt((winHeight-50)*winrate-466)+'rpx';
},
queryByName(){
var that = this;
that.showProvinceFlag=0;
if(that.judgeLogin()){
uni.request({
url: that.serverUrl+'/device/queryByName',
method: 'POST',
data: {
lineName:that.lineName,
userId:uni.getStorageSync('userInfo').userId
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify: false,
success: (res) => {
uni.hideLoading();
if (res.data.resultCode == '10000') {
that.queryByNameList = eval(res.data.data);
if(that.queryByNameList.length!=0){
that.searchResult=''
}else{
that.searchResult='暂未搜索到监测点'
}
} else {
that.errorFlag = 1
}
},
fail: (re) => {
that.errorFlag = 1
}
});
}
},
inputLine(e){
this.lineName=e.detail.value;
this.showProvinceFlag=0;
this.searchResult='';
},
showProvince(){
this.showProvinceFlag=1;
},
getProvince(){
var that = this;
uni.request({
url: that.serverUrl+'/device/getProvince',
method: 'POST',
data: {
userId:uni.getStorageSync('userInfo').userId
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify: false,
success: (res) => {
uni.hideLoading();
if (res.data.resultCode == '10000') {
that.provinceList = that.provinceList.concat(eval(res.data.data));
} else {
that.errorFlag = 1
}
},
fail: (re) => {
that.errorFlag = 1
}
});
},
getCompany(){
var that = this;
uni.request({
url: that.serverUrl+'/device/getGDInfo',
method: 'POST',
data: {
userId:uni.getStorageSync('userInfo').userId,
provinceIndex:that.provinceSelectedIndex
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify: false,
success: (res) => {
uni.hideLoading();
if (res.data.resultCode == '10000') {
that.companyList =that.companyList.concat(eval(res.data.data));
} else {
that.errorFlag = 1
}
},
fail: (re) => {
that.errorFlag = 1
}
});
},
getSubstation(){
var that = this;
uni.request({
url: that.serverUrl+'/device/getSubInfo',
method: 'POST',
data: {
userId:uni.getStorageSync('userInfo').userId,
gdIndex:that.companySelectedIndex,
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify: false,
success: (res) => {
uni.hideLoading();
if (res.data.resultCode == '10000') {
that.substationList =that.substationList.concat(eval(res.data.data));
} else {
that.errorFlag = 1
}
},
fail: (re) => {
that.errorFlag = 1
}
});
},
getLine(){
var that = this;
uni.request({
url: that.serverUrl+'/device/getLineInfo',
method: 'POST',
data: {
userId:uni.getStorageSync('userInfo').userId,
subIndex:that.substationSelectedIndex,
type:that.lineFlag
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
sslVerify: false,
success: (res) => {
uni.hideLoading();
if (res.data.resultCode == '10000') {
that.lineList = eval(res.data.data);
} else {
that.errorFlag = 1
}
},
fail: (re) => {
that.errorFlag = 1
}
});
},
selectProvince(index){
this.provinceSelectedIndex=index;
this.getCompany();
},
selectCompany(index){
this.companySelectedIndex=index;
this.getSubstation();
},
selectSubstation(index){
this.substationSelectedIndex=index;
this.getLine();
},
selectLine(index,line){
var that=this;
that.lineSelectedIndex=index;
uni.$emit('lineInfoSelect',line);
uni.navigateBack({
delta:1
})
},
changeLineFlag(flag){
var that=this;
that.lineFlag=flag;
if(that.lineList){
that.getLine();
}
},
changeProvinceSelectedIndex(e,provinceIndex){
var that =this;
that.companyList=[{"gdName":"供电公司","gdIndex":0}]
that.substationList=[{"subName":"变电站","subIndex":0}]
that.provinceListIndex = e.target.value;
that.companyListIndex=0
that.substationListIndex=0
that.lineList=[]
if(e.target.value==0){
return
}else{
that.provinceSelectedIndex=that.provinceList[that.provinceListIndex].provinceIndex;
that.getCompany();
}
},
changeCompanySelectedIndex(e,gdIndex){
var that =this;
that.substationList=[{"subName":"变电站","subIndex":0}]
that.companyListIndex = e.target.value;
that.substationListIndex=0
that.lineList=[]
if(e.target.value==0){
return
}else{
that.companySelectedIndex=that.companyList[that.companyListIndex].gdIndex;
that.getSubstation();
}
},
changeSubstationSelectedIndex(e,subIndex){
var that =this;
if(e.target.value==0){
that.lineList=[]
return
}else{
that.substationListIndex = e.target.value;
that.substationSelectedIndex=that.substationList[that.substationListIndex].subIndex;
that.getLine();
}
},
chooseDate(){
this.$refs.calendar.open();
},
confirm(e){
var that = this;
var before = e.range.before;
var after = e.range.after;
var b = parseInt(before.replace('-','').replace('-',''));
var a = parseInt(after.replace('-','').replace('-',''));
if(a>b){
that.startDate = before;
that.endDate = after;
that.startDateMills = before+' 00:00:00.000';
that.endDateMills = after +' 23:59:59.999';
}else{
that.startDate = after;
that.endDate = before;
that.startDateMills = after+' 00:00:00.000';
that.endDateMills = before +' 23:59:59.999';
}
},
retry(){
this.scrollH();
this.getProvince();
}
},
components:{
back,
uniCalendar
},
onLoad() {
this.scrollH();
this.getProvince();
this.queryByName();
this.endDate=this.formatTime(new Date());
this.startDate=this.endDate.substring(0,8)+'01';
}
}
</script>
<style>
@import url("chooseLine.css");
</style>