<template>
  <el-scrollbar height="100vh">
    <div class="wrapper">
      <datav-header/>
      <main>
        <el-row :gutter="16">

          <el-col :span="6">
            <datav-card title="日常督察情况">

              <datav-tabs
                  v-model="activeOrgTab"
                  type="bottom-button"
              >
                <datav-tab-item label="派出所" name="1">
                  <el-row class="mb-32">
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ fxsjRankOverview.proTotal }}
                        </div>
                        <div class="descriptions_label">
                          问题数
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ fxsjRankOverview.changing }}
                        </div>
                        <div class="descriptions_label">
                          整改中
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ fxsjRankOverview.changed }}
                        </div>
                        <div class="descriptions_label">
                          已整改
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ fxsjRankOverview.correctionRate }}%
                        </div>
                        <div class="descriptions_label">
                          整改率
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-scrollbar height="350px">
                    <datav-chart-bar
                        :data="fxsjChangedRankList"
                        :size="small"
                        title="整改率排名"
                        sub-title="已整改/问题数"
                        unit="%"
                        :label-width="110"
                    />
                  </el-scrollbar>
                </datav-tab-item>
                <datav-tab-item label="大队" name="2">
                  <el-row class="mb-32">
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ jsdwRankOverview.proTotal }}
                        </div>
                        <div class="descriptions_label">
                          问题数
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ jsdwRankOverview.changing }}
                        </div>
                        <div class="descriptions_label">
                          整改中
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ jsdwRankOverview.changed }}
                        </div>
                        <div class="descriptions_label">
                          已整改
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="6">
                      <div class="descriptions_cell text-center">
                        <div class="descriptions_content">
                          {{ jsdwRankOverview.correctionRate }}%
                        </div>
                        <div class="descriptions_label">
                          整改率
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <el-scrollbar height="350px">
                    <datav-chart-bar
                        :data="jsdwChangedRankList"
                        :size="small"
                        title="整改率排名"
                        sub-title="已整改/问题数"
                        unit="%"
                        :label-width="110"
                    />
                  </el-scrollbar>
                </datav-tab-item>
              </datav-tabs>


            </datav-card>


            <datav-card title="问题类型占比">
              <v-charts
                  style="height: 310px"
                  :option="wtlxPieOption"
                  autoresize
              />
            </datav-card>
          </el-col>

          <el-col :span="12">
            <datav-date-picker v-model="time"/>
            <div class="flex gap-42">
              <datav-statistic
                  :value="overview.supervisionNotifyTotal"
                  title="通报问题数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyChangingTotal"
                  title="整改中"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyChangedTotal"
                  title="已整改"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyOrgTotal"
                  title="涉及单位数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.supervisionNotifyPreTotal"
                  title="涉及人数"
                  style="width: 16.66%"
              />
              <datav-statistic
                  :value="overview.correctionRate"
                  value-unit="%"
                  title="整改率"
                  style="width: 16.66%"
              />
            </div>
            <v-charts
                style="height: 450px"
                :option="option"
                autoresize
                ref="subOneSceneInspMapChart"
            />
            <datav-card title="问题趋势">
              <v-charts
                  style="height: 280px"
                  :option="proTrend"
                  autoresize
              />
              <div class="gobal-dropdown-container">
                <el-dropdown class="test" @command="handleCommand">
                    <span class="el-dropdown-link my-gobal-yearselect">
                     {{ selectedYear + " 年" }}
                    </span>
                  <template #dropdown>
                    <el-dropdown-menu style="width: 90px">
                      <el-dropdown-item v-for="year in years" :key="year" :command="year">{{ year + " 年" }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </datav-card>
          </el-col>

          <el-col :span="6">
            <datav-card>
              <datav-tabs v-model="activeTabRight" size="small">
                <datav-tab-item label="黄赌毒" name="1">
                  <datav-tabs
                      type="bottom-button">
                    <datav-tab-item label="派出所" name="1">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjYellowBetOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjYellowBetOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjYellowBetOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjYellowBetOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="fxsjYellowBetRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                            :label-width="110"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                    <datav-tab-item label="大队" name="2">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwYellowBetOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwYellowBetOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwYellowBetOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwYellowBetOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="jsdwYellowBetRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                            :label-width="110"
                        />
                      </el-scrollbar>
                    </datav-tab-item>

                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="枪支管理" name="2">
                  <datav-tabs
                      type="bottom-button">
                    <datav-tab-item label="派出所" name="1">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjGunControllerOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjGunControllerOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjGunControllerOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjGunControllerOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="fxsjGunControllerRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                    <datav-tab-item label="大队" name="2">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwGunControllerOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwGunControllerOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwGunControllerOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwGunControllerOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="jsdwGunControllerRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>

                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="涉企问题" name="3">
                  <datav-tabs
                      type="bottom-button">
                    <datav-tab-item label="派出所" name="1">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCompanyProblemOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCompanyProblemOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCompanyProblemOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCompanyProblemOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="fxsjCompanyProblemRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                    <datav-tab-item label="大队" name="2">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCompanyProblemOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCompanyProblemOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCompanyProblemOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCompanyProblemOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="jsdwCompanyProblemRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>

                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="执法办案" name="4">
                  <datav-tabs
                      type="bottom-button">
                    <datav-tab-item label="派出所" name="1">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjHandleCaseOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjHandleCaseOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjHandleCaseOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjHandleCaseOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="fxsjHandleCaseRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                    <datav-tab-item label="大队" name="2">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwHandleCaseOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwHandleCaseOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwHandleCaseOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwHandleCaseOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="jsdwHandleCaseRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>

                  </datav-tabs>
                </datav-tab-item>
                <datav-tab-item label="工作日测酒" name="5">
                  <datav-tabs
                      type="bottom-button">
                    <datav-tab-item label="派出所" name="1">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCheckBeerOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCheckBeerOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCheckBeerOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ fxsjCheckBeerOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="fxsjCheckBeerRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>
                    <datav-tab-item label="大队" name="2">
                      <el-row class="mb-32">
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCheckBeerOverview.proTotal }}
                            </div>
                            <div class="descriptions_label">
                              问题数
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCheckBeerOverview.changing }}
                            </div>
                            <div class="descriptions_label">
                              整改中
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCheckBeerOverview.changed }}
                            </div>
                            <div class="descriptions_label">
                              已整改
                            </div>
                          </div>
                        </el-col>
                        <el-col :span="6">
                          <div class="descriptions_cell text-center">
                            <div class="descriptions_content">
                              {{ jsdwCheckBeerOverview.correctionRate }}%
                            </div>
                            <div class="descriptions_label">
                              整改率
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                      <el-scrollbar height="330px">
                        <datav-chart-bar
                            :data="jsdwCheckBeerRankList"
                            size="large"
                            title="问题数排名"
                            sub-title="问题数"
                            :color="colors"
                        />
                      </el-scrollbar>
                    </datav-tab-item>

                  </datav-tabs>
                </datav-tab-item>
              </datav-tabs>
            </datav-card>


            <datav-card title="督察工作动态">
              <el-scrollbar height="310px">
                <datav-message
                    v-for="(msg, index) in messages"
                    :key="index"
                    :type="msg.type"
                    :title="msg.title"
                    :content="msg.content" :date="msg.date"
                />
              </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";
import moment from "moment";

import {getSubOneStreetMap} from "@/api/screen/subScreen/subOneGlobal.ts";
import {
  getAllSubOneSupervisionNotifyCount,
  getSubOneChangedRank, getSubOneCheckBeer, getSubOneCompanyProblem, getSubOneGunController, getSubOneHandleCase,
  getSubOneProblemTypeRate,
  getSubOneSupervisionTrend, getSubOneYellowBetDrug
} from "@/api/screen/subScreen/subOneSupervisionNotify.ts";


// region 所有变量
const activeTabRight = ref("1")
const overview = ref({
  correctionRate: 0,
  supervisionNotifyPreTotal: 0,
  supervisionNotifyChangingTotal: 0,
  supervisionNotifyChangedTotal: 0,
  supervisionNotifyTotal: 0,
  supervisionNotifyOrgTotal: 0,
});  // 中央数据总览
const fxsjRankOverview = ref({});  // 日常督察总览分县市局
const jsdwRankOverview = ref({});  // 日常督察总览局属单位
const fxsjChangedRankList = ref([]);  // 日常督察问题排行分县市局
const jsdwChangedRankList = ref([]);  // 日常督察问题排行局属单位
const wtlxList = ref([]);  // 问题类型占比

const fxsjYellowBetOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 黄赌毒总览分县市局
const jsdwYellowBetOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 黄赌毒总览局属单位
const fxsjYellowBetRankList = ref([])  // 黄赌毒问题排行分县市局
const jsdwYellowBetRankList = ref([])  // 黄赌毒问题排行局属单位

const fxsjGunControllerOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 枪支管理总览分县市局
const jsdwGunControllerOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 枪支管理总览局属单位
const fxsjGunControllerRankList = ref([])  //  枪支管理排行分县市局
const jsdwGunControllerRankList = ref([])  //  枪支管理排行局属单位

const fxsjCompanyProblemOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 涉企问题总览分县市局
const jsdwCompanyProblemOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 涉企问题局属单位
const fxsjCompanyProblemRankList = ref([])  //  涉企问题排行分县市局
const jsdwCompanyProblemRankList = ref([])  //  涉企问题排行局属单位

const fxsjHandleCaseOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 执法办案总览分县市局
const jsdwHandleCaseOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 执法办案总览局属单位
const fxsjHandleCaseRankList = ref([])  //  执法办案排行分县市局
const jsdwHandleCaseRankList = ref([])  //  执法办案排行局属单位

const fxsjCheckBeerOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 工作日测酒总览分县市局
const jsdwCheckBeerOverview = ref({
  proTotal: 0,
  changing: 0,
  changed: 0,
  correctionRate: 0,
})  // 工作日测酒总览局属单位
const fxsjCheckBeerRankList = ref([])  //  工作日测酒排行分县市局
const jsdwCheckBeerRankList = ref([])  //  工作日测酒排行局属单位

const messages = ref([
  {
    type: '',
    title: '工作简报',
    content: '为强化队伍纪律作风监督，给严打整治“雷霆行动”及即将到来的国庆节安保维稳工作提供强有力的纪律监督保障，9月25日20时至23时，市局警务督察支队安排6个现场督察组，对干部、民警共计119人开展集中酒精吹气测试。',
    date: '2024-09-27 10:32'
  },
  {
    type: 'warning',
    title: '工作简报',
    content: '为持续抓好“六项规定”贯彻执行，扎实做好中秋佳节前队伍纪律作风监督，9月3日20时至22时，市局警务督察支队联合机关党委以及来支队跟班学习的督察专干，组成6个督察组，对干部、民警、辅警共计112人开展集中酒精吹气测试。',
    date: '2024-09-06 16:23'
  },
  {
    type: 'warning',
    title: '工作简报',
    content: '为强化队伍纪律作风监督，给“夏季治安打击整治行动”及党的二十届三中全会安保维稳工作提供强有力地纪律监督保障，7月11日晚，市局警务督察支队联合机关党委，派出6个现场督察组，对干部、民警、辅警共计111人开展集中酒精吹气测试。',
    date: '2024-07-15 14:39'
  },
  {
    type: 'warning',
    title: '工作简报',
    content: '为督促各参战警力切实履职，拧紧责任链条，保障周杰伦演唱会安全顺利进行，根据市局统一部署，2024年5月30日至6月2日，由警务督察支队牵头，统筹参战单位督察力量，对全市公安机关周杰伦演唱会安全保卫工作开展全方位督导检查。',
    date: '2024-06-06 09:04'
  }
]);
const currentYear = new Date().getFullYear();
const years = ref([currentYear.toString(), (currentYear - 1).toString(), (currentYear - 2).toString()]); // 年份列表
const selectedYear = ref('2024'); // 当前选中的年份
const avg = 1000
const subOneSceneInspMapChart = ref(null);  // 地图
const route = useRoute();
const currentDepartId = route.query.departId;

// endregion


// region 所有图表
const wtlxPieOption = computed(() => {
  return {
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        label: {
          color: "#fff",
        },
        data: wtlxList.value,
      },
    ],
  };
});
echarts.registerMap("changsha", changshaMap);
const superviseTempMapVoList = ref([]);
const option = ref({

  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      console.log(params)
      const dataItem = superviseTempMapVoList.value.find(item => item.name.includes(params.name.substring(0, 2)));
      if (dataItem) {
        return `
        <div class="tooltip">
          <div class="tooltip-title">${dataItem.originalName}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul" >
              <li>通报问题数 <span>${dataItem.totalPro}</span></li>
              <li>整改中 <span>${dataItem.changing}</span></li>
              <li>已整改 <span>${dataItem.changed}</span></li>
              <li>涉及单位数 <span>${dataItem.relationOrg}</span></li>
              <li>涉及人数 <span>${dataItem.personNum}</span></li>
              <li>整改率 <span>${dataItem.changedRate}%</span></li>
            </ul>
          </div>
        </div>`;
      } else {
        return `<div class="tooltip">
          <div class="tooltip-title">${params.name}</div>
          <div class="tooltip-content">
            <ul class="tooltip-ul"">
              <li>通报问题数 <span>-</span></li>
              <li>整改中 <span>-</span></li>
              <li>已整改 <span>-</span></li>
              <li>涉及单位数 <span>-</span></li>
              <li>涉及人数 <span>-</span></li>
              <li>整改率 <span>-</span></li>
            </ul>
          </div>
        </div>`;
      }
    },
  },
  visualMap: {
    type: "piecewise",
    bottom: 10,
    pieces: [
      {gte: 0, lte: 200, label: "低于平均问题30%", color: "#4987F6"},
      {gte: 200, lte: 400, label: "平均问题上下浮动30%内", color: "#F6A149"},
      {gte: 400, label: "高于平均问题30%", color: "#D34343"},],
    right: 10,
    realtime: false,
    orient: "horizontal",
    textStyle: {
      color: "#fff",
    },
    calculable: true,
    // inRange: {
    //   color: ['#4987F6', '#F6A149', '#D34343']
    // }
  },

  series: [
    {
      name: "长沙",
      type: "map",
      map: "changsha",
      hoverAnimation: true,
      roam:true,
      label: {
        show: true,
        color: "white",
      },
      itemStyle: {
        normal: {
          areaColor: "#02215E",
          borderColor: "#24D2EE",
          borderWidth: 1 // 高亮时边框宽度
        },
      },
      emphasis: {
        areaColor: "#FFD700", // 高亮时区域颜色
        borderColor: "#FF0000", // 高亮时边框颜色
        borderWidth: 4 // 高亮时边框宽度
      },
      data: []
    }
  ],
})
const proTrend = ref({
  grid: {
    left: '5%', // 图表距离容器左边的距离
    right: '2%', // 图表距离容器右边的距离
    top: '10%', // 图表距离容器上边的距离
    bottom: '20%', // 图表距离容器下边的距离
    containLabel: false // 是否包含坐标轴的标签
  },
  xAxis: {
    type: "category",
    data: [],
    boundaryGap: true,
    axisTick: {
      // 去掉X轴刻度线
      show: false
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      show: true,
      lineStyle: {
        color: "#193775",
      },
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  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: [],
    },
  ],
});
// endregion


const handleCommand = (year) => {
  selectedYear.value = year; // 更新当前选中的年份
  getSupervisionTrend(currentDepartId, year).then(res => {
    const supervisionTrend = res.supervisionTrend;
    const categories = supervisionTrend.map(item => item.name);
    const values = supervisionTrend.map(item => item.value);
    // 更新图表数据
    proTrend.value.xAxis.data = categories;
    proTrend.value.series[0].data = values;
  });
};


// region 所有函数
const getMapJSON = async (currentDepartId) => {
  const res = await getSubOneStreetMap(currentDepartId)
  echarts.registerMap("changsha", res);
  subOneSceneInspMapChart.value.chart.setOption(option.value);
}

const getChangedRank = async(currentDepartId, times)=>{
 const res =  await  getSubOneChangedRank(currentDepartId, times)
  fxsjRankOverview.value = res.fxsjRankOverview;
  jsdwRankOverview.value = res.jsdwRankOverview;
  fxsjChangedRankList.value = res.fxsjChangedRankList;
  jsdwChangedRankList.value = res.jsdwChangedRankList;
  console.log(res);

}

const getProblemTypeRate = async(currentDepartId, times)=>{
  const res =  await  getSubOneProblemTypeRate(currentDepartId, times)
  wtlxList.value = res.wtlxList
  console.log(res);
}

const getSupervisionOverView = async(currentDepartId, times)=>{
  const res =  await  getAllSubOneSupervisionNotifyCount(currentDepartId, times)
  Object.assign(overview.value, {
    correctionRate: Number(res.overview.rectifyRate),
    supervisionNotifyPreTotal: Number(res.overview.personNumber),
    supervisionNotifyChangingTotal: Number(res.overview.rectifingNumber),
    supervisionNotifyChangedTotal: Number(res.overview.rectifedNumber),
    supervisionNotifyTotal: Number(res.overview.problemNumber),
    supervisionNotifyOrgTotal: Number(res.overview.departNumber),
  });
}

const getSupervisionTrend = async(currentDepartId, times)=>{
  const res =  await  getSubOneSupervisionTrend(currentDepartId, times)
  const supervisionTrend = res.supervisionTrend;
  const categories = supervisionTrend.map(item => item.name);
  const values = supervisionTrend.map(item => item.value);
  proTrend.value.xAxis.data = categories;
  proTrend.value.series[0].data = values;
}

const getYellowBetDrugData = async(currentDepartId, times)=>{
  const res =  await getSubOneYellowBetDrug(currentDepartId, times)
  fxsjYellowBetOverview.value = res.fxsjYellowBetOverview
  jsdwYellowBetOverview.value = res.jsdwYellowBetOverview
  fxsjYellowBetRankList.value = res.fxsjYellowBetRankList
  jsdwYellowBetRankList.value = res.jsdwYellowBetRankList
}

const getGunControllerData = async(currentDepartId, times)=>{
  const res =  await getSubOneGunController(currentDepartId, times)
  fxsjGunControllerOverview.value = res.fxsjGunControllerOverview
  jsdwGunControllerOverview.value = res.jsdwGunControllerOverview
  fxsjGunControllerRankList.value = res.fxsjGunControllerRankList
  jsdwGunControllerRankList.value = res.jsdwGunControllerRankList
}

const getCompanyProblemData = async(currentDepartId, times)=>{
  const res =  await getSubOneCompanyProblem(currentDepartId, times)
  fxsjCompanyProblemOverview.value = res.fxsjCompanyProblemOverview
  jsdwCompanyProblemOverview.value = res.jsdwCompanyProblemOverview
  fxsjCompanyProblemRankList.value = res.fxsjCompanyProblemRankList
  jsdwCompanyProblemRankList.value = res.jsdwCompanyProblemRankList
}

const getHandleCaseData = async(currentDepartId, times)=>{
  const res =  await getSubOneHandleCase(currentDepartId, times)
  fxsjHandleCaseOverview.value = res.fxsjHandleCaseOverview
  jsdwHandleCaseOverview.value = res.jsdwHandleCaseOverview
  fxsjHandleCaseRankList.value = res.fxsjHandleCaseRankList
  jsdwHandleCaseRankList.value = res.jsdwHandleCaseRankList
}

const getCheckBeerData = async(currentDepartId, times)=>{
  const res =  await getSubOneCheckBeer(currentDepartId, times)
  fxsjCheckBeerOverview.value = res.fxsjCheckBeerOverview
  jsdwCheckBeerOverview.value = res.jsdwCheckBeerOverview
  fxsjCheckBeerRankList.value = res.fxsjCheckBeerRankList
  jsdwCheckBeerRankList.value = res.jsdwCheckBeerRankList
}
// endregion


// region  初始化数据
const time = ref([
  moment().startOf("year").format("YYYY-MM-DD"),
  moment().format("YYYY-MM-DD"),
]);


const getData = async () => {
  getMapJSON(currentDepartId);
  getChangedRank(currentDepartId, time.value);
  getProblemTypeRate(currentDepartId, time.value);
  getSupervisionOverView(currentDepartId, time.value);
  getSupervisionTrend(currentDepartId, time.value);
  getYellowBetDrugData(currentDepartId, time.value);
  getGunControllerData(currentDepartId, time.value);
  getCompanyProblemData(currentDepartId, time.value);
  getHandleCaseData(currentDepartId, time.value);
  getCheckBeerData(currentDepartId, time.value);
}

watch(time, () => {
  getData();
});


onMounted(() => {
  getData();
});

const colors = [
  {
    color: "linear-gradient( 270deg, #FB002D 0%, #822232 100%)",
    percentage: 80,
  },
  {
    color: "linear-gradient( 270deg, #FFB90E 0%, #71501D 100%)",
    percentage: 60,
  },
  {
    color: "linear-gradient( 270deg, #63E700 0%, #19674C 100%)",
    percentage: 40,
  },
];
// endregion


</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;
  }
}

:deep() {
  // 弹框整体
  .tooltip {
    position: relative;
    width: 160px;
    height: 194px;
    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: 160px;
    height: 43px;
    background: linear-gradient(180deg, #0A2F86 0%, #04154E 100%);
    box-shadow: inset 0px -1px 0px 0px #253755;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    border-bottom: 1px solid #253755; /* 设置下边框 */
  }

  .tooltip-content {
    width: 160px;
    height: 150px;
    background: linear-gradient(180deg, #010457 0%, #031577 100%)
  }

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

  .tooltip-content ul li {
    height: 24px;
    color: #597AE9;
    font-weight: 400;
    font-size: 14px;
  }

  .tooltip-ul span {
    float: right;
    width: 55px;
    color: #fff;
    font-size: 14px;
    text-align: center; /* 水平居中 */
  }

  //.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; /* 右边颜色，与背景颜色相同 */
  //}

}

.test {
  width: 95px;
  height: 25px;
  background: #1C3472;
}

.gobal-dropdown-container {
  position: absolute;
  right: 20px;
  top: 15px;
}

.my-gobal-yearselect {
  font-size: 14px;
  padding-top: 6px;
  padding-left: 20px;
  width: 90px;
  color: #fff;
}


</style>