<template>
|
<div class="examine-container">
|
<wrapper-title
|
:title="'考核数据'"
|
:path="'/examine/default'"
|
></wrapper-title>
|
<div class="examine-content">
|
<div class="examine-wrapper">
|
<div class="select-container">
|
<div
|
class="select-item"
|
:class="{ 'active-item': activeIndex === 0 }"
|
@click="clickItem(0)"
|
>
|
<div class="icon-container">
|
<svg
|
class="icon"
|
width="64px"
|
height="64.00px"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
>
|
<path
|
fill="#ffffff"
|
d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z"
|
/>
|
</svg>
|
</div>
|
<div class="label">人脸考核</div>
|
</div>
|
<div
|
class="select-item"
|
:class="{ 'active-item': activeIndex === 1 }"
|
@click="clickItem(1)"
|
>
|
<div class="icon-container">
|
<svg
|
class="icon"
|
width="64px"
|
height="64.00px"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
>
|
<path
|
fill="#ffffff"
|
d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z"
|
/>
|
</svg>
|
</div>
|
<div class="label">车辆考核</div>
|
</div>
|
<div
|
class="select-item"
|
:class="{ 'active-item': activeIndex === 2 }"
|
@click="clickItem(2)"
|
>
|
<div class="icon-container">
|
<svg
|
class="icon"
|
width="64px"
|
height="64.00px"
|
viewBox="0 0 1024 1024"
|
version="1.1"
|
xmlns="http://www.w3.org/2000/svg"
|
>
|
<path
|
fill="#ffffff"
|
d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z"
|
/>
|
<path
|
fill="#ffffff"
|
d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z"
|
/>
|
</svg>
|
</div>
|
<div class="label">视频考核</div>
|
</div>
|
</div>
|
<examine-chart class="wrapper-item"></examine-chart>
|
<!-- <examine-table class="wrapper-item"></examine-table> -->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import WrapperTitle from "../wrapper-title/index";
|
import faceChart from "./components/face-chart";
|
import carChart from "./components/car-chart";
|
import videoChart from "./components/video-chart";
|
import ExamineTable from "./components/examine-table";
|
export default {
|
name: "ScreenExamine",
|
components: {
|
WrapperTitle,
|
faceChart,
|
carChart,
|
videoChart,
|
ExamineTable,
|
},
|
data() {
|
return {
|
activeIndex: 0,
|
};
|
},
|
methods: {
|
clickItem(index) {
|
this.activeIndex = index;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.examine-container {
|
flex: 1;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 20px;
|
}
|
|
.examine-content {
|
width: 100%;
|
flex: 1;
|
position: relative;
|
|
.examine-wrapper {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
}
|
|
.wrapper-item {
|
background: url("../../../../assets/images/screen/cardBg.png");
|
background-size: cover !important;
|
background-repeat: no-repeat !important;
|
background-position: center center !important;
|
margin-bottom: 20px;
|
|
&:last-of-type {
|
margin-bottom: 0;
|
}
|
}
|
|
.select-container {
|
width: 100%;
|
display: flex;
|
background: rgba(67, 102, 155, 0.3);
|
border: 1px solid rgba(47, 91, 157, 0.8);
|
border-bottom: 0;
|
|
.select-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
padding: 10px 0;
|
color: #fff;
|
cursor: pointer;
|
&:hover {
|
background-color: rgba(38, 86, 158, 0.6);
|
}
|
}
|
.active-item {
|
background-color: rgba(38, 86, 158, 0.6);
|
}
|
}
|
</style>
|
