changtong
6 months ago
11 changed files with 952 additions and 243 deletions
|
After Width: | Height: | Size: 979 B |
|
After Width: | Height: | Size: 708 B |
@ -1,233 +0,0 @@ |
|||
<template> |
|||
<div class="container" ref="appRef" :class="{ red: name == '一曼村' }"> |
|||
<div class="main-title"> |
|||
<outsideTitle :title="title"></outsideTitle> |
|||
</div> |
|||
<div class="main"> |
|||
<div class="main-left"> |
|||
<div class="video"> |
|||
<LivePlayer |
|||
fluent |
|||
autoplay |
|||
:loop="true" |
|||
:videoUrl="videoUrl" |
|||
stretch |
|||
:hide-big-play-button="true" |
|||
:muted="false" |
|||
aspect="513:292" |
|||
alt="正在加载中..." |
|||
></LivePlayer> |
|||
</div> |
|||
<div class="card" @click="toPage('/out-pbService')"> |
|||
<img :src="require('@/assets/pbImage/card-icon1.png')" /> |
|||
<span>公共服务</span> |
|||
</div> |
|||
</div> |
|||
<div class="main-right"> |
|||
<div |
|||
class="card card2" |
|||
@click="toPage('/out-organization')" |
|||
> |
|||
<img :src="require('@/assets/pbImage/card-icon2.png')" /> |
|||
<span>组织振兴</span> |
|||
</div> |
|||
<div class="card card3" @click="toPage('/out-travel')"> |
|||
<img :src="require('@/assets/pbImage/card-icon3.png')" /> |
|||
<span>文化旅游</span> |
|||
</div> |
|||
<div class="card card4" @click="toPage('/out-industry')"> |
|||
<img :src="require('@/assets/pbImage/card-icon4.png')" /> |
|||
<span>产业发展</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import outsideTitle from "./components/outsideTitle.vue"; |
|||
import { useIndex } from "../../utils/utilsDramAdmin.js"; |
|||
import LivePlayer from "@liveqing/liveplayer"; |
|||
|
|||
export default { |
|||
name: "", |
|||
components: { |
|||
outsideTitle, |
|||
LivePlayer |
|||
}, |
|||
data() { |
|||
return { |
|||
title: "·" + this.$route.query.areaName + "公服代办点", |
|||
name: this.$route.query.areaName, |
|||
areaCode: this.$route.query.areaCode, |
|||
videoUrl: "" |
|||
}; |
|||
}, |
|||
created() {}, |
|||
mounted() { |
|||
const { calcRate, windowDraw } = useIndex(this.$refs.appRef); |
|||
calcRate(); |
|||
windowDraw(); |
|||
this.initData(); |
|||
}, |
|||
beforeDestroy() {}, |
|||
methods: { |
|||
initData() { |
|||
let params = { |
|||
areaCode: this.areaCode |
|||
}; |
|||
this.$http |
|||
.post("/area/info/getById", this.common.request(params)) |
|||
.then(res => { |
|||
if (res.data.code == 200) { |
|||
this.videoUrl = res.data.data.map4; |
|||
} else { |
|||
this.$Message.error("操作失败"); |
|||
} |
|||
}); |
|||
}, |
|||
toPage (path) { |
|||
this.$router.push( |
|||
{ |
|||
path: path, |
|||
query: { |
|||
areaName: this.name, |
|||
areaCode: this.areaCode |
|||
} |
|||
} |
|||
) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
/deep/ .video-wrapper { |
|||
border-radius: 12px; |
|||
} |
|||
|
|||
/deep/ .ivu-page { |
|||
color: #fff; |
|||
background-color: transparent; |
|||
} |
|||
|
|||
/deep/ .ivu-page-next, |
|||
/deep/ .ivu-page-prev, |
|||
/deep/ .ivu-page-item, |
|||
/deep/ .ivu-page-options-elevator input { |
|||
background-color: transparent; |
|||
color: #fff; |
|||
text-align: center; |
|||
} |
|||
|
|||
/deep/ .ivu-page-next a, |
|||
/deep/ .ivu-page-prev a, |
|||
/deep/ .ivu-page-item a { |
|||
color: #fff; |
|||
} |
|||
|
|||
.red { |
|||
background-image: url("../../assets/pbImage/red-bg.png") !important; |
|||
} |
|||
.container { |
|||
width: 1920px; |
|||
height: 1080px; |
|||
transform: scale(var(--scale)) translate(-50%, -50%); |
|||
transform-origin: 0 0; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
background-image: url("../../assets/pbImage/out-bg.png"); |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
|
|||
.main-title { |
|||
width: 1788px; |
|||
height: 100px; |
|||
position: absolute; |
|||
top: 30px; |
|||
} |
|||
|
|||
.main { |
|||
position: absolute; |
|||
top: 152px; |
|||
width: 1790px; |
|||
height: 890px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.main-left { |
|||
width: 1026px; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
.video { |
|||
width: 100%; |
|||
height: 584px; |
|||
} |
|||
.card { |
|||
width: 100%; |
|||
height: 280px; |
|||
background: url("../../assets/pbImage/card1.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
img { |
|||
width: 158px; |
|||
height: 158px; |
|||
} |
|||
span { |
|||
font-family: ShiShangZhongHeiJianTi; |
|||
font-size: 84px; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
margin-left: 45px; |
|||
} |
|||
} |
|||
} |
|||
.main-right { |
|||
width: 742px; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
.card { |
|||
width: 100%; |
|||
height: 280px; |
|||
background-color: #fff; |
|||
background-size: 100% 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
img { |
|||
width: 158px; |
|||
height: 158px; |
|||
} |
|||
span { |
|||
font-family: ShiShangZhongHeiJianTi; |
|||
font-size: 84px; |
|||
font-weight: 400; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
margin-left: 45px; |
|||
} |
|||
} |
|||
.card2 { |
|||
background: url("../../assets/pbImage/card2.png") no-repeat; |
|||
} |
|||
.card3 { |
|||
background: url("../../assets/pbImage/card3.png") no-repeat; |
|||
} |
|||
.card4 { |
|||
background: url("../../assets/pbImage/card4.png") no-repeat; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,928 @@ |
|||
<template> |
|||
<!-- 智慧旅游态势 --> |
|||
<div class="eb-container" ref="appRef"> |
|||
<MainTitle class="mainTitle" :title="title"></MainTitle> |
|||
<div class="main-content"> |
|||
<div class="tree-box"> |
|||
<Tree :data="treeList" :render="renderContent"></Tree> |
|||
</div> |
|||
<div class="right-main"> |
|||
<div class="top-content"> |
|||
<div class="video-box"> |
|||
<div style="width: 1070px"> |
|||
<common-live-player |
|||
:videoUrl="videoUrl" |
|||
:live="true" |
|||
></common-live-player> |
|||
</div> |
|||
<div class="video-list" v-if="videoList.length > 0"> |
|||
<div |
|||
class="video-item" |
|||
@click="changeVideo(item, index)" |
|||
v-for="(item, index) in videoList" |
|||
:key="index" |
|||
> |
|||
<div class="icon-status"> |
|||
<img |
|||
style="width: 20px" |
|||
:src=" |
|||
require('@/assets/largeScreen/sxt.png') |
|||
" |
|||
/> |
|||
<img |
|||
style="width: 42px" |
|||
v-if="index == videoIndex" |
|||
:src=" |
|||
require('@/assets/largeScreen/bfz.png') |
|||
" |
|||
/> |
|||
</div> |
|||
<span class="video-name">{{ |
|||
item.deviceName |
|||
}}</span> |
|||
</div> |
|||
</div> |
|||
<div class="video-list" v-else style="display: flex;justify-content: center;align-items: center;font-size: 18px;color: #aaaaaa;"> |
|||
暂无监控资源 |
|||
</div> |
|||
</div> |
|||
<div class="top-right-data"> |
|||
<div |
|||
class="content-box" |
|||
style="width: 100%; height: 25%" |
|||
> |
|||
<div class="box-title">实时客流</div> |
|||
<div class="box-data"> |
|||
<div class="num"> |
|||
<CountTo |
|||
:startVal="0" |
|||
:endVal="count" |
|||
:duration="2000" |
|||
/> |
|||
<span |
|||
style=" |
|||
margin-left: 10px; |
|||
margin-bottom: 15px; |
|||
font-size: 20px; |
|||
" |
|||
>人</span |
|||
> |
|||
</div> |
|||
<!-- <div class="percent"> |
|||
<div style="width: 80%"> |
|||
<Progress :percent="dayvalue"></Progress> |
|||
</div> |
|||
<span style="font-size: 14px">人</span> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="content-box" |
|||
style="width: 100%; height: 25%" |
|||
> |
|||
<div class="box-title">实时累计客流</div> |
|||
<div class="box-data"> |
|||
<div class="num"> |
|||
<CountTo |
|||
:startVal="0" |
|||
:endVal="cumulative" |
|||
:duration="2000" |
|||
/> |
|||
<span |
|||
style=" |
|||
margin-left: 10px; |
|||
margin-bottom: 15px; |
|||
font-size: 20px; |
|||
" |
|||
>人</span |
|||
> |
|||
</div> |
|||
<!-- <div class="percent"> |
|||
<div style="width: 80%"> |
|||
<Progress :percent="dayLimit"></Progress> |
|||
</div> |
|||
<span style="font-size: 14px">人</span> |
|||
</div> --> |
|||
</div> |
|||
</div> |
|||
<div |
|||
class="content-box" |
|||
style="width: 100%; height: 48%" |
|||
> |
|||
<div class="box-title">实时客流来源</div> |
|||
<div class="tabs"> |
|||
<span |
|||
style="margin: 0 10px; cursor: pointer" |
|||
:style="{ |
|||
color: |
|||
tabIndex == index |
|||
? '#169bcf' |
|||
: '#aaaaaa', |
|||
}" |
|||
@click="tabIndex = index" |
|||
v-for="(item, index) in tabs" |
|||
:key="index" |
|||
>{{ item }}</span |
|||
> |
|||
</div> |
|||
<div class="content-list" v-if="tabIndex == 0"> |
|||
<div |
|||
class="content-item" |
|||
v-for="(item, index) in provinceList" |
|||
:key="index" |
|||
> |
|||
<div class="name"> |
|||
{{ index + 1 + "." + item.key }} |
|||
</div> |
|||
<div class="percent"> |
|||
<Progress |
|||
:stroke-width="20" |
|||
:percent="item.value" |
|||
></Progress> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="content-list" v-if="tabIndex == 1"> |
|||
<div |
|||
class="content-item" |
|||
v-for="(item, index) in cityList" |
|||
:key="index" |
|||
> |
|||
<div class="name"> |
|||
{{ index + 1 + "." + item.key }} |
|||
</div> |
|||
<div class="percent"> |
|||
<Progress |
|||
:stroke-width="20" |
|||
:percent="item.value" |
|||
></Progress> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="bottom-content"> |
|||
<div class="content-box" style="width: 33%"> |
|||
<div class="box-title">近七日客流趋势</div> |
|||
<div id="chart1" style="flex: 1"></div> |
|||
</div> |
|||
<div class="content-box" style="width: 33%"> |
|||
<div class="box-title">客流年龄结构</div> |
|||
<div id="chart2" style="flex: 1"></div> |
|||
</div> |
|||
<div class="content-box" style="width: 33%"> |
|||
<div class="box-title">停留时长分布</div> |
|||
<div id="chart3" style="flex: 1"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { useIndex } from "../../utils/utilsDramAdmin"; |
|||
import MainTitle from "./components/MainTitle.vue"; |
|||
import CommonLivePlayer from "@/views/common-components/common-live-player.vue"; |
|||
import * as echarts from "echarts"; |
|||
import { echartsFocus, echartsClear } from "@/utils/autoEcharts"; |
|||
import { format } from "@/libs/date"; |
|||
export default { |
|||
name: "SmartTravel", |
|||
components: { MainTitle, CommonLivePlayer }, |
|||
data() { |
|||
return { |
|||
title: "智慧旅游态势", |
|||
currentTreeItem: {}, |
|||
videoUrl: "", |
|||
tabs: ["省份", "城市"], |
|||
tabIndex: 0, |
|||
videoList: [ |
|||
{ |
|||
deviceName: "监控监控监控1111", |
|||
url: "", |
|||
}, |
|||
{ |
|||
deviceName: "监控监控监控1111", |
|||
url: "", |
|||
}, |
|||
], |
|||
videoIndex: 0, |
|||
treeList: [ |
|||
{ |
|||
title: "翠屏区全域", |
|||
code: "F511502", |
|||
expand: true, |
|||
children: [ |
|||
{ |
|||
title: "流杯池公园", |
|||
code: "F51150205", |
|||
expand: true, |
|||
}, |
|||
{ |
|||
title: "翠屏山景区", |
|||
code: "F51150204", |
|||
expand: true, |
|||
}, |
|||
{ |
|||
title: "李庄古镇", |
|||
code: "F51150203", |
|||
expand: true, |
|||
}, |
|||
{ |
|||
title: "合江门冠英街", |
|||
code: "F51150202", |
|||
expand: true, |
|||
}, |
|||
{ |
|||
title: "五粮液景区", |
|||
code: "F51150201", |
|||
expand: true, |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
count: 0, |
|||
cumulative: 0, |
|||
dayLimit: 0, |
|||
dayvalue: 0, |
|||
provinceList: [], |
|||
cityList: [], |
|||
}; |
|||
}, |
|||
computed: {}, |
|||
created() {}, |
|||
mounted() { |
|||
const { calcRate, windowDraw } = useIndex(this.$refs.appRef); |
|||
calcRate(); |
|||
windowDraw(); |
|||
this.changeTree(this.treeList[0].children[0]); |
|||
}, |
|||
beforeDestroy() { |
|||
echartsClear(); |
|||
}, |
|||
methods: { |
|||
renderContent(h, { root, node, data }) { |
|||
return h( |
|||
"span", |
|||
{ |
|||
style: { |
|||
display: "inline-block", |
|||
width: "100%", |
|||
height: "40px", |
|||
color: |
|||
this.currentTreeItem.code == data.code |
|||
? "#169bcf" |
|||
: "#aaaaaa", |
|||
fontSize: "20px", |
|||
cursor: "pointer", |
|||
}, |
|||
props: {}, |
|||
on: { |
|||
click: () => { |
|||
this.changeTree(data); |
|||
}, |
|||
}, |
|||
}, |
|||
data.title |
|||
); |
|||
}, |
|||
initChart1(xData, yData) { |
|||
let myChart = echarts.init(document.getElementById("chart1")); |
|||
let option = { |
|||
tooltip: { |
|||
trigger: "axis", |
|||
axisPointer: {}, |
|||
}, |
|||
grid: { |
|||
top: "15%", |
|||
left: "5%", |
|||
bottom: "5%", |
|||
rigth: 0, |
|||
containLabel: true, |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: "category", |
|||
boundaryGap: false, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
data: xData, |
|||
}, |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: "value", |
|||
name: "单位：人", |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
nameTextStyle: { |
|||
color: "#aaaaaa", |
|||
fontSize: 12, |
|||
lineHeight: 40, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
name: "实时客流", |
|||
type: "line", |
|||
smooth: true, |
|||
symbolSize: 8, |
|||
zlevel: 3, |
|||
lineStyle: { |
|||
normal: { |
|||
color: "#169bcf", |
|||
shadowBlur: 3, |
|||
shadowColor: "#169bcf", |
|||
}, |
|||
}, |
|||
data: yData, |
|||
}, |
|||
], |
|||
}; |
|||
myChart.setOption(option); |
|||
echartsFocus(myChart, xData.length); |
|||
}, |
|||
initChart2(xData, yData) { |
|||
let myChart = echarts.init(document.getElementById("chart2")); |
|||
let option = { |
|||
tooltip: { |
|||
trigger: "axis", |
|||
formatter: (params) => { |
|||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`; |
|||
params.forEach((item) => { |
|||
dataStr += `<div> |
|||
<div style="margin: 0 8px;"> |
|||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span> |
|||
<span style="float:right;color:#000000;margin-left:20px;">${item.data}%</span> |
|||
</div> |
|||
</div>`; |
|||
}); |
|||
return dataStr; |
|||
}, |
|||
axisPointer: { |
|||
type: "shadow", |
|||
}, |
|||
}, |
|||
grid: { |
|||
top: "15%", |
|||
left: "5%", |
|||
bottom: "5%", |
|||
rigth: 0, |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
boundaryGap: true, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
data: xData, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: "单位：%", |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
nameTextStyle: { |
|||
color: "#aaaaaa", |
|||
fontSize: 12, |
|||
lineHeight: 40, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: yData, |
|||
xAxisIndex: 0, |
|||
yAxisIndex: 0, |
|||
type: "bar", |
|||
barWidth: "40%", |
|||
showBackground: true, |
|||
color: "#169bcf", |
|||
backgroundStyle: { |
|||
color: "rgba(180, 180, 180, 0.2)", |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: "top", |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
formatter: "{c}%", |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
myChart.setOption(option); |
|||
echartsFocus(myChart, xData.length); |
|||
}, |
|||
initChart3(xData, yData) { |
|||
let myChart = echarts.init(document.getElementById("chart3")); |
|||
let option = { |
|||
tooltip: { |
|||
trigger: "axis", |
|||
formatter: (params) => { |
|||
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`; |
|||
params.forEach((item) => { |
|||
dataStr += `<div> |
|||
<div style="margin: 0 8px;"> |
|||
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span> |
|||
<span style="float:right;color:#000000;margin-left:20px;">${item.data}%</span> |
|||
</div> |
|||
</div>`; |
|||
}); |
|||
return dataStr; |
|||
}, |
|||
axisPointer: { |
|||
type: "shadow", |
|||
barShadowWidth: "40%", |
|||
}, |
|||
}, |
|||
grid: { |
|||
top: "15%", |
|||
left: "5%", |
|||
bottom: "5%", |
|||
rigth: 0, |
|||
containLabel: true, |
|||
}, |
|||
xAxis: { |
|||
type: "category", |
|||
boundaryGap: true, |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
axisLine: { |
|||
lineStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
data: xData, |
|||
}, |
|||
yAxis: { |
|||
type: "value", |
|||
name: "单位：%", |
|||
axisLabel: { |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
}, |
|||
nameTextStyle: { |
|||
color: "#aaaaaa", |
|||
fontSize: 12, |
|||
lineHeight: 40, |
|||
}, |
|||
splitLine: { |
|||
show: false, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
}, |
|||
axisTick: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: yData, |
|||
xAxisIndex: 0, |
|||
yAxisIndex: 0, |
|||
type: "bar", |
|||
barWidth: "20%", |
|||
showBackground: false, |
|||
color: "#169bcf", |
|||
backgroundStyle: { |
|||
color: "rgba(180, 180, 180, 0.2)", |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: "top", |
|||
textStyle: { |
|||
color: "#aaaaaa", |
|||
}, |
|||
formatter: "{c}%", |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
myChart.setOption(option); |
|||
echartsFocus(myChart, xData.length); |
|||
}, |
|||
changeTree(data) { |
|||
this.videoIndex = 0; |
|||
this.videoList = []; |
|||
this.videoUrl = ""; |
|||
this.currentTreeItem = data; |
|||
echartsClear() |
|||
this.realtimeTourist(); |
|||
this.touristCumulative(); |
|||
this.beforeDaysTourist(); |
|||
this.durationRate(); |
|||
this.originProvince(); |
|||
this.portraitAge(); |
|||
this.originCity(); |
|||
this.queryDevice(); |
|||
}, |
|||
changeVideo(item, index) { |
|||
this.videoIndex = index; |
|||
this.videoUrl = item.url; |
|||
}, |
|||
// 查询监控 |
|||
queryDevice() { |
|||
let params = { |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
deviceType: this.currentTreeItem.title, |
|||
}; |
|||
if (this.currentTreeItem.title == "翠屏区全域") { |
|||
params = { |
|||
pageNum: 1, |
|||
pageSize: 100, |
|||
}; |
|||
} else if (this.currentTreeItem.title == "合江门冠英街") { |
|||
params = { |
|||
pageNum: 1, |
|||
pageSize: 100, |
|||
deviceName: "合江门", |
|||
}; |
|||
} |
|||
this.$http |
|||
.post("device/queryDeviceInfoPage", this.common.request(params)) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
this.videoList = res.data.data.records; |
|||
if (this.videoList.length > 0) { |
|||
this.changeVideo(this.videoList[0], 0); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
// 查询实时客流 |
|||
realtimeTourist() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/realtimeTourist", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
this.count = res.data.data; |
|||
// this.dayvalue = parseFloat((this.count / 100).toFixed(2)) |
|||
} |
|||
}); |
|||
}, |
|||
// 查询实时客流累计 |
|||
touristCumulative() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/touristCumulative", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
this.cumulative = res.data.data; |
|||
// this.dayLimit = parseFloat((this.count / 200).toFixed(2)) |
|||
} |
|||
}); |
|||
}, |
|||
// 查询近七日游客数量 |
|||
beforeDaysTourist() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
beforeDays: "7", |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/beforeDaysTourist", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
let xData = res.data.data.map( |
|||
(item) => item.beforeDayStr |
|||
); |
|||
let yData = res.data.data.map( |
|||
(item) => item.touristNum |
|||
); |
|||
this.initChart1(xData, yData); |
|||
} |
|||
}); |
|||
}, |
|||
// 停留时长分布 |
|||
durationRate() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/durationRate", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
let xData = res.data.data.map((item) => { |
|||
if (item.key == "3") { |
|||
item.key = item.key + '日及以上' |
|||
} else { |
|||
item.key = item.key + '日' |
|||
} |
|||
return item.key |
|||
}); |
|||
let yData = res.data.data.map((item) => |
|||
parseFloat((item.value * 100).toFixed(2)) |
|||
); |
|||
this.initChart3(xData, yData); |
|||
} |
|||
}); |
|||
}, |
|||
// 实时客流来源省份 |
|||
originProvince() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/originProvince", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
this.provinceList = res.data.data.map((item) => { |
|||
return { |
|||
...item, |
|||
value: parseFloat( |
|||
(item.value * 100).toFixed(2) |
|||
), |
|||
}; |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 实时客流来源城市 |
|||
originCity() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/originCity", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
this.cityList = res.data.data.map((item) => { |
|||
return { |
|||
...item, |
|||
value: parseFloat( |
|||
(item.value * 100).toFixed(2) |
|||
), |
|||
}; |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
// 年龄结构占比 |
|||
portraitAge() { |
|||
let params = { |
|||
code: this.currentTreeItem.code, |
|||
}; |
|||
this.$http |
|||
.post( |
|||
"tourism/situation/portraitAge", |
|||
this.common.request(params) |
|||
) |
|||
.then((res) => { |
|||
if (res.data.code == 200) { |
|||
let xData = res.data.data.map((item) => item.key); |
|||
let yData = res.data.data.map((item) => |
|||
parseFloat((item.value * 100).toFixed(2)) |
|||
); |
|||
this.initChart2(xData, yData); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
@import "../../styles/pbStyle.less"; |
|||
/deep/ .ivu-tree-arrow { |
|||
color: #ffffff; |
|||
font-size: 18px; |
|||
margin-right: 5px; |
|||
} |
|||
/deep/ .ivu-progress-inner { |
|||
border-radius: 2px; |
|||
} |
|||
/deep/ .ivu-progress-bg { |
|||
border-radius: 2px; |
|||
} |
|||
.eb-container { |
|||
width: 1920px; |
|||
height: 1080px; |
|||
transform: scale(var(--scale)) translate(-50%, -50%); |
|||
transform-origin: 0 0; |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
background-image: url("../../assets/largeScreen/page-bg.png"); |
|||
background-size: 100%; |
|||
} |
|||
::-webkit-scrollbar { |
|||
width: 0; |
|||
height: 0; |
|||
color: transparent; |
|||
} |
|||
.main-content { |
|||
position: absolute; |
|||
width: 1850px; |
|||
height: 930px; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.tree-box { |
|||
width: 250px; |
|||
height: 100%; |
|||
background-color: #3b3d43; |
|||
border-radius: 5px; |
|||
padding: 5px; |
|||
overflow: auto; |
|||
} |
|||
.right-main { |
|||
width: 1590px; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
.top-content { |
|||
width: 100%; |
|||
height: 600px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.video-box { |
|||
width: 1220px; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
.video-list { |
|||
width: 140px; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.video-item { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 5px; |
|||
margin-bottom: 10px; |
|||
background-color: #3b3d43; |
|||
border-radius: 5px; |
|||
cursor: pointer; |
|||
|
|||
.icon-status { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
.video-name { |
|||
margin-top: 10px; |
|||
font-size: 16px; |
|||
color: #aaaaaa; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.top-right-data { |
|||
width: 360px; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
.bottom-content { |
|||
width: 100%; |
|||
height: 310px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
} |
|||
} |
|||
.content-box { |
|||
width: 300px; |
|||
height: 100%; |
|||
background-color: #3b3d43; |
|||
border-radius: 5px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.box-title { |
|||
width: 100%; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
padding-left: 10px; |
|||
color: #aaaaaa; |
|||
font-size: 16px; |
|||
} |
|||
.box-data { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding: 5px 10px; |
|||
color: #169bcf; |
|||
.num { |
|||
font-size: 60px; |
|||
display: flex; |
|||
align-items: end; |
|||
} |
|||
.percent { |
|||
display: flex; |
|||
} |
|||
} |
|||
.tabs { |
|||
width: 100%; |
|||
height: 30px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 16px; |
|||
color: #aaaaaa; |
|||
} |
|||
.content-list { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
overflow-y: auto; |
|||
padding: 5px 10px; |
|||
.content-item { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 15px; |
|||
color: #aaaaaa; |
|||
font-size: 14px; |
|||
.name { |
|||
width: 25%; |
|||
} |
|||
.percent { |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue