mailbox-lan-vue/src/views/datascreen/index.vue

<template>
  <!--头部-->
  <div class="body">
  <div class="header">
    <img src="@/assets/logo.png">
  </div>
  <!--主体-->
  <div class="main clearfix">
    <div class="main-left">
      <div class="box-container">
        <div class="name-title" >
         群众动态
        </div>
        <div class="boxLeftMailCon">
          <ul class="mailUl">
            <li v-for="item in peopleMaillist" :key="item.id"  @click="queryDetails(item)">
              <p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span></p>
              <p>{{ formatDate(item.createTime) }}</p>
            </li>
          </ul>
        </div>

      </div>
      <div class="box-container">
        <div class="name-title">
         分县市局三率排名
        </div>
        <div id="graduate">
          <el-tabs v-model="rateActiveName" class="echart-tabs"  @tab-click="rateResetTimer"   type="card"  >
            <el-tab-pane label="办结率" name="completionRate">
              <div class="ratesbox rates">
                <ul class="h100">
                  <li v-for="item in completeList" :key="item.id">
                    <span>{{ item.name }}</span>
                    <div class="ratenav">
                      <div class="ratebar"><span  :style="{ width: item.rate }"></span></div>
                    </div>
                    <div class="ratesum">
                      <p>{{ item.rate }}<span class="ratespan"><i>{{ item.completed }} / </i>{{ item.sum }}</span></p>
                    </div>
                  </li>
                </ul>

              </div>
            </el-tab-pane>
            <el-tab-pane label="解决率" name="resolutionRate">
              <div class="ratesbox rates">
                <ul class="h100">
                  <li v-for="item in rateMap.resolvedList" :key="item.id">
                    <span>{{ item.name }}</span>
                    <div class="ratenav">
                      <div class="ratebar"><span  :style="{ width: item.rate }"></span></div>
                    </div>
                    <div class="ratesum">
                      <p>{{ item.rate }}<span class="ratespan"><i>{{ item.resolved }} / </i>{{ item.sum }}</span></p>
                    </div>
                  </li>
                </ul>

              </div>
            </el-tab-pane>
            <el-tab-pane label="满意率" name="satisfactionRate">
              <div class="ratesbox rates">
                <ul class="h100">
                  <li v-for="item in rateMap.satisfiedList" :key="item.id">
                    <span>{{ item.name }}</span>
                    <div class="ratenav">
                      <div class="ratebar"><span  :style="{ width: item.rate }"></span></div>
                    </div>
                    <div class="ratesum">
                      <p>{{ item.rate }}<span class="ratespan"><i>{{ item.satisfied }} / </i>{{ item.sum }}</span></p>
                    </div>
                  </li>
                </ul>

              </div>

            </el-tab-pane>
          </el-tabs>

        </div>

      </div>
    </div>
    <div class="main-middle">
      <div class="border-console  ">
        <div class="console-div">
          <ul class="clearfix">
            <li><h2 class="bulebg">{{ consoleMap.todaySum }}</h2><span>今日来信</span></li>
            <li><h2 class="yellowbg">{{ consoleMap.allSum }}</h2><span>来信总数</span></li>
            <li><h2 class="bulebg">{{ consoleMap.completed }}</h2><span>办结总数</span></li>
            <li><h2 class="yellowbg">{{ consoleMap.completedrate }}</h2><span>办结率</span></li>
            <li><h2 class="bulebg">{{ consoleMap.satisfiedrate }}</h2><span>满意率</span></li>
            <li><h2 class="bulebg">{{ consoleMap.resolvedrate }}</h2><span>解决率</span></li>
          </ul>
        </div>

      </div>
      <div class="border-console">
        <div id="map" ref="map"></div>
      </div>
      <div class="mail-container">
        <div class="name-title">
         来信趋势
        </div>
        <div v-if="seenDay" class="trendOptions">
          <el-select
              v-model="trendDayValue"
              class="m-2"
              :placeholder="selectTrend"
              size="small"
              style="width: 100px;z-index: 3000"
              @change="getMailTrend"
          >
            <el-option
                v-for="item in trendDayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
        <div v-if="seenWeek" class="trendOptions">
          <el-select
              v-model="trendWeekValue"
              class="m-2"
              :placeholder="selectTrend"
              size="small"
              style="width: 100px;z-index: 3000"
              @change="getMailTrend"
          >
            <el-option
                v-for="item in trendWeekOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>

        <div v-if="seenMonth" class="trendOptions">
          <el-select
              v-model="trendMonthValue"
              class="m-2"
              :placeholder="selectTrend"
              size="small"
              style="width: 100px;z-index: 3000"
              @change="getMailTrend"
          >
            <el-option
                v-for="item in trendMonthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>

        <div ref="tabsContainer">

			<el-tabs  v-model="trendActiveName" class="trend-tabs"  type="card"  @tab-click="trendResetTimer" >
            <el-tab-pane label="按天计算" name="dayTrend">
              <div ref="day_echart" id="dayEchart" :style="{ width: chartWidth + 'px' }"></div>
            </el-tab-pane>
            <el-tab-pane label="按周计算" name="weekTrend"  >
              <div ref="week_echart" id="weekEchart" :style="{ width: chartWidth + 'px' }"  ></div>
            </el-tab-pane>
        <el-tab-pane label="按月计算" name="monthTrend" >
          <div ref="month_echart" id="monthEchart" :style="{ width: chartWidth + 'px' }"  ></div>
        </el-tab-pane>
          </el-tabs>
        </div>

      </div>
    </div>
    <div class="main-right">
      <div class="box-container">
        <div class="name-title">
          今日值班
        </div>
        <div >
          <el-tabs  v-model="dutyActiveName" class="echart-tabs"  type="card" @tab-click="dutyResetTimer">
            <el-tab-pane label="市局专班" name="dutySj">
              <div class="boxRightMailCon">
                <ul class="dutyUl">
                  <li v-for="item in dutySjList" :key="item.id">
                    <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                  </li>

                </ul>
              </div>

            </el-tab-pane>
            <el-tab-pane label="分县市局" name="dutyFj">
              <ul class="dutyUl">
                <li v-for="item in dutyList.dutyFjList" :key="item.id">
                  <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                </li>

              </ul>

            </el-tab-pane>
            <el-tab-pane label="支队" name="dutyZd">
              <ul class="dutyUl">
                <li v-for="item in dutyList.dutyZdList" :key="item.id">
                  <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                </li>

              </ul>
            </el-tab-pane>
            <el-tab-pane label="部委组警校" name="dutyBw">
              <ul class="dutyUl">
                <li v-for="item in dutyList.dutyBwList" :key="item.id">
                  <p><span class="dutyDept">{{ item.departName }}</span> <span class="dutyULspan">{{ item.mobile }}</span> <span class="dutyULspan">{{ item.policeName }}</span></p>
                </li>

              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <div class="box-container">
        <div class="name-title">
         信件类型排名
        </div>
        <div class=" boxnav paim">
          <ul class="h100">
            <li v-for="item in mailTypeRankList" :key="item.id">
              <span>{{item.rownumber}}</span>
              <div class="pmnav">
                <p>{{ item.category }}</p>
                <div class="pmbar"><span :style="{ width: item.countrate }"></span><i></i></div>
              </div>
              <div class="pmsum">
                <p>{{item.sumcount}}</p>
              </div>
            </li>


          </ul>

        </div>
      </div>

    </div>
	  <details-popup
            v-if="showDetails"
            ref="detailsRef"
             @success="closeDetails"
            @close="closeDetails"
        />
  </div>
  </div>
</template>
<style   >
@import 'assets/css/index.css';

.body{

 background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
 background-size: cover; /* 背景图片大小适应容器 */


}
</style>


<script lang="ts" setup>
import { ref,onMounted,watch ,onBeforeUpdate ,onBeforeMount,onUnmounted} from 'vue'
import type { TabsPaneContext } from 'element-plus'
import * as echarts from 'echarts';
import chinaJSON from "./changsha.json";
import yuhuaJSON from "@/static/430111.json";
import { peopleMail, dutyDay ,threeRate,consoleData,mailTypeRank,mailTrend,mapCountyData} from '@/api/datascreen'
import { useRouter } from "vue-router";
import {menuLists} from "~/api/perms/menu.ts";
import DetailsPopup from './details.vue'
const detailsRef = shallowRef<InstanceType<typeof DetailsPopup>>()
const showDetails = ref(false)
const router = useRouter();

const rateActiveName = ref('completionRate')
const trendActiveName = ref('dayTrend')
const dutyActiveName = ref('dutySj')

let peopleMaillist=  ref([]);
let dutyList =  ref([]);
let typeRankList=  ref([]);
let rateMap =  ref([]);
let mailTrendMap =  ref([]);
let consoleMap =  ref([]);
let mailTypeRankList= reactive([]) as any[];
let completeList =  reactive([]) as any[];
let dutySjList=  reactive([]) as any[];

