.gitignore

@@ -13,6 +13,7 @@
dist-ssr
coverage
*.local
*.mp4

/cypress/videos/
/cypress/screenshots/

 src/assets/img/map/map-a1.png

 src/assets/img/map/map-a10.png

 src/assets/img/map/map-a11.png

 src/assets/img/map/map-a2.png

 src/assets/img/map/map-a3.png

 src/assets/img/map/map-a4.png

 src/assets/img/map/map-a5.png

 src/assets/img/map/map-a6.png

 src/assets/img/map/map-a7.png

 src/assets/img/map/map-a8.png

 src/assets/img/map/map-a9.png

 src/assets/img/map/map.png

 src/views/daoAnOffice/center-map copy 2.vue

New file
@@ -0,0 +1,255 @@
<template>
  <div class="centermap">
    <div class="maptitle">
      <img src="@/assets/img/icon/map_title.png" alt="">
    </div>
    <div class="mapwrap">
      <div ref="map" class="map-style"></div>
    </div>

    <div class="map-info-container">
      <div class="info-title-container">
        <div class="img-bg">
          <img src="@/assets/img/icon/map_info_title.png" alt="">
        </div>
        <div class="info-title">
          <div class="icon">
            <img src="@/assets/img/icon/arrow_right.png" alt="">
          </div>
          <span class="title">都江堰市</span>
        </div>
      </div>
      <div class="info-content-container">
        <div class="info-item">
          <div class="info-lable">事故易发多发路段：</div>
          <div class="info-text">78</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点旅游通道：</div>
          <div class="info-text">12</div>
        </div>
        <div class="info-item">
          <div class="info-lable">都江堰景区：</div>
          <div class="info-text">5</div>
        </div>
        <div class="info-item">
          <div class="info-lable">警力配备：</div>
          <div class="info-text">265</div>
        </div>
        <div class="info-item">
          <div class="info-lable">打围施工：</div>
          <div class="info-text">12</div>
        </div>
        <div class="info-item">
          <div class="info-lable">交通事故易发点：</div>
          <div class="info-text">31</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点运输企业：</div>
          <div class="info-text">19</div>
        </div>
        <div class="info-item">
          <div class="info-lable">公交线路：</div>
          <div class="info-text">89</div>
        </div>
        <div class="info-item">
          <div class="info-lable">安全隐患：</div>
          <div class="info-text">3</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { ref, onMounted, nextTick } from "vue";

import mapData from '@/assets/map/dujiangyan.json';


echarts.registerMap('dujiangyan', mapData);

const map = ref(null);
let mapChart = null;

const mapConfig = {
  geo3D: {
    map: "dujiangyan", //注册地图的名字
    roam: true, //开启鼠标缩放和平移漫游。默认不开启
    bottom: 80,
    left: 10,
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 0.7, //透明度
      borderWidth: 1.5, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 16, //
    },
    // 标签
    label: {
      show: true,
      color: "#fff", //地图初始化区域字体颜色
      fontSize: 18,
      formatter: function (params) {
        return params.name
      },
    },
    // 控制器
    viewControl: {
      beta: 80,
      alpha: 55,
      distance: 210,
      maxBeta: 180
    },
    // 灯光
    light: {
      main: {
        shadow: true,
        intensity: 1
      }
    },
    // 鼠标移入时样式
    emphasis: {
      itemStyle: {
        color: "#F63545"
      }
    }
  }
};

const testClick = () => {
  console.log(11231);
}

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      mapChart = echarts.init(map.value);
      mapChart.setOption(mapConfig, true);
    }, 1000);
  })
})
</script>

<style scoped lang="scss">
.centermap {
  margin-bottom: 30px;
  position: relative;

  .mapwrap {
    //height: 580px;
    height: 900px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
      z-index: 10;
    }
  }
}

.map-style {
  width: 100%;
  height: 100%;
}

.maptitle {
  width: 308px;
  position: absolute;
  left: 0;
  top: 0;
}

.map-info-container {
  width: 225px;
  position: absolute;
  right: 0;
  bottom: 200px;
  background: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;

  .info-title-container {
    width: 100%;
    position: relative;

    .img-bg {
      width: 100%;
    }

    .info-title {

      width: 100%;
      position: absolute;
      top: 5px;
      left: 0;
      display: flex;
      align-items: center;

      .icon {
        width: 15px;
        margin: 0 5px 0 12px;
      }

      .title {
        font-weight: 400;
        font-size: 20px;
        color: #FFFFFF;
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
        font-style: italic;
        background: linear-gradient(180deg, #FFFFFF 0%, #70B2F4 100%);
        -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
      }
    }
  }

  .info-content-container {
    padding: 18px 20px;
    margin-top: -40px;
    font-size: 14px;

    .info-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #4481DD;
      line-height: 28px;

      .info-text {
        color: #fff;
      }
    }
  }

}

