<template>
    <el-scrollbar height="100vh">
        <div class="wrapper">
            <datav-header />
            <main>
                <el-row :gutter="16">
                    <el-col :span="6">
                        <datav-card title="审计整改结果">
                            <datav-chart-bar
                                sub-title="查出问题数/已整改问题数"
                                :data="data1"
                                size="large"
                            />
                            <div class="flex tab-title flex center mt-20" style="margin-bottom: 20px">
                                <div class="tab-title-item active">
                                    分县市局
                                </div>
                                <div class="tab-title-item">局属单位</div>
                            </div>
                        </datav-card>
                        <datav-card title="涉及查出问题">
                            <v-charts
                                style="height: 300px"
                                :option="option2"
                                autoresize
                            />
                        </datav-card>
                    </el-col>
                    <el-col :span="12">
                        <div class="datav-col">
                            <label for="">统计周期：</label>
                            <span>2024年01月01日 - 2024年08月30日</span>
                        </div>
                        <div class="flex gap-42">
                            <datav-statistic
                                :value="86"
                                title="审计单位/项目"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="437"
                                :title="`审计总金额\n（万元）`"
                                :isDecimal="true"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="54"
                                :title="`审减金额\n（万元）`"
                                :isDecimal="true"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="21"
                                title="查出问题数"
                                style="width: 20%"
                            />
                            <datav-statistic
                                :value="10"
                                title="追责问责数"
                                style="width: 20%"
                            />
                        </div>
                        <v-charts
                            style="height: 450px"
                            :option="option"
                            autoresize
                        />
                        <datav-card title="审计项目趋势">
                            <v-charts
                                style="height: 300px"
                                :option="option1"
                                autoresize
                            />
                        </datav-card>
                    </el-col>
                    <el-col :span="6">
                        <datav-card title="审计项目类型">
                            <v-charts
                                style="height: 300px"
                                :option="option3"
                                autoresize
                            />
                        </datav-card>
                        <datav-card title="审计工作动态">
                            
                            <el-scrollbar height="400px">
                                <div class="message">
                                    <div class="message-title">工作部署</div>
                                    <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                                    <div class="message-footer flex end">
                                        <span>2024-09-18 18:00:13</span>
                                    </div>
                                </div>
                                <div class="message" type="warning">
                                    <div class="message-title" >督察通报</div>
                                    <div class="message-content">自20**年**月**日起，对****同志担任****单位****职务期间的经济责任履行情况进行审计，必要时，将追溯至相关年度或延伸审计有关单位。</div>
                                    <div class="message-footer flex end">
                                        <span>2024-09-18 18:00:13</span>
                                    </div>
                                </div>
                                <div class="message" type="success">
                                    <div class="message-title" >工作简报</div>
                                    <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                                    <div class="message-footer flex end">
                                        <span>2024-09-18 18:00:13</span>
                                    </div>
                                </div>
                                <div class="message">
                                    <div class="message-title">工作部署</div>
                                    <div class="message-content">关于报送2024年第二季度贯彻落实防止干预司法“三个规定”进展情况的通知。</div>
                                    <div class="message-footer flex end">
                                        <span>2024-09-18 18:00:13</span>
                                    </div>
                                </div>
                            </el-scrollbar>
                        </datav-card>
                    </el-col>
                </el-row>
            </main>
        </div>
    </el-scrollbar>
</template>
<script setup>
import vCharts from "vue-echarts";
import changshaMap from "@/assets/data/changsha.json";
import * as echarts from "echarts/core";

echarts.registerMap("changsha", changshaMap);
const option = {
    geo: {
        // 是上面注册时的名字哦，registerMap（'名字保持一致'）
        map: "changsha",
    },

    visualMap: {
        type: "piecewise",
        bottom: 10,
        pieces: [
            { gte: 85, lte: 100, label: "整改率低于75%" },
            { gte: 65, lte: 85, label: "整改率高于85%" },
            { gte: 0, lte: 65, label: "整改率高于95%" },
        ],
        right: 10, // 右边距
        realtime: false,
        orient: "horizontal", // 水平显示
        textStyle: {
            color: "#fff", // 文字颜色
        },
        calculable: true,
        inRange: {
            color: ["#D34343", "#F6A149", "#4987F6"],
        },
    },
    series: [
        {
            name: "长沙",
            type: "map",
            map: "changsha",
            hoverAnimation: true,

            label: {
                show: true,
                color: "white",
            },
            itemStyle: {
                normal: {
                    areaColor: "#02215E", // 这里将地图区域的颜色修改为红色
                },
            },
        },
    ],
};

