huoran
/
FE_huoran_data
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

可视化改版

Browse Source
dev_2022-04-07
yujialong 3 years ago
parent 67c0225b70
commit 83bcdb0461
2 changed files with 322 additions and 756 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. 159
      src/pages/screen/list/index.vue
  2. 535
      src/styles/page/screen.scss

159
src/pages/screen/list/index.vue
Unescape View File

@ -10,10 +10,9 @@
</div> </div>
<!--main--> <!--main-->
<div class="data_content"> <div class="content">
<div class="data_main"> <div class="left">
<div class="main_left fl"> <div class="item">
<div class="left_1 t_btn6" style="cursor: pointer;">
<!--左上边框--> <!--左上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
@ -40,7 +39,7 @@
</div> </div>
<div id="chart1" class="chart" style="height: 280px;"></div> <div id="chart1" class="chart" style="height: 280px;"></div>
</div> </div>
<div class="left_2" style="cursor: pointer;"> <div class="item">
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
<i class="l_t_line"></i> <i class="l_t_line"></i>
@ -59,13 +58,55 @@
</div> </div>
<div class="main_title"> <div class="main_title">
<img src="@/assets/img/screen/t_2.png" alt=""> <img src="@/assets/img/screen/t_2.png" alt="">
国际旅游外汇收入构成 新增信贷数据
</div>
<div id="chart5" class="chart t_btn9" style="height: 280px;"></div>
</div>
<div class="item">
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt="">
{{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
</div>
<div class="main_table">
<table>
<thead>
<tr>
<th width="70%">概况名称</th>
<th>指数</th>
</tr>
</thead>
</table>
</div>
<div class="main_table" ref="tableWrap" style="height: 196px;margin-top: 0;overflow: auto">
<table>
<tbody>
<tr v-for="(item, i) in goodsSell" :key="i">
<td width="70%">{{ item.hct }}</td>
<td>{{ item.rcpi }}</td>
</tr>
</tbody>
</table>
</div> </div>
<div id="chart2" class="chart t_btn9" style="height: 280px;"></div>
</div> </div>
</div> </div>
<div class="main_center fl"> <div class="middle">
<div class="center_text" style="position: relative;margin-bottom: 25px;"> <div class="item" style="height: 350px">
<!--左上边框--> <!--左上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
@ -110,9 +151,8 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<!-- <div id="chart_map" style="width:100%;height:610px;"></div> -->
</div> </div>
<div class="center_text" style="position: relative;height: 232px"> <div class="item" style="height: 520px">
<!--左上边框--> <!--左上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
@ -135,17 +175,13 @@
</div> </div>
<div class="main_title"> <div class="main_title">
<img src="@/assets/img/screen/t_3.png" alt=""> <img src="@/assets/img/screen/t_3.png" alt="">
全国用电及客运情况 主要央行利率
</div> </div>
<div class="charts">
<div class="chart" id="chart7"></div> <div class="chart" id="chart7"></div>
<div class="chart" id="chart8"></div>
</div> </div>
</div> </div>
</div> <div class="right">
<div class="item">
<div class="main_right fr">
<div class="right_1">
<!--左上边框--> <!--左上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
@ -172,7 +208,7 @@
</div> </div>
<div id="chart3" class="echart t_btn7" style="height: 280px;"></div> <div id="chart3" class="echart t_btn7" style="height: 280px;"></div>
</div> </div>
<div class="right_2"> <div class="item">
<!--左上边框--> <!--左上边框-->
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
@ -199,77 +235,7 @@
</div> </div>
<div id="chart4" style="height: 280px;"></div> <div id="chart4" style="height: 280px;"></div>
</div> </div>
</div> <div class="item">
</div>
<div class="data_bottom">
<div class="bottom_1 fl t_btn5">
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt="">
{{ goodsSell.length ? goodsSell[0].operation_time.substr(0, 4) : 2021 }}年商品零售价格指数
</div>
<div class="main_table t_btn8">
<table>
<thead>
<tr>
<th width="70%">概况名称</th>
<th>指数</th>
</tr>
</thead>
</table>
</div>
<div class="main_table t_btn8" ref="tableWrap" style="height: 215px;margin-top: 0;overflow: auto">
<table>
<tbody>
<tr v-for="(item, i) in goodsSell" :key="i">
<td width="70%">{{ item.hct }}</td>
<td>{{ item.rcpi }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bottom_center fl">
<div class="bottom_2 fl">
<div class="t_line_box">
<i class="t_l_line"></i>
<i class="l_t_line"></i>
</div>
<div class="t_line_box">
<i class="t_r_line"></i>
<i class="r_t_line"></i>
</div>
<div class="t_line_box">
<i class="l_b_line"></i>
<i class="b_l_line"></i>
</div>
<div class="t_line_box">
<i class="r_b_line"></i>
<i class="b_r_line"></i>
</div>
<div class="main_title">
<img src="@/assets/img/screen/t_7.png" alt="">
新增信贷数据
</div>
<div id="chart5" class="chart" style="height: 310px;"></div>
</div>
</div>
<div class="bottom_4 fr">
<div class="t_line_box"> <div class="t_line_box">
<i class="t_l_line"></i> <i class="t_l_line"></i>
<i class="l_t_line"></i> <i class="l_t_line"></i>
@ -290,7 +256,7 @@
<img src="@/assets/img/screen/t_7.png" alt=""> <img src="@/assets/img/screen/t_7.png" alt="">
以美元计算进口年率 以美元计算进口年率
</div> </div>
<div id="chart6" class="chart" style="height: 310px;"></div> <div id="chart6" class="chart" style="height: 270px;"></div>
</div> </div>
</div> </div>
</div> </div>
@ -299,7 +265,6 @@
<script> <script>
import Setting from '@/setting' import Setting from '@/setting'
import util from '@/libs/util'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import SockJS from 'sockjs-client' import SockJS from 'sockjs-client'
import Stomp from 'stompjs' import Stomp from 'stompjs'
@ -409,7 +374,7 @@ export default {
// id和操作时间不用显示 // id和操作时间不用显示
e.field !== 'id' && e.field !== 'operation_time' && series.push({ e.field !== 'id' && e.field !== 'operation_time' && series.push({
name: e.comment, name: e.comment,
type: 'line', type: 'bar',
data: data.map(n => n[e.field]) data: data.map(n => n[e.field])
}) })
}) })
@ -443,7 +408,7 @@ export default {
endValue: 6 // 一次性展示6个。 endValue: 6 // 一次性展示6个。
} }
], ],
color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], color: ['#6188e9','#9032f3','#a57de3','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'],
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
@ -822,8 +787,8 @@ export default {
trigger: 'axis' trigger: 'axis'
}, },
grid: { grid: {
left: '10%', left: '18%',
right: '8%', right: '12%',
bottom: '12%' bottom: '12%'
}, },
dataZoom: [//滑动条 dataZoom: [//滑动条
@ -1190,7 +1155,7 @@ export default {
// 监听resize事件，动态改变chart大小 // 监听resize事件，动态改变chart大小
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
for (let i = 0; i < 8; i++) { for (let i = 0; i < 8; i++) {
chart[i].resize() chart[i] && chart[i].resize()
} }
}) })
}, },

