795 lines
24 KiB
Vue
795 lines
24 KiB
Vue
<template>
|
||
<div class="aiAnlysis">
|
||
<closePage></closePage>
|
||
<div class="title_wrap flex3">
|
||
<span>{{ date }}</span>
|
||
<span class="styleText">{{time}}</span>
|
||
<div class="title_c">{{$store.state.currentProDetail.projectName}} - {{$t('message.aiAnalysis.analyze')}}</div>
|
||
<div class="flex3 title_r">
|
||
<div style="text-align: center;">
|
||
<img :src="weatherInfo.url" width="26" height="26" />
|
||
<div>{{projectDetail.provinceName}}{{projectDetail.cityName}}{{projectDetail.areaName}}</div>
|
||
</div>
|
||
<div style="margin:0 10px;text-align: center;">
|
||
<div style="font-size:24px">{{ weatherInfo.tem2 }} ~ {{ weatherInfo.tem1 }}</div>
|
||
<div>{{ weatherInfo.wea }}</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="margin-top: 10px">{{ weatherInfo.win_speed }}</div>
|
||
<div>风力</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<img src="@/assets/images/aiOverview/l_r_border.png" class="l_border_img" />
|
||
<img src="@/assets/images/aiOverview/l_r_border.png" class="r_border_img" />
|
||
<div class="content_top flex">
|
||
<div class="content_t_l_wrap">
|
||
<div style>
|
||
<div class="subhead_content">
|
||
<span>{{$t('message.aiAnalysis.itemInformation')}}</span>/Worksheet information
|
||
</div>
|
||
<div class="itemInfo_type flex3">
|
||
<div class="type">
|
||
<div class="type_name">{{$t('message.aiAnalysis.projectType')}}</div>
|
||
<div class="type_value">湿地公园</div>
|
||
<!-- <div
|
||
class="type_value"
|
||
v-for="(item, index) in $t(
|
||
'message.companyDiagram.PROJECTTYPE'
|
||
)"
|
||
:key="index"
|
||
v-if="projectDetail.projectType == item.id"
|
||
>{{ item.name }}</div> -->
|
||
</div>
|
||
<div class="type">
|
||
<div class="type_name">{{$t('message.aiAnalysis.projectScale')}}</div>
|
||
<div class="type_value">
|
||
{{projectDetail.projectAcreage}}
|
||
<span>m²</span>
|
||
</div>
|
||
</div>
|
||
<div class="type">
|
||
<div class="type_name">{{$t('message.aiAnalysis.projectCost')}}</div>
|
||
<div class="type_value">
|
||
<!-- {{projectDetail.projectAcreage}} -->3332
|
||
<span>万</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="itemInfo_type flex3">
|
||
<div class="type">
|
||
<div class="type_name">{{$t('message.aiAnalysis.constructionPeriod')}}</div>
|
||
<div class="type_value">
|
||
180
|
||
<span>{{$t('message.aiAnalysis.sky')}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="type">
|
||
<div class="type_name">{{$t('message.aiAnalysis.safeProduction')}}</div>
|
||
<div class="type_value">
|
||
65
|
||
<span>{{$t('message.aiAnalysis.sky')}}</span>
|
||
</div>
|
||
</div>
|
||
<div class="type">
|
||
<div class="type_name">{{$t('message.aiAnalysis.remainingDays')}}</div>
|
||
<div class="type_value">
|
||
115
|
||
<span>{{$t('message.aiAnalysis.sky')}}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projectInfo">
|
||
<div class="type_name">{{$t('message.aiAnalysis.projectInformation')}}</div>
|
||
<div
|
||
class="type_value"
|
||
>全国工程信息网是天工网旗下的工程信息网站,专为建设行业销售人员打述的信息服务平台,包括全国大部分拟建和在建工程项目,其中不乏有酒店、住宅社区、别墅、办公楼</div>
|
||
</div>
|
||
</div>
|
||
<div class="realTime">
|
||
<div class="subhead_content">
|
||
<span>{{$t('message.aiAnalysis.realTimeData')}}</span>/Real-time data
|
||
</div>
|
||
<div class="flex chart_wrap">
|
||
<div class="chart" ref="environment"></div>
|
||
<div class="chart" ref="personnel"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_t_c_wrap">
|
||
<div class="video_wrap">
|
||
<div class="video_content">
|
||
<videoModule :value="devList" :displayBottomMod='true' :winNumBer='4' :autoplay='false'
|
||
:showCaptrue="false"
|
||
:showControl="false"
|
||
:showPlayback="false"></videoModule>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_t_r_wrap">
|
||
<div class="subhead_content">
|
||
<span>{{$t('message.aiAnalysis.warningMessage')}}</span>/Alarm information
|
||
</div>
|
||
<div class="warningMessage">
|
||
<div class="warning_title flex3">
|
||
<div>{{$t('message.aiAnalysis.time')}}</div>
|
||
<div>{{$t('message.aiAnalysis.place')}}</div>
|
||
<div>{{$t('message.aiAnalysis.type')}}</div>
|
||
</div>
|
||
<div class="warning_content_wrap">
|
||
<div class="warning_content flex3 showBg" v-for="item in 10" :key="item+'77'">
|
||
<div>9/18/14:41:51</div>
|
||
<div class="place">b座水泥地</div>
|
||
<div class="type">人脸拍摄</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content_bottom">
|
||
<div class="subhead_content">
|
||
<span>{{$t('message.aiAnalysis.faceCaptured')}}</span>/Face capture
|
||
</div>
|
||
<div class="face_wrap">
|
||
<el-carousel
|
||
:interval="500000"
|
||
arrow="always"
|
||
style="height:100%"
|
||
indicator-position="none"
|
||
>
|
||
<el-carousel-item
|
||
v-for="item in 4"
|
||
:key="item"
|
||
style="padding: 0 60px; box-sizing: border-box;"
|
||
>
|
||
<div class="flex" style="height: 100%;">
|
||
<div class="flex face_message" v-for="(item,index) in personList" :key="index+'99'">
|
||
<img :src="item.url" />
|
||
<div class="face_message_content">
|
||
<div class="top">
|
||
<span>{{item.name}}</span>
|
||
<span class="personType">工作人员</span>
|
||
</div>
|
||
<div>
|
||
<span>{{$t('message.aiAnalysis.snapLocation')}}：</span>
|
||
<span>b座水泥地</span>
|
||
</div>
|
||
<div>
|
||
<span>{{$t('message.aiAnalysis.IdNumber')}}：</span>
|
||
<span>441155554411221144</span>
|
||
</div>
|
||
<div>
|
||
<span>{{$t('message.aiAnalysis.catchTheTime')}}：</span>
|
||
<span>2020年9月18日15:55:51</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="subhead_content">
|
||
<span>{{$t('message.aiAnalysis.capturedVehicles')}}</span>/Vehicle capture
|
||
</div>
|
||
<div class="Vehicle_wrap">
|
||
<el-carousel
|
||
:interval="500000"
|
||
arrow="always"
|
||
style="height:100%"
|
||
indicator-position="none"
|
||
>
|
||
<el-carousel-item
|
||
v-for="item in 4"
|
||
:key="item"
|
||
style="padding: 0 60px; box-sizing: border-box;"
|
||
>
|
||
<div class="flex" style="width:100%; height:100%">
|
||
<div class="Vehicle_content" v-for="(item,index) in carList" :key="index+'11'">
|
||
<div class="car_img">
|
||
<img :src="item.url" width="100%" height="100%"></div>
|
||
<div class="car_info">
|
||
<div class="carNum">{{item.carNum}}</div>
|
||
<div>{{item.time}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts4';;
|
||
import videoModule from "@/components/videoModule/videoModule.vue";
|
||
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
|
||
import closePage from "@/components/closePage"
|
||
import {
|
||
getWeatherDataApi
|
||
} from "@/assets/js/api/environmentManage";
|
||
export default {
|
||
name: "aiAnlysis",
|
||
components: {
|
||
videoModule,closePage
|
||
},
|
||
data() {
|
||
return {
|
||
personList: [
|
||
{
|
||
url: "http://139.159.136.114:8081/itbgp/file/5417a6bb-57fb-49ae-b8a6-6f65826bf102.png",
|
||
name: "王小虎",
|
||
address: "上海市普陀区金沙江路 1518 弄",
|
||
},
|
||
{
|
||
url: "http://139.159.136.114:8081/itbgp/file/92df32ce-fe2d-472f-bd8b-7ed8c44ddeeb.png",
|
||
name: "方大明",
|
||
address: "上海市普陀区金沙江路 1517 弄",
|
||
},
|
||
{
|
||
url: "http://139.159.136.114:8081/itbgp/file/f9590bcd-8ac9-44e3-b185-55860d3a9f95.png",
|
||
name: "杜华",
|
||
address: "上海市普陀区金沙江路 1519 弄",
|
||
},
|
||
{
|
||
url: "http://139.159.136.114:8081/itbgp/file/b05c5c83-c8fe-4bf5-8ca3-843b0f901bf0.png",
|
||
name: "石磊",
|
||
address: "上海市普陀区金沙江路 1516 弄",
|
||
},
|
||
],
|
||
devList: [
|
||
{
|
||
winNum: 0,
|
||
value: "大门视频",
|
||
url:
|
||
"https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/0/1/20200914T082944/dev_6G07ECFPAZ2B319_20200914T082944.m3u8?proto=https",
|
||
},
|
||
{
|
||
winNum: 0,
|
||
value: "视频2",
|
||
url:
|
||
"https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/1/1/20200914T082255/dev_6G07ECFPAZ2B319_20200914T082255.m3u8?proto=https",
|
||
},
|
||
{
|
||
winNum: 0,
|
||
value: "视频3",
|
||
url:
|
||
"https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/2/1/20200916T082803/dev_6G07ECFPAZ2B319_20200916T082803.m3u8?proto=https",
|
||
},
|
||
{
|
||
winNum: 0,
|
||
value: "视频4",
|
||
url:
|
||
"https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/5/1/20200915T011247/dev_6G07ECFPAZ2B319_20200915T011247.m3u8?proto=https",
|
||
},
|
||
{
|
||
winNum: 0,
|
||
value: "视频5",
|
||
url:
|
||
"https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/3/1/20200915T092330/dev_6G07ECFPAZ2B319_20200915T092330.m3u8?proto=https",
|
||
},
|
||
{
|
||
winNum: 0,
|
||
value: "视频6",
|
||
url:
|
||
// "ezopen://open.ys7.com/E21189670/1.hd.live",
|
||
"https://cmgw-vpc.lechange.com:8890/LCO/6G07ECFPAZ2B319/4/1/20200916T083044/dev_6G07ECFPAZ2B319_20200916T083044.m3u8?proto=https",
|
||
},
|
||
],
|
||
selectDev: "",
|
||
videoUrl: "",
|
||
videoArr: [],
|
||
carList:[
|
||
{carNum:'粤BK593A',url:'http://139.159.136.114:8080/itbgp/file/ea80dae2-e78f-4088-9ab7-f5abb72c34af.jpg',time:'2019-05-08 06:55:25'},
|
||
{carNum:'粤B9R13K',url:'http://139.159.136.114:8080/itbgp/file/45b8759b-f76b-4e05-97af-bc9c5556823e.jpg',time:'2019-05-08 06:18:19'},
|
||
{carNum:'粤B9R13K',url:'http://139.159.136.114:8080/itbgp/file/1ee8850e-a87c-47db-ac25-9ed991bbf1b3.jpg',time:'2019-05-08 06:17:51'},
|
||
{carNum:'桂MNJ585',url:'http://139.159.136.114:8080/itbgp/file/1f27b9c7-1fa0-45c4-a4c7-8393a4b5bba7.jpg',time:'2019-05-08 05:44:40'},
|
||
{carNum:'粤BJD158',url:'http://139.159.136.114:8080/itbgp/file/48a9c27a-2693-473b-b723-6fd9385eb9b5.jpg',time:'2019-05-08 03:59:28'},
|
||
],
|
||
projectDetail:{},
|
||
weatherInfo:{},
|
||
time:'',
|
||
date:'',
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getDataDateils()
|
||
this.createdEcharts();
|
||
this.getTime()
|
||
},
|
||
methods: {
|
||
getTime() {
|
||
var myDate = new Date(); //实例一个时间对象；
|
||
this.date = myDate.getFullYear(); //获取系统的年；
|
||
this.date += '-' + (myDate.getMonth() + 1); //获取系统月份，由于月份是从0开始计算，所以要加1
|
||
this.date += '-' + myDate.getDate(); // 获取系统日，
|
||
this.time = ' ' + myDate.getHours(); //获取系统时，
|
||
this.time += ':' + myDate.getMinutes(); //分
|
||
this.time += ':' + myDate.getSeconds(); //秒
|
||
|
||
setTimeout(() => {
|
||
this.getTime()
|
||
}, 1000);
|
||
},
|
||
loadWeather(){
|
||
var _this = this
|
||
getWeatherDataApi({cityid:this.projectDetail.cityCode}).then((res) => {
|
||
var json = JSON.parse(res.result);
|
||
this.weatherInfo = json.data[0]
|
||
this.weatherInfo.url = require('@/assets/images/weather/'+this.weatherInfo.wea_img+'.png')
|
||
});
|
||
},
|
||
//获取详情
|
||
getDataDateils() {
|
||
let data = {
|
||
projectSn: this.$store.state.projectSn,
|
||
};
|
||
getProjectDetail(data).then((res) => {
|
||
// console.log(res);
|
||
if (res.code == 200) {
|
||
this.projectDetail = res.result;
|
||
this.loadWeather()
|
||
}
|
||
});
|
||
},
|
||
createdEcharts() {
|
||
let that = this;
|
||
//环境图表
|
||
let environment = echarts.init(this.$refs.environment);
|
||
environment.clear();
|
||
let option1 = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||
},
|
||
color:['#FAC81B','#998FE5','#125DD1','#08CEF7','#56F194'],
|
||
// legend: {
|
||
// left: "center",
|
||
// top: "bottom",
|
||
// data: [
|
||
// "rose1",
|
||
// "rose2",
|
||
// "rose3",
|
||
// "rose4",
|
||
// "rose5",
|
||
// "rose6",
|
||
// "rose7",
|
||
// "rose8",
|
||
// ],
|
||
// },
|
||
|
||
series: [
|
||
{
|
||
name: that.$t('message.aiAnalysis.areaModel'),
|
||
type: "pie",
|
||
radius: [0, 50],
|
||
center: ["50%", "50%"],
|
||
roseType: "area",
|
||
labelLine: {
|
||
normal: {
|
||
length: 5,
|
||
},
|
||
},
|
||
data: [
|
||
{ value: 10, name: that.$t('message.aiAnalysis.noise') },
|
||
{ value: 5, name: that.$t('message.aiAnalysis.noise2') },
|
||
{ value: 15, name: that.$t('message.aiAnalysis.dust') },
|
||
{ value: 25, name: that.$t('message.aiAnalysis.mixedSoil') },
|
||
{ value: 20, name: that.$t('message.aiAnalysis.waste') }
|
||
],
|
||
},
|
||
],
|
||
};
|
||
environment.setOption(option1);
|
||
//工种人员图表
|
||
let personnel = echarts.init(this.$refs.personnel);
|
||
personnel.clear();
|
||
let option2 = {
|
||
color:['#FAC81B','#998FE5','#125DD1','#08CEF7','#56F194'],
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
||
},
|
||
// legend: {
|
||
// left: "center",
|
||
// top: "bottom",
|
||
// data: [
|
||
// "rose1",
|
||
// "rose2",
|
||
// "rose3",
|
||
// "rose4",
|
||
// "rose5",
|
||
// "rose6",
|
||
// "rose7",
|
||
// "rose8",
|
||
// ],
|
||
// },
|
||
|
||
series: [
|
||
{
|
||
name: that.$t('message.aiAnalysis.areaModel'),
|
||
type: "pie",
|
||
radius: [0, 50],
|
||
center: ["50%", "50%"],
|
||
roseType: "area",
|
||
labelLine: {
|
||
normal: {
|
||
length: 3,
|
||
length2: 2
|
||
},
|
||
},
|
||
data: [
|
||
{ value: 10, name: that.$t('message.aiAnalysis.projectsNumber') },
|
||
{ value: 5, name: that.$t('message.aiAnalysis.sitesNumber') },
|
||
{ value: 15, name:that.$t('message.aiAnalysis.absenteeism') },
|
||
{ value: 25, name: that.$t('message.aiAnalysis.securityNumber') },
|
||
{ value: 20, name: that.$t('message.aiAnalysis.strangeNumber') }
|
||
],
|
||
},
|
||
],
|
||
};
|
||
personnel.setOption(option2);
|
||
},
|
||
|
||
querySearch(queryString, cb) {
|
||
var restaurants = this.devList;
|
||
var results = queryString
|
||
? restaurants.filter(this.createFilter(queryString))
|
||
: restaurants;
|
||
// 调用 callback 返回建议列表的数据
|
||
cb(results);
|
||
},
|
||
createFilter(queryString) {
|
||
return (restaurant) => {
|
||
return (
|
||
restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
|
||
0
|
||
);
|
||
};
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.flex2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.flex3 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.flex4 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
.aiAnlysis {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #050c22;
|
||
color: #fff;
|
||
.title_wrap {
|
||
width: 100%;
|
||
height: 80px;
|
||
margin-top: -10px;
|
||
background-image: url("../../../assets/images/aiOverview/title_bg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: cover;
|
||
background-position: center;
|
||
padding: 0 40px;
|
||
box-sizing: border-box;
|
||
.title_c {
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
margin-bottom: -30px;
|
||
margin-left: 285px;
|
||
}
|
||
.title_r{
|
||
width: 20%;
|
||
font-size: 12px;
|
||
}
|
||
.title_l{
|
||
width: 20%;
|
||
}
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100% - 70px);
|
||
background: #050c22;
|
||
box-sizing: border-box;
|
||
padding: 10px 60px 22px;
|
||
position: relative;
|
||
.l_border_img {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 22px;
|
||
height: 95%;
|
||
width: 30px;
|
||
}
|
||
.r_border_img {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 22px;
|
||
height: 95%;
|
||
width: 30px;
|
||
transform: rotateY(180deg);
|
||
-ms-transform: rotateY(180deg); /* IE 9 */
|
||
-moz-transform: rotateY(180deg); /* Firefox */
|
||
-webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
|
||
-o-transform: rotateY(180deg); /* Opera */
|
||
}
|
||
.content_top {
|
||
width: 100%;
|
||
height: 62%;
|
||
}
|
||
|
||
.content_t_l_wrap,
|
||
.content_t_r_wrap {
|
||
width: 25%;
|
||
height: 100%;
|
||
}
|
||
.content_t_c_wrap {
|
||
width: 50%;
|
||
height: 100%;
|
||
margin: 0 15px;
|
||
}
|
||
|
||
.video_wrap {
|
||
width: 100%;
|
||
height: 100%;
|
||
border: 1px solid #073f56;
|
||
.video_content {
|
||
width: 100%;
|
||
height: 100% ;
|
||
}
|
||
.operation {
|
||
width: 100%;
|
||
height: 40px;
|
||
background: #0d1534;
|
||
padding: 3px 5px;
|
||
box-sizing: border-box;
|
||
border-top: 1px solid #073f56;
|
||
}
|
||
}
|
||
|
||
.subhead_content {
|
||
width: 100%;
|
||
height: 26px;
|
||
background-repeat: no-repeat;
|
||
background-image: url("../../../assets/images/aiOverview/subhead.png");
|
||
background-position-y: bottom;
|
||
span {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.itemInfo_type {
|
||
width: 100%;
|
||
margin: 14px 0;
|
||
flex-wrap: wrap;
|
||
.type {
|
||
width: 29%;
|
||
height: 54px;
|
||
background-image: url("../../../assets/images/aiOverview/subhead_bg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: contain;
|
||
.type_name {
|
||
font-size: 14px;
|
||
margin-left: 14px;
|
||
color: #09e1ff;
|
||
}
|
||
.type_value {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-top: 10px;
|
||
span {
|
||
font-size: 12px;
|
||
font-weight: 100;
|
||
margin-left: 4px;
|
||
color: #dadade;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.projectInfo {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 10%;
|
||
background-image: url("../../../assets/images/aiOverview/max_subhead_bg.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
.type_name {
|
||
font-size: 14px;
|
||
margin-left: 14px;
|
||
color: #09e1ff;
|
||
}
|
||
.type_value {
|
||
font-size: 14px;
|
||
padding: 10px 10px 18px;
|
||
letter-spacing: 1px;
|
||
}
|
||
}
|
||
|
||
.realTime {
|
||
width: 100%;
|
||
margin-top: 26px;
|
||
height: 40%;
|
||
.chart_wrap {
|
||
width: 100%;
|
||
height: calc(100% - 26px);
|
||
}
|
||
.chart {
|
||
width: 50%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.warningMessage {
|
||
width: 100%;
|
||
height: calc(100% - 26px);
|
||
.warning_title {
|
||
width: 100%;
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
div {
|
||
width: 33.3%;
|
||
color: #a4a3a2;
|
||
}
|
||
}
|
||
.warning_content_wrap {
|
||
width: 100%;
|
||
height: calc(100% - 44px);
|
||
}
|
||
.warning_content {
|
||
width: 100%;
|
||
align-items: start;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 15px;
|
||
&:nth-child(2n-1){
|
||
background: #0c1f3f;
|
||
}
|
||
div {
|
||
text-align: center;
|
||
width: 33.3%;
|
||
}
|
||
.place {
|
||
color: #09d6ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
// .showBg {
|
||
// background: #0c1f3f;
|
||
// }
|
||
|
||
.content_bottom {
|
||
width: 100%;
|
||
height: 35%;
|
||
.subhead_content {
|
||
width: 100%;
|
||
height: 26px;
|
||
background-repeat: no-repeat;
|
||
background-image: url("../../../assets/images/aiOverview/max_subhead.png");
|
||
background-position-y: bottom;
|
||
span {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
.face_wrap {
|
||
width: 100%;
|
||
height: 35%;
|
||
margin-bottom: 10px;
|
||
.face_message {
|
||
width: 280px;
|
||
height: 82px;
|
||
font-size: 12px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-top: 1%;
|
||
margin-right: 20px;
|
||
img {
|
||
height: 100%;
|
||
width: 68px;
|
||
}
|
||
.face_message_content {
|
||
width: calc(100% - 68px);
|
||
padding: 5px 0;
|
||
padding-left: 10px;
|
||
height: 82px;
|
||
border: 1px solid #0a5873;
|
||
border-left: none;
|
||
background: #0c1f3f;
|
||
box-sizing: border-box;
|
||
|
||
div {
|
||
line-height: 17px;
|
||
opacity: 0.6;
|
||
}
|
||
.top{
|
||
margin-bottom: 3px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.Vehicle_wrap {
|
||
width: 100%;
|
||
height: 52%;
|
||
.Vehicle_content {
|
||
font-size: 12px;
|
||
width: 120px;
|
||
text-align: center;
|
||
border: 1px solid #0a4966;
|
||
margin-right: 20px;
|
||
.car_img {
|
||
width: 100%;
|
||
height: 84px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.car_info {
|
||
padding: 10px 2px;
|
||
|
||
div{
|
||
opacity: 0.5;
|
||
}
|
||
.carNum{
|
||
color: #09e1ff;
|
||
font-size: 14px;
|
||
margin-bottom: 3px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.styleText{
|
||
position: absolute;
|
||
margin-left: 80px;
|
||
}
|
||
/deep/ .el-carousel__container {
|
||
height: 100%;
|
||
}
|
||
/deep/ .el-carousel__arrow--right {
|
||
color: #00c8ff !important;
|
||
right: 0;
|
||
background: #373c4e;
|
||
}
|
||
/deep/ .el-carousel__arrow--left {
|
||
color: #00c8ff !important;
|
||
left: 0;
|
||
background: #373c4e;
|
||
}
|
||
/deep/.el-input__inner {
|
||
background: #0d1534;
|
||
border-color: #1e5787;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.personType{
|
||
background-color: #74BE56;
|
||
color: white;
|
||
border-radius: 3px;
|
||
margin-left: 10px;
|
||
display: inline-block;
|
||
padding: 1px 2px;
|
||
}
|
||
|
||
</style> |