const option1 = ref({
    xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
            "9/10",
            "9/11",
            "9/12",
            "9/13",
            "9/14",
            "9/15",
            "9/16",
            "9/17",
            "9/18",
            "9/19",
            "9/20",
            "9/21",
            "9/22",
            "9/23",
        ],
    },
    yAxis: {
        type: "value",
        splitLine: {
            show: true,
            lineStyle: {
                color: "#193775",
            },
        }
    },
    series: [
        {
            type: "line",
            smooth: true,
            label: {
                show: false
            },
            lineStyle: {
                color: "#28E6FF",
                width: 4,
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(40,230,255,0.47)", // 渐变起始颜色
                    },
                    {
                        offset: 1,
                        color: "rgba(40,230,255,0)", // 渐变结束颜色
                    },
                ]),
            },
            data: [
                2000, 1160, 2310, 3000, 3100, 3100, 3100, 2000, 1160, 2310,
                3000, 3100, 3100, 3100,
            ],
        },
    ],
});

const data1 = [
    {
        name: "天心分局",
        value: 100,
        unit: "%",
        numerator: 4,
        denominator: 4,
    },
    {
        name: "开福分局",
        value: 100,
        unit: "%",
        numerator: 3,
        denominator: 3,
    },
    {
        name: "芙蓉分局",
        value: 100,
        unit: "%",
        numerator: 3,
        denominator: 3,
    },
    {
        name: "岳麓分局",
        value: 100,
        unit: "%",
        numerator: 2,
        denominator: 2,
    },
    {
        name: "雨花分局",
        value: 100,
        unit: "%",
        numerator: 2,
        denominator: 2,
    },
    {
        name: "望城分局",
        value: 50,
        unit: "%",
        numerator: 1,
        denominator: 2,
    },
    {
        name: "浏阳市局",
        value: 50,
        unit: "%",
        numerator: 1,
        denominator: 2,
    },
    {
        name: "长沙县局",
        value: 50,
        unit: "%",
        numerator: 1,
        denominator: 2,
    },
];

const data2 = [
    {
        name: "开福分局",
        value: 9700
    },
    {
        name: "芙蓉分局",
        value: 9021
    },
    {
        name: "岳麓分局",
        value: 8512
    },
    {
        name: "雨花分局",
        value: 8021
    },
    {
        name: "望城分局",
        value: 7111
    },
    {
        name: "浏阳市局",
        value: 6622
    },
    {
        name: "长沙县局",
        value: 6221
    },
];

const option2 = {
    series: [
        {
            type: "pie",
            radius: ["40%", "70%"],
            label: {
                color: "#fff",
            },
            data: [
                { value: 311, name: "其他" },
                { value: 735, name: "预算编制不科学" },
                { value: 580, name: "违规调整预算" },
                { value: 484, name: "预算执行率不高" },
                { value: 300, name: "会计基础工作薄弱" },
            ],
        },
    ],
  tooltip: {
    trigger: "item",
  },
};

const option3 = {
    series: [
        {
            type: "pie",
            radius: ["40%", "70%"],
            label: {
                color: "#fff",
            },
            data: [
                { value: 311, name: "信息化类" },
                { value: 735, name: "工程类" },
                { value: 580, name: "货物类" },
                { value: 484, name: "服务类" }
            ],
        },
    ],
  tooltip: {
    trigger: "item",
  },
};
</script>
<style lang="scss" scoped>
@import "@/style/datav.scss";
.message {
    padding: 10px;
    margin-bottom: 10px;
    background: linear-gradient( 270deg, rgba(16,151,255,0.1) 0%, rgba(0,55,236,0.87) 100%);
    &[type=warning] {
        background: linear-gradient( 270deg, rgba(255,190,16,0.1) 0%, rgba(236,84,0,0.87) 100%);
    }
    &[type=success] {
        background: linear-gradient( 270deg, rgba(91,216,9,0.14) 0%, #28813D 100%);
    }
    .message-title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .message-content {
        margin-bottom: 10px;
    }
}
</style>