lukeyan
11 months ago
parent
0c31d2f34e
commit
d2f9db6790
@ -0,0 +1,10 @@
|
||||
// 资源概况
|
||||
import request from '@/utils/request'
|
||||
// 实有人口查询
|
||||
export function get_person_num(params) {
|
||||
return request({
|
||||
url: '/base/metaActualUserInfo',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 312 KiB |
@ -0,0 +1,15 @@
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
const syToken = 'url_token'
|
||||
|
||||
export function getToken() {
|
||||
return Cookies.get(syToken)
|
||||
}
|
||||
|
||||
export function setToken(token) {
|
||||
return Cookies.set(syToken, token)
|
||||
}
|
||||
|
||||
export function removeToken() {
|
||||
return Cookies.remove(syToken)
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
var EleResize = {
|
||||
_handleResize: function (e) {
|
||||
var ele = e.target || e.srcElement
|
||||
var trigger = ele.__resizeTrigger__
|
||||
if (trigger) {
|
||||
var handlers = trigger.__z_resizeListeners
|
||||
if (handlers) {
|
||||
var size = handlers.length
|
||||
for (var i = 0; i < size; i++) {
|
||||
var h = handlers[i]
|
||||
var handler = h.handler
|
||||
var context = h.context
|
||||
handler.apply(context, [e])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_removeHandler: function (ele, handler, context) {
|
||||
var handlers = ele.__z_resizeListeners
|
||||
if (handlers) {
|
||||
var size = handlers.length
|
||||
for (var i = 0; i < size; i++) {
|
||||
var h = handlers[i]
|
||||
if (h.handler === handler && h.context === context) {
|
||||
handlers.splice(i, 1)
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
_createResizeTrigger: function (ele) {
|
||||
var obj = document.createElement('object')
|
||||
obj.setAttribute('style',
|
||||
'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;')
|
||||
obj.onload = EleResize._handleObjectLoad
|
||||
obj.type = 'text/html'
|
||||
ele.appendChild(obj)
|
||||
obj.data = 'about:blank'
|
||||
return obj
|
||||
},
|
||||
_handleObjectLoad: function () {
|
||||
this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__
|
||||
this.contentDocument.defaultView.addEventListener('resize', EleResize._handleResize)
|
||||
}
|
||||
}
|
||||
if (document.attachEvent) { // ie9-10
|
||||
EleResize.on = function (ele, handler, context) {
|
||||
var handlers = ele.__z_resizeListeners
|
||||
if (!handlers) {
|
||||
handlers = []
|
||||
ele.__z_resizeListeners = handlers
|
||||
ele.__resizeTrigger__ = ele
|
||||
ele.attachEvent('onresize', EleResize._handleResize)
|
||||
}
|
||||
handlers.push({
|
||||
handler: handler,
|
||||
context: context
|
||||
})
|
||||
}
|
||||
EleResize.off = function (ele, handler, context) {
|
||||
var handlers = ele.__z_resizeListeners
|
||||
if (handlers) {
|
||||
EleResize._removeHandler(ele, handler, context)
|
||||
if (handlers.length === 0) {
|
||||
ele.detachEvent('onresize', EleResize._handleResize)
|
||||
delete ele.__z_resizeListeners
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
EleResize.on = function (ele, handler, context) {
|
||||
var handlers = ele.__z_resizeListeners
|
||||
if (!handlers) {
|
||||
handlers = []
|
||||
ele.__z_resizeListeners = handlers
|
||||
|
||||
if (getComputedStyle(ele, null).position === 'static') {
|
||||
ele.style.position = 'relative'
|
||||
}
|
||||
var obj = EleResize._createResizeTrigger(ele)
|
||||
ele.__resizeTrigger__ = obj
|
||||
obj.__resizeElement__ = ele
|
||||
}
|
||||
handlers.push({
|
||||
handler: handler,
|
||||
context: context
|
||||
})
|
||||
}
|
||||
EleResize.off = function (ele, handler, context) {
|
||||
var handlers = ele.__z_resizeListeners
|
||||
if (handlers) {
|
||||
EleResize._removeHandler(ele, handler, context)
|
||||
if (handlers.length === 0) {
|
||||
var trigger = ele.__resizeTrigger__
|
||||
if (trigger) {
|
||||
trigger.contentDocument.defaultView.removeEventListener('resize', EleResize._handleResize)
|
||||
ele.removeChild(trigger)
|
||||
delete ele.__resizeTrigger__
|
||||
}
|
||||
delete ele.__z_resizeListeners
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
export default EleResize
|
||||
@ -0,0 +1,273 @@
|
||||
<!-- 重点人员 -->
|
||||
<template>
|
||||
<div class="key_body">
|
||||
<!-- 模块头部 -->
|
||||
<div class="key_title">
|
||||
<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">654332</div>
|
||||
</div>
|
||||
<div class="echart_box" id="charts"></div>
|
||||
</div>
|
||||
<!-- 右边图例展示 -->
|
||||
<div class="echart_body_right">
|
||||
<div class="num_item">
|
||||
<!-- 图例颜色 -->
|
||||
<div class="num_color">
|
||||
<div class="color_box one"></div>
|
||||
</div>
|
||||
<!-- 图例文字 -->
|
||||
<div class="num_text">涉恐人员</div>
|
||||
<div class="num_proportion">34%</div>
|
||||
</div>
|
||||
<div class="num_item">
|
||||
<!-- 图例颜色 -->
|
||||
<div class="num_color">
|
||||
<div class="color_box two"></div>
|
||||
</div>
|
||||
<!-- 图例文字 -->
|
||||
<div class="num_text">涉毒人员</div>
|
||||
<div class="num_proportion">20%</div>
|
||||
</div>
|
||||
<div class="num_item">
|
||||
<!-- 图例颜色 -->
|
||||
<div class="num_color">
|
||||
<div class="color_box three"></div>
|
||||
</div>
|
||||
<!-- 图例文字 -->
|
||||
<div class="num_text">精神病人</div>
|
||||
<div class="num_proportion">4%</div>
|
||||
</div>
|
||||
<div class="num_item">
|
||||
<!-- 图例颜色 -->
|
||||
<div class="num_color">
|
||||
<div class="color_box four"></div>
|
||||
</div>
|
||||
<!-- 图例文字 -->
|
||||
<div class="num_text">在逃人员</div>
|
||||
<div class="num_proportion">17%</div>
|
||||
</div>
|
||||
<div class="num_item">
|
||||
<!-- 图例颜色 -->
|
||||
<div class="num_color">
|
||||
<div class="color_box five"></div>
|
||||
</div>
|
||||
<!-- 图例文字 -->
|
||||
<div class="num_text">涉稳人员</div>
|
||||
<div class="num_proportion">4%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 滚动区域 -->
|
||||
<div class="roll_body"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import EleResize from "@/utils/esresize";
|
||||
export default {
|
||||
name: "KeyPerson",
|
||||
data() {
|
||||
return {
|
||||
title_text: "重点人员",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init_charts();
|
||||
},
|
||||
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();
|
||||
});
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
confine: true,
|
||||
},
|
||||
// legend: {
|
||||
// orient: "vertical",
|
||||
// left: "left",
|
||||
// },
|
||||
color: ["#A357FF", "#009CFE", "#00F5FF", "#FFC426", "#FF6200"],
|
||||
series: [
|
||||
{
|
||||
name: "重点人员",
|
||||
type: "pie",
|
||||
radius: ["50%", "90%"],
|
||||
data: [
|
||||
{ value: 80048, 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);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.key_body {
|
||||
width: 20vw;
|
||||
height: 71.5vh;
|
||||
.key_title {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
background: url("~@/assets/coastalMap/box_title_back.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.title_text {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
color: antiquewhite;
|
||||
margin-left: 2vw;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 3.5vh;
|
||||
text-shadow: 0px 0px 10px #0b4672;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
.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: 2vw;
|
||||
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: 4vw;
|
||||
color: aliceblue;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
}
|
||||
.num_proportion {
|
||||
width: 3vw;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
color: #00f5ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +1,146 @@
|
||||
<!-- 资源概况 -->
|
||||
<template>
|
||||
<div class="resource_body"></div>
|
||||
<div class="resource_body">
|
||||
<!-- 模块头部 -->
|
||||
<div class="resource_title">
|
||||
<div class="title_text">{{ title_text }}</div>
|
||||
</div>
|
||||
<!-- 模块内容 -->
|
||||
<div class="resource_box">
|
||||
<div class="resource_box_item one">
|
||||
<!-- 占位 -->
|
||||
<div class="box_item_blank"></div>
|
||||
<div class="box_item_text">实有人口</div>
|
||||
<div class="box_item_value">654332</div>
|
||||
</div>
|
||||
<div class="resource_box_item two">
|
||||
<!-- 占位 -->
|
||||
<div class="box_item_blank"></div>
|
||||
<div class="box_item_text">流动人口</div>
|
||||
<div class="box_item_value">421123</div>
|
||||
</div>
|
||||
<div class="resource_box_item three">
|
||||
<!-- 占位 -->
|
||||
<div class="box_item_blank"></div>
|
||||
<div class="box_item_text">实有房屋</div>
|
||||
<div class="box_item_value">556432</div>
|
||||
</div>
|
||||
<div class="resource_box_item four">
|
||||
<!-- 占位 -->
|
||||
<div class="box_item_blank"></div>
|
||||
<div class="box_item_text">实有单位</div>
|
||||
<div class="box_item_value">221223</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { get_person_num } from '@/api/coastalMap/resource'
|
||||
// import { getToken } from '@/utils/auth'
|
||||
export default {
|
||||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
name: 'Resource',
|
||||
data() {
|
||||
return {}
|
||||
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: 18vw;
|
||||
height: 26vh;
|
||||
background: url('../../../assets/首页_slices/bg_1.png') no-repeat center /
|
||||
cover;
|
||||
width: 20vw;
|
||||
height: 17.5vh;
|
||||
.resource_title {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
background: url('~@/assets/coastalMap/box_title_back.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.title_text {
|
||||
width: 20vw;
|
||||
height: 3.5vh;
|
||||
color: antiquewhite;
|
||||
margin-left: 2vw;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
line-height: 3.5vh;
|
||||
text-shadow: 0px 0px 10px #0b4672;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
.resource_box {
|
||||
width: 20vw;
|
||||
height: 12vh;
|
||||
background: url('~@/assets/coastalMap/box_back.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
.resource_box_item {
|
||||
width: 9vw;
|
||||
height: 4vh;
|
||||
margin-left: 0.5vw;
|
||||
margin-right: 0.5vw;
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.box_item_blank {
|
||||
width: 1vw;
|
||||
height: 4vh;
|
||||
}
|
||||
.box_item_text {
|
||||
width: 3.5vw;
|
||||
height: 4vh;
|
||||
color: aliceblue;
|
||||
text-align: right;
|
||||
line-height: 4vh;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.box_item_value {
|
||||
width: 3.5vw;
|
||||
height: 4vh;
|
||||
text-align: center;
|
||||
line-height: 4vh;
|
||||
color: #00f5ff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
.one {
|
||||
background: url('~@/assets/coastalMap/resource_item_back01.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.two {
|
||||
background: url('~@/assets/coastalMap/resource_item_back02.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.three {
|
||||
background: url('~@/assets/coastalMap/resource_item_back03.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.four {
|
||||
background: url('~@/assets/coastalMap/resource_item_back04.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue