Skip to content

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

第三瓶

parent 9a28aabc
Show whitespace changes
Inline Side-by-side
Showing with 154 additions and 91 deletions
src/views/report/busThirdScreen.vue
View file @ 0c98a176
<template>
<div class="thirdEchart">
<p>河北省企业上线情况</p>
<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>
......@@ -10,24 +10,54 @@
</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 id="keywordEchart"></div>
</div>
</div>
<div class="list" v-show="currentIndex==3">
<div>
<div id="industryEchart"></div>
</div>
<div>
<div id="industryVertical"></div>
</div>
<div class="tableInfo" v-show="currentIndex==3">
<el-table class="reportTable"
:data="tableData"
style="width: 100%;text-align:center;background: unset;"
>
<el-table-column
label="姓名"
prop="name"
align="left"
width="300"
header-align="left">
</el-table-column>
<el-table-column
label="简介"
header-align="center"
align="center"
prop="briefIntroduction"
>
</el-table-column>
<el-table-column
prop="work"
label="业务"
align="center"
header-align="center"
>
<template slot-scope="scope">
<p>{{scope.row.cooperationWayStr}}</p>
</template>
</el-table-column>
<el-table-column
prop="coopModel"
label="合作形式"
align="center"
header-align="center"
>
</el-table-column>
</el-table>
</div>
<div class="list fourList" v-show="currentIndex==4">
<div>
<div id="aboutPeople"></div>
......@@ -220,17 +250,27 @@
}
]
},
industryVerticalOption:{
legend: {},
tooltip: {},
legend: {
data: ['受关注数', '响应数'],
align: 'right',
right:200
},
tooltip: {
trigger: 'item',
formatter: function(params){
var data = params.seriesName=='受关注数'?params.data[1]:params.data[2];
return `${params.name}<br/>${params.seriesName}：${data}`
}
},
dataset: {
source: [
['product', '受关注数', '响应数'],
['求冷轧锌铝镁产品关键装备及工艺开发', 1239, 231],
['寻找高温移动金属显热回收和利用技术', 2432,33],
['粉末涂料高速连续涂布技术', 2312,543],
['寻求钢板表面粘结问题解决方案',3241,435],
['不锈钢轧制油泥固液分离和资源回收装置研究', 3325,753],
['人工智能药物发现算法', 550, 280],
['新型药用辅料', 310,120],
['小分子筛选和发现技术', 153,53],
]
},
......@@ -273,11 +313,91 @@
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
],
barWidth: '8px',
barWidth: '40px',
},
keywordOption:{
tooltip: {
trigger: 'axis'
},
legend: {
data:['药物发现','基因检测','小分子药'],
align:'right',
right:200
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2019.6','2019.7','2019.8','2019.9','2019.10','2019.11','2019.12'],
splitLine: {
show:false
},//去除网格分割线
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#9A8EB4',
width: 2, //这里是为了突出显示加上的
}
},
splitLine: {
lineStyle: {
color: '#9A8EB4',
opacity:0.5,
}
},//去除网格分割线
},
series: [
{
name:'药物发现',
type:'line',
data:[120, 120, 120, 120, 120, 120, 120]
},
{
name:'基因检测',
type:'line',
data:[220, 230, 240, 250, 260, 270, 280]
},
{
name:'小分子药',
type:'line',
data:[150, 140, 130, 120, 110, 100, 90]
},
]
},
tableData:[{
id:1,
name:"温书豪",
briefIntroduction:"在中国科学院、美国加州大学、麻省理工学院，有11年的学习、研究、工作经验， 在计算物理、量子化学等领域有丰富的研究经验与理论建树。由他带领研发的预测算法可以实现对复杂分子的快速、准确预测，是该领域具有突破性的技术进展。2014年，温书豪在麻省理工创建XtalPi。由他主导了公司的多轮融资，并促成与顶级跨国药企、研究机构的多项合作。",
work:"人工智能药物发现合作",
coopModel:"外部咨询"
},{
id:2,
name:"马健",
briefIntroduction:"浙江大学物理学博士。在麻省理工学院进行博士后研究期间创立XtalPi。曾在日本理化所与香港中文大学出任访问学者，在量子信息、量子计算、数值模拟方面有丰富的研究经验，带领核心研发团队接连取得技术突破，并代表晶泰科技在多项省级、国家级比赛中获得最高奖项。",
work:"人工智能药物发现合作",
coopModel:"外部咨询"
}],
platformEchartsOption:{
tooltip: {
trigger: 'axis',
......@@ -391,87 +511,25 @@
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);
if(type!=3){
this.getInitEchart(type);
}
},
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;
getInitEchart(type){
let mapChart = type==1?document.getElementById("requireTurn"):type==2?document.getElementById("keywordEchart"):'',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');
if(type==1){
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;
resultEchart.setOption(this.keywordOption, true);
}
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(){
......@@ -557,6 +615,11 @@
}
}
}
&>div.tableInfo{
width: 74%;
height: auto;
}
.worldMap{
width: 100%;
height: 100%;
......
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