Wangxin
11 months ago
parent
d5e9657bd3
commit
1456a811d7
@ -0,0 +1,132 @@ |
||||
<template> |
||||
<div :class="className" :style="{height:height,width:width}" /> |
||||
</template> |
||||
|
||||
<script> |
||||
import * as echarts from 'echarts' |
||||
require('echarts/theme/macarons') // echarts theme |
||||
|
||||
const animationDuration = 6000 |
||||
|
||||
export default { |
||||
props: { |
||||
className: { |
||||
type: String, |
||||
default: 'chart' |
||||
}, |
||||
width: { |
||||
type: String, |
||||
default: '100%' |
||||
}, |
||||
height: { |
||||
type: String, |
||||
default: '200px' |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
chart: null |
||||
} |
||||
}, |
||||
mounted() { |
||||
this.$nextTick(() => { |
||||
this.initChart() |
||||
}) |
||||
}, |
||||
beforeDestroy() { |
||||
if (!this.chart) { |
||||
return |
||||
} |
||||
this.chart.dispose() |
||||
this.chart = null |
||||
}, |
||||
methods: { |
||||
initChart() { |
||||
this.chart = echarts.init(this.$el, 'macarons') |
||||
|
||||
this.chart.setOption( |
||||
{ |
||||
color: ['#5b9bd5', '#ed7d31'], |
||||
backgroundColor: '#FFF', |
||||
grid: { |
||||
|
||||
top: 20, |
||||
bottom: 100, |
||||
left: '12%', |
||||
right: '2%' |
||||
}, |
||||
legend: { |
||||
bottom: '10', |
||||
itemWidth: 30, |
||||
itemHeight: 6, |
||||
data: ['逐月总逆温日', '逐月PM2.5浓度'] |
||||
}, |
||||
xAxis: [{ |
||||
name: '城市', |
||||
nameLocation: 'center', |
||||
nameGap: 50, |
||||
axisLine: { |
||||
show: false |
||||
}, |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
axisLabel: { |
||||
rotate: 50 |
||||
}, |
||||
data: ['南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'], |
||||
}], |
||||
yAxis: [{ |
||||
|
||||
name: '地面风速（m/s）', |
||||
nameLocation: 'center', |
||||
nameGap: 40, |
||||
nameTextStyle: { |
||||
color: '#000' |
||||
}, |
||||
axisTick: { |
||||
show: false |
||||
}, |
||||
splitLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: '#CCC' |
||||
} |
||||
}, |
||||
axisLabel: { |
||||
color: '#000' |
||||
} |
||||
}], |
||||
series: [{ |
||||
name: '逐月总逆温日', |
||||
type: 'line', |
||||
itemStyle: { |
||||
color: '#5b9bd5', |
||||
borderColor: '#5b9bd5', |
||||
borderWidth: 4 |
||||
}, |
||||
lineStyle: { |
||||
width: 4 |
||||
}, |
||||
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 20] |
||||
}, |
||||
{ |
||||
name: '逐月PM2.5浓度', |
||||
type: 'line', |
||||
itemStyle: { |
||||
color: '#ed7d31', |
||||
borderColor: '#ed7d31', |
||||
borderWidth: 4 |
||||
}, |
||||
lineStyle: { |
||||
width: 4 |
||||
}, |
||||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 15] |
||||
} |
||||
] |
||||
} |
||||
) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,198 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-row :gutter="5"> |
||||
<el-col :span="24"> |
||||
<el-card> |
||||
<el-row> |
||||
<el-col :span="4"> |
||||
<h3>交换机</h3> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>持续在线XXXXX小时</h3> |
||||
</el-col> |
||||
</el-row> |
||||
<el-divider></el-divider> |
||||
|
||||
|
||||
<el-row> |
||||
<el-col :span="8"> |
||||
<h3>交换机</h3> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备基本信息</h3> |
||||
<p> |
||||
<span>设备型号:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备级别:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备版本:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>设备类型:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备出厂信息</h3> |
||||
<p> |
||||
<span>生产商名称:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>供货商名称:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>出厂日期:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>质保时间:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>联系人:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>联系电话:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备管理信息</h3> |
||||
<p> |
||||
<span>带外IP管理:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>安装位置:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>安装日期:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>服役年限:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>管理员:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
<el-col :span="4"> |
||||
<h3>设备状态信息</h3> |
||||
<p> |
||||
<span>累计预警次数:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
<p> |
||||
<span>累计维修次数:</span> |
||||
<span>待开发</span> |
||||
</p> |
||||
</el-col> |
||||
</el-row> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row class="mt10" :gutter="10"> |
||||
<el-col :span="12"> |
||||
<el-card :style="{height: '500px'}"> |
||||
<el-row> |
||||
<el-col :span="24" class="flex alignItems gap10"> |
||||
<h3>设备运行数据</h3> |
||||
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> |
||||
</el-col> |
||||
<el-col :span="14"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<LineChart></LineChart> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
<el-col :span="10"> |
||||
<el-row> |
||||
<el-col :span="12"> |
||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<BarChart height="200px" :dateRange="dateRange"></BarChart> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
<el-col :span="8"> |
||||
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2> |
||||
</el-col> |
||||
</el-row> |
||||
</el-col> |
||||
|
||||
|
||||
</el-row> |
||||
</el-card> |
||||
</el-col> |
||||
<el-col :span="12"> |
||||
<el-card :style="{height: '500px'}"> |
||||
<el-tabs v-model="selectedTab"> |
||||
<el-tab-pane label="历史预警" :name="1"> |
||||
历史预警 |
||||
</el-tab-pane> |
||||
<el-tab-pane label="接口信息" :name="2"> |
||||
接口信息 |
||||
</el-tab-pane> |
||||
<el-tab-pane label="其他指标" :name="3"> |
||||
其他指标 |
||||
</el-tab-pane> |
||||
</el-tabs> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import BarChart from './BarChart1.vue' |
||||
import LineChart from './LineChart.vue' |
||||
import BarChart2 from './BarChart2.vue' |
||||
export default { |
||||
name: "cardItem", |
||||
components: { BarChart, BarChart2, LineChart }, |
||||
data() { |
||||
return { |
||||
dateRange: [], |
||||
selectedTab: 1 |
||||
} |
||||
}, |
||||
created() { |
||||
}, |
||||
methods: { |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="less" scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue