parent
bf93450b76
commit
f9a9afdf57
16 changed files with 1351 additions and 8 deletions
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 506 B |
|
After Width: | Height: | Size: 539 B |
|
After Width: | Height: | Size: 472 B |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 471 B |
|
After Width: | Height: | Size: 290 B |
@ -0,0 +1,956 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<!--header--> |
||||
<div class="header"> |
||||
<div class="bg_header"> |
||||
<div class="header_nav fl t_title">数据前瞻大屏展示</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!--main--> |
||||
<div class="data_content"> |
||||
<!-- <div class="data_time"> |
||||
温馨提示: 点击模块后跳转至详情页面。 |
||||
</div> --> |
||||
|
||||
<div class="data_main"> |
||||
<div class="main_left fl"> |
||||
<div class="left_1 t_btn6" style="cursor: pointer;"> |
||||
<!--左上边框--> |
||||
<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_1.png" alt=""> |
||||
中国宏观杠杆率 |
||||
</div> |
||||
<div id="chart1" class="chart" style="width:100%;height: 280px;"></div> |
||||
</div> |
||||
<div class="left_2" style="cursor: pointer;"> |
||||
<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_2.png" alt=""> |
||||
国际旅游外汇收入构成 |
||||
</div> |
||||
<div id="chart2" class="chart t_btn9" style="width:100%;height: 280px;"></div> |
||||
</div> |
||||
</div> |
||||
<div class="main_center fl"> |
||||
<div class="center_text" style="position: relative;"> |
||||
<!--左上边框--> |
||||
<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" style="left: 48%"> |
||||
<img src="@/assets/img/screen/t_3.png" alt=""> |
||||
加密货币行情 |
||||
</div> |
||||
<div id="chart_map" style="width:100%;height:610px;"> |
||||
</div> |
||||
<div class="linshi_zdy"> |
||||
<ul> |
||||
<li><span></span>2015批(8个)</li> |
||||
<li><span></span>2016批(15个)</li> |
||||
<li><span></span>2017批(13个)</li> |
||||
<li><span></span>2018批(11个)</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="main_right fr"> |
||||
<div class="right_1"> |
||||
<!--左上边框--> |
||||
<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_4.png" alt=""> |
||||
人民币汇率中间价报告 |
||||
</div> |
||||
<div id="chart3" class="echart t_btn7" style="width:100%;height: 280px;"></div> |
||||
</div> |
||||
<div class="right_2"> |
||||
<!--左上边框--> |
||||
<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_5.png" alt=""> |
||||
央行货币当局资产负债 |
||||
</div> |
||||
<div id="chart4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="data_bottom"> |
||||
<div class="bottom_1 fl t_btn5" style="cursor: pointer;"> |
||||
<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 class="main_table t_btn8"> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th>概况名称</th> |
||||
<th>详情</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr v-for="(item, i) in goodsSell" :key="i"> |
||||
<td>{{ 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" style="left:40%;"> |
||||
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||
广西电子商务热销产品排行榜 |
||||
</div> |
||||
<div class="main_table t_btn8"> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th>产品名称</th> |
||||
<th>品种</th> |
||||
<th>产地</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>荔浦百香果</td> |
||||
<td>百香果</td> |
||||
<td>荔浦</td> |
||||
</tr> |
||||
<tr> |
||||
<td>荔浦砂糖桔</td> |
||||
<td>砂糖桔</td> |
||||
<td>荔浦</td> |
||||
</tr> |
||||
<tr> |
||||
<td>90g将军峰小方盒绿茶</td> |
||||
<td>中小叶种</td> |
||||
<td>广西贺州</td> |
||||
</tr> |
||||
<tr> |
||||
<td>珍珠糯玉米</td> |
||||
<td>粮食</td> |
||||
<td>忻城县</td> |
||||
</tr> |
||||
<tr> |
||||
<td>桂花红糖</td> |
||||
<td>桂花红糖</td> |
||||
<td>大新县</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<div class="bottom_3 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" style="left:45%;"> |
||||
<img src="@/assets/img/screen/t_7.png" alt=""> |
||||
电子商务热销店铺排行榜 |
||||
</div> |
||||
<div class="main_table t_btn2"> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th>店铺名称</th> |
||||
<th>产品</th> |
||||
<th>销售额(月销)</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td>鲜迪食品专营店</td> |
||||
<td>海鸭蛋</td> |
||||
<td>2.8万</td> |
||||
</tr> |
||||
<tr> |
||||
<td>中鼎水果专营店</td> |
||||
<td>红心芭乐番石榴</td> |
||||
<td>2.5万</td> |
||||
</tr> |
||||
<tr> |
||||
<td>中闽飘香旗舰店</td> |
||||
<td>广西桂林罗汉果</td> |
||||
<td>2.4万</td> |
||||
</tr> |
||||
<tr> |
||||
<td>芋小妹旗舰店</td> |
||||
<td>广西荔浦大芋头</td> |
||||
<td>1.3万</td> |
||||
</tr> |
||||
<tr> |
||||
<td>桂甄堂旗舰店</td> |
||||
<td>柳州螺狮粉</td> |
||||
<td>1.1万</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="bottom_4 fr"> |
||||
<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 class="main_table t_btn3 table_zdy"> |
||||
<table> |
||||
<thead> |
||||
<tr> |
||||
<th>活动主题</th> |
||||
<th>活动举办地</th> |
||||
<th>日期</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr> |
||||
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/20.html">2018广西特产行销全国</a></td> |
||||
<td>南宁</td> |
||||
<td>2018年</td> |
||||
</tr> |
||||
<tr> |
||||
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/16.html">2018壮族三月三电商节</a></td> |
||||
<td>南宁</td> |
||||
<td>2018年</td> |
||||
</tr> |
||||
<tr> |
||||
<td><a target="blank" href="http://www.gxitps.org/zhanhui/detail/id/17.html">2018灵山荔枝节</a></td> |
||||
<td>灵山县</td> |
||||
<td>2018年</td> |
||||
</tr> |
||||
<tr> |
||||
<td>2018年货节</td> |
||||
<td>广西</td> |
||||
<td>2018年</td> |
||||
</tr> |
||||
<tr> |
||||
<td>2017好讲师大赛</td> |
||||
<td>南宁</td> |
||||
<td>2017年</td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from '@/setting' |
||||
import util from '@/libs/util' |
||||
import * as echarts from 'echarts' |
||||
export default { |
||||
data() { |
||||
return { |
||||
goodsSell: [] |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.renderChart() |
||||
}, |
||||
methods: { |
||||
renderChart() { |
||||
// 中国宏观杠杆率 |
||||
this.$get(`${this.api.previewData}?tableName=hg_zg_zhongguohongguanganggan&tableId=14`).then(res => { |
||||
const { comment, data } = res |
||||
const series = [] |
||||
comment.map(e => { |
||||
// id和操作时间不用显示 |
||||
e.field !== 'id' && e.field !== 'operation_time' && series.push({ |
||||
name: e.comment, |
||||
type: 'line', |
||||
data: data.map(n => n[e.field]) |
||||
}) |
||||
}) |
||||
echarts.init(document.querySelector(`#chart1`)).setOption({ |
||||
title: { |
||||
text: '' |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
legend: { |
||||
data: comment.map(e => e.comment), |
||||
textStyle:{ |
||||
color: '#fff' |
||||
}, |
||||
top: '8%' |
||||
}, |
||||
grid: { |
||||
top: '40%', |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
color: ['#FF4949','#FFA74D','#FFEA51','#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
||||
xAxis: { |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
data: data.map(e => e.date.replace(' 00:00:00', '')), // 年份 |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
}, |
||||
yAxis: { |
||||
name: '', |
||||
type: 'value', |
||||
splitLine: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
}, |
||||
series |
||||
}) |
||||
}).catch(res => {}) |
||||
|
||||
// 全国税收收入 |
||||
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_quanguoshuishoushouru&tableId=33`).then(res => { |
||||
const { comment, data } = res |
||||
echarts.init(document.querySelector(`#chart3`)).setOption({ |
||||
title: { |
||||
text: '' |
||||
}, |
||||
tooltip: { |
||||
trigger: 'axis' |
||||
}, |
||||
xAxis: { |
||||
type: 'category', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
}, |
||||
data: data.map(e => e.quarter) |
||||
}, |
||||
yAxis: { |
||||
type: 'value', |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: '#fff' |
||||
} |
||||
} |
||||
}, |
||||
color: ['#4BF0FF','#44AFF0','#4E82FF','#584BFF','#BE4DFF','#F845F1'], |
||||
legend: { |
||||
data: ['税收收入合计'], |
||||
textStyle:{ |
||||
color: '#fff' |
||||
}, |
||||
top: '8%' |
||||
}, |
||||
grid: { |
||||
top: '20%', |
||||
left: '3%', |
||||
right: '4%', |
||||
bottom: '3%', |
||||
containLabel: true |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: data.map(e => e.ttr), |
||||
type: 'bar', |
||||
showBackground: true, |
||||
backgroundStyle: { |
||||
color: 'rgba(180, 180, 180, 0.2)' |
||||
} |
||||
} |
||||
] |
||||
}) |
||||
}).catch(res => {}) |
||||
|
||||
// 国际旅游外汇收入构成 |
||||
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_guojilvyouwaihuishourugoucheng&tableId=52`).then(res => { |
||||
const { comment, data } = res |
||||
const colors = ['#f845f1', '#ad46f3', '#5045f6', '#4777f5', '#44aff0', '#45dbf7', '#f6d54a'] |
||||
const series = [] |
||||
data.map((e, i) => { |
||||
series.push({ |
||||
value: e.quantity, |
||||
name: e.indexs, |
||||
itemStyle: { |
||||
normal: { |
||||
color: colors[i] |
||||
} |
||||
} |
||||
}) |
||||
}) |
||||
echarts.init(document.querySelector(`#chart2`)).setOption({ |
||||
tooltip: { |
||||
trigger: 'item', |
||||
formatter: "{a} <br/>{b} : {c}亿" |
||||
}, |
||||
legend: { |
||||
x: 'center', |
||||
y: '15%', |
||||
data: data.map(e => e.indexs), |
||||
icon: 'circle', |
||||
textStyle: { |
||||
color: '#fff', |
||||
} |
||||
}, |
||||
calculable: true, |
||||
series: [{ |
||||
name: '', |
||||
type: 'pie', |
||||
//起始角度，支持范围[0, 360] |
||||
// startAngle: 0, |
||||
//饼图的半径，数组的第一项是内半径，第二项是外半径 |
||||
radius : '45%', |
||||
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度 |
||||
center: ['50%', '65%'], |
||||
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式： |
||||
// 'radius' 面积展现数据的百分比，半径展现数据的大小。 |
||||
// 'area' 所有扇区面积相同，仅通过半径展现数据大小 |
||||
// roseType: 'radius', |
||||
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。 |
||||
// avoidLabelOverlap: false, |
||||
label: { |
||||
normal: { |
||||
show: true, |
||||
formatter: '{b}{c}万件' |
||||
}, |
||||
emphasis: { |
||||
show: true |
||||
} |
||||
}, |
||||
labelLine: { |
||||
normal: { |
||||
show: true, |
||||
length2: 1, |
||||
}, |
||||
emphasis: { |
||||
show: true |
||||
} |
||||
}, |
||||
data: series |
||||
}] |
||||
}) |
||||
}).catch(res => {}) |
||||
|
||||
// 央行货币当局资产负债 |
||||
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_yanghanghuobidangjuzichanfuzhai&tableId=55`).then(res => { |
||||
const { comment, data } = res |
||||
echarts.init(document.querySelector(`#chart4`)).setOption({ |
||||
tooltip: { |
||||
trigger: 'axis', |
||||
axisPointer: { |
||||
lineStyle: { |
||||
color: '#dddc6b' |
||||
} |
||||
} |
||||
}, |
||||
legend: { |
||||
top: '0%', |
||||
data: ['货币黄金', '储备货币'], |
||||
textStyle: { |
||||
color: 'rgba(255,255,255,.5)', |
||||
fontSize: '12', |
||||
} |
||||
}, |
||||
grid: { |
||||
left: '10', |
||||
top: '30', |
||||
right: '10', |
||||
bottom: '10', |
||||
containLabel: true |
||||
}, |
||||
xAxis: [{ |
||||
type: 'category', |
||||
boundaryGap: false, |
||||
axisLabel: { |
||||
textStyle: { |
||||
color: "rgba(255,255,255,.6)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,.2)' |
||||
} |
||||
}, |
||||
data: data.map(e => e.statistical_time.replace(' 0:00', '')) |
||||
}, { |
||||
axisPointer: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
show: false |
||||
}, |
||||
position: 'bottom', |
||||
offset: 20 |
||||
}], |
||||
yAxis: [{ |
||||
type: 'value', |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,.1)' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
textStyle: { |
||||
color: "rgba(255,255,255,.6)", |
||||
fontSize: 12, |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: 'rgba(255,255,255,.1)' |
||||
} |
||||
} |
||||
}], |
||||
series: [{ |
||||
name: '货币黄金', |
||||
type: 'line', |
||||
smooth: true, |
||||
symbol: 'circle', |
||||
symbolSize: 5, |
||||
showSymbol: false, |
||||
lineStyle: { |
||||
normal: { |
||||
color: '#0184d5', |
||||
width: 2 |
||||
} |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||
offset: 0, |
||||
color: 'rgba(1, 132, 213, 0.4)' |
||||
}, { |
||||
offset: 0.8, |
||||
color: 'rgba(1, 132, 213, 0.1)' |
||||
}], false), |
||||
shadowColor: 'rgba(0, 0, 0, 0.1)', |
||||
} |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#0184d5', |
||||
borderColor: 'rgba(221, 220, 107, .1)', |
||||
borderWidth: 12 |
||||
} |
||||
}, |
||||
data: data.map(e => e.monetary_gold) |
||||
}, |
||||
{ |
||||
name: '储备货币', |
||||
type: 'line', |
||||
smooth: true, |
||||
symbol: 'circle', |
||||
symbolSize: 5, |
||||
showSymbol: false, |
||||
lineStyle: { |
||||
normal: { |
||||
color: '#00d887', |
||||
width: 2 |
||||
} |
||||
}, |
||||
areaStyle: { |
||||
normal: { |
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
||||
offset: 0, |
||||
color: 'rgba(0, 216, 135, 0.4)' |
||||
}, { |
||||
offset: 0.8, |
||||
color: 'rgba(0, 216, 135, 0.1)' |
||||
}], false), |
||||
shadowColor: 'rgba(0, 0, 0, 0.1)', |
||||
} |
||||
}, |
||||
itemStyle: { |
||||
normal: { |
||||
color: '#00d887', |
||||
borderColor: 'rgba(221, 220, 107, .1)', |
||||
borderWidth: 12 |
||||
} |
||||
}, |
||||
data: data.map(e => e.reserve_money) |
||||
} |
||||
] |
||||
}) |
||||
}).catch(res => {}) |
||||
|
||||
// 商品零售价格指数 |
||||
this.$get(`${this.api.previewData}?tableName=hg_zg_jr_shangpinlingshoujiagezhishu&tableId=60`).then(res => { |
||||
const { data } = res |
||||
const goodsSell = [] |
||||
data.map(e => { |
||||
goodsSell.push({ |
||||
hct: e.hct, |
||||
rcpi: e.rcpi |
||||
}) |
||||
}) |
||||
this.goodsSell = goodsSell |
||||
}).catch(res => {}) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
@import url(../../../styles/page/screen.scss); |
||||
.wrap { |
||||
width: 100%; |
||||
height: auto; |
||||
color:#333; |
||||
/* overflow: hidden;*/ |
||||
background: url('../../../assets/img/screen/screen1.jpg') no-repeat; |
||||
background-size: 100% 100%; |
||||
} |
||||
/*header开始*/ |
||||
.header{ |
||||
width: 100%; |
||||
height: 80px; |
||||
padding:0 20px; |
||||
min-width: 1366px; |
||||
} |
||||
.bg_header{ |
||||
width: 100%; |
||||
height: 80px; |
||||
background: url(../../../assets/img/screen/screen2.png) no-repeat; |
||||
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); |
||||
min-width: 1366px; |
||||
} |
||||
.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{ |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
font-size: 2.5em; |
||||
line-height: 80px; |
||||
color: #fff; |
||||
} |
||||
#chart_map{ |
||||
cursor: pointer; |
||||
} |
||||
.t_show{ |
||||
position: absolute; |
||||
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; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,6 @@ |
||||
export default { |
||||
path: '/screen', |
||||
name: 'screen', |
||||
component: () => import('@/pages/screen/list'), |
||||
meta: { title: '大屏展示' } |
||||
}; |
||||
@ -0,0 +1,370 @@ |
||||
.data_content{ |
||||
/*overflow-x: hidden;*/ |
||||
min-width: 1366px; |
||||
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; |
||||
|
||||
} |
||||
|
||||
.data_content .data_info>div.info_1>.text_1>div{ |
||||
width: 33.333%; |
||||
position: relative; |
||||
} |
||||
.data_content .data_info>div.info_2>div>div, |
||||
.data_content .data_info>div.info_3>div>div{ |
||||
width: 50%; |
||||
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; |
||||
box-sizing: border-box; |
||||
border: 1px solid #2C58A6; |
||||
position: relative; |
||||
box-shadow: 0 0 10px #2C58A6; |
||||
} |
||||
.data_content .data_main .main_left div.left_1{ |
||||
/*background: url("../images/chart_1.png") no-repeat center;*/ |
||||
} |
||||
|
||||
.data_content .data_main .main_left div.left_2{ |
||||
/*background: url("../images/chart_2.png") no-repeat center;*/ |
||||
} |
||||
.data_content .data_main .main_left div:nth-child(1){ |
||||
margin-bottom: 50px; |
||||
} |
||||
.main_title{ |
||||
height: 35px; |
||||
line-height: 33px; |
||||
background-color: #2C58A6; |
||||
border-radius: 18px; |
||||
position: absolute; |
||||
top: -17px; |
||||
left: 40%; |
||||
margin-left: -90px; |
||||
color:#fff; |
||||
font-size: 18px; |
||||
font-weight: 600; |
||||
padding: 0 20px; |
||||
z-index: 1000; |
||||
text-align: center; |
||||
img{ |
||||
position: absolute; |
||||
top: 8px; |
||||
left: 20px; |
||||
} |
||||
} |
||||
|
||||
.data_content .data_main .main_center{ |
||||
width: 52%; |
||||
height: 610px; |
||||
|
||||
} |
||||
.data_content .data_main .main_center .center_text{ |
||||
width: calc(100% - 50px); |
||||
height: 610px; |
||||
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{ |
||||
/*background: url("../images/chart_4.png") no-repeat center;*/ |
||||
} |
||||
.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: 280px; |
||||
margin-left: 20px; |
||||
} |
||||
.data_content .data_bottom div{ |
||||
|
||||
} |
||||
.data_content .data_bottom .bottom_1{ |
||||
width: 24%; |
||||
height: 280px; |
||||
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: 280px; |
||||
} |
||||
.data_content .data_bottom .bottom_2{ |
||||
width: calc(50% - 35px); |
||||
height: 280px; |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
border: 1px solid #2C58A6; |
||||
margin-left: 25px; |
||||
box-shadow: 0 0 10px #2C58A6; |
||||
} |
||||
.data_content .data_bottom .bottom_3{ |
||||
width: calc(50% - 40px); |
||||
height: 280px; |
||||
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: 280px; |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
border: 1px solid #2C58A6; |
||||
box-shadow: 0 0 10px #2C58A6; |
||||
} |
||||
|
||||
.data_content .data_bottom div .main_table tr{ |
||||
height: 42px; |
||||
} |
||||
.data_content .data_bottom div .main_table{ |
||||
width: 100%; |
||||
margin-top: 25px; |
||||
} |
||||
.data_content .data_bottom div .main_table table{ |
||||
width: 100%; |
||||
} |
||||
.data_content .data_bottom div .main_table thead tr{ |
||||
height: 42px; |
||||
} |
||||
.data_content .data_bottom div .main_table th{ |
||||
font-size: 12px; |
||||
font-weight: 600; |
||||
color:#61d2f7; |
||||
text-align: center; |
||||
} |
||||
.data_content .data_bottom div .main_table th:nth-child(1){ |
||||
|
||||
} |
||||
.data_content .data_bottom div .main_table th:nth-child(2){ |
||||
|
||||
} |
||||
.data_content .data_bottom div .main_table td{ |
||||
color:#fff; |
||||
font-size: 10px; |
||||
text-align: center; |
||||
} |
||||
.data_content .data_bottom div .main_table tbody tr:nth-child(1), |
||||
.data_content .data_bottom div .main_table tbody tr:nth-child(3), |
||||
.data_content .data_bottom div .main_table tbody tr:nth-child(5){ |
||||
background-color: #072951; |
||||
box-shadow:-10px 0px 15px #2C58A6 inset, /*左边阴影*/ |
||||
10px 0px 15px #2C58A6 inset; /*右边阴影*/ |
||||
} |
||||
.t_btn8,.t_btn2,.t_btn3{ |
||||
position: relative; |
||||
z-index: 100; |
||||
cursor: pointer; |
||||
} |
||||
.table_zdy a{ |
||||
color: #fff; |
||||
} |
||||
Loading…
Reference in new issue