const intervalTimeRate = 3500; // 自动切换的间隔时间，单位为毫秒
const intervalTimeTrend = 3000; // 自动切换的间隔时间，单位为毫秒
const intervalTimeDuty = 3200; // 自动切换的间隔时间，单位为毫秒
let intervalIdRate: NodeJS.Timeout | null = null;
let intervalIdTrend: NodeJS.Timeout | null = null;
let intervalIdDuty: NodeJS.Timeout | null = null;

let dayXList=  reactive([]) as any[];
let dayYList=  reactive([]) as any[];
let weekXList=  reactive([]) as any[];
let weekYList=  reactive([]) as any[];
let monthXList=  reactive([]) as any[];
let monthYList=  reactive([]) as any[];
let map = ref('map');


let mapDataList=  reactive([]) as any[];
let dataIndex=0

let currentIndex = 0;
let chartWidth=900;
const tabsContainer = ref(null);

let day_echart = ref(null);
let month_echart = ref(null);
let week_echart = ref(null);

let trendDayValue = ref('15')
let trendWeekValue = ref('7')
let trendMonthValue = ref('2024')
const selectTrend= "请选择"
let seenDay=true
let seenWeek=false
let seenMonth=false
let mapShow=true
let trendDayOptions = [
  {
    value: '15',
    label: '最近15天',
  },
  {
    value: '30',
    label: '最近30天',
  }
]

let trendWeekOptions = [

  {
    value: '7',
    label: '最近7周',
  },
  {
    value: '15',
    label: '最近15周',
  }
]

let trendMonthOptions =reactive([]) as any[];

const selectYear = (year) =>{
  var myDate= new Date();
  var startYear=myDate.getFullYear()-year;//起始年份
  var endYear=myDate.getFullYear();//结束年份
  for (var i=startYear;i<=endYear;i++) {
    var obj = {"value":i,"label":i};
    trendMonthOptions.push(obj);
  }
}

//console大屏数据
const getConsoleDataMap = async () => {
  try {
    consoleMap = await consoleData()
 
  } catch (error) {
  }
}

//类型排行
const getMailTypeRankList = async () => {
  try {
    typeRankList = await mailTypeRank()
   
    typeRankList.forEach((element: any) => {
      mailTypeRankList.push(element);//循环赋值
    });
  } catch (error) {
  }
}

//获取最近来信
const getPopleMailLists = async () => {
  try {
    peopleMaillist = await peopleMail()
  } catch (error) {
  }
}

//获取今日值班
const getDutyDay = async () => {
  try {
       dutyList = await dutyDay()
    dutyList.dutySjList.forEach((element: any) => {
      dutySjList.push(element);//循环赋值
    });
  } catch (error) {
  }
}
const getThreeRate= async () => {
  try {
    rateMap = await threeRate()
    rateMap.completeList.forEach((element: any) => {
      completeList.push(element);//循环赋值
    });
  } catch (error) {
  }
}

const getMailTrend= async () => {
  try {
    const params = reactive({
      day: trendDayValue.value,
      week: trendWeekValue.value,
      year: trendMonthValue.value
    })
    mailTrendMap = await mailTrend(params)

    dayXList=mailTrendMap.dayXList
    dayYList=mailTrendMap.dayYList;
    dayEcharts()
      weekXList=mailTrendMap.weekXList;
      weekYList= mailTrendMap.weekYList;
    weekEcharts()
      monthXList= mailTrendMap.monthXList;
      monthYList=mailTrendMap.monthYList;
     monthEcharts()
  } catch (error) {
  }
}

const getMapDataList = async () => {
 try {
    
    mapDataList = await mapCountyData()
	changsMap()
  } catch (error) {
  }
}

