You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
438 lines
10 KiB
438 lines
10 KiB
1 year ago
|
<template>
|
||
|
|
<div class='TrafficFlow'>
|
||
|
|
<section class="foot">
|
||
|
|
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
|
||
|
|
<el-tab-pane label="设备分析" name="first">
|
||
|
|
|
||
|
|
</el-tab-pane>
|
||
|
|
<el-tab-pane label="设备查询" name="second">
|
||
|
|
<div class="topdiv" >
|
||
|
|
<div class="left-div" >
|
||
|
|
<el-button >刷新</el-button>
|
||
|
|
<el-button >导出Excel</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="middleDiv" >
|
||
|
|
<div id="chart1" >
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div >
|
||
|
|
<el-table
|
||
|
|
:border="false"
|
||
|
|
:data="tableData"
|
||
|
|
height="480"
|
||
|
|
style="width: 100%">
|
||
|
|
<el-table-column
|
||
|
|
prop="nem"
|
||
|
|
label="序号"
|
||
|
|
width="80">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="address"
|
||
|
|
label="设备类型"
|
||
|
|
width="">
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="root"
|
||
|
|
label="方向"
|
||
|
|
class-name="showClass"
|
||
|
|
width="">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span class="showClass">{{scope.row.name}}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="ip"
|
||
|
|
label="设备IP"
|
||
|
|
width=""
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="cj"
|
||
|
|
label="厂家"
|
||
|
|
width=""
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="xh"
|
||
|
|
label="型号"
|
||
|
|
width=""
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="wd"
|
||
|
|
label="网段"
|
||
|
|
width=""
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="jcsj"
|
||
|
|
label="监测时间"
|
||
|
|
width=""
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column
|
||
|
|
prop="cz"
|
||
|
|
label="操作"
|
||
|
|
width=""
|
||
|
|
>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-tab-pane>
|
||
|
|
</el-tabs>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import * as echarts from "echarts";
|
||
|
|
import chartsStatistics from "./assets/charts";
|
||
|
|
export default {
|
||
|
|
name: 'publicService',
|
||
|
|
components: {
|
||
|
|
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
activeName:"first",
|
||
|
|
tableData: [{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2023-12-31 13:00:00',
|
||
|
|
name: '高清网络球形摄像机',
|
||
|
|
address: 'K234+235',
|
||
|
|
root:"中央分隔带",
|
||
|
|
ip:"10.0.61.43",
|
||
|
|
cj:"海康威视",
|
||
|
|
xh:"XXX",
|
||
|
|
wd:"梁山收费站监控网段",
|
||
|
|
jcsj:"2024-01-17",
|
||
|
|
cz:"在线",
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
changeTabs(){
|
||
|
|
console.log("======================", this.myChart);
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.myChart.resize();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
setTimeout(() => {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
||
|
|
myChart.setOption(chartsStatistics);
|
||
|
|
this.myChart = myChart;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
|
||
|
|
|
||
|
|
::v-deep .el-table .cell {
|
||
|
|
padding-left:0px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table .el-table__header-wrapper th {
|
||
|
|
background-color: #064258 !important;
|
||
|
|
color:#00D1FF;
|
||
|
|
border-color: #064258 !important;
|
||
|
|
border:0px !important;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table {
|
||
|
|
border:0px !important;
|
||
|
|
background-color: transparent;
|
||
|
|
font-size:12px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table__body-wrapper {
|
||
|
|
background-color: #064258;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
::v-deep .el-table .el-table__cell {
|
||
|
|
height:47px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table tr:hover td {
|
||
|
|
background: #1b2528 !important;
|
||
|
|
color:#00D1FF;
|
||
|
|
height: 47px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table tr:nth-child(odd) td{
|
||
|
|
background-color: #13272F ;
|
||
|
|
border:0px !important;
|
||
|
|
}
|
||
|
|
::v-deep .el-table tr:nth-child(even) td{
|
||
|
|
border:0px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-table tr {
|
||
|
|
background-color: #133242 !important;
|
||
|
|
border-collapse:0;
|
||
|
|
border:0px !important;
|
||
|
|
background-color: transparent !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__item{
|
||
|
|
display: inline-flex;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 16px;
|
||
|
|
font-family: PingFang SC, PingFang SC;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #FFFFFF;
|
||
|
|
min-width:128px;
|
||
|
|
position: relative;
|
||
|
|
left:10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__active-bar {
|
||
|
|
min-width:128px;
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .el-tabs__nav-wrap::after {
|
||
|
|
background-color: #133242;
|
||
|
|
opacity: 0.1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footTabs {
|
||
|
|
display: inline;
|
||
|
|
width:100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.TrafficFlow {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
z-index: 6;
|
||
|
|
color: white;
|
||
|
|
|
||
|
|
.header-shot{
|
||
|
|
width: 98%;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 15px;
|
||
|
|
height:160px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.middleDiv {
|
||
|
|
display: inline-flex;
|
||
|
|
width:100%;
|
||
|
|
height:343px;
|
||
|
|
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425860 100%);
|
||
|
|
margin-bottom:30px;
|
||
|
|
|
||
|
|
> div {
|
||
|
|
display: inline-flex;
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
margin: auto;
|
||
|
|
display: flex;
|
||
|
|
flex: 1;
|
||
|
|
pointer-events: none;
|
||
|
|
margin-top: 19px;
|
||
|
|
|
||
|
|
>div {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-l {
|
||
|
|
width: calc(25%);
|
||
|
|
|
||
|
|
margin-right:20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-mi {
|
||
|
|
width: calc(50%);
|
||
|
|
|
||
|
|
margin-right:20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.content-m {
|
||
|
|
display: inline-flex;
|
||
|
|
flex-direction: column;
|
||
|
|
width: calc(100% / 4 );
|
||
|
|
margin-right:20px;
|
||
|
|
|
||
|
|
.content-m-t {
|
||
|
|
width:100%;
|
||
|
|
height:240px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content-r {
|
||
|
|
width: 49.4%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.foot{
|
||
|
|
width: 98%;
|
||
|
|
margin: auto;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex: 1;
|
||
|
|
pointer-events: none;
|
||
|
|
margin-top: 8px;
|
||
|
|
>div {
|
||
|
|
pointer-events: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.foot-w {
|
||
|
|
width:100%;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.foot-l {
|
||
|
|
width: 726px;
|
||
|
|
}
|
||
|
|
.foot-m {
|
||
|
|
width: 613px;
|
||
|
|
}
|
||
|
|
.foot-r {
|
||
|
|
width: 493px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|