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

数据大屏导航位置修改

Browse Source
This commit is contained in:
13713575202 2025-04-17 13:54:01 +08:00
parent f9c4c2f0b4
commit 47e9dacf91
6 changed files with 328 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sub-government-screen-service/components.d.ts vendored
View File

@ -8,8 +8,10 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
BaseBg: typeof import('./src/components/baseBg.vue')['default']
'BaseBg copy': typeof import('./src/components/baseBg copy.vue')['default']
CenterMap: typeof import('./src/components/centerMap.vue')['default']
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
copy: typeof import('./src/components/baseBg copy.vue')['default']
CurrentTime: typeof import('./src/components/currentTime.vue')['default']
CustomBack: typeof import('./src/components/customBack.vue')['default']
CustomProgress: typeof import('./src/components/customProgress.vue')['default']

170
sub-government-screen-service/src/components/baseBg copy.vue Normal file
View File

@ -0,0 +1,170 @@
<template>
<!-- :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }" -->
<div class="data-warp">
<div class="chart-content">
<div class="top">
<slot v-if="$slots.top" name="top"></slot>
<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 }}
</div>
<!-- <div class="top-right">{{ currentTime }}</div> -->
</div>
</div>
<div class="content">
<slot name="center"></slot>
</div>
</div>
</div>
</template>
<script setup>
import { isEmpty, getAssetsFile } from '@/utils';
import { ref, reactive, onMounted, watch, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useApp } from '@/hooks';
const router = useRouter();
const props = defineProps({
nameVal: {
type: String,
default: 'home',
},
topTitle: {
type: String,
default: '系统',
},
});
const navlist = ref([
{ title: '首页', name: 'home' },
{ title: '土地资源', name: 'land' },
{ title: '投入品', name: 'inputs' },
{ title: '生产经营主体', name: 'entities' },
{ title: '智慧种植检测', name: 'plant' },
{ title: '智慧养殖检测', name: 'breed' },
{ title: '全流程溯源', name: 'trace' },
{ title: '产业预警决策', name: 'early' },
]);
let currentName = ref('home');
watch(
() => props.nameVal,
() => {
currentName.value = props.nameVal;
},
{
deep: true,
immediate: true,
}
);
const itemAct = (name) => {
currentName.value = name;
router.push({ name: name });
};
</script>
<style lang="scss" scoped>
div {
box-sizing: border-box;
}
.data-warp {
width: 100%;
height: 100vh;
background-size: 100% 100%;
.chart-content {
width: 100%;
height: 100vh;
z-index: 1;
position: absolute;
left: 0;
top: 0;
.top,
.content,
.bottom {
width: 100%;
padding: 0 16px;
background-size: cover;
display: inline-flex;
flex-direction: column;
justify-content: center;
}
.top {
height: 55px;
.top-content-warp {
width: 100%;
height: 100%;
background-size: 100% 100%;
background-repeat: no-repeat;
.top-left,
.top-content,
.top-right {
display: inline-block;
vertical-align: middle;
}
.top-content {
width: calc(100% - 400px);
line-height: 42px;
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: 80px;
text-align: center;
.b-nav {
margin: auto;
display: inline-flex;
gap: 20px;
.b-nav-item {
display: inline-block;
cursor: pointer;
min-width: 132px;
height: 42px;
text-align: center;
line-height: 38px;
span {
font-size: 14px;
font-weight: bold;
display: inline-flex;
transform: skewX(-8deg);
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-webkit-background-clip: text;
letter-spacing: 4px;
text-shadow: -2px 0 0 1px #add8f1;
}
&.nav-act {
color: rgba(255, 255, 255, 1);
}
&.nav-normal {
color: rgba(255, 255, 255, 0.6);
}
}
}
}
.content {
height: calc(100% - 138px);
}
}
}
</style>

104
sub-government-screen-service/src/components/baseBg.vue
View File

@ -4,10 +4,50 @@
<div class="chart-content">
<div class="top">
<slot v-if="$slots.top" name="top"></slot>
<div v-else class="top-content-warp" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }">
<!--:style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/hraderbg.png') + ')' }" -->
<div v-else class="top-content-warp">
<div class="top-left"></div>
<div class="top-content">
{{ topTitle }}
<div class="top-content-p">
<div class="b-nav-l">
<template v-for="(n, indexn) in navlist" :key="n.name">
<div
v-if="indexn <= 3"
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)"
>
<span>{{ n.title }}</span>
</div>
</template>
</div>
<div class="title txt-ellipsis clamp1">{{ topTitle }}</div>
<div class="b-nav-r">
<template v-for="(m, indexm) in navlist" :key="m.name">
<div
v-if="indexm > 3"
class="b-nav-item"
:style="{
'background-image':
'url(' +
(currentName == m.name ? getAssetsFile('images/vsualized/home/nav-on.png') : getAssetsFile('images/vsualized/home/nav.png')) +
')',
}"
:class="currentName == m.name ? 'nav-act' : 'nav-normal'"
@click="itemAct(m.name)"
>
<span>{{ m.title }}</span>
</div>
</template>
</div>
</div>
</div>
<!-- <div class="top-right">{{ currentTime }}</div> -->
</div>
@ -105,7 +145,29 @@ div {
}
.top-content {
width: calc(100% - 400px);
line-height: 42px;
height: 100%;
display: inline-flex;
justify-content: center;
flex-direction: column;
.top-content-p {
width: 100%;
}
.title,
.b-nav-l,
.b-nav-r {
display: inline-block;
vertical-align: middle;
}
.b-nav-l,
.b-nav-r {
width: calc((100% - 300px) / 2);
}
.b-nav-r {
text-align: right;
}
.title {
width: 300px;
line-height: 38px;
text-align: center;
font-size: 18px;
font-weight: bold;
@ -115,6 +177,40 @@ div {
color: #fff;
letter-spacing: 8px;
text-shadow: -6px 0 0 1px #add8f1;
max-height: unset !important;
}
}
.b-nav-l,
.b-nav-r {
margin: auto;
display: inline-flex;
gap: 20px;
.b-nav-item {
display: inline-block;
cursor: pointer;
min-width: 132px;
height: 38px;
text-align: center;
line-height: 38px;
span {
font-size: 14px;
font-weight: bold;
display: inline-flex;
transform: skewX(-8deg);
background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
-webkit-background-clip: text;
letter-spacing: 4px;
text-shadow: -2px 0 0 1px #add8f1;
}
&.nav-act {
color: rgba(255, 255, 255, 1);
}
&.nav-normal {
color: rgba(255, 255, 255, 0.6);
}
}
}
.top-left {
width: 200px;
@ -163,7 +259,7 @@ div {
}
}
.content {
height: calc(100% - 138px);
height: calc(100% - 60px);
}
}
}

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

