对接接口
This commit is contained in:
TS-QD1
parent
0c4ca76328
commit
a9a128a2ca
146
package-lock.json
generated
146
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "btgxq-population-bigdata",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"stylus": "^0.61.0",
|
||||
@ -663,6 +664,21 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
|
||||
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
|
||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -682,6 +698,17 @@
|
||||
"resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
|
||||
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -708,6 +735,14 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
|
||||
@ -771,6 +806,32 @@
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
|
||||
"integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@ -834,6 +895,25 @@
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@ -915,6 +995,11 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.4.1.tgz",
|
||||
@ -1455,6 +1540,21 @@
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
|
||||
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.2.tgz",
|
||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
|
||||
@ -1474,6 +1574,14 @@
|
||||
"resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
|
||||
"integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
|
||||
},
|
||||
"combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"requires": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@ -1492,6 +1600,11 @@
|
||||
"ms": "2.1.2"
|
||||
}
|
||||
},
|
||||
"delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
|
||||
},
|
||||
"echarts": {
|
||||
"version": "5.4.3",
|
||||
"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz",
|
||||
@ -1545,6 +1658,21 @@
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz",
|
||||
"integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q=="
|
||||
},
|
||||
"form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"requires": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
},
|
||||
"fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@ -1592,6 +1720,19 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
}
|
||||
},
|
||||
"mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
|
||||
},
|
||||
"mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"requires": {
|
||||
"mime-db": "1.52.0"
|
||||
}
|
||||
},
|
||||
"minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@ -1638,6 +1779,11 @@
|
||||
"source-map-js": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"rollup": {
|
||||
"version": "4.4.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.4.1.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.6.2",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"stylus": "^0.61.0",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 378 B After Width: | Height: | Size: 394 B |
Binary file not shown.
|
Before Width: | Height: | Size: 394 B After Width: | Height: | Size: 378 B |
Binary file not shown.
|
Before Width: | Height: | Size: 383 B After Width: | Height: | Size: 372 B |
Binary file not shown.
|
Before Width: | Height: | Size: 372 B After Width: | Height: | Size: 383 B |
26
src/App.vue
26
src/App.vue
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main-title"></div>
|
||||
<div class="main-title">
|
||||
<DateTime/>
|
||||
<div class="title">人口系统数据看板</div>
|
||||
<div class="weather"></div>
|
||||
</div>
|
||||
<div class="main-body">
|
||||
<ModuleLeft1 class="left1"/>
|
||||
<ModuleLeft2 class="left2"/>
|
||||
@ -17,6 +21,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DateTime from './components/datetime/DateTime.vue';
|
||||
import ModuleLeft1 from './module/ModuleLeft1.vue';
|
||||
import ModuleLeft2 from './module/ModuleLeft2.vue';
|
||||
import ModuleLeft3 from './module/ModuleLeft3.vue';
|
||||
@ -41,13 +46,30 @@ import ModuleBottom from './module/ModuleBottom.vue';
|
||||
height 100px
|
||||
background-image url(assets/imgs/title-bg.png)
|
||||
background-size 100% 100%
|
||||
position relative
|
||||
div
|
||||
color #FFF
|
||||
.datetime
|
||||
position absolute
|
||||
top 6px
|
||||
left 40px
|
||||
.title
|
||||
width 100%
|
||||
height 50px
|
||||
line-height 50px
|
||||
padding-top 5px
|
||||
font-size 30px
|
||||
font-weight bold
|
||||
text-align center
|
||||
.main-body
|
||||
margin-top -25px
|
||||
padding 0 45px 20px 45px
|
||||
padding 0 45px
|
||||
display grid
|
||||
grid-template-columns 400px 1fr 400px
|
||||
grid-gap 30px
|
||||
grid-auto-rows auto
|
||||
justify-content space-between
|
||||
align-content space-between
|
||||
.left1
|
||||
grid-column 1
|
||||
grid-row 1
|
||||
|
||||
@ -59,6 +59,7 @@ const props = defineProps({
|
||||
text-align center
|
||||
font-weight bold
|
||||
font-size 22px
|
||||
color v-bind(color)
|
||||
.title
|
||||
padding 0 5px
|
||||
text-align center
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<CardCount2 class="left"/>
|
||||
<CardCount2 class="right"/>
|
||||
<CardCount2 class="left" :title="props.data.count1.title" :unit="props.data.count1.unit" :value="props.data.count1.value" :percent="props.data.count1.percent" :color="props.data.count1.color"/>
|
||||
<CardCount2 class="right" :title="props.data.count2.title" :unit="props.data.count2.unit" :value="props.data.count2.value" :percent="props.data.count2.percent" :color="props.data.count2.color"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -10,6 +10,25 @@ import {ref, defineProps} from 'vue';
|
||||
import CardCount2 from './CardCount2.vue';
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: {
|
||||
count1: {
|
||||
value: 0,
|
||||
title: '标题',
|
||||
unit: '',
|
||||
percent: 0,
|
||||
color: 'white',
|
||||
},
|
||||
count2: {
|
||||
value: 0,
|
||||
title: '标题',
|
||||
unit: '',
|
||||
percent: 0,
|
||||
color: 'white',
|
||||
},
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<img class="icon" :src="iconSrc">
|
||||
<div class="value">{{ props.value }}%</div>
|
||||
<div class="value">{{ props.value }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="circle-wave">
|
||||
<svg class="svg" width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Wave -->
|
||||
<g id="wave">
|
||||
@ -29,14 +29,14 @@ const props = defineProps({
|
||||
},
|
||||
value: {
|
||||
type: Number,
|
||||
default: 20.0
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
const color = ref(props.color);
|
||||
|
||||
</script>
|
||||
<style lang="stylus" scoped>
|
||||
.container
|
||||
.circle-wave
|
||||
.svg
|
||||
filter drop-shadow(0 0 5px v-bind(color))
|
||||
</style>
|
||||
71
src/components/datetime/DateTime.vue
Normal file
71
src/components/datetime/DateTime.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="datetime">
|
||||
<div class="date">
|
||||
<span>日期：</span>
|
||||
<span class="value">{{ datetime[0] }}</span>
|
||||
<span>年</span>
|
||||
<span class="value">{{ datetime[1] }}</span>
|
||||
<span>月</span>
|
||||
<span class="value">{{ datetime[2] }}</span>
|
||||
<span>日</span>
|
||||
</div>
|
||||
<div class="time">
|
||||
<span>时间：</span>
|
||||
<span class="value">{{ datetime[3] }}</span>
|
||||
<span>时</span>
|
||||
<span class="value">{{ datetime[4] }}</span>
|
||||
<span>分</span>
|
||||
<span class="value">{{ datetime[5] }}</span>
|
||||
<span>秒</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const datetime = reactive([]);
|
||||
|
||||
const init = () => {
|
||||
let date = new Date();
|
||||
let year = date.getFullYear() + '';
|
||||
let month = date.getMonth() + 1;
|
||||
month = month < 10 ? '0' + month : month;
|
||||
let day = date.getDay();
|
||||
day = day < 10 ? '0' + day : day;
|
||||
|
||||
let hour = date.getHours();
|
||||
hour = hour < 10 ? '0' + hour : hour;
|
||||
let minute = date.getMinutes();
|
||||
minute = minute < 10 ? '0' + minute : minute;
|
||||
let second = date.getSeconds();
|
||||
second = second < 10 ? '0' + second : second;
|
||||
|
||||
datetime[0] = year;
|
||||
datetime[1] = month;
|
||||
datetime[2] = day;
|
||||
datetime[3] = hour;
|
||||
datetime[4] = minute;
|
||||
datetime[5] = second;
|
||||
requestAnimationFrame(init);
|
||||
}
|
||||
requestAnimationFrame(init);
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.datetime
|
||||
div
|
||||
display inline-block
|
||||
.date
|
||||
width 202px
|
||||
.value
|
||||
padding 2px 5px
|
||||
background linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5))
|
||||
.time
|
||||
white 120px
|
||||
margin-left 30px
|
||||
.value
|
||||
padding 2px 5px
|
||||
background linear-gradient(rgba(255, 255, 255, 0.5), transparent, rgba(255, 255, 255, 0.5))
|
||||
</style>
|
||||
@ -42,6 +42,10 @@ const init = () => {
|
||||
text: props.title
|
||||
},
|
||||
tooltip: {},
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xData
|
||||
|
||||
@ -42,6 +42,10 @@ const init = () => {
|
||||
text: props.title
|
||||
},
|
||||
tooltip: {},
|
||||
grid: {
|
||||
left: 50,
|
||||
top: 10
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: props.xData
|
||||
|
||||
@ -274,7 +274,7 @@ const dataSource = [
|
||||
const init = () => {
|
||||
// const colorList = ["#D98053", "#E2B062", "#5A9CF1", "#6ED3D3"];
|
||||
const colorList = [];
|
||||
const paramsList = dataSource.map((item, index) => {
|
||||
const paramsList = props.data.map((item, index) => {
|
||||
return {
|
||||
...item,
|
||||
shading: "realistic",
|
||||
|
||||
@ -7,12 +7,12 @@
|
||||
<span class="item item4">占有率(%)</span>
|
||||
</div>
|
||||
<div class="scroll">
|
||||
<vue3-seamless-scroll :list="listData" :step="0.5">
|
||||
<div class="line" v-for="item in listData" :key="item">
|
||||
<span class="item item1">序号</span>
|
||||
<span class="item item2">民族民族民族民族民族</span>
|
||||
<span class="item item3">人数(人)</span>
|
||||
<span class="item item4">占有率(%)</span>
|
||||
<vue3-seamless-scroll :list="props.data" :step="0.5">
|
||||
<div class="line" v-for="(item, index) in props.data" :key="item">
|
||||
<span class="item item1">{{ index + 1 }}</span>
|
||||
<span class="item item2">{{ item.name }}</span>
|
||||
<span class="item item3">{{ item.value }}</span>
|
||||
<span class="item item4">{{ item.percent }}</span>
|
||||
</div>
|
||||
</vue3-seamless-scroll>
|
||||
</div>
|
||||
@ -21,46 +21,15 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { reactive, defineProps } from 'vue';
|
||||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||||
|
||||
const listData = reactive([{
|
||||
title: "无缝滚动第一行无缝滚动第一行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第二行无缝滚动第二行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第三行无缝滚动第三行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第四行无缝滚动第四行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第五行无缝滚动第五行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第六行无缝滚动第六行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第七行无缝滚动第七行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第八行无缝滚动第八行",
|
||||
date: "2017-12-16",
|
||||
},
|
||||
{
|
||||
title: "无缝滚动第九行无缝滚动第九行",
|
||||
date: "2017-12-16",
|
||||
}])
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
11
src/main.js
11
src/main.js
@ -1,6 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import * as echarts from 'echarts';
|
||||
import axios from 'axios';
|
||||
import App from './App.vue'
|
||||
|
||||
const createEcharts = {
|
||||
@ -8,7 +9,17 @@ const createEcharts = {
|
||||
app.provide('echarts', echarts);
|
||||
}
|
||||
}
|
||||
const createAxios = {
|
||||
install(app, options) {
|
||||
axios.defaults.baseURL = 'http://219.147.99.164:8082/datahouse/';
|
||||
axios.defaults.timeout = 20000;
|
||||
axios.defaults.headers.common['PKEY'] = 'a0a25c1e-818a-489e-98c0-0f3a282a49d2';
|
||||
axios.defaults.headers.common['PPASS'] = '5be81fdf-2c5d-4ee6-ae45-ffe82b5db2ff';
|
||||
app.provide('axios', axios);
|
||||
}
|
||||
}
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createEcharts);
|
||||
app.use(createAxios);
|
||||
app.mount('#app');
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard3 class="module-card3" title="宗教信仰统计">
|
||||
<ModuleCard3 class="module-card3" title="社会保障类人员">
|
||||
<div class="module-container">
|
||||
<div class="left">
|
||||
<CircleWave class="circle-container"/>
|
||||
<CircleWave class="circle-container"/>
|
||||
<CircleWave class="circle-container"/>
|
||||
<CircleWave class="circle-container"/>
|
||||
<CircleWave class="circle-container" id="lnrPercent" ref="lnrPercent" :value="personData.lnr.percent" :color="personData.lnr.color" :key="personData.lnr.keyCount"/>
|
||||
<CircleWave class="circle-container" id="cjrPercent" ref="cjrPercent" :value="personData.cjr.percent" :color="personData.cjr.color" :key="personData.cjr.keyCount"/>
|
||||
<CircleWave class="circle-container" id="tyfyPercent" ref="tyfyPercent" :value="personData.tyfy.percent" :color="personData.tyfy.color" :key="personData.tyfy.keyCount"/>
|
||||
<CircleWave class="circle-container" id="shjzPercent" ref="shjzPercent" :value="personData.shjz.percent" :color="personData.shjz.color" :key="personData.shjz.keyCount"/>
|
||||
</div>
|
||||
<div class="right">
|
||||
<Process class="process"/>
|
||||
<Process class="process"/>
|
||||
<Process class="process"/>
|
||||
<Process class="process"/>
|
||||
<Process class="process" title="老年人" :icon-type="1" :value="personData.lnr.value" :process="personData.lnr.process" :color="personData.lnr.color" :bg-color="personData.lnr.bgColor" :key="personData.lnr.keyCount" />
|
||||
<Process class="process" title="残疾人保障" :icon-type="2" :value="personData.cjr.value" :process="personData.cjr.process" :color="personData.cjr.color" :bg-color="personData.cjr.bgColor" :key="personData.cjr.keyCount" />
|
||||
<Process class="process" title="退役/服役情况" :icon-type="3" :value="personData.tyfy.value" :process="personData.tyfy.process" :color="personData.tyfy.color" :bg-color="personData.tyfy.bgColor" :key="personData.tyfy.keyCount" />
|
||||
<Process class="process" title="社会救助信息" :icon-type="4" :value="personData.shjz.value" :process="personData.shjz.process" :color="personData.shjz.color" :bg-color="personData.shjz.bgColor" :key="personData.shjz.keyCount" />
|
||||
</div>
|
||||
</div>
|
||||
</ModuleCard3>
|
||||
@ -20,11 +20,69 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import { nextTick, onMounted } from 'vue';
|
||||
import ModuleCard3 from './card/ModuleCard3.vue';
|
||||
import Process from '../components/process/Process.vue';
|
||||
import CircleWave from '../components/circle/CircleWave.vue';
|
||||
|
||||
const personData = reactive({
|
||||
lnr: {
|
||||
value: 0,
|
||||
percent: 0,
|
||||
color: 'rgb(34, 149, 230)',
|
||||
bgColor: 'rgb(34, 149, 230, 0.44)',
|
||||
keyCount: 0,
|
||||
},
|
||||
cjr: {
|
||||
value: 0,
|
||||
percent: 0,
|
||||
color: 'rgb(255, 255, 0)',
|
||||
bgColor: 'rgb(255, 255, 0, 0.44)',
|
||||
keyCount: 0,
|
||||
},
|
||||
tyfy: {
|
||||
value: 0,
|
||||
percent: 0,
|
||||
color: 'rgb(247, 147, 30)',
|
||||
bgColor: 'rgb(247, 147, 30, 0.44)',
|
||||
keyCount: 0,
|
||||
},
|
||||
shjz: {
|
||||
value: 0,
|
||||
percent: 0,
|
||||
color: 'rgb(0, 169, 157)',
|
||||
bgColor: 'rgb(0, 169, 157, 0.44)',
|
||||
keyCount: 0,
|
||||
}
|
||||
})
|
||||
|
||||
const axios = inject('axios');
|
||||
|
||||
onMounted(() => {
|
||||
axios.get(`app/query/sqlrelease/q2972694`, {}).then(res => {
|
||||
let data = res.data;
|
||||
let total = data.total;
|
||||
personData.lnr.value = data.list[0].value;
|
||||
personData.lnr.process = (data.list[0].value / total).toFixed(2);
|
||||
personData.lnr.percent = (data.list[0].value / total * 100).toFixed(2);
|
||||
personData.lnr.keyCount++;
|
||||
personData.cjr.value = data.list[1].value;
|
||||
personData.cjr.process = (data.list[1].value / total).toFixed(2);
|
||||
personData.cjr.percent = (data.list[1].value / total * 100).toFixed(2);
|
||||
personData.cjr.keyCount++;
|
||||
personData.tyfy.value = data.list[2].value;
|
||||
personData.tyfy.process = (data.list[2].value / total).toFixed(2);
|
||||
personData.tyfy.percent = (data.list[2].value / total * 100).toFixed(2);
|
||||
personData.tyfy.keyCount++;
|
||||
personData.shjz.value = data.list[3].value;
|
||||
personData.shjz.process = (data.list[3].value / total).toFixed(2);
|
||||
personData.shjz.percent = (data.list[3].value / total * 100).toFixed(2);
|
||||
personData.shjz.keyCount++;
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -42,6 +100,18 @@ import CircleWave from '../components/circle/CircleWave.vue';
|
||||
position absolute
|
||||
top 10px
|
||||
left 10px
|
||||
#lnrPercent
|
||||
top -40px
|
||||
left 0px
|
||||
#cjrPercent
|
||||
top 30px
|
||||
left 120px
|
||||
#tyfyPercent
|
||||
top -40px
|
||||
left 240px
|
||||
#shjzPercent
|
||||
top 30px
|
||||
left 350px
|
||||
.right
|
||||
width 250px
|
||||
height 200px
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
1<template>
|
||||
<template>
|
||||
<div class="module-center">
|
||||
<CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人"/>
|
||||
<CardCount1 id="mxlCount" class="item" :type="3" title="民馨路街道" unit="人"/>
|
||||
<CardCount1 id="wsqCount" class="item" :type="4" title="万水泉镇" unit="人"/>
|
||||
<CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人"/>
|
||||
<PersonPercent id="manPercent" class="item"/>
|
||||
<PersonPercent id="womenPercent" class="item" type="women"/>
|
||||
<CardTwoCount id="cardTwoCount" class="item"/>
|
||||
<CardCount1 id="xtlCount" class="item" :type="1" title="稀土路街道" unit="人" :value="xtlCount" :key="keyCount.xtl"/>
|
||||
<CardCount1 id="mxlCount" class="item" :type="3" title="民馨路街道" unit="人" :value="mxlCount" :key="keyCount.mxl"/>
|
||||
<CardCount1 id="wsqCount" class="item" :type="4" title="万水泉镇" unit="人" :value="wsqCount" :key="keyCount.wsq"/>
|
||||
<CardCount1 id="totalCount" class="item" :type="2" title="总人口数" unit="人" :value="totalCount" :key="keyCount.total"/>
|
||||
<PersonPercent id="manPercent" class="item" :value="manCount"/>
|
||||
<PersonPercent id="womenPercent" class="item" type="women" :value="womenCount"/>
|
||||
<CardTwoCount id="cardTwoCount" class="item" :data="populstionTypeData" />
|
||||
<img id="xtlIcon" class="stree-icon" src="assets/imgs/icon/xtl.png">
|
||||
<img id="mxlIcon" class="stree-icon" src="assets/imgs/icon/mxl.png">
|
||||
<img id="wsqIcon" class="stree-icon" src="assets/imgs/icon/wsq.png">
|
||||
@ -14,9 +14,80 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import PersonPercent from '../components/card/PersonPercent.vue';
|
||||
import CardCount1 from '../components/card/CardCount1.vue';
|
||||
import CardTwoCount from '../components/card/CardTwoCount.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
|
||||
const keyCount = reactive({
|
||||
xtl: 0,
|
||||
mxl: 0,
|
||||
wsq: 0,
|
||||
totalCount: 0
|
||||
});
|
||||
|
||||
const xtlCount = ref(0);
|
||||
const mxlCount = ref(0);
|
||||
const wsqCount = ref(0);
|
||||
const totalCount = ref(0);
|
||||
|
||||
// 人口
|
||||
axios.get(`app/query/sqlrelease/q3cd32d5`, {}).then(res => {
|
||||
let data = res.data;
|
||||
xtlCount.value = data.xiTu;
|
||||
mxlCount.value = data.minXin;
|
||||
wsqCount.value = data.wanShuiQuan;
|
||||
totalCount.value = data.renKou;
|
||||
|
||||
keyCount.xtl += 1;
|
||||
keyCount.mxl += 1;
|
||||
keyCount.wsq += 1;
|
||||
keyCount.totalCount += 1;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
|
||||
const manCount = ref(0);
|
||||
const womenCount = ref(0);
|
||||
// 性别
|
||||
axios.get(`app/query/sqlrelease/q1152adc`, {}).then(res => {
|
||||
let data = res.data;
|
||||
manCount.value = data[0].value;
|
||||
womenCount.value = data[1].value;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
|
||||
const populstionTypeData = reactive({
|
||||
count1: {
|
||||
value: 0,
|
||||
title: '常住人口',
|
||||
unit: '人',
|
||||
percent: 0,
|
||||
color: 'white',
|
||||
},
|
||||
count2: {
|
||||
value: 0,
|
||||
title: '流动人口',
|
||||
unit: '人',
|
||||
percent: 0,
|
||||
color: 'white',
|
||||
},
|
||||
})
|
||||
// 常驻人口
|
||||
axios.get(`app/query/sqlrelease/qdf8f806`, {}).then(res => {
|
||||
let data = res.data;
|
||||
let total = data[0].value + data[1].value;
|
||||
populstionTypeData.count1.value = data[0].value;
|
||||
populstionTypeData.count1.percent = (data[0].value / total).toFixed(2);
|
||||
populstionTypeData.count2.value = data[1].value;
|
||||
populstionTypeData.count2.percent = (data[1].value / total).toFixed(2);
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -58,15 +129,14 @@ import CardTwoCount from '../components/card/CardTwoCount.vue';
|
||||
top 220px
|
||||
left 600px
|
||||
#manPercent
|
||||
top 400px
|
||||
left 210px
|
||||
top 450px
|
||||
left 120px
|
||||
transform scale(1.2)
|
||||
#womenPercent
|
||||
top 420px
|
||||
left 240px
|
||||
transform scale(0.6)
|
||||
#cardTwoCount
|
||||
top 400px
|
||||
left 320px
|
||||
top 470px
|
||||
left 160px
|
||||
transform scale(0.8)
|
||||
|
||||
#cardTwoCount
|
||||
top 450px
|
||||
left 380px
|
||||
</style>
|
||||
@ -1,26 +1,37 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard1 title="民族分布统计">
|
||||
<BarSpike id="barSpike" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" />
|
||||
<BarSpike id="barSpike" w="440" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"/>
|
||||
</ModuleCard1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import ModuleCard1 from './card/ModuleCard1.vue';
|
||||
import BarSpike from '../components/echarts/BarSpike.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
|
||||
const keyCount = ref(0);
|
||||
const barChart = reactive({
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: [120, 200, 150, 80, 70, 110, 130]
|
||||
})
|
||||
|
||||
xData: [],
|
||||
data: []
|
||||
});
|
||||
axios.get(`app/query/sqlrelease/q419513e`, {}).then(res => {
|
||||
let data = res.data;
|
||||
data.forEach((item, index) => {
|
||||
barChart.xData.push(item.name);
|
||||
barChart.data.push(item.value);
|
||||
})
|
||||
keyCount.value++;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.module
|
||||
.bar-spike
|
||||
background-image url(assets/imgs/card/bg9.png)
|
||||
// .module
|
||||
// .bar-spike
|
||||
// background-image url(assets/imgs/card/bg9.png)
|
||||
</style>
|
||||
@ -1,35 +1,35 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard1 title="信访管理类人员">
|
||||
<PolarHalf id="polarHalf" w="440" :data="polarHalfChart.data" :unit="polarHalfChart.unit" />
|
||||
<PolarHalf id="polarHalf" w="500" :data="polarHalfChart.data" :unit="polarHalfChart.unit" title="" :key="keyCount"/>
|
||||
</ModuleCard1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import ModuleCard1 from './card/ModuleCard1.vue';
|
||||
import PolarHalf from '../components/echarts/PolarHalf.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
const keyCount = ref(0);
|
||||
|
||||
const polarHalfChart = reactive({
|
||||
unit: '人',
|
||||
data: [{
|
||||
name: '矛盾纠纷类',
|
||||
value: 40
|
||||
}, {
|
||||
name: '涉邪人员',
|
||||
value: 10
|
||||
}, {
|
||||
name: '吸毒人员',
|
||||
value: 20
|
||||
}, {
|
||||
name: '社会治安',
|
||||
value: 10
|
||||
}, {
|
||||
name: '重点上访',
|
||||
value: 900
|
||||
}]
|
||||
})
|
||||
data: []
|
||||
});
|
||||
axios.get('app/query/sqlrelease/qfe27ad0', {}).then(res => {
|
||||
let data = res.data;
|
||||
data.forEach((item, value) => {
|
||||
polarHalfChart.data.push({
|
||||
name: item.name,
|
||||
value: item.value
|
||||
})
|
||||
});
|
||||
keyCount.value++;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
@ -1,16 +1,38 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard1 title="宗教信仰统计">
|
||||
<ScrollPanel/>
|
||||
<ScrollPanel :data="scrollData" :key="keyCount"/>
|
||||
</ModuleCard1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import ModuleCard1 from './card/ModuleCard1.vue';
|
||||
import ScrollPanel from '../components/scroll/ScrollPanel.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
const keyCount = ref(0)
|
||||
const scrollData = reactive([])
|
||||
|
||||
axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
|
||||
let data = res.data;
|
||||
let total = 0;
|
||||
data.forEach((item, index) => {
|
||||
total += item.value;
|
||||
});
|
||||
data.forEach((item, index) => {
|
||||
scrollData.push({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
percent: (item.value / total * 100).toFixed(2)
|
||||
})
|
||||
})
|
||||
keyCount.value++;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
@ -1,25 +1,39 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard2 title="年龄分布情况">
|
||||
<Bar id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" />
|
||||
<Bar id="bar" w="400" h="300" :x-data="barChart.xData" :data="barChart.data" title="" :key="keyCount"/>
|
||||
</ModuleCard2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import ModuleCard2 from './card/ModuleCard2.vue';
|
||||
import Bar from '../components/echarts/Bar.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
const keyCount = ref(0);
|
||||
|
||||
const barChart = reactive({
|
||||
xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
data: [120, 200, 150, 80, 70, 110, 130]
|
||||
xData: [],
|
||||
data: []
|
||||
})
|
||||
|
||||
|
||||
axios.get(`app/query/sqlrelease/q2c03064`, {}).then(res => {
|
||||
let data = res.data;
|
||||
data.forEach(item => {
|
||||
barChart.xData.push(item.name);
|
||||
barChart.data.push(item.value);
|
||||
})
|
||||
keyCount.value++;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.module
|
||||
.bar
|
||||
background-image url(assets/imgs/card/bg9.png)
|
||||
// .module
|
||||
// .bar
|
||||
// background-image url(assets/imgs/card/bg9.png)
|
||||
</style>
|
||||
@ -3,11 +3,11 @@
|
||||
<ModuleCard2 title="特殊信息类人员">
|
||||
<div class="module-card2-container">
|
||||
<div class="person-count1-container">
|
||||
<PersonCount1/>
|
||||
<PersonCount1 :value="totalCount" :key="keyCount"/>
|
||||
</div>
|
||||
<div class="person-count2-container">
|
||||
<PersonCount2 class="count1"/>
|
||||
<PersonCount2 class="count2" :bg-type="2"/>
|
||||
<PersonCount2 class="count1" title="社区矫正" :value="sqjzCount" :key="keyCount"/>
|
||||
<PersonCount2 class="count2" title="刑满释放" :value="xmsfCount" :bg-type="2" :key="keyCount"/>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleCard2>
|
||||
@ -15,11 +15,27 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import ModuleCard2 from './card/ModuleCard2.vue';
|
||||
import PersonCount1 from '../components/card/PersonCount1.vue';
|
||||
import PersonCount2 from '../components/card/PersonCount2.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
const keyCount = ref(0);
|
||||
|
||||
const totalCount = ref(0);
|
||||
const sqjzCount = ref(0);
|
||||
const xmsfCount = ref(0);
|
||||
axios.get(`app/query/sqlrelease/qab48a3b`).then(res => {
|
||||
let data = res.data;
|
||||
totalCount.value = data[0].value + data[1].value;
|
||||
sqjzCount.value = data[0].value;
|
||||
xmsfCount.value = data[1].value;
|
||||
keyCount.value++;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
|
||||
@ -1,20 +1,34 @@
|
||||
<template>
|
||||
<div class="module">
|
||||
<ModuleCard2 title="政治面貌统计">
|
||||
<Pie3d id="pie3d" w="400" h="200" />
|
||||
<Pie3d id="pie3d" w="400" h="200" :data="pie3dData" :key="keyCount"/>
|
||||
</ModuleCard2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
import { ref, reactive, inject } from 'vue';
|
||||
import ModuleCard2 from './card/ModuleCard2.vue';
|
||||
import Pie3d from '../components/echarts/Pie3d.vue';
|
||||
|
||||
const axios = inject('axios');
|
||||
const keyCount = ref(0);
|
||||
const pie3dData = reactive([]);
|
||||
|
||||
axios.get(`app/query/sqlrelease/qaf6b78b`, {}).then(res => {
|
||||
let data = res.data;
|
||||
data.forEach(item => {
|
||||
pie3dData.push(item)
|
||||
})
|
||||
keyCount.value++;
|
||||
}).catch(err => {
|
||||
console.error(err);
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.module
|
||||
.pie-3d
|
||||
background-image url(assets/imgs/card/bg9.png)
|
||||
// .module
|
||||
// .pie-3d
|
||||
// background-image url(assets/imgs/card/bg9.png)
|
||||
</style>
|
||||
@ -14,6 +14,7 @@ html, body {
|
||||
height: max-content;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(0, 2, 5)
|
||||
}
|
||||
|
||||
#app {
|
||||
|
||||
@ -3,5 +3,9 @@ import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [vue()],
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user