数据大屏土地资源
This commit is contained in:
lzc
parent
2def02238f
commit
428d93f6fc
70
main/src/components/custom-echart-line-line/index.vue
Normal file
70
main/src/components/custom-echart-line-line/index.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<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: 'CustomEchartLineLine',
|
||||
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 optionVal = reactive({});
|
||||
|
||||
watchEffect(() => {
|
||||
props.option && initCharts();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.size,
|
||||
() => {
|
||||
resize();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
function initCharts() {
|
||||
if (props.option) {
|
||||
Object.assign(optionVal, cloneDeep(props.option));
|
||||
}
|
||||
setOptions(props.option);
|
||||
resize();
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
return { chartRef };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
120
main/src/components/custom-echart-pictorial-bar/index.vue
Normal file
120
main/src/components/custom-echart-pictorial-bar/index.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<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: 'customEchartPictorialBar',
|
||||
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({
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '6%',
|
||||
top: '11%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
formatter: '{b}',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
barCategoryGap: '40%',
|
||||
barWidth: '100%',
|
||||
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
|
||||
data: [],
|
||||
labelLine: { show: true },
|
||||
z: 10,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#000001', // 起始颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#0175b6', // 结束颜色
|
||||
},
|
||||
],
|
||||
global: false, // 默认为 false
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
formatter: '{c}',
|
||||
color: 'white',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
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;
|
||||
setOptions(option);
|
||||
resize();
|
||||
getInstance()?.off('click', onClick);
|
||||
getInstance()?.on('click', onClick);
|
||||
}
|
||||
|
||||
function onClick(params) {
|
||||
emit('click', params);
|
||||
}
|
||||
|
||||
return { chartRef };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -8,6 +8,8 @@ import CustomEchartPie from './custom-echart-pie';
|
||||
import CustomEchartLine from './custom-echart-line';
|
||||
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';
|
||||
|
||||
export {
|
||||
SvgIcon,
|
||||
@ -20,4 +22,6 @@ export {
|
||||
CustomEchartLine,
|
||||
CustomEchartMixin,
|
||||
CustomEchartBarLine,
|
||||
customEchartPictorialBar,
|
||||
CustomEchartLineLine,
|
||||
};
|
||||
|
||||
@ -8,7 +8,9 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
BaseBg: typeof import('./src/components/baseBg.vue')['default']
|
||||
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']
|
||||
CustomCard: typeof import('./src/components/CustomCard.vue')['default']
|
||||
CustomSelect: typeof import('./src/components/CustomSelect.vue')['default']
|
||||
GridSelect: typeof import('./src/components/GridSelect.vue')['default']
|
||||
|
||||
@ -8,18 +8,30 @@
|
||||
<template>
|
||||
<el-config-provider :size="size" :locale="zhCn">
|
||||
<router-view />
|
||||
<currentTime ref="apptime"></currentTime>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup name="app">
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref, onMounted, onUnmounted } from 'vue';
|
||||
import { useSettingStore } from '@/store/modules/setting';
|
||||
// 配置element中文
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
import currentTime from '@/components/currentTime.vue';
|
||||
|
||||
const SettingStore = useSettingStore();
|
||||
// 配置全局组件大小
|
||||
const size = computed(() => SettingStore.themeConfig.globalComSize);
|
||||
|
||||
let apptime = ref(null);
|
||||
|
||||
onMounted(() => {
|
||||
apptime.value && apptime.value.startTime();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
apptime.value && apptime.value.chearTime();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@ -1,7 +1,16 @@
|
||||
<template>
|
||||
<div class="data-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/screenbg.png') + ')' }">
|
||||
<div class="chart-content">
|
||||
<div class="top">头部</div>
|
||||
<div class="top">
|
||||
<slot v-if="$slots.top" name="top"></slot>
|
||||
<div v-else class="top-content-warp">
|
||||
<div class="top-left"></div>
|
||||
<div class="top-content">
|
||||
{{ topTitle }}
|
||||
</div>
|
||||
<!-- <div class="top-right">{{ currentTime }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<slot name="center"></slot>
|
||||
</div>
|
||||
@ -25,7 +34,7 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive, onMounted, watch } from 'vue';
|
||||
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useApp } from '@/hooks';
|
||||
const router = useRouter();
|
||||
@ -34,6 +43,10 @@ const props = defineProps({
|
||||
type: String,
|
||||
default: 'home',
|
||||
},
|
||||
topTitle: {
|
||||
type: String,
|
||||
default: '系统',
|
||||
},
|
||||
});
|
||||
|
||||
const navlist = ref([
|
||||
@ -93,6 +106,35 @@ div {
|
||||
}
|
||||
.top {
|
||||
height: 55px;
|
||||
.top-content-warp {
|
||||
width: 100%;
|
||||
.top-left,
|
||||
.top-content,
|
||||
.top-right {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.top-content {
|
||||
width: calc(100% - 400px);
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
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;
|
||||
}
|
||||
.top-left {
|
||||
width: 200px;
|
||||
}
|
||||
.top-right {
|
||||
text-align: right;
|
||||
width: 200px;
|
||||
color: #add8f1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 98px;
|
||||
@ -109,7 +151,7 @@ div {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
transform: skewX(-13deg);
|
||||
transform: skewX(-8deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
-webkit-background-clip: text;
|
||||
|
||||
@ -127,7 +169,7 @@ div {
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: calc(100% - 153px);
|
||||
height: calc(100% - 156px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
27
sub-government-screen-service/src/components/centerMap.vue
Normal file
27
sub-government-screen-service/src/components/centerMap.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="map-center-warp">
|
||||
<img :src="getAssetsFile('images/gmmap.png')" class="map-img" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map-center-warp {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.map-img {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 50%;
|
||||
object-fit: contain;
|
||||
transform: translateX(-50%);
|
||||
max-width: 1000px;
|
||||
max-height: 1000px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
57
sub-government-screen-service/src/components/currentTime.vue
Normal file
57
sub-government-screen-service/src/components/currentTime.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="current-time-warp">{{ currentTime }}</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
|
||||
let currentTime = ref('');
|
||||
|
||||
const formatDateTime = () => {
|
||||
const now = new Date();
|
||||
// 获取各部分值
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0'); // JavaScript中月份从0开始，所以需要加1
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
|
||||
// 星期几，注意返回的是0（周日）到6（周六）
|
||||
const weekDay = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
|
||||
const hour = String(now.getHours()).padStart(2, '0');
|
||||
const minute = String(now.getMinutes()).padStart(2, '0');
|
||||
const second = String(now.getSeconds()).padStart(2, '0');
|
||||
|
||||
// 格式化输出
|
||||
const formattedDate = `${year}-${month}-${day}\u00A0\u00A0\u00A0 ${weekDay}\u00A0\u00A0\u00A0 ${hour}:${minute}:${second}`;
|
||||
|
||||
// console.log(formattedDate);
|
||||
return formattedDate;
|
||||
};
|
||||
|
||||
let interval = ref(null);
|
||||
|
||||
const startTime = () => {
|
||||
interval.value = setInterval(() => {
|
||||
currentTime.value = formatDateTime();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const chearTime = () => {
|
||||
if (interval.value) {
|
||||
interval.value = null;
|
||||
clearInterval(interval.value);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
startTime,
|
||||
chearTime,
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.current-time-warp {
|
||||
position: fixed;
|
||||
right: 16px;
|
||||
top: 32px;
|
||||
color: #add8f1;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@ -33,14 +33,14 @@ const plantBreed = reactive({
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [60, 80],
|
||||
radius: [20, 80],
|
||||
roseType: 'area',
|
||||
center: ['40%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
borderRadius: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -33,14 +33,14 @@ const plantBreed = ref({
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: [60, 80],
|
||||
radius: [20, 80],
|
||||
roseType: 'area',
|
||||
center: ['40%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: {
|
||||
borderRadius: 20,
|
||||
borderRadius: 2,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
@ -1,29 +1,15 @@
|
||||
<template>
|
||||
<!-- <div ref="scrollContainer" class="scroll-container" style="height: 90%"> -->
|
||||
<!-- <div
|
||||
ref="scrollContent"
|
||||
class="scroll-content"
|
||||
:style="{ transform: `translateY(${topPosition}px)`, transition: `transform ${transitionDuration}ms linear` }"
|
||||
>
|
||||
<div v-for="(item, index) in items" :key="index" class="list-item">
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-l">{{ item }}</div>
|
||||
<div class="list-item-r">
|
||||
{{ '0' + (index + 1) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="demo" style="height: 90%">
|
||||
<div class="demo roll-list" style="height: 90%">
|
||||
<vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list">
|
||||
<!-- <ul class="ui-wrap">
|
||||
<li class="li-item" v-for="(item, i) of list" :key="i">
|
||||
<p>{{ item.title }}</p>
|
||||
</li>
|
||||
</ul> -->
|
||||
<div v-for="(item, index) in items" :key="index" class="list-item">
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-l">{{ item.title }}</div>
|
||||
<div class="list-item-l">
|
||||
<div class="item-top">
|
||||
<span class="label"> {{ item.title || '--' }}</span>
|
||||
<span class="value"> {{ item.value || '0' }}</span>
|
||||
</div>
|
||||
<el-progress :percentage="50" :show-text="false" :stroke-width="3" color="#6cd1f9" />
|
||||
</div>
|
||||
<div class="list-item-r">
|
||||
{{ '0' + (index + 1) }}
|
||||
</div>
|
||||
@ -52,39 +38,53 @@ const classOptions = {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.roll-list {
|
||||
.scroll-wrap {
|
||||
height: 200px;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
|
||||
// border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
|
||||
line-height: 36px;
|
||||
.list-item-content {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-around;
|
||||
position: relative;
|
||||
.list-item-l,
|
||||
.list-item-r {
|
||||
color: #fff;
|
||||
}
|
||||
.list-item-l {
|
||||
width: calc(100% - 50px);
|
||||
padding-right: 8px;
|
||||
width: calc(100% - 0px);
|
||||
.item-top {
|
||||
width: 100%;
|
||||
line-height: 16px;
|
||||
.label,
|
||||
.value {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
.value {
|
||||
font-size: 10px;
|
||||
color: #6cd1f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-item-r {
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #6cd1f9;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -99,4 +99,11 @@ const classOptions = {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'home'">
|
||||
<baseBg ref="homebase" :name-val="'home'">
|
||||
<template #top> </template>
|
||||
<template #center>
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
@ -17,21 +18,8 @@
|
||||
<plantBreedCharts></plantBreedCharts>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="text-align: center; position: relative">
|
||||
<img
|
||||
:src="getAssetsFile('images/gmmap.png')"
|
||||
style="
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
left: 50%;
|
||||
object-fit: cover;
|
||||
transform: translateX(-50%);
|
||||
max-width: 1000px;
|
||||
max-height: 1000px;
|
||||
"
|
||||
/>
|
||||
<el-col :span="12">
|
||||
<centerMap></centerMap>
|
||||
</el-col>
|
||||
<el-col :span="6" class="right-charts">
|
||||
<subTop title="使用投入品数据统计" :postion="'right'"></subTop>
|
||||
@ -50,11 +38,26 @@
|
||||
</el-row>
|
||||
</template>
|
||||
</baseBg>
|
||||
|
||||
<div class="home-index-top-warp">
|
||||
<div class="home-index-top">
|
||||
<h3 class="home-title">耿马县农产品销售情况</h3>
|
||||
<div class="home-data-top">￥1284.624万</div>
|
||||
<div class="home-data-contrast">
|
||||
<span class="tips">同比去年</span>
|
||||
<span class="value">￥4684.629</span>
|
||||
<el-icon style="vertical-align: middle" class="contrast-icon" color="#6cd1f9">
|
||||
<TopRight />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import subTop from '@/components/subTop.vue';
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import comprehensive from './components/comprehensive.vue';
|
||||
import plantBreedCharts from './components/plantBreedCharts.vue';
|
||||
import entitiesCharts from './components/entitiesCharts.vue';
|
||||
@ -62,20 +65,71 @@ import inputs from './components/inputs.vue';
|
||||
import traceCharts from './components/traceCharts.vue';
|
||||
import rolllist from './components/rolllist.vue';
|
||||
import { isEmpty, getAssetsFile } from '@/utils';
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ref, reactive, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
let rollDataList = reactive([
|
||||
{ title: '数据 1' },
|
||||
{ title: '数据 2' },
|
||||
{ title: '数据 3' },
|
||||
{ title: '数据 4' },
|
||||
{ title: '数据 5' },
|
||||
{ title: '数据 6' },
|
||||
{ title: '勐腊镇', value: 533.1 },
|
||||
{ title: '孟定镇', value: 1069.2 },
|
||||
{ title: '孟永镇', value: 411.8 },
|
||||
{ title: '耿马镇', value: 429.4 },
|
||||
{ title: '大兴乡', value: 162.7 },
|
||||
{ title: '勐简乡', value: 2309.9 },
|
||||
// 更多项...
|
||||
]);
|
||||
|
||||
// const homebase = ref(null);
|
||||
|
||||
// onMounted(() => {
|
||||
// homebase.value && homebase.value.startTime();
|
||||
// });
|
||||
|
||||
// onUnmounted(() => {
|
||||
// homebase.value && homebase.value.chearTime();
|
||||
// });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
.home-index-top-warp {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
.home-index-top {
|
||||
margin: auto;
|
||||
.home-title {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
transform: skewX(-10deg);
|
||||
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
|
||||
-webkit-background-clip: text;
|
||||
color: #fff;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: -2px 0 0 1px #add8f1;
|
||||
}
|
||||
.home-data-top {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
letter-spacing: 8px;
|
||||
margin: 12px 0;
|
||||
}
|
||||
.home-data-contrast {
|
||||
.tips {
|
||||
font-size: 10px;
|
||||
color: #6cd1f9;
|
||||
}
|
||||
.value {
|
||||
padding: 0 8px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="distribution-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.6, name: '耿马镇' },
|
||||
{ value: 308.7, name: '勐撒镇' },
|
||||
{ value: 359.6, name: '勐永镇' },
|
||||
{ value: 452.6, name: '孟定镇' },
|
||||
{ value: 388.9, name: '勐简乡' },
|
||||
{ value: 508.7, name: '贺派乡' },
|
||||
{ value: 369.5, name: '四排山乡' },
|
||||
{ value: 610.8, name: '芒洪乡' },
|
||||
{ value: 754.3, 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>
|
||||
.distribution-charts {
|
||||
height: 90%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,71 @@
|
||||
<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>
|
||||
</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' },
|
||||
]);
|
||||
const tableRowClassName = ({ row, rowIndex }) => {
|
||||
if (rowIndex === 1) {
|
||||
return 'warning-row';
|
||||
} else if (rowIndex === 3) {
|
||||
return 'success-row';
|
||||
}
|
||||
return '';
|
||||
};
|
||||
</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;
|
||||
}
|
||||
.el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: transparent !important; /* 设置你想要的 hover 颜色 */
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="land-area-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: '3%',
|
||||
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: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
||||
},
|
||||
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],
|
||||
},
|
||||
{
|
||||
name: '勐撒镇',
|
||||
type: 'line',
|
||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
|
||||
},
|
||||
{
|
||||
name: '勐永镇',
|
||||
type: 'line',
|
||||
data: [120, 516, 238, 453, 368, 519, 432, 128, 578],
|
||||
},
|
||||
{
|
||||
name: '孟定镇',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
{
|
||||
name: '勐简乡',
|
||||
type: 'line',
|
||||
data: [485, 182, 353, 265, 290, 354, 215, 200, 158],
|
||||
},
|
||||
{
|
||||
name: '贺派乡',
|
||||
type: 'line',
|
||||
data: [386, 182, 191, 332, 290, 330, 690, 510, 563],
|
||||
},
|
||||
{
|
||||
name: '四排山乡',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
{
|
||||
name: '芒洪乡',
|
||||
type: 'line',
|
||||
data: [543, 182, 191, 106, 290, 330, 310, 510, 762],
|
||||
},
|
||||
{
|
||||
name: '大兴乡',
|
||||
type: 'line',
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 500, 600],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-area-charts {
|
||||
height: 90%;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="land-use-charts">
|
||||
<custom-echart-pictorial-bar :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',
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: ' ',
|
||||
// data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#BAE7FF',
|
||||
width: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
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',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
valData: [
|
||||
{ value: 205.6 },
|
||||
{ value: 308.7 },
|
||||
{ value: 359.6 },
|
||||
{ value: 452.6 },
|
||||
{ value: 388.9 },
|
||||
{ value: 508.7 },
|
||||
{ value: 369.5 },
|
||||
{ value: 610.8 },
|
||||
{ value: 754.3 },
|
||||
],
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.land-use-charts {
|
||||
height: 90%;
|
||||
}
|
||||
</style>
|
||||
@ -1,18 +1,36 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<baseBg :name-val="'land'">
|
||||
<baseBg :name-val="'land'" 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">
|
||||
<subTop title="土地资源分布" :postion="'left'"></subTop>
|
||||
<distributionCharts></distributionCharts>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<subTop title="土地流转信息" :postion="'left'"></subTop>
|
||||
<landCirculation></landCirculation>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<subTop title="土地使用巡查案件" :postion="'left'"></subTop>
|
||||
</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">
|
||||
<subTop title="农用地数据统计" :postion="'right'"></subTop>
|
||||
<landuseCharts></landuseCharts>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<subTop title="年度农用地规划面积" :postion="'right'"></subTop>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<subTop title="各地农用地利用面积" :postion="'right'"></subTop>
|
||||
<landareaCharts></landareaCharts>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
@ -21,6 +39,13 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import baseBg from '@/components/baseBg.vue';
|
||||
import subTop from '@/components/subTop.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 { reactive } from 'vue';
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
@ -34,7 +59,6 @@ import baseBg from '@/components/baseBg.vue';
|
||||
.left-charts-item {
|
||||
width: 100%;
|
||||
height: calc((100% - 30px) / 3);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
@ -47,7 +71,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