明树Git Lab

Skip to content

J
jt_front
Commit 48bee51e authored by chenron's avatar chenron
Browse files
Options

大屏数据修改

parent 5d2eb68b
Hide whitespace changes
Inline Side-by-side
Showing with 454 additions and 17 deletions
src/components/CommonMap.vue
View file @ 48bee51e
......@@ -252,7 +252,7 @@ onMounted(() => {
width: 25px;
height: 34px;
}
/deep/.infoWindow-title {
:deep(.infoWindow-title) {
background-image: url("../assets/images/标题.png");
background-size: 100% 100%;
background-repeat: no-repeat;
......@@ -262,7 +262,7 @@ onMounted(() => {
padding-left: 10px;
font-weight: 700;
}
/deep/.infoWindow-content {
:deep(.infoWindow-content) {
background-image: url("../assets/images/信息文本.png");
background-size: 100% 100%;
background-repeat: no-repeat;
......@@ -273,7 +273,7 @@ onMounted(() => {
padding-top: 5px;
padding-bottom: 5px;
}
/deep/.infoWindow-bottom {
:deep(.infoWindow-bottom) {
background-image: url("../assets/images/下标.png");
background-size: 100% 100%;
background-repeat: no-repeat;
......@@ -281,23 +281,23 @@ onMounted(() => {
margin-top: 1px;
height: 22px;
}
/deep/.infoWindow-content-title {
:deep(.infoWindow-content-title) {
font-size: 18px;
color: #fff;
font-weight: 400;
}
/deep/.infoWindow-content-value {
:deep(.infoWindow-content-value) {
font-weight: 400;
font-size: 24px;
color: #93d2ff;
}
/deep/.infoWindow-unit {
:deep(.infoWindow-unit) {
font-size: 20px;
color: #93d2ff;
display: inline-block;
margin-left: 3px;
}
/deep/.anchorPoint {
:deep(.anchorPoint) {
position: absolute;
color: #fff;
position: absolute;
......@@ -306,11 +306,11 @@ onMounted(() => {
transform: translate(-50%, -50%);
}
/deep/.amap-logo {
:deep(.amap-logo) {
display: none;
opacity: 0 !important;
}
/deep/.amap-copyright {
:deep(.amap-copyright) {
opacity: 0;
}
</style>
src/components/CommonTotal.vue
View file @ 48bee51e
......@@ -150,7 +150,6 @@ onMounted(() => {});
.font(12);
}
.stat-card-value {
// .vh(margin-top, 10);
.font(24);
cursor: pointer;
font-family: "DIN";
......@@ -161,4 +160,6 @@ onMounted(() => {});
:deep(.el-dialog__title) {
font-weight: 900;
}
:deep(.el-dialog) {
}
</style>
src/components/common/commonTable.vue
View file @ 48bee51e
......@@ -605,4 +605,14 @@ const handleNextClick = (val) => {
:deep(.el-table) {
background-color: rgba(255, 255, 255, 0.5);
}
.common-table {
background: rgb(157 188 218 / 40%);
}
:deep(.el-table th.el-table__cell) {
background: rgba(4, 66, 126, 0.4);
color: #fff;
}
:deep(.el-table tr) {
background: rgb(157 188 218 / 40%);
}
</style>
src/views/components/CircleProgress.vue
View file @ 48bee51e
......@@ -51,7 +51,11 @@ const initChart = () => {
label: { show: false },
labelLine: { show: false },
data: [
{ value: 33.8, name: "绿色扇区", itemStyle: { color: "#00FF00" } }, // 绿色扇区
{
value: 33.8,
name: "绿色扇区",
itemStyle: { color: "#00FF00", fontSize: 12 },
}, // 绿色扇区
{
value: 66.2,
name: "背景扇区",
......
src/views/components/Construct.vue
View file @ 48bee51e
......@@ -27,7 +27,13 @@
<div><CircleProgress /></div>
<div class="investment-progress">
<span>19.72/58.42亿元</span>
<div class="progress-image"></div>
<div class="progress-image">
<div class="progress-show-value"></div>
<div
class="progress-show-value-rel"
:style="{ width: `${33.8}%` }"
></div>
</div>
</div>
</div>
</div>
......@@ -68,7 +74,6 @@ const recycleList = reactive([
.construct-container {
display: flex;
.construct-left {
// width: 65%;
flex: 1;
height: 100%;
.tag-image {
......@@ -111,17 +116,40 @@ const recycleList = reactive([
align-items: end;
span {
.vh(margin-bottom,-20);
font-family: "DIN";
}
.progress-image {
justify-content: center;
align-items: center;
.vw(width,520);
.vh(height,85);
background-image: url("@/assets/images/箭头.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100% 100%;
position: relative;
.progress-show-value {
position: absolute;
.vh(top,26);
.vw(left,65);
width: 85%;
height: 30%;
background-image: url(/src/assets/images/baseRate.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.progress-show-value-rel {
height: 100%;
background-image: url("@/assets/images/baseRateRel.png");
background-size: auto 100%;
-webkit-transform: skew(-30deg);
transform: skew(-30deg);
position: absolute;
.vh(top,26);
.vw(left,65);
height: 30%;
background-image: url(/src/assets/images/baseRateRel.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
}
}
}
......
src/views/components/Operation.vue
View file @ 48bee51e
......@@ -103,6 +103,11 @@ const completeList = reactive([
.construct-left {
flex: 1;
height: 100%;
.tag-image {
img {
.vw(width, 85);
}
}
.construct-left-map {
.vh(height, 700);
.vh(padding-top, 4);
......
src/views/homePage/copy.vue 0 → 100644
View file @ 48bee51e
<template>
<div class="home-container">
<div class="header">
<div class="header-left">
<div
class="nav-btn"
:class="{ active: selectedLeftBtn === 'equity' }"
@click="selectLeftBtn('equity')"
>
股权投资
</div>
<div
class="nav-btn"
:class="{ active: selectedLeftBtn === 'risk' }"
@click="selectLeftBtn('risk')"
>
固定风险投资
</div>
</div>
<div class="header-middile">
葛洲坝集团交通投资有限公司投资决策分析系统
</div>
<div class="header-right">
<div
class="nav-btn"
:class="{ active: selectedRightBtn === 'realestate' }"
@click="selectRightBtn('realestate')"
>
房地产投资
</div>
<div
class="nav-btn"
:class="{ active: selectedRightBtn === 'finance' }"
@click="selectRightBtn('finance')"
>
融资建设投资
</div>
</div>
</div>
<div class="content">
<div class="fullscreen-btn">
<span @click="toggleFullscreen" class="fullscreen-text">
<el-icon :size="18">
<full-screen />
</el-icon>
{{ isFullscreen ? "退出全屏" : "全屏" }}
</span>
</div>
<div class="content-btn">
<span
v-for="item in navList"
:key="item.index"
:class="{ active: selectedContentBtn === item.index }"
@click="selectContentBtn(item)"
>{{ item.name }}
</span>
</div>
<ProjectApproval
:currentName="selectedContentName"
v-if="
selectedContentBtn === 1 ||
selectedContentBtn === 4 ||
selectedContentBtn === 5
"
/>
<Construct v-else-if="selectedContentBtn === 2" />
<Operation v-else />
</div>
<div class="bottom"></div>
</div>
</template>
<script setup>
import Construct from "../components/Construct.vue";
import ProjectApproval from "../components/ProjectApproval.vue";
import Operation from "../components/Operation.vue";
import { reactive, ref } from "vue";
const selectedLeftBtn = ref("equity");
const selectedRightBtn = ref("");
const selectedContentBtn = ref(1);
const selectedContentName = ref("立项");
const isFullscreen = ref(false);
const showPopup = ref(false);
const currentProject = ref({});
const popupStyle = ref({});
const navList = reactive([
{
index: 1,
name: "立项",
},
{
index: 2,
name: "建设",
},
{
index: 3,
name: "运营",
},
{
index: 4,
name: "转让",
},
{
index: 5,
name: "退出",
},
]);
const selectLeftBtn = (btn) => {
selectedLeftBtn.value = btn;
selectedRightBtn.value = "";
};
const selectRightBtn = (btn) => {
selectedRightBtn.value = btn;
selectedLeftBtn.value = "";
};
const selectContentBtn = (item) => {
selectedContentBtn.value = item.index;
selectedContentName.value = item.name;
};
const showProjectPopup = (event) => {
currentProject.value = {
name: "项目001",
data: [
{ label: "数据01", value: "3654.89", unit: "单位" },
{ label: "数据02", value: "3654.89", unit: "单位" },
{ label: "数据03", value: "3654.89", unit: "单位" },
],
};
popupStyle.value = {
left: `${event.clientX}px`,
top: `${event.clientY - 100}px`,
};
showPopup.value = true;
};
// 全屏切换功能
const toggleFullscreen = () => {
const homeContainer = document.querySelector(".home-container");
if (isFullscreen.value) {
// 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
homeContainer.style.height = "100%";
} else {
// 进入全屏
if (homeContainer.requestFullscreen) {
homeContainer.requestFullscreen();
} else if (homeContainer.webkitRequestFullscreen) {
homeContainer.webkitRequestFullscreen();
} else if (homeContainer.msRequestFullscreen) {
homeContainer.msRequestFullscreen();
}
homeContainer.style.height = "100vh";
}
isFullscreen.value = !isFullscreen.value;
};
// 监听全屏变化事件
window.addEventListener("fullscreenchange", () => {
if (!document.fullscreenElement) {
isFullscreen.value = false;
const homeContainer = document.querySelector(".home-container");
if (homeContainer) homeContainer.style.height = "100%";
} else {
isFullscreen.value = true;
const homeContainer = document.querySelector(".home-container");
if (homeContainer) homeContainer.style.height = "100vh";
}
});
</script>
<style scoped lang="less">
.home-container {
// background-image: url("@/assets/images/bg.png");
// background-repeat: no-repeat;
// background-size: cover;
// background-position: center;
width: 100%;
height: 100%;
background-color: #04427e;
overflow: hidden;
color: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
.header {
width: 100%;
.vh(height, 80);
display: flex;
justify-content: center;
align-items: flex-end;
.header-middile {
background-image: url("@/assets/images/header.png");
background-repeat: no-repeat;
background-position: center;
background-size: auto;
.font(28);
letter-spacing: 1px;
font-weight: 400;
font-family: "YouSheBiaoTiHei";
.vw(width,950);
height: 74px;
display: flex;
justify-content: center;
align-items: center;
}
.header-left {
display: flex;
align-items: center;
justify-content: center;
.nav-btn {
.font(16);
cursor: pointer;
color: #fff;
font-family: YouSheBiaoTiYuan;
font-weight: 100;
display: flex;
align-items: center;
justify-content: center;
&:not(.active) {
background-image: url("@/assets/images/left-btn.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 155px;
height: 35px;
background-size: 100% 100%;
}
&.active {
background-image: url("@/assets/images/left-hlightBtn.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 155px;
height: 35px;
background-size: 100% 100%;
}
}
}
.header-right {
display: flex;
justify-content: center;
align-items: center;
.nav-btn {
.font(16);
cursor: pointer;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: YouSheBiaoTiYuan;
&:not(.active) {
background-image: url("@/assets/images/right-btn.png");
background-repeat: no-repeat;
background-position: center;
width: 155px;
height: 35px;
background-size: 100% 100%;
}
&.active {
background-image: url("@/assets/images/right-hight-btn.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 155px;
height: 35px;
background-size: 100% 100%;
}
}
}
}
.content {
flex: 1;
.vw(padding-left, 20);
.vw(padding-right, 20);
.content-btn {
.vh(margin-top,-10);
.vh(margin-bottom,20);
display: flex;
justify-content: center;
align-items: center;
span {
.font(14);
width: 110px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
color: #fff; // 补充文字颜色（匹配蓝色按钮的白色文字）
}
// 立项按钮
:nth-child(1) {
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: center;
width: 115px;
height: 35px;
line-height: 35px;
text-align: center;
&.active {
background-image: url("@/assets/images/立项.png");
}
&:not(.active) {
background-image: url("@/assets/images/initiation-default.png");
}
}
// 退出按钮
:nth-child(5) {
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: center;
width: 111px;
height: 35px;
line-height: 35px;
text-align: center;
&.active {
background-image: url("@/assets/images/退出-active.png");
}
&:not(.active) {
background-image: url("@/assets/images/退出.png");
}
}
// 中间按钮（建设、运营、转止）
:nth-child(2),
:nth-child(3),
:nth-child(4) {
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: center;
width: 115px;
height: 35px;
line-height: 35px;
text-align: center;
margin-left: -32px;
background-image: url("@/assets/images/default-btn.png");
&.active {
background-image: url("@/assets/images/nav-hight-btn.png");
}
}
:nth-child(5) {
margin-left: -31px;
}
}
}
.bottom {
background-image: url("@/assets/images/bottom.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
.vh(height, 80);
}
.fullscreen-btn {
display: flex;
cursor: pointer;
span {
margin-left: auto;
color: white;
font-weight: 700;
.font(16);
display: flex;
align-items: center;
gap: 6px;
}
}
}
</style>
src/views/homePage/index.vue
View file @ 48bee51e
......@@ -80,7 +80,7 @@ import { reactive, ref } from "vue";
const selectedLeftBtn = ref("equity");
const selectedRightBtn = ref("");
const selectedContentBtn = ref(3);
const selectedContentBtn = ref(2);
const selectedContentName = ref("立项");
const isFullscreen = ref(false);
const showPopup = ref(false);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment