|
|
@@ -1,12 +1,10 @@
|
|
|
<template>
|
|
|
<div class="view-content">
|
|
|
- <div class="block-item grid-1">
|
|
|
- <div class="topsBlock">
|
|
|
- <div class="left">
|
|
|
- <span class="titleNumber">3000</span><img src="../../assets/img/icon_keliuzongliang.png" alt="" />客流总量
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-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>
|
|
|
@@ -63,91 +61,109 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="block-item grid-2">
|
|
|
- <div class="topsBlock">
|
|
|
- <div class="left">客流趋势</div>
|
|
|
- <div class="right">
|
|
|
- <el-select class="item.class" v-model="selectValue" placeholder="item.placeholder" clearable>
|
|
|
- <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-content">
|
|
|
+ </template>
|
|
|
+ </style-mode>
|
|
|
+
|
|
|
+ <style-mode :number="2">
|
|
|
+ <template slot="left">客流趋势</template>
|
|
|
+ <template slot="right">
|
|
|
+ <el-select class="item.class" v-model="trendsValue" clearable>
|
|
|
+ <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>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="block-item grid-3">
|
|
|
- <div class="topsBlock">
|
|
|
- <div class="left">平均客流</div>
|
|
|
- <div class="right">
|
|
|
- <el-select class="item.class" v-model="selectValue" placeholder="item.placeholder" clearable>
|
|
|
- <el-option v-for="(item, index) in selectTime" :key="index" :label="item.name" :value="item.value"></el-option>
|
|
|
- </el-select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="item-content"></div>
|
|
|
- </div>
|
|
|
- <div class="block-item grid-4">
|
|
|
- <div class="topsBlock">
|
|
|
- <div class="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>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img src="../../assets/img/icon_daochu.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </style-mode>
|
|
|
+
|
|
|
+ <style-mode :number="3">
|
|
|
+ <template slot="left">平均客流</template>
|
|
|
+ <template slot="right">
|
|
|
+ <el-select class="item.class" v-model="selectValue" clearable>
|
|
|
+ <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>周平均</div>
|
|
|
+ <zz-echart :option="avgWeekOptions"></zz-echart>
|
|
|
+ </div>
|
|
|
+ <div class="width100">
|
|
|
+ <div>月平均</div>
|
|
|
+ <zz-echart :option="options"></zz-echart>
|
|
|
+ </div>
|
|
|
+ <div class="width100">
|
|
|
+ <div>年平均</div>
|
|
|
+ <zz-echart :option="options"></zz-echart>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="item-content"></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: true }" :cols="cols"> </zz-table>
|
|
|
+ </template>
|
|
|
+ </style-mode>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { discountedWave } from './EachartOptions';
|
|
|
+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 = [
|
|
|
- '01-01',
|
|
|
- '01-02',
|
|
|
- '01-03',
|
|
|
- '01-04',
|
|
|
- '01-05',
|
|
|
- '01-06',
|
|
|
- '01-07',
|
|
|
- '01-08',
|
|
|
- '01-09',
|
|
|
- '01-10',
|
|
|
- '01-11',
|
|
|
- '01-12',
|
|
|
- '01-13',
|
|
|
- '01-14',
|
|
|
- '01-15',
|
|
|
- '01-16',
|
|
|
- '01-17',
|
|
|
- '01-18',
|
|
|
- '01-19',
|
|
|
- '01-20',
|
|
|
- '01-21',
|
|
|
- '01-22',
|
|
|
- '01-23',
|
|
|
- '01-24',
|
|
|
- '01-25',
|
|
|
- '01-26',
|
|
|
- '01-27',
|
|
|
- '01-28',
|
|
|
- '01-29',
|
|
|
- '01-30',
|
|
|
- '01-31'
|
|
|
+ '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'
|
|
|
];
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ styleMode
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
selectTime: [
|
|
|
@@ -168,147 +184,65 @@ export default {
|
|
|
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)
|
|
|
+ options: discountedWave('(次)', dataDay, dataArr),
|
|
|
+ avgWeekOptions: columnOptionsChart('(人)', dataDay, [{ name: '999', type: 'bar', data: [20] }])
|
|
|
};
|
|
|
},
|
|
|
- ceated() {},
|
|
|
+ created() {
|
|
|
+ this.getAreaInfo();
|
|
|
+ },
|
|
|
|
|
|
methods: {
|
|
|
- timeToggle() {}
|
|
|
+ timeToggle() {},
|
|
|
+ getAreaInfo() {
|
|
|
+ this.$http.post('/sc-community/dahuaDevice/queryPassengerFlowData',{pageIndex:1,pageSize:100}).then((res) => {
|
|
|
+ console.log(JSON.parse(res.data))
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-// @mixin layoutFlexUniformity($direction, $distance: 0, $aliquot: 1, $multiple: 1) {
|
|
|
-// @if $direction == 'width' {
|
|
|
-// width: (100% - $distance) / $aliquot * $multiple;
|
|
|
-// }
|
|
|
-// @if $direction == 'height' {
|
|
|
-// height: (100% - $distance) / $aliquot * $multiple;
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// 普通调用 @include layoutFlexUniformity()
|
|
|
-
|
|
|
-// @function layoutFlexUniformity($distance: 0px, $aliquot: 1, $multiple: 1) {
|
|
|
-// @return (100% - $distance) / $aliquot * $multiple;
|
|
|
-// }
|
|
|
-
|
|
|
-// 计算时调用calc(100 - #{layoutFlexUniformity()})
|
|
|
-// 普通调用 xx: layoutFlexUniformity()
|
|
|
-
|
|
|
-.view-content {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- align-content: space-between;
|
|
|
- height: calc(100% - 10px);
|
|
|
-}
|
|
|
-.block-item {
|
|
|
- background: #171f32;
|
|
|
- border-radius: 4px;
|
|
|
- overflow: hidden;
|
|
|
- padding: 0 20px 20px 20px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.topsBlock {
|
|
|
- height: 60px;
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 1px solid rgba(224, 225, 227, 0.2);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- color: white;
|
|
|
- /deep/ .el-input__inner {
|
|
|
- background: transparent;
|
|
|
- color: white;
|
|
|
- padding-right: 20px;
|
|
|
- border-color: rgba(255, 255, 255, 0.2);
|
|
|
- }
|
|
|
- .right {
|
|
|
- max-width: 120px;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
- .titleNumber {
|
|
|
- color: #0eaeff;
|
|
|
- font-size: 30px;
|
|
|
+@import './index.scss';
|
|
|
+.column {
|
|
|
+ flex-direction: column;
|
|
|
+ & > div {
|
|
|
+ height: calc(100% / 3);
|
|
|
}
|
|
|
- .left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- margin: 0 5px 0 20px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
- /deep/ .el-date-editor .el-range-separator {
|
|
|
- padding-left: 0;
|
|
|
- color: white;
|
|
|
- }
|
|
|
- /deep/ .el-date-editor--daterange.el-input__inner {
|
|
|
- width: 240px;
|
|
|
- }
|
|
|
- .search-btn {
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-}
|
|
|
-.item-content {
|
|
|
- padding-top: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- height: calc(100% - 60px);
|
|
|
-
|
|
|
- .flexPer {
|
|
|
- display: flex;
|
|
|
- height: 100%;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .itme-inlineBlock {
|
|
|
- display: flex;
|
|
|
- width: calc((100% - 20px) / 3);
|
|
|
- color: white;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-between;
|
|
|
- align-content: space-between;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.ft20 {
|
|
|
- font-size: 20px;
|
|
|
-}
|
|
|
-.numberColor {
|
|
|
- // margin-bottom: 5px;
|
|
|
-}
|
|
|
-.greText {
|
|
|
- opacity: 0.5;
|
|
|
- font-size: 12px;
|
|
|
-}
|
|
|
-.flex {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.width50 {
|
|
|
- width: 50%;
|
|
|
-}
|
|
|
-.grid-1 {
|
|
|
- width: calc((100% - 20px) / 3);
|
|
|
- height: calc((100% - 20px) / 7 * 2);
|
|
|
-}
|
|
|
-.grid-2 {
|
|
|
- width: calc((100% - 20px) / 3 * 2);
|
|
|
- height: calc((100% - 20px) / 7 * 2);
|
|
|
-}
|
|
|
-.grid-3 {
|
|
|
- width: calc((100% - 20px) / 3);
|
|
|
- height: calc((100% - 20px) / 7 * 5);
|
|
|
-}
|
|
|
-.grid-4 {
|
|
|
- width: calc((100% - 20px) / 3 * 2);
|
|
|
- height: calc((100% - 20px) / 7 * 5);
|
|
|
}
|
|
|
</style>
|
Shannon_mu