onMounted(() => {
  selectYear(10)
queryDetails()
  getThreeRate();
  getPopleMailLists();
  getDutyDay();
  getMailTypeRankList();
  getMailTrend();
  getMapDataList()
  getConsoleDataMap()
  startRateAutoSwitch();
  startTrendAutoSwitch();
  startDutyAutoSwitch();
  dayEcharts()
  changsMap()


  const width = tabsContainer.value.offsetWidth - 40;
  chartWidth= width;

});

 

// 在组件卸载前清除计时器
onUnmounted(() => {
  clearRateTimer()
  clearTrendTimer()
  clearDutyTimer()
});


const formatDate=(value)=>{
  const date = new Date(value);
  return date.toLocaleString();
}
const startRateAutoSwitch = () => {
  intervalIdRate = setInterval(() => {
    if (rateActiveName.value === 'completionRate') {
      rateActiveName.value = 'resolutionRate';
    } else if (rateActiveName.value === 'resolutionRate') {
      rateActiveName.value = 'satisfactionRate';
    } else {
      rateActiveName.value = 'completionRate';
    }
  }, intervalTimeRate);
};

const startTrendAutoSwitch = () => {
  var dayChart = echarts.init(day_echart.value);
   var monthChart = echarts.init(month_echart.value);
  var weekChart = echarts.init(week_echart.value);
  monthChart.resize(chartWidth)
  dayChart.resize(chartWidth)
  weekChart.resize(chartWidth)
  intervalIdTrend = setInterval(() => {
    if (trendActiveName.value === 'dayTrend') {
      trendActiveName.value = 'weekTrend';
        seenDay=false
        seenWeek=true
        seenMonth=false
        weekEcharts()
    } else if (trendActiveName.value === 'weekTrend') {
      trendActiveName.value = 'monthTrend';
      seenDay=false
      seenWeek=false
      seenMonth=true
      monthEcharts()
    } else {
      trendActiveName.value = 'dayTrend';
      seenDay=true
      seenWeek=false
      seenMonth=false
      dayEcharts()
    }
  }, intervalTimeTrend);
};

const startDutyAutoSwitch = () => {
  intervalIdDuty = setInterval(() => {
    if (dutyActiveName.value === 'dutySj') {
      dutyActiveName.value = 'dutyFj';
    } else if (dutyActiveName.value === 'dutyFj') {
      dutyActiveName.value = 'dutyZd';
    } else if (dutyActiveName.value === 'dutyZd') {
      dutyActiveName.value = 'dutyBw';
    } else {
      dutyActiveName.value = 'dutySj';
    }
  }, intervalTimeDuty);
};



const clearRateTimer = () => {
  if (intervalIdRate) {
    clearInterval(intervalIdRate);
    intervalIdRate = null;
  }

};

const clearTrendTimer = () => {
  if (intervalIdTrend) {
    clearInterval(intervalIdTrend);
    intervalIdTrend = null;
  }
};
const clearDutyTimer = () => {
  if (intervalIdDuty) {
    clearInterval(intervalIdDuty);
    intervalIdDuty = null;
  }
};
const rateResetTimer = () => {
  const width = tabsContainer.value.offsetWidth ;
  chartWidth= width;
  clearRateTimer();
  startRateAutoSwitch();
};


const trendResetTimer = (pane: TabsPaneContext, ev: Event) => {
  const width = tabsContainer.value.offsetWidth ;
  chartWidth= width;
  if (pane.paneName === 'dayTrend') {
    seenDay=true
    seenWeek=false
    seenMonth=false
  } else if (pane.paneName === 'weekTrend') {
    seenDay=false
    seenWeek=true
    seenMonth=false
  } else {
    seenDay=false
    seenWeek=false
    seenMonth=true
  }
  dayEcharts()
  monthEcharts()
  weekEcharts()
  clearTrendTimer();
  startTrendAutoSwitch();
};

const dutyResetTimer = () => {
  const width = tabsContainer.value.offsetWidth ;
  chartWidth= width;
  clearDutyTimer();
  startDutyAutoSwitch();
};




