181 lines
4.8 KiB
Vue
181 lines
4.8 KiB
Vue
<template>
|
||
<view class="padding page">
|
||
<scroll-view scroll-x class="tab-scroll">
|
||
<view class="tab-list">
|
||
<view class="tab-item" :class="{ 'tab-active': activeIndex === index }"
|
||
v-for="(item, index) in warningList" :key="index" @click="switchTab(index)">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 查询条件 -->
|
||
<view class="bg-white radius padding margin-top">
|
||
<view class="flex">
|
||
<!-- <view class="lg cuIcon-search bg-blue radius text-center align-center"></view> -->
|
||
<view class="text-black text-bold">查询条件</view>
|
||
</view>
|
||
<view class="margin-top margin-bottom">开始日期</view>
|
||
<up-datetime-picker hasInput :show="show" v-model="value1" mode="date"></up-datetime-picker>
|
||
<view class="margin-top margin-bottom">结束日期</view>
|
||
<up-datetime-picker hasInput :show="show" v-model="value1" mode="date"></up-datetime-picker>
|
||
<view class="margin-top margin-bottom">公司名称</view>
|
||
<up-input placeholder="请输入公司名称"></up-input>
|
||
<button class="bg-blue round margin-top">查询</button>
|
||
</view>
|
||
<!-- 统计概览 -->
|
||
<view class="padding bg-white radius margin-top">
|
||
<view class="flex">
|
||
<view></view>
|
||
<view class="text-bold text-black">统计概览</view>
|
||
</view>
|
||
<view class="flex col-4 grid margin-top " style="gap:20rpx">
|
||
<view class="text-center padding-top-sm " style="width: 142rpx;height: 124rpx;background:#628EFB; border-radius: 8rpx;color: #fff;">
|
||
<view>80</view>
|
||
<view>总计</view>
|
||
</view>
|
||
<view class="text-center padding-top-sm " style="width: 142rpx;height: 124rpx;background:#32DCC7; border-radius: 8rpx;color: #fff;">
|
||
<view>70</view>
|
||
<view>逾期</view>
|
||
</view>
|
||
<view class="text-center padding-top-sm " style="width: 142rpx;height: 124rpx;background:#32D1E9; border-radius: 8rpx;color: #fff;">
|
||
<view>20</view>
|
||
<view>已完成</view>
|
||
</view>
|
||
<view class="text-center padding-top-sm " style="width: 142rpx;height: 124rpx;background:#A190F5; border-radius: 8rpx;color: #fff;">
|
||
<view>20</view>
|
||
<view>待处理</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 数据列表 -->
|
||
<view class="bg-white radius padding margin-top margin-bottom flex">
|
||
<view class="list-title"></view>
|
||
<view class="text-bold text-black">日常安全检查预警数据列表</view>
|
||
</view>
|
||
<view class="bg-white radius padding list-list">
|
||
<view class=" flex justify-between">
|
||
<view class="text-bold text-black">#1</view>
|
||
<view>严重逾期</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray" style="white-space: nowrap;">企业名称：</view>
|
||
<view>湘西和谐云大数据产业发展有限公司</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray">计划名称：</view>
|
||
<view>检查计划</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray">计划周期：</view>
|
||
<view>每天一次</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray">预约检查日期：</view>
|
||
<view>2025-11-20</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray">实际完成时间：</view>
|
||
<view>未完成</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray">负责人：</view>
|
||
<view>符友成</view>
|
||
</view>
|
||
<view class="flex margin-top">
|
||
<view class="text-gray">逾期天数：</view>
|
||
<view>17天 </view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref
|
||
} from 'vue'
|
||
|
||
const activeIndex = ref(0)
|
||
|
||
const warningList = ref([{
|
||
id: 1,
|
||
name: '全部状态80',
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '逾期未检16',
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '严重逾期50',
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '期限内待检4',
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '逾期已完成8',
|
||
},
|
||
{
|
||
id: 6,
|
||
name: '按期已完成2',
|
||
}
|
||
])
|
||
|
||
const switchTab = (index) => {
|
||
activeIndex.value = index
|
||
}
|
||
// 日期
|
||
const value1 = ref(Date.now());
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #EBF2FC;
|
||
}
|
||
|
||
.tab-scroll {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tab-list {
|
||
display: inline-flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.tab-item {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16rpx 28rpx;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
background: #fff;
|
||
border: 1rpx solid #ddd;
|
||
color: #333;
|
||
flex-shrink: 0;
|
||
|
||
&.tab-active {
|
||
background: #2979ff;
|
||
border-color: #2979ff;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.list-title {
|
||
width: 10rpx;
|
||
height: 32rpx;
|
||
background: #2667E9;
|
||
border-radius: 10rpx;
|
||
line-height: 32rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.list-list {
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.08);
|
||
border-left: 5px solid #2667E9;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
</style> |