Skip to content

T
techbook
Commit c6c9204c authored by zhangyanni's avatar zhangyanni
Browse files
Options

第三

parent 93b2f94a
Show whitespace changes
Inline Side-by-side
Showing with 587 additions and 15 deletions
src/views/activitycode/activitycodelist.vue deleted 100644 → 0
View file @ 93b2f94a
<template>
</template>
<script>
export default {
name : "activitycodelist"
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/views/report/busThirdScreen.vue 0 → 100644
View file @ c6c9204c
<template>
<div class="thirdEchart">
<p>河北省企业上线情况</p>
<div class="tabList">
<span @click="handleTo(1)" :class="currentIndex==1?'activeLi':''"><p>已发布需求排名</p> <i class="spanI" v-if="currentIndex==1"></i></span>
<span @click="handleTo(2)" :class="currentIndex==2?'activeLi':''"><p>主要关注的关键词排名</p> <i class="spanI" v-if="currentIndex==2"></i></span>
<span @click="handleTo(3)" :class="currentIndex==3?'activeLi':''"><p>最新对接人才</p> <i class="spanI" v-if="currentIndex==3"></i></span>
<span @click="handleTo(4)" :class="currentIndex==4?'activeLi':''"><p>对接项目进展</p> <i class="spanI" v-if="currentIndex==4"></i></span>
<span @click="handleTo(5)" :class="currentIndex==5?'activeLi':''"><p>可能感兴趣的项目</p> <i class="spanI" v-if="currentIndex==5"></i></span>
</div>
<div class="list" v-show="currentIndex==1">
<div>
<div id="requireTurn"></div>
</div>
</div>
<div class="list" v-show="currentIndex==2">
<div>
<div id="cityEchart"></div>
</div>
</div>
<div class="list" v-show="currentIndex==3">
<div>
<div id="industryEchart"></div>
</div>
<div>
<div id="industryVertical"></div>
</div>
</div>
<div class="list fourList" v-show="currentIndex==4">
<div>
<div id="aboutPeople"></div>
<p>相关人才</p>
</div>
<div>
<div id="projectNum"></div>
<p>项目数量</p>
</div>
<div>
<div id="infoKnowledge"></div>
<p>信息知识</p>
</div>
<div>
<div id="productInfo"></div>
<p>品牌</p>
</div>
</div>
</div>
</template>
<script>
import echarts from 'echarts';
import '../../../public/js/techbook';
export default {
name: "busThirdScreen",
props:['isShow'],
data(){
return{
currentIndex:1,
firstEcharts:null,
secondEcharts:null,
thirdEcharts:null,
forthEcharts:null,
firstEchartsOption:{
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: '上线状况',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
normal: {
color: '#fff',
shadowBlur: 10,
shadowColor: '#333'
}
}
]
},
secondEchartsOption:{
dataset: {
source: [
['score', 'amount', 'product'],
[89.3, 58, '邢台'],
[57.1, 16, '承德'],
[74.4, 323, '唐山'],
[50.1, 87, '秦皇岛'],
[89.7, 47, '廊坊'],
[68.1, 255, '保定'],
[32.7, 32, '衡水'],
[19.6, 66, '张家口'],
[10.6, 1312, '石家庄'],
[32.7, 134, '邯郸'],
[32.7, 31, '沧州'],
]
},
grid: {containLabel: true},
xAxis: {
name: '',
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
},
splitLine: {
lineStyle:{
color:"#9A8EB4"
}
},//去除网格分割线
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
},
yAxis: {
type: 'category',
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
},
splitLine: {
show:false
},//去除网格分割线
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
},
series: [
{
type: 'bar',
encode: {
// Map the "amount" column to X axis.
x: 'amount',
// Map the "product" column to Y axis
y: 'product'
},
barWidth: '14px',
itemStyle: {
normal: {
color: '#FFB822',//设置柱子颜色
label: {
show: true,//柱子上显示值
position: 'right',//值在柱子上方显示
textStyle: {
color: '#FFB822'//值得颜色
}
},
barBorderRadius:[0, 10, 10, 0], // 设置柱状图圆角
}
}
}
]
},
industryEchartsOption:{
title : {
text: '',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>数量 : {c}<br/>占比：{d}%"
},
series : [
{
name: '上线状况',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:[
{value:201, name:'制造'},
{value:167, name:'交通运输'},
{value:381, name:'批发零售'},
{value:66, name:'住宿餐饮'},
{value:150, name:'建筑与房地产'},
{value:90, name:'信息技术'},
{value:279, name:'金融业'},
{value:48, name:'文化娱乐'},
{value:85, name:'公共管理'},
{value:332, name:'能源'},
{value:120, name:'医疗'},
{value:283, name:'其他'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
normal: {
color: '#fff',
shadowBlur: 10,
shadowColor: '#333'
}
}
]
},
industryVerticalOption:{
legend: {},
tooltip: {},
dataset: {
source: [
['product', '受关注数', '响应数'],
['求冷轧锌铝镁产品关键装备及工艺开发', 1239, 231],
['寻找高温移动金属显热回收和利用技术', 2432,33],
['粉末涂料高速连续涂布技术', 2312,543],
['寻求钢板表面粘结问题解决方案',3241,435],
['不锈钢轧制油泥固液分离和资源回收装置研究', 3325,753],
]
},
xAxis: {
type: 'category',
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
},
splitLine: {
show:false
},//去除网格分割线
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
},
yAxis: {
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
},
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
splitLine: {
lineStyle: {
color: '#9A8EB4',
opacity:0.5,
}
},//去除网格分割线
},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
],
barWidth: '8px',
},
platformEchartsOption:{
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['平台', '某企业']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
},
splitLine: {
lineStyle:{
color:"#9A8EB4"
}
},//去除网格分割线
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
},
yAxis: {
type: 'category',
data: [],
axisLabel: {
textStyle: {
color: '#fff',//坐标值得具体的颜色
}
},
splitLine: {
show:false
},//去除网格分割线
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
},
series: []
},
platformSource1:[ '国内', '国际'],
platformSource2:['用户话题数量', '行业报告数量','新闻动态数量'],
platformSource3:['访问人数', '参与话题人数','关注用户数'],
platformSeries1:[
{
name: '平台',
type: 'bar',
data: [2112342,33423]
},
{
name: '某企业',
type: 'bar',
data: [12323,9423]
}
],
platformSeries2:[
{
name: '平台',
type: 'bar',
data: [642351,232832]
},
{
name: '某企业',
type: 'bar',
data: [16323,28423]
}
],
platformSeries3:[
{
name: '平台',
type: 'bar',
data: [1002002,5234,23001]
},
{
name: '某企业',
type: 'bar',
data: [23520,12220,8722]
}
],
platformSeries4:[
{
name: '平台',
type: 'bar',
data: [5002002,300200,2300102]
},
{
name: '某企业',
type: 'bar',
data: [187430,99233,125490]
}
]
}
},
methods:{
handleTo(type){
this.currentIndex = type;
if(type==1){
this.getInitEchart(1);
this.getInitEchart(2);
this.getInitEchart(3);
this.getInitEchart(4);
}else if(type==2){
this.getInitCityEchart();
}else if(type==3){
this.getInitIndustryEchart();
this.getInitIndustryVertivcalEcharts();
}else{
this.getInitPlatformEcharts(1);
this.getInitPlatformEcharts(2);
this.getInitPlatformEcharts(3);
this.getInitPlatformEcharts(4);
}
},
getInitEchart(type){
if(type==1){
this.firstEchartsOption.series[0].data =[{value:52, name:'上线数'},
{value:50, name:'未上线'}];
}else if(type==2){
this.firstEchartsOption.series[0].data =[{value:389, name:'上线数'},
{value:834, name:'未上线'}];
}else if(type==3){
this.firstEchartsOption.series[0].data =[{value:718, name:'上线数'},
{value:1624, name:'未上线'}];
}else{
this.firstEchartsOption.series[0].data =[{value:1043, name:'上线数'},
{value:2489, name:'未上线'}];
}
let mapChart = type==1?document.getElementById("businessType"):type==2?document.getElementById("cityType"):type==3?document.getElementById("industryType"):document.getElementById("platformType"),resultEchart;
resultEchart = echarts.init(mapChart,'techbook');
resultEchart.setOption(this.firstEchartsOption, true);
},
getInitCityEchart(){
let mapChart = document.getElementById("cityEchart"),resultEchart;
mapChart.style.width = window.innerWidth + 'px';
mapChart.style.height = '450px';
resultEchart = echarts.init(mapChart,'techbook');
resultEchart.setOption(this.secondEchartsOption, true);
},
getInitIndustryEchart(){
let mapChart = document.getElementById("industryEchart"),echartIndustry;
mapChart.style.width = window.innerWidth / 2 + 'px';
mapChart.style.height = '450px';
echartIndustry = echarts.init(mapChart,'techbook');
echartIndustry.setOption(this.industryEchartsOption, true);
},
getInitIndustryVertivcalEcharts(){
let mapChart = document.getElementById("industryVertical"),resultEchart;
mapChart.style.width = window.innerWidth/2 + 'px';
mapChart.style.height = '450px';
resultEchart = echarts.init(mapChart,'techbook');
resultEchart.setOption(this.industryVerticalOption, true);
},
getInitPlatformEcharts(type){
if(type==1){
this.platformEchartsOption.yAxis.data = this.platformSource1;
this.platformEchartsOption.series = this.platformSeries1;
}else if(type==2){
this.platformEchartsOption.yAxis.data = this.platformSource1;
this.platformEchartsOption.series = this.platformSeries2;
}
else if(type==3){
this.platformEchartsOption.yAxis.data = this.platformSource2;
this.platformEchartsOption.series = this.platformSeries3;
}else{
this.platformEchartsOption.yAxis.data = this.platformSource3;
this.platformEchartsOption.series = this.platformSeries4;
}
let mapChart = type==1?document.getElementById("aboutPeople"):type==2?document.getElementById("projectNum"):type==3?document.getElementById("infoKnowledge"):document.getElementById("productInfo"),echartIndustry;
mapChart.style.width = window.innerWidth / 2 - 50 + 'px';
mapChart.style.height = '200px';
echartIndustry = echarts.init(mapChart,'techbook');
echartIndustry.setOption(this.platformEchartsOption, true);
},
},
mounted(){
this.handleTo(1);
}
}
</script>
<style scoped lang="scss">
.thirdEchart{
height: 100%;
background: url("../../assets/img/report/second_bg.png") no-repeat;
background-size: 100%;
color: #fff;
padding-top: 50px;
position: relative;
&>p{
font-size: 30px;
}
.tabList{
margin-top: 30px;
text-align:left;
margin-bottom: 23px;
font-weight: 500;
display: -webkit-flex; /*新版本语法：chrome 21+*/
display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
&>span{
display: inline-block;
margin-right: 50px;
color: #fff;
font-size: 16px;
cursor: pointer;
height: 20px;
position: relative;
}
&>span.activeLi{
color: #FFB822;
}
.spanI{
display: inline-block;
width:50px;
height:2px;
background:rgba(255,185,0,1);
border-radius:1px;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -25px;
}
}
.list{
width: 100%;
border-radius: 3px;
text-align: left;
height: 410px;
display: -webkit-flex; /*新版本语法：chrome 21+*/
display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
justify-content: center;
&>div{
flex: 1;
&>div{
width: 100%;
height: 100%;
}
&>p{
text-align: center;
font-weight: 500;
}
}
&.fourList{
flex-wrap: wrap;
&>div{
width: 45%;
height: 40%;
margin-bottom: 5%;
}
}
}
.worldMap{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: url("../../assets/img/report/bg.jpg") no-repeat;
background-size: 100%;
}
.closeButton{
position: absolute;
right: 20px;
top: 20px;
cursor: pointer;
.icon-cuowu:before{
color: #D8D8D8;
font-size: 25px;
}
}
}
</style>
\ No newline at end of file
src/views/report/reportIndex.vue
View file @ c6c9204c
......@@ -41,6 +41,9 @@
<swiper-slide style="width:100%;height:100%;">
<businessSecondScreen v-if="isShowThird"></businessSecondScreen>
</swiper-slide>
<swiper-slide style="width:100%;height:100%;">
<businessThirdScreen v-if="isShowForth"></businessThirdScreen>
</swiper-slide>
<div class="swiper-pagination1" v-show="isShowPage" v-for="(item,index) in list1" :key="index" slot="pagination"></div>
</swiper>
</section>
......@@ -60,6 +63,7 @@
import forthScreen from './forthScreen';
import businessFirstScreen from './busFirstScreen'
import businessSecondScreen from './busSecondScreen';
import businessThirdScreen from './busThirdScreen';
export default {
name: "reportIndex",
components: {
......@@ -67,7 +71,8 @@
thirdScreen,
forthScreen,
businessFirstScreen,
businessSecondScreen
businessSecondScreen,
businessThirdScreen
},
data() {
const that = this;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment