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

2023-11-17

master
guoxing 1 year ago
parent
ed4d5ff761
commit
2b390ceb13
3 changed files with 275 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      src/views/echarts/pieLineEacharts.vue
  2. 27
      src/views/mortgage/index.vue
  3. 294
      src/views/mortgage/yqpb2.vue

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

@ -80,17 +80,17 @@ export default {
text: this.chartData.pledgeRatePercent+"%",
subtext: "质押率 " + this.chartData.bankPledgeRate + "%",
textStyle:{
fontSize:14,
fontSize:10,
color:this.chartData.state == '2' ? "#ff7e4b" : "#ccc"
},
subtextStyle: {
fontSize: 12,
fontSize: 10,
color: '#bbbaba'
},
textAlign:"center",
x: '30.5%',
y: '43%',
x: '30%',
y: '35%',
}],
tooltip: {
trigger: 'item',
@ -110,8 +110,8 @@ export default {
orient: 'vertical',
left:'60%',
align:'left',
top:'30',
itemGap:30,
top:'0',
itemGap:10,
padding:[20,0,20,10],
textStyle: {
color:'#fff',
@ -126,8 +126,8 @@ export default {
{
name:'标签',
type:'pie',
center: ['31%', '50%'],
radius: ['30%', '50%'],
center: ['31%', '45%'],
radius: ['50%', '70%'],
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {

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

@ -1,5 +1,5 @@
<template style="height:100%;overflow-y: auto;">
<div class="mortgage" style="min-height:100%;overflow-y: auto;">
<div class="mortgage" style="overflow-y: auto;">
<div class="mortgage_tit">国大36524项目</div>
<div class="mortgage_top">
<div class="mortgage_top_item">
@ -19,7 +19,7 @@
</div>
<div class="mortgage_top_item_coner">
<div class="mortgage_top_item_coner_eat">
<pieLineEachartsVue :width="`100%`" :height="`100%`" :chartData="chartData">
<pieLineEachartsVue :width="`100%`" :height="`80%`" :chartData="chartData">
</pieLineEachartsVue>
</div>
<div class="mortgage_top_item_coner_con">
@ -50,7 +50,7 @@
<div class="mortgage_top_item_cons_right">
<div class="mortgage_top_item_cons_right_top">
<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="250" id="ysOpenDevice" allowfullscreen>
</iframe>
</div>
<div class="mortgage_top_item_cons_right_top_foor">
@ -263,7 +263,7 @@
</div>
</div>
<div class="mortgage_bom_item_cont">
<barlineEachartsVue :width="`100%`" :height="'270px'" :chartData="chartData2"></barlineEachartsVue>
<barlineEachartsVue :width="`100%`" :height="'180px'" :chartData="chartData2"></barlineEachartsVue>
</div>
</div>
<div class="mortgage_bom_item" style="margin-left: 32px;padding-right: 30px;">
@ -659,7 +659,7 @@
.mortgage_top {
width: 100%;
height: 60%;
height: 52%;
position: relative;
display: flex;
justify-content: space-between;
@ -824,7 +824,7 @@
.mortgage_top_item_coner {
width: 100%;
height: calc(100% - 40px);
height: calc(100% - 110px);
position: relative;
.mortgage_top_item_coner_eat {
@ -854,7 +854,7 @@
.mortgage_top_item_top {
width: 100%;
height: 85%;
height: 75%;
position: relative;
img {
@ -977,7 +977,7 @@
background: transparent;
justify-content: center;
flex-wrap: wrap;
margin-top: 20px;
margin-top: 10px;
}
.banner>.scroll-list {
@ -1331,7 +1331,7 @@
.mortgage_bom {
width: 100%;
height: calc((100%) );
height: 45%;
display: flex;
align-items: center;
position: relative;
@ -1447,14 +1447,13 @@
.mortgage_bom_item_cont_list {
width: 100%;
height: calc(100% / 6);
padding-top: 15px;
margin-top: 5px;
.mortgage_bom_item_cont_list_item {
width: 100%;
height: calc(100% / 5);
height: 35px;
position: relative;
display: flex;
padding-bottom: 20px;
padding-bottom: 5px;
border-bottom: solid 1px #dadada;
.mortgage_bom_item_cont_list_item_left {
@ -1486,7 +1485,7 @@
.mortgage_bom_item_cont_item {
width: 100%;
height: calc(100% / 7);
height: 35px;
position: relative;
display: flex;
border-bottom: solid 1px #dadada;

294
src/views/mortgage/yqpb2.vue
View File

@ -9,42 +9,112 @@
<div class="layout-left-top">
<span class="layout-left-top-title">累计订货量</span>
<div class="layout-left-top-label">
<span >品类</span>
<span>品类</span>
<span>数量(单位：公斤/升)</span>
</div>
<div v-for="(item,index) in ztsj" :index="index" class="layout-left-top-list">
<div class="layout-left-top-list-item">
<span class="layout-left-top-list-name" >{{ item.typeName }}</span>
<span class="layout-left-top-list-value">{{ item.allData }}</span>
<div v-for="(item,index) in ztsj" :index="index" class="layout-left-top-list">
<div class="layout-left-top-list-item">
<span class="layout-left-top-list-name">{{ item.typeName }}</span>
<span class="layout-left-top-list-value">{{ item.allData }}</span>
</div>
</div>
</div>
</div>
<div class="layout-left-contre">
<span class="layout-left-contre-title">上月订货量</span>
<div class="layout-left-contre-label">
<span>品类</span>
<span>数量(单位：公斤/升)</span>
</div>
<div v-for="(item,index) in ztsj" :index="index" class="layout-left-contre-list">
<div class="layout-left-contre-list-item">
<span class="layout-left-contre-list-name">{{ item.typeName }}</span>
<span class="layout-left-contre-list-value">{{ item.allMonthPre }}</span>
</div>
</div>
</div>
<div class="layout-left-bom">
<span class="layout-left-bom-title">本月订货量</span>
<div class="layout-left-bom-label">
<span>品类</span>
<span>数量(单位：公斤/升)</span>
<span>增长量</span>
</div>
<div v-for="(item,index) in ztsj" :index="index" class="layout-left-bom-list">
<div class="layout-left-bom-list-item">
<span class="layout-left-bom-list-name">{{ item.typeName }}</span>
<span class="layout-left-bom-list-value">{{ item.allMonthPre }}</span>
<span class="layout-left-bom-list-growth">{{ item.allMonthIncrement }}</span>
</div>
</div>
</div>
</div>
<div class="layout-contre">
<div class="layout-contre-top">
<span>现场视频</span>
<div class="layout-contre-top-title">
<span >通道一</span>
<div class="layout-contre-top-title-show">
<span @click="cameraType" style="margin-right: 5px;">{{videos?"监控回放":'实时监控'}}</span>
<svg-icon icon-class="huifang" class="el-input__icon"
style="height: 16px; width: 16px" @click="clivideo" />
</div>
</div>
<div class="layout-contre-top_video">
<iframe :src="spUrl" width="100%" height="350px" id="ysOpenDevice" allowfullscreen>
</iframe>
</div>
</div>
<div class="layout-contre-bom">
</div>
</div>
<div class="layout-right">
<div class="layout-right-contre">
</div>
<div class="layout-right-bom">
</div>
</div>
</div>
@ -64,6 +134,7 @@
export default {
data() {
return {
videos:false,
ztsj: [],
zhpm: []
}
@ -204,73 +275,216 @@
display: flex;
flex-direction: row;
padding: 20px;
.layout-left{
.layout-left {
width: 25%;
display: flex;
flex-direction: column;
.layout-left-top{
.layout-left-top {
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
.layout-left-top-title{
.layout-left-top-title {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-left-top-label{
.layout-left-top-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span{
margin-top: 10px;
span {
margin-top: 20px;
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
}
.layout-left-top-list{
.layout-left-top-list {
margin-top: 10px;
display: flex;
flex-direction: column;
.layout-left-top-list-item{
.layout-left-top-list-item {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.layout-left-top-list-name{
}
.layout-left-top-list-value{
}
.layout-left-top-list-name {}
.layout-left-top-list-value {}
}
}
}
.layout-left-contre{
margin-top: 15px;
.layout-left-contre {
margin-top: 20px;
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
.layout-left-contre-title {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-left-contre-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span {
margin-top: 20px;
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
}
.layout-left-contre-list {
margin-top: 10px;
display: flex;
flex-direction: column;
.layout-left-contre-list-item {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.layout-left-contre-list-name {}
.layout-left-contre-list-value {}
}
}
}
.layout-left-bom{
.layout-left-bom {
margin-top: 15px;
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
.layout-left-bom-title {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-left-bom-label {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
span {
margin-top: 20px;
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
}
.layout-left-bom-list {
margin-top: 10px;
display: flex;
flex-direction: column;
.layout-left-bom-list-item {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
flex-direction: row;
align-items: center;
justify-content: space-between;
.layout-left-bom-list-name {}
.layout-left-bom-list-value {}
.layout-left-bom-list-growth {}
}
}
}
}
.layout-contre{
width: 40%;
.layout-contre {
width: 45%;
margin-left: 30px;
display: flex;
flex-direction: column;
.layout-contre-top {
background-color: #031249;
display: flex;
flex-direction: column;
padding: 20px;
span {
font-size: 25px;
font-weight: 600;
font-family: sans-serif;
}
.layout-contre-top-title{
display: flex;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
flex-direction: row;
justify-content: space-between;
span {
font-size: 20px;
font-weight: 600;
font-family: sans-serif;
}
.layout-contre-top-title-show{
}
}
.layout-contre-top_video {
margin-top: 20px;
}
}
.layout-contre-bom {
margin-top: 20px;
background-color: #031249;
}
}
.layout-right{
.layout-right {
width: 25%;
.layout-right-top {}
.layout-right-contre {}
.layout-right-bom {}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save