fix: 编写地磅管理页面
This commit is contained in:
cjp
parent
b3dedd304c
commit
df60bc3976
BIN
src/assets/images/loadometerManage/first.png
Normal file
BIN
src/assets/images/loadometerManage/first.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
src/assets/images/loadometerManage/fourth.png
Normal file
BIN
src/assets/images/loadometerManage/fourth.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
src/assets/images/loadometerManage/second.png
Normal file
BIN
src/assets/images/loadometerManage/second.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/images/loadometerManage/third.png
Normal file
BIN
src/assets/images/loadometerManage/third.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
src/assets/images/smartPartyBuilding/nameBg.png
Normal file
BIN
src/assets/images/smartPartyBuilding/nameBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/images/smartPartyBuilding/testPic.png
Normal file
BIN
src/assets/images/smartPartyBuilding/testPic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 638 KiB |
BIN
src/assets/images/smartPartyBuilding/textBg.png
Normal file
BIN
src/assets/images/smartPartyBuilding/textBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<Card title="党员风采">
|
||||
<div class="bottom-center">
|
||||
<div class="party-member">
|
||||
<div class="member-content" v-for="item in list" :key="item.id">
|
||||
<div class="name">
|
||||
<i>{{ item.name }}</i>
|
||||
</div>
|
||||
<div class="photo">
|
||||
<img :src="driverPhoto" alt="" />
|
||||
</div>
|
||||
<div class="introduce">{{ item.introduce }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import driverPhoto from "@/assets/images/towerCraneMonitoring/driverPhoto.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
name: "宋小秋",
|
||||
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "黄磊",
|
||||
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "郭莎莎",
|
||||
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "方洪鑫",
|
||||
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "郑欣敏",
|
||||
introduce: "遵纪守法，与时俱进。 做一名对社会有贡献的人"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.party-member {
|
||||
height: 100%;
|
||||
padding: 0 4%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
.member-content {
|
||||
width: 17%;
|
||||
height: 100%;
|
||||
margin-top: 5%;
|
||||
.name {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
height: 12%;
|
||||
font-family: OPPOSans-Regular, OPPOSans;
|
||||
margin: auto;
|
||||
background: url("@/assets/images/smartPartyBuilding/nameBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
color: #ffffff;
|
||||
}
|
||||
.photo {
|
||||
width: 70%;
|
||||
height: 50%;
|
||||
margin: auto;
|
||||
margin-top: 3%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.introduce {
|
||||
width: 100%;
|
||||
margin-top: 8%;
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
background: url("@/assets/images/smartPartyBuilding/textBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
font-size: calc(100vw * 1 / 1920);
|
||||
color: #a0b8e5;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Card title="员工关怀">
|
||||
<div class="bottom-left">
|
||||
<!-- <div class="list-content">
|
||||
<div class="list-detail" v-for="item in list" :key="item.id">
|
||||
<div class="detail-pic">
|
||||
<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
|
||||
</div>
|
||||
<div class="detail-text">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="time">{{ item.grossTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "学习贯彻习近平新时代中国特色社会主义",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "新时代中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.list-content {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin: 0 2% 0 5%;
|
||||
overflow: scroll;
|
||||
.list-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
padding-top: 4%;
|
||||
.detail-pic {
|
||||
width: 13%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.detail-text {
|
||||
width: 100%;
|
||||
margin-left: 2%;
|
||||
.title {
|
||||
width: 94%;
|
||||
white-space: nowrap; //单行
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
color: #ffffff;
|
||||
}
|
||||
.time {
|
||||
margin-top: 2%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
color: #a1accb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Card title="学习讲话">
|
||||
<div class="bottom-left">
|
||||
<!-- <div class="list-content">
|
||||
<div class="list-detail" v-for="item in list" :key="item.id">
|
||||
<div class="detail-pic">
|
||||
<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
|
||||
</div>
|
||||
<div class="detail-text">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="time">{{ item.grossTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "学习贯彻习近平新时代中国特色社会主义",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "新时代中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.list-content {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin: 0 2% 0 5%;
|
||||
overflow: scroll;
|
||||
.list-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
padding-top: 4%;
|
||||
.detail-pic {
|
||||
width: 13%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.detail-text {
|
||||
width: 100%;
|
||||
margin-left: 2%;
|
||||
.title {
|
||||
width: 94%;
|
||||
white-space: nowrap; //单行
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
color: #ffffff;
|
||||
}
|
||||
.time {
|
||||
margin-top: 2%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
color: #a1accb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,150 @@
|
||||
<template>
|
||||
<div>智慧党建</div>
|
||||
<div class="distribution-box">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<div class="left-top">
|
||||
<leftTop></leftTop>
|
||||
</div>
|
||||
<div class="left-center">
|
||||
<left-center></left-center>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<topCenter></topCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<div class="right-top">
|
||||
<rightTop></rightTop>
|
||||
<div class="show-more" @click="openPeopleCountDialog(2)">更多</div>
|
||||
</div>
|
||||
<div class="right-center">
|
||||
<rightCenter></rightCenter>
|
||||
<div class="show-more" @click="openPeopleCountDialog(3)">更多</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<BottomLeft></BottomLeft>
|
||||
<div class="show-more" @click="openPeopleCountDialog(1)">更多</div>
|
||||
</div>
|
||||
<div class="bottomCenter">
|
||||
<BottomCenter></BottomCenter>
|
||||
<div class="show-more" @click="openPeopleCountDialog(5)">更多</div>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<BottomRight></BottomRight>
|
||||
<div class="show-more" @click="openPeopleCountDialog(6)">更多</div>
|
||||
</div>
|
||||
</div>
|
||||
<party-build-dialog ref="partyBuildRef"></party-build-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script lang="ts" setup>
|
||||
import rightTop from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightTop.vue";
|
||||
import topCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/topCenter.vue";
|
||||
import BottomLeft from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomLeft.vue";
|
||||
import BottomCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomCenter.vue";
|
||||
import BottomRight from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/bottomRight.vue";
|
||||
|
||||
<style scoped></style>
|
||||
import rightCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/rightCenter.vue";
|
||||
import leftTop from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftTop.vue";
|
||||
import leftCenter from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/leftCenter.vue";
|
||||
|
||||
import partyBuildDialog from "@/views/sevenLargeScreen/comprehensiveManage/smartPartyBuilding/party-build-dialog.vue";
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
|
||||
// 人员情况弹窗
|
||||
const partyBuildRef = ref();
|
||||
const openPeopleCountDialog = (type: any) => {
|
||||
partyBuildRef.value.openDialog(type);
|
||||
console.log(partyBuildRef.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.distribution-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.top {
|
||||
height: 65%;
|
||||
display: flex;
|
||||
margin-bottom: 1%;
|
||||
.topLeft {
|
||||
width: 26%;
|
||||
// background-color: orchid;
|
||||
.left-top {
|
||||
height: 43%;
|
||||
}
|
||||
.left-center {
|
||||
height: 43%;
|
||||
margin-top: 10%;
|
||||
}
|
||||
}
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 26%;
|
||||
.right-top {
|
||||
height: 43%;
|
||||
position: relative;
|
||||
}
|
||||
.right-center {
|
||||
height: 43%;
|
||||
margin-top: 10%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 30%;
|
||||
display: flex;
|
||||
.bottomLeft {
|
||||
width: 26%;
|
||||
position: relative;
|
||||
}
|
||||
.bottomCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
position: relative;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
.show-more {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 5%;
|
||||
cursor: pointer;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #4ac0f3;
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 26%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
.show-more {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
top: 5%;
|
||||
cursor: pointer;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||||
color: #4ac0f3;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<Card title="政治面貌">
|
||||
<div class="bottom-center">111</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<Card title="学习强国">
|
||||
<div class="bottom-center">111</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<div class="list-detail" v-if="showDialog" @click="handleClick">
|
||||
<div class="dialog-content">
|
||||
<div class="dialog-title">
|
||||
<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
|
||||
<div class="title-text">
|
||||
<i>{{ dialogTitle }}</i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-icon" @click="showDialog = false">
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, onMounted } from "vue";
|
||||
import textIcon from "@/assets/images/vehicleManagement/car.png";
|
||||
import { GlobalStore } from "@/stores";
|
||||
let showDialog = ref(false as any);
|
||||
|
||||
function handleClick(event: any) {
|
||||
console.log("点击", event.target.className);
|
||||
if (event.target.className == "list-detail") {
|
||||
showDialog.value = false;
|
||||
}
|
||||
}
|
||||
let dialogTitle = ref("" as any);
|
||||
function openDialog(type: any) {
|
||||
console.log(type);
|
||||
showDialog.value = true;
|
||||
if (type === 1) {
|
||||
dialogTitle.value = "员工关怀";
|
||||
}
|
||||
if (type === 2) {
|
||||
dialogTitle.value = "党建新闻";
|
||||
}
|
||||
if (type === 3) {
|
||||
dialogTitle.value = "党员行动";
|
||||
}
|
||||
if (type === 4) {
|
||||
dialogTitle.value = "政治面貌";
|
||||
}
|
||||
if (type === 5) {
|
||||
dialogTitle.value = "党员风采";
|
||||
}
|
||||
if (type === 6) {
|
||||
dialogTitle.value = "学习讲话";
|
||||
}
|
||||
}
|
||||
|
||||
// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
|
||||
defineExpose({
|
||||
openDialog
|
||||
});
|
||||
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-detail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
background: rgba(7, 28, 49, 0.5);
|
||||
z-index: 20;
|
||||
.dialog-content {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
padding: 1%;
|
||||
left: 17%;
|
||||
top: 21%;
|
||||
width: 70%;
|
||||
height: 60%;
|
||||
background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
z-index: 21;
|
||||
.close-icon {
|
||||
position: absolute;
|
||||
right: 3%;
|
||||
top: 3%;
|
||||
cursor: pointer;
|
||||
color: #ffffff;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
}
|
||||
.dialog-title {
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
font-size: calc(100vw * 18 / 1920);
|
||||
font-family: "OPPOSans-Bold";
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.title-img {
|
||||
width: 3%;
|
||||
height: 3%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.title-text {
|
||||
margin-left: 1%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 73%;
|
||||
width: 12%;
|
||||
left: 44%;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
margin: 5% 30%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
margin: -6% 37%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<Card title="党员行动">
|
||||
<div class="bottom-center">
|
||||
<el-carousel indicator-position="none" pause-on-hover arrow="hover">
|
||||
<el-carousel-item v-for="item in list" :key="item.id">
|
||||
<div class="content-box">
|
||||
<div class="float-window">
|
||||
<div style="margin-left: 3%">{{ item.title }}</div>
|
||||
<div style="margin-right: 3%">{{ item.grossTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
// import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "学习贯彻习近平新时代中国特色社会主义",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "新时代中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
//调整走马灯箭头-左箭头
|
||||
:deep(.el-carousel__arrow--left) {
|
||||
width: 5%;
|
||||
height: 20%;
|
||||
background: rgba(5, 18, 32, 0.7);
|
||||
top: 30%;
|
||||
left: 0%;
|
||||
font-size: calc(100vw * 16 / 1920);
|
||||
border-radius: 0%;
|
||||
color: #a8a8a8;
|
||||
}
|
||||
//右箭头
|
||||
:deep(.el-carousel__arrow--right) {
|
||||
width: 5%;
|
||||
height: 20%;
|
||||
background: rgba(5, 18, 32, 0.7);
|
||||
border-radius: 0%;
|
||||
top: 30%;
|
||||
right: 0%;
|
||||
font-size: calc(100vw * 16 / 1920);
|
||||
color: #a8a8a8;
|
||||
}
|
||||
}
|
||||
.content-box {
|
||||
width: 100%;
|
||||
height: 72%;
|
||||
background: url("@/assets/images/smartPartyBuilding/testPic.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.float-window {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
width: 100%;
|
||||
padding: 2% 0%;
|
||||
color: #ffffff;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(5, 18, 32, 0.7);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Card title="党建新闻">
|
||||
<div class="bottom-left">
|
||||
<!-- <div class="list-content">
|
||||
<div class="list-detail" v-for="item in list" :key="item.id">
|
||||
<div class="detail-pic">
|
||||
<img src="@/assets/images/smartPartyBuilding/testPic.png" alt="" />
|
||||
</div>
|
||||
<div class="detail-text">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="time">{{ item.grossTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
const list = reactive([
|
||||
{
|
||||
id: 1,
|
||||
title: "学习贯彻习近平新时代有中国特色的社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "学习贯彻习近平新时代中国特色社会主义",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "新时代中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "中国特色社会主义思想主题教育深入",
|
||||
grossTime: "2023-01-01 12:00:00"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bottom-left {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.list-content {
|
||||
width: 95%;
|
||||
height: 100%;
|
||||
margin: 0 2% 0 5%;
|
||||
overflow: scroll;
|
||||
.list-detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
padding-top: 4%;
|
||||
.detail-pic {
|
||||
width: 13%;
|
||||
height: 100%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.detail-text {
|
||||
width: 100%;
|
||||
margin-left: 2%;
|
||||
.title {
|
||||
width: 94%;
|
||||
white-space: nowrap; //单行
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
color: #ffffff;
|
||||
}
|
||||
.time {
|
||||
margin-top: 2%;
|
||||
font-size: calc(100vw * 12 / 1920);
|
||||
color: #a1accb;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<Card title="宣传视频">
|
||||
<div class="top-center">111</div>
|
||||
</Card>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import Card from "@/components/card.vue";
|
||||
import symbolIcon from "@/assets/images/lineSymbol.png";
|
||||
import { onMounted, reactive, ref, onBeforeUnmount } from "vue";
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.top-center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="历史告警趋势">
|
||||
<div class="topLeftBox">
|
||||
<div class="content">
|
||||
<div class="history-content">
|
||||
<div class="selectRight">
|
||||
<div class="rightHeader">
|
||||
<div class="day Selected" @click="getNowData(1)" :class="checked == 1 ? 'active' : ''">24时</div>
|
||||
@ -98,7 +98,7 @@ function initOption() {
|
||||
top: "20%",
|
||||
left: "6%",
|
||||
right: "4%",
|
||||
bottom: "7%"
|
||||
bottom: "18%"
|
||||
// containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
@ -266,8 +266,8 @@ onBeforeUnmount(async () => {
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 85%;
|
||||
.history-content {
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
|
||||
@ -265,7 +265,7 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 88%;
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
|
||||
@ -59,9 +59,19 @@ export default {
|
||||
.bottomLeft {
|
||||
width: 50%;
|
||||
margin-right: 1%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 50%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="今日告警趋势">
|
||||
<div class="topLeftBox">
|
||||
<div class="content">
|
||||
<div class="today-content">
|
||||
<!-- <div class="selectRight">
|
||||
<el-select v-model="value" class="m-2" placeholder="Select" size="small" @change="selectChange">
|
||||
<el-option v-for="item in noiseList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
@ -264,9 +264,9 @@ onBeforeUnmount(async () => {
|
||||
margin-left: 6%;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
.today-content {
|
||||
margin-top: 10px;
|
||||
height: 90%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.selectRight {
|
||||
|
||||
@ -170,7 +170,7 @@ onMounted(async () => {});
|
||||
}
|
||||
}
|
||||
.content {
|
||||
height: 88%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||||
|
||||
@ -2,24 +2,24 @@
|
||||
<div class="distribution-box">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<!-- <TopLeft></TopLeft> -->
|
||||
<TopLeft></TopLeft>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
<!-- <TopCenter></TopCenter> -->
|
||||
<TopCenter></TopCenter>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<!-- <TopRight></TopRight> -->
|
||||
<TopRight></TopRight>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottomLeft">
|
||||
<!-- <BottomLeft></BottomLeft> -->
|
||||
<BottomLeft></BottomLeft>
|
||||
</div>
|
||||
<div class="bottomCenter">
|
||||
<!-- <BottomCenter></BottomCenter> -->
|
||||
<BottomCenter></BottomCenter>
|
||||
</div>
|
||||
<div class="bottomRight">
|
||||
<!-- <BottomRight></BottomRight> -->
|
||||
<BottomRight></BottomRight>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,6 +52,11 @@ export default {
|
||||
.topCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
width: 26%;
|
||||
@ -66,6 +71,11 @@ export default {
|
||||
.bottomCenter {
|
||||
margin: 0% 1%;
|
||||
width: 45%;
|
||||
:deep(.h-card) {
|
||||
.content {
|
||||
margin-top: 2% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottomRight {
|
||||
width: 26%;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Card title="实时过磅">
|
||||
<div class="center-bottom">
|
||||
<!-- <div class="realtime-data">
|
||||
<div class="realtime-data">
|
||||
<div class="realtime-box" v-for="item in list" :key="item.id">
|
||||
<div class="text">今日过磅</div>
|
||||
<div class="num">23<span> kg</span></div>
|
||||
@ -16,7 +16,7 @@
|
||||
<div class="num">23kg</div>
|
||||
<div class="text">本次过磅数</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
@ -19,6 +19,11 @@ import { getAirQualityStatisticsApi } from "@/api/modules/headNoise";
|
||||
import * as echarts from "echarts";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import Card from "@/components/card.vue";
|
||||
import firstIcon from "@/assets/images/loadometerManage/first.png";
|
||||
import secondIcon from "@/assets/images/loadometerManage/second.png";
|
||||
import thirdIcon from "@/assets/images/loadometerManage/third.png";
|
||||
import fourthIcon from "@/assets/images/loadometerManage/fourth.png";
|
||||
|
||||
const store = GlobalStore();
|
||||
const airType = ref(1);
|
||||
// 选中
|
||||
@ -49,11 +54,11 @@ const airTypeEchart = ref([
|
||||
"某某某有限公司8",
|
||||
"某某某有限公司9"
|
||||
]);
|
||||
const airTypeData = ref([100, 99, 89, 69, 50, 39, 35, 25, 20]);
|
||||
const airTypeData = ref([100, 89, 79, 69, 50, 39, 35, 25, 20]);
|
||||
const option = reactive({
|
||||
grid: {
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
right: "0%",
|
||||
bottom: "0%",
|
||||
top: "5%",
|
||||
containLabel: true
|
||||
@ -72,19 +77,11 @@ const option = reactive({
|
||||
show: true,
|
||||
inside: true,
|
||||
verticalAlign: "bottom",
|
||||
padding: [0, 0, 10, 0],
|
||||
padding: [0, 0, 8, 30],
|
||||
lineHeight: "20",
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: "14"
|
||||
},
|
||||
formatter: function (val, index) {
|
||||
console.log("val", val, index);
|
||||
if (index === 0 || index === 1 || index === 2) {
|
||||
return index + 1 + " " + val;
|
||||
} else {
|
||||
return val;
|
||||
}
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
@ -104,17 +101,27 @@ const option = reactive({
|
||||
axisLine: "none",
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
verticalAlign: "bottom",
|
||||
padding: [0, 0, 10, 50],
|
||||
padding: [0, 0, 20, 30],
|
||||
lineHeight: "20",
|
||||
textStyle: {
|
||||
color: "#FFFFFF",
|
||||
fontSize: "12"
|
||||
},
|
||||
formatter: function (val: any, index: any) {
|
||||
if (index < 3) {
|
||||
return `{color1|${val}}`;
|
||||
} else {
|
||||
return `{color2|${val}}`;
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
color1: {
|
||||
color: "#EEA959"
|
||||
},
|
||||
color2: {
|
||||
color: "#A0B8E5"
|
||||
}
|
||||
}
|
||||
// formatter: function (val, index) {
|
||||
// // console.log("val", val, index);
|
||||
// return val + " %";
|
||||
// }
|
||||
},
|
||||
data: airTypeData.value
|
||||
},
|
||||
@ -137,27 +144,94 @@ const option = reactive({
|
||||
},
|
||||
barGap: "-100%",
|
||||
label: {
|
||||
show: false,
|
||||
// position:'right',
|
||||
// formatter:'{@score}%',
|
||||
textStyle: {
|
||||
color: "#03fcfe",
|
||||
fontSize: "12"
|
||||
normal: {
|
||||
color: "#FFFFFF",
|
||||
show: true,
|
||||
position: [0, "-24px"],
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
},
|
||||
formatter: function (a) {
|
||||
let num = "";
|
||||
let str = "";
|
||||
if (a.dataIndex + 1 < 10) {
|
||||
// num = "No." + (a.dataIndex + 1);
|
||||
} else {
|
||||
// num = a.dataIndex + 1;
|
||||
}
|
||||
if (a.dataIndex === 0) {
|
||||
str = `{color1|${num}}`;
|
||||
} else if (a.dataIndex === 1) {
|
||||
str = `{color2|${num}}`;
|
||||
} else if (a.dataIndex === 2) {
|
||||
str = `{color3|${num}}`;
|
||||
} else {
|
||||
str = `{color4|${a.dataIndex + 1}}`;
|
||||
}
|
||||
return str;
|
||||
},
|
||||
rich: {
|
||||
color1: {
|
||||
width: 30,
|
||||
height: 20,
|
||||
backgroundColor: {
|
||||
image: firstIcon
|
||||
}
|
||||
},
|
||||
color2: {
|
||||
width: 30,
|
||||
height: 20,
|
||||
backgroundColor: {
|
||||
image: secondIcon
|
||||
}
|
||||
},
|
||||
color3: {
|
||||
width: 30,
|
||||
height: 20,
|
||||
backgroundColor: {
|
||||
image: thirdIcon
|
||||
}
|
||||
},
|
||||
color4: {
|
||||
align: "center",
|
||||
color: "#FFFFFF",
|
||||
backgroundColor: {
|
||||
image: fourthIcon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 10,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#194077"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#4CC4F8"
|
||||
color: (val: any) => {
|
||||
if (val.dataIndex < 3) {
|
||||
let topColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(238, 169, 89, 0)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(238, 169, 89, 1)"
|
||||
}
|
||||
]);
|
||||
return topColor;
|
||||
} else {
|
||||
let nowColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#194077"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#4CC4F8"
|
||||
}
|
||||
]);
|
||||
return nowColor;
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
barWidth: 2,
|
||||
@ -174,7 +248,7 @@ const option = reactive({
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "#fff",
|
||||
borderWidth: 4,
|
||||
borderWidth: 3,
|
||||
color: "#fff",
|
||||
opacity: 1
|
||||
}
|
||||
@ -188,13 +262,12 @@ const option = reactive({
|
||||
yAxisIndex: 0,
|
||||
data: [0, 0, 0, 0, 0, 0, 0, 0, 0], //小白点外圈，数据静态
|
||||
label: false,
|
||||
symbolSize: 15,
|
||||
symbolSize: 16,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: "#4CC4F8",
|
||||
borderWidth: 2,
|
||||
color: "#14346c",
|
||||
opacity: 1
|
||||
borderColor: "#FFFFFF",
|
||||
borderWidth: 1,
|
||||
color: "#14346c"
|
||||
}
|
||||
},
|
||||
z: 2
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user