<template>
  <!-- <div ref="centerBorder"
    class="absolute translate-x-1/2 translate-y-1/2 border-[2px] border-dashed rounded-[0.25rem] border-gray-600">
  </div> -->
  <!-- 右边的弹出窗体 -->
  <nut-popup position="right" v-model:visible="state.show1" :style="{ width: state.width, height: state.height }">
    <button @click="RefreshData" class="w-full bg-red-300">确定</button>
  </nut-popup>

  <!-- <div class="w-full h-screen bg-gradient-to-tr from-green-300 via-cyan-500 to-blue-400"
    :style="{ backgroundColor: basicOptions.backgroundColor }" id="mainContainer"> -->
  <div class="w-full h-screen bg-gradient-to-b from-blue-800 to-gray-800 relative overflow-hidden" id="mainContainer">
    <!-- 科技感背景元素 -->
    <div class="absolute inset-0 w-full h-full overflow-hidden">
      <div
        class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-70">
      </div>
      <div
        class="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-transparent via-cyan-500 to-transparent opacity-70">
      </div>
      <div
        class="absolute top-0 left-0 h-full w-[2px] bg-gradient-to-b from-transparent via-cyan-500 to-transparent opacity-70">
      </div>
      <div
        class="absolute top-0 right-0 h-full w-[2px] bg-gradient-to-b from-transparent via-cyan-500 to-transparent opacity-70">
      </div>
      <!-- 科技感图案 -->
      <div class="absolute top-10 left-10 w-[200px] h-[200px] border-l-2 border-t-2 border-cyan-500 opacity-20"></div>
      <div class="absolute bottom-10 right-10 w-[200px] h-[200px] border-r-2 border-b-2 border-cyan-500 opacity-20">
      </div>
      <div
        class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDQwIDQwIj48ZyBmaWxsPSJub25lIiBzdHJva2U9IiMwYmI3ZmYiIHN0cm9rZS13aWR0aD0iMC4yIiBvcGFjaXR5PSIwLjIiPjxwYXRoIGQ9Ik0yMCAyMCBMMCAyMCBMMCA0MCIvPjxwYXRoIGQ9Ik0yMCAyMCBMNDAgMjAgTDQwIDQwIi8+PHBhdGggZD0iTTIwIDIwIEwwIDIwIEwwIDAiLz48cGF0aCBkPSJNMjAgMjAgTDQwIDIwIEw0MCAwIi8+PC9nPjwvc3ZnPg==')] bg-repeat opacity-5">
      </div>
    </div>
    <!-- 关闭按钮 -->
    <router-link to="/navigation" style="z-index: 100" class="card1">
      <div class="card-icon1">❌</div>
    </router-link>

    <!-- 标题 -->
    <div class="w-full h-[52px]" id="containerTitle">
      <div
        class="flex w-full absolute justify-center flex-col items-center text-4xl py-2 z-10 pt-10 text-white font-bold">
        <div class="relative">
          <span class="text-cyan-500">上海市</span>
          <span class="text-white">食品安全综合指数</span>
          <div
            class="absolute -bottom-2 left-0 w-full h-[3px] bg-gradient-to-r from-transparent via-cyan-500 to-transparent">
          </div>
        </div>
        <!-- <div class="text-xl pt-4">总分数：{{ AllCourse }}分</div> -->
      </div>
    </div>
    <!-- 仪表盘 -->
    <vue-draggable-resizable ref="yibiao1" style="border: none; left: 49%; top: 16.5%; z-index: 999"
      :draggable="draggableBoolean" :resizable="resizableBoolean">
      <div class="flex items-center justify-center w-96 h-48 rounded-md bg-transparent" ref="yibiao"></div>
    </vue-draggable-resizable>

    <!-- 选项 -->
    <div class="w-full absolute flex justify-center pt-12 gap-4 z-20">
      <div
        class="relative bg-transparent backdrop-blur-sm border border-blue-300/50 rounded px-3 py-2 shadow-[0_0_8px_rgba(59,130,246,0.3)]">
        <!-- 新增年份下拉框 -->
        <el-select v-model="yearValue" class="m-1 text-white font-medium bg-transparent" placeholder="年份"
          @change="SelectBlur" style="width: 100px">
          <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <!-- <div
          class="absolute -top-3 left-2 bg-transparent backdrop-blur-sm px-2 text-xs text-blue-300 font-medium border-x border-t border-blue-300/50">
          筛选条件</div> -->
        <el-select v-model="monthValue" class="m-1 text-white font-medium bg-transparent" placeholder="月份"
          @change="SelectBlur" style="width: 100px">
          <el-option v-for="item in monthOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="districtValue" class="m-1 text-white font-medium bg-transparent" placeholder="辖区"
          @change="SelectBlur" style="width: 100px">
          <el-option v-for="item in districtOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select v-model="stageValue" class="m-1 text-white font-medium bg-transparent" placeholder="环节"
          @change="SelectBlur" style="width: 100px">
          <el-option v-for="item in stageOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>

    <!-- 左1 -->
    <vue-draggable-resizable ref="refWoTe1" style="border: none; z-index: 999" :draggable="draggableBoolean"
      :resizable="resizableBoolean">
      <div class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500"
        ref="main1"></div>
    </vue-draggable-resizable>
    <!-- 左2 -->
    <vue-draggable-resizable ref="refWoTe2" style="border: none; z-index: 999" :draggable="draggableBoolean"
      :resizable="resizableBoolean">
      <div class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500"
        ref="main2"></div>
    </vue-draggable-resizable>
    <!-- 左3 -->
    <vue-draggable-resizable ref="refWoTe3" style="border: none; z-index: 999" :draggable="draggableBoolean"
      :resizable="resizableBoolean">
      <div class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500"
        ref="main3"></div>
    </vue-draggable-resizable>

    <!-- 右1 -->
    <vue-draggable-resizable ref="refWoTe4" style="border: none; z-index: 999" :draggable="draggableBoolean"
      :resizable="resizableBoolean">
      <div class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500"
        ref="main4">
        <div class="flex justify-around text-white">
          <div class="p-2 flex flex-col font-semibold items-center">
            <div class="flex flex-row">
              <img src="../../public/image/shiwuzhongdu.png" class="w-8 h-8 rounded-full" />食物中毒控制率
            </div>
            <div>{{ SecondLevelMetricValues.foodPoisoningIncidence }}分</div>
          </div>
          <div class="p-2 flex flex-col font-semibold items-center">
            <div class="flex flex-row">
              <img src="../../public/image/manyidu.png" class="w-8 h-8 rounded-full" />市民满意度
            </div>
            <div>{{ SecondLevelMetricValues.citizenSatisfaction }}分</div>
          </div>
          <div class="p-2 flex flex-col font-semibold items-center">
            <div class="flex flex-row">
              <img src="../../public/image/zhixiaodu.png" class="w-8 h-8 rounded-full" />市民知晓度
            </div>
            <div>{{ SecondLevelMetricValues.citizenAwareness }}分</div>
          </div>
          <!-- <div class="text-xl p-2 flex flex-col font-semibold items-center">
          <div class="flex flex-row">
            <img
              src="../../public/image/qiyerenzhenglv.jpg"
              class="w-8 h-8 rounded-full"
            />企业管理体系认证率
          </div>
          <div>{{ SecondLevelMetricValues.certificationRate }}分</div>
        </div> -->
        </div>
      </div>
    </vue-draggable-resizable>
    <!-- 右2 -->
    <vue-draggable-resizable ref="refWoTe5" style="border: none; z-index: 999;" :draggable="draggableBoolean"
      :resizable="resizableBoolean">
      <div class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500"
        ref="main5">
        <div class="scroll-wrapper" v-if="defaultShow">
          <div class="scroll-header">
            <span class="scroll-header-text">检测项目</span>
            <span class="scroll-header-text">食品小类</span>
            <span class="scroll-header-text">被抽样单位名称</span>
            <span class="scroll-header-text">抽样时间</span>
            <span class="">风险等级</span>
          </div>
          <div class="scroll-container">
            <vue3ScrollSeamless :dataList="scrollData" :classOptions="classOptions">
              <div v-for="(item, index) in scrollData" :key="index">
                <div class="scroll-item">
                  <span class="scroll-item-text">{{ item.xiangmu }}</span>
                  <span class="scroll-item-text">{{ item.xiaolei }}</span>
                  <span class="scroll-item-text">{{ item.danwei }}</span>
                  <span class="scroll-item-text">{{ item.time }}</span>
                  <span class="" style="
                      width: 20px;
                      height: 10px;
                      color: black;
                      text-align: center;
                      margin: 2px 10px 0px 10px;
                    " :style="{ backgroundColor: item.dengji }">-</span>
                </div>
              </div>
            </vue3ScrollSeamless>
          </div>
        </div>

        <swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="50"
          :autoplay="{ delay: 3000, disableOnInteraction: true }" :navigation="navigation"
          :pagination="{ clickable: true }" :scrollbar="{ draggable: false }" class="swiperBox"
          @slideChange="onSlideChange" v-if="!defaultShow" ref="swiperRef" id="swiperBox">
          <swiper-slide v-if="choujianShow">
            <div class="scroll-wrapper">
              <div class="scroll-header-title">首发预警</div>
              <div class="scroll-header">
                <span class="scroll-header-text">检测项目</span>
                <span class="scroll-header-text">食品小类</span>
                <span class="scroll-header-text">被抽样单位名称</span>
                <span class="scroll-header-text">抽样时间</span>
                <span class="">风险等级</span>
              </div>
              <div class="scroll-container">
                <vue3ScrollSeamless :dataList="choujianShoufaData" :classOptions="classOptions">
                  <div v-for="(item, index) in choujianShoufaData" :key="index">
                    <div class="scroll-item">
                      <span class="scroll-item-text">{{ item.xiangmu }}</span>
                      <span class="scroll-item-text">{{ item.xiaolei }}</span>
                      <span class="scroll-item-text">{{ item.danwei }}</span>
                      <span class="scroll-item-text">{{ item.time }}</span>
                      <span class="" style="
                          width: 20px;
                          height: 10px;
                          color: black;
                          text-align: center;
                          margin: 2px 10px 0px 10px;
                        " :style="{ backgroundColor: item.dengji }">-</span>
                    </div>
                  </div>
                </vue3ScrollSeamless>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide v-if="choujianShow">
            <div class="scroll-wrapper">
              <div class="scroll-header-title">高发预警</div>
              <div class="scroll-header">
                <span class="scroll-header-text">检测项目</span>
                <span class="scroll-header-text">食品小类</span>
                <span class="scroll-header-text">抽检件数</span>
                <span class="scroll-header-text">不合格率（%）</span>
                <span class="">风险等级</span>
              </div>
              <div class="scroll-container">
                <vue3ScrollSeamless :dataList="choujianGaofaData" :classOptions="classOptions">
                  <div v-for="(item, index) in choujianGaofaData" :key="index">
                    <div class="scroll-item">
                      <span class="scroll-item-text">{{ item.xiangmu }}</span>
                      <span class="scroll-item-text">{{ item.xiaolei }}</span>
                      <span class="scroll-item-text">{{ item.choujian }}</span>
                      <span class="scroll-item-text">{{ item.buhegelv }}</span>
                      <span class="" style="
                          width: 20px;
                          height: 10px;
                          color: black;
                          text-align: center;
                          margin: 2px 10px 0px 10px;
                        " :style="{ backgroundColor: item.dengji }">-</span>
                    </div>
                  </div>
                </vue3ScrollSeamless>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide v-if="choujianShow">
            <div class="w-full h-full">
              <div ref="main7" style="width: 100%; height: 100%"></div>
            </div>
          </swiper-slide>
          <swiper-slide v-if="tousuShow">
            <div class="scroll-wrapper">
              <div class="scroll-header-title">高发预警</div>
              <div class="scroll-header">
                <span class="scroll-header-text">投诉环节</span>
                <span class="scroll-header-text">投诉问题种类</span>
                <span class="scroll-header-text">投诉率</span>
                <span class="">风险等级</span>
              </div>
              <div class="scroll-container">
                <vue3ScrollSeamless :dataList="jubaoGaofaData" :classOptions="classOptions">
                  <div v-for="(item, index) in jubaoGaofaData" :key="index" @click="handleRowClick(item, index)">
                    <div class="scroll-item">
                      <span class="scroll-item-text">{{ item.huanjie }}</span>
                      <span class="scroll-item-text">{{ item.zhonglei }}</span>
                      <span class="scroll-item-text">{{ item.tousulv }}</span>
                      <span class="" style="
                          width: 20px;
                          height: 10px;
                          color: black;
                          text-align: center;
                          margin: 2px 10px 0px 10px;
                        " :style="{ backgroundColor: item.dengji }">-</span>
                    </div>
                  </div>
                </vue3ScrollSeamless>
              </div>
            </div>
          </swiper-slide>
          <swiper-slide v-if="tousuShow">
            <div class="scroll-wrapper">
              <div class="scroll-header-title">频发预警</div>
              <div class="scroll-header">
                <span class="scroll-header-text">被投诉主体名称</span>
                <span class="scroll-header-text">被投诉产品类别</span>
                <span class="scroll-header-text">抽检合格率</span>
                <span class="scroll-header-text">被投诉问题种类</span>
                <span class="scroll-header-text">被投诉问题数</span>
                <span class="">风险等级</span>
              </div>
              <div class="scroll-container">
                <vue3ScrollSeamless :dataList="jubaoPinfaData" :classOptions="classOptions">
                  <div v-for="(item, index) in jubaoPinfaData" :key="index">
                    <div class="scroll-item">
                      <span class="scroll-item-text">{{ item.zhuti }}</span>
                      <span class="scroll-item-text">{{ item.leibie }}</span>
                      <span class="scroll-item-text">{{ item.hegelv }}</span>
                      <span class="scroll-item-text">{{ item.zhonglei }}</span>
                      <span class="scroll-item-text">{{ item.wentishu }}</span>
                      <span class="" style="
                          width: 20px;
                          height: 10px;
                          color: black;
                          text-align: center;
                          margin: 2px 10px 0px 10px;
                        " :style="{ backgroundColor: item.dengji }">-</span>
                    </div>
                  </div>
                </vue3ScrollSeamless>
              </div>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" @click.stop="prevEl" />
          <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
          <div class="swiper-button-next" @click.stop="nextEl" />
          <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
          <!-- 如果需要滚动条 -->
          <!-- <div class="swiper-scrollbar"></div> -->
        </swiper>

        <div class="scroll-wrapper" v-if="zhifaShow">
          <div class="w-full h-full">
            <div ref="main8" style="width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>
    </vue-draggable-resizable>
    <!-- 右3 -->
    <vue-draggable-resizable ref="refWoTe6" style="border: none; z-index: 999" :draggable="draggableBoolean"
      :resizable="resizableBoolean" v-show="!relationShow && !isAnimating">
      <div
        class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden"
        ref="main6">

      </div>
    </vue-draggable-resizable>
    <!-- 右下角按钮 -->
    <div ref="fancyBtn"
      class=" fixed z-[9999] bottom-10 right-7 px-3 py-1 rounded-full bg-gradient-to-r from-blue-500 via-cyan-400 to-purple-500 shadow-lg text-white font-bold text-lg cursor-pointer transition-all duration-300 ease-in-out hover:scale-110 hover:shadow-2xl active:scale-95 active:brightness-90 ring-2 ring-white/30 ring-offset-2 ring-offset-black backdrop-blur-md overflow-hidden"
      @click="handleFancyClick" style="user-select: none;">
      关联关系图
      <span ref="ripple" class="ripple"></span>
    </div>
    <div
      class="flex items-center justify-center w-96 h-48 border-2 border-dashed rounded border-gray-500 overflow-hidden z-[999] fixed bottom-10 right-7"
      ref="main9" 
      :class="{
        'animate-popup': isAnimating && relationShow,
        'animate-shrink': isAnimating && !relationShow,
        'opacity-0 scale-0': !relationShow && !isAnimating
      }"
      v-show="relationShow || isAnimating"
      style="transform-origin: bottom right;">

    </div>

    <!-- 底部 -->
    <div class="w-full absolute bottom-2 flex justify-center text-white">
      <div class="flex items-center justify-center w-96 h-48" ref="timeline"></div>
    </div>

    <div class="shanghaimap">
      <!-- <EChartsMap /> -->
      <!-- <div id="streetMapEcharts" style="width: 320%; height: 50%;"></div> -->
      <div id="streetMapEcharts" style="width: 100%; height: 100%"></div>
    </div>

    <div id="tooltip" style="
        position: absolute;
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 5px;
        pointer-events: none;
        z-index: 9999;
      " v-show="isTooltipVisible"></div>
  </div>