535
src/styles/page/screen.scss
Unescape View File

@ -1,15 +1,6 @@
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
display: none; display: none;
} }
.canvas {
z-index: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .7;
}
.wrap { .wrap {
width: 100%; width: 100%;
height: auto; height: auto;
@ -27,6 +18,64 @@
transform: scale(1.2); transform: scale(1.2);
} }
} }
.l_t_line{
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
.t_l_line{
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.t_line_box {
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i{
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
.t_r_line{
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line{
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line{
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line{
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line{
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line{
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
} }
.main_table { .main_table {
width: 100%; width: 100%;
@ -72,7 +121,6 @@
height: 220px; height: 220px;
} }
} }
/*header开始*/
.header{ .header{
z-index: 2; z-index: 2;
position: relative; position: relative;
@ -86,117 +134,6 @@
background: url(../../../assets/img/screen/screen2.png) no-repeat; background: url(../../../assets/img/screen/screen2.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.header>.header_logo{
padding:18px 10px 10px 0px;
}
.header>.header_logo>a{
display: block;
}
.header>.header_logo>a>img{
width:260px;
}
.header>.header_nav{
margin-left: 20px;
}
.header>.header_nav>ul>li{
float: left;
margin-right: 6px;
position: relative;
}
.header>.header_nav>ul>li>a{
display: block;
height: 80px;
padding:0 10px 0 30px;
line-height: 80px;
color:#fff;
}
.header>.header_nav>ul>li>a:hover{
border-bottom: 4px solid #4b8df8;
}
.header>.header_nav>ul>li>img{
float: left;
position: absolute;
top: 33px;
left:10px;
}
.header>.header_nav>ul>li>a.nav_current{
border-bottom: 4px solid #4b8df8;
}
.header>.header_myself{
width: 90px;
text-align: center;
}
.header>.header_myself>p{
color:#fff;
font-size: 13px;
margin-top: 15px;
}
.header>.header_myself>a{
color:#fff;
font-size: 13px;
}
/*content 开始*/
.content{
margin: 20px;
width: calc(100% - 40px);
}
.content>.content_title{
width: 100%;
height: 35px;
line-height: 35px;
background-color: #4b8df8;
box-sizing: border-box;
margin-bottom: 20px;
}
.content>.content_title>p{
color:#fff;
font-size: 16px;
font-weight: 600;
}
.content>.content_title>img{
margin: 10px 10px 0px 10px;
}
.content>.content_main{
min-width: 1366px;
}
.content>.content_main>.content_search>div{
margin-right: 25px;
}
.content>.content_main>.content_search>div>label{
width: 80px;
text-align: right;
}
.content>.content_main>.content_search>div>select,
.content>.content_main>.content_search>div>input
{
width: 200px;
}
.content>.content_main>.content_table{
margin-top: 30px;
}
.content>.content_main>.content_table>table{
margin-top: 15px;
}
.content>.content_main>.content_table>table th:nth-child(1),
.content>.content_main>.content_table>table td:nth-child(1){
width: 50px;
text-align: center;
}
.content>.content_main>.content_page>span {
font-size: 12.8px;
margin-top: 7px;
}
.content>.content_main>.content_page>select{
width: 70px;
margin-right: 10px;
}
/*content 结束*/
.t_title{ .t_title{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -205,182 +142,23 @@
line-height: 80px; line-height: 80px;
color: #fff; color: #fff;
} }
#chart_map{ .content{
cursor: pointer; display: flex;
} padding: 20px;
.t_show{ .left, .right {
position: absolute; width: 24%;
top: 0;
right: 0;
border-radius: 2px;
background: #2C58A6;
padding: 2px 5px;
color: #fff;
cursor: pointer;
}
.linshi_zdy{
position: absolute;
right: 0px;
top: 450px;
}
.linshi_zdy li{
width: 150px;
font-size: 16px;
padding: 3px 8px;
cursor: pointer;
}
.linshi_zdy span{
display: block;
width: 14px;
height: 14px;
float: left;
border-radius: 50%;
margin-top: 3px;
margin-right: 5px;
}
.linshi_zdy li:first-child{
color: #ff0000;
}
.linshi_zdy li:first-child span{
background: #ff0000;
}
.linshi_zdy li:nth-child(2){
color: #9cff00;
}
.linshi_zdy li:nth-child(2) span{
background: #9cff00;
}
.linshi_zdy li:nth-child(3){
color: #fff;
}
.linshi_zdy li:nth-child(3) span{
background: #fff;
}
.linshi_zdy li:nth-child(4){
color: #f4a100;
}
.linshi_zdy li:nth-child(4) span{
background: #f4a100;
}
.data_content{
padding-top: 20px;
padding-bottom: 20px;
}
.data_content .data_time{
width: 340px;
height: 35px;
background-color: #2C58A6;
line-height: 35px;
color: #fff;
font-size: 12.8px;
position: relative;
margin-bottom: 25px;
margin-left: 20px;
text-align: center;
}
.data_content .data_time img{
position: absolute;
top: 8px;
left: 15px;
}
.data_content .data_info{
width: calc(100% - 40px);
margin-bottom: 40px;
height: 110px;
margin-left: 20px;
}
.data_content .data_info .info_1{
width: 40%;
height: 110px;
}
.data_content .data_info .info_1>.text_1{
width: calc(100% - 25px);
background-color: #034c6a;
height: 110px;
}
.data_content .data_info .info_2{
width: 31%;
height: 110px;
}
.data_content .data_info .info_2>.text_2{
width: calc(100% - 25px);
background-color: #034c6a;
height: 110px;
}
.data_content .data_info .info_3{
width: 29%;
height: 110px;
}
.data_content .data_info .info_3>.text_3{
width:100%;
background-color: #034c6a;
height: 110px;
} }
.middle {
.data_content .data_info>div.info_1>.text_1>div{ flex: 1;
width: 33.333%; margin: 0 30px;
position: relative;
} }
.data_content .data_info>div.info_2>div>div, .item {
.data_content .data_info>div.info_3>div>div{
width: 50%;
position: relative; position: relative;
}
.data_content .data_info img{
position: absolute;
top: 35px;
left: 15px;
}
.data_content .data_info>div>div>div>div{
margin-left:65px;
margin-top: 23px;
}
.data_content .data_info>div.info_2>div>div>div{
margin-left: 70px;
margin-top: 23px;
}
.data_content .data_info p:nth-child(1){
color:#fff;
font-size: 12.8px;
}
.data_content .data_info p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#ffff43;
}
.data_content .data_info>div.info_2 p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#25f3e6;
}
.data_content .data_info>div.info_3 p:nth-child(2){
font-weight: 600;
font-size: 28px;
color:#ff4e4e;
}
.data_content .data_main{
width: calc(100% - 40px);
margin-bottom: 40px;
height: 615px;
margin-left: 20px;
}
.data_content .data_main .main_left{
width: 24%;
}
.data_content .data_main .main_left>div{
width: 100%;
height: 280px; height: 280px;
box-sizing: border-box; margin-bottom: 30px;
border: 1px solid #2C58A6; border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6; box-shadow: 0 0 10px #2C58A6;
} }
.data_content .data_main .main_left div:nth-child(1){
margin-bottom: 50px;
} }
.main_title{ .main_title{
display: flex; display: flex;
@ -404,180 +182,3 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.data_content .data_main .main_center{
width: 52%;
height: 610px;
}
.data_content .data_main .main_center .center_text{
width: calc(100% - 50px);
height: 350px;
margin-left: 25px;
margin-right: 25px;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0px 0px 6px #2C58A6;
position: relative;
}
.l_t_line{
width: 5px;
height: 24px;
left: -3px;
top: -3px;
}
.t_l_line{
height: 5px;
width: 26px;
left: -3px;
top: -3px;
}
.t_line_box {
position: absolute;
width: 100%;
height: 100%;
}
.t_line_box i{
background-color: #4788fb;
box-shadow: 0px 0px 10px #4788fb;
position: absolute;
}
.t_r_line{
height: 5px;
width: 26px;
right: -3px;
top: -3px;
}
.r_t_line{
width: 5px;
height: 24px;
right: -3px;
top: -3px;
}
.l_b_line{
width: 5px;
height: 24px;
left: -3px;
bottom: -3px;
}
.b_l_line{
height: 5px;
width: 26px;
left: -3px;
bottom: -3px;
}
.r_b_line{
width: 5px;
height: 24px;
right: -3px;
bottom: -3px;
}
.b_r_line{
height: 5px;
width: 26px;
right: -3px;
bottom: -3px;
}
.data_content .data_main .main_right{
width: 24%;
}
.data_content .data_main .main_right>div{
width: 100%;
height: 280px;
box-sizing: border-box;
border: 1px solid #2C58A6;
position: relative;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_main .main_right div.right_1 .choice{
position: absolute;
top: 25px;
right: 30px;
z-index: 1000;
}
.data_content .data_main .main_right div.right_1 .choice label{
color:#fff;
}
.data_content .data_main .main_right div.right_2 .chart_text {
width: 18%;
color:#fff;
text-align: center;
margin-top: 12px;
}
.data_content .data_main .main_right div.right_2 .chart_text p{
margin-top: 21px;
}
.data_content .data_main .main_right div.right_2 .chart_text p img{
margin-right: 5px;
margin-top: -4px;
}
.data_content .data_main .main_right div.right_2 .chart_text p:nth-child(1){
font-size: 14px;
font-weight: 600;
}
.data_content .data_main .main_right div.right_2 .text_sum{
text-align: center;
color:#ffff43;
font-weight: 600;
}
.data_content .data_main .main_right div.right_2 .text_sum div:nth-child(2){
font-size: 18px;
font-weight: 600;
}
.data_content .data_main .main_right div:nth-child(1){
margin-bottom: 50px;
}
.data_content .data_bottom{
width: calc(100% - 40px);
height: 310px;
margin-left: 20px;
}
.data_content .data_bottom .bottom_1{
width: 24%;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_center{
width: 52%;
height: 310px;
padding: 0 25px;
}
.data_content .data_bottom .bottom_2{
width: 100%;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_3{
width: calc(50% - 40px);
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
margin-left:25px;
box-shadow: 0 0 10px #2C58A6;
}
.data_content .data_bottom .bottom_4{
width: 24%;
height: 310px;
position: relative;
box-sizing: border-box;
border: 1px solid #2C58A6;
box-shadow: 0 0 10px #2C58A6;
}
.t_btn8,.t_btn2,.t_btn3{
position: relative;
z-index: 100;
cursor: pointer;
}
.table_zdy a{
color: #fff;
}
Write Preview
Loading…
Cancel
Save