<template>
    <!-- 县级大屏 -->
    <div class="eb-container" ref="appRef">
        <MainTitle class="title" :title="title" :show-menu="false"></MainTitle>
        <div class="left">
            <div class="min-title">
                <span>基本概况</span>
            </div>
            <div class="left-top">
                <div class="top-top-one">
                    <div
                        class="top-one1"
                        v-for="(item, index) in baseInfoList"
                        :key="index"
                    >
                        <countTo
                            class="number"
                            :startVal="0"
                            :endVal="parseFloat(item.value)"
                            :decimals="2"
                            :duration="3000"
                        >
                        </countTo>
                        <img
                            class="img"
                            :src="
                                require(`../../assets/welcome/Frame-${
                                    index + 1
                                }.png`)
                            "
                            alt="图片加载失败"
                        />
                        <p class="title">{{ item.label }}</p>
                    </div>
                </div>
                <div class="top-icon-title">
                    <img
                        src="../../assets/welcome/sczzqs.png"
                        alt="图片加载失败"
                    />
                    <span>生产总值趋势</span>
                </div>
                <!-- 图表 -->
                <div class="top-chart" id="chartZone"></div>
            </div>
            <!-- 标题(广播电视) -->
            <div class="min-title">
                <span>广播电视</span>
            </div>
            <div class="left-bottom">
                <div class="bottom-box">
                    <div
                        class="box-box"
                        v-for="(item, index) in radioList"
                        :key="index"
                    >
                        <div class="box-icon-title">
                            <img :src="item.icon" alt="图片加载失败" />
                            <span>{{ item.label }}</span>
                        </div>
                        <countTo
                            class="box-number"
                            :startVal="0"
                            :endVal="Number(item.value)"
                            :duration="3000"
                            >KM
                        </countTo>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <!-- 快捷入口 -->
            <div class="min-title">
                <span>智慧应用</span>
            </div>
            <div class="enter">
                <div
                    class="enter-item"
                    @click="jumpSystem(item)"
                    v-for="(item, index) in itemList"
                    :key="index"
                >
                    <span>{{ item.menuName }}</span>
                </div>
            </div>
            <!-- 标题(公共文化场所分布) -->
            <div class="min-title">
                <span>公共文化场所分布</span>
            </div>
            <!-- 公共文化场所分布 -->
            <div class="public-culture">
                <div class="pieChart" id="pieChart"></div>
                <div class="pieContent">
                    <vueSeamlessScroll
                        :data="analysisInfo"
                        :class-option="activityOption"
                        class="scrollBox"
                    >
                        <div class="datalist">
                            <div
                                class="contentItem"
                                v-for="(item, index) in analysisInfo"
                                :key="index"
                            >
                                <div class="line">
                                    <div
                                        class="dataline"
                                        :style="{
                                            backgroundColor: colorList[index],
                                        }"
                                    ></div>
                                    <div class="defaultline"></div>
                                </div>
                                <span class="name">{{ item.label }}</span>
                                <span class="num">{{ item.value }}</span>
                            </div>
                        </div>
                    </vueSeamlessScroll>
                </div>
            </div>
            <!-- 标题(各乡镇应急广播建设情况统计) -->
            <div class="min-title">
                <span>各乡镇应急广播建设情况统计</span>
            </div>
            <!-- 各乡镇应急广播建设情况统计 -->
            <div class="emergency-broadcast" id="pieChart2"></div>
        </div>
        <img class="map-center" :src="require('@/assets/map.png')" />
        <div class="page-bottom-bg"></div>
        <div class="page-left-bg"></div>
        <div class="page-right-bg"></div>
        <Modal v-model="townModal" :footer-hide="true" width="1200">
            <div class="turntable">
                <div class="left"></div>

                <div style="color: white">
                    <div class="page-left-left">
                        <img
                            src="../../assets/screenView/line.png"
                            alt=""
                            style="position: absolute; top: 270px; left: -100px"
                        />
                        <div class="list">
                            <swiper :options="swiperOptions" ref="mySwiper">
                                <swiper-slide
                                    v-for="(item, index) in menus"
                                    :key="index"
                                    class="item"
                                >
                                    <div class="swiper-item">
                                        {{ item.areaName }}
                                    </div>
                                </swiper-slide>
                            </swiper>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="current">
                        <div
                            style="text-align: center; cursor: pointer"
                            @click="goTown"
                        >
                            <img
                                src="../../assets/ScreenView/currenttwon.png"
                                style="width: 70px; height: 60px"
                            />
                            <div
                                style="
                                    font-size: 30px;
                                    font-weight: 700;
                                    color: #fdb955;
                                    margin-left: 10px;
                                "
                            >
                                {{ currentTwon.areaName }}
                            </div>
                        </div>
                    </div>
                    <div class="menu-container">
                        <div
                            style="text-align: center; cursor: pointer"
                            v-for="(item, index) in townData"
                            :key="index"
                            @click="toScreenPage(item)"
                        >
                            <img
                                src="../../assets/ScreenView/twon.png"
                                alt=""
                                style="width: 70px; height: 60px"
                            />
                            <div
                                style="
                                    font-size: 16px;
                                    font-weight: bold;
                                    color: #fdb955;
                                "
                            >
                                {{ item.areaName }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
        <common-modal
            v-model="appState"
            :title="currentMenu.menuName"
            width="600"
        >
            <div style="width: 100%; display: flex; flex-wrap: wrap">
                <div
                    class="menu-item"
                    @click="toMenu(index)"
                    v-for="(item, index) in currentMenu.children"
                    :key="index"
                >
                    <span>{{ item.menuItem }}</span>
                </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>

<script>
import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
import ThreeView from "./components/three/three-view.vue";
import Rotation3D from "@/utils/rotation3D";
import vueSeamlessScroll from "vue-seamless-scroll";
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import * as echarts from "echarts";
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
import CommonModal from "@/views/common-components/common-modal.vue";

export default {
    name: "CountyScreen",
    components: {
        MainTitle,
        ThreeView,
        vueSeamlessScroll,
        Swiper,
        SwiperSlide,
        CommonModal,
    },
    data() {
        let self = this;
        return {
            title: "翠屏区智慧广电示范区",
            warringState: false,
            areaCode: window.$localStorage.getItem("areaCode"),
            videoUrl: "/localImage/home/home.mp4",
            logUrl: "/localImage/smartserver/yj.glb",
            itemList: [
                {
                    menuName: "公共服务",
                    children: [
                        {
                            menuItem: "广电公服",
                            routerPath: "/publicService",
                        },
                        {
                            menuItem: "文娱场所",
                            routerPath: "/culture-place",
                        },
                        {
                            menuItem: "政务服务",
                            routerPath: "/govService",
                        },
                        {
                            menuItem: "基础数据",
                            routerPath: "/smart-radio-basic-data",
                        },
                        // {
                        //     menuItem: "应急数据",
                        //     routerPath: "/emergency-data",
                        // },
                    ],
                },
                {
                    menuName: "社会治理",
                    children: [
                        {
                            menuItem: "应急广播",
                            routerPath: "/emergencyScreen",
                        },
                        // {
                        //     menuItem: "值班系统",
                        //     routerPath: "/duty-system",
                        // },
                        {
                            menuItem: "视频监控",
                            routerPath: "/video-monitor",
                        },
                        {
                            menuItem: "烟火预警",
                            routerPath: "/emergency-extend",
                        },
                        // {
                        //     menuItem: "周界预警",
                        //     routerPath: "/perimeter-screen",
                        // },
                        {
                            menuItem: "人流预警",
                            isShowTwon: true,
                            children: [
                                {
                                    menuItem: "清华街",
                                    areaCode: "511502000001",
                                },
                                {
                                    menuItem: "合江门",
                                    areaCode: "511502000002",
                                },
                            ],
                        },
                        {
                            menuItem: "车流预警",
                            isShowTwon: true,
                            children: [
                                {
                                    menuItem: "合江门",
                                    areaCode: "511502000003",
                                },
                                {
                                    menuItem: "盐李路",
                                    areaCode: "511502000004",
                                },
                            ],
                        },
                        {
                            menuItem: "视频结构化",
                            routerPath: "/video-structuring",
                        },
                    ],
                },
                {
                    menuName: "乡村振兴",
                    children: [
                        {
                            menuItem: "镇级",
                            routerPath: "/town-screen",
                            isShowTwon: true,
                        },
                        {
                            menuItem: "村级",
                            routerPath: "/village-screen",
                            isShowTwon: true,
                        },
                        {
                            menuItem: "乡村治理",
                            routerPath: "/village-governance-img",
                            isShowTwon: true,
                        },
                        {
                            menuItem: "乡村党建",
                            routerPath: "/party-screen",
                        },
                        {
                            menuItem: "网格管理",
                            routerPath: "/grid-manage",
                            isShowTwon: true,
                        },
                    ],
                },
                {
                    menuName: "文博图旅",
                    children: [
                        {
                            menuItem: "文化馆",
                            routerPath: "/cultural-center",
                        },
                        {
                            menuItem: "博物馆",
                            routerPath: "/museum-center",
                        },
                        {
                            menuItem: "图书馆",
                            routerPath: "/library-center",
                        },
                        {
                            menuItem: "全域旅游",
                            routerPath: "/global-travel",
                        },
                    ],
                },
                {
                    menuName: "媒体融合",
                    children: [
                        {
                            menuItem: "媒体融合",
                            routerPath: "/new-media",
                        },
                        {
                            menuItem: "三江翠屏",
                            routerPath: "/mediaBigScreen",
                        },
                        {
                            menuItem: "人人通",
                            routerPath: "/rrt-screen",
                        },
                    ],
                },
                {
                    menuName: "平台应用",
                    children: [
                        {
                            menuItem: "视听资源",
                            url: "http://60.255.186.185:9024/cp-stzy/#/",
                        },
                        {
                            menuItem: "数据管理",
                            url: "http://60.255.186.185:9024/cp-web/#/",
                        },
                        {
                            menuItem: "运维运控",
                            url: "http://60.255.186.185:9999",
                        },
                        {
                            menuItem: "动态表单",
                            url: "http://60.255.186.185:9024/cp-form/#/",
                        },
                    ],
                },
            ],
            baseInfoList: [],
            radioList: [],
            radioIconList: [
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
                {
                    icon: require("@/assets/welcome/icon/gbz-icon.png"),
                },
            ],
            cTravelList: [],
            analysisInfo: [], //公共文化列表
            colorList: [
                "#00ffff",
                "#006ced",
                "#ffe000",
                "#ffa800",
                "#ff5b00",
                "#ff3000",
            ],
            open: [false, false, false, false, false],
            rotationInstance: null,
            swiperOptions: {
                on: {
                    slideChangeTransitionEnd: function () {
                        self.changeIndex(Number(this.realIndex));
                    },
                    touchEnd: function () {
                        self.changeIndex(Number(this.realIndex));
                    },
                },

                grabCursor: true,
                mousewheel: true,
                slideToClickedSlide: true,
                direction: "vertical",
                autoplay: false,
                loop: false,
                loopedSlides: 22,
                effect: "coverflow",
                slidesPerView: "auto",
                centeredSlides: true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true, //修改swiper的父元素时，自动初始化swiper
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 66,
                    modifier: 2,
                    slideShadows: false,
                },
            },
            menus: [],
            currentTwon: {},
            townModal: false,
            townData: [],
            currentType: "",
            enterList: [
                {
                    icon: require("@/assets/largeScreen/stzy.png"),
                    url: "http://60.255.186.185:9024/county-file/#/Login",
                    text: "视听资源",
                },
                {
                    icon: require("@/assets/largeScreen/sjgl.png"),
                    url: "http://60.255.186.185:9024/xy-web/",
                    text: "数据管理",
                },
                {
                    icon: require("@/assets/largeScreen/ywyk.png"),
                    url: "http://60.255.186.185:9999/login/toLogin",
                    text: "运维运控",
                },
                {
                    icon: require("@/assets/largeScreen/dtbd.png"),
                    url: "http://60.255.186.185:9024/county-form/",
                    text: "动态表单",
                },
            ],
            appState: false,
            currentMenu: {},
        };
    },
    computed: {
        activityOption() {
            return {
                step: 0.4, // 数值越大速度滚动越快
                limitMoveNum: this.analysisInfo.length, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.rotationInstance = new Rotation3D({
            id: "#rotation3D",
            farScale: 0.8,
            // farScale: 1,
            xRadius: 50, //x半径压缩
            yRadius: 0, //y半径压缩
            autoPlay: false,
            autoPlayDelay: 6000,
        });

        // 基本概况
        this.initDataInfo("countyBaseInfo", (data) => {
            this.baseInfoList = data;
        });
        // 生产总值
        this.initDataInfo("productionTrends", (data) => {
            let y = data.map((item) => item.label);
            let x = data.map((item) => Number(item.value));
            this.queryProductionValue(x, y);
        });
        // 广电信息
        this.initDataInfo("radioInformation", (data) => {
            this.radioList = data.map((item, index) => {
                item.icon = this.radioIconList[index].icon;
                return item;
            });
        });
        // 文化旅游
        this.initDataInfo("culturalTourism", (data) => {
            this.cTravelList = data;
        });
        // 文化场所
        this.initDataInfo("PCTLocated", (data) => {
            this.analysisInfo = data;

            let x = data.map((item) => item.label);
            let y = data.map((item) => Number(item.value));
            this.initChartPie(x, y);
        });
        // 文化场所
        this.initDataInfo("broadcastConstruction", (data) => {
            let resData = data.map((item) => {
                return {
                    name: item.label,
                    num: Number(item.value),
                };
            });
            this.queryChart2(resData);
        });
        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;
        },
        // 获取数据
        initDataInfo(type, callback) {
            let params = {
                page: 1,
                pageSize: 100,
                areaCode: this.areaCode,
                type,
            };
            this.$http
                .post("screen/getScreenSurveyPage", this.common.request(params))
                .then((res) => {
                    if (res.data.code === 200) {
                        let data = res.data.data.records;
                        callback(data);
                    }
                });
        },
        queryProductionValue(x, y) {
            let myChart = echarts.init(document.getElementById("chartZone"));
            var color = ["#80bdff", "#07f8a0"];

            const dataX = y;
            const dataBar = x;
            const dataNowY = [10, 17, 13, 24, 15];
            var option = {
                color: color,
                title: {
                    text: "单位:亿元",
                    textStyle: {
                        color: "#fff",
                        fontSize: 10,
                    },
                },
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(33,56,77,1)",
                    borderColor: "rgba(33,56,77,1)",
                    textStyle: {
                        color: "#fff",
                        fontSize: 10,
                    },
                    axisPointer: {
                        lineStyle: {
                            color: "rgba(0,133,255,0)",
                        },
                    },
                },
                legend: {
                    right: "4%",
                    data: ["增长率", "生产总值"],
                    itemGap: 20,
                    itemWidth: 20,
                    itemHeight: 10,
                    textStyle: {
                        color: "#fff",
                        fontSize: 10,
                    },
                },
                grid: {
                    top: "20%",
                    left: "4%",
                    height: "80%",
                    width: "auto",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: ["0", "20%"],
                    data: dataX,
                    axisLabel: {
                        // interval: 0,
                        textStyle: {
                            color: "#fff",
                            fontSize: 10,
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false, // 去除刻度线
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        // min: 0,
                        // max: 200,
                        // interval: 50,
                        axisLabel: {
                            textStyle: {
                                color: "#fff",
                                fontSize: 10,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "rgba(255,255,255,0.1)",
                            },
                        },
                        axisTick: { show: false },
                        axisLine: { show: false },
                    },
                    {
                        // type: "value",
                        min: 0,
                        max: 50,
                        interval: 10,
                        axisLabel: {
                            show: false, // 不显示坐标轴上的文字
                        },
                        boundaryGap: ["0", "20%"],
                        axisTick: { show: false },
                        axisLine: { show: false },
                        splitLine: { show: false },
                    },
                ],
                series: [
                    {
                        name: "Max",
                        type: "bar",
                        barGap: "-76.5%",
                        barWidth: "70%",
                        silent: true,
                        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
                        itemStyle: {
                            normal: {
                                color: "rgba(17, 24, 40, 0.1)",
                                borderWidth: 0,
                                borderColor: "rgba(17, 24, 40, 0.1)",
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                borderWidth: 2,
                                borderColor: "rgba(19,255,241,1)",
                            },
                        },
                        // data: 250,
                        z: 9,
                        tooltip: {
                            show: false,
                        },
                    },
                    {
                        name: "生产总值",
                        type: "bar",
                        barWidth: "40%",
                        stack: "one",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(21,255,157, 0.1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(21,255,157, 0.6)",
                                    },
                                ]
                            ),
                        },
                        data: dataBar,
                    },
                    {
                        name: "",
                        type: "bar",
                        barWidth: "40%",
                        stack: "one",
                        itemStyle: {
                            normal: {
                                color: "rgba(21, 255, 157,1)",
                            },
                        },
                        data: [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6],
                        tooltip: {
                            show: false,
                        },
                    },
                    // {
                    //     name: "增长率",
                    //     type: "line",
                    //     yAxisIndex: 1,
                    //     symbolSize: 8,
                    //     // 设置拐点颜色以及边框
                    //     itemStyle: {
                    //         color: "rgba(255, 209, 92,1)",
                    //     },
                    //     data: dataNowY,
                    // },
                ],
            };

            myChart.setOption(option);
            echartsFocus(myChart, dataNowY.length);
        },
        initChartPie(xdata, ydata) {
            let myChart = echarts.init(document.getElementById("pieChart"));
            let num = 0;
            ydata.forEach((item) => {
                num = num + Number(item);
            });
            let img =
                "data:image/png;base64,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";
            let data = [];
            let color = this.colorList;
            for (let i = 0; i < ydata.length; i++) {
                data.push(
                    {
                        value: ydata[i],
                        name: xdata[i],
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                shadowBlur: 20,
                                borderColor: color[i],
                                shadowColor: color[i],
                            },
                        },
                    }
                    // {
                    //   value: 2,
                    //   name: "",
                    //   itemStyle: {
                    //     normal: {
                    //       label: {
                    //         show: false,
                    //       },
                    //       labelLine: {
                    //         show: false,
                    //       },
                    //       color: "rgba(0, 0, 0, 0)",
                    //       borderColor: "rgba(0, 0, 0, 0)",
                    //       borderWidth: 0,
                    //     },
                    //   },
                    // }
                );
            }
            var seriesOption = [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,
                    center: ["50%", "50%"],
                    radius: [70, 84],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,
                                position: "outside",
                                color: "#ddd",
                                formatter: function (params) {
                                    var percent = 0;
                                    var total = 0;
                                    for (var i = 0; i < ydata.length; i++) {
                                        total += ydata[i];
                                    }
                                    percent = (
                                        (params.value / total) *
                                        100
                                    ).toFixed(0);
                                    if (params.name !== "") {
                                        return (
                                            "文化场所" +
                                            params.name +
                                            "\n" +
                                            "\n" +
                                            "占百分比：" +
                                            percent +
                                            "%"
                                        );
                                    } else {
                                        return "";
                                    }
                                },
                            },
                            labelLine: {
                                length: 30,
                                length2: 100,
                                show: true,
                                color: "#00ffff",
                            },
                        },
                    },
                    data: data,
                },
            ];
            let option = {
                color: color,
                title: [
                    {
                        text:
                            "{name|" +
                            num +
                            "个" +
                            "}\n{val|" +
                            "文化场所" +
                            "}",
                        top: "center",
                        left: "center",
                        textStyle: {
                            rich: {
                                name: {
                                    fontSize: 18,
                                    fontWeight: "bold",
                                    color: "#fff",
                                    padding: [0, 0, 5, 0],
                                },
                                val: {
                                    fontSize: 14,
                                    fontWeight: "bold",
                                    color: "#fff",
                                    padding: 0,
                                },
                            },
                        },
                    },
                ],
                graphic: {
                    elements: [
                        {
                            type: "image",
                            z: 3,
                            style: {
                                image: img,
                                width: 110,
                                height: 110,
                            },
                            left: "center",
                            top: "center",
                            position: [100, 100],
                        },
                    ],
                },
                tooltip: {
                    show: true,
                },
                legend: {
                    show: false,
                },
                toolbox: {
                    show: false,
                },
                series: seriesOption,
            };

            myChart.setOption(option);
            echartsFocus(myChart, xdata.length);
        },
        // 各乡镇应急广播建设情况统计
        queryChart2(data) {
            var chartDom = document.getElementById("pieChart2");
            var myChart = echarts.init(chartDom);
            var option;

            var xdata = data.map((v) => v.name);
            var data = data.map((v) => v.num);
            option = {
                // backgroundColor: "rgba(2, 12, 44, 1)", //背景色
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    formatter: function (params) {
                        return (
                            params[0].name +
                            "<br>" +
                            "统计数 ：" +
                            params[0].value
                        );
                    },
                },
                grid: {
                    left: "4%",
                    right: "4%",
                    top: "5%",
                    width: "auto",
                    height: "100%",
                    containLabel: true,
                },
                xAxis: {
                    data: xdata,
                    triggerEvent: true,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        // rotate: 45,
                        formatter: function (value) {
                            let txtArry = value.split("");
                            let rs = "";
                            for (let i = 0; i < txtArry.length; i++) {
                                rs += txtArry[i] + "\n"; // 在每个字后面加上换行符，使每个字都竖着显示
                            }
                            return rs;
                        },
                        textStyle: {
                            fontSize: 14,
                            color: "#fff",
                            // fontSize: 10,
                            // color: "rgba(255, 255, 255, 1)",
                        },
                    },
                },
                yAxis: {
                    triggerEvent: true,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "rgba(255,255,255,0.1)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#fff",
                            fontSize: 16,
                            // color: "rgba(255, 255, 255, 1)",
                            // fontSize: 12,
                        },
                    },
                },
                series: [
                    {
                        name: "订单数",
                        barMinHeight: 10,
                        type: "pictorialBar",
                        barCategoryGap: "60%",
                        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
                        itemStyle: {
                            normal: {
                                //渐变色
                                color: "rgb(215,210,34)",
                            },
                        },
                        data: data,
                        z: 10,
                    },
                ],
            };

            myChart.setOption(option);
            echartsFocus(myChart, xdata.length);
        },
        toMenu(index) {
            let item = this.currentMenu.children[index];
            if (item.routerPath && !item.isShowTwon) {
                this.$router.push(item.routerPath);
            } else if (item.isShowTwon) {
                console.log(item);
                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;
                }
            } else if (item.url) {
                window.open(item.url);
            }
        },
        goTown() {
            if (this.currentType != "town") {
                return;
            }
            if (this.currentTwon.areaName != "李庄镇") {
                this.$message.info("除李庄镇外,其余尚未建设!");
                return;
            }
            this.townModal = false;
            this.$router.push({
                name: "town-screen",
                query: {
                    townName: this.currentTwon.areaName,
                    areaCode: this.currentTwon.areaCode,
                },
            });
        },
        toScreenPage(item) {
            if (this.currentType == "person") {
                this.$router.push({
                    name: "person-warring",
                    query: {
                        areaName: item.areaName,
                        areaCode: item.areaCode,
                    },
                });
                return;
            }
            if (this.currentType == "car") {
                this.$router.push({
                    name: "car-warring",
                    query: {
                        areaName: item.areaName,
                        areaCode: item.areaCode,
                    },
                });
                return;
            }
            if (item.areaName != "高桥村") {
                this.$message.info("除高桥村,其余尚未建设！");
                return;
            }
            if (this.currentType == "village") {
                this.$router.push({
                    name: "village-screen",
                    query: {
                        areaName: item.areaName,
                        areaCode: item.areaCode,
                    },
                });
            } else if (this.currentType == "governance") {
                this.$router.push({
                    name: "village-governance-img",
                    query: {
                        areaName: item.areaName,
                        areaCode: item.areaCode,
                    },
                });
            } else if (this.currentType == "grid") {
                this.$router.push({
                    name: "grid-manage",
                    query: {
                        areaName: item.areaName,
                        areaCode: item.areaCode,
                    },
                });
            }
            this.townModal = false;
        },
        changeIndex(index) {
            this.currentTwon = this.menus[index];
            this.townData = [];
            this.getVill(this.menus[index].areaCode);
        },
        getTownMemu() {
            this.$http
                .post(
                    "base/areaInfo/queryAreaInfoByParentId",
                    this.common.request({
                        parentCode: "511502000000",
                        hasOpen: "1",
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        if (res.data.data && res.data.data[0]) {
                            this.menus = res.data.data;
                            this.currentTwon = this.menus[0];
                            this.getVill(this.menus[0].areaCode);
                        }
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                });
        },
        getVill(code) {
            this.$http
                .post(
                    "base/areaInfo/queryAreaInfoByParentId",
                    this.common.request({
                        parentCode: code,
                        hasOpen: "1",
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        if (res.data.data && res.data.data[0]) {
                            this.townData = res.data.data;
                        }
                    } else {
                        this.$Message.error("查询数据失败");
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询数据失败");
                });
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/pbStyle.less";
@import "../../../static/css/rotation3D.css";

.menu-item {
    cursor: pointer;
    width: 100px;
    height: 67px;
    background: url("../../assets/largeScreen/enter-box.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 20px 20px 0;
    span {
        font-family: YouSheBiaoTiHei;
        font-weight: 500;
        font-size: 16px;
        color: #ffffff;
    }
}
.map-center {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 1350px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.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/screenView/bg.png");
    background-size: 100%;

    .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 1920px;
        height: 1080px;
        background: url("../../assets/largeScreen/index-bg.png") no-repeat;
        background-size: 100%;
        z-index: -90;
    }

    .three-box {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 50%;
        transform: translateX(-50% - 1.8px);
        top: 200px;
        width: 500px;
        height: 300px;
    }

    .change-box {
        position: absolute;
        left: 50%;
        transform: translateX(-50%- 4px);
        top: 650px;
        width: 89px;
        height: 50px;
        background: url("../../assets/largeScreen/quan.png") no-repeat;
        background-size: 100%;
        transform-style: preserve-3d;
        animation: change 6s linear infinite;
    }

    @keyframes change {
        0% {
            transform: rotateX(45deg) translateX(-50%- 4px) scale(1);
        }
        25% {
            transform: rotateX(45deg) translateX(-50%- 4px) scale(5);
        }
        50% {
            transform: rotateX(45deg) translateX(-50%- 4px) scale(9);
        }
        75% {
            transform: rotateX(45deg) translateX(-50%- 4px) scale(5);
        }
        100% {
            transform: rotateX(45deg) translateX(-50%- 4px) scale(1);
        }
    }

    .center-bottom-contain {
        position: absolute;
        width: 1100px;
        height: 400px;
        top: 450px;
        left: 50%;
        font-family: "YouSheBiaoTiHei";
        transform: translateX(-50%- 2px);

        .menu-name {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url("../../../static/images/qiu.png") no-repeat;
            background-size: 100% 100%;
            font-family: "YouSheBiaoTiHei";
            font-style: normal;
            font-size: 28px;
        }

        .children-list {
            width: 0;
            height: 0;
            top: 73px;
            left: 73px;
            position: absolute;

            .children-item {
                width: 100px;
                height: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                background: url("../../assets/largeScreen/qiu.png") no-repeat;
                background-size: 100%;
                transition: 0.2s 0.1s;
                position: absolute;
                font-size: 23px;
                z-index: 2;
                top: -50px;
                left: 0;
            }
        }

        .children-list.open {
            & .children-item.oy-menu-item_1 {
                left: -170px;
                top: 0px;
            }

            & .children-item.oy-menu-item_2 {
                left: -152px;
                top: -106px;
            }

            & .children-item.oy-menu-item_3 {
                left: -92px;
                top: -206px;
            }

            & .children-item.oy-menu-item_4 {
                left: 0px;
                top: -256px;
            }

            & .children-item.oy-menu-item_5 {
                left: 92px;
                top: -206px;
            }

            & .children-item.oy-menu-item_6 {
                left: 152px;
                top: -106px;
            }
            & .children-item.oy-menu-item_7 {
                left: 170px;
                top: 0px;
            }
        }
    }

    // 标题样式
    .min-title {
        width: 348px;
        height: 38px;
        background-image: url("../../assets/largeScreen/title-bg-310.png");
        background-size: 100% 100%;
        padding-left: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        span {
            font-family: "ShiShangZhongHeiJianTi";
            font-style: normal;
            font-weight: 400;
            font-size: 18px;
            /* identical to box height */
            display: inline-block;
            color: #ffffff;
            // margin-left: 28px;
            text-shadow: 0px 0px 4px #83e1ff;
        }
    }

    .left {
        position: absolute;
        top: 90px;
        left: 58px;
        width: 348px;
        height: 920px;

        .min-title {
            span {
            }
        }

        // 南溪区基本介绍
        .left-top {
            width: 348px;
            height: 478px;
            background: url("../../assets/welcome/left-top.png") no-repeat;
            background-size: 100%;
            box-sizing: border-box;
            padding: 12px 0 8px 0;
            margin-bottom: 16px;

            // 内部样式开始
            .number {
                font-family: "YouSheBiaoTiHei";
                font-style: normal;
                font-weight: 400;
                font-size: 20px;
                line-height: 26px;
                /* identical to box height */
                display: flex;
                align-items: flex-end;
                text-align: center;

                background: linear-gradient(180deg, #ffffff 0%, #a7ddff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }

            .img {
                width: 72px;
                height: 64px;
            }

            .title {
                font-family: "PingFang SC";
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                /* identical to box height */
                display: flex;
                align-items: flex-end;
                text-align: center;

                background: linear-gradient(180deg, #ffffff 0%, #a7ddff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
            }

            //内部样式结束

            .top-top-one {
                width: 100%;
                height: 260px;
                display: flex;
                align-items: space-between;
                justify-content: space-evenly;
                flex-wrap: wrap;

                .top-one1 {
                    width: 150px;
                    height: 126px;
                    background: url("../../assets/welcome/box.png") no-repeat;
                    background-size: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    align-items: center;
                }
            }

            .top-icon-title {
                width: 108px;
                height: 22px;
                // margin-top: 22px;
                margin: 12px 0 0 16px;
                display: flex;
                align-items: center;

                img {
                    width: 20px;
                    height: 20px;
                }

                span {
                    margin-left: 4px;
                    font-family: "Source Han Sans CN";
                    font-style: normal;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 22px;
                    color: #b4c0cc;
                }
            }

            // 图表
            .top-chart {
                width: 319px;
                height: 157px;
                margin-left: 12px;

                // .chartZone {
                //     width: 319px;
                //     height: 157px;
                // }
            }
        }

        // 广播电视
        .left-bottom {
            width: 348px;
            height: 335px;
            box-sizing: border-box;
            // padding: 20px 14px 20px 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            background: url("../../assets/welcome/gbds-bg.png") no-repeat;
            background-size: 100% 100%;

            .bottom-box {
                display: flex;
                justify-content: space-between;
                align-items: space-between;
                flex-wrap: wrap;
                width: 100%;
                height: 100%;
                padding: 10px;

                .box-box {
                    width: 154px;
                    height: 52px;
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    box-sizing: border-box;
                    padding-left: 23px;
                    background: url("../../assets/welcome/gb-icon.png")
                        no-repeat;
                    background-size: 100%;

                    .box-icon-title {
                        width: 100%;
                        height: 20px;
                        display: flex;
                        align-items: center;

                        img {
                            width: 14px;
                            height: 14px;
                        }

                        span {
                            margin-left: 10px;
                            font-family: "PingFang SC";
                            font-style: normal;
                            font-weight: 900;
                            font-size: 13px;
                            line-height: 20px;
                            /* identical to box height */
                            display: flex;
                            align-items: center;
                            color: #ffffff;
                        }
                    }

                    .box-number {
                        font-family: "PingFang SC";
                        font-style: normal;
                        font-weight: 700;
                        font-size: 16px;
                        line-height: 22px;
                        display: flex;
                        align-items: center;
                        text-align: right;
                        color: #ffffff;
                        text-shadow: 0px 0px 4px #00a3ff;
                    }
                }
            }
        }
    }

    .right {
        position: absolute;
        top: 90px;
        right: 58px;
        width: 348px;
        height: 920px;

        // 文化旅游
        .cultural-tourism {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 348px;
            height: 174px;
            margin-bottom: 16px;
            background: url("../../assets/welcome/whlv-bg.png") no-repeat;
            background-size: 100%;

            .cultural-content {
                display: flex;
                justify-content: space-evenly;
                flex-wrap: wrap;
                align-items: space-between;
                width: 100%;
                height: 100%;

                .content-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    width: 103px;
                    height: 73px;

                    .box-number {
                        font-family: "Furore";
                        font-style: normal;
                        font-weight: 400;
                        font-size: 24px;
                        line-height: 28px;
                        /* identical to box height */
                        text-align: center;
                        color: #ffffff;
                        text-shadow: 0px 0px 8px #1e85ff;
                    }

                    .box-title {
                        font-family: "PingFang SC";
                        font-style: normal;
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 20px;
                        /* identical to box height */
                        text-align: center;
                        color: #ffffff;
                    }
                }
            }
        }
        // 快捷入口
        .enter {
            width: 348px;
            height: 174px;
            background: url("../../assets/welcome/whlv-bg.png") no-repeat;
            background-size: 100%;
            display: flex;
            justify-content: space-between;
            align-items: space-between;
            flex-wrap: wrap;
            padding: 10px 10px;
            margin-bottom: 10px;

            .enter-item {
                cursor: pointer;
                width: 100px;
                height: 67px;
                background: url("../../assets/largeScreen/enter-box.png")
                    no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                span {
                    font-family: YouSheBiaoTiHei;
                    font-weight: 500;
                    font-size: 16px;
                    color: #ffffff;
                }
            }
        }
        // 公共文化场所分布
        .public-culture {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            width: 348px;
            height: 374px;
            background: url("../../assets/welcome/ggwhcs-bg.png") no-repeat;
            background-size: 100%;
            margin-bottom: 16px;

            .pieChart {
                width: 348px;
                height: 200px;
            }

            .pieContent {
                width: 335px;
                height: 130px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: space-between;

                .scrollBox {
                    // 内容两排显示
                    overflow: hidden;
                }

                .datalist {
                    width: 453px;
                    height: 130px;
                    display: flex;
                    justify-content: space-evenly;
                    align-items: center;
                    align-content: space-evenly;
                    flex-wrap: wrap;

                    .contentItem {
                        width: 145px;
                        height: 55px;
                        // margin-bottom: 16px;
                        margin-right: 6px;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        cursor: pointer;

                        .line {
                            display: flex;

                            .dataline {
                                height: 4px;
                                width: 24px;
                                margin-right: 5px;
                                // background-color: #19cd17;
                                border-radius: 2px;
                            }

                            .defaultline {
                                height: 4px;
                                flex: 1;
                                background-color: #1b424f;
                                border-radius: 2px;
                            }
                        }

                        .name {
                            font-family: "PingFang SC";
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 20px;
                            letter-spacing: 0em;
                            color: #ffffff;
                            text-align: left;
                            margin: 4px 0 2px;
                        }

                        .num {
                            font-family: "Furore";
                            font-size: 20px;
                            font-weight: 400;
                            line-height: 23px;
                            letter-spacing: 0em;
                            color: #ffffff;
                            // text-align: center;
                        }
                    }
                }
            }
        }

        // 各乡镇应急广播建设情况统计
        .emergency-broadcast {
            width: 348px;
            height: 210px;
            background: url("../../assets/welcome/qktj-bg.png") no-repeat;
            background-size: 100% 100%;
        }
    }
}

.turntable {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 600px;
    background-image: url("../../assets/ScreenView/turntable.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid #8eddff;
    border-radius: 8px;

    .blue {
        color: #01dbff;
    }

    .orange {
        color: #ffa901;
    }

    .cyan {
        color: #01f4ba;
    }

    .purple {
        color: #d505dc;
    }

    .left {
        margin-top: 50px;
        margin-left: 70px;
        width: 200px;
        height: 80%;
    }

    .right {
        position: absolute;
        right: 50px;
        top: 20px;
        width: 340px;
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .current {
            width: 100%;
            height: 150px;
            border-bottom: 2px dashed #ffd28f;
            display: flex;
            align-items: center;
            justify-content: center;

            > div {
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        .menu-container {
            background-color: transparent !important;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            height: 70%;
            overflow: hidden;
            overflow-y: auto;

            &::-webkit-scrollbar {
                display: none;
            }

            > div {
                width: 45%;
            }
        }
    }
}

.page-left-left {
    position: absolute;
    top: 0;
    left: 450px;
    height: 100%;
    width: 373px;
    z-index: 11;
}

.list {
    font-family: "YouSheBiaoTiHei";
    width: 230px;
    height: 700px;
    /*padding-top: 22px;*/
    overflow: hidden;
    margin-top: 80px;

    .swiper-container {
        height: 60% !important;
        overflow: hidden;

        .item {
            height: 100px !important;
            line-height: 100px;
            color: #f5f5f5;
            font-size: 40px;
            /*margin-top: 60px;*/
            /*margin-bottom: 60px;*/
            letter-spacing: 1px;

            .swiper-item {
                display: flex;
                justify-content: left;
                align-items: flex-end;
                flex-direction: column;
            }
        }
    }
}

//选中时swiper-item的样式
/deep/ .swiper-slide-active {
    font-size: 40px !important;
    background: linear-gradient(180deg, #fff5d3 0%, #ffd056 100%),
        linear-gradient(0deg, #ffffff, #ffffff);
    /*background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow);*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/deep/ .ivu-modal-close {
    margin: 10px 10px 0 0;

    .ivu-icon-ios-close-empty {
        color: #fff !important;
        font-size: 36px !important;
    }
}

/deep/ .ivu-modal-content {
    background-color: transparent !important;
}
</style>