</template>

<script setup lang="ts">
import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
import "vue-draggable-resizable/dist/VueDraggableResizable.css";
import { onMounted, reactive, ref, watch, onBeforeUnmount, nextTick } from "vue";
import BarShow from "../components/barshow.vue";
import shangHaiJieDao from "../mapjson/shangHaiJieDao.json";
import shangHaiXiaQu from "../mapjson/shanghaiXiaQu.json";
import CnFxJiedao2 from "../mapjson/CnFxJiedao2.json";
import type { GeoJSONSourceInput } from "echarts/types/src/coord/geo/geoTypes";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";

import EChartsMap from "./eChartsMap.vue";

import { Sketch } from "@ans1998/vue3-color";
import {
  getMapLayoutList,
  loadMapOptions,
  removeMapLayout,
  updateMapLayout,
  getDistinguishValue,
  getCheckMonitoringValueStreet,
  getCheckAssessmentValueStreet,
  getIstrativeSanctionValueStreet,
  getComplaintReportValueStreet,
  getInformationTracingValueStreet,
  getLawEnforcementInspectionValueStreet,
  getAllCourse,
  getSecondLevelMetricValues,
  getAllData,
  getStreetAllData,
} from "../api/SettingAPIDaSai";
import Enumerable from "linq";
import { first, reduce } from "lodash";
import { ElMessage } from "element-plus";
import { router } from "../router";
import headMenu from "../components/headMenu.vue";
import * as echarts from "echarts";
import "echarts-wordcloud";
import * as d3 from "d3";

import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/less/navigation";
import "swiper/less/pagination";
import {
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
} from "swiper/modules";

// 新增 API 引入
import { getRelationshipNetwork } from "../api/compositeIndex";

//各个区的值
interface DistinguishValueInterface {
  [key: string]: number;
}

// 新增类型
interface TimelineData {
  timeLabel: string;
  realScores: number[];
  predictScores: number[];
}

// 类型定义
type TimePeriod =
  | "上三个月"
  | "上二个月"
  | "上一个月"
  | "当前月"
  | "下一个月"
  | "下二个月"
  | "下三个月";
type ScoreData = {
  real: number[];
  predict: number[];
};

// 响应式数据
const timelineData = ref<TimelineData[]>([]);
const currentTimeIndex = ref(0);

//改变地图大小
const changeSizeValue = ref(1.15);
//设置地图左右移动
const changePositionX = ref(1.02);
//设置地图上下移动
const changePositionY = ref(30);
//设置16个区是否可以移动
const draggableBoolean = ref(false);
//设置16个区是否可以放大缩小
const resizableBoolean = ref(false);
//总分数
const AllCourse = ref(100);
//tooltip框显示
const isTooltipVisible = ref(false);

//右2图表默认展示
const defaultShow = ref(true);

const classOptions = {
  // 滚动步长
  step: 0.1,
  limitMoveNum: 9,
};
const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar];
const prevEl = () => {
  console.log("上一张");
};
const nextEl = () => {
  console.log("下一张");
};
// 更改当前活动swiper
const onSlideChange = (swiper: any) => {
  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  console.log(swiper.activeIndex, "活动swiper更改");
};

const swiperBoxHeight = ref("300px");

const choujianShow = ref(false);
const tousuShow = ref(false);
const zhifaShow = ref(false);
//
const littlemonth = ref(-1);

// 下拉框"年份"值
const yearValue = ref("2023");
// 下拉框"年份"option
const yearOptions = [
  {
    value: "2021",
    label: "2021",
  },
  {
    value: "2022",
    label: "2022",
  },
  {
    value: "2023",
    label: "2023",
  },
  // 可以根据需要添加更多年份
];

//下拉框"月份"值
const monthValue = ref("4");
// 下拉框"月份"option
const monthOptions = [
  {
    value: "",
    label: "全部",
  },
  {
    value: "1",
    label: "一月",
  },
  {
    value: "2",
    label: "二月",
  },
  {
    value: "3",
    label: "三月",
  },
  {
    value: "4",
    label: "四月",
  },
  {
    value: "5",
    label: "五月",
  },
  // {
  //   value: "6",
  //   label: "六月",
  // }
  // ,
  // {
  //   value: "7",
  //   label: "七月",
  // },
  // {
  //   value: "8",
  //   label: "八月",
  // },
  // {
  //   value: "9",
  //   label: "九月",
  // },
  // {
  //   value: "10",
  //   label: "十月",
  // },
  // {
  //   value: "11",
  //   label: "十一月",
  // },
  // {
  //   value: "12",
  //   label: "十二月",
  // },
];

//下拉框"市区"值
const districtValue = ref("上海市");
//下拉框"市区"option
const districtOptions = [
  {
    value: "上海市",
    label: "上海市",
  },
  {
    value: "奉贤区",
    label: "奉贤区",
  },
  {
    value: "长宁区",
    label: "长宁区",
  },
  {
    value: "黄浦区",
    label: "黄浦区",
  },
  {
    value: "徐汇区",
    label: "徐汇区",
  },
  {
    value: "静安区",
    label: "静安区",
  },
  {
    value: "普陀区",
    label: "普陀区",
  },
  {
    value: "虹口区",
    label: "虹口区",
  },
  // {
  //   value: "杨浦区",
  //   label: "杨浦区",
  // },
  // {
  //   value: "闵行区",
  //   label: "闵行区",
  // },
  // {
  //   value: "宝山区",
  //   label: "宝山区",
  // },
  // {
  //   value: "嘉定区",
  //   label: "嘉定区",
  // },
  // {
  //   value: "浦东新区",
  //   label: "浦东新区",
  // },
  // {
  //   value: "金山区",
  //   label: "金山区",
  // },
  // {
  //   value: "松江区",
  //   label: "松江区",
  // },
  // {
  //   value: "青浦区",
  //   label: "青浦区",
  // },
  // {
  //   value: "崇明区",
  //   label: "崇明区",
  // },
];

// 背景页面颜色：
const webPageBackgroundColor = "#F0F0F0";
//图表颜色
const echartsColorArray = [
  "#5470c6",
  "#91cc75",
  "#fac858",
  "#ee6666",
  "#73c0de",
  "#3ba272",
  "#fc8452",
  "#9a60b4",
  "#ea7ccc",
];
// const echartsColorArray = ['#FF00FF', '#00FF00'];

// 六个表的分数
const checkMonitoringScore = ref(100); //安全抽检（1表）
const checkAssessmentScore = ref(100); //抽查考核（2表）
const istrativeSanctionScore = ref(100); //行政处罚（3表）
const complaintReportScore = ref(100); //投诉举报（4表）
const informationTracingScore = ref(100); //信息追溯（5表）
const lawEnforcementInspectionScore = ref(100); //执法检查（6表）

//六个表的值
const checkMonitoringData = ref(); //安全抽检（1表）
const checkAssessmentPost = ref(); //抽查考核（2表）岗位
const checkAssessmentPassRate = ref(); //抽查考核（2表）合格率
const checkAssessmentNumber = ref(); //抽查考核（2表）考核人次
const istrativeSanctionData = ref(); //行政处罚（3表）
const complaintReportData = ref(); //投诉举报（4表）
const informationTracingCompanyType = ref(); //信息追溯（5表）企业分类名
const informationTracingCompanyTypeValue = ref(); //信息追溯（5表）企业分类值
const lawEnforcementInspectionData = ref(); //执法检查（6表）

// 二级指标的值
const SecondLevelMetricValues = ref({
  foodPoisoningIncidence: 100,
  citizenSatisfaction: 100,
  citizenAwareness: 100,
  certificationRate: 100,
});
// 下拉框"环节"值
const stageValue = ref("");
// 下拉框"环节"option
const stageOptions = [
  {
    value: "",
    label: "全部",
  },
  {
    value: "生产环节",
    label: "生产环节",
  },
  {
    value: "销售环节",
    label: "销售环节",
  },
  {
    value: "餐饮环节",
    label: "餐饮环节",
  },
];
///新增的展示框图界面
const arrStepShow = ref(["", "", "", ""]);

//新增展示框图的颜色数据
const curArrColor = ref();

const arrColorDef = {
  red: [
    "#FEF2F2",
    "#FEE2E2",
    "#FECACA",
    "#FCA5A5",
    "#F87171",
    "#EF4444",
    "#DC2626",
    "#B91C1C",
    "#991B1B",
    "#7F1D1D",
  ],
  green: [
    "#ECFDF5",
    "#D1FAE5",
    "#A7F3D0",
    "#6EE7B7",
    "#34D399",
    "#10B981",
    "#059669",
    "#047857",
    "#065F46",
    "#064E3B",
  ],
  yellow: [
    "#FFFBEB",
    "#FEF3C7",
    "#FDE68A",
    "#FCD34D",
    "#FBBF24",
    "#F59E0B",
    "#D97706",
    "#B45309",
    "#92400E",
    "#78350F",
  ],
  blue: [
    // "#EFF6FF",
    // "#DBEAFE",
    // "#BFDBFE",
    // "#93C5FD",
    "#60A5FA",
    "#3B82F6",
    // "#2563EB",
    "#1D4ED8",
    // "#1E40AF",
    "#1E3A8A",
  ],
  qingxin: [
    "#FFFF99", // 分数段0-25
    "#98FB98", // 分数段25-50
    "#ADD8E6", // 分数段50-75
    "#A52A2A", // 分数段75-100
  ],
};
//赋值测试
curArrColor.value = arrColorDef.blue;

//设置展示框图界面数据
const setStepShow = (min: number, max: number, jiange: number) => {
  arrStepShow.value = [];
  for (let index = 0; index < 4; index++) {
    var strShow =
      (min + jiange * index).toFixed(0) +
      "~" +
      (min + jiange * (index + 1)).toFixed(0);
    arrStepShow.value.push(strShow);
  }
  arrStepShow.value.push((min + jiange * 4).toFixed(0) + "~" + max.toFixed(0));

  //设置显示的颜色,改造成动态的方式
  switch (basicOptions.radioColorType) {
    case "red":
      curArrColor.value = arrColorDef.red;
      break;
    case "yellow":
      curArrColor.value = arrColorDef.yellow;
      break;
    case "blue":
      curArrColor.value = arrColorDef.blue;
      break;
    case "green":
      curArrColor.value = arrColorDef.green;
      break;
    case "qingxin":
      curArrColor.value = arrColorDef.qingxin;
      break;
  }

  // // console.log("间隔数据", arrStepShow);
};

//路由切换部分
// const radio1 = ref('上海地图')
//     const getRouter=(e:any)=>{
//         // console.log('路由',e);
//         if (e==='全国地图') {
//             router.push('/chinamap')
//         }
//     }

//定义每个页面的后台编号
const curId = "1";

//这个页面除了地图之外的统一配置
const basicOptions = reactive({
  backgroundColor: webPageBackgroundColor, //整个界面的背景颜色
  isPresetColorRange: false, //是否是使用自己的设置区间值
  colorRange: ["0", "0", "0", "0", "0", "0", "0", "0", "0"], //自己设计的区间值
  radioColorType: "blue", //地图的色系选择
  barTitle: "各区分数", //柱状图的标题内容
  barTextColor: "", //柱状图的文字颜色
  isSqrt: false, //是否进行开平方的操作
});

//改变背景颜色的功能部分///////////////////////////////////////////////
const showSketch_Background = ref(false);
//const sketchBgColor_Background = ref(0);
//改变背景颜色的设置
const changSketch_Background = () => {
  showSketch_Background.value = !showSketch_Background.value;
};

const changSketchButton_Background = (item: any) => {
  if (item.isOk) {
    // console.log("确定");
    basicOptions.backgroundColor = item.activeColor;
    showSketch_Background.value = false;
  } else {
    // // console.log("取消");
    showSketch_Background.value = false;
  }
};
/////////////////////////////////////////////////////////////////////////////

//改变文字颜色的功能部分///////////////////////////////////////////////
const showSketch_barTextColor = ref(false);
//const sketchBgColor_barTextColor = ref(0);
//改变文字颜色的设置
const changSketch_barTextColor = () => {
  showSketch_barTextColor.value = !showSketch_barTextColor.value;
};

const changSketchButton_barTextColor = (item: any) => {
  if (item.isOk) {
    // console.log("确定");
    basicOptions.barTextColor = item.activeColor;
    showSketch_barTextColor.value = false;
  } else {
    // console.log("取消");
    showSketch_barTextColor.value = false;
  }
};
/////////////////////////////////////////////////////////////////////////////

const state = reactive({
  show1: false,
  width: "30%",
  height: "100%",
});
const openDrawer = () => {
  state.show1 = true;
};

//const internalInstance = getCurrentInstance()
//颜色色系设置
//const radioColorType = ref("red");

const curMax = ref(0);

//所有的拖拉框
// 崇明区
const refChongMing = ref(null);
// 浦东新区
const refPuDong = ref(null);
// 宝山区
const refBaoShan = ref(null);
// 嘉定区
const refJiaDing = ref(null);
// 青浦区
const refQingPu = ref(null);
// 金山区
const refJinShan = ref(null);
// 奉贤区
const refFengXian = ref(null);
// 松江区
const refSongJiang = ref(null);
// 闵行区
const refMinHang = ref(null);
// 徐汇区
const refXuHui = ref(null);
// 长宁区
const refChangNing = ref(null);
// 普陀区
const refPuTuo = ref(null);
// 静安区
const refJingAn = ref(null);
// 虹口区
const refHongKou = ref(null);
// 黄浦区
const refHuangPu = ref(null);
// 杨浦区
const refYangPu = ref(null);

