This commit is contained in:
李想 2025-03-10 17:32:15 +08:00
commit 2dd8edd26a
32 changed files with 2120 additions and 28 deletions

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

@ -12,6 +12,7 @@ import resourceRouter from './modules/resource';
import traceRouter from './modules/trace';
import landsRoutes from './modules/lands';
import dictRoutes from './modules/dict';
import productOperateMainRoutes from './modules/productOperateMain';
import inputSuppliesRoutes from './modules/inputSupplies';
export const constantRoutes = [
@ -44,8 +45,9 @@ export const constantRoutes = [
},
...resourceRouter,
...traceRouter,
...landsRoutes,
...dictRoutes,
// ...landsRoutes,
// ...dictRoutes,
...productOperateMainRoutes,
...inputSuppliesRoutes,
];

View File

@ -1,10 +1,11 @@
import Layout from '@/layouts/index.vue';
import Views from '@/layouts/Views.vue';
const dictRoutes = [
{
path: '/sub-government-affairs-service/dict',
name: 'dict',
component: Layout,
component: Views,
redirect: '/sub-government-affairs-service/region',
meta: { title: '基础信息维护', icon: 'Document' },
children: [

View File

@ -1,10 +1,11 @@
import Layout from '@/layouts/index.vue';
import Views from '@/layouts/Views.vue';
const landsRoutes = [
{
path: '/sub-government-affairs-service/landManage',
name: 'landManage',
component: Layout,
component: Views,
redirect: '/sub-government-affairs-service/landsManage',
meta: { title: '土地管理', icon: 'Document' },
children: [

View File

@ -0,0 +1,31 @@
import Layout from '@/layouts/index.vue';
export default [
{
path: '/sub-government-affairs-service/productOperateMain',
name: 'productOperateMain',
component: Layout,
redirect: '/sub-government-affairs-service/individual',
meta: { title: '生产经营主体', icon: 'icon-test' },
children: [
{
path: '/sub-government-affairs-service/individual',
component: () => import('@/views/productOperateMain/individual/index.vue'),
name: 'individual',
meta: { title: '个体户', icon: 'Document' },
},
{
path: '/sub-government-affairs-service/collective',
component: () => import('@/views/productOperateMain/collective/index.vue'),
name: 'collective',
meta: { title: '村集体', icon: 'Document' },
},
{
path: '/sub-government-affairs-service/coop',
component: () => import('@/views/productOperateMain/coOp/index.vue'),
name: 'coop',
meta: { title: '合作社', icon: 'Document' },
},
],
},
];

View File

@ -1,6 +1,8 @@
import Layout from '@/layouts/index.vue';
import annualplanRouters from './annualplan';
import statisticsRoutes from './statisticAnalysis';
import landsRoutes from './lands';
import dictRoutes from './dict';
export default [
{
@ -18,6 +20,8 @@ export default [
},
...annualplanRouters,
...statisticsRoutes,
...landsRoutes,
...dictRoutes,
],
},
];

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

@ -129,6 +129,10 @@ const state = reactive({
...CRUD_OPTIONS,
addBtnText: '新增',
updateBtnText: '确定',
searchSpan: 6,
searchGutter: 80,
searchMenuPosition: 'center',
index: true,
column: [
{
label: '任务编号',
@ -307,7 +311,6 @@ const state = reactive({
],
},
],
searchColumn: [],
actions: [
{
name: '登记结果',
@ -491,3 +494,13 @@ const infoHide = () => {
infoVisible.value = false;
};
</script>
<style scoped>
/* 使用 ::v-deep 深度选择器来穿透 scoped 样式 */
::v-deep .el-table .el-table__row {
height: 50px; /* 调整行高,间接控制行间距 */
}
::v-deep .el-table .el-table__row td {
padding: 8px 0; /* 调整单元格内边距,进一步微调行间距 */
}
</style>

View File

@ -108,6 +108,10 @@ const state = reactive({
options: {
...CRUD_OPTIONS,
addBtnText: '新增作业',
searchLabelWidth: '80px',
searchSpan: 6,
searchGutter: 80,
searchMenuPosition: 'center',
column: [
{
label: '作业日期',

View File

@ -0,0 +1,274 @@
<template>
<div style="margin-top: 16px">
<el-dialog v-model="isShowVal" title="种植规划" width="1000" center>
<avue-crud
ref="stateCrudRef"
v-model="stageState.form"
v-model:search="stageState.query"
v-model:page="stageState.pageData"
:table-loading="stageState.loading"
:data="stageState.data"
:option="stageState.options"
@refresh-change="stageRefresh"
@search-reset="stageSearch"
@search-change="stageSearch"
@selection-change="stageSelection"
@current-change="stageCurrent"
@size-change="stageSize"
@row-del="stageRowDel"
@row-save="stageRowSave"
@row-update="stageRowUpdate"
>
<template #menu-left>
<el-button type="primary" icon="Plus" @click="onStateAdd">新增</el-button>
</template>
<template #stage="{ row }">
<el-tag size="small">{{ stageObj[row.stage] }}</el-tag>
</template>
<template #menu="scope">
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
</template>
</avue-crud>
</el-dialog>
</div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { useUserStore } from '@/store/modules/user';
import { getPlantingStage, savePlantingStage, editPlantingStage, delPlantingStage } from '@/apis/land.js';
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
const props = defineProps({
isShow: {
type: Boolean,
default: false,
},
rowOriginal: {
type: Object,
default: () => {
return {};
},
},
});
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const stateCrudRef = ref(null);
const stageOptions = reactive([
{ value: '0', label: '苗期' },
{ value: '1', label: '花果期' },
{ value: '2', label: '采收期' },
]);
const workOptions = reactive([
{ label: '作业计划1', value: '000001' },
{ label: '作业计划2', value: '000002' },
]);
const stageObj = reactive({
0: '苗期',
1: '花果期',
2: '采收期',
});
const isShowVal = ref(false);
let rowVal = ref({});
onMounted(() => {
isShowVal.value = props.isShow;
rowVal.value = props.rowOriginal;
});
watch(
() => (props.isShow, props.rowOriginal),
(val) => {
isShowVal.value = val.isShow;
rowVal.value = props.rowOriginal;
console.info('watch', val.isShow);
console.info('watch', val.rowOriginal);
},
{ deep: true, immediate: true }
);
const stageState = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
options: {
...CRUD_OPTIONS,
addBtn: false,
selection: false,
column: [
{
label: '所属阶段',
prop: 'stage',
type: 'select',
search: true,
dicData: stageOptions,
rules: {
required: true,
message: '请选择',
trigger: 'blur',
},
},
{
label: '作业计划',
prop: 'workId',
type: 'select',
search: true,
dicData: workOptions,
rules: {
required: true,
message: '请选择',
trigger: 'blur',
},
},
{ label: '作业时间', prop: 'coordinate', addDisplay: false, editDisplay: false },
{ label: '结束时间', prop: 'createTime', addDisplay: false, editDisplay: false },
],
actions: [
{
name: '编辑',
icon: 'edit',
event: ({ row }) => stageRowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => stageRowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
currentRow: {},
});
async function getStageList() {
stageState.loading = true;
getPlantingStage({ ...stageState.query, planId: rowVal.value.currentRow.id })
.then((res) => {
if (res.code === 200) {
const { current, size, total, records } = res.data;
stageState.data = records || [];
stageState.pageData = {
currentPage: current || 1,
pageSize: size || 10,
total: total,
};
}
})
.catch((err) => {
app.$message.error(err.msg);
stageState.data = [];
})
.finally(() => {
stageState.loading = false;
});
}
const stageSearch = (params, done) => {
if (done) done();
stageState.query = params;
stageState.query.current = 1;
getStageList();
};
const stageSelection = (rows) => {
stageState.selection = rows;
};
const stageCurrent = (current) => {
stageState.query.current = current;
getStageList();
};
const stageSize = (size) => {
stageState.query.size = size;
getStageList();
};
const stageRowDel = (row, index, done) => {
if (isEmpty(row)) return;
app
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
console.info('删除');
delPlantingStage({ id: row.id })
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功!');
getStageList();
done();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
const stageRowEdit = (row) => {
stateCrudRef.value.rowEdit(row);
};
const onStateAdd = () => {
if (!rowVal.value.currentRow.id) {
app.$message.error('请选择种植规划');
return;
}
stateCrudRef.value.rowAdd();
};
const stageRowSave = (row, done, loading) => {
row.planId = rowVal.value.currentRow.planId;
console.info('stageRowSave', row);
savePlantingStage({ ...row })
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功!');
done();
getStageList();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
const stageRowUpdate = (row, index, done, loading) => {
console.info('stageRowUpdate');
editPlantingStage(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功!');
done();
getStageList();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
</script>

View File

@ -52,7 +52,8 @@
</avue-crud>
<el-text class="mx-1" size="large">种植阶段详情</el-text>
<div style="margin-top: 16px">
<stageList :is-show="stageShow" :row="stageRow"></stageList>
<!-- <div style="margin-top: 16px">
<avue-crud
ref="stateCrudRef"
v-model="stageState.form"
@ -83,7 +84,7 @@
<custom-table-operate :actions="stageState.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</div> -->
</div>
</template>
<script setup>
@ -103,6 +104,7 @@ import {
delPlantingStage,
} from '@/apis/land.js';
import { isEmpty, imageToBase64, getAssetsFile, downloadFile } from '@/utils';
import stageList from '../../component/plantPlan/compoent/stage.vue';
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
@ -120,6 +122,9 @@ const workOptions = reactive([
{ label: '作业计划2', value: '000002' },
]);
let stageShow = ref(false);
let stageRow = ref({});
const state = reactive({
loading: false,
query: {
@ -132,6 +137,9 @@ const state = reactive({
...CRUD_OPTIONS,
addBtn: false,
rowKey: 'landId',
searchSpan: 6,
searchGutter: 80,
searchMenuPosition: 'center',
column: [
{
label: '地块名',
@ -140,6 +148,8 @@ const state = reactive({
search: true,
addDisplay: false,
editDisplay: false,
width: '180px',
showOverflowTooltip: true,
rules: {
required: true,
message: '请输入',
@ -204,6 +214,8 @@ const state = reactive({
prop: 'planId',
type: 'select',
remote: false,
width: '160px',
showOverflowTooltip: true,
props: {
label: 'planName',
value: 'id',
@ -224,6 +236,7 @@ const state = reactive({
{
label: '种植日期',
prop: 'planDate',
width: '180px',
rules: {
required: true,
message: '请选择',
@ -244,6 +257,11 @@ const state = reactive({
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
name: '种植规划',
icon: 'edit',
event: ({ row }) => toStage(row),
},
{
type: 'danger',
name: '删除',
@ -485,6 +503,11 @@ const rowDel = (row, index, done) => {
.catch(() => {});
};
const toStage = (row) => {
stageRow.value = row;
stageShow.value = true;
};
//
const onImport = () => {};
//

View File

@ -0,0 +1,466 @@
<template>
<div class="custom-page">
<avue-crud
ref="crudRef"
v-model="state.form"
v-model:search="state.query"
v-model:page="state.pageData"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<!-- <el-button type="primary" icon="Upload" @click="onImport">导入</el-button> -->
<el-button type="danger" icon="Delete" @click="onBatchDel">批量删除</el-button>
</template>
<!-- <template #operationDate-search>
<el-date-picker v-model="timeVal" type="daterange" style="width: 230px" start-placeholder="开始" end-placeholder="结束" />
</template> -->
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { useUserStore } from '@/store/modules/user';
import {
getOperationRecord,
saveOperationRecord,
editOperationRecord,
delOperationRecord,
exportOperationRecord,
getAddrCropByLand,
importOperationRecord,
} from '@/apis/land';
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const crudRef = ref(null);
const handleLandChange = async (value, form, done) => {
if (!value || !value.item || !value.item.id) return; //
let val = {};
getAddrCropByLand(value.item?.id || '')
.then((res) => {
if (res.code === 200) {
val = res.data || {};
}
})
.catch((err) => {
val = {};
})
.finally(() => {});
state.form.crop = val?.crop || value.item?.crop;
state.form.address = val?.county + val?.town + val?.village || value.item?.address;
};
const jobTypeOptions = reactive([
{ label: '蔬菜', value: '0' },
{ label: '水果', value: '1' },
]);
let timeVal = ref([]);
const state = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
addBtnText: '添加',
searchLabelWidth: '120px',
searchSpan: 8,
searchGutter: 100,
searchMenuPosition: 'center',
column: [
{
label: '主体代码',
prop: 'executor',
addDisplay: false,
editDisplay: false,
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '主体名称',
prop: 'executor',
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '经营产品种类',
prop: 'landId',
type: 'select',
remote: false,
search: true,
props: {
label: 'landName',
value: 'id',
},
dicHeaders: {
authorization: UserStore.token,
},
dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page?current=1&size=9999&draftsSaveType=0&landName=&gridName=&owner=`,
dicFormatter: (res) => res.data.records ?? [],
rules: [
{
required: true,
message: '请选择地块',
trigger: 'blur',
},
],
change: handleLandChange,
},
{
label: '主要经营产品',
showOverflowTooltip: true,
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '合作社规模',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '合作社地址',
prop: 'villageCode',
type: 'cascader',
checkStrictly: false,
search: false,
props: {
label: 'areaName',
value: 'areaCode',
children: 'areaChildVOS',
},
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
dicHeaders: {
authorization: UserStore.token,
},
dicFormatter: (res) => res.data ?? [],
rules: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
},
{
label: '负责人',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '负责人电话',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '企业信用代码',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '经营许可证',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '经营有效期',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '审核状态',
prop: 'crop',
addDisplay: false,
editDisplay: false,
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '审核意见',
prop: 'crop',
addDisplay: false,
editDisplay: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
],
searchColumn: [
{ label: '主体代码', prop: 'landName', search: true },
{ label: '主体名称', prop: 'crop', search: true },
{
label: '经营产品种类',
prop: 'operationType',
type: 'select',
search: true,
dicData: jobTypeOptions,
},
{
label: '创建日期',
prop: 'operationDate',
type: 'daterange',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
width: 200,
search: true,
},
],
actions: [
{
name: '详情',
icon: 'View',
event: ({ row }) => doDetail(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => rowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
currentRow: {},
});
//
const loadData = () => {
// state.loading = true;
// getOperationRecord(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();
//
const currentChange = (current) => {
state.query.current = current;
loadData();
};
//
const sizeChange = (size) => {
state.query.size = size;
loadData();
};
//
const searchChange = (params, done) => {
if (done) done();
state.query = params;
state.query.current = 1;
loadData();
};
//
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
//
const selectionChange = (rows) => {
state.selection = rows;
};
const handleIds = () => {
let datalist = state.selection.map((m) => {
return { landId: m.landId, landName: m.landName };
});
let selectIdlist = uniqueObjects(datalist, 'landId');
let selectIdsVal = selectIdlist.map((n) => {
return n.landId;
});
return selectIdsVal.toString() || '';
};
function uniqueObjects(arr, key) {
return arr.reduce((acc, current) => {
const duplicate = acc.find((element) => element[key] === current[key]);
if (!duplicate) {
acc.push(current);
}
return acc;
}, []);
}
//
const rowSave = (row, done, loading) => {
// console.info('', row);
saveOperationRecord(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowEdit = (row) => {
console.info('编辑', row);
crudRef.value.rowEdit(row);
};
const doDetail = (row) => {
crudRef.value.rowView(row);
};
const rowUpdate = (row, index, done, loading) => {
console.info('更新');
editOperationRecord(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowDel = (row, index, done) => {
if (isEmpty(row)) return;
app
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
console.info('删除', row.recordId);
delOperationRecord(row.recordId || '')
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功!');
loadData();
done();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
const onBatchDel = () => {
let ids = handleIds();
if (!ids.length || ids.length <= 0) {
return app.$message.error('请先选择要删除的数据');
}
};
</script>

View File

@ -0,0 +1,437 @@
<template>
<div class="custom-page">
<avue-crud
ref="crudRef"
v-model="state.form"
v-model:search="state.query"
v-model:page="state.pageData"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<!-- <el-button type="primary" icon="Upload" @click="onImport">导入</el-button> -->
<el-button type="danger" icon="Delete" @click="onBatchDel">批量删除</el-button>
</template>
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { useUserStore } from '@/store/modules/user';
import {
getOperationRecord,
saveOperationRecord,
editOperationRecord,
delOperationRecord,
exportOperationRecord,
getAddrCropByLand,
importOperationRecord,
} from '@/apis/land';
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const crudRef = ref(null);
const handleLandChange = async (value, form, done) => {
if (!value || !value.item || !value.item.id) return; //
let val = {};
getAddrCropByLand(value.item?.id || '')
.then((res) => {
if (res.code === 200) {
val = res.data || {};
}
})
.catch((err) => {
val = {};
})
.finally(() => {});
state.form.crop = val?.crop || value.item?.crop;
state.form.address = val?.county + val?.town + val?.village || value.item?.address;
};
const jobTypeOptions = reactive([
{ label: '蔬菜', value: '0' },
{ label: '水果', value: '1' },
]);
const state = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
addBtnText: '添加',
searchLabelWidth: '120px',
searchSpan: 8,
searchGutter: 100,
searchMenuPosition: 'center',
column: [
{
label: '主体代码',
prop: 'executor',
addDisplay: false,
editDisplay: false,
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '主体名称',
prop: 'executor',
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '经营产品种类',
prop: 'landId',
type: 'select',
remote: false,
search: true,
props: {
label: 'landName',
value: 'id',
},
dicHeaders: {
authorization: UserStore.token,
},
dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page?current=1&size=9999&draftsSaveType=0&landName=&gridName=&owner=`,
dicFormatter: (res) => res.data.records ?? [],
rules: [
{
required: true,
message: '请选择地块',
trigger: 'blur',
},
],
change: handleLandChange,
},
{
label: '主要经营产品',
showOverflowTooltip: true,
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '村集体规模',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '联系地址',
prop: 'villageCode',
type: 'cascader',
checkStrictly: false,
search: false,
props: {
label: 'areaName',
value: 'areaCode',
children: 'areaChildVOS',
},
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
dicHeaders: {
authorization: UserStore.token,
},
dicFormatter: (res) => res.data ?? [],
rules: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
},
{
label: '详细地址',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '负责人身份证号',
prop: 'crop',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '负责人联系电话',
prop: 'crop',
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '审核状态',
prop: 'crop',
addDisplay: false,
editDisplay: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '审核意见',
prop: 'crop',
addDisplay: false,
editDisplay: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false },
],
searchColumn: [
{ label: '主体代码', prop: 'landName', search: true, width: 200 },
{ label: '主体名称', prop: 'crop', search: true },
{
label: '经营产品种类',
prop: 'operationType',
type: 'select',
search: true,
dicData: jobTypeOptions,
},
{
label: '创建日期',
prop: 'operationDate',
type: 'daterange',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
width: 200,
search: true,
},
],
actions: [
{
name: '详情',
icon: 'View',
event: ({ row }) => doDetail(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => rowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
currentRow: {},
});
//
const loadData = () => {
// state.loading = true;
// getOperationRecord(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();
//
const currentChange = (current) => {
state.query.current = current;
loadData();
};
//
const sizeChange = (size) => {
state.query.size = size;
loadData();
};
//
const searchChange = (params, done) => {
if (done) done();
state.query = params;
state.query.current = 1;
loadData();
};
//
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
//
const selectionChange = (rows) => {
state.selection = rows;
};
const handleIds = () => {
let datalist = state.selection.map((m) => {
return { landId: m.landId, landName: m.landName };
});
let selectIdlist = uniqueObjects(datalist, 'landId');
let selectIdsVal = selectIdlist.map((n) => {
return n.landId;
});
return selectIdsVal.toString() || '';
};
function uniqueObjects(arr, key) {
return arr.reduce((acc, current) => {
const duplicate = acc.find((element) => element[key] === current[key]);
if (!duplicate) {
acc.push(current);
}
return acc;
}, []);
}
//
const rowSave = (row, done, loading) => {
// console.info('', row);
saveOperationRecord(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowEdit = (row) => {
console.info('编辑', row);
crudRef.value.rowEdit(row);
};
const doDetail = (row) => {
crudRef.value.rowView(row);
};
const rowUpdate = (row, index, done, loading) => {
console.info('更新');
editOperationRecord(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowDel = (row, index, done) => {
if (isEmpty(row)) return;
app
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
console.info('删除', row.recordId);
delOperationRecord(row.recordId || '')
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功!');
loadData();
done();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
const onBatchDel = () => {
let ids = handleIds();
if (!ids.length || ids.length <= 0) {
return app.$message.error('请先选择要删除的数据');
}
};
</script>

View File

@ -0,0 +1,446 @@
<template>
<div class="custom-page">
<avue-crud
ref="crudRef"
v-model="state.form"
v-model:search="state.query"
v-model:page="state.pageData"
:table-loading="state.loading"
:data="state.data"
:option="state.options"
@refresh-change="refreshChange"
@search-reset="searchChange"
@search-change="searchChange"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@row-save="rowSave"
@row-update="rowUpdate"
@row-del="rowDel"
>
<template #menu-left>
<!-- <el-button type="primary" icon="Upload" @click="onImport">导入</el-button> -->
<el-button type="danger" icon="Delete" @click="onBatchDel">批量删除</el-button>
</template>
<!-- <template #operationDate-search>
<el-date-picker v-model="timeVal" type="daterange" style="width: 230px" start-placeholder="开始" end-placeholder="结束" />
</template> -->
<template #menu="scope">
<custom-table-operate :actions="state.options.actions" :data="scope" />
</template>
</avue-crud>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { useApp } from '@/hooks';
import { CRUD_OPTIONS } from '@/config';
import { isEmpty, downloadFile } from '@/utils';
import { useUserStore } from '@/store/modules/user';
import {
getOperationRecord,
saveOperationRecord,
editOperationRecord,
delOperationRecord,
exportOperationRecord,
getAddrCropByLand,
importOperationRecord,
} from '@/apis/land';
const { VITE_APP_BASE_API } = import.meta.env;
const app = useApp();
const UserStore = useUserStore();
const crudRef = ref(null);
const handleLandChange = async (value, form, done) => {
if (!value || !value.item || !value.item.id) return; //
let val = {};
getAddrCropByLand(value.item?.id || '')
.then((res) => {
if (res.code === 200) {
val = res.data || {};
}
})
.catch((err) => {
val = {};
})
.finally(() => {});
state.form.crop = val?.crop || value.item?.crop;
state.form.address = val?.county + val?.town + val?.village || value.item?.address;
};
const jobTypeOptions = reactive([
{ label: '蔬菜', value: '0' },
{ label: '水果', value: '1' },
]);
let timeVal = ref([]);
const state = reactive({
loading: false,
query: {
current: 1,
size: 10,
},
form: {},
selection: [],
options: {
...CRUD_OPTIONS,
addBtnText: '添加',
searchLabelWidth: '120px',
searchSpan: 8,
searchGutter: 100,
searchMenuPosition: 'center',
column: [
{
label: '主体代码',
prop: 'executor',
addDisplay: false,
editDisplay: false,
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '主体名称',
prop: 'executor',
search: true,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '经营产品种类',
prop: 'landId',
type: 'select',
remote: false,
search: true,
props: {
label: 'landName',
value: 'id',
},
dicHeaders: {
authorization: UserStore.token,
},
dicUrl: `${VITE_APP_BASE_API}/land-resource/landManage/page?current=1&size=9999&draftsSaveType=0&landName=&gridName=&owner=`,
dicFormatter: (res) => res.data.records ?? [],
rules: [
{
required: true,
message: '请选择地块',
trigger: 'blur',
},
],
change: handleLandChange,
},
{
label: '主要经营产品',
showOverflowTooltip: true,
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '户主身份证号',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '联系地址',
prop: 'villageCode',
type: 'cascader',
checkStrictly: false,
search: false,
props: {
label: 'areaName',
value: 'areaCode',
children: 'areaChildVOS',
},
dicUrl: `${VITE_APP_BASE_API}/system/area/region?areaCode=530000`,
dicHeaders: {
authorization: UserStore.token,
},
dicFormatter: (res) => res.data ?? [],
rules: [
{
required: true,
message: '请选择',
trigger: 'blur',
},
],
},
{
label: '详细地址',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '户主身份证号',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '联系电话',
prop: 'crop',
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '审核状态',
prop: 'crop',
addDisplay: false,
editDisplay: false,
search: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{
label: '审核意见',
prop: 'crop',
addDisplay: false,
editDisplay: false,
rules: {
required: true,
message: '请输入',
trigger: 'blur',
},
},
{ label: '创建时间', prop: 'crop', addDisplay: false, editDisplay: false, search: false },
],
searchColumn: [
{ label: '主体代码', prop: 'landName', search: true },
{ label: '主体名称', prop: 'crop', search: true },
{
label: '经营产品种类',
prop: 'operationType',
type: 'select',
search: true,
dicData: jobTypeOptions,
},
{
label: '创建日期',
prop: 'operationDate',
type: 'daterange',
format: 'YYYY-MM-DD',
valueFormat: 'YYYY-MM-DD',
width: 200,
search: true,
},
],
actions: [
{
name: '详情',
icon: 'View',
event: ({ row }) => doDetail(row),
},
{
name: '编辑',
icon: 'edit',
event: ({ row }) => rowEdit(row),
},
{
type: 'danger',
name: '删除',
icon: 'delete',
event: ({ row }) => rowDel(row),
},
],
},
pageData: {
total: 0,
currentPage: 1,
pageSize: 10,
},
data: [],
currentRow: {},
});
//
const loadData = () => {
// state.loading = true;
// getOperationRecord(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();
//
const currentChange = (current) => {
state.query.current = current;
loadData();
};
//
const sizeChange = (size) => {
state.query.size = size;
loadData();
};
//
const searchChange = (params, done) => {
if (done) done();
state.query = params;
state.query.current = 1;
loadData();
};
//
const refreshChange = () => {
loadData();
app.$message.success('刷新成功');
};
//
const selectionChange = (rows) => {
state.selection = rows;
};
const handleIds = () => {
let datalist = state.selection.map((m) => {
return { landId: m.landId, landName: m.landName };
});
let selectIdlist = uniqueObjects(datalist, 'landId');
let selectIdsVal = selectIdlist.map((n) => {
return n.landId;
});
return selectIdsVal.toString() || '';
};
function uniqueObjects(arr, key) {
return arr.reduce((acc, current) => {
const duplicate = acc.find((element) => element[key] === current[key]);
if (!duplicate) {
acc.push(current);
}
return acc;
}, []);
}
//
const rowSave = (row, done, loading) => {
// console.info('', row);
saveOperationRecord(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('添加成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowEdit = (row) => {
console.info('编辑', row);
crudRef.value.rowEdit(row);
};
const doDetail = (row) => {
crudRef.value.rowView(row);
};
const rowUpdate = (row, index, done, loading) => {
console.info('更新');
editOperationRecord(row)
.then((res) => {
if (res.code === 200) {
app.$message.success('更新成功!');
done();
loadData();
}
})
.catch((err) => {
app.$message.error(err.msg);
})
.finally(() => {
loading();
});
};
//
const rowDel = (row, index, done) => {
if (isEmpty(row)) return;
app
.$confirm(`删除后信息将不可查看,确认要删除吗?`, '确定删除', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
console.info('删除', row.recordId);
delOperationRecord(row.recordId || '')
.then((res) => {
if (res.code === 200) {
app.$message.success('删除成功!');
loadData();
done();
}
})
.catch((err) => {
app.$message.error(err.msg);
});
})
.catch(() => {});
};
const onBatchDel = () => {
let ids = handleIds();
if (!ids.length || ids.length <= 0) {
return app.$message.error('请先选择要删除的数据');
}
};
</script>

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>