This commit is contained in:
lzc 2025-03-10 17:32:44 +08:00
commit cffd50a4fe
29 changed files with 807 additions and 176 deletions

View File

@ -223,3 +223,36 @@ export function exportlandInspection(params = {}) {
responseType: 'blob',
});
}
/* ------ 土地违法处理 ------ */
// #region
/* 查询土地违法处理 */
export function getLandIllegal(params = {}) {
return request('land-resource/landViolation/page', {
method: 'GET',
params,
});
}
/* 新增土地违法处理 */
export function createLandIllegal(data = {}) {
return request('land-resource/landViolation/save', {
method: 'POST',
data,
});
}
/* 登记处理 */
export function registerLandIllegal(data = {}) {
return request('land-resource/landViolation/registResult', {
method: 'PUT',
data,
});
}
/* 违法详情 */
export function illegalInfo(id = '') {
return request('land-resource/landViolation/detail/' + id, {
method: 'GET',
});
}
// #endregion

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

@ -18,7 +18,7 @@ const inputSuppliesRoutes = [
path: '/sub-government-affairs-service/basicInfo',
name: 'basicInfo',
component: () => import('@/views/inputSuppliesManage/basicInfo/index.vue'),
meta: { title: '物资', icon: 'Document' },
meta: { title: '物资管理', icon: 'Document' },
},
// {
// path: '/sub-government-affairs-service/productionDealer',

View File

