财务统计

commandCenter/src/components/common/Header.vue

@@ -1,151 +1,148 @@
 <template>
-  <div class="v-header">
-    <div class="v-header-left">
-      <div class="left-img inlineBlock"></div>
-      <div class="system-title">
-        <div class="zh">智慧社区指挥调度中心</div>
-        <div class="en">Smart Community Space Management System</div>
-      </div>
-      <div class="left-img rights inlineBlock"></div>
-    </div>
-    <div class="v-header-center">
-      <div
-        class="tabSelect"
-        v-for="(item, index) in tagTableArr"
-        :key="index"
-        :class="tagTabIndex == index ? 'active' : ''"
-        @click="selectTab(index)"
-      >
-        {{ item }}
-      </div>
-    </div>
-    <div class="v-header-right">
-      <div class="right-imgs"></div>
-      <div>
-        <span class="selectIocn"></span>
-        <el-select
-          v-model="communityId"
-          placeholder="所有社区"
-          class="saveColumn-select"
-          @change="$store.commit('setHomeCommunityAll', communityId)"
-        >
-          <el-option
-            v-for="(item, index) in communityList"
-            :label="item.communityName"
-            :value="item.id"
-            :key="index"
-          ></el-option>
-        </el-select>
-      </div>
+    <div class="v-header">
+        <div class="v-header-left">
+            <div class="left-img inlineBlock"></div>
+            <div class="system-title">
+                <div class="zh">智慧社区指挥调度中心</div>
+                <div class="en">Smart Community Space Management System</div>
+            </div>
+            <div class="left-img rights inlineBlock"></div>
+        </div>
+        <div class="v-header-center">
+            <div
+                class="tabSelect"
+                v-for="(item, index) in tagTableArr"
+                :key="index"
+                :class="tagTabIndex == index ? 'active' : ''"
+                @click="selectTab(index)"
+            >
+                {{ item }}
+            </div>
+        </div>
+        <div class="v-header-right">
+            <div class="right-imgs"></div>
+            <div>
+                <span class="selectIocn"></span>
+                <el-select
+                    v-model="communityId"
+                    placeholder="所有社区"
+                    class="saveColumn-select"
+                    @change="$store.commit('setHomeCommunityAll', communityId)"
+                >
+                    <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
+                </el-select>
+            </div>
 
