Merge branch 'dev' of http://192.168.18.88:8077/sznyb/daimp-front into dev
This commit is contained in:
commit
29ce087f99
@ -29,6 +29,10 @@ export default {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
isSeries: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
@ -90,7 +94,7 @@ export default {
|
||||
}
|
||||
seriesData.push(obj);
|
||||
});
|
||||
option.series = seriesData;
|
||||
option.series = props.isSeries && option.series.length > 0 ? option.series : seriesData;
|
||||
option.xAxis.data = xAxisData;
|
||||
setOptions(option);
|
||||
getInstance()?.off('click', onClick);
|
||||
|
||||
103
main/src/components/custom-echart-bubble/index.vue
Normal file
103
main/src/components/custom-echart-bubble/index.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, reactive, watch, watchEffect } from 'vue';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useEcharts } from '../../hooks/useEcharts';
|
||||
|
||||
export default {
|
||||
name: 'customEchartBubble',
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
const chartRef = ref(null);
|
||||
const { setOptions, getInstance, resize } = useEcharts(chartRef);
|
||||
const option = reactive({
|
||||
tooltip: {
|
||||
formatter: function (params) {
|
||||
console.log(params);
|
||||
var str = params.marker + '' + params.data.name + '</br>' + '交易额：' + params.data.value + '万元</br>';
|
||||
return str;
|
||||
},
|
||||
},
|
||||
animationDurationUpdate: function (idx) {
|
||||
// 越往后的数据延迟越大
|
||||
return idx * 100;
|
||||
},
|
||||
animationEasingUpdate: 'bounceIn',
|
||||
color: ['#fff', '#fff', '#fff'],
|
||||
series: [
|
||||
{
|
||||
type: 'graph',
|
||||
layout: 'force',
|
||||
force: {
|
||||
repulsion: 80,
|
||||
edgeLength: 20,
|
||||
},
|
||||
roam: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
data: props.chartData,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
props.chartData && initCharts();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.size,
|
||||
() => {
|
||||
console.info(' option.series[0]', props.chartData);
|
||||
resize();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
function initCharts() {
|
||||
if (props.option) {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
}
|
||||
option.series[0].data = props.chartData;
|
||||
setOptions(option);
|
||||
resize();
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
return { chartRef };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -53,6 +53,9 @@ export default {
|
||||
name: 'bar',
|
||||
type: 'bar',
|
||||
data: [],
|
||||
itemStyle: {
|
||||
barWidth: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
@ -69,10 +72,13 @@ export default {
|
||||
let xAxisData = Array.from(new Set(props.chartData.map((item) => item.name)));
|
||||
let seriesData = [];
|
||||
typeArr.forEach((type, index) => {
|
||||
let obj = { name: type };
|
||||
const barStyle = props.option?.barStyle ?? {};
|
||||
let obj = { name: type, ...barStyle };
|
||||
let chartArr = props.chartData.filter((item) => type === item.type);
|
||||
obj['data'] = chartArr.map((item) => item.value);
|
||||
obj['type'] = chartArr[0].seriesType;
|
||||
obj['stack'] = chartArr[0].stack;
|
||||
obj['itemStyle'] = chartArr[0].itemStyle;
|
||||
seriesData.push(obj);
|
||||
});
|
||||
option.series = seriesData;
|
||||
|
||||
90
main/src/components/custom-echart-pie-3d/index.vue
Normal file
90
main/src/components/custom-echart-pie-3d/index.vue
Normal file
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div ref="chartRef" :style="{ height, width }"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref, reactive, watch, watchEffect } from 'vue';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import { useEcharts } from '../../hooks/useEcharts';
|
||||
|
||||
export default {
|
||||
name: 'CustomEchartPie3d',
|
||||
props: {
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
size: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: 'calc(100vh - 78px)',
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit }) {
|
||||
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',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
props.chartData && initCharts();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.size,
|
||||
() => {
|
||||
resize();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
function initCharts() {
|
||||
if (props.option) {
|
||||
Object.assign(option, cloneDeep(props.option));
|
||||
}
|
||||
// option.series[0].data = props.chartData;
|
||||
option.series[0].data = props.chartData;
|
||||
setOptions(option);
|
||||
resize();
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
return { chartRef };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -11,6 +11,8 @@ import CustomEchartMixin from './custom-echart-mixin';
|
||||
import CustomEchartBarLine from './custom-echart-bar-line';
|
||||
import customEchartPictorialBar from './custom-echart-pictorial-bar';
|
||||
import CustomEchartLineLine from './custom-echart-line-line';
|
||||
import CustomEchartBubble from './custom-echart-bubble';
|
||||
import CustomEchartPie3d from './custom-echart-pie-3d';
|
||||
|
||||
export {
|
||||
SvgIcon,
|
||||
@ -26,4 +28,6 @@ export {
|
||||
CustomEchartBarLine,
|
||||
customEchartPictorialBar,
|
||||
CustomEchartLineLine,
|
||||
CustomEchartBubble,
|
||||
CustomEchartPie3d,
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import * as echarts from 'echarts/core';
|
||||
|
||||
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from 'echarts/charts';
|
||||
import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart, GraphChart } from 'echarts/charts';
|
||||
|
||||
import {
|
||||
TitleComponent,
|
||||
@ -43,6 +43,7 @@ echarts.use([
|
||||
TimelineComponent,
|
||||
CalendarComponent,
|
||||
GraphicComponent,
|
||||
GraphChart,
|
||||
]);
|
||||
|
||||
export default echarts;
|
||||
|
||||
@ -11,6 +11,7 @@ declare module 'vue' {
|
||||
CenterMap: typeof import('./src/components/centerMap.vue')['default']
|
||||
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
|
||||
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
|
||||
CustomBack: typeof import('./src/components/customBack.vue')['default']
|
||||
CustomCard: typeof import('./src/components/CustomCard.vue')['default']
|
||||
CustomSelect: typeof import('./src/components/CustomSelect.vue')['default']
|
||||
GridSelect: typeof import('./src/components/GridSelect.vue')['default']
|
||||
|
||||
@ -25,13 +25,13 @@ const size = computed(() => SettingStore.themeConfig.globalComSize);
|
||||
|
||||
let apptime = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
apptime.value && apptime.value.startTime();
|
||||
});
|
||||
// onMounted(() => {
|
||||
// apptime.value && apptime.value.startTime();
|
||||
// });
|
||||
|
||||
onUnmounted(() => {
|
||||
apptime.value && apptime.value.chearTime();
|
||||
});
|
||||
// onUnmounted(() => {
|
||||
// apptime.value && apptime.value.chearTime();
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 170 KiB After Width: | Height: | Size: 170 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
|
Before Width: | Height: | Size: 285 KiB After Width: | Height: | Size: 285 KiB |
@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/screenbg.png') + ')' }">
|
||||
<div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
|
||||
<div class="chart-content">
|
||||
<div class="top">
|
||||
<slot v-if="$slots.top" name="top"></slot>
|
||||
<div v-else class="top-content-warp">
|
||||
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
|
||||
<div class="top-left"></div>
|
||||
<div class="top-content">
|
||||
{{ topTitle }}
|
||||
@ -14,12 +14,18 @@
|
||||
<div class="content">
|
||||
<slot name="center"></slot>
|
||||
</div>
|
||||
<div class="bottom" :style="{ 'background-image': 'url(' + getAssetsFile('images/bottombj.jpg') + ')' }">
|
||||
<div class="bottom" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/bottombg.jpg') + ')' }">
|
||||
<div class="b-nav">
|
||||
<div
|
||||
v-for="n in navlist"
|
||||
:key="n.name"
|
||||
class="b-nav-item"
|
||||
:style="{
|
||||
'background-image':
|
||||
'url(' +
|
||||
(currentName == n.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
|
||||
')',
|
||||
}"
|
||||
:class="currentName == n.name ? 'nav-act' : 'nav-normal'"
|
||||
@click="itemAct(n.name)"
|
||||
>
|
||||
@ -108,6 +114,9 @@ div {
|
||||
height: 55px;
|
||||
.top-content-warp {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
.top-left,
|
||||
.top-content,
|
||||
.top-right {
|
||||
@ -116,6 +125,7 @@ div {
|
||||
}
|
||||
.top-content {
|
||||
width: calc(100% - 400px);
|
||||
line-height: 42px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
@ -147,10 +157,14 @@ div {
|
||||
.b-nav-item {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
min-width: 132px;
|
||||
height: 42px;
|
||||
text-align: center;
|
||||
line-height: 38px;
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
transform: skewX(-8deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="map-center-warp">
|
||||
<img :src="getAssetsFile('images/gmmap.png')" class="map-img" />
|
||||
<img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
39
sub-government-screen-service/src/components/customBack.vue
Normal file
39
sub-government-screen-service/src/components/customBack.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="custom-back-warp">
|
||||
<subTop :title="topTitle" :postion="topPostion"></subTop>
|
||||
<div class="custom-back-content">
|
||||
<slot name="back"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import subTop from '@/components/subTop.vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useApp } from '@/hooks';
|
||||
|
||||
const router = useRouter();
|
||||
const props = defineProps({
|
||||
topTitle: {
|
||||
type: String,
|
||||
default: '统计',
|
||||
},
|
||||
topPostion: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.custom-back-warp {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.custom-back-content {
|
||||
height: calc(100% - 38px);
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<div :style="{ 'text-align': pos }" class="title-top-warp">{{ topTitle || '--' }}</div>
|
||||
<div class="title-top-warp">
|
||||
<div
|
||||
:style="{
|
||||
'background-image': 'url(' + getAssetsFile('images/vsualized/home/titlebg.png') + ')',
|
||||
transform: pos == 'right' ? 'rotateY(180deg)' : '',
|
||||
}"
|
||||
class="title-top-bg"
|
||||
></div>
|
||||
<span class="title-top-content" :style="{ 'text-align': pos }">{{ topTitle || '--' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
@ -36,6 +45,21 @@ watch(
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.title-top-warp {
|
||||
position: relative;
|
||||
height: 38px;
|
||||
width: 100%;
|
||||
.title-top-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.title-top-content {
|
||||
line-height: 38px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
@ -46,5 +70,12 @@ watch(
|
||||
letter-spacing: 4px;
|
||||
text-shadow: -2px 0 0 1px #add8f1;
|
||||
width: 100%;
|
||||
padding: 0 36px;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'breed'">
|
||||
<baseBg :name-val="'breed'" top-title="智慧养殖管理系统">
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
@ -10,9 +10,9 @@
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<!-- <div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div> -->
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -33,8 +33,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
}
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +45,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'early'">
|
||||
<baseBg :name-val="'early'" top-title="产业预警管理系统">
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
@ -10,9 +10,9 @@
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<!-- <div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div> -->
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -34,7 +34,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +46,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div class="benefit-charts">
|
||||
<custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" :is-series="true" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const data = [1700, 800, 1700, 600, 800];
|
||||
const data2 = [2600, 1400, 3350, 1400, 1400];
|
||||
const colorArr1 = ['rgba(11, 83, 128)', 'rgba(2, 143, 224)', '#2a7fcc'];
|
||||
const colorArr2 = ['rgb(12, 109, 122)', 'rgba(1, 241, 228)', '#5ce1d6'];
|
||||
const color1 = {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr1[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr1[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr1[1],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr1[1],
|
||||
},
|
||||
],
|
||||
};
|
||||
const color2 = {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
x2: 1,
|
||||
y: 0,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArr2[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr2[0],
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: colorArr2[1],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArr2[1],
|
||||
},
|
||||
],
|
||||
};
|
||||
var barWidth = 18;
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
var str = params[0].name + ':';
|
||||
params.filter(function (item) {
|
||||
if (item.componentSubType == 'bar') {
|
||||
str += '<br/>' + item.seriesName + '：' + item.value;
|
||||
}
|
||||
});
|
||||
return str;
|
||||
},
|
||||
},
|
||||
//图表大小位置限制
|
||||
grid: {
|
||||
x: '10%',
|
||||
x2: '5%',
|
||||
y: '15%',
|
||||
y2: '15%',
|
||||
},
|
||||
xAxis: {
|
||||
data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
|
||||
//坐标轴
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#214776',
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '10',
|
||||
},
|
||||
},
|
||||
type: 'category',
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#C5DFFB',
|
||||
fontWeight: 500,
|
||||
fontSize: '14',
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: '16',
|
||||
},
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
name: ' ',
|
||||
nameTextStyle: {
|
||||
color: '#DEDEDE',
|
||||
fontSize: 12,
|
||||
padding: 10,
|
||||
},
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed', //线的类型 虚线0
|
||||
opacity: 0.2, //透明度
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
//坐标值标注
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#C5DFFB',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
z: 1,
|
||||
name: '绿色',
|
||||
type: 'bar',
|
||||
barWidth: barWidth,
|
||||
barGap: '0%',
|
||||
data: data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
z: 3,
|
||||
name: '绿色',
|
||||
type: 'pictorialBar',
|
||||
symbolPosition: 'end',
|
||||
data: data,
|
||||
symbol: 'diamond',
|
||||
symbolOffset: ['0%', '-60%'],
|
||||
symbolSize: [18, 12],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderWidth: 2,
|
||||
color: colorArr2[2],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
valData: [
|
||||
{ value: 205, name: '肉类' },
|
||||
{ value: 308, name: '水果' },
|
||||
{ value: 359, name: '蔬菜' },
|
||||
{ value: 452, name: '水产' },
|
||||
{ value: 388, name: '谷物' },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.benefit-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div class="category-charts">
|
||||
<custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const plantBreed = reactive({
|
||||
option: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['肉类', '水果', '蔬菜', '水产', '谷物'],
|
||||
right: '0', // 距离左侧10%的位置
|
||||
top: 'middle', // 垂直居中
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
itemWidth: 15, // 图例标记的宽度
|
||||
itemHeight: 8, // 图例标记的高度
|
||||
textStyle: {
|
||||
fontSize: 10, // 图例文字的字体大小
|
||||
color: '#fff', // 图例文字的颜色
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [20, 80],
|
||||
roseType: 'area',
|
||||
center: ['40%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
valData: [
|
||||
{ value: 205, name: '肉类' },
|
||||
{ value: 308, name: '水果' },
|
||||
{ value: 359, name: '蔬菜' },
|
||||
{ value: 452, name: '水产' },
|
||||
{ value: 388, name: '谷物' },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (plantBreed.valData && plantBreed.length) {
|
||||
plantBreed.valData.forEach((m, index) => {
|
||||
let num = 100;
|
||||
m.value = (Number(m.value) + Math.random() + num).toFixed(2);
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.category-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="entities-category-charts">
|
||||
<custom-echart-pie-3d :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<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)' } },
|
||||
]);
|
||||
const heightProportion = ref(0.3); // 柱状扇形的高度比例
|
||||
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
// #region
|
||||
const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, height) => {
|
||||
// 计算
|
||||
let midRatio = (startRatio + endRatio) / 3;
|
||||
|
||||
let startRadian = startRatio * Math.PI * 2;
|
||||
let endRadian = endRatio * Math.PI * 2;
|
||||
let midRadian = midRatio * Math.PI * 2;
|
||||
|
||||
// 如果只有一个扇形，则不实现选中效果。
|
||||
if (startRatio === 0 && endRatio === 1) {
|
||||
isSelected = false;
|
||||
}
|
||||
|
||||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
||||
k = typeof k !== 'undefined' ? k : 1 / 3;
|
||||
|
||||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
||||
let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
||||
let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
||||
|
||||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
||||
let hoverRate = isHovered ? 1.1 : 1;
|
||||
|
||||
// 返回曲面参数方程
|
||||
return {
|
||||
u: {
|
||||
min: -Math.PI,
|
||||
max: Math.PI * 3,
|
||||
step: Math.PI / 32,
|
||||
},
|
||||
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
|
||||
x: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
y: function (u, v) {
|
||||
if (u < startRadian) {
|
||||
return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
if (u > endRadian) {
|
||||
return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
}
|
||||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
|
||||
},
|
||||
|
||||
z: function (u, v) {
|
||||
if (u < -Math.PI * 0.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
if (u > Math.PI * 2.5) {
|
||||
return Math.sin(u);
|
||||
}
|
||||
return Math.sin(v) > 0 ? heightProportion.value * height : -1;
|
||||
},
|
||||
};
|
||||
};
|
||||
// #endregion
|
||||
|
||||
// 生成模拟 3D 饼图的配置项
|
||||
const getPie3D = (pieData, internalDiameterRatio) => {
|
||||
let series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
let legendData = [];
|
||||
let linesSeries = []; // line3D模拟label指示线
|
||||
let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
|
||||
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i++) {
|
||||
sumValue += pieData[i].value;
|
||||
|
||||
let seriesItem = {
|
||||
name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
pieData: pieData[i],
|
||||
pieStatus: {
|
||||
selected: false,
|
||||
hovered: false,
|
||||
k: k,
|
||||
},
|
||||
};
|
||||
|
||||
if (typeof pieData[i].itemStyle != 'undefined') {
|
||||
let itemStyle = {};
|
||||
|
||||
typeof pieData[i].itemStyle.color != 'undefined' ? (itemStyle.color = pieData[i].itemStyle.color) : null;
|
||||
typeof pieData[i].itemStyle.opacity != 'undefined' ? (itemStyle.opacity = pieData[i].itemStyle.opacity) : null;
|
||||
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i++) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
// console.log(series[i]);
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
|
||||
startValue = endValue;
|
||||
|
||||
// 计算label指示线的起始和终点位置
|
||||
// 计算扇区中心角度（弧度）
|
||||
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 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;
|
||||
let color = pieData[i].itemStyle.color;
|
||||
let turningPosArr = [posX * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posY * 1.1 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posZ * 1];
|
||||
let endPosArr = [posX * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posY * 1.2 + i * 0.1 * flag + (flag < 0 ? -0.2 : 0), posZ * 3];
|
||||
|
||||
linesSeries.push(
|
||||
{
|
||||
type: 'line3D',
|
||||
lineStyle: {
|
||||
color: color,
|
||||
},
|
||||
data: [[posX, posY, posZ], turningPosArr, endPosArr],
|
||||
},
|
||||
// https://www.isqqw.com/assets/layout/images/person.png
|
||||
{
|
||||
type: 'scatter3D',
|
||||
label: {
|
||||
show: true,
|
||||
distance: 0,
|
||||
position: 'center',
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
backgroundColor: color,
|
||||
borderWidth: 2,
|
||||
fontSize: 14,
|
||||
padding: 10,
|
||||
borderRadius: 4,
|
||||
},
|
||||
formatter: '{b}',
|
||||
},
|
||||
symbolSize: 0,
|
||||
data: [{ name: series[i].name + '\n' + series[i].pieData.val, value: endPosArr }],
|
||||
}
|
||||
);
|
||||
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
series = series.concat(linesSeries);
|
||||
|
||||
// 计算底座的缩放系数，根据k调整
|
||||
const baseScale = 2; // 原始基础缩放系数
|
||||
const scaleForBase = baseScale * (1 + k); // 动态调整缩放
|
||||
// 最底下圆盘
|
||||
series.push({
|
||||
name: 'mouseoutSeries',
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.75,
|
||||
color: 'rgba(51, 135, 146, 0.75)',
|
||||
},
|
||||
parametricEquation: {
|
||||
u: {
|
||||
min: 0,
|
||||
max: Math.PI * 2,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI,
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * scaleForBase;
|
||||
},
|
||||
y: function (u, v) {
|
||||
return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * scaleForBase;
|
||||
},
|
||||
z: function (u, v) {
|
||||
return Math.cos(v) > 0 ? -0 : -3.5;
|
||||
},
|
||||
},
|
||||
});
|
||||
series.push({
|
||||
name: 'bottomRing',
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.6,
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
},
|
||||
parametricEquation: {
|
||||
u: {
|
||||
min: 0.74, // 控制环的内径（92%半径）
|
||||
max: 0.75, // 外径（100%半径）
|
||||
step: 0.0001,
|
||||
},
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2, // 完整圆周
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
// 极坐标公式 + 动态缩放
|
||||
return u * scaleForBase * 1.0 * Math.cos(v);
|
||||
},
|
||||
y: function (u, v) {
|
||||
return u * scaleForBase * 1.0 * Math.sin(v);
|
||||
},
|
||||
z: function () {
|
||||
// 保持原有高度差
|
||||
return -3.6;
|
||||
},
|
||||
},
|
||||
});
|
||||
let maxHeight = Math.max(...pieData.map((item) => item.value)) * heightProportion.value;
|
||||
series.push({
|
||||
name: 'topRing',
|
||||
type: 'surface',
|
||||
parametric: true,
|
||||
wireframe: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
opacity: 0.6,
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
},
|
||||
parametricEquation: {
|
||||
u: {
|
||||
min: 0.54, // 控制环的内径（92%半径）
|
||||
max: 0.55, // 外径（100%半径）
|
||||
step: 0.0001,
|
||||
},
|
||||
v: {
|
||||
min: 0,
|
||||
max: Math.PI * 2, // 完整圆周
|
||||
step: Math.PI / 20,
|
||||
},
|
||||
x: function (u, v) {
|
||||
// 极坐标公式 + 动态缩放
|
||||
return u * scaleForBase * 1.0 * Math.cos(v);
|
||||
},
|
||||
y: function (u, v) {
|
||||
return u * scaleForBase * 1.0 * Math.sin(v);
|
||||
},
|
||||
z: function () {
|
||||
// 保持原有高度差
|
||||
return maxHeight + 0.1;
|
||||
},
|
||||
},
|
||||
});
|
||||
return series;
|
||||
};
|
||||
|
||||
let total = 0;
|
||||
dataList.forEach((item) => {
|
||||
total += item.val;
|
||||
});
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
backgroundColor: '#2d58e4',
|
||||
xAxis3D: {
|
||||
min: -1.5,
|
||||
max: 1.5,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1.5,
|
||||
max: 1.5,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 4,
|
||||
bottom: '50%',
|
||||
viewControl: {
|
||||
distance: 380,
|
||||
alpha: 25,
|
||||
beta: 60,
|
||||
autoRotate: true, // 自动旋转
|
||||
},
|
||||
},
|
||||
},
|
||||
valData: [],
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
chartsData.valData = getPie3D(
|
||||
dataList.map((item) => {
|
||||
item.value = Number(((item.val / total) * 100).toFixed(2));
|
||||
return item;
|
||||
}),
|
||||
0
|
||||
);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.entities-category-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<div class="entities-statistics">
|
||||
<custom-echart-mixin :chart-data="chartsData.valData" :option="chartsData.option" height="100%" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
data: ['个体户', '村集体', '合作社', '经营企业', '趋势'],
|
||||
left: '0', // 距离左侧10%的位置
|
||||
top: '0', // 垂直居中
|
||||
itemWidth: 15, // 图例标记的宽度
|
||||
itemHeight: 8, // 图例标记的高度
|
||||
textStyle: {
|
||||
fontSize: 10, // 图例文字的字体大小
|
||||
color: '#fff', // 图例文字的颜色
|
||||
},
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 18,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
itemStyle: { fontSize: 10 },
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '占比',
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
itemStyle: { fontSize: 10 },
|
||||
},
|
||||
],
|
||||
grid: {
|
||||
x: '10%',
|
||||
x2: '15%',
|
||||
y: '20%',
|
||||
y2: '20%',
|
||||
},
|
||||
},
|
||||
valData: [
|
||||
{ name: '耿马', value: 40, type: '个体户', seriesType: 'bar', stack: '耿马' },
|
||||
{ name: '耿马', value: 30, type: '村集体', seriesType: 'bar', stack: '耿马' },
|
||||
{ name: '耿马', value: 100, type: '合作社', seriesType: 'bar', stack: '耿马' },
|
||||
{ name: '耿马', value: 60, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
||||
{ name: '耿马', value: 10, type: '趋势', seriesType: 'line' },
|
||||
{ name: '大香乡', value: 20, type: '个体户', seriesType: 'bar', stack: '耿马' },
|
||||
{ name: '大香乡', value: 20, type: '村集体', seriesType: 'bar', stack: '耿马' },
|
||||
{ name: '大香乡', value: 80, type: '合作社', seriesType: 'bar', stack: '耿马' },
|
||||
{ name: '大香乡', value: 40, type: '经营企业', seriesType: 'bar', stack: '耿马', itemStyle: { borderRadius: [8, 8, 0, 0] } },
|
||||
{ name: '大香乡', value: 50, type: '趋势', seriesType: 'line' },
|
||||
],
|
||||
});
|
||||
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.entities-statistics {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div class="demo roll-list-lentities" 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 }">
|
||||
<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 + ')' }">
|
||||
{{ item[b] }}
|
||||
</div>
|
||||
</template>
|
||||
</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: '信达农资有限公司', type: '农药', time: '2025.01.02', duration: 8 },
|
||||
{ title: '方大种源有限公司', type: '种源', time: '2025.01.01', duration: 10 },
|
||||
{ title: '信誉种源有限公司', type: '种源', time: '2025.01.02', duration: 11 },
|
||||
{ title: '嘉兴包装有限公司', type: '生产加工', time: '2025.01.01', duration: 15 },
|
||||
{ title: '达国有限公司', type: '农资', time: '2025.01.02', duration: 14 },
|
||||
{ title: '华威种植专业合作社', type: '合作社', time: '2025.01.01', duration: 8 },
|
||||
{ title: '信誉种源合作社', type: '合作社', time: '2025.01.02', duration: 15 },
|
||||
{ title: '华泰种源有限公司', type: '种源', time: '2025.01.01', duration: 13 },
|
||||
{ title: '嘉德食品包装包装有限公司', type: '生产加工', time: '2025.01.02', duration: 5 },
|
||||
]);
|
||||
|
||||
const listKeys = reactive(['title', 'type', 'time', 'duration']);
|
||||
const listKeysHeader = reactive({
|
||||
title: '主体名称',
|
||||
type: '主体类别',
|
||||
time: '注册时间',
|
||||
duration: '经营时间',
|
||||
});
|
||||
|
||||
const classOptions = {
|
||||
singleHeight: 48,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.roll-list-lentities {
|
||||
margin-top: 8px;
|
||||
.scroll-wrap {
|
||||
height: 80%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -0,0 +1,87 @@
|
||||
<template>
|
||||
<div ref="chartsWarp" class="hot-charts">
|
||||
<custom-echart-bubble :chart-data="seriesData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {},
|
||||
valData: [
|
||||
{ name: '多菌灵', value: 6833.37 },
|
||||
{ name: '复合肥', value: 6823.93 },
|
||||
{ name: '水溶肥', value: 3529.8 },
|
||||
{ name: '大豆种子', value: 9773.04 },
|
||||
{ name: '农膜', value: 2992.33 },
|
||||
{ name: '草甘膦', value: 1448.23 },
|
||||
{ name: '其他', value: 3800.77 },
|
||||
],
|
||||
});
|
||||
|
||||
let chartsWarp = ref(null);
|
||||
let seriesData = reactive([]);
|
||||
|
||||
const compare = (propertyName) => {
|
||||
return (object1, object2) => {
|
||||
var value1 = object1[propertyName];
|
||||
var value2 = object2[propertyName];
|
||||
if (value2 < value1) {
|
||||
return 1;
|
||||
} else if (value2 > value1) {
|
||||
return -1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (chartsData.valData && chartsData.valData.length) {
|
||||
let datas = chartsData.valData.sort(compare('value')).reverse();
|
||||
let maxValue = datas[0].value;
|
||||
let colors = ['#4983F5', '#3D993D', '#525CCC', '#3344FF', '#39ACE5', '#008099', '#2985CC'];
|
||||
let total = datas.reduce((acc, current) => {
|
||||
return acc + current.value;
|
||||
}, 0);
|
||||
for (var i = 0; i < datas.length; i++) {
|
||||
let acct = parseFloat((datas[i].value / total).toFixed(2));
|
||||
if (acct < 0.2) {
|
||||
acct = 0.2;
|
||||
}
|
||||
if (acct > 0.6) {
|
||||
acct = 0.6;
|
||||
}
|
||||
let reference =
|
||||
chartsWarp.value.clientHeight < chartsWarp.value.clientWidth
|
||||
? parseInt(chartsWarp.value.clientHeight)
|
||||
: parseInt(chartsWarp.value.clientWidth);
|
||||
|
||||
var ss = parseInt(acct * reference * 1.3);
|
||||
var color = colors[i];
|
||||
var item = {
|
||||
name: datas[i].name,
|
||||
value: datas[i].value,
|
||||
symbolSize: ss,
|
||||
draggable: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: color,
|
||||
color: color,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
seriesData.push(item);
|
||||
}
|
||||
|
||||
console.info('seriesData', seriesData);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.hot-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,56 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'entities'">
|
||||
<baseBg :name-val="'entities'" top-title="生产经主体管理系统">
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="生产经营主体类别统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<!-- <entitiesCategoryCharts></entitiesCategoryCharts> -->
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="各乡镇经营主体统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<entitiesStatistics></entitiesStatistics>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="生产经营主体信息" :top-postion="'left'">
|
||||
<template #back>
|
||||
<entitieslist></entitieslist>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<!-- <div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div> -->
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="经营类目统计" :top-postion="'right'">
|
||||
<template #back>
|
||||
<categoryCharts></categoryCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="类目效益统计(亿元)" :top-postion="'right'">
|
||||
<template #back>
|
||||
<benefitCharts></benefitCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="热门产品" :top-postion="'right'">
|
||||
<template #back>
|
||||
<hotCharts></hotCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -21,6 +59,14 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import customBack from '@/components/customBack.vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import categoryCharts from './components/categoryCharts.vue';
|
||||
import entitieslist from './components/entitieslist.vue';
|
||||
import hotCharts from './components/hotCharts.vue';
|
||||
import benefitCharts from './components/benefitCharts.vue';
|
||||
import entitiesStatistics from './components/entitiesStatistics.vue';
|
||||
import entitiesCategoryCharts from './components/entitiesCategoryCharts.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
@ -34,7 +80,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +92,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,28 @@
|
||||
<template>
|
||||
<div class="home-comprehensive-warp">
|
||||
<el-row :gutter="10" class="data-item-row">
|
||||
<el-col v-for="(n, index) in datalist" :key="index" :span="12" class="data-item">
|
||||
<div class="data-item-row">
|
||||
<div
|
||||
v-for="(n, index) in datalist"
|
||||
:key="index"
|
||||
:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg.png') + ')' }"
|
||||
class="data-item"
|
||||
>
|
||||
<div class="data-warp">
|
||||
<div class="small-bg">
|
||||
<img :src="getAssetsFile('images/vsualized/home/partbg1.png')" />
|
||||
<img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
|
||||
</div>
|
||||
<div class="data-pos">
|
||||
<div class="data-pos-center">
|
||||
<div class="c">
|
||||
<span class="label">{{ n.label }}</span>
|
||||
<span class="value">{{ n.value }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -32,10 +47,10 @@ let topTitle = ref('');
|
||||
let pos = ref('');
|
||||
|
||||
const datalist = reactive([
|
||||
{ label: '农业人口(万人)', value: 27.88 },
|
||||
{ label: '耕地面积(万亩)', value: 103.05 },
|
||||
{ label: '农业总产值(亿元)', value: 92.81 },
|
||||
{ label: '人均增收(万元)', value: 1.87 },
|
||||
{ label: '农业人口(万人)', value: 27.88, icon: 'farmers.png' },
|
||||
{ label: '耕地面积(万亩)', value: 103.05, icon: 'area.png' },
|
||||
{ label: '农业总产值(亿元)', value: 92.81, icon: 'outputVal.png' },
|
||||
{ label: '人均增收(万元)', value: 1.87, icon: 'Increase.png' },
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
@ -82,16 +97,55 @@ watch(
|
||||
height: 100%;
|
||||
.data-item-row {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.data-item {
|
||||
height: calc(100% / 2);
|
||||
height: calc((100% - 20px) / 2);
|
||||
width: calc((100% - 20px) / 2);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
}
|
||||
.data-warp {
|
||||
padding: 8px;
|
||||
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
.small-bg,
|
||||
.data-pos {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
.data-pos-center {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.pos-center {
|
||||
}
|
||||
}
|
||||
}
|
||||
.small-bg {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
position: relative;
|
||||
.img-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 38%;
|
||||
height: 38%;
|
||||
}
|
||||
}
|
||||
.data-pos {
|
||||
width: calc(100% - 54px);
|
||||
.label,
|
||||
.value {
|
||||
display: inline-block;
|
||||
@ -99,12 +153,14 @@ watch(
|
||||
}
|
||||
.label {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.value {
|
||||
color: #6cd1f9;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="home-plant-breed-charts">
|
||||
<div class="home-entities-charts">
|
||||
<custom-echart-pie :chart-data="plantBreed.valData" height="100%" :option="plantBreed.option" />
|
||||
</div>
|
||||
</template>
|
||||
@ -64,7 +64,7 @@ onMounted(() => {
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.home-plant-breed-charts {
|
||||
.home-entities-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,19 +1,31 @@
|
||||
<template>
|
||||
<div class="home-comprehensive-warp">
|
||||
<el-row :gutter="10" class="data-item-row">
|
||||
<el-col
|
||||
<div class="home-inputs-warp">
|
||||
<div class="data-item-row">
|
||||
<div
|
||||
v-for="(n, index) in datalist"
|
||||
:key="index"
|
||||
:span="12"
|
||||
class="data-item"
|
||||
:style="{ height: 'calc(100%' + ' / ' + datalist.length + ')' }"
|
||||
:style="{
|
||||
height: 'calc((100% - 20px)' + ' / ' + datalist.length / 2 + ')',
|
||||
'background-image': 'url(' + getAssetsFile('images/vsualized/home/partbg2.png') + ')',
|
||||
}"
|
||||
>
|
||||
<div class="data-warp">
|
||||
<div class="data-pos">
|
||||
<div class="data-pos-center">
|
||||
<div class="c">
|
||||
<span class="label">{{ n.label }}</span>
|
||||
<span class="value">{{ n.value }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-bg">
|
||||
<img :src="getAssetsFile('images/vsualized/home/partbg3.png')" />
|
||||
<img :src="getAssetsFile('images/vsualized/home/' + n.icon)" class="img-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -38,12 +50,12 @@ let topTitle = ref('');
|
||||
let pos = ref('');
|
||||
|
||||
const datalist = reactive([
|
||||
{ label: '农机使用(台)', value: 8000 },
|
||||
{ label: '农药使用(吨)', value: 5000 },
|
||||
{ label: '肥料使用(吨)', value: 9000 },
|
||||
{ label: '种源使用', value: 4800 },
|
||||
{ label: '兽药(吨)', value: 10 },
|
||||
{ label: '饲料(吨)', value: 88943 },
|
||||
{ label: '农机使用(台)', value: 8000, icon: 'farmuse.png' },
|
||||
{ label: '农药使用(吨)', value: 5000, icon: 'pesticide.png' },
|
||||
{ label: '肥料使用(吨)', value: 9000, icon: 'fertilizer.png' },
|
||||
{ label: '种源使用', value: 4800, icon: 'provenance.png' },
|
||||
{ label: '兽药(吨)', value: 10, icon: 'animalm.png' },
|
||||
{ label: '饲料(吨)', value: 88943, icon: 'feeduse.png' },
|
||||
]);
|
||||
|
||||
onMounted(() => {
|
||||
@ -68,19 +80,58 @@ watch(
|
||||
);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.home-comprehensive-warp {
|
||||
.home-inputs-warp {
|
||||
height: 100%;
|
||||
.data-item-row {
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.data-item {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
width: calc((100% - 20px) / 2);
|
||||
}
|
||||
.data-warp {
|
||||
padding: 8px;
|
||||
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding-left: 20px;
|
||||
.small-bg,
|
||||
.data-pos {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
.data-pos-center {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
.pos-center {
|
||||
}
|
||||
}
|
||||
}
|
||||
.small-bg {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
position: relative;
|
||||
.img-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 38%;
|
||||
height: 38%;
|
||||
}
|
||||
}
|
||||
.data-pos {
|
||||
width: calc(100% - 54px);
|
||||
.label,
|
||||
.value {
|
||||
display: inline-block;
|
||||
@ -88,12 +139,14 @@ watch(
|
||||
}
|
||||
.label {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.value {
|
||||
color: #6cd1f9;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,13 @@ import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const chartsData = ref({
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '6%',
|
||||
top: '18%',
|
||||
containLabel: true,
|
||||
},
|
||||
color: ['#3685fe', '#41b879', '#ffd500', '#e57373'],
|
||||
title: {
|
||||
text: ' ',
|
||||
@ -21,7 +28,7 @@ const chartsData = ref({
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '赋码',
|
||||
name: ' ',
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
|
||||
@ -6,33 +6,51 @@
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<subTop title="综合数据统计" :postion="'left'"></subTop>
|
||||
<customBack top-title="综合数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<comprehensive></comprehensive>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<subTop title="土地分布数据统计" :postion="'left'"></subTop>
|
||||
<customBack top-title="土地分布数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<rolllist :items="rollDataList"></rolllist>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<subTop title="种养殖数据统计" :postion="'left'"></subTop>
|
||||
<customBack top-title="种养殖数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<plantBreedCharts></plantBreedCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<subTop title="使用投入品数据统计" :postion="'right'"></subTop>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="使用投入品数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<inputs></inputs>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<subTop title="经营主体数据统计" :postion="'right'"></subTop>
|
||||
<customBack top-title="经营主体数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<entitiesCharts></entitiesCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<subTop title="溯源赋码与扫码数据统计" :postion="'right'"></subTop>
|
||||
<customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<traceCharts></traceCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -40,7 +58,7 @@
|
||||
</baseBg>
|
||||
|
||||
<div class="home-index-top-warp">
|
||||
<div class="home-index-top">
|
||||
<div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
|
||||
<h3 class="home-title">耿马县农产品销售情况</h3>
|
||||
<div class="home-data-top">￥1284.624万</div>
|
||||
<div class="home-data-contrast">
|
||||
@ -56,7 +74,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import subTop from '@/components/subTop.vue';
|
||||
import customBack from '@/components/customBack.vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import comprehensive from './components/comprehensive.vue';
|
||||
import plantBreedCharts from './components/plantBreedCharts.vue';
|
||||
@ -98,6 +116,9 @@ let rollDataList = reactive([
|
||||
text-align: center;
|
||||
.home-index-top {
|
||||
margin: auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 28px;
|
||||
background-size: contain;
|
||||
.home-title {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
@ -114,7 +135,7 @@ let rollDataList = reactive([
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 8px;
|
||||
margin: 12px 0;
|
||||
margin: 26px 0 0 0;
|
||||
}
|
||||
.home-data-contrast {
|
||||
.tips {
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="dealer-distribution-charts">
|
||||
<custom-echart-bar :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
top: '18%',
|
||||
containLabel: true,
|
||||
},
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
barStyle: {
|
||||
barWidth: 15,
|
||||
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
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
valData: [
|
||||
{ value: 80, type: '经销商', name: '耿马镇' },
|
||||
{ value: 105, type: '经销商', name: '勐撒镇' },
|
||||
{ value: 100, type: '经销商', name: '勐永镇' },
|
||||
{ value: 125, type: '经销商', name: '孟定镇' },
|
||||
{ value: 217, type: '经销商', name: '勐简乡' },
|
||||
{ value: 200, type: '经销商', name: '贺派乡' },
|
||||
{ value: 155, type: '经销商', name: '四排山乡' },
|
||||
{ value: 80, type: '经销商', name: '芒洪乡' },
|
||||
{ value: 105, type: '经销商', name: '大兴乡' },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dealer-distribution-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="inputs-gmp-charts">
|
||||
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
||||
right: '0', // 距离左侧10%的位置
|
||||
top: 'middle', // 垂直居中
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
itemWidth: 15, // 图例标记的宽度
|
||||
itemHeight: 8, // 图例标记的高度
|
||||
textStyle: {
|
||||
fontSize: 10, // 图例文字的字体大小
|
||||
color: '#fff', // 图例文字的颜色
|
||||
},
|
||||
},
|
||||
label: {
|
||||
color: '#333',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [20, 80],
|
||||
roseType: 'area',
|
||||
center: ['40%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
valData: [
|
||||
{ value: 205, name: '耿马镇' },
|
||||
{ value: 308, name: '勐撒镇' },
|
||||
{ value: 359, name: '勐永镇' },
|
||||
{ value: 452, name: '孟定镇' },
|
||||
{ value: 388, name: '勐简乡' },
|
||||
{ value: 508, name: '贺派乡' },
|
||||
{ value: 369, name: '四排山乡' },
|
||||
{ value: 610, name: '芒洪乡' },
|
||||
{ value: 754, name: '大兴乡' },
|
||||
],
|
||||
});
|
||||
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
.inputs-gmp-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,119 @@
|
||||
<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 }">
|
||||
<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 + ')' }">
|
||||
{{ item[b] }}
|
||||
</div>
|
||||
</template>
|
||||
</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: '耿马镇', type: '吡虫啉', time: '2025.01.02', info: '经销商资质不合格' },
|
||||
{ title: '勐撒镇', type: '多菌灵', time: '2025.01.01', info: '农药成分不合格' },
|
||||
{ title: '孟定镇', type: '氯化钾', time: '2025.01.02', info: '经销商资质不合格' },
|
||||
{ title: '孟简镇', type: 'NPK 复合肥', time: '2025.01.01', info: '成分不合格' },
|
||||
{ title: '孟永镇', type: '青霉素', time: '2025.01.02', info: '经销商资质不合格' },
|
||||
{ title: '大兴乡', type: '口蹄疫疫苗', time: '2025.01.01', info: '经销商资质不完全' },
|
||||
{ title: '芒洪乡', type: '大豆种子', time: '2025.01.02', info: '种源质量不好' },
|
||||
{ title: '四排山乡', type: '番茄种子', time: '2025.01.01', info: '经销商资质不合格' },
|
||||
{ title: '贺派乡', type: '草甘膦', time: '2025.01.02', info: '农药成分不合格' },
|
||||
]);
|
||||
|
||||
const listKeys = reactive(['title', 'type', 'time', 'info']);
|
||||
const listKeysHeader = reactive({
|
||||
title: '乡/镇',
|
||||
type: '投入品种类',
|
||||
time: '时间',
|
||||
info: '案件信息',
|
||||
});
|
||||
|
||||
const classOptions = {
|
||||
singleHeight: 48,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.roll-list-land-plan {
|
||||
margin-top: 8px;
|
||||
.scroll-wrap {
|
||||
height: 80%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="monthly-use-charts">
|
||||
<custom-echart-line-line :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
|
||||
const chartsData = reactive({
|
||||
option: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '2%',
|
||||
top: '18%',
|
||||
containLabel: true,
|
||||
},
|
||||
// color: ['#3685fe', '#41b879', '#fed500'],
|
||||
title: {
|
||||
text: ' ',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
right: '0', // 距离左侧10%的位置
|
||||
top: '0', // 垂直居中
|
||||
itemWidth: 15, // 图例标记的宽度
|
||||
itemHeight: 8, // 图例标记的高度
|
||||
textStyle: {
|
||||
fontSize: 10, // 图例文字的字体大小
|
||||
color: '#fff', // 图例文字的颜色
|
||||
},
|
||||
data: ['农药', '肥料', '种源', '兽药', '农机'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: ' ',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#BAE7FF',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(186, 231, 255, 0.2)',
|
||||
type: 'dashed',
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'white',
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '农药',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600, 200, 300, 150],
|
||||
},
|
||||
{
|
||||
name: '肥料',
|
||||
type: 'line',
|
||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 600, 158, 320],
|
||||
},
|
||||
{
|
||||
name: '种源',
|
||||
type: 'line',
|
||||
data: [120, 516, 238, 453, 368, 519, 432, 128, 578, 120, 578, 324],
|
||||
},
|
||||
{
|
||||
name: '兽药',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600, 565, 134, 256],
|
||||
},
|
||||
{
|
||||
name: '农机',
|
||||
type: 'line',
|
||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158, 326, 456, 189],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.monthly-use-charts {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,52 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'inputs'">
|
||||
<baseBg :name-val="'inputs'" top-title="投入品管理系统">
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item"></div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="投入品分类统计" :top-postion="'left'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="投入品生产企业统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<inputsGmp></inputsGmp>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="种养殖数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<landbreedCharts></landbreedCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<!-- <div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div> -->
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="案件次数" :top-postion="'right'">
|
||||
<template #back> </template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="投入品月度使用统计" :top-postion="'right'">
|
||||
<template #back>
|
||||
<monthlyuseCharts></monthlyuseCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="投入品经销商分布" :top-postion="'right'">
|
||||
<template #back>
|
||||
<dealerDistributionCharts></dealerDistributionCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -21,6 +55,12 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import customBack from '@/components/customBack.vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import inputsGmp from './components/inputsGmp.vue';
|
||||
import landbreedCharts from './components/landbreedCharts.vue';
|
||||
import monthlyuseCharts from './components/monthlyuseCharts.vue';
|
||||
import dealerDistributionCharts from './components/dealerDistributionCharts.vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
@ -34,7 +74,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +86,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -69,6 +69,6 @@ onMounted(() => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.distribution-charts {
|
||||
height: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,71 +1,113 @@
|
||||
<template>
|
||||
<div class="land-circulation-warp">
|
||||
<el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" :highlight-current-row="false">
|
||||
<el-table-column prop="title" label="乡/镇" />
|
||||
<el-table-column prop="demandArea" label="需求面积" />
|
||||
<el-table-column prop="dealArea" label="成交面积" />
|
||||
<el-table-column prop="maxPrice" label="最高价" />
|
||||
<el-table-column prop="minPrice" label="最低价" />
|
||||
</el-table>
|
||||
<div class="demo roll-list-circulation" 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 }">
|
||||
<template v-for="(b, indexb) in listKeys" :key="indexb">
|
||||
<div class="item-td" :class="{ 'td-title': b == 'title' }" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
|
||||
{{ item[b] }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</vue3ScrollSeamless>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
const tableData = ref([
|
||||
{ title: '耿马镇', demandArea: '103.1', dealArea: '84.2', maxPrice: '182.45', minPrice: '1489.5' },
|
||||
{ title: '勐撒镇', demandArea: '159.2', dealArea: '58.6', maxPrice: '1569', minPrice: '1387' },
|
||||
{ title: '孟定镇', demandArea: '188.3', dealArea: '102.6', maxPrice: '1468', minPrice: '1248' },
|
||||
{ title: '孟简镇', demandArea: '98.7', dealArea: '23.5', maxPrice: '1839', minPrice: '1536' },
|
||||
{ title: '孟永镇', demandArea: '165.5', dealArea: '123.5', maxPrice: '1883', minPrice: '1687' },
|
||||
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: '耿马镇', demandArea: 103.1, dealArea: '84.2', maxPrice: '182.45', minPrice: '1489.5' },
|
||||
{ title: '勐撒镇', demandArea: 159.2, dealArea: '58.6', maxPrice: '1569', minPrice: '1387' },
|
||||
{ title: '孟定镇', demandArea: 188.3, dealArea: '102.6', maxPrice: '1468', minPrice: '1248' },
|
||||
{ title: '孟简镇', demandArea: 98.7, dealArea: '23.5', maxPrice: '1839', minPrice: '1536' },
|
||||
{ title: '孟永镇', demandArea: 165.5, dealArea: '123.5', maxPrice: '1883', minPrice: '1687' },
|
||||
]);
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
if (rowIndex === 1) {
|
||||
return 'warning-row';
|
||||
} else if (rowIndex === 3) {
|
||||
return 'success-row';
|
||||
}
|
||||
return '';
|
||||
|
||||
const listKeys = reactive(['title', 'demandArea', 'dealArea', 'maxPrice', 'minPrice']);
|
||||
const listKeysHeader = reactive({
|
||||
title: '乡/镇',
|
||||
demandArea: '需求面积',
|
||||
dealArea: '成交面积',
|
||||
maxPrice: '最高价',
|
||||
minPrice: '最高价',
|
||||
});
|
||||
|
||||
const classOptions = {
|
||||
singleHeight: 48,
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-circulation-warp {
|
||||
padding: 16px 0;
|
||||
height: 90%;
|
||||
.el-table .warning-row {
|
||||
--el-table-tr-bg-color: var(--el-color-warning-light-9);
|
||||
}
|
||||
.el-table .success-row {
|
||||
--el-table-tr-bg-color: var(--el-color-success-light-9);
|
||||
}
|
||||
::v-deep() {
|
||||
tbody tr {
|
||||
background: transparent !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
tbody td {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
.el-table {
|
||||
background: transparent !important;
|
||||
}
|
||||
.el-table__inner-wrapper::before {
|
||||
display: none !important;
|
||||
}
|
||||
th {
|
||||
background: #144482 !important;
|
||||
color: #fff !important;
|
||||
border-bottom: none !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
tr td {
|
||||
padding: 5px 0 !important;
|
||||
font-size: 12px;
|
||||
<style scoped lang="scss">
|
||||
.roll-list-circulation {
|
||||
margin-top: 8px;
|
||||
.scroll-wrap {
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
margin: 4px auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: transparent !important; /* 设置你想要的 hover 颜色 */
|
||||
cursor: pointer;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-warp {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
.item-td {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
|
||||
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<div class="demo roll-list-patrol" 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 }">
|
||||
<template v-for="(b, indexb) in listKeys" :key="indexb">
|
||||
<div class="item-td" :class="item.status == 1 ? 'td-title' : 'td-warn'" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">
|
||||
<span v-if="b != 'status'">
|
||||
{{ item[b] }}
|
||||
</span>
|
||||
<el-icon v-else>
|
||||
<Bell></Bell>
|
||||
</el-icon>
|
||||
</div>
|
||||
</template>
|
||||
</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: '耿马镇', waitNum: '24', violation: '14', status: 1 },
|
||||
{ title: '勐撒镇', waitNum: '16', violation: '14', status: 1 },
|
||||
{ title: '孟定镇', waitNum: '8', violation: '24', status: 0 },
|
||||
{ title: '孟简镇', waitNum: '9', violation: '8', status: 1 },
|
||||
{ title: '孟永镇', waitNum: '14', violation: '15', status: 1 },
|
||||
]);
|
||||
|
||||
const listKeys = reactive(['title', 'waitNum', 'violation', 'status']);
|
||||
const listKeysHeader = reactive({
|
||||
title: '乡/镇',
|
||||
waitNum: '待巡查',
|
||||
violation: '违规案件',
|
||||
status: '预警',
|
||||
});
|
||||
|
||||
const classOptions = {
|
||||
singleHeight: 48,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.roll-list-patrol {
|
||||
margin-top: 8px;
|
||||
.scroll-wrap {
|
||||
height: 80%;
|
||||
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;
|
||||
}
|
||||
|
||||
&.td-warn {
|
||||
color: red !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-warp {
|
||||
display: inline-flex;
|
||||
justify-content: space-around;
|
||||
.item-td {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -0,0 +1,114 @@
|
||||
<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 }">
|
||||
<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 + ')' }">
|
||||
{{ item[b] }}
|
||||
</div>
|
||||
</template>
|
||||
</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: '耿马镇', area: '540', chg: '0.5%' },
|
||||
{ title: '勐撒镇', area: '1210', chg: '0.7%' },
|
||||
{ title: '孟定镇', area: '188.3', chg: '-0.8%' },
|
||||
{ title: '孟简镇', area: '98.7', chg: '1.2%' },
|
||||
{ title: '孟永镇', area: '165.5', chg: '0.9%' },
|
||||
]);
|
||||
|
||||
const listKeys = reactive(['title', 'area', 'chg']);
|
||||
const listKeysHeader = reactive({
|
||||
title: '乡/镇',
|
||||
area: '面积',
|
||||
chg: '涨跌幅',
|
||||
});
|
||||
|
||||
const classOptions = {
|
||||
singleHeight: 48,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.roll-list-land-plan {
|
||||
margin-top: 8px;
|
||||
.scroll-wrap {
|
||||
height: 80%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.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>
|
||||
@ -113,6 +113,6 @@ const chartsData = reactive({
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-area-charts {
|
||||
height: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5,15 +5,25 @@
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<subTop title="土地资源分布" :postion="'left'"></subTop>
|
||||
<customBack top-title="土地资源分布" :top-postion="'left'">
|
||||
<template #back>
|
||||
<distributionCharts></distributionCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<subTop title="土地流转信息" :postion="'left'"></subTop>
|
||||
<customBack top-title="土地流转信息" :top-postion="'left'">
|
||||
<template #back>
|
||||
<landCirculation></landCirculation>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<subTop title="土地使用巡查案件" :postion="'left'"></subTop>
|
||||
<customBack top-title="土地使用巡查案件" :top-postion="'left'">
|
||||
<template #back>
|
||||
<landPatrol></landPatrol>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
@ -21,15 +31,25 @@
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<div class="right-charts-item">
|
||||
<subTop title="农用地数据统计" :postion="'right'"></subTop>
|
||||
<customBack top-title="农用地数据统计" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landuseCharts></landuseCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<subTop title="年度农用地规划面积" :postion="'right'"></subTop>
|
||||
<customBack top-title="年度农用地规划面积" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landPlan></landPlan>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<subTop title="各地农用地利用面积" :postion="'right'"></subTop>
|
||||
<customBack top-title="各地农用地利用面积" :top-postion="'right'">
|
||||
<template #back>
|
||||
<landareaCharts></landareaCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -39,12 +59,14 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import subTop from '@/components/subTop.vue';
|
||||
import customBack from '@/components/customBack.vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import distributionCharts from './components/distributionCharts.vue';
|
||||
import landuseCharts from './components/landuseCharts.vue';
|
||||
import landareaCharts from './components/landareaCharts.vue';
|
||||
import landCirculation from './components/landCirculation.vue';
|
||||
import landPlan from './components/landPlan.vue';
|
||||
import landPatrol from './components/landPatrol.vue';
|
||||
import { reactive } from 'vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'plant'">
|
||||
<baseBg :name-val="'plant'" top-title="智慧种植管理系统">
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
@ -10,9 +10,9 @@
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<!-- <div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div> -->
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -34,7 +34,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +46,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'trace'">
|
||||
<baseBg :name-val="'trace'" top-title="全程溯源管理系统">
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
@ -10,9 +10,9 @@
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<!-- <div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div> -->
|
||||
<div class="right-charts-item"></div>
|
||||
<div class="right-charts-item"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -34,7 +34,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +46,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.right-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user