//柱状图
const refBar = ref(null);
// 颜色图例
const refColorLegend = ref(null);
//食品大类表格
const refWoTe1 = ref(null);
const refWoTe2 = ref(null);
const refWoTe3 = ref(null);
const refWoTe4 = ref(null);
const refWoTe5 = ref(null);
const refWoTe6 = ref(null);
const yibiao1 = ref(null);

//设置动态样式颜色的值
// 崇明区
const colorChongMing = ref(null);
// 浦东新区
const colorPuDong = ref(null);
// 宝山区
const colorBaoShan = ref(null);
// 嘉定区
const colorJiaDing = ref(null);
// 青浦区
const colorQingPu = ref(null);
// 金山区
const colorJinShan = ref(null);
// 奉贤区
const colorFengXian = ref(null);
// 松江区
const colorSongJiang = ref(null);
// 闵行区
const colorMinHang = ref(null);
// 徐汇区
const colorXuHui = ref(null);
// 长宁区
const colorChangNing = ref(null);
// 普陀区
const colorPuTuo = ref(null);
// 静安区
const colorJingAn = ref(null);
// 虹口区
const colorHongKou = ref(null);
// 黄浦区
const colorHuangPu = ref(null);
// 杨浦区
const colorYangPu = ref(null);

// 柱状图
const colorBar = ref(null);

let chartRelationship: echarts.ECharts | null = null; // 需要保持图表实例引用

//const curColorType=ref("red")
//所有的拖拉框的位置参数
const curLayout = reactive({
  ChongMing: { value: "0", color: "fill-red-100" },
  PuDong: { value: "0", color: "fill-red-100" },
  BaoShan: { value: "0", color: "fill-red-100" },
  JiaDing: { value: "0", color: "fill-red-100" },
  QingPu: { value: "0", color: "fill-red-100" },
  JinShan: { value: "0", color: "fill-red-100" },
  FengXian: { value: "0", color: "fill-red-100" },
  SongJiang: { value: "0", color: "fill-red-100" },
  MinHang: { value: "0", color: "fill-red-100" },
  XuHui: { value: "0", color: "fill-red-100" },
  ChangNing: { value: "0", color: "fill-red-100" },
  PuTuo: { value: "0", color: "fill-red-100" },
  JingAn: { value: "0", color: "fill-red-100" },
  HongKou: { value: "0", color: "fill-red-100" },
  HuangPu: { value: "0", color: "fill-red-100" },
  YangPu: { value: "0", color: "fill-red-100" },
  Bar: { value: "0", color: "fill-red-100" },
  Options: {},
  ColorLegend: {},
  WoTe1: {},
  WoTe2: {},
  WoTe3: {},
  WoTe4: {},
  WoTe5: {},
  WoTe6: {},
});

//当前的颜色赋值的数组
const curArrayColor: any = ref([]);

//浏览器可视页面宽度
const windowWidth = ref(1920);
//浏览器可视页面高度
const windowHeight = ref(960);

// 保存配置的结果

const btnLoad = () => {
  setLayout(refWoTe1.value! as any, curLayout["WoTe1"]);
  setLayout(refWoTe2.value! as any, curLayout["WoTe2"]);
  setLayout(refWoTe3.value! as any, curLayout["WoTe3"]);
  setLayout(refWoTe4.value! as any, curLayout["WoTe4"]);
  setLayout(refWoTe5.value! as any, curLayout["WoTe5"]);
  setLayout(refWoTe6.value! as any, curLayout["WoTe6"]);
};

//位子重置
const btnLoadJson = (
  distinguishValue:
    | DistinguishValueInterface
    | { name: string; value: number }[]
) => {
  console.log("位置重置");
  console.log("windowWidth.value", windowWidth.value);
  console.log("windowHeight.value", windowHeight.value);

  //把保存的信息放在这里
  //1920 960
  const dJson = {
    Bar: {
      left: windowWidth.value / 3.5, //432,
      top: windowHeight.value / 8, //80,
      width: 90, //81,
      // //  height: windowHeight.value/6.62,//145,
      value: "0",
      color: "fill-red-100",
    },
  };
  curLayout.Bar = dJson.Bar;
  console.log("dJson", dJson);

  btnLoad();
};

//获取界面位置的方法
const getLayout = (refObj: any) => {
  return {
    left: refObj.left,
    top: refObj.top,
    width: refObj.width,
    height: refObj.height,
    value: "0",
    color: "fill-red-100",
  };
};
//设置界面位置
const setLayout = (refObj: any, Pos: any) => {
  // console.log("d显示布局", refObj, "-------", Pos);
  refObj.left = Pos.left;
  refObj.top = Pos.top;
  refObj.width = Pos.width;
  refObj.height = Pos.height;
};

//设置文字通用颜色
const textStyle = ref("font-xs");

//设置当前的颜色分隔值
const GetColorValue = (curvalue: number) => {
  // console.log(curvalue);

  //先从整体里面获取总数值，然后进行开发
  let arrValue: Array<{ id: string; value: any }> = new Array<{
    id: string;
    value: any;
  }>();
  arrValue.push({ id: "ChongMing", value: curLayout.ChongMing.value });
  arrValue.push({ id: "PuDong", value: curLayout.PuDong.value });
  arrValue.push({ id: "BaoShan", value: curLayout.BaoShan.value });
  arrValue.push({ id: "JiaDing", value: curLayout.JiaDing.value });
  arrValue.push({ id: "QingPu", value: curLayout.QingPu.value });
  arrValue.push({ id: "JinShan", value: curLayout.JinShan.value });
  arrValue.push({ id: "FengXian", value: curLayout.FengXian.value });
  arrValue.push({ id: "SongJiang", value: curLayout.SongJiang.value });
  arrValue.push({ id: "MinHang", value: curLayout.MinHang.value });
  arrValue.push({ id: "XuHui", value: curLayout.XuHui.value });
  arrValue.push({ id: "ChangNing", value: curLayout.ChangNing.value });
  arrValue.push({ id: "PuTuo", value: curLayout.PuTuo.value });
  arrValue.push({ id: "JingAn", value: curLayout.JingAn.value });
  arrValue.push({ id: "HongKou", value: curLayout.HongKou.value });
  arrValue.push({ id: "HuangPu", value: curLayout.HuangPu.value });
  arrValue.push({ id: "YangPu", value: curLayout.YangPu.value });

  // console.log("新生成数据值", arrValue);

  //定义一个目前使用的中间值进行整体的判断操作

  //下面进行改造，考虑是使用覆盖模式还是使用当前的平均值模式：

  //首先要判断是不是使用均方差，是均方差，需要使用

  if (basicOptions.isSqrt == true) {
    // console.log("开方之前的值", curvalue);
    curvalue = Math.sqrt(curvalue);
    // console.log("开方之后的值", curvalue);
  }

  let max = 0;
  let min = 60;
  let intJianGe = 0;

  if (basicOptions.isPresetColorRange == true) {
    //就从新生成的数组里面找到位置
    for (let index = 0; index <= 10; index++) {
      // const element = array[index];

      // console.log(
      //   "色彩区间",
      //   index,
      //   curvalue,
      //   basicOptions.colorRange[index],
      //   basicOptions.colorRange[index + 1]
      // );

      if (
        curvalue > parseFloat(basicOptions.colorRange[index]) &&
        curvalue <= parseFloat(basicOptions.colorRange[index + 1])
      ) {
        return index + 1;
      }
    }
    return 0;
  } else {
    // arrValue.map()
    max = arrValue.reduce(function (prev, cur) {
      return Math.max(prev, cur.value!);
    }, 0);
    // min = arrValue.reduce(function (prev, cur) {
    //   return Math.min(prev, cur.value!);
    // }, 0);
    min = arrValue.reduce((prev, cur) => Math.min(prev, cur.value), Infinity);
    //最大和最小的平均分割
    intJianGe = (max - min) / 4;

    // console.log("计算结果", max, min, intJianGe);

    //增加的间隔计算结果方法
    setStepShow(min, max, intJianGe);

    curMax.value = max;

    for (let index = 1; index <= 9; index++) {
      //const element = array[index];
      if (intJianGe * index + min >= curvalue) {
        return index;
      }
    }
    return 1;
  }
};

const changeClass = (refObj: any, index: number) => {
  // console.log(index);

  switch (index) {
    case 1:
      if (basicOptions.radioColorType == "red") refObj.value = "fill-red-400";
      if (basicOptions.radioColorType == "yellow")
        refObj.value = "fill-yellow-400";
      if (basicOptions.radioColorType == "blue") refObj.value = "fill-blue-400";
      if (basicOptions.radioColorType == "green")
        refObj.value = "fill-green-400";
      if (basicOptions.radioColorType == "qingxin")
        refObj.value = "fill-yellow-200";
      break;
    case 2:
      if (basicOptions.radioColorType == "red") refObj.value = "fill-red-500";
      if (basicOptions.radioColorType == "yellow")
        refObj.value = "fill-yellow-500";
      if (basicOptions.radioColorType == "blue") refObj.value = "fill-blue-500";
      if (basicOptions.radioColorType == "green")
        refObj.value = "fill-green-500";
      if (basicOptions.radioColorType == "qingxin")
        refObj.value = "fill-green-200";
      break;
    case 3:
      if (basicOptions.radioColorType == "red") refObj.value = "fill-red-700";
      if (basicOptions.radioColorType == "yellow")
        refObj.value = "fill-yellow-700";
      if (basicOptions.radioColorType == "blue") refObj.value = "fill-blue-700";
      if (basicOptions.radioColorType == "green")
        refObj.value = "fill-green-700";
      if (basicOptions.radioColorType == "qingxin")
        refObj.value = "fill-sky-200";
      break;
    case 4:
      if (basicOptions.radioColorType == "red") refObj.value = "fill-red-900";
      if (basicOptions.radioColorType == "yellow")
        refObj.value = "fill-yellow-900";
      if (basicOptions.radioColorType == "blue") refObj.value = "fill-blue-900";
      if (basicOptions.radioColorType == "green")
        refObj.value = "fill-green-900";
      if (basicOptions.radioColorType == "qingxin")
        refObj.value = "fill-red-800";
      break;
    default:
      break;
  }
};

//检测覆盖设置的数据
const checkArray = () => {
  var cArr = basicOptions.colorRange;
  // console.log("cArr", cArr);

  for (let index = 1; index < cArr.length; index++) {
    // console.log("arr1,arr2", cArr[index - 1], cArr[index]);

    if (parseFloat(cArr[index]) < parseFloat(cArr[index - 1])) {
      return false;
    }
  }
  return true;
};

//刷新页面数据
const RefreshData = () => {
  ///GetColor("杨浦")
  // var aa=GetColorValue(curLayout.YangPu.value)
  // // console.log('杨浦数据',aa);
  //colorYangPu.value=aa.toString()
  //colorYangPu.value="fill-red-100"

  //// console.log('崇明信息',GetColorValue(curLayout.ChongMing.value));

  //如果发现需要覆盖现有的参数逻辑，需要进行整个数组的叠加的增加趋势判断才行，所以需要一个函数方法；
  var aa = checkArray();
  if (basicOptions.isPresetColorRange == true) {
    // console.log("开始识别");
    if (checkArray() === false) {
      ElMessage({
        type: "success",
        message: "覆盖的数据结构配置不正确，需要按照从小到大的状态进行设置",
      });
      return false;
    }
  }
  // console.log(curLayout.ChongMing.value, "-------------------------");

  changeClass(
    colorChongMing,
    GetColorValue(parseFloat(curLayout.ChongMing.value))
  );
  changeClass(colorPuDong, GetColorValue(parseFloat(curLayout.PuDong.value)));
  changeClass(colorBaoShan, GetColorValue(parseFloat(curLayout.BaoShan.value)));
  changeClass(colorJiaDing, GetColorValue(parseFloat(curLayout.JiaDing.value)));
  changeClass(colorQingPu, GetColorValue(parseFloat(curLayout.QingPu.value)));
  changeClass(colorJinShan, GetColorValue(parseFloat(curLayout.JinShan.value)));
  changeClass(
    colorFengXian,
    GetColorValue(parseFloat(curLayout.FengXian.value))
  );
  changeClass(
    colorSongJiang,
    GetColorValue(parseFloat(curLayout.SongJiang.value))
  );
  changeClass(colorMinHang, GetColorValue(parseFloat(curLayout.MinHang.value)));
  changeClass(colorXuHui, GetColorValue(parseFloat(curLayout.XuHui.value)));
  changeClass(
    colorChangNing,
    GetColorValue(parseFloat(curLayout.ChangNing.value))
  );
  changeClass(colorPuTuo, GetColorValue(parseFloat(curLayout.PuTuo.value)));
  changeClass(colorJingAn, GetColorValue(parseFloat(curLayout.JingAn.value)));
  changeClass(colorHongKou, GetColorValue(parseFloat(curLayout.HongKou.value)));
  changeClass(colorHuangPu, GetColorValue(parseFloat(curLayout.HuangPu.value)));
  changeClass(colorYangPu, GetColorValue(parseFloat(curLayout.YangPu.value)));

  const curArrayColorTemp = [];
  //生成新的颜色数组
  curArrayColorTemp.push({
    name: "崇明",
    value: curLayout.ChongMing.value,
    color: colorChongMing.value!,
  });
  curArrayColorTemp.push({
    name: "浦东",
    value: curLayout.PuDong.value,
    color: colorPuDong.value!,
  });
  curArrayColorTemp.push({
    name: "宝山",
    value: curLayout.BaoShan.value,
    color: colorBaoShan.value!,
  });
  curArrayColorTemp.push({
    name: "嘉定",
    value: curLayout.JiaDing.value,
    color: colorJiaDing.value!,
  });
  curArrayColorTemp.push({
    name: "青浦",
    value: curLayout.QingPu.value,
    color: colorQingPu.value!,
  });
  curArrayColorTemp.push({
    name: "金山",
    value: curLayout.JinShan.value,
    color: colorJinShan.value!,
  });
  curArrayColorTemp.push({
    name: "奉贤",
    value: curLayout.FengXian.value,
    color: colorFengXian.value!,
  });
  curArrayColorTemp.push({
    name: "松江",
    value: curLayout.SongJiang.value,
    color: colorSongJiang.value!,
  });
  curArrayColorTemp.push({
    name: "闵行",
    value: curLayout.MinHang.value,
    color: colorMinHang.value!,
  });
  curArrayColorTemp.push({
    name: "徐汇",
    value: curLayout.XuHui.value,
    color: colorXuHui.value!,
  });
  curArrayColorTemp.push({
    name: "长宁",
    value: curLayout.ChangNing.value,
    color: colorChangNing.value!,
  });
  curArrayColorTemp.push({
    name: "普陀",
    value: curLayout.PuTuo.value,
    color: colorPuTuo.value!,
  });
  curArrayColorTemp.push({
    name: "静安",
    value: curLayout.JingAn.value,
    color: colorJingAn.value!,
  });
  curArrayColorTemp.push({
    name: "虹口",
    value: curLayout.HongKou.value,
    color: colorHongKou.value!,
  });
  curArrayColorTemp.push({
    name: "黄浦",
    value: curLayout.HuangPu.value,
    color: colorHuangPu.value!,
  });
  curArrayColorTemp.push({
    name: "杨浦",
    value: curLayout.YangPu.value,
    color: colorYangPu.value!,
  });

  // streetScore
  //由大到小排序
  // curArrayColor.value = curArrayColorTemp.sort((a, b) => {
  //   if (parseFloat(a.value!) > parseFloat(b.value!)) {
  //     return -1;
  //   }
  //   if (parseFloat(a.value!) < parseFloat(b.value!)) {
  //     return 1;
  //   }
  //   return 0;
  // });
  curArrayColor.value = streetScore.sort((a, b) => {
    if (a.value! > b.value!) {
      return -1;
    }
    if (a.value! < b.value!) {
      return 1;
    }
    return 0;
  });

  // console.log("curArrayColor", curArrayColor.value);
};

//RefreshData();
let main1 = ref();
let main2 = ref();
let main3 = ref();
let main4 = ref();
let main5 = ref();
let main6 = ref();
let main7 = ref();
let main8 = ref();
let main9 = ref();

const relationShow = ref(false);
const isAnimating = ref(false);

let swiperRef = ref();
let timeline = ref();
let yibiao = ref();
let centerBorder = ref();
let bottomBorder = ref();

let zhifaEchartsTootipIndex = 0;

type EChartsOption = echarts.EChartsOption;

const echarts1 = () => {
  var myChart = echarts.init(main1.value);
  var option: EChartsOption;

  option = {
    title: [
      {
        text: "抽检监测  {score|" + checkMonitoringScore.value + "}  分",
        left: "center",
        right: "center",
        top: "5%",
        textStyle: {
          color: "#00eaff", // 科技感的荧光蓝
          fontSize: 18,
          rich: {
            score: {
              fontSize: 28,
              color: "#1890ff",
              fontWeight: "bold",
              textShadowColor: "gray", // 阴影颜色
              textShadowBlur: 5, // 阴影模糊程度
              textShadowOffsetX: 1, // 阴影水平偏移
              textShadowOffsetY: 2, // 阴影垂直偏移
            },
          },
        },
      },
      {
        text: "主\n要\n问\n题",
        textStyle: {
          fontSize: 14,
          fontWeight: "bold",
          color: "#ffffff",
        },
        textAlign: "left",
        textBaseline: "middle",
        top: "50%",
      },
    ],

    tooltip: {
      trigger: "item",
      textStyle: {
        color: "#00eaff",
      },
      formatter: function (params: any) {
        const buhege = params.value.toFixed(1);
        // 自定义 tooltip 内容
        return `
          <div>
            <strong>${params.name}</strong><br/>
            总数: ${params.data.count}<br/>
            合格数: ${params.data.hege}<br/>
            不合格率: ${buhege}%
          </div>
        `;
      },
    },
    series: <echarts.SeriesOption>[
      {
        type: "wordCloud",
        shape: "circle",
        keepAspect: false,
        // maskImage: maskImage,
        left: "8%",
        top: "20%",
        width: "90%",
        height: "75%",
        right: null,
        bottom: null,
        sizeRange: [12, 20],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 6,
        drawOutOfBound: false,
        shrinkToFit: true,
        layoutAnimation: true,
        textStyle: {
          fontFamily: "sans-serif",
          fontWeight: "bold",
          color: function () {
            return echartsColorArray[
              Math.floor(Math.random() * echartsColorArray.length)
            ];
          },
        },
        emphasis: {
          // focus: 'self',
          textStyle: {
            textShadowBlur: 3,
            textShadowColor: "#333",
          },
        },
        //data属性中的value值却大，权重就却大，展示字体就却大
        data: checkMonitoringData.value,
      },
    ],
  };

  option && myChart.setOption(option);

  myChart.setOption(option);

  // 添加点击事件
  myChart.on("click", function (params: any) {
    console.log("点击的词云:", params.name);
    defaultShow.value = true;
    choujianShow.value = false;
    //调用接口
    setTimeout(() => {
      defaultShow.value = false;
      tousuShow.value = false;
      zhifaShow.value = false;
      choujianShow.value = true;
      setTimeout(() => {
        choujianEchartsPinfa();
      }, 500);
    }, 100);
    // console.log(swiperRef.value, "swiperRef.value");
    // console.log(document.getElementById("swiperBox"), "document.getElementById('swiperBox')");
    setTimeout(() => {
      const swiperBox = document.getElementById("swiperBox");
      if (swiperBox) {
        swiperBox.style.height = swiperBoxHeight.value;
      }
    }, 100);
  });
};

