|
|
@@ -3,7 +3,7 @@
|
|
|
<div class="box1">
|
|
|
<div class="card1">
|
|
|
<div class="line1">
|
|
|
- <i class="icon" />
|
|
|
+ <i class="icon"/>
|
|
|
<div class="text1">点名总次数</div>
|
|
|
</div>
|
|
|
<div class="line2">
|
|
|
@@ -13,7 +13,7 @@
|
|
|
</div>
|
|
|
<div class="card2">
|
|
|
<div class="line1">
|
|
|
- <i class="icon" />
|
|
|
+ <i class="icon"/>
|
|
|
<div class="text1">已应答次数</div>
|
|
|
</div>
|
|
|
<div class="line2">
|
|
|
@@ -23,7 +23,7 @@
|
|
|
</div>
|
|
|
<div class="card3">
|
|
|
<div class="line1">
|
|
|
- <i class="icon" />
|
|
|
+ <i class="icon"/>
|
|
|
<div class="text1">未应答次数</div>
|
|
|
</div>
|
|
|
<div class="line2">
|
|
|
@@ -37,52 +37,141 @@
|
|
|
class="common-search"
|
|
|
:left-icon="searchImg"
|
|
|
:right-icon="closeImg"
|
|
|
- @search="on_search_keyword"
|
|
|
- @click-right-icon.stop="on_search_cancel"
|
|
|
+ :clearable="false"
|
|
|
+ @search="onSearchKeyword"
|
|
|
+ @click-right-icon.stop="onSearchCancel"
|
|
|
/>
|
|
|
+ <van-list
|
|
|
+ v-model:loading="loading"
|
|
|
+ v-model:error="error"
|
|
|
+ error-text="请求失败，点击重新加载"
|
|
|
+ :finished="finished"
|
|
|
+ finished-text="没有更多记录了"
|
|
|
+ class="custom-list"
|
|
|
+ @load="getList">
|
|
|
+ <div :class="item.status === '0' ? 'custom-list-item1' : 'custom-list-item2'" v-for="item in dataList" :key="item.id">
|
|
|
+ <div :class="item.status === '0' ? 'error-tag' : 'success-tag'">
|
|
|
+ {{ item.status === '0' ? '未应答' : '已应答' }}
|
|
|
+ </div>
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="box-right">
|
|
|
+ <div class="text1">点名时间：{{ item.time }}</div>
|
|
|
+ <div class="text1">完成耗时：{{ item.time2 }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-list>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="rollCallDetails2">
|
|
|
-
|
|
|
import searchImg from "@/assets/images/search.png";
|
|
|
import closeImg from "@/assets/images/close.png";
|
|
|
+import {ref} from "vue";
|
|
|
+
|
|
|
+const dataList = ref([]);
|
|
|
+const total = ref(0);
|
|
|
+const loading = ref(false);
|
|
|
+const error = ref(false);
|
|
|
+const finished = ref(false);
|
|
|
+const queryParams = ref({
|
|
|
+ page: 0,
|
|
|
+ page_size: 15,
|
|
|
+ event_type: '',
|
|
|
+ event_level: '',
|
|
|
+ event_status: '',
|
|
|
+ search_keyword: ''
|
|
|
+});
|
|
|
+
|
|
|
+const onSearchKeyword = (val) => {
|
|
|
+ queryParams.value.search_keyword = val;
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+const onSearchCancel = () => {
|
|
|
+ queryParams.value.search_keyword = '';
|
|
|
+ queryParams.value.page = 0;
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+const getList = () => {
|
|
|
+ dataList.value = [
|
|
|
+ { time: '2024-10-23 11:10:08', time2: '00:00-08', status: '0' },
|
|
|
+ { time: '2024-10-23 11:10:08', time2: '00:00-08', status: '1' },
|
|
|
+ { time: '2024-10-23 11:10:08', time2: '00:00-08', status: '1' },
|
|
|
+ { time: '2024-10-23 11:10:08', time2: '00:00-08', status: '0' },
|
|
|
+ { time: '2024-10-23 11:10:08', time2: '00:00-08', status: '0' }
|
|
|
+ ];
|
|
|
+ loading.value = false;
|
|
|
+ // queryParams.value.page++;
|
|
|
+ // getEventList(queryParams.value).then((res) => {
|
|
|
+ // let items = res.data || [];
|
|
|
+ // total.value = res.total;
|
|
|
+ // if (queryParams.value.page == 1) {
|
|
|
+ // dataList.value = [];
|
|
|
+ // }
|
|
|
+ // items.forEach(val => {
|
|
|
+ // dataList.value.push(val)
|
|
|
+ // });
|
|
|
+ // if (queryParams.value.page_size * queryParams.value.page >= total.value) {
|
|
|
+ // finished.value = true;
|
|
|
+ // } else {
|
|
|
+ // finished.value = false;
|
|
|
+ // }
|
|
|
+ // }).catch(() => {
|
|
|
+ // error.value = true;
|
|
|
+ // finished.value = false;
|
|
|
+ // }).finally(() => {
|
|
|
+ // loading.value = false;
|
|
|
+ // });
|
|
|
+}
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.container {
|
|
|
padding: 16px;
|
|
|
height: calc(100vh - 55px) !important;
|
|
|
}
|
|
|
+
|
|
|
.box1 {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.card1 {
|
|
|
background: url('@/assets/images/onlineRollCall/box10.png') no-repeat;
|
|
|
+
|
|
|
.icon {
|
|
|
background: url('@/assets/images/onlineRollCall/icon8.png') no-repeat;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card2 {
|
|
|
background: url('@/assets/images/onlineRollCall/box11.png') no-repeat;
|
|
|
+
|
|
|
.icon {
|
|
|
background: url('@/assets/images/onlineRollCall/icon9.png') no-repeat;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card3 {
|
|
|
background: url('@/assets/images/onlineRollCall/box12.png') no-repeat;
|
|
|
+
|
|
|
.icon {
|
|
|
background: url('@/assets/images/onlineRollCall/icon10.png') no-repeat;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.card1, .card2, .card3 {
|
|
|
width: 106px;
|
|
|
height: 71px;
|
|
|
background-size: 100% 100%;
|
|
|
padding: 8px;
|
|
|
+
|
|
|
.line1 {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.icon {
|
|
|
display: inline-block;
|
|
|
width: 16px;
|
|
|
@@ -90,31 +179,37 @@ import closeImg from "@/assets/images/close.png";
|
|
|
background-size: 100% 100%;
|
|
|
margin-right: 4px;
|
|
|
}
|
|
|
+
|
|
|
.text1 {
|
|
|
font-size: 14px;
|
|
|
line-height: 26px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.line2 {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: flex-end;
|
|
|
+
|
|
|
.text2 {
|
|
|
font-size: 12px;
|
|
|
line-height: 26px;
|
|
|
}
|
|
|
+
|
|
|
.text-blue {
|
|
|
font-size: 24px;
|
|
|
color: #2C81FF;
|
|
|
font-weight: bold;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+
|
|
|
.text-green {
|
|
|
font-size: 24px;
|
|
|
color: #40C75F;
|
|
|
font-weight: bold;
|
|
|
margin-right: 6px;
|
|
|
}
|
|
|
+
|
|
|
.text-red {
|
|
|
font-size: 24px;
|
|
|
color: #FF2F3C;
|
|
|
@@ -124,4 +219,74 @@ import closeImg from "@/assets/images/close.png";
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.common-search {
|
|
|
+ margin-top: 16px;
|
|
|
+
|
|
|
+ :deep(.van-field__left-icon) {
|
|
|
+ .van-icon__image {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.van-field__right-icon) {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .van-icon__image {
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.custom-list {
|
|
|
+ .custom-list-item1 {
|
|
|
+ background: url("@/assets/images/onlineRollCall/card3.png") no-repeat;
|
|
|
+ }
|
|
|
+ .custom-list-item2 {
|
|
|
+ background: url("@/assets/images/onlineRollCall/card4.png") no-repeat;
|
|
|
+ }
|
|
|
+ .custom-list-item1, .custom-list-item2 {
|
|
|
+ width: 343px;
|
|
|
+ height: 97px;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-top: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-right: 8px;
|
|
|
+ }
|
|
|
+ .success-tag, .error-tag {
|
|
|
+ width: 25px;
|
|
|
+ height: 93px;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ .success-tag {
|
|
|
+ background-image: linear-gradient(to bottom, #73e496 0%, #58d579 50%, #41c861 100%);
|
|
|
+ }
|
|
|
+ .error-tag {
|
|
|
+ background-image: linear-gradient(to bottom, #ff5b6c 0%, #ff4555 50%, #ff303d 100%);
|
|
|
+ }
|
|
|
+ .img {
|
|
|
+ width: 95px;
|
|
|
+ height: 66px;
|
|
|
+ background-color: #ededed;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 8px;
|
|
|
+ }
|
|
|
+ .box-right {
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
