提交app

pages/message1/steadyState.vue

@@ -3,14 +3,20 @@
         <!-- 稳态 -->
         <view class="transientBox">
             <view class="statistics pd20">
-                <view class="box" :class="{ boxClick: item.label == '稳态数量' }" v-for="item in list">
+                <view
+                    class="box"
+                    :class="{ boxClick: item.label == filterValue }"
+                    v-for="item in list"
+                    @click="filterValue = item.label"
+                >
                     <text class="num">{{ item.value }}</text>
                     <text class="label">{{ item.label }}</text>
                 </view>
             </view>
         </view>
-        <!-- 卡片 -->
+        <!-- 稳态数量 -->
         <scroll-view
+            v-if="filterValue == '稳态数量'"
             scroll-y="true"
             @refresherrefresh="refresherrefresh"
             :refresher-triggered="triggered"
@@ -66,6 +72,17 @@
             ></uni-load-more>
             <Cn-empty v-else style="top: 20%"></Cn-empty>
         </scroll-view>
+        <!--  越限天数 -->
+        <view v-if="filterValue == '越限天数'">
+            <uni-calendar
+                :insert="true"
+                :lunar="false"
+                :date="startData"
+                :selected="selected"
+                :start-date="startData"
+                :end-date="endData"
+            />
+        </view>
     </view>
 </template>
 <script>
@@ -86,11 +103,20 @@ export default {
     data() {
         return {
             height: 0,
+            filterValue: '稳态数量',
             list: [
                 { value: 0, label: '稳态数量' },
                 { value: 0, label: '越限天数' },
                 { value: 0, label: '越限测点数' },
             ],
+            startData: '',
+            endData: '',
+            selected: [
+                { date: '2026-04-10', info: '' },
+                { date: '2026-04-11', info: '' },
+                { date: '2026-04-12', info: '' },
+                // { date: '2026-04-13', info: '' },
+            ],
             triggered: true,
             status: 'noMore', //more加载前  loading加载中 noMore加载后
         }
@@ -125,11 +151,14 @@ export default {
             this.store.params.devId = this.selectValue.deviceId
             this.store.params.lineId = this.selectValue.lineId
             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
             }
             this.store.reload()
         },
@@ -202,4 +231,44 @@ export default {
     text-overflow: ellipsis;
     word-break: break-all;
 }
+/deep/ .uni-calendar-item--checked {
+    background-color: #ffffff00;
+    color: #000000e6;
+    opacity: 1;
+}
+/deep/ .uni-calendar-item--isDay {
+    background-color: #ffffff00;
+    color: #000000e6;
+    opacity: 1;
+    .uni-calendar-item__weeks-lunar-text {
+        background-color: #ffffff00;
+        color: #000000e6;
+        opacity: 1;
+    }
+}
+
+/deep/ .uni-calendar-item__weeks-box-text {
+    z-index: 1;
+}
+/deep/ .uni-calendar-item__weeks-box-circle {
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    width: 39px;
+    height: 39px;
+    border-radius: 50%;
+    z-index: 0;
+    background-color: #e43d33;
+}
+/* 核心：选中圆圈下的 子元素（日期数字） */
+/deep/ .uni-calendar-item__weeks-box-circle + .uni-calendar-item__weeks-box-text {
+    color: #fff !important; /* 改成你想要的颜色 */
+}
+/deep/ .uni-calendar__backtoday,
+/deep/ .uni-calendar__header-btn-box {
+    display: none;
+}
+/deep/ .uni-calendar__header {
+    pointer-events: none !important;
+}
 </style>