const changsMap = () =>{
  echarts.registerMap("map", chinaJSON as any);
  let  myMap = echarts.init(map.value);
  //设置配置项
  myMap.setOption({
    geo: {
      // 是上面注册时的名字哦，registerMap（'名字保持一致'）
      map: "map",
    },
    tooltip: {
	  show: mapShow,
      trigger: 'item',
      position: 'right',
      formatter: function(params){

		if (typeof params.data === 'undefined') {
		 
		}else{
        var tt ='<div class="tooltip">'+
        '<div class="tooltip-title" > '+params.name+'</div>'+
        '<div class="tooltip-content" >'+
        '<ul class="tooltip-ul">'+
            '<li>今日来信 <span>'+params.data.todaysum+'</span></li>'+
        '<li>来信总数 <span>'+params.data.allsum+'</span></li>'+
        '<li>办结总数 <span>'+params.data.completed+'</span></li>'+
        '<li>办结率 <span>'+params.data.completedrate+'</span></li>'+
        '<li>解决率 <span>'+params.data.resolvedrate+'</span></li>'+
        '<li>满意率 <span>'+params.data.satisfiedrate+'</span></li>'+
       ' </ul></div></div>'
        return tt;
		}
      },
      backgroundColor: '#031577',      //
      borderColor: '#0A2F86',
      borderWidth: 0,                // 设置边框宽度为1像素
      borderRadius: 3,               // 设置边框半径为3像素
      shadowBlur: 0,                 // 设置阴影模糊程度为8像素
      shadowOffsetX: 0,              // 设置水平阴影位移量为0像素
      shadowOffsetY: 0,              // 设置垂直阴影位移量为6像素
      
    },
    visualMap: {
      type: 'piecewise',
      bottom: 10,
      pieces: [
        { gte: 85, lte: 100, label: '办结率高于85%' },
        { gte: 65, lte: 85, label: '办结率低于85%' },
        { gte: 0, lte: 65, label: '办结率低于65%' },
      ],
     // text: ['办结率'],
      right: 10, // 右边距
      bottom: 10, // 底边距
      realtime: false,
      orient: 'horizontal', // 水平显示
      textStyle: {
        color: '#fff', // 文字颜色
      },
      calculable: true,
      inRange: {
        color: ['#D34343','#F6A149', '#4987F6']
      }
    },
    series: [
      {
        name: '长沙',
        type: 'map',
        map: 'map',
        hoverAnimation: true,
        label: {
          show: true,
          color: "white",
        },
        data: mapDataList,
      }
    ]
  });

  myMap.on('click', function (params) {
 
    router.push({path:'/countyData',query:{name:params.name}});
  });

 
  switchRegion(); // 开始自动切换


}



const switchRegion = () => {
  const chart = echarts.getInstanceByDom(map.value);
  const option = chart.getOption();
  const mapSeriesIndex = option.series.findIndex((series) => series.type === 'map');

  if (mapSeriesIndex >= 0) {
    const mapData = option.series[mapSeriesIndex].data;
    const regionCount = mapData.length;
    const prevIndex = currentIndex;
    currentIndex = (currentIndex + 1) % regionCount;


     //mapData[prevIndex].selected = false; // 取消上一个区域的选中状态
    // mapData[currentIndex].selected = true; // 设置当前区域为选中状态

    var hourIndex = 0;
    var carouselTime = null;

    carouselTime = setInterval(() => {
      //dispatchAction echarts的API：触发图表行为
      chart.dispatchAction({
        type: "downplay", //downplay 取消高亮指定的数据图形
        seriesIndex: 0
      });
      chart.dispatchAction({
        type: "highlight", //highLight 高亮指定的数据图形
        seriesIndex: 0, //系列index
        dataIndex: hourIndex //数据index
      });
      chart.dispatchAction({
        type: "showTip", //showTip 显示提示框
        seriesIndex: 0,
        dataIndex: hourIndex
      });
      hourIndex++;
      //当循环到数组当中的最后一条数据后，重新进行循环
      if (hourIndex > mapData.length) {
        hourIndex = 0;
      }
    }, 3000);
    //鼠标移入组件时停止轮播
    chart.on("mousemove", (e) => {
      clearInterval(carouselTime); //清除循环
      chart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
      });
      chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: e.dataIndex
      });
      chart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: e.dataIndex
      });
    });
    //鼠标移出组件时恢复轮播
    chart.on("mouseout", () => {
      carouselTime = setInterval(() => {
        chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,

        });
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: hourIndex
        });
        chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: hourIndex
        });
        hourIndex++;
        if (hourIndex > mapData.length) {
          hourIndex = 0;
        }
      }, 3000);
    });
    chart.setOption(option);
  }
};

