303 lines
9.0 KiB
Vue
303 lines
9.0 KiB
Vue
<template>
|
|
<div class="screen-div">
|
|
<div class="screen-row">
|
|
<div class="screen-item">
|
|
<div class="screen-item-label" style="margin-right:9px;">年份</div>
|
|
<a-select
|
|
allowClear
|
|
style="width: 103px"
|
|
v-model:value="props.year"
|
|
:options="yearOptions"
|
|
@change=" (value) => {
|
|
emits('auditProgressScreenChange', value, 'year');
|
|
}"
|
|
/>
|
|
</div>
|
|
<div class="screen-item" style="margin-left:20px;margin-right:17px;">
|
|
<div class="screen-item-label" style="margin-right:11px;">图斑来源</div>
|
|
<a-select
|
|
allowClear
|
|
style="width: 142px"
|
|
v-model:value="props.patchSource"
|
|
:options="degrainingPatchSourceOptions"
|
|
@change="
|
|
(value) => {
|
|
emits('auditProgressScreenChange', value, 'patchSource');
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="screen-item">
|
|
<div class="screen-item-label" style="margin-right:9px;">批次</div>
|
|
<a-select
|
|
allowClear
|
|
style="width: 117px"
|
|
v-model:value="props.batch"
|
|
:options="props.batchOptions"
|
|
@change="
|
|
(value) => {
|
|
emits('auditProgressScreenChange', value, 'batch');
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-list">
|
|
<!-- <div class="data-title">审核进度</div> -->
|
|
<div class="show-data-list-content">
|
|
<div
|
|
class="data-item"
|
|
v-for="(item, index) in dataList"
|
|
:key="index"
|
|
@click="emits('showInfo', item)"
|
|
v-if="dataList.length > 0"
|
|
>
|
|
<div class="name-div">
|
|
<div style="display:flex;align-items: center;">
|
|
<img src="/positioning.png" class="item-mark"/>
|
|
<div class="item-label">{{ item.areaname }}</div>
|
|
</div>
|
|
<div class="progress-div">
|
|
<div class="progress-label reviewed-color" style="width:70px;">待审核</div>
|
|
<div class="progress-data" style="width:37px">
|
|
<span style="color: #EC7908;">{{item.verifytask}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-data-div">
|
|
<div class="info-data-item">
|
|
<div class="info-data-label">下发</div>
|
|
<div class="info-data-data">{{item.totaltask}}</div>
|
|
</div>
|
|
<!-- <div style="width: 1px;margin-right:27px;margin-left:31px;background-color:#EDEDED;height: 15px;"></div> -->
|
|
<div class="info-data-item">
|
|
<div class="info-data-label">接收</div>
|
|
<div class="info-data-data">{{item.receivetask}}</div>
|
|
</div>
|
|
<div class="info-data-item">
|
|
<div class="info-data-label">非农化</div>
|
|
<div class="info-data-data">{{item.nonfoodcase}}</div>
|
|
</div>
|
|
<!-- <div style="width: 1px;margin-right:15px;margin-left:30px;background-color:#EDEDED;height: 15px;"></div> -->
|
|
<div class="info-data-item">
|
|
<div class="info-data-label">举证合法</div>
|
|
<div class="info-data-data">{{item.legalcase}}</div>
|
|
</div>
|
|
<!-- <div style="width: 1px;margin-right:18px;margin-left:17px;background-color:#EDEDED;height: 15px;"></div> -->
|
|
<div class="info-data-item">
|
|
<div class="info-data-label">举证其他</div>
|
|
<div class="info-data-data">{{item.ilegalcase}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="no-data">
|
|
<a-empty :image="simpleImage" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, defineProps, defineEmits, toRefs } from 'vue';
|
|
import Icon from '@/components/Icon/Icon.vue';
|
|
import { Empty } from 'ant-design-vue';
|
|
import {degrainingPatchSourceOptions} from '@/utils/global'
|
|
|
|
const props = defineProps(['year', 'batch','patchSource', 'batchOptions', 'yearOptions', 'dataList']);
|
|
const emits = defineEmits(['auditProgressScreenChange', 'showInfo']);
|
|
|
|
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
|
|
// function changeParam(val,type) {
|
|
// emits('auditProgressScreenChange', val, type);
|
|
// }
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.screen-div {
|
|
width:590px;
|
|
padding: 22px 12px 14px 13px;
|
|
.screen-row {
|
|
display: flex;
|
|
height: 39px;
|
|
.screen-item {
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #000000;
|
|
// width: 33.3%;
|
|
display: flex;
|
|
.item-input{
|
|
width:223px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #000000;
|
|
line-height: 30px;
|
|
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
|
}
|
|
.screen-item-label {
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 17px;
|
|
color: #000000;
|
|
line-height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
:deep(.ant-select-selector){
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: HarmonyOS Sans;
|
|
font-weight: 500;
|
|
font-size: 19px;
|
|
color: #000000;
|
|
line-height: 30px;
|
|
height: 39px;
|
|
box-shadow: 2px 3px 3px 1px rgba(13,13,13,0.05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.data-list {
|
|
height: calc(100% - 85px);
|
|
// background: darkgoldenrod;
|
|
// background: @component-background;
|
|
margin-top: 10px;
|
|
padding: 0px 11px 0px 13px;
|
|
.data-title {
|
|
height: 40px;
|
|
background: #bab9b7;
|
|
font-size: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 600;
|
|
color: #366198;
|
|
}
|
|
.show-data-list-content {
|
|
height: 76vh;
|
|
overflow: auto;
|
|
.data-item {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 11px;
|
|
padding: 0px 15px;
|
|
margin-bottom: 8px;
|
|
.name-div {
|
|
display: flex;
|
|
height: 57px;
|
|
align-items: center;
|
|
padding: 10px 0px;
|
|
border-bottom: 1px solid #E5E5E5;
|
|
justify-content: space-between;
|
|
}
|
|
.info-data-div{
|
|
height: 61px;
|
|
display: flex;
|
|
align-items: center;
|
|
// padding-left: 27px;
|
|
// justify-content: space-between;
|
|
// margin-top: 10px;
|
|
.info-data-item{
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: center;
|
|
border-right: 1px solid #EDEDED;
|
|
.info-data-label{
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #959494;
|
|
display: flex;
|
|
line-height: 30px;
|
|
margin-right: 11px;
|
|
}
|
|
.info-data-data{
|
|
font-family: HarmonyOS Sans;
|
|
font-weight: 500;
|
|
font-size: 16px;
|
|
color: #000000;
|
|
line-height: 30px;
|
|
display: flex;
|
|
}
|
|
}
|
|
.info-data-item:nth-last-child(1){
|
|
border-right: 0px;
|
|
}
|
|
}
|
|
.data-div {
|
|
font-weight: 500;
|
|
margin-right: 5px;
|
|
}
|
|
.item-mark {
|
|
width: 17px;
|
|
height: 17px;
|
|
// background: #086dec;
|
|
// margin-left: 7px;
|
|
// margin-right: 7px;
|
|
}
|
|
.item-label {
|
|
// width: 122px;
|
|
padding-left: 12px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 500;
|
|
font-size: 23px;
|
|
color: #000000;
|
|
line-height: 30px;
|
|
}
|
|
.progress-div{
|
|
display:flex;
|
|
// font-weight: 500;
|
|
// font-size: 16px;
|
|
// line-height: 30px;
|
|
// margin-right: 17px;
|
|
.progress-label{
|
|
font-family: Alibaba PuHuiTi;
|
|
color: #FFFFFF;
|
|
width: 50px;
|
|
height: 30px;
|
|
border-radius: 4px 0px 0px 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.progress-data{
|
|
background: #EFEFEF;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0px 4px 4px 0px;
|
|
font-family: HarmonyOS Sans;
|
|
font-weight: 500;
|
|
font-size: 19px;
|
|
// color: #086DEC;
|
|
line-height: 30px;
|
|
}
|
|
.progress-color{
|
|
background: #086DEC;
|
|
}
|
|
.extended-color{
|
|
background: #D03542
|
|
}
|
|
.reviewed-color{
|
|
background: #EC7908
|
|
}
|
|
}
|
|
}
|
|
.data-item:hover {
|
|
background-color: rgba(8, 109, 236, 0.08);
|
|
}
|
|
// .data-item:nth-child(2n) {
|
|
// background: #ececec;
|
|
// }
|
|
}
|
|
}
|
|
.no-data {
|
|
padding: 20px 0;
|
|
}
|
|
</style>
|