@ -9,7 +9,7 @@
<div class="basic-layout" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/screenbg.png') + ')' }">
<div class="basic-layout-container">
<Main />
<Bottom :name-val="route.name"></Bottom>
<!-- <Bottom :name-val="route.name"></Bottom> -->
</div>
</div>
</template>

21
sub-government-screen-service/src/styles/style.scss
View File

@ -15,3 +15,24 @@
height: auto;
max-height: calc(100vh - 130px);
}
.txt-ellipsis {
display: -webkit-inline-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: normal;
}
.clamp1 {
line-clamp: 1;
-webkit-line-clamp: 1;
line-height: 1.5;
max-height: calc(1.5em * 1);
}
.clamp2 {
line-clamp: 2;
-webkit-line-clamp: 2;
line-height: 1.5;
max-height: calc(1.5em * 2);
}

22
sub-government-screen-service/src/views/home/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="data-home-index">
<baseBg ref="homebase" :name-val="'home'">
<template #top> </template>
<baseBg ref="homebase" :name-val="'home'" top-title=" ">
<!-- <template #top> </template> -->
<template #center>
<el-row style="width: 100%; height: 100%">
<el-col :span="6" class="left-charts">
@ -59,6 +59,7 @@
<div class="home-index-top-warp">
<div class="home-index-top" :style="{ 'background-image': 'url(' + getAssetsFile('images/vsualized/home/hometopbg.png') + ')' }">
<div class="home-data-p">
<h3 class="home-title">耿马县农产品销售情况</h3>
<div class="home-data-top">￥1284.624万</div>
<div class="home-data-contrast">
@ -71,6 +72,7 @@
</div>
</div>
</div>
</div>
</template>
<script setup>
import centerMap from '@/components/centerMap.vue';
@ -110,13 +112,23 @@ let rollDataList = reactive([
top: 0;
left: 0;
width: 100%;
padding-top: 24px;
height: 120px;
text-align: center;
padding-top: 24px;
.home-index-top {
margin: auto;
width: calc(100% - 400px);
height: 100%;
background-repeat: no-repeat;
background-position: center 28px;
background-position: center bottom;
background-size: contain;
position: relative;
.home-data-p {
position: absolute;
left: 0;
top: -12px;
width: 100%;
}
.home-title {
display: inline-block;
font-size: 18px;
@ -133,7 +145,7 @@ let rollDataList = reactive([
font-weight: bold;
color: #fff;
letter-spacing: 8px;
margin: 26px 0 0 0;
margin-top: 9px;
}
.home-data-contrast {
.tips {