src/assets/img/aqyh.png

 src/assets/img/djyjq.png

 src/assets/img/dtqh.png

 src/assets/img/dwsg.png

 src/assets/img/gjxl.png

 src/assets/img/jlpb.png

 src/assets/img/jtysqy.png

 src/assets/img/sgyfd.png

 src/assets/img/sslk.png

 src/assets/img/zdlytd.png

 src/views/HomeView.vue

@@ -7,10 +7,15 @@
import { useSettingStore } from "@/stores/index";
import { storeToRefs } from "pinia";
import MessageContent from "@/components/Plugins/MessageContent";
import Chartgd from "@/views/daoAnOffice/chartgd.vue";

const settingStore = useSettingStore();
const { isScale } = storeToRefs(settingStore);
const wrapperStyle = {};
const dtFig=ref(0)
const handlechan=()=>{

}
</script>

<template>
@@ -27,17 +32,23 @@
    :autoScale="isScale"
  >
    <div class="content_wrap">
      <chartgd @changeDt="handlechan"  v-if="dtFig ==0" class="gddt"></chartgd>
      <Headers />
      <RouterView />
      <MessageContent />
      <div class="d-bottom">

      </div>
    </div>
  </scale-screen>
  <Setting />
</template>
<style lang="scss" scoped>
.gddt{
  position: absolute;
  z-index: 0;
  width: 3840px;
  height: 1080px;
}
.content_wrap {
  width: 100%;
  height: 100%;

 src/views/daoAnOffice/center-map.vue

@@ -95,9 +95,9 @@
      <span class="titletext">{{ title }}</span>
      <div class="you"></div>
    </div>
    <div class="mapwrap">
        <chartgd @changeDt="handlechan"  v-if="dtFig ==0"></chartgd>
        <chart2 v-else></chart2>
    <div class="mapwrap" style="display:none;">
<!--        <chartgd @changeDt="handlechan"  v-if="dtFig ==0"></chartgd>-->
        <chart2 ></chart2>
    </div>
  </div>
</template>

 src/views/daoAnOffice/chartgd.vue

@@ -1,41 +1,81 @@
<template>
  <div class="home">
    <div id="map-box"></div>
<!--    <div class="btn">-->
<!--      <el-button type="primary" @click="btnsubmit">确定</el-button>-->
<!--    </div>-->
    <div  style="position: absolute;bottom: 0;left: 0">
      <el-button @click="btnlk" type="primary">实时路况</el-button>
      <el-button @click="toggleTrafic">地图切换</el-button>
    <div  style="position: absolute;bottom: 20%;right: 35%;z-index: 999">
      <div @click="btnlk" class="item-tb">
        <img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
        <p class="item-tb-p">实时路况</p>
      </div>
      <div @click="toggleTrafic" class="item-tb">
        <p class="item-tb-p">地图切换</p>
        <img src="@/assets/img/dtqh.png" alt="" class="item-tb-img">
      </div>

    </div>
    <div class="info-box">
<!--      right菜单-->
      <div class="info-div" @click="accidentProneRoadSections">
        事故易发多发路段
        <img src="@/assets/img/sgyfd.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>事故易发多发路段</p>
          <p>78</p>
        </div>
      </div>
      <div class="info-div" @click="keyTouristChannels">
        重点旅游通道
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>重点旅游通道</p>
         <p>178</p>
       </div>
      </div>
      <div class="info-div">
        都江堰景区
        <img src="@/assets/img/djyjq.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>都江堰景区</p>
         <p>278</p>
       </div>
      </div>
      <div class="info-div" @click="policeForceDeployment">
        警力配备
        <img src="@/assets/img/jlpb.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>警力配备</p>
          <p>348</p>
        </div>
      </div>
      <div class="info-div" @click="fencingConstruction">
        打围施工
        <img src="@/assets/img/dwsg.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>打围施工</p>
         <p>578</p>
       </div>
      </div>
      <div class="info-div">
        交通事故易发点
        <img src="@/assets/img/jtysqy.png" alt="" class="item-tb-img">
        <div class="info-div-p">
          <p>交通事故易发点</p>
          <p>788</p>
        </div>
      </div>
      <div class="info-div" @click="keyTransportationEnterprises">
        重点运输企业
        <img src="@/assets/img/zdlytd.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>重点运输企业</p>
         <p>758</p>
       </div>
      </div>
      <div class="info-div">
        公交线路
        <img src="@/assets/img/gjxl.png" alt="" class="item-tb-img">
      <div class="info-div-p">
        <p>公交线路</p>
        <p>785</p>
      </div>
      </div>
      <div class="info-div">
        安全隐患
        <img src="@/assets/img/aqyh.png" alt="" class="item-tb-img">
       <div class="info-div-p">
         <p>安全隐患</p>
         <p>718</p>
       </div>
      </div>

<!--      搜索-->
@@ -61,6 +101,7 @@
<script lang="ts" setup>
import {shallowRef, defineEmits, defineComponent, ref, onBeforeUnmount, onMounted} from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
import {Pointer} from "@element-plus/icons-vue";

const map = shallowRef(null);
const keyword = ref('');
@@ -642,24 +683,59 @@
  margin: 0px;
  position: relative;
  .info-div{
    align-items: center;
    display: flex;
    cursor: pointer;
    margin-top: 0.5rem;
    background-color: #4E2749;
    //background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;
    .item-tb-img{
      width: 20px;
      height: 20px;
    }
    .info-div-p{
      flex: 1;
      margin-left: 5px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .info-box {
    position: absolute;
    top: 8px;
    right: 8px;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    background-color: #131F3F;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    //background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }
  .item-tb{
      cursor: pointer;
    margin-top: 20px;
    .item-tb-img{
      width: 65px;
    }
    .item-tb-p{
      line-height:35px;
      //background: #00adb5;
      color:#fff;
      text-align: center;
      text-shadow:
          0 0 0.1em #4e6ef2, 0 0 0.3em #36f, 3px 3px #4e6ef2, 4px 4px #315efb
    }
  }
}
.ul{
  margin-top: 10px;

 src/views/daoAnOffice/index.vue

@@ -17,6 +17,8 @@
import Analysis from './right/analysis/index.vue';
import Danger from './right/danger/index.vue';
import Publicize from './right/publicize/index.vue';
import Chartgd from "@/views/index/chartgd.vue";
import {ref} from "vue";

const config = {
  header: ['<span style="color:#42C3E8;font-size: 16px">排名</span>', '<span style="color:#42C3E8;font-size: 16px">行政区划</span>', '<span style="color:#42C3E8;font-size: 16px">数值</span>'],
@@ -75,10 +77,15 @@
  title: '外协溯源被查获数',
  length: 9,
}]
const dtFig=ref(0)
const handlechan=()=>{

}
</script>

<template>
  <div class="index-box">
<!--    <chartgd @changeDt="handlechan"  v-if="dtFig ==0" class="gddt"></chartgd>-->
    <div class="contetn_left">
      <ItemWrap class="contetn_left-top contetn_lr-item" title="近3年交通事故指数">
        <LeftTop />
@@ -243,6 +250,12 @@
</template>

<style scoped lang="scss">
.gddt{
  position: absolute;
  z-index: 0;
  width: 3840px;
  height: 1080px;
}
.index-box {
  width: 100%;
  display: flex;

 src/views/daoAnOffice/left-top.vue

@@ -150,7 +150,7 @@
      .user_Overview_nums_img_p_numt{
        color: #0071F8;
        font-size: 25px;
        font-weight: 400;
        font-weight: 800;
        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
@@ -163,7 +163,7 @@
      .user_Overview_nums_img_p_num{
        color: #F96FF8;
        font-size: 25px;
        font-weight: 400;
        font-weight: 800;
        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
@@ -176,7 +176,7 @@
      .user_Overview_nums_img_p_nums{
        color: #FE3146;
        font-size: 25px;
        font-weight: 400;
        font-weight: 800;
        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;
@@ -189,7 +189,7 @@
      .user_Overview_nums_img_p_numf{
        color: #EA7039;
        font-size: 25px;
        font-weight: 400;
        font-weight: 800;
        .user_Overview_nums_img_p_num_nan{
          font-size: 14px;
          color: #fff;

 src/views/index/chartgd.vue

@@ -642,20 +642,28 @@
  margin: 0px;
  position: relative;
  .info-div{
    cursor: pointer;
    margin-top: 0.5rem;
    background-color: #4E2749;
    //background-color: #4E2749;
    height: 2.5rem;
    line-height: 2.5rem;
    padding-left: 0.5rem;
    font-family: PingFang SC;
    font-weight: 800;
    color: #74A6F2;
  }
  .info-box {

    position: absolute;
    top: 8px;
    right: 8px;
    top: 80px;
    right: 34%;
    width: 300px;
    //height: 100%;
    //background-color: #1f1f1f;
    background-color: #131F3F;
    opacity: 0.6;
    background: #11223A;
    border: 1px solid #29466A;
    //background-color: #131F3F;
    padding: 1rem;
    display: flex;
    flex-direction: column;