185 lines
7.9 KiB
JavaScript
185 lines
7.9 KiB
JavaScript
import Vue from 'vue'
|
|
|
|
var vms = Vue.component("amplify-kjcx", {
|
|
template: `
|
|
<div>
|
|
<div class="amplify-title-icon">
|
|
<img src="http://fileimg.makalu.cc/WEB_DBD5893450984E50AFF356EF44FF4139.png" @click="openAmplify">
|
|
</div>
|
|
<transition name="el-zoom-in-top">
|
|
<div class="amplify-fixed" v-show="show" style="display: none" @click="closeAmplifyAll">
|
|
<div class="amplify-max">
|
|
<div class="amplify-title">
|
|
<div>科技创新({{sciencelnnovateDataList.length}})</div>
|
|
<div class="amplify-close" @click="closeAmplify"><i class="el-icon-close"></i></div>
|
|
</div>
|
|
<div class="amplify-content">
|
|
<!--内容区域-->
|
|
<div class="amplify-craft-video-flex">
|
|
<div class="amplify-craft-video-btn">
|
|
<img src="/images/carousel_left.png" @click="craftCarouselLeft" style="height: 100px;">
|
|
</div>
|
|
<div class="amplify-technical-overflow-max" ref="craftVollVideo" style="width: 760px;height: 550px;">
|
|
<div class="amplify-technical-overflow-min" :style="{'width': (sciencelnnovateDataList.length * 760)+'px'}">
|
|
<div class="amplify-technical-innovation-max" style="width: 760px;" v-for="sciencelnnovateData of sciencelnnovateDataList">
|
|
<div class="amplify-technical-innovation">
|
|
<div class="amplify-technical-innovation-text">课题名称：</div>
|
|
<div class="amplify-technical-innovation-info">{{sciencelnnovateData.name}}</div>
|
|
</div>
|
|
<div class="amplify-technical-innovation">
|
|
<div class="amplify-technical-innovation-text">技术指标：</div>
|
|
</div>
|
|
<div class="amplify-technical-index-max">
|
|
<ul class="amplify-technical-index-min">
|
|
<li v-for="(item,index) in sciencelnnovateData.context" :key="index">
|
|
<div class="amplify-technical-index-text">{{item.name}}</div>
|
|
<div class="amplify-technical-index-hr"></div>
|
|
<div class="technical-index-state">
|
|
<div v-if="item.status == '已完成'" class="amplify-technical-index-state-tag active">{{item.status}}</div>
|
|
<div v-else-if="item.status == ''" class="amplify-technical-index-state-tag active" style="border: 2px solid grey;background: grey;color: #c0c0c0;">未涉及</div>
|
|
<div v-else class="amplify-technical-index-state-tag">{{item.status}}</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ampligy-craft-video-btn">
|
|
<img src="/images/carousel_right.png" @click="craftCarouselRight" style="height: 100px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
`,
|
|
props: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
show:false,
|
|
//科技创新
|
|
sciencelnnovateDataList:[],
|
|
craftVideoIndex:0,
|
|
craftInterval:'',
|
|
}
|
|
},
|
|
mounted(){
|
|
//科技创新 知道滚动
|
|
this.rollCraftInterval = setInterval(this.rollCraftCarousel,5000);
|
|
},
|
|
methods: {
|
|
openAmplify(){
|
|
this.show = true
|
|
this.scienceInnovateData()
|
|
},
|
|
closeAmplify(){
|
|
this.show = false
|
|
},
|
|
closeAmplifyAll(e){
|
|
if(e.target.className == 'amplify-fixed'){
|
|
this.show = false
|
|
}
|
|
},
|
|
//科技创新
|
|
scienceInnovateData(){
|
|
axios.post("/system/scienceInnovateConfig/list1",{pageNum:1,pageSize:9999,projectId:this.projectId}).then(res=>{
|
|
let result = res.data
|
|
let tempData = []
|
|
this.sciencelnnovateDataList = []
|
|
let tmp = {}
|
|
if(result.code == 0){
|
|
result.rows.forEach(item=>{
|
|
if(!tmp[item.name]){
|
|
tmp[item.name] = {
|
|
name:item.name,
|
|
context:[]
|
|
}
|
|
}
|
|
|
|
if(item.type == '0'){
|
|
name = '研究报告'
|
|
}else if(item.type == '1'){
|
|
name = '知识产权'
|
|
}else if(item.type == '2'){
|
|
name = '论文'
|
|
}else{
|
|
name = '工法'
|
|
}
|
|
|
|
if(item.status =='0'){
|
|
status = '进行中'
|
|
}else if(item.status =='1'){
|
|
status = '已完成'
|
|
}else if(item.status =='4'){
|
|
status = ''
|
|
}else{
|
|
status = '未开始'
|
|
}
|
|
tmp[item.name] .context.push({
|
|
name,
|
|
status
|
|
})
|
|
|
|
})
|
|
for(let k in tmp ){
|
|
this.sciencelnnovateDataList.push(tmp[k])
|
|
}
|
|
|
|
}
|
|
})
|
|
},
|
|
craftCarouselLeft(){
|
|
if(this.craftVideoIndex == 0){
|
|
this.craftVideoIndex = this.sciencelnnovateDataList.length - 1
|
|
}else {
|
|
this.craftVideoIndex = this.craftVideoIndex - 1
|
|
}
|
|
$(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
|
|
},
|
|
craftCarouselRight(){
|
|
if(this.craftVideoIndex == this.sciencelnnovateDataList.length - 1){
|
|
this.craftVideoIndex = 0
|
|
}else {
|
|
this.craftVideoIndex = this.craftVideoIndex + 1
|
|
}
|
|
$(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
|
|
},
|
|
rollCraftCarousel(){
|
|
if(this.craftDirection == 'right'){
|
|
if(this.craftVideoIndex == this.sciencelnnovateDataList.length - 1){
|
|
this.craftVideoIndex = 0
|
|
}else {
|
|
this.craftVideoIndex = this.craftVideoIndex + 1
|
|
}
|
|
}else{
|
|
if(this.craftVideoIndex == 0){
|
|
this.craftVideoIndex = this.sciencelnnovateDataList.length - 1
|
|
}else {
|
|
this.craftVideoIndex = this.craftVideoIndex - 1
|
|
}
|
|
this.craftDirection = 'right'
|
|
}
|
|
$(this.$refs.craftVollVideo).animate({scrollLeft:(760*this.craftVideoIndex)+'px'})
|
|
},
|
|
|
|
craftCostMouseout(){
|
|
clearInterval(this.rollCraftInterval);
|
|
},
|
|
craftCostMouseover(){
|
|
this.rollCraftInterval = setInterval(this.rollCraftCarousel,5000);
|
|
},
|
|
|
|
},
|
|
watch:{
|
|
|
|
},
|
|
|
|
})
|
|
|
|
|