const dayEcharts=() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(day_echart.value);

  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#dddc6b'
        }
      }
    },
    legend: {
      top:'0%',
      right: '0%',
      data:['信件数'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize:'12',
      }
    },
    grid: {
      left: '10',
      top: '30',
      right: '10',
      bottom: '10',
      containLabel: true
    },

    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLabel:  {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize:12,
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }

      },

      data: dayXList

    }, {

      axisPointer: {show: false},
      axisLine: {  show: false},
      position: 'bottom',
      offset: 20,



    }],

    yAxis: [{
      type: 'value',
      axisTick: {show: false},
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel:  {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize:12,
        },
      },

      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }],
    series: [
      {
        name: '信件数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {

          normal: {
            color: '#0184d5',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            }, {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          }
        },
        itemStyle: {
          normal: {
            color: '#0184d5',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12
          }
        },
        data: dayYList

      }

    ]

  };
 
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize",function(){
    myChart.resize(chartWidth);
  });
}

const monthEcharts=() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(month_echart.value);
  let option1 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#dddc6b'
        }
      }
    },
    legend: {
      top:'0%',
      right: '0%',
      data:['信件数'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize:'12',
      }
    },
    grid: {
      left: '10',
      top: '30',
      right: '10',
      bottom: '10',
      containLabel: true
    },

    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLabel:  {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize:12,
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }

      },

      data: monthXList

    }, {

      axisPointer: {show: false},
      axisLine: {  show: false},
      position: 'bottom',
      offset: 20,



    }],

    yAxis: [{
      type: 'value',
      axisTick: {show: false},
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel:  {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize:12,
        },
      },

      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }],
    series: [
      {
        name: '信件数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {

          normal: {
            color: '#0184d5',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            }, {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          }
        },
        itemStyle: {
          normal: {
            color: '#0184d5',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12
          }
        },
        data: monthYList

      }

    ]

  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option1);

  window.addEventListener("resize",function(){
    myChart.resize(chartWidth);
  });
}


const weekEcharts=() => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(week_echart.value);
  let option1 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        lineStyle: {
          color: '#dddc6b'
        }
      }
    },
    legend: {
      top:'0%',
      right: '0%',
      data:['信件数'],
      textStyle: {
        color: 'rgba(255,255,255,.5)',
        fontSize:'12',
      }
    },
    grid: {
      left: '10',
      top: '30',
      right: '10',
      bottom: '10',
      containLabel: true
    },

    xAxis: [{
      type: 'category',
      boundaryGap: false,
      axisLabel:  {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize:12,
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }

      },

      data:  weekXList

    }, {

      axisPointer: {show: false},
      axisLine: {  show: false},
      position: 'bottom',
      offset: 20,



    }],

    yAxis: [{
      type: 'value',
      axisTick: {show: false},
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel:  {
        textStyle: {
          color: "rgba(255,255,255,.6)",
          fontSize:12,
        },
      },

      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      }
    }],
    series: [
      {
        name: '信件数',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {

          normal: {
            color: '#0184d5',
            width: 2
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(1, 132, 213, 0.4)'
            }, {
              offset: 0.8,
              color: 'rgba(1, 132, 213, 0.1)'
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
          }
        },
        itemStyle: {
          normal: {
            color: '#0184d5',
            borderColor: 'rgba(221, 220, 107, .1)',
            borderWidth: 12
          }
        },
        data: weekYList

      }

    ]

  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option1);

  window.addEventListener("resize",function(){
    myChart.resize(chartWidth);
  });
}
const queryDetails = async (data: any) => {
	mapShow=false
	changsMap()
    showDetails.value = false
    await nextTick()
    detailsRef.value?.open('details')
    detailsRef.value?.getDetail(data)
}

const closeDetails=()=>{
	mapShow=true
	changsMap()
	showDetails.value = false
}

</script>
<style>

</style>