parent
82a2e67aea
commit
476dc182b2
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
@ -0,0 +1,229 @@
|
|||||||
|
<!-- 企业综合经营贡献TOP5 -->
|
||||||
|
<template>
|
||||||
|
<div id="echartsFive" ref="myChartFive"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
let colors = ['#EE462A','#FF8929', '#FFBB00', '#5CBC69', '#00AEFF']
|
||||||
|
let dataSource = [
|
||||||
|
{ value: 48, name: 'TOP1',entprice: "苏州众汇聚合信息科技有限公司1"},
|
||||||
|
{ value: 36, name: 'TOP2',entprice: "苏州众司2"},
|
||||||
|
{ value: 30, name: 'TOP3',entprice: "苏州众汇聚合信息科技有限公司3"},
|
||||||
|
{ value: 22, name: 'TOP4',entprice: "苏州众汇聚合信息科技有限公司4"},
|
||||||
|
{ value: 16, name: 'TOP5',entprice: "苏州众汇聚合信息科技有限公司5"},
|
||||||
|
];
|
||||||
|
// 公用调整
|
||||||
|
let itemStyle = {
|
||||||
|
// normal: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: "#F5F8FA",
|
||||||
|
borderWidth: 4,
|
||||||
|
color: function (params) {
|
||||||
|
return colors[params.dataIndex];
|
||||||
|
},
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
myChartFive: false,
|
||||||
|
sum: 5000,
|
||||||
|
dataSource:dataSource,
|
||||||
|
option: {
|
||||||
|
grid: {
|
||||||
|
left: '8%',
|
||||||
|
right: '32%',
|
||||||
|
top: '5%',
|
||||||
|
bottom: '1%'
|
||||||
|
},
|
||||||
|
xAxis: { show: false },
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
gridIndex: 0,
|
||||||
|
position: 'left',
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
type: 'category',
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
inverse: true,
|
||||||
|
data: dataSource.map((item, index) => item.name),
|
||||||
|
axisLabel: {
|
||||||
|
align: 'center',
|
||||||
|
padding: [0, 40, 0, 0],
|
||||||
|
formatter: (name, index) => {
|
||||||
|
return `{name${index}|${name}}`
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
name0: {
|
||||||
|
color: '#fff',
|
||||||
|
align: 'left',
|
||||||
|
fontSize: 12,
|
||||||
|
padding: [5,8,3,8],
|
||||||
|
fontFamily: "Arial",
|
||||||
|
borderRadius: 5,
|
||||||
|
backgroundColor: '#EE462A',
|
||||||
|
verticalAlign: "middle",
|
||||||
|
},
|
||||||
|
name1: {
|
||||||
|
color: '#fff',
|
||||||
|
align: 'left',
|
||||||
|
fontSize: 12,
|
||||||
|
padding: [5,8,3,8],
|
||||||
|
fontFamily: "Arial",
|
||||||
|
borderRadius: 5,
|
||||||
|
backgroundColor: '#FF8929',
|
||||||
|
verticalAlign: "middle",
|
||||||
|
},
|
||||||
|
name2: {
|
||||||
|
color: '#fff',
|
||||||
|
align: 'left',
|
||||||
|
fontSize: 12,
|
||||||
|
padding: [5,8,3,8],
|
||||||
|
fontFamily: "Arial",
|
||||||
|
borderRadius: 5,
|
||||||
|
backgroundColor: '#ffbb00',
|
||||||
|
verticalAlign: "middle",
|
||||||
|
},
|
||||||
|
name3: {
|
||||||
|
color: '#fff',
|
||||||
|
align: 'left',
|
||||||
|
fontSize: 12,
|
||||||
|
padding: [5,8,3,8],
|
||||||
|
fontFamily: "Arial",
|
||||||
|
borderRadius: 5,
|
||||||
|
backgroundColor: '#5CBC69',
|
||||||
|
verticalAlign: "middle",
|
||||||
|
},
|
||||||
|
name4: {
|
||||||
|
color: '#fff',
|
||||||
|
align: 'left',
|
||||||
|
fontSize: 12,
|
||||||
|
padding: [5,8,3,8],
|
||||||
|
fontFamily: "Arial",
|
||||||
|
borderRadius: 5,
|
||||||
|
backgroundColor: '#00AEFF',
|
||||||
|
verticalAlign: "middle",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'category',
|
||||||
|
inverse: true,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
axisLine: { // 改变y轴颜色
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: dataSource.map((item, index) => item.value),
|
||||||
|
axisLabel: {
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
align: 'left',
|
||||||
|
padding: [0, 0, 0, 20],
|
||||||
|
formatter: (value) => {
|
||||||
|
let name;
|
||||||
|
for (let index = 0; index < this.dataSource.length; index++) {
|
||||||
|
if(this.dataSource[index].value == value) {
|
||||||
|
name = this.dataSource[index].entprice
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
return "{entprice|" + name + "}{value|" + value + "}{unit|%}"
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
entprice:{
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: "14px",
|
||||||
|
color: "#666",
|
||||||
|
align:"left"
|
||||||
|
},
|
||||||
|
value:{
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontSize: "24px",
|
||||||
|
color: "#0086FF",
|
||||||
|
fontWeight: "bold",
|
||||||
|
align:"left",
|
||||||
|
padding: [3,0,0,10],
|
||||||
|
fontStyle: "italic",
|
||||||
|
},
|
||||||
|
unit:{
|
||||||
|
fontFamily: "Arial",
|
||||||
|
fontSize: "12px",
|
||||||
|
color: "#0086FF",
|
||||||
|
fontWeight: "bold",
|
||||||
|
align:"left",
|
||||||
|
padding: [3,0,0,-10],
|
||||||
|
fontStyle: "italic",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
],
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '总量',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 12, // 柱子宽度
|
||||||
|
showBackground: true,
|
||||||
|
barGap: '60%',
|
||||||
|
barCategoryGap: '60%',
|
||||||
|
backgroundStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
borderRadius: 30
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {
|
||||||
|
show: false // 开启显示
|
||||||
|
},
|
||||||
|
barBorderRadius: 30,
|
||||||
|
borderWidth: 2,
|
||||||
|
color: "#0086FF",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: dataSource.map((item, index) => item.value),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.initEchart();
|
||||||
|
})
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
cancalDebounce(){
|
||||||
|
window.onresize = this.myChartFive.resize();
|
||||||
|
},
|
||||||
|
initEchart(){
|
||||||
|
var chartDom = document.getElementById("echartsFive");
|
||||||
|
this.myChartFive = echarts.init(chartDom);
|
||||||
|
this.myChartFive.setOption(this.option)
|
||||||
|
// this.legendselectchanged(this.myChartFive)
|
||||||
|
},
|
||||||
|
// legendselectchanged(myChart){
|
||||||
|
// myChart.on('legendselectchanged', function (params) {
|
||||||
|
// console.log('点击了', params.name);
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,226 @@
|
|||||||
|
<!-- 资金拨付情况分析 -->
|
||||||
|
<template>
|
||||||
|
<div id="echartsFour" ref="myChartFour"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
let colors = ['#EE462A','#FF8929', '#FFBB00', '#5CBC69', '#00AEFF']
|
||||||
|
let datas = [
|
||||||
|
{ value: 800, proportion: 16, name: '制造业服务化奖励', label:{color:"#EE462A"}},
|
||||||
|
{ value: 800, proportion: 16, name: '鼓励社会信用体系建设', label:{color:"#FF8929"}},
|
||||||
|
{ value: 1800, proportion: 36, name: '产业提升和品牌建设奖励', label:{color:"#FFBB00"}},
|
||||||
|
{ value: 800, proportion: 16, name: '经营奖励', label:{color:"#5CBC69"}},
|
||||||
|
{ value: 800, proportion: 16, name: '一事一议', label:{color:"#00AEFF"}},
|
||||||
|
];
|
||||||
|
// 公用调整
|
||||||
|
let itemStyle = {
|
||||||
|
// normal: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: "#F5F8FA",
|
||||||
|
borderWidth: 4,
|
||||||
|
color: function (params) {
|
||||||
|
return colors[params.dataIndex];
|
||||||
|
},
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
myChartFour: false,
|
||||||
|
sum: 5000,
|
||||||
|
option: {
|
||||||
|
color:colors,
|
||||||
|
// grid: {
|
||||||
|
// top: "0%",
|
||||||
|
// left: "5%",
|
||||||
|
// right: "80%",
|
||||||
|
// bottom: "8%", //也可设置left和right设置距离来控制图表的大小
|
||||||
|
// },
|
||||||
|
// title: {
|
||||||
|
// text: "总额",
|
||||||
|
// subtext: 800,
|
||||||
|
// textStyle: {
|
||||||
|
// color: "#65FDFD",
|
||||||
|
// fontSize: 32,
|
||||||
|
// // align: 'center'
|
||||||
|
// },
|
||||||
|
// subtextStyle: {
|
||||||
|
// fontSize: 36,
|
||||||
|
// color: "#ffc20e",
|
||||||
|
// fontWeight: "bold"
|
||||||
|
// },
|
||||||
|
// x: "center",
|
||||||
|
// y: "center",
|
||||||
|
// },
|
||||||
|
legend: {
|
||||||
|
bottom: '32%',
|
||||||
|
right: '2%',
|
||||||
|
orient: 'vertical',
|
||||||
|
data: datas,
|
||||||
|
icon: 'square',
|
||||||
|
itemWith: 14,
|
||||||
|
itemHeight: 14,
|
||||||
|
itemGap: 10,
|
||||||
|
selectedMode: true,
|
||||||
|
// padding: [5, 10, 5, 0],
|
||||||
|
formatter(name) {
|
||||||
|
debugger;
|
||||||
|
const item = datas.filter((item) => item.name === name)[0];
|
||||||
|
return `{name|${name}}`;
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: '#666666',
|
||||||
|
fontSize: 14,
|
||||||
|
width: 100,
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 数据
|
||||||
|
type: "pie",
|
||||||
|
zlevel: 3,
|
||||||
|
radius: ["40%", "55%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
itemStyle: itemStyle,
|
||||||
|
emphasis: {
|
||||||
|
scale: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: datas,
|
||||||
|
label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "outside",
|
||||||
|
padding: [10, -30],
|
||||||
|
formatter: (params) => {
|
||||||
|
return "{a|" +params.value+"}{b|" + "万元}\n{c|" + params.data.proportion + "}{d|" + "%}";
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "#666666",
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
d: {
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 500,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
length: 20,
|
||||||
|
length2: 25,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "阴影圈",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["0%", "35%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
formatter: (params) => {
|
||||||
|
return "{value|总额}\n\n{label|"+ this.sum + "}{unit|万元}";
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
//中间文字
|
||||||
|
value: {
|
||||||
|
align: 'center',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'AlibabaPuHuiTiM',
|
||||||
|
color: "#666"
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
align: 'center',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
fontFamily: 'DINCondensed',
|
||||||
|
color: "#333",
|
||||||
|
fontSize: 24,
|
||||||
|
},
|
||||||
|
unit: {
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
fontSize: 12,
|
||||||
|
fontFamily: 'AlibabaPuHuiTiR',
|
||||||
|
color: "#666"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(0, 174, 255, 0.1)",
|
||||||
|
borderWidth:1,
|
||||||
|
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||||
|
},
|
||||||
|
zlevel: 4,
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [100],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.initEchart();
|
||||||
|
})
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
cancalDebounce(){
|
||||||
|
window.onresize = this.myChartFour.resize();
|
||||||
|
},
|
||||||
|
initEchart(){
|
||||||
|
var chartDom = document.getElementById("echartsFour");
|
||||||
|
this.myChartFour = echarts.init(chartDom);
|
||||||
|
this.myChartFour.setOption(this.option)
|
||||||
|
// this.legendselectchanged(this.myChartFour)
|
||||||
|
},
|
||||||
|
// legendselectchanged(myChart){
|
||||||
|
// myChart.on('legendselectchanged', function (params) {
|
||||||
|
// console.log('点击了', params.name);
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<!-- 资金引导情况分析 -->
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<el-table v-loading="loading" :data="tableData" :height="tabHeader" border :header-cell-style="{background:'#E8F3FC'}">
|
||||||
|
<el-table-column label="投放类型" key="type" prop="type" align="center" width="180"/>
|
||||||
|
<el-table-column label="申报年份" key="year" prop="year" align="center" width="80">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<div class="Table-header">投放金额</div>
|
||||||
|
<span class="Table-unit">(亿元)</span>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-number">{{ scope.row.deliveryAmount }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="所属项目" key="operation" prop="operation" align="center" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-table-Info" @click="ProjectInfo(scope.row)">{{ scope.row.project }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="所属企业" key="enterprice" prop="enterprice" align="center" />
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
type:"经营奖励",
|
||||||
|
deliveryAmount: 58,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
type:"制造业服务化奖励",
|
||||||
|
deliveryAmount: 60,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
type:"产业提升和品牌建设奖励",
|
||||||
|
deliveryAmount: 48,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
type:"鼓励社会信用体系建设",
|
||||||
|
deliveryAmount: 64,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
type:"一事一议",
|
||||||
|
deliveryAmount: 48,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tabHeader: 288,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.cancalDebounce();
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 屏幕尺寸变化
|
||||||
|
cancalDebounce(){
|
||||||
|
const element = document.getElementById('analyse-middle-box-id'); // 通过元素的 ID 获取元素
|
||||||
|
const header = document.getElementById('box-header-id'); // 通过元素的 ID 获取元素
|
||||||
|
const elementHeight = element.offsetHeight;
|
||||||
|
const headerHeight = header.offsetHeight;
|
||||||
|
this.tabHeader = elementHeight - headerHeight - 35;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,87 @@
|
|||||||
|
<!-- 拨付资金企业申请情况TOP5 -->
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<el-table v-loading="loading" :data="tableData" :height="tabHeader" border :header-cell-style="{background:'#E8F3FC'}">
|
||||||
|
<el-table-column label="排名" key="type" prop="type" align="center" width="80">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-ranking" :style="{backgroundColor: scope.row.rankingBg}">{{ scope.row.ranking }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="申报年份" key="year" prop="year" align="center" width="80">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<div class="Table-header">投放金额</div>
|
||||||
|
<span class="Table-unit">(亿元)</span>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-number">{{ scope.row.deliveryAmount }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="所属项目" align="center" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-table-Info" @click="ProjectInfo(scope.row)">{{ scope.row.project }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="所属企业" key="enterprice" prop="enterprice" align="center" />
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
ranking:"TOP1",
|
||||||
|
rankingBg:"#EE462A",
|
||||||
|
deliveryAmount: 58,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
ranking:"TOP2",
|
||||||
|
rankingBg:"#FF8929",
|
||||||
|
deliveryAmount: 60,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
ranking:"TOP3",
|
||||||
|
rankingBg:"#ffbb00",
|
||||||
|
deliveryAmount: 48,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
ranking:"TOP4",
|
||||||
|
rankingBg:"#5CBC69",
|
||||||
|
deliveryAmount: 64,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
},{
|
||||||
|
ranking:"TOP5",
|
||||||
|
rankingBg:"#00AEFF",
|
||||||
|
deliveryAmount: 48,
|
||||||
|
project:"xxx项目",
|
||||||
|
enterprice:"苏州众汇聚合信息科技有限公司",
|
||||||
|
}
|
||||||
|
],
|
||||||
|
tabHeader: 288,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.cancalDebounce();
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 屏幕尺寸变化
|
||||||
|
cancalDebounce(){
|
||||||
|
const element = document.getElementById('analyse-middle-box-id'); // 通过元素的 ID 获取元素
|
||||||
|
const header = document.getElementById('box-header-id'); // 通过元素的 ID 获取元素
|
||||||
|
const elementHeight = element.offsetHeight;
|
||||||
|
const headerHeight = header.offsetHeight;
|
||||||
|
this.tabHeader = elementHeight - headerHeight - 35;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
<!-- 重点及特色项目 -->
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<el-table v-loading="loading" :data="tableData" :height="265" border :header-cell-style="{background:'#E8F3FC'}">
|
||||||
|
<el-table-column label="项目名称" key="projectName" prop="projectName" align="center" />
|
||||||
|
<el-table-column label="申报年份" key="year" prop="year" align="center"/>
|
||||||
|
<el-table-column label="项目类别" key="projectType" prop="projectType" align="center" />
|
||||||
|
<el-table-column label="操作" key="operation" prop="operation" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-table-Info" @click="ProjectInfo(scope.row)">查看详情</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
tableData:[
|
||||||
|
{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},{
|
||||||
|
projectName:"项目落户",
|
||||||
|
year: 2024,
|
||||||
|
projectType:"省级总部",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tabHeader: 300,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.cancalDebounce();
|
||||||
|
// window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
// 屏幕尺寸变化
|
||||||
|
cancalDebounce(){
|
||||||
|
const element = document.getElementById('analyse-middle-box-id'); // 通过元素的 ID 获取元素
|
||||||
|
const header = document.getElementById('box-header-id'); // 通过元素的 ID 获取元素
|
||||||
|
const elementHeight = element.offsetHeight;
|
||||||
|
const headerHeight = header.offsetHeight;
|
||||||
|
this.tabHeader = elementHeight - headerHeight - 30;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
// 新落户企业统计
|
||||||
|
export { default as echartDataTwo } from './statisticsNew'
|
||||||
|
// 引入投资统计分析
|
||||||
|
export { default as echartDataThree } from './statisticsAnalyse'
|
||||||
|
// 资金拨付情况分析
|
||||||
|
export { default as echartDataFour } from './capitalAppropriateAnalyse'
|
||||||
|
// 01.企业综合经营贡献TOP5
|
||||||
|
export { default as echartDataFive } from './TopEchart'
|
||||||
|
// 重点及特色项目
|
||||||
|
export { default as TableOne } from './emphasisProject'
|
||||||
|
// 资金引导情况分析
|
||||||
|
export { default as TableTwo } from './capitalCondition'
|
||||||
|
// 拨付资金企业申请情况TOP5
|
||||||
|
export { default as TableThree } from './capitalConditionTOP5'
|
||||||
|
// 促进产业项目情况
|
||||||
|
export { default as TableFour } from './promoteProject'
|
||||||
|
// 02.行业纵深情况
|
||||||
|
export { default as TableFive } from './industryTable'
|
||||||
|
// 促进产业载体分析
|
||||||
|
export { default as TableSix } from './promoteTable'
|
||||||
|
// 重点及特色项目
|
||||||
|
export { default as TableSeven } from './featureProject'
|
||||||
|
// 产业品牌打造宣传
|
||||||
|
export { default as TableEight } from './brandPublicity'
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<!-- 02.行业纵深情况 -->
|
||||||
|
<template>
|
||||||
|
<div class="industry-table-box">
|
||||||
|
<section>
|
||||||
|
<el-table v-loading="loading" class="dataMap-two-table" :data="tableData" :row-class-name="tableRowClassName" :header-cell-style="{background:'#E8F3FC'}"> <!-- :max-height="tabHeader" -->
|
||||||
|
<el-table-column label="行业大类" prop="industryCategories" align="center"/>
|
||||||
|
<el-table-column label="全年营收" prop="yearRevenue" align="center">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<div class="Table-header">全年营收</div>
|
||||||
|
<span class="Table-unit">(亿元)</span>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-number">{{ scope.row.yearRevenue }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="增加值(亿元)" prop="addValue" align="center">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<div class="Table-header">增加值</div>
|
||||||
|
<span class="Table-unit">(亿元)</span>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-number">{{ scope.row.addValue }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="增加值增速(按不变价)" prop="growth" align="center">
|
||||||
|
<template slot="header" slot-scope="scope">
|
||||||
|
<div class="Table-header">增加值增速</div>
|
||||||
|
<span class="Table-unit">(按不变价)</span>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-number">{{ scope.row.growth }} <span>%</span></div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="增加值占GDP比重" prop="gdpProportion" align="center" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div class="project-trace-table-number">{{ scope.row.gdpProportion }} <span>%</span></div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getIndustryDepth } from "@/api/jin_ji_hu/dataCloudMap"
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
loading:false,
|
||||||
|
tableData: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
getList(){
|
||||||
|
this.loading = true;
|
||||||
|
getIndustryDepth().then(res=>{
|
||||||
|
this.loading = false;
|
||||||
|
this.tableData = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 修改table背景色
|
||||||
|
tableRowClassName({row, rowIndex}){
|
||||||
|
if (rowIndex % 2 == 0) {
|
||||||
|
return 'evenNumber-row';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,166 @@
|
|||||||
|
<template>
|
||||||
|
<div id="echartsThree" ref="myChartThree"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
let colors = ['#FFA329','#00AEFF']
|
||||||
|
let datas = [
|
||||||
|
{ value: 40, name: '外资实缴资本', label:{color:"#FFA329"}},
|
||||||
|
{ value: 24, name: '内资实缴资本', label:{color:"#00AEFF"}},
|
||||||
|
];
|
||||||
|
// 公用调整
|
||||||
|
let itemStyle = {
|
||||||
|
// normal: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: "#F5F8FA",
|
||||||
|
borderWidth: 4,
|
||||||
|
color: function (params) {
|
||||||
|
return colors[params.dataIndex];
|
||||||
|
},
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
myChartThree: false,
|
||||||
|
option: {
|
||||||
|
color:colors,
|
||||||
|
grid: {
|
||||||
|
top: "0%",
|
||||||
|
left: "5%",
|
||||||
|
right: "80%",
|
||||||
|
bottom: "8%", //也可设置left和right设置距离来控制图表的大小
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: '32%',
|
||||||
|
right: '2%',
|
||||||
|
orient: 'vertical',
|
||||||
|
data: datas,
|
||||||
|
icon: 'square',
|
||||||
|
itemWith: 14,
|
||||||
|
itemHeight: 14,
|
||||||
|
itemGap: 50,
|
||||||
|
// padding: [5, 10, 5, 0],
|
||||||
|
formatter(name) {
|
||||||
|
debugger;
|
||||||
|
const item = datas.filter((item) => item.name === name)[0];
|
||||||
|
return `{name|${name}}`;
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: '#666666',
|
||||||
|
fontSize: 14,
|
||||||
|
width: 100,
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 数据
|
||||||
|
type: "pie",
|
||||||
|
zlevel: 3,
|
||||||
|
radius: ["40%", "55%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
itemStyle: itemStyle,
|
||||||
|
emphasis: {
|
||||||
|
scale: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: datas,
|
||||||
|
label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "outside",
|
||||||
|
padding: [10, -30],
|
||||||
|
formatter: (params) => {
|
||||||
|
return "{a|" +params.value+"}{b|" + "家}\n{c|" + params.value + "}{d|" + "%}";
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "#666666",
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
d: {
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 500,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
length: 20,
|
||||||
|
length2: 25,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "阴影圈",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["0%", "35%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(0, 174, 255, 0.1)",
|
||||||
|
borderWidth:1,
|
||||||
|
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||||
|
},
|
||||||
|
zlevel: 4,
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [100],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.initEchart();
|
||||||
|
})
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
cancalDebounce(){
|
||||||
|
window.onresize = this.myChartThree.resize();
|
||||||
|
},
|
||||||
|
initEchart(){
|
||||||
|
var chartDom = document.getElementById("echartsThree");
|
||||||
|
this.myChartThree = echarts.init(chartDom);
|
||||||
|
this.myChartThree.setOption(this.option)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,168 @@
|
|||||||
|
<template>
|
||||||
|
<div id="echartsTwo" ref="myChartTwo"></div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
let colors = ['#FFA329','#00AEFF','#5CBC69']
|
||||||
|
let datas = [
|
||||||
|
{ value: 40, name: '5G互联网领域', label:{color:"#FFA329"}},
|
||||||
|
{ value: 24, name: '制造业领域', label:{color:"#00AEFF"}},
|
||||||
|
{ value: 32, name: '现代物流领域', label:{color:"#5CBC69"}},
|
||||||
|
];
|
||||||
|
// 公用调整
|
||||||
|
let itemStyle = {
|
||||||
|
// normal: {
|
||||||
|
borderRadius: 4,
|
||||||
|
borderColor: "#F5F8FA",
|
||||||
|
borderWidth: 4,
|
||||||
|
color: function (params) {
|
||||||
|
return colors[params.dataIndex];
|
||||||
|
},
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
myChartTwo: false,
|
||||||
|
option: {
|
||||||
|
color:colors,
|
||||||
|
grid: {
|
||||||
|
top: "0%",
|
||||||
|
left: "5%",
|
||||||
|
right: "80%",
|
||||||
|
bottom: "8%", //也可设置left和right设置距离来控制图表的大小
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
bottom: '32%',
|
||||||
|
right: '2%',
|
||||||
|
orient: 'vertical',
|
||||||
|
data: datas,
|
||||||
|
icon: 'square',
|
||||||
|
itemWith: 14,
|
||||||
|
itemHeight: 14,
|
||||||
|
itemGap: 30,
|
||||||
|
// padding: [5, 10, 5, 0],
|
||||||
|
formatter(name) {
|
||||||
|
debugger;
|
||||||
|
const item = datas.filter((item) => item.name === name)[0];
|
||||||
|
return `{name|${name}}`;
|
||||||
|
},
|
||||||
|
textStyle: {
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
color: '#666666',
|
||||||
|
fontSize: 14,
|
||||||
|
width: 100,
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
// 数据
|
||||||
|
type: "pie",
|
||||||
|
zlevel: 3,
|
||||||
|
radius: ["40%", "55%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
itemStyle: itemStyle,
|
||||||
|
emphasis: {
|
||||||
|
scale: true,
|
||||||
|
label: {
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
data: datas,
|
||||||
|
label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "outside",
|
||||||
|
padding: [10, -30],
|
||||||
|
formatter: (params) => {
|
||||||
|
return "{a|" +params.value+"}{b|" + "家}\n{c|" + params.value + "}{d|" + "%}";
|
||||||
|
},
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 500,
|
||||||
|
color: "#666666",
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
c: {
|
||||||
|
fontFamily: "DINCondensed",
|
||||||
|
fontWeight: 'bold',
|
||||||
|
fontSize: 18,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
},
|
||||||
|
d: {
|
||||||
|
fontFamily: "AlibabaPuHuiTiR",
|
||||||
|
fontSize: 10,
|
||||||
|
fontWeight: 500,
|
||||||
|
padding: [5, 0, 0, 0],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: true,
|
||||||
|
length: 20,
|
||||||
|
length2: 40,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "阴影圈",
|
||||||
|
type: "pie",
|
||||||
|
radius: ["0%", "35%"],
|
||||||
|
center: ["35%", "50%"],
|
||||||
|
hoverAnimation: false,
|
||||||
|
tooltip: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: "rgba(0, 174, 255, 0.1)",
|
||||||
|
borderWidth:1,
|
||||||
|
borderColor: "rgba(0, 174, 255, 0.6)",
|
||||||
|
},
|
||||||
|
zlevel: 4,
|
||||||
|
labelLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
data: [100],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.initEchart();
|
||||||
|
})
|
||||||
|
window.addEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
window.removeEventListener('resize', this.cancalDebounce);
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
cancalDebounce(){
|
||||||
|
console.log("走了吗");
|
||||||
|
window.onresize = this.myChartTwo.resize();
|
||||||
|
},
|
||||||
|
initEchart(){
|
||||||
|
var chartDom = document.getElementById("echartsTwo");
|
||||||
|
this.myChartTwo = echarts.init(chartDom);
|
||||||
|
this.myChartTwo.setOption(this.option)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue