调整app页面图标样式

This commit is contained in:
guanj
2026-04-17 08:50:07 +08:00
parent bac0f83f64
commit 747d3139cf
40 changed files with 1345 additions and 553 deletions

View File

@@ -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>