Compare commits
2 Commits
guomingxin
...
main
| Author | SHA1 | Date |
|---|---|---|
独树的风
|
fdd0156b74 | 10 months ago |
|
独树的风
|
a5bcab0e83 | 10 months ago |
@ -1,10 +0,0 @@
|
|||||||
// 资源概况
|
|
||||||
import request from '@/utils/request'
|
|
||||||
// 实有人口查询
|
|
||||||
export function get_person_num(params) {
|
|
||||||
return request({
|
|
||||||
url: '/base/metaActualUserInfo',
|
|
||||||
method: 'get',
|
|
||||||
params
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 133 KiB |
|
Before Width: | Height: | Size: 35 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 26 KiB |
|
Before Width: | Height: | Size: 312 KiB |
@ -1,15 +0,0 @@
|
|||||||
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)
|
|
||||||
}
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
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
|
|
||||||
@ -1,273 +0,0 @@
|
|||||||
<!-- 重点人员 -->
|
|
||||||
<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,146 +1,21 @@
|
|||||||
<!-- 资源概况 -->
|
<!-- 资源概况 -->
|
||||||
<template>
|
<template>
|
||||||
<div class="resource_body">
|
<div class="resource_body"></div>
|
||||||
<!-- 模块头部 -->
|
|
||||||
<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>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { get_person_num } from '@/api/coastalMap/resource'
|
|
||||||
// import { getToken } from '@/utils/auth'
|
|
||||||
export default {
|
export default {
|
||||||
// eslint-disable-next-line vue/multi-word-component-names
|
// eslint-disable-next-line vue/multi-word-component-names
|
||||||
name: 'Resource',
|
name: 'Resource',
|
||||||
data() {
|
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>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.resource_body {
|
.resource_body {
|
||||||
width: 20vw;
|
width: 18vw;
|
||||||
height: 17.5vh;
|
height: 26vh;
|
||||||
.resource_title {
|
background: url('../../../assets/首页_slices/bg_1.png') no-repeat center /
|
||||||
width: 20vw;
|
cover;
|
||||||
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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in new issue