const nohegelv = (hegelv: number) => {
  return 100 - hegelv;
};
const echarts2 = () => {
  d3.select(main2.value).html("");
  // 定义一组预设的颜色
  var colors = [
    "RGB(0, 255, 255)",
    "RGB(0, 0, 255)",
    "RGB(255, 255, 0)",
    "RGB(255, 192, 203)",
    "RGB(255, 255, 153)",
    "RGB(230, 230, 250)",
    "RGB(211, 211, 211)",
  ];
  // 创建 SVG 元素
  var svg = d3
    .select(main2.value)
    .append("svg")
    .attr("width", windowWidth.value * 0.23)
    .attr("height", (windowHeight.value - 100 - 3 * 4) / 3);

  // 创建布局
  var layout = d3
    .pack()
    .size([windowWidth.value * 0.23, (windowHeight.value - 100 - 3 * 4) / 2.2])
    // .size([300,300])
    .padding(40);

  // 数据处理
  var root: any = d3
    .hierarchy({ children: complaintReportData.value })
    .sum(function (d: any) {
      return d.value;
    });

  var nodes = layout(root).descendants();

  // 选择Tooltip的元素
  var tooltip = d3.select("#tooltip");

  // 设置文字大小的比例尺
  var fontSizeScale = d3
    .scaleLinear()
    .domain([
      0,
      d3.max(nodes, function (d: any) {
        return d.value;
      }),
    ])
    .range([6, 28]); // 根据需要调整文字大小的范围

  // 假设在y方向上我们希望缩小为原来的一半
  const scaleYFactor = 0.73;

  // // 遍历所有节点并应用变换
  nodes.forEach((d) => {
    // 更新节点的位置以模拟椭圆布局
    d.y = d.y * scaleYFactor; // 缩小y坐标

    // 可能还需要平移以保持在视窗内居中
    // 这里的平移量取决于您的具体需求和初始SVG尺寸
    // 下面只是一个例子，可能需要调整
    d.y += 20;
  });
  // 绘制气泡图
  svg
    .selectAll(".node")
    .data(
      // nodes
      nodes.filter(function (d) {
        return !d.children;
      })
    )
    .enter()
    .append("circle")
    .attr("class", "node")
    .attr("cx", function (d) {
      return d.x;
    })
    .attr("cy", function (d) {
      return d.y;
    })
    .attr("r", function (d) {
      return d.r;
    })
    .style("fill", function () {
      var randomIndex = Math.floor(Math.random() * echartsColorArray.length);
      return echartsColorArray[randomIndex];
    })
    .style("opacity", 0.7)
    // 鼠标悬停事件
    .on("mousemove", function (event, d: any) {
      isTooltipVisible.value = true;
      var name = d.data.name.length * 18;
      var value = String(d.data.value.length).length * 16;

      var x = event.clientX - (Number(name) + Number(value) - 50); // 获取鼠标的 x 坐标并减去tooltip的宽度，以将其定位到左侧
      var y = event.clientY - 28; // 获取鼠标的 y 坐标并减去一定的值，以调整tooltip的垂直位置
      tooltip.transition().duration(200).style("opacity", 0.9);
      tooltip
        .html(d.data.name + "：" + d.data.value)
        .style("left", x + "px") // 设置 tooltip 的位置为左侧
        .style("top", y + "px"); // 设置 tooltip 的垂直位置
    })
    // 鼠标移出事件
    .on("mouseout", function () {
      isTooltipVisible.value = false;
    })
    // 添加点击事件
    .on("click", function (event, d: any) {
      //右1高亮显示
      console.log("点击的气泡图节点:", d.data.name);
      // highlightGraphNodeByName(d.data.name);
      highlightGraphNodeByName("投诉举报-销售-" + d.data.name);

      // 右2显示首发，高发，频发预警
      defaultShow.value = true;
      choujianShow.value = true;
      setTimeout(() => {
        defaultShow.value = false;
        choujianShow.value = false;
        tousuShow.value = true;
        zhifaShow.value = false;
      }, 100);

      setTimeout(() => {
        const swiperBox = document.getElementById("swiperBox");
        if (swiperBox) {
          swiperBox.style.height = swiperBoxHeight.value;
        }
      }, 100);
    });
  // 添加文字标签
  svg
    .selectAll(".label")
    .data(nodes)
    .enter()
    .append("text")
    .attr("class", "label")
    .attr("x", function (d) {
      return d.x;
    })
    .attr("y", function (d) {
      return d.y;
    })
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .style("font-size", function (d: any) {
      return fontSizeScale(d.data.value) + "px";
    })
    .style("fill", "white")
    .style("pointer-events", "none")
    .text(function (d: any) {
      return d.data.name;
    });

  // 创建标题元素
  svg
    .append("text")
    .attr("class", "title")
    .attr("x", 120 + (windowWidth.value * 0.23 - 246) / 2)
    .attr("y", 40) // 根据需要调整标题的垂直位置
    .attr("text-anchor", "middle")
    .style("font-size", "18px")
    .style("font-weight", "bold")
    .style("fill", "#00eaff")
    .text("投诉举报  ")
    .append("tspan")
    .attr("class", "score")
    .style("font-size", "28px")
    .style("font-weight", "bold")
    .style("fill", "#1890ff")
    .style("text-shadow", "1px 1px 2px gray") // 添加阴影效果
    .text(complaintReportScore.value)
    .append("tspan")
    .attr("class", "unit")
    .style("font-size", "22px")
    .style("font-weight", "bold")
    .style("fill", "#00eaff")
    .text("  分");
  // 创建副标题元素
  var text = ["主", "要", "问", "题"];
  for (let index = 0; index < text.length; index++) {
    var element = text[index];
    svg
      .append("text")
      .attr("class", "subtitle")
      .attr("x", 5) // 根据需要调整副标题的水平位置
      .attr(
        "y",
        ((windowHeight.value - 100 - 3 * 4) / 3 - 198) / 2 + 78 + 14 * index
      )
      // .attr("text-anchor", "middle")
      .style("font-size", "14px")
      .style("font-weight", "bold")
      .style("fill", "#ffffff")
      // .attr("transform", "rotate(90, 20, " + 300 / 2 + ")") // 将副标题旋转90度
      .text(element);
  }
};
const echarts3 = () => {
  var myChart = echarts.init(main3.value);
  var option: EChartsOption;

  option = {
    title: [
      {
        text:
          "执法检查  {score|" + lawEnforcementInspectionScore.value + "}  分",
        left: "center",
        right: "center",
        textStyle: {
          color: "#00eaff",
          fontSize: 18,
          rich: {
            score: {
              fontSize: 28,
              color: "#1890ff",
              fontWeight: "bold",
              textShadowColor: "gray", // 阴影颜色
              textShadowBlur: 2, // 阴影模糊程度
              textShadowOffsetX: 1, // 阴影水平偏移
              textShadowOffsetY: 1, // 阴影垂直偏移
            },
          },
        },
      },
      {
        text: "主\n要\n问\n题",
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
          fontWeight: "bold",
        },
        textAlign: "left",
        textBaseline: "middle",
        top: "50%",
      },
    ],
    label: {
      show: true,
      formatter: "{b} : {c}",
    },
    tooltip: {
      show: true,
      formatter: "{b} : {c}",
    },
    series: [
      {
        type: "treemap",
        data: lawEnforcementInspectionData.value,
        height: "70%",
        breadcrumb: { show: false },
        nodeClick: false
        // width: "100%"
      },
    ],
    // visualMap: {
    //   show: false,
    //   inRange: {
    //     color: echartsColorArray,
    //   },
    // },
  };

  option && myChart.setOption(option);

  myChart.setOption(option);

  // 添加点击事件
  myChart.on("click", function (params: any) {
    console.log("点击的树图节点:", params.name);
    highlightGraphNodeByName("执法检查-" + params.name);
    // 你可以在这里根据需要进行更多操作，比如弹窗、跳转等
    defaultShow.value = false;
    choujianShow.value = false;
    tousuShow.value = false;
    zhifaShow.value = true;
    setTimeout(() => {
      zhifaEchartsPinfa();
    }, 500)
  });
};
// 初始化时间轴图表
const echarts6_old = async () => {
  var myChart = echarts.init(main6.value);
  var option: EChartsOption;
  const timeValueMap = {
    上三个月: -3,
    上二个月: -2,
    上一个月: -1,
    当前月: 0,
    下一个月: 1,
    下二个月: 2,
    下三个月: 3,
  };

  // 固化虚拟数据

  // 完整数据结构
  const mockDataSource = [
    {
      year: 2023,
      jurisdiction: "奉贤区",
      month: "5", // 基准月
      selectedStreet: "",
      process: "",
      littlemonth: 0,
      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, 92, 94.8, null, null, null],
            predict: [null, null, null, 94.8, 95, 96.3, 97.5],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
    {
      year: 2023,
      jurisdiction: "奉贤区",
      month: "3", // 基准月
      selectedStreet: "",
      process: "食品安全检查",
      littlemonth: 0,
      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [92.6, 87.3, 93.5, 91.3, null, null, null],
            predict: [null, null, null, 91.3, 92.1, 93.1, 93.3],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
    {
      year: 2023,
      jurisdiction: "奉贤区",
      month: "5", // 基准月
      selectedStreet: "金汇镇",
      process: "食品安全检查",
      littlemonth: 0,

      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [89.2, 89.2, 92.3, 92.5, null, null, null],
            predict: [null, null, null, 92.5, 92.7, 93.1, 93.3],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
    {
      year: 2023,
      jurisdiction: "奉贤区",
      month: "5", // 基准月
      selectedStreet: "金汇镇",
      process: "食品安全检查",
      littlemonth: -1,

      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [88.7, 89.2, 89.2, 92.3, null, null, null],
            predict: [null, null, null, 92.3, 92.5, 93.1, 93.5],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
    {
      year: 2023,
      jurisdiction: "奉贤区",
      month: "3", // 基准月
      selectedStreet: "金汇镇",
      process: "食品安全检查",
      littlemonth: -1,

      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [87.5, 87.9, 88.7, 89.2, null, null, null],
            predict: [null, null, null, 89.2, 90.5, 90.9, 91.7],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
    {
      year: 2023,
      jurisdiction: "上海市",
      month: "3", // 基准月
      selectedStreet: "",
      process: "食品安全检查",
      littlemonth: -2,

      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [90.8, 91.5, 91.5, 91.7, null, null, null],
            predict: [null, null, null, 91.7, 92, 92.1, 92.3],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
    {
      year: 2023,
      jurisdiction: "上海市",
      month: "5", // 基准月
      selectedStreet: "",
      process: "食品安全检查",
      littlemonth: -2,

      timeScores: [
        {
          period: "上三个月" as TimePeriod,
          scores: {
            real: [87.3, 88.6, 88.7, 92.6, null, null, null],
            predict: [null, null, null, 92.6, 93.1, 91.6, 90.7],
          },
        },
        {
          period: "上二个月" as TimePeriod,
          scores: {
            real: [88.6, 88.7, 92.6, 87.3, null, null, null],
            predict: [null, null, null, 87.3, 89.6, 91.1, 91.8],
          },
        },
        {
          period: "上一个月" as TimePeriod,
          scores: {
            real: [88.7, 92.6, 87.3, 93.5, null, null, null],
            predict: [null, null, null, 93.5, 91.7, 92.2, 93.1],
          },
        },
        {
          period: "当前月" as TimePeriod,
          scores: {
            real: [90.8, 91.7, 91.9, 92.2, null, null, null],
            predict: [null, null, null, 92.2, 92.5, 92.9, 93.1],
          },
        },
        {
          period: "下一个月" as TimePeriod,
          scores: {
            real: [87.3, 93.5, 91.3, null, null, null, null],
            predict: [null, null, 91.3, 92.1, 92.7, 93.1, 94.2],
          },
        },
        {
          period: "下二个月" as TimePeriod,
          scores: {
            real: [93.5, 91.3, null, null, null, null, null],
            predict: [null, 91.3, 92.1, 92.7, 93.1, 94.2, 94],
          },
        },
        {
          period: "下三个月" as TimePeriod,
          scores: {
            real: [91.3, null, null, null, null, null, null],
            predict: [91.3, 92.1, 92.7, 93.1, 94.2, 94, 96],
          },
        },
      ],
    },
  ];

  const mockDataSou = mockDataSource.find(
    (item) =>
      item.month === monthValue.value &&
      item.jurisdiction === districtValue.value &&
      item.selectedStreet === selectedStreet.value &&
      item.littlemonth === littlemonth.value
  );
  // console.log('monthValue.value', monthValue.value);
  // console.log('districtValue.value', districtValue.value);
  // console.log('selectedStreet.value', selectedStreet.value);
  // console.log('littlemonth.value', littlemonth.value);
  // console.log('mockDataSou11', mockDataSou,"222",mockDataSource);
  console.log("mockDataSou", mockDataSou);
  const mockData = mockDataSou.timeScores.map((item) => item.scores);
  console.log("mockData", mockData);
  option = {
    baseOption: {
      timeline: {
        axisType: "category",
        autoPlay: true,
        playInterval: 2000,
        data: [
          "上三个月",
          "上二个月",
          "上一个月",
          "当前月",
          "下一个月",
          "下二个月",
          "下三个月",
        ],
        currentIndex: 3,
        label: { formatter: (s: string) => s },
      },
      tooltip: {
        trigger: "axis",
        textStyle: {
          fontSize: 10,
        },
        axisPointer: {
          lineStyle: {
            color: "#57617B",
          },
        },
        extraCssText: "max-width: 200px; max-height: 150px; overflow-y: auto;",
      },
      legend: {
        data: ["真实分", "预测分"],
        selected: { 预测分: true, 真实分: true },
        top: "30",
        textStyle: {
          fontSize: 10,
          color: "#fff",
        },
        itemGap: 20,
      },
      calculable: true,
      grid: {
        top: 80,
        bottom: 100,
        left: "10%",
        right: "5%",
      },
      xAxis: {
        show: false, // 关键设置：隐藏X轴
        type: "category",
        boundaryGap: false,
        data: [], // 保留空数据（或保持原有月份数据但不影响显示）
      },
      yAxis: {
        type: "value",
        min: 70,
        max: 100,
        interval: 5,
        axisLabel: { formatter: "{value} 分" },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.5)",
          },
        },
      },
      series: [
        {
          name: "真实分",
          smooth: true,
          type: "line",
          symbol: "circle",
          symbolSize: 8,
          lineStyle: { width: 2 },
          color: "#5470C6",
        },
        {
          name: "预测分",
          smooth: true,
          type: "line",
          symbol: "circle",
          symbolSize: 8,
          lineStyle: {
            width: 2,
            type: "dashed",
          },
          color: "#EE6666",
        },
      ],
    },
    options: mockData.map((data) => ({
      series: [{ data: data.real }, { data: data.predict }],
    })),
  };

  myChart.setOption(option);

  // 保留时间轴变化监听
  myChart.on("timelinechanged", (params) => {
    const currentName = option.baseOption.timeline.data[params.currentIndex];
    const clickValue = timeValueMap[currentName];
    littlemonth.value = clickValue;
  });
};

const echarts6 = () => {
  var myChart = echarts.init(main6.value);
  var option: EChartsOption;

  option = {
    title: [
      {
        text: "行政处罚  {score|" + istrativeSanctionScore.value + "}  分",
        top: "3%",
        left: "center",
        right: "center",
        textStyle: {
          fontSize: 18,
          color: "#00eaff",
          rich: {
            score: {
              fontSize: 28,
              color: "#1890ff",
              fontWeight: "bold",
              textShadowColor: "gray", // 阴影颜色
              textShadowBlur: 2, // 阴影模糊程度
              textShadowOffsetX: 1, // 阴影水平偏移
              textShadowOffsetY: 1, // 阴影垂直偏移
            },
          },
        },
      },
      {
        text: "主\n要\n问\n题",
        textStyle: {
          color: "#ffffff",
          fontSize: 14,
          fontWeight: "bold",
        },
        textAlign: "left",
        textBaseline: "middle",
        top: "50%",
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      // top: "5%",
      left: "center",
      bottom: "1%",
      textStyle: {
        color: "#00eaff",
      },
    },
    series: [
      {
        name: "行政处罚种类占比",
        type: "pie",
        radius: ["28%", "50%"],
        avoidLabelOverlap: true,
        top: "-5%",
        label: {
          color: "#00eaff",
          show: true,
          formatter: "{d}%",
          position: "inner",
        },
        minShowLabelAngle: 1,
        emphasis: {
          label: {
            color: "#00eaff",
            show: true,
            fontSize: 15,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: istrativeSanctionData.value,
        // color: echartsColorArray,
      },
    ],
  };

  option && myChart.setOption(option);

  myChart.setOption(option);
};

const echartsYibiao = () => {
  var myChart = echarts.init(yibiao.value);
  var option: EChartsOption;
  const szqxName = ref("上海市");
  if (districtValue.value) {
    szqxName.value = districtValue.value;
  }

  option = {
    // 标题
    title: [
      {
        left: "32%",
        top: "75%",
        bottom: 100,
        text: szqxName.value + "综合指标",
        textStyle: {
          fontWeight: "bold",
          fontSize: 18,
          color: "#00eaff",
        },
      },
    ],
    tooltip: {
      show: true,
    },
    series: [
      {
        // 蓝色刻度
        type: "gauge", // 图表类型为仪表盘
        center: ["50%", "55%"], // 仪表盘的中心位置，默认全局居中
        radius: "80%", // 仪表盘的半径大小
        splitNumber: 10, // 刻度数量
        min: 0, // 最小值
        max: 100, // 最大值
        startAngle: 200, // 起始角度
        endAngle: -20, // 结束角度
        clockwise: true, // 是否顺时针
        axisLine: {
          show: false, // 是否显示仪表盘轴线
          lineStyle: {
            width: 1, // 轴线宽度
            shadowBlur: 0, // 轴线阴影模糊大小
            color: [
              [1, "#1e3a8a"], // 轴线颜色
            ],
          },
        },
        axisTick: {
          show: true, // 是否显示刻度
          lineStyle: {
            color: "#00eaff", // 刻度颜色
            width: 0.5, // 刻度宽度
          },
          length: -5, // 刻度长度
          splitNumber: 10, // 刻度分割段数
        },
        splitLine: {
          show: true, // 是否显示分隔线
          length: -8, // 分隔线长度
          lineStyle: {
            width: 0.8, // 刻度宽度
            color: "#00eaff", // 分隔线颜色
          },
        },
        axisLabel: {
          distance: -10, // 标签与轴线的距离
          color: "#00eaff", // 标签颜色
          fontSize: 8, // 标签字体大小
          fontWeight: "bold", // 标签字体粗细
        },
        pointer: {
          // 仪表盘指针
          show: false, // 是否显示指针
        },
        detail: {
          show: false, // 是否显示详情
        },
        data: [
          {
            name: "", // 数据名称
            value: 100, // 数据值
          },
        ],
      },
      {
        // 白色线条
        startAngle: 200, // 仪表盘的起始角度，单位为度
        endAngle: -20, // 仪表盘的结束角度，单位为度
        type: "gauge", // 图表类型为仪表盘
        center: ["50%", "55%"], // 仪表盘的中心位置，相对于容器的百分比
        radius: "65%", // 仪表盘的半径大小，相对于容器的百分比
        min: 0, // 仪表盘的最小值
        max: 100, // 仪表盘的最大值
        splitNumber: 0, // 刻度数量，设置为0表示不显示刻度
        axisLine: {
          // 坐标轴线
          lineStyle: {
            color: [
              [0.66, "#dddddd"], // 轴线颜色的渐变，0.66处颜色为#dddddd
              [1, "#dddddd"], // 轴线颜色的渐变，1处颜色为#dddddd
            ], // 属性lineStyle控制线条样式
            width: 2, // 轴线宽度
          },
        },
        axisLabel: {
          // 坐标轴小标记
          fontWeight: "bolder", // 字体粗细
          fontSize: 20, // 字体大小
          color: "rgba(30,144,255,0)", // 字体颜色，设置为透明
        },
        splitLine: {
          // 分隔线
          length: 10, // 分隔线长度
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            width: 0, // 分隔线宽度
            color: "#444", // 分隔线颜色
          },
        },
      },
      {
        // 蓝色线条
        startAngle: 200, // 仪表盘的起始角度，单位为度
        endAngle: -20, // 仪表盘的结束角度，单位为度
        type: "gauge", // 图表类型为仪表盘
        center: ["50%", "55%"], // 仪表盘的中心位置，相对于容器的百分比
        radius: "71%", // 仪表盘的半径大小，相对于容器的百分比
        min: 0, // 仪表盘的最小值
        max: 100, // 仪表盘的最大值
        splitNumber: 0, // 刻度数量，设置为0表示不显示刻度
        axisLine: {
          // 坐标轴线
          lineStyle: {
            color: [
              [0.66, "#1e3a8a"], // 轴线颜色的渐变，0.66处颜色为#dddddd
              [1, "#1e3a8a"], // 轴线颜色的渐变，1处颜色为#dddddd
            ], // 属性lineStyle控制线条样式
            width: 1, // 轴线宽度
          },
        },
        axisLabel: {
          // 坐标轴小标记
          fontWeight: "bolder", // 字体粗细
          fontSize: 16, // 字体大小
          color: "rgba(30,144,255,0)", // 字体颜色，设置为透明
        },
        splitLine: {
          // 分隔线
          length: 10, // 分隔线长度
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            width: 0, // 分隔线宽度
            color: "#444", // 分隔线颜色
          },
        },
        detail: {
          // 详情显示
          show: false, // 是否显示详情
        },
      },
      {
        // 指针和分数
        name: "总分", // 图表名称
        type: "gauge", // 图表类型：仪表盘
        startAngle: 200, // 仪表盘的起始角度，单位为度
        endAngle: -20, // 仪表盘的结束角度，单位为度
        radius: "40%", // 仪表盘的半径大小，相对于容器宽度的百分比
        center: ["50%", "55%"], // 仪表盘的中心位置，相对于容器的百分比，默认全局居中
        min: 0, // 仪表盘的最小值
        max: 100, // 仪表盘的最大值

        axisLine: {
          // 坐标轴线配置
          show: false, // 是否显示坐标轴线
          lineStyle: {
            width: 25, // 坐标轴线的宽度
            shadowBlur: 0, // 坐标轴线的阴影模糊程度
            color: [
              [0.2, "#00FAFC"], // 轴线颜色的渐变，0.2处颜色为#00FAFC（浅蓝色）
              [0.4, "#3BD542"], // 轴线颜色的渐变，0.4处颜色为#3BD542（绿色）
              [0.6, "#E3F424"], // 轴线颜色的渐变，0.6处颜色为#E3F424（黄色）
              [0.8, "#7E48DA"], // 轴线颜色的渐变，0.8处颜色为#7E48DA（紫色）
              [1, "#E531A8"], // 轴线颜色的渐变，1处颜色为#E531A8（粉红色）
            ],
          },
        },

        axisTick: {
          // 刻度配置
          show: false, // 是否显示刻度
        },

        splitLine: {
          // 分隔线配置
          show: false, // 是否显示分隔线
        },

        axisLabel: {
          // 坐标轴标签配置
          show: false, // 是否显示坐标轴标签
        },

        pointer: {
          // 指针配置
          show: true, // 是否显示指针
          width: 4, // 指针宽度
          length: 50, // 指针长度
          // color: '#00eaff', // 指针颜色
        },
        detail: {
          // 详情配置
          show: true, // 是否显示详情
          offsetCenter: [0, "80%"], // 详情文本相对于中心点的位置偏移，x方向无偏移，y方向向下偏移80%
          fontSize: 20, // 详情文本字体大小（加倍）
          color: "#00eaff", // 改为白色
          fontWeight: "bolder", // 加粗显示
          // textShadow: '0 0 5px rgba(0, 149, 255, 0.3)', // 添加阴影使文字在透明背景上更清晰
        },
        itemStyle: {
          // 项目样式配置
          color: "#00eaff", // 项目的默认颜色
        },
        data: [
          {
            // 数据配置
            value: AllCourse.value, // 当前数据值
          },
        ],
      },
    ],
  };

  option && myChart.setOption(option);

  myChart.setOption(option);
};

// 时间轴配置
const initTimelineChart = () => {
  var myChart = echarts.init(timeline.value);
  var option: EChartsOption;
  const timeValueMap = {
    上三个月: -3,
    上二个月: -2,
    上一个月: -1,
    当前月: 0,
    下一个月: 1,
    下二个月: 2,
    下三个月: 3,
    // 若添加新的时间点，在此处添加对应映射
  };
  option = {
    baseOption: {
      timeline: {
        axisType: "category",
        autoPlay: false,
        playInterval: 2000,
        data: [
          "上三个月",
          "上二个月",
          "上一个月",
          "当前月",
          "下一个月",
          "下二个月",
          "下三个月",
        ],
        currentIndex: 3, // 默认选中第四个时间点
        label: {
          formatter: function (s) {
            return s;
          },
        },
      },
      tooltip: {},
      legend: {
        left: "right",
        data: [],
        selected: {},
      },
      calculable: true,
      grid: {
        top: 80,
        bottom: 100,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
              formatter: function (params) {
                return params.value.replace("\n", "");
              },
            },
          },
        },
      },
      series: [
        // 这里可以根据实际需求添加系列
      ],
    },
    options: [
      // 每个时间点对应的配置，可以根据实际需求添加
    ],
  };
  myChart.setOption(option);

  // 监听时间轴的时间点变化事件
  myChart.on("timelinechanged", (params) => {
    const currentName = option.baseOption.timeline.data[params.currentIndex];
    const clickValue = timeValueMap[currentName];
    littlemonth.value = clickValue;
    SelectBlur();
  });

  // 点击事件处理
  myChart.on("click", (params: any) => { });
};

onMounted(() => {
  console.log("onMounted开始执行");

  getWindowWH();
  getSixTableValue();
  initTimelineChart();
  echarts6();
  initRelationshipChart();

  // 获取总分数
  // getAllData(
  //   yearValue.value,
  //   monthValue.value,
  //   stageValue.value,
  //   littlemonth.value
  // )
  getStreetAllData(
    monthValue.value,
    stageValue.value,
    districtValue.value,
    littlemonth.value
  ).then((res) => {
    if (res.data.msg == "success") {
      // AllCourse.value = res.data.data
      //   .filter((item: { name: string }) => item.name === districtValue.value)[0].value;
      // echartsYibiao();
      if (districtValue.value == "上海市") {
        // 计算所有区域的平均值
        const allDistricts = res.data.data.filter((item: { name: string }) => item.name !== "上海市");
        const totalValue = allDistricts.reduce((sum: number, item: { value: number }) => sum + item.value, 0);
        AllCourse.value = Number((totalValue / allDistricts.length).toFixed(1));
        echartsYibiao();
      } else {
        AllCourse.value = res.data.data.filter(
          (item: { name: string }) => item.name === districtValue.value
        )[0].value;

        echartsYibiao();
      }
      console.log("AllCourse", AllCourse.value, "======================");
    }
  });

  LoadStreetAllData();
});

const LoadStreetAllData = () => {
  // 获取每个街道的分数
  getStreetAllData(
    monthValue.value,
    stageValue.value,
    districtValue.value,
    littlemonth.value
  ).then((res) => {
    if (res.data.msg == "success") {
      const courseValue = assignValuesToZonesStreet(res.data.data);
      btnLoadJson(courseValue);
      //刷新数据
      RefreshData();
    }
  });
};

//加载地图列表信息,第一个网络访问方法
const lstMapLayout = ref([]);

const LoadMapLayoutList = () => {
  getMapLayoutList(curId).then((res) => {
    lstMapLayout.value = res.data;
    // console.log("lstMapLayout", lstMapLayout);
  });
};

const optMaps = ref([]);
const LoadOptMaps = () => {
  loadMapOptions(curId).then((res) => {
    optMaps.value = res.data.data;
    // console.log("optMaps", optMaps.value);
  });
};

const curSel = reactive({
  name: "",
  value: "",
});

//当前新增的名字
const curAddName = ref("");

//删除历史数据
const btnDelData = () => {
  ElMessage({
    type: "success",
    message: `删除编号` + curSel.value + "的设计内容",
  });
  var dRet = removeMapLayout(curSel.value);
  // console.log("删除返回", dRet);
  //重新加载所有的信息
  LoadAllDatas();
};

const LoadAllDatas = () => {
  //获取当前所有的下拉菜单数据
  getMapLayoutList(curId).then((res) => {
    lstMapLayout.value = res.data;
    // console.log("lstMapLayout", lstMapLayout);
  });
  //lstMapLayout.value=getMapLayoutList.data;
  //获取当前所有的地图配置信息
  loadMapOptions(curId).then((res) => {
    optMaps.value = res.data.data;
    // console.log("optMaps", optMaps.value);
  });
  //optMaps.value=loadMapOptions.data.data;
};

//加载当前的数据
const btnLoadData = (sel: any) => {
  var dJson = JSON.parse(
    (
      Enumerable.from((lstMapLayout.value as any).data)
        .where(function (x: any) {
          return x.id == curSel.value;
        })
        .first() as any
    ).layoutdata
  );

  basicOptions.backgroundColor = dJson.Options.backgroundColor;
  basicOptions.barTextColor = dJson.Options.barTextColor;
  basicOptions.barTitle = dJson.Options.barTitle;
  basicOptions.colorRange = dJson.Options.colorRange;
  basicOptions.isPresetColorRange = dJson.Options.isPresetColorRange;
  basicOptions.isSqrt = dJson.Options.isSqrt;
  basicOptions.radioColorType = dJson.Options.radioColorType;

  curLayout.ChongMing = dJson.ChongMing;
  curLayout.PuDong = dJson.PuDong;
  curLayout.BaoShan = dJson.BaoShan;
  curLayout.JiaDing = dJson.JiaDing;
  curLayout.QingPu = dJson.QingPu;
  curLayout.JinShan = dJson.JinShan;
  curLayout.FengXian = dJson.FengXian;
  curLayout.SongJiang = dJson.SongJiang;
  curLayout.MinHang = dJson.MinHang;
  curLayout.XuHui = dJson.XuHui;
  curLayout.ChangNing = dJson.ChangNing;
  curLayout.PuTuo = dJson.PuTuo;
  curLayout.JingAn = dJson.JingAn;
  curLayout.HongKou = dJson.HongKou;
  curLayout.HuangPu = dJson.HuangPu;
  curLayout.YangPu = dJson.YangPu;
  curLayout.Bar = dJson.Bar;

  // console.log("柱状图", dJson.Bar);
  btnLoad();
};

//获取浏览器可视化页面的宽高
const getWindowWH = () => {
  //本地浏览器可视长宽：1920*960
  // console.log("浏览器宽度", window.innerWidth);
  // console.log("浏览器高度", window.innerHeight);
  windowHeight.value = window.innerHeight;
  windowWidth.value = window.innerWidth;
  // // console.log((windowHeight.value - 62 - 3 * 4) / 3 + 2 * 4, "-------------------------");

  // 设置上下两个盒子间隙
  const topBottomGap = 10;
  //顶部空隙
  const topGap = 52;
  // 底部空隙
  const bottomGap = 15;
  // 左右空隙
  const leftRightGap = 100;
  // 最外层左右空隙
  const leftRightGap1 = 20;
  //单个盒子的高度
  const mainHeight =
    (windowHeight.value - 2 * topBottomGap - topGap - bottomGap) / 3;
  // 单个盒子的宽度
  const mainWidth = windowWidth.value * 0.25;
  // 中间盒子的宽度
  const centerWidth =
    windowWidth.value - 2 * (leftRightGap1 + mainWidth + leftRightGap);

  main1.value.style.left = leftRightGap1 + "px";
  main1.value.style.width = mainWidth + "px";
  main1.value.style.height = mainHeight + "px";
  main1.value.style.top = 0 + "px";

  main2.value.style.left = leftRightGap1 + "px";
  main2.value.style.position = "absolute";
  main2.value.style.width = mainWidth + "px";
  main2.value.style.height = mainHeight + "px";
  main2.value.style.top = mainHeight + topBottomGap + "px";

  main3.value.style.left = leftRightGap1 + "px";
  main3.value.style.width = mainWidth + "px";
  main3.value.style.height = mainHeight + "px";
  main3.value.style.top = 2 * mainHeight + 2 * topBottomGap + "px";

  main4.value.style.left = windowWidth.value - mainWidth - leftRightGap1 + "px";
  main4.value.style.position = 'absolute';
  main4.value.style.width = mainWidth + "px";
  main4.value.style.height = 0.4 * mainHeight + "px";
  main4.value.style.top = 0 + "px";

  main5.value.style.left = windowWidth.value - mainWidth - leftRightGap1 + "px";
  main5.value.style.position = "absolute";
  main5.value.style.width = mainWidth + "px";
  main5.value.style.height = 1.6 * mainHeight + "px";
  main5.value.style.top = 0.4 * mainHeight + topBottomGap + "px";
  swiperBoxHeight.value = main5.value.style.height;

  main6.value.style.left = windowWidth.value - mainWidth - leftRightGap1 + "px";
  main6.value.style.width = mainWidth + "px";
  main6.value.style.height = mainHeight + "px";
  main6.value.style.top = main3.value.style.top;

  main9.value.style.left = main6.value.style.left;
  main9.value.style.width = main6.value.style.width;
  main9.value.style.height = main6.value.style.height;
  main9.value.style.top = main6.value.style.top;

  // centerBorder.value.style.width = centerWidth + "px";
  // centerBorder.value.style.height = windowHeight.value * 0.7 + "px";
  // centerBorder.value.style.left = windowWidth.value * 0.5 + "px";
  // centerBorder.value.style.top = windowHeight.value * 0.5 + "px";
  // centerBorder.value.style.transform = "translate(-50%, -50%)";

  timeline.value.style.width = windowWidth.value * 0.47 + "px";
};

//获取六个表的值+获取二级指标的值
const getSixTableValue = () => {
  //抽检监测表格（1表）
  getCheckMonitoringValueStreet(
    monthValue.value,
    stageValue.value,
    districtValue.value,
    selectedStreet.value,
    littlemonth.value
  ).then((res) => {
    if (res.data.msg == "success") {
      checkMonitoringScore.value = res.data.score;
      checkMonitoringData.value = res.data.data.map(
        (item: {
          zongjianshu: any;
          hegejianshu: any;
          sp_dl: string;
          hegelv: number;
        }) => ({
          name: item.sp_dl,
          value: nohegelv(item.hegelv),
          hege: item.hegejianshu,
          count: item.zongjianshu,
        })
      );
      echarts1();
    }
  });

  // //投诉举报表格（2表）
  getComplaintReportValueStreet(
    monthValue.value,
    stageValue.value,
    districtValue.value,
    selectedStreet.value,
    littlemonth.value
  ).then((res) => {
    if (res.data.msg == "success") {
      complaintReportScore.value = res.data.score;
      complaintReportData.value = res.data.data.map(
        (item: { tousuqingxin: string; tousushu: number }) => ({
          name: item.tousuqingxin,
          value: item.tousushu,
        })
      );
      echarts2();
    }
  });
  //执法检查表格（3表）
  getLawEnforcementInspectionValueStreet(
    monthValue.value,
    stageValue.value,
    districtValue.value,
    selectedStreet.value,
    littlemonth.value
  ).then((res) => {
    if (res.data.msg == "success") {
      lawEnforcementInspectionScore.value = res.data.score;
      lawEnforcementInspectionData.value = res.data.data.map(
        (item: { wentiqingxin: string; wentishu: number }) => ({
          name: item.wentiqingxin,
          value: item.wentishu,
        })
      );
      echarts3();
    }
  });

  //行政处罚表格（6表）
  getIstrativeSanctionValueStreet(monthValue.value, stageValue.value, districtValue.value, selectedStreet.value, littlemonth.value).then(
    (res) => {
      if (res.data.msg == "success") {
        istrativeSanctionScore.value = res.data.score;
        istrativeSanctionData.value = res.data.data.map(
          (item: { chufaqinxing: string; chufaqiye: number }) => ({
            name: item.chufaqinxing,
            value: item.chufaqiye,
          })
        );
        echarts6();
      }
    }
  );

  // 获取二级指标的值
  getSecondLevelMetricValues(districtValue.value).then((res) => {
    if (res.data.msg == "success") {
      for (let index = 0; index < res.data.data.length; index++) {
        const element = res.data.data[index];
        switch (element.zb) {
          case "市民满意度":
            SecondLevelMetricValues.value.citizenSatisfaction = element.score;
            break;
          case "市民知晓度":
            SecondLevelMetricValues.value.citizenAwareness = element.score;
            break;
          case "食物中毒发生率":
            SecondLevelMetricValues.value.foodPoisoningIncidence = element.score;
            break;
          case "企业管理体系认证率":
            SecondLevelMetricValues.value.certificationRate = element.score;
            break;
          default:
            break;
        }
      }
    }
  });
};

//将各个区的分数赋到对应的变量上
const assignValuesToZones = (courseValue: any[]) => {
  const a: DistinguishValueInterface = {};

  for (let index = 0; index < courseValue.length; index++) {
    const name = courseValue[index].name;
    const course: any = courseValue[index].score;
    switch (name) {
      case "崇明区":
        a.ChongMing = course;
        break;
      case "浦东新区":
        a.PuDong = course;
        break;
      case "宝山区":
        a.BaoShan = course;
        break;
      case "嘉定区":
        a.JiaDing = course;
        break;
      case "青浦区":
        a.QingPu = course;
        break;
      case "金山区":
        a.JinShan = course;
        break;
      case "奉贤区":
        a.FengXian = course;
        break;
      case "松江区":
        a.SongJiang = course;
        break;
      case "闵行区":
        a.MinHang = course;
        break;
      case "徐汇区":
        a.XuHui = course;
        break;
      case "长宁区":
        a.ChangNing = course;
        break;
      case "普陀区":
        a.PuTuo = course;
        break;
      case "静安区":
        a.JingAn = course;
        break;
      case "虹口区":
        a.HongKou = course;
        break;
      case "黄浦区":
        a.HuangPu = course;
        break;
      case "杨浦区":
        a.YangPu = course;
        break;
    }
  }

  return a;
};

// 离开焦点触发
const SelectBlur = () => {
  getSixTableValue();
  echarts6();
  // 获取总分数
  // getAllData(
  //   yearValue.value,
  //   monthValue.value,
  //   stageValue.value,
  //   littlemonth.value
  // )
  getStreetAllData(
    monthValue.value,
    stageValue.value,
    districtValue.value,
    littlemonth.value
  ).then((res) => {
    if (res.data.msg == "success") {
      if (districtValue.value == "上海市") {
        // 计算所有区域的平均值
        const allDistricts = res.data.data.filter((item: { name: string }) => item.name !== "上海市");
        const totalValue = allDistricts.reduce((sum: number, item: { value: number }) => sum + item.value, 0);
        AllCourse.value = Number((totalValue / allDistricts.length).toFixed(1));
        echartsYibiao();
      } else {
        AllCourse.value = res.data.data.filter(
          (item: { name: string }) => item.name === districtValue.value
        )[0].value;

        echartsYibiao();
      }
      console.log("AllCourse", AllCourse.value, "======================");
    }
  });

  LoadStreetAllData();
};

//获取cookie
const getCookie = () => {
  let reg = RegExp("Admin-Token" + "=([^;]+)");
  let arr = document.cookie.match(reg);
  if (arr) {
    return arr[1];
  } else {
    return "没有获取到该cookie";
  }
};

const getRandomNumber = (min: number, max: number) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

// 设置白鸽位置
const setDovePositon = () => {
  debugger;
  const containerTitle = document.getElementById("containerTitle");
  const doveNumbers = getRandomNumber(5, 8);
  for (let index = 0; index < doveNumbers; index++) {
    const dove = document.createElement("img");
    dove.src = "/public/image/dove.png";
    dove.classList.add("dove");
    dove.style.left =
      getRandomNumber(window.innerWidth * 0.15, window.innerWidth * 0.85) +
      "px";
    dove.style.top = getRandomNumber(0, 52) + "px";
    dove.style.width = getRandomNumber(64, 128) + "px";
    containerTitle?.appendChild(dove);
  }
};

interface ScoreInterval {
  min: number;
  max: number;
  color: string;
}
// 定义区间
let scoreIntervals: ScoreInterval[] = [
  { min: 0, max: 24, color: "#60a5fa" },
  { min: 25, max: 50, color: "#3b82f6" },
  { min: 51, max: 75, color: "#1d4ed8" },
  { min: 75, max: 100, color: "#1e3a8a" },
];

interface AllScoreVO {
  name: string;
  street: string;
  value: number;
  xzcf: number;
  xxzs: number;
  tsjb: number;
  zfjc: number;
  cckh: number;
  cjjc: number;
  zhx: number;
  score: number;
  weight_add: number;
}

