修改页面样式
This commit is contained in:
parent
a47eab0d42
commit
6b37bb3300
|
|
@ -33,6 +33,22 @@
|
||||||
</view>
|
</view>
|
||||||
</picker>
|
</picker>
|
||||||
</view>
|
</view>
|
||||||
|
<view class="uni-form-item uni-column">
|
||||||
|
<radio-group name="radio" class="radio-group" @change="radioChange">
|
||||||
|
<label class="radio-label">
|
||||||
|
<radio value="radio1" color="#0f6efe" class="radio-item" />
|
||||||
|
<text class="radio-text">日</text>
|
||||||
|
</label>
|
||||||
|
<label class="radio-label">
|
||||||
|
<radio value="radio2" color="#0f6efe" class="radio-item" />
|
||||||
|
<text class="radio-text">月</text>
|
||||||
|
</label>
|
||||||
|
<label class="radio-label">
|
||||||
|
<radio value="radio3" color="#0f6efe" class="radio-item" />
|
||||||
|
<text class="radio-text">年</text>
|
||||||
|
</label>
|
||||||
|
</radio-group>
|
||||||
|
</view>
|
||||||
<view class="qstcontent">
|
<view class="qstcontent">
|
||||||
<uni-ec-canvas :ec="ec" canvas-id="multi-charts-pie"></uni-ec-canvas>
|
<uni-ec-canvas :ec="ec" canvas-id="multi-charts-pie"></uni-ec-canvas>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -73,7 +89,7 @@
|
||||||
<view class="lists_item" v-for="(item,index) in list" :key="index">
|
<view class="lists_item" v-for="(item,index) in list" :key="index">
|
||||||
<block>
|
<block>
|
||||||
<view class="jczbs" v-if="item.stationName">
|
<view class="jczbs" v-if="item.stationName">
|
||||||
{{item.stationName}}
|
{{item.stationName}}
|
||||||
</view>
|
</view>
|
||||||
<view class="jczbs" v-else></view>
|
<view class="jczbs" v-else></view>
|
||||||
</block>
|
</block>
|
||||||
|
|
@ -127,7 +143,7 @@
|
||||||
array1: [],
|
array1: [],
|
||||||
arrays: [],
|
arrays: [],
|
||||||
list: [],
|
list: [],
|
||||||
tabList: ['站点名称', '告警指标', '指标值','告警时间'],
|
tabList: ['站点名称', '告警指标', '指标值', '告警时间'],
|
||||||
pjlist: [],
|
pjlist: [],
|
||||||
ec: {
|
ec: {
|
||||||
option: {
|
option: {
|
||||||
|
|
@ -182,7 +198,7 @@
|
||||||
'12月'
|
'12月'
|
||||||
],
|
],
|
||||||
}],
|
}],
|
||||||
|
|
||||||
yAxis: [{
|
yAxis: [{
|
||||||
type: 'value'
|
type: 'value'
|
||||||
}],
|
}],
|
||||||
|
|
@ -205,8 +221,8 @@
|
||||||
stationName1: '',
|
stationName1: '',
|
||||||
stationCode1: null,
|
stationCode1: null,
|
||||||
stationCode: '',
|
stationCode: '',
|
||||||
arrays1:[],
|
arrays1: [],
|
||||||
zxtdata:[]
|
zxtdata: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -216,7 +232,6 @@
|
||||||
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
|
||||||
console.log(this.height, ktxStatusHeight, navigationHeight)
|
|
||||||
this.scorllheight = this.height
|
this.scorllheight = this.height
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
@ -233,12 +248,10 @@
|
||||||
this.array = []
|
this.array = []
|
||||||
this.arrays = []
|
this.arrays = []
|
||||||
this.array1 = ['全部监测站点', ]
|
this.array1 = ['全部监测站点', ]
|
||||||
this.arrays1 = [
|
this.arrays1 = [{
|
||||||
{
|
label: '全部监测站点',
|
||||||
label:'全部监测站点',
|
value: ''
|
||||||
value:''
|
}]
|
||||||
}
|
|
||||||
]
|
|
||||||
this.$http.get('/applet/survStationInfo/list').then(res => {
|
this.$http.get('/applet/survStationInfo/list').then(res => {
|
||||||
for (var i = 0; i < res.data.data.length; i++) {
|
for (var i = 0; i < res.data.data.length; i++) {
|
||||||
this.arrays.push({
|
this.arrays.push({
|
||||||
|
|
@ -251,7 +264,6 @@
|
||||||
})
|
})
|
||||||
this.array.push(res.data.data[i].stationName)
|
this.array.push(res.data.data[i].stationName)
|
||||||
this.array1.push(res.data.data[i].stationName)
|
this.array1.push(res.data.data[i].stationName)
|
||||||
// console.log(this.array,this.array1)
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -281,32 +293,26 @@
|
||||||
data[i].miao = data[i].times[5];
|
data[i].miao = data[i].times[5];
|
||||||
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
||||||
.fen
|
.fen
|
||||||
if(data[i].alertContent.indexOf('监测数据名称:') != -1){
|
if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
||||||
data[i].alertContent = data[i].alertContent.replace('监测数据名称:','')
|
data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.list = this.list.concat(data)
|
this.list = this.list.concat(data)
|
||||||
this.total = res.data.data.total
|
this.total = res.data.data.total
|
||||||
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) + '';
|
||||||
console.log(this.allNum, '总页数')
|
|
||||||
if (this.allNum.indexOf('.') == -1) {
|
if (this.allNum.indexOf('.') == -1) {
|
||||||
this.allNum = this.allNum;
|
this.allNum = this.allNum;
|
||||||
console.log(this.allNum, 'if')
|
|
||||||
} else {
|
} else {
|
||||||
this.allNum = parseInt(Number(this.allNum) + 1);
|
this.allNum = parseInt(Number(this.allNum) + 1);
|
||||||
console.log(this.allNum, 'else')
|
|
||||||
}
|
}
|
||||||
console.log(this.pageNo, this.allNum, '156156')
|
|
||||||
if (this.pageNo == this.allNum) {
|
if (this.pageNo == this.allNum) {
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
this.loadStatus = 'nomore'
|
this.loadStatus = 'nomore'
|
||||||
console.log(this.isLastpage, 'true', 'nomore')
|
|
||||||
} else {
|
} else {
|
||||||
this.isLastpage = false;
|
this.isLastpage = false;
|
||||||
// this.isLoadMore=true
|
// this.isLoadMore=true
|
||||||
this.loadStatus = 'more'
|
this.loadStatus = 'more'
|
||||||
console.log(this.isLastpage, 'false')
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
|
|
@ -319,7 +325,6 @@
|
||||||
},
|
},
|
||||||
// 分页加载
|
// 分页加载
|
||||||
lower() {
|
lower() {
|
||||||
console.log("最后一页了,取消下拉功能");
|
|
||||||
// 最后一页了,取消下拉功能
|
// 最后一页了,取消下拉功能
|
||||||
if (this.isLastpage) {
|
if (this.isLastpage) {
|
||||||
return
|
return
|
||||||
|
|
@ -329,7 +334,6 @@
|
||||||
this.intervalId = setInterval(() => {
|
this.intervalId = setInterval(() => {
|
||||||
num = num + 1;
|
num = num + 1;
|
||||||
}, 1000)
|
}, 1000)
|
||||||
console.log(this.intervalId, num)
|
|
||||||
this.pageNo = this.pageNo + 1;
|
this.pageNo = this.pageNo + 1;
|
||||||
let params = {}
|
let params = {}
|
||||||
params.pageNo = this.pageNo
|
params.pageNo = this.pageNo
|
||||||
|
|
@ -351,8 +355,8 @@
|
||||||
data[i].miao = data[i].times[5];
|
data[i].miao = data[i].times[5];
|
||||||
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
|
||||||
.fen
|
.fen
|
||||||
if(data[i].alertContent.indexOf('监测数据名称:') != -1){
|
if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
|
||||||
data[i].alertContent = data[i].alertContent.replace('监测数据名称:','')
|
data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.list = this.list.concat(data)
|
this.list = this.list.concat(data)
|
||||||
|
|
@ -360,12 +364,10 @@
|
||||||
if (this.pageNo == this.allNum) {
|
if (this.pageNo == this.allNum) {
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
this.loadStatus = 'nomore'
|
this.loadStatus = 'nomore'
|
||||||
console.log(this.isLastpage, 'true')
|
|
||||||
} else {
|
} else {
|
||||||
this.isLastpage = false;
|
this.isLastpage = false;
|
||||||
// this.isLoadMore=true
|
// this.isLoadMore=true
|
||||||
this.loadStatus = 'more'
|
this.loadStatus = 'more'
|
||||||
console.log(this.isLastpage, 'false')
|
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
|
|
@ -386,6 +388,10 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 选择年月日
|
||||||
|
radioChange(e){
|
||||||
|
console.log("选择年月日.......",e)
|
||||||
|
},
|
||||||
// 获取折线图
|
// 获取折线图
|
||||||
gettj() {
|
gettj() {
|
||||||
if (!this.stationCode) {
|
if (!this.stationCode) {
|
||||||
|
|
@ -393,94 +399,91 @@
|
||||||
}
|
}
|
||||||
this.$http.post('/applet/wxclient/getPplutionSummry?stationCode=' + this.stationCode).then(res => {
|
this.$http.post('/applet/wxclient/getPplutionSummry?stationCode=' + this.stationCode).then(res => {
|
||||||
this.zxtdata = res.data.data[0]
|
this.zxtdata = res.data.data[0]
|
||||||
console.log(this.array[this.index],'弄哦文')
|
this.ec.option.legend.data = ['总磷', '总氮', '硝态氮']
|
||||||
this.ec.option.legend.data = ['总磷', '总氮','硝态氮']
|
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF']
|
||||||
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF']
|
this.ec.option.series = [{
|
||||||
this.ec.option.series = [
|
name: '总磷',
|
||||||
{
|
type: 'line',
|
||||||
name: '总磷',
|
stack: 'Total1',
|
||||||
type: 'line',
|
areaStyle: { //区域填充渐变颜色
|
||||||
stack: 'Total1',
|
color: {
|
||||||
areaStyle: { //区域填充渐变颜色
|
type: 'linear',
|
||||||
color: {
|
x: 0,
|
||||||
type: 'linear',
|
y: 0,
|
||||||
x: 0,
|
x2: 0,
|
||||||
y: 0,
|
y2: 1,
|
||||||
x2: 0,
|
colorStops: [{
|
||||||
y2: 1,
|
offset: 0,
|
||||||
colorStops: [{
|
color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
|
||||||
offset: 0,
|
}, {
|
||||||
color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
|
offset: 1,
|
||||||
}, {
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
||||||
offset: 1,
|
}],
|
||||||
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
global: false // 缺省为 false
|
||||||
}],
|
}
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: this.zxtdata.TPSummry
|
|
||||||
},
|
},
|
||||||
{
|
emphasis: {
|
||||||
name: '总氮',
|
focus: 'series'
|
||||||
type: 'line',
|
|
||||||
stack: 'Total2',
|
|
||||||
areaStyle: { //区域填充渐变颜色
|
|
||||||
color: {
|
|
||||||
type: 'linear',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色
|
|
||||||
}, {
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
|
||||||
}],
|
|
||||||
global: false // 缺省为 false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: this.zxtdata.TNSummry
|
|
||||||
},
|
},
|
||||||
{
|
data: this.zxtdata.TPSummry
|
||||||
name: '硝态氮',
|
},
|
||||||
type: 'line',
|
{
|
||||||
stack: 'Total3',
|
name: '总氮',
|
||||||
areaStyle: { //区域填充渐变颜色
|
type: 'line',
|
||||||
color: {
|
stack: 'Total2',
|
||||||
type: 'linear',
|
areaStyle: { //区域填充渐变颜色
|
||||||
x: 0,
|
color: {
|
||||||
y: 0,
|
type: 'linear',
|
||||||
x2: 0,
|
x: 0,
|
||||||
y2: 1,
|
y: 0,
|
||||||
colorStops: [{
|
x2: 0,
|
||||||
offset: 0,
|
y2: 1,
|
||||||
color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色
|
colorStops: [{
|
||||||
}, {
|
offset: 0,
|
||||||
offset: 1,
|
color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色
|
||||||
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
}, {
|
||||||
}],
|
offset: 1,
|
||||||
global: false // 缺省为 false
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
||||||
}
|
}],
|
||||||
},
|
global: false // 缺省为 false
|
||||||
emphasis: {
|
}
|
||||||
focus: 'series'
|
|
||||||
},
|
|
||||||
data: this.zxtdata.NOSummry
|
|
||||||
},
|
},
|
||||||
]
|
emphasis: {
|
||||||
if(this.array[this.index].indexOf('畜禽') != -1){
|
focus: 'series'
|
||||||
this.ec.option.legend.data = ['总磷', '总氮','COD','氨氮']
|
},
|
||||||
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF','#FF3B3B']
|
data: this.zxtdata.TNSummry
|
||||||
this.ec.option.series = [
|
},
|
||||||
{
|
{
|
||||||
|
name: '硝态氮',
|
||||||
|
type: 'line',
|
||||||
|
stack: 'Total3',
|
||||||
|
areaStyle: { //区域填充渐变颜色
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
global: false // 缺省为 false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: this.zxtdata.NOSummry
|
||||||
|
},
|
||||||
|
]
|
||||||
|
if (this.array[this.index].indexOf('畜禽') != -1) {
|
||||||
|
this.ec.option.legend.data = ['总磷', '总氮', 'COD', '氨氮']
|
||||||
|
this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF', '#FF3B3B']
|
||||||
|
this.ec.option.series = [{
|
||||||
name: '总磷',
|
name: '总磷',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total1',
|
stack: 'Total1',
|
||||||
|
|
@ -590,7 +593,6 @@
|
||||||
},
|
},
|
||||||
// 折线图切换站点
|
// 折线图切换站点
|
||||||
bindPickerChange: function(e) {
|
bindPickerChange: function(e) {
|
||||||
console.log('picker发送选择改变,携带值为', e.detail.value)
|
|
||||||
this.index = e.detail.value
|
this.index = e.detail.value
|
||||||
this.stationName = this.array[this.index]
|
this.stationName = this.array[this.index]
|
||||||
for (var i = 0; i < this.arrays.length; i++) {
|
for (var i = 0; i < this.arrays.length; i++) {
|
||||||
|
|
@ -602,7 +604,6 @@
|
||||||
},
|
},
|
||||||
// 预警切换站点
|
// 预警切换站点
|
||||||
bindPickerChange1: function(e) {
|
bindPickerChange1: function(e) {
|
||||||
console.log('picker发送选择改变,携带值为', e.detail.value)
|
|
||||||
this.index1 = e.detail.value
|
this.index1 = e.detail.value
|
||||||
this.stationName1 = this.array1[this.index1]
|
this.stationName1 = this.array1[this.index1]
|
||||||
for (var i = 0; i < this.arrays.length; i++) {
|
for (var i = 0; i < this.arrays.length; i++) {
|
||||||
|
|
@ -876,22 +877,25 @@
|
||||||
padding-bottom: 26rpx;
|
padding-bottom: 26rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabitem:first-child{
|
.tabitem:first-child {
|
||||||
width: 31%;
|
width: 31%;
|
||||||
// text-align: center
|
// text-align: center
|
||||||
}
|
}
|
||||||
.tabitem:nth-child(2){
|
|
||||||
|
.tabitem:nth-child(2) {
|
||||||
width: 27%;
|
width: 27%;
|
||||||
// text-align: center
|
// text-align: center
|
||||||
}
|
}
|
||||||
.tabitem:nth-child(3){
|
|
||||||
|
.tabitem:nth-child(3) {
|
||||||
width: 19%;
|
width: 19%;
|
||||||
// text-align: center
|
// text-align: center
|
||||||
}
|
}
|
||||||
.tabitem:nth-child(4){
|
|
||||||
flex:1
|
.tabitem:nth-child(4) {
|
||||||
// text-align: center
|
flex: 1 // text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.scroll-Y {
|
.scroll-Y {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
@ -955,6 +959,7 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
// text-align: center
|
// text-align: center
|
||||||
}
|
}
|
||||||
|
|
||||||
.load {
|
.load {
|
||||||
// height: 50rpx;
|
// height: 50rpx;
|
||||||
// line-height: 50rpx;
|
// line-height: 50rpx;
|
||||||
|
|
@ -965,4 +970,65 @@
|
||||||
.pagebot {
|
.pagebot {
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
}
|
}
|
||||||
|
// 选择年月日
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 20rpx 32rpx 0;
|
||||||
|
background: #F6F9FF;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
.radio-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 16rpx 32rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: rgba(15, 110, 254, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item {
|
||||||
|
transform: scale(0.9);
|
||||||
|
|
||||||
|
// 选中状态样式
|
||||||
|
&.radio-checked {
|
||||||
|
background-color: #0f6efe;
|
||||||
|
border-color: #0f6efe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-family: Source Han Sans SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #667482;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选中状态的文字样式
|
||||||
|
// .radio-item[checked] + .radio-text {
|
||||||
|
// color: #0f6efe;
|
||||||
|
// font-weight: 600;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 适配暗色模式
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.radio-group {
|
||||||
|
background: #1a1a1a;
|
||||||
|
|
||||||
|
.radio-label {
|
||||||
|
.radio-text {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.radio-item[checked] + .radio-text {
|
||||||
|
color: #0f6efe;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -11,63 +11,28 @@
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<block v-if="isActive == 1">
|
<block v-if="isActive == 1">
|
||||||
<view class="searchbox">
|
<view class="liebiaos" v-if="">
|
||||||
<image src="../../static/meishi_icon_sousuo.png" mode=""></image>
|
<view class="searchbox">
|
||||||
<input class="search_input" v-model="deviceNo" placeholder="请输入要搜索的设备编号">
|
<view class="uni-px-8 uni-pb-8">
|
||||||
<view class="searchbutton" @click="changenr()">
|
<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>
|
</view>
|
||||||
<view class="liebiaos" v-if="List.length != 0">
|
<!-- <view class="zwsj" v-else>
|
||||||
<scroll-view :style="{height:scorllheight + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
|
||||||
<view class="itembox" v-for="(item,index) in List" :key="index">
|
|
||||||
<view class="itembox_top">
|
|
||||||
<view class="itembox_lef" v-if="item.deviceNo">
|
|
||||||
<!-- <image src="../../static/fz.png" mode=""></image> -->
|
|
||||||
<view class="title">
|
|
||||||
编号:{{item.deviceNo}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="itembox_bot">
|
|
||||||
<view class="bot_item" v-if="item.flg">
|
|
||||||
<span class="nrbt">报警原因:</span>
|
|
||||||
<view class="bj" v-if="item.deviceStatus == 1">
|
|
||||||
{{item.flg}}
|
|
||||||
</view>
|
|
||||||
<view class="jcbj" v-if="item.deviceStatus == 0">
|
|
||||||
{{item.flg}}
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="bot_item" v-if="item.userDeviceNo">
|
|
||||||
<span class="nrbt">用户设备编号:</span>
|
|
||||||
<span class="number">{{item.userDeviceNo}}</span>
|
|
||||||
</view>
|
|
||||||
<view class="bot_item" v-if="item.alertTime">
|
|
||||||
<span class="nrbt" v-if="item.deviceStatus == 1">报警时间:</span>
|
|
||||||
<span class="nrbt" v-if="item.deviceStatus == 0">解除时间:</span>
|
|
||||||
{{item.alertTime}}
|
|
||||||
</view>
|
|
||||||
<view class="bot_item" v-if="item.reveiveTime">
|
|
||||||
<span class="nrbt">上报时间:</span>
|
|
||||||
{{item.reveiveTime}}
|
|
||||||
</view>
|
|
||||||
</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">
|
<view class="inzwsj">
|
||||||
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
|
<image src="../../static/zwsj.png" mode="" class="zwsjimg"></image>
|
||||||
<view class="zwsjtext">
|
<view class="zwsjtext">
|
||||||
暂无数据
|
暂无数据
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
</block>
|
</block>
|
||||||
|
<!-- 监测站告警 -->
|
||||||
<block v-else-if="isActive == 0">
|
<block v-else-if="isActive == 0">
|
||||||
<view class="liebiaos" v-if="List.length != 0">
|
<view class="liebiaos" v-if="List.length != 0">
|
||||||
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
<scroll-view :style="{height:scorllheights + 'rpx'}" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
|
||||||
|
|
@ -171,7 +136,12 @@
|
||||||
dictLabel:'异常趋势图'
|
dictLabel:'异常趋势图'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
value:0,
|
||||||
|
rangeList: [],
|
||||||
isActive:0,
|
isActive:0,
|
||||||
|
rangetime: [Date.now(), Date.now()],
|
||||||
|
deployId:'',
|
||||||
|
resolt:[],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
|
|
@ -181,7 +151,6 @@
|
||||||
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
|
||||||
console.log(this.height,ktxStatusHeight,navigationHeight)
|
|
||||||
this.scorllheight = this.height - 174
|
this.scorllheight = this.height - 174
|
||||||
this.scorllheights = this.height - 90
|
this.scorllheights = this.height - 90
|
||||||
}
|
}
|
||||||
|
|
@ -195,12 +164,19 @@
|
||||||
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
|
||||||
console.log(this.height,ktxStatusHeight,navigationHeight)
|
|
||||||
this.scorllheight = this.height - 174
|
this.scorllheight = this.height - 174
|
||||||
this.scorllheights = this.height - 90
|
this.scorllheights = this.height - 90
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
rangetime(newval) {
|
||||||
|
console.log('范围选:', this.rangetime);
|
||||||
|
this.startTime = this.rangetime[0]
|
||||||
|
this.endTime = this.rangetime[1]
|
||||||
|
this.qushiList()
|
||||||
|
},
|
||||||
|
},
|
||||||
methods:{
|
methods:{
|
||||||
// 下拉刷新被触发
|
// 下拉刷新被触发
|
||||||
refresherrefreshFun() {
|
refresherrefreshFun() {
|
||||||
|
|
@ -218,6 +194,9 @@
|
||||||
this.pageNo = 1
|
this.pageNo = 1
|
||||||
this.deviceNo = ''
|
this.deviceNo = ''
|
||||||
this.getList()
|
this.getList()
|
||||||
|
if(index==1){
|
||||||
|
this.sbeiList()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
getList(){
|
getList(){
|
||||||
var params = {}
|
var params = {}
|
||||||
|
|
@ -238,36 +217,21 @@
|
||||||
this.$http.get(url,{params:params}).then(res =>{
|
this.$http.get(url,{params:params}).then(res =>{
|
||||||
if(res.data.code == 0){
|
if(res.data.code == 0){
|
||||||
var data = res.data.data.records
|
var data = res.data.data.records
|
||||||
// for(var i=0;i<data.length;i++){
|
|
||||||
// if(data[i].alertContent){
|
|
||||||
// for(var j=0;j<data[i].alertContent.length;j++){
|
|
||||||
// data[i].alertContent[j] = JSON.parse(data[i].alertContent[j])
|
|
||||||
// console.log(data[i].alertContent[j])
|
|
||||||
// }
|
|
||||||
// console.log(data[i].alertContent)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
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)+'';
|
||||||
console.log(this.allNum,'总页数')
|
|
||||||
if(this.allNum.indexOf('.') == -1) {
|
if(this.allNum.indexOf('.') == -1) {
|
||||||
this.allNum = this.allNum;
|
this.allNum = this.allNum;
|
||||||
console.log(this.allNum,'if')
|
|
||||||
} else {
|
} else {
|
||||||
this.allNum = parseInt(Number(this.allNum)+1);
|
this.allNum = parseInt(Number(this.allNum)+1);
|
||||||
console.log(this.allNum,'else')
|
|
||||||
}
|
}
|
||||||
console.log(this.pageNo,this.allNum,'156156')
|
|
||||||
if(this.pageNo == this.allNum) {
|
if(this.pageNo == this.allNum) {
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
this.loadStatus='nomore'
|
this.loadStatus='nomore'
|
||||||
console.log(this.isLastpage,'true','nomore')
|
|
||||||
} else {
|
} else {
|
||||||
this.isLastpage = false;
|
this.isLastpage = false;
|
||||||
// this.isLoadMore=true
|
// this.isLoadMore=true
|
||||||
this.loadStatus = 'more'
|
this.loadStatus = 'more'
|
||||||
console.log(this.isLastpage,'false')
|
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
|
|
@ -279,7 +243,6 @@
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
lower() {
|
lower() {
|
||||||
console.log("最后一页了,取消下拉功能");
|
|
||||||
// 最后一页了,取消下拉功能
|
// 最后一页了,取消下拉功能
|
||||||
if (this.isLastpage) {
|
if (this.isLastpage) {
|
||||||
return
|
return
|
||||||
|
|
@ -289,7 +252,6 @@
|
||||||
this.intervalId = setInterval(() => {
|
this.intervalId = setInterval(() => {
|
||||||
num = num+1;
|
num = num+1;
|
||||||
},1000)
|
},1000)
|
||||||
console.log(this.intervalId,num)
|
|
||||||
this.pageNo = this.pageNo + 1;
|
this.pageNo = this.pageNo + 1;
|
||||||
var params = {}
|
var params = {}
|
||||||
params.pageNo = this.pageNo
|
params.pageNo = this.pageNo
|
||||||
|
|
@ -305,26 +267,15 @@
|
||||||
this.$http.get(url,{params:params}).then(res =>{
|
this.$http.get(url,{params:params}).then(res =>{
|
||||||
if(res.data.code == 0){
|
if(res.data.code == 0){
|
||||||
var data = res.data.data.records
|
var data = res.data.data.records
|
||||||
// for(var i=0;i<data.length;i++){
|
|
||||||
// if(data[i].alertContent){
|
|
||||||
// for(var j=0;j<data[i].alertContent.length;j++){
|
|
||||||
// data[i].alertContent[j] = JSON.parse(data[i].alertContent[j])
|
|
||||||
// console.log(data[i].alertContent[j])
|
|
||||||
// }
|
|
||||||
// console.log(data[i].alertContent)
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
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'
|
||||||
console.log(this.isLastpage,'true')
|
|
||||||
} else {
|
} else {
|
||||||
this.isLastpage = false;
|
this.isLastpage = false;
|
||||||
// this.isLoadMore=true
|
// this.isLoadMore=true
|
||||||
this.loadStatus = 'more'
|
this.loadStatus = 'more'
|
||||||
console.log(this.isLastpage,'false')
|
|
||||||
}
|
}
|
||||||
}else{
|
}else{
|
||||||
this.isLastpage = true;
|
this.isLastpage = true;
|
||||||
|
|
@ -334,10 +285,58 @@
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
changenr(){
|
changenr(){
|
||||||
console.log(this.deviceNo)
|
|
||||||
this.pageNo = 1
|
this.pageNo = 1
|
||||||
this.getList()
|
this.getList()
|
||||||
},
|
},
|
||||||
|
// 趋势图接口
|
||||||
|
qushiList(){
|
||||||
|
const data = {
|
||||||
|
deployId:this.deployId,
|
||||||
|
startTime:this.startTime,
|
||||||
|
endTime:this.endTime,
|
||||||
|
}
|
||||||
|
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({
|
||||||
|
title: '加载中'
|
||||||
|
});
|
||||||
|
this.$http.get('/applet/survDeviceDeploy/deviceList?stationCode=').then(res =>{
|
||||||
|
let sbList = []
|
||||||
|
this.rangeList = res.data.data.map((lit,index)=>{
|
||||||
|
return{
|
||||||
|
"value":index,
|
||||||
|
"text":lit.deployDes,
|
||||||
|
"id":lit.id,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.deployId = this.rangeList[this.value].id
|
||||||
|
this.qushiList()
|
||||||
|
uni.hideLoading();
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 选择deployid
|
||||||
|
change(e) {
|
||||||
|
console.log("单选值", this.rangeList[this.value].id)
|
||||||
|
this.deployId = this.rangeList[this.value].id
|
||||||
|
// this.sbeiList()
|
||||||
|
},
|
||||||
|
// 选择日期范围
|
||||||
|
maskClick(e){
|
||||||
|
console.log('maskClick事件:', e);
|
||||||
|
this.startTime = e[0]
|
||||||
|
this.endTime = e[1]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -345,37 +344,18 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
page{
|
page{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// background-color: #fff;
|
|
||||||
}
|
}
|
||||||
.container{
|
.container{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.topcheck{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
border-bottom: 1rpx solid #ededed;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.left{
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.right{
|
|
||||||
width: 50%;
|
|
||||||
border-left: 4rpx solid #ededed;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.searchbox{
|
.searchbox{
|
||||||
height: 88rpx;
|
height: 148rpx;
|
||||||
padding: 15rpx 30rpx;
|
padding: 15rpx 30rpx;
|
||||||
// padding: 30rpx;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
}
|
}
|
||||||
.search_input{
|
.search_input{
|
||||||
border: none;
|
border: none;
|
||||||
|
|
@ -391,7 +371,6 @@
|
||||||
height: 32rpx;
|
height: 32rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 40rpx;
|
left: 40rpx;
|
||||||
// top: 24%;
|
|
||||||
top:35%;
|
top:35%;
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
|
|
@ -410,15 +389,6 @@
|
||||||
.itembox:first-child{
|
.itembox:first-child{
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
.uni-input{
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.uni-input image{
|
|
||||||
height: 12rpx;
|
|
||||||
width: 24rpx;
|
|
||||||
margin-left: 5rpx;
|
|
||||||
}
|
|
||||||
.itembox_top{
|
.itembox_top{
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -437,32 +407,8 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
width: 63%;
|
width: 63%;
|
||||||
}
|
}
|
||||||
.caozuo{
|
.title{
|
||||||
height: 100%;
|
font-weight: bold;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex:1;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
.caozuo image{
|
|
||||||
width: 7rpx;
|
|
||||||
height: 29rpx;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
.bot_item{
|
|
||||||
margin-top: 30rpx;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.nrbt{
|
|
||||||
color: #898989;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
min-width: 120rpx;
|
|
||||||
}
|
|
||||||
.number{
|
|
||||||
// color: #ff6563;
|
|
||||||
}
|
|
||||||
.numbers{
|
|
||||||
color:#26bf64;
|
|
||||||
}
|
}
|
||||||
.load{
|
.load{
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
|
|
@ -470,21 +416,6 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #c6c6c6;
|
color: #c6c6c6;
|
||||||
}
|
}
|
||||||
.add{
|
|
||||||
height: 150rpx;
|
|
||||||
width: 150rpx;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 100rpx;
|
|
||||||
right: 60rpx;
|
|
||||||
}
|
|
||||||
.popup{
|
|
||||||
background-color: white;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.title{
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
.zwsj{
|
.zwsj{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -507,35 +438,14 @@
|
||||||
line-height: 31rpx;
|
line-height: 31rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.bj{
|
|
||||||
padding: 6rpx 12rpx;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-family: Source Han Sans SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: #FF4242;
|
|
||||||
}
|
|
||||||
.jcbj{
|
|
||||||
padding: 6rpx 12rpx;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-family: Source Han Sans SC;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #FFFFFF;
|
|
||||||
background-color: #26bf64;
|
|
||||||
}
|
|
||||||
.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;
|
||||||
// line-height: 80rpx;
|
|
||||||
// padding:0 32rpx;
|
|
||||||
}
|
}
|
||||||
.scroll{
|
.scroll{
|
||||||
height: 85rpx;
|
height: 85rpx;
|
||||||
// line-height: 80rpx;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
@ -547,26 +457,12 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-family: Source Han Sans SC;
|
font-family: Source Han Sans SC;
|
||||||
// border-bottom: 2rpx solid #ededed;
|
|
||||||
// font-weight: 500;
|
|
||||||
// color: #545C6C;
|
|
||||||
}
|
|
||||||
.scroll-item:first-child{
|
|
||||||
border-right: 4rpx solid #ededed;
|
|
||||||
// border-bottom: 2rpx solid #ededed;
|
|
||||||
// border-right: 2rpx solid #ededed;
|
|
||||||
}
|
}
|
||||||
.scroll-item2{
|
.scroll-item2{
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
font-family: Source Han Sans SC;
|
font-family: Source Han Sans SC;
|
||||||
// font-weight: bold;
|
|
||||||
color: #0F6EFF;
|
color: #0F6EFF;
|
||||||
}
|
}
|
||||||
.initem{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
// border-bottom: 2rpx solid #ededed;
|
|
||||||
}
|
|
||||||
.zliebs{
|
.zliebs{
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 4rpx;
|
height: 4rpx;
|
||||||
|
|
@ -575,7 +471,6 @@
|
||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
}
|
}
|
||||||
.lists_item {
|
.lists_item {
|
||||||
// padding-top: 35rpx;
|
|
||||||
padding: 0rpx 0rpx 16rpx 0rpx;
|
padding: 0rpx 0rpx 16rpx 0rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -589,7 +484,6 @@
|
||||||
font-family: Source Han Sans SC;
|
font-family: Source Han Sans SC;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #667482;
|
color: #667482;
|
||||||
// text-align: center
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.zbz {
|
.zbz {
|
||||||
|
|
@ -597,24 +491,6 @@
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
font-family: DIN Next LT Pro;
|
font-family: DIN Next LT Pro;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
// color: #2FCD81;
|
|
||||||
// text-align: center
|
|
||||||
}
|
|
||||||
|
|
||||||
.zbzs {
|
|
||||||
color: #2FCD81;
|
|
||||||
}
|
|
||||||
|
|
||||||
.szqs {
|
|
||||||
width: 53rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.szqs image {
|
|
||||||
width: 24rpx;
|
|
||||||
height: 31rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sbsj {
|
.sbsj {
|
||||||
|
|
@ -625,8 +501,6 @@
|
||||||
width: 23%;
|
width: 23%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
// text-align: center
|
|
||||||
// text-align: right;
|
|
||||||
}
|
}
|
||||||
.zximg{
|
.zximg{
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
|
|
@ -659,39 +533,17 @@
|
||||||
|
|
||||||
.tabitem:first-child{
|
.tabitem:first-child{
|
||||||
width: 31%;
|
width: 31%;
|
||||||
// text-align: center
|
|
||||||
}
|
}
|
||||||
.tabitem:nth-child(2){
|
.tabitem:nth-child(2){
|
||||||
width: 27%;
|
width: 27%;
|
||||||
// text-align: center
|
|
||||||
}
|
}
|
||||||
.tabitem:nth-child(3){
|
.tabitem:nth-child(3){
|
||||||
width: 23%;
|
width: 23%;
|
||||||
// text-align: center
|
|
||||||
}
|
}
|
||||||
.tabitem:nth-child(4){
|
.tabitem:nth-child(4){
|
||||||
flex:1
|
flex:1
|
||||||
// text-align: center
|
|
||||||
}
|
|
||||||
.topcheck{
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 20rpx 0;
|
|
||||||
border-bottom: 1rpx solid #ededed;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
.left{
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.right{
|
|
||||||
width: 50%;
|
|
||||||
border-left: 4rpx solid #ededed;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
.itembox_right{
|
.itembox_right{
|
||||||
font-size: 26rpx;
|
font-size: 26rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,25 @@
|
||||||
|
## 2.0.12(2025-08-26)
|
||||||
|
- 优化 uni-app x 下 size 类型问题
|
||||||
|
## 2.0.11(2025-08-18)
|
||||||
|
- 修复 图标点击事件返回
|
||||||
|
## 2.0.9(2024-01-12)
|
||||||
|
fix: 修复图标大小默认值错误的问题
|
||||||
|
## 2.0.8(2023-12-14)
|
||||||
|
- 修复 项目未使用 ts 情况下,打包报错的bug
|
||||||
|
## 2.0.7(2023-12-14)
|
||||||
|
- 修复 size 属性为 string 时,不加单位导致尺寸异常的bug
|
||||||
|
## 2.0.6(2023-12-11)
|
||||||
|
- 优化 兼容老版本icon类型,如 top ,bottom 等
|
||||||
|
## 2.0.5(2023-12-11)
|
||||||
|
- 优化 兼容老版本icon类型,如 top ,bottom 等
|
||||||
|
## 2.0.4(2023-12-06)
|
||||||
|
- 优化 uni-app x 下示例项目图标排序
|
||||||
|
## 2.0.3(2023-12-06)
|
||||||
|
- 修复 nvue下引入组件报错的bug
|
||||||
|
## 2.0.2(2023-12-05)
|
||||||
|
-优化 size 属性支持单位
|
||||||
|
## 2.0.1(2023-12-05)
|
||||||
|
- 新增 uni-app x 支持定义图标
|
||||||
## 1.3.5(2022-01-24)
|
## 1.3.5(2022-01-24)
|
||||||
- 优化 size 属性可以传入不带单位的字符串数值
|
- 优化 size 属性可以传入不带单位的字符串数值
|
||||||
## 1.3.4(2022-01-24)
|
## 1.3.4(2022-01-24)
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,28 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- #ifdef APP-NVUE -->
|
<!-- #ifdef APP-NVUE -->
|
||||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
<!-- #ifndef APP-NVUE -->
|
<!-- #ifndef APP-NVUE -->
|
||||||
<text :style="{ color: color, 'font-size': iconSize }" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick"></text>
|
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||||
|
<slot></slot>
|
||||||
|
</text>
|
||||||
<!-- #endif -->
|
<!-- #endif -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import icons from './icons.js';
|
import { fontData } from './uniicons_file_vue.js';
|
||||||
|
|
||||||
const getVal = (val) => {
|
const getVal = (val) => {
|
||||||
const reg = /^[0-9]*$/g
|
const reg = /^[0-9]*$/g
|
||||||
return (typeof val === 'number' || reg.test(val) )? val + 'px' : val;
|
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||||
}
|
}
|
||||||
|
|
||||||
// #ifdef APP-NVUE
|
// #ifdef APP-NVUE
|
||||||
var domModule = weex.requireModule('dom');
|
var domModule = weex.requireModule('dom');
|
||||||
import iconUrl from './uniicons.ttf'
|
import iconUrl from './uniicons.ttf'
|
||||||
domModule.addRule('fontFace', {
|
domModule.addRule('fontFace', {
|
||||||
'fontFamily': "uniicons",
|
'fontFamily': "uniicons",
|
||||||
'src': "url('"+iconUrl+"')"
|
'src': "url('" + iconUrl + "')"
|
||||||
});
|
});
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
|
@ -34,7 +38,7 @@
|
||||||
*/
|
*/
|
||||||
export default {
|
export default {
|
||||||
name: 'UniIcons',
|
name: 'UniIcons',
|
||||||
emits:['click'],
|
emits: ['click'],
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
type: String,
|
type: String,
|
||||||
|
|
@ -48,31 +52,41 @@
|
||||||
type: [Number, String],
|
type: [Number, String],
|
||||||
default: 16
|
default: 16
|
||||||
},
|
},
|
||||||
customPrefix:{
|
customPrefix: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
icons: icons.glyphs
|
icons: fontData
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed:{
|
computed: {
|
||||||
unicode(){
|
unicode() {
|
||||||
let code = this.icons.find(v=>v.font_class === this.type)
|
let code = this.icons.find(v => v.font_class === this.type)
|
||||||
if(code){
|
if (code) {
|
||||||
return unescape(`%u${code.unicode}`)
|
return code.unicode
|
||||||
}
|
}
|
||||||
return ''
|
return ''
|
||||||
},
|
},
|
||||||
iconSize(){
|
iconSize() {
|
||||||
return getVal(this.size)
|
return getVal(this.size)
|
||||||
|
},
|
||||||
|
styleObj() {
|
||||||
|
if (this.fontFamily !== '') {
|
||||||
|
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||||
|
}
|
||||||
|
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
_onClick() {
|
_onClick(e) {
|
||||||
this.$emit('click')
|
this.$emit('click', e)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -81,9 +95,10 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
/* #ifndef APP-NVUE */
|
/* #ifndef APP-NVUE */
|
||||||
@import './uniicons.css';
|
@import './uniicons.css';
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: uniicons;
|
font-family: uniicons;
|
||||||
src: url('./uniicons.ttf') format('truetype');
|
src: url('./uniicons.ttf');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
|
@ -92,5 +107,4 @@
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
</style>
|
||||||
</style>
|
|
||||||
|
|
@ -1,3 +1,12 @@
|
||||||
|
|
||||||
|
.uniui-cart-filled:before {
|
||||||
|
content: "\e6d0";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-gift-filled:before {
|
||||||
|
content: "\e6c4";
|
||||||
|
}
|
||||||
|
|
||||||
.uniui-color:before {
|
.uniui-color:before {
|
||||||
content: "\e6cf";
|
content: "\e6cf";
|
||||||
}
|
}
|
||||||
|
|
@ -58,10 +67,6 @@
|
||||||
content: "\e6c3";
|
content: "\e6c3";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-gift-filled:before {
|
|
||||||
content: "\e6c4";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-fire-filled:before {
|
.uniui-fire-filled:before {
|
||||||
content: "\e6c5";
|
content: "\e6c5";
|
||||||
}
|
}
|
||||||
|
|
@ -82,6 +87,18 @@
|
||||||
content: "\e698";
|
content: "\e698";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinleft:before {
|
||||||
|
content: "\e6d2";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthinup:before {
|
||||||
|
content: "\e6d3";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-arrowthindown:before {
|
||||||
|
content: "\e6d4";
|
||||||
|
}
|
||||||
|
|
||||||
.uniui-back:before {
|
.uniui-back:before {
|
||||||
content: "\e6b9";
|
content: "\e6b9";
|
||||||
}
|
}
|
||||||
|
|
@ -94,55 +111,43 @@
|
||||||
content: "\e6bb";
|
content: "\e6bb";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthinright:before {
|
|
||||||
content: "\e6bb";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-arrow-left:before {
|
.uniui-arrow-left:before {
|
||||||
content: "\e6bc";
|
content: "\e6bc";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthinleft:before {
|
|
||||||
content: "\e6bc";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-arrow-up:before {
|
.uniui-arrow-up:before {
|
||||||
content: "\e6bd";
|
content: "\e6bd";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthinup:before {
|
|
||||||
content: "\e6bd";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-arrow-down:before {
|
.uniui-arrow-down:before {
|
||||||
content: "\e6be";
|
content: "\e6be";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowthindown:before {
|
.uniui-arrowthinright:before {
|
||||||
content: "\e6be";
|
content: "\e6d1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.uniui-down:before {
|
||||||
|
content: "\e6b8";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-bottom:before {
|
.uniui-bottom:before {
|
||||||
content: "\e6b8";
|
content: "\e6b8";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowdown:before {
|
.uniui-arrowright:before {
|
||||||
content: "\e6b8";
|
content: "\e6d5";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-right:before {
|
.uniui-right:before {
|
||||||
content: "\e6b5";
|
content: "\e6b5";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowright:before {
|
.uniui-up:before {
|
||||||
content: "\e6b5";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-top:before {
|
|
||||||
content: "\e6b6";
|
content: "\e6b6";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowup:before {
|
.uniui-top:before {
|
||||||
content: "\e6b6";
|
content: "\e6b6";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -150,8 +155,8 @@
|
||||||
content: "\e6b7";
|
content: "\e6b7";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-arrowleft:before {
|
.uniui-arrowup:before {
|
||||||
content: "\e6b7";
|
content: "\e6d6";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-eye:before {
|
.uniui-eye:before {
|
||||||
|
|
@ -638,10 +643,6 @@
|
||||||
content: "\e627";
|
content: "\e627";
|
||||||
}
|
}
|
||||||
|
|
||||||
.uniui-cart-filled:before {
|
|
||||||
content: "\e629";
|
|
||||||
}
|
|
||||||
|
|
||||||
.uniui-checkbox:before {
|
.uniui-checkbox:before {
|
||||||
content: "\e62b";
|
content: "\e62b";
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"id": "uni-icons",
|
"id": "uni-icons",
|
||||||
"displayName": "uni-icons 图标",
|
"displayName": "uni-icons 图标",
|
||||||
"version": "1.3.5",
|
"version": "2.0.12",
|
||||||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"uni-ui",
|
"uni-ui",
|
||||||
|
|
@ -11,16 +11,14 @@
|
||||||
],
|
],
|
||||||
"repository": "https://github.com/dcloudio/uni-ui",
|
"repository": "https://github.com/dcloudio/uni-ui",
|
||||||
"engines": {
|
"engines": {
|
||||||
"HBuilderX": "^3.2.14"
|
"HBuilderX": "^3.2.14",
|
||||||
|
"uni-app": "^4.08",
|
||||||
|
"uni-app-x": "^4.61"
|
||||||
},
|
},
|
||||||
"directories": {
|
"directories": {
|
||||||
"example": "../../temps/example_temps"
|
"example": "../../temps/example_temps"
|
||||||
},
|
},
|
||||||
"dcloudext": {
|
"dcloudext": {
|
||||||
"category": [
|
|
||||||
"前端组件",
|
|
||||||
"通用组件"
|
|
||||||
],
|
|
||||||
"sale": {
|
"sale": {
|
||||||
"regular": {
|
"regular": {
|
||||||
"price": "0.00"
|
"price": "0.00"
|
||||||
|
|
@ -37,48 +35,75 @@
|
||||||
"data": "无",
|
"data": "无",
|
||||||
"permissions": "无"
|
"permissions": "无"
|
||||||
},
|
},
|
||||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||||
|
"type": "component-vue",
|
||||||
|
"darkmode": "x",
|
||||||
|
"i18n": "x",
|
||||||
|
"widescreen": "x"
|
||||||
},
|
},
|
||||||
"uni_modules": {
|
"uni_modules": {
|
||||||
"dependencies": ["uni-scss"],
|
"dependencies": [
|
||||||
|
"uni-scss"
|
||||||
|
],
|
||||||
"encrypt": [],
|
"encrypt": [],
|
||||||
"platforms": {
|
"platforms": {
|
||||||
"cloud": {
|
"cloud": {
|
||||||
"tcb": "y",
|
"tcb": "x",
|
||||||
"aliyun": "y"
|
"aliyun": "x",
|
||||||
|
"alipay": "x"
|
||||||
},
|
},
|
||||||
"client": {
|
"client": {
|
||||||
"App": {
|
"uni-app": {
|
||||||
"app-vue": "y",
|
"vue": {
|
||||||
"app-nvue": "y"
|
"vue2": "√",
|
||||||
|
"vue3": "√"
|
||||||
|
},
|
||||||
|
"web": {
|
||||||
|
"safari": "√",
|
||||||
|
"chrome": "√"
|
||||||
|
},
|
||||||
|
"app": {
|
||||||
|
"vue": "√",
|
||||||
|
"nvue": "-",
|
||||||
|
"android": {
|
||||||
|
"extVersion": "",
|
||||||
|
"minVersion": "29"
|
||||||
|
},
|
||||||
|
"ios": "√",
|
||||||
|
"harmony": "√"
|
||||||
|
},
|
||||||
|
"mp": {
|
||||||
|
"weixin": "√",
|
||||||
|
"alipay": "√",
|
||||||
|
"toutiao": "√",
|
||||||
|
"baidu": "√",
|
||||||
|
"kuaishou": "-",
|
||||||
|
"jd": "-",
|
||||||
|
"harmony": "-",
|
||||||
|
"qq": "√",
|
||||||
|
"lark": "-"
|
||||||
|
},
|
||||||
|
"quickapp": {
|
||||||
|
"huawei": "√",
|
||||||
|
"union": "√"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"H5-mobile": {
|
"uni-app-x": {
|
||||||
"Safari": "y",
|
"web": {
|
||||||
"Android Browser": "y",
|
"safari": "√",
|
||||||
"微信浏览器(Android)": "y",
|
"chrome": "√"
|
||||||
"QQ浏览器(Android)": "y"
|
},
|
||||||
},
|
"app": {
|
||||||
"H5-pc": {
|
"android": {
|
||||||
"Chrome": "y",
|
"extVersion": "",
|
||||||
"IE": "y",
|
"minVersion": "29"
|
||||||
"Edge": "y",
|
},
|
||||||
"Firefox": "y",
|
"ios": "√",
|
||||||
"Safari": "y"
|
"harmony": "√"
|
||||||
},
|
},
|
||||||
"小程序": {
|
"mp": {
|
||||||
"微信": "y",
|
"weixin": "√"
|
||||||
"阿里": "y",
|
}
|
||||||
"百度": "y",
|
|
||||||
"字节跳动": "y",
|
|
||||||
"QQ": "y"
|
|
||||||
},
|
|
||||||
"快应用": {
|
|
||||||
"华为": "u",
|
|
||||||
"联盟": "u"
|
|
||||||
},
|
|
||||||
"Vue": {
|
|
||||||
"vue2": "y",
|
|
||||||
"vue3": "y"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue