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.
968 lines
26 KiB
968 lines
26 KiB
<template>
|
|
<div class='TrafficFlow'>
|
|
<section class="foot">
|
|
<el-tabs class="footTabs" v-model="activeName" @tab-click="changeTabs">
|
|
<el-tab-pane label="设备分析" name="first">
|
|
<div class="topTabs" >
|
|
<div class="item" v-for=" item in equipments" >
|
|
<div class="title-tool" >
|
|
<span class="text" >{{ item.text }}</span>
|
|
</div>
|
|
<div class="item-body" >
|
|
<div class="left-body" >
|
|
<img src="./assets/shexiangtou.png" />
|
|
<span class="num" >{{ item.num }} <span class="unit">套</span></span>
|
|
</div>
|
|
<div class="line" ></div>
|
|
<div class="right-list" >
|
|
<div class="list-text" >
|
|
<span>在线：</span>
|
|
<div class="show-text1" >
|
|
{{ item.sucessRate }}
|
|
</div>
|
|
</div>
|
|
<div class="list-text" ><span>离线：</span>
|
|
<div class="show-text2" >
|
|
{{ item.failRate }}
|
|
</div>
|
|
</div>
|
|
<div class="list-text" >
|
|
<span>丢包：</span>
|
|
<div class="show-text3" >
|
|
{{ item.lostRate }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bottomTabs" >
|
|
<DeviceUptime :dataList="equipments" class="tabs-lo" />
|
|
<MonthlyEquipment class="tabs-mo" />
|
|
</div>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="设备查询" name="second">
|
|
<div class="topdiv" >
|
|
<div class="left-div" >
|
|
<el-button size="mini" icon="el-icon-refresh-left" class="btnSearch" >刷新</el-button>
|
|
<el-button size="mini" icon="el-icon-download" class="btnSearch" @click="SystemStatusExport" >导出Excel</el-button>
|
|
</div>
|
|
<div class="right-div" >
|
|
<InputSearch style="width: 402px;" :formList="searchFormList" @handleSearch="handleSearch" />
|
|
</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="deviceName"
|
|
label="设备名称"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="deviceNo"
|
|
label="设备桩号"
|
|
width="">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="direction"
|
|
label="方向"
|
|
class-name="showClass"
|
|
width="">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceIp"
|
|
label="设备IP"
|
|
width=""
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="production"
|
|
label="厂家"
|
|
width=""
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="type"
|
|
label="型号"
|
|
width=""
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.type == 1" >高清网络枪型固定摄像机</div>
|
|
<div v-if="scope.row.type == 2" >高清网络球形摄像机</div>
|
|
<div v-if="scope.row.type == 3" >桥下高清网络球形摄像机</div>
|
|
<div v-if="scope.row.type == 4" >360°全景摄像机</div>
|
|
<div v-if="scope.row.type == 5" >180°全景摄像机</div>
|
|
<div v-if="scope.row.type == 6" >门架式可变信息标志</div>
|
|
<div v-if="scope.row.type == 7" >雨棚可变信息标志</div>
|
|
<div v-if="scope.row.type == 8" >站前悬臂式可变信息标志</div>
|
|
<div v-if="scope.row.type == 9" >气象检测器</div>
|
|
<div v-if="scope.row.type == 10" >路段语音广播系统</div>
|
|
<div v-if="scope.row.type == 11" >护栏碰撞预警系统</div>
|
|
<div v-if="scope.row.type == 12" >毫米波雷达</div>
|
|
<div v-if="scope.row.type == 13" >合流区预警系统</div>
|
|
<div v-if="scope.row.type == 14" >激光疲劳唤醒</div>
|
|
<div v-if="scope.row.type == 15" >一类交通量调查站</div>
|
|
<div v-if="scope.row.type == 16" >智能行车诱导系统</div>
|
|
<div v-if="scope.row.type == 17" >智能设备箱</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="network"
|
|
label="网段"
|
|
width=""
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="time"
|
|
label="监测时间"
|
|
width=""
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceStatus"
|
|
label="操作"
|
|
width=""
|
|
>
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.deviceStatus == 1" >在线</div>
|
|
<div v-if="scope.row.deviceStatus == 0" >离线</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="foot" >
|
|
<Pagination
|
|
@current-change="changePage"
|
|
width="'100%'"
|
|
:page-size="pageSize"
|
|
:current-page.sync="pageIndex"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="pageTotal">
|
|
</Pagination>
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import * as echarts from "echarts";
|
|
import chartsStatistics from "./assets/charts";
|
|
import DeviceUptime from './components/deviceUptime';
|
|
import MonthlyEquipment from './components/monthlyEquipment';
|
|
import { getSystemStatusList, getSystemStatusTabList, getSystemStatusType, getSystemStatusExport } from "../../../../../api/MonthlyEquipment";
|
|
import { download } from '../../../../../utils/request.js';
|
|
import Pagination from '@screen/components/Pagination.vue';
|
|
import InputSearch from '@screen/components/InputSearch/index.vue';
|
|
import { searchFormList } from "./data";
|
|
import { Loading } from 'element-ui';
|
|
|
|
export default {
|
|
name: 'publicService',
|
|
components: {
|
|
DeviceUptime,
|
|
MonthlyEquipment,
|
|
Pagination,
|
|
InputSearch
|
|
},
|
|
data(){
|
|
return {
|
|
startTime: "2024-01-01 00:00:00",
|
|
time: "2024-01-31 00:00:00",
|
|
typeQuery:1, //高清网络枪型固定摄像机
|
|
pageTotal:0,
|
|
pageIndex:1,
|
|
pageSize:10,
|
|
searchFormList,
|
|
equipments:[
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
{
|
|
num : 315,
|
|
online: 30,
|
|
outline: 30,
|
|
lost: 40
|
|
},
|
|
],
|
|
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:{
|
|
changePage(page){
|
|
|
|
this.queryTabList(page);
|
|
},
|
|
formatDate(val){
|
|
let year = val.getFullYear();
|
|
var m = val.getMonth() + 1;
|
|
var day = val.getDate();
|
|
|
|
m = m < 10?"0"+m:""+m;
|
|
day = day < 10?"0"+day:""+day;
|
|
|
|
return year+"-"+m+"-"+day+" 00:00:00";
|
|
},
|
|
handleSearch(data) {
|
|
console.log(data);
|
|
this.typeQuery = data.type;
|
|
this.startTime = this.formatDate(data.time[0]);
|
|
this.time = this.formatDate(data.time[1]);
|
|
this.queryChartList();
|
|
this.queryTabList(1);
|
|
},
|
|
changeTabs(){
|
|
console.log("======================", this.myChart);
|
|
this.$nextTick(() => {
|
|
this.myChart.resize();
|
|
});
|
|
},
|
|
//导出
|
|
SystemStatusExport(){
|
|
let loadingInstance = Loading.service({fullscreen:true,background:"#00000052",text:"文件正在下载..."});
|
|
getSystemStatusExport({
|
|
startTime:this.startTime,
|
|
time:this.time,
|
|
type:this.typeQuery,
|
|
}).then((res)=>{
|
|
console.log(res);
|
|
const url = window.URL.createObjectURL(new Blob([res]))
|
|
let link = document.createElement('a')
|
|
link.style.display = 'none'
|
|
link.href = url
|
|
link.setAttribute('download', '设备统计信息.xlsx')
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
URL.revokeObjectURL(link.href) // 释放URL 对象
|
|
document.body.removeChild(link)
|
|
link = null
|
|
loadingInstance.close();
|
|
})
|
|
},
|
|
queryChartList(){
|
|
|
|
|
|
getSystemStatusList({
|
|
startTime:this.startTime,
|
|
time:this.time,
|
|
type:this.typeQuery,
|
|
}).then((res)=>{
|
|
if ( res.code == 200 ) {
|
|
let data = res.data;
|
|
let startTime = new Date(this.startTime);
|
|
let month = startTime.getMonth() + 1;
|
|
let dayS = startTime.getDate();
|
|
let backCooDatas = [];
|
|
let dayArr = [];
|
|
for (var i = 1 ;i < 31;i++){
|
|
let daystr = startTime.getFullYear() + "-" + month + "-"+ i;
|
|
let dataObj = data[daystr] ? parseFloat(data[daystr]):0;
|
|
dayArr.push(daystr);
|
|
backCooDatas.push(dataObj);
|
|
}
|
|
console.log("===================",backCooDatas);
|
|
chartsStatistics.series[0].data = backCooDatas;
|
|
this.$nextTick(() => {
|
|
this.myChart.setOption(chartsStatistics);
|
|
});
|
|
}
|
|
|
|
})
|
|
},
|
|
queryTypes(){
|
|
getSystemStatusType().then((res)=>{
|
|
console.log("===========================",res);
|
|
this.equipments = [];
|
|
let allList = [];
|
|
let data = res.data;
|
|
let i = 0;
|
|
for (var it in data){
|
|
let item = {
|
|
text:it,
|
|
num:data[it].sum,
|
|
sucessRate:data[it].sucessRate,
|
|
lostRate:data[it].lostRate,
|
|
failRate:data[it].failRate
|
|
}
|
|
console.log(it,i);
|
|
i+= 1;
|
|
if ( it == "全部设备" ) {
|
|
allList.splice(0,0,item);
|
|
} else
|
|
allList.push(item);
|
|
}
|
|
console.log(allList);
|
|
this.equipments = allList;
|
|
})
|
|
|
|
},
|
|
//查询列表
|
|
queryTabList(pageIndex,pageSize = 30){
|
|
getSystemStatusTabList({
|
|
startTime:this.startTime,
|
|
time:this.time,
|
|
type:this.typeQuery,
|
|
pageNum:pageIndex,
|
|
pageSize:pageSize,
|
|
}).then((res)=>{
|
|
console.log(res);
|
|
if ( res.code == 200 ) {
|
|
this.pageIndex = pageIndex;
|
|
this.pageSize = pageSize;
|
|
this.pageTotal = res.total;
|
|
this.tableData = res.rows;
|
|
|
|
this.tableData.forEach((it,index)=>{
|
|
it.nem = (pageIndex - 1 ) * ( pageSize ) + index + 1;
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
this.$nextTick(() => {
|
|
var myChart = echarts.init(document.getElementById('chart1'));
|
|
myChart.setOption(chartsStatistics);
|
|
this.myChart = myChart;
|
|
});
|
|
this.queryTypes();
|
|
this.queryTabList(1);
|
|
this.queryChartList();
|
|
|
|
|
|
});
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
|
.bottomTabs {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: 100%;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
|
|
.tabs-lo {
|
|
display: inline-flex;
|
|
width:30%;
|
|
margin-right:15px;
|
|
}
|
|
|
|
.tabs-mo {
|
|
display: inline-flex;
|
|
width:70%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.topTabs {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 300px;
|
|
position: relative;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
|
|
>.item {
|
|
display: inline-flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
width: calc(100% /9 - 15px);
|
|
height:175px;
|
|
margin-right:15px;
|
|
margin-bottom:15px;
|
|
background: linear-gradient(180deg, rgba(6,66,88,0) 0%, #06425868 93%);
|
|
border-radius: 3px 3px 3px 3px;
|
|
|
|
.item-body {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: row;
|
|
width:100%;
|
|
height:100%;
|
|
|
|
img {
|
|
display: inline-flex;
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
border: 1px solid #00D1FF;
|
|
}
|
|
|
|
.left-body {
|
|
display:inline-flex;
|
|
position: relative;
|
|
width:30%;
|
|
height:100%;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin:0 10px;
|
|
|
|
.num {
|
|
display: inline-flex;
|
|
font-size: 19px;
|
|
font-family: PangMenZhengDao, PangMenZhengDao;
|
|
font-weight: 400;
|
|
color: #00D1FF;
|
|
margin:0 10px;
|
|
margin-top:20px;
|
|
}
|
|
|
|
|
|
.unit {
|
|
font-size: 12px;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 500;
|
|
color: #FFFFFFF0;
|
|
position: relative;
|
|
top:5px;
|
|
left:5px;
|
|
}
|
|
|
|
}
|
|
|
|
.line {
|
|
display: inline-flex;
|
|
width:2px;
|
|
height:100px;
|
|
background:linear-gradient(180deg, rgba(3, 60, 81, 0), rgba(0, 100, 137, 1), rgba(3, 60, 81, 0));
|
|
position: relative;
|
|
top:30px;
|
|
}
|
|
|
|
.right-list {
|
|
display: inline-flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:100%;
|
|
height:100%;
|
|
|
|
.list-text {
|
|
display: inline-flex;
|
|
position: relative;
|
|
width:100%;
|
|
height:40px;
|
|
font-size: 12px;
|
|
font-family: PingFang SC, PingFang SC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
> span:first-child {
|
|
display: inline-flex;
|
|
width:40px;
|
|
}
|
|
|
|
.show-text1 {
|
|
width:100px;
|
|
color:#00EBC1ee;
|
|
font-size: 14px;
|
|
font-family: PangMenZhengDao, PangMenZhengDao;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.show-text2 {
|
|
width:100px;
|
|
color:#FFFFFFee;
|
|
font-size: 14px;
|
|
font-family: PangMenZhengDao, PangMenZhengDao;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.show-text3 {
|
|
width:100px;
|
|
color:#FFD15Cee;
|
|
font-size: 14px;
|
|
font-family: PangMenZhengDao, PangMenZhengDao;
|
|
font-weight: 800;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.title-tool {
|
|
position: relative;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width:100%;
|
|
height: 36px;
|
|
background: linear-gradient(180deg, rgba(1,139,182,0) 0%, #1FCAF160 100%);
|
|
border-radius: 3px 3px 0px 0px;
|
|
|
|
.text {
|
|
font-size: 17px;
|
|
font-family: PangMenZhengDao, PangMenZhengDao;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
.title-tool::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom:1px;
|
|
width:100%;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(81,181,255,0) 3%, #51B5FF 49%, rgba(81,181,255,0) 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btnSearch{
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%);
|
|
margin-left: 10px;
|
|
border-color: transparent;
|
|
color:#fff;
|
|
}
|
|
|
|
::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%;
|
|
|
|
}
|
|
|
|
.topdiv {
|
|
display: inline-flex;
|
|
position: relative;
|
|
width:100%;
|
|
height:40px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.right-div {
|
|
display: inline;
|
|
width:450px;
|
|
}
|
|
}
|
|
|
|
.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: center;
|
|
align-items: center;
|
|
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>
|
|
|