sheyang
/
MaindataPGIS
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页大屏更改02

Browse Source
pull/7/head
lukeyan 10 months ago
parent b6ca114fff
commit fc0b238adc
4 changed files with 263 additions and 4 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/coastalMap/keyPerson/key_li_back.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 250 KiB

BIN
src/assets/coastalMap/keyPerson/key_li_btn.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

2
src/utils/request.js
Unescape View File

@ -2,7 +2,7 @@ import axios from 'axios'
// import { getToken } from '@/utils/token'
const baseURL = 'http://50.146.63.43:20000/'
// const baseURL = ''
//const baseURL = `http://${window.location.host}/`
// axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
const request = axios.create({
baseURL,

265
src/views/coastalMap/components/keyPerson.vue
Unescape View File

@ -7,7 +7,7 @@
</div>
<!-- 模块内容 -->
<div class="key_box">
<!-- 饼图 -->
<!-- 饼图 -->
<div class="echart_body">
<div class="echart_body_left">
<div class="all_person_num">
@ -68,7 +68,54 @@
</div>
</div>
<!-- 滚动区域 -->
<div class="roll_body"></div>
<div class="roll_body">
<ul class="marquee-list" :class="{ 'animate-up': animateUp }">
<li v-for="(item, index) in roll_list" :key="index">
<div class="roll_item_left">
<div class="roll_item_pic"></div>
<div class="roll_item_btn">查看详情</div>
</div>
<div class="roll_item_right">
<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.person_name }}</div>
<div class="right_value_item">{{ item.phone_num }}</div>
<div class="right_value_item" :title="item.id_card">
{{ item.id_card }}
</div>
<div class="right_value_item" :title="item.old_address">
{{ item.old_address }}
</div>
<div class="right_value_item" :title="item.new_address">
{{ item.new_address }}
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
@ -80,10 +127,105 @@ export default {
data() {
return {
title_text: "重点人员",
roll_list: [
{
text: "123",
per_type: "1",
type_text: "在逃人员",
person_name: "周大山",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1243",
per_type: "3",
type_text: "涉恐人员",
person_name: "王富强",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "12323",
per_type: "2",
type_text: "精神病人",
person_name: "赵磊",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1243",
per_type: "2",
type_text: "精神病人",
person_name: "徐永",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "2",
type_text: "精神病人",
person_name: "李文一",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "1",
type_text: "在逃人员",
person_name: "谭静",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1243",
per_type: "3",
type_text: "涉恐人员",
person_name: "孙洋洋",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "1",
type_text: "在逃人员",
person_name: "董磊",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
{
text: "1223",
per_type: "2",
type_text: "精神病人",
person_name: "郑廖",
phone_num: "13455674532",
id_card: "321287197606038965",
old_address: "射阳县解放路74号",
new_address: "江苏省射阳县海河镇革新村二组113号",
},
],
animateUp: false,
timer: null,
};
},
mounted() {
this.init_charts();
this.timer = setInterval(this.scrollAnimate, 1500);
},
methods: {
init_charts() {
@ -138,6 +280,15 @@ export default {
};
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);
},
},
};
</script>
@ -170,7 +321,7 @@ export default {
.echart_body {
width: 20vw;
height: 20vh;
// background: #0b4672;
// background: #0b4672;
display: flex;
justify-content: space-around;
.echart_body_left {
@ -268,6 +419,114 @@ export default {
}
}
}
.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: 10vh;
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>
Write Preview
Loading…
Cancel
Save