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 0000000..9f27182
Binary files /dev/null and b/src/assets/largeScreen/bfz.png differ
diff --git a/src/assets/largeScreen/sxt.png b/src/assets/largeScreen/sxt.png
new file mode 100644
index 0000000..d45d349
Binary files /dev/null and b/src/assets/largeScreen/sxt.png differ
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>