<template>
|
|
<div class="app-container">
|
<div class="app-top">
|
<div class="ai-top-right">
|
<a @click="goAiStudy('/camera')">AI视频管理</a>
|
<a @click="goTarget('/alarm')">报警管理</a>
|
</div>
|
<div class="ai-top-center">AI智能视频监控系统</div>
|
<div class="ai-top-right" style="cursor : pointer;">
|
<!-- <div style="color: #fff">{{ parseTime(date) }}</div>-->
|
<!-- <a @click="goStatudy('/batch')">AI学习</a>-->
|
<!-- <span>2021年12月12日 星期七 18:20:56</span>-->
|
<a @click="goTarget('/index')">后台管理</a>
|
</div>
|
</div>
|
<div class="center">
|
<!--左侧start-->
|
<div class="ai-left fleft">
|
<!--综合统计start-->
|
<div class="ai-left-first" style="height: 255px">
|
<div class="ai-left-cent-bg">
|
<div class="ai-left-top-title">
|
<img src="../views/images/icon-5.png"/>
|
<font>综合统计</font>
|
</div>
|
<div class="ai-left-bottom-center">
|
<div class="ai-left-lf">
|
<div class="ai-left-lf-top">
|
<p style="color: #C0E3FE;">年度告警</p>
|
<p class="ai-left-lf-p">{{ websocketobj.alarmYear }}<span>条</span></p>
|
</div>
|
<div class="ai-left-lf-bottom">
|
<p style="color: #C0E3FE;">月度告警</p>
|
<p class="ai-left-lf-p">{{ websocketobj.alarmMonth }}<span>条</span></p>
|
</div>
|
</div>
|
<div class="ai-left-rt">
|
<div class="ai-left-tj-nav">
|
<div style="display: flex;flex-direction: column;
|
justify-content: space-between;width: 100px;height: 150px; border: 1px solid #51FFFF;border-radius: 10px">
|
<div
|
style="display: flex; flex: 2;
|
flex-direction: column;align-items:center;padding: 5px;background: linear-gradient(0deg, #FFA800 0%, #FDDB72 100%);border-top-left-radius:10px ;border-top-right-radius: 10px">
|
<img style="width: 58px" src="../views/images/wxImage.png"/>
|
<p>三违</p>
|
</div>
|
<font style="flex: 1;margin: 10px 0 0 0 ">{{ websocketobj.alarmSanWei }}</font>
|
</div>
|
<div style="display: flex;flex-direction: column;
|
justify-content: space-between;width: 100px;height: 150px;border: 1px solid #51FFFF;border-radius: 10px;margin: 0 10px">
|
<div
|
style=" display: flex;
|
flex-direction: column;align-items:center;padding: 5px; background: linear-gradient(0deg, #0E68FF 0%, #2CCDE5 100%);border-top-left-radius:10px ;border-top-right-radius: 10px">
|
<img style="width: 58px" src="../views/images/cdImage.png"/>
|
<p>隐患</p>
|
</div>
|
<font style="flex: 1;margin: 10px 0 0 0 ">{{ websocketobj.alarmYinHuan }}</font>
|
</div>
|
<div style="display: flex;flex-direction: column;
|
justify-content: space-between;width: 100px;height: 150px;border: 1px solid #51FFFF;border-radius: 10px; ">
|
<div
|
style="display: flex;
|
flex-direction: column;align-items: center; padding: 5px; background: linear-gradient(0deg, #049966 0%, #14FA9B 100%);border-top-left-radius:10px ;border-top-right-radius: 10px">
|
<img style="width: 58px" src="../views/images/jkImage.png"/>
|
<p>智能识别仪</p>
|
</div>
|
<font style="flex: 1;margin: 10px 0 0 0 ">{{ websocketobj.alarmAll }}</font>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--综合统计end-->
|
<!--实时报警start-->
|
<div class="ai-left-first" style="margin: 20px 0">
|
<div class="ai-left-cent-red-bg">
|
<div class="ai-left-top-red-title">
|
<img style="width: 38px;height: 38px" src="~@/assets/images/bjTopImage.png"/>
|
<font>报警 TOP5</font>
|
</div>
|
<div>
|
<div style="height: 200px;" id="Mychart" ref="Mychart"></div>
|
</div>
|
</div>
|
</div>
|
<!--实时报警end-->
|
<!--报警因素统计start-->
|
<div class="ai-left-first" style="">
|
<div class="ai-left-cent-bg" style="justify-content: space-evenly">
|
<div class="ai-left-top-title">
|
<img src="../views/images/icon-7.png"/>
|
<font>报警统计</font>
|
</div>
|
<div class="ai-left-bj-img echarts-with">
|
<div style="height: 200px;" id="main1" ref="main1" class="chart"/>
|
</div>
|
</div>
|
</div>
|
<!--报警因素统计end-->
|
</div>
|
<!--左侧end-->
|
<!--右侧start-->
|
<div class="ai-center fleft">
|
<!--视频监控start-->
|
<div class="ai-right-first">
|
<div class="ai-left-cent-bg">
|
<div class="ai-right-top-title">
|
<div>视频监控</div>
|
</div>
|
<div class="ai-right-center">
|
<div class="ai-right-center-lf">
|
<div style="height: 100%;padding:10px;">
|
<div style="width: 100%;height: 112%;" >
|
<index-spjk-spxx1998 :showId="1998" ref="indexSpjkSpxx1998Ref"></index-spjk-spxx1998>
|
</div>
|
</div>
|
</div>
|
<div class="ai-right-center-rf">
|
<div class="ai-zxjk" v-for="(item,index) in cameraList" :key="item.id" @click="videoClick(item)">
|
<div style="width: 100%;height: 120%;">
|
<!-- <img style="width: 100%;height: 100%;" :src="imgUpop + item.picture"/>-->
|
<index-spjk-spxx0001 :showId="(1900+ index)" :cameraUrl="item.playUrl"></index-spjk-spxx0001>
|
</div>
|
<p>{{ item.regionName }}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--视频监控end-->
|
<div class="ai-center-bottom">
|
<!--实施报警start-->
|
<div class="ai-center-second">
|
<div class="ai-left-first">
|
<div class="ai-left-top-title ai-left-ctop-title">
|
<img src="../views/images/icon-10.png"/>
|
<font>实时报警</font>
|
</div>
|
<div class="ai-znxj-picture-List">
|
<div class="table">
|
<el-table height="230" :data="websocketobj.aiAlarmInfos" align="center" class="xj-table"
|
:row-class-name="tableRowClassName" style="color: white" :show-header="false">
|
<el-table-column prop="date" width="200px">
|
<template slot-scope="{row}">
|
<div style="display: flex">
|
<div class="img-man" v-if="row.ruleName">
|
<img src="./images/manImage.png">
|
</div>
|
<div style="width: 100px;display: flex;align-items: center">{{ row.ruleName }}</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column prop="content" width="180px"/>
|
<el-table-column align="center" prop="province" width="180px">
|
<template slot-scope="{row}">
|
<div class="table-item-div">{{ row.regionName }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column align="center" prop="alarmTime" width="280">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.alarmTime, '{y}-{m}-{d} {hh}:{mm}:{ss}') }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!--实施报警end-->
|
<!--历史报警start-->
|
<div class="ai-right-second">
|
<div class="ai-left-first">
|
<div class="ai-left-top-title">
|
<img style="width: 38px;height: 38px" src="~@/assets/images/bjTopImage.png"/>
|
<font>历史报警</font>
|
</div>
|
<div class="ai-right-center-rf">
|
<div class="ai-zxjk"
|
v-for="item in websocketobj.aiAlarmInfos?websocketobj.aiAlarmInfos.slice(0, 4):websocketobj.aiAlarmInfos"
|
:key="item.id">
|
<!-- <img :src="imgUpop+item.picture"/>-->
|
<el-image
|
style="width: 100%;height: 100%"
|
:src="imgUpop+item.picture"
|
:preview-src-list="[imgUpop+item.picture]"
|
fit="cover">
|
</el-image>
|
<p>{{ item.regionName + item.content }}</p>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<!--历史报警end-->
|
</div>
|
|
</div>
|
<!--右侧end-->
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
import {indexAlarm, listCamera} from "@/api/aibrain/camera";
|
// import {listCameraVideo,} from "@/api/aibox/alarm";
|
import ax from 'axios'
|
// import {getindexInfo} from '@/api/menu.js'
|
// import echarts from 'echarts'
|
import * as echarts from 'echarts'
|
import Stomp from 'stompjs'
|
import {MQ_SERVICE, MQ_USERNAME, MQ_PASSWORD} from '@/config/linkparam'
|
import {MQ_SERVICE2, MQ_USERNAME2, MQ_PASSWORD2} from '@/config/linkparam2'
|
import Logo from "@/layout/components/Sidebar/Logo";
|
import indexSpjkSpxx1998 from "./common/index_spjk_rtsp";
|
|
import indexSpjkSpxx0001 from "./common/index_spjk_rtsp";
|
|
export default {
|
components: {
|
vueSeamlessScroll,
|
indexSpjkSpxx1998,
|
indexSpjkSpxx0001,
|
},
|
data() {
|
return {
|
url: "ws://192.168.30.24:9090/websocket/message",
|
websocketobj: {},
|
imgUpop: process.env.VUE_APP_BASE_API,
|
date: new Date(),
|
aiboxArea: [],
|
message: "",
|
text_content: "",
|
ws: null,
|
violationNum: "0",
|
hiddenDangerNum: "0",
|
onDutyNum: "0",
|
cameraNum: "0",
|
bin1Data: [],
|
quyuList: [],
|
bin1Num: 0,
|
bin2Data: [],
|
pictrueimgs: null,
|
cameraList: [],
|
vadeoList: [{
|
url: '',
|
typeName: ''
|
}],
|
inspectionPictures: {},
|
alarmtime: [],
|
videoCameraId: 1,
|
client: Stomp.client(MQ_SERVICE),
|
client2: Stomp.client(MQ_SERVICE2),
|
videoIp: '/topic/VideoRealTopic192168164',
|
nowSXT: {},
|
selectCamera: {},
|
};
|
},
|
created() {
|
this.listCamera()
|
this.getindexAlarm();
|
this.getDicts("aibox_area").then(response => {
|
this.aiboxArea = response.data;
|
});
|
},
|
mounted() {
|
this.listCamera()
|
var idx = this;
|
idx.timer = setInterval(() => {
|
idx.date = new Date();
|
}, 1000)
|
this.join()
|
|
// this.getEchartData()
|
// this.showChart1()
|
},
|
beforeDestroy() {
|
if (this.timer) {
|
clearInterval(this.timer)
|
}
|
},
|
methods: {
|
videoClick(item) {
|
this.selectCamera=item;
|
setTimeout(() => {
|
this.$refs.indexSpjkSpxx1998Ref.joinSXT(item);
|
}, 100);
|
},
|
async listCamera() {
|
try {
|
const {rows} = await listCamera()
|
// console.log('data' + rows)
|
this.cameraList = rows
|
} catch (e) {
|
// console.log(e)
|
}
|
},
|
/** 用于配置监听的队列与回调的方法 */
|
onConnected: function (frame) {
|
// console.log(frame, '****')
|
|
/**
|
* 定时器 先执行视频队列多个的返回
|
* */
|
/*let that = this
|
setTimeout(() => {
|
if (that.cameraList.length) {
|
/!**
|
* 视频队列多个 VideoRealTopic19216811 调用多个mq监听返回多个视频视频
|
* *!/
|
that.cameraList.forEach(x => {
|
that.client.subscribe('/topic/VideoRealTopic' + x.cameraIp.replace(/\./g, ''), that.responseCallback, that.onFailed);
|
})
|
}
|
}, 1000)*/
|
// mq消息对话
|
if(this.nowSXT.id>6) {
|
this.client2.subscribe(this.videoIp, this.responseCallback, this.onFailed);
|
}else{
|
this.client.subscribe(this.videoIp, this.responseCallback, this.onFailed);
|
}
|
|
|
//this.client.debug=null;
|
},
|
// 监听失败的回调
|
onFailed: function (frame) {
|
// console.log('Failed: ' + frame)
|
},
|
// 监听成功的回调，获取消息
|
responseCallback(frame) {
|
var eventData = JSON.parse(frame.body);
|
|
if (eventData.pictureBase64) {
|
// 返回消息队列的 id 和 点击id相同
|
if (eventData.cameraId == this.videoCameraId) {
|
//赋值视频数据
|
this.pictrueimgs = eventData
|
}
|
let that = this
|
setTimeout(() => {
|
that.cameraList.forEach((x, index) => {
|
/**
|
* 2. 判断点击id和多个mq返回的数据id相同 视频播放显示对应的点击数据
|
* */
|
if (x.id === eventData.cameraId) {
|
// 响应式增加数据
|
that.$set(x, 'pictrueimgs', eventData)
|
}
|
})
|
}, 1000)
|
|
}
|
},
|
/** 用于初始化连接 */
|
connect: function () {
|
// console.log('用于初始化连接' + this.client)
|
var headers = {
|
'login': MQ_USERNAME,
|
'passcode': MQ_PASSWORD
|
}
|
|
|
// mq消息对话
|
if(this.nowSXT.id>6){
|
// 心跳发送频率
|
this.client2.heartbeat.outgoing = 50000;
|
// 心跳接收频率
|
this.client2.heartbeat.incoming = 50000;
|
this.client2.connect(headers, this.onConnected, this.onFailed)
|
}else{
|
// 心跳发送频率
|
this.client.heartbeat.outgoing = 50000;
|
// 心跳接收频率
|
this.client.heartbeat.incoming = 50000;
|
this.client.connect(headers, this.onConnected, this.onFailed)
|
}
|
},
|
getindexAlarm() {
|
indexAlarm().then(res => {
|
// console.log(JSON.stringify(res))
|
this.websocketobj = res.data
|
let that = this
|
this.$nextTick(() => {
|
that.showChart1(res.data.alarmSmall)
|
that.getEchartData(res.data.alarmTop)
|
})
|
|
})
|
},
|
// 表格隔行变色
|
tableRowClassName({row, rowIndex}) {
|
// console.log(rowIndex+'123132')
|
if (rowIndex % 2 === 0) {
|
return '' //这是类名
|
} else {
|
return 'success-row'
|
}
|
},
|
join() {
|
const wsuri = this.url;
|
this.ws = new WebSocket(wsuri);
|
const self = this;
|
this.ws.onopen = function (event) {
|
self.text_content = self.text_content + "已经打开连接!" + "\n";
|
};
|
this.ws.onmessage = (event) => {
|
if (event.data != "连接成功") {
|
var jsonData = JSON.parse(event.data);
|
// console.log('=====================websocket推送的数据========================',jsonData)
|
if(jsonData.alarmSanWei){
|
self.websocketobj = jsonData
|
self.$nextTick(() => {
|
self.showChart1(jsonData.alarmSmall)
|
self.getEchartData(jsonData.alarmTop)
|
})
|
}
|
}
|
};
|
this.ws.onclose = function (event) {
|
self.text_content = self.text_content + "已经关闭连接!" + "\n";
|
};
|
// const wsuri = this.url;
|
// this.ws = new WebSocket(wsuri);
|
// const self = this;
|
// this.ws.onopen = function (event) {
|
// self.text_content = self.text_content + "已经打开连接!" + "\n";
|
// };
|
// this.ws.onmessage = function (event) {
|
// self.text_content += event.data + "\n";
|
// };
|
// this.ws.onclose = function (event) {
|
// self.text_content = self.text_content + "已经关闭连接!" + "\n";
|
// };
|
},
|
exit() {
|
if (this.ws) {
|
this.ws.close();
|
this.ws = null;
|
}
|
},
|
send() {
|
if (this.ws) {
|
this.ws.send(this.message);
|
} else {
|
alert("未连接到服务器");
|
}
|
},
|
goStatudy(href) {
|
window.open(href, "_blank");
|
},
|
goTarget(href) {
|
window.open(href, "_blank");
|
},
|
goAiStudy(href) {
|
window.open(href, "_blank");
|
},
|
supervisionOnclick(href) {
|
window.open(href, "_blank");
|
},
|
alarmAreaClick(href, type) {
|
let routeData = this.$router.resolve({path: '/aiboxAlarm', query: {type}});
|
window.open(routeData.href, '_blank');
|
},
|
statisticsClick(href, type) {
|
let routeData = this.$router.resolve({path: '/aiboxAlarm', query: {categoryIndex: type}});
|
window.open(routeData.href, '_blank');
|
},
|
// 首页左下 报警；类型分线
|
showChart1(bin1Data) {
|
var sely = this;
|
var myChart = echarts.init(document.getElementById('main1'));
|
// var myChart = echarts.init(sely.$refs.main1);
|
let data = bin1Data ? bin1Data.map(x => {
|
x.name = x.label
|
return x
|
}) : []
|
let num = data.reduce((pre, cur) => {
|
return pre + cur.value
|
}, 0)
|
|
// console.log('111111122'+data)
|
|
var option = {
|
graphic: [
|
{
|
type: 'text',
|
left: '27%',
|
top: '38%',
|
style: {
|
text: num,
|
fill: '#01e5e8',
|
width: 30,
|
height: 30,
|
fontSize: 24,
|
}
|
},
|
{
|
type: 'text',
|
left: '23%',
|
top: '55%',
|
style: {
|
text: '报警总数',
|
fill: '#ffffff',
|
width: 30,
|
height: 30,
|
fontSize: 16,
|
}
|
}
|
],
|
tooltip: {
|
trigger: 'item'
|
},
|
|
legend: {
|
show: true,
|
orient: 'vertical',
|
left: '70%',
|
top: '20',
|
textStyle: {
|
fontSize: 12, // 文字的字体大小。
|
color: '#fff'
|
},
|
},
|
color: ['#4cd964', '#ffae00', '#04ffff',],
|
series: [
|
{
|
type: 'pie',
|
radius: ['50%', '70%'],
|
center: ['30%', '50%'],
|
// data: bin1Data,
|
data: data,
|
labelLine: {
|
show: false, //隐藏指示线
|
},
|
label: {
|
position: 'center',
|
show: false
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
}
|
}
|
}
|
]
|
};
|
myChart.setOption(option);
|
},
|
getEchartData(data) {
|
// const chart = this.$refs.chart;
|
const that = this
|
const myChart = echarts.init(document.getElementById('Mychart'));
|
// var myChart = echarts.init(sely.$refs.Mychart);
|
|
let a = []
|
let b = []
|
// console.log(data)
|
if (data) {
|
for (let i = 0; i < data.length && i < 5; i++) {
|
a.unshift(data[i].label)
|
b.unshift(data[i].value)
|
}
|
}
|
// console.log('111111111111111111'+a)
|
// console.log('222323'+b)
|
const option = {
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
},
|
color: ['rgba(39, 135, 46)', 'rgba(189, 56, 56)'],
|
//legend: {},
|
grid: {
|
top: '10%',
|
left: '25%',
|
right: '5%',
|
bottom: '10%',
|
// containLabel: true
|
},
|
xAxis: {
|
type: 'value',
|
show: true,
|
axisLabel: {
|
textStyle: {
|
align: 'left' //!**
|
}
|
},
|
axisLine: { //横轴样式
|
lineStyle: {
|
color: '#ffffff',
|
},
|
},
|
|
},
|
yAxis: {
|
type: 'category',
|
axisLine: {
|
show: true, //不显示坐标轴轴线
|
lineStyle: {
|
color: '#ffffff',
|
},
|
},
|
axisTick: {
|
show: false //不显示坐标轴刻度
|
},
|
data: a
|
// max:10
|
},
|
series: [
|
{
|
// name: '正常',
|
type: 'bar',
|
stack: 'total',
|
z: 3, // 层叠
|
//stack:true,
|
//barGap:'-100%',
|
barWidth: 12,
|
/*itemStyle: { //柱状颜色和圆角
|
barBorderRadius: [0, 10, 10, 0], // （顺时针左上，右上，右下，左下）
|
},*/
|
itemStyle: {
|
emphasis: {
|
color: "#27872e",//移入后的颜色
|
}
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
label: {
|
show: true,
|
//position:'insideRight'
|
formatter: function (params) {
|
if (params.value > 0) {
|
return params.value;
|
} else {
|
return '';
|
}
|
},
|
},
|
data: a
|
},
|
{
|
// name: '异常',
|
type: 'bar',
|
stack: 'total',
|
barWidth: 12,
|
z: 3, // 层叠
|
itemStyle: { //柱状颜色和圆角
|
barBorderRadius: [0, 10, 10, 0], // （顺时针左上，右上，右下，左下）,
|
emphasis: {
|
color: "#bd3838",//移入后的颜色
|
}
|
},
|
emphasis: {
|
focus: 'series'
|
},
|
label: {
|
show: true,
|
//position:'insideRight'
|
formatter: function (params) {
|
if (params.value > 0) {
|
return params.value;
|
} else {
|
return '';
|
}
|
},
|
},
|
data: b,
|
//barGap: '-100%', // 柱图之间的间距
|
}
|
]
|
};
|
myChart.setOption(option, true)
|
},
|
// 标示卡字典表列表显示
|
cameraDept(val) {
|
var idx = this.aiboxArea.findIndex(item => item.dictValue == val)
|
if (idx != -1) {
|
return this.aiboxArea[idx].dictLabel
|
} else {
|
return ''
|
}
|
},
|
|
},
|
};
|
</script>
|
<style lang="scss">
|
html {
|
/* 将屏幕整个宽度设置为24rem，从而自动实现内容按照屏幕的大小进行缩放 */
|
/* 屏幕大小比例 16:9 */
|
font-size: calc(100vw / 24);
|
}
|
|
//body {
|
// font-size: 0.12rem;
|
// width: 100vw;
|
// height: calc(100vw / 16 * 9);
|
//}
|
|
* {
|
padding: 0rem;
|
margin: 0rem;
|
}
|
|
body {
|
font-size: 0.12rem;
|
//width: 100vw;
|
//height: calc(100vw / 16 * 9);
|
margin: 0 auto;
|
padding: 0;
|
//font-size: 14px;
|
background: url('../views/images/ai-bg.jpg') no-repeat center top;
|
background-size: cover;
|
}
|
|
::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 1px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
background-color: #8c8c8c;
|
/*滚动条滑块颜色*/
|
background-color: rgb(0, 93, 253);
|
}
|
|
::-webkit-scrollbar-track {
|
background-color: #f6f6f6;
|
}
|
|
::-webkit-scrollbar-thumb,
|
::-webkit-scrollbar-track {
|
border: 0;
|
}
|
|
|
.app-container {
|
}
|
|
a, p, span, font, ul, li {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
font-size: 14px;
|
color: #fff;
|
text-decoration: none;
|
}
|
|
.fleft {
|
float: left;
|
}
|
|
.fright {
|
float: right;
|
}
|
|
.clear-both {
|
clear: both;
|
width: 0;
|
height: 0;
|
line-height: 0;
|
}
|
|
.app-top {
|
width: 100%;
|
height: 72px;
|
background: url(~@/assets/images/title.png) no-repeat center;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
align-items: center;
|
margin: 0 0 10px 0;
|
}
|
|
.ai-top-center {
|
width: 40%;
|
letter-spacing: 10px;
|
height: 62px;
|
padding-top: 10px;
|
//background: url(../views/images/ai-top1.png) no-repeat center top;
|
text-align: center;
|
color: #fff;
|
font-size: 32px;
|
font-weight: bold;
|
}
|
|
.ai-top-left {
|
width: 30%;
|
float: left;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
margin-top: 20px;
|
}
|
|
.ai-top-left a {
|
display: block;
|
width: 100px;
|
height: 30px;
|
background-color: #020f4c;
|
border: 1px solid #0e78a4;
|
line-height: 30px;
|
border-radius: 5px;
|
margin: 0 15px;
|
color: #009ffb;
|
}
|
|
//.ai-top-left-active {
|
// background-image: linear-gradient(to bottom, #077dd5, #002d8b);
|
//
|
// color: #fff !important;
|
//}
|
|
.ai-top-right {
|
width: 30%;
|
float: right;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
text-align: center;
|
margin-top: 20px;
|
}
|
|
.ai-top-right span {
|
display: block;
|
margin-right: 20px;
|
width: 70%;
|
}
|
|
.table {
|
//padding: 0 20px;
|
.el-table--medium .el-table__cell {
|
padding: 5px 0;
|
}
|
|
.img-man {
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.cell {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.table-item-div {
|
width: 100px;
|
border: 1px solid #00bd7c;
|
color: #00bd7c;
|
border-radius: 16px;
|
}
|
}
|
|
.table .el-table th {
|
background-color: transparent !important;
|
}
|
|
.table .el-table tr {
|
background-color: transparent !important;
|
}
|
|
.table .el-table__body tr:hover > td {
|
background-color: #323232 !important;
|
}
|
|
/*// 去除底部白线*/
|
.el-table::before {
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
height: 0px;
|
}
|
|
.table .el-table, .el-table__expanded-cell {
|
background-color: transparent;
|
}
|
|
.table .el-table th.el-table__cell > .cell {
|
color: #f0f0f0 !important;
|
}
|
|
.ai-top-right a, .ai-top-left a {
|
width: 126px;
|
background: url("./images/buttonImage.png") no-repeat center;
|
background-size: contain;
|
line-height: 30px;
|
border-radius: 5px;
|
margin: 0 15px;
|
color: #009ffb;
|
}
|
|
.center {
|
width: 100%;
|
height: 100%;
|
margin: 30px 0 0 0;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
}
|
|
.ai-left {
|
width: 24%;
|
//flex: 1;
|
display: flex;
|
flex-direction: column;
|
}
|
|
//.ai-right {
|
// width: 26%;
|
//}
|
//
|
.ai-center {
|
//width: 45%;
|
//height: 800px;
|
flex: 2;
|
display: flex;
|
flex-direction: column;
|
margin-left: 10px;
|
|
.ai-right-first {
|
flex: 2;
|
background: url("~@/assets/images/bigImage.png") no-repeat;
|
//background-clip:border-box;
|
background-size: 100% 100%;
|
//box-shadow: inset 2px 0px 10px 10px #2b53784a;
|
padding: 7px;
|
//border: 25px solid transparent;
|
//border-image-source: url("~@/assets/images/bigImage.png");
|
//border-image-repeat: round;
|
//border-image-slice: 50;
|
.ai-left-cent-bg{
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
.ai-right-center {
|
display: flex;
|
flex: 1;
|
.ai-right-center-lf {
|
flex: 2;
|
//width: 70%;
|
.ai-right-p {
|
width: 100%;
|
height: 40px;
|
background-color: rgba(0, 0, 0, 0.7);
|
color: #fff;
|
line-heihgt: 20px;
|
margin-top: -40px;
|
text-align: center;
|
position: relative;
|
z-index: 999;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 10px;
|
}
|
|
.ai-right-button {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
|
}
|
}
|
|
.ai-right-center-rf {
|
//width: 100%;
|
height: 500px;
|
//padding: 20px;
|
overflow-y: auto;
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
justify-items: center;
|
//align-content: space-around;
|
|
.ai-zxjk {
|
//flex: 1;
|
width: 45%;
|
height: 110px;
|
border: 1px solid #2179ae;
|
border-radius: 2px;
|
margin: 5px;
|
padding: 5px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
|
.ai-center-bottom {
|
//height: calc(100vh - 900px);
|
flex: 1;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 20px;
|
|
.ai-center-second {
|
flex: 2;
|
height: 100%;
|
}
|
|
.ai-right-second {
|
height: 100%;
|
flex: 1;
|
margin-left: 10px;
|
|
.ai-right-center-rf {
|
//width: 30%;
|
//height: 200px;
|
//overflow: hidden;
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
margin: 5px;
|
//justify-content: flex-start;
|
//align-content: space-around;
|
|
.ai-zxjk {
|
//flex: 1;
|
width: 50%;
|
height: 110px;
|
//border: 1px solid #2179ae;
|
//border-radius: 2px;
|
//margin: 5px;
|
padding: 5px;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.ai-left-first {
|
//border: 20px solid transparent;
|
//border-image-source: url("~@/assets/images/borderImg.png");
|
//border-image-repeat: round;
|
//border-image-slice: 50;
|
//width: 100%;
|
height: 100%;
|
background: url("~@/assets/images/borderImg.png") no-repeat;
|
//background-clip:border-box;
|
background-size: 100% 100%;
|
//box-shadow: inset 2px 0px 10px 10px #2b53784a;
|
padding: 10px;
|
height: 300px;
|
}
|
|
.ai-left-bottom-center {
|
flex: 1;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
margin: 10px;
|
|
.ai-left-lf {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
flex-wrap: nowrap;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-evenly;
|
|
.ai-left-lf-top {
|
text-align: center;
|
margin-bottom: 10px;
|
|
.ai-left-lf-p {
|
margin-top: 5px;
|
font-size: 28px;
|
color: #FFAB07;
|
|
span {
|
color: #FFAB07;
|
}
|
}
|
}
|
|
.ai-left-lf-bottom {
|
text-align: center;
|
|
.ai-left-lf-p {
|
margin-top: 5px;
|
|
font-size: 28px;
|
color: #FFAB07;
|
|
span {
|
color: #FFAB07;
|
}
|
}
|
}
|
}
|
|
.ai-left-rt {
|
flex: 2;
|
}
|
}
|
|
|
.ai-left-top-red-bg {
|
height: 12px;
|
background: url(../views/images/list-top-red-bg.png) no-repeat center top;
|
}
|
|
.ai-left-bottom-red-bg {
|
height: 12px;
|
background: url(../views/images/list-bottom-red-bg.png) no-repeat center top;
|
}
|
|
.ai-left-center-top-bg {
|
height: 12px;
|
background: url(../views/images/list-ctop-bg.png) no-repeat center top;
|
}
|
|
.ai-left-center-bottom-bg {
|
height: 12px;
|
background: url(../views/images/list-cbottom-bg.png) no-repeat center top;
|
}
|
|
.ai-left-top-bg, .ai-left-bottom-bg, .ai-left-top-red-bg, .ai-left-bottom-red-bg {
|
width: 100%;
|
background-size: 100% 100%;
|
}
|
|
.ai-left-center-top-bg, .ai-left-center-bottom-bg {
|
width: 100%;
|
background-size: 100% 100%;
|
}
|
|
|
body .table .el-table .success-row {
|
background-color: rgb(36, 19, 56) !important;
|
}
|
|
.ai-left-top-title, .ai-left-top-red-title {
|
width: 96%;
|
height: 38px;
|
background: url(../views/images/list-title-bg.png) no-repeat left bottom;
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
color: #fff;
|
margin: 0 auto;
|
}
|
|
.ai-right-top-title {
|
background: url("./images/bgcImage.png") no-repeat center;
|
background-size: contain;
|
padding: 5px 0;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
//margin-bottom: 10px;
|
margin-top: 14px;
|
|
div {
|
//background: #0452A8;
|
text-align: center;
|
color: #FFFFFF;
|
|
}
|
}
|
|
.ai-left-ctop-title {
|
background: url(../views/images/list-title-center-bg.png) no-repeat left bottom !important;
|
}
|
|
//.ai-left-top-red-title {
|
// background: url(../views/images/list-title-red-bg.png) no-repeat left bottom;
|
//}
|
|
.ai-znxj-picture-List {
|
//display: flex;
|
///*在一排显示*/
|
//flex-direction: row;
|
///**/
|
//justify-content: space-between;
|
margin: 5px 0;
|
}
|
|
.ai-left-top-title font, .ai-left-top-red-title font {
|
font-size: 16px;
|
}
|
|
|
.ai-left-second, .ai-left-third {
|
margin-top: 10px;
|
}
|
|
.ai-left .ai-left-cent-bg {
|
display: flex;
|
flex-direction: column;
|
height: 100%;
|
}
|
|
.ai-left-second .ai-left-cent-bg {
|
height: 275px;
|
|
}
|
|
.ai-left-third .ai-left-cent-bg {
|
height: 260px;
|
}
|
|
|
.ai-left-tj-nav {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
text-align: center;
|
padding-top: 8px;
|
}
|
|
.ai-left-tj-nav font {
|
display: block;
|
font-size: 22px;
|
font-weight: bold;
|
background-image: -webkit-linear-gradient(bottom, #29dbde, #ffffff);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
.el-table {
|
color: black;
|
}
|
|
.ai-znxj-picture-List th {
|
background-color: #f00 !important;
|
}
|
|
.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
|
border-bottom: 1px solid transparent;
|
}
|
|
.el-table th.el-table__cell > .cell {
|
color: #00c9f1;
|
}
|
|
.ai-left-tj-nav p {
|
color: #fff;
|
font-size: 14px;
|
margin-top: 5px;
|
}
|
|
.ai-left-tj-nav img {
|
display: block;
|
//margin: -20px auto 0 auto;
|
}
|
|
.ai-bj-left {
|
width: 14%;
|
}
|
|
.ai-bj-left p {
|
width: 50px;
|
height: 50px;
|
background: #ff0000;
|
border: 4px solid #82121f;
|
border-radius: 7px;
|
color: #fff;
|
text-align: center;
|
}
|
|
.ai-bj-right {
|
width: 86%;
|
}
|
|
.ai-left-cent-red-bg {
|
//border-left: 1px solid #5e281f;
|
//border-right: 1px solid #5e281f;
|
//background-color: rgba(41, 12, 12, 0.7);
|
}
|
|
.ai-left-bj-cent {
|
//height: 278px;
|
//overflow: hidden;
|
}
|
|
.ai-left-bj-nav li {
|
width: 90%;
|
height: 59px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
margin: 10px auto 0 auto;
|
padding: 5px 3%;
|
background-color: rgba(42, 17, 44, 0.5);
|
border: 1px solid #47111d;
|
}
|
|
.ai-left-bj-nav .active {
|
background-color: rgba(74, 13, 20, 0.8);
|
border: 1px solid #711c26;
|
}
|
|
.ai-bj-left {
|
width: 15%;
|
}
|
|
.ai-bj-center {
|
width: 50%;
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
}
|
|
.ai-bj-center span {
|
border: 1px solid #ffd200;
|
color: #ffd200;
|
border-radius: 3px;
|
margin-left: 10px;
|
padding: 0 2px;
|
height: 16px;
|
line-height: 16px;
|
font-size: 13px;
|
}
|
|
.ai-bj-right {
|
width: 35%;
|
text-align: right;
|
}
|
|
.ai-bj-title {
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
}
|
|
.ai-bj-title font {
|
color: #04dfff;
|
display: block;
|
margin-right: 5px;
|
}
|
|
.ai-bj-zt {
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
margin-top: 8px;
|
}
|
|
.ai-bj-zt span {
|
color: #f0ff00;
|
border: 1px solid #f0ff00;
|
border-radius: 10px;
|
padding: 0 10px;
|
}
|
|
.ai-bj-zt font {
|
color: #fff;
|
}
|
|
|
.ai-left-bj-img {
|
width: 96%;
|
margin: 0 auto;
|
}
|
|
|
.ai-left-bj-img .echarts-with {
|
width: 600px;
|
height: 400px;
|
}
|
|
.ai-left-third .ai-left-bj-img, .ai-center-second .ai-left-bj-img {
|
height: 210px;
|
padding-top: 5px;
|
}
|
|
|
.ai-left-third .ai-left-bj-img img, .ai-center-second .ai-left-bj-img img {
|
width: 90%;
|
}
|
|
.ai-right-first .ai-left-bj-img img {
|
width: 90%;
|
}
|
|
.ai-right-second .ai-left-bj-img img {
|
width: 100%;
|
}
|
|
.ai-right-second .ai-left-bj-img {
|
height: 223px !important;
|
}
|
|
.ai-left-bj-img img {
|
display: block;
|
margin: 0 auto;
|
}
|
|
.ai-center-second .ai-left-top-bg {
|
background: url(../views/images/list-ctop-bg.png) no-repeat center !important;
|
}
|
|
.ai-center-second .ai-left-bottom-bg {
|
background: url(../views/images/list-cbottom-bg.png) no-repeat center !important;
|
}
|
|
.ai-left-bjqy-list {
|
padding: 13px 5% 0 5%;
|
}
|
|
.ai-left-bjqy-list li {
|
width: 49%;
|
height: 50px;
|
margin-top: 10px;
|
float: left;
|
border: 1px solid #015ddd;
|
padding: 3px;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
|
.ai-left-bjqy-list li:nth-child(even) {
|
margin-left: 2%;
|
}
|
|
.ai-left-bjqy-list li:nth-child(1), .ai-left-bjqy-list li:nth-child(2) {
|
margin-top: 0 !important;
|
}
|
|
.ai-left-bjqy-left {
|
width: 21%;
|
height: 42px;
|
background: linear-gradient(to bottom, #012e6c, #01285f);
|
border: 1px solid #014098;
|
}
|
|
.ai-left-bjqy-left img {
|
display: block;
|
width: 86%;
|
margin: 1px auto;
|
}
|
|
.ai-left-bjqy-right {
|
width: 78%;
|
height: 42px;
|
padding: 10px 5px;
|
background: linear-gradient(to bottom, #012e6c, #01285f);
|
border: 1px solid #014098;
|
display: flex;
|
flex-direction: row;
|
justify-content: space-between;
|
}
|
|
.ai-left-bjqy-right span {
|
color: #fff;
|
}
|
|
.ai-left-bjqy-right font {
|
color: #04dfff;
|
}
|
|
.ai-right-zxjk {
|
width: 94%;
|
margin: 0 auto;
|
}
|
|
.picture {
|
margin: -4px auto !important;
|
}
|
|
.ai-right-zxjk li {
|
width: 48.5%;
|
height: 106px;
|
border: 1px solid #2179ae;
|
border-radius: 2px;
|
margin-top: 10px;
|
}
|
|
.picture li {
|
height: 97px !important;
|
}
|
|
.ai-right-zxjk li:nth-child(odd) {
|
float: left;
|
}
|
|
.ai-right-zxjk li:nth-child(even) {
|
float: right;
|
}
|
|
//.ai-zxjk {
|
// width: 96%;
|
// height: 11px;
|
// margin: 5px auto;
|
//}
|
|
|
//.ai-zxjk img {
|
// width: 100%;
|
// height: 96px;
|
//}
|
|
.ai-pictuers img {
|
height: 86px !important;
|
}
|
|
.ai-zxjk .inspection-pictures {
|
width: 96%;
|
height: 96px;
|
margin: 5px auto;
|
width: 220px !important;
|
height: 100px;
|
}
|
|
.ai-right-lsyj {
|
width: 94%;
|
margin: 0 auto;
|
height: 200px;
|
}
|
|
.ai-right-lsyj li {
|
width: 48.5%;
|
height: 92px;
|
border-radius: 5px;
|
border-radius: 2px;
|
margin-top: 10px;
|
}
|
|
.ai-right-lsyj li img {
|
width: 100%;
|
height: 92px;
|
}
|
|
.ai-right-lsyj li:nth-child(odd) {
|
float: left;
|
}
|
|
.ai-right-lsyj li:nth-child(even) {
|
float: right;
|
}
|
|
.ai-zxjk p {
|
width: 100%;
|
height: 20px;
|
background-color: rgba(0, 0, 0, 0.7);
|
color: #fff;
|
line-heihgt: 20px;
|
margin-top: -20px;
|
text-align: center;
|
position: relative;
|
z-index: 999;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
}
|
|
.ai-center-first {
|
height: 551px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.ai-center-bg {
|
width: 90%;
|
height: 338px;
|
margin: 100px auto 0 auto;
|
text-align: center;
|
}
|
|
.ai-sxt-nav {
|
width: 90%;
|
position: relative;
|
}
|
|
.ai-sxt-nav li {
|
position: absolute;
|
}
|
|
.ai-sxt-nav li:nth-child(1) {
|
margin-left: 184px;
|
margin-top: -322px;
|
}
|
|
.ai-sxt-nav li:nth-child(2) {
|
margin-left: 39px;
|
margin-top: -288px;
|
}
|
|
.ai-sxt-nav li:nth-child(3) {
|
margin-left: 203px;
|
margin-top: -500px;
|
}
|
|
.ai-sxt-nav li:nth-child(4) {
|
margin-left: 350px;
|
margin-top: -350px;
|
}
|
|
.ai-sxt-nav li:nth-child(5) {
|
margin-left: 475px;
|
margin-top: -389px;
|
}
|
|
.ai-sxt-nav li:nth-child(6) {
|
margin-left: 644px;
|
margin-top: -393px;
|
}
|
|
.ai-sxt-nav li:nth-child(7) {
|
margin-left: 660px;
|
margin-top: -491px;
|
}
|
|
.ai-sxt-nav li:nth-child(8) {
|
margin-left: 376px;
|
margin-top: -491px;
|
}
|
|
.ai-sxt-desc {
|
width: 237px;
|
z-index: 99;
|
height: 138px;
|
background: url(../views/images/ai-sxt-desc.png) no-repeat center center;
|
position: relative;
|
top: -300px;
|
}
|
|
.ai-sxt-desc span {
|
color: #fff;
|
font-size: 14px;
|
font-weight: bold;
|
display: block;
|
padding-left: 15px;
|
padding-top: 10px;
|
}
|
|
.ai-sxt-desc p {
|
line-height: 23px;
|
color: #fff;
|
font-size: 13px;
|
padding: 10px 20px;
|
}
|
|
.ai-sxt-nav li img {
|
display: block;
|
}
|
|
.ai-sxt-to-img {
|
width: 146px;
|
height: 165px;
|
background: url(../views/images/ai-sxt.png) no-repeat center center;
|
}
|
|
.ai-sxt-to-img p {
|
color: #fff;
|
padding-left: 43px;
|
padding-top: 8px;
|
}
|
|
.ai-cent-spjk-top {
|
height: 19px;
|
background-color: #002a66;
|
}
|
|
.ai-cent-spjk-top span {
|
display: block;
|
width: 2px;
|
height: 19px;
|
background-color: #0399f2;
|
float: left;
|
}
|
|
.ai-cent-spjk-top p {
|
color: #fff;
|
float: left;
|
width: 35%;
|
line-heihgt: 18px;
|
margin-left: 2px;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
}
|
|
.ai-cent-spjk-top font {
|
display: block;
|
color: #858a95;
|
font-size: 12px;
|
float: right;
|
width: 55%;
|
text-align: right;
|
line-height: 20px;
|
}
|
|
.ai-cent-spjk-nav li {
|
width: 23%;
|
height: 115px;
|
float: left;
|
margin: 5px 1%;
|
}
|
|
.ai-cent-spjk-nav img {
|
display: block;
|
width: 100%;
|
height: 96px;
|
}
|
|
</style>
|
