<template>
|
<div class="new-page">
|
<div style="display: flex; justify-content: center">
|
<div class="header_box">
|
<div class="tabs-box">
|
<el-tabs v-model="activeName" @tab-click="tabChange">
|
<el-tab-pane v-for="item in testData1" :label="item.name" :name="item.value"
|
:key="item.value"></el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<div class="return-button" @click="returnPath">返回</div>
|
</div>
|
<div style="display: flex; justify-content: space-between">
|
<div class="left_box">
|
<div class="titleCard" style="height: 90px; width: 450px">
|
<div>运维考核大屏</div>
|
</div>
|
<div class="card" style="height: 622px">
|
<div class="card_header">
|
<div class="title">工单数据</div>
|
</div>
|
<div>
|
<ScreenData :workOrderData="workOrderData" :workOrderRegion="workOrderRegion"></ScreenData>
|
</div>
|
</div>
|
</div>
|
<div class="large_screen_box">
|
<NewMap></NewMap>
|
</div>
|
|
<div class="left_box">
|
<div class="card">
|
<div class="card_header">
|
<div class="title">设备数据</div>
|
</div>
|
<div>
|
<div class="device_data" v-for="(item, index) in deviceList" :key="index">
|
<img src="../../../assets/images/screen/lxicon.png" alt="" style="height: 25px" />
|
<div style="margin: 0 10px">{{ item.type }}</div>
|
<div class="data-info">
|
<div class="data-lable center">设备总数</div>
|
<div class="data-num type1 center">
|
<span v-roll>{{ item.totalNum }}</span>
|
</div>
|
</div>
|
<div class="data-info">
|
<div class="data-lable center">设备正常数</div>
|
<div class="data-num type2 center">
|
<span v-roll>{{ item.normalNum }}</span>
|
</div>
|
</div>
|
<div class="data-info">
|
<div class="data-lable center">设备异常数</div>
|
<div class="data-num type3 center">
|
<span v-roll>{{ item.errorNum }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="card">
|
<div class="card_header">
|
<div class="title">设备正常率</div>
|
<div style="margin: 10px 10px">
|
<ScreenTable :tableData="tableData"></ScreenTable>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="footer_box">
|
<div class="footer_card">
|
<div class="card_header">
|
<div class="title">人脸考核数据</div>
|
<div style="width: 600px; margin-left: -20px">
|
<FaceChart class="wrapper-item" :faceList="faceList"></FaceChart>
|
</div>
|
</div>
|
</div>
|
<div class="footer_card">
|
<div class="card_header">
|
<div class="titleCar">车辆考核数据</div>
|
</div>
|
<div style="
|
overflow: hidden;
|
overflow-x: auto;
|
margin-top: -9px;
|
height: 90%;
|
">
|
<div style="width: 750px">
|
<CarChart class="wrapper-item" :carList="carList"></CarChart>
|
</div>
|
</div>
|
</div>
|
<div class="footer_card">
|
<div class="card_header">
|
<div class="titleCar">视频考核数据</div>
|
</div>
|
<div style="
|
overflow: auto;
|
margin-top: -9px;
|
height: 90%;
|
">
|
<div style="width: 1100px">
|
<VideoChart class="wrapper-item" :videoList="videoList"></VideoChart>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import ScreenTable from "../components/screen-table/index.vue";
|
import ScreenMap from "../components/screen-wrapper/index.vue";
|
import ScreenMapThree from "../components/screen-map-three/index";
|
import FaceChart from "../components/screen-examine/components/face-chart.vue";
|
import CarChart from "../components/screen-examine/components/car-chart.vue";
|
import VideoChart from "../components/screen-examine/components/video-chart.vue";
|
import ScreenData from "../components/screen-data/index.vue";
|
import NewMap from "./components/newMap.vue";
|
import { getDeviceData, getWorkOrderData, getWorkOrderRegion, getNormalRate, checkFace, checkCar, checkVideo } from "@/api/newpage";
|
export default {
|
name: "Newpage",
|
components: {
|
ScreenTable,
|
ScreenMapThree,
|
ScreenMap,
|
FaceChart,
|
CarChart,
|
VideoChart,
|
ScreenData,
|
NewMap,
|
},
|
data() {
|
return {
|
isEnd: false,
|
activeName: "1",
|
testData1: [
|
{
|
name: "省厅数据",
|
value: "1",
|
},
|
{
|
name: "区县数据",
|
value: "2",
|
},
|
{
|
name: "公安部数据",
|
value: "3",
|
},
|
],
|
deviceList: [],
|
workOrderRegion: [],
|
carList: '',
|
faceList: '',
|
videoList: '',
|
workOrderData: {},
|
tableData: [],
|
};
|
},
|
mounted() {
|
this.getData();
|
},
|
methods: {
|
returnPath() {
|
this.$router.push("/index");
|
},
|
handleClick(tab, event) {
|
console.log(tab, event);
|
},
|
getData() {
|
getDeviceData()
|
.then((res) => {
|
this.deviceList = res.data;
|
})
|
.catch((err) => { });
|
getWorkOrderData()
|
.then((res) => {
|
this.workOrderData = res.data;
|
})
|
.catch((err) => { });
|
getWorkOrderRegion()
|
.then((res) => {
|
this.workOrderRegion = res.data;
|
})
|
.catch((err) => { });
|
this.getTableList();
|
checkCar()
|
.then((res) => {
|
this.carList = res.data;
|
})
|
.catch((err) => { });
|
checkFace()
|
.then((res) => {
|
this.faceList = res.data;
|
})
|
.catch((err) => { });
|
checkVideo()
|
.then((res) => {
|
this.videoList = res.data;
|
})
|
.catch((err) => { });
|
},
|
getTableList() {
|
getNormalRate(this.activeName)
|
.then((res) => {
|
this.tableData = res.data;
|
})
|
.catch((err) => { });
|
},
|
tabChange() {
|
this.getTableList()
|
}
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.center {
|
text-align: center;
|
}
|
|
.new-page {
|
color: rgb(255, 255, 255);
|
|
.header_box {
|
display: flex;
|
align-items: center;
|
margin-top: 10px;
|
margin-left: -25px;
|
}
|
|
.return-button {
|
position: absolute;
|
right: -5px;
|
top: 20px;
|
background: url("../../../assets/images/screen/backBt.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat !important;
|
background-position: center center !important;
|
padding: 15px 25px;
|
cursor: pointer;
|
font-size: 20px;
|
}
|
}
|
|
::v-deep .tabs-box {
|
margin-top: 5px;
|
|
.el-tabs__item {
|
color: #ffffff !important;
|
font-size: 26px;
|
}
|
|
.is-active {
|
color: #00b8ff !important;
|
// background: url("../../../assets/images/screen/button1.png");
|
// background-size: cover !important;
|
// background-repeat: no-repeat !important;
|
// background-position: center center !important;
|
background: linear-gradient(#00b8ff, #00b8ff) left top,
|
linear-gradient(#00b8ff, #00b8ff) left top,
|
linear-gradient(#00b8ff, #00b8ff) right top,
|
linear-gradient(#00b8ff, #00b8ff) right top,
|
linear-gradient(#00b8ff, #00b8ff) left bottom,
|
linear-gradient(#00b8ff, #00b8ff) left bottom,
|
linear-gradient(#00b8ff, #00b8ff) right bottom,
|
linear-gradient(#00b8ff, #00b8ff) right bottom;
|
background-repeat: no-repeat;
|
background-size: 0.1vw 0.5vw, 0.5vw 0.1vw;
|
}
|
}
|
|
::v-deep .el-input__inner {
|
background: rgba(67, 102, 155, 0.4) !important;
|
color: #4481dd;
|
border-color: #4481dd !important;
|
}
|
|
::v-deep .date-select .el-range-input {
|
background-color: transparent !important;
|
color: #4481dd;
|
}
|
|
::v-deep .date-select .el-date-editor .el-range-separator {
|
color: #4481dd !important;
|
}
|
|
// }
|
/* 去掉tabs标签栏下的下划线 */
|
::v-deep .el-tabs__nav-wrap::after {
|
position: static !important;
|
// background-color: #fff;
|
}
|
|
::v-deep .el-tabs__active-bar {
|
width: 0 !important;
|
}
|
|
::v-deep .el-tabs__item {
|
margin: 5px 30px;
|
padding: 0px 25px !important;
|
background: linear-gradient(#ffffff, #ffffff) left top,
|
linear-gradient(#ffffff, #fff) left top,
|
linear-gradient(#ffffff, #ffffff) right top,
|
linear-gradient(#ffffff, #ffffff) right top,
|
linear-gradient(#ffffff, #ffffff) left bottom,
|
linear-gradient(#ffffff, #ffffff) left bottom,
|
linear-gradient(#ffffff, #ffffff) right bottom,
|
linear-gradient(#ffffff, #ffffff) right bottom;
|
background-repeat: no-repeat;
|
background-size: 0.1vw 0.5vw, 0.5vw 0.1vw;
|
// background-color: rgba(65, 136, 242, 0.1);
|
// background: url("../../../assets/images/screen/button.png");
|
// background-size: 100% 100%;
|
// background-repeat: no-repeat !important;
|
// background-position: center center !important;
|
}
|
|
.left_box {
|
width: 460px;
|
position: relative;
|
|
.card {
|
height: 300px;
|
width: 460px;
|
margin: 20px 0;
|
|
.card_header {
|
height: 40px;
|
}
|
}
|
|
.titleCard {
|
// background: url("../../../assets/images/screen/titleBg.png");
|
// background-size: 100% 100%;
|
// background-repeat: no-repeat !important;
|
// background-position: center center !important;
|
font-size: 40px;
|
font-weight: bold;
|
position: absolute;
|
top: -60px;
|
left: 10px;
|
}
|
}
|
|
.large_screen_box {
|
width: 920px;
|
height: 621px;
|
margin: 20px 0;
|
background: url("../../../assets/images/screen/bigBg.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat !important;
|
background-position: center center !important;
|
}
|
|
.card {
|
background: url("../../../assets/images/screen/cardBg1.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat !important;
|
background-position: center center !important;
|
}
|
|
.card_header {
|
background: url("../../../assets/images/screen/headerBg.png");
|
background-size: 100% 100%;
|
background-repeat: no-repeat !important;
|
background-position: center center !important;
|
}
|
|
.footer_box {
|
width: 100%;
|
height: 320px;
|
background: rgba(90, 125, 179, 0.1) !important;
|
display: flex;
|
justify-content: space-between;
|
border: rgba(84, 132, 203, 0.4) 2px solid;
|
|
.footer_card {
|
width: 33%;
|
margin: 5px 0;
|
|
.card_header {
|
height: 40px;
|
|
.titleCar {
|
margin-left: 20px;
|
padding-top: 5px;
|
color: #fff;
|
letter-spacing: 2px;
|
font-size: 20px;
|
font-style: italic;
|
}
|
}
|
}
|
}
|
|
.title {
|
margin-left: 20px;
|
padding-top: 5px;
|
color: #fff;
|
letter-spacing: 2px;
|
font-size: 20px;
|
font-style: italic;
|
}
|
|
.data-info {
|
flex: 1;
|
color: #5b83bd;
|
font-size: 16px;
|
|
.data-num {
|
margin-top: 5px;
|
font-size: 24px;
|
color: #fff;
|
}
|
|
.type1 {
|
color: #287cfa;
|
}
|
|
.type2 {
|
color: #0cd81d;
|
}
|
|
.type3 {
|
color: #e20c0c;
|
}
|
}
|
|
.device_data {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin: 20px;
|
}
|
</style>
|
