<template>
<!-- 数字桥梁运维 -->
<div>
<item-box title="桥梁数">
<div class="member-detail">
<img class="cdj-img" src="../../assets/images/bg.png"/>
<img class="cdj-img" src="../../assets/images/bg.png"/>
<img class="cdj-img" src="../../assets/images/bg.png"/>
</div>
</item-box>
<item-box title="检测及数据分析" class="cdj_margin_to">
<div class="member-detail">
<dv-scroll-board :config="config" style="width:500px;height:300px;margin-left: 25px;margin-top: 5px;" />
<div id="bridgeDays" style="width: 600px;height: 285px;margin-left: 30px;"></div>
</div>
</item-box>
</div>
</template>
<script>
import itemBox from '../element/item-box.vue'
import land from '../../assets/land.js';
import * as echarts from 'echarts';
export default {
components: {
"item-box": itemBox,
},
data() {
return {
config:{}
}
},
mounted() {
this.configs();
this.bridgeDay();
},
methods: {
//轮播表
configs(){
var data = [
['行1列1', '行1列2', '行1列3'],
['行2列1', '行2列2', '行2列3'],
['行3列1', '行3列2', '行3列3'],
['行4列1', '行4列2', '行4列3'],
['行5列1', '行5列2', '行5列3'],
['行6列1', '行6列2', '行6列3'],
['行7列1', '行7列2', '行7列3'],
['行8列1', '行8列2', '行8列3'],
['行9列1', '行9列2', '行9列3'],
['行10列1', '行10列2', '行10列3']
];
this.config = {data: data,
header: ['桥梁名称', '检测结果', '检测时间'],
rowNum:6,
index: true,
columnWidth: [50],
align: ['center']
}
},
//主桥温度,主桥中跨跨中梁底应变
bridgeDay(){
var chartDom = document.getElementById('bridgeDays');
var myChart = echarts.init(chartDom);
var option;
option = {
color: ['rgb(255, 88, 105)', 'rgb(35, 130, 255)'],
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#b1cadd'
}
}
},
legend: {
data: ['主桥温度', '主桥中跨跨中梁底应变', 'Line 3', 'Line 4', 'Line 5'],
textStyle:{
color:"#fff"
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['1', '2', '3', '4', '5', '6', '7'],
axisLine: {
lineStyle: {
color: "#fff",
}
}
},
],
yAxis: [
{
type: 'value',
axisLine: {
lineStyle: {
color: "#fff",
}
}
}
],
series: [
{
name: '主桥温度',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(128, 255, 165)'
},
{
offset: 1,
color: 'rgb(255, 88, 105)'
}
])
},
emphasis: {
focus: 'series'
},
data: [20, 22, 32, 26, 25, 27, 23]
},
{
name: '主桥中跨跨中梁底应变',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 191, 0)'
},
{
offset: 1,
color: 'rgb(35, 130, 255)'
}
])
},
emphasis: {
focus: 'series'
},
data: [35, 37, 39, 32, 40, 36, 33]
}
]
};
myChart.setOption(option);
}
}
}
</script>
<style lang="scss">
// 轮播表颜色,表头宽度和高度
.dv-scroll-board .header{
display: flex;
flex-direction:row;
font-size:15;
width: 500px;
height: 43px;
}
.member-detail {
display: flex;
margin-left: -28px;
.cdj-img{
margin-top: 6px;
width: 456px;
height: 270px;
border-radius: 5px;
margin-left: 28px;
}
}
</style>