Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据大屏投入品分类

Browse Source
This commit is contained in:
lzc 2025-03-19 17:32:05 +08:00
parent cc89de2a36
commit 60892a3c06
15 changed files with 336 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
main/package.json
View File

@ -23,6 +23,7 @@
"axios": "^1.6.5",
"dayjs": "^1.11.11",
"echarts": "^5.6.0",
"echarts-gl": "^2.0.9",
"element-plus": "^2.7.3",
"file-saver": "^2.0.5",
"js-base64": "^3.7.7",

21
main/src/components/custom-echart-pie-3d/index.vue
View File

@ -35,23 +35,7 @@ export default {
const chartRef = ref(null);
const { setOptions, getInstance, resize } = useEcharts(chartRef);
const option = reactive({
tooltip: {
formatter: '{b} ({c})',
},
series: [
{
type: 'pie',
radius: '72%',
center: ['50%', '55%'],
data: [],
labelLine: { show: true },
label: {
show: true,
formatter: '{b} \n ({d}%)',
color: '#B1B9D3',
},
},
],
series: [],
});
watchEffect(() => {
@ -72,8 +56,7 @@ export default {
if (props.option) {
Object.assign(option, cloneDeep(props.option));
}
// option.series[0].data = props.chartData;
option.series[0].data = props.chartData;
option.series = props.chartData;
setOptions(option);
resize();
getInstance()?.off('click', onClick);

2
main/src/utils/echarts.js
View File

@ -1,7 +1,7 @@
import * as echarts from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart } from 'echarts/charts';
import 'echarts-gl';
import {
TitleComponent,
TooltipComponent,

15
main/yarn.lock
View File

@ -1628,6 +1628,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
claygl@^1.2.1:
version "1.3.0"
resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
clean-css@^5.2.2:
version "5.3.3"
resolved "https://registry.npmmirror.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
@ -2177,6 +2182,14 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
es-errors "^1.3.0"
gopd "^1.2.0"
echarts-gl@^2.0.9:
version "2.0.9"
resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
dependencies:
claygl "^1.2.1"
zrender "^5.1.1"
echarts@^5.6.0:
version "5.6.0"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
@ -7095,7 +7108,7 @@ yocto-queue@^0.1.0:
resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zrender@5.6.1:
zrender@5.6.1, zrender@^5.1.1:
version "5.6.1"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==

1
sub-government-screen-service/package.json
View File

@ -21,6 +21,7 @@
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^1.6.5",
"echarts": "^5.6.0",
"echarts-gl": "^2.0.9",
"element-plus": "^2.7.2",
"js-base64": "^3.7.6",
"lodash": "^4.17.21",

BIN
sub-government-screen-service/src/assets/images/inputs/partbg1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
sub-government-screen-service/src/assets/images/inputs/partbg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 865 B

BIN
sub-government-screen-service/src/assets/images/inputs/partbg3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
sub-government-screen-service/src/views/entities/components/benefitCharts.vue
View File

@ -80,7 +80,7 @@ const chartsData = reactive({
},
//图表大小位置限制
grid: {
x: '10%',
x: '16%',
x2: '5%',
y: '15%',
y2: '15%',

49
sub-government-screen-service/src/views/entities/components/entitiesCategoryCharts.vue
View File

@ -6,16 +6,17 @@
<script setup>
import { ref, reactive, onMounted } from 'vue';
const dataList = reactive([
{ name: '打车费', val: 1230, itemStyle: { color: 'rgba(56, 136, 235, 1)' } },
{ name: '住宿费', val: 300, itemStyle: { color: 'rgba(113, 70, 159, 1)' } },
{ name: '办公费', val: 800, itemStyle: { color: 'rgba(237, 171, 87, 1)' } },
{ name: '差旅费', val: 500, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
{ name: '肉类', val: 1230, itemStyle: { color: 'rgba(56, 136, 235, 1)' } },
{ name: '水果', val: 300, itemStyle: { color: 'rgba(113, 70, 159, 1)' } },
{ name: '蔬菜', val: 800, itemStyle: { color: 'rgba(237, 171, 87, 1)' } },
{ name: '水产', val: 500, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
{ name: '谷物', val: 600, itemStyle: { color: 'rgba(231, 89, 77, 1)' } },
]);
const heightProportion = ref(0.3); // 柱状扇形的高度比例
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
// #region
const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height) => {
const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height, radiusScale) => {
// 计算
let midRatio = (startRatio + endRatio) / 3;
@ -54,22 +55,22 @@ const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h
x: function (u, v) {
if (u < startRadian) {
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
}
if (u > endRadian) {
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
}
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
},
y: function (u, v) {
if (u < startRadian) {
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
}
if (u > endRadian) {
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
}
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate * radiusScale;
},
z: function (u, v) {
@ -86,7 +87,7 @@ const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h
// #endregion
// 生成模拟 3D 饼图的配置项
const getPie3D = (pieData, internalDiameterRatio) => {
const getPie3D = (pieData, internalDiameterRatio, radiusScale = 1.8) => {
let series = [];
let sumValue = 0;
let startValue = 0;
@ -138,7 +139,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
false,
false,
k,
series[i].pieData.value
series[i].pieData.value,
radiusScale
);
startValue = endValue;
@ -148,8 +150,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
const midRadian = (series[i].pieData.startRatio + series[i].pieData.endRatio) * Math.PI;
// 计算扇区外缘顶部坐标（v=0时）
const radius = 1 + k; // 外径公式
const posX = Math.cos(midRadian) * radius;
const posY = Math.sin(midRadian) * radius;
const posX = Math.cos(midRadian) * radius * radiusScale;
const posY = Math.sin(midRadian) * radius * radiusScale;
// 获取该扇区实际高度
const posZ = heightProportion.value * series[i].pieData.value;
let flag = (midRadian >= 0 && midRadian <= Math.PI / 2) || (midRadian >= (3 * Math.PI) / 2 && midRadian <= Math.PI * 2) ? 1 : -1;
@ -169,15 +171,15 @@ const getPie3D = (pieData, internalDiameterRatio) => {
{
type: 'scatter3D',
label: {
show: true,
show: true, //设置label的显示和隐藏
distance: 0,
position: 'center',
textStyle: {
color: '#ffffff',
backgroundColor: color,
borderWidth: 2,
fontSize: 14,
padding: 10,
fontSize: 8,
padding: 4,
borderRadius: 4,
},
formatter: '{b}',
@ -241,8 +243,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
},
parametricEquation: {
u: {
min: 0.74, // 控制环的内径（92%半径）
max: 0.75, // 外径（100%半径）
min: 0.94, // 控制环的内径（92%半径）
max: 0.95, // 外径（100%半径）
step: 0.0001,
},
v: {
@ -277,8 +279,8 @@ const getPie3D = (pieData, internalDiameterRatio) => {
},
parametricEquation: {
u: {
min: 0.54, // 控制环的内径（92%半径）
max: 0.55, // 外径（100%半径）
min: 0.94, // 控制环的内径（92%半径）
max: 0.95, // 外径（100%半径）
step: 0.0001,
},
v: {
@ -309,7 +311,6 @@ dataList.forEach((item) => {
const chartsData = reactive({
option: {
backgroundColor: '#2d58e4',
xAxis3D: {
min: -1.5,
max: 1.5,
@ -325,7 +326,7 @@ const chartsData = reactive({
grid3D: {
show: false,
boxHeight: 4,
bottom: '50%',
top: '10%',
viewControl: {
distance: 380,
alpha: 25,

2
sub-government-screen-service/src/views/entities/index.vue
View File

@ -7,7 +7,7 @@
<div class="left-charts-item">
<customBack top-title="生产经营主体类别统计" :top-postion="'left'">
<template #back>
<!-- <entitiesCategoryCharts></entitiesCategoryCharts> -->
<entitiesCategoryCharts></entitiesCategoryCharts>
</template>
</customBack>
</div>

131
sub-government-screen-service/src/views/inputs/components/casesAlerts.vue Normal file
View File

@ -0,0 +1,131 @@
<template>
<div class="cases-alerts-warp">
<div class="cases-alerts" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg1.png') + ')' }">
<div class="cases-alerts-content">
<div class="cases-alerts-item-pos">
<template v-for="(n, index) in datalist" :key="index">
<div class="cases-alerts-item">
<div class="header" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg2.png') + ')' }">
<div class="title">{{ n.title }}</div>
</div>
<div class="content">
<template v-for="(m, mindex) in n.valStr" :key="mindex">
<div class="content-item" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg3.png') + ')' }">
<div class="num">{{ m }}</div>
</div>
</template>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
const datalist = reactive([
{ title: '案件次数', val: 100 },
{ title: '预警次数', val: 236 },
]);
onMounted(() => {
if (datalist.length && datalist.length > 0) {
datalist.forEach((m) => {
let valStr = '';
if (m.val < 1000 && m.val >= 100) {
valStr = '0' + m.val;
} else if (m.val < 100 && m.val >= 10) {
valStr = '00' + m.val;
} else if (m.val < 10) {
valStr = '000' + m.val;
} else {
valStr = m.val.toFixed(0);
}
m.valStr = [...valStr];
console.info('valStr', m.valStr);
});
}
});
</script>
<style lang="scss" scoped>
div {
box-sizing: border-box;
}
.cases-alerts-warp {
height: 100%;
padding: 8px;
.cases-alerts {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
.cases-alerts-content {
width: 100%;
height: 100%;
padding: 0 20px;
display: inline-flex;
justify-content: center;
flex-direction: column;
.cases-alerts-item-pos {
width: 100%;
display: inline-flex;
justify-content: space-around;
}
.cases-alerts-item {
display: inline-block;
width: calc((100% - 20px) / 2);
.header,
.content {
display: inline-flex;
width: 100%;
}
.header {
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 32px;
height: 32px;
display: inline-block;
width: 100%;
.title {
text-align: center;
font-size: 16px;
font-weight: bold;
transform: skewX(-8deg);
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-webkit-background-clip: text;
color: #fff;
letter-spacing: 8px;
text-shadow: -6px 0 0 1px #add8f1;
}
}
.content {
justify-content: space-around;
margin-top: 50%;
.content-item {
height: 36px;
display: inline-block;
width: calc((100% - 20px) / 4);
background-size: 100% 100%;
background-repeat: no-repeat;
line-height: 36px;
text-align: center;
.num {
text-align: center;
font-size: 20px;
font-weight: bold;
transform: skewX(-8deg);
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-webkit-background-clip: text;
color: #fff;
text-shadow: -6px 0 0 1px #add8f1;
}
}
}
}
}
}
}
</style>

137
sub-government-screen-service/src/views/inputs/components/inputsType.vue Normal file
View File

@ -0,0 +1,137 @@
<template>
<div class="demo roll-list-land-plan" style="height: 90%">
<!-- <div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
<template v-for="(h, indexh) in listKeys" :key="indexh">
<div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
</template>
</div> -->
<!-- <vue3ScrollSeamless class="scroll-wrap" :class-options="classOptions" :data-list="list"> -->
<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 }">
<div class="item-content">
<div class="label">{{ item.title }}</div>
<div class="val">
<el-progress :percentage="50" :show-text="false" :stroke-width="12" color="#6cd1f9" />
</div>
</div>
</div>
</div>
</div>
<!-- </vue3ScrollSeamless> -->
</div>
<!-- </div> -->
</template>
<script setup>
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
const props = defineProps({
// items: {
// type: Array,
// default: () => [],
// },
});
let list = reactive([
{ title: '农药', value: 357 },
{ title: '肥料', value: 159 },
{ title: '种源', value: 516 },
{ title: '兽药', value: 82 },
{ title: '农机', value: 45 },
]);
const listKeys = reactive(['title', 'value']);
const listKeysHeader = reactive({
title: '分类',
value: '数量',
});
const classOptions = {
singleHeight: 48,
};
</script>
<style scoped lang="scss">
.roll-list-land-plan {
margin-top: 8px;
::v-deep() {
.el-progress-bar__outer {
background: transparent;
}
}
.scroll-wrap {
height: 90%;
width: 100%;
margin: 4px auto;
overflow: hidden;
}
.list-item-header {
background: #144482;
font-size: 10px;
width: 100%;
.item-td {
padding: 8px 6px;
}
}
.list-item-boday {
background: transparent;
width: 100%;
.item-td {
padding: 4px 6px;
&.td-title {
color: #6cd1f9 !important;
}
&.zebra-b {
background: #051225 !important;
}
}
}
.item-warp {
display: inline-flex;
justify-content: space-around;
.item-td {
display: inline-block;
vertical-align: middle;
text-align: center;
color: #fff;
}
.item-content {
width: 100%;
display: inline-flex;
justify-content: flex-start;
margin: 8px 0;
.label,
.val {
display: inline-block;
vertical-align: middle;
}
.label {
width: 50px;
color: #fff;
}
.val {
width: calc(100% - 50px);
}
}
}
.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>

10
sub-government-screen-service/src/views/inputs/index.vue
View File

@ -6,7 +6,9 @@
<el-col :span="6" class="left-charts">
<div class="left-charts-item">
<customBack top-title="投入品分类统计" :top-postion="'left'">
<template #back> </template>
<template #back>
<inputsType></inputsType>
</template>
</customBack>
</div>
<div class="left-charts-item">
@ -30,7 +32,9 @@
<el-col :span="6" class="right-charts">
<div class="right-charts-item">
<customBack top-title="案件次数" :top-postion="'right'">
<template #back> </template>
<template #back>
<casesAlerts></casesAlerts>
</template>
</customBack>
</div>
<div class="right-charts-item">
@ -61,6 +65,8 @@ import inputsGmp from './components/inputsGmp.vue';
import landbreedCharts from './components/landbreedCharts.vue';
import monthlyuseCharts from './components/monthlyuseCharts.vue';
import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
import casesAlerts from './components/casesAlerts.vue';
import inputsType from './components/inputsType.vue';
</script>
<style lang="scss" scoped>
.data-home-index {

15
sub-government-screen-service/yarn.lock
View File

@ -1601,6 +1601,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
claygl@^1.2.1:
version "1.3.0"
resolved "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
integrity sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==
clone-regexp@^1.0.0:
version "1.0.1"
resolved "https://registry.npmmirror.com/clone-regexp/-/clone-regexp-1.0.1.tgz#051805cd33173375d82118fc0918606da39fd60f"
@ -2086,6 +2091,14 @@ dunder-proto@^1.0.0, dunder-proto@^1.0.1:
es-errors "^1.3.0"
gopd "^1.2.0"
echarts-gl@^2.0.9:
version "2.0.9"
resolved "https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz#ee228a6c7520a6fb7bbb71ea94394f3637ade033"
integrity sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==
dependencies:
claygl "^1.2.1"
zrender "^5.1.1"
echarts@^5.6.0:
version "5.6.0"
resolved "https://registry.npmmirror.com/echarts/-/echarts-5.6.0.tgz#2377874dca9fb50f104051c3553544752da3c9d6"
@ -6686,7 +6699,7 @@ yocto-queue@^0.1.0:
resolved "https://registry.npmmirror.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
zrender@5.6.1:
zrender@5.6.1, zrender@^5.1.1:
version "5.6.1"
resolved "https://registry.npmmirror.com/zrender/-/zrender-5.6.1.tgz#e08d57ecf4acac708c4fcb7481eb201df7f10a6b"
integrity sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==