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

样式修改

Browse Source
dev
rosehan 2 years ago
parent 563fbf586e
commit 25d952594a
6 changed files with 526 additions and 135 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. 53
      ruoyi-ui/src/assets/styles/picture-common.scss
  2. 54
      ruoyi-ui/src/views/components/p-rank/BaseRank.vue
  3. 3
      ruoyi-ui/src/views/components/p-saturation/BaseSaturation.vue
  4. 12
      ruoyi-ui/src/views/dashboard/eCharts1.vue
  5. 531
      ruoyi-ui/src/views/picture/scenic-flow/index.vue
  6. 8
      ruoyi-ui/src/views/picture/scenic-flow/scenic-ring.vue

53
ruoyi-ui/src/assets/styles/picture-common.scss
Unescape View File

@ -801,7 +801,7 @@ text-align: center;
position: absolute;
width: 250rem !important;
top: $p-spacer-mini;
right: 80rem;
right: 20rem;
background-color: transparent !important;
border-color: rgba($p-border-color, .5) !important;
color: #fff;
@ -836,6 +836,57 @@ text-align: center;
}
}
.p-flowyear-picker{
position: absolute;
width: 120rem !important;
top: $p-spacer-mini;
right: 20rem;
background-color: transparent !important;
border-color: rgba($p-border-color, .5) !important;
color: #fff;
.el-input__inner{ background: transparent !important;
}
/* 日期选择 */
.p-flowdata-picker {
position: absolute;
width: 250rem !important;
top: $p-spacer-mini;
right: 40rem;
background-color: transparent !important;
border-color: rgba($p-border-color, .5) !important;
color: #fff;
color: rgba($p-secondary-color, 1) !important;}
.el-range-input {
background: transparent !important;
color: #fff !important;
}
.el-range-separator {
color: #fff !important;
}
.el-date-editor .el-range-input::-webkit-input-placeholder {
/* WebKit browsers，webkit内核浏览器 */
color: rgba($p-secondary-color, 1) !important;
}
.el-date-editor .el-range-input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: rgba($p-secondary-color, 1) !important;
}
.el-date-editor .el-range-input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: rgba($p-secondary-color, 1) !important;
}
.el-date-editor .el-range-input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: rgba($p-secondary-color, 1) !important;
}
}
.p-flowdata-popper {
background-color: rgba(#102032, 1) !important;
border-color: rgba($p-border-color, 1) !important;

54
ruoyi-ui/src/views/components/p-rank/BaseRank.vue
Unescape View File

@ -67,13 +67,13 @@ export default {
}
.p-rank-top-rank {
width: 20rem;
height: 20rem;
width: 21rem;
height: 21rem;
margin-right: $p-spacer-mini;
line-height: 20rem;
text-align: center;
background: url("~@/assets/images/p_rank_blue.svg");
background-size: contain;
background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii4xNiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImIiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjI5NyIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImMiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjIwNCIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjEwNCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlLW9wYWNpdHk9Ii43IiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iLjUiIGZpbGw9InVybCgjYSkiIGQ9Ik05IC4yODkuNTkgNS4xNDR2OS43MTJMOSAxOS43MWw4LjQxLTQuODU1VjUuMTQ0eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSIvPjxwYXRoIGZpbGw9InVybCgjYikiIHRyYW5zZm9ybT0icm90YXRlKDMwIDYuOTMyIDE2LjUyNikiIGQ9Ik01LjE2NCAxLjkyOGg4djE2aC04eiIvPjxwYXRoIGQ9Im05IDIgNi45MjggNHY4TDkgMThsLTYuOTI4LTRWNkw5IDJabTAgLjU3N0wyLjU3MSA2LjI4OXY3LjQyMUw5IDE3LjQyMmw2LjQyOC0zLjcxMlY2LjI4OUw5IDIuNTc3WiIgZmlsbD0idXJsKCNjKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSIvPjwvZz48L3N2Zz4=);
background-size:26px;
background-position: center;
background-repeat: no-repeat;
}
@ -95,57 +95,23 @@ export default {
}
.p-rank-box.rank1 {
.p-rank-top-name, .p-rank-top-num, .p-rank-top-percentage {
color: #e8415d;
.p-rank-top-num{color: rgb(255, 106, 20);font-size: 16px;}
.p-rank-top-name, .p-rank-top-percentage {
color: #fff;
}
.p-rank-top-rank {
background: url("~@/assets/images/p_rank_first.svg");
background-size: contain;
background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJhIj48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9IjAiIG9mZnNldD0iMCUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkZGIiBzdG9wLW9wYWNpdHk9Ii4xNiIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImIiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjI5NyIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iMCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImMiPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjIwNCIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iLjEwNCIgb2Zmc2V0PSIxMDAlIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGcgZmlsbD0ibm9uZSI+PHBhdGggc3Ryb2tlLW9wYWNpdHk9Ii43IiBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iLjUiIGZpbGw9InVybCgjYSkiIGQ9Ik05IC4yODkuNTkgNS4xNDR2OS43MTJMOSAxOS43MWw4LjQxLTQuODU1VjUuMTQ0eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSIvPjxwYXRoIGZpbGw9InVybCgjYikiIHRyYW5zZm9ybT0icm90YXRlKDMwIDYuOTMyIDE2LjUyNikiIGQ9Ik01LjE2NCAxLjkyOGg4djE2aC04eiIvPjxwYXRoIGQ9Im05IDIgNi45MjggNHY4TDkgMThsLTYuOTI4LTRWNkw5IDJabTAgLjU3N0wyLjU3MSA2LjI4OXY3LjQyMUw5IDE3LjQyMmw2LjQyOC0zLjcxMlY2LjI4OUw5IDIuNTc3WiIgZmlsbD0idXJsKCNjKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSIvPjwvZz48L3N2Zz4=);
background-size:26px;
background-position: center;
background-repeat: no-repeat;
}
.p-rank-bar-inner {
background: linear-gradient(to right, rgba(#e8415d, .2), rgba(#e8415d, 1));
border-radius: 6rem;
}
}
.p-rank-box.rank2 {
.p-rank-top-rank {
background: url("~@/assets/images/p_rank_second.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.p-rank-top-name, .p-rank-top-num, .p-rank-top-percentage {
color: #f60;
}
.p-rank-bar-inner {
background: linear-gradient(to right, rgba(#f60, .2), rgba(#f60, 1));
background-image: linear-gradient(90deg, #fe972a 0%, #fa3239 100%);
border-radius: 6rem;
}
}
.p-rank-box.rank3 {
.p-rank-top-rank {
background: url("~@/assets/images/p_rank_third.svg");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.p-rank-top-name, .p-rank-top-num, .p-rank-top-percentage {
color: #e8cc41;
}
.p-rank-bar-inner {
background: linear-gradient(to right, rgba(#e8cc41, .2), rgba(#e8cc41, 1));
border-radius: 6rem;
}
}
</style>

3
ruoyi-ui/src/views/components/p-saturation/BaseSaturation.vue
Unescape View File

@ -5,8 +5,7 @@
<span class="p-flow-saturation-level"></span>
<div class="m-l-mini flex-auto display-flex"><i class="iconfont m-r-mini" :class="'icon-'+ getTypeClass(type)"></i>
<div class="p-flow-saturation-text">
<base-dict :options="dict.type.comfort_match" :value='percentage' v-if="type=='car'" />
<base-dict :options="dict.type.comfort_match" :value='percentage' v-if="type=='flow'"/>
舒适
</div>
</div>
<!-- <div class="p-flow-saturation-tip">{{ endText }}：<span class="num">{{ endValue }}</span>-->

12
ruoyi-ui/src/views/dashboard/eCharts1.vue
Unescape View File

@ -8,7 +8,7 @@ import resize from './mixins/resize'// echarts 调整大小
//['blue','green','yellow','orange','red','purple','pink','lightBlue','lightGreen','lightYellow','lightOrange','lightPink','lightRed','lightPurple'],
const colorPalette = {
blue: '#1976d2',
blue: '#C23531',
green: '#388e3c',
yellow: '#fbc02d',
orange: '#ff6600',
@ -56,17 +56,17 @@ const config = {
yAxisWidth: 15,
xAxisHeight: 22,
legend: true,
pageTextColor: 'rgba(255,255,255,1)',
pageIconColor: 'rgba(255,255,255,1)',
pageTextColor: 'rgba(255,255,255,.4)',
pageIconColor: 'rgba(255,255,255,.4)',
pageIconSize: '10',
padding: [10, 10, 10, 10],
color: Object.values(colorPalette),
linearColor: Object.values(linearPalette),
rotate: false,
fontSize: 14,
fontColor: 'rgba(255,255,255,.9)',
legendColor: 'rgba(255,255,255,.9)',
axisColor: 'rgba(255,255,255,.9)',
fontColor: 'rgba(255,255,255,.4)',
legendColor: 'rgba(255,255,255,.5)',
axisColor: 'rgba(255,255,255,.4)',
barWidth: 10,
smooth: true,
borderRadius: [10, 10, 0, 0],

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

@ -1,12 +1,13 @@
<template>
<!-- 景区客流分析 入口文件-->
<div class="p-pages-box p-pages-bg">
<!-- 页面筛选 -->
<div class="filter">分析</div>
<div 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="请选择市">
<el-select v-model="city" placeholder="请选择市" style="width: 130px;">
<el-option
v-for="item in cityOptions"
:key="item.value"
@ -16,7 +17,17 @@
</el-select>
</div>
<div class="filter-box-item">
<el-select v-model="scenic" placeholder="请选择景区">
<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()">
<el-option
v-for="item in scenicOptions"
:key="item.value"
@ -26,14 +37,14 @@
</el-select>
</div>
<div class="filter-box-item">
<div class="button">进客流</div>
<div class="button" :class="flowState=='进客流'?'active':''" @click="getflowState('','进客流')">进客流</div>
</div>
<div class="filter-box-item">
<div class="button">出客流</div>
<div class="button" :class="flowState=='出客流'?'active':''" @click="getflowState('','出客流')">出客流</div>
</div>
</div>
</div>
<!-- 页面头部 -->
<base-header title="景区客流分析"></base-header>
<!-- 页面主体 -->
@ -47,26 +58,33 @@
</base-module-card>
</base-module>
</el-col>
<el-col :span="8">
<!-- 分时段客流走势 -->
<base-module name="FlowTime" id="FlowTime" class="m-t-large" style="height: 28vh">
<base-module-card cardTitle="分时段客流走势" cardType="small">
<base-echarts1 type="line" :propsData="FlowTrendData"></base-echarts1>
</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-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: 28vh">
<base-module-card cardTitle="按周客流分析" cardType="small">
<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: 28vh">
<base-module-card cardTitle="客源地排行" cardType="small">
<base-module-card cardTitle="实时客流排行" cardType="small">
<base-rank :propsData="FlowRankData"></base-rank>
</base-module-card>
</base-module>
@ -144,6 +162,7 @@ export default {
components: {ScenicRing, scenicTime, scenicArea, baseRank},
data() {
return {
flowState: '进客流',
cityOptions: [{
value: '石家庄市',
label: '石家庄市'
@ -175,24 +194,50 @@ export default {
value: '衡水市',
label: '衡水市'
}],
city: '',
scenic: '',
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: '保定军校纪念馆'
value: '韩信文化苑',
label: '韩信文化苑'
}, {
value: '秦皇岛野生动物园',
label: '秦皇岛野生动物园'
value: '乾隆碑亭',
label: '乾隆碑亭'
}, {
value: '磬锤峰森林公园景区',
label: '磬锤峰森林公园景区'
value: '毛泽东旧址',
label: '毛泽东旧址'
}],
scenic: '西柏坡景区',
yearData: '2023',
//实时客流统计 数据
FlowTimeData: {
saturatio: {name: "", percentage: ""},
@ -217,7 +262,6 @@ export default {
startMonth: '',
endMonth: '',
FlowRankData: [],
}
},
created() {
@ -235,6 +279,7 @@ export default {
this.getFlowRing();
//获取 按月客流分析 数据
this.getFlowMoon();
//获取 客流排行 数据
this.getFlowRank();
},
watch: {
@ -253,62 +298,209 @@ 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)
}
},
//月份选择监听
yearData: {
immediate: false,
handler(newValue, oldValue) {
let backYear = newValue.getFullYear()
this.getFlowYear(backYear)
}
},
},
methods: {
//获取 实时客流统计 数据
getFlowTime() {
getcurrentScenic().then(response => {
this.FlowTimeData = response.data
});
getflowState(scenic, state) {
this.flowState = state
this.getchange(scenic, state)
},
getchange(scenic, state) {//获取 实时客流统计 数据
let myScenic = ''
let myState = ''
if (scenic == '') {
myScenic = this.scenic
} else {
myScenic = scenic
}
if (state == '') {
myState = this.flowState
} else {
myState = state
}
if (state == '') {
this.flowState = '出客流'
} else {
this.flowState = 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": "824", "flowNum": "824", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
} else if (value == "南长城景区") {
this.FlowTimeData = {"dayNum": "224", "flowNum": "224", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
} else {
this.FlowTimeData = {"dayNum": "33", "flowNum": "33", "alertNum": 8000, "maxLoad": "10000", "ratio": "0.00"}
}
},
//获取 客流地排行 数据
getFlowRank(params) {
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
//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 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 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
},
//获取 分时段客流走势 数据
getFlowTrend() {
getFlowTrend(value, flowState) {
let Opts = {
unit: ['人次'],
extra: {
line: {linearType: "custom",}
line: {}
}
}
this.FlowTrendData.eChartOpts = Opts
getHourData().then(response => {
this.FlowTrendData.eChartData = response.data
});
//getHourData().then(response => {
//this.FlowTrendData.eChartData = response.data
//});
if (value == "西柏坡景区" && flowState == '进客流') {
this.FlowTrendData.eChartData = {
"seriesData": [{"name": "人次", "value": ["40", "10", "10", "20", "30", "50", "20"]}],
"name": "周客流数据",
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
} else if (value == "南长城景区" && flowState == '进客流') {
this.FlowTrendData.eChartData = {
"seriesData": [{"name": "人次", "value": ["10", "20", "30", "0", "10", "20", "30",]}],
"name": "当日小时数据",
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
} else if (value == "西柏坡景区" && flowState == '出客流') {
this.FlowTrendData.eChartData = {
"seriesData": [{"name": "人次", "value": ["30", "50", "40", "0", "10", "20", "10"]}],
"name": "当日小时数据",
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
} else if (value == "南长城景区" && flowState == '出客流') {
this.FlowTrendData.eChartData = {
"seriesData": [{"name": "人次", "value": ["30", "10", "20", "30", "50", "40", "0"]}],
"name": "当日小时数据",
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
} else {
this.FlowTrendData.eChartData = {
"seriesData": [{"name": "人次", "value": ["10", "20", "30", "50", "40", "10", "20"]}],
"name": "当日小时数据",
"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
}
}
},
//获取 按年日客流分析 数据
getFlowYear() {
getFlowYear(value, flowState) {
let Opts = {
unit: ['人次'],
color: ['orange'],
extra: {
area: {linearType: "custom",}
area: {}
}
}
this.FlowYearData.eChartOpts = Opts
getYearData().then(response => {
this.FlowYearData.eChartData = response.data
});
//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年"]
}
}
},
//获取 区域客流监测 数据
@ -319,60 +511,226 @@ export default {
},
//获取 按日客流分析 数据
getFlowToday(params) {
let postParams = {}
getFlowToday(value, flowState) {
let Opts = {
unit: ['人次'],
color: ['orange'],
extra: {
area: {
linearType: "custom",
}
area: {}
}
}
let newDate = new Date()
this.startTime = this.$filter.funDate(7)
this.endTime = this.$filter.formatDate(newDate)
this.FlowTodayData.eChartOpts = Opts
if (params == undefined) {
let newDate = new Date()
this.startTime = this.$filter.funDate(7)
this.endTime = this.$filter.formatDate(newDate)
postParams = {'startTime': this.startTime, 'endTime': this.endTime}
if (value == "西柏坡景区" && flowState == '进客流') {
this.FlowTodayData.eChartData = {
seriesData: [{"name": "人次", "value": ["20", "30", "50", "80", "30", "40", "20", "10"]}],
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": ["40", "50", "30", "90", "70", "10", "30", "50"]}],
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": ["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"]
}
} else {
postParams = params
this.FlowTodayData.eChartData = {
seriesData: [{"name": "人次", "value": ["60", "30", "50", "10", "60", "50", "60", "10"]}],
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"]
}
}
getDayData(postParams).then(response => {
this.FlowTodayData.eChartData = response.data
});
},
//获取 客流同环比分析 数据
getFlowRing() {
getFlowRatio().then(response => {
this.FlowRingData = response.data
});
getFlowRing(value, flowState) {
//getFlowRatio().then(response => {
//this.FlowRingData=response.data
//});
if (value == "西柏坡景区") {
this.FlowRingData = [{
"lastTime": 50,
"lastTimeRatio": 0,
"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
}, {
"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 {
this.FlowRingData = [{
"lastTime": 20,
"lastTimeRatio": 0,
"lastYear": 20,
"name": "今日数据",
"sameTime": 20,
"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": 60,
"lastTimeRatio": 0,
"lastYear": 0,
"name": "本年累计",
"sameTime": 0,
"lastYearRatio": 0
}
]
}
},
//获取 按月客流分析 数据
getFlowMoon(params) {
getFlowMoon(value, flowState) {
let postParams = {}
let Opts = {
unit: ['人次'],
extra: {
column: {
linearType: "custom",
}
column: {}
}
}
this.FlowMoonData.eChartOpts = Opts
if (params == undefined) {
// 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": ["50", "10", "60", "20"]}],
"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)
postParams = {'startTime': this.startMonth, 'endTime': this.endMonth}
this.FlowMoonData.eChartData = {
"seriesData": [{"name": "人次", "value": ["10", "20", "30", "10"]}],
"name": "月度客流量数据",
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
}
} else if (value == "南长城景区" && flowState == '进客流') {
this.FlowMoonData.eChartData = {
"seriesData": [{"name": "人次", "value": ["30", "10", "10", "20", ]}],
"name": "月度客流量数据",
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
}
} else {
postParams = params
this.startMonth = this.$filter.getMonths(-3)
this.endMonth = this.$filter.getMonths(0)
this.FlowMoonData.eChartData = {
"seriesData": [{"name": "人次", "value": ["15", "40", "10", "50"]}],
"name": "月度客流量数据",
"categories": ["2023-07", "2023-08", "2023-09", "2023-10"]
}
}
getMonthData(postParams).then(response => {
this.FlowMoonData.eChartData = response.data
});
},
}
}
@ -394,12 +752,16 @@ export default {
color: #fff;
left: 50%;
top: 50px;
width: 700px;
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-title {
text-align: center;
margin-bottom: 10px;
}
}
.p-filter-box {
@ -415,6 +777,11 @@ export default {
border-radius: 5px;
}
.button.active {
background: #C23531;
color: #fff;
}
.filter-box-item {
margin: 0 10px;
}

8
ruoyi-ui/src/views/picture/scenic-flow/scenic-ring.vue
Unescape View File

@ -42,6 +42,14 @@ export default {
that.tableData = that.propsData
}, 1000);
},
watch: {
//日期选择监听
propsData: {
immediate: false,
handler(newValue, oldValue) {
this.tableData = newValue
}
}}
}
</script>

Write Preview
Loading…
Cancel
Save