Administrator
/
FenXiNspUniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

This commit is contained in:
978184212@qq.com 2025-11-20 09:49:16 +08:00
parent 6b37bb3300
commit 493684077e
4 changed files with 506 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

719
packDetail/pages/sjdyj/index.vue
View File

@ -1,96 +1,108 @@
<template> <template>
<view class="container"> <view class="container">
<scroll-view scroll-y="true" :style="{height:height + 'rpx'}" @refresherrefresh="refresherrefreshFun" @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true"> <scroll-view scroll-y="true" :style="{height:height + 'rpx'}" @refresherrefresh="refresherrefreshFun"
<view class="topScroll"> @refresherpulling="refresherpullingFun" :refresher-triggered="isRefresher" refresher-enabled="true">
<scroll-view scroll-x="true" class="scroll"> <view class="topScroll">
<view class="scroll-item" v-for="(item,index) in topItems" :key="index" @click="chooseClick(item,index)" :class="{'scroll-item2':isActive == index}"> <scroll-view scroll-x="true" class="scroll">
{{item.dictLabel}} <view class="scroll-item" v-for="(item,index) in topItems" :key="index"
<view class="zliebs" v-show="isActive === index"> @click="chooseClick(item,index)" :class="{'scroll-item2':isActive == index}">
</view> {{item.dictLabel}}
</view> <view class="zliebs" v-show="isActive === index">
</scroll-view>
</view>
<block v-if="isActive == 1">
<view class="liebiaos" v-if="">
<view class="searchbox">
<view class="uni-px-8 uni-pb-8">
<text>设备选择：</text>
<uni-data-select v-model="value" :localdata="rangeList" @change="change"></uni-data-select>
</view>
<view class="example-body">
<text>时间区间：</text>
<uni-datetime-picker v-model="rangetime" type="daterange" @maskClick="maskClick" />
</view>
</view>
</view>
<!-- <view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</view>
</view>
</view> -->
</block>
<!-- 监测站告警 -->
<block v-else-if="isActive == 0">
<view class="liebiaos" v-if="List.length != 0">
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
<image src="../../static/fz.png" mode=""></image>
<view class="title">
{{item.stationName}}
</view>
</view>
<view class="itembox_right">
{{item.alertTime}}
</view>
</view> </view>
<view class="itembox_bot">
<block v-if="item.alertContent.length != 0">
<view class="scrolltop">
<view class="tabitem" v-for="(it,i) in tabList" :key="i">
{{it}}
</view>
</view>
<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
<view class="jczbs" v-if="Item.name">
{{Item.name}}
</view>
<view class="zbz" v-if="Item.val">
{{Item.val}}
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valHeight}}
<image class="zximg" src="../../../static/home_shuju_shang.png" mode=""></image>
</view>
<view class="sbsj" v-if="Item.valLow" style="color: #19D58A;">
{{Item.valLow}}
<image class="zximg" src="../../../static/home_shuju_xia.png" mode=""></image>
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
</view>
</view>
</block>
</view>
</view>
<view class="load">
<uni-load-more :status="loadStatus"></uni-load-more>
</view> </view>
</scroll-view> </scroll-view>
</view> </view>
<view class="zwsj" v-else> <block v-if="isActive == 1">
<view class="inzwsj"> <view class="liebiaos" v-if="resolt.length>0">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image> <view class="searchbox">
<view class="zwsjtext"> <view class="uni-px-8 uni-pb-8">
暂无数据 <text>设备选择：</text>
<uni-data-select v-model="value" :localdata="rangeList" @change="change"></uni-data-select>
</view>
<view class="example-body">
<text>时间区间：</text>
<uni-datetime-picker v-model="rangetime" type="daterange" @maskClick="maskClick" />
</view>
</view>
<!-- 趋势图 -->
<view class="qushicov" v-for="(item,index) in resolt" :key="index">
<text class="quname">{{item.itemName}}{{item.unit}}</text>
<view class="charts-box">
<qiun-data-charts type="area" :opts="opts" :chartData="item.chartData" />
</view>
</view> </view>
</view> </view>
</view> <view class="zwsj" v-else>
</block> <view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</view>
</view>
</view>
</block>
<!-- 监测站告警 -->
<block v-else-if="isActive == 0">
<view class="liebiaos" v-if="List.length != 0">
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y"
@scrolltolower="lower">
<view class="itembox" v-for="(item,index) in List" :key="index">
<view class="itembox_top" v-if="item.stationName">
<view class="itembox_lef">
<image src="../../static/fz.png" mode=""></image>
<view class="title">
{{item.stationName}}
</view>
</view>
<view class="itembox_right">
{{item.alertTime}}
</view>
</view>
<view class="itembox_bot">
<block v-if="item.alertContent.length != 0">
<view class="scrolltop">
<view class="tabitem" v-for="(it,i) in tabList" :key="i">
{{it}}
</view>
</view>
<view class="lists_item" v-for="(Item,Index) in item.alertContent" :key="Index">
<view class="jczbs" v-if="Item.name">
{{Item.name}}
</view>
<view class="zbz" v-if="Item.val">
{{Item.val}}
</view>
<view class="sbsj" v-if="Item.valHeight" style="color: #FF4242;">
{{Item.valHeight}}
<image class="zximg" src="../../../static/home_shuju_shang.png" mode="">
</image>
</view>
<view class="sbsj" v-if="Item.valLow" style="color: #19D58A;">
{{Item.valLow}}
<image class="zximg" src="../../../static/home_shuju_xia.png" mode="">
</image>
</view>
<view class="szqss" v-if="Item.unit">
{{Item.unit}}
</view>
</view>
</block>
</view>
</view>
<view class="load">
<uni-load-more :status="loadStatus"></uni-load-more>
</view>
</scroll-view>
</view>
<view class="zwsj" v-else>
<view class="inzwsj">
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
<view class="zwsjtext">
暂无数据
</view>
</view>
</view>
</block>
</scroll-view> </scroll-view>
</view> </view>
</template> </template>
@ -100,70 +112,127 @@
import configService from '@/common/service/config.service.js'; import configService from '@/common/service/config.service.js';
export default { export default {
data() { data() {
const currentDate = this.getDate({
format: true
})
return { return {
List:[], List: [],
baseUrl:configService.apiUrl, baseUrl: configService.apiUrl,
tabList: ['监测指标名称', '监测指标值', '高/低阈值','计量单位'], tabList: ['监测指标名称', '监测指标值', '高/低阈值', '计量单位'],
array:[], array: [],
index:'', index: '',
sampTime:'', sampTime: '',
deviceNo:'', deviceNo: '',
allNum: '', allNum: '',
isLastpage: '', isLastpage: '',
intervalId: null, intervalId: null,
loadStatus:'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式 loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
isLoadMore:false, //是否加载中 isLoadMore: false, //是否加载中
height:0, height: 0,
scorllheight:0, scorllheight: 0,
scorllheights:0, scorllheights: 0,
show:false, show: false,
show1:false, show1: false,
top:0, top: 0,
pageNo:1, pageNo: 1,
pageSize:4, pageSize: 4,
deleteUrl:'/applet/survMulchRecord/delete', deleteUrl: '/applet/survMulchRecord/delete',
stationName:'', stationName: '',
stationCode:'', stationCode: '',
sampTime:'', sampTime: '',
arrays:[], arrays: [],
isRefresher: false, //下拉刷新状态 isRefresher: false, //下拉刷新状态
reload:'', reload: '',
topItems:[ topItems: [{
{ dictLabel: '监测站告警'
dictLabel:'监测站告警'
}, },
{ {
dictLabel:'异常趋势图' dictLabel: '异常趋势图'
} }
], ],
value:0, value: 0,
rangeList: [], rangeList: [],
isActive:0, isActive: 0,
rangetime: [Date.now(), Date.now()], rangetime: [currentDate, currentDate],
deployId:'', deployId: '',
resolt:[], resolt: [],
chartData: {},
opts: {
color: ["#1890FF", "#FF4242", "#19D58A", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272",
"#FC8452", "#9A60B4", "#ea7ccc"
],
padding: [15, 15, 10, 15],
legend: {
show: false, // 显示图例，方便区分各条线
position: "top",
float: "center",
itemGap: 20
},
enableScroll: true,
xAxis: {
disableGrid: true,
itemCount: 14,
scrollShow: true,
scrollAlign: 'left',
labelCount: 14,
boundaryGap: 'justify'
},
yAxis: {
gridType: "dash",
dashLength: 2,
// 添加数据格式化，显示数值
format: (val) => {
return val.toFixed(2);
}
},
extra: {
area: {
type: "curve",
opacity: 0.2,
addLine: true,
width: 2,
gradient: true,
activeType: "hollow"
},
tooltip: {
textStyle: {
fontSize: 12
},
// 自定义提示框内容
format: (item, category, index, opts) => {
return `${category}\n${item.seriesName}: ${item.data}`
}
},
markLine: {
// 可以添加标记线来更明显地显示阈值
data: []
}
}
},
} }
}, },
onLoad() { onLoad() {
uni.getSystemInfo({ uni.getSystemInfo({
success: res => { success: res => {
var pxToRpxScale = 750 / res.windowWidth var pxToRpxScale = 750 / res.windowWidth
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
var navigationHeight = 44 * pxToRpxScale var navigationHeight = 44 * pxToRpxScale
this.height = res.windowHeight * pxToRpxScale//将px 转换rpx this.height = res.windowHeight * pxToRpxScale //将px 转换rpx
this.scorllheight = this.height - 174 this.scorllheight = this.height - 174
this.scorllheights = this.height - 90 this.scorllheights = this.height - 90
} }
}); });
this.getList() this.getList()
this.startTime = this.rangetime[0]
this.endTime = this.rangetime[1]
}, },
onShow() { onShow() {
uni.getSystemInfo({ uni.getSystemInfo({
success: res => { success: res => {
var pxToRpxScale = 750 / res.windowWidth var pxToRpxScale = 750 / res.windowWidth
var ktxStatusHeight = res.statusBarHeight * pxToRpxScale var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
var navigationHeight = 44 * pxToRpxScale var navigationHeight = 44 * pxToRpxScale
this.height = res.windowHeight * pxToRpxScale//将px 转换rpx this.height = res.windowHeight * pxToRpxScale //将px 转换rpx
this.scorllheight = this.height - 174 this.scorllheight = this.height - 174
this.scorllheights = this.height - 90 this.scorllheights = this.height - 90
} }
@ -171,13 +240,27 @@
}, },
watch: { watch: {
rangetime(newval) { rangetime(newval) {
console.log('范围选:', this.rangetime);
this.startTime = this.rangetime[0] this.startTime = this.rangetime[0]
this.endTime = this.rangetime[1] this.endTime = this.rangetime[1]
this.qushiList() this.qushiList()
}, },
}, },
methods:{ methods: {
getDate(type) {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
if (type === 'start') {
year = year - 10;
} else if (type === 'end') {
year = year + 10;
}
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
// 下拉刷新被触发 // 下拉刷新被触发
refresherrefreshFun() { refresherrefreshFun() {
this.pageNo = 1 this.pageNo = 1
@ -186,19 +269,19 @@
}, },
// 下拉刷新触发 // 下拉刷新触发
refresherpullingFun() { refresherpullingFun() {
this.isRefresher= true this.isRefresher = true
}, },
// 切换类型 // 切换类型
chooseClick(item,index){ chooseClick(item, index) {
this.isActive = index; this.isActive = index;
this.pageNo = 1 this.pageNo = 1
this.deviceNo = '' this.deviceNo = ''
this.getList() this.getList()
if(index==1){ if (index == 1) {
this.sbeiList() this.sbeiList()
} }
}, },
getList(){ getList() {
var params = {} var params = {}
params.pageNo = this.pageNo params.pageNo = this.pageNo
params.pageSize = this.pageSize params.pageSize = this.pageSize
@ -206,40 +289,42 @@
title: '加载中' title: '加载中'
}); });
this.List = [] this.List = []
if(this.isActive == 0){ if (this.isActive == 0) {
var url = '/applet/wxclient/alertRecord' var url = '/applet/wxclient/alertRecord'
}else if(this.isActive == 1){ } else if (this.isActive == 1) {
var url= '/applet/survPestlightAlert/list' var url = '/applet/survPestlightAlert/list'
if(this.deviceNo){ if (this.deviceNo) {
params.deviceNo = this.deviceNo params.deviceNo = this.deviceNo
} }
} }
this.$http.get(url,{params:params}).then(res =>{ this.$http.get(url, {
if(res.data.code == 0){ params: params
}).then(res => {
if (res.data.code == 0) {
var data = res.data.data.records var data = res.data.data.records
this.List = this.List.concat(data) this.List = this.List.concat(data)
if(res.data.data.total != 0){ if (res.data.data.total != 0) {
this.allNum = Number(res.data.data.total)/Number(this.pageSize)+''; this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
if(this.allNum.indexOf('.') == -1) { if (this.allNum.indexOf('.') == -1) {
this.allNum = this.allNum; this.allNum = this.allNum;
} else { } else {
this.allNum = parseInt(Number(this.allNum)+1); this.allNum = parseInt(Number(this.allNum) + 1);
} }
if(this.pageNo == this.allNum) { if (this.pageNo == this.allNum) {
this.isLastpage = true; this.isLastpage = true;
this.loadStatus='nomore' this.loadStatus = 'nomore'
} else { } else {
this.isLastpage = false; this.isLastpage = false;
// this.isLoadMore=true // this.isLoadMore=true
this.loadStatus = 'more' this.loadStatus = 'more'
} }
}else{ } else {
this.isLastpage = true; this.isLastpage = true;
this.loadStatus='nomore' this.loadStatus = 'nomore'
} }
} }
uni.hideLoading(); uni.hideLoading();
this.isRefresher= false this.isRefresher = false
}) })
}, },
lower() { lower() {
@ -250,105 +335,237 @@
clearInterval(this.intervalId); clearInterval(this.intervalId);
var num = 1; var num = 1;
this.intervalId = setInterval(() => { this.intervalId = setInterval(() => {
num = num+1; num = num + 1;
},1000) }, 1000)
this.pageNo = this.pageNo + 1; this.pageNo = this.pageNo + 1;
var params = {} var params = {}
params.pageNo = this.pageNo params.pageNo = this.pageNo
params.pageSize = this.pageSize params.pageSize = this.pageSize
if(this.isActive == 0){ if (this.isActive == 0) {
var url= '/applet/survPestlightAlert/list' var url = '/applet/survPestlightAlert/list'
if(this.deviceNo){ if (this.deviceNo) {
params.deviceNo = this.deviceNo params.deviceNo = this.deviceNo
} }
}else if(this.isActive == 1){ } else if (this.isActive == 1) {
var url = '/applet/wxclient/alertRecord' var url = '/applet/wxclient/alertRecord'
} }
this.$http.get(url,{params:params}).then(res =>{ this.$http.get(url, {
if(res.data.code == 0){ params: params
}).then(res => {
if (res.data.code == 0) {
var data = res.data.data.records var data = res.data.data.records
this.List = this.List.concat(data) this.List = this.List.concat(data)
if(res.data.data.total != 0){ if (res.data.data.total != 0) {
if(this.pageNo == this.allNum) { if (this.pageNo == this.allNum) {
this.isLastpage = true; this.isLastpage = true;
this.loadStatus='nomore' this.loadStatus = 'nomore'
} else { } else {
this.isLastpage = false; this.isLastpage = false;
// this.isLoadMore=true // this.isLoadMore=true
this.loadStatus = 'more' this.loadStatus = 'more'
} }
}else{ } else {
this.isLastpage = true; this.isLastpage = true;
this.loadStatus='nomore' this.loadStatus = 'nomore'
} }
} }
}) })
}, },
changenr(){ changenr() {
this.pageNo = 1 this.pageNo = 1
this.getList() this.getList()
}, },
// 趋势图接口 // 趋势图接口
qushiList(){ async qushiList() {
const data = { try {
deployId:this.deployId, const data = {
startTime:this.startTime, deployId: this.deployId,
endTime:this.endTime, startTime: this.startTime,
endTime: this.endTime,
}
const res = await this.$http.post('/applet/survAlertRecord/alertSummary', data)
if (res.data.code === 0) {
let ovelit = res.data.data
this.resolt = ovelit.itemList.map(item => {
return {
...item,
data: ovelit.dataMap[item.entity] || []
}
})
this.timeList = ovelit.timeList || []
this.getServerData(this.resolt);
}
} catch (error) {
console.error("获取趋势图数据失败", error)
} }
this.$http.post('/applet/survAlertRecord/alertSummary',data).then(res => {
console.log("趋势数据",res.data.data)
let ovelit = res.data.data
this.resolt = ovelit.itemList.map(item=>{
return {
...item,
data:ovelit.dataMap[item.entity] || []
}
})
console.log("666666666666",this.resolt)
})
}, },
sbeiList(){ // 设备列表
uni.showLoading({ async sbeiList() {
title: '加载中' try {
}); uni.showLoading({
this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=').then(res =>{ title: '加载中'
let sbList = [] });
this.rangeList = res.data.data.map((lit,index)=>{
return{ const res = await this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=')
"value":index, if (res.data.code === 0) {
"text":lit.deployDes, this.rangeList = res.data.data.map((lit, index) => {
"id":lit.id, return {
"value": index,
"text": lit.deployDes,
"id": lit.id,
}
})
if (this.rangeList.length > 0) {
this.deployId = this.rangeList[this.value].id
await this.qushiList();
} }
}) }
this.deployId = this.rangeList[this.value].id
this.qushiList()
uni.hideLoading(); uni.hideLoading();
}) } catch (error) {
console.error("获取设备列表失败", error)
uni.hideLoading();
}
}, },
// 选择deployid // 选择deployid
change(e) { change(e) {
console.log("单选值", this.rangeList[this.value].id)
this.deployId = this.rangeList[this.value].id this.deployId = this.rangeList[this.value].id
// this.sbeiList() this.sbeiList()
}, },
// 选择日期范围 // 选择日期范围
maskClick(e){ maskClick(e) {
console.log('maskClick事件:', e);
this.startTime = e[0] this.startTime = e[0]
this.endTime = e[1] this.endTime = e[1]
} },
// 处理图表数据（带高亮超出部分）
getServerData(val) {
const chartDataList = val.map(item => {
const series = [];
// 处理主要数据 - 确保都是Number格式
const mainData = (item.data.slice(0, 50) || Array(this.timeList?.length || 0).fill(0))
.map(value => Number(value) || 0);
const highValNum = item.highVal ? Number(item.highVal) || 0 : null;
const lowValNum = item.lowVal ? Number(item.lowVal) || 0 : null;
// 正常数据线
series.push({
name: item.itemName,
data: mainData,
color: "#1890FF"
});
// // 超出最高值的数据点（红色）
// if (highValNum !== null) {
// const highAlertData = mainData.map(value => {
// return value > highValNum ? value : null;
// });
// series.push({
// name: '超出上限',
// data: highAlertData,
// color: "#FF4242",
// pointStyle: {
// shape: 'circle',
// size: 6,
// borderWidth: 2
// },
// lineStyle: 'none' // 不显示连线，只显示点
// });
// }
// // 低于最低值的数据点（绿色）
// if (lowValNum !== null) {
// const lowAlertData = mainData.map(value => {
// return value < lowValNum ? value : null;
// });
// series.push({
// name: '低于下限',
// data: lowAlertData,
// color: "#19D58A",
// pointStyle: {
// shape: 'circle',
// size: 6,
// borderWidth: 2
// },
// lineStyle: 'none' // 不显示连线，只显示点
// });
// }
// 阈值线（保持原来的虚线）
if (highValNum !== null) {
series.push({
name: '最高阈值',
data: Array(this.timeList?.length || 0).fill(highValNum),
color: "#FF4242",
lineType: "solid",
showLabel: false,
// 全局隐藏数据标签
dataLabel: {
fontSize: 0,
show: false
},
});
}
if (lowValNum !== null) {
series.push({
name: '最低阈值',
data: Array(this.timeList?.length || 0).fill(lowValNum),
color: "#19D58A",
lineType: "solid",
showLabel: false,
// 全局隐藏数据标签
dataLabel: {
fontSize: 0,
show: false
},
});
}
return {
categories: this.timeList.slice(0, 50) || [],
series: series
};
});
// 更新resolt数据
this.resolt = this.resolt.map((item, index) => {
return {
...item,
chartData: chartDataList[index] || this.getDefaultChartData(item.itemName)
};
});
console.log("处理后的趋势图数据", this.resolt);
},
// 获取默认图表数据
getDefaultChartData(itemName) {
return {
categories: [],
series: [{
name: itemName,
data: []
}]
};
},
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
page{ page {
height: 100%;
background: #fff;
}
.container {
height: 100%; height: 100%;
} }
.container{
height: 100%; .searchbox {
}
.searchbox{
height: 148rpx; height: 148rpx;
padding: 15rpx 30rpx; padding: 15rpx 30rpx;
background-color: white; background-color: white;
@ -357,7 +574,8 @@
justify-content: space-between; justify-content: space-between;
} }
.search_input{
.search_input {
border: none; border: none;
height: 60rpx; height: 60rpx;
width: 86%; width: 86%;
@ -366,70 +584,83 @@
background-color: #F6F6F6; background-color: #F6F6F6;
padding-left: 50rpx; padding-left: 50rpx;
} }
.searchbox image{
.searchbox image {
width: 32rpx; width: 32rpx;
height: 32rpx; height: 32rpx;
position: absolute; position: absolute;
left: 40rpx; left: 40rpx;
top:35%; top: 35%;
z-index: 99; z-index: 99;
} }
.searchbutton{
.searchbutton {
width: 10%; width: 10%;
height: 60rpx; height: 60rpx;
font-size: 26rpx; font-size: 26rpx;
text-align: center; text-align: center;
line-height: 60rpx; line-height: 60rpx;
} }
.itembox{
.itembox {
background-color: white; background-color: white;
padding: 10rpx 30rpx; padding: 10rpx 30rpx;
margin-top: 20rpx; margin-top: 20rpx;
} }
.itembox:first-child{
.itembox:first-child {
margin-top: 0; margin-top: 0;
} }
.itembox_top{
.itembox_top {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20rpx 0; padding: 20rpx 0;
border-bottom: 2rpx solid #e4e4e4; border-bottom: 2rpx solid #e4e4e4;
} }
.itembox_lef image{
.itembox_lef image {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-right: 14rpx; margin-right: 14rpx;
} }
.itembox_lef{
.itembox_lef {
display: flex; display: flex;
align-items: center; align-items: center;
font-weight: 500; font-weight: 500;
width: 63%; width: 63%;
} }
.title{
.title {
font-weight: bold; font-weight: bold;
} }
.load{
.load {
height: 100rpx; height: 100rpx;
line-height: 100rpx; line-height: 100rpx;
text-align: center; text-align: center;
color: #c6c6c6; color: #c6c6c6;
} }
.zwsj{
.zwsj {
width: 100%; width: 100%;
display: flex; display: flex;
padding: 60% 170rpx 0; padding: 60% 170rpx 0;
} }
.inzwsj{
.inzwsj {
width: 100%; width: 100%;
} }
.zwsjimg{
.zwsjimg {
width: 100%; width: 100%;
height: 224rpx; height: 224rpx;
margin-bottom: 37rpx; margin-bottom: 37rpx;
} }
.zwsjtext{
.zwsjtext {
width: 100%; width: 100%;
font-size: 26rpx; font-size: 26rpx;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
@ -438,46 +669,54 @@
line-height: 31rpx; line-height: 31rpx;
text-align: center; text-align: center;
} }
.topScroll{
.topScroll {
width: 100%; width: 100%;
height: 85rpx; height: 85rpx;
background-color: #fff; background-color: #fff;
border-bottom: 1rpx solid #ededed; border-bottom: 1rpx solid #ededed;
} }
.scroll{
.scroll {
height: 85rpx; height: 85rpx;
display: flex; display: flex;
white-space: nowrap; white-space: nowrap;
justify-content: space-between; justify-content: space-between;
padding-top: 12rpx; padding-top: 12rpx;
} }
.scroll-item{
.scroll-item {
width: 50%; width: 50%;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
font-size: 28rpx; font-size: 28rpx;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
} }
.scroll-item2{
.scroll-item2 {
font-size: 30rpx; font-size: 30rpx;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
color: #0F6EFF; color: #0F6EFF;
} }
.zliebs{
.zliebs {
width: 100rpx; width: 100rpx;
height: 4rpx; height: 4rpx;
background-color: #0F6EFF; background-color: #0F6EFF;
margin: 12rpx auto 0; margin: 12rpx auto 0;
border-radius: 20rpx; border-radius: 20rpx;
} }
.lists_item { .lists_item {
padding: 0rpx 0rpx 16rpx 0rpx; padding: 0rpx 0rpx 16rpx 0rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
} }
.lists_item{
.lists_item {
padding-top: 16rpx; padding-top: 16rpx;
} }
.jczbs { .jczbs {
width: 32%; width: 32%;
font-size: 24rpx; font-size: 24rpx;
@ -502,13 +741,15 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
.zximg{
.zximg {
width: 30rpx; width: 30rpx;
height: 30rpx; height: 30rpx;
margin-left: 6rpx; margin-left: 6rpx;
} }
.szqss { .szqss {
flex:1; flex: 1;
font-size: 24rpx; font-size: 24rpx;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
font-weight: 400; font-weight: 400;
@ -531,19 +772,45 @@
padding-bottom: 8rpx; padding-bottom: 8rpx;
} }
.tabitem:first-child{ .tabitem:first-child {
width: 31%; width: 31%;
} }
.tabitem:nth-child(2){
.tabitem:nth-child(2) {
width: 27%; width: 27%;
} }
.tabitem:nth-child(3){
.tabitem:nth-child(3) {
width: 23%; width: 23%;
} }
.tabitem:nth-child(4){
flex:1 .tabitem:nth-child(4) {
flex: 1
} }
.itembox_right{
.itembox_right {
font-size: 26rpx; font-size: 26rpx;
} }
.charts-box {
width: 100%;
height: 200px;
/* 适当增加高度 */
overflow-x: auto;
/* 允许横向滚动 */
}
.qushicov {
margin-bottom: 60rpx;
overflow: hidden;
.quname {
display: block;
text-align: center;
line-height: 60rpx;
font-weight: bold;
font-size: 28rpx;
margin-bottom: 10rpx;
}
}
</style> </style>

6
packDetail/pages/vidio/detail.vue
View File

@ -17,13 +17,13 @@
</view> </view>
</view> </view>
<view class="state"> <view class="state">
<view class="" v-if="item.runStatus == 0"> <view class="" v-if="item.isOnline == 1">
在线 在线
</view> </view>
<view class="" v-else> <view class="" v-else>
下线 离线
</view> </view>
<image v-if="item.runStatus == 0" src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image> <image v-if="item.isOnline == 1" src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
<image v-else src="../../static/zhandian_icon_lixian.png" mode="" class="zt"></image> <image v-else src="../../static/zhandian_icon_lixian.png" mode="" class="zt"></image>
</view> </view>
</view> </view>

4
packDetail/pages/vidio/index.vue
View File

@ -17,12 +17,12 @@
</view> </view>
</view> </view>
</view> </view>
<view class="state"> <!-- <view class="state">
<view class=""> <view class="">
在线 在线
</view> </view>
<image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image> <image src="../../static/zhandian_icon_zaixian .png" mode="" class="zt"></image>
</view> </view> -->
</view> </view>
<view class="botcontent"> <view class="botcontent">
<block v-for="(item,index) in it" :key="index"> <block v-for="(item,index) in it" :key="index">

51
pages/maps/index.vue
View File

@ -166,54 +166,6 @@
}) })
} }
}, },
// 生成 pointers 数据方法
generatePointers() {
const iconConfig = {
// pestlight: {
// iconPath: '/static/zhandian_sahchong_dingwei.png',
// width: 15,
// height: 20
// },
orient: {
iconPath: '/static/zhandian_nongtian_dingwei.png',
width: 35,
height: 52
},
livestock: {
iconPath: '/static/zhandian_xuqin_dingwei.png',
width: 35,
height: 52
},
cusLocaltion: {
iconPath: '/static/qiyeIcon.png',
width: 35,
height: 52
}
}
this.list.forEach((item, i) => {
const config = iconConfig[item.stationType] || {}
item.iconPath = config.iconPath || ''
item.width = config.width || 0
item.height = config.height || 0
this.pointers.push({
id: i,
iconPath: item.iconPath,
latitude: Number(item.latitude),
longitude: Number(item.longitude),
width: item.width,
height: item.height,
customCallout: {
anchorY: 0, // Y轴偏移量
anchorX: 0, // X轴偏移量
display: 'ALWAYS' // 一直展示
},
stationType: item.stationType,
stationName: item.stationName,
stationCode: item.stationCode,
joinCluster: true // 是否参与点聚合
})
})
},
markertap(e) { markertap(e) {
const index = e.detail.markerId const index = e.detail.markerId
console.log(e.detail, 'index') console.log(e.detail, 'index')
@ -231,9 +183,6 @@
}) })
} }
}, },
todetails(item) {
console.log(item, '还是个然后')
},
qiyeChange() { qiyeChange() {
for (let i = 0; i < this.cusLocation.length; i++) { for (let i = 0; i < this.cusLocation.length; i++) {
const item = this.cusLocation[i]; const item = this.cusLocation[i];