<template>
|
<div class="container" ref="contaner">
|
<header>
|
<i @click="returnPath" class="el-icon-s-home" style="color: #00b4ff;position: absolute;font-size: 24px;left: 98%;top: 15%"></i>
|
<img src="@/assets/images/header-bg.png"/>
|
</header>
|
<div class="main-contaner">
|
<div class="data-statistics-content">
|
<img src="@/assets/images/workOrder-title.png" class="title"/>
|
<div class="main-left-container">
|
<div class="work-order-container">
|
<img
|
src="@/assets/images/subheading1.png"
|
class="subheading-title"
|
/>
|
<div class="statistics-container">
|
<div
|
class="item-statistics-container"
|
v-for="(item, index) in statistics"
|
:key="index"
|
>
|
<itemSubheading :isData="item"></itemSubheading>
|
</div>
|
</div>
|
<img
|
src="@/assets/images/decorate-border.png"
|
class="decorate-border"
|
/>
|
</div>
|
|
<div class="histogram-container">
|
<img
|
src="@/assets/images/subheading1.png"
|
class="subheading-title"
|
/>
|
<div class="statistics-container">
|
<div class="DrawLine-content">
|
<!-- <div style="width: 100%; height: 100%" ref="myDrawLine"></div> -->
|
<lineChart :workOrderRegion=workOrderRegion></lineChart>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="map-container" ref="isMap">
|
<img src="@/assets/map/texture/rotating-point2.png" alt="Rotating Image" class="rotating-image">
|
<img src="@/assets/map/texture/rotatingAperture.png" alt="Rotating Image" class="rotating-image-in">
|
<mapApp @clickMap="getDeptId" :geoCoordinates=scoreData :platformData = platformData></mapApp>
|
<div class="btn-container">
|
<img src="@/assets/images/btn-bg.png" class="bg-img"/>
|
<div class="btn-list" v-model="activerBtnType">
|
<img
|
:src="activerBtnType === item.id ? item.bgActiver : item.bg"
|
v-for="item in btnList"
|
:key="item.id"
|
@click="tabChange(item.id)"
|
/>
|
</div>
|
</div>
|
</div>
|
|
<div class="data-statistics-content">
|
<div class="facility-container">
|
<img src="@/assets/images/facility-title.png" class="title"/>
|
<div class="facility-content">
|
<div class="item-facility-data">
|
<img
|
src="@/assets/images/facility-title-3.png"
|
class="item-facility-icon"
|
/>
|
<ul>
|
<li v-for="(item, index) in facilityData.video" :key="index">
|
<div style="font-size: 14px" class="value">
|
<animate-number from="0" :to="item.value" :key="item.value"></animate-number>
|
</div>
|
<div style="font-size: 14px" class="title">{{ item.title }}</div>
|
</li>
|
</ul>
|
</div>
|
<div class="item-facility-data">
|
<img
|
src="@/assets/images/facility-title-1.png"
|
class="item-facility-icon"
|
/>
|
<ul>
|
<li v-for="(item, index) in facilityData.car" :key="index">
|
<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
|
<div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
|
<div style="font-size: 14px" class="title">{{ item.title }}</div>
|
</li>
|
</ul>
|
</div>
|
<div class="item-facility-data">
|
<img
|
src="@/assets/images/facility-title-2.png"
|
class="item-facility-icon"
|
/>
|
<ul>
|
<li
|
v-for="(item, index) in facilityData.face"
|
:key="index"
|
>
|
<!-- <div class="value">{{ item.value ? item.value : "-" }}</div>-->
|
<div style="font-size: 14px" class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number></div>
|
<div style="font-size: 14px" class="title">{{ item.title }}</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="normal-container">
|
<img src="@/assets/images/normal-title.png" class="title"/>
|
<div class="normal-statistics-content">
|
<ul class="list-title-container">
|
<li>地区</li>
|
<li>视频</li>
|
<li>车辆</li>
|
<li>人脸</li>
|
</ul>
|
<div class="list-content">
|
<div class="list-content-to is-scroll-bar">
|
<ul
|
class="item-list"
|
v-for="(item, index) in facilityNormal"
|
:key="index"
|
>
|
<li class="name">{{ item.area }}</li>
|
<li><animate-number from="0" :to="item.videoRate" :key="item.videoRate"></animate-number>%</li>
|
<li><animate-number from="0" :to="item.carRate" :key="item.carRate"></animate-number>%</li>
|
<li><animate-number from="0" :to="item.faceRate" :key="item.faceRate"></animate-number>%</li>
|
<!-- <li>{{ item.videoRate ? item.videoRate + '%' : '--' }}</li>-->
|
<!-- <li>{{ item.carRate ? item.carRate + '%' : '--' }}</li>-->
|
<!-- <li>{{ item.faceRate ? item.faceRate + '%' : '--' }}</li>-->
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<img src="@/assets/images/video-title.png" class="video-title"/>
|
</div>
|
|
<footer>
|
<img src="@/assets/images/footer-title-bg.png" class="footer-title"/>
|
<div class="footer-container">
|
<div class="footer-statistics-container">
|
<div class="face-container">
|
<div
|
class="item-face-container"
|
v-for="(item, index) in faceList"
|
:key="index"
|
:style="item.style"
|
>
|
<div class="proportion">
|
<img src="@/assets/images/face-num-bg.png"/>
|
<div class="value"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
|
</div>
|
<div class="title">{{ item.name }}</div>
|
</div>
|
</div>
|
|
<div class="video-container">
|
<div
|
class="item-video-data"
|
v-for="(item, index) in videoList"
|
:key="index"
|
>
|
<div class="video-data">
|
<div class="proportion"><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</div>
|
</div>
|
<div class="item-video-title">{{ item.name }}</div>
|
</div>
|
</div>
|
|
<div class="car-container">
|
<div
|
class="item-car-container"
|
v-for="(item, index) in carList"
|
:key="index"
|
:style="item.style"
|
>
|
{{ item.name }} <span><animate-number from="0" :to="item.value" :key="item.value"></animate-number>%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</footer>
|
</div>
|
</template>
|
|
<script>
|
import itemSubheading from '../screen/components/subheading.vue' // 环形统计图
|
import lineChart from '../screen/components/lineChart.vue' // 折线统计图
|
import mapApp from '../screen/components/map3.vue' // 地图
|
import {
|
getDepartmentData,
|
getDeviceData,
|
getWorkOrderData,
|
getWorkOrderRegion,
|
getNormalRate,
|
checkFace,
|
checkCar,
|
checkVideo,
|
checkScore,
|
getPlatform
|
} from "@/api/newpage";
|
|
export default {
|
name: 'examineApp',
|
components: {mapApp, itemSubheading, lineChart},
|
data() {
|
return {
|
deptList: [],
|
deptId: '',
|
intervalId: null, // 用于存储定时器的ID
|
carList: [],
|
videoList: [],
|
faceList: [],
|
workOrderData: [],
|
workOrderRegion: [],
|
platformData: null,
|
scoreData: {
|
自流井区: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
],
|
高新区: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
],
|
大安区: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
],
|
沿滩区: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
],
|
贡井区: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
],
|
荣县: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
],
|
富顺县: [
|
{
|
value: 0,
|
name: '得分'
|
}
|
]
|
},
|
// 设备数据
|
facilityData: {
|
video: [],
|
car: [],
|
face: []
|
},
|
// 设备正常率
|
facilityNormal: [],
|
// 人脸考核
|
faceData: [],
|
// 视频考核
|
videoData: [],
|
// 车辆考核
|
carData: [],
|
// 默认选中按钮 1 省厅 2 区县 3 公安
|
btnList: [
|
{
|
id: '1',
|
bg: require('@/assets/images/st-btn-1.png'),
|
bgActiver: require('@/assets/images/st-btn-2.png')
|
},
|
{
|
id: '2',
|
bg: require('@/assets/images/qx-btn-1.png'),
|
bgActiver: require('@/assets/images/qx-btn-2.png')
|
},
|
{
|
id: '3',
|
bg: require('@/assets/images/ga-btn-1.png'),
|
bgActiver: require('@/assets/images/ga-btn-2.png')
|
}
|
],
|
activerBtnType: '2',
|
statistics: [],
|
isFullScreen: false
|
}
|
},
|
mounted() {
|
// 获取部门
|
getDepartmentData()
|
.then((res) => {
|
this.deptList = res.data;
|
})
|
.catch((err) => {
|
});
|
this.getData();
|
// 查询数据
|
this.intervalId = setInterval(this.getData, 3600000); //一小时一次
|
},
|
beforeDestroy() {
|
// 组件销毁前清除定时器，防止内存泄漏
|
if (this.intervalId) {
|
clearInterval(this.intervalId);
|
this.intervalId = null;
|
}
|
},
|
methods: {
|
getDeptId(deptName) {
|
let deptId = this.deptList.find(item => item.area === deptName).deptId;
|
if (deptId === this.deptId) {
|
this.deptId = '';
|
} else {
|
this.deptId = deptId
|
}
|
this.getData();
|
},
|
getData() {
|
getDeviceData(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.facilityData = res.data;
|
})
|
.catch((err) => {
|
});
|
getWorkOrderData(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.workOrderData = res.data;
|
})
|
.catch((err) => {
|
});
|
getWorkOrderRegion(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.workOrderRegion = res.data;
|
})
|
.catch((err) => {
|
});
|
getNormalRate(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.facilityNormal = res.data;
|
})
|
.catch((err) => {
|
});
|
checkCar(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.carData = res.data;
|
})
|
.catch((err) => {
|
});
|
checkFace(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.faceData = res.data;
|
})
|
.catch((err) => {
|
});
|
checkVideo(this.activerBtnType, this.deptId)
|
.then((res) => {
|
this.videoData = res.data;
|
})
|
.catch((err) => {
|
});
|
checkScore(this.activerBtnType, this.deptId)
|
.then((res) => {
|
if (res.data && Object.keys(res.data).length > 0) {
|
this.scoreData = res.data;
|
}
|
})
|
.catch((err) => {
|
});
|
getPlatform(this.activerBtnType, this.deptId)
|
.then((res) => {
|
if (res.data && Object.keys(res.data).length > 0) {
|
this.platformData = res.data;
|
}
|
})
|
.catch((err) => {
|
});
|
},
|
returnPath() {
|
this.$router.push("/index");
|
},
|
tabChange(id) {
|
this.activerBtnType = id
|
this.getData();
|
},
|
// formatter: function (num) {
|
// return num.toFixed(2)
|
// },
|
},
|
watch: {
|
workOrderData() {
|
this.statistics = [];
|
let item = {value1: 0, value2: 0, title: "", color: ""}
|
item.value1 = this.workOrderData.totalNum
|
item.value2 = 0
|
item.color = '#e4b54f'
|
item.title = '工单总数'
|
this.statistics.push(item)
|
|
let item1 = {value1: 0, value2: 0, title: "", color: ""}
|
item1.value1 = this.workOrderData.doneNum
|
item1.value2 = this.workOrderData.totalNum - this.workOrderData.doneNum
|
item1.color = '#5cff9a'
|
item1.title = '已处理'
|
this.statistics.push(item1)
|
|
let item2 = {value1: 0, value2: 0, title: "", color: ""}
|
item2.value1 = this.workOrderData.todoNum
|
item2.value2 = this.workOrderData.totalNum - this.workOrderData.todoNum
|
item2.color = '#ff7b72'
|
item2.title = '未处理'
|
this.statistics.push(item2)
|
},
|
|
videoData() {
|
this.videoList = [];
|
let item = {value: 0, name: "", id: 0, routerUrl: ""}
|
item.value = this.videoData.platformOnline
|
item.name = "平台在线率"
|
item.id = 1
|
item.routerUrl = ""
|
this.videoList.push(item)
|
|
let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item1.value = this.videoData.monitorQualification
|
item1.name = "一机一档合格率"
|
item1.id = 2
|
item1.routerUrl = ""
|
this.videoList.push(item1)
|
|
let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item2.value = this.videoData.monitorRegistration
|
item2.name = "一机一档注册率"
|
item2.id = 3
|
item2.routerUrl = ""
|
this.videoList.push(item2)
|
|
let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item3.value = this.videoData.archivesRate
|
item3.name = "档案考核比"
|
item3.id = 4
|
item3.routerUrl = ""
|
this.videoList.push(item3)
|
|
let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item4.value = this.videoData.siteOnline
|
item4.name = "点位在线率"
|
item4.id = 5
|
item4.routerUrl = ""
|
this.videoList.push(item4)
|
|
let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item5.value = this.videoData.videoAvailable
|
item5.name = "录像可用率"
|
item5.id = 6
|
item5.routerUrl = ""
|
this.videoList.push(item5)
|
|
let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item6.value = this.videoData.ministrySiteOnline
|
item6.name = "部级点位在线率"
|
item6.id = 7
|
item6.routerUrl = ""
|
this.videoList.push(item6)
|
|
let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item7.value = this.videoData.ministryVideoAvailable
|
item7.name = "部级巡检录像可用率"
|
item7.id = 8
|
item7.routerUrl = ""
|
this.videoList.push(item7)
|
|
let item8 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item8.value = this.videoData.keySiteOnline
|
item8.name = "重点点位在线率"
|
item8.id = 9
|
item8.routerUrl = ""
|
this.videoList.push(item8)
|
|
let item9 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item9.value = this.videoData.keyVideoAvailable
|
item9.name = "重点点位录象可用率"
|
item9.id = 10
|
item9.routerUrl = ""
|
this.videoList.push(item9)
|
|
let item10 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item10.value = this.videoData.keyAnnotationAccuracy
|
item10.name = "重点点位标注正确率"
|
item10.id = 11
|
item10.routerUrl = ""
|
this.videoList.push(item10)
|
|
let item11 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item11.value = this.videoData.keyTimingAccuracy
|
item11.name = "重点点位按时正确率"
|
item11.id = 12
|
item11.routerUrl = ""
|
this.videoList.push(item11)
|
|
let item12 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item12.value = this.videoData.keyCommandImageOnline
|
item12.name = "重点指挥图像在线率"
|
item12.id = 13
|
item12.routerUrl = ""
|
this.videoList.push(item12)
|
|
let item13 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item13.value = this.videoData.imageResourceSecurity
|
item13.name = "图像资源安全管理"
|
item13.id = 14
|
item13.routerUrl = ""
|
this.videoList.push(item13)
|
},
|
carData() {
|
this.carList = [];
|
let item = {value: 0, name: "", id: 0, routerUrl: ""}
|
item.value = this.carData.viewConnectStability
|
item.name = "视图库对接稳定性"
|
item.id = 1
|
item.routerUrl = ""
|
item.style = {
|
top: '65%',
|
left: '70%'
|
}
|
this.carList.push(item)
|
|
let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item1.value = this.carData.siteOnline
|
item1.name = "点位在线率"
|
item1.id = 2
|
item1.routerUrl = ""
|
item1.style = {
|
top: '46%',
|
left: '66%'
|
}
|
this.carList.push(item1)
|
|
let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item2.value = this.carData.deviceDirectoryConsistent
|
item2.name = "联网卡口目录一致率"
|
item2.id = 3
|
item2.routerUrl = ""
|
item2.style = {
|
top: '26%',
|
left: '5%'
|
}
|
this.carList.push(item2)
|
|
let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item3.value = this.carData.vehicleInformationCollectionAccuracy
|
item3.name = "信息采集准确率"
|
item3.id = 4
|
item3.routerUrl = ""
|
item3.style = {
|
top: '26%',
|
left: '63%'
|
}
|
this.carList.push(item3)
|
|
let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item4.value = this.carData.vehicleCaptureIntegrity
|
item4.name = "抓拍数据完整性"
|
item4.id = 5
|
item4.routerUrl = ""
|
item4.style = {
|
top: '46%',
|
left: '12%'
|
}
|
this.carList.push(item4)
|
|
let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item5.value = this.carData.vehicleCaptureAccuracy
|
item5.name = "抓拍数据准确性"
|
item5.id = 6
|
item5.routerUrl = ""
|
item5.style = {
|
top: '7%',
|
left: '59.2%'
|
}
|
this.carList.push(item5)
|
|
let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item6.value = this.carData.vehicleTimingAccuracy
|
item6.name = "时钟准确性"
|
item6.id = 7
|
item6.routerUrl = ""
|
item6.style = {
|
top: '65%',
|
left: '13%'
|
}
|
this.carList.push(item6)
|
|
let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item7.value = this.carData.vehicleUploadTimeliness
|
item7.name = "抓拍数据上传及时性"
|
item7.id = 8
|
item7.routerUrl = ""
|
item7.style = {
|
top: '83%',
|
left: '59.5%'
|
}
|
this.carList.push(item7)
|
|
let item8 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item8.value = this.carData.vehicleUrlAvailability
|
item8.name = "url可用性"
|
item8.id = 9
|
item8.routerUrl = ""
|
item8.style = {
|
top: '83%',
|
left: '18.5%'
|
}
|
this.carList.push(item8)
|
|
let item9 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item9.value = this.carData.vehiclePictureAvailability
|
item9.name = "抓拍数据大图可用性"
|
item9.id = 10
|
item9.style = {
|
top: '7%',
|
left: '15%'
|
}
|
item9.routerUrl = ""
|
this.carList.push(item9)
|
},
|
faceData() {
|
this.faceList = [];
|
let item = {value: 0, name: "", id: 0, routerUrl: ""}
|
item.value = this.faceData.viewConnectStability
|
item.name = "视图库对接稳定性"
|
item.id = 1
|
item.routerUrl = ""
|
item.style = {
|
top: '13%',
|
left: '2%'
|
}
|
this.faceList.push(item)
|
|
let item1 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item1.value = this.faceData.siteOnline
|
item1.name = "点位在线率"
|
item1.id = 2
|
item1.routerUrl = ""
|
item1.style = {
|
top: '23%',
|
left: '19%'
|
}
|
this.faceList.push(item1)
|
|
let item2 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item2.value = this.faceData.deviceDirectoryConsistent
|
item2.name = "目录一致率"
|
item2.id = 3
|
item2.routerUrl = ""
|
item2.style = {
|
bottom: '18%',
|
right: '2%'
|
}
|
this.faceList.push(item2)
|
|
let item3 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item3.value = this.faceData.faceInformationCollectionAccuracy
|
item3.name = "信息采集准确率"
|
item3.id = 4
|
item3.routerUrl = ""
|
item3.style = {
|
bottom: '2%',
|
left: '19%'
|
}
|
this.faceList.push(item3)
|
|
let item4 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item4.value = this.faceData.facePictureQualification
|
item4.name = "抓拍图片合格性"
|
item4.id = 5
|
item4.routerUrl = ""
|
item4.style = {
|
top: '23%',
|
right: '19%'
|
}
|
this.faceList.push(item4)
|
|
let item5 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item5.value = this.faceData.faceTimingAccuracy
|
item5.name = "抓拍图片时钟准确性"
|
item5.id = 6
|
item5.routerUrl = ""
|
item5.style = {
|
top: '13%',
|
right: '2%'
|
}
|
this.faceList.push(item5)
|
|
let item6 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item6.value = this.faceData.faceUploadTimeliness
|
item6.name = "抓拍数据上传及时性"
|
item6.id = 7
|
item6.routerUrl = ""
|
item6.style = {
|
bottom: '2%',
|
right: '19%'
|
}
|
this.faceList.push(item6)
|
|
let item7 = {value: 0, name: "", id: 0, routerUrl: ""}
|
item7.value = this.faceData.facePictureAvailability
|
item7.name = "抓拍数据大图可用性"
|
item7.id = 8
|
item7.routerUrl = ""
|
item7.style = {
|
bottom: '18%',
|
left: '2%'
|
}
|
this.faceList.push(item7)
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100vw;
|
height: 100vh;
|
// min-width: 1919px;
|
background-image: url("../../assets/images/background-img.jpg");
|
background-color: #fff;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
background-position: center;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
position: relative;
|
|
header {
|
position: relative;
|
z-index: 4;
|
|
img {
|
width: 100%;
|
display: block;
|
}
|
}
|
|
.main-contaner {
|
flex: 1;
|
width: 100%;
|
height: 0;
|
display: flex;
|
flex-direction: row;
|
margin-top: -2%;
|
position: relative;
|
|
.data-statistics-content {
|
width: 20.833333%;
|
padding-left: 1%;
|
padding-right: 1%;
|
padding-top: 0.5%;
|
box-sizing: border-box;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.title {
|
width: 100%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: block;
|
}
|
|
.main-left-container {
|
position: relative;
|
height: 100%;
|
border-bottom: 1px solid #3e97e4;
|
border-left: 1px solid #3e97e4;
|
padding: 4% 0 4% 4%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
|
&::after {
|
width: 2px;
|
height: 20px;
|
content: "";
|
position: absolute;
|
left: -6px;
|
top: -18px;
|
background-color: #3e97e4;
|
transform: rotate(-30deg);
|
}
|
|
&::before {
|
width: 43px;
|
height: 40px;
|
content: "";
|
position: absolute;
|
background-image: url("../../assets/images/border-l-icon.png");
|
bottom: 0;
|
left: 0;
|
}
|
|
.work-order-container {
|
height: 40%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: flex;
|
flex-direction: column;
|
|
.subheading-title {
|
width: 97%;
|
display: block;
|
flex-shrink: 0;
|
flex-grow: 0;
|
}
|
|
.statistics-container {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
flex: 1;
|
margin: 0 -5px;
|
|
.item-statistics-container {
|
width: calc(33.33% - 10px);
|
margin: 0 5px;
|
}
|
}
|
|
.decorate-border {
|
width: 100%;
|
display: block;
|
}
|
}
|
|
.histogram-container {
|
padding-top: 5%;
|
box-sizing: border-box;
|
height: 60%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: flex;
|
flex-direction: column;
|
|
.subheading-title {
|
width: 97.3%;
|
display: block;
|
flex-shrink: 0;
|
flex-grow: 0;
|
}
|
|
.statistics-container {
|
flex: 1;
|
position: relative;
|
|
.DrawLine-content {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
}
|
}
|
}
|
}
|
|
.facility-container {
|
height: 45.9754434%;
|
display: flex;
|
flex-direction: column;
|
flex-shrink: 0;
|
flex-grow: 0;
|
|
.title {
|
width: 100%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: block;
|
}
|
|
.facility-content {
|
flex: 1;
|
position: relative;
|
border-bottom: 1px solid #3e97e4;
|
border-right: 1px solid #3e97e4;
|
display: flex;
|
padding-top: 4%;
|
flex-direction: row;
|
overflow: hidden;
|
|
&::after {
|
width: 2px;
|
height: 20px;
|
content: "";
|
position: absolute;
|
right: -6px;
|
top: -18px;
|
background-color: #3e97e4;
|
transform: rotate(30deg);
|
}
|
|
&::before {
|
width: 43px;
|
height: 40px;
|
content: "";
|
position: absolute;
|
background-image: url("../../assets/images/border-icon.png");
|
bottom: 0;
|
right: 0;
|
}
|
|
.item-facility-data {
|
width: 33.33%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
background-image: url("../../assets/images/item-facility.png");
|
background-size: 100% auto;
|
background-repeat: no-repeat;
|
display: flex;
|
flex-direction: column;
|
//justify-content: center;
|
//align-items: center;
|
|
.item-facility-icon {
|
margin: 0 auto;
|
margin-top: 10%;
|
width: 73%;
|
display: block;
|
flex-shrink: 0;
|
flex-grow: 0;
|
}
|
|
ul {
|
flex: 1;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
text-align: center;
|
list-style-type: none;
|
//font-size: 14px;
|
//padding-left: 0;
|
|
li:nth-child(1) {
|
.value {
|
color: #e4b54f;
|
}
|
|
.title {
|
color: #dcf8ff;
|
}
|
}
|
|
li:nth-child(2) {
|
.value {
|
color: #5cff9a;
|
}
|
|
.title {
|
color: #dcf8ff;
|
}
|
}
|
|
li:nth-child(3) {
|
.value {
|
color: #ff7b72;
|
}
|
|
.title {
|
color: #dcf8ff;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.normal-container {
|
margin-top: 2%;
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
height: 0;
|
//overflow: hidden;
|
|
.title {
|
width: 100%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: block;
|
}
|
|
.normal-statistics-content {
|
flex: 1;
|
position: relative;
|
border-bottom: 1px solid #3e97e4;
|
border-right: 1px solid #3e97e4;
|
padding: 0 4% 4% 0;
|
box-sizing: border-box;
|
height: 0;
|
|
&::after {
|
width: 2px;
|
height: 20px;
|
content: "";
|
position: absolute;
|
right: -6px;
|
top: -18px;
|
background-color: #3e97e4;
|
transform: rotate(30deg);
|
}
|
|
&::before {
|
width: 43px;
|
height: 40px;
|
content: "";
|
position: absolute;
|
background-image: url("../../assets/images/border-icon.png");
|
bottom: 0;
|
right: 0;
|
}
|
|
.list-title-container {
|
width: 100%;
|
//height: 45px;
|
//margin: 4px 0 0 0;
|
//line-height: 45px;
|
height: 4.17vh;
|
line-height: 4.17vh;
|
list-style-type: none;
|
display: flex;
|
flex-direction: row;
|
background-color: #09316b;
|
box-shadow: inset 0 0 16px rgba(25, 99, 210, 0.1);
|
flex-shrink: 0;
|
flex-grow: 0;
|
position: relative;
|
|
&::after {
|
position: absolute;
|
top: 0;
|
left: 0;
|
content: "";
|
width: 15px;
|
height: 15px;
|
background-image: url("../../assets/images/list-t-l-icon.png");
|
}
|
|
&::before {
|
position: absolute;
|
top: 0;
|
right: 0;
|
content: "";
|
width: 15px;
|
height: 15px;
|
background-image: url("../../assets/images/list-t-r-icon.png");
|
}
|
|
li {
|
width: 25%;
|
text-align: center;
|
font-size: 14px;
|
color: #00e6f4;
|
flex-shrink: 0;
|
flex-grow: 0;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
|
.list-content {
|
height: calc(100% - 45px);
|
|
background-image: url("../../assets/images/list-bg.png");
|
background-size: 100% 100%;
|
box-shadow: inset 0 0 20px rgba(25, 99, 210, 0.1);
|
position: relative;
|
|
&::after {
|
position: absolute;
|
bottom: 0;
|
left: 0;
|
content: "";
|
width: 15px;
|
height: 15px;
|
background-image: url("../../assets/images/list-b-l-icon.png");
|
}
|
|
&::before {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
content: "";
|
width: 15px;
|
height: 15px;
|
background-image: url("../../assets/images/list-b-r-icon.png");
|
}
|
|
.list-content-to {
|
height: 100%;
|
overflow-y: hidden;
|
overflow-x: hidden;
|
//padding: 10px 0;
|
}
|
|
.item-list {
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
list-style-type: none;
|
border-bottom: 1px dashed #223654;
|
margin: 7px 0;
|
|
li {
|
width: 25%;
|
text-align: center;
|
//font-size: 14px;
|
font-size: 0.72916667vw !important;
|
color: #dcf8ff;
|
flex-shrink: 0;
|
flex-grow: 0;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
//height: 28px;
|
//line-height: 28px;
|
height: 2.59vh;
|
line-height: 2.59vh;
|
}
|
|
.name {
|
color: #00b4ff;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.map-container {
|
flex: 1;
|
height: 100%;
|
margin: 0 1%;
|
position: relative;
|
overflow: hidden;
|
// background-image: url('../assets//images/face-num-bg3.png');
|
// border:1px solid #ddd;
|
// box-sizing: border-box;
|
|
.main-map {
|
height: 100%;
|
overflow: hidden;
|
}
|
|
.btn-container {
|
width: 60%;
|
position: absolute;
|
top: 5%;
|
left: 50%;
|
transform: translateX(-50%);
|
z-index: 99;
|
|
.bg-img {
|
width: 100%;
|
}
|
|
.btn-list {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
top: 0;
|
left: 0;
|
padding-top: 3.3%;
|
padding-left: 16.4%;
|
padding-right: 16.4%;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
justify-content: space-between;
|
|
img {
|
width: 26.638484%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: block;
|
cursor: pointer;
|
user-select: none;
|
}
|
}
|
}
|
}
|
|
.video-title {
|
width: 60.5208333%;
|
position: absolute;
|
z-index: 8;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 0;
|
}
|
}
|
|
footer {
|
.footer-title {
|
width: 100%;
|
display: block;
|
}
|
|
.footer-container {
|
//height: 220px;
|
height: 24.15vh;
|
box-sizing: border-box;
|
position: relative;
|
background-image: url("../../assets/images/footer-bg.png");
|
background-size: cover;
|
background-position: center;
|
|
.footer-statistics-container {
|
width: 100%;
|
height: 100%;
|
padding-bottom: 24px;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: row;
|
align-items: stretch;
|
|
.face-container,
|
.car-container {
|
flex: 1;
|
height: 100%;
|
}
|
|
.face-container {
|
position: relative;
|
|
background-image: url("../../assets/images/face-bg.png");
|
//background-size: 500px 200px;
|
background-size: 26.04166vw auto;
|
background-position: center;
|
background-repeat: no-repeat;
|
|
.item-face-container {
|
position: absolute;
|
z-index: 4;
|
width: 22.296173%;
|
|
.proportion {
|
//width: 50px;
|
width: 2.60416vw;
|
margin: 0 auto;
|
color: #00eaff;
|
text-shadow: 2px 2px 4px #152944;
|
position: relative;
|
|
img {
|
width: 100%;
|
display: block;
|
}
|
|
.value {
|
position: absolute;
|
left: 50%;
|
top: 53%;
|
transform: translate(-50%, -50%);
|
//font-size: 14px;
|
}
|
}
|
|
.title {
|
text-align: center;
|
//font-size: 12px;
|
font-size: 0.625vw;
|
color: #dcf8ff;
|
white-space: nowrap; /* 不换行 */
|
overflow: hidden; /* 隐藏超出的内容 */
|
text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
|
}
|
}
|
}
|
|
.car-container {
|
position: relative;
|
background-image: url("../../assets/images/car-bg2.png");
|
//background-size: 500px 200px;
|
background-size: 26.04166vw auto;
|
background-position: center;
|
background-repeat: no-repeat;
|
|
// .car-bj-img {
|
// position: absolute;
|
// left: 50%;
|
// top: 50%;
|
// transform: translate(-50%, -50%);
|
// width: 83.1946755%;
|
// display: block;
|
// z-index: 2;
|
// }
|
|
.item-car-container {
|
background-image: url("../../assets/images/item-car-bg.png");
|
background-size: 100% 100%;
|
color: #dcf8ff;
|
font-size: 12px;
|
line-height: 26px;
|
padding: 0 15px;
|
font-size: 0.625vw;
|
position: absolute;
|
z-index: 5;
|
|
span {
|
color: #ffc23e;
|
}
|
}
|
}
|
|
.video-container {
|
width: 37.6041667%;
|
height: 100%;
|
flex-shrink: 0;
|
flex-grow: 0;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: wrap;
|
align-items: self-start;
|
box-sizing: border-box;
|
|
.item-video-data {
|
width: 14.2857143%;
|
flex-grow: 0;
|
padding: 0 10px;
|
box-sizing: border-box;
|
height: 50%;
|
display: flex;
|
flex-direction: column;
|
|
.video-data {
|
flex: 1;
|
position: relative;
|
background-image: url("../../assets/images/item-video-bg.png");
|
background-size: 100%;
|
background-position: center;
|
background-repeat: no-repeat;
|
|
img {
|
width: 100%;
|
display: block;
|
}
|
|
.proportion {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
//font-size: 20px;
|
font-size: 1.04166vw;
|
font-weight: bold;
|
color: #00fcff;
|
text-shadow: 2px 2px 4px #152944;
|
}
|
}
|
|
.item-video-title {
|
text-align: center;
|
color: #dcf8ff;
|
//height: 32px;
|
//font-size: 13px;
|
//flex-shrink: 0;
|
//flex-grow: 0;
|
flex-shrink: 0;
|
flex-grow: 0;
|
height: 3.51851vh;
|
display: -webkit-box;
|
-webkit-line-clamp: 2; /* 显示的行数 */
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.is-scroll-bar::-webkit-scrollbar {
|
width: 4px;
|
}
|
|
.is-scroll-bar::-webkit-scrollbar-thumb {
|
border-radius: 0px;
|
box-shadow: inset 0 0 5px #1e75d9;
|
background-color: #1e75d9;
|
opacity: 0.2;
|
}
|
|
.is-scroll-bar::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px #0d172c;
|
border-radius: 0;
|
background-color: #0d172c;
|
}
|
|
@keyframes rotateImage {
|
from {
|
transform: rotate(0deg);
|
}
|
to {
|
transform: rotate(360deg);
|
}
|
}
|
|
@keyframes rotateCounterClockwise {
|
from {
|
transform: rotate(0deg);
|
}
|
to {
|
transform: rotate(-360deg); /* 注意这里是-360deg，表示逆时针旋转 */
|
}
|
}
|
|
.rotating-image {
|
width: 950px;
|
height: 950px;
|
position: absolute;
|
top: calc(50% - 450px);
|
left: calc(50% - 450px);
|
transform: skewX(-5deg) skewY(-10deg);
|
animation: rotateImage 36s linear infinite;
|
}
|
|
.rotating-image-in {
|
width: 900px;
|
height: 900px;
|
position: absolute;
|
top: calc(50% - 425px);
|
left: calc(50% - 425px);
|
animation: rotateCounterClockwise 48s linear infinite;
|
}
|
</style>
|
