|
|
@@ -0,0 +1,150 @@
|
|
|
+<template>
|
|
|
+ <div class="modelBlock">
|
|
|
+ <template v-if="permissionFiltering">
|
|
|
+ <div class="model-title">
|
|
|
+ <div class="model-title-text">住户身份占比</div>
|
|
|
+ </div>
|
|
|
+ <div class="model-content">
|
|
|
+ <zz-echart :option="clientOptions" class="chart"></zz-echart>
|
|
|
+ <div class="totals">
|
|
|
+ <span>{{ total }}</span>
|
|
|
+ <span class="numbers">总人数</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <no-permission v-else tipsText="住户身份占比"></no-permission>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { GradualChange, ringType } from '../indexOptionChart';
|
|
|
+import permissionComponent from '../permissionComponent';
|
|
|
+const colors = [
|
|
|
+ GradualChange('#22D8FF', '#00B2FF'),
|
|
|
+ GradualChange('#F0646C', '#F4994E'),
|
|
|
+ GradualChange('#5EEDCC ', '#24C3F1'),
|
|
|
+ GradualChange('#7178FF', '#D2A4FF'),
|
|
|
+ GradualChange('#884DD2', '#DF63CC')
|
|
|
+];
|
|
|
+export default {
|
|
|
+ mixins: [permissionComponent],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ defaultModel: {
|
|
|
+ permissUrl: 'ownerManagement/index',
|
|
|
+ titleName: '住户管理'
|
|
|
+ },
|
|
|
+ mixins_query: {
|
|
|
+ communityId: ''
|
|
|
+ },
|
|
|
+ total: 0,
|
|
|
+ clientOptions: ringType(
|
|
|
+ colors,
|
|
|
+ [
|
|
|
+ { value: 0, name: '业主' },
|
|
|
+ { value: 0, name: '亲属' },
|
|
|
+ { value: 0, name: '租客' },
|
|
|
+ { value: 0, name: '租户管理员' },
|
|
|
+ { value: 0, name: '普通员工' }
|
|
|
+ ],
|
|
|
+ {},
|
|
|
+ { type: 'number', total: 0 }
|
|
|
+ )
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getData() {
|
|
|
+ this.$http.get('/sc-community/statisticsUserIdentities', this.mixins_query).then(({ data, msg, status }) => {
|
|
|
+ if (status == 0 && !!data.datas) {
|
|
|
+ this.clientOptions = ringType(colors, this.eachartObj(data), {}, { type: 'number', total: data.total });
|
|
|
+ } else {
|
|
|
+ this.clientOptions = ringType(
|
|
|
+ colors,
|
|
|
+ [
|
|
|
+ { value: 0, name: '业主' },
|
|
|
+ { value: 0, name: '亲属' },
|
|
|
+ { value: 0, name: '租客' },
|
|
|
+ { value: 0, name: '租户管理员' },
|
|
|
+ { value: 0, name: '普通员工' }
|
|
|
+ ],
|
|
|
+ {},
|
|
|
+ { type: 'number', total: 0 }
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ eachartObj(data) {
|
|
|
+ this.total = data.total;
|
|
|
+ let typeName = {
|
|
|
+ 1: '业主',
|
|
|
+ 2: '亲属',
|
|
|
+ 3: '租客',
|
|
|
+ 4: '租户管理员',
|
|
|
+ 5: '普通员工'
|
|
|
+ };
|
|
|
+ let newData = [];
|
|
|
+ for (let a in data.datas) {
|
|
|
+ newData.push({
|
|
|
+ value: data.datas[a],
|
|
|
+ name: typeName[a]
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return newData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@assets/css/public-style.scss';
|
|
|
+.modelBlock {
|
|
|
+ height: 100%;
|
|
|
+ padding: rem(15) rem(20) rem(20);
|
|
|
+ background: #171f32;
|
|
|
+ .model-title {
|
|
|
+ line-height: rem(30);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-bottom: rem(15);
|
|
|
+ border-bottom: 1px solid rgba(224, 225, 227, 0.2);
|
|
|
+ .saveColumn-select {
|
|
|
+ width: rem(120);
|
|
|
+ margin-left: rem(20);
|
|
|
+ /deep/ .el-input__inner {
|
|
|
+ background: transparent;
|
|
|
+ color: white;
|
|
|
+ border-color: rgba(255, 255, 255, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .model-title-text {
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .model-content {
|
|
|
+ height: calc(100% - #{rem(45)});
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 12px;
|
|
|
+ position: relative;
|
|
|
+ .totals {
|
|
|
+ position: absolute;
|
|
|
+ right: rem(10);
|
|
|
+ top: rem(26);
|
|
|
+ width: rem(120);
|
|
|
+ height: rem(40);
|
|
|
+ background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 20px;
|
|
|
+ padding: rem(8) rem(10);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .numbers {
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.5;
|
|
|
+ line-height: rem(32);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Shannon_mu