首页框架初步
This commit is contained in:
parent
61e562e66d
commit
56da0573f4
BIN
src/assets/images/vsualized/home1.png
Normal file
BIN
src/assets/images/vsualized/home1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
src/assets/images/vsualized/home2.png
Normal file
BIN
src/assets/images/vsualized/home2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
BIN
src/assets/images/vsualized/home3.png
Normal file
BIN
src/assets/images/vsualized/home3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
BIN
src/assets/images/vsualized/home4.png
Normal file
BIN
src/assets/images/vsualized/home4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
src/assets/images/vsualized/homeb.png
Normal file
BIN
src/assets/images/vsualized/homeb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 812 KiB |
@ -1,11 +1,18 @@
|
||||
<template>
|
||||
<section class="header_title" :style="{ '--titleContentW': titleContentW + 'px', '--itemW': itemW + 'px', '--gap': gap + 'px' }">
|
||||
<section
|
||||
class="header_title"
|
||||
:style="{
|
||||
'--titleContentW': titleContentW + 'px',
|
||||
'--itemW': itemW + 'px',
|
||||
'--gap': gap + 'px',
|
||||
}"
|
||||
>
|
||||
<el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-left" class="left_btn" @click="handleTitleBtn(1)">
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
<el-icon v-if="props.titles.length > 6" icon="el-icon-arrow-right" class="right_btn" @click="handleTitleBtn(-1)"><ArrowRightBold /></el-icon>
|
||||
<section class="left_titles_container">
|
||||
<section class="title_content" :style="{ left: `-${position}px` }">
|
||||
<section v-if="route.name != 'home'" class="title_content" :style="{ left: `-${position}px` }">
|
||||
<section
|
||||
v-for="(item, i) in leftTitles"
|
||||
:key="`left_title_${i}`"
|
||||
@ -16,9 +23,9 @@
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<section class="sys_name">政务云数字农业智慧大屏</section>
|
||||
<section class="sys_name">{{ route.name != 'home' ? '政务云数字农业智慧大屏' : '数字农业智慧大脑' }}</section>
|
||||
<section class="right_titles_container">
|
||||
<section class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
|
||||
<section v-if="route.name != 'home'" class="title_content" :style="{ left: `${right ? right + 'px' : '-' + position + 'px'}` }">
|
||||
<section
|
||||
v-for="(item, i) in rightTitles"
|
||||
:key="`right_title_${i}`"
|
||||
@ -34,8 +41,9 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
onMounted(() => {
|
||||
handleWidth();
|
||||
activeTitle.value = router.currentRoute.value.name;
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<section
|
||||
class="base-laytout"
|
||||
:style="{ width: `${state.style.width}px`, height: `${state.style.height}px`, transform: `${state.style.transform}` }"
|
||||
:style="{
|
||||
width: `${state.style.width}px`,
|
||||
height: `${state.style.height}px`,
|
||||
transform: `${state.style.transform}`,
|
||||
background: route.name == 'home' ? 'url(' + getAssetsFile('images/vsualized/homeb.png') + ')' : '',
|
||||
}"
|
||||
>
|
||||
<custom-scroll-title class="base-laytout-header" />
|
||||
<section class="base-laytout-main">
|
||||
@ -11,7 +16,9 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import { onMounted, reactive } from 'vue';
|
||||
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
const route = useRoute();
|
||||
const state = reactive({
|
||||
style: {
|
||||
width: '1920',
|
||||
|
||||
@ -7,12 +7,12 @@ export default {
|
||||
redirect: '/v2/home',
|
||||
meta: { title: '首页', icon: '' },
|
||||
children: [
|
||||
// {
|
||||
// path: '/v2/home',
|
||||
// component: () => import('@/views/home/index.vue'),
|
||||
// name: 'home',
|
||||
// meta: { title: '首页', icon: '' },
|
||||
// },
|
||||
{
|
||||
path: '/v2/home',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
name: 'home',
|
||||
meta: { title: '首页', icon: '' },
|
||||
},
|
||||
{
|
||||
path: '/v2/land',
|
||||
component: () => import('@/views/land/index.vue'),
|
||||
|
||||
@ -18,10 +18,10 @@ const state = reactive({
|
||||
],
|
||||
option: {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '10%',
|
||||
bottom: '10%',
|
||||
top: '15%',
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
|
||||
105
src/views/home/index copy.vue
Normal file
105
src/views/home/index copy.vue
Normal file
@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="综合数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<comprehensive></comprehensive>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="土地分布数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<rolllist :items="rollDataList"></rolllist>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<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">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="使用投入品数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<inputs></inputs>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="经营主体数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<entitiesCharts></entitiesCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<traceCharts></traceCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import comprehensive from './components/comprehensive.vue';
|
||||
import plantBreedCharts from './components/plantBreedCharts.vue';
|
||||
import entitiesCharts from './components/entitiesCharts.vue';
|
||||
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, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
let rollDataList = reactive([
|
||||
{ title: '勐腊镇', value: 533.1 },
|
||||
{ title: '孟定镇', value: 1069.2 },
|
||||
{ title: '孟永镇', value: 411.8 },
|
||||
{ title: '耿马镇', value: 429.4 },
|
||||
{ title: '大兴乡', value: 162.7 },
|
||||
{ title: '勐简乡', value: 2309.9 },
|
||||
// 更多项...
|
||||
]);
|
||||
|
||||
// });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.left-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-charts-item {
|
||||
width: calc(100% - 5px);
|
||||
height: calc((100% - 30px) / 3);
|
||||
}
|
||||
|
||||
.right-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.right-charts-item {
|
||||
width: calc(100% - 5px);
|
||||
height: calc((100% - 30px) / 3);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,69 +1,20 @@
|
||||
<template>
|
||||
<div class="data-home-index">
|
||||
<el-row style="width: 100%; height: 100%">
|
||||
<el-col :span="6" class="left-charts">
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="综合数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<comprehensive></comprehensive>
|
||||
</template>
|
||||
</customBack>
|
||||
<template v-for="(n, index) in homeList" :key="n.name">
|
||||
<div class="home-enter-item" :style="n.style" @click="itemClick(index)">
|
||||
<div class="name">
|
||||
<span>{{ n.title || '--' }}</span>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<customBack top-title="土地分布数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<rolllist :items="rollDataList"></rolllist>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="left-charts-item">
|
||||
<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">
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="使用投入品数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<inputs></inputs>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="经营主体数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<entitiesCharts></entitiesCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
<div class="right-charts-item">
|
||||
<customBack top-title="溯源赋码与扫码数据统计" :top-postion="'left'">
|
||||
<template #back>
|
||||
<traceCharts></traceCharts>
|
||||
</template>
|
||||
</customBack>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="img-icon" :style="n.imgstyle"><img :src="getAssetsFile(n.img)" /></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import centerMap from '@/components/centerMap.vue';
|
||||
import comprehensive from './components/comprehensive.vue';
|
||||
import plantBreedCharts from './components/plantBreedCharts.vue';
|
||||
import entitiesCharts from './components/entitiesCharts.vue';
|
||||
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, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
import { ref, reactive } from 'vue';
|
||||
import { getAssetsFile } from '@/utils';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
let rollDataList = reactive([
|
||||
{ title: '勐腊镇', value: 533.1 },
|
||||
{ title: '孟定镇', value: 1069.2 },
|
||||
@ -74,32 +25,92 @@ let rollDataList = reactive([
|
||||
// 更多项...
|
||||
]);
|
||||
|
||||
let homeList = reactive([
|
||||
{
|
||||
title: '产业运营管理后台',
|
||||
name: 'operationM',
|
||||
linkType: 0,
|
||||
url: '',
|
||||
img: 'images/vsualized/home1.png',
|
||||
style: 'left: 20%;bottom:300px;',
|
||||
imgstyle: 'width:100px;height:100px',
|
||||
},
|
||||
{
|
||||
title: '产业运营平台',
|
||||
name: 'operation',
|
||||
linkType: 0,
|
||||
url: '',
|
||||
img: 'images/vsualized/home2.png',
|
||||
style: 'left: 20%;bottom: 64px;',
|
||||
imgstyle: 'width:160px;height:160px',
|
||||
},
|
||||
{
|
||||
title: '数据大屏',
|
||||
name: 'dataV',
|
||||
linkType: 1,
|
||||
url: '/v2/land',
|
||||
img: 'images/vsualized/home3.png',
|
||||
style: 'right: 20%;bottom:300px;',
|
||||
imgstyle: 'width:100px;height:100px',
|
||||
},
|
||||
{
|
||||
title: '政务院平台',
|
||||
name: 'gov',
|
||||
linkType: 0,
|
||||
url: '',
|
||||
img: 'images/vsualized/home4.png',
|
||||
style: 'right: 20%;bottom: 64px;',
|
||||
imgstyle: 'width:160px;height:160px',
|
||||
},
|
||||
// 更多项...
|
||||
]);
|
||||
|
||||
const itemClick = (index) => {
|
||||
if (index != undefined) {
|
||||
let val = homeList[index] || null;
|
||||
if (val && val.url != '') {
|
||||
if (val.linkType == 1) {
|
||||
router.push({ path: val.url });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// });
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.data-home-index {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.left-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.left-charts-item {
|
||||
width: calc(100% - 5px);
|
||||
height: calc((100% - 30px) / 3);
|
||||
}
|
||||
.home-enter-item {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 16px 0;
|
||||
cursor: pointer;
|
||||
.name {
|
||||
color: #fff;
|
||||
font-family: 'JinBuTi';
|
||||
margin: 24px 0;
|
||||
background: linear-gradient(180deg, #01fefd, rgba(1, 254, 253, 0));
|
||||
border: 2px solid #01fefd;
|
||||
border-radius: 8px;
|
||||
|
||||
.right-charts {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
.right-charts-item {
|
||||
width: calc(100% - 5px);
|
||||
height: calc((100% - 30px) / 3);
|
||||
padding: 0 24px;
|
||||
span {
|
||||
backdrop-filter: blur(8px);
|
||||
line-height: 40px;
|
||||
text-shadow: 0px 4px 8px 0px #01fefd;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.img-icon {
|
||||
margin: auto;
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user