feat
This commit is contained in:
parent
5c701d1306
commit
ff18ee7a89
BIN
src/assets/images/trace/all.png
Normal file
BIN
src/assets/images/trace/all.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/images/trace/batch.png
Normal file
BIN
src/assets/images/trace/batch.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/trace/bubbleA.png
Normal file
BIN
src/assets/images/trace/bubbleA.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/trace/bubbleB.png
Normal file
BIN
src/assets/images/trace/bubbleB.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/assets/images/trace/bubbleC.png
Normal file
BIN
src/assets/images/trace/bubbleC.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/trace/bubbleD.png
Normal file
BIN
src/assets/images/trace/bubbleD.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/images/trace/bubbleE.png
Normal file
BIN
src/assets/images/trace/bubbleE.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/trace/online.png
Normal file
BIN
src/assets/images/trace/online.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/trace/person.png
Normal file
BIN
src/assets/images/trace/person.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/trace/producer.png
Normal file
BIN
src/assets/images/trace/producer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
BIN
src/assets/images/trace/publicize.png
Normal file
BIN
src/assets/images/trace/publicize.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
265
src/views/trace/components/centerMap.vue
Normal file
265
src/views/trace/components/centerMap.vue
Normal file
@ -0,0 +1,265 @@
|
|||||||
|
<template>
|
||||||
|
<section ref="chartRef" class="_container"></section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { useEcharts } from '@/hooks/useEcharts';
|
||||||
|
|
||||||
|
onMounted(() => loadMapChart());
|
||||||
|
|
||||||
|
const chartRef = ref(null);
|
||||||
|
const { setOptions, getInstance, startAutoPlay } = useEcharts(chartRef);
|
||||||
|
const chinaGeoCoordMap = ref({
|
||||||
|
云南: [102.9199, 25.4663],
|
||||||
|
广东: [113.12244, 23.009505],
|
||||||
|
香港: [114.133834, 22.381374],
|
||||||
|
四川: [104.063707, 30.658753],
|
||||||
|
河北: [114.511072, 38.054693],
|
||||||
|
});
|
||||||
|
const chinaDatas = ref([
|
||||||
|
[{ name: '云南', value: 382 }],
|
||||||
|
[{ name: '广东', value: 62256 }],
|
||||||
|
[{ name: '香港', value: 9256 }],
|
||||||
|
[{ name: '四川', value: 1256 }],
|
||||||
|
[{ name: '河北', value: 382 }],
|
||||||
|
]);
|
||||||
|
function convertData(data) {
|
||||||
|
var res = [];
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
var dataItem = data[i];
|
||||||
|
var fromCoord = [102.9199, 25.4663];
|
||||||
|
var toCoord = chinaGeoCoordMap.value[dataItem[0].name];
|
||||||
|
if (fromCoord && toCoord) {
|
||||||
|
res.push([
|
||||||
|
{
|
||||||
|
coord: fromCoord,
|
||||||
|
value: dataItem[0].value,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
coord: toCoord,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
function getSeries() {
|
||||||
|
let list = [];
|
||||||
|
[['云南', chinaDatas.value]].forEach(function (item, i) {
|
||||||
|
list.push(
|
||||||
|
{
|
||||||
|
type: 'lines',
|
||||||
|
zlevel: 1,
|
||||||
|
effect: {
|
||||||
|
show: true,
|
||||||
|
period: 4, //箭头指向速度，值越小速度越快
|
||||||
|
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
|
||||||
|
symbol: 'arrow', //箭头图标
|
||||||
|
symbolSize: 5, //图标大小
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 1, //尾迹线条宽度
|
||||||
|
opacity: 1, //尾迹线条透明度
|
||||||
|
curveness: 0.3, //尾迹线条曲直度
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: convertData(item[1]),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'effectScatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
zlevel: 2,
|
||||||
|
rippleEffect: {
|
||||||
|
//涟漪特效
|
||||||
|
period: 4, //动画时间，值越小速度越快
|
||||||
|
brushType: 'stroke', //波纹绘制方式 stroke, fill
|
||||||
|
scale: 4, //波纹圆环最大限制，值越大波纹越大
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'right', //显示位置
|
||||||
|
offset: [5, 0], //偏移设置
|
||||||
|
formatter: function (params) {
|
||||||
|
//圆环显示文字
|
||||||
|
return params.data.name;
|
||||||
|
},
|
||||||
|
fontSize: 10,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: function (val) {
|
||||||
|
return 3 + (val[2] / 2000) * 1; //圆环大小
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
show: false,
|
||||||
|
color: '#FFA54F',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: item[1].map(function (dataItem) {
|
||||||
|
return {
|
||||||
|
name: dataItem[0].name,
|
||||||
|
value: chinaGeoCoordMap.value[dataItem[0].name].concat([dataItem[0].value]),
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
//被攻击点
|
||||||
|
{
|
||||||
|
type: 'scatter',
|
||||||
|
coordinateSystem: 'geo',
|
||||||
|
zlevel: 2,
|
||||||
|
rippleEffect: {
|
||||||
|
period: 4,
|
||||||
|
brushType: 'stroke',
|
||||||
|
scale: 4,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
//offset:[5, 0],
|
||||||
|
color: '#0f0',
|
||||||
|
formatter: '{b}',
|
||||||
|
textStyle: {
|
||||||
|
color: '#0f0',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
show: true,
|
||||||
|
color: '#FFA54F',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
symbol: 'pin',
|
||||||
|
symbolSize: 50,
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: item[0],
|
||||||
|
value: chinaGeoCoordMap.value[item[0]].concat([]),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
return list;
|
||||||
|
}
|
||||||
|
async function loadMapChart() {
|
||||||
|
var option = {
|
||||||
|
title: {
|
||||||
|
text: '地图统计图表',
|
||||||
|
subtext: '',
|
||||||
|
x: 'center',
|
||||||
|
y: 'top',
|
||||||
|
textStyle: {
|
||||||
|
color: '#2b7',
|
||||||
|
fontSize: 20,
|
||||||
|
fontWeight: 'bold',
|
||||||
|
},
|
||||||
|
subtextStyle: {
|
||||||
|
color: '#C0C4CC',
|
||||||
|
fontSize: '15',
|
||||||
|
height: '40',
|
||||||
|
lineHeight: '40',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
backgroundColor: 'rgba(166, 200, 76, 0.82)',
|
||||||
|
borderColor: '#FFFFCC',
|
||||||
|
showDelay: 0,
|
||||||
|
hideDelay: 0,
|
||||||
|
enterable: true,
|
||||||
|
transitionDuration: 0,
|
||||||
|
extraCssText: 'z-index:100',
|
||||||
|
formatter: function (params, ticket, callback) {
|
||||||
|
console.log('params', params);
|
||||||
|
let val = 0;
|
||||||
|
if (typeof params.value == 'number') {
|
||||||
|
val = params.value;
|
||||||
|
} else {
|
||||||
|
val = params.value[params.value.length - 1];
|
||||||
|
}
|
||||||
|
//根据业务自己拓展要显示的内容
|
||||||
|
var res = '';
|
||||||
|
var name = params.name;
|
||||||
|
|
||||||
|
res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + val;
|
||||||
|
return res;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
visualMap: {
|
||||||
|
//图例值控制
|
||||||
|
min: 1,
|
||||||
|
max: 500,
|
||||||
|
calculable: true,
|
||||||
|
show: true,
|
||||||
|
color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
geo: {
|
||||||
|
map: 'china',
|
||||||
|
zoom: 1.2,
|
||||||
|
top: 250,
|
||||||
|
label: {
|
||||||
|
emphasis: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
roam: true, //是否允许缩放
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#243c48', //地图背景色
|
||||||
|
borderColor: '#005A5C', //省市边界线00fcff 516a89
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
color: 'rgba(37, 43, 61, .5)', //悬浮背景
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: getSeries(),
|
||||||
|
};
|
||||||
|
// const { rows } = await selectRecord(this.baseId);
|
||||||
|
// //数据
|
||||||
|
// // option.series[0].data = rows.map((item) => ({
|
||||||
|
// // name: item.queryCity,
|
||||||
|
// // value: [item.queryCoordinate.split(',')[0], item.queryCoordinate.split(',')[1], item.queryCount],
|
||||||
|
// // }));
|
||||||
|
// //查询次数
|
||||||
|
// let i = 956;
|
||||||
|
// rows.forEach((item) => {
|
||||||
|
// i += item.queryCount;
|
||||||
|
// });
|
||||||
|
// option.title.subtext = `我们的产品走过了${rows.length}个城市，被客户查询了${i}次`;
|
||||||
|
option.title.subtext = `我们的产品走过了18个城市，被客户查询了73812次`;
|
||||||
|
// this.$echarts.registerMap('china', { geoJSON: chinaMap });
|
||||||
|
// myChart.on('click', (params) => {
|
||||||
|
// if (params.name.includes('广东')) {
|
||||||
|
// this.$emit('dataType', '2');
|
||||||
|
// } else if (params.name.includes('香港')) {
|
||||||
|
// this.$emit('dataType', '1');
|
||||||
|
// } else {
|
||||||
|
// this.$emit('dataType', '0');
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
console.log('option', option);
|
||||||
|
setOptions(option);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
._container {
|
||||||
|
padding: 40px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
27252
src/views/trace/components/china.json
Normal file
27252
src/views/trace/components/china.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,326 +1,122 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="code-num-charts">
|
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||||
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg1.png') + ')' }">
|
|
||||||
<template v-for="(n, index) in valData" :key="index">
|
|
||||||
<div class="num-txt-warp">
|
|
||||||
<div class="num-txt">
|
|
||||||
<div class="val">{{ n.value }}</div>
|
|
||||||
<div class="label">{{ n.name }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="code-pie">
|
|
||||||
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { reactive, watch } from 'vue';
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
import { isEmpty } from '@/utils';
|
||||||
let valData = reactive([
|
|
||||||
{ value: 205.6, name: '生产溯源码' },
|
const props = defineProps({
|
||||||
{ value: 308.7, name: '有效溯源码' },
|
data: {
|
||||||
]);
|
type: Array,
|
||||||
const chartsData = reactive({
|
default: () => [],
|
||||||
option: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
title: {
|
|
||||||
zlevel: 0,
|
|
||||||
text: 806,
|
|
||||||
subtext: '设备管理',
|
|
||||||
top: '38%',
|
|
||||||
left: '80%',
|
|
||||||
textAlign: 'center',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
subtextStyle: {
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
color: [
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: 'rgba(40, 218, 239, 1)' },
|
|
||||||
{ offset: 1, color: 'rgba(130, 249, 255, 0.8)' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 1,
|
|
||||||
y2: 0,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: 'rgba(198, 201, 24, 1)' },
|
|
||||||
{ offset: 1, color: 'rgba(198, 201, 24, 0.8)' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 1,
|
|
||||||
y: 1,
|
|
||||||
x2: 0,
|
|
||||||
y2: 0,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(15, 44, 88, 1)', // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 0.7,
|
|
||||||
color: 'rgba(40, 55, 255, 1)', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(244, 245, 255, 1)', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 1,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(75, 238, 114, 0.2)', // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(75, 238, 114, 1)', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(255, 19, 0, 0.2)', // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(251, 95, 79, 1)', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
valData: [
|
});
|
||||||
{
|
|
||||||
type: 'pie',
|
const state = reactive({
|
||||||
name: '外层细圆环',
|
data: [],
|
||||||
radius: ['58%', '60%'],
|
option: {
|
||||||
center: ['80%', '50%'],
|
grid: {
|
||||||
hoverAnimation: true,
|
left: '5%',
|
||||||
startAngle: 0,
|
right: '5%',
|
||||||
clockWise: false,
|
bottom: '5%',
|
||||||
|
top: '10%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(18, 55, 85, 0.8);',
|
||||||
|
borderColor: '#35d0c0',
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barStyle: {
|
||||||
|
barWidth: 14,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
borderWidth: 14,
|
||||||
color: 'rgba(40, 218, 239, 0.8)',
|
borderRadius: [8, 8, 8, 8], // 设置柱子的圆角半径
|
||||||
},
|
|
||||||
},
|
},
|
||||||
label: {
|
color: {
|
||||||
show: false,
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: '#35D0C0' },
|
||||||
|
{ offset: 1, color: '#35D0C0' },
|
||||||
|
],
|
||||||
|
global: false,
|
||||||
},
|
},
|
||||||
data: [10],
|
|
||||||
},
|
},
|
||||||
{
|
xAxis: {
|
||||||
type: 'pie',
|
type: 'value',
|
||||||
name: '内层细圆环',
|
|
||||||
radius: ['38%', '40%'],
|
|
||||||
center: ['80%', '50%'],
|
|
||||||
hoverAnimation: true,
|
|
||||||
startAngle: 0,
|
|
||||||
clockWise: false,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(40, 218, 239, 0.5)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
data: [10],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
|
||||||
startAngle: 0,
|
|
||||||
radius: 70,
|
|
||||||
clockWise: false,
|
|
||||||
hoverAnimation: false,
|
|
||||||
center: ['80%', '50%'],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: 'radial',
|
|
||||||
x: 0.5,
|
|
||||||
y: 0.5,
|
|
||||||
r: 0.5,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 1, color: 'rgba(129, 197, 200, 0.1)' },
|
|
||||||
{ offset: 0, color: 'rgba(129, 197, 200, 0)' },
|
|
||||||
],
|
|
||||||
globalCoord: false,
|
|
||||||
},
|
|
||||||
shadowBlur: 10,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
//环形
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
|
||||||
clockwise: false,
|
|
||||||
startAngle: -90,
|
|
||||||
radius: ['45%', '55%'],
|
|
||||||
center: ['80%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
zlevel: 1,
|
|
||||||
labelLine: {
|
|
||||||
normal: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: valData,
|
|
||||||
},
|
|
||||||
//环形分割线
|
|
||||||
{
|
|
||||||
name: '分割线',
|
|
||||||
type: 'gauge',
|
|
||||||
radius: '75%',
|
|
||||||
center: ['80%', '50%'],
|
|
||||||
clockwise: true,
|
|
||||||
startAngle: 90, // 起始角度
|
|
||||||
endAngle: -360, // 结束角度
|
|
||||||
splitNumber: 50, // 分割线数量
|
|
||||||
zlevel: 2,
|
|
||||||
detail: {
|
|
||||||
offsetCenter: [10, 20],
|
|
||||||
formatter: ' ',
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false, // 隐藏轴线
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false, // 隐藏刻度
|
|
||||||
},
|
|
||||||
splitLine: {
|
splitLine: {
|
||||||
show: true,
|
show: false,
|
||||||
length: 10, // 分割线的长度
|
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#1e4960',
|
type: 'dashed',
|
||||||
width: 1, // 分割线的宽度
|
color: '#E5E5E5',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: false, // 隐藏标签
|
show: false,
|
||||||
|
textStyle: {
|
||||||
|
color: '#424242',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
show: false,
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: ['茶叶', '核桃', '甘蔗', '烟叶', '其他'],
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: 'bar',
|
||||||
|
// barWidth: '40%', // 设置柱的宽度
|
||||||
|
// barMinHeight: 2, // 设置柱的最小高度
|
||||||
|
// barGap: '20%', // 设置柱之间的间隙
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
onMounted(() => {
|
watch(
|
||||||
if (chartsData.valData && chartsData.valData.length) {
|
() => props.data,
|
||||||
chartsData.valData.forEach((m, index) => {
|
(val) => {
|
||||||
let num = 100;
|
if (!isEmpty(val)) {
|
||||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
state.data = val;
|
||||||
});
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
}
|
}
|
||||||
});
|
);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
div {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.code-num-charts {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
.code-num-txt {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
width: 80%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: left center;
|
|
||||||
height: 90%;
|
|
||||||
.num-txt-warp {
|
|
||||||
width: 100%;
|
|
||||||
height: calc((100% - 4px) / 2);
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.num-txt {
|
|
||||||
width: 72%;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 16px;
|
|
||||||
line-height: 50px;
|
|
||||||
.val,
|
|
||||||
.label {
|
|
||||||
vertical-align: middle;
|
|
||||||
display: inline-flex;
|
|
||||||
}
|
|
||||||
.val {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
background: linear-gradient(360deg, #34c7d1, #fff); /* 渐变颜色 */
|
|
||||||
-webkit-background-clip: text; /* 裁剪背景为文字形状 */
|
|
||||||
background-clip: text;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
-webkit-text-fill-color: transparent; /* 设置文字颜色为透明 */
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-flex;
|
|
||||||
transform: skewX(-8deg);
|
|
||||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: -2px 0 0 1px #add8f1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.code-pie {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,58 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="demo detection-roll-list" style="height: 90%">
|
<div class="demo productPrices" style="height: 90%">
|
||||||
<div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
|
<div class="box">
|
||||||
<template v-for="(h, indexh) in listKeys" :key="indexh">
|
<div class="label">
|
||||||
<div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
|
<div>产品名称</div>
|
||||||
</template>
|
<div>产品批次号</div>
|
||||||
</div>
|
<div>产品规格</div>
|
||||||
<vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list">
|
<div>产品类型</div>
|
||||||
<div v-for="(item, index) in list" :key="index" class="list-item">
|
|
||||||
<div class="list-item-content">
|
|
||||||
<div class="list-item-boday item-warp" :style="{ flex: listKeys.length }">
|
|
||||||
<template v-for="(b, indexb) in listKeys" :key="indexb">
|
|
||||||
<div class="item-td" :class="{ 'zebra-b': (index + 1) % 2 == 0 }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
|
|
||||||
<span v-if="b != 'status'">
|
|
||||||
{{ item[b] }}
|
|
||||||
</span>
|
|
||||||
<span v-else :class="item[b] == 0 ? 'status-no' : 'status-y'">
|
|
||||||
{{ item[b] == 0 ? '不合格' : '合格' }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</vue3ScrollSeamless>
|
<vue3ScrollSeamless class="list" :class-options="classOptions" :data-list="list">
|
||||||
|
<ul class="case-info">
|
||||||
|
<li v-for="(item, index) in list" :key="index">
|
||||||
|
<div>{{ item.productName }}</div>
|
||||||
|
<div>{{ item.productCode }}</div>
|
||||||
|
<div>{{ item.specs }}</div>
|
||||||
|
<div>{{ item.productType }}</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</vue3ScrollSeamless>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- </div> -->
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
||||||
|
import testData from './list.json';
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
// items: {
|
// items: {
|
||||||
// type: Array,
|
// type: Array,
|
||||||
// default: () => [],
|
// default: () => [],
|
||||||
// },
|
// },
|
||||||
});
|
});
|
||||||
|
onMounted(() => {
|
||||||
let list = reactive([
|
list.value = testData.data;
|
||||||
{ title: '红星农业合作社', agency: '耿马农残检测中心', time: '2025.01.02', status: 1, info: '经销商资质不合格' },
|
|
||||||
{ title: '成大食品加工厂', agency: '耿马农残检测中心', time: '2025.01.01', status: 1, info: '农药成分不合格' },
|
|
||||||
{ title: '大大食品加工厂', agency: '耿马食品检测中心', time: '2025.01.02', status: 0, info: '经销商资质不合格' },
|
|
||||||
{ title: '佳成农业合作社', agency: '耿马农残检测中心', time: '2025.01.01', status: 1, info: '成分不合格' },
|
|
||||||
{ title: '嘉庆食品加工厂', agency: '耿马食品检测中心', time: '2025.01.02', status: 1, info: '经销商资质不合格' },
|
|
||||||
{ title: '汇星农业合作社', agency: '耿马农残检测中心', time: '2025.01.01', status: 1, info: '经销商资质不完全' },
|
|
||||||
{ title: '瑞达农业合作社', agency: '耿马农残检测中心', time: '2025.01.02', status: 1, info: '种源质量不好' },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const listKeys = reactive(['title', 'agency', 'status']);
|
|
||||||
const listKeysHeader = reactive({
|
|
||||||
title: '送检单位',
|
|
||||||
agency: '检测单位',
|
|
||||||
status: '检测结果',
|
|
||||||
});
|
});
|
||||||
|
let list = ref([]);
|
||||||
|
|
||||||
const classOptions = {
|
const classOptions = {
|
||||||
singleHeight: 48,
|
singleHeight: 48,
|
||||||
@ -60,69 +42,54 @@ const classOptions = {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.detection-roll-list {
|
.productPrices {
|
||||||
margin-top: 8px;
|
.box {
|
||||||
.scroll-wrap {
|
height: 100%;
|
||||||
height: 80%;
|
.label {
|
||||||
width: 100%;
|
display: grid;
|
||||||
margin: 4px auto;
|
grid-template-columns: 25% 40% 18% 17%;
|
||||||
overflow: hidden;
|
background-color: rgba(53, 208, 192, 0.3);
|
||||||
}
|
color: #c5d0d4;
|
||||||
.list-item-header {
|
height: 30px;
|
||||||
background: #144482;
|
line-height: 30px;
|
||||||
font-size: 10px;
|
border-radius: 4px;
|
||||||
width: 100%;
|
padding-left: 20px;
|
||||||
.item-td {
|
box-sizing: border-box;
|
||||||
padding: 8px 6px;
|
div {
|
||||||
}
|
overflow: hidden;
|
||||||
}
|
white-space: nowrap;
|
||||||
.list-item-boday {
|
text-overflow: ellipsis;
|
||||||
background: transparent;
|
&:nth-of-type(1) {
|
||||||
width: 100%;
|
flex: 1.5;
|
||||||
.item-td {
|
}
|
||||||
padding: 6px 6px;
|
|
||||||
&.td-title {
|
|
||||||
color: #6beff9 !important;
|
|
||||||
}
|
}
|
||||||
&.zebra-b {
|
}
|
||||||
background: #051225 !important;
|
.list {
|
||||||
|
height: calc(100% - 30px);
|
||||||
|
overflow: hidden;
|
||||||
|
.case-info {
|
||||||
|
color: #fff;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
li {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 25% 40% 18% 17%;
|
||||||
|
height: 34px;
|
||||||
|
line-height: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
div {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #35d0c0;
|
||||||
|
// pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.item-warp {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
.item-td {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.status-no {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
.status-y {
|
|
||||||
color: #6beff9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.list-item {
|
|
||||||
// border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
|
|
||||||
line-height: 18px;
|
|
||||||
|
|
||||||
.list-item-content {
|
|
||||||
display: inline-flex;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.demo {
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: center;
|
|
||||||
// margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
575
src/views/trace/components/list.json
Normal file
575
src/views/trace/components/list.json
Normal file
@ -0,0 +1,575 @@
|
|||||||
|
{
|
||||||
|
"data": [
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787341458",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787341458",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "老灶坊食品加工厂",
|
||||||
|
"shop": "深圳市吉祥干果店",
|
||||||
|
"productTime": "2025年03月23日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-27 23:59.04"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-28 08:30.28"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-28 13:23.54"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达深圳市",
|
||||||
|
"time": "2025-03-29 14:30.40"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-30 13:35.54"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787348741",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787348741",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "九鼎香食品有限公司",
|
||||||
|
"shop": "秦岭核香店",
|
||||||
|
"productTime": "2025年02月18日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-18 22:39.24"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-19 05:37.18"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-19 23:58.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-20 11:38.40"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-22 09:28.45"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787349847",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787349847",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "绿源智造食品加工厂",
|
||||||
|
"shop": "晋南核味店",
|
||||||
|
"productTime": "2025年01月20日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-01-23 06:39.35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-01-23 23:50.34"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-01-24 21:58.40"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达香港市",
|
||||||
|
"time": "2025-01-25 11:35.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-01-26 10:28.50"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787346574",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787346574",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "绿源智造食品加工厂",
|
||||||
|
"shop": "福核斋店",
|
||||||
|
"productTime": "2025年01月13日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-01-14 06:50.35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-01-14 23:45.50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-01-15 21:58.40"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达东莞市",
|
||||||
|
"time": "2025-01-16 11:50.44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-01-17 08:29.55"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787341478",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787341478",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "一口鲜食品加工厂",
|
||||||
|
"shop": "核养坊",
|
||||||
|
"productTime": "2025年01月04日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-01-05 07:30.55"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-01-05 22:45.58"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-01-06 22:55.43"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达深圳市",
|
||||||
|
"time": "2025-01-07 11:55.44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-01-09 13:29.43"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "红茶",
|
||||||
|
"productCode": "10062787346524",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "红茶",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "红茶",
|
||||||
|
"productCode": "10062787346524",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "红茶",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月04日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-06 09:30.54"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-06 18:47.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-07 04:54.50"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达香港市",
|
||||||
|
"time": "2025-03-07 23:55.44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-10 12:21.45"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "白茶",
|
||||||
|
"productCode": "10062787343574",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "白茶",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "白茶",
|
||||||
|
"productCode": "10062787343574",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "白茶",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "乌龙茶",
|
||||||
|
"productCode": "10062787348745",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "乌龙茶",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "乌龙茶",
|
||||||
|
"productCode": "10062787348745",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "乌龙茶",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "黄茶",
|
||||||
|
"productCode": "10062787343254",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "黄茶",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "黄茶",
|
||||||
|
"productCode": "10062787343254",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "黄茶",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787346958",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787346958",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787346923",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787346923",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787343256",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787343256",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "白茶",
|
||||||
|
"productCode": "10062787347489",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "白茶",
|
||||||
|
"type": "1",
|
||||||
|
"info": {
|
||||||
|
"productName": "白茶",
|
||||||
|
"productCode": "10062787347489",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "白茶",
|
||||||
|
"manufacturer": "粤膳坊食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月21日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-22 05:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-22 21:43.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-23 04:15.20"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-23 22:55.05"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-25 07:23.46"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787347536",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "核桃",
|
||||||
|
"productCode": "10062787347536",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "核桃仁",
|
||||||
|
"manufacturer": "一口鲜食品加工厂",
|
||||||
|
"shop": "茗香居店",
|
||||||
|
"productTime": "2025年03月23日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-03-25 07:30.46"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-03-25 14:38.41"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-03-26 00:15.35"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-03-26 16:55.08"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-03-27 09:26.40"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"productName": "红茶",
|
||||||
|
"productCode": "10062787345641",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "红茶",
|
||||||
|
"type": "2",
|
||||||
|
"info": {
|
||||||
|
"productName": "红茶",
|
||||||
|
"productCode": "10062787345641",
|
||||||
|
"specs": "袋装",
|
||||||
|
"productType": "红茶",
|
||||||
|
"manufacturer": "九鼎香食品有限公司",
|
||||||
|
"shop": "云栖茶寮店",
|
||||||
|
"productTime": "2025年02月20日",
|
||||||
|
"route": [
|
||||||
|
{
|
||||||
|
"name": "出库",
|
||||||
|
"time": "2025-02-22 02:32.45"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达临沧市",
|
||||||
|
"time": "2025-02-22 10:43.47"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达昆明市",
|
||||||
|
"time": "2025-02-22 17:13.47"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "到达广州市",
|
||||||
|
"time": "2025-02-23 13:08.44"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "出售",
|
||||||
|
"time": "2025-02-25 07:03.41"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,341 +1,71 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main-part-charts">
|
<div class="_container">
|
||||||
<div class="code-num-txt" :style="{ 'background-image': 'url(' + getAssetsFile('images/trace/bg2.png') + ')' }">
|
<div v-for="(item, i) in valData" :key="`item_${i}`" class="_item">
|
||||||
<template v-for="(n, index) in valData" :key="index">
|
<img :src="item.bg" />
|
||||||
<div class="num-txt-warp">
|
<div class="_center">
|
||||||
<div class="num-txt">
|
<div class="_value">
|
||||||
<div class="label">
|
<span>{{ item.value }}</span>
|
||||||
<span class="label-val">{{ n.name }}</span>
|
{{ item.unit }}
|
||||||
</div>
|
|
||||||
<div class="val">
|
|
||||||
<span class="val-val">{{ n.value }}</span>
|
|
||||||
<span class="unit">{{ n.unit }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
<div class="_name">{{ item.name }}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="code-pie">
|
|
||||||
<custom-echart-pie-gauge :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref, reactive, onMounted } from 'vue';
|
||||||
import { isEmpty, getAssetsFile } from '@/utils';
|
import person from '@/assets/images/trace/person.png';
|
||||||
|
import all from '@/assets/images/trace/all.png';
|
||||||
|
import online from '@/assets/images/trace/online.png';
|
||||||
|
import producer from '@/assets/images/trace/producer.png';
|
||||||
|
import batch from '@/assets/images/trace/batch.png';
|
||||||
|
import publicize from '@/assets/images/trace/publicize.png';
|
||||||
let valData = reactive([
|
let valData = reactive([
|
||||||
{ value: 356, name: '追溯主体', unit: '家' },
|
{ value: 356, name: '扫码统计', unit: '次', bg: all },
|
||||||
{ value: 25, name: '检测机构', unit: '家' },
|
{ value: 86, name: '溯源产品', unit: '种', bg: producer },
|
||||||
{ value: 199, name: '生成溯源码', unit: '次' },
|
{ value: 90, name: '溯源产品', unit: '个', bg: batch },
|
||||||
|
{ value: 136, name: '宣传门店', unit: '家', bg: publicize },
|
||||||
|
{ value: 6, name: '线上门店', unit: '家', bg: online },
|
||||||
|
{ value: 63, name: '业务人员', unit: '人', bg: person },
|
||||||
]);
|
]);
|
||||||
const chartsData = reactive({
|
|
||||||
option: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
title: {
|
|
||||||
zlevel: 0,
|
|
||||||
text: 806,
|
|
||||||
subtext: '设备管理',
|
|
||||||
top: '38%',
|
|
||||||
left: '80%',
|
|
||||||
textAlign: 'center',
|
|
||||||
textStyle: {
|
|
||||||
color: '#fff',
|
|
||||||
fontSize: 14,
|
|
||||||
},
|
|
||||||
subtextStyle: {
|
|
||||||
fontSize: 10,
|
|
||||||
color: '#fff',
|
|
||||||
},
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
color: [
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: 'rgba(40, 218, 239, 1)' },
|
|
||||||
{ offset: 1, color: 'rgba(130, 249, 255, 0.8)' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 1,
|
|
||||||
y2: 0,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: 'rgba(198, 201, 24, 1)' },
|
|
||||||
{ offset: 1, color: 'rgba(198, 201, 24, 0.8)' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 1,
|
|
||||||
y: 1,
|
|
||||||
x2: 0,
|
|
||||||
y2: 0,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: 'rgba(83, 165, 23, 1)' },
|
|
||||||
{ offset: 1, color: 'rgba(83, 165, 23, 0.8)' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 1,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(75, 238, 114, 0.2)', // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(75, 238, 114, 1)', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{
|
|
||||||
offset: 0,
|
|
||||||
color: 'rgba(255, 19, 0, 0.2)', // 0% 处的颜色
|
|
||||||
},
|
|
||||||
{
|
|
||||||
offset: 1,
|
|
||||||
color: 'rgba(251, 95, 79, 1)', // 100% 处的颜色
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
valData: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
name: '外层细圆环',
|
|
||||||
radius: ['58%', '60%'],
|
|
||||||
center: ['20%', '50%'],
|
|
||||||
hoverAnimation: true,
|
|
||||||
startAngle: 0,
|
|
||||||
clockWise: false,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(40, 218, 239, 0.8)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
data: [10],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
name: '内层细圆环',
|
|
||||||
radius: ['38%', '40%'],
|
|
||||||
center: ['20%', '50%'],
|
|
||||||
hoverAnimation: true,
|
|
||||||
startAngle: 0,
|
|
||||||
clockWise: false,
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: 'rgba(40, 218, 239, 0.5)',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
data: [10],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
|
||||||
startAngle: 0,
|
|
||||||
radius: 70,
|
|
||||||
clockWise: false,
|
|
||||||
hoverAnimation: false,
|
|
||||||
center: ['20%', '50%'],
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
labelLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: 'radial',
|
|
||||||
x: 0.5,
|
|
||||||
y: 0.5,
|
|
||||||
r: 0.5,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 1, color: 'rgba(129, 197, 200, 0.1)' },
|
|
||||||
{ offset: 0, color: 'rgba(129, 197, 200, 0)' },
|
|
||||||
],
|
|
||||||
globalCoord: false,
|
|
||||||
},
|
|
||||||
shadowBlur: 10,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: [
|
|
||||||
{
|
|
||||||
value: 100,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
//环形
|
|
||||||
{
|
|
||||||
name: '',
|
|
||||||
type: 'pie',
|
|
||||||
clockwise: false,
|
|
||||||
startAngle: -90,
|
|
||||||
radius: ['45%', '55%'],
|
|
||||||
center: ['20%', '50%'],
|
|
||||||
hoverAnimation: false,
|
|
||||||
label: {
|
|
||||||
normal: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
emphasis: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
zlevel: 1,
|
|
||||||
labelLine: {
|
|
||||||
normal: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data: valData,
|
|
||||||
},
|
|
||||||
//环形分割线
|
|
||||||
{
|
|
||||||
name: '分割线',
|
|
||||||
type: 'gauge',
|
|
||||||
radius: '75%',
|
|
||||||
center: ['20%', '50%'],
|
|
||||||
clockwise: true,
|
|
||||||
startAngle: 90, // 起始角度
|
|
||||||
endAngle: -360, // 结束角度
|
|
||||||
splitNumber: 50, // 分割线数量
|
|
||||||
zlevel: 2,
|
|
||||||
detail: {
|
|
||||||
offsetCenter: [10, 20],
|
|
||||||
formatter: ' ',
|
|
||||||
},
|
|
||||||
axisLine: {
|
|
||||||
show: false, // 隐藏轴线
|
|
||||||
},
|
|
||||||
axisTick: {
|
|
||||||
show: false, // 隐藏刻度
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true,
|
|
||||||
length: 10, // 分割线的长度
|
|
||||||
lineStyle: {
|
|
||||||
color: '#1e4960',
|
|
||||||
width: 1, // 分割线的宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
axisLabel: {
|
|
||||||
show: false, // 隐藏标签
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {});
|
||||||
if (chartsData.valData && chartsData.valData.length) {
|
|
||||||
chartsData.valData.forEach((m, index) => {
|
|
||||||
let num = 100;
|
|
||||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
div {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.main-part-charts {
|
._container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
._item {
|
||||||
position: relative;
|
display: flex;
|
||||||
.code-num-txt {
|
align-items: center;
|
||||||
position: absolute;
|
width: 45%;
|
||||||
right: 0;
|
height: calc((100% / 3) - 16px);
|
||||||
top: 50%;
|
color: #fff;
|
||||||
width: 60%;
|
&:nth-child(2n + 2) {
|
||||||
transform: translateY(-50%);
|
justify-content: flex-end;
|
||||||
height: 90%;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: left center;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4;
|
|
||||||
.num-txt-warp {
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 18%;
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
height: calc((100% - 8px) / 3);
|
|
||||||
}
|
}
|
||||||
.num-txt {
|
._value {
|
||||||
width: 72%;
|
> span {
|
||||||
display: inline-flex;
|
font-size: 24px;
|
||||||
|
}
|
||||||
justify-content: space-between;
|
}
|
||||||
padding: 0 16px;
|
img {
|
||||||
.val,
|
margin-right: 24px;
|
||||||
.label {
|
height: 100%;
|
||||||
vertical-align: middle;
|
aspect-ratio: 1 / 1;
|
||||||
display: inline-flex;
|
}
|
||||||
}
|
._center {
|
||||||
.val {
|
._name {
|
||||||
.val-val {
|
font-size: 16px;
|
||||||
font-size: 18px;
|
font-weight: normal;
|
||||||
font-weight: bold;
|
color: rgba(255, 255, 255, 0.6);
|
||||||
display: inline-flex;
|
|
||||||
background: linear-gradient(360deg, #34c7d1, #fff); /* 渐变颜色 */
|
|
||||||
-webkit-background-clip: text; /* 裁剪背景为文字形状 */
|
|
||||||
background-clip: text;
|
|
||||||
letter-spacing: -1px;
|
|
||||||
-webkit-text-fill-color: transparent; /* 设置文字颜色为透明 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.label {
|
|
||||||
display: inline-flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
.label-val {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
display: inline-flex;
|
|
||||||
transform: skewX(-8deg);
|
|
||||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: -2px 0 0 1px #add8f1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.unit {
|
|
||||||
font-size: 8px;
|
|
||||||
color: #34c7d1;
|
|
||||||
padding: 6px 0 0 6px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.code-pie {
|
|
||||||
position: absolute;
|
|
||||||
right: left;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,72 +1,62 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="principal-type-charts">
|
<customEchartHyalineCake :chart-data="data" height="100%" :option="option" />
|
||||||
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
|
||||||
|
|
||||||
const chartsData = reactive({
|
<script lang="ts" setup>
|
||||||
option: {
|
import { reactive, ref } from 'vue';
|
||||||
color: ['#5cd2db', '#e4f116', '#6af116', '#2bb0ef'],
|
|
||||||
title: {
|
/* --------------- data --------------- */
|
||||||
text: ' ',
|
// #region
|
||||||
textStyle: {
|
const data = ref([
|
||||||
color: '#333',
|
{
|
||||||
},
|
name: '烟草',
|
||||||
},
|
value: 60.8,
|
||||||
legend: {
|
},
|
||||||
data: ['种源企业', '农企/合作社', '农资企业', '生产加工企业'],
|
{
|
||||||
right: '0', // 距离左侧10%的位置
|
name: '甘蔗',
|
||||||
top: 'middle', // 垂直居中
|
value: 44.4,
|
||||||
orient: 'vertical', // 图例垂直排列
|
},
|
||||||
itemWidth: 15, // 图例标记的宽度
|
{
|
||||||
itemHeight: 8, // 图例标记的高度
|
name: '核桃',
|
||||||
textStyle: {
|
value: 24.3,
|
||||||
fontSize: 10, // 图例文字的字体大小
|
},
|
||||||
color: '#fff', // 图例文字的颜色
|
{
|
||||||
},
|
name: '蔬菜',
|
||||||
},
|
value: 32.7,
|
||||||
label: {
|
},
|
||||||
color: '#333',
|
{
|
||||||
},
|
name: '其他',
|
||||||
series: [
|
value: 32.9,
|
||||||
{
|
},
|
||||||
type: 'pie',
|
]);
|
||||||
radius: ['50%', '65%'],
|
const option = reactive({
|
||||||
// roseType: 'area',
|
k: 0.3,
|
||||||
center: ['40%', '50%'],
|
opacity: 1,
|
||||||
label: {
|
itemGap: 0,
|
||||||
show: false,
|
autoItemHeight: 2,
|
||||||
},
|
grid3D: {
|
||||||
itemStyle: {
|
show: false,
|
||||||
borderRadius: 5,
|
boxHeight: 5,
|
||||||
},
|
top: '0',
|
||||||
// animationDuration: 15000,
|
left: '-20%',
|
||||||
// // 可选：设置动画缓动效果
|
viewControl: {
|
||||||
// animationEasing: 'elasticOut',
|
//3d效果可以放大、旋转等，请自己去查看官方配置
|
||||||
},
|
alpha: 30, //角度(这个很重要 调节角度的)
|
||||||
],
|
distance: 160, //调整视角到主体的距离，类似调整zoom(这是整体大小)
|
||||||
|
rotateSensitivity: 10, //设置旋转灵敏度，为0无法旋转
|
||||||
|
zoomSensitivity: 10, //设置缩放灵敏度，为0无法缩放
|
||||||
|
panSensitivity: 10, //设置平移灵敏度，0无法平移
|
||||||
|
autoRotate: true, //自动旋转
|
||||||
|
autoRotateAfterStill: 2, //在鼠标静止操作后恢复自动旋转的时间间隔,在开启 autoRotate 后有效
|
||||||
|
},
|
||||||
},
|
},
|
||||||
valData: [
|
|
||||||
{ value: 37, name: '种源企业' },
|
|
||||||
{ value: 135, name: '农企/合作社' },
|
|
||||||
{ value: 41, name: '农资企业' },
|
|
||||||
{ value: 141, name: '生产加工企业' },
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
|
// #endregion
|
||||||
|
|
||||||
onMounted(() => {
|
/* --------------- methods --------------- */
|
||||||
if (chartsData.valData && chartsData.valData.length) {
|
// #region
|
||||||
chartsData.valData.forEach((m, index) => {
|
|
||||||
let num = 100;
|
// #endregion
|
||||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.principal-type-charts {
|
<style lang="scss" scoped></style>
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,74 +1,97 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="product-type-charts">
|
<section class="_container">
|
||||||
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
<div class="_left">
|
||||||
</div>
|
<video src=""></video>
|
||||||
|
<div class="video_footer">核桃仁原材料</div>
|
||||||
|
</div>
|
||||||
|
<div class="_right">
|
||||||
|
<div>
|
||||||
|
<img src="../../../assets/images/trace/batch.png" />
|
||||||
|
<div>
|
||||||
|
<div class="_val">29<i>℃</i></div>
|
||||||
|
<div class="_label">温度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div>
|
||||||
|
<img src="../../../assets/images/trace/batch.png" />
|
||||||
|
<div>
|
||||||
|
<div class="_val">16<i>%</i></div>
|
||||||
|
<div class="_label">湿度</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const chartsData = reactive({
|
/* --------------- data --------------- */
|
||||||
option: {
|
// #region
|
||||||
color: ['#5cd2db', '#e4f116', '#6af116', '#2bb0ef', '#a56aef', '#efb56a'],
|
|
||||||
title: {
|
|
||||||
text: ' ',
|
|
||||||
textStyle: {
|
|
||||||
color: '#333',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
data: ['农副产品加工', '水果', '蔬菜', '水产', '禽畜肉蛋', '米面粮油'],
|
|
||||||
right: '0', // 距离左侧10%的位置
|
|
||||||
top: 'middle', // 垂直居中
|
|
||||||
orient: 'vertical', // 图例垂直排列
|
|
||||||
itemWidth: 10, // 图例标记的宽度
|
|
||||||
itemHeight: 8, // 图例标记的高度
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 10, // 图例文字的字体大小
|
|
||||||
color: '#fff', // 图例文字的颜色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
color: '#333',
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
type: 'pie',
|
|
||||||
radius: ['20%', '65%'],
|
|
||||||
roseType: 'area',
|
|
||||||
center: ['40%', '50%'],
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: 5,
|
|
||||||
},
|
|
||||||
// animationDuration: 15000,
|
|
||||||
// // 可选：设置动画缓动效果
|
|
||||||
// animationEasing: 'elasticOut',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
valData: [
|
|
||||||
{ value: 37, name: '农副产品加工' },
|
|
||||||
{ value: 135, name: '水果' },
|
|
||||||
{ value: 41, name: '蔬菜' },
|
|
||||||
{ value: 141, name: '水产' },
|
|
||||||
{ value: 41, name: '禽畜肉蛋' },
|
|
||||||
{ value: 141, name: '米面粮油' },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
// #endregion
|
||||||
if (chartsData.valData && chartsData.valData.length) {
|
|
||||||
chartsData.valData.forEach((m, index) => {
|
/* --------------- methods --------------- */
|
||||||
let num = 100;
|
// #region
|
||||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
|
||||||
});
|
// #endregion
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.product-type-charts {
|
._container {
|
||||||
|
padding: 12px 0;
|
||||||
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
gap: 50px;
|
||||||
|
grid-template-columns: 60% calc(40% - 50px);
|
||||||
|
._left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
video {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 60px);
|
||||||
|
border: 2px solid #01fefd;
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
.video_footer {
|
||||||
|
width: 64%;
|
||||||
|
height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 40px;
|
||||||
|
background: url('../../../assets/images/basic/tagBG.png') no-repeat center center / 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
._right {
|
||||||
|
padding: 24px 0;
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
color: #fff;
|
||||||
|
transform: scale(1.2);
|
||||||
|
img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
font-size: 16px;
|
||||||
|
i {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
._label {
|
||||||
|
color: rgba($color: #fff, $alpha: 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,131 +1,110 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="pathology-charts">
|
<section class="_container">
|
||||||
<custom-echart-mixin :chart-data="handelData" :option="chartsData.option" height="100%" />
|
<div v-for="(item, i) in list" :key="`item_${i}`" :class="['_item', `item_${i + 1}`]">
|
||||||
</div>
|
<div>{{ item.name }}</div>
|
||||||
|
<div class="_num">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted, computed } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
let itemStyle = reactive({
|
|
||||||
itemStyle: { borderRadius: [8, 8, 0, 0] },
|
|
||||||
});
|
|
||||||
|
|
||||||
let legendList = reactive(['溯源码']);
|
const list = ref([
|
||||||
const chartsData = reactive({
|
{
|
||||||
option: {
|
name: '珠海市',
|
||||||
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
value: '13万件',
|
||||||
title: {
|
|
||||||
text: ' ',
|
|
||||||
textStyle: {
|
|
||||||
color: '#333',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
show: true,
|
|
||||||
data: legendList,
|
|
||||||
left: '0', // 距离左侧10%的位置
|
|
||||||
top: '0', // 垂直居中
|
|
||||||
itemWidth: 15, // 图例标记的宽度
|
|
||||||
itemHeight: 8, // 图例标记的高度
|
|
||||||
textStyle: {
|
|
||||||
fontSize: 10, // 图例文字的字体大小
|
|
||||||
color: '#fff', // 图例文字的颜色
|
|
||||||
},
|
|
||||||
},
|
|
||||||
barStyle: {
|
|
||||||
barWidth: 10,
|
|
||||||
itemStyle: {
|
|
||||||
borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
type: 'linear', // 线性渐变
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
x2: 0,
|
|
||||||
y2: 1,
|
|
||||||
colorStops: [
|
|
||||||
{ offset: 0, color: '#45bfe9' },
|
|
||||||
{ offset: 1, color: '#01589c' },
|
|
||||||
],
|
|
||||||
global: false, // 默认为 false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
dataZoom: [
|
|
||||||
// {
|
|
||||||
// type: 'slider', // 滑动条型数据区域缩放组件
|
|
||||||
// startValue: 0, // 数据窗口起始值的索引
|
|
||||||
// endValue: 2, // 数据窗口结束值的索引
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// type: 'inside', // 支持鼠标滚轮和触控板缩放和平移
|
|
||||||
// startValue: 0,
|
|
||||||
// endValue: 2,
|
|
||||||
// },
|
|
||||||
],
|
|
||||||
yAxis: [
|
|
||||||
{
|
|
||||||
type: 'value',
|
|
||||||
name: ' ',
|
|
||||||
axisLabel: {
|
|
||||||
formatter: '{value}',
|
|
||||||
},
|
|
||||||
splitLine: {
|
|
||||||
show: true, // 显示分割线
|
|
||||||
lineStyle: {
|
|
||||||
type: 'dashed', // 设置为虚线
|
|
||||||
width: 0.5, // 分割线宽度
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
itemStyle: { fontSize: 8 },
|
|
||||||
},
|
|
||||||
],
|
|
||||||
grid: {
|
|
||||||
x: '10%',
|
|
||||||
x2: '10%',
|
|
||||||
y: '20%',
|
|
||||||
y2: '20%',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
valData: [],
|
{
|
||||||
});
|
name: '广州市',
|
||||||
|
value: '12万件',
|
||||||
const randomVal = (num) => {
|
},
|
||||||
let list = [];
|
{
|
||||||
for (let i = 0; i < legendList.length; i++) {
|
name: '深圳市',
|
||||||
let addNum = [10, 8, 2, 5];
|
value: '8万件',
|
||||||
let val = {
|
},
|
||||||
name: num + '月',
|
{
|
||||||
value: Number(Math.random() * 100 + addNum[i]).toFixed(2),
|
name: '香港',
|
||||||
seriesType: 'bar',
|
value: '8651件',
|
||||||
type: legendList[i],
|
},
|
||||||
};
|
{
|
||||||
let lastVal = {
|
name: '澳门市',
|
||||||
...val,
|
value: '7541件',
|
||||||
...itemStyle,
|
},
|
||||||
};
|
]);
|
||||||
list[i] = i < legendList.length - 1 ? val : lastVal;
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
};
|
|
||||||
let handelData = computed(() => {
|
|
||||||
let list = [];
|
|
||||||
let maxMouth = 12;
|
|
||||||
for (let i = 0; i < maxMouth; i++) {
|
|
||||||
let val = randomVal(i + 1);
|
|
||||||
list = [...list, ...val];
|
|
||||||
}
|
|
||||||
|
|
||||||
list.map((m, indexm) => {
|
|
||||||
return { ...m, value: Number(Number(m.value) + Math.random() + indexm).toFixed(0) };
|
|
||||||
});
|
|
||||||
// console.info('handelData', list);
|
|
||||||
return list;
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {});
|
onMounted(() => {});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.pathology-charts {
|
._container {
|
||||||
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
._item {
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 6px;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 16px;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
._num {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_1 {
|
||||||
|
right: 16%;
|
||||||
|
bottom: 0%;
|
||||||
|
width: 32%;
|
||||||
|
background-image: url('../../../assets/images/trace/bubbleA.png');
|
||||||
|
._num {
|
||||||
|
color: #75c9ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_2 {
|
||||||
|
left: 5%;
|
||||||
|
top: 5%;
|
||||||
|
width: 28%;
|
||||||
|
background-image: url('../../../assets/images/trace/bubbleB.png');
|
||||||
|
._num {
|
||||||
|
color: #01fefd;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_3 {
|
||||||
|
right: 0;
|
||||||
|
top: 5%;
|
||||||
|
width: 26%;
|
||||||
|
background-image: url('../../../assets/images/trace/bubbleC.png');
|
||||||
|
._num {
|
||||||
|
color: #fef906;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_4 {
|
||||||
|
top: 40px;
|
||||||
|
left: 36%;
|
||||||
|
width: 22%;
|
||||||
|
background-image: url('../../../assets/images/trace/bubbleD.png');
|
||||||
|
._num {
|
||||||
|
color: #02fd94;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item_5 {
|
||||||
|
left: 20%;
|
||||||
|
bottom: 0;
|
||||||
|
width: 20%;
|
||||||
|
background-image: url('../../../assets/images/trace/bubbleE.png');
|
||||||
|
._num {
|
||||||
|
color: #34f9b7;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -3,21 +3,21 @@
|
|||||||
<el-row style="width: 100%; height: 100%">
|
<el-row style="width: 100%; height: 100%">
|
||||||
<el-col :span="6" class="left-charts">
|
<el-col :span="6" class="left-charts">
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="溯源码数据统计" :top-postion="'left'">
|
<customBack top-title="原材料供应" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<codeNumCharts></codeNumCharts>
|
<codeNumCharts :data="one"></codeNumCharts>
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="追溯主体类型统计" :top-postion="'left'">
|
<customBack top-title="生产加工数据" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<principalTypeCharts></principalTypeCharts>
|
<principalTypeCharts></principalTypeCharts>
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-charts-item">
|
<div class="left-charts-item">
|
||||||
<customBack top-title="追溯产品分类" :top-postion="'left'">
|
<customBack top-title="农产品追溯监管" :top-postion="'left'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<productTypeCharts></productTypeCharts>
|
<productTypeCharts></productTypeCharts>
|
||||||
</template>
|
</template>
|
||||||
@ -25,25 +25,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<centerMap></centerMap>
|
<centerMap />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="6" class="right-charts">
|
<el-col :span="6" class="right-charts">
|
||||||
<div class="right-charts-item">
|
<div class="right-charts-item">
|
||||||
<customBack top-title="溯源主体信息统计" :top-postion="'right'">
|
<customBack top-title="溯源统计分析" :top-postion="'right'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<mainPartCharts></mainPartCharts>
|
<mainPartCharts></mainPartCharts>
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-charts-item">
|
<div class="right-charts-item">
|
||||||
<customBack top-title="溯源码数据统计" :top-postion="'right'">
|
<customBack top-title="农产品流向排行榜" :top-postion="'right'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<traceBarCharts></traceBarCharts>
|
<traceBarCharts></traceBarCharts>
|
||||||
</template>
|
</template>
|
||||||
</customBack>
|
</customBack>
|
||||||
</div>
|
</div>
|
||||||
<div class="right-charts-item">
|
<div class="right-charts-item">
|
||||||
<customBack top-title="最新溯源检测信息" :top-postion="'right'">
|
<customBack top-title="溯源列表" :top-postion="'right'">
|
||||||
<template #back>
|
<template #back>
|
||||||
<detectionCharts></detectionCharts>
|
<detectionCharts></detectionCharts>
|
||||||
</template>
|
</template>
|
||||||
@ -54,16 +54,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import centerMap from '@/components/centerMap.vue';
|
import { ref } from 'vue';
|
||||||
|
import centerMap from './components/centerMap.vue';
|
||||||
import codeNumCharts from './components/codeNumCharts.vue';
|
import codeNumCharts from './components/codeNumCharts.vue';
|
||||||
import mainPartCharts from './components/mainPartCharts.vue';
|
import mainPartCharts from './components/mainPartCharts.vue';
|
||||||
import principalTypeCharts from './components/principalTypeCharts.vue';
|
import principalTypeCharts from './components/principalTypeCharts.vue';
|
||||||
import productTypeCharts from './components/productTypeCharts.vue';
|
import productTypeCharts from './components/productTypeCharts.vue';
|
||||||
import traceBarCharts from './components/traceBarCharts.vue';
|
import traceBarCharts from './components/traceBarCharts.vue';
|
||||||
import detectionCharts from './components/detectionCharts.vue';
|
import detectionCharts from './components/detectionCharts.vue';
|
||||||
|
|
||||||
|
const one = ref([
|
||||||
|
{ value: 12000, name: '耿马镇' },
|
||||||
|
{ value: 8000, name: '勐撒镇' },
|
||||||
|
{ value: 862, name: '勐简乡' },
|
||||||
|
{ value: 6000, name: '勐永镇' },
|
||||||
|
{ value: 4000, name: '孟定镇' },
|
||||||
|
]);
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.data-home-index {
|
.data-home-index {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
.left-charts {
|
.left-charts {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user