<template>
    <!-- 村级大屏 -->
    <div class="eb-container" ref="appRef">
        <MainTitle class="title" :title="title"></MainTitle>
        <div class="main">
            <div class="left-box">
                <div class="content-one">
                    <div class="title-box-samll">
                        <span>基本概况</span>
                    </div>
                    <div class="content-info">
                        <div
                            class="base-item"
                            v-for="(item, index) in baseInfoList"
                            :key="index"
                        >
                            <img
                                :src="item.icon"
                                style="width: 60px; height: 60px"
                            />
                            <div class="base-data-box">
                                <div class="base-data-title">
                                    {{ item.label }}
                                </div>
                                <div class="base-data-text">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="Number(item.value)"
                                        :duration="2000"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-two">
                    <div class="title-box-samll">
                        <span>民生服务</span>
                    </div>
                    <div class="content-info">
                        <div
                            style="
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                            "
                        >
                            <div
                                class="data-item-box"
                                v-for="(item, index) in swNumList"
                                :key="index"
                            >
                                <div class="data-item-icon">
                                    <img
                                        :src="item.icon"
                                        style="width: 56px; height: 50px"
                                    />
                                </div>
                                <div class="data-item-desc">
                                    <div
                                        class="data-item-title"
                                        style="font-weight: bolder"
                                    >
                                        {{ item.name }}
                                    </div>
                                    <div class="data-item-number">
                                        <CountTo
                                            :startVal="0"
                                            :endVal="item.number"
                                            :duration="2000"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mini-title-box">
                            <div class="point"></div>
                            <div class="title-text">事件上报数据统计</div>
                        </div>
                        <div class="alarm-info-box">
                            <div
                                class="alarm-item"
                                v-for="(item, index) in alarmInfoList"
                                :key="index"
                            >
                                <div style="margin-top: 2px">
                                    <img
                                        :src="item.icon"
                                        style="width: 48px; height: 50px"
                                    />
                                </div>
                                <div class="alarm-data-box">
                                    <div
                                        class="alarm-data-title"
                                        :style="{ color: item.color }"
                                    >
                                        {{ item.name }}
                                    </div>
                                    <div class="alarm-data-text">
                                        <CountTo
                                            :startVal="0"
                                            :endVal="item.number"
                                            :duration="2000"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chart2" id="chart2"></div>
                    </div>
                </div>
            </div>
            <div class="center-box">
                <div class="title-box-medium" style="width: 100%">
                    <span>宣传一览</span>
                </div>
                <div class="video-box" v-if="urlType == '0'">
                    <commonLivePlayer
                        :videoUrl="videoUrl"
                        :loop="true"
                        :muted="false"
                    ></commonLivePlayer>
                </div>
                <Carousel v-else v-model="imgIndex" style="width: 880px; height: 495px;" loop>
                    <CarouselItem>
                        <img v-for="(item, index) in videoUrl" :key="index" :src="item" style="width: 880px; height: 495px;" />
                    </CarouselItem>
                </Carousel>
                <div class="center-bottom">
                    <div class="center-bottom-box">
                        <div class="title-box-samll" style="width: 100%">
                            <span>人员结构</span>
                        </div>
                        <div class="content-info" id="chart3"></div>
                    </div>
                    <div class="center-bottom-box">
                        <div class="title-box-samll" style="width: 100%">
                            <span>特殊人群</span>
                        </div>
                        <div class="content-info" id="chart4"></div>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="content-three">
                    <div class="title-box-samll">
                        <span>组织概况</span>
                    </div>
                    <div class="content-info">
                        <vue-seamless-scroll
                            :data="leaderList"
                            :class-option="leaderOption"
                            style="width: 100%; height: 100%; overflow: hidden"
                        >
                            <div style="height: 100%; display: flex">
                                <div
                                    class="data-item"
                                    v-for="(item, index) in leaderList"
                                    :key="index"
                                >
                                    <img :src="item.image" />
                                    <div class="info-box">
                                        <span>姓名:</span>
                                        <span>{{ item.name }}</span>
                                        <span>职务:</span>
                                        <span>{{ item.job }}</span>
                                    </div>
                                </div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
                <div class="content-four">
                    <div class="title-box-samll">
                        <span>产业发展</span>
                    </div>
                    <div class="content-info">
                        <div class="info-item">
                            <div class="item-value">
                                <countTo
                                    class="number"
                                    :startVal="startVal"
                                    :endVal="
                                        parseFloat(baseInfo.specialtyCatering)
                                    "
                                    :decimals="2"
                                    :duration="2000"
                                ></countTo>
                            </div>
                            <div>
                                <img
                                    :src="
                                        require('@/assets/largeScreen/nysc.png')
                                    "
                                    style="width: 75px"
                                />
                            </div>
                            <div class="item-name">农业总产值(亿元)</div>
                        </div>
                        <div class="info-item">
                            <div class="item-value">
                                <countTo
                                    class="number"
                                    :startVal="startVal"
                                    :endVal="
                                        parseFloat(baseInfo.featuredHomestays)
                                    "
                                    :decimals="2"
                                    :duration="2000"
                                ></countTo>
                            </div>
                            <div>
                                <img
                                    :src="
                                        require('@/assets/largeScreen/gysc.png')
                                    "
                                    style="width: 75px"
                                />
                            </div>
                            <div class="item-name">工业总产值(亿元)</div>
                        </div>
                        <div class="info-item">
                            <div class="item-value">
                                <countTo
                                    class="number"
                                    :startVal="startVal"
                                    :decimals="2"
                                    :endVal="parseFloat(baseInfo.scenicSpots)"
                                    :duration="2000"
                                ></countTo>
                            </div>
                            <div>
                                <img
                                    :src="
                                        require('@/assets/largeScreen/sysc.png')
                                    "
                                    style="width: 75px"
                                />
                            </div>
                            <div class="item-name">商业总产值(亿元)</div>
                        </div>
                    </div>
                </div>
                <div class="content-five">
                    <div class="title-box-samll">
                        <span>最新公告</span>
                    </div>
                    <div class="content-info" @click="openContent($event)">
                        <vue-seamless-scroll
                            :data="newContentList"
                            :class-option="contentOption"
                            style="width: 100%; height: 100%; overflow: hidden"
                        >
                            <div
                                style="
                                    width: 100%;
                                    display: flex;
                                    flex-direction: column;
                                "
                            >
                                <div
                                    class="list-item"
                                    v-for="(item, index) in newContentList"
                                    :data-obj="index"
                                    :key="index"
                                >
                                    <img :src="item.coverImage" />
                                    <div class="info-box">
                                        <span class="title">{{
                                            item.title
                                        }}</span>
                                        <span class="time">{{
                                            item.publishTime
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-bottom-bg"></div>
        <commonModal
            v-model="detailModal"
            :title="detailInfo.title"
            @close="detailModal = false"
            :width="1000"
        >
            <div class="content-box">
                <!--                <div class="content-title">{{detailInfo.title}}</div>-->
                <div style="display: flex">
                    <div style="font-size: 16px; margin-right: 20px">
                        发布时间：{{ detailInfo.publishTime }}
                    </div>
                    <div style="font-size: 16px">
                        发布单位：{{ detailInfo.createBy }}
                    </div>
                </div>
                <div style="width: 100%" v-if="detailInfo.contentType == '0'">
                    <span
                        style="
                            display: inline-block;
                            font-size: 16px;
                            margin-top: 20px;
                        "
                        >简介:</span
                    >
                    <div class="content-desc" v-html="detailInfo.content"></div>
                </div>
                <div style="width: 100%" v-if="detailInfo.contentType == '1'">
                    <span
                        style="
                            display: inline-block;
                            font-size: 16px;
                            margin-top: 20px;
                        "
                        >图集:</span
                    >
                    <Carousel
                        style="width: 100%; height: 540px"
                        autoplay
                        v-model="imgListIndex"
                        loop
                    >
                        <CarouselItem
                            v-for="(item, index) in detailInfo.imageList"
                            :key="index"
                        >
                            <img
                                :src="item"
                                alt=""
                                style="width: 100%; height: 540px"
                            />
                        </CarouselItem>
                    </Carousel>
                </div>
                <div style="width: 100%" v-if="detailInfo.contentType == '2'">
                    <span
                        style="
                            display: inline-block;
                            font-size: 16px;
                            margin-top: 20px;
                        "
                        >视频:</span
                    >
                    <LivePlayer
                        :videoUrl="detailInfo.mediaUrl"
                        autoplay
                        :muted="false"
                    ></LivePlayer>
                </div>
            </div>
        </commonModal>
    </div>
</template>

<script>
import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import LivePlayer from "@liveqing/liveplayer";
import commonModal from "@/views/common-components/common-modal.vue";
import commonLivePlayer from "@/views/common-components/common-live-player.vue";

import * as echarts from "echarts";
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";

import countTo from "vue-count-to";

export default {
    name: "VillageScreen",
    components: {
        MainTitle,
        vueSeamlessScroll,
        LivePlayer,
        countTo,
        commonModal,
        commonLivePlayer
    },
    data() {
        return {
            title: "示范村信息服务",
            detailModal: false,
            detailInfo: {},
            areaCode: window.$localStorage.getItem("areaCode"),
            videoUrl: "",
            startVal: 0,
            baseInfoList: [],
            baseIconList: [
                {
                    icon: require("@/assets/xczl/xczl-icon1.png"),
                },
                {
                    icon: require("@/assets/xczl/gdmj-icon.png"),
                },
                {
                    icon: require("@/assets/xczl/zhs-icon.png"),
                },
                {
                    icon: require("@/assets/xczl/zrk-icon.png"),
                },
                {
                    icon: require("@/assets/xczl/hjrk-icon.png"),
                },
                {
                    icon: require("@/assets/xczl/czrk-icon.png"),
                },
                {
                    icon: require("@/assets/xczl/rjnsr-icon.png"),
                },
            ],
            swNumList: [
                {
                    icon: require("@/assets/largeScreen/dwgk.png"),
                    name: "党务公开",
                    number: 0,
                },
                {
                    icon: require("@/assets/largeScreen/cunwgk.png"),
                    name: "村务公开",
                    number: 0,
                },
                {
                    icon: require("@/assets/largeScreen/caiwgk.png"),
                    name: "财务公开",
                    number: 0,
                },
            ],
            alarmInfoList: [
                {
                    icon: require("@/assets/largeScreen/ycl.png"),
                    color: "green",
                    name: "已办理(项)",
                    number: "0",
                },
                {
                    icon: require("@/assets/largeScreen/wcl.png"),
                    color: "red",
                    name: "未办理(项)",
                    number: "0",
                },
            ],
            leaderList: [],
            baseInfo: {
                specialtyCatering: "0",
                featuredHomestays: "0",
                scenicSpots: "0",
            },
            newContentList: [],
            leaderOption: {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 3, // 开始无缝滚动的数据量 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)
            },
            contentOption: {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
            urlType: "0",
            imgIndex: 0
        };
    },
    computed: {},
    created() {
        let query = this.$route.query;
        if (query) {
            this.areaCode = query.areaCode;
            this.title = query.areaName + "信息服务";
        }
    },
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.getThreeOpenInfo();
        // 获取基本信息
        this.initDataInfo("villageBaseInfo", (data) => {
            this.baseInfoList = data.map((item, index) => {
                item.icon = this.baseIconList[index].icon;
                return item;
            });
        });
        // 获取产业发展
        this.initDataInfo("villageDevlopment", (data) => {
            if (data && data.length > 0) {
                this.baseInfo.specialtyCatering = data[0].value;
                this.baseInfo.featuredHomestays = data[1].value;
                this.baseInfo.scenicSpots = data[2].value;
            }
        });
        // 获取人员结构
        this.initDataInfo("villagePerson", (data) => {
            if (data && data.length > 0) {
                let xdata = data.map((item) => item.label);
                let ydata = data.map((item) => Number(item.value));
                this.initChart3(xdata, ydata);
            }
        });
        // 获取特殊人群
        this.initDataInfo("villagePersonSpecial", (data) => {
            if (data && data.length > 0) {
                let xdata = data.map((item) => item.label);
                let ydata = data.map((item) => {
                    return {
                        name: item.label,
                        value: Number(item.value),
                    };
                });
                let total = 0;
                data.forEach((item) => {
                    total += Number(item.value);
                });
                this.initChart4(xdata, ydata, total);
            }
        });
        this.getEventNum();
        this.queryLeaderInfo();
        this.queryContentInfo();
        this.queryVideoInfo()
    },
    beforeDestroy() {
        echartsClear();
    },
    methods: {
        getVillOpen() {
            let xdata = ["2024-07", "2024-08", "2024-09"];
            let ydata1 = [10, 12, 11];
            let ydata2 = [10, 12, 11];
            let ydata3 = [10, 12, 11];
            this.initChart2(xdata, ydata1, ydata2, ydata3);
        },
        getPersonData() {
            let xdata = ["0-6岁", "7-17岁", "18-45岁", "46-59岁", "60岁及以上"];
            let ydata = [100, 110, 200, 400, 300];
            this.initChart3(xdata, ydata);
        },
        getSpecialPerson() {
            let data = [
                {
                    name: "优抚对象",
                    value: 337,
                },
                {
                    name: "城市地保人员",
                    value: 121,
                },
                {
                    name: "特困人员",
                    value: 280,
                },
                {
                    name: "一级残疾",
                    value: 213,
                },
                {
                    name: "低保人员",
                    value: 1077,
                },
                {
                    name: "二级残疾",
                    value: 391,
                },
            ];
            this.initChart4(data);
        },
        initChart2(xdata, ydata1, ydata2, ydata3) {
            let myChart = echarts.init(document.getElementById("chart2"));
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                grid: {
                    left: "2%",
                    right: "4%",
                    bottom: "4%",
                    top: "16%",
                    containLabel: true,
                },
                legend: {
                    data: ["党务", "财务", "村务"],
                    right: 1,
                    top: 1,
                    textStyle: {
                        color: "#99A8BD",
                        fontSize: 12,
                    },
                    itemWidth: 14,
                    itemHeight: 10,
                },
                xAxis: {
                    type: "category",
                    data: xdata,
                    axisLine: {
                        lineStyle: {
                            show: false,
                            lineStyle: {
                                color: "#6A989E",
                            },
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            fontFamily: "Microsoft YaHei",
                            color: "#ffffff", // x轴颜色
                            fontWeight: "normal",
                            fontSize: 12,
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    minInterval: 1,
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(135,140,147,1)", //左侧显示线
                            type: "dashed",
                            width: 0.5,
                        },
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: "#ffffff",
                        fontSize: 12,
                    },
                },
                series: [
                    {
                        name: "党务",
                        type: "bar",
                        barWidth: "14",
                        itemStyle: {
                            normal: {
                                opacity: 0.7,
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "blue",
                                        },
                                        {
                                            offset: 1,
                                            color: "#7EC0EE",
                                        },
                                    ]
                                ),
                                barBorderRadius: 0,
                            },
                        },
                        label: {
                            show: false,
                            position: ["-18", "-18"],
                            color: "#00f8ff",
                            fontSize: 12,
                        },
                        data: ydata1,
                    },
                    {
                        name: "财务",
                        type: "bar",
                        barWidth: "14",
                        itemStyle: {
                            normal: {
                                opacity: 0.7,
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#FF2246",
                                        },
                                        {
                                            offset: 1,
                                            color: "#FFC0CB",
                                        },
                                    ]
                                ),
                                barBorderRadius: 0,
                            },
                        },
                        label: {
                            show: false,
                            position: ["18", "-18"],
                            color: "#00f8ff",
                            fontSize: 12,
                        },
                        data: ydata2,
                    },
                    {
                        name: "村务",
                        type: "bar",
                        barWidth: "14",
                        itemStyle: {
                            normal: {
                                opacity: 0.7,
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#efbe0a",
                                        },
                                        {
                                            offset: 1,
                                            color: "#fff9c0",
                                        },
                                    ]
                                ),
                                barBorderRadius: 0,
                            },
                        },
                        data: ydata3,
                    },
                ],
            };
            myChart.setOption(option);
            echartsFocus(myChart, xdata.length);
        },
        initChart3(xdata, ydata) {
            let myChart = echarts.init(document.getElementById("chart3"));
            let option = {
                color: ["#3398DB"],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                    formatter: function (params) {
                        return (
                            params[0].axisValue +
                            "<br/>人数：" +
                            params[0].data +
                            "人"
                        );
                    },
                },
                grid: {
                    left: "2%",
                    right: "5%",
                    bottom: "5%",
                    top: "7%",
                    containLabel: true,
                    z: 22,
                },
                xAxis: [
                    {
                        type: "value",
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(135,140,147,0.8)", //左侧显示线
                                type: "dashed",
                                width: 0.5,
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            color: "#ffffff",
                        },
                    },
                ],
                yAxis: {
                    type: "category",
                    gridIndex: 0,
                    data: xdata,
                    inverse: true,
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#ffffff",
                        formatter: "{value}",
                    },
                },
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        barWidth: "12",
                        itemStyle: {
                            normal: {
                                barBorderRadius: 30,
                                color: new echarts.graphic.LinearGradient(
                                    1,
                                    0,
                                    0,
                                    0,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(35, 165, 255, 1)",
                                        },
                                        {
                                            offset: 0.5,
                                            color: "rgba(35, 165, 255, 0.8)",
                                        },
                                        {
                                            offset: 1,
                                            color: "transparent",
                                        },
                                    ]
                                ),
                            },
                        },
                        data: ydata,
                    },
                ],
            };
            myChart.setOption(option);
            echartsFocus(myChart, xdata.length);
        },
        initChart4(xdata, ydata, total) {
            let myChart = echarts.init(document.getElementById("chart4"));
            let option = {
                tooltip: {
                    trigger: "item",
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                    },
                },
                title: {
                    text: total + "人",
                    subtext: "总计",
                    textAlign: "center",
                    textVerticalAlign: "center",
                    x: "50%",
                    y: "55%",
                    textStyle: {
                        color: "#fff",
                        fontSize: 26,
                        fontWeight: "normal",
                    },
                    subtextStyle: {
                        color: "#99A8BD",
                        fontSize: 20,
                        fontWeight: "normal",
                        align: "center",
                    },
                },
                legend: {
                    show: true,
                    textStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    icon: "circle",
                    top: "5%",
                    itemGap: 15,
                    data: xdata,
                },
                series: [
                    {
                        type: "pie",
                        center: ["50%", "60%"],
                        radius: ["50%", "65%"],
                        hoverAnimation: false,
                        color: [
                            "#FEE449",
                            "#00FFFF",
                            "#00FFA8",
                            "#9F17FF",
                            "#FFE400",
                            "#F76F01",
                            "#01A4F7",
                            "#FE2C8A",
                        ],
                        label: {
                            show: false,
                        },
                        data: ydata,
                    },
                    {
                        type: "pie",
                        center: ["50%", "60%"],
                        radius: ["43%", "45%"],
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "人数",
                                itemStyle: {
                                    normal: {
                                        color: {
                                            x: 0,
                                            y: 0,
                                            x2: 1,
                                            y2: 0,
                                            type: "linear",
                                            global: false,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: "#9F17FF",
                                                },
                                                {
                                                    offset: 0.2,
                                                    color: "#01A4F7",
                                                },
                                                {
                                                    offset: 0.5,
                                                    color: "#FE2C8A",
                                                },
                                                {
                                                    offset: 0.8,
                                                    color: "#FEE449",
                                                },
                                                {
                                                    offset: 1,
                                                    color: "#00FFA8",
                                                },
                                            ],
                                        },
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            myChart.setOption(option);
            echartsFocus(myChart, xdata.length);
        },
        // 获取三务公开统计图数据
        getThreeOpenInfo() {
            let params = {
                areaCode: this.areaCode,
                monthLength: 3,
                typeCodeList: ["PARTY", "WEALTH", "OUTDOOR"],
            };
            this.$http
                .post(
                    "content/getContentNumberByType",
                    this.common.request(params)
                )
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data;
                        if (data && data.length > 0) {
                            this.getThreeOpenNumber(data);
                        }
                        this.renderChartData(data);
                    }
                });
        },
        getThreeOpenNumber(data) {
            if (data) {
                data.forEach((monthData) => {
                    if (monthData.list && monthData.list.length > 0) {
                        monthData.list.forEach((item) => {
                            if (item.typeCode == "PARTY") {
                                this.swNumList[0].number += parseInt(
                                    item.number
                                );
                            } else if (item.typeCode == "WEALTH") {
                                this.swNumList[1].number += parseInt(
                                    item.number
                                );
                            } else if (item.typeCode == "OUTDOOR") {
                                this.swNumList[2].number += parseInt(
                                    item.number
                                );
                            }
                        });
                    }
                });
            }
        },
        renderChartData(data) {
            if (data) {
                let xdata = new Array(data.length).fill(""),
                    ydata1 = new Array(data.length).fill(0),
                    ydata2 = new Array(data.length).fill(0),
                    ydata3 = new Array(data.length).fill(0);
                for (let i = 0; i < data.length; i++) {
                    let item = data[i];
                    xdata[i] = item.name;
                    for (
                        let dataIndex = 0;
                        dataIndex < item.list.length;
                        dataIndex++
                    ) {
                        let dataItem = item.list[dataIndex];
                        if ("PARTY" == dataItem.typeCode) {
                            ydata1[i] = dataItem.number ? dataItem.number : 0;
                        } else if ("WEALTH" == dataItem.typeCode) {
                            ydata2[i] = dataItem.number ? dataItem.number : 0;
                        } else if ("OUTDOOR" == dataItem.typeCode) {
                            ydata3[i] = dataItem.number ? dataItem.number : 0;
                        }
                    }
                }
                this.initChart2(xdata, ydata1, ydata2, ydata3);
            }
        },
        getEventNum() {
            let params = {
                areaCode: this.areaCode,
                tagType: "event"
            };
            this.$http
                .post("event/getHandleNum", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data;
                        if (data) {
                            this.alarmInfoList[0].number = data.handleNum;
                            this.alarmInfoList[1].number = data.unHandleNum;
                        }
                    }
                });
        },
        // 获取数据
        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);
                    }
                });
        },
        // 查询领导班子信息
        queryLeaderInfo() {
            let params = {
                areaCode: this.areaCode,
                page: 1,
                pageSize: 10,
            };
            this.$http
                .post(
                    "/screen/queryLeaderInfoPage",
                    this.common.request(params)
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        this.leaderList = res.data.data.records;
                    } else {
                        this.$Message.error("查询领导班子数据有误");
                    }
                });
        },
        queryContentInfo() {
            this.$http
                .post(
                    "/content/queryContentInfo",
                    this.common.request({
                        areaCode: this.areaCode,
                        hasParent: "0",
                        page: 1,
                        typeCode: "VILLAGEINFO",
                        pageSize: 100,
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        this.newContentList = res.data.data.records;
                    }
                });
        },
        openContent(e) {
            if (e.target.className != "list-item") return;
            let index = e.target.dataset.obj;
            let data = this.newContentList[index];
            if (data.contentType == "3") {
                this.common.openWindow(data);
            } else {
                this.detailInfo = data;
                this.detailModal = true;
            }
        },
        // 获取视频数据
        queryVideoInfo() {
            let params = {
                areaCode: this.areaCode,
                type: "village",
                state: "0",
            };
            this.$http
                .post("screen/getScreenVideoList", this.common.request(params))
                .then((res) => {
                    if (res.data.code === 200) {
                        let data = res.data.data;
                        if (data && data.length > 0) {
                            let item = data[0];
                            if (item.urlType == 1) {
                                this.videoUrl = JSON.parse(item.urlList);
                                this.urlType = item.urlType;
                            } else {
                                this.videoUrl = item.urlList;
                                this.urlType = item.urlType;
                            }
                        } else {
                            this.$Message.warning("视频信息暂未配置");
                        }
                    } else {
                        this.$Message.error("查询视频信息有误");
                    }
                });
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/pbStyle.less";
.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%;

    .main {
        width: 1820px;
        height: 920px;
        position: fixed;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: space-between;

        .left-box {
            width: 458px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .content-one {
                width: 100%;
                height: 388px;
                .content-info {
                    .content-pub-style(100%, calc(100% - 42px));
                    padding: 10px;
                    display: grid;
                    grid-template-columns: repeat(2, 49%);
                    gap: 10px 2%;
                    grid-template-rows: repeat(auto-fill, 70px);

                    .base-item {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        padding: 0 10px;
                        flex-direction: row;
                        align-items: center;

                        .base-data-box {
                            margin-left: 5px;
                            flex: 1;
                            color: #fff;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            .base-data-title {
                                font-size: 16px;
                                line-height: 22px;
                            }

                            .base-data-text {
                                font-size: 22px;
                                line-height: 29px;
                                text-shadow: 0px 0px 4px #33c2ff;
                                font-weight: 400;
                            }
                        }
                    }
                }
            }
            .content-two {
                width: 100%;
                height: 532px;
                .content-info {
                    .content-pub-style(100%, calc(100% - 42px));
                    padding: 10px;
                    display: flex;
                    flex-direction: column;
                    .data-item-box {
                        width: 33%;
                        height: 70px;
                        display: flex;
                        flex-direction: row;
                        padding: 5px;
                        color: #ffffff;

                        .data-item-icon {
                            height: 70px;
                            padding-top: 7px;
                        }

                        .data-item-desc {
                            margin-left: 5px;

                            .data-item-title {
                                font-size: 14px;
                                line-height: 30px;
                            }

                            .data-item-number {
                                font-size: 26px;
                                line-height: 40px;
                                color: #ffd15c;
                                font-family: Furore;
                            }
                        }
                    }

                    .mini-title-box {
                        display: flex;
                        flex-direction: row;
                        height: 24px;
                        margin-top: 10px;

                        .point {
                            width: 8px;
                            height: 8px;
                            margin-top: 8px;
                            border-radius: 4px;
                            background: linear-gradient(
                                90deg,
                                #01ffff 0%,
                                #01a4ff 100%
                            );
                            box-shadow: 0px 0px 2px #1e85ff;
                        }

                        .title-text {
                            margin-left: 8px;
                            font-size: 18px;
                            line-height: 24px;
                            font-family: YouSheBiaoTiHei;
                            color: #ffffff;
                        }
                    }
                    .alarm-info-box {
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        margin-top: 5px;
                        padding: 0 10px;

                        .alarm-item {
                            width: 180px;
                            height: 60px;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;

                            .alarm-data-box {
                                margin-left: 5px;
                                width: 240px;
                                height: 60px;

                                .alarm-data-title {
                                    margin-top: 3px;
                                    font-size: 14px;
                                    line-height: 22px;
                                    letter-spacing: 1px;
                                }

                                .alarm-data-text {
                                    font-size: 20px;
                                    line-height: 29px;
                                    text-shadow: 0px 0px 4px #33c2ff;
                                    font-weight: 400;
                                    color: #ffffff;
                                }
                            }
                        }
                    }

                    .chart2 {
                        margin-top: 10px;
                        flex: 1;
                    }
                }
            }
        }
        .center-box {
            width: 880px;
            height: 100%;
            display: flex;
            flex-direction: column;

            .video-box {
                width: 880px;
            }
            .center-bottom {
                flex: 1;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 100%;
                column-gap: 10px;

                .center-bottom-box {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;

                    .content-info {
                        .content-pub-style(100%, calc(100% - 42px));
                    }
                }
            }
        }
        .right-box {
            width: 458px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .content-three {
                width: 100%;
                height: 194px;
                .content-info {
                    .content-pub-style(100%, calc(100% - 42px));
                    padding: 10px;
                    .data-item {
                        margin-right: 20px;
                        width: 170px;
                        height: 126px;
                        display: flex;

                        img {
                            height: 100%;
                            width: 90px;
                        }
                        .info-box {
                            margin-left: 5px;
                            height: 100%;
                            color: #ffffff;
                            font-size: 14px;
                            display: flex;
                            flex-direction: column;
                        }
                    }
                }
            }
            .content-four {
                width: 100%;
                height: 194px;
                .content-info {
                    .content-pub-style(100%, calc(100% - 42px));
                    padding: 10px 20px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .info-item {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        .item-value {
                            font-family: "YouSheBiaoTiHei";
                            font-style: normal;
                            font-weight: 400;
                            font-size: 24px;

                            background: linear-gradient(
                                180deg,
                                #ecf4fe 100%,
                                #5982b5 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            text-fill-color: transparent;
                        }

                        .item-name {
                            font-family: "YouSheBiaoTiHei";
                            font-style: normal;
                            font-weight: 400;
                            font-size: 14px;

                            background: linear-gradient(
                                180deg,
                                #ecf4fe 100%,
                                #5982b5 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            text-fill-color: transparent;
                        }
                    }
                }
            }
            .content-five {
                width: 100%;
                height: 532px;
                .content-info {
                    .content-pub-style(100%, calc(100% - 42px));
                    padding: 10px;

                    .list-item {
                        width: 100%;
                        height: 100px;
                        margin-bottom: 10px;
                        display: flex;

                        img {
                            width: 160px;
                            height: 100px;
                            border-radius: 5px;
                            pointer-events: none;
                        }

                        .info-box {
                            flex: 1;
                            margin-left: 15px;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            pointer-events: none;
                            color: #ffffff;

                            .title {
                                pointer-events: none;
                                font-size: 16px;
                            }
                            .time {
                                pointer-events: none;
                                font-size: 14px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
