SmartCommunity/videoSurveillance/src/views/passengerFlow/index.vue

<template>
    <div class="view-content">
        <style-mode :number="1">
            <template slot="left"
                ><span class="titleNumber">3000</span><img src="../../assets/img/icon_keliuzongliang.png" alt="" />客流总量</template
            >
            <template slot="cont">
                <div class="flexPer">
                    <div class="itme-inlineBlock">
                        <div class="width100">今日</div>
                        <div class="flex width100">
                            <div class="greText width50">
                                <div class="numberColor ft20 greenText">3000</div>
                                <div class="grdText">进入人数</div>
                            </div>

                            <div class="greText width50">
                                <div class="numberColor ft20 redText">1000</div>
                                <div class="grdText">出去人数</div>
                            </div>
                        </div>
                        <div class="greText width100">
                            <div class="numberColor ft20 violetText">4000</div>
                            <div class="grdText">总客流</div>
                        </div>
                    </div>
                    <div class="itme-inlineBlock">
                        <div class="width100">昨日</div>
                        <div class="flex width100">
                            <div class="greText width50">
                                <div class="numberColor ft20 greenText">2000</div>
                                <div class="grdText">进入人数</div>
                            </div>

                            <div class="greText width50">
                                <div class="numberColor ft20 redText">2000</div>
                                <div class="grdText">出去人数</div>
                            </div>
                        </div>
                        <div class="greText width100">
                            <div class="numberColor ft20 violetText">4000</div>
                            <div class="grdText">总客流</div>
                        </div>
                    </div>
                    <div class="itme-inlineBlock">
                        <div class="width100">同比</div>
                        <div class="flex width100">
                            <div class="greText width50">
                                <div class="numberColor ft20 greenText">50%</div>
                                <div class="grdText">总进入人数</div>
                            </div>

                            <div class="greText width50">
                                <div class="numberColor ft20 redText">50%</div>
                                <div class="grdText">总出去人口</div>
                            </div>
                        </div>
                        <div class="greText width100">
                            <div class="numberColor ft20 violetText">0%</div>
                            <div class="grdText">总客流</div>
                        </div>
                    </div>
                </div>
            </template>
        </style-mode>

        <style-mode :number="2">
            <template slot="left">客流趋势</template>
            <template slot="right">
                <el-select class="item.class" v-model="trendsValue" clearable @change="activeTrendsValue(trendsValue)">
                    <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </template>
            <template slot="cont">
                <zz-echart :option="options"></zz-echart>
            </template>
        </style-mode>

        <style-mode :number="3">
            <template slot="left">平均客流</template>
            <template slot="right">
                <el-select class="item.class" v-model="selectValue" clearable @change="activeValue(selectValue)">
                    <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
                </el-select>
            </template>
            <template slot="cont">
                <div class="itme-inlineBlock width100 column">
                    <div class="width100">
                        <div class="echTitle">周平均</div>
                        <zz-echart :option="avgWeekOptions"></zz-echart>
                    </div>
                    <div class="width100">
                        <div class="echTitle">月平均</div>
                        <zz-echart :option="avgWeekOptions"></zz-echart>
                    </div>
                    <div class="width100">
                        <div class="echTitle">年平均</div>
                        <zz-echart :option="avgWeekOptions"></zz-echart>
                    </div>
                </div>
            </template>
        </style-mode>

        <style-mode :number="4">
            <template slot="left">
                <el-date-picker
                    v-model="pickerTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="timeToggle"
                ></el-date-picker>
                <el-button class="search-btn" type="primary" @click="mixins_search()" icon="el-icon-search">查询</el-button>
            </template>
            <template slot="right">
                <img src="../../assets/img/icon_daochu.png" alt="" />
            </template>
            <template slot="cont">
                <zz-table :settings="{ hideFoot: true, showIndex: true, tableBorder: false }" :cols="cols"> </zz-table>
            </template>
        </style-mode>
    </div>
</template>
<script>
import styleMode from './styleMode';
import { discountedWave, columnOptionsChart } from './EachartOptions';
let dataArr = [0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
let dataDay = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
    '12',
    '13',
    '14',
    '15',
    '16',
    '17',
    '18',
    '19',
    '20',
    '21',
    '22',
    '23',
    '24',
    '25',
    '26',
    '27',
    '28',
    '29',
    '30',
    '31'
];
let weekArr = ['一', '二', '三', '四', '五', '六', '日'];
let yearArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

export default {
    components: {
        styleMode
    },
    data() {
        return {
            selectTime: [
                {
                    name: '全部',
                    value: ''
                },
                {
                    name: '本周',
                    value: 1
                },
                {
                    name: '本月',
                    value: 2
                },
                {
                    name: '本年',
                    value: 3
                }
            ],
            cols: [
                {
                    label: '统计日期',
                    prop: 'alarmName'
                },
                {
                    label: '位置区域',
                    prop: 'waringDate'
                },
                {
                    label: '进入人数',
                    prop: 'createBy'
                },
                {
                    label: '出去人数',
                    prop: 'alarmGrade'
                },
                {
                    label: '当日客流',
                    prop: 'alarmStat',
                    format(val) {
                        if (val == 1) {
                            return '告警产生';
                        } else if (val == 2) {
                            return '告警消失';
                        } else {
                            return '--';
                        }
                    }
                }
            ],
            selectValue: '',
            trendsValue: '',
            pickerTime: [],
            options: discountedWave('(次)', dataDay, dataArr),
            avgWeekOptions: columnOptionsChart('(人)', dataDay, [{ name: '999', type: 'bar', data: [20] }])
        };
    },
    created() {
        this.getAreaInfo();
    },

    methods: {
        //获取本月多少天
        getMonthLength() {
            let thisD = new Date();
            return new Date(thisD.getFullYear(), thisD.getMonth() + 1, 0).getDate();
        },
        //查询时间
        timeToggle() {},
        activeTrendsValue(val) {
            console.log(val);
        },
        activeValue(val) {
            console.log(val);
        },
        getAreaInfo() {
            this.$http.post('/sc-community/dahuaDevice/getAreaInfo', { pageIndex: 1, pageSize: 100 }).then((res) => {
                console.log(JSON.parse(res.data));
            });
        },
        getQueryPassengerFlowData() {
            this.$http.post('/sc-community/dahuaDevice/queryPassengerFlowData', { pageIndex: 1, pageSize: 100 }).then((res) => {
                console.log(JSON.parse(res.data));
            });
        }
    }
};
</script>
  
<style lang="scss" scoped>
@import './index.scss';
.column {
    flex-direction: column;
    & > div {
        height: calc((100% - #{rem(60)}) / 3);
    }
}
.view-content {
    /deep/ .el-table {
        background: transparent !important;
    }
    /deep/.el-table th {
        background: transparent !important;
    }
    /deep/.el-table tr {
        background: transparent !important;
    }
}
.echTitle {
 
}
</style>