-      <div class="time">
-        <div class="date">{{ time.date }}</div>
-        <div class="dates">
-          <div class="thisTime">{{ time.thisTime }}</div>
-          <div class="week">{{ time.week }}</div>
+            <div class="time">
+                <div class="date">{{ time.date }}</div>
+                <div class="dates">
+                    <div class="thisTime">{{ time.thisTime }}</div>
+                    <div class="week">{{ time.week }}</div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 <script>
 import envConfig from '@/config';
 export default {
-  name: 'vheader',
-  data () {
-    return {
-      name: '',
-      envConfig: envConfig,
-      tagTableArr: ['指挥调度', '社区资产', '产业招商', '运营服务', '财务分析', '视频监控'],
-      tagTabIndex: 0,
-      time: {
-        thisTime: '2000/01/01',
-        week: '星期一',
-        date: '00:00:00'
-      },
-      communityList: [],
-      communityId: ''
-    };
-  },
-  computed: {
-    cruUserInfo () {
-      return this.$store.getters['getCruUserInfo'];
-    }
-  },
-  methods: {
-    getUserInfo () {
-      this.$http.postForm('/sc-user-center/user/findLoginUserById').then(({ status, data, msg }) => {
-        if (status === 0) {
-          this.$store.commit('setcCruUserInfo', data);
-        } else {
-          this.$message.error('获取用户信息失败');
+    name: 'vheader',
+    data() {
+        return {
+            name: '',
+            envConfig: envConfig,
+            tagTableArr: ['指挥调度', '社区资产', '产业招商', '运营服务', '财务分析', '视频监控'],
+            tagTabIndex: 0,
+            time: {
+                thisTime: '2000/01/01',
+                week: '星期一',
+                date: '00:00:00'
+            },
+            communityList: [],
+            communityId: ''
+        };
+    },
+    computed: {
+        cruUserInfo() {
+            return this.$store.getters['getCruUserInfo'];
         }
-      });
     },
-    // 退出登录
-    logOut () {
-      var access_token = localStorage.getItem('SC_token');
-      this.$http.postForm('/sc-user-auth/user/logout', { access_token: access_token }).then(({ status, data, msg }) => {
-        if (0 === status) {
-          this.$message({
-            type: 'success',
-            message: '您已退出登录'
-          });
-          localStorage.removeItem('SC_token');
-          sessionStorage.removeItem('SC_listMuen');
-          this.$store.commit('setloginInfo', '');
-          this.$store.dispatch('tags', []);
+    methods: {
+        getUserInfo() {
+            this.$http.postForm('/sc-user-center/user/findLoginUserById').then(({ status, data, msg }) => {
+                if (status === 0) {
+                    this.$store.commit('setcCruUserInfo', data);
+                } else {
+                    this.$message.error('获取用户信息失败');
+                }
+            });
+        },
+        // 退出登录
+        logOut() {
+            var access_token = localStorage.getItem('SC_token');
+            this.$http.postForm('/sc-user-auth/user/logout', { access_token: access_token }).then(({ status, data, msg }) => {
+                if (0 === status) {
+                    this.$message({
+                        type: 'success',
+                        message: '您已退出登录'
+                    });
+                    localStorage.removeItem('SC_token');
+                    sessionStorage.removeItem('SC_listMuen');
+                    this.$store.commit('setloginInfo', '');
+                    this.$store.dispatch('tags', []);
 
-          sessionStorage.removeItem('tabs');
-          window.location.href = this.envConfig.loginUrl;
-        } else {
-          this.$message.error(msg);
+                    sessionStorage.removeItem('tabs');
+                    window.location.href = this.envConfig.loginUrl;
+                } else {
+                    this.$message.error(msg);
+                }
+            });
+        },
+        getTime() {
+            this.time.date = this.$moment().format('HH:mm:ss');
+            this.time.week = this.$moment().format('dddd');
+            this.time.thisTime = this.$moment().format('YYYY/MM/DD');
+        },
+        communityNameList() {
+            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
+                if (status == 0) {
+                    this.communityList = data;
+                    this.communityId = data[0].id;
+                    this.$store.commit('setHomeCommunityAll', this.communityId);
+                    this.$store.commit('setAreaSelect', data);
+                }
+            });
+        },
+        selectTab(index) {
+            this.tagTabIndex = index;
+            window.localStorage.setItem('tagTabIndex', index);
+            window.sessionStorage.setItem('tagTabIndex', index);
+            if (index == 0) {
+                this.$router.push('/homeIndex');
+            } else if (index == 1) {
+                this.$router.push('/communityAssets');
+            } else if (index == 2) {
+                this.$router.push('/industrialInvestment');
+            } else if (index == 3) {
+                this.$router.push('/operationalServices');
+            } else if (index == 4) {
+                this.$router.push('/financialAnalysis');
+            }
         }
-      });
-    },
-    getTime () {
-      this.time.date = this.$moment().format('HH:mm:ss');
-      this.time.week = this.$moment().format('dddd');
-      this.time.thisTime = this.$moment().format('YYYY/MM/DD');
     },
-    communityNameList () {
-      this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
-        if (status == 0) {
-          this.communityList = data;
-          this.communityId = data[0].id;
-          this.$store.commit('setHomeCommunityAll', this.communityId);
-          this.$store.commit('setAreaSelect', data);
+    mounted() {},
+    created() {
+        if (!!window.localStorage.tagTabIndex && !!window.sessionStorage.tagTabIndex) {
+            this.tagTabIndex = window.localStorage.tagTabIndex;
+        } else {
+            this.tagTabIndex = 0;
         }
-      });
-    },
-    selectTab (index) {
-      this.tagTabIndex = index;
-      window.localStorage.setItem('tagTabIndex', index);
-      window.sessionStorage.setItem('tagTabIndex', index);
-      if (index == 0) {
-        this.$router.push('/homeIndex')
-      } else if (index == 1) {
-        this.$router.push('/communityAssets')
-      } else if (index == 2) {
-        this.$router.push('/industrialInvestment')
-      } else if (index == 3) {
-        this.$router.push('/operationalServices')
-      }
-    }
-  },
-  mounted () { },
-  created () {
-    if (!!window.localStorage.tagTabIndex && !!window.sessionStorage.tagTabIndex) {
-      this.tagTabIndex = window.localStorage.tagTabIndex
-    } else {
-      this.tagTabIndex = 0;
+        setInterval(() => {
+            this.getTime();
+        }, 1000);
+        this.getUserInfo();
+        this.communityNameList();
     }
-    setInterval(() => {
-      this.getTime();
-    }, 1000);
-    this.getUserInfo();
-    this.communityNameList();
-  }
 };
 </script>
 <style lang='scss' scoped>

commandCenter/src/router/index.js

@@ -36,6 +36,14 @@ const quietRoute = [
                 component: () => import(/* webpackChunkName: "404" */ '@views/operationalServices/index.vue'),
                 meta: { title: 'operationalServices' }
             },
+
+            {
+                path: '/financialAnalysis',
+                name: 'financialAnalysis',
+                component: () => import(/* webpackChunkName: "404" */ '@views/financialAnalysis/index.vue'),
+                meta: { title: 'financialAnalysis' }
+            },
+
             {
                 path: '/403',
                 component: () => import(/* webpackChunkName: "404" */ '@views/errorPage/403.vue'),

commandCenter/src/views/financialAnalysis/index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="contentShow">
+        <div class="overflowHidden mr10 list_1_2">
+            <net-receipts></net-receipts>
+        </div>
+        <div class="overflowHidden mr10 list_1-3">
+            <collectionRate></collectionRate>
+        </div>
+        <div class="overflowHidden mr10 list_1-4">
+            <income-mode></income-mode>
+        </div>
+        <div class="overflowHidden mr10 list_2_2">
+            <parking-lot></parking-lot>
+        </div>
+        <div class="overflowHidden mr10 list_2-3">
+            <deposit></deposit>
+        </div>
+        <div class="overflowHidden mr10 list_2-4">
+            <deposit-balance></deposit-balance>
+        </div>
+        <div class="overflowHidden mr10 list_3_2">
+            <hydropower labeText="年度水费支出" :type="2"></hydropower>
+        </div>
+        <div class="overflowHidden mr10 list_3_4">
+            <hydropower labeText="年度电费支出" :type="3"></hydropower>
+        </div>
+    </div>
+</template>
+<script>
+import smallModuleIndex from './smallModuleIndex/index';
+export default {
+    mixins: [smallModuleIndex]
+};
+</script>
+<style lang="scss" scoped>
+.mr10 {
+    margin: 10px;
+}
+.contentShow {
+    height: 100%;
+    padding-top: 100px;
+    width: 100%;
+    border-radius: 4px;
+    display: grid;
+    box-sizing: border-box;
+    grid-template-columns: 2fr 2fr 2fr 2fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    gap: 0px;
+    color: white;
+    .list_1_2 {
+        grid-area: 1 / 1 / 1 / span 2;
+    }
+    .list_1-3 {
+        grid-area: 1 / 3 / 1 / 3;
+    }
+    .list_1-4 {
+        grid-area: 1 / 4 / 1 / 4;
+    }
+
+    .list_2_2 {
+        grid-area: 2 / 1 / 2 / span 2;
+    }
+    .list_2-3 {
+        grid-area: 2 / 3 / 2 / 3;
+    }
+    .list_2-4 {
+        grid-area: 2 / 4 / 2 / 4;
+    }
+    .list_3_2 {
+        grid-area: 3 / 1 / 3 / span 2;
+    }
+    .list_3_4 {
+        grid-area: 3 / 3 / 3 / span 4;
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/allcommunit.js

@@ -0,0 +1,32 @@
+import { mapState } from 'vuex';
+export default {
+  data() {
+    return {
+      loadding: true,
+    }
+  },
+  computed: {
+    //全局社区
+    ...mapState(['homeCommunityAll']),
+
+    resize() {
+      // 通过scale值来判断窗口是变化
+      return this.$store.getters['getScale'];
+    }
+  },
+  watch: {
+    //全局社区接口调用
+    'homeCommunityAll'(n) {
+      this.mixins_query.communityId = n;
+      this.getData();
+    }, resize(va) {
+      // console.log(va);
+    }
+  },
+  methods: {
+  },
+  created() {
+    this.mixins_query.communityId = this.homeCommunityAll;
+    // this.getData();
+  }
+}

commandCenter/src/views/financialAnalysis/smallModuleIndex/circle.vue

@@ -0,0 +1,110 @@
+<template>
+    <div :style="svgStyle">
+        <svg :style="svgStyle">
+            <defs>
+                <linearGradient id="orange_red" x1="1%" y1="0%" x2="100%" y2="0%">
+                    <stop offset="0%" style="stop-color: #24c3f1; stop-opacity: 1" />
+                    <stop offset="100%" style="stop-color: #5eedcc; stop-opacity: 1" />
+                </linearGradient>
+            </defs>
+            <!--内边框 -->
+            <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" />
+            <!--外边框 -->
+            <path
+                :d="pathString"
+                stroke-linecap="round"
+                stroke="url(#orange_red)"
+                :stroke-width="strokeWidth"
+                fill-opacity="0"
+                :style="pathStyle"
+            />
+        </svg>
+        <div class="vux-circle-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'processCircle',
+    props: {
+        strokeWidth: {
+            // 线条宽度
+            type: Number,
+            default: 1
+        },
+        strokeColor: {
+            // 线条颜色
+            type: String,
+            default: '#2C3345'
+        },
+        trailWidth: {
+            // 背景线条宽度
+            type: Number,
+            default: 1
+        },
+        trailColor: {
+            // 背景线条宽度
+            type: String,
+            default: '#D9D9D9'
+        },
+        percent: {
+            // 进度百分比
+            type: Number,
+            default: 0
+        },
+        rd: {
+            // 圆大小半径
+            type: Number,
+            default: 60
+        }
+    },
+    computed: {
+        svgStyle() {
+            return {
+                width: `${2 * this.rd}px`,
+                height: `${2 * this.rd}px`,
+                position: 'relative'
+            };
+        },
+        radius() {
+            // 外圆圆半径
+            return this.rd - this.strokeWidth / 2;
+        },
+        pathString() {
+            return `M ${this.rd},${this.rd} m 0,-${this.radius}
+      a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
+      a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
+        },
+        len() {
+            // Math.PI 圆周率 3.141592653589793  len是圆的周长
+            return Math.PI * 2 * this.radius;
+        },
+        pathStyle() {
+            return {
+                'stroke-dasharray': `${this.len}px ${this.len}px`,
+                // eslint-disable-next-line prettier/prettier
+                'stroke-dashoffset': `${((100 - this.percent) / 100) * this.len}px`, // 动画占圆周长百分比
+                transition: 'stroke-dashoffset 1s ease' // 2s代表动画时间
+            };
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.vux-circle-content {
+  text-align: center;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  span {
+    font-size: 20px;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+  }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/collectionRate.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">收款率分析</div>
+            <div class="model-title-right">
+                <el-date-picker
+                    value-format="yyyy-MM"
+                    v-model="date"
+                    type="month"
+                    placeholder="选择月"
+                    class="saveColumn-select saveColumn-select-time"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+                <el-select v-model="mixins_query.chargeType" placeholder="所有费用" clearable class="saveColumn-select" @change="getData">
+                    <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
+                </el-select>
+            </div>
+        </div>
+        <div class="model-content">
+            <process-circle
+                class="item"
+                :strokeWidth="strokeWidth"
+                :trailWidth="trailWidth"
+                :trailColor="trailColor"
+                :percent="dataObj.receivedAmount"
+            >
+                <span class="ashText" style="font-size: 14px">收款率</span>
+                <span> {{ dataObj.collectionRate }}</span>
+            </process-circle>
+            <div class="textAmount">
+                <div class="listAmount">
+                    <div class="listText">应收金额</div>
+                    <div class="listNumber">{{ dataObj.receivableAmount }}</div>
+                </div>
+                <div class="listAmount">
+                    <div class="listText">已收金额</div>
+                    <div class="listNumber">{{ dataObj.receivedAmount }}</div>
+                </div>
+                <div class="listAmount">
+                    <div class="listText">未收金额</div>
+                    <div class="listNumber">{{ dataObj.uncollected }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import processCircle from './circle';
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    components: {
+        processCircle
+    },
+    data() {
+        return {
+            strokeWidth: 15, // 线条宽度
+            trailWidth: 15, // 背景线条宽度
+            trailColor: '#2C3345', // 背景线条宽度
+            mixins_query: {
+                communityId: '',
+                chargeType: '',
+                startTime: '',
+                endTime: ''
+            },
+            date: '',
+            amountType: [
+                {
+                    value: 1,
+                    name: '物业费'
+                },
+                {
+                    value: 2,
+                    name: '水费'
+                },
+                {
+                    value: 3,
+                    name: '电费'
+                },
+                {
+                    value: 4,
+                    name: '车位费'
+                },
+                {
+                    value: 6,
+                    name: '卫生费'
+                },
+                {
+                    value: 7,
+                    name: '其他费用'
+                }
+            ],
+            dataObj: {
+                receivedAmount: 0,
+                receivableAmount: 0,
+                uncollected: 0,
+                collectionRate: '0%'
+            }
+        };
+    },
+
+    methods: {
+        getData() {
+            this.$http.post('/sc-charge/charge/report/statistics/receivable', this.mixins_query).then(({ data, msg, status }) => {
+                if (status == 0 && !!data) {
+                    this.dataObj = {
+                        receivableAmount: !!data.receivableAmount ? data.receivableAmount : 0,
+                        receivedAmount: !!data.receivedAmount ? data.receivedAmount : 0,
+                        uncollected: !!data.uncollectedAmount ? data.uncollectedAmount : 0,
+                        collectionRate: !!data.collectionRate ? data.collectionRate : '0%'
+                    };
+                } else {
+                    this.dataObj = {
+                        receivableAmount: 0,
+                        receivedAmount: 0,
+                        uncollected: 0,
+                        collectionRate: '0%'
+                    };
+                }
+            });
+        },
+        changeTime(v) {
+            this.mixins_query.startTime = v;
+            this.mixins_query.endTime = v;
+            this.getData();
+        }
+    },
+    created() {
+        this.mixins_query.startTime = this.$moment().format('YYYY-MM');
+        this.mixins_query.endTime = this.$moment().format('YYYY-MM');
+        this.date = this.$moment().format('YYYY-MM');
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.modelBlock {
+    // .model-content {
+    //     height: calc(100% - 80px);
+    // }
+}
+
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: 10px;
+            }
+        }
+    }
+}
+
+.textAmount {
+    width: 100px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    .listAmount {
+        font-size: 12px;
+        .listText {
+            opacity: 0.5;
+        }
+        .listNumber {
+            font-size: 20px;
+            &:first-child {
+                margin: 0;
+            }
+        }
+    }
+}
+.item {
+    margin-top: 25px;
+    margin-left: 25px;
+    .ashText {
+        opacity: 0.5;
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/deposit.vue

@@ -0,0 +1,153 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">押金分析</div>
+            <div class="model-title-right">
+                <el-date-picker
+                    value-format="yyyy-MM"
+                    v-model="date"
+                    type="month"
+                    placeholder="选择月"
+                    class="saveColumn-select saveColumn-select-time"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </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>
+    </div>
+</template>
+<script>
+import { GradualChange, ringType } from './indexOptionChart';
+const colors = [
+    GradualChange('#22D8FF', '#00B2FF'),
+    GradualChange('#F0646C', '#F4994E'),
+    GradualChange('#5EEDCC ', '#24C3F1'),
+    GradualChange('#7178FF', '#D2A4FF'),
+    GradualChange('#884DD2', '#DF63CC')
+];
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                yearMonth: ''
+            },
+            date: '',
+            total: 0,
+            clientOptions: ringType(
+                colors,
+                [
+                    { value: 0, name: '装修押金' },
+                    { value: 0, name: '租赁押金' }
+                ],
+                {},
+                { type: 'number', total: 0 }
+            )
+        };
+    },
+    methods: {
+        getData() {
+            this.$http.get('/sc-charge/deposit/statistics/received', 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: '租赁押金' }
+                        ],
+                        {},
+                        { type: 'number', total: 0 }
+                    );
+                }
+            });
+        },
+        changeTime(v) {
+            this.mixins_query.yearMonth = v;
+            this.getData();
+        },
+        eachartObj(data) {
+            this.total = data.total;
+            let typeName = {
+                1: '装修押金',
+                2: '租赁押金'
+            };
+            let newData = [];
+            for (let a in data.datas) {
+                newData.push({
+                    value: data.datas[a],
+                    name: typeName[a]
+                });
+            }
+            return newData;
+        }
+    },
+    created() {
+        this.date = this.$moment().format('YYYY-MM');
+        this.mixins_query.yearMonth = this.$moment().format('YYYY-MM');
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import '@assets/css/public-style.scss';
+.modelBlock {
+    height: 100%;
+    padding: 15px 20px 20px;
+    background: #171f32;
+    .model-title {
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 15px;
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: 120px;
+            margin-left: 20px;
+            /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% - 45px);
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+        .totals {
+            position: absolute;
+            right: 10px;
+            top: 26px;
+            width: 120px;
+            height: 40px;
+            background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+            border-radius: 5px;
+            font-size: 20px;
+            padding: 8px 10px;
+            display: flex;
+            justify-content: space-between;
+            .numbers {
+                font-size: 12px;
+                opacity: 0.5;
+                line-height: 32px;
+            }
+        }
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/depositBalance.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">押金余额分析</div>
+            <div class="model-title-right">
+                <el-select v-model="mixins_query.depositType" placeholder="押金类型" clearable class="saveColumn-select" @change="getData">
+                    <el-option label="装修押金" :value="1"></el-option>
+                    <el-option label="租赁押金" :value="2"></el-option>
+                </el-select>
+                <el-date-picker
+                    value-format="yyyy"
+                    v-model="date"
+                    type="year"
+                    placeholder="选择年"
+                    class="saveColumn-select saveColumn-select-time"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </div>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { columnOptionsChartName } from './indexOptionChart.js';
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                depositType: '',
+                year: ''
+            },
+            date: '',
+            clientOptions: columnOptionsChartName(
+                '(元)',
+                ['应收', '已收', '已退', '余额'],
+                [
+                    {
+                        name: '应收',
+                        data: 0
+                    },
+                    {
+                        name: '已收',
+                        data: 0
+                    },
+                    {
+                        name: '已退',
+                        data: 0
+                    },
+                    {
+                        name: '余额',
+                        data: 0
+                    }
+                ],
+                [],
+                10
+            )
+        };
+    },
+
+    mounted() {},
+    computed: {},
+    methods: {
+        getData() {
+            this.$http
+                .get('/sc-charge/deposit/statistics/balance', this.mixins_query)
+                .then(({ status, data, msg }) => {
+                    if (status == 0 && !!data) {
+                        this.clientOptions = columnOptionsChartName(
+                            '(元)',
+                            ['应收', '已收', '已退', '余额'],
+                            [
+                                {
+                                    name: '应收',
+                                    data: data.amount || 0
+                                },
+                                {
+                                    name: '已收',
+                                    data: data.paymentAmount || 0
+                                },
+                                {
+                                    name: '已退',
+                                    data: data.refundAmount || 0
+                                },
+                                {
+                                    name: '余额',
+                                    data: data.balance || 0
+                                }
+                            ],
+                            [],
+                            10
+                        );
+                    } else {
+                        this.clientOptions = columnOptionsChartName(
+                            '(元)',
+                            ['应收', '已收', '已退', '余额'],
+                            [
+                                {
+                                    name: '应收',
+                                    data: 0
+                                },
+                                {
+                                    name: '已收',
+                                    data: 0
+                                },
+                                {
+                                    name: '已退',
+                                    data: 0
+                                },
+                                {
+                                    name: '余额',
+                                    data: 0
+                                }
+                            ],
+                            [],
+                            10
+                        );
+                    }
+                })
+                .catch((err) => {});
+        },
+        eachartObj(data) {
+            this.total = data.total;
+            let typeName = {
+                1: '微信在线',
+                2: '支付宝',
+                3: '现金',
+                4: '预存',
+                5: '其他',
+                6: '刷卡',
+                7: '微信扫码'
+            };
+            let newData = [];
+            for (let a in data.datas) {
+                newData.push({
+                    value: data.datas[a],
+                    name: typeName[a]
+                });
+            }
+            return newData;
+        },
+        changeTime(v) {
+            this.mixins_query.year = v;
+            this.getData();
+        }
+    },
+    created() {
+        this.date = this.$moment().format('YYYY');
+        this.mixins_query.year = this.$moment().format('YYYY');
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: 10px;
+            }
+        }
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/hydropower.vue

@@ -0,0 +1,88 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">{{ labeText }}</div>
+            <div class="model-title-right">
+                <el-date-picker
+                    value-format="yyyy"
+                    v-model="year"
+                    type="year"
+                    placeholder="选择年"
+                    class="saveColumn-select"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </div>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { columnOptionsChart } from './indexOptionChart';
+let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    props: {
+        labeText: {
+            type: String,
+            default: '年度水费支出'
+        },
+        type: {
+            type: Number,
+            default: 2
+        }
+    },
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                year: '',
+                type: this.type
+            },
+            year: '',
+            clientOptions: columnOptionsChart('(元)', [], [{ data: dataArr, name: this.labeText }], [], 10)
+        };
+    },
+    methods: {
+        getData() {
+            this.$http.get('/sc-charge/charge/report/sum/shared/meter/amount', this.mixins_query).then(({ data, msg, status }) => {
+                if (status == 0 && !!data.length) {
+                    let timeDay = [],
+                        datas = [];
+                    data.map((item) => {
+                        timeDay.push(item.month);
+                        datas.push(item.volume);
+                    });
+                    this.clientOptions = columnOptionsChart('(元)', timeDay, [{ data: datas, name: this.labeText }], [], 10);
+                } else {
+                    this.clientOptions = columnOptionsChart('(元)', [], [{ data: dataArr, name: this.labeText }], [], 10);
+                }
+            });
+        },
+        changeTime(v) {
+            this.mixins_query.year = v;
+            this.getData();
+        }
+    },
+    created() {
+        this.year = this.$moment().format('YYYY');
+        this.mixins_query.year = this.$moment().format('YYYY');
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: 20px;
+            }
+        }
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/incomeMode.vue

@@ -0,0 +1,173 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">收入方式</div>
+            <div class="model-title-right">
+                <el-select v-model="mixins_query.chargeType" placeholder="所有费用" clearable class="saveColumn-select" @change="getData">
+                    <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
+                </el-select>
+                <el-date-picker
+                    value-format="yyyy-MM"
+                    v-model="date"
+                    type="month"
+                    placeholder="选择月"
+                    class="saveColumn-select saveColumn-select-time"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </div>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { GradualChange, ringType } from './indexOptionChart';
+const colors = [
+    GradualChange('#22D8FF', '#00B2FF'),
+    GradualChange('#F0646C', '#F4994E'),
+    GradualChange('#5EEDCC ', '#24C3F1'),
+    GradualChange('#7178FF', '#D2A4FF'),
+    GradualChange('#884DD2', '#DF63CC')
+];
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                date: '',
+                chargeType: ''
+            },
+            date: '',
+            total: 0,
+            clientOptions: ringType(
+                colors,
+                [
+                    { value: 0, name: '微信' },
+                    { value: 0, name: '支付宝' },
+                    { value: 0, name: '现金' },
+                    { value: 0, name: '预存' },
+                    { value: 0, name: '其他' }
+                ],
+                {},
+                { type: '%', total: 0 },
+                30
+            ),
+            amountType: [
+                {
+                    value: 1,
+                    name: '物业费'
+                },
+                {
+                    value: 2,
+                    name: '水费'
+                },
+                {
+                    value: 3,
+                    name: '电费'
+                },
+                {
+                    value: 4,
+                    name: '车位费'
+                },
+                {
+                    value: 6,
+                    name: '卫生费'
+                },
+                {
+                    value: 7,
+                    name: '其他费用'
+                }
+            ]
+        };
+    },
+    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: '%', total: data.total }, 30);
+                } else {
+                    this.clientOptions = ringType(
+                        colors,
+                        [
+                            { value: 0, name: '微信' },
+                            { value: 0, name: '支付宝' },
+                            { value: 0, name: '现金' },
+                            { value: 0, name: '预存' },
+                            { value: 0, name: '其他' }
+                        ],
+                        {},
+                        { type: '%', total: 0 },
+                        30
+                    );
+                }
+            });
+        },
+        changeTime(v) {
+            this.mixins_query.date = v;
+            this.getData();
+        },
+        eachartObj(data) {
+            this.total = data.total;
+            let typeName = {
+                1: '微信在线',
+                2: '支付宝',
+                3: '现金',
+                4: '预存',
+                5: '其他',
+                6: '刷卡',
+                7: '微信扫码'
+            };
+            let newData = [];
+            for (let a in data.datas) {
+                newData.push({
+                    value: data.datas[a],
+                    name: typeName[a]
+                });
+            }
+            return newData;
+        }
+    },
+    created() {
+        this.mixins_query.date = this.$moment().format('YYYY-MM');
+        this.date = this.$moment().format('YYYY-MM');
+    }
+};
+</script>
+<style lang="scss" scoped>
+@import './style.scss';
+.modelBlock {
+    height: 100%;
+    padding: 15px 20px 20px;
+    background: #171f32;
+    .model-title {
+        line-height: 30px;
+        display: flex;
+        justify-content: space-between;
+        padding-bottom: 15px;
+        border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+        .saveColumn-select {
+            width: 120px;
+            margin-left: 20px;
+            /deep/ .el-input__inner {
+                background: transparent;
+                color: white;
+                border-color: rgba(255, 255, 255, 0.2);
+            }
+        }
+        .model-title-text {
+            color: white;
+        }
+    }
+    .model-content {
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+        position: relative;
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/index.js

@@ -0,0 +1,13 @@
+
+const comUrl = `financialAnalysis/smallModuleIndex/`
+export default {
+  components: {
+    collectionRate: (resolve) => require([`@views/${comUrl}collectionRate.vue`], resolve), // 收款率分析OK
+    hydropower: (resolve) => require([`@views/${comUrl}hydropower.vue`], resolve),//水电数据问题
+    deposit: (resolve) => require([`@views/${comUrl}deposit.vue`], resolve),//押金分析数据问题
+    depositBalance: (resolve) => require([`@views/${comUrl}depositBalance.vue`], resolve),//押金余额分析OK
+    parkingLot: (resolve) => require([`@views/${comUrl}parkingLot.vue`], resolve),//车场收入OK
+    netReceipts: (resolve) => require([`@views/${comUrl}netReceipts.vue`], resolve),//实收分析OK
+    incomeMode: (resolve) => require([`@views/${comUrl}incomeMode.vue`], resolve), //收入方式 OK
+  },
+};

commandCenter/src/views/financialAnalysis/smallModuleIndex/indexOptionChart.js

@@ -0,0 +1,1232 @@
+import echarts from "echarts";
+
+//从左往右颜色渐变
+export const GradualChange = (color1, color2) => {
+    return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+        { offset: 1, color: color1 + '' },
+        { offset: 0, color: color2 + '' || color1 + '' }
+    ]);
+};
+export const getColor = ([color1, color2]) => {
+    // 右 下 左 上
+    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        { offset: 0, color: color1 + '' },
+        { offset: 1, color: color2 + '' || color1 + '' }
+    ]);
+};
+
+export const dateType = (date) => {
+    let val = '';
+    if (date) {
+        val = `${date.slice(0, 4)}年${date.slice(4)}月`;
+    } else {
+        val = date;
+    }
+    return val;
+};
+//折现波浪线颜色渐变
+export const getItemStyle = (c1, c2) => {
+    return {
+        color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+                {
+                    offset: 0,
+                    color: c1 // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: c2 // 100% 处的颜色
+                }
+            ],
+            global: false // 缺省为 false
+        }
+    };
+};
+export const defaultMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
+export const defaultmonthData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+export const defaultName = ['name1', 'name2', 'name3'];
+
+const defaultColor = [
+    GradualChange('#22D8FF', '#00B2FF'),
+    GradualChange('#F0646C', '#F4994E'),
+    GradualChange('#5EEDCC ', '#24C3F1'),
+    GradualChange('#7178FF', '#D2A4FF'),
+    GradualChange('#884DD2', '#DF63CC')
+];
+// 饼图
+export const ringType = (color = [], data = [], title = {}, legendFcuntion = {}, tops = 80) => {
+    let legendFcuntionValue = (v) => {
+        let val = '';
+        data.map((item) => {
+            if (item.name == v) {
+                if (legendFcuntion.type == '%') {
+                    val = `{a|${v}} · · · · · · {b|${parseInt((item.value / legendFcuntion.total).toFixed(2) * 100) || 0}%}`;
+                } else {
+                    val = `{a|${v}} · · · · · · {b|${item.value}}`;
+                }
+            }
+        });
+        return val;
+    };
+    return {
+        tooltip: {
+            trigger: 'item'
+        },
+        legend: {
+            orient: 'vertical',
+            right: 10,
+            top: tops,
+            itemGap: 10,
+            itemWidth: 12, // 图例图形宽度
+            itemHeight: 8,
+            type: 'scroll',
+            formatter: (v) => {
+                return legendFcuntionValue(v);
+            },
+            textStyle: {
+                rich: {
+                    a: {
+                        fontSize: 12,
+                        color: '#858892',
+                        padding: [0, 5, 0, 0]
+                    },
+                    b: {
+                        fontSize: 14,
+                        color: '#fff',
+                        padding: [0, 0, 0, 5]
+                    }
+                }
+            }
+        },
+        title,
+        color: !!color.length ? color : defaultColor,
+        series: [
+            {
+                type: 'pie',
+                radius: ['55%', '70%'],
+                avoidLabelOverlap: false,
+                center: ['25%', '50%'],
+                label: {
+                    show: false,
+                    position: 'center'
+                },
+                labelLine: {
+                    show: false
+                },
+                data: data
+            }
+        ]
+    };
+};
+
+// 折现波浪
+export const discountedWave = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            }
+            // formatter(param) {
+            //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
+            //   param.forEach(item => {
+            //     el += `<p>
+            //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
+            //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
+            //                   <span>${item.seriesName}：${item.value}</span>
+            //                 </p>`;
+            //   });
+            //   el += `</div>`;
+            //   return el;
+            // }
+        },
+        grid: {
+            top: 50,
+            left: 5,
+            bottom: 0,
+            right: 5,
+            containLabel: true
+        },
+
+        legend: {
+            show: legendShow,
+            icon: 'circle',
+            x: 'right', // 可设定图例在左、右、居中
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                formatter: function (params, index) {
+                    return params + '月';
+                },
+                color: '#9B9DA5',
+                margin: 16
+            },
+            data: !!xAxis.length ? xAxis : defaultMonth,
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            axisLine: {
+                show: false
+            },
+            name: name,
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.2
+                }
+            }
+        },
+        series: [
+            {
+                // name: "设备告警",
+                type: 'line',
+                smooth: true,
+                symbol: 'circle', // 实心
+                symbolSize: 1, // 设定实心点的大小
+                itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
+                data: !!series.length ? series : defaultmonthData,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgba(36,121,253,0.1)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(19,194,247,0.3)'
+                            }
+                        ])
+                    }
+                },
+                lineStyle: {
+                    width: 1
+                }
+            }
+        ]
+    };
+    return option;
+};
+
+//柱状日期
+export const columnOptionsChart = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        ['#0EAEFF', '#85E9FF'],
+        ['#F0646C', '#F4994E']
+    ];
+    let seriesConfiguration = () => {
+        let seriesData = [];
+        series.map((item, index) => {
+            seriesData.push({
+                name: item.name,
+                type: 'bar',
+                data: item.data,
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[index] || defaultColor[index])
+                    }
+                },
+                barGap: '100%'
+            });
+        });
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = `<div class="dmp-echart-tooltip" style="text-align: center;"><h4>${param[0].axisValue}</h4>`;
+                param.forEach((item) => {
+                    el += `<p style="text-align: left;">
+          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                        <span>${item.seriesName}：${item.value.toFixed(2)}</span>
+                      </p>`;
+                });
+                el += `</div>`;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                formatter: function (params, index) {
+                    return params
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultMonth
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: false,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};
+
+//柱状name  单柱状
+export const columnOptionsChartName = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        ['#0EAEFF', '#85E9FF'],
+        ['#F0646C', '#F4994E']
+    ];
+    let seriesConfiguration = () => {
+        let seriesData = [
+            {
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[0] || defaultColor[0])
+                    }
+                },
+                barGap: '100%'
+            }
+        ];
+        series.map((item, index) => {
+            seriesData[0].data.push(item.data);
+        });
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = ``;
+                param.forEach((item) => {
+                    el += `<p style="text-align: left;">
+          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                        <span>${item.name}：${item.value}${name}</span>
+                      </p>`;
+                });
+                el += ``;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 10,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                formatter: function (params, index) {
+                    return params;
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultName
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: false,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};
+
+// 柱状图堆叠
+export const columnOptionsChartStacking = (name = '', xAxis = [], series = [], color = [], barWidth = 6) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        // ['#0EAEFF', '#85E9FF'],
+        ['#0EAEFF', '#0EAEFF'],
+        ['#85E9FF', '#85E9FF']
+        // ['#F0646C', '#F4994E']
+    ];
+
+    let seriesConfiguration = () => {
+        let seriesData = [
+            {
+                type: 'bar',
+                data: [],
+                name: '',
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[0] || defaultColor[0])
+                    }
+                },
+                barGap: '100%'
+            },
+            {
+                type: 'bar',
+                data: [],
+                name: '',
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[1] || defaultColor[1])
+                    }
+                },
+                barGap: '-100%',
+                z: '1'
+            }
+        ];
+        series.map((item, index) => {
+            seriesData[index].data = item.data;
+            seriesData[index].name = item.name;
+        });
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = ``;
+                param.forEach((item) => {
+                    el += `<p style="text-align: left;">
+          <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+            ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                        <span>${item.seriesName}：${item.value}${name}</span>
+                      </p>`;
+                });
+                el += ``;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 0,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                formatter: function (params, index) {
+                    return params;
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultName
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: false,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};
+
+// 折线日期  间隔4个
+export const discountedChart = (name = '', xAxis = [], series = [], legendShow = false, color = []) => {
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            }
+            // formatter(param) {
+            //   let el = `<div class="dmp-echart-tooltip"><h4>${dateType(param[0].axisValue)}</h4>`;
+            //   param.forEach(item => {
+            //     el += `<p>
+            //                   <span class="marker" style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-image: linear-gradient(to left,
+            //                     ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color});"></span>
+            //                   <span>${item.seriesName}：${item.value}</span>
+            //                 </p>`;
+            //   });
+            //   el += `</div>`;
+            //   return el;
+            // }
+        },
+        grid: {
+            top: 50,
+            left: 5,
+            bottom: 0,
+            right: 5,
+            containLabel: true
+        },
+
+        legend: {
+            show: legendShow,
+            icon: 'circle',
+            x: 'right', // 可设定图例在左、右、居中
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                interval: 4,
+                // formatter: function (params, index) {
+                //     return params.slice(5);
+                // },
+                color: '#9B9DA5',
+                margin: 16
+            },
+            data: xAxis,
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                }
+            }
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            axisLine: {
+                show: false
+            },
+            name: name,
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.2
+                }
+            }
+        },
+        series: [
+            {
+                // name: "设备告警",
+                type: 'line',
+                smooth: true,
+                symbol: 'circle', // 实心
+                symbolSize: 1, // 设定实心点的大小
+                itemStyle: getItemStyle('#5EEDCC', '#24C3F1'),
+                data: series,
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgba(36,121,253,0.1)'
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(19,194,247,0.3)'
+                            }
+                        ])
+                    }
+                },
+                lineStyle: {
+                    width: 1
+                }
+            }
+        ]
+    };
+    return option;
+};
+
+// 漏斗图
+export const funnelChart = (dataseries = [], series = []) => {
+    // var colors=[['#22D8FF','#00B2FF']]
+    var colorList = [
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#22D8FF' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#00B2FF' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#5EEDCC' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#24C3F1' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#F0646C' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#F4994E' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#7178FF' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#D2A4FF ' // 100% 处的颜色
+                }
+            ]
+        },
+        {
+            colorStops: [
+                {
+                    offset: 0,
+                    color: '#884DD2' // 0% 处的颜色
+                },
+                {
+                    offset: 1,
+                    color: '#DF63CC' // 100% 处的颜色
+                }
+            ]
+        }
+    ];
+    let option = {
+        title: {
+            text: ''
+        },
+
+        // backgroundColor:'#ffffff',
+        color: colorList,
+        series: [
+            {
+                top: 0,
+                type: 'funnel',
+                left: '15%',
+                top: '15%',
+                width: '50%',
+                height: '85%',
+                gap: 0,
+                minSize: 50,
+                maxSize: 260,
+                label: {
+                    show: true,
+                    position: 'inside',
+                    // formatter: '{d}'
+                    formatter: function (data) {
+                        return data.percent.toFixed(0) + '%';
+                    },
+                    textStyle: {
+                        shadowOffsetX: 0,
+                        fontSize: '14',
+                        shadowColor: 'rgba(0, 0, 0, 0)',
+                        color: '#FFFFFF'
+                    }
+                },
+                data: dataseries
+            },
+
+            {
+                top: 0,
+                type: 'funnel',
+                left: '0',
+                width: '30%',
+                height: '85%',
+                top: '15%',
+                gap: 16,
+                z: 1,
+                // minSize: 50,
+                // maxSize: 50,
+                label: {
+                    normal: {
+                        // padding :[11,25],
+                        formatter: function (params) {
+                            let el = `{a|${params.name}}  {b|${params.value}}`;
+                            return el;
+                        },
+                        textStyle: {
+                            rich: {
+                                a: {
+                                    fontSize: 12,
+                                    color: '#858892',
+                                    padding: [0, 5, 0, 0]
+                                },
+                                b: {
+                                    fontSize: 14,
+                                    color: '#fff',
+                                    padding: [0, 0, 0, 5]
+                                }
+                            }
+                        }
+                    }
+                },
+                //右侧的百分比显示的地方
+                labelLine: {
+                    show: true,
+                    normal: {
+                        show: false,
+                        length: 200,
+                        position: 'center',
+                        lineStyle: {
+                            width: 1,
+                            color: 'red',
+                            type: 'solid'
+                        }
+                    }
+                },
+                // 主体是透明的
+                itemStyle: {
+                    normal: {
+                        color: 'transparent',
+                        borderWidth: 0,
+                        opacity: 1
+                    }
+                },
+                data: series
+            }
+        ]
+    };
+    return option;
+};
+
+// 柱状图  双个柱图
+export const columnOptionsChartss = (name = '', xAxis = [], series = [], dataseries = [], dataName = [], color = [], barWidth = 6) => {
+    let defaultData = [
+        {
+            name: '',
+            type: 'bar',
+            data: []
+        }
+    ];
+    let defaultColor = [
+        ['#0EAEFF', '#85E9FF'],
+        ['#F0646C', '#F4994E']
+    ];
+    let seriesConfiguration = () => {
+        let seriesData = [
+            {
+                name: '',
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[0] || defaultColor[0])
+                    }
+                },
+                barGap: '100%'
+            },
+            {
+                name: '',
+                type: 'bar',
+                data: [],
+                barWidth: barWidth,
+                itemStyle: {
+                    normal: {
+                        barBorderRadius: [15, 15, 0, 0],
+                        color: getColor(color[1] || defaultColor[1])
+                    }
+                },
+                barGap: '100%'
+            }
+        ];
+        series.map((item, index) => {
+            seriesData[0].data.push(item.data);
+            seriesData[0].name = dataName[0];
+        });
+        dataseries.map((items, indexs) => {
+            seriesData[1].data.push(items.data);
+            seriesData[1].name = dataName[1];
+        });
+
+        return seriesData;
+    };
+    let option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                shadowStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            {
+                                offset: 0,
+                                color: 'rgba(31,207,245,0)' // 0% 处的颜色
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 0.2,
+                                color: 'rgba(31,207,245,0.15)' // 100% 处的颜色
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(31,207,245,0.05)'
+                            }
+                        ],
+                        global: false // 缺省为 false
+                    }
+                },
+                crossStyle: {
+                    shadowBlur: 30,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                }
+            },
+            extraCssText: 'background:rgba(33,40,56,0.6);border-radius:4px;padding:6px 10px',
+            textStyle: {
+                fontSize: 12,
+                color: '#FFFFFF'
+            },
+            formatter(param) {
+                let el = ``;
+                param.forEach((item) => {
+                    el += `<p style="text-align: left;">
+        <span style="display:inline-block;margin-right:5px;border-radius:4px;width:12px;height:8px;background-image: linear-gradient(to left, 
+          ${item.color.colorStops[0].color}, ${item.color.colorStops[1].color})"></span>
+                      <span>${item.seriesName}：${item.value}${name}</span>
+                    </p>`;
+                });
+                el += ``;
+                return el;
+            }
+        },
+        grid: {
+            top: 50,
+            left: 10,
+            bottom: 0,
+            right: 0,
+            containLabel: true
+        },
+        xAxis: {
+            type: 'category',
+            axisLine: {
+                show: false // 不显示坐标轴
+            },
+            axisTick: {
+                show: false // 不显示坐标轴刻度
+            },
+            axisLabel: {
+                formatter: function (params, index) {
+                    return params;
+                },
+                color: '#9B9DA5',
+                margin: 15
+            },
+            data: !!xAxis.length ? xAxis : defaultName
+        },
+        yAxis: {
+            type: 'value',
+            splitNumber: 4,
+            name: name,
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                color: '#9B9DA5',
+                margin: 15,
+                textStyle: {
+                    align: 'right',
+                    baseline: 'middle'
+                }
+            },
+            nameLocation: 'end',
+            nameTextStyle: { color: '#9B9DA5', padding: [0, 0, 0, -40] },
+            splitLine: {
+                lineStyle: {
+                    type: 'dotted',
+                    width: 0.5
+                }
+            }
+        },
+        legend: {
+            show: true,
+            x: 'right',
+            icon: 'circle',
+            itemWidth: 8, // 图例图形宽度
+            itemHeight: 8,
+            itemGap: 20,
+            textStyle: {
+                color: '#FFF'
+            }
+        },
+        series: seriesConfiguration() || defaultData
+    };
+    return option;
+};

