You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
883 lines
28 KiB
883 lines
28 KiB
<template>
|
|
<!-- 景区客流分析 入口文件-->
|
|
<div class="p-pages-box p-pages-bg">
|
|
<!-- 页面筛选 -->
|
|
<button class="change-data" @click="showDialog=!showDialog">数据过滤</button>
|
|
<div v-if="showDialog" class="p-filter">
|
|
<div class="p-filter-title">客流分析筛选</div>
|
|
<div class="p-filter-box">
|
|
<div class="filter-box-item">
|
|
<el-select v-model="city" placeholder="请选择市" style="width: 130px;">
|
|
<el-option
|
|
v-for="item in cityOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-box-item">
|
|
<el-select v-model="area" placeholder="请选择(县/区)" style="width: 130px;">
|
|
<el-option
|
|
v-for="item in areaOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-box-item">
|
|
<el-select v-model="scenic" placeholder="请选择景区" @change="getchange(scenic,'')">
|
|
<el-option
|
|
v-for="item in scenicOptions"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="filter-box-item">
|
|
<div class="button" :class="flowState=='进客流'?'active':''" @click="getflowState('','进客流')">进客流</div>
|
|
</div>
|
|
<div class="filter-box-item">
|
|
<div class="button" :class="flowState=='出客流'?'active':''" @click="getflowState('','出客流')">出客流</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页面头部 -->
|
|
<base-header title="客流分析"></base-header>
|
|
<!-- 页面主体 -->
|
|
<div class="p-pages-main p-container">
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<!-- 实时客流统计 -->
|
|
<base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 29vh">
|
|
<base-module-card :cardTitle="scenic+'实时客流统计'" cardType="small">
|
|
<scenic-time :propsData="FlowTimeData"></scenic-time>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- 按年日客流分析 -->
|
|
<base-module name="FlowYear" id="FlowYear" class="m-t-large" style="height: 29vh">
|
|
<base-module-card cardTitle="按年客流分析" cardType="small">
|
|
<el-date-picker
|
|
v-model="yearData"
|
|
type="year"
|
|
class="p-flowyear-picker"
|
|
placeholder="选择年"
|
|
>
|
|
</el-date-picker>
|
|
<base-echarts1 type="area" :propsData="FlowYearData"></base-echarts1>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- 分时段客流走势 -->
|
|
<base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 29vh">
|
|
<base-module-card cardTitle="按周客流分析" cardType="small">
|
|
<el-date-picker
|
|
class="p-flowyear-picker"
|
|
v-model="week"
|
|
type="week"
|
|
placeholder="选择周">
|
|
</el-date-picker>
|
|
<base-echarts1 type="line" :propsData="FlowTrendData"></base-echarts1>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- 区域客流监测 -->
|
|
<base-module name="FlowArea" id="FlowArea" class="m-t-large" style="height: 29vh">
|
|
<base-module-card :cardTitle="scenic+'区域客流占比分析'" cardType="small">
|
|
<base-echarts1 :propsData="FlowRankData" type="ring"></base-echarts1>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<!-- 按日客流分析 -->
|
|
<base-module name="FlowToday" id="英文" class="m-t-large" style="height: 29vh">
|
|
<base-module-card :cardTitle="scenic+'按日客流分析'" cardType="small">
|
|
<el-date-picker
|
|
v-model="TodayData"
|
|
type="daterange"
|
|
range-separator="-"
|
|
value-format="dd"
|
|
:start-placeholder="startTime"
|
|
:end-placeholder="endTime"
|
|
class="p-flowdata-picker"
|
|
popper-class="p-flowdata-popper"
|
|
@change="changeValue"
|
|
>
|
|
</el-date-picker>
|
|
<base-echarts1 type="area" :propsData="FlowTodayData"></base-echarts1>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<!-- 客流同环比分析 -->
|
|
<base-module name="FlowRing" id="FlowRing" class="m-t-large" style="height: 29vh">
|
|
<base-module-card :cardTitle="scenic+'客流同环比分析'" cardType="small">
|
|
<scenic-ring :propsData="FlowRingData"></scenic-ring>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
<el-col :span="16">
|
|
<!-- 按月客流分析 -->
|
|
<base-module name="FlowMoon" id="FlowMoon" class="m-t-large" style="height: 29vh">
|
|
<base-module-card :cardTitle="scenic+'按月客流分析'" cardType="small">
|
|
<el-date-picker
|
|
v-model="MonthData"
|
|
type="monthrange"
|
|
range-separator="-"
|
|
format="yyyy-MM"
|
|
:start-placeholder="startMonth"
|
|
:end-placeholder="endMonth"
|
|
class="p-flowdata-picker"
|
|
popper-class="p-flowdata-popper"
|
|
>
|
|
</el-date-picker>
|
|
<base-echarts1 type="column" :propsData="FlowMoonData"></base-echarts1>
|
|
</base-module-card>
|
|
</base-module>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import {
|
|
currentScenicScenicList, getcurrentScenic, getDayData, getFlowRatio, getHourData, getMonthData, getYearData,
|
|
} from "@/api/picture/scenic-flow/scenicFlow";
|
|
//引入 实时客流统计 模块
|
|
import scenicTime from "@/views/picture/scenic-flow/scenic-time";
|
|
//引入 区域客流监测 模块
|
|
import scenicArea from "@/views/picture/scenic-flow/scenic-area";
|
|
//引入 客流同环比分析 模块
|
|
import ScenicRing from "@/views/picture/scenic-flow/scenic-ring";
|
|
//引入 排行榜 组件
|
|
import baseRank from "@/views/components/p-rank/BaseRank";
|
|
import {getSelectTouristSource} from "@/api/picture/scenic-monitor/scenicMonitor";
|
|
import map from "@/views/dashboard/json/china.json";
|
|
|
|
export default {
|
|
name: "index",
|
|
components: {ScenicRing, scenicTime, scenicArea, baseRank},
|
|
data() {
|
|
return {
|
|
showDialog: false,
|
|
flowState: '进客流',
|
|
week:'',
|
|
cityOptions: [
|
|
{
|
|
value: '石家庄市',
|
|
label: '石家庄市'
|
|
}, {
|
|
value: '唐山市',
|
|
label: '唐山市'
|
|
}, {
|
|
value: '秦皇岛市',
|
|
label: '秦皇岛市'
|
|
}, {
|
|
value: '邯郸市',
|
|
label: '邯郸市'
|
|
}, {
|
|
value: '保定市',
|
|
label: '保定市'
|
|
}, {
|
|
value: '张家口市',
|
|
label: '张家口市'
|
|
}, {
|
|
value: '承德市',
|
|
label: '承德市'
|
|
}, {
|
|
value: '沧州市',
|
|
label: '沧州市'
|
|
}, {
|
|
value: '廊坊市',
|
|
label: '廊坊市'
|
|
}, {
|
|
value: '衡水市',
|
|
label: '衡水市'
|
|
}],
|
|
city: '石家庄市',
|
|
areaOptions: [
|
|
{
|
|
value: '平山县',
|
|
label: '平山县'
|
|
},
|
|
{
|
|
value: '鹿泉区',
|
|
label: '鹿泉区'
|
|
},
|
|
{
|
|
value: '灵寿县',
|
|
label: '灵寿县'
|
|
},
|
|
{
|
|
value: '井陉县',
|
|
label: '井陉县'
|
|
},
|
|
{
|
|
value: '深泽县',
|
|
label: '深泽县'
|
|
},
|
|
{
|
|
value: '行唐县',
|
|
label: '行唐县'
|
|
}],
|
|
area: '平山县',
|
|
scenicOptions: [
|
|
{
|
|
value: '西柏坡景区',
|
|
label: '西柏坡景区'
|
|
}, {
|
|
value: '南长城景区',
|
|
label: '南长城景区'
|
|
}, {
|
|
value: '韩信文化苑',
|
|
label: '韩信文化苑'
|
|
}, {
|
|
value: '乾隆碑亭',
|
|
label: '乾隆碑亭'
|
|
}, {
|
|
value: '毛泽东旧址',
|
|
label: '毛泽东旧址'
|
|
}],
|
|
scenic: '西柏坡景区',
|
|
yearData: '2023',
|
|
//实时客流统计 数据
|
|
FlowTimeData: {
|
|
saturatio: {name: "", percentage: ""},
|
|
Total: '', surplus: '', carFlow: '', alarm: ''
|
|
},
|
|
//分时段客流走势 数据
|
|
FlowTrendData: {eChartOpts: {}, eChartData: {}},
|
|
//未来七天客流预测 数据
|
|
FlowYearData: {eChartOpts: {}, eChartData: {}},
|
|
//区域客流监测 数据
|
|
FlowAreaData: [],
|
|
//按日客流分析 数据
|
|
FlowTodayData: {eChartOpts: {}, eChartData: {}},
|
|
startTime: '',
|
|
endtTime: '',
|
|
TodayData: '',
|
|
startDate: '',
|
|
endDate: '',
|
|
//客流同环比分析 数据
|
|
FlowRingData: [],
|
|
//按月客流分析 数据
|
|
FlowMoonData: {eChartOpts: {}, eChartData: {}},
|
|
MonthData: '',
|
|
startMonth: '',
|
|
endMonth: '',
|
|
FlowRankData: {eChartOpts: {}, eChartData: {}},
|
|
}
|
|
},
|
|
created() {
|
|
//获取 实时客流统计 数据
|
|
this.getFlowTime();
|
|
//获取 分时段客流走势 数据
|
|
this.getFlowTrend();
|
|
//获取 未来七天客流预测 数据
|
|
this.getFlowYear();
|
|
//获取 区域客流监测 数据
|
|
this.getFlowArea();
|
|
//获取 按日客流分析 数据
|
|
this.getFlowToday();
|
|
//获取 客流同环比分析 数据
|
|
this.getFlowRing();
|
|
//获取 按月客流分析 数据
|
|
this.getFlowMoon();
|
|
//获取 客流排行 数据
|
|
this.getFlowRank();
|
|
},
|
|
watch: {
|
|
//日期选择监听
|
|
// TodayData: {
|
|
// immediate: false,
|
|
// handler(newValue, oldValue) {
|
|
// let datas = newValue
|
|
// this.startTime = this.$filter.formatDate(datas[0])
|
|
// this.endTime = this.$filter.formatDate(datas[1])
|
|
// let backTime = {'startTime': this.startTime, 'endTime': this.endTime}
|
|
// this.getFlowToday(backTime)
|
|
// }
|
|
// },
|
|
//月份选择监听
|
|
MonthData: {
|
|
immediate: false,
|
|
handler(newValue, oldValue) {
|
|
let datas = newValue
|
|
this.startMonth = this.$filter.formatDate(datas[0])
|
|
this.endMonth = this.$filter.formatDate(datas[1])
|
|
let backTime = {'startTime': this.startMonth, 'endTime': this.endMonth}
|
|
this.getFlowMoon(backTime)
|
|
}
|
|
},
|
|
//月份选择监听
|
|
yearData: {
|
|
immediate: false,
|
|
handler(newValue, oldValue) {
|
|
let backYear = newValue.getFullYear()
|
|
this.getFlowYear(backYear)
|
|
}
|
|
},
|
|
|
|
},
|
|
methods: {
|
|
changeValue(e) {
|
|
// let arr = []
|
|
// e.forEach(item=>{
|
|
// item.format('yyyy-MM-dd')
|
|
// arr.push(item)
|
|
// })
|
|
if (e[0] == 11 && e[1] == 18) {
|
|
this.FlowTodayData.eChartData = {
|
|
seriesData: [{"name": "人次", "value": ["20", "30", "50", "80", "30", "40", "20", "10"]}],
|
|
name: "按日客流分析",
|
|
categories: ["2023-10-11", "2023-10-12", "2023-10-13", "2023-10-14", "2023-10-15", "2023-10-16", "2023-10-17", "2023-10-18"]
|
|
}
|
|
} else {
|
|
this.FlowTodayData.eChartData = {
|
|
seriesData: [{"name": "人次", "value": ["70", "10", "30", "50", "40", "50", "30", "90"]}],
|
|
name: "按日客流分析",
|
|
categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
|
|
}
|
|
}
|
|
},
|
|
getflowState(scenic, state) {
|
|
this.flowState = state
|
|
this.getchange(scenic, state)
|
|
},
|
|
getchange(scenic, state) {//获取 实时客流统计 数据
|
|
console.log('scenic', scenic)
|
|
console.log('state', state)
|
|
let myScenic = ''
|
|
let myState = ''
|
|
if (scenic != '') {
|
|
myScenic = scenic
|
|
if (state == '') {
|
|
myState = this.flowState
|
|
} else {
|
|
myState = state
|
|
}
|
|
} else {
|
|
myScenic = '西柏坡景区'
|
|
if (state == '') {
|
|
myState = '进客流'
|
|
} else {
|
|
myState = state
|
|
}
|
|
}
|
|
|
|
//获取 实时客流统计 数据
|
|
this.getFlowTime(myScenic, myState);
|
|
//获取 分时段客流走势 数据
|
|
this.getFlowTrend(myScenic, myState);
|
|
//获取 未来七天客流预测 数据
|
|
this.getFlowYear(myScenic, myState);
|
|
//获取 区域客流监测 数据
|
|
this.getFlowArea(myScenic, myState);
|
|
//获取 按日客流分析 数据
|
|
this.getFlowToday(myScenic, myState);
|
|
//获取 客流同环比分析 数据
|
|
this.getFlowRing(myScenic, myState);
|
|
//获取 按月客流分析 数据
|
|
this.getFlowMoon(myScenic, myState);
|
|
//获取 客流排行 数据
|
|
this.getFlowRank(myScenic, myState);
|
|
|
|
},
|
|
//获取 实时客流统计 数据
|
|
getFlowTime(value) {
|
|
//getcurrentScenic().then(response => {
|
|
//this.FlowTimeData = response.data
|
|
//});
|
|
if (value == "南长城景区") {
|
|
this.FlowTimeData = {"dayNum": "0", "flowNum": "2589", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
|
|
} else {
|
|
this.FlowTimeData = {"dayNum": "0", "flowNum": "3578", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
|
|
}
|
|
},
|
|
//获取 客流地排行 数据
|
|
getFlowRank(scenic, state) {
|
|
let num = 0
|
|
//getSelectTouristSource('0').then(response => {
|
|
// let newData = response.data.seriesData.slice(0, 5)
|
|
// let FlowRankData = newData.map((item, index) => {
|
|
// num = num + 1
|
|
// let itemData = {num: item.num, percentage: item.percentage, name: item.name, value: item.value, rank: num}
|
|
// return itemData
|
|
// });
|
|
// this.FlowRankData = FlowRankData
|
|
//});
|
|
let Opts = {
|
|
color: ['red', 'yellow', 'purple', 'blue'],
|
|
unit: ['人次'],
|
|
legend: {
|
|
show: true,
|
|
top: 'middle',
|
|
left: '55%',
|
|
lineHeight: 25,
|
|
},
|
|
extra: {
|
|
ring: {
|
|
labelShow: false,
|
|
}
|
|
}
|
|
}
|
|
this.FlowRankData.eChartOpts = Opts
|
|
|
|
if (scenic == "南长城景区" && state == '进客流') {
|
|
this.FlowRankData.eChartData = {
|
|
"name": "进出客流占比",
|
|
"seriesData": [
|
|
{
|
|
"name": "北入口",
|
|
"value": "245"
|
|
},
|
|
{
|
|
"name": "南入口",
|
|
"value": "251"
|
|
},
|
|
{
|
|
"name": "西入口",
|
|
"value": "871"
|
|
},
|
|
{
|
|
"name": "东入口",
|
|
"value": "325"
|
|
}]
|
|
}
|
|
} else if (scenic == "南长城景区" && state == '出客流') {
|
|
this.FlowRankData.eChartData = {
|
|
"name": "进出客流占比",
|
|
"seriesData": [
|
|
{
|
|
"name": "北入口",
|
|
"value": "154"
|
|
},
|
|
{
|
|
"name": "南入口",
|
|
"value": "235"
|
|
},
|
|
{
|
|
"name": "西入口",
|
|
"value": "502"
|
|
},
|
|
{
|
|
"name": "东入口",
|
|
"value": "248"
|
|
}]
|
|
}
|
|
} else if (scenic == "西柏坡景区" && state == '出客流') {
|
|
this.FlowRankData.eChartData = {
|
|
"name": "进出客流占比",
|
|
"seriesData": [
|
|
{
|
|
"name": "北入口",
|
|
"value": "235"
|
|
},
|
|
{
|
|
"name": "南入口",
|
|
"value": "435"
|
|
},
|
|
{
|
|
"name": "西入口",
|
|
"value": "154"
|
|
},
|
|
{
|
|
"name": "东入口",
|
|
"value": "148"
|
|
}]
|
|
}
|
|
} else {
|
|
this.FlowRankData.eChartData = {
|
|
"name": "进出客流占比",
|
|
"seriesData": [
|
|
{
|
|
"name": "北入口",
|
|
"value": "195"
|
|
},
|
|
{
|
|
"name": "南入口",
|
|
"value": "452"
|
|
},
|
|
{
|
|
"name": "西入口",
|
|
"value": "240"
|
|
},
|
|
{
|
|
"name": "东入口",
|
|
"value": "413"
|
|
}]
|
|
}
|
|
}
|
|
|
|
|
|
// this.FlowRankData.eChartData = {
|
|
// "name": "车辆类型分析",
|
|
// "seriesData": [
|
|
// {
|
|
// "name": "西柏坡景区",
|
|
// "value": "95"
|
|
// },
|
|
// {
|
|
// "name": "西柏坡景区",
|
|
// "value": "0"
|
|
// },
|
|
// {
|
|
// "name": "南长城景区",
|
|
// "value": "44"
|
|
// },
|
|
// {
|
|
// "name": "韩信文化苑",
|
|
// "value": "17"
|
|
// },
|
|
// {
|
|
// "name": "乾隆碑亭",
|
|
// "value": "17"
|
|
// }
|
|
// ],
|
|
//}
|
|
}
|
|
,
|
|
//获取 分时段客流走势 数据
|
|
getFlowTrend(value, flowState) {
|
|
let Opts = {
|
|
unit: ['万人次'],
|
|
extra: {
|
|
line: {}
|
|
}
|
|
}
|
|
this.FlowTrendData.eChartOpts = Opts
|
|
//getHourData().then(response => {
|
|
//this.FlowTrendData.eChartData = response.data
|
|
//});
|
|
|
|
if (value == "西柏坡景区" && flowState == '出客流') {
|
|
this.FlowTrendData.eChartData = {
|
|
"seriesData": [{"name": "人次", "value": ["12568", "9329", "19745", "15000", "33125", "15587", "24257"]}],
|
|
"name": "周客流数据",
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '进客流') {
|
|
this.FlowTrendData.eChartData = {
|
|
"seriesData": [{"name": "人次", "value": ["43125", "25587", "34257", "21568", "31329", "15745", "35000"]}],
|
|
"name": "当日小时数据",
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '出客流') {
|
|
this.FlowTrendData.eChartData = {
|
|
"seriesData": [{"name": "人次", "value": ["13125", "25057", "14257", "12568", "2329", "9745", "15000"]}],
|
|
"name": "当日小时数据",
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
|
}
|
|
} else {
|
|
this.FlowTrendData.eChartData = {
|
|
"seriesData": [{"name": "人次", "value": ["21568", "31329", "15745", "35000", "43125", "25587", "34257"]}],
|
|
"name": "周客流数据",
|
|
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
|
}
|
|
}
|
|
}
|
|
,
|
|
|
|
//获取 按年日客流分析 数据
|
|
getFlowYear(value, flowState) {
|
|
let Opts = {
|
|
unit: ['万人次'],
|
|
extra: {
|
|
area: {}
|
|
}
|
|
}
|
|
this.FlowYearData.eChartOpts = Opts
|
|
//getYearData().then(response => {
|
|
// this.FlowYearData.eChartData = response.data
|
|
//});
|
|
|
|
if (value == "西柏坡景区" && flowState == '进客流') {
|
|
this.FlowYearData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["120", "150", "241"]}],
|
|
"name": "年度客流数据",
|
|
"categories": ["2021年", "2022年", "2023年"]
|
|
}
|
|
} else if (value == "西柏坡景区" && flowState == '出客流') {
|
|
this.FlowYearData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["241", "120", "150",]}],
|
|
"name": "年度客流数据",
|
|
"categories": ["2021年", "2022年", "2023年"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '进客流') {
|
|
this.FlowYearData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["110", "200", "120",]}],
|
|
"name": "年度客流数据",
|
|
"categories": ["2021年", "2022年", "2023年"]
|
|
}
|
|
} else {
|
|
this.FlowYearData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["120", "150", "241"]}],
|
|
"name": "年度客流数据",
|
|
"categories": ["2021年", "2022年", "2023年"]
|
|
}
|
|
}
|
|
}
|
|
,
|
|
|
|
//获取 区域客流监测 数据
|
|
getFlowArea() {
|
|
currentScenicScenicList().then(response => {
|
|
this.FlowAreaData = response.data
|
|
});
|
|
}
|
|
,
|
|
|
|
//获取 按日客流分析 数据
|
|
getFlowToday(value, flowState) {
|
|
let Opts = {
|
|
unit: ['人次'],
|
|
extra: {
|
|
area: {}
|
|
}
|
|
}
|
|
let newDate = new Date()
|
|
this.startTime = this.$filter.funDate(7)
|
|
this.endTime = this.$filter.formatDate(newDate)
|
|
|
|
this.FlowTodayData.eChartOpts = Opts
|
|
if (value == "西柏坡景区" && flowState == '出客流') {
|
|
this.FlowTodayData.eChartData = {
|
|
seriesData: [{"name": "人次", "value": ["1280", "920", "1420", "2278", "1000", "1300", "1550", "1580"]}],
|
|
name: "按日客流分析",
|
|
categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '出客流') {
|
|
this.FlowTodayData.eChartData = {
|
|
seriesData: [{"name": "人次", "value": ["1000", "1300", "1550", "1580", "1280", "920", "1420", "2078"]}],
|
|
name: "按日客流分析",
|
|
categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '进客流') {
|
|
this.FlowTodayData.eChartData = {
|
|
seriesData: [{"name": "人次", "value": ["1420", "2570", "3578", "3000", "2500", "1550", "2580", "2280"]}],
|
|
name: "按日客流分析",
|
|
categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
|
|
}
|
|
} else {
|
|
this.FlowTodayData.eChartData = {
|
|
seriesData: [{"name": "人次", "value": ["3000", "2500", "1550", "2580", "2280", "1420", "2570", "3578"]}],
|
|
name: "按日客流分析",
|
|
categories: ["2023-10-20", "2023-10-21", "2023-10-22", "2023-10-23", "2023-10-24", "2023-10-25", "2023-10-26", "2023-10-27"]
|
|
}
|
|
}
|
|
}
|
|
,
|
|
|
|
//获取 客流同环比分析 数据
|
|
getFlowRing(value, flowState) {
|
|
//getFlowRatio().then(response => {
|
|
//this.FlowRingData=response.data
|
|
//});
|
|
|
|
if (value == "南长城景区" && flowState == '进客流') {
|
|
this.FlowRingData = [{
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 28,
|
|
"lastYear": 2365,
|
|
"name": "今日数据",
|
|
"sameTime": 1878,
|
|
"lastYearRatio": -33
|
|
}, {
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 42,
|
|
"lastYear": 2935,
|
|
"name": "昨日数据",
|
|
"sameTime": 2654,
|
|
"lastYearRatio": -25
|
|
}, {
|
|
"lastTime": 0,
|
|
"lastTimeRatio": -24,
|
|
"lastYear": 20585,
|
|
"name": "本周累计",
|
|
"sameTime": 27894,
|
|
"lastYearRatio": 17
|
|
}, {
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 22,
|
|
"lastYear": 75425,
|
|
"name": "本月累计",
|
|
"sameTime": 94568,
|
|
"lastYearRatio": 45
|
|
},
|
|
{
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 62,
|
|
"lastYear": 875324,
|
|
"name": "本年累计",
|
|
"sameTime": 1055413,
|
|
"lastYearRatio": 53
|
|
}
|
|
]
|
|
} else {
|
|
this.FlowRingData = [{
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 65,
|
|
"lastYear": 2378,
|
|
"name": "今日数据",
|
|
"sameTime": 3578,
|
|
"lastYearRatio": 37
|
|
}, {
|
|
"lastTime": 0,
|
|
"lastTimeRatio": -15,
|
|
"lastYear": 3154,
|
|
"name": "昨日数据",
|
|
"sameTime": 2928,
|
|
"lastYearRatio": -43
|
|
}, {
|
|
"lastTime": 0,
|
|
"lastTimeRatio": -22,
|
|
"lastYear": 25485,
|
|
"name": "本周累计",
|
|
"sameTime": 21548,
|
|
"lastYearRatio": -41
|
|
}, {
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 35,
|
|
"lastYear": 85415,
|
|
"name": "本月累计",
|
|
"sameTime": 92568,
|
|
"lastYearRatio": 25
|
|
},
|
|
{
|
|
"lastTime": 0,
|
|
"lastTimeRatio": 25,
|
|
"lastYear": 925399,
|
|
"name": "本年累计",
|
|
"sameTime": 1025412,
|
|
"lastYearRatio": 65
|
|
}
|
|
]
|
|
}
|
|
}
|
|
,
|
|
|
|
//获取 按月客流分析 数据
|
|
getFlowMoon(value, flowState) {
|
|
let postParams = {}
|
|
let Opts = {
|
|
unit: ['万人次'],
|
|
extra: {
|
|
column: {}
|
|
}
|
|
}
|
|
this.FlowMoonData.eChartOpts = Opts
|
|
// if (params == undefined) {
|
|
// this.startMonth = this.$filter.getMonths(-3)
|
|
// this.endMonth = this.$filter.getMonths(0)
|
|
// postParams = {'startTime': this.startMonth, 'endTime': this.endMonth}
|
|
// } else {
|
|
// postParams = params
|
|
// }
|
|
//getMonthData(postParams).then(response => {
|
|
//this.FlowMoonData.eChartData = response.data
|
|
//});
|
|
|
|
|
|
if (value == "西柏坡景区" && flowState == '出客流') {
|
|
this.startMonth = this.$filter.getMonths(-3)
|
|
this.endMonth = this.$filter.getMonths(0)
|
|
this.FlowMoonData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["18", "23", "42", "22"]}],
|
|
"name": "月度客流量数据",
|
|
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '出客流') {
|
|
this.startMonth = this.$filter.getMonths(-3)
|
|
this.endMonth = this.$filter.getMonths(0)
|
|
this.FlowMoonData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["12", "20", "28", "33"]}],
|
|
"name": "月度客流量数据",
|
|
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
|
|
}
|
|
} else if (value == "南长城景区" && flowState == '进客流') {
|
|
this.FlowMoonData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["31", "15", "11", "22",]}],
|
|
"name": "月度客流量数据",
|
|
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
|
|
}
|
|
} else {
|
|
this.startMonth = this.$filter.getMonths(-3)
|
|
this.endMonth = this.$filter.getMonths(0)
|
|
this.FlowMoonData.eChartData = {
|
|
"seriesData": [{"name": "万人次", "value": ["15", "44", "12", "42"]}],
|
|
"name": "月度客流量数据",
|
|
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
|
|
}
|
|
}
|
|
|
|
}
|
|
,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.change-data {
|
|
position: fixed;
|
|
right: 20px;
|
|
top: 5px;
|
|
z-index: 999999;
|
|
background: #000;
|
|
border: solid 1px #ffffff85;
|
|
color: #fff;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.p-filter {
|
|
position: fixed;
|
|
padding: 10px;
|
|
z-index: 9999;
|
|
color: #fff;
|
|
left: 50%;
|
|
top: 50px;
|
|
width: 780px;
|
|
height: 100px;
|
|
background: rgba(#242323, .8);
|
|
transform: translate(-50%, 0);
|
|
border: 1px solid #fff;
|
|
|
|
.p-filter-title {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
|
|
.p-filter-box {
|
|
display: flex;
|
|
|
|
.button {
|
|
cursor: pointer;
|
|
padding: 0 20px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
background: #fff;
|
|
color: #0d1c2d;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.button.active {
|
|
background: #C23531;
|
|
color: #fff;
|
|
}
|
|
|
|
.filter-box-item {
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
|