feat:土地
This commit is contained in:
parent
e837ae5612
commit
c96914ca17
@ -1,6 +1,6 @@
|
|||||||
# 开发环境
|
# 开发环境
|
||||||
VITE_PORT = 9000
|
VITE_PORT = 9000
|
||||||
VITE_APP_NAME = 'digital-agriculture-screen'
|
VITE_APP_NAME = 'digital-agriculture-screen'
|
||||||
VITE_APP_TITLE = '政务云数据大屏可视化'
|
VITE_APP_TITLE = '政务云数字农业智慧大屏'
|
||||||
VITE_APP_BASE_API = '/apis'
|
VITE_APP_BASE_API = '/apis'
|
||||||
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
VITE_APP_BASE_URL = 'http://192.168.18.99:8080'
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
# 生产环境
|
# 生产环境
|
||||||
VITE_APP_NAME = 'digital-agriculture-screen'
|
VITE_APP_NAME = 'digital-agriculture-screen'
|
||||||
VITE_APP_TITLE = '政务云数据大屏可视化'
|
VITE_APP_TITLE = '政务云数字农业智慧大屏'
|
||||||
VITE_APP_BASE_API = '/apis'
|
VITE_APP_BASE_API = '/apis'
|
||||||
VITE_APP_BASE_URL = ''
|
VITE_APP_BASE_URL = ''
|
||||||
@ -1,5 +1,5 @@
|
|||||||
# 测试环境
|
# 测试环境
|
||||||
VITE_APP_NAME = 'digital-agriculture-screen'
|
VITE_APP_NAME = 'digital-agriculture-screen'
|
||||||
VITE_APP_TITLE = '政务云数据大屏可视化'
|
VITE_APP_TITLE = '政务云数字农业智慧大屏'
|
||||||
VITE_APP_BASE_API = '/apis'
|
VITE_APP_BASE_API = '/apis'
|
||||||
VITE_APP_BASE_URL = ''
|
VITE_APP_BASE_URL = ''
|
||||||
@ -5,7 +5,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
<link rel="icon" type="image/svg+xml" href="/logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>数据大屏</title>
|
<title>政务云数字农业智慧大屏</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -91,11 +91,11 @@ export default {
|
|||||||
colorStops: [
|
colorStops: [
|
||||||
{
|
{
|
||||||
offset: 0,
|
offset: 0,
|
||||||
color: hexToRGBA(color, 0.2),
|
color: hexToRGBA(color, 1),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
offset: 1,
|
offset: 1,
|
||||||
color: hexToRGBA(color, 1),
|
color: hexToRGBA(color, 0.2),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,19 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="go-tables-rank" :style="`color: ${textColor}`">
|
<div :class="`custom-rank-list rank-${type}`" :style="`color: ${textColor}`">
|
||||||
<div v-for="(item, i) in status.rows" :key="item.toString() + item.scroll" class="row-item" :style="`height: ${status.heights[i]}px;`">
|
<div v-for="(item, i) in status.rows" :key="item.toString() + item.scroll" class="row-item" :style="`height: ${status.heights[i]}px;`">
|
||||||
<div class="ranking-info">
|
<div class="ranking-info">
|
||||||
<div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">No.{{ item.ranking }}</div>
|
<div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">{{ indexPrefix }}{{ item.ranking }}</div>
|
||||||
<div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
|
<div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
|
||||||
<div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
|
<div v-if="type === 'column'" class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
|
||||||
{{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
|
{{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
|
||||||
{{ unit }}
|
{{ unit }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ranking-column" :style="`border-color: ${borderColor}`">
|
<div class="ranking-column" :style="`border-color: ${borderColor ?? 'none'}`">
|
||||||
<div class="inside-column" :style="`width: ${item.percent}%;background-color: ${color}`">
|
<div class="inside-column" :style="`width: ${item.percent}%;background: ${color};borderRadius: ${borderRadius};`">
|
||||||
<div class="shine" />
|
<div class="shine" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="type === 'row'" class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
|
||||||
|
{{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
|
||||||
|
{{ unit }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -28,7 +32,9 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { w, h } = toRefs(props.chartConfig.attr);
|
const { w, h } = toRefs(props.chartConfig.attr);
|
||||||
const { rowNum, unit, color, textColor, borderColor, indexFontSize, leftFontSize, rightFontSize } = toRefs(props.chartConfig.option);
|
const { type, rowNum, unit, height, color, textColor, borderColor, borderRadius, indexPrefix, indexFontSize, leftFontSize, rightFontSize } = toRefs(
|
||||||
|
props.chartConfig.option
|
||||||
|
);
|
||||||
|
|
||||||
const status = reactive({
|
const status = reactive({
|
||||||
mergedConfig: props.chartConfig.option,
|
mergedConfig: props.chartConfig.option,
|
||||||
@ -91,7 +97,7 @@ const calcHeights = (onresize = false) => {
|
|||||||
|
|
||||||
const animation = async (start = false) => {
|
const animation = async (start = false) => {
|
||||||
let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status;
|
let { avgHeight, animationIndex, mergedConfig, rowsData, updater } = status;
|
||||||
const { waitTime, carousel, rowNum } = mergedConfig;
|
const { isAnimation, waitTime, carousel, rowNum } = mergedConfig;
|
||||||
const rowLength = rowsData.length;
|
const rowLength = rowsData.length;
|
||||||
if (rowNum >= rowLength) return;
|
if (rowNum >= rowLength) return;
|
||||||
if (start) {
|
if (start) {
|
||||||
@ -104,6 +110,7 @@ const animation = async (start = false) => {
|
|||||||
status.rows = rows.slice(0, rowNum + 1);
|
status.rows = rows.slice(0, rowNum + 1);
|
||||||
status.heights = new Array(rowLength).fill(avgHeight);
|
status.heights = new Array(rowLength).fill(avgHeight);
|
||||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||||
|
if (!isAnimation) return;
|
||||||
if (updater !== status.updater) return;
|
if (updater !== status.updater) return;
|
||||||
status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
|
status.heights.splice(0, animationNum, ...new Array(animationNum).fill(0));
|
||||||
animationIndex += animationNum;
|
animationIndex += animationNum;
|
||||||
@ -177,7 +184,7 @@ onUnmounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.go-tables-rank {
|
.custom-rank-list {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -186,12 +193,11 @@ onUnmounted(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
flex-direction: column;
|
flex-direction: v-bind('type');
|
||||||
}
|
}
|
||||||
.ranking-info {
|
.ranking-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
.rank {
|
.rank {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
@ -201,18 +207,17 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ranking-column {
|
.ranking-column {
|
||||||
margin-top: 5px;
|
width: 100%;
|
||||||
border-bottom: 2px solid #1370fb80;
|
|
||||||
.inside-column {
|
.inside-column {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
height: 6px;
|
height: v-bind('height+"px"');
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
}
|
}
|
||||||
.shine {
|
.shine {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: v-bind('(height/2)+"px"');
|
||||||
left: 0%;
|
left: 0%;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
@ -221,6 +226,28 @@ onUnmounted(() => {
|
|||||||
animation: shine 3s ease-in-out infinite alternate;
|
animation: shine 3s ease-in-out infinite alternate;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.rank-column {
|
||||||
|
.ranking-info {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ranking-column {
|
||||||
|
margin-top: 5px;
|
||||||
|
border-bottom: 2px solid v-bind('borderColor');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.rank-row {
|
||||||
|
.row-item {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.ranking-info {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.ranking-value {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes shine {
|
@keyframes shine {
|
||||||
|
|||||||
@ -1,22 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="_contaioner">
|
<section class="base-laytout">
|
||||||
<custom-scroll-title class="header_titles" />
|
<custom-scroll-title class="base-laytout-header" />
|
||||||
<section class="_content">
|
<section class="base-laytout-main">
|
||||||
<router-view />
|
<router-view />
|
||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
._contaioner {
|
.base-laytout {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: url('../assets/images/basic/containerBG.png') no-repeat center;
|
background:
|
||||||
background-size: 100% 100%;
|
url('../assets/images/basic/containerBG.png') no-repeat center 100%,
|
||||||
.header_titles {
|
url('@/assets/images/basic/containerBotBG.png') no-repeat bottom center;
|
||||||
|
&-header {
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
._content {
|
&-main {
|
||||||
height: calc(100vh - 60px);
|
height: calc(100vh - 60px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,14 +1,31 @@
|
|||||||
|
import Layout from '@/layouts/index.vue';
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
{
|
{
|
||||||
path: '/scrollBoard',
|
path: '/demo',
|
||||||
|
name: 'layout',
|
||||||
|
component: Layout,
|
||||||
|
redirect: '/demo/scrollBoard',
|
||||||
|
meta: { title: '案例', icon: 'document' },
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/demo/scrollBoard',
|
||||||
name: 'scrollBoard',
|
name: 'scrollBoard',
|
||||||
component: () => import('@/views/demo/scrollBoard.vue'),
|
component: () => import('@/views/demo/scrollBoard.vue'),
|
||||||
meta: { title: '轮播列表', icon: 'document' },
|
meta: { title: '轮播列表', icon: 'document' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/rank',
|
path: '/demo/rank',
|
||||||
name: 'rank',
|
name: 'rank',
|
||||||
component: () => import('@/views/demo/rank.vue'),
|
component: () => import('@/views/demo/rank.vue'),
|
||||||
meta: { title: '滚动排名列表', icon: 'document' },
|
meta: { title: '滚动排名列表', icon: 'document' },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/demo/test',
|
||||||
|
component: () => import('@/views/land/index.vue'),
|
||||||
|
name: 'demo-land',
|
||||||
|
meta: { title: '土地资源', icon: 'document' },
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@ -25,18 +25,22 @@ const options = ref({
|
|||||||
{ name: '新乡', value: 3832 },
|
{ name: '新乡', value: 3832 },
|
||||||
{ name: '大同', value: 1811 },
|
{ name: '大同', value: 1811 },
|
||||||
],
|
],
|
||||||
|
type: 'column',
|
||||||
// 表行数
|
// 表行数
|
||||||
rowNum: 5,
|
rowNum: 5,
|
||||||
|
isAnimation: true,
|
||||||
// 轮播时间
|
// 轮播时间
|
||||||
waitTime: 2,
|
waitTime: 2,
|
||||||
// 数值单位
|
// 数值单位
|
||||||
unit: '',
|
unit: '',
|
||||||
|
height: 16,
|
||||||
// 自动排序
|
// 自动排序
|
||||||
sort: true,
|
sort: true,
|
||||||
color: '#1370fb',
|
color: '#1370fb',
|
||||||
textColor: '#CDD2F8FF',
|
textColor: '#CDD2F8FF',
|
||||||
borderColor: '#1370fb80',
|
borderColor: '#1370fb80',
|
||||||
carousel: 'single',
|
carousel: 'single',
|
||||||
|
indexPrefix: 'TOP',
|
||||||
//序号字体大小
|
//序号字体大小
|
||||||
indexFontSize: 12,
|
indexFontSize: 12,
|
||||||
//左侧数据字体大小
|
//左侧数据字体大小
|
||||||
|
|||||||
@ -1,77 +1,114 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="distribution-charts">
|
<custom-echart-bar :chart-data="state.data" height="100%" :option="state.option" />
|
||||||
<custom-echart-pie :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, reactive, onMounted } from 'vue';
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
const chartsData = reactive({
|
const state = reactive({
|
||||||
option: {
|
option: {
|
||||||
color: ['#3685fe', '#41b879', '#ffd500'],
|
grid: {
|
||||||
title: {
|
left: '5%',
|
||||||
text: ' ',
|
right: '5%',
|
||||||
textStyle: {
|
bottom: '5%',
|
||||||
color: '#333',
|
top: '10%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
barStyle: {
|
||||||
data: ['耿马镇', '勐撒镇', '勐永镇', '孟定镇', '勐简乡', '贺派乡', '四排山乡', '芒洪乡', '大兴乡'],
|
barWidth: 15,
|
||||||
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: {
|
itemStyle: {
|
||||||
borderRadius: 5,
|
borderRadius: [8, 8, 0, 0], // 设置柱子的圆角半径
|
||||||
},
|
|
||||||
// animationDuration: 15000,
|
|
||||||
// // 可选：设置动画缓动效果
|
|
||||||
// animationEasing: 'elasticOut',
|
|
||||||
},
|
},
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1,
|
||||||
|
colorStops: [
|
||||||
|
{ offset: 0, color: '#35D0C0' },
|
||||||
|
{ offset: 1, color: '#35D0C0' },
|
||||||
],
|
],
|
||||||
|
global: false,
|
||||||
},
|
},
|
||||||
valData: [
|
},
|
||||||
{ value: 205.6, name: '耿马镇' },
|
xAxis: {
|
||||||
{ value: 308.7, name: '勐撒镇' },
|
type: 'category',
|
||||||
{ value: 359.6, name: '勐永镇' },
|
// name: '面积',
|
||||||
{ value: 452.6, name: '孟定镇' },
|
// splitLine: {
|
||||||
{ value: 388.9, name: '勐简乡' },
|
// show: false,
|
||||||
{ value: 508.7, name: '贺派乡' },
|
// lineStyle: {
|
||||||
{ value: 369.5, name: '四排山乡' },
|
// type: 'dashed',
|
||||||
{ value: 610.8, name: '芒洪乡' },
|
// color: '',
|
||||||
{ value: 754.3, name: '大兴乡' },
|
// width: 1,
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
alignWithLabel: false,
|
||||||
|
interval: 'auto',
|
||||||
|
inside: false,
|
||||||
|
length: 5,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
width: 1,
|
||||||
|
color: 'rgba(28, 158, 222, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// axisLine: {
|
||||||
|
// show: true,
|
||||||
|
// lineStyle: {
|
||||||
|
// type: 'solid',
|
||||||
|
// width: 1,
|
||||||
|
// // color: '#000',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// axisLabel: {
|
||||||
|
// margin: 8,
|
||||||
|
// interval: 'auto',
|
||||||
|
// rotate: 0,
|
||||||
|
// fontSize: 10,
|
||||||
|
// color: '#fff',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
// name: '面积(万亩)',
|
||||||
|
},
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// position: 'insideTop',
|
||||||
|
// distance: -10,
|
||||||
|
// formatter: () => {
|
||||||
|
// return `{z|}{a|}`;
|
||||||
|
// },
|
||||||
|
// rich: {
|
||||||
|
// a: {
|
||||||
|
// widht: 18,
|
||||||
|
// height: 18,
|
||||||
|
// backgroundColor: {
|
||||||
|
// image:
|
||||||
|
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAARCAYAAADUryzEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKUSURBVHgBpVPPaxNBFH4zszubTTY2sSRSrFCC1dIepChoD9JgKwiem6s3vYl4lyb/QS/+wJPnBPQ/0LQ91KsHe5BaWo3Yupqk6WZ3Z3Z2xt2tKUUNHnww8OB775tv3nwP4D8DDQOqqoqh9iuPjlpeVkkxQurvBAoiREGlUcHbpUWcHaWkoGUivAWOPyUt5iiYgbABS/IkCTp5YxMAF1rTui36Rt70acipFmOEcqE8n+vaWZbf74jnl++KAQlOLlcKNZuA6X7JcPw9K2uSPOd68bY1NXtJL0zGeWiO5h3fsbxxk5abNRIrPlawVK8TmGtRx89ZJIVy93NzC9et0sMU6JMxzkF+XXc/1Fbab1+bmuq2RNcZ39jg9UojTBTkSx3spIu6oaHMLevC9E3r4tNBcxwU8NhCeurZg9y1GwRYJucX9e2lRYwi5TiW8nmEYe6FusIsfWfkyjIMiauZ0j2PozRJ92lxi2E1mAGcB8jwjoakQS1EZ4cRxBg1McUMkzNaFqEBgbeTTWYhlZChUs4wghCUw5gh43xnIv75mACBKkxkpKFbARiYtUNnbRhBW7hrUvicUCoK73flsQK7uSlZCgXI892X7uZjEU3992auwr1Xh++eEKr3fY8E9sx8YiiSyHlRhrFvPQT0NOyGP3puwDfO0XwuYseRf9mnoFtfOVx9tM6/fGShOPRhxy/ndsWbWvPI3rGRKtDAkWspQM8MkUpHtk6L0NIlOkAIpRhnro8Mo38Kep493guaUA3j5ydPiCpUAyrS3toMbEFcQke6ppWxteDAlszYV9L7zk9Bh4mWmzTXqlLB0Tr8uY3RTpQjWxcK09gx9hLcYm1l2/OyXF6VVVSViY0RKPhHHJGrpHTo2v8EGgI2uB3r9kQAAAAASUVORK5CYII=',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 20, name: '耿马镇' },
|
||||||
|
{ value: 15, name: '勐撒镇' },
|
||||||
|
{ value: 12, name: '勐永镇' },
|
||||||
|
{ value: 16, name: '孟定镇' },
|
||||||
|
{ value: 8, name: '勐简乡' },
|
||||||
|
{ value: 12, name: '贺派乡' },
|
||||||
|
{ value: 10, name: '四排山乡' },
|
||||||
|
{ value: 9, name: '芒洪乡' },
|
||||||
|
{ value: 8, 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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
.distribution-charts {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,113 +1,88 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="demo roll-list-circulation" style="height: 90%">
|
<div class="rank">
|
||||||
<div class="list-item-header item-warp" :style="{ flex: listKeys.length }">
|
<custom-rank-List :chart-config="options" />
|
||||||
<template v-for="(h, indexh) in listKeys" :key="indexh">
|
|
||||||
<div class="item-td" :style="{ width: 'calc(100% / ' + listKeys.length + ')' }">{{ listKeysHeader[h] }}</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
const options = ref({
|
||||||
const props = defineProps({
|
attr: { w: '100%', h: 200 },
|
||||||
// items: {
|
option: {
|
||||||
// type: Array,
|
// 数据
|
||||||
// default: () => [],
|
dataset: [
|
||||||
// },
|
{ name: '耿马镇', value: 87.84 },
|
||||||
|
{ name: '勐撒镇', value: 60.7 },
|
||||||
|
{ name: '勐永镇', value: 85.84 },
|
||||||
|
{ name: '孟定镇', value: 63.25 },
|
||||||
|
{ name: '勐简乡', value: 79.45 },
|
||||||
|
{ name: '贺派乡', value: 66.22 },
|
||||||
|
{ name: '四排山乡', value: 58.34 },
|
||||||
|
{ name: '芒洪乡', value: 68.12 },
|
||||||
|
{ name: '大兴乡', value: 66.34 },
|
||||||
|
{ name: '信阳', value: 55.75 },
|
||||||
|
{ name: '新乡', value: 53.32 },
|
||||||
|
{ name: '大同', value: 51.11 },
|
||||||
|
],
|
||||||
|
type: 'column',
|
||||||
|
rowNum: 5,
|
||||||
|
isAnimation: true,
|
||||||
|
waitTime: 2,
|
||||||
|
unit: '万元',
|
||||||
|
sort: true,
|
||||||
|
height: 16,
|
||||||
|
color: 'linear-gradient(90deg,rgba(53,208,192,0.00), #35d0c0)',
|
||||||
|
textColor: '#fff',
|
||||||
|
borderRadius: '12px',
|
||||||
|
carousel: 'single',
|
||||||
|
indexPrefix: 'TOP',
|
||||||
|
indexFontSize: 12,
|
||||||
|
leftFontSize: 12,
|
||||||
|
rightFontSize: 12,
|
||||||
|
valueFormatter: (item) => {
|
||||||
|
return item.value;
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
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 listKeys = reactive(['title', 'demandArea', 'dealArea', 'maxPrice', 'minPrice']);
|
|
||||||
const listKeysHeader = reactive({
|
|
||||||
title: '乡/镇',
|
|
||||||
demandArea: '需求面积',
|
|
||||||
dealArea: '成交面积',
|
|
||||||
maxPrice: '最高价',
|
|
||||||
minPrice: '最高价',
|
|
||||||
});
|
|
||||||
|
|
||||||
const classOptions = {
|
|
||||||
singleHeight: 48,
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.roll-list-circulation {
|
.rank {
|
||||||
margin-top: 8px;
|
padding: 10px 20px;
|
||||||
.scroll-wrap {
|
height: 200px;
|
||||||
height: 80%;
|
|
||||||
width: 100%;
|
|
||||||
margin: 4px auto;
|
|
||||||
overflow: hidden;
|
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: #6beff9 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.item-warp {
|
|
||||||
display: inline-flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
.item-td {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
text-align: center;
|
&:deep(.row-item) {
|
||||||
color: #fff;
|
.ranking-info {
|
||||||
|
color: #35d0c0 !important;
|
||||||
|
font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.list-item {
|
|
||||||
// border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
|
|
||||||
line-height: 18px;
|
|
||||||
|
|
||||||
.list-item-content {
|
&:nth-child(1) {
|
||||||
display: inline-flex;
|
.ranking-info {
|
||||||
width: 100%;
|
color: #fe7f03 !important;
|
||||||
justify-content: space-around;
|
}
|
||||||
position: relative;
|
.ranking-value {
|
||||||
|
color: #fe7f03 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
.ranking-info {
|
||||||
|
color: #fef906 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking-value {
|
||||||
|
color: #fef906 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
.ranking-info {
|
||||||
|
color: #02fd94 !important;
|
||||||
|
}
|
||||||
|
.ranking-value {
|
||||||
|
color: #02fd94 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
.demo {
|
|
||||||
// display: flex;
|
|
||||||
// align-items: center;
|
|
||||||
// justify-content: center;
|
|
||||||
// margin-top: 10px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,121 +1,79 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="demo roll-list-patrol" style="height: 90%">
|
<custom-echart-line :chart-data="state.data" height="100%" :option="state.option" />
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted, onUnmounted, computed, reactive } from 'vue';
|
import { reactive } from 'vue';
|
||||||
import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
|
|
||||||
const props = defineProps({
|
const state = reactive({
|
||||||
// items: {
|
option: {
|
||||||
// type: Array,
|
color: ['#35D0C0'],
|
||||||
// default: () => [],
|
grid: {
|
||||||
// },
|
left: '5%',
|
||||||
|
right: '5%',
|
||||||
|
bottom: '5%',
|
||||||
|
top: '10%',
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow',
|
||||||
|
},
|
||||||
|
formatter: (data) => {
|
||||||
|
const params = data[0];
|
||||||
|
let str = `<div class="custom-echarts-tips">
|
||||||
|
<span>${params.name}</span><br/>
|
||||||
|
<span>${params.marker} ${params.data} 万元</span>
|
||||||
|
</div>`;
|
||||||
|
return str;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
// name: '年份',
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
alignWithLabel: false,
|
||||||
|
interval: 'auto',
|
||||||
|
inside: false,
|
||||||
|
length: 5,
|
||||||
|
lineStyle: {
|
||||||
|
type: 'solid',
|
||||||
|
width: 1,
|
||||||
|
color: 'rgba(28, 158, 222, 1)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
// name: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
value: 10,
|
||||||
|
name: '2020',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 66,
|
||||||
|
name: '2021',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 100,
|
||||||
|
name: '2022',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 120,
|
||||||
|
name: '2023',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 150,
|
||||||
|
name: '2024',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 80,
|
||||||
|
name: '2025',
|
||||||
|
},
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
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>
|
</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: #6beff9 !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>
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user