//街道成绩
// let streetScore = [
//   { name: '海湾镇', value: 38 },
//   { name: '金汇镇', value: 90 },
//   { name: '庄行镇', value: 90 },
//   { name: '上海市奉贤区海湾旅游区', value: 90 },
//   { name: '青村镇', value: 90 },
//   { name: '西渡街道', value: 90 },
//   { name: '四团镇', value: 90 },
//   { name: '金海街道', value: 90 },
//   { name: '奉浦街道', value: 90 },
//   { name: '奉城镇', value: 90 },
//   { name: '柘林镇', value: 90 },
//   { name: '上海海港综合经济开发区', value: 90 },
//   { name: '南桥镇', value: 90 }
//   // 省略其他数据
// ];

//街道成绩
let streetScore = [
  { name: "华阳路街道", value: 38 },
  { name: "金汇镇", value: 90 },
  { name: "程家桥街道", value: 90 },
  { name: "新泾镇", value: 90 },
  { name: "新华路街道", value: 90 },
  { name: "北新泾街道", value: 90 },
  { name: "江苏路街道", value: 90 },
  { name: "周家桥街道", value: 90 },
  { name: "天山路街道", value: 90 },
  { name: "仙霞新村街道", value: 90 },
  // 省略其他数据
];

//街道成绩赋值
const assignValuesToZonesStreet = (streetScoreVO: AllScoreVO[]) => {
  const result: DistinguishValueInterface = {};

  //将结果保存到街道成绩中
  console.log("streetScoreVO00000000000000", streetScoreVO);
  if (districtValue.value == "上海市") {
    streetScore = streetScoreVO.map((item) => {
      result[item.name] = item.value;
      return {
        name: item.name,
        value: item.value,
      };
    });
  } else {
    streetScore = streetScoreVO.map((item) => {
      result[item.street] = item.value;
      return {
        name: item.street,
        value: item.value,
      };
    });
  }

  // 对 streetScore 进行从大到小排序
  streetScore = streetScore.sort((a, b) => a.value - b.value);

  //设定四个区间
  // // 计算最大值和最小值
  const maxScore = Math.max(...streetScore.map((item) => item.value));
  const minScore = Math.min(...streetScore.map((item) => item.value));

  // 计算区间
  const interval = (maxScore - minScore) / 4;

  // 定义区间
  scoreIntervals = [
    { min: minScore, max: minScore + interval, color: "#60a5fa" },
    {
      min: minScore + interval + 0.01,
      max: minScore + 2 * interval,
      color: "#3b82f6",
    },
    {
      min: minScore + 2 * interval + 0.01,
      max: minScore + 3 * interval,
      color: "#1d4ed8",
    },
    { min: minScore + 3 * interval + 0.01, max: maxScore, color: "#1e3a8a" },
  ];

  initStreetChart();

  return streetScore;
};

const selectedStreet = ref<string>("");

//  初始化街道地图
// aaaaaaaaaaaaaaaaaa
const initStreetChart = () => {
  // 先获取之前的 ECharts 实例并销毁
  const streetMapElement = document.getElementById(
    "streetMapEcharts"
  ) as HTMLElement;
  const existingChart = echarts.getInstanceByDom(streetMapElement);
  if (existingChart) {
    existingChart.dispose();
  }
  shangHaiJieDao as GeoJSONSourceInput;
  shangHaiXiaQu as GeoJSONSourceInput;
  // console.log('shangHaiJieDao', shangHaiJieDao);

  // 过滤 geoJson 数组，只保留当前请求的街道

  //根据请求结果包含的街道决定显示的街道
  //拿出请求结果包含全部街道的名字
  const streetNames = streetScore.map((item) => item.name);

  //根据请求结果包含的街道决定显示的街道
  let filteredFeatures;
  if (districtValue.value == "上海市") {
    // console.log('streetNames111111111', streetNames);
    filteredFeatures = shangHaiXiaQu.features
      .filter((feature: any) => streetNames.includes(feature.properties.name))
      .map((feature: any) => ({ ...feature, type: "Feature" }));
    // console.log('filteredFeatures1111111111', filteredFeatures);
  } else {
    // console.log('streetNames22222222222222', streetNames);
    filteredFeatures = shangHaiJieDao.features
      .filter((feature: any) => streetNames.includes(feature.properties.name))
      .map((feature: any) => ({ ...feature, type: "Feature" }));
    // console.log('filteredFeatures2222222222222', filteredFeatures);
  }

  // 创建新的 GeoJSONSourceInput 对象
  const nowGeoJson: GeoJSONSourceInput = {
    type: "FeatureCollection",
    features: filteredFeatures,
  };

  // 注册地图
  echarts.registerMap("JiedaoMap", nowGeoJson);
  // 初始化地图
  const streetChart = echarts.init(
    document.getElementById("streetMapEcharts") as HTMLElement
  );

  console.log("streetScore", streetScore);

  const streetOption = {
    //网格布局
    grid: {
      right: "100%",
      top: "10%",
      // bottom: "10%",
      width: "20%",
      left: "12%", // 调整此属性以向右移动柱状图
    },
    //区间分数
    visualMap: {
      pieces: scoreIntervals.map((interval) => ({
        gte: parseFloat(interval.min.toFixed(1)),
        lte: parseFloat(interval.max.toFixed(1)),
        color: interval.color,
      })),
      show: true, // 视觉映射控件
      //定位区间
      left: "83%", // 距离容器左侧 10%
      top: "5%", // 垂直居中
      orient: "vertical", // 垂直方向
      textStyle: {
        color: "#dbeafe",
        fontSize: 12, // 设置字体大小
      },
    },
    series: [
      {
        type: "map", // 图表类型为地图
        map: "JiedaoMap", // 使用注册的地图名称
        geoIndex: 10, // 地理坐标系组件的索引
        zoom: districtValue.value === "上海市" ? 1.2 : 0.9, // 地图缩放等级
        // left: '18%', // 距离左侧10%
        // top: '15%', //
        left: "center",
        top: districtValue.value === "上海市" ? "12%" : "15%",
        right: "auto",
        bottom: "auto",
        // center: [121.52, 30.94],
        showLegendSymbol: false, // 不显示图例标记
        label: {
          normal: {
            show: true, // 正常状态下显示标签
            formatter: function (params: { name: any; data: { value: any } }) {
              const name = params.name;
              const value = params.data ? params.data.value : "";
              return `${name}\n${value}`;
            },
            textStyle: {
              color: "#fff", // 标签文字颜色
              fontSize: 11, // 标签文字大小
            },
          },
          emphasis: {
            show: true,
            textStyle: { color: "#fff" },
          }, // 高亮状态下不显示标签，文本颜色为白色
        },
        roam: false, // 关闭鼠标缩放和平移漫游
        itemStyle: {
          normal: { areaColor: "#031525", borderColor: "#FFFFFF" }, // 正常状态下区域颜色和边界颜色
          emphasis: { areaColor: "#2B91B7" }, // 高亮状态下区域颜色
        },
        animation: false, // 关闭动画
        data: streetScore, // 地图数据
      },
      {
        type: "bar",
        data: streetScore.map((item) => 0),
        barWidth: 10, // 设置柱子最大宽度为10px
        barMaxWidth: 0, // 设置柱子最大宽度为0
        barMinWidth: 0, // 设置柱子最小宽度为0
        // 隐藏柱子核心配置
        itemStyle: {
          show: false,
          color: "#dbeafe", //
          borderColor: "transparent", // 同步隐藏边框
        },
        label: {
          show: false,
          position: "right",
          color: "#dbeafe",
          fontSize: 15,
          distance: 10,
          formatter: (params: { dataIndex: number }) =>
            streetScore[params.dataIndex].value,
          // 关键修复：强制标签显示
          overflow: "truncate", // 文本溢出处理
          // height: 50, // 设置标签最大高度
          width: 50, // 设置标签最大宽度
          align: "left", // 左对齐保证位置
        },
      },
    ],
    xAxis: {
      type: "value",
      position: "top",
      show: false,
      // splitLine: { show: false },
      // axisLabel: { show: false },
      // axisLine: { show: false },
      // axisTick: { show: false }
    },
    yAxis: {
      show: false,
      type: "category",
      data: streetScore.map((item) => item.name),
      axisLabel: {
        color: "#dbeafe", // 设置统一的颜色
        formatter: function (value: string) {
          if (value === "上海市奉贤区海湾旅游区") {
            return "上海...旅游区";
          } else if (value === "上海海港综合经济开发区") {
            return "上海...开发区";
          }
          return value;
        },
      },
      boundaryGap: true,
      axisLine: { show: true },
      axisTick: { show: true },
    },
  };

  streetChart.setOption(streetOption);

  // 监听点击事件
  streetChart.on("click", function (params) {
    if (
      params.componentType === "series" &&
      params.seriesType === "map" &&
      selectedStreet.value !== params.name
    ) {
      selectedStreet.value = params.name; // 设置选中的区域名称
      getSixTableValue();
      console.log("点击的区域:", params.name);
      console.log("点击的区域数据:", params.data);
      // 在这里可以添加更多的逻辑来处理高亮区域
    } else if (
      params.componentType === "series" &&
      params.seriesType === "map" &&
      selectedStreet.value == params.name
    ) {
      //重复点击某个区块（街道）
      streetChart.dispatchAction({
        type: "unselect",
        name: params.name,
      });
      //对街道条件置空
      selectedStreet.value = "";
      getSixTableValue();
      console.log("点击的区域:", params.name);
      console.log("点击的区域数据:", params.data);
      // 在这里可以添加更多的逻辑来处理高亮区域
    }
    echarts6();
  });
};

// 新增初始化方法
const initRelationshipChart = () => {
  // return;
  const chartDom = main9.value;
  if (!chartDom) return;

  chartRelationship = echarts.init(chartDom);

  getRelationshipNetwork().then((res) => {
    // 处理节点数据，为每个节点设置初始样式
    const nodes = res.data.nodes.map((node: any) => ({
      ...node,
      symbolSize: 10, // 节点大小
      value: 15, // 节点权重（可用于布局）
      draggable: false, // 节点不可拖动
      itemStyle: {
        opacity: 0.8, // 节点初始透明度
      },
    }));

    // 处理连线数据，为每条连线设置初始样式
    const links = res.data.links.map((link: any) => ({
      ...link,
      lineStyle: {
        opacity: 0.3, // 连线初始透明度
      },
    }));

    // ECharts 配置项
    const option: echarts.EChartsOption = {
      title: {
        text: "食品安全综合指数重点指标关联网络", // 图表标题
        textStyle: {
          color: "#81E7ED", // 标题颜色
          fontSize: 15, // 标题字体大小
          fontWeight: "bold", // 标题加粗
        },
      },
      tooltip: {
        trigger: "item", // 悬停显示节点或连线信息
        textStyle: { fontSize: 10 },
      },
      animationDuration: 0, // 初始动画时长
      // animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果
      animationEasingUpdate: "linear", // 更新动画缓动效果
      series: [
        {
          type: "graph", // 图类型为关系图
          layout: "force", // 使用力引导布局
          zoom: 0.8,
          force: {
            repulsion: 1000, // 节点之间的斥力
            edgeLength: 1000, // 边的长度
            gravity: 10, // 重力系数
          },
          emphasis: {
            // 鼠标悬停或高亮时的样式
            focus: "adjacency", // 高亮与当前节点相邻的节点和连线
            label: {
              show: true,
              color: "#fff",
              fontSize: 12,
            },
            lineStyle: {
              width: 2,
              color: "#ffeb7b",
            },
          },
          select: {
            // 选中节点时的样式
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2,
            },
          },
          data: nodes, // 节点数据
          links: links, // 连线数据
          categories: res.data.categories, // 节点分类（用于分组着色等）
          roam: true, // 支持鼠标缩放和平移
          label: {
            show: true, // 显示节点标签
            position: "top", // 标签显示在节点上方
            textBorderColor: "#fff", // 标签描边色
            color: "#fff", // 标签字体颜色
          },
          lineStyle: {
            color: "source", // 连线颜色跟随源节点
            curveness: 0, // 连线弯曲度
            type: "solid", // 连线为实线
          },
        },
      ],
    };

    // 渲染图表
    chartRelationship.setOption(option);
  });

  // 窗口变化时自适应
  // window.addEventListener('resize', () => chartRelationship.resize());
};

// 在组件卸载时清理
onBeforeUnmount(() => {
  if (chartRelationship) {
    chartRelationship.dispose();
    window.removeEventListener("resize", () => chartRelationship?.resize());
  }
});

// 添加滚动数据

const scrollData = ref([
  {
    xiangmu: "霉菌",
    xiaolei: "代用茶",
    danwei: "上海新欧尚超市有限公司嘉定店",
    time: "2023-04-11",
    dengji: "red",
  },
  {
    xiangmu: "恩诺沙星(以恩诺沙星与环丙沙星之和计)",
    xiaolei: "鳜鱼",
    danwei: "上海盒马网络科技有限公司长宁第三分公司",
    time: "2023-04-25",
    dengji: "red",
  },
  {
    xiangmu: "氯氟氰菊酯和高效氯氟氰菊酯",
    xiaolei: "芹菜",
    danwei: "上海市奉贤区孙超农产品经营部",
    time: "2023-04-17",
    dengji: "red",
  },
  {
    xiangmu: "亚硝酸盐(以亚硝酸钠计)",
    xiaolei: "熏煮香肠火腿制品",
    danwei: "上海盒马网络科技有限公司宝山第二分公司",
    time: "2023-04-07",
    dengji: "red",
  },
  {
    xiangmu: "呋喃唑酮代谢物",
    xiaolei: "鸡肉",
    danwei: "上海市松江区新桥镇东虎饮食店",
    time: "2023-04-28",
    dengji: "red",
  },
  {
    xiangmu: "氯氟氰菊酯和高效氯氟氰菊酯",
    xiaolei: "姜",
    danwei: "上海申捷餐饮有限公司",
    time: "2023-04-20",
    dengji: "red",
  },
  {
    xiangmu: "啶虫脒",
    xiaolei: "豇豆",
    danwei: "上海市闵行区美佳要超市",
    time: "2023-04-24",
    dengji: "red",
  },
  {
    xiangmu: "防腐剂混合使用时各自用量占其最大使用量的比例之和",
    xiaolei: "酱卤肉制品",
    danwei: "上海普陀盒马互联网网络科技有限公司",
    time: "2023-04-13",
    dengji: "red",
  },
  {
    xiangmu: "环丙氨嗪",
    xiaolei: "鸡肉",
    danwei: "上海优加超市有限公司",
    time: "2023-04-25",
    dengji: "red",
  },
]);

const choujianShoufaData = ref([
  {
    xiangmu: "氯霉素",
    xiaolei: "蛏",
    danwei: "上海农产品中心批发市场经营管理有限公司潘光剑",
    time: "2023-04-28",
    dengji: "red",
  },
  {
    xiangmu: "恩诺沙星(以恩诺沙星与环丙沙星之和计)",
    xiaolei: "鳜鱼",
    danwei: "上海盒马网络科技有限公司长宁第三分公司",
    time: "2023-04-25",
    dengji: "red",
  },
  {
    xiangmu: "呋喃唑酮代谢物",
    xiaolei: "基围虾(海水虾)",
    danwei: "沪陵农贸市场 褚衍涛",
    time: "2023-04-17",
    dengji: "orange",
  },
  {
    xiangmu: "呋喃唑酮代谢物",
    xiaolei: "南美白对虾",
    danwei: "上海普陀盒马互联网络科技有限公司",
    time: "2023-04-13",
    dengji: "orange",
  },
]);