@ -6,47 +6,53 @@ export default [
path: '/sub-government-affairs-service/trace',
name: 'trace',
component: Layout,
redirect: '/sub-government-affairs-service/breeding',
redirect: '/sub-government-affairs-service/trace-home',
meta: { title: '溯源管理', icon: 'Document' },
children: [
{
path: '/sub-government-affairs-service/planting',
name: 'planting',
path: '/sub-government-affairs-service/trace-index',
name: 'trace-index',
component: () => import('@/views/trace/statistic/index.vue'),
meta: { title: '溯源首页', icon: 'Document' },
},
{
path: '/sub-government-affairs-service/record',
name: 'record',
component: Views,
meta: { title: '种植档案', icon: 'Document' },
redirect: '/sub-government-affairs-service/planting-base',
meta: { title: '种植档案', icon: 'Document' },
redirect: '/sub-government-affairs-service/record-base',
children: [
{
path: '/sub-government-affairs-service/planting-base',
component: () => import('@/views/trace/planting/base/index.vue'),
name: 'planting-base',
path: '/sub-government-affairs-service/record-base',
component: () => import('@/views/trace/record/base/index.vue'),
name: 'record-base',
meta: { title: '基地档案', icon: 'Document' },
},
{
path: '/sub-government-affairs-service/planting-seed',
component: () => import('@/views/trace/planting/seed/index.vue'),
name: 'planting-seed',
meta: { title: '种档案', icon: 'Document' },
path: '/sub-government-affairs-service/record-seed',
component: () => import('@/views/trace/record/seed/index.vue'),
name: 'record-seed',
meta: { title: '种档案', icon: 'Document' },
},
],
},
{
path: '/sub-government-affairs-service/breeding',
name: 'breeding',
path: '/sub-government-affairs-service/agricultural',
name: 'agricultural',
component: Views,
meta: { title: '农事管理', icon: 'Document' },
redirect: '/sub-government-affairs-service/breeding-coding',
redirect: '/sub-government-affairs-service/agricultural-coding',
children: [
{
path: '/sub-government-affairs-service/breeding-coding',
component: () => import('@/views/trace/breeding/coding/index.vue'),
name: 'breeding-coding',
path: '/sub-government-affairs-service/agricultural-coding',
component: () => import('@/views/trace/agricultural/coding/index.vue'),
name: 'agricultural-coding',
meta: { title: '采收与赋码管理', icon: 'Document' },
},
{
path: '/sub-government-affairs-service/breeding-quality',
component: () => import('@/views/trace/breeding/quality/index.vue'),
name: 'breeding-quality',
path: '/sub-government-affairs-service/agricultural-quality',
component: () => import('@/views/trace/agricultural/quality/index.vue'),
name: 'agricultural-quality',
meta: { title: '产品质检管理', icon: 'Document' },
},
],

View File

@ -1,16 +1,19 @@
<template>
<el-radio-group v-model="landType" class="radio_group" style="margin-bottom: 30px" @change="getList()">
<el-radio-button v-for="item in props.option" :key="'radio_' + item.value" :value="item.value">
<el-radio-group v-model="val" class="radio_group" style="margin-bottom: 30px" @change="emit('update:value', val)">
<el-radio-button v-for="item in props.options" :key="'radio_' + item.value" :value="item.value" color="red">
{{ item.label }}
</el-radio-button>
</el-radio-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
<script setup>
import { ref, watch } from 'vue';
const props = defineProps({
option: {
value: {
type: String,
default: '1',
},
options: {
type: Array,
default: () => [
{
@ -28,10 +31,18 @@ const props = defineProps({
],
},
});
const emit = defineEmits(['update:value']);
/* --------------- data --------------- */
// #region
const val = ref('1');
watch(
() => props.value,
() => (val.value = props.value),
{
deep: true,
immediate: true,
}
);
// #endregion
/* --------------- methods --------------- */
@ -44,6 +55,7 @@ const props = defineProps({
.radio_group {
justify-content: center;
width: 100%;
font-size: 18px;
> label {
width: 12%;
::v-deep() {
@ -52,5 +64,12 @@ const props = defineProps({
}
}
}
::v-deep() {
.is-active {
.el-radio-button__inner {
background-color: rgb(255, 45, 45) !important;
}
}
}
}
</style>

View File

@ -1,6 +1,8 @@
<template>
<section class="rank_content" :style="{ '--theme': props.type == 1 ? 'red' : 'black' }">
<h2>{{ props.type == '1' ? '红' : '黑' }}</h2>
<!-- <h2>{{ props.type == '1' ? '红' : '黑' }}</h2> -->
<TypeRadio v-model:value="radio" :options="options" />
<section>{{ radio }}</section>
<div v-for="(item, i) in props.data" :key="`rank_${props.type}_${i}`" class="rank_item">
<div class="name">{{ item.name }}</div>
<div></div>
@ -11,7 +13,8 @@
</template>
<script setup>
import { ref } from 'vue';
import { reactive, ref } from 'vue';
import TypeRadio from '../../common/TypeRadio.vue';
const props = defineProps({
type: {
@ -26,7 +29,17 @@ const props = defineProps({
/* --------------- data --------------- */
// #region
const radio = ref('1');
const options = reactive([
{
value: '1',
label: '红榜',
},
{
value: '2',
label: '黑榜',
},
]);
// #endregion
/* --------------- methods --------------- */

View File

@ -0,0 +1,126 @@
<template>
<section class="create_land_attrs_content_" :style="{ '--columns': props.fileNum }">
<el-upload
v-if="props.type != 'view'"
class="custom-form__uploader"
action=""
:show-file-list="false"
:accept="props.accept"
:limit="props.limit"
:http-request="rowUploadPicture"
:disabled="attrs_.length >= props.limit"
>
<el-icon class="custom-form__uploader__icon"><Plus /></el-icon>
</el-upload>
<div v-for="item in attrs_" :key="`attr_${item.id}`" class="attrs_content__item">
<video v-if="isMP4(item.url)" :src="item.url" controls />
<img v-else :src="item.url" :alt="item.name" />
<el-icon v-if="props.type != 'view'" class="clear_btn" @click="handleClearAttr(item.id)"><CircleCloseFilled /></el-icon>
</div>
</section>
</template>
<script setup>
import { ref, watch } from 'vue';
import { CommonUpload } from '@/apis';
const emit = defineEmits(['update:attrs']);
const props = defineProps({
accept: {
type: String,
default: 'image/*',
},
type: {
type: String,
default: 'view',
},
attrs: {
type: Array,
default: () => [],
},
limit: {
type: Number,
default: 20,
},
fileNum: {
type: Number,
default: 4,
},
});
const attrs_ = ref([]);
watch(
() => props.attrs,
(val) => {
attrs_.value = val;
},
{ deep: true, immediate: true }
);
function handleClearAttr(id) {
attrs_.value = attrs_.value.filter((item) => item.id !== id);
emit('update:attrs', attrs_.value);
}
async function rowUploadPicture({ file }) {
const formData = new FormData();
formData.append('file', file);
const res = await CommonUpload(formData);
if (res.code === 200) {
attrs_.value.push({
...res.data,
id: 'id_' + Date.now(),
});
emit('update:attrs', attrs_.value);
}
}
function isMP4(filePath) {
// 使 .mp4
const regex = /\.mp4$/i;
return regex.test(filePath);
}
</script>
<style lang="scss">
.create_land_attrs_content_ {
display: grid;
flex-wrap: wrap;
grid-template-columns: repeat(var(--columns), 1fr);
box-sizing: border-box;
gap: 20px;
.custom-form__uploader {
width: 100%;
height: 100%;
box-sizing: border-box;
}
> div {
aspect-ratio: 1 / 1;
}
.attrs_content__item {
box-sizing: border-box;
position: relative;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
img,
video {
vertical-align: middle;
width: 100%;
height: 100%;
border-radius: 2px;
}
.clear_btn {
position: absolute;
right: 0px;
top: 0px;
font-size: 18px;
color: #f15c5c;
opacity: 0;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
}
&:hover {
.clear_btn {
opacity: 1;
}
}
}
}
</style>

View File

@ -18,10 +18,11 @@
<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { CommonUpload } from '@/apis';
const emit = defineEmits(['update:list']);
const emit = defineEmits(['update:attrs']);
const props = defineProps({
list: {
attrs: {
type: Array,
default: () => [],
},
@ -44,7 +45,7 @@ const props = defineProps({
const fileList = ref([]);
watch(
() => props.list,
() => props.attrs,
(val) => {
fileList.value = val;
},
@ -55,7 +56,7 @@ watch(
/* --------------- methods --------------- */
// #region
function fileChange(file, list) {
async function fileChange(file, list) {
let formatReg = true;
if (props.format.length > 0) {
formatReg = props.format.includes(file.name.slice(file.name.lastIndexOf('.') + 1));
@ -69,17 +70,34 @@ function fileChange(file, list) {
ElMessage.error(`上传文件大小不能超过${props.size}MB`);
delAttr(file.uid, list);
}
fileList.value = list;
await rowUploadPicture(file);
}
function handleDelFile(file) {
delAttr(file.uid, fileList.value);
}
function delAttr(id, list = []) {
if (!id || !list) return false;
let i = list.findIndex((v) => v.uid == id);
function delAttr(uid, list = []) {
if (!uid || !list) return false;
let i = list.findIndex((v) => v.uid == uid);
if (i < 0) return;
else list.splice(i, 1);
emit('update:attrs', fileList.value);
}
async function rowUploadPicture({ raw, name, uid }) {
const formData = new FormData();
formData.append('file', raw);
const res = await CommonUpload(formData);
if (res.code === 200) {
fileList.value.push({
name,
url: res.data.url,
status: 'success',
uid,
});
emit('update:attrs', fileList.value);
}
}
// #endregion
</script>

View File

@ -17,12 +17,13 @@
<el-button type="primary" @click="handleInfo(row)">登记处理</el-button>
</template>
<template #sceneProof-form>
<section>
<section class="proof_content_">
<span>照片视频</span>
<Attrs v-model:attrs="examineForm.proof" type="add" :limit="5" :file-num="5" accept="image/*,video/*" />
</section>
</template>
<template #attrs_-form>
<FileUpload v-model:list="examineForm.attrs" :format="['rar', 'zip', 'doc', 'docx', 'pdf']" />
<FileUpload v-model:attrs="examineForm.attrs" :format="['rar', 'zip', 'doc', 'docx', 'pdf']" />
</template>
</avue-crud>
</CustomCard>
@ -30,22 +31,29 @@
</template>
<script setup>
import { ref, reactive, h } from 'vue';
import { ref, reactive, h, onMounted } from 'vue';
import { CRUD_OPTIONS } from '@/config';
import CustomCard from '@/components/CustomCard.vue';
import { useUserStore } from '@/store/modules/user';
import Register from './common/Register.vue';
import FileUpload from './common/FileUpload.vue';
import { getLandIllegal, createLandIllegal, registerLandIllegal, illegalInfo } from '@/apis/land';
import { ElMessage, ElMessageBox } from 'element-plus';
import Attrs from '../../common/Attrs.vue';
const { VITE_APP_BASE_API } = import.meta.env;
const UserStore = useUserStore();
onMounted(() => {
getList();
});
/* --------------- data --------------- */
// #region
const crudRef = ref();
const searchData = ref({
caseNum: '',
process: '',
caseId: '',
caseResult: '',
});
const page = ref({
currentPage: 1,
@ -53,62 +61,50 @@ const page = ref({
total: 3,
});
const _loading = ref(false);
const data = ref([
{
id_: '1',
caseNum: '111111111',
name: '张三',
unit: '123333333333333333333333333333',
owner: '张三',
process: '北京',
date: '2020-02-02',
},
{
id_: '2',
caseNum: '222222222',
name: '张三',
unit: '123333333333333333333333333333',
owner: '张三',
process: '北京',
date: '2020-02-02',
},
{
id_: '3',
caseNum: '333333333333',
name: '张三',
unit: '123333333333333333333333333333',
owner: '张三',
process: '北京',
date: '2020-02-02',
},
]);
const data = ref([]);
const landsArr = ref([]);
const option = ref({
...CRUD_OPTIONS,
refreshBtn: false,
rowKey: 'caseId',
editTitle: '案件登记处理',
column: [
{
label: '案件编号',
prop: 'caseNum',
prop: 'caseId',
search: true,
editDisplay: false,
viewDisplay: false,
rules: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
},
{
label: '案件名称',
prop: 'name',
prop: 'caseName',
editDisplay: false,
viewDisplay: false,
rules: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
},
{
label: '关联单位',
prop: 'unit',
prop: 'relatedUnit',
editDisplay: false,
viewDisplay: false,
},
{
label: '关联土地·',
prop: 'land',
prop: 'landId',
type: 'select',
addDisplay: true,
hide: true,
@ -125,9 +121,19 @@ const option = ref({
dicHeaders: {
authorization: UserStore.token,
},
dicFormatter: (res) => res?.data?.records ?? [],
dicFormatter: (res) => {
landsArr.value = res?.data?.records ?? [];
return res?.data?.records ?? [];
},
editDisplay: false,
viewDisplay: false,
rules: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
},
{
label: '联系电话',
@ -138,7 +144,7 @@ const option = ref({
},
{
label: '法定代表人',
prop: 'onwer',
prop: 'legalPerson',
addDisplay: true,
hide: true,
editDisplay: false,
@ -146,7 +152,7 @@ const option = ref({
},
{
label: '统一社会信用代码',
prop: 'code',
prop: 'usciCode',
addDisplay: true,
hide: true,
editDisplay: false,
@ -154,7 +160,7 @@ const option = ref({
},
{
label: '违法情况',
prop: 'illegal',
prop: 'violationSituation',
type: 'textarea',
addDisplay: true,
hide: true,
@ -165,7 +171,7 @@ const option = ref({
},
{
label: '负责人',
prop: 'owner',
prop: 'responsiblePerson',
display: false,
addDisplay: true,
editDisplay: false,
@ -173,7 +179,7 @@ const option = ref({
},
{
label: '案件进度',
prop: 'process',
prop: 'caseResult',
display: false,
search: true,
addDisplay: true,
@ -182,7 +188,7 @@ const option = ref({
},
{
label: '案件结果',
prop: 'result',
prop: 'caseResult',
display: false,
addDisplay: true,
editDisplay: false,
@ -190,7 +196,7 @@ const option = ref({
},
{
label: '处理时间',
prop: 'date',
prop: 'updateTime',
display: false,
addDisplay: false,
editDisplay: true,
@ -205,23 +211,23 @@ const option = ref({
column: [
{
label: '案件名称',
prop: 'name',
prop: 'caseName',
render: ({ row }) => {
return h('span', {}, row.name);
return h('span', {}, row.caseName);
},
},
{
label: '案件编号',
prop: 'caseNum',
prop: 'caseId',
render: ({ row }) => {
return h('span', {}, row.caseNum);
return h('span', {}, row.caseId);
},
},
{
label: '关联单位',
prop: 'unit',
prop: 'relatedUnit',
render: ({ row }) => {
return h('span', {}, row.unit);
return h('span', {}, row.relatedUnit);
},
},
{
@ -233,9 +239,9 @@ const option = ref({
},
{
label: '法定代表人',
prop: 'onwer',
prop: 'legalPerson',
render: ({ row }) => {
return h('span', {}, row.onwer);
return h('span', {}, row.legalPerson);
},
},
{
@ -247,18 +253,18 @@ const option = ref({
},
{
label: '统一社会信用代码',
prop: 'code',
prop: 'usciCode',
span: 24,
render: ({ row }) => {
return h('span', {}, row.code);
return h('span', {}, row.usciCode);
},
},
{
label: '违法情况',
prop: 'result',
prop: 'violationSituation',
span: 24,
render: ({ row }) => {
return h('span', {}, row.result);
return h('span', {}, row.violationSituation);
},
},
],
@ -270,7 +276,7 @@ const option = ref({
column: [
{
label: '案情记录',
prop: 'caseRecords',
prop: 'caseRecord',
type: 'textarea',
span: 24,
display: true,
@ -285,7 +291,7 @@ const option = ref({
},
{
label: '执法文书',
prop: 'document',
prop: 'lawDocument',
labelSuffix: '件',
span: 24,
display: true,
@ -294,20 +300,20 @@ const option = ref({
dicData: [
{
label: '协助调查函',
value: 0,
},
{
label: '抽样取样凭证',
value: 1,
},
{
label: '检测报告',
label: '抽样取样凭证',
value: 2,
},
{
label: '其他文书',
label: '检测报告',
value: 3,
},
{
label: '其他文书',
value: 4,
},
],
},
{
@ -325,28 +331,28 @@ const option = ref({
label: '案件处理结果',
prop: 'caseResult',
type: 'radio',
value: 0,
value: 1,
dicData: [
{
label: '正常营业,无违规行为',
value: 0,
},
{
label: '简易程序,当场行政处罚',
value: 1,
},
{
label: '普通程序,当场处罚立案审批',
label: '简易程序,当场行政处罚',
value: 2,
},
{
label: '移送程序,案件移送',
label: '普通程序,当场处罚立案审批',
value: 3,
},
{
label: '特殊程序,案件终止',
label: '移送程序,案件移送',
value: 4,
},
{
label: '特殊程序,案件终止',
value: 5,
},
],
span: 24,
display: true,
@ -360,27 +366,43 @@ const caseInfo = ref({
visible: false,
});
const examineForm = reactive({
record: '',
caseId: '',
proof: [],
document: 1,
attrs: [],
result: 1,
});
// #endregion
/* --------------- methods --------------- */
// #region
async function getList() {
let params = {
current: page.value.currentPage,
size: page.value.pageSize,
...searchData.value,
};
console.log('params -- ', params);
let res = await getLandIllegal(params);
console.log('res -- ', res);
if (res.code == 200) {
data.value = res.data.records;
page.value.total = res.data.total;
}
}
function handlePageChange(val) {
console.log('page', val);
page.value.currentPage = val;
getList();
}
function handleSizeChange(val) {
page.value.currentPage = 1;
page.value.pageSize = val;
console.log('size', val, page.value);
getList();
}
function handleInfo(row) {
console.log('row', row);
examineForm.caseId = row.caseId;
// caseInfo.value.visible = true;
crudRef.value.rowEdit(row);
// crudRef.value.rowView(row);
@ -392,27 +414,75 @@ function handleSearch(form, done) {
done();
}, 1000);
}
function handleRowSave(val, done, loading) {
console.log('val', val);
console.log('done', done);
console.log('loading', loading);
loading();
let t = setTimeout(() => {
clearTimeout(t);
async function handleRowSave(val, done, loading) {
let data = {
caseId: val.caseId,
caseName: val.caseName,
relatedUnit: val.relatedUnit,
relatedLand: val.landId,
phone: val.phone,
legalPerson: val.legalPerson,
usciCode: val.usciCode,
violationSituation: val.violationSituation,
};
if (val.landId) {
data.relatedLandname = landsArr.value.find((item) => item.id == val.landId).landName;
}
console.log('val', data);
let res = await createLandIllegal(data);
if (res.code == 200) {
ElMessage.success('创建成功');
getList();
done();
}, 1000);
ElMessageBox.confirm('土地违法案件信息已添加,是否现在添加案件处理信息与结果。后续也可以单独添加。', '案件信息已添加', {
confirmButtonText: '是,现在添加',
cancelButtonText: '否,后续添加',
type: 'success',
})
.then(() => {
// getDetails('c-1');
})
.catch(() => {});
}
loading();
}
function handleExamine(val, done, loading) {
console.log('val', val);
console.log('done', done);
console.log('loading', loading);
async function handleExamine(val, done, loading) {
let data = {
caseId: examineForm.caseId,
caseRecord: val.caseRecord,
caseResult: val.caseResult,
lawDocument: val.lawDocument,
};
if (examineForm.proof.length > 0) {
data.evidenceFile = examineForm.proof.map((v) => v.url).join();
}
if (examineForm.attrs.length > 0) {
data.lawFile = examineForm.attrs.map((v) => `${v.name}&${v.url}`).join();
}
console.log('val', data);
let res = await registerLandIllegal(data);
console.log('res --', res);
loading();
if (res.code == 200) {
ElMessage.success('提交成功');
getList();
}
}
async function getDetails(id) {
let res = await illegalInfo(id);
console.log('detaile', res);
}
// #endregion
</script>
<style lang="scss" scoped>
.proof_content_ {
display: flex;
> section {
flex: 1;
}
}
::v-deep() {
.attrs_ {
.el-form-item__label {

View File

@ -3,9 +3,9 @@
<el-upload
v-if="props.view != 'view'"
class="custom-form__uploader"
action="#"
action=""
:show-file-list="false"
accept="image/*"
:accept="props.accept"
:limit="20"
:http-request="rowUploadPicture"
>
@ -23,6 +23,10 @@ import { CommonUpload } from '@/apis';
const emit = defineEmits(['update:attrs']);
const props = defineProps({
accept: {
type: String,
default: 'image/*',
},
view: {
type: String,
default: 'view',
@ -58,7 +62,7 @@ async function rowUploadPicture({ file }) {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.create_land_attrs_content_ {
display: flex;
flex-wrap: wrap;

View File

@ -550,46 +550,4 @@ async function handleRowSave(val, done, loading) {
}
}
}
.create_land_attrs_content_ {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
gap: 20px;
.custom-form__uploader {
box-sizing: border-box;
height: auto;
}
> div {
width: calc(50% - 10px);
aspect-ratio: 1 / 1;
}
.attrs_content__item {
box-sizing: border-box;
position: relative;
padding: 6px;
border: 1px solid #ccc;
border-radius: 4px;
img {
width: 100%;
height: 100%;
border-radius: 2px;
}
.clear_btn {
position: absolute;
right: 0px;
top: 0px;
font-size: 18px;
color: #f15c5c;
opacity: 0;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
}
&:hover {
.clear_btn {
opacity: 1;
}
}
}
}
</style>

View File

@ -0,0 +1,384 @@
<template>
<div class="statistic">
<el-row :gutter="16" style="margin-bottom: 20px">
<el-col :span="6">
<el-card shadow="hover">
<dl class="statistic-display d1" :style="`background-image: url(${getAssetsFile('images/trace/statistic-card-bg1.png')})`">
<dt>
<i><img :src="getAssetsFile('images/trace/statistic-card1.png')" /></i>
<span>发放溯源码</span>
</dt>
<dd>
<avue-count-up end="100086"></avue-count-up>
</dd>
</dl>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<dl class="statistic-display d2" :style="`background-image: url(${getAssetsFile('images/trace/statistic-card-bg2.png')})`">
<dt>
<i><img :src="getAssetsFile('images/trace/statistic-card2.png')" /></i>
<span>有效期内溯源码</span>
</dt>
<dd>
<avue-count-up end="37498"></avue-count-up>
</dd>
</dl>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<dl class="statistic-display d3" :style="`background-image: url(${getAssetsFile('images/trace/statistic-card-bg3.png')})`">
<dt>
<i><img :src="getAssetsFile('images/trace/statistic-card3.png')" /></i>
<span>追溯主体数</span>
</dt>
<dd>
<avue-count-up end="38479"></avue-count-up>
</dd>
</dl>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<dl class="statistic-display d4" :style="`background-image: url(${getAssetsFile('images/trace/statistic-card-bg4.png')})`">
<dt>
<i><img :src="getAssetsFile('images/trace/statistic-card4.png')" /></i>
<span>产品溯源次数</span>
</dt>
<dd>
<avue-count-up end="899967"></avue-count-up>
</dd>
</dl>
</el-card>
</el-col>
</el-row>
<el-row :gutter="16" style="margin-bottom: 20px">
<el-col :span="12">
<el-card shadow="hover">
<custom-echart-bar :chart-data="state.areaData" height="400px" :option="state.areaOption" />
</el-card>
</el-col>
<el-col :span="12">
<el-card shadow="hover">
<custom-echart-bar :chart-data="state.cropData" height="400px" :option="state.cropOption" />
</el-card>
</el-col>
</el-row>
<el-row :gutter="16">
<el-col :span="18">
<el-card shadow="hover">
<avue-crud ref="crudRef" :table-loading="state.loading" :data="state.data" :option="state.options" :header-cell-style="headerCellStyle">
<template #header>
<div class="statistic-table">
<b class="statistic-title">检测记录</b>
<el-select v-model="state.date" placeholder="请选择" style="width: 240px">
<el-option v-for="item in state.dateOption" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</template>
</avue-crud>
</el-card>
</el-col>
<el-col :span="6">
<el-card shadow="hover">
<b class="statistic-title">溯源主体统计</b>
<ul class="statistic-rank">
<li v-for="item in state.rankList" :key="item.id">
<i><img :src="getAssetsFile(`images/trace/statistic-traceability-${item.icon}.png`)" /></i>
<span>
<b>{{ item.num }}</b>
<em>{{ item.name }}</em>
</span>
</li>
</ul>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';
import { CRUD_VIEW_OPTIONS } from '@/config';
import { getAssetsFile, mockData, sleep } from '@/utils';
const router = useRouter();
const app = useApp();
const headerCellStyle = () => {
return {
background: 'none',
// border: 0,
// color: '#999',
};
};
const state = reactive({
areaOption: {
title: {
text: '溯源码发放区域分布',
textStyle: {
color: '#333',
},
},
xAxis: {
type: 'category',
name: '区域',
},
yAxis: {
type: 'value',
name: '次',
},
tooltip: {
formatter: function (params) {
return `${params.value}`;
},
},
barStyle: {
barWidth: 20,
showBackground: true,
itemStyle: {
borderRadius: 10,
},
},
},
areaData: [
{ value: 230, name: '耿马镇' },
{ value: 165, name: '勐永镇' },
{ value: 217, name: '勐撒镇' },
{ value: 200, name: '孟定镇' },
{ value: 305, name: '大兴乡' },
],
cropOption: {
title: {
text: '溯源农产品月度统计',
textStyle: {
color: '#333',
},
},
xAxis: {
type: 'category',
name: '月份',
},
yAxis: {
type: 'value',
name: '次',
},
tooltip: {
formatter: function (params) {
return `${params.value}`;
},
},
barStyle: {
barWidth: 20,
showBackground: true,
itemStyle: {
borderRadius: 10,
},
},
},
cropData: [
{ value: 230, name: '1月' },
{ value: 165, name: '2月' },
{ value: 217, name: '3月' },
{ value: 200, name: '4月' },
{ value: 305, name: '5月' },
],
loading: false,
date: 'week',
dateOption: [
{
label: '近一周',
value: 'week',
},
{
label: '近一月',
value: 'month',
},
{
label: '近一年',
value: 'year',
},
],
options: {
...CRUD_VIEW_OPTIONS,
index: false,
column: [
{
label: '送检单位',
prop: 'p1',
width: 200,
},
{
label: '检测单位',
prop: 'p2',
},
{
label: '检测结果',
prop: 'p3',
},
{
label: '送检时间',
prop: 'p4',
},
],
},
data: [],
rankList: [],
});
//
const loadData = async () => {
state.loading = true;
await sleep(500);
state.rankList = [
{
name: '个人',
num: 1000,
icon: '1',
},
{
name: '合作社',
num: 1000,
icon: '2',
},
{
name: '农业企业',
num: 1000,
icon: '3',
},
{
name: '种植企业',
num: 1000,
icon: '4',
},
];
state.data = mockData(
{
p1: '红星农业合作社',
p2: '农残检测中心',
p3: '合格',
p4: '2025-01-01',
},
10
);
state.loading = false;
// GetEntityList(state.query)
// .then((res) => {
// if (res.code === 200) {
// const { current, size, total, records } = res.data;
// state.data = records;
// state.pageData = {
// currentPage: current || 1,
// pageSize: size || 10,
// total: total,
// };
// }
// })
// .catch((err) => {
// app.$message.error(err.msg);
// state.data = [];
// })
// .finally(() => {
// state.loading = false;
// });
};
loadData();
</script>
<style lang="scss" scoped>
.statistic {
.el-card {
border: 0 !important;
border-radius: 16px !important;
}
&-title {
font-size: 16px;
font-weight: bolder;
flex: 1;
}
&-display {
@include flex-column();
background-repeat: no-repeat;
background-position: right bottom;
dt {
@include flex-row();
align-items: center;
margin-bottom: 30px;
i {
display: inline-block;
width: 72px;
height: 72px;
margin-right: 20px;
}
span {
font-size: 18px;
font-weight: 400;
}
}
dd {
span {
font-size: 22px;
font-weight: 500;
color: #000000;
}
}
&.d1 {
dt span {
color: #ff4975;
}
}
&.d2 {
dt span {
color: #41b879;
}
}
&.d3 {
dt span {
color: #3685fe;
}
}
&.d4 {
dt span {
color: #6b66ff;
}
}
}
&-table {
@include flex-row();
align-items: center;
}
&-rank {
li {
@include flex-row();
align-items: center;
margin-top: 16px;
i {
width: 72px;
height: 72px;
margin-right: 20px;
}
span {
@include flex-column();
flex: 1;
font-size: 14px;
}
em {
font-style: normal;
color: #999;
}
}
}
}
</style>