调整app页面图标样式
This commit is contained in:
@@ -7,7 +7,10 @@
|
||||
class="box"
|
||||
:class="{ boxClick: item.label == filterValue }"
|
||||
v-for="item in list"
|
||||
@click="filterValue = item.label"
|
||||
@click="
|
||||
filterValue = item.label
|
||||
init()
|
||||
"
|
||||
>
|
||||
<text class="num">{{ item.value }}</text>
|
||||
<text class="label">{{ item.label }}</text>
|
||||
@@ -19,6 +22,7 @@
|
||||
v-if="filterValue == '稳态数量'"
|
||||
scroll-y="true"
|
||||
@refresherrefresh="refresherrefresh"
|
||||
@scrolltolower="scrolltolower"
|
||||
:refresher-triggered="triggered"
|
||||
refresher-enabled="true"
|
||||
class="event-list"
|
||||
@@ -36,12 +40,13 @@
|
||||
<view class="event-header">
|
||||
<view class="event-icon">
|
||||
<!-- 动态图标:根据类型切换 -->
|
||||
<uni-icons
|
||||
<!-- <uni-icons
|
||||
custom-prefix="iconfont"
|
||||
type="icon-kouanjiancedian"
|
||||
size="40"
|
||||
color="#E6A23C"
|
||||
></uni-icons>
|
||||
></uni-icons> -->
|
||||
<Cn-icon-transient :name="`稳态越限`" />
|
||||
<view class="badge1" v-if="item.isRead == 0"> </view>
|
||||
</view>
|
||||
<view class="event-info">
|
||||
@@ -61,7 +66,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情区域 -->
|
||||
<view class="event-detail textBox">
|
||||
<view class="event-detail textBox" @touchmove.stop>
|
||||
<text>{{ item.statisticsDate }}发生 {{ item.overLimitDesc }} </text>
|
||||
</view>
|
||||
</uni-card>
|
||||
@@ -83,10 +88,67 @@
|
||||
:end-date="endData"
|
||||
/>
|
||||
</view>
|
||||
<!-- 越限测点数 -->
|
||||
<scroll-view
|
||||
v-if="filterValue == '越限测点数'"
|
||||
scroll-y="true"
|
||||
@refresherrefresh="refresherrefresh"
|
||||
@scrolltolower="scrolltolower"
|
||||
:refresher-triggered="triggered"
|
||||
refresher-enabled="true"
|
||||
class="event-list"
|
||||
:style="{ height: 'calc(100vh - ' + (navHeight + height) + 'px)', overflow: 'auto' }"
|
||||
>
|
||||
<!-- 循环渲染事件项 -->
|
||||
<uni-card class="event-item" :class="item.type" v-for="(item, index) in store.data" :key="index">
|
||||
<!-- 头部:图标 + 信息 + 操作 -->
|
||||
<view class="event-header">
|
||||
<view class="event-icon">
|
||||
<!-- 动态图标:根据类型切换 -->
|
||||
<!-- <uni-icons
|
||||
custom-prefix="iconfont"
|
||||
type="icon-kouanjiancedian"
|
||||
size="40"
|
||||
color="#E6A23C"
|
||||
></uni-icons> -->
|
||||
<Cn-icon-transient :name="`稳态越限`" />
|
||||
</view>
|
||||
<view class="event-info">
|
||||
<view class="event-title">
|
||||
<text class="event-id">{{ item.lineName }}</text>
|
||||
</view>
|
||||
<view class="event-desc">
|
||||
<text>工程名称:{{ item.engineeringName }}</text>
|
||||
<text>项目名称:{{ item.projectName }}</text>
|
||||
<text>设备名称:{{ item.devName }}</text>
|
||||
<!-- <text>统计日期:{{ item.statisticsDate }}</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 详情区域 -->
|
||||
<view class="event-detail">
|
||||
<uni-calendar
|
||||
:insert="true"
|
||||
:lunar="false"
|
||||
:date="startData"
|
||||
:selected="item.timeList.map((date) => ({ date, info: '' }))"
|
||||
:start-date="startData"
|
||||
:end-date="endData"
|
||||
/>
|
||||
</view>
|
||||
</uni-card>
|
||||
|
||||
<uni-load-more
|
||||
v-if="store.status == 'loading' || (store.data && store.data.length > 0)"
|
||||
:status="store.status"
|
||||
></uni-load-more>
|
||||
<Cn-empty v-else style="top: 20%"></Cn-empty>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import list from '@/common/js/list'
|
||||
import { queryAppHarmonicCounts, queryAppHarmonicLine } from '../../common/api/harmonic.js'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
@@ -112,11 +174,11 @@ export default {
|
||||
startData: '',
|
||||
endData: '',
|
||||
selected: [
|
||||
{ date: '2026-04-10', info: '' },
|
||||
{ date: '2026-04-11', info: '' },
|
||||
{ date: '2026-04-12', info: '' },
|
||||
// { date: '2026-04-13', info: '' },
|
||||
// { date: '2026-04-10', info: '' },
|
||||
// { date: '2026-04-11', info: '' },
|
||||
// { date: '2026-04-12', info: '' },
|
||||
],
|
||||
|
||||
triggered: true,
|
||||
status: 'noMore', //more加载前 loading加载中 noMore加载后
|
||||
}
|
||||
@@ -144,8 +206,12 @@ export default {
|
||||
// "time": ""
|
||||
// 查詢
|
||||
init() {
|
||||
this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryHarmonicList')
|
||||
this.store.params.pageSize = 10000
|
||||
if (this.filterValue == '越限测点数') {
|
||||
this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryAppHarmonicLine')
|
||||
} else {
|
||||
this.store = this.DataSource('/cs-harmonic-boot/csHarmonic/queryHarmonicList')
|
||||
}
|
||||
// this.store.params.pageSize = 10000
|
||||
this.store.params.engineerId = this.selectValue.engineeringId
|
||||
this.store.params.projectId = this.selectValue.projectId
|
||||
this.store.params.devId = this.selectValue.deviceId
|
||||
@@ -153,12 +219,16 @@ export default {
|
||||
this.store.params.time = this.selectValue.date
|
||||
|
||||
this.store.loadedCallback = () => {
|
||||
this.list[0].value = this.store.copyData.harmonicNums
|
||||
this.list[1].value = this.store.copyData.overDays
|
||||
this.list[2].value = this.store.copyData.overLineNums
|
||||
this.loading = false
|
||||
this.startData = this.$util.getMonthFirstAndLastDay(this.selectValue.date).firstDay
|
||||
this.endData = this.$util.getMonthFirstAndLastDay(this.selectValue.date).lastDay
|
||||
// 查询越限日期
|
||||
queryAppHarmonicCounts(this.store.params).then((res) => {
|
||||
this.list[0].value = res.data.harmonicNums
|
||||
this.list[1].value = res.data.overDays
|
||||
this.list[2].value = res.data.overLineNums
|
||||
this.selected = res.data.overDaysList.map((date) => ({ date, info: '' }))
|
||||
})
|
||||
}
|
||||
this.store.reload()
|
||||
},
|
||||
@@ -177,6 +247,12 @@ export default {
|
||||
this.triggered = false
|
||||
}, 500)
|
||||
},
|
||||
// 上拉
|
||||
scrolltolower() {
|
||||
if (this.store.status != 'noMore') {
|
||||
this.store.next && this.store.next()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
@@ -211,7 +287,7 @@ export default {
|
||||
|
||||
/* 图标区域(按类型区分背景色) */
|
||||
.event-icon {
|
||||
background-color: #e6a23c20;
|
||||
background-color: #376cf320;
|
||||
}
|
||||
|
||||
.event-tags {
|
||||
@@ -223,13 +299,14 @@ export default {
|
||||
}
|
||||
.textBox {
|
||||
max-height: 110rpx;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
// overflow: hidden;
|
||||
/* 下面是溢出显示省略号关键样式 */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3; /* 控制最多显示几行,你可以改 2/3/4 */
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: 3; /* 控制最多显示几行,你可以改 2/3/4 */
|
||||
// -webkit-box-orient: vertical;
|
||||
// text-overflow: ellipsis;
|
||||
// word-break: break-all;
|
||||
}
|
||||
/deep/ .uni-calendar-item--checked {
|
||||
background-color: #ffffff00;
|
||||
@@ -250,15 +327,18 @@ export default {
|
||||
/deep/ .uni-calendar-item__weeks-box-text {
|
||||
z-index: 1;
|
||||
}
|
||||
/deep/ .uni-calendar-item--isDay-text {
|
||||
color: #333 !important; /* 改成你想要的颜色 */
|
||||
}
|
||||
/deep/ .uni-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 9px;
|
||||
top: 7px;
|
||||
right: 6px;
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
background-color: #e43d33;
|
||||
background-color: #f43530;
|
||||
}
|
||||
/* 核心:选中圆圈下的 子元素(日期数字) */
|
||||
/deep/ .uni-calendar-item__weeks-box-circle + .uni-calendar-item__weeks-box-text {
|
||||
@@ -268,7 +348,28 @@ export default {
|
||||
/deep/ .uni-calendar__header-btn-box {
|
||||
display: none;
|
||||
}
|
||||
/deep/ .uni-calendar-item__weeks-lunar-text {
|
||||
display: none;
|
||||
}
|
||||
/deep/ .uni-calendar__header {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
.event-detail {
|
||||
/deep/ .uni-calendar__header {
|
||||
display: none !important;
|
||||
}
|
||||
/deep/ .uni-calendar__weeks-day {
|
||||
height: 35px;
|
||||
}
|
||||
/deep/ .uni-calendar-item__weeks-box-item {
|
||||
height: 40px;
|
||||
}
|
||||
/deep/ .uni-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 8px;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user