.info-lable {
  font-family: 'PingFang SC' !important;
}

.test {
  position: absolute;
  top: 0;
}

</style>

 src/views/daoAnOffice/center-map.vue

@@ -1,12 +1,10 @@


<template>
  <div class="centermap">
    <div class="maptitle">
      <img src="@/assets/img/icon/map_title.png" alt="">
    </div>
    <div class="mapwrap">
      <div ref="map" class="map-style"></div>
      <CityMap @mapItemClick="mapItemClick" @cancleClick="cancleClick"></CityMap>
    </div>

    <div class="map-info-container">
@@ -18,45 +16,45 @@
          <div class="icon">
            <img src="@/assets/img/icon/arrow_right.png" alt="">
          </div>
          <span class="title">都江堰市</span>
          <span class="title">{{ activeData.name ? activeData.name : '都江堰市' }}</span>
        </div>
      </div>
      <div class="info-content-container">
        <div class="info-item">
          <div class="info-lable">事故易发多发路段：</div>
          <div class="info-text">78</div>
          <div class="info-text">{{ activeData.data.type1 ? activeData.data.type1 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点旅游通道：</div>
          <div class="info-text">12</div>
          <div class="info-text">{{ activeData.data.type2 ? activeData.data.type2 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">都江堰景区：</div>
          <div class="info-text">5</div>
          <div class="info-text">{{ activeData.data.type3 ? activeData.data.type3 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">警力配备：</div>
          <div class="info-text">265</div>
          <div class="info-text">{{ activeData.data.type4 ? activeData.data.type4 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">打围施工：</div>
          <div class="info-text">12</div>
          <div class="info-text">{{ activeData.data.type5 ? activeData.data.type5 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">交通事故易发点：</div>
          <div class="info-text">31</div>
          <div class="info-text">{{ activeData.data.type6 ? activeData.data.type6 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">重点运输企业：</div>
          <div class="info-text">19</div>
          <div class="info-text">{{ activeData.data.type7 ? activeData.data.type7 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">公交线路：</div>
          <div class="info-text">89</div>
          <div class="info-text">{{ activeData.data.type8 ? activeData.data.type8 : 0 }}</div>
        </div>
        <div class="info-item">
          <div class="info-lable">安全隐患：</div>
          <div class="info-text">3</div>
          <div class="info-text">{{ activeData.data.type9 ? activeData.data.type9 : 0 }}</div>
        </div>
      </div>
    </div>
@@ -65,71 +63,96 @@


<script setup>
import * as echarts from 'echarts';
import 'echarts-gl';
import { ref, onMounted, nextTick } from "vue";
import CityMap from './center/city-map.vue';
import { ref,onMounted } from "vue";
const mapData = ref([
  {
    id: 1,
    name: '龙池镇',
    data: { type1: 1, type2: 2, type3: 4, type4: 5, type5: 12, type6: 31, type7: 19, type8: 10, type9: 20 },
  },
  {
    id: 2,
    name: '玉堂街道',
    data: { type1: 5, type2: 12, type3: 5, type4: 13, type5: 12, type6: 31, type7: 19, type8: 26, type9: 3 },
  },
  {
    id: 3,
    name: '青城山镇',
    data: { type1: 12, type2: 12, type3: 52, type4: 3, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 4,
    name: '石羊镇',
    data: { type1: 21, type2: 12, type3: 24, type4: 12, type5: 12, type6: 31, type7: 19, type8: 13, type9: 31 },
  },
  {
    id: 5,
    name: '幸福街道',
    data: { type1: 10, type2: 12, type3: 5, type4: 52, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 6,
    name: '银杏街道',
    data: { type1: 31, type2: 13, type3: 5, type4: 265, type5: 12, type6: 31, type7: 19, type8: 21, type9: 3 },
  },
  {
    id: 7,
    name: '灌口街道',
    data: { type1: 52, type2: 12, type3: 5, type4: 265, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 8,
    name: '奎光塔街道',
    data: { type1: 53, type2: 35, type3: 5, type4: 15, type5: 12, type6: 31, type7: 19, type8: 13, type9: 3 },
  },
  {
    id: 9,
    name: '天马镇',
    data: { type1: 13, type2: 2, type3: 5, type4: 51, type5: 12, type6: 31, type7: 19, type8: 12, type9: 15 },
  },
  {
    id: 10,
    name: '聚源镇',
    data: { type1: 13, type2: 35, type3: 65, type4: 24, type5: 12, type6: 35, type7: 3, type8: 42, type9: 24 },
  },
  {
    id: 11,
    name: '蒲阳街道',
    data: { type1: 6, type2: 6, type3: 63, type4: 42, type5: 12, type6: 31, type7: 19, type8: 89, type9: 3 },
  },
]);

import mapData from '@/assets/map/dujiangyan.json';
const activeData = ref({
  name: '都江堰市',
  data: {},
});

const mapItemClick = (id) => {
  activeData.value = mapData.value.find((item) => item.id === id);
}

echarts.registerMap('dujiangyan', mapData);
const cancleClick = () => {
  activeData.value = {
    name: '都江堰市',
    data: totalNum(),
  };
}

const map = ref(null);
let mapChart = null;

const mapConfig = {
  geo3D: {
    map: "dujiangyan", //注册地图的名字
    roam: true, //开启鼠标缩放和平移漫游。默认不开启
    bottom: 80,
    left: 10,
    itemStyle: {
      color: "#4189f2", // 背景
      opacity: 0.7, //透明度
      borderWidth: 1.5, // 边框宽度
      borderColor: "#fff", // 边框颜色
      fontSize: 16, //
    },
    // 标签
    label: {
      show: true,
      color: "#fff", //地图初始化区域字体颜色
      fontSize: 18,
      formatter: function (params) {
        return params.name
      },
    },
    // 控制器
    viewControl: {
      beta: 80,
      alpha: 55,
      distance: 210,
      maxBeta: 180
    },
    // 灯光
    light: {
      main: {
        shadow: true,
        intensity: 1
      }
    },
    // 鼠标移入时样式
    emphasis: {
      itemStyle: {
        color: "#F63545"
      }
    }
  }
};
const totalNum = () => {
  let data = {};
  mapData.value.forEach((item) => {
    Object.keys(item.data).forEach((key) => {
      data[key] = data[key] ? data[key] + item.data[key] : item.data[key];
    });
  });
  return data;
}

onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      mapChart = echarts.init(map.value);
      mapChart.setOption(mapConfig, true);
    }, 1000);
  })
})
  cancleClick();
});

</script>

<style scoped lang="scss">
@@ -174,16 +197,17 @@
  width: 308px;
  position: absolute;
  left: 0;
  top: 0;
  top: 30px;
}

.map-info-container {
  width: 225px;
  position: absolute;
  right: 0;
  bottom: 200px;
  bottom: 120px;
  background: rgba(17, 34, 58, 0.6);
  border: 1px solid #29466A;
  z-index: 5;

  .info-title-container {
    width: 100%;
@@ -221,9 +245,11 @@
  }

  .info-content-container {
    padding: 18px 20px;
    position: relative;
    padding: 10px 20px;
    margin-top: -40px;
    font-size: 14px;
    z-index: 2;

    .info-item {
      width: 100%;
@@ -232,6 +258,7 @@
      justify-content: space-between;
      color: #4481DD;
      line-height: 28px;

      .info-text {
        color: #fff;
      }
@@ -243,4 +270,9 @@
.info-lable {
  font-family: 'PingFang SC' !important;
}

.test {
  position: absolute;
  top: 0;
}
</style>

 src/views/daoAnOffice/center/city-map.vue

New file
@@ -0,0 +1,350 @@
<template>
  <div class="map-container">
    <div class="map-content">
      <div class="map">
        <img src="@/assets/img/map/map.png" />
      </div>
      <div class="cover-container">
        <div class="cover" :class="{ 'cover-active': item.isActive }" v-for="item in coverList" :key="item.id">
          <img :src="item.img" />
        </div>
      </div>
      <div class="map-line-container">

        <!-- 天马镇 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="176.2618293762207"
          class="map-path-container street1" height="218.34570693969727"
          viewBox="0 0 176.2618293762207 218.34570693969727" fill="none">
          <g @click="mapClick(9)">
            <path
              d="M173.631 75.6565L170.631 68.1565L170.631 60.1565L170.631 53.1565L170.631 47.1565L165.131 40.1565L159.631 33.1565L154.631 35.1565L140.131 42.6565L136.631 35.1565L126.131 40.1565L126.131 47.1565L119.631 42.6565L114.131 49.1565L104.631 49.1565L100.631 40.1565L95.6305 35.1565L100.631 33.1565L98.1305 29.1565L93.6305 22.6565L84.1305 26.1565L86.6305 22.6565L77.6305 16.6565L61.1305 16.6565L56.6305 7.65651L51.1305 11.6565L46.6305 5.15651L35.6305 16.6565L20.6305 0.656513L14.1305 5.15651L18.1305 11.6565L14.1305 16.6565L18.1305 22.6565L24.6305 26.1565L20.6305 29.1565L5.13053 22.6565L0.630527 26.1565L5.13053 35.1565L11.6305 35.1565L20.6305 35.1565L20.6305 40.1565L14.1305 42.6565L18.1305 53.1565L20.6305 60.1565L24.6305 65.1565L26.6305 75.6565L18.1305 80.6565L18.1305 84.1565L16.1305 87.6565L14.1305 91.1565L9.13053 94.6565L14.1305 98.1565L9.13053 117.157L11.6305 123.157L14.1305 129.657L11.6305 143.657L18.1305 152.157L18.1305 167.657L23.1305 172.657L29.6305 170.657L35.1305 172.657L44.6305 178.657L53.6305 178.657L57.6305 180.657L69.6305 195.157L69.6305 200.657L90.1305 217.657L100.631 206.157L111.631 203.157L121.131 197.657L115.631 188.657L123.631 178.657L121.131 172.657L132.131 161.157L132.131 148.157L136.631 133.157L149.131 123.157L156.631 111.657L154.631 98.1565L156.631 84.1565L175.631 84.1565L173.631 75.6565Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="60" y="100" font-family="PingFang SC" font-size="12" fill="#fff">天马镇</text>
          </g>

        </svg>

        <!-- 灌口街道 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="83.66447067260742"
          height="59.80564880371094" class="map-path-container street2"
          viewBox="0 0 83.66447067260742 59.80564880371094" fill="none">
          <g>
            <path @click="mapClick(7)"
              d="M31.1423 16.05L26.6423 12.05L0.6423 32.55L6.1423 42.55L12.6423 44.55L9.6423 51.05L12.6423 53.05L19.1423 53.05L24.1423 49.55L35.6423 59.05L37.1423 56.55L35.6423 53.05L41.1423 49.55L45.6423 51.05L51.6423 49.55L53.1423 35.05L58.1423 35.05L71.1423 40.55L75.6423 32.55L81.1423 25.05L81.1423 19.05L83.1423 13.55L81.1423 5.54997L75.6423 0.549973L47.6423 7.54997L34.1423 17.55L31.1423 16.05Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="50%" y="58%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">灌口街道</text>
          </g>

        </svg>

        <!-- 蒲阳街镇 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="292.8034248352051"
          class="map-path-container street3" height="187.0151596069336"
          viewBox="0 0 292.8034248352051 187.0151596069336" fill="none">
          <g @click="mapClick(11)">
            <path
              d="M257.62 35.4996L239.12 35.4996L229.62 39.4996L224.62 45.9996L210.12 42.9996L181.62 35.4996L169.62 35.4996L164.62 39.4996L141.62 29.4996L117.12 20.9996L106.12 20.9996L103.12 10.9996L95.1203 10.9996L84.6203 14.4996L84.6203 20.9996L75.6203 29.4996L53.1203 10.9996L43.1203 10.9996L37.1203 0.99958L34.6203 5.49958L25.1203 10.9996L11.6203 10.9996L3.62035 20.9996L11.6203 39.4996L17.6203 55.4996L14.6203 58.9996L14.6203 64.9996L3.62035 64.9996L6.12035 71.4996L0.62035 79.4996L6.12035 86.4996L14.6203 86.4996L17.6203 91.9996L11.6203 91.9996L11.6203 115.5L28.6203 115.5L34.6203 121L40.6203 121L48.6203 128.5L43.1203 132L48.6203 135.5L48.6203 144.5L53.1203 147.5L63.1203 147.5L68.1203 140.5L75.6203 144.5L75.6203 135.5L84.6203 132L89.6203 140.5L106.12 132L121.62 144.5L117.12 155L121.62 161L117.12 167L121.62 174L121.62 182L127.12 182L135.62 174L131.62 161L131.62 155L141.62 155L158.62 167L176.12 182L190.62 182L218.12 186.5L229.62 182L236.12 174L232.62 164L236.12 151.5L234.37 146L232.62 140.5L235.87 136.25L239.12 132L263.62 106.5L292.12 95.4996L277.62 64.9996L288.62 35.4996L257.62 35.4996Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>

            <text x="50%" y="50%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">蒲阳街镇</text>
          </g>

        </svg>


        <!-- 奎光塔街道 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.83173370361328"
          class="map-path-container street4" height="145.86775398254395"
          viewBox="0 0 95.83173370361328 145.86775398254395" fill="none">
          <g @click="mapClick(8)">
            <path
              d="M49.2 18.2578L38.7 42.2578L33.7 51.2578L36.2 58.7578L30.2 70.2578L19.2 89.2578L12.7 96.2578L12.7 107.258L6.7 114.758L6.7 130.258L0.699997 138.258L6.7 142.758L19.2 145.258L19.2 135.258L22.7 124.258L25.2 114.758L22.7 103.758L33.7 96.2578L38.7 86.7578L41.2 70.2578L44.7 67.2578L49.2 77.7578L62.7 77.7578L70.2 86.7578L77.2 96.2578L89.2 96.2578L86.2 83.2578L91.7 77.7578L91.7 67.2578L95.2 58.7578L86.2 53.7578L77.2 53.7578L80.2 34.7578L86.2 23.7578L80.2 21.2578L83.7 13.2578L74.7 8.25784L70.2 0.757845L49.2 18.2578Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="68%" y="35%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">奎光塔街道</text>
          </g>

        </svg>


        <!-- 聚源镇 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="223.6521759033203"
          class="map-path-container street5" height="224.8439178466797"
          viewBox="0 0 223.6521759033203 224.8439178466797" fill="none">
          <g @click="mapClick(10)">
            <path
              d="M160.152 209.844L185.652 196.844L202.152 189.844L207.652 183.344L222.652 183.344L207.652 163.344L197.652 163.344L180.152 154.844L172.152 154.844L172.152 135.844L160.152 127.344L166.652 113.344L160.152 102.344L166.652 82.8439L160.152 77.8439L166.652 67.3439L180.152 61.8439L172.152 45.8439L156.152 37.8439L149.152 34.3439L149.152 42.3439L137.652 37.8439L137.652 27.3439L130.152 27.3439L126.652 34.3439L121.652 27.3439L116.652 34.3439L103.152 27.3439L103.152 19.3439L97.6522 19.3439L93.1522 12.3439L84.1522 8.84392L76.1522 12.3439L76.1522 1.34392L66.6522 12.3439L66.6522 27.3439L51.6522 37.8439L55.6522 51.3439L47.6522 67.3439L51.6522 77.8439L47.6522 82.8439L32.6522 72.8439L32.6522 82.8439L13.1522 96.3439L8.65218 102.344L8.65218 113.344L0.652176 132.344L8.65218 135.844L4.65218 150.344L4.65218 173.344L13.1522 189.844L24.1522 203.844L43.6522 196.844L59.6522 196.844L71.1522 213.344L84.6522 224.344L96.6522 224.344L102.652 209.844L106.652 196.844L111.652 209.844L137.652 213.344L141.152 209.844L160.152 209.844Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="45%" y="45%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">聚源镇</text>
          </g>

        </svg>


        <!-- 银杏街道 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="75.0037612915039"
          class="map-path-container street6" height="95.37733459472656" viewBox="0 0 75.0037612915039 95.37733459472656"
          fill="none">
          <g @click="mapClick(6)">
            <path
              d="M4.23329 30.1558L4.23329 47.1558L0.733292 49.6558L9.23329 59.6558L4.23329 65.1558L7.23329 67.1558L7.23329 72.1558L13.7333 72.1558L24.2333 78.1558L40.7333 93.1558L53.2333 85.6558L56.7333 89.1558L61.7333 85.6558L65.2333 93.1558L69.2333 94.6558L69.2333 74.1558L73.7333 72.1558L71.7333 67.1558L65.2333 69.6558L61.7333 65.1558L56.7333 59.6558L59.7333 53.1558L61.7333 47.1558L73.7333 44.6558L69.2333 41.6558L73.7333 38.6558L71.7333 34.1558L71.7333 26.6558L65.2333 14.6558L59.7333 0.655838L51.2333 4.15584L35.2333 4.15584L35.2333 13.1558L32.2333 17.6558L35.2333 21.1558L28.2333 30.1558L24.2333 36.6558L4.23329 30.1558Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="50%" y="55%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">银杏街道</text>
          </g>

        </svg>



        <!-- 幸福街道 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="68.77188110351562"
          class="map-path-container street7" height="92.37951946258545"
          viewBox="0 0 68.77188110351562 92.37951946258545" fill="none">
          <g @click="mapClick(5)">
            <path
              d="M29 5.64324L29 10.1432L22.5 5.64324L16 0.643245L8.5 5.64324L5 12.6432L0.5 23.1432L0.5 35.1432L12 37.6432L19 40.1432L16 44.6432L16 54.1432L12 62.6432L8.5 62.6432L8.5 69.1432L12 73.6432L12 79.1432L16 76.1432L19 81.6432L22.5 76.1432L29 76.1432L31.5 88.6432L45 91.6432L41.5 85.6432L45 83.6432L51.5 88.6432L60 91.6432L63.5 91.6432L60 85.6432L60 76.1432L66 73.6432L63.5 69.1432L57.5 69.1432L51.5 69.1432L45 62.6432L49 57.6432L63.5 62.6432L68 57.6432L57.5 51.1432L63.5 44.6432L57.5 37.6432L63.5 35.1432L55.5 27.1432L45 27.1432L49 23.1432L45 19.6432L49 12.6432L36 0.643245L29 5.64324Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="52%" y="50%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">幸福街道</text>
          </g>

        </svg>


        <!-- 石羊镇 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="252.26756286621094"
          class="map-path-container street8" height="240.62042236328125"
          viewBox="0 0 252.26756286621094 240.62042236328125" fill="none">
          <g @click="mapClick(4)">
            <path
              d="M138.735 205.5L145.235 202.5L163.235 179.5L172.735 174.5L182.235 161L188.735 138L221.735 110L228.735 105L242.235 86L251.735 68.5L250.735 58.5L251.735 51.5L246.235 46.5L228.735 36.5L221.735 43.5L213.235 43.5L202.235 36.5L202.235 27L188.735 27L182.235 22L182.235 16L172.735 16L176.235 8L163.235 8L149.735 0.5L138.735 0.5L133.735 14L119.735 14L114.735 20L114.735 27L122.235 24.5L126.735 27L126.735 29.5L119.735 32L112.235 36.5L112.235 41L114.735 46.5L95.7351 51.5L90.2351 58.5L79.2351 62.5L74.2351 60.5L67.2351 58.5L60.7351 64.5L60.7351 75L52.7351 78.5L40.7351 78.5L36.2351 89.5L27.7351 96.5L13.2351 96.5L0.735107 101L5.23596 108.7L13.2351 115L27.7351 126L49.7351 138L67.2351 153L78.2351 174.5L82.7351 196.5L78.2351 216L74.2351 225.5L95.7351 240L138.735 205.5Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="60%" y="38%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">石羊镇</text>
          </g>

        </svg>


        <!-- 青城山镇 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="372.3943176269531"
          class="map-path-container street9" height="376.0634460449219"
          viewBox="0 0 372.3943176269531 376.0634460449219" fill="none">
          <g @click="mapClick(3)">
            <path
              d="M88.8174 375.5L103.317 371L117.817 367.5L124.317 362L129.317 352.5L138.317 352.5L148.817 348L148.817 337L155.817 331L165.817 337L174.817 334L182.317 323L200.817 320.5L200.817 311.5L207.317 306L217.817 303.5L210.817 296L200.817 298.5L207.317 287.5L221.317 287.5L224.817 277L235.317 273.5L247.817 280.5L262.317 280.5L259.317 287.5L267.817 290.5L272.817 298.5L278.817 301L287.317 301L291.317 311.5L297.317 317L306.817 317L312.317 314L319.817 308.5L332.317 320.5L344.817 320.5L361.817 308.5L362.817 302.5L358.817 298.5L364.817 294L364.817 277L371.817 263L364.817 252.5L358.817 255.5L347.317 255.5L337.817 265.5L325.817 270.5L325.817 263L309.817 258.5L309.817 252.5L302.317 249.5L306.817 243.5L294.817 236L290.317 239.5L282.817 239.5L272.817 243.5L267.817 239.5L276.317 236L278.817 229L285.817 222L276.317 211.5L267.817 211.5L276.317 197L263.317 184.5L252.317 184.5L247.317 180.5L255.817 173.5L232.817 167L211.817 170L204.817 163L208.317 151.5L216.317 147.5L220.317 133.5L204.817 121L202.817 116L186.817 108.5L186.817 102L179.817 97.5L186.817 92L179.817 89L179.817 83.5L174.817 80L179.817 75.5L186.817 75.5L192.817 73L196.817 63.5L211.817 67L216.317 63.5L225.317 56L241.817 53L255.817 53L247.317 40.5L229.317 37.5L211.817 32L186.817 21.5L163.817 12.5L141.817 0.5L121.817 0.5L94.3174 8L75.3174 19L53.3174 21.5L36.3174 15L23.8174 8L0.817352 12.5L16.8174 37.5L23.8174 50L36.3174 67L28.8174 86L36.3174 97.5L50.3174 108.5L50.3174 121L44.3174 127L50.3174 141.5L59.8174 163L76.8174 180.5L79.3174 188.5L74.3174 197L66.3174 197L59.8174 205L62.3174 214.5L76.8174 221L84.8174 226L88.8174 243.5L88.8174 258.5L95.3174 270.5L100.317 278.5L95.3174 288L88.8174 300L95.3174 311L95.3174 318L91.3174 323L62.3174 323L55.8174 327.5L55.8174 343.5L74.3174 362L88.8174 375.5Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="45%" y="60%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">青城山镇</text>
          </g>

        </svg>


        <!-- 玉堂街道 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="267.40618896484375"
          class="map-path-container street10" height="229.27317810058594"
          viewBox="0 0 267.40618896484375 229.27317810058594" fill="none">
          <g @click="mapClick(2)">
            <path
              d="M200.422 213.007L211.922 200.507L217.422 184.007L222.922 179.507L217.422 171.007L230.922 152.007L236.422 137.507L251.922 123.007L266.422 113.507L256.922 108.507L251.922 108.507L251.922 104.007L245.422 104.007L245.422 96.5069L236.422 96.5069L241.922 88.5069L236.422 83.0069L226.922 78.5069L236.422 74.5069L233.422 65.0069L226.922 65.0069L222.922 51.5069L212.422 43.0069L207.922 51.5069L198.422 43.0069L192.422 47.5069L183.422 39.5069L160.922 39.5069L144.422 32.5069L129.922 20.0069L125.922 12.0069L114.422 7.00691L102.922 7.00691L102.922 1.00691L88.422 12.0069L61.922 9.50691L46.422 20.0069L36.922 26.5069L24.922 23.5069L19.922 32.5069L8.92203 32.5069L0.922028 39.5069L8.92203 43.0069L5.42203 47.5069L12.922 51.5069L8.92203 56.5069L12.922 61.0069L12.922 68.5069L24.922 74.5069L32.422 74.5069L28.922 78.5069L41.922 88.5069L46.422 96.5069L41.922 108.507L36.922 108.507L28.922 123.007L36.922 130.007L51.422 127.007L63.422 127.007L78.922 130.007L78.922 137.507L75.422 142.507L88.422 142.507L104.422 157.507L97.422 165.507L97.422 171.007L104.422 171.007L109.422 179.507L113.922 184.007L104.422 188.007L100.922 193.507L93.422 200.507L100.922 204.507L109.422 197.007L117.922 200.507L121.422 193.507L133.922 204.507L129.922 209.007L138.922 209.007L133.922 216.507L144.422 219.507L154.422 223.007L154.422 228.507L166.922 223.007L176.922 216.507L183.422 213.007L192.422 213.007L195.422 216.507L200.422 219.507L200.422 213.007Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="50%" y="45%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">玉堂街道</text>
          </g>

        </svg>



        <!-- 龙池镇 -->
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="789.9667510986328"
          class="map-path-container street11" height="321.66192626953125"
          viewBox="0 0 789.9667510986328 321.66192626953125" fill="none">
          <g @click="mapClick(1)">
            <path
              d="M352.467 117.57L332.967 125.07L311.467 125.07L299.967 130.07L292.967 125.07L266.467 125.07L232.467 130.07L216.467 125.07L184.467 125.07L168.967 133.07L145.967 133.07L135.967 142.07L123.467 142.07L106.967 142.07L86.4668 138.57L69.4668 146.07L69.4668 163.07L51.9668 178.57L26.9668 195.07L1.46675 205.07L16.4668 210.07L26.9668 220.57L39.9668 231.07L59.4668 238.57L78.4668 239.07L90.9668 247.57L97.4668 244.07L106.967 250.57L111.467 244.07L123.467 250.57L123.467 262.57L136.967 273.07L123.467 279.57L136.967 286.57L140.467 294.57L145.967 304.57L151.967 310.57L165.467 314.57L179.467 301.57L189.467 307.57L205.967 294.57L226.967 289.57L236.967 294.57L259.967 294.57L266.467 286.57L284.967 286.57L292.967 273.07L299.967 279.57L311.467 286.57L332.967 304.57L341.967 297.57L341.967 282.57L359.467 282.57L365.967 294.57L374.967 289.57L398.467 301.57L422.967 310.57L431.467 304.57L441.967 310.57L463.467 315.57L481.967 321.07L487.967 310.57L502.967 310.57L521.967 304.57L548.467 304.57L536.967 294.57L541.967 286.57L555.467 279.07L555.467 262.57L567.967 255.07L587.967 250.57L601.467 250.57L619.967 245.07L661.967 259.57L694.967 262.57L712.967 255.07L712.967 238.57L724.467 226.07L734.467 220.07L749.467 211.57L749.467 193.07L761.467 183.57L761.467 173.57L781.467 167.07L781.467 159.07L789.467 146.07L789.467 128.57L764.467 128.57L734.467 112.57L724.467 92.5697L712.967 80.5697L689.967 76.5697L676.467 54.0697L676.467 40.5697L647.967 35.0697L626.967 14.0697L609.967 0.569702L594.467 6.5697L572.967 19.0697L551.967 35.0697L548.467 49.0697L535.967 53.0697L517.467 49.0697L497.967 54.0697L487.967 64.5697L487.967 80.5697L431.467 102.07L424.967 112.57L417.967 125.07L398.467 133.07L360.467 125.07L352.467 117.57Z"
              stroke="rgba(0, 0, 0, 1)" stroke-width="1" fill="#000000">
            </path>
            <text x="60%" y="60%" text-anchor="middle" font-family="PingFang SC" font-size="12" fill="#fff">龙池镇</text>
          </g>

        </svg>



      </div>
    </div>

  </div>
</template>

<script setup>
import map1 from '@/assets/img/map/map-a1.png';
import map2 from '@/assets/img/map/map-a2.png';
import map3 from '@/assets/img/map/map-a3.png';
import map4 from '@/assets/img/map/map-a4.png';
import map5 from '@/assets/img/map/map-a5.png';
import map6 from '@/assets/img/map/map-a6.png';
import map7 from '@/assets/img/map/map-a7.png';
import map8 from '@/assets/img/map/map-a8.png';
import map9 from '@/assets/img/map/map-a9.png';
import map10 from '@/assets/img/map/map-a10.png';
import map11 from '@/assets/img/map/map-a11.png';

import { ref, defineEmits } from 'vue';

const emit = defineEmits(['mapItemClick', 'cancleClick']);

const coverList = ref([
  { id: 1, name: '龙池镇', img: map1, isActive: false },
  { id: 2, name: '玉堂街道', img: map2, isActive: false },
  { id: 3, name: '青城山镇', img: map3, isActive: false },
  { id: 4, name: '石羊镇', img: map4, isActive: false },
  { id: 5, name: '幸福街道', img: map5, isActive: false },
  { id: 6, name: '银杏街道', img: map6, isActive: false },
  { id: 7, name: '灌口街道', img: map7, isActive: false },
  { id: 8, name: '奎光塔街道', img: map8, isActive: false },
  { id: 9, name: '天马镇', img: map9, isActive: false },
  { id: 10, name: '聚源镇', img: map10, isActive: false },
  { id: 11, name: '蒲阳街道', img: map11, isActive: false }
]);


const mapClick = (id) => {
  if (coverList.value[id - 1].isActive) {
    coverList.value[id - 1].isActive = false;
    emit('cancleClick');
  } else {
    coverList.value.forEach(item => {
      item.isActive = false;
    });
    coverList.value[id - 1].isActive = true;
    emit('mapItemClick', id);
  }

}
</script>

<style lang="scss" scoped>
.map-container {
  width: 1060px;
  position: absolute;
  top: 140px;
  left: 50px;

  .map-content {
    width: 100%;
    position: relative;
  }
}

.cover-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}

.cover {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.cover-active {
  opacity: 1;
}

.map-line-container {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;

  .map-path-container {
    position: absolute;
    visibility: hidden;

    path {
      opacity: 0;
      pointer-events: fill;
      visibility: visible;
      cursor: pointer;
    }

    text {
      pointer-events: fill;
      visibility: visible;
      cursor: pointer;
      pointer-events: none;
    }
  }

  .street1 {
    top: 366px;
    left: 476px;
  }

  .street2 {
    top: 287px;
    left: 427px;
  }

  .street3 {
    top: 272px;
    left: 525px;
  }

  .street4 {
    top: 318px;
    left: 357px;
  }

  .street5 {
    top: 384px;
    left: 327px;
  }

  .street6 {
    top: 291px;
    left: 473px;
  }

  .street7 {
    top: 336px;
    left: 434px;
  }

  .street8 {
    top: 431px;
    left: 91px;
  }

  .street9 {
    top: 160px;
    left: 5px;
  }

  .street10 {
    top: 201px;
    left: 176px;
  }

  .street11 {
    top: 1px;
    left: 269px;
  }
}
</style>

 src/views/daoAnOffice/center/map.vue

@@ -367,7 +367,7 @@

.road {
  position: absolute;
  bottom: 202px;
  bottom: 180px;
  left: 2434px;
  z-index: 999;
  width: 65px;

 src/views/daoAnOffice/index.vue

@@ -270,7 +270,7 @@
.map-change-button {
  width: 94px;
  position: absolute;
  bottom: 100px;
  bottom: 50px;
  left: 2416px;
  font-size: 16px;
  color: #FFFFFF;

 src/views/daoAnOffice/right/publicize/index.vue

@@ -48,12 +48,15 @@
import Test3 from '@/assets/img/test_img/t6.jpg';
import Test4 from '@/assets/img/test_img/t7.jpg';

import video1 from '@/assets/video/video1.mp4';
import video2 from '@/assets/video/video2.mp4';


import RightTitle from "@/components/right-title";
import { ref } from 'vue';

// 测试视频
const testVideo = 'https://www.w3schools.com/html/movie.mp4';
const testVideo = ref('');
const isShowVideo = ref(false);
const videoDom = ref(null);
const selectItems = ref([
@@ -66,37 +69,41 @@
    itemIndex: 1,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '全国交通安全日',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: Test1,
    video: video1
  },
  {
    itemIndex: 2,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '冬季交安宣传忙 营造文明出行好氛围',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: Test2,
    video: video2
  },
  {
    itemIndex: 3,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '高速交警强化宣传提示 确保春运交通安全',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: Test3,
    video: video1
  },
  {
    itemIndex: 4,
    time: '2023 12-12',
    type: '道路隐患',
    unit: '都江堰市公安局',
    unit: '云哨警示风险自纠',
    rectTime: '2023-13-23',
    state: '抢修中',
    image: Test4,
    video: video2
  },
]);

@@ -105,9 +112,12 @@
  selectItem.isActive = true;
}

const openVideo = () => {
const openVideo = (item) => {
  isShowVideo.value = true;
  videoDom.value.play();
  testVideo.value = item.video;
  setTimeout(() => {
    videoDom.value.play();
  },500);
}

const closeVideo = () => {

 src/views/test.vue