video_surveillance
/
videoSurveillance
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

Browse Source
dev
rosehan 2 years ago
parent ef68f2f5b8
commit 25c7e08a16
1 changed files with 133 additions and 121 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 254
      ruoyi-ui/src/views/picture/scenic-flow/index.vue

254
ruoyi-ui/src/views/picture/scenic-flow/index.vue
Unescape View File

@ -2,8 +2,8 @@
<!-- 景区客流分析 入口文件-->
<div class="p-pages-box p-pages-bg">
<!-- 页面筛选 -->
<div class="filter">分析</div>
<div class="p-filter">
<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">
@ -27,7 +27,7 @@
</el-select>
</div>
<div class="filter-box-item">
<el-select v-model="scenic" placeholder="请选择景区" @change="getchange()">
<el-select v-model="scenic" placeholder="请选择景区" @change="getchange(scenic,'')">
<el-option
v-for="item in scenicOptions"
:key="item.value"
@ -52,15 +52,15 @@
<el-row :gutter="20">
<el-col :span="8">
<!-- 实时客流统计 -->
<base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 28vh">
<base-module-card cardTitle="实时客流统计" cardType="small">
<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: 28vh">
<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"
@ -75,7 +75,7 @@
</el-col>
<el-col :span="8">
<!-- 分时段客流走势 -->
<base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 28vh">
<base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 29vh">
<base-module-card cardTitle="按周客流分析" cardType="small">
<base-echarts1 type="line" :propsData="FlowTrendData"></base-echarts1>
</base-module-card>
@ -83,16 +83,16 @@
</el-col>
<el-col :span="8">
<!-- 区域客流监测 -->
<base-module name="FlowArea" id="FlowArea" class="m-t-large" style="height: 28vh">
<base-module-card cardTitle="实时客流排行" cardType="small">
<base-rank :propsData="FlowRankData"></base-rank>
<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: 28vh">
<base-module-card cardTitle="按日客流分析" cardType="small">
<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"
@ -111,16 +111,16 @@
</el-col>
<el-col :span="8">
<!-- 客流同环比分析 -->
<base-module name="FlowRing" id="FlowRing" class="m-t-large" style="height: 28vh">
<base-module-card cardTitle="客流同环比分析" cardType="small">
<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: 28vh">
<base-module-card cardTitle="按月客流分析" cardType="small">
<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"
@ -163,6 +163,7 @@ export default {
components: {ScenicRing, scenicTime, scenicArea, baseRank},
data() {
return {
showDialog: false,
flowState: '进客流',
cityOptions: [
{
@ -267,7 +268,7 @@ export default {
MonthData: '',
startMonth: '',
endMonth: '',
FlowRankData: [],
FlowRankData: {eChartOpts: {}, eChartData: {}},
}
},
created() {
@ -304,13 +305,11 @@ export default {
MonthData: {
immediate: false,
handler(newValue, oldValue) {
console.log("newValue", newValue)
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)
}
},
//月份选择监听
@ -351,22 +350,24 @@ export default {
},
getchange(scenic, state) {//获取 实时客流统计 数据
let myScenic = ''
let myScenic = ''
let myState = ''
if (scenic == '') {
myScenic = this.scenic
} else {
if (scenic != '') {
myScenic = scenic
}
if (state == '') {
myState = this.flowState
} else {
myState = state
}
if (state == '') {
this.flowState = '出客流'
if (state == '') {
myState =this.flowState
} else {
myState = state
}
} else {
this.flowState = state
myScenic = this.scenic
if (state == '') {
myState =this.flowState
} else {
myState = state
}
}
//获取 实时客流统计 数据
@ -401,7 +402,7 @@ export default {
}
},
//获取 客流地排行 数据
getFlowRank(params) {
getFlowRank(scenic, state) {
let num = 0
//getSelectTouristSource('0').then(response => {
// let newData = response.data.seriesData.slice(0, 5)
@ -412,38 +413,80 @@ export default {
// });
// this.FlowRankData = FlowRankData
//});
let newData = [
{
num: 30,
name: '西柏坡景区',
percentage: '10'
}, {
num: 40,
name: '南长城景区',
percentage: '10'
}, {
num: 30,
name: '韩信文化苑',
percentage: '10'
}, {
num: 25,
name: '乾隆碑亭',
percentage: '10'
}, {
num: 10,
name: '毛泽东旧址',
percentage: '10'
let Opts = {
color: ['red', 'yellow', 'purple', 'blue'],
unit: ['人次'],
legend: {
show: true,
top: 'middle',
left: '55%',
lineHeight: 25,
},
extra: {
ring: {
labelShow: false,
}
}
]
let FlowRankData = newData.map((item, index) => {
num = num + 1
let itemData = {num: item.num, percentage: item.percentage, name: item.name, rank: num}
return itemData
});
this.FlowRankData = FlowRankData
},
//获取 分时段客流走势 数据
}
this.FlowRankData.eChartOpts = Opts
console.log('scenic',scenic)
if (scenic == "南长城景区") {
this.FlowRankData.eChartData = {
"name": "进出客流占比",
"seriesData": [
{
"name": "景区出客流",
"value": "95"
},
{
"name": "景区入客流",
"value": "45"
}]
}
} else {
this.FlowRankData.eChartData = {
"name": "进出客流占比",
"seriesData": [
{
"name": "景区出客流",
"value": "65"
},
{
"name": "景区入客流",
"value": "55"
}]
}
}
// 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: ['人次'],
@ -488,9 +531,10 @@ export default {
}
}
},
}
,
//获取 按年日客流分析 数据
//获取 按年日客流分析 数据
getFlowYear(value, flowState) {
let Opts = {
unit: ['人次'],
@ -528,16 +572,18 @@ export default {
"categories": ["2021年", "2022年", "2023年"]
}
}
},
}
,
//获取 区域客流监测 数据
//获取 区域客流监测 数据
getFlowArea() {
currentScenicScenicList().then(response => {
this.FlowAreaData = response.data
});
},
}
,
//获取 按日客流分析 数据
//获取 按日客流分析 数据
getFlowToday(value, flowState) {
let Opts = {
unit: ['人次'],
@ -575,9 +621,10 @@ export default {
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
@ -590,47 +637,7 @@ export default {
"lastYear": 50,
"name": "今日数据",
"sameTime": 50,
"lastYearRatio": 0
}, {
"lastTime": 0,
"lastTimeRatio": 0,
"lastYear": 0,
"name": "昨日数据",
"sameTime": 0,
"lastYearRatio": 0
}, {
"lastTime": 0,
"lastTimeRatio": 0,
"lastYear": 0,
"name": "本周累计",
"sameTime": 0,
"lastYearRatio": 0
}, {
"lastTime": 0,
"lastTimeRatio": 0,
"lastYear": 0,
"name": "本月累计",
"sameTime": 0,
"lastYearRatio": 0
},
{
"lastTime": 0,
"lastTimeRatio": 0,
"lastYear": 0,
"name": "本年累计",
"sameTime": 0,
"lastYearRatio": 0
}
]
} else if (value == "南长城景区") {
this.FlowRingData = [{
"lastTime": 30,
"lastTimeRatio": 0,
"lastYear": 30,
"name": "今日数据",
"sameTime": 30,
"lastYearRatio": 0
"lastYearRatio": 50
}, {
"lastTime": 0,
"lastTimeRatio": 0,
@ -702,9 +709,10 @@ export default {
}
]
}
},
}
,
//获取 按月客流分析 数据
//获取 按月客流分析 数据
getFlowMoon(value, flowState) {
let postParams = {}
let Opts = {
@ -744,7 +752,7 @@ export default {
}
} else if (value == "南长城景区" && flowState == '进客流') {
this.FlowMoonData.eChartData = {
"seriesData": [{"name": "人次", "value": ["30", "10", "10", "20", ]}],
"seriesData": [{"name": "人次", "value": ["30", "10", "10", "20",]}],
"name": "月度客流量数据",
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
}
@ -758,18 +766,22 @@ export default {
}
}
},
}
,
}
}
</script>
<style scoped lang="scss">
.filter {
.change-data {
position: fixed;
z-index: 9999;
color: #fff;
right: 20px;
top: 10px;
top: 5px;
z-index: 999999;
background: #000;
border: solid 1px #ffffff85;
color: #fff;
padding: 5px 10px;
}
.p-filter {

Write Preview
Loading…
Cancel
Save