合并冲突处理
This commit is contained in:
2090205686@qq.com
commit
79ac695e43
@ -12,7 +12,7 @@ declare module 'vue' {
|
|||||||
'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
|
'CenterMap copy': typeof import('./src/components/centerMap copy.vue')['default']
|
||||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||||
Components: typeof import('./src/components/index.js')['default']
|
Components: typeof import('./src/components/index.js')['default']
|
||||||
copy: typeof import('./src/components/custom-echart-bar/index-horizontal.vue/index.js')['default']
|
copy: typeof import('./src/components/centerMap copy.vue')['default']
|
||||||
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
||||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||||
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
|
||||||
@ -42,7 +42,6 @@ declare module 'vue' {
|
|||||||
CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
|
CustomScrollTitle: typeof import('./src/components/custom-scroll-title/index.vue')['default']
|
||||||
CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
|
CustomTableOperate: typeof import('./src/components/custom-table-operate/index.vue')['default']
|
||||||
CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
|
CustomTableTree: typeof import('./src/components/custom-table-tree/index.vue')['default']
|
||||||
IndexHorizontal: typeof import('./src/components/custom-echart-bar/index-horizontal.vue')['default']
|
|
||||||
NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
|
NewHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/new-hyaline-cake.vue')['default']
|
||||||
NewPie: typeof import('./src/components/custom-echart-hyaline-cake/new-pie.vue')['default']
|
NewPie: typeof import('./src/components/custom-echart-hyaline-cake/new-pie.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
|||||||
BIN
new-digital-agriculture-screen/src/assets/images/trace/maprl.png
Normal file
BIN
new-digital-agriculture-screen/src/assets/images/trace/maprl.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
@ -14,16 +14,16 @@ const data = ref([
|
|||||||
value: 10.8,
|
value: 10.8,
|
||||||
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
|
itemStyle: { color: '#5b7bc7', opacity: 0.8 },
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
name: ' 合作社',
|
// name: ' 合作社',
|
||||||
value: 18.4,
|
// value: 18.4,
|
||||||
itemStyle: { color: '#8ed0f3', opacity: 0.8 },
|
// itemStyle: { color: '#8ed0f3', opacity: 0.8 },
|
||||||
},
|
// },
|
||||||
{
|
// {
|
||||||
name: ' 村集体',
|
// name: ' 村集体',
|
||||||
value: 14.3,
|
// value: 14.3,
|
||||||
itemStyle: { color: '#65be97', opacity: 0.8 },
|
// itemStyle: { color: '#65be97', opacity: 0.8 },
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
name: ' 个体',
|
name: ' 个体',
|
||||||
value: 23.7,
|
value: 23.7,
|
||||||
|
|||||||
@ -23,7 +23,7 @@ import { ref, reactive } from 'vue';
|
|||||||
|
|
||||||
const unit = ref('家');
|
const unit = ref('家');
|
||||||
const list = reactive([
|
const list = reactive([
|
||||||
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '亿元' },
|
{ title: '年总产值', value: 3.49, color: '#01FEFD', unit: '万元' },
|
||||||
{ title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
|
{ title: '年人均收入', value: 6.98, color: '#FEF906', unit: '万元' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@ -38,7 +38,6 @@ const state = reactive({
|
|||||||
backgroundColor: 'rgba(0,0,0,0.5)',
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
||||||
borderColor: '#35d0c0',
|
borderColor: '#35d0c0',
|
||||||
formatter: (data) => {
|
formatter: (data) => {
|
||||||
console.log('data', data);
|
|
||||||
const params = data[0];
|
const params = data[0];
|
||||||
let str = `<div class="custom-echarts-tips">
|
let str = `<div class="custom-echarts-tips">
|
||||||
<span>${params.name}</span><br/>
|
<span>${params.name}</span><br/>
|
||||||
|
|||||||
@ -0,0 +1,153 @@
|
|||||||
|
<template>
|
||||||
|
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { reactive, watch } from 'vue';
|
||||||
|
import { isEmpty } from '@/utils';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
query: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
data: [],
|
||||||
|
option: {
|
||||||
|
grid: {
|
||||||
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '5%',
|
||||||
|
top: '10%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.6);',
|
||||||
|
borderColor: '#35d0c0',
|
||||||
|
borderRadius: 8,
|
||||||
|
formatter: (data) => {
|
||||||
|
const params = data[0];
|
||||||
|
let str = `<div class="custom-echarts-tips" >
|
||||||
|
<span>${params.name}</span><br/>
|
||||||
|
<span>${params.marker} ${params.data} 万元</span>
|
||||||
|
</div>`;
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
extraCssText: 'backdrop-filter: blur(8px);',
|
||||||
|
},
|
||||||
|
barStyle: {
|
||||||
|
barWidth: 10,
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 10,
|
||||||
|
borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 1,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 0,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: '#35D0C0' },
|
||||||
|
{ offset: 1, color: 'rgba(53,208,192,0)' },
|
||||||
|
],
|
||||||
|
global: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed',
|
||||||
|
color: '#E5E5E5',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#424242',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'],
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
// barWidth: '40%', // 设置柱的宽度
|
||||||
|
// barMinHeight: 2, // 设置柱的最小高度
|
||||||
|
// barGap: '20%', // 设置柱之间的间隙
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
state.data = val;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.query,
|
||||||
|
(val) => {
|
||||||
|
if (!isEmpty(val)) {
|
||||||
|
loadData(val);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const loadData = (val) => {
|
||||||
|
if (val === 'all') {
|
||||||
|
state.data = props.data;
|
||||||
|
state.option.yAxis.data = ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '大兴乡'];
|
||||||
|
} else {
|
||||||
|
for (let i in props.data) {
|
||||||
|
if (val === props.data[i].name) {
|
||||||
|
state.data = [];
|
||||||
|
state.data.push(props.data[i]);
|
||||||
|
state.option.yAxis.data = [props.data[i].name];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(val);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -10,21 +10,19 @@
|
|||||||
:value-field="'value'"
|
:value-field="'value'"
|
||||||
:down-width="''"
|
:down-width="''"
|
||||||
:options="[
|
:options="[
|
||||||
{ label: '全县', value: '530926' },
|
{ label: '全县', value: 'all' },
|
||||||
{ label: '耿马镇', value: '42611' },
|
{ label: '耿马镇', value: '耿马镇' },
|
||||||
{ label: '勐撒镇', value: '9259' },
|
{ label: '勐撒镇', value: '勐撒镇' },
|
||||||
{ label: '勐永镇', value: '17787' },
|
{ label: '勐永镇', value: '勐永镇' },
|
||||||
{ label: '孟定镇', value: '42610' },
|
{ label: '孟定镇', value: '孟定镇' },
|
||||||
{ label: '勐简乡', value: '17788' },
|
{ label: '大兴乡', value: '大兴乡' },
|
||||||
{ label: '贺派乡', value: '40161' },
|
|
||||||
{ label: '四排山乡', value: '40163' },
|
|
||||||
{ label: '大兴乡', value: '40159' },
|
|
||||||
]"
|
]"
|
||||||
:is-down="true"
|
:is-down="true"
|
||||||
@command="handleCommand"
|
@command="handleCommand"
|
||||||
>
|
>
|
||||||
<template #back>
|
<template #back>
|
||||||
<entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>
|
<value-charts :data="state.data.one" :query="state.queryCode"></value-charts>
|
||||||
|
<!-- <entitiesCategoryCharts ref="oneRef" :data="state.data.one" :query="state.queryCode"></entitiesCategoryCharts>-->
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
@ -98,6 +96,7 @@ import entitiesStatistics from './components/entitiesStatistics.vue';
|
|||||||
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
||||||
import entitiesMap from './components/entitiesMap.vue';
|
import entitiesMap from './components/entitiesMap.vue';
|
||||||
import { sleep } from '@/utils';
|
import { sleep } from '@/utils';
|
||||||
|
import ValueCharts from '@/views/entities/components/valueCharts.vue';
|
||||||
|
|
||||||
const oneRef = ref(null);
|
const oneRef = ref(null);
|
||||||
const thirdRef = ref(null);
|
const thirdRef = ref(null);
|
||||||
@ -113,12 +112,11 @@ const loadData = async () => {
|
|||||||
await sleep(500);
|
await sleep(500);
|
||||||
state.data = {
|
state.data = {
|
||||||
one: [
|
one: [
|
||||||
{ value: 5, name: '2020' },
|
{ value: 3500, name: '耿马镇' },
|
||||||
{ value: 36, name: '2021' },
|
{ value: 6000, name: '勐撒镇' },
|
||||||
{ value: 70, name: '2022' },
|
{ value: 4000, name: '勐永镇' },
|
||||||
{ value: 56, name: '2023' },
|
{ value: 8000, name: '孟定镇' },
|
||||||
{ value: 70, name: '2024' },
|
{ value: 12000, name: '大兴乡' },
|
||||||
{ value: 20, name: '2025' },
|
|
||||||
],
|
],
|
||||||
third: [
|
third: [
|
||||||
{ value: 98, value1: 88, name: '耿马镇' },
|
{ value: 98, value1: 88, name: '耿马镇' },
|
||||||
|
|||||||
@ -22,45 +22,59 @@
|
|||||||
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
|
<section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
|
||||||
<i class="el-icon-close" @click="handleCloseInfo"></i>
|
<i class="el-icon-close" @click="handleCloseInfo"></i>
|
||||||
<section>
|
<section>
|
||||||
|
<div class="traceability_info">
|
||||||
|
<div class="_label" style="font-size: 30px">溯源信息</div>
|
||||||
|
<div class="traceability_info_box">
|
||||||
|
<div class="traceability_info_box_image">
|
||||||
|
<img style="width: 100%; height: 100%" src="../../../assets/images/entities/tomatoImg.png" />
|
||||||
|
</div>
|
||||||
|
<div class="traceability_info_box_title">
|
||||||
|
<div class="traceability_info_right">新鲜番茄</div>
|
||||||
|
<div class="traceability_info_right_bottom">检测通过</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detection_text">权威检测</div>
|
||||||
<section class="info_box">
|
<section class="info_box">
|
||||||
<div>
|
<div v-for="item in list1" :key="item.name">
|
||||||
<span class="_label">产品名称</span>
|
<span class="_label">{{ item.title }}</span>
|
||||||
<span>{{ info.productName }}</span>
|
<span>{{ item.name }}</span>
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="_label">产品批次号</span>
|
|
||||||
<span>{{ info.productCode }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="_label">产品规格</span>
|
|
||||||
<span>{{ info.specs }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="_label">产品类型</span>
|
|
||||||
<span>{{ info.productType }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="_label">生产厂家</span>
|
|
||||||
<span>{{ info.info && info.info.manufacturer }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="_label">生产时间</span>
|
|
||||||
<span>{{ info.info && info.info.productTime }}</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<span class="_label">终端零售店</span>
|
|
||||||
<span>{{ info.info && info.info.shop }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<section class="route_box">
|
<section class="route_box">
|
||||||
<div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
|
<!-- <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
|
||||||
<div class="_circle"></div>
|
<div class="_circle"></div>
|
||||||
<div class="_name">{{ item.name }}</div>
|
<div class="_name">{{ item.name }}</div>
|
||||||
<div class="_time">{{ item.time }}</div>
|
<div class="_time">{{ item.time }}</div>
|
||||||
</div>
|
</div> -->
|
||||||
<div style="text-align: center">
|
<div style="text-align: center">
|
||||||
<img src="../../../assets/images/trace/testReport.png" style="width: 30%" />
|
<img src="../../../assets/images/trace/testReport.png" style="width: 100%" />
|
||||||
<div>检测报告</div>
|
<!-- <div>检测报告</div> -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="detection_text">产地信息</div>
|
||||||
|
<div class="traceability_info">
|
||||||
|
<div class="traceability_info_box" style="flex-direction: column">
|
||||||
|
<div class="traceability_info_box_images">
|
||||||
|
<img style="width: 100%; height: 100%" src="../../../assets/images/trace/maprl.png" />
|
||||||
|
</div>
|
||||||
|
<div class="traceability_info_box_titles">
|
||||||
|
<div class="traceability_info_rights">临沧市耿马县耿马镇</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detection_text">仓储环节</div>
|
||||||
|
<section class="info_box">
|
||||||
|
<div v-for="item in list2" :key="item.name">
|
||||||
|
<span class="_label">{{ item.title }}</span>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<div class="detection_text">物流环节</div>
|
||||||
|
<section class="info_box">
|
||||||
|
<div v-for="item in list3" :key="item.name">
|
||||||
|
<span class="_label">{{ item.title }}</span>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
@ -82,6 +96,44 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
let list = ref([]);
|
let list = ref([]);
|
||||||
|
|
||||||
|
let list1 = ref([
|
||||||
|
{ title: '报告编号', name: 'H1212457' },
|
||||||
|
{ title: '送检单位', name: '水果综合种植基地' },
|
||||||
|
{ title: '送检日期', name: '2021-12-11' },
|
||||||
|
{ title: '送样人', name: '李宏微' },
|
||||||
|
{ title: '联系方式', name: '19876782134' },
|
||||||
|
{ title: '样品数量', name: '1000克' },
|
||||||
|
{ title: '样品名称', name: '新鲜番茄' },
|
||||||
|
{ title: '检测单位', name: '农残检测中心' },
|
||||||
|
{ title: '检测类型', name: '农残检测' },
|
||||||
|
{ title: '检测方法', name: '食品快速检测法' },
|
||||||
|
{ title: '评判标准', name: 'GB/T5009.199-2003' },
|
||||||
|
{ title: '检测结果', name: '合格' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
let list2 = ref([
|
||||||
|
{ title: '仓库位置', name: '耿马县耿马村仓储站' },
|
||||||
|
{ title: '仓储数量', name: '5吨' },
|
||||||
|
{ title: '入库时间', name: '2021-12-11' },
|
||||||
|
{ title: '仓库类型', name: '冷藏仓库' },
|
||||||
|
{ title: '批次编号', name: 'AP20211212001' },
|
||||||
|
{ title: '出库时间', name: '2021-12-15' },
|
||||||
|
]);
|
||||||
|
|
||||||
|
let list3 = ref([
|
||||||
|
{ title: '运输批次', name: '第一批次' },
|
||||||
|
{ title: '运输工具', name: '冷藏车' },
|
||||||
|
{ title: '运输路线', name: '耿马县一昆明市' },
|
||||||
|
{ title: '运输数量', name: '4吨' },
|
||||||
|
{ title: '运输时间', name: '2021-12-15 5:30~12-16 8:30' },
|
||||||
|
{ title: '', name: '' },
|
||||||
|
{ title: '运输批次', name: '第二批次' },
|
||||||
|
{ title: '运输工具', name: '小型运载卡车' },
|
||||||
|
{ title: '运输路线', name: '耿马县一四排乡' },
|
||||||
|
{ title: '运输数量', name: '1吨' },
|
||||||
|
{ title: '运输时间', name: '2021-12-15 5:30~12-16 7:30' },
|
||||||
|
]);
|
||||||
|
|
||||||
const classOptions = {
|
const classOptions = {
|
||||||
singleHeight: 48,
|
singleHeight: 48,
|
||||||
};
|
};
|
||||||
@ -103,7 +155,7 @@ function handleCloseInfo() {
|
|||||||
.label {
|
.label {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 25% 40% 18% 17%;
|
grid-template-columns: 25% 40% 18% 17%;
|
||||||
background-color: rgba(53, 208, 192, 0.3);
|
background-color: rgba(70, 109, 109, 0.8);
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
@ -162,6 +214,58 @@ function handleCloseInfo() {
|
|||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
|
transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
.detection_text {
|
||||||
|
font-size: 25px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.traceability_info {
|
||||||
|
.traceability_info_box {
|
||||||
|
justify-content: space-evenly;
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
margin: 20px 0px;
|
||||||
|
background-color: rgba(70, 109, 109, 0.8);
|
||||||
|
border-radius: 10px;
|
||||||
|
.traceability_info_box_image {
|
||||||
|
width: 130px;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
.traceability_info_box_images {
|
||||||
|
width: 100%;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.traceability_info_box_title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
.traceability_info_box_titles {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
.traceability_info_right {
|
||||||
|
font-size: 23px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.traceability_info_rights {
|
||||||
|
font-size: 15px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.traceability_info_right_bottom {
|
||||||
|
padding: 5px 20px;
|
||||||
|
border-radius: 40px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
color: #04ed8c;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
._label {
|
._label {
|
||||||
color: #01fefd;
|
color: #01fefd;
|
||||||
}
|
}
|
||||||
@ -207,7 +311,6 @@ function handleCloseInfo() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.route_box {
|
.route_box {
|
||||||
padding: 0 34px;
|
|
||||||
> div {
|
> div {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-bottom: 16px;
|
padding-bottom: 16px;
|
||||||
|
|||||||
@ -1,10 +1,3 @@
|
|||||||
<!--
|
|
||||||
* @Description:
|
|
||||||
* @Author: zenghua.wang
|
|
||||||
* @Date: 2023-06-20 14:29:45
|
|
||||||
* @LastEditors: zenghua.wang
|
|
||||||
* @LastEditTime: 2025-01-24 15:11:22
|
|
||||||
-->
|
|
||||||
<template>
|
<template>
|
||||||
<div class="layout-header-placeholder" :style="stylePlaceholder()"></div>
|
<div class="layout-header-placeholder" :style="stylePlaceholder()"></div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -25,12 +25,12 @@ export default [
|
|||||||
name: 'grid1',
|
name: 'grid1',
|
||||||
meta: { title: '新增网格', icon: '' },
|
meta: { title: '新增网格', icon: '' },
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
path: '/sub-government-affairs-service/grid',
|
// path: '/sub-government-affairs-service/grid',
|
||||||
component: () => import('@/views/resource/grid/index.vue'),
|
// component: () => import('@/views/resource/grid/index.vue'),
|
||||||
name: 'grid2',
|
// name: 'grid2',
|
||||||
meta: { title: '网格化地图', icon: '' },
|
// meta: { title: '网格化地图', icon: '' },
|
||||||
},
|
// },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
...annualplanRouters,
|
...annualplanRouters,
|
||||||
|
|||||||
@ -0,0 +1,375 @@
|
|||||||
|
<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="success" icon="download" @click="onExport">导出</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 { compact } from 'lodash';
|
||||||
|
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
|
||||||
|
|
||||||
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
|
const app = useApp();
|
||||||
|
const UserStore = useUserStore();
|
||||||
|
const crudRef = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
query: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
form: {},
|
||||||
|
selection: [],
|
||||||
|
options: {
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
// addBtnText: '添加网格',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '网格区',
|
||||||
|
prop: 'gridArea',
|
||||||
|
search: true,
|
||||||
|
width: 200,
|
||||||
|
addDisplay: false,
|
||||||
|
editDisplay: false,
|
||||||
|
viewDisplay: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '网格名称',
|
||||||
|
prop: 'gridName',
|
||||||
|
search: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '网格区域',
|
||||||
|
prop: 'gridAreaName',
|
||||||
|
width: 300,
|
||||||
|
display: false,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '网格区域',
|
||||||
|
prop: 'cities',
|
||||||
|
type: 'cascader',
|
||||||
|
hide: true,
|
||||||
|
addDisplay: true,
|
||||||
|
editDisplay: true,
|
||||||
|
viewDisplay: false,
|
||||||
|
// multiple: true,
|
||||||
|
// checkStrictly: true,
|
||||||
|
// collapseTags: true,
|
||||||
|
// emitPath: false,
|
||||||
|
// checkDescendants: 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: 'gridManager',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '联系方式',
|
||||||
|
prop: 'contactInfo',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '省',
|
||||||
|
prop: 'provinceCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '市',
|
||||||
|
prop: 'cityCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '县/区',
|
||||||
|
prop: 'gridAreaCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '乡镇',
|
||||||
|
prop: 'townCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '乡镇',
|
||||||
|
prop: 'village',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '备注',
|
||||||
|
prop: 'note',
|
||||||
|
type: 'textarea',
|
||||||
|
span: 24,
|
||||||
|
rows: 4,
|
||||||
|
overHidden: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '创建时间',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 200,
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '查看',
|
||||||
|
icon: 'view',
|
||||||
|
event: ({ row }) => rowView(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;
|
||||||
|
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();
|
||||||
|
|
||||||
|
// 页数
|
||||||
|
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 rowView = (row) => {
|
||||||
|
crudRef.value.rowView(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCity = (row) => {
|
||||||
|
if (!isEmpty(row.cities)) {
|
||||||
|
row.provinceCode = row?.cities[0] ?? null;
|
||||||
|
row.cityCode = row?.cities[1] ?? null;
|
||||||
|
row.gridAreaCode = row?.cities[2] ?? null;
|
||||||
|
row.townCode = row?.cities[3] ?? null;
|
||||||
|
row.village = row?.cities[4] ?? null;
|
||||||
|
// row.village = row?.cities.join(',');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
const rowSave = (row, done, loading) => {
|
||||||
|
setCity(row);
|
||||||
|
AddEntity(row)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('添加成功！');
|
||||||
|
done();
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
const rowEdit = (row) => {
|
||||||
|
const village = !isEmpty(row.village) ? row.village : [];
|
||||||
|
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
|
||||||
|
crudRef.value.rowEdit(row);
|
||||||
|
};
|
||||||
|
const rowUpdate = (row, index, done, loading) => {
|
||||||
|
setCity(row);
|
||||||
|
UpdateEntity(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(() => {
|
||||||
|
DeleteEntity({ id: row.id })
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('删除成功！');
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const onExport = () => {
|
||||||
|
if (isEmpty(state.data)) {
|
||||||
|
app.$message.error('当前暂时没有可供导出的数据！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.loading = true;
|
||||||
|
const fileName = '网格明细表';
|
||||||
|
ExportEntity(state.query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||||
|
app.$message.success('导出成功！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error('导出失败！');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
state.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,375 @@
|
|||||||
|
<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="success" icon="download" @click="onExport">导出</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 { compact } from 'lodash';
|
||||||
|
import { GetEntityList, AddEntity, UpdateEntity, DeleteEntity, ExportEntity } from '@/apis/resource/grid';
|
||||||
|
|
||||||
|
const { VITE_APP_BASE_API } = import.meta.env;
|
||||||
|
const app = useApp();
|
||||||
|
const UserStore = useUserStore();
|
||||||
|
const crudRef = ref(null);
|
||||||
|
const state = reactive({
|
||||||
|
loading: false,
|
||||||
|
query: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
},
|
||||||
|
form: {},
|
||||||
|
selection: [],
|
||||||
|
options: {
|
||||||
|
...CRUD_OPTIONS,
|
||||||
|
// addBtnText: '添加网格',
|
||||||
|
column: [
|
||||||
|
{
|
||||||
|
label: '网格区',
|
||||||
|
prop: 'gridArea',
|
||||||
|
search: true,
|
||||||
|
width: 200,
|
||||||
|
addDisplay: false,
|
||||||
|
editDisplay: false,
|
||||||
|
viewDisplay: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '网格名称',
|
||||||
|
prop: 'gridName',
|
||||||
|
search: true,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '网格区域',
|
||||||
|
prop: 'gridAreaName',
|
||||||
|
width: 300,
|
||||||
|
display: false,
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '网格区域',
|
||||||
|
prop: 'cities',
|
||||||
|
type: 'cascader',
|
||||||
|
hide: true,
|
||||||
|
addDisplay: true,
|
||||||
|
editDisplay: true,
|
||||||
|
viewDisplay: false,
|
||||||
|
// multiple: true,
|
||||||
|
// checkStrictly: true,
|
||||||
|
// collapseTags: true,
|
||||||
|
// emitPath: false,
|
||||||
|
// checkDescendants: 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: 'gridManager',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '联系方式',
|
||||||
|
prop: 'contactInfo',
|
||||||
|
rules: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '省',
|
||||||
|
prop: 'provinceCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '市',
|
||||||
|
prop: 'cityCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '县/区',
|
||||||
|
prop: 'gridAreaCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '乡镇',
|
||||||
|
prop: 'townCode',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '乡镇',
|
||||||
|
prop: 'village',
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '备注',
|
||||||
|
prop: 'note',
|
||||||
|
type: 'textarea',
|
||||||
|
span: 24,
|
||||||
|
rows: 4,
|
||||||
|
overHidden: true,
|
||||||
|
width: 200,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '创建时间',
|
||||||
|
prop: 'createTime',
|
||||||
|
width: 200,
|
||||||
|
hide: true,
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
actions: [
|
||||||
|
{
|
||||||
|
name: '查看',
|
||||||
|
icon: 'view',
|
||||||
|
event: ({ row }) => rowView(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;
|
||||||
|
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();
|
||||||
|
|
||||||
|
// 页数
|
||||||
|
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 rowView = (row) => {
|
||||||
|
crudRef.value.rowView(row);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setCity = (row) => {
|
||||||
|
if (!isEmpty(row.cities)) {
|
||||||
|
row.provinceCode = row?.cities[0] ?? null;
|
||||||
|
row.cityCode = row?.cities[1] ?? null;
|
||||||
|
row.gridAreaCode = row?.cities[2] ?? null;
|
||||||
|
row.townCode = row?.cities[3] ?? null;
|
||||||
|
row.village = row?.cities[4] ?? null;
|
||||||
|
// row.village = row?.cities.join(',');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 新增
|
||||||
|
const rowSave = (row, done, loading) => {
|
||||||
|
setCity(row);
|
||||||
|
AddEntity(row)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('添加成功！');
|
||||||
|
done();
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
loading();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 编辑
|
||||||
|
const rowEdit = (row) => {
|
||||||
|
const village = !isEmpty(row.village) ? row.village : [];
|
||||||
|
row.cities = compact([row.provinceCode, row.cityCode, row.gridAreaCode ?? '', row.townCode ?? '', ...village]);
|
||||||
|
crudRef.value.rowEdit(row);
|
||||||
|
};
|
||||||
|
const rowUpdate = (row, index, done, loading) => {
|
||||||
|
setCity(row);
|
||||||
|
UpdateEntity(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(() => {
|
||||||
|
DeleteEntity({ id: row.id })
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
app.$message.success('删除成功！');
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error(err.msg);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const onExport = () => {
|
||||||
|
if (isEmpty(state.data)) {
|
||||||
|
app.$message.error('当前暂时没有可供导出的数据！');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state.loading = true;
|
||||||
|
const fileName = '网格明细表';
|
||||||
|
ExportEntity(state.query)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.status === 200) {
|
||||||
|
downloadFile(res.data, `${fileName}.xlsx`, 'blob');
|
||||||
|
app.$message.success('导出成功！');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
app.$message.error('导出失败！');
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
state.loading = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h1>网格化管理</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
// 组件逻辑可在此添加
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
h1 {
|
||||||
|
color: #2c3e50;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -31,6 +31,7 @@
|
|||||||
"hls.js": "^1.6.2",
|
"hls.js": "^1.6.2",
|
||||||
"js-base64": "^3.7.6",
|
"js-base64": "^3.7.6",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
|
"marked": "^15.0.12",
|
||||||
"moment": "^2.30.1",
|
"moment": "^2.30.1",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
*/
|
*/
|
||||||
import { createRouter, createWebHistory } from 'vue-router';
|
import { createRouter, createWebHistory } from 'vue-router';
|
||||||
import Layout from '@/layouts/index.vue';
|
import Layout from '@/layouts/index.vue';
|
||||||
|
import BrandLayout from '@/views/brand/index.vue';
|
||||||
import Views from '@/layouts/Views.vue';
|
import Views from '@/layouts/Views.vue';
|
||||||
import userCentre from '@/layouts/userCentre.vue';
|
import userCentre from '@/layouts/userCentre.vue';
|
||||||
|
|
||||||
@ -236,43 +237,38 @@ export const constantRoutes = [
|
|||||||
meta: { title: '公共品牌' },
|
meta: { title: '公共品牌' },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'apply',
|
path: '',
|
||||||
component: () => import('@/views/brand/index.vue'),
|
component: BrandLayout,
|
||||||
|
redirect: '/sub-operation-service/brand/apply',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: '',
|
path: 'apply',
|
||||||
component: () => import('@/views/brand/components/ApplyList.vue'),
|
|
||||||
name: 'brandApplyList',
|
name: 'brandApplyList',
|
||||||
|
component: () => import('@/views/brand/components/ApplyList.vue'),
|
||||||
meta: { title: '使用申请' },
|
meta: { title: '使用申请' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: ':id',
|
path: 'apply/:id',
|
||||||
component: () => import('@/views/brand/components/ApplyDetail.vue'),
|
|
||||||
name: 'brandApplyDetail',
|
name: 'brandApplyDetail',
|
||||||
|
component: () => import('@/views/brand/components/ApplyDetail.vue'),
|
||||||
meta: { title: '产品申请' },
|
meta: { title: '产品申请' },
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'auth',
|
path: 'auth/record',
|
||||||
component: () => import('@/views/brand/index.vue'),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
component: () => import('@/views/brand/components/Auth.vue'),
|
|
||||||
name: 'brandAuth',
|
name: 'brandAuth',
|
||||||
meta: { title: '授权管理' },
|
component: () => import('@/views/brand/components/Auth.vue'),
|
||||||
|
meta: { title: '授权记录' },
|
||||||
},
|
},
|
||||||
],
|
{
|
||||||
|
path: 'auth/system',
|
||||||
|
name: 'brandSystem',
|
||||||
|
component: () => import('@/views/brand/components/BrandSystem.vue'),
|
||||||
|
meta: { title: '品牌制度' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'monitor',
|
path: 'monitor',
|
||||||
component: () => import('@/views/brand/index.vue'),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: '',
|
|
||||||
component: () => import('@/views/brand/components/Monitor.vue'),
|
|
||||||
name: 'brandMonitor',
|
name: 'brandMonitor',
|
||||||
|
component: () => import('@/views/brand/components/Monitor.vue'),
|
||||||
meta: { title: '使用监管' },
|
meta: { title: '使用监管' },
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
@ -63,7 +63,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="product-action">
|
<div class="product-action">
|
||||||
<el-tag :class="statusClass(activeTab)" :type="statusTypeMap[product.status]">{{ product.statusLabel }}</el-tag>
|
<el-tag :class="statusClass(activeStatus)" :type="statusTypeMap[product.status]">{{ product.statusLabel }}</el-tag>
|
||||||
<el-button
|
<el-button
|
||||||
v-if="product.status === 'authorized'"
|
v-if="product.status === 'authorized'"
|
||||||
type="primary"
|
type="primary"
|
||||||
@ -204,7 +204,7 @@ const handleCertificate = (product) => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
.product-list {
|
.product-list {
|
||||||
height: 100%;
|
height: calc(100% - 40px);
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
504
sub-operation-service/src/views/brand/components/BrandSystem.vue
Normal file
504
sub-operation-service/src/views/brand/components/BrandSystem.vue
Normal file
@ -0,0 +1,504 @@
|
|||||||
|
<template>
|
||||||
|
<div class="brand-system">
|
||||||
|
<!-- 搜索与筛选 -->
|
||||||
|
<div class="system-header">
|
||||||
|
<el-input v-model="searchQuery" placeholder="搜索制度名称/编号" prefix-icon="el-icon-search" />
|
||||||
|
<el-select v-model="filterType" placeholder="分类筛选">
|
||||||
|
<el-option v-for="type in filterTypes" :key="type.value" :label="type.label" :value="type.value" />
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 制度列表 -->
|
||||||
|
<div class="system-list">
|
||||||
|
<div v-for="(item, index) in filteredList" :key="index" class="system-card" @click="showDetail(item)">
|
||||||
|
<div class="card-header">
|
||||||
|
<div class="card-title">
|
||||||
|
<i class="el-icon-document"></i>
|
||||||
|
{{ item.title }}
|
||||||
|
</div>
|
||||||
|
<div class="card-meta">
|
||||||
|
<span>编号：{{ item.code }}</span>
|
||||||
|
<span>版本：v{{ item.version }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>{{ item.desc }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
|
<span :class="`status-tag ${item.status === '生效中' ? 'active' : 'inactive'}`">{{ item.status }}</span>
|
||||||
|
<span>生效日期：{{ item.effectiveDate }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 浮层弹窗 -->
|
||||||
|
<transition name="fade">
|
||||||
|
<div v-if="showDialog" class="dialog-mask" @click.self="hideDetail">
|
||||||
|
<div class="dialog-container" :style="{ width: dialogWidth }">
|
||||||
|
<div class="dialog-header">
|
||||||
|
<div class="header-left">
|
||||||
|
<h3>{{ currentDetail.title }}</h3>
|
||||||
|
<div class="dialog-meta">
|
||||||
|
<span>编号：{{ currentDetail.code }}</span>
|
||||||
|
<span>版本：v{{ currentDetail.version }}</span>
|
||||||
|
<span :class="`status-tag ${currentDetail.status === '生效中' ? 'active' : 'inactive'}`">{{ currentDetail.status }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-actions">
|
||||||
|
<el-button icon="el-icon-download" @click.stop="downloadDoc(currentDetail)">下载</el-button>
|
||||||
|
<el-button icon="el-icon-printer" @click.stop="printDoc">打印</el-button>
|
||||||
|
<i class="el-icon-close" @click="hideDetail"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-content">
|
||||||
|
<!-- 使用Markdown-it渲染的HTML内容 -->
|
||||||
|
<div class="doc-preview" v-html="compiledMarkdown"></div>
|
||||||
|
</div>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<div class="footer-info">
|
||||||
|
<p>制定部门：{{ currentDetail.department }}</p>
|
||||||
|
<p>发布日期：{{ currentDetail.publishDate }}</p>
|
||||||
|
</div>
|
||||||
|
<el-button @click="hideDetail">关闭</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
import { ElMessage, ElButton } from 'element-plus';
|
||||||
|
|
||||||
|
// 筛选类型
|
||||||
|
const filterTypes = [
|
||||||
|
{ label: '全部', value: '' },
|
||||||
|
{ label: '管理规范', value: 'management' },
|
||||||
|
{ label: '推广制度', value: 'promotion' },
|
||||||
|
{ label: '评估体系', value: 'evaluation' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// 状态管理
|
||||||
|
const searchQuery = ref('');
|
||||||
|
const filterType = ref('');
|
||||||
|
const showDialog = ref(false);
|
||||||
|
const currentDetail = ref({});
|
||||||
|
const dialogWidth = ref('800px');
|
||||||
|
|
||||||
|
// 增强型数据集
|
||||||
|
const systemList = ref([
|
||||||
|
{
|
||||||
|
title: '品牌管理规范V2.0',
|
||||||
|
code: 'BRM-2023-001',
|
||||||
|
desc: '包含品牌标识、使用规范、VI应用等内容的最新版本',
|
||||||
|
content:
|
||||||
|
'# 品牌管理规范 V2.0\n\n## 第一章 总则\n第一条 本规范适用于集团所有子品牌管理...\n\n## 第二章 标识使用\n第五条 品牌标识不得在以下场景使用：\n1. 非官方宣传材料\n2. 竞品对比文档\n3. 未经审批的第三方平台\n\n## 第三章 数字资产\n第九条 数字资源库包含：\n- 官方LOGO矢量文件\n- 品牌色卡（CMYK/RGB/HEX）\n- 字体库授权文件\n\n## 第四章 附则\n第十二条 本规范自2023年9月1日起生效，原有版本自动废止。',
|
||||||
|
type: 'management',
|
||||||
|
file: 'BRM-2023-001.docx',
|
||||||
|
version: '2.0',
|
||||||
|
effectiveDate: '2023-09-01',
|
||||||
|
status: '生效中',
|
||||||
|
department: '品牌管理中心',
|
||||||
|
publishDate: '2023-08-25',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '品牌推广制度V1.3',
|
||||||
|
code: 'BRP-2023-005',
|
||||||
|
desc: '包含线上线下推广策略、预算分配及效果评估标准',
|
||||||
|
content:
|
||||||
|
'# 品牌推广制度 V1.3\n\n## 第一章 推广策略\n\n### 第五条 渠道配置\n- 数字媒体：占比40%\n- 户外广告：占比25%\n- 活动营销：占比20%\n- 公关传播：占比15%\n\n## 第二章 预算管理\n\n### 第十条 预算审批流程\n市场部提交方案 → 财务部审核 → 副总裁审批 → 执行备案\n\n## 第三章 效果评估\n\n### 第十六条 KPI指标\n| 指标 | 目标值 | 评估周期 |\n|-------|-------|---------|\n| 品牌认知度 | ≥75% | 季度 |\n| 媒体曝光量 | ≥500万次 | 月度 |\n| 转化率 | ≥3.5% | 月度 |',
|
||||||
|
type: 'promotion',
|
||||||
|
file: 'BRP-2023-005.docx',
|
||||||
|
version: '1.3',
|
||||||
|
effectiveDate: '2023-07-15',
|
||||||
|
status: '生效中',
|
||||||
|
department: '市场推广部',
|
||||||
|
publishDate: '2023-07-10',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '品牌评估体系V1.0',
|
||||||
|
code: 'BRA-2023-003',
|
||||||
|
desc: '基于市场反馈和财务数据的品牌价值评估方法与指标',
|
||||||
|
content:
|
||||||
|
'# 品牌评估体系 V1.0\n\n## 一、评估维度\n\n### 1.1 市场维度\n- 市场份额增长率\n- 客户满意度评分\n- 行业影响力指数\n\n### 1.2 财务维度\n- 品牌溢价率\n- ROI计算公式\n- 资产回报率\n\n## 二、评估周期\n\n| 级别 | 评估频率 |\n|------|---------|\n| 核心品牌 | 月度 |\n| 重点品牌 | 双月度 |\n| 新兴品牌 | 季度 |\n## 三、数据采集\n- CRM系统数据\n- 财务报表\n- 第三方调研报告',
|
||||||
|
type: 'evaluation',
|
||||||
|
file: 'BRA-2023-003.docx',
|
||||||
|
version: '1.0',
|
||||||
|
effectiveDate: '2023-06-01',
|
||||||
|
status: '生效中',
|
||||||
|
department: '战略发展部',
|
||||||
|
publishDate: '2023-05-28',
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 过滤列表
|
||||||
|
const filteredList = computed(() => {
|
||||||
|
return systemList.value.filter((item) => {
|
||||||
|
const matchSearch =
|
||||||
|
item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||||
|
item.desc.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||||||
|
item.code.toLowerCase().includes(searchQuery.value.toLowerCase());
|
||||||
|
const matchFilter = filterType.value ? item.type === filterType.value : true;
|
||||||
|
return matchSearch && matchFilter;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// 显示详情
|
||||||
|
const showDetail = (item) => {
|
||||||
|
currentDetail.value = item;
|
||||||
|
showDialog.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 隐藏详情
|
||||||
|
const hideDetail = () => {
|
||||||
|
showDialog.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 下载文档
|
||||||
|
const downloadDoc = (item) => {
|
||||||
|
ElMessage.success({
|
||||||
|
message: `开始下载 ${item.file} (${item.code})`,
|
||||||
|
duration: 1500,
|
||||||
|
});
|
||||||
|
// 实际开发中可替换为真实的下载逻辑
|
||||||
|
// window.open(`/api/download/${item.id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打印功能
|
||||||
|
const printDoc = () => {
|
||||||
|
ElMessage.info('准备打印文档...');
|
||||||
|
// 实际开发中可集成打印功能
|
||||||
|
// window.print();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 在setup函数中
|
||||||
|
|
||||||
|
// 恢复 marked 导入
|
||||||
|
import { marked } from 'marked';
|
||||||
|
|
||||||
|
// 恢复 computed 属性
|
||||||
|
const compiledMarkdown = computed(() => {
|
||||||
|
return marked.parse(currentDetail.value.content);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 在 setup 函数中配置 editor
|
||||||
|
const editorConfig = {
|
||||||
|
readOnly: true,
|
||||||
|
placeholder: '暂无内容',
|
||||||
|
showToolbar: false,
|
||||||
|
// 启用 Markdown 解析
|
||||||
|
parseMarkdown: true,
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$color-primary: #25bf82;
|
||||||
|
$color-bg: #f5f7fa;
|
||||||
|
$color-border: #e4e4e4;
|
||||||
|
$color-text: #333;
|
||||||
|
$color-meta: #666;
|
||||||
|
$color-success: #67c23a;
|
||||||
|
$color-danger: #ff4949;
|
||||||
|
|
||||||
|
.brand-system {
|
||||||
|
padding: 20px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-header {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
.el-input {
|
||||||
|
width: 240px;
|
||||||
|
.el-input__inner {
|
||||||
|
border-radius: 8px;
|
||||||
|
border-color: $color-border;
|
||||||
|
&:focus {
|
||||||
|
border-color: $color-primary;
|
||||||
|
box-shadow: 0 0 0 2px rgba(37, 191, 130, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-select {
|
||||||
|
width: 160px;
|
||||||
|
.el-input__inner {
|
||||||
|
border-radius: 8px;
|
||||||
|
border-color: $color-border;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||||
|
gap: 24px;
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid $color-border;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
|
||||||
|
overflow: hidden;
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.1);
|
||||||
|
.card-header {
|
||||||
|
background-color: lighten($color-primary, 40%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-header {
|
||||||
|
padding: 16px;
|
||||||
|
background-color: $color-bg;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $color-text;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
.el-icon-document {
|
||||||
|
margin-right: 8px;
|
||||||
|
color: $color-primary;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $color-meta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
padding: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $color-text;
|
||||||
|
line-height: 1.5;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-footer {
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-top: 1px solid $color-border;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
background-color: $color-bg;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $color-meta;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-tag {
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
&.active {
|
||||||
|
background-color: rgba(103, 194, 58, 0.1);
|
||||||
|
color: $color-success;
|
||||||
|
}
|
||||||
|
&.inactive {
|
||||||
|
background-color: rgba(255, 73, 73, 0.1);
|
||||||
|
color: $color-danger;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 弹窗样式
|
||||||
|
.fade-enter-active,
|
||||||
|
.fade-leave-active {
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.fade-enter,
|
||||||
|
.fade-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-mask {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-container {
|
||||||
|
background: white;
|
||||||
|
min-width: 500px;
|
||||||
|
max-width: 90vw;
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-header {
|
||||||
|
padding: 20px;
|
||||||
|
border-bottom: 1px solid $color-border;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
background-color: #f9fbfc;
|
||||||
|
.header-left {
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $color-text;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-meta {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $color-meta;
|
||||||
|
margin-top: 4px;
|
||||||
|
.status-tag {
|
||||||
|
padding: 3px 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
.el-button {
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($color-primary, 35%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-icon-close {
|
||||||
|
font-size: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 12px;
|
||||||
|
&:hover {
|
||||||
|
color: $color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-content {
|
||||||
|
padding: 20px;
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: hidden;
|
||||||
|
background-color: #f9fbfc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.doc-preview {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 1.5;
|
||||||
|
background: #ffffff;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid $color-border;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
font-family: 'Microsoft Yahei', SimSun, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #333;
|
||||||
|
height: calc(100vh - 300px);
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
/* 恢复 Markdown 元素样式 */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 1.5em;
|
||||||
|
margin: 0.5em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0.3em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
padding: 1em;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
background-color: #eee;
|
||||||
|
padding: 0.2em 0.4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
width: 100%;
|
||||||
|
margin: 1em 0;
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 0.5em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 新增 WangEditor 样式覆盖 */
|
||||||
|
.w-e-text-container {
|
||||||
|
background-color: #ffffff !important;
|
||||||
|
border-radius: 8px 8px 0 0;
|
||||||
|
padding: 20px;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-e-scroll {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-footer {
|
||||||
|
padding: 20px;
|
||||||
|
border-top: 1px solid $color-border;
|
||||||
|
background-color: #f9fbfc;
|
||||||
|
.footer-info {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
p {
|
||||||
|
margin: 4px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
color: $color-meta;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -26,12 +26,89 @@
|
|||||||
{{ tabLabels[activeTab] }}
|
{{ tabLabels[activeTab] }}
|
||||||
</div>
|
</div>
|
||||||
<div class="item-actions">
|
<div class="item-actions">
|
||||||
<el-button size="large" class="button" @click="onInspect(p)">抽查</el-button>
|
<el-button size="large" class="button" @click="onInspect(p.id)">抽查</el-button>
|
||||||
<el-button size="large" class="button" type="danger" @click="onRevoke(p)">取消授权</el-button>
|
<el-button size="large" class="button" type="danger" @click="onRevoke(p)">取消授权</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- 抽查弹窗 -->
|
||||||
|
<el-dialog v-model="dialogVisible" width="720px" top="20px" modal="false" :before-close="() => (dialogVisible = false)" title="追溯记录">
|
||||||
|
<div v-if="traceData" class="trace-record">
|
||||||
|
<!-- 基本信息 -->
|
||||||
|
<section class="section">
|
||||||
|
<h3>基本信息</h3>
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="6">产品名称：</el-col><el-col :span="18">{{ traceData.productName }}</el-col> <el-col :span="6">产品数量：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.quantity }}</el-col> <el-col :span="6">生产经营主体：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.producer }}</el-col> <el-col :span="6">原产地：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.origin }}</el-col> <el-col :span="6">生产日期：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.productionDate }}</el-col> <el-col :span="6">追溯码：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.traceCode }}</el-col> <el-col :span="6">追溯次数：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.traceCount }} 次</el-col>
|
||||||
|
</el-row>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 基地信息 -->
|
||||||
|
<section class="section">
|
||||||
|
<h3>基地信息</h3>
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="6">基地地址：</el-col><el-col :span="18">{{ traceData.base.address }}</el-col> <el-col :span="6">地理位置：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.base.location }}</el-col> <el-col :span="6">面积：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.base.area }} 亩</el-col> <el-col :span="6">气候条件：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.base.climate }}</el-col> <el-col :span="6">土壤类型：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.base.soil }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 农事信息 -->
|
||||||
|
<section class="section">
|
||||||
|
<h3>农事信息</h3>
|
||||||
|
<el-table :data="traceData.farmingRecords" stripe border style="width: 100%">
|
||||||
|
<el-table-column prop="date" label="日期" width="120" />
|
||||||
|
<el-table-column prop="operation" label="操作" />
|
||||||
|
<el-table-column prop="operator" label="作业人" width="120" />
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 包装信息 -->
|
||||||
|
<section class="section">
|
||||||
|
<h3>分拣包装</h3>
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="6">包装企业：</el-col><el-col :span="18">{{ traceData.packaging.company }}</el-col> <el-col :span="6">包装类型：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.packaging.type }}</el-col> <el-col :span="6">包装人：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.packaging.person }}</el-col> <el-col :span="6">包装时间：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.packaging.time }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 仓储物流 -->
|
||||||
|
<section class="section">
|
||||||
|
<h3>仓储物流信息</h3>
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="6">存储类型：</el-col><el-col :span="18">{{ traceData.logistics.storageType }}</el-col>
|
||||||
|
<el-col :span="6">存储温度：</el-col><el-col :span="18">{{ traceData.logistics.temperature }}</el-col>
|
||||||
|
<el-col :span="6">发货地址：</el-col><el-col :span="18">{{ traceData.logistics.shipFrom }}</el-col> <el-col :span="6">收货地址：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.logistics.shipTo }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 交易信息 -->
|
||||||
|
<section class="section">
|
||||||
|
<h3>交易信息</h3>
|
||||||
|
<el-row :gutter="12">
|
||||||
|
<el-col :span="6">交易时间：</el-col><el-col :span="18">{{ traceData.trade.time }}</el-col> <el-col :span="6">买家：</el-col
|
||||||
|
><el-col :span="18">{{ traceData.trade.buyer }}</el-col>
|
||||||
|
</el-row>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 右侧图片 -->
|
||||||
|
<div class="trace-img">
|
||||||
|
<img :src="getAssetsFile(traceData.img)" alt="产品图" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -41,6 +118,8 @@ import { getAssetsFile } from '@/utils/index.js';
|
|||||||
import { getMonitorList } from '@/apis/brand';
|
import { getMonitorList } from '@/apis/brand';
|
||||||
|
|
||||||
const activeTab = ref('onSale');
|
const activeTab = ref('onSale');
|
||||||
|
const dialogVisible = ref(false);
|
||||||
|
const traceData = ref(null);
|
||||||
|
|
||||||
const tabLabels = {
|
const tabLabels = {
|
||||||
onSale: '在售中',
|
onSale: '在售中',
|
||||||
@ -83,10 +162,52 @@ const products = ref([
|
|||||||
// 根据当前 Tab 过滤
|
// 根据当前 Tab 过滤
|
||||||
const filteredProducts = computed(() => products.value.filter((p) => p.status === activeTab.value));
|
const filteredProducts = computed(() => products.value.filter((p) => p.status === activeTab.value));
|
||||||
|
|
||||||
// 操作回调
|
// 点击抽查后，根据 id 单独拉取或赋值 traceData
|
||||||
const onInspect = (p) => {
|
function onInspect(id) {
|
||||||
console.log('抽查商品', p);
|
console.log('查看产品:', id);
|
||||||
|
// 这里用硬编码模拟请求，实际中可换成接口调用：getTraceById(id).then(res=> traceData.value = res)
|
||||||
|
const mock = {
|
||||||
|
productName: '无土栽培土豆',
|
||||||
|
quantity: '200KG',
|
||||||
|
producer: '北大荒技术有限公司',
|
||||||
|
origin: '耿马县孟定镇下坝村',
|
||||||
|
productionDate: '2025-1-2',
|
||||||
|
traceCode: '10.5487542154785XSE254.1040201',
|
||||||
|
traceCount: 30,
|
||||||
|
base: {
|
||||||
|
address: '耿马县孟定镇下坝村',
|
||||||
|
location: '东经102° · 北纬24°',
|
||||||
|
area: 12000,
|
||||||
|
climate: '亚热带高原季风型，温和多雨',
|
||||||
|
soil: '红壤',
|
||||||
|
},
|
||||||
|
farmingRecords: [
|
||||||
|
{ date: '2024/1/2', operation: '播种 20250102批土豆种', operator: '张小东' },
|
||||||
|
{ date: '2024/2/2', operation: '施肥 氮肥', operator: '张小东' },
|
||||||
|
{ date: '2024/3/2', operation: '浇水', operator: '张小东' },
|
||||||
|
{ date: '2024/4/2', operation: '采摘', operator: '张小东' },
|
||||||
|
],
|
||||||
|
packaging: {
|
||||||
|
company: '瑞禾农产品包装公司',
|
||||||
|
type: '纸箱',
|
||||||
|
person: '王大福',
|
||||||
|
time: '2025-1-2 14:00:47',
|
||||||
|
},
|
||||||
|
logistics: {
|
||||||
|
storageType: '冷藏',
|
||||||
|
temperature: '2°C',
|
||||||
|
shipFrom: '北京市朝阳区解放路24号',
|
||||||
|
shipTo: '上海市黄浦区南京路36号',
|
||||||
|
},
|
||||||
|
trade: {
|
||||||
|
time: '2025-1-2 14:00:47',
|
||||||
|
buyer: '刘小花',
|
||||||
|
},
|
||||||
|
img: 'images/brand/product6.png',
|
||||||
};
|
};
|
||||||
|
traceData.value = mock;
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
const onRevoke = (p) => {
|
const onRevoke = (p) => {
|
||||||
console.log('取消授权', p);
|
console.log('取消授权', p);
|
||||||
};
|
};
|
||||||
@ -191,5 +312,31 @@ const statusClass = (tab) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.trace-record {
|
||||||
|
position: relative;
|
||||||
|
padding-right: 160px; /* 给图片预留空间 */
|
||||||
|
}
|
||||||
|
.trace-record .section {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.trace-record h3 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #409eff;
|
||||||
|
border-left: 4px solid #409eff;
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
.trace-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: 16px;
|
||||||
|
width: 128px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.trace-img img {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,16 +3,20 @@
|
|||||||
<el-container class="brand-layout-container">
|
<el-container class="brand-layout-container">
|
||||||
<el-aside class="brand-aside-menu">
|
<el-aside class="brand-aside-menu">
|
||||||
<!-- 菜单部分 -->
|
<!-- 菜单部分 -->
|
||||||
<el-menu :default-active="activeMenu" class="aside-menu" @select="handleSelect">
|
<el-menu v-model:open="openMenus" :default-active="activeMenu" class="brand-aside-menu" @select="handleSelect">
|
||||||
<el-menu-item index="apply">
|
<el-menu-item index="apply">
|
||||||
<img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" />
|
<img :src="getAssetsFile('images/brand/Apply.png')" class="menu-icon" alt="申请图标" />
|
||||||
<span>使用申请</span>
|
<span>使用申请</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
|
||||||
<el-menu-item index="auth">
|
<el-sub-menu index="auth">
|
||||||
<img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" alt="" />
|
<template #title>
|
||||||
|
<img :src="getAssetsFile('images/brand/autho.png')" class="menu-icon" />
|
||||||
<span>授权管理</span>
|
<span>授权管理</span>
|
||||||
</el-menu-item>
|
</template>
|
||||||
|
<el-menu-item index="auth/record"> 授权记录 </el-menu-item>
|
||||||
|
<el-menu-item index="auth/system"> 品牌制度 </el-menu-item>
|
||||||
|
</el-sub-menu>
|
||||||
|
|
||||||
<el-menu-item index="monitor">
|
<el-menu-item index="monitor">
|
||||||
<img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" />
|
<img :src="getAssetsFile('images/brand/supervision.png')" class="menu-icon" alt="" />
|
||||||
@ -29,20 +33,27 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { useRoute, useRouter } from 'vue-router';
|
import { useRoute, useRouter } from 'vue-router';
|
||||||
import { getAssetsFile } from '@/utils/index.js';
|
import { getAssetsFile } from '@/utils/index.js';
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
|
||||||
// 激活菜单项
|
const openMenus = ref(['auth']);
|
||||||
|
|
||||||
|
const menuMap = {
|
||||||
|
apply: ['brandApplyList'],
|
||||||
|
'auth/record': ['brandAuth'],
|
||||||
|
'auth/system': ['brandSystem'],
|
||||||
|
monitor: ['brandMonitor'],
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取当前菜单激活项
|
||||||
const activeMenu = computed(() => {
|
const activeMenu = computed(() => {
|
||||||
const path = route.path;
|
const matched = Object.entries(menuMap).find(([key, names]) => names.includes(route.name));
|
||||||
if (path.includes('/apply')) return 'apply';
|
console.log(matched[0]);
|
||||||
if (path.includes('/auth')) return 'auth';
|
return matched ? matched[0] : '';
|
||||||
if (path.includes('/monitor')) return 'monitor';
|
|
||||||
return '';
|
|
||||||
});
|
});
|
||||||
// 菜单切换处理
|
// 菜单切换处理
|
||||||
function handleSelect(index) {
|
function handleSelect(index) {
|
||||||
@ -60,39 +71,40 @@ function handleSelect(index) {
|
|||||||
width: $width-main;
|
width: $width-main;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
.brand-aside-menu {
|
.brand-aside-menu {
|
||||||
width: 240px;
|
background-color: #fff;
|
||||||
background-color: $color-fff;
|
border-radius: 16px;
|
||||||
border-radius: 8px;
|
border-right: 0;
|
||||||
.aside-menu {
|
:deep(.el-menu-item),
|
||||||
border-right: none;
|
:deep(.el-sub-menu__title) {
|
||||||
.el-menu-item {
|
font-size: 18px !important;
|
||||||
height: 48px;
|
margin: 8px 12px;
|
||||||
line-height: 48px;
|
span {
|
||||||
margin: 4px 8px;
|
margin-left: 8px;
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
text-align: left;
|
|
||||||
&:hover {
|
|
||||||
background-color: #f5f7fa;
|
|
||||||
}
|
|
||||||
.el-icon {
|
|
||||||
color: #666;
|
|
||||||
margin-right: 12px;
|
|
||||||
font-size: 18px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
}
|
||||||
.menu-icon {
|
.menu-icon {
|
||||||
width: 1.5em;
|
width: 24px;
|
||||||
height: 1.5em;
|
height: 24px;
|
||||||
margin-right: 8px;
|
|
||||||
vertical-align: -0.15em;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-sub-menu) {
|
||||||
|
.el-menu-item {
|
||||||
|
font-size: 16px !important;
|
||||||
|
margin: 4px 12px;
|
||||||
|
line-height: 40px;
|
||||||
span {
|
span {
|
||||||
vertical-align: middle;
|
margin-left: 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.is-active) {
|
||||||
|
> .el-sub-menu__title,
|
||||||
|
&.el-menu-item {
|
||||||
|
color: #409eff !important;
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.brand-main {
|
.brand-main {
|
||||||
width: calc(100% - 240px - 16px);
|
width: calc(100% - 240px - 16px);
|
||||||
|
|||||||
@ -25,7 +25,7 @@ const leftMenu = reactive([
|
|||||||
{ name: 'agricultural', title: '农资交易', icon: 'menu2.png', path: '/sub-operation-service/ecommerce-agricultural' },
|
{ name: 'agricultural', title: '农资交易', icon: 'menu2.png', path: '/sub-operation-service/ecommerce-agricultural' },
|
||||||
{ name: 'supplier', title: '供应商服务', icon: 'menu1.png', path: '/sub-operation-service/ecommerce-supplier' },
|
{ name: 'supplier', title: '供应商服务', icon: 'menu1.png', path: '/sub-operation-service/ecommerce-supplier' },
|
||||||
{ name: 'purchaser', title: '采购商服务', icon: 'menu3.png', path: '/sub-operation-service/ecommerce-purchaser' },
|
{ name: 'purchaser', title: '采购商服务', icon: 'menu3.png', path: '/sub-operation-service/ecommerce-purchaser' },
|
||||||
{ name: 'land', title: '土地交易', icon: 'menu4.png', path: '/sub-operation-service/ecommerce-land' },
|
// { name: 'land', title: '土地交易', icon: 'menu4.png', path: '/sub-operation-service/ecommerce-land' },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
let currentIndex = ref(0);
|
let currentIndex = ref(0);
|
||||||
|
|||||||
@ -4188,6 +4188,11 @@ markdown-table@^1.1.0:
|
|||||||
resolved "https://registry.npmmirror.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
|
resolved "https://registry.npmmirror.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
|
||||||
integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
|
integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
|
||||||
|
|
||||||
|
marked@^15.0.12:
|
||||||
|
version "15.0.12"
|
||||||
|
resolved "https://registry.npmmirror.com/marked/-/marked-15.0.12.tgz#30722c7346e12d0a2d0207ab9b0c4f0102d86c4e"
|
||||||
|
integrity sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==
|
||||||
|
|
||||||
math-intrinsics@^1.1.0:
|
math-intrinsics@^1.1.0:
|
||||||
version "1.1.0"
|
version "1.1.0"
|
||||||
resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
|
resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user