diff --git a/config/index.js b/config/index.js
index 6627110..a1ca6b1 100644
--- a/config/index.js
+++ b/config/index.js
@@ -12,7 +12,7 @@ module.exports = {
         assetsPublicPath: '/',
         proxyTable: {
             '/api': {
-                target: 'http://localhost:9990',
+                target: 'http://192.168.111.144:9990',
                 // target: 'http://60.255.186.185:9024/api',
                 changeOrigin: true,
                 pathRewrite: {
diff --git a/src/router/router.js b/src/router/router.js
index f7d3218..11aacea 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -60,7 +60,7 @@ export const screenRouter = [
         name: "emergencyScreen",
         title: "应急广播",
         component: () =>
-            import("@/views/screen/emergency-screen.vue")
+            import("@/views/screen/emergency-screen-two.vue")
     },
     {
         path: "/mediaBigScreen",
diff --git a/src/views/screen/county-screen.vue b/src/views/screen/county-screen.vue
index b76d376..0c7179b 100644
--- a/src/views/screen/county-screen.vue
+++ b/src/views/screen/county-screen.vue
@@ -220,6 +220,22 @@
                 </div>
             </div>
         </common-modal>
+        <common-modal
+            v-model="warringState"
+            :title="currentMenu.menuItem"
+            width="600"
+        >
+            <div style="width: 100%; display: flex; flex-wrap: wrap">
+                <div
+                    class="menu-item"
+                    @click="toWarring(item)"
+                    v-for="(item, index) in currentMenu.children"
+                    :key="index"
+                >
+                    <span>{{ item.menuItem }}</span>
+                </div>
+            </div>
+        </common-modal>
     </div>
 </template>
 
@@ -249,6 +265,7 @@ export default {
         let self = this;
         return {
             title: "翠屏区智慧广电示范区",
+            warringState: false,
             areaCode: window.$localStorage.getItem("areaCode"),
             videoUrl: "/localImage/home/home.mp4",
             logUrl: "/localImage/smartserver/yj.glb",
@@ -304,10 +321,30 @@ export default {
                         {
                             menuItem: "人流预警",
                             isShowTwon: true,
+                            children: [
+                                {
+                                    menuItem: "人流1",
+                                    areaCode: "",
+                                },
+                                {
+                                    menuItem: "人流2",
+                                    areaCode: "",
+                                },
+                            ],
                         },
                         {
                             menuItem: "车流预警",
                             isShowTwon: true,
+                            children: [
+                                {
+                                    menuItem: "车流1",
+                                    areaCode: "",
+                                },
+                                {
+                                    menuItem: "车流2",
+                                    areaCode: "",
+                                },
+                            ],
                         },
                         {
                             menuItem: "视频结构化",
@@ -575,6 +612,30 @@ export default {
         this.getTownMemu();
     },
     methods: {
+        toWarring(item) {
+            switch (this.currentType) {
+                case "person":
+                    this.$router.push({
+                        path: "/person-warring",
+                        query: {
+                            areaName: item.menuItem,
+                            areaCode: item.areaCode,
+                        },
+                    });
+                    break;
+                case "car":
+                    this.$router.push({
+                        path: "/car-warring",
+                        query: {
+                            areaName: item.menuItem,
+                            areaCode: item.areaCode,
+                        },
+                    });
+                    break;
+                default:
+                    break;
+            }
+        },
         jumpSystem(item) {
             this.currentMenu = item;
             this.appState = true;
@@ -1053,26 +1114,35 @@ export default {
                 switch (item.menuItem) {
                     case "镇级":
                         this.currentType = "town";
+                        this.townModal = true;
                         break;
                     case "村级":
                         this.currentType = "village";
+                        this.townModal = true;
                         break;
                     case "乡村治理":
                         this.currentType = "governance";
+                        this.townModal = true;
                         break;
                     case "网格管理":
                         this.currentType = "grid";
+                        this.townModal = true;
                         break;
                     case "人流预警":
                         this.currentType = "person";
+                        this.appState = false;
+                        this.currentMenu = item;
+                        this.warringState = true;
                         break;
                     case "车流预警":
                         this.currentType = "car";
+                        this.appState = false;
+                        this.currentMenu = item;
+                        this.warringState = true;
                         break;
                     default:
                         break;
                 }
-                this.townModal = true;
             } else if (item.url) {
                 window.open(item.url);
             }
diff --git a/src/views/screen/emergency-screen-two.vue b/src/views/screen/emergency-screen-two.vue
new file mode 100644
index 0000000..838302c
--- /dev/null
+++ b/src/views/screen/emergency-screen-two.vue
@@ -0,0 +1,1183 @@
+<template>
+    <!-- 应急广播数据中心 -->
+    <div class="eb-container" ref="appRef">
+        <!-- 背景框 -->
+        <div class="bg">
+            <MainTitle class="title" :title="title"></MainTitle>
+        </div>
+        <gis-map
+            class="gismap"
+
+            pointType="应急广播"
+            :point-list="pointList"
+            :lngLat="lngLat"
+            list-item-key="name"
+            @currentPoint="currentPointFn"
+        >
+            <template v-slot:content>
+                <div class="left-box">
+                    <div class="left-one">
+                        <div class="title-box-samll">
+                            <span>资源状态展示</span>
+                        </div>
+                        <div class="databox">
+                            <div class="line-title-box">
+                                <div
+                                    class="line-title-box-item"
+                                    v-for="(item, index) in statusItemList"
+                                    :key="index"
+                                >
+                                    <div class="line-item-box">
+                                        <div
+                                            class="line-item-color"
+                                            :style="{
+                                                background:
+                                                    index % 2 === 0
+                                                        ? '#01FF94'
+                                                        : '#01A4FF',
+                                            }"
+                                        ></div>
+                                        <div class="line-item-white"></div>
+                                    </div>
+                                    <div class="line-item-title">
+                                        {{ item.title }}
+                                    </div>
+                                    <div class="line-item-number">
+                                        <CountTo
+                                            :startVal="0"
+                                            :endVal="Number(item.number)"
+                                            :duration="2000"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="table-box">
+                                <div class="table-title-box">
+                                    <div
+                                        class="table-title-item"
+                                        style="width: 28%; text-align: left"
+                                    >
+                                        地区
+                                    </div>
+                                    <div
+                                        class="table-title-item"
+                                        style="width: 18%"
+                                    >
+                                        前端在线
+                                    </div>
+                                    <div
+                                        class="table-title-item"
+                                        style="width: 18%"
+                                    >
+                                        前端离线
+                                    </div>
+                                    <div
+                                        class="table-title-item"
+                                        style="width: 18%"
+                                    >
+                                        终端在线
+                                    </div>
+                                    <div
+                                        class="table-title-item"
+                                        style="width: 18%"
+                                    >
+                                        终端离线
+                                    </div>
+                                </div>
+                                <div
+                                    class="table-body-box"
+                                    style="height: 280px"
+                                >
+                                    <vue-seamless-scroll
+                                        :data="statusTableData"
+                                        :class-option="optionHoverVertical"
+                                    >
+                                        <div>
+                                            <div
+                                                v-for="(
+                                                    item, index
+                                                ) in statusTableData"
+                                                :key="index"
+                                                class="table-body-item"
+                                            >
+                                                <div
+                                                    class="table-info-item"
+                                                    style="
+                                                        width: 28%;
+                                                        text-align: left;
+                                                    "
+                                                >
+                                                    {{ item.districtName }}
+                                                </div>
+                                                <div
+                                                    class="table-info-item"
+                                                    style="width: 18%"
+                                                >
+                                                    <CountTo
+                                                        :startVal="0"
+                                                        :endVal="
+                                                            Number(
+                                                                item.frontOnlineNum
+                                                            )
+                                                        "
+                                                        :duration="2000"
+                                                    />
+                                                </div>
+                                                <div
+                                                    class="table-info-item"
+                                                    style="width: 18%"
+                                                >
+                                                    <CountTo
+                                                        :startVal="0"
+                                                        :endVal="
+                                                            Number(
+                                                                item.frontOfflineNum
+                                                            )
+                                                        "
+                                                        :duration="2000"
+                                                    />
+                                                </div>
+                                                <div
+                                                    class="table-info-item"
+                                                    style="width: 18%"
+                                                >
+                                                    <CountTo
+                                                        :startVal="0"
+                                                        :endVal="
+                                                            Number(
+                                                                item.terminalOnlineNum
+                                                            )
+                                                        "
+                                                        :duration="2000"
+                                                    />
+                                                </div>
+                                                <div
+                                                    class="table-info-item"
+                                                    style="width: 18%"
+                                                >
+                                                    <CountTo
+                                                        :startVal="0"
+                                                        :endVal="
+                                                            Number(
+                                                                item.terminalOfflineNum
+                                                            )
+                                                        "
+                                                        :duration="2000"
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </vue-seamless-scroll>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="left-two">
+                        <div class="title-box-samll">
+                            <span>设备终端</span>
+                        </div>
+                        <div class="databox">
+                            <div class="table-body-box" style="height: 100%">
+                                <vue-seamless-scroll
+                                    :class-option="optionHoverVertical"
+                                    :data="deviceList"
+                                >
+                                    <div
+                                        class="data-item-box"
+                                        v-for="(item, index) in deviceList"
+                                        :key="index"
+                                    >
+                                        <div style="display: flex">
+                                            <div class="data-name">
+                                                {{ item.name }}
+                                            </div>
+                                        </div>
+                                        <div class="data-status">
+                                            <div
+                                                class="point"
+                                                :style="{
+                                                    backgroundColor:
+                                                        item.status == '0'
+                                                            ? 'red'
+                                                            : 'green',
+                                                }"
+                                            ></div>
+                                            <div class="status">
+                                                {{
+                                                    item.status == "0"
+                                                        ? "离线"
+                                                        : "在线"
+                                                }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </vue-seamless-scroll>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="right">
+                    <div class="right-one">
+                        <div class="title-box-samll">
+                            <span>近六月事件类型统计</span>
+                        </div>
+                        <div class="databox" id="lineChart"></div>
+                    </div>
+                    <div class="right-two">
+                        <div class="title-box-samll">
+                            <span>近六月事件级别统计</span>
+                        </div>
+                        <div class="databox" id="barChart"></div>
+                    </div>
+                    <div class="right-three">
+                        <div class="title-box-samll">
+                            <span>最新应急信息</span>
+                        </div>
+                        <div class="databox">
+                            <div class="table-title-box">
+                                <div
+                                    class="table-title-item"
+                                    style="width: 20%; text-align: left"
+                                >
+                                    事件类别
+                                </div>
+                                <div
+                                    class="table-title-item"
+                                    style="width: 30%"
+                                >
+                                    事件标题
+                                </div>
+                                <div
+                                    class="table-title-item"
+                                    style="width: 30%"
+                                >
+                                    发布单位
+                                </div>
+                                <div
+                                    class="table-title-item"
+                                    style="width: 20%; text-align: right"
+                                >
+                                    调度状态
+                                </div>
+                            </div>
+                            <div class="table-body-box" style="height: 394px">
+                                <vue-seamless-scroll
+                                    :data="infoTableData"
+                                    :class-option="optionHoverVertical"
+                                >
+                                    <div>
+                                        <div
+                                            v-for="(
+                                                item, index
+                                            ) in infoTableData"
+                                            :key="index"
+                                            class="table-body-item"
+                                        >
+                                            <div
+                                                class="table-info-item"
+                                                style="
+                                                    width: 20%;
+                                                    text-align: left;
+                                                "
+                                            >
+                                                {{ item.eventTypeName }}
+                                            </div>
+                                            <div
+                                                class="table-info-item"
+                                                style="width: 30%"
+                                            >
+                                                {{ item.msgTitle }}
+                                            </div>
+                                            <div
+                                                class="table-info-item"
+                                                style="width: 30%"
+                                            >
+                                                {{ item.senderName }}
+                                            </div>
+                                            <div
+                                                class="table-info-item"
+                                                style="
+                                                    width: 20%;
+                                                    text-align: right;
+                                                "
+                                                :style="{
+                                                    color:
+                                                        item.status == 1
+                                                            ? 'green'
+                                                            : 'red',
+                                                }"
+                                            >
+                                                {{
+                                                    item.status == 1
+                                                        ? "已调度"
+                                                        : "未调度"
+                                                }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </vue-seamless-scroll>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="page-bottom-bg"></div>
+<div class="page-left-bg"></div>
+<div class="page-right-bg"></div>
+            </template>
+        </gis-map>
+        <CommonModal v-model="pointState" title="设备详情" width="500">
+            <div
+                style="
+                    width: 100%;
+                    display: flex;
+                    flex-direction: column;
+                    padding: 10px;
+                "
+            >
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px"
+                        >名称：{{ currentPoint.name }}</span
+                    >
+                </div>
+
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px"
+                        >资源编码：{{ currentPoint.resourceCode }}</span
+                    >
+                </div>
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px"
+                        >安装位置：{{ currentPoint.location }}</span
+                    >
+                </div>
+
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px"
+                        >安装时间：{{ currentPoint.installTime }}</span
+                    >
+                </div>
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px"
+                        >经度：{{ currentPoint.longitude }}</span
+                    >
+                </div>
+
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px"
+                        >纬度：{{ currentPoint.latitude }}</span
+                    >
+                </div>
+                <div
+                    style="
+                        display: flex;
+                        align-items: center;
+                        margin-bottom: 20px;
+                    "
+                >
+                    <span style="font-size: 20px">在线状态：</span>
+                    <Tag :color="currentPoint.status == '1' ? 'green' : 'red'">{{ currentPoint.status == "1" ? "在线" : "离线" }}</Tag>
+                </div>
+            </div>
+        </CommonModal>
+    </div>
+</template>
+
+<script>
+import { useIndex } from "../../utils/utilsDramAdmin";
+import MainTitle from "./components/MainTitle.vue";
+import gisMap from "./components/gisMapOfCounty.vue";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import CountTo from "vue-count-to";
+import * as echarts from "echarts";
+import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
+import CommonModal from "@/views/common-components/common-modal.vue";
+
+const EVENT_TYPE_MAP = {
+    水旱: "floodDroughtValue",
+    气象: "weatherValue",
+    地震: "earthquakeValue",
+    地质: "geologyValue",
+    卫生: "hygieneValue",
+    其他: "otherValue",
+};
+
+const WARNING_LEVELS = [
+    "红色预警",
+    "橙色预警",
+    "黄色预警",
+    "蓝色预警",
+    "未知预警",
+];
+
+export default {
+    name: "EmergencyScreen",
+    components: { MainTitle, gisMap, vueSeamlessScroll, CountTo, CommonModal },
+    data() {
+        return {
+            title: "应急广播数据中心",
+            pointList: [],
+            pointState: false,
+            currentPoint: {},
+            lngLat: [],
+            lineChartData: {},
+            statusItemList: [
+                { title: "前端在线(个)", number: 0 },
+                { title: "前端离线(个)", number: 0 },
+                { title: "终端在线(个)", number: 0 },
+                { title: "终端离线(个)", number: 0 },
+            ],
+            statusTableData: [],
+            deviceList: [],
+            infoTableData: [],
+            optionHoverVertical: {
+                step: 0.3,
+                limitMoveNum: 2,
+                hoverStop: false,
+                direction: 1,
+                openWatch: true,
+                singleHeight: 0,
+                singleWidth: 0,
+                waitTime: 1000,
+            },
+            barChart: null,
+            lineChart: null,
+        };
+    },
+    mounted() {
+        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
+        calcRate();
+        windowDraw();
+        this.getInitTotalNum();
+        this.findStatus();
+        this.findSixMonthTypeLine();
+        this.findSixMonthLevelBar();
+        this.findTopFiveInfos();
+    },
+    beforeDestroy() {
+        echartsClear();
+        this.lineChart.distroy();
+        this.barChart.distroy();
+    },
+    methods: {
+        assembleData(data) {
+            let list = [];
+            if (data && data.length > 0) {
+                data.forEach((item) => {
+                    if (item.children && item.children.length > 0) {
+                        this.assembleData(item.children);
+                    } else {
+                        let dataItem = { ...item };
+                        dataItem.lnglat = [item.longitude, item.latitude];
+                        list.push(dataItem);
+                    }
+                });
+            }
+            return list;
+        },
+        // 查询终端
+        getInitTotalNum() {
+            this.$http
+                .post(
+                    "/broadcast/queryBroadcastDeviceStatus",
+                    this.common.request({})
+                )
+                .then((res) => {
+                    if (res.data.code == 200) {
+                        this.deviceList = res.data.data;
+                        this.pointList = this.assembleData(res.data.data);
+                    }
+                });
+        },
+        // 资源状态
+        findStatus() {
+            this.$http
+                .post(
+                    "/broadcast/queryBroadcastResourceStatus",
+                    this.common.request({})
+                )
+                .then((res) => {
+                    if (res.data.code === 200) {
+                        this.statusTableData = res.data.data;
+                        this.updateStatusItemList(res.data.data);
+                    }
+                });
+        },
+        updateStatusItemList(data) {
+            const [
+                frontOnlineNum,
+                frontOfflineNum,
+                terminalOnlineNum,
+                terminalOfflineNum,
+            ] = data.reduce(
+                (pre, cur) => {
+                    pre[0] += Number(cur.frontOnlineNum);
+                    pre[1] += Number(cur.frontOfflineNum);
+                    pre[2] += Number(cur.terminalOnlineNum);
+                    pre[3] += Number(cur.terminalOfflineNum);
+                    return pre;
+                },
+                [0, 0, 0, 0]
+            );
+            this.statusItemList[0].number = frontOnlineNum;
+            this.statusItemList[1].number = frontOfflineNum;
+            this.statusItemList[2].number = terminalOnlineNum;
+            this.statusItemList[3].number = terminalOfflineNum;
+        },
+        // 近六月事件类型统计
+        findSixMonthTypeLine() {
+            this.$http
+                .post(
+                    "/broadcast/queryBroadcastEventType",
+                    this.common.request({})
+                )
+                .then((res) => {
+                    if (res.data.code === 200) {
+                        const lineChartData = this.processLineChartData(
+                            res.data.data
+                        );
+                        this.initLineChart(lineChartData);
+                    }
+                });
+        },
+        processLineChartData(data) {
+            return data.reduce(
+                (pre, cur) => {
+                    pre.axis.push(cur.month);
+                    pre.series = Object.keys(EVENT_TYPE_MAP).reduce(
+                        (series, type) => {
+                            series.push({
+                                name: type,
+                                value: data.map(
+                                    (item) => item[EVENT_TYPE_MAP[type]]
+                                ),
+                            });
+                            return series;
+                        },
+                        []
+                    );
+                    return pre;
+                },
+                { axis: [], series: [] }
+            );
+        },
+        // 近六月事件级别统计
+        findSixMonthLevelBar() {
+            this.$http
+                .post(
+                    "/broadcast/queryBroadcastEventLevel",
+                    this.common.request({})
+                )
+                .then((res) => {
+                    if (res.data.code === 200) {
+                        this.initBarChart(res.data.data);
+                    }
+                });
+        },
+        // 最新应急消息
+        findTopFiveInfos() {
+            this.$http
+                .post(
+                    "/broadcast/queryBroadcastAlarmMessage",
+                    this.common.request({})
+                )
+                .then((res) => {
+                    if (res.data.code === 200) {
+                        this.infoTableData = res.data.data;
+                    }
+                });
+        },
+        initLineChart(lineChartData) {
+            this.lineChart = echarts.init(document.getElementById("lineChart"));
+            const option = this.getLineChartOption(lineChartData);
+            this.lineChart.setOption(option);
+            echartsFocus(this.lineChart, lineChartData.axis.length);
+        },
+        getLineChartOption(lineChartData) {
+            const { axis, series } = lineChartData;
+            const legendData = series.map((item) => item.name);
+            const seriesData = series.map((item) => ({
+                name: item.name,
+                type: "line",
+                symbol: "circle",
+                showAllSymbol: true,
+                symbolSize: 0,
+                smooth: true,
+                lineStyle: { normal: { width: 2 } },
+                tooltip: { show: true },
+                areaStyle: {
+                    normal: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [
+                                { offset: 0, color: "rgba(233, 233, 233, .4)" },
+                                { offset: 1, color: "rgba(233, 233, 233, 0)" },
+                            ],
+                            false
+                        ),
+                    },
+                },
+                data: item.value,
+            }));
+            return {
+                tooltip: { trigger: "axis", axisPointer: { type: "line" } },
+                legend: {
+                    orient: "horizontal",
+                    top: "0%",
+                    icon: "circle",
+                    textStyle: { fontWeight: "normal", color: "#FFF" },
+                    data: legendData,
+                },
+                grid: { top: "18%", left: "8%", right: "7%", bottom: "12%" },
+                xAxis: [
+                    {
+                        type: "category",
+                        boundaryGap: false,
+                        axisLine: {
+                            show: true,
+                            lineStyle: { color: "rgba(172, 215, 255, 0.24)" },
+                        },
+                        axisLabel: {
+                            textStyle: { color: "#99A8BD", fontSize: 12 },
+                        },
+                        splitLine: { show: false },
+                        axisTick: { show: false },
+                        data: axis,
+                    },
+                ],
+                yAxis: [
+                    {
+                        min: 0,
+                        splitLine: {
+                            show: true,
+                            lineStyle: {
+                                type: "dashed",
+                                color: "rgba(172, 215, 255, 0.24)",
+                            },
+                        },
+                        axisLine: { show: false },
+                        axisLabel: {
+                            show: true,
+                            textStyle: { color: "#99A8BD", fontSize: 12 },
+                        },
+                        axisTick: { show: false },
+                    },
+                ],
+                series: seriesData,
+            };
+        },
+        initBarChart(emergency) {
+            this.barChart = echarts.init(document.getElementById("barChart"));
+            const option = this.getBarChartOption(emergency);
+            this.barChart.setOption(option);
+            echartsFocus(this.barChart, emergency.length);
+        },
+        getBarChartOption(emergency) {
+            const zzx1 = emergency.map((item) => item.month);
+            const red = emergency.map((item) => item.redNum);
+            const orange = emergency.map((item) => item.orangeNum);
+            const yellow = emergency.map((item) => item.yellowNum);
+            const blue = emergency.map((item) => item.blueNum);
+            const unknownData = emergency.map((item) => item.unKnownNum);
+            const seriesData = WARNING_LEVELS.map((level, index) => ({
+                name: level,
+                type: "bar",
+                barWidth: "8",
+                itemStyle: {
+                    normal: {
+                        opacity: 0.7,
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: this.getColorByLevel(index) },
+                            {
+                                offset: 1,
+                                color: this.getColorByLevel(index, true),
+                            },
+                        ]),
+                    },
+                },
+                label: {
+                    show: false,
+                    position: ["18", "-18"],
+                    color: "#00f8ff",
+                    fontSize: 12,
+                },
+                data: this.getDataByLevel(
+                    index,
+                    red,
+                    orange,
+                    yellow,
+                    blue,
+                    unknownData
+                ),
+            }));
+            return {
+                tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
+                grid: {
+                    left: "2%",
+                    right: "4%",
+                    bottom: "4%",
+                    top: "16%",
+                    containLabel: true,
+                },
+                legend: {
+                    data: WARNING_LEVELS,
+                    top: 0,
+                    textStyle: { color: "#99A8BD", fontSize: 12 },
+                    itemWidth: 14,
+                    itemHeight: 10,
+                },
+                xAxis: {
+                    type: "category",
+                    data: zzx1,
+                    axisLine: { show: true, lineStyle: { color: "#233653" } },
+                    axisLabel: {
+                        textStyle: {
+                            fontFamily: "Microsoft YaHei",
+                            color: "#99A8BD",
+                            fontWeight: "normal",
+                            fontSize: 12,
+                        },
+                    },
+                },
+                yAxis: {
+                    type: "value",
+                    minInterval: 15,
+                    axisLine: { show: false },
+                    splitLine: {
+                        show: true,
+                        lineStyle: { color: "#192a44", type: "dashed" },
+                    },
+                    axisLabel: {
+                        formatter: "{value}",
+                        color: "#99A8BD",
+                        fontSize: 12,
+                    },
+                },
+                series: seriesData,
+            };
+        },
+        getColorByLevel(index, isEnd = false) {
+            const colors = [
+                ["rgba(245,69,69, 1)", "rgba(245,69,69, 0.2)"],
+                ["rgba(255,148,56, 1)", "rgba(255,148,56, 0.2)"],
+                ["rgba(245,211,47, 1)", "rgba(245,211,47, 0.2)"],
+                ["rgba(115,221,255, 1)", "rgba(115,221,255, 0.2)"],
+                ["rgba(161,161,161, 1)", "rgba(161,161,161, 0.2)"],
+            ];
+            return isEnd ? colors[index][1] : colors[index][0];
+        },
+        getDataByLevel(index, red, orange, yellow, blue, unknownData) {
+            const data = [red, orange, yellow, blue, unknownData];
+            return data[index];
+        },
+        currentPointFn(data) {
+            this.currentPoint = data;
+            this.pointState = true;
+        },
+    },
+};
+</script>
+
+<style lang="less" scoped>
+@import "../../styles/pbStyle.less";
+
+/deep/.ivu-tree {
+    width: 340px;
+    height: 848px;
+}
+
+/deep/.ivu-tree-arrow {
+    color: #d6e2f2;
+}
+
+/deep/.ivu-tree-title {
+    font-family: "PingFang SC";
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #ffffff;
+}
+
+.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%;
+
+    .gismap {
+        .left-box {
+            position: fixed;
+            top: 100px;
+            left: 50px;
+            width: 458px;
+            height: 920px;
+            display: flex;
+            flex-direction: column;
+
+            .left-one {
+                width: 100%;
+                height: 50%;
+                display: flex;
+                flex-direction: column;
+
+                .databox {
+                    .content-pub-style(100%, calc(100% - 44px));
+                    color: #ffffff;
+                    display: flex;
+                    flex-direction: column;
+
+                    .line-title-box {
+                        width: 100%;
+                        height: 80px;
+                        display: flex;
+                        flex-direction: row;
+
+                        .line-title-box-item {
+                            width: 25%;
+                            height: 100%;
+                            padding: 10px;
+                            font-family: shiShangHeiTi;
+
+                            .line-item-box {
+                                width: 100%;
+                                height: 5px;
+                                display: flex;
+                                flex-direction: row;
+
+                                .line-item-color {
+                                    width: 30%;
+                                    height: 100%;
+                                    border-radius: 5px;
+                                }
+
+                                .line-item-white {
+                                    width: 60%;
+                                    height: 100%;
+                                    border-radius: 5px;
+                                    background-color: rgba(1, 206, 255, 0.16);
+                                    margin-left: 5px;
+                                }
+                            }
+
+                            .line-item-title {
+                                width: 100%;
+                                margin-top: 5px;
+                                font-size: 14px;
+                                line-height: 22px;
+                            }
+
+                            .line-item-number {
+                                width: 100%;
+                                font-size: 32px;
+                                line-height: 40px;
+                                text-shadow: 0px 3px 4px #ffffff;
+                            }
+                        }
+                    }
+
+                    .table-box {
+                        width: 100%;
+                        padding: 10px 10px 10px 15px;
+                        font-family: shiShangHeiTi;
+                    }
+                }
+            }
+
+            .left-two {
+                width: 100%;
+                height: 50%;
+                display: flex;
+                flex-direction: column;
+
+                .databox {
+                    .content-pub-style(100%, calc(100% - 44px));
+                    color: #ffffff;
+                    font-family: shiShangHeiTi;
+                    padding: 15px;
+                }
+            }
+        }
+
+        .table-title-box {
+            width: 100%;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+
+            .table-title-item {
+                text-align: center;
+                font-size: 12px;
+                line-height: 28px;
+                color: #c2c4c7;
+                letter-spacing: 2px;
+            }
+        }
+
+        .table-body-box {
+            width: 100%;
+            overflow: hidden;
+
+            .data-item-box {
+                width: 100%;
+                height: 40px;
+                display: flex;
+                justify-content: space-between;
+                flex-direction: row;
+            }
+
+            .data-name {
+                /*margin-left: 16px;*/
+                font-size: 14px;
+                line-height: 40px;
+            }
+
+            .data-status {
+                display: flex;
+
+                .point {
+                    width: 6px;
+                    height: 6px;
+                    margin-top: 17px;
+                    border-radius: 3px;
+                    background-color: red;
+                }
+
+                .status {
+                    margin-left: 10px;
+                    font-size: 14px;
+                    line-height: 40px;
+                }
+            }
+
+            .table-body-item {
+                width: 100%;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+                .table-info-item {
+                    text-align: center;
+                    font-size: 14px;
+                    line-height: 36px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+        }
+
+        .right {
+            width: 458px;
+            // height: 922px;
+            position: fixed;
+            top: 100px;
+            right: 50px;
+            z-index: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .right-one {
+                width: 100%;
+                height: 300px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .databox {
+                    .content-pub-style(100%, calc(100% - 44px));
+                    display: flex;
+                    padding-top: 20px;
+                    flex-direction: column;
+                    align-items: center;
+                }
+            }
+
+            .right-two {
+                width: 100%;
+                height: 300px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .databox {
+                    .content-pub-style(100%, calc(100% - 44px));
+                    display: flex;
+                    padding-top: 20px;
+                    flex-direction: column;
+                    align-items: center;
+                }
+            }
+
+            .right-three {
+                width: 100%;
+                height: 320px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .databox {
+                    .content-pub-style(100%, calc(100% - 44px));
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    font-family: shiShangHeiTi;
+                    color: #ffffff;
+                    padding: 10px 15px;
+                }
+            }
+
+            // .right-three {
+            //     margin-top: 10px;
+            //     width: 100%;
+            //     height: 300px;
+            //     display: flex;
+            //     flex-direction: column;
+            //     justify-content: space-between;
+            //     align-items: center;
+
+            //     .min-title {
+            //         width: 100%;
+            //         height: 46px;
+            //         background: url("../../assets/screenView/minTitle.png") no-repeat;
+            //         background-size: 100% 100%;
+            //         display: flex;
+            //         align-items: center;
+
+            //         span {
+            //             font-family: "YouSheBiaoTiHei";
+            //             font-size: 22px;
+            //             font-weight: 400;
+            //             line-height: 29px;
+            //             letter-spacing: 0em;
+            //             text-align: left;
+            //             background: linear-gradient(to top, #5982B5, #ECF4FE);
+            //             -webkit-background-clip: text;
+            //             color: transparent;
+            //             margin-left: 44px;
+
+            //         }
+            //     }
+
+            //     .databox {
+            //         flex: 1;
+            //         width: 100%;
+            //         margin-top: 10px;
+            //         border: 1px solid #556b7c;
+            //         background-color: rgba(29, 37, 47, 0.5);
+            //         display: flex;
+            //         padding-top: 20px;
+            //         flex-direction: column;
+            //         align-items: center;
+
+            //         .titleBox {
+            //             width: 100%;
+            //             height: 40px;
+            //             display: grid;
+
+            //             background-color: #072e5b;
+            //             grid-template-columns: repeat(4, 25%);
+            //             grid-template-rows: 100%;
+
+            //             span {
+            //                 display: flex;
+            //                 justify-content: center;
+            //                 align-items: center;
+            //                 font-size: 16px;
+            //                 color: #ffffff;
+            //             }
+            //         }
+
+            //         .scrollBox {
+            //             width: 100%;
+            //             flex: 1;
+            //             overflow: hidden;
+            //             .contentList {
+            //                 width: 100%;
+            //                 display: flex;
+            //                 flex-direction: column;
+            //                 .content-item {
+            //                     width: 100%;
+            //                     height: 30px;
+            //                     display: grid;
+            //                     grid-template-columns: repeat(4, 25%);
+            //                     grid-template-rows: 100%;
+            //                     padding: 0 3px;
+
+            //                     span {
+            //                         text-align: center;
+            //                         line-height: 30px;
+            //                         color: #ffffff;
+            //                         font-size: 14px;
+            //                         display: inline-block;
+            //                         white-space: nowrap;
+            //                         overflow: hidden;
+            //                         text-overflow: ellipsis;
+            //                     }
+            //                 }
+            //             }
+            //         }
+            //     }
+            // }
+        }
+    }
+
+    .bg {
+        width: 1920px;
+        height: 1080px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        pointer-events: none;
+
+        .title {
+            pointer-events: all;
+        }
+    }
+}
+</style>
diff --git a/src/views/screen/village-screen.vue b/src/views/screen/village-screen.vue
index 8dc3b41..7afc397 100644
--- a/src/views/screen/village-screen.vue
+++ b/src/views/screen/village-screen.vue
@@ -282,6 +282,8 @@
         </div>
 
         <div class="page-bottom-bg"></div>
+        <div class="page-left-bg"></div>
+        <div class="page-right-bg"></div>
         <commonModal
             v-model="detailModal"
             :title="detailInfo.title"