commandCenter/src/views/financialAnalysis/smallModuleIndex/netReceipts.vue

@@ -0,0 +1,110 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">实收分析</div>
+            <div class="model-title-right">
+                <el-select v-model="mixins_query.chargeType" placeholder="所有费用" clearable class="saveColumn-select" @change="getData">
+                    <el-option v-for="(item, index) in amountType" :label="item.name" :value="item.value" :key="index"></el-option>
+                </el-select>
+                <el-date-picker
+                    value-format="yyyy"
+                    v-model="date"
+                    type="year"
+                    placeholder="选择年"
+                    class="saveColumn-select"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </div>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { discountedWave } from './indexOptionChart';
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                chargeType: '',
+                endTime: '',
+                startTime: ''
+            },
+            amountType: [
+                {
+                    value: 1,
+                    name: '物业费'
+                },
+                {
+                    value: 2,
+                    name: '水费'
+                },
+                {
+                    value: 3,
+                    name: '电费'
+                },
+                {
+                    value: 4,
+                    name: '车位费'
+                },
+                {
+                    value: 6,
+                    name: '卫生费'
+                },
+                {
+                    value: 7,
+                    name: '其他费用'
+                }
+            ],
+            date: '',
+            clientOptions: discountedWave('(元)', [], [])
+        };
+    },
+    methods: {
+        getData() {
+            this.$http.post('/sc-charge/charge/report/total/month', this.mixins_query).then(({ data, msg, status }) => {
+                if (status == 0 && !!data) {
+                    let times = [],
+                        total = [];
+
+                    data.map((item) => {
+                        times.push(item.months);
+                        total.push(item.totalAmount);
+                    });
+                    this.clientOptions = discountedWave('(元)', times, total);
+                } else {
+                    this.clientOptions = discountedWave('(元)', [], []);
+                }
+            });
+        },
+        changeTime(v) {
+            this.mixins_query.endTime = v;
+            this.mixins_query.startTime = v;
+            this.getData();
+        }
+    },
+    created() {
+        this.date = this.$moment().format('YYYY');
+        this.mixins_query.startTime = this.$moment().format('YYYY');
+        this.mixins_query.endTime = this.$moment().format('YYYY');
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: 20px;
+            }
+        }
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/parkingLot.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="modelBlock">
+        <div class="model-title">
+            <div class="model-title-text">车场收入分析</div>
+            <div class="model-title-right">
+                <el-date-picker
+                    value-format="yyyy"
+                    v-model="date"
+                    type="year"
+                    placeholder="选择年"
+                    class="saveColumn-select"
+                    @change="changeTime"
+                    :clearable="false"
+                >
+                </el-date-picker>
+            </div>
+        </div>
+        <div class="model-content">
+            <zz-echart :option="clientOptions" class="chart"></zz-echart>
+        </div>
+    </div>
+</template>
+<script>
+import { columnOptionsChartss } from './indexOptionChart';
+let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+import allcommunit from './allcommunit';
+export default {
+    mixins: [allcommunit],
+    data() {
+        return {
+            mixins_query: {
+                communityId: '',
+                year: ''
+            },
+            date: '',
+            clientOptions: columnOptionsChartss(
+                '(个)',
+                [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+                [
+                    {
+                        name: '临停收入',
+                        data: 0
+                    },
+                    {
+                        name: '临停收入',
+                        data: 0
+                    },
+                    {
+                        name: '临停收入',
+                        data: 0
+                    }
+                ],
+                [
+                    {
+                        name: '月卡收入',
+                        data: 0
+                    },
+                    {
+                        name: '月卡收入',
+                        data: 0
+                    },
+                    {
+                        name: '月卡收入',
+                        data: 0
+                    }
+                ],
+                ['临停收入', '月卡收入'],
+                [],
+                10
+            )
+        };
+    },
+    methods: {
+        getData() {
+            this.$http.get('/sc-community/statisticCarCardIncome', this.mixins_query).then(({ data, msg, status }) => {
+                if (status == 0 && !!data) {
+                    let dataList = [],
+                        resList = [],
+                        timeDay = [];
+                    data.map((item) => {
+                        timeDay.push(item.date);
+
+                        dataList.push({
+                            name: '临停收入',
+                            data: item.temporaryCardIncome || 0
+                        });
+                        resList.push({
+                            name: '月卡收入',
+                            data: item.monthlyCardIncome || 0
+                        });
+                    });
+                    this.clientOptions = columnOptionsChartss('(元)', timeDay, dataList, resList, ['临停收入', '月卡收入'], [], 10);
+                } else {
+                    this.clientOptions = columnOptionsChartss(
+                        '(元)',
+                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+                        dataList,
+                        resList,
+                        ['临停收入', '月卡收入'],
+                        [],
+                        10
+                    );
+                }
+            });
+        },
+        changeTime(v) {
+            this.mixins_query.year = v;
+            this.getData();
+        }
+    },
+    created() {
+        this.date = this.$moment().format('YYYY');
+        this.mixins_query.year = this.$moment().format('YYYY');
+    }
+};
+</script>
+<style scoped lang="scss">
+@import './style.scss';
+.model-title {
+    .model-title-right {
+        .saveColumn-select {
+            &:not(:first-child) {
+                margin-left: 20px;
+            }
+        }
+    }
+}
+</style>

commandCenter/src/views/financialAnalysis/smallModuleIndex/style.scss

@@ -0,0 +1,74 @@
+.modelBlock {
+  height: 100%;
+  padding: 15px 20px 20px;
+  background: #171f32;
+  position: relative;
+  .model-title {
+    line-height: 30px;
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    border-bottom: 1px solid rgba(224, 225, 227, 0.2);
+    .saveColumn-select {
+      width: 100px;
+      /deep/ .el-input__inner {
+        background: transparent;
+        color: white;
+        padding-right: 20px;
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+    }
+    .model-title-text {
+      color: white;
+    }
+    .buttons {
+      width: 120px;
+      padding-left: 10px;
+      box-sizing: border-box;
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 4px;
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      cursor: pointer;
+
+      span.triangle {
+        margin-top: 10px;
+        float: right;
+        margin-right: 5px;
+        border: 4px solid transparent;
+        border-left: 4px solid rgba(255, 255, 255, 0.5);
+      }
+    }
+  }
+  .model-content {
+    display: flex;
+    height: calc(100% - 50px);
+    justify-content: space-between;
+    font-size: 12px;
+    position: relative;
+    .totals {
+      position: absolute;
+      right: 10px;
+      top: 26px;
+      width: 120px;
+      height: 40px;
+      background: linear-gradient(90deg, rgba(14, 174, 255, 0.5) 0%, rgba(14, 174, 255, 0) 100%);
+      border-radius: 5px;
+      font-size: 20px;
+      padding: 8px 10px;
+      display: flex;
+      justify-content: space-between;
+      .numbers {
+        font-size: 12px;
+        opacity: 0.5;
+        line-height: 32px;
+      }
+    }
+  }
+}
+.no-permission {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+}