{"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\views\\passengerFlow\\index.vue?vue&type=style&index=0&id=24c53d7e&lang=scss&scoped=true&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\views\\passengerFlow\\index.vue","mtime":1664250452961},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\r\n@import './index.scss';\r\n.column {\r\n    flex-direction: column;\r\n    & > div {\r\n        height: calc((100% - #{rem(60)}) / 3);\r\n    }\r\n}\r\n.view-content {\r\n    /deep/ .el-table {\r\n        background: transparent !important;\r\n    }\r\n    /deep/.el-table th {\r\n        background: transparent !important;\r\n    }\r\n    /deep/.el-table tr {\r\n        background: transparent !important;\r\n    }\r\n}\r\n.echTitle {\r\n \r\n}\r\n",{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA","file":"index.vue","sourceRoot":"src/views/passengerFlow","sourcesContent":["<template>\r\n    <div class=\"view-content\">\r\n        <style-mode :number=\"1\">\r\n            <template slot=\"left\"\r\n                ><span class=\"titleNumber\">3000</span><img src=\"../../assets/img/icon_keliuzongliang.png\" alt=\"\" />客流总量</template\r\n            >\r\n            <template slot=\"cont\">\r\n                <div class=\"flexPer\">\r\n                    <div class=\"itme-inlineBlock\">\r\n                        <div class=\"width100\">今日</div>\r\n                        <div class=\"flex width100\">\r\n                            <div class=\"greText width50\">\r\n                                <div class=\"numberColor ft20 greenText\">3000</div>\r\n                                <div class=\"grdText\">进入人数</div>\r\n                            </div>\r\n\r\n                            <div class=\"greText width50\">\r\n                                <div class=\"numberColor ft20 redText\">1000</div>\r\n                                <div class=\"grdText\">出去人数</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"greText width100\">\r\n                            <div class=\"numberColor ft20 violetText\">4000</div>\r\n                            <div class=\"grdText\">总客流</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"itme-inlineBlock\">\r\n                        <div class=\"width100\">昨日</div>\r\n                        <div class=\"flex width100\">\r\n                            <div class=\"greText width50\">\r\n                                <div class=\"numberColor ft20 greenText\">2000</div>\r\n                                <div class=\"grdText\">进入人数</div>\r\n                            </div>\r\n\r\n                            <div class=\"greText width50\">\r\n                                <div class=\"numberColor ft20 redText\">2000</div>\r\n                                <div class=\"grdText\">出去人数</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"greText width100\">\r\n                            <div class=\"numberColor ft20 violetText\">4000</div>\r\n                            <div class=\"grdText\">总客流</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"itme-inlineBlock\">\r\n                        <div class=\"width100\">同比</div>\r\n                        <div class=\"flex width100\">\r\n                            <div class=\"greText width50\">\r\n                                <div class=\"numberColor ft20 greenText\">50%</div>\r\n                                <div class=\"grdText\">总进入人数</div>\r\n                            </div>\r\n\r\n                            <div class=\"greText width50\">\r\n                                <div class=\"numberColor ft20 redText\">50%</div>\r\n                                <div class=\"grdText\">总出去人口</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"greText width100\">\r\n                            <div class=\"numberColor ft20 violetText\">0%</div>\r\n                            <div class=\"grdText\">总客流</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </template>\r\n        </style-mode>\r\n\r\n        <style-mode :number=\"2\">\r\n            <template slot=\"left\">客流趋势</template>\r\n            <template slot=\"right\">\r\n                <el-select class=\"item.class\" v-model=\"trendsValue\" clearable @change=\"activeTrendsValue(trendsValue)\">\r\n                    <el-option v-for=\"(item, index) in selectTime\" :key=\"index\" :label=\"item.name\" :value=\"item.value\"></el-option>\r\n                </el-select>\r\n            </template>\r\n            <template slot=\"cont\">\r\n                <zz-echart :option=\"options\"></zz-echart>\r\n            </template>\r\n        </style-mode>\r\n\r\n        <style-mode :number=\"3\">\r\n            <template slot=\"left\">平均客流</template>\r\n            <template slot=\"right\">\r\n                <el-select class=\"item.class\" v-model=\"selectValue\" clearable @change=\"activeValue(selectValue)\">\r\n                    <el-option v-for=\"(item, index) in selectTime\" :key=\"index\" :label=\"item.name\" :value=\"item.value\"></el-option>\r\n                </el-select>\r\n            </template>\r\n            <template slot=\"cont\">\r\n                <div class=\"itme-inlineBlock width100 column\">\r\n                    <div class=\"width100\">\r\n                        <div class=\"echTitle\">周平均</div>\r\n                        <zz-echart :option=\"avgWeekOptions\"></zz-echart>\r\n                    </div>\r\n                    <div class=\"width100\">\r\n                        <div class=\"echTitle\">月平均</div>\r\n                        <zz-echart :option=\"avgWeekOptions\"></zz-echart>\r\n                    </div>\r\n                    <div class=\"width100\">\r\n                        <div class=\"echTitle\">年平均</div>\r\n                        <zz-echart :option=\"avgWeekOptions\"></zz-echart>\r\n                    </div>\r\n                </div>\r\n            </template>\r\n        </style-mode>\r\n\r\n        <style-mode :number=\"4\">\r\n            <template slot=\"left\">\r\n                <el-date-picker\r\n                    v-model=\"pickerTime\"\r\n                    value-format=\"yyyy-MM-dd\"\r\n                    type=\"daterange\"\r\n                    range-separator=\"至\"\r\n                    start-placeholder=\"开始日期\"\r\n                    end-placeholder=\"结束日期\"\r\n                    @change=\"timeToggle\"\r\n                ></el-date-picker>\r\n                <el-button class=\"search-btn\" type=\"primary\" @click=\"mixins_search()\" icon=\"el-icon-search\">查询</el-button>\r\n            </template>\r\n            <template slot=\"right\">\r\n                <img src=\"../../assets/img/icon_daochu.png\" alt=\"\" />\r\n            </template>\r\n            <template slot=\"cont\">\r\n                <zz-table :settings=\"{ hideFoot: true, showIndex: true, tableBorder: false }\" :cols=\"cols\"> </zz-table>\r\n            </template>\r\n        </style-mode>\r\n    </div>\r\n</template>\r\n<script>\r\nimport styleMode from './styleMode';\r\nimport { discountedWave, columnOptionsChart } from './EachartOptions';\r\nlet 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];\r\nlet dataDay = [\r\n    '1',\r\n    '2',\r\n    '3',\r\n    '4',\r\n    '5',\r\n    '6',\r\n    '7',\r\n    '8',\r\n    '9',\r\n    '10',\r\n    '11',\r\n    '12',\r\n    '13',\r\n    '14',\r\n    '15',\r\n    '16',\r\n    '17',\r\n    '18',\r\n    '19',\r\n    '20',\r\n    '21',\r\n    '22',\r\n    '23',\r\n    '24',\r\n    '25',\r\n    '26',\r\n    '27',\r\n    '28',\r\n    '29',\r\n    '30',\r\n    '31'\r\n];\r\nlet weekArr = ['一', '二', '三', '四', '五', '六', '日'];\r\nlet yearArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];\r\n\r\nexport default {\r\n    components: {\r\n        styleMode\r\n    },\r\n    data() {\r\n        return {\r\n            selectTime: [\r\n                {\r\n                    name: '全部',\r\n                    value: ''\r\n                },\r\n                {\r\n                    name: '本周',\r\n                    value: 1\r\n                },\r\n                {\r\n                    name: '本月',\r\n                    value: 2\r\n                },\r\n                {\r\n                    name: '本年',\r\n                    value: 3\r\n                }\r\n            ],\r\n            cols: [\r\n                {\r\n                    label: '统计日期',\r\n                    prop: 'alarmName'\r\n                },\r\n                {\r\n                    label: '位置区域',\r\n                    prop: 'waringDate'\r\n                },\r\n                {\r\n                    label: '进入人数',\r\n                    prop: 'createBy'\r\n                },\r\n                {\r\n                    label: '出去人数',\r\n                    prop: 'alarmGrade'\r\n                },\r\n                {\r\n                    label: '当日客流',\r\n                    prop: 'alarmStat',\r\n                    format(val) {\r\n                        if (val == 1) {\r\n                            return '告警产生';\r\n                        } else if (val == 2) {\r\n                            return '告警消失';\r\n                        } else {\r\n                            return '--';\r\n                        }\r\n                    }\r\n                }\r\n            ],\r\n            selectValue: '',\r\n            trendsValue: '',\r\n            pickerTime: [],\r\n            options: discountedWave('(次)', dataDay, dataArr),\r\n            avgWeekOptions: columnOptionsChart('(人)', dataDay, [{ name: '999', type: 'bar', data: [20] }])\r\n        };\r\n    },\r\n    created() {\r\n        this.getAreaInfo();\r\n    },\r\n\r\n    methods: {\r\n        //获取本月多少天\r\n        getMonthLength() {\r\n            let thisD = new Date();\r\n            return new Date(thisD.getFullYear(), thisD.getMonth() + 1, 0).getDate();\r\n        },\r\n        //查询时间\r\n        timeToggle() {},\r\n        activeTrendsValue(val) {\r\n            console.log(val);\r\n        },\r\n        activeValue(val) {\r\n            console.log(val);\r\n        },\r\n        getAreaInfo() {\r\n            this.$http.post('/sc-community/dahuaDevice/getAreaInfo', { pageIndex: 1, pageSize: 100 }).then((res) => {\r\n                console.log(JSON.parse(res.data));\r\n            });\r\n        },\r\n        getQueryPassengerFlowData() {\r\n            this.$http.post('/sc-community/dahuaDevice/queryPassengerFlowData', { pageIndex: 1, pageSize: 100 }).then((res) => {\r\n                console.log(JSON.parse(res.data));\r\n            });\r\n        }\r\n    }\r\n};\r\n</script>\r\n  \r\n<style lang=\"scss\" scoped>\r\n@import './index.scss';\r\n.column {\r\n    flex-direction: column;\r\n    & > div {\r\n        height: calc((100% - #{rem(60)}) / 3);\r\n    }\r\n}\r\n.view-content {\r\n    /deep/ .el-table {\r\n        background: transparent !important;\r\n    }\r\n    /deep/.el-table th {\r\n        background: transparent !important;\r\n    }\r\n    /deep/.el-table tr {\r\n        background: transparent !important;\r\n    }\r\n}\r\n.echTitle {\r\n \r\n}\r\n</style>"]}]}