<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">
          <el-col :span="6">
            <datav-card title="审计整改结果" sub-title="已整改问题数/查出问题数">


              <el-scrollbar height="350px">
                <datav-chart-bar
                    :size="small"
                    :data="data1"
                    unit="%"
                    remark-font-size="12px"
                    spanClass="right-aligned"
                    :color="colors"

                />
              </el-scrollbar>


            </datav-card>


            <datav-card title="审计查出问题" style="height: 500px">
              <v-charts
                  style="height: 300px"
                  :option="option22"
                  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="462"
                  title="审计单位/项目"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="79224.59"
                  :title="`审计总金额\n（万元）`"
                  :isDecimal="true"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="3544.01"
                  :title="`审减金额\n（万元）`"
                  :isDecimal="true"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="1192"
                  title="查出问题数"
                  style="width: 20%"
              />
              <datav-statistic
                  :value="389"
                  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="审计项目类型">

              <datav-tabs>
                <datav-tab-item label="政府投资审计" name="1">
                  <div class="mb-40">
                    <v-charts
                        style="height: 300px"
                        :option="option2"
                        autoresize
                    />
                  </div>
                </datav-tab-item>
                <datav-tab-item label="专项审计" name="2">
                  <div class="mb-40">
                    <v-charts
                        style="height: 300px"
                        :option="option3"
                        autoresize
                    />
                  </div>
                </datav-tab-item>
                <datav-tab-item label="经济责任审计" name="3">
                  <div class="mb-40">
                    <v-charts
                        style="height: 300px"
                        :option="option4"
                        autoresize
                    />
                  </div>
                </datav-tab-item>
              </datav-tabs>

            </datav-card>
            <datav-card title="审计工作动态">

              <el-scrollbar height="470px">
                <div class="message">
                  <div class="message-title">工作简报</div>
                  <div class="message-content">
                    为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。
                  </div>
                  <div class="message-footer flex end">
                    <span>2024-09-27 10:32</span>
                  </div>
                </div>
                <div class="message" type="warning">
                  <div class="message-title">工作简报</div>
                  <div class="message-content">
                    为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试
                  </div>
                  <div class="message-footer flex end">
                    <span>2024-09-06 16:23</span>
                  </div>
                </div>
                <div class="message" type="success">
                  <div class="message-title">工作简报</div>
                  <div class="message-content">
                    为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。
                  </div>
                  <div class="message-footer flex end">
                    <span>2024-07-15 14:39</span>
                  </div>
                </div>
                <div class="message" type="success">
                  <div class="message-title">工作简报</div>
                  <div class="message-content">
                    为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。
                  </div>
                  <div class="message-footer flex end">
                    <span>2024-06-06 09:04</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";


let gobalTempMapVoList = [
  {
    "name": "天心分局",
    "reviewOrg": 0,
    "checkPro": 0,
    "rushPro": 0,
    "changed": 0
  },
  {
    "name": "开福分局",
    "reviewOrg": 0,
    "checkPro": 186,
    "rushPro": 0,
    "changed": 137
  },
  {
    "name": "岳麓分局",
    "reviewOrg": 0,
    "checkPro": 11,
    "rushPro": 0,
    "changed": 0
  },
  {
    "name": "望城分局",
    "reviewOrg": 0,
    "checkPro": 0,
    "rushPro": 0,
    "changed": 0
  },
  {
    "name": "浏阳市局",
    "reviewOrg": 0,
    "checkPro": 0,
    "rushPro": 0,
    "changed": 0
  },
  {
    "name": "长沙县局",
    "reviewOrg": 0,
    "checkPro": 0,
    "rushPro": 0,
    "changed": 0
  },
  {
    "name": "芙蓉分局",
    "reviewOrg": 0,
    "checkPro": 1,
    "rushPro": 0,
    "changed": 1
  },
  {
    "name": "雨花分局",
    "reviewOrg": 0,
    "checkPro": 240,
    "rushPro": 0,
    "changed": 220
  },
  {
    "name": "宁乡市局",
    "reviewOrg": 0,
    "checkPro": 232,
    "rushPro": 194,
    "changed": 194
  }

];

echarts.registerMap("changsha", changshaMap);
const option = ref({
  geo: {
    map: "changsha",

  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      console.log(params)
      const dataItem = gobalTempMapVoList.find(item => item.name.includes(params.name.substring(0, 2)));
      if (dataItem) {
        return `
        <div class="tooltip">
          <div class="tooltip-title">${dataItem.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>审计单位/项目数<span>暂无</span></li>
              <li>查出问题数 <span>${dataItem.checkPro}</span></li>
              <li>追责问责数 <span>暂无</span></li>
              <li>整改问题数 <span>${dataItem.changed}</span></li>
            </ul>
          </div>
        </div>`;
      } else {
        return `<div class="tooltip">
          <div class="tooltip-title">${dataItem.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul"">
              <li>审计单位/项目 <span>0</span></li>
              <li>查出问题数 <span>0</span></li>
              <li>追责问责数 <span>0</span></li>
            </ul>
          </div>
        </div>`;
      }
    },
  },
  visualMap: {
    type: "piecewise",
    bottom: 10,
    pieces: [
      {min: 0, max: 500, label: "问题数低于500"}, {min: 501, max: 1000, label: "问题数介于500-1000"}, {
        min: 1001,
        label: "问题数高于1000"
      },
    ],
    right: 10,
    realtime: false,
    orient: "horizontal",
    textStyle: {
      color: "#fff",
    },
    calculable: true,
    inRange: {
      color: ["#4987F6", "#F6A149", "#D34343",],
    },
  },
  series: [
    {
      name: "长沙",
      type: "map",
      map: "changsha",
      hoverAnimation: true,
      label: {
        show: true,
        color: "white",
      },
      itemStyle: {
        normal: {
          areaColor: "#02215E",
          borderColor: "#1773c3",
        },
      },
      emphasis: {
        areaColor: "#FFD700", // 高亮时区域颜色
        borderColor: "#FF0000", // 高亮时边框颜色
        borderWidth: 4 // 高亮时边框宽度
      },
      data: [],
    }
  ],
})

const option1 = ref({
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月",],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  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: [0, 0, 4, 45, 16, 1, 436, 687, 3, 0, 0],
    },
  ],
});

const data1 = [
  {
    label: "芙蓉分局",
    value: "100",
    rate: "100",
    numerator: "1",
    denominator: "1",
  },
  {
    label: "雨花分局",
    value: "91",
    rate: "91",
    numerator: "220",
    denominator: 240,
  },
  {
    label: "高新分局",
    value: 90,
    rate: 90,
    numerator: 140,
    denominator: 155,
  },
  {
    label: "宁乡市局",
    value: 83,
    rate: 83,
    numerator: 194,
    denominator: 232,
  },
  {
    label: "开福分局",
    value: 73,
    rate: 73,
    numerator: 137,
    denominator: 186,
  },
  {
    label: "开福分局",
    value: 73,
    rate: 73,
    numerator: 137,
    denominator: 186,
  },
  {
    label: "岳麓分局",
    value: 0,
    numerator: 0,
    rate: 0,
    denominator: 11,
  },
];
// setTimeout(() => {
//   data1.values().forEach((item) => {
//     console.log(item.label);
//   });
// }, 1000);

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: 23, name: "项目未按规定立项"},
        {value: 21, name: "未按规定或批准的采购方式进行采购"},
        {value: 6, name: "未按规定程序办理立项手续"},
        {value: 2, name: "涉嫌项目拆分"},
        {value: 2, name: "项目开始是实施或完成后补签合同"},
        {value: 1, name: "未严格履行立项手续"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};

const option3 = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 321, name: "提取、查封、扣押、冻结、处置涉案财物不规范"},
        {value: 249, name: "法律文书填制不规范"},
        {value: 215, name: "未上缴或未及时上缴涉案资金"},
        {value: 190, name: "随身财务登记、保管、处置不规范"},
        {value: 88, name: "执法活动财务管理制度不健全、管理责任不落实"},
        {value: 55, name: "未按规定退还保证金"},
        {value: 13, name: "涉案财务保管场所设施配备不规范"},
        {value: 6, name: "随身财务登记、保管、处置不规范"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};


const option4 = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 8, name: "法律文书填写不规范"},
        {value: 3, name: "提取、查封、扣押、冻结、处置涉案财物不规范"},
        {value: 1, name: "\"三公经费\"预算执行及公开不符合规定"},
        {value: 1, name: "随身财务登记、保管、处置不规范"},
        {value: 1, name: "未按规定退还保证金"},
        {value: 1, name: "未上缴或未及时上缴涉案资金"},
        {value: 1, name: "无预算采购"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};


const option5 = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 143, name: "工程"},
        {value: 78, name: "信息化"},
        {value: 176, name: "服务"},
        {value: 21, name: "购物"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};


const option22 = {
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      label: {
        color: "#fff",
      },
      data: [
        {value: 55, name: "政府投资审计"},
        {value: 1137, name: "专项审计"},
        {value: 16, name: "经济责任审计"},
      ],
    },
  ],
  tooltip: {
    trigger: "item",
  },
};


const colors = [
  {
    // 绿色
    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
    percentage: 90,
  },
  {
    // 黄色
    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
    percentage: 80,
  },
  {

    // 红色
    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
    percentage: 70,
  },
];

</script>


<style lang="scss" scoped>
@import "@/style/datav.scss";

:deep() {
  // 弹框整体
  .tooltip {
    position: relative;
    width: 169.88px;
    height: 155px;
    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
    border: 1px solid #4E8FFF;
    margin: -10px -10px -10px -10px;
  }

  //浏阳市局
  .tooltip-title {
    width: 169.88px;
    height: 43px;
    background: linear-gradient(180deg, rgba(1, 4, 87, 0.8) 0%, rgba(3, 21, 119, 0.8) 100%);
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    text-align: center; /* 水平居中 */
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 22px;
    border-bottom: 1px solid #253755; /* 设置下边框 */
  }


  .tooltip-content {
    width: 170px;
    height: 106px;
    //font-size: 11px;
    margin-top: -12px;
    background: linear-gradient(180deg, #010457 0%, #031577 100%);
  }

  .tooltip-content ul {
    list-style-type: none; /* 移除默认的小圆点 */
    padding: 0;

  }

  .tooltip-content ul li {
    margin-left: 5px;
    height: 25px;
    color: #597AE9;
    font-size: 13px;
  }


  // 数字的span
  .tooltip-ul span {
    float: right;
    width: 50px;
    text-align: right;
    margin-right: 15px;
    color: #fff;
    font-size: 13px;
  }


  /* 小尖角 */
  .tooltip::before {
    content: '';
    position: absolute;
    top: 90px; /* 调整尖角的垂直位置 */
    left: -10px; /* 调整尖角的水平位置 */
    width: 0;
    height: 0;
    //border-top: 10px solid red; /* 顶边颜色 */
    //border-bottom: 10px solid green; /* 底边颜色 */
    //border-right: 10px solid blue; /* 右边颜色，与背景颜色相同 */
  }


}


.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>



