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