wjl61901
1 year ago
parent
2704c38b58
commit
011cc6f8a4
@ -0,0 +1,4 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export const getResources = () => request.post('/base/poaching/overviewResources')
|
||||||
|
export const getStatistics = () => request.post('/base/poaching/personnelStatistics')
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export const listHunter = (params) => request.get('/base/transitHuntersUserRecord', { params })
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export const listUser = (params) => request.get('/base/metaHuntersInfo', { params })
|
||||||
|
export const addUser = (data) => request.post('/base/metaHuntersInfo', data)
|
||||||
|
export const editUser = (data) => request.put('/base/metaHuntersInfo', data)
|
||||||
|
export const delUser = (idList) => request.delete('/base/metaHuntersInfo', { params: { idList: idList.join(',') } })
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
export const listVehicle = (params) => request.get('/base/transitHuntersVehicleRecord', { params })
|
||||||
|
export const addVehicle = (data) => request.post('/base/transitHuntersVehicleRecord', data)
|
||||||
|
export const editVehicle = (data) => request.put('/base/transitHuntersVehicleRecord', data)
|
||||||
|
export const delVehicle = (idList) => request.delete('/base/transitHuntersVehicleRecord', { params: { idList: idList.join(',') } })
|
||||||
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 4.0 MiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 685 B |
|
After Width: | Height: | Size: 737 B |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 422 B |
|
After Width: | Height: | Size: 622 B |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 503 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1019 B |
|
After Width: | Height: | Size: 912 B |
|
After Width: | Height: | Size: 690 B |
|
After Width: | Height: | Size: 736 B |
|
After Width: | Height: | Size: 483 B |
|
After Width: | Height: | Size: 478 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 688 B |
@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="icon"
|
||||||
|
class="img-button"
|
||||||
|
:class="type && 'img-button_' + type"
|
||||||
|
:disabled="disabled"
|
||||||
|
size="mini"
|
||||||
|
@click="$emit('click')"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
type: String,
|
||||||
|
disabled: Boolean,
|
||||||
|
icon: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.img-button {
|
||||||
|
height: 3.6vh;
|
||||||
|
background: #02255c;
|
||||||
|
box-shadow: inset 0px 0px 6px 0px #009cfe;
|
||||||
|
border-radius: 4px 8px 4px 4px;
|
||||||
|
border: 1px solid rgba(54, 181, 255, 1);
|
||||||
|
|
||||||
|
&.img-button_light {
|
||||||
|
background: linear-gradient(270deg, rgba(0, 142, 224, 0) 0%, #008ee0 49%, rgba(0, 142, 224, 0) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card flex-col">
|
||||||
|
<div class="card_close" @click="handleClose"></div>
|
||||||
|
<div class="card_body">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
back: String
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClose() {
|
||||||
|
this.back && this.$router.push(this.back)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.card {
|
||||||
|
position: relative;
|
||||||
|
background-image: url(@/assets/components/card-bg.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 3vw;
|
||||||
|
margin-right: 3vw;
|
||||||
|
margin-bottom: 5vh;
|
||||||
|
padding: 4vh 2vw;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.card_body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card_close {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
right: 1.2vw;
|
||||||
|
top: 2.4vh;
|
||||||
|
width: 1.2vw;
|
||||||
|
height: 2.4vh;
|
||||||
|
background-image: url(@/assets/components/close.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<img class="oss-img" :src="oss + src" />
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'OssImg',
|
||||||
|
props: {
|
||||||
|
src: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
oss: process.env.VUE_APP_OSS
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.oss-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card-table">
|
||||||
|
<div class="card-item" v-for="(item, index) in rows" :key="index">
|
||||||
|
<el-checkbox @change="handleChecked($event, item.id)" :key="item.id"></el-checkbox>
|
||||||
|
<div class="fy-center">
|
||||||
|
<div style="height: 14vh; width: 5vw">
|
||||||
|
<oss-img :src="item.pic" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<div class="fy-center">
|
||||||
|
<img class="img-icon" src="@/assets/hunting/name.png" />
|
||||||
|
<div class="item-label">人员姓名</div>
|
||||||
|
<div>{{ item.hunterName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center mt-10">
|
||||||
|
<img class="img-icon" src="@/assets/hunting/id-card.png" />
|
||||||
|
<div class="item-label">证件号码</div>
|
||||||
|
<div style="color: #66b1ff; cursor: pointer" @click="$emit('click', item.idCard)">{{ item.idCard }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center mt-10">
|
||||||
|
<img class="img-icon" src="@/assets/hunting/involved.png" />
|
||||||
|
<div class="item-label">涉案类型</div>
|
||||||
|
<div>{{ item.caseSituation }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center mt-10">
|
||||||
|
<img class="img-icon" src="@/assets/hunting/address.png" />
|
||||||
|
<div class="item-label">户籍地址</div>
|
||||||
|
<div class="line-1">{{ item.habitationAddress }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center mt-10">
|
||||||
|
<img class="img-icon" src="@/assets/hunting/time.png" />
|
||||||
|
<div class="item-label">登记时间</div>
|
||||||
|
<div class="line-1">{{ item.registrationTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import OssImg from '@/components/img/OssImg.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
OssImg
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
rows: Array,
|
||||||
|
selections: Array
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checked: new Set()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChecked(checked, id) {
|
||||||
|
if (checked) {
|
||||||
|
this.checked.add(id)
|
||||||
|
} else {
|
||||||
|
this.checked.delete(id)
|
||||||
|
}
|
||||||
|
this.$emit('select', [...this.checked])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
.card-table {
|
||||||
|
flex: 1;
|
||||||
|
color: white;
|
||||||
|
overflow: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-rows: min-content;
|
||||||
|
grid-gap: 10px;
|
||||||
|
.card-item {
|
||||||
|
background: linear-gradient(180deg, rgba(0, 97, 224, 0.3) 0%, rgba(0, 71, 224, 0) 49%, rgba(0, 97, 224, 0.25) 100%);
|
||||||
|
border: 1px solid;
|
||||||
|
border-image: linear-gradient(153deg, rgba(127, 207, 244, 1), rgba(48, 184, 246, 0.7)) 1 1;
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
position: relative;
|
||||||
|
padding: 1vh 0.5vw;
|
||||||
|
.el-checkbox {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 10px;
|
||||||
|
}
|
||||||
|
.img-icon {
|
||||||
|
height: 2vh;
|
||||||
|
margin: 0 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-10 {
|
||||||
|
margin-top: 1vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-label {
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<card class="hunting-control" back="/hunting">
|
||||||
|
<el-form class="query-form" ref="form" :model="form" inline size="mini">
|
||||||
|
<el-form-item label="人员姓名：">
|
||||||
|
<el-input v-model="form.hunterName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="证件号码：">
|
||||||
|
<el-input v-model="form.idCard"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系方式：">
|
||||||
|
<el-input v-model="form.phone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="登记时间：" style="width: 34vw">
|
||||||
|
<el-date-picker
|
||||||
|
value-format="yyyyMMddHHmmss"
|
||||||
|
v-model="dateTimeRange"
|
||||||
|
type="datetimerange"
|
||||||
|
range-separator="至"
|
||||||
|
start-placeholder="开始日期"
|
||||||
|
end-placeholder="结束日期"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="详细地址：" style="width: 34vw">
|
||||||
|
<el-input v-model="form.habitationAddress"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="户籍详址：" style="width: 34vw">
|
||||||
|
<el-input v-model="form.houseHoldAddress"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="actions">
|
||||||
|
<div>
|
||||||
|
<img-button icon="el-icon-plus" @click="handleAdd"> 新增 </img-button>
|
||||||
|
<img-button icon="el-icon-edit" @click="handleAdd" :disabled="selections.length != 1"> 编辑 </img-button>
|
||||||
|
<img-button icon="el-icon-delete" @click="handleAdd" :disabled="!selections.length"> 删除 </img-button>
|
||||||
|
<img-button icon="el-icon-edit" @click="handleAdd"> 撤控 </img-button>
|
||||||
|
<img-button icon="el-icon-edit" @click="handleAdd"> 导入 </img-button>
|
||||||
|
<img-button icon="el-icon-edit" @click="handleAdd"> 导出 </img-button>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center">
|
||||||
|
<img v-if="listType == 0" src="@/assets/hunting/record-list-active.png" @click="listType = 0" />
|
||||||
|
<img v-else src="@/assets/hunting/record-list.png" @click="listType = 0" />
|
||||||
|
<img v-if="listType == 1" src="@/assets/hunting/card-list-active.png" @click="listType = 1" />
|
||||||
|
<img v-else src="@/assets/hunting/card-list.png" @click="listType = 1" />
|
||||||
|
<img-button icon="el-icon-search" @click="handleQuery"> 搜索 </img-button>
|
||||||
|
<img-button icon="el-icon-search" @click="handleReset"> 重置 </img-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<card-table v-if="listType == 1" :rows="rows" @select="handleSelections" @click="toDetail"></card-table>
|
||||||
|
<el-table v-else :data="rows" style="width: 100%" @select="handleSelections" row-key="id">
|
||||||
|
<el-table-column label="序号" type="selection"> </el-table-column>
|
||||||
|
<el-table-column label="照片" width="120">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<oss-img :src="scope.row.pic" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="hunterName" label="姓名" width="150"> </el-table-column>
|
||||||
|
<el-table-column prop="idCard" label="证件号码" width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div style="color: #66b1ff; cursor: pointer" @click="toDetail(scope.row.idCard)">{{ scope.row.idCard }}</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="phone" label="联系方式" width="150"> </el-table-column>
|
||||||
|
<el-table-column prop="habitationAddress" label="现住详址" width="300"> </el-table-column>
|
||||||
|
<el-table-column prop="houseHoldAddress" label="户籍详址" width="400"> </el-table-column>
|
||||||
|
<el-table-column prop="registrationTime" label="登记时间" width="200"> </el-table-column>
|
||||||
|
<el-table-column prop="address" label="操作">
|
||||||
|
<el-button type="warning" size="mini">撤控</el-button>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<pagination style="margin-top: 2vh" :total="total" @change="handleQuery"></pagination>
|
||||||
|
</card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Card from '@/components/card'
|
||||||
|
import ImgButton from '@/components/button/ImgButton.vue'
|
||||||
|
import Pagination from '@/components/pagination'
|
||||||
|
import OssImg from '@/components/img/OssImg.vue'
|
||||||
|
import CardTable from './components/CardTable.vue'
|
||||||
|
import { listUser } from '@/api/hunting/user'
|
||||||
|
export default {
|
||||||
|
name: 'HuntingControl',
|
||||||
|
components: {
|
||||||
|
Card,
|
||||||
|
ImgButton,
|
||||||
|
Pagination,
|
||||||
|
CardTable,
|
||||||
|
OssImg
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {},
|
||||||
|
options: [],
|
||||||
|
show: false,
|
||||||
|
rows: [],
|
||||||
|
total: 0,
|
||||||
|
selections: [],
|
||||||
|
listType: 1,
|
||||||
|
dateTimeRange: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
async handleQuery(page) {
|
||||||
|
Object.assign(this.form, page)
|
||||||
|
this.form.firstTime = this.dateTimeRange[0]
|
||||||
|
this.form.endTime = this.dateTimeRange[1]
|
||||||
|
for (let key in this.form) {
|
||||||
|
if (!this.form[key]) {
|
||||||
|
delete this.form[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const res = await listUser(this.form)
|
||||||
|
this.total = res.total
|
||||||
|
this.rows = res.rows
|
||||||
|
},
|
||||||
|
handleReset() {
|
||||||
|
this.dateTimeRange = []
|
||||||
|
for (let key in this.form) {
|
||||||
|
delete this.form[key]
|
||||||
|
}
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
handleSelections(val) {
|
||||||
|
this.selections = val
|
||||||
|
},
|
||||||
|
toDetail(idCard) {
|
||||||
|
this.$router.push({ name: 'huntingHunter', query: { idCard } })
|
||||||
|
},
|
||||||
|
handleAdd() {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.hunting-control {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
img {
|
||||||
|
color: white;
|
||||||
|
height: 4vh;
|
||||||
|
margin-right: 0.3vw;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.show-more {
|
||||||
|
margin-left: 2.4vw;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.el-table {
|
||||||
|
background-color: rgba(2, 20, 42, 0.2);
|
||||||
|
&::before {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
height: 5vh;
|
||||||
|
background-color: rgba(0, 156, 254, 0.2);
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
tr {
|
||||||
|
color: #ecf4f9;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||||
|
background-color: rgba(0, 156, 254, 0.45);
|
||||||
|
}
|
||||||
|
.el-table td.el-table__cell,
|
||||||
|
.el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid rgba(16, 116, 174, 0.42);
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
padding-bottom: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,431 @@
|
|||||||
|
<!-- 重点人员 -->
|
||||||
|
<template>
|
||||||
|
<div class="key_body">
|
||||||
|
<!-- 模块头部 -->
|
||||||
|
<div class="key_title fy-center">
|
||||||
|
<img src="@/assets/hunting/icon.png" />
|
||||||
|
<div class="title_text">{{ title_text }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 模块内容 -->
|
||||||
|
<div class="key_box">
|
||||||
|
<!-- 饼图 -->
|
||||||
|
<div class="echart_body">
|
||||||
|
<div class="echart_body_left">
|
||||||
|
<div class="all_person_num">
|
||||||
|
<!-- 占位 -->
|
||||||
|
<div class="num_blank"></div>
|
||||||
|
<div class="num_text">非法狩猎人员</div>
|
||||||
|
<div class="num_value">{{ importpeople.ffslryCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="echart_box" id="charts"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 右边图例展示 -->
|
||||||
|
<div class="echart_body_right">
|
||||||
|
<div class="num_item" v-for="(item, index) in seriesData" :key="index">
|
||||||
|
<!-- 图例颜色 -->
|
||||||
|
<div class="num_color">
|
||||||
|
<div class="color_box" :style="{ background: colors[index] }"></div>
|
||||||
|
</div>
|
||||||
|
<!-- 图例文字 -->
|
||||||
|
<div class="num_text">{{ item.name }}</div>
|
||||||
|
<div class="num_proportion">{{ item.value }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<div class="roll_body">
|
||||||
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||||
|
<li v-for="item in roll_list" :key="item.id">
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic">
|
||||||
|
<img :src="item.userPic" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<!-- // TODO 人员标签暂无 -->
|
||||||
|
<div class="person_type one_type">非法狩猎</div>
|
||||||
|
<!-- 信息展示 -->
|
||||||
|
<div class="right_text">
|
||||||
|
<div class="right_text_item">人员姓名 :</div>
|
||||||
|
<div class="right_text_item">联系电话 :</div>
|
||||||
|
<div class="right_text_item">证件号码 :</div>
|
||||||
|
<div class="right_text_item">户籍地址 :</div>
|
||||||
|
<div class="right_text_item">现住地址 :</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item">{{ item.userName }}</div>
|
||||||
|
<div class="right_value_item">{{ item.phone }}</div>
|
||||||
|
<div class="right_value_item" :title="item.idCard">
|
||||||
|
{{ item.idCard }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.houseHoldAddress">
|
||||||
|
{{ item.houseHoldAddress }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.habitationAddress">
|
||||||
|
{{ item.habitationAddress }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import EleResize from '@/utils/esresize'
|
||||||
|
import { getStatistics } from '@/api/hunting/home'
|
||||||
|
import { listUser } from '@/api/hunting/user'
|
||||||
|
export default {
|
||||||
|
name: 'KeyPerson',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// * 模块标题
|
||||||
|
title_text: '人员统计',
|
||||||
|
// * 重点人员数据
|
||||||
|
importpeople: {},
|
||||||
|
// * 滚动数据
|
||||||
|
roll_list: [],
|
||||||
|
// * 动画开关
|
||||||
|
animateUp: false,
|
||||||
|
// * 定时器ID
|
||||||
|
timer: null,
|
||||||
|
seriesData: [],
|
||||||
|
colors: ['#A357FF', '#009CFE', '#00F5FF', '#FFC426', '#FF6200']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.init_charts()
|
||||||
|
this.timer = setInterval(this.scrollAnimate, 1500)
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.onkeyPersonnelAPI()
|
||||||
|
this.onMetaImpUserInfo()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init_charts() {
|
||||||
|
let charts = document.getElementById('charts')
|
||||||
|
let resize_div = document.getElementById('charts')
|
||||||
|
let myChart = echarts.init(charts)
|
||||||
|
// echarts表自适应
|
||||||
|
EleResize.on(resize_div, () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = []
|
||||||
|
const count = this.importpeople.ffslryCount
|
||||||
|
for (let key in this.importpeople) {
|
||||||
|
if (key != 'ffslryCount') {
|
||||||
|
for (let name in this.importpeople[key]) {
|
||||||
|
data.push({ value: Math.round((count * parseInt(this.importpeople[key][name])) / 100), name: key })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.seriesData = data
|
||||||
|
|
||||||
|
let option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
confine: true
|
||||||
|
},
|
||||||
|
// legend: {
|
||||||
|
// orient: "vertical",
|
||||||
|
// left: "left",
|
||||||
|
// },
|
||||||
|
color: this.colors,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '非法狩猎人员',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['50%', '90%'],
|
||||||
|
data,
|
||||||
|
// data: [
|
||||||
|
// { value: 11915, name: '涉稳人员' },
|
||||||
|
// { value: 70135, name: '涉军访人员' },
|
||||||
|
// { value: 20180, name: '治安防控人员' },
|
||||||
|
// { value: 31484, name: '内保重点人员' },
|
||||||
|
// { value: 11484, name: '其他利益群体' }
|
||||||
|
// ],
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
option && myChart.setOption(option)
|
||||||
|
},
|
||||||
|
// 滚动播放
|
||||||
|
scrollAnimate() {
|
||||||
|
this.animateUp = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.roll_list.push(this.roll_list[0])
|
||||||
|
this.roll_list.shift()
|
||||||
|
this.animateUp = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
//重点人员
|
||||||
|
async onkeyPersonnelAPI() {
|
||||||
|
const res = await getStatistics()
|
||||||
|
this.importpeople = res.data
|
||||||
|
this.init_charts()
|
||||||
|
console.log(this.importpeople, '重点人员数据')
|
||||||
|
},
|
||||||
|
//重点人员信息(轮播)
|
||||||
|
async onMetaImpUserInfo() {
|
||||||
|
const res = await listUser()
|
||||||
|
this.roll_list = res.rows
|
||||||
|
console.log(this.roll_list, '重点人员信息')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.key_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 71.5vh;
|
||||||
|
.key_title {
|
||||||
|
width: 20vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
padding-left: 1vw;
|
||||||
|
padding-top: 1vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.key_box {
|
||||||
|
width: 20vw;
|
||||||
|
height: 68vh;
|
||||||
|
background: url('~@/assets/coastalMap/box_back02.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.echart_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 20vh;
|
||||||
|
// background: #0b4672;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.echart_body_left {
|
||||||
|
width: 9vw;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
// background: #217fc8;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.all_person_num {
|
||||||
|
width: 8vw;
|
||||||
|
height: 4vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_all_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.num_blank {
|
||||||
|
width: 1vw;
|
||||||
|
height: 4vh;
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 4vh;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.num_value {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #00f5ff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart_box {
|
||||||
|
width: 9vw;
|
||||||
|
height: 16vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart_body_right {
|
||||||
|
width: 9vw;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
.num_item {
|
||||||
|
width: 9vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.num_color {
|
||||||
|
width: 1vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.color_box {
|
||||||
|
width: 0.5vw;
|
||||||
|
height: 1vh;
|
||||||
|
}
|
||||||
|
.one {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
background: #009cfe;
|
||||||
|
}
|
||||||
|
.three {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.four {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.five {
|
||||||
|
background: #ff6200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
width: 6vw;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
}
|
||||||
|
.num_proportion {
|
||||||
|
width: 3vw;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #00f5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 48vh;
|
||||||
|
// background: #00f5ff;
|
||||||
|
overflow: hidden;
|
||||||
|
.marquee-list {
|
||||||
|
width: 20vw;
|
||||||
|
height: 48vh;
|
||||||
|
padding: 0px;
|
||||||
|
li {
|
||||||
|
margin-left: 2%;
|
||||||
|
margin-right: 2%;
|
||||||
|
width: 96%;
|
||||||
|
height: 15vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 1vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.roll_item_left {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
.roll_item_pic {
|
||||||
|
width: 5vw;
|
||||||
|
height: 100%;
|
||||||
|
background: #0b4672;
|
||||||
|
}
|
||||||
|
.roll_item_btn {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #fff;
|
||||||
|
background: #00f5ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_btn.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_item_right {
|
||||||
|
width: 13vw;
|
||||||
|
height: 13vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
.person_type {
|
||||||
|
position: absolute;
|
||||||
|
width: 3vw;
|
||||||
|
height: 2vh;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
color: #061122;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
}
|
||||||
|
.one_type {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.two_type {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.three_type {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.right_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_text_item {
|
||||||
|
width: 5vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_value {
|
||||||
|
width: 8vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_value_item {
|
||||||
|
width: 8vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-up {
|
||||||
|
transition: all 0.8s ease-in-out;
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,105 @@
|
|||||||
|
<!-- 资源概况 -->
|
||||||
|
<template>
|
||||||
|
<div class="resource_body">
|
||||||
|
<!-- 模块头部 -->
|
||||||
|
<div class="resource_title fy-center">
|
||||||
|
<img src="@/assets/hunting/icon.png" />
|
||||||
|
<div class="title_text">{{ title_text }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 模块内容 -->
|
||||||
|
<div class="resource_box">
|
||||||
|
<div class="resource_box_item one">
|
||||||
|
<div class="number">{{ resourceData.personCount }}</div>
|
||||||
|
<div>非法狩猎人员</div>
|
||||||
|
</div>
|
||||||
|
<div class="resource_box_item two">
|
||||||
|
<div class="number">{{ resourceData.deviceCount }}</div>
|
||||||
|
<div>感知设备</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { get_person_num } from '@/api/coastalMap/resource'
|
||||||
|
// import { getToken } from '@/utils/auth'
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
resourceData: {
|
||||||
|
required: true,
|
||||||
|
type: Object
|
||||||
|
}
|
||||||
|
},
|
||||||
|
name: 'ResouRce',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title_text: '资源概况'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// this.add()
|
||||||
|
// this.get_person()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// async add() {
|
||||||
|
// let res = await getToken()
|
||||||
|
// console.log('resdd',res);
|
||||||
|
// },
|
||||||
|
async get_person() {
|
||||||
|
let params = {}
|
||||||
|
let res = await get_person_num(params)
|
||||||
|
console.log('res', res)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.resource_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 17.5vh;
|
||||||
|
.resource_title {
|
||||||
|
width: 20vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
padding-left: 1vw;
|
||||||
|
padding-top: 1vh;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.resource_box {
|
||||||
|
width: 20vw;
|
||||||
|
height: 12vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.resource_box_item {
|
||||||
|
background: url(@/assets/hunting/dizuo2.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
width: 9vw;
|
||||||
|
height: 100%;
|
||||||
|
margin-left: 0.5vw;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
margin-top: 1vh;
|
||||||
|
margin-bottom: 1vh;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #ecf4f9;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.number {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #00f5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,345 @@
|
|||||||
|
<!-- 重点人员 -->
|
||||||
|
<template>
|
||||||
|
<div class="key_body">
|
||||||
|
<!-- 模块头部 -->
|
||||||
|
<div class="key_title fy-center">
|
||||||
|
<img src="@/assets/hunting/icon.png" />
|
||||||
|
<div class="title_text">{{ title_text }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 模块内容 -->
|
||||||
|
<div class="key_box">
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<div class="roll_body">
|
||||||
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||||
|
<li v-for="item in roll_list" :key="item.id">
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic">
|
||||||
|
<img :src="item.userPic" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<!-- // TODO 人员标签暂无 -->
|
||||||
|
<div v-if="item.per_type == '1'" class="person_type one_type">
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="item.per_type == '2'"
|
||||||
|
class="person_type two_type"
|
||||||
|
>
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-else-if="item.per_type == '3'"
|
||||||
|
class="person_type three_type"
|
||||||
|
>
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<!-- 信息展示 -->
|
||||||
|
<div class="right_text">
|
||||||
|
<div class="right_text_item">车主姓名 :</div>
|
||||||
|
<div class="right_text_item">证件号码 :</div>
|
||||||
|
<div class="right_text_item">车牌号码 :</div>
|
||||||
|
<div class="right_text_item">抓拍时间 :</div>
|
||||||
|
<div class="right_text_item">滞留时间 :</div>
|
||||||
|
<div class="right_text_item">抓拍地点 :</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item">{{ item.ownerName }}</div>
|
||||||
|
<div class="right_value_item">{{ item.idCard }}</div>
|
||||||
|
<div class="right_value_item" :title="item.plateNo">
|
||||||
|
{{ item.plateNo }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.passTime">
|
||||||
|
{{ item.passTime }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item">{{ item.ownerName }}</div>
|
||||||
|
<div class="right_value_item" :title="item.deviceAddress">
|
||||||
|
{{ item.deviceAddress }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { listVehicle } from '@/api/hunting/vehicle'
|
||||||
|
export default {
|
||||||
|
name: 'KeyPerson',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// * 模块标题
|
||||||
|
title_text: '车辆预警',
|
||||||
|
// * 重点人员数据
|
||||||
|
importpeople: {},
|
||||||
|
// * 滚动数据
|
||||||
|
roll_list: [],
|
||||||
|
// * 动画开关
|
||||||
|
animateUp: false,
|
||||||
|
// * 定时器ID
|
||||||
|
timer: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// this.timer = setInterval(this.scrollAnimate, 1500)
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.onkeyPersonnelAPI()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 滚动播放
|
||||||
|
scrollAnimate() {
|
||||||
|
this.animateUp = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.roll_list.push(this.roll_list[0])
|
||||||
|
this.roll_list.shift()
|
||||||
|
this.animateUp = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
//重点人员
|
||||||
|
async onkeyPersonnelAPI() {
|
||||||
|
const res = await listVehicle()
|
||||||
|
this.roll_list = res.rows
|
||||||
|
console.log(this.importpeople, '重点人员数据')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.key_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 44vh;
|
||||||
|
overflow: hidden;
|
||||||
|
.key_title {
|
||||||
|
width: 20vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
padding-left: 1vw;
|
||||||
|
padding-top: 1vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.key_box {
|
||||||
|
width: 20vw;
|
||||||
|
height: 100%;
|
||||||
|
.echart_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 20vh;
|
||||||
|
// background: #0b4672;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.echart_body_left {
|
||||||
|
width: 9vw;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
// background: #217fc8;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.all_person_num {
|
||||||
|
width: 8vw;
|
||||||
|
height: 4vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_all_back.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.num_blank {
|
||||||
|
width: 1vw;
|
||||||
|
height: 4vh;
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 4vh;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.num_value {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #00f5ff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart_box {
|
||||||
|
width: 9vw;
|
||||||
|
height: 16vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart_body_right {
|
||||||
|
width: 9vw;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
.num_item {
|
||||||
|
width: 9vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.num_color {
|
||||||
|
width: 1vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.color_box {
|
||||||
|
width: 0.5vw;
|
||||||
|
height: 1vh;
|
||||||
|
}
|
||||||
|
.one {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
background: #009cfe;
|
||||||
|
}
|
||||||
|
.three {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.four {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.five {
|
||||||
|
background: #ff6200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
width: 6vw;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
}
|
||||||
|
.num_proportion {
|
||||||
|
width: 3vw;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #00f5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 48vh;
|
||||||
|
// background: #00f5ff;
|
||||||
|
overflow: hidden;
|
||||||
|
.marquee-list {
|
||||||
|
width: 20vw;
|
||||||
|
height: 48vh;
|
||||||
|
padding: 0px;
|
||||||
|
li {
|
||||||
|
margin-left: 2%;
|
||||||
|
margin-right: 2%;
|
||||||
|
width: 96%;
|
||||||
|
height: 18vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_back.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 1vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.roll_item_left {
|
||||||
|
width: 5vw;
|
||||||
|
height: 16vh;
|
||||||
|
.roll_item_pic {
|
||||||
|
width: 5vw;
|
||||||
|
height: 100%;
|
||||||
|
background: #0b4672;
|
||||||
|
}
|
||||||
|
.roll_item_btn {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #fff;
|
||||||
|
background: #00f5ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_btn.png')
|
||||||
|
no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_item_right {
|
||||||
|
width: 13vw;
|
||||||
|
height: 16vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
.person_type {
|
||||||
|
position: absolute;
|
||||||
|
width: 3vw;
|
||||||
|
height: 2vh;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
color: #061122;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
}
|
||||||
|
.one_type {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.two_type {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.three_type {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.right_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 14vh;
|
||||||
|
.right_text_item {
|
||||||
|
width: 5vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_value {
|
||||||
|
width: 8vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_value_item {
|
||||||
|
width: 8vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-up {
|
||||||
|
transition: all 0.8s ease-in-out;
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,334 @@
|
|||||||
|
<!-- 重点人员 -->
|
||||||
|
<template>
|
||||||
|
<div class="key_body">
|
||||||
|
<!-- 模块头部 -->
|
||||||
|
<div class="key_title fy-center">
|
||||||
|
<img src="@/assets/hunting/icon.png" />
|
||||||
|
<div class="title_text">{{ title_text }}</div>
|
||||||
|
</div>
|
||||||
|
<!-- 模块内容 -->
|
||||||
|
<div class="key_box">
|
||||||
|
<!-- 滚动区域 -->
|
||||||
|
<div class="roll_body">
|
||||||
|
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
|
||||||
|
<li v-for="item in roll_list" :key="item.id">
|
||||||
|
<div class="roll_item_left">
|
||||||
|
<div class="roll_item_pic">
|
||||||
|
<img :src="item.userPic" alt="" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="roll_item_right">
|
||||||
|
<!-- // TODO 人员标签暂无 -->
|
||||||
|
<div v-if="item.per_type == '1'" class="person_type one_type">
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="item.per_type == '2'" class="person_type two_type">
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<div v-else-if="item.per_type == '3'" class="person_type three_type">
|
||||||
|
{{ item.type_text }}
|
||||||
|
</div>
|
||||||
|
<!-- 信息展示 -->
|
||||||
|
<div class="right_text">
|
||||||
|
<div class="right_text_item">人员姓名 :</div>
|
||||||
|
<div class="right_text_item">证件号码 :</div>
|
||||||
|
<div class="right_text_item">抓拍时间 :</div>
|
||||||
|
<div class="right_text_item">滞留时间 :</div>
|
||||||
|
<div class="right_text_item">抓拍地址 :</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_value">
|
||||||
|
<div class="right_value_item">{{ item.userName }}</div>
|
||||||
|
<div class="right_value_item">{{ item.idCard }}</div>
|
||||||
|
<div class="right_value_item">
|
||||||
|
{{ item.passTime }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.houseHoldAddress">
|
||||||
|
{{ item.houseHoldAddress }}
|
||||||
|
</div>
|
||||||
|
<div class="right_value_item" :title="item.deviceAddress">
|
||||||
|
{{ item.deviceAddress }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { listHunter } from '@/api/hunting/hunter'
|
||||||
|
export default {
|
||||||
|
name: 'KeyPerson',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// * 模块标题
|
||||||
|
title_text: '人员预警',
|
||||||
|
// * 重点人员数据
|
||||||
|
importpeople: {},
|
||||||
|
// * 滚动数据
|
||||||
|
roll_list: [],
|
||||||
|
// * 动画开关
|
||||||
|
animateUp: false,
|
||||||
|
// * 定时器ID
|
||||||
|
timer: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.timer = setInterval(this.scrollAnimate, 1500)
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.onkeyPersonnelAPI()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 滚动播放
|
||||||
|
scrollAnimate() {
|
||||||
|
this.animateUp = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.roll_list.push(this.roll_list[0])
|
||||||
|
this.roll_list.shift()
|
||||||
|
this.animateUp = false
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
//重点人员
|
||||||
|
async onkeyPersonnelAPI() {
|
||||||
|
const res = await listHunter()
|
||||||
|
this.roll_list = res.rows
|
||||||
|
console.log(this.importpeople, '重点人员数据')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.key_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 44vh;
|
||||||
|
overflow: hidden;
|
||||||
|
.key_title {
|
||||||
|
width: 20vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
padding-left: 1vw;
|
||||||
|
padding-top: 1vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.key_box {
|
||||||
|
width: 20vw;
|
||||||
|
height: 100%;
|
||||||
|
.echart_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 20vh;
|
||||||
|
// background: #0b4672;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.echart_body_left {
|
||||||
|
width: 9vw;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
// background: #217fc8;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.all_person_num {
|
||||||
|
width: 8vw;
|
||||||
|
height: 4vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_all_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.num_blank {
|
||||||
|
width: 1vw;
|
||||||
|
height: 4vh;
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 4vh;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.num_value {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 4vh;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #00f5ff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart_box {
|
||||||
|
width: 9vw;
|
||||||
|
height: 16vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echart_body_right {
|
||||||
|
width: 9vw;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
.num_item {
|
||||||
|
width: 9vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
.num_color {
|
||||||
|
width: 1vw;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.color_box {
|
||||||
|
width: 0.5vw;
|
||||||
|
height: 1vh;
|
||||||
|
}
|
||||||
|
.one {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.two {
|
||||||
|
background: #009cfe;
|
||||||
|
}
|
||||||
|
.three {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.four {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.five {
|
||||||
|
background: #ff6200;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num_text {
|
||||||
|
width: 6vw;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
}
|
||||||
|
.num_proportion {
|
||||||
|
width: 3vw;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4vh;
|
||||||
|
color: #00f5ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_body {
|
||||||
|
width: 20vw;
|
||||||
|
height: 100%;
|
||||||
|
// background: #00f5ff;
|
||||||
|
overflow: hidden;
|
||||||
|
.marquee-list {
|
||||||
|
width: 20vw;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0px;
|
||||||
|
li {
|
||||||
|
margin-left: 2%;
|
||||||
|
margin-right: 2%;
|
||||||
|
width: 96%;
|
||||||
|
height: 15vh;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
margin-top: 1vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
list-style: none;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.roll_item_left {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
.roll_item_pic {
|
||||||
|
width: 5vw;
|
||||||
|
height: 100%;
|
||||||
|
background: #0b4672;
|
||||||
|
}
|
||||||
|
.roll_item_btn {
|
||||||
|
width: 5vw;
|
||||||
|
height: 3vh;
|
||||||
|
color: #fff;
|
||||||
|
background: #00f5ff;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 3vh;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url('~@/assets/coastalMap/keyPerson/key_li_btn.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.roll_item_right {
|
||||||
|
width: 13vw;
|
||||||
|
height: 13vh;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
.person_type {
|
||||||
|
position: absolute;
|
||||||
|
width: 3vw;
|
||||||
|
height: 2vh;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
color: #061122;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
}
|
||||||
|
.one_type {
|
||||||
|
background: #ffc426;
|
||||||
|
}
|
||||||
|
.two_type {
|
||||||
|
background: #00f5ff;
|
||||||
|
}
|
||||||
|
.three_type {
|
||||||
|
background: #a357ff;
|
||||||
|
}
|
||||||
|
.right_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_text_item {
|
||||||
|
width: 5vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #ecf4f9;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.right_value {
|
||||||
|
width: 8vw;
|
||||||
|
height: 13vh;
|
||||||
|
.right_value_item {
|
||||||
|
width: 8vw;
|
||||||
|
height: 2.6vh;
|
||||||
|
color: #edf1f7;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 2.6vh;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-up {
|
||||||
|
transition: all 0.8s ease-in-out;
|
||||||
|
transform: translateY(-20vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,364 @@
|
|||||||
|
<template>
|
||||||
|
<div class="system_body">
|
||||||
|
<!-- 地图区域 -->
|
||||||
|
<!-- 左边区域 -->
|
||||||
|
<div class="left_box" v-if="isplay == '1'">
|
||||||
|
<Resource ref="resource" :resourceData="resourceData"></Resource>
|
||||||
|
<KeyPerson ref="keyPerson"></KeyPerson>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right_box flex-col">
|
||||||
|
<Warning ref="keyPerson" class="flex-1"></Warning>
|
||||||
|
<Vehicle ref="keyPerson" class="flex-1"></Vehicle>
|
||||||
|
</div>
|
||||||
|
<!-- 弹窗组件 -->
|
||||||
|
<!-- <KeyInformantion v-if="play" @cardClose="onCardClose"></KeyInformantion> -->
|
||||||
|
<!-- <div v-else></div> -->
|
||||||
|
<!-- 自定义遮罩层 -->
|
||||||
|
<!-- <div class="overlay" v-if="play"></div>
|
||||||
|
<div v-else></div> -->
|
||||||
|
<!-- -->
|
||||||
|
<div class="under_btn">
|
||||||
|
<div class="under_btn_item">
|
||||||
|
<div class="item_check" @click="toHome"></div>
|
||||||
|
</div>
|
||||||
|
<div class="under_btn_item">
|
||||||
|
<div class="item_check_back" @click="toControl">人员管控</div>
|
||||||
|
</div>
|
||||||
|
<div class="under_btn_item">
|
||||||
|
<div class="item_check_back" @click="toWarning">人员预警</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { getResources, getStatistics } from '@/api/hunting/home'
|
||||||
|
// import { login, getDeviceListAPI } from '@/api/facility'
|
||||||
|
import { dateFormat } from '@/utils/date'
|
||||||
|
import Resource from './components/resource' // * 资源概况
|
||||||
|
import KeyPerson from './components/keyPerson' // * 重点人员
|
||||||
|
import Warning from './components/warning.vue' // * 重点人员
|
||||||
|
import Vehicle from './components/vehicle.vue' // * 重点人员
|
||||||
|
export default {
|
||||||
|
name: 'CoastalMap',
|
||||||
|
components: {
|
||||||
|
Resource,
|
||||||
|
KeyPerson,
|
||||||
|
Warning,
|
||||||
|
Vehicle
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
play: true,
|
||||||
|
isplay: 1,
|
||||||
|
// * 资源概况数据
|
||||||
|
resourceData: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.onGetResource()
|
||||||
|
this.onGetKeyPersonnel()
|
||||||
|
this.timeArr = dateFormat(new Date())
|
||||||
|
this.timeStart()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toHome() {
|
||||||
|
this.$router.push('/home/coastalMap')
|
||||||
|
},
|
||||||
|
toControl() {
|
||||||
|
this.$router.push('/hunting/control')
|
||||||
|
},
|
||||||
|
toWarning() {
|
||||||
|
this.$router.push('/hunting/warning')
|
||||||
|
},
|
||||||
|
onCardClose() {
|
||||||
|
console.log('关闭弹窗')
|
||||||
|
this.play = !this.play
|
||||||
|
},
|
||||||
|
change() {
|
||||||
|
//第一步实现左边隐藏
|
||||||
|
this.isplay = 2
|
||||||
|
//第二步显示实有房屋的盒子
|
||||||
|
},
|
||||||
|
timeStart() {
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.timeArr = dateFormat(new Date())
|
||||||
|
// console.log(this.timeArr)
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
// * 获取资源概况
|
||||||
|
async onGetResource() {
|
||||||
|
const res = await getResources()
|
||||||
|
this.resourceData = res.data
|
||||||
|
// console.log(this.resourceData, '获取资源概况')
|
||||||
|
},
|
||||||
|
// * 获取重点人员 - 图例数据
|
||||||
|
async onGetKeyPersonnel() {
|
||||||
|
const res = await getStatistics()
|
||||||
|
console.log(res, '重点人员数据待更新')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.system_body {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
// background: #404eca;
|
||||||
|
position: relative;
|
||||||
|
.system_title {
|
||||||
|
width: 100vw;
|
||||||
|
height: 18vh;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
background: url('~@/assets/homepage/title_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.blank {
|
||||||
|
width: 24vw;
|
||||||
|
height: 14vh;
|
||||||
|
// background: #33a59f;
|
||||||
|
}
|
||||||
|
.title_body {
|
||||||
|
// width: 28vw;
|
||||||
|
height: 7vh;
|
||||||
|
// background: #33a59f;
|
||||||
|
display: flex;
|
||||||
|
.title_icon {
|
||||||
|
width: 3.5vw;
|
||||||
|
height: 9vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.police_icon {
|
||||||
|
width: 2.7vw;
|
||||||
|
height: 5.4vh;
|
||||||
|
background: url('~@/assets/homepage/police.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title_text {
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 9vh;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.time_body {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 25vw;
|
||||||
|
height: 7vh;
|
||||||
|
|
||||||
|
.box_all {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
width: 14vw;
|
||||||
|
height: 7vh;
|
||||||
|
|
||||||
|
.time_item,
|
||||||
|
.time {
|
||||||
|
margin-left: 2px;
|
||||||
|
width: 12vw;
|
||||||
|
height: 3.5vh;
|
||||||
|
line-height: 7vh;
|
||||||
|
text-align: center;
|
||||||
|
color: #e5f5f9;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 400;
|
||||||
|
font-family: PingFangSC PingFang SC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time {
|
||||||
|
color: #009cfe;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: D-DIN;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_all_right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 9vw;
|
||||||
|
height: 7vh;
|
||||||
|
|
||||||
|
.box_all_right_pic {
|
||||||
|
width: 2vw;
|
||||||
|
height: 4.5vh;
|
||||||
|
background-image: url('@/assets/people-picture/people-cacth/people-3.jpg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_all_right_name {
|
||||||
|
width: 5vw;
|
||||||
|
height: 7vh;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #ecf4f9;
|
||||||
|
line-height: 7vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left_box {
|
||||||
|
position: absolute;
|
||||||
|
left: 1vw;
|
||||||
|
width: 20vw;
|
||||||
|
height: 88vh;
|
||||||
|
overflow: hidden;
|
||||||
|
// background: #ad337f;
|
||||||
|
z-index: 3;
|
||||||
|
background: url('~@/assets/coastalMap/box_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.left_house_box {
|
||||||
|
position: absolute;
|
||||||
|
top: 10vh;
|
||||||
|
left: 1vw;
|
||||||
|
width: 20vw;
|
||||||
|
height: 89vh;
|
||||||
|
background: #ad337f;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
.center_box {
|
||||||
|
position: absolute;
|
||||||
|
width: 2vw;
|
||||||
|
height: 4vh;
|
||||||
|
z-index: 3;
|
||||||
|
top: 5vh;
|
||||||
|
left: 22vw;
|
||||||
|
}
|
||||||
|
.right_box {
|
||||||
|
position: absolute;
|
||||||
|
right: 1vw;
|
||||||
|
width: 20vw;
|
||||||
|
height: 88vh;
|
||||||
|
overflow: hidden;
|
||||||
|
// background: #ad337f;
|
||||||
|
background: url('~@/assets/coastalMap/box_back.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.point_list {
|
||||||
|
position: absolute;
|
||||||
|
top: 10vh;
|
||||||
|
right: 21vw;
|
||||||
|
width: 5vw;
|
||||||
|
height: 40vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.point_list_item {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.point_icon {
|
||||||
|
width: 4vw;
|
||||||
|
height: 4vw;
|
||||||
|
background-image: url('@/assets/picture/bg_point.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(140%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_body {
|
||||||
|
width: 1.2vw;
|
||||||
|
height: 4vh;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.point_icon_text {
|
||||||
|
width: 5vw;
|
||||||
|
height: 1vw;
|
||||||
|
color: aliceblue;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2vh;
|
||||||
|
font-size: 1rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(140%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.under_btn {
|
||||||
|
position: absolute;
|
||||||
|
left: 32.5vw;
|
||||||
|
right: 32.5vw;
|
||||||
|
bottom: 5vh;
|
||||||
|
width: 35vw;
|
||||||
|
height: 12vh;
|
||||||
|
// background: #33a59f;
|
||||||
|
display: flex;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
.under_btn_item {
|
||||||
|
width: 13vw;
|
||||||
|
height: 12vh;
|
||||||
|
// border: 1px solid #b1335d;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
// * 导航样式
|
||||||
|
.item_check {
|
||||||
|
width: 5.5vw;
|
||||||
|
height: 5.5vw;
|
||||||
|
background-image: url('@/assets/picture/icon_home_nor.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-image: url('@/assets/picture/icon_home_sel.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item_check_back {
|
||||||
|
width: 5.5vw;
|
||||||
|
height: 5.5vw;
|
||||||
|
background-image: url('@/assets/picture/under_button.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-family: PingFangSC, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ecf4f9;
|
||||||
|
line-height: 10.5vh;
|
||||||
|
text-shadow: 0px 0px 9px #00a2ff;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #00f5ff;
|
||||||
|
// * 强行增亮
|
||||||
|
filter: brightness(140%);
|
||||||
|
background-size: 100% auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div class="box">
|
||||||
|
<div class="box_title">
|
||||||
|
<slot name="title">
|
||||||
|
{{ title }}
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<div class="box_body">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: String
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.box {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.box_title {
|
||||||
|
width: 100%;
|
||||||
|
height: 4vh;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
vertical-align: top;
|
||||||
|
background: url(@/assets/hunting/title-bg.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.box_body {
|
||||||
|
flex: 1;
|
||||||
|
margin-top: -1px;
|
||||||
|
border: 1px solid #22628b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,236 @@
|
|||||||
|
<template>
|
||||||
|
<card class="hunting-hunter" back="/hunting/control">
|
||||||
|
<div class="fy-center">
|
||||||
|
<div class="avatar">
|
||||||
|
<div class="flex-1">
|
||||||
|
<oss-img :src="hunter.pic" />
|
||||||
|
</div>
|
||||||
|
<div class="avatar_name">{{ hunter.hunterName }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="rows">
|
||||||
|
<div class="fy-center row">
|
||||||
|
<label class="fy-center">证件号码</label>
|
||||||
|
<div class="fy-center">{{ hunter.idCard }}</div>
|
||||||
|
<label class="fy-center">性别</label>
|
||||||
|
<div class="fy-center">{{ hunter.sexCn }}</div>
|
||||||
|
<label class="fy-center">涉案类型</label>
|
||||||
|
<div class="fy-center">{{ hunter.caseSituation }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center row">
|
||||||
|
<label class="fy-center">联系方式</label>
|
||||||
|
<div class="fy-center">{{ hunter.phone }}</div>
|
||||||
|
<label class="fy-center">户籍责任区</label>
|
||||||
|
<div class="fy-center">{{ hunter.houseHoldRegister }}</div>
|
||||||
|
<label class="fy-center">户籍地址</label>
|
||||||
|
<div class="fy-center">{{ hunter.houseHoldAddress }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center row">
|
||||||
|
<label class="fy-center">现住地址</label>
|
||||||
|
<div class="fy-center">{{ hunter.habitationAddress }}</div>
|
||||||
|
<label class="fy-center">管控状态</label>
|
||||||
|
<div class="fy-center">{{ hunter.controlStatusCn }}</div>
|
||||||
|
<label class="fy-center">登记时间</label>
|
||||||
|
<div class="fy-center">{{ hunter.registrationTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="badges">
|
||||||
|
<el-badge>
|
||||||
|
<el-button size="small">基本概况</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="5">
|
||||||
|
<el-button size="small">涉警信息</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="98">
|
||||||
|
<el-button size="small">涉案信息</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="5" type="success">
|
||||||
|
<el-button size="small">预警信息</el-button>
|
||||||
|
</el-badge>
|
||||||
|
<el-badge :value="5" type="success">
|
||||||
|
<el-button size="small">活动轨迹</el-button>
|
||||||
|
</el-badge>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex-col">
|
||||||
|
<div class="fy-center flex-1 mb-15">
|
||||||
|
<box title="关系成员" class="mr-15">
|
||||||
|
<template v-slot:title>
|
||||||
|
<div class="fy-center" style="justify-content: space-between; width: 100%; padding-left: 0.6vw">
|
||||||
|
<div>更多+</div>
|
||||||
|
<div>关系成员</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<el-table>
|
||||||
|
<el-table-column prop="" label="序号"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="姓名"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="证件号码"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="联系方式"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="关系"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</box>
|
||||||
|
<box title="涉警涉案情况" class="ml-15"></box>
|
||||||
|
</div>
|
||||||
|
<div class="fy-center flex-1">
|
||||||
|
<box title="关联车辆" class="mr-15">
|
||||||
|
<el-table>
|
||||||
|
<el-table-column prop="" label="序号"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="号牌种类"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="车牌号码"> </el-table-column>
|
||||||
|
<el-table-column prop="" label="关系"> </el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</box>
|
||||||
|
<box title="被打击情况处理" class="ml-15"></box>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import Card from '@/components/card'
|
||||||
|
import OssImg from '@/components/img/OssImg.vue'
|
||||||
|
import { listUser } from '@/api/hunting/user'
|
||||||
|
import Box from './components/Box.vue'
|
||||||
|
export default {
|
||||||
|
name: 'HuntingWarning',
|
||||||
|
components: {
|
||||||
|
Card,
|
||||||
|
OssImg,
|
||||||
|
Box
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hunter: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.handleQuery()
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
async handleQuery() {
|
||||||
|
const idCard = this.$route.query.idCard
|
||||||
|
const res = await listUser({ idCard })
|
||||||
|
this.hunter = res.rows && res.rows[0]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.hunting-hunter {
|
||||||
|
color: #ecf4f9;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.ml-15 {
|
||||||
|
margin-left: 0.75vw;
|
||||||
|
}
|
||||||
|
.mr-15 {
|
||||||
|
margin-right: 0.75vw;
|
||||||
|
}
|
||||||
|
.mb-15 {
|
||||||
|
margin-bottom: 1.5vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 5vw;
|
||||||
|
height: 13vh;
|
||||||
|
background: rgba(0, 156, 254, 0.2);
|
||||||
|
border: 1px solid #256189;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.flex-1 {
|
||||||
|
padding: 1vh 0.5vw 0 0.5vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar_name {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 24px;
|
||||||
|
background: #025e9b;
|
||||||
|
border: 1px solid #256189;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rows {
|
||||||
|
margin-left: 1vw;
|
||||||
|
border-top: 1px solid #1f597f;
|
||||||
|
border-left: 1px solid #1f597f;
|
||||||
|
.row {
|
||||||
|
label {
|
||||||
|
width: 6.5vw;
|
||||||
|
height: 4.4vh;
|
||||||
|
padding-left: 0.5vw;
|
||||||
|
background: rgba(0, 156, 254, 0.2);
|
||||||
|
border-right: 1px solid #1f597f;
|
||||||
|
border-bottom: 1px solid #1f597f;
|
||||||
|
}
|
||||||
|
> div {
|
||||||
|
width: 20vw;
|
||||||
|
height: 4.4vh;
|
||||||
|
padding-left: 0.5vw;
|
||||||
|
background: rgba(0, 156, 254, 0);
|
||||||
|
border-right: 1px solid #1f597f;
|
||||||
|
border-bottom: 1px solid #1f597f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badges {
|
||||||
|
margin-top: 3vh;
|
||||||
|
margin-bottom: 3vh;
|
||||||
|
|
||||||
|
.el-badge {
|
||||||
|
margin-right: 0.9vw;
|
||||||
|
.el-button {
|
||||||
|
background: url(@/assets/hunting/btn-bg.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
border: 0;
|
||||||
|
color: #ecf4f9;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
.el-button {
|
||||||
|
background: url(@/assets/hunting/btn-bg-light.png);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
background-color: rgba(2, 20, 42, 0.2);
|
||||||
|
&::before {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
height: 4vh;
|
||||||
|
background-color: rgba(0, 156, 254, 0.2);
|
||||||
|
th {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
tr {
|
||||||
|
color: #ecf4f9;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
|
||||||
|
background-color: rgba(0, 156, 254, 0.45);
|
||||||
|
}
|
||||||
|
.el-table td.el-table__cell,
|
||||||
|
.el-table th.el-table__cell.is-leaf {
|
||||||
|
border-bottom: 1px solid rgba(16, 116, 174, 0.42);
|
||||||
|
}
|
||||||
|
.el-table__body-wrapper {
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
padding-bottom: 5vh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail">
|
||||||
|
<div class="flex-1">
|
||||||
|
<oss-img :src="data.pic" />
|
||||||
|
</div>
|
||||||
|
<div class="flex-col w-400 ml-12 overflow-auto">
|
||||||
|
<div class="fy-center grid">
|
||||||
|
<div v-for="(item, index) in data.albums" :key="index" class="flex-1 h-144">
|
||||||
|
<oss-img :src="item" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="mt-8">
|
||||||
|
<div v-for="(column, index) in data.columns" :key="index" class="fy-center row">
|
||||||
|
<div class="label fy-center">{{ column.label }}</div>
|
||||||
|
<div class="content line-1" :class="{ even: index % 2 == 0 }">{{ column.content }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import OssImg from '@/components/img/OssImg.vue'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
OssImg
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
data: Object
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.detail {
|
||||||
|
color: white;
|
||||||
|
width: 100%;
|
||||||
|
height: 63vh;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.row {
|
||||||
|
margin-top: 0.4vh;
|
||||||
|
}
|
||||||
|
.h-144 {
|
||||||
|
height: 14.4vh;
|
||||||
|
}
|
||||||
|
.w-400 {
|
||||||
|
width: 20vw;
|
||||||
|
}
|
||||||
|
.ml-12 {
|
||||||
|
margin-left: 0.6vw;
|
||||||
|
}
|
||||||
|
.overflow-auto {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-gap: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
width: 6vw;
|
||||||
|
height: 44px;
|
||||||
|
background-color: #093979;
|
||||||
|
margin-right: 1px;
|
||||||
|
padding-left: 12px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
padding-left: 12px;
|
||||||
|
height: 44px;
|
||||||
|
line-height: 44px;
|
||||||
|
background-color: rgba(9, 57, 121, 0.3);
|
||||||
|
&.even {
|
||||||
|
background-color: rgba(9, 57, 121, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue