From bbcc933f6763569e275ed288c98b40d4883a1d1c Mon Sep 17 00:00:00 2001
From: changtong <2540919286@qq.com>
Date: Sat, 21 Dec 2024 14:41:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=99=BA=E6=85=A7=E6=97=85=E6=B8=B8=E6=80=81?=
 =?UTF-8?q?=E5=8A=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                           |   4 +-
 src/assets/largeScreen/bfz.png            | Bin 0 -> 979 bytes
 src/assets/largeScreen/sxt.png            | Bin 0 -> 708 bytes
 src/router/router.js                      |   9 +
 src/views/screen/car-warring.vue          |   6 +-
 src/views/screen/components/MainTitle.vue |   7 +
 src/views/screen/county-screen.vue        |   4 +
 src/views/screen/gov-service.vue          |   2 -
 src/views/screen/outsideHome copy.vue     | 233 ------
 src/views/screen/outsideHome.vue          |   2 +-
 src/views/screen/smart-travel.vue         | 928 ++++++++++++++++++++++
 11 files changed, 952 insertions(+), 243 deletions(-)
 create mode 100644 src/assets/largeScreen/bfz.png
 create mode 100644 src/assets/largeScreen/sxt.png
 delete mode 100644 src/views/screen/outsideHome copy.vue
 create mode 100644 src/views/screen/smart-travel.vue

diff --git a/config/index.js b/config/index.js
index cbd6d44..51985cb 100644
--- a/config/index.js
+++ b/config/index.js
@@ -12,8 +12,8 @@ module.exports = {
         assetsPublicPath: '/',
         proxyTable: {
             '/api': {
-                // target: 'http://127.0.0.1:9990',
-                target: 'http://60.255.186.185:9024/api',
+                target: 'http://localhost:9990',
+                // target: 'http://60.255.186.185:9024/api',
                 changeOrigin: true,
                 pathRewrite: {
                     '^/api': ''
diff --git a/src/assets/largeScreen/bfz.png b/src/assets/largeScreen/bfz.png
new file mode 100644
index 0000000000000000000000000000000000000000..9f2718225911102860f38a04f59ec885cbc274f8
GIT binary patch
literal 979
zcmV;^11$WBP)<h;3K|Lk000e1NJLTq001li000sQ1^@s6AoM)k00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH187M^K~#7F%~nlF
z8$lEv+vt*puCf?vG@{^7F<K$0F<Pl7q2Mpr9x8$g-f~Its;AhChl*gJ_M{*bDS{$7
zcq%y*wTXx{rYUwsAu1SSa3hgD1pB_2l{A>3JxD(IGP7@HXTEvwW#?tF+fha|5zC1J
zdsrOC`IG2L9?VL5hPZd^T4*NVjA)OyF+5HfEFxNo&sgR_&8{QuBZgs61jDn|_=HSD
zHql7jB3?d<8!ap|#VUX{q-xB=HN=<fo){Py&~I;VOZD~jd|_cBXEYjlvXx4bBp)3e
z$?fg!+DIf44Tr-~^mB7_Rj?<olWr^t$O2JCKQGvSpslS<KQ}k$w_2@+^Ye4LxVV^y
zShw3P;V>qXNjow!qNO=r^hp%AzrQc7t*r$d4o3h7#X6Ohm3&iE6GvS?p7DN~Z5!a>
z*F^r-VOx!XIbOYC?<;HBQ<coVodjSeA!QvM9nW<-9cyfC)aT{pae^RdN=r+Hi;D~C
z^z>Bj>FFt(ot^b6{l&#av9GVsu&}ToA|ewL6K0J@!^~#0POVm}3JMCi;o)I}$Kwg4
z@wOU*-?CKr+T6+bYz=#&;#h;AXCHpKVJ0ty$SXVv63J^JtyaqggTV;d{gacE;_mKl
z#A2}+s;a7l+S*!yTHWB_;P=+nR$+R2IwlxmM@L7!IXOAey}dmN@0FLAb3UI>N+(#w
z(g8vhM4~r~Amnv*b^4*9AsHUt*x2wR<RngOv)K$|V`JXq<6{Y4t*EHr(T<Og8+e|-
zS+BXdSx+`rQc}X>UCe7~Y0)n&E&0<)!dK!f<><%XP8O6Uc1dDCiR+4aXJ<#++}!k&
z7q_miu2?7(lF<Uo%geD1k<Vx`hFtIM?KRBI%y?m=!^o7!BE%gW97s;5(~thj%8H0F
zmKuk+>F~KQv3p{Ee%{>Q-@op1xjI)@S4DUV_Nl2UZ*_GwpP!%4A%9`RpALUY9ICs!
z+nKlyqJ<WRy2G|V;9(cLC$NbUUW6VkJcZE0LkKT&k-S=lKE}Jcx}20QTXwtMn7Ed5
zs5`==)DpNjGNpb<1*EP`x#_+TFInaS+E4`D)DkeDz(BaNS!O{IdxD3=Y7Ny83JlzQ
znNnB$A%13Yu|QUei4ct%qbSaY1acKZUGerG`~}q#bQ`6oig*A3002ovPDHLkV1nA*
B!FvDz

literal 0
HcmV?d00001

diff --git a/src/assets/largeScreen/sxt.png b/src/assets/largeScreen/sxt.png
new file mode 100644
index 0000000000000000000000000000000000000000..d45d34930e558fa5469268a1584524ddc7398be7
GIT binary patch
literal 708
zcmV;#0z3VQP)<h;3K|Lk000e1NJLTq000~S000{Z1^@s6ZwT)!00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0$E8!K~#7Fy;e(d
z+CUI}Gm^4aPGB9uR1v4Lin)PrU~Ujdz?B_%m$FGkJ^}Ixk{f_mPGPFZ4J_Y4*+!p9
zH%K7K$Ve#URZ%db>3RL$^t2Etftl(bE2y&wf%8t-E^0vRTCh+ZD}b?}pC)}g1+-4Y
z^)KuRiI>UD5XK}XW0;iTgcaiugaKZSNs*PCu0>i%_@H_N(76>n-kWsm8P3$lwtzOq
zZd5+g0)-k%VySelKAn{f$PjWxvQ3n+Lw0si4yJ<qK35m#Wfo@$1L))AY~F~GO^#op
zB<P+xWk}a&c&|QNI>N_zxIUW)bupyv1}F&u(Qb;X+v4XbP==3`sdY%wjHMc6ix#`_
z(A?O2HT+lhKD!nRvNl9CIh4|Zd)Pl_b=b5tFM!|R#$A_m>pf&Otcr=^DO01KdQaD;
zuDyk=&4BL`X?K$;tU9EtR!LDmRj;E#3}|yNgx^ZucQe&<h=i(EJkj@f6AU+5SJhrx
z+mb}aa=9Wc3BA1{<6g@1Vkn@F(p{&H(g-*eB-N#$qj+u_LEUi@>DQ7D|24g;I%zdk
zm6B7mUbgaQcq&)+TB(h18p8JSYVt~Hd{e;Xah!oaROMe>xjQS(PR1{hHpO*^isLpL
zkGlX`gX1{qWlYXep8TB(X;TxQ<`bE#zD=8bNNv2fmy3;x|Gh-mZHliy^0660I={=e
zVl+evtg2X?ZzJXZLW!b0B=*FK7`1a2K9Rl4&QwIk&`|>hf{qVkDiKjpJ-4rjkc;9Q
qeY^;|g9?b1IH(G4*6cg}1O5V#z*1V!B)jAQ0000<MNUMnLSTZAEIB0r

literal 0
HcmV?d00001

diff --git a/src/router/router.js b/src/router/router.js
index b9fcce2..4da058e 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -264,6 +264,15 @@ export const screenRouter = [
             open: true
         },
         component: () => import("@/views/screen/out-industry.vue")
+    },
+    {
+        path: "/smart-travel",
+        name: "smart-travel",
+        title: "智慧旅游态势",
+        meta: {
+            open: true
+        },
+        component: () => import("@/views/screen/smart-travel.vue")
     }
 ];
 
diff --git a/src/views/screen/car-warring.vue b/src/views/screen/car-warring.vue
index 8fdfcc8..5698f42 100644
--- a/src/views/screen/car-warring.vue
+++ b/src/views/screen/car-warring.vue
@@ -302,12 +302,8 @@ export default {
             // 车流统计
             this.sockets.subscribe("TRAFFIC_DATA", (data) => {
                 console.log("车流统计", data);
-                let trafficData = data.data
-                if (trafficData.length > 0) {
-                    if (trafficData[0].deviceIp == this.treeItem.deviceIp) {
+                this.countCarDataByTime([this.treeItem])
 
-                    }
-                }
             });
         },
         // 打开查看预警记录
diff --git a/src/views/screen/components/MainTitle.vue b/src/views/screen/components/MainTitle.vue
index ecd2ee1..0d10387 100644
--- a/src/views/screen/components/MainTitle.vue
+++ b/src/views/screen/components/MainTitle.vue
@@ -332,6 +332,10 @@ export default {
                             meumItem: "全域旅游",
                             routerPath: "/global-travel",
                         },
+                        {
+                            meumItem: "智慧旅游态势",
+                            routerPath: "/smart-travel",
+                        },
                     ],
                 },
                 {
@@ -418,6 +422,9 @@ export default {
             case "/global-travel":
                 this.currentName = "全域旅游";
                 break;
+            case "/smart-travel":
+                this.currentName = "智慧旅游态势";
+                break;
             case "/publicService":
                 this.currentName = "广电公服";
                 break;
diff --git a/src/views/screen/county-screen.vue b/src/views/screen/county-screen.vue
index f6f8048..4b90367 100644
--- a/src/views/screen/county-screen.vue
+++ b/src/views/screen/county-screen.vue
@@ -399,6 +399,10 @@ export default {
                             menuItem: "全域旅游",
                             routerPath: "/global-travel",
                         },
+                        {
+                            menuItem: "智慧旅游态势",
+                            routerPath: "/smart-travel",
+                        },
                     ],
                 },
                 {
diff --git a/src/views/screen/gov-service.vue b/src/views/screen/gov-service.vue
index e108358..d8f7032 100644
--- a/src/views/screen/gov-service.vue
+++ b/src/views/screen/gov-service.vue
@@ -378,8 +378,6 @@ import vueSeamlessScroll from "vue-seamless-scroll";
 import commonModal from "@/views/common-components/common-modal.vue";
 import pjList from "./components/gov-service/pjList.vue";
 import result from "./components/gov-service/result.vue";
-import { CountTo } from "vue-count-to";
-import { duration } from "moment";
 
 export default {
     name: "govService",
diff --git a/src/views/screen/outsideHome copy.vue b/src/views/screen/outsideHome copy.vue
deleted file mode 100644
index 8a92464..0000000
--- a/src/views/screen/outsideHome copy.vue	
+++ /dev/null
@@ -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>
diff --git a/src/views/screen/outsideHome.vue b/src/views/screen/outsideHome.vue
index 8a92464..f79bfd0 100644
--- a/src/views/screen/outsideHome.vue
+++ b/src/views/screen/outsideHome.vue
@@ -80,7 +80,7 @@ export default {
                 .post("/area/info/getById", this.common.request(params))
                 .then(res => {
                     if (res.data.code == 200) {
-                        this.videoUrl = res.data.data.map4;
+                        this.videoUrl = res.data.data.videoUrl;
                     } else {
                         this.$Message.error("操作失败");
                     }
diff --git a/src/views/screen/smart-travel.vue b/src/views/screen/smart-travel.vue
new file mode 100644
index 0000000..22ffd4d
--- /dev/null
+++ b/src/views/screen/smart-travel.vue
@@ -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>