Merge branch 'yjl_dev' into 'shenzhen-dev'
综合管理-工程概况页面布局 See merge request !15
This commit is contained in:
袁晶琳
commit
b3dedd304c
BIN
src/assets/images/comprehensiveManage/project1.png
Normal file
BIN
src/assets/images/comprehensiveManage/project1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/comprehensiveManage/project10.png
Normal file
BIN
src/assets/images/comprehensiveManage/project10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
BIN
src/assets/images/comprehensiveManage/project11.png
Normal file
BIN
src/assets/images/comprehensiveManage/project11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/assets/images/comprehensiveManage/project12.png
Normal file
BIN
src/assets/images/comprehensiveManage/project12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/images/comprehensiveManage/project13.png
Normal file
BIN
src/assets/images/comprehensiveManage/project13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
BIN
src/assets/images/comprehensiveManage/project2.png
Normal file
BIN
src/assets/images/comprehensiveManage/project2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
src/assets/images/comprehensiveManage/project3.png
Normal file
BIN
src/assets/images/comprehensiveManage/project3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
src/assets/images/comprehensiveManage/project4.png
Normal file
BIN
src/assets/images/comprehensiveManage/project4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
src/assets/images/comprehensiveManage/project5.png
Normal file
BIN
src/assets/images/comprehensiveManage/project5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
src/assets/images/comprehensiveManage/project6.png
Normal file
BIN
src/assets/images/comprehensiveManage/project6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 679 B |
BIN
src/assets/images/comprehensiveManage/project7.png
Normal file
BIN
src/assets/images/comprehensiveManage/project7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/comprehensiveManage/project8.png
Normal file
BIN
src/assets/images/comprehensiveManage/project8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 793 B |
BIN
src/assets/images/comprehensiveManage/project9.png
Normal file
BIN
src/assets/images/comprehensiveManage/project9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@ -1,13 +1,164 @@
|
||||
<template>
|
||||
<div>
|
||||
5
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="进度概况">
|
||||
<div class="progressContent">
|
||||
<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
|
||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
|
||||
<div><i>倒计时</i></div>
|
||||
</div>
|
||||
<div class="totalDay">
|
||||
<div style="line-height: 45px">
|
||||
项目总天数
|
||||
<span class="dayImg">1</span>
|
||||
<span class="dayImg">0</span>
|
||||
<span class="dayImg">4</span>
|
||||
<span class="dayImg">7</span>
|
||||
<span style="margin-left: 4%">天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="residueDay">
|
||||
<div style="line-height: 45px">
|
||||
项目剩余天数
|
||||
<span class="dayImg">0</span>
|
||||
<span class="dayImg">2</span>
|
||||
<span class="dayImg">8</span>
|
||||
<span class="dayImg">6</span>
|
||||
<span style="margin-left: 4%">天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 3%;margin-left: 0.5%; color: #fff; font-size: 16px; width: 30%; position: absolute">
|
||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
|
||||
<div><i>里程碑</i></div>
|
||||
</div>
|
||||
<div class="progressData">
|
||||
<div class="data" v-for="item in progressList">
|
||||
<div v-if="item.status==0" class="text" :title="item.name">{{ item.name }}</div>
|
||||
<img v-if="item.status==0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
|
||||
<div v-if="item.status==1" style="color: #fff;font-size:18px;margin-top: -8%;" :title="item.name" class="statusImg1">{{ item.name }}</div>
|
||||
<img v-if="item.status==1" style="width: 40px;margin-top: 2%;" src="@/assets/images/comprehensiveManage/project11.png" alt="" />
|
||||
<div v-if="item.status==1" class="statusImg"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref } from "vue";
|
||||
const progressList = ref([
|
||||
{
|
||||
name: "施工证获取",
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
name: "土方开挖",
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
name: "桩基",
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
name: "支护开始",
|
||||
status: 1
|
||||
},
|
||||
{
|
||||
name: "垫层完成",
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
name: "正负零",
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
name: "工程达到预售条件",
|
||||
status: 0
|
||||
},
|
||||
{
|
||||
name: "主体施工",
|
||||
status: 0
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.progressContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.totalDay {
|
||||
width: 40%;
|
||||
float: left;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.residueDay {
|
||||
width: 40%;
|
||||
float: right;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.dayImg {
|
||||
margin-left: 2%;
|
||||
font-size: 26px;
|
||||
display: inline-block;
|
||||
width: 35px;
|
||||
height: 45px;
|
||||
font-family: sadigitalNumber;
|
||||
background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
color: #4ac0f3;
|
||||
}
|
||||
.progressData {
|
||||
width: 96%;
|
||||
height: 15%;
|
||||
margin: 13.5% 2% 0 2%;
|
||||
background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
.data {
|
||||
color: #ccc;
|
||||
font-size: 15px;
|
||||
margin-top: -1%;
|
||||
margin-left: 5%;
|
||||
.text {
|
||||
width: 60px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
margin-top: 18%;
|
||||
margin-left: 15%;
|
||||
}
|
||||
}
|
||||
.statusImg{
|
||||
position: absolute;
|
||||
top: 97%;
|
||||
left: 45%;
|
||||
width: 120px;
|
||||
height: 2px;
|
||||
background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.statusImg1{
|
||||
background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
margin-top: 1.8%;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
4
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="宣传视频">
|
||||
<div class="videoBox">
|
||||
<video src="" class="videos" autoplay controls loop></video>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/comprehensiveManage/project10.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.videos {
|
||||
width: 78%;
|
||||
height: 92%;
|
||||
margin: 3% 11%;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
工程概况
|
||||
</div>
|
||||
<div class="projectContent">
|
||||
<div class="left">
|
||||
<leftTop class="leftTop"></leftTop>
|
||||
<leftCenter class="leftCenter"></leftCenter>
|
||||
<leftBottom class="leftBottom"></leftBottom>
|
||||
</div>
|
||||
<div class="center">
|
||||
<centerTop class="centerTop"></centerTop>
|
||||
<centerBottom class="centerBottom"></centerBottom>
|
||||
</div>
|
||||
<div class="right">
|
||||
<rightTop class="rightTop"></rightTop>
|
||||
<rightCenter class="rightCenter"></rightCenter>
|
||||
<rightBottom class="rightBottom"></rightBottom>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import leftTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftTop.vue";
|
||||
import leftCenter from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftCenter.vue";
|
||||
import leftBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/leftBottom.vue";
|
||||
import centerTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerTop.vue";
|
||||
import centerBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/centerBottom.vue";
|
||||
import rightTop from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightTop.vue";
|
||||
import rightCenter from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightCenter.vue";
|
||||
import rightBottom from "@/views/sevenLargeScreen/comprehensiveManage/projectOverview/rightBottom.vue";
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.projectContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.left {
|
||||
width: 26%;
|
||||
.leftTop {
|
||||
height: 32%;
|
||||
}
|
||||
.leftCenter {
|
||||
height: 33%;
|
||||
margin: 3% 0 3% 0;
|
||||
}
|
||||
.leftBottom {
|
||||
height: 32%;
|
||||
}
|
||||
}
|
||||
.center {
|
||||
width: 46%;
|
||||
margin: 0 1%;
|
||||
|
||||
<style scoped>
|
||||
.centerTop{
|
||||
height: 66%;
|
||||
margin-bottom: 2.1%;
|
||||
|
||||
}
|
||||
.centerBottom{
|
||||
height: 32%;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 26%;
|
||||
|
||||
.rightTop {
|
||||
height: 32%;
|
||||
}
|
||||
.rightCenter {
|
||||
height: 33%;
|
||||
margin: 3% 0 3% 0;
|
||||
}
|
||||
.rightBottom {
|
||||
height: 32%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
3
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="智能设备">
|
||||
<div class="deviceData">
|
||||
<div class="deviceDataA">
|
||||
<div class="num"><i>2</i></div>
|
||||
<div class="text">实名制设备数</div>
|
||||
</div>
|
||||
<div class="deviceDataB">
|
||||
<div class="num"><i>2</i></div>
|
||||
<div class="text">环境设备数</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.deviceData {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.deviceDataA {
|
||||
width: 40%;
|
||||
height: 85%;
|
||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 4% 5%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.deviceDataB {
|
||||
width: 40%;
|
||||
height: 85%;
|
||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 4% 5%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.num {
|
||||
margin-top: 30%;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
2
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="人员概况">
|
||||
<div class="topPeopleNum">
|
||||
<div class="dataTlo">
|
||||
<div class="text"><i>实名制人数</i></div>
|
||||
<div class="num"><i>1024</i></div>
|
||||
</div>
|
||||
<div class="dataTlt">
|
||||
<div class="text"><i>在场人数</i></div>
|
||||
<div class="num"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottomPeopleNum">
|
||||
<div style="display: flex; margin-left: 2%">
|
||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 2%"></div>
|
||||
<div><i>管理人员</i></div>
|
||||
</div>
|
||||
<div class="peopleData">
|
||||
<div class="peoImg"><img src="@/assets/images/comprehensiveManage/project3.png" alt="" /></div>
|
||||
<div class="peoNum">
|
||||
<div class="penName"></div>
|
||||
<div class="penN"></div>
|
||||
<div class="numData1 numData">
|
||||
<div class="text"><i>甲方人员</i></div>
|
||||
<div class="num"><i style="color: #eea959">1/2</i></div>
|
||||
</div>
|
||||
<div class="numData2 numData">
|
||||
<div class="text"><i>监理人员</i></div>
|
||||
<div class="num"><i style="color: #82fbea">1/1</i></div>
|
||||
</div>
|
||||
<div class="numData3 numData">
|
||||
<div class="text"><i>乙方人员</i></div>
|
||||
<div class="num"><i style="color: #7aa0ea">0/1</i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.topPeopleNum {
|
||||
height: 40%;
|
||||
display: flex;
|
||||
.dataTlo {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.dataTlt {
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
.text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
margin-left: 50%;
|
||||
margin-top: 15%;
|
||||
}
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
margin-left: 47%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
}
|
||||
.bottomPeopleNum {
|
||||
height: 60%;
|
||||
div {
|
||||
height: 20%;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
.peopleData {
|
||||
height: 80%;
|
||||
display: flex;
|
||||
.peoImg {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
img {
|
||||
margin-left: 30%;
|
||||
width: 50%;
|
||||
margin-top: 7%;
|
||||
}
|
||||
}
|
||||
.peoNum {
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
position: relative;
|
||||
.penName {
|
||||
background: rgba(39, 88, 192, 0.6);
|
||||
margin: 5% 5%;
|
||||
}
|
||||
.penN {
|
||||
height: 10px;
|
||||
background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 13% 5%;
|
||||
}
|
||||
.numData1 {
|
||||
left: 8%;
|
||||
top: -10%;
|
||||
}
|
||||
.numData2 {
|
||||
left: 40%;
|
||||
top: -10%;
|
||||
}
|
||||
.numData3 {
|
||||
left: 70%;
|
||||
top: -10%;
|
||||
}
|
||||
.numData {
|
||||
position: absolute;
|
||||
height: 60%;
|
||||
width: 30%;
|
||||
.text {
|
||||
margin-top: 18%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.num {
|
||||
font-size: 20px;
|
||||
margin-top: 20%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="项目信息">
|
||||
<div class="projectInfo">
|
||||
<div><span>项目名称：</span> 福永意库项目</div>
|
||||
<div><span>项目地址：</span> 广东省深圳市宝安区丰业路德轩阁东南侧约70米</div>
|
||||
<div><span>项目经理：</span> 李翔</div>
|
||||
<div><span>联系电话：</span> 13538606766</div>
|
||||
<div><span>建筑面积：</span> 150000㎡</div>
|
||||
<div><span>开工日期：</span> 项目编号</div>
|
||||
<div><span>工程类别：</span> 房建</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
import Card from "@/components/card.vue";
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.projectInfo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding: 3% 0 0 4%;
|
||||
|
||||
div {
|
||||
height: 13%;
|
||||
font-size: 14px;
|
||||
span{
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,501 @@
|
||||
<template>
|
||||
<div>
|
||||
8
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="环境监测">
|
||||
<div class="box">
|
||||
<div id="echartsHjjc" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
|
||||
<div class="footerData">{{ analysisData }}</div>
|
||||
<div class="colour">
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
|
||||
<div class="size">优</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #ffbb38"></div>
|
||||
<div class="size">良</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #fe7a18"></div>
|
||||
<div class="size">轻度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #7718fe"></div>
|
||||
<div class="size">中度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #890ea1"></div>
|
||||
<div class="size">重度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
|
||||
<div class="size">严重污染</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
<script lang="ts" setup>
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { getCurrentDayAirQualityApi } from "@/api/modules/headNoise";
|
||||
import { ref, onMounted, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
const analysisData = ref(10 as any);
|
||||
const posCenter = ref(["50%", "64%"]);
|
||||
|
||||
function drawChart() {
|
||||
let leftTopEcharts = echarts.init(document.getElementById("echartsHjjc"));
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
// 外围刻度
|
||||
type: "gauge",
|
||||
radius: "100%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 10,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 18,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(151, 12, 12, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: "rgba(137, 14, 161, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "rgba(119, 24, 254, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(254, 122, 24, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "rgba(255, 187, 56, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(101, 215, 249, 1)"
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
distance: -40
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
// 内侧指针、数值显示
|
||||
name: "",
|
||||
type: "gauge",
|
||||
radius: "95%",
|
||||
center: posCenter.value,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0, //最小刻度
|
||||
max: 100, //最大刻度
|
||||
splitNumber: 20, //刻度数量
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}, //刻度标签。
|
||||
axisTick: {
|
||||
show: false
|
||||
}, //刻度样式
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#87E0FB",
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value
|
||||
}
|
||||
],
|
||||
z: 9
|
||||
},
|
||||
// 第三个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "70%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(1,192,229)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#87E0FB "
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
// 第二个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "45%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(1,192,229)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#87E0FB "
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
// 第一个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "25%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 200,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(135, 224, 251, 0.2)"
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: "rgba(135, 224, 251, 0.7)"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "transparent"]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "70%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 0, //刻度数量
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 26,
|
||||
color: [
|
||||
[
|
||||
analysisData.value / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(135, 224, 251, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#fff"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "transparent"]
|
||||
]
|
||||
}
|
||||
},
|
||||
//分隔线样式。
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
//仪表盘详情，用于显示数据。
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
color: "red"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
//指针外环
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
center: posCenter.value,
|
||||
radius: ["8%", "6%"],
|
||||
// width:5,
|
||||
z: 10,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#87E0FB"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
//指针内环
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
center: posCenter.value,
|
||||
radius: ["-2%", "4%"],
|
||||
z: 10,
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(7, 31, 60) "
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
leftTopEcharts.setOption(option);
|
||||
// window.onresize = function () {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
//获取环境监测数据
|
||||
const getList = async () => {
|
||||
const res = await getCurrentDayAirQualityApi({ projectSn: store.sn });
|
||||
console.log("获取环境监测数据", res);
|
||||
if (res.result) {
|
||||
analysisData.value = res.result.analysisData;
|
||||
}
|
||||
console.log("analysisData", analysisData.value);
|
||||
drawChart();
|
||||
};
|
||||
onMounted(() => {
|
||||
// getList();
|
||||
drawChart();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.footerData {
|
||||
position: absolute;
|
||||
top: 69%;
|
||||
left: 48%;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: calc(100vw * 14 / 1920);
|
||||
color: #fff;
|
||||
}
|
||||
.colour {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
font-size: calc(100vw * 10 / 1920);
|
||||
left: 8%;
|
||||
top: 80%;
|
||||
color: #fff;
|
||||
|
||||
.colour_content {
|
||||
width: 14%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.size {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,291 @@
|
||||
<template>
|
||||
<div>
|
||||
7
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="质量管理">
|
||||
|
||||
<div id="echartsQuity" style="width: 100%; height: 100%"></div>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "未整改安全问题",
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4CC4F8",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "已整改安全问题",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#82FBEA",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartsQuity"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: 24,
|
||||
subtext: "安全问题数",
|
||||
x: "19%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 26,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
width: "200px",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
var value = dataList.value[i].value;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value|" + value + " "+ "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "90%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(54, 128, 174,0.4)"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "80%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: [65, 75],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55", "60"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.leftTop{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .h-card .content{
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
@ -1,13 +1,291 @@
|
||||
<template>
|
||||
<div>
|
||||
6
|
||||
</div>
|
||||
<div class="leftTop">
|
||||
<Card title="安全管理">
|
||||
|
||||
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
|
||||
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "未整改安全问题",
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "已整改安全问题",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6375C7",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartsSafe"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: 24,
|
||||
subtext: "安全问题数",
|
||||
x: "19%",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 26,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
width: "200px",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal",
|
||||
align: "center",
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
var value = dataList.value[i].value;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value|" + value + " "+ "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "90%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(54, 128, 174,0.4)"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "80%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: [65, 75],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["55", "60"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.leftTop{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .h-card .content{
|
||||
height: 80%;
|
||||
}
|
||||
</style>
|
||||
@ -267,7 +267,7 @@ function jumpBgd() {
|
||||
background-size: 100% 100%;
|
||||
|
||||
.header {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 12%;
|
||||
background: url("@/assets/images/headerImg.webp") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
@ -275,10 +275,9 @@ function jumpBgd() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(100vw * 42 / 1920);
|
||||
font-size: 42px;
|
||||
color: #fff;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.rightIcon {
|
||||
position: absolute;
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>已逾期数</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
<div class="numStyle2"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate6 data">
|
||||
@ -105,6 +105,19 @@ import Card from "@/components/card.vue";
|
||||
margin-top: 15%;
|
||||
background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.numStyle2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 15%;
|
||||
background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: linear-gradient(to right, rgba(236, 98, 102, 1), rgba(255, 255, 255, 1));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.lineDate1 {
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="text"><i>已逾期数</i></div>
|
||||
<div class="numStyle"><i>1024</i></div>
|
||||
<div class="numStyle2"><i>1024</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineDate6 data">
|
||||
@ -105,6 +105,19 @@ import Card from "@/components/card.vue";
|
||||
margin-top: 15%;
|
||||
background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.numStyle2 {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-top: 15%;
|
||||
background: url("@/assets/images/securityManagement/safeImg4.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-image: linear-gradient(to right, rgba(236, 98, 102, 1), rgba(255, 255, 255, 1));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
.lineDate1 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user