const choujianGaofaData = ref([
  // 第一张图片中的水产品数据
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "鳊鱼",
    choujian: 63,
    buhegelv: 30.2,
    dengji: "red",
  },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "泥鳅",
    choujian: 9,
    buhegelv: 77.8,
    dengji: "red",
  },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "草虾（淡水虾）",
    choujian: 2,
    buhegelv: 50.0,
    dengji: "red",
  },
  {
    xiangmu: "呋喃唑酮代谢物",
    xiaolei: "南美白对虾",
    choujian: 3,
    buhegelv: 33.3,
    dengji: "red",
  },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "牛蛙",
    choujian: 116,
    buhegelv: 10.3,
    dengji: "orange",
  },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "鳜鱼",
    choujian: 10,
    buhegelv: 10.0,
    dengji: "orange",
  },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "鳝鱼",
    choujian: 8,
    buhegelv: 12.5,
    dengji: "orange",
  },
  {
    xiangmu: "氯霉素",
    xiaolei: "蛏",
    choujian: 16,
    buhegelv: 6.3,
    dengji: "yellow",
  },
  {
    xiangmu: "孔雀石绿",
    xiaolei: "黄颡鱼",
    choujian: 31,
    buhegelv: 6.5,
    dengji: "yellow",
  },
]);

const choujianPinfaData = ref([
  // {
  //   xiangmu: "噻虫胺",
  //   xiaolei: "姜",
  //   data: [9.5, 3.077, 10.5, 14.6], // [1月, 2月, 3月, 4月]
  //   prediction: 13.2, // 特殊示例值
  // },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "鳊鱼",
    data: [30.0, 7.143, 28.0, 30.2],
    prediction: 42.6, // 取4月值
  },
  // {
  //   xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
  //   xiaolei: "牛蛙",
  //   data: [0.0, 1.471, 2.5, 10.3],
  //   prediction: 11.7, // 取4月值
  // },
  // {
  //   xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
  //   xiaolei: "泥鳅",
  //   data: [33.3, 0, 7.7, 77.8], // "无"转为 null
  //   prediction: 50, // 取4月值
  // },
  // {
  //   xiangmu: "呋喃唑酮代谢物",
  //   xiaolei: "牛蛙",
  //   data: [0.0, 0.0, 1.3, 3.5],
  //   prediction: 3.9, // 取4月值
  // },
  // {
  //   xiangmu: "呋喃西林代谢物",
  //   xiaolei: "牛蛙",
  //   data: [0.0, 2.941, 2.5, 3.5],
  //   prediction: 3.5, // 取4月值
  // },
  {
    xiangmu: "恩诺沙星（以恩诺沙星与环丙沙星之和计）",
    xiaolei: "黄鱼",
    data: [0.0, 0.0, 2.7, 3.2],
    prediction: 12.5, // 取4月值
  },
]);

const zhifaPinfaData = ref([
  {
    xiangmu: "场所和设备设施清洁维护",
    xiaolei: "场所和设备设施清洁维护",
    data: [50.7, 49.7, 27.3, 22.3],
    prediction: 22.6, // 取4月值
  },
]);

// 新增：品发折线图渲染函数
const choujianEchartsPinfa = () => {
  // 销毁已有实例，防止重复渲染
  if (main7.value && echarts.getInstanceByDom(main7.value)) {
    echarts.getInstanceByDom(main7.value).dispose();
  }
  var myChart = echarts.init(main7.value);
  const months = ["1月", "2月", "3月", "4月", "5月"];
  const colorList = [
    "#5470C6",
    "#91CC75",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3BA272",
    "#FC8452",
  ];
  // 生成两条series：实线+虚线
  const series = choujianPinfaData.value
    .map((item, idx) => [
      // 实线部分
      {
        name: item.xiaolei,
        type: "line",
        data: [...item.data, null], // 1-4月有值，第5月null
        symbol: "circle",
        symbolSize: 8,
        lineStyle: { type: "solid", width: 2 },
        itemStyle: { color: colorList[idx % colorList.length] },
        connectNulls: true,
        showSymbol: true,
        emphasis: { focus: "series" },
        z: 2,
      },
      // 虚线部分
      {
        name: item.xiaolei + "预测",
        type: "line",
        data: [null, null, null, item.data[3], item.prediction], // 只连4-5月
        symbol: "emptyCircle",
        symbolSize: 10,
        lineStyle: { type: "dashed", width: 2 },
        itemStyle: { color: colorList[idx % colorList.length] },
        connectNulls: true,
        showSymbol: true,
        emphasis: { focus: "series" },
        z: 1,
        tooltip: { show: false }, // 关键：隐藏虚线的tooltip
      },
    ])
    .flat();
  // legend只显示品种名
  const legendData = choujianPinfaData.value.map((item) => item.xiaolei);
  const option = {
    title: {
      text: "频发预警",
      left: "center",
      textStyle: { color: "#00ffff", fontSize: 20, fontWeight: "bold" },
      top: 5,
    },
    tooltip: {
      trigger: "axis",
      // valueFormatter: (v) => (v == null ? "无" : v + "%"),
      valueFormatter: (v) => (v == null ? choujianPinfaData.value[0].prediction + "%" : v + "%"),
    },
    legend: {
      data: legendData,
      top: 30,
      textStyle: { color: "#fff" },
      // 只显示主线legend
      selected: legendData.reduce((acc, cur) => {
        acc[cur] = true;
        return acc;
      }, {}),
    },
    grid: { left: 45, right: 30, top: 63, bottom: 45 },
    xAxis: {
      type: "category",
      data: months,
      axisLabel: { color: "#fff" },
    },
    yAxis: {
      show: true,
      type: "value",
      name: "",
      axisLabel: { show: true }, // 隐藏y轴的具体数值
      splitLine: { show: true, lineStyle: { color: "#fff", type: "dashed" } }, // 只显示横线
    },
    series: series,
  };
  myChart.setOption(option);
};

const zhifaEchartsPinfa = () => {
  // 销毁已有实例，防止重复渲染
  if (main8.value && echarts.getInstanceByDom(main8.value)) {
    echarts.getInstanceByDom(main8.value).dispose();
  }
  var myChart = echarts.init(main8.value);
  const months = ["1月", "2月", "3月", "4月", "5月"];
  const colorList = [
    "#5470C6",
    "#91CC75",
    "#FAC858",
    "#EE6666",
    "#73C0DE",
    "#3BA272",
    "#FC8452",
  ];
  // 生成两条series：实线+虚线
  const series = zhifaPinfaData.value
    .map((item, idx) => [
      // 实线部分
      {
        name: item.xiaolei,
        type: "line",
        data: [...item.data, null], // 1-4月有值，第5月null
        symbol: "circle",
        symbolSize: 8,
        lineStyle: { type: "solid", width: 2 },
        itemStyle: { color: colorList[idx % colorList.length] },
        connectNulls: true,
        showSymbol: true,
        emphasis: { focus: "series" },
        z: 2,
      },
      // 虚线部分
      {
        name: item.xiaolei + "预测",
        type: "line",
        data: [null, null, null, item.data[3], item.prediction], // 只连4-5月
        symbol: "emptyCircle",
        symbolSize: 10,
        lineStyle: { type: "dashed", width: 2 },
        itemStyle: { color: colorList[idx % colorList.length] },
        connectNulls: true,
        showSymbol: true,
        emphasis: { focus: "series" },
        z: 1,
        tooltip: { show: false }, // 关键：隐藏虚线的tooltip
      },
    ])
    .flat();
  // legend只显示品种名
  const legendData = zhifaPinfaData.value.map((item) => item.xiaolei);
  const option = {
    title: {
      text: "频发预警",
      left: "center",
      textStyle: { color: "#00ffff", fontSize: 20, fontWeight: "bold" },
      top: 5,
    },
    tooltip: {
      trigger: "axis",
      valueFormatter: (v) => (v == null ? zhifaPinfaData.value[0].prediction + "%" : v + "%"),
      // formatter: '{b0}: {c0}<br />{b1}: {c1}'

    },
    legend: {
      data: legendData,
      top: 30,
      textStyle: { color: "#fff" },
      // 只显示主线legend
      selected: legendData.reduce((acc, cur) => {
        acc[cur] = true;
        return acc;
      }, {}),
    },
    grid: { left: 45, right: 30, top: 63, bottom: 45 },
    xAxis: {
      type: "category",
      data: months,
      axisLabel: { color: "#fff" },
    },
    yAxis: {
      show: true,
      type: "value",
      name: "",
      axisLabel: { show: true }, // 隐藏y轴的具体数值
      splitLine: { show: true, lineStyle: { color: "#fff", type: "dashed" } }, // 只显示横线
    },
    series: series,
  };
  myChart.setOption(option);
};

const jubaoGaofaData = ref([
  {
    huanjie: "销售环节",
    zhonglei: "虚假宣传",
    tousulv: "7.05%",
    dengji: "red",
  },
  {
    huanjie: "销售环节",
    zhonglei: "腐败变质",
    tousulv: "3.21%",
    dengji: "red",
  }, {
    huanjie: "销售环节",
    zhonglei: "存在异物",
    tousulv: "3.18%",
    dengji: "red",
  }, {
    huanjie: "销售环节",
    zhonglei: "原料处理不当",
    tousulv: "2.04%",
    dengji: "yellow",
  }, {
    huanjie: "销售环节",
    zhonglei: "虚假宣传",
    tousulv: "1.97%",
    dengji: "yellow",
  },
]);

const jubaoPinfaData = ref([
  {
    zhuti: "上海盒马网络科技有限公司",
    leibie: "水果类",
    hegelv: "100.0%(65/65)",
    zhonglei: "腐败变质",
    wentishu: 3,
    dengji: "yellow",
  },
  {
    zhuti: "上海盒马网络科技有限公司",
    leibie: "畜禽肉及副产品",
    hegelv: "100.0%(123/123)",
    zhonglei: "腐败变质",
    wentishu: 3,
    dengji: "yellow",
  },
  {
    zhuti: "上海盒马网络科技有限公司",
    leibie: "水产品",
    hegelv: "99.2%(251/253)",
    zhonglei: "腐败变质",
    wentishu: 3,
    dengji: "yellow",
  },
]);

const highlightGraphNodeByName = (nodeName: string) => {
  // 先取消所有高亮
  chartRelationship.dispatchAction({
    type: "downplay",
    seriesIndex: 0,
  });
  // 高亮目标节点
  chartRelationship.dispatchAction({
    type: "highlight",
    seriesIndex: 0,
    name: nodeName,
  });
};

const handleRowClick = (item: any, index: number) => {
  console.log(item, index);

  // 将当前行数据移到首行
  if (index !== 0) {
    jubaoGaofaData.value.splice(index, 1); // 删除当前行
    jubaoGaofaData.value.unshift(item);    // 插入到首行
  }
};


const fancyBtn = ref(null)
const ripple = ref(null)
const handleFancyClick = (e: MouseEvent) => {
  const btn = fancyBtn.value as HTMLElement
  const span = ripple.value as HTMLElement
  if (!btn || !span) return
  const rect = btn.getBoundingClientRect()
  const size = Math.max(rect.width, rect.height)
  span.style.width = span.style.height = size + 'px'
  span.style.left = (e.clientX - rect.left - size / 2) + 'px'
  span.style.top = (e.clientY - rect.top - size / 2) + 'px'
  span.classList.add('show')
  setTimeout(() => span.classList.remove('show'), 500)

  //接下来展示或隐藏关联关系图
  if (relationShow.value) {
    // 隐藏动画：先播放收回动画，动画完成后再隐藏
    isAnimating.value = true
    relationShow.value = false
    setTimeout(() => {
      isAnimating.value = false
    }, 300) // 动画持续时间
  } else {
    // 显示动画：先显示元素（但不可见），然后播放弹出动画
    relationShow.value = true
    // 延迟一帧再开始动画，确保元素已经渲染
    requestAnimationFrame(() => {
      isAnimating.value = true
      setTimeout(() => {
        isAnimating.value = false
      }, 300) // 动画持续时间
    })
  }
}
</script>

<style>
.card1 {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.card-icon1 {
  font-size: 16px;
  color: white;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  /* color: var(--el-color-primary); */
  color: white;
  display: flex;
  align-items: center;
}

#tooltip {
  transition: all 0.3s ease-out;
}

.shanghaimap {
  position: absolute;
  /* 绝对定位 */
  top: 18%;
  /* 从容器的顶部开始 */
  left: 26.5%;
  /* 从容器的左侧开始 */
  width: 47%;
  /* 宽度占满整个容器 */
  height: 75%;
  /* 高度占满整个容器 */
  z-index: 5;
  /* 确保大盒子在小盒子后面 */
  display: flex;
  /* 使用 Flexbox 布局 */
  justify-content: center;
  /* 水平居中对齐 */
  align-items: center;
  /* 垂直居中对齐 */
}

.bar-show {
  max-width: 100px;
  /* 设置最大宽度 */
  white-space: nowrap;
  /* 禁止换行 */
  overflow: hidden;
  /* 超出部分隐藏 */
  text-overflow: ellipsis;
  /* 使用省略号表示超出部分 */
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(10px);
  }
}

.scroll-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  color: #00ffff;
  font-weight: bold;
  border-bottom: 2px solid rgba(0, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.2);
  font-size: 10px;

  .scroll-header-text {
    flex: 1;
    text-align: center;
  }
}

.scroll-container {
  flex: 1;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scroll-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  color: rgb(204, 203, 203);
  font-size: 8px;
}

.scroll-item-text {
  flex: 1;
  text-align: center;
}

.scroll-header-title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #00ffff;
  font-weight: bold;
  /* border-bottom: 2px solid rgba(0, 255, 255, 0.3); */
  background: rgba(0, 0, 0, 0.2);
  padding-top: 3px;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  pointer-events: none;
  transition: transform 0.5s, opacity 0.5s;
  opacity: 0;
  z-index: 1;
}

.ripple.show {
  transform: scale(2.5);
  opacity: 1;
  transition: transform 0.5s, opacity 0.5s;
}

/* 弹出动画 */
@keyframes popup {
  0% {
    opacity: 0;
    transform: scale(0) translate(0, 0);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.8) translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
}

/* 收回动画 */
@keyframes shrink {
  0% {
    opacity: 1;
    transform: scale(1) translate(0, 0);
  }
  50% {
    opacity: 0.8;
    transform: scale(0.8) translate(0, -20px);
  }
  100% {
    opacity: 0;
    transform: scale(0) translate(0, 0);
  }
}

.animate-popup {
  animation: popup 0.3s ease-out forwards;
  transform-origin: bottom right;
}

.animate-shrink {
  animation: shrink 0.3s ease-in forwards;
  transform-origin: bottom right;
}

/* 初始状态 - 隐藏且缩放为0 */
.opacity-0.scale-0 {
  opacity: 0 !important;
  transform: scale(0) !important;
  transition: none !important;
}
</style>
