jianguan
/
yxt-supervise-gd36524-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2023-11-16

master
guoxing 1 year ago
parent
063ffc8bbd
commit
4ba7f2446b
3 changed files with 225 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/echarts/barlineEacharts.vue
  2. 18
      src/views/echarts/pieLineEacharts.vue
  3. 281
      src/views/mortgage/index.vue

2
src/views/echarts/barlineEacharts.vue
View File

@ -113,7 +113,7 @@ export default {
name: '人民币/元', name: '人民币/元',
min: 10000, min: 10000,
max: 25000000, max: 25000000,
interval: 2000000, interval: 5000000,
axisLabel: { axisLabel: {
formatter: '{value} 元', formatter: '{value} 元',
textStyle: { textStyle: {

18
src/views/echarts/pieLineEacharts.vue
View File

@ -80,12 +80,12 @@ export default {
text: this.chartData.pledgeRatePercent+"%", text: this.chartData.pledgeRatePercent+"%",
subtext: "质押率 " + this.chartData.bankPledgeRate + "%", subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
textStyle:{ textStyle:{
fontSize:18, fontSize:14,
color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc" color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
}, },
subtextStyle: { subtextStyle: {
fontSize: 16, fontSize: 12,
color: '#bbbaba' color: '#bbbaba'
}, },
textAlign:"center", textAlign:"center",
@ -108,26 +108,26 @@ export default {
y: 'center', y: 'center',
x:"right", x:"right",
orient: 'vertical', orient: 'vertical',
left:'62%', left:'60%',
align:'left', align:'left',
top:'80', top:'30',
itemGap:30, itemGap:30,
padding:[20,0,20,10], padding:[20,0,20,10],
textStyle: { textStyle: {
color:'#fff', color:'#fff',
fontSize:20, fontSize:14,
padding:[0,10] padding:[0,5]
}, },
height:'auto', height:'auto',
itemWidth:20, itemWidth:15,
itemHeight:20 itemHeight:15
}, },
series: [ series: [
{ {
name:'标签', name:'标签',
type:'pie', type:'pie',
center: ['31%', '50%'], center: ['31%', '50%'],
radius: ['30%', '55%'], radius: ['30%', '50%'],
clockwise: false, //饼图的扇区是否是顺时针排布 clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {

281
src/views/mortgage/index.vue
View File

@ -47,51 +47,7 @@
</div> </div>
</div> </div>
<div class="mortgage_top_item_cons"> <div class="mortgage_top_item_cons">
<div class="mortgage_top_item_cons_left"> <div class="mortgage_top_item_cons_right">
<div class="mortgage_top_item_top">
<img src="@/assets/mprtgage/WarehousePlan.png" alt="" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn1"
@click="cameraClock(0)" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn2"
@click="cameraClock(1)" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn3"
@click="cameraClock(2)" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn4"
@click="cameraClock(3)" />
</div>
<div class="mortgage_top_item_bom">
<div class="mortgage_top_item_bom_left">
<div class="mortgage_top_item_bom_left_item">
<span>
<svg-icon slot="prefix" icon-class="video" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
视频监控
</div>
</div>
<div class="mortgage_top_item_bom_right">
<div class="mortgage_top_item_bom_right_item">
正常<span>
<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
<p>{{StatusCountInfo.online==''||StatusCountInfo.online==null?'0':StatusCountInfo.online}}
</p>
</div>
<div class="mortgage_top_item_bom_right_item">
离线<span>
<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
<p>{{StatusCountInfo.offline==''||StatusCountInfo.offline==null?'0':StatusCountInfo.offline}}
</p>
</div>
</div>
</div>
</div>
<div class="mortgage_top_item_cons_right">
<div class="mortgage_top_item_cons_right_top"> <div class="mortgage_top_item_cons_right_top">
<div class="mortgage_top_item_cons_right_top_video"> <div class="mortgage_top_item_cons_right_top_video">
<iframe :src="spUrl" width="500" height="300" id="ysOpenDevice" allowfullscreen> <iframe :src="spUrl" width="500" height="300" id="ysOpenDevice" allowfullscreen>
@ -109,8 +65,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mortgage_top_item_cons_right_bom"> <!-- <div class="mortgage_top_item_cons_right_bom"> -->
<div class="titele"> <!-- <div class="titele">
<div class="titele_left"> <div class="titele_left">
<span> <span>
<svg-icon icon-class="alarm" class="el-input__icon" <svg-icon icon-class="alarm" class="el-input__icon"
@ -139,7 +95,7 @@
</div> </div>
</div> </div>
</div> </div> -->
<!-- <div class="containers" @mouseenter="mEnter" @mouseleave="mLeave" :style="{ transform: `translate(0px,-${scrollTop}px)` }"> <!-- <div class="containers" @mouseenter="mEnter" @mouseleave="mLeave" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
<div class="container_item2"> <div class="container_item2">
2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span 2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span
@ -155,8 +111,104 @@
2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span> 2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span>
</div> </div>
</div> --> </div> -->
<!-- </div> -->
</div>
<div class="mortgage_top_item_cons_left">
<div class="mortgage_top_item_top">
<img src="@/assets/mprtgage/WarehousePlan.png" alt="" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn1"
@click="cameraClock(0)" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn2"
@click="cameraClock(1)" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn3"
@click="cameraClock(2)" />
<img src="@/assets/mprtgage/camera.jpg" class="mortgage_top_item_top_btn4"
@click="cameraClock(3)" />
</div>
<div class="mortgage_top_item_cons_right_bom">
<div class="titele">
<div class="titele_left">
<span>
<svg-icon icon-class="alarm" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
告警信息
</div>
<div class="titele_right"></div>
</div> </div>
<div class="banner">
<div class="scroll-list">
<div class="container_item2">
2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span
class="container_item-tetxt2">365国润四通道摄像头离线解除</span>
</div>
<div class="container_item1">
2023-10-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润四通道摄像头离线</span>
</div>
<div class="container_item2">
2023-10-16&nbsp;&nbsp;16:13:36&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线解除</span>
</div>
<div class="container_item1">
2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span>
</div>
</div>
</div>
<!-- <div class="containers" @mouseenter="mEnter" @mouseleave="mLeave" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
<div class="container_item2">
2023-10-19&nbsp;&nbsp;20:05:16&nbsp;&nbsp;&nbsp;&nbsp;<span
class="container_item-tetxt2">365国润四通道摄像头离线解除</span>
</div>
<div class="container_item1">
2023-10-19&nbsp;&nbsp;19:33:21&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润四通道摄像头离线</span>
</div>
<div class="container_item2">
2023-10-16&nbsp;&nbsp;16:13:36&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线解除</span>
</div>
<div class="container_item1">
2023-10-16&nbsp;&nbsp;15:26:12&nbsp;&nbsp;&nbsp;&nbsp;<span>365国润三通道摄像头离线</span>
</div>
</div> -->
</div> </div>
<!-- <div class="mortgage_top_item_bom">
<div class="mortgage_top_item_bom_left">
<div class="mortgage_top_item_bom_left_item">
<span>
<svg-icon slot="prefix" icon-class="video" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
视频监控
</div>
</div>
<div class="mortgage_top_item_bom_right">
<div class="mortgage_top_item_bom_right_item">
正常<span>
<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
<p>{{StatusCountInfo.online==''||StatusCountInfo.online==null?'0':StatusCountInfo.online}}
</p>
</div>
<div class="mortgage_top_item_bom_right_item">
离线<span>
<svg-icon slot="prefix" icon-class="diannao" class="el-input__icon"
style="height: 16px; width: 16px" />
</span>
<p>{{StatusCountInfo.offline==''||StatusCountInfo.offline==null?'0':StatusCountInfo.offline}}
</p>
</div>
</div>
</div> -->
</div>
</div> </div>
</div> </div>
</div> </div>
@ -788,14 +840,14 @@
margin-bottom: 10px; margin-bottom: 10px;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding-left: 30px; padding-left: 10px;
padding-right: 30px; padding-right: 10px;
justify-content: space-between; justify-content: space-between;
span { span {
color: #49a6e2; color: #49a6e2;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 18px;
} }
} }
} }
@ -871,9 +923,109 @@
justify-content: space-between; justify-content: space-between;
.mortgage_top_item_cons_left { .mortgage_top_item_cons_left {
width: 58%; width: 38%;
height: 100%; height: 80%;
position: relative; position: relative;
.mortgage_top_item_cons_right_bom {
height: calc(50% - 10px);
width: 100%;
position: relative;
top: 5px;
.titele {
width: 100%;
height: 40px;
display: flex;
align-items: center;
.titele_left {
color: #fff;
width: auto;
height: 100%;
line-height: 40px;
margin-right: 5px;
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
}
.titele_right {
flex: 1;
position: relative;
height: 100%;
&::after {
content: "";
position: absolute;
bottom: 13px;
left: 0px;
width: 100%;
height: 100%;
border-bottom: solid 4px #dadada;
}
}
}
.banner {
position: relative;
/* 父容器需要有明确的高度 */
height: 30px;
width: 100%;
margin: auto;
overflow: hidden;
display: flex;
background: transparent;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
}
.banner>.scroll-list {
position: absolute;
top: 0;
left: 0;
width: 100%;
animation: scroll 5s linear infinite normal;
.container_item1 {
width: 100%;
height: 30px;
line-height: 30px;
color: #E43961;
font-size: 15px;
font-family: '微软雅黑';
box-sizing: border-box;
span {
margin-left: 10px;
}
}
.container_item2 {
width: 100%;
height: 30px;
line-height: 30px;
color: #A0D090;
font-size: 15px;
font-family: '微软雅黑';
box-sizing: border-box;
span {
margin-left: 10px;
}
}
}
@keyframes scroll {
100% {
/* 需要滚动内容的总高度 */
top: -180px;
}
}
}
} }
.mortgage_top_item_cons_right { .mortgage_top_item_cons_right {
@ -890,6 +1042,7 @@
position: relative; position: relative;
.mortgage_top_item_cons_right_top_video { .mortgage_top_item_cons_right_top_video {
margin-top: 30px;
width: 100%; width: 100%;
height: 90%; height: 90%;
position: relative; position: relative;
@ -901,8 +1054,8 @@
} }
.mortgage_top_item_cons_right_top_foor { .mortgage_top_item_cons_right_top_foor {
top: 105px; top: -175px;
width: 100%; width: 500px;
height: 10%; height: 10%;
display: flex; display: flex;
position: relative; position: relative;
@ -1178,7 +1331,7 @@
.mortgage_bom { .mortgage_bom {
width: 100%; width: 100%;
height: calc((100% - 75px) / 2); height: calc((100% - 75px) );
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
@ -1195,12 +1348,10 @@
.mortgage_bom_item_cont { .mortgage_bom_item_cont {
box-sizing: border-box; box-sizing: border-box;
padding: 20px;
.mortgage_bom_item_cont_item { .mortgage_bom_item_cont_item {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
margin-top: 5px;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
@ -1224,7 +1375,6 @@
.mortgage_bom_item_cont { .mortgage_bom_item_cont {
box-sizing: border-box; box-sizing: border-box;
padding-left: 45px;
.mortgage_bom_item_cont_item { .mortgage_bom_item_cont_item {
&:last-child { &:last-child {
@ -1291,7 +1441,7 @@
.mortgage_bom_item_cont { .mortgage_bom_item_cont {
width: 100%; width: 100%;
height: calc(100% - 100px); height: calc(100% - 50px);
position: relative; position: relative;
.mortgage_bom_item_cont_list { .mortgage_bom_item_cont_list {
@ -1301,7 +1451,6 @@
.mortgage_bom_item_cont_list_item { .mortgage_bom_item_cont_list_item {
width: 100%; width: 100%;
margin-top: 15px;
height: calc(100% / 5); height: calc(100% / 5);
position: relative; position: relative;
display: flex; display: flex;
@ -1315,7 +1464,7 @@
align-items: center; align-items: center;
color: #0EC0B4; color: #0EC0B4;
margin-left: 10px; margin-left: 10px;
font-size: 20px; font-size: 16px;
font-weight: 600; font-weight: 600;
font-family: sans-serif; font-family: sans-serif;
} }
@ -1328,7 +1477,7 @@
align-items: center; align-items: center;
justify-content: right; justify-content: right;
color: #FF7E3F; color: #FF7E3F;
font-size: 23px; font-size: 18px;
font-weight: 600; font-weight: 600;
font-family: sans-serif; font-family: sans-serif;
} }
@ -1337,7 +1486,7 @@
.mortgage_bom_item_cont_item { .mortgage_bom_item_cont_item {
width: 100%; width: 100%;
height: calc(100% / 5); height: calc(100% / 7);
position: relative; position: relative;
display: flex; display: flex;
border-bottom: solid 1px #dadada; border-bottom: solid 1px #dadada;
@ -1348,7 +1497,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
color: #0EC0B4; color: #0EC0B4;
font-size: 20px; font-size: 16px;
font-weight: 600; font-weight: 600;
font-family: sans-serif; font-family: sans-serif;
} }
@ -1360,7 +1509,7 @@
align-items: center; align-items: center;
justify-content: right; justify-content: right;
color: #FF7E3F; color: #FF7E3F;
font-size: 23px; font-size: 18px;
font-weight: 600; font-weight: 600;
font-family: sans-serif; font-family: sans-serif;
} }

Write Preview
Loading…
Cancel
Save